diff options
Diffstat (limited to 'devtools/client/shared/components')
22 files changed, 112 insertions, 40 deletions
diff --git a/devtools/client/shared/components/SmartTrace.js b/devtools/client/shared/components/SmartTrace.js index d9613be7b8..a427bca86e 100644 --- a/devtools/client/shared/components/SmartTrace.js +++ b/devtools/client/shared/components/SmartTrace.js @@ -27,6 +27,9 @@ const { const { getDisplayURL, } = require("resource://devtools/client/debugger/src/utils/sources-tree/getURL.js"); +const { + getFormattedSourceId, +} = require("resource://devtools/client/debugger/src/utils/source.js"); class SmartTrace extends Component { static get propTypes() { @@ -253,8 +256,10 @@ class SmartTrace extends Component { // 'id' isn't used by Frames, but by selectFrame callback below id: sourceId, url: sourceUrl, - // 'displayURL' might be used by FrameComponent via getFilename - displayURL: getDisplayURL(sourceUrl), + // Used by FrameComponent + shortName: sourceUrl + ? getDisplayURL(sourceUrl).filename + : getFormattedSourceId(sourceId), }, }; let location = generatedLocation; @@ -265,8 +270,8 @@ class SmartTrace extends Component { column: originalLocation.column, source: { url: originalLocation.url, - // 'displayURL' might be used by FrameComponent via getFilename - displayURL: getDisplayURL(originalLocation.url), + // Used by FrameComponent + shortName: getDisplayURL(originalLocation.url).filename, }, }; } diff --git a/devtools/client/shared/components/Tree.js b/devtools/client/shared/components/Tree.js index b1e9e18780..23b725bcfe 100644 --- a/devtools/client/shared/components/Tree.js +++ b/devtools/client/shared/components/Tree.js @@ -51,7 +51,7 @@ class ArrowExpander extends Component { }; } - shouldComponentUpdate(nextProps, nextState) { + shouldComponentUpdate(nextProps) { return this.props.expanded !== nextProps.expanded; } @@ -555,11 +555,11 @@ class Tree extends Component { } // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507 - UNSAFE_componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps() { this._autoExpand(); } - componentDidUpdate(prevProps, prevState) { + componentDidUpdate(prevProps) { if (this.props.focused && prevProps.focused !== this.props.focused) { this._scrollNodeIntoView(this.props.focused); } diff --git a/devtools/client/shared/components/VirtualizedTree.js b/devtools/client/shared/components/VirtualizedTree.js index 4f8dab1bd5..de388a2e09 100644 --- a/devtools/client/shared/components/VirtualizedTree.js +++ b/devtools/client/shared/components/VirtualizedTree.js @@ -300,7 +300,7 @@ class Tree extends Component { } // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507 - UNSAFE_componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps() { this._autoExpand(); this._updateHeight(); } @@ -559,10 +559,8 @@ class Tree extends Component { /** * Fired on a scroll within the tree's container, updates * the stored position of the view port to handle virtual view rendering. - * - * @param {Event} e */ - _onScroll(e) { + _onScroll() { this.setState({ scroll: Math.max(this.refs.tree.scrollTop, 0), height: this.refs.tree.clientHeight, @@ -882,7 +880,7 @@ class ArrowExpanderClass extends Component { }; } - shouldComponentUpdate(nextProps, nextState) { + shouldComponentUpdate(nextProps) { return ( this.props.item !== nextProps.item || this.props.visible !== nextProps.visible || diff --git a/devtools/client/shared/components/menu/MenuButton.js b/devtools/client/shared/components/menu/MenuButton.js index 3367987c3c..4a3b1e5c48 100644 --- a/devtools/client/shared/components/menu/MenuButton.js +++ b/devtools/client/shared/components/menu/MenuButton.js @@ -427,9 +427,12 @@ class MenuButton extends PureComponent { buttonProps.className = buttonProps.className ? `${buttonProps.className} ${iconClass}` : iconClass; - buttonProps.style = { - "--menuitem-icon-image": "url(" + this.props.icon + ")", - }; + // `icon` may be a boolean and the icon URL will be set in CSS. + if (typeof this.props.icon == "string") { + buttonProps.style = { + "--menuitem-icon-image": "url(" + this.props.icon + ")", + }; + } } if (this.state.isMenuInitialized) { diff --git a/devtools/client/shared/components/menu/MenuList.js b/devtools/client/shared/components/menu/MenuList.js index 4c355cca10..dafcc407bc 100644 --- a/devtools/client/shared/components/menu/MenuList.js +++ b/devtools/client/shared/components/menu/MenuList.js @@ -55,7 +55,7 @@ class MenuList extends PureComponent { this.notifyHighlightedChildChange(e.target.id); } - onMouseOutOrBlur(e) { + onMouseOutOrBlur() { const hoveredElem = this.wrapperRef.querySelector(":hover"); if (!hoveredElem) { this.notifyHighlightedChildChange(null); diff --git a/devtools/client/shared/components/object-inspector/utils/node.js b/devtools/client/shared/components/object-inspector/utils/node.js index 1ee0255d1d..0d049e1c4b 100644 --- a/devtools/client/shared/components/object-inspector/utils/node.js +++ b/devtools/client/shared/components/object-inspector/utils/node.js @@ -282,7 +282,11 @@ function nodeHasEntries(item) { className === "FormData" || className === "MIDIInputMap" || className === "MIDIOutputMap" || - className === "HighlightRegistry" + className === "HighlightRegistry" || + // @backward-compat { version 125 } Support for enumerate CustomStateSet items was + // added in 125. When connecting to older server, we don't want to show the <entries> + // node for them. The extra check can be removed once 125 hits release. + (className === "CustomStateSet" && Array.isArray(value.preview?.items)) ); } diff --git a/devtools/client/shared/components/reps/reps/element-node.js b/devtools/client/shared/components/reps/reps/element-node.js index a31fb4225b..af38cc0f6f 100644 --- a/devtools/client/shared/components/reps/reps/element-node.js +++ b/devtools/client/shared/components/reps/reps/element-node.js @@ -180,7 +180,7 @@ define(function (require, exports, module) { attributeKeys.splice(attributeKeys.indexOf("id"), 1); attributeKeys.unshift("id"); } - const attributeElements = attributeKeys.reduce((arr, name, i, keys) => { + const attributeElements = attributeKeys.reduce((arr, name) => { const value = attributes[name]; let title = isLongString(value) ? value.initial : value; diff --git a/devtools/client/shared/components/reps/reps/error.js b/devtools/client/shared/components/reps/reps/error.js index 617bf8c8a2..688d10ba89 100644 --- a/devtools/client/shared/components/reps/reps/error.js +++ b/devtools/client/shared/components/reps/reps/error.js @@ -161,7 +161,7 @@ define(function (require, exports, module) { return stack; } - parseStackString(preview.stack).forEach((frame, index, frames) => { + parseStackString(preview.stack).forEach((frame, index) => { let onLocationClick; const { filename, lineNumber, columnNumber, functionName, location } = frame; diff --git a/devtools/client/shared/components/reps/reps/function.js b/devtools/client/shared/components/reps/reps/function.js index 54d8905c20..93d77b1392 100644 --- a/devtools/client/shared/components/reps/reps/function.js +++ b/devtools/client/shared/components/reps/reps/function.js @@ -118,7 +118,7 @@ define(function (require, exports, module) { return returnSpan; } - function getClassTitle(grip) { + function getClassTitle() { return span( { className: "objectTitle", diff --git a/devtools/client/shared/components/reps/reps/grip-map.js b/devtools/client/shared/components/reps/reps/grip-map.js index dcb7c50972..918e37ac8c 100644 --- a/devtools/client/shared/components/reps/reps/grip-map.js +++ b/devtools/client/shared/components/reps/reps/grip-map.js @@ -168,7 +168,7 @@ define(function (require, exports, module) { return a - b; }); - return indexes.map((index, i) => { + return indexes.map(index => { const [key, entryValue] = entries[index]; const value = entryValue.value !== undefined ? entryValue.value : entryValue; diff --git a/devtools/client/shared/components/reps/reps/grip.js b/devtools/client/shared/components/reps/reps/grip.js index 68f356858a..606ecfab8d 100644 --- a/devtools/client/shared/components/reps/reps/grip.js +++ b/devtools/client/shared/components/reps/reps/grip.js @@ -375,7 +375,7 @@ define(function (require, exports, module) { } // Registration - function supportsObject(object, noGrip = false) { + function supportsObject(object) { if (object?.class === "DeadObject") { return true; } diff --git a/devtools/client/shared/components/reps/reps/text-node.js b/devtools/client/shared/components/reps/reps/text-node.js index ae9a7bb109..474e647a9d 100644 --- a/devtools/client/shared/components/reps/reps/text-node.js +++ b/devtools/client/shared/components/reps/reps/text-node.js @@ -123,13 +123,13 @@ define(function (require, exports, module) { }); } - function getTitle(grip) { + function getTitle() { const title = "#text"; return span({}, title); } // Registration - function supportsObject(grip, noGrip = false) { + function supportsObject(grip) { return grip?.preview && grip?.class == "Text"; } diff --git a/devtools/client/shared/components/tabs/TabBar.js b/devtools/client/shared/components/tabs/TabBar.js index 730e8c7802..cbd1e927ae 100644 --- a/devtools/client/shared/components/tabs/TabBar.js +++ b/devtools/client/shared/components/tabs/TabBar.js @@ -73,7 +73,7 @@ class Tabbar extends Component { super(props, context); const { activeTabId, children = [] } = props; const tabs = this.createTabs(children); - const activeTab = tabs.findIndex((tab, index) => tab.id === activeTabId); + const activeTab = tabs.findIndex(tab => tab.id === activeTabId); this.state = { activeTab: activeTab === -1 ? 0 : activeTab, @@ -103,7 +103,7 @@ class Tabbar extends Component { UNSAFE_componentWillReceiveProps(nextProps) { const { activeTabId, children = [] } = nextProps; const tabs = this.createTabs(children); - const activeTab = tabs.findIndex((tab, index) => tab.id === activeTabId); + const activeTab = tabs.findIndex(tab => tab.id === activeTabId); if ( activeTab !== this.state.activeTab || diff --git a/devtools/client/shared/components/tabs/Tabs.js b/devtools/client/shared/components/tabs/Tabs.js index a265032f9e..bbb061503e 100644 --- a/devtools/client/shared/components/tabs/Tabs.js +++ b/devtools/client/shared/components/tabs/Tabs.js @@ -4,7 +4,7 @@ "use strict"; -define(function (require, exports, module) { +define(function (require, exports) { const { Component, createRef, diff --git a/devtools/client/shared/components/test/chrome/test_list_keyboard.html b/devtools/client/shared/components/test/chrome/test_list_keyboard.html index 7558404ed2..f350c1241c 100644 --- a/devtools/client/shared/components/test/chrome/test_list_keyboard.html +++ b/devtools/client/shared/components/test/chrome/test_list_keyboard.html @@ -76,6 +76,27 @@ window.onload = function() { el.focus(); } + function getExpectedActiveElementForFinalShiftTab() { + if (!SpecialPowers.getBoolPref("dom.disable_tab_focus_to_root_element")) { + return listEl.ownerDocument.documentElement; + } + + // When tab focus mode is applied, the "Run Chrome Tests" button is not + // focusable, so this Shift+Tab moves the focus to a Chrome UI element + // instead of the "Run Chrome Tests" button, which makes the focus to + // move to a browsing context that has a different top level browsing context + // than the current browsing context. Since top level browsing contexts are + // different, the activeElement in the old document is not cleared. Also + // this is only the case when e10s is enabled. + if (SpecialPowers.getBoolPref("accessibility.tabfocus_applies_to_xul") && + SpecialPowers.Services.appinfo.browserTabsRemoteAutostart) { + return listEl; + } + + // <body> + return defaultFocus; + } + const tests = [{ name: "Test default List state. Keyboard focus is set to document body by default.", state: { current: null, active: null }, @@ -246,7 +267,7 @@ window.onload = function() { synthesizeKey("KEY_Tab", { shiftKey: true }); }, state: { current: 0, active: null }, - activeElement: listEl.ownerDocument.documentElement, + activeElement: getExpectedActiveElementForFinalShiftTab(), }]; for (const test of tests) { diff --git a/devtools/client/shared/components/test/chrome/test_notification_box_04.html b/devtools/client/shared/components/test/chrome/test_notification_box_04.html index 07ad9af25c..fde11a7bff 100644 --- a/devtools/client/shared/components/test/chrome/test_notification_box_04.html +++ b/devtools/client/shared/components/test/chrome/test_notification_box_04.html @@ -43,7 +43,7 @@ window.onload = async function () { null, PriorityLevels.PRIORITY_INFO_LOW, [mdnLinkButton], - (e) => false, + () => false, ); const linkNode = notificationNode.querySelector( diff --git a/devtools/client/shared/components/test/chrome/test_notification_box_05.html b/devtools/client/shared/components/test/chrome/test_notification_box_05.html index b3a4e96378..10d6b8971f 100644 --- a/devtools/client/shared/components/test/chrome/test_notification_box_05.html +++ b/devtools/client/shared/components/test/chrome/test_notification_box_05.html @@ -42,7 +42,7 @@ window.onload = async function () { null, PriorityLevels.PRIORITY_INFO_LOW, [], - (e) => false, + () => false, ); // Ensure close button is not present diff --git a/devtools/client/shared/components/test/chrome/test_tree-view_01.html b/devtools/client/shared/components/test/chrome/test_tree-view_01.html index 0acae4c1dc..7a97dfa917 100644 --- a/devtools/client/shared/components/test/chrome/test_tree-view_01.html +++ b/devtools/client/shared/components/test/chrome/test_tree-view_01.html @@ -63,6 +63,26 @@ window.onload = function() { el.focus(); } + function getExpectedActiveElementForFinalShiftTab() { + if (!SpecialPowers.getBoolPref("dom.disable_tab_focus_to_root_element")) { + return treeViewEl.ownerDocument.documentElement; + } + + // When tab focus mode is applied, the "Run Chrome Tests" button is not + // focusable, so this Shift+Tab moves the focus to a Chrome UI element + // instead of the "Run Chrome Tests" button, which makes the focus to + // move to a browsing context that has a different top level browsing context + // than the current browsing context. Since top level browsing contexts are + // different, the activeElement in the old document is not cleared. Also + // this is only the case when e10s is enabled. + if (SpecialPowers.getBoolPref("accessibility.tabfocus_applies_to_xul") && + SpecialPowers.Services.appinfo.browserTabsRemoteAutostart) { + return treeViewEl; + } + + return treeViewEl.ownerDocument.body; + } + const tests = [{ name: "Test default TreeView state. Keyboard focus is set to document " + "body by default.", @@ -255,8 +275,9 @@ window.onload = function() { synthesizeKey("KEY_Tab", { shiftKey: true }); }, state: { selected: "/B", active: null }, - activeElement: treeViewEl.ownerDocument.documentElement, - }]; + activeElement: getExpectedActiveElementForFinalShiftTab(), + } + ]; for (const test of tests) { const { action, event, state, name } = test; diff --git a/devtools/client/shared/components/test/chrome/test_tree_14.html b/devtools/client/shared/components/test/chrome/test_tree_14.html index d68d87d6c5..65557b167c 100644 --- a/devtools/client/shared/components/test/chrome/test_tree_14.html +++ b/devtools/client/shared/components/test/chrome/test_tree_14.html @@ -82,6 +82,26 @@ window.onload = async function() { }, }; + function getExpectedActiveElementForFinalShiftTab() { + if (!SpecialPowers.getBoolPref("dom.disable_tab_focus_to_root_element")) { + return document.documentElement; + } + + // When tab focus mode is applied, the "Run Chrome Tests" button is not + // focusable, so this Shift+Tab moves the focus to a Chrome UI element + // instead of the "Run Chrome Tests" button, which makes the focus to + // move to a browsing context that has a different top level browsing context + // than the current browsing context. Since top level browsing contexts are + // different, the activeElement in the old document is not cleared. Also + // this is only the case when e10s is enabled. + if (SpecialPowers.getBoolPref("accessibility.tabfocus_applies_to_xul") && + SpecialPowers.Services.appinfo.browserTabsRemoteAutostart) { + return "tree"; + } + + return document.body; + } + const tests = [{ name: "Test default Tree props. Keyboard focus is set to document body by default.", props: { focused: undefined, active: undefined }, @@ -204,7 +224,7 @@ window.onload = async function() { synthesizeKey("KEY_Tab", { shiftKey: true }); }, props: { focused: "A", active: null }, - activeElement: document.documentElement, + activeElement: getExpectedActiveElementForFinalShiftTab(), }]; for (const test of tests) { diff --git a/devtools/client/shared/components/test/node/__mocks__/object-front.js b/devtools/client/shared/components/test/node/__mocks__/object-front.js index def182111d..5913deb82e 100644 --- a/devtools/client/shared/components/test/node/__mocks__/object-front.js +++ b/devtools/client/shared/components/test/node/__mocks__/object-front.js @@ -14,7 +14,7 @@ function ObjectFront(grip, overrides) { }) ); }, - enumProperties(options) { + enumProperties() { return Promise.resolve( this.getIterator({ ownProperties: {}, @@ -43,7 +43,7 @@ function ObjectFront(grip, overrides) { // Declared here so we can override it. getIterator(res) { return { - slice(start, count) { + slice() { return Promise.resolve(res); }, }; diff --git a/devtools/client/shared/components/test/node/components/tree.test.js b/devtools/client/shared/components/test/node/components/tree.test.js index c70b66e8ff..eb6f95fa7d 100644 --- a/devtools/client/shared/components/test/node/components/tree.test.js +++ b/devtools/client/shared/components/test/node/components/tree.test.js @@ -50,12 +50,12 @@ function mountTree(overrides = {}) { getKey: x => `key-${x}`, itemHeight: 1, onFocus: x => { - this.setState(previousState => { + this.setState(() => { return { focused: x }; }); }, onActivate: x => { - this.setState(previousState => { + this.setState(() => { return { active: x }; }); }, @@ -207,7 +207,7 @@ describe("Tree", () => { }); it("calls shouldItemUpdate when provided", () => { - const shouldItemUpdate = jest.fn((prev, next) => true); + const shouldItemUpdate = jest.fn(() => true); const wrapper = mountTree({ shouldItemUpdate, }); @@ -636,7 +636,7 @@ describe("Tree", () => { it("renders as expected navigating with arrows on unexpandable roots", () => { const wrapper = mountTree({ focused: "A", - isExpandable: item => false, + isExpandable: () => false, }); expect(formatTree(wrapper)).toMatchSnapshot(); diff --git a/devtools/client/shared/components/tree/ObjectProvider.js b/devtools/client/shared/components/tree/ObjectProvider.js index 48d577ff4d..80543df73a 100644 --- a/devtools/client/shared/components/tree/ObjectProvider.js +++ b/devtools/client/shared/components/tree/ObjectProvider.js @@ -4,7 +4,7 @@ "use strict"; // Make this available to both AMD and CJS environments -define(function (require, exports, module) { +define(function (require, exports) { /** * Implementation of the default data provider. A provider is state less * object responsible for transformation data (usually a state) to |