Status bar background color changed in Firefox 119

[LummoxJR]

Since this repository appears to be on hiatus, I wanted to leave this as a note for other users.

The status-bar.uc.js script needs the following change:

          #status-bar {
            color: initial !important;
-            background-color: var(--toolbar-not-lwt-bgcolor) !important;
+            background-color: var(--toolbar-bgcolor) !important;
          }

It appears that Firefox changed their hamburger menu not to use the user's theme, and this caused a major change to the status bar by turning it white on a dark theme, thereby making text unreadable.

[sujeet]

Thanks @LummoxJR for the fix!!

Would it be possible for you to share your entire status-bar.uc.js along with stayloaix script and dir? Something's busted with my setup and I can't get this fix to work. Worse still, even setting #status-bar css directly from the browser toolbox doesn't seem to have any effect :(

[sujeet]

Changing from toolbar to div worked: (status-bar.uc.js)

    win.statusbar.node = _uc.createElement(document, 'div', {
      id: 'status-bar',
      customizable: 'true',
      context: 'toolbar-context-menu',
      mode: 'icons'
    });

[LummoxJR]

@sujeet This is my full copy of the script.

// ==UserScript==
// @name            Status Bar
// @author          xiaoxiaoflood
// @include         main
// @startup         UC.statusBar.exec(win);
// @shutdown        UC.statusBar.destroy();
// @onlyonce
// ==/UserScript==

const { CustomizableUI, StatusPanel } = window;

