Popup border (#781)

* Popup: Fix horizontal scrollbar in Chrome

* Hide popup borer option in newer Chrome versions. Closes #780

* Add chrome bug range constant
This commit is contained in:
Rob Garrison 2019-09-24 08:21:36 -05:00 committed by GitHub
parent d8c2cd449e
commit a7defbfc40
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 22 additions and 6 deletions

View File

@ -10,6 +10,9 @@ const VIVALDI = Boolean(chrome.app) && navigator.userAgent.includes('Vivaldi');
// const ANDROID = !chrome.windows; // const ANDROID = !chrome.windows;
let FIREFOX = !chrome.app && parseFloat(navigator.userAgent.match(/\bFirefox\/(\d+\.\d+)|$/)[1]); let FIREFOX = !chrome.app && parseFloat(navigator.userAgent.match(/\bFirefox\/(\d+\.\d+)|$/)[1]);
// see PR #781
const CHROME_HAS_BORDER_BUG = CHROME >= 3167 && CHROME <= 3704;
if (!CHROME && !chrome.browserAction.openPopup) { if (!CHROME && !chrome.browserAction.openPopup) {
// in FF pre-57 legacy addons can override useragent so we assume the worst // in FF pre-57 legacy addons can override useragent so we assume the worst
// until we know for sure in the async getBrowserInfo() // until we know for sure in the async getBrowserInfo()

View File

@ -109,7 +109,7 @@
<span></span> <span></span>
</span> </span>
</label> </label>
<label class="chromium-only"> <label class="chromium-only chrome-no-popup-border">
<span i18n-text="popupBorders" i18n-title="popupBordersTooltip"></span> <span i18n-text="popupBorders" i18n-title="popupBordersTooltip"></span>
<span class="onoffswitch"> <span class="onoffswitch">
<input type="checkbox" id="popup.borders" class="slider"> <input type="checkbox" id="popup.borders" class="slider">

View File

@ -17,6 +17,7 @@ body {
min-width: 480px; min-width: 480px;
max-width: 800px; max-width: 800px;
width: max-content; width: max-content;
overflow-x: hidden;
} }
@supports (-moz-appearance:none) { @supports (-moz-appearance:none) {
@ -32,7 +33,8 @@ body {
} }
} }
.firefox .chromium-only { .firefox .chromium-only,
.chromium-only.chrome-no-popup-border {
display: none; display: none;
} }

View File

@ -1,6 +1,7 @@
/* global messageBox msg setupLivePrefs enforceInputRange /* global messageBox msg setupLivePrefs enforceInputRange
$ $$ $create $createLink $ $$ $create $createLink
FIREFOX OPERA CHROME URLS openURL prefs t API ignoreChromeError */ FIREFOX OPERA CHROME URLS openURL prefs t API ignoreChromeError
CHROME_HAS_BORDER_BUG */
'use strict'; 'use strict';
setupLivePrefs(); setupLivePrefs();
@ -8,6 +9,13 @@ setupRadioButtons();
enforceInputRange($('#popupWidth')); enforceInputRange($('#popupWidth'));
setTimeout(splitLongTooltips); setTimeout(splitLongTooltips);
if (CHROME_HAS_BORDER_BUG) {
const borderOption = $('.chrome-no-popup-border');
if (borderOption) {
borderOption.classList.remove('chrome-no-popup-border');
}
}
// collapse #advanced block in Chrome pre-66 (classic chrome://extensions UI) // collapse #advanced block in Chrome pre-66 (classic chrome://extensions UI)
if (!FIREFOX && !OPERA && CHROME < 3343) { if (!FIREFOX && !OPERA && CHROME < 3343) {
const block = $('#advanced'); const block = $('#advanced');

View File

@ -1,7 +1,7 @@
/* global configDialog hotkeys onTabReady msg /* global configDialog hotkeys onTabReady msg
getActiveTab FIREFOX getTabRealURL URLS API onDOMready $ $$ prefs CHROME getActiveTab FIREFOX getTabRealURL URLS API onDOMready $ $$ prefs CHROME
setupLivePrefs template t $create tWordBreak animateElement setupLivePrefs template t $create tWordBreak animateElement
tryJSONparse debounce */ tryJSONparse debounce CHROME_HAS_BORDER_BUG */
'use strict'; 'use strict';
@ -42,7 +42,10 @@ prefs.subscribe(['popup.stylesFirst'], (key, stylesFirst) => {
document.body.insertBefore(installed, before); document.body.insertBefore(installed, before);
}); });
prefs.subscribe(['popupWidth'], (key, value) => setPopupWidth(value)); prefs.subscribe(['popupWidth'], (key, value) => setPopupWidth(value));
if (CHROME_HAS_BORDER_BUG) {
prefs.subscribe(['popup.borders'], (key, value) => toggleSideBorders(value)); prefs.subscribe(['popup.borders'], (key, value) => toggleSideBorders(value));
}
function onRuntimeMessage(msg) { function onRuntimeMessage(msg) {
switch (msg.method) { switch (msg.method) {
@ -68,7 +71,7 @@ function setPopupWidth(width = prefs.get('popupWidth')) {
function toggleSideBorders(state = prefs.get('popup.borders')) { function toggleSideBorders(state = prefs.get('popup.borders')) {
// runs before <body> is parsed // runs before <body> is parsed
const style = document.documentElement.style; const style = document.documentElement.style;
if (CHROME >= 3167 && state) { if (CHROME_HAS_BORDER_BUG && state) {
style.cssText += style.cssText +=
'border-left: 2px solid white !important;' + 'border-left: 2px solid white !important;' +
'border-right: 2px solid white !important;'; 'border-right: 2px solid white !important;';