Create Reading View Demo

[samuknet]

Create demo which transitions a page from the default view to a specialized reading view, making it easier to read and focus on the main content of the page.

See Safari app reading view for more.

[sole]

Libraries - might work or not!

• https://github.com/mozilla/readability
• https://github.com/luin/readability

Dubious licence status:

• https://github.com/adadgio/safari-reader-js

Warningggg this might not work as a client side library with iframes if you don't have enough privileges, but it could be a browser.html plugin? (options)
A way to circumvent this for the demo is to make readable pages from our own domain.

[samuknet]

• Initial attempts to work with https://github.com/mozilla/readability have resulted in getting a "null" when trying to call the main reading view function.
• Initial attempts with https://github.com/luin/readability didn't work due to several unusual node module errors. These were also some complications getting it to work in the browser. These issues can probably solved though.

[samuknet]

Update:
Things are working well now - https://mozdevs.github.io/servo-experiments/experiments/readingView/.

Some notes on progress:

• As CSS transitioning font size appears not to be working in Servo (Is CSS transition on font-size property implemented? servo/servo#12745), using Tween JS to do this as a work around.
• Issue Hit test on fixed DIV incorrectly offset when page is scrolled servo/servo#12763 is causing a minor usability problem with the 'reading view' button.
• Additionally 3D rotations are not fully implemented in Servo - if these were available the reading view transition would look a lot nicer.
• Fixed issue of original underlying elements not hiding properly by applying a border around the elements to enforce that they disappear as a work around. Issue is likely an incarnation of Asynchronous changes to IFrame visibility property do not cause a change. servo/servo#11891.

[samuknet]

TODO:

• Nastify the fake reading article more, making it look more like an actual article and more busy,more ads, etc. Issue Build more "annoying ad" examples to put in iframes #10
• turn it into The Doge Times. Issue 'Dogeify' Reading View Demo #19

UPDATE:
We are having issues displaying ads in IFrames due to servo/servo#12827 and potentially some other separate bugs.

[sole]

Depends on #10

[samuknet]

Marking as on-hold because of issues when converting into the reading view mode.