diff --git a/browser/base/content/browser-tabsintitlebar-stub.js b/browser/base/content/browser-tabsintitlebar-stub.js deleted file mode 100644 index 7276cc4751b8..000000000000 --- a/browser/base/content/browser-tabsintitlebar-stub.js +++ /dev/null @@ -1,16 +0,0 @@ -/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- - * 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/. */ - -// This file is used as a stub object for platforms which -// don't have CAN_DRAW_IN_TITLEBAR defined. - -var TabsInTitlebar = { - init() {}, - whenWindowLayoutReady() {}, - uninit() {}, - allowedBy() {}, - update() {}, - enabled: false, -}; diff --git a/browser/base/content/browser-tabsintitlebar.js b/browser/base/content/browser-tabsintitlebar.js index 70eeeeaab51f..c1cb43de4213 100644 --- a/browser/base/content/browser-tabsintitlebar.js +++ b/browser/base/content/browser-tabsintitlebar.js @@ -3,19 +3,11 @@ * 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/. */ -// Note: the file browser-tabsintitlebar-stub.js is used instead of -// this one on platforms which don't have CAN_DRAW_IN_TITLEBAR defined. - var TabsInTitlebar = { init() { this._readPref(); Services.prefs.addObserver(this._prefName, this); - // Always disable on unsupported GTK versions. - if (AppConstants.MOZ_WIDGET_TOOLKIT == "gtk3") { - this.allowedBy("gtk", window.matchMedia("(-moz-gtk-csd-available)")); - } - // We need to update the appearance of the titlebar when the menu changes // from the active to the inactive state. We can't, however, rely on // DOMMenuBarInactive, because the menu fires this event and then removes @@ -66,6 +58,21 @@ var TabsInTitlebar = { } }, + get systemSupported() { + let isSupported = false; + switch (AppConstants.MOZ_WIDGET_TOOLKIT) { + case "windows": + case "cocoa": + isSupported = true; + break; + case "gtk3": + isSupported = window.matchMedia("(-moz-gtk-csd-available)"); + break; + } + delete this.systemSupported; + return this.systemSupported = isSupported; + }, + get enabled() { return document.documentElement.getAttribute("tabsintitlebar") == "true"; }, @@ -134,7 +141,8 @@ var TabsInTitlebar = { return; } - let allowed = (Object.keys(this._disallowed)).length == 0; + let allowed = this.systemSupported && + (Object.keys(this._disallowed)).length == 0; if (allowed) { document.documentElement.setAttribute("tabsintitlebar", "true"); if (AppConstants.platform == "macosx") { diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css index b08f72ad0d5e..de5229667b67 100644 --- a/browser/base/content/browser.css +++ b/browser/base/content/browser.css @@ -277,7 +277,6 @@ window:not([chromehidden~="toolbar"]) #nav-bar[nonemptyoverflow] > .overflow-but } -%ifdef CAN_DRAW_IN_TITLEBAR %ifdef MENUBAR_CAN_AUTOHIDE #toolbar-menubar:not([autohide=true]) + #TabsToolbar > .titlebar-placeholder, %endif @@ -347,8 +346,6 @@ toolbarpaletteitem { } %endif -%endif - #main-window[inFullscreen][inDOMFullscreen] #navigator-toolbox, #main-window[inFullscreen][inDOMFullscreen] #fullscr-toggler, #main-window[inFullscreen][inDOMFullscreen] #sidebar-box, diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul index 5f069e03bb8f..d6d770d121fb 100644 --- a/browser/base/content/browser.xul +++ b/browser/base/content/browser.xul @@ -46,14 +46,12 @@ titlemodifier_normal="&mainWindow.titlemodifier;" titlemodifier_privatebrowsing="&mainWindow.titlemodifier; &mainWindow.titlePrivateBrowsingSuffix;" #endif -#ifdef CAN_DRAW_IN_TITLEBAR #ifdef XP_WIN chromemargin="0,2,2,2" #else chromemargin="0,-1,-1,-1" #endif tabsintitlebar="true" -#endif titlemenuseparator="&mainWindow.titlemodifiermenuseparator;" windowtype="navigator:browser" macanimationtype="document" @@ -598,7 +596,6 @@
-#ifdef CAN_DRAW_IN_TITLEBAR
@@ -620,7 +617,6 @@ #endif
-#endif
@@ -640,11 +636,9 @@ #include browser-menubar.inc -#ifdef CAN_DRAW_IN_TITLEBAR #ifndef XP_MACOSX
-#endif #endif @@ -656,11 +650,8 @@ aria-label="&tabsToolbar.label;" context="toolbar-context-menu" collapsed="true"> - -#ifdef CAN_DRAW_IN_TITLEBAR
-#endif
-#ifdef CAN_DRAW_IN_TITLEBAR
-#endif
-#ifdef CAN_DRAW_IN_TITLEBAR
-#endif #endif diff --git a/browser/base/content/test/general/browser_bug432599.js b/browser/base/content/test/general/browser_bug432599.js index ac5d15f8ad8d..7ba13929662c 100644 --- a/browser/base/content/test/general/browser_bug432599.js +++ b/browser/base/content/test/general/browser_bug432599.js @@ -1,4 +1,6 @@ -/* eslint-disable mozilla/no-arbitrary-setTimeout */ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + function invokeUsingCtrlD(phase) { switch (phase) { case 1: @@ -31,96 +33,58 @@ function invokeUsingStarButton(phase) { } } -var testURL = "data:text/plain,Content"; -var bookmarkId; +add_task(async function() { + const TEST_URL = "data:text/plain,Content"; -function add_bookmark(aURI, aTitle) { - return PlacesUtils.bookmarks.insertBookmark(PlacesUtils.unfiledBookmarksFolderId, - aURI, PlacesUtils.bookmarks.DEFAULT_INDEX, - aTitle); -} - -// test bug 432599 -function test() { - waitForExplicitFinish(); - - gBrowser.selectedTab = BrowserTestUtils.addTab(gBrowser); - BrowserTestUtils.browserLoaded(gBrowser.selectedBrowser).then(() => { - waitForStarChange(false, initTest); + let tab = await BrowserTestUtils.openNewForegroundTab(gBrowser, TEST_URL); + registerCleanupFunction(async () => { + await BrowserTestUtils.removeTab(tab); + await PlacesUtils.bookmarks.eraseEverything(); }); - gBrowser.loadURI(testURL); -} + // Changing the location causes the star to asynchronously update, thus wait + // for it to be in a stable state before proceeding. + await TestUtils.waitForCondition( + () => BookmarkingUI.status == BookmarkingUI.STATUS_UNSTARRED + ); -function initTest() { - // First, bookmark the page. - bookmarkId = add_bookmark(makeURI(testURL), "Bug 432599 Test"); + await PlacesUtils.bookmarks.insert({ + parentGuid: PlacesUtils.bookmarks.unfiledGuid, + url: TEST_URL, + title: "Bug 432599 Test" + }); + Assert.equal(BookmarkingUI.status, BookmarkingUI.STATUS_STARRED, + "The star state should be starred"); - checkBookmarksPanel(invokers[currentInvoker], 1); -} - -function waitForStarChange(aValue, aCallback) { - let expectedStatus = aValue ? BookmarkingUI.STATUS_STARRED - : BookmarkingUI.STATUS_UNSTARRED; - if (BookmarkingUI.status == BookmarkingUI.STATUS_UPDATING || - BookmarkingUI.status != expectedStatus) { - info("Waiting for star button change."); - setTimeout(waitForStarChange, 50, aValue, aCallback); - return; + for (let invoker of [invokeUsingStarButton, invokeUsingCtrlD]) { + for (let phase = 1; phase < 5; ++phase) { + let promise = checkBookmarksPanel(phase); + invoker(phase); + await promise; + Assert.equal(BookmarkingUI.status, BookmarkingUI.STATUS_STARRED, + "The star state shouldn't change"); + } } - aCallback(); -} - -var invokers = [invokeUsingStarButton, invokeUsingCtrlD]; -var currentInvoker = 0; +}); var initialValue; var initialRemoveHidden; - -var popupElement = document.getElementById("editBookmarkPanel"); -var titleElement = document.getElementById("editBookmarkPanelTitle"); -var removeElement = document.getElementById("editBookmarkPanelRemoveButton"); - -function checkBookmarksPanel(invoker, phase) { - let onPopupShown = function popupShownListener(aEvent) { - if (aEvent.originalTarget == popupElement) { - popupElement.removeEventListener("popupshown", popupShownListener); - checkBookmarksPanel(invoker, phase + 1); - } - }; - let onPopupHidden = function listener(aEvent) { - if (aEvent.originalTarget == popupElement) { - popupElement.removeEventListener("popuphidden", listener); - if (phase < 4) { - checkBookmarksPanel(invoker, phase + 1); - } else { - ++currentInvoker; - if (currentInvoker < invokers.length) { - checkBookmarksPanel(invokers[currentInvoker], 1); - } else { - gBrowser.removeTab(gBrowser.selectedTab, {skipPermitUnload: true}); - PlacesUtils.bookmarks.removeItem(bookmarkId); - executeSoon(finish); - } - } - } - }; - +function checkBookmarksPanel(phase) { + let popupElement = document.getElementById("editBookmarkPanel"); + let titleElement = document.getElementById("editBookmarkPanelTitle"); + let removeElement = document.getElementById("editBookmarkPanelRemoveButton"); switch (phase) { case 1: case 3: - popupElement.addEventListener("popupshown", onPopupShown); - break; + return promisePopupEvent(popupElement, "shown"); case 2: - popupElement.addEventListener("popuphidden", onPopupHidden); initialValue = titleElement.value; initialRemoveHidden = removeElement.hidden; - break; + return promisePopupEvent(popupElement, "hidden"); case 4: - popupElement.addEventListener("popuphidden", onPopupHidden); - is(titleElement.value, initialValue, "The bookmark panel's title should be the same"); - is(removeElement.hidden, initialRemoveHidden, "The bookmark panel's visibility should not change"); - break; + Assert.equal(titleElement.value, initialValue, "The bookmark panel's title should be the same"); + Assert.equal(removeElement.hidden, initialRemoveHidden, "The bookmark panel's visibility should not change"); + return promisePopupEvent(popupElement, "hidden"); } - invoker(phase); + return Promise.reject(new Error("Unknown phase")); } diff --git a/browser/base/jar.mn b/browser/base/jar.mn index e69976be43cf..25e03ad5be58 100644 --- a/browser/base/jar.mn +++ b/browser/base/jar.mn @@ -68,11 +68,7 @@ browser.jar: content/browser/browser-sidebar.js (content/browser-sidebar.js) content/browser/browser-sync.js (content/browser-sync.js) * content/browser/browser-tabPreviews.xml (content/browser-tabPreviews.xml) -#ifdef CAN_DRAW_IN_TITLEBAR content/browser/browser-tabsintitlebar.js (content/browser-tabsintitlebar.js) -#else - content/browser/browser-tabsintitlebar.js (content/browser-tabsintitlebar-stub.js) -#endif content/browser/browser-thumbnails.js (content/browser-thumbnails.js) content/browser/browser-trackingprotection.js (content/browser-trackingprotection.js) content/browser/browser-webrender.js (content/browser-webrender.js) diff --git a/browser/base/moz.build b/browser/base/moz.build index dc0e14eaae8e..d76a4f5c1e74 100644 --- a/browser/base/moz.build +++ b/browser/base/moz.build @@ -62,9 +62,6 @@ DEFINES['APP_LICENSE_BLOCK'] = '%s/content/overrides/app-license.html' % SRCDIR if CONFIG['MOZ_WIDGET_TOOLKIT'] in ('windows', 'gtk3', 'cocoa'): DEFINES['CONTEXT_COPY_IMAGE_CONTENTS'] = 1 -if CONFIG['MOZ_WIDGET_TOOLKIT'] in ('windows', 'cocoa', 'gtk3'): - DEFINES['CAN_DRAW_IN_TITLEBAR'] = 1 - if CONFIG['MOZ_WIDGET_TOOLKIT'] in ('windows', 'gtk3'): DEFINES['MENUBAR_CAN_AUTOHIDE'] = 1 diff --git a/browser/components/customizableui/CustomizeMode.jsm b/browser/components/customizableui/CustomizeMode.jsm index e5a6e874f456..c46ade804170 100644 --- a/browser/components/customizableui/CustomizeMode.jsm +++ b/browser/components/customizableui/CustomizeMode.jsm @@ -102,14 +102,19 @@ function CustomizeMode(aWindow) { // toolbar items in browser.xul. This is invisible, and never seen by the // user. Then there's the visible palette, which gets populated and displayed // to the user when in customizing mode. - this.visiblePalette = this.document.getElementById(kPaletteId); - this.pongArena = this.document.getElementById("customization-pong-arena"); - if (AppConstants.CAN_DRAW_IN_TITLEBAR) { + this.visiblePalette = this.$(kPaletteId); + this.pongArena = this.$("customization-pong-arena"); + + if (this._canDrawInTitlebar()) { this._updateTitlebarCheckbox(); this._updateDragSpaceCheckbox(); Services.prefs.addObserver(kDrawInTitlebarPref, this); Services.prefs.addObserver(kExtraDragSpacePref, this); + } else { + this.$("customization-titlebar-visibility-checkbox").hidden = true; + this.$("customization-extra-drag-space-checkbox").hidden = true; } + this.window.addEventListener("unload", this); } @@ -138,12 +143,16 @@ CustomizeMode.prototype = { }, uninit() { - if (AppConstants.CAN_DRAW_IN_TITLEBAR) { + if (this._canDrawInTitlebar()) { Services.prefs.removeObserver(kDrawInTitlebarPref, this); Services.prefs.removeObserver(kExtraDragSpacePref, this); } }, + $(id) { + return this.document.getElementById(id); + }, + toggle() { if (this._handler.isEnteringCustomizeMode || this._handler.isExitingCustomizeMode) { this._wantToBeInCustomizeMode = !this._wantToBeInCustomizeMode; @@ -1577,7 +1586,7 @@ CustomizeMode.prototype = { case "nsPref:changed": this._updateResetButton(); this._updateUndoResetButton(); - if (AppConstants.CAN_DRAW_IN_TITLEBAR) { + if (this._canDrawInTitlebar()) { this._updateTitlebarCheckbox(); this._updateDragSpaceCheckbox(); } @@ -1585,12 +1594,13 @@ CustomizeMode.prototype = { } }, + _canDrawInTitlebar() { + return this.window.TabsInTitlebar.systemSupported; + }, + _updateTitlebarCheckbox() { - if (!AppConstants.CAN_DRAW_IN_TITLEBAR) { - return; - } let drawInTitlebar = Services.prefs.getBoolPref(kDrawInTitlebarPref, true); - let checkbox = this.document.getElementById("customization-titlebar-visibility-checkbox"); + let checkbox = this.$("customization-titlebar-visibility-checkbox"); // Drawing in the titlebar means 'hiding' the titlebar. // We use the attribute rather than a property because if we're not in // customize mode the button is hidden and properties don't work. @@ -1602,18 +1612,14 @@ CustomizeMode.prototype = { }, _updateDragSpaceCheckbox() { - if (!AppConstants.CAN_DRAW_IN_TITLEBAR) { - return; - } - let extraDragSpace = Services.prefs.getBoolPref(kExtraDragSpacePref); let drawInTitlebar = Services.prefs.getBoolPref(kDrawInTitlebarPref, true); - let menuBar = this.document.getElementById("toolbar-menubar"); + let menuBar = this.$("toolbar-menubar"); let menuBarEnabled = menuBar && AppConstants.platform != "macosx" && menuBar.getAttribute("autohide") != "true"; - let checkbox = this.document.getElementById("customization-extra-drag-space-checkbox"); + let checkbox = this.$("customization-extra-drag-space-checkbox"); if (extraDragSpace) { checkbox.setAttribute("checked", "true"); } else { @@ -1628,19 +1634,12 @@ CustomizeMode.prototype = { }, toggleTitlebar(aShouldShowTitlebar) { - if (!AppConstants.CAN_DRAW_IN_TITLEBAR) { - return; - } // Drawing in the titlebar means not showing the titlebar, hence the negation: Services.prefs.setBoolPref(kDrawInTitlebarPref, !aShouldShowTitlebar); this._updateDragSpaceCheckbox(); }, toggleDragSpace(aShouldShowDragSpace) { - if (!AppConstants.CAN_DRAW_IN_TITLEBAR) { - return; - } - Services.prefs.setBoolPref(kExtraDragSpacePref, aShouldShowDragSpace); }, diff --git a/browser/components/customizableui/content/customizeMode.inc.xul b/browser/components/customizableui/content/customizeMode.inc.xul index e34179749371..48031cb21dd2 100644 --- a/browser/components/customizableui/content/customizeMode.inc.xul +++ b/browser/components/customizableui/content/customizeMode.inc.xul @@ -28,7 +28,6 @@
-#ifdef CAN_DRAW_IN_TITLEBAR
-#endif
diff --git a/browser/components/customizableui/moz.build b/browser/components/customizableui/moz.build index f5f5426fa106..fc06489a2d25 100644 --- a/browser/components/customizableui/moz.build +++ b/browser/components/customizableui/moz.build @@ -20,8 +20,5 @@ EXTRA_JS_MODULES += [ 'SearchWidgetTracker.jsm', ] -if CONFIG['MOZ_WIDGET_TOOLKIT'] in ('windows', 'cocoa'): - DEFINES['CAN_DRAW_IN_TITLEBAR'] = 1 - with Files('**'): BUG_COMPONENT = ('Firefox', 'Toolbars and Customization') diff --git a/browser/components/preferences/in-content/findInPage.js b/browser/components/preferences/in-content/findInPage.js index cd969d9994f3..c288a40aa3b9 100644 --- a/browser/components/preferences/in-content/findInPage.js +++ b/browser/components/preferences/in-content/findInPage.js @@ -242,11 +242,12 @@ var gSearchResultsPane = { rootPreferencesChildren = rootPreferencesChildren.filter(el => !el.hidden); } - // Mark all the children to check be visible to bind JS, Access Keys, etc, - // but don't really show them by setting their visibility to hidden in CSS. + // Attach the bindings for all children if they were not already visible. for (let child of rootPreferencesChildren) { - child.classList.add("visually-hidden"); - child.hidden = false; + if (child.hidden) { + child.classList.add("visually-hidden"); + child.hidden = false; + } } let ts = performance.now(); @@ -268,7 +269,6 @@ var gSearchResultsPane = { if (!child.classList.contains("header") && !child.classList.contains("subcategory") && await this.searchWithinNode(child, this.query)) { - child.hidden = false; child.classList.remove("visually-hidden"); // Show the preceding search-header if one exists. @@ -280,7 +280,7 @@ var gSearchResultsPane = { resultsFound = true; } else { - child.hidden = true; + child.classList.add("visually-hidden"); } } @@ -513,7 +513,7 @@ var gSearchResultsPane = { } let searchTooltip = anchorNode.ownerDocument.createElement("span"); let searchTooltipText = anchorNode.ownerDocument.createElement("span"); - searchTooltip.setAttribute("class", "search-tooltip"); + searchTooltip.className = "search-tooltip"; searchTooltipText.textContent = query; searchTooltip.appendChild(searchTooltipText); @@ -535,15 +535,11 @@ var gSearchResultsPane = { }, /** - * Remove all search tooltips that were created. + * Remove all search tooltips. */ removeAllSearchTooltips() { - let searchTooltips = Array.from(document.querySelectorAll(".search-tooltip")); - for (let searchTooltip of searchTooltips) { - searchTooltip.parentElement.classList.remove("search-tooltip-parent"); - searchTooltip.remove(); - } for (let anchorNode of this.listSearchTooltips) { + anchorNode.parentElement.classList.remove("search-tooltip-parent"); anchorNode.tooltipNode.remove(); anchorNode.tooltipNode = null; } diff --git a/browser/components/preferences/in-content/preferences.js b/browser/components/preferences/in-content/preferences.js index 1868c4b86ec4..1cc52be6d122 100644 --- a/browser/components/preferences/in-content/preferences.js +++ b/browser/components/preferences/in-content/preferences.js @@ -192,9 +192,7 @@ function search(aQuery, aAttribute) { let elements = mainPrefPane.children; for (let element of elements) { // If the "data-hidden-from-search" is "true", the - // element will not get considered during search. This - // should only be used when an element is still under - // development and should not be shown for any reason. + // element will not get considered during search. if (element.getAttribute("data-hidden-from-search") != "true" || element.getAttribute("data-subpanel") == "true") { let attributeValue = element.getAttribute(aAttribute); @@ -203,6 +201,9 @@ function search(aQuery, aAttribute) { } else { element.hidden = true; } + } else if (element.getAttribute("data-hidden-from-search") == "true" && + !element.hidden) { + element.hidden = true; } element.classList.remove("visually-hidden"); } diff --git a/browser/components/preferences/in-content/tests/browser.ini b/browser/components/preferences/in-content/tests/browser.ini index 5c57d00f0bb8..835e9a96280d 100644 --- a/browser/components/preferences/in-content/tests/browser.ini +++ b/browser/components/preferences/in-content/tests/browser.ini @@ -16,6 +16,7 @@ skip-if = !updater [browser_bug410900.js] [browser_bug705422.js] [browser_bug731866.js] +[browser_search_no_results_change_category.js] [browser_search_within_preferences_1.js] [browser_search_within_preferences_2.js] [browser_search_within_preferences_command.js] diff --git a/browser/components/preferences/in-content/tests/browser_search_no_results_change_category.js b/browser/components/preferences/in-content/tests/browser_search_no_results_change_category.js new file mode 100644 index 000000000000..d01cb98a3b3d --- /dev/null +++ b/browser/components/preferences/in-content/tests/browser_search_no_results_change_category.js @@ -0,0 +1,28 @@ +"use strict"; + +add_task(async function() { + await SpecialPowers.pushPrefEnv({"set": [["browser.preferences.search", true]]}); +}); + +add_task(async function() { + await openPreferencesViaOpenPreferencesAPI("paneGeneral", {leaveOpen: true}); + + let searchInput = gBrowser.contentDocument.getElementById("searchInput"); + is(searchInput, gBrowser.contentDocument.activeElement.closest("#searchInput"), + "Search input should be focused when visiting preferences"); + let query = "ffff____noresults____ffff"; + let searchCompletedPromise = BrowserTestUtils.waitForEvent( + gBrowser.contentWindow, "PreferencesSearchCompleted", evt => evt.detail == query); + EventUtils.sendString(query); + await searchCompletedPromise; + + let noResultsEl = gBrowser.contentDocument.querySelector("#no-results-message"); + is_element_visible(noResultsEl, "Should be reporting no results for this query"); + + let privacyCategory = gBrowser.contentDocument.querySelector("#category-privacy"); + privacyCategory.click(); + is_element_hidden(noResultsEl, + "Should not be showing the 'no results' message after selecting a category"); + + BrowserTestUtils.removeTab(gBrowser.selectedTab); +}); diff --git a/browser/extensions/formautofill/content/autofillEditForms.js b/browser/extensions/formautofill/content/autofillEditForms.js index 3f5ebf9b9956..4a7b711ff587 100644 --- a/browser/extensions/formautofill/content/autofillEditForms.js +++ b/browser/extensions/formautofill/content/autofillEditForms.js @@ -8,21 +8,18 @@ "use strict"; class EditAutofillForm { - constructor(elements, record) { + constructor(elements) { this._elements = elements; - this._record = record; } /** * Fill the form with a record object. - * @param {object} record + * @param {object} [record = {}] */ - loadInitialValues(record) { - for (let field in record) { - let input = document.getElementById(field); - if (input) { - input.value = record[field]; - } + loadRecord(record = {}) { + for (let field of this._elements.form.elements) { + let value = record[field.id]; + field.value = typeof(value) == "undefined" ? "" : value; } } @@ -32,7 +29,7 @@ class EditAutofillForm { */ buildFormObject() { return Array.from(this._elements.form.elements).reduce((obj, input) => { - if (input.value) { + if (input.value && !input.disabled) { obj[input.id] = input.value; } return obj; @@ -85,9 +82,7 @@ class EditAddress extends EditAutofillForm { * @param {string[]} config.supportedCountries */ constructor(elements, record, config) { - let country = record ? record.country : - config.supportedCountries.find(supported => supported == config.DEFAULT_REGION); - super(elements, record || {country}); + super(elements); Object.assign(this, config); Object.assign(this._elements, { @@ -99,11 +94,21 @@ class EditAddress extends EditAutofillForm { this.populateCountries(); // Need to populate the countries before trying to set the initial country. // Also need to use this._record so it has the default country selected. - this.loadInitialValues(this._record); - this.formatForm(country); + this.loadRecord(record); this.attachEventListeners(); } + loadRecord(record) { + this._record = record; + if (!record) { + record = { + country: this.supportedCountries.find(supported => supported == this.DEFAULT_REGION), + }; + } + super.loadRecord(record); + this.formatForm(record.country); + } + /** * Format the form based on country. The address-level1 and postal-code labels * should be specific to the given country. @@ -176,23 +181,33 @@ class EditCreditCard extends EditAutofillForm { * @param {function} config.isCCNumber Function to determine is a string is a valid CC number. */ constructor(elements, record, config) { - super(elements, record); + super(elements); Object.assign(this, config); Object.assign(this._elements, { ccNumber: this._elements.form.querySelector("#cc-number"), year: this._elements.form.querySelector("#cc-exp-year"), }); - this.generateYears(); - this.loadInitialValues(this._record); + + this.loadRecord(record); this.attachEventListeners(); } + loadRecord(record) { + // _record must be updated before generateYears is called. + this._record = record; + this.generateYears(); + super.loadRecord(record); + } + generateYears() { const count = 11; const currentYear = new Date().getFullYear(); const ccExpYear = this._record && this._record["cc-exp-year"]; + // Clear the list + this._elements.year.textContent = ""; + if (ccExpYear && ccExpYear < currentYear) { this._elements.year.appendChild(new Option(ccExpYear)); } diff --git a/browser/installer/allowed-dupes.mn b/browser/installer/allowed-dupes.mn index 812947234773..2be2f3983cfb 100644 --- a/browser/installer/allowed-dupes.mn +++ b/browser/installer/allowed-dupes.mn @@ -147,3 +147,8 @@ update.locale # Aurora branding browser/chrome/browser/content/branding/icon128.png browser/chrome/devtools/content/framework/dev-edition-promo/dev-edition-logo.png +# Bug 1451016 - Nightly-only PaymentRequest & Form Autofill code sharing. +browser/features/formautofill@mozilla.org/chrome/content/editCreditCard.xhtml +chrome/toolkit/res/payments/formautofill/editCreditCard.xhtml +browser/features/formautofill@mozilla.org/chrome/content/autofillEditForms.js +chrome/toolkit/res/payments/formautofill/autofillEditForms.js diff --git a/browser/themes/osx/moz.build b/browser/themes/osx/moz.build index 9a1c639e6c30..627a84112a3e 100644 --- a/browser/themes/osx/moz.build +++ b/browser/themes/osx/moz.build @@ -8,5 +8,3 @@ DIRS += ['communicator'] JAR_MANIFESTS += ['jar.mn'] -DEFINES['CAN_DRAW_IN_TITLEBAR'] = 1 - diff --git a/browser/themes/shared/tabs.inc.css b/browser/themes/shared/tabs.inc.css index 7857a7ed82ff..3b664fa76a0d 100644 --- a/browser/themes/shared/tabs.inc.css +++ b/browser/themes/shared/tabs.inc.css @@ -652,13 +652,11 @@ margin-inline-start: -1px; } -%ifdef CAN_DRAW_IN_TITLEBAR %ifdef MENUBAR_CAN_AUTOHIDE :root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] + #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::after, %else :root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::after, %endif -%endif /* Show full height tab separators on hover. */ .tabbrowser-tab:hover::after, #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforehovered]::after { diff --git a/browser/themes/windows/moz.build b/browser/themes/windows/moz.build index 3b45f55c80ab..0294edf78c04 100644 --- a/browser/themes/windows/moz.build +++ b/browser/themes/windows/moz.build @@ -8,6 +8,5 @@ DIRS += ['communicator'] JAR_MANIFESTS += ['jar.mn'] -DEFINES['CAN_DRAW_IN_TITLEBAR'] = 1 DEFINES['MENUBAR_CAN_AUTOHIDE'] = 1 diff --git a/devtools/client/inspector/animation/test/browser.ini b/devtools/client/inspector/animation/test/browser.ini index d9c9665b65aa..5b4c668a2319 100644 --- a/devtools/client/inspector/animation/test/browser.ini +++ b/devtools/client/inspector/animation/test/browser.ini @@ -3,6 +3,7 @@ tags = devtools subsuite = devtools support-files = doc_custom_playback_rate.html + doc_frame_script.js doc_multi_easings.html doc_multi_keyframes.html doc_multi_timings.html diff --git a/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js b/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js index 22ebb1c193d4..6aaabd663c08 100644 --- a/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js +++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js @@ -7,47 +7,48 @@ // 1. Existence for animated property list. // 2. Number of animated property item. -const TEST_CASES = [ +const TEST_DATA = [ { - target: ".animated", + targetClass: "animated", expectedNumber: 1, }, { - target: ".compositor-notall", + targetClass: "compositor-notall", expectedNumber: 3, }, ]; add_task(async function() { await addTab(URL_ROOT + "doc_simple_animation.html"); - const { inspector, panel } = await openAnimationInspector(); + await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`)); + const { animationInspector, panel } = await openAnimationInspector(); info("Checking animated property list and items existence at initial"); ok(!panel.querySelector(".animated-property-list"), "The animated-property-list should not be in the DOM at initial"); - for (const testCase of TEST_CASES) { - info(`Checking animated-property-list and items existence at ${ testCase.target }`); - const animatedNode = await getNodeFront(testCase.target, inspector); - await selectNodeAndWaitForAnimations(animatedNode, inspector); + for (const { targetClass, expectedNumber } of TEST_DATA) { + info(`Checking animated-property-list and items existence at ${ targetClass }`); + await clickOnAnimationByTargetSelector(animationInspector, + panel, `.${ targetClass }`); ok(panel.querySelector(".animated-property-list"), - `The animated-property-list should be in the DOM at ${ testCase.target }`); + `The animated-property-list should be in the DOM at ${ targetClass }`); const itemEls = panel.querySelectorAll(".animated-property-list .animated-property-item"); - is(itemEls.length, testCase.expectedNumber, - `The number of animated-property-list should be ${ testCase.expectedNumber } ` - + `at ${ testCase.target }`); + is(itemEls.length, expectedNumber, + `The number of animated-property-list should be ${ expectedNumber } ` + + `at ${ targetClass }`); if (itemEls.length < 2) { continue; } - info(`Checking the background color for ` - + `the animated property item at ${ testCase.target }`); + info("Checking the background color for " + + `the animated property item at ${ targetClass }`); const evenColor = panel.ownerGlobal.getComputedStyle(itemEls[0]).backgroundColor; const oddColor = panel.ownerGlobal.getComputedStyle(itemEls[1]).backgroundColor; isnot(evenColor, oddColor, - "Background color of an even animated property item " - + "should be different from odd"); + "Background color of an even animated property item " + + "should be different from odd"); } }); diff --git a/devtools/client/inspector/animation/test/browser_animation_animated-property-list_unchanged-items.js b/devtools/client/inspector/animation/test/browser_animation_animated-property-list_unchanged-items.js index 2a7de4ff1b65..ecddeeba257e 100644 --- a/devtools/client/inspector/animation/test/browser_animation_animated-property-list_unchanged-items.js +++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-list_unchanged-items.js @@ -23,10 +23,10 @@ const TEST_DATA = [ add_task(async function() { await addTab(URL_ROOT + "doc_simple_animation.html"); - const { inspector, panel } = await openAnimationInspector(); + await removeAnimatedElementsExcept([".longhand"]); + const { panel } = await openAnimationInspector(); info("Checking unchanged animated property item"); - await selectNodeAndWaitForAnimations(".longhand", inspector); const itemEls = panel.querySelectorAll(".animated-property-item"); is(itemEls.length, TEST_DATA.length, `Count of animated property item should be ${ TEST_DATA.length }`); diff --git a/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js b/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js index 7800245e83fb..409112b9d8c1 100644 --- a/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js +++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js @@ -24,29 +24,32 @@ const TEST_DATA = [ add_task(async function() { await addTab(URL_ROOT + "doc_simple_animation.html"); - const { inspector, panel } = await openAnimationInspector(); + await removeAnimatedElementsExcept([".compositor-notall"]); + const { panel } = await openAnimationInspector(); info("Checking animated property name component"); - await selectNodeAndWaitForAnimations(".compositor-notall", inspector); - const animatedPropertyNameEls = panel.querySelectorAll(".animated-property-name"); is(animatedPropertyNameEls.length, TEST_DATA.length, `Number of animated property name elements should be ${ TEST_DATA.length }`); for (const [index, animatedPropertyNameEl] of animatedPropertyNameEls.entries()) { - const testData = TEST_DATA[index]; + const { + property, + isOnCompositor, + isWarning, + } = TEST_DATA[index]; - info(`Checking text content for ${ testData.property }`); + info(`Checking text content for ${ property }`); const spanEl = animatedPropertyNameEl.querySelector("span"); ok(spanEl, - `
element should be in animated-property-name of ${ testData.property }`); - is(spanEl.textContent, testData.property, - `textContent should be ${ testData.property }`); + `
element should be in animated-property-name of ${ property }`); + is(spanEl.textContent, property, + `textContent should be ${ property }`); - info(`Checking compositor sign for ${ testData.property }`); + info(`Checking compositor sign for ${ property }`); - if (testData.isOnCompositor) { + if (isOnCompositor) { ok(animatedPropertyNameEl.classList.contains("compositor"), "animatedPropertyNameEl should has .compositor class"); isnot(getComputedStyle(spanEl, "::before").width, "auto", @@ -58,9 +61,9 @@ add_task(async function() { "width of ::before pseud should be auto"); } - info(`Checking warning for ${ testData.property }`); + info(`Checking warning for ${ property }`); - if (testData.isWarning) { + if (isWarning) { ok(animatedPropertyNameEl.classList.contains("warning"), "animatedPropertyNameEl should has .warning class"); is(getComputedStyle(spanEl).textDecorationStyle, "dotted", diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-detail_close-button.js b/devtools/client/inspector/animation/test/browser_animation_animation-detail_close-button.js index 63c5cb5e2782..f084c98a0722 100644 --- a/devtools/client/inspector/animation/test/browser_animation_animation-detail_close-button.js +++ b/devtools/client/inspector/animation/test/browser_animation_animation-detail_close-button.js @@ -6,7 +6,7 @@ // Test that whether close button in header of animation detail works. add_task(async function() { - await addTab(URL_ROOT + "doc_multi_timings.html"); + await addTab(URL_ROOT + "doc_custom_playback_rate.html"); const { animationInspector, panel } = await openAnimationInspector(); info("Checking close button in header of animation detail"); diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js b/devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js index 697aa6804f28..dbd57598c781 100644 --- a/devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js +++ b/devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js @@ -5,33 +5,34 @@ // Test that whether title in header of animations detail. -const TEST_CASES = [ +const TEST_DATA = [ { - target: ".cssanimation-normal", + targetClass: "cssanimation-normal", expectedTitle: "cssanimation - CSS Animation", }, { - target: ".delay-positive", + targetClass: "delay-positive", expectedTitle: "test-delay-animation - Script Animation", }, { - target: ".easing-step", + targetClass: "easing-step", expectedTitle: "Script Animation", }, ]; add_task(async function() { await addTab(URL_ROOT + "doc_multi_timings.html"); - const { inspector, panel } = await openAnimationInspector(); + await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`)); + const { animationInspector, panel } = await openAnimationInspector(); info("Checking title in each header of animation detail"); - for (const testCase of TEST_CASES) { - info(`Checking title at ${ testCase.target }`); - const animatedNode = await getNodeFront(testCase.target, inspector); - await selectNodeAndWaitForAnimations(animatedNode, inspector); + for (const { targetClass, expectedTitle } of TEST_DATA) { + info(`Checking title at ${ targetClass }`); + await clickOnAnimationByTargetSelector(animationInspector, + panel, `.${ targetClass }`); const titleEl = panel.querySelector(".animation-detail-title"); - is(titleEl.textContent, testCase.expectedTitle, - `Title of "${ testCase.target }" should be "${ testCase.expectedTitle }"`); + is(titleEl.textContent, expectedTitle, + `Title of "${ targetClass }" should be "${ expectedTitle }"`); } }); diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-detail_visibility.js b/devtools/client/inspector/animation/test/browser_animation_animation-detail_visibility.js index 7dac3d573184..fab0be3c8f04 100644 --- a/devtools/client/inspector/animation/test/browser_animation_animation-detail_visibility.js +++ b/devtools/client/inspector/animation/test/browser_animation_animation-detail_visibility.js @@ -5,10 +5,8 @@ // Test that whether animations detail could be displayed if there is selected animation. -requestLongerTimeout(2); - add_task(async function() { - await addTab(URL_ROOT + "doc_multi_timings.html"); + await addTab(URL_ROOT + "doc_custom_playback_rate.html"); const { animationInspector, inspector, panel } = await openAnimationInspector(); info("Checking animation detail visibility if animation was unselected"); @@ -27,7 +25,7 @@ add_task(async function() { "detailEl should be unvisibled after choose html node"); info("Checking animation detail visibility when choose node which has an animation"); - await selectNodeAndWaitForAnimations(".cssanimation-normal", inspector); + await selectNodeAndWaitForAnimations("div", inspector); isnot(win.getComputedStyle(detailEl).display, "none", "detailEl should be visibled after choose .cssanimation-normal node"); }); diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-list.js b/devtools/client/inspector/animation/test/browser_animation_animation-list.js index 290741883461..7ed5ce0da240 100644 --- a/devtools/client/inspector/animation/test/browser_animation_animation-list.js +++ b/devtools/client/inspector/animation/test/browser_animation_animation-list.js @@ -7,12 +7,12 @@ add_task(async function() { await addTab(URL_ROOT + "doc_simple_animation.html"); - + await removeAnimatedElementsExcept([".animated", ".long"]); const { animationInspector, inspector, panel } = await openAnimationInspector(); info("Checking animation list and items existence"); ok(panel.querySelector(".animation-list"), - "The animation-list is in the DOM"); + "The animation-list is in the DOM"); is(panel.querySelectorAll(".animation-list .animation-item").length, animationInspector.state.animations.length, "The number of animations displayed matches the number of animations"); @@ -24,11 +24,10 @@ add_task(async function() { const oddColor = panel.ownerGlobal.getComputedStyle(animationItemEls[1]).backgroundColor; isnot(evenColor, oddColor, - "Background color of an even animation should be different from odd"); + "Background color of an even animation should be different from odd"); info("Checking list and items existence after select a element which has an animation"); - const animatedNode = await getNodeFront(".animated", inspector); - await selectNodeAndWaitForAnimations(animatedNode, inspector); + await selectNodeAndWaitForAnimations(".animated", inspector); is(panel.querySelectorAll(".animation-list .animation-item").length, 1, - "The number of animations displayed should be 1 for .animated element"); + "The number of animations displayed should be 1 for .animated element"); }); diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-target.js b/devtools/client/inspector/animation/test/browser_animation_animation-target.js index 976ddea581a7..c0c7b829a792 100644 --- a/devtools/client/inspector/animation/test/browser_animation_animation-target.js +++ b/devtools/client/inspector/animation/test/browser_animation_animation-target.js @@ -10,18 +10,19 @@ add_task(async function() { await addTab(URL_ROOT + "doc_simple_animation.html"); + await removeAnimatedElementsExcept([".animated", ".long"]); const { animationInspector, inspector, panel } = await openAnimationInspector(); info("Checking the animation target elements existance"); const animationItemEls = panel.querySelectorAll(".animation-list .animation-item"); is(animationItemEls.length, animationInspector.state.animations.length, - "Number of animation target element should be same to number of animations " - + "that displays"); + "Number of animation target element should be same to number of animations " + + "that displays"); for (const animationItemEl of animationItemEls) { const animationTargetEl = animationItemEl.querySelector(".animation-target"); ok(animationTargetEl, - "The animation target element should be in each animation item element"); + "The animation target element should be in each animation item element"); } info("Checking the content of animation target"); @@ -29,7 +30,6 @@ add_task(async function() { const animationTargetEl = panel.querySelector(".animation-list .animation-item .animation-target"); is(animationTargetEl.textContent, "div.ball.animated", - "The target element's content is correct"); - ok(animationTargetEl.querySelector(".objectBox"), - "objectBox is in the page exists"); + "The target element's content is correct"); + ok(animationTargetEl.querySelector(".objectBox"), "objectBox is in the page exists"); }); diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js b/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js index 86df09fe2d24..8032f33c3999 100644 --- a/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js +++ b/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js @@ -18,6 +18,7 @@ const TIME_GRADUATION_MIN_SPACING = 40; add_task(async function() { await addTab(URL_ROOT + "doc_simple_animation.html"); + await removeAnimatedElementsExcept([".end-delay", ".negative-delay"]); const { animationInspector, inspector, panel } = await openAnimationInspector(); const timeScale = new TimeScale(animationInspector.state.animations); @@ -49,7 +50,7 @@ function assertTimelineTickItems(timeScale, listHeaderEl) { const animationTimelineTickListEl = listHeaderEl.querySelector(".animation-timeline-tick-list"); ok(animationTimelineTickListEl, - "The animation timeline tick list element should be in header"); + "The animation timeline tick list element should be in header"); const width = animationTimelineTickListEl.offsetWidth; const animationDuration = timeScale.getDuration(); @@ -60,14 +61,14 @@ function assertTimelineTickItems(timeScale, listHeaderEl) { const timelineTickItemEls = listHeaderEl.querySelectorAll(".animation-timeline-tick-item"); is(timelineTickItemEls.length, expectedTickItem, - "The expected number of timeline ticks were found"); + "The expected number of timeline ticks were found"); info("Make sure graduations are evenly distributed and show the right times"); for (const [index, tickEl] of timelineTickItemEls.entries()) { const left = parseFloat(tickEl.style.left); const expectedPos = index * interval * 100 / animationDuration; is(Math.round(left), Math.round(expectedPos), - `Graduation ${ index } is positioned correctly`); + `Graduation ${ index } is positioned correctly`); // Note that the distancetoRelativeTime and formatTime functions are tested // separately in xpcshell test test_timeScale.js, so we assume that they @@ -75,6 +76,6 @@ function assertTimelineTickItems(timeScale, listHeaderEl) { const formattedTime = timeScale.formatTime(timeScale.distanceToRelativeTime(expectedPos, width)); is(tickEl.textContent, formattedTime, - `Graduation ${ index } has the right text content`); + `Graduation ${ index } has the right text content`); } } diff --git a/devtools/client/inspector/animation/test/browser_animation_current-time-label.js b/devtools/client/inspector/animation/test/browser_animation_current-time-label.js index 9cd574246cd0..c30d683aa7f9 100644 --- a/devtools/client/inspector/animation/test/browser_animation_current-time-label.js +++ b/devtools/client/inspector/animation/test/browser_animation_current-time-label.js @@ -9,14 +9,14 @@ add_task(async function() { await addTab(URL_ROOT + "doc_multi_timings.html"); - const { animationInspector, inspector, panel } = await openAnimationInspector(); + await removeAnimatedElementsExcept([".keyframes-easing-step"]); + const { animationInspector, panel } = await openAnimationInspector(); info("Checking current time label existence"); const labelEl = panel.querySelector(".current-time-label"); ok(labelEl, "current time label should exist"); info("Checking current time label content"); - await selectNodeAndWaitForAnimations(".keyframes-easing-step", inspector); await clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5); assertLabelContent(labelEl, animationInspector.state.animations[0].state.currentTime); await clickOnCurrentTimeScrubberController(animationInspector, panel, 0.2); @@ -50,6 +50,7 @@ function formatStopwatchTime(time) { if (nb < max) { return new Array((max + "").length - (nb + "").length + 1).join("0") + nb; } + return nb; }; diff --git a/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber.js b/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber.js index 005ddbe69c87..026e3d5b21b6 100644 --- a/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber.js +++ b/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber.js @@ -11,7 +11,8 @@ add_task(async function() { await addTab(URL_ROOT + "doc_simple_animation.html"); - const { animationInspector, inspector, panel } = await openAnimationInspector(); + await removeAnimatedElementsExcept([".long"]); + const { animationInspector, panel } = await openAnimationInspector(); info("Checking scrubber controller existence"); const controllerEl = panel.querySelector(".current-time-scrubber-controller"); @@ -22,7 +23,6 @@ add_task(async function() { ok(scrubberEl, "scrubber should exist"); info("Checking scrubber changes current time of animation and the position"); - await selectNodeAndWaitForAnimations(".long", inspector); const duration = animationInspector.state.timeScale.getDuration(); await clickOnCurrentTimeScrubberController(animationInspector, panel, 0); assertAnimationsCurrentTime(animationInspector, 0); diff --git a/devtools/client/inspector/animation/test/browser_animation_empty_on_invalid_nodes.js b/devtools/client/inspector/animation/test/browser_animation_empty_on_invalid_nodes.js index 29a076c2d7c1..6c899943c0b4 100644 --- a/devtools/client/inspector/animation/test/browser_animation_empty_on_invalid_nodes.js +++ b/devtools/client/inspector/animation/test/browser_animation_empty_on_invalid_nodes.js @@ -2,13 +2,11 @@ http://creativecommons.org/publicdomain/zero/1.0/ */ "use strict"; -requestLongerTimeout(2); - // Test that the panel shows no animation data for invalid or not animated nodes add_task(async function() { await addTab(URL_ROOT + "doc_simple_animation.html"); - + await removeAnimatedElementsExcept([".animated", ".long", ".still"]); const { inspector, panel } = await openAnimationInspector(); info("Checking animation list and error message existence for a still node"); @@ -21,14 +19,14 @@ add_task(async function() { ANIMATION_L10N.getStr("panel.noAnimation"), "The correct error message is displayed"); ok(!panel.querySelector(".animation-list"), - "Element which has animations class should not exist for a still node"); + "Element which has animations class should not exist for a still node"); info("Checking animation list and error message existence for a text node"); const commentNode = await inspector.walker.previousSibling(stillNode); await selectNodeAndWaitForAnimations(commentNode, inspector); ok(panel.querySelector(".animation-error-message"), - "Element which has animation-error-message class should exist for a text node"); + "Element which has animation-error-message class should exist for a text node"); ok(!panel.querySelector(".animation-list"), - "Element which has animations class should not exist for a text node"); + "Element which has animations class should not exist for a text node"); }); diff --git a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path.js b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path.js index 7d4edad5c13d..8022c4961bc6 100644 --- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path.js +++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path.js @@ -9,11 +9,9 @@ // * fill color by animation type // * stop color if the animation type is color -requestLongerTimeout(2); - const TEST_DATA = [ { - targetName: "multi-types", + targetClass: "multi-types", properties: [ { name: "background-color", @@ -87,7 +85,7 @@ const TEST_DATA = [ ], }, { - targetName: "multi-types-reverse", + targetClass: "multi-types-reverse", properties: [ { name: "background-color", @@ -161,7 +159,7 @@ const TEST_DATA = [ ], }, { - targetName: "middle-keyframe", + targetClass: "middle-keyframe", properties: [ { name: "background-color", @@ -249,7 +247,7 @@ const TEST_DATA = [ ], }, { - targetName: "steps-keyframe", + targetClass: "steps-keyframe", properties: [ { name: "background-color", @@ -335,7 +333,7 @@ const TEST_DATA = [ ], }, { - targetName: "steps-effect", + targetClass: "steps-effect", properties: [ { name: "opacity", @@ -351,7 +349,7 @@ const TEST_DATA = [ ], }, { - targetName: "frames-keyframe", + targetClass: "frames-keyframe", properties: [ { name: "opacity", @@ -372,7 +370,7 @@ const TEST_DATA = [ ], }, { - targetName: "narrow-offsets", + targetClass: "narrow-offsets", properties: [ { name: "opacity", @@ -391,7 +389,7 @@ const TEST_DATA = [ ], }, { - targetName: "duplicate-offsets", + targetClass: "duplicate-offsets", properties: [ { name: "opacity", @@ -412,12 +410,12 @@ const TEST_DATA = [ add_task(async function() { await addTab(URL_ROOT + "doc_multi_keyframes.html"); + const { animationInspector, panel } = await openAnimationInspector(); - const { inspector, panel } = await openAnimationInspector(); - - for (const { properties, targetName } of TEST_DATA) { - info(`Checking keyframes graph for ${ targetName }`); - await selectNodeAndWaitForAnimations(`#${ targetName }`, inspector); + for (const { properties, targetClass } of TEST_DATA) { + info(`Checking keyframes graph for ${ targetClass }`); + await clickOnAnimationByTargetSelector(animationInspector, + panel, `.${ targetClass }`); for (const property of properties) { const { @@ -427,7 +425,7 @@ add_task(async function() { expectedStopColors, } = property; - const testTarget = `${ name } in ${ targetName }`; + const testTarget = `${ name } in ${ targetClass }`; info(`Checking keyframes graph for ${ testTarget }`); info(`Checking keyframes graph path existence for ${ testTarget }`); const keyframesGraphPathEl = panel.querySelector(`.${ name }`); diff --git a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js index 2d6d1b43e50b..02719bb91025 100644 --- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js +++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js @@ -10,7 +10,7 @@ const TEST_DATA = [ { - targetName: "no-easing", + targetClass: "no-easing", properties: [ { name: "opacity", @@ -28,7 +28,7 @@ const TEST_DATA = [ ], }, { - targetName: "effect-easing", + targetClass: "effect-easing", properties: [ { name: "opacity", @@ -46,7 +46,7 @@ const TEST_DATA = [ ], }, { - targetName: "keyframe-easing", + targetClass: "keyframe-easing", properties: [ { name: "opacity", @@ -66,7 +66,7 @@ const TEST_DATA = [ ], }, { - targetName: "both-easing", + targetClass: "both-easing", properties: [ { name: "margin-left", @@ -99,7 +99,7 @@ const TEST_DATA = [ ], }, { - targetName: "narrow-keyframes", + targetClass: "narrow-keyframes", properties: [ { name: "opacity", @@ -130,7 +130,7 @@ const TEST_DATA = [ ], }, { - targetName: "duplicate-keyframes", + targetClass: "duplicate-keyframes", properties: [ { name: "opacity", @@ -162,7 +162,7 @@ const TEST_DATA = [ ], }, { - targetName: "color-keyframes", + targetClass: "color-keyframes", properties: [ { name: "color", @@ -191,26 +191,22 @@ const TEST_DATA = [ add_task(async function() { await addTab(URL_ROOT + "doc_multi_easings.html"); + await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`)); + const { animationInspector, panel } = await openAnimationInspector(); - const { inspector, panel } = await openAnimationInspector(); + for (const { properties, targetClass } of TEST_DATA) { + info(`Checking keyframes graph for ${ targetClass }`); + await clickOnAnimationByTargetSelector(animationInspector, + panel, `.${ targetClass }`); - for (const { properties, targetName } of TEST_DATA) { - info(`Checking keyframes graph for ${ targetName }`); - await selectNodeAndWaitForAnimations(`#${ targetName }`, inspector); - - for (const property of properties) { - const { - name, - expectedHints, - } = property; - - const testTarget = `${ name } in ${ targetName }`; + for (const { name, expectedHints } of properties) { + const testTarget = `${ name } in ${ targetClass }`; info(`Checking easing hint for ${ testTarget }`); info(`Checking easing hint existence for ${ testTarget }`); const hintEls = panel.querySelectorAll(`.${ name } .hint`); is(hintEls.length, expectedHints.length, - `Count of easing hint elements of ${ testTarget } ` - + `should be ${ expectedHints.length }`); + `Count of easing hint elements of ${ testTarget } ` + + `should be ${ expectedHints.length }`); for (let i = 0; i < expectedHints.length; i++) { const hintTarget = `hint[${ i }] of ${ testTarget }`; @@ -248,12 +244,12 @@ add_task(async function() { // Mouse out once from pathEl. EventUtils.synthesizeMouse(interactionEl, -1, -1, { type: "mouseout" }, win); is(win.getComputedStyle(interactionEl).strokeOpacity, 0, - `stroke-opacity of hintEl for ${ hintTarget } should be 0` - + " while mouse is out from the element"); + `stroke-opacity of hintEl for ${ hintTarget } should be 0` + + " while mouse is out from the element"); // Mouse over the pathEl. ok(isStrokeChangedByMouseOver(interactionEl, win), - `stroke-opacity of hintEl for ${ hintTarget } should be 1` - + " while mouse is over the element"); + `stroke-opacity of hintEl for ${ hintTarget } should be 1` + + " while mouse is over the element"); } } } diff --git a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js index 126974654043..7f1198fb0039 100644 --- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js +++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js @@ -10,7 +10,7 @@ const TEST_DATA = [ { - targetName: "multi-types", + targetClass: "multi-types", properties: [ { name: "background-color", @@ -106,7 +106,7 @@ const TEST_DATA = [ ], }, { - targetName: "narrow-offsets", + targetClass: "narrow-offsets", properties: [ { name: "opacity", @@ -135,26 +135,22 @@ const TEST_DATA = [ add_task(async function() { await addTab(URL_ROOT + "doc_multi_keyframes.html"); + await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`)); + const { animationInspector, panel } = await openAnimationInspector(); - const { inspector, panel } = await openAnimationInspector(); + for (const { properties, targetClass } of TEST_DATA) { + info(`Checking keyframe marker for ${ targetClass }`); + await clickOnAnimationByTargetSelector(animationInspector, + panel, `.${ targetClass }`); - for (const { properties, targetName } of TEST_DATA) { - info(`Checking keyframe marker for ${ targetName }`); - await selectNodeAndWaitForAnimations(`#${ targetName }`, inspector); - - for (const property of properties) { - const { - name, - expectedValues, - } = property; - - const testTarget = `${ name } in ${ targetName }`; + for (const { name, expectedValues } of properties) { + const testTarget = `${ name } in ${ targetClass }`; info(`Checking keyframe marker for ${ testTarget }`); info(`Checking keyframe marker existence for ${ testTarget }`); const markerEls = panel.querySelectorAll(`.${ name } .keyframe-marker-item`); is(markerEls.length, expectedValues.length, - `Count of keyframe marker elements of ${ testTarget } ` - + `should be ${ expectedValues.length }`); + `Count of keyframe marker elements of ${ testTarget } ` + + `should be ${ expectedValues.length }`); for (let i = 0; i < expectedValues.length; i++) { const hintTarget = `.keyframe-marker-item[${ i }] of ${ testTarget }`; @@ -165,11 +161,11 @@ add_task(async function() { info(`Checking title in ${ hintTarget }`); is(markerEl.getAttribute("title"), expectedValue.title, - `title in ${ hintTarget } should be ${ expectedValue.title }`); + `title in ${ hintTarget } should be ${ expectedValue.title }`); info(`Checking left style in ${ hintTarget }`); is(markerEl.style.left, expectedValue.left, - `left in ${ hintTarget } should be ${ expectedValue.left }`); + `left in ${ hintTarget } should be ${ expectedValue.left }`); } } } diff --git a/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js b/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js index 43dad0b07435..1c5dfc360c7d 100644 --- a/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js +++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js @@ -9,46 +9,46 @@ http://creativecommons.org/publicdomain/zero/1.0/ */ // * progress bar position after changing playback rate // * progress bar position when select another animation -requestLongerTimeout(5); +requestLongerTimeout(2); -const POSITION_TESTCASES = [ +const TEST_DATA = [ { - targetClassName: "cssanimation-linear", + targetClass: "cssanimation-linear", scrubberPositions: [0, 0.25, 0.5, 0.75, 1], expectedPositions: [0, 0.25, 0.5, 0.75, 0], }, { - targetClassName: "easing-step", + targetClass: "easing-step", scrubberPositions: [0, 0.49, 0.5, 0.99], expectedPositions: [0, 0, 0.5, 0.5], }, { - targetClassName: "delay-positive", + targetClass: "delay-positive", scrubberPositions: [0, 0.33, 0.5], expectedPositions: [0, 0, 0.25], }, { - targetClassName: "delay-negative", + targetClass: "delay-negative", scrubberPositions: [0, 0.49, 0.5, 0.75], expectedPositions: [0, 0, 0.5, 0.75], }, { - targetClassName: "enddelay-positive", + targetClass: "enddelay-positive", scrubberPositions: [0, 0.66, 0.67, 0.99], expectedPositions: [0, 0.99, 0, 0], }, { - targetClassName: "enddelay-negative", + targetClass: "enddelay-negative", scrubberPositions: [0, 0.49, 0.5, 0.99], expectedPositions: [0, 0.49, 0, 0], }, { - targetClassName: "direction-reverse-with-iterations-infinity", + targetClass: "direction-reverse-with-iterations-infinity", scrubberPositions: [0, 0.25, 0.5, 0.75, 1], expectedPositions: [1, 0.75, 0.5, 0.25, 1], }, { - targetClassName: "fill-both-width-delay-iterationstart", + targetClass: "fill-both-width-delay-iterationstart", scrubberPositions: [0, 0.33, 0.66, 0.833, 1], expectedPositions: [0.5, 0.5, 0.99, 0.25, 0.5], }, @@ -56,13 +56,20 @@ const POSITION_TESTCASES = [ add_task(async function() { await addTab(URL_ROOT + "doc_multi_timings.html"); + await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`)); const { animationInspector, inspector, panel } = await openAnimationInspector(); info("Checking progress bar position in multi effect timings"); - for (const testcase of POSITION_TESTCASES) { - info(`Checking progress bar position for ${ testcase.targetClassName }`); - await selectNodeAndWaitForAnimations(`.${ testcase.targetClassName }`, inspector); + for (const testdata of TEST_DATA) { + const { + targetClass, + scrubberPositions, + expectedPositions, + } = testdata; + + info(`Checking progress bar position for ${ targetClass }`); + await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector); info("Checking progress bar existence"); const areaEl = panel.querySelector(".keyframes-progress-bar-area"); @@ -70,9 +77,6 @@ add_task(async function() { const barEl = areaEl.querySelector(".keyframes-progress-bar"); ok(barEl, "progress bar should exist"); - const scrubberPositions = testcase.scrubberPositions; - const expectedPositions = testcase.expectedPositions; - for (let i = 0; i < scrubberPositions.length; i++) { info(`Scrubber position is ${ scrubberPositions[i] }`); await clickOnCurrentTimeScrubberController(animationInspector, diff --git a/devtools/client/inspector/animation/test/browser_animation_logic_auto-stop.js b/devtools/client/inspector/animation/test/browser_animation_logic_auto-stop.js index e46162aa0bce..2133c875c8f1 100644 --- a/devtools/client/inspector/animation/test/browser_animation_logic_auto-stop.js +++ b/devtools/client/inspector/animation/test/browser_animation_logic_auto-stop.js @@ -12,6 +12,7 @@ add_task(async function() { await addTab(URL_ROOT + "doc_simple_animation.html"); + await removeAnimatedElementsExcept([".compositor-all", ".long"]); const { animationInspector, inspector, panel } = await openAnimationInspector(); info("Checking state after end of animation duration"); diff --git a/devtools/client/inspector/animation/test/browser_animation_logic_avoid-updating-during-hiding.js b/devtools/client/inspector/animation/test/browser_animation_logic_avoid-updating-during-hiding.js index 17d16a4717eb..d5bcf923582b 100644 --- a/devtools/client/inspector/animation/test/browser_animation_logic_avoid-updating-during-hiding.js +++ b/devtools/client/inspector/animation/test/browser_animation_logic_avoid-updating-during-hiding.js @@ -37,11 +37,11 @@ add_task(async function() { "Should not update after selecting another tool"); await selectAnimationInspector(inspector); is(animationInspector.state.animations.length, 1, - "Should update after selecting animation inspector"); + "Should update after selecting animation inspector"); await assertCurrentTimeUpdated(animationInspector, panel, true); await inspector.toolbox.selectTool("webconsole"); is(animationInspector.state.animations.length, 1, - "Should not update after selecting another tool again"); + "Should not update after selecting another tool again"); await assertCurrentTimeUpdated(animationInspector, panel, false); }); diff --git a/devtools/client/inspector/animation/test/browser_animation_logic_mutations.js b/devtools/client/inspector/animation/test/browser_animation_logic_mutations.js index df7758d8432e..87d302161d29 100644 --- a/devtools/client/inspector/animation/test/browser_animation_logic_mutations.js +++ b/devtools/client/inspector/animation/test/browser_animation_logic_mutations.js @@ -10,6 +10,8 @@ add_task(async function() { await addTab(URL_ROOT + "doc_simple_animation.html"); + await removeAnimatedElementsExcept( + [".compositor-all", ".compositor-notall", ".no-compositor", ".still"]); const { animationInspector, inspector, panel } = await openAnimationInspector(); info("Checking the mutation for add an animation"); @@ -20,12 +22,12 @@ add_task(async function() { info("Checking added animation existence even the animation name is duplicated"); is(getAnimationNameCount(panel, "no-compositor"), 2, - "Count of animation should be plus one to original count"); + "Count of animation should be plus one to original count"); info("Checking the mutation for remove an animation"); await setClassAttribute(animationInspector, ".compositor-notall", "ball still"); is(animationInspector.state.animations.length, originalAnimationCount, - "Count of animation should be same to original count since we remove an animation"); + "Count of animation should be same to original count since we remove an animation"); info("Checking the mutation for modify an animation"); await selectNodeAndWaitForAnimations(".compositor-all", inspector); @@ -33,8 +35,8 @@ add_task(async function() { await setStyle(animationInspector, ".compositor-all", "animationIterationCount", 1); const summaryGraphPathEl = getSummaryGraphPathElement(panel, "compositor-all"); is(summaryGraphPathEl.viewBox.baseVal.width, 100000, - "Width of summary graph path should be 100000 " + - "after modifing the duration and iteration count"); + "Width of summary graph path should be 100000 " + + "after modifing the duration and iteration count"); await setStyle(animationInspector, ".compositor-all", "animationDelay", "100s"); is(summaryGraphPathEl.viewBox.baseVal.width, 200000, "Width of summary graph path should be 200000 after modifing the delay"); diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_animation-name.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_animation-name.js index fa32f902e467..2b3903153844 100644 --- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_animation-name.js +++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_animation-name.js @@ -7,53 +7,48 @@ // * element existance // * name text -const TEST_CASES = [ +const TEST_DATA = [ { - targetClassName: "cssanimation-normal", + targetClass: "cssanimation-normal", expectedLabel: "cssanimation", }, { - targetClassName: "cssanimation-linear", + targetClass: "cssanimation-linear", expectedLabel: "cssanimation", }, { - targetClassName: "delay-positive", + targetClass: "delay-positive", expectedLabel: "test-delay-animation", }, { - targetClassName: "delay-negative", + targetClass: "delay-negative", expectedLabel: "test-negative-delay-animation", }, { - targetClassName: "easing-step", + targetClass: "easing-step", }, ]; add_task(async function() { await addTab(URL_ROOT + "doc_multi_timings.html"); - + await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`)); const { panel } = await openAnimationInspector(); - for (const testCase of TEST_CASES) { - const { - expectedLabel, - targetClassName, - } = testCase; - + for (const { targetClass, expectedLabel } of TEST_DATA) { const animationItemEl = - findAnimationItemElementsByTargetClassName(panel, targetClassName); + findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`); - info(`Checking animation name element existance for ${ targetClassName }`); + info(`Checking animation name element existance for ${ targetClass }`); const animationNameEl = animationItemEl.querySelector(".animation-name"); if (expectedLabel) { ok(animationNameEl, - "The animation name element should be in animation item element"); + "The animation name element should be in animation item element"); is(animationNameEl.textContent, expectedLabel, - `The animation name should be ${ expectedLabel }`); + `The animation name should be ${ expectedLabel }`); } else { ok(!animationNameEl, - "The animation name element should not be in animation item element"); + "The animation name element should not be in animation item element"); } } }); diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_compositor.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_compositor.js index af4d890e95f4..4af8a273d3e0 100644 --- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_compositor.js +++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_compositor.js @@ -8,7 +8,8 @@ add_task(async function() { await addTab(URL_ROOT + "doc_simple_animation.html"); - + await removeAnimatedElementsExcept( + [".compositor-all", ".compositor-notall", ".no-compositor"]); const { inspector, panel } = await openAnimationInspector(); info("Select a test node we know has an animation running on the compositor"); @@ -16,7 +17,7 @@ add_task(async function() { const summaryGraphEl = panel.querySelector(".animation-summary-graph"); ok(summaryGraphEl.classList.contains("compositor"), - "The element has the compositor css class"); + "The element has the compositor css class"); ok(hasTooltip(summaryGraphEl, ANIMATION_L10N.getStr("player.allPropertiesOnCompositorTooltip")), "The element has the right tooltip content"); @@ -25,7 +26,7 @@ add_task(async function() { await selectNodeAndWaitForAnimations(".no-compositor", inspector); ok(!summaryGraphEl.classList.contains("compositor"), - "The element does not have the compositor css class"); + "The element does not have the compositor css class"); ok(!hasTooltip(summaryGraphEl, ANIMATION_L10N.getStr("player.allPropertiesOnCompositorTooltip")), "The element does not have oncompositor tooltip content"); @@ -37,7 +38,7 @@ add_task(async function() { await selectNodeAndWaitForAnimations(".compositor-notall", inspector); ok(summaryGraphEl.classList.contains("compositor"), - "The element has the compositor css class"); + "The element has the compositor css class"); ok(hasTooltip(summaryGraphEl, ANIMATION_L10N.getStr("player.somePropertiesOnCompositorTooltip")), "The element has the right tooltip content"); diff --git 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 index caa844f027e8..f1d252a17ae2 100644 --- 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 @@ -10,9 +10,9 @@ // * fill: path // * endDelay: path -const TEST_CASES = [ +const TEST_DATA = [ { - targetClassName: "cssanimation-normal", + targetClass: "cssanimation-normal", expectedIterationPathList: [ [ { x: 0, y: 0 }, @@ -25,7 +25,7 @@ const TEST_CASES = [ ], }, { - targetClassName: "cssanimation-linear", + targetClass: "cssanimation-linear", expectedIterationPathList: [ [ { x: 0, y: 0 }, @@ -38,7 +38,7 @@ const TEST_CASES = [ ], }, { - targetClassName: "delay-positive", + targetClass: "delay-positive", expectedDelayPath: [ { x: 0, y: 0 }, { x: 500000, y: 0 }, @@ -55,7 +55,7 @@ const TEST_CASES = [ ], }, { - targetClassName: "delay-negative", + targetClass: "delay-negative", expectedIterationPathList: [ [ { x: 0, y: 0 }, @@ -67,7 +67,7 @@ const TEST_CASES = [ ], }, { - targetClassName: "easing-step", + targetClass: "easing-step", expectedIterationPathList: [ [ { x: 0, y: 0 }, @@ -79,7 +79,7 @@ const TEST_CASES = [ ], }, { - targetClassName: "enddelay-positive", + targetClass: "enddelay-positive", expectedIterationPathList: [ [ { x: 0, y: 0 }, @@ -96,7 +96,7 @@ const TEST_CASES = [ ], }, { - targetClassName: "enddelay-negative", + targetClass: "enddelay-negative", expectedIterationPathList: [ [ { x: 0, y: 0 }, @@ -107,7 +107,7 @@ const TEST_CASES = [ ], }, { - targetClassName: "enddelay-with-fill-forwards", + targetClass: "enddelay-with-fill-forwards", expectedIterationPathList: [ [ { x: 0, y: 0 }, @@ -132,7 +132,7 @@ const TEST_CASES = [ ], }, { - targetClassName: "enddelay-with-iterations-infinity", + targetClass: "enddelay-with-iterations-infinity", expectedIterationPathList: [ [ { x: 0, y: 0 }, @@ -154,7 +154,7 @@ const TEST_CASES = [ isInfinity: true, }, { - targetClassName: "direction-alternate-with-iterations-infinity", + targetClass: "direction-alternate-with-iterations-infinity", expectedIterationPathList: [ [ { x: 0, y: 0 }, @@ -176,7 +176,7 @@ const TEST_CASES = [ isInfinity: true, }, { - targetClassName: "direction-alternate-reverse-with-iterations-infinity", + targetClass: "direction-alternate-reverse-with-iterations-infinity", expectedIterationPathList: [ [ { x: 0, y: 0 }, @@ -198,7 +198,7 @@ const TEST_CASES = [ isInfinity: true, }, { - targetClassName: "direction-reverse-with-iterations-infinity", + targetClass: "direction-reverse-with-iterations-infinity", expectedIterationPathList: [ [ { x: 0, y: 0 }, @@ -220,7 +220,7 @@ const TEST_CASES = [ isInfinity: true, }, { - targetClassName: "fill-backwards", + targetClass: "fill-backwards", expectedIterationPathList: [ [ { x: 0, y: 0 }, @@ -233,7 +233,7 @@ const TEST_CASES = [ ], }, { - targetClassName: "fill-backwards-with-delay-iterationstart", + targetClass: "fill-backwards-with-delay-iterationstart", expectedDelayPath: [ { x: 0, y: 0 }, { x: 0, y: 50 }, @@ -256,7 +256,7 @@ const TEST_CASES = [ ], }, { - targetClassName: "fill-both", + targetClass: "fill-both", expectedIterationPathList: [ [ { x: 0, y: 0 }, @@ -275,7 +275,7 @@ const TEST_CASES = [ ], }, { - targetClassName: "fill-both-width-delay-iterationstart", + targetClass: "fill-both-width-delay-iterationstart", expectedDelayPath: [ { x: 0, y: 0 }, { x: 0, y: 50 }, @@ -302,7 +302,7 @@ const TEST_CASES = [ ], }, { - targetClassName: "fill-forwards", + targetClass: "fill-forwards", expectedIterationPathList: [ [ { x: 0, y: 0 }, @@ -321,7 +321,7 @@ const TEST_CASES = [ ], }, { - targetClassName: "iterationstart", + targetClass: "iterationstart", expectedIterationPathList: [ [ { x: 0, y: 50 }, @@ -338,7 +338,7 @@ const TEST_CASES = [ ], }, { - targetClassName: "no-compositor", + targetClass: "no-compositor", expectedIterationPathList: [ [ { x: 0, y: 0 }, @@ -351,7 +351,7 @@ const TEST_CASES = [ ], }, { - targetClassName: "keyframes-easing-step", + targetClass: "keyframes-easing-step", expectedIterationPathList: [ [ { x: 0, y: 0 }, @@ -363,7 +363,7 @@ const TEST_CASES = [ ], }, { - targetClassName: "narrow-keyframes", + targetClass: "narrow-keyframes", expectedIterationPathList: [ [ { x: 0, y: 0 }, @@ -377,7 +377,7 @@ const TEST_CASES = [ ], }, { - targetClassName: "duplicate-offsets", + targetClass: "duplicate-offsets", expectedIterationPathList: [ [ { x: 0, y: 0 }, @@ -391,29 +391,28 @@ const TEST_CASES = [ add_task(async function() { await addTab(URL_ROOT + "doc_multi_timings.html"); - const { panel } = await openAnimationInspector(); - for (const testCase of TEST_CASES) { + for (const testData of TEST_DATA) { const { expectedDelayPath, expectedEndDelayPath, expectedForwardsPath, expectedIterationPathList, isInfinity, - targetClassName, - } = testCase; + targetClass, + } = testData; const animationItemEl = - findAnimationItemElementsByTargetClassName(panel, targetClassName); + findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`); - info(`Checking computed timing path existance for ${ targetClassName }`); + info(`Checking computed timing path existance for ${ targetClass }`); const computedTimingPathEl = animationItemEl.querySelector(".animation-computed-timing-path"); ok(computedTimingPathEl, "The computed timing path element should be in each animation item element"); - info(`Checking delay path for ${ targetClassName }`); + info(`Checking delay path for ${ targetClass }`); const delayPathEl = computedTimingPathEl.querySelector(".animation-delay-path"); if (expectedDelayPath) { @@ -423,7 +422,7 @@ add_task(async function() { ok(!delayPathEl, "delay path should not be existance"); } - info(`Checking iteration path list for ${ targetClassName }`); + info(`Checking iteration path list for ${ targetClass }`); const iterationPathEls = computedTimingPathEl.querySelectorAll(".animation-iteration-path"); is(iterationPathEls.length, expectedIterationPathList.length, @@ -432,7 +431,7 @@ add_task(async function() { for (const [j, iterationPathEl] of iterationPathEls.entries()) { assertPathSegments(iterationPathEl, true, expectedIterationPathList[j]); - info(`Checking infinity ${ targetClassName }`); + info(`Checking infinity ${ targetClass }`); if (isInfinity && j >= 1) { ok(iterationPathEl.classList.contains("infinity"), "iteration path should have 'infinity' class"); @@ -442,7 +441,7 @@ add_task(async function() { } } - info(`Checking endDelay path for ${ targetClassName }`); + info(`Checking endDelay path for ${ targetClass }`); const endDelayPathEl = computedTimingPathEl.querySelector(".animation-enddelay-path"); if (expectedEndDelayPath) { @@ -452,7 +451,7 @@ add_task(async function() { ok(!endDelayPathEl, "endDelay path should not be existance"); } - info(`Checking forwards fill path for ${ targetClassName }`); + info(`Checking forwards fill path for ${ targetClass }`); const forwardsPathEl = computedTimingPathEl.querySelector(".animation-fill-forwards-path"); diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_different-timescale.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_different-timescale.js index 8885d5487c0c..a5fd85748529 100644 --- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_different-timescale.js +++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_different-timescale.js @@ -7,6 +7,7 @@ add_task(async function() { await addTab(URL_ROOT + "doc_simple_animation.html"); + await removeAnimatedElementsExcept([".animated", ".end-delay"]); const { inspector, panel } = await openAnimationInspector(); info("Checking the path for different time scale"); @@ -14,7 +15,7 @@ add_task(async function() { const pathStringA = panel.querySelector(".animation-iteration-path").getAttribute("d"); info("Select animation which has different time scale from no-compositor"); - await selectNodeAndWaitForAnimations("#endDelayed", inspector); + await selectNodeAndWaitForAnimations(".end-delay", inspector); info("Select no-compositor again"); await selectNodeAndWaitForAnimations(".animated", inspector); diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign.js index 975cb7555b35..0922151dfb88 100644 --- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign.js +++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign.js @@ -9,16 +9,16 @@ // * width // * additinal class -const TEST_CASES = [ +const TEST_DATA = [ { - targetClassName: "delay-positive", + targetClass: "delay-positive", expectedResult: { left: "25%", width: "25%", }, }, { - targetClassName: "delay-negative", + targetClass: "delay-negative", expectedResult: { additionalClass: "negative", left: "0%", @@ -26,7 +26,7 @@ const TEST_CASES = [ }, }, { - targetClassName: "fill-backwards-with-delay-iterationstart", + targetClass: "fill-backwards-with-delay-iterationstart", expectedResult: { additionalClass: "fill", left: "25%", @@ -34,10 +34,10 @@ const TEST_CASES = [ }, }, { - targetClassName: "fill-both", + targetClass: "fill-both", }, { - targetClassName: "fill-both-width-delay-iterationstart", + targetClass: "fill-both-width-delay-iterationstart", expectedResult: { additionalClass: "fill", left: "25%", @@ -45,38 +45,33 @@ const TEST_CASES = [ }, }, { - targetClassName: "keyframes-easing-step", + targetClass: "keyframes-easing-step", }, ]; add_task(async function() { await addTab(URL_ROOT + "doc_multi_timings.html"); - + await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`)); const { panel } = await openAnimationInspector(); - for (const testCase of TEST_CASES) { - const { - expectedResult, - targetClassName, - } = testCase; - + for (const { targetClass, expectedResult } of TEST_DATA) { const animationItemEl = - findAnimationItemElementsByTargetClassName(panel, targetClassName); + findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`); - info(`Checking delay sign existance for ${ targetClassName }`); + info(`Checking delay sign existance for ${ targetClass }`); const delaySignEl = animationItemEl.querySelector(".animation-delay-sign"); if (expectedResult) { ok(delaySignEl, "The delay sign element should be in animation item element"); is(delaySignEl.style.left, expectedResult.left, - `Left position should be ${ expectedResult.left }`); + `Left position should be ${ expectedResult.left }`); is(delaySignEl.style.width, expectedResult.width, - `Width should be ${ expectedResult.width }`); + `Width should be ${ expectedResult.width }`); if (expectedResult.additionalClass) { ok(delaySignEl.classList.contains(expectedResult.additionalClass), - `delay sign element should have ${ expectedResult.additionalClass } class`); + `delay sign element should have ${ expectedResult.additionalClass } class`); } else { ok(!delaySignEl.classList.contains(expectedResult.additionalClass), "delay sign element should not have " + diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_effect-timing-path.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_effect-timing-path.js index 0bc3edded76a..52af1f47b408 100644 --- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_effect-timing-path.js +++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_effect-timing-path.js @@ -7,15 +7,15 @@ // * element existance // * path -const TEST_CASES = [ +const TEST_DATA = [ { - targetClassName: "cssanimation-linear", + targetClass: "cssanimation-linear", }, { - targetClassName: "delay-negative", + targetClass: "delay-negative", }, { - targetClassName: "easing-step", + targetClass: "easing-step", expectedPath: [ { x: 0, y: 0 }, { x: 499999, y: 0 }, @@ -25,36 +25,31 @@ const TEST_CASES = [ ], }, { - targetClassName: "keyframes-easing-step", + targetClass: "keyframes-easing-step", }, ]; add_task(async function() { await addTab(URL_ROOT + "doc_multi_timings.html"); - + await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`)); const { panel } = await openAnimationInspector(); - for (const testCase of TEST_CASES) { - const { - expectedPath, - targetClassName, - } = testCase; - + for (const { targetClass, expectedPath } of TEST_DATA) { const animationItemEl = - findAnimationItemElementsByTargetClassName(panel, targetClassName); + findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`); - info(`Checking effect timing path existance for ${ targetClassName }`); + info(`Checking effect timing path existance for ${ targetClass }`); const effectTimingPathEl = animationItemEl.querySelector(".animation-effect-timing-path"); if (expectedPath) { ok(effectTimingPathEl, - "The effect timing path element should be in animation item element"); + "The effect timing path element should be in animation item element"); const pathEl = effectTimingPathEl.querySelector(".animation-iteration-path"); assertPathSegments(pathEl, false, expectedPath); } else { ok(!effectTimingPathEl, - "The effect timing path element should not be in animation item element"); + "The effect timing path element should not be in animation item element"); } } }); diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign.js index 20a06d3da260..5dbc53f39b4e 100644 --- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign.js +++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign.js @@ -9,16 +9,16 @@ // * width // * additinal class -const TEST_CASES = [ +const TEST_DATA = [ { - targetClassName: "enddelay-positive", + targetClass: "enddelay-positive", expectedResult: { left: "75%", width: "25%", }, }, { - targetClassName: "enddelay-negative", + targetClass: "enddelay-negative", expectedResult: { additionalClass: "negative", left: "50%", @@ -26,7 +26,7 @@ const TEST_CASES = [ }, }, { - targetClassName: "enddelay-with-fill-forwards", + targetClass: "enddelay-with-fill-forwards", expectedResult: { additionalClass: "fill", left: "75%", @@ -34,41 +34,36 @@ const TEST_CASES = [ }, }, { - targetClassName: "enddelay-with-iterations-infinity", + targetClass: "enddelay-with-iterations-infinity", }, { - targetClassName: "keyframes-easing-step", + targetClass: "delay-negative", }, ]; add_task(async function() { await addTab(URL_ROOT + "doc_multi_timings.html"); - + await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`)); const { panel } = await openAnimationInspector(); - for (const testCase of TEST_CASES) { - const { - expectedResult, - targetClassName, - } = testCase; - + for (const { targetClass, expectedResult } of TEST_DATA) { const animationItemEl = - findAnimationItemElementsByTargetClassName(panel, targetClassName); + findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`); - info(`Checking endDelay sign existance for ${ targetClassName }`); + info(`Checking endDelay sign existance for ${ targetClass }`); const endDelaySignEl = animationItemEl.querySelector(".animation-end-delay-sign"); if (expectedResult) { ok(endDelaySignEl, "The endDelay sign element should be in animation item element"); is(endDelaySignEl.style.left, expectedResult.left, - `Left position should be ${ expectedResult.left }`); + `Left position should be ${ expectedResult.left }`); is(endDelaySignEl.style.width, expectedResult.width, - `Width should be ${ expectedResult.width }`); + `Width should be ${ expectedResult.width }`); if (expectedResult.additionalClass) { ok(endDelaySignEl.classList.contains(expectedResult.additionalClass), - `endDelay sign element should have ${ expectedResult.additionalClass } class`); + `endDelay sign element should have ${ expectedResult.additionalClass } class`); } else { ok(!endDelaySignEl.classList.contains(expectedResult.additionalClass), "endDelay sign element should not have " + @@ -76,7 +71,7 @@ add_task(async function() { } } else { ok(!endDelaySignEl, - "The endDelay sign element should not be in animation item element"); + "The endDelay sign element should not be in animation item element"); } } }); diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js index 61fc504775b9..8e25063fbdb4 100644 --- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js +++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js @@ -7,12 +7,12 @@ // * element existance // * path -const TEST_CASES = [ +const TEST_DATA = [ { - targetClassName: "delay-positive", + targetClass: "delay-positive", }, { - targetClassName: "delay-negative", + targetClass: "delay-negative", expectedPath: [ { x: -500000, y: 0 }, { x: -250000, y: 25 }, @@ -24,30 +24,25 @@ const TEST_CASES = [ add_task(async function() { await addTab(URL_ROOT + "doc_multi_timings.html"); - + await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`)); const { panel } = await openAnimationInspector(); - for (const testCase of TEST_CASES) { - const { - expectedPath, - targetClassName, - } = testCase; - + for (const { targetClass, expectedPath } of TEST_DATA) { const animationItemEl = - findAnimationItemElementsByTargetClassName(panel, targetClassName); + findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`); - info(`Checking negative delay path existence for ${ targetClassName }`); + info(`Checking negative delay path existence for ${ targetClass }`); const negativeDelayPathEl = animationItemEl.querySelector(".animation-negative-delay-path"); if (expectedPath) { ok(negativeDelayPathEl, - "The negative delay path element should be in animation item element"); + "The negative delay path element should be in animation item element"); const pathEl = negativeDelayPathEl.querySelector("path"); assertPathSegments(pathEl, true, expectedPath); } else { ok(!negativeDelayPathEl, - "The negative delay path element should not be in animation item element"); + "The negative delay path element should not be in animation item element"); } } }); diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-end-delay-path.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-end-delay-path.js index aad114b5e63d..8d1a6952dd8a 100644 --- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-end-delay-path.js +++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-end-delay-path.js @@ -7,12 +7,12 @@ // * element existance // * path -const TEST_CASES = [ +const TEST_DATA = [ { - targetClassName: "enddelay-positive", + targetClass: "enddelay-positive", }, { - targetClassName: "enddelay-negative", + targetClass: "enddelay-negative", expectedPath: [ { x: 500000, y: 0 }, { x: 500000, y: 50 }, @@ -25,30 +25,25 @@ const TEST_CASES = [ add_task(async function() { await addTab(URL_ROOT + "doc_multi_timings.html"); - + await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`)); const { panel } = await openAnimationInspector(); - for (const testCase of TEST_CASES) { - const { - expectedPath, - targetClassName, - } = testCase; - + for (const { targetClass, expectedPath } of TEST_DATA) { const animationItemEl = - findAnimationItemElementsByTargetClassName(panel, targetClassName); + findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`); - info(`Checking negative endDelay path existance for ${ targetClassName }`); + info(`Checking negative endDelay path existance for ${ targetClass }`); const negativeEndDelayPathEl = animationItemEl.querySelector(".animation-negative-end-delay-path"); if (expectedPath) { ok(negativeEndDelayPathEl, - "The negative endDelay path element should be in animation item element"); + "The negative endDelay path element should be in animation item element"); const pathEl = negativeEndDelayPathEl.querySelector("path"); assertPathSegments(pathEl, true, expectedPath); } else { ok(!negativeEndDelayPathEl, - "The negative endDelay path element should not be in animation item element"); + "The negative endDelay path element should not be in animation item element"); } } }); diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js index 310472718d85..d2b6293774de 100644 --- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js +++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js @@ -5,16 +5,16 @@ // Test for existance and content of tooltip on summary graph element. -const TEST_CASES = [ +const TEST_DATA = [ { - targetClassName: "cssanimation-normal", + targetClass: "cssanimation-normal", expectedResult: { nameAndType: "cssanimation - CSS Animation", duration: "1,000s", }, }, { - targetClassName: "cssanimation-linear", + targetClass: "cssanimation-linear", expectedResult: { nameAndType: "cssanimation - CSS Animation", duration: "1,000s", @@ -22,7 +22,7 @@ const TEST_CASES = [ }, }, { - targetClassName: "delay-positive", + targetClass: "delay-positive", expectedResult: { nameAndType: "test-delay-animation - Script Animation", delay: "500s", @@ -30,7 +30,7 @@ const TEST_CASES = [ }, }, { - targetClassName: "delay-negative", + targetClass: "delay-negative", expectedResult: { nameAndType: "test-negative-delay-animation - Script Animation", delay: "-500s", @@ -38,7 +38,7 @@ const TEST_CASES = [ }, }, { - targetClassName: "easing-step", + targetClass: "easing-step", expectedResult: { nameAndType: "Script Animation", duration: "1,000s", @@ -46,7 +46,7 @@ const TEST_CASES = [ }, }, { - targetClassName: "enddelay-positive", + targetClass: "enddelay-positive", expectedResult: { nameAndType: "Script Animation", duration: "1,000s", @@ -54,7 +54,7 @@ const TEST_CASES = [ }, }, { - targetClassName: "enddelay-negative", + targetClass: "enddelay-negative", expectedResult: { nameAndType: "Script Animation", duration: "1,000s", @@ -62,7 +62,7 @@ const TEST_CASES = [ }, }, { - targetClassName: "enddelay-with-fill-forwards", + targetClass: "enddelay-with-fill-forwards", expectedResult: { nameAndType: "Script Animation", duration: "1,000s", @@ -71,7 +71,7 @@ const TEST_CASES = [ }, }, { - targetClassName: "enddelay-with-iterations-infinity", + targetClass: "enddelay-with-iterations-infinity", expectedResult: { nameAndType: "Script Animation", duration: "1,000s", @@ -80,7 +80,7 @@ const TEST_CASES = [ }, }, { - targetClassName: "direction-alternate-with-iterations-infinity", + targetClass: "direction-alternate-with-iterations-infinity", expectedResult: { nameAndType: "Script Animation", duration: "1,000s", @@ -89,7 +89,7 @@ const TEST_CASES = [ }, }, { - targetClassName: "direction-alternate-reverse-with-iterations-infinity", + targetClass: "direction-alternate-reverse-with-iterations-infinity", expectedResult: { nameAndType: "Script Animation", duration: "1,000s", @@ -98,7 +98,7 @@ const TEST_CASES = [ }, }, { - targetClassName: "direction-reverse-with-iterations-infinity", + targetClass: "direction-reverse-with-iterations-infinity", expectedResult: { nameAndType: "Script Animation", duration: "1,000s", @@ -107,7 +107,7 @@ const TEST_CASES = [ }, }, { - targetClassName: "fill-backwards", + targetClass: "fill-backwards", expectedResult: { nameAndType: "Script Animation", duration: "1,000s", @@ -115,7 +115,7 @@ const TEST_CASES = [ }, }, { - targetClassName: "fill-backwards-with-delay-iterationstart", + targetClass: "fill-backwards-with-delay-iterationstart", expectedResult: { nameAndType: "Script Animation", delay: "500s", @@ -125,7 +125,7 @@ const TEST_CASES = [ }, }, { - targetClassName: "fill-both", + targetClass: "fill-both", expectedResult: { nameAndType: "Script Animation", duration: "1,000s", @@ -133,7 +133,7 @@ const TEST_CASES = [ }, }, { - targetClassName: "fill-both-width-delay-iterationstart", + targetClass: "fill-both-width-delay-iterationstart", expectedResult: { nameAndType: "Script Animation", delay: "500s", @@ -143,7 +143,7 @@ const TEST_CASES = [ }, }, { - targetClassName: "fill-forwards", + targetClass: "fill-forwards", expectedResult: { nameAndType: "Script Animation", duration: "1,000s", @@ -151,7 +151,7 @@ const TEST_CASES = [ }, }, { - targetClassName: "iterationstart", + targetClass: "iterationstart", expectedResult: { nameAndType: "Script Animation", duration: "1,000s", @@ -159,14 +159,14 @@ const TEST_CASES = [ }, }, { - targetClassName: "no-compositor", + targetClass: "no-compositor", expectedResult: { nameAndType: "Script Animation", duration: "1,000s", }, }, { - targetClassName: "keyframes-easing-step", + targetClass: "keyframes-easing-step", expectedResult: { nameAndType: "Script Animation", duration: "1,000s", @@ -176,22 +176,17 @@ const TEST_CASES = [ add_task(async function() { await addTab(URL_ROOT + "doc_multi_timings.html"); - + await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`)); const { panel } = await openAnimationInspector(); - for (const testCase of TEST_CASES) { - const { - expectedResult, - targetClassName, - } = testCase; - + for (const { targetClass, expectedResult } of TEST_DATA) { const animationItemEl = - findAnimationItemElementsByTargetClassName(panel, targetClassName); + findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`); const summaryGraphEl = animationItemEl.querySelector(".animation-summary-graph"); - info(`Checking tooltip for ${ targetClassName }`); + info(`Checking tooltip for ${ targetClass }`); ok(summaryGraphEl.hasAttribute("title"), - "Summary graph should have 'title' attribute"); + "Summary graph should have 'title' attribute"); const tooltip = summaryGraphEl.getAttribute("title"); const { @@ -214,7 +209,7 @@ add_task(async function() { ok(tooltip.includes(expected), `Tooltip should include '${ expected }'`); } else { ok(!tooltip.includes("Animation timing function:"), - "Tooltip should not include animation timing function"); + "Tooltip should not include animation timing function"); } if (delay) { @@ -271,7 +266,7 @@ add_task(async function() { ok(tooltip.includes(expected), `Tooltip should include '${ expected }'`); } else { ok(!tooltip.includes("Iteration start:"), - "Tooltip should not include iterationStart"); + "Tooltip should not include iterationStart"); } } }); diff --git a/devtools/client/inspector/animation/test/doc_frame_script.js b/devtools/client/inspector/animation/test/doc_frame_script.js new file mode 100644 index 000000000000..0cf34c43ae32 --- /dev/null +++ b/devtools/client/inspector/animation/test/doc_frame_script.js @@ -0,0 +1,29 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ +/* globals addMessageListener, sendAsyncMessage */ + +"use strict"; + +// A helper frame-script for animation inspector. + +addMessageListener("Test:RemoveAnimatedElementsExcept", function(msg) { + const { selectors } = msg.data; + + for (const animation of content.document.getAnimations()) { + if (isRemovableElement(animation, selectors)) { + animation.effect.target.remove(); + } + } + + sendAsyncMessage("Test:RemoveAnimatedElementsExcept"); +}); + +function isRemovableElement(animation, selectors) { + for (const selector of selectors) { + if (animation.effect.target.matches(selector)) { + return false; + } + } + + return true; +} diff --git a/devtools/client/inspector/animation/test/doc_multi_easings.html b/devtools/client/inspector/animation/test/doc_multi_easings.html index c133d025908d..416e337aa396 100644 --- a/devtools/client/inspector/animation/test/doc_multi_easings.html +++ b/devtools/client/inspector/animation/test/doc_multi_easings.html @@ -15,7 +15,7 @@ function createAnimation(name, keyframes, effectEasing) { const div = document.createElement("div"); - div.id = name; + div.classList.add(name); document.body.appendChild(div); const effect = { diff --git a/devtools/client/inspector/animation/test/doc_multi_keyframes.html b/devtools/client/inspector/animation/test/doc_multi_keyframes.html index e1fcff91ecab..a28a2448264b 100644 --- a/devtools/client/inspector/animation/test/doc_multi_keyframes.html +++ b/devtools/client/inspector/animation/test/doc_multi_keyframes.html @@ -15,7 +15,7 @@ function createAnimation(name, keyframes, effectEasing) { const div = document.createElement("div"); - div.id = name; + div.classList.add(name); document.body.appendChild(div); const effect = { diff --git a/devtools/client/inspector/animation/test/doc_simple_animation.html b/devtools/client/inspector/animation/test/doc_simple_animation.html index d9daf7b7c516..27da20648753 100644 --- a/devtools/client/inspector/animation/test/doc_simple_animation.html +++ b/devtools/client/inspector/animation/test/doc_simple_animation.html @@ -154,7 +154,7 @@
-
+
@@ -162,12 +162,12 @@ /* globals KeyframeEffect, Animation */ "use strict"; - var el = document.getElementById("endDelayed"); - let effect = new KeyframeEffect(el, [ + const el = document.querySelector(".end-delay"); + const effect = new KeyframeEffect(el, [ { opacity: 0, offset: 0 }, { opacity: 1, offset: 1 } ], { duration: 1000000, endDelay: 500000, fill: "none" }); - let animation = new Animation(effect, document.timeline); + const animation = new Animation(effect, document.timeline); animation.play();