Add a settings button that supports:

- Enabling/disabling scroll-to-element on hover
- Enabling/disabling iframe download when downloading a webpage

Author: DimiDL

eslint.config.mjs

@@ -43,7 +43,7 @@ export default [
     },
   },
   {
-    files: ["extension/content/*.js"],
+    files: ["extension/content/*.js", "extension/content/*.mjs"],
     languageOptions: {
       globals: {
         ...globals.browser,

extension/background.js

@@ -395,11 +395,12 @@ class DownloadPageFeature {
     return html;
   }
 
-  static async freezePage(tabId, fieldDetails) {
+  static async freezePage(tabId, fieldDetails, includeIframe = true) {
     let frames = await browser.webNavigation.getAllFrames({ tabId });
     const mainFrame = frames.find((frame) => frame.parentFrameId == -1);
     const iframes = frames.filter(
       (frame) =>
+        includeIframe &&
         frame.parentFrameId == mainFrame.frameId &&
         !frame.url.startsWith("about:"),
     );
@@ -523,6 +524,7 @@ class GenerateTestFeature {
       let expectedField = {
         fieldName: fieldDetail.fieldName,
         reason: fieldDetail.reason,
+        "data-moz-autofill-inspect-id": fieldDetail.inspectId,
       };
       if (fieldDetail.part) {
         expectedField.part = fieldDetail.part;
@@ -666,24 +668,32 @@ async function handleMessage(request) {
     }
     // Download the page markup
     case "download-page": {
-      const { fieldDetails } = request;
+      const { fieldDetails, includeIframe } = request;
       const host = await getHostNameByTabId(tabId);
 
-      const pages = await DownloadPageFeature.freezePage(tabId, fieldDetails);
+      const pages = await DownloadPageFeature.freezePage(
+        tabId,
+        fieldDetails,
+        includeIframe,
+      );
       zipAndDownload(pages, host, "page");
       break;
     }
     // Generate a report with everything
     case "generate-report": {
-      const { panelDataUrl, fieldDetails } = request;
+      const { panelDataUrl, fieldDetails, includeIframe } = request;
       const host = await getHostNameByTabId(tabId);
 
       const screenshot = await DownloadPageFeature.screenshot(tabId);
       const inspect = await DownloadPageFeature.exportInspect(
         tabId,
         panelDataUrl,
       );
-      const pages = await DownloadPageFeature.freezePage(tabId, fieldDetails);
+      const pages = await DownloadPageFeature.freezePage(
+        tabId,
+        fieldDetails,
+        includeIframe,
+      );
       pages.forEach((page) => (page.filename = `page/${page.filename}`));
 
       const tests = await GenerateTestFeature.create(host, fieldDetails);

extension/content/autofill-inspector.js

@@ -136,6 +136,14 @@ class AutofillInspector {
   #originFieldNameByInspectId = new Map();
   #hasEverEdited = false;
 
+  #settings = {
+    // Setting to control whether we scroll the view to the hovered field.
+    scrollHover: false,
+
+    // Setting to control whether we include iframe when downloading the web page.
+    includeIframe: true,
+  };
+
   /**
    * Array contains the list of all inspected elements. This value
    * is set after calling `inspect` experiment API.
@@ -164,6 +172,17 @@ class AutofillInspector {
     ["autofill-add-credit-card-button", () => this.onAddOrRemoveTestRecord()],
   ];
 
+  #menuItemClickHandlers = [
+    [
+      "menuitem-scroll-hover",
+      (event) => this.onSelectScrollWhenHover(event.target),
+    ],
+    [
+      "menuitem-download-iframe",
+      (event) => this.onSelectIncludeIframeWhenDownload(event.target),
+    ],
+  ];
+
   /**
    * Array of <th> configuration of the header of inspect result table.
    */
@@ -189,16 +208,19 @@ class AutofillInspector {
 
   init() {
     // Helper to attach event listeners
-    const addEventListeners = (handlers, eventType) => {
+    const addEventListeners = (root, handlers, eventType) => {
       for (const [id, handler] of handlers) {
-        const element = document.getElementById(id);
-        element.addEventListener(eventType, (event) => handler(event));
+        const element = root.getElementById(id);
+        element?.addEventListener(eventType, (event) => handler(event));
       }
     };
 
     // Setup toolbar button and checkbox change handlers
-    addEventListeners(this.#buttonClickHandlers, "click");
-    addEventListeners(this.#checkboxChangeHandlers, "change");
+    addEventListeners(document, this.#buttonClickHandlers, "click");
+    addEventListeners(document, this.#checkboxChangeHandlers, "change");
+
+    const setting = document.getElementById("autofill-setting-button");
+    addEventListeners(setting.shadowRoot, this.#menuItemClickHandlers, "click");
 
     // Setup inspect result table
     const headerRow = document.getElementById("form-analysis-head-row");
@@ -213,6 +235,17 @@ class AutofillInspector {
         return th;
       }),
     );
+
+    this.initSettingMenuItems();
+  }
+
+  initSettingMenuItems() {
+    const setting = document.getElementById("autofill-setting-button");
+
+    let element = setting.shadowRoot.getElementById("menuitem-scroll-hover");
+    this.onSelectScrollWhenHover(element, true);
+    element = setting.shadowRoot.getElementById("menuitem-download-iframe");
+    this.onSelectIncludeIframeWhenDownload(element, true);
   }
 
   /**
@@ -299,7 +332,10 @@ class AutofillInspector {
     this.#updateProgress("downloading page");
     await this.waitForInspect();
 
-    sendMessage("download-page", { fieldDetails: this.#inspectedFieldDetails });
+    sendMessage("download-page", {
+      fieldDetails: this.#inspectedFieldDetails,
+      includeIframe: this.#settings.includeIframe,
+    });
   }
 
   async onGenerateReport() {
@@ -310,6 +346,7 @@ class AutofillInspector {
     sendMessage("generate-report", {
       panelDataUrl,
       fieldDetails: this.#inspectedFieldDetails,
+      includeIframe: this.#settings.includeIframe,
     });
   }
 
@@ -366,6 +403,28 @@ class AutofillInspector {
     event.target.classList.toggle("editing");
   }
 
+  onSelectScrollWhenHover(target, init = false) {
+    if (!init) {
+      this.#settings.scrollHover = !this.#settings.scrollHover;
+    }
+    if (this.#settings.scrollHover) {
+      target.classList.add("menuitem-selected");
+    } else {
+      target.classList.remove("menuitem-selected");
+    }
+  }
+
+  onSelectIncludeIframeWhenDownload(target, init = false) {
+    if (!init) {
+      this.#settings.includeIframe = !this.#settings.includeIframe;
+    }
+    if (this.#settings.includeIframe) {
+      target.classList.add("menuitem-selected");
+    } else {
+      target.classList.remove("menuitem-selected");
+    }
+  }
+
   onFilterFields() {
     this.#updateFieldsInfo(this.#inspectedFieldDetails);
   }
@@ -415,7 +474,9 @@ class AutofillInspector {
   }
 
   #scrollIntoView(fieldDetail) {
-    sendMessage("scroll-to", { fieldDetail });
+    if (this.#settings.scrollHover) {
+      sendMessage("scroll-to", { fieldDetail });
+    }
   }
 
   #addHighlightOverlay(type, fieldDetails) {

extension/content/devtools-panel.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" type="text/css" href="style/autofill.css">
     <script src="autofill-inspector.js"></script>
     <script src="libs/html2canvas.min.js"></script>
+    <script type="module" src="menu-button.mjs"></script>
   </head>
   <body class="theme-body">
     <div class="autofill-panel">
@@ -42,6 +43,8 @@
           <input id="autofill-add-credit-card-button" type="checkbox" class="devtools-checkbox"/>
           Show Test Credit Card
         </label>
+        <span class="devtools-separator"></span>
+        <menu-button id="autofill-setting-button" title="Setting" class="devtools-button autofill-setting-button"></menu-button>
       </div>
       <div class="field-list-container">
         <div class="field-list-scroll">
@@ -60,21 +63,13 @@
       </div>
     </div>
 
-    <template id="menu-template">
-      <div class="tooltip-container tooltip-bottom" type="doorhanger">
-        <div class="tooltip-panel">
-          <div role="menu" class="checkbox-container menu-standard-padding" id="menu-item-list"></div>
-        </div>
-        <div class="tooltip-arrow"></div>
-      </div>
-    </template>
-
-    <template id="menu-item-template">
-      <li class="menuitem" role="presentation">
-        <button class="command menu-item" role="menuitem">
-          <span class="label"></span>
-        </button>
-      </li>
+    <template id="menu-button-template">
+      <link rel="stylesheet" type="text/css" href="style/menu-button.css">
+      <ul class="menu" role="menu" hidden>
+        <button id="menuitem-scroll-hover" role="menuitem" class="menuitem-button ghost-button">Scroll When Hover</button>
+        <hr role="separator" class="menuitem-separator">
+        <button id="menuitem-download-iframe" role="menuitem" class="menuitem-button ghost-button">Download Iframe</button>
+      </ul>
     </template>
   </body>
 </html>