Merge branch 'master' into resize-header

edit/base.js

@@ -33,6 +33,7 @@ const editor = {
   /** @type {'customName'|'name'} */
   nameTarget: 'name',
   previewDelay: 200, // Chrome devtools uses 200
+  saving: false,
   scrollInfo: null,
 
   cancel: () => location.assign('/manage.html'),

edit/edit.js

@@ -61,19 +61,11 @@ baseInit.ready.then(async () => {
 //#endregion
 //#region events
 
-const IGNORE_UPDATE_REASONS = [
-  'editPreview',
-  'editPreviewEnd',
-  'editSave',
-  // https://github.com/openstyles/stylus/issues/807 is closed without fix
-  // 'config,
-];
-
 msg.onExtension(request => {
   const {style} = request;
   switch (request.method) {
     case 'styleUpdated':
-      if (editor.style.id === style.id && !IGNORE_UPDATE_REASONS.includes(request.reason)) {
+      if (editor.style.id === style.id) {
         handleExternalUpdate(request);
       }
       break;
@@ -89,6 +81,14 @@ msg.onExtension(request => {
 });
 
 async function handleExternalUpdate({style, reason}) {
+  if (reason === 'editPreview' ||
+      reason === 'editPreviewEnd') {
+    return;
+  }
+  if (reason === 'editSave' && editor.saving) {
+    editor.saving = false;
+    return;
+  }
   if (reason === 'toggle') {
     if (editor.dirty.isDirty()) {
       editor.toggleStyle(style.enabled);
@@ -191,6 +191,13 @@ window.on('beforeunload', e => {
       }
     },
 
+    async save() {
+      if (dirty.isDirty()) {
+        editor.saving = true;
+        await editor.saveImpl();
+      }
+    },
+
     toggleStyle(enabled = !style.enabled) {
       $('#enabled').checked = enabled;
       editor.updateEnabledness(enabled);

edit/sections-editor.js

@@ -7,6 +7,7 @@
 /* global editor */
 /* global linterMan */
 /* global prefs */
+/* global styleSectionsEqual */ // sections-util.js
 /* global t */// localization.js
 'use strict';
 
@@ -86,9 +87,15 @@ function SectionsEditor() {
     },
 
     async replaceStyle(newStyle) {
+      const sameCode = styleSectionsEqual(newStyle, getModel());
+      if (!sameCode && !await messageBoxProxy.confirm(t('styleUpdateDiscardChanges'))) {
+        return;
+      }
       dirty.clear();
       // FIXME: avoid recreating all editors?
+      if (!sameCode) {
         await initSections(newStyle.sections, {replace: true});
+      }
       Object.assign(style, newStyle);
       editor.updateClass();
       updateMeta();
@@ -99,18 +106,14 @@ function SectionsEditor() {
       updateLivePreview();
     },
 
-    async save() {
-      if (!dirty.isDirty()) {
-        return;
-      }
+    async saveImpl() {
       let newStyle = getModel();
       if (!validate(newStyle)) {
         return;
       }
       newStyle = await API.styles.editSave(newStyle);
-      destroyRemovedSections();
       sessionStore.justEditedStyleId = newStyle.id;
-      editor.replaceStyle(newStyle, false);
+      dirty.clear();
     },
 
     scrollToEditor(cm) {
@@ -453,18 +456,6 @@ function SectionsEditor() {
     return true;
   }
 
-  function destroyRemovedSections() {
-    for (let i = 0; i < sections.length;) {
-      if (!sections[i].removed) {
-        i++;
-        continue;
-      }
-      sections[i].destroy();
-      sections[i].el.remove();
-      sections.splice(i, 1);
-    }
-  }
-
   function updateMeta() {
     $('#name').value = style.customName || style.name || '';
     $('#enabled').checked = style.enabled !== false;

edit/source-editor.js

@@ -61,8 +61,7 @@ function SourceEditor() {
         cm.focus();
       }
     },
-    async save() {
-      if (!dirty.isDirty()) return;
+    async saveImpl() {
       const sourceCode = cm.getValue();
       try {
         const {customName, enabled, id} = style;
@@ -221,7 +220,6 @@ function SourceEditor() {
       return;
     }
 
-    // TODO: also confirm in sections-editor?
     if (await messageBoxProxy.confirm(t('styleUpdateDiscardChanges'))) {
       updateEnvironment();
       if (!sameCode) {

js/csslint/parserlib.js

@@ -195,7 +195,7 @@ self.parserlib = (() => {
     'color-interpolation-filters': 'auto | sRGB | linearRGB',
     'color-profile': 1,
     'color-rendering': 'auto | optimizeSpeed | optimizeQuality',
-    'color-scheme': 'normal | [ light | dark ]+',
+    'color-scheme': 'normal | [ light | dark | <ident> ]+ && only?',
     'column-count': '<integer> | auto',
     'column-fill': 'auto | balance',
     'column-gap': '<column-gap>',
@@ -522,6 +522,7 @@ self.parserlib = (() => {
     'scroll-snap-type': 'none | [ x | y | block | inline | both ] [ mandatory | proximity ]?',
 
     'scrollbar-color': 'auto | dark | light | <color>{2}',
+    'scrollbar-gutter': 'auto | [ [ stable | always ] && both-edges? && force? ] || match-parent',
     'scrollbar-width': 'auto | thin | none',
     'shape-inside': 'auto | outside-shape | [ <basic-shape> || shape-box ] | <image> | display',
     'shape-rendering': 'auto | optimizeSpeed | crispEdges | geometricPrecision',
@@ -983,12 +984,12 @@ self.parserlib = (() => {
       'matrix( <number>#{6} ) | ' +
       'matrix3d( <number>#{16} ) | ' +
       'perspective( <len0+> | none ) | ' +
-      'rotate( <angle-or-0> ) | ' +
+      'rotate( <angle-or-0> | none ) | ' +
       'rotate3d( <number>#{3} , <angle-or-0> ) | ' +
       'rotateX( <angle-or-0> ) | ' +
       'rotateY( <angle-or-0> ) | ' +
       'rotateZ( <angle-or-0> ) | ' +
-      'scale( [ <num-pct> ]#{1,2} ) | ' +
+      'scale( [ <num-pct> ]#{1,2} | none ) | ' +
       'scale3d( <num-pct>#{3} ) | ' +
       'scaleX( <num-pct> ) | ' +
       'scaleY( <num-pct> ) | ' +
@@ -996,7 +997,7 @@ self.parserlib = (() => {
       'skew( <angle-or-0> [ , <angle-or-0> ]? ) | ' +
       'skewX( <angle-or-0> ) | ' +
       'skewY( <angle-or-0> ) | ' +
-      'translate( <len-pct>#{1,2} ) | ' +
+      'translate( <len-pct>#{1,2} | none ) | ' +
       'translate3d( <len-pct>#{2} , <length> ) | ' +
       'translateX( <len-pct> ) | ' +
       'translateY( <len-pct> ) | ' +