Merge autoland to mozilla-central. a=merge
Merge autoland to mozilla-central. a=merge
--- a/.eslintignore
+++ b/.eslintignore
@@ -21,19 +21,17 @@ extensions/universalchardet/**
gfx/layers/**
gfx/tests/browser/**
gfx/tests/chrome/**
gfx/tests/mochitest/**
image/**
layout/**
memory/replace/dmd/test/**
modules/**
-netwerk/base/NetUtil.jsm
netwerk/cookie/test/browser/**
-netwerk/cookie/test/unit/**
netwerk/protocol/**
netwerk/dns/**
netwerk/test/browser/**
netwerk/test/httpserver/**
netwerk/test/mochitests/**
netwerk/test/unit*/**
netwerk/wifi/**
parser/**
--- a/README.txt
+++ b/README.txt
@@ -13,16 +13,17 @@ submit it to Bugzilla (https://bugzilla.
https://developer.mozilla.org/en/docs/Creating_a_patch
https://developer.mozilla.org/en/docs/Getting_your_patch_in_the_tree
If you have a question about developing Mozilla, and can't find the solution
on https://developer.mozilla.org, you can try asking your question in a
mozilla.* Usenet group, or on IRC at irc.mozilla.org. [The Mozilla news groups
are accessible on Google Groups, or news.mozilla.org with a NNTP reader.]
-You can download nightly development builds from the Mozilla FTP server.
-Keep in mind that nightly builds, which are used by Mozilla developers for
-testing, may be buggy. Firefox nightlies, for example, can be found at:
+Nightly development builds can be downloaded from:
https://archive.mozilla.org/pub/firefox/nightly/latest-mozilla-central/
- or -
https://www.mozilla.org/firefox/channel/desktop/#nightly
+Keep in mind that nightly builds, which are used by Mozilla developers for
+testing, may be buggy.
+
--- a/accessible/tests/mochitest/table.js
+++ b/accessible/tests/mochitest/table.js
@@ -492,17 +492,17 @@ function testTableSelection(aIdentifier,
for (let i = 0; i < actualSelCellsCount; i++) {
var actualSelCellAccessible =
actualSelCellsArray.queryElementAt(i, nsIAccessibleTableCell);
let colIdx = acc.getColumnIndexAt(selCells[i]);
let rowIdx = acc.getRowIndexAt(selCells[i]);
var expectedSelCellAccessible = acc.getCellAt(rowIdx, colIdx);
- ok(actualSelCellAccessible, expectedSelCellAccessible,
+ is(actualSelCellAccessible, expectedSelCellAccessible,
msg + "getSelectedCells: Cell at index " + selCells[i] +
" should be selected.");
ok(actualSelCellAccessible.isSelected(),
"isSelected: Cell at index " + selCells[i] + " should be selected.");
}
// selected states tests
--- a/accessible/tests/mochitest/test_OuterDocAccessible.html
+++ b/accessible/tests/mochitest/test_OuterDocAccessible.html
@@ -39,33 +39,33 @@ https://bugzilla.mozilla.org/show_bug.cg
// see bug 440770, no actions wanted on outer doc
is(outerDocAcc.actionCount, 0,
"Wrong number of actions for internal frame!");
try {
outerDocAcc.getActionName(0);
do_throw("No exception thrown for actionName!");
} catch (e) {
- ok(e.result, ns_error_invalid_arg,
+ is(e.result, ns_error_invalid_arg,
"Wrong return value for actionName call!");
}
try {
actionTempStr = outerDocAcc.getActionDescription(0);
do_throw("No exception thrown for actionDescription!");
} catch (e) {
- ok(e.result, ns_error_invalid_arg,
+ is(e.result, ns_error_invalid_arg,
"Wrong return value for actionDescription call!");
}
try {
outerDocAcc.doAction(0);
do_throw("No exception thrown for doAction!");
} catch (e) {
- ok(e.result, ns_error_invalid_arg,
+ is(e.result, ns_error_invalid_arg,
"Wrong return value for doAction call!");
}
}
}
SimpleTest.finish();
}
--- a/accessible/tests/mochitest/text.js
+++ b/accessible/tests/mochitest/text.js
@@ -356,17 +356,17 @@ function cleanTextSelections(aID) {
* @param aSelectionsCount [in] expected number of selections after addSelection
*/
function testTextAddSelection(aID, aStartOffset, aEndOffset, aSelectionsCount) {
var acc = getAccessible(aID, [nsIAccessibleText]);
var text = acc.getText(0, -1);
acc.addSelection(aStartOffset, aEndOffset);
- ok(acc.selectionCount, aSelectionsCount,
+ is(acc.selectionCount, aSelectionsCount,
text + ": failed to add selection from offset '" + aStartOffset +
"' to offset '" + aEndOffset + "': selectionCount after");
}
/**
* Test removeSelection method.
*
* @param aID [in] Id, DOM node, or acc obj
@@ -375,17 +375,17 @@ function testTextAddSelection(aID, aStar
* removeSelection
*/
function testTextRemoveSelection(aID, aSelectionIndex, aSelectionsCount) {
var acc = getAccessible(aID, [nsIAccessibleText]);
var text = acc.getText(0, -1);
acc.removeSelection(aSelectionIndex);
- ok(acc.selectionCount, aSelectionsCount,
+ is(acc.selectionCount, aSelectionsCount,
text + ": failed to remove selection at index '" +
aSelectionIndex + "': selectionCount after");
}
/**
* Test setSelectionBounds method.
*
* @param aID [in] Id, DOM node, or acc obj
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -587,18 +587,17 @@ const gStoragePressureObserver = {
}
msg = prefStrBundle.getFormattedString(descriptionStringID, [brandShortName]);
buttons.push({
label: prefStrBundle.getString(prefButtonLabelStringID),
accessKey: prefStrBundle.getString(prefButtonAccesskeyStringID),
callback(notificationBar, button) {
// The advanced subpanes are only supported in the old organization, which will
// be removed by bug 1349689.
- let win = gBrowser.ownerGlobal;
- win.openPreferences("privacy-sitedata", { origin: "storagePressure" });
+ openPreferences("privacy-sitedata", { origin: "storagePressure" });
},
});
}
notificationBox.appendNotification(
msg, NOTIFICATION_VALUE, null, notificationBox.PRIORITY_WARNING_HIGH, buttons, null);
},
};
--- a/browser/base/content/tabbrowser.js
+++ b/browser/base/content/tabbrowser.js
@@ -2575,30 +2575,30 @@ window._gBrowser = {
this._notifyPinnedStatus(t);
}
return t;
},
moveTabsToStart(contextTab) {
let tabs = contextTab.multiselected ?
- gBrowser.selectedTabs :
+ this.selectedTabs :
[contextTab];
// Walk the array in reverse order so the tabs are kept in order.
for (let i = tabs.length - 1; i >= 0; i--) {
let tab = tabs[i];
if (tab._tPos > 0) {
this.moveTabTo(tab, 0);
}
}
},
moveTabsToEnd(contextTab) {
let tabs = contextTab.multiselected ?
- gBrowser.selectedTabs :
+ this.selectedTabs :
[contextTab];
for (let tab of tabs) {
if (tab._tPos < this.tabs.length - 1) {
this.moveTabTo(tab, this.tabs.length - 1);
}
}
},
--- a/browser/base/content/test/general/browser_visibleTabs_tabPreview.js
+++ b/browser/base/content/test/general/browser_visibleTabs_tabPreview.js
@@ -6,22 +6,25 @@ add_task(async function test() {
await SpecialPowers.pushPrefEnv({"set": [["browser.ctrlTab.recentlyUsedOrder", true]]});
let [origTab] = gBrowser.visibleTabs;
let tabOne = BrowserTestUtils.addTab(gBrowser);
let tabTwo = BrowserTestUtils.addTab(gBrowser);
// test the ctrlTab.tabList
pressCtrlTab();
- ok(ctrlTab.tabList.length, 3, "Show 3 tabs in tab preview");
+ is(ctrlTab.tabList.length, 3, "Show 3 tabs in tab preview");
releaseCtrl();
gBrowser.showOnlyTheseTabs([origTab]);
pressCtrlTab();
- ok(ctrlTab.tabList.length, 1, "Show 1 tab in tab preview");
+
+ // XXX: Switched to from ok() to todo_is() in Bug 1467712. Follow up in 1500959
+ // `ctrlTab.tabList.length` is still equal to 3 at this step.
+ todo_is(ctrlTab.tabList.length, 1, "Show 1 tab in tab preview");
ok(!ctrlTab.isOpen, "With 1 tab open, Ctrl+Tab doesn't open the preview panel");
gBrowser.showOnlyTheseTabs([origTab, tabOne, tabTwo]);
pressCtrlTab();
ok(ctrlTab.isOpen, "With 3 tabs open, Ctrl+Tab does open the preview panel");
releaseCtrl();
// cleanup
--- a/browser/base/content/test/sanitize/browser_purgehistory_clears_sh.js
+++ b/browser/base/content/test/sanitize/browser_purgehistory_clears_sh.js
@@ -23,20 +23,18 @@ add_task(async function purgeHistoryTest
content.history.pushState({}, "");
content.history.pushState({}, "");
content.history.back();
let newHistory = content.history.length;
Assert.equal(startHistory, 1, "Initial SHistory size");
Assert.equal(newHistory, 3, "New SHistory size");
});
- ok(browser.webNavigation.canGoBack, true,
- "New value for webNavigation.canGoBack");
- ok(browser.webNavigation.canGoForward, true,
- "New value for webNavigation.canGoForward");
+ ok(browser.webNavigation.canGoBack, "New value for webNavigation.canGoBack");
+ ok(browser.webNavigation.canGoForward, "New value for webNavigation.canGoForward");
ok(!backButton.hasAttribute("disabled"), "Back button was enabled");
ok(!forwardButton.hasAttribute("disabled"), "Forward button was enabled");
await Sanitizer.sanitize(["history"]);
await ContentTask.spawn(browser, null, async function() {
Assert.equal(content.history.length, 1, "SHistory correctly cleared");
});
--- a/browser/base/content/test/sidebar/browser_sidebar_adopt.js
+++ b/browser/base/content/test/sidebar/browser_sidebar_adopt.js
@@ -41,22 +41,21 @@ add_task(async function testEventsReceiv
ok(true, "SidebarShown and SidebarFocused events fired on a new window");
});
add_task(async function testEventReceivedInNewWindow() {
info("Opening a new window and expecting the SidebarFocused event to not fire");
let promiseNewWindow = BrowserTestUtils.waitForNewWindow();
- BrowserTestUtils.openNewBrowserWindow();
- let win = await promiseNewWindow;
+ let win = OpenBrowserWindow();
let adoptedShown = BrowserTestUtils.waitForEvent(win, "SidebarShown");
win.addEventListener("SidebarFocused", failIfSidebarFocusedFires);
-
registerCleanupFunction(async function() {
win.removeEventListener("SidebarFocused", failIfSidebarFocusedFires);
await BrowserTestUtils.closeWindow(win);
});
+ await promiseNewWindow;
await adoptedShown;
ok(true, "SidebarShown event fired on an adopted window");
});
--- a/browser/base/content/test/tabs/browser_multiselect_tabs_using_selectedTabs.js
+++ b/browser/base/content/test/tabs/browser_multiselect_tabs_using_selectedTabs.js
@@ -20,18 +20,19 @@ add_task(async function() {
if (tabs.length == 1) {
ok(!selectedTab.multiselected, "Selected tab shouldn't be multi-selected because we are not in multi-select context yet");
ok(!_multiSelectedTabsSet.has(selectedTab), "Selected tab shouldn't be in _multiSelectedTabsSet");
is(selectedTabs.length, 1, "selectedTabs should contain a single tab");
is(selectedTabs[0], selectedTab, "selectedTabs should contain the selected tab");
ok(!selectedTab.hasAttribute("aria-selected"),
"Selected tab shouldn't be marked as aria-selected when only one tab is selected");
} else {
- ok(selectedTabs.length, tabs.length, "Check number of selected tabs");
- for (let tab of tabs) {
+ const uniqueTabs = [...new Set(tabs)];
+ is(selectedTabs.length, uniqueTabs.length, "Check number of selected tabs");
+ for (let tab of uniqueTabs) {
ok(tab.multiselected, "Tab should be multi-selected");
ok(_multiSelectedTabsSet.has(tab), "Tab should be in _multiSelectedTabsSet");
ok(selectedTabs.includes(tab), "Tab should be in selectedTabs");
is(tab.getAttribute("aria-selected"), "true", "Selected tab should be marked as aria-selected");
}
}
}
--- a/browser/base/content/test/urlbar/browser_locationBarCommand.js
+++ b/browser/base/content/test/urlbar/browser_locationBarCommand.js
@@ -29,28 +29,21 @@ add_task(async function alt_left_click_t
await saveURLPromise;
ok(true, "SaveURL was called");
is(gURLBar.value, "", "Urlbar reverted to original value");
});
add_task(async function shift_left_click_test() {
info("Running test: Shift left click");
- let newWindowPromise = BrowserTestUtils.waitForNewWindow();
+ let destinationURL = "http://" + TEST_VALUE + "/";
+ let newWindowPromise = BrowserTestUtils.waitForNewWindow({url: destinationURL});
triggerCommand(true, {shiftKey: true});
let win = await newWindowPromise;
- // Wait for the initial browser to load.
- let browser = win.gBrowser.selectedBrowser;
- let destinationURL = "http://" + TEST_VALUE + "/";
- await Promise.all([
- BrowserTestUtils.browserLoaded(browser),
- BrowserTestUtils.waitForLocationChange(win.gBrowser, destinationURL),
- ]);
-
info("URL should be loaded in a new window");
is(gURLBar.value, "", "Urlbar reverted to original value");
await promiseCheckChildNoFocusedElement(gBrowser.selectedBrowser);
is(document.activeElement, gBrowser.selectedBrowser, "Content window should be focused");
is(win.gURLBar.textValue, TEST_VALUE, "New URL is loaded in new window");
// Cleanup.
await BrowserTestUtils.closeWindow(win);
--- a/browser/base/content/test/urlbar/browser_populateAfterPushState.js
+++ b/browser/base/content/test/urlbar/browser_populateAfterPushState.js
@@ -13,11 +13,11 @@ add_task(async function() {
await BrowserTestUtils.withNewTab(TEST_PATH + "dummy_page.html", async function(browser) {
gURLBar.value = "";
let locationChangePromise = BrowserTestUtils.waitForLocationChange(gBrowser, TEST_PATH + "dummy_page2.html");
await ContentTask.spawn(browser, null, function() {
content.history.pushState({}, "Page 2", "dummy_page2.html");
});
await locationChangePromise;
- ok(gURLBar.value, TEST_PATH + "dummy_page2.html", "Should have updated the URL bar.");
+ is(gURLBar.value, TEST_PATH + "dummy_page2.html", "Should have updated the URL bar.");
});
});
--- a/browser/components/contextualidentity/test/browser/browser_windowOpen.js
+++ b/browser/components/contextualidentity/test/browser/browser_windowOpen.js
@@ -18,22 +18,22 @@ add_task(async function test() {
info("Creating a tab with UCI = 1...");
let tab = BrowserTestUtils.addTab(gBrowser, BASE_URI, {userContextId: 1});
is(tab.getAttribute("usercontextid"), 1, "New tab has UCI equal 1");
let browser = gBrowser.getBrowserForTab(tab);
await BrowserTestUtils.browserLoaded(browser);
info("Opening a new window from this tab...");
+ let newWinPromise = BrowserTestUtils.waitForNewWindow({url: BASE_URI});
ContentTask.spawn(browser, BASE_URI, function(url) {
content.window.newWindow = content.window.open(url, "_blank");
});
- let newWin = await BrowserTestUtils.waitForNewWindow();
+ let newWin = await newWinPromise;
let newTab = newWin.gBrowser.selectedTab;
- await BrowserTestUtils.browserLoaded(newTab.linkedBrowser);
is(newTab.getAttribute("usercontextid"), 1, "New tab has UCI equal 1");
info("Closing the new window and tab...");
await BrowserTestUtils.closeWindow(newWin);
BrowserTestUtils.removeTab(tab);
});
--- a/browser/components/extensions/test/browser/browser_ext_browserAction_popup_resize.js
+++ b/browser/components/extensions/test/browser/browser_ext_browserAction_popup_resize.js
@@ -165,24 +165,24 @@ async function testPopupSize(standardsMo
let origPanelRect = panel.getBoundingClientRect();
// Check that the panel is still positioned as expected.
let checkPanelPosition = () => {
is(panel.getAttribute("side"), arrowSide, "Panel arrow is positioned as expected");
let panelRect = panel.getBoundingClientRect();
if (arrowSide == "top") {
- ok(panelRect.top, origPanelRect.top, "Panel has not moved downwards");
+ is(panelRect.top, origPanelRect.top, "Panel has not moved downwards");
ok(panelRect.bottom >= origPanelRect.bottom, `Panel has not shrunk from original size (${panelRect.bottom} >= ${origPanelRect.bottom})`);
let screenBottom = browserWin.screen.availTop + browserWin.screen.availHeight;
let panelBottom = browserWin.mozInnerScreenY + panelRect.bottom;
ok(Math.round(panelBottom) <= screenBottom, `Bottom of popup should be on-screen. (${panelBottom} <= ${screenBottom})`);
} else {
- ok(panelRect.bottom, origPanelRect.bottom, "Panel has not moved upwards");
+ is(panelRect.bottom, origPanelRect.bottom, "Panel has not moved upwards");
ok(panelRect.top <= origPanelRect.top, `Panel has not shrunk from original size (${panelRect.top} <= ${origPanelRect.top})`);
let panelTop = browserWin.mozInnerScreenY + panelRect.top;
ok(panelTop >= browserWin.screen.availTop, `Top of popup should be on-screen. (${panelTop} >= ${browserWin.screen.availTop})`);
}
};
await awaitBrowserLoaded(browser);
--- a/browser/components/payments/test/browser/browser_address_edit.js
+++ b/browser/components/payments/test/browser/browser_address_edit.js
@@ -408,17 +408,17 @@ add_task(async function test_shipping_ad
let state = await PTU.DialogContentUtils.waitForState(content, (state) => {
return Object.keys(state.savedAddresses).length == 1;
}, "One saved addresses when starting test");
let savedAddress = Object.values(state.savedAddresses)[0];
let selector = "address-picker[selected-state-key='selectedShippingAddress']";
let picker = content.document.querySelector(selector);
let option = Cu.waiveXrays(picker).dropdown.popupBox.children[0];
- ok(option.textContent,
+ is(option.textContent,
FormAutofillUtils.getAddressLabel(savedAddress, null),
"Shows correct shipping option label");
});
info("clicking cancel");
spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel);
await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed");
@@ -450,17 +450,17 @@ add_task(async function test_payer_addre
}, "One saved addresses when starting test");
let savedAddress = Object.values(state.savedAddresses)[0];
let selector = "address-picker[selected-state-key='selectedPayerAddress']";
let picker = content.document.querySelector(selector);
let option = Cu.waiveXrays(picker).dropdown.popupBox.children[0];
is(option.textContent.includes("32 Vassar Street"), false,
"Payer option label does not contain street address");
- ok(option.textContent,
+ is(option.textContent,
FormAutofillUtils.getAddressLabel(savedAddress, "name tel email"),
"Shows correct payer option label");
});
info("clicking cancel");
spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel);
await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed");
--- a/browser/components/payments/test/browser/browser_card_edit.js
+++ b/browser/components/payments/test/browser/browser_card_edit.js
@@ -72,17 +72,17 @@ async function add_link(aOptions = {}) {
await spawnPaymentDialogTask(frame, async function checkBillingAddressPicker(testArgs = {}) {
let billingAddressSelect = content.document.querySelector("#billingAddressGUID");
ok(content.isVisible(billingAddressSelect),
"The billing address selector should always be visible");
is(billingAddressSelect.childElementCount, 2,
"Only 2 child options should exist by default");
is(billingAddressSelect.children[0].value, "",
"The first option should be the blank/empty option");
- ok(billingAddressSelect.children[1].value, "",
+ ok(billingAddressSelect.children[1].value,
"The 2nd option is the prefilled address and should be truthy");
}, aOptions);
let addressOptions = Object.assign({}, aOptions, {
addLinkSelector: ".billingAddressRow .add-link",
checkboxSelector: "#address-page .persist-checkbox",
initialPageId: "basic-card-page",
expectPersist: aOptions.expectDefaultAddressPersist,
--- a/browser/components/payments/test/browser/browser_onboarding_wizard.js
+++ b/browser/components/payments/test/browser/browser_onboarding_wizard.js
@@ -484,17 +484,17 @@ add_task(async function test_back_button
}, "Address page is shown again");
info("Checking if the address page has been rendered");
addressSaveButton = content.document.querySelector("address-form .save-button");
ok(content.isVisible(addressSaveButton), "Address save button is rendered");
info("Checking if the address saved in the last step is correctly loaded in the form");
field = content.document.getElementById("given-name");
- ok(field.value, PTU.Addresses.TimBL2["given-name"],
+ is(field.value, PTU.Addresses.TimBL2["given-name"],
"Given name field value is correctly loaded");
info("Editing the address and saving again");
content.fillField(field, "John");
addressSaveButton.click();
info("Checking if the address was correctly edited");
await PTU.DialogContentUtils.waitForState(content, (state) => {
@@ -504,17 +504,17 @@ add_task(async function test_back_button
}, "Address was correctly edited and saved");
// eslint-disable-next-line max-len
info("Checking if the basic card form is now rendered and if the field values from before are preserved");
let basicCardCancelButton = content.document.querySelector("basic-card-form .cancel-button");
ok(content.isVisible(basicCardCancelButton),
"Cancel button is visible on the basic card page");
field = content.document.getElementById("cc-number");
- ok(field.value, PTU.BasicCards.JohnDoe["cc-number"], "Values in the form are preserved");
+ is(field.value, PTU.BasicCards.JohnDoe["cc-number"], "Values in the form are preserved");
});
info("Closing the payment dialog");
spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel);
await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed");
cleanupFormAutofillStorage();
});
--- a/browser/components/payments/test/mochitest/test_address_form.html
+++ b/browser/components/payments/test/mochitest/test_address_form.html
@@ -248,17 +248,17 @@ add_task(async function test_edit() {
},
});
await asyncElementRendered();
is(form.saveButton.textContent, "Update", "Check label");
checkAddressForm(form, minimalAddress);
ok(form.saveButton.disabled, "Save button should be disabled if only the name is filled");
ok(form.querySelectorAll(":-moz-ui-invalid").length > 3,
"Check fields are visibly invalid on an 'edit' form with only the given-name filled");
- ok(form.querySelectorAll("#country:-moz-ui-invalid").length, 1,
+ is(form.querySelectorAll("#country:-moz-ui-invalid").length, 1,
"Check that the country `select` is marked as invalid");
info("change to no selected address");
await form.requestStore.setState({
page: {
id: "address-page",
},
"address-page": {
--- a/browser/components/payments/test/mochitest/test_payment_method_picker.html
+++ b/browser/components/payments/test/mochitest/test_payment_method_picker.html
@@ -177,17 +177,17 @@ add_task(async function test_change_sele
let stateChangePromise = promiseStateChange(picker1.requestStore);
// Type in the security code field
picker1.securityCodeInput.querySelector("input").focus();
sendString("836");
sendKey("Tab");
let state = await stateChangePromise;
- ok(state.selectedPaymentCardSecurityCode, "836", "Check security code in state");
+ is(state.selectedPaymentCardSecurityCode, "836", "Check security code in state");
});
add_task(async function test_delete() {
await picker1.requestStore.setState({
savedBasicCards: {
// 48bnds6854t was deleted
"68gjdh354j": {
"cc-exp": "2017-08",
--- a/browser/components/payments/test/mochitest/test_shipping_option_picker.html
+++ b/browser/components/payments/test/mochitest/test_shipping_option_picker.html
@@ -32,18 +32,18 @@ import "../../res/containers/shipping-op
let picker1 = document.getElementById("picker1");
add_task(async function test_empty() {
ok(picker1, "Check picker1 exists");
let state = picker1.requestStore.getState();
let {shippingOptions} = state && state.request && state.request.paymentDetails;
is(Object.keys(shippingOptions).length, 0, "Check empty initial state");
is(picker1.dropdown.popupBox.children.length, 0, "Check dropdown is empty");
- ok(picker1.editLink.hidden, true, "Check that picker edit link is always hidden");
- ok(picker1.addLink.hidden, true, "Check that picker add link is always hidden");
+ ok(picker1.editLink.hidden, "Check that picker edit link is always hidden");
+ ok(picker1.addLink.hidden, "Check that picker add link is always hidden");
});
add_task(async function test_initialSet() {
picker1.requestStore.setState({
request: {
paymentDetails: {
shippingOptions: [
{
--- a/browser/components/places/tests/browser/browser_bookmarksProperties.js
+++ b/browser/components/places/tests/browser/browser_bookmarksProperties.js
@@ -137,17 +137,17 @@ gTests.push({
finish() {
SidebarUI.hide();
},
async cleanup() {
// Check tags have not changed.
var tags = PlacesUtils.tagging.getTagsForURI(Services.io.newURI(TEST_URL));
- Assert.ok(tags[0], "testTag", "Tag on node has not changed");
+ Assert.equal(tags[0], "testTag", "Tag on node has not changed");
// Cleanup.
PlacesUtils.tagging.untagURI(Services.io.newURI(TEST_URL), ["testTag"]);
await PlacesUtils.bookmarks.remove(this._bookmark);
let bm = await PlacesUtils.bookmarks.fetch(this._bookmark.guid);
Assert.ok(!bm, "should have been removed");
},
});
--- a/browser/components/places/tests/browser/browser_history_sidebar_search.js
+++ b/browser/components/places/tests/browser/browser_history_sidebar_search.js
@@ -55,10 +55,10 @@ function check_tree_order(tree, pages, a
for (let i = 0; i < treeView.rowCount; i++) {
let node = treeView.nodeForTreeIndex(i);
// We could inherit delayed visits from previous tests, skip them.
if (!pages.includes(node.uri))
continue;
is(node.uri, pages[i], "Node is in correct position based on its visit date");
found++;
}
- ok(found, pages.length + aNumberOfRowsDelta, "Found all expected results");
+ is(found, pages.length + aNumberOfRowsDelta, "Found all expected results");
}
--- a/browser/components/preferences/in-content/tests/browser_homepages_use_bookmark.js
+++ b/browser/components/preferences/in-content/tests/browser_homepages_use_bookmark.js
@@ -1,22 +1,22 @@
/* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
-const TEST_URL = "http://example.com";
+const TEST_URL = "http://example.com/";
add_task(async function setup() {
let oldHomepagePref = Services.prefs.getCharPref("browser.startup.homepage");
await openPreferencesViaOpenPreferencesAPI("paneHome", {leaveOpen: true});
- Assert.ok(gBrowser.currentURI.spec, "about:preferences#home",
- "#home should be in the URI for about:preferences");
+ Assert.equal(gBrowser.currentURI.spec, "about:preferences#home",
+ "#home should be in the URI for about:preferences");
registerCleanupFunction(async () => {
Services.prefs.setCharPref("browser.startup.homepage", oldHomepagePref);
BrowserTestUtils.removeTab(gBrowser.selectedTab);
await PlacesUtils.bookmarks.eraseEverything();
});
});
@@ -37,11 +37,11 @@ add_task(async function testSetHomepageF
doc.getElementById("useBookmarkBtn").click();
let dialog = await promiseSubDialogLoaded;
dialog.document.getElementById("bookmarks").selectItems([bm.guid]);
dialog.document.documentElement.getButton("accept").click();
- Assert.ok(Services.prefs.getCharPref("browser.startup.homepage"), TEST_URL,
- "Should have set the homepage to the same as the bookmark.");
+ Assert.equal(Services.prefs.getCharPref("browser.startup.homepage"), TEST_URL,
+ "Should have set the homepage to the same as the bookmark.");
});
--- a/browser/components/search/test/browser_oneOffContextMenu_setDefault.js
+++ b/browser/components/search/test/browser_oneOffContextMenu_setDefault.js
@@ -106,17 +106,17 @@ add_task(async function test_urlBarChang
* has resulted in the test engine now being the current engine.
*
* @return {Promise} Resolved once the test engine is set as the current engine.
*/
function promiseCurrentEngineChanged() {
return new Promise(resolve => {
function observer(aSub, aTopic, aData) {
if (aData == "engine-current") {
- Assert.ok(Services.search.currentEngine.name, TEST_ENGINE_NAME, "currentEngine set");
+ Assert.equal(Services.search.currentEngine.name, TEST_ENGINE_NAME, "currentEngine set");
Services.obs.removeObserver(observer, "browser-search-engine-modified");
resolve();
}
}
Services.obs.addObserver(observer, "browser-search-engine-modified");
});
}
--- a/browser/components/sessionstore/ContentRestore.jsm
+++ b/browser/components/sessionstore/ContentRestore.jsm
@@ -3,57 +3,29 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
var EXPORTED_SYMBOLS = ["ContentRestore"];
ChromeUtils.import("resource://gre/modules/Services.jsm", this);
-ChromeUtils.defineModuleGetter(this, "DocShellCapabilities",
- "resource:///modules/sessionstore/DocShellCapabilities.jsm");
ChromeUtils.defineModuleGetter(this, "FormData",
"resource://gre/modules/FormData.jsm");
-ChromeUtils.defineModuleGetter(this, "ScrollPosition",
- "resource://gre/modules/ScrollPosition.jsm");
ChromeUtils.defineModuleGetter(this, "SessionHistory",
"resource://gre/modules/sessionstore/SessionHistory.jsm");
ChromeUtils.defineModuleGetter(this, "SessionStorage",
"resource:///modules/sessionstore/SessionStorage.jsm");
ChromeUtils.defineModuleGetter(this, "Utils",
"resource://gre/modules/sessionstore/Utils.jsm");
const ssu = Cc["@mozilla.org/browser/sessionstore/utils;1"]
.getService(Ci.nsISessionStoreUtils);
/**
- * Restores frame tree |data|, starting at the given root |frame|. As the
- * function recurses into descendant frames it will call cb(frame, data) for
- * each frame it encounters, starting with the given root.
- */
-function restoreFrameTreeData(frame, data, cb) {
- // Restore data for the root frame.
- // The callback can abort by returning false.
- if (cb(frame, data) === false) {
- return;
- }
-
- if (!data.hasOwnProperty("children")) {
- return;
- }
-
- // Recurse into child frames.
- ssu.forEachNonDynamicChildFrame(frame, (subframe, index) => {
- if (data.children[index]) {
- restoreFrameTreeData(subframe, data.children[index], cb);
- }
- });
-}
-
-/**
* This module implements the content side of session restoration. The chrome
* side is handled by SessionStore.jsm. The functions in this module are called
* by content-sessionStore.js based on messages received from SessionStore.jsm
* (or, in one case, based on a "load" event). Each tab has its own
* ContentRestore instance, constructed by content-sessionStore.js.
*
* In a typical restore, content-sessionStore.js will call the following based
* on messages and events it receives:
@@ -163,18 +135,17 @@ ContentRestoreInternal.prototype = {
this.restoreTabContent(null, false, callbacks.onLoadFinished);
});
webNavigation.sessionHistory.legacySHistory.addSHistoryListener(listener);
this._historyListener = listener;
// Make sure to reset the capabilities and attributes in case this tab gets
// reused.
- let disallow = new Set(tabData.disallow && tabData.disallow.split(","));
- DocShellCapabilities.restore(this.docShell, disallow);
+ ssu.restoreDocShellCapabilities(this.docShell, tabData.disallow);
if (tabData.storage && this.docShell instanceof Ci.nsIDocShell) {
SessionStorage.restore(this.docShell, tabData.storage);
delete tabData.storage;
}
// Add a progress listener to correctly handle browser.loadURI()
// calls from foreign code.
@@ -312,27 +283,27 @@ ContentRestoreInternal.prototype = {
return;
}
let {formdata, scrollPositions} = this._restoringDocument;
this._restoringDocument = null;
let window = this.docShell.domWindow;
// Restore form data.
- restoreFrameTreeData(window, formdata, (frame, data) => {
+ Utils.restoreFrameTreeData(window, formdata, (frame, data) => {
// restore() will return false, and thus abort restoration for the
// current |frame| and its descendants, if |data.url| is given but
// doesn't match the loaded document's URL.
return FormData.restore(frame, data);
});
// Restore scroll data.
- restoreFrameTreeData(window, scrollPositions, (frame, data) => {
+ Utils.restoreFrameTreeData(window, scrollPositions, (frame, data) => {
if (data.scroll) {
- ScrollPosition.restore(frame, data.scroll);
+ ssu.restoreScrollPosition(frame, data.scroll);
}
});
},
/**
* Cancel an ongoing restore. This function can be called any time between
* restoreHistory and restoreDocument.
*
--- a/browser/components/sessionstore/ContentSessionStore.jsm
+++ b/browser/components/sessionstore/ContentSessionStore.jsm
@@ -17,20 +17,16 @@ function debug(msg) {
Services.console.logStringMessage("SessionStoreContent: " + msg);
}
ChromeUtils.defineModuleGetter(this, "FormData",
"resource://gre/modules/FormData.jsm");
ChromeUtils.defineModuleGetter(this, "ContentRestore",
"resource:///modules/sessionstore/ContentRestore.jsm");
-ChromeUtils.defineModuleGetter(this, "DocShellCapabilities",
- "resource:///modules/sessionstore/DocShellCapabilities.jsm");
-ChromeUtils.defineModuleGetter(this, "ScrollPosition",
- "resource://gre/modules/ScrollPosition.jsm");
ChromeUtils.defineModuleGetter(this, "SessionHistory",
"resource://gre/modules/sessionstore/SessionHistory.jsm");
ChromeUtils.defineModuleGetter(this, "SessionStorage",
"resource:///modules/sessionstore/SessionStorage.jsm");
ChromeUtils.defineModuleGetter(this, "Utils",
"resource://gre/modules/sessionstore/Utils.jsm");
const ssu = Cc["@mozilla.org/browser/sessionstore/utils;1"]
@@ -348,17 +344,17 @@ class ScrollPositionListener extends Han
this.messageQueue.push("scroll", () => this.collect());
}
onPageLoadStarted() {
this.messageQueue.push("scroll", () => null);
}
collect() {
- return mapFrameTree(this.mm, ScrollPosition.collect);
+ return mapFrameTree(this.mm, ssu.collectScrollPosition.bind(ssu));
}
}
/**
* Listens for changes to input elements. Whenever the value of an input
* element changes we will re-collect data for the current frame tree and send
* a message to the parent process.
*
@@ -413,19 +409,17 @@ class DocShellCapabilitiesListener exten
* that have just been collected. If nothing changed we won't send a message.
*/
this._latestCapabilities = "";
this.stateChangeNotifier.addObserver(this);
}
onPageLoadStarted() {
- // The order of docShell capabilities cannot change while we're running
- // so calling join() without sorting before is totally sufficient.
- let caps = DocShellCapabilities.collect(this.mm.docShell).join(",");
+ let caps = ssu.collectDocShellCapabilities(this.mm.docShell);
// Send new data only when the capability list changes.
if (caps != this._latestCapabilities) {
this._latestCapabilities = caps;
this.messageQueue.push("disallow", () => caps || null);
}
}
}
deleted file mode 100644
--- a/browser/components/sessionstore/DocShellCapabilities.jsm
+++ /dev/null
@@ -1,53 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
-* License, v. 2.0. If a copy of the MPL was not distributed with this file,
-* You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-var EXPORTED_SYMBOLS = ["DocShellCapabilities"];
-
-/**
- * The external API exported by this module.
- */
-var DocShellCapabilities = Object.freeze({
- collect(docShell) {
- return DocShellCapabilitiesInternal.collect(docShell);
- },
-
- restore(docShell, disallow) {
- return DocShellCapabilitiesInternal.restore(docShell, disallow);
- },
-});
-
-const CAPABILITIES_TO_IGNORE = new Set(["Javascript"]);
-
-/**
- * Internal functionality to save and restore the docShell.allow* properties.
- */
-var DocShellCapabilitiesInternal = {
- // List of docShell capabilities to (re)store. These are automatically
- // retrieved from a given docShell if not already collected before.
- // This is made so they're automatically in sync with all nsIDocShell.allow*
- // properties.
- caps: null,
-
- allCapabilities(docShell) {
- if (!this.caps) {
- let keys = Object.keys(docShell);
- this.caps = keys.filter(k => k.startsWith("allow")).map(k => k.slice(5));
- }
- return this.caps;
- },
-
- collect(docShell) {
- let caps = this.allCapabilities(docShell);
- return caps.filter(cap => !docShell["allow" + cap]
- && !CAPABILITIES_TO_IGNORE.has(cap));
- },
-
- restore(docShell, disallow) {
- let caps = this.allCapabilities(docShell);
- for (let cap of caps)
- docShell["allow" + cap] = !disallow.has(cap);
- },
-};
--- a/browser/components/sessionstore/moz.build
+++ b/browser/components/sessionstore/moz.build
@@ -7,17 +7,16 @@
XPCSHELL_TESTS_MANIFESTS += ['test/unit/xpcshell.ini']
BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
JAR_MANIFESTS += ['jar.mn']
EXTRA_JS_MODULES.sessionstore = [
'ContentRestore.jsm',
'ContentSessionStore.jsm',
- 'DocShellCapabilities.jsm',
'GlobalState.jsm',
'RecentlyClosedTabsAndWindowsMenuUtils.jsm',
'RunState.jsm',
'SessionCookies.jsm',
'SessionFile.jsm',
'SessionMigration.jsm',
'SessionSaver.jsm',
'SessionStartup.jsm',
--- a/browser/modules/test/browser/browser_PermissionUI.js
+++ b/browser/modules/test/browser/browser_PermissionUI.js
@@ -432,20 +432,23 @@ add_task(async function test_window_swap
let shownPromise =
BrowserTestUtils.waitForEvent(PopupNotifications.panel, "popupshown");
TestPrompt.prompt();
await shownPromise;
let newWindowOpened = BrowserTestUtils.waitForNewWindow();
gBrowser.replaceTabWithWindow(gBrowser.selectedTab);
let newWindow = await newWindowOpened;
- shownPromise =
- BrowserTestUtils.waitForEvent(newWindow.PopupNotifications.panel, "popupshown");
- TestPrompt.prompt();
- await shownPromise;
+ // We may have already opened the panel, because it was open before we moved the tab.
+ if (newWindow.PopupNotifications.panel.state != "open") {
+ shownPromise =
+ BrowserTestUtils.waitForEvent(newWindow.PopupNotifications.panel, "popupshown");
+ TestPrompt.prompt();
+ await shownPromise;
+ }
let notification =
newWindow.PopupNotifications.getNotification(kTestNotificationID,
newWindow.gBrowser.selectedBrowser);
Assert.ok(notification, "Should have gotten the notification");
Assert.equal(notification.message, kTestMessage,
"Should be showing the right message");
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -821,31 +821,31 @@ toolbarbutton[constrain-size="true"][cui
visibility: collapse;
}
#PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
display: none;
}
.panel-banner-item {
- color: black;
+ color: black !important /* !important overrides the toolbarbutton:hover default style on Linux */;
background-color: hsla(96,65%,75%,.5);
}
.panel-banner-item:not([disabled]):hover {
background-color: hsla(96,65%,75%,.8);
}
.panel-banner-item:not([disabled]):hover:active {
background-color: hsl(96,65%,75%);
}
:root[lwt-popup-brighttext] .panel-banner-item:not([disabled]) {
background-color: rgba(48,230,11,.1);
- color: #F9F9FA;
+ color: #F9F9FA !important;
}
:root[lwt-popup-brighttext] .panel-banner-item:not([disabled]):hover {
background-color: rgba(48,230,11,.15);
}
:root[lwt-popup-brighttext] .panel-banner-item:not([disabled]):active {
background-color: rgba(48,230,11,.2);
--- a/caps/tests/mochitest/test_bug470804.html
+++ b/caps/tests/mochitest/test_bug470804.html
@@ -29,13 +29,13 @@ isnot(principal, null, "Should have a no
is(secMan.isSystemPrincipal(principal), false,
"Shouldn't have system principal here");
try {
secMan.checkLoadURIWithPrincipal(principal, null,
nsIScriptSecurityManager.STANDARD);
} catch (e) {
// throwing is fine, it's just crashing that's bad
}
-ok(true, "Survival", "We should get here without crashing");
+ok(true, "Survival: we should get here without crashing");
</script>
</pre>
</body>
</html>
--- a/devtools/client/aboutdebugging-new/aboutdebugging.css
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.css
@@ -8,16 +8,17 @@
@import "resource://devtools/client/themes/variables.css";
@import "resource://devtools/client/aboutdebugging-new/src/base.css";
/*
* Components
*/
@import "resource://devtools/client/aboutdebugging-new/src/components/App.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css";
+@import "resource://devtools/client/aboutdebugging-new/src/components/RuntimePage.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.css";
--- a/devtools/client/aboutdebugging-new/src/actions/debug-targets.js
+++ b/devtools/client/aboutdebugging-new/src/actions/debug-targets.js
@@ -31,41 +31,41 @@ const {
REQUEST_WORKERS_START,
REQUEST_WORKERS_SUCCESS,
RUNTIMES,
} = require("../constants");
function inspectDebugTarget(type, id) {
return async (_, getState) => {
const runtime = getCurrentRuntime(getState().runtimes);
- const { connection, type: runtimeType } = runtime;
+ const { runtimeDetails, type: runtimeType } = runtime;
switch (type) {
case DEBUG_TARGETS.TAB: {
// Open tab debugger in new window.
if (runtimeType === RUNTIMES.NETWORK || runtimeType === RUNTIMES.USB) {
- const { host, port } = connection.transportDetails;
+ const { host, port } = runtimeDetails.transportDetails;
window.open(`about:devtools-toolbox?type=tab&id=${id}` +
`&host=${host}&port=${port}`);
} else if (runtimeType === RUNTIMES.THIS_FIREFOX) {
window.open(`about:devtools-toolbox?type=tab&id=${id}`);
}
break;
}
case DEBUG_TARGETS.EXTENSION: {
if (runtimeType === RUNTIMES.NETWORK) {
- await debugRemoteAddon(id, connection.client);
+ await debugRemoteAddon(id, runtimeDetails.client);
} else if (runtimeType === RUNTIMES.THIS_FIREFOX) {
debugLocalAddon(id);
}
break;
}
case DEBUG_TARGETS.WORKER: {
// Open worker toolbox in new window.
- gDevToolsBrowser.openWorkerToolbox(connection.client, id);
+ gDevToolsBrowser.openWorkerToolbox(runtimeDetails.client, id);
break;
}
default: {
console.error("Failed to inspect the debug target of " +
`type: ${ type } id: ${ id }`);
}
}
--- a/devtools/client/aboutdebugging-new/src/actions/runtimes.js
+++ b/devtools/client/aboutdebugging-new/src/actions/runtimes.js
@@ -6,32 +6,37 @@
const { ADB } = require("devtools/shared/adb/adb");
const { DebuggerClient } = require("devtools/shared/client/debugger-client");
const { DebuggerServer } = require("devtools/server/main");
const Actions = require("./index");
const {
+ getCurrentRuntime,
findRuntimeById,
} = require("../modules/runtimes-state-helper");
const { isSupportedDebugTarget } = require("../modules/debug-target-support");
const {
CONNECT_RUNTIME_FAILURE,
CONNECT_RUNTIME_START,
CONNECT_RUNTIME_SUCCESS,
DEBUG_TARGETS,
DISCONNECT_RUNTIME_FAILURE,
DISCONNECT_RUNTIME_START,
DISCONNECT_RUNTIME_SUCCESS,
+ RUNTIME_PREFERENCE,
RUNTIMES,
UNWATCH_RUNTIME_FAILURE,
UNWATCH_RUNTIME_START,
UNWATCH_RUNTIME_SUCCESS,
+ UPDATE_CONNECTION_PROMPT_SETTING_FAILURE,
+ UPDATE_CONNECTION_PROMPT_SETTING_START,
+ UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS,
USB_RUNTIMES_UPDATED,
WATCH_RUNTIME_FAILURE,
WATCH_RUNTIME_START,
WATCH_RUNTIME_SUCCESS,
} = require("../constants");
async function createLocalClient() {
DebuggerServer.init();
@@ -90,38 +95,41 @@ async function getRuntimeInfo(runtime, c
function connectRuntime(id) {
return async (dispatch, getState) => {
dispatch({ type: CONNECT_RUNTIME_START });
try {
const runtime = findRuntimeById(id, getState().runtimes);
const { client, transportDetails } = await createClientForRuntime(runtime);
const info = await getRuntimeInfo(runtime, client);
- const connection = { client, info, transportDetails };
+ const preferenceFront = await client.mainRoot.getFront("preference");
+ const connectionPromptEnabled =
+ await preferenceFront.getBoolPref(RUNTIME_PREFERENCE.CONNECTION_PROMPT);
+ const runtimeDetails = { connectionPromptEnabled, client, info, transportDetails };
dispatch({
type: CONNECT_RUNTIME_SUCCESS,
runtime: {
id,
- connection,
+ runtimeDetails,
type: runtime.type,
},
});
} catch (e) {
dispatch({ type: CONNECT_RUNTIME_FAILURE, error: e.message });
}
};
}
function disconnectRuntime(id) {
return async (dispatch, getState) => {
dispatch({ type: DISCONNECT_RUNTIME_START });
try {
const runtime = findRuntimeById(id, getState().runtimes);
- const client = runtime.connection.client;
+ const client = runtime.runtimeDetails.client;
await client.close();
DebuggerServer.destroy();
dispatch({
type: DISCONNECT_RUNTIME_SUCCESS,
runtime: {
id,
@@ -129,16 +137,38 @@ function disconnectRuntime(id) {
},
});
} catch (e) {
dispatch({ type: DISCONNECT_RUNTIME_FAILURE, error: e.message });
}
};
}
+function updateConnectionPromptSetting(connectionPromptEnabled) {
+ return async (dispatch, getState) => {
+ dispatch({ type: UPDATE_CONNECTION_PROMPT_SETTING_START });
+ try {
+ const runtime = getCurrentRuntime(getState().runtimes);
+ const client = runtime.runtimeDetails.client;
+ const preferenceFront = await client.mainRoot.getFront("preference");
+ await preferenceFront.setBoolPref(RUNTIME_PREFERENCE.CONNECTION_PROMPT,
+ connectionPromptEnabled);
+ // Re-get actual value from the runtime.
+ connectionPromptEnabled =
+ await preferenceFront.getBoolPref(RUNTIME_PREFERENCE.CONNECTION_PROMPT);
+
+ dispatch({ type: UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS,
+ runtime, connectionPromptEnabled });
+ } catch (e) {
+ dispatch({ type: UPDATE_CONNECTION_PROMPT_SETTING_FAILURE,
+ error: e.message });
+ }
+ };
+}
+
function watchRuntime(id) {
return async (dispatch, getState) => {
dispatch({ type: WATCH_RUNTIME_START });
try {
if (id === RUNTIMES.THIS_FIREFOX) {
// THIS_FIREFOX connects and disconnects on the fly when opening the page.
await dispatch(connectRuntime(RUNTIMES.THIS_FIREFOX));
@@ -187,11 +217,12 @@ function unwatchRuntime(id) {
function updateUSBRuntimes(runtimes) {
return { type: USB_RUNTIMES_UPDATED, runtimes };
}
module.exports = {
connectRuntime,
disconnectRuntime,
unwatchRuntime,
+ updateConnectionPromptSetting,
updateUSBRuntimes,
watchRuntime,
};
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/ConnectionPromptSetting.js
@@ -0,0 +1,51 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+const FluentReact = require("devtools/client/shared/vendor/fluent-react");
+const Localized = createFactory(FluentReact.Localized);
+
+const Actions = require("../actions/index");
+
+class ConnectionPromptSetting extends PureComponent {
+ static get propTypes() {
+ return {
+ dispatch: PropTypes.func.isRequired,
+ connectionPromptEnabled: PropTypes.bool.isRequired,
+ };
+ }
+
+ onToggleClick() {
+ const { connectionPromptEnabled, dispatch } = this.props;
+ dispatch(Actions.updateConnectionPromptSetting(!connectionPromptEnabled));
+ }
+
+ render() {
+ const { connectionPromptEnabled } = this.props;
+
+ const localizedState = connectionPromptEnabled
+ ? "about-debugging-connection-prompt-disable-button"
+ : "about-debugging-connection-prompt-enable-button";
+
+ return Localized(
+ {
+ id: localizedState,
+ },
+ dom.button(
+ {
+ className: "default-button js-connection-prompt-toggle-button",
+ onClick: () => this.onToggleClick(),
+ },
+ localizedState
+ )
+ );
+ }
+}
+
+module.exports = ConnectionPromptSetting;
--- a/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css
@@ -3,17 +3,16 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* NOTE: refactor these two rules into a more generic component if we ever need
a main heading with an icon */
.runtime-info {
align-items: center;
display: flex;
- margin-block-end: 40px;
white-space: nowrap;
}
.runtime-info__icon {
height: 64px;
margin-inline-end: 12px;
width: 64px;
}
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimePage.css
@@ -0,0 +1,8 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.connection-prompt-setting {
+ margin-block-end: var(--base-distance);
+ text-align: right;
+}
--- a/devtools/client/aboutdebugging-new/src/components/RuntimePage.js
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimePage.js
@@ -7,46 +7,62 @@
const { connect } = require("devtools/client/shared/vendor/react-redux");
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
const Localized = createFactory(FluentReact.Localized);
+const ConnectionPromptSetting = createFactory(require("./ConnectionPromptSetting"));
const DebugTargetPane = createFactory(require("./debugtarget/DebugTargetPane"));
const ExtensionDetail = createFactory(require("./debugtarget/ExtensionDetail"));
const InspectAction = createFactory(require("./debugtarget/InspectAction"));
const RuntimeInfo = createFactory(require("./RuntimeInfo"));
const ServiceWorkerAction = createFactory(require("./debugtarget/ServiceWorkerAction"));
const TabDetail = createFactory(require("./debugtarget/TabDetail"));
const TemporaryExtensionAction = createFactory(require("./debugtarget/TemporaryExtensionAction"));
const TemporaryExtensionInstaller =
createFactory(require("./debugtarget/TemporaryExtensionInstaller"));
const WorkerDetail = createFactory(require("./debugtarget/WorkerDetail"));
const { DEBUG_TARGET_PANE } = require("../constants");
-const { getCurrentRuntimeInfo } = require("../modules/runtimes-state-helper");
+const {
+ getCurrentConnectionPromptSetting,
+ getCurrentRuntimeInfo,
+} = require("../modules/runtimes-state-helper");
const { isSupportedDebugTargetPane } = require("../modules/debug-target-support");
class RuntimePage extends PureComponent {
static get propTypes() {
return {
collapsibilities: PropTypes.object.isRequired,
+ connectionPromptEnabled: PropTypes.bool.isRequired,
dispatch: PropTypes.func.isRequired,
installedExtensions: PropTypes.arrayOf(PropTypes.object).isRequired,
otherWorkers: PropTypes.arrayOf(PropTypes.object).isRequired,
runtimeInfo: PropTypes.object,
serviceWorkers: PropTypes.arrayOf(PropTypes.object).isRequired,
sharedWorkers: PropTypes.arrayOf(PropTypes.object).isRequired,
tabs: PropTypes.arrayOf(PropTypes.object).isRequired,
temporaryExtensions: PropTypes.arrayOf(PropTypes.object).isRequired,
};
}
+ renderConnectionPromptSetting() {
+ const { connectionPromptEnabled, dispatch } = this.props;
+
+ return dom.div(
+ {
+ className: "connection-prompt-setting",
+ },
+ ConnectionPromptSetting({ connectionPromptEnabled, dispatch }),
+ );
+ }
+
renderDebugTargetPane(name, targets, actionComponent,
detailComponent, paneKey, localizationId) {
const { collapsibilities, dispatch, runtimeInfo } = this.props;
if (!isSupportedDebugTargetPane(runtimeInfo.type, paneKey)) {
return null;
}
@@ -85,16 +101,17 @@ class RuntimePage extends PureComponent
return null;
}
return dom.article(
{
className: "page js-runtime-page",
},
RuntimeInfo(runtimeInfo),
+ this.renderConnectionPromptSetting(),
isSupportedDebugTargetPane(runtimeInfo.type, DEBUG_TARGET_PANE.TEMPORARY_EXTENSION)
? TemporaryExtensionInstaller({ dispatch })
: null,
this.renderDebugTargetPane("Temporary Extensions",
temporaryExtensions,
TemporaryExtensionAction,
ExtensionDetail,
DEBUG_TARGET_PANE.TEMPORARY_EXTENSION,
@@ -130,16 +147,17 @@ class RuntimePage extends PureComponent
DEBUG_TARGET_PANE.OTHER_WORKER,
"about-debugging-runtime-other-workers"),
);
}
}
const mapStateToProps = state => {
return {
+ connectionPromptEnabled: getCurrentConnectionPromptSetting(state.runtimes),
collapsibilities: state.ui.debugTargetCollapsibilities,
installedExtensions: state.debugTargets.installedExtensions,
otherWorkers: state.debugTargets.otherWorkers,
runtimeInfo: getCurrentRuntimeInfo(state.runtimes),
serviceWorkers: state.debugTargets.serviceWorkers,
sharedWorkers: state.debugTargets.sharedWorkers,
tabs: state.debugTargets.tabs,
temporaryExtensions: state.debugTargets.temporaryExtensions,
--- a/devtools/client/aboutdebugging-new/src/components/moz.build
+++ b/devtools/client/aboutdebugging-new/src/components/moz.build
@@ -6,12 +6,14 @@ DIRS += [
'connect',
'debugtarget',
'sidebar',
]
DevToolsModules(
'App.css',
'App.js',
+ 'ConnectionPromptSetting.js',
'RuntimeInfo.css',
'RuntimeInfo.js',
+ 'RuntimePage.css',
'RuntimePage.js',
)
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
@@ -71,24 +71,24 @@ class Sidebar extends PureComponent {
];
}
renderSidebarItems(icon, runtimes) {
const { dispatch, selectedPage } = this.props;
return runtimes.map(runtime => {
const pageId = runtime.type + "-" + runtime.id;
- const runtimeHasConnection = !!runtime.connection;
+ const runtimeHasDetails = !!runtime.runtimeDetails;
return SidebarRuntimeItem({
id: pageId,
deviceName: runtime.extra.deviceName,
dispatch,
icon,
- isConnected: runtimeHasConnection,
+ isConnected: runtimeHasDetails,
isSelected: selectedPage === pageId,
key: pageId,
name: runtime.name,
runtimeId: runtime.id,
});
});
}
--- a/devtools/client/aboutdebugging-new/src/constants.js
+++ b/devtools/client/aboutdebugging-new/src/constants.js
@@ -28,16 +28,19 @@ const actionTypes = {
REQUEST_TABS_START: "REQUEST_TABS_START",
REQUEST_TABS_SUCCESS: "REQUEST_TABS_SUCCESS",
REQUEST_WORKERS_FAILURE: "REQUEST_WORKERS_FAILURE",
REQUEST_WORKERS_START: "REQUEST_WORKERS_START",
REQUEST_WORKERS_SUCCESS: "REQUEST_WORKERS_SUCCESS",
UNWATCH_RUNTIME_FAILURE: "UNWATCH_RUNTIME_FAILURE",
UNWATCH_RUNTIME_START: "UNWATCH_RUNTIME_START",
UNWATCH_RUNTIME_SUCCESS: "UNWATCH_RUNTIME_SUCCESS",
+ UPDATE_CONNECTION_PROMPT_SETTING_FAILURE: "UPDATE_CONNECTION_PROMPT_SETTING_FAILURE",
+ UPDATE_CONNECTION_PROMPT_SETTING_START: "UPDATE_CONNECTION_PROMPT_SETTING_START",
+ UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS: "UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS",
USB_RUNTIMES_UPDATED: "USB_RUNTIMES_UPDATED",
WATCH_RUNTIME_FAILURE: "WATCH_RUNTIME_FAILURE",
WATCH_RUNTIME_START: "WATCH_RUNTIME_START",
WATCH_RUNTIME_SUCCESS: "WATCH_RUNTIME_SUCCESS",
};
const DEBUG_TARGETS = {
EXTENSION: "EXTENSION",
@@ -54,16 +57,20 @@ const DEBUG_TARGET_PANE = {
TEMPORARY_EXTENSION: "temporaryExtension",
};
const PAGES = {
THIS_FIREFOX: "this-firefox",
CONNECT: "connect",
};
+const RUNTIME_PREFERENCE = {
+ CONNECTION_PROMPT: "devtools.debugger.prompt-connection",
+};
+
const RUNTIMES = {
NETWORK: "network",
THIS_FIREFOX: "this-firefox",
USB: "usb",
};
const SERVICE_WORKER_FETCH_STATES = {
LISTENING: "LISTENING",
@@ -82,13 +89,14 @@ const USB_STATES = {
UPDATING_USB: "UPDATING_USB",
};
// flatten constants
module.exports = Object.assign({}, {
DEBUG_TARGETS,
DEBUG_TARGET_PANE,
PAGES,
+ RUNTIME_PREFERENCE,
RUNTIMES,
SERVICE_WORKER_FETCH_STATES,
SERVICE_WORKER_STATUSES,
USB_STATES,
}, actionTypes);
--- a/devtools/client/aboutdebugging-new/src/middleware/debug-target-listener.js
+++ b/devtools/client/aboutdebugging-new/src/middleware/debug-target-listener.js
@@ -49,28 +49,28 @@ function debugTargetListenerMiddleware(s
const onWorkersUpdated = () => {
store.dispatch(Actions.requestWorkers());
};
return next => action => {
switch (action.type) {
case WATCH_RUNTIME_SUCCESS: {
- const { client } = action.runtime.connection;
+ const { client } = action.runtime.runtimeDetails;
client.addListener("tabListChanged", onTabsUpdated);
AddonManager.addAddonListener(extensionsListener);
client.addListener("workerListChanged", onWorkersUpdated);
client.addListener("serviceWorkerRegistrationListChanged", onWorkersUpdated);
client.addListener("processListChanged", onWorkersUpdated);
client.addListener("registration-changed", onWorkersUpdated);
client.addListener("push-subscription-modified", onWorkersUpdated);
break;
}
case UNWATCH_RUNTIME_START: {
- const { client } = action.runtime.connection;
+ const { client } = action.runtime.runtimeDetails;
client.removeListener("tabListChanged", onTabsUpdated);
AddonManager.removeAddonListener(extensionsListener);
client.removeListener("workerListChanged", onWorkersUpdated);
client.removeListener("serviceWorkerRegistrationListChanged", onWorkersUpdated);
client.removeListener("processListChanged", onWorkersUpdated);
client.removeListener("registration-changed", onWorkersUpdated);
client.removeListener("push-subscription-modified", onWorkersUpdated);
break;
--- a/devtools/client/aboutdebugging-new/src/modules/runtimes-state-helper.js
+++ b/devtools/client/aboutdebugging-new/src/modules/runtimes-state-helper.js
@@ -6,33 +6,39 @@
function getCurrentRuntime(runtimesState) {
const selectedRuntimeId = runtimesState.selectedRuntimeId;
return findRuntimeById(selectedRuntimeId, runtimesState);
}
exports.getCurrentRuntime = getCurrentRuntime;
function getCurrentClient(runtimesState) {
- const connection = getCurrentConnection(runtimesState);
- return connection ? connection.client : null;
+ const runtimeDetails = getCurrentRuntimeDetails(runtimesState);
+ return runtimeDetails ? runtimeDetails.client : null;
}
exports.getCurrentClient = getCurrentClient;
function getCurrentRuntimeInfo(runtimesState) {
- const connection = getCurrentConnection(runtimesState);
- return connection ? connection.info : null;
+ const runtimeDetails = getCurrentRuntimeDetails(runtimesState);
+ return runtimeDetails ? runtimeDetails.info : null;
}
exports.getCurrentRuntimeInfo = getCurrentRuntimeInfo;
+function getCurrentConnectionPromptSetting(runtimesState) {
+ const runtimeDetails = getCurrentRuntimeDetails(runtimesState);
+ return runtimeDetails ? runtimeDetails.connectionPromptEnabled : false;
+}
+exports.getCurrentConnectionPromptSetting = getCurrentConnectionPromptSetting;
+
function findRuntimeById(id, runtimesState) {
const allRuntimes = [
...runtimesState.networkRuntimes,
...runtimesState.thisFirefoxRuntimes,
...runtimesState.usbRuntimes,
];
return allRuntimes.find(r => r.id === id);
}
exports.findRuntimeById = findRuntimeById;
-function getCurrentConnection(runtimesState) {
+function getCurrentRuntimeDetails(runtimesState) {
const runtime = getCurrentRuntime(runtimesState);
- return runtime ? runtime.connection : null;
+ return runtime ? runtime.runtimeDetails : null;
}
--- a/devtools/client/aboutdebugging-new/src/reducers/runtimes-state.js
+++ b/devtools/client/aboutdebugging-new/src/reducers/runtimes-state.js
@@ -5,16 +5,17 @@
"use strict";
const {
CONNECT_RUNTIME_SUCCESS,
DISCONNECT_RUNTIME_SUCCESS,
NETWORK_LOCATIONS_UPDATED,
RUNTIMES,
UNWATCH_RUNTIME_SUCCESS,
+ UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS,
USB_RUNTIMES_UPDATED,
WATCH_RUNTIME_SUCCESS,
} = require("../constants");
const {
findRuntimeById,
} = require("../modules/runtimes-state-helper");
@@ -64,23 +65,23 @@ function _updateRuntimeById(runtimeId, u
return r;
});
return Object.assign({}, state, { [key]: updatedRuntimes });
}
function runtimesReducer(state = RuntimesState(), action) {
switch (action.type) {
case CONNECT_RUNTIME_SUCCESS: {
- const { id, connection } = action.runtime;
- return _updateRuntimeById(id, { connection }, state);
+ const { id, runtimeDetails } = action.runtime;
+ return _updateRuntimeById(id, { runtimeDetails }, state);
}
case DISCONNECT_RUNTIME_SUCCESS: {
const { id } = action.runtime;
- return _updateRuntimeById(id, { connection: null }, state);
+ return _updateRuntimeById(id, { runtimeDetails: null }, state);
}
case NETWORK_LOCATIONS_UPDATED: {
const { locations } = action;
const networkRuntimes = locations.map(location => {
const [ host, port ] = location.split(":");
return {
id: location,
@@ -93,16 +94,25 @@ function runtimesReducer(state = Runtime
});
return Object.assign({}, state, { networkRuntimes });
}
case UNWATCH_RUNTIME_SUCCESS: {
return Object.assign({}, state, { selectedRuntimeId: null });
}
+ case UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS: {
+ const { connectionPromptEnabled } = action;
+ const { id: runtimeId } = action.runtime;
+ const runtime = findRuntimeById(runtimeId, state);
+ const runtimeDetails =
+ Object.assign({}, runtime.runtimeDetails, { connectionPromptEnabled });
+ return _updateRuntimeById(runtimeId, { runtimeDetails }, state);
+ }
+
case USB_RUNTIMES_UPDATED: {
const { runtimes } = action;
const usbRuntimes = runtimes.map(runtime => {
return {
id: runtime.id,
extra: {
connectionParameters: { socketPath: runtime._socketPath },
deviceName: runtime.deviceName,
--- a/devtools/client/aboutdebugging-new/src/types.js
+++ b/devtools/client/aboutdebugging-new/src/types.js
@@ -24,20 +24,23 @@ const runtimeInfo = {
const runtimeTransportDetails = {
// host name of tcp connection to debugger server
host: PropTypes.string.isRequired,
// port number of tcp connection to debugger server
port: PropTypes.number.isRequired,
};
-const runtimeConnection = {
+const runtimeDetails = {
// debugger client instance
client: PropTypes.object.isRequired,
+ // reflect devtools.debugger.prompt-connection preference of this runtime
+ connectionPromptEnabled: PropTypes.bool.isRequired,
+
// runtime information
info: PropTypes.shape(runtimeInfo).isRequired,
// tcp connection information,
// unavailable on this-firefox runtime
transportDetails: PropTypes.shape(runtimeTransportDetails),
};
@@ -65,17 +68,17 @@ const runtimeExtra = {
deviceName: PropTypes.string,
};
const runtime = {
// unique id for the runtime
id: PropTypes.string.isRequired,
// available after the connection to the runtime is established
- connection: PropTypes.shape(runtimeConnection),
+ runtimeDetails: PropTypes.shape(runtimeDetails),
// object containing non standard properties that depend on the runtime type,
// unavailable on this-firefox runtime
extra: PropTypes.shape(runtimeExtra),
// display name of the runtime
name: PropTypes.string.isRequired,
--- a/devtools/client/aboutdebugging-new/test/browser/browser.ini
+++ b/devtools/client/aboutdebugging-new/test/browser/browser.ini
@@ -8,16 +8,17 @@ support-files =
resources/test-adb-extension/*
resources/test-temporary-extension/*
!/devtools/client/shared/test/shared-head.js
!/devtools/client/shared/test/telemetry-test-helpers.js
[browser_aboutdebugging_connect_networklocations.js]
[browser_aboutdebugging_connect_toggle_usb_devices.js]
skip-if = (os == 'linux' && bits == 32) # ADB start() fails on linux 32, see Bug 1499638
+[browser_aboutdebugging_connection_prompt_setting.js]
[browser_aboutdebugging_debug-target-pane_collapsibilities_interaction.js]
[browser_aboutdebugging_debug-target-pane_collapsibilities_preference.js]
[browser_aboutdebugging_debug-target-pane_empty.js]
[browser_aboutdebugging_navigate.js]
[browser_aboutdebugging_sidebar_network_runtimes.js]
[browser_aboutdebugging_sidebar_usb_status.js]
skip-if = (os == 'linux' && bits == 32) # ADB start() fails on linux 32, see Bug 1499638
[browser_aboutdebugging_thisfirefox.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_connection_prompt_setting.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Check whether can toggle enable/disable connection prompt setting.
+ */
+add_task(async function() {
+ info("Set initial state for test");
+ await pushPref("devtools.debugger.prompt-connection", true);
+
+ const { document, tab } = await openAboutDebugging();
+
+ info("Check whether connection prompt toggle button exists");
+ const connectionPromptToggleButton =
+ document.querySelector(".js-connection-prompt-toggle-button");
+ ok(connectionPromptToggleButton, "Toggle button existed");
+ await waitUntil(() => connectionPromptToggleButton.textContent.includes("Disable"));
+
+ info("Click on the toggle button");
+ connectionPromptToggleButton.click();
+ info("Wait until the toggle button text is updated");
+ await waitUntil(() => connectionPromptToggleButton.textContent.includes("Enable"));
+ info("Check the preference");
+ is(Services.prefs.getBoolPref("devtools.debugger.prompt-connection"),
+ false,
+ "The preference should be updated");
+
+ info("Click on the toggle button again");
+ connectionPromptToggleButton.click();
+ info("Wait until the toggle button text is updated");
+ await waitUntil(() => connectionPromptToggleButton.textContent.includes("Disable"));
+ info("Check the preference");
+ is(Services.prefs.getBoolPref("devtools.debugger.prompt-connection"),
+ true,
+ "The preference should be updated");
+
+ await removeTab(tab);
+});
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_navigate.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_navigate.js
@@ -20,22 +20,16 @@ add_task(async function() {
const connectSidebarItem = findSidebarItemByText("Connect", document);
ok(connectSidebarItem, "Found the Connect sidebar item");
const thisFirefoxSidebarItem = findSidebarItemByText("This Firefox", document);
ok(thisFirefoxSidebarItem, "Found the ThisFirefox sidebar item");
ok(isSidebarItemSelected(thisFirefoxSidebarItem),
"ThisFirefox sidebar item is selected by default");
- // Wait until the about:debugging target is visible in the tab list
- // Otherwise, we might have a race condition where TAB1 is discovered by the initial
- // listTabs from the watchRuntime action, instead of being discovered after the
- // TAB_UPDATED event. See analysis in Bug 1493968.
- await waitUntil(() => findDebugTargetByText("about:debugging", document));
-
info("Open a new background tab TAB1");
const backgroundTab1 = await addTab(TAB_URL_1, { background: true });
info("Wait for the tab to appear in the debug targets with the correct name");
await waitUntil(() => findDebugTargetByText("TAB1", document));
info("Click on the Connect item in the sidebar");
connectSidebarItem.click();
@@ -73,13 +67,8 @@ add_task(async function() {
await waitUntil(() => !findDebugTargetByText("TAB2", document));
await removeTab(tab);
});
function isSidebarItemSelected(item) {
return item.classList.contains("js-sidebar-item-selected");
}
-
-function findDebugTargetByText(text, document) {
- const targets = [...document.querySelectorAll(".js-debug-target-item")];
- return targets.find(target => target.textContent.includes(text));
-}
--- a/devtools/client/aboutdebugging-new/test/browser/head.js
+++ b/devtools/client/aboutdebugging-new/test/browser/head.js
@@ -46,16 +46,22 @@ async function openAboutDebugging(page,
const window = browser.contentWindow;
info("Wait until the main about debugging container is available");
await waitUntil(() => document.querySelector(".app"));
info("Wait until the client connection was established");
await waitUntil(() => document.querySelector(".js-runtime-page"));
+ // Wait until the about:debugging target is visible in the tab list
+ // Otherwise, we might have a race condition where TAB1 is discovered by the initial
+ // listTabs from the watchRuntime action, instead of being discovered after the
+ // TAB_UPDATED event. See analysis in Bug 1493968.
+ await waitUntil(() => findDebugTargetByText("about:debugging", document));
+
return { tab, document, window };
}
/**
* Navigate to the Connect page. Resolves when the Connect page is rendered.
*/
async function selectConnectPage(doc) {
const sidebarItems = doc.querySelectorAll(".js-sidebar-item");
@@ -66,14 +72,19 @@ async function selectConnectPage(doc) {
info("Click on the Connect item in the sidebar");
connectSidebarItem.click();
info("Wait until Connect page is displayed");
await waitUntil(() => doc.querySelector(".js-connect-page"));
}
+function findDebugTargetByText(text, document) {
+ const targets = [...document.querySelectorAll(".js-debug-target-item")];
+ return targets.find(target => target.textContent.includes(text));
+}
+
function findSidebarItemByText(text, document) {
const sidebarItems = document.querySelectorAll(".js-sidebar-item");
return [...sidebarItems].find(element => {
return element.textContent.includes(text);
});
}
--- a/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
+++ b/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
@@ -190,8 +190,16 @@ about-debugging-worker-status-registerin
# { $version } is version such as "64.0a1"
about-debugging-runtime-info = { $name } ({ $version })
# Displayed for runtime info in runtime page when we display the device model as well.
# { $name } is brand name such as "Firefox Nightly"
# { $version } is version such as "64.0a1"
# { $deviceName } is model name of device
about-debugging-runtime-info-with-model = { $name } on { $deviceName } ({ $version })
+
+# Text of the connection prompt button displayed in Runtime pages, when the preference
+# "devtools.debugger.prompt-connection" is false on the target runtime.
+about-debugging-connection-prompt-enable-button = Enable connection prompt
+
+# Text of the connection prompt button displayed in Runtime pages, when the preference
+# "devtools.debugger.prompt-connection" is true on the target runtime.
+about-debugging-connection-prompt-disable-button = Disable connection prompt
--- a/devtools/client/inspector/.eslintrc.js
+++ b/devtools/client/inspector/.eslintrc.js
@@ -7,20 +7,10 @@ module.exports = {
"rules": {
// The inspector is being migrated to HTML and cleaned of
// chrome-privileged code, so this rule disallows requiring chrome
// code. Some files in the inspector disable this rule still. The
// goal is to enable the rule globally on all files.
/* eslint-disable max-len */
"mozilla/reject-some-requires": ["error",
"^(chrome|chrome:.*|resource:.*|devtools/server/.*|.*\\.jsm|devtools/shared/platform/(chome|content)/.*)$"],
-
- // The webpack bundle does not support trailing commas in functions, so disabled it
- // explicitly with linting here.
- "comma-dangle": ["error", {
- "arrays": "ignore",
- "objects": "ignore",
- "imports": "ignore",
- "exports": "ignore",
- "functions": "never",
- }]
},
};
--- a/devtools/client/inspector/animation/actions/animations.js
+++ b/devtools/client/inspector/animation/actions/animations.js
@@ -6,17 +6,17 @@
const {
UPDATE_ANIMATIONS,
UPDATE_DETAIL_VISIBILITY,
UPDATE_ELEMENT_PICKER_ENABLED,
UPDATE_HIGHLIGHTED_NODE,
UPDATE_PLAYBACK_RATES,
UPDATE_SELECTED_ANIMATION,
- UPDATE_SIDEBAR_SIZE
+ UPDATE_SIDEBAR_SIZE,
} = require("./index");
module.exports = {
/**
* Update the list of animation in the animation inspector.
*/
updateAnimations(animations) {
return {
@@ -77,10 +77,10 @@ module.exports = {
/**
* Update the sidebar size.
*/
updateSidebarSize(sidebarSize) {
return {
type: UPDATE_SIDEBAR_SIZE,
sidebarSize,
};
- }
+ },
};
--- a/devtools/client/inspector/animation/animation.js
+++ b/devtools/client/inspector/animation/animation.js
@@ -14,17 +14,17 @@ const CurrentTimeTimer = require("./curr
const {
updateAnimations,
updateDetailVisibility,
updateElementPickerEnabled,
updateHighlightedNode,
updatePlaybackRates,
updateSelectedAnimation,
- updateSidebarSize
+ updateSidebarSize,
} = require("./actions/animations");
const {
hasAnimationIterationCountInfinite,
hasRunningAnimation,
} = require("./utils/utils");
class AnimationInspector {
constructor(inspector, win) {
@@ -106,17 +106,17 @@ class AnimationInspector {
this.animationsCurrentTimeListeners = [];
this.isCurrentTimeSet = false;
const provider = createElement(Provider,
{
id: "animationinspector",
key: "animationinspector",
- store: this.inspector.store
+ store: this.inspector.store,
},
App(
{
addAnimationsCurrentTimeListener,
direction,
emitEventForTest,
getAnimatedPropertyMap,
getAnimationsCurrentTime,
--- a/devtools/client/inspector/animation/components/AnimatedPropertyList.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyList.js
@@ -95,17 +95,17 @@ class AnimatedPropertyList extends Compo
}
return a.isUnchanged ? 1 : -1;
});
this.setState(
{
animatedProperties,
- isStateUpdating: false
+ isStateUpdating: false,
}
);
emitEventForTest("animation-keyframes-rendered");
}
render() {
const {
@@ -117,17 +117,17 @@ class AnimatedPropertyList extends Compo
} = this.state;
if (!animatedProperties) {
return null;
}
return dom.ul(
{
- className: "animated-property-list"
+ className: "animated-property-list",
},
animatedProperties.map(({ isUnchanged, keyframes, name, type }) => {
const state = this.getPropertyState(name);
return AnimatedPropertyItem(
{
getComputedStyle,
isUnchanged,
keyframes,
--- a/devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyListContainer.js
@@ -41,17 +41,17 @@ class AnimatedPropertyListContainer exte
removeAnimationsCurrentTimeListener,
simulateAnimation,
simulateAnimationForKeyframesProgressBar,
timeScale,
} = this.props;
return dom.div(
{
- className: `animated-property-list-container ${ animation.state.type }`
+ className: `animated-property-list-container ${ animation.state.type }`,
},
ProgressInspectionPanel(
{
indicator: KeyframesProgressBar(
{
addAnimationsCurrentTimeListener,
animation,
getAnimationsCurrentTime,
@@ -67,16 +67,16 @@ class AnimatedPropertyListContainer exte
getAnimatedPropertyMap,
getComputedStyle,
simulateAnimation,
}
),
ticks: [0, 50, 100].map(position => {
const label = getFormatStr("detail.propertiesHeader.percentage", position);
return { position, label };
- })
+ }),
}
)
);
}
}
module.exports = AnimatedPropertyListContainer;
--- a/devtools/client/inspector/animation/components/AnimationDetailContainer.js
+++ b/devtools/client/inspector/animation/components/AnimationDetailContainer.js
@@ -42,17 +42,17 @@ class AnimationDetailContainer extends P
setDetailVisibility,
simulateAnimation,
simulateAnimationForKeyframesProgressBar,
timeScale,
} = this.props;
return dom.div(
{
- className: "animation-detail-container"
+ className: "animation-detail-container",
},
animation ?
AnimationDetailHeader(
{
animation,
setDetailVisibility,
}
)
--- a/devtools/client/inspector/animation/components/AnimationList.js
+++ b/devtools/client/inspector/animation/components/AnimationList.js
@@ -39,17 +39,17 @@ class AnimationList extends PureComponen
setHighlightedNode,
setSelectedNode,
simulateAnimation,
timeScale,
} = this.props;
return dom.ul(
{
- className: "animation-list"
+ className: "animation-list",
},
animations.map(animation =>
AnimationItem(
{
animation,
emitEventForTest,
getAnimatedPropertyMap,
getNodeFromActor,
--- a/devtools/client/inspector/animation/components/AnimationListContainer.js
+++ b/devtools/client/inspector/animation/components/AnimationListContainer.js
@@ -54,17 +54,17 @@ class AnimationListContainer extends Pur
componentDidMount() {
this.updateState(this.props);
}
componentDidUpdate(prevProps) {
const {
timeScale,
- sidebarWidth
+ sidebarWidth,
} = this.props;
if (timeScale.getDuration() !== prevProps.timeScale.getDuration() ||
timeScale.zeroPositionTime !== prevProps.timeScale.zeroPositionTime ||
sidebarWidth !== prevProps.sidebarWidth) {
this.updateState(this.props);
}
}
@@ -121,17 +121,17 @@ class AnimationListContainer extends Pur
setSelectedNode,
simulateAnimation,
timeScale,
} = this.props;
const { ticks } = this.state;
return dom.div(
{
- className: "animation-list-container"
+ className: "animation-list-container",
},
ProgressInspectionPanel(
{
indicator: CurrentTimeScrubber(
{
addAnimationsCurrentTimeListener,
direction,
removeAnimationsCurrentTimeListener,
@@ -158,13 +158,13 @@ class AnimationListContainer extends Pur
}
)
);
}
}
const mapStateToProps = state => {
return {
- sidebarWidth: state.animations.sidebarSize ? state.animations.sidebarSize.width : 0
+ sidebarWidth: state.animations.sidebarSize ? state.animations.sidebarSize.width : 0,
};
};
module.exports = connect(mapStateToProps)(AnimationListContainer);
--- a/devtools/client/inspector/animation/components/AnimationTarget.js
+++ b/devtools/client/inspector/animation/components/AnimationTarget.js
@@ -109,17 +109,17 @@ class AnimationTarget extends Component
setHighlightedNode,
} = this.props;
const { nodeFront } = this.state;
if (!nodeFront) {
return dom.div(
{
- className: "animation-target"
+ className: "animation-target",
}
);
}
emitEventForTest("animation-target-rendered");
const isHighlighted = nodeFront.actorID === highlightedNode;
@@ -149,17 +149,17 @@ class AnimationTarget extends Component
e.stopPropagation();
if (!isHighlighted) {
// At first, hide highlighter which was created by onDOMNodeMouseOver.
onHideBoxModelHighlighter();
}
setHighlightedNode(isHighlighted ? null : nodeFront);
- }
+ },
}
)
);
}
}
const mapStateToProps = state => {
return {
--- a/devtools/client/inspector/animation/components/App.js
+++ b/devtools/client/inspector/animation/components/App.js
@@ -131,22 +131,22 @@ class App extends Component {
setAnimationsCurrentTime,
setHighlightedNode,
setSelectedNode,
simulateAnimation,
timeScale,
}
),
vert: false,
- })
+ }),
]
:
NoAnimationPanel(
{
- toggleElementPicker
+ toggleElementPicker,
}
)
);
}
}
const mapStateToProps = state => {
return {
--- a/devtools/client/inspector/animation/components/KeyframesProgressBar.js
+++ b/devtools/client/inspector/animation/components/KeyframesProgressBar.js
@@ -85,17 +85,17 @@ class KeyframesProgressBar extends PureC
simulateAnimationForKeyframesProgressBar,
} = props;
if (this.simulatedAnimation) {
this.simulatedAnimation.cancel();
}
const timing = Object.assign({}, animation.state, {
- iterations: animation.state.iterationCount || Infinity
+ iterations: animation.state.iterationCount || Infinity,
});
this.simulatedAnimation = simulateAnimationForKeyframesProgressBar(timing);
}
render() {
const { position } = this.state;
--- a/devtools/client/inspector/animation/components/NoAnimationPanel.js
+++ b/devtools/client/inspector/animation/components/NoAnimationPanel.js
@@ -25,36 +25,36 @@ class NoAnimationPanel extends Component
return this.props.elementPickerEnabled != nextProps.elementPickerEnabled;
}
render() {
const { elementPickerEnabled, toggleElementPicker } = this.props;
return dom.div(
{
- className: "animation-error-message devtools-sidepanel-no-result"
+ className: "animation-error-message devtools-sidepanel-no-result",
},
dom.p(
null,
L10N.getStr("panel.noAnimation")
),
dom.button(
{
className: "animation-element-picker devtools-button" +
(elementPickerEnabled ? " checked" : ""),
"data-standalone": true,
onClick: event => {
event.stopPropagation();
toggleElementPicker();
- }
+ },
}
)
);
}
}
const mapStateToProps = state => {
return {
- elementPickerEnabled: state.animations.elementPickerEnabled
+ elementPickerEnabled: state.animations.elementPickerEnabled,
};
};
module.exports = connect(mapStateToProps)(NoAnimationPanel);
--- a/devtools/client/inspector/animation/components/TickLabels.js
+++ b/devtools/client/inspector/animation/components/TickLabels.js
@@ -18,25 +18,25 @@ class TickLabels extends PureComponent {
};
}
render() {
const { ticks } = this.props;
return dom.div(
{
- className: "tick-labels"
+ className: "tick-labels",
},
ticks.map(tick =>
dom.div(
{
className: "tick-label",
style: {
marginInlineStart: `${ tick.position }%`,
- maxWidth: `${ tick.width }px`
+ maxWidth: `${ tick.width }px`,
},
},
tick.label
)
)
);
}
}
--- a/devtools/client/inspector/animation/components/TickLines.js
+++ b/devtools/client/inspector/animation/components/TickLines.js
@@ -18,23 +18,23 @@ class TickLines extends PureComponent {
};
}
render() {
const { ticks } = this.props;
return dom.div(
{
- className: "tick-lines"
+ className: "tick-lines",
},
ticks.map(tick =>
dom.div(
{
className: "tick-line",
- style: { marginInlineStart: `${ tick.position }%` }
+ style: { marginInlineStart: `${ tick.position }%` },
}
)
)
);
}
}
module.exports = TickLines;
--- a/devtools/client/inspector/animation/components/graph/ComputedTimingPath.js
+++ b/devtools/client/inspector/animation/components/graph/ComputedTimingPath.js
@@ -34,28 +34,28 @@ class ComputedTimingPath extends TimingP
offset,
opacity,
simulateAnimation,
totalDuration,
} = this.props;
const { state } = animation;
const effectTiming = Object.assign({}, state, {
- iterations: state.iterationCount ? state.iterationCount : Infinity
+ iterations: state.iterationCount ? state.iterationCount : Infinity,
});
// Create new keyframes for opacity as computed style.
// The reason why we use computed value instead of computed timing progress is to
// include the easing in keyframes as well. Although the computed timing progress
// is not affected by the easing in keyframes at all, computed value reflects that.
const frames = keyframes.map(keyframe => {
return {
opacity: keyframe.offset,
offset: keyframe.offset,
- easing: keyframe.easing
+ easing: keyframe.easing,
};
});
const simulatedAnimation = simulateAnimation(frames, effectTiming, true);
if (!simulatedAnimation) {
return null;
}
@@ -82,16 +82,16 @@ class ComputedTimingPath extends TimingP
const helper = new SummaryGraphHelper(state, keyframes,
totalDuration, durationPerPixel,
getValueFunc, toPathStringFunc);
return dom.g(
{
className: "animation-computed-timing-path",
style: { opacity },
- transform: `translate(${ offset })`
+ transform: `translate(${ offset })`,
},
super.renderGraph(state, helper)
);
}
}
module.exports = ComputedTimingPath;
--- a/devtools/client/inspector/animation/components/graph/EffectTimingPath.js
+++ b/devtools/client/inspector/animation/components/graph/EffectTimingPath.js
@@ -30,17 +30,17 @@ class EffectTimingPath extends TimingPat
durationPerPixel,
offset,
simulateAnimation,
totalDuration,
} = this.props;
const { state } = animation;
const effectTiming = Object.assign({}, state, {
- iterations: state.iterationCount ? state.iterationCount : Infinity
+ iterations: state.iterationCount ? state.iterationCount : Infinity,
});
const simulatedAnimation = simulateAnimation(null, effectTiming, false);
if (!simulatedAnimation) {
return null;
}
@@ -59,16 +59,16 @@ class EffectTimingPath extends TimingPat
createSummaryGraphPathStringFunction(endTime, state.playbackRate);
const helper = new SummaryGraphHelper(state, null,
totalDuration, durationPerPixel,
getValueFunc, toPathStringFunc);
return dom.g(
{
className: "animation-effect-timing-path",
- transform: `translate(${ offset })`
+ transform: `translate(${ offset })`,
},
super.renderGraph(state, helper)
);
}
}
module.exports = EffectTimingPath;
--- a/devtools/client/inspector/animation/components/graph/NegativePath.js
+++ b/devtools/client/inspector/animation/components/graph/NegativePath.js
@@ -34,28 +34,28 @@ class NegativePath extends PureComponent
offset,
simulateAnimation,
totalDuration,
} = this.props;
const { state } = animation;
const effectTiming = Object.assign({}, state, {
fill: "both",
- iterations: state.iterationCount ? state.iterationCount : Infinity
+ iterations: state.iterationCount ? state.iterationCount : Infinity,
});
// Create new keyframes for opacity as computed style.
// The reason why we use computed value instead of computed timing progress is to
// include the easing in keyframes as well. Although the computed timing progress
// is not affected by the easing in keyframes at all, computed value reflects that.
const frames = keyframes.map(keyframe => {
return {
opacity: keyframe.offset,
offset: keyframe.offset,
- easing: keyframe.easing
+ easing: keyframe.easing,
};
});
const simulatedAnimation = simulateAnimation(frames, effectTiming, true);
if (!simulatedAnimation) {
return null;
}
@@ -77,16 +77,16 @@ class NegativePath extends PureComponent
createSummaryGraphPathStringFunction(endTime, state.playbackRate);
const helper = new SummaryGraphHelper(state, keyframes,
totalDuration, durationPerPixel,
getValueFunc, toPathStringFunc);
return dom.g(
{
className: this.getClassName(),
- transform: `translate(${ offset })`
+ transform: `translate(${ offset })`,
},
this.renderGraph(state, helper)
);
}
}
module.exports = NegativePath;
--- a/devtools/client/inspector/animation/components/graph/SummaryGraphPath.js
+++ b/devtools/client/inspector/animation/components/graph/SummaryGraphPath.js
@@ -171,17 +171,17 @@ class SummaryGraphPath extends Component
const totalDuration =
timeScale.getDuration() * Math.abs(animation.state.playbackRate);
const durationPerPixel = totalDuration / thisEl.parentNode.clientWidth;
this.setState(
{
durationPerPixel,
isStateUpdating: false,
- keyframesList
+ keyframesList,
}
);
emitEventForTest("animation-summary-graph-rendered");
}
render() {
const { durationPerPixel, keyframesList } = this.state;
--- a/devtools/client/inspector/animation/components/keyframes-graph/ColorPath.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/ColorPath.js
@@ -80,17 +80,17 @@ class ColorPath extends ComputedStylePat
for (let i = 0; i < keyframes.length - 1; i++) {
const startKeyframe = keyframes[i];
const endKeyframe = keyframes[i + 1];
const startTime = startKeyframe.offset * totalDuration;
const endTime = endKeyframe.offset * totalDuration;
const g = dom.g(
{
- className: "hint"
+ className: "hint",
},
dom.title({}, startKeyframe.easing),
dom.rect(
{
x: startTime,
y: -graphHeight,
height: graphHeight,
width: endTime - startTime,
--- a/devtools/client/inspector/animation/components/keyframes-graph/ComputedStylePath.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/ComputedStylePath.js
@@ -149,26 +149,26 @@ class ComputedStylePath extends PureComp
break;
} else if (segment.x === endTime) {
break;
}
}
const g = dom.g(
{
- className: "hint"
+ className: "hint",
},
dom.title({}, startKeyframe.easing),
dom.path(
{
d: `M${ hintSegments[0].x },${ hintSegments[0].y } ` +
toPathString(hintSegments),
style: {
"stroke-width": easingHintStrokeWidth,
- }
+ },
}
)
);
hints.push(g);
}
return hints;
@@ -193,17 +193,17 @@ class ComputedStylePath extends PureComp
return null;
}
segments.push(...keyframesSegments);
}
return [
this.renderPathSegments(segments),
- this.renderEasingHint(segments)
+ this.renderEasingHint(segments),
];
}
/**
* Return react dom fron given path segments.
*
* @param {Array} segments
* @param {Object} style
--- a/devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerList.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerList.js
@@ -17,16 +17,16 @@ class KeyframeMarkerList extends PureCom
};
}
render() {
const { keyframes } = this.props;
return dom.ul(
{
- className: "keyframe-marker-list"
+ className: "keyframe-marker-list",
},
keyframes.map(keyframe => KeyframeMarkerItem({ keyframe }))
);
}
}
module.exports = KeyframeMarkerList;
--- a/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
@@ -28,17 +28,17 @@ class KeyframesGraph extends PureCompone
keyframes,
name,
simulateAnimation,
type,
} = this.props;
return dom.div(
{
- className: `keyframes-graph ${ name }`
+ className: `keyframes-graph ${ name }`,
},
KeyframesGraphPath(
{
getComputedStyle,
keyframes,
name,
simulateAnimation,
type,
--- a/devtools/client/inspector/animation/reducers/animations.js
+++ b/devtools/client/inspector/animation/reducers/animations.js
@@ -59,44 +59,44 @@ const reducers = {
return Object.assign({}, state, {
detailVisibility,
selectedAnimation,
});
},
[UPDATE_ELEMENT_PICKER_ENABLED](state, { elementPickerEnabled }) {
return Object.assign({}, state, {
- elementPickerEnabled
+ elementPickerEnabled,
});
},
[UPDATE_HIGHLIGHTED_NODE](state, { highlightedNode }) {
return Object.assign({}, state, {
- highlightedNode
+ highlightedNode,
});
},
[UPDATE_PLAYBACK_RATES](state) {
return Object.assign({}, state, {
playbackRates: getPlaybackRates([], state.animations),
});
},
[UPDATE_SELECTED_ANIMATION](state, { selectedAnimation }) {
const detailVisibility = !!selectedAnimation;
return Object.assign({}, state, {
detailVisibility,
- selectedAnimation
+ selectedAnimation,
});
},
[UPDATE_SIDEBAR_SIZE](state, { sidebarSize }) {
return Object.assign({}, state, {
- sidebarSize
+ sidebarSize,
});
},
};
function getPlaybackRates(basePlaybackRate, animations) {
return [...new Set(animations.map(a => a.state.playbackRate).concat(basePlaybackRate))];
}
--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-01.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-01.js
@@ -18,17 +18,17 @@ const TEST_DATA = [
expectedPathSegments: [
{ x: 0, y: 0 },
{ x: 0, y: 100 },
{ x: 1000, y: 100 },
],
expectedStopColors: [
{ offset: 0, color: "rgb(255, 0, 0)" },
{ offset: 1, color: "rgb(0, 255, 0)" },
- ]
+ ],
},
{
name: "background-repeat",
computedValuePathClass: "discrete-path",
expectedPathSegments: [
{ x: 0, y: 0 },
{ x: 499.999, y: 0 },
{ x: 500, y: 100 },
@@ -92,17 +92,17 @@ const TEST_DATA = [
expectedPathSegments: [
{ x: 0, y: 0 },
{ x: 0, y: 100 },
{ x: 1000, y: 100 },
],
expectedStopColors: [
{ offset: 0, color: "rgb(0, 255, 0)" },
{ offset: 1, color: "rgb(255, 0, 0)" },
- ]
+ ],
},
{
name: "background-repeat",
computedValuePathClass: "discrete-path",
expectedPathSegments: [
{ x: 0, y: 0 },
{ x: 499.999, y: 0 },
{ x: 500, y: 100 },
--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-03.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-03.js
@@ -20,17 +20,17 @@ const TEST_DATA = [
{ x: 0, y: 100 },
{ x: 500, y: 100 },
{ x: 1000, y: 100 },
],
expectedStopColors: [
{ offset: 0, color: "rgb(255, 0, 0)" },
{ offset: 0.5, color: "rgb(0, 0, 255)" },
{ offset: 1, color: "rgb(0, 255, 0)" },
- ]
+ ],
},
{
name: "background-repeat",
computedValuePathClass: "discrete-path",
expectedPathSegments: [
{ x: 0, y: 0 },
{ x: 249.999, y: 0 },
{ x: 250, y: 100 },
@@ -110,17 +110,17 @@ const TEST_DATA = [
{ x: 1000, y: 100 },
],
expectedStopColors: [
{ offset: 0, color: "rgb(255, 0, 0)" },
{ offset: 0.499, color: "rgb(255, 0, 0)" },
{ offset: 0.5, color: "rgb(128, 128, 0)" },
{ offset: 0.999, color: "rgb(128, 128, 0)" },
{ offset: 1, color: "rgb(0, 255, 0)" },
- ]
+ ],
},
{
name: "background-repeat",
computedValuePathClass: "discrete-path",
expectedPathSegments: [
{ x: 0, y: 0 },
{ x: 499.999, y: 0 },
{ x: 500, y: 100 },
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path.js
@@ -16,112 +16,112 @@ const TEST_DATA = [
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 40.851 },
{ x: 500000, y: 80.24},
{ x: 750000, y: 96.05 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
- ]
+ ],
],
},
{
targetClass: "cssanimation-linear",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 750000, y: 75 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
- ]
+ ],
],
},
{
targetClass: "delay-positive",
expectedDelayPath: [
{ x: 0, y: 0 },
{ x: 500000, y: 0 },
],
expectedIterationPathList: [
[
{ x: 500000, y: 0 },
{ x: 750000, y: 25 },
{ x: 1000000, y: 50 },
{ x: 1250000, y: 75 },
{ x: 1500000, y: 100 },
{ x: 1500000, y: 0 },
- ]
+ ],
],
},
{
targetClass: "delay-negative",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 0, y: 50 },
{ x: 250000, y: 75 },
{ x: 500000, y: 100 },
{ x: 500000, y: 0 },
- ]
+ ],
],
},
{
targetClass: "easing-step",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 499999, y: 0 },
{ x: 500000, y: 50 },
{ x: 999999, y: 50 },
{ x: 1000000, y: 0 },
- ]
+ ],
],
},
{
targetClass: "enddelay-positive",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 750000, y: 75 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
- ]
+ ],
],
expectedEndDelayPath: [
{ x: 1000000, y: 0 },
{ x: 1500000, y: 0 },
],
},
{
targetClass: "enddelay-negative",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 500000, y: 0 },
- ]
+ ],
],
},
{
targetClass: "enddelay-with-fill-forwards",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 750000, y: 75 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
- ]
+ ],
],
expectedEndDelayPath: [
{ x: 1000000, y: 0 },
{ x: 1000000, y: 100 },
{ x: 1500000, y: 100 },
{ x: 1500000, y: 0 },
],
expectedForwardsPath: [
@@ -144,17 +144,17 @@ const TEST_DATA = [
],
[
{ x: 1000000, y: 0 },
{ x: 1250000, y: 25 },
{ x: 1500000, y: 50 },
{ x: 1750000, y: 75 },
{ x: 2000000, y: 100 },
{ x: 2000000, y: 0 },
- ]
+ ],
],
isInfinity: true,
},
{
targetClass: "direction-alternate-with-iterations-infinity",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
@@ -166,17 +166,17 @@ const TEST_DATA = [
],
[
{ x: 1000000, y: 0 },
{ x: 1000000, y: 100 },
{ x: 1250000, y: 75 },
{ x: 1500000, y: 50 },
{ x: 1750000, y: 25 },
{ x: 2000000, y: 0 },
- ]
+ ],
],
isInfinity: true,
},
{
targetClass: "direction-alternate-reverse-with-iterations-infinity",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
@@ -188,17 +188,17 @@ const TEST_DATA = [
],
[
{ x: 1000000, y: 0 },
{ x: 1250000, y: 25 },
{ x: 1500000, y: 50 },
{ x: 1750000, y: 75 },
{ x: 2000000, y: 100 },
{ x: 2000000, y: 0 },
- ]
+ ],
],
isInfinity: true,
},
{
targetClass: "direction-reverse-with-iterations-infinity",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
@@ -210,31 +210,31 @@ const TEST_DATA = [
],
[
{ x: 1000000, y: 0 },
{ x: 1000000, y: 100 },
{ x: 1250000, y: 75 },
{ x: 1500000, y: 50 },
{ x: 1750000, y: 25 },
{ x: 2000000, y: 0 },
- ]
+ ],
],
isInfinity: true,
},
{
targetClass: "fill-backwards",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 750000, y: 75 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
- ]
+ ],
],
},
{
targetClass: "fill-backwards-with-delay-iterationstart",
expectedDelayPath: [
{ x: 0, y: 0 },
{ x: 0, y: 50 },
{ x: 500000, y: 50 },
@@ -247,30 +247,30 @@ const TEST_DATA = [
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
],
[
{ x: 1000000, y: 0 },
{ x: 1250000, y: 25 },
{ x: 1500000, y: 50 },
{ x: 1500000, y: 0 },
- ]
+ ],
],
},
{
targetClass: "fill-both",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 750000, y: 75 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
- ]
+ ],
],
expectedForwardsPath: [
{ x: 1000000, y: 0 },
{ x: 1000000, y: 100 },
{ x: 2000000, y: 100 },
{ x: 2000000, y: 0 },
],
},
@@ -289,34 +289,34 @@ const TEST_DATA = [
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
],
[
{ x: 1000000, y: 0 },
{ x: 1250000, y: 25 },
{ x: 1500000, y: 50 },
{ x: 1500000, y: 0 },
- ]
+ ],
],
expectedForwardsPath: [
{ x: 1500000, y: 0 },
{ x: 1500000, y: 50 },
],
},
{
targetClass: "fill-forwards",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 750000, y: 75 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
- ]
+ ],
],
expectedForwardsPath: [
{ x: 1000000, y: 0 },
{ x: 1000000, y: 100 },
{ x: 2000000, y: 100 },
{ x: 2000000, y: 0 },
],
},
@@ -329,67 +329,67 @@ const TEST_DATA = [
{ x: 500000, y: 100 },
{ x: 500000, y: 0 },
],
[
{ x: 500000, y: 0 },
{ x: 750000, y: 25 },
{ x: 1000000, y: 50 },
{ x: 1000000, y: 0 },
- ]
+ ],
],
},
{
targetClass: "no-compositor",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 750000, y: 75 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
- ]
+ ],
],
},
{
targetClass: "keyframes-easing-step",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 499999, y: 0 },
{ x: 500000, y: 50 },
{ x: 999999, y: 50 },
{ x: 1000000, y: 0 },
- ]
+ ],
],
},
{
targetClass: "narrow-keyframes",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 100000, y: 10 },
{ x: 110000, y: 10 },
{ x: 115000, y: 10 },
{ x: 129999, y: 10 },
{ x: 130000, y: 13 },
{ x: 135000, y: 13.5 },
- ]
+ ],
],
},
{
targetClass: "duplicate-offsets",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 999999, y: 50 },
- ]
+ ],
],
},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_multi_timings.html");
const { panel } = await openAnimationInspector();
--- a/devtools/client/inspector/animation/test/browser_animation_timing_negative-playback-rate_summary-graph.js
+++ b/devtools/client/inspector/animation/test/browser_animation_timing_negative-playback-rate_summary-graph.js
@@ -14,140 +14,140 @@ const TEST_DATA = [
targetSelector: ".normal",
expectedPathList: [
{
selector: ".animation-iteration-path",
path: [
{ x: 0, y: 100 },
{ x: 50000, y: 50 },
{ x: 100000, y: 0 },
- ]
+ ],
},
],
expectedTooltip: "Playback rate: -1",
expectedViewboxWidth: 200000,
},
{
targetSelector: ".normal-playbackrate-2",
expectedPathList: [
{
selector: ".animation-iteration-path",
path: [
{ x: 0, y: 100 },
{ x: 50000, y: 50 },
{ x: 100000, y: 0 },
- ]
+ ],
},
],
expectedTooltip: "Playback rate: -2",
expectedViewboxWidth: 400000,
},
{
targetSelector: ".positive-delay",
expectedSignList: [
{
selector: ".animation-end-delay-sign",
sign: {
marginInlineStart: "75%",
width: "25%",
},
- }
+ },
],
expectedPathList: [
{
selector: ".animation-iteration-path",
path: [
{ x: 0, y: 100 },
{ x: 50000, y: 50 },
{ x: 100000, y: 0 },
- ]
+ ],
},
],
expectedTooltip: "Playback rate: -1",
},
{
targetSelector: ".negative-delay",
expectedSignList: [
{
selector: ".animation-end-delay-sign",
sign: {
marginInlineStart: "50%",
width: "25%",
},
- }
+ },
],
expectedPathList: [
{
selector: ".animation-iteration-path",
path: [
{ x: 0, y: 100 },
{ x: 50000, y: 50 },
{ x: 50000, y: 0 },
- ]
+ ],
},
{
selector: ".animation-negative-delay-path path",
path: [
{ x: 50000, y: 50 },
{ x: 100000, y: 0 },
- ]
+ ],
},
],
expectedTooltip: "Playback rate: -1",
},
{
targetSelector: ".positive-end-delay",
expectedSignList: [
{
selector: ".animation-delay-sign",
sign: {
isFilled: true,
marginInlineStart: "25%",
width: "25%",
},
- }
+ },
],
expectedPathList: [
{
selector: ".animation-iteration-path",
path: [
{ x: 50000, y: 100 },
{ x: 100000, y: 50 },
{ x: 150000, y: 0 },
- ]
+ ],
},
],
expectedTooltip: "Playback rate: -1",
},
{
targetSelector: ".negative-end-delay",
expectedSignList: [
{
selector: ".animation-delay-sign",
sign: {
isFilled: true,
marginInlineStart: "0%",
width: "25%",
},
- }
+ },
],
expectedPathList: [
{
selector: ".animation-iteration-path",
path: [
{ x: 0, y: 50 },
{ x: 50000, y: 0 },
- ]
+ ],
},
{
selector: ".animation-negative-end-delay-path path",
path: [
{ x: -50000, y: 100 },
{ x: 0, y: 0 },
- ]
+ ],
},
],
expectedTooltip: "Playback rate: -1",
},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_negative_playback_rate.html");
--- a/devtools/client/inspector/animation/test/doc_multi_easings.html
+++ b/devtools/client/inspector/animation/test/doc_multi_easings.html
@@ -15,17 +15,17 @@
function createAnimation(name, keyframes, effectEasing) {
const div = document.createElement("div");
div.classList.add(name);
document.body.appendChild(div);
const effect = {
duration: 100000,
- fill: "forwards"
+ fill: "forwards",
};
if (effectEasing) {
effect.easing = effectEasing;
}
div.animate(keyframes, effect);
}
@@ -45,53 +45,53 @@
{ opacity: 0 },
],
"frames(5)"
);
createAnimation(
"keyframe-easing",
[
- { opacity: 1, easing: "steps(2)", },
+ { opacity: 1, easing: "steps(2)" },
{ opacity: 0 },
]
);
createAnimation(
"both-easing",
[
- { offset: 0, opacity: 1, easing: "steps(2)", },
- { offset: 0, marginLeft: "0px", easing: "steps(1)", },
+ { offset: 0, opacity: 1, easing: "steps(2)" },
+ { offset: 0, marginLeft: "0px", easing: "steps(1)" },
{ marginLeft: "100px", opacity: 0 },
],
"steps(10)"
);
createAnimation(
"narrow-keyframes",
[
- { opacity: 0, },
- { offset: 0.1, opacity: 1, easing: "steps(1)", },
- { offset: 0.13, opacity: 0, },
+ { opacity: 0 },
+ { offset: 0.1, opacity: 1, easing: "steps(1)" },
+ { offset: 0.13, opacity: 0 },
]
);
createAnimation(
"duplicate-keyframes",
[
{ opacity: 0 },
- { offset: 0.5, opacity: 1, },
- { offset: 0.5, opacity: 0, easing: "steps(1)", },
- { opacity: 1, },
+ { offset: 0.5, opacity: 1 },
+ { offset: 0.5, opacity: 0, easing: "steps(1)" },
+ { opacity: 1 },
]
);
createAnimation(
"color-keyframes",
[
- { color: "red", easing: "ease-in", },
- { offset: 0.4, color: "blue", easing: "ease-out", },
- { color: "lime", },
+ { color: "red", easing: "ease-in" },
+ { offset: 0.4, color: "blue", easing: "ease-out" },
+ { color: "lime" },
]
);
</script>
</body>
</html>
--- a/devtools/client/inspector/animation/test/doc_multi_keyframes.html
+++ b/devtools/client/inspector/animation/test/doc_multi_keyframes.html
@@ -15,17 +15,17 @@
function createAnimation(name, keyframes, effectEasing) {
const div = document.createElement("div");
div.classList.add(name);
document.body.appendChild(div);
const effect = {
duration: 100000,
- fill: "forwards"
+ fill: "forwards",
};
if (effectEasing) {
effect.easing = effectEasing;
}
div.animate(keyframes, effect);
}
@@ -35,134 +35,134 @@
[
{
backgroundColor: "red",
backgroundRepeat: "space round",
fontSize: "10px",
marginLeft: "0px",
opacity: 0,
textAlign: "right",
- transform: "translate(0px)"
+ transform: "translate(0px)",
},
{
backgroundColor: "lime",
backgroundRepeat: "round space",
fontSize: "20px",
marginLeft: "100px",
opacity: 1,
textAlign: "center",
- transform: "translate(100px)"
+ transform: "translate(100px)",
},
]
);
createAnimation(
"multi-types-reverse",
[
{
backgroundColor: "lime",
backgroundRepeat: "space",
fontSize: "20px",
marginLeft: "100px",
opacity: 1,
textAlign: "center",
- transform: "translate(100px)"
+ transform: "translate(100px)",
},
{
backgroundColor: "red",
backgroundRepeat: "round",
fontSize: "10px",
marginLeft: "0px",
opacity: 0,
textAlign: "right",
- transform: "translate(0px)"
+ transform: "translate(0px)",
},
]
);
createAnimation(
"middle-keyframe",
[
{
backgroundColor: "red",
backgroundRepeat: "space",
fontSize: "10px",
marginLeft: "0px",
opacity: 0,
textAlign: "right",
- transform: "translate(0px)"
+ transform: "translate(0px)",
},
{
backgroundColor: "blue",
backgroundRepeat: "round",
fontSize: "20px",
marginLeft: "100px",
opacity: 1,
textAlign: "center",
- transform: "translate(100px)"
+ transform: "translate(100px)",
},
{
backgroundColor: "lime",
backgroundRepeat: "space",
fontSize: "10px",
marginLeft: "0px",
opacity: 0,
textAlign: "right",
- transform: "translate(0px)"
+ transform: "translate(0px)",
},
]
);
createAnimation(
"steps-keyframe",
[
{
backgroundColor: "red",
backgroundRepeat: "space",
fontSize: "10px",
marginLeft: "0px",
opacity: 0,
textAlign: "right",
transform: "translate(0px)",
- easing: "steps(2)"
+ easing: "steps(2)",
},
{
backgroundColor: "lime",
backgroundRepeat: "round",
fontSize: "20px",
marginLeft: "100px",
opacity: 1,
textAlign: "center",
- transform: "translate(100px)"
+ transform: "translate(100px)",
},
]
);
createAnimation(
"steps-effect",
[
{
- opacity: 0
+ opacity: 0,
},
{
- opacity: 1
+ opacity: 1,
},
],
"steps(2)"
);
createAnimation(
"frames-keyframe",
[
{
easing: "frames(5)",
opacity: 0,
},
{
- opacity: 1
+ opacity: 1,
},
]
);
createAnimation(
"narrow-offsets",
[
{
--- a/devtools/client/inspector/animation/test/doc_multi_timings.html
+++ b/devtools/client/inspector/animation/test/doc_multi_timings.html
@@ -119,22 +119,22 @@
[
{
opacity: 0,
offset: 0,
},
{
opacity: 1,
offset: 0.1,
- easing: "steps(1)"
+ easing: "steps(1)",
},
{
opacity: 0,
offset: 0.13,
- }
+ },
],
{},
"narrow-keyframes");
createAnimation(
[
{
offset: 0,
@@ -147,15 +147,15 @@
{
offset: 0.5,
easing: "steps(1)",
opacity: 0,
},
{
offset: 1,
opacity: 1,
- }
+ },
],
{},
"duplicate-offsets");
</script>
</body>
</html>
--- a/devtools/client/inspector/animation/test/doc_overflowed_delay_end_delay.html
+++ b/devtools/client/inspector/animation/test/doc_overflowed_delay_end_delay.html
@@ -13,61 +13,61 @@
<body>
<div id="target"></div>
<script>
"use strict";
const target = document.getElementById("target");
target.animate(
{
- color: ["red", "lime"]
+ color: ["red", "lime"],
},
{
id: "big-delay",
duration: 1000,
delay: Number.MAX_VALUE,
iterations: Infinity,
});
target.animate(
{
- opacity: [1, 0]
+ opacity: [1, 0],
},
{
id: "big-end-delay",
duration: 1000,
endDelay: Number.MAX_VALUE,
iterations: Infinity,
});
target.animate(
{
- marginLeft: ["0px", "100px"]
+ marginLeft: ["0px", "100px"],
},
{
id: "negative-big-delay",
duration: 1000,
delay: -Number.MAX_VALUE,
iterations: Infinity,
});
target.animate(
{
- paddingLeft: ["0px", "100px"]
+ paddingLeft: ["0px", "100px"],
},
{
id: "negative-big-end-delay",
duration: 1000,
endDelay: -Number.MAX_VALUE,
iterations: Infinity,
});
target.animate(
{
- backgroundColor: ["lime", "white"]
+ backgroundColor: ["lime", "white"],
},
{
id: "big-iteration-start",
duration: 1000,
iterations: Infinity,
iterationStart: Number.MAX_VALUE,
});
</script>
--- a/devtools/client/inspector/animation/test/doc_simple_animation.html
+++ b/devtools/client/inspector/animation/test/doc_simple_animation.html
@@ -160,15 +160,15 @@
<div class="ball longhand"></div>
<script>
/* globals KeyframeEffect, Animation */
"use strict";
const el = document.querySelector(".end-delay");
const effect = new KeyframeEffect(el, [
{ opacity: 0, offset: 0 },
- { opacity: 1, offset: 1 }
+ { opacity: 1, offset: 1 },
], { duration: 1000000, endDelay: 500000, fill: "none" });
const animation = new Animation(effect, document.timeline);
animation.play();
</script>
</body>
</html>
--- a/devtools/client/inspector/animation/test/head.js
+++ b/devtools/client/inspector/animation/test/head.js
@@ -566,17 +566,17 @@ function _afterDispatchDone(store, type)
predicate: action => {
if (action.type === type) {
return true;
}
return false;
},
run: (dispatch, getState, action) => {
resolve(action);
- }
+ },
});
});
}
/**
* Wait for a specific action type to be dispatch.
* If an async action, will wait for it to be done.
* This is a custom waitForDispatch, and rather than having a number to wait on
--- a/devtools/client/inspector/animation/test/keyframes-graph_keyframe-marker_head.js
+++ b/devtools/client/inspector/animation/test/keyframes-graph_keyframe-marker_head.js
@@ -19,95 +19,95 @@ const KEYFRAMES_TEST_DATA = [
expectedValues: [
{
title: "rgb(255, 0, 0)",
marginInlineStart: "0%",
},
{
title: "rgb(0, 255, 0)",
marginInlineStart: "100%",
- }
+ },
],
},
{
name: "background-repeat",
expectedValues: [
{
title: "space round",
marginInlineStart: "0%",
},
{
title: "round space",
marginInlineStart: "100%",
- }
+ },
],
},
{
name: "font-size",
expectedValues: [
{
title: "10px",
marginInlineStart: "0%",
},
{
title: "20px",
marginInlineStart: "100%",
- }
+ },
],
},
{
name: "margin-left",
expectedValues: [
{
title: "0px",
marginInlineStart: "0%",
},
{
title: "100px",
marginInlineStart: "100%",
- }
+ },
],
},
{
name: "opacity",
expectedValues: [
{
title: "0",
marginInlineStart: "0%",
},
{
title: "1",
marginInlineStart: "100%",
- }
+ },
],
},
{
name: "text-align",
expectedValues: [
{
title: "right",
marginInlineStart: "0%",
},
{
title: "center",
marginInlineStart: "100%",
- }
+ },
],
},
{
name: "transform",
expectedValues: [
{
title: "translate(0px)",
marginInlineStart: "0%",
},
{
title: "translate(100px)",
marginInlineStart: "100%",
- }
+ },
],
},
],
},
{
targetClass: "narrow-offsets",
properties: [
{
--- a/devtools/client/inspector/boxmodel/actions/box-model.js
+++ b/devtools/client/inspector/boxmodel/actions/box-model.js
@@ -38,11 +38,11 @@ module.exports = {
/**
* Updates the offset parent state with the new DOM node.
*/
updateOffsetParent(offsetParent) {
return {
type: UPDATE_OFFSET_PARENT,
offsetParent,
};
- }
+ },
};
--- a/devtools/client/inspector/boxmodel/box-model.js
+++ b/devtools/client/inspector/boxmodel/box-model.js
@@ -140,17 +140,17 @@ BoxModel.prototype = {
const node = this.inspector.selection.nodeFront;
let layout = await this.inspector.pageStyle.getLayout(node, {
autoMargins: true,
});
const styleEntries = await this.inspector.pageStyle.getApplied(node, {
// We don't need styles applied to pseudo elements of the current node.
- skipPseudo: true
+ skipPseudo: true,
});
this.elementRules = styleEntries.map(e => e.rule);
// Update the layout properties with whether or not the element's position is
// editable with the geometry editor.
const isPositionEditable = await this.inspector.pageStyle.isPositionEditable(node);
layout = Object.assign({}, layout, {
@@ -279,28 +279,28 @@ BoxModel.prototype = {
});
const initialValue = session.getProperty(property);
const editor = new InplaceEditor({
element: element,
initial: initialValue,
contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE,
property: {
- name: property
+ name: property,
},
start: self => {
self.elt.parentNode.classList.add("boxmodel-editing");
},
change: value => {
if (NUMERIC.test(value)) {
value += "px";
}
const properties = [
- { name: property, value: value }
+ { name: property, value: value },
];
if (property.substring(0, 7) == "border-") {
const bprop = property.substring(0, property.length - 5) + "style";
const style = session.getProperty(bprop);
if (!style || style == "none" || style == "hidden") {
properties.push({ name: bprop, value: "solid" });
}
--- a/devtools/client/inspector/boxmodel/components/BoxModelMain.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelMain.js
@@ -56,46 +56,46 @@ class BoxModelMain extends PureComponent
const isContentBox = this.getContextBox();
this.layouts = {
"position": new Map([
[KeyCodes.DOM_VK_ESCAPE, this.positionLayout],
[KeyCodes.DOM_VK_DOWN, this.marginLayout],
[KeyCodes.DOM_VK_RETURN, this.positionEditable],
[KeyCodes.DOM_VK_UP, null],
- ["click", this.positionLayout]
+ ["click", this.positionLayout],
]),
"margin": new Map([
[KeyCodes.DOM_VK_ESCAPE, this.marginLayout],
[KeyCodes.DOM_VK_DOWN, this.borderLayout],
[KeyCodes.DOM_VK_RETURN, this.marginEditable],
[KeyCodes.DOM_VK_UP, displayPosition ? this.positionLayout : null],
- ["click", this.marginLayout]
+ ["click", this.marginLayout],
]),
"border": new Map([
[KeyCodes.DOM_VK_ESCAPE, this.borderLayout],
[KeyCodes.DOM_VK_DOWN, this.paddingLayout],
[KeyCodes.DOM_VK_RETURN, this.borderEditable],
[KeyCodes.DOM_VK_UP, this.marginLayout],
- ["click", this.borderLayout]
+ ["click", this.borderLayout],
]),
"padding": new Map([
[KeyCodes.DOM_VK_ESCAPE, this.paddingLayout],
[KeyCodes.DOM_VK_DOWN, isContentBox ? this.contentLayout : null],
[KeyCodes.DOM_VK_RETURN, this.paddingEditable],
[KeyCodes.DOM_VK_UP, this.borderLayout],
- ["click", this.paddingLayout]
+ ["click", this.paddingLayout],
]),
"content": new Map([
[KeyCodes.DOM_VK_ESCAPE, this.contentLayout],
[KeyCodes.DOM_VK_DOWN, null],
[KeyCodes.DOM_VK_RETURN, this.contentEditable],
[KeyCodes.DOM_VK_UP, this.paddingLayout],
- ["click", this.contentLayout]
- ])
+ ["click", this.contentLayout],
+ ]),
};
}
getAriaActiveDescendant() {
let { activeDescendant } = this.state;
if (!activeDescendant) {
const displayPosition = this.getDisplayPosition();
@@ -210,17 +210,17 @@ class BoxModelMain extends PureComponent
* Node to be observed
* @param {Boolean} shiftKey
* Determines if shiftKey was pressed
* @param {String} level
* Current active layout
*/
moveFocus({ target, shiftKey }, level) {
const editBoxes = [
- ...this.positionLayout.querySelectorAll(`[data-box="${level}"].boxmodel-editable`)
+ ...this.positionLayout.querySelectorAll(`[data-box="${level}"].boxmodel-editable`),
];
const editingMode = target.tagName === "input";
// target.nextSibling is input field
let position = editingMode ? editBoxes.indexOf(target.nextSibling)
: editBoxes.indexOf(target);
if (position === editBoxes.length - 1 && !shiftKey) {
position = 0;
@@ -420,26 +420,26 @@ class BoxModelMain extends PureComponent
box: "content",
focusable,
level,
property: "width",
ref: editable => {
this.contentEditable = editable;
},
textContent: width,
- onShowBoxModelEditor
+ onShowBoxModelEditor,
}),
dom.span({}, "\u00D7"),
BoxModelEditable({
box: "content",
focusable,
level,
property: "height",
textContent: height,
- onShowBoxModelEditor
+ onShowBoxModelEditor,
})
)
:
dom.p({ className: "boxmodel-size" },
dom.span({ title: "content" },
SHARED_L10N.getFormatStr("dimensions", width, height)
)
);
--- a/devtools/client/inspector/boxmodel/components/BoxModelProperties.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelProperties.js
@@ -51,17 +51,17 @@ class BoxModelProperties extends PureCom
getReferenceElement(propertyName) {
const value = this.props.boxModel.layout[propertyName];
if (propertyName === "position" &&
value !== "static" && value !== "fixed" &&
this.props.boxModel.offsetParent) {
return {
referenceElement: this.props.boxModel.offsetParent,
- referenceElementType: BOXMODEL_L10N.getStr("boxmodel.offsetParent")
+ referenceElementType: BOXMODEL_L10N.getStr("boxmodel.offsetParent"),
};
}
return {};
}
onToggleExpander(event) {
this.setState({
--- a/devtools/client/inspector/boxmodel/reducers/box-model.js
+++ b/devtools/client/inspector/boxmodel/reducers/box-model.js
@@ -8,17 +8,17 @@ const {
UPDATE_GEOMETRY_EDITOR_ENABLED,
UPDATE_LAYOUT,
UPDATE_OFFSET_PARENT,
} = require("../actions/index");
const INITIAL_BOX_MODEL = {
geometryEditorEnabled: false,
layout: {},
- offsetParent: null
+ offsetParent: null,
};
const reducers = {
[UPDATE_GEOMETRY_EDITOR_ENABLED](boxModel, { enabled }) {
return Object.assign({}, boxModel, {
geometryEditorEnabled: enabled,
});
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel.js
@@ -6,152 +6,152 @@
// Test that the box model displays the right values and that it updates when
// the node's style is changed
// Expected values:
var res1 = [
{
selector: ".boxmodel-element-size",
- value: "160" + "\u00D7" + "160.117"
+ value: "160" + "\u00D7" + "160.117",
},
{
selector: ".boxmodel-size > .boxmodel-width",
- value: "100"
+ value: "100",
},
{
selector: ".boxmodel-size > .boxmodel-height",
- value: "100.117"
+ value: "100.117",
},
{
selector: ".boxmodel-position.boxmodel-top > span",
- value: 42
+ value: 42,
},
{
selector: ".boxmodel-position.boxmodel-left > span",
- value: 42
+ value: 42,
},
{
selector: ".boxmodel-margin.boxmodel-top > span",
- value: 30
+ value: 30,
},
{
selector: ".boxmodel-margin.boxmodel-left > span",
- value: "auto"
+ value: "auto",
},
{
selector: ".boxmodel-margin.boxmodel-bottom > span",
- value: 30
+ value: 30,
},
{
selector: ".boxmodel-margin.boxmodel-right > span",
- value: "auto"
+ value: "auto",
},
{
selector: ".boxmodel-padding.boxmodel-top > span",
- value: 20
+ value: 20,
},
{
selector: ".boxmodel-padding.boxmodel-left > span",
- value: 20
+ value: 20,
},
{
selector: ".boxmodel-padding.boxmodel-bottom > span",
- value: 20
+ value: 20,
},
{
selector: ".boxmodel-padding.boxmodel-right > span",
- value: 20
+ value: 20,
},
{
selector: ".boxmodel-border.boxmodel-top > span",
- value: 10
+ value: 10,
},
{
selector: ".boxmodel-border.boxmodel-left > span",
- value: 10
+ value: 10,
},
{
selector: ".boxmodel-border.boxmodel-bottom > span",
- value: 10
+ value: 10,
},
{
selector: ".boxmodel-border.boxmodel-right > span",
- value: 10
+ value: 10,
},
];
var res2 = [
{
selector: ".boxmodel-element-size",
- value: "190" + "\u00D7" + "210"
+ value: "190" + "\u00D7" + "210",
},
{
selector: ".boxmodel-size > .boxmodel-width",
- value: "100"
+ value: "100",
},
{
selector: ".boxmodel-size > .boxmodel-height",
- value: "150"
+ value: "150",
},
{
selector: ".boxmodel-position.boxmodel-top > span",
- value: 50
+ value: 50,
},
{
selector: ".boxmodel-position.boxmodel-left > span",
- value: 42
+ value: 42,
},
{
selector: ".boxmodel-margin.boxmodel-top > span",
- value: 30
+ value: 30,
},
{
selector: ".boxmodel-margin.boxmodel-left > span",
- value: "auto"
+ value: "auto",
},
{
selector: ".boxmodel-margin.boxmodel-bottom > span",
- value: 30
+ value: 30,
},
{
selector: ".boxmodel-margin.boxmodel-right > span",
- value: "auto"
+ value: "auto",
},
{
selector: ".boxmodel-padding.boxmodel-top > span",
- value: 20
+ value: 20,
},
{
selector: ".boxmodel-padding.boxmodel-left > span",
- value: 20
+ value: 20,
},
{
selector: ".boxmodel-padding.boxmodel-bottom > span",
- value: 20
+ value: 20,
},
{
selector: ".boxmodel-padding.boxmodel-right > span",
- value: 50
+ value: 50,
},
{
selector: ".boxmodel-border.boxmodel-top > span",
- value: 10
+ value: 10,
},
{
selector: ".boxmodel-border.boxmodel-left > span",
- value: 10
+ value: 10,
},
{
selector: ".boxmodel-border.boxmodel-bottom > span",
- value: 10
+ value: 10,
},
{
selector: ".boxmodel-border.boxmodel-right > span",
- value: 10
+ value: 10,
},
];
add_task(async function() {
const style = "div { position: absolute; top: 42px; left: 42px; " +
"height: 100.111px; width: 100px; border: 10px solid black; " +
"padding: 20px; margin: 30px auto;}";
const html = "<style>" + style + "</style><div></div>";
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js
@@ -16,47 +16,47 @@ const TEST_URI = `
<div id="fixed" style="position: fixed"></div>
`;
const OFFSET_PARENT_SELECTOR = ".computed-property-value-container .objectBox-node";
const res1 = [
{
selector: "#absolute_child",
- offsetParentValue: "div#relative_parent"
+ offsetParentValue: "div#relative_parent",
},
{
selector: "#no_parent",
- offsetParentValue: "body"
+ offsetParentValue: "body",
},
{
selector: "#relative_parent",
- offsetParentValue: "body"
+ offsetParentValue: "body",
},
{
selector: "#static",
- offsetParentValue: null
+ offsetParentValue: null,
},
{
selector: "#fixed",
- offsetParentValue: null
+ offsetParentValue: null,
},
];
const updates = [
{
selector: "#absolute_child",
- update: "position: static"
+ update: "position: static",
},
];
const res2 = [
{
selector: "#absolute_child",
- offsetParentValue: null
+ offsetParentValue: null,
},
];
add_task(async function() {
await addTab("data:text/html," + encodeURIComponent(TEST_URI));
const { inspector, boxmodel, testActor } = await openLayoutView();
await testInitialValues(inspector, boxmodel);
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_positions.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_positions.js
@@ -21,29 +21,29 @@ const TEST_URI = `
</style>
<div>Test Node</div>
`;
// Expected values:
const res1 = [
{
selector: ".boxmodel-position.boxmodel-top > span",
- value: "auto"
+ value: "auto",
},
{
selector: ".boxmodel-position.boxmodel-right > span",
- value: "auto"
+ value: "auto",
},
{
selector: ".boxmodel-position.boxmodel-bottom > span",
- value: "auto"
+ value: "auto",
},
{
selector: ".boxmodel-position.boxmodel-left > span",
- value: 0
+ value: 0,
},
];
add_task(async function() {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const {inspector, boxmodel} = await openLayoutView();
const node = await getNodeFront("div", inspector);
const children = await inspector.markup.walker.children(node);
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_properties.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_properties.js
@@ -23,64 +23,64 @@ const TEST_URI = `
}
</style>
<div>Test Node</div>
`;
const res1 = [
{
property: "box-sizing",
- value: "border-box"
+ value: "border-box",
},
{
property: "display",
- value: "block"
+ value: "block",
},
{
property: "float",
- value: "left"
+ value: "left",
},
{
property: "line-height",
- value: "20px"
+ value: "20px",
},
{
property: "position",
- value: "relative"
+ value: "relative",
},
{
property: "z-index",
- value: 2
+ value: 2,
},
];
const res2 = [
{
property: "box-sizing",
- value: "content-box"
+ value: "content-box",
},
{
property: "display",
- value: "block"
+ value: "block",
},
{
property: "float",
- value: "right"
+ value: "right",
},
{
property: "line-height",
- value: "10px"
+ value: "10px",
},
{
property: "position",
- value: "static"
+ value: "static",
},
{
property: "z-index",
- value: 5
+ value: 5,
},
];
add_task(async function() {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, boxmodel, testActor } = await openLayoutView();
await selectNode("div", inspector);
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_pseudo-element.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_pseudo-element.js
@@ -32,73 +32,73 @@ const TEST_URI = `
</style>
<div>Test Node</div>
`;
// Expected values:
const res1 = [
{
selector: ".boxmodel-element-size",
- value: "32" + "\u00D7" + "32"
+ value: "32" + "\u00D7" + "32",
},
{
selector: ".boxmodel-size > .boxmodel-width",
- value: "32"
+ value: "32",
},
{
selector: ".boxmodel-size > .boxmodel-height",
- value: "32"
+ value: "32",
},
{
selector: ".boxmodel-margin.boxmodel-top > span",
- value: 0
+ value: 0,
},
{
selector: ".boxmodel-margin.boxmodel-left > span",
- value: 4 // (100 - (10 * 2) - (20 * 2) - 32) / 2
+ value: 4, // (100 - (10 * 2) - (20 * 2) - 32) / 2
},
{
selector: ".boxmodel-margin.boxmodel-bottom > span",
- value: 6
+ value: 6,
},
{
selector: ".boxmodel-margin.boxmodel-right > span",
- value: 4 // (100 - (10 * 2) - (20 * 2) - 32) / 2
+ value: 4, // (100 - (10 * 2) - (20 * 2) - 32) / 2
},
{
selector: ".boxmodel-padding.boxmodel-top > span",
- value: 0
+ value: 0,
},
{
selector: ".boxmodel-padding.boxmodel-left > span",
- value: 0
+ value: 0,
},
{
selector: ".boxmodel-padding.boxmodel-bottom > span",
- value: 0
+ value: 0,
},
{
selector: ".boxmodel-padding.boxmodel-right > span",
- value: 0
+ value: 0,
},
{
selector: ".boxmodel-border.boxmodel-top > span",
- value: 0
+ value: 0,
},
{
selector: ".boxmodel-border.boxmodel-left > span",
- value: 0
+ value: 0,
},
{
selector: ".boxmodel-border.boxmodel-bottom > span",
- value: 0
+ value: 0,
},
{
selector: ".boxmodel-border.boxmodel-right > span",
- value: 0
+ value: 0,
},
];
add_task(async function() {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const {inspector, boxmodel} = await openLayoutView();
const node = await getNodeFront("div", inspector);
const children = await inspector.markup.walker.children(node);
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_rotate-labels-on-sides.js
@@ -21,17 +21,17 @@ const res1 = [
{selector: ".boxmodel-border.boxmodel-right > span", value: 10},
];
const TEST_URI = encodeURIComponent([
"<style>",
"div { border:10px solid black; padding: 20px 20px 20px 2000000px; " +
"margin: 30px auto; }",
"</style>",
- "<div></div>"
+ "<div></div>",
].join(""));
const LONG_TEXT_ROTATE_LIMIT = 3;
add_task(async function() {
await addTab("data:text/html," + TEST_URI);
const {inspector, boxmodel} = await openLayoutView();
await selectNode("div", inspector);
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_tooltips.js
@@ -23,56 +23,56 @@ const TEST_URI = "<style>" +
// - name: the name of the property that is set by the css rule
// - ruleSelector: the selector of the rule
// - styleSheetLocation: the fileName:lineNumber
const VALUES_TEST_DATA = [{
selector: "#div1",
values: [{
name: "margin-top",
ruleSelector: "#div1",
- styleSheetLocation: "inline:1"
+ styleSheetLocation: "inline:1",
}, {
name: "margin-right",
ruleSelector: "#div1",
- styleSheetLocation: "inline:1"
+ styleSheetLocation: "inline:1",
}, {
name: "margin-bottom",
ruleSelector: "#div1",
- styleSheetLocation: "inline:1"
+ styleSheetLocation: "inline:1",
}, {
name: "margin-left",
ruleSelector: "#div1",
- styleSheetLocation: "inline:1"
- }]
+ styleSheetLocation: "inline:1",
+ }],
}, {
selector: "#div2",
values: [{
name: "border-bottom-width",
ruleSelector: "#div2",
- styleSheetLocation: "inline:2"
- }]
+ styleSheetLocation: "inline:2",
+ }],
}, {
selector: "#div3",
values: [{
name: "padding-top",
ruleSelector: "html, body, #div3",
- styleSheetLocation: "inline:3"
+ styleSheetLocation: "inline:3",
}, {
name: "padding-right",
ruleSelector: "html, body, #div3",
- styleSheetLocation: "inline:3"
+ styleSheetLocation: "inline:3",
}, {
name: "padding-bottom",
ruleSelector: "html, body, #div3",
- styleSheetLocation: "inline:3"
+ styleSheetLocation: "inline:3",
}, {
name: "padding-left",
ruleSelector: "html, body, #div3",
- styleSheetLocation: "inline:3"
- }]
+ styleSheetLocation: "inline:3",
+ }],
}];
add_task(async function() {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const {inspector, boxmodel} = await openLayoutView();
info("Checking the regions tooltips");
--- a/devtools/client/inspector/boxmodel/utils/editing-session.js
+++ b/devtools/client/inspector/boxmodel/utils/editing-session.js
@@ -174,12 +174,12 @@ EditingSession.prototype = {
destroy: function() {
this._modifications.clear();
this._cssProperties = null;
this._doc = null;
this._inspector = null;
this._modifications = null;
this._rules = null;
- }
+ },
};
module.exports = EditingSession;
--- a/devtools/client/inspector/breadcrumbs.js
+++ b/devtools/client/inspector/breadcrumbs.js
@@ -744,17 +744,17 @@ HTMLBreadcrumbs.prototype = {
while (node && node != stopNode) {
if (node.tagName || node.isShadowRoot) {
const button = this.buildButton(node);
fragment.insertBefore(button, lastButtonInserted);
lastButtonInserted = button;
this.nodeHierarchy.splice(originalLength, 0, {
node,
button,
- currentPrettyPrintText: this.prettyPrintNodeAsText(node)
+ currentPrettyPrintText: this.prettyPrintNodeAsText(node),
});
}
node = node.parentOrHost();
}
this.container.appendChild(fragment, this.container.firstChild);
},
/**
@@ -940,10 +940,10 @@ HTMLBreadcrumbs.prototype = {
doneUpdating();
} catch (e) {
// Only log this as an error if we haven't been destroyed in the meantime.
if (!this.isDestroyed) {
console.error(e);
}
}
}, 0);
- }
+ },
};
--- a/devtools/client/inspector/changes/components/ChangesApp.js
+++ b/devtools/client/inspector/changes/components/ChangesApp.js
@@ -7,17 +7,17 @@
const { PureComponent } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const { connect } = require("devtools/client/shared/vendor/react-redux");
class ChangesApp extends PureComponent {
static get propTypes() {
return {
- changes: PropTypes.object.isRequired
+ changes: PropTypes.object.isRequired,
};
}
renderMutations(remove = {}, add = {}) {
const removals = Object.entries(remove).map(([prop, value]) => {
return dom.div(
{ className: "line diff-remove"},
`${prop}: ${value};`
@@ -63,16 +63,16 @@ class ChangesApp extends PureComponent {
);
});
}
render() {
return dom.div(
{
className: "theme-sidebar inspector-tabpanel",
- id: "sidebar-panel-changes"
+ id: "sidebar-panel-changes",
},
this.renderDiff(this.props.changes.diff)
);
}
}
module.exports = connect(state => state)(ChangesApp);
--- a/devtools/client/inspector/changes/reducers/changes.js
+++ b/devtools/client/inspector/changes/reducers/changes.js
@@ -96,17 +96,17 @@ function updateDiff(diff = {}, change =
const reducers = {
[TRACK_CHANGE](state, { data }) {
const defaults = {
href: "",
selector: "",
tag: null,
add: null,
- remove: null
+ remove: null,
};
data = { ...defaults, ...data };
// Update the state in-place with data about a style change (no deep clone of state).
// TODO: redefine state as a shallow object structure after figuring how to track
// both CSS Declarations and CSS Rules and At-Rules (@media, @keyframes, etc).
// @See https://bugzilla.mozilla.org/show_bug.cgi?id=1491263
--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -341,17 +341,17 @@ CssComputedView.prototype = {
for (const child of node.childNodes[0].childNodes) {
if (child.nodeType === node.TEXT_NODE) {
selectorText += child.textContent;
}
}
return {
type: VIEW_NODE_SELECTOR_TYPE,
- value: selectorText.trim()
+ value: selectorText.trim(),
};
}
// Walk up the nodes to find out where node is
let propertyView;
let propertyContent;
let parent = node;
while (parent.parentNode) {
@@ -373,39 +373,39 @@ CssComputedView.prototype = {
// Get the property and value for a node that's a property name or value
const isHref = classes.contains("theme-link") && !classes.contains("computed-link");
if (propertyView && (classes.contains("computed-property-name") ||
classes.contains("computed-property-value") ||
isHref)) {
value = {
property: parent.querySelector(".computed-property-name").firstChild.textContent,
- value: parent.querySelector(".computed-property-value").textContent
+ value: parent.querySelector(".computed-property-value").textContent,
};
}
if (propertyContent && (classes.contains("computed-other-property-value") ||
isHref)) {
const view = propertyContent.previousSibling;
value = {
property: view.querySelector(".computed-property-name").firstChild.textContent,
- value: node.textContent
+ value: node.textContent,
};
}
if (classes.contains("computed-font-family")) {
if (propertyView) {
value = {
property: parent.querySelector(
".computed-property-name").firstChild.textContent,
- value: node.parentNode.textContent
+ value: node.parentNode.textContent,
};
} else if (propertyContent) {
const view = propertyContent.previousSibling;
value = {
property: view.querySelector(".computed-property-name").firstChild.textContent,
- value: node.parentNode.textContent
+ value: node.parentNode.textContent,
};
} else {
return null;
}
}
// Get the type
if (classes.contains("computed-property-name")) {
@@ -455,17 +455,17 @@ CssComputedView.prototype = {
onCancel: () => {
reject("_createPropertyViews cancelled");
},
onDone: () => {
// Completed callback.
this.element.appendChild(fragment);
this.noResults.hidden = this.numVisibleProperties > 0;
resolve(undefined);
- }
+ },
}
);
});
this._createViewsProcess.schedule();
return this._createViewsPromise;
},
@@ -482,18 +482,18 @@ CssComputedView.prototype = {
// early if it changed
const viewedElement = this._viewedElement;
return promise.all([
this._createPropertyViews(),
this.pageStyle.getComputed(this._viewedElement, {
filter: this._sourceFilter,
onlyMatched: !this.includeBrowserStyles,
- markMatched: true
- })
+ markMatched: true,
+ }),
]).then(([, computed]) => {
if (viewedElement !== this._viewedElement) {
return promise.resolve();
}
this._matchedProperties = new Set();
for (const name in computed) {
if (computed[name].matched) {
@@ -533,17 +533,17 @@ CssComputedView.prototype = {
.add("devtools-style-searchbox-no-match");
} else {
this.searchField.classList
.remove("devtools-style-searchbox-no-match");
}
this.inspector.emit("computed-view-refreshed");
resolve(undefined);
- }
+ },
}
);
this._refreshProcess.schedule();
});
}).catch(console.error);
},
/**
@@ -789,32 +789,32 @@ CssComputedView.prototype = {
}
this.propertyViews = null;
this.inspector = null;
this.styleDocument = null;
this.styleWindow = null;
this._isDestroyed = true;
- }
+ },
};
function PropertyInfo(tree, name) {
this.tree = tree;
this.name = name;
}
PropertyInfo.prototype = {
get value() {
if (this.tree._computed) {
const value = this.tree._computed[this.name].value;
return value;
}
return null;
- }
+ },
};
/**
* A container to give easy access to property data from the template engine.
*
* @param {CssComputedView} tree
* The CssComputedView instance we are working with.
* @param {String} name
@@ -947,17 +947,17 @@ PropertyView.prototype = {
this.element = doc.createElementNS(HTML_NS, "div");
this.element.setAttribute("class", this.propertyHeaderClassName);
this.element.addEventListener("dblclick", this.onMatchedToggle);
// Make it keyboard navigable
this.element.setAttribute("tabindex", "0");
this.shortcuts = new KeyShortcuts({
window: this.tree.styleWindow,
- target: this.element
+ target: this.element,
});
this.shortcuts.on("F1", event => {
this.mdnLinkClick(event);
// Prevent opening the options panel
event.preventDefault();
event.stopPropagation();
});
this.shortcuts.on("Return", this.onMatchedToggle);
@@ -1109,46 +1109,46 @@ PropertyView.prototype = {
},
_buildMatchedSelectors: function() {
const frag = this.element.ownerDocument.createDocumentFragment();
for (const selector of this.matchedSelectorViews) {
const p = createChild(frag, "p");
const span = createChild(p, "span", {
- class: "rule-link"
+ class: "rule-link",
});
const link = createChild(span, "a", {
target: "_blank",
class: "computed-link theme-link",
title: selector.href,
sourcelocation: selector.source,
tabindex: "0",
- textContent: selector.source
+ textContent: selector.source,
});
link.addEventListener("click", selector.openStyleEditor);
const shortcuts = new KeyShortcuts({
window: this.tree.styleWindow,
- target: link
+ target: link,
});
shortcuts.on("Return", () => selector.openStyleEditor());
const status = createChild(p, "span", {
dir: "ltr",
class: "rule-text theme-fg-color3 " + selector.statusClass,
- title: selector.statusText
+ title: selector.statusText,
});
createChild(status, "div", {
class: "fix-get-selection",
- textContent: selector.sourceText
+ textContent: selector.sourceText,
});
const valueDiv = createChild(status, "div", {
- class: "fix-get-selection computed-other-property-value theme-fg-color1"
+ class: "fix-get-selection computed-other-property-value theme-fg-color1",
});
valueDiv.appendChild(selector.outputFragment);
}
this.matchedSelectorsContainer.innerHTML = "";
this.matchedSelectorsContainer.appendChild(frag);
},
@@ -1207,17 +1207,17 @@ PropertyView.prototype = {
this.matchedExpander.removeEventListener("click", this.onMatchedToggle);
this.matchedExpander = null;
this.nameNode.removeEventListener("click", this.onFocus);
this.nameNode = null;
this.valueNode.removeEventListener("click", this.onFocus);
this.valueNode = null;
- }
+ },
};
/**
* A container to give us easy access to display data from a CssRule
*
* @param CssComputedView tree
* the owning CssComputedView
* @param selectorInfo
@@ -1255,17 +1255,17 @@ function SelectorView(tree, selectorInfo
* @see SelectorView.prototype._cacheStatusNames
* @see CssLogic.STATUS
*/
SelectorView.STATUS_NAMES = [
// "Parent Match", "Matched", "Best Match"
];
SelectorView.CLASS_NAMES = [
- "parentmatch", "matched", "bestmatch"
+ "parentmatch", "matched", "bestmatch",
];
SelectorView.prototype = {
/**
* Cache localized status names.
*
* These statuses are localized inside the styleinspector.properties string
* bundle.
@@ -1325,17 +1325,17 @@ SelectorView.prototype = {
const outputParser = this.tree._outputParser;
const frag = outputParser.parseCssProperty(
this.selectorInfo.name,
this.selectorInfo.value, {
colorSwatchClass: "computed-colorswatch",
colorClass: "computed-color",
urlClass: "theme-link",
fontFamilyClass: "computed-font-family",
- baseURI: this.selectorInfo.rule.href
+ baseURI: this.selectorInfo.rule.href,
}
);
return frag;
},
/**
* Update the text of the source link to reflect whether we're showing
* original sources or not. This is a callback for
@@ -1512,14 +1512,14 @@ ComputedViewTool.prototype = {
this.inspector.sidebar.off("computedview-selected", this.onPanelSelected);
if (this.inspector.pageStyle) {
this.inspector.pageStyle.off("stylesheet-updated", this.refresh);
}
this.computedView.destroy();
this.computedView = this.document = this.inspector = null;
- }
+ },
};
exports.CssComputedView = CssComputedView;
exports.ComputedViewTool = ComputedViewTool;
exports.PropertyView = PropertyView;
--- a/devtools/client/inspector/computed/test/browser_computed_cycle_color.js
+++ b/devtools/client/inspector/computed/test/browser_computed_cycle_color.js
@@ -34,42 +34,42 @@ async function checkColorCycling(contain
const win = view.styleWindow;
// "Authored" (default; currently the computed value)
is(valueNode.textContent, "rgb(255, 0, 0)",
"Color displayed as an RGB value.");
const tests = [{
value: "red",
- comment: "Color displayed as a color name."
+ comment: "Color displayed as a color name.",
}, {
value: "#f00",
- comment: "Color displayed as an authored value."
+ comment: "Color displayed as an authored value.",
}, {
value: "hsl(0, 100%, 50%)",
- comment: "Color displayed as an HSL value again."
+ comment: "Color displayed as an HSL value again.",
}, {
value: "rgb(255, 0, 0)",
- comment: "Color displayed as an RGB value again."
+ comment: "Color displayed as an RGB value again.",
}];
for (const test of tests) {
await checkSwatchShiftClick(container, win, test.value, test.comment);
}
}
async function checkSwatchShiftClick(container, win, expectedValue, comment) {
const swatch = container.querySelector(".computed-colorswatch");
const valueNode = container.querySelector(".computed-color");
swatch.scrollIntoView();
const onUnitChange = swatch.once("unit-change");
EventUtils.synthesizeMouseAtCenter(swatch, {
type: "mousedown",
- shiftKey: true
+ shiftKey: true,
}, win);
// we need to have the mouse up event in order to make sure that the platform
// lets go of the last container, and is not waiting for something to happen.
// Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1442153
EventUtils.synthesizeMouseAtCenter(swatch, {type: "mouseup"}, win);
await onUnitChange;
is(valueNode.textContent, expectedValue, comment);
}
--- a/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
+++ b/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
@@ -15,17 +15,17 @@
// Since the code to make this work for the computed-view is 90% the same,
// there is no need for testing it again here.
// This test however serves as a unit test for getNodeInfo.
const {
VIEW_NODE_SELECTOR_TYPE,
VIEW_NODE_PROPERTY_TYPE,
VIEW_NODE_VALUE_TYPE,
- VIEW_NODE_IMAGE_URL_TYPE
+ VIEW_NODE_IMAGE_URL_TYPE,
} = require("devtools/client/inspector/shared/node-types");
const TEST_URI = `
<style type="text/css">
body {
background: red;
color: white;
}
@@ -50,124 +50,124 @@ const TEST_URI = `
const TEST_DATA = [
{
desc: "Testing a null node",
getHoveredNode: function() {
return null;
},
assertNodeInfo: function(nodeInfo) {
is(nodeInfo, null);
- }
+ },
},
{
desc: "Testing a useless node",
getHoveredNode: function(view) {
return view.element;
},
assertNodeInfo: function(nodeInfo) {
is(nodeInfo, null);
- }
+ },
},
{
desc: "Testing a property name",
getHoveredNode: function(view) {
return getComputedViewProperty(view, "color").nameSpan;
},
assertNodeInfo: function(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_PROPERTY_TYPE);
ok("property" in nodeInfo.value);
ok("value" in nodeInfo.value);
is(nodeInfo.value.property, "color");
is(nodeInfo.value.value, "rgb(255, 0, 0)");
- }
+ },
},
{
desc: "Testing a property value",
getHoveredNode: function(view) {
return getComputedViewProperty(view, "color").valueSpan;
},
assertNodeInfo: function(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
ok("property" in nodeInfo.value);
ok("value" in nodeInfo.value);
is(nodeInfo.value.property, "color");
is(nodeInfo.value.value, "rgb(255, 0, 0)");
- }
+ },
},
{
desc: "Testing an image url",
getHoveredNode: function(view) {
const {valueSpan} = getComputedViewProperty(view, "background-image");
return valueSpan.querySelector(".theme-link");
},
assertNodeInfo: function(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_IMAGE_URL_TYPE);
ok("property" in nodeInfo.value);
ok("value" in nodeInfo.value);
is(nodeInfo.value.property, "background-image");
is(nodeInfo.value.value,
"url(\"chrome://global/skin/icons/warning-64.png\")");
is(nodeInfo.value.url, "chrome://global/skin/icons/warning-64.png");
- }
+ },
},
{
desc: "Testing a matched rule selector (bestmatch)",
getHoveredNode: async function(view) {
const el = await getComputedViewMatchedRules(view, "background-color");
return el.querySelector(".bestmatch");
},
assertNodeInfo: function(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
is(nodeInfo.value, "div div");
- }
+ },
},
{
desc: "Testing a matched rule selector (matched)",
getHoveredNode: async function(view) {
const el = await getComputedViewMatchedRules(view, "background-color");
return el.querySelector(".matched");
},
assertNodeInfo: function(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
is(nodeInfo.value, "div");
- }
+ },
},
{
desc: "Testing a matched rule selector (parentmatch)",
getHoveredNode: async function(view) {
const el = await getComputedViewMatchedRules(view, "color");
return el.querySelector(".parentmatch");
},
assertNodeInfo: function(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
is(nodeInfo.value, "body");
- }
+ },
},
{
desc: "Testing a matched rule value",
getHoveredNode: async function(view) {
const el = await getComputedViewMatchedRules(view, "color");
return el.querySelector(".computed-other-property-value");
},
assertNodeInfo: function(nodeInfo) {
is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
is(nodeInfo.value.property, "color");
is(nodeInfo.value.value, "red");
- }
+ },
},
{
desc: "Testing a matched rule stylesheet link",
getHoveredNode: async function(view) {
const el = await getComputedViewMatchedRules(view, "color");
return el.querySelector(".rule-link .theme-link");
},
assertNodeInfo: function(nodeInfo) {
is(nodeInfo, null);
- }
- }
+ },
+ },
];
add_task(async function() {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const {inspector, view} = await openComputedView();
await selectNode("#testElement", inspector);
for (const {desc, getHoveredNode, assertNodeInfo} of TEST_DATA) {
--- a/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-01.js
+++ b/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-01.js
@@ -43,17 +43,17 @@ add_task(async function() {
async function testCopySome(view) {
const expectedPattern = "font-family: helvetica, sans-serif;[\\r\\n]+" +
"font-size: 16px;[\\r\\n]+" +
"font-variant-caps: small-caps;[\\r\\n]*";
await copySomeTextAndCheckClipboard(view, {
start: {prop: 1, offset: 0},
- end: {prop: 3, offset: 2}
+ end: {prop: 3, offset: 2},
}, expectedPattern);
}
async function testCopyAll(view) {
const expectedPattern = "color: rgb\\(255, 255, 0\\);[\\r\\n]+" +
"font-family: helvetica, sans-serif;[\\r\\n]+" +
"font-size: 16px;[\\r\\n]+" +
"font-variant-caps: small-caps;[\\r\\n]*";
--- a/devtools/client/inspector/extensions/actions/index.js
+++ b/devtools/client/inspector/extensions/actions/index.js
@@ -13,11 +13,11 @@ createEnum([
// Update the extension sidebar with an object value grip preview.
"EXTENSION_SIDEBAR_OBJECT_GRIP_VIEW_UPDATE",
// Switch the extension sidebar into an extension page container.
"EXTENSION_SIDEBAR_PAGE_UPDATE",
// Remove an extension sidebar from the inspector store.
- "EXTENSION_SIDEBAR_REMOVE"
+ "EXTENSION_SIDEBAR_REMOVE",
], module.exports);
--- a/devtools/client/inspector/extensions/actions/sidebar.js
+++ b/devtools/client/inspector/extensions/actions/sidebar.js
@@ -50,11 +50,11 @@ module.exports = {
/**
* Remove the extension sidebar from the inspector store.
*/
removeExtensionSidebar(sidebarId) {
return {
type: EXTENSION_SIDEBAR_REMOVE,
sidebarId,
};
- }
+ },
};
--- a/devtools/client/inspector/extensions/components/ObjectValueGripView.js
+++ b/devtools/client/inspector/extensions/components/ObjectValueGripView.js
@@ -44,17 +44,17 @@ class ObjectValueGripView extends PureCo
mode: MODE.SHORT,
// TODO: we disable focus since it's not currently working well in ObjectInspector.
// Let's remove the property below when problem are fixed in OI.
disabledFocus: true,
roots: [{
path: objectValueGrip && objectValueGrip.actor || JSON.stringify(objectValueGrip),
contents: {
value: objectValueGrip,
- }
+ },
}],
createObjectClient: serviceContainer.createObjectClient,
releaseActor: serviceContainer.releaseActor,
// TODO: evaluate if there should also be a serviceContainer.openLink.
};
if (objectValueGrip && objectValueGrip.actor) {
Object.assign(objectInspectorProps, {
--- a/devtools/client/inspector/extensions/extension-sidebar.js
+++ b/devtools/client/inspector/extensions/extension-sidebar.js
@@ -95,21 +95,21 @@ class ExtensionSidebar {
if (!highlighterUtils) {
return null;
}
const front = await highlighterUtils.gripToNodeFront(grip);
const onInspectorUpdated = this.inspector.once("inspector-updated");
const onNodeFrontSet = this.inspector.toolbox.selection.setNodeFront(front, {
- reason: "inspector-extension-sidebar"
+ reason: "inspector-extension-sidebar",
});
return Promise.all([onNodeFrontSet, onInspectorUpdated]);
- }
+ },
},
}));
}
return this._provider;
}
/**
--- a/devtools/client/inspector/extensions/reducers/sidebar.js
+++ b/devtools/client/inspector/extensions/reducers/sidebar.js
@@ -17,42 +17,42 @@ const reducers = {
[EXTENSION_SIDEBAR_OBJECT_TREEVIEW_UPDATE](sidebar, {sidebarId, object}) {
// Update the sidebar to a "object-treeview" which shows
// the passed object.
return Object.assign({}, sidebar, {
[sidebarId]: {
viewMode: "object-treeview",
object,
- }
+ },
});
},
[EXTENSION_SIDEBAR_OBJECT_GRIP_VIEW_UPDATE](
sidebar, {sidebarId, objectValueGrip, rootTitle}
) {
// Update the sidebar to a "object-treeview" which shows
// the passed object.
return Object.assign({}, sidebar, {
[sidebarId]: {
viewMode: "object-value-grip-view",
objectValueGrip,
rootTitle,
- }
+ },
});
},
[EXTENSION_SIDEBAR_PAGE_UPDATE](sidebar, {sidebarId, iframeURL}) {
// Update the sidebar to a "object-treeview" which shows
// the passed object.
return Object.assign({}, sidebar, {
[sidebarId]: {
viewMode: "extension-page",
iframeURL,
- }
+ },
});
},
[EXTENSION_SIDEBAR_REMOVE](sidebar, {sidebarId}) {
// Remove the sidebar from the Redux store.
delete sidebar[sidebarId];
return Object.assign({}, sidebar);
},
--- a/devtools/client/inspector/extensions/test/browser_inspector_extension_sidebar.js
+++ b/devtools/client/inspector/extensions/test/browser_inspector_extension_sidebar.js
@@ -16,17 +16,17 @@ let fakeExtCallerInfo;
let toolbox;
let inspector;
add_task(async function setupExtensionSidebar() {
extension = ExtensionTestUtils.loadExtension({
background() {
// This is just an empty extension used to ensure that the caller extension uuid
// actually exists.
- }
+ },
});
await extension.startup();
fakeExtCallerInfo = {
url: WebExtensionPolicy.getByID(extension.id).getURL("fake-caller-script.js"),
lineNumber: 1,
addonId: extension.id,
@@ -118,17 +118,17 @@ add_task(async function testSidebarSetOb
obj.prop1 = 123;
obj[Symbol('sym1')] = 456;
obj.cyclic = obj;
obj;
`;
const evalResult = await inspectedWindowFront.eval(fakeExtCallerInfo, expression, {
evalResultAsGrip: true,
- toolboxConsoleActorID: toolbox.target.form.consoleActor
+ toolboxConsoleActorID: toolbox.target.form.consoleActor,
});
sidebar.setObjectValueGrip(evalResult.valueGrip, "Expected Root Title");
// Wait the ObjectInspector component to be rendered and test its content.
await testSetExpressionSidebarPanel(sidebarPanelContent, {
nodesLength: 4,
propertiesNames: ["cyclic", "prop1", "Symbol(sym1)"],
@@ -152,17 +152,17 @@ add_task(async function testSidebarDOMNo
const inspectedWindowFront = toolbox.target.getFront("webExtensionInspectedWindow");
const sidebar = inspector.getPanel(SIDEBAR_ID);
const sidebarPanelContent = inspector.sidebar.getTabPanel(SIDEBAR_ID);
const expression = "({ body: document.body })";
const evalResult = await inspectedWindowFront.eval(fakeExtCallerInfo, expression, {
evalResultAsGrip: true,
- toolboxConsoleActorID: toolbox.target.form.consoleActor
+ toolboxConsoleActorID: toolbox.target.form.consoleActor,
});
sidebar.setObjectValueGrip(evalResult.valueGrip);
// Wait the DOM node to be rendered inside the component.
await waitForObjectInspector(sidebarPanelContent, "node");
// Wait for the object to be expanded so we only target the "body" property node, and
--- a/devtools/client/inspector/extensions/test/head_devtools_inspector_sidebar.js
+++ b/devtools/client/inspector/extensions/test/head_devtools_inspector_sidebar.js
@@ -115,17 +115,17 @@ async function testSetExpressionSidebarP
"Got no Accordion component as expected");
}
}
function assertTreeView(panelDoc, expectedContent) {
const {
expectedTreeTables,
expectedStringCells,
- expectedNumberCells
+ expectedNumberCells,
} = expectedContent;
if (expectedTreeTables) {
is(panelDoc.querySelectorAll("table.treeTable").length, expectedTreeTables,
"The panel document contains the expected number of TreeView components");
}
if (expectedStringCells) {
--- a/devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js
+++ b/devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js
@@ -35,26 +35,26 @@ class FlexItemSizingOutline extends Pure
if (!mainDeltaSize) {
return null;
}
return (
dom.div({
className: "flex-outline-delta",
style: {
- backgroundColor: colorUtils.setAlpha(this.props.color, 0.1)
- }
+ backgroundColor: colorUtils.setAlpha(this.props.color, 0.1),
+ },
})
);
}
renderFinalOutline(mainFinalSize, mainMaxSize, mainMinSize, isClamped) {
return (
dom.div({
- className: "flex-outline-final" + (isClamped ? " clamped" : "")
+ className: "flex-outline-final" + (isClamped ? " clamped" : ""),
})
);
}
renderPoint(name) {
return dom.div({ className: `flex-outline-point ${name}`, "data-label": name });
}
@@ -95,17 +95,17 @@ class FlexItemSizingOutline extends Pure
// TODO: replace this with the new clamping state that the API will return once bug
// 1498273 is fixed.
const showMin = mainMinSize === mainFinalSize && properties[`min-${dimension}`];
// Sort all of the dimensions in order to come up with a grid track template.
// Make mainDeltaSize start from the same point as the other ones so we can compare.
let sizes = [
{ name: "basis-end", size: mainBaseSize },
- { name: "final-end", size: mainFinalSize }
+ { name: "final-end", size: mainFinalSize },
];
if (mainDeltaSize > 0) {
sizes.push({ name: "delta-start", size: mainBaseSize });
sizes.push({ name: "delta-end", size: mainBaseSize + mainDeltaSize });
} else {
sizes.push({ name: "delta-start", size: mainBaseSize + mainDeltaSize });
sizes.push({ name: "delta-end", size: mainBaseSize });
@@ -138,18 +138,18 @@ class FlexItemSizingOutline extends Pure
dom.div({ className: "flex-outline-container" },
dom.div(
{
className: "flex-outline" +
(isRow ? " row" : " column") +
(mainDeltaSize > 0 ? " growing" : " shrinking"),
style: {
color: this.props.color,
- gridTemplateColumns
- }
+ gridTemplateColumns,
+ },
},
this.renderPoint("basis"),
this.renderPoint("final"),
showMin ? this.renderPoint("min") : null,
showMax ? this.renderPoint("max") : null,
this.renderBasisOutline(mainBaseSize),
this.renderDeltaOutline(mainDeltaSize),
this.renderFinalOutline(mainFinalSize, mainMaxSize, mainMinSize,
--- a/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
+++ b/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
@@ -136,17 +136,17 @@ class FlexItemSizingProperties extends P
);
}
renderFlexibilitySection(flexItemSizing, properties) {
const {
mainDeltaSize,
mainBaseSize,
mainFinalSize,
- lineGrowthState
+ lineGrowthState,
} = flexItemSizing;
// Don't attempt to display anything useful if everything is 0.
if (!mainFinalSize && !mainBaseSize && !mainDeltaSize) {
return null;
}
const flexGrow = properties["flex-grow"];
--- a/devtools/client/inspector/flexbox/components/Header.js
+++ b/devtools/client/inspector/flexbox/components/Header.js
@@ -126,17 +126,17 @@ class Header extends PureComponent {
className: "flex-header-button-prev devtools-button",
onClick: () => setSelectedNode(nodeFront),
})
:
null,
dom.div(
{
className: "flex-header-content" +
- (flexItemShown ? " flex-item-shown" : "")
+ (flexItemShown ? " flex-item-shown" : ""),
},
this.renderFlexContainer(),
this.renderFlexItemSelector()
),
this.renderFlexboxHighlighterToggle()
)
);
}
--- a/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_has_correct_layout.js
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_has_correct_layout.js
@@ -9,29 +9,29 @@
// this grid has been correctly generated depending on the item that is currently
// selected.
const TEST_URI = URL_ROOT + "doc_flexbox_simple.html";
const TEST_DATA = [{
selector: ".shrinking .item",
expectedGridTemplate: "[final-start basis-start] 300fr [final-end delta-start] " +
- "200fr [basis-end delta-end]"
+ "200fr [basis-end delta-end]",
}, {
selector: ".shrinking.is-clamped .item",
expectedGridTemplate: "[final-start basis-start] 300fr [delta-start] " +
- "50fr [final-end min] 150fr [basis-end delta-end]"
+ "50fr [final-end min] 150fr [basis-end delta-end]",
}, {
selector: ".growing .item",
expectedGridTemplate: "[final-start basis-start] 200fr [basis-end delta-start] " +
- "100fr [final-end delta-end]"
+ "100fr [final-end delta-end]",
}, {
selector: ".growing.is-clamped .item",
expectedGridTemplate: "[final-start basis-start] 200fr [basis-end delta-start] " +
- "50fr [final-end max] 50fr [delta-end]"
+ "50fr [final-end max] 50fr [delta-end]",
}];
add_task(async function() {
await addTab(TEST_URI);
const { inspector, flexboxInspector } = await openLayoutView();
const { document: doc } = flexboxInspector;
for (const {selector, expectedGridTemplate} of TEST_DATA) {
--- a/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_has_correct_sections.js
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_has_correct_sections.js
@@ -7,26 +7,26 @@
// Test that the flex item sizing UI contains the right sections, depending on which
// element is selected. Some items may be clamped, others not, so not all sections are
// visible at all times.
const TEST_URI = URL_ROOT + "doc_flexbox_simple.html";
const TEST_DATA = [{
selector: ".shrinking .item",
- expectedSections: ["Base Size", "Flexibility", "Final Size"]
+ expectedSections: ["Base Size", "Flexibility", "Final Size"],
}, {
selector: ".shrinking.is-clamped .item",
- expectedSections: ["Base Size", "Flexibility", "Minimum Size", "Final Size"]
+ expectedSections: ["Base Size", "Flexibility", "Minimum Size", "Final Size"],
}, {
selector: ".growing .item",
- expectedSections: ["Base Size", "Flexibility", "Final Size"]
+ expectedSections: ["Base Size", "Flexibility", "Final Size"],
}, {
selector: ".growing.is-clamped .item",
- expectedSections: ["Base Size", "Flexibility", "Maximum Size", "Final Size"]
+ expectedSections: ["Base Size", "Flexibility", "Maximum Size", "Final Size"],
}];
add_task(async function() {
await addTab(TEST_URI);
const { inspector, flexboxInspector } = await openLayoutView();
const { document: doc } = flexboxInspector;
for (const { selector, expectedSections } of TEST_DATA) {
--- a/devtools/client/inspector/fonts/components/Font.js
+++ b/devtools/client/inspector/fonts/components/Font.js
@@ -40,17 +40,17 @@ class Font extends PureComponent {
this.setState({
isFontFaceRuleExpanded: false,
});
}
onFontFaceRuleToggle(event) {
this.setState({
- isFontFaceRuleExpanded: !this.state.isFontFaceRuleExpanded
+ isFontFaceRuleExpanded: !this.state.isFontFaceRuleExpanded,
});
event.stopPropagation();
}
renderFontCSSCode(rule, ruleText) {
if (!rule) {
return null;
}
--- a/devtools/client/inspector/fonts/components/FontEditor.js
+++ b/devtools/client/inspector/fonts/components/FontEditor.js
@@ -124,21 +124,21 @@ class FontEditor extends PureComponent {
return FontName({
font,
onToggleFontHighlight: this.props.onToggleFontHighlight,
});
});
return dom.div(
{
- className: "font-group"
+ className: "font-group",
},
dom.div(
{
- className: "font-family-name"
+ className: "font-family-name",
},
family),
group
);
}
renderFontSize(value) {
return value !== null && FontSize({
@@ -183,17 +183,17 @@ class FontEditor extends PureComponent {
* values: []
* }
* @return {DOMNode}
*/
renderInstances(fontInstances = [], selectedInstance) {
// Append a "Custom" instance entry which represents the latest manual axes changes.
const customInstance = {
name: getStr("fontinspector.customInstanceName"),
- values: this.props.fontEditor.customInstanceValues
+ values: this.props.fontEditor.customInstanceValues,
};
fontInstances = [ ...fontInstances, customInstance ];
// Generate the <option> elements for the dropdown.
const instanceOptions = fontInstances.map(instance =>
dom.option(
{
value: instance.name,
@@ -205,17 +205,17 @@ class FontEditor extends PureComponent {
// Generate the dropdown.
const instanceSelect = dom.select(
{
className: "font-control-input font-value-select",
onChange: (e) => {
const instance = fontInstances.find(inst => e.target.value === inst.name);
instance && this.props.onInstanceChange(instance.name, instance.values);
- }
+ },
},
instanceOptions
);
return dom.label(
{
className: "font-control",
},
@@ -227,21 +227,21 @@ class FontEditor extends PureComponent {
),
instanceSelect
);
}
renderWarning(warning) {
return dom.div(
{
- id: "font-editor"
+ id: "font-editor",
},
dom.div(
{
- className: "devtools-sidepanel-no-result"
+ className: "devtools-sidepanel-no-result",
},
warning
)
);
}
render() {
const { fontEditor } = this.props;
@@ -260,17 +260,17 @@ class FontEditor extends PureComponent {
// Show the empty state with a warning message when a used font was not found.
if (!font) {
return this.renderWarning(warning);
}
return dom.div(
{
- id: "font-editor"
+ id: "font-editor",
},
// Always render UI for used fonts.
this.renderUsedFonts(fonts),
// Render UI for font variation instances if they are defined.
hasFontInstances && this.renderInstances(font.variationInstances, instance),
// Always render UI for font size.
this.renderFontSize(properties["font-size"]),
// Always render UI for line height.
--- a/devtools/client/inspector/fonts/components/FontList.js
+++ b/devtools/client/inspector/fonts/components/FontList.js
@@ -47,25 +47,25 @@ class FontList extends PureComponent {
this.previewInputRef.current && this.previewInputRef.current.focus();
}
render() {
const {
fonts,
fontOptions,
onPreviewTextChange,
- onToggleFontHighlight
+ onToggleFontHighlight,
} = this.props;
const { previewText } = fontOptions;
const { onPreviewClick } = this;
const list = dom.ul(
{
- className: "fonts-list"
+ className: "fonts-list",
},
fonts.map((font, i) => Font({
key: i,
font,
onPreviewClick,
onToggleFontHighlight,
}))
);
--- a/devtools/client/inspector/fonts/components/FontName.js
+++ b/devtools/client/inspector/fonts/components/FontName.js
@@ -42,17 +42,17 @@ class FontName extends PureComponent {
onToggleFontHighlight,
} = this.props;
onToggleFontHighlight(font, false);
}
render() {
const options = {
- className: "font-name"
+ className: "font-name",
};
if (Services.prefs.getBoolPref(FONT_HIGHLIGHTER_PREF)) {
options.onMouseOver = this.onNameMouseOver;
options.onMouseOut = this.onNameMouseOut;
}
return dom.span(options, this.props.font.name);
--- a/devtools/client/inspector/fonts/components/FontOrigin.js
+++ b/devtools/client/inspector/fonts/components/FontOrigin.js
@@ -30,30 +30,30 @@ class FontOrigin extends PureComponent {
}
render() {
const url = this.props.font.URI;
if (!url) {
return dom.p(
{
- className: "font-origin system"
+ className: "font-origin system",
},
getStr("fontinspector.system")
);
}
return dom.p(
{
className: "font-origin remote",
},
dom.span(
{
className: "url",
- title: url
+ title: url,
},
url
),
dom.button(
{
className: "copy-icon",
onClick: this.onCopyURL,
title: getStr("fontinspector.copyURL"),
--- a/devtools/client/inspector/fonts/components/FontOverview.js
+++ b/devtools/client/inspector/fonts/components/FontOverview.js
@@ -48,17 +48,17 @@ class FontOverview extends PureComponent
fonts,
fontOptions,
onPreviewTextChange,
onToggleFontHighlight,
})
:
dom.div(
{
- className: "devtools-sidepanel-no-result"
+ className: "devtools-sidepanel-no-result",
},
getStr("fontinspector.noFontsUsedOnCurrentElement")
);
}
renderFonts() {
const {
fontData,
@@ -82,21 +82,21 @@ class FontOverview extends PureComponent
items: [
{
header,
component: FontList,
componentProps: {
fontOptions,
fonts,
onPreviewTextChange,
- onToggleFontHighlight: this.onToggleFontHighlightGlobal
+ onToggleFontHighlight: this.onToggleFontHighlightGlobal,
},
- opened: false
- }
- ]
+ opened: false,
+ },
+ ],
});
}
render() {
return dom.div(
{
id: "font-container",
},
--- a/devtools/client/inspector/fonts/components/FontPreviewInput.js
+++ b/devtools/client/inspector/fonts/components/FontPreviewInput.js
@@ -24,17 +24,17 @@ class FontPreviewInput extends PureCompo
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
this.onFocus = this.onFocus.bind(this);
this.inputRef = createRef();
this.state = {
- value: this.props.previewText
+ value: this.props.previewText,
};
}
onChange(e) {
const value = e.target.value;
this.props.onPreviewTextChange(value);
this.setState((prevState) => {
--- a/devtools/client/inspector/fonts/components/FontPropertyValue.js
+++ b/devtools/client/inspector/fonts/components/FontPropertyValue.js
@@ -46,17 +46,17 @@ class FontPropertyValue extends PureComp
return {
autoIncrement: false,
className: "",
minLabel: false,
maxLabel: false,
nameLabel: false,
step: 1,
unit: null,
- unitOptions: []
+ unitOptions: [],
};
}
constructor(props) {
super(props);
// Interval ID for the auto-increment operation.
this.interval = null;
this.state = {
@@ -270,17 +270,17 @@ class FontPropertyValue extends PureComp
onUnitChange(e) {
this.props.onChange(this.props.name, this.props.value, this.props.unit,
e.target.value);
// Reset internal state value and wait for converted value from props.
this.setState((prevState) => {
return {
...prevState,
- value: null
+ value: null,
};
});
}
onMouseDown() {
this.toggleInteractiveState(true);
}
@@ -325,17 +325,17 @@ class FontPropertyValue extends PureComp
*
* @param {Boolean} isInteractive
* Whether to mark the interactive state on or off.
*/
toggleInteractiveState(isInteractive) {
this.setState((prevState) => {
return {
...prevState,
- interactive: isInteractive
+ interactive: isInteractive,
};
});
}
/**
* Calls the given `onChange` callback with the current property name, value and unit
* if the value is valid according to the constraints of this component (min, max).
* Updates the internal state with the current value. This will be used to render the
@@ -350,17 +350,17 @@ class FontPropertyValue extends PureComp
updateValue(value) {
if (this.isValueValid(value)) {
this.props.onChange(this.props.name, value, this.props.unit);
}
this.setState((prevState) => {
return {
...prevState,
- value
+ value,
};
});
}
renderUnitSelect() {
if (!this.props.unitOptions.length) {
return null;
}
@@ -404,17 +404,17 @@ class FontPropertyValue extends PureComp
label
);
// Show the `name` prop value as an additional label if the `nameLabel` prop is true.
const detailEl = nameLabel ?
dom.span(
{
className: "font-control-label-detail",
- id: `detail-${name}`
+ id: `detail-${name}`,
},
this.getPropLabel("name")
)
:
null;
return createElement(Fragment, null, labelEl, detailEl);
}
@@ -475,17 +475,17 @@ class FontPropertyValue extends PureComp
{
className: "font-control-label",
title: this.props.label,
},
this.renderLabelContent()
),
dom.div(
{
- className: "font-control-input"
+ className: "font-control-input",
},
dom.div(
{
className: "font-value-slider-container",
"data-min": this.getPropLabel("min"),
"data-max": this.getPropLabel("max"),
},
range
--- a/devtools/client/inspector/fonts/components/FontStyle.js
+++ b/devtools/client/inspector/fonts/components/FontStyle.js
@@ -36,17 +36,17 @@ class FontStyle extends PureComponent {
dom.span(
{
className: "font-control-label",
},
getStr("fontinspector.fontItalicLabel")
),
dom.div(
{
- className: "font-control-input"
+ className: "font-control-input",
},
dom.input(
{
checked: this.props.value === "italic" || this.props.value === "oblique",
className: "devtools-checkbox-toggle",
name: this.name,
onChange: this.onToggle,
type: "checkbox",
--- a/devtools/client/inspector/fonts/components/FontsApp.js
+++ b/devtools/client/inspector/fonts/components/FontsApp.js
@@ -38,17 +38,17 @@ class FontsApp extends PureComponent {
onPreviewTextChange,
onPropertyChange,
onToggleFontHighlight,
} = this.props;
return dom.div(
{
className: "theme-sidebar inspector-tabpanel",
- id: "sidebar-panel-fontinspector"
+ id: "sidebar-panel-fontinspector",
},
fontEditorEnabled && FontEditor({
fontEditor,
onInstanceChange,
onPropertyChange,
onToggleFontHighlight,
}),
FontOverview({
--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -368,17 +368,17 @@ class FontInspector {
*
* @return {Array}
*/
getFontPropertyValueKeywords() {
return [
"font-size",
"font-weight",
"font-stretch",
- "line-height"
+ "line-height",
].reduce((acc, property) => {
return acc.concat(this.cssProperties.getValues(property));
}, []);
}
async getFontsForNode(node, options) {
// In case we've been destroyed in the meantime
if (!this.document) {
@@ -837,17 +837,17 @@ class FontInspector {
}
const node = this.inspector.selection.nodeFront;
const fonts = await this.getFontsForNode(node, options);
try {
// Get computed styles for the selected node, but filter by CSS font properties.
this.nodeComputedStyle = await this.pageStyle.getComputed(node, {
- filterProperties: FONT_PROPERTIES
+ filterProperties: FONT_PROPERTIES,
});
} catch (e) {
// Because getComputed is async, there is a chance the font editor was
// destroyed while we were waiting. If that happened, just bail out
// silently.
if (!this.document) {
return;
}
@@ -914,17 +914,17 @@ class FontInspector {
}
const { fontOptions } = this.store.getState();
const { previewText } = fontOptions;
const options = {
includePreviews: true,
previewText,
- previewFillStyle: getColor("body-color")
+ previewFillStyle: getColor("body-color"),
};
// Add the includeVariations argument into the option to get font variation data.
if (this.pageStyle.supportsFontVariations) {
options.includeVariations = true;
}
const node = this.inspector.selection.nodeFront;
--- a/devtools/client/inspector/fonts/test/head.js
+++ b/devtools/client/inspector/fonts/test/head.js
@@ -51,17 +51,17 @@ var openFontInspectorForURL = async func
// was being opened or not.
await selectNode("body", inspector);
return {
tab,
testActor,
toolbox,
inspector,
- view: inspector.fontinspector
+ view: inspector.fontinspector,
};
};
/**
* Focus the preview input, clear it, type new text into it and wait for the
* preview images to be updated.
*
* @param {FontInspector} view - The FontInspector instance.
@@ -228,17 +228,17 @@ function getFamilyName(fontEl) {
function getPropertyValue(viewDoc, name) {
const selector = `#font-editor .font-value-input[name=${name}]`;
return {
// Ensure value input exists before querying its value
value: viewDoc.querySelector(selector) &&
parseFloat(viewDoc.querySelector(selector).value),
// Ensure unit dropdown exists before querying its value
unit: viewDoc.querySelector(selector + ` ~ .font-value-select`) &&
- viewDoc.querySelector(selector + ` ~ .font-value-select`).value
+ viewDoc.querySelector(selector + ` ~ .font-value-select`).value,
};
}
/**
* Given a font element, check whether its font source is remote.
*
* @param {DOMNode} fontEl
* The font element.
--- a/devtools/client/inspector/fonts/types.js
+++ b/devtools/client/inspector/fonts/types.js
@@ -69,17 +69,17 @@ const font = exports.font = {
// The URI of the font file
URI: PropTypes.string,
// The variation axes of the font
variationAxes: PropTypes.arrayOf(PropTypes.shape(fontVariationAxis)),
// The variation instances of the font
- variationInstances: PropTypes.arrayOf(PropTypes.shape(fontVariationInstance))
+ variationInstances: PropTypes.arrayOf(PropTypes.shape(fontVariationInstance)),
};
exports.fontOptions = {
// The current preview text
previewText: PropTypes.string,
};
exports.fontEditor = {
--- a/devtools/client/inspector/fonts/utils/font-utils.js
+++ b/devtools/client/inspector/fonts/utils/font-utils.js
@@ -104,10 +104,10 @@ module.exports = {
* @return {Number}
*/
toFixed(number, decimals = 1) {
if (typeof number !== "number") {
return number;
}
return Math.floor(number * Math.pow(10, decimals)) / Math.pow(10, decimals);
- }
+ },
};
--- a/devtools/client/inspector/grids/components/GridOutline.js
+++ b/devtools/client/inspector/grids/components/GridOutline.js
@@ -107,17 +107,17 @@ class GridOutline extends PureComponent
}
onShowGridOutlineHighlight(grids[id].nodeFront, {
showGridArea: name,
showGridCell: {
gridFragmentIndex,
rowNumber,
columnNumber,
- }
+ },
});
}
/**
* Returns the grid area name if the given grid cell is part of a grid area, otherwise
* null.
*
* @param {Number} columnNumber
@@ -162,17 +162,17 @@ class GridOutline extends PureComponent
* Displays a message text "Cannot show outline for this grid".
*/
renderCannotShowOutlineText() {
return (
dom.div({ className: "grid-outline-text" },
dom.span(
{
className: "grid-outline-text-icon",
- title: getStr("layout.cannotShowGridOutline.title")
+ title: getStr("layout.cannotShowGridOutline.title"),
}
),
getStr("layout.cannotShowGridOutline")
)
);
}
/**
@@ -285,32 +285,32 @@ class GridOutline extends PureComponent
renderGridOutline(grid) {
const { color } = grid;
return (
dom.g(
{
id: "grid-outline-group",
className: "grid-outline-group",
- style: { color }
+ style: { color },
},
this.renderGrid(grid)
)
);
}
renderGridOutlineBorder(borderWidth, borderHeight, color) {
return (
dom.rect({
key: "border",
className: "grid-outline-border",
x: 0,
y: 0,
width: borderWidth,
- height: borderHeight
+ height: borderHeight,
})
);
}
renderOutline() {
const {
height,
selectedGrid,
--- a/devtools/client/inspector/grids/grid-inspector.js
+++ b/devtools/client/inspector/grids/grid-inspector.js
@@ -41,17 +41,17 @@ const GRID_COLORS = [
"#12BC00",
"#EA8000",
"#00B0BD",
"#D70022",
"#4B42FF",
"#B5007F",
"#058B00",
"#A47F00",
- "#005A71"
+ "#005A71",
];
class GridInspector {
constructor(inspector, window) {
this.document = window.document;
this.inspector = inspector;
this.store = inspector.store;
this.telemetry = inspector.telemetry;
--- a/devtools/client/inspector/grids/reducers/highlighter-settings.js
+++ b/devtools/client/inspector/grids/reducers/highlighter-settings.js
@@ -4,17 +4,17 @@
"use strict";
const Services = require("Services");
const {
UPDATE_SHOW_GRID_AREAS,
UPDATE_SHOW_GRID_LINE_NUMBERS,
- UPDATE_SHOW_INFINITE_LINES
+ UPDATE_SHOW_INFINITE_LINES,
} = require("../actions/index");
const SHOW_GRID_AREAS = "devtools.gridinspector.showGridAreas";
const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers";
const SHOW_INFINITE_LINES = "devtools.gridinspector.showInfiniteLines";
const INITIAL_HIGHLIGHTER_SETTINGS = () => {
return {
--- a/devtools/client/inspector/grids/test/browser_grids_grid-outline-updates-on-grid-change.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-updates-on-grid-change.js
@@ -45,17 +45,17 @@ add_task(async function() {
is(elements.length, 2, "Grid outline is shown.");
info("Changing the grid in the page");
const onReflow = new Promise(resolve => {
const listener = {
callback: () => {
inspector.reflowTracker.untrackReflows(listener, listener.callback);
resolve();
- }
+ },
};
inspector.reflowTracker.trackReflows(listener, listener.callback);
});
const onGridOutlineChanged = waitForDOM(doc, ".grid-outline-cell", 4);
testActor.eval(`
const div = document.createElement("div");
div.textContent = "item 3";
--- a/devtools/client/inspector/grids/test/unit/test_compare_fragments_geometry.js
+++ b/devtools/client/inspector/grids/test/unit/test_compare_fragments_geometry.js
@@ -3,75 +3,75 @@
"use strict";
const { compareFragmentsGeometry } = require("devtools/client/inspector/grids/utils/utils");
const TESTS = [{
desc: "No fragments",
grids: [[], []],
- expected: true
+ expected: true,
}, {
desc: "Different number of fragments",
grids: [
[{}, {}, {}],
- [{}, {}]
+ [{}, {}],
],
- expected: false
+ expected: false,
}, {
desc: "Different number of columns",
grids: [
[{cols: {lines: [{}, {}]}, rows: {lines: []}}],
- [{cols: {lines: [{}]}, rows: {lines: []}}]
+ [{cols: {lines: [{}]}, rows: {lines: []}}],
],
- expected: false
+ expected: false,
}, {
desc: "Different number of rows",
grids: [
[{cols: {lines: [{}, {}]}, rows: {lines: [{}]}}],
- [{cols: {lines: [{}, {}]}, rows: {lines: [{}, {}]}}]
+ [{cols: {lines: [{}, {}]}, rows: {lines: [{}, {}]}}],
],
- expected: false
+ expected: false,
}, {
desc: "Different number of rows and columns",
grids: [
[{cols: {lines: [{}]}, rows: {lines: [{}]}}],
- [{cols: {lines: [{}, {}]}, rows: {lines: [{}, {}]}}]
+ [{cols: {lines: [{}, {}]}, rows: {lines: [{}, {}]}}],
],
- expected: false
+ expected: false,
}, {
desc: "Different column sizes",
grids: [
[{cols: {lines: [{start: 0}, {start: 500}]}, rows: {lines: []}}],
- [{cols: {lines: [{start: 0}, {start: 1000}]}, rows: {lines: []}}]
+ [{cols: {lines: [{start: 0}, {start: 1000}]}, rows: {lines: []}}],
],
- expected: false
+ expected: false,
}, {
desc: "Different row sizes",
grids: [
[{cols: {lines: [{start: 0}, {start: 500}]}, rows: {lines: [{start: -100}]}}],
- [{cols: {lines: [{start: 0}, {start: 500}]}, rows: {lines: [{start: 0}]}}]
+ [{cols: {lines: [{start: 0}, {start: 500}]}, rows: {lines: [{start: 0}]}}],
],
- expected: false
+ expected: false,
}, {
desc: "Different row and column sizes",
grids: [
[{cols: {lines: [{start: 0}, {start: 500}]}, rows: {lines: [{start: -100}]}}],
- [{cols: {lines: [{start: 0}, {start: 505}]}, rows: {lines: [{start: 0}]}}]
+ [{cols: {lines: [{start: 0}, {start: 505}]}, rows: {lines: [{start: 0}]}}],
],
- expected: false
+ expected: false,
}, {
desc: "Complete structure, same fragments",
grids: [
[{cols: {lines: [{start: 0}, {start: 100.3}, {start: 200.6}]},
rows: {lines: [{start: 0}, {start: 1000}, {start: 2000}]}}],
[{cols: {lines: [{start: 0}, {start: 100.3}, {start: 200.6}]},
- rows: {lines: [{start: 0}, {start: 1000}, {start: 2000}]}}]
+ rows: {lines: [{start: 0}, {start: 1000}, {start: 2000}]}}],
],
- expected: true
+ expected: true,
}];
function run_test() {
for (const { desc, grids, expected } of TESTS) {
if (desc) {
info(desc);
}
equal(compareFragmentsGeometry(grids[0], grids[1]), expected);
--- a/devtools/client/inspector/inspector-search.js
+++ b/devtools/client/inspector/inspector-search.js
@@ -126,17 +126,17 @@ InspectorSearch.prototype = {
}
},
_onClearSearch: function() {
this.searchBox.classList.remove("devtools-style-searchbox-no-match");
this.searchBox.value = "";
this.searchClearButton.hidden = true;
this.emit("search-cleared");
- }
+ },
};
/**
* Converts any input box on a page to a CSS selector search and suggestion box.
*
* Emits 'processing-done' event when it is done processing the current
* keypress, search request or selection from the list, whether that led to a
* search or not.
@@ -422,17 +422,17 @@ SelectorAutocompleter.prototype = {
} else if (query.match(/[a-zA-Z]*\[[^\]]*\][^\]]*/)) {
// for cases like '[foo].bar' and likewise
const attrPart = query.substring(0, query.lastIndexOf("]") + 1);
value = attrPart + value;
}
const item = {
preLabel: query,
- label: value
+ label: value,
};
// In case the query's state is tag and the item's state is id or class
// adjust the preLabel
if (popupState === this.States.TAG && state === this.States.CLASS) {
item.preLabel = "." + item.preLabel;
}
if (popupState === this.States.TAG && state === this.States.ID) {
@@ -528,10 +528,10 @@ SelectorAutocompleter.prototype = {
result.suggestions[0][0] === firstPart) {
result.suggestions = [];
}
// Wait for the autocomplete-popup to fire its popup-opened event, to make sure
// the autoSelect item has been selected.
return this._showPopup(result.suggestions, state);
});
- }
+ },
};
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -163,17 +163,17 @@ Inspector.prototype = {
*/
async init() {
// Localize all the nodes containing a data-localization attribute.
localizeMarkup(this.panelDoc);
await Promise.all([
this._getCssProperties(),
this._getPageStyle(),
- this._getDefaultSelection()
+ this._getDefaultSelection(),
]);
return this._deferredOpen();
},
get toolbox() {
return this._toolbox;
},
@@ -566,29 +566,29 @@ Inspector.prototype = {
className: "inspector-sidebar-splitter",
initialWidth: width,
initialHeight: height,
minSize: "10%",
maxSize: "80%",
splitterSize: 1,
endPanelControl: true,
startPanel: this.InspectorTabPanel({
- id: "inspector-main-content"
+ id: "inspector-main-content",
}),
endPanel: this.InspectorSplitBox({
initialWidth: splitSidebarWidth,
minSize: 10,
maxSize: "80%",
splitterSize: this.is3PaneModeEnabled ? 1 : 0,
endPanelControl: this.is3PaneModeEnabled,
startPanel: this.InspectorTabPanel({
- id: "inspector-rules-container"
+ id: "inspector-rules-container",
}),
endPanel: this.InspectorTabPanel({
- id: "inspector-sidebar-container"
+ id: "inspector-sidebar-container",
}),
ref: splitbox => {
this.sidebarSplitBox = splitbox;
},
}),
vert: this.useLandscapeMode(),
onControlledPanelResized: this.onSidebarResized,
});
@@ -863,25 +863,25 @@ Inspector.prototype = {
const sidebar = this.panelDoc.getElementById("inspector-sidebar");
const options = {
showAllTabsMenu: true,
sidebarToggleButton: {
collapsed: !this.is3PaneModeEnabled,
collapsePaneTitle: INSPECTOR_L10N.getStr("inspector.hideThreePaneMode"),
expandPaneTitle: INSPECTOR_L10N.getStr("inspector.showThreePaneMode"),
onClick: this.onSidebarToggle,
- }
+ },
};
this.sidebar = new ToolSidebar(sidebar, this, "inspector", options);
this.sidebar.on("select", this.onSidebarSelect);
const ruleSideBar = this.panelDoc.getElementById("inspector-rules-sidebar");
this.ruleViewSideBar = new ToolSidebar(ruleSideBar, this, "inspector", {
- hideTabstripe: true
+ hideTabstripe: true,
});
// defaultTab may also be an empty string or a tab id that doesn't exist anymore
// (e.g. it was a tab registered by an addon that has been uninstalled).
let defaultTab = Services.prefs.getCharPref("devtools.inspector.activeSidebar");
if (this.is3PaneModeEnabled && defaultTab === "ruleview") {
defaultTab = "layoutview";
@@ -896,27 +896,27 @@ Inspector.prototype = {
const layoutId = "layoutview";
const layoutTitle = INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle2");
this.sidebar.queueTab(
layoutId,
layoutTitle,
{
props: {
id: layoutId,
- title: layoutTitle
+ title: layoutTitle,
},
panel: () => {
if (!this.layoutview) {
const LayoutView =
this.browserRequire("devtools/client/inspector/layout/layout");
this.layoutview = new LayoutView(this, this.panelWin);
}
return this.layoutview.provider;
- }
+ },
},
defaultTab == layoutId);
this.sidebar.queueExistingTab(
"computedview",
INSPECTOR_L10N.getStr("inspector.sidebar.computedViewTitle"),
defaultTab == "computedview");
@@ -924,73 +924,73 @@ Inspector.prototype = {
const animationTitle =
INSPECTOR_L10N.getStr("inspector.sidebar.animationInspectorTitle");
this.sidebar.queueTab(
animationId,
animationTitle,
{
props: {
id: animationId,
- title: animationTitle
+ title: animationTitle,
},
panel: () => {
const AnimationInspector =
this.browserRequire("devtools/client/inspector/animation/animation");
this.animationinspector = new AnimationInspector(this, this.panelWin);
return this.animationinspector.provider;
- }
+ },
},
defaultTab == animationId);
// Inject a lazy loaded react tab by exposing a fake React object
// with a lazy defined Tab thanks to `panel` being a function
const fontId = "fontinspector";
const fontTitle = INSPECTOR_L10N.getStr("inspector.sidebar.fontInspectorTitle");
this.sidebar.queueTab(
fontId,
fontTitle,
{
props: {
id: fontId,
- title: fontTitle
+ title: fontTitle,
},
panel: () => {
if (!this.fontinspector) {
const FontInspector =
this.browserRequire("devtools/client/inspector/fonts/fonts");
this.fontinspector = new FontInspector(this, this.panelWin);
}
return this.fontinspector.provider;
- }
+ },
},
defaultTab == fontId);
if (Services.prefs.getBoolPref(TRACK_CHANGES_PREF)) {
// Inject a lazy loaded react tab by exposing a fake React object
// with a lazy defined Tab thanks to `panel` being a function
const changesId = "changesview";
const changesTitle = INSPECTOR_L10N.getStr("inspector.sidebar.changesViewTitle");
this.sidebar.queueTab(
changesId,
changesTitle,
{
props: {
id: changesId,
- title: changesTitle
+ title: changesTitle,
},
panel: () => {
if (!this.changesView) {
const ChangesView =
this.browserRequire("devtools/client/inspector/changes/ChangesView");
this.changesView = new ChangesView(this, this.panelWin);
}
return this.changesView.provider;
- }
+ },
},
defaultTab == changesId);
}
this.sidebar.addAllQueuedTabs();
// Persist splitter state in preferences.
this.sidebar.on("show", this.onSidebarShown);
@@ -1195,17 +1195,17 @@ Inspector.prototype = {
}
const onExpand = this.markup.expandNode(this.selection.nodeFront);
// Restore the highlighter states prior to emitting "new-root".
if (this._highlighters) {
await Promise.all([
this.highlighters.restoreFlexboxState(),
- this.highlighters.restoreGridState()
+ this.highlighters.restoreGridState(),
]);
}
this.emit("new-root");
// Wait for full expand of the selected node in order to ensure
// the markup view is fully emitted before firing 'reloaded'.
// 'reloaded' is used to know when the panel is fully updated
@@ -1236,17 +1236,17 @@ Inspector.prototype = {
*/
set selectionCssSelector(cssSelector = null) {
if (this._panelDestroyer) {
return;
}
this._selectionCssSelector = {
selector: cssSelector,
- url: this._target.url
+ url: this._target.url,
};
},
/**
* Get the current selection unique css selector if any, that is, if a node
* is actually selected and that node has been selected while on the same url
*/
get selectionCssSelector() {
@@ -1498,17 +1498,17 @@ Inspector.prototype = {
this.show3PaneTooltip = null;
this.sidebar = null;
this.store = null;
this.telemetry = null;
this._panelDestroyer = promise.all([
markupDestroyer,
sidebarDestroyer,
- ruleViewSideBarDestroyer
+ ruleViewSideBarDestroyer,
]);
return this._panelDestroyer;
},
/**
* Returns the clipboard content if it is appropriate for pasting
* into the current node's outer HTML, otherwise returns null.
@@ -1717,17 +1717,17 @@ Inspector.prototype = {
!Services.prefs.getBoolPref("devtools.accessibility.enabled")) {
return;
}
const showA11YPropsItem = new MenuItem({
id: "node-menu-showaccessibilityproperties",
label: INSPECTOR_L10N.getStr("inspectorShowAccessibilityProperties.label"),
click: () => this.showAccessibilityProperties(),
- disabled: true
+ disabled: true,
});
// Only attempt to determine if a11y props menu item needs to be enabled iff
// AccessibilityFront is enabled.
const accessibilityFront = this.target.getFront("accessibility");
if (accessibilityFront.enabled) {
this._updateA11YMenuItem(showA11YPropsItem);
}
@@ -2334,17 +2334,17 @@ Inspector.prototype = {
// will do that, calling `hide` for the highlighter only if previously shown.
await this.highlighter.hideBoxModel();
const clipboardEnabled = Services.prefs
.getBoolPref("devtools.screenshot.clipboard.enabled");
const args = {
file: true,
selector: this.selectionCssSelector,
- clipboard: clipboardEnabled
+ clipboard: clipboardEnabled,
};
const screenshotFront = this.target.getFront("screenshot");
const screenshot = await screenshotFront.capture(args);
await saveScreenshot(this.panelWin, args, screenshot);
},
/**
* Scroll the node into view.
--- a/devtools/client/inspector/layout/components/Accordion.js
+++ b/devtools/client/inspector/layout/components/Accordion.js
@@ -13,26 +13,26 @@ const { createElement, PureComponent } =
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const { div, span } = dom;
class Accordion extends PureComponent {
static get propTypes() {
return {
- items: PropTypes.array
+ items: PropTypes.array,
};
}
constructor(props) {
super(props);
this.state = {
opened: props.items.map(item => item.opened),
- created: []
+ created: [],
};
this.handleHeaderClick = this.handleHeaderClick.bind(this);
this.renderContainer = this.renderContainer.bind(this);
}
handleHeaderClick(i, event) {
const opened = [...this.state.opened];
@@ -72,17 +72,17 @@ class Accordion extends PureComponent {
onClick: event => this.handleHeaderClick(i, event) },
span({ className: arrowClassName }),
item.header
),
(created[i] || opened[i]) ?
div(
{ className: "_content",
- style: { display: opened[i] ? "block" : "none" }
+ style: { display: opened[i] ? "block" : "none" },
},
createElement(item.component, item.componentProps || {})
) :
null
);
}
render() {
--- a/devtools/client/inspector/layout/components/LayoutApp.js
+++ b/devtools/client/inspector/layout/components/LayoutApp.js
@@ -79,27 +79,27 @@ class LayoutApp extends PureComponent {
{
component: Grid,
componentProps: this.props,
header: LAYOUT_L10N.getStr("layout.header"),
opened: Services.prefs.getBoolPref(GRID_OPENED_PREF),
onToggled: () => {
const opened = Services.prefs.getBoolPref(GRID_OPENED_PREF);
Services.prefs.setBoolPref(GRID_OPENED_PREF, !opened);
- }
+ },
},
{
component: BoxModel,
componentProps: this.props,
header: BOXMODEL_L10N.getStr("boxmodel.title"),
opened: Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
onToggled: () => {
const opened = Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF);
Services.prefs.setBoolPref(BOXMODEL_OPENED_PREF, !opened);
- }
+ },
},
];
if (Services.prefs.getBoolPref(FLEXBOX_ENABLED_PREF)) {
// Since the flexbox panel is hidden behind a pref. We insert the flexbox container
// to the first index of the accordion item list.
items.splice(0, 0, {
component: Flexbox,
@@ -107,17 +107,17 @@ class LayoutApp extends PureComponent {
...this.props,
flexContainer: this.props.flexbox.flexContainer,
},
header: this.getFlexboxHeader(this.props.flexbox.flexContainer),
opened: Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF),
onToggled: () => {
const opened = Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF);
Services.prefs.setBoolPref(FLEXBOX_OPENED_PREF, !opened);
- }
+ },
});
// If the current selected node is both a flex container and flex item. Render
// an accordion with another Flexbox component where the flexbox to show is the
// parent flex container of the current selected node.
if (this.props.flexbox.flexItemContainer &&
this.props.flexbox.flexItemContainer.actorID) {
// Insert the parent flex container to the first index of the accordion item
@@ -128,17 +128,17 @@ class LayoutApp extends PureComponent {
...this.props,
flexContainer: this.props.flexbox.flexItemContainer,
},
header: this.getFlexboxHeader(this.props.flexbox.flexItemContainer),
opened: Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF),
onToggled: () => {
const opened = Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF);
Services.prefs.setBoolPref(FLEXBOX_OPENED_PREF, !opened);
- }
+ },
});
}
}
return (
dom.div({ className: "layout-container" },
Accordion({ items })
)
--- a/devtools/client/inspector/markup/markup.js
+++ b/devtools/client/inspector/markup/markup.js
@@ -639,17 +639,17 @@ MarkupView.prototype = {
* highlighted.
*/
_shouldNewSelectionBeHighlighted: function() {
const reason = this.inspector.selection.reason;
const unwantedReasons = [
"inspector-open",
"navigateaway",
"nodeselected",
- "test"
+ "test",
];
const isHighlight = this._isContainerSelected(this._hoveredContainer);
return !isHighlight && reason && !unwantedReasons.includes(reason);
},
/**
* React to new-node-front selection events.
@@ -712,17 +712,17 @@ MarkupView.prototype = {
const reasonsToNavigate = [
// If the user picked an element with the element picker.
"picker-node-picked",
// If the user shift-clicked (previewed) an element.
"picker-node-previewed",
// If the user selected an element with the browser context menu.
"browser-context-menu",
// If the user added a new node by clicking in the inspector toolbar.
- "node-inserted"
+ "node-inserted",
];
// If the user performed an action with a keyboard, move keyboard focus to
// the markup tree container.
if (reason && reason.endsWith("-keyboard")) {
this.getContainer(this._rootNode).elt.focus();
}
@@ -1573,17 +1573,17 @@ MarkupView.prototype = {
if (commit) {
this.updateNodeOuterHTML(node, value, oldValue);
}
const end = this.telemetry.msSystemNow();
this.telemetry.recordEvent("edit_html", "inspector", null, {
"made_changes": commit,
"time_open": end - start,
- "session_id": this.toolbox.sessionId
+ "session_id": this.toolbox.sessionId,
});
});
this.emit("begin-editing");
});
},
/**
@@ -1885,17 +1885,17 @@ MarkupView.prototype = {
_getVisibleChildren: function(container, centered) {
let maxChildren = container.maxChildren || this.maxChildren;
if (maxChildren == -1) {
maxChildren = undefined;
}
return this.walker.children(container.node, {
maxNodes: maxChildren,
- center: centered
+ center: centered,
});
},
/**
* The parent of a given node as rendered in the markup view is not necessarily
* node.parentNode(). For instance, shadow roots don't have a parentNode, but a host
* element. However they are represented as parent and children in the markup view.
*
@@ -2062,17 +2062,17 @@ MarkupView.prototype = {
nextSibling = null;
}
if (parent.nodeType !== nodeConstants.ELEMENT_NODE) {
return null;
}
return {parent, nextSibling};
- }
+ },
};
/**
* Map a number from one range to another.
*/
function map(value, oldMin, oldMax, newMin, newMax) {
const ratio = oldMax - oldMin;
if (ratio == 0) {
--- a/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation.js
+++ b/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation.js
@@ -25,221 +25,221 @@ loadHelperScript("helper_markup_accessib
*/
const TESTS = [
{
desc: "Collapse body container",
focused: "root.elt",
activedescendant: "body.tagLine",
key: "VK_LEFT",
options: { },
- waitFor: "collapsed"
+ waitFor: "collapsed",
},
{
desc: "Expand body container",
focused: "root.elt",
activedescendant: "body.tagLine",
key: "VK_RIGHT",
options: { },
- waitFor: "expanded"
+ waitFor: "expanded",
},
{
desc: "Select header container",
focused: "root.elt",
activedescendant: "header.tagLine",
key: "VK_DOWN",
options: { },
- waitFor: "inspector-updated"
+ waitFor: "inspector-updated",
},
{
desc: "Expand header container",
focused: "root.elt",
activedescendant: "header.tagLine",
key: "VK_RIGHT",
options: { },
- waitFor: "expanded"
+ waitFor: "expanded",
},
{
desc: "Select text container",
focused: "root.elt",
activedescendant: "container-0.tagLine",
key: "VK_DOWN",
options: { },
- waitFor: "inspector-updated"
+ waitFor: "inspector-updated",
},
{
desc: "Select header container again",
focused: "root.elt",
activedescendant: "header.tagLine",
key: "VK_UP",
options: { },
- waitFor: "inspector-updated"
+ waitFor: "inspector-updated",
},
{
desc: "Collapse header container",
focused: "root.elt",
activedescendant: "header.tagLine",
key: "VK_LEFT",
options: { },
- waitFor: "collapsed"
+ waitFor: "collapsed",
},
{
desc: "Focus on header container tag",
focused: "header.focusableElms.0",
activedescendant: "header.tagLine",
key: "VK_RETURN",
- options: { }
+ options: { },
},
{
desc: "Remove focus from header container tag",
focused: "root.elt",
activedescendant: "header.tagLine",
key: "VK_ESCAPE",
- options: { }
+ options: { },
},
{
desc: "Focus on header container tag again",
focused: "header.focusableElms.0",
activedescendant: "header.tagLine",
key: "VK_SPACE",
- options: { }
+ options: { },
},
{
desc: "Focus on header id attribute",
focused: "header.focusableElms.1",
activedescendant: "header.tagLine",
key: "VK_TAB",
- options: { }
+ options: { },
},
{
desc: "Focus on header class attribute",
focused: "header.focusableElms.2",
activedescendant: "header.tagLine",
key: "VK_TAB",
- options: { }
+ options: { },
},
{
desc: "Focus on header new attribute",
focused: "header.focusableElms.3",
activedescendant: "header.tagLine",
key: "VK_TAB",
- options: { }
+ options: { },
},
{
desc: "Circle back and focus on header tag again",
focused: "header.focusableElms.0",
activedescendant: "header.tagLine",
key: "VK_TAB",
- options: { }
+ options: { },
},
{
desc: "Circle back and focus on header new attribute again",
focused: "header.focusableElms.3",
activedescendant: "header.tagLine",
key: "VK_TAB",
- options: { shiftKey: true }
+ options: { shiftKey: true },
},
{
desc: "Tab back and focus on header class attribute",
focused: "header.focusableElms.2",
activedescendant: "header.tagLine",
key: "VK_TAB",
- options: { shiftKey: true }
+ options: { shiftKey: true },
},
{
desc: "Tab back and focus on header id attribute",
focused: "header.focusableElms.1",
activedescendant: "header.tagLine",
key: "VK_TAB",
- options: { shiftKey: true }
+ options: { shiftKey: true },
},
{
desc: "Tab back and focus on header tag",
focused: "header.focusableElms.0",
activedescendant: "header.tagLine",
key: "VK_TAB",
- options: { shiftKey: true }
+ options: { shiftKey: true },
},
{
desc: "Expand header container, ensure that focus is still on header tag",
focused: "header.focusableElms.0",
activedescendant: "header.tagLine",
key: "VK_RIGHT",
options: { },
- waitFor: "expanded"
+ waitFor: "expanded",
},
{
desc: "Activate header tag editor",
focused: "header.editor.tag.inplaceEditor.input",
activedescendant: "header.tagLine",
key: "VK_RETURN",
- options: { }
+ options: { },
},
{
desc: "Activate header id attribute editor",
focused: "header.editor.attrList.children.0.children.1.inplaceEditor.input",
activedescendant: "header.tagLine",
key: "VK_TAB",
- options: { }
+ options: { },
},
{
desc: "Deselect text in header id attribute editor",
focused: "header.editor.attrList.children.0.children.1.inplaceEditor.input",
activedescendant: "header.tagLine",
key: "VK_TAB",
- options: { }
+ options: { },
},
{
desc: "Activate header class attribute editor",
focused: "header.editor.attrList.children.1.children.1.inplaceEditor.input",
activedescendant: "header.tagLine",
key: "VK_TAB",
- options: { }
+ options: { },
},
{
desc: "Deselect text in header class attribute editor",
focused: "header.editor.attrList.children.1.children.1.inplaceEditor.input",
activedescendant: "header.tagLine",
key: "VK_TAB",
- options: { }
+ options: { },
},
{
desc: "Activate header new attribute editor",
focused: "header.editor.newAttr.inplaceEditor.input",
activedescendant: "header.tagLine",
key: "VK_TAB",
- options: { }
+ options: { },
},
{
desc: "Circle back and activate header tag editor again",
focused: "header.editor.tag.inplaceEditor.input",
activedescendant: "header.tagLine",
key: "VK_TAB",
- options: { }
+ options: { },
},
{
desc: "Circle back and activate header new attribute editor again",
focused: "header.editor.newAttr.inplaceEditor.input",
activedescendant: "header.tagLine",
key: "VK_TAB",
- options: { shiftKey: true }
+ options: { shiftKey: true },
},
{
desc: "Exit edit mode and keep focus on header new attribute",
focused: "header.focusableElms.3",
activedescendant: "header.tagLine",
key: "VK_ESCAPE",
- options: { }
+ options: { },
},
{
desc: "Move the selection to body and reset focus to container tree",
focused: "docBody",
activedescendant: "body.tagLine",
key: "VK_UP",
options: { },
- waitFor: "inspector-updated"
+ waitFor: "inspector-updated",
},
];
let containerID = 0;
let elms = {};
add_task(async function() {
const { inspector } = await openInspectorForURL(`data:text/html;charset=utf-8,
--- a/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation_after_edit.js
+++ b/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation_after_edit.js
@@ -27,81 +27,81 @@ const TEST_URI = '<div id="some-id" clas
*/
const TESTS = [
{
desc: "Select header container",
focused: "root.elt",
activedescendant: "div.tagLine",
key: "VK_DOWN",
options: { },
- waitFor: "inspector-updated"
+ waitFor: "inspector-updated",
},
{
desc: "Focus on header tag",
focused: "div.focusableElms.0",
activedescendant: "div.tagLine",
key: "VK_RETURN",
- options: { }
+ options: { },
},
{
desc: "Activate header tag editor",
focused: "div.editor.tag.inplaceEditor.input",
activedescendant: "div.tagLine",
key: "VK_RETURN",
- options: { }
+ options: { },
},
{
desc: "Activate header id attribute editor",
focused: "div.editor.attrList.children.0.children.1.inplaceEditor.input",
activedescendant: "div.tagLine",
key: "VK_TAB",
- options: { }
+ options: { },
},
{
desc: "Deselect text in header id attribute editor",
focused: "div.editor.attrList.children.0.children.1.inplaceEditor.input",
activedescendant: "div.tagLine",
key: "VK_TAB",
- options: { }
+ options: { },
},
{
desc: "Move the cursor to the left",
focused: "div.editor.attrList.children.0.children.1.inplaceEditor.input",
activedescendant: "div.tagLine",
key: "VK_LEFT",
- options: { }
+ options: { },
},
{
desc: "Modify the attribute",
focused: "div.editor.attrList.children.0.children.1.inplaceEditor.input",
activedescendant: "div.tagLine",
key: "A",
- options: { }
+ options: { },
},
{
desc: "Commit the attribute change",
focused: "div.focusableElms.1",
activedescendant: "div.tagLine",
key: "VK_RETURN",
options: { },
- waitFor: "inspector-updated"
+ waitFor: "inspector-updated",
},
{
desc: "Tab and focus on header class attribute",
focused: "div.focusableElms.2",
activedescendant: "div.tagLine",
key: "VK_TAB",
- options: { }
+ options: { },
},
{
desc: "Tab and focus on header new attribute node",
focused: "div.focusableElms.3",
activedescendant: "div.tagLine",
key: "VK_TAB",
- options: { }
+ options: { },
},
];
let elms = {};
add_task(async function() {
const url = `data:text/html;charset=utf-8,${TEST_URI}`;
const { inspector } = await openInspectorForURL(url);
--- a/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_01.js
@@ -61,16 +61,16 @@ const TEST_DATA = [
["VK_RIGHT", "style=\"display: inherit; color :chartreuse ", 43, 43, false],
[" ", "style=\"display: inherit; color :chartreuse aliceblue ",
44, 53, true],
["!", "style=\"display: inherit; color :chartreuse !important; ",
45, 55, false],
["VK_RIGHT", "style=\"display: inherit; color :chartreuse !important; ",
55, 55, false],
["VK_RETURN", "style=\"display: inherit; color :chartreuse !important;\"",
- -1, -1, false]
+ -1, -1, false],
];
add_task(async function() {
const {inspector} = await openInspectorForURL(TEST_URL);
await runStyleAttributeAutocompleteTests(inspector, TEST_DATA);
});
--- a/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_02.js
@@ -35,17 +35,17 @@ const TEST_DATA_DOUBLE = [
["VK_RIGHT", "style=\"color:beige", 18, 18, false],
["\"", "style=\"color:beige\"", 19, 19, false],
[" ", "style=\"color:beige\" ", 20, 20, false],
["d", "style=\"color:beige\" d", 21, 21, false],
["a", "style=\"color:beige\" da", 22, 22, false],
["t", "style=\"color:beige\" dat", 23, 23, false],
["a", "style=\"color:beige\" data", 24, 24, false],
["VK_RETURN", "style=\"color:beige\"",
- -1, -1, false]
+ -1, -1, false],
];
// Check that single quote attribute is also supported
const TEST_DATA_SINGLE = [
["s", "s", 1, 1, false],
["t", "st", 2, 2, false],
["y", "sty", 3, 3, false],
["l", "styl", 4, 4, false],
@@ -59,17 +59,17 @@ const TEST_DATA_SINGLE = [
["VK_RIGHT", "style='color:beige", 18, 18, false],
["'", "style='color:beige'", 19, 19, false],
[" ", "style='color:beige' ", 20, 20, false],
["d", "style='color:beige' d", 21, 21, false],
["a", "style='color:beige' da", 22, 22, false],
["t", "style='color:beige' dat", 23, 23, false],
["a", "style='color:beige' data", 24, 24, false],
["VK_RETURN", "style=\"color:beige\"",
- -1, -1, false]
+ -1, -1, false],
];
// Check that autocompletion is still enabled after using url('1)
const TEST_DATA_INNER = [
["s", "s", 1, 1, false],
["t", "st", 2, 2, false],
["y", "sty", 3, 3, false],
["l", "styl", 4, 4, false],
@@ -89,17 +89,17 @@ const TEST_DATA_INNER = [
["'", "style=\"background:url('1')", 25, 25, false],
[")", "style=\"background:url('1')", 26, 26, false],
[";", "style=\"background:url('1');", 27, 27, false],
[" ", "style=\"background:url('1'); ", 28, 28, false],
["c", "style=\"background:url('1'); color", 29, 33, true],
["VK_RIGHT", "style=\"background:url('1'); color", 33, 33, false],
[":", "style=\"background:url('1'); color:aliceblue", 34, 43, true],
["b", "style=\"background:url('1'); color:beige", 35, 39, true],
- ["VK_RETURN", "style=\"background:url('1'); color:beige\"", -1, -1, false]
+ ["VK_RETURN", "style=\"background:url('1'); color:beige\"", -1, -1, false],
];
add_task(async function() {
const {inspector} = await openInspectorForURL(TEST_URL);
await runStyleAttributeAutocompleteTests(inspector, TEST_DATA_DOUBLE);
await runStyleAttributeAutocompleteTests(inspector, TEST_DATA_SINGLE);
await runStyleAttributeAutocompleteTests(inspector, TEST_DATA_INNER);
--- a/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_03.js
+++ b/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_03.js
@@ -39,16 +39,16 @@ const TEST_DATA = [
[";", "style=\"color:beige;\"", 19, 19, false],
[";", "style=\"color:beige;;\"", 20, 20, false],
["VK_LEFT", "style=\"color:beige;;\"", 19, 19, false],
["p", "style=\"color:beige;padding;\"", 20, 26, true],
["VK_RIGHT", "style=\"color:beige;padding;\"", 26, 26, false],
[":", "style=\"color:beige;padding:inherit;\"", 27, 34, true],
["0", "style=\"color:beige;padding:0;\"", 28, 28, false],
["VK_RETURN", "style=\"color:beige;padding:0;\"",
- -1, -1, false]
+ -1, -1, false],
];
add_task(async function() {
const {inspector} = await openInspectorForURL(TEST_URL);
await runStyleAttributeAutocompleteTests(inspector, TEST_DATA);
});
--- a/devtools/client/inspector/markup/test/browser_markup_display_node_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_display_node_02.js
@@ -28,78 +28,78 @@ const TEST_URI = `
`;
const TEST_DATA = [
{
desc: "Hiding the #grid display node by changing its style property",
selector: "#grid",
before: {
textContent: "grid",
- visible: true
+ visible: true,
},
changeStyle: async function(testActor) {
await testActor.eval(`
let node = document.getElementById("grid");
node.style.display = "block";
`);
},
after: {
- visible: false
- }
+ visible: false,
+ },
},
{
desc: "Reusing the 'grid' node, updating the display to 'grid again",
selector: "#grid",
before: {
- visible: false
+ visible: false,
},
changeStyle: async function(testActor) {
await testActor.eval(`
let node = document.getElementById("grid");
node.style.display = "grid";
`);
},
after: {
textContent: "grid",
- visible: true
- }
+ visible: true,
+ },
},
{
desc: "Showing a 'grid' node by changing its style property",
selector: "#block",
before: {
- visible: false
+ visible: false,
},
changeStyle: async function(testActor) {
await testActor.eval(`
let node = document.getElementById("block");
node.style.display = "grid";
`);
},
after: {
textContent: "grid",
- visible: true
- }
+ visible: true,
+ },
},
{
desc: "Showing a 'flex' node by removing its hidden attribute",
selector: "#flex",
before: {
- visible: false
+ visible: false,
},
changeStyle: async function(testActor) {
await testActor.eval(`
document.getElementById("flex").removeAttribute("hidden");
`);
},
after: {
textContent: "flex",
- visible: true
- }
- }
+ visible: true,
+ },
+ },
];
add_task(async function() {
const {inspector, testActor} = await openInspectorForURL(
"data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
for (const data of TEST_DATA) {
info("Running test case: " + data.desc);
--- a/devtools/client/inspector/markup/test/browser_markup_dragdrop_autoscroll_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_autoscroll_01.js
@@ -21,28 +21,28 @@ add_task(async function() {
info("Pretend the markup-view is dragging");
markup.isDragging = true;
info("Simulate a mousemove on the view, at the bottom, and expect scrolling");
markup._onMouseMove({
preventDefault: () => {},
target: markup.doc.body,
- pageY: viewHeight + markup.doc.defaultView.scrollY
+ pageY: viewHeight + markup.doc.defaultView.scrollY,
});
const bottomScrollPos = await waitForScrollStop(markup.doc);
ok(bottomScrollPos > 0, "The view was scrolled down");
info("Simulate a mousemove at the top and expect more scrolling");
markup._onMouseMove({
preventDefault: () => {},
target: markup.doc.body,
- pageY: markup.doc.defaultView.scrollY
+ pageY: markup.doc.defaultView.scrollY,
});
const topScrollPos = await waitForScrollStop(markup.doc);
ok(topScrollPos < bottomScrollPos, "The view was scrolled up");
is(topScrollPos, 0, "The view was scrolled up to the top");
info("Simulate a mouseup to stop dragging");
markup._onMouseUp();
--- a/devtools/client/inspector/markup/test/browser_markup_dragdrop_autoscroll_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_autoscroll_02.js
@@ -20,27 +20,27 @@ add_task(async function() {
info("Pretend the markup-view is dragging");
markup.isDragging = true;
info("Simulate a mousemove on the view, at the bottom, and expect scrolling");
markup._onMouseMove({
preventDefault: () => {},
target: markup.doc.body,
- pageY: viewHeight + markup.doc.defaultView.scrollY
+ pageY: viewHeight + markup.doc.defaultView.scrollY,
});
const bottomScrollPos = await waitForScrollStop(markup.doc);
ok(bottomScrollPos > 0, "The view was scrolled down");
info("Simulate a mousemove at the top and expect more scrolling");
markup._onMouseMove({
preventDefault: () => {},
target: markup.doc.body,
- pageY: markup.doc.defaultView.scrollY
+ pageY: markup.doc.defaultView.scrollY,
});
const topScrollPos = await waitForScrollStop(markup.doc);
ok(topScrollPos < bottomScrollPos, "The view was scrolled up");
is(topScrollPos, 0, "The view was scrolled up to the top");
info("Simulate a mouseup to stop dragging");
markup._onMouseUp();
--- a/devtools/client/inspector/markup/test/browser_markup_dragdrop_draggable.js
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_draggable.js
@@ -23,27 +23,27 @@ const TEST_DATA = [
{ node: "div", draggable: true },
{
node: async function(inspector) {
const parentFront = await getNodeFront("#before", inspector);
const {nodes} = await inspector.walker.children(parentFront);
// Getting the comment node.
return getContainerForNodeFront(nodes[1], inspector);
},
- draggable: true
+ draggable: true,
},
{
node: async function(inspector) {
const parentFront = await getNodeFront("#test", inspector);
const {nodes} = await inspector.walker.children(parentFront);
// Getting the ::before pseudo element.
return getContainerForNodeFront(nodes[0], inspector);
},
- draggable: false
- }
+ draggable: false,
+ },
];
add_task(async function() {
const {inspector} = await openInspectorForURL(TEST_URL);
await inspector.markup.expandAll();
for (const {node, draggable} of TEST_DATA) {
let container;
--- a/devtools/client/inspector/markup/test/browser_markup_events_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_01.js
@@ -16,138 +16,138 @@ const TEST_DATA = [ // eslint-disable-li
{
selector: "html",
expected: [
{
type: "load",
filename: TEST_URL,
attributes: [
"Bubbling",
- "DOM0"
+ "DOM0",
],
handler: "function onload(event) {\n" +
" init();\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#container",
expected: [
{
type: "mouseover",
filename: TEST_URL + ":45",
attributes: [
"Capturing",
- "DOM2"
+ "DOM2",
],
handler: "function mouseoverHandler(event) {\n" +
" if (event.target.id !== \"container\") {\n" +
" let output = document.getElementById(\"output\");\n" +
" output.textContent = event.target.textContent;\n" +
" }\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#multiple",
expected: [
{
type: "click",
filename: TEST_URL + ":52",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function clickHandler(event) {\n" +
" let output = document.getElementById(\"output\");\n" +
" output.textContent = \"click\";\n" +
- "}"
+ "}",
},
{
type: "mouseup",
filename: TEST_URL + ":57",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function mouseupHandler(event) {\n" +
" let output = document.getElementById(\"output\");\n" +
" output.textContent = \"mouseup\";\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
// #noevents tests check that dynamically added events are properly displayed
// in the markupview
{
selector: "#noevents",
- expected: []
+ expected: [],
},
{
selector: "#noevents",
beforeTest: async function(inspector, testActor) {
const nodeMutated = inspector.once("markupmutation");
await testActor.eval("window.wrappedJSObject.addNoeventsClickHandler();");
await nodeMutated;
},
expected: [
{
type: "click",
filename: TEST_URL + ":72",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function noeventsClickHandler(event) {\n" +
" alert(\"noevents has an event listener\");\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#noevents",
beforeTest: async function(inspector, testActor) {
const nodeMutated = inspector.once("markupmutation");
await testActor.eval(
"window.wrappedJSObject.removeNoeventsClickHandler();");
await nodeMutated;
},
- expected: []
+ expected: [],
},
{
selector: "#DOM0",
expected: [
{
type: "click",
filename: TEST_URL,
attributes: [
"Bubbling",
- "DOM0"
+ "DOM0",
],
handler: "function onclick(event) {\n" +
" alert('DOM0')\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#handleevent",
expected: [
{
type: "click",
filename: TEST_URL + ":67",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function(blah) {\n" +
" alert(\"handleEvent\");\n" +
- "}"
- }
- ]
- }
+ "}",
+ },
+ ],
+ },
];
add_task(async function() {
await runEventPopupTests(TEST_URL, TEST_DATA);
});
--- a/devtools/client/inspector/markup/test/browser_markup_events_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_02.js
@@ -16,148 +16,148 @@ const TEST_DATA = [ // eslint-disable-li
{
selector: "#fatarrow",
expected: [
{
type: "click",
filename: TEST_URL + ":39",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "() => {\n" +
" alert(\"Fat arrow without params!\");\n" +
- "}"
+ "}",
},
{
type: "click",
filename: TEST_URL + ":43",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "event => {\n" +
" alert(\"Fat arrow with 1 param!\");\n" +
- "}"
+ "}",
},
{
type: "click",
filename: TEST_URL + ":47",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "(event, foo, bar) => {\n" +
" alert(\"Fat arrow with 3 params!\");\n" +
- "}"
+ "}",
},
{
type: "click",
filename: TEST_URL + ":51",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
- handler: "b => b"
- }
- ]
+ handler: "b => b",
+ },
+ ],
},
{
selector: "#bound",
expected: [
{
type: "click",
filename: TEST_URL + ":62",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function(event) {\n" +
" alert(\"Bound event\");\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#boundhe",
expected: [
{
type: "click",
filename: TEST_URL + ":85",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function() {\n" +
" alert(\"boundHandleEvent\");\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#comment-inline",
expected: [
{
type: "click",
filename: TEST_URL + ":91",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function functionProceededByInlineComment() {\n" +
" alert(\"comment-inline\");\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#comment-streaming",
expected: [
{
type: "click",
filename: TEST_URL + ":96",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function functionProceededByStreamingComment() {\n" +
" alert(\"comment-streaming\");\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#anon-object-method",
expected: [
{
type: "click",
filename: TEST_URL + ":71",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function() {\n" +
" alert(\"obj.anonObjectMethod\");\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#object-method",
expected: [
{
type: "click",
filename: TEST_URL + ":75",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function kay() {\n" +
" alert(\"obj.objectMethod\");\n" +
- "}"
- }
- ]
- }
+ "}",
+ },
+ ],
+ },
];
add_task(async function() {
await runEventPopupTests(TEST_URL, TEST_DATA);
});
--- a/devtools/client/inspector/markup/test/browser_markup_events_03.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_03.js
@@ -16,101 +16,101 @@ const TEST_DATA = [ // eslint-disable-li
{
selector: "#es6-method",
expected: [
{
type: "click",
filename: TEST_URL + ":66",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "es6Method(foo, bar) {\n" +
" alert(\"obj.es6Method\");\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#generator",
expected: [
{
type: "click",
filename: TEST_URL + ":85",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function* generator() {\n" +
" alert(\"generator\");\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#anon-generator",
expected: [
{
type: "click",
filename: TEST_URL + ":43",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function*() {\n" +
" alert(\"anonGenerator\");\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#named-function-expression",
expected: [
{
type: "click",
filename: TEST_URL + ":20",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function foo() {\n" +
" alert(\"namedFunctionExpression\");\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#anon-function-expression",
expected: [
{
type: "click",
filename: TEST_URL + ":24",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function() {\n" +
" alert(\"anonFunctionExpression\");\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#returned-function",
expected: [
{
type: "click",
filename: TEST_URL + ":29",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function bar() {\n" +
" alert(\"returnedFunction\");\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
];
add_task(async function() {
await runEventPopupTests(TEST_URL, TEST_DATA);
});
--- a/devtools/client/inspector/markup/test/browser_markup_events_04.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_04.js
@@ -16,142 +16,142 @@ const TEST_DATA = [ // eslint-disable-li
{
selector: "html",
expected: [
{
type: "click",
filename: TEST_URL + ":56",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function(foo2, bar2) {\n" +
" alert(\"documentElement event listener clicked\");\n" +
- "}"
+ "}",
},
{
type: "click",
filename: TEST_URL + ":52",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function(foo, bar) {\n" +
" alert(\"document event listener clicked\");\n" +
- "}"
+ "}",
},
{
type: "load",
filename: TEST_URL,
attributes: [
"Bubbling",
- "DOM0"
+ "DOM0",
],
handler: "function onload(event) {\n" +
" init();\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#constructed-function",
expected: [
{
type: "click",
filename: TEST_URL + ":1",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function anonymous() {\n" +
"\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#constructed-function-with-body-string",
expected: [
{
type: "click",
filename: TEST_URL + ":1",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function anonymous(a, b, c) {\n" +
" alert(\"constructedFuncWithBodyString\");\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#multiple-assignment",
expected: [
{
type: "click",
filename: TEST_URL + ":24",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function multi() {\n" +
" alert(\"multipleAssignment\");\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#promise",
expected: [
{
type: "click",
filename: "[native code]",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function() {\n" +
" [native code]\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#arraysort",
expected: [
{
type: "click",
filename: "[native code]",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function sort(arr, comparefn) {\n" +
" [native code]\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
{
selector: "#handleEvent",
expected: [
{
type: "click",
filename: TEST_URL + ":77",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: "function(event) {\n" +
" switch (event.type) {\n" +
" case \"click\":\n" +
" alert(\"handleEvent click\");\n" +
" }\n" +
- "}"
- }
- ]
+ "}",
+ },
+ ],
},
];
add_task(async function() {
await runEventPopupTests(TEST_URL, TEST_DATA);
});
--- a/devtools/client/inspector/markup/test/browser_markup_events_source_map.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_source_map.js
@@ -17,17 +17,17 @@ const TEST_DATA = [
selector: "#clicky",
isSourceMapped: true,
expected: [
{
type: "click",
filename: "webpack:///events_original.js:7",
attributes: [
"Bubbling",
- "DOM2"
+ "DOM2",
],
handler: `function clickme() {
console.log("clickme");
}`,
},
],
},
];
--- a/devtools/client/inspector/markup/test/browser_markup_html_edit_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_html_edit_01.js
@@ -14,42 +14,42 @@ const TEST_DATA = [{
selector: "#one",
oldHTML: '<div id="one">First <em>Div</em></div>',
newHTML: '<div id="one">First Div</div>',
validate: async function({pageNodeFront, selectedNodeFront, testActor}) {
const text = await testActor.getProperty("#one", "textContent");
is(text, "First Div", "New div has expected text content");
const num = await testActor.getNumberOfElementMatches("#one em");
is(num, 0, "No em remaining");
- }
+ },
}, {
selector: "#removedChildren",
oldHTML: "<div id=\"removedChildren\">removedChild " +
"<i>Italic <b>Bold <u>Underline</u></b></i> Normal</div>",
- newHTML: "<div id=\"removedChildren\">removedChild</div>"
+ newHTML: "<div id=\"removedChildren\">removedChild</div>",
}, {
selector: "#addedChildren",
oldHTML: '<div id="addedChildren">addedChildren</div>',
newHTML: "<div id=\"addedChildren\">addedChildren " +
- "<i>Italic <b>Bold <u>Underline</u></b></i> Normal</div>"
+ "<i>Italic <b>Bold <u>Underline</u></b></i> Normal</div>",
}, {
selector: "#addedAttribute",
oldHTML: '<div id="addedAttribute">addedAttribute</div>',
newHTML: "<div id=\"addedAttribute\" class=\"important\" disabled checked>" +
"addedAttribute</div>",
validate: async function({pageNodeFront, selectedNodeFront, testActor}) {
is(pageNodeFront, selectedNodeFront, "Original element is selected");
const html = await testActor.getProperty("#addedAttribute", "outerHTML");
is(html, "<div id=\"addedAttribute\" class=\"important\" disabled=\"\" " +
"checked=\"\">addedAttribute</div>", "Attributes have been added");
- }
+ },
}, {
selector: "#changedTag",
oldHTML: '<div id="changedTag">changedTag</div>',
- newHTML: '<p id="changedTag" class="important">changedTag</p>'
+ newHTML: '<p id="changedTag" class="important">changedTag</p>',
}, {
selector: "#siblings",
oldHTML: '<div id="siblings">siblings</div>',
newHTML: '<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, testActor}) {
const beforeSiblingFront = await getNodeFront("#siblings-before-sibling",
@@ -61,17 +61,17 @@ const TEST_DATA = [{
const beforeText = await testActor.getProperty("#siblings-before-sibling",
"textContent");
is(beforeText, "before sibling", "Sibling has been inserted");
const afterText = await testActor.getProperty("#siblings-after-sibling",
"textContent");
is(afterText, "after sibling", "Sibling has been inserted");
- }
+ },
}];
const TEST_URL = "data:text/html," +
"<!DOCTYPE html>" +
"<head><meta charset='utf-8' /></head>" +
"<body>" +
TEST_DATA.map(outer => outer.oldHTML).join("\n") +
"</body>" +
--- a/devtools/client/inspector/markup/test/browser_markup_html_edit_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_html_edit_02.js
@@ -20,17 +20,17 @@ const TEST_DATA = [
const textNodeName = await testActor.eval(`
document.querySelector("#badMarkup1").nextSibling.nodeName
`);
const textNodeData = await testActor.eval(`
document.querySelector("#badMarkup1").nextSibling.data
`);
is(textNodeName, "#text", "Sibling is a text element");
is(textNodeData, " hanging", "New text node has expected text content");
- }
+ },
},
{
selector: "#badMarkup2",
oldHTML: "<div id=\"badMarkup2\">badMarkup2</div>",
newHTML: "<div id=\"badMarkup2\">badMarkup2</div> hanging<div></div>" +
"</div></div></body>",
validate: async function({pageNodeFront, selectedNodeFront, testActor}) {
is(pageNodeFront, selectedNodeFront, "Original element is selected");
@@ -38,32 +38,32 @@ const TEST_DATA = [
const textNodeName = await testActor.eval(`
document.querySelector("#badMarkup2").nextSibling.nodeName
`);
const textNodeData = await testActor.eval(`
document.querySelector("#badMarkup2").nextSibling.data
`);
is(textNodeName, "#text", "Sibling is a text element");
is(textNodeData, " hanging", "New text node has expected text content");
- }
+ },
},
{
selector: "#badMarkup3",
oldHTML: "<div id=\"badMarkup3\">badMarkup3</div>",
newHTML: "<div id=\"badMarkup3\">badMarkup3 <em>Emphasized <strong> " +
"and strong</div>",
validate: async function({pageNodeFront, selectedNodeFront, testActor}) {
is(pageNodeFront, selectedNodeFront, "Original element is selected");
const emText = await testActor.getProperty("#badMarkup3 em", "textContent");
const strongText = await testActor.getProperty("#badMarkup3 strong",
"textContent");
is(emText, "Emphasized and strong", "<em> was auto created");
is(strongText, " and strong", "<strong> was auto created");
- }
+ },
},
{
selector: "#badMarkup4",
oldHTML: "<div id=\"badMarkup4\">badMarkup4</div>",
newHTML: "<div id=\"badMarkup4\">badMarkup4</p>",
validate: async function({pageNodeFront, selectedNodeFront, testActor}) {
is(pageNodeFront, selectedNodeFront, "Original element is selected");
@@ -72,17 +72,17 @@ const TEST_DATA = [
const pText = await testActor.getProperty("#badMarkup4 p", "textContent");
const pTag = await testActor.getProperty("#badMarkup4 p", "tagName");
is(divText, "badMarkup4", "textContent is correct");
is(divTag, "DIV", "did not change to <p> tag");
is(pText, "", "The <p> tag has no children");
is(pTag, "P", "Created an empty <p> tag");
- }
+ },
},
{
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, testActor}) {
is(pageNodeFront, selectedNodeFront, "Original element is selected");
@@ -95,18 +95,18 @@ const TEST_DATA = [
"textContent");
const divTag = await testActor.getProperty("#badMarkup5 ~ div", "tagName");
is(num, 0, "The invalid markup got created as a sibling");
is(pText, "badMarkup5 ", "The p tag does not take in the div content");
is(pTag, "P", "Did not change to a <div> tag");
is(divText, "with a nested div", "textContent is correct");
is(divTag, "DIV", "Did not change to <p> tag");
- }
- }
+ },
+ },
];
const TEST_URL = "data:text/html," +
"<!DOCTYPE html>" +
"<head><meta charset='utf-8' /></head>" +
"<body>" +
TEST_DATA.map(outer => outer.oldHTML).join("\n") +
"</body>" +
--- a/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js
+++ b/devtools/client/inspector/markup/test/browser_markup_image_tooltip.js
@@ -6,17 +6,17 @@
// Test that image preview tooltips are shown on img and canvas tags in the
// markup-view and that the tooltip actually contains an image and shows the
// right dimension label
const TEST_NODES = [
{selector: "img.local", size: "192" + " \u00D7 " + "192"},
{selector: "img.data", size: "64" + " \u00D7 " + "64"},
{selector: "img.remote", size: "22" + " \u00D7 " + "23"},
- {selector: ".canvas", size: "600" + " \u00D7 " + "600"}
+ {selector: ".canvas", size: "600" + " \u00D7 " + "600"},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_markup_image_and_canvas_2.html");
const {inspector} = await openInspector();
info("Selecting the first <img> tag");
await selectNode("img", inspector);
--- a/devtools/client/inspector/markup/test/browser_markup_image_tooltip_mutations.js
+++ b/devtools/client/inspector/markup/test/browser_markup_image_tooltip_mutations.js
@@ -60,17 +60,17 @@ add_task(async function() {
/**
* Updates the src attribute of the image. Return a Promise.
*/
function updateImageSrc(img, newSrc, inspector) {
const onMutated = inspector.once("markupmutation");
const onModified = img.modifyAttributes([{
attributeName: "src",
- newValue: newSrc
+ newValue: newSrc,
}]);
return Promise.all([onMutated, onModified]);
}
/**
* Checks that the markup view tooltip contains an image element with the given
* size.
--- a/devtools/client/inspector/markup/test/browser_markup_keybindings_delete_attributes.js
+++ b/devtools/client/inspector/markup/test/browser_markup_keybindings_delete_attributes.js
@@ -13,20 +13,20 @@ const TEST_URL = "data:text/html;charset
// List of all the test cases. Each item is an object with the following props:
// - selector: the css selector of the node that should be selected
// - attribute: the name of the attribute that should be focused. Do not
// specify an attribute that would make it impossible to find the node using
// selector.
// Note that after each test case, undo is called.
const TEST_DATA = [{
selector: "#id",
- attribute: "class"
+ attribute: "class",
}, {
selector: "#id",
- attribute: "data-id"
+ attribute: "data-id",
}];
add_task(async function() {
const {inspector} = await openInspectorForURL(TEST_URL);
const {walker} = inspector;
for (const {selector, attribute} of TEST_DATA) {
info("Get the container for node " + selector);
--- a/devtools/client/inspector/markup/test/browser_markup_links_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_links_01.js
@@ -8,101 +8,101 @@
// values) are URIs or pointers to IDs.
const TEST_URL = URL_ROOT + "doc_markup_links.html";
const TEST_DATA = [{
selector: "link",
attributes: [{
attributeName: "href",
- links: [{type: "cssresource", value: "style.css"}]
- }]
+ links: [{type: "cssresource", value: "style.css"}],
+ }],
}, {
selector: "link[rel=icon]",
attributes: [{
attributeName: "href",
links: [{type: "uri",
- value: "/media/img/firefox/favicon-196.223e1bcaf067.png"}]
- }]
+ value: "/media/img/firefox/favicon-196.223e1bcaf067.png"}],
+ }],
}, {
selector: "form",
attributes: [{
attributeName: "action",
- links: [{type: "uri", value: "/post_message"}]
- }]
+ links: [{type: "uri", value: "/post_message"}],
+ }],
}, {
selector: "label[for=name]",
attributes: [{
attributeName: "for",
- links: [{type: "idref", value: "name"}]
- }]
+ links: [{type: "idref", value: "name"}],
+ }],
}, {
selector: "label[for=message]",
attributes: [{
attributeName: "for",
- links: [{type: "idref", value: "message"}]
- }]
+ links: [{type: "idref", value: "message"}],
+ }],
}, {
selector: "output",
attributes: [{
attributeName: "form",
- links: [{type: "idref", value: "message-form"}]
+ links: [{type: "idref", value: "message-form"}],
}, {
attributeName: "for",
links: [
{type: "idref", value: "name"},
{type: "idref", value: "message"},
- {type: "idref", value: "invalid"}
- ]
- }]
+ {type: "idref", value: "invalid"},
+ ],
+ }],
}, {
selector: "a",
attributes: [{
attributeName: "href",
- links: [{type: "uri", value: "/go/somewhere/else"}]
+ links: [{type: "uri", value: "/go/somewhere/else"}],
}, {
attributeName: "ping",
links: [
{type: "uri", value: "/analytics?page=pageA"},
- {type: "uri", value: "/analytics?user=test"}
- ]
- }]
+ {type: "uri", value: "/analytics?user=test"},
+ ],
+ }],
}, {
selector: "li[contextmenu=menu1]",
attributes: [{
attributeName: "contextmenu",
- links: [{type: "idref", value: "menu1"}]
- }]
+ links: [{type: "idref", value: "menu1"}],
+ }],
}, {
selector: "li[contextmenu=menu2]",
attributes: [{
attributeName: "contextmenu",
- links: [{type: "idref", value: "menu2"}]
- }]
+ links: [{type: "idref", value: "menu2"}],
+ }],
}, {
selector: "li[contextmenu=menu3]",
attributes: [{
attributeName: "contextmenu",
- links: [{type: "idref", value: "menu3"}]
- }]
+ links: [{type: "idref", value: "menu3"}],
+ }],
}, {
selector: "video",
attributes: [{
attributeName: "poster",
- links: [{type: "uri", value: "doc_markup_tooltip.png"}]
+ links: [{type: "uri", value: "doc_markup_tooltip.png"}],
}, {
attributeName: "src",
- links: [{type: "uri", value: "code-rush.mp4"}]
- }]
+ links: [{type: "uri", value: "code-rush.mp4"}],
+ }],
}, {
selector: "script",
attributes: [{
attributeName: "src",
- links: [{type: "jsresource", value: "lib_jquery_1.0.js"}]
- }]
+ links: [{type: "jsresource", value: "lib_jquery_1.0.js"}],
+ }],
}];
requestLongerTimeout(2);
add_task(async function() {
const {inspector} = await openInspectorForURL(TEST_URL);
for (const {selector, attributes} of TEST_DATA) {
--- a/devtools/client/inspector/markup/test/browser_markup_links_04.js
+++ b/devtools/client/inspector/markup/test/browser_markup_links_04.js
@@ -24,57 +24,57 @@ const TEST_DATA = [{
selector: "link",
attributeName: "href",
popupNodeSelector: ".link",
isLinkFollowItemVisible: true,
isLinkCopyItemVisible: true,
linkFollowItemLabel: TOOLBOX_L10N.getStr(
"toolbox.viewCssSourceInStyleEditor.label"),
linkCopyItemLabel: INSPECTOR_L10N.getStr(
- "inspector.menu.copyUrlToClipboard.label")
+ "inspector.menu.copyUrlToClipboard.label"),
}, {
selector: "link[rel=icon]",
attributeName: "href",
popupNodeSelector: ".link",
isLinkFollowItemVisible: true,
isLinkCopyItemVisible: true,
linkFollowItemLabel: INSPECTOR_L10N.getStr(
"inspector.menu.openUrlInNewTab.label"),
linkCopyItemLabel: INSPECTOR_L10N.getStr(
- "inspector.menu.copyUrlToClipboard.label")
+ "inspector.menu.copyUrlToClipboard.label"),
}, {
selector: "link",
attributeName: "rel",
popupNodeSelector: ".attr-value",
isLinkFollowItemVisible: false,
- isLinkCopyItemVisible: false
+ isLinkCopyItemVisible: false,
}, {
selector: "output",
attributeName: "for",
popupNodeSelector: ".link",
isLinkFollowItemVisible: true,
isLinkCopyItemVisible: false,
linkFollowItemLabel: INSPECTOR_L10N.getFormatStr(
- "inspector.menu.selectElement.label", "name")
+ "inspector.menu.selectElement.label", "name"),
}, {
selector: "script",
attributeName: "src",
popupNodeSelector: ".link",
isLinkFollowItemVisible: true,
isLinkCopyItemVisible: true,
linkFollowItemLabel: TOOLBOX_L10N.getStr(
"toolbox.viewJsSourceInDebugger.label"),
linkCopyItemLabel: INSPECTOR_L10N.getStr(
- "inspector.menu.copyUrlToClipboard.label")
+ "inspector.menu.copyUrlToClipboard.label"),
}, {
selector: "p[for]",
attributeName: "for",
popupNodeSelector: ".attr-value",
isLinkFollowItemVisible: false,
- isLinkCopyItemVisible: false
+ isLinkCopyItemVisible: false,
}];
add_task(async function() {
const {inspector} = await openInspectorForURL(TEST_URL);
for (const test of TEST_DATA) {
info("Selecting test node " + test.selector);
await selectNode(test.selector, inspector);
--- a/devtools/client/inspector/markup/test/browser_markup_load_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_load_01.js
@@ -61,17 +61,17 @@ add_task(async function() {
ok(inspector.markup, "There is a markup view");
is(inspector.markup._elt.children.length, 1, "The markup view is rendering");
});
async function chooseWithInspectElementContextMenu(selector, tab) {
await BrowserTestUtils.synthesizeMouseAtCenter(selector, {
type: "contextmenu",
- button: 2
+ button: 2,
}, tab.linkedBrowser);
await EventUtils.sendString("Q");
}
function waitForLinkedBrowserEvent(tab, event) {
return BrowserTestUtils.waitForContentEvent(tab.linkedBrowser, event, true);
}
--- a/devtools/client/inspector/markup/test/browser_markup_mutation_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_mutation_01.js
@@ -22,57 +22,57 @@ const TEST_DATA = [
},
check: async function(inspector) {
const {editor} = await getContainerForSelector("#node1", inspector);
ok([...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
return attr.textContent.trim() === "newattr=\"newattrval\""
&& attr.dataset.value === "newattrval"
&& attr.dataset.attr === "newattr";
}), "newattr attribute found");
- }
+ },
},
{
desc: "Removing an attribute",
test: async function(testActor) {
await testActor.removeAttribute("#node1", "newattr");
},
check: async function(inspector) {
const {editor} = await getContainerForSelector("#node1", inspector);
ok(![...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
return attr.textContent.trim() === "newattr=\"newattrval\"";
}), "newattr attribute removed");
- }
+ },
},
{
desc: "Re-adding an attribute",
test: async function(testActor) {
await testActor.setAttribute("#node1", "newattr", "newattrval");
},
check: async function(inspector) {
const {editor} = await getContainerForSelector("#node1", inspector);
ok([...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
return attr.textContent.trim() === "newattr=\"newattrval\""
&& attr.dataset.value === "newattrval"
&& attr.dataset.attr === "newattr";
}), "newattr attribute found");
- }
+ },
},
{
desc: "Changing an attribute",
test: async function(testActor) {
await testActor.setAttribute("#node1", "newattr", "newattrchanged");
},
check: async function(inspector) {
const {editor} = await getContainerForSelector("#node1", inspector);
ok([...editor.attrList.querySelectorAll(".attreditor")].some(attr => {
return attr.textContent.trim() === "newattr=\"newattrchanged\""
&& attr.dataset.value === "newattrchanged"
&& attr.dataset.attr === "newattr";
}), "newattr attribute found");
- }
+ },
},
{
desc: "Adding another attribute does not rerender unchanged attributes",
test: async function(testActor, inspector) {
const {editor} = await getContainerForSelector("#node1", inspector);
// This test checks the impact on the markup-view nodes after setting attributes on
// content nodes.
@@ -92,60 +92,60 @@ const TEST_DATA = [
info("Check the attribute-container for the new attribute mutation was created");
const otherAttrContainer = editor.attrList.querySelector("[data-attr=otherattr]");
ok(otherAttrContainer, "attribute-container for 'otherattr' found");
info("Check the attribute-container for 'new-attr' is the same node as earlier.");
const newAttrContainer = editor.attrList.querySelector("[data-attr=newattr]");
ok(newAttrContainer, "attribute-container for 'newattr' found");
ok(newAttrContainer.beforeMutationFlag, "attribute-container same as earlier");
- }
+ },
},
{
desc: "Adding ::after element",
numMutations: 2,
test: async function(testActor) {
await testActor.eval(`
let node1 = document.querySelector("#node1");
node1.classList.add("pseudo");
`);
},
check: async function(inspector) {
const {children} = await getContainerForSelector("#node1", inspector);
is(children.childNodes.length, 2,
"Node1 now has 2 children (text child and ::after");
- }
+ },
},
{
desc: "Removing ::after element",
numMutations: 2,
test: async function(testActor) {
await testActor.eval(`
let node1 = document.querySelector("#node1");
node1.classList.remove("pseudo");
`);
},
check: async function(inspector) {
const container = await getContainerForSelector("#node1", inspector);
ok(container.inlineTextChild, "Has single text child.");
- }
+ },
},
{
desc: "Updating the text-content",
test: async function(testActor) {
await testActor.setProperty("#node1", "textContent", "newtext");
},
check: async function(inspector) {
const container = await getContainerForSelector("#node1", inspector);
ok(container.inlineTextChild, "Has single text child.");
ok(!container.canExpand, "Can't expand container with inlineTextChild.");
ok(!container.inlineTextChild.canExpand, "Can't expand inlineTextChild.");
is(container.editor.elt.querySelector(".text").textContent.trim(),
"newtext", "Single text child editor updated.");
- }
+ },
},
{
desc: "Adding a second text child",
test: async function(testActor) {
await testActor.eval(`
let node1 = document.querySelector("#node1");
let newText = node1.ownerDocument.createTextNode("more");
node1.appendChild(newText);
@@ -212,32 +212,32 @@ const TEST_DATA = [
const openTags = container.children.querySelectorAll(".open .tag");
is(openTags.length, 2, "There are 2 tags in node2");
is(openTags[0].textContent.trim(), "div", "The first tag is a div");
is(openTags[1].textContent.trim(), "span", "The second tag is a span");
is(container.children.querySelector(".text").textContent.trim(), "foo",
"The span's textcontent is correct");
- }
+ },
},
{
desc: "Removing child nodes",
test: async function(testActor) {
await testActor.eval(`
let node4 = document.querySelector("#node4");
while (node4.firstChild) {
node4.removeChild(node4.firstChild);
}
`);
},
check: async function(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(testActor) {
await testActor.eval(`
let node17 = document.querySelector("#node17");
let node2 = document.querySelector("#node2");
node2.appendChild(node17);
@@ -247,17 +247,17 @@ const TEST_DATA = [
const {children} = await getContainerForSelector("#node16", inspector);
is(children.innerHTML, "",
"Node17 has been removed from its node16 parent");
const container = await getContainerForSelector("#node2", inspector);
const openTags = container.children.querySelectorAll(".open .tag");
is(openTags.length, 3, "There are now 3 tags in node2");
is(openTags[2].textContent.trim(), "p", "The third tag is node17");
- }
+ },
},
{
desc: "Swapping a parent and child element, putting them in the same tree",
// body
// node1
// node18
// node19
// node20
@@ -293,18 +293,18 @@ const TEST_DATA = [
const node21 = node20Children.childNodes[0];
is(node21.container.editor.elt.querySelector(".text").textContent.trim(),
"line21", "Node21 has a single text child");
const node18 = node20Children.childNodes[1];
is(node18.querySelector(".open .attreditor .attr-value")
.textContent.trim(),
"node18", "Node20's second child is indeed node18");
- }
- }
+ },
+ },
];
add_task(async function() {
const {inspector, testActor} = await openInspectorForURL(TEST_URL);
info("Expanding all markup-view nodes");
await inspector.markup.expandAll();
--- a/devtools/client/inspector/markup/test/browser_markup_mutation_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_mutation_02.js
@@ -27,75 +27,75 @@ const TEST_DATA = [{
desc: "Adding a new node should flash the new node",
mutate: async function(testActor) {
await testActor.eval(`
let newLi = document.createElement("LI");
newLi.textContent = "new list item";
document.querySelector(".list").appendChild(newLi);
`);
},
- flashedNode: ".list li:nth-child(3)"
+ flashedNode: ".list li:nth-child(3)",
}, {
desc: "Removing a node should flash its parent",
mutate: async function(testActor) {
await testActor.eval(`
let root = document.querySelector(".list");
root.removeChild(root.lastElementChild);
`);
- }
+ },
}, {
desc: "Re-appending an existing node should only flash this node",
mutate: async function(testActor) {
await testActor.eval(`
let root = document.querySelector(".list");
root.appendChild(root.firstElementChild);
`);
},
- flashedNode: ".list .item:last-child"
+ flashedNode: ".list .item:last-child",
}, {
desc: "Adding an attribute should flash the attribute",
attribute: "test-name",
mutate: async function(testActor) {
await testActor.setAttribute(".list", "test-name", "value-" + Date.now());
- }
+ },
}, {
desc: "Adding an attribute with css reserved characters should flash the " +
"attribute",
attribute: "one:two",
mutate: async function(testActor) {
await testActor.setAttribute(".list", "one:two", "value-" + Date.now());
- }
+ },
}, {
desc: "Editing an attribute should flash the attribute",
attribute: "class",
mutate: async function(testActor) {
await testActor.setAttribute(".list", "class", "list value-" + Date.now());
- }
+ },
}, {
desc: "Multiple changes to an attribute should flash the attribute",
attribute: "class",
mutate: async function(testActor) {
await testActor.eval(`
let root = document.querySelector(".list");
root.removeAttribute("class");
root.setAttribute("class", "list value-" + Date.now());
root.setAttribute("class", "list value-" + Date.now());
root.removeAttribute("class");
root.setAttribute("class", "list value-" + Date.now());
root.setAttribute("class", "list value-" + Date.now());
`);
- }
+ },
}, {
desc: "Removing an attribute should flash the node",
mutate: async function(testActor) {
await testActor.eval(`
let root = document.querySelector(".list");
root.removeAttribute("class");
`);
- }
+ },
}];
add_task(async function() {
const timerPrecision = Preferences.get("privacy.reduceTimerPrecision");
Preferences.set("privacy.reduceTimerPrecision", false);
registerCleanupFunction(function() {
Preferences.set("privacy.reduceTimerPrecision", timerPrecision);
--- a/devtools/client/inspector/markup/test/browser_markup_navigation.js
+++ b/devtools/client/inspector/markup/test/browser_markup_navigation.js
@@ -68,17 +68,17 @@ const TEST_DATA = [
["KEY_ArrowDown", "*text*"],
["KEY_ArrowDown", "node9"],
["KEY_ArrowDown", "*text*"],
["KEY_ArrowDown", "node10"],
["KEY_PageUp", "*text*"],
["KEY_PageUp", "*doctype*"],
["KEY_ArrowDown", "html"],
["KEY_ArrowLeft", "html"],
- ["KEY_ArrowDown", "head"]
+ ["KEY_ArrowDown", "head"],
];
add_task(async function() {
const {inspector} = await openInspectorForURL(TEST_URL);
info("Making sure the markup-view frame is focused");
inspector.markup._frame.focus();
--- a/devtools/client/inspector/markup/test/browser_markup_node_not_displayed_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_node_not_displayed_02.js
@@ -16,101 +16,101 @@ const TEST_DATA = [
changeStyle: async function(testActor) {
await testActor.eval(`
let div = document.createElement("div");
div.id = "new-style";
div.innerHTML = "<style>#normal-div {display:none;}</style>";
document.body.appendChild(div);
`);
},
- after: false
+ after: false,
},
{
desc: "Showing a node by deleting an existing stylesheet",
selector: "#normal-div",
before: false,
changeStyle: async function(testActor) {
await testActor.eval(`
document.getElementById("new-style").remove();
`);
},
- after: true
+ after: true,
},
{
desc: "Hiding a node by changing its style property",
selector: "#display-none",
before: false,
changeStyle: async function(testActor) {
await testActor.eval(`
let node = document.querySelector("#display-none");
node.style.display = "block";
`);
},
- after: true
+ after: true,
},
{
desc: "Showing a node by removing its hidden attribute",
selector: "#hidden-true",
before: false,
changeStyle: async function(testActor) {
await testActor.eval(`
document.querySelector("#hidden-true")
.removeAttribute("hidden");
`);
},
- after: true
+ after: true,
},
{
desc: "Hiding a node by adding a hidden attribute",
selector: "#hidden-true",
before: true,
changeStyle: async function(testActor) {
await testActor.setAttribute("#hidden-true", "hidden", "true");
},
- after: false
+ after: false,
},
{
desc: "Showing a node by changin a stylesheet's rule",
selector: "#hidden-via-stylesheet",
before: false,
changeStyle: async function(testActor) {
await testActor.eval(`
document.styleSheets[0]
.cssRules[0].style
.setProperty("display", "inline");
`);
},
- after: true
+ after: true,
},
{
desc: "Hiding a node by adding a new rule to a stylesheet",
selector: "#hidden-via-stylesheet",
before: true,
changeStyle: async function(testActor) {
await testActor.eval(`
document.styleSheets[0].insertRule(
"#hidden-via-stylesheet {display: none;}", 1);
`);
},
- after: false
+ after: false,
},
{
desc: "Hiding a node by adding a class that matches an existing rule",
selector: "#normal-div",
before: true,
changeStyle: async function(testActor) {
await testActor.eval(`
document.styleSheets[0].insertRule(
".a-new-class {display: none;}", 2);
document.querySelector("#normal-div")
.classList.add("a-new-class");
`);
},
- after: false
- }
+ after: false,
+ },
];
add_task(async function() {
const {inspector, testActor} = await openInspectorForURL(TEST_URL);
for (const data of TEST_DATA) {
info("Running test case: " + data.desc);
await runTestData(inspector, testActor, data);
--- a/devtools/client/inspector/markup/test/browser_markup_pagesize_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_pagesize_01.js
@@ -8,38 +8,38 @@
// devtools.markup.pagesize preference.
Services.prefs.setIntPref("devtools.markup.pagesize", 5);
const TEST_URL = URL_ROOT + "doc_markup_pagesize_01.html";
const TEST_DATA = [{
desc: "Select the last item",
selector: "#z",
- expected: "*more*vwxyz"
+ expected: "*more*vwxyz",
}, {
desc: "Select the first item",
selector: "#a",
- expected: "abcde*more*"
+ expected: "abcde*more*",
}, {
desc: "Select the last item",
selector: "#z",
- expected: "*more*vwxyz"
+ expected: "*more*vwxyz",
}, {
desc: "Select an already-visible item",
selector: "#v",
// Because "v" was already visible, we shouldn't have loaded
// a different page.
- expected: "*more*vwxyz"
+ expected: "*more*vwxyz",
}, {
desc: "Verify childrenDirty reloads the page",
selector: "#w",
forceReload: true,
// But now that we don't already have a loaded page, selecting
// w should center around w.
- expected: "*more*uvwxy*more*"
+ expected: "*more*uvwxy*more*",
}];
add_task(async function() {
const {inspector} = await openInspectorForURL(TEST_URL);
info("Start iterating through the test data");
for (const step of TEST_DATA) {
info("Start test: " + step.desc);
--- a/devtools/client/inspector/markup/test/browser_markup_shadowdom.js
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom.js
@@ -48,17 +48,17 @@ const TEST_DATA = [
slot="slot1"
slotted-1
inner
slot="slot2"
slotted-2
inner
class="no-slot-class"
no-slot-text
- inner`
+ inner`,
}, {
// Test that components without any direct children still display a shadow root node,
// if a shadow root is attached to the host.
title: "shadow root without direct children",
url: `data:text/html;charset=utf-8,
<test-component></test-component>
<script>
@@ -70,17 +70,17 @@ const TEST_DATA = [
shadowRoot.innerHTML = "<slot><div>fallback-content</div></slot>";
}
});
</script>`,
tree: `
test-component
#shadow-root
slot
- fallback-content`
+ fallback-content`,
}, {
// Test that markup view is correctly displayed for non-trivial shadow DOM nesting.
title: "nested components",
url: `data:text/html;charset=utf-8,
<test-component >
<div slot="slot1">slot1-1</div>
<third-component slot="slot2"></third-component>
@@ -123,17 +123,17 @@ const TEST_DATA = [
#shadow-root
div
slot
div!slotted
div
div
third-component
#shadow-root
- div`
+ div`,
}, {
// Test that ::before and ::after pseudo elements are correctly displayed in host
// components and in slot elements.
title: "pseudo elements",
url: `data:text/html;charset=utf-8,
<style>
test-component::before { content: "before-host" }
@@ -167,17 +167,17 @@ const TEST_DATA = [
style
slot { display: block }
slot
::before
div!slotted
::after
::before
class="light-dom"
- ::after`
+ ::after`,
}, {
// Test empty web components are still displayed correctly.
title: "empty components",
url: `data:text/html;charset=utf-8,
<test-component></test-component>
<script>
@@ -187,18 +187,18 @@ const TEST_DATA = [
super();
let shadowRoot = this.attachShadow({mode: "#MODE#"});
shadowRoot.innerHTML = "";
}
});
</script>`,
tree: `
test-component
- #shadow-root`
- }
+ #shadow-root`,
+ },
];
for (const {url, tree, title} of TEST_DATA) {
// Test each configuration in both open and closed modes
add_task(async function() {
info(`Testing: [${title}] in OPEN mode`);
await enableWebComponents();
const {inspector} = await openInspectorForURL(url.replace("#MODE#", "open"));
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_01.js
@@ -9,60 +9,60 @@
loadHelperScript("helper_attributes_test_runner.js");
const TEST_URL = URL_ROOT + "doc_markup_edit.html";
var TEST_DATA = [{
desc: "Change an attribute",
node: "#node1",
originalAttributes: {
id: "node1",
- class: "node1"
+ class: "node1",
},
name: "class",
value: 'class="changednode1"',
expectedAttributes: {
id: "node1",
- class: "changednode1"
- }
+ class: "changednode1",
+ },
}, {
desc: "Try changing an attribute to a quote (\") - this should result " +
"in it being set to an empty string",
node: "#node22",
originalAttributes: {
id: "node22",
- class: "unchanged"
+ class: "unchanged",
},
name: "class",
value: 'class="""',
expectedAttributes: {
id: "node22",
- class: ""
- }
+ class: "",
+ },
}, {
desc: "Remove an attribute",
node: "#node4",
originalAttributes: {
id: "node4",
- class: "node4"
+ class: "node4",
},
name: "class",
value: "",
expectedAttributes: {
- id: "node4"
- }
+ id: "node4",
+ },
}, {
desc: "Try add attributes by adding to an existing attribute's entry",
node: "#node24",
originalAttributes: {
- id: "node24"
+ id: "node24",
},
name: "id",
value: 'id="node24" class="""',
expectedAttributes: {
id: "node24",
- class: ""
- }
+ class: "",
+ },
}];
add_task(async function() {
const {inspector, testActor} = await openInspectorForURL(TEST_URL);
await runEditAttributesTests(TEST_DATA, inspector, testActor);
});
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_02.js
@@ -13,32 +13,32 @@ add_task(async function() {
info("Opening the inspector on the test page");
const {inspector, testActor} = await openInspectorForURL(TEST_URL);
info("Selecting the test node");
await focusNode("#test-div", inspector);
info("Verify attributes, only ID should be there for now");
await assertAttributes("#test-div", {
- id: "test-div"
+ id: "test-div",
}, testActor);
info("Focus the ID attribute and change its content");
const {editor} = await getContainerForSelector("#test-div", inspector);
const attr = editor.attrElements.get("id").querySelector(".editable");
const mutated = inspector.once("markupmutation");
setEditableFieldValue(attr,
attr.textContent + ' class="newclass" style="color:green"', inspector);
await mutated;
info("Verify attributes, should have ID, class and style");
await assertAttributes("#test-div", {
id: "test-div",
class: "newclass",
- style: "color:green"
+ style: "color:green",
}, testActor);
info("Trying to undo the change");
await undoChange(inspector);
await assertAttributes("#test-div", {
- id: "test-div"
+ id: "test-div",
}, testActor);
});
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_04-backspace.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_04-backspace.js
@@ -29,30 +29,30 @@ const TEST_URL = "data:text/html;charset
// - selector: the css selector of the node that should be selected
// - focusedSelector: the css selector of the node we expect to be selected as
// a result of the deletion
// - pseudo: (optional) if the focused node is actually supposed to be a pseudo element
// of the specified selector.
// Note that after each test case, undo is called.
const TEST_DATA = [{
selector: "#first",
- focusedSelector: "#second"
+ focusedSelector: "#second",
}, {
selector: "#second",
- focusedSelector: "#first"
+ focusedSelector: "#first",
}, {
selector: "#third",
- focusedSelector: "#second"
+ focusedSelector: "#second",
}, {
selector: "#fourth",
- focusedSelector: "#only-child"
+ focusedSelector: "#only-child",
}, {
selector: "#fifth",
focusedSelector: "#pseudo",
- pseudo: "before"
+ pseudo: "before",
}];
add_task(async function() {
const {inspector} = await openInspectorForURL(TEST_URL);
for (const data of TEST_DATA) {
await checkDeleteAndSelection(inspector, "back_space", data);
}
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_04-delete.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_04-delete.js
@@ -29,30 +29,30 @@ const TEST_URL = "data:text/html;charset
// - selector: the css selector of the node that should be selected
// - focusedSelector: the css selector of the node we expect to be selected as
// a result of the deletion
// - pseudo: (optional) if the focused node is actually supposed to be a pseudo element
// of the specified selector.
// Note that after each test case, undo is called.
const TEST_DATA = [{
selector: "#first",
- focusedSelector: "#second"
+ focusedSelector: "#second",
}, {
selector: "#second",
- focusedSelector: "#third"
+ focusedSelector: "#third",
}, {
selector: "#third",
- focusedSelector: "#second"
+ focusedSelector: "#second",
}, {
selector: "#fourth",
- focusedSelector: "#only-child"
+ focusedSelector: "#only-child",
}, {
selector: "#fifth",
focusedSelector: "#pseudo",
- pseudo: "after"
+ pseudo: "after",
}];
add_task(async function() {
const {inspector} = await openInspectorForURL(TEST_URL);
for (const data of TEST_DATA) {
await checkDeleteAndSelection(inspector, "delete", data);
}
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_05.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_05.js
@@ -14,64 +14,64 @@
loadHelperScript("helper_attributes_test_runner.js");
var TEST_URL = "data:text/html,<div>markup-view attributes addition test</div>";
var TEST_DATA = [{
desc: "Add an attribute value without closing \"",
text: 'style="display: block;',
expectedAttributes: {
- style: "display: block;"
- }
+ style: "display: block;",
+ },
}, {
desc: "Add an attribute value without closing '",
text: "style='display: inline;",
expectedAttributes: {
- style: "display: inline;"
- }
+ style: "display: inline;",
+ },
}, {
desc: "Add an attribute wrapped with with double quotes double quote in it",
text: 'style="display: "inline',
expectedAttributes: {
style: "display: ",
- inline: ""
- }
+ inline: "",
+ },
}, {
desc: "Add an attribute wrapped with single quotes with single quote in it",
text: "style='display: 'inline",
expectedAttributes: {
style: "display: ",
- inline: ""
- }
+ inline: "",
+ },
}, {
desc: "Add an attribute with no value",
text: "disabled",
expectedAttributes: {
- disabled: ""
- }
+ disabled: "",
+ },
}, {
desc: "Add multiple attributes with no value",
text: "disabled autofocus",
expectedAttributes: {
disabled: "",
- autofocus: ""
- }
+ autofocus: "",
+ },
}, {
desc: "Add multiple attributes with no value, and some with value",
text: "disabled name='name' data-test='test' autofocus",
expectedAttributes: {
disabled: "",
autofocus: "",
name: "name",
- "data-test": "test"
- }
+ "data-test": "test",
+ },
}, {
desc: "Add attribute with xmlns",
text: "xmlns:edi='http://ecommerce.example.org/schema'",
expectedAttributes: {
- "xmlns:edi": "http://ecommerce.example.org/schema"
- }
+ "xmlns:edi": "http://ecommerce.example.org/schema",
+ },
}];
add_task(async function() {
const {inspector, testActor} = await openInspectorForURL(TEST_URL);
await runAddAttributesTests(TEST_DATA, "div", inspector, testActor);
});
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_06.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_06.js
@@ -15,71 +15,71 @@
loadHelperScript("helper_attributes_test_runner.js");
var TEST_URL = "data:text/html,<div>markup-view attributes addition test</div>";
var TEST_DATA = [{
desc: "Mixed single and double quotes",
text: "name=\"hi\" maxlength='not a number'",
expectedAttributes: {
maxlength: "not a number",
- name: "hi"
- }
+ name: "hi",
+ },
}, {
desc: "Invalid attribute name",
text: "x='y' <why-would-you-do-this>=\"???\"",
expectedAttributes: {
- x: "y"
- }
+ x: "y",
+ },
}, {
desc: "Double quote wrapped in single quotes",
text: "x='h\"i'",
expectedAttributes: {
- x: "h\"i"
- }
+ x: "h\"i",
+ },
}, {
desc: "Single quote wrapped in double quotes",
text: "x=\"h'i\"",
expectedAttributes: {
- x: "h'i"
- }
+ x: "h'i",
+ },
}, {
desc: "No quote wrapping",
text: "a=b x=y data-test=Some spaced data",
expectedAttributes: {
a: "b",
x: "y",
"data-test": "Some",
spaced: "",
- data: ""
- }
+ data: "",
+ },
}, {
desc: "Duplicate Attributes",
text: "a=b a='c' a=\"d\"",
expectedAttributes: {
- a: "b"
- }
+ a: "b",
+ },
}, {
desc: "Inline styles",
text: "style=\"font-family: 'Lucida Grande', sans-serif; font-size: 75%;\"",
expectedAttributes: {
- style: "font-family: 'Lucida Grande', sans-serif; font-size: 75%;"
- }
+ style: "font-family: 'Lucida Grande', sans-serif; font-size: 75%;",
+ },
}, {
desc: "Object attribute names",
text: "toString=\"true\" hasOwnProperty=\"false\"",
expectedAttributes: {
tostring: "true",
- hasownproperty: "false"
- }
+ hasownproperty: "false",
+ },
}, {
desc: "Add event handlers",
text: "onclick=\"javascript: throw new Error('wont fire');\" " +
"onload=\"alert('here');\"",
expectedAttributes: {
onclick: "javascript: throw new Error('wont fire');",
- onload: "alert('here');"
- }
+ onload: "alert('here');",
+ },
}];
add_task(async function() {
const {inspector, testActor} = await openInspectorForURL(TEST_URL);
await runAddAttributesTests(TEST_DATA, "div", inspector, testActor);
});
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js
@@ -18,101 +18,101 @@ const DATA_URL_ATTRIBUTE = "data:image/p
const DATA_URL_ATTRIBUTE_COLLAPSED = "data:image/png;base64,iVBORw0K\u20269/AFGGFyjOXZtQAAAAAElFTkSuQmCC";
/* eslint-enable */
var TEST_URL = "data:text/html,<div>markup-view attributes addition test</div>";
var TEST_DATA = [{
desc: "Add an attribute value containing < > ü \" & '",
text: 'src="somefile.html?param1=<a>¶m2=ü¶m3=\'"\'"',
expectedAttributes: {
- src: "somefile.html?param1=<a>¶m2=\xfc¶m3='\"'"
- }
+ src: "somefile.html?param1=<a>¶m2=\xfc¶m3='\"'",
+ },
}, {
desc: "Add an attribute by clicking the empty space after a node",
text: 'class="newclass" style="color:green"',
expectedAttributes: {
class: "newclass",
- style: "color:green"
- }
+ style: "color:green",
+ },
}, {
desc: "Try add an attribute containing a quote (\") attribute by " +
"clicking the empty space after a node - this should result " +
"in it being set to an empty string",
text: 'class="newclass" style="""',
expectedAttributes: {
class: "newclass",
- style: ""
- }
+ style: "",
+ },
}, {
desc: "Try to add long data URL to make sure it is collapsed in attribute " +
"editor.",
text: `style='${DATA_URL_INLINE_STYLE}'`,
expectedAttributes: {
- "style": DATA_URL_INLINE_STYLE
+ "style": DATA_URL_INLINE_STYLE,
},
validate: (container, inspector) => {
const editor = container.editor;
const visibleAttrText = editor.attrElements.get("style")
.querySelector(".attr-value")
.textContent;
is(visibleAttrText, DATA_URL_INLINE_STYLE_COLLAPSED);
- }
+ },
}, {
desc: "Try to add long attribute to make sure it is collapsed in attribute " +
"editor.",
text: `data-long="${LONG_ATTRIBUTE}"`,
expectedAttributes: {
- "data-long": LONG_ATTRIBUTE
+ "data-long": LONG_ATTRIBUTE,
},
validate: (container, inspector) => {
const editor = container.editor;
const visibleAttrText = editor.attrElements.get("data-long")
.querySelector(".attr-value")
.textContent;
is(visibleAttrText, LONG_ATTRIBUTE_COLLAPSED);
- }
+ },
}, {
desc: "Try to add long data URL to make sure it is collapsed in attribute " +
"editor.",
text: `src="${DATA_URL_ATTRIBUTE}"`,
expectedAttributes: {
- "src": DATA_URL_ATTRIBUTE
+ "src": DATA_URL_ATTRIBUTE,
},
validate: (container, inspector) => {
const editor = container.editor;
const visibleAttrText = editor.attrElements.get("src")
.querySelector(".attr-value").textContent;
is(visibleAttrText, DATA_URL_ATTRIBUTE_COLLAPSED);
- }
+ },
}, {
desc: "Try to add long attribute with collapseAttributes == false" +
"to make sure it isn't collapsed in attribute editor.",
text: `data-long="${LONG_ATTRIBUTE}"`,
expectedAttributes: {
- "data-long": LONG_ATTRIBUTE
+ "data-long": LONG_ATTRIBUTE,
},
setUp: function(inspector) {
Services.prefs.setBoolPref("devtools.markup.collapseAttributes", false);
},
validate: (container, inspector) => {
const editor = container.editor;
const visibleAttrText = editor.attrElements
.get("data-long")
.querySelector(".attr-value")
.textContent;
is(visibleAttrText, LONG_ATTRIBUTE);
},
tearDown: function(inspector) {
Services.prefs.clearUserPref("devtools.markup.collapseAttributes");
- }
+ },
}, {
desc: "Try to collapse attributes with collapseAttributeLength == 5",
text: `data-long="${LONG_ATTRIBUTE}"`,
expectedAttributes: {
- "data-long": LONG_ATTRIBUTE
+ "data-long": LONG_ATTRIBUTE,
},
setUp: function(inspector) {
Services.prefs.setIntPref("devtools.markup.collapseAttributeLength", 2);
},
validate: (container, inspector) => {
const firstChar = LONG_ATTRIBUTE[0];
const lastChar = LONG_ATTRIBUTE[LONG_ATTRIBUTE.length - 1];
const collapsed = firstChar + "\u2026" + lastChar;
@@ -120,16 +120,16 @@ var TEST_DATA = [{
const visibleAttrText = editor.attrElements
.get("data-long")
.querySelector(".attr-value")
.textContent;
is(visibleAttrText, collapsed);
},
tearDown: function(inspector) {
Services.prefs.clearUserPref("devtools.markup.collapseAttributeLength");
- }
+ },
}];
add_task(async function() {
const {inspector, testActor} = await openInspectorForURL(TEST_URL);
await runAddAttributesTests(TEST_DATA, "div", inspector, testActor);
});
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_08.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_08.js
@@ -32,17 +32,17 @@ async function testCollapsedLongAttribut
onMutation = inspector.once("markupmutation");
await testActor.setAttribute("#node24", "data-long", LONG_ATTRIBUTE);
await onMutation;
await assertAttributes("#node24", {
id: "node24",
"class": "",
- "data-long": LONG_ATTRIBUTE
+ "data-long": LONG_ATTRIBUTE,
}, testActor);
const {editor} = await focusNode("#node24", inspector);
const attr = editor.attrElements.get("data-long").querySelector(".editable");
// Check to make sure it has expanded after focus
attr.focus();
EventUtils.sendKey("return", inspector.panelWin);
@@ -56,26 +56,26 @@ async function testCollapsedLongAttribut
const visibleAttrText = editor.attrElements.get("data-long")
.querySelector(".attr-value").textContent;
is(visibleAttrText, LONG_ATTRIBUTE_COLLAPSED);
await assertAttributes("#node24", {
id: "node24",
class: "",
"data-long": LONG_ATTRIBUTE,
- "data-short": "ABC"
+ "data-short": "ABC",
}, testActor);
}
async function testModifyInlineStyleWithQuotes(inspector, testActor) {
info("Modify inline style containing \"");
await assertAttributes("#node26", {
id: "node26",
- style: 'background-image: url("moz-page-thumb://thumbnail?url=http%3A%2F%2Fwww.mozilla.org%2F");'
+ style: 'background-image: url("moz-page-thumb://thumbnail?url=http%3A%2F%2Fwww.mozilla.org%2F");',
}, testActor);
const onMutated = inspector.once("markupmutation");
const {editor} = await focusNode("#node26", inspector);
const attr = editor.attrElements.get("style").querySelector(".editable");
attr.focus();
EventUtils.sendKey("return", inspector.panelWin);
@@ -92,26 +92,26 @@ async function testModifyInlineStyleWith
input.value = value;
EventUtils.sendKey("return", inspector.panelWin);
await onMutated;
await assertAttributes("#node26", {
id: "node26",
- style: 'background-image: url("moz-page-thumb://thumbnail?url=http%3A%2F%2Fwww.mozilla.com%2F");'
+ style: 'background-image: url("moz-page-thumb://thumbnail?url=http%3A%2F%2Fwww.mozilla.com%2F");',
}, testActor);
}
async function testEditingAttributeWithMixedQuotes(inspector, testActor) {
info("Modify class containing \" and \'");
await assertAttributes("#node27", {
"id": "node27",
- "class": 'Double " and single \''
+ "class": 'Double " and single \'',
}, testActor);
const onMutated = inspector.once("markupmutation");
const {editor} = await focusNode("#node27", inspector);
const attr = editor.attrElements.get("class").querySelector(".editable");
attr.focus();
EventUtils.sendKey("return", inspector.panelWin);
@@ -125,11 +125,11 @@ async function testEditingAttributeWithM
input.value = value;
EventUtils.sendKey("return", inspector.panelWin);
await onMutated;
await assertAttributes("#node27", {
id: "node27",
- class: '" " and \' \''
+ class: '" " and \' \'',
}, testActor);
}
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_09.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_09.js
@@ -35,17 +35,17 @@ async function testWellformedMixedCase(i
const input = inplaceEditor(attr).input;
input.value = "viewBox=\"0 0 1 1\"";
EventUtils.sendKey("return", inspector.panelWin);
await onMutated;
await assertAttributes("svg", {
"viewBox": "0 0 1 1",
"width": "200",
- "height": "200"
+ "height": "200",
}, testActor);
}
async function testMalformedMixedCase(inspector, testActor) {
info("Modifying a malformed, mixed-case attribute, " +
"expecting the attribute's case to be preserved");
info("Listening to markup mutations");
@@ -61,11 +61,11 @@ async function testMalformedMixedCase(in
const input = inplaceEditor(attr).input;
input.value = "viewBox=\"<>\"";
EventUtils.sendKey("return", inspector.panelWin);
await onMutated;
await assertAttributes("svg", {
"viewBox": "<>",
"width": "200",
- "height": "200"
+ "height": "200",
}, testActor);
}
--- a/devtools/client/inspector/markup/test/browser_markup_textcontent_edit_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_textcontent_edit_01.js
@@ -14,39 +14,39 @@ add_task(async function() {
info("Expanding all nodes");
await inspector.markup.expandAll();
await waitForMultipleChildrenUpdates(inspector);
await editContainer(inspector, testActor, {
selector: ".node6",
newValue: "New text",
- oldValue: "line6"
+ oldValue: "line6",
});
await editContainer(inspector, testActor, {
selector: "#node17",
newValue: "LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. " +
"DONEC POSUERE PLACERAT MAGNA ET IMPERDIET.",
oldValue: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
- "Donec posuere placerat magna et imperdiet."
+ "Donec posuere placerat magna et imperdiet.",
});
await editContainer(inspector, testActor, {
selector: "#node17",
newValue: "New value",
oldValue: "LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. " +
- "DONEC POSUERE PLACERAT MAGNA ET IMPERDIET."
+ "DONEC POSUERE PLACERAT MAGNA ET IMPERDIET.",
});
await editContainer(inspector, testActor, {
selector: "#node17",
newValue: "LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. " +
"DONEC POSUERE PLACERAT MAGNA ET IMPERDIET.",
- oldValue: "New value"
+ oldValue: "New value",
});
});
async function editContainer(inspector, testActor,
{selector, newValue, oldValue}) {
let nodeValue = await getFirstChildNodeValue(selector, testActor);
is(nodeValue, oldValue, "The test node's text content is correct");
--- a/devtools/client/inspector/markup/test/head.js
+++ b/devtools/client/inspector/markup/test/head.js
@@ -432,29 +432,29 @@ async function simulateNodeDrag(inspecto
info("Simulate mouseDown on element " + selector);
container._onMouseDown({
target: container.tagLine,
button: 0,
pageX: scrollX + rect.x,
pageY: scrollY + rect.y,
stopPropagation: () => {},
- preventDefault: () => {}
+ preventDefault: () => {},
});
// _onMouseDown selects the node, so make sure to wait for the
// inspector-updated event if the current selection was different.
if (inspector.selection.nodeFront !== container.node) {
await inspector.once("inspector-updated");
}
info("Simulate mouseMove on element " + selector);
container.onMouseMove({
pageX: scrollX + rect.x + xOffset,
- pageY: scrollY + rect.y + yOffset
+ pageY: scrollY + rect.y + yOffset,
});
}
/**
* Simulate dropping a MarkupContainer by calling its mouseup handler. This is
* meant to be called after simulateNodeDrag has been called.
* @param {InspectorPanel} inspector The current inspector-panel instance.
* @param {String|MarkupContainer} selector The selector to identify the node or
@@ -651,17 +651,17 @@ async function _checkMarkupViewNode(tree
* Lines represent a simplified view of the markup, where the trimmed line is supposed to
* be included in the text content of the actual markupview container.
* This method returns an object that can be passed to _checkMarkupViewNode() to verify
* the current markup view displays the expected structure.
*/
function _parseMarkupViewTree(inputString) {
const tree = {
level: 0,
- children: []
+ children: [],
};
let lines = inputString.split("\n");
lines = lines.filter(l => l.trim());
let currentNode = tree;
for (const line of lines) {
const nodeString = line.trim();
const level = line.split(" ").length;
@@ -676,17 +676,17 @@ function _parseMarkupViewTree(inputStrin
}
}
const node = {
node: nodeString,
children: [],
parent,
level,
- path: parent.path + " " + nodeString
+ path: parent.path + " " + nodeString,
};
parent.children.push(node);
currentNode = node;
}
return tree;
}
--- a/devtools/client/inspector/markup/views/element-container.js
+++ b/devtools/client/inspector/markup/views/element-container.js
@@ -144,17 +144,17 @@ MarkupElementContainer.prototype = exten
}
try {
const { data, size } = await this._getPreview();
// The preview is ready.
const options = {
naturalWidth: size.naturalWidth,
naturalHeight: size.naturalHeight,
- maxDim: Services.prefs.getIntPref(PREVIEW_MAX_DIM_PREF)
+ maxDim: Services.prefs.getIntPref(PREVIEW_MAX_DIM_PREF),
};
setImageTooltip(tooltip, this.markup.doc, data, options);
} catch (e) {
// Indicate the failure but show the tooltip anyway.
setBrokenImageTooltip(tooltip, this.markup.doc);
}
return true;
@@ -203,12 +203,12 @@ MarkupElementContainer.prototype = exten
const undoMods = this.editor._startModifyingAttributes();
this.editor._saveAttribute(attrName, undoMods);
doMods.removeAttribute(attrName);
this.undo.do(() => {
doMods.apply();
}, () => {
undoMods.apply();
});
- }
+ },
});
module.exports = MarkupElementContainer;
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -22,17 +22,17 @@ const INSPECTOR_L10N =
// Page size for pageup/pagedown
const COLLAPSE_DATA_URL_REGEX = /^data.+base64/;
const COLLAPSE_DATA_URL_LENGTH = 60;
// Contains only void (without end tag) HTML elements
const HTML_VOID_ELEMENTS = [
"area", "base", "br", "col", "command", "embed",
"hr", "img", "input", "keygen", "link", "meta", "param", "source",
- "track", "wbr"
+ "track", "wbr",
];
// Contains only valid computed display property types of the node to display in the
// element markup and their respective title tooltip text.
const DISPLAY_TYPES = {
"flex": INSPECTOR_L10N.getStr("markupView.display.flex.tooltiptext"),
"inline-flex": INSPECTOR_L10N.getStr("markupView.display.flex.tooltiptext"),
"grid": INSPECTOR_L10N.getStr("markupView.display.grid.tooltiptext"),
@@ -86,17 +86,17 @@ function ElementEditor(container, node)
this.tag.setAttribute("tabindex", "-1");
editableField({
element: this.tag,
multiline: true,
maxWidth: () => getAutocompleteMaxWidth(this.tag, this.container.elt),
trigger: "dblclick",
stopOnReturn: true,
done: this.onTagEdit,
- cssProperties: this._cssProperties
+ cssProperties: this._cssProperties,
});
}
// Make the new attribute space editable.
this.newAttr.editMode = editableField({
element: this.newAttr,
multiline: true,
maxWidth: () => getAutocompleteMaxWidth(this.newAttr, this.container.elt),
@@ -113,17 +113,17 @@ function ElementEditor(container, node)
const undoMods = this._startModifyingAttributes();
this._applyAttributes(val, null, doMods, undoMods);
this.container.undo.do(() => {
doMods.apply();
}, function() {
undoMods.apply();
});
},
- cssProperties: this._cssProperties
+ cssProperties: this._cssProperties,
});
const displayName = this.node.displayName;
this.tag.textContent = displayName;
this.closeTag.textContent = displayName;
const isVoidElement = HTML_VOID_ELEMENTS.includes(displayName);
if (node.isInHTMLDocument && isVoidElement) {
@@ -512,17 +512,17 @@ ElementEditor.prototype = {
doMods.removeAttribute(attribute.name);
this._applyAttributes(newValue, attr, doMods, undoMods);
this.container.undo.do(() => {
doMods.apply();
}, () => {
undoMods.apply();
});
},
- cssProperties: this._cssProperties
+ cssProperties: this._cssProperties,
});
// Figure out where we should place the attribute.
if (attribute.name == "id") {
before = this.attrList.firstChild;
} else if (attribute.name == "class") {
const idNode = this.attrElements.get("id");
before = idNode ? idNode.nextSibling : this.attrList.firstChild;
@@ -839,12 +839,12 @@ ElementEditor.prototype = {
}
this.expandBadge.removeEventListener("click", this.onExpandBadgeClick);
for (const key in this.animationTimers) {
clearTimeout(this.animationTimers[key]);
}
this.animationTimers = null;
- }
+ },
};
module.exports = ElementEditor;
--- a/devtools/client/inspector/markup/views/html-editor.js
+++ b/devtools/client/inspector/markup/views/html-editor.js
@@ -41,17 +41,17 @@ function HTMLEditor(htmlDocument) {
this.doc.defaultView.addEventListener("resize",
this.refresh, true);
const config = {
mode: Editor.modes.html,
lineWrapping: true,
styleActiveLine: false,
extraKeys: {},
- theme: "mozilla markup-view"
+ theme: "mozilla markup-view",
};
config.extraKeys[ctrl("Enter")] = this.hide;
config.extraKeys.F2 = this.hide;
config.extraKeys.Esc = this.hide.bind(this, false);
this.container.addEventListener("click", this.hide);
this.editorInner.addEventListener("click", stopPropagation);
@@ -162,17 +162,17 @@ HTMLEditor.prototype = {
this.doc.defaultView.removeEventListener("resize",
this.refresh, true);
this.container.removeEventListener("click", this.hide);
this.editorInner.removeEventListener("click", stopPropagation);
this.hide(false);
this.container.remove();
this.editor.destroy();
- }
+ },
};
function ctrl(k) {
return (Services.appinfo.OS == "Darwin" ? "Cmd-" : "Ctrl-") + k;
}
function stopPropagation(e) {
e.stopPropagation();
--- a/devtools/client/inspector/markup/views/markup-container.js
+++ b/devtools/client/inspector/markup/views/markup-container.js
@@ -808,12 +808,12 @@ MarkupContainer.prototype = {
if (firstChild.container) {
firstChild.container.destroy();
}
this.children.removeChild(firstChild);
firstChild = this.children.firstChild;
}
this.editor.destroy();
- }
+ },
};
module.exports = MarkupContainer;
--- a/devtools/client/inspector/markup/views/read-only-editor.js
+++ b/devtools/client/inspector/markup/views/read-only-editor.js
@@ -53,12 +53,12 @@ ReadOnlyEditor.prototype = {
this.tag = null;
},
/**
* Stub method for consistency with ElementEditor.
*/
getInfoAtNode: function() {
return null;
- }
+ },
};
module.exports = ReadOnlyEditor;
--- a/devtools/client/inspector/markup/views/root-container.js
+++ b/devtools/client/inspector/markup/views/root-container.js
@@ -48,12 +48,12 @@ RootContainer.prototype = {
/**
* Set an appropriate DOM tree depth level for a node and its subtree.
*/
updateLevel: function() {},
isSlotted: function() {
return false;
- }
+ },
};
module.exports = RootContainer;
--- a/devtools/client/inspector/markup/views/slotted-node-container.js
+++ b/devtools/client/inspector/markup/views/slotted-node-container.js
@@ -58,12 +58,12 @@ SlottedNodeContainer.prototype = extend(
},
isDraggable: function() {
return false;
},
isSlotted: function() {
return true;
- }
+ },
});
module.exports = SlottedNodeContainer;
--- a/devtools/client/inspector/markup/views/slotted-node-editor.js
+++ b/devtools/client/inspector/markup/views/slotted-node-editor.js
@@ -49,12 +49,12 @@ SlottedNodeEditor.prototype = {
this.revealLink = null;
},
/**
* Stub method for consistency with ElementEditor.
*/
getInfoAtNode: function() {
return null;
- }
+ },
};
module.exports = SlottedNodeEditor;
--- a/devtools/client/inspector/markup/views/text-editor.js
+++ b/devtools/client/inspector/markup/views/text-editor.js
@@ -120,12 +120,12 @@ TextEditor.prototype = {
destroy: function() {},
/**
* Stub method for consistency with ElementEditor.
*/
getInfoAtNode: function() {
return null;
- }
+ },
};
module.exports = TextEditor;
--- a/devtools/client/inspector/panel.js
+++ b/devtools/client/inspector/panel.js
@@ -9,11 +9,11 @@ function InspectorPanel(iframeWindow, to
}
InspectorPanel.prototype = {
open() {
return this._inspector.init();
},
destroy() {
return this._inspector.destroy();
- }
+ },
};
exports.InspectorPanel = InspectorPanel;
--- a/devtools/client/inspector/rules/models/rule.js
+++ b/devtools/client/inspector/rules/models/rule.js
@@ -185,17 +185,17 @@ Rule.prototype = {
for (const prop of this.textProps) {
if (prop.invisible) {
continue;
}
if (!prop.enabled) {
disabledProps.push({
name: prop.name,
value: prop.value,
- priority: prop.priority
+ priority: prop.priority,
});
continue;
}
if (prop.value.trim() === "") {
continue;
}
modifications.setProperty(-1, prop.name, prop.value, prop.priority);
@@ -226,17 +226,17 @@ Rule.prototype = {
continue;
}
let cssProp = cssProps[textProp.name];
if (!cssProp) {
cssProp = {
name: textProp.name,
value: "",
- priority: ""
+ priority: "",
};
}
textProp.priority = cssProp.priority;
}
});
},
@@ -659,12 +659,12 @@ Rule.prototype = {
*/
hasAnyVisibleProperties: function() {
for (const prop of this.textProps) {
if (!prop.invisible) {
return true;
}
}
return false;
- }
+ },
};
module.exports = Rule;
--- a/devtools/client/inspector/rules/models/text-property.js
+++ b/devtools/client/inspector/rules/models/text-property.js
@@ -220,12 +220,12 @@ TextProperty.prototype = {
}
// Starting with FF61, StyleRuleActor provides an accessor to signal if the property
// name is valid. If we don't have this, assume the name is valid. In use, rely on
// isValid() as a guard against false positives.
return (this.rule.domRule.declarations[selfIndex].isNameValid !== undefined)
? this.rule.domRule.declarations[selfIndex].isNameValid
: true;
- }
+ },
};
module.exports = TextProperty;
--- a/devtools/client/inspector/rules/models/user-properties.js
+++ b/devtools/client/inspector/rules/models/user-properties.js
@@ -74,12 +74,12 @@ UserProperties.prototype = {
},
getKey: function(style, name) {
return style.actorID + ":" + name;
},
clear: function() {
this.map.clear();
- }
+ },
};
module.exports = UserProperties;
--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -307,17 +307,17 @@ CssRuleView.prototype = {
selectorIcon.classList.add("highlighted");
this.lastSelectorIcon = selectorIcon;
const node = this.inspector.selection.nodeFront;
await highlighter.show(node, {
hideInfoBar: true,
hideGuides: true,
- selector
+ selector,
});
this.emit("ruleview-selectorhighlighter-toggled", true);
} else {
this.highlighters.selectorHighlighterShown = null;
this.emit("ruleview-selectorhighlighter-toggled", false);
}
},
@@ -347,52 +347,52 @@ CssRuleView.prototype = {
type = VIEW_NODE_PROPERTY_TYPE;
value = {
property: node.textContent,
value: getPropertyNameAndValue(node).value,
enabled: prop.enabled,
overridden: prop.overridden,
pseudoElement: prop.rule.pseudoElement,
sheetHref: prop.rule.domRule.href,
- textProperty: prop
+ textProperty: prop,
};
} else if (classes.contains("ruleview-propertyvalue") && prop) {
type = VIEW_NODE_VALUE_TYPE;
value = {
property: getPropertyNameAndValue(node).name,
value: node.textContent,
enabled: prop.enabled,
overridden: prop.overridden,
pseudoElement: prop.rule.pseudoElement,
sheetHref: prop.rule.domRule.href,
- textProperty: prop
+ textProperty: prop,
};
} else if (classes.contains("ruleview-font-family") && prop) {
type = VIEW_NODE_FONT_TYPE;
value = {
property: getPropertyNameAndValue(node).name,
value: getPropertyNameAndValue(node).value,
enabled: prop.enabled,
overridden: prop.overridden,
pseudoElement: prop.rule.pseudoElement,
sheetHref: prop.rule.domRule.href,
- textProperty: prop
+ textProperty: prop,
};
} else if (classes.contains("ruleview-shape-point") && prop) {
type = VIEW_NODE_SHAPE_POINT_TYPE;
value = {
property: getPropertyNameAndValue(node).name,
value: node.textContent,
enabled: prop.enabled,
overridden: prop.overridden,
pseudoElement: prop.rule.pseudoElement,
sheetHref: prop.rule.domRule.href,
textProperty: prop,
toggleActive: getShapeToggleActive(node),
- point: getShapePoint(node)
+ point: getShapePoint(node),
};
} else if (classes.contains("ruleview-shapeswatch") && prop) {
type = VIEW_NODE_SHAPE_SWATCH;
value = {
enabled: prop.enabled,
overridden: prop.overridden,
textProperty: prop,
};
@@ -402,30 +402,30 @@ CssRuleView.prototype = {
value = {
property: getPropertyNameAndValue(node).name,
value: node.textContent,
enabled: prop.enabled,
overridden: prop.overridden,
pseudoElement: prop.rule.pseudoElement,
sheetHref: prop.rule.domRule.href,
textProperty: prop,
- variable: node.dataset.variable
+ variable: node.dataset.variable,
};
} else if (classes.contains("theme-link") &&
!classes.contains("ruleview-rule-source") && prop) {
type = VIEW_NODE_IMAGE_URL_TYPE;
value = {
property: getPropertyNameAndValue(node).name,
value: node.parentNode.textContent,
url: node.href,
enabled: prop.enabled,
overridden: prop.overridden,
pseudoElement: prop.rule.pseudoElement,
sheetHref: prop.rule.domRule.href,
- textProperty: prop
+ textProperty: prop,
};
} else if (classes.contains("ruleview-selector-unmatched") ||
classes.contains("ruleview-selector-matched") ||
classes.contains("ruleview-selectorcontainer") ||
classes.contains("ruleview-selector") ||
classes.contains("ruleview-selector-attribute") ||
classes.contains("ruleview-selector-pseudo-class") ||
classes.contains("ruleview-selector-pseudo-class-lock")) {
@@ -659,17 +659,17 @@ CssRuleView.prototype = {
this.searchData = {
searchPropertyMatch: FILTER_PROP_RE.exec(this.searchValue),
searchPropertyName: this.searchValue,
searchPropertyValue: this.searchValue,
strictSearchValue: "",
strictSearchPropertyName: false,
strictSearchPropertyValue: false,
- strictSearchAllValues: false
+ strictSearchAllValues: false,
};
if (this.searchData.searchPropertyMatch) {
// Parse search value as a single property line and extract the
// property name and value. If the parsed property name or value is
// contained in backquotes (`), extract the value within the backquotes
// and set the corresponding strict search for the property to true.
if (FILTER_STRICT_RE.test(this.searchData.searchPropertyMatch[1])) {
@@ -990,17 +990,17 @@ CssRuleView.prototype = {
_showEmpty: function() {
if (this.styleDocument.getElementById("ruleview-no-results")) {
return;
}
createChild(this.element, "div", {
id: "ruleview-no-results",
class: "devtools-sidepanel-no-result",
- textContent: l10n("rule.empty")
+ textContent: l10n("rule.empty"),
});
},
/**
* Clear the rules.
*/
_clearRules: function() {
this.element.innerHTML = "";
@@ -1712,17 +1712,17 @@ function getPropertyNameAndValue(node) {
if (!node || !node.classList) {
return null;
}
// Check first for ruleview-computed since it's the deepest
if (node.classList.contains("ruleview-computed") ||
node.classList.contains("ruleview-property")) {
return {
name: node.querySelector(".ruleview-propertyname").textContent,
- value: node.querySelector(".ruleview-propertyvalue").textContent
+ value: node.querySelector(".ruleview-propertyvalue").textContent,
};
}
node = node.parentNode;
}
}
/**
* Walk up the DOM from a given node until a parent property holder is found,
@@ -1876,13 +1876,13 @@ RuleViewTool.prototype = {
this.inspector.pageStyle.off("stylesheet-updated", this.refresh);
}
this.view.off("ruleview-refreshed", this.onViewRefreshed);
this.view.destroy();
this.view = this.document = this.inspector = null;
- }
+ },
};
exports.CssRuleView = CssRuleView;
exports.RuleViewTool = RuleViewTool;
--- a/devtools/client/inspector/rules/test/browser_rules_add-rule-namespace-elements.js
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-namespace-elements.js
@@ -21,17 +21,17 @@ const XHTML = `
</body>
</html>
`;
const TEST_URI = "data:application/xhtml+xml;charset=utf-8," + encodeURI(XHTML);
const TEST_DATA = [
{ node: "clipPath", expected: "clipPath" },
{ node: "rect", expected: "rect" },
- { node: "circle", expected: "circle" }
+ { node: "circle", expected: "circle" },
];
add_task(async function() {
await addTab(TEST_URI);
const {inspector, view} = await openRuleView();
for (const data of TEST_DATA) {
const {node, expected} = data;
--- a/devtools/client/inspector/rules/test/browser_rules_add-rule.js
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule.js
@@ -27,17 +27,17 @@ const TEST_URI = `
const TEST_DATA = [
{ node: "#testid", expected: "#testid" },
{ node: ".testclass2", expected: ".testclass2" },
{ node: ".class1.class2", expected: ".class1.class2" },
{ node: ".class3.class4", expected: ".class3.class4" },
{ node: "p", expected: "p" },
{ node: "h1", expected: ".asd\\@\\@\\@\\@a\\!\\!\\!\\!\\:\\:\\:\\@asd" },
{ node: "h2", expected: "#asd\\@\\@\\@a\\!\\!2a" },
- { node: "circle", expected: "circle" }
+ { node: "circle", expected: "circle" },
];
add_task(async function() {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const {inspector, view} = await openRuleView();
for (const data of TEST_DATA) {
const {node, expected} = data;
--- a/devtools/client/inspector/rules/test/browser_rules_authored.js
+++ b/devtools/client/inspector/rules/test/browser_rules_authored.js
@@ -30,17 +30,17 @@ add_task(async function() {
"} ");
const elementStyle = view._elementStyle;
const expected = [
{name: "something", overridden: true, isNameValid: false, isValid: false},
{name: "color", overridden: true, isNameValid: true, isValid: false},
{name: "background-color", overridden: true, isNameValid: true, isValid: true},
- {name: "background-color", overridden: false, isNameValid: true, isValid: true}
+ {name: "background-color", overridden: false, isNameValid: true, isValid: true},
];
const rule = elementStyle.rules[1];
for (let i = 0; i < expected.length; ++i) {
const prop = rule.textProps[i];
is(prop.name, expected[i].name,
"Check name for prop " + i);
--- a/devtools/client/inspector/rules/test/browser_rules_authored_color.js
+++ b/devtools/client/inspector/rules/test/browser_rules_authored_color.js
@@ -41,17 +41,17 @@ add_task(async function() {
const cPicker = view.tooltips.getTooltip("colorPicker");
const onColorPickerReady = cPicker.once("ready");
swatch.click();
await onColorPickerReady;
await simulateColorPickerChange(view, cPicker, [0, 255, 0, 1], {
selector,
name: "color",
- value: "rgb(0, 255, 0)"
+ value: "rgb(0, 255, 0)",
});
const spectrum = cPicker.spectrum;
const onHidden = cPicker.tooltip.once("hidden");
// Validating the color change ends up updating the rule view twice
const onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
await onHidden;
--- a/devtools/client/inspector/rules/test/browser_rules_class_panel_add.js
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_add.js
@@ -9,40 +9,40 @@
// This array contains the list of test cases. Each test case contains these properties:
// - {String} textEntered The text to be entered in the field
// - {Boolean} expectNoMutation Set to true if we shouldn't wait for a DOM mutation
// - {Array} expectedClasses The expected list of classes to be applied to the DOM and to
// be found in the class panel
const TEST_ARRAY = [{
textEntered: "",
expectNoMutation: true,
- expectedClasses: []
+ expectedClasses: [],
}, {
textEntered: "class",
- expectedClasses: ["class"]
+ expectedClasses: ["class"],
}, {
textEntered: "class",
expectNoMutation: true,
- expectedClasses: ["class"]
+ expectedClasses: ["class"],
}, {
textEntered: "a a a a a a a a a a",
- expectedClasses: ["class", "a"]
+ expectedClasses: ["class", "a"],
}, {
textEntered: "class2 class3",
- expectedClasses: ["class", "a", "class2", "class3"]
+ expectedClasses: ["class", "a", "class2", "class3"],
}, {
textEntered: " ",
expectNoMutation: true,
- expectedClasses: ["class", "a", "class2", "class3"]
+ expectedClasses: ["class", "a", "class2", "class3"],
}, {
textEntered: " class4",
- expectedClasses: ["class", "a", "class2", "class3", "class4"]
+ expectedClasses: ["class", "a", "class2", "class3", "class4"],
}, {
textEntered: " \t class5 \t \t\t ",
- expectedClasses: ["class", "a", "class2", "class3", "class4", "class5"]
+ expectedClasses: ["class", "a", "class2", "class3", "class4", "class5"],
}];
add_task(async function() {
await addTab("data:text/html;charset=utf-8,");
const {testActor, inspector, view} = await openRuleView();
info("Open the class panel");
view.showClassPanel();
--- a/devtools/client/inspector/rules/test/browser_rules_class_panel_content.js
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_content.js
@@ -6,45 +6,45 @@
// Test that class panel shows the right content when selecting various nodes.
// This array contains the list of test cases. Each test case contains these properties:
// - {String} inputClassName The className on a node
// - {Array} expectedClasses The expected list of classes in the class panel
const TEST_ARRAY = [{
inputClassName: "",
- expectedClasses: []
+ expectedClasses: [],
}, {
inputClassName: " a a a a a a a a a",
- expectedClasses: ["a"]
+ expectedClasses: ["a"],
}, {
inputClassName: "c1 c2 c3 c4 c5",
- expectedClasses: ["c1", "c2", "c3", "c4", "c5"]
+ expectedClasses: ["c1", "c2", "c3", "c4", "c5"],
}, {
inputClassName: "a a b b c c a a b b c c",
- expectedClasses: ["a", "b", "c"]
+ expectedClasses: ["a", "b", "c"],
}, {
inputClassName: "ajdhfkasjhdkjashdkjghaskdgkauhkbdhvliashdlghaslidghasldgliashdglhasli",
expectedClasses: [
- "ajdhfkasjhdkjashdkjghaskdgkauhkbdhvliashdlghaslidghasldgliashdglhasli"
- ]
+ "ajdhfkasjhdkjashdkjghaskdgkauhkbdhvliashdlghaslidghasldgliashdglhasli",
+ ],
}, {
inputClassName: "c0 c1 c2 c3 c4 c5 c6 c7 c8 c9 " +
"c10 c11 c12 c13 c14 c15 c16 c17 c18 c19 " +
"c20 c21 c22 c23 c24 c25 c26 c27 c28 c29 " +
"c30 c31 c32 c33 c34 c35 c36 c37 c38 c39 " +
"c40 c41 c42 c43 c44 c45 c46 c47 c48 c49",
expectedClasses: ["c0", "c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9",
"c10", "c11", "c12", "c13", "c14", "c15", "c16", "c17", "c18", "c19",
"c20", "c21", "c22", "c23", "c24", "c25", "c26", "c27", "c28", "c29",
"c30", "c31", "c32", "c33", "c34", "c35", "c36", "c37", "c38", "c39",
- "c40", "c41", "c42", "c43", "c44", "c45", "c46", "c47", "c48", "c49"]
+ "c40", "c41", "c42", "c43", "c44", "c45", "c46", "c47", "c48", "c49"],
}, {
inputClassName: " \n \n class1 \t class2 \t\tclass3\t",
- expectedClasses: ["class1", "class2", "class3"]
+ expectedClasses: ["class1", "class2", "class3"],
}];
add_task(async function() {
await addTab("data:text/html;charset=utf-8,<div>");
const {testActor, inspector, view} = await openRuleView();
await selectNode("div", inspector);
--- a/devtools/client/inspector/rules/test/browser_rules_class_panel_edit.js
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_edit.js
@@ -12,40 +12,40 @@ add_task(async function() {
info("Open the class panel");
view.showClassPanel();
info("Click on class1 and check that the checkbox is unchecked and the DOM is updated");
await toggleClassPanelCheckBox(view, "class1");
checkClassPanelContent(view, [
{name: "class1", state: false},
- {name: "class2", state: true}
+ {name: "class2", state: true},
]);
let newClassName = await testActor.getAttribute("body", "class");
is(newClassName, "class2", "The class attribute has been updated in the DOM");
info("Click on class2 and check the same thing");
await toggleClassPanelCheckBox(view, "class2");
checkClassPanelContent(view, [
{name: "class1", state: false},
- {name: "class2", state: false}
+ {name: "class2", state: false},
]);
newClassName = await testActor.getAttribute("body", "class");
is(newClassName, "", "The class attribute has been updated in the DOM");
info("Click on class2 and checks that the class is added again");
await toggleClassPanelCheckBox(view, "class2");
checkClassPanelContent(view, [
{name: "class1", state: false},
- {name: "class2", state: true}
+ {name: "class2", state: true},
]);
newClassName = await testActor.getAttribute("body", "class");
is(newClassName, "class2", "The class attribute has been updated in the DOM");
info("And finally, click on class1 again and checks it is added again");
await toggleClassPanelCheckBox(view, "class1");
checkClassPanelContent(view, [
{name: "class1", state: true},
- {name: "class2", state: true}
+ {name: "class2", state: true},
]);
newClassName = await testActor.getAttribute("body", "class");
is(newClassName, "class1 class2", "The class attribute has been updated in the DOM");
});
--- a/devtools/client/inspector/rules/test/browser_rules_class_panel_mutation.js
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_mutation.js
@@ -18,57 +18,57 @@ add_task(async function() {
info("Trigger an unrelated mutation on the div (id attribute change)");
let onMutation = view.inspector.once("markupmutation");
await testActor.setAttribute("div", "id", "test-id");
await onMutation;
info("Check that the panel still contains the right classes");
checkClassPanelContent(view, [
{name: "c1", state: true},
- {name: "c2", state: true}
+ {name: "c2", state: true},
]);
info("Trigger a class mutation on a different, unknown, node");
onMutation = view.inspector.once("markupmutation");
await testActor.setAttribute("body", "class", "test-class");
await onMutation;
info("Check that the panel still contains the right classes");
checkClassPanelContent(view, [
{name: "c1", state: true},
- {name: "c2", state: true}
+ {name: "c2", state: true},
]);
info("Trigger a class mutation on the current node");
onMutation = view.inspector.once("markupmutation");
await testActor.setAttribute("div", "class", "c3 c4");
await onMutation;
info("Check that the panel now contains the new classes");
checkClassPanelContent(view, [
{name: "c3", state: true},
- {name: "c4", state: true}
+ {name: "c4", state: true},
]);
info("Change the state of one of the new classes");
await toggleClassPanelCheckBox(view, "c4");
checkClassPanelContent(view, [
{name: "c3", state: true},
- {name: "c4", state: false}
+ {name: "c4", state: false},
]);
info("Select another node");
await selectNode("body", inspector);
info("Trigger a class mutation on the div");
onMutation = view.inspector.once("markupmutation");
await testActor.setAttribute("div", "class", "c5 c6 c7");
await onMutation;
info("Go back to the previous node and check the content of the class panel." +
"Even if hidden, it should have refreshed when we changed the DOM");
await selectNode("div", inspector);
checkClassPanelContent(view, [
{name: "c5", state: true},
{name: "c6", state: true},
- {name: "c7", state: true}
+ {name: "c7", state: true},
]);
});
--- a/devtools/client/inspector/rules/test/browser_rules_colorUnit.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorUnit.js
@@ -13,17 +13,17 @@ const TEST_URI = `
}
</style>
<div id='testid' class='testclass'>Styled Node</div>
`;
add_task(async function() {
const TESTS = [
{name: "hex", result: "#0f0"},
- {name: "rgb", result: "rgb(0, 255, 0)"}
+ {name: "rgb", result: "rgb(0, 255, 0)"},
];
for (const {name, result} of TESTS) {
info("starting test for " + name);
Services.prefs.setCharPref("devtools.defaultColorUnit", name);
const tab = await addTab("data:text/html;charset=utf-8," +
encodeURIComponent(TEST_URI));
@@ -44,17 +44,17 @@ async function basicTest(view, name, res
.querySelector(".ruleview-colorswatch");
const onColorPickerReady = cPicker.once("ready");
swatch.click();
await onColorPickerReady;
await simulateColorPickerChange(view, cPicker, [0, 255, 0, 1], {
selector: "#testid",
name: "color",
- value: "rgb(0, 255, 0)"
+ value: "rgb(0, 255, 0)",
});
const spectrum = cPicker.spectrum;
const onHidden = cPicker.tooltip.once("hidden");
// Validating the color change ends up updating the rule view twice
const onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
await onHidden;
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_01.js
@@ -35,17 +35,17 @@ async function testImageTooltipAfterColo
const picker = ruleView.tooltips.getTooltip("colorPicker");
const onColorPickerReady = picker.once("ready");
swatch.click();
await onColorPickerReady;
await simulateColorPickerChange(ruleView, picker, [0, 0, 0, 1], {
selector: "body",
name: "background-image",
- value: 'url("chrome://global/skin/icons/warning-64.png"), linear-gradient(rgb(0, 0, 0), rgb(255, 0, 102) 400px)'
+ value: 'url("chrome://global/skin/icons/warning-64.png"), linear-gradient(rgb(0, 0, 0), rgb(255, 0, 102) 400px)',
});
const spectrum = picker.spectrum;
const onHidden = picker.tooltip.once("hidden");
const onModifications = ruleView.once("ruleview-changed");
focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
await onHidden;
await onModifications;
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js
@@ -34,17 +34,17 @@ async function testColorChangeIsntRevert
const picker = ruleView.tooltips.getTooltip("colorPicker");
const onColorPickerReady = picker.once("ready");
swatch.click();
await onColorPickerReady;
await simulateColorPickerChange(ruleView, picker, [0, 0, 0, 1], {
selector: "body",
name: "background-color",
- value: "rgb(0, 0, 0)"
+ value: "rgb(0, 0, 0)",
});
const spectrum = picker.spectrum;
const onModifications = waitForNEvents(ruleView, "ruleview-changed", 2);
const onHidden = picker.tooltip.once("hidden");
focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
await onHidden;
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-commit-on-ENTER.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-commit-on-ENTER.js
@@ -30,17 +30,17 @@ async function testPressingEnterCommitsC
const onColorPickerReady = cPicker.once("ready");
swatch.click();
await onColorPickerReady;
await simulateColorPickerChange(ruleView, cPicker, [0, 255, 0, .5], {
selector: "body",
name: "border-left-color",
- value: "rgba(0, 255, 0, 0.5)"
+ value: "rgba(0, 255, 0, 0.5)",
});
is(swatch.style.backgroundColor, "rgba(0, 255, 0, 0.5)",
"The color swatch's background was updated");
is(getRuleViewProperty(ruleView, "body", "border").valueSpan.textContent,
"2em solid rgba(0, 255, 0, 0.5)",
"The text of the border css property was updated");
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js
@@ -56,17 +56,17 @@ async function testPickingNewColor(view)
const onColorPickerReady = cPicker.once("ready");
swatchEl.click();
await onColorPickerReady;
const change = {
selector: "body",
name: "background-image",
value: "linear-gradient(to left, rgb(1, 1, 1) 25%, " +
- "rgb(51, 51, 51) 95%, rgb(0, 0, 0) 100%)"
+ "rgb(51, 51, 51) 95%, rgb(0, 0, 0) 100%)",
};
await simulateColorPickerChange(view, cPicker, [1, 1, 1, 1], change);
is(swatchEl.style.backgroundColor, "rgb(1, 1, 1)",
"The color swatch's background was updated");
is(colorEl.textContent, "#010101", "The color text was updated");
is((await getComputedStyleProperty("body", null, "background-image")),
"linear-gradient(to left, rgb(1, 1, 1) 25%, rgb(51, 51, 51) 95%, " +
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js
@@ -45,23 +45,23 @@ async function testSimpleMultipleColorCh
const onColorPickerReady = picker.once("ready");
swatch.click();
await onColorPickerReady;
info("Changing the color several times");
const colors = [
{rgba: [0, 0, 0, 1], computed: "rgb(0, 0, 0)"},
{rgba: [100, 100, 100, 1], computed: "rgb(100, 100, 100)"},
- {rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)"}
+ {rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)"},
];
for (const {rgba, computed} of colors) {
await simulateColorPickerChange(ruleView, picker, rgba, {
selector: "p",
name: "color",
- value: computed
+ value: computed,
});
}
is((await getComputedStyleProperty("p", null, "color")),
"rgb(200, 200, 200)", "The color of the P tag is correct");
}
async function testComplexMultipleColorChanges(inspector, ruleView) {
@@ -76,23 +76,23 @@ async function testComplexMultipleColorC
const onColorPickerReady = picker.once("ready");
swatch.click();
await onColorPickerReady;
info("Changing the color several times");
const colors = [
{rgba: [0, 0, 0, 1], computed: "rgb(0, 0, 0)"},
{rgba: [100, 100, 100, 1], computed: "rgb(100, 100, 100)"},
- {rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)"}
+ {rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)"},
];
for (const {rgba, computed} of colors) {
await simulateColorPickerChange(ruleView, picker, rgba, {
selector: "body",
name: "background-color",
- value: computed
+ value: computed,
});
}
info("Closing the color picker");
await hideTooltipAndWaitForRuleViewChanged(picker, ruleView);
is((await getComputedStyleProperty("p", null, "color")),
"rgb(200, 200, 200)", "The color of the P tag is still correct");
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-revert-on-ESC.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-revert-on-ESC.js
@@ -21,17 +21,17 @@ add_task(async function() {
await testPressingEscapeRevertsChanges(view);
});
async function testPressingEscapeRevertsChanges(view) {
const {swatch, propEditor, cPicker} = await openColorPickerAndSelectColor(view,
1, 0, [0, 0, 0, 1], {
selector: "body",
name: "background-color",
- value: "rgb(0, 0, 0)"
+ value: "rgb(0, 0, 0)",
});
is(swatch.style.backgroundColor, "rgb(0, 0, 0)",
"The color swatch's background was updated");
is(propEditor.valueSpan.textContent, "#000",
"The text of the background-color css property was updated");
const spectrum = cPicker.spectrum;
--- a/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_02.js
@@ -29,17 +29,17 @@ var testData = [
["VK_BACK_SPACE", {}, "blue !", !OPEN, !SELECTED, CHANGE],
["VK_BACK_SPACE", {}, "blue ", !OPEN, !SELECTED, CHANGE],
["VK_BACK_SPACE", {}, "blue", !OPEN, !SELECTED, CHANGE],
["VK_TAB", {shiftKey: true}, "color", !OPEN, !SELECTED, CHANGE],
["VK_BACK_SPACE", {}, "", !OPEN, !SELECTED, !CHANGE],
["d", {}, "display", OPEN, SELECTED, !CHANGE],
["VK_TAB", {}, "blue", !OPEN, !SELECTED, CHANGE],
["n", {}, "none", !OPEN, !SELECTED, CHANGE],
- ["VK_RETURN", {}, null, !OPEN, !SELECTED, CHANGE]
+ ["VK_RETURN", {}, null, !OPEN, !SELECTED, CHANGE],
];
const TEST_URI = "<h1 style='color: red'>Header</h1>";
add_task(async function() {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const {toolbox, inspector, view, testActor} = await openRuleView();
--- a/devtools/client/inspector/rules/test/browser_rules_completion-new-property_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_02.js
@@ -33,17 +33,17 @@ const testData = [
["VK_DOWN", {}, "red", OPEN, SELECTED, CHANGE],
["VK_DOWN", {}, "rgb", OPEN, SELECTED, CHANGE],
["VK_DOWN", {}, "rgba", OPEN, SELECTED, CHANGE],
["VK_DOWN", {}, "rosybrown", OPEN, SELECTED, CHANGE],
["VK_DOWN", {}, "royalblue", OPEN, SELECTED, CHANGE],
["VK_RIGHT", {}, "royalblue", !OPEN, !SELECTED, !CHANGE],
[" ", {}, "royalblue aliceblue", OPEN, SELECTED, CHANGE],
["!", {}, "royalblue !important", !OPEN, !SELECTED, CHANGE],
- ["VK_ESCAPE", {}, null, !OPEN, !SELECTED, CHANGE]
+ ["VK_ESCAPE", {}, null, !OPEN, !SELECTED, CHANGE],
];
const TEST_URI = `
<style type="text/css">
h1 {
border: 1px solid red;
}
</style>
--- a/devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js
@@ -36,17 +36,17 @@ function testComputedList(inspector, vie
ok(expander.hasAttribute("open"), "margin computed list is open");
const computed = propEditor.prop.computed;
const computedDom = propEditor.computed;
const propNames = [
"margin-top",
"margin-right",
"margin-bottom",
- "margin-left"
+ "margin-left",
];
is(computed.length, propNames.length, "There should be 4 computed values");
is(computedDom.children.length, propNames.length,
"There should be 4 nodes in the DOM");
propNames.forEach((propName, i) => {
const propValue = i + "px";
--- a/devtools/client/inspector/rules/test/browser_rules_copy_styles.js
+++ b/devtools/client/inspector/rules/test/browser_rules_copy_styles.js
@@ -27,74 +27,74 @@ add_task(async function() {
menuItemLabel: "styleinspector.contextmenu.copyPropertyName",
expectedPattern: "color",
visible: {
copyLocation: false,
copyPropertyDeclaration: true,
copyPropertyName: true,
copyPropertyValue: false,
copySelector: false,
- copyRule: true
- }
+ copyRule: true,
+ },
},
{
desc: "Test Copy Property Value",
node: ruleEditor.rule.textProps[2].editor.valueSpan,
menuItemLabel: "styleinspector.contextmenu.copyPropertyValue",
expectedPattern: "12px",
visible: {
copyLocation: false,
copyPropertyDeclaration: true,
copyPropertyName: false,
copyPropertyValue: true,
copySelector: false,
- copyRule: true
- }
+ copyRule: true,
+ },
},
{
desc: "Test Copy Property Value with Priority",
node: ruleEditor.rule.textProps[3].editor.valueSpan,
menuItemLabel: "styleinspector.contextmenu.copyPropertyValue",
expectedPattern: "#00F !important",
visible: {
copyLocation: false,
copyPropertyDeclaration: true,
copyPropertyName: false,
copyPropertyValue: true,
copySelector: false,
- copyRule: true
- }
+ copyRule: true,
+ },
},
{
desc: "Test Copy Property Declaration",
node: ruleEditor.rule.textProps[2].editor.nameSpan,
menuItemLabel: "styleinspector.contextmenu.copyPropertyDeclaration",
expectedPattern: "font-size: 12px;",
visible: {
copyLocation: false,
copyPropertyDeclaration: true,
copyPropertyName: true,
copyPropertyValue: false,
copySelector: false,
- copyRule: true
- }
+ copyRule: true,
+ },
},
{
desc: "Test Copy Property Declaration with Priority",
node: ruleEditor.rule.textProps[3].editor.nameSpan,
menuItemLabel: "styleinspector.contextmenu.copyPropertyDeclaration",
expectedPattern: "border-color: #00F !important;",
visible: {
copyLocation: false,
copyPropertyDeclaration: true,
copyPropertyName: true,
copyPropertyValue: false,
copySelector: false,
- copyRule: true
- }
+ copyRule: true,
+ },
},
{
desc: "Test Copy Rule",
node: ruleEditor.rule.textProps[2].editor.nameSpan,
menuItemLabel: "styleinspector.contextmenu.copyRule",
expectedPattern: "#testid {[\\r\\n]+" +
"\tcolor: #F00;[\\r\\n]+" +
"\tbackground-color: #00F;[\\r\\n]+" +
@@ -103,47 +103,47 @@ add_task(async function() {
"\t--var: \"\\*/\";[\\r\\n]+" +
"}",
visible: {
copyLocation: false,
copyPropertyDeclaration: true,
copyPropertyName: true,
copyPropertyValue: false,
copySelector: false,
- copyRule: true
- }
+ copyRule: true,
+ },
},
{
desc: "Test Copy Selector",
node: ruleEditor.selectorText,
menuItemLabel: "styleinspector.contextmenu.copySelector",
expectedPattern: "html, body, #testid",
visible: {
copyLocation: false,
copyPropertyDeclaration: false,
copyPropertyName: false,
copyPropertyValue: false,
copySelector: true,
- copyRule: true
- }
+ copyRule: true,
+ },
},
{
desc: "Test Copy Location",
node: ruleEditor.source,
menuItemLabel: "styleinspector.contextmenu.copyLocation",
expectedPattern: "http://example.com/browser/devtools/client/" +
"inspector/rules/test/doc_copystyles.css",
visible: {
copyLocation: true,
copyPropertyDeclaration: false,
copyPropertyName: false,
copyPropertyValue: false,
copySelector: false,
- copyRule: true
- }
+ copyRule: true,
+ },
},
{
setup: async function() {
await disableProperty(view, 0);
},
desc: "Test Copy Rule with Disabled Property",
node: ruleEditor.rule.textProps[2].editor.nameSpan,
menuItemLabel: "styleinspector.contextmenu.copyRule",
@@ -155,18 +155,18 @@ add_task(async function() {
"\t--var: \"\\*/\";[\\r\\n]+" +
"}",
visible: {
copyLocation: false,
copyPropertyDeclaration: true,
copyPropertyName: true,
copyPropertyValue: false,
copySelector: false,
- copyRule: true
- }
+ copyRule: true,
+ },
},
{
setup: async function() {
await disableProperty(view, 4);
},
desc: "Test Copy Rule with Disabled Property with Comment",
node: ruleEditor.rule.textProps[2].editor.nameSpan,
menuItemLabel: "styleinspector.contextmenu.copyRule",
@@ -178,32 +178,32 @@ add_task(async function() {
"\t/\\* --var: \"\\*\\\\\/\"; \\*\/[\\r\\n]+" +
"}",
visible: {
copyLocation: false,
copyPropertyDeclaration: true,
copyPropertyName: true,
copyPropertyValue: false,
copySelector: false,
- copyRule: true
- }
+ copyRule: true,
+ },
},
{
desc: "Test Copy Property Declaration with Disabled Property",
node: ruleEditor.rule.textProps[0].editor.nameSpan,
menuItemLabel: "styleinspector.contextmenu.copyPropertyDeclaration",
expectedPattern: "\/\\* color: #F00; \\*\/",
visible: {
copyLocation: false,
copyPropertyDeclaration: true,
copyPropertyName: true,
copyPropertyValue: false,
copySelector: false,
- copyRule: true
- }
+ copyRule: true,
+ },
},
];
for (const { setup, desc, node, menuItemLabel, expectedPattern, visible } of data) {
if (setup) {
await setup();
}
--- a/devtools/client/inspector/rules/test/browser_rules_cubicbezier-revert-on-ESC.js
+++ b/devtools/client/inspector/rules/test/browser_rules_cubicbezier-revert-on-ESC.js
@@ -21,17 +21,17 @@ add_task(async function() {
await testPressingEscapeRevertsChanges(view);
});
async function testPressingEscapeRevertsChanges(view) {
const {propEditor} = await openCubicBezierAndChangeCoords(view, 1, 0,
[0.1, 2, 0.9, -1], {
selector: "body",
name: "animation-timing-function",
- value: "cubic-bezier(0.1, 2, 0.9, -1)"
+ value: "cubic-bezier(0.1, 2, 0.9, -1)",
});
is(propEditor.valueSpan.textContent, "cubic-bezier(.1,2,.9,-1)",
"Got expected property value.");
await escapeTooltip(view);
await waitForComputedStyleProperty("body", null, "animation-timing-function",
--- a/devtools/client/inspector/rules/test/browser_rules_cycle-angle.js
+++ b/devtools/client/inspector/rules/test/browser_rules_cycle-angle.js
@@ -30,26 +30,26 @@ async function checkAngleCycling(contain
const valueNode = container.querySelector(".ruleview-angle");
const win = view.styleWindow;
// turn
is(valueNode.textContent, "1turn", "Angle displayed as a turn value.");
const tests = [{
value: "360deg",
- comment: "Angle displayed as a degree value."
+ comment: "Angle displayed as a degree value.",
}, {
value: `${Math.round(Math.PI * 2 * 10000) / 10000}rad`,
- comment: "Angle displayed as a radian value."
+ comment: "Angle displayed as a radian value.",
}, {
value: "400grad",
- comment: "Angle displayed as a gradian value."
+ comment: "Angle displayed as a gradian value.",
}, {
value: "1turn",
- comment: "Angle displayed as a turn value again."
+ comment: "Angle displayed as a turn value again.",
}];
for (const test of tests) {
await checkSwatchShiftClick(container, win, test.value, test.comment);
}
}
async function checkAngleCyclingPersist(inspector, view) {
@@ -79,13 +79,13 @@ async function checkAngleCyclingPersist(
async function checkSwatchShiftClick(container, win, expectedValue, comment) {
const swatch = container.querySelector(".ruleview-angleswatch");
const valueNode = container.querySelector(".ruleview-angle");
const onUnitChange = swatch.once("unit-change");
EventUtils.synthesizeMouseAtCenter(swatch, {
type: "mousedown",
- shiftKey: true
+ shiftKey: true,
}, win);
await onUnitChange;
is(valueNode.textContent, expectedValue, comment);
}
--- a/devtools/client/inspector/rules/test/browser_rules_cycle-color.js
+++ b/devtools/client/inspector/rules/test/browser_rules_cycle-color.js
@@ -32,29 +32,29 @@ async function checkColorCycling(contain
const valueNode = container.querySelector(".ruleview-color");
const win = view.styleWindow;
// Hex
is(valueNode.textContent, "#f00", "Color displayed as a hex value.");
const tests = [{
value: "hsl(0, 100%, 50%)",
- comment: "Color displayed as an HSL value."
+ comment: "Color displayed as an HSL value.",
}, {
value: "rgb(255, 0, 0)",
- comment: "Color displayed as an RGB value."
+ comment: "Color displayed as an RGB value.",
}, {
value: "red",
- comment: "Color displayed as a color name."
+ comment: "Color displayed as a color name.",
}, {
value: "#f00",
- comment: "Color displayed as an authored value."
+ comment: "Color displayed as an authored value.",
}, {
value: "hsl(0, 100%, 50%)",
- comment: "Color displayed as an HSL value again."
+ comment: "Color displayed as an HSL value again.",
}];
for (const test of tests) {
await checkSwatchShiftClick(container, win, test.value, test.comment);
}
}
async function checkAlphaColorCycling(inspector, view) {
@@ -63,23 +63,23 @@ async function checkAlphaColorCycling(in
const valueNode = container.querySelector(".ruleview-color");
const win = view.styleWindow;
is(valueNode.textContent, "#ff000080",
"Color displayed as an alpha hex value.");
const tests = [{
value: "hsla(0, 100%, 50%, 0.5)",
- comment: "Color displayed as an HSLa value."
+ comment: "Color displayed as an HSLa value.",
}, {
value: "rgba(255, 0, 0, 0.5)",
- comment: "Color displayed as an RGBa value."
+ comment: "Color displayed as an RGBa value.",
}, {
value: "#ff000080",
- comment: "Color displayed as an alpha hex value again."
+ comment: "Color displayed as an alpha hex value again.",
}];
for (const test of tests) {
await checkSwatchShiftClick(container, win, test.value, test.comment);
}
}
async function checkColorCyclingPersist(inspector, view) {
@@ -108,13 +108,13 @@ async function checkColorCyclingPersist(
async function checkSwatchShiftClick(container, win, expectedValue, comment) {
const swatch = container.querySelector(".ruleview-colorswatch");
const valueNode = container.querySelector(".ruleview-color");
const onUnitChange = swatch.once("unit-change");
EventUtils.synthesizeMouseAtCenter(swatch, {
type: "mousedown",
- shiftKey: true
+ shiftKey: true,
}, win);
await onUnitChange;
is(valueNode.textContent, expectedValue, comment);
}
--- a/devtools/client/inspector/rules/test/browser_rules_edit-property-commit.js
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-commit.js
@@ -23,35 +23,35 @@ const TEST_URI = `
// modifiers: commitKey modifiers,
// expected: what value is expected as a result
// }
const testData = [
{
value: "red",
commitKey: "VK_ESCAPE",
modifiers: {},
- expected: "#00F"
+ expected: "#00F",
},
{
value: "red",
commitKey: "VK_RETURN",
modifiers: {},
- expected: "red"
+ expected: "red",
},
{
value: "invalid",
commitKey: "VK_RETURN",
modifiers: {},
- expected: "invalid"
+ expected: "invalid",
},
{
value: "blue",
commitKey: "VK_TAB", modifiers: {shiftKey: true},
- expected: "blue"
- }
+ expected: "blue",
+ },
];
add_task(async function() {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const {inspector, view} = await openRuleView();
await selectNode("#testid", inspector);
for (const data of testData) {
--- a/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js
@@ -61,17 +61,17 @@ async function editAndCheck(view) {
info("Waiting for the style changes to be applied");
await once(view, "ruleview-changed");
const computed = prop.computed;
const propNames = [
"padding-top",
"padding-right",
"padding-bottom",
- "padding-left"
+ "padding-left",
];
is(computed.length, propNames.length, "There should be 4 computed values");
propNames.forEach((propName, i) => {
is(computed[i].name, propName,
"Computed property #" + i + " has name " + propName);
is(computed[i].value, newPaddingValue,
"Computed value of " + propName + " is as expected");
--- a/devtools/client/inspector/rules/test/browser_
