Merge branch 'master' into order

background/background.js

@@ -10,6 +10,7 @@
 /* global uswApi */
 /* global
   FIREFOX
+  UA
   URLS
   activateTab
   download
@@ -173,6 +174,10 @@ if (chrome.commands) {
 }
 
 chrome.runtime.onInstalled.addListener(({reason, previousVersion}) => {
+  if (reason === 'install') {
+    if (UA.mobile) prefs.set('manage.newUI', false);
+    if (UA.windows) prefs.set('editor.keyMap', 'sublime');
+  }
   if (reason === 'update') {
     const [a, b, c] = (previousVersion || '').split('.');
     if (a <= 1 && b <= 5 && c <= 13) { // 1.5.13

background/context-menus.js

@@ -41,11 +41,7 @@
   };
 
   // "Delete" item in context menu for browsers that don't have it
-  if (CHROME &&
+  if (CHROME) {
-      // looking at the end of UA string
-      /(Vivaldi|Safari)\/[\d.]+$/.test(navigator.userAgent) &&
-      // skip forks with Flash as those are likely to have the menu e.g. CentBrowser
-      !Array.from(navigator.plugins).some(p => p.name === 'Shockwave Flash')) {
     prefs.__defaults['editor.contextDelete'] = true;
   }
 

background/icon-manager.js

@@ -2,17 +2,17 @@
 /* global addAPI bgReady */// common.js
 /* global prefs */
 /* global tabMan */
