Add: style settings

_locales/en/messages.json

@@ -375,6 +375,12 @@
     },
     "description": "Title of the page for editing styles"
   },
+  "editorCodeLabel": {
+    "message": "Code"
+  },
+  "editorSettingLabel": {
+    "message": "Settings"
+  },
   "enableStyleLabel": {
     "message": "Enable",
     "description": "Label for the button to enable a style"
@@ -1634,6 +1640,21 @@
     "message": "As a security precaution, the browser prohibits extensions from affecting its built-in pages (like chrome://version, the standard new tab page as of Chrome 61, about:addons, and so on) as well as other extensions' pages. Each browser also restricts access to its own extensions gallery (like Chrome Web Store or AMO).",
     "description": "Sub-note in the toolbar pop-up when on a URL Stylus can't affect"
   },
+  "styleOriginLabel": {
+    "message": "Style origin"
+  },
+  "styleUpdateUrlLabel": {
+    "message": "Update URL"
+  },
+  "stylePreferSchemeLabel": {
+    "message": "Dark/Light mode"
+  },
+  "styleIncludeLabel": {
+    "message": "Custom included sites"
+  },
+  "styleExcludeLabel": {
+    "message": "Custom excluded sites"
+  },
   "syncDropboxDeprecated": {
     "message": "Dropbox import/export is replaced by a more advanced style sync in the options page."
   },

background/style-manager.js

