firefox sidebar menu or list of elements. resources/help - firefox

I am struggling to find any resources on firefox extensions which construct a sidebar and put elements into them. plus tyhe other functionalities within a sidebar. I have made a emptysidebar. Now i need to display a dynamic array(which is formed using a JS function).
I have absolutely no idea how to go about it. Can someone please help!
this is the code of the sidebar page. I need a xul element like the menuitem where i can display a list of items. How do i get that in a sidebar?
<page id="sbEmptySidebar" title="emptysidebar"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
> <vbox flex="1">
<label id ="l1">
</vbox> </page>

You should used a list box, it would be the best way to display an array of elements in the sidebar. You can check here for more details on the XUL element:
https://developer.mozilla.org/en/XUL_Tutorial/List_Controls
In order to add elements dynamically from JavaScript you can use the appendItem() function on the listbox object, check here for more details and examples:
https://developer.mozilla.org/en/XUL_Tutorial/Manipulating_Lists

Related

protractor using xpath //*[contains('text')] error element not visible

Hi I have this element from a dropdown menu I try to select:
<div class="tt-suggestion tt-selectable">
<strong class="tt-highlight">Auto Customer</strong>
</div>
If I use element(by.xpath("//strong[contains(text(),'Auto Customer')]")).click(); I can select it no problem. But if I use element(by.xpath("//*[contains(text(),'Auto Customer')]")).click(); I get "Failed: element not visible"
Can someone explain this to me please?
Thank you
Because the * in //*[contains(text(),'Auto Customer')] means any tag, not only the strong Tag. But //strong[contains(text(),'Auto Customer')] must be strong Tag.
//*[contains(text(),'Auto Customer')] should find more then one elements on page, and the first one is not visible. You can try this xpath in Chrome DevTool's Element Tab to see how many elements it can find and the first one is visible or not.

Native script list template binding not working

I cannot make working binding with ListView and template.
<ListView #userListView [items]="usersViewList" (itemTap)="onItemTap($event)">
<template let-user="item" let-i="index">
<GridLayout columns="auto">
<Label [text]="user.name" col="0"></Label>
</GridLayout>
</template>
</ListView>
at cration time user.name is assigned properly, but later if I call.
user.name = "other name";
Nothing happens.
Binding context is set to item in usersViewList correctly. But no changes are propagated to individual list item ever.
Thank for advice!
You can't call user.name "later" (guessing in your code behind component file?).
If you need to access the tapped item you can use the index of the tapped item and then you can grab it from your items array like
usersViewList[index].name
You have also itemTap which provides you with arguments where you8 can directly access the tapped index like show here
The best practice, in this case, is to compare your code with a sample that demonstrates the exact same case. Here you can find one. And many other examples are posted in this section of the same application.

Can you control pinterest's "find image" results?

Rather than add Pin It buttons through our site, I would like to simply control what images show up in Pinterest's "Find Image" results if a user decides to pin one of our URLs.
As of now, "Find Images" allows the user to scroll through the images it finds on the page so they can select which image to pin. The "found" images start with the first jpg in the html file, I'm assuming (could that be a bad assumption??). On our site, this forces a user to scroll through about 15 navigation and promotion images before arriving at the featured product image. Is there any way to specify this image to show first in those results? Maybe through a meta tag, or by adding a class or id to the element?
Without a public Pinterest API, this seems like just guesswork, but I wanted to see if anyone else has run into this, or solved this. Thanks.
A lot of search results including the Pinterest Help Center talk about using nopin in HTML elements, which is invalid HTML. What they don't document is a data attribute to the same (well formed) effect.
<img src="foobar" data-pin-nopin="true" />
Adding the nopin attribute will exclude the image from appearing on Pinterest:
<img src="..." nopin>
I solved this by simply loading the image before all others in the page. In this case, I gave it width="0" and height="0" (you could also give it style="position: absolute; left: -9999px; top: 0;" just to be sure).
This won't break the page layout, but will force Pinterest to find this image first. The only downside is that the browser will load the page a few milliseconds slower, but if you're reusing this image later in the page anyway, you should make up for lost time then.
Pinterest will find any images from <img> tags (it will ignore CSS background images) that are at least 80px x 80px.
The order the images show up on in the Pinterest list is determined by the order they are specified in the HTML.
As you have discovered, you can alter the CSS of an image to "hide it" without actually hiding it by either moving it off the page with absolute positioning or 0 height and width. Any images that are set to display: none will not be picked up by Pinterest.
You can instruct the share preview to only grab specific images from the page by using the “image_include” configuration option. First, set image_include to your desired class name (id selectors are not allowed, only class selectors), then add that same class name to each of the images on the page that should be grabbed. For image_include, don’t add the ‘.’ selector. Here’s an example:
<script type="text/javascript">
var addthis_config = {
image_include: "at_include"
}
</script>
Once image_include has been defined with a class, add that class to the desired images on the page. In this example, the only images on the page that will be grabbed, will be the images with the at_include class (img1.jpg and img3.jpg).
<img src="http://www.example.com/img1.jpg" class="at_include" />
<img src="http://www.example.com/img2.jpg" />
<img src="http://www.example.com/img3.jpg" class="at_include" />
I was reading this blog which suggests the following:
Use the global no pin flag to prevent pinning on the whole site
Manually add the Pin It widget to those images you want to make pin-able.
Given Pinterest's webmaster tools appear to only have a blacklist, rather than a whitelist option (that you are seeking), this could be a possible solution. Another stated benefit of this is you can also supply suggested pin text through the Pin It widget.
Only downside to this I guess is that it may break the user's own Pin tools. Pinterest does allow you to supply a custom "denied" message, so I guess you can say "please use our site's pin buttons directly".
I've tried this, and it works. It seems like a decent approach, at least until Pinterest sees fit to add some better tools, such as an image whitelist option. The main drawback is needing to add Pin-it buttons on every image you want to enable for your users & your users may be annoyed that they can't pin anything.
Unfortunately, there is no way to mark several images on your page as preferred, but you can mark one image to stay at the top of your images when someone pin it. Specify this meta-tag in <head>:
<meta property="og:image" content="http://YOUR-DOMAIN.com/IMAGE.jpg"/>
I have not found official confirmation for this feature, but it works great with addthis sharing plugin.
Add this script before the actual call to pinterest. And set images that you do not want to show with a class called 'nopin'
<script type="text/javascript">
var addthis_config =
{
image_exclude:'nopin'
}
</script>
<div id="toolbox" class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_tumblr"></a>
<a class="addthis_button_pinterest"></a>
</div>
</div>
If anyone is using AddThis, please check this thread: http://support.addthis.com/customer/portal/questions/1570789
AddThis has some, uh, unique functionality that affects the image picker presented. As in, when there is only one image on the page, it ignores the defined og:image.
If you set that lone image to be excluded, then the image picker won't show any images for selection.

