[api-minor] Make the popup independent of their associated annotations

- it'll help to be able to move popups on screen to let the user read the text
- popups won't inherit some properties from their parent:
  - the popup can be misrendered if for example the parent has a clip-path property.
- add an outline to the popup when the parent is focused.
- hide a popup when it's clicked.

test/annotation_layer_builder_overrides.css

@@ -30,14 +30,18 @@
 }
 
 .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a,
-.annotationLayer .popupTriggerArea {
+.annotationLayer .popupTriggerArea::after,
+.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
   opacity: 0.2;
   background: rgba(255, 255, 0, 1);
   box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
 }
 
-.annotationLayer :is(.popupAnnotation, .popupWrapper) {
+.annotationLayer .popupTriggerArea::after {
   display: block;
+  width: 100%;
+  height: 100%;
+  content: "";
 }
 
 .annotationLayer .popup :is(h1, p) {

test/driver.js

@@ -223,9 +223,7 @@ class Rasterize {
 
       // Rendering annotation layer as HTML.
       const parameters = {
-        viewport: annotationViewport,
         annotations,
-        page,
         linkService: new SimpleLinkService(),
         imageResourcesPath,
         renderForms,
@@ -233,8 +231,12 @@ class Rasterize {
       const annotationLayer = new AnnotationLayer({
         div,
         annotationCanvasMap: annotationImageMap,
+        page,
+        l10n,
+        viewport: annotationViewport,
       });
       annotationLayer.render(parameters);
+      await annotationLayer.showPopups();
       await l10n.translate(div);
 
       // Inline SVG images from text annotations.

test/integration/annotation_spec.js

@@ -21,7 +21,7 @@ const {
 } = require("./test_utils.js");
 
 describe("Annotation highlight", () => {
-  describe("annotation-highlight.pdf", () => {
+  fdescribe("annotation-highlight.pdf", () => {
     let pages;
 
     beforeAll(async () => {

test/unit/annotation_spec.js

@@ -623,7 +623,7 @@ describe("annotation", function () {
       expect(data.creationDate).toEqual("D:20180423");
       expect(data.modificationDate).toEqual("D:20190423");
       expect(data.color).toEqual(new Uint8ClampedArray([0, 0, 255]));
-      expect(data.hasPopup).toEqual(true);
+      expect(data.popupRef).toEqual("820R");
     });
 
     it("should parse IRT/RT for a reply type", async function () {
@@ -678,7 +678,7 @@ describe("annotation", function () {
       expect(data.creationDate).toEqual("D:20180523");
       expect(data.modificationDate).toEqual("D:20190523");
       expect(data.color).toEqual(new Uint8ClampedArray([102, 102, 102]));
-      expect(data.hasPopup).toEqual(false);
+      expect(data.popupRef).toEqual(null);
     });
   });