Wednesday, March 17, 2010

Firefox extension programming: add actions to status bar icon


Note: This is a successive post of put an icon on the status bar.

After we add our icon to the status bar of Firefox, we want to make it useful. In this tip, we show how to implement the following three functions.

   1. When the mouse hovers over the icon, a tooltip pops up to show some text.
   2. Clicking on the icon changes its color.
   3. Right-clicking on the icon pops up a context menu.

Tooltip when mouse over

We add a handler for the "mouseover" event to the status-bar panel we created before:

   <statusbarpanel id="ourPanel"
         onmouseover="document.getElementById('ourPanel').tooltipText='Hello'">
      <image id="ourIcon" />
   </statusbarpanel>

The handler will set the tooltip of our status-bar panel to "Hello". Since the status-bar panel contains only one element, our icon, when the mouse hovers over the icon, "Hello" will show up.

Clicking on the icon changes its color

We add a handler for the "click" event to our status-bar panel.

   <statusbarpanel id="ourPanel"
         onmouseover="document.getElementById('ourPanel').tooltipText='Hello'"
         onclick="ourExtensionClickHander(event)">
      <image id="ourIcon" />
   </statusbarpanel>

In the included JavaScript "our_extension.js", we define the ourExtensionClickHander() function to switch the icon between green and grey:

   function ourExtensionClickHander(event)
   {
      if (0 == event.button)
      {
         // left button is clicked.

         var theIcon = document.getElementById("ourIcon");
         if (theIcon)
         {
            var attr = theIcon.getAttribute("value");

            if (attr == "grey")
               theIcon.setAttribute("value", "green");
            else
               theIcon.setAttribute("value", "grey");
         }
      }
   }

In the function, we first verify that the first button (left button) of the mouse is pressed. Then we get the node of our icon on the status bar. We retrieve its value and make the change. How we define the color values for the icon can be found in my previous post.

Context menu

We define a context menu for our icon in the same XUL file. To simplify things, in the context menu, we add only one menu item.

   <popupset id="mainPopupSet">
      <menupopup id="ourContext">
         <menuitem id="ourMenuItem" label="Our Item" onclick="alert('Hello World')" />
      </menupopup>
   </popupset>

It overlays the main popup set with our popup menu "ourContext". Inside our popup, we define one menu item "ourMenuItem".

After defining the context menu, we can add it to our icon.

   <statusbarpanel id="ourPanel"
         onmouseover="document.getElementById('ourPanel').tooltipText='Hello'"
         onclick="ourExtensionClickHander(event)
         context="ourContext">
      <image id="ourIcon" />
   </statusbarpanel>

Now, when you right-click on the icon, the menu "Our Item" shows up. Clicking on it pops up a dialog saying "Hello World".

To see a live example, check out my extension Take A Break.

No comments:

 
Get This <