webextensions / live-css-editor Goto Github PK

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.

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.

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.

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

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

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.

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. :)

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

0. Make sure 'Load for frame/iframe' is enabled in the extension settings.
1. 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.
2. 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.
3. Reload the page. The text in the iframes should be red, but (probably) is not.
4. 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.

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.

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

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

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!

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.

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.

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.

Chrome 60.0.3112.90

Clicking "More Options" - nothing happens

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.

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 )

There's few problems with colors on dark theme

1. 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.
2. Scrollbar color - it's too dark. sometimes i need to squeeze my eyes just to find the thingy :)
3. 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?

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

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

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.)

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

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

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:

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

1. 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.
2. 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:
3. 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:

1. 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.
2. (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.)

Two things:

1. 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.
2. Can you add option to "remember" that module should be opened in external window?

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.

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

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

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 ?

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.

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

"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?

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'.

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.

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.

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.

title ^

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 !!

Recording #4.zip

Hello,

1. 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.
2. 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.

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.

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

Thank you

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

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.

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?

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)