minor UI update

background/badge.js

@@ -2,7 +2,7 @@
 	'node_modules/web-ext-utils/browser/': { browserAction, Tabs, rootUrl, },
 	'node_modules/web-ext-utils/browser/version': { fennec, },
 	'node_modules/web-ext-utils/loader/views': { getUrl, openView, },
-	'node_modules/web-ext-utils/utils/': { reportSuccess, },
+	'node_modules/web-ext-utils/utils/': { reportSuccess, reportError, },
 	'node_modules/es6lib/functional': { debounce, },
 	'views/': _, // put views in tabview
 	'./chrome/': ChromeStyle,
@@ -56,7 +56,7 @@ const colors = { normal: [ 0x00, 0x7f, 0x00, 0x60, ], restart: [ 0xa5, 0x50, 0x0
 browserAction.setBadgeBackgroundColor({ color: colors.normal, });
 let wasChanged = false; ChromeStyle.onWritten(changed => {
 	browserAction.setBadgeBackgroundColor({ color: changed ? colors.restart : colors.normal, });
-	(changed || wasChanged) && reportSuccess(
+	(changed || wasChanged) && (changed ? reportError : reportSuccess)( // info or warn would be more appropriate than error ...
 		`The UI styles were written`, changed
 		? `and have changed. The browser must be restarted to apply the changes!`
 		: `and changed back. No need to restart the browser anymore!`

background/local/index.js

@@ -156,10 +156,19 @@ async function onChromeChange(path, css) { try {
 			oldSections.splice(oldSections.indexOf(oldSection), 1); // only use each old section once
 			if (sameArray(oldSection.tokens, section.tokens)) { continue; } // section wasn't changed
 			if (!oldSection.location) { console.warn(`can't apply changes to global CSS`); continue; }
-			parts.splice( // this requires the sections to stay in the same order
+
+			// "un-apply" any user-overwritten options
+			const newSetction = section.cloneWithoutIncludes();
+			const prefs = { }; style.options.children.options.children.forEach(
+				({ name, default: value, values: { isSet, }, model: { unit, }, }) =>
+				isSet && (prefs[name] = value + unit)
+			); newSetction.setOptions(prefs);
+
+			// write the changed section
+			parts.splice( // TODO: this requires the sections to stay in the same order
 				parts.length - 1, 1, // pop last
 				style.code.slice(lastPos, oldSection.location[0]),
-				section.tokens.join(''), // new code with user selected settings applied
+				newSetction.tokens.join(''), // new code with user selected settings applied
 				style.code.slice(lastPos = oldSection.location[1])
 			);
 		}

background/parser.js

@@ -52,7 +52,7 @@ class Sheet {
 	toString({ namespace = true, minify = false, } = { }) {
 		return (
 			namespace && this.namespace ? '@namespace '+ this.namespace +';' : ''
-		) + this.sections.map(
+		) + (minify ? '' : '\n\n') + this.sections.map(
 			_=>_.toString(arguments[0])
 		).join(minify ? '' : '\n\n');
 	}
@@ -181,7 +181,7 @@ function Sheet_fromCode(css, { onerror = error => console.warn('CSS parsing erro
 	); if (metaBlock) {
 		Object.assign(meta, parseMetaBlock(metaBlock, onerror));
 	} else {
-		const where = globalTokens.concat(sections[1] ? sections[1].tokens.slice(0, 25 - globalTokens.length) : [ ]);
+		const where = globalTokens.slice(0, 5).concat(sections[1] ? sections[1].tokens.slice(0, 4) : [ ]);
 		rsFuzzyTitle.some(exp => where.some(token => {
 			if (!(/^\/\*/).test(token)) { return null; }
 			const match = exp.exec(token);

background/web/index.js

@@ -9,11 +9,11 @@ let debug; options.debug.whenChange(([ value, ]) => { debug = value; });
  * Represents (the parts of) a style sheet that can be attached via `Tabs.insertCSS`.
  */
 class ContentStyle {
-	constructor(url, code) {
+	constructor(url, sheet) {
 		this.url = url;
 		// in firefox 59, `@-moz-document` broke for styles not attached with `cssOrigin: 'user'` (see https://bugzilla.mozilla.org/show_bug.cgi?id=1035091)
 		// so, as with `ChromeStyle`s, '!important' has to be added to every rule
-		this.code = code.toString({ minify: false, important: true, namespace: true, })
+		this.code = sheet.toString({ minify: false, important: true, namespace: true, })
 		+ `\n/* ${ Math.random().toString(32).slice(2) } */`; // avoid conflicts
 		styles.add(this); styles.size === 1 && WebNavigation.onCommitted.addListener(onNavigation);
 		toAdd.add(this.code); refresh();

common/options.js

@@ -82,10 +82,15 @@ const model = {
 			},
 			chrome: {
 				title: 'Chrome debugging [ᴇxᴘᴇʀɪᴍᴇɴᴛᴀʟ]',
-				description: `To develop chrome styles without restarting the browser after every change, the corresponding sections in the <code>userCrome.css</code>/<code>userContent.css</code> files can be edited through the Style Editor in the <i>Browser Toolbox</i> (<code>Ctrl</code> + <code>Shift</code> + <code>Alt</code> + <code>I</code>) or the page inspector on <code>about:</code>-pages.<br>
-				Firefox applies changes made there after a short delay, and when saving (<code>Ctrl</code>+<code>S</code>), writes the new files to the disc.
-				As an <b>experimental</b> feature, ${manifest.short_name} can detect these on-disc changes and map them back to the original (local) style files.<br>
+				description: `<p>To develop chrome styles without restarting the browser after every change, the corresponding sections in the <code>userCrome.css</code>/<code>userContent.css</code> files can be edited
+				through the Style Editor in the <i>Browser Toolbox</i> (<code>Ctrl</code> + <code>Shift</code> + <code>Alt</code> + <code>I</code>) for the main UI or the page inspector on <code>about:</code>-pages.<br>
+				Firefox applies changes made there after a short delay, and when saving (<code>Ctrl</code>+<code>S</code>), writes the new files to the disc.</p>
+				<p>As an <b>experimental</b> feature, ${manifest.short_name} can detect these on-disc changes and map them back to the original (local) style files.<br>
+				${manifest.short_name} is only able to map chages made within the code block of existing <code>@document</code> sections.
+				Other modifications can not be mapped to the original files and may have unexpexted results.
+				Any changes made to the source files since the browser start will be overwritten when the <code>userCrome.css</code>/<code>userContent.css</code> files are saved.</p>
 				<b>Activate at your own risk and always make backups!</b>`,
+				expanded: false,
 				default: false,
 				restrict: { type: 'boolean', },
 				input: { type: 'boolean', suffix: `enable`, },

views/styles.css

@@ -41,6 +41,10 @@
 	margin: 7px;
 }
 
+.pref-description p {
+	margin: .5em 0;
+}
+
 .pref-name-id {
 	font-size: 125%;
 	user-select: text;