Bug 1687644 - Use the new external API on the web ext sample (#28)

Beatriz Rizental · web-flow · commit d576de126165 · 2021-01-22T16:22:47.000+01:00
diff --git a/samples/web-extension/generatedMetrics.js b/samples/web-extension/generatedMetrics.js
@@ -0,0 +1,23 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+import Glean from "glean";
+
+export const webExtStarted = new Glean._private.DatetimeMetricType({
+  category: "sample",
+  name: "webext_installed",
+  sendInPings: ["sample"],
+  lifetime: "ping",
+  disabled: false
+}, "millisecond");
+
+export const popupOpened = new Glean._private.CounterMetricType({
+  category: "sample",
+  name: "popup_opened",
+  sendInPings: ["sample"],
+  lifetime: "ping",
+  disabled: false
+}, "millisecond");
diff --git a/samples/web-extension/generatedPings.js b/samples/web-extension/generatedPings.js
@@ -0,0 +1,9 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+import Glean from "glean";
+
+export const samplePing = new Glean._private.PingType("sample", true, false);
diff --git a/samples/web-extension/index.js b/samples/web-extension/index.js
@@ -5,5 +5,33 @@
 "use strict";
 
 import Glean from "glean";
+import { samplePing } from "./generatedPings";
+import { webExtStarted, popupOpened } from "./generatedMetrics";
+
+// TODO: Do not wait for Glean to be initialized before recording metrics
+// once Bug 1687491 is resolved.
+Glean.initialize("web-extension", true)
+  .then(() => {
+    console.log("Glean has been succesfully initialized.");
+    webExtStarted.set()
+      .then(() => console.log("`webext-installed` was succesfully set."));
+  });
+
+// Listen for messages from the popup.
+browser.runtime.onMessage.addListener(msg => {
+  console.log(`New message received! ${msg}`);
+
+  if (msg === "popup-opened") {
+    popupOpened.add()
+      .then(() => console.log("`popup-opened` was succesfully added."));
+  }
+
+  if (msg === "send-ping") {
+    samplePing.submit()
+      .then(wasSubmitted => {
+        console.log(
+          `Attempted to send ping "${samplePing.name}". Was the ping sent? ${wasSubmitted}`);
+      });
+  }
+});
 
-Glean.initialize("web-extension", true);
diff --git a/samples/web-extension/manifest.json b/samples/web-extension/manifest.json
@@ -6,9 +6,14 @@
   "version": "0.0.1",
   "background": {
     "scripts": [
+      "node_modules/webextension-polyfill/dist/browser-polyfill.min.js",
       "./dist/bundle.js"
     ]
   },
+  "permissions": [
+    "storage",
+    "https://incoming.telemetry.mozilla.org/"
+  ],
   "browser_action": {
     "browser_style": true,
     "default_icon": {
diff --git a/samples/web-extension/package-lock.json b/samples/web-extension/package-lock.json
diff --git a/samples/web-extension/package.json b/samples/web-extension/package.json
@@ -10,7 +10,8 @@
   "author": "The Glean Team <glean-team@mozilla.com>",
   "license": "MPL-2.0",
   "dependencies": {
-    "glean": "file://../../"
+    "glean": "file://../../",
+    "webextension-polyfill": "^0.7.0"
   },
   "devDependencies": {
     "webpack": "^5.4.0",
diff --git a/samples/web-extension/popup.html b/samples/web-extension/popup.html
@@ -2,11 +2,14 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <script type="text/javascript" src="popup.js"></script>
+  <script type="text/javascript" src="node_modules/webextension-polyfill/dist/browser-polyfill.js"></script>
 </head>
 <body>
-  <p style="margin: 2rem;">
-    Now, inspect this web extension.
+  <p style="margin: 2rem; text-align:center; min-width: 200px;">
+    Everytime this pop-up is opened a counter metric ("popup_opened") is incremented :D
+    <br /><br />
+    <button id="send-ping">Send a ping!</button>
   </p>
+  <script type="text/javascript" src="popup.js"></script>
 </body>
 </html>
diff --git a/samples/web-extension/popup.js b/samples/web-extension/popup.js
@@ -4,4 +4,11 @@
 
 "use strict";
 
-console.info("Nothing will happen. Glean.js is not yet implemented.");
+// Let the background script know the pop up has been opened.
+browser.runtime.sendMessage("popup-opened");
+
+const sendAPingButton = document.getElementById("send-ping");
+sendAPingButton.addEventListener("click", async () => {
+  // Tell the background script to upload a ping
+  browser.runtime.sendMessage("send-ping");
+}, { passive: true });
diff --git a/samples/web-extension/webpack.config.js b/samples/web-extension/webpack.config.js
@@ -8,7 +8,7 @@ const path = require("path");
 
 module.exports = {
   entry: "./index.js",
-  devtool: "cheap-module-source-map",
+  devtool: "inline-source-map",
   output: {
     filename: "bundle.js",
     path: path.resolve(__dirname, "dist"),
diff --git a/src/glean.ts b/src/glean.ts
@@ -228,18 +228,10 @@ class Glean {
   }
 
   static get applicationId(): string | undefined {
-    if (!Glean.instance._initialized) {
-      console.warn("Attempted to access the Glean.applicationId before Glean was initialized.");
-    }
-
     return Glean.instance._applicationId;
   }
 
   static get serverEndpoint(): string | undefined {
-    if (!Glean.instance._initialized) {
-      console.warn("Attempted to access the Glean.serverEndpoint before Glean was initialized.");
-    }
-
     return Glean.instance._serverEndpoint;
   }
 
@@ -251,10 +243,6 @@ class Glean {
    * @returns Whether upload is enabled.
    */
   static isUploadEnabled(): boolean {
-    if (!Glean.instance._initialized) {
-      console.warn("Attempted to access the Glean.uploadEnabled before Glean was initialized.");
-    }
-
     return Glean.uploadEnabled;
   }
 
diff --git a/src/storage/persistent/webext.ts b/src/storage/persistent/webext.ts
@@ -4,9 +4,38 @@
 
 import { Store, StorageIndex } from "storage";
 import { updateNestedObject, getValueFromNestedObject, deleteKeyFromNestedObject } from "storage/utils";
-import { isJSONValue, isObject, JSONObject, JSONValue } from "utils";
+import { isJSONValue, isObject, JSONArray, JSONObject, JSONPrimitive, JSONValue } from "utils";
 
-type WebExtStoreQuery = { [x: string]: { [x: string]: null; } | null; };
+type WebExtStoreQuery = { [x: string]: WebExtStoreQuery | JSONPrimitive | JSONArray | null; };
+
+/**
+ * Strips all properties whose values are `null` from a WebExtStoreQuery.
+ *
+ * The `null` values are the ones which were not found,
+ * thus can be safely removed.
+ *
+ * # Important
+ *
+ * This modifies the original object.
+ *
+ * @param query The query we want to strip of null values.
+ */
+function stripNulls(query: WebExtStoreQuery) {
+  for (const key in query) {
+    const curr = query[key];
+    if (curr === null) {
+      delete query[key];
+    }
+
+    if (isObject(curr)) {
+      if (Object.keys(curr).length === 0) {
+        delete query[key];
+      } else {
+        stripNulls(curr);
+      }
+    }
+  }
+}
 
 /**
  * Persistent storage implementation based on the Promise-based
@@ -47,12 +76,12 @@ class WebExtStore implements Store {
    * @returns The query object.
    */
   private _buildQuery(index: StorageIndex): WebExtStoreQuery {
-    let partialQuery = null;
-    for (const key of index) {
-      partialQuery = { [key]: partialQuery };
+    let query = null;
+    for (const key of [ this.rootKey, ...index].reverse()) {
+      query = { [key]: query };
     }
 
-    return { [this.rootKey]: partialQuery };
+    return <WebExtStoreQuery>query;
   }
 
   /**
@@ -69,20 +98,21 @@ class WebExtStore implements Store {
 
   async get(index: StorageIndex): Promise<JSONValue | undefined> {
     const query = this._buildQuery(index);
-    const response: unknown = await this.store.get(query);
+    const response = await this.store.get(query);
+    stripNulls(response);
     if (!response) {
       return;
     }
 
     if (isJSONValue(response)) {
       if (isObject(response)) {
-        return getValueFromNestedObject(response, [ this.rootKey, ...index ]);
+        return getValueFromNestedObject(<JSONObject>response, [ this.rootKey, ...index ]);
       } else {
         return response;
       }
     }
 
-    throw new Error(
+    console.warn(
       `Unexpected value found in storage for index ${index}. Ignoring.
       ${JSON.stringify(response, null, 2)}`
     );
diff --git a/src/upload/uploader/browser.ts b/src/upload/uploader/browser.ts
@@ -46,7 +46,7 @@ class BrowserUploader extends Uploader {
     clearTimeout(timeout);
     return {
       result: UploadResultStatus.Success,
-      status: (await response.json()).status
+      status: response.status
     };
   }
 }
