QoL improvements for code, updated battery display code, and more

background/commands.js

@@ -1,58 +1,59 @@
-const VIEW_SOURCE_PREFIX = "view-source:"
+/*const VIEW_SOURCE_PREFIX = "view-source:"
 const HISTORY_URL = "chrome://history"
-const DOWNLOADS_URL = "chrome://downloads"
-
-function getRecentWindow() {
-  return new Promise(resolve => {
-    chrome.windows.getLastFocused({ populate: true }, resolve);
-  })
+const DOWNLOADS_URL = "chrome://downloads"*/
+import { url as URL } from './../urls.js';
+const {
+  VIEW_SOURCE_PREFIX,
+  HISTORY_URL,
+  DOWNLOADS_URL
+} = URL;
+
+function getRecent(callback) {
+  chrome.windows.getLastFocused({ populate: true }, (window) => {
+    callback({ window, tabs: window.tabs })
+  });
 }
 
-function cycleTabs(tabs, direction) {
-  let currentTab = tabs.find((e) => e.active);
-  if (!currentTab) return;
+function cycleTabs(direction) {
+  getRecent(({ tabs }) => {
+    let currentTab = tabs.find((e) => e.active);
+    if (!currentTab) return;
 
-  let index = currentTab.index + direction;
-  index = (index + tabs.length) % tabs.length // fix overflow
-  chrome.tabs.update(tabs[index].id, { active: true });
+    let index = currentTab.index + direction;
+    index = (index + tabs.length) % tabs.length // fix overflow
+    chrome.tabs.update(tabs[index].id, { active: true });
+  });
 }
 
-async function onCommand(name, currentTab) {
-  let recentWindow = await getRecentWindow()
-  let recentTabs = recentWindow.tabs
-
-  // exit fullscreen
-  if (recentWindow && recentWindow.state === chrome.windows.WindowState.FULLSCREEN) {
-    chrome.windows.update(recentWindow.id, { state: chrome.windows.WindowState.MAXIMIZED })
-  }
-
-  function openTab(url) {
-    chrome.tabs.create({ windowId: recentWindow?.id, url });
+function exitFullscreen(window) {
+  if (window && window.state === chrome.windows.WindowState.FULLSCREEN) {
+    chrome.windows.update(window.id, { state: chrome.windows.WindowState.MAXIMIZED })
   }
+}
 
+function onCommand(name, tab) {
   switch (name) {
     case "NEW_TAB":
-      openTab();
-      break;
-
-    case "ACCESS_HISTORY":
-      openTab(HISTORY_URL);
-      break;
-
-    case "ACCESS_DOWNLOADS":
-      openTab(DOWNLOADS_URL);
+      getRecent(({ window }) => {
+        chrome.tabs.create({ windowId: window?.id });
+        exitFullscreen(window);
+      });
       break;
 
     case "VIEW_SOURCE":
-      if (!currentTab) return;
-      if (currentTab.url.startsWith(VIEW_SOURCE_PREFIX)) return;
-
-      openTab(VIEW_SOURCE_PREFIX + currentTab.url);
+      getRecent(({ tabs }) => {
+        let currentTab = tabs.find((e) => e.active);
+        if (!currentTab) return;
+        if (currentTab.url.startsWith(VIEW_SOURCE_PREFIX)) return;
+
+        chrome.tabs.create({ windowId: window?.id, url: VIEW_SOURCE_PREFIX + currentTab.url });
+        exitFullscreen(window);
+      });
       break;
 
     case "CLOSE_TAB":
-      if (currentTab && currentTab.id !== chrome.tabs.TAB_ID_NONE) {
-        chrome.tabs.remove(currentTab.id);
+      if (tab && tab.id !== chrome.tabs.TAB_ID_NONE) {
+        chrome.tabs.remove(tab.id);
       }
       break;
 
@@ -69,24 +70,35 @@ async function onCommand(name, currentTab) {
       break;
 
     case "CLOSE_WINDOW":
-      if (recentWindow.focused) {
-        chrome.windows.remove(recentWindow.id);
-      }
+      getRecent(({ window }) => {
+        if (window.focused) {
+          chrome.windows.remove(window.id);
+        }
+      });
+      break;
+
+    case "ACCESS_HISTORY":
+      chrome.tabs.create({ windowId: window?.id, url: HISTORY_URL });
+      break;
+
+    case "ACCESS_DOWNLOADS":
+      chrome.tabs.create({ windowId: window?.id, url: DOWNLOADS_URL });
       break;
 
     case "TAB_NEXT":
-      cycleTabs(recentTabs, 1)
+      cycleTabs(1)
       break;
 
     case "TAB_BACK":
-      cycleTabs(recentTabs, -1)
+      cycleTabs(-1)
       break;
 
     case "SWITCH_WINDOWS":
       chrome.windows.getAll((windows) => {
-        if (windows.length > 1) {
-          chrome.windows.update(recentWindow.id, { focused: false });
-        }
+        if (windows.length === 1) return;
+        getRecent(({ window }) => {
+          chrome.windows.update(window.id, { focused: false });
+        });
       })
       break;
 
@@ -99,17 +111,21 @@ async function onCommand(name, currentTab) {
     case "CTRL_7":
     case "CTRL_8":
       let num = Number(name.split("_")[1]);
-      let specifiedTab = recentTabs[num - 1];
-      if (!specifiedTab) return;
+      getRecent(({ tabs }) => {
+        let specifiedTab = tabs[num - 1];
+        if (!specifiedTab) return;
 
-      chrome.tabs.update(specifiedTab.id, { active: true });
+        chrome.tabs.update(specifiedTab.id, { active: true });
+      });
       break;
 
     case "CTRL_9":
-      let lastTab = recentTabs[recentTabs.length - 1];
-      chrome.tabs.update(lastTab.id, { active: true });
+      getRecent(({ tabs }) => {
+        let lastTab = tabs[tabs.length - 1];
+        chrome.tabs.update(lastTab.id, { active: true });
+      });
       break;
   }
 }
 
-chrome.commands.onCommand.addListener(onCommand);
+chrome.commands.onCommand.addListener(onCommand);

background/webstore-fix.js

@@ -1,6 +1,12 @@
-const NEW_WEBSTORE_HOST = "chromewebstore.google.com"
+/*const NEW_WEBSTORE_HOST = "chromewebstore.google.com"
 const OLD_WEBSTORE_HOST = "chrome.google.com"
-const OLD_WEBSTORE_PATH = "/webstore"
+const OLD_WEBSTORE_PATH = "/webstore"*/
+import { url as URL } from './../urls.js';
+const {
+  NEW_WEBSTORE_HOST,
+  OLD_WEBSTORE_HOST,
+  OLD_WEBSTORE_PATH
+} = URL;
 
 function onTabUpdate(tabId, _, tab) {
     if (!tab.url) return

new-tab/background-controller.js

@@ -70,4 +70,4 @@ class BackgroundController {
     }
 }
 
-export { BackgroundController }
+export default BackgroundController

new-tab/battery-display.js

@@ -7,42 +7,67 @@ class BatteryDisplay {
         this.listenForUpdates()
     }
 
-    async getBattery() {
-        let battery = await navigator.getBattery()
-            .catch(() => reportError("Error reading battery."));
-
-        battery.secsLeft = Math.min(battery.chargingTime, battery.dischargingTime)
-        battery.isFull = battery.level === 1
-
-        return battery
+    getBattery() {
+        return navigator.getBattery().catch(() => reportError("Error reading battery."));
     }
 
     async render() {
-        let battery = await this.getBattery()
-
-        this.element.textContent = battery.isFull ? "Battery full" : [
+        let battery = await this.getBattery();
+        let arr = [
             this.getPercentMessage(battery),
             this.getChargingMessage(battery),
             this.getTimeMessage(battery)
-        ].join(" ~ ");
+        ]
+        this.element.textContent = arr.filter((v) => v !== null).join(" ~ ");
     }
 
+    isBatteryFull(batt) {
+        return (batt.charging && Math.min(batt.chargingTime, batt.dischargingTime)) == Infinity;
+    }
     getPercentMessage(battery) {
+        if (this.isBatteryFull(battery)) return "Battery Full"
         return `Battery: ${Math.round(battery.level * 100)}%`
     }
 
     getChargingMessage(battery) {
+        if (this.isBatteryFull(battery)) return null;
         return battery.charging ? "Charging" : "Not charging"
     }
 
+    batteryRunoutTime(hours, mins) {
+        // make hours and minutes plural when needed (e.g. '55 minute' becomes '55 minutes', '3 hour' becomes '3 hours', etc.)
+        // also default the values to null if they are 0
+        hours = !(hours === null || hours === NaN || hours == 0) ? `${(hours > 1) ? `${hours} hours` : `${hours} hour`}` : null;
+        mins = !(mins === null || mins == 0) ? `${(mins > 1) ? `${mins} minutes` : `${mins} minute`}` : null;
+
+        let numbTxt = "";
+
+        // add the actuall numbers
+        numbTxt += !(hours === null) ? hours : "";
+        numbTxt += !(mins === null) ? `${!(numbTxt.length == 0) ? ` and ${mins}`: mins}` : "";
+
+        numbTxt = (hours === null) && (mins === null) ? "Waiting on battery info..." : numbTxt;
+
+        return numbTxt;
+    }
     getTimeMessage(battery) {
+        let secsLeft = Math.min(battery.chargingTime, battery.dischargingTime)
         let direction = battery.charging ? "full" : "empty"
 
-        let hoursLeft = Math.floor(battery.secsLeft / 3600)
-        let minsLeft = Math.floor(battery.secsLeft % 3600 / 60);
-        minsLeft = String(minsLeft).padStart(2, 0) // 8:9 to 8:09 etc
+        if (this.isBatteryFull(battery)) return null;
+
+        let hoursLeft = Math.floor(secsLeft / 3600)
+        let minsLeft = Math.floor(secsLeft % 3600 / 60);
+
+        // default values to null if they are not defined
+        hoursLeft = (hoursLeft === Infinity || hoursLeft === "NaN") ? null : hoursLeft;
+        minsLeft = (minsLeft === Infinity || minsLeft === "NaN") ? null : minsLeft;
+
+        let numbText = this.batteryRunoutTime(hoursLeft, minsLeft);
 
-        return `Around ${hoursLeft}:${minsLeft} until ${direction}`
+        let displayText = null;
+        displayText = `Around ${numbText} left until battery is ${direction}`;
+        return displayText;
     }
 
     async listenForUpdates() {
@@ -54,4 +79,4 @@ class BatteryDisplay {
     }
 }
 
-export { BatteryDisplay }
+export default BatteryDisplay

new-tab/date-display.js

@@ -12,11 +12,11 @@ class DateDisplay {
     render() { 
        let date = new Date()
        this.element.textContent = [
-           date.getMonth() + 1,
+           date.getMonth(),
            date.getDate(),
            date.getFullYear()
        ].join('/')
     }
 }
 
-export { DateDisplay }
+export default DateDisplay

new-tab/drag-controller.js

@@ -67,4 +67,4 @@ class DragController {
   }
 }
 
-export { DragController };
+export default DragController;

new-tab/fullscreen-controller.js

@@ -45,4 +45,4 @@ class FullscreenController {
   }
 }
 
-export { FullscreenController }
+export default FullscreenController

new-tab/main.html

@@ -10,9 +10,18 @@
 
 <body>
   <div class="top-left">
-    <div class="name">Skiovox Helper</div> <span class="version"></span>
+    <div class="name">Titanite</div> <span class="version"></span>
   </div>
-  <div class="icon-corner top-right">
+  <div class="top-right">
+    <h1><a href="#" id="wifiLink">WiFi</a></h1>
+    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 -960 960 960">
+      <path
+        d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 32.5-156t88-127Q256-817 330-848.5T488-880q80 0 151 27.5t124.5 76q53.5 48.5 85 115T880-518q0 115-70 176.5T640-280h-74q-9 0-12.5 5t-3.5 11q0 12 15 34.5t15 51.5q0 50-27.5 74T480-80Zm0-400Zm-220 40q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm120-160q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm200 0q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm120 160q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17ZM480-160q9 0 14.5-5t5.5-13q0-14-15-33t-15-57q0-42 29-67t71-25h70q66 0 113-38.5T800-518q0-121-92.5-201.5T488-800q-136 0-232 93t-96 227q0 133 93.5 226.5T480-160Z" />
+    </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 -960 960 960">
+      <path
+        d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640H447l-80-80H160v480l96-320h684L837-217q-8 26-29.5 41.5T760-160H160Zm84-80h516l72-240H316l-72 240Zm0 0 72-240-72 240Zm-84-400v-80 80Z" />
+    </svg>
     <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 -960 960 960">
       <path
         d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
@@ -41,36 +50,16 @@
     <div class="time"></div>
     <div class="battery"></div>
   </div>
-  <div class="icon-corner bottom-left">
-    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 -960 960 960">
-      <path
-        d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z" />
-    </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 -960 960 960">
-      <path
-        d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 32.5-156t88-127Q256-817 330-848.5T488-880q80 0 151 27.5t124.5 76q53.5 48.5 85 115T880-518q0 115-70 176.5T640-280h-74q-9 0-12.5 5t-3.5 11q0 12 15 34.5t15 51.5q0 50-27.5 74T480-80Zm0-400Zm-220 40q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm120-160q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm200 0q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm120 160q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17ZM480-160q9 0 14.5-5t5.5-13q0-14-15-33t-15-57q0-42 29-67t71-25h70q66 0 113-38.5T800-518q0-121-92.5-201.5T488-800q-136 0-232 93t-96 227q0 133 93.5 226.5T480-160Z" />
-    </svg>
+  <div class="bottom-left">
     <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 -960 960 960">
       <path
         d="M80 0v-160h800V0H80Zm160-320h56l312-311-29-29-28-28-311 312v56Zm-80 80v-170l448-447q11-11 25.5-17t30.5-6q16 0 31 6t27 18l55 56q12 11 17.5 26t5.5 31q0 15-5.5 29.5T777-687L330-240H160Zm560-504-56-56 56 56ZM608-631l-29-29-28-28 57 57Z" />
     </svg>
   </div>
-  <div class="icon-corner bottom-right">
+  <div class="bottom-right">
     <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 -960 960 960">
       <path
-        d="M480-120q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM254-346l-84-86q59-59 138.5-93.5T480-560q92 0 171.5 35T790-430l-84 84q-44-44-102-69t-124-25q-66 0-124 25t-102 69ZM84-516 0-600q92-94 215-147t265-53q142 0 265 53t215 147l-84 84q-77-77-178.5-120.5T480-680q-116 0-217.5 43.5T84-516Z" />
-    </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 -960 960 960">
-      <path
-        d="M440-80v-304L256-200l-56-56 224-224-224-224 56-56 184 184v-304h40l228 228-172 172 172 172L480-80h-40Zm80-496 76-76-76-74v150Zm0 342 76-74-76-76v150Z" />
-    </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 -960 960 960">
-      <path
-        d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640H447l-80-80H160v480l96-320h684L837-217q-8 26-29.5 41.5T760-160H160Zm84-80h516l72-240H316l-72 240Zm0 0 72-240-72 240Zm-84-400v-80 80Z" />
-    </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 -960 960 960">
-      <path
-        d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm112-260q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Z" />
+        d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z" />
     </svg>
   </div>
 </body>