Move "no selectable text" warning banner into shadow DOM

For consistency with the rest of the UI elements rendered by the
annotator code, move the warning banner at the top of the PDF into
shadow DOM. This is also another step towards not needing to load any
global CSS (eg. our CSS reset) into the host page.

 - Change the container element for the banner from `<div>` to
   `<hypothesis-banner>` to match other `<hypothesis-*>` UI container
   elements
 - Move the `WarningBanner` component into `components/WarningBanner.js`
   and rename the CSS classes to match

src/annotator/components/WarningBanner.js

+import { SvgIcon } from '@hypothesis/frontend-shared';
+
+/**
+ * A banner shown at the top of the PDF viewer if the PDF cannot be annotated
+ * by Hypothesis.
+ */
+export default function WarningBanner() {
+  return (
+    <div className="WarningBanner WarningBanner--notice">
+      <div className="WarningBanner__type">
+        <SvgIcon name="caution" className="WarningBanner__icon" />
+      </div>
+      <div className="WarningBanner__message">
+        <strong>This PDF does not contain selectable text:</strong>{' '}
+        <a
+          target="_blank"
+          rel="noreferrer"
+          href="https://web.hypothes.is/help/how-to-ocr-optimize-pdfs/"
+        >
+          Learn how to fix this
+        </a>{' '}
+        in order to annotate with Hypothesis.
+      </div>
+    </div>
+  );
+}

src/annotator/plugin/pdf.js

-import { SvgIcon } from '@hypothesis/frontend-shared';
 import debounce from 'lodash.debounce';
 import { render } from 'preact';
 
 import * as pdfAnchoring from '../anchoring/pdf';
+import WarningBanner from '../components/WarningBanner';
 import Delegator from '../delegator';
 import RenderingStates from '../pdfjs-rendering-states';
+import { createShadowRoot } from '../util/shadow-root';
 
 import PDFMetadata from './pdf-metadata';
 
@@ -14,34 +15,6 @@ import PDFMetadata from './pdf-metadata';
  * @typedef {import('../../types/annotator').HypothesisWindow} HypothesisWindow
  */
 
-/**
- * A banner shown at the top of the PDF viewer if the PDF cannot be annotated
- * by Hypothesis.
- */
-function WarningBanner() {
-  return (
-    <>
-      <div className="annotator-pdf-warning-banner__type">
-        <SvgIcon
-          name="caution"
-          className="annotator-pdf-warning-banner__icon"
-        />
-      </div>
-      <div className="annotator-pdf-warning-banner__message">
-        <strong>This PDF does not contain selectable text:</strong>{' '}
-        <a
-          target="_blank"
-          rel="noreferrer"
-          href="https://web.hypothes.is/help/how-to-ocr-optimize-pdfs/"
-        >
-          Learn how to fix this
-        </a>{' '}
-        in order to annotate with Hypothesis.
-      </div>
-    </>
-  );
-}
-
 export default class PDF extends Delegator {
   /**
    * @param {Annotator} annotator
@@ -164,11 +137,21 @@ export default class PDF extends Delegator {
       this._warningBanner.style.top = -rect.height + 'px';
     };
 
-    this._warningBanner = document.createElement('div');
-    this._warningBanner.className =
-      'annotator-pdf-warning-banner annotator-pdf-warning-banner--notice';
+    this._warningBanner = document.createElement('hypothesis-banner');
+    Object.assign(this._warningBanner.style, {
+      // Position the banner at the top of the viewer and make it span the full width.
+      position: 'absolute',
+      left: '0',
+      right: '0',
+
+      // The Z-index is necessary to raise the banner above the toolbar at the
+      // top of the PDF.js viewer.
+      zIndex: '10000',
+    });
     mainContainer.appendChild(this._warningBanner);
-    render(<WarningBanner />, this._warningBanner);
+
+    const warningBannerContent = createShadowRoot(this._warningBanner);
+    render(<WarningBanner />, warningBannerContent);
 
     // nb. In browsers that don't support `ResizeObserver` the banner height
     // will simply be static and not adjust if the window is resized.

src/annotator/plugin/test/pdf-test.js

@@ -126,7 +126,7 @@ describe('annotator/plugin/pdf', () => {
   });
 
   function getWarningBanner() {
-    return document.querySelector('.annotator-pdf-warning-banner');
+    return document.querySelector('hypothesis-banner');
   }
 
   it('does not show a warning when PDF has selectable text', async () => {
@@ -163,7 +163,7 @@ describe('annotator/plugin/pdf', () => {
     assert.isNotNull(banner);
     assert.isTrue(mainContainer.contains(banner));
     assert.include(
-      banner.textContent,
+      banner.shadowRoot.textContent,
       'This PDF does not contain selectable text'
     );
 

src/styles/annotator/annotator.scss

@@ -4,7 +4,6 @@
 @use "sass:color" as color;
 
 @use '../variables' as var;
-@use '../mixins/molecules';
 @use '../mixins/reset';
 
 // Shared styles
@@ -15,6 +14,7 @@
 @use './components/AdderToolbar';
 @use './components/Buckets';
 @use './components/Toolbar';
+@use './components/WarningBanner';
 @use './highlights';
 @use './notebook';
 
@@ -86,20 +86,6 @@
   transition: none !important;
 }
 
-.annotator-pdf-warning-banner {
-  @include molecules.banner;
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-
-  font-size: var.$annotator-adder-font-size;
-
-  // The Z-index is necessary to raise the banner above the toolbar at the
-  // top of the PDF.js viewer.
-  z-index: 10000;
-}
-
 /** Affordances for clean theme */
 #{var.$annotator--theme-clean} {
   box-shadow: var.$annotator-shadow--sidebar;

src/styles/annotator/components/WarningBanner.scss

+@use '../mixins/molecules';
+@use '../variables' as var;
+
+.WarningBanner {
+  @include molecules.banner;
+  font-size: var.$annotator-adder-font-size;
+}