The Blasphemy of the Barren Context Menu: A Plea for Visual Sanity! 😱

[GabrielJeffrey]

The Blasphemy of the Barren Context Menu: A Plea for Visual Sanity! 😱

I don't know which monastery of madness these folks emerged from, but suddenly it's blasphemy to have icons in a context menu.

They've stripped the browser's context menu like some sacred deity dragged from its temple, robe torn off, ornaments ripped away, left standing there, naked, ashamed, and soulless.

Icons were its divine vestments! They gave meaning. Identity. Visual flavor. And now? We're stuck with this sterile, joyless, sick and perverted nonsense that looks like a tax form.

---

🪧 Petition to clothe our poor context menu again, bring back the icons!!

Bring back the icons! Or at the very least, let us sinners toggle them on while the purists worship their blank minimalist altar.

[kenblu24]

Let Zen Mods take care of this. I really don't think it's so important to have the context menu be clean; IMO it's important to have something to visually distinguish options. ICONS + TEXT is often the best for accessibility too.

The thing is, it's much harder to add the icons back using a Zen Mod than it is to use CSS to hide them. Please make Icons available by default, and let people turn it off if they want.

For context, this is what we had on 1.12.8:

[realpixelcode]

And now, it looks like this:

The padding created on the left of the context actions due to the addons' icons looks kinda ugly.

[realpixelcode]

Icons allow you to quickly find the context action you need just by skimming the context menu. Without the icons, you have to actually read every item. The friction unnecessarily created by this is quite annoying.

When I first noticed the icons in Zen, I viewed them as a useful, even somewhat satisfying improvement over Firefox. Something that sets Zen apart and makes it more human-friendly than the upstream browser it's based on.

[ClixTW]

If the goal is to provide a cleaner look and feel, we should try removing some rarely used options (especially those that already have alternatives), or categorize them under subheadings.

After the icons were removed, I actually find it even more confusing 😢

[NTICompass]

The icons made it easy to quickly find what I wanted. Without the icons, I need to read each and every option to find what I want. Makes what once was a 1 second task into a 10+ second task.

[jnzd]

issue: #8716
discussion on the same topic: #8733

[itshkj]

The previous version with icons was much faster to use and also looked way better

[wolf-yuan-6115]

Sorta hacked to bring icon back, not very good though

I'd suggest Zen dev to bring those icons back

If you are wondering how to do this:

Click here

1. Enable chrome and edit userChrome.css
2. Paste the following css:

:root {
    --zen-contextmenu-menuitem-padding-inline: 10px;
    --zen-contextmenu-menuicon-margin-inline: 12px;
    --zen-contextmenu-menuitem-margin: 0px 2px;
}

#context_zenSplitTabs {
  --menu-image: url('sidebars-right.svg') !important;
}

#context-zen-change-workspace-tab {
  --menu-image: url('move-tab.svg') !important;
}

#context-zenSplitLink {
  --menu-image: url('split.svg') !important;
}
#context_zenOpenWorkspace {
  --menu-image: url('open.svg') !important;
}

#context_zenEditWorkspace,
#zenToolbarThemePicker {
  --menu-image: url('edit-theme.svg') !important;
}

/* Context Menu Icons */

#context-video-pictureinpicture:not([checked='true']) .menu-iconic-icon {
  list-style-image: url('media-pip.svg') !important;
}

#context-media-loop:not([checked='true']) .menu-iconic-icon {
  list-style-image: url('media-loop.svg') !important;
}

:not(:not(menubar) > menu, #ContentSelectDropdown)
  > menupopup
  > menuitem:not(
    .menuitem-iconic,
    [type='checkbox'],
    [type='radio'],
    .in-menulist,
    .in-menulist menuitem,
    .unified-nav-current
  ),
:not(:not(menubar) > menu, #ContentSelectDropdown)
  > menupopup
  > menu:not(
    .menu-iconic,
    [type='checkbox'],
    [type='radio'],
    .in-menulist,
    .in-menulist menu,
    .unified-nav-current
  ),
#toggle_toolbar-menubar,
#PanelUI-history toolbarbutton,
#unified-extensions-context-menu menuitem {
  background-image: var(--menu-image) !important;
  background-size: 16px !important;
  background-position: var(--zen-contextmenu-menuitem-padding-inline) center !important;
  background-repeat: no-repeat !important;
  -moz-context-properties: fill, fill-opacity !important;
  fill: currentColor !important;
}

@media not (-moz-platform: windows) {
  menu > .menu-iconic-text,
  menuitem > .menu-iconic-text {
    padding-inline-start: var(--zen-contextmenu-menuicon-margin-inline) !important;
  }
}

#context-savepage {
  --menu-image: url('save.svg');
}

