Bug 1314091 - TO FOLD BEFORE LANDING. Replace [devtoolstheme] with :-moz-lwtheme-darktext and :-moz-lwtheme-brighttext
MozReview-Commit-ID: WnhMr0wUkX
--- a/browser/themes/linux/compacttheme.css
+++ b/browser/themes/linux/compacttheme.css
@@ -3,29 +3,29 @@
% file, You can obtain one at http://mozilla.org/MPL/2.0/.
%include ../shared/compacttheme.inc.css
:root {
--forwardbutton-width: 29px;
}
-:root[devtoolstheme="light"] {
+:root:-moz-lwtheme-darktext {
--urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
--urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px);
--urlbar-dropmarker-hover-region: rect(0, 22px, 14px, 11px);
--urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px);
--urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
--urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px);
--urlbar-dropmarker-hover-2x-region: rect(0, 22px, 14px, 11px);
--urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px);
}
-:root[devtoolstheme="dark"] .findbar-closebutton:not(:hover),
-:root[devtoolstheme="dark"] #sidebar-header > .close-icon:not(:hover),
+:root:-moz-lwtheme-brighttext .findbar-closebutton:not(:hover),
+:root:-moz-lwtheme-brighttext #sidebar-header > .close-icon:not(:hover),
.tab-close-button[selected]:not(:hover) {
background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64);
}
/* The menubar and tabs toolbar should match the devedition theme */
#TabsToolbar,
#toolbar-menubar {
-moz-appearance: none !important;
--- a/browser/themes/osx/compacttheme.css
+++ b/browser/themes/osx/compacttheme.css
@@ -101,24 +101,24 @@
padding-bottom: 3px !important;
}
#PanelUI-button {
margin-top: 0;
margin-bottom: 0;
}
-:root[devtoolstheme="dark"] .findbar-closebutton:not(:hover),
+:root:-moz-lwtheme-brighttext .findbar-closebutton:not(:hover),
/* Tab styling - make sure to use an inverted icon for the selected tab
(brighttext only covers the unselected tabs) */
.tab-close-button[selected=true]:not(:hover) {
-moz-image-region: rect(0, 64px, 16px, 48px);
}
@media (min-resolution: 2dppx) {
- :root[devtoolstheme="dark"] .findbar-closebutton:not(:hover),
+ :root:-moz-lwtheme-brighttext .findbar-closebutton:not(:hover),
.tab-close-button[selected=true]:not(:hover) {
-moz-image-region: rect(0, 128px, 32px, 96px);
}
}
.ac-type-icon {
/* Left-align the type icon in awesomebar popup results with the icon in the
urlbar. */
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -9,17 +9,17 @@
:root {
--tab-toolbar-navbar-overlap: 0px;
--navbar-tab-toolbar-highlight-overlap: 0px;
--space-above-tabbar: 0px;
--toolbarbutton-text-shadow: none;
--backbutton-urlbar-overlap: 0px;
}
-:root[devtoolstheme="dark"] {
+:root:-moz-lwtheme-brighttext {
/* Chrome */
--chrome-background-color: #272b35;
--chrome-color: #F5F7FA;
--chrome-secondary-background-color: #393F4C;
--chrome-navigator-toolbox-separator-color: rgba(0,0,0,.2);
--chrome-nav-bar-separator-color: rgba(0,0,0,.2);
--chrome-nav-buttons-background: #252C33;
--chrome-nav-buttons-hover-background: #1B2127;
@@ -45,29 +45,29 @@
--urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px);
--urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg");
--urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px);
--urlbar-dropmarker-hover-2x-region: rect(0, 22px, 14px, 11px);
--urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px);
}
/* Override the lwtheme-specific styling for toolbar buttons */
-:root[devtoolstheme="dark"],
-:root[devtoolstheme="dark"] toolbar:-moz-lwtheme {
+:root:-moz-lwtheme-brighttext,
+:root:-moz-lwtheme-brighttext toolbar:-moz-lwtheme {
--toolbarbutton-hover-background: rgba(25,33, 38,.6) linear-gradient(rgba(25,33,38,.6), rgba(25,33,38,.6)) padding-box;
--toolbarbutton-hover-boxshadow: none;
--toolbarbutton-hover-bordercolor: rgba(25,33,38,.6);
--toolbarbutton-active-background: rgba(25,33,38,1) linear-gradient(rgba(25,33,38,1), rgba(25,33,38,1)) border-box;
--toolbarbutton-active-boxshadow: none;
--toolbarbutton-active-bordercolor: rgba(25,33,38,.8);
--toolbarbutton-checkedhover-backgroundcolor: #3C5283;
}
-:root[devtoolstheme="light"] {
+:root:-moz-lwtheme-darktext {
--url-and-searchbar-background-color: #fff;
--chrome-background-color: #E3E4E6;
--chrome-color: #18191a;
--chrome-secondary-background-color: #f5f6f7;
--chrome-navigator-toolbox-separator-color: #cccccc;
--chrome-nav-bar-separator-color: #B6B6B8;
--chrome-nav-buttons-background: #ffffff; /* --theme-body-background */
@@ -80,18 +80,18 @@
--tab-hover-background-color: #D7D8DA;
--tab-selection-color: #f5f7fa;
--tab-selection-background-color: #4c9ed9;
--tab-selection-box-shadow: none;
--pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, transparent 16%);
}
/* Override the lwtheme-specific styling for toolbar buttons */
-:root[devtoolstheme="light"],
-:root[devtoolstheme="light"] toolbar:-moz-lwtheme {
+:root:-moz-lwtheme-darktext,
+:root:-moz-lwtheme-darktext toolbar:-moz-lwtheme {
--toolbarbutton-hover-background: #eaeaea;
--toolbarbutton-hover-boxshadow: none;
--toolbarbutton-hover-bordercolor: rgba(0,0,0,0.1);
--toolbarbutton-active-background: #d7d7d8 border-box;
--toolbarbutton-active-boxshadow: none;
--toolbarbutton-active-bordercolor: rgba(0,0,0,0.15);
--toolbarbutton-checkedhover-backgroundcolor: #d7d7d8;
}
@@ -192,37 +192,37 @@ toolbar[brighttext] #downloads-indicator
background-color: var(--url-and-searchbar-background-color) !important;
background-image: none !important;
color: inherit !important;
border: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
box-shadow: none !important;
}
%filter substitution
-%define selectorPrefix :root[devtoolstheme="dark"]
+%define selectorPrefix :root:-moz-lwtheme-brighttext
%define selectorSuffix :-moz-lwtheme
%define iconVariant -white
%include identity-block/icons.inc.css
#urlbar {
border-inline-start: none !important;
opacity: 1 !important;
}
window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
overflow: -moz-hidden-unscrollable;
clip-path: none;
margin-inline-start: 0;
}
-:root[devtoolstheme="dark"] #urlbar-zoom-button:hover {
+:root:-moz-lwtheme-brighttext #urlbar-zoom-button:hover {
background-color: rgba(255,255,255,.2);
}
-:root[devtoolstheme="dark"] #urlbar-zoom-button:hover:active {
+:root:-moz-lwtheme-brighttext #urlbar-zoom-button:hover:active {
background-color: rgba(255,255,255,.3);
}
/* Nav bar specific stuff */
#nav-bar {
margin-top: 0 !important;
border-top: none !important;
border-bottom: none !important;
--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -3,18 +3,18 @@
% file, You can obtain one at http://mozilla.org/MPL/2.0/.
%include ../shared/compacttheme.inc.css
:root {
--forwardbutton-width: 29px;
}
-:root[devtoolstheme="dark"],
-:root[devtoolstheme="light"] {
+:root:-moz-lwtheme-brighttext,
+:root:-moz-lwtheme-darktext {
/* Matches the #browser-border-start, #browser-border-end color */
--chrome-nav-bar-separator-color: rgba(10, 31, 51, 0.35);
}
/* The window background is white due to no accentcolor in the lightweight
theme. It can't be changed to transparent when there is no compositor
(Win 7 in classic / basic theme), or else dragging and focus become
broken. So instead just show the normal titlebar in that case, and override
@@ -95,27 +95,27 @@
.tabbrowser-tab {
background-color: var(--tab-background-color);
}
#toolbar-menubar {
text-shadow: none !important;
}
-:root[devtoolstheme="dark"] .findbar-closebutton,
-:root[devtoolstheme="dark"] #sidebar-header > .close-icon,
+:root:-moz-lwtheme-brighttext .findbar-closebutton,
+:root:-moz-lwtheme-brighttext #sidebar-header > .close-icon,
/* Tab styling - make sure to use an inverted icon for the selected tab
(brighttext only covers the unselected tabs) */
.tab-close-button[selected=true] {
list-style-image: url("chrome://global/skin/icons/close-inverted.png");
}
@media (min-resolution: 1.1dppx) {
- :root[devtoolstheme="dark"] .findbar-closebutton,
- :root[devtoolstheme="dark"] #sidebar-header > .close-icon,
+ :root:-moz-lwtheme-brighttext .findbar-closebutton,
+ :root:-moz-lwtheme-brighttext #sidebar-header > .close-icon,
.tab-close-button[selected=true] {
list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png");
}
}
@media (-moz-os-version: windows-win7),
(-moz-os-version: windows-win8) {
:root {
@@ -274,44 +274,44 @@
@media (-moz-os-version: windows-win10) {
/* Always keep draggable space on the sides of tabs since there is no top margin on Win10 */
#main-window .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
padding-left: 15px;
padding-right: 15px;
}
/* Force white caption buttons for the dark theme on Windows 10 */
- :root[devtoolstheme="dark"] #titlebar-min {
+ :root:-moz-lwtheme-brighttext #titlebar-min {
list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-white);
}
- :root[devtoolstheme="dark"] #titlebar-max {
+ :root:-moz-lwtheme-brighttext #titlebar-max {
list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-white);
}
- #main-window[devtoolstheme="dark"][sizemode="maximized"] #titlebar-max {
+ #main-window:-moz-lwtheme-brighttext[sizemode="maximized"] #titlebar-max {
list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-white);
}
- :root[devtoolstheme="dark"] #titlebar-close {
+ :root:-moz-lwtheme-brighttext #titlebar-close {
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white);
}
/* ... and normal ones for the light theme on Windows 10 */
- :root[devtoolstheme="light"] #titlebar-min {
+ :root:-moz-lwtheme-darktext #titlebar-min {
list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
}
- :root[devtoolstheme="light"] #titlebar-max {
+ :root:-moz-lwtheme-darktext #titlebar-max {
list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize);
}
- #main-window[devtoolstheme="light"][sizemode="maximized"] #titlebar-max {
+ #main-window:-moz-lwtheme-darktext[sizemode="maximized"] #titlebar-max {
list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
}
- :root[devtoolstheme="light"] #titlebar-close {
+ :root:-moz-lwtheme-darktext #titlebar-close {
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
}
- :root[devtoolstheme="light"] #titlebar-close:hover {
+ :root:-moz-lwtheme-darktext #titlebar-close:hover {
list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white);
}
}
.ac-type-icon {
/* Left-align the type icon in awesomebar popup results with the icon in the
urlbar. */
margin-inline-start: 13px;