how to create context menu in statusbar? - firefox-addon

I have some problems
1. how do I make my statusbar context menu that consists of 2 choices of menu preferences and addons status
example of context menu i want to make
this is my code :
<popupset>
<menupopup id="intransContextMenu">
<menuitem label="intrans aktif"/>
<menuitem label="preferensi"/>
</menupopup>
</popupset>
<statusbar id="status-bar">
<image src="chrome://inlinetrans/skin/imagesOn_kecil.png" />
<statusbarpanel id="status-bar-intrans"
label="intrans"
context="intransContextMenu"
onclick="alert('okeh cuy')"
tooltiptext="intrans versi 1.0"
/>
</statusbar>
how to add images in the context menu? I have tried but why do I paste a picture that always appears under the label is not on the side of the label as I expected?
example of context menu i want to make
this is my code :
<popup id="contentAreaContextMenu">
<image src="chrome://inlinetrans/skin/imagesOn_kecil.png" />
<menuitem class="inlinetrans" id="inlineContext" oncommand= "hadits_mean.startFind(null);"
label="Cari Terjemahan"/>
</popup>
note :
whether the code used to display the menu by right clicking on the statusbar and allows web pages to be made in one file?
thank you for the answer..

I am not sure if the images are your only problem now? Opening the context menu should work (you are using the context attribute correctly).
Regarding images, have a look at the documentation. For statusbarpanel, you have to set the image attribute:
<statusbar id="status-bar">
<statusbarpanel id="status-bar-intrans"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
label="intrans"
context="intransContextMenu"
onclick="alert('okeh cuy')"
tooltiptext="intrans versi 1.0"
/>
</statusbar>
You might also want to have a look at the style classes and play with them (to be honest I'm not 100% sure if it is just sufficient to set the image attribute, so if this does not work, try with the style classes).
Similar for the menuitem. You have to set the image attribute and give the element the style class menu-iconic:
<menuitem class="inlinetrans menu-iconic"
id="inlineContext"
oncommand= "hadits_mean.startFind(null);"
label="Cari Terjemahan"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"/>
Note: Afaik the statusbar is going to be removed in Firefox 4 (at least by default it is disabled)!

Related

WiX/Msi textbox border covered up by background image if text is too long

I have an edit control on my custom dialog, that defaults to a session property SERVICE_URL.
<Control Id="serviceUrlTextBox" Type="Edit" X="135" Y="45" Height="17" Width="215" Property="SERVICE_URL" />
If the text fits the textbox, everything looks alright, if the text is too long however, the border goes missing. If the user adds/removes text (once the dialog is shown), that doesn't change the appearance, only the initial length has an effect.
Using Multiline="yes" does not help, the text is never wrapped and there is no border either.
How can I keep the border even if the text is too long? I'm using WiX Toolset v3.8.
EDIT: The background plays a role, as Buzka suggested (notice the background "crowding in" when the text is too long). Clearly a bug. Any ideas how I can get it to work short of removing the background?
That's how I have created the different background:
<Binary Id="dialogBackground" SourceFile="Resources\WixUIDialogBackground.png"/>
<Control Id="background" Type="Bitmap" Text="dialogBackground" Width="370" Height="243" X="0" Y="53" TabSkip="no" />
<Control Id="explanationLabel" X="135" Y="23" NoWrap="no" RightAligned="no" Transparent="yes" Type="Text" Width="215" Height="100" Text="Please provide the URL of the SettingsService. If you prefer, you may change it at a later stage in the Settings." />
<Control Id="serviceUrlTextBox" Type="Edit" X="135" Y="45" Height="17" Width="215" Property="SERVICE_URL" />
I'm using v3.8 too, don't have that problem in my installer. I can see you use custom background color, maybe thats reason?
#Edit
I mean maybe you should set custom border to textbox too? Or try with default backgroud color.
#Edit
After LOOOOONG searching... i found something like this:
Unfortunately, that's how MSI draws it. There's no concept of a custom
control in MSI UI, so there's nothing WiX can do to fix it.
So i think my answer was good, no chances to change it, cause it's not supported.

Create a menu like in Firebug

I try to develop my Firefox addon and I would like to have a menu similar to Firebug, a menu-button with a picture. Here is what I mean:
I tried to set the image attribute, with CSS but the picture is never displayed.
Anyone have an idea or an example?
The MDN page on menu-button has an example that should work for you in an overlay. Here is an adaptation that could be inserted into your overlay (with the style suggestion from Wladimir):
<toolbarbutton type="menu-button" label="" style="list-style-image: url('http://cdn.sstatic.net/stackoverflow/img/favicon.ico')">
<menupopup>
<menuitem label="Save This Document"/>
<menuitem label="Save All" oncommand="alert('Save All'); event.stopPropagation();"/>
</menupopup>
</toolbarbutton>

Set custom theme with default page background in WP7.1 Mango

I'm creating a WP Mango app. I want to set the default page background to White, irrespective of whether Light or Dark Theme is selected, exactly like the default mail application.
I've followed this article and tried changing the default PhoneBackgroundBrush as:
(Application.Current.Resources["PhoneBackgroundBrush"]as SolidColorBrush).Color = Colors.White;
Any idea what I'm doing wrong or how to achieve that?
I messed with the sample, and simply don't recommend doing this. Do the extra work, create your own resources, and apply them yourself.
This method doesn't show updates in the designer, which will make your UI development difficult.
It also doesn't even work properly -- the background doesn't change. If you read the comments on the blog post, there are other issues with it working with other controls.
So, just do it normally - in your App.xaml (you could also do it in a seperate ResourceDictionary)
<!--Application Resources-->
<Application.Resources>
<SolidColorBrush Color="White" x:Key="WhiteBrush" />
<SolidColorBrush Color="#FFF222" x:Key="UglyYellowBrush" />
</Application.Resources>
then, on a page
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="{StaticResource UglyYellowBrush}">
... </Grid>
You could even do this quickly on all your pages using Find & Replace, provided that you never changed the name 'LayoutRoot'. If you find
<Grid x:Name="LayoutRoot" Background="Transparent">
you can replace with
<Grid x:Name="LayoutRoot" Background="{StaticResource UglyYellowBrush}">
The solution of creating your own style did not work for me. I tried setting the background to a light gray which worked in the design view but when I ran the emulator the standard black background appeared.

tooltip not working

I'm using this code in *.xul
<tooltip id="tt">
<label value="additional information"/>
</tooltip>
<statusbar id="status-bar">
<statusbarpanel id="mypanel" tooltip="tt"
label="my panel"
/>
</statusbar>
I don't know why but when I'm over mypanel with mouse. There is no popup window with "additional information"
thank you for help
I'm not sure, but this might be because the <tooltip> element needs to be inside of a <popupset> element. By the way, you shouldn't use the statusbar anymore; use the add-on bar instead: https://developer.mozilla.org/en/The_add-on_bar

how to handler preference and interface of mozilla firefox addons?

I want to ask some questions:
What steps should I do to make the interface on mozilla firefox and handle all these interfaces.
interfaces that I want to make are:
status bar that consists of labels and pictures and if the status bar on the right click menu will display the active addons (addons menu inactive hidden) and preferences.
current web page on the right click, on the browser will display a context menu "terjemahkan" and there are pictures on the left-hand corner.
when I select the options button on the tools menu >> addons, users can adjust these addons settings with the radio buttons
when the context menu is selected then the browser window will show the desired results
the steps that I have done is:
i was made the status bar but why the picture I want not to appear when I've made as directed. as well as on the context menu, the image can not appear in the upper left corner of the menu like in general.
<?xml version="1.0"?>
<overlay id="inline_trans"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<!--
<script type="application/x-javascript" src="chrome://translator/content/script.js" />
<script type="application/x-javascript" src="chrome://translator/content/interface.js" />
-->
<!-- menu klik kanan pada halaman web -->
<popup id="contentAreaContextMenu">
<menuseparator />
<menuitem id="intransContextMenuPage"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
label="terjemahkan dengan intrans"
oncommand="inline.script.getText()" />
</popup>
<!-- pilihan menu pada status bar -->
<popupset>
<menupopup id="intransContextMenu">
<menuitem label="intrans nonaktif"
image="chrome://inlinetrans/skin/imagesOff_kecil.png"
hidden="true"/>
<menuitem label="intrans aktif"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
hidden="false"/>
<menuseparator />
<menuitem label="preferensi"/>
</menupopup>
</popupset>
<!-- ========================================= -->
<!-- statusbar-->
<statusbar id="status-bar">
<statusbarpanel id="status-bar-intrans"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
label="intrans"
context="intransContextMenu"
tooltiptext="intrans versi 1.0"
/>
</statusbar>
</overlay>
UI options preferences
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://inlinetrans/locale/options.dtd">
<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
id="translate-preferences"
title="&options.title;"
buttons="accept, cancel"
style="padding:0px; margin:0px;"
ondialogaccept="options.save()"
onload="options.init();"
onunload="options.deconstruct();">
<!--
<stringbundleset id="stringbundleset">
<stringbundle id="locale-properties" src="chrome://translator/locale/translator.properties"/>
<stringbundle id="properties" src="chrome://translator/content/translator.properties"/>
</stringbundleset>
-->
<!--
<script src="chrome://inlinetrans/content/options.js" />
-->
<description value="&options.desc;"
style="
background: #fff url('chrome://inlinetrans/skin/options.png') no-repeat;
min-width:400px;
min-height:40px;
padding-left:55px;
padding-top:10px;
margin:0px;
border-bottom: 2px solid #757575;
font-size:1.5em;"/>
<vbox style="padding:10px;">
<groupbox>
<caption label="&options.ui;"/>
<label value="&options.results.desc;"/>
<radiogroup id="display.results" style="padding-left:20px;">
<radio id="results.cat" value="category" label="&options.results.cat;"/>
<radio id="results.noncat" value="noncategory" label="&options.results.noncat;"/>
</radiogroup>
</groupbox>
</vbox>
</dialog>
The most confusing thing for me is how I do all the handler interface.
for example:
change the status of addons, from active to inactive
take the value of the selected radio button
I cannot give you an answer to all of your questions, partly because I don't know exactly what you want, but here is a start:
To show an image next to the menu item, you have to give the element the class menuitem-iconic as described in the documentation:
<menuitem id="intransContextMenuPage"
class="menuitem-iconic"
image="chrome://inlinetrans/skin/imagesOn_kecil.png"
label="terjemahkan dengan intrans"
oncommand="inline.script.getText()" />
I'm not sure for the statusbar, by I would follow the description in the documentation:
The following classes may be used to style the element. These classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.
statusbarpanel-iconic
Use this class to have an image appear on the statusbarpanel. Specify the image using the src attribute. The image will appear instead of the label.
You can get the value of the selected radio button by getting a reference to the radiogroup,access its property selectedItem which gives you a radio element and read the value property:
var value = document.getElementById('display.results').selectedItem.value;

Resources