fix field order in querrying

PhilippRecke · Dec 6, 2023 · 67e97c4 · 67e97c4
1 parent a4d9f54
commit 67e97c4
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 18 deletions.
diff --git a/dist/content-script.js b/dist/content-script.js
diff --git a/dist/manifest.json b/dist/manifest.json
@@ -1,7 +1,7 @@
 {
     "name": "Autocomplete-Check",
     "description": "Easily check autocomplete values on input-elements",
-    "version": "1.0",
+    "version": "1.0.0",
     "manifest_version": 3,
     "author": "Philipp Recke",  
     "homepage_url": "https://github.com/PhilippRecke/Autocomplete-Check",
@@ -32,4 +32,4 @@
         "64": "icon64-g.png",
         "128": "icon128-g.png"
     }
-}
+}
diff --git a/dist/service-worker.js b/dist/service-worker.js
diff --git a/src/content-script.ts b/src/content-script.ts
@@ -1,7 +1,7 @@
 import { generateAutocompleteBadge } from "./badge/badge";
 import { generateMatchingItem, matchingItem, matchingTable } from "./matching/matching";
 import { generateFloatingInfoTable, removeFloatingInfoTable } from "./badge/badge"
-import { dbSiteItemNoForms } from "./db/dbtypes";
+import { dbFieldItem, dbFormItem, dbSiteItemNoForms } from "./db/dbtypes";
 
 export type matchingItemWithId = {
     addToDB: boolean | undefined,
@@ -28,11 +28,14 @@ const setHighlighting = async () => {
     // const response = await chrome.runtime.sendMessage({ msg: "acc.updateBadgeText" });
 
     //TODO check which shall be retrieved
-    const inputElements = document.getElementsByTagName("input");
-    const inputElements2 = document.getElementsByTagName("textarea");
-    const inputElements3 = document.getElementsByTagName("select");
+    //const inputElements = document.getElementsByTagName("input");
+    //const inputElements2 = document.getElementsByTagName("textarea");
+    //const inputElements3 = document.getElementsByTagName("select");
+    //const combinedElements = [...inputElements, ...inputElements2, ...inputElements3];
+    const combinedElements = Array.from(document.querySelectorAll('input, textarea, select')) as Array<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
 
-    const combinedElements = [...inputElements, ...inputElements2, ...inputElements3];
+    //dict to store position of filed inside individual forms <formId, numOfFieldsYet>
+    const formsPositions: Record<string, number> = {};
 
     if (currentHighlightState) {
 
@@ -74,9 +77,20 @@ const setHighlighting = async () => {
                 continue;
             }
 
+            let posInForm = -1;
+            if (parentFormIdAndName?.id !== undefined){
+                if (formsPositions[parentFormIdAndName.id] === undefined) {
+                    formsPositions[parentFormIdAndName.id] = 0;
+                    posInForm = 0;
+                } else {
+                    const newPosition = formsPositions[parentFormIdAndName.id] + 1;
+                    formsPositions[parentFormIdAndName.id] = newPosition;
+                    posInForm = newPosition;
+                }
+            }
 
             // analyze item
-            const matchingItem = generateMatchingItem(element, document, i, parentFormIdAndName?.id, -1);
+            const matchingItem = generateMatchingItem(element, document, i, posInForm, parentFormIdAndName?.id);
 
             // do plugin auto classification
             const classificationResult = await chrome.runtime.sendMessage({ msg: "acc.classifyField", data: matchingItem });
@@ -164,10 +178,13 @@ const getNewBadgeId = async () => {
     return `acc-badgeNo${newIdCounter}`;
 }
 
+//TODO generate more form data
 const getParentFormIdAndName = (element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) => {
     const forms = document.getElementsByTagName("form");
-    for (const form of forms) {
+    for (let i = 0; i < forms.length; i++) {
+        const form = forms[i];
         if (form.contains(element)) {
+            const tmpFormItem: dbFormItem = {id: form.id, numOfLabeledFields: -1, numOfFields: -1, positionInForms: i, };
             return {id: form.id, name: form.name};
         }
     }
@@ -202,6 +219,22 @@ const addCurrentFormToDB = async () => {
         return dbFieldItem
     });
 
+    const uniqueFormIds = [... new Set(hydratedData.map((field) => (field.formId)))];
+
+    const generateFormById = (id: string | null) => {
+        const formItem: dbFormItem = {
+            id: id,
+            numOfLabeledFields: -1,
+            numOfFields: -1,
+            positionInForms: -1,
+            headingTexts:null,
+            submitText: null,
+            autocomplete: null,
+
+            fields: hydratedData.filter((item) => item.formId === id)
+        }
+    }
+
     // TODO swap with version that supports forms
     const dbItemNoForms: dbSiteItemNoForms = {
         dataVersion: 1,

diff --git a/src/db/dbtypes.ts b/src/db/dbtypes.ts
@@ -12,7 +12,9 @@ export type dbSiteItem = {
     looseFields: dbFieldItem[];
 
     numOfLabeledFields: number;
+    numOfFields: number;
     numOfLabeledForms: number;
+    numOfForms: number;
 }
 
 export type dbSiteItemNoForms = {
@@ -33,6 +35,7 @@ export type dbSiteItemNoForms = {
 export type dbFormItem = {
     id: string | null;
     numOfLabeledFields: number;
+    numOfFields: number;
     positionInForms: number;
     headingTexts: string[] | null;  // text-content of headings inside form
     submitText: string  | null;
@@ -45,9 +48,9 @@ export type dbFieldItem = {
     id: string | null;
 
     formId: string | null;
-    positionInForm: number | null;
+    positionInForm: number;
     formHeadings: string[] | null;
-    positionInFields: number;
+    positionInFields: number; //global position in all inputs/textareas/selects on site
 
     label: string | null;
     name: string | null;

diff --git a/src/matching/matching.ts b/src/matching/matching.ts
@@ -35,7 +35,7 @@ type matchResult = {
 }
 
 
-export const generateMatchingItem = (input: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, document: Document, posInFields: number, formId?: string, posInForm?: number) => {
+export const generateMatchingItem = (input: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, document: Document, posInFields: number, posInForm: number, formId?: string) => {
 
     const labelList = [...document.getElementsByTagName('label')]
         .filter(label => label.htmlFor == input.id);
@@ -55,7 +55,7 @@ export const generateMatchingItem = (input: HTMLInputElement | HTMLTextAreaEleme
         id: input.id,
 
         formId: formId? formId : null,
-        positionInForm: posInForm? posInForm : null,
+        positionInForm: posInForm,
         formHeadings: getHeadingsOfForm(document, formId),
         positionInFields: posInFields,
         label: labelList[0]?.textContent?.trim() ?? null,
@@ -68,7 +68,7 @@ export const generateMatchingItem = (input: HTMLInputElement | HTMLTextAreaEleme
         ariaHidden: input.getAttribute("aria-hidden") as boolean | null,
         inputType: input.type as inputType, //TODO error, when invalid type?
         fieldType: input.tagName.toLowerCase(),
-        isInTable: input.getAttribute("disabled") as boolean | null,
+        isInTable: isElementInsideTableCell(input),
         autocomplete: input.getAttribute("autocomplete"),
         correctAutocomplete: null,
 
@@ -363,3 +363,14 @@ const getHeadingsOfForm = (doc: Document, formId?: string) => {
 
     return headings;
 }
+
+const isElementInsideTableCell = (element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) => {
+    let tmpElement: HTMLElement | null = element;
+    while (tmpElement && tmpElement.tagName !== 'HTML') {
+      if (tmpElement.tagName === 'TD') {
+        return true; // The element is inside a table cell
+      }
+      tmpElement = tmpElement.parentNode as HTMLElement;
+    }
+    return false; // The element is not inside a table cell
+  }
diff --git a/src/test/formfields.test.ts b/src/test/formfields.test.ts
@@ -34,6 +34,6 @@ const testElementWithId = async (id: string) => {
         throw new Error(`Element with id "${id}" was not found in document.`);
     }
 
-    const matchingItem = generateMatchingItem(element, myDocument, -1);
+    const matchingItem = generateMatchingItem(element, myDocument, -1, -1);
     return analyzeField(matchingItem);
 }
diff --git a/src/test/matchingClasses.test.ts b/src/test/matchingClasses.test.ts
@@ -7,7 +7,7 @@ test('substring full match', async () => {
         id: null,
 
         formId: null,
-        positionInForm: null,
+        positionInForm: -1,
         formHeadings: null,
         positionInFields: -1,
         label: "Telefonnummer",