--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -1574,17 +1574,17 @@ function getPropertyNameAndValue(node) {
function getShapeToggleActive(node) {
while (true) {
if (!node || !node.classList) {
return null;
}
// Check first for ruleview-computed since it's the deepest
if (node.classList.contains("ruleview-computed") ||
node.classList.contains("ruleview-property")) {
- return node.querySelector(".ruleview-shape.active");
+ return node.querySelector(".ruleview-shapeswatch.active");
}
node = node.parentNode;
}
}
/**
* Get the point associated with a shape point node.
*
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js
@@ -26,17 +26,16 @@ const TEST_URI = `
`;
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield testSimpleMultipleColorChanges(inspector, view);
yield testComplexMultipleColorChanges(inspector, view);
- yield testOverriddenMultipleColorChanges(inspector, view);
});
function* testSimpleMultipleColorChanges(inspector, ruleView) {
yield selectNode("p", inspector);
info("Getting the <p> tag's color property");
let swatch = getRuleViewProperty(ruleView, "p", "color").valueSpan
.querySelector(".ruleview-colorswatch");
@@ -55,16 +54,19 @@ function* testSimpleMultipleColorChanges
];
for (let {rgba, computed} of colors) {
yield simulateColorPickerChange(ruleView, picker, rgba, {
selector: "p",
name: "color",
value: computed
});
}
+
+ is((yield getComputedStyleProperty("p", null, "color")),
+ "rgb(200, 200, 200)", "The color of the P tag is correct");
}
function* testComplexMultipleColorChanges(inspector, ruleView) {
yield selectNode("body", inspector);
info("Getting the <body> tag's color property");
let swatch = getRuleViewProperty(ruleView, "body", "background").valueSpan
.querySelector(".ruleview-colorswatch");
@@ -86,39 +88,12 @@ function* testComplexMultipleColorChange
selector: "body",
name: "background-color",
value: computed
});
}
info("Closing the color picker");
yield hideTooltipAndWaitForRuleViewChanged(picker, ruleView);
+
+ is((yield getComputedStyleProperty("p", null, "color")),
+ "rgb(200, 200, 200)", "The color of the P tag is still correct");
}
-
-function* testOverriddenMultipleColorChanges(inspector, ruleView) {
- yield selectNode("p", inspector);
-
- info("Getting the <body> tag's color property");
- let swatch = getRuleViewProperty(ruleView, "body", "color").valueSpan
- .querySelector(".ruleview-colorswatch");
-
- info("Opening the color picker");
- let picker = ruleView.tooltips.getTooltip("colorPicker");
- let onColorPickerReady = picker.once("ready");
- swatch.click();
- yield onColorPickerReady;
-
- info("Changing the color several times");
- let colors = [
- {rgba: [0, 0, 0, 1], computed: "rgb(0, 0, 0)"},
- {rgba: [100, 100, 100, 1], computed: "rgb(100, 100, 100)"},
- {rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)"}
- ];
- for (let {rgba, computed} of colors) {
- yield simulateColorPickerChange(ruleView, picker, rgba, {
- selector: "body",
- name: "color",
- value: computed
- });
- is((yield getComputedStyleProperty("p", null, "color")),
- "rgb(200, 200, 200)", "The color of the P tag is still correct");
- }
-}
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-revert-on-ESC.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-revert-on-ESC.js
@@ -14,17 +14,16 @@ const TEST_URI = `
}
</style>
`;
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {view} = yield openRuleView();
yield testPressingEscapeRevertsChanges(view);
- yield testPressingEscapeRevertsChangesAndDisables(view);
});
function* testPressingEscapeRevertsChanges(view) {
let {swatch, propEditor, cPicker} = yield openColorPickerAndSelectColor(view,
1, 0, [0, 0, 0, 1], {
selector: "body",
name: "background-color",
value: "rgb(0, 0, 0)"
@@ -44,66 +43,8 @@ function* testPressingEscapeRevertsChang
yield onHidden;
yield onModifications;
yield waitForComputedStyleProperty("body", null, "background-color",
"rgb(237, 237, 237)");
is(propEditor.valueSpan.textContent, "#EDEDED",
"Got expected property value.");
}
-
-function* testPressingEscapeRevertsChangesAndDisables(view) {
- let ruleEditor = getRuleViewRuleEditor(view, 1);
-
- info("Disabling background-color property");
- let textProp = ruleEditor.rule.textProps[0];
- yield togglePropStatus(view, textProp);
-
- ok(textProp.editor.element.classList.contains("ruleview-overridden"),
- "property is overridden.");
- is(textProp.editor.enable.style.visibility, "visible",
- "property enable checkbox is visible.");
- ok(!textProp.editor.enable.getAttribute("checked"),
- "property enable checkbox is not checked.");
- ok(!textProp.editor.prop.enabled,
- "background-color property is disabled.");
- let newValue = yield getRulePropertyValue("background-color");
- is(newValue, "", "background-color should have been unset.");
-
- let {cPicker} = yield openColorPickerAndSelectColor(view,
- 1, 0, [0, 0, 0, 1]);
-
- ok(!textProp.editor.element.classList.contains("ruleview-overridden"),
- "property overridden is not displayed.");
- is(textProp.editor.enable.style.visibility, "hidden",
- "property enable checkbox is hidden.");
-
- let spectrum = cPicker.spectrum;
-
- info("Pressing ESCAPE to close the tooltip");
- let onHidden = cPicker.tooltip.once("hidden");
- let onModifications = view.once("ruleview-changed");
- EventUtils.sendKey("ESCAPE", spectrum.element.ownerDocument.defaultView);
- yield onHidden;
- yield onModifications;
-
- ok(textProp.editor.element.classList.contains("ruleview-overridden"),
- "property is overridden.");
- is(textProp.editor.enable.style.visibility, "visible",
- "property enable checkbox is visible.");
- ok(!textProp.editor.enable.getAttribute("checked"),
- "property enable checkbox is not checked.");
- ok(!textProp.editor.prop.enabled,
- "background-color property is disabled.");
- newValue = yield getRulePropertyValue("background-color");
- is(newValue, "", "background-color should have been unset.");
- is(textProp.editor.valueSpan.textContent, "#EDEDED",
- "Got expected property value.");
-}
-
-function* getRulePropertyValue(name) {
- let propValue = yield executeInContent("Test:GetRulePropertyValue", {
- styleSheetIndex: 0,
- ruleIndex: 0,
- name: name
- });
- return propValue;
-}
--- a/devtools/client/inspector/rules/test/browser_rules_cubicbezier-revert-on-ESC.js
+++ b/devtools/client/inspector/rules/test/browser_rules_cubicbezier-revert-on-ESC.js
@@ -14,17 +14,16 @@ const TEST_URI = `
}
</style>
`;
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {view} = yield openRuleView();
yield testPressingEscapeRevertsChanges(view);
- yield testPressingEscapeRevertsChangesAndDisables(view);
});
function* testPressingEscapeRevertsChanges(view) {
let {propEditor} = yield openCubicBezierAndChangeCoords(view, 1, 0,
[0.1, 2, 0.9, -1], {
selector: "body",
name: "animation-timing-function",
value: "cubic-bezier(0.1, 2, 0.9, -1)"
@@ -36,62 +35,16 @@ function* testPressingEscapeRevertsChang
yield escapeTooltip(view);
yield waitForComputedStyleProperty("body", null, "animation-timing-function",
"linear");
is(propEditor.valueSpan.textContent, "linear",
"Got expected property value.");
}
-function* testPressingEscapeRevertsChangesAndDisables(view) {
- let ruleEditor = getRuleViewRuleEditor(view, 1);
- let textProp = ruleEditor.rule.textProps[0];
- let propEditor = textProp.editor;
-
- info("Disabling animation-timing-function property");
- yield togglePropStatus(view, textProp);
-
- ok(propEditor.element.classList.contains("ruleview-overridden"),
- "property is overridden.");
- is(propEditor.enable.style.visibility, "visible",
- "property enable checkbox is visible.");
- ok(!propEditor.enable.getAttribute("checked"),
- "property enable checkbox is not checked.");
- ok(!propEditor.prop.enabled,
- "animation-timing-function property is disabled.");
- let newValue = yield getRulePropertyValue("animation-timing-function");
- is(newValue, "", "animation-timing-function should have been unset.");
-
- yield openCubicBezierAndChangeCoords(view, 1, 0, [0.1, 2, 0.9, -1]);
-
- yield escapeTooltip(view);
-
- ok(propEditor.element.classList.contains("ruleview-overridden"),
- "property is overridden.");
- is(propEditor.enable.style.visibility, "visible",
- "property enable checkbox is visible.");
- ok(!propEditor.enable.getAttribute("checked"),
- "property enable checkbox is not checked.");
- ok(!propEditor.prop.enabled,
- "animation-timing-function property is disabled.");
- newValue = yield getRulePropertyValue("animation-timing-function");
- is(newValue, "", "animation-timing-function should have been unset.");
- is(propEditor.valueSpan.textContent, "linear",
- "Got expected property value.");
-}
-
-function* getRulePropertyValue(name) {
- let propValue = yield executeInContent("Test:GetRulePropertyValue", {
- styleSheetIndex: 0,
- ruleIndex: 0,
- name: name
- });
- return propValue;
-}
-
function* escapeTooltip(view) {
info("Pressing ESCAPE to close the tooltip");
let bezierTooltip = view.tooltips.getTooltip("cubicBezier");
let widget = yield bezierTooltip.widget;
let onHidden = bezierTooltip.tooltip.once("hidden");
let onModifications = view.once("ruleview-changed");
focusAndSendKey(widget.parent.ownerDocument.defaultView, "ESCAPE");
--- a/devtools/client/inspector/rules/test/browser_rules_filtereditor-revert-on-ESC.js
+++ b/devtools/client/inspector/rules/test/browser_rules_filtereditor-revert-on-ESC.js
@@ -7,17 +7,16 @@
// ESC is pressed
const TEST_URL = URL_ROOT + "doc_filter.html";
add_task(function* () {
yield addTab(TEST_URL);
let {view} = yield openRuleView();
yield testPressingEscapeRevertsChanges(view);
- yield testPressingEscapeRevertsChangesAndDisables(view);
});
function* testPressingEscapeRevertsChanges(view) {
let ruleEditor = getRuleViewRuleEditor(view, 1);
let propEditor = ruleEditor.rule.textProps[0].editor;
let swatch = propEditor.valueSpan.querySelector(".ruleview-filterswatch");
yield clickOnFilterSwatch(swatch, view);
@@ -30,69 +29,16 @@ function* testPressingEscapeRevertsChang
yield pressEscapeToCloseTooltip(view);
yield waitForComputedStyleProperty("body", null, "filter",
"blur(2px) contrast(2)");
is(propEditor.valueSpan.textContent, "blur(2px) contrast(2)",
"Got expected property value.");
}
-function* testPressingEscapeRevertsChangesAndDisables(view) {
- let ruleEditor = getRuleViewRuleEditor(view, 1);
- let propEditor = ruleEditor.rule.textProps[0].editor;
-
- info("Disabling filter property");
- let onRuleViewChanged = view.once("ruleview-changed");
- propEditor.enable.click();
- yield onRuleViewChanged;
-
- ok(propEditor.element.classList.contains("ruleview-overridden"),
- "property is overridden.");
- is(propEditor.enable.style.visibility, "visible",
- "property enable checkbox is visible.");
- ok(!propEditor.enable.getAttribute("checked"),
- "property enable checkbox is not checked.");
- ok(!propEditor.prop.enabled,
- "filter property is disabled.");
- let newValue = yield getRulePropertyValue("filter");
- is(newValue, "", "filter should have been unset.");
-
- let swatch = propEditor.valueSpan.querySelector(".ruleview-filterswatch");
- yield clickOnFilterSwatch(swatch, view);
-
- ok(!propEditor.element.classList.contains("ruleview-overridden"),
- "property overridden is not displayed.");
- is(propEditor.enable.style.visibility, "hidden",
- "property enable checkbox is hidden.");
-
- yield setValueInFilterWidget("blur(2px)", view);
- yield pressEscapeToCloseTooltip(view);
-
- ok(propEditor.element.classList.contains("ruleview-overridden"),
- "property is overridden.");
- is(propEditor.enable.style.visibility, "visible",
- "property enable checkbox is visible.");
- ok(!propEditor.enable.getAttribute("checked"),
- "property enable checkbox is not checked.");
- ok(!propEditor.prop.enabled, "filter property is disabled.");
- newValue = yield getRulePropertyValue("filter");
- is(newValue, "", "filter should have been unset.");
- is(propEditor.valueSpan.textContent, "blur(2px) contrast(2)",
- "Got expected property value.");
-}
-
-function* getRulePropertyValue(name) {
- let propValue = yield executeInContent("Test:GetRulePropertyValue", {
- styleSheetIndex: 0,
- ruleIndex: 0,
- name: name
- });
- return propValue;
-}
-
function* clickOnFilterSwatch(swatch, view) {
info("Clicking on a css filter swatch to open the tooltip");
// Clicking on a cssfilter swatch sets the current filter value in the tooltip
// which, in turn, makes the FilterWidget emit an "updated" event that causes
// the rule-view to refresh. So we must wait for the ruleview-changed event.
let onRuleViewChanged = view.once("ruleview-changed");
swatch.click();
--- a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_01.js
@@ -22,17 +22,17 @@ const HIGHLIGHTER_TYPE = "ShapesHighligh
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
let highlighters = view.highlighters;
yield selectNode("#shape", inspector);
let container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
- let shapesToggle = container.querySelector(".ruleview-shape");
+ let shapesToggle = container.querySelector(".ruleview-shapeswatch");
info("Checking the initial state of the CSS shape toggle in the rule-view.");
ok(shapesToggle, "Shapes highlighter toggle is visible.");
ok(!shapesToggle.classList.contains("active"),
"Shapes highlighter toggle button is not active.");
ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
"No CSS shapes highlighter exists in the rule-view.");
ok(!highlighters.shapesHighlighterShown, "No CSS shapes highlighter is shown.");
--- a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_02.js
@@ -1,72 +1,45 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
-// Test toggling the shapes highlighter in the rule view from an overridden
-// declaration.
+// Test that the swatch to toggle a shapes highlighter does not show up
+// on overwritten properties.
const TEST_URI = `
<style type='text/css'>
#shape {
width: 800px;
height: 800px;
clip-path: circle(25%);
}
div {
clip-path: circle(30%);
}
</style>
<div id="shape"></div>
`;
-const HIGHLIGHTER_TYPE = "ShapesHighlighter";
-
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
- let highlighters = view.highlighters;
yield selectNode("#shape", inspector);
let container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
- let shapeToggle = container.querySelector(".ruleview-shape");
+ let shapeToggle = container.querySelector(".ruleview-shapeswatch");
+ let shapeToggleStyle = getComputedStyle(shapeToggle);
let overriddenContainer = getRuleViewProperty(view, "div", "clip-path").valueSpan;
- let overriddenShapeToggle = overriddenContainer.querySelector(".ruleview-shape");
+ let overriddenShapeToggle = overriddenContainer.querySelector(".ruleview-shapeswatch");
+ let overriddenShapeToggleStyle = getComputedStyle(overriddenShapeToggle);
- info("Checking the initial state of the CSS shapes toggle in the rule-view.");
- ok(shapeToggle && overriddenShapeToggle, "Shapes highlighter toggles are visible.");
+ ok(shapeToggle && overriddenShapeToggle,
+ "Shapes highlighter toggles exist in the DOM.");
ok(!shapeToggle.classList.contains("active") &&
!overriddenShapeToggle.classList.contains("active"),
"Shapes highlighter toggle buttons are not active.");
- ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
- "No CSS shapes highlighter exists in the rule-view.");
- ok(!highlighters.shapesHighlighterShown, "No CSS shapes highlighter is shown.");
- info("Toggling ON the shapes highlighter from the overridden rule in the rule-view.");
- let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
- overriddenShapeToggle.click();
- yield onHighlighterShown;
-
- info("Checking the shapes highlighter is created and toggle buttons are active in " +
- "the rule-view.");
- ok(shapeToggle.classList.contains("active") &&
- overriddenShapeToggle.classList.contains("active"),
- "shapes highlighter toggle is active.");
- ok(highlighters.highlighters[HIGHLIGHTER_TYPE],
- "CSS shapes highlighter created in the rule-view.");
- ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
-
- info("Toggling off the shapes highlighter from the normal shapes declaration in the " +
- "rule-view.");
- let onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
- shapeToggle.click();
- yield onHighlighterHidden;
-
- info("Checking the CSS shapes highlighter is not shown and toggle buttons are not " +
- "active in the rule-view.");
- ok(!shapeToggle.classList.contains("active") &&
- !overriddenShapeToggle.classList.contains("active"),
- "shapes highlighter toggle buttons are not active.");
- ok(!highlighters.shapesHighlighterShown, "No CSS shapes highlighter is shown.");
+ isnot(shapeToggleStyle.display, "none", "Shape highlighter toggle is not hidden");
+ is(overriddenShapeToggleStyle.display, "none",
+ "Overwritten shape highlighter toggle is not visible");
});
--- a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_03.js
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_03.js
@@ -23,17 +23,17 @@ const HIGHLIGHTER_TYPE = "ShapesHighligh
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
let highlighters = view.highlighters;
info("Selecting the first shape container.");
yield selectNode("#shape1", inspector);
let container = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
- let shapeToggle = container.querySelector(".ruleview-shape");
+ let shapeToggle = container.querySelector(".ruleview-shapeswatch");
info("Checking the state of the CSS shape toggle for the first shape container " +
"in the rule-view.");
ok(shapeToggle, "shape highlighter toggle is visible.");
ok(!shapeToggle.classList.contains("active"),
"shape highlighter toggle button is not active.");
ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
"No CSS shape highlighter exists in the rule-view.");
@@ -52,17 +52,17 @@ add_task(function* () {
ok(highlighters.highlighters[HIGHLIGHTER_TYPE],
"CSS shapes highlighter created in the rule-view.");
ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
info("Selecting the second shapes container.");
yield selectNode("#shape2", inspector);
let firstShapesHighlighterShown = highlighters.shapesHighlighterShown;
container = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
- shapeToggle = container.querySelector(".ruleview-shape");
+ shapeToggle = container.querySelector(".ruleview-shapeswatch");
info("Checking the state of the CSS shapes toggle for the second shapes container " +
"in the rule-view.");
ok(shapeToggle, "shapes highlighter toggle is visible.");
ok(!shapeToggle.classList.contains("active"),
"shapes highlighter toggle button is not active.");
ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is still shown.");
@@ -77,16 +77,16 @@ add_task(function* () {
ok(shapeToggle.classList.contains("active"),
"shapes highlighter toggle is active.");
ok(highlighters.shapesHighlighterShown != firstShapesHighlighterShown,
"shapes highlighter for the second shapes container is shown.");
info("Selecting the first shapes container.");
yield selectNode("#shape1", inspector);
container = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
- shapeToggle = container.querySelector(".ruleview-shape");
+ shapeToggle = container.querySelector(".ruleview-shapeswatch");
info("Checking the state of the CSS shapes toggle for the first shapes container " +
"in the rule-view.");
ok(shapeToggle, "shapes highlighter toggle is visible.");
ok(!shapeToggle.classList.contains("active"),
"shapes highlighter toggle button is not active.");
});
--- a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_04.js
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_04.js
@@ -20,27 +20,27 @@ const TEST_URI = `
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
let highlighters = view.highlighters;
yield selectNode("#shape", inspector);
let container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
- let shapeToggle = container.querySelector(".ruleview-shape");
+ let shapeToggle = container.querySelector(".ruleview-shapeswatch");
info("Toggling ON the CSS shape highlighter from the rule-view.");
let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
shapeToggle.click();
yield onHighlighterShown;
info("Edit the clip-path property to ellipse.");
let editor = yield focusEditableField(view, container, 30);
let onDone = view.once("ruleview-changed");
editor.input.value = "ellipse(30% 20%);";
EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
yield onDone;
info("Check the shape highlighter and shape toggle button are still visible.");
- shapeToggle = container.querySelector(".ruleview-shape");
+ shapeToggle = container.querySelector(".ruleview-shapeswatch");
ok(shapeToggle, "Shape highlighter toggle is visible.");
ok(highlighters.shapesHighlighterShown, "CSS shape highlighter is shown.");
});
--- a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_05.js
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_05.js
@@ -20,17 +20,17 @@ const TEST_URI = `
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view, testActor} = yield openRuleView();
let highlighters = view.highlighters;
yield selectNode("#shape", inspector);
let container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
- let shapeToggle = container.querySelector(".ruleview-shape");
+ let shapeToggle = container.querySelector(".ruleview-shapeswatch");
info("Toggling ON the CSS shapes highlighter from the rule-view.");
let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
shapeToggle.click();
yield onHighlighterShown;
ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
let onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
--- a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_06.js
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_06.js
@@ -22,20 +22,20 @@ const TEST_URI = `
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
let highlighters = view.highlighters;
yield selectNode("#shape1", inspector);
let clipPathContainer = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
- let clipPathShapeToggle = clipPathContainer.querySelector(".ruleview-shape");
+ let clipPathShapeToggle = clipPathContainer.querySelector(".ruleview-shapeswatch");
let shapeOutsideContainer = getRuleViewProperty(view, ".shape",
"shape-outside").valueSpan;
- let shapeOutsideToggle = shapeOutsideContainer.querySelector(".ruleview-shape");
+ let shapeOutsideToggle = shapeOutsideContainer.querySelector(".ruleview-shapeswatch");
info("Toggling ON the CSS shapes highlighter for clip-path from the rule-view.");
let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
clipPathShapeToggle.click();
yield onHighlighterShown;
ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
ok(clipPathShapeToggle.classList.contains("active"),
"clip-path toggle button is active.");
@@ -50,29 +50,29 @@ add_task(function* () {
ok(!clipPathShapeToggle.classList.contains("active"),
"clip-path toggle button is not active.");
ok(shapeOutsideToggle.classList.contains("active"),
"shape-outside toggle button is active.");
info("Selecting the second shapes container.");
yield selectNode("#shape2", inspector);
clipPathContainer = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
- clipPathShapeToggle = clipPathContainer.querySelector(".ruleview-shape");
+ clipPathShapeToggle = clipPathContainer.querySelector(".ruleview-shapeswatch");
shapeOutsideContainer = getRuleViewProperty(view, ".shape",
"shape-outside").valueSpan;
- shapeOutsideToggle = shapeOutsideContainer.querySelector(".ruleview-shape");
+ shapeOutsideToggle = shapeOutsideContainer.querySelector(".ruleview-shapeswatch");
ok(!clipPathShapeToggle.classList.contains("active"),
"clip-path toggle button is not active.");
ok(!shapeOutsideToggle.classList.contains("active"),
"shape-outside toggle button is not active.");
info("Selecting the first shapes container.");
yield selectNode("#shape1", inspector);
clipPathContainer = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
- clipPathShapeToggle = clipPathContainer.querySelector(".ruleview-shape");
+ clipPathShapeToggle = clipPathContainer.querySelector(".ruleview-shapeswatch");
shapeOutsideContainer = getRuleViewProperty(view, ".shape",
"shape-outside").valueSpan;
- shapeOutsideToggle = shapeOutsideContainer.querySelector(".ruleview-shape");
+ shapeOutsideToggle = shapeOutsideContainer.querySelector(".ruleview-shapeswatch");
ok(!clipPathShapeToggle.classList.contains("active"),
"clip-path toggle button is not active.");
ok(shapeOutsideToggle.classList.contains("active"),
"shape-outside toggle button is active.");
});
--- a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_07.js
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_07.js
@@ -21,17 +21,17 @@ const HIGHLIGHTER_TYPE = "ShapesHighligh
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
let highlighters = view.highlighters;
yield selectNode("#shape", inspector);
let container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
- let shapesToggle = container.querySelector(".ruleview-shape");
+ let shapesToggle = container.querySelector(".ruleview-shapeswatch");
info("Checking the initial state of the CSS shape toggle in the rule-view.");
ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
"No CSS shapes highlighter exists in the rule-view.");
ok(!highlighters.shapesHighlighterShown, "No CSS shapes highlighter is shown.");
info("Toggling ON the CSS shapes highlighter with transform mode on.");
let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
--- a/devtools/client/inspector/rules/views/text-property-editor.js
+++ b/devtools/client/inspector/rules/views/text-property-editor.js
@@ -24,16 +24,17 @@ const HTML_NS = "http://www.w3.org/1999/
const SHARED_SWATCH_CLASS = "ruleview-swatch";
const COLOR_SWATCH_CLASS = "ruleview-colorswatch";
const BEZIER_SWATCH_CLASS = "ruleview-bezierswatch";
const FILTER_SWATCH_CLASS = "ruleview-filterswatch";
const ANGLE_SWATCH_CLASS = "ruleview-angleswatch";
const INSET_POINT_TYPES = ["top", "right", "bottom", "left"];
const FONT_FAMILY_CLASS = "ruleview-font-family";
+const SHAPE_SWATCH_CLASS = "ruleview-shapeswatch";
/*
* An actionable element is an element which on click triggers a specific action
* (e.g. shows a color tooltip, opens a link, …).
*/
const ACTIONABLE_ELEMENTS_SELECTORS = [
`.${COLOR_SWATCH_CLASS}`,
`.${BEZIER_SWATCH_CLASS}`,
@@ -375,16 +376,17 @@ TextPropertyEditor.prototype = {
bezierSwatchClass: SHARED_SWATCH_CLASS + " " + BEZIER_SWATCH_CLASS,
colorClass: "ruleview-color",
colorSwatchClass: SHARED_SWATCH_CLASS + " " + COLOR_SWATCH_CLASS,
filterClass: "ruleview-filter",
filterSwatchClass: SHARED_SWATCH_CLASS + " " + FILTER_SWATCH_CLASS,
flexClass: "ruleview-flex",
gridClass: "ruleview-grid",
shapeClass: "ruleview-shape",
+ shapeSwatchClass: SHARED_SWATCH_CLASS + " " + SHAPE_SWATCH_CLASS,
defaultColorType: !propDirty,
urlClass: "theme-link",
fontFamilyClass: FONT_FAMILY_CLASS,
baseURI: this.sheetHref,
unmatchedVariableClass: "ruleview-unmatched-variable",
matchedVariableClass: "ruleview-variable",
isVariableInUse: varName => this.rule.elementStyle.getVariable(varName),
};
@@ -502,17 +504,17 @@ TextPropertyEditor.prototype = {
if (gridToggle) {
gridToggle.setAttribute("title", l10n("rule.gridToggle.tooltip"));
if (this.ruleView.highlighters.gridHighlighterShown ===
this.ruleView.inspector.selection.nodeFront) {
gridToggle.classList.add("active");
}
}
- let shapeToggle = this.valueSpan.querySelector(".ruleview-shape");
+ let shapeToggle = this.valueSpan.querySelector(".ruleview-shapeswatch");
if (shapeToggle) {
let mode = "css" + name.split("-").map(s => {
return s[0].toUpperCase() + s.slice(1);
}).join("");
shapeToggle.setAttribute("data-mode", mode);
let { highlighters, inspector } = this.ruleView;
if (highlighters.shapesHighlighterShown === inspector.selection.nodeFront &&
@@ -1038,17 +1040,17 @@ TextPropertyEditor.prototype = {
*
* @param {Event} event
* The "hover-shape-point" event.
* @param {String} point
* The point to highlight.
*/
_onHoverShapePoint: function (event, point) {
// If there is no shape toggle, or it is not active, return.
- let shapeToggle = this.valueSpan.querySelector(".ruleview-shape.active");
+ let shapeToggle = this.valueSpan.querySelector(".ruleview-shapeswatch.active");
if (!shapeToggle) {
return;
}
let view = this.ruleView;
let { highlighters } = view;
let ruleViewEl = view.element;
let selector = `.ruleview-shape-point.active`;
--- a/devtools/client/inspector/shared/highlighters-overlay.js
+++ b/devtools/client/inspector/shared/highlighters-overlay.js
@@ -162,18 +162,18 @@ class HighlightersOverlay {
let isShown = await highlighter.show(node, options);
if (!isShown) {
return;
}
this.shapesHighlighterShown = node;
let { mode } = options;
- this._toggleRuleViewIcon(node, false, ".ruleview-shape");
- this._toggleRuleViewIcon(node, true, `.ruleview-shape[data-mode='${mode}']`);
+ this._toggleRuleViewIcon(node, false, ".ruleview-shapeswatch");
+ this._toggleRuleViewIcon(node, true, `.ruleview-shapeswatch[data-mode='${mode}']`);
try {
// Save shapes highlighter state.
let { url } = this.inspector.target;
let selector = await node.getUniqueSelector();
this.state.shapes = { selector, options, url };
this.shapesHighlighterShown = node;
this.emit("shapes-highlighter-shown", node, options);
@@ -188,17 +188,17 @@ class HighlightersOverlay {
* @param {NodeFront} node
* The NodeFront of the element with a shape to unhighlight.
*/
async hideShapesHighlighter(node) {
if (!this.shapesHighlighterShown || !this.highlighters.ShapesHighlighter) {
return;
}
- this._toggleRuleViewIcon(node, false, ".ruleview-shape");
+ this._toggleRuleViewIcon(node, false, ".ruleview-shapeswatch");
await this.highlighters.ShapesHighlighter.hide();
this.emit("shapes-highlighter-hidden", this.shapesHighlighterShown,
this.state.shapes.options);
this.shapesHighlighterShown = null;
this.state.shapes = {};
}
@@ -718,17 +718,17 @@ class HighlightersOverlay {
/**
* Does the current clicked node have the shapes highlighter toggle in the
* rule-view.
*
* @param {DOMNode} node
* @return {Boolean}
*/
_isRuleViewShape(node) {
- return this.isRuleView(node) && node.classList.contains("ruleview-shape");
+ return this.isRuleView(node) && node.classList.contains("ruleview-shapeswatch");
}
/**
* Is the current hovered node a css transform property value in the rule-view.
*
* @param {Object} nodeInfo
* @return {Boolean}
*/
--- a/devtools/client/inspector/shared/node-types.js
+++ b/devtools/client/inspector/shared/node-types.js
@@ -2,17 +2,17 @@
/* vim: set ts=2 et sw=2 tw=80: */
/* 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";
/**
- * Types of nodes used in the rule and omputed view.
+ * Types of nodes used in the rule and computed view.
*/
exports.VIEW_NODE_SELECTOR_TYPE = 1;
exports.VIEW_NODE_PROPERTY_TYPE = 2;
exports.VIEW_NODE_VALUE_TYPE = 3;
exports.VIEW_NODE_IMAGE_URL_TYPE = 4;
exports.VIEW_NODE_LOCATION_TYPE = 5;
exports.VIEW_NODE_SHAPE_POINT_TYPE = 6;
--- a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js
@@ -22,17 +22,17 @@ add_task(function* () {
yield highlightFromRuleView(inspector, view, highlighters, testActor);
yield highlightFromHighlighter(view, highlighters, testActor, helper);
});
function* highlightFromRuleView(inspector, view, highlighters, testActor) {
yield selectNode("#polygon", inspector);
yield toggleShapesHighlighter(view, highlighters, "#polygon", "clip-path", true);
let container = getRuleViewProperty(view, "#polygon", "clip-path").valueSpan;
- let shapesToggle = container.querySelector(".ruleview-shape");
+ let shapesToggle = container.querySelector(".ruleview-shapeswatch");
let highlighterFront = highlighters.highlighters[HIGHLIGHTER_TYPE];
let markerHidden = yield testActor.getHighlighterNodeAttribute(
"shapes-marker-hover", "hidden", highlighterFront);
ok(markerHidden, "Hover marker on highlighter is not visible");
info("Hover over point 0 in rule view");
let pointSpan = container.querySelector(".ruleview-shape-point[data-point='0']");
--- a/devtools/client/inspector/test/head.js
+++ b/devtools/client/inspector/test/head.js
@@ -824,17 +824,17 @@ function* getDisplayedNodeTextContent(se
* @param {String} property
* The name of the property
* @param {Boolean} show
* If true, the shapes highlighter is being shown. If false, it is being hidden
*/
function* toggleShapesHighlighter(view, highlighters, selector, property, show) {
info("Toggle shapes highlighter");
let container = getRuleViewProperty(view, selector, property).valueSpan;
- let shapesToggle = container.querySelector(".ruleview-shape");
+ let shapesToggle = container.querySelector(".ruleview-shapeswatch");
if (show) {
let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
shapesToggle.click();
yield onHighlighterShown;
} else {
let onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
shapesToggle.click();
yield onHighlighterHidden;
--- a/devtools/client/shared/output-parser.js
+++ b/devtools/client/shared/output-parser.js
@@ -612,24 +612,26 @@ OutputParser.prototype = {
}, {
prefix: "inset(",
coordParser: this._addInsetPointNodes.bind(this)
}];
let container = this._createNode("span", {});
let toggle = this._createNode("span", {
- class: options.shapeClass
+ class: options.shapeSwatchClass
});
for (let { prefix, coordParser } of shapeTypes) {
if (shape.includes(prefix)) {
let coordsBegin = prefix.length;
let coordsEnd = shape.lastIndexOf(")");
- let valContainer = this._createNode("span", {});
+ let valContainer = this._createNode("span", {
+ class: options.shapeClass
+ });
container.appendChild(toggle);
appendText(valContainer, shape.substring(0, coordsBegin));
let coordsString = shape.substring(coordsBegin, coordsEnd);
valContainer = coordParser(coordsString, valContainer);
@@ -1513,17 +1515,19 @@ OutputParser.prototype = {
* - colorSwatchClass: "" // The class to use for color swatches.
* - filterSwatch: false // A special case for parsing a
* // "filter" property, causing the
* // parser to skip the call to
* // _wrapFilter. Used only for
* // previewing with the filter swatch.
* - flexClass: "" // The class to use for the flex icon.
* - gridClass: "" // The class to use for the grid icon.
- * - shapeClass: "" // The class to use for the shape icon.
+ * - shapeClass: "" // The class to use for the shape value
+ * // that follows the swatch.
+ * - shapeSwatchClass: "" // The class to use for the shape swatch.
* - supportsColor: false // Does the CSS property support colors?
* - urlClass: "" // The class to be used for url() links.
* - fontFamilyClass: "" // The class to be used for font families.
* - baseURI: undefined // A string used to resolve
* // relative links.
* - isVariableInUse // A function taking a single
* // argument, the name of a variable.
* // This should return the variable's
@@ -1543,16 +1547,17 @@ OutputParser.prototype = {
bezierClass: "",
bezierSwatchClass: "",
colorClass: "",
colorSwatchClass: "",
filterSwatch: false,
flexClass: "",
gridClass: "",
shapeClass: "",
+ shapeSwatchClass: "",
supportsColor: false,
urlClass: "",
fontFamilyClass: "",
baseURI: undefined,
isVariableInUse: null,
unmatchedVariableClass: null,
};
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -451,18 +451,17 @@
}
.ruleview-overridden-item:last-child:after {
display: none;
}
.ruleview-flex,
.ruleview-grid,
-.ruleview-swatch,
-.ruleview-shape {
+.ruleview-swatch {
cursor: pointer;
border-radius: 50%;
width: 1em;
height: 1em;
vertical-align: middle;
/* align the swatch with its value */
margin-top: -1px;
margin-inline-end: 5px;
@@ -478,24 +477,16 @@
background-size: 1em;
}
.ruleview-grid {
background: url("chrome://devtools/skin/images/grid.svg");
border-radius: 0;
}
-.ruleview-shape {
- background: url("chrome://devtools/skin/images/tool-shadereditor.svg");
- -moz-context-properties: fill;
- fill: var(--rule-shape-toggle-color);
- border-radius: 0;
- background-size: 1em;
-}
-
.ruleview-shape-point.active {
background-color: var(--rule-highlight-background-color);
}
.ruleview-colorswatch::before {
content: '';
background-color: #eee;
background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
@@ -521,27 +512,47 @@
background-size: 1em;
}
.ruleview-angleswatch {
background: url("chrome://devtools/skin/images/angle-swatch.svg");
background-size: 1em;
}
+.ruleview-shapeswatch {
+ background: url("chrome://devtools/skin/images/tool-shadereditor.svg");
+ -moz-context-properties: fill;
+ fill: var(--rule-shape-toggle-color);
+ border-radius: 0;
+ background-size: 1em;
+ box-shadow: none;
+}
+
@media (min-resolution: 1.1dppx) {
.ruleview-bezierswatch {
background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png");
background-size: 1em;
}
}
.ruleview-overridden {
text-decoration: line-through;
}
+/**
+ * Hide swatches (tool icons) from properties that are overwritten by higher specificity * rules.
+ * .ruleview-swatch is a base class for many tool swatches (shapes, color, bezier curves)
+ * .ruleview-flex and .ruleview-grid are custom
+ */
+.ruleview-overridden .ruleview-flex,
+.ruleview-overridden .ruleview-grid,
+.ruleview-overridden .ruleview-swatch {
+ display: none;
+}
+
.theme-light .ruleview-overridden {
text-decoration-color: var(--theme-content-color3);
}
.ruleview-font-family.used-font {
text-decoration: underline;
}
@@ -625,17 +636,17 @@
.ruleview-selectorhighlighter:hover {
filter: var(--theme-icon-checked-filter);
}
.ruleview-flex.active,
.ruleview-grid.active,
.ruleview-selectorhighlighter:active,
.ruleview-selectorhighlighter.highlighted,
-.ruleview-shape.active {
+.ruleview-shapeswatch.active {
filter: var(--theme-icon-checked-filter) brightness(0.9);
}
#ruleview-add-rule-button::before {
background-image: url("chrome://devtools/skin/images/add.svg");
}
#pseudo-class-panel-toggle::before {