placeholder styling gone: it's bloat-ish

src/css/popup.css

@@ -174,14 +174,17 @@ body[dir="rtl"] #mtxSwitches > li > span:before {
     display: block;
     }
 
+#buttonReload {
+    margin-right: 1em;
+    }
 body #buttonRevertAll {
     position: relative;
     color: transparent;
     }
 body #buttonRevertAll > span {
-    position: absolute;
-    font-size: 60%;
     color: black;
+    font-size: 60%;
+    position: absolute;
     }
 body #buttonRevertAll > span:nth-of-type(1) {
     left: 3px;

src/js/background.js

@@ -73,9 +73,7 @@ return {
         spoofUserAgent: false,
         spoofUserAgentEvery: 5,
         spoofUserAgentWith: defaultUserAgentStrings,
-        statsFilters: {},
-        subframeColor: '#cc0000',
-        subframeOpacity: 100
+        statsFilters: {}
     },
 
     clearBrowserCacheCycle: 0,

src/js/contentscript-end.js

@@ -153,12 +153,34 @@ var collapser = (function() {
     var newRequests = [];
     var pendingRequests = {};
     var pendingRequestCount = 0;
+    var backgroundImage = [
+        'linear-gradient(',
+            '0deg,',
+            'rgba(0,0,0,0.02) 25%,',
+            'rgba(0,0,0,0.05) 25%,',
+            'rgba(0,0,0,0.05) 75%,',
+            'rgba(0,0,0,0.02) 75%,',
+            'rgba(0,0,0,0.02)',
+        ') center center / 10px 10px repeat scroll,',
+        'linear-gradient(',
+            '90deg,',
+            'rgba(0,0,0,0.02) 25%,',
+            'rgba(0,0,0,0.05) 25%,',
+            'rgba(0,0,0,0.05) 75%,',
+            'rgba(0,0,0,0.02) 75%,',
+            'rgba(0,0,0,0.02)',
+        ') center center / 10px 10px repeat scroll'
+    ].join('');
     var srcProps = {
         'iframe': 'src',
         'img': 'src'
     };
+    var srcValues = {
+        'iframe': 'about:blank',
+        'img': 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+    };
 
-    var PendingRequest = function(target, tagName, attr) {
+    var PendingRequest = function(target) {
         this.id = requestId++;
         this.target = target;
         pendingRequests[this.id] = this;
@@ -175,14 +197,17 @@ var collapser = (function() {
     };
 
     var onProcessed = function(response) {
+        if ( !response ) {
+            return;
+        }
         var requests = response.requests;
         if ( requests === null || Array.isArray(requests) === false ) {
             return;
         }
         var collapse = response.collapse;
-
+        var bgImg = backgroundImage;
         var i = requests.length;
-        var request, entry;
+        var request, entry, target, tagName;
         while ( i-- ) {
             request = requests[i];
             if ( pendingRequests.hasOwnProperty(request.id) === false ) {
@@ -191,15 +216,17 @@ var collapser = (function() {
             entry = pendingRequests[request.id];
             delete pendingRequests[request.id];
             pendingRequestCount -= 1;
-
             if ( !request.blocked ) {
                 continue;
             }
-
+            target = entry.target;
             if ( collapse ) {
-                entry.target.style.setProperty('display', 'none', 'important');
+                target.style.setProperty('display', 'none', 'important');
             } else {
-                // TODO: uMatrix placeholder
+                tagName = target.localName;
+                target.setAttribute(srcProps[tagName], srcValues[tagName]);
+                target.style.setProperty('border', '1px solid rgba(0,0,0,0.05)', 'important');
+                target.style.setProperty('background', bgImg, 'important');
             }
         }
 
@@ -247,7 +274,7 @@ var collapser = (function() {
         if ( src.lastIndexOf('http', 0) !== 0 ) {
             return;
         }
-        var req = new PendingRequest(target, tagName, prop);
+        var req = new PendingRequest(target);
         newRequests.push(new BouncingRequest(req.id, tagName, src));
     };
 

src/js/settings.js

@@ -36,39 +36,6 @@ var cachedUserSettings = {};
 
 /******************************************************************************/
 
-var subframeDemoBackgroundImage = 'repeating-linear-gradient(\
--45deg,\
-{{color}},{{color}} 24%,\
-transparent 26%,transparent 49%,\
-{{color}} 51%,{{color}} 74%,\
-transparent 76%,transparent\
-)';
-
-var updateSubframeDemo = function() {
-    var demo = uDom('#subframe-color-demo');
-    var color = uDom('#subframe-color').val();
-    demo.css('border-color', color);
-    var re = new RegExp('\{\{color\}\}', 'g');
-    demo.css('background-image', subframeDemoBackgroundImage.replace(re, color));
-    demo.css('opacity', (parseInt(uDom('#subframe-opacity').val(), 10) / 100).toFixed(1));
-};
-
-var onSubframeColorChanged = function() {
-    var color = uDom('#subframe-color').val();
-    if ( color === '' ) {
-        uDom('#subframe-color').val(color);
-    }
-    changeUserSettings('subframeColor', color);
-    var opacity = parseInt(uDom('#subframe-opacity').val(), 10);
-    if ( Number.isNaN(opacity) ) {
-        opacity = 100;
-    }
-    changeUserSettings('subframeOpacity', opacity);
-    updateSubframeDemo();
-};
-
-/******************************************************************************/
-
 function changeUserSettings(name, value) {
     messager.send({
         what: 'userSettings',
@@ -80,7 +47,6 @@ function changeUserSettings(name, value) {
 /******************************************************************************/
 
 function prepareToDie() {
-    onSubframeColorChanged();
 }
 
 /******************************************************************************/
@@ -98,8 +64,6 @@ var installEventHandlers = function() {
     uDom('#smart-auto-reload').on('change', function(){
         changeUserSettings('smartAutoReload', this.value);
     });
-    uDom('#subframe-color').on('change', function(){ onSubframeColorChanged(); });
-    uDom('#subframe-opacity').on('change', function(){ onSubframeColorChanged(); });
 
     // https://github.com/gorhill/httpswitchboard/issues/197
     uDom(window).on('beforeunload', prepareToDie);
@@ -122,9 +86,6 @@ uDom.onLoad(function() {
             elem.prop('checked', elem.val() === userSettings.displayTextSize);
         });
         uDom('#smart-auto-reload').val(userSettings.smartAutoReload);
-        uDom('#subframe-color').val(userSettings.subframeColor);
-        uDom('#subframe-opacity').val(userSettings.subframeOpacity);
-        updateSubframeDemo();
 
         installEventHandlers();
     };

src/js/traffic.js

@@ -30,69 +30,6 @@
 
 /******************************************************************************/
 
-// The `id='uMatrix'` is important, it allows µMatrix to detect whether a
-// specific data URI originates from itself.
-
-var subFrameReplacement = [
-    '<!DOCTYPE html>',
-    '<html>',
-    '<head>',
-    '<meta charset="utf-8" />',
-    '<style>',
-        '@font-face{',
-        'font-family:httpsb;',
-        'font-style:normal;',
-        'font-weight:400;',
-        'src:local("httpsb"),url("', µMatrix.fontCSSURL, '") format("truetype");',
-    '}',
-    'body{',
-        'margin:0;',
-        'border:0;',
-        'padding:0;',
-        'font:13px httpsb,sans-serif;',
-    '}',
-    '#bg{',
-        'border:1px dotted {{subframeColor}};',
-        'position:absolute;',
-        'top:0;',
-        'right:0;',
-        'bottom:0;',
-        'left:0;',
-        'background-color:transparent;',
-        'background-size:10px 10px;',
-        'background-image:',
-        'repeating-linear-gradient(',
-            '-45deg,',
-            '{{subframeColor}},{{subframeColor}} 24%,',
-            'transparent 25%,transparent 49%,',
-            '{{subframeColor}} 50%,{{subframeColor}} 74%,',
-            'transparent 75%,transparent',
-        ');',
-        'opacity:{{subframeOpacity}};',
-        'text-align:center;',
-    '}',
-    '#bg > div{',
-        'display:inline-block;',
-        'background-color:rgba(255,255,255,1);',
-    '}',
-    '#bg > div > a {',
-        'padding:0 2px;',
-        'display:inline-block;',
-        'color:white;',
-        'background-color:{{subframeColor}};',
-        'text-decoration:none;',
-    '}',
-    '</style>',
-    '<title>Blocked by &mu;Matrix</title>',
-    '</head>',
-    '<body title="&ldquo;{{hostname}}&rdquo; frame\nblocked by &mu;Matrix">',
-        '<div id="bg"><div><a href="{{frameSrc}}" target="_blank">{{hostname}}</a></div></div>',
-    '</body>',
-    '</html>'
-].join('');
-
-/******************************************************************************/
-
 // Intercept and filter web requests according to white and black lists.
 
 var onBeforeRootFrameRequestHandler = function(details) {
@@ -201,19 +138,6 @@ var onBeforeRequestHandler = function(details) {
     // blacklisted
     // console.debug('onBeforeRequestHandler()> BLOCK "%s": %o', details.url, details);
 
-    // If it's a blacklisted frame, redirect to frame.html
-    // rhill 2013-11-05: The root frame contains a link to noop.css, this
-    // allows to later check whether the root frame has been unblocked by the
-    // user, in which case we are able to force a reload using a redirect.
-    if ( requestType === 'frame' ) {
-        var html = subFrameReplacement
-            .replace(/{{hostname}}/g, requestHostname)
-            .replace('{{frameSrc}}', requestURL)
-            .replace(/{{subframeColor}}/g, µm.userSettings.subframeColor)
-            .replace('{{subframeOpacity}}', (µm.userSettings.subframeOpacity / 100).toFixed(1));
-        return { 'redirectUrl': 'data:text/html,' + encodeURIComponent(html) };
-    }
-
     return { 'cancel': true };
 };
 

src/popup.html

@@ -47,8 +47,8 @@
 
     <!-- Yandex: float works correctly only if it is the first child -->
     <div class="toolbar alignRight">
-        <button id="buttonRevertAll" type="button" class="fa tip-anchor-right" tabindex="-1" data-i18n-tip="matrixRevertButtonAllTip">&#xf12d;<span class="fa">&#xf12d;</span><span class="fa">&#xf12d;</span><span class="fa">&#xf12d;</span><span class="fa">&#xf12d;</span></button>
         <button id="buttonReload" type="button" class="fa tip-anchor-right" data-i18n-tip="matrixReloadButton">&#xf021;</button>
+        <button id="buttonRevertAll" type="button" class="fa tip-anchor-right" tabindex="-1" data-i18n-tip="matrixRevertButtonAllTip">&#xf12d;<span class="fa">&#xf12d;</span><span class="fa">&#xf12d;</span><span class="fa">&#xf12d;</span><span class="fa">&#xf12d;</span></button>
         <button id="buttonDashboard" type="button" class="extensionURL fa tip-anchor-right" data-extension-url="dashboard.html">&#xf085;</button>
     </div>
 

src/settings.html

@@ -23,20 +23,6 @@ ul > li {
     font-weight: 100;
     color: #888;
     }
-#subframe-color-demo {
-    margin: 0;
-    border: 1px dotted transparent;
-    padding: 0;
-    display: inline-block;
-    position: relative;
-    top: 1px;
-    width: 2em;
-    height: 20px;
-    text-align: center;
-    vertical-align: baseline;
-    background-color: transparent;
-    background-size: 10px 10px;
-    }
 </style>
 </head>
 
@@ -48,10 +34,6 @@ ul > li {
     <li style="margin-top:0.5em;"><span data-i18n="settingsMatrixDisplayTextSizePrompt"></span>
     <input type="radio" name="displayTextSize" id="displayTextSizeNormal" value="13px"><label data-i18n="settingsMatrixDisplayTextSizeNormal" for="displayTextSizeNormal"></label>
     <input type="radio" name="displayTextSize" id="displayTextSizeLarge" value="16px"><label data-i18n="settingsMatrixDisplayTextSizeLarge" for="displayTextSizeLarge"></label>
-    <li style="margin-top:0.5em;">
-        <span data-i18n="settingsSubframeColor"></span> <input id="subframe-color" type="color" value="#cc0000">
-        &ensp;<span data-i18n="settingsSubframeOpacity"></span> <input id="subframe-opacity" type="range" min="0" max="100" value="100">
-        &ensp;<span id="subframe-color-demo">&nbsp;</span>
 </ul>
 
 <h2 data-i18n="settingsMatrixConvenienceHeader"></h2>
@@ -59,14 +41,6 @@ ul > li {
     <li>
         <input id="collapseBlocked" type="checkbox" data-range="bool">
         <label data-i18n="settingsCollapseBlocked" for="collapseBlocked"></label>
-    <!-- <li>
-        <span data-i18n="settingsMatrixAutoReloadPrompt"></span> <select id="smart-auto-reload">
-            <option value="none" data-i18n="settingsMatrixAutoReloadNone">
-            <option value="current" data-i18n="settingsMatrixAutoReloadCurrent">
-            <option value="all" data-i18n="settingsMatrixAutoReloadAll">
-            </select> <button class="whatisthis"></button>
-        <div class="whatisthis-expandable para" data-i18n="settingsMatrixAutoReloadInfo"></div>
-    -->
 </ul>