Remove Delay & Remember Box Size

[aleemb]

I have been using the Test Styles Bookmarklet for close to some 8 years if not longer. However I recently switched to a Mac and on Google Chrome after a few page reloads the Test Styles popup needs to be closed/re-opened for it to work again.

That's how I came across your wonderful extension. It's absolutely ingenious that it remembers my CSS so I don't have to worry about losing my work. And having a shortcut for it is much more convenient than a bookmarklet.

However, unlike the Test Styles bookmarklet (and Chrome Developer Tools for that matter), this plugin isn't instantaneous. This makes small tweaks quite annoying. I am not sure why the delay is there in the first place, possibly as a debouncer but it gets in the way.

The second annoyance is that the edit window is extremely small. I can resize it but when I reload the page, it goes back to the same size. Writing CSS in a small 3 line editor can be extremely annoying. I typically write a whole bunch of CSS live then clean it up and shift it over to my .css/.scss files and I do a bunch of reloads (after editing HTML) which means I need to resize each time.

Thanks very much!

[aleemb]

It does remember the editor size though, my bad.

[jhubert]

Hi @aleemb. I've been unable to recreate the delay. There definitely it not any intentional delay in the editor. In my chrome window, it pops up in under a second. Does it happen for you on every page or just on specific pages?

[aleemb]

I don't remember exactly but I think it's this 1000ms timer. To be more efficient you could use a debouncer + a keyup event (and an on paste event) and update as needed.

Also I just tried the extension again, it doesn't seem to remember the window size. The default size is also a bit too small to be useful without resizing every time.

[jhubert]

Ah, for some reason I thought you were referring to the opening of the editor not the refresh time.

Yes, there is a 1 second delay in rendering the changes. I believe I originally added it to reduce the load on the browser, but that's probably no longer necessary. I'll look at updating that.

There seems to be an issue in the editor in that it only remembers the box size when the editor is closed by either the [x] button on the editor or the chrome editor icon. If you use the keyboard shortcut or just reload the page, it's not remembered. I'll look into this as well.

Thanks for the feedback! 👍