Only provided clustered highlights in integrations that support it

Allow an integration to declare whether or not it supports clustered
highlights. At this time, only HTML documents support the feature.

Fixes #4925

src/annotator/guest.js

@@ -199,11 +199,6 @@ export class Guest {
     });
 
     this.features = new FeatureFlags();
-
-    this._clusterToolbar = new HighlightClusterController(element, {
-      features: this.features,
-    });
-
     /**
      * Integration that handles document-type specific functionality in the
      * guest.
@@ -217,6 +212,12 @@ export class Guest {
       this._integration.showContentInfo?.(config.contentInfoBanner);
     }
 
+    if (this._integration.canStyleClusteredHighlights?.()) {
+      this._clusterToolbar = new HighlightClusterController(element, {
+        features: this.features,
+      });
+    }
+
     /**
      * Channel for host-guest communication.
      *
@@ -485,6 +486,7 @@ export class Guest {
     this._selectionObserver.disconnect();
     this._adder.destroy();
     this._bucketBarClient.destroy();
+    this._clusterToolbar?.destroy();
 
     removeAllHighlights(this.element);
 

src/annotator/integrations/html.js

@@ -109,6 +109,10 @@ export class HTMLIntegration extends TinyEmitter {
     return true;
   }
 
+  canStyleClusteredHighlights() {
+    return true;
+  }
+
   destroy() {
     this._navObserver.disconnect();
     this._metaObserver.disconnect();

src/annotator/test/guest-test.js

@@ -39,6 +39,8 @@ describe('Guest', () => {
 
   let FakeBucketBarClient;
   let fakeBucketBarClient;
+  let fakeHighlightClusterController;
+  let FakeHighlightClusterController;
   let fakeCreateIntegration;
   let fakeFindClosestOffscreenAnchor;
   let fakeFrameFillsAncestor;
@@ -124,6 +126,13 @@ describe('Guest', () => {
     };
     FakeBucketBarClient = sinon.stub().returns(fakeBucketBarClient);
 
+    fakeHighlightClusterController = {
+      destroy: sinon.stub(),
+    };
+    FakeHighlightClusterController = sinon
+      .stub()
+      .returns(fakeHighlightClusterController);
+
     fakeFindClosestOffscreenAnchor = sinon.stub();
 
     fakeFrameFillsAncestor = sinon.stub().returns(true);
@@ -131,6 +140,7 @@ describe('Guest', () => {
     fakeIntegration = Object.assign(new TinyEmitter(), {
       anchor: sinon.stub(),
       canAnnotate: sinon.stub().returns(true),
+      canStyleClusteredHighlights: sinon.stub().returns(false),
       contentContainer: sinon.stub().returns({}),
       describe: sinon.stub(),
       destroy: sinon.stub(),
@@ -172,6 +182,9 @@ describe('Guest', () => {
       './bucket-bar-client': {
         BucketBarClient: FakeBucketBarClient,
       },
+      './highlight-clusters': {
+        HighlightClusterController: FakeHighlightClusterController,
+      },
       './highlighter': highlighter,
       './integrations': {
         createIntegration: fakeCreateIntegration,
@@ -1330,6 +1343,14 @@ describe('Guest', () => {
       guest.destroy();
       assert.called(sidebarRPC().destroy);
     });
+
+    it('removes the clustered highlights toolbar', () => {
+      fakeIntegration.canStyleClusteredHighlights.returns(true);
+
+      const guest = createGuest();
+      guest.destroy();
+      assert.called(fakeHighlightClusterController.destroy);
+    });
   });
 
   it('discovers and creates a channel for communication with the sidebar', async () => {
@@ -1373,6 +1394,22 @@ describe('Guest', () => {
     });
   });
 
+  it('does not create a HighlightClusterController if the integration does not support clustered highlights', () => {
+    fakeIntegration.canStyleClusteredHighlights.returns(false);
+
+    createGuest();
+
+    assert.notCalled(FakeHighlightClusterController);
+  });
+
+  it('creates a HighlightClustersController if the integration supports clustered highlights', () => {
+    fakeIntegration.canStyleClusteredHighlights.returns(true);
+
+    createGuest();
+
+    assert.calledOnce(FakeHighlightClusterController);
+  });
+
   it('sends document metadata and URIs to sidebar', async () => {
     createGuest();
     await delay(0);

src/types/annotator.ts

@@ -162,6 +162,10 @@ export type IntegrationBase = {
    * of the current document.
    */
   canAnnotate(range: Range): boolean;
+  /**
+   * Return whether this integration supports styling multiple clusters of highlights
+   */
+  canStyleClusteredHighlights?(): boolean;
   /**
    * Attempt to resolve a set of serialized selectors to the corresponding content in the current document.
    */