this fixes #135

Author: gorhill

_locales/de/messages.json

@@ -331,6 +331,10 @@
         "message": "",
         "description": "English:"
     },
+    "settingsSubframeFgColor" : {
+        "message": "Blocked frames color (any valid CSS color):",
+        "description": "English: Blocked frames color (any valid CSS color):"
+    },
     "settingsPrivacyHeader" : {
         "message": "Privatsphäre",
         "description": "header of Privacy section"

_locales/en/messages.json

@@ -331,6 +331,10 @@
         "message": "",
         "description": "English:"
     },
+    "settingsSubframeFgColor" : {
+        "message": "Blocked frames color (any valid CSS color):",
+        "description": "English: Blocked frames color (any valid CSS color):"
+    },
     "settingsPrivacyHeader" : {
         "message": "Privacy",
         "description": "header of Privacy section"

_locales/fr/messages.json

@@ -331,6 +331,10 @@
         "message": "",
         "description": "English:"
     },
+    "settingsSubframeFgColor" : {
+        "message": "Couleur pour les <iframe> bloqués (syntaxe CSS):",
+        "description": "English: Blocked frames color (any valid CSS color):"
+    },
     "settingsPrivacyHeader" : {
         "message": "Confidentialité",
         "description": "header of Privacy section"

_locales/ru/messages.json

@@ -331,6 +331,10 @@
         "message": "",
         "description": "English:"
     },
