mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1330099 - Enable object-shorthand eslint rule. r=jdescottes 

Differential Revision: https://phabricator.services.mozilla.com/D153567
This commit is contained in:
Mark Banner 2022-08-03 14:57:05 +00:00
Родитель fa741a93ea
Коммит a6855db57e
381 изменённых файлов: 2995 добавлений и 3037 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

4
devtools/.eslintrc.js
Просмотреть файл

@ -261,10 +261,6 @@ module.exports = {
// Disallow global and local variables that aren't used, but allow unused
// function arguments.
"no-unused-vars": ["error", { args: "none", vars: "all" }],
// Don't require method and property shorthand syntax for object literals.
// We use this in the code a lot, but not consistently, and this seems more
// like something to check at code review time.
"object-shorthand": "off",
// Enforce using `let` only when variables are reassigned.
"prefer-const": ["error", { destructuring: "all" }],
// Require use of the second argument for parseInt().

2
devtools/client/aboutdebugging/src/middleware/event-recording.js
Просмотреть файл

@ -185,7 +185,7 @@ function recordConnectionAttempt(connectionId, runtimeId, status, store) {
connection_id: connectionId,
connection_type: runtime.type,
runtime_id: getTelemetryRuntimeId(runtimeId),
status: status,
status,
});
}

6
devtools/client/aboutdebugging/test/browser/browser_aboutdebugging_addons_debug_console.js
Просмотреть файл

