From 6fc40ffa3f4f0d2c8626d9990a53faa5bc950b20 Mon Sep 17 00:00:00 2001 From: Tiberius Oros Date: Tue, 18 Sep 2018 18:10:34 +0300 Subject: [PATCH] Backed out 5 changesets (bug 1478397) for failures on browser/base/content/test/static/browser_parsable_css.js on a CLOSED TREE Backed out changeset c7db1d98d62b (bug 1478397) Backed out changeset 588d147e401b (bug 1478397) Backed out changeset b11a8565deff (bug 1478397) Backed out changeset faf1ea0e1a15 (bug 1478397) Backed out changeset 8a5ca81f8429 (bug 1478397) --- .../flexbox/components/FlexContainer.js | 128 +++++++++++++----- .../inspector/flexbox/components/FlexItem.js | 13 +- .../flexbox/components/FlexItemSelector.js | 27 ++-- .../inspector/flexbox/components/Flexbox.js | 10 +- .../inspector/flexbox/components/Header.js | 128 ------------------ .../inspector/flexbox/components/moz.build | 1 - devtools/client/inspector/flexbox/flexbox.js | 49 +++---- .../inspector/flexbox/reducers/flexbox.js | 11 +- .../inspector/grids/components/GridItem.js | 1 + devtools/client/jar.mn | 1 - .../client/themes/images/arrowhead-left.svg | 6 - devtools/client/themes/layout.css | 46 +++---- 12 files changed, 170 insertions(+), 251 deletions(-) delete mode 100644 devtools/client/inspector/flexbox/components/Header.js delete mode 100644 devtools/client/themes/images/arrowhead-left.svg diff --git a/devtools/client/inspector/flexbox/components/FlexContainer.js b/devtools/client/inspector/flexbox/components/FlexContainer.js index 338fcb6e7ffb..c1f873489ab0 100644 --- a/devtools/client/inspector/flexbox/components/FlexContainer.js +++ b/devtools/client/inspector/flexbox/components/FlexContainer.js @@ -4,16 +4,16 @@ "use strict"; -const { - createElement, - createRef, - Fragment, - PureComponent, -} = require("devtools/client/shared/vendor/react"); +const { createFactory, createRef, PureComponent } = require("devtools/client/shared/vendor/react"); const dom = require("devtools/client/shared/vendor/react-dom-factories"); const PropTypes = require("devtools/client/shared/vendor/react-prop-types"); const { translateNodeFrontToGrip } = require("devtools/client/inspector/shared/utils"); +loader.lazyGetter(this, "FlexItemSelector", function() { + return createFactory(require("./FlexItemSelector")); +}); + +// Reps const { REPS, MODE } = require("devtools/client/shared/components/reps/reps"); const { Rep } = REPS; const ElementNode = REPS.ElementNode; @@ -28,6 +28,8 @@ class FlexContainer extends PureComponent { onHideBoxModelHighlighter: PropTypes.func.isRequired, onSetFlexboxOverlayColor: PropTypes.func.isRequired, onShowBoxModelHighlighterForNode: PropTypes.func.isRequired, + onToggleFlexboxHighlighter: PropTypes.func.isRequired, + onToggleFlexItemShown: PropTypes.func.isRequired, setSelectedNode: PropTypes.func.isRequired, }; } @@ -38,6 +40,7 @@ class FlexContainer extends PureComponent { this.colorValueEl = createRef(); this.swatchEl = createRef(); + this.onFlexboxCheckboxClick = this.onFlexboxCheckboxClick.bind(this); this.onFlexboxInspectIconClick = this.onFlexboxInspectIconClick.bind(this); this.setFlexboxColor = this.setFlexboxColor.bind(this); } @@ -74,12 +77,51 @@ class FlexContainer extends PureComponent { this.props.onSetFlexboxOverlayColor(color); } + onFlexboxCheckboxClick(e) { + // If the click was on the svg icon to select the node in the inspector, bail out. + const originalTarget = e.nativeEvent && e.nativeEvent.explicitOriginalTarget; + if (originalTarget && originalTarget.namespaceURI === "http://www.w3.org/2000/svg") { + // We should be able to cancel the click event propagation after the following reps + // issue is implemented : https://github.com/devtools-html/reps/issues/95 . + e.preventDefault(); + return; + } + + const { + flexbox, + onToggleFlexboxHighlighter, + } = this.props; + + onToggleFlexboxHighlighter(flexbox.nodeFront); + } + onFlexboxInspectIconClick(nodeFront) { const { setSelectedNode } = this.props; setSelectedNode(nodeFront, { reason: "layout-panel" }); nodeFront.scrollIntoView().catch(e => console.error(e)); } + renderFlexItemSelector() { + const { + flexbox, + onToggleFlexItemShown, + } = this.props; + const { + flexItems, + flexItemShown, + } = flexbox; + + if (!flexItemShown) { + return null; + } + + return FlexItemSelector({ + flexItem: flexItems.find(item => item.nodeFront.actorID === flexItemShown), + flexItems, + onToggleFlexItemShown, + }); + } + render() { const { flexbox, @@ -88,36 +130,56 @@ class FlexContainer extends PureComponent { } = this.props; const { color, + highlighted, nodeFront, } = flexbox; - return createElement(Fragment, null, - Rep({ - defaultRep: ElementNode, - mode: MODE.TINY, - object: translateNodeFrontToGrip(nodeFront), - onDOMNodeMouseOut: () => onHideBoxModelHighlighter(), - onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront), - onInspectIconClick: () => this.onFlexboxInspectIconClick(nodeFront), - }), - dom.div({ - className: "layout-color-swatch", - ref: this.swatchEl, - style: { - backgroundColor: color, - }, - title: color, - }), - // The SwatchColorPicker relies on the nextSibling of the swatch element to - // apply the selected color. This is why we use a span in display: none for - // now. Ideally we should modify the SwatchColorPickerTooltip to bypass this - // requirement. See https://bugzilla.mozilla.org/show_bug.cgi?id=1341578 - dom.span( - { - className: "layout-color-value", - ref: this.colorValueEl, - }, - color + return ( + dom.div({ className: "flex-container devtools-monospace" }, + dom.div({}, + dom.label({}, + dom.input( + { + className: "devtools-checkbox-toggle", + checked: highlighted, + onChange: this.onFlexboxCheckboxClick, + type: "checkbox", + } + ), + Rep( + { + defaultRep: ElementNode, + mode: MODE.TINY, + object: translateNodeFrontToGrip(nodeFront), + onDOMNodeMouseOut: () => onHideBoxModelHighlighter(), + onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront), + onInspectIconClick: () => this.onFlexboxInspectIconClick(nodeFront), + } + ) + ), + dom.div( + { + className: "layout-color-swatch", + ref: this.swatchEl, + style: { + backgroundColor: color, + }, + title: color, + } + ), + // The SwatchColorPicker relies on the nextSibling of the swatch element to + // apply the selected color. This is why we use a span in display: none for + // now. Ideally we should modify the SwatchColorPickerTooltip to bypass this + // requirement. See https://bugzilla.mozilla.org/show_bug.cgi?id=1341578 + dom.span( + { + className: "layout-color-value", + ref: this.colorValueEl, + }, + color + ) + ), + this.renderFlexItemSelector() ) ); } diff --git a/devtools/client/inspector/flexbox/components/FlexItem.js b/devtools/client/inspector/flexbox/components/FlexItem.js index 12d36702ffa3..e604b4f334f7 100644 --- a/devtools/client/inspector/flexbox/components/FlexItem.js +++ b/devtools/client/inspector/flexbox/components/FlexItem.js @@ -9,6 +9,7 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories"); const PropTypes = require("devtools/client/shared/vendor/react-prop-types"); const { translateNodeFrontToGrip } = require("devtools/client/inspector/shared/utils"); +// Reps const { REPS, MODE } = require("devtools/client/shared/components/reps/reps"); const { Rep } = REPS; const ElementNode = REPS.ElementNode; @@ -37,11 +38,13 @@ class FlexItem extends PureComponent { className: "devtools-button devtools-monospace", onClick: () => onToggleFlexItemShown(nodeFront), }, - Rep({ - defaultRep: ElementNode, - mode: MODE.TINY, - object: translateNodeFrontToGrip(nodeFront), - }) + Rep( + { + defaultRep: ElementNode, + mode: MODE.TINY, + object: translateNodeFrontToGrip(nodeFront) + } + ) ) ) ); diff --git a/devtools/client/inspector/flexbox/components/FlexItemSelector.js b/devtools/client/inspector/flexbox/components/FlexItemSelector.js index 65d2aa47c8d6..ee3e66394da9 100644 --- a/devtools/client/inspector/flexbox/components/FlexItemSelector.js +++ b/devtools/client/inspector/flexbox/components/FlexItemSelector.js @@ -12,6 +12,7 @@ const { translateNodeFrontToGrip, } = require("devtools/client/inspector/shared/utils"); +// Reps const { REPS, MODE } = require("devtools/client/shared/components/reps/reps"); const { Rep } = REPS; const ElementNode = REPS.ElementNode; @@ -61,17 +62,21 @@ class FlexItemSelector extends PureComponent { const { flexItem } = this.props; return ( - dom.button( - { - id: "flex-item-selector", - className: "devtools-button devtools-dropdown-button", - onClick: this.onShowFlexItemMenu, - }, - Rep({ - defaultRep: ElementNode, - mode: MODE.TINY, - object: translateNodeFrontToGrip(flexItem.nodeFront), - }) + dom.div({ className: "flex-item-selector-wrapper" }, + dom.button( + { + id: "flex-item-selector", + className: "devtools-button devtools-dropdown-button", + onClick: this.onShowFlexItemMenu, + }, + Rep( + { + defaultRep: ElementNode, + mode: MODE.TINY, + object: translateNodeFrontToGrip(flexItem.nodeFront) + } + ) + ) ) ); } diff --git a/devtools/client/inspector/flexbox/components/Flexbox.js b/devtools/client/inspector/flexbox/components/Flexbox.js index d7a4a152cc60..075aa6a1bfbd 100644 --- a/devtools/client/inspector/flexbox/components/Flexbox.js +++ b/devtools/client/inspector/flexbox/components/Flexbox.js @@ -9,6 +9,9 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories"); const PropTypes = require("devtools/client/shared/vendor/react-prop-types"); const { getStr } = require("devtools/client/inspector/layout/utils/l10n"); +loader.lazyGetter(this, "FlexContainer", function() { + return createFactory(require("./FlexContainer")); +}); loader.lazyGetter(this, "FlexContainerProperties", function() { return createFactory(require("./FlexContainerProperties")); }); @@ -18,9 +21,6 @@ loader.lazyGetter(this, "FlexItemList", function() { loader.lazyGetter(this, "FlexItemSizingProperties", function() { return createFactory(require("./FlexItemSizingProperties")); }); -loader.lazyGetter(this, "Header", function() { - return createFactory(require("./Header")); -}); const Types = require("../types"); @@ -48,7 +48,7 @@ class Flexbox extends PureComponent { flexItemShown, } = flexbox; - if (flexItemShown || !flexItems.length) { + if (flexItemShown) { return null; } @@ -97,7 +97,7 @@ class Flexbox extends PureComponent { return ( dom.div({ id: "layout-flexbox-container" }, - Header({ + FlexContainer({ flexbox, getSwatchColorPickerTooltip, onHideBoxModelHighlighter, diff --git a/devtools/client/inspector/flexbox/components/Header.js b/devtools/client/inspector/flexbox/components/Header.js deleted file mode 100644 index cf02913e197e..000000000000 --- a/devtools/client/inspector/flexbox/components/Header.js +++ /dev/null @@ -1,128 +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"; - -const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react"); -const dom = require("devtools/client/shared/vendor/react-dom-factories"); -const PropTypes = require("devtools/client/shared/vendor/react-prop-types"); - -const FlexContainer = createFactory(require("./FlexContainer")); -const FlexItemSelector = createFactory(require("./FlexItemSelector")); - -const Types = require("../types"); - -class Header extends PureComponent { - static get propTypes() { - return { - flexbox: PropTypes.shape(Types.flexbox).isRequired, - getSwatchColorPickerTooltip: PropTypes.func.isRequired, - onHideBoxModelHighlighter: PropTypes.func.isRequired, - onSetFlexboxOverlayColor: PropTypes.func.isRequired, - onShowBoxModelHighlighterForNode: PropTypes.func.isRequired, - onToggleFlexboxHighlighter: PropTypes.func.isRequired, - onToggleFlexItemShown: PropTypes.func.isRequired, - setSelectedNode: PropTypes.func.isRequired, - }; - } - - constructor(props) { - super(props); - this.onFlexboxCheckboxClick = this.onFlexboxCheckboxClick.bind(this); - } - - onFlexboxCheckboxClick() { - const { - flexbox, - onToggleFlexboxHighlighter, - } = this.props; - - onToggleFlexboxHighlighter(flexbox.nodeFront); - } - - renderFlexContainer() { - if (this.props.flexbox.flexItemShown) { - return null; - } - - const { - flexbox, - getSwatchColorPickerTooltip, - onHideBoxModelHighlighter, - onSetFlexboxOverlayColor, - onShowBoxModelHighlighterForNode, - setSelectedNode, - } = this.props; - - return FlexContainer({ - flexbox, - getSwatchColorPickerTooltip, - onHideBoxModelHighlighter, - onSetFlexboxOverlayColor, - onShowBoxModelHighlighterForNode, - setSelectedNode, - }); - } - - renderFlexItemSelector() { - if (!this.props.flexbox.flexItemShown) { - return null; - } - - const { - flexbox, - onToggleFlexItemShown, - } = this.props; - const { - flexItems, - flexItemShown, - } = flexbox; - - return FlexItemSelector({ - flexItem: flexItems.find(item => item.nodeFront.actorID === flexItemShown), - flexItems, - onToggleFlexItemShown, - }); - } - - render() { - const { - flexbox, - onToggleFlexItemShown, - } = this.props; - const { - flexItemShown, - highlighted, - } = flexbox; - - return ( - dom.div({ className: "flex-header devtools-monospace" }, - flexItemShown ? - dom.button({ - className: "flex-header-button-prev devtools-button", - onClick: () => onToggleFlexItemShown(), - }) - : - null, - dom.div( - { - className: "flex-header-content" + - (flexItemShown ? " flex-item-shown" : "") - }, - this.renderFlexContainer(), - this.renderFlexItemSelector() - ), - dom.div({ className: "devtools-separator" }), - dom.input({ - className: "devtools-checkbox-toggle", - checked: highlighted, - onChange: this.onFlexboxCheckboxClick, - type: "checkbox", - }) - ) - ); - } -} - -module.exports = Header; diff --git a/devtools/client/inspector/flexbox/components/moz.build b/devtools/client/inspector/flexbox/components/moz.build index 7cf5e569cff1..4b3568e9f68b 100644 --- a/devtools/client/inspector/flexbox/components/moz.build +++ b/devtools/client/inspector/flexbox/components/moz.build @@ -12,5 +12,4 @@ DevToolsModules( 'FlexItemList.js', 'FlexItemSelector.js', 'FlexItemSizingProperties.js', - 'Header.js', ) diff --git a/devtools/client/inspector/flexbox/flexbox.js b/devtools/client/inspector/flexbox/flexbox.js index 94739a33d498..92b86a3f6720 100644 --- a/devtools/client/inspector/flexbox/flexbox.js +++ b/devtools/client/inspector/flexbox/flexbox.js @@ -24,7 +24,6 @@ class FlexboxInspector { constructor(inspector, window) { this.document = window.document; this.inspector = inspector; - this.selection = inspector.selection; this.store = inspector.store; this.walker = inspector.walker; @@ -86,7 +85,7 @@ class FlexboxInspector { this.highlighters.off("flexbox-highlighter-shown", this.onHighlighterShown); } - this.selection.off("new-node-front", this.onUpdatePanel); + this.inspector.selection.off("new-node-front", this.onUpdatePanel); this.inspector.sidebar.off("select", this.onSidebarSelect); this.inspector.off("new-root", this.onUpdatePanel); @@ -97,7 +96,6 @@ class FlexboxInspector { this.hasGetCurrentFlexbox = null; this.inspector = null; this.layoutInspector = null; - this.selection = null; this.store = null; this.walker = null; } @@ -182,14 +180,14 @@ class FlexboxInspector { async onReflow() { if (!this.isPanelVisible() || !this.store || - !this.selection.nodeFront || + !this.inspector.selection.nodeFront || !this.hasGetCurrentFlexbox) { return; } try { const flexboxFront = await this.layoutInspector.getCurrentFlexbox( - this.selection.nodeFront); + this.inspector.selection.nodeFront); // Clear the flexbox panel if there is no flex container for the current node // selection. @@ -245,14 +243,14 @@ class FlexboxInspector { onSidebarSelect() { if (!this.isPanelVisible()) { this.inspector.reflowTracker.untrackReflows(this, this.onReflow); + this.inspector.selection.off("new-node-front", this.onUpdatePanel); this.inspector.off("new-root", this.onUpdatePanel); - this.selection.off("new-node-front", this.onUpdatePanel); return; } this.inspector.reflowTracker.trackReflows(this, this.onReflow); + this.inspector.selection.on("new-node-front", this.onUpdatePanel); this.inspector.on("new-root", this.onUpdatePanel); - this.selection.on("new-node-front", this.onUpdatePanel); this.update(); } @@ -272,21 +270,16 @@ class FlexboxInspector { } /** - * Handler for a change in the input checkbox in the FlexItem and Header component. - * Toggles on/off the flex item highlighter for the provided flex item element and - * changes the selection to the given node. + * Handler for a change in the input checkbox in the FlexItem component. + * Toggles on/off the flex item highlighter for the provided flex item element. * - * @param {NodeFront|null} node + * @param {NodeFront} node * The NodeFront of the flex item element for which the flex item is toggled * on/off for. */ onToggleFlexItemShown(node) { this.highlighters.toggleFlexItemHighlighter(node); this.store.dispatch(toggleFlexItemShown(node)); - - if (node) { - this.selection.setNodeFront(node); - } } /** @@ -314,7 +307,7 @@ class FlexboxInspector { // selected. if (!this.inspector || !this.store || - !this.selection.nodeFront || + !this.inspector.selection.nodeFront || !this.hasGetCurrentFlexbox) { return; } @@ -323,7 +316,7 @@ class FlexboxInspector { // Fetch the current flexbox if no flexbox front was passed into this update. if (!flexboxFront) { flexboxFront = await this.layoutInspector.getCurrentFlexbox( - this.selection.nodeFront); + this.inspector.selection.nodeFront); } // Clear the flexbox panel if there is no flex container for the current node @@ -342,25 +335,17 @@ class FlexboxInspector { ["containerEl"]); } - // Fetch the flex items for the given flex container. - const flexItemFronts = await flexboxFront.getFlexItems(); + // Fetch the flex items for the given flex container and the flex item NodeFronts. const flexItems = []; - let flexItemShown = null; + const flexItemFronts = await flexboxFront.getFlexItems(); for (const flexItemFront of flexItemFronts) { - // Fetch the NodeFront of the flex items. let itemNodeFront = flexItemFront.nodeFront; if (!itemNodeFront) { itemNodeFront = await this.walker.getNodeFromActor(flexItemFront.actorID, ["element"]); } - // If the current selected node is a flex item, display its flex item sizing - // properties. - if (!flexItemShown && itemNodeFront === this.selection.nodeFront) { - flexItemShown = itemNodeFront.actorID; - } - flexItems.push({ actorID: flexItemFront.actorID, flexItemSizing: flexItemFront.flexItemSizing, @@ -378,6 +363,16 @@ class FlexboxInspector { const customColors = await this.getCustomFlexboxColors(); const color = customColors[hostname] ? customColors[hostname] : FLEXBOX_COLOR; + const { flexbox } = this.store.getState(); + let { flexItemShown } = flexbox; + + // Check if the flex item shown still exists in the list of flex items, otherwise + // set the flex item shown to null. + if (flexItemShown && + !flexItemFronts.find(item => item.nodeFront.actorID === flexItemShown)) { + flexItemShown = null; + } + this.store.dispatch(updateFlexbox({ actorID: flexboxFront.actorID, color, diff --git a/devtools/client/inspector/flexbox/reducers/flexbox.js b/devtools/client/inspector/flexbox/reducers/flexbox.js index e81498e24020..167f83b08a6b 100644 --- a/devtools/client/inspector/flexbox/reducers/flexbox.js +++ b/devtools/client/inspector/flexbox/reducers/flexbox.js @@ -36,16 +36,11 @@ const reducers = { }, [TOGGLE_FLEX_ITEM_SHOWN](flexbox, { nodeFront }) { - let flexItemShown = null; - - // Get the NodeFront actor ID of the flex item. - if (nodeFront) { - const flexItem = flexbox.flexItems.find(item => item.nodeFront === nodeFront); - flexItemShown = flexItem.nodeFront.actorID; - } + const { flexItems } = flexbox; + const flexItemShown = flexItems.find(item => item.nodeFront === nodeFront); return Object.assign({}, flexbox, { - flexItemShown, + flexItemShown: flexItemShown ? flexItemShown.nodeFront.actorID : null, }); }, diff --git a/devtools/client/inspector/grids/components/GridItem.js b/devtools/client/inspector/grids/components/GridItem.js index fa9e55a52045..1cc363c40c76 100644 --- a/devtools/client/inspector/grids/components/GridItem.js +++ b/devtools/client/inspector/grids/components/GridItem.js @@ -9,6 +9,7 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories"); const PropTypes = require("devtools/client/shared/vendor/react-prop-types"); const { translateNodeFrontToGrip } = require("devtools/client/inspector/shared/utils"); +// Reps const { REPS, MODE } = require("devtools/client/shared/components/reps/reps"); const { Rep } = REPS; const ElementNode = REPS.ElementNode; diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn index 22b1bc7fb95a..1dbadf48cf3e 100644 --- a/devtools/client/jar.mn +++ b/devtools/client/jar.mn @@ -107,7 +107,6 @@ devtools.jar: skin/tooltips.css (themes/tooltips.css) skin/images/accessibility.svg (themes/images/accessibility.svg) skin/images/add.svg (themes/images/add.svg) - skin/images/arrowhead-left.svg (themes/images/arrowhead-left.svg) skin/images/arrowhead-down.svg (themes/images/arrowhead-down.svg) skin/images/arrowhead-up.svg (themes/images/arrowhead-up.svg) skin/images/breadcrumbs-divider.svg (themes/images/breadcrumbs-divider.svg) diff --git a/devtools/client/themes/images/arrowhead-left.svg b/devtools/client/themes/images/arrowhead-left.svg deleted file mode 100644 index 80ef9db24121..000000000000 --- a/devtools/client/themes/images/arrowhead-left.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/devtools/client/themes/layout.css b/devtools/client/themes/layout.css index 535902c74b24..d6a6ce51828c 100644 --- a/devtools/client/themes/layout.css +++ b/devtools/client/themes/layout.css @@ -97,34 +97,10 @@ flex-direction: column; } -/** - * Header - */ - -.flex-header { - display: flex; - align-items: center; - height: 32px; +.flex-container { border-bottom: 1px solid var(--theme-splitter-color); - padding: 0 3px; -} - -.flex-header-button-prev::before { - background-image: url("chrome://devtools/skin/images/arrowhead-left.svg"); - background-size: 16px; -} - -.flex-header-content { - flex: 1; - padding-top: 2px; + padding: 5px 0; padding-inline-start: 20px; - -moz-user-select: none; -} - -.flex-header-content.flex-item-shown { - display: flex; - justify-content: center; - padding: 0; } /** @@ -148,6 +124,24 @@ * Flex Item Selector */ +.flex-item-selector-wrapper { + margin-inline-start: 25px; + position: relative; +} + +.flex-item-selector-wrapper::before { + position: absolute; + left: -12px; + top: 3px; + content: ''; + display: block; + border-left: 0.5px solid var(--flex-item-selector-wrapper-border-color); + height: 0.8em; + border-bottom: 0.5px solid var(--flex-item-selector-wrapper-border-color); + width: 10px; +} + + #flex-item-selector { background-position: right 4px center; padding-left: 0;