Bug 1774687 - Stop debouncing with DeferredTask in DevTools r=devtool…

…s-reviewers,nchevobbe Differential Revision: https://phabricator.services.mozilla.com/D149575
mozilla · Jun 22, 2022 · 8976ddf · 8976ddf
1 parent f628b0a
commit 8976ddf
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 59 deletions.
diff --git a/devtools/client/inspector/inspector.js b/devtools/client/inspector/inspector.js
@@ -65,12 +65,7 @@ loader.lazyRequireGetter(
   "devtools/client/shared/screenshot",
   true
 );
-
-loader.lazyImporter(
-  this,
-  "DeferredTask",
-  "resource://gre/modules/DeferredTask.jsm"
-);
+loader.lazyRequireGetter(this, "debounce", "devtools/shared/debounce", true);
 
 const { LocalizationHelper, localizeMarkup } = require("devtools/shared/l10n");
 const INSPECTOR_L10N = new LocalizationHelper(
@@ -168,7 +163,12 @@ function Inspector(toolbox, commands) {
   this.onNewSelection = this.onNewSelection.bind(this);
   this.onResourceAvailable = this.onResourceAvailable.bind(this);
   this.onRootNodeAvailable = this.onRootNodeAvailable.bind(this);
-  this.onPanelWindowResize = this.onPanelWindowResize.bind(this);
+  this._onLazyPanelResize = this._onLazyPanelResize.bind(this);
+  this.onPanelWindowResize = debounce(
+    this._onLazyPanelResize,
+    LAZY_RESIZE_INTERVAL_MS,
+    this
+  );
   this.onPickerCanceled = this.onPickerCanceled.bind(this);
   this.onPickerHovered = this.onPickerHovered.bind(this);
   this.onPickerPicked = this.onPickerPicked.bind(this);
@@ -837,33 +837,18 @@ Inspector.prototype = {
 
   _onLazyPanelResize: async function() {
     // We can be called on a closed window or destroyed toolbox because of the deferred task.
-    if (window.closed || this._destroyed) {
+    if (
+      window.closed ||
+      this._destroyed ||
+      this._toolbox.currentToolId !== "inspector"
+    ) {
       return;
     }
 
     this.splitBox.setState({ vert: this.useLandscapeMode() });
     this.emit("inspector-resize");
   },
 
-  /**
-   * If Toolbox width is less than 600 px, the splitter changes its mode
-   * to `horizontal` to support portrait view.
-   */
-  onPanelWindowResize: function() {
-    if (this.toolbox.currentToolId !== "inspector") {
-      return;
-    }
-
-    if (!this._lazyResizeHandler) {
-      this._lazyResizeHandler = new DeferredTask(
-        this._onLazyPanelResize.bind(this),
-        LAZY_RESIZE_INTERVAL_MS,
-        0
-      );
-    }
-    this._lazyResizeHandler.arm();
-  },
-
   getSidebarSize: function() {
     let width;
     let height;

diff --git a/devtools/client/inspector/markup/test/browser_markup_view-source.js b/devtools/client/inspector/markup/test/browser_markup_view-source.js
@@ -88,11 +88,8 @@ async function clickOnJumpToDebuggerIconForNode(
   );
   evHolder.scrollIntoView();
   info(`Display event tooltip for node "${nodeSelector}"`);
-  EventUtils.synthesizeMouseAtCenter(
-    evHolder,
-    {},
-    inspector.markup.doc.defaultView
-  );
+  evHolder.click();
+
   const tooltip = inspector.markup.eventDetailsTooltip;
   await tooltip.once("shown");
 

diff --git a/devtools/client/storage/ui.js b/devtools/client/storage/ui.js
@@ -29,11 +29,7 @@ loader.lazyRequireGetter(
   "devtools/client/shared/widgets/TableWidget",
   true
 );
-loader.lazyImporter(
-  this,
-  "DeferredTask",
-  "resource://gre/modules/DeferredTask.jsm"
-);
+loader.lazyRequireGetter(this, "debounce", "devtools/shared/debounce", true);
 loader.lazyImporter(
   this,
   "VariablesView",
@@ -197,7 +193,11 @@ class StorageUI {
     this.onRefreshTable = this.onRefreshTable.bind(this);
     this.onAddItem = this.onAddItem.bind(this);
     this.onCopyItem = this.onCopyItem.bind(this);
-    this.onPanelWindowResize = this.#onPanelWindowResize.bind(this);
+    this.onPanelWindowResize = debounce(
+      this.#onLazyPanelResize,
+      LAZY_RESIZE_INTERVAL_MS,
+      this
+    );
     this.onRemoveItem = this.onRemoveItem.bind(this);
     this.onRemoveAllFrom = this.onRemoveAllFrom.bind(this);
     this.onRemoveAll = this.onRemoveAll.bind(this);
@@ -459,7 +459,7 @@ class StorageUI {
     );
     this.sidebarToggleBtn = null;
 
-    this._window.removeEventListener("resize", this.#onPanelWindowResize, true);
+    this._window.removeEventListener("resize", this.#onLazyPanelResize, true);
 
     this._treePopup.removeEventListener(
       "popupshowing",
@@ -691,25 +691,6 @@ class StorageUI {
     }
   }
 
-  /**
-   * Debounce the window resize event by calling _onLazyPanelResize() if
-   * the required amount of time has passed.
-   */
-  #onPanelWindowResize() {
-    if (this._toolbox.currentToolId !== "storage") {
-      return;
-    }
-
-    if (!this._lazyResizeHandler) {
-      this._lazyResizeHandler = new DeferredTask(
-        this.#onLazyPanelResize.bind(this),
-        LAZY_RESIZE_INTERVAL_MS,
-        0
-      );
-    }
-    this._lazyResizeHandler.arm();
-  }
-
   /**
    * If the panel is resized we need to check if we should load the next batch of
    * storage items.
@@ -1460,7 +1441,11 @@ class StorageUI {
    * Load the next batch of 50 items
    */
   async loadMoreItems() {
-    if (!this.shouldLoadMoreItems) {
+    if (
+      !this.shouldLoadMoreItems ||
+      this._toolbox.currentToolId !== "storage" ||
+      !this.tree.selectedItem
+    ) {
       return;
     }
     this.shouldLoadMoreItems = false;