@@ -283,7 +283,7 @@ const styleMan = (() => {
     async toggle(id, enabled) {
       if (ready.then) await ready;
       const style = Object.assign({}, id2style(id), {enabled});
-      await saveStyle(style, {reason: 'toggle', codeIsUpdated: false});
+      await saveStyle(style, {reason: 'toggle'});
       return id;
     },
 
@@ -297,6 +297,13 @@ const styleMan = (() => {
     removeExclusion: removeIncludeExclude.bind(null, 'exclusions'),
     /** @returns {Promise<?StyleObj>} */
     removeInclusion: removeIncludeExclude.bind(null, 'inclusions'),
+
+    async config(id, prop, value) {
+      if (ready.then) await ready;
+      const style = Object.assign({}, id2style(id));
+      style[prop] = value;
+      return saveStyle(style, {reason: 'config'});
+    },
   };
 
   //#endregion
@@ -375,7 +382,7 @@ const styleMan = (() => {
       throw new Error('The rule already exists');
     }
     style[type] = list.concat([rule]);
-    return saveStyle(style, {reason: 'styleSettings'});
+    return saveStyle(style, {reason: 'config'});
   }
 
   async function removeIncludeExclude(type, id, rule) {
@@ -386,10 +393,10 @@ const styleMan = (() => {
       return;
     }
     style[type] = list.filter(r => r !== rule);
-    return saveStyle(style, {reason: 'styleSettings'});
+    return saveStyle(style, {reason: 'config'});
   }
 
-  function broadcastStyleUpdated(style, reason, method = 'styleUpdated', codeIsUpdated = true) {
+  function broadcastStyleUpdated(style, reason, method = 'styleUpdated') {
     const {id} = style;
     const data = id2data(id);
     const excluded = new Set();
@@ -412,7 +419,6 @@ const styleMan = (() => {
     return msg.broadcast({
       method,
       reason,
-      codeIsUpdated,
       style: {
         id,
         md5Url: style.md5Url,
@@ -452,15 +458,15 @@ const styleMan = (() => {
     return handleSave(style, handlingOptions);
   }
 
-  function handleSave(style, {reason, codeIsUpdated, broadcast = true}) {
+  function handleSave(style, {reason, broadcast = true}) {
     const data = id2data(style.id);
     const method = data ? 'styleUpdated' : 'styleAdded';
     if (!data) {
       storeInMap(style);
     } else {
       data.style = style;
     }
-    if (broadcast) broadcastStyleUpdated(style, reason, method, codeIsUpdated);
+    if (broadcast) broadcastStyleUpdated(style, reason, method);
     return style;
   }
 

edit.html

@@ -17,6 +17,7 @@
     <script src="content/apply.js"></script>
 
     <script src="js/sections-util.js"></script>
+    <script src="js/event-emitter.js"></script>
     <script src="edit/codemirror-themes.js"></script> <!-- must precede base.js -->
     <script src="edit/base.js"></script>
 
@@ -61,6 +62,7 @@
     <script src="edit/sections-editor-section.js"></script>
     <script src="edit/sections-editor.js"></script>
     <script src="edit/usw-integration.js"></script>
+    <script src="edit/settings.js"></script>
     <script src="edit/edit.js"></script>
 
     <template data-id="appliesTo">
@@ -239,6 +241,8 @@
     <link href="js/color/color-picker.css" rel="stylesheet">
     <link href="edit/codemirror-default.css" rel="stylesheet">
     <link href="edit/edit.css" rel="stylesheet">
+    <link rel="stylesheet" href="edit/tab.css">
+    <link rel="stylesheet" href="edit/settings.css">
   </head>
 
   <body id="stylus-edit">
@@ -433,7 +437,53 @@ <h2 i18n-text="linterIssues">: <span id="issue-count"></span>
            target="_blank"></a>
       </div>
     </div>
-    <section id="sections"></section>
+    <div class="main tab-container">
+      <div class="tab-bar">
+        <div class="tab-bar-item active" i18n-text="editorCodeLabel"></div>
+        <div class="tab-bar-item" i18n-text="editorSettingLabel"></div>
+      </div>
+      <div class="tab-panel">
+        <section id="sections" class="active"></section>
+        <fieldset class="style-settings" disabled>
+          <!-- <label class="style-origin">
+            <span class="form-label" i18n-text="styleOriginLabel"></span>
+            <input id="styleOrigin" type="text">
+          </label> -->
+          <label class="form-group style-update-url">
+            <span class="form-label" i18n-text="styleUpdateUrlLabel"></span>
+            <input type="text">
+          </label>
+          <div class="form-group style-prefer-scheme radio-group">
+            <!-- FIXME: should we use a different message from install page? -->
+            <span class="form-label" i18n-text="installPreferSchemeLabel"></span>
+            <label class="radio-item">
+              <input type="radio" name="preferScheme" value="none">
+              <span class="radio-label" i18n-text="installPreferSchemeNone"></span>
+            </label>
+            <label class="radio-item">
+              <input type="radio" name="preferScheme" value="dark">
+              <span class="radio-label" i18n-text="installPreferSchemeDark"></span>
+            </label>
+            <label class="radio-item">
+              <input type="radio" name="preferScheme" value="light">
+              <span class="radio-label" i18n-text="installPreferSchemeLight"></span>
+            </label>
+          </div>
+          <label class="form-group style-include">
+            <span class="form-label" i18n-text="styleIncludeLabel"></span>
+            <textarea></textarea>
+          </label>
+          <label class="form-group style-exclude">
+            <span class="form-label" i18n-text="styleExcludeLabel"></span>
+            <textarea></textarea>
+          </label>
+          <!-- <label class="style-always-important">
+            <input type="checkbox">
+            <span class="form-label" i18n-text="styleAlwaysImportantLabel"></span>
+          </label> -->
+        </fieldset>
+      </div>
+    </div>
     <div id="help-popup">
       <div class="title"></div><svg id="sections-help" class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg>
       <div class="contents"></div>
@@ -478,5 +528,6 @@ <h2 i18n-text="linterIssues">: <span id="issue-count"></span>
       </symbol>
 
     </svg>
+    <script src="edit/tab.js"></script>
   </body>
 </html>

edit/base.js

@@ -14,13 +14,14 @@
   tryJSONparse
   tryURL
 */// toolbox.js
+/* global EventEmitter */
 'use strict';
 
 /**
  * @type Editor
  * @namespace Editor
  */
-const editor = {
+const editor = Object.assign(EventEmitter(), {
   style: null,
   dirty: DirtyReporter(),
   isUsercss: false,
@@ -47,7 +48,7 @@ const editor = {
       customName || name || t('styleMissingName')
     } - Stylus`; // the suffix enables external utilities to process our windows e.g. pin on top
   },
-};
+});
 
 //#region pre-init
 

edit/edit.css

@@ -105,8 +105,11 @@ label {
 #header h1 {
   margin-top: 0;
 }
-#sections {
+.main {
   padding-left: 280px;
+  height: 100%;
+}
+#sections {
   min-height: 0;
   height: 100%;
 }
@@ -1177,13 +1180,16 @@ body.linter-disabled .hidden-unless-compact {
   #lint:not([open]) + #footer {
     margin: .25em 0 -1em .25em;
   }
-  #sections {
+  .main {
     height: unset !important;
     padding-left: 0;
     display: flex;
     flex-direction: column;
     flex: 1;
   }
+  .tab-bar {
+    margin-top: var(--fixed-height);
+  }
   #sections > :not(.single-editor) {
     margin: 0 .5rem;
     padding: .5rem 0;

edit/edit.js

@@ -1,5 +1,5 @@
 /* global $ $create messageBoxProxy waitForSheet */// dom.js
-/* global API msg */// msg.js
+/* global msg API */// msg.js
 /* global CodeMirror */
 /* global SectionsEditor */
 /* global SourceEditor */
@@ -11,13 +11,15 @@
 /* global linterMan */
 /* global prefs */
 /* global t */// localization.js
+/* global StyleSettings */// settings.js
 'use strict';
 
 //#region init
 
 baseInit.ready.then(async () => {
   await waitForSheet();
   (editor.isUsercss ? SourceEditor : SectionsEditor)();
+  StyleSettings(editor);
   await editor.ready;
   editor.ready = true;
   editor.dirty.onChange(editor.updateDirty);
@@ -59,16 +61,23 @@ const IGNORE_UPDATE_REASONS = [
   'editPreview',
   'editPreviewEnd',
   'editSave',
-  'config',
+  // 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)) {
-        Promise.resolve(request.codeIsUpdated === false ? style : API.styles.get(style.id))
-          .then(newStyle => editor.replaceStyle(newStyle, request.codeIsUpdated));
+        if (request.reason === 'toggle') {
+          editor.emit('styleToggled', request.style);
+        } else {
+          API.styles.get(request.style.id)
+            .then(style => {
+              editor.emit('styleChange', style, request.reason);
+            });
+        }
       }
       break;
     case 'styleDeleted':
@@ -159,9 +168,9 @@ window.on('beforeunload', e => {
       }
     },
 
-    toggleStyle() {
-      $('#enabled').checked = !style.enabled;
-      editor.updateEnabledness(!style.enabled);
+    toggleStyle(enabled = style.enabled) {
+      $('#enabled').checked = enabled;
+      editor.updateEnabledness(enabled);
     },
 
     updateDirty() {

edit/sections-editor.js

@@ -84,16 +84,13 @@ function SectionsEditor() {
         : null;
     },
 
-    async replaceStyle(newStyle, codeIsUpdated) {
-      dirty.clear('name');
+    async replaceStyle(newStyle) {
+      dirty.clear();
       // FIXME: avoid recreating all editors?
-      if (codeIsUpdated !== false) {
-        await initSections(newStyle.sections, {replace: true});
-      }
+      await initSections(newStyle.sections, {replace: true});
       Object.assign(style, newStyle);
       editor.onStyleUpdated();
       updateHeader();
-      dirty.clear();
       // Go from new style URL to edit style URL
       if (style.id && !/[&?]id=/.test(location.search)) {
         history.replaceState({}, document.title, `${location.pathname}?id=${style.id}`);
@@ -111,6 +108,9 @@ function SectionsEditor() {
       }
       newStyle = await API.styles.editSave(newStyle);
       destroyRemovedSections();
+      if (!style.id) {
+        editor.emit('styleChange', newStyle, 'new');
+      }
       sessionStore.justEditedStyleId = newStyle.id;
       editor.replaceStyle(newStyle, false);
     },
@@ -128,6 +128,28 @@ function SectionsEditor() {
 
   editor.ready = initSections(style.sections);
 
+  editor.on('styleToggled', newStyle => {
+    if (!dirty.isDirty()) {
+      Object.assign(style, newStyle);
+    } else {
+      editor.toggleStyle(newStyle.enabled);
+    }
+    updateHeader();
+    updateLivePreview();
+  });
+  editor.on('styleChange', (newStyle, reason) => {
+    if (reason === 'new') return; // nothing is new for us
+    if (reason === 'config') {
+      delete newStyle.sections;
+      delete newStyle.name;
+      delete newStyle.enabled;
+      Object.assign(style, newStyle);
+      updateLivePreview();
+      return;
+    }
+    editor.replaceStyle(newStyle);
+  });
+
   /** @param {EditorSection} section */
   function fitToContent(section) {
     const {cm, cm: {display: {wrapper, sizer}}} = section;