Browser-sync: "File changed" HTML notification no longer appears after upgrading browser-sync version

[ibc]

Issue details

When changing a CSS file listed into the files array, and having notify: true (default value), the notification about "File changed" does not appear.

I don't remember its exact text, however I'm pretty sure I got it in some earlier versions of browser-sync.

Steps to reproduce/test case

Just include a CSS file into the files array of the object given to browserSync(), open the web and later edit and save such a CSS file.

Please specify which version of Browsersync, node and npm you're running

• Browsersync: 2.22.0
• Node: 8.1.2
• Npm: 5.6.0

Affected platforms

• [ ] linux
• [ ] windows
• [x] OS X
• [ ] freebsd
• [ ] solaris
• [ ] other _(please specify which)_

Browsersync use-case

• [ ] Gulp

for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync

const browserSync = require('browser-sync');

gulp.task('livebrowser', (done) =>
{
    browserSync(
        {
            open      : 'external',
            host      : 'mylocaldomain.org',
            server    :
            {
                baseDir : 'out'
            },
            https     : true,
            notify    : true,
            ghostMode : false,
            files     : path.join('out', '**', '*')
        });

    done();
});

[shakyShane]

@ibc Please see the last bullet point here https://github.com/BrowserSync/browser-sync/releases/tag/v2.23.0

The behaviour was changed as it seemed to cause some problems, along with getting in the way of everything behind it.

Do people really want the overlay?

[ibc]

The overlay was useful for me since I have lot of debugging logs in my console and sometimes, when the CPU usage is high (WebRTC), it takes long for a single CSS change to fire a CSS reload.

I can live without it (I hope), although a configuration option would be great.

[evgeniy-vashchuk]

I spent several hours searching for a reason, missing notice when changing css (when changing js, html - notifications are displayed) before I found it issue here...

For me, these notifications were very useful, and the console output dirty debugging, and in general it looks dirty ...

If possible, return the opportunity to re-enable notifications!

[johnfisherman]

I'd like to also state that this is an important feature for me, and that it pains me it's now gone missing.

I code a lot of CSS and sometimes experiments won't work. Since I'm compiling my SASS with compass in real time, and like @ibc this takes a while, I'm sometimes at loss on whether my changes didn't work, or are still kicking in.

So +1 for the return of this feature. :)

[ibc]

Completely agreed. Sometimes it takes so long for the CSS changes to become effective (it depends on how busy the CPU is, whether SASS or similar is being compiling the CSS, etc.

Having this as an optional setting would be great.

[jaclyntan]

I have just realised this was an intended change - several releases ago. :|

Please reconsider making the notification overlay an option - it was so handy for me to know at a glance that the page has updated. I styled my notification so it was just a tiny box in the bottom corner - it doesn't have to be a huge ass modal. Having instant feedback without having to look specifically at the user messages tab in my console helps me code so much faster :(