diff --git a/.editorconfig b/.editorconfig index b6bab6bfd0..1de3d3a8b3 100644 --- a/.editorconfig +++ b/.editorconfig @@ -9,6 +9,10 @@ end_of_line = lf insert_final_newline = true charset = utf-8 +[*.css] +indent_style = space +indent_size = 4 + [*.html] indent_style = space indent_size = 4 diff --git a/src/js/htmlutils.js b/src/js/htmlutils.js index 8f3f289f7a..3a22f066ed 100644 --- a/src/js/htmlutils.js +++ b/src/js/htmlutils.js @@ -111,17 +111,12 @@ var htmlUtils = exports.htmlUtils = { if (tabId === undefined) { tabId = "000"; } - var trackerHtml = '' + + + var trackerHtml = '
' + '
' + - '
' + - '
' + - '' + - '' + - '' + - '
' + - '
' + - '
' + - '
'; + '
' + + '
'; + return trackerHtml; }, diff --git a/src/js/options.js b/src/js/options.js index 45f20af786..99fccf6583 100644 --- a/src/js/options.js +++ b/src/js/options.js @@ -57,11 +57,16 @@ function loadOptions() { // Add event listeners for origins container. $(function () { - $('#blockedResourcesContainer').on('change', 'input:radio', updateOrigin); - $('#blockedResourcesContainer').on('mouseenter', '.tooltip', displayTooltip); - $('#blockedResourcesContainer').on('mouseleave', '.tooltip', hideTooltip); - $('#blockedResourcesContainer').on('click', '.userset .honeybadgerPowered', revertDomainControl); - $('#blockedResourcesContainer').on('click', '.removeOrigin', removeOrigin); + $('#blockedResourcesContainer') + .on('mouseenter', '.tooltip', displayTooltip) + .on('mouseleave', '.tooltip', hideTooltip) + .on('change', 'input:radio', updateOrigin) + .on('click', '.userset .honeybadgerPowered', revertDomainControl) + .on('click', '.removeOrigin', removeOrigin); + + $('.keyContainer') + .on('mouseenter', '.tooltip', displayTooltip) + .on('mouseleave', '.tooltip', hideTooltip); }); // Display jQuery UI elements @@ -360,6 +365,7 @@ function refreshFilterPage() { $("#count").text(allTrackingDomains.length); // Display tracker tooltips. + $(".keyContainer").removeClass("hidden"); $("#blockedResources")[0].innerHTML = htmlUtils.getTrackerContainerHtml(); // Display tracking domains. diff --git a/src/js/popup.js b/src/js/popup.js index 13e3b524e3..eeb7b6fb2f 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -90,10 +90,15 @@ function init() { closeOverlay(); }); $(document).ready(function () { - $('#blockedResourcesContainer').on('change', 'input:radio', updateOrigin); - $('#blockedResourcesContainer').on('mouseenter', '.tooltip', displayTooltip); - $('#blockedResourcesContainer').on('mouseleave', '.tooltip', hideTooltip); - $('#blockedResourcesContainer').on('click', '.userset .honeybadgerPowered', revertDomainControl); + $('#blockedResourcesContainer') + .on('mouseenter', '.tooltip', displayTooltip) + .on('mouseleave', '.tooltip', hideTooltip) + .on('change', 'input:radio', updateOrigin) + .on('click', '.userset .honeybadgerPowered', revertDomainControl); + + $('.keyContainer') + .on('mouseenter', '.tooltip', displayTooltip) + .on('mouseleave', '.tooltip', hideTooltip); }); //toggle activation buttons if privacy badger is not enabled for current url @@ -282,12 +287,13 @@ 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").html('

' + i18n.getMessage("popup_blocked") + '

'); $('#number_trackers').text('0'); return; } // Display tracker tooltips. + $(".keyContainer").removeClass("hidden"); $("#blockedResources")[0].innerHTML = htmlUtils.getTrackerContainerHtml(tabId); var printable = []; diff --git a/src/lib/i18n.js b/src/lib/i18n.js index 14e563d490..1670bea14f 100644 --- a/src/lib/i18n.js +++ b/src/lib/i18n.js @@ -20,11 +20,10 @@ var i18n = chrome.i18n; // Loads and inserts i18n strings into matching elements. Any inner HTML already in the // element is parsed as JSON and used as parameters to substitute into placeholders in the // i18n message. -function loadI18nStrings() -{ - var nodes = document.querySelectorAll("[class^='i18n_']"); - for(var i = 0; i < nodes.length; i++) - { +function loadI18nStrings() { + // replace span contents by their class names + let nodes = document.querySelectorAll("[class^='i18n_']"); + for (let i = 0; i < nodes.length; i++) { var arguments = JSON.parse("[" + nodes[i].textContent + "]"); var className = nodes[i].className; if (className instanceof SVGAnimatedString) @@ -36,6 +35,13 @@ function loadI18nStrings() else nodes[i][prop] = i18n.getMessage(stringName); } + + // also replace tooltip attributes + nodes = document.querySelectorAll("[tooltip^='i18n_']"); + for (let i = 0; i < nodes.length; i++) { + let tooltip = nodes[i].getAttribute('tooltip'); + nodes[i].setAttribute('tooltip', i18n.getMessage(tooltip.slice(5))); + } } // Provides a more readable string of the current date and time diff --git a/src/skin/options-layout.css b/src/skin/options-layout.css new file mode 100644 index 0000000000..cedfa4031f --- /dev/null +++ b/src/skin/options-layout.css @@ -0,0 +1,103 @@ +body +{ + font-family: Arial, Helvetica, sans-serif; + font-size: 13px; + padding: 20px; +} + +td +{ + font-size: 13px; + vertical-align: top; + text-align: left; +} + +p +{ + margin-top: 0.5em; +} + +button +{ + white-space: pre; +} +#tabs { + min-width: 750px; +} + +.tooltipArrow { + bottom: 27px; +} + +#pbInstructions { + margin: 5px 0 15px; + width: 450px; +} + +#rawFilters { + display: none; +} + +.okMsg { + display: none; + color: #ffffff; + background: #30e030; + font-weight: bold; + padding: 3px; +} + +.errMsg { + display: none; + color: #ffffff; + background: #e03030; + font-weight:bold; + padding:3px; +} + +#tab-import-export { + width: 750px; + overflow: auto; +} +#import { + width: 350px; + float: left; +} +#export { + width: 350px; + float: left; +} + +/* Filter list entry status message */ +.flMsg { + display: none; + color: #b0b0b0; +} + +.importInput{ + visibility: hidden; + height: 0; + width: 0; +} + +#blockedResourcesContainer, #trackingDomainSearch { + width: 390px; +} + +#settingsSuffix{ + color: #555; + font-size: 12px; + width: 500px; + position: relative; + left: 50px; +} + +a, a:hover, a:active, a:visited{ + color: #00aaaa; + text-decoration: underline; +} + +.clickerContainer { + background-color: #e8e9ea; + max-height: 290px; + overflow-y: auto; +} diff --git a/src/skin/options.html b/src/skin/options.html index ec78443e6f..f8e04d11c5 100644 --- a/src/skin/options.html +++ b/src/skin/options.html @@ -25,111 +25,13 @@ + - @@ -152,19 +54,30 @@

-

-
-

+ +

0 -

-
- -
+

+ + + + + +
+
+ +
+
+
diff --git a/src/skin/popup-layout.css b/src/skin/popup-layout.css new file mode 100644 index 0000000000..803d44e488 --- /dev/null +++ b/src/skin/popup-layout.css @@ -0,0 +1,50 @@ +body { + overflow: hidden; + margin: 8px 8px 0; + padding: 0 7px; +} + +.table { + display: table; +} + +.table-row { + display: table-row; +} + +.table-cell { + display: table-cell; +} + +.container { + height: 38em; +} + +.header { +} + +.body { + height: 100%; +} + +.body-content-outer-wrapper { + height: 100%; + + vertical-align: middle; +} + +.body-content-inner-wrapper { + height: 100%; + position: relative; + overflow: auto; + + background-color: #e8e9ea; +} + +.body-content { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} diff --git a/src/skin/popup.css b/src/skin/popup.css index cdae4ff735..ab8514e104 100644 --- a/src/skin/popup.css +++ b/src/skin/popup.css @@ -59,13 +59,6 @@ a:hover { color: #ec9329 } padding: .6em 1em; } -.spacer { - height: 7px; - width: 5px; - display: block; - clear: both; -} - .click-nav ul {position:relative;font-weight:900;list-style-type:none;} .click-nav ul li {position:relative;list-style:none;cursor:pointer;} .click-nav ul li ul {position:relative;} @@ -167,7 +160,8 @@ left: 0; color: #505050; font-size: 16px; } -#privacyBadgerHeader h2{ + +#privacyBadgerHeader h2, h2#nothing-found { margin: 5px; padding-left: 5px; float: left; @@ -218,31 +212,23 @@ font-size: 16px; background-color: #EC9329; color: #333; } -.clickerContainer { - max-height: 290px; - overflow-y: auto; - background-color: #E8E9EA; - position: relative; -} + .key { - position: absolute; - height: 25px; - left: 0; - right: 0; - z-index: 30; - background: #fefefe; - padding-top: 4px; - padding-left: 215px; + position: relative; + padding: 4px 0 5px 215px; } -.key img{ - margin-left: 19px; + +.key img { + margin-left: 19px; } -.key .tooltipContainer{ - position: absolute; - left: 3px; - top:-1; - box-shadow: 0px 5px 5px #000; + +.key .tooltipContainer { + position: absolute; + left: 3px; + top: -1px; + box-shadow: 0px 5px 5px #000; } + #instruction-outer { display: none; position: fixed; @@ -285,9 +271,6 @@ font-size: 16px; padding-right: 5px; padding-top: 7px; } -.clickerContainer{ - margin-top: 25px; -} #pbInstructions{ color: #505050; font-size: 16px; diff --git a/src/skin/popup.html b/src/skin/popup.html index c03e08fe36..3b1cbaf63f 100644 --- a/src/skin/popup.html +++ b/src/skin/popup.html @@ -26,6 +26,7 @@ + @@ -62,25 +63,45 @@

-
- - -

-
-
-
-
-

-
-
-
+ +
+
+ +
+ + +
+ +

+
+
+
+
-
-
-
-
-
+

+ + + +
+ +
+
+ +
+
+ +
+
+
+
+
+
-
+