Files for sidebar icons need update

[Speravir]

generalui/sidebar_header_icons.css which should add icons to the sidebar panel menu does not work for several Firefox versions now. I recently found in another style collection (FF-Menu-Icon-Plus-CSS) a way to fix this. The rules do not work with this either (and therefore I did not notice this earlier), but adding !important helps!

#sidebar-switcher-bookmarks::before {
  content: url("chrome://browser/skin/bookmark.svg") !important;
}
#sidebar-switcher-history::before {
  content: url("chrome://browser/skin/history.svg") !important;
}
#sidebar-switcher-tabs::before {
  content: url("chrome://browser/skin/tab.svg") !important;
}
#sidebar-reverse-position::before {
  content: url("chrome://devtools/skin/images/tool-network.svg") !important;
  transform: rotate(90deg) !important;
}
#sidebarMenu-popup menuitem[data-l10n-id="sidebar-menu-close"]::before,
#sidebar-menu-close::before {
  content: url("chrome://global/skin/icons/close.svg") !important;
}

For me this works without further padding adjustments, I may have set these elsewhere, though. Regarding the last rule: I do not know when the close menu item got its own ID, but apparently it lacked one in past Firefox versions (active version at time of writing is 129), so I‘ve added the older selector declaration.

If one wants to have these icons colored there is an issue:
With this approach using ::before and content neither color nor fill work. We have to use css filters, instead, and adjusting these to the hex colors is a PITA. However, someone somewhere in StackExchange mentioned https://isotropic.co/tool/hex-color-to-css-filter/ for conversion. Note that this provides unstable results (every run is different), but there is a reliability line at the end. For some of the hex colors the converter found an exact solution (“loss 0.0”), but for one dark mode color (#ff5a5a) it struggled heavily.

For the five panel menu items it looks like this for light mode:

#sidebar-switcher-bookmarks::before {
  filter: invert(32%) sepia(75%) saturate(439%) hue-rotate(169deg) brightness(98%) contrast(91%);
}
#sidebar-switcher-history::before {
  filter: invert(16%) sepia(34%) saturate(5061%) hue-rotate(282deg) brightness(99%) contrast(129%);
#sidebar-switcher-tabs::before,
#sidebar-reverse-position::before {
  filter: invert(40%) sepia(88%) saturate(629%) hue-rotate(193deg) brightness(86%) contrast(107%);
}
#sidebarMenu-popup menuitem[data-l10n-id="sidebar-menu-close"]::before,
#sidebar-menu-close::before {
  filter: invert(17%) sepia(99%) saturate(7264%) hue-rotate(360deg) brightness(100%) contrast(112%);
}

The updated generalui/sidebar_header_icons_colorized.css should probably have these updated rules:

sidebar_header_icons_colorized.css

/* Firefox userChrome.css tweaks ********************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/

/* CSS filters created with https://isotropic.co/tool/hex-color-to-css-filter/ */

/* dark blue */
#sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
  color: #336699 !important;
  fill: #336699 !important;
  opacity: 1.0 !important;
}
#sidebar-switcher-bookmarks::before {
  filter: invert(32%) sepia(75%) saturate(439%) hue-rotate(169deg) brightness(98%) contrast(91%);
}

:root[lwtheme]:-moz-lwtheme-brighttext:not([style*='--lwt-header-image']) #sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
  color: #64a3e2 !important;
  fill: #64a3e2 !important;
  opacity: 1.0 !important;
}
:root[lwtheme]:-moz-lwtheme-brighttext:not([style*='--lwt-header-image']) #sidebar-switcher-bookmarks::before {
  filter: invert(57%) sepia(34%) saturate(633%) hue-rotate(169deg) brightness(101%) contrast(93%);
}
@media (-moz-content-prefers-color-scheme: dark) {
  :root[lwtheme]:not([style*='--lwt-header-image']) #sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
    color: #64a3e2 !important;
    fill: #64a3e2 !important;
    opacity: 1.0 !important;
  }
  :root[lwtheme]:not([style*='--lwt-header-image']) #sidebar-switcher-bookmarks::before {
    filter: invert(57%) sepia(34%) saturate(633%) hue-rotate(169deg) brightness(101%) contrast(93%);
  }
}

/* purple */
#sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
  color: #800080 !important;
  fill: #800080 !important;
  opacity: 1.0 !important;
}
#sidebar-switcher-history::before {
  filter: invert(16%) sepia(34%) saturate(5061%) hue-rotate(282deg) brightness(99%) contrast(129%);
}

