webextensions / live-css-editor Goto Github PK

View Code? Open in Web Editor NEW

251.0 20.0 57.0 14.75 MB

Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Home Page: https://chrome.google.com/webstore/detail/ifhikkcafabcgolfjegfcgloomalapol

License: MIT License

HTML 1.77% JavaScript 89.75% CSS 7.64% Shell 0.84%

chrome-extension css editor firefox-addon javascript less sass

live-css-editor's Introduction

Live editor for CSS, Less & Sass (Magic CSS)

Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox and Opera.

https://chrome.google.com/webstore/detail/ifhikkcafabcgolfjegfcgloomalapol

https://microsoftedge.microsoft.com/addons/detail/live-editor-for-css-less/ahibbdhoijcafelmfepfpcmmdifchpdg

https://addons.mozilla.org/firefox/addon/live-editor-for-css-less-sass/

https://addons.opera.com/extensions/details/live-editor-for-css-and-less-magic-css/

Live preview of CSS/Less/Sass code changes. Auto-save file, autocomplete, convert Less/Sass to CSS, beautify, minify, CSS reloader, linter, ...

Run this extension and start writing your CSS/Less/Sass code which gets applied immediately. The code you write will be saved in the browser extension's storage space or the site's local storage.

Featuring:

Live editor for CSS/Less/Sass code - Preview changes as you write code
Live edit CSS files and auto-save on file system
CSS reloader
Option to reapply styles automatically
Syntax Highlighting
Auto-generate CSS selectors with point-and-click
Autocomplete for CSS selectors, properties and values
Emmet support helps in quickly expanding abbreviations to CSS code (https://docs.emmet.io/css-abbreviations/)
Color picker (supports HEX, RGB, RGBA, HSL and HSLA)
Convert code from Less/Sass to CSS
Beautify / Format code
Minify code
Highlight DOM elements matching the CSS selectors
Option to load this extension in iframes as well
Lint CSS code

Open source:

https://github.com/webextensions/live-css-editor

This extension is available for:

Google Chrome
Microsoft Edge
Mozilla Firefox
Opera

Visit https://webextensions.org/ for further details

Created by:

Priyank Parashar

Uses:

No need to refresh pages to test your CSS/Less/Sass code
Auto-save your changes to filesystem as you write the code
Reload CSS resources without refreshing the page
Speed-up development and testing of your styling code by doing it directly on your page
Develop and test your code before finalizing your changes into the project files
Apply some temporary styles (like hiding some components)
Test styling changes even when you cannot modify the original source code

Notes:

The CSS/Less/Sass code you write gets applied as you write it
The CSS reloader watches CSS files and live updates them immediately
With this styling code tester, you can develop and test the code at the same time
The code is saved in browser/file as soon as you write it
The code editor is resizable and draggable
The code you write is auto-saved at site level and can be used again for same or different pages
You can use "TAB" key to indent your code
Running Magic CSS again, while it is already loaded, will restore it to its original position and size
Press "Esc" or click on close to hide it and run it again to continue making changes
The code you write is added at the bottom of the <body> tag of the active page
It includes CSS/Less/Sass beautifier
It includes CSS minifier
It highlights the DOM elements matching the CSS selectors
Use it along with your favorite Chrome/Edge/Firefox/Opera Developer tools
You might find it useful in creating your custom themes for websites based on Stylish / Stylist
This extension was previously known as "MagiCSS - Live CSS Editor"

Credits for open source code used by this extension:

Amplify JS
Browserify
Code Mirror
codemirror-colorpicker
emmetio/codemirror-plugin
CSS Pretty
CSSLint
jQuery
jQuery UI
Less
magicsuggest
Mozilla Source Map
SASS / SCSS
socket.io (WebSocket API library)
Tooltipster

Inspirations:

"Auto-generate CSS selectors with point-and-click" feature is partly inspired by the Chrome extensions SelectorGadget and Stylebot

Author:

Priyank Parashar - GitHub | Twitter | LinkedIn

Connect with us:

live-css-editor's People

Contributors

Stargazers

Watchers

live-css-editor's Issues

Can't Copy-paste inside editor

Try to select some code, then press Ctrl-C Ctrl-V - it doesn't work!
Ctrl-Z (undo) doesn't work too

Firefox addon cannot be found

"Oops! We can’t find that page"
https://addons.mozilla.org/en-CA/firefox/addon/live-editor-for-css-less-sass/

Does not appear via search for "live css" within the Addons page either anymore.
Cannot seem to find it - not possible to install anymore?
What happened here?

Styles aren't applied until editor opening

Saved styles being applied only after click on extension icon. As Live-CSS-Editor is a best replacement for "Stylebot" extension, having "apply custom CSS before page load" option would be very useful and highly appreciated.

Weird issues related to selecting/copying/pasting text sometimes

As reported by @TheoKondak in extension review

Been using this plugin for about 4 years now. It helped me write code much much faster, cleaner. The fact that it allows me to write SCSS on the fly is also amazing.

The only issue that I face, is while developing smaller screens. The plugin starts behaving a bit wierdly, you can't copy/paste via shortcuts, you can't select all your code to copy if it's too long, and stuff like that. My guess is that these technical difficulties are inherent to the approach the plugin has by being part of the DOM. The new approach, that the plugin opens in a new window solves this downside. I wish it can support SCSS too in the future. That would be super awesome.

@TheoKondak
In near future, SASS / SCSS support would also come for external editor.

In this issue, can you provide the steps to reproduce the problems in selecting/copying/pasting text ?

add support for stylus language

My company uses https://stylus-lang.com/ and I really want to be able to use this tool at work. This tool has changed the way I write code. It's unbelievable. It turns Chrome into a word processor practically.

cursor becomes very large in css editor on some web sites - how can I reset it to normal small size?

Not working on private network

I have installed this extension on a browser within a private network (no connection to the internet). It is not working. Should I expect it to work? Does it require internet access? (I have installed it successfully on a public network). Thanks.

Firefox version seems to be broken

The re-released Firefox version seems to be broken. When I press the add-on button, a loading message appears, but no editing window appears.

The #topCenterAlertNote is inserted into the html as many times as the button is pressed.

Version: 8.10.1

Writing replaces text instead of moving it to the right

Recording #4.zip

Reload?

Two things:

Is there possiblity to reload current page WITHOUT reloading module(external window)? It would be really helpful in cases which i need to change html structure of the page.
Can you add option to "remember" that module should be opened in external window?

[bug] Styles can target the extension window itself - including display:none

I was adding a div selector to a rule with display: none applied. Before I got a chance to specify an id, the display attribute kicked in and hid everything on the page--including the extension window itself.

I was able to use Chrome DevTools to bring the window back so I could fix the style, but in general, I think it would be good if the code editor window could be made immune to styles originating within itself that would hide the editor or otherwise render it unusable. (display: none; visibility: hidden; opacity: 0; pointer-events: none; positioning it off-screen; z-index-ing it below other objects; etc.)

Syntax Highlighting feature.

Hi,
I have been working with this tool for a long time, and It will be really awesome if we can make the tool showing the default CSS block of the selected element of the page in that small window better than going to browser inspecter every time?

I really wish if the team have a planning behind this feature! keep it up !!

Feature Request(s) - Dark Mode Support

A) Support for a different extension icon color for use with dark web browser themes (black icon is almost invisible when using a dark browser theme).

