mozilla/remote-settings#923: add tooltip when local/server timestamp

Author: leplatrem

extension/content/script.js

@@ -91,10 +91,16 @@ async function refreshUI(state) {
   document.getElementById("polling-url").setAttribute("href", pollingEndpoint);
   document.getElementById("local-timestamp").textContent = localTimestamp;
   document.getElementById("server-timestamp").textContent = serverTimestamp;
-  document.getElementById("human-local-timestamp").className =
+
+  const tsElt = document.getElementById("human-local-timestamp");
+  tsElt.className =
     localTimestamp == serverTimestamp ? " up-to-date" : " unsync";
-  document.getElementById("human-local-timestamp").textContent =
-    humanDate(localTimestamp);
+  tsElt.textContent = humanDate(localTimestamp);
+  tsElt.setAttribute(
+    "title",
+    localTimestamp == serverTimestamp ? "Synced" : "Local data is out of sync",
+  );
+
   document.getElementById("human-server-timestamp").textContent =
     humanDate(serverTimestamp);
   document.getElementById("last-check").textContent = humanDate(
@@ -144,13 +150,19 @@ async function refreshUI(state) {
     );
     tableRow.querySelector(".server-timestamp").textContent =
       serverTimestampCollection;
-    tableRow.querySelector(".human-local-timestamp").className +=
+    const tsRowElt = tableRow.querySelector(".human-local-timestamp");
+    tsRowElt.className =
       localTimestampCollection == serverTimestampCollection
         ? " up-to-date"
         : " unsync";
-    tableRow.querySelector(".human-local-timestamp").textContent = humanDate(
-      localTimestampCollection,
+    tsRowElt.textContent = humanDate(localTimestampCollection);
+    tsRowElt.setAttribute(
+      "title",
+      localTimestampCollection == serverTimestampCollection
+        ? "Synced"
+        : "Local data is out of sync",
     );
+
     tableRow.querySelector(".local-timestamp").textContent = localTimestamp;
     tableRow.querySelector(".last-check").textContent = humanDate(
       lastCheckCollection * 1000,

tests/selenium.spec.js

@@ -22,6 +22,7 @@ beforeAll(async () => {
   options.setBinary(process.env.NIGHTLY_PATH || "/usr/bin/firefox-nightly");
   options.addArguments("--pref 'extensions.experiments.enabled=true'");
   options.addArguments("--headless");
+  options.addArguments("--temp-profile");
   options.setPreference("xpinstall.signatures.required", false);
   options.setPreference("extensions.experiments.enabled", true);
   options.setPreference(
@@ -111,7 +112,6 @@ async function clickByCss(css, retries = 3) {
 
 describe("End to end browser tests", () => {
   test("Load extension, change environment to prod, sync and clear all", async () => {
-    // select prod environment from dropdown
     await clickByCss("#environment");
     await clickByCss('#environment [value="prod"]');
     await waitForLoad();
@@ -141,6 +141,7 @@ describe("End to end browser tests", () => {
     // clear all data
     await clickByCss("#clear-all-data");
     await waitForLoad();
+    await waitForLoad();
 
     // verify everything is cleared as expected
     expect(