1550836 - Redesign the Reader Mode to match the photon design

Status: RESOLVED FIXED

(Toolkit :: Reader Mode, enhancement)

Description

[akshitha shetty]

Attachment: Present UI of Reader Mode

Steps to reproduce:

1. Enter reader view

Present UI:

The present UI of the Reader mode is as shown in the Screenshot. This aim of this bug is redesign it as per https://mozilla.invisionapp.com/share/87N9YQYCTJZ#/screens/315073983.

This involves:

1. Getting all the design aspects not covered in the present mockup.
2. Coding the UI as per the finalized mockup.

Comment 1

[akshitha shetty]

Attachment: Bug 1550836 - update the Reader Mode design for photon

Reader mode - UI Redesign - toolbar

Comment 2

[:Gijs (he/him)]

In the new design, if you change the content width, the popup shifts horizontally, meaning the button moves out from under the mouse. So if you want to increment/decrement the content size more than a few steps, you need to keep moving your mouse to hit the button. This is very annoying. Is there some way we can adjust the design so this doesn't happen?

Comment 3

[Abraham Wallin]

@gijs, agreed that can be an annoying interaction. My thought is we should set a fixed width for the menu. As there's no customization and the buttons are limited in number a fixed doesn't have many downsides that I can see. Thoughts?

Comment 4

[:Gijs (he/him)]

(In reply to Abraham Wallin from comment #3)

@gijs, agreed that can be an annoying interaction. My thought is we should set a fixed width for the menu. As there's no customization and the buttons are limited in number a fixed doesn't have many downsides that I can see. Thoughts?

That sounds fine to me; I think it simplifies the patch. I guess we'd want to use the same size as the default width for the article text in reader mode?

Comment 5

[Abraham Wallin]

Yes, same as default width for the article is perfect.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6fc14c4bc2ea
update the Reader Mode design for photon r=Gijs

Comment 7

[Dorel Luca [:dluca]]

Backed out changeset 6fc14c4bc2ea (bug 1550836) for Browser-chrome failures in static/browser_all_files_referenced.js. CLOSED TREE

Log:
https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=301916207&repo=autoland&lineNumber=3349

Push with failures:
https://treeherder.mozilla.org/#/jobs?repo=autoland&group_state=expanded&revision=6fc14c4bc2ea70389aee5727c37224761ec78261

Backout:
https://hg.mozilla.org/integration/autoland/rev/ca4eedeeda8d285a4e0dc86918048c47f0615675

Comment 8

[:Gijs (he/him)]

I've fixed the failures in static/ tests and have queued this for relanding.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1281f97e9ddd
update the Reader Mode design for photon r=Gijs

Comment 10

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/1281f97e9ddd

Comment 11

[Viney Dhiman]

Is there any way to revert the changes ???

Comment 12

[:Gijs (he/him)]

(In reply to Viney Dhiman from comment #11)

Is there any way to revert the changes ???

No. Can you elaborate on why you would want to do so? Feedback can help improve things for everyone, instead of "just" going back to the previous design.

Comment 13

[Abraham Wallin]

@akshitha @Gijs reader mode is looking great. Thanks for making this happen.

Comment 14

[Viney Dhiman]

(In reply to :Gijs (he/him) from comment #12)

(In reply to Viney Dhiman from comment #11)

Is there any way to revert the changes ???

No. Can you elaborate on why you would want to do so? Feedback can help improve things for everyone, instead of "just" going back to the previous design.

Just asking, because lota of reader on my site asking to do so.

Comment 15

[:Gijs (he/him)]

(In reply to Viney Dhiman from comment #14)

Just asking, because lota of reader on my site asking to do so.

What's a lot? I'm quite surprised because this has only just made it to nightly. Is there any more constructive feedback about why they don't like the new layout?

Comment 16

[Jj Del Carpio]

I'd be curious on understanding the reasons to move the toolbar from the side (with lots of unused available space) to a top toolbar reducing valuable reading vertical real state?
I can see it on the top as described for narrow layouts, but when the viewport is wider than the reading column, there's plenty of space to have it on the side.

I find the semi transparency distracting rather than the text just scrolling up away, sometimes some horizontal bar or button will fall in place behind the semi transparent toolbar and make me look again because it seemed like a new UI element showed up on it because of some action I took.

Comment 17

[BelFox]

I did some tests in Nightly and also find that the semitransparent toolbar (while having a nice animation) is rather distracting. IMHO, having the toolbar and settings on the left improves readibility. See my mock-up in bug 1637652 for a comparison.

Personally, I find the radio buttons and borders a bit old-fashioned compared to the old Reader Mode, but maybe they are needed for accessibility or Photon compatibility reasons? And it's a matter of personal taste, I guess.

Keep up the good work guys! Firefox FTW!

Comment 18

[Spazturtle]

Is there any need to have the 'Sticky Menu'?

Why not have the menu completely hidden when people scroll down and then show it again when people scroll up any amount like the URL bar on Firefox mobile.

Comment 19

[Abraham Wallin]

One of the goals for the redesign was making the features (Type control, Listen, and Save to Pocket) more visible as our research showed these we're often missed. There's a balance to making people aware of these while maintaining a clean and distraction free reading environment.

@Gijs can we slide the menu away when scroll down begins and then slide it back in on scroll up?

Comment 20

[Panos Stokas]

I am using Reader mode for many years. I have installed Firefox for other users for this particular feature.

This change is not welcome at all in screens with a horizontal/vertical ratio > 1. Vertical space is essential in reading long documents as it allows precious context to be seen in one page.

One of the goals for the redesign was making the features
(Type control, Listen, and Save to Pocket) more visible as
our research showed these we're often missed.

That's true and most users are not aware of these functions. However, you can still point to them at the first run or you can simply enlarge the current vertical toolbar to fit text descriptions of these buttons.

Reducing vertical space in Reader mode for this purpose is worse than the problem itself.

Comment 21

[:Gijs (he/him)]

(In reply to Abraham Wallin from comment #19)

One of the goals for the redesign was making the features (Type control, Listen, and Save to Pocket) more visible as our research showed these we're often missed. There's a balance to making people aware of these while maintaining a clean and distraction free reading environment.

@Gijs can we slide the menu away when scroll down begins and then slide it back in on scroll up?

I responded in bug 1637652, let's discuss it further there.

Comment 22

[Pascal Chevrel:pascalc (PTO until April 26)]

That change probably needs an addition to our release notes. Any suggestion for the wording?

Comment 23

[msd+bugzilla]

The new reader mode seems to reload the webpage instead of using the actual loaded content.

If I 'm logged on a website with articles behind a paywall, the new reader mode does not display the full article like before, but just the free part.

Is it normal ?

Firefox : 79.0a1 (2020-06-02) (64 bits)

Comment 24

[:Gijs (he/him)]

(In reply to msd+bugzilla from comment #23)

The new reader mode seems to reload the webpage instead of using the actual loaded content.

If I 'm logged on a website with articles behind a paywall, the new reader mode does not display the full article like before, but just the free part.

Is it normal ?

No, this is unrelated to the redesign, it's bug 1640490 which was caused by a back-end change in reader mode's core code to make it fission-compatible. We're hoping to fix that this week.