Skip to content

Commit 0b665c9

Browse files
gorhillgorhill
committed
further improving solution to gorhill#55 
1 parent 8a5af0c commit 0b665c9

File tree

5 files changed

+111
-91
lines changed

5 files changed

+111
-91
lines changed

‎js/background.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ var HTTPSB = {
3131
strictBlocking: false,
3232
displayTextSize: '13px',
3333
popupHideBlacklisted: false,
34-
popupCollapseDomains: false
34+
popupCollapseDomains: false,
35+
popupCollapseSpecificDomains: {}
3536
},
3637

3738
runtimeId: 1,

‎js/popup.js‎

Lines changed: 98 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,16 @@ function getPageStats() {
4646

4747
/******************************************************************************/
4848

49-
var userSettingsCached = {
50-
};
49+
function getUserSetting(setting) {
50+
return getHTTPSB().userSettings[setting];
51+
}
5152

52-
function getUserSetting(setting, bypassCache) {
53-
if ( bypassCache || userSettingsCached[setting] === undefined ) {
54-
userSettingsCached[setting] = getHTTPSB().userSettings[setting];
55-
}
56-
return userSettingsCached[setting];
53+
function setUserSetting(setting, value) {
54+
chrome.runtime.sendMessage({
55+
what: 'userSettings',
56+
name: setting,
57+
value: value
58+
});
5759
}
5860

5961
/******************************************************************************/
@@ -85,10 +87,6 @@ EntryStats.prototype.colourize = function(httpsb, scopeURL) {
8587
this.permanentColor = httpsb.getPermanentColor(scopeURL, this.type, this.hostname);
8688
};
8789

88-
EntryStats.prototype.hasTemporaryRule = function() {
89-
return this.temporaryColor.length > 1 && this.temporaryColor.charAt(1) === 'd';
90-
};
91-
9290
EntryStats.prototype.add = function(other) {
9391
this.count += other.count;
9492
};
@@ -158,22 +156,6 @@ HostnameStats.prototype.colourize = function(httpsb, scopeURL) {
158156
this.types.other.colourize(httpsb, scopeURL);
159157
};
160158

161-
HostnameStats.prototype.hasTemporaryRule = function() {
162-
if ( this.hasRule === undefined ) {
163-
this.hasRule =
164-
this.types['*'].hasTemporaryRule() ||
165-
this.types.main_frame.hasTemporaryRule() ||
166-
this.types.cookie.hasTemporaryRule() ||
167-
this.types.image.hasTemporaryRule() ||
168-
this.types.object.hasTemporaryRule() ||
169-
this.types.script.hasTemporaryRule() ||
170-
this.types.xmlhttprequest.hasTemporaryRule() ||
171-
this.types.sub_frame.hasTemporaryRule() ||
172-
this.types.other.hasTemporaryRule();
173-
}
174-
return this.hasRule;
175-
};
176-
177159
HostnameStats.prototype.add = function(other) {
178160
var thisTypes = this.types;
179161
var otherTypes = other.types;
@@ -518,15 +500,62 @@ function getNextAction(hostname, type, leaning) {
518500
// the user might have collapsed/expanded one or more domains, and we don't
519501
// want to lose all his hardwork.
520502

521-
var explicitlyToggledDomains = {};
522-
523503
function getCollapseState(domain) {
524-
if ( explicitlyToggledDomains[domain] !== undefined ) {
525-
return explicitlyToggledDomains[domain];
504+
var states = getUserSetting('popupCollapseSpecificDomains');
505+
if ( states !== undefined && states[domain] !== undefined ) {
506+
return states[domain];
526507
}
527508
return getUserSetting('popupCollapseDomains');
528509
}
529510

511+
function toggleCollapseState(element) {
512+
var element = $(element);
513+
if ( element.parents('#matHead.collapsible').length > 0 ) {
514+
toggleMainCollapseState(element);
515+
} else {
516+
toggleSpecificCollapseState(element);
517+
}
518+
}
519+
520+
function toggleMainCollapseState(element) {
521+
var matHead = element.parents('#matHead.collapsible')
522+
.toggleClass('collapsed');
523+
var collapsed = matHead.hasClass('collapsed');
524+
$('#matList .matSection.collapsible').toggleClass('collapsed', collapsed);
525+
setUserSetting('popupCollapseDomains', collapsed);
526+
527+
var mainCollapseState = getUserSetting('popupCollapseDomains');
528+
var specificCollapseStates = getUserSetting('popupCollapseSpecificDomains') || {};
529+
var domains = Object.keys(specificCollapseStates);
530+
var i = domains.length;
531+
var domain;
532+
while ( i-- ) {
533+
domain = domains[i];
534+
if ( specificCollapseStates[domain] === collapsed ) {
535+
delete specificCollapseStates[domain];
536+
}
537+
}
538+
setUserSetting('popupCollapseSpecificDomains', specificCollapseStates);
539+
}
540+
541+
function toggleSpecificCollapseState(element) {
542+
// Remember collapse state forever, but only if it is different
543+
// from main collapse switch.
544+
var section = element.parents('.matSection.collapsible')
545+
.toggleClass('collapsed');
546+
var domain = section.prop('domain');
547+
var collapsed = section.hasClass('collapsed');
548+
var mainCollapseState = getUserSetting('popupCollapseDomains');
549+
var specificCollapseStates = getUserSetting('popupCollapseSpecificDomains') || {};
550+
if ( collapsed !== mainCollapseState ) {
551+
specificCollapseStates[domain] = collapsed;
552+
setUserSetting('popupCollapseSpecificDomains', specificCollapseStates);
553+
} else if ( specificCollapseStates[domain] !== undefined ) {
554+
delete specificCollapseStates[domain];
555+
setUserSetting('popupCollapseSpecificDomains', specificCollapseStates);
556+
}
557+
}
558+
530559
/******************************************************************************/
531560

532561
// Update visual of matrix cells(s)
@@ -657,7 +686,9 @@ function formatHeader(s) {
657686
/******************************************************************************/
658687

659688
function renderMatrixHeaderRow() {
660-
var cells = $('#matHead .matRow .matCell');
689+
var matHead = $('#matHead.collapsible');
690+
matHead.toggleClass('collapsed', getUserSetting('popupCollapseDomains'));
691+
var cells = matHead.find('.matCell');
661692
$(cells[0]).prop({reqType: '*', hostname: '*'}).addClass(getCellClass('*', '*'));
662693
$(cells[1]).prop({reqType: 'cookie', hostname: '*'}).addClass(getCellClass('*', 'cookie'));
663694
$(cells[2]).prop({reqType: 'image', hostname: '*'}).addClass(getCellClass('*', 'image'));
@@ -686,6 +717,14 @@ function renderMatrixCellSubdomain(cell, domain, subomain) {
686717
.after(domain);
687718
}
688719

720+
function renderMatrixMetaCellDomain(cell, domain) {
721+
$(cell).prop({reqType: '*', hostname: domain})
722+
.addClass(getCellClass(domain, '*'))
723+
.children('b')
724+
.text(domain)
725+
.before('\u2217.');
726+
}
727+
689728
function renderMatrixCellType(cell, hostname, type, stats) {
690729
cell = $(cell);
691730
cell.prop({reqType: type, hostname: hostname, count: stats.count})
@@ -726,7 +765,7 @@ function makeMatrixRowSubdomain(domain, subdomain) {
726765
function makeMatrixMetaRowDomain(domain, stats) {
727766
var matrixRow = HTTPSBPopup.matrixRowTemplate.clone().addClass('rw');
728767
var cells = $('.matCell', matrixRow);
729-
renderMatrixCellDomain(cells[0], domain);
768+
renderMatrixMetaCellDomain(cells[0], domain);
730769
renderMatrixCellTypes(cells, domain, stats);
731770
return matrixRow;
732771
}
@@ -1001,7 +1040,7 @@ function makeMatrixGroup3(group) {
10011040
.addClass('matGroup g3');
10021041
$('<div>')
10031042
.addClass('matSection g3Meta')
1004-
.toggleClass('g3Collapsed', !!getUserSetting('popupHideBlacklisted', true))
1043+
.toggleClass('g3Collapsed', !!getUserSetting('popupHideBlacklisted'))
10051044
.appendTo(groupDiv);
10061045
makeMatrixMetaRow(computeMatrixGroupMetaStats(group), 'g3')
10071046
.appendTo(groupDiv);
@@ -1265,52 +1304,48 @@ function initAll() {
12651304
popup.matrixCellMenu = $('#cellMenu').detach();
12661305
$('#persist', popup.matrixCellMenu)
12671306
.on('click', function() {
1268-
handlePersistence($(this));
1269-
return false;
1270-
})
1307+
handlePersistence($(this));
1308+
return false;
1309+
})
12711310
.on('mouseenter', function() {
1272-
handlePersistMessage($(this));
1273-
return false;
1274-
});
1311+
handlePersistMessage($(this));
1312+
return false;
1313+
});
12751314
$('#unpersist', popup.matrixCellMenu)
12761315
.on('click', function() {
1277-
handleUnpersistence($(this));
1278-
return false;
1279-
})
1316+
handleUnpersistence($(this));
1317+
return false;
1318+
})
12801319
.on('mouseenter', function() {
1281-
handleUnpersistMessage($(this));
1282-
return false;
1283-
});
1320+
handleUnpersistMessage($(this));
1321+
return false;
1322+
});
12841323

12851324
// We reuse for all cells the one and only cell hotspots.
12861325
popup.matrixCellHotspots = $('#cellHotspots').detach();
12871326
$('#whitelist', popup.matrixCellHotspots)
12881327
.on('click', function() {
1289-
handleWhitelistFilter($(this));
1290-
return false;
1291-
})
1328+
handleWhitelistFilter($(this));
1329+
return false;
1330+
})
12921331
.on('mouseenter', function() {
1293-
handleWhitelistFilterMessage($(this));
1294-
return false;
1295-
});
1332+
handleWhitelistFilterMessage($(this));
1333+
return false;
1334+
});
12961335
$('#blacklist', popup.matrixCellHotspots)
12971336
.on('click', function() {
1298-
handleBlacklistFilter($(this));
1299-
return false;
1300-
})
1337+
handleBlacklistFilter($(this));
1338+
return false;
1339+
})
13011340
.on('mouseenter', function() {
13021341
handleBlacklistFilterMessage($(this));
13031342
return false;
1304-
});
1343+
});
13051344
$('#domainOnly', popup.matrixCellHotspots)
13061345
.on('click', function() {
1307-
var section = $(this)
1308-
.parents('.matSection.collapsible')
1309-
.toggleClass('collapsed');
1310-
explicitlyToggledDomains[section.prop('domain')] =
1311-
section.hasClass('collapsed');
1312-
return false;
1313-
});
1346+
toggleCollapseState(this);
1347+
return false;
1348+
});
13141349

