diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 2c9aff70..44823873 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -593,6 +593,12 @@
"message": "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": {
"message": "Shift-click or right-click opens manager with styles applicable for current site",
"description": "Tooltip for the 'Manage' button in the popup."
diff --git a/js/prefs.js b/js/prefs.js
index 0b576b77..d90cea8e 100644
--- a/js/prefs.js
+++ b/js/prefs.js
@@ -15,6 +15,7 @@ var prefs = new function Prefs() {
'popup.breadcrumbs.usePath': false, // use URL path for 'this URL'
'popup.enabledFirst': 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.onlyLocal': false, // display only styles created locally
diff --git a/options.html b/options.html
index 5c90d83f..87e4f0ef 100644
--- a/options.html
+++ b/options.html
@@ -93,6 +93,13 @@
+
diff --git a/popup/popup.js b/popup/popup.js
index b20b9e47..eff7f6db 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -8,6 +8,8 @@ const handleEvent = {};
const ENTRY_ID_PREFIX_RAW = 'style-';
const ENTRY_ID_PREFIX = '#' + ENTRY_ID_PREFIX_RAW;
+toggleSideBorders();
+
getActiveTab().then(tab =>
FIREFOX && tab.url === 'about:blank' && tab.status === 'loading'
? getTabRealURLFirefox(tab)
@@ -45,6 +47,8 @@ function onRuntimeMessage(msg) {
document.body.insertBefore(installed, before);
} else if ('popupWidth' in msg.prefs) {
setPopupWidth(msg.prefs.popupWidth);
+ } else if ('popup.borders' in msg.prefs) {
+ toggleSideBorders(msg.prefs['popup.borders']);
}
break;
}
@@ -57,6 +61,19 @@ function setPopupWidth(width = prefs.get('popupWidth')) {
}
+function toggleSideBorders(state = prefs.get('popup.borders')) {
+ // runs before 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) {
installed = $('#installed');