diff options
Diffstat (limited to 'devtools/client/inspector')
15 files changed, 131 insertions, 100 deletions
diff --git a/devtools/client/inspector/changes/test/browser_changes_nested_rules.js b/devtools/client/inspector/changes/test/browser_changes_nested_rules.js index 789d88fdda..d6da1af72d 100644 --- a/devtools/client/inspector/changes/test/browser_changes_nested_rules.js +++ b/devtools/client/inspector/changes/test/browser_changes_nested_rules.js @@ -12,7 +12,7 @@ // --- @container myContainer (width > 10px) { // ----- div { // ------- & > span { … } -// ------- .mySpan { +// ------- & .mySpan { // --------- &:not(:focus) { const spanNotFocusedRule = `&:not(:focus) { @@ -94,7 +94,7 @@ const EXPECTED_AFTER_SPAN_PROP_CHANGES = EXPECTED_AFTER_DIV_PROP_CHANGE.map( }) ).concat([ { - text: ".mySpan {", + text: "& .mySpan {", copyRuleClipboard: applyModificationAfterSpanPropertiesChange(spanClassRule), }, diff --git a/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js b/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js index 0069d644c7..bea344e5f5 100644 --- a/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js +++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js @@ -88,12 +88,12 @@ add_task(async function () { cmdCopy = searchContextMenu.querySelector("#editmenu-copy"); cmdPaste = searchContextMenu.querySelector("#editmenu-paste"); - is(cmdUndo.getAttribute("disabled"), "", "cmdUndo is enabled"); - is(cmdDelete.getAttribute("disabled"), "", "cmdDelete is enabled"); - is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled"); - is(cmdCut.getAttribute("disabled"), "", "cmdCut is enabled"); - is(cmdCopy.getAttribute("disabled"), "", "cmdCopy is enabled"); - is(cmdPaste.getAttribute("disabled"), "", "cmdPaste is enabled"); + is(cmdUndo.getAttribute("disabled"), null, "cmdUndo is enabled"); + is(cmdDelete.getAttribute("disabled"), null, "cmdDelete is enabled"); + is(cmdSelectAll.getAttribute("disabled"), null, "cmdSelectAll is enabled"); + is(cmdCut.getAttribute("disabled"), null, "cmdCut is enabled"); + is(cmdCopy.getAttribute("disabled"), null, "cmdCopy is enabled"); + is(cmdPaste.getAttribute("disabled"), null, "cmdPaste is enabled"); onContextMenuClose = toolbox.once("menu-close"); searchContextMenu.hidePopup(); diff --git a/devtools/client/inspector/index.xhtml b/devtools/client/inspector/index.xhtml index 75d0a792c3..4cdbea4bee 100644 --- a/devtools/client/inspector/index.xhtml +++ b/devtools/client/inspector/index.xhtml @@ -66,8 +66,8 @@ var { require, loader } = ChromeUtils.importESModule( "resource://devtools/shared/loader/Loader.sys.mjs" ); - var { BrowserLoader } = ChromeUtils.import( - "resource://devtools/shared/loader/browser-loader.js" + var { BrowserLoader } = ChromeUtils.importESModule( + "resource://devtools/shared/loader/browser-loader.sys.mjs" ); } </script> diff --git a/devtools/client/inspector/markup/test/browser_markup_screenshot_node_about_page.js b/devtools/client/inspector/markup/test/browser_markup_screenshot_node_about_page.js index 4d8f4ff6a6..21dcf844b7 100644 --- a/devtools/client/inspector/markup/test/browser_markup_screenshot_node_about_page.js +++ b/devtools/client/inspector/markup/test/browser_markup_screenshot_node_about_page.js @@ -23,12 +23,12 @@ add_task(async function () { info("Select the main content node"); await selectNode(".main-content", inspector); - let inContentPageBackgroundColor = await getComputedStyleProperty( + let pageBackgroundColor = await getComputedStyleProperty( ":root", null, - "--in-content-page-background" + "background-color" ); - inContentPageBackgroundColor = inContentPageBackgroundColor.trim(); + pageBackgroundColor = pageBackgroundColor.trim(); info("Take a screenshot of the element and verify it looks as expected"); const image = await takeNodeScreenshot(inspector); @@ -38,7 +38,7 @@ add_task(async function () { image, x: 0, y: 0, - expectedColor: hexToCSS(inContentPageBackgroundColor), + expectedColor: hexToCSS(pageBackgroundColor), label: "The screenshot was taken", }); diff --git a/devtools/client/inspector/rules/models/element-style.js b/devtools/client/inspector/rules/models/element-style.js index e280a5e4a0..368a8ae953 100644 --- a/devtools/client/inspector/rules/models/element-style.js +++ b/devtools/client/inspector/rules/models/element-style.js @@ -57,7 +57,7 @@ class ElementStyle { this.ruleView = ruleView; this.store = store || {}; this.pageStyle = pageStyle; - this.pseudoElements = []; + this.pseudoElementTypes = new Set(); this.showUserAgentStyles = showUserAgentStyles; this.rules = []; this.cssProperties = this.ruleView.cssProperties; @@ -90,7 +90,7 @@ class ElementStyle { } this.destroyed = true; - this.pseudoElements = []; + this.pseudoElementTypes.clear(); for (const rule of this.rules) { if (rule.editor) { @@ -141,9 +141,12 @@ class ElementStyle { } // Store a list of all pseudo-element types found in the matching rules. - this.pseudoElements = this.rules - .filter(r => r.pseudoElement) - .map(r => r.pseudoElement); + this.pseudoElementTypes = new Set(); + for (const rule of this.rules) { + if (rule.pseudoElement) { + this.pseudoElementTypes.add(rule.pseudoElement); + } + } // Mark overridden computed styles. this.onRuleUpdated(); @@ -275,7 +278,7 @@ class ElementStyle { this.updateDeclarations(); // Update declarations for matching rules for pseudo-elements. - for (const pseudo of this.pseudoElements) { + for (const pseudo of this.pseudoElementTypes) { this.updateDeclarations(pseudo); } } @@ -299,11 +302,6 @@ class ElementStyle { updateDeclarations(pseudo = "") { // Gather all text properties applicable to the selected element or pseudo-element. const textProps = this._getDeclarations(pseudo); - // Gather all the computed properties applied by those text properties. - let computedProps = []; - for (const textProp of textProps) { - computedProps = computedProps.concat(textProp.computed); - } // CSS Variables inherits from the normal element in case of pseudo element. const variables = new Map(pseudo ? this.variablesMap.get("") : null); @@ -332,58 +330,62 @@ class ElementStyle { // _overriddenDirty will be set on each prop, indicating whether its // dirty status changed during this pass. const taken = new Map(); - for (const computedProp of computedProps) { - const earlier = taken.get(computedProp.name); - - // Prevent -webkit-gradient from being selected after unchecking - // linear-gradient in this case: - // -moz-linear-gradient: ...; - // -webkit-linear-gradient: ...; - // linear-gradient: ...; - if (!computedProp.textProp.isValid()) { - computedProp.overridden = true; - continue; - } - - let overridden; - if ( - earlier && - computedProp.priority === "important" && - (earlier.priority !== "important" || - // Even if the earlier property was important, if the current rule is in a layer - // it will take precedence, unless the earlier property rule was in the same layer. - (computedProp.textProp.rule?.isInLayer() && - computedProp.textProp.rule.isInDifferentLayer( - earlier.textProp.rule - ))) && - // For !important only consider rules applying to the same parent node. - computedProp.textProp.rule.inherited == earlier.textProp.rule.inherited - ) { - // New property is higher priority. Mark the earlier property - // overridden (which will reverse its dirty state). - earlier._overriddenDirty = !earlier._overriddenDirty; - earlier.overridden = true; - overridden = false; - } else { - overridden = !!earlier; - } - - computedProp._overriddenDirty = !!computedProp.overridden !== overridden; - computedProp.overridden = overridden; - - if (!computedProp.overridden && computedProp.textProp.enabled) { - taken.set(computedProp.name, computedProp); + for (const textProp of textProps) { + for (const computedProp of textProp.computed) { + const earlier = taken.get(computedProp.name); + + // Prevent -webkit-gradient from being selected after unchecking + // linear-gradient in this case: + // -moz-linear-gradient: ...; + // -webkit-linear-gradient: ...; + // linear-gradient: ...; + if (!computedProp.textProp.isValid()) { + computedProp.overridden = true; + continue; + } - // At this point, we can get CSS variable from "inherited" rules. - // When this is a registered custom property with `inherits` set to false, - // the text prop is "invisible" (i.e. not shown in the rule view). - // In such case, we don't want to get the value in the Map, and we'll rather - // get the initial value from the registered property definition. + let overridden; if ( - isCssVariable(computedProp.name) && - !computedProp.textProp.invisible + earlier && + computedProp.priority === "important" && + (earlier.priority !== "important" || + // Even if the earlier property was important, if the current rule is in a layer + // it will take precedence, unless the earlier property rule was in the same layer. + (computedProp.textProp.rule?.isInLayer() && + computedProp.textProp.rule.isInDifferentLayer( + earlier.textProp.rule + ))) && + // For !important only consider rules applying to the same parent node. + computedProp.textProp.rule.inherited == + earlier.textProp.rule.inherited ) { - variables.set(computedProp.name, computedProp.value); + // New property is higher priority. Mark the earlier property + // overridden (which will reverse its dirty state). + earlier._overriddenDirty = !earlier._overriddenDirty; + earlier.overridden = true; + overridden = false; + } else { + overridden = !!earlier; + } + + computedProp._overriddenDirty = + !!computedProp.overridden !== overridden; + computedProp.overridden = overridden; + + if (!computedProp.overridden && computedProp.textProp.enabled) { + taken.set(computedProp.name, computedProp); + + // At this point, we can get CSS variable from "inherited" rules. + // When this is a registered custom property with `inherits` set to false, + // the text prop is "invisible" (i.e. not shown in the rule view). + // In such case, we don't want to get the value in the Map, and we'll rather + // get the initial value from the registered property definition. + if ( + isCssVariable(computedProp.name) && + !computedProp.textProp.invisible + ) { + variables.set(computedProp.name, computedProp.value); + } } } } diff --git a/devtools/client/inspector/rules/test/browser_rules_content_01.js b/devtools/client/inspector/rules/test/browser_rules_content_01.js index b92ec47db0..1985f07f5f 100644 --- a/devtools/client/inspector/rules/test/browser_rules_content_01.js +++ b/devtools/client/inspector/rules/test/browser_rules_content_01.js @@ -103,7 +103,7 @@ add_task(async function () { matches: true, }, { - selector: ".unmatched", + selector: "& .unmatched", matches: false, }, ]); diff --git a/devtools/client/inspector/rules/test/browser_rules_nested_rules.js b/devtools/client/inspector/rules/test/browser_rules_nested_rules.js index 925f36a0e6..0dc068232b 100644 --- a/devtools/client/inspector/rules/test/browser_rules_nested_rules.js +++ b/devtools/client/inspector/rules/test/browser_rules_nested_rules.js @@ -93,7 +93,7 @@ add_task(async function () { checkRuleViewContent(view, [ { selector: "element", ancestorRulesData: null, declarations: [] }, { - selector: `.foo`, + selector: `& .foo`, // prettier-ignore ancestorRulesData: [ `body {`, @@ -108,7 +108,7 @@ add_task(async function () { checkRuleViewContent(view, [ { selector: "element", ancestorRulesData: null, declarations: [] }, { - selector: `#bar`, + selector: `& #bar`, // prettier-ignore ancestorRulesData: [ `body {`, @@ -138,7 +138,7 @@ add_task(async function () { checkRuleViewContent(view, [ { selector: "element", ancestorRulesData: null, declarations: [] }, { - selector: `[href]`, + selector: `& [href]`, ancestorRulesData: [ `body {`, ` @media screen {`, diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_context-menu.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_context-menu.js index 881b5274ee..009c67cd70 100644 --- a/devtools/client/inspector/rules/test/browser_rules_search-filter_context-menu.js +++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_context-menu.js @@ -86,12 +86,12 @@ add_task(async function () { cmdCopy = searchContextMenu.querySelector("#editmenu-copy"); cmdPaste = searchContextMenu.querySelector("#editmenu-paste"); - is(cmdUndo.getAttribute("disabled"), "", "cmdUndo is enabled"); - is(cmdDelete.getAttribute("disabled"), "", "cmdDelete is enabled"); - is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled"); - is(cmdCut.getAttribute("disabled"), "", "cmdCut is enabled"); - is(cmdCopy.getAttribute("disabled"), "", "cmdCopy is enabled"); - is(cmdPaste.getAttribute("disabled"), "", "cmdPaste is enabled"); + is(cmdUndo.getAttribute("disabled"), null, "cmdUndo is enabled"); + is(cmdDelete.getAttribute("disabled"), null, "cmdDelete is enabled"); + is(cmdSelectAll.getAttribute("disabled"), null, "cmdSelectAll is enabled"); + is(cmdCut.getAttribute("disabled"), null, "cmdCut is enabled"); + is(cmdCopy.getAttribute("disabled"), null, "cmdCopy is enabled"); + is(cmdPaste.getAttribute("disabled"), null, "cmdPaste is enabled"); const onContextMenuHidden = toolbox.once("menu-close"); searchContextMenu.hidePopup(); diff --git a/devtools/client/inspector/rules/test/browser_rules_select-and-copy-styles.js b/devtools/client/inspector/rules/test/browser_rules_select-and-copy-styles.js index f9d245828e..c6d4f29a4d 100644 --- a/devtools/client/inspector/rules/test/browser_rules_select-and-copy-styles.js +++ b/devtools/client/inspector/rules/test/browser_rules_select-and-copy-styles.js @@ -209,9 +209,9 @@ async function checkCopyNestedRule(view) { const copyEvent = new win.Event("copy", { bubbles: true }); const expectedNested = `html { - body { + & body { @container (1px < width) { - #nested { + & #nested { background: tomato; color: gold; } diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-nested-rules.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-nested-rules.js index 4a5e8bcd0c..ecf41fb920 100644 --- a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-nested-rules.js +++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-nested-rules.js @@ -88,8 +88,8 @@ add_task(async function () { ); ok(highlighterData.isShown, "The selector highlighter was shown"); - info(`Clicking on ".title" selector icon`); - highlighterData = await clickSelectorIcon(view, ".title"); + info(`Clicking on "& .title" selector icon`); + highlighterData = await clickSelectorIcon(view, "& .title"); is( highlighterData.nodeFront.nodeName.toLowerCase(), "h1", diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_02.js b/devtools/client/inspector/rules/test/browser_rules_variables_02.js index 4100859fb9..ee37a7b07a 100644 --- a/devtools/client/inspector/rules/test/browser_rules_variables_02.js +++ b/devtools/client/inspector/rules/test/browser_rules_variables_02.js @@ -119,9 +119,14 @@ async function testBorderShorthandAndInheritance(inspector, view) { // var(x) is the next sibling of the parent of M const setVarXParent = setVarMParent.parentNode.nextElementSibling; - // var(r) is the next sibling of var(x), and var(g) is the next sibling of var(r), etc. - const setVarRParent = setVarXParent.nextElementSibling; + // var(x) next sibling is the element that wraps the color + const colorParent = + setVarXParent.nextElementSibling.querySelector(".ruleview-color"); + // var(r) is the first childElement of the ruleview-color element + const setVarRParent = colorParent.firstElementChild; + // var(g) is the next sibling of var(r), const setVarGParent = setVarRParent.nextElementSibling; + // and var(b) is the next sibling of var(g), const setVarBParent = setVarGParent.nextElementSibling; const setVarM = getVarFromParent(setVarMParent); diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_offset-path.js b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_offset-path.js index 004d7e945f..bb187db4f5 100644 --- a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_offset-path.js +++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_offset-path.js @@ -38,7 +38,6 @@ const TEST_URL = `data:text/html,<meta charset=utf8>${encodeURIComponent(` const HIGHLIGHTER_TYPE = "ShapesHighlighter"; add_task(async function () { - await pushPref("layout.css.motion-path-basic-shapes.enabled", true); const env = await openInspectorForURL(TEST_URL); const { highlighterTestFront, inspector } = env; const view = selectRuleView(inspector); diff --git a/devtools/client/inspector/test/browser_inspector_inspect_loading_document.js b/devtools/client/inspector/test/browser_inspector_inspect_loading_document.js index 6798c85394..11e67ff4cd 100644 --- a/devtools/client/inspector/test/browser_inspector_inspect_loading_document.js +++ b/devtools/client/inspector/test/browser_inspector_inspect_loading_document.js @@ -131,6 +131,10 @@ add_task(async function testSlowLoadingDocument() { // Navigate to about:blank to clean the state. await navigateTo("about:blank"); + const markuploaded = inspector.once("markuploaded"); + const onNewRoot = inspector.once("new-root"); + const onUpdated = inspector.once("inspector-updated"); + await navigateTo(TEST_URL_2, { waitForLoad: false }); info("Wait for the #start div to be available as a markupview container"); await TestUtils.waitForCondition(async () => { @@ -165,4 +169,11 @@ add_task(async function testSlowLoadingDocument() { "body", inspector ); + + info( + "Waiting for inspector to update after having released the document load" + ); + await markuploaded; + await onNewRoot; + await onUpdated; }); diff --git a/devtools/client/inspector/test/browser_inspector_menu-04-use-in-console.js b/devtools/client/inspector/test/browser_inspector_menu-04-use-in-console.js index ac6ae35ad1..bd655a9a96 100644 --- a/devtools/client/inspector/test/browser_inspector_menu-04-use-in-console.js +++ b/devtools/client/inspector/test/browser_inspector_menu-04-use-in-console.js @@ -11,9 +11,17 @@ add_task(async function () { // requests to evaluateJSAsync. await pushPref("devtools.webconsole.input.eagerEvaluation", false); - const { inspector, toolbox } = await openInspectorForURL(TEST_URL); + info("Testing 'Use in Console' menu item with enabled split console."); + await pushPref("devtools.toolbox.splitconsole.enabled", true); + await testConsoleFunctionality({ isSplitConsoleEnabled: true }); + + info("Testing 'Use in Console' menu item with disabled split console."); + await pushPref("devtools.toolbox.splitconsole.enabled", false); + await testConsoleFunctionality({ isSplitConsoleEnabled: false }); +}); - info("Testing 'Use in Console' menu item."); +async function testConsoleFunctionality({ isSplitConsoleEnabled }) { + const { inspector, toolbox } = await openInspectorForURL(TEST_URL); await selectNode("#console-var", inspector); const container = await getContainerForSelector("#console-var", inspector); @@ -27,6 +35,12 @@ add_task(async function () { const hud = toolbox.getPanel("webconsole").hud; + if (isSplitConsoleEnabled) { + ok(toolbox.splitConsole, "The console is split console."); + } else { + ok(!toolbox.splitConsole, "The console is Web Console tab."); + } + const getConsoleResults = () => hud.ui.outputNode.querySelectorAll(".result"); is(hud.getInputValue(), "temp0", "first console variable is named temp0"); @@ -54,4 +68,4 @@ add_task(async function () { ); hud.ui.wrapper.dispatchClearHistory(); -}); +} diff --git a/devtools/client/inspector/test/browser_inspector_search-filter_context-menu.js b/devtools/client/inspector/test/browser_inspector_search-filter_context-menu.js index dad2ffa0b8..e8392b1425 100644 --- a/devtools/client/inspector/test/browser_inspector_search-filter_context-menu.js +++ b/devtools/client/inspector/test/browser_inspector_search-filter_context-menu.js @@ -96,12 +96,12 @@ add_task(async function () { cmdCopy = searchContextMenu.querySelector("#editmenu-copy"); cmdPaste = searchContextMenu.querySelector("#editmenu-paste"); - is(cmdUndo.getAttribute("disabled"), "", "cmdUndo is enabled"); - is(cmdDelete.getAttribute("disabled"), "", "cmdDelete is enabled"); - is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled"); - is(cmdCut.getAttribute("disabled"), "", "cmdCut is enabled"); - is(cmdCopy.getAttribute("disabled"), "", "cmdCopy is enabled"); - is(cmdPaste.getAttribute("disabled"), "", "cmdPaste is enabled"); + is(cmdUndo.getAttribute("disabled"), null, "cmdUndo is enabled"); + is(cmdDelete.getAttribute("disabled"), null, "cmdDelete is enabled"); + is(cmdSelectAll.getAttribute("disabled"), null, "cmdSelectAll is enabled"); + is(cmdCut.getAttribute("disabled"), null, "cmdCut is enabled"); + is(cmdCopy.getAttribute("disabled"), null, "cmdCopy is enabled"); + is(cmdPaste.getAttribute("disabled"), null, "cmdPaste is enabled"); const onContextMenuHidden = toolbox.once("menu-close"); searchContextMenu.hidePopup(); |