From 6d65d2a2b60d02a9667a3ba8f77f5ad097ebbf96 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 29 Apr 2017 02:36:10 +0300
Subject: [PATCH] Expose iframes via HTML[stylus-iframe]

* convert actions to buttons
---
 _locales/en/messages.json | 17 +++++++++++----
 apply.js                  | 24 +++++++++++++++++++-
 options/index.css         | 17 +++++++++++++--
 options/index.html        | 46 ++++++++++++++++++++++++---------------
 prefs.js                  |  6 ++++-
 storage.js                | 13 ++++++-----
 6 files changed, 92 insertions(+), 31 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 8cd0ccd7..f6f4ff42 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -655,7 +655,7 @@
     "message": "Background color when disabled"
   },
   "optionsPopupWidth": {
-    "message": "Width (in pixels)"
+    "message": "Popup width (in pixels)"
   },
   "optionsUpdateInterval": {
     "message": "Automatically check for and install all available userstyle updates (in hrs)"
@@ -675,6 +675,15 @@
   "optionsCustomizeUpdate": {
     "message": "Updates"
   },
+  "optionsAdvanced": {
+    "message": "Advanced"
+  },
+  "optionsAdvancedExposeIframes": {
+    "message": "Expose iframes via HTML[stylus-iframe]"
+  },
+  "optionsAdvancedExposeIframesNote": {
+    "message": "Enables writing iframe-specific CSS like 'html[stylus-iframe] h1 { display:none }'"
+  },
   "optionsActions": {
     "message": "Actions"
   },
@@ -682,10 +691,10 @@
     "message": "Reset the options to default values"
   },
   "optionsResetButton": {
-    "message": "Reset"
+    "message": "Reset options"
   },
   "optionsOpenManager": {
-    "message": "Open styles manager"
+    "message": "Manage styles"
   },
   "optionsOpenManagerNote": {
     "message": "Define a keyboard shortcut"
@@ -697,6 +706,6 @@
     "message": "Open"
   },
   "optionsCheck": {
-    "message": "Check"
+    "message": "Update styles"
   }
 }
diff --git a/apply.js b/apply.js
index a2f523b2..6fc05cbe 100644
--- a/apply.js
+++ b/apply.js
@@ -7,6 +7,7 @@ var ID_PREFIX = 'stylus-';
 var ROOT = document.documentElement;
 var isOwnPage = location.href.startsWith('chrome-extension:');
 var disableAll = false;
+var exposeIframes = false;
 var styleElements = new Map();
 var disabledElements = new Map();
 var retiredStyleTimers = new Map();
