Etherpad-lite: New FlexLayout / Browser compatibility

[seballot]

We should test it seriously on most possible browser. I guess there are some tools to do that online, if you know some please inform me :)

Also, I think we should add a prefixer in our assets pipeline.
Prefixer convert css rule like display: flex to something like

display: -webkit-box;
display: -ms-flexbox;
display: flex

How the assets pipeline works for now? Where does the css minify takes place? If you could point me the right direction would be nice :)

Please assign to me

[luixxiul]

Maybe it is too late but how about implementing normalize.css? It would definitely break the existing plugins layout so I am not quite if it is right time to do so...

[seballot]

Hi ! thanks but that is different, and I already added it along with refactoring ;)

https://github.com/ether/etherpad-lite/blob/develop/src/static/css/pad/normalize.css

[JohnMcLear]

Note the white bar at the bottom clipping the pad text

Firefox on Windows

[luixxiul]

by the way @JohnMcLear 幸せの肉 = Meat of happiness / Happy Meat 😄 🍖

[muxator]

How the assets pipeline works for now? Where does the css minify takes place? If you could point me the right direction would be nice :)

Have a look at src/node/utils/Minify.js.

That specific part (along with the "peculiar" startup sequence and cache handling) is one of the parts of thecodebase that really show their age.

I won't spend more than a couple of lines on that file. Anything more complex deserves taking the time to tear apart what exists and rebuild on more modern foundations (hopefully without bringing in too much complexity).

It can be a fruitful line of work, indeed.

[JohnMcLear]

by the way @JohnMcLear 幸せの肉 = Meat of happiness / Happy Meat 😄 🍖

Hahah no way I worked in Nagoya and Tokyo for a bit and I never was told this! Japanese politeness I guess! Awesome translation! :P

[JohnMcLear]

@seballot did a number of fixes on this today but we're still not ready for release, most bugs are now in Safari so I gave Sebastian my Saucelabs credentials and he will be able to debug there :)

[muxator]

@JohnMcLear, ack.
@seballot, feel free to close when this is done.

I am working on the other items in the meantime.

[seballot]

Hi ! Thanks @JohnMcLear, saucelabs was quite useful (even it's soooo slooooow !!)

I made some fix, and from my tests new UI works from

Firefox 30 (current 75)
Edge 16 (current 80)
IE -> not working, but etherpad is not working at all, even with old layout
Chrome 49 (current 81)
Safari 9 (current 13)

We are loosing some browser compatibility, old version was working for example with safari 8. But I think it's fine, no?

I also test with mobile emulator, using oldest version proposed each time, and it was working nicely.

Once it's merged and pushed to video.etherpad.com, I will do some final test and close the ticket

[seballot]

Oh and I tried to add css autoprefixer, but was not working... And actually I think it would not have help so much, maybe getting works 2 or 3 old browser version

[JohnMcLear]

Merged, live on video.etherpad.com

[JohnMcLear]

One last bug

If you deny access to the camera, the white pad area ends a significant distance from the text chat column.

[JohnMcLear]

[seballot]

yep this is the comment section

[JohnMcLear]

I think this is more of an ep_webrtc bug?

[JohnMcLear]

okies

[JohnMcLear]

looks closable then :) good job!

[muxator]

I think I hit a nasty bug when importing.

Right now I am not at my PC, I'll post a screenshot asap.

[seballot]

oh yes, content is duplicate in two column, you have the same? quite funny

[seballot]

oh and actually my last commit break something, arf it's because locally even with force refresh, my browser still load css from cache inside the iframe editor, so we can not longer scroll the pad ! Fixed, taking care of import now

[JohnMcLear]

this is hte no scrollbar bug just for ref.

[JohnMcLear]

The import bug =D Can't believe test runner didn't spot that... ;/

[JohnMcLear]

Also after "import now" shouldn't the popup close? Minor issue. Will fix the markdown item in the list..

[seballot]

handleFrameCall: function(directDatabaseAccess, status)
    {
      if (status !== "ok")
      {
        importFailed(status);
      }
      // commenting that line make it works fine...
      // if(directDatabaseAccess) pad.switchToPad(clientVars.padId);
      importDone();
    },

[seballot]

but I wonder if there will be unattended consequences of removing this line?

and for closing the popup, good idea

if (status !== "ok")
      {
        importFailed(status);
      } else {
        $('#import_export').removeClass('popup-show');
      }

[JohnMcLear]

  // if(directDatabaseAccess) pad.switchToPad(clientVars.padId);

directDatabaseAccess is used for .Etherpad file imports.

pad.switchToPad(clientVars.padId); allows the user to import a .etherpad file without forcing a refresh.

directDatabaseAccess should be false for all but .etherpad file imports afaik...

pad.switchToPad should be handling things gracefully.. I can look into why it isn't if you want?

[JohnMcLear]

@seballot for some reason directDatabaseAccess is undefined but returning true... Something wrong here.. Continuing investigations.

[JohnMcLear]

console.log(typeof directDatabaseAccess)
Is returning string, lolwtf.

[JohnMcLear]

      // Server sends a string, not a boolean
      if(directDatabaseAccess !== 'undefined') pad.switchToPad(clientVars.padId);

Is the fix I used for html et al. Will now fix the pad.switchToPad issue

[seballot]

Great thanks ! don't forget to add the line of code to close the popup :)

if (status !== "ok")
      {
        importFailed(status);
      } else {
        $('#import_export').removeClass('popup-show');
      }

[JohnMcLear]

I put a fix together which is ungraceful but works:
https://github.com/ether/etherpad-lite/pull/3915

Ideally import would never refresh the browser but for now it does the job to get 1.8.3 out the door.

[muxator]

Recap, guys:

1. are we thinking of forcing a refresh after an import to bypass the "UI becomes two columns" after an import?
   Edit: let's discuss with the code in front of us: please do not answer here, but on #3915.

2. is this the only CSS/UI bug still lingering, or do we have something else under the radar?

[seballot]

Nop nothing else under the radar for me !

[muxator]

Nop nothing else under the radar for me !

Ok thanks. I am closing this issue, let's focus on #3915.

After solving that one, we have only a documentation change and then we can release :partying_face:

@seballot, would you be ready to work on the website (https://github.com/ether/ether.github.com/issues/30)? Simply updating the screenshots would be more than enough for now.

Edit: what's wrong with Github's autocomplete? I write the number of an issue, and it is completed to another one.