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

Backed out changeset 727a835af2ff (bug 1472566) for failing devtools at devtools/client/inspector/grids/test/browser_grids_color-in-rules-grid-toggle.js on a CLOSED TREE

This commit is contained in:
Andreea Pavel 2018-07-17 23:40:37 +03:00
Родитель 4e97b69ebf
Коммит 3fc22dbcb2
13 изменённых файлов: 50 добавлений и 203 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

14
devtools/client/inspector/flexbox/actions/flexbox.js
Просмотреть файл

@ -7,7 +7,6 @@
const {
CLEAR_FLEXBOX,
UPDATE_FLEXBOX,
UPDATE_FLEXBOX_COLOR,
UPDATE_FLEXBOX_HIGHLIGHTED,
} = require("./index");
@ -32,19 +31,6 @@ module.exports = {
};
},
/**
* Update the color used for the flexbox's highlighter.
*
* @param {String} color
* The color to use for this nodeFront's flexbox highlighter.
*/
updateFlexboxColor(color) {
return {
type: UPDATE_FLEXBOX_COLOR,
color,
};
},
/**
* Updates the flexbox highlighted state.
*

3
devtools/client/inspector/flexbox/actions/index.js
Просмотреть файл

@ -14,9 +14,6 @@ createEnum([
// Updates the flexbox state with the newly selected flexbox.
"UPDATE_FLEXBOX",
// Update the color used for the overlay of a flexbox.
"UPDATE_FLEXBOX_COLOR",
// Updates the flexbox highlighted state.
"UPDATE_FLEXBOX_HIGHLIGHTED",

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

@ -17,10 +17,8 @@ class Flexbox extends PureComponent {
static get propTypes() {
return {
flexbox: PropTypes.shape(Types.flexbox).isRequired,
getSwatchColorPickerTooltip: PropTypes.func.isRequired,
setSelectedNode: PropTypes.func.isRequired,
onHideBoxModelHighlighter: PropTypes.func.isRequired,
onSetFlexboxOverlayColor: PropTypes.func.isRequired,
onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
onToggleFlexboxHighlighter: PropTypes.func.isRequired,
};
@ -29,10 +27,8 @@ class Flexbox extends PureComponent {
render() {
const {
flexbox,
getSwatchColorPickerTooltip,
setSelectedNode,
onHideBoxModelHighlighter,
onSetFlexboxOverlayColor,
onShowBoxModelHighlighterForNode,
onToggleFlexboxHighlighter,
} = this.props;
@ -50,10 +46,8 @@ class Flexbox extends PureComponent {
FlexboxItem({
key: flexbox.id,
flexbox,
getSwatchColorPickerTooltip,
setSelectedNode,
onHideBoxModelHighlighter,
onSetFlexboxOverlayColor,
onShowBoxModelHighlighterForNode,
onToggleFlexboxHighlighter,
})

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

@ -7,7 +7,6 @@
const { 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 { findDOMNode } = require("devtools/client/shared/vendor/react-dom");
const { translateNodeFrontToGrip } = require("devtools/client/inspector/shared/utils");
// Reps
@ -21,10 +20,8 @@ class FlexboxItem extends PureComponent {
static get propTypes() {
return {
flexbox: PropTypes.shape(Types.flexbox).isRequired,
getSwatchColorPickerTooltip: PropTypes.func.isRequired,
setSelectedNode: PropTypes.func.isRequired,
onHideBoxModelHighlighter: PropTypes.func.isRequired,
onSetFlexboxOverlayColor: PropTypes.func.isRequired,
onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
onToggleFlexboxHighlighter: PropTypes.func.isRequired,
};
@ -32,46 +29,10 @@ class FlexboxItem extends PureComponent {
constructor(props) {
super(props);
this.setFlexboxColor = this.setFlexboxColor.bind(this);
this.onFlexboxCheckboxClick = this.onFlexboxCheckboxClick.bind(this);
this.onFlexboxInspectIconClick = this.onFlexboxInspectIconClick.bind(this);
}
componentDidMount() {
const {
flexbox,
getSwatchColorPickerTooltip,
onSetFlexboxOverlayColor,
} = this.props;
const swatchEl = findDOMNode(this).querySelector(".flexbox-color-swatch");
const tooltip = getSwatchColorPickerTooltip();
let previousColor;
tooltip.addSwatch(swatchEl, {
onCommit: this.setFlexboxColor,
onPreview: this.setFlexboxColor,
onRevert: () => {
onSetFlexboxOverlayColor(previousColor);
},
onShow: () => {
previousColor = flexbox.color;
},
});
}
componentWillUnMount() {
const swatchEl = findDOMNode(this).querySelector(".flexbox-color-swatch");
const tooltip = this.props.getSwatchColorPickerTooltip();
tooltip.removeSwatch(swatchEl);
}
setFlexboxColor() {
const color = findDOMNode(this).querySelector(".flexbox-color-value").textContent;
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;
@ -104,7 +65,6 @@ class FlexboxItem extends PureComponent {
} = this.props;
const {
actorID,
color,
highlighted,
nodeFront,
} = flexbox;
@ -131,21 +91,7 @@ class FlexboxItem extends PureComponent {
onInspectIconClick: () => this.onFlexboxInspectIconClick(nodeFront),
}
)
),
dom.div(
{
className: "flexbox-color-swatch",
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: "flexbox-color-value" }, color)
)
);
}
}

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

@ -9,15 +9,9 @@ const { throttle } = require("devtools/client/inspector/shared/utils");
const {
clearFlexbox,
updateFlexbox,
updateFlexboxColor,
updateFlexboxHighlighted,
} = require("./actions/flexbox");
loader.lazyRequireGetter(this, "parseURL", "devtools/client/shared/source-utils", true);
loader.lazyRequireGetter(this, "asyncStorage", "devtools/shared/async-storage");
const FLEXBOX_COLOR = "#9400FF";
class FlexboxInspector {
constructor(inspector, window) {
this.document = window.document;
@ -28,7 +22,6 @@ class FlexboxInspector {
this.onHighlighterShown = this.onHighlighterShown.bind(this);
this.onHighlighterHidden = this.onHighlighterHidden.bind(this);
this.onReflow = throttle(this.onReflow, 500, this);
this.onSetFlexboxOverlayColor = this.onSetFlexboxOverlayColor.bind(this);
this.onSidebarSelect = this.onSidebarSelect.bind(this);
this.onToggleFlexboxHighlighter = this.onToggleFlexboxHighlighter.bind(this);
this.onUpdatePanel = this.onUpdatePanel.bind(this);
@ -93,21 +86,10 @@ class FlexboxInspector {
getComponentProps() {
return {
getSwatchColorPickerTooltip: this.getSwatchColorPickerTooltip,
onSetFlexboxOverlayColor: this.onSetFlexboxOverlayColor,
onToggleFlexboxHighlighter: this.onToggleFlexboxHighlighter,
};
}
/**
* Returns an object containing the custom flexbox colors for different hosts.
*
* @return {Object} that maps a host name to a custom flexbox color for a given host.
*/
async getCustomFlexboxColors() {
return await asyncStorage.getItem("flexboxInspectorHostColors") || {};
}
/**
* Returns true if the layout panel is visible, and false otherwise.
*/
@ -208,31 +190,6 @@ class FlexboxInspector {
this.update(flexboxFront);
}
/**
* Handler for a change in the flexbox overlay color picker for a flex container.
*
* @param {String} color
* A hex string representing the color to use.
*/
async onSetFlexboxOverlayColor(color) {
this.store.dispatch(updateFlexboxColor(color));
const { flexbox } = this.store.getState();
if (flexbox.highlighted) {
this.highlighters.showFlexboxHighlighter(flexbox.nodeFront);
}
const currentUrl = this.inspector.target.url;
// Get the hostname, if there is no hostname, fall back on protocol
// ex: `data:` uri, and `about:` pages
const hostname = parseURL(currentUrl).hostname || parseURL(currentUrl).protocol;
const customFlexboxColors = await this.getCustomFlexboxColors();
customFlexboxColors[hostname] = color;
await asyncStorage.setItem("flexboxInspectorHostColors", customFlexboxColors);
}
/**
* Handler for the inspector sidebar "select" event. Updates the flexbox panel if it
* is visible.
@ -284,7 +241,7 @@ class FlexboxInspector {
* with new flexbox data.
*
* @param {FlexboxFront|Null} flexboxFront
* The FlexboxFront of the flex container for the current node selection.
* THe FlexboxFront of the flex container for the current node selection.
*/
async update(flexboxFront) {
// Stop refreshing if the inspector or store is already destroyed or no node is
@ -335,16 +292,8 @@ class FlexboxInspector {
const highlighted = this._highlighters &&
nodeFront == this.highlighters.flexboxHighlighterShown;
const currentUrl = this.inspector.target.url;
// Get the hostname, if there is no hostname, fall back on protocol
// ex: `data:` uri, and `about:` pages
const hostname = parseURL(currentUrl).hostname || parseURL(currentUrl).protocol;
const customColors = await this.getCustomFlexboxColors();
const color = customColors[hostname] ? customColors[hostname] : FLEXBOX_COLOR;
this.store.dispatch(updateFlexbox({
actorID: flexboxFront.actorID,
color,
highlighted,
nodeFront,
}));

9
devtools/client/inspector/flexbox/reducers/flexbox.js
Просмотреть файл

@ -7,15 +7,12 @@
const {
CLEAR_FLEXBOX,
UPDATE_FLEXBOX,
UPDATE_FLEXBOX_COLOR,
UPDATE_FLEXBOX_HIGHLIGHTED,
} = require("../actions/index");
const INITIAL_FLEXBOX = {
// The actor ID of the flex container.
actorID: null,
// The color of the flexbox highlighter overlay.
color: "",
// Whether or not the flexbox highlighter is highlighting the flex container.
highlighted: false,
// The NodeFront of the flex container.
@ -32,12 +29,6 @@ const reducers = {
return flexbox;
},
[UPDATE_FLEXBOX_COLOR](flexbox, { color }) {
return Object.assign({}, flexbox, {
color,
});
},
[UPDATE_FLEXBOX_HIGHLIGHTED](flexbox, { highlighted }) {
return Object.assign({}, flexbox, {
highlighted,

5
devtools/client/inspector/flexbox/types.js
Просмотреть файл

@ -9,10 +9,7 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
exports.flexbox = {
// The actor ID of the flex container.
actorID: PropTypes.string,
// The color of the flexbox highlighter overlay.
color: PropTypes.string,
actorID: PropTypes.number,
// Whether or not the flexbox highlighter is highlighting the flex container.
highlighted: PropTypes.bool,

33
devtools/client/inspector/grids/grid-inspector.js
Просмотреть файл

@ -19,6 +19,7 @@ const {
} = require("./actions/highlighter-settings");
loader.lazyRequireGetter(this, "compareFragmentsGeometry", "devtools/client/inspector/grids/utils/utils", true);
loader.lazyRequireGetter(this, "SwatchColorPickerTooltip", "devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip");
loader.lazyRequireGetter(this, "parseURL", "devtools/client/shared/source-utils", true);
loader.lazyRequireGetter(this, "asyncStorage", "devtools/shared/async-storage");
@ -56,6 +57,7 @@ class GridInspector {
this.telemetry = inspector.telemetry;
this.walker = this.inspector.walker;
this.getSwatchColorPickerTooltip = this.getSwatchColorPickerTooltip.bind(this);
this.updateGridPanel = this.updateGridPanel.bind(this);
this.onHighlighterShown = this.onHighlighterShown.bind(this);
@ -81,9 +83,21 @@ class GridInspector {
return this._highlighters;
}
get swatchColorPickerTooltip() {
if (!this._swatchColorPickerTooltip) {
this._swatchColorPickerTooltip = new SwatchColorPickerTooltip(
this.inspector.toolbox.doc,
this.inspector,
{ supportsCssColor4ColorFunction: () => false }
);
}
return this._swatchColorPickerTooltip;
}
/**
* Initializes the grid inspector by fetching the LayoutFront from the walker and
* loading the highlighter settings.
* Initializes the grid inspector by fetching the LayoutFront from the walker, loading
* the highlighter settings and initalizing the SwatchColorPicker instance.
*/
async init() {
if (!this.inspector) {
@ -124,6 +138,13 @@ class GridInspector {
this.inspector.reflowTracker.untrackReflows(this, this.onReflow);
// The color picker may not be ready as `init` function is async,
// and we do not wait for its completion before calling destroy in tests
if (this._swatchColorPickerTooltip) {
this._swatchColorPickerTooltip.destroy();
this._swatchColorPickerTooltip = null;
}
this._highlighters = null;
this.document = null;
this.inspector = null;
@ -134,6 +155,7 @@ class GridInspector {
getComponentProps() {
return {
getSwatchColorPickerTooltip: this.getSwatchColorPickerTooltip,
onSetGridOverlayColor: this.onSetGridOverlayColor,
onShowGridOutlineHighlight: this.onShowGridOutlineHighlight,
onToggleGridHighlighter: this.onToggleGridHighlighter,
@ -193,6 +215,13 @@ class GridInspector {
return null;
}
/**
* Retrieve the shared SwatchColorPicker instance.
*/
getSwatchColorPickerTooltip() {
return this.swatchColorPickerTooltip;
}
/**
* Given a list of new grid fronts, and if we have a currently highlighted grid, check
* if its fragments have changed.

1
devtools/client/inspector/layout/components/LayoutApp.js
Просмотреть файл

@ -42,7 +42,6 @@ class LayoutApp extends PureComponent {
setSelectedNode: PropTypes.func.isRequired,
showBoxModelProperties: PropTypes.bool.isRequired,
onHideBoxModelHighlighter: PropTypes.func.isRequired,
onSetFlexboxOverlayColor: PropTypes.func.isRequired,
onSetGridOverlayColor: PropTypes.func.isRequired,
onShowBoxModelEditor: PropTypes.func.isRequired,
onShowBoxModelHighlighter: PropTypes.func.isRequired,

26
devtools/client/inspector/layout/layout.js
Просмотреть файл

@ -15,7 +15,6 @@ const INSPECTOR_L10N =
loader.lazyRequireGetter(this, "FlexboxInspector", "devtools/client/inspector/flexbox/flexbox");
loader.lazyRequireGetter(this, "GridInspector", "devtools/client/inspector/grids/grid-inspector");
loader.lazyRequireGetter(this, "SwatchColorPickerTooltip", "devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip");
class LayoutView {
constructor(inspector, window) {
@ -43,14 +42,15 @@ class LayoutView {
onToggleGeometryEditor,
} = this.inspector.getPanel("boxmodel").getComponentProps();
this.flexboxInspector = new FlexboxInspector(this.inspector, this.inspector.panelWin);
this.flexboxInspector = new FlexboxInspector(this.inspector,
this.inspector.panelWin);
const {
onSetFlexboxOverlayColor,
onToggleFlexboxHighlighter,
} = this.flexboxInspector.getComponentProps();
this.gridInspector = new GridInspector(this.inspector, this.inspector.panelWin);
const {
getSwatchColorPickerTooltip,
onSetGridOverlayColor,
onShowGridOutlineHighlight,
onToggleGridHighlighter,
@ -60,7 +60,7 @@ class LayoutView {
} = this.gridInspector.getComponentProps();
const layoutApp = LayoutApp({
getSwatchColorPickerTooltip: () => this.swatchColorPickerTooltip,
getSwatchColorPickerTooltip,
setSelectedNode,
/**
* Shows the box model properties under the box model if true, otherwise, hidden by
@ -68,7 +68,6 @@ class LayoutView {
*/
showBoxModelProperties: true,
onHideBoxModelHighlighter,
onSetFlexboxOverlayColor,
onSetGridOverlayColor,
onShowBoxModelEditor,
onShowBoxModelHighlighter,
@ -97,11 +96,6 @@ class LayoutView {
* Destruction function called when the inspector is destroyed. Cleans up references.
*/
destroy() {
if (this._swatchColorPickerTooltip) {
this._swatchColorPickerTooltip.destroy();
this._swatchColorPickerTooltip = null;
}
this.flexboxInspector.destroy();
this.gridInspector.destroy();
@ -109,18 +103,6 @@ class LayoutView {
this.inspector = null;
this.store = null;
}
get swatchColorPickerTooltip() {
if (!this._swatchColorPickerTooltip) {
this._swatchColorPickerTooltip = new SwatchColorPickerTooltip(
this.inspector.toolbox.doc,
this.inspector,
{ supportsCssColor4ColorFunction: () => false }
);
}
return this._swatchColorPickerTooltip;
}
}
module.exports = LayoutView;

14
devtools/client/inspector/shared/highlighters-overlay.js
Просмотреть файл

@ -215,18 +215,6 @@ class HighlightersOverlay {
}
}
/**
* Create a flexbox highlighter settings object for the provided nodeFront.
*
* @param {NodeFront} nodeFront
* The NodeFront for which we need highlighter settings.
*/
getFlexboxHighlighterSettings(nodeFront) {
const { flexbox } = this.store.getState();
const color = flexbox.color;
return { color };
}
/**
* Toggle the flexbox highlighter for the given flexbox container element.
*
@ -258,8 +246,6 @@ class HighlightersOverlay {
return;
}
options = Object.assign({}, options, this.getFlexboxHighlighterSettings(node));
const isShown = await highlighter.show(node, options);
if (!isShown) {
return;

4
devtools/client/themes/layout.css
Просмотреть файл

@ -130,10 +130,9 @@
}
/**
* Flexbox and Grid Item
* Grid Item
*/
.flexbox-color-swatch,
.grid-color-swatch {
width: 12px;
height: 12px;
@ -145,7 +144,6 @@
vertical-align: middle;
}
.flexbox-color-value,
.grid-color-value {
display: none;
}

29
devtools/server/actors/highlighters/flexbox.js
Просмотреть файл

@ -60,15 +60,12 @@ const JUSTIFY_CONTENT = "justify-content";
* display: [inline-]flex elements.
*
* Available Options:
* - color(colorValue)
* @param {String} colorValue
* The color that should be used to draw the highlighter for this flexbox.
* - showAlignment(isShown)
* @param {Boolean} isShown
* Shows the alignment in the flexbox highlighter.
* @param {Boolean} isShown
* Shows the alignment in the flexbox highlighter.
* - showFlexBasis(isShown)
* @param {Boolean} isShown
* Shows the flex basis in the flexbox highlighter.
* @param {Boolean} isShown
* Shows the flex basis in the flexbox highlighter.
*/
class FlexboxHighlighter extends AutoRefreshHighlighter {
constructor(highlighterEnv) {
@ -172,10 +169,6 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
return this.getElement("canvas");
}
get color() {
return this.options.color || DEFAULT_COLOR;
}
get ctx() {
return this.canvas.getCanvasContext("2d");
}
@ -218,7 +211,7 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
ctx.moveTo(0, 0);
ctx.lineTo(width, height);
ctx.strokeStyle = this.color;
ctx.strokeStyle = DEFAULT_COLOR;
ctx.stroke();
ctx.restore();
@ -265,7 +258,7 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
ctx.moveTo(0, height);
ctx.lineTo(width, 0);
ctx.strokeStyle = this.color;
ctx.strokeStyle = DEFAULT_COLOR;
ctx.stroke();
ctx.restore();
@ -400,7 +393,7 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
this.ctx.translate(offset - canvasX, offset - canvasY);
this.ctx.setLineDash(FLEXBOX_LINES_PROPERTIES.alignItems.lineDash);
this.ctx.lineWidth = lineWidth * 3;
this.ctx.strokeStyle = this.color;
this.ctx.strokeStyle = DEFAULT_COLOR;
const { bounds } = this.currentQuads.content[0];
const isColumn = this.flexDirection.startsWith("column");
@ -500,7 +493,7 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
this.ctx.translate(offset - canvasX, offset - canvasY);
this.ctx.setLineDash(FLEXBOX_LINES_PROPERTIES.edge.lineDash);
this.ctx.lineWidth = lineWidth;
this.ctx.strokeStyle = this.color;
this.ctx.strokeStyle = DEFAULT_COLOR;
const { bounds } = this.currentQuads.content[0];
drawRect(this.ctx, 0, 0, bounds.width, bounds.height, this.currentMatrix);
@ -524,7 +517,7 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
this.ctx.translate(offset - canvasX, offset - canvasY);
this.ctx.setLineDash(FLEXBOX_LINES_PROPERTIES.edge.lineDash);
this.ctx.lineWidth = 0;
this.ctx.strokeStyle = this.color;
this.ctx.strokeStyle = DEFAULT_COLOR;
this.ctx.fillStyle = this.getFlexContainerPattern(devicePixelRatio);
const { bounds } = this.currentQuads.content[0];
@ -579,7 +572,7 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
this.ctx.translate(offset - canvasX, offset - canvasY);
this.ctx.setLineDash(FLEXBOX_LINES_PROPERTIES.item.lineDash);
this.ctx.lineWidth = lineWidth;
this.ctx.strokeStyle = this.color;
this.ctx.strokeStyle = DEFAULT_COLOR;
const { bounds } = this.currentQuads.content[0];
@ -622,7 +615,7 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
this.ctx.save();
this.ctx.translate(offset - canvasX, offset - canvasY);
this.ctx.lineWidth = lineWidth;
this.ctx.strokeStyle = this.color;
this.ctx.strokeStyle = DEFAULT_COLOR;
const { bounds } = this.currentQuads.content[0];
const isColumn = this.flexDirection.startsWith("column");