diff --git a/src/js/popup.js b/src/js/popup.js index 6ac7f167aa..7eb62c8fa7 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -281,7 +281,10 @@ function refreshPopup(tabId) { //TODO this is calling get action and then being used to call get Action var origins = badger.getAllOriginsForTab(tabId); if (!origins || origins.length === 0) { - $("#blockedResources").html(i18n.getMessage("popup_blocked")); + $("#blockedResources").replaceWith($('
', { + id: "noThirdPartyResources", + text: i18n.getMessage("popup_blocked") + })); $('#number_trackers').text('0'); return; } diff --git a/src/skin/popup.css b/src/skin/popup.css index bfd9709527..1b64599af5 100644 --- a/src/skin/popup.css +++ b/src/skin/popup.css @@ -29,6 +29,10 @@ body { overflow-y: hidden; overflow-x: hidden; width: 400px; + + display: flex; + flex-flow: column nowrap; + height: 100%; } a { text-decoration: none } @@ -160,8 +164,9 @@ left: 0; display: none; } #privacyBadgerHeader{ -color: #505050; -font-size: 16px; + color: #505050; + font-size: 16px; + flex: none; } #privacyBadgerHeader h2{ margin: 5px; @@ -190,8 +195,38 @@ font-size: 16px; .ui-slider .ui-slider-handle { cursor: move; } + #siteControls { margin-bottom: 5px; + flex: none; +} + +#blockedResourcesContainer { + display: flex; + flex-direction: column; + height: 100%; + min-height: 0; +} + +#blockedResourcesHeader { + flex: none; +} + +#blockedResources { + display: flex; + flex-direction: column; + height: 100%; + min-height: 0; +} + +#blockedResourcesInner { + flex: 1 1 auto; + overflow-y: auto; + min-height: 0; +} + +#noThirdPartyResources { + flex: none; } #firstRun { @@ -215,8 +250,7 @@ font-size: 16px; color: #333; } .clickerContainer { - max-height: 290px; - overflow-y: auto; + height: 100%; background-color: #E8E9EA; } .key { diff --git a/src/skin/popup.html b/src/skin/popup.html index c03e08fe36..2d4fb7461a 100644 --- a/src/skin/popup.html +++ b/src/skin/popup.html @@ -69,10 +69,13 @@

+
-

-
-
+
+

+
+
+
@@ -81,6 +84,7 @@

+