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
authorSebastian Hengst <archaeopteryx@coole-files.de>
Fri, 13 Oct 2017 17:18:00 +0200
changeset 423876 c0c297947982b5766e3e3c762f625717bfd2412b
parent 423875 41e3ae0e04b1bcf94520145618ecc279195d8900
child 423877 b6f55f929971562390d4267eea332aae7cbfb08b
push idunknown
push userunknown
push dateunknown
reviewersbackout
bugs1355747
milestone58.0a1
backs out508179b0dad5311979a135b9a03721da53ca868b
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
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
devtools/client/inspector/fonts/fonts.js
devtools/client/inspector/grids/grid-inspector.js
devtools/client/inspector/grids/test/head.js
devtools/client/inspector/layout/components/App.js
devtools/client/inspector/layout/components/LayoutPromoteBar.js
devtools/client/inspector/layout/components/moz.build
devtools/client/inspector/layout/layout.js
devtools/client/locales/en-US/layout.properties
devtools/client/preferences/devtools.js
devtools/client/themes/layout.css
--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -49,17 +49,17 @@ FontInspector.prototype = {
       onPreviewFonts: this.onPreviewFonts,
       onShowAllFont: this.onShowAllFont,
     });
 
     let provider = createElement(Provider, {
       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.
     this.provider = provider;
 
     this.inspector.selection.on("new-node-front", this.onNewNode);
     this.inspector.sidebar.on("fontinspector-selected", this.onNewNode);
 
--- a/devtools/client/inspector/grids/grid-inspector.js
+++ b/devtools/client/inspector/grids/grid-inspector.js
@@ -22,16 +22,18 @@ const {
   updateShowInfiniteLines,
 } = require("./actions/highlighter-settings");
 
 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 = [
   "#9400FF",
   "#DF00A9",
   "#0A84FF",
   "#12BC00",
   "#EA8000",
@@ -562,16 +564,19 @@ GridInspector.prototype = {
    * Finally, refresh the layout view if it is visible.
    */
   onSidebarSelect() {
     if (!this.isPanelVisible()) {
       this.inspector.reflowTracker.untrackReflows(this, this.onReflow);
       return;
     }
 
+    // @remove after release 56 (See Bug 1355747)
+    Services.prefs.setIntPref(PROMOTE_COUNT_PREF, 0);
+
     this.inspector.reflowTracker.trackReflows(this, this.onReflow);
     this.updateGridPanel();
   },
 
   /**
    * Handler for a change in the input checkboxes in the GridList component.
    * Toggles on/off the grid highlighter for the provided grid container element.
    *
--- a/devtools/client/inspector/grids/test/head.js
+++ b/devtools/client/inspector/grids/test/head.js
@@ -11,18 +11,20 @@ Services.scriptloader.loadSubScript(
   "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
   this);
 
 // Load the shared Redux helpers into this compartment.
 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");
 });
 
 const HIGHLIGHTER_TYPE = "CssGridHighlighter";
 
 /**
  * Simulate a color change in a given color picker tooltip.
  *
--- a/devtools/client/inspector/layout/components/App.js
+++ b/devtools/client/inspector/layout/components/App.js
@@ -13,16 +13,17 @@ const { LocalizationHelper } = require("
 
 const BoxModel = createFactory(require("devtools/client/inspector/boxmodel/components/BoxModel"));
 const Grid = createFactory(require("devtools/client/inspector/grids/components/Grid"));
 
 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);
 
 const LAYOUT_STRINGS_URI = "devtools/client/locales/layout.properties";
 const LAYOUT_L10N = new LocalizationHelper(LAYOUT_STRINGS_URI);
 
 const BOXMODEL_OPENED_PREF = "devtools.layout.boxmodel.opened";
@@ -35,32 +36,38 @@ const App = createClass({
   propTypes: {
     boxModel: PropTypes.shape(BoxModelTypes.boxModel).isRequired,
     getSwatchColorPickerTooltip: PropTypes.func.isRequired,
     grids: PropTypes.arrayOf(PropTypes.shape(GridTypes.grid)).isRequired,
     highlighterSettings: PropTypes.shape(GridTypes.highlighterSettings).isRequired,
     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,
     onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
     onToggleGridHighlighter: PropTypes.func.isRequired,
     onToggleShowGridLineNumbers: PropTypes.func.isRequired,
     onToggleShowInfiniteLines: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   render() {
+    let { onPromoteLearnMoreClick } = this.props;
+
     return dom.div(
       {
         id: "layout-container",
       },
+      LayoutPromoteBar({
+        onPromoteLearnMoreClick,
+      }),
       Accordion({
         items: [
           {
             header: LAYOUT_L10N.getStr("layout.header"),
             component: Grid,
             componentProps: this.props,
             opened: Services.prefs.getBoolPref(GRID_OPENED_PREF),
             onToggled: () => {
new file mode 100644
--- /dev/null
+++ b/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;
+  },
+
+});
--- a/devtools/client/inspector/layout/components/moz.build
+++ b/devtools/client/inspector/layout/components/moz.build
@@ -3,9 +3,10 @@
 # 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/.
 
 DevToolsModules(
     'Accordion.css',
     'Accordion.js',
     'App.js',
+    'LayoutPromoteBar.js',
 )
--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -10,23 +10,31 @@ const { createFactory, createElement } =
 const { Provider } = require("devtools/client/shared/vendor/react-redux");
 
 const App = createFactory(require("./components/App"));
 
 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) {
   this.document = window.document;
   this.inspector = inspector;
   this.store = inspector.store;
 
+  this.onPromoteLearnMoreClick = this.onPromoteLearnMoreClick.bind(this);
+
   this.init();
 }
 
 LayoutView.prototype = {
 
   init() {
     if (!this.inspector) {
       return;
@@ -52,25 +60,30 @@ LayoutView.prototype = {
       onShowGridCellHighlight,
       onShowGridLineNamesHighlight,
       onToggleGridHighlighter,
       onToggleShowGridAreas,
       onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines,
     } = this.gridInspector.getComponentProps();
 
+    let {
+      onPromoteLearnMoreClick,
+    } = this;
+
     let app = App({
       getSwatchColorPickerTooltip,
       setSelectedNode,
       /**
        * Shows the box model properties under the box model if true, otherwise, hidden by
        * default.
        */
       showBoxModelProperties: true,
       onHideBoxModelHighlighter,
+      onPromoteLearnMoreClick,
       onSetGridOverlayColor,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       onShowGridAreaHighlight,
       onShowGridCellHighlight,
       onShowGridLineNamesHighlight,
       onToggleGeometryEditor,
@@ -80,16 +93,20 @@ LayoutView.prototype = {
       onToggleShowInfiniteLines,
     });
 
     let provider = createElement(Provider, {
       id: "layoutview",
       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.
     this.provider = provider;
   },
 
   /**
    * Destruction function called when the inspector is destroyed. Cleans up references.
@@ -97,11 +114,16 @@ LayoutView.prototype = {
   destroy() {
     this.gridInspector.destroy();
 
     this.document = null;
     this.inspector = null;
     this.store = null;
   },
 
+  onPromoteLearnMoreClick() {
+    let browserWin = this.inspector.target.tab.ownerDocument.defaultView;
+    browserWin.openUILinkIn(GRID_LINK, "current");
+  }
+
 };
 
 module.exports = LayoutView;
--- a/devtools/client/locales/en-US/layout.properties
+++ b/devtools/client/locales/en-US/layout.properties
@@ -39,8 +39,16 @@ layout.overlayMultipleGrids=Overlay Mult
 
 # LOCALIZATION NOTE (layout.overlayGrid): Alternate header for the list of grid container
 # elements if only one item can be selected.
 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ā€¦
--- a/devtools/client/preferences/devtools.js
+++ b/devtools/client/preferences/devtools.js
@@ -56,16 +56,23 @@ pref("devtools.inspector.imagePreviewToo
 pref("devtools.inspector.showUserAgentStyles", false);
 // Show all native anonymous content (like controls in <video> tags)
 pref("devtools.inspector.showAllAnonymousContent", false);
 // Enable the new color widget
 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);
 pref("devtools.gridinspector.showGridAreas", false);
 pref("devtools.gridinspector.showGridLineNumbers", false);
 pref("devtools.gridinspector.showInfiniteLines", false);
 pref("devtools.gridinspector.showNegativeLineNumbers", false);
 
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -44,16 +44,66 @@
 }
 
 .grid-container label {
   display: flex;
   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
  */
 
 #layout-grid-container {
   display: flex;
   flex-direction: column;
   margin: 5px;
 }