Backed out changeset 508179b0dad5 (bug 1355747) for linting failure at devtools/client/inspector/layout/layout.js:7: 'Services' is assigned a value but never used. r=backout

--HG--
extra : amend_source : 5bb79fd7f5c4d55500536d65ef46d5b60afc9a6c

devtools/client/inspector/fonts/fonts.js

@@ -54,7 +54,7 @@ FontInspector.prototype = {
       id: "fontinspector",
       key: "fontinspector",
       store: this.store,
-      title: INSPECTOR_L10N.getStr("inspector.sidebar.fontInspectorTitle"),
+      title: INSPECTOR_L10N.getStr("inspector.sidebar.fontInspectorTitle")
     }, app);
 
     // Expose the provider to let inspector.js use it in setupSidebar.

devtools/client/inspector/grids/grid-inspector.js

@@ -27,6 +27,8 @@ const CSS_GRID_COUNT_HISTOGRAM_ID = "DEVTOOLS_NUMBER_OF_CSS_GRIDS_IN_A_PAGE";
 const SHOW_GRID_AREAS = "devtools.gridinspector.showGridAreas";
 const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers";
 const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines";
+// @remove after release 56 (See Bug 1355747)
+const PROMOTE_COUNT_PREF = "devtools.promote.layoutview";
 
 // Default grid colors.
 const GRID_COLORS = [
@@ -567,6 +569,9 @@ GridInspector.prototype = {
       return;
     }
 
+    // @remove after release 56 (See Bug 1355747)
+    Services.prefs.setIntPref(PROMOTE_COUNT_PREF, 0);
+
     this.inspector.reflowTracker.trackReflows(this, this.onReflow);
     this.updateGridPanel();
   },

devtools/client/inspector/grids/test/head.js

@@ -16,8 +16,10 @@ Services.scriptloader.loadSubScript(
   "chrome://mochitests/content/browser/devtools/client/framework/test/shared-redux-head.js",
   this);
 
+Services.prefs.setBoolPref("devtools.promote.layoutview.showPromoteBar", false);
 Services.prefs.setIntPref("devtools.toolbox.footer.height", 350);
 registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.promote.layoutview.showPromoteBar");
   Services.prefs.clearUserPref("devtools.toolbox.footer.height");
 });
 

devtools/client/inspector/layout/components/App.js

@@ -18,6 +18,7 @@ const BoxModelTypes = require("devtools/client/inspector/boxmodel/types");
 const GridTypes = require("devtools/client/inspector/grids/types");
 
 const Accordion = createFactory(require("./Accordion"));
+const LayoutPromoteBar = createFactory(require("./LayoutPromoteBar"));
 
 const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
 const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