How can I creating an autocomplete textbox with the "Search" magnifying Glass

If I create a textbox in a Firefox with a type of "autocomplete" I am able to get autocomplete working properly. However, the textbox is a intended to be used as search textbox (with autocomplete). Thus, in addition to autocomplete I also want the standard UI used when the textbox has a type of "search." In particular, Firefox shows a magnifying glass that turns into an "X" when the user types into it.
Is there a clean (or, failing that, not so clean) way of accomplishing this?
Firefox Searchbar ,the one on right top usually, has type="autocomplete" and has the searchbutton
First: browser.xul of firefox has a toolbaritem which searchbar nested in it.
<toolbaritem id="search-container" title="&searchItem.title;"
align="center" class="chromeclass-toolbar-additional"
flex="100" persist="width" removable="true">
<searchbar id="searchbar" flex="1"/>
</toolbaritem>
searchbar has the following css property in browser.css.
searchbar {
-moz-binding: url("chrome://browser/content/search/search.xml#searchbar");
}
That url in css property brings us to search.xml which has the textbox and the searchbutton is added to textbox in a hbox as far as i can understand.
<xul:textbox class="searchbar-textbox"
anonid="searchbar-textbox"
type="autocomplete"
flex="1"
autocompletepopup="PopupAutoComplete"
autocompletesearch="search-autocomplete"
autocompletesearchparam="searchbar-history"
timeout="250"
maxrows="10"
completeselectedindex="true"
showcommentcolumn="true"
tabscrolling="true"
xbl:inherits="disabled,disableautocomplete,searchengine,src,newlines">
<xul:box>
<xul:button class="searchbar-engine-button"
type="menu"
anonid="searchbar-engine-button">
<xul:image class="searchbar-engine-image" xbl:inherits="src"/>
<xul:image class="searchbar-dropmarker-image"/>
<xul:menupopup class="searchbar-popup"
anonid="searchbar-popup">
<xul:menuseparator/>
<xul:menuitem class="open-engine-manager"
anonid="open-engine-manager"
label="&cmd_engineManager.label;"
oncommand="openManager(event);"/>
</xul:menupopup>
</xul:button>
</xul:box>
<xul:hbox class="search-go-container">
<xul:image class="search-go-button"
anonid="search-go-button"
onclick="handleSearchCommand(event);"
tooltiptext="&searchEndCap.label;" />
</xul:hbox>
</xul:textbox>
Well this is not an total answer, but gives a head start for you or others who may contribute I guess. For further detail you can dig omni.jar in mozilla firefox directory.

img tag inside anchor tag... read on

So I have add to cart button, which is comprised of an anchor tag that has an image tag inside it. The anchor tag is using a bunch of javascript effects for mouseover etc that does image swap of this image in question etc.
Now, I have a function "AddCartButton" in my codebehind class that handles click event of this anchor tag. This obviously does not work when javascript is disabled. So I replaced the img tag inside the anchor tag with control, but Those swappings are not working for my though.
What are my options? I want the click to be handled by my C# function irrespective of whether javascript is enabled, and I want the mouseover effect when javascript is enabled.
P.S. It is a repost, but there was only 1 view or something for last post, so I changed the title a lil bit.
<div>
<a id = "addcartButton" href = "#" runat = "server" onMouseOut="MM_swapImgRestore()" onserverclick = "AddCartButton" onMouseOver="MM_swapImage('Image1111111111','','../_images/b_addCart_f2.gif',1)">
<img runat = "server" src='../_images/b_addCart.gif' AlternateText="Add to Cart" name="Image1111111111" width="106" height="29" border="0" />
</a>
</div>
So basically I want something that is working even when javascript is disabled. I still want all those mouseover effects etc when javascript is availabel though.
have you looked at ImageButton class?
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.imagebutton.aspx

Resources