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

Backed out changeset ffb2909f660d (bug 1497312) for browser_flexbox_highlighter_color_picker_on_RETURN.js failures CLOSED TREE

Browse Source
This commit is contained in:
Bogdan Tara 2018-10-15 23:31:22 +03:00
parent 521cf64b7d
commit 37c2b65d30
9 changed files with 25 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,7 +52,6 @@ class Header extends PureComponent {
return createElement(Fragment, null,
dom.div({ className: "devtools-separator" }),
dom.input({
id: "flexbox-checkbox-toggle",
className: "devtools-checkbox-toggle",
checked: this.props.highlighted,
onChange: this.onFlexboxCheckboxClick,

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

@ -338,7 +338,7 @@ class FlexboxInspector {
const { flexbox } = this.store.getState();
if (flexbox.highlighted) {
this.highlighters.showFlexboxHighlighter(flexbox.flexContainer.nodeFront);
this.highlighters.showFlexboxHighlighter(flexbox.nodeFront);
}
const currentUrl = this.inspector.target.url;

2
devtools/client/inspector/flexbox/test/browser.ini
View File

@ -8,8 +8,6 @@ support-files =
!/devtools/client/inspector/test/shared-head.js
!/devtools/client/shared/test/shared-head.js
[browser_flexbox_highlighter_color_picker_on_ESC.js]
[browser_flexbox_highlighter_color_picker_on_RETURN.js]
[browser_flexbox_item_outline_exists.js]
[browser_flexbox_item_outline_has_correct_layout.js]
[browser_flexbox_item_outline_rotates_for_column.js]

48
devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_color_picker_on_ESC.js
View File

@ -1,48 +0,0 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the flexbox highlighter color change in the color picker is reverted when
// ESCAPE is pressed.
const TEST_URI = URL_ROOT + "doc_flexbox_simple.html";
add_task(async function() {
await addTab(TEST_URI);
const { inspector, flexboxInspector, layoutView } = await openLayoutView();
const { document: doc } = flexboxInspector;
const { store } = inspector;
const cPicker = layoutView.swatchColorPickerTooltip;
const spectrum = cPicker.spectrum;
const onColorSwatchRendered = waitForDOM(doc,
"#layout-flexbox-container .layout-color-swatch");
await selectNode("#container", inspector);
const [swatch] = await onColorSwatchRendered;
info("Checking the initial state of the Flexbox Inspector color picker.");
is(swatch.style.backgroundColor, "rgb(148, 0, 255)",
"The color swatch's background is correct.");
is(store.getState().flexbox.color, "#9400FF", "The flexbox color state is correct.");
info("Opening the color picker by clicking on the color swatch.");
const onColorPickerReady = cPicker.once("ready");
swatch.click();
await onColorPickerReady;
await simulateColorPickerChange(cPicker, [0, 255, 0, .5]);
is(swatch.style.backgroundColor, "rgba(0, 255, 0, 0.5)",
"The color swatch's background was updated.");
info("Pressing ESCAPE to close the tooltip.");
const onColorUpdate = waitUntilState(store, state => state.flexbox.color === "#9400FF");
const onColorPickerHidden = cPicker.tooltip.once("hidden");
focusAndSendKey(spectrum.element.ownerDocument.defaultView, "ESCAPE");
await onColorPickerHidden;
await onColorUpdate;
is(swatch.style.backgroundColor, "rgb(148, 0, 255)",
"The color swatch's background was reverted after ESCAPE.");
});

69
devtools/client/inspector/flexbox/test/browser_flexbox_highlighter_color_picker_on_RETURN.js
View File

@ -1,69 +0,0 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the flexbox highlighter color change in the color picker is committed when
// RETURN is pressed.
const TEST_URI = URL_ROOT + "doc_flexbox_simple.html";
add_task(async function() {
await addTab(TEST_URI);
const { inspector, flexboxInspector, layoutView } = await openLayoutView();
const { document: doc } = flexboxInspector;
const { highlighters, store } = inspector;
const cPicker = layoutView.swatchColorPickerTooltip;
const spectrum = cPicker.spectrum;
const onColorSwatchRendered = waitForDOM(doc,
"#layout-flexbox-container .layout-color-swatch");
await selectNode("#container", inspector);
const [swatch] = await onColorSwatchRendered;
const checkbox = doc.getElementById("flexbox-checkbox-toggle");
info("Checking the initial state of the Flexbox Inspector color picker.");
ok(!checkbox.checked, "Flexbox highlighter toggle is unchecked.");
is(swatch.style.backgroundColor, "rgb(148, 0, 255)",
"The color swatch's background is correct.");
is(store.getState().flexbox.color, "#9400FF", "The flexbox color state is correct.");
info("Toggling ON the flexbox highlighter.");
let onHighlighterShown = highlighters.once("flexbox-highlighter-shown");
const onCheckboxChange = waitUntilState(store, state => state.flexbox.highlighted);
checkbox.click();
await onHighlighterShown;
await onCheckboxChange;
info("Opening the color picker by clicking on the color swatch.");
const onColorPickerReady = cPicker.once("ready");
swatch.click();
await onColorPickerReady;
onHighlighterShown = highlighters.once("flexbox-highlighter-shown", (_, options) => {
info("Checking the flexbox highlighter display settings.");
is(options.color, "#00FF0080", "Flexbox highlighter color is correct.");
});
await simulateColorPickerChange(cPicker, [0, 255, 0, .5]);
await onHighlighterShown;
is(swatch.style.backgroundColor, "rgba(0, 255, 0, 0.5)",
"The color swatch's background was updated.");
info("Pressing RETURN to commit the color change.");
const onColorUpdate = waitUntilState(store, state =>
state.flexbox.color === "#00FF0080");
const onColorPickerHidden = cPicker.tooltip.once("hidden");
focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
await onColorPickerHidden;
await onColorUpdate;
is(swatch.style.backgroundColor, "rgba(0, 255, 0, 0.5)",
"The color swatch's background was kept after RETURN.");
info("Toggling OFF the flexbox highlighter.");
const onHighlighterHidden = highlighters.once("flexbox-highlighter-hidden");
checkbox.click();
await onHighlighterHidden;
});

2
devtools/client/inspector/flexbox/test/doc_flexbox_simple.html
View File

@ -30,7 +30,7 @@
max-width: 250px;
}
</style>
<div id="container" class="container">
<div class="container">
<div class="item">flex item in a row flex container</div>
</div>
<div class="container column">

5
devtools/client/inspector/flexbox/test/head.js
View File

@ -10,11 +10,6 @@ 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/shared/test/shared-redux-head.js",
this);
// Make sure the flexbox inspector is enabled before running the tests.
Services.prefs.setBoolPref("devtools.flexboxinspector.enabled", true);

25
devtools/client/inspector/grids/test/head.js
View File

@ -17,10 +17,31 @@ Services.scriptloader.loadSubScript(
"chrome://mochitests/content/browser/devtools/client/shared/test/shared-redux-head.js",
this);
Services.prefs.setIntPref("devtools.toolbox.footer.height", 350);
registerCleanupFunction(() => {
Services.prefs.clearUserPref("devtools.toolbox.footer.height");
});
const asyncStorage = require("devtools/shared/async-storage");
Services.prefs.setIntPref("devtools.toolbox.footer.height", 350);
/**
* Simulate a color change in a given color picker tooltip.
*
* @param {Spectrum} colorPicker
* The color picker widget.
* @param {Array} newRgba
* Array of the new rgba values to be set in the color widget.
*/
var simulateColorPickerChange = async function(colorPicker, newRgba) {
info("Getting the spectrum colorpicker object");
const spectrum = await colorPicker.spectrum;
info("Setting the new color");
spectrum.rgb = newRgba;
info("Applying the change");
spectrum.updateUI();
spectrum.onChange();
};
registerCleanupFunction(async function() {
Services.prefs.clearUserPref("devtools.toolbox.footer.height");
await asyncStorage.removeItem("gridInspectorHostColors");
});

18
devtools/client/inspector/test/head.js
View File

@ -886,21 +886,3 @@ async function expandContainerByClick(inspector, container) {
await onChildren;
await onUpdated;
}
/**
* Simulate a color change in a given color picker tooltip.
*
* @param {Spectrum} colorPicker
* The color picker widget.
* @param {Array} newRgba
* Array of the new rgba values to be set in the color widget.
*/
async function simulateColorPickerChange(colorPicker, newRgba) {
info("Getting the spectrum colorpicker object");
const spectrum = await colorPicker.spectrum;
info("Setting the new color");
spectrum.rgb = newRgba;
info("Applying the change");
spectrum.updateUI();
spectrum.onChange();
}