diff options
Diffstat (limited to 'devtools/client/inspector/rules')
10 files changed, 117 insertions, 37 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-contrast-ratio.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-contrast-ratio.js index 6bdb9dd9d3..42a0f86904 100644 --- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-contrast-ratio.js +++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-contrast-ratio.js @@ -122,11 +122,7 @@ async function checkColorPickerConstrastData({ expectedContrastValueScore, expectContrastRange = false, expectedMinContrastValueResult, - expectedMinContrastValueTitle, - expectedMinContrastValueScore, expectedMaxContrastValueResult, - expectedMaxContrastValueTitle, - expectedMaxContrastValueScore, }) { info(`Checking color picker: "${label}"`); const cPicker = view.tooltips.getTooltip("colorPicker"); diff --git a/devtools/client/inspector/rules/test/browser_rules_container-queries.js b/devtools/client/inspector/rules/test/browser_rules_container-queries.js index 1a1857be05..0e866c2a7a 100644 --- a/devtools/client/inspector/rules/test/browser_rules_container-queries.js +++ b/devtools/client/inspector/rules/test/browser_rules_container-queries.js @@ -264,13 +264,12 @@ async function assertQueryContainerTooltip({ expectedHeaderText, expectedBodyText, }) { - const tooltipTriggerEl = getRuleViewAncestorRulesDataElementByIndex( - view, - ruleIndex - ).querySelector(".container-query-declaration"); + const parent = getRuleViewAncestorRulesDataElementByIndex(view, ruleIndex); + const highlighterTriggerEl = parent.querySelector(".open-inspector"); + const tooltipTriggerEl = parent.querySelector(".container-query-declaration"); // Ensure that the element can be targetted from EventUtils. - tooltipTriggerEl.scrollIntoView(); + parent.scrollIntoView(); const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } = getHighlighterTestHelpers(inspector); @@ -280,17 +279,35 @@ async function assertQueryContainerTooltip({ ); const tooltip = view.tooltips.getTooltip("interactiveTooltip"); + + info("synthesizing mousemove on open-inspector icon: " + tooltip.isVisible()); + EventUtils.synthesizeMouseAtCenter( + highlighterTriggerEl, + { type: "mousemove" }, + highlighterTriggerEl.ownerDocument.defaultView + ); + + await onNodeHighlight; + info("node was highlighted"); + + const onNodeUnhighlight = waitForHighlighterTypeHidden( + inspector.highlighters.TYPES.BOXMODEL + ); + const onTooltipReady = tooltip.once("shown"); - info("synthesizing mousemove: " + tooltip.isVisible()); + + info("synthesizing mousemove on tooltip el: " + tooltip.isVisible()); EventUtils.synthesizeMouseAtCenter( tooltipTriggerEl, { type: "mousemove" }, tooltipTriggerEl.ownerDocument.defaultView ); + await onTooltipReady; info("tooltip was shown"); - await onNodeHighlight; - info("node was highlighted"); + + await onNodeUnhighlight; + info("highlighter was hidden"); is( tooltip.panel.querySelector("header").textContent, @@ -305,9 +322,7 @@ async function assertQueryContainerTooltip({ info("Hide the tooltip"); const onHidden = tooltip.once("hidden"); - const onNodeUnhighlight = waitForHighlighterTypeHidden( - inspector.highlighters.TYPES.BOXMODEL - ); + // Move the mouse elsewhere to hide the tooltip EventUtils.synthesizeMouse( tooltipTriggerEl.ownerDocument.body, @@ -317,5 +332,4 @@ async function assertQueryContainerTooltip({ tooltipTriggerEl.ownerDocument.defaultView ); await onHidden; - await onNodeUnhighlight; } diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-size-property-dragging.js b/devtools/client/inspector/rules/test/browser_rules_edit-size-property-dragging.js index c95506de50..a10e7a6625 100644 --- a/devtools/client/inspector/rules/test/browser_rules_edit-size-property-dragging.js +++ b/devtools/client/inspector/rules/test/browser_rules_edit-size-property-dragging.js @@ -335,12 +335,11 @@ async function runIncrementTest(editor, view, tests) { * @param {String} options.description * @param {Boolean} options.ctrl Small increment key * @param {Boolean} options.alt Small increment key for macosx - * @param {Boolean} option.deadzoneIncluded True if the provided distance + * @param {Boolean} options.deadzoneIncluded True if the provided distance * accounts for the deadzone. When false, the deadzone will automatically * be added to the distance. - * @param {CSSRuleView} view */ -async function testIncrement(editor, options, view) { +async function testIncrement(editor, options) { info("Running subtest: " + options.description); editor.valueSpan.scrollIntoView(); diff --git a/devtools/client/inspector/rules/test/browser_rules_large_base64_background_image.js b/devtools/client/inspector/rules/test/browser_rules_large_base64_background_image.js index 0373d29321..717cc9bfb5 100644 --- a/devtools/client/inspector/rules/test/browser_rules_large_base64_background_image.js +++ b/devtools/client/inspector/rules/test/browser_rules_large_base64_background_image.js @@ -43,10 +43,20 @@ add_task(async function () { const { inspector } = await openInspectorForURL(TEST_URL); const view = selectRuleView(inspector); - await selectNode("body", inspector); - - const propertyValues = view.styleDocument.querySelectorAll( - ".ruleview-propertyvalue" + let propertyValues; + await waitFor( + async () => { + await selectNode("body", inspector); + propertyValues = view.styleDocument.querySelectorAll( + ".ruleview-propertyvalue" + ); + return propertyValues.length == 2; + }, + "Timed out while waiting for body element properties", + // Use default interval. + 10, + // reduce maxTries to 50 since `selectNode` is already async. + 50 ); is(propertyValues.length, 2, "Ruleview has 2 propertyvalue elements"); diff --git a/devtools/client/inspector/rules/test/browser_rules_original-source-link.js b/devtools/client/inspector/rules/test/browser_rules_original-source-link.js index 9d440659a2..473d0037b0 100644 --- a/devtools/client/inspector/rules/test/browser_rules_original-source-link.js +++ b/devtools/client/inspector/rules/test/browser_rules_original-source-link.js @@ -64,7 +64,7 @@ async function testClickingLink(toolbox, view) { function waitForOriginalStyleSheetEditorSelection(toolbox) { const panel = toolbox.getCurrentPanel(); - return new Promise((resolve, reject) => { + return new Promise(resolve => { const maybeContinue = editor => { // The style editor selects the first sheet at first load before // selecting the desired sheet. diff --git a/devtools/client/inspector/rules/test/browser_rules_original-source-link2.js b/devtools/client/inspector/rules/test/browser_rules_original-source-link2.js index 87963f9ec5..6e8faecc33 100644 --- a/devtools/client/inspector/rules/test/browser_rules_original-source-link2.js +++ b/devtools/client/inspector/rules/test/browser_rules_original-source-link2.js @@ -61,7 +61,7 @@ async function testClickingLink(toolbox, view) { function waitForOriginalStyleSheetEditorSelection(toolbox) { const panel = toolbox.getCurrentPanel(); - return new Promise((resolve, reject) => { + return new Promise(resolve => { const maybeContinue = editor => { // The style editor selects the first sheet at first load before // selecting the desired sheet. diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js index f170cf1591..fcd0302624 100644 --- a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js +++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js @@ -11,6 +11,7 @@ const PSEUDO_PREF = "devtools.inspector.show_pseudo_elements"; add_task(async function () { await pushPref(PSEUDO_PREF, true); await pushPref("dom.customHighlightAPI.enabled", true); + await pushPref("layout.css.modern-range-pseudos.enabled", true); await addTab(TEST_URI); const { inspector, view } = await openRuleView(); @@ -24,6 +25,7 @@ add_task(async function () { await testList(inspector, view); await testDialogBackdrop(inspector, view); await testCustomHighlight(inspector, view); + await testSlider(inspector, view); }); async function testTopLeft(inspector, view) { @@ -344,6 +346,36 @@ async function testCustomHighlight(inspector, view) { assertGutters(view); } +async function testSlider(inspector, view) { + await assertPseudoElementRulesNumbers( + "input[type=range].slider", + inspector, + view, + { + elementRulesNb: 3, + sliderFillRulesNb: 1, + sliderThumbRulesNb: 1, + sliderTrackRulesNb: 1, + } + ); + assertGutters(view); + + info( + "Check that ::slider-* pseudo elements are not displayed for non-range inputs" + ); + await assertPseudoElementRulesNumbers( + "input[type=text].slider", + inspector, + view, + { + elementRulesNb: 3, + sliderFillRulesNb: 0, + sliderThumbRulesNb: 0, + sliderTrackRulesNb: 0, + } + ); +} + function convertTextPropsToString(textProps) { return textProps .map( @@ -395,6 +427,15 @@ async function assertPseudoElementRulesNumbers( highlightRules: elementStyle.rules.filter(rule => rule.pseudoElement?.startsWith("::highlight(") ), + sliderFillRules: elementStyle.rules.filter( + rule => rule.pseudoElement === "::slider-fill" + ), + sliderThumbRules: elementStyle.rules.filter( + rule => rule.pseudoElement === "::slider-thumb" + ), + sliderTrackRules: elementStyle.rules.filter( + rule => rule.pseudoElement === "::slider-track" + ), }; is( @@ -437,6 +478,21 @@ async function assertPseudoElementRulesNumbers( ruleNbs.highlightRulesNb || 0, selector + " has the correct number of ::highlight rules" ); + is( + rules.sliderFillRules.length, + ruleNbs.sliderFillRulesNb || 0, + selector + " has the correct number of ::slider-fill rules" + ); + is( + rules.sliderThumbRules.length, + ruleNbs.sliderThumbRulesNb || 0, + selector + " has the correct number of ::slider-thumb rules" + ); + is( + rules.sliderTrackRules.length, + ruleNbs.sliderTrackRulesNb || 0, + selector + " has the correct number of ::slider-track rules" + ); // If we do have pseudo element rules displayed, ensure we don't mark their selectors // as matched or unmatched diff --git a/devtools/client/inspector/rules/test/doc_pseudoelement.html b/devtools/client/inspector/rules/test/doc_pseudoelement.html index a6251c613c..8e077e220b 100644 --- a/devtools/client/inspector/rules/test/doc_pseudoelement.html +++ b/devtools/client/inspector/rules/test/doc_pseudoelement.html @@ -133,7 +133,15 @@ dialog::backdrop { } } - +input::slider-fill { + background: tomato; +} +input::slider-thumb { + background: gold; +} +input::slider-track { + background: seagreen; +} </style> </head> <body> @@ -161,6 +169,9 @@ dialog::backdrop { <dialog>In dialog</dialog> + <label>Range <input type="range" class="slider"></label> + <label>Not range <input type="text" class="slider"></label> + <section class="highlights-container"> Firefox Developer Tools is a set of web developer tools built into Firefox. You can use them to examine, edit, and debug HTML, CSS, and JavaScript. diff --git a/devtools/client/inspector/rules/views/rule-editor.js b/devtools/client/inspector/rules/views/rule-editor.js index 93e24f0946..a5717976d0 100644 --- a/devtools/client/inspector/rules/views/rule-editor.js +++ b/devtools/client/inspector/rules/views/rule-editor.js @@ -410,7 +410,7 @@ RuleEditor.prototype = { this._ruleViewIsEditing = this.ruleView.isEditing; }); - code.addEventListener("click", event => { + code.addEventListener("click", () => { const selection = this.doc.defaultView.getSelection(); if (selection.isCollapsed && !this._ruleViewIsEditing) { this.newProperty(); @@ -905,10 +905,8 @@ RuleEditor.prototype = { * True if the change should be applied. * @param {Number} direction * The move focus direction number. - * @param {Number} key - * The event keyCode that trigger the editor to close */ - async _onSelectorDone(value, commit, direction, key) { + async _onSelectorDone(value, commit, direction) { if ( !commit || this.isEditing || diff --git a/devtools/client/inspector/rules/views/text-property-editor.js b/devtools/client/inspector/rules/views/text-property-editor.js index 8546417cfb..edcdb856a8 100644 --- a/devtools/client/inspector/rules/views/text-property-editor.js +++ b/devtools/client/inspector/rules/views/text-property-editor.js @@ -385,7 +385,7 @@ TextPropertyEditor.prototype = { } }); - this.valueSpan.addEventListener("mouseup", event => { + this.valueSpan.addEventListener("mouseup", () => { // if we have dragged, we will handle the pending click in _draggingOnMouseUp instead if (this._hasDragged) { return; @@ -1146,10 +1146,8 @@ TextPropertyEditor.prototype = { * True if the change should be applied. * @param {Number} direction * The move focus direction number. - * @param {Number} key - * The event keyCode that trigger the editor to close */ - _onNameDone(value, commit, direction, key) { + _onNameDone(value, commit, direction) { const isNameUnchanged = (!commit && !this.ruleEditor.isEditing) || this.committed.name === value; if (this.prop.value && isNameUnchanged) { @@ -1233,10 +1231,8 @@ TextPropertyEditor.prototype = { * True if the change should be applied. * @param {Number} direction * The move focus direction number. - * @param {Number} key - * The event keyCode that trigger the editor to close */ - _onValueDone(value = "", commit, direction, key) { + _onValueDone(value = "", commit, direction) { const parsedProperties = this._getValueAndExtraProperties(value); const val = parseSingleValue( this.cssProperties.isKnown, |