Render interactive form (AcroForm) text widget annotations

This patch is the first step towards implementing support for
interactive forms (AcroForms). It makes it possible to render text
widget annotations exactly like Adobe Reader/Acrobat.

Everything we implement for AcroForms is disabled by default using a
preference, mainly because it is not ready to use yet, but has to
implemented in many steps to avoid complexity. The preference allows us
to work with the code while not exposing the behavior by default. Mainly
storing entered values and printing them is still absent, which would be
minimal requirements for enabling this by default.

extensions/chromium/preferences_schema.json

@@ -94,6 +94,10 @@
       "type": "boolean",
       "description": "Whether to prevent the extension from reporting the extension and browser version to the extension developers.",
       "default": false
+    },
+    "renderInteractiveForms": {
+      "type": "boolean",
+      "default": false
     }
   }
 }

src/display/annotation_layer.js

@@ -45,6 +45,8 @@ var getDefaultSetting = displayDOMUtils.getDefaultSetting;
  * @property {PageViewport} viewport
  * @property {IPDFLinkService} linkService
  * @property {DownloadManager} downloadManager
+ * @property {string} imageResourcesPath
+ * @property {boolean} renderInteractiveForms
  */
 
 /**
@@ -115,6 +117,7 @@ var AnnotationElement = (function AnnotationElementClosure() {
     this.linkService = parameters.linkService;
     this.downloadManager = parameters.downloadManager;
     this.imageResourcesPath = parameters.imageResourcesPath;
+    this.renderInteractiveForms = parameters.renderInteractiveForms;
 
     if (isRenderable) {
       this.container = this._createContainer();
@@ -437,18 +440,28 @@ var TextWidgetAnnotationElement = (
      * @returns {HTMLSectionElement}
      */
     render: function TextWidgetAnnotationElement_render() {
-      var content = document.createElement('div');
-      content.textContent = this.data.fieldValue;
-      var textAlignment = this.data.textAlignment;
-      content.style.textAlign = ['left', 'center', 'right'][textAlignment];
-      content.style.verticalAlign = 'middle';
-      content.style.display = 'table-cell';
+      this.container.className = 'textWidgetAnnotation';
 
-      var font = (this.data.fontRefName ?
-        this.page.commonObjs.getData(this.data.fontRefName) : null);
-      this._setTextStyle(content, font);
+      if (this.renderInteractiveForms) {
+        var input = document.createElement('input');
+        input.type = 'text';
+        input.value = this.data.fieldValue;
 
-      this.container.appendChild(content);
+        this.container.appendChild(input);
+      } else {
+        var content = document.createElement('div');
+        content.textContent = this.data.fieldValue;
+        var textAlignment = this.data.textAlignment;
+        content.style.textAlign = ['left', 'center', 'right'][textAlignment];
+        content.style.verticalAlign = 'middle';
+        content.style.display = 'table-cell';
+
+        var font = (this.data.fontRefName ?
+          this.page.commonObjs.getData(this.data.fontRefName) : null);
+        this._setTextStyle(content, font);
+
+        this.container.appendChild(content);
+      }
       return this.container;
     },
 
@@ -875,6 +888,7 @@ var FileAttachmentAnnotationElement = (
  * @property {PDFPage} page
  * @property {IPDFLinkService} linkService
  * @property {string} imageResourcesPath
+ * @property {boolean} renderInteractiveForms
  */
 
 /**
@@ -907,7 +921,8 @@ var AnnotationLayer = (function AnnotationLayerClosure() {
           linkService: parameters.linkService,
           downloadManager: parameters.downloadManager,
           imageResourcesPath: parameters.imageResourcesPath ||
-                              getDefaultSetting('imageResourcesPath')
+                              getDefaultSetting('imageResourcesPath'),
+          renderInteractiveForms: parameters.renderInteractiveForms || false,
         };
         var element = annotationElementFactory.create(properties);
         if (element.isRenderable) {

src/display/global.js

@@ -243,6 +243,13 @@
   PDFJS.isEvalSupported = (PDFJS.isEvalSupported === undefined ?
                            true : PDFJS.isEvalSupported);
 
+  /**
+   * Renders interactive form elements.
+   * @var {boolean}
+   */
+  PDFJS.renderInteractiveForms = (PDFJS.renderInteractiveForms === undefined ?
+                                  false : PDFJS.renderInteractiveForms);
+
 //#if !MOZCENTRAL
   var savedOpenExternalLinksInNewWindow = PDFJS.openExternalLinksInNewWindow;
   delete PDFJS.openExternalLinksInNewWindow;

web/annotation_layer_builder.css

@@ -41,6 +41,26 @@
   cursor: pointer;
 }
 
+.annotationLayer .textWidgetAnnotation input {
+  background-color: rgba(0, 54, 255, 0.13);
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  font-size: 9px;
+  height: 100%;
+  padding: 0 3px;
+  vertical-align: top;
+  width: 100%;
+}
+
+.annotationLayer .textWidgetAnnotation input:hover {
+  border: 1px solid #000;
+}
+
+.annotationLayer .textWidgetAnnotation input:focus {
+  background: none;
+  border: 1px solid transparent;
+}
+
 .annotationLayer .popupWrapper {
   position: absolute;
   width: 20em;

web/annotation_layer_builder.js

@@ -78,7 +78,8 @@ var AnnotationLayerBuilder = (function AnnotationLayerBuilderClosure() {
           annotations: annotations,
           page: self.pdfPage,
           linkService: self.linkService,
-          downloadManager: self.downloadManager
+          downloadManager: self.downloadManager,
+          renderInteractiveForms: pdfjsLib.PDFJS.renderInteractiveForms,
         };
 
         if (self.div) {

web/app.js

@@ -359,6 +359,9 @@ var PDFViewerApplication = {
         }
         PDFJS.externalLinkTarget = value;
       }),
+      Preferences.get('renderInteractiveForms').then(function resolved(value) {
+        PDFJS.renderInteractiveForms = value;
+      }),
       // TODO move more preferences and other async stuff here
     ]).catch(function (reason) { });
 

web/default_preferences.json

@@ -11,5 +11,6 @@
   "disableFontFace": false,
   "disableTextLayer": false,
   "useOnlyCssZoom": false,
-  "externalLinkTarget": 0
+  "externalLinkTarget": 0,
+  "renderInteractiveForms": false
 }