1986618 - SVG icon no longer loads in the context menus

Status: VERIFIED FIXED

(WebExtensions :: General, defect)

Description

[juraj.masiar]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:143.0) Gecko/20100101 Firefox/143.0

Steps to reproduce:

1. install Auto Highlight:
   https://addons.mozilla.org/addon/auto_highlight/
2. open:
   https://example.com/
3. select any text
4. right click / Auto Highlight / "Highlight 'selection'"
5. focus page again and select some text again
6. right click / Auto Highlight / "Add 'selection' to existing rule" / ...

Actual results:

The icon in the submenu is not loaded.

Expected results:

The menu should show icons.

In the extension, the SVG icon is generated using this code:

import svgToTinyDataUri from 'mini-svg-data-uri';

export function getSvgSquare(text: string, background: string, color: string) {
  const svg = `<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect width="16" height="16" style="fill:${background};stroke-width:1;stroke:gray" />
<text x="50%" y="59%" font-size="0.7em"  fill="${color}" dominant-baseline="middle" text-anchor="middle" font-family="Arial, Helvetica, sans-serif">${text}</text>
</svg>`;
  // using this special library fixes encoding issues with special characters like "€"
  return svgToTinyDataUri(svg);
}

This is a recent regression, specifically this is the bisection result:

2025-09-03T10:19:42.413000: INFO : Narrowed integration regression window from [6c84c673, fc8e84aa] (3 builds) to [7ba99e78, fc8e84aa] (2 builds) (~1 steps left)
2025-09-03T10:19:42.421000: DEBUG : Starting merge handling...
2025-09-03T10:19:42.421000: DEBUG : Using url: https://hg.mozilla.org/integration/autoland/json-pushes?changeset=fc8e84aadc7b540ad6457928f97074835c8cdfec&full=1
2025-09-03T10:19:42.421000: DEBUG : redo: attempt 1/3
2025-09-03T10:19:42.421000: DEBUG : redo: retry: calling _default_get with args: ('https://hg.mozilla.org/integration/autoland/json-pushes?changeset=fc8e84aadc7b540ad6457928f97074835c8cdfec&full=1',), kwargs: {}, attempt #1
2025-09-03T10:19:42.425000: DEBUG : urllib3.connectionpool: Resetting dropped connection: hg.mozilla.org
2025-09-03T10:19:43.172000: DEBUG : urllib3.connectionpool: https://hg.mozilla.org:443 "GET /integration/autoland/json-pushes?changeset=fc8e84aadc7b540ad6457928f97074835c8cdfec&full=1 HTTP/11" 302 0
2025-09-03T10:19:44.626000: DEBUG : urllib3.connectionpool: https://hg-edge.mozilla.org:443 "GET /integration/autoland/json-pushes?changeset=fc8e84aadc7b540ad6457928f97074835c8cdfec&full=1 HTTP/11" 200 None
2025-09-03T10:19:44.629000: DEBUG : Found commit message:
Bug 1979338 - Use an <html:img> rather than <xul:image> for menu icons. r=Gijs,desktop-theme-reviewers,settings-reviewers,tabbrowser-reviewers,sidebar-reviewers,sthompson,nsharpley,dao

We're not using the validate or triggeringprincipal attributes, so get
rid of them.

Main benefit is that now image can use srcset, which allows for hidpi
stuff and so on.

Main drawback is that list-style-image doesn't work on <html:img>, so
we need to use a separate variable.

Differential Revision: https://phabricator.services.mozilla.com/D258733

2025-09-03T10:19:44.629000: DEBUG : Did not find a branch, checking all integration branches
2025-09-03T10:19:44.630000: INFO : The bisection is done.
2025-09-03T10:19:44.644000: INFO : Stopped

Comment 1

[juraj.masiar]

Attachment: broken SVG icons

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

:emilio, since you are the author of the regressor, bug 1979338, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Thanks, I can repro, but it's a tricky one. The issue is that that library is producing an url that's partially url-encoded. Now we urlencode it in order to stash it in the srcset and as such it doesn't work anymore.