#context-selectall,
.textbox-contextmenu menuitem[cmd*='selectAll'],
#context_selectAllTabs,
#toolbar-context-selectAllTabs {
  --menu-image: url('edit-select-all.svg');
}

#context-undo,
.textbox-contextmenu menuitem[cmd*='undo'],
#context_undoCloseTab,
#toolbar-context-undoCloseTab {
  --menu-image: url('edit-undo.svg');
}

#toggle_toolbar-menubar {
  --menu-image: url('menu-bar.svg');
}

#context-redo,
.textbox-contextmenu menuitem[cmd*='redo'] {
  --menu-image: url('edit-redo.svg');
}

#context-copy,
.textbox-contextmenu menuitem[cmd*='copy'],
.textbox-contextmenu #strip-on-share,
#placesContext_copy {
  --menu-image: url('edit-copy.svg');
}

#context-paste,
.textbox-contextmenu menuitem[cmd*='paste'],
#placesContext_paste_group {
  --menu-image: url('edit-paste.svg');
}

#context-cut,
.textbox-contextmenu menuitem[cmd*='cut'],
#placesContext_cut {
  --menu-image: url('edit-cut.svg');
}

#context-delete,
.customize-context-removeExtension,
.unified-extensions-context-menu-remove-extension,
.textbox-contextmenu menuitem[cmd*='delete'],
menuitem[id='placesContext_deleteBookmark'],
menuitem[id='placesContext_deleteFolder'],
menuitem[id='placesContext_delete'],
menuitem[id='placesContext_delete_history'],
menuitem[id='placesContext_deleteHost'],
#context_zenDeleteWebPanel,
#context_zenDeleteWorkspace {
  --menu-image: url('edit-delete.svg');
}

#paste-and-go {
  --menu-image: url('paste-and-go.svg');
}

#context-print-selection {
  --menu-image: url('print.svg');
}

#context-take-screenshot {
  --menu-image: url('screenshot.svg');
}

#context-viewsource {
  --menu-image: url('source-code.svg');
}

#context-inspect-a11y {
  --menu-image: url('accessibility.svg');
}

#context-inspect {
  --menu-image: url('inspect.svg');
}

#context-searchselect {
  --menu-image: url('search-glass.svg');
}

#context-viewimage {
  --menu-image: url('image-open.svg');
}

#context-viewimageinfo {
  --menu-image: url('info.svg');
}

#context-saveimage,
#context-video-saveimage {
  --menu-image: url('image-save.svg');
}

#context-savevideo {
  --menu-image: url('video-save.svg');
}

#context-viewvideo {
  --menu-image: url('video-open.svg');
}

#context-saveaudio {
  --menu-image: url('audio-save.svg');
}

#context-copyimage-contents {
  --menu-image: url('image-copy.svg');
}

#context-copyimage,
#context-copyvideourl,
#context-copylink,
#context-stripOnShareLink,
#context_zenOpenNewTabWebPanel,
#context-pdfjs-copy {
  --menu-image: url('link.svg');
}

#context-openlinkincurrent {
  --menu-image: url('ext-link.svg');
}

#context-viewsource,
#context-viewframesource,
#context-viewpartialsource-selection {
  --menu-image: url('source-code.svg');
}

#context-sendimage,
#context-sendvideo,
#context-sendaudio {
  --menu-image: url('mail.svg');
}

#context-setDesktopBackground,
.viewCustomizeToolbar {
  --menu-image: url('customize.svg');
}

#context-reloadimage,
#context_reloadTab,
#context_reloadSelectedTabs,
#toolbar-context-reloadSelectedTab,
#toolbar-context-reloadSelectedTabs,
#context_zen-reset-pinned-tab {
  --menu-image: url('reload.svg');
}

#context-sendlinktodevice,
#context_sendTabToDevice,
#context-sendpagetodevice {
  --menu-image: url('send-to-device.svg');
}

#context-openlinkintab,
#context-openlinkincontainertab,
#context_zenWorkspacesOpenInContainerTab,
#context_zenWebPanelContextInContainer,
menuitem[id='placesContext_open:newtab'],
menuitem[id='placesContext_openLinks:tabs'],
menuitem[id='placesContext_openBookmarkLinks:tabs'],
menuitem[id='placesContext_openBookmarkContainer:tabs'] {
  --menu-image: url('tab.svg');
}

#context_openANewTab,
#toolbar-context-openANewTab {
  --menu-image: url('new-tab-image.svg');
}

#context-openlinkinusercontext-menu,
menu[id='placesContext_open:newcontainertab'],
menu[id='placesContext_openContainer:tabs'] {
  --menu-image: url('container-tab.svg');
}

#context-openlink,
menuitem[id='placesContext_open:newwindow'] {
  --menu-image: url('window.svg');
}