+    "settingsSubframeFgColor" : {
+        "message": "Blocked frames color (any valid CSS color):",
+        "description": "English: Blocked frames color (any valid CSS color):"
+    },
     "settingsPrivacyHeader" : {
         "message": "Конфиденциальность",
         "description": "header of Privacy section"

js/background.js

@@ -49,7 +49,7 @@ var HTTPSB = {
         spoofUserAgentWith: 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36\nMozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.152 Safari/537.36\nMozilla/5.0 (Windows NT 6.1; WOW64; rv:28.0) Gecko/20100101 Firefox/28.0\nMozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36\nMozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36\n',
         statsFilters: {},
         strictBlocking: true,
-        subframeOpacity: 1
+        subframeFgColor: 'rgba(204,0,0,1)'
     },
 
     runtimeId: 1,

js/settings.js

@@ -31,6 +31,31 @@ function gethttpsb() {
 
 /******************************************************************************/
 
+var subframeDemoBackgroundImage = 'repeating-linear-gradient(\
+-45deg,\
+{{color}},{{color}} 25%,\
+transparent 25%,transparent 50%,\
+{{color}} 50%,{{color}} 75%,\
+transparent 75%,transparent\
+)';
+
+var updateSubframeDemoPattern = function() {
+    var demo = $('#subframe-fgcolor-demo');
+    var color = $('#subframe-fgcolor').val();
+    demo.css('border-color', color);
+    var re = new RegExp('\{\{color\}\}', 'g');
+    demo.css('background-image', subframeDemoBackgroundImage.replace(re, color));
+};
+
+var validateColor = function(color) {
+    if ( color === '' ) {
+        return 'rgba(204,0,0,1)';
+    }
+    return color;
+};
+
+/******************************************************************************/
+
 function renderNumber(value) {
     // TODO: localization
     if ( +value > 1000 ) {
@@ -74,6 +99,7 @@ function onChangeValueHandler(elem, setting, min, max) {
 /******************************************************************************/
 
 function prepareToDie() {
+    changeUserSettings('subframeFgColor', validateColor($('#subframe-fgcolor').val()));
     onChangeValueHandler($('#delete-unused-session-cookies-after'), 'deleteUnusedSessionCookiesAfter', 15, 1440);
     onChangeValueHandler($('#clear-browser-cache-after'), 'clearBrowserCacheAfter', 15, 1440);
     onChangeValueHandler($('#spoof-user-agent-every'), 'spoofUserAgentEvery', 2, 999);
@@ -94,6 +120,8 @@ $(function() {
     $('#auto-whitelist-page-domain').attr('checked', userSettings.autoWhitelistPageDomain === true);
     $('#smart-auto-reload').val(userSettings.smartAutoReload);
     $('#delete-unused-temporary-scopes').attr('checked', userSettings.deleteUnusedTemporaryScopes === true);
+    $('#subframe-fgcolor').val(userSettings.subframeFgColor);
+    updateSubframeDemoPattern();
     $('#delete-unused-session-cookies').attr('checked', userSettings.deleteUnusedSessionCookies === true);
     $('#delete-unused-session-cookies-after').val(userSettings.deleteUnusedSessionCookiesAfter);
     $('#delete-blacklisted-cookies').attr('checked', userSettings.deleteCookies === true);
@@ -133,6 +161,12 @@ $(function() {
     $('#delete-unused-temporary-scopes').on('change', function(){
         changeUserSettings('deleteUnusedTemporaryScopes', $(this).is(':checked'));
     });
+    $('#subframe-fgcolor').on('change', function(){
+        var color = validateColor($(this).val());
+        $(this).val(color);
+        changeUserSettings('subframeFgColor', color);
+        updateSubframeDemoPattern();
+    });
     $('#delete-unused-session-cookies').on('change', function(){
         changeUserSettings('deleteUnusedSessionCookies', $(this).is(':checked'));
     });

js/storage.js

@@ -54,6 +54,9 @@ HTTPSB.loadUserSettings = function() {
             store.autoCreateScope = store.autoCreateSiteScope ? 'site' : '';
             delete store.autoCreateSiteScope;
         }
+        // https://github.com/gorhill/httpswitchboard/issues/135
+        // No longer needed.
+        delete store.subframeOpacity;
 
         HTTPSB.userSettings = store;
     };

js/traffic.js

@@ -48,7 +48,16 @@ padding: 0; \
 font: 15px httpsb,sans-serif; \
 width: 100%; \
 height: 100%; \
-background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QkOFgcvc4DETwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAACGSURBVFjD7ZZBCsAgEAMT6f+/nJ5arYcqiKtIPAaFYR2DFCAAgEQ8iwzLCLxZWglSZgKUdgHJk2kdLEY5C4QAUxeIFOINfwUOBGkLPBnkAIEDQPoEDiw+uoGHBQ4ovv4GnvTMS4EvC+wvhBvYAltgC2yBLbAFPlTgvKG6vxXZB6QOl2S7gNw6ktgOp+IH7wAAAABJRU5ErkJggg==') repeat; \
+background-color:transparent;\
+background-size:10px 10px;\
+background-image:\
+repeating-linear-gradient(\
+-45deg,\
+rgba(204,0,0,0.5),rgba(204,0,0,0.5) 25%,\
+transparent 25%,transparent 50%,\
+rgba(204,0,0,0.5) 50%,rgba(204,0,0,0.5) 75%,\
+transparent 75%,transparent\
+);\
 text-align: center; \
 } \
 #p { \
@@ -98,42 +107,41 @@ margin:0;\
 border:0;\
 padding:0;\
 font:13px httpsb,sans-serif;\
-text-align:center;\
 }\
 #bg{\
+border:1px dotted {{fgColor}};\
 position:absolute;\
 top:0;\
 right:0;\
 bottom:0;\
 left:0;\
-background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QkOFgcvc4DETwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAACGSURBVFjD7ZZBCsAgEAMT6f+/nJ5arYcqiKtIPAaFYR2DFCAAgEQ8iwzLCLxZWglSZgKUdgHJk2kdLEY5C4QAUxeIFOINfwUOBGkLPBnkAIEDQPoEDiw+uoGHBQ4ovv4GnvTMS4EvC+wvhBvYAltgC2yBLbAFPlTgvKG6vxXZB6QOl2S7gNw6ktgOp+IH7wAAAABJRU5ErkJggg==') repeat;\
-opacity:{{opacity}};\
+background-color:transparent;\
+background-size:10px 10px;\
+background-image:\
+repeating-linear-gradient(\
+-45deg,\
+{{fgColor}},{{fgColor}} 25%,\
+transparent 25%,transparent 50%,\
+{{fgColor}} 50%,{{fgColor}} 75%,\
+transparent 75%,transparent\
+);\
+text-align:center;\
 }\
-#bgov{\
-border:1px dotted #c00;\
-position:absolute;\
-top:0;\
-right:0;\
-bottom:0;\
-left:0;\
-z-index:1;\
-opacity:{{opacity}};\
+#bg > div{\
+display:inline-block;\
+background-color:rgba(255,255,255,1);\
 }\
-#fg{\
+#bg > div > div {\
 padding:0 2px;\
 display:inline-block;\
-position:relative;\
-z-index:9;\
 color:white;\
-background:#c00;\
+background-color:{{fgColor}};\
 }\
 </style>\
 <title>Blocked by HTTPSB</title>\
 </head>\
 <body title='&ldquo;{{hostname}}&rdquo; frame\nblocked by HTTP Switchboard'>\
-<div id='bg'></div>\
-<div id='bgov'></div>\
-<span id='fg'>{{hostname}}</span>\
+<div id='bg'><div><div>{{hostname}}</div></div></div>\
 </body>\
 </html>";
 
@@ -372,7 +380,7 @@ var onBeforeRequestHandler = function(details) {
         var html = subFrameReplacement
             .replace(/{{fontUrl}}/g, httpsb.fontCSSURL)
             .replace(/{{hostname}}/g, requestHostname)
-            .replace(/{{opacity}}/g, httpsb.userSettings.subframeOpacity.toFixed(2));
+            .replace(/{{fgColor}}/g, httpsb.userSettings.subframeFgColor);
         // quickProfiler.stop();
         return { 'redirectUrl': 'data:text/html,' + encodeURIComponent(html) };
     }

settings.html

@@ -33,6 +33,16 @@
     word-wrap: normal;
     overflow-x: scroll;
     }
+#subframe-fgcolor-demo {
+    border:1px dotted transparent;
+    display: inline-block;
+    width: 2em;
+    height: 1.25em;
+    position: relative;
+    top: 5px;
+    background-color:transparent;
+    background-size:10px 10px;
+    }
 </style>
 </head>
 
@@ -81,6 +91,7 @@ <h2 data-i18n="settingsMatrixHeader"></h2>
             <input id="delete-unused-temporary-scopes" type="checkbox"><span data-i18n="settingsMatrixDeleteUnusedTemporaryScopesPrompt1"></span>
             <!-- <button class="whatisthis"></button>
             <div class="whatisthis-expandable para" data-i18n="settingsAutoDeleteTemporaryScopesHelp"></div> -->
+        <li><span data-i18n="settingsSubframeFgColor"></span> <input id="subframe-fgcolor" type="text" value="" size="16"><span id="subframe-fgcolor-demo"></span>
         </ul>
 </ul>