@ -40,7 +40,7 @@ add_task(async function testWebExtensionsToolboxWebConsole() {
await installTemporaryExtensionFromXPI(
{
background: function() {
background() {
window.myWebExtensionAddonFunction = function() {
console.log(
"Background page function called",
@ -91,7 +91,7 @@ add_task(async function testWebExtensionsToolboxWebConsole() {
// Install another addon in order to ensure we don't get its logs
await installTemporaryExtensionFromXPI(
{
background: function() {
background() {
console.log("Other addon log");
const style = document.createElement("style");
@ -355,7 +355,7 @@ add_task(async function testWebExtensionTwoReloads() {
await installTemporaryExtensionFromXPI(
{
background: function() {
background() {
console.log("Background page log");
},
extraProperties: {

2
devtools/client/aboutdebugging/test/browser/browser_aboutdebugging_addons_debug_debugger.js
Просмотреть файл

@ -23,7 +23,7 @@ add_task(async () => {
await installTemporaryExtensionFromXPI(
{
background: function() {
background() {
window.someRandomMethodName = () => {
// This will not be referred from anywhere.
// However this is necessary to show as the source code in the debugger.

2
devtools/client/aboutdebugging/test/browser/browser_aboutdebugging_addons_debug_inspector.js
Просмотреть файл

@ -30,7 +30,7 @@ add_task(async function testWebExtensionsToolboxWebConsole() {
await installTemporaryExtensionFromXPI(
{
background: function() {
background() {
document.body.innerText = "Background Page Body Test Content";
},
id: ADDON_ID,

2
devtools/client/aboutdebugging/test/browser/browser_aboutdebugging_addons_debug_popup.js
Просмотреть файл

@ -160,7 +160,7 @@ async function installTestAddon(doc) {
// Install the extension.
await installTemporaryExtensionFromXPI(
{
background: function() {
background() {
const { browser } = this;
window.backgroundFunction = function() {
browser.test.sendMessage("onBackgroundFunctionCalled");

2
devtools/client/aboutdebugging/test/browser/browser_aboutdebugging_addons_debug_reload.js
Просмотреть файл

@ -31,7 +31,7 @@ add_task(async function testWebExtensionToolboxReload() {
await installTemporaryExtensionFromXPI(
{
background: function() {
background() {
console.log("background script executed " + Math.random());
},
id: ADDON_ID,

2
devtools/client/aboutdebugging/test/browser/browser_aboutdebugging_addons_debug_storage.js
Просмотреть файл

@ -16,7 +16,7 @@ add_task(async () => {
const { extension } = await installTemporaryExtensionFromXPI(
{
background: function() {
background() {
const open = indexedDB.open("TestDatabase", 1);
open.onupgradeneeded = function() {

2
devtools/client/aboutdebugging/test/browser/browser_aboutdebugging_fenix_runtime_display.js
Просмотреть файл

@ -80,7 +80,7 @@ add_task(async function() {
const mocks = new Mocks();
mocks.createUSBRuntime(RUNTIME_ID, {
channel: "nightly",
clientWrapper: clientWrapper,
clientWrapper,
deviceName: DEVICE_NAME,
isFenix: true,
name: SERVER_RUNTIME_NAME,

2
devtools/client/aboutdebugging/test/browser/browser_aboutdebugging_fenix_runtime_node_picker.js
Просмотреть файл

@ -22,7 +22,7 @@ add_task(async function() {
const mocks = new Mocks();
mocks.createUSBRuntime(RUNTIME_ID, {
channel: "nightly",
clientWrapper: clientWrapper,
clientWrapper,
deviceName: DEVICE_NAME,
isFenix: true,
name: SERVER_RUNTIME_NAME,

2
devtools/client/aboutdebugging/test/browser/helper-mocks.js
Просмотреть файл

@ -152,7 +152,7 @@ class Mocks {
this._usbRuntimes.push({
deviceId: runtimeInfo.deviceId || "test device id",
deviceName: runtimeInfo.deviceName || "test device name",
id: id,
id,
isFenix: runtimeInfo.isFenix,
shortName: runtimeInfo.shortName || "testshort",
socketPath: runtimeInfo.socketPath || "test/path",

4
devtools/client/aboutdebugging/test/browser/mocks/helper-client-wrapper-mock.js
Просмотреть файл

@ -62,7 +62,7 @@ function createClientMock() {
// no-op
getDeviceDescription: () => {},
// Return default preference value or null if no match.
getPreference: function(prefName) {
getPreference(prefName) {
if (prefName in this._preferences) {
return this._preferences[prefName];
}
@ -95,7 +95,7 @@ function createClientMock() {
// no-op
getFront: () => {},
// stores the preference locally (doesn't update about:config)
setPreference: function(prefName, value) {
setPreference(prefName, value) {
this._preferences[prefName] = value;
},
getPerformancePanelUrl: () => CHROME_URL_ROOT + "empty.html",

6
devtools/client/accessibility/components/AccessibilityTree.js
Просмотреть файл

@ -220,7 +220,7 @@ class AccessibilityTree extends Component {
toolboxDoc,
highlighted,
decorator: {
getRowClass: function() {
getRowClass() {
return highlighted ? ["highlighted"] : [];
},
},
@ -236,7 +236,7 @@ class AccessibilityTree extends Component {
object: getAccessibilityTreeRoot(),
mode: MODE.SHORT,
provider: new Provider(accessibles, filtered, dispatch),
columns: columns,
columns,
className,
renderValue: this.renderValue,
renderRow,
@ -256,7 +256,7 @@ class AccessibilityTree extends Component {
return true;
},
onContextMenuTree: function(e) {
onContextMenuTree(e) {
// If context menu event is triggered on (or bubbled to) the TreeView, it was
// done via keyboard. Open context menu for currently selected row.
let row = this.getSelectedRow();

2
devtools/client/application/src/components/routing/Sidebar.js
Просмотреть файл

@ -47,7 +47,7 @@ class Sidebar extends PureComponent {
},
navItems.map(page => {
return SidebarItem({
page: page,
page,
key: `sidebar-item-${page}`,
isSelected: isSelected(page),
});

2
devtools/client/application/test/node/components/service-workers/components_application_panel-Registration.test.js
Просмотреть файл

@ -75,7 +75,7 @@ describe("Registration", () => {
const wrapper = shallow(
Registration({
isDebugEnabled: false,
registration: registration,
registration,
store,
})
).dive();

6
devtools/client/debugger/test/mochitest/shared-head.js
Просмотреть файл

@ -29,9 +29,9 @@ function createDebuggerContext(toolbox) {
return {
...win.dbg,
commands: toolbox.commands,
toolbox: toolbox,
win: win,
panel: panel,
toolbox,
win,
panel,
};
}

48
devtools/client/definitions.js
Просмотреть файл

@ -119,11 +119,11 @@ Tools.options = {
tooltip: l10n("optionsButton.tooltip"),
inMenu: false,
isToolSupported: function() {
isToolSupported() {
return true;
},
build: function(iframeWindow, toolbox, commands) {
build(iframeWindow, toolbox, commands) {
return new OptionsPanel(iframeWindow, toolbox, commands);
},
};
@ -153,15 +153,15 @@ Tools.inspector = {
// preventRaisingOnKey is used to keep the focus on the content window for shortcuts
// that trigger the element picker.
preventRaisingOnKey: true,
onkey: function(panel, toolbox) {
onkey(panel, toolbox) {
toolbox.nodePicker.togglePicker();
},
isToolSupported: function(toolbox) {
isToolSupported(toolbox) {
return toolbox.target.hasActor("inspector");
},
build: function(iframeWindow, toolbox, commands) {
build(iframeWindow, toolbox, commands) {
return new InspectorPanel(iframeWindow, toolbox, commands);
},
};
@ -184,7 +184,7 @@ Tools.webConsole = {
inMenu: false,
preventClosingOnKey: true,
onkey: function(panel, toolbox) {
onkey(panel, toolbox) {
if (toolbox.splitConsole) {
return toolbox.focusConsoleInput();
}
@ -193,10 +193,10 @@ Tools.webConsole = {
return undefined;
},
isToolSupported: function() {
isToolSupported() {
return true;
},
build: function(iframeWindow, toolbox, commands) {
build(iframeWindow, toolbox, commands) {
return new WebConsolePanel(iframeWindow, toolbox, commands);
},
};
@ -217,10 +217,10 @@ Tools.jsdebugger = {
);
},
inMenu: false,
isToolSupported: function() {
isToolSupported() {
return true;
},
build: function(iframeWindow, toolbox, commands) {
build(iframeWindow, toolbox, commands) {
return new DebuggerPanel(iframeWindow, toolbox, commands);
},
};
@ -241,11 +241,11 @@ Tools.styleEditor = {
);
},
inMenu: false,
isToolSupported: function(toolbox) {
isToolSupported(toolbox) {
return toolbox.target.hasActor("styleSheets");
},
build: function(iframeWindow, toolbox, commands) {
build(iframeWindow, toolbox, commands) {
return new StyleEditorPanel(iframeWindow, toolbox, commands);
},
};
@ -266,7 +266,7 @@ Tools.performance = {
},
accesskey: l10n("performance.accesskey"),
inMenu: false,
isToolSupported: function(toolbox) {
isToolSupported(toolbox) {
// Only use the new performance panel on local tab toolboxes, as they are guaranteed
// to have a performance actor.
// Remote tab toolboxes (eg about:devtools-toolbox from about:debugging) should not
@ -275,7 +275,7 @@ Tools.performance = {
// Also accept the Browser Toolbox, so that we can profile its process via a second browser toolbox.
return toolbox.target.isLocalTab || toolbox.isBrowserToolbox;
},
build: function(frame, toolbox, commands) {
build(frame, toolbox, commands) {
return new NewPerformancePanel(frame, toolbox, commands);
},
};
@ -290,11 +290,11 @@ Tools.memory = {
panelLabel: l10n("memory.panelLabel"),
tooltip: l10n("memory.tooltip"),
isToolSupported: function(toolbox) {
isToolSupported(toolbox) {
return !toolbox.target.isAddon && !toolbox.target.isWorkerTarget;
},
build: function(frame, toolbox, commands) {
build(frame, toolbox, commands) {
return new MemoryPanel(frame, toolbox, commands);
},
};
@ -317,14 +317,14 @@ Tools.netMonitor = {
},
inMenu: false,
isToolSupported: function(toolbox) {
isToolSupported(toolbox) {
return (
toolbox.target.getTrait("networkMonitor") &&
!toolbox.target.isWorkerTarget
);
},
build: function(iframeWindow, toolbox, commands) {
build(iframeWindow, toolbox, commands) {
return new NetMonitorPanel(iframeWindow, toolbox, commands);
},
};
@ -347,11 +347,11 @@ Tools.storage = {
},
inMenu: false,
isToolSupported: function(toolbox) {
isToolSupported(toolbox) {
return toolbox.target.hasActor("storage");
},
build: function(iframeWindow, toolbox, commands) {
build(iframeWindow, toolbox, commands) {
return new StoragePanel(iframeWindow, toolbox, commands);
},
};
@ -374,11 +374,11 @@ Tools.dom = {
},
inMenu: false,
isToolSupported: function() {
isToolSupported() {
return true;
},
build: function(iframeWindow, toolbox, commands) {
build(iframeWindow, toolbox, commands) {
return new DomPanel(iframeWindow, toolbox, commands);
},
};
@ -422,11 +422,11 @@ Tools.application = {
tooltip: l10n("application.tooltip"),
inMenu: false,
isToolSupported: function(toolbox) {
isToolSupported(toolbox) {
return toolbox.target.hasActor("manifest");
},
build: function(iframeWindow, toolbox, commands) {
build(iframeWindow, toolbox, commands) {
return new ApplicationPanel(iframeWindow, toolbox, commands);
},
};

2
devtools/client/dom/content/actions/filter.js
Просмотреть файл

@ -10,7 +10,7 @@ const constants = require("devtools/client/dom/content/constants");
*/
function setVisibilityFilter(filter) {
return {
filter: filter,
filter,
type: constants.SET_VISIBILITY_FILTER,
};
}

8
devtools/client/dom/content/actions/grips.js
Просмотреть файл

@ -11,7 +11,7 @@ const constants = require("devtools/client/dom/content/constants");
*/
function requestProperties(grip) {
return {
grip: grip,
grip,
type: constants.FETCH_PROPERTIES,
status: "start",
error: false,
@ -23,11 +23,11 @@ function requestProperties(grip) {
*/
function receiveProperties(grip, response, error) {
return {
grip: grip,
grip,
type: constants.FETCH_PROPERTIES,
status: "done",
response: response,
error: error,
response,
error,
};
}

4
devtools/client/dom/content/dom-decorator.js
Просмотреть файл

@ -14,7 +14,7 @@ function DomDecorator() {}
* appending an icon to read only properties.
*/
DomDecorator.prototype = {
getRowClass: function(object) {
getRowClass(object) {
if (object instanceof Property) {
const value = object.value;
const names = [];
@ -39,7 +39,7 @@ DomDecorator.prototype = {
* Return custom React template for specified object. The template
* might depend on specified column.
*/
getValueRep: function(value, colId) {},
getValueRep(value, colId) {},
};
// Exports from this module

4
devtools/client/dom/content/dom-view.js
Просмотреть файл

@ -32,7 +32,7 @@ function DomView(localStore) {
}
DomView.prototype = {
initialize: function(rootGrip) {
initialize(rootGrip) {
const content = document.querySelector("#content");
const mainFrame = MainFrame({
object: rootGrip,
@ -50,7 +50,7 @@ DomView.prototype = {
this.mainFrame = ReactDOM.render(provider, content);
},
onMessage: function(event) {
onMessage(event) {
const data = event.data;
const method = data.type;

12
devtools/client/dom/content/grip-provider.js
Просмотреть файл

@ -23,7 +23,7 @@ GripProvider.prototype = {
* Fetches properties from the backend. These properties might be
* displayed as child objects in e.g. a tree UI widget.
*/
getChildren: function(object) {
getChildren(object) {
let grip = object;
if (object instanceof Property) {
grip = this.getValue(object);
@ -43,7 +43,7 @@ GripProvider.prototype = {
return props;
},
hasChildren: function(object) {
hasChildren(object) {
if (object instanceof Property) {
const value = this.getValue(object);
if (!value) {
@ -71,7 +71,7 @@ GripProvider.prototype = {
return null;
},
getValue: function(object) {
getValue(object) {
if (object instanceof Property) {
const value = object.value;
return typeof value.value != "undefined"
@ -82,15 +82,15 @@ GripProvider.prototype = {
return object;
},
getLabel: function(object) {
getLabel(object) {
return object instanceof Property ? object.name : null;
},
getKey: function(object) {
getKey(object) {
return object instanceof Property ? object.key : null;
},
getType: function(object) {
getType(object) {
const grip = object?.getGrip ? object.getGrip() : object;
return grip.class ? grip.class : "";
},

2
devtools/client/dom/content/utils.js
Просмотреть файл

@ -8,7 +8,7 @@
* (all after the last dot).
*/
const DefaultL10N = {
getStr: function(key) {
getStr(key) {
const index = key.lastIndexOf(".");
return key.substr(index + 1);
},

32
devtools/client/dom/panel.js
Просмотреть файл

@ -117,7 +117,7 @@ DomPanel.prototype = {
// Events
refresh: function() {
refresh() {
// Do not refresh if the panel isn't visible.
if (!this.isPanelVisible()) {
return;
@ -142,18 +142,18 @@ DomPanel.prototype = {
* The panel is refreshed immediately if it's currently selected or lazily when the user
* actually selects it.
*/
forceRefresh: function() {
forceRefresh() {
this.shouldRefresh = true;
// This will end up calling scriptCommand execute method to retrieve the `window` grip
// on targetCommand.selectedTargetFront.
this.refresh();
},
_onTargetSelected: function({ targetFront }) {
_onTargetSelected({ targetFront }) {
this.forceRefresh();
},
onResourceAvailable: function(resources) {
onResourceAvailable(resources) {
for (const resource of resources) {
// Only consider top level document, and ignore remote iframes top document
if (
@ -170,7 +170,7 @@ DomPanel.prototype = {
/**
* Make sure the panel is refreshed (if needed) when it's selected.
*/
onPanelVisibilityChange: function() {
onPanelVisibilityChange() {
this.refresh();
},
@ -179,11 +179,11 @@ DomPanel.prototype = {
/**
* Return true if the DOM panel is currently selected.
*/
isPanelVisible: function() {
isPanelVisible() {
return this._toolbox.currentToolId === "dom";
},
getPrototypeAndProperties: async function(objectFront) {
async getPrototypeAndProperties(objectFront) {
if (!objectFront.actorID) {
console.error("No actor!", objectFront);
throw new Error("Failed to get object front.");
@ -214,33 +214,33 @@ DomPanel.prototype = {
return response;
},
openLink: function(url) {
openLink(url) {
openContentLink(url);
},
getRootGrip: async function() {
async getRootGrip() {
const { result } = await this._toolbox.commands.scriptCommand.execute(
"window"
);
return result;
},
postContentMessage: function(type, args) {
postContentMessage(type, args) {
const data = {
type: type,
args: args,
type,
args,
};
const event = new this.panelWin.MessageEvent("devtools/chrome/message", {
bubbles: true,
cancelable: true,
data: data,
data,
});
this.panelWin.dispatchEvent(event);
},
onContentMessage: function(event) {
onContentMessage(event) {
const data = event.data;
const method = data.type;
if (typeof this[method] == "function") {
@ -248,7 +248,7 @@ DomPanel.prototype = {
}
},
getToolbox: function() {
getToolbox() {
return this._toolbox;
},
@ -261,7 +261,7 @@ DomPanel.prototype = {
function exportIntoContentScope(win, obj, defineAs) {
const clone = Cu.createObjectIn(win, {
defineAs: defineAs,
defineAs,
});
const props = Object.getOwnPropertyNames(obj);

6
devtools/client/framework/browser-toolbox/Launcher.jsm
Просмотреть файл

@ -130,7 +130,7 @@ BrowserToolboxLauncher.prototype = {
/**
* Initializes the devtools server.
*/
_initServer: function() {
_initServer() {
if (this.devToolsServer) {
dumpn("The chrome toolbox server is already running.");
return;
@ -295,7 +295,7 @@ BrowserToolboxLauncher.prototype = {
/**
* Creates and initializes the profile & process for the remote debugger.
*/
_create: function() {
_create() {
dumpn("Initializing chrome debugging process.");
let command = Services.dirsvc.get("XREExeF", Ci.nsIFile).path;
@ -431,7 +431,7 @@ BrowserToolboxLauncher.prototype = {
/**
* Closes the remote debugging server and kills the toolbox process.
*/
close: async function() {
async close() {
if (this.closed) {
return;
}

2
devtools/client/framework/devtools-browser.js
Просмотреть файл

@ -415,7 +415,7 @@ var gDevToolsBrowser = (exports.gDevToolsBrowser = {
* @return {Promise} promise that resolves when the stylesheet is loaded (or rejects
* if it fails to load).
*/
loadBrowserStyleSheet: function(win) {
loadBrowserStyleSheet(win) {
if (this._browserStyleSheets.has(win)) {
return Promise.resolve();
}

8
devtools/client/framework/devtools.js
Просмотреть файл

@ -439,7 +439,7 @@ DevTools.prototype = {
* @param {Object} state
* A SessionStore state object that gets modified by reference
*/
saveDevToolsSession: function(state) {
saveDevToolsSession(state) {
state.browserConsole = BrowserConsoleManager.getBrowserConsoleSessionState();
state.browserToolbox = BrowserToolboxLauncher.getBrowserToolboxSessionState();
},
@ -447,7 +447,7 @@ DevTools.prototype = {
/**
* Restore the devtools session state as provided by SessionStore.
*/
restoreDevToolsSession: async function({ browserConsole, browserToolbox }) {
async restoreDevToolsSession({ browserConsole, browserToolbox }) {
if (browserToolbox) {
BrowserToolboxLauncher.init();
}
@ -747,7 +747,7 @@ DevTools.prototype = {
* Note that is will end up being cached in WebExtension codebase, via
* DevToolsExtensionPageContextParent.getDevToolsCommands.
*/
createCommandsForTabForWebExtension: function(tab) {
createCommandsForTabForWebExtension(tab) {
return CommandsFactory.forTab(tab, { isWebExtension: true });
},
@ -755,7 +755,7 @@ DevTools.prototype = {
* Compatibility layer for web-extensions. Used by DevToolsShim for
* toolkit/components/extensions/ext-c-toolkit.js
*/
openBrowserConsole: function() {
openBrowserConsole() {
const {
BrowserConsoleManager,
} = require("devtools/client/webconsole/browser-console-manager");

61
devtools/client/framework/selection.js
Просмотреть файл

@ -70,7 +70,7 @@ function Selection() {
}
Selection.prototype = {
_onMutations: function(mutations) {
_onMutations(mutations) {
let attributeChange = false;
let pseudoChange = false;
let detached = false;
@ -105,7 +105,7 @@ Selection.prototype = {
}
},
destroy: function() {
destroy() {
this.setWalker();
this._nodeFront = null;
},
@ -113,7 +113,7 @@ Selection.prototype = {
/**
* @param {WalkerFront|null} walker
*/
setWalker: function(walker = null) {
setWalker(walker = null) {
if (this._walker) {
this._removeWalkerFrontEventListeners(this._walker);
}
@ -148,7 +148,7 @@ Selection.prototype = {
* @param {TargetFront} front
* @emits detached-front
*/
onTargetDestroyed: function(targetFront) {
onTargetDestroyed(targetFront) {
// if the current walker belongs to the target that is destroyed, emit a `detached-front`
// event so consumers can act accordingly (e.g. in the inspector, another node will be
// selected)
@ -173,10 +173,7 @@ Selection.prototype = {
* - {Boolean} isSlotted: Is the selection representing the slotted version of
* the node.
*/
setNodeFront: function(
nodeFront,
{ reason = "unknown", isSlotted = false } = {}
) {
setNodeFront(nodeFront, { reason = "unknown", isSlotted = false } = {}) {
this.reason = reason;
// If an inlineTextChild text node is being set, then set it's parent instead.
@ -210,17 +207,17 @@ Selection.prototype = {
return this._nodeFront;
},
isRoot: function() {
isRoot() {
return (
this.isNode() && this.isConnected() && this._nodeFront.isDocumentElement
);
},
isNode: function() {
isNode() {
return !!this._nodeFront;
},
isConnected: function() {
isConnected() {
let node = this._nodeFront;
if (!node || node.isDestroyed()) {
return false;
@ -235,82 +232,82 @@ Selection.prototype = {
return false;
},
isHTMLNode: function() {
isHTMLNode() {
const xhtmlNs = "http://www.w3.org/1999/xhtml";
return this.isNode() && this.nodeFront.namespaceURI == xhtmlNs;
},
isSVGNode: function() {
isSVGNode() {
const svgNs = "http://www.w3.org/2000/svg";
return this.isNode() && this.nodeFront.namespaceURI == svgNs;
},
isMathMLNode: function() {
isMathMLNode() {
const mathmlNs = "http://www.w3.org/1998/Math/MathML";
return this.isNode() && this.nodeFront.namespaceURI == mathmlNs;
},
// Node type
isElementNode: function() {
isElementNode() {
return (
this.isNode() && this.nodeFront.nodeType == nodeConstants.ELEMENT_NODE
);
},
isPseudoElementNode: function() {
isPseudoElementNode() {
return this.isNode() && this.nodeFront.isPseudoElement;
},
isAnonymousNode: function() {
isAnonymousNode() {
return this.isNode() && this.nodeFront.isAnonymous;
},
isAttributeNode: function() {
isAttributeNode() {
return (
this.isNode() && this.nodeFront.nodeType == nodeConstants.ATTRIBUTE_NODE
);
},
isTextNode: function() {
isTextNode() {
return this.isNode() && this.nodeFront.nodeType == nodeConstants.TEXT_NODE;
},
isCDATANode: function() {
isCDATANode() {
return (
this.isNode() &&
this.nodeFront.nodeType == nodeConstants.CDATA_SECTION_NODE
);
},
isEntityRefNode: function() {
isEntityRefNode() {
return (
this.isNode() &&
this.nodeFront.nodeType == nodeConstants.ENTITY_REFERENCE_NODE
);
},
isEntityNode: function() {
isEntityNode() {
return (
this.isNode() && this.nodeFront.nodeType == nodeConstants.ENTITY_NODE
);
},
isProcessingInstructionNode: function() {
isProcessingInstructionNode() {
return (
this.isNode() &&
this.nodeFront.nodeType == nodeConstants.PROCESSING_INSTRUCTION_NODE
);
},
isCommentNode: function() {
isCommentNode() {
return (
this.isNode() &&
this.nodeFront.nodeType == nodeConstants.PROCESSING_INSTRUCTION_NODE
);
},
isDocumentNode: function() {
isDocumentNode() {
return (
this.isNode() && this.nodeFront.nodeType == nodeConstants.DOCUMENT_NODE
);
@ -319,7 +316,7 @@ Selection.prototype = {
/**
* @returns true if the selection is the <body> HTML element.
*/
isBodyNode: function() {
isBodyNode() {
return (
this.isHTMLNode() &&
this.isConnected() &&
@ -330,7 +327,7 @@ Selection.prototype = {
/**
* @returns true if the selection is the <head> HTML element.
*/
isHeadNode: function() {
isHeadNode() {
return (
this.isHTMLNode() &&
this.isConnected() &&
@ -338,31 +335,31 @@ Selection.prototype = {
);
},
isDocumentTypeNode: function() {
isDocumentTypeNode() {
return (
this.isNode() &&
this.nodeFront.nodeType == nodeConstants.DOCUMENT_TYPE_NODE
);
},
isDocumentFragmentNode: function() {
isDocumentFragmentNode() {
return (
this.isNode() &&
this.nodeFront.nodeType == nodeConstants.DOCUMENT_FRAGMENT_NODE
);
},
isNotationNode: function() {
isNotationNode() {
return (
this.isNode() && this.nodeFront.nodeType == nodeConstants.NOTATION_NODE
);
},
isSlotted: function() {
isSlotted() {
return this._isSlotted;
},
isShadowRootNode: function() {
isShadowRootNode() {
return this.isNode() && this.nodeFront.isShadowRoot;
},
};

2
devtools/client/framework/tab-descriptor-factory.js
Просмотреть файл

@ -107,7 +107,7 @@ exports.TabDescriptorFactory = {
* descriptor for a tab without creating a descriptor.
* @return true/false
*/
isKnownTab: function(tab) {
isKnownTab(tab) {
return descriptors.has(tab);
},
};

6
devtools/client/framework/test/browser_devtools_api_destroy.js
Просмотреть файл

@ -14,14 +14,14 @@ async function runTests(aTab) {
isToolSupported: () => true,
url: "about:blank",
label: "someLabel",
build: function(iframeWindow, toolbox) {
build(iframeWindow, toolbox) {
return new Promise(resolve => {
executeSoon(() => {
resolve({
target: toolbox.target,
toolbox: toolbox,
toolbox,
isReady: true,
destroy: function() {},
destroy() {},
});
});
});

4
devtools/client/framework/test/browser_keybindings_01.js
Просмотреть файл

@ -33,7 +33,7 @@ function buildDevtoolsKeysetMap(keyset) {
allKeys.push({
toolId: key.id.split("_")[1],
key: key.getAttribute("key"),
modifiers: modifiers,
modifiers,
modifierOpt: {
shiftKey: modifiers.match("shift"),
ctrlKey: modifiers.match("ctrl"),
@ -41,7 +41,7 @@ function buildDevtoolsKeysetMap(keyset) {
metaKey: modifiers.match("meta"),
accelKey: modifiers.match("accel"),
},
synthesizeKey: function() {
synthesizeKey() {
EventUtils.synthesizeKey(this.key, this.modifierOpt);
},
});

4
devtools/client/framework/test/browser_menu_api.js
Просмотреть файл

@ -153,14 +153,14 @@ async function testSubmenu(toolbox) {
menu.append(
new MenuItem({
l10nID: "text-action-copy",
submenu: submenu,
submenu,
})
);
menu.append(
new MenuItem({
label: "Submenu parent with attributes",
id: "submenu-parent-with-attrs",
submenu: submenu,
submenu,
accesskey: "A",
disabled: true,
})

2
devtools/client/framework/test/browser_toolbox_dynamic_registration.js
Просмотреть файл

@ -21,7 +21,7 @@ function testRegister(aToolbox) {
label: "Test Tool",
inMenu: true,
isToolSupported: () => true,
build: function() {},
build() {},
});
}

2
devtools/client/framework/test/browser_toolbox_selected_tool_unavailable.js
Просмотреть файл

@ -15,7 +15,7 @@ const testToolDefinition = {
build: (iframeWindow, toolbox) => {
return {
target: toolbox.target,
toolbox: toolbox,
toolbox,
isReady: true,
destroy: () => {},
panelDoc: iframeWindow.document,

2
devtools/client/framework/test/browser_toolbox_show_toolbox_tool_ready.js
Просмотреть файл

@ -43,7 +43,7 @@ add_task(async function automaticallyBindTexbox() {
isToolSupported: () => true,
url: CHROME_URL_ROOT + "doc_lazy_tool.html",
label: "Lazy",
build: function(iframeWindow, toolbox) {
build(iframeWindow, toolbox) {
this.panel = new LazyDevToolsPanel(iframeWindow, toolbox);
return this.panel.open();
},

2
devtools/client/framework/test/browser_toolbox_textbox_context_menu.js
Просмотреть файл

@ -71,7 +71,7 @@ add_task(async function automaticallyBindTexbox() {
isToolSupported: () => true,
url: CHROME_URL_ROOT + "doc_textbox_tool.html",
label: "Context menu works without tool intervention",
build: function(iframeWindow, toolbox) {
build(iframeWindow, toolbox) {
this.panel = createTestPanel(iframeWindow, toolbox);
return this.panel.open();
},

2
devtools/client/framework/test/browser_toolbox_toolbar_reorder_by_width.js
Просмотреть файл

@ -70,7 +70,7 @@ add_task(async function() {
label: "Test Tools",
isMenu: true,
isToolSupported: () => true,
build: function() {},
build() {},
});
await onRegistered;

2
devtools/client/framework/test/browser_toolbox_tools_per_toolbox_registration.js
Просмотреть файл

@ -49,7 +49,7 @@ function toolboxRegister(aToolbox) {
label: "Test Tool",
inMenu: true,
isToolSupported: () => true,
build: function() {
build() {
info("per-toolbox tool has been built.");
resolveToolInstanceBuild();

4
devtools/client/framework/test/head.js
Просмотреть файл

@ -189,7 +189,7 @@ function DevToolPanel(iframeWindow, toolbox) {
}
DevToolPanel.prototype = {
open: function() {
open() {
return new Promise(resolve => {
executeSoon(() => {
resolve(this);
@ -209,7 +209,7 @@ DevToolPanel.prototype = {
return this._toolbox;
},
destroy: function() {
destroy() {
return Promise.resolve(null);
},
};

2
devtools/client/framework/toolbox-host-manager.js
Просмотреть файл

@ -132,7 +132,7 @@ ToolboxHostManager.prototype = {
return toolbox;
},
setMinWidthWithZoom: function() {
setMinWidthWithZoom() {
const zoomValue = parseFloat(Services.prefs.getCharPref(ZOOM_VALUE_PREF));
if (isNaN(zoomValue)) {

34
devtools/client/framework/toolbox-hosts.js
Просмотреть файл

@ -55,7 +55,7 @@ BottomHost.prototype = {
/**
* Create a box at the bottom of the host tab.
*/
create: async function() {
async create() {
await gDevToolsBrowser.loadBrowserStyleSheet(this.hostTab.ownerGlobal);
const gBrowser = this.hostTab.ownerDocument.defaultView.gBrowser;
@ -88,7 +88,7 @@ BottomHost.prototype = {
/**
* Raise the host.
*/
raise: function() {
raise() {
focusTab(this.hostTab);
},
@ -96,12 +96,12 @@ BottomHost.prototype = {
* Set the toolbox title.
* Nothing to do for this host type.
*/
setTitle: function() {},
setTitle() {},
/**
* Destroy the bottom dock.
*/
destroy: function() {
destroy() {
if (!this._destroyed) {
this._destroyed = true;
@ -234,7 +234,7 @@ WindowHost.prototype = {
/**
* Create a new xul window to contain the toolbox.
*/
create: function() {
create() {
return new Promise(resolve => {
let flags = "chrome,centerscreen,resizable,dialog=no";
@ -294,7 +294,7 @@ WindowHost.prototype = {
/**
* Catch the user closing the window.
*/
_boundUnload: function(event) {
_boundUnload(event) {
if (event.target.location != this.WINDOW_URL) {
return;
}
@ -306,21 +306,21 @@ WindowHost.prototype = {
/**
* Raise the host.
*/
raise: function() {
raise() {
this._window.focus();
},
/**
* Set the toolbox title.
*/
setTitle: function(title) {
setTitle(title) {
this._window.document.title = title;
},
/**
* Destroy the window.
*/
destroy: function() {
destroy() {
if (!this._destroyed) {
this._destroyed = true;
@ -343,7 +343,7 @@ function BrowserToolboxHost(hostTab, options) {
BrowserToolboxHost.prototype = {
type: "browsertoolbox",
create: async function() {
async create() {
this.frame = createDevToolsFrame(
this.doc,
"devtools-toolbox-browsertoolbox-iframe"
@ -357,19 +357,19 @@ BrowserToolboxHost.prototype = {
/**
* Raise the host.
*/
raise: function() {
raise() {
this.doc.defaultView.focus();
},
/**
* Set the toolbox title.
*/
setTitle: function(title) {
setTitle(title) {
this.doc.title = title;
},
// Do nothing. The BrowserToolbox is destroyed by quitting the application.
destroy: function() {
destroy() {
return Promise.resolve(null);
},
};
@ -387,18 +387,18 @@ function PageHost(hostTab, options) {
PageHost.prototype = {
type: "page",
create: function() {
create() {
return Promise.resolve(this.frame);
},
// Do nothing.
raise: function() {},
raise() {},
// Do nothing.
setTitle: function(title) {},
setTitle(title) {},
// Do nothing.
destroy: function() {
destroy() {
return Promise.resolve(null);
},
};

24
devtools/client/framework/toolbox-options.js
Просмотреть файл

@ -98,7 +98,7 @@ OptionsPanel.prototype = {
return this;
},
_addListeners: function() {
_addListeners() {
Services.prefs.addObserver("devtools.cache.disabled", this._prefChanged);
Services.prefs.addObserver("devtools.theme", this._prefChanged);
Services.prefs.addObserver(
@ -118,7 +118,7 @@ OptionsPanel.prototype = {
this.toolbox.on("webextension-unregistered", this.setupToolsList);
},
_removeListeners: function() {
_removeListeners() {
Services.prefs.removeObserver("devtools.cache.disabled", this._prefChanged);
Services.prefs.removeObserver("devtools.theme", this._prefChanged);
Services.prefs.removeObserver(
@ -135,7 +135,7 @@ OptionsPanel.prototype = {
gDevTools.off("theme-unregistered", this._themeUnregistered);
},
_prefChanged: function(subject, topic, prefName) {
_prefChanged(subject, topic, prefName) {
if (prefName === "devtools.cache.disabled") {
const cacheDisabled = GetPref(prefName);
const cbx = this.panelDoc.getElementById("devtools-disable-cache");
@ -147,11 +147,11 @@ OptionsPanel.prototype = {
}
},
_themeRegistered: function(themeId) {
_themeRegistered(themeId) {
this.setupThemeList();
},
_themeUnregistered: function(theme) {
_themeUnregistered(theme) {
const themeBox = this.panelDoc.getElementById("devtools-theme-box");
const themeInput = themeBox.querySelector(`[value=${theme.id}]`);
@ -218,7 +218,7 @@ OptionsPanel.prototype = {
}
},
setupToolsList: function() {
setupToolsList() {
const defaultToolsBox = this.panelDoc.getElementById("default-tools-box");
const additionalToolsBox = this.panelDoc.getElementById(
"additional-tools-box"
@ -377,7 +377,7 @@ OptionsPanel.prototype = {
this.panelWin.focus();
},
setupThemeList: function() {
setupThemeList() {
const themeBox = this.panelDoc.getElementById("devtools-theme-box");
const themeLabels = themeBox.querySelectorAll("label");
for (const label of themeLabels) {
@ -421,7 +421,7 @@ OptionsPanel.prototype = {
/**
* Add extra checkbox options bound to a boolean preference.
*/
setupAdditionalOptions: function() {
setupAdditionalOptions() {
const prefDefinitions = [];
if (GetPref("devtools.custom-formatters")) {
@ -596,7 +596,7 @@ OptionsPanel.prototype = {
}
},
updateCurrentTheme: function() {
updateCurrentTheme() {
const currentTheme = GetPref("devtools.theme");
const themeBox = this.panelDoc.getElementById("devtools-theme-box");
const themeRadioInput = themeBox.querySelector(`[value=${currentTheme}]`);
@ -610,7 +610,7 @@ OptionsPanel.prototype = {
}
},
updateSourceMapPref: function() {
updateSourceMapPref() {
const prefName = "devtools.source-map.client-service.enabled";
const enabled = GetPref(prefName);
const box = this.panelDoc.querySelector(`[data-pref="${prefName}"]`);
@ -627,7 +627,7 @@ OptionsPanel.prototype = {
* @param {Event} event
* The event sent by checking / unchecking the disable JS checkbox.
*/
_disableJSClicked: function(event) {
_disableJSClicked(event) {
const checked = event.target.checked;
this.commands.targetConfigurationCommand.updateConfiguration({
@ -635,7 +635,7 @@ OptionsPanel.prototype = {
});
},
destroy: function() {
destroy() {
if (this.destroyed) {
return;
}

232
devtools/client/framework/toolbox.js
Просмотреть файл

@ -478,14 +478,14 @@ Toolbox.prototype = {
* @return {Map} panels
* All the running panels in the toolbox
*/
getToolPanels: function() {
getToolPanels() {
return new Map(this._toolPanels);
},
/**
* Access the panel for a given tool
*/
getPanel: function(id) {
getPanel(id) {
return this._toolPanels.get(id);
},
@ -502,7 +502,7 @@ Toolbox.prototype = {
* @returns Promise
* A promise that resolves once the panel is ready.
*/
getPanelWhenReady: function(id) {
getPanelWhenReady(id) {
const panel = this.getPanel(id);
return new Promise(resolve => {
if (panel) {
@ -520,7 +520,7 @@ Toolbox.prototype = {
* likely that we're going to want to get the panel that we've just made
* visible
*/
getCurrentPanel: function() {
getCurrentPanel() {
return this._toolPanels.get(this.currentToolId);
},
@ -583,7 +583,7 @@ Toolbox.prototype = {
/**
* Get the focused state of the split console
*/
isSplitConsoleFocused: function() {
isSplitConsoleFocused() {
if (!this._splitConsole) {
return false;
}
@ -622,7 +622,7 @@ Toolbox.prototype = {
/**
* @returns {ThreadFront|null} The selected thread front, or null if there is none.
*/
getSelectedTargetFront: function() {
getSelectedTargetFront() {
// The selected target is managed by the TargetCommand's store.
// So pull the state from that other store.
const selectedTarget = getSelectedTarget(
@ -819,7 +819,7 @@ Toolbox.prototype = {
/**
* Open the toolbox
*/
open: function() {
open() {
return async function() {
// Kick off async loading the Fluent bundles.
const fluentL10n = new FluentL10n();
@ -1091,7 +1091,7 @@ Toolbox.prototype = {
* moments in the lifecycle of the toolbox, so all the events relying on it should be
* grouped here.
*/
_addChromeEventHandlerEvents: function() {
_addChromeEventHandlerEvents() {
// win.docShell.chromeEventHandler might not be accessible anymore when removing the
// events, so we can't rely on a dynamic getter here.
// Keep a reference on the chromeEventHandler used to addEventListener to be sure we
@ -1117,7 +1117,7 @@ Toolbox.prototype = {
this._chromeEventHandler.addEventListener("mousedown", this._onMouseDown);
},
_removeChromeEventHandlerEvents: function() {
_removeChromeEventHandlerEvents() {
if (!this._chromeEventHandler) {
return;
}
@ -1144,7 +1144,7 @@ Toolbox.prototype = {
this._chromeEventHandler = null;
},
_addShortcuts: function() {
_addShortcuts() {
// Create shortcuts instance for the toolbox
if (!this.shortcuts) {
this.shortcuts = new KeyShortcuts({
@ -1201,7 +1201,7 @@ Toolbox.prototype = {
}
},
_removeShortcuts: function() {
_removeShortcuts() {
if (this.shortcuts) {
this.shortcuts.destroy();
this.shortcuts = null;
@ -1211,7 +1211,7 @@ Toolbox.prototype = {
/**
* Adds the keys and commands to the Toolbox Window in window mode.
*/
_addWindowHostShortcuts: function() {
_addWindowHostShortcuts() {
if (this.hostType != Toolbox.HostType.WINDOW) {
// Those shortcuts are only valid for host type WINDOW.
return;
@ -1269,14 +1269,14 @@ Toolbox.prototype = {
}
},
_removeWindowHostShortcuts: function() {
_removeWindowHostShortcuts() {
if (this._windowHostShortcuts) {
this._windowHostShortcuts.destroy();
this._windowHostShortcuts = null;
}
},
_onContextMenu: function(e) {
_onContextMenu(e) {
// Handle context menu events in standard input elements: <input> and <textarea>.
// Also support for custom input elements using .devtools-input class
// (e.g. CodeMirror instances).
@ -1306,7 +1306,7 @@ Toolbox.prototype = {
}
},
_onMouseDown: function(e) {
_onMouseDown(e) {
const isMiddleClick = e.button === 1;
if (isMiddleClick) {
// Middle clicks will trigger the scroll lock feature to turn on.
@ -1317,7 +1317,7 @@ Toolbox.prototype = {
}
},
_getDebugTargetData: function() {
_getDebugTargetData() {
const url = new URL(this.win.location);
const searchParams = new this.win.URLSearchParams(url.search);
@ -1365,7 +1365,7 @@ Toolbox.prototype = {
/**
* Unconditionally create and get the source map service.
*/
_createSourceMapService: function() {
_createSourceMapService() {
if (this._sourceMapService) {
return this._sourceMapService;
}
@ -1497,7 +1497,7 @@ Toolbox.prototype = {
},
// Return HostType id for telemetry
_getTelemetryHostId: function() {
_getTelemetryHostId() {
switch (this.hostType) {
case Toolbox.HostType.BOTTOM:
return 0;
@ -1517,7 +1517,7 @@ Toolbox.prototype = {
},
// Return HostType string for telemetry
_getTelemetryHostString: function() {
_getTelemetryHostString() {
switch (this.hostType) {
case Toolbox.HostType.BOTTOM:
return "bottom";
@ -1536,7 +1536,7 @@ Toolbox.prototype = {
}
},
_pingTelemetry: function() {
_pingTelemetry() {
Services.prefs.setBoolPref("devtools.everOpened", true);
this.telemetry.toolOpened("toolbox", this.sessionId, this);
@ -1605,7 +1605,7 @@ Toolbox.prototype = {
* is toggled or not. The function should return true when
* the button should be displayed as toggled on.
*/
_createButtonState: function(options) {
_createButtonState(options) {
let isCheckedValue = false;
const {
id,
@ -1676,7 +1676,7 @@ Toolbox.prototype = {
return button;
},
_splitConsoleOnKeypress: function(e) {
_splitConsoleOnKeypress(e) {
if (e.keyCode === KeyCodes.DOM_VK_ESCAPE) {
this.toggleSplitConsole();
// If the debugger is paused, don't let the ESC key stop any pending navigation.
@ -1702,7 +1702,7 @@ Toolbox.prototype = {
* The tool the key belongs to. The corresponding handler will only be triggered
* if this tool is active.
*/
useKeyWithSplitConsole: function(key, handler, whichTool) {
useKeyWithSplitConsole(key, handler, whichTool) {
this.shortcuts.on(key, event => {
if (this.currentToolId === whichTool && this.isSplitConsoleFocused()) {
handler();
@ -1711,12 +1711,12 @@ Toolbox.prototype = {
});
},
_addWindowListeners: function() {
_addWindowListeners() {
this.win.addEventListener("unload", this.destroy);
this.win.addEventListener("message", this._onBrowserMessage, true);
},
_removeWindowListeners: function() {
_removeWindowListeners() {
// The host iframe's contentDocument may already be gone.
if (this.win) {
this.win.removeEventListener("unload", this.destroy);
@ -1725,7 +1725,7 @@ Toolbox.prototype = {
},
// Called whenever the chrome send a message
_onBrowserMessage: function(event) {
_onBrowserMessage(event) {
if (event.data?.name === "switched-host") {
this._onSwitchedHost(event.data);
}
@ -1734,7 +1734,7 @@ Toolbox.prototype = {
}
},
_saveSplitConsoleHeight: function() {
_saveSplitConsoleHeight() {
Services.prefs.setIntPref(
SPLITCONSOLE_HEIGHT_PREF,
this.webconsolePanel.height
@ -1753,7 +1753,7 @@ Toolbox.prototype = {
* then we should hide the console and splitter, and show the deck
* at full height.
*/
_refreshConsoleDisplay: function() {
_refreshConsoleDisplay() {
const deck = this.doc.getElementById("toolbox-deck");
const webconsolePanel = this.webconsolePanel;
const splitter = this.doc.getElementById("toolbox-console-splitter");
@ -1776,7 +1776,7 @@ Toolbox.prototype = {
* @param {string} toolId Which tool to run the command on (skip if not
* current)
*/
fireCustomKey: function(toolId) {
fireCustomKey(toolId) {
const toolDefinition = gDevTools.getToolDefinition(toolId);
if (
@ -1813,7 +1813,7 @@ Toolbox.prototype = {
* Build the options for changing hosts. Called every time
* the host changes.
*/
_buildDockOptions: function() {
_buildDockOptions() {
if (!this.descriptorFront.isLocalTab) {
this.component.setDockOptionsEnabled(false);
this.component.setCanCloseToolbox(false);
@ -1850,7 +1850,7 @@ Toolbox.prototype = {
this.component.setHostTypes(hostTypes);
},
postMessage: function(msg) {
postMessage(msg) {
// We sometime try to send messages in middle of destroy(), where the
// toolbox iframe may already be detached.
if (!this._destroyer) {
@ -1864,7 +1864,7 @@ Toolbox.prototype = {
/**
* Initiate ToolboxTabs React component and all it's properties. Do the initial render.
*/
_buildTabs: async function() {
async _buildTabs() {
// Get the initial list of tab definitions. This list can be amended at a later time
// by tools registering themselves.
const definitions = gDevTools.getToolDefinitionArray();
@ -1917,7 +1917,7 @@ Toolbox.prototype = {
* results in navigating away from the toolbar container.
* @param {FocusEvent} event
*/
_onToolbarFocus: function(id) {
_onToolbarFocus(id) {
this.component.setFocusedButton(id);
},
@ -1929,7 +1929,7 @@ Toolbox.prototype = {
* for if they are the focused element.
* @param {KeyboardEvent} event
*/
_onToolbarArrowKeypress: function(event) {
_onToolbarArrowKeypress(event) {
const { key, target, ctrlKey, shiftKey, altKey, metaKey } = event;
// If any of the modifier keys are pressed do not attempt navigation as it
@ -2050,7 +2050,7 @@ Toolbox.prototype = {
* Note: Toggle picker can be overwritten by panel other than the inspector to
* allow for custom picker behaviour.
*/
_onPickerClick: async function() {
async _onPickerClick() {
const focus =
this.hostType === Toolbox.HostType.BOTTOM ||
this.hostType === Toolbox.HostType.LEFT ||
@ -2067,7 +2067,7 @@ Toolbox.prototype = {
* If the picker is activated, then allow the Escape key to deactivate the
* functionality instead of the default behavior of toggling the console.
*/
_onPickerKeypress: function(event) {
_onPickerKeypress(event) {
if (event.keyCode === KeyCodes.DOM_VK_ESCAPE) {
const currentPanel = this.getCurrentPanel();
if (currentPanel.cancelPicker) {
@ -2080,7 +2080,7 @@ Toolbox.prototype = {
}
},
_onPickerStarting: async function() {
async _onPickerStarting() {
if (this.isDestroying()) {
return;
}
@ -2092,11 +2092,11 @@ Toolbox.prototype = {
this.on("select", this._onToolSelectedStopPicker);
},
_onPickerStarted: async function() {
async _onPickerStarted() {
this.doc.addEventListener("keypress", this._onPickerKeypress, true);
},
_onPickerStopped: function() {
_onPickerStopped() {
if (this.isDestroying()) {
return;
}
@ -2106,7 +2106,7 @@ Toolbox.prototype = {
this.pickerButton.isChecked = false;
},
_onToolSelectedStopPicker: function() {
_onToolSelectedStopPicker() {
this.nodePicker.stop({ canceled: true });
},
@ -2114,17 +2114,17 @@ Toolbox.prototype = {
* When the picker is canceled, make sure the toolbox
* gets the focus.
*/
_onPickerCanceled: function() {
_onPickerCanceled() {
if (this.hostType !== Toolbox.HostType.WINDOW) {
this.win.focus();
}
},
_onPickerPicked: function(nodeFront) {
_onPickerPicked(nodeFront) {
this.selection.setNodeFront(nodeFront, { reason: "picker-node-picked" });
},
_onPickerPreviewed: function(nodeFront) {
_onPickerPreviewed(nodeFront) {
this.selection.setNodeFront(nodeFront, { reason: "picker-node-previewed" });
},
@ -2137,7 +2137,7 @@ Toolbox.prototype = {
* @param {String} pickerType
* One of devtools/shared/picker-constants
*/
tellRDMAboutPickerState: async function(state, pickerType) {
async tellRDMAboutPickerState(state, pickerType) {
const { localTab } = this.target;
if (!ResponsiveUIManager.isActiveForTab(localTab)) {
@ -2207,7 +2207,7 @@ Toolbox.prototype = {
* Apply the current cache setting from devtools.cache.disabled to this
* toolbox's tab.
*/
_applyCacheSettings: async function() {
async _applyCacheSettings() {
const pref = "devtools.cache.disabled";
const cacheDisabled = Services.prefs.getBoolPref(pref);
@ -2225,7 +2225,7 @@ Toolbox.prototype = {
* Apply the custom formatter setting (from `devtools.custom-formatters.enabled`) to this
* toolbox's tab.
*/
_applyCustomFormatterSetting: async function() {
async _applyCustomFormatterSetting() {
if (!this.commands) {
return;
}
@ -2245,7 +2245,7 @@ Toolbox.prototype = {
* Apply the current service workers testing setting from
* devtools.serviceWorkers.testing.enabled to this toolbox's tab.
*/
_applyServiceWorkersTestingSettings: function() {
_applyServiceWorkersTestingSettings() {
const pref = "devtools.serviceWorkers.testing.enabled";
const serviceWorkersTestingEnabled = Services.prefs.getBoolPref(pref);
this.commands.targetConfigurationCommand.updateConfiguration({
@ -2351,7 +2351,7 @@ Toolbox.prototype = {
/**
* Ensure the visibility of each toolbox button matches the preference value.
*/
_commandIsVisible: function(button) {
_commandIsVisible(button) {
const { isToolSupported, isCurrentlyVisible, visibilityswitch } = button;
if (!Services.prefs.getBoolPref(visibilityswitch, true)) {
@ -2375,7 +2375,7 @@ Toolbox.prototype = {
* @param {string} toolDefinition
* Tool definition of the tool to build a tab for.
*/
_buildPanelForTool: function(toolDefinition) {
_buildPanelForTool(toolDefinition) {
if (!toolDefinition.isToolSupported(this)) {
return;
}
@ -2584,7 +2584,7 @@ Toolbox.prototype = {
* @param {Object} options
* Object that will be passed to the panel `open` method.
*/
loadTool: function(id, options) {
loadTool(id, options) {
let iframe = this.doc.getElementById("toolbox-panel-iframe-" + id);
if (iframe) {
const panel = this._toolPanels.get(id);
@ -2714,7 +2714,7 @@ Toolbox.prototype = {
*
* @param {IFrameElement} iframe
*/
setIframeDocumentDir: function(iframe) {
setIframeDocumentDir(iframe) {
const docEl = iframe.contentWindow?.document.documentElement;
if (!docEl || docEl.namespaceURI !== HTML_NS) {
// Bail out if the content window or document is not ready or if the document is not
@ -2735,7 +2735,7 @@ Toolbox.prototype = {
* @param {string} id
* The Id of the item within the collection to select
*/
selectSingleNode: function(collection, id) {
selectSingleNode(collection, id) {
[...collection].forEach(node => {
if (node.id === id) {
node.setAttribute("selected", "true");
@ -2771,7 +2771,7 @@ Toolbox.prototype = {
* It will help panel react differently depending on them being displayed or in
* background.
*/
setIframeVisible: function(iframe, visible) {
setIframeVisible(iframe, visible) {
const state = visible ? "visible" : "hidden";
const win = iframe.contentWindow;
const doc = win.document;
@ -2798,7 +2798,7 @@ Toolbox.prototype = {
* @param {Object} options
* Object that will be passed to the panel
*/
selectTool: function(id, reason = "unknown", options) {
selectTool(id, reason = "unknown", options) {
this.emit("panel-changed");
if (this.currentToolId == id) {
@ -2878,16 +2878,16 @@ Toolbox.prototype = {
if (this.currentToolId) {
this.telemetry.recordEvent("exit", prevPanelName, null, {
host: this._hostType,
width: width,
width,
panel_name: prevPanelName,
next_panel: panelName,
reason: reason,
reason,
session_id: this.sessionId,
});
}
this.telemetry.addEventProperties(this.topWindow, "open", "tools", null, {
width: width,
width,
session_id: this.sessionId,
});
@ -2901,7 +2901,7 @@ Toolbox.prototype = {
host: this._hostType,
start_state: reason,
panel_name: panelName,
cold: cold,
cold,
session_id: this.sessionId,
});
@ -2938,7 +2938,7 @@ Toolbox.prototype = {
* @param {string} id
* The id of tool to focus
*/
focusTool: function(id, state = true) {
focusTool(id, state = true) {
const iframe = this.doc.getElementById("toolbox-panel-iframe-" + id);
if (state) {
@ -2951,7 +2951,7 @@ Toolbox.prototype = {
/**
* Focus split console's input line
*/
focusConsoleInput: function() {
focusConsoleInput() {
const consolePanel = this.getPanel("webconsole");
if (consolePanel) {
consolePanel.focusInput();
@ -2961,7 +2961,7 @@ Toolbox.prototype = {
/**
* Disable all network logs in the console
*/
disableAllConsoleNetworkLogs: function() {
disableAllConsoleNetworkLogs() {
const consolePanel = this.getPanel("webconsole");
if (consolePanel) {
consolePanel.hud.ui.disableAllNetworkMessages();
@ -2973,7 +2973,7 @@ Toolbox.prototype = {
* of the console, then store the newly focused element, so that
* it can be restored once the split console closes.
*/
_onFocus: function({ originalTarget }) {
_onFocus({ originalTarget }) {
// Ignore any non element nodes, or any elements contained
// within the webconsole frame.
const webconsoleURL = gDevTools.getToolDefinition("webconsole").url;
@ -2987,7 +2987,7 @@ Toolbox.prototype = {
this._lastFocusedElement = originalTarget;
},
_onTabsOrderUpdated: function() {
_onTabsOrderUpdated() {
this._combineAndSortPanelDefinitions();
},
@ -2997,7 +2997,7 @@ Toolbox.prototype = {
* @returns {Promise} a promise that resolves once the tool has been
* loaded and focused.
*/
openSplitConsole: function() {
openSplitConsole() {
this._splitConsole = true;
Services.prefs.setBoolPref(SPLITCONSOLE_ENABLED_PREF, true);
this._refreshConsoleDisplay();
@ -3026,7 +3026,7 @@ Toolbox.prototype = {
* @returns {Promise} a promise that resolves once the tool has been
* closed.
*/
closeSplitConsole: function() {
closeSplitConsole() {
this._splitConsole = false;
Services.prefs.setBoolPref(SPLITCONSOLE_ENABLED_PREF, false);
this._refreshConsoleDisplay();
@ -3053,7 +3053,7 @@ Toolbox.prototype = {
* @returns {Promise} a promise that resolves once the tool has been
* opened or closed.
*/
toggleSplitConsole: function() {
toggleSplitConsole() {
if (this.currentToolId !== "webconsole") {
return this.splitConsole
? this.closeSplitConsole()
@ -3067,7 +3067,7 @@ Toolbox.prototype = {
* Toggles the options panel.
* If the option panel is already selected then select the last selected panel.
*/
toggleOptions: function(event) {
toggleOptions(event) {
// Flip back to the last used panel if we are already
// on the options panel.
if (
@ -3087,7 +3087,7 @@ Toolbox.prototype = {
/**
* Loads the tool next to the currently selected tool.
*/
selectNextTool: function() {
selectNextTool() {
const definitions = this.component.panelDefinitions;
const index = definitions.findIndex(({ id }) => id === this.currentToolId);
const definition =
@ -3100,7 +3100,7 @@ Toolbox.prototype = {
/**
* Loads the tool just left to the currently selected tool.
*/
selectPreviousTool: function() {
selectPreviousTool() {
const definitions = this.component.panelDefinitions;
const index = definitions.findIndex(({ id }) => id === this.currentToolId);
const definition =
@ -3150,7 +3150,7 @@ Toolbox.prototype = {
/**
* Raise the toolbox host.
*/
raise: function() {
raise() {
this.postMessage({ name: "raise-host" });
},
@ -3208,7 +3208,7 @@ Toolbox.prototype = {
/**
* Refresh the host's title.
*/
_refreshHostTitle: function() {
_refreshHostTitle() {
let title;
if (this.target.isXpcShellTarget) {
@ -3334,7 +3334,7 @@ Toolbox.prototype = {
return prefFront.getBoolPref(DISABLE_AUTOHIDE_PREF);
},
_listFrames: async function(event) {
async _listFrames(event) {
if (
!this.target.getTrait("frames") ||
this.target.targetForm.ignoreSubFrames
@ -3357,7 +3357,7 @@ Toolbox.prototype = {
*
* @param {String} frameIdOrTargetActorId
*/
onIframePickerFrameSelected: function(frameIdOrTargetActorId) {
onIframePickerFrameSelected(frameIdOrTargetActorId) {
if (!this.frameMap.has(frameIdOrTargetActorId)) {
console.error(
`Can't focus on frame "${frameIdOrTargetActorId}", it is not a known frame`
@ -3385,7 +3385,7 @@ Toolbox.prototype = {
*
* @param {String} frameIdOrTargetActorId
*/
onHighlightFrame: async function(frameIdOrTargetActorId) {
async onHighlightFrame(frameIdOrTargetActorId) {
// Only enable frame highlighting when the top level document is targeted
if (!this.rootFrameSelected) {
return;
@ -3427,7 +3427,7 @@ Toolbox.prototype = {
* @param {Boolean} data.frames[].destroy: Set to true if destroyed
* @param {Boolean} data.frames[].isTopLevel: true for top level window
*/
_updateFrames: function(data) {
_updateFrames(data) {
// At the moment, frames `id` can either be outerWindowID (a Number),
// or a targetActorID (a String).
// In order to have the same type of data as a key of `frameMap`, we transform any
@ -3543,7 +3543,7 @@ Toolbox.prototype = {
/**
* Switch to the last used host for the toolbox UI.
*/
switchToPreviousHost: function() {
switchToPreviousHost() {
return this.switchHost("previous");
},
@ -3554,7 +3554,7 @@ Toolbox.prototype = {
* @param {string} hostType
* The host type of the new host object
*/
switchHost: function(hostType) {
switchHost(hostType) {
if (hostType == this.hostType || !this.descriptorFront.isLocalTab) {
return null;
}
@ -3598,7 +3598,7 @@ Toolbox.prototype = {
return this.once("switched-host-to-tab");
},
_onSwitchedHost: function({ hostType }) {
_onSwitchedHost({ hostType }) {
this._hostType = hostType;
this._buildDockOptions();
@ -3650,7 +3650,7 @@ Toolbox.prototype = {
* @returns {bool}
* Returns true if the tool is registered globally or on this toolbox.
*/
isToolRegistered: function(toolId) {
isToolRegistered(toolId) {
return !!this.getToolDefinition(toolId);
},
@ -3665,7 +3665,7 @@ Toolbox.prototype = {
* @returns {object}
* The plain javascript object that represents the requested tool definition.
*/
getToolDefinition: function(toolId) {
getToolDefinition(toolId) {
return (
gDevTools.getToolDefinition(toolId) ||
this.additionalToolDefinitions.get(toolId)
@ -3680,7 +3680,7 @@ Toolbox.prototype = {
* @param {string} toolId
* Id of the tool to be removed.
*/
unloadTool: function(toolId) {
unloadTool(toolId) {
if (typeof toolId != "string") {
throw new Error("Unexpected non-string toolId received.");
}
@ -3738,7 +3738,7 @@ Toolbox.prototype = {
* @param {string} toolId
* Id of the tool that was registered
*/
_toolRegistered: function(toolId) {
_toolRegistered(toolId) {
// Tools can either be in the global devtools, or added to this specific toolbox
// as an additional tool.
let definition = gDevTools.getToolDefinition(toolId);
@ -3768,7 +3768,7 @@ Toolbox.prototype = {
* @param {string} toolId
* id of the tool that was unregistered
*/
_toolUnregistered: function(toolId) {
_toolUnregistered(toolId) {
this.unloadTool(toolId);
// Emit the event so tools can listen to it from the toolbox level
@ -3891,7 +3891,7 @@ Toolbox.prototype = {
return safeAsyncMethod(fn, () => !!this._destroyer);
},
_onNewSelectedNodeFront: async function() {
async _onNewSelectedNodeFront() {
// Emit a "selection-changed" event when the toolbox.selection has been set
// to a new node (or cleared). Currently used in the WebExtensions APIs (to
// provide the `devtools.panels.elements.onSelectionChanged` event).
@ -3903,7 +3903,7 @@ Toolbox.prototype = {
}
},
_onToolSelected: function() {
_onToolSelected() {
this._refreshHostTitle();
this.updatePickerButton();
@ -3921,7 +3921,7 @@ Toolbox.prototype = {
this.inspectObjectActor(packet.objectActor, packet.inspectFromAnnotation);
},
inspectObjectActor: async function(objectActor, inspectFromAnnotation) {
async inspectObjectActor(objectActor, inspectFromAnnotation) {
const objectGrip = objectActor?.getGrip
? objectActor.getGrip()
: objectActor;
@ -3960,25 +3960,25 @@ Toolbox.prototype = {
*
* @return The notification box component.
*/
getNotificationBox: function() {
getNotificationBox() {
return this.notificationBox;
},
closeToolbox: async function() {
async closeToolbox() {
await this.destroy();
},
/**
* Public API to check is the current toolbox is currently being destroyed.
*/
isDestroying: function() {
isDestroying() {
return this._destroyer;
},
/**
* Remove all UI elements, detach from target and clear up
*/
destroy: function() {
destroy() {
// If several things call destroy then we give them all the same
// destruction promise so we're sure to destroy only once
if (this._destroyer) {
@ -3994,7 +3994,7 @@ Toolbox.prototype = {
return this._destroyer;
},
_destroyToolbox: async function() {
async _destroyToolbox() {
this.emit("destroy");
// This flag will be checked by Fronts in order to decide if they should
@ -4124,16 +4124,16 @@ Toolbox.prototype = {
this.telemetry.toolClosed("toolbox", this.sessionId, this);
this.telemetry.recordEvent("exit", prevPanelName, null, {
host: host,
width: width,
host,
width,
panel_name: this.getTelemetryPanelNameOrOther(this.currentToolId),
next_panel: "none",
reason: "toolbox_close",
session_id: this.sessionId,
});
this.telemetry.recordEvent("close", "tools", null, {
host: host,
width: width,
host,
width,
session_id: this.sessionId,
});
@ -4228,7 +4228,7 @@ Toolbox.prototype = {
* @param {Number} x
* @param {Number} y
*/
openTextBoxContextMenu: function(x, y) {
openTextBoxContextMenu(x, y) {
const menu = createEditContextMenu(this.topWindow, "toolbox-menu");
// Fire event for tests
@ -4241,7 +4241,7 @@ Toolbox.prototype = {
/**
* Retrieve the current textbox context menu, if available.
*/
getTextBoxContextMenu: function() {
getTextBoxContextMenu() {
return this.topDoc.getElementById("toolbox-menu");
},
@ -4299,7 +4299,7 @@ Toolbox.prototype = {
*
* @param {string} url The URL of the CSS file to open.
*/
viewGeneratedSourceInStyleEditor: async function(url) {
async viewGeneratedSourceInStyleEditor(url) {
if (typeof url !== "string") {
console.warn("Failed to open generated source, no url given");
return;
@ -4317,7 +4317,7 @@ Toolbox.prototype = {
* If the stylesheet has a sourcemap, we will attempt to open the original
* version of the file instead of the generated version.
*/
viewSourceInStyleEditorByURL: async function(url, line, column) {
async viewSourceInStyleEditorByURL(url, line, column) {
if (typeof url !== "string") {
console.warn("Failed to open source, no url given");
return;
@ -4341,11 +4341,7 @@ Toolbox.prototype = {
* If the stylesheet has a sourcemap, we will attempt to open the original
* version of the file instead of the generated version.
*/
viewSourceInStyleEditorByFront: async function(
stylesheetFront,
line,
column
) {
async viewSourceInStyleEditorByFront(stylesheetFront, line, column) {
if (!stylesheetFront || typeof stylesheetFront !== "object") {
console.warn("Failed to open source, no stylesheet given");
return;
@ -4369,7 +4365,7 @@ Toolbox.prototype = {
);
},
viewElementInInspector: async function(objectGrip, reason) {
async viewElementInInspector(objectGrip, reason) {
// Open the inspector and select the DOM Element.
await this.loadTool("inspector");
const inspector = this.getPanel("inspector");
@ -4384,7 +4380,7 @@ Toolbox.prototype = {
*
* @param {string} url The URL of the JS file to open.
*/
viewGeneratedSourceInDebugger: async function(url) {
async viewGeneratedSourceInDebugger(url) {
if (typeof url !== "string") {
console.warn("Failed to open generated source, no url given");
return;
@ -4401,7 +4397,7 @@ Toolbox.prototype = {
*
* @see devtools/client/shared/source-utils.js
*/
viewSourceInDebugger: async function(
async viewSourceInDebugger(
sourceURL,
sourceLine,
sourceColumn,
@ -4437,7 +4433,7 @@ Toolbox.prototype = {
* Opens source in plain "view-source:".
* @see devtools/client/shared/source-utils.js
*/
viewSource: function(sourceURL, sourceLine) {
viewSource(sourceURL, sourceLine) {
return viewSource.viewSource(this, sourceURL, sourceLine);
},
@ -4447,7 +4443,7 @@ Toolbox.prototype = {
* Return Netmonitor API object. This object offers Network monitor
* public API that can be consumed by other panels or WE API.
*/
getNetMonitorAPI: async function() {
async getNetMonitorAPI() {
const netPanel = this.getPanel("netmonitor");
// Return Net panel if it exists.
@ -4470,7 +4466,7 @@ Toolbox.prototype = {
/**
* Returns data (HAR) collected by the Network panel.
*/
getHARFromNetMonitor: async function() {
async getHARFromNetMonitor() {
const netMonitor = await this.getNetMonitorAPI();
let har = await netMonitor.getHar();
@ -4490,12 +4486,12 @@ Toolbox.prototype = {
* a function that takes ({harEntry, requestId})
* as first argument.
*/
addRequestFinishedListener: async function(listener) {
async addRequestFinishedListener(listener) {
const netMonitor = await this.getNetMonitorAPI();
netMonitor.addRequestFinishedListener(listener);
},
removeRequestFinishedListener: async function(listener) {
async removeRequestFinishedListener(listener) {
const netMonitor = await this.getNetMonitorAPI();
netMonitor.removeRequestFinishedListener(listener);
@ -4520,7 +4516,7 @@ Toolbox.prototype = {
* Id of the request for which the response content
* should be fetched.
*/
fetchResponseContent: async function(requestId) {
async fetchResponseContent(requestId) {
const netMonitor = await this.getNetMonitorAPI();
return netMonitor.fetchResponseContent(requestId);
},
@ -4533,7 +4529,7 @@ Toolbox.prototype = {
* WebExtensions).
* @see devtools/client/framework/toolbox-options.js
*/
listWebExtensions: function() {
listWebExtensions() {
// Return the array of the enabled webextensions (we can't use the prefs list here,
// because some of them may be disabled by the Addon Manager and still have a devtools
// preference).
@ -4549,7 +4545,7 @@ Toolbox.prototype = {
* to refresh the listed tools accordingly.
* @see browser/components/extensions/ext-devtools.js
*/
registerWebExtension: function(extensionUUID, { name, pref }) {
registerWebExtension(extensionUUID, { name, pref }) {
// Ensure that an installed extension (active in the AddonManager) which
// provides a devtools page is going to be listed in the toolbox options
// (and refresh its name if it was already listed).
@ -4564,7 +4560,7 @@ Toolbox.prototype = {
* to refresh the listed tools accordingly.
* @see browser/components/extensions/ext-devtools.js
*/
unregisterWebExtension: function(extensionUUID) {
unregisterWebExtension(extensionUUID) {
// Ensure that an extension that has been disabled/uninstalled from the AddonManager
// is going to be removed from the toolbox options.
this._webExtensions.delete(extensionUUID);
@ -4577,7 +4573,7 @@ Toolbox.prototype = {
* to true.
* @see browser/components/extensions/ext-devtools.js
*/
isWebExtensionEnabled: function(extensionUUID) {
isWebExtensionEnabled(extensionUUID) {
const extInfo = this._webExtensions.get(extensionUUID);
return extInfo && Services.prefs.getBoolPref(extInfo.pref, false);
},
@ -4591,7 +4587,7 @@ Toolbox.prototype = {
* @param {String} id
* The panel id we would like to process.
*/
getTelemetryPanelNameOrOther: function(id) {
getTelemetryPanelNameOrOther(id) {
if (!this._toolNames) {
const definitions = gDevTools.getToolDefinitionArray();
const definitionIds = definitions.map(definition => definition.id);

32
devtools/client/fronts/inspector/rule-rewriter.js
Просмотреть файл

@ -108,7 +108,7 @@ RuleRewriter.prototype = {
*
* @param {String} inputString the input to use
*/
startInitialization: function(inputString) {
startInitialization(inputString) {
this.inputString = inputString;
// Whether there are any newlines in the input text.
this.hasNewLine = /[\r\n]/.test(this.inputString);
@ -128,7 +128,7 @@ RuleRewriter.prototype = {
*
* @param {Number} index The index of the property to modify
*/
completeInitialization: function(index) {
completeInitialization(index) {
if (index < 0) {
throw new Error("Invalid index " + index + ". Expected positive integer");
}
@ -154,7 +154,7 @@ RuleRewriter.prototype = {
* @param {Number} offset the offset at which to compute the indentation
* @return {String} the indentation at the indicated position
*/
getIndentation: function(string, offset) {
getIndentation(string, offset) {
let originalOffset = offset;
for (--offset; offset >= 0; --offset) {
const c = string[offset];
@ -187,7 +187,7 @@ RuleRewriter.prototype = {
* where |text| is the text that has been rewritten
* to be "lexically safe".
*/
sanitizePropertyValue: function(text) {
sanitizePropertyValue(text) {
// Start by stripping any trailing ";". This is done here to
// avoid the case where the user types "url(" (which is turned
// into "url(;" by the rule view before coming here), being turned
@ -303,7 +303,7 @@ RuleRewriter.prototype = {
* @param {Number} index the index at which to start
* @return {Number} index of the first non-whitespace character, or -1
*/
skipWhitespaceBackward: function(string, index) {
skipWhitespaceBackward(string, index) {
for (
--index;
index >= 0 && (string[index] === " " || string[index] === "\t");
@ -321,7 +321,7 @@ RuleRewriter.prototype = {
* terminate. It might be invalid, so this
* function must check for that.
*/
maybeTerminateDecl: function(index) {
maybeTerminateDecl(index) {
if (
index < 0 ||
index >= this.declarations.length ||
@ -372,7 +372,7 @@ RuleRewriter.prototype = {
* @param {Number} index The index of the property.
* @return {String} The sanitized text.
*/
sanitizeText: function(text, index) {
sanitizeText(text, index) {
const [anySanitized, sanitizedText] = this.sanitizePropertyValue(text);
if (anySanitized) {
this.changedDeclarations[index] = sanitizedText;
@ -387,7 +387,7 @@ RuleRewriter.prototype = {
* @param {String} name current name of the property
* @param {String} newName new name of the property
*/
renameProperty: function(index, name, newName) {
renameProperty(index, name, newName) {
this.completeInitialization(index);
this.result += CSS.escape(newName);
// We could conceivably compute the name offsets instead so we
@ -404,7 +404,7 @@ RuleRewriter.prototype = {
* @param {Boolean} isEnabled true if the property should be enabled;
* false if it should be disabled
*/
setPropertyEnabled: function(index, name, isEnabled) {
setPropertyEnabled(index, name, isEnabled) {
this.completeInitialization(index);
const decl = this.decl;
const priority = decl.priority;
@ -480,7 +480,7 @@ RuleRewriter.prototype = {
* that holds the default indentation that should be used
* for edits to the rule.
*/
getDefaultIndentation: async function() {
async getDefaultIndentation() {
if (!this.rule.parentStyleSheet) {
return null;
}
@ -592,7 +592,7 @@ RuleRewriter.prototype = {
* @param {Boolean} enabled True if the new property should be
* enabled, false if disabled
*/
createProperty: function(index, name, value, priority, enabled) {
createProperty(index, name, value, priority, enabled) {
this.editPromise = this.internalCreateProperty(
index,
name,
@ -619,7 +619,7 @@ RuleRewriter.prototype = {
* @param {String} priority the property's priority, either the empty
* string or "important"
*/
setProperty: function(index, name, value, priority) {
setProperty(index, name, value, priority) {
this.completeInitialization(index);
// We might see a "set" on a previously non-existent property; in
// that case, act like "create".
@ -650,7 +650,7 @@ RuleRewriter.prototype = {
* @param {Number} index index of the property in the rule.
* @param {String} name the name of the property to remove
*/
removeProperty: function(index, name) {
removeProperty(index, name) {
this.completeInitialization(index);
// If asked to remove a property that does not exist, bail out.
@ -703,7 +703,7 @@ RuleRewriter.prototype = {
* @param {Number} copyOffset Offset into |inputString| of the
* final text to copy to the output string.
*/
completeCopying: function(copyOffset) {
completeCopying(copyOffset) {
// Add the trailing text.
this.result += this.inputString.substring(copyOffset);
},
@ -714,7 +714,7 @@ RuleRewriter.prototype = {
* @return {Promise} A promise which will be resolved when the modifications
* are complete.
*/
apply: function() {
apply() {
return Promise.resolve(this.editPromise).then(() => {
return this.rule.setRuleText(this.result, this.modifications);
});
@ -730,7 +730,7 @@ RuleRewriter.prototype = {
* whose value is the new text of the property.
* |text| is the rewritten text of the rule.
*/
getResult: function() {
getResult() {
return { changed: this.changedDeclarations, text: this.result };
},
};

2
devtools/client/fronts/source.js
Просмотреть файл

@ -89,7 +89,7 @@ class SourceFront extends FrontClassWithSpec(sourceSpec) {
const newResponse = {
source: resp,
contentType: contentType,
contentType,
};
return newResponse;
});

6
devtools/client/fronts/walker.js
Просмотреть файл

@ -134,7 +134,7 @@ class WalkerFront extends FrontClassWithSpec(walkerSpec) {
// mimicking what the server will do here.
const actorID = node.actorID;
this._releaseFront(node, !!options.force);
return super.releaseNode({ actorID: actorID });
return super.releaseNode({ actorID });
}
async findInspectingNode() {
@ -329,8 +329,8 @@ class WalkerFront extends FrontClassWithSpec(walkerSpec) {
const previousSibling = await this.previousSibling(node);
const nextSibling = await super.removeNode(node);
return {
previousSibling: previousSibling,
nextSibling: nextSibling,
previousSibling,
nextSibling,
};
}

4
devtools/client/inspector/boxmodel/box-model.js
Просмотреть файл

@ -330,7 +330,7 @@ BoxModel.prototype = {
const editor = new InplaceEditor(
{
element: element,
element,
initial: initialValue,
contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE,
property: {
@ -344,7 +344,7 @@ BoxModel.prototype = {
value += "px";
}
const properties = [{ name: property, value: value }];
const properties = [{ name: property, value }];
if (property.substring(0, 7) == "border-") {
const bprop = property.substring(0, property.length - 5) + "style";

8
devtools/client/inspector/boxmodel/utils/editing-session.js
Просмотреть файл

@ -35,7 +35,7 @@ EditingSession.prototype = {
* The name of the property.
* @return {String} the value.
*/
getPropertyFromRule: function(rule, property) {
getPropertyFromRule(rule, property) {
// Use the parsed declarations in the StyleRuleFront object if available.
const index = this.getPropertyIndex(property, rule);
if (index !== -1) {
@ -55,7 +55,7 @@ EditingSession.prototype = {
* @param {String} property
* The name of the property as a string
*/
getProperty: function(property) {
getProperty(property) {
// Create a hidden element for getPropertyFromRule to use
const div = this._doc.createElement("div");
div.setAttribute("style", "display: none");
@ -86,7 +86,7 @@ EditingSession.prototype = {
* Optional, defaults to the element style rule.
* @return {Number} The property index in the rule.
*/
getPropertyIndex: function(name, rule = this._rules[0]) {
getPropertyIndex(name, rule = this._rules[0]) {
if (!rule.declarations.length) {
return -1;
}
@ -174,7 +174,7 @@ EditingSession.prototype = {
}
},
destroy: function() {
destroy() {
this._modifications.clear();
this._cssProperties = null;

80
devtools/client/inspector/breadcrumbs.js
Просмотреть файл

@ -47,7 +47,7 @@ ArrowScrollBox.prototype = {
* Build the HTML, add to the DOM and start listening to
* events
*/
init: function() {
init() {
this.constructHtml();
this.onScroll = this.onScroll.bind(this);
@ -74,8 +74,8 @@ ArrowScrollBox.prototype = {
* @param {Element} element element to scroll
* @param {String} block desired alignment of element after scrolling
*/
scrollToElement: function(element, block) {
element.scrollIntoView({ block: block, behavior: this.scrollBehavior });
scrollToElement(element, block) {
element.scrollIntoView({ block, behavior: this.scrollBehavior });
},
/**
@ -83,7 +83,7 @@ ArrowScrollBox.prototype = {
* while the mouse button is held
* @param {Function} repeatFn the function to repeat while the button is held
*/
clickOrHold: function(repeatFn) {
clickOrHold(repeatFn) {
let timer;
const container = this.container;
@ -112,7 +112,7 @@ ArrowScrollBox.prototype = {
/**
* When start button is dbl clicked scroll to first element
*/
onStartBtnDblClick: function() {
onStartBtnDblClick() {
const children = this.inner.childNodes;
if (children.length < 1) {
return;
@ -125,7 +125,7 @@ ArrowScrollBox.prototype = {
/**
* When end button is dbl clicked scroll to last element
*/
onEndBtnDblClick: function() {
onEndBtnDblClick() {
const children = this.inner.childNodes;
if (children.length < 1) {
return;
@ -138,7 +138,7 @@ ArrowScrollBox.prototype = {
/**
* When start arrow button is clicked scroll towards first element
*/
onStartBtnClick: function() {
onStartBtnClick() {
const scrollToStart = () => {
const element = this.getFirstInvisibleElement();
if (!element) {
@ -154,7 +154,7 @@ ArrowScrollBox.prototype = {
/**
* When end arrow button is clicked scroll towards last element
*/
onEndBtnClick: function() {
onEndBtnClick() {
const scrollToEnd = () => {
const element = this.getLastInvisibleElement();
if (!element) {
@ -171,7 +171,7 @@ ArrowScrollBox.prototype = {
* Event handler for scrolling, update the
* enabled/disabled status of the arrow buttons
*/
onScroll: function() {
onScroll() {
const first = this.getFirstInvisibleElement();
if (!first) {
this.startBtn.setAttribute("disabled", "true");
@ -190,7 +190,7 @@ ArrowScrollBox.prototype = {
/**
* On underflow, make the arrow buttons invisible
*/
onUnderflow: function() {
onUnderflow() {
this.startBtn.style.visibility = "collapse";
this.endBtn.style.visibility = "collapse";
this.emit("underflow");
@ -199,7 +199,7 @@ ArrowScrollBox.prototype = {
/**
* On overflow, show the arrow buttons
*/
onOverflow: function() {
onOverflow() {
this.startBtn.style.visibility = "visible";
this.endBtn.style.visibility = "visible";
this.emit("overflow");
@ -213,7 +213,7 @@ ArrowScrollBox.prototype = {
* @param {Number} elementLeft the left edge of the element
* @param {Number} elementRight the right edge of the element
*/
elementLeftOfContainer: function(left, right, elementLeft, elementRight) {
elementLeftOfContainer(left, right, elementLeft, elementRight) {
return (
elementLeft < left - SCROLL_MARGIN && elementRight < right - SCROLL_MARGIN
);
@ -227,7 +227,7 @@ ArrowScrollBox.prototype = {
* @param {Number} elementLeft the left edge of the element
* @param {Number} elementRight the right edge of the element
*/
elementRightOfContainer: function(left, right, elementLeft, elementRight) {
elementRightOfContainer(left, right, elementLeft, elementRight) {
return (
elementLeft > left + SCROLL_MARGIN && elementRight > right + SCROLL_MARGIN
);
@ -237,7 +237,7 @@ ArrowScrollBox.prototype = {
* Get the first (i.e. furthest left for LTR)
* non or partly visible element in the scroll box
*/
getFirstInvisibleElement: function() {
getFirstInvisibleElement() {
const elementsList = Array.from(this.inner.childNodes).reverse();
const predicate = this.elementLeftOfContainer;
@ -248,7 +248,7 @@ ArrowScrollBox.prototype = {
* Get the last (i.e. furthest right for LTR)
* non or partly visible element in the scroll box
*/
getLastInvisibleElement: function() {
getLastInvisibleElement() {
const predicate = this.elementRightOfContainer;
return this.findFirstWithBounds(this.inner.childNodes, predicate);
},
@ -260,7 +260,7 @@ ArrowScrollBox.prototype = {
* @param {Function} predicate a function to be called with bounds
* information
*/
findFirstWithBounds: function(elements, predicate) {
findFirstWithBounds(elements, predicate) {
const left = this.inner.scrollLeft;
const right = left + this.inner.clientWidth;
for (const element of elements) {
@ -280,7 +280,7 @@ ArrowScrollBox.prototype = {
/**
* Build the HTML for the scroll box and insert it into the DOM
*/
constructHtml: function() {
constructHtml() {
this.startBtn = this.createElement(
"div",
"scrollbutton-up",
@ -320,7 +320,7 @@ ArrowScrollBox.prototype = {
* @param {DOMNode} parent the parent node to which it should be appended
* @return {DOMNode} The new element
*/
createElement: function(tagName, className, parent) {
createElement(tagName, className, parent) {
const el = this.doc.createElementNS(NS_XHTML, tagName);
el.className = className;
if (parent) {
@ -333,7 +333,7 @@ ArrowScrollBox.prototype = {
/**
* Remove event handlers and clean up
*/
destroy: function() {
destroy() {
this.inner.removeEventListener("scroll", this.onScroll);
this.startBtn.removeEventListener("mousedown", this.onStartBtnClick);
this.endBtn.removeEventListener("mousedown", this.onEndBtnClick);
@ -373,7 +373,7 @@ HTMLBreadcrumbs.prototype = {
return this.inspector.walker;
},
_init: function() {
_init() {
this.outer = this.doc.getElementById("inspector-breadcrumbs");
this.arrowScrollBox = new ArrowScrollBox(this.win, this.outer);
@ -431,7 +431,7 @@ HTMLBreadcrumbs.prototype = {
* @param {NodeFront} node The node to pretty-print
* @return {String}
*/
prettyPrintNodeAsText: function(node) {
prettyPrintNodeAsText(node) {
let text = node.isShadowRoot ? SHADOW_ROOT_TAGNAME : node.displayName;
if (node.isMarkerPseudoElement) {
text = "::marker";
@ -467,7 +467,7 @@ HTMLBreadcrumbs.prototype = {
* @param {NodeFront} node The node to pretty-print
* @returns {DocumentFragment}
*/
prettyPrintNodeAsXHTML: function(node) {
prettyPrintNodeAsXHTML(node) {
const tagLabel = this.doc.createElementNS(NS_XHTML, "span");
tagLabel.className = "breadcrumbs-widget-item-tag plain";
@ -533,7 +533,7 @@ HTMLBreadcrumbs.prototype = {
* Generic event handler.
* @param {DOMEvent} event.
*/
handleEvent: function(event) {
handleEvent(event) {
if (event.type == "click" && event.button == 0) {
this.handleClick(event);
} else if (event.type == "mouseover") {
@ -551,7 +551,7 @@ HTMLBreadcrumbs.prototype = {
* breadcrumb. Ensures that the focus stays on the container at all times.
* @param {DOMEvent} event.
*/
handleFocus: function(event) {
handleFocus(event) {
event.stopPropagation();
const node = this.nodeHierarchy[this.currentIndex];
@ -568,7 +568,7 @@ HTMLBreadcrumbs.prototype = {
* On click navigate to the correct node.
* @param {DOMEvent} event.
*/
handleClick: function(event) {
handleClick(event) {
const target = event.originalTarget;
if (target.tagName == "button") {
target.onBreadcrumbsClick();
@ -579,7 +579,7 @@ HTMLBreadcrumbs.prototype = {
* On mouse over, highlight the corresponding content DOM Node.
* @param {DOMEvent} event.
*/
handleMouseOver: function(event) {
handleMouseOver(event) {
const target = event.originalTarget;
if (target.tagName == "button") {
target.onBreadcrumbsHover();
@ -590,7 +590,7 @@ HTMLBreadcrumbs.prototype = {
* On mouse out, make sure to unhighlight.
* @param {DOMEvent} event.
*/
handleMouseOut: function(event) {
handleMouseOut(event) {
this.inspector.highlighters.hideHighlighterType(
this.inspector.highlighters.TYPES.BOXMODEL
);
@ -604,7 +604,7 @@ HTMLBreadcrumbs.prototype = {
* @param {DOMEvent} event
* Original event that triggered the shortcut.
*/
handleShortcut: function(event) {
handleShortcut(event) {
if (!this.selection.isElementNode()) {
return;
}
@ -636,7 +636,7 @@ HTMLBreadcrumbs.prototype = {
/**
* Remove nodes and clean up.
*/
destroy: function() {
destroy() {
this.selection.off("new-node-front", this.update);
this.selection.off("pseudoclass", this.updateSelectors);
this.selection.off("attribute-changed", this.updateSelectors);
@ -666,7 +666,7 @@ HTMLBreadcrumbs.prototype = {
/**
* Empty the breadcrumbs container.
*/
empty: function() {
empty() {
while (this.container.hasChildNodes()) {
this.container.firstChild.remove();
}
@ -676,7 +676,7 @@ HTMLBreadcrumbs.prototype = {
* Set which button represent the selected node.
* @param {Number} index Index of the displayed-button to select.
*/
setCursor: function(index) {
setCursor(index) {
// Unselect the previously selected button
if (
this.currentIndex > -1 &&
@ -698,7 +698,7 @@ HTMLBreadcrumbs.prototype = {
* @param {NodeFront} node.
* @returns {Number} The index for this node or -1 if not found.
*/
indexOf: function(node) {
indexOf(node) {
for (let i = this.nodeHierarchy.length - 1; i >= 0; i--) {
if (this.nodeHierarchy[i].node === node) {
return i;
@ -712,7 +712,7 @@ HTMLBreadcrumbs.prototype = {
* index.
* @param {Number} index.
*/
cutAfter: function(index) {
cutAfter(index) {
while (this.nodeHierarchy.length > index + 1) {
const toRemove = this.nodeHierarchy.pop();
this.container.removeChild(toRemove.button);
@ -724,7 +724,7 @@ HTMLBreadcrumbs.prototype = {
* @param {NodeFront} node The node from the page.
* @return {DOMNode} The <button> for this node.
*/
buildButton: function(node) {
buildButton(node) {
const button = this.doc.createElementNS(NS_XHTML, "button");
button.appendChild(this.prettyPrintNodeAsXHTML(node));
button.className = "breadcrumbs-widget-item";
@ -755,7 +755,7 @@ HTMLBreadcrumbs.prototype = {
* Connecting the end of the breadcrumbs to a node.
* @param {NodeFront} node The node to reach.
*/
expand: function(node) {
expand(node) {
const fragment = this.doc.createDocumentFragment();
let lastButtonInserted = null;
const originalLength = this.nodeHierarchy.length;
@ -784,7 +784,7 @@ HTMLBreadcrumbs.prototype = {
* @param {NodeFront} node.
* @return {Number} Index of the ancestor in the cache, or -1 if not found.
*/
getCommonAncestor: function(node) {
getCommonAncestor(node) {
while (node) {
const idx = this.indexOf(node);
if (idx > -1) {
@ -798,7 +798,7 @@ HTMLBreadcrumbs.prototype = {
/**
* Ensure the selected node is visible.
*/
scroll: function() {
scroll() {
// FIXME bug 684352: make sure its immediate neighbors are visible too.
if (!this.isDestroyed) {
const element = this.nodeHierarchy[this.currentIndex].button;
@ -809,7 +809,7 @@ HTMLBreadcrumbs.prototype = {
/**
* Update all button outputs.
*/
updateSelectors: function() {
updateSelectors() {
if (this.isDestroyed) {
return;
}
@ -842,7 +842,7 @@ HTMLBreadcrumbs.prototype = {
* @param {Array} mutations The mutations array.
* @return {Boolean}
*/
_hasInterestingMutations: function(mutations) {
_hasInterestingMutations(mutations) {
if (!mutations || !mutations.length) {
return false;
}
@ -883,7 +883,7 @@ HTMLBreadcrumbs.prototype = {
* @param {Array} mutations An array of mutations in case this was called as
* the "markupmutation" event listener.
*/
update: function(reason, mutations) {
update(reason, mutations) {
if (this.isDestroyed) {
return;
}

86
devtools/client/inspector/computed/computed.js
Просмотреть файл

@ -92,7 +92,7 @@ UpdateProcess.prototype = {
/**
* Schedule a new batch on the main loop.
*/
schedule: function() {
schedule() {
if (this.canceled) {
return;
}
@ -103,7 +103,7 @@ UpdateProcess.prototype = {
* Cancel the running process. onItem will not be called again,
* and onCancel will be called.
*/
cancel: function() {
cancel() {
if (this._timeout) {
clearTimeout(this._timeout);
this._timeout = 0;
@ -112,7 +112,7 @@ UpdateProcess.prototype = {
this.onCancel();
},
_timeoutHandler: function() {
_timeoutHandler() {
this._timeout = null;
try {
this._runBatch();
@ -128,7 +128,7 @@ UpdateProcess.prototype = {
}
},
_runBatch: function() {
_runBatch() {
const time = Date.now();
while (!this.canceled) {
const next = this._next();
@ -144,7 +144,7 @@ UpdateProcess.prototype = {
* Returns the item at the current index and increases the index.
* If all items have already been processed, will throw ERROR_ITERATION_DONE.
*/
_next: function() {
_next() {
if (this.index < this.array.length) {
return this.array[this.index++];
}
@ -318,7 +318,7 @@ CssComputedView.prototype = {
);
},
_handlePrefChange: function() {
_handlePrefChange() {
if (this._computed) {
this.refreshPanel();
}
@ -332,7 +332,7 @@ CssComputedView.prototype = {
* The highlighted node to get styles for.
* @returns a promise that will be resolved when highlighting is complete.
*/
selectElement: function(element) {
selectElement(element) {
if (!element) {
if (this.viewedElementPageStyle) {
this.viewedElementPageStyle.off(
@ -384,7 +384,7 @@ CssComputedView.prototype = {
* returns null if the node isn't anything we care about
*/
// eslint-disable-next-line complexity
getNodeInfo: function(node) {
getNodeInfo(node) {
if (!node) {
return null;
}
@ -501,7 +501,7 @@ CssComputedView.prototype = {
};
},
_createPropertyViews: function() {
_createPropertyViews() {
if (this._createViewsPromise) {
return this._createViewsPromise;
}
@ -544,7 +544,7 @@ CssComputedView.prototype = {
return this._createViewsPromise;
},
isPanelVisible: function() {
isPanelVisible() {
return (
this.inspector.toolbox &&
this.inspector.sidebar &&
@ -557,7 +557,7 @@ CssComputedView.prototype = {
* Refresh the panel content. This could be called by a "ruleview-changed" event, but
* we avoid the extra processing unless the panel is visible.
*/
refreshPanel: function() {
refreshPanel() {
if (!this._viewedElement || !this.isPanelVisible()) {
return Promise.resolve();
}
@ -635,7 +635,7 @@ CssComputedView.prototype = {
/**
* Handle the shortcut events in the computed view.
*/
_onShortcut: function(name, event) {
_onShortcut(name, event) {
if (!event.target.closest("#sidebar-panel-computedview")) {
return;
}
@ -659,7 +659,7 @@ CssComputedView.prototype = {
* @param {String} value
* The search value.
*/
setFilterStyles: function(value = "") {
setFilterStyles(value = "") {
this.searchField.value = value;
this.searchField.focus();
this._onFilterStyles();
@ -668,7 +668,7 @@ CssComputedView.prototype = {
/**
* Called when the user enters a search term in the filter style search box.
*/
_onFilterStyles: function() {
_onFilterStyles() {
if (this._filterChangedTimeout) {
clearTimeout(this._filterChangedTimeout);
}
@ -687,7 +687,7 @@ CssComputedView.prototype = {
* Called when the user clicks on the clear button in the filter style search
* box. Returns true if the search box is cleared and false otherwise.
*/
_onClearSearch: function() {
_onClearSearch() {
if (this.searchField.value) {
this.setFilterStyles("");
return true;
@ -699,7 +699,7 @@ CssComputedView.prototype = {
/**
* The change event handler for the includeBrowserStyles checkbox.
*/
_onIncludeBrowserStyles: function() {
_onIncludeBrowserStyles() {
this.refreshSourceFilter();
this.refreshPanel();
},
@ -710,7 +710,7 @@ CssComputedView.prototype = {
* document or one of thedocument's stylesheets. If .checked is false we
* display all properties including those that come from UA stylesheets.
*/
refreshSourceFilter: function() {
refreshSourceFilter() {
this._matchedProperties = null;
this._sourceFilter = this.includeBrowserStyles
? CssLogic.FILTER.UA
@ -720,7 +720,7 @@ CssComputedView.prototype = {
/**
* The CSS as displayed by the UI.
*/
createStyleViews: function() {
createStyleViews() {
if (CssComputedView.propertyNames) {
return;
}
@ -775,14 +775,14 @@ CssComputedView.prototype = {
/**
* Focus the window on mousedown.
*/
focusWindow: function() {
focusWindow() {
this.styleWindow.focus();
},
/**
* Context menu handler.
*/
_onContextMenu: function(event) {
_onContextMenu(event) {
// Call stopPropagation() and preventDefault() here so that avoid to show default
// context menu in about:devtools-toolbox. See Bug 1515265.
event.stopPropagation();
@ -790,7 +790,7 @@ CssComputedView.prototype = {
this.contextMenu.show(event);
},
_onClick: function(event) {
_onClick(event) {
const target = event.target;
if (target.nodeName === "a") {
@ -806,7 +806,7 @@ CssComputedView.prototype = {
* @param {Event} event
* copy event object.
*/
_onCopy: function(event) {
_onCopy(event) {
const win = this.styleWindow;
const text = win
.getSelection()
@ -821,7 +821,7 @@ CssComputedView.prototype = {
/**
* Copy the current selection to the clipboard
*/
copySelection: function() {
copySelection() {
try {
const win = this.styleWindow;
const text = win
@ -838,7 +838,7 @@ CssComputedView.prototype = {
/**
* Destructor for CssComputedView.
*/
destroy: function() {
destroy() {
this._viewedElement = null;
if (this.viewedElementPageStyle) {
this.viewedElementPageStyle.off("stylesheet-updated", this.refreshPanel);
@ -1059,7 +1059,7 @@ PropertyView.prototype = {
*
* @return {Element}
*/
buildMain: function() {
buildMain() {
const doc = this.tree.styleDocument;
// Build the container element
@ -1149,7 +1149,7 @@ PropertyView.prototype = {
return this.element;
},
buildSelectorContainer: function() {
buildSelectorContainer() {
const doc = this.tree.styleDocument;
const element = doc.createElementNS(HTML_NS, "div");
element.setAttribute("class", this.propertyContentClassName);
@ -1163,7 +1163,7 @@ PropertyView.prototype = {
/**
* Refresh the panel's CSS property value.
*/
refresh: function() {
refresh() {
this.element.className = this.propertyHeaderClassName;
this.element.nextElementSibling.className = this.propertyContentClassName;
@ -1207,7 +1207,7 @@ PropertyView.prototype = {
/**
* Refresh the panel matched rules.
*/
refreshMatchedSelectors: function() {
refreshMatchedSelectors() {
const hasMatchedSelectors = this.hasMatchedSelectors;
this.matchedSelectorsContainer.parentNode.hidden = !hasMatchedSelectors;
@ -1252,7 +1252,7 @@ PropertyView.prototype = {
return this._matchedSelectorResponse;
},
_buildMatchedSelectors: function() {
_buildMatchedSelectors() {
const frag = this.element.ownerDocument.createDocumentFragment();
for (const selector of this.matchedSelectorViews) {
@ -1327,7 +1327,7 @@ PropertyView.prototype = {
* Used to determine the class name of the targets click
* event.
*/
onMatchedToggle: function(event) {
onMatchedToggle(event) {
if (event.shiftKey) {
return;
}
@ -1339,14 +1339,14 @@ PropertyView.prototype = {
/**
* The action when a user clicks on the MDN help link for a property.
*/
mdnLinkClick: function(event) {
mdnLinkClick(event) {
openContentLink(this.link);
},
/**
* Destroy this property view, removing event listeners
*/
destroy: function() {
destroy() {
if (this._matchedSelectorViews) {
for (const view of this._matchedSelectorViews) {
view.destroy();
@ -1392,7 +1392,7 @@ function SelectorView(tree, selectorInfo) {
this.source = CssLogic.shortSource(sheet) + ":" + rule.line;
this.generatedLocation = {
sheet: sheet,
sheet,
href: sheet.href || sheet.nodeHref,
line: rule.line,
column: rule.column,
@ -1427,7 +1427,7 @@ SelectorView.prototype = {
* bundle.
* @see css-logic.js - the CssLogic.STATUS array.
*/
_cacheStatusNames: function() {
_cacheStatusNames() {
if (SelectorView.STATUS_NAMES.length) {
return;
}
@ -1501,7 +1501,7 @@ SelectorView.prototype = {
* @param {Object | null} originalLocation
* The original position object (url/line/column) or null.
*/
_updateLocation: function(originalLocation) {
_updateLocation(originalLocation) {
if (!this.tree.element) {
return;
}
@ -1533,7 +1533,7 @@ SelectorView.prototype = {
* We can only view stylesheets contained in document.styleSheets inside the
* style editor.
*/
openStyleEditor: function() {
openStyleEditor() {
const inspector = this.tree.inspector;
const rule = this.selectorInfo.rule;
@ -1557,7 +1557,7 @@ SelectorView.prototype = {
/**
* Destroy this selector view, removing event listeners
*/
destroy: function() {
destroy() {
if (this._unsubscribeCallback) {
this._unsubscribeCallback();
}
@ -1587,18 +1587,18 @@ function ComputedViewTool(inspector, window) {
}
ComputedViewTool.prototype = {
isPanelVisible: function() {
isPanelVisible() {
if (!this.computedView) {
return false;
}
return this.computedView.isPanelVisible();
},
onDetachedFront: function() {
onDetachedFront() {
this.onSelected(false);
},
onSelected: async function(selectElement = true) {
async onSelected(selectElement = true) {
// Ignore the event if the view has been destroyed, or if it's inactive.
// But only if the current selection isn't null. If it's been set to null,
// let the update go through as this is needed to empty the view on
@ -1628,13 +1628,13 @@ ComputedViewTool.prototype = {
}
},
refresh: function() {
refresh() {
if (this.isPanelVisible()) {
this.computedView.refreshPanel();
}
},
onPanelSelected: function() {
onPanelSelected() {
if (
this.inspector.selection.nodeFront === this.computedView._viewedElement
) {
@ -1644,7 +1644,7 @@ ComputedViewTool.prototype = {
}
},
destroy: function() {
destroy() {
this.inspector.styleChangeTracker.off("style-changed", this.refresh);
this.inspector.sidebar.off("computedview-selected", this.refresh);
this.inspector.selection.off("pseudoclass", this.refresh);

40
devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
Просмотреть файл

@ -49,28 +49,28 @@ const TEST_URI = `
const TEST_DATA = [
{
desc: "Testing a null node",
getHoveredNode: function() {
getHoveredNode() {
return null;
},
assertNodeInfo: function(nodeInfo) {
assertNodeInfo(nodeInfo) {
is(nodeInfo, null);
},
},
{
desc: "Testing a useless node",
getHoveredNode: function(view) {
getHoveredNode(view) {
return view.element;
},
assertNodeInfo: function(nodeInfo) {
assertNodeInfo(nodeInfo) {
is(nodeInfo, null);
},
},
{
desc: "Testing a property name",
getHoveredNode: function(view) {
getHoveredNode(view) {
return getComputedViewProperty(view, "color").nameSpan;
},
assertNodeInfo: function(nodeInfo) {
assertNodeInfo(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_PROPERTY_TYPE);
ok("property" in nodeInfo.value);
ok("value" in nodeInfo.value);
@ -80,10 +80,10 @@ const TEST_DATA = [
},
{
desc: "Testing a property value",
getHoveredNode: function(view) {
getHoveredNode(view) {
return getComputedViewProperty(view, "color").valueSpan;
},
assertNodeInfo: function(nodeInfo) {
assertNodeInfo(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
ok("property" in nodeInfo.value);
ok("value" in nodeInfo.value);
@ -93,11 +93,11 @@ const TEST_DATA = [
},
{
desc: "Testing an image url",
getHoveredNode: function(view) {
getHoveredNode(view) {
const { valueSpan } = getComputedViewProperty(view, "background-image");
return valueSpan.querySelector(".theme-link");
},
assertNodeInfo: function(nodeInfo) {
assertNodeInfo(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_IMAGE_URL_TYPE);
ok("property" in nodeInfo.value);
ok("value" in nodeInfo.value);
@ -108,44 +108,44 @@ const TEST_DATA = [
},
{
desc: "Testing a matched rule selector (bestmatch)",
getHoveredNode: async function(view) {
async getHoveredNode(view) {
const el = await getComputedViewMatchedRules(view, "background-color");
return el.querySelector(".bestmatch");
},
assertNodeInfo: function(nodeInfo) {
assertNodeInfo(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
is(nodeInfo.value, "div div");
},
},
{
desc: "Testing a matched rule selector (matched)",
getHoveredNode: async function(view) {
async getHoveredNode(view) {
const el = await getComputedViewMatchedRules(view, "background-color");
return el.querySelector(".matched");
},
assertNodeInfo: function(nodeInfo) {
assertNodeInfo(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
is(nodeInfo.value, "div");
},
},
{
desc: "Testing a matched rule selector (parentmatch)",
getHoveredNode: async function(view) {
async getHoveredNode(view) {
const el = await getComputedViewMatchedRules(view, "color");
return el.querySelector(".parentmatch");
},
assertNodeInfo: function(nodeInfo) {
assertNodeInfo(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
is(nodeInfo.value, "body");
},
},
{
desc: "Testing a matched rule value",
getHoveredNode: async function(view) {
async getHoveredNode(view) {
const el = await getComputedViewMatchedRules(view, "color");
return el.querySelector(".computed-other-property-value");
},
assertNodeInfo: function(nodeInfo) {
assertNodeInfo(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
is(nodeInfo.value.property, "color");
is(nodeInfo.value.value, "red");
@ -153,11 +153,11 @@ const TEST_DATA = [
},
{
desc: "Testing a matched rule stylesheet link",
getHoveredNode: async function(view) {
async getHoveredNode(view) {
const el = await getComputedViewMatchedRules(view, "color");
return el.querySelector(".rule-link .theme-link");
},
assertNodeInfo: function(nodeInfo) {
assertNodeInfo(nodeInfo) {
is(nodeInfo, null);
},
},

2
devtools/client/inspector/computed/test/head.js
Просмотреть файл

@ -42,7 +42,7 @@ function getComputedViewProperty(view, name) {
const valueSpan = property.querySelector(".computed-property-value");
if (nameSpan.firstChild.textContent === name) {
prop = { nameSpan: nameSpan, valueSpan: valueSpan };
prop = { nameSpan, valueSpan };
break;
}
}

24
devtools/client/inspector/inspector-search.js
Просмотреть файл

@ -50,7 +50,7 @@ function InspectorSearch(inspector, input, clearBtn) {
exports.InspectorSearch = InspectorSearch;
InspectorSearch.prototype = {
destroy: function() {
destroy() {
this.searchBox.removeEventListener("keydown", this._onKeyDown, true);
this.searchBox.removeEventListener("input", this._onInput, true);
this.searchClearButton.removeEventListener("click", this._onClearSearch);
@ -59,7 +59,7 @@ InspectorSearch.prototype = {
this.autocompleter.destroy();
},
_onSearch: function(reverse = false) {
_onSearch(reverse = false) {
this.doFullTextSearch(this.searchBox.value, reverse).catch(console.error);
},
@ -102,7 +102,7 @@ InspectorSearch.prototype = {
}
},
_onInput: function() {
_onInput() {
if (this.searchBox.value.length === 0) {
this.searchClearButton.hidden = true;
this._onSearch();
@ -111,7 +111,7 @@ InspectorSearch.prototype = {
}
},
_onKeyDown: function(event) {
_onKeyDown(event) {
if (event.keyCode === KeyCodes.DOM_VK_RETURN) {
this._onSearch(event.shiftKey);
}
@ -124,7 +124,7 @@ InspectorSearch.prototype = {
}
},
_onClearSearch: function() {
_onClearSearch() {
this.searchBox.parentNode.classList.remove("devtools-searchbox-no-match");
this.searchBox.value = "";
this.searchClearButton.hidden = true;
@ -304,7 +304,7 @@ SelectorAutocompleter.prototype = {
/**
* Removes event listeners and cleans up references.
*/
destroy: function() {
destroy() {
this.searchBox.removeEventListener("input", this.showSuggestions, true);
this.searchBox.removeEventListener(
"keypress",
@ -321,7 +321,7 @@ SelectorAutocompleter.prototype = {
/**
* Handles keypresses inside the input box.
*/
_onSearchKeypress: function(event) {
_onSearchKeypress(event) {
const popup = this.searchPopup;
switch (event.keyCode) {
case KeyCodes.DOM_VK_RETURN:
@ -375,7 +375,7 @@ SelectorAutocompleter.prototype = {
/**
* Handles click events from the autocomplete popup.
*/
_onSearchPopupClick: function(event) {
_onSearchPopupClick(event) {
const selectedItem = this.searchPopup.selectedItem;
if (selectedItem) {
this.searchBox.value = selectedItem.label;
@ -390,7 +390,7 @@ SelectorAutocompleter.prototype = {
* Reset previous search results on markup-mutations to make sure we search
* again after nodes have been added/removed/changed.
*/
_onMarkupMutation: function() {
_onMarkupMutation() {
this._searchResults = null;
this._lastSearched = null;
},
@ -401,7 +401,7 @@ SelectorAutocompleter.prototype = {
* @return {Promise} promise that will resolve when the autocomplete popup is fully
* displayed or hidden.
*/
_showPopup: function(list, popupState) {
_showPopup(list, popupState) {
let total = 0;
const query = this.searchBox.value;
const items = [];
@ -462,7 +462,7 @@ SelectorAutocompleter.prototype = {
/**
* Hide the suggestion popup if necessary.
*/
hidePopup: function() {
hidePopup() {
const onPopupClosed = this.searchPopup.once("popup-closed");
this.searchPopup.hidePopup();
return onPopupClosed;
@ -472,7 +472,7 @@ SelectorAutocompleter.prototype = {
* Suggests classes,ids and tags based on the user input as user types in the
* searchbox.
*/
showSuggestions: async function() {
async showSuggestions() {
let query = this.searchBox.value;
const originalQuery = this.searchBox.value;

88
devtools/client/inspector/inspector.js
Просмотреть файл

@ -315,7 +315,7 @@ Inspector.prototype = {
this.selection.setNodeFront(null);
},
onResourceAvailable: function(resources) {
onResourceAvailable(resources) {
// Store all onRootNodeAvailable calls which are asynchronous.
const rootNodeAvailablePromises = [];
@ -351,7 +351,7 @@ Inspector.prototype = {
/**
* Reset the inspector on new root mutation.
*/
onRootNodeAvailable: async function(rootNodeFront) {
async onRootNodeAvailable(rootNodeFront) {
// Record new-root timing for telemetry
this._newRootStart = this.panelWin.performance.now();
@ -378,7 +378,7 @@ Inspector.prototype = {
}
},
_initMarkupView: async function() {
async _initMarkupView() {
if (!this._markupFrame) {
this._markupFrame = this.panelDoc.createElement("iframe");
this._markupFrame.setAttribute(
@ -551,13 +551,13 @@ Inspector.prototype = {
* This is useful to silence useless errors that happen when the inspector is closed
* while still initializing (and making protocol requests).
*/
_handleRejectionIfNotDestroyed: function(e) {
_handleRejectionIfNotDestroyed(e) {
if (!this._destroyed) {
console.error(e);
}
},
_onWillNavigate: function() {
_onWillNavigate() {
this._defaultNode = null;
this.selection.setNodeFront(null);
if (this._highlighters) {
@ -567,11 +567,11 @@ Inspector.prototype = {
this._pendingSelectionUnique = null;
},
_getCssProperties: async function(targetFront) {
async _getCssProperties(targetFront) {
this._cssProperties = await targetFront.getFront("cssProperties");
},
_getAccessibilityFront: async function(targetFront) {
async _getAccessibilityFront(targetFront) {
this.accessibilityFront = await targetFront.getFront("accessibility");
return this.accessibilityFront;
},
@ -582,7 +582,7 @@ Inspector.prototype = {
* @param {NodeFront} rootNodeFront
* The current root node front for the top walker.
*/
_getDefaultNodeForSelection: async function(rootNodeFront) {
async _getDefaultNodeForSelection(rootNodeFront) {
if (this._defaultNode) {
return this._defaultNode;
}
@ -640,7 +640,7 @@ Inspector.prototype = {
/**
* Hooks the searchbar to show result and auto completion suggestions.
*/
setupSearchBox: function() {
setupSearchBox() {
this.searchBox = this.panelDoc.getElementById("inspector-searchbox");
this.searchClearButton = this.panelDoc.getElementById(
"inspector-searchinput-clear"
@ -697,11 +697,11 @@ Inspector.prototype = {
return this.search.autocompleter;
},
_clearSearchResultsLabel: function(result) {
_clearSearchResultsLabel(result) {
return this._updateSearchResultsLabel(result, true);
},
_updateSearchResultsLabel: function(result, clear = false) {
_updateSearchResultsLabel(result, clear = false) {
let str = "";
if (!clear) {
if (result) {
@ -774,7 +774,7 @@ Inspector.prototype = {
*
* @return {Boolean} true if the inspector should be in landscape mode.
*/
useLandscapeMode: function() {
useLandscapeMode() {
if (!this.panelDoc) {
return true;
}
@ -793,7 +793,7 @@ Inspector.prototype = {
* Build Splitter located between the main and side area of
* the Inspector panel.
*/
setupSplitter: function() {
setupSplitter() {
const { width, height, splitSidebarWidth } = this.getSidebarSize();
this.sidebarSplitBoxRef = this.React.createRef();
@ -835,7 +835,7 @@ Inspector.prototype = {
this.panelWin.addEventListener("resize", this.onPanelWindowResize, true);
},
_onLazyPanelResize: async function() {
async _onLazyPanelResize() {
// We can be called on a closed window or destroyed toolbox because of the deferred task.
if (
window.closed ||
@ -849,7 +849,7 @@ Inspector.prototype = {
this.emit("inspector-resize");
},
getSidebarSize: function() {
getSidebarSize() {
let width;
let height;
let splitSidebarWidth;
@ -878,7 +878,7 @@ Inspector.prototype = {
return { width, height, splitSidebarWidth };
},
onSidebarHidden: function() {
onSidebarHidden() {
// Store the current splitter size to preferences.
const state = this.splitBox.state;
Services.prefs.setIntPref(
@ -895,33 +895,33 @@ Inspector.prototype = {
);
},
onSidebarResized: function(width, height) {
onSidebarResized(width, height) {
this.toolbox.emit("inspector-sidebar-resized", { width, height });
},
/**
* Returns inspector tab that is active.
*/
getActiveSidebar: function() {
getActiveSidebar() {
return Services.prefs.getCharPref("devtools.inspector.activeSidebar");
},
setActiveSidebar: function(toolId) {
setActiveSidebar(toolId) {
Services.prefs.setCharPref("devtools.inspector.activeSidebar", toolId);
},
/**
* Returns tab that is explicitly selected by user.
*/
getSelectedSidebar: function() {
getSelectedSidebar() {
return Services.prefs.getCharPref("devtools.inspector.selectedSidebar");
},
setSelectedSidebar: function(toolId) {
setSelectedSidebar(toolId) {
Services.prefs.setCharPref("devtools.inspector.selectedSidebar", toolId);
},
onSidebarSelect: function(toolId) {
onSidebarSelect(toolId) {
// Save the currently selected sidebar panel
this.setSelectedSidebar(toolId);
this.setActiveSidebar(toolId);
@ -933,7 +933,7 @@ Inspector.prototype = {
this.toolbox.emit("inspector-sidebar-select", toolId);
},
onSidebarShown: function() {
onSidebarShown() {
const { width, height, splitSidebarWidth } = this.getSidebarSize();
this.splitBox.setState({ width, height });
this.sidebarSplitBoxRef.current.setState({ width: splitSidebarWidth });
@ -1089,14 +1089,14 @@ Inspector.prototype = {
/**
* Returns a boolean indicating whether a sidebar panel instance exists.
*/
hasPanel: function(id) {
hasPanel(id) {
return this._panels.has(id);
},
/**
* Lazily get and create panel instances displayed in the sidebar
*/
getPanel: function(id) {
getPanel(id) {
if (this._panels.has(id)) {
return this._panels.get(id);
}
@ -1290,7 +1290,7 @@ Inspector.prototype = {
* @param {String} options.title
* The tab title
*/
addExtensionSidebar: function(id, { title }) {
addExtensionSidebar(id, { title }) {
if (this._panels.has(id)) {
throw new Error(
`Cannot create an extension sidebar for the existent id: ${id}`
@ -1319,7 +1319,7 @@ Inspector.prototype = {
* @param {String} id
* The id of the sidebar tab to destroy.
*/
removeExtensionSidebar: function(id) {
removeExtensionSidebar(id) {
if (!this._panels.has(id)) {
throw new Error(`Unable to find a sidebar panel with id "${id}"`);
}
@ -1347,7 +1347,7 @@ Inspector.prototype = {
* @param {React.Component} panel component. See `InspectorPanelTab` as an example.
* @param {boolean} selected true if the panel should be selected
*/
addSidebarTab: function(id, title, panel, selected) {
addSidebarTab(id, title, panel, selected) {
this.sidebar.addTab(id, title, panel, selected);
},
@ -1415,7 +1415,7 @@ Inspector.prototype = {
this.emit("inspector-toolbar-updated");
},
teardownToolbar: function() {
teardownToolbar() {
if (this.addNodeButton) {
this.addNodeButton.removeEventListener("click", this.addNode);
this.addNodeButton = null;
@ -1486,7 +1486,7 @@ Inspector.prototype = {
* Can a new HTML element be inserted into the currently selected element?
* @return {Boolean}
*/
canAddHTMLChild: function() {
canAddHTMLChild() {
const selection = this.selection;
// Don't allow to insert an element into these elements. This should only
@ -1541,7 +1541,7 @@ Inspector.prototype = {
/**
* When a new node is selected.
*/
onNewSelection: function(value, reason) {
onNewSelection(value, reason) {
if (reason === "selection-destroy") {
return;
}
@ -1617,7 +1617,7 @@ Inspector.prototype = {
* invoked when the tool is done updating with the node
* that the tool is viewing.
*/
updating: function(name) {
updating(name) {
if (
this._updateProgress &&
this._updateProgress.node != this.selection.nodeFront
@ -1631,7 +1631,7 @@ Inspector.prototype = {
this._updateProgress = {
node: this.selection.nodeFront,
outstanding: new Set(),
checkDone: function() {
checkDone() {
if (this !== self._updateProgress) {
return;
}
@ -1663,7 +1663,7 @@ Inspector.prototype = {
/**
* Cancel notification of inspector updates.
*/
cancelUpdate: function() {
cancelUpdate() {
this._updateProgress = null;
},
@ -1672,7 +1672,7 @@ Inspector.prototype = {
* parent is found (may happen when deleting an iframe inside which the
* node was selected).
*/
onDetached: function(parentNode) {
onDetached(parentNode) {
this.breadcrumbs.cutAfter(this.breadcrumbs.indexOf(parentNode));
const nodeFront = parentNode ? parentNode : this._defaultNode;
this.selection.setNodeFront(nodeFront, { reason: "detached" });
@ -1681,7 +1681,7 @@ Inspector.prototype = {
/**
* Destroy the inspector.
*/
destroy: function() {
destroy() {
if (this._destroyed) {
return;
}
@ -1783,7 +1783,7 @@ Inspector.prototype = {
this.telemetry = null;
},
_destroyMarkup: function() {
_destroyMarkup() {
if (this.markup) {
this.markup.destroy();
this.markup = null;
@ -1794,27 +1794,27 @@ Inspector.prototype = {
}
},
onEyeDropperButtonClicked: function() {
onEyeDropperButtonClicked() {
this.eyeDropperButton.classList.contains("checked")
? this.hideEyeDropper()
: this.showEyeDropper();
},
startEyeDropperListeners: function() {
startEyeDropperListeners() {
this.toolbox.tellRDMAboutPickerState(true, PICKER_TYPES.EYEDROPPER);
this.inspectorFront.once("color-pick-canceled", this.onEyeDropperDone);
this.inspectorFront.once("color-picked", this.onEyeDropperDone);
this.once("new-root", this.onEyeDropperDone);
},
stopEyeDropperListeners: function() {
stopEyeDropperListeners() {
this.toolbox.tellRDMAboutPickerState(false, PICKER_TYPES.EYEDROPPER);
this.inspectorFront.off("color-pick-canceled", this.onEyeDropperDone);
this.inspectorFront.off("color-picked", this.onEyeDropperDone);
this.off("new-root", this.onEyeDropperDone);
},
onEyeDropperDone: function() {
onEyeDropperDone() {
this.eyeDropperButton.classList.remove("checked");
this.stopEyeDropperListeners();
},
@ -1823,7 +1823,7 @@ Inspector.prototype = {
* Show the eyedropper on the page.
* @return {Promise} resolves when the eyedropper is visible.
*/
showEyeDropper: function() {
showEyeDropper() {
// The eyedropper button doesn't exist, most probably because the actor doesn't
// support the pickColorFromPage, or because the page isn't HTML.
if (!this.eyeDropperButton) {
@ -1843,7 +1843,7 @@ Inspector.prototype = {
* Hide the eyedropper.
* @return {Promise} resolves when the eyedropper is hidden.
*/
hideEyeDropper: function() {
hideEyeDropper() {
// The eyedropper button doesn't exist, most probably because the page isn't HTML.
if (!this.eyeDropperButton) {
return null;
@ -1888,7 +1888,7 @@ Inspector.prototype = {
/**
* Toggle a pseudo class.
*/
togglePseudoClass: function(pseudo) {
togglePseudoClass(pseudo) {
if (this.selection.isElementNode()) {
const node = this.selection.nodeFront;
if (node.hasPseudoClassLock(pseudo)) {

169
devtools/client/inspector/markup/markup.js
Просмотреть файл

@ -426,13 +426,13 @@ MarkupView.prototype = {
* This is useful to silence useless errors that happen when the markup view is
* destroyed while still initializing (and making protocol requests).
*/
_handleRejectionIfNotDestroyed: function(e) {
_handleRejectionIfNotDestroyed(e) {
if (!this._destroyed) {
console.error(e);
}
},
_initTooltips: function() {
_initTooltips() {
if (this.imagePreviewTooltip) {
return;
}
@ -444,18 +444,18 @@ MarkupView.prototype = {
this._enableImagePreviewTooltip();
},
_enableImagePreviewTooltip: function() {
_enableImagePreviewTooltip() {
this.imagePreviewTooltip.startTogglingOnHover(
this._elt,
this._isImagePreviewTarget
);
},
_disableImagePreviewTooltip: function() {
_disableImagePreviewTooltip() {
this.imagePreviewTooltip.stopTogglingOnHover();
},
_onToolboxPickerHover: function(nodeFront) {
_onToolboxPickerHover(nodeFront) {
this.showNode(nodeFront).then(() => {
this._showNodeAsHovered(nodeFront);
}, console.error);
@ -465,7 +465,7 @@ MarkupView.prototype = {
* If the element picker gets canceled, make sure and re-center the view on the
* current selected element.
*/
_onToolboxPickerCanceled: function() {
_onToolboxPickerCanceled() {
if (this._selectedContainer) {
scrollIntoViewIfNeeded(this._selectedContainer.editor.elt);
}
@ -474,7 +474,7 @@ MarkupView.prototype = {
isDragging: false,
_draggedContainer: null,
_onMouseMove: function(event) {
_onMouseMove(event) {
// Note that in tests, we start listening immediately from the constructor to avoid having to simulate a mousemove.
// Also note that initTooltips bails out if it is called many times, so it isn't an issue to call it a second
// time from here in case tests are doing a mousemove.
@ -514,7 +514,7 @@ MarkupView.prototype = {
* If focus is moved outside of the markup view document and there is a
* selected container, make its contents not focusable by a keyboard.
*/
_onBlur: function(event) {
_onBlur(event) {
if (!this._selectedContainer) {
return;
}
@ -529,7 +529,7 @@ MarkupView.prototype = {
}
},
_onContextMenu: function(event) {
_onContextMenu(event) {
this.contextMenu.show(event);
},
@ -538,7 +538,7 @@ MarkupView.prototype = {
* Auto-scrolls the view to reveal nodes below the fold to drop the dragged
* node in.
*/
_autoScroll: function(event) {
_autoScroll(event) {
const docEl = this.doc.documentElement;
if (this._autoScrollAnimationFrame) {
@ -598,7 +598,7 @@ MarkupView.prototype = {
/**
* Run a loop on the requestAnimationFrame.
*/
_runUpdateLoop: function(update) {
_runUpdateLoop(update) {
const loop = () => {
update();
this._autoScrollAnimationFrame = this.win.requestAnimationFrame(loop);
@ -606,7 +606,7 @@ MarkupView.prototype = {
loop();
},
_onMouseClick: function(event) {
_onMouseClick(event) {
// From the target passed here, let's find the parent MarkupContainer
// and forward the event if needed.
let parentNode = event.target;
@ -625,7 +625,7 @@ MarkupView.prototype = {
}
},
_onMouseUp: function(event) {
_onMouseUp(event) {
if (this._draggedContainer) {
this._draggedContainer.onMouseUp(event);
}
@ -637,7 +637,7 @@ MarkupView.prototype = {
}
},
_onCollapseAttributesPrefChange: function() {
_onCollapseAttributesPrefChange() {
this.collapseAttributes = Services.prefs.getBoolPref(
ATTR_COLLAPSE_ENABLED_PREF
);
@ -647,7 +647,7 @@ MarkupView.prototype = {
this.update();
},
cancelDragging: function() {
cancelDragging() {
if (!this.isDragging) {
return;
}
@ -674,12 +674,12 @@ MarkupView.prototype = {
* @param {NodeFront} nodeFront
* The node to show as hovered
*/
_showNodeAsHovered: function(nodeFront) {
_showNodeAsHovered(nodeFront) {
const container = this.getContainer(nodeFront);
this._showContainerAsHovered(container);
},
_showContainerAsHovered: function(container) {
_showContainerAsHovered(container) {
if (this._hoveredContainer === container) {
return;
}
@ -692,7 +692,7 @@ MarkupView.prototype = {
this._hoveredContainer = container;
},
_onMouseOut: async function(event) {
async _onMouseOut(event) {
// Emulate mouseleave by skipping any relatedTarget inside the markup-view.
if (this._elt.contains(event.relatedTarget)) {
return;
@ -723,7 +723,7 @@ MarkupView.prototype = {
* Configuration object with options for the Box Model Highlighter.
* @return {Promise} Resolves after the highlighter for this nodeFront is shown.
*/
_showBoxModel: function(nodeFront, options) {
_showBoxModel(nodeFront, options) {
return this.inspector.highlighters.showHighlighterTypeForNode(
this.inspector.highlighters.TYPES.BOXMODEL,
nodeFront,
@ -736,7 +736,7 @@ MarkupView.prototype = {
*
* @return {Promise} Resolves when the highlighter is hidden.
*/
_hideBoxModel: function() {
_hideBoxModel() {
return this.inspector.highlighters.hideHighlighterType(
this.inspector.highlighters.TYPES.BOXMODEL
);
@ -762,7 +762,7 @@ MarkupView.prototype = {
* Highlighter instance
*
*/
handleHighlighterEvent: function(eventName, data) {
handleHighlighterEvent(eventName, data) {
switch (data.type) {
// Toggle the "active" CSS class name on flex and grid display badges next to
// elements in the Markup view when a coresponding flex or grid highlighter is
@ -798,7 +798,7 @@ MarkupView.prototype = {
/**
* Used by tests
*/
getSelectedContainer: function() {
getSelectedContainer() {
return this._selectedContainer;
},
@ -812,7 +812,7 @@ MarkupView.prototype = {
* true to get the slotted version of the container.
* @return {MarkupContainer} The container for the provided node.
*/
getContainer: function(node, slotted) {
getContainer(node, slotted) {
const key = this._getContainerKey(node, slotted);
return this._containers.get(key);
},
@ -825,7 +825,7 @@ MarkupView.prototype = {
* @param {Boolean} slotted
* true if the container represents the slotted version of the node.
*/
setContainer: function(node, container, slotted) {
setContainer(node, container, slotted) {
const key = this._getContainerKey(node, slotted);
return this._containers.set(key, container);
},
@ -839,12 +839,12 @@ MarkupView.prototype = {
* true to check for a container matching the slotted version of the node.
* @return {Boolean} True if a container exists, false otherwise.
*/
hasContainer: function(node, slotted) {
hasContainer(node, slotted) {
const key = this._getContainerKey(node, slotted);
return this._containers.has(key);
},
_getContainerKey: function(node, slotted) {
_getContainerKey(node, slotted) {
if (!slotted) {
return node;
}
@ -855,7 +855,7 @@ MarkupView.prototype = {
return this._slottedContainerKeys.get(node);
},
_isContainerSelected: function(container) {
_isContainerSelected(container) {
if (!container) {
return false;
}
@ -867,7 +867,7 @@ MarkupView.prototype = {
);
},
update: function() {
update() {
const updateChildren = node => {
this.getContainer(node).update();
for (const child of node.treeChildren()) {
@ -938,7 +938,7 @@ MarkupView.prototype = {
* already being hovered over, since in that case it will already be
* highlighted.
*/
_shouldNewSelectionBeHighlighted: function() {
_shouldNewSelectionBeHighlighted() {
const reason = this.inspector.selection.reason;
const unwantedReasons = [
"inspector-default-selection",
@ -957,7 +957,7 @@ MarkupView.prototype = {
* Highlights the node if needed, and make sure it is shown and selected in
* the view.
*/
_onNewSelection: function(nodeFront, reason) {
_onNewSelection(nodeFront, reason) {
const selection = this.inspector.selection;
// this will probably leak.
// TODO: use resource api listeners?
@ -1026,7 +1026,7 @@ MarkupView.prototype = {
* Maybe make selected the current node selection's MarkupContainer depending
* on why the current node got selected.
*/
maybeNavigateToNewSelection: async function() {
async maybeNavigateToNewSelection() {
const { reason, nodeFront } = this.inspector.selection;
// The list of reasons that should lead to navigating to the node.
@ -1059,7 +1059,7 @@ MarkupView.prototype = {
* Create a TreeWalker to find the next/previous
* node for selection.
*/
_selectionWalker: function(start) {
_selectionWalker(start) {
const walker = this.doc.createTreeWalker(
start || this._elt,
nodeFilterConstants.SHOW_ELEMENT,
@ -1078,7 +1078,7 @@ MarkupView.prototype = {
return walker;
},
_onCopy: function(evt) {
_onCopy(evt) {
// Ignore copy events from editors
if (this._isInputOrTextarea(evt.target)) {
return;
@ -1095,7 +1095,7 @@ MarkupView.prototype = {
/**
* Copy the outerHTML of the selected Node to the clipboard.
*/
copyOuterHTML: function() {
copyOuterHTML() {
if (!this.inspector.selection.isNode()) {
return;
}
@ -1119,7 +1119,7 @@ MarkupView.prototype = {
/**
* Copy the innerHTML of the selected Node to the clipboard.
*/
copyInnerHTML: function() {
copyInnerHTML() {
const nodeFront = this.inspector.selection.nodeFront;
if (!this.inspector.selection.isNode()) {
return;
@ -1133,7 +1133,7 @@ MarkupView.prototype = {
* attempt to follow that link (which may result in opening a new tab, the
* style editor or debugger).
*/
followAttributeLink: function(type, link) {
followAttributeLink(type, link) {
if (!type || !link) {
return;
}
@ -1176,7 +1176,7 @@ MarkupView.prototype = {
/**
* Register all key shortcuts.
*/
_initShortcuts: function() {
_initShortcuts() {
const shortcuts = new KeyShortcuts({
window: this.win,
});
@ -1237,7 +1237,7 @@ MarkupView.prototype = {
/**
* Check if a node is an input or textarea
*/
_isInputOrTextarea: function(element) {
_isInputOrTextarea(element) {
const name = element.tagName.toLowerCase();
return name === "input" || name === "textarea";
},
@ -1250,7 +1250,7 @@ MarkupView.prototype = {
* If set to true and if we're deleting the node, focus the previous
* sibling after deletion, otherwise the next one.
*/
deleteNodeOrAttribute: function(moveBackward) {
deleteNodeOrAttribute(moveBackward) {
const focusedAttribute = this.doc.activeElement
? this.doc.activeElement.closest(".attreditor")
: null;
@ -1288,7 +1288,7 @@ MarkupView.prototype = {
* @param {Boolean} moveBackward
* If set to true, focus the previous sibling, otherwise the next one.
*/
deleteNode: function(node, moveBackward) {
deleteNode(node, moveBackward) {
if (!this.isDeletable(node)) {
return;
}
@ -1375,7 +1375,7 @@ MarkupView.prototype = {
/**
* If an editable item is focused, select its container.
*/
_onFocus: function(event) {
_onFocus(event) {
let parent = event.target;
while (!parent.container) {
parent = parent.parentNode;
@ -1392,7 +1392,7 @@ MarkupView.prototype = {
* @param {MarkupContainer} container
* The container we're navigating to.
*/
navigate: function(container) {
navigate(container) {
if (!container) {
return;
}
@ -1411,7 +1411,7 @@ MarkupView.prototype = {
* Whether we are importing the slotted version of the node.
* @return {MarkupContainer} The MarkupContainer object for this element.
*/
importNode: function(node, flashNode, slotted) {
importNode(node, flashNode, slotted) {
if (!node) {
return null;
}
@ -1453,7 +1453,7 @@ MarkupView.prototype = {
return container;
},
_onResourceAvailable: async function(resources) {
async _onResourceAvailable(resources) {
for (const resource of resources) {
if (
!this.resourceCommand ||
@ -1483,9 +1483,9 @@ MarkupView.prototype = {
}
},
_onTargetAvailable: function({ targetFront }) {},
_onTargetAvailable({ targetFront }) {},
_onTargetDestroyed: function({ targetFront, isModeSwitching }) {
_onTargetDestroyed({ targetFront, isModeSwitching }) {
// Bug 1776250: We only watch targets in order to update containers which
// might no longer be able to display children hosted in remote processes,
// which corresponds to a Browser Toolbox mode switch.
@ -1502,7 +1502,7 @@ MarkupView.prototype = {
/**
* Mutation observer used for included nodes.
*/
_onWalkerMutations: function(mutations) {
_onWalkerMutations(mutations) {
for (const mutation of mutations) {
const type = mutation.type;
const target = mutation.target;
@ -1564,7 +1564,7 @@ MarkupView.prototype = {
* @param {Array} nodes
* An array of nodeFronts
*/
_onWalkerNodeStatesChanged: function(nodes) {
_onWalkerNodeStatesChanged(nodes) {
for (const node of nodes) {
const container = this.getContainer(node);
if (container) {
@ -1577,7 +1577,7 @@ MarkupView.prototype = {
* Given a list of mutations returned by the mutation observer, flash the
* corresponding containers to attract attention.
*/
_flashMutatedNodes: function(mutations) {
_flashMutatedNodes(mutations) {
const addedOrEditedContainers = new Set();
const removedContainers = new Set();
@ -1628,10 +1628,7 @@ MarkupView.prototype = {
* Make sure the given node's parents are expanded and the
* node is scrolled on to screen.
*/
showNode: function(
node,
{ centered = true, slotted, smoothScroll = false } = {}
) {
showNode(node, { centered = true, slotted, smoothScroll = false } = {}) {
if (slotted && !this.hasContainer(node, slotted)) {
throw new Error("Tried to show a slotted node not previously imported");
} else {
@ -1651,7 +1648,7 @@ MarkupView.prototype = {
}, this._handleRejectionIfNotDestroyed);
},
_ensureNodeImported: function(node) {
_ensureNodeImported(node) {
let parent = node;
this.importNode(node);
@ -1665,7 +1662,7 @@ MarkupView.prototype = {
/**
* Expand the container's children.
*/
_expandContainer: function(container) {
_expandContainer(container) {
return this._updateChildren(container, { expand: true }).then(() => {
if (this._destroyed) {
// Could not expand the node, the markup-view was destroyed in the meantime. Just
@ -1679,7 +1676,7 @@ MarkupView.prototype = {
/**
* Expand the node's children.
*/
expandNode: function(node) {
expandNode(node) {
const container = this.getContainer(node);
return this._expandContainer(container);
},
@ -1690,7 +1687,7 @@ MarkupView.prototype = {
* @param {MarkupContainer} container
* The container to expand.
*/
_expandAll: function(container) {
_expandAll(container) {
return this._expandContainer(container)
.then(() => {
let child = container.children.firstChild;
@ -1711,7 +1708,7 @@ MarkupView.prototype = {
* The node to expand, or null to start from the top.
* @return {Promise} promise that resolves once all children are expanded.
*/
expandAll: function(node) {
expandAll(node) {
node = node || this._rootNode;
return this._expandAll(this.getContainer(node));
},
@ -1719,12 +1716,12 @@ MarkupView.prototype = {
/**
* Collapse the node's children.
*/
collapseNode: function(node) {
collapseNode(node) {
const container = this.getContainer(node);
container.setExpanded(false);
},
_collapseAll: function(container) {
_collapseAll(container) {
container.setExpanded(false);
const children = container.getChildContainers() || [];
children.forEach(child => this._collapseAll(child));
@ -1737,7 +1734,7 @@ MarkupView.prototype = {
* The node to collapse.
* @return {Promise} promise that resolves once all children are collapsed.
*/
collapseAll: function(node) {
collapseAll(node) {
this._collapseAll(this.getContainer(node));
// collapseAll is synchronous, return a promise for consistency with expandAll.
@ -1754,7 +1751,7 @@ MarkupView.prototype = {
* otherwise the innerHTML.
* @return {Promise} that will be resolved with the outerHTML / innerHTML.
*/
_getNodeHTML: function(node, isOuter) {
_getNodeHTML(node, isOuter) {
let walkerPromise = null;
if (isOuter) {
@ -1773,7 +1770,7 @@ MarkupView.prototype = {
* The NodeFront to get the outerHTML for.
* @return {Promise} that will be resolved with the outerHTML.
*/
getNodeOuterHTML: function(node) {
getNodeOuterHTML(node) {
return this._getNodeHTML(node, true);
},
@ -1784,7 +1781,7 @@ MarkupView.prototype = {
* The NodeFront to get the innerHTML for.
* @return {Promise} that will be resolved with the innerHTML.
*/
getNodeInnerHTML: function(node) {
getNodeInnerHTML(node) {
return this._getNodeHTML(node);
},
@ -1794,7 +1791,7 @@ MarkupView.prototype = {
* This is useful when changing the outerHTML or the tag name so that the
* newly inserted node gets selected instead of the one that just got removed.
*/
reselectOnRemoved: function(removedNode, reason) {
reselectOnRemoved(removedNode, reason) {
// Only allow one removed node reselection at a time, so that when there are
// more than 1 request in parallel, the last one wins.
this.cancelReselectOnRemoved();
@ -1857,7 +1854,7 @@ MarkupView.prototype = {
* reselect the corresponding node when that happens.
* Useful when the outerHTML/tagname edition failed.
*/
cancelReselectOnRemoved: function() {
cancelReselectOnRemoved() {
if (this._removedNodeObserver) {
this.inspector.off("markupmutation", this._removedNodeObserver);
this._removedNodeObserver = null;
@ -1877,7 +1874,7 @@ MarkupView.prototype = {
* The old outerHTML that will be used if the user undoes the update.
* @return {Promise} that will resolve when the outer HTML has been updated.
*/
updateNodeOuterHTML: function(node, newValue) {
updateNodeOuterHTML(node, newValue) {
const container = this.getContainer(node);
if (!container) {
return Promise.reject();
@ -1902,7 +1899,7 @@ MarkupView.prototype = {
* The old innerHTML that will be used if the user undoes the update.
* @return {Promise} that will resolve when the inner HTML has been updated.
*/
updateNodeInnerHTML: function(node, newValue, oldValue) {
updateNodeInnerHTML(node, newValue, oldValue) {
const container = this.getContainer(node);
if (!container) {
return Promise.reject();
@ -1933,7 +1930,7 @@ MarkupView.prototype = {
* @return {Promise} that will resolve when the adjacent HTML has
* been inserted.
*/
insertAdjacentHTMLToNode: function(node, position, value) {
insertAdjacentHTMLToNode(node, position, value) {
const container = this.getContainer(node);
if (!container) {
return Promise.reject();
@ -1966,7 +1963,7 @@ MarkupView.prototype = {
* @param {NodeFront} node
* The NodeFront to edit.
*/
beginEditingHTML: function(node) {
beginEditingHTML(node) {
// We use outer html for elements, but inner html for fragments.
const isOuter = node.nodeType == nodeConstants.ELEMENT_NODE;
const html = isOuter
@ -2019,7 +2016,7 @@ MarkupView.prototype = {
* @param {Boolean} applyToDescendants
* Whether all descendants should also be expanded/collapsed
*/
setNodeExpanded: function(node, expanded, applyToDescendants) {
setNodeExpanded(node, expanded, applyToDescendants) {
if (expanded) {
if (applyToDescendants) {
this.expandAll(node);
@ -2044,12 +2041,12 @@ MarkupView.prototype = {
* @return {Boolean} False if the node is already marked as selected, true
* otherwise.
*/
markNodeAsSelected: function(node, reason = "nodeselected") {
markNodeAsSelected(node, reason = "nodeselected") {
const container = this.getContainer(node);
return this._markContainerAsSelected(container);
},
_markContainerAsSelected: function(container, reason) {
_markContainerAsSelected(container, reason) {
if (!container || this._selectedContainer === container) {
return false;
}
@ -2081,7 +2078,7 @@ MarkupView.prototype = {
* Make sure that every ancestor of the selection are updated
* and included in the list of visible children.
*/
_ensureVisible: function(node) {
_ensureVisible(node) {
while (node) {
const container = this.getContainer(node);
const parent = this._getParentInTree(node);
@ -2100,7 +2097,7 @@ MarkupView.prototype = {
/**
* Unmark selected node (no node selected).
*/
unmarkSelectedNode: function() {
unmarkSelectedNode() {
if (this._selectedContainer) {
this._selectedContainer.selected = false;
this._selectedContainer = null;
@ -2114,7 +2111,7 @@ MarkupView.prototype = {
*
* @return The node that should be made visible, if any.
*/
_checkSelectionVisible: function(container) {
_checkSelectionVisible(container) {
let centered = null;
let node = this.inspector.selection.nodeFront;
while (node) {
@ -2128,7 +2125,7 @@ MarkupView.prototype = {
return centered;
},
_forceUpdateChildren: async function(container, options = {}) {
async _forceUpdateChildren(container, options = {}) {
const { flash, updateLevel, expand } = options;
// Set childrenDirty to true to force fetching new children.
@ -2170,7 +2167,7 @@ MarkupView.prototype = {
* @return {Promise} that will be resolved when the children are ready
* (which may be immediately).
*/
_updateChildren: function(container, options) {
_updateChildren(container, options) {
// Slotted containers do not display any children.
if (container.isSlotted()) {
return Promise.resolve(container);
@ -2305,7 +2302,7 @@ MarkupView.prototype = {
return updatePromise;
},
buildMoreNodesButtonMarkup: function(container) {
buildMoreNodesButtonMarkup(container) {
const elt = this.doc.createElement("li");
elt.classList.add("more-nodes", "devtools-class-comment");
@ -2333,7 +2330,7 @@ MarkupView.prototype = {
return elt;
},
_waitForChildren: function() {
_waitForChildren() {
if (!this._queuedChildUpdates) {
return Promise.resolve(undefined);
}
@ -2344,7 +2341,7 @@ MarkupView.prototype = {
/**
* Return a list of the children to display for this container.
*/
_getVisibleChildren: async function(container, centered) {
async _getVisibleChildren(container, centered) {
let maxChildren = container.maxChildren || this.maxChildren;
if (maxChildren == -1) {
maxChildren = undefined;
@ -2369,7 +2366,7 @@ MarkupView.prototype = {
* Use this method when you are interested in the parent of a node from the perspective
* of the markup-view tree, and not from the perspective of the actual DOM.
*/
_getParentInTree: function(node) {
_getParentInTree(node) {
const parent = node.parentOrHost();
if (!parent) {
return null;
@ -2391,7 +2388,7 @@ MarkupView.prototype = {
/**
* Tear down the markup panel.
*/
destroy: function() {
destroy() {
if (this._destroyed) {
return;
}
@ -2508,7 +2505,7 @@ MarkupView.prototype = {
* @param {DOMNode} el
* @return {DOMNode}
*/
findClosestDragDropTarget: function(el) {
findClosestDragDropTarget(el) {
return el.classList.contains("tag-line")
? el
: el.querySelector(".tag-line") || el.closest(".tag-line");
@ -2518,7 +2515,7 @@ MarkupView.prototype = {
* Takes an element as it's only argument and marks the element
* as the drop target
*/
indicateDropTarget: function(el) {
indicateDropTarget(el) {
if (this._lastDropTarget) {
this._lastDropTarget.classList.remove("drop-target");
}
@ -2537,7 +2534,7 @@ MarkupView.prototype = {
/**
* Takes an element to mark it as indicator of dragging target's initial place
*/
indicateDragTarget: function(el) {
indicateDragTarget(el) {
if (this._lastDragTarget) {
this._lastDragTarget.classList.remove("drag-target");
}

8
devtools/client/inspector/markup/test/browser_markup_display_node_02.js
Просмотреть файл

@ -34,7 +34,7 @@ const TEST_DATA = [
textContent: "grid",
visible: true,
},
changeStyle: async function() {
async changeStyle() {
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
const node = content.document.getElementById("grid");
node.style.display = "block";
@ -50,7 +50,7 @@ const TEST_DATA = [
before: {
visible: false,
},
changeStyle: async function() {
async changeStyle() {
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
const node = content.document.getElementById("grid");
node.style.display = "grid";
@ -67,7 +67,7 @@ const TEST_DATA = [
before: {
visible: false,
},
changeStyle: async function() {
async changeStyle() {
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
const node = content.document.getElementById("block");
node.style.display = "grid";
@ -84,7 +84,7 @@ const TEST_DATA = [
before: {
visible: false,
},
changeStyle: async function() {
async changeStyle() {
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
content.document.getElementById("flex").removeAttribute("hidden")
);

4
devtools/client/inspector/markup/test/browser_markup_dragdrop_draggable.js
Просмотреть файл

@ -21,7 +21,7 @@ const TEST_DATA = [
{ node: "input", draggable: true },
{ node: "div", draggable: true },
{
node: async function(inspector) {
async node(inspector) {
const parentFront = await getNodeFront("#before", inspector);
const { nodes } = await inspector.walker.children(parentFront);
// Getting the comment node.
@ -30,7 +30,7 @@ const TEST_DATA = [
draggable: true,
},
{
node: async function(inspector) {
async node(inspector) {
const parentFront = await getNodeFront("#test", inspector);
const { nodes } = await inspector.walker.children(parentFront);
// Getting the ::before pseudo element.

4
devtools/client/inspector/markup/test/browser_markup_events_01.js
Просмотреть файл

@ -73,7 +73,7 @@ const TEST_DATA = [
},
{
selector: "#noevents",
beforeTest: async function(inspector) {
async beforeTest(inspector) {
const nodeMutated = inspector.once("markupmutation");
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
content.wrappedJSObject.addNoeventsClickHandler()
@ -94,7 +94,7 @@ const TEST_DATA = [
},
{
selector: "#noevents",
beforeTest: async function(inspector) {
async beforeTest(inspector) {
const nodeMutated = inspector.once("markupmutation");
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
content.wrappedJSObject.removeNoeventsClickHandler()

6
devtools/client/inspector/markup/test/browser_markup_html_edit_01.js
Просмотреть файл

@ -14,7 +14,7 @@ const TEST_DATA = [
selector: "#one",
oldHTML: '<div id="one">First <em>Div</em></div>',
newHTML: '<div id="one">First Div</div>',
validate: async function() {
async validate() {
const text = await getContentPageElementProperty("#one", "textContent");
is(text, "First Div", "New div has expected text content");
const num = await getNumberOfMatchingElementsInContentPage("#one em");
@ -41,7 +41,7 @@ const TEST_DATA = [
newHTML:
'<div id="addedAttribute" class="important" disabled checked>' +
"addedAttribute</div>",
validate: async function({ pageNodeFront, selectedNodeFront }) {
async validate({ pageNodeFront, selectedNodeFront }) {
is(pageNodeFront, selectedNodeFront, "Original element is selected");
const html = await getContentPageElementProperty(
"#addedAttribute",
@ -67,7 +67,7 @@ const TEST_DATA = [
'<div id="siblings-before-sibling">before sibling</div>' +
'<div id="siblings">siblings (updated)</div>' +
'<div id="siblings-after-sibling">after sibling</div>',
validate: async function({ selectedNodeFront, inspector }) {
async validate({ selectedNodeFront, inspector }) {
const beforeSiblingFront = await getNodeFront(
"#siblings-before-sibling",
inspector

10
devtools/client/inspector/markup/test/browser_markup_html_edit_02.js
Просмотреть файл

@ -13,7 +13,7 @@ const TEST_DATA = [
selector: "#badMarkup1",
oldHTML: '<div id="badMarkup1">badMarkup1</div>',
newHTML: '<div id="badMarkup1">badMarkup1</div> hanging</div>',
validate: async function({ pageNodeFront, selectedNodeFront }) {
async validate({ pageNodeFront, selectedNodeFront }) {
is(pageNodeFront, selectedNodeFront, "Original element is selected");
const [textNodeName, textNodeData] = await SpecialPowers.spawn(
@ -35,7 +35,7 @@ const TEST_DATA = [
newHTML:
'<div id="badMarkup2">badMarkup2</div> hanging<div></div>' +
"</div></div></body>",
validate: async function({ pageNodeFront, selectedNodeFront }) {
async validate({ pageNodeFront, selectedNodeFront }) {
is(pageNodeFront, selectedNodeFront, "Original element is selected");
const [textNodeName, textNodeData] = await SpecialPowers.spawn(
@ -57,7 +57,7 @@ const TEST_DATA = [
newHTML:
'<div id="badMarkup3">badMarkup3 <em>Emphasized <strong> ' +
"and strong</div>",
validate: async function({ pageNodeFront, selectedNodeFront }) {
async validate({ pageNodeFront, selectedNodeFront }) {
is(pageNodeFront, selectedNodeFront, "Original element is selected");
const emText = await getContentPageElementProperty(
@ -76,7 +76,7 @@ const TEST_DATA = [
selector: "#badMarkup4",
oldHTML: '<div id="badMarkup4">badMarkup4</div>',
newHTML: '<div id="badMarkup4">badMarkup4</p>',
validate: async function({ pageNodeFront, selectedNodeFront }) {
async validate({ pageNodeFront, selectedNodeFront }) {
is(pageNodeFront, selectedNodeFront, "Original element is selected");
const divText = await getContentPageElementProperty(
@ -107,7 +107,7 @@ const TEST_DATA = [
selector: "#badMarkup5",
oldHTML: '<p id="badMarkup5">badMarkup5</p>',
newHTML: '<p id="badMarkup5">badMarkup5 <div>with a nested div</div></p>',
validate: async function({ pageNodeFront, selectedNodeFront }) {
async validate({ pageNodeFront, selectedNodeFront }) {
is(pageNodeFront, selectedNodeFront, "Original element is selected");
const num = await getNumberOfMatchingElementsInContentPage(

64
devtools/client/inspector/markup/test/browser_markup_mutation_01.js
Просмотреть файл

@ -16,10 +16,10 @@ const TEST_URL = URL_ROOT + "doc_markup_mutation.html";
const TEST_DATA = [
{
desc: "Adding an attribute",
test: async function() {
async test() {
await setContentPageElementAttribute("#node1", "newattr", "newattrval");
},
check: async function(inspector) {
async check(inspector) {
const { editor } = await getContainerForSelector("#node1", inspector);
ok(
[...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
@ -35,10 +35,10 @@ const TEST_DATA = [
},
{
desc: "Removing an attribute",
test: async function() {
async test() {
await removeContentPageElementAttribute("#node1", "newattr");
},
check: async function(inspector) {
async check(inspector) {
const { editor } = await getContainerForSelector("#node1", inspector);
ok(
![...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
@ -50,10 +50,10 @@ const TEST_DATA = [
},
{
desc: "Re-adding an attribute",
test: async function() {
async test() {
await setContentPageElementAttribute("#node1", "newattr", "newattrval");
},
check: async function(inspector) {
async check(inspector) {
const { editor } = await getContainerForSelector("#node1", inspector);
ok(
[...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
@ -69,14 +69,14 @@ const TEST_DATA = [
},
{
desc: "Changing an attribute",
test: async function() {
async test() {
await setContentPageElementAttribute(
"#node1",
"newattr",
"newattrchanged"
);
},
check: async function(inspector) {
async check(inspector) {
const { editor } = await getContainerForSelector("#node1", inspector);
ok(
[...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
@ -92,7 +92,7 @@ const TEST_DATA = [
},
{
desc: "Adding another attribute does not rerender unchanged attributes",
test: async function(inspector) {
async test(inspector) {
const { editor } = await getContainerForSelector("#node1", inspector);
// This test checks the impact on the markup-view nodes after setting attributes on
@ -111,7 +111,7 @@ const TEST_DATA = [
);
await setContentPageElementAttribute("#node1", "otherattr", "othervalue");
},
check: async function(inspector) {
async check(inspector) {
const { editor } = await getContainerForSelector("#node1", inspector);
info(
@ -138,13 +138,13 @@ const TEST_DATA = [
{
desc: "Adding ::after element",
numMutations: 2,
test: async function() {
async test() {
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
const node1 = content.document.querySelector("#node1");
node1.classList.add("pseudo");
});
},
check: async function(inspector) {
async check(inspector) {
const { children } = await getContainerForSelector("#node1", inspector);
is(
children.childNodes.length,
@ -156,23 +156,23 @@ const TEST_DATA = [
{
desc: "Removing ::after element",
numMutations: 2,
test: async function() {
async test() {
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
const node1 = content.document.querySelector("#node1");
node1.classList.remove("pseudo");
});
},
check: async function(inspector) {
async check(inspector) {
const container = await getContainerForSelector("#node1", inspector);
ok(container.inlineTextChild, "Has single text child.");
},
},
{
desc: "Updating the text-content",
test: async function() {
async test() {
await setContentPageElementProperty("#node1", "textContent", "newtext");
},
check: async function(inspector) {
async check(inspector) {
const container = await getContainerForSelector("#node1", inspector);
ok(container.inlineTextChild, "Has single text child.");
ok(!container.canExpand, "Can't expand container with inlineTextChild.");
@ -186,14 +186,14 @@ const TEST_DATA = [
},
{
desc: "Adding a second text child",
test: async function() {
async test() {
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
const node1 = content.document.querySelector("#node1");
const newText = node1.ownerDocument.createTextNode("more");
node1.appendChild(newText);
});
},
check: async function(inspector) {
async check(inspector) {
const container = await getContainerForSelector("#node1", inspector);
ok(!container.inlineTextChild, "Does not have single text child.");
ok(container.canExpand, "Can expand container with child nodes.");
@ -205,10 +205,10 @@ const TEST_DATA = [
},
{
desc: "Go from 2 to 1 text child",
test: async function() {
async test() {
await setContentPageElementProperty("#node1", "textContent", "newtext");
},
check: async function(inspector) {
async check(inspector) {
const container = await getContainerForSelector("#node1", inspector);
ok(container.inlineTextChild, "Has single text child.");
ok(!container.canExpand, "Can't expand container with inlineTextChild.");
@ -222,10 +222,10 @@ const TEST_DATA = [
},
{
desc: "Removing an only text child",
test: async function() {
async test() {
await setContentPageElementProperty("#node1", "innerHTML", "");
},
check: async function(inspector) {
async check(inspector) {
const container = await getContainerForSelector("#node1", inspector);
ok(!container.inlineTextChild, "Does not have single text child.");
ok(!container.canExpand, "Can't expand empty container.");
@ -237,10 +237,10 @@ const TEST_DATA = [
},
{
desc: "Go from 0 to 1 text child",
test: async function() {
async test() {
await setContentPageElementProperty("#node1", "textContent", "newtext");
},
check: async function(inspector) {
async check(inspector) {
const container = await getContainerForSelector("#node1", inspector);
ok(container.inlineTextChild, "Has single text child.");
ok(!container.canExpand, "Can't expand container with inlineTextChild.");
@ -255,14 +255,14 @@ const TEST_DATA = [
{
desc: "Updating the innerHTML",
test: async function() {
async test() {
await setContentPageElementProperty(
"#node2",
"innerHTML",
"<div><span>foo</span></div>"
);
},
check: async function(inspector) {
async check(inspector) {
const container = await getContainerForSelector("#node2", inspector);
const openTags = container.children.querySelectorAll(".open .tag");
@ -279,7 +279,7 @@ const TEST_DATA = [
},
{
desc: "Removing child nodes",
test: async function() {
async test() {
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
const node4 = content.document.querySelector("#node4");
while (node4.firstChild) {
@ -287,21 +287,21 @@ const TEST_DATA = [
}
});
},
check: async function(inspector) {
async check(inspector) {
const { children } = await getContainerForSelector("#node4", inspector);
is(children.innerHTML, "", "Children have been removed");
},
},
{
desc: "Appending a child to a different parent",
test: async function() {
async test() {
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
const node17 = content.document.querySelector("#node17");
const node2 = content.document.querySelector("#node2");
node2.appendChild(node17);
});
},
check: async function(inspector) {
async check(inspector) {
const { children } = await getContainerForSelector("#node16", inspector);
is(
children.innerHTML,
@ -330,7 +330,7 @@ const TEST_DATA = [
// node21
// node18
// node19
test: async function() {
async test() {
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
const node18 = content.document.querySelector("#node18");
const node20 = content.document.querySelector("#node20");
@ -339,7 +339,7 @@ const TEST_DATA = [
node20.appendChild(node18);
});
},
check: async function(inspector) {
async check(inspector) {
await inspector.markup.expandAll();
const { children } = await getContainerForSelector("#node1", inspector);

16
devtools/client/inspector/markup/test/browser_markup_mutation_02.js
Просмотреть файл

@ -28,7 +28,7 @@ const TEST_URL = URL_ROOT + "doc_markup_flashing.html";
const TEST_DATA = [
{
desc: "Adding a new node should flash the new node",
mutate: async function() {
async mutate() {
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
const newLi = content.document.createElement("LI");
newLi.textContent = "new list item";
@ -39,7 +39,7 @@ const TEST_DATA = [
},
{
desc: "Removing a node should flash its parent",
mutate: async function() {
async mutate() {
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
const root = content.document.querySelector(".list");
root.removeChild(root.lastElementChild);
@ -48,7 +48,7 @@ const TEST_DATA = [
},
{
desc: "Re-appending an existing node should only flash this node",
mutate: async function() {
async mutate() {
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
const root = content.document.querySelector(".list");
root.appendChild(root.firstElementChild);
@ -59,7 +59,7 @@ const TEST_DATA = [
{
desc: "Adding an attribute should flash the attribute",
attribute: "test-name",
mutate: async function() {
async mutate() {
await setContentPageElementAttribute(
".list",
"test-name",
@ -72,7 +72,7 @@ const TEST_DATA = [
"Adding an attribute with css reserved characters should flash the " +
"attribute",
attribute: "one:two",
mutate: async function() {
async mutate() {
await setContentPageElementAttribute(
".list",
"one:two",
@ -83,7 +83,7 @@ const TEST_DATA = [
{
desc: "Editing an attribute should flash the attribute",
attribute: "class",
mutate: async function() {
async mutate() {
await setContentPageElementAttribute(
".list",
"class",
@ -94,7 +94,7 @@ const TEST_DATA = [
{
desc: "Multiple changes to an attribute should flash the attribute",
attribute: "class",
mutate: async function() {
async mutate() {
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
const root = content.document.querySelector(".list");
root.removeAttribute("class");
@ -108,7 +108,7 @@ const TEST_DATA = [
},
{
desc: "Removing an attribute should flash the node",
mutate: async function() {
async mutate() {
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
const root = content.document.querySelector(".list");
root.removeAttribute("class");

8
devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js
Просмотреть файл

@ -107,7 +107,7 @@ var TEST_DATA = [
expectedAttributes: {
"data-long": LONG_ATTRIBUTE,
},
setUp: function(inspector) {
setUp(inspector) {
Services.prefs.setBoolPref("devtools.markup.collapseAttributes", false);
},
validate: (container, inspector) => {
@ -117,7 +117,7 @@ var TEST_DATA = [
.querySelector(".attr-value").textContent;
is(visibleAttrText, LONG_ATTRIBUTE);
},
tearDown: function(inspector) {
tearDown(inspector) {
Services.prefs.clearUserPref("devtools.markup.collapseAttributes");
},
},
@ -127,7 +127,7 @@ var TEST_DATA = [
expectedAttributes: {
"data-long": LONG_ATTRIBUTE,
},
setUp: function(inspector) {
setUp(inspector) {
Services.prefs.setIntPref("devtools.markup.collapseAttributeLength", 2);
},
validate: (container, inspector) => {
@ -140,7 +140,7 @@ var TEST_DATA = [
.querySelector(".attr-value").textContent;
is(visibleAttrText, collapsed);
},
tearDown: function(inspector) {
tearDown(inspector) {
Services.prefs.clearUserPref("devtools.markup.collapseAttributeLength");
},
},

16
devtools/client/inspector/markup/views/element-container.js
Просмотреть файл

@ -58,7 +58,7 @@ function MarkupElementContainer(markupView, node) {
}
MarkupElementContainer.prototype = extend(MarkupContainer.prototype, {
onContainerClick: function(event) {
onContainerClick(event) {
if (!event.target.hasAttribute("data-event")) {
return;
}
@ -133,7 +133,7 @@ MarkupElementContainer.prototype = extend(MarkupContainer.prototype, {
* If this element is not previewable or the preview cannot be generated for
* some reason, the Promise is rejected.
*/
_getPreview: function() {
_getPreview() {
if (!this.isPreviewable()) {
return Promise.reject("_getPreview called on a non-previewable element.");
}
@ -199,7 +199,7 @@ MarkupElementContainer.prototype = extend(MarkupContainer.prototype, {
return true;
},
copyImageDataUri: function() {
copyImageDataUri() {
// We need to send again a request to gettooltipData even if one was sent
// for the tooltip, because we want the full-size image
this.node.getImageData().then(data => {
@ -209,12 +209,12 @@ MarkupElementContainer.prototype = extend(MarkupContainer.prototype, {
});
},
setInlineTextChild: function(inlineTextChild) {
setInlineTextChild(inlineTextChild) {
this.inlineTextChild = inlineTextChild;
this.editor.updateTextEditor();
},
clearInlineTextChild: function() {
clearInlineTextChild() {
this.inlineTextChild = undefined;
this.editor.updateTextEditor();
},
@ -222,14 +222,14 @@ MarkupElementContainer.prototype = extend(MarkupContainer.prototype, {
/**
* Trigger new attribute field for input.
*/
addAttribute: function() {
addAttribute() {
this.editor.newAttr.editMode();
},
/**
* Trigger attribute field for editing.
*/
editAttribute: function(attrName) {
editAttribute(attrName) {
this.editor.attrElements.get(attrName).editMode();
},
@ -237,7 +237,7 @@ MarkupElementContainer.prototype = extend(MarkupContainer.prototype, {
* Remove attribute from container.
* This is an undoable action.
*/
removeAttribute: function(attrName) {
removeAttribute(attrName) {
const doMods = this.editor._startModifyingAttributes();
const undoMods = this.editor._startModifyingAttributes();
this.editor._saveAttribute(attrName, undoMods);

82
devtools/client/inspector/markup/views/element-editor.js
Просмотреть файл

@ -127,7 +127,7 @@ function ElementEditor(container, node) {
}
ElementEditor.prototype = {
buildMarkup: function() {
buildMarkup() {
this.elt = this.doc.createElement("span");
this.elt.classList.add("editor");
@ -152,7 +152,7 @@ ElementEditor.prototype = {
}
},
renderOpenTag: function() {
renderOpenTag() {
const open = this.doc.createElement("span");
open.classList.add("open");
open.appendChild(this.doc.createTextNode("<"));
@ -173,12 +173,12 @@ ElementEditor.prototype = {
open.appendChild(closingBracket);
},
renderAttributes: function(containerEl) {
renderAttributes(containerEl) {
this.attrList = this.doc.createElement("span");
containerEl.appendChild(this.attrList);
},
renderNewAttributeEditor: function(containerEl) {
renderNewAttributeEditor(containerEl) {
this.newAttr = this.doc.createElement("span");
this.newAttr.classList.add("newattr");
this.newAttr.setAttribute("tabindex", "-1");
@ -218,14 +218,14 @@ ElementEditor.prototype = {
});
},
renderEventBadge: function() {
renderEventBadge() {
this.expandBadge = this.doc.createElement("span");
this.expandBadge.classList.add("markup-expand-badge");
this.expandBadge.addEventListener("click", this.onExpandBadgeClick);
this.elt.appendChild(this.expandBadge);
},
renderCloseTag: function() {
renderCloseTag() {
const close = this.doc.createElement("span");
close.classList.add("close");
close.appendChild(this.doc.createTextNode("</"));
@ -249,7 +249,7 @@ ElementEditor.prototype = {
}
},
flashAttribute: function(attrName) {
flashAttribute(attrName) {
if (this.animationTimers[attrName]) {
clearTimeout(this.animationTimers[attrName]);
}
@ -273,7 +273,7 @@ ElementEditor.prototype = {
* @return {Object} An object literal with the following information:
* {type: "attribute", name: "rel", value: "index", el: node}
*/
getInfoAtNode: function(node) {
getInfoAtNode(node) {
if (!node) {
return null;
}
@ -296,7 +296,7 @@ ElementEditor.prototype = {
/**
* Update the state of the editor from the node.
*/
update: function() {
update() {
const nodeAttributes = this.node.attributes || [];
// Keep the data model in sync with attributes on the node.
@ -344,7 +344,7 @@ ElementEditor.prototype = {
this.updateOverflowHighlight();
},
updateEventBadge: function() {
updateEventBadge() {
const showEventBadge = this.node.hasEventListeners;
if (this._eventBadge && !showEventBadge) {
this._eventBadge.remove();
@ -354,7 +354,7 @@ ElementEditor.prototype = {
}
},
_createEventBadge: function() {
_createEventBadge() {
this._eventBadge = this.doc.createElement("div");
this._eventBadge.className = "inspector-badge interactive";
this._eventBadge.dataset.event = "true";
@ -370,7 +370,7 @@ ElementEditor.prototype = {
this.markup.emit("badge-added-event");
},
updateScrollableBadge: function() {
updateScrollableBadge() {
if (this.node.isScrollable && !this._scrollableBadge) {
this._createScrollableBadge();
} else if (this._scrollableBadge && !this.node.isScrollable) {
@ -379,7 +379,7 @@ ElementEditor.prototype = {
}
},
_createScrollableBadge: function() {
_createScrollableBadge() {
const isInteractive =
this.isOverflowDebuggingEnabled &&
// Document elements cannot have interative scrollable badges since retrieval of their
@ -412,7 +412,7 @@ ElementEditor.prototype = {
/**
* Update the markup display badge.
*/
updateDisplayBadge: function() {
updateDisplayBadge() {
const displayType = this.node.displayType;
const showDisplayBadge = displayType in DISPLAY_TYPES;
@ -428,7 +428,7 @@ ElementEditor.prototype = {
}
},
_createDisplayBadge: function() {
_createDisplayBadge() {
this._displayBadge = this.doc.createElement("div");
this._displayBadge.className = "inspector-badge";
this._displayBadge.addEventListener("click", this.onDisplayBadgeClick);
@ -436,7 +436,7 @@ ElementEditor.prototype = {
this.elt.insertBefore(this._displayBadge, this._customBadge);
},
_updateDisplayBadgeContent: function() {
_updateDisplayBadgeContent() {
const displayType = this.node.displayType;
this._displayBadge.textContent = displayType;
this._displayBadge.dataset.display = displayType;
@ -455,7 +455,7 @@ ElementEditor.prototype = {
this._displayBadge.classList.toggle("interactive", isInteractive);
},
updateOverflowBadge: function() {
updateOverflowBadge() {
if (!this.isOverflowDebuggingEnabled) {
return;
}
@ -468,7 +468,7 @@ ElementEditor.prototype = {
}
},
_createOverflowBadge: function() {
_createOverflowBadge() {
this._overflowBadge = this.doc.createElement("div");
this._overflowBadge.className = "inspector-badge overflow-badge";
this._overflowBadge.textContent = INSPECTOR_L10N.getStr(
@ -483,7 +483,7 @@ ElementEditor.prototype = {
/**
* Update the markup custom element badge.
*/
updateCustomBadge: function() {
updateCustomBadge() {
const showCustomBadge = !!this.node.customElementLocation;
if (this._customBadge && !showCustomBadge) {
this._customBadge.remove();
@ -493,7 +493,7 @@ ElementEditor.prototype = {
}
},
_createCustomBadge: function() {
_createCustomBadge() {
this._customBadge = this.doc.createElement("div");
this._customBadge.className = "inspector-badge interactive";
this._customBadge.dataset.custom = "true";
@ -510,7 +510,7 @@ ElementEditor.prototype = {
* If node causes overflow, toggle its overflow highlight if its scrollable ancestor's
* scrollable badge is active/inactive.
*/
updateOverflowHighlight: async function() {
async updateOverflowHighlight() {
if (!this.isOverflowDebuggingEnabled) {
return;
}
@ -543,7 +543,7 @@ ElementEditor.prototype = {
*
* @param {Boolean} showOverflowHighlight
*/
setOverflowHighlight: function(showOverflowHighlight) {
setOverflowHighlight(showOverflowHighlight) {
this.container.tagState.classList.toggle(
"overflow-causing-highlighted",
showOverflowHighlight
@ -553,7 +553,7 @@ ElementEditor.prototype = {
/**
* Update the inline text editor in case of a single text child node.
*/
updateTextEditor: function() {
updateTextEditor() {
const node = this.node.inlineTextChild;
if (this.textEditor && this.textEditor.node != node) {
@ -587,7 +587,7 @@ ElementEditor.prototype = {
* be inspected by the current session (eg a parent-process only toolbox
* inspecting a content browser).
*/
updateUnavailableChildren: function() {
updateUnavailableChildren() {
const childrenUnavailable = this.node.childrenUnavailable;
if (this.childrenUnavailableElt) {
@ -611,7 +611,7 @@ ElementEditor.prototype = {
}
},
_startModifyingAttributes: function() {
_startModifyingAttributes() {
return this.node.startModifyingAttributes();
},
@ -622,7 +622,7 @@ ElementEditor.prototype = {
* The name of the attribute to get the element for
* @return {DOMNode}
*/
getAttributeElement: function(attrName) {
getAttributeElement(attrName) {
return this.attrList.querySelector(
".attreditor[data-attr=" + CSS.escape(attrName) + "] .attr-value"
);
@ -634,7 +634,7 @@ ElementEditor.prototype = {
* @param {String} attrName
* The name of the attribute to remove
*/
removeAttribute: function(attrName) {
removeAttribute(attrName) {
const attr = this.attrElements.get(attrName);
if (attr) {
this.attrElements.delete(attrName);
@ -661,7 +661,7 @@ ElementEditor.prototype = {
* '"'
* )
*/
_createAttribute: function(attribute, before = null) {
_createAttribute(attribute, before = null) {
const attr = this.doc.createElement("span");
attr.dataset.attr = attribute.name;
attr.dataset.value = attribute.value;
@ -724,7 +724,7 @@ ElementEditor.prototype = {
* @param {Element} attrValueEl
* The attribute value <span class="attr-value"> element.
*/
_setupAttributeEditor: function(
_setupAttributeEditor(
attribute,
attrEditorEl,
editableEl,
@ -756,7 +756,7 @@ ElementEditor.prototype = {
trigger: "dblclick",
stopOnReturn: true,
selectAll: false,
initial: initial,
initial,
multiline: true,
maxWidth: () => getAutocompleteMaxWidth(editableEl, this.container.elt),
contentType: InplaceEditor.CONTENT_TYPES.CSS_MIXED,
@ -812,7 +812,7 @@ ElementEditor.prototype = {
* The attribute value <span class="attr-value"> element to append
* the parsed attribute values to.
*/
_appendAttributeValue: function(attribute, attributeValueEl) {
_appendAttributeValue(attribute, attributeValueEl) {
// Parse the attribute value to detect whether there are linkable parts in
// it (make sure to pass a complete list of existing attributes to the
// parseAttribute function, by concatenating attribute, because this could
@ -858,7 +858,7 @@ ElementEditor.prototype = {
* Attribute value.
* @return {String} truncated attribute value.
*/
_truncateAttributeValue: function(value) {
_truncateAttributeValue(value) {
if (value && value.match(COLLAPSE_DATA_URL_REGEX)) {
return truncateString(value, COLLAPSE_DATA_URL_LENGTH);
}
@ -879,7 +879,7 @@ ElementEditor.prototype = {
* set of attributes, used to place new attributes where the
* user put them.
*/
_applyAttributes: function(value, attrNode, doMods, undoMods) {
_applyAttributes(value, attrNode, doMods, undoMods) {
const attrs = parseAttributeValues(value, this.doc);
for (const attr of attrs) {
// Create an attribute editor next to the current attribute if needed.
@ -893,7 +893,7 @@ ElementEditor.prototype = {
* Saves the current state of the given attribute into an attribute
* modification list.
*/
_saveAttribute: function(name, undoMods) {
_saveAttribute(name, undoMods) {
const node = this.node;
if (node.hasAttribute(name)) {
const oldValue = node.getAttribute(name);
@ -908,7 +908,7 @@ ElementEditor.prototype = {
* try to focus on the attribute after the one that's being edited now.
* If the attribute order changes, go to the beginning of the attribute list.
*/
refocusOnEdit: function(attrName, attrNode, direction) {
refocusOnEdit(attrName, attrNode, direction) {
// Only allow one refocus on attribute change at a time, so when there's
// more than 1 request in parallel, the last one wins.
if (this._editedAttributeObserver) {
@ -1025,7 +1025,7 @@ ElementEditor.prototype = {
* When a flexbox/grid highlighter is shown or hidden, the corresponding badge will
* be marked accordingly. See MarkupView.handleHighlighterEvent()
*/
onDisplayBadgeClick: async function(event) {
async onDisplayBadgeClick(event) {
event.stopPropagation();
const target = event.target;
@ -1052,7 +1052,7 @@ ElementEditor.prototype = {
}
},
onCustomBadgeClick: async function() {
async onCustomBadgeClick() {
const { url, line, column } = this.node.customElementLocation;
this.markup.toolbox.viewSourceInDebugger(
@ -1064,7 +1064,7 @@ ElementEditor.prototype = {
);
},
onExpandBadgeClick: function() {
onExpandBadgeClick() {
this.container.expandContainer();
},
@ -1072,7 +1072,7 @@ ElementEditor.prototype = {
* Called when the scrollable badge is clicked. Shows the overflow causing elements and
* highlights their container if the scroll badge is active.
*/
onScrollableBadgeClick: async function() {
async onScrollableBadgeClick() {
this.highlightingOverflowCausingElements = this._scrollableBadge.classList.toggle(
"active"
);
@ -1104,7 +1104,7 @@ ElementEditor.prototype = {
/**
* Called when the tag name editor has is done editing.
*/
onTagEdit: function(newTagName, isCommit) {
onTagEdit(newTagName, isCommit) {
if (
!isCommit ||
newTagName.toLowerCase() === this.node.tagName.toLowerCase() ||
@ -1122,7 +1122,7 @@ ElementEditor.prototype = {
});
},
destroy: function() {
destroy() {
if (this._displayBadge) {
this._displayBadge.removeEventListener("click", this.onDisplayBadgeClick);
}

12
devtools/client/inspector/markup/views/html-editor.js
Просмотреть файл

@ -65,7 +65,7 @@ HTMLEditor.prototype = {
* Need to refresh position by manually setting CSS values, so this will
* need to be called on resizes and other sizing changes.
*/
refresh: function() {
refresh() {
const element = this._attachedElement;
if (element) {
@ -84,7 +84,7 @@ HTMLEditor.prototype = {
* The element that the editor will be anchored to.
* Should belong to the HTMLDocument passed into the constructor.
*/
_attach: function(element) {
_attach(element) {
this._detach();
this._attachedElement = element;
element.classList.add("html-editor-container");
@ -94,7 +94,7 @@ HTMLEditor.prototype = {
/**
* Unanchor the editor from an element.
*/
_detach: function() {
_detach() {
if (this._attachedElement) {
this._attachedElement.classList.remove("html-editor-container");
this._attachedElement = undefined;
@ -112,7 +112,7 @@ HTMLEditor.prototype = {
* @param {Function} cb
* The function to call when hiding
*/
show: function(element, text) {
show(element, text) {
if (this._visible) {
return;
}
@ -137,7 +137,7 @@ HTMLEditor.prototype = {
* A change will be committed by default. If this param
* strictly equals false, no change will occur.
*/
hide: function(shouldCommit) {
hide(shouldCommit) {
if (!this._visible) {
return;
}
@ -156,7 +156,7 @@ HTMLEditor.prototype = {
/**
* Destroy this object and unbind all event handlers
*/
destroy: function() {
destroy() {
this.doc.defaultView.removeEventListener("resize", this.refresh, true);
this.container.removeEventListener("click", this.hide);
this.editorInner.removeEventListener("click", stopPropagation);

52
devtools/client/inspector/markup/views/markup-container.js
Просмотреть файл

@ -62,7 +62,7 @@ MarkupContainer.prototype = {
* The type of container to build. One of TYPES.TEXT_CONTAINER,
* TYPES.ELEMENT_CONTAINER, TYPES.READ_ONLY_CONTAINER
*/
initialize: function(markupView, node, type) {
initialize(markupView, node, type) {
this.markup = markupView;
this.node = node;
this.type = type;
@ -96,7 +96,7 @@ MarkupContainer.prototype = {
}
},
buildMarkup: function() {
buildMarkup() {
this.elt = this.win.document.createElement("li");
this.elt.classList.add("child", "collapsed");
this.elt.setAttribute("role", "presentation");
@ -132,11 +132,11 @@ MarkupContainer.prototype = {
this.elt.appendChild(this.children);
},
toString: function() {
toString() {
return "[MarkupContainer for " + this.node + "]";
},
isPreviewable: function() {
isPreviewable() {
if (this.node.tagName && !this.node.isPseudoElement) {
const tagName = this.node.tagName.toLowerCase();
const srcAttr = this.editor.getAttributeElement("src");
@ -155,7 +155,7 @@ MarkupContainer.prototype = {
* the H key, it is not displayed (faded in markup view).
* Otherwise, it is displayed.
*/
updateIsDisplayed: function() {
updateIsDisplayed() {
this.elt.classList.remove("not-displayed");
if (!this.node.isDisplayed || this.node.hidden) {
this.elt.classList.add("not-displayed");
@ -215,7 +215,7 @@ MarkupContainer.prototype = {
* If conatiner and its contents are focusable, exclude them from tab order,
* and, if necessary, remove focus.
*/
clearFocus: function() {
clearFocus() {
if (!this.canFocus) {
return;
}
@ -259,7 +259,7 @@ MarkupContainer.prototype = {
return this.canExpand && !this.mustExpand;
},
updateExpander: function() {
updateExpander() {
if (!this.expander) {
return;
}
@ -282,7 +282,7 @@ MarkupContainer.prototype = {
* If current node has no children, ignore them. Otherwise, consider them a
* group from the accessibility point of view.
*/
setChildrenRole: function() {
setChildrenRole() {
this.children.setAttribute(
"role",
this.hasChildren ? "group" : "presentation"
@ -292,7 +292,7 @@ MarkupContainer.prototype = {
/**
* Set an appropriate DOM tree depth level for a node and its subtree.
*/
updateLevel: function() {
updateLevel() {
// ARIA level should already be set when the container markup is created.
const currentLevel = this.tagLine.getAttribute("aria-level");
const newLevel = this.level;
@ -312,7 +312,7 @@ MarkupContainer.prototype = {
* If the node has children, return the list of containers for all these
* children.
*/
getChildContainers: function() {
getChildContainers() {
if (!this.hasChildren) {
return null;
}
@ -329,7 +329,7 @@ MarkupContainer.prototype = {
return !this.elt.classList.contains("collapsed");
},
setExpanded: function(value) {
setExpanded(value) {
if (!this.expander) {
return;
}
@ -373,7 +373,7 @@ MarkupContainer.prototype = {
* Expanding a node means cloning its "inline" closing tag into a new
* tag-line that the user can interact with and showing the children.
*/
showCloseTagLine: function() {
showCloseTagLine() {
// Only element containers display a closing tag line. #document has no closing line.
if (this.type !== TYPES.ELEMENT_CONTAINER) {
return;
@ -408,7 +408,7 @@ MarkupContainer.prototype = {
* Hide the closing tag-line element which should only be displayed when the container
* is expanded.
*/
hideCloseTagLine: function() {
hideCloseTagLine() {
if (!this.closeTagLine) {
return;
}
@ -417,7 +417,7 @@ MarkupContainer.prototype = {
this.closeTagLine = undefined;
},
parentContainer: function() {
parentContainer() {
return this.elt.parentNode ? this.elt.parentNode.container : null;
},
@ -464,7 +464,7 @@ MarkupContainer.prototype = {
/**
* Check if element is draggable.
*/
isDraggable: function() {
isDraggable() {
const tagName = this.node.tagName && this.node.tagName.toLowerCase();
return (
@ -479,11 +479,11 @@ MarkupContainer.prototype = {
);
},
isSlotted: function() {
isSlotted() {
return false;
},
_onKeyDown: function(event) {
_onKeyDown(event) {
const { target, keyCode, shiftKey } = event;
const isInput = this.markup._isInputOrTextarea(target);
@ -534,7 +534,7 @@ MarkupContainer.prototype = {
event.stopPropagation();
},
_onMouseDown: function(event) {
_onMouseDown(event) {
const { target, button, metaKey, ctrlKey } = event;
const isLeftClick = button === 0;
const isMiddleClick = button === 1;
@ -620,7 +620,7 @@ MarkupContainer.prototype = {
* On mouse move, move the dragged element and indicate the drop target.
* This handler is called from the markup view, to reduce number of listeners.
*/
onMouseMove: function(event) {
onMouseMove(event) {
// If this is the first move after mousedown, only start dragging after the
// mouse has travelled a few pixels and then indicate the start position.
const initialDiff = Math.abs(event.pageY - this._dragStartY);
@ -655,7 +655,7 @@ MarkupContainer.prototype = {
}
},
cancelDragging: function() {
cancelDragging() {
if (!this.isDragging) {
return;
}
@ -669,7 +669,7 @@ MarkupContainer.prototype = {
* Temporarily flash the container to attract attention.
* Used for markup mutations.
*/
flashMutation: function() {
flashMutation() {
if (!this.selected) {
flashElementOn(this.tagState, {
foregroundElt: this.editor.elt,
@ -755,7 +755,7 @@ MarkupContainer.prototype = {
* Update the container's editor to the current state of the
* viewed node.
*/
update: function() {
update() {
if (this.node.pseudoClassLocks.length) {
this.elt.classList.add("pseudoclass-locked");
} else {
@ -782,7 +782,7 @@ MarkupContainer.prototype = {
/**
* Try to put keyboard focus on the current editor.
*/
focus: function() {
focus() {
// Elements with tabindex of -1 are not focusable.
const focusable = this.editor.elt.querySelector("[tabindex='0']");
if (focusable) {
@ -790,7 +790,7 @@ MarkupContainer.prototype = {
}
},
_onToggle: function(event) {
_onToggle(event) {
event.stopPropagation();
// Prevent the html tree from expanding when an event bubble, display or scrollable
@ -812,7 +812,7 @@ MarkupContainer.prototype = {
* @param {Boolean} applyToDescendants
* Whether all descendants should also be expanded/collapsed
*/
expandContainer: function(applyToDescendants) {
expandContainer(applyToDescendants) {
if (this.hasChildren) {
this.markup.setNodeExpanded(
this.node,
@ -826,7 +826,7 @@ MarkupContainer.prototype = {
* Get rid of event listeners and references, when the container is no longer
* needed
*/
destroy: function() {
destroy() {
// Remove event listeners
this.elt.removeEventListener("mousedown", this._onMouseDown);
this.elt.removeEventListener("dblclick", this._onToggle);

8
devtools/client/inspector/markup/views/read-only-editor.js
Просмотреть файл

@ -37,7 +37,7 @@ function ReadOnlyEditor(container, node) {
}
ReadOnlyEditor.prototype = {
buildMarkup: function() {
buildMarkup() {
const doc = this.markup.doc;
this.elt = doc.createElement("span");
@ -48,7 +48,7 @@ ReadOnlyEditor.prototype = {
this.elt.appendChild(this.tag);
},
destroy: function() {
destroy() {
// We might be already destroyed.
if (!this.elt) {
return;
@ -64,7 +64,7 @@ ReadOnlyEditor.prototype = {
*
* @param {Boolean} showOverflowHighlight
*/
setOverflowHighlight: function(showOverflowHighlight) {
setOverflowHighlight(showOverflowHighlight) {
this.container.tagState.classList.toggle(
"overflow-causing-highlighted",
showOverflowHighlight
@ -74,7 +74,7 @@ ReadOnlyEditor.prototype = {
/**
* Stub method for consistency with ElementEditor.
*/
getInfoAtNode: function() {
getInfoAtNode() {
return null;
},
};

14
devtools/client/inspector/markup/views/root-container.js
Просмотреть файл

@ -23,14 +23,14 @@ function RootContainer(markupView, node) {
RootContainer.prototype = {
hasChildren: true,
expanded: true,
update: function() {},
destroy: function() {},
update() {},
destroy() {},
/**
* If the node has children, return the list of containers for all these children.
* @return {Array} An array of child containers or null.
*/
getChildContainers: function() {
getChildContainers() {
return [...this.children.children]
.filter(node => node.container)
.map(node => node.container);
@ -40,19 +40,19 @@ RootContainer.prototype = {
* Set the expanded state of the container node.
* @param {Boolean} value
*/
setExpanded: function() {},
setExpanded() {},
/**
* Set an appropriate role of the container's children node.
*/
setChildrenRole: function() {},
setChildrenRole() {},
/**
* Set an appropriate DOM tree depth level for a node and its subtree.
*/
updateLevel: function() {},
updateLevel() {},
isSlotted: function() {
isSlotted() {
return false;
},
};

12
devtools/client/inspector/markup/views/slotted-node-container.js
Просмотреть файл

@ -22,7 +22,7 @@ function SlottedNodeContainer(markupView, node) {
}
SlottedNodeContainer.prototype = extend(MarkupContainer.prototype, {
_onMouseDown: function(event) {
_onMouseDown(event) {
if (event.target.classList.contains("reveal-link")) {
event.stopPropagation();
event.preventDefault();
@ -34,7 +34,7 @@ SlottedNodeContainer.prototype = extend(MarkupContainer.prototype, {
/**
* Slotted node containers never display children and should not react to toggle.
*/
_onToggle: function(event) {
_onToggle(event) {
event.stopPropagation();
},
@ -47,7 +47,7 @@ SlottedNodeContainer.prototype = extend(MarkupContainer.prototype, {
);
},
_onKeyDown: function(event) {
_onKeyDown(event) {
MarkupContainer.prototype._onKeyDown.call(this, event);
const isActionKey = event.code == "Enter" || event.code == "Space";
@ -56,7 +56,7 @@ SlottedNodeContainer.prototype = extend(MarkupContainer.prototype, {
}
},
onContainerClick: async function(event) {
async onContainerClick(event) {
if (!event.target.classList.contains("reveal-link")) {
return;
}
@ -64,11 +64,11 @@ SlottedNodeContainer.prototype = extend(MarkupContainer.prototype, {
this._revealFromSlot();
},
isDraggable: function() {
isDraggable() {
return false;
},
isSlotted: function() {
isSlotted() {
return true;
},
});

6
devtools/client/inspector/markup/views/slotted-node-editor.js
Просмотреть файл

@ -20,7 +20,7 @@ function SlottedNodeEditor(container, node) {
}
SlottedNodeEditor.prototype = {
buildMarkup: function() {
buildMarkup() {
const doc = this.markup.doc;
this.elt = doc.createElement("span");
@ -40,7 +40,7 @@ SlottedNodeEditor.prototype = {
this.elt.appendChild(this.revealLink);
},
destroy: function() {
destroy() {
// We might be already destroyed.
if (!this.elt) {
return;
@ -55,7 +55,7 @@ SlottedNodeEditor.prototype = {
/**
* Stub method for consistency with ElementEditor.
*/
getInfoAtNode: function() {
getInfoAtNode() {
return null;
},
};

10
devtools/client/inspector/markup/views/text-editor.js
Просмотреть файл

@ -52,7 +52,7 @@ function TextEditor(container, node, type) {
}
TextEditor.prototype = {
buildMarkup: function(type) {
buildMarkup(type) {
const doc = this.markup.doc;
this.elt = doc.createElement("span");
@ -88,7 +88,7 @@ TextEditor.prototype = {
this.update();
},
showTextEditor: function(element) {
showTextEditor(element) {
new InplaceEditor({
cssProperties: this.markup.inspector.cssProperties,
done: (val, commit) => {
@ -114,7 +114,7 @@ TextEditor.prototype = {
});
},
update: async function() {
async update() {
try {
const value = await getLongString(this.node.getNodeValue());
@ -126,14 +126,14 @@ TextEditor.prototype = {
}
},
destroy: function() {
destroy() {
this.ReactDOM.unmountComponentAtNode(this.elt);
},
/**
* Stub method for consistency with ElementEditor.
*/
getInfoAtNode: function() {
getInfoAtNode() {
return null;
},
};

2
devtools/client/inspector/rules/models/class-list.js
Просмотреть файл

@ -243,7 +243,7 @@ class ClassList {
this.previewClasses = [];
inputClasses.split(" ").forEach(className => {
this.previewClasses.push({
className: className,
className,
wasAppliedOnNode: this.isClassAlreadyApplied(className),
});
});

127
devtools/client/inspector/rules/rules.js
Просмотреть файл

@ -358,7 +358,7 @@ CssRuleView.prototype = {
}
},
isPanelVisible: function() {
isPanelVisible() {
if (this.inspector.is3PaneModeEnabled) {
return true;
}
@ -550,7 +550,7 @@ CssRuleView.prototype = {
* - value {Object} Depends on the type of the node.
* Otherwise, returns null if the node isn't anything we care about.
*/
getNodeInfo: function(node) {
getNodeInfo(node) {
return getNodeInfo(node, this._elementStyle);
},
@ -569,7 +569,7 @@ CssRuleView.prototype = {
* - unsupportedBrowsers {Array} Array of unsupported browser
* Otherwise, returns null if the node has cross-browser compatible CSS
*/
getNodeCompatibilityInfo: async function(node) {
async getNodeCompatibilityInfo(node) {
const compatibilityInfo = await getNodeCompatibilityInfo(
node,
this._elementStyle
@ -581,7 +581,7 @@ CssRuleView.prototype = {
/**
* Context menu handler.
*/
_onContextMenu: function(event) {
_onContextMenu(event) {
if (
event.originalTarget.closest("input[type=text]") ||
event.originalTarget.closest("input:not([type])") ||
@ -602,7 +602,7 @@ CssRuleView.prototype = {
* @param {Event} event
* copy event object.
*/
_onCopy: function(event) {
_onCopy(event) {
if (event) {
this.copySelection(event.target);
event.preventDefault();
@ -617,7 +617,7 @@ CssRuleView.prototype = {
* @param {DOMNode} target
* DOMNode target of the copy action
*/
copySelection: function(target) {
copySelection(target) {
try {
let text = "";
@ -652,7 +652,7 @@ CssRuleView.prototype = {
/**
* Add a new rule to the current element.
*/
_onAddRule: function() {
_onAddRule() {
const elementStyle = this._elementStyle;
const element = elementStyle.element;
const pseudoClasses = element.pseudoClassLocks;
@ -679,7 +679,7 @@ CssRuleView.prototype = {
/**
* Disables add rule button when needed
*/
refreshAddRuleButtonState: function() {
refreshAddRuleButtonState() {
const shouldBeDisabled =
!this._viewedElement ||
!this.inspector.selection.isElementNode() ||
@ -698,23 +698,23 @@ CssRuleView.prototype = {
);
},
_handleUAStylePrefChange: function() {
_handleUAStylePrefChange() {
this.showUserAgentStyles = Services.prefs.getBoolPref(PREF_UA_STYLES);
this._handlePrefChange(PREF_UA_STYLES);
},
_handleDefaultColorUnitPrefChange: function() {
_handleDefaultColorUnitPrefChange() {
this._handlePrefChange(PREF_DEFAULT_COLOR_UNIT);
},
_handleDraggablePrefChange: function() {
_handleDraggablePrefChange() {
// This event is consumed by text-property-editor instances in order to
// update their draggable behavior. Preferences observer are costly, so
// we are forwarding the preference update via the EventEmitter.
this.emit("draggable-preference-updated");
},
_handlePrefChange: function(pref) {
_handlePrefChange(pref) {
// Reselect the currently selected element
const refreshOnPrefs = [PREF_UA_STYLES, PREF_DEFAULT_COLOR_UNIT];
if (refreshOnPrefs.indexOf(pref) > -1) {
@ -727,7 +727,7 @@ CssRuleView.prototype = {
* @param {String} value
* The search value.
*/
setFilterStyles: function(value = "") {
setFilterStyles(value = "") {
this.searchField.value = value;
this.searchField.focus();
this._onFilterStyles();
@ -736,7 +736,7 @@ CssRuleView.prototype = {
/**
* Called when the user enters a search term in the filter style search box.
*/
_onFilterStyles: function() {
_onFilterStyles() {
if (this._filterChangedTimeout) {
clearTimeout(this._filterChangedTimeout);
}
@ -813,7 +813,7 @@ CssRuleView.prototype = {
* Called when the user clicks on the clear button in the filter style search
* box. Returns true if the search box is cleared and false otherwise.
*/
_onClearSearch: function() {
_onClearSearch() {
if (this.searchField.value) {
this.setFilterStyles("");
return true;
@ -822,7 +822,7 @@ CssRuleView.prototype = {
return false;
},
destroy: function() {
destroy() {
this.isDestroyed = true;
this.clear();
@ -930,14 +930,14 @@ CssRuleView.prototype = {
* visually clearing the view after a few milliseconds to avoid confusion
* about which element's styles the rule view shows.
*/
_startSelectingElement: function() {
_startSelectingElement() {
this.element.classList.add("non-interactive");
},
/**
* Mark the view as no longer selecting an element, re-enabling interaction.
*/
_stopSelectingElement: function() {
_stopSelectingElement() {
this.element.classList.remove("non-interactive");
},
@ -949,7 +949,7 @@ CssRuleView.prototype = {
* @param {Boolean} allowRefresh
* Update the view even if the element is the same as last time.
*/
selectElement: function(element, allowRefresh = false) {
selectElement(element, allowRefresh = false) {
const refresh = this._viewedElement === element;
if (refresh && !allowRefresh) {
return Promise.resolve(undefined);
@ -1036,7 +1036,7 @@ CssRuleView.prototype = {
/**
* Update the rules for the currently highlighted element.
*/
refreshPanel: function() {
refreshPanel() {
// Ignore refreshes when the panel is hidden, or during editing or when no element is selected.
if (!this.isPanelVisible() || this.isEditing || !this._elementStyle) {
return Promise.resolve(undefined);
@ -1059,7 +1059,7 @@ CssRuleView.prototype = {
* Clear the pseudo class options panel by removing the checked and disabled
* attributes for each checkbox.
*/
clearPseudoClassPanel: function() {
clearPseudoClassPanel() {
this.pseudoClassCheckboxes.forEach(checkbox => {
checkbox.checked = false;
checkbox.disabled = false;
@ -1074,7 +1074,7 @@ CssRuleView.prototype = {
*
* @return {Array}
*/
_createPseudoClassCheckboxes: function() {
_createPseudoClassCheckboxes() {
const doc = this.styleDocument;
const fragment = doc.createDocumentFragment();
@ -1098,7 +1098,7 @@ CssRuleView.prototype = {
/**
* Update the pseudo class options for the currently highlighted element.
*/
refreshPseudoClassPanel: function() {
refreshPseudoClassPanel() {
if (!this._elementStyle || !this.inspector.selection.isElementNode()) {
this.pseudoClassCheckboxes.forEach(checkbox => {
checkbox.disabled = true;
@ -1113,7 +1113,7 @@ CssRuleView.prototype = {
});
},
_populate: function() {
_populate() {
const elementStyle = this._elementStyle;
return this._elementStyle
.populate()
@ -1137,7 +1137,7 @@ CssRuleView.prototype = {
/**
* Show the user that the rule view has no node selected.
*/
_showEmpty: function() {
_showEmpty() {
if (this.styleDocument.getElementById("ruleview-no-results")) {
return;
}
@ -1152,14 +1152,14 @@ CssRuleView.prototype = {
/**
* Clear the rules.
*/
_clearRules: function() {
_clearRules() {
this.element.innerHTML = "";
},
/**
* Clear the rule view.
*/
clear: function(clearDom = true) {
clear(clearDom = true) {
if (clearDom) {
this._clearRules();
}
@ -1180,7 +1180,7 @@ CssRuleView.prototype = {
* Called when the user has made changes to the ElementStyle.
* Emits an event that clients can listen to.
*/
_changed: function() {
_changed() {
this.emit("ruleview-changed");
},
@ -1224,7 +1224,7 @@ CssRuleView.prototype = {
* Whether or not the container will hold pseudo element rules
* @return {DOMNode} The container element
*/
createExpandableContainer: function(label, isPseudo = false) {
createExpandableContainer(label, isPseudo = false) {
const header = this.styleDocument.createElementNS(HTML_NS, "div");
header.className = this._getRuleViewHeaderClassName(true);
header.setAttribute("role", "heading");
@ -1279,12 +1279,7 @@ CssRuleView.prototype = {
* @param {Boolean} showPseudo
* Whether or not pseudo element rules should be displayed
*/
_toggleContainerVisibility: function(
twisty,
container,
isPseudo,
showPseudo
) {
_toggleContainerVisibility(twisty, container, isPseudo, showPseudo) {
let isOpen = twisty.getAttribute("open");
if (isPseudo) {
@ -1310,7 +1305,7 @@ CssRuleView.prototype = {
}
},
_getRuleViewHeaderClassName: function(isPseudo) {
_getRuleViewHeaderClassName(isPseudo) {
const baseClassName = "ruleview-header";
return isPseudo
? baseClassName + " ruleview-expandable-header"
@ -1321,7 +1316,7 @@ CssRuleView.prototype = {
* Creates editor UI for each of the rules in _elementStyle.
*/
// eslint-disable-next-line complexity
_createEditors: function() {
_createEditors() {
// Run through the current list of rules, attaching
// their editors in order. Create editors if needed.
let lastInheritedSource = "";
@ -1417,7 +1412,7 @@ CssRuleView.prototype = {
* property values match the search value.
* @return {Boolean} true if the rule was highlighted, false otherwise.
*/
highlightRule: function(rule) {
highlightRule(rule) {
const isRuleSelectorHighlighted = this._highlightRuleSelector(rule);
const isStyleSheetHighlighted = this._highlightStyleSheet(rule);
const isAncestorRulesHighlighted = this._highlightAncestorRules(rule);
@ -1445,7 +1440,7 @@ CssRuleView.prototype = {
* @return {Boolean} true if the rule selector was highlighted,
* false otherwise.
*/
_highlightRuleSelector: function(rule) {
_highlightRuleSelector(rule) {
let isSelectorHighlighted = false;
let selectorNodes = [...rule.editor.selectorText.childNodes];
@ -1478,7 +1473,7 @@ CssRuleView.prototype = {
*
* @return {Boolean} true if the element was highlighted, false otherwise.
*/
_highlightAncestorRules: function(rule) {
_highlightAncestorRules(rule) {
const element = rule.editor.ancestorDataEl;
if (!element) {
return false;
@ -1508,7 +1503,7 @@ CssRuleView.prototype = {
* @return {Boolean} true if the stylesheet source was highlighted, false
* otherwise.
*/
_highlightStyleSheet: function(rule) {
_highlightStyleSheet(rule) {
const styleSheetSource = rule.title.toLowerCase();
const isStyleSheetHighlighted = this.searchData.strictSearchValue
? styleSheetSource === this.searchData.strictSearchValue
@ -1531,7 +1526,7 @@ CssRuleView.prototype = {
* @return {Boolean} true if the property or computed property was
* highlighted, false otherwise.
*/
_highlightProperty: function(editor) {
_highlightProperty(editor) {
const isPropertyHighlighted = this._highlightRuleProperty(editor);
const isComputedHighlighted = this._highlightComputedProperty(editor);
@ -1555,7 +1550,7 @@ CssRuleView.prototype = {
* @param {TextPropertyEditor} editor
* The rule property TextPropertyEditor object.
*/
_updatePropertyHighlight: function(editor) {
_updatePropertyHighlight(editor) {
if (!this.searchValue || !this.searchData) {
return;
}
@ -1577,7 +1572,7 @@ CssRuleView.prototype = {
* @return {Boolean} true if the rule property was highlighted,
* false otherwise.
*/
_highlightRuleProperty: function(editor) {
_highlightRuleProperty(editor) {
// Get the actual property value displayed in the rule view
const propertyName = editor.prop.name.toLowerCase();
const propertyValue = editor.valueSpan.textContent.toLowerCase();
@ -1599,7 +1594,7 @@ CssRuleView.prototype = {
* @return {Boolean} true if the computed property was highlighted, false
* otherwise.
*/
_highlightComputedProperty: function(editor) {
_highlightComputedProperty(editor) {
let isComputedHighlighted = false;
// Highlight search matches in the computed list of properties
@ -1637,7 +1632,7 @@ CssRuleView.prototype = {
* @return {Boolean} true if the given search terms match the property, false
* otherwise.
*/
_highlightMatches: function(element, propertyName, propertyValue) {
_highlightMatches(element, propertyName, propertyValue) {
const {
searchPropertyName,
searchPropertyValue,
@ -1687,7 +1682,7 @@ CssRuleView.prototype = {
* Clear all search filter highlights in the panel, and close the computed
* list if toggled opened
*/
_clearHighlight: function(element) {
_clearHighlight(element) {
for (const el of element.querySelectorAll(".ruleview-highlight")) {
el.classList.remove("ruleview-highlight");
}
@ -1703,7 +1698,7 @@ CssRuleView.prototype = {
* Called when the pseudo class panel button is clicked and toggles
* the display of the pseudo class panel.
*/
_onTogglePseudoClassPanel: function() {
_onTogglePseudoClassPanel() {
if (this.pseudoClassPanel.hidden) {
this.showPseudoClassPanel();
} else {
@ -1711,7 +1706,7 @@ CssRuleView.prototype = {
}
},
showPseudoClassPanel: function() {
showPseudoClassPanel() {
this.hideClassPanel();
this.pseudoClassToggle.classList.add("checked");
@ -1721,7 +1716,7 @@ CssRuleView.prototype = {
this.pseudoClassPanel.hidden = false;
},
hidePseudoClassPanel: function() {
hidePseudoClassPanel() {
this.pseudoClassToggle.classList.remove("checked");
this.pseudoClassCheckboxes.forEach(checkbox => {
checkbox.setAttribute("tabindex", "-1");
@ -1733,7 +1728,7 @@ CssRuleView.prototype = {
* Called when a pseudo class checkbox is clicked and toggles
* the pseudo class for the current selected element.
*/
_onTogglePseudoClass: function(event) {
_onTogglePseudoClass(event) {
const target = event.target;
this.inspector.togglePseudoClass(target.value);
},
@ -1742,7 +1737,7 @@ CssRuleView.prototype = {
* Called when the class panel button is clicked and toggles the display of the class
* panel.
*/
_onToggleClassPanel: function() {
_onToggleClassPanel() {
if (this.classPanel.hidden) {
this.showClassPanel();
} else {
@ -1750,7 +1745,7 @@ CssRuleView.prototype = {
}
},
showClassPanel: function() {
showClassPanel() {
this.hidePseudoClassPanel();
this.classToggle.classList.add("checked");
@ -1759,7 +1754,7 @@ CssRuleView.prototype = {
this.classListPreviewer.focusAddClassField();
},
hideClassPanel: function() {
hideClassPanel() {
this.classToggle.classList.remove("checked");
this.classPanel.hidden = true;
},
@ -1767,7 +1762,7 @@ CssRuleView.prototype = {
/**
* Handle the keypress event in the rule view.
*/
_onShortcut: function(name, event) {
_onShortcut(name, event) {
if (!event.target.closest("#sidebar-panel-ruleview")) {
return;
}
@ -1924,7 +1919,7 @@ CssRuleView.prototype = {
* @param {String} ruleId
* The actorID of the rule.
*/
highlightElementRule: function(ruleId) {
highlightElementRule(ruleId) {
let scrollBehavior = "smooth";
const rule = this.rules.find(r => r.domRule.actorID === ruleId);
@ -1962,7 +1957,7 @@ CssRuleView.prototype = {
* The property name to scroll to and highlight.
* @return {Boolean} true if the TextProperty name is found, and false otherwise.
*/
highlightProperty: function(name) {
highlightProperty(name) {
for (const rule of this.rules) {
for (const textProp of rule.textProps) {
if (textProp.overridden || textProp.invisible || !textProp.enabled) {
@ -2077,18 +2072,18 @@ function RuleViewTool(inspector, window) {
}
RuleViewTool.prototype = {
isPanelVisible: function() {
isPanelVisible() {
if (!this.view) {
return false;
}
return this.view.isPanelVisible();
},
onDetachedFront: function() {
onDetachedFront() {
this.onSelected(false);
},
onSelected: function(selectElement = true) {
onSelected(selectElement = true) {
// Ignore the event if the view has been destroyed, or if it's inactive.
// But only if the current selection isn't null. If it's been set to null,
// let the update go through as this is needed to empty the view on
@ -2120,13 +2115,13 @@ RuleViewTool.prototype = {
.then(done, done);
},
refresh: function() {
refresh() {
if (this.isPanelVisible()) {
this.view.refreshPanel();
}
},
_onResourceAvailable: function(resources) {
_onResourceAvailable(resources) {
for (const resource of resources) {
if (
resource.resourceType ===
@ -2139,13 +2134,13 @@ RuleViewTool.prototype = {
}
},
clearUserProperties: function() {
clearUserProperties() {
if (this.view && this.view.store && this.view.store.userProperties) {
this.view.store.userProperties.clear();
}
},
onPanelSelected: function() {
onPanelSelected() {
if (this.inspector.selection.nodeFront === this.view._viewedElement) {
this.refresh();
} else {
@ -2153,11 +2148,11 @@ RuleViewTool.prototype = {
}
},
onViewRefreshed: function() {
onViewRefreshed() {
this.inspector.emit("rule-view-refreshed");
},
destroy: function() {
destroy() {
this.inspector.styleChangeTracker.off("style-changed", this.refresh);
this.inspector.selection.off("detached-front", this.onDetachedFront);
this.inspector.selection.off("pseudoclass", this.refresh);

4
devtools/client/inspector/rules/test/browser_rules_copy_styles.js
Просмотреть файл

@ -142,7 +142,7 @@ add_task(async function() {
},
},
{
setup: async function() {
async setup() {
await disableProperty(view, 0);
},
desc: "Test Copy Rule with Disabled Property",
@ -166,7 +166,7 @@ add_task(async function() {
},
},
{
setup: async function() {
async setup() {
await disableProperty(view, 4);
},
desc: "Test Copy Rule with Disabled Property with Comment",

2
devtools/client/inspector/rules/test/browser_rules_user-agent-styles.js
Просмотреть файл

@ -173,7 +173,7 @@ async function compareAppliedStylesWithUI(inspector, view, filter) {
let entries = await pageStyle.getApplied(inspector.selection.nodeFront, {
inherited: true,
matchedSelectors: true,
filter: filter,
filter,
});
// We may see multiple entries that map to a given rule; filter the

2
devtools/client/inspector/rules/test/head.js
Просмотреть файл

@ -757,7 +757,7 @@ async function getPropertiesForRuleIndex(
declaration.set(`${currProp.name}:${currProp.value}`, {
propertyName: currProp.name,
propertyValue: currProp.value,
icon: icon,
icon,
data: currProp.isUsed(),
warning: unused,
used: !unused,

28
devtools/client/inspector/rules/views/rule-editor.js
Просмотреть файл

@ -81,7 +81,7 @@ function RuleEditor(ruleView, rule) {
}
RuleEditor.prototype = {
destroy: function() {
destroy() {
this.rule.domRule.off("location-changed");
this.toolbox.off("tool-registered", this._onToolChanged);
this.toolbox.off("tool-unregistered", this._onToolChanged);
@ -111,7 +111,7 @@ RuleEditor.prototype = {
return trait && !this.rule.elementStyle.element.isAnonymous;
},
_create: function() {
_create() {
this.element = this.doc.createElement("div");
this.element.className = "ruleview-rule devtools-monospace";
this.element.dataset.ruleId = this.rule.domRule.actorID;
@ -274,7 +274,7 @@ RuleEditor.prototype = {
/**
* Called when a tool is registered or unregistered.
*/
_onToolChanged: function() {
_onToolChanged() {
// When the source editor is registered, update the source links
// to be clickable; and if it is unregistered, update the links to
// be unclickable. However, some links are never clickable, so
@ -292,11 +292,11 @@ RuleEditor.prototype = {
* Event handler called when a property changes on the
* StyleRuleActor.
*/
_locationChanged: function() {
_locationChanged() {
this.updateSourceLink();
},
_onSourceClick: function() {
_onSourceClick() {
if (this.source.hasAttribute("unselectable")) {
return;
}
@ -319,7 +319,7 @@ RuleEditor.prototype = {
* @param {Object | null} originalLocation
* The original position object (url/line/column) or null.
*/
_updateLocation: function(originalLocation) {
_updateLocation(originalLocation) {
let displayURL = this.rule.sheet?.href;
const constructed = this.rule.sheet?.constructed;
let line = this.rule.ruleLine;
@ -345,7 +345,7 @@ RuleEditor.prototype = {
sourceLabel.textContent = sourceTextContent;
},
updateSourceLink: function() {
updateSourceLink() {
if (this.rule.isSystem) {
const sourceLabel = this.element.querySelector(
".ruleview-rule-source-label"
@ -404,7 +404,7 @@ RuleEditor.prototype = {
* @param {Boolean} reset
* True to completely reset the rule editor before populating.
*/
populate: function(reset) {
populate(reset) {
// Clear out existing viewers.
while (this.selectorText.hasChildNodes()) {
this.selectorText.removeChild(this.selectorText.lastChild);
@ -499,7 +499,7 @@ RuleEditor.prototype = {
* @return {TextProperty}
* The new property
*/
addProperty: function(name, value, priority, enabled, siblingProp) {
addProperty(name, value, priority, enabled, siblingProp) {
const prop = this.rule.createProperty(
name,
value,
@ -538,7 +538,7 @@ RuleEditor.prototype = {
* @param {TextProperty} siblingProp
* Optional, the property next to which all new props should be added.
*/
addProperties: function(properties, siblingProp) {
addProperties(properties, siblingProp) {
if (!properties || !properties.length) {
return;
}
@ -569,7 +569,7 @@ RuleEditor.prototype = {
* name is given, we'll create a real TextProperty and add it to the
* rule.
*/
newProperty: function() {
newProperty() {
// If we're already creating a new property, ignore this.
if (!this.closeBrace.hasAttribute("tabindex")) {
return;
@ -616,7 +616,7 @@ RuleEditor.prototype = {
* @param {Boolean} commit
* True if the value should be committed.
*/
_onNewProperty: function(value, commit) {
_onNewProperty(value, commit) {
if (!value || !commit) {
return;
}
@ -645,7 +645,7 @@ RuleEditor.prototype = {
* added, since we want to wait until after the inplace editor `destroy`
* event has been fired to keep consistent UI state.
*/
_newPropertyDestroy: function() {
_newPropertyDestroy() {
// We're done, make the close brace focusable again.
this.closeBrace.setAttribute("tabindex", "0");
@ -755,7 +755,7 @@ RuleEditor.prototype = {
* @param {Number} direction
* The move focus direction number.
*/
_moveSelectorFocus: function(direction) {
_moveSelectorFocus(direction) {
if (!direction || direction === Services.focus.MOVEFOCUS_BACKWARD) {
return;
}

80
devtools/client/inspector/rules/views/text-property-editor.js
Просмотреть файл

@ -188,7 +188,7 @@ TextPropertyEditor.prototype = {
/**
* Create the property editor's DOM.
*/
_create: function() {
_create() {
this.element = this.doc.createElementNS(HTML_NS, "li");
this.element.classList.add("ruleview-property");
this.element.dataset.declarationId = this.prop.id;
@ -423,7 +423,7 @@ TextPropertyEditor.prototype = {
* @return {Object} Contains the names of the cols and rows as arrays
* {cols: [], rows: []}.
*/
getGridlineNames: async function() {
async getGridlineNames() {
const gridLineNames = { cols: [], rows: [] };
const layoutInspector = await this.ruleView.inspector.walker.getLayoutInspector();
const gridFront = await layoutInspector.getCurrentGrid(
@ -507,7 +507,7 @@ TextPropertyEditor.prototype = {
* Populate the span based on changes to the TextProperty.
*/
// eslint-disable-next-line complexity
update: function() {
update() {
if (this.ruleView.isDestroyed) {
return;
}
@ -777,7 +777,7 @@ TextPropertyEditor.prototype = {
}
},
_onStartEditing: function() {
_onStartEditing() {
this.element.classList.remove("ruleview-overridden");
this.filterProperty.hidden = true;
this.enable.style.visibility = "hidden";
@ -801,7 +801,7 @@ TextPropertyEditor.prototype = {
* Update the visibility of the enable checkbox, the warning indicator, the used
* indicator and the filter property, as well as the overridden state of the property.
*/
updatePropertyState: function() {
updatePropertyState() {
if (this.prop.enabled) {
this.enable.style.removeProperty("visibility");
} else {
@ -845,7 +845,7 @@ TextPropertyEditor.prototype = {
}
},
updatePropertyUsedIndicator: function() {
updatePropertyUsedIndicator() {
const { used } = this.prop.isUsed();
if (this.editing || this.prop.overridden || !this.prop.enabled || used) {
@ -857,7 +857,7 @@ TextPropertyEditor.prototype = {
}
},
updatePropertyCompatibilityIndicator: async function() {
async updatePropertyCompatibilityIndicator() {
const { isCompatible } = await this.prop.isCompatible();
if (this.editing || isCompatible) {
@ -871,7 +871,7 @@ TextPropertyEditor.prototype = {
* Update the indicator for computed styles. The computed styles themselves
* are populated on demand, when they become visible.
*/
_updateComputed: function() {
_updateComputed() {
this.computed.innerHTML = "";
this.expander.style.display =
@ -888,7 +888,7 @@ TextPropertyEditor.prototype = {
/**
* Populate the list of computed styles.
*/
_populateComputed: function() {
_populateComputed() {
if (this._populatedComputed) {
return;
}
@ -916,7 +916,7 @@ TextPropertyEditor.prototype = {
* overridden styles themselves are populated on demand, when they
* become visible.
*/
_updateShorthandOverridden: function() {
_updateShorthandOverridden() {
this.shorthandOverridden.innerHTML = "";
this._populatedShorthandOverridden = false;
@ -926,7 +926,7 @@ TextPropertyEditor.prototype = {
/**
* Populate the list of overridden shorthand styles.
*/
_populateShorthandOverridden: function() {
_populateShorthandOverridden() {
if (
this._populatedShorthandOverridden ||
this.prop.overridden ||
@ -954,7 +954,7 @@ TextPropertyEditor.prototype = {
/**
* Creates and populates a list item with the computed CSS property.
*/
_createComputedListItem: function(parentEl, computed, className) {
_createComputedListItem(parentEl, computed, className) {
const li = createChild(parentEl, "li", {
class: className,
});
@ -1001,7 +1001,7 @@ TextPropertyEditor.prototype = {
* Handle updates to the preference which disables/enables the feature to
* edit size properties on drag.
*/
_onDraggablePreferenceChanged: function() {
_onDraggablePreferenceChanged() {
if (this._isDraggableProperty(this.prop)) {
this._addDraggingCapability();
} else {
@ -1012,14 +1012,14 @@ TextPropertyEditor.prototype = {
/**
* Stop clicks propogating down the tree from the enable / disable checkbox.
*/
_onEnableClicked: function(event) {
_onEnableClicked(event) {
event.stopPropagation();
},
/**
* Handles clicks on the disabled property.
*/
_onEnableChanged: function(event) {
_onEnableChanged(event) {
this.prop.setEnabled(this.enable.checked);
event.stopPropagation();
this.telemetry.recordEvent("edit_rule", "ruleview", null, {
@ -1034,7 +1034,7 @@ TextPropertyEditor.prototype = {
* expand the computed list and tracks whether or not the computed list is
* expanded by manually by the user.
*/
_onExpandClicked: function(event) {
_onExpandClicked(event) {
if (
this.computed.hasAttribute("filter-open") ||
this.computed.hasAttribute("user-open")
@ -1059,7 +1059,7 @@ TextPropertyEditor.prototype = {
* filtering. The filter-open attribute is used to track whether or not the
* computed list was toggled opened by the filter.
*/
expandForFilter: function() {
expandForFilter() {
if (!this.computed.hasAttribute("user-open")) {
this.expander.setAttribute("open", "true");
this.computed.setAttribute("filter-open", "");
@ -1070,7 +1070,7 @@ TextPropertyEditor.prototype = {
/**
* Collapses the computed list that was expanded by style filtering.
*/
collapseForFilter: function() {
collapseForFilter() {
this.computed.removeAttribute("filter-open");
if (!this.computed.hasAttribute("user-open")) {
@ -1090,7 +1090,7 @@ TextPropertyEditor.prototype = {
* @param {Number} direction
* The move focus direction number.
*/
_onNameDone: function(value, commit, direction) {
_onNameDone(value, commit, direction) {
const isNameUnchanged =
(!commit && !this.ruleEditor.isEditing) || this.committed.name === value;
if (this.prop.value && isNameUnchanged) {
@ -1141,7 +1141,7 @@ TextPropertyEditor.prototype = {
* @param {Number} direction
* The move focus direction number.
*/
remove: function(direction) {
remove(direction) {
if (this._colorSwatchSpans && this._colorSwatchSpans.length) {
for (const span of this._colorSwatchSpans) {
this.ruleView.tooltips.getTooltip("colorPicker").removeSwatch(span);
@ -1178,7 +1178,7 @@ TextPropertyEditor.prototype = {
* @param {Number} direction
* The move focus direction number.
*/
_onValueDone: function(value = "", commit, direction) {
_onValueDone(value = "", commit, direction) {
const parsedProperties = this._getValueAndExtraProperties(value);
const val = parseSingleValue(
this.cssProperties.isKnown,
@ -1243,7 +1243,7 @@ TextPropertyEditor.prototype = {
/**
* Called when the swatch editor wants to commit a value change.
*/
_onSwatchCommit: function() {
_onSwatchCommit() {
this._onValueDone(this.valueSpan.textContent, true);
this.update();
},
@ -1251,7 +1251,7 @@ TextPropertyEditor.prototype = {
/**
* Called when the swatch editor wants to preview a value change.
*/
_onSwatchPreview: function() {
_onSwatchPreview() {
this._previewValue(this.valueSpan.textContent);
},
@ -1259,7 +1259,7 @@ TextPropertyEditor.prototype = {
* Called when the swatch editor closes from an ESC. Revert to the original
* value of this property before editing.
*/
_onSwatchRevert: function() {
_onSwatchRevert() {
this._previewValue(this.prop.value, true);
this.update();
},
@ -1279,7 +1279,7 @@ TextPropertyEditor.prototype = {
* propertiesToAdd: An array with additional properties, following the
* parseDeclarations format of {name,value,priority}
*/
_getValueAndExtraProperties: function(value) {
_getValueAndExtraProperties(value) {
// The inplace editor will prevent manual typing of multiple properties,
// but we need to deal with the case during a paste event.
// Adding multiple properties inside of value editor sets value with the
@ -1306,8 +1306,8 @@ TextPropertyEditor.prototype = {
}
return {
propertiesToAdd: propertiesToAdd,
firstValue: firstValue,
propertiesToAdd,
firstValue,
};
},
@ -1319,7 +1319,7 @@ TextPropertyEditor.prototype = {
* @param {Boolean} reverting
* True if we're reverting the previously previewed value
*/
_previewValue: function(value, reverting = false) {
_previewValue(value, reverting = false) {
// Since function call is debounced, we need to make sure we are still
// editing, and any selector modifications have been completed
if (!reverting && (!this.editing || this.ruleEditor.isEditing)) {
@ -1341,7 +1341,7 @@ TextPropertyEditor.prototype = {
* @param {KeyboardEvent} event
* @returns {Boolean}
*/
_hasSmallIncrementModifier: function(event) {
_hasSmallIncrementModifier(event) {
const modifier = AppConstants.platform === "macosx" ? "altKey" : "ctrlKey";
return event[modifier] === true;
},
@ -1354,7 +1354,7 @@ TextPropertyEditor.prototype = {
* @param {String} value
* @returns {Object|null}
*/
_parseDimension: function(value) {
_parseDimension(value) {
// The regex handles values like +1, -1, 1e4, .4, 1.3e-4, 1.567
const cssDimensionRegex = /^(?<value>[+-]?(\d*\.)?\d+(e[+-]?\d+)?)(?<unit>(%|[a-zA-Z]+))$/;
return value.match(cssDimensionRegex);
@ -1366,7 +1366,7 @@ TextPropertyEditor.prototype = {
* @param {TextProperty} textProperty
* @returns {Boolean}
*/
_isDraggableProperty: function(textProperty) {
_isDraggableProperty(textProperty) {
// Check if the feature is explicitly disabled.
if (
!Services.prefs.getBoolPref(
@ -1394,7 +1394,7 @@ TextPropertyEditor.prototype = {
return !!dimensionMatchObj;
},
_draggingOnMouseDown: function(event) {
_draggingOnMouseDown(event) {
this._isDragging = true;
this.valueSpan.setPointerCapture(event.pointerId);
this._draggingController = new AbortController();
@ -1423,7 +1423,7 @@ TextPropertyEditor.prototype = {
});
},
_draggingOnMouseMove: function(event) {
_draggingOnMouseMove(event) {
if (!this._isDragging) {
return;
}
@ -1470,7 +1470,7 @@ TextPropertyEditor.prototype = {
this._hasDragged = true;
},
_draggingOnMouseUp: function(event) {
_draggingOnMouseUp(event) {
if (!this._isDragging) {
return;
}
@ -1481,7 +1481,7 @@ TextPropertyEditor.prototype = {
this._onStopDragging(event);
},
_draggingOnKeydown: function(event) {
_draggingOnKeydown(event) {
if (event.key == "Escape") {
this.prop.setValue(this.committed.value, this.committed.priority);
this._onStopDragging(event);
@ -1489,7 +1489,7 @@ TextPropertyEditor.prototype = {
}
},
_onStopDragging: function(event) {
_onStopDragging(event) {
// childHasDragged is used to stop the propagation of a click event when we
// release the mouse in the ruleview.
// The click event is not emitted when we have a pending click on the text property.
@ -1508,7 +1508,7 @@ TextPropertyEditor.prototype = {
* add event listeners to add the ability to modify any size value
* by dragging the mouse horizontally
*/
_addDraggingCapability: function() {
_addDraggingCapability() {
if (this.valueSpan.classList.contains(DRAGGABLE_VALUE_CLASSNAME)) {
return;
}
@ -1516,7 +1516,7 @@ TextPropertyEditor.prototype = {
this.valueSpan.addEventListener("mousedown", this._draggingOnMouseDown);
},
_removeDraggingCapacity: function() {
_removeDraggingCapacity() {
if (!this.valueSpan.classList.contains(DRAGGABLE_VALUE_CLASSNAME)) {
return;
}
@ -1531,7 +1531,7 @@ TextPropertyEditor.prototype = {
*
* @return {Boolean} true if the property name + value pair is valid, false otherwise.
*/
isValid: function() {
isValid() {
return this.prop.isValid();
},
@ -1539,7 +1539,7 @@ TextPropertyEditor.prototype = {
* Validate the name of this property.
* @return {Boolean} true if the property name is valid, false otherwise.
*/
isNameValid: function() {
isNameValid() {
return this.prop.isNameValid();
},
};

38
devtools/client/inspector/shared/style-inspector-menu.js
Просмотреть файл

@ -72,7 +72,7 @@ StyleInspectorMenu.prototype = {
/**
* Display the style inspector context menu
*/
show: function(event) {
show(event) {
try {
this._openMenu({
target: event.target,
@ -84,7 +84,7 @@ StyleInspectorMenu.prototype = {
}
},
_openMenu: function({ target, screenX = 0, screenY = 0 } = {}) {
_openMenu({ target, screenX = 0, screenY = 0 } = {}) {
this.currentTarget = target;
this.styleWindow.focus();
@ -273,7 +273,7 @@ StyleInspectorMenu.prototype = {
return menu;
},
_hasTextSelected: function() {
_hasTextSelected() {
let hasTextSelected;
const selection = this.styleWindow.getSelection();
@ -294,7 +294,7 @@ StyleInspectorMenu.prototype = {
/**
* Get the type of the currently clicked node
*/
_getClickedNodeInfo: function() {
_getClickedNodeInfo() {
const node = this._getClickedNode();
return this.view.getNodeInfo(node);
},
@ -306,7 +306,7 @@ StyleInspectorMenu.prototype = {
* @return {Boolean}
* true if click on color opened the popup, false otherwise.
*/
_isColorPopup: function() {
_isColorPopup() {
this._colorToCopy = "";
const container = this._getClickedNode();
@ -328,7 +328,7 @@ StyleInspectorMenu.prototype = {
*
* @return {Boolean} true if the node is an image url
*/
_isImageUrl: function() {
_isImageUrl() {
const nodeInfo = this._getClickedNodeInfo();
if (!nodeInfo) {
return false;
@ -343,7 +343,7 @@ StyleInspectorMenu.prototype = {
*
* @return {DOMNode}
*/
_getClickedNode: function() {
_getClickedNode() {
const node = this.currentTarget;
if (!node) {
@ -356,7 +356,7 @@ StyleInspectorMenu.prototype = {
/**
* Select all text.
*/
_onSelectAll: function() {
_onSelectAll() {
const selection = this.styleWindow.getSelection();
if (this.isRuleView) {
@ -371,21 +371,21 @@ StyleInspectorMenu.prototype = {
/**
* Copy the most recently selected color value to clipboard.
*/
_onCopy: function() {
_onCopy() {
this.view.copySelection(this.currentTarget);
},
/**
* Copy the most recently selected color value to clipboard.
*/
_onCopyColor: function() {
_onCopyColor() {
clipboardHelper.copyString(this._colorToCopy);
},
/*
* Retrieve the url for the selected image and copy it to the clipboard
*/
_onCopyUrl: function() {
_onCopyUrl() {
if (!this._clickedNodeInfo) {
return;
}
@ -420,7 +420,7 @@ StyleInspectorMenu.prototype = {
/**
* Copy the rule source location of the current clicked node.
*/
_onCopyLocation: function() {
_onCopyLocation() {
if (!this._clickedNodeInfo) {
return;
}
@ -431,7 +431,7 @@ StyleInspectorMenu.prototype = {
/**
* Copy the CSS declaration of the current clicked node.
*/
_onCopyDeclaration: function() {
_onCopyDeclaration() {
if (!this._clickedNodeInfo) {
return;
}
@ -443,7 +443,7 @@ StyleInspectorMenu.prototype = {
/**
* Copy the rule property name of the current clicked node.
*/
_onCopyPropertyName: function() {
_onCopyPropertyName() {
if (!this._clickedNodeInfo) {
return;
}
@ -454,7 +454,7 @@ StyleInspectorMenu.prototype = {
/**
* Copy the rule property value of the current clicked node.
*/
_onCopyPropertyValue: function() {
_onCopyPropertyValue() {
if (!this._clickedNodeInfo) {
return;
}
@ -465,7 +465,7 @@ StyleInspectorMenu.prototype = {
/**
* Copy the rule of the current clicked node.
*/
_onCopyRule: function() {
_onCopyRule() {
const node = this._getClickedNode();
const rule = getRuleFromNode(node, this.view._elementStyle);
clipboardHelper.copyString(rule.stringifyRule());
@ -474,7 +474,7 @@ StyleInspectorMenu.prototype = {
/**
* Copy the rule selector of the current clicked node.
*/
_onCopySelector: function() {
_onCopySelector() {
if (!this._clickedNodeInfo) {
return;
}
@ -485,12 +485,12 @@ StyleInspectorMenu.prototype = {
/**
* Toggle the original sources pref.
*/
_onToggleOrigSources: function() {
_onToggleOrigSources() {
const isEnabled = Services.prefs.getBoolPref(PREF_ORIG_SOURCES);
Services.prefs.setBoolPref(PREF_ORIG_SOURCES, !isEnabled);
},
destroy: function() {
destroy() {
this.currentTarget = null;
this.view = null;
this.inspector = null;

6
devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-03.js
Просмотреть файл

@ -33,18 +33,18 @@ add_task(async function() {
isShown: false,
nodeFront: null,
nbOfTimesShown: 0,
show: function(nodeFront) {
show(nodeFront) {
this.nodeFront = nodeFront;
this.isShown = true;
this.nbOfTimesShown++;
return Promise.resolve(true);
},
hide: function() {
hide() {
this.nodeFront = null;
this.isShown = false;
return Promise.resolve();
},
finalize: function() {},
finalize() {},
};
// Inject the mock highlighter in the rule-view

12
devtools/client/inspector/shared/tooltips-overlay.js
Просмотреть файл

@ -109,7 +109,7 @@ TooltipsOverlay.prototype = {
* Add the tooltips overlay to the view. This will start tracking mouse
* movements and display tooltips when needed
*/
addToView: function() {
addToView() {
if (this._isStarted || this._isDestroyed) {
return;
}
@ -147,7 +147,7 @@ TooltipsOverlay.prototype = {
* @param {String} name
* Identifier name for the tooltip
*/
getTooltip: function(name) {
getTooltip(name) {
let tooltip = this._instances.get(name);
if (tooltip) {
return tooltip;
@ -205,7 +205,7 @@ TooltipsOverlay.prototype = {
* Remove the tooltips overlay from the view. This will stop tracking mouse
* movements and displaying tooltips
*/
removeFromView: function() {
removeFromView() {
if (!this._isStarted || this._isDestroyed) {
return;
}
@ -227,7 +227,7 @@ TooltipsOverlay.prototype = {
* @param {Object} nodeInfo
* @return {String} The tooltip type to be shown, or null
*/
_getTooltipType: function({ type, value: prop }) {
_getTooltipType({ type, value: prop }) {
let tooltipType = null;
// Image preview tooltip
@ -506,7 +506,7 @@ TooltipsOverlay.prototype = {
await setVariableTooltip(this.getTooltip("previewTooltip"), doc, text);
},
_onNewSelection: function() {
_onNewSelection() {
for (const [, tooltip] of this._instances) {
tooltip.hide();
}
@ -515,7 +515,7 @@ TooltipsOverlay.prototype = {
/**
* Destroy this overlay instance, removing it from the view
*/
destroy: function() {
destroy() {
this.removeFromView();
this.view.inspector.selection.off("new-node-front", this._onNewSelection);

40
devtools/client/inspector/test/browser_inspector_breadcrumbs_mutations.js
Просмотреть файл

@ -24,10 +24,10 @@ const TEST_URI = URL_ROOT + "doc_inspector_breadcrumbs.html";
const TEST_DATA = [
{
desc: "Adding a child at the end of the chain shouldn't change anything",
setup: async function(inspector) {
async setup(inspector) {
await selectNode("#i1111", inspector);
},
run: async function({ walker, selection }) {
async run({ walker, selection }) {
await walker.setInnerHTML(selection.nodeFront, "<b>test</b>");
},
shouldRefresh: false,
@ -35,8 +35,8 @@ const TEST_DATA = [
},
{
desc: "Updating an ID to an displayed element should refresh",
setup: function() {},
run: async function({ walker }) {
setup() {},
async run({ walker }) {
const node = await walker.querySelector(walker.rootNode, "#i1");
await node.modifyAttributes([
{
@ -57,8 +57,8 @@ const TEST_DATA = [
},
{
desc: "Updating an class to a displayed element should refresh",
setup: function() {},
run: async function({ walker }) {
setup() {},
async run({ walker }) {
const node = await walker.querySelector(walker.rootNode, "body");
await node.modifyAttributes([
{
@ -81,8 +81,8 @@ const TEST_DATA = [
desc:
"Updating a non id/class attribute to a displayed element should not " +
"refresh",
setup: function() {},
run: async function({ walker }) {
setup() {},
async run({ walker }) {
const node = await walker.querySelector(walker.rootNode, "#i11");
await node.modifyAttributes([
{
@ -104,8 +104,8 @@ const TEST_DATA = [
{
desc:
"Moving a child in an element that's not displayed should not refresh",
setup: function() {},
run: async function({ walker }) {
setup() {},
async run({ walker }) {
// Re-append #i1211 as a last child of #i2.
const parent = await walker.querySelector(walker.rootNode, "#i2");
const child = await walker.querySelector(walker.rootNode, "#i211");
@ -124,8 +124,8 @@ const TEST_DATA = [
{
desc:
"Moving an undisplayed child in a displayed element should not refresh",
setup: function() {},
run: async function({ walker }) {
setup() {},
async run({ walker }) {
// Re-append #i2 in body (move it to the end).
const parent = await walker.querySelector(walker.rootNode, "body");
const child = await walker.querySelector(walker.rootNode, "#i2");
@ -145,8 +145,8 @@ const TEST_DATA = [
desc:
"Updating attributes on an element that's not displayed should not " +
"refresh",
setup: function() {},
run: async function({ walker }) {
setup() {},
async run({ walker }) {
const node = await walker.querySelector(walker.rootNode, "#i2");
await node.modifyAttributes([
{
@ -171,10 +171,10 @@ const TEST_DATA = [
},
{
desc: "Removing the currently selected node should refresh",
setup: async function(inspector) {
async setup(inspector) {
await selectNode("#i2-changed", inspector);
},
run: async function({ walker, selection }) {
async run({ walker, selection }) {
await walker.removeNode(selection.nodeFront);
},
shouldRefresh: true,
@ -182,8 +182,8 @@ const TEST_DATA = [
},
{
desc: "Changing the class of the currently selected node should refresh",
setup: function() {},
run: async function({ selection }) {
setup() {},
async run({ selection }) {
await selection.nodeFront.modifyAttributes([
{
attributeName: "class",
@ -196,8 +196,8 @@ const TEST_DATA = [
},
{
desc: "Changing the id of the currently selected node should refresh",
setup: function() {},
run: async function({ selection }) {
setup() {},
async run({ selection }) {
await selection.nodeFront.modifyAttributes([
{
attributeName: "id",

16
devtools/client/inspector/test/browser_inspector_highlighter-measure_03.js
Просмотреть файл

@ -16,28 +16,28 @@ const WIDTH = 160;
const HEIGHT = 100;
const HANDLER_MAP = {
top: function(areaWidth, areaHeight) {
top(areaWidth, areaHeight) {
return { x: Math.round(areaWidth / 2), y: 0 };
},
topright: function(areaWidth, areaHeight) {
topright(areaWidth, areaHeight) {
return { x: areaWidth, y: 0 };
},
right: function(areaWidth, areaHeight) {
right(areaWidth, areaHeight) {
return { x: areaWidth, y: Math.round(areaHeight / 2) };
},
bottomright: function(areaWidth, areaHeight) {
bottomright(areaWidth, areaHeight) {
return { x: areaWidth, y: areaHeight };
},
bottom: function(areaWidth, areaHeight) {
bottom(areaWidth, areaHeight) {
return { x: Math.round(areaWidth / 2), y: areaHeight };
},
bottomleft: function(areaWidth, areaHeight) {
bottomleft(areaWidth, areaHeight) {
return { x: 0, y: areaHeight };
},
left: function(areaWidth, areaHeight) {
left(areaWidth, areaHeight) {
return { x: 0, y: Math.round(areaHeight / 2) };
},
topleft: function(areaWidth, areaHeight) {
topleft(areaWidth, areaHeight) {
return { x: 0, y: 0 };
},
};

16
devtools/client/inspector/test/browser_inspector_highlighter-measure_04.js
Просмотреть файл

@ -18,28 +18,28 @@ const X_OFFSET = 15;
const Y_OFFSET = 10;
const HANDLER_MAP = {
top: function(areaWidth, areaHeight) {
top(areaWidth, areaHeight) {
return { x: Math.round(areaWidth / 2), y: 0 };
},
topright: function(areaWidth, areaHeight) {
topright(areaWidth, areaHeight) {
return { x: areaWidth, y: 0 };
},
right: function(areaWidth, areaHeight) {
right(areaWidth, areaHeight) {
return { x: areaWidth, y: Math.round(areaHeight / 2) };
},
bottomright: function(areaWidth, areaHeight) {
bottomright(areaWidth, areaHeight) {
return { x: areaWidth, y: areaHeight };
},
bottom: function(areaWidth, areaHeight) {
bottom(areaWidth, areaHeight) {
return { x: Math.round(areaWidth / 2), y: areaHeight };
},
bottomleft: function(areaWidth, areaHeight) {
bottomleft(areaWidth, areaHeight) {
return { x: 0, y: areaHeight };
},
left: function(areaWidth, areaHeight) {
left(areaWidth, areaHeight) {
return { x: 0, y: Math.round(areaHeight / 2) };
},
topleft: function(areaWidth, areaHeight) {
topleft(areaWidth, areaHeight) {
return { x: 0, y: 0 };
},
};

20
devtools/client/inspector/test/browser_inspector_highlighter-options.js
Просмотреть файл

@ -22,7 +22,7 @@ const TEST_DATA = [
{
desc: "Guides and infobar should be shown by default",
options: {},
checkHighlighter: async function(highlighterTestFront) {
async checkHighlighter(highlighterTestFront) {
let hidden = await highlighterTestFront.getHighlighterNodeAttribute(
"box-model-infobar-container",
"hidden"
@ -47,7 +47,7 @@ const TEST_DATA = [
{
desc: "All regions should be shown by default",
options: {},
checkHighlighter: async function(highlighterTestFront) {
async checkHighlighter(highlighterTestFront) {
for (const region of ["margin", "border", "padding", "content"]) {
const { d } = await highlighterTestFront.getHighlighterRegionPath(
region
@ -59,7 +59,7 @@ const TEST_DATA = [
{
desc: "Guides can be hidden",
options: { hideGuides: true },
checkHighlighter: async function(highlighterTestFront) {
async checkHighlighter(highlighterTestFront) {
for (const side of ["top", "right", "bottom", "left"]) {
const hidden = await highlighterTestFront.getHighlighterNodeAttribute(
"box-model-guide-" + side,
@ -72,7 +72,7 @@ const TEST_DATA = [
{
desc: "Infobar can be hidden",
options: { hideInfoBar: true },
checkHighlighter: async function(highlighterTestFront) {
async checkHighlighter(highlighterTestFront) {
const hidden = await highlighterTestFront.getHighlighterNodeAttribute(
"box-model-infobar-container",
"hidden"
@ -83,7 +83,7 @@ const TEST_DATA = [
{
desc: "One region only can be shown (1)",
options: { showOnly: "content" },
checkHighlighter: async function(highlighterTestFront) {
async checkHighlighter(highlighterTestFront) {
let { d } = await highlighterTestFront.getHighlighterRegionPath("margin");
ok(!d, "margin region is hidden");
@ -100,7 +100,7 @@ const TEST_DATA = [
{
desc: "One region only can be shown (2)",
options: { showOnly: "margin" },
checkHighlighter: async function(highlighterTestFront) {
async checkHighlighter(highlighterTestFront) {
let { d } = await highlighterTestFront.getHighlighterRegionPath("margin");
ok(d, "margin region is shown");
@ -117,7 +117,7 @@ const TEST_DATA = [
{
desc: "Guides can be drawn around a given region (1)",
options: { region: "padding" },
checkHighlighter: async function(highlighterTestFront) {
async checkHighlighter(highlighterTestFront) {
const topY1 = await highlighterTestFront.getHighlighterNodeAttribute(
"box-model-guide-top",
"y1"
@ -157,7 +157,7 @@ const TEST_DATA = [
{
desc: "Guides can be drawn around a given region (2)",
options: { region: "margin" },
checkHighlighter: async function(highlighterTestFront) {
async checkHighlighter(highlighterTestFront) {
const topY1 = await highlighterTestFront.getHighlighterNodeAttribute(
"box-model-guide-top",
"y1"
@ -197,7 +197,7 @@ const TEST_DATA = [
{
desc: "When showOnly is used, other regions can be faded",
options: { showOnly: "margin", onlyRegionArea: true },
checkHighlighter: async function(highlighterTestFront) {
async checkHighlighter(highlighterTestFront) {
for (const region of ["margin", "border", "padding", "content"]) {
const { d } = await highlighterTestFront.getHighlighterRegionPath(
region
@ -219,7 +219,7 @@ const TEST_DATA = [
{
desc: "When showOnly is used, other regions can be faded (2)",
options: { showOnly: "padding", onlyRegionArea: true },
checkHighlighter: async function(highlighterTestFront) {
async checkHighlighter(highlighterTestFront) {
for (const region of ["margin", "border", "padding", "content"]) {
const { d } = await highlighterTestFront.getHighlighterRegionPath(
region

20
devtools/client/inspector/test/head.js
Просмотреть файл

@ -615,7 +615,7 @@ const getHighlighterHelperFor = type =>
}
return {
getComputedStyle: async function(options = {}) {
async getComputedStyle(options = {}) {
const pageStyle = highlightedNode.inspectorFront.pageStyle;
return pageStyle.getComputed(highlightedNode, options);
},
@ -630,7 +630,7 @@ const getHighlighterHelperFor = type =>
return highlighter.actorID;
},
show: async function(selector = ":root", options, frameSelector = null) {
async show(selector = ":root", options, frameSelector = null) {
if (frameSelector) {
highlightedNode = await getNodeFrontInFrames(
[frameSelector, selector],
@ -642,11 +642,11 @@ const getHighlighterHelperFor = type =>
return highlighter.show(highlightedNode, options);
},
hide: async function() {
async hide() {
await highlighter.hide();
},
isElementHidden: async function(id) {
async isElementHidden(id) {
return (
(await highlighterTestFront.getHighlighterNodeAttribute(
prefix + id,
@ -656,14 +656,14 @@ const getHighlighterHelperFor = type =>
);
},
getElementTextContent: async function(id) {
async getElementTextContent(id) {
return highlighterTestFront.getHighlighterNodeTextContent(
prefix + id,
highlighter
);
},
getElementAttribute: async function(id, name) {
async getElementAttribute(id, name) {
return highlighterTestFront.getHighlighterNodeAttribute(
prefix + id,
name,
@ -671,7 +671,7 @@ const getHighlighterHelperFor = type =>
);
},
waitForElementAttributeSet: async function(id, name) {
async waitForElementAttributeSet(id, name) {
await poll(async function() {
const value = await highlighterTestFront.getHighlighterNodeAttribute(
prefix + id,
@ -682,7 +682,7 @@ const getHighlighterHelperFor = type =>
}, `Waiting for element ${id} to have attribute ${name} set`);
},
waitForElementAttributeRemoved: async function(id, name) {
async waitForElementAttributeRemoved(id, name) {
await poll(async function() {
const value = await highlighterTestFront.getHighlighterNodeAttribute(
prefix + id,
@ -693,7 +693,7 @@ const getHighlighterHelperFor = type =>
}, `Waiting for element ${id} to have attribute ${name} removed`);
},
synthesizeMouse: async function({
async synthesizeMouse({
selector = ":root",
center,
x,
@ -733,7 +733,7 @@ const getHighlighterHelperFor = type =>
}
),
finalize: async function() {
async finalize() {
highlightedNode = null;
await highlighter.finalize();
},

4
devtools/client/inspector/test/shared-head.js
Просмотреть файл

@ -596,7 +596,7 @@ function _syncGetRuleViewProperty(view, selectorText, propertyName) {
const valueSpan = p.querySelector(".ruleview-propertyvalue");
if (nameSpan.textContent === propertyName) {
return { nameSpan: nameSpan, valueSpan: valueSpan };
return { nameSpan, valueSpan };
}
}
return null;
@ -767,7 +767,7 @@ function buildContextMenuItems(menu) {
* @return An array of MenuItems
*/
function openStyleContextMenuAndGetAllItems(view, target) {
const menu = view.contextMenu._openMenu({ target: target });
const menu = view.contextMenu._openMenu({ target });
return buildContextMenuItems(menu);
}

38
devtools/client/inspector/toolsidebar.js
Просмотреть файл

@ -59,7 +59,7 @@ ToolSidebar.prototype = {
// Rendering
render: function() {
render() {
const sidebar = this.TabBar({
menuDocument: this._toolPanel._toolbox.doc,
showAllTabsMenu: true,
@ -74,7 +74,7 @@ ToolSidebar.prototype = {
/**
* Adds all the queued tabs.
*/
addAllQueuedTabs: function() {
addAllQueuedTabs() {
this._tabbar.addAllQueuedTabs();
},
@ -87,7 +87,7 @@ ToolSidebar.prototype = {
* @param {Boolean} selected true if the panel should be selected
* @param {Number} index the position where the tab should be inserted
*/
addTab: function(id, title, panel, selected, index) {
addTab(id, title, panel, selected, index) {
this._tabbar.addTab(id, title, selected, panel, null, index);
this.emit("new-tab-registered", id);
},
@ -101,12 +101,12 @@ ToolSidebar.prototype = {
* @param {Boolean} selected true if the panel should be selected
* @param {Number} index the position where the tab should be inserted
*/
addExistingTab: function(id, title, selected, index) {
addExistingTab(id, title, selected, index) {
const panel = this.InspectorTabPanel({
id: id,
id,
idPrefix: this.TABPANEL_ID_PREFIX,
key: id,
title: title,
title,
});
this.addTab(id, title, panel, selected, index);
@ -121,7 +121,7 @@ ToolSidebar.prototype = {
* @param {Boolean} selected true if the panel should be selected
* @param {Number} index the position where the tab should be inserted
*/
queueTab: function(id, title, panel, selected, index) {
queueTab(id, title, panel, selected, index) {
this._tabbar.queueTab(id, title, selected, panel, null, index);
this.emit("new-tab-registered", id);
},
@ -135,12 +135,12 @@ ToolSidebar.prototype = {
* @param {Boolean} selected true if the panel should be selected
* @param {Number} index the position where the tab should be inserted
*/
queueExistingTab: function(id, title, selected, index) {
queueExistingTab(id, title, selected, index) {
const panel = this.InspectorTabPanel({
id: id,
id,
idPrefix: this.TABPANEL_ID_PREFIX,
key: id,
title: title,
title,
});
this.queueTab(id, title, panel, selected, index);
@ -165,21 +165,21 @@ ToolSidebar.prototype = {
* @param {Boolean} isVisible True to show the tab/tabpanel, False to hide it.
* @param {String} id The ID of the tab to be hidden.
*/
toggleTab: function(isVisible, id) {
toggleTab(isVisible, id) {
this._tabbar.toggleTab(id, isVisible);
},
/**
* Select a specific tab.
*/
select: function(id) {
select(id) {
this._tabbar.select(id);
},
/**
* Return the id of the selected tab.
*/
getCurrentTabID: function() {
getCurrentTabID() {
return this._currentTool;
},
@ -188,7 +188,7 @@ ToolSidebar.prototype = {
* @param {String} id
* @return {DOMNode}
*/
getTabPanel: function(id) {
getTabPanel(id) {
// Search with and without the ID prefix as there might have been existing
// tabpanels by the time the sidebar got created
return this._panelDoc.querySelector(
@ -199,7 +199,7 @@ ToolSidebar.prototype = {
/**
* Event handler.
*/
handleSelectionChange: function(id) {
handleSelectionChange(id) {
if (this._destroyed) {
return;
}
@ -224,7 +224,7 @@ ToolSidebar.prototype = {
* @param {String} previousToolId
* id of the previously selected tool.
*/
updateTelemetryOnChange: function(currentToolId, previousToolId) {
updateTelemetryOnChange(currentToolId, previousToolId) {
if (currentToolId === previousToolId || !this._telemetry) {
// Skip telemetry if the tool id did not change or telemetry is unavailable.
return;
@ -257,7 +257,7 @@ ToolSidebar.prototype = {
* @param {String} id
* The panel id we would like to process.
*/
getTelemetryPanelNameOrOther: function(id) {
getTelemetryPanelNameOrOther(id) {
if (!this._toolNames) {
// Get all built in tool ids. We identify third party tool ids by checking
// for a "-", which shows it originates from an addon.
@ -281,7 +281,7 @@ ToolSidebar.prototype = {
* @param {String} id
* The sidebar tab id to select.
*/
show: function(id) {
show(id) {
this._tabbox.hidden = false;
// If an id is given, select the corresponding sidebar tab.
@ -295,7 +295,7 @@ ToolSidebar.prototype = {
/**
* Show the sidebar.
*/
hide: function() {
hide() {
this._tabbox.hidden = true;
this.emit("hide");

2
devtools/client/jsonview/components/HeadersPanel.js
Просмотреть файл

@ -46,7 +46,7 @@ define(function(require, exports, module) {
return div(
{ className: "headersPanelBox tab-panel-inner" },
HeadersToolbar({ actions: this.props.actions }),
div({ className: "panelContent" }, Headers({ data: data }))
div({ className: "panelContent" }, Headers({ data }))
);
}
}

2
devtools/client/jsonview/components/JsonPanel.js
Просмотреть файл

@ -116,7 +116,7 @@ define(function(require, exports, module) {
object: this.props.data,
mode: MODE.TINY,
onFilter: this.onFilter,
columns: columns,
columns,
renderValue: this.renderValue,
expandedNodes: this.props.expandedNodes,
});

24
devtools/client/jsonview/converter-child.js
Просмотреть файл

@ -74,25 +74,25 @@ Converter.prototype = {
* 5. convert does nothing, it's just the synchronous version
* of asyncConvertData
*/
convert: function(fromStream, fromType, toType, ctx) {
convert(fromStream, fromType, toType, ctx) {
return fromStream;
},
asyncConvertData: function(fromType, toType, listener, ctx) {
asyncConvertData(fromType, toType, listener, ctx) {
this.listener = listener;
},
getConvertedType: function(fromType, channel) {
getConvertedType(fromType, channel) {
return "text/html";
},
onDataAvailable: function(request, inputStream, offset, count) {
onDataAvailable(request, inputStream, offset, count) {
// Decode and insert data.
const buffer = new ArrayBuffer(count);
new BinaryInput(inputStream).readArrayBuffer(count, buffer);
this.decodeAndInsertBuffer(buffer);
},
onStartRequest: function(request) {
onStartRequest(request) {
// Set the content type to HTML in order to parse the doctype, styles
// and scripts. The JSON will be manually inserted as text.
request.QueryInterface(Ci.nsIChannel);
@ -154,7 +154,7 @@ Converter.prototype = {
this.listener.onDataAvailable(request, stream, 0, stream.available());
},
onStopRequest: function(request, statusCode) {
onStopRequest(request, statusCode) {
// Flush data if we haven't been canceled.
if (components.isSuccessCode(statusCode)) {
this.decodeAndInsertBuffer(new ArrayBuffer(0), true);
@ -168,7 +168,7 @@ Converter.prototype = {
},
// Decodes an ArrayBuffer into a string and inserts it into the page.
decodeAndInsertBuffer: function(buffer, flush = false) {
decodeAndInsertBuffer(buffer, flush = false) {
// Decode the buffer into a string.
const data = this.decoder.decode(buffer, { stream: !flush });
@ -213,13 +213,13 @@ function getHttpHeaders(request) {
// (e.g. in case of data: URLs)
if (request instanceof Ci.nsIHttpChannel) {
request.visitResponseHeaders({
visitHeader: function(name, value) {
headers.response.push({ name: name, value: value });
visitHeader(name, value) {
headers.response.push({ name, value });
},
});
request.visitRequestHeaders({
visitHeader: function(name, value) {
headers.request.push({ name: name, value: value });
visitHeader(name, value) {
headers.request.push({ name, value });
},
});
}
@ -384,5 +384,5 @@ function createInstance() {
}
exports.JsonViewService = {
createInstance: createInstance,
createInstance,
};

14
devtools/client/jsonview/json-viewer.js
Просмотреть файл

@ -33,12 +33,12 @@ define(function(require, exports, module) {
* available for the JSON viewer.
*/
input.actions = {
onCopyJson: function() {
onCopyJson() {
const text = input.prettified ? input.jsonPretty : input.jsonText;
copyString(text.textContent);
},
onSaveJson: function() {
onSaveJson() {
if (input.prettified && !prettyURL) {
prettyURL = URL.createObjectURL(
new window.Blob([input.jsonPretty.textContent])
@ -47,7 +47,7 @@ define(function(require, exports, module) {
dispatchEvent("save", input.prettified ? prettyURL : null);
},
onCopyHeaders: function() {
onCopyHeaders() {
let value = "";
const isWinNT =
document.documentElement.getAttribute("platform") === "win";
@ -70,11 +70,11 @@ define(function(require, exports, module) {
copyString(value);
},
onSearch: function(value) {
onSearch(value) {
theApp.setState({ searchFilter: value });
},
onPrettify: function(data) {
onPrettify(data) {
if (input.json instanceof Error) {
// Cannot prettify invalid JSON
return;
@ -91,12 +91,12 @@ define(function(require, exports, module) {
input.prettified = !input.prettified;
},
onCollapse: function(data) {
onCollapse(data) {
input.expandedNodes.clear();
theApp.forceUpdate();
},
onExpand: function(data) {
onExpand(data) {
input.expandedNodes = TreeViewClass.getExpandedNodes(input.json);
theApp.setState({ expandedNodes: input.expandedNodes });
},

12
devtools/client/memory/actions/snapshot.js
Просмотреть файл

@ -144,7 +144,7 @@ const readSnapshot = (exports.readSnapshot = TaskCache.declareCacheableTask({
return id;
},
task: async function(heapWorker, id, removeFromCache, dispatch, getState) {
async task(heapWorker, id, removeFromCache, dispatch, getState) {
const snapshot = getSnapshot(getState(), id);
assert(
[states.SAVED, states.IMPORTING].includes(snapshot.state),
@ -205,7 +205,7 @@ function makeTakeCensusTask({
return `take-census-task-${thisTakeCensusTaskId}-${id}`;
},
task: async function(heapWorker, id, removeFromCache, dispatch, getState) {
async task(heapWorker, id, removeFromCache, dispatch, getState) {
const snapshot = getSnapshot(getState(), id);
if (!snapshot) {
removeFromCache();
@ -557,7 +557,7 @@ const computeDominatorTree = (exports.computeDominatorTree = TaskCache.declareCa
return id;
},
task: async function(heapWorker, id, removeFromCache, dispatch, getState) {
async task(heapWorker, id, removeFromCache, dispatch, getState) {
const snapshot = getSnapshot(getState(), id);
assert(
!snapshot.dominatorTree?.dominatorTreeId,
@ -602,7 +602,7 @@ const fetchDominatorTree = (exports.fetchDominatorTree = TaskCache.declareCachea
return id;
},
task: async function(heapWorker, id, removeFromCache, dispatch, getState) {
async task(heapWorker, id, removeFromCache, dispatch, getState) {
const snapshot = getSnapshot(getState(), id);
assert(
dominatorTreeIsComputed(snapshot),
@ -658,7 +658,7 @@ exports.fetchImmediatelyDominated = TaskCache.declareCacheableTask({
return `${id}-${lazyChildren.key()}`;
},
task: async function(
async task(
heapWorker,
id,
lazyChildren,
@ -728,7 +728,7 @@ const computeAndFetchDominatorTree = (exports.computeAndFetchDominatorTree = Tas
return id;
},
task: async function(heapWorker, id, removeFromCache, dispatch, getState) {
async task(heapWorker, id, removeFromCache, dispatch, getState) {
const dominatorTreeId = await dispatch(
computeDominatorTree(heapWorker, id)
);

2
devtools/client/memory/components/tree-map/canvas-utils.js
Просмотреть файл

@ -50,7 +50,7 @@ Canvases.prototype = {
*
* @return {type} description
*/
destroy: function() {
destroy() {
this.removeHandlers();
this.container.removeChild(this.main.canvas);
this.container.removeChild(this.zoom.canvas);

2
devtools/client/memory/initializer.js
Просмотреть файл

@ -29,7 +29,7 @@ const initialize = async function(commands) {
store = Store();
const app = createElement(App, {
toolbox: gToolbox,
commands: commands,
commands,
heapWorker: gHeapAnalysesClient,
});
const provider = createElement(Provider, { store }, app);

2
devtools/client/memory/models.js
Просмотреть файл

@ -506,7 +506,7 @@ exports.app = {
individuals: individualsModel,
// The current type of view.
view: function(app) {
view(app) {
catchAndIgnore(function(app) {
switch (app.view.state) {
case viewState.DIFFING:

2
devtools/client/memory/test/xpcshell/test_action-clear-snapshots_05.js
Просмотреть файл

@ -28,7 +28,7 @@ add_task(async function() {
]);
const errorHeapWorker = {
deleteHeapSnapshot: function() {
deleteHeapSnapshot() {
return Promise.reject("_");
},
};

6
devtools/client/netmonitor/src/api.js
Просмотреть файл

@ -161,15 +161,15 @@ NetMonitorAPI.prototype = {
* a function that takes ({harEntry, requestId})
* as first argument.
*/
addRequestFinishedListener: function(listener) {
addRequestFinishedListener(listener) {
this._requestFinishedListeners.add(listener);
},
removeRequestFinishedListener: function(listener) {
removeRequestFinishedListener(listener) {
this._requestFinishedListeners.delete(listener);
},
hasRequestFinishedListeners: function() {
hasRequestFinishedListeners() {
return this._requestFinishedListeners.size > 0;
},

2
devtools/client/netmonitor/src/app.js
Просмотреть файл

@ -74,7 +74,7 @@ NetMonitorApp.prototype = {
});
// Render the root Application component.
render(Provider({ store: store }, app), this.mount);
render(Provider({ store }, app), this.mount);
},
/**

Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше