[UX] Improved UI labeling for automatically trusted top-level sites.

Author: hackademix

src/_locales/en/messages.json

@@ -50,6 +50,10 @@
   "AutoAllowTopLevel": {
     "message": "Temporarily set top-level sites to TRUSTED"
   },
+  "AutoTrustedLabel": {
+    "description": "Short label for CUSTOM preset when automatically filled with TRUSTED capabilities as a top-level site",
+    "message": "Auto-trusted"
+  },
   "AutoReload": {
     "message": "Automatically reload affected pages when permissions change"
   },

src/ui/ui.css

@@ -462,10 +462,14 @@ input.temp + label {
 
 input.preset:checked ~ input.temp {
   opacity: .7;
-  right: 0.4em;
+  right: calc(var(--extra-preset-width) - .5em);
   pointer-events: all;
 }
 
+.customizing input.preset:checked ~ input.temp {
+  right: .5em;
+}
+
 .presets input.preset:checked ~ input.temp:checked {
  opacity: 1 !important;
  background-size: 100%;
@@ -485,7 +489,10 @@ input.preset:checked ~ input.temp {
 .customizing input.preset:checked {
   margin: 0 0 -0.2em 0;
   background-position: 0 0;
-  --extra-preset-width: 1em;
+}
+
+span.preset.CUSTOM {
+  --extra-preset-width: 2em;
 }
 
 #presets span.preset {

src/ui/ui.js

@@ -23,7 +23,6 @@ var UI = (() => {
 
   var UI = {
     initialized: false,
-    isBrowserAction: false,
 
     presets: {
       "DEFAULT": "Default",
@@ -404,9 +403,8 @@ var UI = (() => {
   UI.Sites = class {
     constructor(parentNode, presets = DEF_PRESETS) {
       this.parentNode = parentNode;
-      let policy = UI.policy;
       this.uiCount = UI.Sites.count = (UI.Sites.count || 0) + 1;
-      this.sites = policy.sites;
+      this.sites = UI.policy.sites;
       this.presets = presets;
       this.customizing = null;
       this.typesMap = new Map();
@@ -499,7 +497,12 @@ var UI = (() => {
       let sizer = document.createElement("div");
       sizer.id = "presets-sizer";
       sizer.classList.add("sites");
-      sizer.appendChild(presets.cloneNode(true));
+      const presetsCopy = sizer.appendChild(presets.cloneNode(true));
+      if ("isBrowserAction" in UI && UI.policy.autoAllowTop) {
+        const customCopy = presetsCopy.querySelector(".preset.CUSTOM");
+        customCopy.querySelector("label.preset").textContent = _("AutoTrustedLabel");
+        customCopy.parentNode.appendChild(customCopy);
+      }
       document.body.appendChild(sizer);
       let labelWidth = 0;
       let biggest = "";
@@ -663,6 +666,7 @@ var UI = (() => {
       } else if (!(isCap || isTemp || customizer) && ev.type === "click") {
         this.customize(row.perms, preset, row);
       }
+      this._customOrAuto(row);
     }
 
     setupCaps(perms, preset, row) {
@@ -1026,6 +1030,26 @@ var UI = (() => {
       return changed;
     }
 
+    _customOrAuto(row) {
+      const { policy } = UI;
+      const { perms, contextMatch, siteMatch } = row;
+      const isAuto = policy.autoAllowTop && perms.temp &&
+          contextMatch == siteMatch &&
+          perms.sameAs(policy.TRUSTED);
+      if (!(isAuto || row._wasAuto)) {
+        return;
+      }
+      row._wasAuto = true;
+      const [labelShort, title] = isAuto
+        ? [_("AutoTrustedLabel"), _("autoAllowTop")]
+        : [_("Custom"), _("Custom") ];
+      const widgets = row.querySelectorAll(".preset.CUSTOM [title]");
+      for (const w of [...widgets]) {
+        w.title = title;
+        if (w.textContent) w.textContent = labelShort;
+      }
+    }
+
     createSiteRow(
       site,
       siteMatch,
@@ -1040,9 +1064,10 @@ var UI = (() => {
         contextMatch,
         perms
       );
-      let policy = UI.policy;
+      const { policy } = UI;
       let row = this.rowTemplate.cloneNode(true);
       row.sitesCount = sitesCount;
+
       let url;
       try {
         url = new URL(site);
@@ -1123,7 +1148,6 @@ var UI = (() => {
           : punycode.toUnicode(
               hostname.substring(0, hostname.length - domain.length)
             );
-
         row.querySelector(".domain").textContent = unicodeDomain;
         row.querySelector(".path").textContent =
           siteMatch.length > url.origin.length ? url.pathname : "";
@@ -1222,6 +1246,8 @@ var UI = (() => {
         }
         preset.disabled = false;
       }
+
+      this._customOrAuto(row);
       return row;
     }