#context-openlinkprivate,
menuitem[id='placesContext_open:newprivatewindow'] {
  --menu-image: url('private-window.svg');
}

#context-savelink {
  --menu-image: url('downloads.svg');
}

#spell-add-to-dictionary {
  --menu-image: url('add-to-dictionary.svg');
}

#manage-saved-logins {
  --menu-image: url('passwords.svg');
}

#context-media-play,
#context_playTab,
#context_playSelectedTabs {
  --menu-image: url('media-play.svg');
}

#context-media-pause {
  --menu-image: url('media-pause.svg');
}

#context-media-mute,
#context_toggleMuteTab,
#context_toggleMuteSelectedTabs,
#context_zenToggleMuteWebPanel {
  --menu-image: url('media-mute.svg');
}

#context-media-unmute,
#context_toggleMuteTab[muted],
#context_toggleMuteSelectedTabs[muted],
#context_zenToggleMuteWebPanel[muted] {
  --menu-image: url('media-unmute.svg');
}

#context-media-playbackrate {
  --menu-image: url('media-speed.svg');
}

#context-video-fullscreen {
  --menu-image: url('fullscreen.svg');
}

#context-leave-dom-fullscreen,
menuitem[contexttype='fullscreen'][label*='Exit'] {
  --menu-image: url('fullscreen-exit.svg');
}

#context-media-hidecontrols,
#context-media-showcontrols {
  --menu-image: url('permissions.svg');
}

#context_pinTab,
#context_unpinTab,
#context_pinSelectedTabs,
#context_unpinSelectedTabs,
.customize-context-moveToPanel,
#context_zen-replace-pinned-url-with-current {
  --menu-image: url('pin.svg');
}

#context_zen-add-essential {
  --menu-image: url('essential-add.svg');
}

#context_zen-remove-essential {
  --menu-image: url('essential-remove.svg');
}

.customize-context-removeFromToolbar {
  --menu-image: url('unpin.svg');
}

#zen-sidebar-web-panel-pinned[pinned='true'] {
  list-style-image: url('pin.svg') !important;
}

#zen-sidebar-web-panel-pinned {
  list-style-image: url('unpin.svg') !important;
}

#context_duplicateTab,
#context_duplicateTabs {
  --menu-image: url('duplicate-tab.svg');
}

#zen-context-menu-compact-mode {
  --menu-image: url('sidebar.svg');
}

#context_bookmarkTab,
#context_bookmarkSelectedTabs,
#toggle_PersonalToolbar,
#context-bookmarklink,
#toolbar-context-bookmarkSelectedTab,
#toolbar-context-bookmarkSelectedTabs {
  --menu-image: url('bookmark-hollow.svg');
}

menuitem[id='placesContext_show_bookmark:info'],
menuitem[id='placesContext_show_folder:info'],
menuitem[id='placesContext_show:info'] {
  --menu-image: url('edit.svg');
}

menuitem[id='placesContext_showAllBookmarks'],
#BMB_bookmarksShowAllTop,
#BMB_bookmarksShowAll,
.customize-context-manageExtension,
.unified-extensions-context-menu-manage-extension {
  --menu-image: url('manage.svg');
}

#BMB_viewBookmarksSidebar {
  --menu-image: url('chrome://browser/skin/sidebars.svg');
}

#BMB_searchBookmarks {
  --menu-image: url('search-page.svg');
}

menuitem[id='placesContext_new:bookmark'],
menuitem[id='placesContext_new:folder'],
menuitem[id='placesContext_new:separator'] {
  --menu-image: url('plus.svg');
}

#context-savelinktopocket,
#context-pocket {
  --menu-image: url('pocket-outline.svg');
}

#context_moveTabOptions {
  --menu-image: url('move-tab.svg');
}

.share-tab-url-item {
  --menu-image: url('share.svg');
}

#context_reopenInContainer {
  --menu-image: url('container-tab.svg');
}

#context_closeTab {
  --menu-image: url('close.svg');
}

#context_closeTabOptions {
  --menu-image: url('close-all.svg');
}

#context_unloadTab,
#context_zenTabActions {
  --menu-image: url('close-all.svg');
}

.customize-context-reportExtension,
.unified-extensions-context-menu-report-extension {
  --menu-image: url('report.svg');
}

 /* FIX header icons for the app menu sub menus (eg. fx account, history...) */
 .panel-header > h1 {
   text-align: left;
   margin-left: 8px !important;
 }
 
.wordmark::after {
  content: 'Plus' !important;
}
@media not (-moz-platform: linux) {
  .unified-extensions-context-menu-pin-to-toolbar {
    --menu-image: url('pin.svg');
  }
}

.unified-extensions-context-menu-move-widget-down {
  --menu-image: url('arrow-down.svg');
}

.unified-extensions-context-menu-move-widget-up {
  --menu-image: url('arrow-up.svg');
}

