mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

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)
This commit is contained in:
Tiberius Oros 2018-09-18 18:10:34 +03:00
Родитель d3e1e4728d
Коммит 6fc40ffa3f
12 изменённых файлов: 170 добавлений и 251 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

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

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

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

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

128
devtools/client/inspector/flexbox/components/Header.js
Просмотреть файл

@ -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
Просмотреть файл

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

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

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

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

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

6
devtools/client/themes/images/arrowhead-left.svg
Просмотреть файл

@ -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>
Режим "рядом"

До

Ширина:  |  Высота:  |  Размер: 524 B

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