Notify new guests of current sidebar layout

Notify newly connected guest frames of the current sidebar layout. This
allows newly created guests to properly activate side-by-side mode if the
sidebar is already open and the guest supports it. This is relevant when
navigating between chapters in a VitalSource book.

src/annotator/sidebar.js

@@ -197,8 +197,15 @@ export class Sidebar {
 
     this.onLayoutChange = config.onLayoutChange;
 
+    /** @type {SidebarLayout} */
+    this._layoutState = {
+      expanded: false,
+      width: 0,
+      toolbarWidth: 0,
+    };
+
     // Initial layout notification
-    this._notifyOfLayoutChange(false);
+    this._updateLayoutState(false);
     this._setupSidebarEvents();
   }
 
@@ -285,6 +292,8 @@ export class Sidebar {
 
     guestRPC.connect(port);
     this._guestRPC.push(guestRPC);
+
+    guestRPC.call('sidebarLayoutChanged', this._layoutState);
   }
 
   _setupSidebarEvents() {
@@ -388,19 +397,23 @@ export class Sidebar {
         if (width >= MIN_RESIZE) {
           this.iframeContainer.style.width = `${width}px`;
         }
-        this._notifyOfLayoutChange();
+        this._updateLayoutState();
       }
     });
   }
 
   /**
-   * Notify integrator when sidebar is opened, closed or resized.
+   * Update the current layout state and notify the embedder if they provided
+   * an `onLayoutChange` callback in the Hypothesis config, as well as guests
+   * so they can enable/adapt side-by-side mode.
+   *
+   * This is called when the sidebar is opened, closed or resized.
    *
    * @param {boolean} [expanded] -
    *   `true` or `false` if the sidebar is being directly opened or closed, as
    *   opposed to being resized via the sidebar's drag handles
    */
-  _notifyOfLayoutChange(expanded) {
+  _updateLayoutState(expanded) {
     // The sidebar structure is:
     //
     // [ Toolbar    ][                                   ]
@@ -446,6 +459,7 @@ export class Sidebar {
       toolbarWidth,
     });
 
+    this._layoutState = layoutState;
     if (this.onLayoutChange) {
       this.onLayoutChange(layoutState);
     }
@@ -536,7 +550,7 @@ export class Sidebar {
       this.setHighlightsVisible(true);
     }
 
-    this._notifyOfLayoutChange(true);
+    this._updateLayoutState(true);
   }
 
   close() {
@@ -551,7 +565,7 @@ export class Sidebar {
       this.setHighlightsVisible(false);
     }
 
-    this._notifyOfLayoutChange(false);
+    this._updateLayoutState(false);
   }
 
   /**

src/annotator/test/sidebar-test.js

@@ -856,6 +856,21 @@ describe('Sidebar', () => {
         });
       });
 
+      it('notifies new guests of current sidebar layout', () => {
+        sidebar.open();
+
+        connectGuest(sidebar);
+
+        assert.calledWith(
+          guestRPC().call,
+          'sidebarLayoutChanged',
+          sinon.match({
+            expanded: true,
+            width: DEFAULT_WIDTH + fakeToolbar.getWidth(),
+          })
+        );
+      });
+
       it('notifies when sidebar is panned left', () => {
         sidebar._gestureState = { initial: -DEFAULT_WIDTH };
         sidebar._onPan({ type: 'panleft', deltaX: -50 });