:not(:not(menubar) > menu, #ContentSelectDropdown)
  > menupopup
  > menuitem:not(
    .menuitem-iconic,
    [type='checkbox'],
    [type='radio'],
    .in-menulist,
    .in-menulist menuitem,
    .unified-nav-current
  ),
:not(:not(menubar) > menu, #ContentSelectDropdown)
  > menupopup
  > menu:not(
    .menu-iconic,
    [type='checkbox'],
    [type='radio'],
    .in-menulist,
    .in-menulist menu,
    .unified-nav-current
  ),
:not(:not(menubar) > menu, #ContentSelectDropdown) > menupopup > menucaption {
  padding-inline-start: calc(
    var(--zen-contextmenu-menuitem-padding-inline) + var(--zen-contextmenu-menuicon-margin-inline) /
      2
  ) !important;
}

menupopup > menuitem:is([type='checkbox']) .menu-iconic-left {
  --menu-image: none !important;
  margin-inline-start: 4px;

  @media not (-moz-platform: windows) {
    margin-inline-end: 0;
    padding-inline-end: 0;
  }
}

@media (-moz-platform: windows) {
  menupopup > menuitem[checked='true'] {
    padding-inline-start: 6px;
  }
}

3. Download a copy of this directory

Yes, download Linux one, even you are on Windows

4. Paste those .svg files into chrome folder
5. Probably restart Zen

[wolf-yuan-6115]

If Zen devs didn't fix this in future release we should publish a mod for this.

[SivanTechDev]

I'm making it a mod, does someone know why the link to submit mods to the theme-store does not work?

[wolf-yuan-6115]

They disabled issues which is used for creating request on that repo.

[wolf-yuan-6115]

Probably just create a new PR

[SivanTechDev]

seems like this Zen Mod won't work #8854 😢.
I created everything and even installed it locally via an hack but it seems we cannot fetch an asset directory when installing a Zen Mod.
the only option I see is to use url to external webadress, like:

#context_zenOpenWorkspace {
  --menu-image: url('url('https://raw.githubusercontent.com/some_repo/assets/open.svg') !important;
}

but this seems like a really bad idea.

[SivanTechDev]

Good news! I figured out how to bring back the context menu icons using Zen Browser's own built-in icons (no external assets needed!) using url('chrome://browser/skin/zen-icons/{icon_name}.svg').

I've created a mod for this:
➡️ BringBackTheContextIcons

For now, you can copy the chrome.css from the repo into your userChrome.css file.
I'll submit it to the Zen Mod store as soon as submissions are open again.

[Mx-Angel]

This worked great for me, just had to change the padding-inline-start to be divided by 8 for the menucaption as there was a big gap between the text and icon, not sure if that is just a Linux thing, thank you!

Edit: if the value mentioned above isn't a specific number, in my case 128 then the text and icons won't line up with the ones there were removed, e.g. if you have noscript installed, the icon still appears in the right click menu, but it will not be lined up with the userChrome.css. As a result you may need to make some modifications to make sure they do align.

[SivanTechDev]

thanks, implemented in the css

Click me to see the changes

diff --git a/BringBackTheContextIcons/chrome.css b/BringBackTheContextIcons/chrome.css
index 683f46b..a9d49d4 100644
--- a/BringBackTheContextIcons/chrome.css
+++ b/BringBackTheContextIcons/chrome.css
@@ -465,9 +465,26 @@ menuitem[id="placesContext_new:separator"] {
 :not(:not(menubar) > menu, #ContentSelectDropdown) > menupopup > menucaption {
   padding-inline-start: calc(
     var(--zen-contextmenu-menuitem-padding-inline) +
       var(--zen-contextmenu-menuicon-margin-inline) / 2
-  ) !important;
+  ) !important; /* Default: approx 30px */
+}
+
+/* Linux-specific adjustment for menucaption padding based on user feedback */
+@media (-moz-platform: linux) {
+  :not(:not(menubar) > menu, #ContentSelectDropdown) > menupopup > menucaption {
+    /*
+      Original calculation: var(--zen-contextmenu-menuitem-padding-inline) + var(--zen-contextmenu-menuicon-margin-inline) / 2 (approx. 30px).
+      Feedback indicated this created a "big gap" and that a calculation equivalent to using
+      var(--zen-contextmenu-menuicon-margin-inline) / 8 (approx. 12px)
+      was preferable.
+      This change implements that feedback. 
+    */
+    padding-inline-start: calc(
+      var(--zen-contextmenu-menuitem-padding-inline) +
+        var(--zen-contextmenu-menuicon-margin-inline) / 8
+    ) !important; /* Approx 12px on Linux */
+  }
 }

 menupopup > menuitem[type="checkbox"] .menu-iconic-left {
   --menu-image: none !important;