Skip to content

Refactor theme to background.

Apply the theme while the background is loading instead of the sidebar.

In combination with the use of an userChrome.css to override the default panel loading colors, this avoids white flashes due to the background color used in the default theme when the extension loads or the sidebar opens if the current browser theme doesn't use the same.

When the button for opening the sidebar is clicked or the shortcut triggered, the current theme is loaded and the sidebar is opened at the same time. But the loading of the browser theme need time so isn't applied immediately, the default theme is displayed instead for a limited time but long enough to create the flash.

Now, the theme is loaded when the extension is loaded and theme is transmitted to sidebar.html as an html parameters. It's the same for the custom css. sidebar.html load as quickly as possible theme.js which applies the nice browser theme.

For dark theme users:

Set toolkit.legacyUserProfileCustomizations.stylesheet to true in about:config.
Add this in your userChrome.css file.

/* ff 73.0.1 - tab center reborn: avoid white flashes when the
    sidebar is opened */
    @-moz-document url(chrome://browser/content/browser.xhtml) {
      browser#sidebar {
        background-color: #0c0c0d !important;
      }
    }

    @-moz-document url(chrome://browser/content/webext-panels.xhtml) {
      window#webextpanels-window,
      window#webextpanels-window script:first-child,
      browser#webext-panels-browser {
        background-color: #0c0c0d !important;
      }

      /* the background color of this element cannot be overriden on the
      linux version so its first item is used as placeholder element */
      window#webextpanels-window script:first-child {
        display: block;
        height: 100vh;
      }

      stack#webext-panels-stack {
        margin-top: -100vh;
      }
    }

    /* userContent.css */
    @-moz-document url-prefix("moz-extension://TCR-UUID/sidebar/sidebar.html") {
      :root body {
        --background: #0c0c0d;
      }
    }
Edited by Acelya

Merge request reports