summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/inspector')
-rw-r--r--devtools/client/inspector/animation/components/App.js2
-rw-r--r--devtools/client/inspector/animation/components/NoAnimationPanel.js2
-rw-r--r--devtools/client/inspector/animation/components/PlaybackRateSelector.js2
-rw-r--r--devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js2
-rw-r--r--devtools/client/inspector/animation/test/summary-graph_delay-sign_head.js5
-rw-r--r--devtools/client/inspector/animation/test/summary-graph_end-delay-sign_head.js5
-rw-r--r--devtools/client/inspector/boxmodel/components/BoxModelInfo.js2
-rw-r--r--devtools/client/inspector/breadcrumbs.js3
-rw-r--r--devtools/client/inspector/changes/reducers/changes.js2
-rw-r--r--devtools/client/inspector/changes/selectors/changes.js31
-rw-r--r--devtools/client/inspector/compatibility/CompatibilityView.js4
-rw-r--r--devtools/client/inspector/compatibility/actions/compatibility.js2
-rw-r--r--devtools/client/inspector/compatibility/reducers/compatibility.js2
-rw-r--r--devtools/client/inspector/computed/computed.js2
-rw-r--r--devtools/client/inspector/computed/test/browser.toml3
-rw-r--r--devtools/client/inspector/computed/test/browser_computed_keybindings_01.js2
-rw-r--r--devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js6
-rw-r--r--devtools/client/inspector/flexbox/reducers/flexbox.js2
-rw-r--r--devtools/client/inspector/fonts/reducers/font-editor.js2
-rw-r--r--devtools/client/inspector/grids/components/GridOutline.js2
-rw-r--r--devtools/client/inspector/markup/markup.js30
-rw-r--r--devtools/client/inspector/markup/test/browser.toml2
-rw-r--r--devtools/client/inspector/markup/test/browser_markup_events_03.js6
-rw-r--r--devtools/client/inspector/markup/test/browser_markup_links_07.js26
-rw-r--r--devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js110
-rw-r--r--devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js18
-rw-r--r--devtools/client/inspector/markup/test/doc_markup_events_03.html2
-rw-r--r--devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html22
-rw-r--r--devtools/client/inspector/markup/test/resources/doc_markup_links_base.html12
-rw-r--r--devtools/client/inspector/markup/views/element-editor.js2
-rw-r--r--devtools/client/inspector/node-picker.js6
-rw-r--r--devtools/client/inspector/rules/test/browser_rules_colorpicker-contrast-ratio.js4
-rw-r--r--devtools/client/inspector/rules/test/browser_rules_container-queries.js38
-rw-r--r--devtools/client/inspector/rules/test/browser_rules_edit-size-property-dragging.js5
-rw-r--r--devtools/client/inspector/rules/test/browser_rules_large_base64_background_image.js18
-rw-r--r--devtools/client/inspector/rules/test/browser_rules_original-source-link.js2
-rw-r--r--devtools/client/inspector/rules/test/browser_rules_original-source-link2.js2
-rw-r--r--devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js56
-rw-r--r--devtools/client/inspector/rules/test/doc_pseudoelement.html13
-rw-r--r--devtools/client/inspector/rules/views/rule-editor.js6
-rw-r--r--devtools/client/inspector/rules/views/text-property-editor.js10
-rw-r--r--devtools/client/inspector/shared/highlighters-overlay.js9
-rw-r--r--devtools/client/inspector/test/browser_inspector_highlighter-autohide-config_03.js2
-rw-r--r--devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-events.js6
-rw-r--r--devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js4
-rw-r--r--devtools/client/inspector/test/browser_inspector_highlighter-geometry_01.js1
-rw-r--r--devtools/client/inspector/test/browser_inspector_highlighter-measure_03.js6
-rw-r--r--devtools/client/inspector/test/browser_inspector_highlighter-measure_04.js6
-rw-r--r--devtools/client/inspector/test/browser_inspector_sidebarstate.js4
-rw-r--r--devtools/client/inspector/test/browser_inspector_switch-to-inspector-on-pick.js2
-rw-r--r--devtools/client/inspector/toolsidebar.js4
51 files changed, 351 insertions, 166 deletions
diff --git a/devtools/client/inspector/animation/components/App.js b/devtools/client/inspector/animation/components/App.js
index 75a000286c..74ce8e7b40 100644
--- a/devtools/client/inspector/animation/components/App.js
+++ b/devtools/client/inspector/animation/components/App.js
@@ -60,7 +60,7 @@ class App extends Component {
};
}
- shouldComponentUpdate(nextProps, nextState) {
+ shouldComponentUpdate(nextProps) {
return (
this.props.animations.length !== 0 || nextProps.animations.length !== 0
);
diff --git a/devtools/client/inspector/animation/components/NoAnimationPanel.js b/devtools/client/inspector/animation/components/NoAnimationPanel.js
index ea034e413d..260325518b 100644
--- a/devtools/client/inspector/animation/components/NoAnimationPanel.js
+++ b/devtools/client/inspector/animation/components/NoAnimationPanel.js
@@ -26,7 +26,7 @@ class NoAnimationPanel extends Component {
};
}
- shouldComponentUpdate(nextProps, nextState) {
+ shouldComponentUpdate(nextProps) {
return this.props.elementPickerEnabled != nextProps.elementPickerEnabled;
}
diff --git a/devtools/client/inspector/animation/components/PlaybackRateSelector.js b/devtools/client/inspector/animation/components/PlaybackRateSelector.js
index 2d0de53a0c..9f2c56cdb6 100644
--- a/devtools/client/inspector/animation/components/PlaybackRateSelector.js
+++ b/devtools/client/inspector/animation/components/PlaybackRateSelector.js
@@ -28,7 +28,7 @@ class PlaybackRateSelector extends PureComponent {
};
}
- static getDerivedStateFromProps(props, state) {
+ static getDerivedStateFromProps(props) {
const { animations, playbackRates } = props;
const currentPlaybackRates = sortAndUnique(
diff --git a/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js b/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
index a7051d9a01..bb69249907 100644
--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
@@ -91,7 +91,7 @@ add_task(async function () {
}
});
-function assertPosition(barEl, areaEl, expectedRate, animationInspector) {
+function assertPosition(barEl, areaEl, expectedRate) {
const controllerBounds = areaEl.getBoundingClientRect();
const barBounds = barEl.getBoundingClientRect();
const barX = barBounds.x + barBounds.width / 2 - controllerBounds.x;
diff --git a/devtools/client/inspector/animation/test/summary-graph_delay-sign_head.js b/devtools/client/inspector/animation/test/summary-graph_delay-sign_head.js
index fd601821b6..fffd653b1d 100644
--- a/devtools/client/inspector/animation/test/summary-graph_delay-sign_head.js
+++ b/devtools/client/inspector/animation/test/summary-graph_delay-sign_head.js
@@ -75,8 +75,9 @@ async function testSummaryGraphDelaySign() {
function assertExpected(key) {
const actual = parseFloat(delaySignEl.style[key]);
const expected = parseFloat(expectedResult[key]);
- ok(
- Math.abs(actual - expected) < 0.01,
+ Assert.less(
+ Math.abs(actual - expected),
+ 0.01,
`${key} should be ${expected} (got ${actual})`
);
}
diff --git a/devtools/client/inspector/animation/test/summary-graph_end-delay-sign_head.js b/devtools/client/inspector/animation/test/summary-graph_end-delay-sign_head.js
index f87a554420..09838fcadf 100644
--- a/devtools/client/inspector/animation/test/summary-graph_end-delay-sign_head.js
+++ b/devtools/client/inspector/animation/test/summary-graph_end-delay-sign_head.js
@@ -69,8 +69,9 @@ async function testSummaryGraphEndDelaySign() {
function assertExpected(key) {
const actual = parseFloat(endDelaySignEl.style[key]);
const expected = parseFloat(expectedResult[key]);
- ok(
- Math.abs(actual - expected) < 0.01,
+ Assert.less(
+ Math.abs(actual - expected),
+ 0.01,
`${key} should be ${expected} (got ${actual})`
);
}
diff --git a/devtools/client/inspector/boxmodel/components/BoxModelInfo.js b/devtools/client/inspector/boxmodel/components/BoxModelInfo.js
index e64faba05a..2444b7107d 100644
--- a/devtools/client/inspector/boxmodel/components/BoxModelInfo.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelInfo.js
@@ -32,7 +32,7 @@ class BoxModelInfo extends PureComponent {
this.onToggleGeometryEditor = this.onToggleGeometryEditor.bind(this);
}
- onToggleGeometryEditor(e) {
+ onToggleGeometryEditor() {
this.props.onToggleGeometryEditor();
}
diff --git a/devtools/client/inspector/breadcrumbs.js b/devtools/client/inspector/breadcrumbs.js
index 68bafb591c..47700f7d40 100644
--- a/devtools/client/inspector/breadcrumbs.js
+++ b/devtools/client/inspector/breadcrumbs.js
@@ -588,9 +588,8 @@ HTMLBreadcrumbs.prototype = {
/**
* On mouse out, make sure to unhighlight.
- * @param {DOMEvent} event.
*/
- handleMouseOut(event) {
+ handleMouseOut() {
this.inspector.highlighters.hideHighlighterType(
this.inspector.highlighters.TYPES.BOXMODEL
);
diff --git a/devtools/client/inspector/changes/reducers/changes.js b/devtools/client/inspector/changes/reducers/changes.js
index 23e82a3ba7..82a5a92ed7 100644
--- a/devtools/client/inspector/changes/reducers/changes.js
+++ b/devtools/client/inspector/changes/reducers/changes.js
@@ -371,7 +371,7 @@ const reducers = {
return state;
},
- [RESET_CHANGES](state) {
+ [RESET_CHANGES]() {
return INITIAL_STATE;
},
};
diff --git a/devtools/client/inspector/changes/selectors/changes.js b/devtools/client/inspector/changes/selectors/changes.js
index a6b99e4579..a176e11082 100644
--- a/devtools/client/inspector/changes/selectors/changes.js
+++ b/devtools/client/inspector/changes/selectors/changes.js
@@ -65,7 +65,7 @@ function getChangesTree(state, filter = {}) {
}
return Object.entries(state)
- .filter(([sourceId, source]) => {
+ .filter(([sourceId]) => {
// Use only matching sources if an array to filter by was provided.
if (sourceIdsFilter.length) {
return sourceIdsFilter.includes(sourceId);
@@ -87,7 +87,7 @@ function getChangesTree(state, filter = {}) {
...source,
// Build a new collection of rules keyed by rule id.
rules: Object.entries(rules)
- .filter(([ruleId, rule]) => {
+ .filter(([ruleId]) => {
// Use only matching rules if an array to filter by was provided.
if (rulesIdsFilter.length) {
return rulesIdsFilter.includes(ruleId);
@@ -237,22 +237,19 @@ function getChangesStylesheet(state, filter) {
}
// Iterate through all sources in the change tree and build a CSS stylesheet string.
- return Object.entries(changeTree).reduce(
- (stylesheetText, [sourceId, source]) => {
- const { href, rules } = source;
- // Write code comment with source origin
- stylesheetText += `\n/* ${getSourceForDisplay(source)} | ${href} */\n`;
- // Write CSS rules
- stylesheetText += Object.entries(rules).reduce((str, [ruleId, rule]) => {
- // Add a new like only after top-level rules (level == 0)
- str += writeRule(ruleId, rule, 0) + "\n";
- return str;
- }, "");
+ return Object.values(changeTree).reduce((stylesheetText, source) => {
+ const { href, rules } = source;
+ // Write code comment with source origin
+ stylesheetText += `\n/* ${getSourceForDisplay(source)} | ${href} */\n`;
+ // Write CSS rules
+ stylesheetText += Object.entries(rules).reduce((str, [ruleId, rule]) => {
+ // Add a new like only after top-level rules (level == 0)
+ str += writeRule(ruleId, rule, 0) + "\n";
+ return str;
+ }, "");
- return stylesheetText;
- },
- ""
- );
+ return stylesheetText;
+ }, "");
}
module.exports = {
diff --git a/devtools/client/inspector/compatibility/CompatibilityView.js b/devtools/client/inspector/compatibility/CompatibilityView.js
index 19c3263f00..548246fd54 100644
--- a/devtools/client/inspector/compatibility/CompatibilityView.js
+++ b/devtools/client/inspector/compatibility/CompatibilityView.js
@@ -32,7 +32,7 @@ const CompatibilityApp = createFactory(
);
class CompatibilityView {
- constructor(inspector, window) {
+ constructor(inspector) {
this.inspector = inspector;
this.inspector.store.injectReducer("compatibility", compatibilityReducer);
@@ -133,7 +133,7 @@ class CompatibilityView {
);
}
- _parseMarkup(str) {
+ _parseMarkup() {
// Using a BrowserLoader for the inspector is currently blocked on performance regressions,
// see Bug 1471853.
throw new Error(
diff --git a/devtools/client/inspector/compatibility/actions/compatibility.js b/devtools/client/inspector/compatibility/actions/compatibility.js
index fa9f410e0d..3ff512f1b0 100644
--- a/devtools/client/inspector/compatibility/actions/compatibility.js
+++ b/devtools/client/inspector/compatibility/actions/compatibility.js
@@ -74,7 +74,7 @@ function clearDestroyedNodes() {
}
function initUserSettings() {
- return async ({ dispatch, getState }) => {
+ return async ({ dispatch }) => {
dispatch({ type: COMPATIBILITY_INIT_USER_SETTINGS_START });
try {
diff --git a/devtools/client/inspector/compatibility/reducers/compatibility.js b/devtools/client/inspector/compatibility/reducers/compatibility.js
index 9256167601..ce54e856a9 100644
--- a/devtools/client/inspector/compatibility/reducers/compatibility.js
+++ b/devtools/client/inspector/compatibility/reducers/compatibility.js
@@ -139,7 +139,7 @@ const reducers = {
_showError(COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_FAILURE, error);
return state;
},
- [COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_COMPLETE](state, { target }) {
+ [COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_COMPLETE](state) {
return Object.assign({}, state, { isTopLevelTargetProcessing: false });
},
};
diff --git a/devtools/client/inspector/computed/computed.js b/devtools/client/inspector/computed/computed.js
index 7d2c129c7b..9b051425e2 100644
--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -1383,7 +1383,7 @@ class PropertyView {
/**
* The action when a user clicks on the MDN help link for a property.
*/
- mdnLinkClick(event) {
+ mdnLinkClick() {
if (!this.link) {
return;
}
diff --git a/devtools/client/inspector/computed/test/browser.toml b/devtools/client/inspector/computed/test/browser.toml
index d4ec4fc993..634c367351 100644
--- a/devtools/client/inspector/computed/test/browser.toml
+++ b/devtools/client/inspector/computed/test/browser.toml
@@ -34,7 +34,8 @@ fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and
["browser_computed_getNodeInfo.js"]
skip-if = [
- "!debug && os == 'mac'", #Bug 1559033
+ "apple_catalina && !debug", #Bug 1559033
+ "apple_silicon && !debug", #Bug 1559033
"a11y_checks", # Bugs 1849028 and 1858041 to investigate intermittent a11y_checks results
]
diff --git a/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js b/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js
index 5a6681f139..351d640bf9 100644
--- a/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js
+++ b/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js
@@ -83,7 +83,7 @@ function checkHelpLinkKeybinding(view) {
info('Check that MDN link is opened on "F1"');
const propView = getFirstVisiblePropertyView(view);
return new Promise(resolve => {
- propView.mdnLinkClick = function (event) {
+ propView.mdnLinkClick = function () {
ok(true, "Pressing F1 opened the MDN link");
resolve();
};
diff --git a/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js b/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
index 00bea31e57..ad26d3beab 100644
--- a/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
+++ b/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
@@ -90,12 +90,10 @@ class FlexItemSizingProperties extends PureComponent {
* The name for this CSS property
* @param {String} value
* The property value
- * @param {Booleam} isDefaultValue
- * Whether the value come from the browser default style
* @return {Object}
* The React component representing this CSS property
*/
- renderCssProperty(name, value, isDefaultValue) {
+ renderCssProperty(name, value) {
return dom.span({ className: "css-property-link" }, `(${name}: ${value})`);
}
@@ -115,7 +113,7 @@ class FlexItemSizingProperties extends PureComponent {
);
}
- renderBaseSizeSection({ mainBaseSize, clampState }, properties, dimension) {
+ renderBaseSizeSection({ mainBaseSize }, properties, dimension) {
const flexBasisValue = properties["flex-basis"];
const dimensionValue = properties[dimension];
diff --git a/devtools/client/inspector/flexbox/reducers/flexbox.js b/devtools/client/inspector/flexbox/reducers/flexbox.js
index 856294a549..46c1d4525c 100644
--- a/devtools/client/inspector/flexbox/reducers/flexbox.js
+++ b/devtools/client/inspector/flexbox/reducers/flexbox.js
@@ -58,7 +58,7 @@ const INITIAL_FLEXBOX = {
};
const reducers = {
- [CLEAR_FLEXBOX](flexbox, _) {
+ [CLEAR_FLEXBOX](_) {
return INITIAL_FLEXBOX;
},
diff --git a/devtools/client/inspector/fonts/reducers/font-editor.js b/devtools/client/inspector/fonts/reducers/font-editor.js
index b40fff4ba1..fbfee2d666 100644
--- a/devtools/client/inspector/fonts/reducers/font-editor.js
+++ b/devtools/client/inspector/fonts/reducers/font-editor.js
@@ -62,7 +62,7 @@ const reducers = {
return newState;
},
- [RESET_EDITOR](state) {
+ [RESET_EDITOR]() {
return { ...INITIAL_STATE };
},
diff --git a/devtools/client/inspector/grids/components/GridOutline.js b/devtools/client/inspector/grids/components/GridOutline.js
index 65771f3f45..2a7a195bd0 100644
--- a/devtools/client/inspector/grids/components/GridOutline.js
+++ b/devtools/client/inspector/grids/components/GridOutline.js
@@ -344,7 +344,7 @@ class GridOutline extends PureComponent {
);
}
- renderGridOutlineBorder(borderWidth, borderHeight, color) {
+ renderGridOutlineBorder(borderWidth, borderHeight) {
return dom.rect({
key: "border",
className: "grid-outline-border",
diff --git a/devtools/client/inspector/markup/markup.js b/devtools/client/inspector/markup/markup.js
index 5d10b003c9..7975d442f8 100644
--- a/devtools/client/inspector/markup/markup.js
+++ b/devtools/client/inspector/markup/markup.js
@@ -1218,19 +1218,15 @@ MarkupView.prototype = {
} else if (type == "idref") {
// Select the node in the same document.
nodeFront.walkerFront
- .document(nodeFront)
- .then(doc => {
- return nodeFront.walkerFront
- .querySelector(doc, "#" + CSS.escape(link))
- .then(node => {
- if (!node) {
- this.emit("idref-attribute-link-failed");
- return;
- }
- this.inspector.selection.setNodeFront(node, {
- reason: "markup-attribute-link",
- });
- });
+ .getIdrefNode(nodeFront, CSS.escape(link))
+ .then(node => {
+ if (!node) {
+ this.emitForTests("idref-attribute-link-failed");
+ return;
+ }
+ this.inspector.selection.setNodeFront(node, {
+ reason: "markup-attribute-link",
+ });
})
.catch(console.error);
}
@@ -1555,7 +1551,7 @@ MarkupView.prototype = {
}
},
- _onTargetAvailable({ targetFront }) {},
+ _onTargetAvailable() {},
_onTargetDestroyed({ targetFront, isModeSwitching }) {
// Bug 1776250: We only watch targets in order to update containers which
@@ -2103,14 +2099,12 @@ MarkupView.prototype = {
* Mark the given node selected, and update the inspector.selection
* object's NodeFront to keep consistent state between UI and selection.
*
- * @param {NodeFront} aNode
+ * @param {NodeFront} node
* The NodeFront to mark as selected.
- * @param {String} reason
- * The reason for marking the node as selected.
* @return {Boolean} False if the node is already marked as selected, true
* otherwise.
*/
- markNodeAsSelected(node, reason = "nodeselected") {
+ markNodeAsSelected(node) {
const container = this.getContainer(node);
return this._markContainerAsSelected(container);
},
diff --git a/devtools/client/inspector/markup/test/browser.toml b/devtools/client/inspector/markup/test/browser.toml
index 0b566f5e18..4f08fd10f2 100644
--- a/devtools/client/inspector/markup/test/browser.toml
+++ b/devtools/client/inspector/markup/test/browser.toml
@@ -1,5 +1,4 @@
[DEFAULT]
-prefs = ["devtools.chrome.enabled=false"] # Bug 1520383 - Force devtools.chrome.enabled to false regardless of whether we're in an official build so we don't show event bubbles from chrome event listeners in the inspector on unprivileged test pages.
tags = "devtools"
subsuite = "devtools"
support-files = [
@@ -76,6 +75,7 @@ support-files = [
"lib_react_with_addons_15.3.1_min.js",
"lib_react_with_addons_15.4.1.js",
"react_external_listeners.js",
+ "resources/*",
"shadowdom_open_debugger.min.js",
"!/devtools/client/debugger/test/mochitest/shared-head.js",
"!/devtools/client/inspector/test/head.js",
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_03.js b/devtools/client/inspector/markup/test/browser_markup_events_03.js
index bebffec066..b0de4561e0 100644
--- a/devtools/client/inspector/markup/test/browser_markup_events_03.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_03.js
@@ -17,7 +17,7 @@ const TEST_DATA = [
expected: [
{
type: "click",
- filename: TEST_URL + ":69:17",
+ filename: TEST_URL + ":70:17",
attributes: ["Bubbling"],
handler:
"es6Method(foo, bar) {\n" + ' alert("obj.es6Method");\n' + "}",
@@ -29,7 +29,7 @@ const TEST_DATA = [
expected: [
{
type: "click",
- filename: TEST_URL + ":89:25",
+ filename: TEST_URL + ":91:25",
attributes: ["Bubbling"],
handler: "function* generator() {\n" + ' alert("generator");\n' + "}",
},
@@ -40,7 +40,7 @@ const TEST_DATA = [
expected: [
{
type: "click",
- filename: TEST_URL + ":46:58",
+ filename: TEST_URL + ":47:58",
attributes: ["Bubbling"],
handler: "function*() {\n" + ' alert("anonGenerator");\n' + "}",
},
diff --git a/devtools/client/inspector/markup/test/browser_markup_links_07.js b/devtools/client/inspector/markup/test/browser_markup_links_07.js
index 2a86f3b1d9..830d370b03 100644
--- a/devtools/client/inspector/markup/test/browser_markup_links_07.js
+++ b/devtools/client/inspector/markup/test/browser_markup_links_07.js
@@ -7,6 +7,7 @@
// do follows the link.
const TEST_URL = URL_ROOT_SSL + "doc_markup_links.html";
+const TEST_URL_BASE = URL_ROOT_SSL + "resources/doc_markup_links_base.html";
add_task(async function () {
const { inspector } = await openInspectorForURL(TEST_URL);
@@ -70,6 +71,31 @@ add_task(async function () {
await followLinkNoNewNode(linkEl, true, inspector);
});
+add_task(async function testDocumentWithBaseAttribute() {
+ const { inspector } = await openInspectorForURL(TEST_URL_BASE);
+
+ info("Select a node with a URI attribute");
+ await selectNode("img", inspector);
+
+ info("Find the link element from the markup-view");
+ const { editor } = await getContainerForSelector("img", inspector);
+ const linkEl = editor.attrElements.get("src").querySelector(".link");
+
+ info("Follow the link with middle-click and wait for the new tab to open");
+ await followLinkWaitForTab(
+ linkEl,
+ false,
+ URL_ROOT_SSL + "doc_markup_tooltip.png"
+ );
+
+ info("Follow the link with meta/ctrl-click and wait for the new tab to open");
+ await followLinkWaitForTab(
+ linkEl,
+ true,
+ URL_ROOT_SSL + "doc_markup_tooltip.png"
+ );
+});
+
function performMouseDown(linkEl, metactrl) {
const evt = linkEl.ownerDocument.createEvent("MouseEvents");
diff --git a/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js b/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js
index 1f50ae6b88..6d02f214ae 100644
--- a/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js
+++ b/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js
@@ -16,42 +16,84 @@ const TEST_DATA = [
{
selector: "#aria-activedescendant",
attributeName: "aria-activedescendant",
- links: ["activedescendant01"],
+ links: [{ id: "activedescendant01" }],
},
{
selector: "#aria-controls",
attributeName: "aria-controls",
- links: ["controls01", "controls02"],
+ links: [{ id: "controls01" }, { id: "controls02" }],
},
{
selector: "#aria-describedby",
attributeName: "aria-describedby",
- links: ["describedby01", "describedby02"],
+ links: [{ id: "describedby01" }, { id: "describedby02" }],
},
{
selector: "#aria-details",
attributeName: "aria-details",
- links: ["details01", "details02"],
+ links: [{ id: "details01" }, { id: "details02" }],
},
{
selector: "#aria-errormessage",
attributeName: "aria-errormessage",
- links: ["errormessage01"],
+ links: [{ id: "errormessage01" }],
},
{
selector: "#aria-flowto",
attributeName: "aria-flowto",
- links: ["flowto01", "flowto02"],
+ links: [{ id: "flowto01" }, { id: "flowto02" }],
},
{
selector: "#aria-labelledby",
attributeName: "aria-labelledby",
- links: ["labelledby01", "labelledby02"],
+ links: [{ id: "labelledby01" }, { id: "labelledby02" }],
},
{
selector: "#aria-owns",
attributeName: "aria-owns",
- links: ["owns01", "owns02"],
+ links: [{ id: "owns01" }, { id: "owns02" }],
+ },
+ {
+ getContainer: async inspector => {
+ info("Find and expand the test-component shadow DOM host.");
+ const hostFront = await getNodeFront("test-component", inspector);
+ const hostContainer = inspector.markup.getContainer(hostFront);
+ await expandContainer(inspector, hostContainer);
+
+ info("Expand the shadow root");
+ const shadowRootContainer = hostContainer.getChildContainers()[0];
+ await expandContainer(inspector, shadowRootContainer);
+
+ info("Expand the slot");
+ const slotContainer = shadowRootContainer.getChildContainers()[0];
+
+ is(
+ slotContainer.elt
+ .querySelector(`[data-attr="id"]`)
+ .getAttribute("data-value"),
+ "aria-describedby-shadow-dom",
+ `This is the container for button#aria-describedby-shadow-dom`
+ );
+
+ // The test expect the node to be selected
+ const updated = inspector.once("inspector-updated");
+ inspector.selection.setNodeFront(slotContainer.node, { reason: "test" });
+ await updated;
+
+ return slotContainer;
+ },
+ attributeName: "aria-describedby",
+ links: [{ id: "describedby01", valid: false }, { id: "describedbyshadow" }],
+ },
+ {
+ selector: "#empty-attributes",
+ attributeName: "aria-activedescendant",
+ links: [],
+ },
+ {
+ selector: "#empty-attributes",
+ attributeName: "aria-details",
+ links: [],
},
];
@@ -59,11 +101,16 @@ add_task(async function () {
const { inspector } = await openInspectorForURL(TEST_URL);
for (const test of TEST_DATA) {
- info("Selecting test node " + test.selector);
- await selectNode(test.selector, inspector);
+ let editor;
+ if (typeof test.getContainer === "function") {
+ ({ editor } = await test.getContainer(inspector));
+ } else {
+ info("Selecting test node " + test.selector);
+ await selectNode(test.selector, inspector);
+ info("Finding the popupNode to anchor the context-menu to");
+ ({ editor } = await getContainerForSelector(test.selector, inspector));
+ }
- info("Finding the popupNode to anchor the context-menu to");
- const { editor } = await getContainerForSelector(test.selector, inspector);
const attributeEl = editor.attrElements.get(test.attributeName);
const linksEl = attributeEl.querySelectorAll(".link");
@@ -79,8 +126,6 @@ add_task(async function () {
const linkEl = linksEl[i];
ok(linkEl, "Found the link");
- const expectedReferencedNodeId = test.links[i];
-
info("Simulating a context click on the link");
const allMenuItems = openContextMenuAndGetAllItems(inspector, {
target: linkEl,
@@ -95,6 +140,7 @@ add_task(async function () {
is(linkFollow.visible, true, "The follow-link item is visible");
is(linkCopy.visible, false, "The copy-link item is not visible");
+ const { id: expectedReferencedNodeId } = test.links[i];
const linkFollowItemLabel = INSPECTOR_L10N.getFormatStr(
"inspector.menu.selectElement.label",
expectedReferencedNodeId
@@ -114,16 +160,32 @@ add_task(async function () {
"Button has expected title"
);
- info("Check that clicking on button selects the associated node");
- const onSelection = inspector.selection.once("new-node-front");
- buttonEl.click();
- await onSelection;
-
- is(
- inspector.selection.nodeFront.id,
- expectedReferencedNodeId,
- "The expected new node was selected"
- );
+ if (test.links[i].valid !== false) {
+ info("Check that clicking on button selects the associated node");
+ const onSelection = inspector.selection.once("new-node-front");
+ buttonEl.click();
+ await onSelection;
+
+ is(
+ inspector.selection.nodeFront.id,
+ expectedReferencedNodeId,
+ "The expected new node was selected"
+ );
+ } else {
+ info(
+ "Check that clicking on button triggers idref-attribute-link-failed event"
+ );
+ const onIdrefAttributeLinkFailed = inspector.markup.once(
+ "idref-attribute-link-failed"
+ );
+ const onSelection = inspector.selection.once("new-node-front");
+ const onTimeout = wait(500).then(() => "TIMEOUT");
+ buttonEl.click();
+ await onIdrefAttributeLinkFailed;
+ ok(true, "Got expected idref-attribute-link-failed event");
+ const res = await Promise.race([onSelection, onTimeout]);
+ is(res, "TIMEOUT", "Clicking the button did not select a new node");
+ }
}
}
});
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js
index 38f7361725..563863d614 100644
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js
@@ -59,7 +59,7 @@ var TEST_DATA = [
expectedAttributes: {
style: DATA_URL_INLINE_STYLE,
},
- validate: (container, inspector) => {
+ validate: container => {
const editor = container.editor;
const visibleAttrText = editor.attrElements
.get("style")
@@ -75,7 +75,7 @@ var TEST_DATA = [
expectedAttributes: {
"data-long": LONG_ATTRIBUTE,
},
- validate: (container, inspector) => {
+ validate: container => {
const editor = container.editor;
const visibleAttrText = editor.attrElements
.get("data-long")
@@ -91,7 +91,7 @@ var TEST_DATA = [
expectedAttributes: {
src: DATA_URL_ATTRIBUTE,
},
- validate: (container, inspector) => {
+ validate: container => {
const editor = container.editor;
const visibleAttrText = editor.attrElements
.get("src")
@@ -107,17 +107,17 @@ var TEST_DATA = [
expectedAttributes: {
"data-long": LONG_ATTRIBUTE,
},
- setUp(inspector) {
+ setUp() {
Services.prefs.setBoolPref("devtools.markup.collapseAttributes", false);
},
- validate: (container, inspector) => {
+ validate: container => {
const editor = container.editor;
const visibleAttrText = editor.attrElements
.get("data-long")
.querySelector(".attr-value").textContent;
is(visibleAttrText, LONG_ATTRIBUTE);
},
- tearDown(inspector) {
+ tearDown() {
Services.prefs.clearUserPref("devtools.markup.collapseAttributes");
},
},
@@ -127,10 +127,10 @@ var TEST_DATA = [
expectedAttributes: {
"data-long": LONG_ATTRIBUTE,
},
- setUp(inspector) {
+ setUp() {
Services.prefs.setIntPref("devtools.markup.collapseAttributeLength", 2);
},
- validate: (container, inspector) => {
+ validate: container => {
const firstChar = LONG_ATTRIBUTE[0];
const lastChar = LONG_ATTRIBUTE[LONG_ATTRIBUTE.length - 1];
const collapsed = firstChar + "\u2026" + lastChar;
@@ -140,7 +140,7 @@ var TEST_DATA = [
.querySelector(".attr-value").textContent;
is(visibleAttrText, collapsed);
},
- tearDown(inspector) {
+ tearDown() {
Services.prefs.clearUserPref("devtools.markup.collapseAttributeLength");
},
},
diff --git a/devtools/client/inspector/markup/test/doc_markup_events_03.html b/devtools/client/inspector/markup/test/doc_markup_events_03.html
index a0c067e33e..deb3730d32 100644
--- a/devtools/client/inspector/markup/test/doc_markup_events_03.html
+++ b/devtools/client/inspector/markup/test/doc_markup_events_03.html
@@ -43,6 +43,7 @@
generatorNode.addEventListener("click", generator);
const anonGenerator = document.getElementById("anon-generator");
+ // eslint-disable-next-line require-yield
anonGenerator.addEventListener("click", function* () {
alert("anonGenerator");
});
@@ -86,6 +87,7 @@
}
};
+ // eslint-disable-next-line require-yield
function* generator() {
alert("generator");
}
diff --git a/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html b/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html
index 0e3bf0a57f..d4fc13042f 100644
--- a/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html
+++ b/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html
@@ -3,6 +3,24 @@
<head>
<meta charset="utf-8">
<title>Markup-view Linkify ARIA attributes</title>
+ <script>
+ "use strict";
+ class TestComponent extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({mode: 'open'});
+
+ this.shadowRoot.innerHTML = `
+ <button
+ id="aria-describedby-shadow-dom"
+ aria-describedby="describedby01 describedbyshadow"
+ ></button>
+ <div id="describedbyshadow">#describedbyshadow</div>
+ `;
+ }
+ }
+ customElements.define('test-component', TestComponent);
+ </script>
</head>
<body>
<div id="aria-activedescendant"
@@ -40,5 +58,9 @@
<div id="aria-owns" aria-owns="owns01 owns02">aria-owns test</div>
<div id="owns01">#owns01</div>
<div id="owns02">#owns02</div>
+
+ <test-component></test-component>
+
+ <div id="empty-attributes" aria-activedescendant=" " aria-details=" "></div>
</body>
</html>
diff --git a/devtools/client/inspector/markup/test/resources/doc_markup_links_base.html b/devtools/client/inspector/markup/test/resources/doc_markup_links_base.html
new file mode 100644
index 0000000000..55b5350ab5
--- /dev/null
+++ b/devtools/client/inspector/markup/test/resources/doc_markup_links_base.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Markup-view links with base attribute</title>
+ <base href="../">
+ </head>
+ <body>
+ <img src="doc_markup_tooltip.png">
+ Test relative links with base attributes.
+ </body>
+</html>
diff --git a/devtools/client/inspector/markup/views/element-editor.js b/devtools/client/inspector/markup/views/element-editor.js
index f538c2f6a9..c7e47c0a7c 100644
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -878,7 +878,7 @@ ElementEditor.prototype = {
// Create links in the attribute value, and truncate long attribute values if needed.
for (const token of parsedLinksData) {
- if (token.type === "string") {
+ if (token.type === "string" || token.value?.trim() === "") {
attributeValueEl.appendChild(
this.doc.createTextNode(this._truncateAttributeValue(token.value))
);
diff --git a/devtools/client/inspector/node-picker.js b/devtools/client/inspector/node-picker.js
index 24b53b51e0..ca837b12f1 100644
--- a/devtools/client/inspector/node-picker.js
+++ b/devtools/client/inspector/node-picker.js
@@ -22,11 +22,9 @@ loader.lazyRequireGetter(
*
* @param {Commands} commands
* The commands object with all interfaces defined from devtools/shared/commands/
- * @param {Selection} selection
- * The global Selection object
*/
class NodePicker extends EventEmitter {
- constructor(commands, selection) {
+ constructor(commands) {
super();
this.commands = commands;
this.targetCommand = commands.targetCommand;
@@ -305,7 +303,7 @@ class NodePicker extends EventEmitter {
* When the picker is canceled, stop the picker, and make sure the toolbox
* gets the focus.
*/
- #onCanceled = data => {
+ #onCanceled = () => {
return this.stop({ canceled: true });
};
}
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,
diff --git a/devtools/client/inspector/shared/highlighters-overlay.js b/devtools/client/inspector/shared/highlighters-overlay.js
index 6082b8b842..7f44f8b555 100644
--- a/devtools/client/inspector/shared/highlighters-overlay.js
+++ b/devtools/client/inspector/shared/highlighters-overlay.js
@@ -793,13 +793,8 @@ class HighlightersOverlay {
/**
* Called after the shapes highlighter was hidden.
- *
- * @param {Object} data
- * Data associated with the event.
- * Contains:
- * - {NodeFront} node: The NodeFront of the element that was highlighted.
*/
- onShapesHighlighterHidden(data) {
+ onShapesHighlighterHidden() {
this.emit(
"shapes-highlighter-hidden",
this.shapesHighlighterShown,
@@ -1178,7 +1173,7 @@ class HighlightersOverlay {
async restoreParentGridHighlighter(node) {
// Find the highlighter map entry for the subgrid whose parent grid is the given node.
const entry = Array.from(this.gridHighlighters.entries()).find(
- ([key, value]) => {
+ ([, value]) => {
return value?.parentGridNode === node;
}
);
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-autohide-config_03.js b/devtools/client/inspector/test/browser_inspector_highlighter-autohide-config_03.js
index 188b99a7cb..e90bd87ad0 100644
--- a/devtools/client/inspector/test/browser_inspector_highlighter-autohide-config_03.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-autohide-config_03.js
@@ -60,7 +60,7 @@ add_task(async function () {
somehow not overwritten and fires another "highlighter-hidden" event.
*/
let wasEmitted = false;
- const waitForExtraEvent = new Promise((resolve, reject) => {
+ const waitForExtraEvent = new Promise(resolve => {
const _handler = () => {
wasEmitted = true;
resolve();
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-events.js b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-events.js
index 0c05aa219f..5fa5567e3f 100644
--- a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-events.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-events.js
@@ -60,10 +60,10 @@ const MOVE_EVENTS_DATA = [
// Mouse initialization for right snapping
{
type: "mouse",
- x: (width, height) => width - 5,
+ x: width => width - 5,
y: 0,
expected: {
- x: (width, height) => width - 5,
+ x: width => width - 5,
y: 0,
},
},
@@ -73,7 +73,7 @@ const MOVE_EVENTS_DATA = [
key: "VK_RIGHT",
shift: true,
expected: {
- x: (width, height) => width,
+ x: width => width,
y: 0,
},
desc: "Right snapping to x=max window width available",
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js
index d9413e5d39..37d3070c04 100644
--- a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js
@@ -65,14 +65,14 @@ const TEST_DATA = [
},
{
desc: "Move the mouse to the top left",
- getCoordinates: (width, height) => {
+ getCoordinates: () => {
return { x: 0, y: 0 };
},
expectedPositions: { top: false, right: true, left: false },
},
{
desc: "Move the mouse to the top right",
- getCoordinates: (width, height) => {
+ getCoordinates: width => {
return { x: width, y: 0 };
},
expectedPositions: { top: false, right: false, left: true },
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_01.js b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_01.js
index c50dee30b0..bfdfd12cd8 100644
--- a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_01.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_01.js
@@ -58,7 +58,6 @@ async function hasArrowsAndLabelsAndHandlers({ getElementAttribute }) {
async function isHiddenForNonPositionedNonSizedElement({
show,
- hide,
isElementHidden,
}) {
info("Asking to show the highlighter on an inline, non p ositioned element");
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-measure_03.js b/devtools/client/inspector/test/browser_inspector_highlighter-measure_03.js
index 906284ba86..dbe70d83ae 100644
--- a/devtools/client/inspector/test/browser_inspector_highlighter-measure_03.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-measure_03.js
@@ -16,10 +16,10 @@ const WIDTH = 160;
const HEIGHT = 100;
const HANDLER_MAP = {
- top(areaWidth, areaHeight) {
+ top(areaWidth) {
return { x: Math.round(areaWidth / 2), y: 0 };
},
- topright(areaWidth, areaHeight) {
+ topright(areaWidth) {
return { x: areaWidth, y: 0 };
},
right(areaWidth, areaHeight) {
@@ -37,7 +37,7 @@ const HANDLER_MAP = {
left(areaWidth, areaHeight) {
return { x: 0, y: Math.round(areaHeight / 2) };
},
- topleft(areaWidth, areaHeight) {
+ topleft() {
return { x: 0, y: 0 };
},
};
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-measure_04.js b/devtools/client/inspector/test/browser_inspector_highlighter-measure_04.js
index d9dcd5d89f..8493981dd3 100644
--- a/devtools/client/inspector/test/browser_inspector_highlighter-measure_04.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-measure_04.js
@@ -18,10 +18,10 @@ const X_OFFSET = 15;
const Y_OFFSET = 10;
const HANDLER_MAP = {
- top(areaWidth, areaHeight) {
+ top(areaWidth) {
return { x: Math.round(areaWidth / 2), y: 0 };
},
- topright(areaWidth, areaHeight) {
+ topright(areaWidth) {
return { x: areaWidth, y: 0 };
},
right(areaWidth, areaHeight) {
@@ -39,7 +39,7 @@ const HANDLER_MAP = {
left(areaWidth, areaHeight) {
return { x: 0, y: Math.round(areaHeight / 2) };
},
- topleft(areaWidth, areaHeight) {
+ topleft() {
return { x: 0, y: 0 };
},
};
diff --git a/devtools/client/inspector/test/browser_inspector_sidebarstate.js b/devtools/client/inspector/test/browser_inspector_sidebarstate.js
index 396e78c91f..6ccc6df6f4 100644
--- a/devtools/client/inspector/test/browser_inspector_sidebarstate.js
+++ b/devtools/client/inspector/test/browser_inspector_sidebarstate.js
@@ -122,8 +122,8 @@ function checkTelemetryResults() {
const expected = TELEMETRY_DATA[i];
// ignore timestamp
- ok(timestamp > 0, "timestamp is greater than 0");
- ok(extra.time_open > 0, "time_open is greater than 0");
+ Assert.greater(timestamp, 0, "timestamp is greater than 0");
+ Assert.greater(Number(extra.time_open), 0, "time_open is greater than 0");
is(category, expected.category, "category is correct");
is(method, expected.method, "method is correct");
is(object, expected.object, "object is correct");
diff --git a/devtools/client/inspector/test/browser_inspector_switch-to-inspector-on-pick.js b/devtools/client/inspector/test/browser_inspector_switch-to-inspector-on-pick.js
index 171f4f8e7f..2bcd2e9873 100644
--- a/devtools/client/inspector/test/browser_inspector_switch-to-inspector-on-pick.js
+++ b/devtools/client/inspector/test/browser_inspector_switch-to-inspector-on-pick.js
@@ -104,7 +104,7 @@ function checkResults() {
is(method, expected.method, "method is correct");
is(object, expected.object, "object is correct");
is(value, null, "value is correct");
- ok(extra.width > 0, "width is greater than 0");
+ Assert.greater(Number(extra.width), 0, "width is greater than 0");
checkExtra("host", extra, expected);
checkExtra("start_state", extra, expected);
diff --git a/devtools/client/inspector/toolsidebar.js b/devtools/client/inspector/toolsidebar.js
index cff5eb96fa..422ae76b43 100644
--- a/devtools/client/inspector/toolsidebar.js
+++ b/devtools/client/inspector/toolsidebar.js
@@ -151,10 +151,8 @@ ToolSidebar.prototype = {
* @param {String} tabId The ID of the tab that was used to register it, or
* the tab id attribute value if the tab existed before the sidebar
* got created.
- * @param {String} tabPanelId Optional. If provided, this ID will be used
- * instead of the tabId to retrieve and remove the corresponding <tabpanel>
*/
- removeTab(tabId, tabPanelId) {
+ removeTab(tabId) {
this._tabbar.removeTab(tabId);
this.emit("tab-unregistered", tabId);