@@ -40,6 +41,7 @@ const App = createClass({
     setSelectedNode: PropTypes.func.isRequired,
     showBoxModelProperties: PropTypes.bool.isRequired,
     onHideBoxModelHighlighter: PropTypes.func.isRequired,
+    onPromoteLearnMoreClick: PropTypes.func.isRequired,
     onSetGridOverlayColor: PropTypes.func.isRequired,
     onShowBoxModelEditor: PropTypes.func.isRequired,
     onShowBoxModelHighlighter: PropTypes.func.isRequired,
@@ -52,10 +54,15 @@ const App = createClass({
   mixins: [ addons.PureRenderMixin ],
 
   render() {
+    let { onPromoteLearnMoreClick } = this.props;
+
     return dom.div(
       {
         id: "layout-container",
       },
+      LayoutPromoteBar({
+        onPromoteLearnMoreClick,
+      }),
       Accordion({
         items: [
           {

devtools/client/inspector/layout/components/LayoutPromoteBar.js

@@ -0,0 +1,76 @@
+/* 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/. */
+
+"use strict";
+
+/**
+ * !!!!                      TO BE REMOVED AFTER RELEASE 56                          !!!!
+ * !!!!                                                                              !!!!
+ * !!!! This file is a temporary panel that should only be used for release 56 to    !!!!
+ * !!!! promote the new layout panel. After release 56, it should be removed.        !!!!
+ * !!!! See bug 1355747.                                                             !!!!
+ */
+
+const Services = require("Services");
+const { addons, createClass, DOM: dom, PropTypes } =
+  require("devtools/client/shared/vendor/react");
+
+const { LocalizationHelper } = require("devtools/shared/l10n");
+
+const LAYOUT_STRINGS_URI = "devtools/client/locales/layout.properties";
+const LAYOUT_L10N = new LocalizationHelper(LAYOUT_STRINGS_URI);
+
+const SHOW_PROMOTE_BAR_PREF = "devtools.promote.layoutview.showPromoteBar";
+
+module.exports = createClass({
+
+  displayName: "LayoutPromoteBar",
+
+  propTypes: {
+    onPromoteLearnMoreClick: PropTypes.func.isRequired,
+  },
+
+  mixins: [ addons.PureRenderMixin ],
+
+  getInitialState() {
+    return {
+      showPromoteBar: Services.prefs.getBoolPref(SHOW_PROMOTE_BAR_PREF)
+    };
+  },
+
+  onPromoteCloseButtonClick() {
+    Services.prefs.setBoolPref(SHOW_PROMOTE_BAR_PREF, false);
+    this.setState({ showPromoteBar: false });
+  },
+
+  render() {
+    let { onPromoteLearnMoreClick } = this.props;
+    let { showPromoteBar } = this.state;
+
+    return showPromoteBar ?
+      dom.div({ className: "layout-promote-bar" },
+        dom.span({ className: "layout-promote-info-icon" }),
+        dom.div({ className: "layout-promote-message" },
+          LAYOUT_L10N.getStr("layout.promoteMessage"),
+          dom.a(
+            {
+              className: "layout-promote-learn-more-link theme-link",
+              href: "#",
+              onClick: onPromoteLearnMoreClick,
+            },
+            LAYOUT_L10N.getStr("layout.learnMore")
+          )
+        ),
+        dom.button(
+          {
+            className: "layout-promote-close-button devtools-button",
+            onClick: this.onPromoteCloseButtonClick,
+          }
+        )
+      )
+      :
+      null;
+  },
+
+});

devtools/client/inspector/layout/components/moz.build

@@ -8,4 +8,5 @@ DevToolsModules(
     'Accordion.css',
     'Accordion.js',
     'App.js',
+    'LayoutPromoteBar.js',
 )

devtools/client/inspector/layout/layout.js

@@ -15,6 +15,12 @@ const { LocalizationHelper } = require("devtools/shared/l10n");
 const INSPECTOR_L10N =
   new LocalizationHelper("devtools/client/locales/inspector.properties");
 
+// @remove after release 56 (See Bug 1355747)
+const PROMOTE_COUNT_PREF = "devtools.promote.layoutview";
+
+// @remove after release 56 (See Bug 1355747)
+const GRID_LINK = "https://www.mozilla.org/en-US/developer/css-grid/?utm_source=gridtooltip&utm_medium=devtools&utm_campaign=cssgrid_layout";
+
 loader.lazyRequireGetter(this, "GridInspector", "devtools/client/inspector/grids/grid-inspector");
 
 function LayoutView(inspector, window) {
@@ -22,6 +28,8 @@ function LayoutView(inspector, window) {
   this.inspector = inspector;
   this.store = inspector.store;
 
+  this.onPromoteLearnMoreClick = this.onPromoteLearnMoreClick.bind(this);
+
   this.init();
 }
 
@@ -57,6 +65,10 @@ LayoutView.prototype = {
       onToggleShowInfiniteLines,
     } = this.gridInspector.getComponentProps();
 
+    let {
+      onPromoteLearnMoreClick,
+    } = this;
+
     let app = App({
       getSwatchColorPickerTooltip,
       setSelectedNode,
@@ -66,6 +78,7 @@ LayoutView.prototype = {
        */
       showBoxModelProperties: true,
       onHideBoxModelHighlighter,
+      onPromoteLearnMoreClick,
       onSetGridOverlayColor,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
@@ -85,6 +98,10 @@ LayoutView.prototype = {
       key: "layoutview",
       store: this.store,
       title: INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle2"),
+      // @remove after release 56 (See Bug 1355747)
+      badge: Services.prefs.getIntPref(PROMOTE_COUNT_PREF) > 0 ?
+        INSPECTOR_L10N.getStr("inspector.sidebar.newBadge") : null,
+      showBadge: () => Services.prefs.getIntPref(PROMOTE_COUNT_PREF) > 0,
     }, app);
 
     // Expose the provider to let inspector.js use it in setupSidebar.
@@ -102,6 +119,11 @@ LayoutView.prototype = {
     this.store = null;
   },
 
+  onPromoteLearnMoreClick() {
+    let browserWin = this.inspector.target.tab.ownerDocument.defaultView;
+    browserWin.openUILinkIn(GRID_LINK, "current");
+  }
+
 };
 
 module.exports = LayoutView;

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

@@ -44,3 +44,11 @@ layout.overlayGrid=Overlay Grid
 # LOCALIZATION NOTE (layout.rowColumnPositions): The row and column position of a grid
 # cell shown in the grid cell infobar when hovering over the CSS grid outline.
 layout.rowColumnPositions=Row %S / Column %S
+
+# LOCALIZATION NOTE (layout.promoteMessage): Text displayed in the promote bar for the
+# layout panel.
+layout.promoteMessage=Explore CSS Grids with the latest CSS Grid Inspector.
+
+# LOCALIZATION NOTE (layout.learnMore): Text for the link displayed in the promote bar
+# for the layout panel.
+layout.learnMore=Learn more…

devtools/client/preferences/devtools.js

@@ -61,6 +61,13 @@ pref("devtools.inspector.colorWidget.enabled", false);
 // Enable the CSS shapes highlighter
 pref("devtools.inspector.shapesHighlighter.enabled", true);
 
+// Counter to promote the inspector layout view.
+// @remove after release 56 (See Bug 1355747)
+pref("devtools.promote.layoutview", 1);
+// Whether or not to show the promote bar in the layout view
+// @remove after release 56 (See Bug 1355747)
+pref("devtools.promote.layoutview.showPromoteBar", true);
+
 // Grid highlighter preferences
 pref("devtools.gridinspector.gridOutlineMaxColumns", 50);
 pref("devtools.gridinspector.gridOutlineMaxRows", 50);

devtools/client/themes/layout.css

@@ -48,6 +48,56 @@
   align-items: center;
 }
 
+/**
+ * Layout Promote Bar
+ */
+
+.layout-promote-bar {
+  align-items: center;
+  background-color: var(--theme-toolbar-background);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  display: flex;
+  font-size: 11px;
+  padding: 5px;
+  transition: all 0.25s ease;
+  width: 100%;
+  -moz-user-select: none;
+}
+
+.layout-promote-bar:hover {
+  background-color: var(--theme-toolbar-hover);
+}
+
+.layout-promote-info-icon {
+  display: inline-block;
+  background-size: 16px;
+  width: 16px;
+  height: 16px;
+  margin: 6px;
+  background-image: url("chrome://browser/skin/info.svg");
+}
+
+.layout-promote-message {
+  flex: 1;
+}
+
+.layout-promote-learn-more-link {
+  margin-inline-start: 5px;
+}
+
+.layout-promote-learn-more-link:hover {
+  text-decoration: underline;
+}
+
+.layout-promote-close-button {
+  margin: 6px;
+}
+
+.layout-promote-close-button::before {
+  background-image: url("chrome://devtools/skin/images/close.svg");
+  margin: -6px 0 0 -6px;
+}
+
 /**
  * Grid Container
  */