Doesn't work if reading mode is enabled

[LeeBinder]

Hi Mark, Thor.

Latest Firefox for macOS - also tested with latest Waterfox - same thing.

Example: https://www.vox.com/22950915/ukraine-history-timothy-snyder-today-explained

enable reading mode via the little symbol in the far right of the address bar

try to toggle full screen -> nothing happens

quit reading mode, toggle full screen -> OK

Thanks for your extension nevertheless :)

[MarkTiedemann]

Hi @LeeBinder,

I can reproduce the behavior, but don't know how to fix it. Since reader mode is a special built-in page, I'm not even sure it can be fixed.

Best I could come up with is a short JavaScript snippet that will add a "toggle fullscreen" button to the toolbar in reader mode. I'd suggest using it as a bookmarklet.

Hope this helps.

Best regards, Mark

---

(function () {
  let button = document.createElement("button");
  button.onclick = () => {
    if (document.fullscreenElement === null) {
      document.documentElement.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  };
  button.className = "button";
  button.style = "background-image: url(chrome://global/skin/icons/autoscroll.svg); background-size: 16px 16px";
  let toolbar = document.querySelector(".reader-toolbar");
  toolbar.appendChild(button);
})();

[LeeBinder]

thanks @MarkTiedemann - can test it and feedback tomorrow.

[LeeBinder]

Mark, can you please share which step-by-step guide for Firefox I shall follow to successfully add your scriptlet as a bookmarklet all the way to the point that the button appears in the toolbox? I've tried several different guides I found on the web, but as almost always, 100% of all steps need to be 100% known and correct, or else -> fail :(

[LeeBinder]

@MarkTiedemann figured it out:

1. javascript: needs to be in front of your script.
2. What are Bookmarklets? How to Use JavaScript to Make a Bookmarklet in Chromium and Firefox

Also I added a tootip on hover/ mouseOver by adding button.title = "Full Screen"; :)

I'd like to add a different and color inverted background-image icon white on black for dark mode, this one:

Do you have any idea how the path string would need to look like if it was residing in lets say the root of the current profile folder? Or if it need to be "deeper", i.e. in the profile's chrome folder? Tried what seems to be logical, but to no avail.

[LeeBinder]

Figured that out, too: I simply downsized the image to 16 x 16 px (@ 92 dpi to give it some resolution buffer) and converted it to base64. Also I turned the script into a one-liner so it can be pasted into the URL field:

click to expand

```javascript javascript:(function () { let button = document.createElement("button"); button.onclick = () => { if (document.fullscreenElement === null) { document.documentElement.requestFullscreen(); } else { document.exitFullscreen(); } }; button.className = "button"; button.style = "background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAIRlWElmTU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABcAAAAAQAAAFwAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABCgAwAEAAAAAQAAABAAAAAAXXlpsgAAAAlwSFlzAAAOJgAADiYBou8l/AAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAAAgBJREFUOBGVUz2LE1EUfR933EycSURcjdVWK1jZWAqLheWWAQsL13ax9QdYLvgLxEKwMZWFrXY2VgGFRQKyCBF2M9nNzsSdOHkfnhtnwixsEB9c3rnnnnvfx31PTo4ne4poy1mTK6msE2KdKNiLovBNr9fT3W5XYpjhcLgbXY6eSCEzIYRVSrW01u/lOBknwot3R8n4Yxheuuq9pDBc+9DpdL54OBBzAdfv9+/Fcfuu1mTms9lh2Awfta+0N0WSjPchvAPhuQFOVUQdV9xgf7B9epJ+UsJ7Msbc5ACEEYxgmletxIyZgwWwJvONqHFDKKFJSd2uhJgNxKbmLyF4C8eiAB9LmMIEAC01SU9fWmsHpfLC5DJWTVxIpNP0azb99boiefvLMy/JFaCulXAIOost+hX6C+myiORV/yuxVu18HiouLqcmWAnrRxDpSbqT5/kGqxHQK7PKQKUZjUa3six7qObWvCBq3C7jfB//GovLPpue3ffOP0eCP0JXq6Q1rMCY38OiXVUAPBfnHQawOf8bzAmTCsEEMz/6lGce4OD+7QywAuZV2H5zPC/y49i3NCEQS6kfFEXBrbxGRGI2E9+Af3ARaAEXT3kD6ZsGm4PmJ37xlla6SVmafYbwqXNuB2KnlF4PiJ4Bv4LxebmIO/h+8DiKo10Um8A3aP515L39A72T+LJDJNbxAAAAAElFTkSuQmCC); background-size: 16px 16px"; button.title = "Full Screen"; let toolbar = document.querySelector(".reader-toolbar"); toolbar.appendChild(button); })(); ```

Only optic that could be improved is displaying the bookmarklet name as a label next to it immediately on hover analog to the icons above it (Clover reader view, Type controls and List), rather than having the thin title tooltip after a second delay. I quit trying, though, because I'm not time-efficient in JavaScript.

[MarkTiedemann]

Great work, @LeeBinder!

[LeeBinder]

Thanks. Do you have any idea regarding matching the hover label style?