@@ -94,6 +95,9 @@ function applyOnMessage(request, sender, sendResponse) {
       if ('disableAll' in request.prefs) {
         doDisableAll(request.prefs.disableAll);
       }
+      if ('exposeIframes' in request.prefs) {
+        doExposeIframes(request.prefs.exposeIframes);
+      }
       break;
 
     case 'ping':
@@ -103,7 +107,7 @@ function applyOnMessage(request, sender, sendResponse) {
 }
 
 
-function doDisableAll(disable) {
+function doDisableAll(disable = disableAll) {
   if (!disable === !disableAll) {
     return;
   }
@@ -117,6 +121,20 @@ function doDisableAll(disable) {
 }
 
 
+function doExposeIframes(state = exposeIframes) {
+  if (state === exposeIframes || window == parent) {
+    return;
+  }
+  exposeIframes = state;
+  const attr = document.documentElement.getAttribute('stylus-iframe');
+  if (state && attr != '') {
+    document.documentElement.setAttribute('stylus-iframe', '');
+  } else if (!state && attr == '') {
+    document.documentElement.removeAttribute('stylus-iframe');
+  }
+}
+
+
 function applyStyleState({id, enabled}) {
   const inCache = disabledElements.get(id) || styleElements.get(id);
   const inDoc = document.getElementById(ID_PREFIX + id);
@@ -169,6 +187,10 @@ function applyStyles(styles) {
     doDisableAll(styles.disableAll);
     delete styles.disableAll;
   }
+  if ('exposeIframes' in styles) {
+    doExposeIframes(styles.exposeIframes);
+    delete styles.exposeIframes;
+  }
   if (document.head
   && document.head.firstChild
   && document.head.firstChild.id == 'xml-viewer-style') {
diff --git a/options/index.css b/options/index.css
index bd649bbc..919d8541 100644
--- a/options/index.css
+++ b/options/index.css
@@ -37,7 +37,7 @@ body {
 
 .block:last-child {
   border-bottom: none;
-  padding-bottom: 4px;
+  padding-bottom: 0;
 }
 
 h1 {
@@ -104,6 +104,14 @@ input[type="color"] {
   height: 2em;
 }
 
+#actions {
+  justify-content: space-around;
+}
+
+#actions button {
+  width: auto;
+}
+
 [data-cmd="check-updates"] button {
   position: relative;
 }
@@ -126,7 +134,6 @@ input[type="color"] {
 #updates-installed {
   position: absolute;
   font-size: 85%;
-  right: 16px;
   margin-top: 1px;
 }
 
@@ -171,6 +178,12 @@ input[type="color"] {
   margin-bottom: 1ex;
 }
 
+sup {
+  vertical-align: baseline;
+  position: relative;
+  top: -0.4em;
+}
+
 @keyframes fadeinout {
   0%   { opacity: 0 }
   10%  { opacity: 1 }
diff --git a/options/index.html b/options/index.html
index f63b55f2..95919c47 100644
--- a/options/index.html
+++ b/options/index.html
@@ -12,9 +12,17 @@
 
 <body>
   <div id="options">
+
     <div class="block">
       <h1 i18n-text="optionsCustomizeBadge"></h1>
       <div class="items">
+        <label>
+          <span i18n-text="prefShowBadge"></span>
+          <span class="onoffswitch">
+            <input type="checkbox" class="onoffswitch-checkbox" id="show-badge">
+            <span class="onoffswitch-label"></span>
+          </span>
+        </label>
         <label>
           <span i18n-text="optionsBadgeNormal"></span>
           <input type="color" id="badgeNormal">
@@ -23,15 +31,9 @@
           <span i18n-text="optionsBadgeDisabled"></span>
           <input type="color" id="badgeDisabled">
         </label>
-        <label>
-          <span i18n-text="prefShowBadge"></span>
-          <span class="onoffswitch">
-            <input type="checkbox" class="onoffswitch-checkbox" id="show-badge">
-            <span class="onoffswitch-label"></span>
-          </span>
-        </label>
       </div>
     </div>
+
     <div class="block">
       <h1 i18n-text="optionsCustomizePopup"></h1>
       <div class="items">
@@ -48,6 +50,7 @@
         </label>
       </div>
     </div>
+
     <div class="block">
       <h1 i18n-text="optionsCustomizeUpdate"></h1>
       <div class="items">
@@ -57,21 +60,27 @@
         </label>
       </div>
     </div>
+
     <div class="block">
-      <h1 i18n-text="optionsActions"></h1>
+      <h1 i18n-text="optionsAdvanced"></h1>
       <div class="items">
         <label>
-          <span i18n-text="optionsReset"></span>
-          <button data-cmd="reset" i18n-text="optionsResetButton"></button>
-        </label>
-        <label>
-          <span i18n-text="optionsOpenManager"><sup class="chromium-only">2</sup></span>
-          <button data-cmd="open-manage" i18n-text="optionsOpen"></button>
-        </label>
-        <label data-cmd="check-updates">
-          <span i18n-text="optionsCheckUpdate"></span>
-          <button i18n-text="optionsCheck"><span id="update-progress"></span></button>
+          <span i18n-text="optionsAdvancedExposeIframes"> <sup>2</sup></span>
+          <span class="onoffswitch">
+            <input type="checkbox" class="onoffswitch-checkbox" id="exposeIframes">
+            <span class="onoffswitch-label" for="exposeIframes"></span>
+          </span>
         </label>
+      </div>
+    </div>
+
+    <div class="block" id="actions">
+      <button data-cmd="reset" i18n-text="optionsResetButton" i18n-title="optionsReset"></button>
+      <button data-cmd="open-manage" i18n-text="optionsOpenManager"><sup class="chromium-only">3</sup></button>
+      <div data-cmd="check-updates">
+        <button i18n-text="optionsCheck" i18n-title="optionsCheckUpdate">
+          <span id="update-progress"></span>
+        </button>
         <div id="updates-installed" i18n-text="updatesCurrentlyInstalled"></div>
       </div>
     </div>
@@ -83,6 +92,7 @@
         <p i18n-text="optionsUpdateIntervalNote"></p>
         <p i18n-text="optionsUpdateImportNote"></p>
       </li>
+      <li i18n-text="optionsAdvancedExposeIframesNote"></li>
       <li class="chromium-only">
         <a data-cmd="open-keyboard"
            i18n-text="optionsOpenManagerNote"
diff --git a/prefs.js b/prefs.js
index f6e9cf65..ef4a89cd 100644
--- a/prefs.js
+++ b/prefs.js
@@ -8,6 +8,7 @@ var prefs = new function Prefs() {
     'windowPosition': {},           // detached window position
     'show-badge': true,             // display text on popup menu icon
     'disableAll': false,            // boss key
+    'exposeIframes': false,         // Add 'stylus-iframe' attribute to HTML element in all iframes
 
     'popup.breadcrumbs': true,      // display 'New style' links as URL breadcrumbs
     'popup.breadcrumbs.usePath': false, // use URL path for 'this URL'
@@ -233,7 +234,10 @@ var prefs = new function Prefs() {
   return;
 
   function doBroadcast() {
-    const affects = {all: 'disableAll' in broadcastPrefs};
+    const affects = {
+      all: 'disableAll' in broadcastPrefs
+        || 'exposeIframes' in broadcastPrefs,
+    };
     if (!affects.all) {
       for (const key in broadcastPrefs) {
         affects.icon = affects.icon || affectsIcon.includes(key);
diff --git a/storage.js b/storage.js
index 194b300d..cabf3ea0 100644
--- a/storage.js
+++ b/storage.js
@@ -130,7 +130,10 @@ function filterStyles({
   && asHash != true) {
     return cachedStyles.list;
   }
-  const disableAll = asHash && prefs.get('disableAll', false);
+  const blankHash = asHash && {
+    disableAll: prefs.get('disableAll'),
+    exposeIframes: prefs.get('exposeIframes'),
+  };
 
   if (matchUrl && matchUrl.startsWith(URLS.chromeWebStore)) {
     // CWS cannot be scripted in chromium, see ChromeExtensionsClient::IsScriptableURL
@@ -145,7 +148,7 @@ function filterStyles({
     cached.hits++;
     cached.lastHit = Date.now();
     return asHash
-      ? Object.assign({disableAll}, cached.styles)
+      ? Object.assign(blankHash, cached.styles)
       : cached.styles;
   }
 
@@ -156,7 +159,7 @@ function filterStyles({
     matchUrl,
     asHash,
     strictRegexp,
-    disableAll,
+    blankHash,
     cacheKey,
   });
 }
@@ -171,7 +174,7 @@ function filterStylesInternal({
   matchUrl,
   asHash,
   strictRegexp,
-  disableAll,
+  blankHash,
   cacheKey,
 }) {
   if (matchUrl && !cachedStyles.urlDomains.has(matchUrl)) {
@@ -220,7 +223,7 @@ function filterStylesInternal({
   }
 
   return asHash
-    ? Object.assign({disableAll}, filtered)
+    ? Object.assign(blankHash, filtered)
     : filtered;
 }