Add signal debouncer instead of change guard.

packages/application/src/shell.ts

@@ -229,13 +229,6 @@ class ApplicationShell extends Widget {
 
     const applicationCurrentWidget = this.currentWidget;
 
-    // Changing the mode of the dock panel can result in mulitple layout
-    // modified signals being emitted as the widgets are rearranged.
-    // During that time, it may not be reliable to query the dock panel
-    // state. Here we prevent the layout modified signal from being emitted
-    // until the mode is finished switching.
-    this._modifiedGuard = true;
-
     if (mode === 'single-document') {
       this._cachedLayout = dock.saveLayout();
       dock.mode = mode;
@@ -248,9 +241,6 @@ class ApplicationShell extends Widget {
 
       // Set the mode data attribute on the document body.
       document.body.setAttribute(MODE_ATTRIBUTE, mode);
-
-      this._modifiedGuard = false;
-      this._onLayoutModified();
       return;
     }
 
@@ -292,9 +282,6 @@ class ApplicationShell extends Widget {
 
     // Set the mode data attribute on the document body.
     document.body.setAttribute(MODE_ATTRIBUTE, mode);
-
-    this._modifiedGuard = false;
-    this._onLayoutModified();
   }
 
   /**
@@ -407,7 +394,7 @@ class ApplicationShell extends Widget {
     }
     let rank = 'rank' in options ? options.rank : DEFAULT_RANK;
     this._leftHandler.addWidget(widget, rank!);
-    this._layoutModified.emit(void 0);
+    this._onLayoutModified();
   }
 
   /**
@@ -733,9 +720,16 @@ class ApplicationShell extends Widget {
    * Handle a change to the layout.
    */
   private _onLayoutModified(): void {
-    if (!this._modifiedGuard) {
-      this._layoutModified.emit(void 0);
-    }
+    // The dock can emit layout modified signals while in transient
+    // states (for instance, when switching from single-document to
+    // multiple-document mode). In those states, it can be unreliable
+    // for the signal consumers to query layout properties.
+    // We fix this by debouncing the layout modified signal so that it
+    // is only emitted after rearranging is done.
+    window.clearTimeout(this._debouncer);
+    this._debouncer = window.setTimeout(() => {
+      this._layoutModified.emit(undefined);
+    }, 0);
   }
 
   /**
@@ -771,7 +765,7 @@ class ApplicationShell extends Widget {
   private _tracker = new FocusTracker<Widget>();
   private _topPanel: Panel;
   private _bottomPanel: Panel;
-  private _modifiedGuard = false;
+  private _debouncer = 0;
   private _addOptionsCache = new Map<Widget, ApplicationShell.IMainAreaOptions>();
 }