Bug 1543324 - Part 2: Rename --theme-body-color-* variables to --theme-text-color-*; r=ntim
authorFlorens Verschelde <florens@fvsch.com>
Wed, 17 Apr 2019 14:06:58 +0000
changeset 470132 59d2894daa38d968b8ea1c1cf22522959e0037a6
parent 470131 fd95155960a13a8776f8349e67db99eb71c868a7
child 470133 b92e12f815e1afe5ce87a588e05b906c15a364e3
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 2: Rename --theme-body-color-* variables to --theme-text-color-*; r=ntim Differential Revision: https://phabricator.services.mozilla.com/D27107
devtools/client/application/src/components/Worker.css
devtools/client/debugger/src/components/PrimaryPanes/Sources.css
devtools/client/debugger/src/components/ProjectSearch.css
devtools/client/debugger/src/components/shared/SearchInput.css
devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
devtools/client/netmonitor/src/assets/styles/RequestList.css
devtools/client/performance/modules/widgets/markers-overview.js
devtools/client/responsive.html/index.css
devtools/client/shared/test/browser_theme.js
devtools/client/shared/widgets/cubic-bezier.css
devtools/client/shared/widgets/filter-widget.css
devtools/client/themes/chart.css
devtools/client/themes/common.css
devtools/client/themes/computed.css
devtools/client/themes/fonts.css
devtools/client/themes/markup.css
devtools/client/themes/memory.css
devtools/client/themes/performance.css
devtools/client/themes/rules.css
devtools/client/themes/tooltips.css
devtools/client/themes/variables.css
devtools/client/themes/webconsole.css
devtools/client/themes/widgets.css
--- a/devtools/client/application/src/components/Worker.css
+++ b/devtools/client/application/src/components/Worker.css
@@ -27,17 +27,17 @@
   font-size: 1.2rem;
 }
 
 .worker:first-child {
   padding-top: 0;
 }
 
 .worker:not(:last-child) {
-  border-bottom: 1px solid var(--theme-body-color-alt);
+  border-bottom: 1px solid var(--theme-text-color-alt);
 }
 
 .worker__header {
   grid-column: 1/3;
   display: grid;
   grid-template-columns: 1fr auto;
   grid-column-gap: 2rem;
   align-items: center;
@@ -66,10 +66,10 @@
   grid-column-gap: 1rem;
 }
 
 .worker__data > * {
   margin: 0;
 }
 
 .worker__data__updated {
-  color: var(--theme-body-color-alt);
+  color: var(--theme-text-color-alt);
 }
