Bug 1534610 - Switch to React.createRef() in inspector.js to save a few cycles r=rcaliman
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Wed, 13 Mar 2019 13:55:28 +0000
changeset 521705 70b39f59687c9d81003ea03345d44563c63fb1dd
parent 521704 c97013ec665b60baf54c30a23352a5185dfdfd56
child 521706 b6d239de820fce497fc6e7d5f6a10ad2a1a4122b
push id10867
push userdvarga@mozilla.com
push dateThu, 14 Mar 2019 15:20:45 +0000
treeherdermozilla-beta@abad13547875 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcaliman
bugs1534610
milestone67.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 1534610 - Switch to React.createRef() in inspector.js to save a few cycles r=rcaliman Differential Revision: https://phabricator.services.mozilla.com/D23131
devtools/client/inspector/inspector.js
devtools/client/inspector/test/browser_inspector_pane-toggle-02.js
devtools/client/inspector/test/browser_inspector_pane-toggle-03.js
devtools/client/inspector/test/browser_inspector_pane-toggle-04.js
devtools/client/inspector/test/browser_inspector_pane_state_restore.js
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -517,16 +517,18 @@ Inspector.prototype = {
 
   /**
    * Build Splitter located between the main and side area of
    * the Inspector panel.
    */
   setupSplitter: function() {
     const { width, height, splitSidebarWidth } = this.getSidebarSize();
 
+    this.sidebarSplitBoxRef = this.React.createRef();
+
     const splitter = this.InspectorSplitBox({
       className: "inspector-sidebar-splitter",
       initialWidth: width,
       initialHeight: height,
       minSize: "10%",
       maxSize: "80%",
       splitterSize: 1,
       endPanelControl: true,
@@ -540,19 +542,17 @@ Inspector.prototype = {
         splitterSize: this.is3PaneModeEnabled ? 1 : 0,
         endPanelControl: this.is3PaneModeEnabled,
         startPanel: this.InspectorTabPanel({
           id: "inspector-rules-container",
         }),
         endPanel: this.InspectorTabPanel({
           id: "inspector-sidebar-container",
         }),
-        ref: splitbox => {
-          this.sidebarSplitBox = splitbox;
-        },
+        ref: this.sidebarSplitBoxRef,
       }),
       vert: this.useLandscapeMode(),
       onControlledPanelResized: this.onSidebarResized,
     });
 
     this.splitBox = this.ReactDOM.render(splitter,
       this.panelDoc.getElementById("inspector-splitter-box"));
 
@@ -611,17 +611,17 @@ Inspector.prototype = {
   },
 
   onSidebarHidden: function() {
     // Store the current splitter size to preferences.
     const state = this.splitBox.state;
     Services.prefs.setIntPref("devtools.toolsidebar-width.inspector", state.width);
     Services.prefs.setIntPref("devtools.toolsidebar-height.inspector", state.height);
     Services.prefs.setIntPref("devtools.toolsidebar-width.inspector.splitsidebar",
-      this.sidebarSplitBox.state.width);
+      this.sidebarSplitBoxRef.current.state.width);
   },
 
   onSidebarResized: function(width, height) {
     this.toolbox.emit("inspector-sidebar-resized", { width, height });
   },
 
   onSidebarSelect: function(toolId) {
     // Save the currently selected sidebar panel
@@ -632,17 +632,17 @@ Inspector.prototype = {
     this.getPanel(toolId);
 
     this.toolbox.emit("inspector-sidebar-select", toolId);
   },
 
   onSidebarShown: function() {
     const { width, height, splitSidebarWidth } = this.getSidebarSize();
     this.splitBox.setState({ width, height });
-    this.sidebarSplitBox.setState({ width: splitSidebarWidth });
+    this.sidebarSplitBoxRef.current.setState({ width: splitSidebarWidth });
   },
 
   async onSidebarToggle() {
     this.is3PaneModeEnabled = !this.is3PaneModeEnabled;
     await this.setupToolbar();
     await this.addRuleView({ skipQueue: true });
   },
 
@@ -687,17 +687,17 @@ Inspector.prototype = {
       // In portrait/vertical mode, set the bottom-right panel to be 1/2 of the
       // toolbox's width.
       sidebarSplitboxWidth = toolboxWidth / 2;
     }
 
     // Show the splitter inside the sidebar split box. Sets the width of the inspector
     // sidebar and specify that the end (right in horizontal or bottom-right in
     // vertical) panel of the sidebar split box should be controlled when resizing.
-    this.sidebarSplitBox.setState({
+    this.sidebarSplitBoxRef.current.setState({
       endPanelControl: true,
       splitterSize: 1,
       width: sidebarSplitboxWidth,
     });
   },
 
   /**
    * Adds the rule view to the middle (in landscape/horizontal mode) or bottom-left panel
@@ -706,17 +706,17 @@ Inspector.prototype = {
    * The defaultTab defaults to the rule view when reverting to the 2 pane mode and the
    * rule view is being merged back into the inspector sidebar from middle/bottom-left
    * panel. Otherwise, we specify the default tab when handling the sidebar setup.
    *
    * @params {String} defaultTab
    *         Thie id of the default tab for the sidebar.
    */
   async addRuleView({ defaultTab = "ruleview", skipQueue = false } = {}) {
-    const ruleViewSidebar = this.sidebarSplitBox.startPanelContainer;
+    const ruleViewSidebar = this.sidebarSplitBoxRef.current.startPanelContainer;
 
     if (this.is3PaneModeEnabled) {
       // Convert to 3 pane mode by removing the rule view from the inspector sidebar
       // and adding the rule view to the middle (in landscape/horizontal mode) or
       // bottom-left (in portrait/vertical mode) panel.
       ruleViewSidebar.style.display = "block";
 
       this.setSidebarSplitBoxState();
@@ -737,23 +737,23 @@ Inspector.prototype = {
       // inspector sidebar.
       ruleViewSidebar.style.display = "none";
 
       // Set the width of the split box (right panel in horziontal mode and bottom panel
       // in vertical mode) to be the width of the inspector sidebar.
       const splitterBox = this.panelDoc.getElementById("inspector-splitter-box");
       this.splitBox.setState({
         width: this.useLandscapeMode() ?
-          this.sidebarSplitBox.state.width : splitterBox.clientWidth,
+          this.sidebarSplitBoxRef.current.state.width : splitterBox.clientWidth,
       });
 
       // Hide the splitter to prevent any drag events in the sidebar split box and
       // specify that the end (right panel in horziontal mode or bottom panel in vertical
       // mode) panel should be uncontrolled when resizing.
-      this.sidebarSplitBox.setState({
+      this.sidebarSplitBoxRef.current.setState({
         endPanelControl: false,
         splitterSize: 0,
       });
 
       this.ruleViewSideBar.hide();
       await this.ruleViewSideBar.removeTab("ruleview");
 
       if (skipQueue) {
--- a/devtools/client/inspector/test/browser_inspector_pane-toggle-02.js
+++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-02.js
@@ -9,29 +9,29 @@
 
 add_task(async function() {
   info("Switch to 2 pane inspector to test the 3 pane toggle button behavior");
   await pushPref("devtools.inspector.three-pane-enabled", false);
 
   const { inspector } = await openInspectorForURL("about:blank");
   const { panelDoc: doc } = inspector;
   const button = doc.querySelector(".sidebar-toggle");
-  const ruleViewSidebar = inspector.sidebarSplitBox.startPanelContainer;
+  const ruleViewSidebar = inspector.sidebarSplitBoxRef.current.startPanelContainer;
   const toolboxWidth = doc.getElementById("inspector-splitter-box").clientWidth;
 
   ok(button.classList.contains("pane-collapsed"), "The button is in collapsed state");
 
   info("Click on the toggle button to toggle ON 3 pane inspector");
   let onRuleViewAdded = inspector.once("ruleview-added");
   EventUtils.synthesizeMouseAtCenter(button, {}, inspector.panelDoc.defaultView);
   await onRuleViewAdded;
 
   info("Checking the state of the 3 pane inspector");
   let sidebarWidth = inspector.splitBox.state.width;
-  const sidebarSplitBoxWidth = inspector.sidebarSplitBox.state.width;
+  const sidebarSplitBoxWidth = inspector.sidebarSplitBoxRef.current.state.width;
   ok(!button.classList.contains("pane-collapsed"), "The button is in expanded state");
   ok(doc.getElementById("ruleview-panel"), "The rule view panel exist");
   is(inspector.sidebar.getCurrentTabID(), "layoutview",
     "Layout view is shown in the sidebar");
   is(ruleViewSidebar.style.display, "block", "The split rule view sidebar is displayed");
   is(sidebarWidth, toolboxWidth * 2 / 3, "Got correct main split box width");
   is(sidebarSplitBoxWidth, toolboxWidth / 3, "Got correct sidebar split box width");
 
--- a/devtools/client/inspector/test/browser_inspector_pane-toggle-03.js
+++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-03.js
@@ -27,17 +27,17 @@ add_task(async function() {
 
     info("Click on the toggle button to toggle ON 3 pane inspector");
     let onRuleViewAdded = inspector.once("ruleview-added");
     EventUtils.synthesizeMouseAtCenter(button, {}, inspector.panelDoc.defaultView);
     await onRuleViewAdded;
 
     info("Checking the sizes of the 3 pane inspector");
     let sidebarWidth = inspector.splitBox.state.width;
-    const sidebarSplitBoxWidth = inspector.sidebarSplitBox.state.width;
+    const sidebarSplitBoxWidth = inspector.sidebarSplitBoxRef.current.state.width;
     is(sidebarWidth, SIDEBAR_WIDTH * 2, "Got correct main split box width");
     is(sidebarSplitBoxWidth, SIDEBAR_WIDTH, "Got correct sidebar split box width");
 
     info("Click on the toggle button to toggle OFF the 3 pane inspector");
     onRuleViewAdded = inspector.once("ruleview-added");
     EventUtils.synthesizeMouseAtCenter(button, {}, inspector.panelDoc.defaultView);
     await onRuleViewAdded;
 
--- a/devtools/client/inspector/test/browser_inspector_pane-toggle-04.js
+++ b/devtools/client/inspector/test/browser_inspector_pane-toggle-04.js
@@ -21,17 +21,17 @@ add_task(async function() {
   const toolboxWidth = doc.getElementById("inspector-splitter-box").clientWidth;
 
   info("Click on the toggle button to toggle ON 3 pane inspector");
   let onRuleViewAdded = inspector.once("ruleview-added");
   EventUtils.synthesizeMouseAtCenter(button, {}, inspector.panelDoc.defaultView);
   await onRuleViewAdded;
 
   info("Checking the sizes of the 3 pane inspector");
-  const sidebarSplitBoxWidth = inspector.sidebarSplitBox.state.width;
+  const sidebarSplitBoxWidth = inspector.sidebarSplitBoxRef.current.state.width;
   is(sidebarSplitBoxWidth, toolboxWidth / 2, "Got correct sidebar split box width");
 
   info("Click on the toggle button to toggle OFF the 3 pane inspector");
   onRuleViewAdded = inspector.once("ruleview-added");
   EventUtils.synthesizeMouseAtCenter(button, {}, inspector.panelDoc.defaultView);
   await onRuleViewAdded;
 
   info("Checking the sidebar size of the 2 pane inspector");
--- a/devtools/client/inspector/test/browser_inspector_pane_state_restore.js
+++ b/devtools/client/inspector/test/browser_inspector_pane_state_restore.js
@@ -31,17 +31,17 @@ add_task(async function() {
   is(splitSidebarWidth, EXPECTED_INITIAL_SIDEBAR_WIDTH,
     "Got correct initial split sidebar width.");
 
   info("Simulate updates to the dimensions of the various splitboxes.");
   inspector.splitBox.setState({
     width: EXPECTED_NEW_WIDTH,
     height: EXPECTED_NEW_HEIGHT,
   });
-  inspector.sidebarSplitBox.setState({
+  inspector.sidebarSplitBoxRef.current.setState({
     width: EXPECTED_NEW_SIDEBAR_WIDTH,
   });
 
   await closeToolbox();
 
   info("Check the stored sizes of the inspector in the preferences when the inspector " +
     "is closed");
   const storedWidth = Services.prefs.getIntPref("devtools.toolsidebar-width.inspector");