EFForg · ghostwords · Aug 21, 2017 · Aug 21, 2017 · Aug 21, 2017 · Aug 21, 2017
diff --git 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
@@ -111,17 +111,12 @@ var htmlUtils = exports.htmlUtils = {
     if (tabId === undefined) {
       tabId = "000";
     }
-    var trackerHtml = '' +
+
+    var trackerHtml = '<div class="body-content-inner-wrapper">' +
       '<div id="associatedTab" data-tab-id="' + tabId + '"></div>' +
-      '<div class="keyContainer">' +
-      '<div class="key">' +
-      '<img class="tooltip" src="/icons/UI-icons-red.svg" tooltip="' + i18n.getMessage("tooltip_block") + '">' +
-      '<img class="tooltip" src="/icons/UI-icons-yellow.svg" tooltip="' + i18n.getMessage("tooltip_cookieblock") + '">' +
-      '<img class="tooltip" src="/icons/UI-icons-green.svg" tooltip="' + i18n.getMessage("tooltip_allow") + '">' +
-      '<div class="tooltipContainer"></div>' +
-      '</div></div>' +
-      '<div class="spacer"></div>' +
-      '<div id="blockedResourcesInner" class="clickerContainer"></div>';
+      '<div id="blockedResourcesInner" class="body-content clickerContainer"></div>' +
+      '</div>';
+
     return trackerHtml;
   },
 

diff --git 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
@@ -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('<h2 id="nothing-found">' + i18n.getMessage("popup_blocked") + '</h2>');
     $('#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
@@ -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
@@ -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
@@ -25,111 +25,13 @@
 <link type="text/css" href="/lib/vendor/jquery-ui-1.12.1.custom/jquery-ui.structure.min.css" rel="stylesheet" />
 <link type="text/css" href="/lib/vendor/jquery-ui-1.12.1.custom/jquery-ui.theme.min.css" rel="stylesheet" />
 <link type="text/css" media="screen" href="/skin/popup.css" rel="stylesheet" />
+<link type="text/css" media="screen" href="/skin/options-layout.css" rel="stylesheet" />
 <link type="text/css" media="screen" href="/skin/toggle-switch.css" rel="stylesheet" />
 <script type="text/javascript" src="/lib/vendor/jquery-2.2.4.min.js"></script>
 <script type="text/javascript" src="/lib/vendor/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
 <script type="text/javascript" src="/lib/i18n.js" charset="utf-8"></script>
 <script type="text/javascript" src="/js/options.js" charset="utf-8"></script>
 <title class="i18n_options_title"></title>
-<style type="text/css" media="screen">
-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{
-  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{
-  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;
-}
-
-</style>
 </head>
 <body class="options">
 <table>
@@ -152,19 +54,30 @@ <h1><span class="i18n_options_title"></span></h1>
   </ul>
 
   <div id="tab-pb-status">
-    <p class=""></p>
-    <div id="blockedResourcesContainer">
-      <p id="pbInstructions">
+
+    <p id="pbInstructions">
         <span class="i18n_options_pb_has_detected"></span>
         <span id='count'>0</span>
         <span class="i18n_options_potential"></span>
         <a target=_blank tabindex=-1 title="What is a tracker?" href="https://www.eff.org/privacybadger#faq-What-is-a-third-party-tracker?"><span class="i18n_options_tracking_domains"></span></a>
         <span class="i18n_options_so_far"></span>
-      </p>
-      <div class="spacer"></div>
-      <input id="trackingDomainSearch" type="text" value="" style="width:100%">
-      <div id="blockedResources"><span class="i18n_options_loading"></span></div>
+    </p>
+
+    <input id="trackingDomainSearch" type="text" value="">
+
+    <div class="keyContainer hidden">
+        <div class="key">
+            <img class="tooltip" src="/icons/UI-icons-red.svg" tooltip="i18n_tooltip_block"><img class="tooltip" src="/icons/UI-icons-yellow.svg" tooltip="i18n_tooltip_cookieblock"><img class="tooltip" src="/icons/UI-icons-green.svg" tooltip="i18n_tooltip_allow">
+            <div class="tooltipContainer"></div>
+        </div>
     </div>
+
+    <div id="blockedResourcesContainer">
+      <div id="blockedResources">
+          <span class="i18n_options_loading"></span>
+      </div>
+    </div>
+
   </div>