how to handler preference and interface of mozilla firefox addons? - firefox-addon

Question

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

Answer 1

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;