diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 533958b5..1ad11c06 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1212,7 +1212,7 @@ "message": "Expose iframes via HTML[stylus-iframe]" }, "optionsAdvancedExposeIframesNote": { - "message": "Enables writing iframe-specific CSS like 'html[stylus-iframe] h1 { display:none }'" + "message": "Exposes the top site domain in each iframe.\nEnables writing iframe-specific CSS like this:\nhtml[stylus-iframe$=\"twitter.com\"] h1 { display:none }" }, "optionsAdvancedContextDelete": { "message": "Add 'Delete' in editor context menu" diff --git a/background/background.js b/background/background.js index eb3c59cb..fb245286 100644 --- a/background/background.js +++ b/background/background.js @@ -247,14 +247,38 @@ window.addEventListener('storageReady', function _() { })); }); +// ************************************************************************* +{ + const getStylesForFrame = (msg, sender) => { + const stylesTask = getStyles(msg); + if (!sender || !sender.frameId) return stylesTask; + return Promise.all([ + stylesTask, + getTab(sender.tab.id), + ]).then(([styles, tab]) => { + if (tab) styles.exposeIframes = tab.url.replace(/(\/\/[^/]*).*/, '$1'); + return styles; + }); + }; + const updateAPI = (_, enabled) => { + window.API_METHODS.getStylesForFrame = enabled ? getStylesForFrame : getStyles; + }; + prefs.subscribe(['exposeIframes'], updateAPI); + updateAPI(null, prefs.readOnlyValues.exposeIframes); +} + // ************************************************************************* function webNavigationListener(method, {url, tabId, frameId}) { - getStyles({matchUrl: url, asHash: true}).then(styles => { + Promise.all([ + getStyles({matchUrl: url, asHash: true}), + frameId && prefs.readOnlyValues.exposeIframes && getTab(tabId), + ]).then(([styles, tab]) => { if (method && URLS.supported(url) && tabId >= 0) { if (method === 'styleApply') { handleCssTransitionBug({tabId, frameId, url, styles}); } + if (tab) styles.exposeIframes = tab.url.replace(/(\/\/[^/]*).*/, '$1'); sendMessage({ tabId, frameId, diff --git a/content/apply.js b/content/apply.js index 10f7554d..9038af87 100644 --- a/content/apply.js +++ b/content/apply.js @@ -43,7 +43,7 @@ } catch (e) {} } const request = Object.assign({ - method: 'getStyles', + method: 'getStylesForFrame', asHash: true, matchUrl, }, options); @@ -143,9 +143,9 @@ } exposeIframes = state; const attr = document.documentElement.getAttribute('stylus-iframe'); - if (state && attr !== '') { - document.documentElement.setAttribute('stylus-iframe', ''); - } else if (!state && attr === '') { + if (state && state !== attr) { + document.documentElement.setAttribute('stylus-iframe', state); + } else if (!state && attr !== undefined) { document.documentElement.removeAttribute('stylus-iframe'); } }