13151350
// to attach/detach widgets to matrix cell
13161351
$('body')

‎js/settings.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ function initAll() {
4747
$('input[name="displayTextSize"]').attr('checked', function(){
4848
return $(this).attr('value') === httpsb.userSettings.displayTextSize;
4949
});
50-
$('#display-domain-only').attr('checked', httpsb.userSettings.popupCollapseDomains);
5150
$('#delete-blacklisted-cookies').attr('checked', httpsb.userSettings.deleteCookies);
5251
$('#delete-blacklisted-localstorage').attr('checked', httpsb.userSettings.deleteLocalStorage);
5352
$('#cookie-removed-counter').html(httpsb.cookieRemovedCounter);
@@ -60,9 +59,6 @@ function initAll() {
6059
$('input[name="displayTextSize"]').on('change', function(){
6160
changeUserSettings('displayTextSize', $(this).attr('value'));
6261
});
63-
$('#display-domain-only').on('change', function(){
64-
changeUserSettings('popupCollapseDomains', $(this).is(':checked'));
65-
});
6662
$('#delete-blacklisted-cookies').on('change', function(){
6763
changeUserSettings('deleteCookies', $(this).is(':checked'));
6864
});

‎popup.html‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -374,13 +374,13 @@
374374
border: 0;
375375
padding: 0;
376376
position: absolute;
377-
left: calc(50% - 6px);
378-
bottom: -4px;
377+
left: 20%;
378+
bottom: -3px;
379379
width: 13px;
380380
height: 13px;
381381
visibility: hidden;
382382
background: transparent url('img/domain-collapse.png') no-repeat;
383-
opacity: 0.2;
383+
opacity: 0.25;
384384
z-index: 10000;
385385
}
386386
.matSection.collapsed #domainOnly {
@@ -389,6 +389,12 @@
389389
.matSection.collapsible .matRow.l1 .matCell:nth-of-type(1):hover #domainOnly {
390390
visibility: visible;
391391
}
392+
#matHead.collapsed #domainOnly {
393+
background: transparent url('img/domain-expand.png') no-repeat;
394+
}
395+
#matHead.collapsible .matRow .matCell:nth-of-type(1):hover #domainOnly {
396+
visibility: visible;
397+
}
392398
#domainOnly:hover {
393399
opacity: 1;
394400
}
@@ -425,7 +431,7 @@
425431
<div id="message"></div>
426432
</div>
427433

