Bug 1543324 - Part 1: Replace --theme-content-color1,2,3 variables; r=ntim
authorFlorens Verschelde <florens@fvsch.com>
Thu, 18 Apr 2019 19:18:43 +0000
changeset 470131 fd95155960a13a8776f8349e67db99eb71c868a7
parent 470130 084d8d7331a72473e3bddcd537a98b5983087581
child 470132 59d2894daa38d968b8ea1c1cf22522959e0037a6
push id35888
push useraiakab@mozilla.com
push dateFri, 19 Apr 2019 09:47:45 +0000
treeherdermozilla-central@0160424142d1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim
bugs1543324
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1543324 - Part 1: Replace --theme-content-color1,2,3 variables; r=ntim Differential Revision: https://phabricator.services.mozilla.com/D27106
devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css
devtools/client/debugger/src/components/SecondaryPanes/Workers.css
devtools/client/debugger/src/components/ShortcutsModal.css
devtools/client/debugger/src/components/shared/reps.css
devtools/client/jsonview/css/text-panel.css
devtools/client/netmonitor/src/assets/styles/RequestList.css
devtools/client/shared/components/tree/TreeView.css
devtools/client/shared/sourceeditor/codemirror/mozilla.css
devtools/client/shared/test/browser_theme.js
devtools/client/themes/animation.css
devtools/client/themes/breadcrumbs.css
devtools/client/themes/chart.css
devtools/client/themes/dark-theme.css
devtools/client/themes/markup.css
devtools/client/themes/memory.css
devtools/client/themes/performance.css
devtools/client/themes/rules.css
devtools/client/themes/storage.css
devtools/client/themes/variables.css
devtools/client/themes/webconsole.css
devtools/client/themes/widgets.css
--- a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css
@@ -38,17 +38,17 @@
 
 .breakpoints-list .breakpoint-heading .filename span {
   opacity: 0.7;
   padding-left: 4px;
 }
 
 .breakpoints-list .breakpoint-heading,
 .breakpoints-list .breakpoint {
-  color: var(--theme-content-color1);
+  color: var(--theme-text-color-strong);
   position: relative;
   cursor: pointer;
 }
 
 .breakpoints-list .breakpoint-heading,
 .breakpoints-list .breakpoint,
 .breakpoints-exceptions,
 .breakpoints-exceptions-caught {
--- a/devtools/client/debugger/src/components/SecondaryPanes/Workers.css
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Workers.css
@@ -8,17 +8,17 @@
 
 .workers-list * {
   -moz-user-select: none;
   user-select: none;
 }
 
 .workers-list > .worker {
   font-size: inherit;
-  color: var(--theme-content-color1);
+  color: var(--theme-text-color-strong);
   padding: 2px 6px;
   padding-inline-start: 20px;
   line-height: 16px;
   position: relative;
   cursor: pointer;
   display: flex;
   align-items: center;
 }
--- a/devtools/client/debugger/src/components/ShortcutsModal.css
+++ b/devtools/client/debugger/src/components/ShortcutsModal.css
@@ -7,17 +7,17 @@
   column-width: 250px;
   cursor: default;
   user-select: none;
 }
 
 .shortcuts-content h2 {
   margin-top: 2px;
   margin-bottom: 2px;
-  color: var(--theme-content-color1);
+  color: var(--theme-text-color-strong);
 }
 
 .shortcuts-section {
   display: inline-block;
   margin: 5px;
   margin-bottom: 15px;
   width: 250px;
 }