--- a/devtools/client/debugger/src/components/PrimaryPanes/Sources.css
+++ b/devtools/client/debugger/src/components/PrimaryPanes/Sources.css
@@ -29,17 +29,17 @@
 .sources-clear-root .home {
   background-color: var(--theme-icon-dimmed-color);
 }
 
 .sources-clear-root .breadcrumb {
   width: 5px;
   margin: 0 2px 0 6px;
   vertical-align: bottom;
-  background: var(--theme-body-color-alt);
+  background: var(--theme-text-color-alt);
 }
 
 .sources-clear-root-label {
   margin-left: 5px;
   line-height: 16px;
 }
 
 .sources-pane {
--- a/devtools/client/debugger/src/components/ProjectSearch.css
+++ b/devtools/client/debugger/src/components/ProjectSearch.css
@@ -63,17 +63,17 @@
   overflow-x: hidden;
 }
 
 .project-text-search .tree-indent {
   display: none;
 }
 
 .project-text-search .no-result-msg {
-  color: var(--theme-body-color-inactive);
+  color: var(--theme-text-color-inactive);
   font-size: 24px;
   padding: 4px 15px;
   max-width: 100%;
   overflow-wrap: break-word;
   hyphens: auto;
 }
 
 .project-text-search .file-result {
--- a/devtools/client/debugger/src/components/shared/SearchInput.css
+++ b/devtools/client/debugger/src/components/shared/SearchInput.css
@@ -95,17 +95,17 @@
 }
 
 .search-field-summary {
   align-self: center;
   padding: 2px 4px;
   white-space: nowrap;
   text-align: center;
   user-select: none;
-  color: var(--theme-body-color-alt);
+  color: var(--theme-text-color-alt);
 }
 
 .search-field .search-nav-buttons {
   display: flex;
   user-select: none;
 }
 
 .search-field .search-nav-buttons .nav-btn {
--- a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
@@ -42,17 +42,17 @@
 
 .network-monitor .properties-view .devtools-searchbox input {
   margin: 1px 3px;
 }
 
 /* Empty notices in tab panels */
 
 .network-monitor .empty-notice {
-  color: var(--theme-body-color-inactive);
+  color: var(--theme-text-color-inactive);
   padding: 3px 8px;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   font-size: 24px;
 }
--- a/devtools/client/netmonitor/src/assets/styles/RequestList.css
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -322,17 +322,17 @@
 }
 
 .request-list-item .status-code {
   margin-inline-start: 0px;
 }
 
 .requests-list-cause-stack {
   display: inline-block;
-  background-color: var(--theme-body-color-alt);
+  background-color: var(--theme-text-color-alt);
   color: var(--theme-body-background);
   font-size: 8px;
   font-weight: bold;
   line-height: 10px;
   border-radius: 3px;
   padding: 0 2px;
   margin: 0;
   margin-inline-end: 3px;
--- a/devtools/client/performance/modules/widgets/markers-overview.js
+++ b/devtools/client/performance/modules/widgets/markers-overview.js
@@ -220,15 +220,15 @@ MarkersOverview.prototype = extend(Abstr
     this.theme = theme = theme || "light";
     this.backgroundColor = getColor("body-background", theme);
     this.selectionBackgroundColor = colorUtils.setAlpha(
       getColor("selection-background", theme), 0.25);
     this.selectionStripesColor = colorUtils.setAlpha("#fff", 0.1);
     this.headerBackgroundColor = getColor("body-background", theme);
     this.headerTextColor = getColor("body-color", theme);
     this.headerTimelineStrokeColor = colorUtils.setAlpha(
-      getColor("body-color-alt", theme), 0.25);
+      getColor("text-color-alt", theme), 0.25);
     this.alternatingBackgroundColor = colorUtils.setAlpha(
       getColor("body-color", theme), 0.05);
   },
 });
 
 exports.MarkersOverview = MarkersOverview;
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -647,27 +647,27 @@ input:-moz-focusring {
 
 #device-form label {
   display: flex;
   flex-direction: column;
   margin: 5px;
 }
 
 #device-form label > .viewport-dimension {
-  color: var(--theme-body-color-inactive);
+  color: var(--theme-text-color-inactive);
   display: flex;
   align-items: center;
 }
 
 #device-form input {
   background: transparent;
   border: 1px solid;
   border-radius: 2px;
   text-align: center;
-  color: var(--theme-body-color-inactive);
+  color: var(--theme-text-color-inactive);
   transition: all 0.25s ease;
 }
 
 #device-form #device-form-name input,
 #device-form #device-form-user-agent input {
   text-align: left;
   padding-left: 12px;
   padding-right: 12px;