B) Support for some different theme editor styles (e.g. Ambiance, Chaos, Chrome, Clouds, Clouds Midnight, Cobalt, Crimson Editor, Dawn, Dracula, Dreamweaver, Eclipse, GitHub, Green on Black, Gruvbox, idle Fingers, IPlastic, KatzenMilch, krTheme, Kuroir, Merbivore, Merbivore Soft, Mono Industrial, Monokai, Nord Dark, Pastel on dark, Solarized Dark, Solarized Light, SQL Server, Terminal, TextMate, Tomorrow, Tomorrow Night, Tomorrow Night 80s, Tomorrow Night Blue, Tomorrow Night Bright, Twilight, Vibrant Ink, Xcode )

"Option to reapply styles automatically" not obvious

The docs say "Option to reapply styles automatically" but I don't see this anywhere in the Opera extension.

Magic CSS doesn't accept input in devtools responsive mode in Chrome

First off, amazing extension. Such an indispensable part of my workflow now, thanks so much for creating it!

After working perfectly in Chrome's mobile responsive preview mode since as long as I've been using it, today I started noticing that it doesn't accept keyboard input anymore on mobile mode on these Chrome builds:

Chrome Version 60.0.3112.101 (Official Build) (64-bit)
Chrome Canary Version 62.0.3194.0 (Official Build) canary (64-bit)

