Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix popup for bigger fonts/longer translations #1445

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

Fix popup for bigger fonts/longer translations #1445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1861bc8
Add .css indentation to EditorConfig settings.
ghostwords Aug 21, 2017
571b778
Replace tooltip attrs as well as span els for i18n
ghostwords Aug 21, 2017
ce74946
Move options page-specific styles into own file.
ghostwords Aug 21, 2017
b929914
Use flexible table layout to support larger fonts.
ghostwords Aug 21, 2017
b7083bc
Enlarge the "nothing found" popup message.
ghostwords Aug 21, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .editorconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
15 changes: 5 additions & 10 deletions src/js/htmlutils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
},

Expand Down
16 changes: 11 additions & 5 deletions src/js/options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -360,6 +365,7 @@ function refreshFilterPage() {
$("#count").text(allTrackingDomains.length);

// Display tracker tooltips.
$(".keyContainer").removeClass("hidden");
$("#blockedResources")[0].innerHTML = htmlUtils.getTrackerContainerHtml();

// Display tracking domains.
Expand Down
16 changes: 11 additions & 5 deletions src/js/popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 = [];
Expand Down
16 changes: 11 additions & 5 deletions src/lib/i18n.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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
Expand Down
103 changes: 103 additions & 0 deletions src/skin/options-layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
body
{
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whats up with mix and match open brackets?

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{
Copy link

@the-j0k3r the-j0k3r Dec 16, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Space before open brackets...

/me thinks this CSS needs some linting and fixing for consistency looking at master its all over the place.

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;
}
125 changes: 19 additions & 106 deletions src/skin/options.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>


Expand Down
Loading