Hello,

I had this snippet of code for the menuBar for ages (the menuBar is the bar that appears when pressing alt), but FF149 update apparently broke it?

/* Replaces menubar items text ("File Edit etc.") with icons */

#main-menubar > menu {
  fill: currentColor;
  height: var(--uc-menubaritem-height, 28px);
  width: var(--uc-menubaritem-width, 30px);
  -moz-context-properties: fill;
  padding: 3px !important;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 3px !important;
}
#main-menubar > menu > :is(.menubar-text, .menu-text) {
  display: none;
}

#file-menu {
  background-image: url("chrome://devtools/skin/images/tool-storage.svg");
}
#edit-menu {
  background-image: url("chrome://browser/skin/customize.svg");
}
#view-menu {
  background-image: url("chrome://devtools/skin/images/command-frames.svg");
}
#history-menu {
  background-image: url("chrome://browser/skin/history.svg");
}
#bookmarksMenu {
  background-image: url("chrome://browser/skin/bookmark.svg");
}
#profiles-menu {
  background-image: url("chrome://browser/skin/device-desktop.svg");
}
#tools-menu {
  background-image: url("chrome://global/skin/icons/developer.svg");
}
#helpMenu {
  background-image: url("chrome://global/skin/icons/help.svg");
}
#tabSharingMenu {
  background-image: url("quickactions.svg");
}

The icons where supposed to be white, but now they appear to be black.

Does anyone know what happened/what changed?

  • MrOtherGuyM
    link
    fedilink
    arrow-up
    3
    ·
    4 months ago

    Add !important tag to the fill property - menu.css in Firefox 149 specifies a fill property for those elements so you now need to override that.

    • MiniBus93OP
      link
      fedilink
      English
      arrow-up
      1
      ·
      3 months ago

      Thanks, it worked! I had no idea of the change