1405780 - Support containers icons for context menus in extensions

Status: NEW

(WebExtensions :: General, enhancement, P5)

Description

[Jonathan Kingston [:jkt] he/him]

Given the current API returns the SVG in the contextualIdentities APIs via the iconUrl, I think we can modify that to provide the the colour code:

resource://usercontext-content/cart.svg?colorCode=red

This should still support the mask case as explained in my article (even if they want to modify the colour and also support this from the same URL): https://hacks.mozilla.org/2017/10/containers-for-add-on-developers/

The example uses this code:

  const icon = document.createElement("div");
  icon.classList.add("icon");
  const iconUrl = container.iconUrl || "img/blank-tab.svg";
  icon.style.mask = `url(${iconUrl}) top left / contain`;
  icon.style.background = container.colorCode || "#000";

Requested here: https://github.com/totallymike/contextPlus/pull/16#issuecomment-334213684

Comment 1

[Rob Wu [:robwu]]

I modified the SVG files from mozilla-central so that the color of the icon can be specified via the reference fragment, like this:

    let {icon, color} = contextualIdentity;
    browser.menus.create({ // ...
      icons: {
        16: `icons/${icon}.svg#${color}`,
      },
    });

Source code: https://github.com/Rob--W/bookmark-container-tab/commit/afd4aa5165d91b69841df2899ff615795417a0ad