Sometimes input is accepted initially, but stops after changing tabs.

Alt+Shift+S: In CSS mode, insert selector always at top-level

Place the text cursor in the middle of CSS code:

Press Alt+Shift+S to select a page element.
Press Enter to use that element.

Expected: The new CSS rule is inserted so that it is syntactically valid.
Actual: The CSS rule is inserted at a point that would be valid for SCSS and SASS and LESS, but not for plain CSS:

Can't apply styles to other extension in overlay

Can't apply styles to other extension in overlay, which appear on all sites. I mean styles appear to some other extension (etc online translate) only at one webpage, where that styles was redefined. At ohter page redefined styles is not connect.

Cursor doesn't show

Great extension !!!
I can't see the cursor when I'm editing the CSS.

Any clues how can I fix this.
Maybe changing the color of the cursor?

Thank you

Using Chrome Versión 61.0.3163.100 (Build oficial) (64 bits) in Spanish

CSS IDs that start with "hex-code" are not being resolved properly

I have an ID #d21_tooltip, and the the tool thinks it is a color.

Feature request: Option to stay active

There is one huge inconvenience with the "workflow" of using this extension:

Visit a new domain, then click on the Live CSS button, add/paste some default/favourite code into the window and then close the window.
On every reload of that page, and also on any new page opened on the same domain, I have to click again to activate my desired custom CSS code, and then:
I have to close the window that pops up, because these sub-sequent times I just click on the button to activate the code, not to change it.

So on every page reload or new page, there are two unnecessary clicks involved.
When trying to work fast, with lots of new page openings, this drives me nuts.

It would be great with an option to have the custom CSS stay active on all subsequent pages/reloads on each activated domain throughout the same browser session,

Desired behaviour:

Visit a new domain, then click on the Live CSS button, add/paste some default/favourite code into the window and then close the window.
(not needed...) (The CSS code should stay active for each subsequent page reload for that same domain, and any new page loaded on that same domain, throughout the browser session.)

Feature: Add option to change font size and font family in the editor

I want to customize the font used in the editor. I think it would be really nice if there are fields for font-size and font-family in the options.

Suggestion: Space to enter predetermined variables?

It would be fantastic to allow a settings location for pre-determining variables for SASS. I do theming for several websites where i use the same variables, to be able to have those readily available before I start tweaking code would be a HUGE timesaver. Just a thought. Thanks for a great product!

Shortcut Does Not Work Second Time

Just discovered this in replacement of a different Live CSS Editing Extension. So good to finally have code completion.

I, however, found that the shortcut apparently only works two times. First to activate the extension first. And then it deactivates the code. But then it doesn't do anything any more 🙈.

Hope to see further improvements on this. It's an amazing tool.

Thanks,

Chris

Small bug for Firefox

There is a "small" bug in the Firefox version that prevent the addon from being installed in some configuration and sadly I have one of those setup.

The error is in the "manifest", usually it's an ID missing that can prevent the addon from being installed but this time it's more "complicated" so here's the message from the console:


          12:16:29,373 1498580189373	addons.webextension.<unknown>	WARN	Loading extension 'null': Reading manifest: Error processing background.persistent: Event pages are not currently supported. This will run as a persistent background page.
12:16:29,381 1498580189380	addons.webextension.<unknown>	WARN	Loading extension 'null': Reading manifest: Error processing offline_enabled: An unexpected property was found in the WebExtension manifest.
12:16:29,381 1498580189381	addons.webextension.<unknown>	WARN	Loading extension 'null': Reading manifest: Error processing optional_permissions: An unexpected property was found in the WebExtension manifest.
12:16:29,444 1498580189443	addons.xpi	WARN	Failed to remove temporary file C:\Users\Michel\AppData\Local\Temp\tmp-rkk.xpi for addon https://addons.mozilla.org/firefox/downloads/latest/live-editor-for-css-and-less/platform:5/addon-807942-latest.xpi?src=dp-btn-primary: [Exception... "Component returned failure code: 0x80520015 (NS_ERROR_FILE_ACCESS_DENIED) [nsIFile.remove]"  nsresult: "0x80520015 (NS_ERROR_FILE_ACCESS_DENIED)"  location: "JS frame :: resource://gre/modules/addons/XPIProvider.jsm :: removeTemporaryFile :: line 5525"  data: no] Stack trace: removeTemporaryFile()@resource://gre/modules/addons/XPIProvider.jsm:5525 < onStopRequest/<()@resource://gre/modules/addons/XPIProvider.jsm:6505 < Handler.prototype.process()@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:935 < this.PromiseWalker.walkerLoop()@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:813 < this.PromiseWalker.scheduleWalkerLoop/<()@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:747
12:16:29,445 1498580189445	addons.xpi	WARN	Download of https://addons.mozilla.org/firefox/downloads/latest/live-editor-for-css-and-less/platform:5/addon-807942-latest.xpi?src=dp-btn-primary failed: Error: Cannot find id for addon C:\Users\Michel\AppData\Local\Temp\tmp-rkk.xpi (resource://gre/modules/addons/XPIProvider.jsm:5690:19) JS Stack trace: loadManifest/<@XPIProvider.jsm:5690:19 < [email protected]:319:42 < [email protected]:932:23 < [email protected]:813:7 < this.PromiseWalker.scheduleWalkerLoop/<@Promise-backend.js:747:11
12:16:29,467 1498580189466	addons.xpi	WARN	Failed to remove temporary file C:\Users\Michel\AppData\Local\Temp\tmp-rkk.xpi for addon https://addons.mozilla.org/firefox/downloads/latest/live-editor-for-css-and-less/platform:5/addon-807942-latest.xpi?src=dp-btn-primary: [Exception... "Component returned failure code: 0x80520015 (NS_ERROR_FILE_ACCESS_DENIED) [nsIFile.remove]"  nsresult: "0x80520015 (NS_ERROR_FILE_ACCESS_DENIED)"  location: "JS frame :: resource://gre/modules/addons/XPIProvider.jsm :: removeTemporaryFile :: line 5525"  data: no] Stack trace: removeTemporaryFile()@resource://gre/modules/addons/XPIProvider.jsm:5525 < downloadFailed()@resource://gre/modules/addons/XPIProvider.jsm:6543 < onStopRequest/<()@resource://gre/modules/addons/XPIProvider.jsm:6506 < Handler.prototype.process()@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:935 < this.PromiseWalker.walkerLoop()@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:813 < this.PromiseWalker.scheduleWalkerLoop/<()@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:747

I use Firefox latest ESR 51.1.2 under Windows.

If you need more information just ask me.

Regards

Changes aren't applied after reload until extension is opened

Chrome 58.0.3029.110 (64-bit), Windows 10
If I change the css of a page and reload, changes aren't applied until I open the extension again. There should at least be a configuration that allows that.

