backwards compatibility

README.md

@@ -78,3 +78,8 @@ When activated, the `Style` sorts through it's `Section`s and detects weather ea
 
 Every `.js` or `.html` file or folder with a `index.js` or `index.html` in the `/views/` folder will implicitly result in a extension page available as `...-extension://.../reStyle#<folder/file name without ext>`.
 The scripts themselves are loaded in the background context and must export a function that will be passed the `window` of the visible page when one with the matching `#`-name is opened.
+
+
+##  AMO code review notes
+
+The exact version of the included YAML parser is <https://github.com/jeremyfa/yaml.js/blob/v0.3.0/dist/yaml.min.js>.

background/normalize-meta.js

@@ -133,7 +133,7 @@ return function normalize(sheet, url) { {
 						} break;
 
 						case 'css-selector': case 'css-selector-multi': {
-							option.type = entry.type === 'css-selector' ? 'string' : 'code';
+							option.input.type = entry.type === 'css-selector' ? 'string' : 'code';
 							option.restrict = { match: {
 								exp: rSelector, message: `The value may not be empty, end with a ',', contain unescaped ';', '{' or '}' or end within strings or comments`,
 							}, custom: balancedBrackets, };

background/parser.js

@@ -191,8 +191,9 @@ function Sheet_fromCode(css, { onerror = error => console.warn('CSS parsing erro
 	const metaBlock = globalTokens.find(token =>
 		(/^\/\*[*!]*\s*==+[Uu]ser-?[Ss]tyle==+\s*?\n/).test(token)
 	); if (metaBlock) {
-		try { Object.assign(meta, YAML.parse(
-			metaBlock.replace(/^.*\n|\s*\*\//g, '').replace(/^ ?\*? ?/gm, '') // strip comment frame
+		try { Object.assign(meta, YAML.parse(metaBlock
+			.replace(/^ \* @([\w-]+)( |$)/gm, (_, key, inline) => ' * '+ key +': '+ (inline || key !== 'description' ? '' : '|')) // transform `@<key>` to `key:` (backwards compatibility)
+			.replace(/^.*\n|\s*\*\//g, '').replace(/^ ?\*? ?/gm, '') // strip comment frame
 		)); } catch (error) { onerror(error); }
 	} else {
 		const where = globalTokens.slice(0, 5).concat(sections[1] ? sections[1].tokens.slice(0, 4) : [ ]);

background/style.js

@@ -120,7 +120,7 @@ const RegExpXu = RegExpX({ unicode: true, noCapture: true, });
 const toRegExp = {
 	urls(raws) { return RegExpXu`^ ${raws} $`; },
 	urlPrefixes(raws) { return RegExpXu`^ ${raws} .*$`; },
-	domains(raws) { return RegExpXu`^ https?:// ( [^/]+\. )? ${raws} ( $ | /.*$ )`; },
+	domains(raws) { return RegExpXu`^ https?:// ( [^/]+\. )? ${raws} ( $ | ( : \d{1,5} )? /.*$ )`; },
 	regexps(raws) { const exps = raws.map(_=>RegExp(_)); return RegExpXu`^ ${exps} $`; },
 };
 

package.json

@@ -26,7 +26,7 @@
 		"es6lib": "0.0.2",
 		"marked": "0.4.0",
 		"multiport": "0.2.3",
-		"native-ext": "0.3.0",
+		"native-ext": "0.3.1",
 		"pbq": "0.3.3",
 		"regexpx": "0.1.4",
 		"web-ext-build": "0.0.9",

views/panel.js

@@ -52,9 +52,10 @@ const url = new global.URL(tab.url);
 /// restart notice
 if (ChromeSytle.changed) { document.body.insertAdjacentHTML('afterbegin', `<div id=restart>
 	<style>
-		#restart { background: #f49f00; padding: 8px; }
+		:root>body { background: #a75300; } /* orange color for the arrow-thing */
+		#restart { background: hsl(29.5, 79%, 58%); } /* filtered #a75300 */
+		#restart { padding: 8px; max-width: 350px; }
 		#restart code { font-size: 120%; }
-		:root>body { background: #a75300; } /* for the arrow-thing*/
 	</style>
 	The UI styles have changed. The browser has to be restarted to apply the changes.<br>
 	You can do that e.g. by prssting <code>Shift</code>+<code>F2</code> and typing <code>restart</code> (then <code>Enter</code>).