--- a/devtools/client/shared/test/browser_theme.js
+++ b/devtools/client/shared/test/browser_theme.js
@@ -76,17 +76,17 @@ 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", "text-color-strong",
+    "comment", "body-color", "text-color-alt", "text-color-inactive", "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/shared/widgets/cubic-bezier.css
+++ b/devtools/client/shared/widgets/cubic-bezier.css
@@ -190,17 +190,17 @@
   border-radius: 3px;
   background-color: var(--theme-body-background);
   margin: 0 auto;
 }
 
 .cubic-bezier-container .preset p {
   font-size: 80%;
   margin: 2px auto 0px auto;
-  color: var(--theme-body-color-alt);
+  color: var(--theme-text-color-alt);
   text-transform: capitalize;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
 .cubic-bezier-container .active-preset p,
 .cubic-bezier-container .active-preset:hover p {
   color: var(--theme-body-color);
--- a/devtools/client/shared/widgets/filter-widget.css
+++ b/devtools/client/shared/widgets/filter-widget.css
@@ -174,17 +174,17 @@
 
 #filter-container .preset span {
   flex: 2 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
   order: 3;
-  color: var(--theme-body-color-alt);
+  color: var(--theme-text-color-alt);
 }
 
 #filter-container .remove-button {
   width: 16px;
   height: 16px;
   background: url(chrome://devtools/skin/images/close.svg);
   background-size: cover;
   font-size: 0;
--- a/devtools/client/themes/chart.css
+++ b/devtools/client/themes/chart.css
@@ -9,17 +9,17 @@
   transform: translateZ(1px);
 }
 
 .theme-dark .generic-chart-container {
   color: var(--theme-selection-color);
 }
 
 .theme-light .generic-chart-container {
-  color: var(--theme-body-color-alt);
+  color: var(--theme-text-color-alt);
 }
 
 .chart-colored-blob {
   fill: var(--theme-body-color);
   background: var(--theme-body-color);
 }
 
 /* Chart: Pie */
@@ -113,17 +113,17 @@
 }
 
 .table-chart-totals {
   margin-top: 8px;
   padding-top: 6px;
 }
 
 .table-chart-totals {
-  border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */
+  border-top: 1px solid var(--theme-text-color-alt); /* Grey foreground text */
 }
 
 .table-chart-summary-label {
   font-weight: 600;
   padding: 1px 0px;
 }
 
 .theme-dark .table-chart-summary-label {
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -46,26 +46,26 @@
 :root[platform="linux"] {
   --monospace-font-family: monospace;
 }
 
 /**
  * Customize the dark theme's scrollbar colors to avoid excessive contrast.
  */
 :root.theme-dark {
-  scrollbar-color: var(--theme-body-color-inactive) var(--theme-splitter-color);
+  scrollbar-color: var(--grey-50) var(--theme-splitter-color);
 }
 
 /**
  * Customize scrollbar colors on Linux + light theme, to avoid visual conflicts
  * between the light theme and the selected GTK theme (see bug 1471163).
  * This removes GTK scrollbars and uses a fallback design (see bug 1464723).
  */
 :root[platform="linux"].theme-light {
-  scrollbar-color: var(--theme-body-color-inactive) var(--grey-20);
+  scrollbar-color: var(--grey-40) var(--grey-20);
 }
 
 .devtools-monospace {
   font-family: var(--monospace-font-family);
   font-size: var(--theme-code-font-size);
 }
 
 /**
--- a/devtools/client/themes/computed.css
+++ b/devtools/client/themes/computed.css
@@ -98,17 +98,17 @@
   vertical-align: -0.5px;
   width: 8px;
   height: 8px;
   margin: 0 1px;
   background-image: url(images/arrow-e.svg);
   background-repeat: no-repeat;
   background-size: contain;
   -moz-context-properties: fill;
-  fill: var(--theme-body-color-inactive);
+  fill: var(--theme-text-color-inactive);
 }
 
 .computed-other-property-value:dir(rtl)::before {
   transform: scaleX(-1);
 }
 
 .computed-property-value {
   overflow-x: hidden;
--- a/devtools/client/themes/fonts.css
+++ b/devtools/client/themes/fonts.css
@@ -172,17 +172,17 @@
 
 .font-css-code-expander::before {
   content: "\2026";
   display: inline-block;
   width: 12px;
   height: 8px;
   margin: 0 2px;
   line-height: 3px;
-  color: var(--theme-body-color-inactive);
+  color: var(--theme-text-color-inactive);
   border-radius: 3px;
   border-style: solid;
   border-width: 1px;
   text-align: center;
   vertical-align: middle;
 }
 
 .font-control {
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -318,17 +318,17 @@ ul.children + .tag-line::before {
   /* black circle (full) character */
   content: "\25cf";
   display: inline-block;
   width: 12px;
   height: 8px;
   margin: 0 2px;
   line-height: 7px;
   font-size: 0.6em;
-  color: var(--theme-body-color-inactive);
+  color: var(--theme-text-color-inactive);
   border-radius: 3px;
   border-style: solid;
   border-width: 1px;
   text-align: center;
   vertical-align: middle;
 }
 
 .tag-line[selected] .editor.text .whitespace::before {
--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -240,17 +240,17 @@ html, body, #app, #memory-tool {
 .snapshot-list-item > .snapshot-title > input[type=checkbox] {
   margin: 0;
   margin-inline-end: 5px;
 }
 
 .snapshot-list-item > .snapshot-state,
 .snapshot-list-item > .snapshot-totals {
   font-size: 90%;
-  color: var(--theme-body-color-alt);
+  color: var(--theme-text-color-alt);
 }
 
 .snapshot-list-item.selected > .snapshot-state,
 .snapshot-list-item.selected > .snapshot-totals {
   /* Text inside a selected item should not be custom colored. */
   color: inherit !important;
 }
 
@@ -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-body-color-alt);
+  color: var(--theme-text-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;
 }
