Bug 1355747 - Disable and remove layout panel promotion code in release 58. r=jdescottes draft
authorGabriel Luong <gabriel.luong@gmail.com>
Fri, 13 Oct 2017 01:14:19 -0400
changeset 679872 ac480faf604ff3c3442a4c58823b73ff5fe58f82
parent 679861 bb6f23916cb13974b8f35119cc7a72d0508dab46
child 735694 8029ff30498a491a5ed819293e1e288247110edf
push id84324
push userbmo:gl@mozilla.com
push dateFri, 13 Oct 2017 05:14:30 +0000
reviewersjdescottes
bugs1355747
milestone58.0a1
Bug 1355747 - Disable and remove layout panel promotion code in release 58. r=jdescottes MozReview-Commit-ID: 8o06yxf4pUB
devtools/client/inspector/grids/grid-inspector.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/grids/grid-inspector.js
+++ b/devtools/client/inspector/grids/grid-inspector.js
@@ -22,18 +22,16 @@ 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",
@@ -564,19 +562,16 @@ 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/layout/components/App.js
+++ b/devtools/client/inspector/layout/components/App.js
@@ -13,17 +13,16 @@ 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";
@@ -36,38 +35,32 @@ 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: () => {
deleted file mode 100644
--- a/devtools/client/inspector/layout/components/LayoutPromoteBar.js
+++ /dev/null
@@ -1,76 +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/. */
-
-"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,10 +3,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/.
 
 DevToolsModules(
     'Accordion.css',
     'Accordion.js',
     'App.js',
-    'LayoutPromoteBar.js',
 )
--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -10,31 +10,23 @@ 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;
@@ -60,30 +52,25 @@ 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,
@@ -92,21 +79,17 @@ LayoutView.prototype = {
       onToggleShowGridLineNumbers,
       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,
+      title: INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle2")
     }, 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.
@@ -114,16 +97,11 @@ 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,16 +39,8 @@ 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,23 +56,16 @@ 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,66 +44,16 @@
 }
 
 .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;
 }