diff --git a/src/css/popup.css b/src/css/popup.css index b7002bf7a..5fb2899b3 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -185,8 +185,54 @@ body.dirty #refresh:hover { font-size: 12px; margin: 0; padding: 0; + padding-top: 22px; text-align: right; } +#scopeIcons { + display: none; + cursor: default; + position: fixed; + z-index: 1; + border: 0; + direction: ltr; + margin: 0; + padding: 0; + font-size: 16px; + opacity: 0.9; + background: white; + box-sizing: border-box; + -moz-box-sizing: border-box; + } +#panes.dfEnabled #scopeIcons { + display: block; + } +#scopeIcons > span { + background-color: transparent; + border: none; + box-sizing: border-box; + -moz-box-sizing: border-box; + color: black; + display: inline-block; + height: 22px; + line-height: 22px; + text-align: center; + overflow: hidden; + position: relative; + vertical-align: middle; + } +#scopeIcons > span:nth-of-type(1) { + width: 70%; + } +#scopeIcons > span:nth-of-type(2) { + font-size: 80%; + } +#scopeIcons > span:nth-of-type(3) { + font-size: 110%; + } +#scopeIcons > span:nth-of-type(2), +#scopeIcons > span:nth-of-type(3) { + width: 15%; + } #firewallContainer > div { background-color: #e6e6e6; border: 0; @@ -222,7 +268,6 @@ body.dirty #refresh:hover { cursor: pointer; } #firewallContainer > div > span:nth-of-type(1) { - border-right: 1px solid white; padding-right: 2px; position: relative; text-overflow: ellipsis; @@ -231,17 +276,15 @@ body.dirty #refresh:hover { #firewallContainer > div > span:nth-of-type(2), #firewallContainer > div > span:nth-of-type(3), #firewallContainer > div > span:nth-of-type(4) { + border-left: 1px solid white; cursor: pointer; width: 15%; } -#firewallContainer > div > span:nth-of-type(3), -#firewallContainer > div > span:nth-of-type(4) { - border-left: 1px solid white; - color: #444; +#firewallContainer > div > span:nth-of-type(2), +#firewallContainer > div.isDomain > span:nth-of-type(3), +#firewallContainer > div.isSubDomain > span:nth-of-type(3) { text-align: center; - } -#firewallContainer > div > span:nth-of-type(4) { - display: none; + color: #444; } #firewallContainer > div.isDomain > span:nth-of-type(1) { font-weight: bold; @@ -254,10 +297,14 @@ body.dirty #refresh:hover { #firewallContainer.minimized > div:nth-of-type(1) > span:nth-of-type(1):before { content: '+'; } -#firewallContainer.minimized > div.isDomain > span:nth-of-type(3) { +#firewallContainer > div.isDomain > span:nth-of-type(3), +#firewallContainer > div.isSubDomain > span:nth-of-type(3) { display: none; } -#firewallContainer.minimized > div.isDomain > span:nth-of-type(4) { +#firewallContainer.minimized > div.isDomain > span:nth-of-type(2) { + display: none; + } +#firewallContainer.minimized > div.isDomain > span:nth-of-type(3) { display: inline-block; } #firewallContainer > div.allowed > span:nth-of-type(1):before, @@ -295,7 +342,7 @@ body.dirty #refresh:hover { background-color: rgba(96, 96, 96, 0.3); } #firewallContainer > div > span.ownRule { - color: white; + color: white !important; /* previous definition is slightly more specific */ } #firewallContainer > div > span.aRule.ownRule { background-color: rgba(0, 160, 0, 1); @@ -342,6 +389,7 @@ body.dirty #refresh:hover { display: none; position: fixed; left: 4px; + z-index: 10; } #saveRules, #flushRules { diff --git a/src/img/icons.svg b/src/img/icons.svg index 0f6944fc8..7db02a065 100755 --- a/src/img/icons.svg +++ b/src/img/icons.svg @@ -1,5 +1,13 @@ + + globe + + + + pin + + save diff --git a/src/js/popup.js b/src/js/popup.js index 04876a30b..02eb37ca2 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -45,11 +45,17 @@ document.getElementById('dfPane').style.setProperty( document.getElementById('switchPane').offsetHeight + 'px' ); -// The padlock must be manually positioned: +// The save/flush must be manually positioned: // - It's vertical position depends on the height on the title bar. +var gotoPrefsBottom = document.getElementById('gotoPrefs').getBoundingClientRect().bottom; document.getElementById('saveflushButtonGroup').style.setProperty( 'top', - (document.getElementById('gotoPrefs').getBoundingClientRect().bottom + 4) + 'px' + (gotoPrefsBottom + 4) + 'px' +); +// The scope icons as well. +document.getElementById('scopeIcons').style.setProperty( + 'top', + (gotoPrefsBottom) + 'px' ); // https://github.com/chrisaljoudi/uBlock/issues/996 @@ -320,10 +326,7 @@ var buildAllFirewallRows = function() { .on('mouseleave', '[data-src]', mouseleaveCellHandler); dfPaneBuilt = true; } - - // The padlock must be manually positioned: - // - Its horizontal position depends on whether there is a vertical - // scrollbar. + setTimeout(positionDfPaneFloaters, 50); updateAllFirewallCells(); }; @@ -379,6 +382,22 @@ var renderPrivacyExposure = function() { /******************************************************************************/ +var positionDfPaneFloaters = function() { + // The padlock must be manually positioned: + // - Its horizontal position depends on whether there is a vertical + // scrollbar. + var firewallContainer = document.getElementById('firewallContainer'), + scopeIcons = document.getElementById('scopeIcons'), + rect = firewallContainer.getBoundingClientRect(), + rectLeft = rect.left, + rectWidth = rect.width; + document.getElementById('saveRules').style.setProperty('left', (rectLeft + 4) + 'px'); + // So must be the scope icons. + // - They need to match up with the table + scopeIcons.style.setProperty('left', rectLeft + 'px'); + scopeIcons.style.setProperty('width', rectWidth + 'px'); +}; + // Assume everything has to be done incrementally. var renderPopup = function() { diff --git a/src/popup.html b/src/popup.html index b2759d774..db001dcca 100644 --- a/src/popup.html +++ b/src/popup.html @@ -28,23 +28,24 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+