Set a different icon for a contextMenus item

Assigned to



WebExtensions: Frontend
6 months ago
16 hours ago


(Reporter: Pierre Bertet, Assigned: swapneshks, Mentored)



53 Branch

Firefox Tracking Flags

(Not tracked)


(Whiteboard: [design-decision-approved][contextMenus] triaged)

MozReview Requests


Submitter Diff Changes Open Issues Last Updated
Error loading review requests:


(1 attachment)



6 months ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:53.0) Gecko/20100101 Firefox/53.0
Build ID: 20161201030205

Expected results:

I understand from the documentation [1] that it is not possible to have different icons for different menu items.

But is there a way to have an icon for the addon, and another one for the menu items?

At the moment we are using two different icons for gtranslate [2], because the logo doesn’t represent the action and is too noisy to be used in that context.



6 months ago
Component: Untriaged → WebExtensions: Untriaged
Product: Firefox → Toolkit
Component: WebExtensions: Untriaged → WebExtensions: Frontend
Summary: (WebExtensions) Set a different icon for a contextMenus item → Set a different icon for a contextMenus item
Whiteboard: [design-decision-needed]

Comment 1

5 months ago
Unless I'm mistaken, I think I would need this to port Context Search, which expands the context menu to contain the search plugins from the Search Bar (CTRL+K). 

I would be looking to replicate the current UI:


3 months ago
Whiteboard: [design-decision-needed] → [design-decision-needed][contextMenus]
Duplicate of this bug: 1337470
Hi Pierre, this has been added to the agenda for the May 2 WebExtensions Triage meeting. Will you be able to join us? 




21 days ago
Duplicate of this bug: 1361085

Comment 5

21 days ago
It sounds good to me that in the sub-menu (as shown in the screenshot in comment 1) should have custom icons. We'd like to retain that the top level menu item still has the add-on icon on it so we clearly indicate to the user where the context menu item is coming from. Let's do it.
Priority: -- → P3
Whiteboard: [design-decision-needed][contextMenus] → [design-decision-approved][contextMenus]
Ever confirmed: true
Keywords: good-first-bug

Comment 6

8 days ago
Hi.. Can I take up this bug? (I am a beginner and have worked only on 8-9 moz bugs).

From an initial glance, it appears that the end result should be a combination of the following:
1. Menu snapshot in the documentation ([1] in the bug Description)
2. Screenshot in comment#1
Flags: needinfo?(tomica)
Hi Swapnesh, sure you can.

That sounds about right.  Are you familiar with mozreview [1]?  Let me know if you have any questions.

Assignee: nobody → swapneshks
Flags: needinfo?(tomica)

Comment 8

7 days ago
(In reply to Tomislav Jovanovic :zombie from comment #7)
> Are you familiar with mozreview [1]?  Let me know
> if you have any questions.
> 1)

Yes, I have learnt it just a few days back. :)

I have a few doubts regarding which files to modify. After digging a bit, I found the following files:

I'm a bit unsure about how the frontend has to be modified to include the icon and what changes need to be made. Could you help me out a bit here?
Flags: needinfo?(tomica)
Yes, you've got the right files.  Specifically, [1] is where we set the current icon on the top level menu item for each extension, and you would have to do something similar around [2], thought the icon will from `item`, not the manifest.

Flags: needinfo?(tomica)
> 2)

or better yet
Comment hidden (mozreview-request)

Comment 12

3 days ago
Comment on attachment 8869744 [details]
Bug 1321544 - Set different icon for contextMenus item in MozReview;

In this patch, I've made only one addition and I feel that something more needs to be added. 
Also, I tried testing the changes but couldn't figure out how to, i.e., how do I test the UI? (I found a mochitest browser/components/extensions/test/browser/browser_ext_browserAction_contextMenu.js that calls contextMenus.create, but how to replicate similar behaviour in a firefox build?)
Yeah, this will not be enough.  First of all, you need to determine the correct icon dimensions, and to resolve the icon URL, similar to the code around line 60 I pointed you at [1].

For testing, you will either need an extension that creates several menu items with different icons, or even better, to do it from a mochitest.

After you make your code changes, you will need to build firefox, and then run the test with:

    mach build faster
    mach mochitest browser/components/extensions/test/browser/browser_ext_browserAction_contextMenu.js

(your test shouldn't really end up in that file, but it might be easier to start with modifying an existing test)


Comment 14

2 days ago
Comment on attachment 8869744 [details]
Bug 1321544 - Set different icon for contextMenus item in MozReview;

::: browser/components/extensions/ext-contextMenus.js:203
(Diff revision 1)
>        element.setAttribute("id",
>          `${makeWidgetId(}_${}`);
>      }
> +    if (item.icon) {
> +      element.setAttribute("image", "url(" + item.icon + ")");

This is not CSS, no need for `url()`, but also, you need to resolve the icon URI.
Attachment #8869744 - Flags: review?(tomica) → review-


16 hours ago
Whiteboard: [design-decision-approved][contextMenus] → [design-decision-approved][contextMenus] triaged
You need to log in before you can comment on or make changes to this bug.