Backed out changeset fc3bbe02ce7d (bug 1348471) for test failures in browser_misused_characters_in_strings.js

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

@@ -8,7 +8,6 @@ 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";
@@ -16,10 +15,6 @@ 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;
@@ -45,9 +40,8 @@ module.exports = createClass({
 
   getInitialState() {
     return {
-      height: 0,
       selectedGrid: null,
-      showOutline: true,
+      height: 0,
       width: 0,
     };
   },
@@ -62,7 +56,7 @@ module.exports = createClass({
                             ? this.getTotalWidthAndHeight(selectedGrid)
                             : { width: 0, height: 0 };
 
-    this.setState({ height, width, selectedGrid, showOutline: true });
+    this.setState({ height, width, selectedGrid });
   },
 
   /**
@@ -141,7 +135,6 @@ module.exports = createClass({
     if (this.highlightTimeout) {
       clearTimeout(this.highlightTimeout);
     }
-
     this.highlightTimeout = setTimeout(() => {
       this.doHighlightCell(e);
       this.highlightTimeout = null;
@@ -171,25 +164,6 @@ 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.
     *
@@ -218,14 +192,6 @@ 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,
@@ -454,17 +420,13 @@ module.exports = createClass({
       lineNumber, type);
   },
 
-  renderOutline() {
-    const {
-      height,
-      selectedGrid,
-      showOutline,
-      width,
-    } = this.state;
+  render() {
+    const { selectedGrid, height, width } = this.state;
 
-    return showOutline ?
+    return selectedGrid ?
       dom.svg(
         {
+          className: "grid-outline",
           width: "100%",
           height: this.getHeight(),
           viewBox: `${TRANSLATE_X} ${TRANSLATE_Y} ${width} ${height}`,
@@ -473,20 +435,6 @@ 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,7 +216,6 @@ 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,11 +7,6 @@
 # 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

@@ -1,9 +0,0 @@
-<!-- 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,6 +58,15 @@
   margin: 5px;
 }
 
+/**
+ * Grid Outline
+ */
+
+.grid-outline {
+  margin-top: 10px;
+  overflow: visible;
+}
+
 /**
  * Grid Content
  */
@@ -66,7 +75,7 @@
   display: flex;
   flex-wrap: wrap;
   flex: 1;
-  margin: 5px 0;
+  margin-top: 10px;
 }
 
 .grid-container:first-child {
@@ -77,12 +86,8 @@
  * Grid Outline
  */
 
-.grid-outline {
-  margin: 5px 0;
-}
-
-.grid-outline svg {
-  overflow: visible;
+#grid-outline {
+  margin: 5px auto;
 }
 
 .grid-outline-border {
@@ -109,20 +114,6 @@
   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
  */