428-
<div id="matHead" class="matrix">
434+
<div id="matHead" class="matrix collapsible">
429435
<div class="matRow rw" style="display:none"><div class="matCell" data-req-type="all">all</div><div class="matCell" data-req-type="cookie">cookie</div><div class="matCell" data-req-type="image">image</div><div class="matCell" data-req-type="object">plugin</div><div class="matCell" data-req-type="script">script</div><div class="matCell" data-req-type="xmlhttprequest">XHR</div><div class="matCell" data-req-type="sub_frame">frame</div><div class="matCell" data-req-type="other">other</div></div>
430436
</div>
431437
</div>

‎settings.html‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -74,25 +74,7 @@ <h2>Display</h2>
7474
<li><input type="radio" name="displayTextSize" value="13px">Normal
7575
<li><input type="radio" name="displayTextSize" value="16px">Large
7676
</ul>
77-
Matrix options:
78-
<ul style="list-style:none">
79-
<li><input id="display-domain-only" type="checkbox" value="false">Collapse subdomains by default <button class="whatisthis"></button>
80-
<div class="expandable">
81-
<p>When this option is checked, the matrix will
82-
show only domains, as opposed to domain and subdomains,
83-
<b>except</b> if at least one explicit rule &mdash; whether
84-
whitelist or blacklist &mdash; exist for at least one
85-
subdomain.</p>
86-
<p>This might be useful to users who prefer lower level of
87-
information and also to reduce the size of the pop-up &mdash;
88-
which may cause an
89-
<a href="https://github.com/gorhill/httpswitchboard/issues/55" target="_blank">issue
90-
for smaller display<a> (there is an
91-
<a href="https://code.google.com/p/chromium/issues/detail?id=36080" target="_blank">active bug in chromium</a>
92-
about this).</p>
93-
</div>
94-
</ul>
95-
</div>
77+
</div>
9678

9779
<h2>Strict blocking</h2>
9880
<ul>

0 commit comments

Comments
 (0)