Bug 1458791 - Lazy load the InplaceEditor, EditingSession and getCssProperties in the BoxModel. r=pbro
☠☠ backed out by 3bcc98e23806 ☠ ☠
authorGabriel Luong <gabriel.luong@gmail.com>
Thu, 03 May 2018 09:39:24 -0400
changeset 472936 d09be370108d77c3c77490f4c2cc6e0c4929cdac
parent 472935 d31412f16a07e40f8d8747ce9a4cfcc314f53d70
child 472937 dd0fa5821bd1e16de3512ba90687ddac9ee37595
push id1728
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:12:27 +0000
treeherdermozilla-release@c296fde26f5f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1458791
milestone61.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 1458791 - Lazy load the InplaceEditor, EditingSession and getCssProperties in the BoxModel. r=pbro
devtools/client/inspector/boxmodel/box-model.js
devtools/client/inspector/boxmodel/utils/editing-session.js
--- a/devtools/client/inspector/boxmodel/box-model.js
+++ b/devtools/client/inspector/boxmodel/box-model.js
@@ -1,25 +1,23 @@
 /* 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 { getCssProperties } = require("devtools/shared/fronts/css-properties");
-
-const { InplaceEditor } = require("devtools/client/shared/inplace-editor");
-
 const {
   updateGeometryEditorEnabled,
   updateLayout,
   updateOffsetParent,
 } = require("./actions/box-model");
 
-const EditingSession = require("./utils/editing-session");
+loader.lazyRequireGetter(this, "EditingSession", "devtools/client/inspector/boxmodel/utils/editing-session");
+loader.lazyRequireGetter(this, "InplaceEditor", "devtools/client/shared/inplace-editor", true);
+loader.lazyRequireGetter(this, "getCssProperties", "devtools/shared/fronts/css-properties", true);
 
 const NUMERIC = /^-?[\d\.]+$/;
 
 /**
  * A singleton instance of the box model controllers.
  *
  * @param  {Inspector} inspector
  *         An instance of the Inspector currently loaded in the toolbox.
--- a/devtools/client/inspector/boxmodel/utils/editing-session.js
+++ b/devtools/client/inspector/boxmodel/utils/editing-session.js
@@ -1,15 +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 { getCssProperties } = require("devtools/shared/fronts/css-properties");
+loader.lazyRequireGetter(this, "getCssProperties", "devtools/shared/fronts/css-properties", true);
 
 /**
  * An instance of EditingSession tracks changes that have been made during the
  * modification of box model values. All of these changes can be reverted by
  * calling revert.
  *
  * @param  {InspectorPanel} inspector
  *         The inspector panel.
@@ -17,22 +17,30 @@ const { getCssProperties } = require("de
  *         A DOM document that can be used to test style rules.
  * @param  {Array} rules
  *         An array of the style rules defined for the node being
  *         edited. These should be in order of priority, least
  *         important first.
  */
 function EditingSession({inspector, doc, elementRules}) {
   this._doc = doc;
+  this._inspector = inspector;
   this._rules = elementRules;
   this._modifications = new Map();
-  this._cssProperties = getCssProperties(inspector.toolbox);
 }
 
 EditingSession.prototype = {
+  get cssProperties() {
+    if (!this._cssProperties) {
+      this._cssProperties = getCssProperties(this._inspector.toolbox);
+    }
+
+    return this._cssProperties;
+  },
+
   /**
    * Gets the value of a single property from the CSS rule.
    *
    * @param  {StyleRuleFront} rule
    *         The CSS rule.
    * @param  {String} property
    *         The name of the property.
    * @return {String} the value.
@@ -107,18 +115,17 @@ EditingSession.prototype = {
    * @return {Promise} Resolves when the modifications are complete.
    */
   async setProperties(properties) {
     for (let property of properties) {
       // Get a RuleModificationList or RuleRewriter helper object from the
       // StyleRuleActor to make changes to CSS properties.
       // Note that RuleRewriter doesn't support modifying several properties at
       // once, so we do this in a sequence here.
-      let modifications = this._rules[0].startModifyingProperties(
-        this._cssProperties);
+      let modifications = this._rules[0].startModifyingProperties(this.cssProperties);
 
       // Remember the property so it can be reverted.
       if (!this._modifications.has(property.name)) {
         this._modifications.set(property.name,
           this.getPropertyFromRule(this._rules[0], property.name));
       }
 
       // Find the index of the property to be changed, or get the next index to
@@ -142,18 +149,17 @@ EditingSession.prototype = {
    * Reverts all of the property changes made by this instance.
    *
    * @return {Promise} Resolves when all properties have been reverted.
    */
   async revert() {
     // Revert each property that we modified previously, one by one. See
     // setProperties for information about why.
     for (let [property, value] of this._modifications) {
-      let modifications = this._rules[0].startModifyingProperties(
-        this._cssProperties);
+      let modifications = this._rules[0].startModifyingProperties(this.cssProperties);
 
       // Find the index of the property to be reverted.
       let index = this.getPropertyIndex(property);
 
       if (value != "") {
         // If the property doesn't exist anymore, insert at the beginning of the
         // rule.
         if (index === -1) {
@@ -169,15 +175,19 @@ EditingSession.prototype = {
         modifications.removeProperty(index, property);
       }
 
       await modifications.apply();
     }
   },
 
   destroy: function() {
+    this._modifications.clear();
+
+    this._cssProperties = null;
     this._doc = null;
+    this._inspector = null;
+    this._modifications = null;
     this._rules = null;
-    this._modifications.clear();
   }
 };
 
 module.exports = EditingSession;