author | Gabriel Luong <gabriel.luong@gmail.com> |
Fri, 13 Oct 2017 10:42:32 -0400 | |
changeset 386112 | a25dd5df93da4d5676bb51896bcd0301b9c169e9 |
parent 386111 | 4f11834e48fc44b0ff1a7ce6446155a9a7ef0ed7 |
child 386113 | 763378dbc0035a1cbe81270d16a088e9d3569ca6 |
push id | 96183 |
push user | gabriel.luong@gmail.com |
push date | Fri, 13 Oct 2017 16:55:40 +0000 |
treeherder | mozilla-inbound@a25dd5df93da [default view] [failures only] |
perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
reviewers | jdescottes |
bugs | 1355747 |
milestone | 58.0a1 |
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
|
--- 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,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/grids/test/head.js +++ b/devtools/client/inspector/grids/test/head.js @@ -11,20 +11,18 @@ 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,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 @@ -1,40 +1,30 @@ /* 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"; -const Services = require("Services"); - const { createFactory, createElement } = require("devtools/client/shared/vendor/react"); 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 +50,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, @@ -93,20 +78,16 @@ 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. @@ -114,16 +95,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; }