manage: use chrome://favicon

_locales/en/messages.json

@@ -294,6 +294,10 @@
     "message": "Favicons in applies-to column",
     "description": "Label for the checkbox that toggles applies-to favicons in the new UI on manage page"
   },
+  "manageFaviconsHelp": {
+    "message": "Stylus asks for chrome://favicon permission to retrieve the icons from browser cache. For non-cached icons Stylus uses external service https://www.google.com/s2/favicons",
+    "description": "Label for the checkbox that toggles applies-to favicons in the new UI on manage page"
+  },
   "manageMaxTargets": {
     "message": "Number of applies-to items",
     "description": "Label for the numeric input box to limit max number of applies-to targets in the new UI on manage page"

manage.css

@@ -61,10 +61,15 @@ a:hover {
   transition: fill .5s;
   width: 20px;
   height: 20px;
+}
+
+.svg-icon,
+.svg-icon.info:hover {
   fill: #000;
 }
 
-.svg-icon:hover {
+.svg-icon:hover,
+.svg-icon.info {
   fill: #666;
 }
 
@@ -73,6 +78,12 @@ a:hover {
   height: 16px;
 }
 
+.svg-icon.info {
+  width: 14px;
+  height: 16px;
+  margin-left: .5ex;
+}
+
 .homepage {
   margin-left: 0.1em;
   margin-right: 0.1em;
@@ -373,10 +384,11 @@ summary {
   display: initial;
 }
 
-#newUIoptions label {
+#newUIoptions > * {
   display: flex;
   align-items: center;
   margin-bottom: auto;
+  flex-wrap: wrap;
 }
 
 #newUIoptions input[type="number"] {
@@ -388,6 +400,13 @@ input[id^="manage.newUI"] {
   margin-left: 0;
 }
 
+#faviconsHelp {
+  overflow-y: auto;
+  font-size: 90%;
+  padding: 1ex 0 2ex 16px;
+}
+
+
 /* Default, no update buttons */
 .update,
 .check-update {

manage.html

@@ -149,7 +149,14 @@
     <h2 id="options-heading" i18n-text="optionsHeading"></h2>
     <label><input id="manage.newUI" type="checkbox"><span i18n-text="manageNewUI"></span></label>
     <div id="newUIoptions">
-      <label><input id="manage.newUI.favicons" type="checkbox"><span i18n-text="manageFavicons"></span></label>
+      <div>
+        <input id="manage.newUI.favicons" type="checkbox">
+        <label for="manage.newUI.favicons" i18n-text="manageFavicons"></label>
+        <svg class="svg-icon info" viewBox="0 0 14 16" i18n-alt="helpAlt" data-toggle-on-click="#faviconsHelp">
+          <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
+        </svg>
+        <div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp"></div>
+      </div>
       <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
     </div>
     <p>

manage.js

@@ -14,7 +14,10 @@ const newUI = {
 newUI.renderClass();
 
 const TARGET_TYPES = ['domains', 'urls', 'urlPrefixes', 'regexps'];
-const GET_FAVICON_URL = 'https://www.google.com/s2/favicons?domain=';
+const GET_FAVICON_URL = {
+  builtin: 'chrome://favicon/size/16@2x/',
+  external: 'https://www.google.com/s2/favicons?domain=',
+};
 const OWN_ICON = chrome.runtime.getManifest().icons['16'];
 
 const handleEvent = {};
@@ -74,7 +77,7 @@ function initGlobalEvents() {
     checkbox.onchange = () => installed.classList.toggle(className, checkbox.checked);
   }
 
-  enforceInputRange($('#manage.newUI.favicons'));
+  enforceInputRange($('#manage.newUI.targets'));
 
   setupLivePrefs([
     'manage.onlyEnabled',
@@ -84,8 +87,28 @@ function initGlobalEvents() {
     'manage.newUI.targets',
   ]);
 
-  $$('[id^="manage.newUI"]')
+  $('#manage.newUI').onchange = switchUI;
-    .forEach(el => (el.oninput = (el.onchange = switchUI)));
+  $('#manage.newUI.targets').oninput = switchUI;
+  $('#manage.newUI.targets').onchange = switchUI;
+  $('#manage.newUI.favicons').onchange = function() {
+    if (!this.checked) {
+      switchUI();
+      return;
+    }
+    if (this.disabled) {
+      return;
+    }
+    this.disabled = true;
+    onPermissionsGranted({origins: ['chrome://favicon/']}).then(
+      switchUI,
+      () => (this.checked = false)
+    ).then(
+      () => (this.disabled = false)
+    );
+  };
+  $$('[data-toggle-on-click]').forEach(el => {
+    el.onclick = () => $(el.dataset.toggleOnClick).classList.toggle('hidden');
+  });
 
   switchUI({styleOnly: true});
 }
@@ -183,12 +206,12 @@ function createStyleElement({style, name}) {
         } else if (newUI.favicons) {
           let favicon = '';
           if (type == 'domains') {
-            favicon = GET_FAVICON_URL + targetValue;
+            favicon = 'http://' + targetValue;
           } else if (targetValue.startsWith('chrome-extension:')) {
             favicon = OWN_ICON;
           } else if (type != 'regexps') {
-            favicon = targetValue.includes('://') && targetValue.match(/^.*?:\/\/([^/]+)/);
+            favicon = targetValue.includes('://') && targetValue.match(/^.*?:\/\/[^/]+/);
-            favicon = favicon ? GET_FAVICON_URL + favicon[1] : '';
+            favicon = favicon ? favicon[0] : '';
           }
           if (favicon) {
             element.appendChild(document.createElement('img')).dataset.src = favicon;
@@ -331,10 +354,13 @@ Object.assign(handleEvent, {
 
   loadFavicons(container = installed) {
     for (const img of container.getElementsByTagName('img')) {
-      if (img.dataset.src) {
+      const src = img.dataset.src;
-        img.src = img.dataset.src;
+      if (!src) {
-        delete img.dataset.src;
+        continue;
       }
+      img.src = src == OWN_ICON ? src
+        : GET_FAVICON_URL.builtin + (src.includes('://') ? src : 'http://' + src);
+      delete img.dataset.src;
     }
   }
 });
@@ -682,3 +708,22 @@ function findNextElement(style) {
   }
   return elements[elements[a].styleNameLowerCase <= nameLLC ? a + 1 : a];
 }
+
+
+function onPermissionsGranted(permissions) {
+  return new Promise((resolve, reject) => {
+    chrome.permissions.contains(permissions, alreadyGranted => {
+      if (alreadyGranted) {
+        resolve();
+      } else {
+        chrome.permissions.request(permissions, granted => {
+          if (granted) {
+            resolve();
+          } else {
+            reject();
+          }
+        });
+      }
+    });
+  });
+}

manifest.json

@@ -15,8 +15,10 @@
     "tabs",
     "webNavigation",
     "contextMenus",
-    "storage",
+    "storage"
-    "*://*/*"
+  ],
+  "optional_permissions": [
+    "chrome://favicon/"
   ],
   "background": {
     "scripts": ["messaging.js", "storage.js", "prefs.js", "background.js", "update.js"]

prefs.js

@@ -17,7 +17,7 @@ var prefs = new function Prefs() {
     'manage.onlyEnabled': false,    // display only enabled styles
     'manage.onlyEdited': false,     // display only styles created locally
     'manage.newUI': true,           // use the new compact layout
-    'manage.newUI.favicons': true,  // show favicons for the sites in applies-to
+    'manage.newUI.favicons': false, // show favicons for the sites in applies-to
     'manage.newUI.targets': 3,      // max number of applies-to targets visible: 0 = none
 
     'editor.options': {},           // CodeMirror.defaults.*