Add: display excluded reason in popup

_locales/en/messages.json

@@ -1301,6 +1301,12 @@
     "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"
   },
+  "styleNotAppliedSchemeDark": {
+    "message": "This style is only applied in Dark Mode"
+  },
+  "styleNotAppliedSchemeLight": {
+    "message": "This style is only applied in Light Mode"
+  },
   "styleRegexpInvalidExplanation": {
     "message": "Some 'regexp()' rules that could not be compiled at all."
   },

background/style-manager.js

@@ -390,6 +390,7 @@ const styleManager = (() => {
       let excluded = false;
       let sloppy = false;
       let sectionMatched = false;
+      let excludedScheme = false;
       const match = urlMatchStyle(query, data);
       // TODO: enable this when the function starts returning false
       // if (match === false) {
@@ -398,6 +399,9 @@ const styleManager = (() => {
       if (match === 'excluded') {
         excluded = true;
       }
+      if (match === 'excludedScheme') {
+        excludedScheme = true;
+      }
       for (const section of data.sections) {
         if (styleCodeEmpty(section.code)) {
           continue;
@@ -415,7 +419,8 @@ const styleManager = (() => {
         result.push({
           data: getStyleWithNoCode(data),
           excluded,
-          sloppy
+          sloppy,
+          excludedScheme
         });
       }
     }

popup/popup.js

@@ -329,13 +329,14 @@ function createStyleElement(style) {
   const styleName = $('.style-name', entry);
   styleName.lastChild.textContent = style.name;
   setTimeout(() => {
-    styleName.title = entry.styleMeta.sloppy ?
-      t('styleNotAppliedRegexpProblemTooltip') :
-        styleName.scrollWidth > styleName.clientWidth + 1 ?
-          styleName.textContent : '';
+    styleName.title =
+      entry.styleMeta.sloppy ? t('styleNotAppliedRegexpProblemTooltip') :
+      entry.styleMeta.excludedScheme ? t(`styleNotAppliedScheme${capitalize(entry.styleMeta.preferScheme)}`) :
+      styleName.scrollWidth > styleName.clientWidth + 1 ? styleName.textContent :
+      '';
   });
 
-  entry.classList.toggle('not-applied', style.excluded || style.sloppy);
+  entry.classList.toggle('not-applied', style.excluded || style.sloppy || style.excludedScheme);
   entry.classList.toggle('regexp-partial', style.sloppy);
 
   $('.exclude-by-domain-checkbox', entry).checked = styleExcluded(style, 'domain');
@@ -347,6 +348,10 @@ function createStyleElement(style) {
   return entry;
 }
 
+function capitalize(s) {
+  return s[0].toUpperCase() + s.slice(1);
+}
+
 function styleExcluded({exclusions}, type) {
   if (!exclusions) {
     return false;