--- a/devtools/client/debugger/src/components/shared/reps.css
+++ b/devtools/client/debugger/src/components/shared/reps.css
@@ -5,17 +5,17 @@
 
 .theme-dark,
 .theme-light {
   --number-color: var(--theme-highlight-green);
   --string-color: var(--theme-highlight-orange);
   --null-color: var(--theme-comment);
   --object-color: var(--theme-body-color);
   --caption-color: var(--theme-highlight-blue);
-  --location-color: var(--theme-content-color1);
+  --location-color: var(--theme-text-color-strong);
   --source-link-color: var(--theme-highlight-blue);
   --node-color: var(--theme-highlight-bluegrey);
   --reference-color: var(--theme-highlight-purple);
 }
 
 /******************************************************************************/
 
 .objectLink:hover {
--- a/devtools/client/jsonview/css/text-panel.css
+++ b/devtools/client/jsonview/css/text-panel.css
@@ -9,10 +9,10 @@
 .textPanelBox {
   height: 100%;
 }
 
 .textPanelBox pre {
   margin: 8px;
   white-space: pre-wrap;
   font-family: var(--monospace-font-family);
-  color: var(--theme-content-color1);
+  color: var(--theme-text-color-strong);
 }
--- a/devtools/client/netmonitor/src/assets/styles/RequestList.css
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -212,21 +212,21 @@
   transition: box-shadow 0.5s ease-in-out;
 }
 
 .request-list-item.selected .requests-list-status-icon {
   filter: brightness(1.3);
 }
 
 .requests-list-status-icon:not([data-code]) {
-  background-color: var(--theme-content-color2);
+  background-color: var(--theme-body-color);
 }
 
 .requests-list-status-icon[data-code="cached"] {
-  border: 2px solid var(--theme-content-color2);
+  border: 2px solid var(--theme-body-color);
   background-color: transparent;
 }
 
 .requests-list-status-icon[data-code^="1"] {
   background-color: var(--status-code-color-1xx);
 }
 
 .requests-list-status-icon[data-code^="2"] {
--- a/devtools/client/shared/components/tree/TreeView.css
+++ b/devtools/client/shared/components/tree/TreeView.css
@@ -49,17 +49,17 @@
   width: 100%;
   height: 20px;
   margin: 0;
   margin-inline-start: -2px;
   border: solid 1px transparent;
   outline: none;
   box-shadow: none;
   padding: 0 1px;
-  color: var(--theme-content-color1);
+  color: var(--theme-text-color-strong);
   background: var(--theme-sidebar-background);
 }
 
 .treeTable .treeValueCell.inputEnabled input:focus {
   border-color: var(--theme-textbox-box-shadow);
   transition: all 150ms ease-in-out;
 }
 
--- a/devtools/client/shared/sourceeditor/codemirror/mozilla.css
+++ b/devtools/client/shared/sourceeditor/codemirror/mozilla.css
@@ -170,17 +170,17 @@
 
 .CodeMirror-foldgutter-open,
 .CodeMirror-foldgutter-folded {
   height: 14px;
   background-image: url("chrome://devtools/skin/images/arrow.svg");
   background-position: center;
   background-repeat: no-repeat;
   -moz-context-properties: fill;
-  fill: var(--theme-content-color3);
+  fill: var(--theme-icon-dimmed-color);
   /* make the icons smaller than regular twistys (10->8px) */
   background-size: 8px;
   cursor: pointer;
 }
 
 .CodeMirror-foldgutter-folded {
   transform: rotate(-90deg);
 }
--- a/devtools/client/shared/test/browser_theme.js
+++ b/devtools/client/shared/test/browser_theme.js
@@ -76,19 +76,18 @@ function testGetColor() {
   setTheme(originalTheme);
 }
 
 function testColorExistence() {
   const vars = [
     "body-background", "sidebar-background", "contrast-background",
     "tab-toolbar-background", "toolbar-background", "selection-background",
     "selection-color", "selection-background-hover", "splitter-color",
-    "comment", "body-color", "body-color-alt", "content-color1", "content-color2",
-    "content-color3", "highlight-green", "highlight-blue", "highlight-bluegrey",
-    "highlight-purple", "highlight-lightorange", "highlight-orange", "highlight-red",
-    "highlight-pink",
+    "comment", "body-color", "body-color-alt", "text-color-strong",
+    "highlight-green", "highlight-blue", "highlight-bluegrey", "highlight-purple",
+    "highlight-lightorange", "highlight-orange", "highlight-red", "highlight-pink",
   ];
 
   for (const type of vars) {
     ok(getColor(type, "light"), `${type} is a valid color in light theme`);
     ok(getColor(type, "dark"), `${type} is a valid color in dark theme`);
   }
 }
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -218,17 +218,17 @@ select.playback-rate-selector.devtools-b
   position: relative;
 }
 
 .animation-summary-graph.compositor::after {
   background-image: var(--fast-track-image);
   background-repeat: no-repeat;
   content: "";
   display: block;
-  fill: var(--theme-content-color3);
+  fill: var(--theme-icon-dimmed-color);
   height: 100%;
   position: absolute;
   right: 0;
   top: 5px;
   width: 15px;
   -moz-context-properties: fill;
 }
 
