Merge branch 'master' of https://github.com/openstyles/stylus into dev-color-scheme

background/background.js

@@ -177,6 +177,8 @@ msg.on((msg, sender) => {
 //#endregion
 
 Promise.all([
+  browser.extension.isAllowedFileSchemeAccess()
+    .then(res => API.data.set('hasFileAccess', res)),
   bgReady.styles,
   /* These are loaded conditionally.
      Each item uses `require` individually so IDE can jump to the source and track usage. */

background/style-manager.js

@@ -1,5 +1,5 @@
 /* global API msg */// msg.js
-/* global CHROME URLS stringAsRegExp tryRegExp tryURL */// toolbox.js
+/* global CHROME URLS isEmptyObj stringAsRegExp tryRegExp tryURL */// toolbox.js
 /* global bgReady compareRevision */// common.js
 /* global calcStyleDigest styleCodeEmpty styleSectionGlobal */// sections-util.js
 /* global db */
@@ -480,7 +480,7 @@ const styleMan = (() => {
 
   async function init() {
     const styles = await db.exec('getAll') || [];
-    const updated = styles.filter(fixKnownProblems);
+    const updated = await Promise.all(styles.map(fixKnownProblems).filter(Boolean));
     if (updated.length) {
       await db.exec('putMany', updated);
     }
@@ -492,7 +492,7 @@ const styleMan = (() => {
     bgReady._resolveStyles();
   }
 
-  function fixKnownProblems(style) {
+  function fixKnownProblems(style, initIndex, initArray) {
     let res = 0;
     for (const key in MISSING_PROPS) {
       if (!style[key]) {
@@ -536,7 +536,17 @@ const styleMan = (() => {
       if (!style.url) res = style.url = url;
       if (!style.installationUrl) res = style.installationUrl = url;
     }
-    return Boolean(res);
+    /* @import must precede `vars` that we add at beginning */
+    if (
+      initArray &&
+      !isEmptyObj((style.usercssData || {}).vars) &&
+      style.sections.some(({code}) =>
+        code.startsWith(':root {\n  --') &&
+        /@import\s/i.test(code))
+    ) {
+      return usercssMan.buildCode(style);
+    }
+    return res && style;
   }
 
   function urlMatchStyle(query, style) {

background/update-manager.js

@@ -223,7 +223,9 @@ const updateMan = (() => {
       let err;
       if (!delta && !ignoreDigest) {
         // re-install is invalid in a soft upgrade
-        err = response === style.sourceCode ? STATES.SAME_CODE : STATES.SAME_VERSION;
+        err = response === style.sourceCode
+          ? STATES.SAME_CODE
+          : !URLS.isLocalhost(updateUrl) && STATES.SAME_VERSION;
       }
       if (delta < 0) {
         // downgrade is always invalid

edit/edit.css

@@ -435,6 +435,9 @@ input:invalid {
   content: counter(codebox) ": " attr(data-text);
   margin-left: 0.25rem;
 }
+.single-editor .applies-to {
+  border-width: 1px 0;
+}
 .single-editor .applies-to > label::before {
   content: attr(data-index) ":";
   margin-right: 0.25rem;
@@ -589,9 +592,6 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
   align-items: flex-start;
   min-height: 30px;
   flex-wrap: wrap;
-  background-color: #f7f7f7; /* .CodeMirror-gutters */
-  border: solid #bbb;
-  border-width: 1px 0;
 }
 .applies-to.error {
   background-color: #f002;
@@ -988,9 +988,18 @@ body.linter-disabled .hidden-unless-compact {
   margin-top: .75rem;
 }
 
+.single-editor {
+  position: relative;
+  height: 100%;
+}
 .single-editor .CodeMirror {
-  width: 100%;
-  height: 100vh; /* WARNING! Don't use 100% as it's dead slow */
+/* WARNING! If you change this or .single-editor make sure editor opens huge styles like GitHub Dark instantly */
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: auto;
   border: none;
   outline: none;
 }
@@ -1038,10 +1047,11 @@ body.linter-disabled .hidden-unless-compact {
     padding: .5rem 1rem .5rem .5rem;
   }
   .fixed-header {
+    --fixed-height: 40px;
     padding-top: var(--fixed-padding);
   }
   .fixed-header #header {
-    min-height: 40px;
+    min-height: var(--fixed-height);
     position: fixed;
     top: 0;
     left: 0;
@@ -1053,6 +1063,9 @@ body.linter-disabled .hidden-unless-compact {
   .fixed-header #options {
     display: none !important;
   }
+  .fixed-header #details-wrapper {
+    padding-top: calc((var(--fixed-height) - 1.2rem) / 2); /* 1.2 is the normal line height */
+  }
   #header summary + *,
   #lint > .lint-scroll-container {
     margin-left: 1rem;

install-usercss/install-usercss.js

@@ -1,6 +1,6 @@
 /* global $ $create $createLink $$remove showSpinner */// dom.js
 /* global API */// msg.js
-/* global closeCurrentTab deepEqual */// toolbox.js
+/* global URLS closeCurrentTab deepEqual */// toolbox.js
 /* global messageBox */
 /* global prefs */
 /* global preinit */
@@ -61,12 +61,18 @@ setTimeout(() => !cm && showSpinner($('#header')), 200);
     '/js/color/color-view',
   ]));
 
-  ({tabId, initialUrl} = await preinit);
+  ({tabId, initialUrl} = preinit);
   liveReload = initLiveReload();
 
-  const {dup, style, error, sourceCode} = await preinit.ready;
+  const [
+    {dup, style, error, sourceCode},
+    hasFileAccess,
+  ] = await Promise.all([
+    preinit.ready,
+    API.data.get('hasFileAccess'),
+  ]);
   if (!style && sourceCode == null) {
-    messageBox.alert(isNaN(error) ? error : 'HTTP Error ' + error, 'pre');
+    messageBox.alert(isNaN(error) ? `${error}` : 'HTTP Error ' + error, 'pre');
     return;
   }
   await scriptsReady;
@@ -118,7 +124,7 @@ setTimeout(() => !cm && showSpinner($('#header')), 200);
     checker.checked = true;
     // there is no way to "unset" updateUrl, you can only overwrite it.
     checker.disabled = true;
-  } else if (updateUrl.protocol !== 'file:') {
+  } else if (updateUrl.protocol !== 'file:' || hasFileAccess) {
     checker.checked = true;
     style.updateUrl = updateUrl.href;
   }
@@ -136,7 +142,7 @@ setTimeout(() => !cm && showSpinner($('#header')), 200);
   };
   preferScheme.onchange();
 
-  if (initialUrl.startsWith('file:')) {
+  if (URLS.isLocalhost(initialUrl)) {
     $('.live-reload input').onchange = liveReload.onToggled;
   } else {
     $('.live-reload').remove();

install-usercss/preinit.js

@@ -25,7 +25,10 @@ const preinit = (() => {
   function DirectDownloader() {
     let oldCode = null;
     return async () => {
-      const code = await download(initialUrl);
+      const code = await download(initialUrl, {
+        // Disabling cache on http://localhost otherwise the recheck delay gets too big
+        headers: {'Cache-Control': 'no-cache, no-store'},
+      });
       if (oldCode !== code) {
         oldCode = code;
         return code;

js/csslint/parserlib.js

@@ -458,7 +458,7 @@ self.parserlib = (() => {
     'pause': 1,
     'pause-after': 1,
     'pause-before': 1,
-    'perspective': 'none | <length>',
+    'perspective': 'none | <len0+>',
     'perspective-origin': '<position>',
     'phonemes': 1,
     'pitch': 1,
@@ -492,7 +492,7 @@ self.parserlib = (() => {
     'ruby-position': 1,
     'ruby-span': 1,
 
-    'scale': 'none | <number>{1,3}',
+    'scale': 'none | <num-pct>{1,3}',
 
     'scroll-behavior': 'auto | smooth',
     'scroll-margin': '<length>{1,4}',
@@ -579,7 +579,7 @@ self.parserlib = (() => {
     'transform': 'none | <transform-function>+',
     'transform-box': 'border-box | fill-box | view-box',
     'transform-origin': '<transform-origin>',
-    'transform-style': 'auto | flat | preserve-3d',
+    'transform-style': 'flat | preserve-3d',
     'transition': '<transition>#',
     'transition-delay': '<time>#',
     'transition-duration': '<time>#',
@@ -982,17 +982,21 @@ self.parserlib = (() => {
     '<transform-function>':
       'matrix( <number>#{6} ) | ' +
       'matrix3d( <number>#{16} ) | ' +
+      'perspective( <len0+> | none ) | ' +
       'rotate( <angle-or-0> ) | ' +
       'rotate3d( <number>#{3} , <angle-or-0> ) | ' +
-      'scale( <number> [ , <number> ]? ) | ' +
-      'scale3d( <number>#{3} ) | ' +
-      'scaleX( <number> ) | ' +
-      'scaleY( <number> ) | ' +
-      'scaleZ( <number> ) | ' +
+      'rotateX( <angle-or-0> ) | ' +
+      'rotateY( <angle-or-0> ) | ' +
+      'rotateZ( <angle-or-0> ) | ' +
+      'scale( [ <num-pct> ]#{1,2} ) | ' +
+      'scale3d( <num-pct>#{3} ) | ' +
+      'scaleX( <num-pct> ) | ' +
+      'scaleY( <num-pct> ) | ' +
+      'scaleZ( <num-pct> ) | ' +
       'skew( <angle-or-0> [ , <angle-or-0> ]? ) | ' +
       'skewX( <angle-or-0> ) | ' +
       'skewY( <angle-or-0> ) | ' +
-      'translate( <len-pct> [ , <len-pct> ]? ) | ' +
+      'translate( <len-pct>#{1,2} ) | ' +
       'translate3d( <len-pct>#{2} , <length> ) | ' +
       'translateX( <len-pct> ) | ' +
       'translateY( <len-pct> ) | ' +
@@ -4674,6 +4678,7 @@ self.parserlib = (() => {
   //#endregion
   //#region PUBLIC API
 
+  /** @namespace parserlib */
   return {
     css: {
       Colors,

js/sections-util.js

@@ -71,12 +71,15 @@ function styleCodeEmpty(code) {
   if (!code) {
     return true;
   }
+  let lastIndex = 0;
   const rx = /\s+|\/\*([^*]|\*(?!\/))*(\*\/|$)|@namespace[^;]+;|@charset[^;]+;/giyu;
   while (rx.exec(code)) {
-    if (rx.lastIndex === code.length) {
+    lastIndex = rx.lastIndex;
+    if (lastIndex === code.length) {
       return true;
     }
   }
+  styleCodeEmpty.lastIndex = lastIndex;
   return false;
 }
 

js/toolbox.js

@@ -115,6 +115,8 @@ const URLS = {
     url.startsWith(URLS.ownOrigin) ||
     !URLS.chromeProtectsNTP && url.startsWith('chrome://newtab/')
   ),
+
+  isLocalhost: url => /^file:|^https?:\/\/(localhost|127\.0\.0\.1)\//.test(url),
 };
 
 const RX_META = /\/\*!?\s*==userstyle==[\s\S]*?==\/userstyle==\s*\*\//i;

js/usercss-compiler.js

@@ -12,7 +12,7 @@ const BUILDERS = Object.assign(Object.create(null), {
       varDef = ':root {\n' + varDef + '}\n';
       for (const section of sections) {
         if (!styleCodeEmpty(section.code)) {
-          section.code = varDef + section.code;
+          spliceCssAfterGlobals(section, varDef, styleCodeEmpty.lastIndex);
         }
       }
     },
@@ -165,3 +165,23 @@ function simplifyUsercssVars(vars) {
     va.value = value;
   }
 }
+
+function spliceCssAfterGlobals(section, newText, after) {
+  const {code} = section;
+  const RX_IMPORT = /@import\s/gi;
+  RX_IMPORT.lastIndex = after;
+  if (RX_IMPORT.test(code)) {
+    require(['/js/csslint/parserlib']); /* global parserlib */
+    const parser = new parserlib.css.Parser();
+    parser._tokenStream = new parserlib.css.TokenStream(code);
+    parser._sheetGlobals();
+    const {col, line, offset} = parser._tokenStream._token;
+    // normalizing newlines in non-usercss to match line:col from parserlib
+    if ((code.indexOf('\r') + 1 || 1e99) - 1 < offset) {
+      after = col + code.split('\n', line).reduce((len, s) => len + s.length + 1, 0);
+    } else {
+      after = offset + 1;
+    }
+  }
+  section.code = (after ? code.slice(0, after) + '\n' : '') + newText + code.slice(after);
+}