diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index af31411..6f2c8b0 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -259,8 +259,8 @@ "description": "" }, "settingsMatrixDisplayHeader" : { - "message": "Appearance", - "description": "" + "message": "Matrix", + "description": "header for matrix settings used in Settings page" }, "settingsMatrixDisplayTextSizePrompt" : { "message": "Text size:", @@ -282,6 +282,22 @@ "message": "Convenience", "description": "English: Convenience" }, + "settingsDefaultScopeLevel" : { + "message": "Default scope level:", + "description": "Label for default scope level selector in Settings pane" + }, + "settingsDefaultScopeLevel0" : { + "message": "Global", + "description": "Scope will be global" + }, + "settingsDefaultScopeLevel1" : { + "message": "Domain", + "description": "Scope will be base domain" + }, + "settingsDefaultScopeLevel2" : { + "message": "Site", + "description": "Scope will be full hostname of site" + }, "settingsMatrixAutoReloadPrompt" : { "message": "When the matrix is closed, smart reload these tabs:", "description": "" diff --git a/src/css/popup.css b/src/css/popup.css index 7efb15c..5d75cf7 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -75,30 +75,18 @@ body[dir="rtl"] #gotoDashboard > span:last-of-type { text-align: center; } #toolbarContainer { - position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; } .toolbar { border: 0; display: inline-block; margin: 0; padding: 0; - position: relative; vertical-align: top; white-space: nowrap; } -.toolbar.alignRight { - position: absolute; - } - -body[dir="ltr"] .toolbar.alignLeft, -body[dir="rtl"] .toolbar.alignRight { - left: 0; - } -body[dir="ltr"] .toolbar.alignRight, -body[dir="rtl"] .toolbar.alignLeft { - right: 0; - } - body .toolbar button { margin: 0; @@ -122,15 +110,6 @@ body .toolbar button.fa { font: 1.75em FontAwesome; min-width: 1.1em; } -body.tScopeGlobal .scopeRel:not(.disabled) { - color: #000; - } -body.tScopeDomain .scopeRel:not(.disabled) { - color: #24c; - } -body.tScopeSite .scopeRel:not(.disabled) { - color: #48c; - } #mtxSwitch_matrix-off.switchTrue { color: #a00; } @@ -297,37 +276,55 @@ button.disabled > span.badge { font-size: 1.2em; } -body .toolbar button#scopeCell { - margin: 0; - border: 1px dotted rgba(0,0,0,0.2); - padding: 6px 1px 3px 1px; +body .toolbar .scope { + background-color: #ccc; + border: 1px solid #ccc; box-sizing: content-box; -moz-box-sizing: content-box; - width: 16em; - height: 1.5em; - white-space: nowrap; - text-align: right; - line-height: 100%; color: white; - background-repeat: no-repeat; - background-position: -1px -1px; + display: inline-block; + line-height: 2em; + margin: 0; + padding: 1px; + cursor: pointer; + white-space: nowrap; } -body #scopeCell + .dropdown-menu { - padding: 6px 1px 3px 1px; +body .toolbar #specificScope { + display: inline-flex; + justify-content: flex-end; text-align: right; - min-width: 50%; - max-width: 80%; + width: 16em; } -body.tScopeGlobal #scopeCell { - background-color: #000; +body .toolbar #specificScope.on { + background-color: #24c; + border-color: #24c; + } +body .toolbar #specificScope > span { + background-color: #ccc; + display: inline-block; + height: 100%; } -body.tScopeDomain #scopeCell { +body .toolbar #specificScope > span.on { background-color: #24c; } -body.tScopeSite #scopeCell { - background-color: #48c; +body .toolbar #specificScope > span:first-of-type { + flex: 1; + } +body .toolbar #globalScope { + margin-left: 0 0 0 1px; + text-align: center; + width: 2em; + } +body .toolbar #globalScope.on { + background-color: #000; + border-color: #000; + } +body .toolbar .scopeRel { + color: #24c; + } +body.globalScope .toolbar .scopeRel { + color: #000; } - .matrix { text-align: left; @@ -349,6 +346,11 @@ body.tScopeSite #scopeCell { position: relative; } +#matHead { + border-top: 1px dotted #ccc; + padding-top: 1px; + margin: 1px 0 0 0; + } .paneHead .matCell:nth-child(2) { letter-spacing: -0.3px; } diff --git a/src/js/messaging.js b/src/js/messaging.js index e67086d..f3516f6 100644 --- a/src/js/messaging.js +++ b/src/js/messaging.js @@ -1,7 +1,7 @@ /******************************************************************************* - µMatrix - a Chromium browser extension to black/white list requests. - Copyright (C) 2014 Raymond Hill + uMatrix - a Chromium browser extension to black/white list requests. + Copyright (C) 2014-2017 Raymond Hill This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by @@ -173,7 +173,9 @@ var matrixSnapshot = function(pageStore, details) { var headers = r.headers; - if ( µmuser.popupScopeLevel === 'site' ) { + if ( typeof details.scope === 'string' ) { + r.scope = details.scope; + } else if ( µmuser.popupScopeLevel === 'site' ) { r.scope = r.hostname; } else if ( µmuser.popupScopeLevel === 'domain' ) { r.scope = r.domain; diff --git a/src/js/popup.js b/src/js/popup.js index 7f479dd..8262569 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -1043,59 +1043,82 @@ function initMenuEnvironment() { // Create page scopes for the web page function selectGlobalScope() { - setUserSetting('popupScopeLevel', '*'); + if ( matrixSnapshot.scope === '*' ) { return; } + matrixSnapshot.scope = '*'; + document.body.classList.add('globalScope'); matrixSnapshot.tMatrixModifiedTime = undefined; updateMatrixSnapshot(); dropDownMenuHide(); } -function selectDomainScope() { - setUserSetting('popupScopeLevel', 'domain'); +function selectSpecificScope(ev) { + var newScope = ev.target.getAttribute('data-scope'); + if ( matrixSnapshot.scope === newScope ) { return; } + document.body.classList.remove('globalScope'); + matrixSnapshot.scope = newScope; matrixSnapshot.tMatrixModifiedTime = undefined; updateMatrixSnapshot(); dropDownMenuHide(); } -function selectSiteScope() { - setUserSetting('popupScopeLevel', 'site'); - matrixSnapshot.tMatrixModifiedTime = undefined; - updateMatrixSnapshot(); - dropDownMenuHide(); -} - -function getClassFromScope() { - if ( matrixSnapshot.scope === '*' ) { - return 'tScopeGlobal'; - } - if ( matrixSnapshot.scope === matrixSnapshot.domain ) { - return 'tScopeDomain'; - } - return 'tScopeSite'; -} - function initScopeCell() { // It's possible there is no page URL at this point: some pages cannot - // be filtered by µMatrix. - if ( matrixSnapshot.url === '' ) { - return; + // be filtered by uMatrix. + if ( matrixSnapshot.url === '' ) { return; } + var specificScope = uDom.nodeFromId('specificScope'); + + while ( specificScope.firstChild !== null ) { + specificScope.removeChild(specificScope.firstChild); } + // Fill in the scope menu entries - if ( matrixSnapshot.hostname === matrixSnapshot.domain ) { - uDom('#scopeKeySite').css('display', 'none'); + var pos = matrixSnapshot.domain.indexOf('.'); + var tld, labels; + if ( pos === -1 ) { + tld = ''; + labels = matrixSnapshot.hostname; } else { - uDom('#scopeKeySite').text(punycode.toUnicode(matrixSnapshot.hostname)); + tld = matrixSnapshot.domain.slice(pos + 1); + labels = matrixSnapshot.hostname.slice(0, -tld.length); + } + var beg = 0, span; + while ( beg < labels.length ) { + pos = labels.indexOf('.', beg); + if ( pos === -1 ) { + pos = labels.length; + } else { + pos += 1; + } + span = document.createElement('span'); + span.setAttribute('data-scope', labels.slice(beg) + tld); + span.appendChild( + document.createTextNode(punycode.toUnicode(labels.slice(beg, pos))) + ); + specificScope.appendChild(span); + beg = pos; + } + if ( tld !== '' ) { + span = document.createElement('span'); + span.setAttribute('data-scope', tld); + span.appendChild(document.createTextNode(punycode.toUnicode(tld))); + specificScope.appendChild(span); } - uDom('#scopeKeyDomain').text(punycode.toUnicode(matrixSnapshot.domain)); updateScopeCell(); } function updateScopeCell() { - uDom('body') - .removeClass('tScopeGlobal tScopeDomain tScopeSite') - .addClass(getClassFromScope()); - uDom('#scopeCell').text( - punycode.toUnicode(matrixSnapshot.scope).replace('*', '\u2217') - ); + var specificScope = uDom.nodeFromId('specificScope'), + globalScope = uDom.nodeFromId('globalScope'); + var isGlobal = matrixSnapshot.scope === '*'; + specificScope.classList.toggle('on', !isGlobal); + globalScope.classList.toggle('on', isGlobal); + for ( var node of uDom.nodeFromId('specificScope').children ) { + node.classList.toggle( + 'on', + !isGlobal && + matrixSnapshot.scope.endsWith(node.getAttribute('data-scope')) + ); + } } /******************************************************************************/ @@ -1254,7 +1277,7 @@ var onMatrixSnapshotReady = function(response) { // After popup menu is built, check whether there is a non-empty matrix if ( matrixSnapshot.url === '' ) { uDom('#matHead').remove(); - uDom('#toolbarLeft').remove(); + uDom('#toolbarContainer').remove(); // https://github.com/gorhill/httpswitchboard/issues/191 uDom('#noNetTrafficPrompt').text(vAPI.i18n('matrixNoNetTrafficPrompt')); @@ -1335,6 +1358,7 @@ var matrixSnapshotPoller = (function() { messager.send({ what: 'matrixSnapshot', tabId: matrixSnapshot.tabId, + scope: matrixSnapshot.scope, mtxContentModifiedTime: matrixSnapshot.mtxContentModifiedTime, mtxCountModifiedTime: matrixSnapshot.mtxCountModifiedTime, mtxDiffCount: matrixSnapshot.diff.length, @@ -1419,9 +1443,8 @@ matrixCellHotspots = uDom('#cellHotspots').detach(); uDom('body') .on('mouseenter', '.matCell', mouseenterMatrixCellHandler) .on('mouseleave', '.matCell', mouseleaveMatrixCellHandler); -uDom('#scopeKeyGlobal').on('click', selectGlobalScope); -uDom('#scopeKeyDomain').on('click', selectDomainScope); -uDom('#scopeKeySite').on('click', selectSiteScope); +uDom('#specificScope').on('click', selectSpecificScope); +uDom('#globalScope').on('click', selectGlobalScope); uDom('[id^="mtxSwitch_"]').on('click', toggleMatrixSwitch); uDom('#buttonPersist').on('click', persistMatrix); uDom('#buttonRevertScope').on('click', revertMatrix); diff --git a/src/js/settings.js b/src/js/settings.js index 53b44f3..273758f 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -62,6 +62,10 @@ var installEventHandlers = function() { changeUserSettings('displayTextSize', this.value); }); + uDom('#popupScopeLevel').on('change', function(){ + changeUserSettings('popupScopeLevel', this.value); + }); + // https://github.com/gorhill/httpswitchboard/issues/197 uDom(window).on('beforeunload', prepareToDie); }; @@ -83,6 +87,8 @@ uDom.onLoad(function() { elem.prop('checked', elem.val() === userSettings.displayTextSize); }); + uDom.nodeFromId('popupScopeLevel').value = userSettings.popupScopeLevel; + installEventHandlers(); }; messager.send({ what: 'getUserSettings' }, onUserSettingsReceived); diff --git a/src/popup.html b/src/popup.html index 1a905d3..2ef4af0 100644 --- a/src/popup.html +++ b/src/popup.html @@ -20,18 +20,19 @@
uMatrix
-
- -
+
+ ∗ + -
+
    @@ -47,7 +48,7 @@
-
+
diff --git a/src/settings.html b/src/settings.html index 4c894e7..08d0837 100644 --- a/src/settings.html +++ b/src/settings.html @@ -19,6 +19,9 @@ ul { ul > li { margin: 0 0 0 1em; } +ul > li.separator { + margin: 0.5em 0; + } .dim { font-weight: 100; color: #888; @@ -28,14 +31,6 @@ ul > li { -

-
    -
  • -
  • - - -
-

  • @@ -48,7 +43,19 @@ ul > li {
- +

+
    +
  • + + +
  • +
  • + +
  • +
  • + + +