Firefox context menu item icon

Question

I am trying to add an icon in context menu but don't know why it is not showing.

Here is the complete code:

chrome.menifest

content   xulschoolhello              jar:chrome/xulschoolhello.jar!/content/
skin      xulschoolhello  classic/1.0 jar:chrome/xulschoolhello.jar!/skin/
locale    xulschoolhello  en-US       jar:chrome/xulschoolhello.jar!/locale/en-US/

overlay chrome://browser/content/browser.xul  chrome://xulschoolhello/content/browserOverlay.xul

style   chrome://browser/content/browser.xul  chrome://xulschoolhello/skin/browserOverlay.css

browserOverlay.xul

<?xml version="1.0"?>

<!DOCTYPE overlay SYSTEM
  "chrome://xulschoolhello/locale/browserOverlay.dtd">

<overlay id="xulschoolhello-browser-overlay"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  .
  .
  .

  <!-- Context menu additions -->
  <popup id="contentAreaContextMenu">
      <menuseparator id="ss-context-menu-separator"/>
      <menuitem id="ss-context-menu-item" class="menuitem-iconic"
                label="click me"
                oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);"/>
  </popup>
</overlay>

browserOverlay.css

#ss-context-menu-item {
  list-style-image: url("ss_16.png");
}

Any idea about problem?

First thing to test: does that image load at all? Try opening `chrome://xulschoolhello/skin/ss_16.png` in browser. — Wladimir Palant, Sep 19 '11 at 12:19
@Wladimir Palant: I posted the whole code because may be some other thing causing the problem. Anyway reduced the code. chrome://xulschoolhello/skin/ss_16.png is opening in the brwoser. — MA1, Sep 19 '11 at 12:45
Shouldn't the file be called chrome.manifest? (not menifest) — John Pickup, Sep 19 '11 at 12:46

Woundorf · Answer 1 · 2011-09-19T18:46:16.403

0

From my tests with my own extension, I think that maybe you have to add a reference to the stylesheet in the overlay, in addition to the one in chrome.manifest. To do this you have to add the following line before the doctype declaration:

<?xml-stylesheet href="chrome://xulschoolhello/skin/browserOverlay.css" type="text/css"?>

If you don't put the file name, leaving only chrome://xulschoolhello/skin/, it should also work, according to the tutorial.

edited Sep 19 '11 at 18:46

answered Sep 19 '11 at 12:53

Woundorf

213
3
10

already checked, no effect. css and image files are in same directory so no need to use the full path. – MA1 Sep 19 '11 at 12:57
Ok. Are you referencing browserOverlay.css in the overlay? It isn't in your snippet. – Woundorf Sep 19 '11 at 13:07
You are wrong - URLs in CSS files are always relative to the CSS file location. So using a full URL is unnecessary. And `browserOverlay.css` is referenced in `chrome.manifest` (it is a style overlay). – Wladimir Palant Sep 19 '11 at 13:08
Sorry, my fault. The stylesheet is indeed referenced in the last line of `chrome.manifest`. – Woundorf Sep 19 '11 at 13:21
I've now had the oportunity to do some tests with my own extension and I think that you have to link to the stylesheet from the overlay, in addition to the reference in `chrome.manifest`. I will edit my answer to give more details. – Woundorf Sep 19 '11 at 15:17
@Woundorf: still no effect. other css styles are working like color:green will change the menuitem label color to green. – MA1 Sep 19 '11 at 18:24
Well, then I have no clue what it may be :( – Woundorf Sep 19 '11 at 18:33

Firefox context menu item icon

1 Answers1