Bug 1288375 - ruleview: fix invisible icons in filter widget tooltip;r=pbro
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 21 Jul 2016 16:26:36 +0200
changeset 348409 c2b31aa815f477edb219395e2a0a70e71ed04043
parent 348408 ff29f08b72c466b65dea5efa6f82f99add8f17ef
child 348410 f83128e2d4bb8fc3f70dd99a644e94b19e20d4fc
push id1230
push userjlund@mozilla.com
push dateMon, 31 Oct 2016 18:13:35 +0000
treeherdermozilla-release@5e06e3766db2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1288375
milestone50.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 1288375 - ruleview: fix invisible icons in filter widget tooltip;r=pbro Scoped stylesheets cannot make reference to an element outside of the scope in any part of a selector. This means a selector such as ".theme-light .scoped-element" can not work in a scoped stylesheet. Theme specific rules have been removed from the filter&bezier tooltip css. Instead CSS variables defined for each theme are used in the scoped stylesheets. MozReview-Commit-ID: 7apGbPc0CYy
devtools/client/shared/widgets/cubic-bezier.css
devtools/client/shared/widgets/filter-widget.css
devtools/client/themes/tooltips.css
--- a/devtools/client/shared/widgets/cubic-bezier.css
+++ b/devtools/client/shared/widgets/cubic-bezier.css
@@ -26,61 +26,62 @@
 
 .coordinate-plane {
   width: 150px;
   height: 370px;
   margin: 0 auto;
   position: relative;
 }
 
-.theme-dark .coordinate-plane:before,
-.theme-dark .coordinate-plane:after {
-  border-color: #eee;
-}
-
 .control-point {
   position: absolute;
   z-index: 1;
   height: 10px;
   width: 10px;
   border: 0;
   background: #666;
   display: block;
   margin: -5px 0 0 -5px;
   outline: none;
   border-radius: 5px;
   padding: 0;
   cursor: pointer;
 }
 
 .display-wrap {
-  background: repeating-linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 15px) no-repeat, repeating-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 15px) no-repeat;
+  background:
+  repeating-linear-gradient(0deg,
+    transparent,
+    var(--bezier-grid-color) 0,
+    var(--bezier-grid-color) 1px,
+    transparent 1px,
+    transparent 15px) no-repeat,
+  repeating-linear-gradient(90deg,
+    transparent,
+    var(--bezier-grid-color) 0,
+    var(--bezier-grid-color) 1px,
+    transparent 1px,
+    transparent 15px) no-repeat;
   background-size: 100% 100%, 100% 100%;
   background-position: -2px 5px, -2px 5px;
 
   -moz-user-select: none;
 }
 
-.theme-dark .display-wrap {
-  background: repeating-linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 15px) no-repeat, repeating-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 15px) no-repeat;
-  background-size: 100% 100%, 100% 100%;
-  background-position: -2px 5px, -2px 5px;
-
-  -moz-user-select: none;
-}
 canvas.curve {
-  background: linear-gradient(-45deg, transparent 49.7%, rgba(0,0,0,.2) 49.7%, rgba(0,0,0,.2) 50.3%, transparent 50.3%) center no-repeat;
+  background:
+    linear-gradient(-45deg,
+      transparent 49.7%,
+      var(--bezier-diagonal-color) 49.7%,
+      var(--bezier-diagonal-color) 50.3%,
+      transparent 50.3%) center no-repeat;
   background-size: 100% 100%;
   background-position: 0 0;
 }
 
-.theme-dark canvas.curve {
-  background: linear-gradient(-45deg, transparent 49.7%, #eee 49.7%, #eee 50.3%, transparent 50.3%) center no-repeat;
-}
-
 /* Timing Function Preview Widget */
 
 .timing-function-preview {
   position: absolute;
   bottom: 20px;
   right: 45px;
   width: 150px;
 }
@@ -180,26 +181,22 @@ canvas.curve {
   cursor: pointer;
   width: 33.33%;
   margin: 5px 0px;
   text-align: center;
 }
 
 .preset canvas {
   display: block;
-  border: 1px solid #ccc;
+  border: 1px solid var(--theme-splitter-color);
   border-radius: 3px;
   background-color: var(--theme-body-background);
   margin: 0 auto;
 }
 
-.theme-dark .preset canvas {
-  border-color: #444e58;
-}
-
 .preset p {
   font-size: 80%;
   margin: 2px auto 0px auto;
   color: var(--theme-body-color-alt);
   text-transform: capitalize;
   text-overflow: ellipsis;
   overflow: hidden;
 }
@@ -207,13 +204,13 @@ canvas.curve {
 .active-preset p, .active-preset:hover p {
   color: var(--theme-body-color);
 }
 
 .preset:hover canvas {
   border-color: var(--theme-selection-background);
 }
 
-.active-preset canvas, .active-preset:hover canvas,
-.theme-dark .active-preset canvas, .theme-dark .preset:hover canvas {
+.active-preset canvas,
+.active-preset:hover canvas {
   background-color: var(--theme-selection-background-semitransparent);
   border-color: var(--theme-selection-background);
 }
--- a/devtools/client/shared/widgets/filter-widget.css
+++ b/devtools/client/shared/widgets/filter-widget.css
@@ -135,22 +135,16 @@
 }
 
 /* Fix the size of inputs */
 /* Especially needed on Linux where input are bigger */
 input {
   width: 8em;
 }
 
-.theme-light .add,
-.theme-light .remove-button,
-.theme-light #toggle-presets {
-  filter: invert(1);
-}
-
 .preset {
   display: flex;
   margin-bottom: 10px;
   cursor: pointer;
   padding: 3px 5px;
 
   flex-direction: row;
   flex-wrap: wrap;
@@ -171,20 +165,16 @@ input {
 .preset:hover {
   background: var(--theme-selection-background);
 }
 
 .preset:hover label, .preset:hover span {
   color: var(--theme-selection-color);
 }
 
-.theme-light .preset:hover .remove-button {
-  filter: invert(0);
-}
-
 .preset .remove-button {
   order: 2;
 }
 
 .preset span {
   flex: 2 100%;
   white-space: nowrap;
   overflow: hidden;
@@ -235,11 +225,17 @@ input {
 .add {
   background: url(chrome://devtools/skin/images/add.svg);
 }
 
 #toggle-presets {
   background: url(chrome://devtools/skin/images/pseudo-class.svg);
 }
 
+.add,
+.remove-button,
+#toggle-presets {
+  filter: var(--icon-filter);
+}
+
 .show-presets #toggle-presets {
   filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
 }
--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -1,13 +1,25 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* 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/. */
 
+/* Tooltip specific theme variables */
+
+.theme-dark {
+  --bezier-diagonal-color: #eee;
+  --bezier-grid-color: rgba(0, 0, 0, 0.2);
+}
+
+.theme-light {
+  --bezier-diagonal-color: rgba(0, 0, 0, 0.2);
+  --bezier-grid-color: rgba(0, 0, 0, 0.05);
+}
+
 /* Tooltip widget (see devtools/client/shared/widgets/Tooltip.js) */
 
 .devtools-tooltip .panel-arrowcontent {
   padding: 4px;
 }
 
 .devtools-tooltip .panel-arrowcontainer {
   /* Reseting the transition used when panels are shown */