popup: add side borders in Chrome 62+

fixes #226
This commit is contained in:
tophf 2017-11-14 11:13:03 +03:00
parent 94ed435e75
commit 0ed37c2667
4 changed files with 31 additions and 0 deletions

View File

@ -593,6 +593,12 @@
"message": "Stylus failed to parse usercss:", "message": "Stylus failed to parse usercss:",
"description": "The error message to show when stylus failed to parse usercss" "description": "The error message to show when stylus failed to parse usercss"
}, },
"popupBorders": {
"message": "Add white borders on the sides"
},
"popupBordersTooltip": {
"message": "Useful for dark themes in new Chrome as it no longer paints the side borders"
},
"popupManageTooltip": { "popupManageTooltip": {
"message": "Shift-click or right-click opens manager with styles applicable for current site", "message": "Shift-click or right-click opens manager with styles applicable for current site",
"description": "Tooltip for the 'Manage' button in the popup." "description": "Tooltip for the 'Manage' button in the popup."

View File

@ -15,6 +15,7 @@ var prefs = new function Prefs() {
'popup.breadcrumbs.usePath': false, // use URL path for 'this URL' 'popup.breadcrumbs.usePath': false, // use URL path for 'this URL'
'popup.enabledFirst': true, // display enabled styles before disabled styles 'popup.enabledFirst': true, // display enabled styles before disabled styles
'popup.stylesFirst': true, // display enabled styles before disabled styles 'popup.stylesFirst': true, // display enabled styles before disabled styles
'popup.borders': false, // add white borders on the sides
'manage.onlyEnabled': false, // display only enabled styles 'manage.onlyEnabled': false, // display only enabled styles
'manage.onlyLocal': false, // display only styles created locally 'manage.onlyLocal': false, // display only styles created locally

View File

@ -93,6 +93,13 @@
<span></span> <span></span>
</span> </span>
</label> </label>
<label class="chromium-only">
<span i18n-text="popupBorders" i18n-title="popupBordersTooltip"></span>
<span class="onoffswitch">
<input type="checkbox" id="popup.borders">
<span></span>
</span>
</label>
</div> </div>
</div> </div>

View File

@ -8,6 +8,8 @@ const handleEvent = {};
const ENTRY_ID_PREFIX_RAW = 'style-'; const ENTRY_ID_PREFIX_RAW = 'style-';
const ENTRY_ID_PREFIX = '#' + ENTRY_ID_PREFIX_RAW; const ENTRY_ID_PREFIX = '#' + ENTRY_ID_PREFIX_RAW;
toggleSideBorders();
getActiveTab().then(tab => getActiveTab().then(tab =>
FIREFOX && tab.url === 'about:blank' && tab.status === 'loading' FIREFOX && tab.url === 'about:blank' && tab.status === 'loading'
? getTabRealURLFirefox(tab) ? getTabRealURLFirefox(tab)
@ -45,6 +47,8 @@ function onRuntimeMessage(msg) {
document.body.insertBefore(installed, before); document.body.insertBefore(installed, before);
} else if ('popupWidth' in msg.prefs) { } else if ('popupWidth' in msg.prefs) {
setPopupWidth(msg.prefs.popupWidth); setPopupWidth(msg.prefs.popupWidth);
} else if ('popup.borders' in msg.prefs) {
toggleSideBorders(msg.prefs['popup.borders']);
} }
break; break;
} }
@ -57,6 +61,19 @@ function setPopupWidth(width = prefs.get('popupWidth')) {
} }
function toggleSideBorders(state = prefs.get('popup.borders')) {
// runs before <body> is parsed
const style = document.documentElement.style;
if (CHROME >= 3167 && state) {
style.cssText +=
'border-left: 2px solid white !important;' +
'border-right: 2px solid white !important;';
} else if (style.cssText) {
style.borderLeft = style.borderRight = '';
}
}
function initPopup(url) { function initPopup(url) {
installed = $('#installed'); installed = $('#installed');