Bug 1628044 - Get CSSProperties directly from CSSPropertiesFront r=jdescottes

The `initCssProperties()` helper is used to augment the CSS database of properties received from the server with additional local data. The returned `CSSProperties` object is cached by DevToolsClient instance so it can be returned quickly on subsequent requests.

Requesting the database from the server and its augmentation can be done in the `CSSPropertiesFront`'s [Front.initialize()](https://searchfox.org/mozilla-central/rev/a707541ff423ade0d81cef6488e6ecfa09273886/devtools/shared/protocol/Front.js#115-117) which is already async. This ensures that by the time the `CSSPropertiesFront` is returned, the `CSSProperties` object is ready to use with data reconciled.

Fronts are already [cached per target](https://searchfox.org/mozilla-central/rev/a707541ff423ade0d81cef6488e6ecfa09273886/devtools/client/fronts/targets/target-mixin.js#185-192). A duplicate `target.getFront("cssProperties")` will return the previously instantiated `CSSPropertiesFront` with the augmented database.

Getting the `CSSProperties` object is something done only for the top-level target in the Inspector and the Style Editor. Thanks to the behavior of `target.getFront()`, this already acts as a cache, thus negating both tasks done by the `initCssProperties()` helper.

Differential Revision: https://phabricator.services.mozilla.com/D70071

devtools/client/fronts/css-properties.js

@@ -59,6 +59,16 @@ class CssPropertiesFront extends FrontClassWithSpec(cssPropertiesSpec) {
     // Attribute name from which to retrieve the actorID out of the target actor's form
     this.formAttributeName = "cssPropertiesActor";
   }
+
+  async initialize() {
+    const db = await super.getCSSDatabase();
+    this.cssProperties = new CssProperties(normalizeCssData(db));
+  }
+
+  destroy() {
+    this.cssProperties = null;
+    super.destroy();
+  }
 }
 
 /**

devtools/client/inspector/inspector.js

@@ -16,12 +16,6 @@ const InspectorStyleChangeTracker = require("devtools/client/inspector/shared/st
 // during toolbox destruction. See bug 1402779.
 const Promise = require("Promise");
 
-loader.lazyRequireGetter(
-  this,
-  "initCssProperties",
-  "devtools/client/fronts/css-properties",
-  true
-);
 loader.lazyRequireGetter(
   this,
   "HTMLBreadcrumbs",
@@ -418,10 +412,8 @@ Inspector.prototype = {
     this._pendingSelection = null;
   },
 
-  _getCssProperties: function() {
-    return initCssProperties(this.toolbox).then(cssProperties => {
-      this._cssProperties = cssProperties;
-    }, this._handleRejectionIfNotDestroyed);
+  _getCssProperties: async function() {
+    this._cssProperties = await this.currentTarget.getFront("cssProperties");
   },
 
   _getAccessibilityFront: async function() {

devtools/client/styleeditor/panel.js

@@ -14,7 +14,6 @@ var {
 var {
   getString,
 } = require("resource://devtools/client/styleeditor/StyleEditorUtil.jsm");
-var { initCssProperties } = require("devtools/client/fronts/css-properties");
 
 var StyleEditorPanel = function StyleEditorPanel(panelWin, toolbox) {
   EventEmitter.decorate(this);
@@ -39,7 +38,9 @@ StyleEditorPanel.prototype = {
    */
   async open() {
     // Initialize the CSS properties database.
-    const { cssProperties } = await initCssProperties(this._toolbox);
+    const { cssProperties } = await this._toolbox.target.getFront(
+      "cssProperties"
+    );
 
     // Initialize the UI
     this.UI = new StyleEditorUI(this._toolbox, this._panelDoc, cssProperties);