Migrate to playwright

.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

@@ -1238,6 +1238,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 +1305,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 +1347,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 +1360,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 +1412,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 +1457,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

@@ -1169,6 +1169,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 +1192,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 +1209,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

@@ -1168,6 +1168,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 +1219,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 +1237,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/userale.d.ts

@@ -154,7 +154,7 @@ declare namespace Callbacks {
 declare namespace Extension {
   export type PluginConfig = { urlWhitelist: string };
   export type ConfigPayload = {
-    useraleConfig: Settings.Config;
+    useraleConfig: Settings.Config<Partial>;
     pluginConfig: PluginConfig;
   };
 }

example/no-logging.html

@@ -0,0 +1,76 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+  http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<html>
+<head>
+  <title>UserALE - Example Page</title>
+</head>
+<body>
+<br>
+<p>
+  This UserALE Example Page lets you explore how UserALE works, deploys with a script tag, and the data it generates.<br>
+  By default, you'll see the raw logs UserALE generates. We kept this page simple so that its easy to see how things work.
+</p>
+<p>
+  To see how our API can be used to shape UserALE logs to your needs, uncomment the 'index.js' script tag in index.html.
+</p>
+<br>
+<p>Click the button below to generate targeted click events.</p>
+<div class="container">
+  <button id="test_button">Click Me!</button>
+</div>
+<br>
+<br>
+<p>Play around with the form elements below to see a variety of UserALE log types:</p>
+<p>
+  Capture changes to fields (and values, when it's safe).
+</p>
+<p>
+  With index.js injected into the page, you can use the 'Test Field' below to see the behavior of our API dynamically.<br>
+  Type in the following UserALE function names to see their behavior.
+<ul>
+  <li>"log" - ship a fully customized log, built from scratch</li>
+  <li>"packageLog" - hijack our own pipeline to modify and ship logs packaged exactly like standard UserALE logs</li>
+  <li>"packageCustomLog" - smash a number of custom fields together with UserALE standard metadata</li>
+</ul>
+
+<form id="test_text_input">
+  <label>Test Field: <input type="text"></label>
+  <br><br>
+  <button type="submit">Submit form</button>
+</form>
+<br>
+<p>Capture inputs and changes to different types of selections.</p>
+<select name="UserALE Committers">
+  <option value="clay">Clay</option>
+  <option value="rob">Rob</option>
+  <option value="michelle">Michelle</option>
+  <option value="josh">Josh</option>
+</select>
+<br>
+<br>
+<form id="test_radio_input">
+  <input type="radio" name="Use Case" value="business analytics" checked> Business Analytics<br>
+  <input type="radio" name="Use Case" value="HCI"> HCI<br>
+  <input type="radio" name="Use Case" value="other"> Other
+</form>
+<br>
+<div class="container">
+  <button id="NonLink Button"> Don't Click Me!</button>
+</div>
+<br>
+<p>Click on the Link to Test Logging with Page Navigation</p>
+<a href="http://flagon.incubator.apache.org/"><button id="Linked Button">Link to Flagon Page</button></a>
+</body>
+</html>

example/server.js

@@ -57,13 +57,16 @@ app.use(bodyParser.text())
 app.use('/build', express.static(path.join(__dirname, '/../build')));
 app.use('/', express.static(__dirname));
 app.set('view engine', 'jade');
-app.use('/', express.static(__dirname))
-
+app.use('/', express.static(__dirname));
 
 app.get('/', function (req, res) {
   res.sendFile('index.html', { root: __dirname });
 });
 
+app.get('/no-logging', function (req, res) {
+  res.sendFile('no-logging.html', { root: __dirname });
+});
+
 app.post('/', function (req, res) {
   const body = typeof req.body === "string" ? JSON.parse(req.body) : req.body