@@ -615,17 +615,17 @@ html, body, #app, #memory-tool {
  */
 
 svg {
   --arrow-color: var(--theme-splitter-color);
   --text-color: var(--theme-body-color);
 }
 
 .theme-dark svg {
-  --arrow-color: var(--theme-body-color-alt);
+  --arrow-color: var(--theme-text-color-alt);
 }
 
 svg #arrowhead {
   /* !important is needed to override inline style */
   fill: var(--arrow-color) !important;
 }
 
 .edgePath path {
--- a/devtools/client/themes/performance.css
+++ b/devtools/client/themes/performance.css
@@ -197,23 +197,22 @@
   text-decoration: underline;
   cursor: pointer;
   font-size: 90%;
   padding:0;
 }
 
 .recording-list-item-duration,
 .recording-list-item-save {
-  color: var(--theme-body-color-alt);
+  color: var(--theme-text-color-alt);
 }
 
 .recording-list-item.selected .recording-list-item-duration,
 .recording-list-item.selected .recording-list-item-save {
-  color: var(--theme-body-color-alt);
-  color: var(--theme-selection-color);
+  color: inherit;
 }
 
 #recordings-list .selected label {
   /* Text inside a selected item should not be custom colored. */
   color: inherit !important;
 }
 
 /* Recording notices */
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -112,17 +112,17 @@
 #ruleview-class-panel .classes label span {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
 #ruleview-class-panel .no-classes {
   flex: 1;
-  color: var(--theme-body-color-inactive);
+  color: var(--theme-text-color-inactive);
   margin: 0;
   text-align: center;
 }
 
 /* Rule View Container */
 
 #ruleview-container {
   -moz-user-select: text;
@@ -413,17 +413,17 @@
   position: relative;
 }
 
 .ruleview-overridden-item::before,
 .ruleview-overridden-item::after {
   content: "";
   position: absolute;
   display: block;
-  border: 0px solid var(--theme-body-color-alt);
+  border: 0px solid var(--theme-text-color-alt);
 }
 
 .ruleview-overridden-item::before {
   top: 0px;
   left: -15px;
   height: 0.8em;
   width: 10px;
   border-left-width: 0.5px;
@@ -536,17 +536,17 @@
   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 solid var(--theme-body-color-alt);
+  text-decoration: line-through solid var(--theme-text-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,
--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -570,17 +570,17 @@
 .event-tooltip-attributes-box {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   height: 14px;
   border-radius: 3px;
   padding: 2px;
   margin-inline-start: 5px;
-  background-color: var(--theme-body-color-alt);
+  background-color: var(--theme-text-color-alt);
   color: var(--theme-body-background);
 }
 
 .event-tooltip-attributes {
   margin: 0;
   font-size: 9px;
   padding-top: 2px;
 }
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -50,18 +50,18 @@
   --theme-icon-color: rgba(12, 12, 13, 0.8);
   --theme-icon-dimmed-color: rgba(135, 135, 137, 0.9);
   --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-text-color-alt: var(--grey-50);
+  --theme-text-color-inactive: var(--grey-40);
   --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;
 
@@ -141,18 +141,18 @@
   --theme-icon-color: rgba(249, 249, 250, 0.7);
   --theme-icon-dimmed-color: rgba(147, 147, 149, 0.9);
   --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-text-color-alt: var(--grey-45);
+  --theme-text-color-inactive: var(--grey-50);
   --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;
 
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -365,17 +365,17 @@ a {
 
 .message .learn-more-link {
   -moz-user-select: none;
   color: var(--theme-highlight-blue);
   margin: 0 1ch;
 }
 
 .message.network .xhr {
-  background-color: var(--theme-body-color-alt);
+  background-color: var(--theme-text-color-alt);
   color: var(--theme-body-background);
   border-radius: 3px;
   font-weight: bold;
   font-size: 10px;
   padding: 1px 2px;
   line-height: 10px;
   margin-inline-start: 0;
   margin-inline-end: 1ex;
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -108,17 +108,17 @@
   transform: translateZ(1px);
 }
 
 .variables-view-empty-notice {
   padding: 2px;
 }
 
 .variables-view-empty-notice {
-  color: var(--theme-body-color-alt);
+  color: var(--theme-text-color-alt);
 }
 
 .variables-view-scope:focus > .title,
 .variable-or-property:focus > .title {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
@@ -522,17 +522,17 @@
 }
 
 .line-graph-widget-tooltip > [text=value] {
   margin-inline-start: 3px;
 }
 
 .line-graph-widget-tooltip > [text=metric] {
   margin-inline-start: 1px;
-  color: var(--theme-body-color-alt);
+  color: var(--theme-text-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);