From da1f74f0f1e09dc32e7578e314782f9a7e004197 Mon Sep 17 00:00:00 2001
From: Matt Vogel <mainmoniker@googlemail.com>
Date: Mon, 27 Jan 2025 08:50:37 -0500
Subject: [PATCH] fix: show consent dialog on firefox mobile

---
 static/popup.html | 113 +++++++++++++++++++++++++++++-----------------
 static/popup.js   |  52 ++++++++++++++++++---
 static/style.css  |  40 ++++++++++++++++
 3 files changed, 157 insertions(+), 48 deletions(-)

diff --git a/static/popup.html b/static/popup.html
index be17372..74d0f87 100644
--- a/static/popup.html
+++ b/static/popup.html
@@ -5,7 +5,6 @@
   <title>ActivityWatch Popup</title>
 
   <link href="./style.css" rel="stylesheet" type="text/css">
-
   <script src="./popup.js"></script>
 </head>
 
@@ -18,46 +17,79 @@
     <!-- Filled by JS -->
   </div>
 
-  <div>
-    <a id="webui-link" href="http://localhost:5600/" target="_blank">
-      <span class="button">
-        <b>Open web UI</b>
-      </span>
-    </a>
-    <a href="https://forum.activitywatch.net/" target="_blank">
-      <span class="button">
-        <b>Visit forum</b>
-      </span>
-    </a>
-  </div>
+  <!-- Main Extension Content -->
+  <div id="main-content">
+    <div>
+      <a id="webui-link" href="http://localhost:5600/" target="_blank">
+        <span class="button">
+          <b>Open web UI</b>
+        </span>
+      </a>
+      <a href="https://forum.activitywatch.net/" target="_blank">
+        <span class="button">
+          <b>Visit forum</b>
+        </span>
+      </a>
+    </div>
 
-  <table>
-    <tr>
-      <th align="right">Enabled:</th>
-      <td>
-        <input type="checkbox" id="status-enabled-checkbox">
+    <table>
+      <tr>
+        <th align="right">Enabled:</th>
+        <td>
+          <input type="checkbox" id="status-enabled-checkbox">
+            <!-- Filled by JS -->
+          </input>
+        </td>
+        <td>
+          <button id="status-consent-btn">Consent to Privacy Notice</button>
+        </td>
+      </tr>
+
+      <tr>
+        <th align="right">Connected:</th>
+        <td id="status-connected-icon">
           <!-- Filled by JS -->
-        </input>
-      </td>
-      <td>
-        <button id="status-consent-btn">Consent to Privacy Notice</button>
-      </td>
-    </tr>
-
-    <tr>
-      <th align="right">Connected:</th>
-      <td id="status-connected-icon">
-        <!-- Filled by JS -->
-      </td>
-    </tr>
-
-    <tr align="right">
-      <th>Last sync:</th>
-      <td id="status-last-sync">
-        <!-- Filled by JS -->
-      </td>
-    </tr>
-  </table>
+        </td>
+      </tr>
+
+      <tr align="right">
+        <th>Last sync:</th>
+        <td id="status-last-sync">
+          <!-- Filled by JS -->
+        </td>
+      </tr>
+    </table>
+  </div>
+
+  <!-- Full Consent Content (Initially Hidden) -->
+  <div id="consent-content" style="display: none;" class="consent">
+    <h1 style="text-align: center; margin-bottom: 0">Privacy Notice</h1>
+    <h3 style="text-align: center; margin-top: 0">and your consent</h3>
+
+    <div style="text-overflow: scroll; border: 2px solid #DDD; border-radius: 2px; margin: 0.5em; padding: 0 0.5em 0 0.5em;">
+      <p>
+        This extension collects information about the active tab, such as its title, URL, wether it is audible, or incognito/private.
+      </p>
+
+      <p>
+        It stores that information in your locally installed ActivityWatch instance, which is required for the functioning of this extension.
+        It is never sent elsewhere than to the local device.
+      </p>
+
+      <p>
+        Due to Mozilla policy, we need to ask for your consent before we can start collecting this information, even if only kept locally.
+      </p>
+
+      <p>
+        Since this is the core functionality of this extension, if you do not consent, your only course of action is to uninstall.
+      </p>
+    </div>
+
+    <div class="action-container">
+      <div class="action"><button class="button" id="consent-refused">Remove ActivityWatch extension</button></div>
+      <div class="action"><button class="button accept" id="consent-given">Consent to offline data collection</button></div>
+    </div>
+  </div>
 
   <hr>
 