--- a/devtools/client/themes/breadcrumbs.css
+++ b/devtools/client/themes/breadcrumbs.css
@@ -4,17 +4,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
  :root {
   --breadcrumb-id-class-color: #909090;
   --breadcrumb-pseudo-class-text-color: var(--yellow-70) ;
  }
 
  .theme-dark:root {
-  --breadcrumb-id-class-color: var(--theme-content-color1);
+  --breadcrumb-id-class-color: var(--theme-text-color-strong);
   --breadcrumb-pseudo-class-text-color: var(--yellow-50);
  }
 
 /* Inspector HTMLBreadcrumbs */
 
 .breadcrumbs-widget-container {
   margin-inline-end: 3px;
   max-height: 24px; /* Set max-height for proper sizing on linux */
--- a/devtools/client/themes/chart.css
+++ b/devtools/client/themes/chart.css
@@ -13,18 +13,18 @@
   color: var(--theme-selection-color);
 }
 
 .theme-light .generic-chart-container {
   color: var(--theme-body-color-alt);
 }
 
 .chart-colored-blob {
-  fill: var(--theme-content-color2);
-  background: var(--theme-content-color2);
+  fill: var(--theme-body-color);
+  background: var(--theme-body-color);
 }
 
 /* Chart: Pie */
 
 .pie-chart-slice {
   stroke-width: 1px;
   cursor: pointer;
 }
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -179,26 +179,26 @@ body {
 
 .CodeMirror.cm-s-mozilla  { /* Inherit platform specific font sizing and styles */
   font-family: inherit;
   font-size: inherit;
   background: transparent;
 }
 
 .CodeMirror.cm-s-mozilla  pre {
-  color: var(--theme-content-color1);
+  color: var(--theme-text-color-strong);
 }
 
 .cm-s-mozilla .cm-operator {
   color: var(--theme-body-color);
 }
 
 .cm-s-mozilla .cm-variable-3,
 .cm-s-mozilla .cm-special {
-  color: var(--theme-content-color1);
+  color: var(--theme-text-color-strong);
 }
 
 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
   border-left: solid 1px #fff;
 }
 
 .cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
   background: var(--theme-selection-background-hover);
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -119,17 +119,17 @@ body.dragging .tag-line {
 .tag-line.drag-target::before {
   content: "";
   position: absolute;
   top: -1px;
   height: 2px;
   /* Offset these by 1000px to make sure they cover the full width of the view */
   width: calc(100% + 1000px);
   left: -1000px;
-  background-color: var(--theme-content-color2);
+  background-color: var(--theme-body-color);
 }
 
 .tag-line.drop-target::before {
   background-color: var(--theme-contrast-background);
 }
 
 /* In case the indicator is put on the closing .tag-line, the indentation level
  * will become misleading, so we push it forward to match the indentation level */
@@ -300,17 +300,17 @@ ul.children + .tag-line::before {
 }
 
 .editor.text pre,
 .editor.comment pre {
   font: inherit;
 }
 
 .theme-dark .editor.text pre {
-  color: var(--theme-content-color1);
+  color: var(--theme-text-color-strong);
 }
 
 /* Whitespace only text nodes are sometimes shown in the markup-view, and when they do
    they get a greyed-out whitespace symbol so users know what they are */
 .editor.text .whitespace {
   padding: 0 .5em;
 }
 
--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -501,17 +501,17 @@ html, body, #app, #memory-tool {
 .heap-tree-percent,
 .heap-tree-item-name {
   white-space: nowrap;
 }
 
 .heap-tree-number {
   padding: 0 3px;
   flex: 1;
-  color: var(--theme-content-color3);
+  color: var(--theme-body-color-alt);
   /* Make sure number doesn't appear backwards on RTL locales */
   direction: ltr;
 }
 
 .heap-tree-percent {
   padding-inline-start: 3px;
   padding-inline-end: 3px;
 }
--- a/devtools/client/themes/performance.css
+++ b/devtools/client/themes/performance.css
@@ -422,17 +422,17 @@
 .call-tree-column {
   color: var(--theme-highlight-orange);
   opacity: 0.6;
 }
 
 .call-tree-host {
   margin-inline-start: 8px !important;
   font-size: 90%;
-  color: var(--theme-content-color2);
+  color: var(--theme-body-color);
 }
 
 .call-tree-category {
   transform: scale(0.75);
   transform-origin: center right;
 }
 
 /**
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -1,26 +1,24 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* CSS Variables specific to this panel that aren't defined by the themes */
 :root {
   --rule-highlight-background-color: var(--theme-highlight-yellow);
-  --rule-overridden-item-border-color: var(--theme-content-color3);
   --rule-header-background-color: var(--theme-toolbar-background);
   --rule-pseudo-class-text-color: var(--yellow-70) ;
   /* This should be --yellow-50 but since we need an opacity of 0.4, we hard-code the
   resulting color here for now. */
   --rule-property-highlight-background-color: #FFF697;
 }
 
 :root.theme-dark {
   --rule-highlight-background-color: #521C76;
-  --rule-overridden-item-border-color: var(--theme-content-color1);
   --rule-header-background-color: #222225;
   --rule-pseudo-class-text-color: var(--yellow-50);
   /* This should be --yellow-50 but since we need an opacity of 0.3, we hard-code the
   resulting color here for now. */
   --rule-property-highlight-background-color: #605913;
 }
 
 /* Rule View Tabpanel */
@@ -410,39 +408,41 @@
   list-style: none;
   line-height: 1.5em;
 }
 
 .ruleview-overridden-item {
   position: relative;
 }
 
