Merge pull request #4748 from natrys/reader

Provide hook for basic CSS override for new Reader mode

src/excmds.ts

@@ -6074,6 +6074,17 @@ export async function readerurl() {
  * Use `:reader --old` to use Firefox's built-in reader mode, which Tridactyl can't run on.
  *
  * __NB:__ the reader page is a privileged environment which has access to all Tridactyl functions, notably the native messenger if you have it installed. We are parsing untrusted web-content to run in this environment. Mozilla's readability library will strip out most of these, then we use a sanitation library, `js-xss`, to strip out any remaining unsafe tags, but if there was a serious bug in this library, and a targeted attack against Tridactyl, an attacker could get remote code execution. If you're worried about this, use `:reader --old` instead or only use `:reader` on pages you trust.
+ *
+ * You may use [userContent.css](http://kb.mozillazine.org/index.php?title=UserContent.css&printable=yes) to enhance or override default styling of the new reader view. The `body` of the page has id `tridactyl-reader` and the article content follows in a `main` tag. Therefore to alter default styling, you can do something like this in your `userContent.css`:
+ *
+ * ```css
+ * #tridactyl-reader > main {
+ *   width: 80vw !important;
+ *   text-align: left;
+ * }
+ * ```
+ *
+ * Follow [issue #4657](https://github.com/tridactyl/tridactyl/issues/4657) if you would like to find out when we have made a more user-friendly solution.
  */
 //#content
 export async function reader(...args: string[]) {

src/lib/config.ts

@@ -1290,6 +1290,11 @@ export class default_config {
      * https://fusejs.io/api/options.html#threshold
      */
     completionfuzziness = 0.3
+
+    /**
+     * Whether to show article url in the document.title of Reader View.
+     */
+    readerurlintitle: "true" | "false" = "false"
 }
 
 const platform_defaults = {

src/reader.ts

@@ -1,14 +1,30 @@
-// import * as config from "@src/lib/config"
+import * as config from "@src/lib/config"
 import xss from "xss"
 
-function updatePage(){
+async function updatePage() {
-    const article = JSON.parse(decodeURIComponent(atob(window.location.hash.substr(1))))
+    const article = JSON.parse(
-    article.content = xss(article.content, {stripIgnoreTag: true})
+        decodeURIComponent(atob(window.location.hash.substr(1))),
-    document.body.innerHTML = article.content
+    )
+    article.content = xss(article.content, { stripIgnoreTag: true })
+    const content = document.createElement("main")
+    content.innerHTML = article.content
+    document.body.appendChild(content)
     if (article.title !== undefined) {
         const header = document.createElement("header")
         const title = document.createElement("h1")
-        document.title = [article.siteName, article.title].filter(Boolean).join(": ") // sensible?
+        if (
+            (await config.getAsync("readerurlintitle")) == "true" &&
+            !(article.title ?? "").includes(article.link)
+        ) {
+            document.title =
+                [article.siteName, article.title].filter(Boolean).join(": ") +
+                " :: " +
+                article.link
+        } else {
+            document.title = [article.siteName, article.title]
+                .filter(Boolean)
+                .join(": ")
+        }
         title.textContent = article.title
         header.appendChild(title)
         if (article.byline !== undefined) {
@@ -19,7 +35,9 @@ function updatePage(){
         document.body.insertBefore(header, document.body.firstChild)
     }
     if (article.link !== undefined) {
-        const link = (document.getElementById("tricanonlink") as HTMLLinkElement) ?? document.createElement("link")
+        const link =
+            (document.getElementById("tricanonlink") as HTMLLinkElement) ??
+            document.createElement("link")
         link.rel = "canonical"
         link.id = "tricanonlink"
         link.href = article.link

src/static/css/reader.css

@@ -91,29 +91,22 @@ html {
     scroll-behavior: smooth;
 }
 
-/* Make the body a nice central block */
 body {
     color: var(--text);
     background-color: var(--bg);
     font-size: 1.15rem;
     line-height: 1.5;
-    display: grid;
-    grid-template-columns: 1fr min(45rem, 90%) 1fr;
     margin: 0;
     text-align: justify;
     hyphens: auto;
 }
-body > * {
-    grid-column: 2;
-}
 
 /* Make the header bg full width, but the content inline with body */
 body > header {
     background-color: var(--accent-bg);
     border-bottom: 1px solid var(--border);
     text-align: center;
-    padding: 0 0.5rem 2rem 0.5rem;
+    padding: 2rem 0.5rem 2rem 0.5rem;
-    grid-column: 1 / -1;
 }
 
 body > header h1 {
@@ -126,9 +119,10 @@ body > header p {
     margin: 1rem auto;
 }
 
-/* Add a little padding to ensure spacing is correct between content and header > nav */
+body > main {
-main {
     padding-top: 1.5rem;
+    width: min(45rem, 90%);
+    margin: auto;
 }
 
 body > footer {

src/static/reader.html

@@ -8,7 +8,7 @@
         <link rel="stylesheet" href="css/hint.css">
         <link rel="stylesheet" href="css/viewsource.css">
     </head>
-    <body>
+    <body id="tridactyl-reader">
     </body>
     <script src="../content.js"></script>
     <script src="../reader.js"></script>