Migrate to Playwright

.github/workflows/node.js.yml

@@ -79,13 +79,22 @@ jobs:
       - name: Install dependencies
         run: npm ci # clean install
 
+      - name: Install Playwright Browsers
+        run: |
+          npx playwright install --with-deps
+          sudo apt-get update
+          sudo apt-get install -y xvfb
+
       - name: Build
         run: |
           export PATH=${PATH}:`go env GOPATH`/bin
           npm run build
 
       - name: Test
-        run: npm run test
+        run: |
+          export DISPLAY=:99
+          Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
+          npm test
 
       # TODO: add automatic release notes
       # TODO: add cronjobs for automatically triggering new release candidates

.gitignore

@@ -24,3 +24,8 @@ DS_store
 cypress
 tsconfig.tsbuildinfo
 .rollup.cache
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+**/chromeData/*

build/UserALEWebExtension/background.js

@@ -268,7 +268,7 @@ class Configuration {
     /**
      * Shallow merges a newConfig with the configuration class, updating it.
      * Retrieves/updates the userid if userFromParams is provided.
-     * @param  {Settings.Config} newConfig Configuration object to merge into the current config.
+     * @param  {Partial<Settings.Config>} newConfig Configuration object to merge into the current config.
      */
     update(newConfig) {
         Object.keys(newConfig).forEach((option) => {
@@ -286,7 +286,10 @@ class Configuration {
             if (willNullifyUserId && hasNewUserFromParams) {
                 return;
             }
-            this[option] = newConfig[option];
+            const newOption = newConfig[option];
+            if (newOption !== undefined) {
+                this[option] = newOption;
+            }
         });
     }
     /**
@@ -1195,7 +1198,7 @@ const version = version$1;
 /**
  * Updates the current configuration
  * object with the provided values.
- * @param  {Settings.Config} newConfig The configuration options to use.
+ * @param  {Partial<Settings.Config>} newConfig The configuration options to use.
  * @return {Settings.Config}           Returns the updated configuration.
  */
 function options(newConfig) {
@@ -1238,6 +1241,7 @@ function log(customLog) {
 /* eslint-disable */
 // browser is defined in firefox, but chrome uses the 'chrome' global.
 var browser = window.browser || chrome;
+const configKey = "useraleConfigPayload";
 /* eslint-enable */
 
 /*
@@ -1304,11 +1308,14 @@ function updateTabToHttpSessionMapping(message, sender) {
  * @param {Extension.ConfigPayload} config The extension config to apply
  * @return {void}
  */
-function updateConfig(config) {
-    urlWhitelist = new RegExp(config.pluginConfig.urlWhitelist);
-    options(config.useraleConfig);
-    // TODO: tabs need a page load to apply this config change.
-    dispatchTabMessage(config.useraleConfig);
+function updateConfig(payload) {
+    urlWhitelist = new RegExp(payload.pluginConfig.urlWhitelist);
+    options(payload.useraleConfig);
+    browser.storage.local.set({ [configKey]: payload });
+    dispatchTabMessage({
+        type: CONFIG_CHANGE,
+        payload: payload.useraleConfig,
+    });
 }
 /**
  * Send a message to all tabs
@@ -1343,7 +1350,8 @@ function filterUrl(log) {
  * @return {Object} The transformed log
  */
 function injectSessions(log) {
-    const id = (log === null || log === void 0 ? void 0 : log.details).id;
+    var _a;
+    const id = (_a = log.details) === null || _a === void 0 ? void 0 : _a.id;
     if (id && id in tabToHttpSession) {
         log.httpSessionId = tabToHttpSession[id];
     }
@@ -1355,10 +1363,15 @@ function injectSessions(log) {
 }
 // @ts-expect-error Typescript is not aware that firefox's broswer is overloaded
 // to support chromium style MV2 callbacks
-browser.storage.local.get(defaultConfig, (res) => {
+browser.storage.local.get([configKey], (res) => {
+    if (res[configKey]) {
+        updateConfig(res[configKey]);
+    }
+    else {
+        updateConfig(defaultConfig);
+    }
     // Apply url filter to logs generated by the background page.
     addCallbacks({ filterUrl, injectSessions });
-    updateConfig(res);
     const userAleHttpSessionId = window.sessionStorage.getItem("userAleHttpSessionId");
     browserSessionId = userAleHttpSessionId
         ? JSON.parse(userAleHttpSessionId)
@@ -1402,7 +1415,7 @@ function packageTabLog(tabId, data, type) {
  */
 function packageDetailedTabLog(tab, data, type) {
     Object.assign(data, { type });
-    // Two fields in the Tab interface do no match our serializable JSONObject interface
+    // Two fields in the Tab interface do not match our serializable JSONObject interface
     // remove them before create custom log
     const restOfTab = __rest(tab, ["mutedInfo", "sharingState"]);
     const payload = Object.assign({}, restOfTab);
@@ -1447,4 +1460,3 @@ browser.tabs.onZoomChange.addListener((ZoomChangeInfo) => {
     const payload = Object.assign({}, restOfTab);
     packageTabLog(ZoomChangeInfo.tabId, payload, "tabs.onZoomChange");
 });
-//# sourceMappingURL=background.js.map

build/UserALEWebExtension/content.js

@@ -215,7 +215,7 @@ class Configuration {
     /**
      * Shallow merges a newConfig with the configuration class, updating it.
      * Retrieves/updates the userid if userFromParams is provided.
-     * @param  {Settings.Config} newConfig Configuration object to merge into the current config.
+     * @param  {Partial<Settings.Config>} newConfig Configuration object to merge into the current config.
      */
     update(newConfig) {
         Object.keys(newConfig).forEach((option) => {
@@ -233,7 +233,10 @@ class Configuration {
             if (willNullifyUserId && hasNewUserFromParams) {
                 return;
             }
-            this[option] = newConfig[option];
+            const newOption = newConfig[option];
+            if (newOption !== undefined) {
+                this[option] = newOption;
+            }
         });
     }
     /**
@@ -1140,7 +1143,7 @@ function setup(config) {
 /**
  * Updates the current configuration
  * object with the provided values.
- * @param  {Settings.Config} newConfig The configuration options to use.
+ * @param  {Partial<Settings.Config>} newConfig The configuration options to use.
  * @return {Settings.Config}           Returns the updated configuration.
  */
 function options(newConfig) {
@@ -1169,6 +1172,7 @@ function options(newConfig) {
 /* eslint-disable */
 // browser is defined in firefox, but chrome uses the 'chrome' global.
 var browser = window.browser || chrome;
+const configKey = "useraleConfigPayload";
 function rerouteLog(log) {
     browser.runtime.sendMessage({ type: ADD_LOG, payload: log });
     return false;
@@ -1191,11 +1195,11 @@ function rerouteLog(log) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-browser.storage.local.get("useraleConfig", 
+browser.storage.local.get([configKey], 
 // @ts-expect-error Typescript is not aware that firefox's broswer is overloaded
 // to support chromium style MV2 callbacks
 (res) => {
-    options(res.useraleConfig);
+    options(res[configKey].useraleConfig);
     addCallbacks({ rerouteLog });
     // Send httpSession to background scirpt to inject into tab events.
     const userAleHttpSessionId = window.sessionStorage.getItem("userAleHttpSessionId");
@@ -1208,8 +1212,8 @@ browser.storage.local.get("useraleConfig",
 });
 // TODO: Add types for message
 browser.runtime.onMessage.addListener(function (message) {
+    console.log(message);
     if (message.type === CONFIG_CHANGE) {
         options(message.payload);
     }
 });
-//# sourceMappingURL=content.js.map

build/UserALEWebExtension/globals.d.ts

@@ -20,4 +20,5 @@
 /// <reference types="firefox-webext-browser" />
 import type { Logging } from "@/types";
 export declare var browser: typeof globalThis.browser;
+export declare const configKey = "useraleConfigPayload";
 export declare function rerouteLog(log: Logging.Log): boolean;

build/UserALEWebExtension/options.js

@@ -214,7 +214,7 @@ class Configuration {
     /**
      * Shallow merges a newConfig with the configuration class, updating it.
      * Retrieves/updates the userid if userFromParams is provided.
-     * @param  {Settings.Config} newConfig Configuration object to merge into the current config.
+     * @param  {Partial<Settings.Config>} newConfig Configuration object to merge into the current config.
      */
     update(newConfig) {
         Object.keys(newConfig).forEach((option) => {
@@ -232,7 +232,10 @@ class Configuration {
             if (willNullifyUserId && hasNewUserFromParams) {
                 return;
             }
-            this[option] = newConfig[option];
+            const newOption = newConfig[option];
+            if (newOption !== undefined) {
+                this[option] = newOption;
+            }
         });
     }
     /**
@@ -1139,7 +1142,7 @@ function setup(config) {
 /**
  * Updates the current configuration
  * object with the provided values.
- * @param  {Settings.Config} newConfig The configuration options to use.
+ * @param  {Partial<Settings.Config>} newConfig The configuration options to use.
  * @return {Settings.Config}           Returns the updated configuration.
  */
 function options(newConfig) {
@@ -1168,6 +1171,7 @@ function options(newConfig) {
 /* eslint-disable */
 // browser is defined in firefox, but chrome uses the 'chrome' global.
 var browser = window.browser || chrome;
+const configKey = "useraleConfigPayload";
 function rerouteLog(log) {
     browser.runtime.sendMessage({ type: ADD_LOG, payload: log });
     return false;
@@ -1218,18 +1222,16 @@ function setConfig() {
                 .value,
         },
     };
-    // @ts-expect-error Typescript is not aware that firefox's broswer is overloaded
-    // to support chromium style MV2 callbacks
-    browser.storage.local.set(payload, () => {
-        options(config);
-        browser.runtime.sendMessage({ type: CONFIG_CHANGE, payload });
-    });
+    options(config);
+    browser.runtime.sendMessage({ type: CONFIG_CHANGE, payload });
 }
 function getConfig() {
     // @ts-expect-error Typescript is not aware that firefox's broswer is overloaded
     // to support chromium style MV2 callbacks
-    browser.storage.local.get("useraleConfig", (res) => {
-        const config = res.useraleConfig;
+    browser.storage.local.get([configKey], (res) => {
+        const payload = res[configKey];
+        console.log(payload);
+        const config = payload.useraleConfig;
         options(config);
         document.getElementById("url").value = config.url;
         document.getElementById("user").value =
@@ -1238,15 +1240,9 @@ function getConfig() {
             config.toolName;
         document.getElementById("toolVersion").value =
             config.toolVersion;
-    });
-    browser.storage.local.get("pluginConfig", 
-    // @ts-expect-error Typescript is not aware that firefox's broswer is overloaded
-    // to support chromium style MV2 callbacks
-    (res) => {
         document.getElementById("filter").value =
-            res.pluginConfig.urlWhitelist;
+            payload.pluginConfig.urlWhitelist;
     });
 }
 document.addEventListener("DOMContentLoaded", getConfig);
 document.addEventListener("submit", setConfig);
-//# sourceMappingURL=options.js.map

build/UserALEWebExtension/optionsPage.html

@@ -50,7 +50,7 @@ <h1>Options</h1>
       <br />
 
       <div align="right">
-        <button type="submit">Save</button>
+        <button type="submit" id="submit">Save</button>
       </div>
     </form>
   </body>

build/configure.d.ts

@@ -51,9 +51,9 @@ export declare class Configuration {
     /**
      * Shallow merges a newConfig with the configuration class, updating it.
      * Retrieves/updates the userid if userFromParams is provided.
-     * @param  {Settings.Config} newConfig Configuration object to merge into the current config.
+     * @param  {Partial<Settings.Config>} newConfig Configuration object to merge into the current config.
      */
-    update(newConfig: Settings.DefaultConfig): void;
+    update(newConfig: Partial<Settings.Config>): void;
     /**
      * Attempts to extract the userid from the query parameters of the URL.
      * @param  {string} param The name of the query parameter containing the userid.

build/main.d.ts

@@ -35,10 +35,10 @@ export declare function stop(): void;
 /**
  * Updates the current configuration
  * object with the provided values.
- * @param  {Settings.Config} newConfig The configuration options to use.
+ * @param  {Partial<Settings.Config>} newConfig The configuration options to use.
  * @return {Settings.Config}           Returns the updated configuration.
  */
-export declare function options(newConfig: Settings.Config | undefined): Settings.Config;
+export declare function options(newConfig: Partial<Settings.Config> | undefined): Settings.Config;
 /**
  * Appends a log to the log queue.
  * @param  {Logging.CustomLog} customLog The log to append.