Bug 1355747 - Disable and remove layout panel promotion code in release 58. r=jdescottes
MozReview-Commit-ID: 8o06yxf4pUB
--- 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;
}