From 1fa533d794ea27a11f8ec3f372c4aa3b91e5d430 Mon Sep 17 00:00:00 2001 From: Chris Date: Wed, 25 Mar 2015 21:26:24 -0500 Subject: [PATCH 1/6] dfPanel CSS --- src/css/popup.css | 71 +++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 60 insertions(+), 11 deletions(-) diff --git a/src/css/popup.css b/src/css/popup.css index eeff8e3de..0cc42b97e 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -81,6 +81,7 @@ body[dir="rtl"] #panes > div:nth-of-type(2) { #panes > div:nth-of-type(1) { min-width: 150px; padding: 4px 1px; + position: relative; } p { text-align: center; @@ -171,8 +172,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; @@ -208,26 +255,23 @@ 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; width: 70%; } -#firewallContainer > div > span:nth-of-type(2) { - cursor: pointer; - width: 15%; - } +#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; - color: #444; cursor: pointer; - text-align: center; width: 15%; } -#firewallContainer > div > span:nth-of-type(4) { - display: none; +#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; + color: #444; } #firewallContainer > div.isDomain > span:nth-of-type(1) { font-weight: bold; @@ -240,10 +284,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, @@ -335,6 +383,7 @@ body.dirty #refresh:hover { line-height: 40px; padding: 0.1em 0.4em; position: fixed; + z-index: 10; text-align: center; } #firewallContainer.dirty ~ #saveRules { From 6f8cac8c8e9bc76e8dd229a11859643fb05d606a Mon Sep 17 00:00:00 2001 From: Chris Date: Wed, 25 Mar 2015 21:26:49 -0500 Subject: [PATCH 2/6] dfPanel JS --- src/js/popup.js | 34 +++++++++++++++++++++++++--------- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/src/js/popup.js b/src/js/popup.js index 5dc7aa042..e3929b882 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -47,9 +47,15 @@ document.querySelector('#panes > div:nth-of-type(2)').style.setProperty( // The padlock 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('saveRules').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/gorhill/uBlock/issues/996 @@ -306,7 +312,7 @@ var buildAllFirewallRows = function() { // Remove and reuse all rows: the order may have changed, we can't just // reuse them in-place. - rowsToRecycle = uDom('#firewallContainer > div:nth-of-type(7) ~ div').detach(); + rowsToRecycle = uDom('#firewallContainer > div:nth-of-type(8) ~ div').detach(); var n = allHostnameRows.length; for ( var i = 0; i < n; i++ ) { @@ -320,13 +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. - var rect = document.getElementById('firewallContainer').getBoundingClientRect(); - document.getElementById('saveRules').style.setProperty('left', (rect.left + 4) + 'px'); - + setTimeout(positionDfPaneFloaters, 50); updateAllFirewallCells(); }; @@ -382,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() { From 4f806218a4a1c910ed1da0601d4c0d936b96469b Mon Sep 17 00:00:00 2001 From: Chris Date: Wed, 25 Mar 2015 21:27:56 -0500 Subject: [PATCH 3/6] dfPanel Popup HTML --- src/popup.html | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/popup.html b/src/popup.html index 8022a5efe..8edf79726 100644 --- a/src/popup.html +++ b/src/popup.html @@ -29,19 +29,20 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
From 8c0b9060657ca3839a880cedfbb5d385666e146c Mon Sep 17 00:00:00 2001 From: Chris Date: Wed, 25 Mar 2015 21:33:49 -0500 Subject: [PATCH 4/6] Oops: unnecessary position relative --- src/css/popup.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/css/popup.css b/src/css/popup.css index 0cc42b97e..aa8ca3b6d 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -81,7 +81,6 @@ body[dir="rtl"] #panes > div:nth-of-type(2) { #panes > div:nth-of-type(1) { min-width: 150px; padding: 4px 1px; - position: relative; } p { text-align: center; From f88144860e25ab2d2f8dea5856edc98503fead36 Mon Sep 17 00:00:00 2001 From: Chris Date: Wed, 25 Mar 2015 22:31:51 -0500 Subject: [PATCH 5/6] Oops again --- src/js/popup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/popup.js b/src/js/popup.js index e3929b882..0de196b17 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -312,7 +312,7 @@ var buildAllFirewallRows = function() { // Remove and reuse all rows: the order may have changed, we can't just // reuse them in-place. - rowsToRecycle = uDom('#firewallContainer > div:nth-of-type(8) ~ div').detach(); + rowsToRecycle = uDom('#firewallContainer > div:nth-of-type(7) ~ div').detach(); var n = allHostnameRows.length; for ( var i = 0; i < n; i++ ) { From e8d54ac58c138c78908f40b511bf9247480c2bd7 Mon Sep 17 00:00:00 2001 From: Chris Date: Wed, 25 Mar 2015 23:07:06 -0500 Subject: [PATCH 6/6] +/- symbols in df cells white when they should be --- src/css/popup.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/popup.css b/src/css/popup.css index aa8ca3b6d..34a8370f7 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -328,7 +328,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);