Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-08 19:04:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Backed out 5 changesets (bug 1478397) for failures on browser/base/content/test/static/browser_parsable_css.js on a CLOSED TREE

Browse Source 
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)
This commit is contained in:
Tiberius Oros 2018-09-18 18:10:34 +03:00
parent d3e1e4728d
commit 6fc40ffa3f
12 changed files with 170 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
devtools/client/inspector/flexbox/components/FlexContainer.js
View File

@ -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()
)
);
}

13
devtools/client/inspector/flexbox/components/FlexItem.js
View File

@ -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)
}
)
)
)
);

27
devtools/client/inspector/flexbox/components/FlexItemSelector.js
View File

@ -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)
}
)
)
)
);
}

10
devtools/client/inspector/flexbox/components/Flexbox.js
View File

@ -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,

128
devtools/client/inspector/flexbox/components/Header.js
View File

@ -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;

1
devtools/client/inspector/flexbox/components/moz.build
View File

@ -12,5 +12,4 @@ DevToolsModules(
'FlexItemList.js',
'FlexItemSelector.js',
'FlexItemSizingProperties.js',
'Header.js',
)

49
devtools/client/inspector/flexbox/flexbox.js
View File

@ -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,

11
devtools/client/inspector/flexbox/reducers/flexbox.js
View File

@ -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,
});
},

1
devtools/client/inspector/grids/components/GridItem.js
View File

@ -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;

1
devtools/client/jar.mn
View File

@ -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)

6
devtools/client/themes/images/arrowhead-left.svg
View File

@ -1,6 +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/. -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="context-fill #0C0C0D" fill-rule="evenodd" clip-rule="evenodd" d="M15.707 4.293a1 1 0 0 1 0 1.414L9.414 12l6.293 6.293a1 1 0 1 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0z"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 524 B

46
devtools/client/themes/layout.css
View File

@ -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;