Chrome flickers on CSS update

[shahabl]

Editing a CSS file will cause Chrome to flicker, if you use the code in
https://github.com/shahabl/brackets-livedev2/blob/feature/css/protocol/remote/MoreRemoteFunctions.js#L56-59
or if you comment out the above section and enable
https://github.com/shahabl/brackets-livedev2/blob/feature/css/protocol/remote/MoreRemoteFunctions.js#L65-71
If you comment out both sections (and just keep the line for firefox, Chrome will not repaint the window automatically, but it will repaint when you move the mouse over the window (tried on Windows 7).
@njx, @dangoor, @busykai, @sebaslv please let me know if you have any suggestions

[busykai]

i was looking exactly at this issue. it seems like if you replace href and then (for chrome only) do window.scrollBy(0, 0), then it would make Chrome to rerender. Entire impl looks like:

        function updateCSS(url, link) {
            link.href = url + "?count=" + reloadCSSCounter;
            if (!!window.chrome) {
                window.scrollBy(0, 0);
            }
        }

[shahabl]

I've tried this (and similar tricks), nothing has worked so far (at least on my Windows system).

[busykai]

Well, I have a working version. Windows 7 with Firefox 29.0.1 and Chrome 35.0.1916.11.

[shahabl]

I have 'almost' the same version of Chrome. I've added some test files to this branch. You can edit one of the css files. What I've seen with this and a couple of similar methods is that as you edit the file, the preview on Chrome is one step behind. For example you can change the height of a button in the editor and nothing happens in the browser, then if you type and add a space somewhere, the browser shows the updated button! I even tried calling the function twice, but it did not work. I'll try more, there might be a way of hacking or making it to work.

[busykai]

Not quite what I'm seeing. Chrome does update fraction of second later than Firefox. I'll try again tomorrow and let you know. Need to install some other WebKit-based browsers as well... What are other methods you tried?

[shahabl]

I tried:
window.focus()
window.scrollTo(x,y)
screen.width
document.body.style.display
document.body.style.webkitTransform='scale(1)'
document.body.classList.add() // and remove

basically just throwing stuff to see if Chrome would re-render

From: busykai [mailto:notifications@github.com]
Sent: Wednesday, June 11, 2014 5:14 PM
To: shahabl/brackets-livedev2
Cc: Layeghi, Shahab
Subject: Re: [brackets-livedev2] Chrome flickers on CSS update (#4)

Not quite what I'm seeing. Chrome does update fraction of second later than Firefox. I'll try again tomorrow and let you know. Need to install some other WebKit-based browsers as well... What are other methods you tried?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4#issuecomment-45816449.

[sebaslv]

@shahabl, after trying some of the things you mentioned, I did a quick experiment based on sending the entire text of the stylesheet and creating a new style node at the browser side instead of sending url and reloading it. It looks that it can be an alternative (if there is no easier way to avoid flickering by reloading). See some prototyping below. I tried it by using quick edit for changing colors or changing font sizes and can't see any flickering, the experience is very similar to live editing embedded styles tags. I also tried by modifying an imported stylesheet and sending the code of the parent stylesheet, it worked but still there is some side effects when removing the previous node, it needs more work here.
I'm not sure there could be some other side effects but probably are (eg. what happens if stylesheets are too big, or with long live editing sessions, etc.). BTW, it just looks as a potential alternative that you can take into account, it needs more work to see if it can cover all the cases and you already have been working with.

 A.prototype.reloadCSS = function reloadCSS(url, text) {
        var i, 
            node;

        var head = document.getElementsByTagName('head')[0];

        var s = document.createElement('style');
        s.type = 'text/css';
        s.appendChild(document.createTextNode(text));            

        // ugly identification of the new and previous injected nodes
        reloadCSSCounter++;
        s.id = url + '_lv_' + reloadCSSCounter;

        for (i = 0; i < document.styleSheets.length; i++) {
            node = document.styleSheets[i];                
            if (node.href === url) {            
                head.appendChild(s);
                node.disabled = true;
                console.log('creating');
            }

            // ugly way of removing the previous node
            if (node.ownerNode.id === url + '_lv_' + (reloadCSSCounter - 1)) {
                node.ownerNode.parentNode.removeChild(node.ownerNode);
                return;
            }
        }
    };

[shahabl]

Thanks Seba. As you pointed out bringing in the css prevents the flickering issue. The imported files need to be handled properly (go up the chain and expand all). I'm not sure if it can cause some problems as you mentioned, but we might have to do it this way as a last resort, .