Bug 1349335 - Use the grid color for the grid cell and area fills. r=gl
authorMicah Tigley <tigleym@gmail.com>
Fri, 02 Jun 2017 22:49:26 -0600
changeset 412861 337dfcb8c30a2088899608c4437d9e065ce910b5
parent 412860 4ee2e37e945275cffed70a1c10e374e5bb3aea3c
child 412862 5176b60155271526be427f6e3ef90e3f2ea8bf2f
push id1490
push usermtabara@mozilla.com
push dateMon, 31 Jul 2017 14:08:16 +0000
treeherdermozilla-release@70e32e6bf15e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1349335
milestone55.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 1349335 - Use the grid color for the grid cell and area fills. r=gl MozReview-Commit-ID: 4etwnse2jZu
devtools/server/actors/highlighters.css
devtools/server/actors/highlighters/css-grid.js
--- a/devtools/server/actors/highlighters.css
+++ b/devtools/server/actors/highlighters.css
@@ -227,17 +227,17 @@
 }
 
 :-moz-native-anonymous .css-grid-regions {
   opacity: 0.6;
 }
 
 :-moz-native-anonymous .css-grid-areas,
 :-moz-native-anonymous .css-grid-cells {
-  fill: #CEC0ED;
+  opacity: 0.5;
   stroke: none;
 }
 
 :-moz-native-anonymous .css-grid-area-infobar-name,
 :-moz-native-anonymous .css-grid-cell-infobar-position,
 :-moz-native-anonymous .css-grid-line-infobar-number {
   color: hsl(285, 100%, 75%);
 }
--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -741,21 +741,28 @@ CssGridHighlighter.prototype = extend(Au
    * Update the highlighter on the current highlighted node (the one that was
    * passed as an argument to show(node)).
    * Should be called whenever node's geometry or grid changes.
    */
   _update() {
     setIgnoreLayoutChanges(true);
 
     let root = this.getElement("root");
+    let cells = this.getElement("cells");
+    let areas = this.getElement("areas");
+
     // Hide the root element and force the reflow in order to get the proper window's
     // dimensions without increasing them.
     root.setAttribute("style", "display: none");
     this.win.document.documentElement.offsetWidth;
 
+    // Set the grid cells and areas fill to the current grid colour.
+    cells.setAttribute("style", `fill: ${this.color}`);
+    areas.setAttribute("style", `fill: ${this.color}`);
+
     let { width, height } = this._winDimensions;
 
     // Updates the <canvas> element's position and size.
     // It also clear the <canvas>'s drawing context.
     this.updateCanvasElement();
 
     // Clear the grid area highlights.
     this.clearGridAreas();