[MarkTiedemann]

Yeah, I added an extra span for that:

javascript:(function () { let button = document.createElement("button"); button.onclick = () => { if (document.fullscreenElement === null) { document.documentElement.requestFullscreen(); } else { document.exitFullscreen(); } }; button.className = "button"; button.style = "background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAIRlWElmTU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABcAAAAAQAAAFwAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABCgAwAEAAAAAQAAABAAAAAAXXlpsgAAAAlwSFlzAAAOJgAADiYBou8l/AAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAAAgBJREFUOBGVUz2LE1EUfR933EycSURcjdVWK1jZWAqLheWWAQsL13ax9QdYLvgLxEKwMZWFrXY2VgGFRQKyCBF2M9nNzsSdOHkfnhtnwixsEB9c3rnnnnvfx31PTo4ne4poy1mTK6msE2KdKNiLovBNr9fT3W5XYpjhcLgbXY6eSCEzIYRVSrW01u/lOBknwot3R8n4Yxheuuq9pDBc+9DpdL54OBBzAdfv9+/Fcfuu1mTms9lh2Awfta+0N0WSjPchvAPhuQFOVUQdV9xgf7B9epJ+UsJ7Msbc5ACEEYxgmletxIyZgwWwJvONqHFDKKFJSd2uhJgNxKbmLyF4C8eiAB9LmMIEAC01SU9fWmsHpfLC5DJWTVxIpNP0azb99boiefvLMy/JFaCulXAIOost+hX6C+myiORV/yuxVu18HiouLqcmWAnrRxDpSbqT5/kGqxHQK7PKQKUZjUa3six7qObWvCBq3C7jfB//GovLPpue3ffOP0eCP0JXq6Q1rMCY38OiXVUAPBfnHQawOf8bzAmTCsEEMz/6lGce4OD+7QywAuZV2H5zPC/y49i3NCEQS6kfFEXBrbxGRGI2E9+Af3ARaAEXT3kD6ZsGm4PmJ37xlla6SVmafYbwqXNuB2KnlF4PiJ4Bv4LxebmIO/h+8DiKo10Um8A3aP515L39A72T+LJDJNbxAAAAAElFTkSuQmCC); background-size: 16px 16px"; let span = document.createElement("span"); span.className = "hover-label"; span.textContent = "Toggle fullscreen"; button.appendChild(span); let toolbar = document.querySelector(".reader-toolbar"); toolbar.appendChild(button); })();

[LeeBinder]

great. I had looked at how to do it but I've been out of the JS/CSS loop for too long so it would've taken me too long to figure it out. Looking perfect now.

BTW, I very positive that a modification of this script would also work if invoked via [profile]/chrome/userChrome.js, adding a full-screen button to the reader view menu right away w/o the need for additional user input, but wasn't able to get it working. Have you tried that yourself already but gave up and defaulted back to the bookmarklet approach?

[MarkTiedemann]

I don't know much about userChrome.js. I'm using userChrome.css and userContent.css in combination with Tampermonkey: https://github.com/MarkTiedemann/firefox-userstyles

There's an open Tampermonkey issue about matching alternative URL schemes, for example, about: (e.g. about:blank or about:reader): https://github.com/Tampermonkey/tampermonkey/issues/312

Because of that issue, I may have found a way to run the extension on about:reader, using the match_origin_as_fallback config: https://developer.chrome.com/docs/extensions/mv3/content_scripts/#match_origin_as_fallback

So I'm re-opening this issue. It might be possible to do this after all. 😄

Thanks for the great suggestions, Lee!

[LeeBinder]

Neat find. You're welcome. I use Violentmonkey (Waterfox) and GreaseMonkey (Firefox) so I could test when needed.

userChrome.js: oh right, it's not Firefox native but custom by Aris-t2 (Custom JS scripts for Firefox 60+), and userChrome.jsm custom by xiaoxiaoflood (userChromeJS Firefox Scripts), above all (but not limited) to run legacy XUL Extensions in modern ("Quantum") Firefox, Waterfox and Thunderbird.

[LeeBinder]

Because of that issue, I may have found a way to run the extension on about:reader, using the match_origin_as_fallback config: https://developer.chrome.com/docs/extensions/mv3/content_scripts/#match_origin_as_fallback

Would this only apply to your Extension for Chrome, or also for Firefox? I admit I haven't even tested full screen in Chrome's reader mode because it is not my main browser.

[MarkTiedemann]

@LeeBinder You're right, this isn't implemented in Firefox yet: https://bugzilla.mozilla.org/show_bug.cgi?id=1475831

[LeeBinder]

bummer. Accdg. to the link you posted, It's been on Rob Wu's Firefox fix list for the past 4 years, so it's not likely to be fixed any time soon. An adaptation of your script to work via userChrome.js (or userChrome.jsm) might be the next best approach for now to have it work without user input. However, the average user won't be interested to add a legacy bootstrapper to Firefox for that purpose - it would be overkill for most.

I have too many other tasks on my list, so for the time being, I unfortunately can't open an issue over there asking if your script can be adapted to be invoked via userChrome.js(m) :(