✨ Add "Copy debug info" button to popup

younesaassila · May 26, 2023 · cd2fd9f · cd2fd9f
1 parent 4017d02
commit cd2fd9f
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
   ],
   "license": "GPL-3.0",
   "dependencies": {
+    "bowser": "^2.11.0",
     "semver-compare": "^1.0.0"
   },
   "devDependencies": {

diff --git a/src/popup/menu.html b/src/popup/menu.html
@@ -171,6 +171,41 @@ <h3 class="list-item-title">Discord</h3>
           </a>
         </li>
       </ol>
+
+      <!-- Debug info -->
+      <ol class="list">
+        <li>
+          <button id="copy-debug-info-button" class="list-item">
+            <div class="list-item-icon">
+              <!-- https://icons.getbootstrap.com/icons/clipboard2-pulse-fill/ -->
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                fill="currentColor"
+                class="bi bi-clipboard2-pulse-fill"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  d="M10 .5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5.5.5 0 0 1-.5.5.5.5 0 0 0-.5.5V2a.5.5 0 0 0 .5.5h5A.5.5 0 0 0 11 2v-.5a.5.5 0 0 0-.5-.5.5.5 0 0 1-.5-.5Z"
+                />
+                <path
+                  d="M4.085 1H3.5A1.5 1.5 0 0 0 2 2.5v12A1.5 1.5 0 0 0 3.5 16h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 12.5 1h-.585c.055.156.085.325.085.5V2a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 4 2v-.5c0-.175.03-.344.085-.5ZM9.98 5.356 11.372 10h.128a.5.5 0 0 1 0 1H11a.5.5 0 0 1-.479-.356l-.94-3.135-1.092 5.096a.5.5 0 0 1-.968.039L6.383 8.85l-.936 1.873A.5.5 0 0 1 5 11h-.5a.5.5 0 0 1 0-1h.191l1.362-2.724a.5.5 0 0 1 .926.08l.94 3.135 1.092-5.096a.5.5 0 0 1 .968-.039Z"
+                />
+              </svg>
+            </div>
+            <div class="list-item-text">
+              <h3 class="list-item-title">Copy debug info</h3>
+              <p
+                id="copy-debug-info-button-description"
+                class="list-item-description"
+              >
+                Copy debug info to clipboard.
+              </p>
+            </div>
+          </button>
+        </li>
+      </ol>
     </main>
 
     <script type="module" src="./popup.ts"></script>

diff --git a/src/popup/popup.ts b/src/popup/popup.ts
@@ -1,3 +1,4 @@
+import Bowser from "bowser";
 import browser from "webextension-polyfill";
 import $ from "../common/ts/$";
 import { TWITCH_URL_REGEX } from "../common/ts/regexes";
@@ -13,6 +14,12 @@ const reasonElement = $("#reason") as HTMLParagraphElement;
 const proxyCountryElement = $("#proxy-country") as HTMLElement;
 const whitelistStatusElement = $("#whitelist-status") as HTMLDivElement;
 const whitelistToggleElement = $("#whitelist-toggle") as HTMLInputElement;
+const copyDebugInfoButtonElement = $(
+  "#copy-debug-info-button"
+) as HTMLButtonElement;
+const copyDebugInfoButtonDescriptionElement = $(
+  "#copy-debug-info-button-description"
+) as HTMLParagraphElement;
 //#endregion
 
 if (store.readyState === "complete") main();
@@ -99,3 +106,26 @@ function setWhitelistStatus(streamIdLower: string) {
     browser.tabs.reload();
   });
 }
+
+copyDebugInfoButtonElement.addEventListener("click", async () => {
+  const extensionInfo = await browser.management.getSelf();
+  const userAgentParser = Bowser.getParser(window.navigator.userAgent);
+
+  const debugInfo = [
+    `${extensionInfo.name} v${extensionInfo.version}`,
+    `- Install type: ${extensionInfo.installType}`,
+    `- Browser: ${userAgentParser.getBrowserName()} ${userAgentParser.getBrowserVersion()}`,
+    `- OS: ${userAgentParser.getOSName()} ${userAgentParser.getOSVersion()}`,
+    `- Servers: ${JSON.stringify(store.state.servers)}`,
+    `- Reset player on midroll: ${store.state.resetPlayerOnMidroll}`,
+  ].join("\n");
+
+  try {
+    await navigator.clipboard.writeText(debugInfo);
+    copyDebugInfoButtonDescriptionElement.textContent = "Copied to clipboard!";
+  } catch (error) {
+    console.error(error);
+    copyDebugInfoButtonDescriptionElement.textContent =
+      "Failed to copy to clipboard.";
+  }
+});
diff --git a/src/popup/style.css b/src/popup/style.css
@@ -212,10 +212,14 @@ main > * {
   flex-direction: row;
   align-items: center;
   justify-content: start;
+  width: 100%;
   padding: 10px 15px;
+  border: none;
   background-color: var(--background-secondary);
   color: var(--text-color);
+  text-align: left;
   text-decoration: none;
+  cursor: pointer;
   transition: background-color 100ms ease-in-out;
 }