@@ -68,5 +100,4 @@
     </p>
   </small>
 </body>
-
-</html>
+</html>
\ No newline at end of file
diff --git a/static/popup.js b/static/popup.js
index 19c5459..5ac8e24 100644
--- a/static/popup.js
+++ b/static/popup.js
@@ -1,5 +1,21 @@
 "use strict";
 
+function isFirefoxAndroid() {
+  return navigator.userAgent.includes("Android") && navigator.userAgent.includes("Firefox/");
+}
+
+function showConsentDialog() {
+  if (isFirefoxAndroid()) {
+    // Use embedded consent for Firefox Android
+    document.getElementById('main-content').style.display = 'none';
+    document.getElementById('consent-content').style.display = 'block';
+  } else {
+    // Use popup window for desktop browsers
+    const url = chrome.runtime.getURL("../static/consent.html");
+    chrome.windows.create({ url, type: "popup", height: 550, width: 416 });
+  }
+}
+
 function renderStatus() {
   chrome.storage.local.get(["lastSync", "lastSyncSuccess", "testing", "baseURL", "enabled"], function(obj) {
     // Enabled checkbox
@@ -9,7 +25,7 @@ function renderStatus() {
     // Consent Button
     let showConsentBtn = document.getElementById('status-consent-btn');
     chrome.storage.local.get("consentGiven", (obj) => {
-      console.log('consentGiven: ', obj.consentGiven)
+      console.log('consentGiven: ', obj.consentGiven);
       if (obj.consentGiven) {
         enabledCheckbox.removeAttribute('disabled');
         showConsentBtn.style.display = 'none';
@@ -48,15 +64,37 @@ function domListeners() {
     let enabled = obj.srcElement.checked;
     chrome.runtime.sendMessage({enabled: enabled}, function(response) {});
   });
+  
   let consent_button = document.getElementById('status-consent-btn');
-  consent_button.addEventListener('click', () => {
-    const url = chrome.runtime.getURL("../static/consent.html");
-    chrome.windows.create({ url, type: "popup", height: 550, width: 416, });
-  });
+  consent_button.addEventListener('click', showConsentDialog);
+
+  if (isFirefoxAndroid()) {
+    // Set up consent buttons for Firefox Android
+    let consent_refused = document.getElementById('consent-refused');
+    let consent_given = document.getElementById('consent-given');
+    
+    consent_refused.addEventListener("click", () => {
+      browser.management.uninstallSelf()
+        .then(() => {
+            window.close();
+        })
+        .catch((error) => {
+            console.error('Error uninstalling:', error);
+            window.close(); // Close anyway even if uninstall fails
+        });
+    });
+    
+    consent_given.addEventListener("click", () => {
+      chrome.storage.local.set({"consentGiven": true});
+      chrome.runtime.sendMessage({enabled: true}, function(response) {});
+      document.getElementById('consent-content').style.display = 'none';
+      document.getElementById('main-content').style.display = 'block';
+      renderStatus();
+    });
+  }
 }
 
 document.addEventListener('DOMContentLoaded', function() {
   renderStatus();
   domListeners();
-})
-
+});
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index f4a6cc6..d356df0 100644
--- a/static/style.css
+++ b/static/style.css
@@ -60,3 +60,43 @@ button {
 /* .action {
   flex: 1;
 } */
+
+#consent-content {
+  padding: 15px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  margin: 10px 0;
+}
+
+#consent-content h2 {
+  margin-top: 0;
+  color: #333;
+}
+
+#consent-content ul {
+  margin: 10px 0;
+  padding-left: 20px;
+}
+
+.consent-buttons {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 20px;
+}
+
+.consent-buttons button {
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+}
+
+#accept-consent {
+  background-color: #28a745;
+  color: white;
+}
+
+#decline-consent {
+  background-color: #dc3545;
+  color: white;
+}