Browse Source

fix: HiDPI icons

Patrick 10 months ago
parent
commit
2a2be4ed8f
4 changed files with 12 additions and 7 deletions
  1. 4 2
      gulpfile.js
  2. 2 2
      src/background/utils/icon.js
  3. 4 3
      src/background/utils/ua.js
  4. 2 0
      src/manifest.yml

+ 4 - 2
gulpfile.js

@@ -96,10 +96,12 @@ async function createIcons() {
     .toFile(`${dist}/icon16${type}.png`);
   };
   return Promise.all([
-    handle(48),
     handle(128),
     ...types.map(handle16),
-    ...[32, 38].flatMap(size => types.map(t => handle(size, ...t))),
+    // 32px dashboard icon (recycled) + 2xDPI browser_action desktop
+    // 38px dashboard icon (normal) + 1.5xDPI browser_action Android
+    // 48px 2xDPI browser_action Android
+    ...[32, 38, 48].flatMap(size => types.map(t => handle(size, ...t))),
   ]);
 }
 

+ 2 - 2
src/background/utils/icon.js

@@ -7,10 +7,10 @@ import { popupTabs } from './popup-tracker';
 import storage, { S_CACHE } from './storage';
 import { forEachTab, getTabUrl, injectableRe, openDashboard, tabsOnRemoved, tabsOnUpdated } from './tabs';
 import { testBlacklist } from './tester';
-import { FIREFOX } from './ua';
+import { FIREFOX, ua } from './ua';
 
 /** We don't set 19px because FF and Vivaldi scale it down to 16px instead of our own crisp 16px */
-const SIZES = [16, 32];
+const SIZES = ua.mobile ? [32, 38, 48] : [16, 32];
 /** Caching own icon to improve dashboard loading speed, as well as browserAction API
  * (e.g. Chrome wastes 40ms in our extension's process to read 4 icons for every tab). */
 const iconCache = {};

+ 4 - 3
src/background/utils/ua.js

@@ -10,7 +10,9 @@ const uaVer = navUA.match(/\s(?:Chrom(?:e|ium)|Firefox)\/(\d+[.0-9]*)|$/i)[1];
 const kFullVersionList = 'fullVersionList';
 
 /** @type {VMScriptGMInfoPlatform} */
-export const ua = {};
+export const ua = {
+  mobile: navUAD ? navUAD.mobile : navUA.includes('Android'),
+};
 /** @type {number|void} This value can be trusted because the only way to spoof it in Chrome/ium
  * is to manually open devtools for the background page in device emulation mode.
  * Using `void` for numeric comparisons like CHROME < 100 to be false in Firefox */
@@ -33,7 +35,7 @@ init.deps.push(
   ]).then(([
     { os, arch },
     { name, version } = {},
-    { [kFullVersionList]: list, mobile } = {},
+    { [kFullVersionList]: list } = {},
     [wnd],
   ]) => {
     if (!version && list?.[0]) {
@@ -48,7 +50,6 @@ init.deps.push(
     setBrowserName(name || 'chrome');
     ua.browserVersion = version || uaVer;
     ua[kFullVersionList] = list;
-    ua.mobile = mobile;
     if (FIREFOX) FIREFOX = parseFloat(version);
     else if (wnd) checkVivaldi(wnd);
     else browserWindows.onCreated::listenOnce(checkVivaldi);

+ 2 - 0
src/manifest.yml

@@ -14,6 +14,8 @@ browser_action:
   default_icon:
     '16': public/images/icon16b.png
     '32': public/images/icon32b.png
+    '38': public/images/icon38b.png # for Android 1.5xDPI
+    '48': public/images/icon48b.png # for Android 2xDPI
   default_title: __MSG_extName__
   default_popup: popup/index.html
 background: