browser/themes/ThemeVariableMap.jsm

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 var EXPORTED_SYMBOLS = ["ThemeVariableMap", "ThemeContentPropertyList"];
   6
   7 const { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
   8
   9 const ThemeVariableMap = [
  10   [
  11     "--lwt-accent-color-inactive",
  12     {
  13       lwtProperty: "accentcolorInactive",
  14     },
  15   ],
  16   [
  17     "--lwt-background-alignment",
  18     {
  19       isColor: false,
  20       lwtProperty: "backgroundsAlignment",
  21     },
  22   ],
  23   [
  24     "--lwt-background-tiling",
  25     {
  26       isColor: false,
  27       lwtProperty: "backgroundsTiling",
  28     },
  29   ],
  30   [
  31     "--tab-loading-fill",
  32     {
  33       lwtProperty: "tab_loading",
  34       optionalElementID: "tabbrowser-tabs",
  35     },
  36   ],
  37   [
  38     "--lwt-tab-text",
  39     {
  40       lwtProperty: "tab_text",
  41     },
  42   ],
  43   [
  44     "--lwt-tab-line-color",
  45     {
  46       lwtProperty: "tab_line",
  47       optionalElementID: "TabsToolbar",
  48     },
  49   ],
  50   [
  51     "--lwt-background-tab-separator-color",
  52     {
  53       lwtProperty: "tab_background_separator",
  54     },
  55   ],
  56   [
  57     "--toolbar-bgcolor",
  58     {
  59       lwtProperty: "toolbarColor",
  60     },
  61   ],
  62   [
  63     "--toolbar-color",
  64     {
  65       lwtProperty: "toolbar_text",
  66     },
  67   ],
  68   [
  69     "--lwt-tabs-border-color",
  70     {
  71       lwtProperty: "toolbar_top_separator",
  72       optionalElementID: "navigator-toolbox",
  73     },
  74   ],
  75   [
  76     "--toolbarseparator-color",
  77     {
  78       lwtProperty: "toolbar_vertical_separator",
  79     },
  80   ],
  81   [
  82     "--chrome-content-separator-color",
  83     {
  84       lwtProperty: "toolbar_bottom_separator",
  85     },
  86   ],
  87   [
  88     "--toolbarbutton-icon-fill",
  89     {
  90       lwtProperty: "icon_color",
  91     },
  92   ],
  93   [
  94     "--lwt-toolbarbutton-icon-fill-attention",
  95     {
  96       lwtProperty: "icon_attention_color",
  97     },
  98   ],
  99   [
 100     "--toolbarbutton-hover-background",
 101     {
 102       lwtProperty: "button_background_hover",
 103     },
 104   ],
 105   [
 106     "--toolbarbutton-active-background",
 107     {
 108       lwtProperty: "button_background_active",
 109     },
 110   ],
 111   [
 112     "--lwt-selected-tab-background-color",
 113     {
 114       lwtProperty: "tab_selected",
 115     },
 116   ],
 117   [
 118     "--autocomplete-popup-highlight-background",
 119     {
 120       lwtProperty: "popup_highlight",
 121     },
 122   ],
 123   [
 124     "--autocomplete-popup-highlight-color",
 125     {
 126       lwtProperty: "popup_highlight_text",
 127     },
 128   ],
 129   [
 130     "--sidebar-background-color",
 131     {
 132       lwtProperty: "sidebar",
 133       optionalElementID: "sidebar-box",
 134       processColor(rgbaChannels, element) {
 135         if (!rgbaChannels) {
 136           element.removeAttribute("lwt-sidebar");
 137           return null;
 138         }
 139         const { r, g, b } = rgbaChannels;
 140         element.setAttribute("lwt-sidebar", "true");
 141         // Drop alpha channel
 142         return `rgb(${r}, ${g}, ${b})`;
 143       },
 144     },
 145   ],
 146   [
 147     "--sidebar-text-color",
 148     {
 149       lwtProperty: "sidebar_text",
 150       optionalElementID: "sidebar-box",
 151     },
 152   ],
 153   [
 154     "--sidebar-border-color",
 155     {
 156       lwtProperty: "sidebar_border",
 157       optionalElementID: "browser",
 158     },
 159   ],
 160   [
 161     "--tabpanel-background-color",
 162     {
 163       lwtProperty: "ntp_background",
 164       processColor(rgbaChannels) {
 165         if (
 166           !rgbaChannels ||
 167           !Services.prefs.getBoolPref("browser.newtabpage.enabled")
 168         ) {
 169           // We only set the tabpanel background to the new tab background color
 170           // if the user uses about:home for new tabs. Otherwise, we flash a
 171           // colorful background when a new tab is opened. We will flash the
 172           // newtab color in new windows if the user uses about:home for new
 173           // tabs but not new windows. However, the flash is concealed by the OS
 174           // window-open animation.
 175           return null;
 176         }
 177         // Drop alpha channel
 178         let { r, g, b } = rgbaChannels;
 179         return `rgb(${r}, ${g}, ${b})`;
 180       },
 181     },
 182   ],
 183 ];
 184
 185 const ThemeContentPropertyList = [
 186   "ntp_background",
 187   "ntp_card_background",
 188   "ntp_text",
 189   "sidebar",
 190   "sidebar_highlight",
 191   "sidebar_highlight_text",
 192   "sidebar_text",
 193 ];