BIG BUG ！！！！

when set
div
{
background-color:red !important
}
the background color of the editor view been changed to red too.

So every elements in the editor view should set !important to all styles with style='...',
or put editor view into a new iframe.

We need a STOP button to freeze the page for when we need to edit the CSS of a popup that only shows up when hovered.

title ^

Feature req: Reset rules for the current webpage

Loving this extension so far; I'd like to make a feature request.

Let's say I do something really stupid and set body{display:none} causing everything including the CSS editor to disappear. Ideally I'd want an easy way to remove this property without having to inspect the page.

I'd like to propose that (when active) rules can be disabled temporarily via the right click menu/browser button. Perhaps in addition I could be taken to a different page to edit the CSS externally. I think this would really add a lot to the extension.

All the best,
Ben

"More Options" doesn't work

Chrome 60.0.3112.90

Clicking "More Options" - nothing happens

Feature Request: Persistence across Devices

It would be nice if the css + preference data was retained across devices using chrome.storage or something. Every time I need to make a small change to a website I frequently use I have to update the css across all my devices, which can be time-consuming.

Cannot connect to the local live-css server

I'm having trouble connect to the live-css server as I do from localhost on Mac. I was launching the server as instructed on the prompt window of the web extension however it was only running with http but the extension was looking for https.

I can access the server directly from Chrome after I launched the server on my terminal locally. Below information shown to indicate the live-css dev server is up running under port 3456.

live-css server is available at any of the following addresses:
http://10.249.74.160:3456/
http://127.0.0.1:3456/
http://localhost:3456/

However, on the Settings page of the extension, I got below error as it seems requires my live-css server running under https vs. the http protocol to be accessed by the extension to allow automatic refresh upon every time I reload the target page.

This feature is meant for use during web development. You need to run a development server, called live-css, for using the features "Edit file" and "Watch CSS files to apply changes automatically".
Step 1:
Install Node JS Download Help
Step 2:
Install live-css server Link Help Extra
npm install -g @webextensions/live-css@8
Step 3:
Start live-css server in your project folder
live-css
Step 4:
Enter following details based on previous command's output
Server path: (eg: https://github.com:3456)
https://localhost: 3456
You are not connected. Is live-css server running?

For now, I have to manually click on the icon to apply my hacked css.

Please kindly suggest.

OS：MacOS Catalina v10.15.4
Browser：Google Chrome v81.0.4044.113 (Official Build) (64-bit)
Node JS version：v12.6.1
live-css version: 8.0.3
Site I'm working on：Firm internal website (Altation platform)

Iframe styles aren't applied consistently

The extension does not always load the custom CSS for an iframe automatically (of course with 'Apply styles automatically' enabled). It does load the CSS when I click the extension.
The 'Load for frame/iframe' option in the extension settings is also enabled.

Example

'Apply styles automatically' disabled (= the normal page without custom CSS):

With the option enabled:

Note that the custom CSS applies to the main page, but not to the iframe. (iframe src is from a different domain than the main page)

With the extension opened:

The right frame in the screenshot is an iframe with as origin domain ivwebcontent.telegram.org. The frame at the left is just a text input, not an iframe, and not relevant to this issue.

After some testing I found out that when I load the page, then wait around 20-30 seconds, and then reload, the extension will load the custom CSS for the iframes most of the time.

I am also seeing this error in the console sometimes. I haven't found a correlation between this and the custom CSS being applied, so I'm not sure if it's related.

Steps to reproduce

Make sure 'Load for frame/iframe' is enabled in the extension settings.
Go to https://ivwebcontent.telegram.org/ and write some CSS for it using the Magic CSS extension. In my example I used * { color: red; } for easy testing.
Make sure the 'Apply styles automatically' option is enabled.
Go to https://instantview.telegram.org/contest/nos.nl/template35/issue1/
To verify that the custom CSS should apply to the iframes, click the extension icon to run it. The text of both iframes on the left should become red.
Reload the page. The text in the iframes should be red, but (probably) is not.
Wait ~30 seconds and reload the page again. Again, the text in the frames should be red. I've had mixed results with this - on one device, this worked fairly consistently (css was applied most of the time), on another device it never worked (with the exact same extension settings). Both devices are laptops running Windows 10 + Chrome.

Error: EPERM: operation not permitted

Hi,
This is the error I have. I tried with PowerShell, CMD, Node.js cm, but no difference.

Saved CSS gets removed after creating a new bin at Pastebin.com

Hi, guys! First of all, thanks for this amazing extension! I use it to edit and auto-apply the CSS of many websites.

Now, I'm currently having an issue on Pastebin. I have done a couple edits on the CSS and I have the pin option (Apply styles automatically) checked, as I do with every other site I customize.

But... whenever I create a new bin, my styles are gone.

I have done this a few times... and it happens as soon as I create a new bin.

You can reproduce the issue by going to pastebin.com, entering "#abrpm { display: blue }" for example, navigating some pages, and then creating a new bin. Styles will be gone as soon as you create it.

Entire window moves while trying to select text in editor

Please disable window moving by drag in textarea,
instead of text selection window start to move

CSS rule for background-image also affects the extension

I have defined the following CSS for the current web page:

* {
    background-image: none !important;
}

This also affects the icons of the live-css-editor window:

The icons in the top right corner are not visible anymore. They can still be clicked though.
It took me a while to figure out where I could make the CSS permanent, as I could not see any icons. :)

