Expose iframes via HTML[stylus-iframe]

* convert actions to buttons
2017-04-29 02:36:10 +03:00 · 2017-04-29 02:36:10 +03:00 · 6d65d2a2b6
commit 6d65d2a2b6
parent fbc3ac0070
6 changed files with 92 additions and 31 deletions
--- 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"
  }
 }
--- 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') {
--- 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 }
--- 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"
--- 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);
--- 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;
 }