UC.statusBar = {
  PREF_ENABLED: 'userChromeJS.statusbar.enabled',
  PREF_STATUSTEXT: 'userChromeJS.statusbar.appendStatusText',

  get enabled() {
    return xPref.get(this.PREF_ENABLED);
  },

  get textInBar() {
    return this.enabled && xPref.get(this.PREF_STATUSTEXT);
  },

  init: function () {
    const { CustomizableUI } = Services.wm.getMostRecentBrowserWindow();
    xPref.set(this.PREF_ENABLED, true, true);
    xPref.set(this.PREF_STATUSTEXT, true, true);
    this.enabledListener = xPref.addListener(this.PREF_ENABLED, (isEnabled) => {
      CustomizableUI.getWidget('status-dummybar').instances.forEach(dummyBar => {
        dummyBar.node.setAttribute('collapsed', !isEnabled);
      });
    });
    this.textListener = xPref.addListener(this.PREF_STATUSTEXT, (isEnabled) => {
      if (!UC.statusBar.enabled)
        return;

      _uc.windows((doc, win) => {
        let StatusPanel = win.StatusPanel;
        if (isEnabled)
          win.statusbar.textNode.appendChild(StatusPanel._labelElement);
        else
          StatusPanel.panel.appendChild(StatusPanel._labelElement);
      });
    });

    this.setStyle();
    _uc.sss.loadAndRegisterSheet(this.STYLE.url, this.STYLE.type);

    CustomizableUI.registerArea('status-bar', {});

    Services.obs.addObserver(this, 'browser-delayed-startup-finished');
  },

  exec: function (win) {
    let document = win.document;
    let StatusPanel = win.StatusPanel;

    let dummystatusbar = _uc.createElement(document, 'toolbar', {
      id: 'status-dummybar',
      toolbarname: 'Status Bar',
      hidden: 'true'
    });
    dummystatusbar.collapsed = !this.enabled;
    dummystatusbar.setAttribute = function (att, value) {
      let result = Element.prototype.setAttribute.apply(this, arguments);

      if (att == 'collapsed') {
        let StatusPanel = win.StatusPanel;
        if (value === true) {
          xPref.set(UC.statusBar.PREF_ENABLED, false);
          win.statusbar.node.setAttribute('collapsed', true);
          StatusPanel.panel.appendChild(StatusPanel._labelElement);
          win.statusbar.node.parentNode.collapsed = true;;
        } else {
          xPref.set(UC.statusBar.PREF_ENABLED, true);
          win.statusbar.node.setAttribute('collapsed', false);
          if (UC.statusBar.textInBar)
            win.statusbar.textNode.appendChild(StatusPanel._labelElement);
          win.statusbar.node.parentNode.collapsed = false;
        }
      }

      return result;
    };
    win.gNavToolbox.appendChild(dummystatusbar);

    win.statusbar.node = _uc.createElement(document, 'toolbar', {
      id: 'status-bar',
      customizable: 'true',
      context: 'toolbar-context-menu',
      mode: 'icons'
    });

    win.statusbar.textNode = _uc.createElement(document, 'toolbaritem', {
      id: 'status-text',
      flex: '1',
      width: '100'
    });
    if (this.textInBar)
      win.statusbar.textNode.appendChild(StatusPanel._labelElement);
    win.statusbar.node.appendChild(win.statusbar.textNode);

    win.eval('Object.defineProperty(StatusPanel, "_label", {' + Object.getOwnPropertyDescriptor(StatusPanel, '_label').set.toString().replace(/^set _label/, 'set').replace(/((\s+)this\.panel\.setAttribute\("inactive", "true"\);)/, '$2this._labelElement.value = val;$1') + ', enumerable: true, configurable: true});');

    let bottomBox = document.createElement('vbox');
    win.bottomBox = bottomBox;
    bottomBox.id = 'browser-bottombox';
    bottomBox.append(win.statusbar.node);

    if (!this.enabled)
      bottomBox.collapsed = true;

    document.getElementById('fullscreen-and-pointerlock-wrapper').insertAdjacentElement('afterend', bottomBox);

    win.addEventListener('fullscreen', this.fsEvent);

    if (document.readyState === 'complete')
      this.observe(win);
  },

  observe: function (win) {
    if(!win.bottomBox) this.exec(win);
    CustomizableUI.registerToolbarNode(win.statusbar.node);
    win.bottomBox.appendChild(win.statusbar.node);
    win.statusbar.node.parentNode = bottomBox;
  },

  orig: Object.getOwnPropertyDescriptor(StatusPanel, '_label').set.toString(),

  setStyle: function () {
    this.STYLE = {
      url: Services.io.newURI('data:text/css;charset=UTF-8,' + encodeURIComponent(`
        @-moz-document url('${_uc.BROWSERCHROME}') {
          #status-bar {
            color: initial !important;
            background-color: var(--toolbar-bgcolor) !important;
          }
          #status-text > #statuspanel-label {
            border-top: 0 !important;
            background-color: unset !important;
            color: var(--lwt-text-color) !important;
          }
          #status-bar > #status-text {
            display: flex !important;
            justify-content: center !important;
            align-content: center !important;
            flex-direction: column !important;
          }
        }
      `)),
      type: _uc.sss.USER_SHEET
    }
  },
  
  destroy: function () {
    const { CustomizableUI } = Services.wm.getMostRecentBrowserWindow();

    xPref.removeListener(this.enabledListener);
    xPref.removeListener(this.textListener);
    CustomizableUI.unregisterArea('status-bar');
    _uc.sss.unregisterSheet(this.STYLE.url, this.STYLE.type);
    _uc.windows((doc, win) => {
      const { eval, statusbar, StatusPanel } = win;
      eval('Object.defineProperty(StatusPanel, "_label", {' + this.orig.replace(/^set _label/, 'set') + ', enumerable: true, configurable: true});');
      StatusPanel.panel.appendChild(StatusPanel._labelElement);
      doc.getElementById('status-dummybar').remove();
      statusbar.node.remove();
      win.removeEventListener('fullscreen', this.fsEvent);
    });
    Services.obs.removeObserver(this, 'browser-delayed-startup-finished');
    delete UC.statusBar;
  }
}

UC.statusBar.init();

[rediffusion]

@LummoxJR

Hi! 🙂

Can I minimize the size of the icons?

[Manimap]

Changing from toolbar to div worked: (status-bar.uc.js)

    win.statusbar.node = _uc.createElement(document, 'div', {
      id: 'status-bar',
      customizable: 'true',
      context: 'toolbar-context-menu',
      mode: 'icons'
    });

@sujeet This is my full copy of the script.

@sujeet @LummoxJR Thank you both, replacing the js file + div did the trick! Hopefully it won't break again for a while.