Suggestion : give the possibility to show the live editor in a separated window

Problem : Live CSS editor show on top of the website you are working on.
In some cases, it takes to much place, and even if you resize it to make it small and push it at the right, bottom, left or right, it hides to much the website you are working on.

Example : you push Live CSS editor at the bottom of your website : when you scroll down at the maximum, you cannot see the footer of your website.

Suggestion : possibility to show it in a separated window or possibility to divide the window in 2, as the native browser web editor does. If you show it in a separated window, and have 2 screens, you can show the website in a screen and the CSS editor in an other.

Uncaught Could not reach server

I'm trying to use the file method with the chrome extension.
But it doesn't seems to work.
I have to insert the server address this way

using http:// after the https://, otherwise it doesn't work, but when i try to select a file to use i got this console error

It's adding the https:// at the start of the request.
Also the live server is only http.... not https

Dark theme colors

There's few problems with colors on dark theme

Comments needs to be a bit brighter, you can almost not see them at all. Comments works as reference in most cases - those needs to be noticable enough.
Scrollbar color - it's too dark. sometimes i need to squeeze my eyes just to find the thingy :)
Unfinished/wrong code color. It's also too dark, many times i don't even know that typo i'm making because of this.

btw. is this some kind of particular set of colors or is it all-custom?

Update copy-files-from-to when https://github.com/webextensions/copy-files-from-to/issues/1 gets fixed

Update copy-files-from-to in package.json and package-lock.json when webextensions/copy-files-from-to#1 gets fixed

This indirectly depends on request/request#2874 to get fixed.

Error: no parsers registered for: "] Spo"