One workaround on our end would be to just do some partial encoding (replacing spaces by %20 or so, since that's the character that's annoying since it's part of the srcset syntax)... Not sure that'll be fully correct tho, need to do some digging.

Can you confirm that just not urlencoding the thing works? I.e., if you replace return svgToTinyDataUri(svg); with return data:image/svg+xml,${svg}` or so?

Comment 4

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1986618 - Only encode whitespace for extension menus. r=#extension-reviewers

In order to keep compatibility with some extensions which provide
partially-urlencoded urls already.

Comment 5

[juraj.masiar]

The simplified test case is running this in any extension with contextMenus permission:

browser.contextMenus.create({
  id: Math.random().toString(36),
  title: 'Experiment',
  contexts: ['all'],
  icons: {
    16: `data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e %3crect width='16' height='16' style='fill:%23FFFF00FF%3bstroke-width:1%3bstroke:gray' /%3e %3ctext x='50%25' y='59%25' font-size='0.7em' fill='black' dominant-baseline='middle' text-anchor='middle' font-family='Arial%2c Helvetica%2c sans-serif'%3eH%3c/text%3e %3c/svg%3e`
  }, 
})

From what I can remember (I've wrote this code 5 years ago), the library encodes special characters, it's also mentioned in my source code:

// WARNING: this works only for SVG with a simple characters, it would break for "€"
export const svgToDataURL = (svgXML: string) => `data:image/svg+xml;base64,${btoa(svgXML)}`;

But looking at this now as more experienced programmer, of course the btoa will fail for "€".
So yeah, using a proper encoder seems to fix it:

export const svgToDataURL = (svgXML: string): string => {
  const utf8 = new TextEncoder().encode(svgXML);
  const dataStr = String.fromCharCode(...utf8);
  return `data:image/svg+xml;base64,${btoa(dataStr)}`;
};

This generates generates different looking SVG code which seems to fix the regression issue.
For example this will work as expected:

browser.contextMenus.create({
  id: Math.random().toString(36),
  title: 'Experiment',
  contexts: ['all'],
  icons: {
    16: `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3R5bGU9ImZpbGw6I0ZGRkYwMEZGO3N0cm9rZS13aWR0aDoxO3N0cm9rZTpncmF5IiAvPgo8dGV4dCB4PSI1MCUiIHk9IjU5JSIgZm9udC1zaXplPSIwLjdlbSIgIGZpbGw9ImJsYWNrIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0iQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZiI+4oKsPC90ZXh0Pgo8L3N2Zz4=`
  }, 
})

So yeah, I can fix this on my end :)

Comment 6

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1979338

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/c6a8f2160e88
https://hg.mozilla.org/integration/autoland/rev/93d5508c1c9f
Only encode whitespace for extension menus. r=extension-reviewers,robwu

Comment 8

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/93d5508c1c9f

Comment 9

[juraj.masiar]

I've just tested it in the new Nightly and it issue is fixed, all icons are back.
Thank you for the quick fix :)

Comment 10

[Ryan VanderMeulen [:RyanVM]]

Please nominate this for Beta uplift when you get a chance.

Comment 11

[Emilio Cobos Álvarez [:emilio]]

Comment on attachment 9511063 [details]
Bug 1986618 - Only encode whitespace for extension menus. r=#extension-reviewers

Beta/Release Uplift Approval Request

• User impact if declined/Reason for urgency: Regression fix
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: comment 0
• List of other uplifts needed: none
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Tweaks url encoding to deal with edge case.
• String changes made/needed: none
• Is Android affected?: No

Comment 12

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9511063 [details]
Bug 1986618 - Only encode whitespace for extension menus. r=#extension-reviewers

Approved for 143.0rc1.

Comment 13

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/de7c18170646
https://hg.mozilla.org/releases/mozilla-beta/rev/c541f4f95776

Comment 14

[Timea Zsoldos [:tzsoldos], Desktop QA]

I have reproduced this issue using Firefox 144.0a1 build from 2025.09.02 on macOS 10.15.
I can confirm this issue is fixed, I verified using latest nightly Firefox 144.0a1 and 143.0b10 (20250908090931) on macOS 10.15, Ubuntu 22 and Windows 11, SVG icon loads in the context menus.