Bug 1348471 - Display a message when the grid outline cannot effectively be fitted inside the layout panel. r=gl

MozReview-Commit-ID: 57cikdLW3IV

devtools/client/inspector/grids/components/GridOutline.js

@@ -8,6 +8,7 @@ const { addons, createClass, DOM: dom, PropTypes } =
   require("devtools/client/shared/vendor/react");
 
 const Types = require("../types");
+const { getStr } = require("../utils/l10n");
 
 const COLUMNS = "cols";
 const ROWS = "rows";
@@ -15,6 +16,10 @@ const ROWS = "rows";
 // The delay prior to executing the grid cell highlighting.
 const GRID_HIGHLIGHTING_DEBOUNCE = 50;
 
+// Minimum height/width a grid cell can be
+const MIN_CELL_HEIGHT = 5;
+const MIN_CELL_WIDTH = 5;
+
 // Move SVG grid to the right 100 units, so that it is not flushed against the edge of
 // layout border
 const TRANSLATE_X = 0;
@@ -40,8 +45,9 @@ module.exports = createClass({
 
   getInitialState() {
     return {
-      selectedGrid: null,
       height: 0,
+      selectedGrid: null,
+      showOutline: true,
       width: 0,
     };
   },
@@ -56,7 +62,7 @@ module.exports = createClass({
                             ? this.getTotalWidthAndHeight(selectedGrid)
                             : { width: 0, height: 0 };
 
-    this.setState({ height, width, selectedGrid });
+    this.setState({ height, width, selectedGrid, showOutline: true });
   },
 
   /**
@@ -135,6 +141,7 @@ module.exports = createClass({
     if (this.highlightTimeout) {
       clearTimeout(this.highlightTimeout);
     }
+
     this.highlightTimeout = setTimeout(() => {
       this.doHighlightCell(e);
       this.highlightTimeout = null;
@@ -164,6 +171,25 @@ module.exports = createClass({
     }
   },
 
+  /**
+    * Displays a message text "Cannot show outline for this grid".
+    *
+    */
+  renderCannotShowOutlineText() {
+    return dom.div(
+      {
+        className: "grid-outline-text"
+      },
+      dom.span(
+        {
+          className: "grid-outline-text-icon",
+          title: getStr("layout.cannotShowGridOutline.title")
+        }
+      ),
+      getStr("layout.cannotShowGridOutline")
+    );
+  },
+
   /**
     * Renders the grid outline for the given grid container object.
     *
@@ -192,6 +218,14 @@ module.exports = createClass({
       for (let columnNumber = 1; columnNumber <= numberOfColumns; columnNumber++) {
         width = GRID_CELL_SCALE_FACTOR * (cols.tracks[columnNumber - 1].breadth / 100);
 
+        // If a grid cell is less than the minimum pixels in width or height,
+        // do not render the outline at all.
+        if (width < MIN_CELL_WIDTH || height < MIN_CELL_HEIGHT) {
+          this.setState({ showOutline: false });
+
+          return [];
+        }
+
         const gridAreaName = this.getGridAreaName(columnNumber, rowNumber, areas);
         const gridCell = this.renderGridCell(id, gridFragmentIndex, x, y,
                                              rowNumber, columnNumber, color, gridAreaName,
@@ -420,13 +454,17 @@ module.exports = createClass({
       lineNumber, type);
   },
 
-  render() {
-    const { selectedGrid, height, width } = this.state;
+  renderOutline() {
+    const {
+      height,
+      selectedGrid,
+      showOutline,
+      width,
+    } = this.state;
 
-    return selectedGrid ?
+    return showOutline ?
       dom.svg(
         {
-          className: "grid-outline",
           width: "100%",
           height: this.getHeight(),
           viewBox: `${TRANSLATE_X} ${TRANSLATE_Y} ${width} ${height}`,
@@ -435,6 +473,20 @@ module.exports = createClass({
         this.renderGridLines(selectedGrid)
       )
       :
+      this.renderCannotShowOutlineText();
+  },
+
+  render() {
+    const { selectedGrid } = this.state;
+
+    return selectedGrid ?
+      dom.div(
+        {
+          className: "grid-outline",
+        },
+        this.renderOutline()
+      )
+      :
       null;
   },
 

devtools/client/jar.mn

@@ -216,6 +216,7 @@ devtools.jar:
     skin/images/gcli_sec_good.svg (themes/images/gcli_sec_good.svg)
     skin/images/gcli_sec_moderate.svg (themes/images/gcli_sec_moderate.svg)
     skin/images/globe.svg (themes/images/globe.svg)
+    skin/images/sad-face.svg (themes/images/sad-face.svg)
     skin/images/tool-options.svg (themes/images/tool-options.svg)
     skin/images/tool-webconsole.svg (themes/images/tool-webconsole.svg)
     skin/images/tool-canvas.svg (themes/images/tool-canvas.svg)

devtools/client/locales/en-US/layout.properties

@@ -7,6 +7,11 @@
 # The Layout Inspector may need to be enabled in about:config by setting
 # devtools.layoutview.enabled to true.
 
+# LOCALIZATION NOTE (layout.cannotShowGridOutline, layout.cannotSHowGridOutline.title):
+# In the case where the grid outline cannot be effectively displayed.
+layout.cannotShowGridOutline=Cannot show outline for this grid
+layout.cannotShowGridOutline.title=The selected grid’s outline cannot effectively fit inside the layout panel for it to be usable.
+
 # LOCALIZATION NOTE (layout.displayNumbersOnLines): Label of the display numbers on lines
 # setting option in the CSS Grid pane.
 layout.displayNumbersOnLines=Display numbers on lines

devtools/client/themes/images/sad-face.svg

@@ -0,0 +1,9 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="#D92215">
+  <path d="M8 14.5c-3.6 0-6.5-2.9-6.5-6.5S4.4 1.5 8 1.5s6.5 2.9 6.5 6.5-2.9 6.5-6.5 6.5zm0-12C5 2.5 2.5 5 2.5 8S5 13.5 8 13.5 13.5 11 13.5 8 11 2.5 8 2.5z"/>
+  <circle cx="5" cy="6" r="1" transform="translate(1 1)"/>
+  <circle cx="9" cy="6" r="1" transform="translate(1 1)"/>
+  <path d="M5.5 11c-.1 0-.2 0-.3-.1-.2-.1-.3-.4-.1-.7C6 9 7 8.5 8.1 8.5c1.7.1 2.8 1.7 2.8 1.8.2.2.1.5-.1.7-.2.1-.6 0-.7-.2 0 0-.9-1.3-2-1.3-.7 0-1.4.4-2.1 1.3-.2.2-.4.2-.5.2z"/>
+</svg>

devtools/client/themes/layout.css

@@ -58,15 +58,6 @@
   margin: 5px;
 }
 
-/**
- * Grid Outline
- */
-
-.grid-outline {
-  margin-top: 10px;
-  overflow: visible;
-}
-
 /**
  * Grid Content
  */
@@ -75,7 +66,7 @@
   display: flex;
   flex-wrap: wrap;
   flex: 1;
-  margin-top: 10px;
+  margin: 5px 0;
 }
 
 .grid-container:first-child {
@@ -86,8 +77,12 @@
  * Grid Outline
  */
 
-#grid-outline {
-  margin: 5px auto;
+.grid-outline {
+  margin: 5px 0;
+}
+
+.grid-outline svg {
+  overflow: visible;
 }
 
 .grid-outline-border {
@@ -114,6 +109,20 @@
   stroke-width: 10;
 }
 
+.grid-outline-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--theme-graphs-full-red);
+}
+
+.grid-outline-text-icon {
+  background: url("chrome://devtools/skin/images/sad-face.svg");
+  margin-inline-end: 5px;
+  width: 16px;
+  height: 16px;
+}
+
 /**
  * Container when no grids are present
  */