Adding files to watch  ..................................................................................................
Error: no parsers registered for: "] Spo"
    at parse (C:\Users\USER\AppData\Roaming\npm\node_modules\@webextensions\live-css\node_modules\snapdragon\lib\parser.js:473:15)
    at Parser.parse (C:\Users\USER\AppData\Roaming\npm\node_modules\@webextensions\live-css\node_modules\snapdragon\lib\parser.js:477:24)
    at Snapdragon.parse (C:\Users\USER\AppData\Roaming\npm\node_modules\@webextensions\live-css\node_modules\snapdragon\index.js:122:28)
    at Snapdragon.<anonymous> (C:\Users\USER\AppData\Roaming\npm\node_modules\@webextensions\live-css\node_modules\braces\lib\braces.js:40:45)
    at Braces.parse (C:\Users\USER\AppData\Roaming\npm\node_modules\@webextensions\live-css\node_modules\braces\lib\braces.js:66:26)
    at Braces.expand (C:\Users\USER\AppData\Roaming\npm\node_modules\@webextensions\live-css\node_modules\braces\lib\braces.js:87:18)
    at create (C:\Users\USER\AppData\Roaming\npm\node_modules\@webextensions\live-css\node_modules\braces\index.js:142:15)
    at memoize (C:\Users\USER\AppData\Roaming\npm\node_modules\@webextensions\live-css\node_modules\braces\index.js:298:13)
    at Function.braces.create (C:\Users\USER\AppData\Roaming\npm\node_modules\@webextensions\live-css\node_modules\braces\index.js:165:10)
    at Function.braces.expand (C:\Users\USER\AppData\Roaming\npm\node_modules\@webextensions\live-css\node_modules\braces\index.js:81:17)

^^^^ Error ^^^^```

Font Issue Fix

So, on my device (and I presume others, not sure if it's on everyone's) the font doesn't load properly in Magic CSS, defaulting to Times New Roman instead of Monospace. I had the same issue on a style sheet I was making and realized the solution, so it would apply the same here.

For whatever reason, "font-family: monospace" no longer works. The solution is to use "font-family Courier New", which is the actual font that used to get pulled whenever monospace was entered.

I've plugged ".CodeMirror span { font-family: Courier New; }" into Stylish and set it to automatically load on every page, so the issue with Magic CSS is gone for me. It's a good enough solution until it gets fixed in the source.

Issue with scroll

Hi,

i have weird problem with scrolling, which i already mentioned on chrome extensions page, you can see the issue here on video:
https://w3wg.com/2020-10-12%2004-33-21.mp4

The steps to reproduce is simple, just write enough code to make scrollbar appear. No need to copy&paste, it happens every time when there's enough code to scroll.

Technicals:

I'm using chrome x64
Win10/Enterprise x64
It happens only on the specific website
List of active addons on chrome:

i have already tried disabling those, but still no luck.

Drag editor outside of the main browser window

It would be great if you could use the editor outside of the internet browser - like the google DevTools - is that possible?

Thank you

Not working on Edge

After downloading the Edge version (not available in Store btw) as a zip and loading it, when I click on the editor button it does nothing.

Edit list of sites which the extension affects

I'd like to be able to edit the list of sites that a CSS code I make with this extension affects and to use a wildcard.
Because in itch.io I have changed one element, but it only applies to a specific page, not to any page under itch.io.
Example:
If I edit an element of the site username01.itch.io/page, that same element in the site username02.itch.io/page will not be changed. In this case, it would be great if I could use a wildcard in place of 'username' and 'page'.

No window after launching, CSS rules not saved

Hello,

It worked at first after I installed it however later it would show "Loading message..." without window opening or with unreasonable amount of time passing since launching it.
Another issue is that it fails to save CSS rules. The rules get applied, I click the pin button. The message pops up "now you rules will be applied onwards without loading the extension" or smth to the effect however regardless of whether I pin or unpin, the next I time I open the site or the page the rules are gone. I double-checked every setting - it should hold the changes.

does not activate at browser (re-)start

My intent was to use this to remove some unseemly margin-spacing from a few sites to reduce the amount of scrolling needed, but it looks like the add-on must be manually activated in order to have any effect.

Issues / frustration with freeform sizing - possible panel option?

As I said in my review, I love the fact that the editor is freeform so it can be moved, etc, but it can be irritating having to always try to find the right place. Adding the option to either be 1) always on top or even better 2) having it be in panel would fix this. Note, with the panel option, we should have the option of having it be the default too, obviously.

Does that make sense?

Emmets autocomplete

Is it possible to have emmets-based autocomplete? I find myself accidentally writing emmets only to have been disappointed