1472486 - After saving a reader mode page to disk as "web page, complete", the result doesn't show content due to CSP and inline CSS

Status: RESOLVED DUPLICATE of bug 1480934

(Toolkit :: Reader Mode, defect, P3)

Description

[felixvs]

Attachment: Attached image file demonstrates what the rendering of the page with 'invisible content' looks like.

URL i want to be able to read as a local web page on my filesystem, in the formatting available through the Reader View (Firefox) component's styling: https://www.webdevdiaries.com/2017/07/02/zero-configuration-js-builds/

steps I did to save the file in two variations: (1) Right-click on web page, Save Page [all variations of: Web Page complete, Web Page HTML only, HTML only, All Files], render the resulting file with FF. notice there is no 'Reader View button' when i visit this resource. so I try prepending string 'about:reader?url=', and visit this new URL. web page looks like in Reader View formatting, but content is invisible.
(2) click on 'Reader View button', right-click on web page, Save Page, render the resulting file with FF. rendered web page is in Reader View formatting, but again content is invisible.

That said, other web browser does not have invisible content from the resulting web pages(tested with Chromium), only Firefox has this issue.

Two quick independent fixes i was able to discover with help from community members on IRC servers Freenode and irc.mozilla.org:
(1) modify the HTML file of the web page: remove the <meta> element with html-equiv property of value 'Content-Security-Policy'
(2) modify the aboutReader.css file downloaded into the directory of the web page: remove the assignments of 'display: none' from the entire file.

These quick fixes may give hint to how to change the code of Reader View such that the issue is solved entirely, without the necessity of modifying the saved HTML/CSS files.

Feel free to contact me at the provided email address, regarding this issue.

--felixvs

Comment 1

[:Gijs (he/him)]

Hm. Unfortunately The "save page" code is completely generic and independent of the reader mode code. It has no idea what reader mode does or how to modify anything.

Looking at the moving parts, I guess we could potentially fix this by no longer relying on `.style.display = block` in the code in AboutReader.jsm ( https://dxr.mozilla.org/mozilla-central/rev/23885c14f025b61bb74d85845ac4018f05eb39f8/toolkit/components/reader/AboutReader.jsm#833 , and all other cases in showContent() ) to unhide things, and use a class instead.

Comment 2

[:Gijs (he/him)]

Hm, let me make this a mentored bug. It should be reasonably straightforward to fix - we should be able to change all the (2) instances in  the `_showContent(article)` method that use `[element].style.display = "block"` to instead use `[element].classList.add("shown")` and then add a `.shown` selector in the aboutReader.css files ( https://dxr.mozilla.org/mozilla-central/source/mobile/android/themes/core/aboutReader.css and https://dxr.mozilla.org/mozilla-central/source/toolkit/themes/shared/aboutReader.css ) to force these items to show up. If we add the new rule at the end, it will override the other rules that currently hide these items once the class is added. The class looks like it should be successfully persisted by saving the page via `save page as`.

As a bonus, we could remove the `_hideContent` method in AboutReader.jsm (it's unused).