Bug 1734592 - [devtools] Remove Promise.jsm usage in devtools/client/inspector/rules. r=jdescottes.
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Mon, 11 Oct 2021 16:30:04 +0000
changeset 595392 b07b755162f9aec58aedca2b33360caeed9dd29b
parent 595391 8b3140fe7b38031c47a347122a28f033fef0c9e9
child 595393 2720b60b28d7fd797b33412f593ca6ede0722772
push id151244
push usernchevobbe@mozilla.com
push dateMon, 11 Oct 2021 16:32:59 +0000
treeherderautoland@32a3cf57dd43 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1734592
milestone95.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1734592 - [devtools] Remove Promise.jsm usage in devtools/client/inspector/rules. r=jdescottes. Differential Revision: https://phabricator.services.mozilla.com/D127809
devtools/client/inspector/rules/models/element-style.js
devtools/client/inspector/rules/models/rule.js
devtools/client/inspector/rules/rules.js
devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_01.js
devtools/client/inspector/rules/views/rule-editor.js
--- a/devtools/client/inspector/rules/models/element-style.js
+++ b/devtools/client/inspector/rules/models/element-style.js
@@ -1,16 +1,15 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const Services = require("Services");
-const promise = require("promise");
 const Rule = require("devtools/client/inspector/rules/models/rule");
 const UserProperties = require("devtools/client/inspector/rules/models/user-properties");
 const {
   style: { ELEMENT_STYLE },
 } = require("devtools/shared/constants");
 
 loader.lazyRequireGetter(
   this,
@@ -124,17 +123,17 @@ class ElementStyle {
     const populated = this.pageStyle
       .getApplied(this.element, {
         inherited: true,
         matchedSelectors: true,
         filter: this.showUserAgentStyles ? "ua" : undefined,
       })
       .then(entries => {
         if (this.destroyed || this.populated !== populated) {
-          return promise.resolve(undefined);
+          return Promise.resolve(undefined);
         }
 
         // Store the current list of rules (if any) during the population
         // process. They will be reused if possible.
         const existingRules = this.rules;
 
         this.rules = [];
 
@@ -162,17 +161,17 @@ class ElementStyle {
         }
 
         return undefined;
       })
       .catch(e => {
         // populate is often called after a setTimeout,
         // the connection may already be closed.
         if (this.destroyed) {
-          return promise.resolve(undefined);
+          return Promise.resolve(undefined);
         }
         return promiseWarn(e);
       });
     this.populated = populated;
     return this.populated;
   }
 
   /**
--- a/devtools/client/inspector/rules/models/rule.js
+++ b/devtools/client/inspector/rules/models/rule.js
@@ -1,15 +1,14 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-const promise = require("promise");
 const {
   style: { ELEMENT_STYLE },
 } = require("devtools/shared/constants");
 const CssLogic = require("devtools/shared/inspector/css-logic");
 const TextProperty = require("devtools/client/inspector/rules/models/text-property");
 const Services = require("Services");
 
 loader.lazyRequireGetter(
@@ -469,18 +468,17 @@ class Rule {
    *        (or RuleRewriter) as an argument and that modifies it
    *        to apply the desired edit
    * @return {Promise} a promise which will resolve when the edit
    *        is complete
    */
   applyProperties(modifier) {
     // If there is already a pending modification, we have to wait
     // until it settles before applying the next modification.
-    const resultPromise = promise
-      .resolve(this._applyingModifications)
+    const resultPromise = Promise.resolve(this._applyingModifications)
       .then(() => {
         const modifications = this.domRule.startModifyingProperties(
           this.cssProperties
         );
         modifier(modifications);
         if (this.domRule.canSetRuleText) {
           return this._applyPropertiesAuthored(modifications);
         }
--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -1,15 +1,14 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-const promise = require("promise");
 const Services = require("Services");
 const flags = require("devtools/shared/flags");
 const { l10n } = require("devtools/shared/inspector/css-logic");
 const {
   style: { ELEMENT_STYLE },
 } = require("devtools/shared/constants");
 const { PSEUDO_CLASSES } = require("devtools/shared/css/constants");
 const OutputParser = require("devtools/client/shared/output-parser");
@@ -643,17 +642,17 @@ CssRuleView.prototype = {
     const pseudoClasses = element.pseudoClassLocks;
 
     // Adding a new rule with authored styles will cause the actor to
     // emit an event, which will in turn cause the rule view to be
     // updated.  So, we wait for this update and for the rule creation
     // request to complete, and then focus the new rule's selector.
     const eventPromise = this.once("ruleview-refreshed");
     const newRulePromise = this.pageStyle.addNewRule(element, pseudoClasses);
-    promise.all([eventPromise, newRulePromise]).then(values => {
+    Promise.all([eventPromise, newRulePromise]).then(values => {
       const options = values[1];
       // Be sure the reference the correct |rules| here.
       for (const rule of this._elementStyle.rules) {
         if (options.rule === rule.domRule) {
           rule.editor.selectorText.click();
           elementStyle._changed();
           break;
         }
@@ -924,17 +923,17 @@ CssRuleView.prototype = {
    * @param {NodeActor} element
    *        The node whose style rules we'll inspect.
    * @param {Boolean} allowRefresh
    *        Update the view even if the element is the same as last time.
    */
   selectElement: function(element, allowRefresh = false) {
     const refresh = this._viewedElement === element;
     if (refresh && !allowRefresh) {
-      return promise.resolve(undefined);
+      return Promise.resolve(undefined);
     }
 
     if (this._popup && this.popup.isOpen) {
       this.popup.hidePopup();
     }
 
     this.clear(false);
     this._viewedElement = element;
@@ -946,27 +945,26 @@ CssRuleView.prototype = {
       this._stopSelectingElement();
       this._clearRules();
       this._showEmpty();
       this.refreshPseudoClassPanel();
       if (this.pageStyle) {
         this.pageStyle.off("stylesheet-updated", this.refreshPanel);
         this.pageStyle = null;
       }
-      return promise.resolve(undefined);
+      return Promise.resolve(undefined);
     }
 
     this.pageStyle = element.inspectorFront.pageStyle;
     this.pageStyle.on("stylesheet-updated", this.refreshPanel);
 
     // To figure out how shorthand properties are interpreted by the
     // engine, we will set properties on a dummy element and observe
     // how their .style attribute reflects them as computed values.
-    const dummyElementPromise = promise
-      .resolve(this.styleDocument)
+    const dummyElementPromise = Promise.resolve(this.styleDocument)
       .then(document => {
         // ::before and ::after do not have a namespaceURI
         const namespaceURI =
           this.element.namespaceURI || document.documentElement.namespaceURI;
         this._dummyElement = document.createElementNS(
           namespaceURI,
           this.element.tagName
         );
@@ -1012,28 +1010,28 @@ CssRuleView.prototype = {
   },
 
   /**
    * Update the rules for the currently highlighted element.
    */
   refreshPanel: function() {
     // Ignore refreshes when the panel is hidden, or during editing or when no element is selected.
     if (!this.isPanelVisible() || this.isEditing || !this._elementStyle) {
-      return promise.resolve(undefined);
+      return Promise.resolve(undefined);
     }
 
     // Repopulate the element style once the current modifications are done.
     const promises = [];
     for (const rule of this._elementStyle.rules) {
       if (rule._applyingModifications) {
         promises.push(rule._applyingModifications);
       }
     }
 
-    return promise.all(promises).then(() => {
+    return Promise.all(promises).then(() => {
       return this._populate();
     });
   },
 
   /**
    * Clear the pseudo class options panel by removing the checked and disabled
    * attributes for each checkbox.
    */
@@ -1305,17 +1303,17 @@ CssRuleView.prototype = {
     let lastInheritedSource = "";
     let lastKeyframes = null;
     let seenPseudoElement = false;
     let seenNormalElement = false;
     let seenSearchTerm = false;
     let container = null;
 
     if (!this._elementStyle.rules) {
-      return promise.resolve();
+      return Promise.resolve();
     }
 
     const editorReadyPromises = [];
     for (const rule of this._elementStyle.rules) {
       if (rule.domRule.system) {
         continue;
       }
 
@@ -1378,17 +1376,17 @@ CssRuleView.prototype = {
     }
 
     const searchBox = this.searchField.parentNode;
     searchBox.classList.toggle(
       "devtools-searchbox-no-match",
       this.searchValue && !seenSearchTerm
     );
 
-    return promise.all(editorReadyPromises);
+    return Promise.all(editorReadyPromises);
   },
 
   /**
    * Highlight rules that matches the filter search value and returns a
    * boolean indicating whether or not rules were highlighted.
    *
    * @param  {Rule} rule
    *         The rule object we're highlighting if its rule selectors or
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_01.js
@@ -40,17 +40,20 @@ async function testImageTooltipAfterColo
     selector: "body",
     name: "background-image",
     value:
       'url("chrome://branding/content/icon64.png"), linear-gradient(rgb(0, 0, 0), rgb(255, 0, 102) 400px)',
   });
 
   const spectrum = picker.spectrum;
   const onHidden = picker.tooltip.once("hidden");
-  const onModifications = ruleView.once("ruleview-changed");
+
+  // On "RETURN", `ruleview-changed` is triggered when the SwatchBasedEditorTooltip calls
+  // its `commit` method, and then another event is emitted when the editor is hidden.
+  const onModifications = waitForNEvents(ruleView, "ruleview-changed", 2);
   focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
   await onHidden;
   await onModifications;
 
   info("Verify again that the image preview tooltip works");
   // After a color change, the property is re-populated, we need to get the new
   // dom node
   url = getRuleViewProperty(
--- a/devtools/client/inspector/rules/views/rule-editor.js
+++ b/devtools/client/inspector/rules/views/rule-editor.js
@@ -23,17 +23,16 @@ const {
 } = require("devtools/client/inspector/shared/utils");
 const {
   parseNamedDeclarations,
   parsePseudoClassesAndAttributes,
   SELECTOR_ATTRIBUTE,
   SELECTOR_ELEMENT,
   SELECTOR_PSEUDO_CLASS,
 } = require("devtools/shared/css/parsing-utils");
-const promise = require("promise");
 const Services = require("Services");
 const EventEmitter = require("devtools/shared/event-emitter");
 const CssLogic = require("devtools/shared/inspector/css-logic");
 
 loader.lazyRequireGetter(this, "Tools", "devtools/client/definitions", true);
 
 const STYLE_INSPECTOR_PROPERTIES =
   "devtools/shared/locales/styleinspector.properties";
@@ -359,17 +358,17 @@ RuleEditor.prototype = {
       this._onToolChanged();
     } else if (this.rule.domRule.type === ELEMENT_STYLE) {
       this.source.setAttribute("unselectable", "permanent");
     } else {
       // Set "unselectable" appropriately.
       this._onToolChanged();
     }
 
-    promise.resolve().then(() => {
+    Promise.resolve().then(() => {
       this.emit("source-link-updated");
     });
   },
 
   /**
    * Update the rule editor with the contents of the rule.
    *
    * @param {Boolean} reset