:root[lwtheme]:-moz-lwtheme-brighttext:not([style*='--lwt-header-image']) #sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
  color: #ff00ff !important;
  fill: #ff00ff !important;
  opacity: 1.0 !important;
}
:root[lwtheme]:-moz-lwtheme-brighttext:not([style*='--lwt-header-image']) #sidebar-switcher-history::before {
  filter: invert(19%) sepia(52%) saturate(6869%) hue-rotate(293deg) brightness(113%) contrast(125%);
}
@media (-moz-content-prefers-color-scheme: dark) {
  :root[lwtheme]:not([style*='--lwt-header-image']) #sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
    color: #ff00ff !important;
    fill: #ff00ff !important;
    opacity: 1.0 !important;
  }
  :root[lwtheme]:not([style*='--lwt-header-image'])  #sidebar-switcher-history::before {
    filter: invert(19%) sepia(52%) saturate(6869%) hue-rotate(293deg) brightness(113%) contrast(125%);
  }
}

/* blue */
#sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
  color: #4169e1 !important;
  fill: #4169e1 !important;
  opacity: 1.0 !important;
}
#sidebar-switcher-tabs::before,
#sidebar-reverse-position::before {
  filter: invert(40%) sepia(88%) saturate(629%) hue-rotate(193deg) brightness(86%) contrast(107%);
}

:root[lwtheme]:-moz-lwtheme-brighttext:not([style*='--lwt-header-image']) #sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
  color: #00d2ff !important;
  fill: #00d2ff !important;
  opacity: 1.0 !important;
}
:root[lwtheme]:-moz-lwtheme-brighttext:not([style*='--lwt-header-image']) #sidebar-switcher-tabs::before,
:root[lwtheme]:-moz-lwtheme-brighttext:not([style*='--lwt-header-image']) #sidebar-reverse-position::before {
  filter: invert(64%) sepia(21%) saturate(6851%) hue-rotate(152deg) brightness(107%) contrast(103%);
}

@media (-moz-content-prefers-color-scheme: dark) {
  :root[lwtheme]:not([style*='--lwt-header-image']) #sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
    color: #00d2ff !important;
    fill: #00d2ff !important;
    opacity: 1.0 !important;
  }
  :root[lwtheme]:not([style*='--lwt-header-image']) #sidebar-switcher-tabs::before,
  :root[lwtheme]:not([style*='--lwt-header-image']) #sidebar-reverse-position::before {
    filter: invert(64%) sepia(21%) saturate(6851%) hue-rotate(152deg) brightness(107%) contrast(103%);
  }
}

/* red */
#sidebarMenu-popup menuitem[data-l10n-id="sidebar-menu-close"]::before,
#sidebar-menu-close::before {
  filter: invert(17%) sepia(99%) saturate(7264%) hue-rotate(360deg) brightness(100%) contrast(112%);
}/* #ff0000 */

:root[lwtheme]:-moz-lwtheme-brighttext:not([style*='--lwt-header-image']) #sidebarMenu-popup menuitem[data-l10n-id="sidebar-menu-close"]::before,
:root[lwtheme]:-moz-lwtheme-brighttext:not([style*='--lwt-header-image']) #sidebar-menu-close::before {
  filter: invert(55%) sepia(29%) saturate(6713%) hue-rotate(327deg) brightness(104%) contrast(105%);
}/* #ff5a5a */

@media (-moz-content-prefers-color-scheme: dark) {
  :root[lwtheme]:not([style*='--lwt-header-image']) #sidebarMenu-popup menuitem[data-l10n-id="sidebar-menu-close"]::before,
  :root[lwtheme]:not([style*='--lwt-header-image']) #sidebar-menu-close::before {
    filter: invert(55%) sepia(29%) saturate(6713%) hue-rotate(327deg) brightness(104%) contrast(105%);
  }/* #ff5a5a */
}

[Aris-t2]

Thanks for the note. Fixed versions will be part of next update.

I reused similar rules known from appbutton_popup_icons.css for sidebar_header_icons.css and sidebar_header_icons_colorized.css.

[Speravir]

Arrgh. I see now my mistake: For testing purposes I had disabled the existing sidebar_header_icons.css, but this also disabled the active declaration -moz-context-properties: fill. 😢

But, Aris, the new rules need an addition:

#sidebarMenu-popup menuitem::before {
	background-repeat: no-repeat;
}

And for #sidebar-reverse-position you’ve presumably unintentionally removed the 90 degrees rotation, so it should look like this:

#sidebar-reverse-position::before {
  background-image: url("chrome://devtools/skin/images/tool-network.svg") !important;
  transfrom: rotate(90deg);
}

[Aris-t2]

Did you have a chance to test the latest builds?

[Speravir]

I had not checked yet, but did now. Both additions as written on 20 August are still necessary here.

Oh, no, not quite right: In the second one only the rotate transformation is needed, the image is loaded by the styling rule.

BTW you’ve removed it in v. 4.5.5, although the rule looked a bit different: diff, line 32.