From df2080b21c81b058ef70e359051cec419abe144e Mon Sep 17 00:00:00 2001 From: Niklas Gollenstede Date: Sun, 6 May 2018 16:02:31 -0500 Subject: [PATCH] minor UI update --- background/badge.js | 4 ++-- background/local/index.js | 13 +++++++++++-- background/parser.js | 4 ++-- background/web/index.js | 4 ++-- common/options.js | 11 ++++++++--- views/styles.css | 4 ++++ 6 files changed, 29 insertions(+), 11 deletions(-) diff --git a/background/badge.js b/background/badge.js index 90b4f58..aee3bea 100644 --- a/background/badge.js +++ b/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!` diff --git a/background/local/index.js b/background/local/index.js index fb09dac..701b2dc 100644 --- a/background/local/index.js +++ b/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]) ); } diff --git a/background/parser.js b/background/parser.js index f60147e..bbc771d 100644 --- a/background/parser.js +++ b/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); diff --git a/background/web/index.js b/background/web/index.js index 4b810a3..48f2816 100644 --- a/background/web/index.js +++ b/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(); diff --git a/common/options.js b/common/options.js index 80a4d17..9aa197c 100644 --- a/common/options.js +++ b/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 userCrome.css/userContent.css files can be edited through the Style Editor in the Browser Toolbox (Ctrl + Shift + Alt + I) or the page inspector on about:-pages.
- Firefox applies changes made there after a short delay, and when saving (Ctrl+S), writes the new files to the disc. - As an experimental feature, ${manifest.short_name} can detect these on-disc changes and map them back to the original (local) style files.
+ description: `

To develop chrome styles without restarting the browser after every change, the corresponding sections in the userCrome.css/userContent.css files can be edited + through the Style Editor in the Browser Toolbox (Ctrl + Shift + Alt + I) for the main UI or the page inspector on about:-pages.
+ Firefox applies changes made there after a short delay, and when saving (Ctrl+S), writes the new files to the disc.

+

As an experimental feature, ${manifest.short_name} can detect these on-disc changes and map them back to the original (local) style files.
+ ${manifest.short_name} is only able to map chages made within the code block of existing @document 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 userCrome.css/userContent.css files are saved.

Activate at your own risk and always make backups!`, + expanded: false, default: false, restrict: { type: 'boolean', }, input: { type: 'boolean', suffix: `enable`, }, diff --git a/views/styles.css b/views/styles.css index ce3635c..242fe39 100644 --- a/views/styles.css +++ b/views/styles.css @@ -41,6 +41,10 @@ margin: 7px; } +.pref-description p { + margin: .5em 0; +} + .pref-name-id { font-size: 125%; user-select: text;