-/* global CHROME FIREFOX VIVALDI debounce ignoreChromeError */// toolbox.js
+/* global CHROME FIREFOX UA debounce ignoreChromeError */// toolbox.js
 'use strict';
 
 /* exported iconMan */
 const iconMan = (() => {
-  const ICON_SIZES = FIREFOX || CHROME >= 55 && !VIVALDI ? [16, 32] : [19, 38];
+  const ICON_SIZES = FIREFOX || CHROME && !UA.vivaldi ? [16, 32] : [19, 38];
   const staleBadges = new Set();
   const imageDataCache = new Map();
   const badgeOvr = {color: '', text: ''};
   // https://github.com/openstyles/stylus/issues/1287 Fenix can't use custom ImageData
-  const FIREFOX_ANDROID = FIREFOX && navigator.userAgent.includes('Android');
+  const FIREFOX_ANDROID = FIREFOX && UA.mobile;
 
   // https://github.com/openstyles/stylus/issues/335
   let hasCanvas = FIREFOX_ANDROID ? false : loadImage(`/images/icon/${ICON_SIZES[0]}.png`)

edit/codemirror-default.js

@@ -1,5 +1,6 @@
 /* global $ */// dom.js
 /* global CodeMirror */
+/* global UA */// toolbox.js
 /* global editor */
 /* global prefs */
 /* global t */// localization.js
@@ -62,7 +63,7 @@
     if (!extras.includes('blockComment')) {
       KM.sublime['Shift-Ctrl-/'] = 'commentSelection';
     }
-    if (navigator.appVersion.includes('Windows')) {
+    if (UA.windows) {
       // 'pcDefault' keymap on Windows should have F3/Shift-F3/Ctrl-R
       if (!extras.includes('findNext')) KM.pcDefault['F3'] = 'findNext';
       if (!extras.includes('findPrev')) KM.pcDefault['Shift-F3'] = 'findPrev';

edit/sections-editor-section.js

@@ -157,22 +157,16 @@ function createSection(originalSection, genId, si) {
   }
 
   async function updateRegexpTester(toggle) {
-    const isLoaded = typeof regexpTester === 'object';
+    const isLoaded = typeof regexpTester === 'object' ||
-    if (toggle && !isLoaded) {
+      toggle && await require(['/edit/regexp-tester']); /* global regexpTester */
-      await require(['/edit/regexp-tester']); /* global regexpTester */
+    if (toggle != null) {
-    }
-    if (toggle != null && isLoaded) {
       regexpTester.toggle(toggle);
     }
     const regexps = appliesTo.filter(a => a.type === 'regexp')
       .map(a => a.value);
-    if (regexps.length) {
+    const hasRe = regexps.length > 0;
-      el.classList.add('has-regexp');
+    if (hasRe && isLoaded) regexpTester.update(regexps);
-      if (isLoaded) regexpTester.update(regexps);
+    el.classList.toggle('has-regexp', hasRe);
-    } else {
-      el.classList.remove('has-regexp');
-      if (isLoaded) regexpTester.toggle(false);
-    }
   }
 
   function updateTocEntry(origin) {

js/dom.js

@@ -1,4 +1,4 @@
-/* global FIREFOX */// toolbox.js
+/* global FIREFOX UA */// toolbox.js
 /* global prefs */
 'use strict';
 
@@ -469,9 +469,7 @@ const dom = {};
     '/js/dom-on-load',
   ];
   const elHtml = document.documentElement;
-  if (!/^Win\d+/.test(navigator.platform)) {
+  if (!UA.windows) elHtml.classList.add('non-windows');
-    elHtml.classList.add('non-windows');
-  }
   // set language for a) CSS :lang pseudo and b) hyphenation
   elHtml.setAttribute('lang', chrome.i18n.getUILanguage());
   // set up header width resizer

js/prefs.js

@@ -56,7 +56,7 @@
     'manage.backup.expanded': true,
     'manage.filters.expanded': true,
     // the new compact layout doesn't look good on Android yet
-    'manage.newUI': !navigator.appVersion.includes('Android'),
+    'manage.newUI': true,
     'manage.newUI.favicons': false, // show favicons for the sites in applies-to
     'manage.newUI.faviconsGray': true, // gray out favicons
     'manage.newUI.targets': 3,      // max number of applies-to targets visible: 0 = none
@@ -71,7 +71,7 @@
     'editor.smartIndent': true,     // 'smart' indent
     'editor.indentWithTabs': false, // smart indent with tabs
     'editor.tabSize': 4,            // tab width, in spaces
-    'editor.keyMap': navigator.appVersion.indexOf('Windows') > 0 ? 'sublime' : 'default',
+    'editor.keyMap': 'default',
     'editor.theme': 'default',      // CSS theme
     // CSS beautifier
     'editor.beautify': {

js/toolbox.js

@@ -3,6 +3,7 @@
 /* exported
   CHROME_POPUP_BORDER_BUG
   RX_META
+  UA
   capitalize
   clamp
   closeCurrentTab
@@ -24,10 +25,23 @@
   waitForTabUrl
 */
 
-const CHROME = Boolean(chrome.app) && Number(navigator.userAgent.match(/Chrom\w+\/(\d+)|$/)[1]);
+let FIREFOX;
-const OPERA = Boolean(chrome.app) && parseFloat(navigator.userAgent.match(/\bOPR\/(\d+\.\d+)|$/)[1]);
+const [CHROME, UA] = (() => {
-const VIVALDI = Boolean(chrome.app) && navigator.userAgent.includes('Vivaldi');
+  const uad = navigator.userAgentData;
-let FIREFOX = !chrome.app && parseFloat(navigator.userAgent.match(/\bFirefox\/(\d+\.\d+)|$/)[1]);
+  const ua = uad || navigator.userAgent;
+  const brands = uad ? uad.brands.map(_ => `${_.brand}/${_.version}`).join(' ') : ua;
+  const getVer = name => Number(brands.match(new RegExp(name + '\\w*/(\\d+)|$'))[1]) || false;
+  FIREFOX = !chrome.app && getVer('Firefox');
+  return [
+    getVer('Chrom'),
+    {
+      mobile: uad ? uad.mobile : /Android/.test(ua),
+      windows: /Windows/.test(uad ? uad.platform : ua),
+      opera: getVer('(Opera|OPR)'),
+      vivaldi: getVer('Vivaldi'),
+    },
+  ];
+})();
 
 // see PR #781
 const CHROME_POPUP_BORDER_BUG = CHROME >= 62 && CHROME <= 74;
@@ -48,7 +62,7 @@ const URLS = {
   ownOrigin: chrome.runtime.getURL(''),
 
   configureCommands:
-    OPERA ? 'opera://settings/configureCommands'
+    UA.opera ? 'opera://settings/configureCommands'
           : 'chrome://extensions/configureCommands',
 
   installUsercss: chrome.runtime.getURL('install-usercss.html'),
@@ -57,7 +71,7 @@ const URLS = {
   // https://cs.chromium.org/chromium/src/chrome/common/extensions/chrome_extensions_client.cc
   browserWebStore:
     FIREFOX ? 'https://addons.mozilla.org/' :
-    OPERA ? 'https://addons.opera.com/' :
+    UA.opera ? 'https://addons.opera.com/' :
       'https://chrome.google.com/webstore/',
 
   emptyTab: [
@@ -125,11 +139,11 @@ const URLS = {
 
 const RX_META = /\/\*!?\s*==userstyle==[\s\S]*?==\/userstyle==\s*\*\//i;
 
-if (FIREFOX || OPERA || VIVALDI) {
+if (FIREFOX || UA.opera || UA.vivaldi) {
   document.documentElement.classList.add(
     FIREFOX && 'firefox' ||
-    OPERA && 'opera' ||
+    UA.opera && 'opera' ||
-    VIVALDI && 'vivaldi');
+    UA.vivaldi && 'vivaldi');
 }
 
 // FF57+ supports openerTabId, but not in Android

manage/manage.js

@@ -1,5 +1,5 @@
 /* global API msg */// msg.js
-/* global CHROME VIVALDI debounce */// toolbox.js
+/* global CHROME UA debounce */// toolbox.js
 /* global Events handleBulkChange handleVisibilityChange */// events.js
 /* global fitSelectBoxesIn switchUI showStyles */// render.js
 /* global prefs */
@@ -78,7 +78,7 @@ newUI.renderClass();
     ].map(id => `--${id}:"${CSS.escape(t(id))}";`).join('')
     }}`);
 
-  if (!VIVALDI) {
+  if (!UA.vivaldi) {
     waitForSheet().then(() => {
       fitSelectBoxesIn($('#filters'));
     });

options.html

@@ -230,20 +230,7 @@
       </div>
 
       <div class="block" id="advanced">
-        <div class="collapsible-resizer">
+        <h1 i18n-text="optionsAdvanced"></h1>
-          <h1 i18n-text="optionsAdvanced">
-            <a class="svg-inline-wrapper is-collapsed" tabindex="0">
-              <svg class="svg-icon" viewBox="0 0 1792 1792">
-                <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
-              </svg>
-            </a>
-            <a class="svg-inline-wrapper is-expanded" tabindex="0">
-              <svg class="svg-icon" viewBox="0 0 1792 1792">
-                <path fill-rule="evenodd" d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"/>
-              </svg>
-            </a>
-          </h1>
-        </div>
         <div class="items">
           <label class="chromium-only">
             <span i18n-text="optionsAdvancedStyleViaXhr">

options/options.css

@@ -120,14 +120,6 @@ a:hover .svg-icon,
   border-bottom: none;
 }
 
-.collapsed, .collapsible h1 {
-  cursor: pointer;
-}
-
-.collapsed .items {
-  display: none;
-}
-
 h1 {
   min-width: 30%;
   width: 30%;
@@ -273,86 +265,10 @@ input[type="color"] {
   display: none;
 }
 
-#advanced.collapsible.collapsed {
-  height: 30px;
-  padding: 0;
-  margin: 0;
-  justify-content: center;
-}
-
 html:not(.firefox):not(.opera) #updates {
   margin-bottom: 0;
 }
 
-#advanced.collapsible:not(.collapsed) {
-  margin-bottom: 0;
-}
-
-#advanced.collapsible:not(.collapsed) .collapsible-resizer,
-#advanced:not(.collapsible) .collapsible-resizer {
-  padding-right: 8px;
-  box-sizing: border-box;
-  min-width: 30%;
-  width: 30%;
-}
-
-#advanced.collapsible h1 {
-  width: unset;
-  padding: 0;
-  color: #333;
-  transition: color .5s;
-  display: inline-flex;
-  align-items: center;
-}
-
-#advanced:not(.collapsible) .collapsible-resizer h1 {
-  width: unset;
-  padding: 0;
-  display: inline-flex;
-}
-
-#advanced.collapsible:not(.collapsed) h1:hover {
-  color: #666;
-}
-
-#advanced.collapsible.collapsed h1 {
-  padding: 0;
-  color: #666;
-}
-
-#advanced.collapsible.collapsed:hover h1 {
-  color: #333;
-}
-
-.collapsible-resizer .svg-icon {
-  fill: #333;
-  transition: fill .5s;
-  height: 16px;
-  width: 16px;
-}
-
-#advanced.collapsible.collapsed .collapsible-resizer .svg-icon,
-#advanced.collapsible:not(.collapsed) .collapsible-resizer h1:hover .svg-icon {
-  fill: #666;
-}
-
-#advanced.collapsible.collapsed:hover .collapsible-resizer .svg-icon {
-  fill: #333;
-}
-
-#advanced.collapsible h1 .svg-icon {
-  margin-left: 2px;
-}
-
-#advanced.collapsible.collapsed .is-expanded,
-#advanced:not(.collapsible) .collapsible-resizer .svg-icon {
-  display: none;
-}
-
-#advanced.collapsible:not(.collapsed) .is-collapsed {
-  display: none;
-}
-
 .svg-inline-wrapper .svg-icon {
   width: 16px;
   height: 16px;

options/options.js

@@ -11,10 +11,8 @@
   setupLivePrefs
 */// dom.js
 /* global
-  CHROME
   CHROME_POPUP_BORDER_BUG
   FIREFOX
-  OPERA
   URLS
   capitalize
   clamp
@@ -27,23 +25,7 @@ setupLivePrefs();
 $$('input[min], input[max]').forEach(enforceInputRange);
 
 if (CHROME_POPUP_BORDER_BUG) {
-  const borderOption = $('.chrome-no-popup-border');
+  $('.chrome-no-popup-border').classList.remove('chrome-no-popup-border');
-  if (borderOption) {
-    borderOption.classList.remove('chrome-no-popup-border');
-  }
-}
-
-// collapse #advanced block in Chrome pre-66 (classic chrome://extensions UI)
-if (!FIREFOX && !OPERA && CHROME < 66) {
-  const block = $('#advanced');
-  $('h1', block).onclick = event => {
-    event.preventDefault();
-    block.classList.toggle('collapsed');
-    const isCollapsed = block.classList.contains('collapsed');
-    const visibleToggle = $(isCollapsed ? '.is-collapsed' : '.is-expanded', block);
-    visibleToggle.focus();
-  };
-  block.classList.add('collapsible', 'collapsed');
 }
 
 if (FIREFOX && 'update' in (chrome.commands || {})) {