add [x] override style to included sites, #1832

+ rename "custom" to "personal" for a stronger signal that this is not a part of the style
+ rename "exclusions" to "glob" in functions that are universal

Author: tophf

src/.types.d.ts

@@ -32,6 +32,8 @@ declare interface StyleObj {
   customName?: string;
   exclusions?: string[];
   inclusions?: string[];
+  /** override style's own specifiers */
+  overridden?: boolean;
   installDate?: number;
   installationUrl?: string;
   md5Url?: string;
@@ -67,19 +69,19 @@ declare interface StyleSection {
 
 type TabCache = {[tabId:string]: TabCacheEntry};
 
+declare interface TabCacheEntry {
+  id: number;
+  incognito: boolean;
+  nonce: Object;
+  url: Object;
+  styleIds:  StyleIdsFrameMap;
+}
+
 declare interface StyleIdsFrameMap {
   url: string;
   styleIds: {[frameId: string]: number[]};
 }
 
-declare interface TabCacheEntry {
- id: number;
- incognito: boolean;
- nonce: Object;
- url: Object;
- styleIds:  StyleIdsFrameMap;
-}
-
 declare namespace Injection {
   interface Response {
     cfg: Config;
@@ -138,6 +140,18 @@ declare interface MatchQuery {
   urlWithoutParams?: string;
 }
 
+declare interface MatchUrlResult {
+  empty: boolean;
+  sloppy: boolean;
+  style: StyleObj;
+  // optionals
+  excluded?: boolean;
+  excludedScheme?: boolean;
+  included?: boolean;
+  /** not included and not matching the original sites */
+  overridden?: boolean;
+}
+
 declare interface UsercssData {
   name: string;
   namespace: string;

src/_locales/en/messages.json

@@ -1564,8 +1564,9 @@
     "message": "Enabled",
     "description": "Label for the enabled state of styles"
   },
-  "styleExcludeLabel": {
-    "message": "Custom excluded sites"
+  "styleForceApplied": {
+    "message": "Force-applied via \"<INC>\" in style settings",
+    "description": "Tooltip in the popup for styles, <INC> = translation for Personal included sites"
   },
   "styleFromMozillaFormatError": {
     "message": "Failed to import from Mozilla format",
@@ -1575,9 +1576,6 @@
     "message": "Paste the Mozilla-format code",
     "description": "Prompt in the dialog displayed after clicking 'Import from Mozilla format' button"
   },
-  "styleIncludeLabel": {
-    "message": "Custom included sites"
-  },
   "styleInjectionImportance": {
     "message": "Toggle style's importance"
   },
@@ -1640,6 +1638,10 @@
   "styleName": {
     "message": "Style name"
   },
+  "styleNotAppliedOverridden": {
+    "message": "Your \"<INC>\" in style settings override style's original sites",
+    "description": "Tooltip in the popup for styles, <INC> = translation for Personal included sites"
+  },
   "styleNotAppliedRegexpProblemTooltip": {
     "message": "Style was not applied due to its incorrect usage of 'regexp()'",
     "description": "Tooltip in the popup for styles that were not applied at all"
@@ -1699,6 +1701,19 @@
     "message": "Style settings",
     "description": "Label/title for style settings dialog"
   },
+  "styleSitesExclude": {
+    "message": "Personal excluded sites"
+  },
+  "styleSitesInclude": {
+    "message": "Personal included sites"
+  },
+  "styleSitesIncludeNote": {
+    "message": "Sites where this style is enabled on your personal device, either added to or used instead of the sites defined by the style depending on the checkbox. Useful for external styles that you shouldn't edit in order to keep them auto-updatable. Note that in multi-sectioned styles all sections are enabled for your added site, even those that were meant for specific pages of the original site."
+  },
+  "styleSitesIncludeOvr": {
+    "message": "override style",
+    "description": "Checkbox in the editor that reads like a continuation of the previous label: `Personal included sites` [x] `override original`, i.e. enabling it will cause personal included sites to override the style"
+  },
   "styleToMozillaFormatHelp": {
     "message": "The Mozilla format of the code can be submitted to userstyles.org and used with the classic Stylish for Firefox",
     "description": "Help info for the Mozilla format header section that converts the code to/from Mozilla format"

src/background/color-scheme.js

@@ -64,7 +64,7 @@ prefs.subscribe(kSTATE, (_, val) => {
 }, true);
 
 /** @param {StyleObj} _ */
-export function shouldIncludeStyle({preferScheme: ps}) {
+export function themeAllowsStyle({preferScheme: ps}) {
   return prefState === kNever ||
     ps !== kDark && ps !== kLight ||
     isDark === (ps === kDark);

src/background/style-manager/cache-builder.js

@@ -1,6 +1,7 @@
 import {styleCodeEmpty} from '@/js/sections-util';
+import {themeAllowsStyle} from '../color-scheme';
 import cacheData, * as styleCache from './cache';
-import {urlMatchSection, urlMatchStyle} from './matcher';
+import {urlMatchGlob, urlMatchSection} from './matcher';
 import {dataMap} from './util';
 
 /** @param {StyleObj} style
@@ -18,7 +19,7 @@ export function buildCacheForStyle(style) {
       (cache.maybeMatch ??= new Set()).add(id);
       continue;
     }
-    const code = getAppliedCode({url}, styleToApply);
+    const code = styleToApply.enabled && getAppliedCode({url}, styleToApply);
     if (code) {
       updated.add(url);
       buildCacheEntry(cache, styleToApply, code);
@@ -65,16 +66,20 @@ function buildCacheEntry(entry, style, [idx, code]) {
 /** Get styles matching a URL, including sloppy regexps and excluded items.
  * @param {MatchQuery} query
  * @param {StyleObj} style
- * @return {?Array}
+ * @return {[number[], string[]] | void}
  */
 function getAppliedCode(query, style) {
-  const result = urlMatchStyle(query, style);
-  const isIncluded = result === 'included';
+  let v;
+  /** Make sure to use the same logic in getAppliedCode and getByUrl */
+  const result = style.enabled &&
+    themeAllowsStyle(style) &&
+    (!(v = style.exclusions) || !v.length || v.some(urlMatchGlob, query)) &&
+    (!(v = style.inclusions) || !v.length || -v.some(urlMatchGlob, query) || !style.overridden);
+  if (!result)
+    return;
+  const isIncluded = result < 0;
   const code = [];
   const idx = [];
-  if (!isIncluded && result !== true) {
-    return;
-  }
   let i = 0;
   for (const section of style.sections) {
     if ((isIncluded || urlMatchSection(query, section) === true)

src/background/style-manager/index.js

@@ -19,10 +19,10 @@ import cacheData, * as styleCache from './cache';
 import {buildCache} from './cache-builder';
 import './init';
 import {onBeforeSave, onSaved} from './fixer';
-import {urlMatchSection, urlMatchStyle} from './matcher';
+import {urlMatchGlob, urlMatchSection} from './matcher';
 import {
-  broadcastStyleUpdated, calcRemoteId, dataMap, getById, getByUuid,
-  mergeWithMapped, order, orderWrap, setOrderImpl,
+  broadcastStyleUpdated, calcRemoteId, dataMap, getById, getByUuid, mergeWithMapped, order,
+  orderWrap, setOrderImpl,
 } from './util';
 
 export * from '../style-search-db';
@@ -33,7 +33,8 @@ export async function config(id, prop, value) {
   const style = Object.assign({}, getById(id));
   const d = dataMap.get(id);
   style[prop] = (d.preview || {})[prop] = value;
-  if (prop === 'inclusions' || prop === 'exclusions') styleCache.clear();
+  if (prop === 'inclusions' || prop === 'overridden' || prop === 'exclusions')
+    styleCache.clear();
   await save(style, 'config');
 }
 
@@ -80,56 +81,46 @@ export function getAllOrdered(keys) {
     : res;
 }
 
-/** @returns {StylesByUrlResult[]} */
-export function getByUrl(url, id = null) {
+/**
+ * @param {string} url
+ * @param {number} [id]
+ * @returns {MatchUrlResult[]}
+ */
+export function getByUrl(url, id) {
   // FIXME: do we want to cache this? Who would like to open popup rapidly
   // or search the DB with the same URL?
-  const result = [];
+  const results = [];
   const query = {url};
   for (const {style} of id ? [dataMap.get(id)].filter(Boolean) : dataMap.values()) {
+    let ovr;
+    let matching;
+    /** Make sure to use the same logic in getAppliedCode and getByUrl */
+    const res = {
+      excluded: (ovr = style.exclusions) && ovr.some(urlMatchGlob, query),
+      excludedScheme: !colorScheme.themeAllowsStyle(style),
+      included: matching = (ovr = style.inclusions) && ovr.some(urlMatchGlob, query),
+      overridden: !matching && style.overridden && ovr?.length,
+    };
+    const isIncluded = matching;
     let empty = true;
-    let excluded = false;
-    let excludedScheme = false;
-    let included = false;
     let sloppy = false;
-    let sectionMatched = false;
-    let match = urlMatchStyle(query, style);
-    // TODO: enable this when the function starts returning false
-    // if (match === false) {
-    // continue;
-    // }
-    if (match === 'included') {
-      included = true;
-    }
-    if (match === 'excluded') {
-      excluded = true;
-    }
-    if (match === 'excludedScheme') {
-      excludedScheme = true;
-    }
-    for (const section of style.sections) {
-      match = urlMatchSection(query, section, true);
-      if (match) {
-        if (match === 'sloppy') {
-          sloppy = true;
-        }
-        sectionMatched = true;
-        if (empty) empty = styleCodeEmpty(section);
-      }
+    for (let arr = style.sections, i = 0; i < arr.length && (!matching || empty || !sloppy); i++) {
+      const sec = arr[i];
+      const secMatch = isIncluded || urlMatchSection(query, sec, true);
+      if (!secMatch)
+        continue;
+      matching = true;
+      sloppy ||= secMatch === 'sloppy';
+      empty &&= styleCodeEmpty(sec);
     }
-    if (sectionMatched || included) {
-      result.push(/** @namespace StylesByUrlResult */ {
-        empty,
-        excluded,
-        excludedScheme,
-        included,
-        sectionMatched,
-        sloppy,
-        style: getCore({id: style.id}),
-      });
+    if (matching) {
+      res.empty = empty;
+      res.sloppy = sloppy;
+      res.style = getCore({id: style.id});
+      results.push(res);
     }
   }
-  return result;
+  return results;
 }
 
 /**

src/background/style-manager/matcher.js

@@ -1,15 +1,14 @@
 import {styleCodeEmpty} from '@/js/sections-util';
 import {ownRoot} from '@/js/urls';
 import {globAsRegExpStr, tryRegExp, tryURL} from '@/js/util';
-import * as colorScheme from '../color-scheme';
 
 const BAD_MATCHER = {test: () => false};
 const EXT_RE = /\bextension\b/;
 const compileRe = createCompiler(text => `^(${text})$`);
 const compileSloppyRe = createCompiler(text => `^${text}$`);
-const compileExclusion = createCompiler(buildExclusion);
+const compileGlob = createCompiler(buildGlobRe);
 
-function buildExclusion(text) {
+function buildGlobRe(text) {
   // match pattern
   const match = text.match(/^(\*|[\w-]+):\/\/(\*\.)?([\w.]+\/.*)/);
   if (!match) {
@@ -35,27 +34,6 @@ function createCompiler(compile) {
   };
 }
 
-function urlMatchExclusion(e) {
-  return compileExclusion(e).test(this.urlWithoutParams ??= this.url.split(/[?#]/, 1)[0]);
-}
-
-export function urlMatchStyle(query, style) {
-  let ovr;
-  if ((ovr = style.exclusions) && ovr.some(urlMatchExclusion, query)) {
-    return 'excluded';
-  }
-  if (!style.enabled) {
-    return 'disabled';
-  }
-  if (!colorScheme.shouldIncludeStyle(style)) {
-    return 'excludedScheme';
-  }
-  if ((ovr = style.inclusions) && ovr.some(urlMatchExclusion, query)) {
-    return 'included';
-  }
-  return true;
-}
-
 export function urlMatchSection(query, section, skipEmptyGlobal) {
   let dd, ddL, pp, ppL, rr, rrL, uu, uuL;
   if (
@@ -96,6 +74,11 @@ function urlMatchDomain(d) {
     _d[_d.length - d.length - 1] === '.' && _d.endsWith(d);
 }
 
+/** @this {MatchQuery} */
+export function urlMatchGlob(e) {
+  return compileGlob(e).test(this.urlWithoutParams ??= this.url.split(/[?#]/, 1)[0]);
+}
+
 /** @this {MatchQuery} */
 function urlMatchPrefix(p) {
   return p && this.url.startsWith(p);

src/css/global.css

@@ -324,6 +324,9 @@ summary {
   width: 0;
   flex: auto;
 }
+.ws-nowrap {
+  white-space: nowrap;
+}
 .ellipsis {
   white-space: nowrap;
   overflow: hidden;

src/edit/settings.css

@@ -31,6 +31,7 @@
     min-height: $height;
     max-height: 50vh;
     white-space: pre;
+    font: inherit;
     &:placeholder-shown {
       resize: none;
       height: 1.75em;

src/edit/settings.js

@@ -43,6 +43,7 @@ function StyleSettings(ui) {
   const pendingSetters = new Map();
   const updaters = [
     initCheckbox(elUpd, 'updatable', tryURL(style.updateUrl).href),
+    initCheckbox('#ss-overridden', 'overridden', false),
     initInput('#ss-update-url', 'updateUrl', '', {
       validate(el) {
         elUpd.disabled = !el.value || !el.validity.valid;

src/edit/style-settings.html

@@ -20,11 +20,18 @@
     <input name="ss-scheme" type="radio" value="light">
   </label>
 </div>
-<label i18n="styleIncludeLabel">
+<div>
+  <label for="ss-inclusions" i18n="styleSitesInclude"></label>
+  <a class="icon" tabindex="0" data-cmd="note" i18n="title:styleSitesIncludeNote">
+    <i class="i-info"></i>
+  </a> <!--preserving space-->
+  <label i18n="+styleSitesIncludeOvr" class="ws-nowrap">
+    <input id="ss-overridden" type="checkbox">
+  </label>
   <textarea id="ss-inclusions" spellcheck="false" class="w100"
             placeholder="*://www.aaa.com/*"></textarea>
-</label>
-<label i18n="styleExcludeLabel">
+</div>
+<label i18n="styleSitesExclude">
   <textarea id="ss-exclusions" spellcheck="false" class="w100"
             placeholder="*://www.aaa.com/*"></textarea>
 </label>