-.ruleview-overridden-item::before {
+.ruleview-overridden-item::before,
+.ruleview-overridden-item::after {
+  content: "";
   position: absolute;
-  left: -15px;
+  display: block;
+  border: 0px solid var(--theme-body-color-alt);
+}
+
+.ruleview-overridden-item::before {
   top: 0px;
-  content: '';
-  display: block;
-  border-left: 0.5px solid var(--rule-overridden-item-border-color);
+  left: -15px;
   height: 0.8em;
-  border-bottom: 0.5px solid var(--rule-overridden-item-border-color);
   width: 10px;
+  border-left-width: 0.5px;
+  border-bottom-width: 0.5px;
 }
 
 .ruleview-overridden-item::after {
-  position: absolute;
   left: -15px;
   bottom: -7px;
-  content: '';
-  display: block;
-  border-left: 0.5px solid var(--rule-overridden-item-border-color);
   height: 100%;
+  border-left-width: 0.5px;
 }
 
-.ruleview-overridden-item:last-child:after {
+.ruleview-overridden-item:last-child::after {
   display: none;
 }
 
 .ruleview-overridden-item .ruleview-namecontainer {
   margin-left: 0;
 }
 
 /* All swatches */
@@ -536,35 +536,31 @@
   background-image: url("chrome://devtools/skin/images/filter-swatch.svg");
 }
 
 .ruleview-angleswatch {
   background-image: url("chrome://devtools/skin/images/angle-swatch.svg");
 }
 
 .ruleview-overridden {
-  text-decoration: line-through;
+  text-decoration: line-through solid var(--theme-body-color-alt);
 }
 
 /**
  * Hide swatches (tool icons) from properties that are overwritten by higher specificity * rules.
  * .ruleview-swatch is a base class for many tool swatches (shapes, color, bezier curves)
  * .ruleview-flex and .ruleview-grid are custom
  */
 .ruleview-overridden .ruleview-flex,
 .ruleview-overridden .ruleview-grid,
 .ruleview-overridden .ruleview-shapeswatch,
 .ruleview-overridden .ruleview-swatch {
   display: none;
 }
 
-.theme-light .ruleview-overridden {
-  text-decoration-color: var(--theme-content-color3);
-}
-
 .ruleview-font-family.used-font {
   text-decoration: underline;
 }
 
 .styleinspector-propertyeditor {
   border: 1px solid #CCC;
   padding: 0;
   margin: -1px -3px -1px -1px;
--- a/devtools/client/themes/storage.css
+++ b/devtools/client/themes/storage.css
@@ -54,17 +54,17 @@
 #storage-table textbox {
   -moz-appearance: none;
   /* make sure the outline is not cut off */
   position: relative;
   max-width: calc(100% - 1px);
   padding: 3px 3px;
   font: inherit;
   line-height: 14px;
-  color: var(--theme-content-color1);
+  color: var(--theme-text-color-strong);
   background-color: var(--theme-body-background);
 }
 
 /* Variables View Sidebar */
 
 #storage-sidebar {
   max-width: 500px;
   min-width: 250px;
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -52,19 +52,17 @@
   --theme-icon-checked-color: var(--blue-60);
 
   /* Text color */
   --theme-comment: var(--grey-50);
   --theme-comment-alt: var(--grey-40);
   --theme-body-color: var(--grey-60);
   --theme-body-color-alt: var(--grey-50);
   --theme-body-color-inactive: var(--grey-40);
-  --theme-content-color1: var(--grey-80);
-  --theme-content-color2: var(--grey-60);
-  --theme-content-color3: var(--grey-45);
+  --theme-text-color-strong: var(--grey-80);
 
   --theme-highlight-green: var(--green-70);
   --theme-highlight-blue: var(--blue-55);
   --theme-highlight-purple: var(--blue-70);
   --theme-highlight-red: var(--magenta-65);
   --theme-highlight-yellow: #FFF89E;
 
   /* These theme-highlight color variables have not been photonized. */
@@ -145,19 +143,17 @@
   --theme-icon-checked-color: var(--blue-30);
 
   /* Text color */
   --theme-comment: var(--grey-45);
   --theme-comment-alt: var(--grey-50);
   --theme-body-color: var(--grey-40);
   --theme-body-color-alt: var(--grey-45);
   --theme-body-color-inactive: var(--grey-50);
-  --theme-content-color1: var(--grey-30);
-  --theme-content-color2: var(--grey-40);
-  --theme-content-color3: var(--grey-55);
+  --theme-text-color-strong: var(--grey-30);
 
   --theme-highlight-green: #86DE74;
   --theme-highlight-blue: #75BFFF;
   --theme-highlight-purple: #B98EFF;
   --theme-highlight-red: #FF7DE9;
   --theme-highlight-yellow: #FFF89E;
 
   /* These theme-highlight color variables have not been photonized. */
@@ -254,15 +250,14 @@
 
   --grey-10: #f9f9fa;
   --grey-20: #ededf0;
   --grey-25: #e0e0e2;
   --grey-30: #d7d7db;
   --grey-40: #b1b1b3;
   --grey-45: #939395;
   --grey-50: #737373;
-  --grey-55: #5c5c5f;
   --grey-60: #4a4a4f;
   --grey-70: #38383d;
   --grey-80: #2a2a2e;
   --grey-85: #1b1b1d;
   --grey-90: #0c0c0d;
 }
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -393,17 +393,17 @@ html #webconsole-notificationbox {
   background-color: var(--theme-tab-toolbar-background);
   border-top: 1px solid var(--theme-splitter-color);
   position: relative;
 }
 
 .jsterm-input-node {
   box-sizing: border-box;
   min-height: 100%;
-  color: var(--theme-content-color1);
+  color: var(--theme-text-color-strong);
   /* input icon */
   background-image: url(chrome://devtools/skin/images/webconsole/input.svg);
   background-position-x: calc(10px + var(--console-icon-horizontal-offset));
   background-position-y: 7px;
   background-repeat: no-repeat;
   background-size: 12px 12px;
   -moz-context-properties: fill;
   fill: var(--theme-icon-dimmed-color);
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -513,26 +513,26 @@
   left: 14px;
 }
 
 .line-graph-widget-tooltip[type=average] {
   right: 4px;
 }
 
 .line-graph-widget-tooltip > [text=info] {
-  color: var(--theme-content-color1);
+  color: var(--theme-text-color-strong);
 }
 
 .line-graph-widget-tooltip > [text=value] {
   margin-inline-start: 3px;
 }
 
 .line-graph-widget-tooltip > [text=metric] {
   margin-inline-start: 1px;
-  color: var(--theme-content-color3);
+  color: var(--theme-body-color-alt);
 }
 
 .theme-light .line-graph-widget-tooltip > [text=value],
 .theme-light .line-graph-widget-tooltip > [text=metric] {
   text-shadow: 1px  0px rgba(255,255,255,0.5),
               -1px  0px rgba(255,255,255,0.5),
                0px -1px rgba(255,255,255,0.5),
                0px  1px rgba(255,255,255,0.5);