Status Update 9 of Reader Mode for desktop Firefox

This is the final week for the students working on the Reader Mode project for Firefox. The students will be presenting their final work on Friday to a panel of judges at Michigan State’s Design Day.

Reader mode now mostly works at prototype-level functionality. There is still some more work and lots more testing to do.

The team has asked for help with testing on Windows & Linux, as well as switching tabs. When a tab is switched to, the document is parsed for its readability score. We want to make sure that we don’t regress tab switching times as well as increase memory usage by the introduction of the feature.

I pushed their current patch to our Try servers so you can help test. When it is finished building, they should be available to download and play with here*. After downloading the build, go to about:config and set reader.enabled=true.

*Update: I have heard from at least one person that the Windows build isn’t working correctly.

Without further ado, here is the team’s project overview video.

The team also is planning on tweaking the size of the toolbar button so it doesn’t stretch the URL bar vertically. This is a subtle bug that you can see in the team’s project video.

Further work for Reader Mode will include moving the in-page adjustments to a toolbar at the top of the page, as well as adding a Sepia color mode.

The team updated the current work-in-progress patch on the meta bug.

Status Update 8 of Reader Mode for desktop Firefox

This post was guest authored by Matt Vorce, one of the students working on the reader-mode project.

This past week we continued to finish up some changes to our reader mode page. We are now working on moving some common files to toolkit so they can be referenced by desktop and mobile in the same location.

This will require us to convert the .js files to a .jsm. After doing that we will import the files as a resource.

As far as buttons go for reader mode we are only including the buttons for styling the page for the time being. We are also going to display the reader page in the current tab and not pursue an overlay/lightbox for the time being.

Here is a video of the current functionality (interaction workflow is not final):

The team updated the current work-in-progress patch on the meta bug.

Status Update 7 of Reader Mode for desktop Firefox

This post was guest authored by Michael Anderson, one of the students working on the reader-mode project.

This week the team got an alpha version of reader mode working.  After the page loads, a button will appear in the toolbar allowing you to open that page in reader mode, which is currently in a new tab.

Here is a video of that functionality (interaction workflow is not final):

Going forward, the team has decided to start expanding the functionality of the about reader page.  To start we will allow people to change their font, change text size, and have light, sepia, and dark modes for easier reading.  The buttons to change these settings will be done similar to how PDF.js is set up.

The team is currently in the process of getting all of this code on the meta bug.

Updated on 1 Nov to clarify that Sepia styling is planned as well. – Jared

Status Update 6 of Reader Mode for desktop Firefox

This post was guest authored by Kevin Woodward, one of the students working on the reader-mode project.

Over the last week a lot of time was spent in preparation for the team’s alpha presentation which covered most of the functionality of Reader Mode. Real, testable data is being pulled from the parsing done by the Readability API, and all that remains to do with this content is to add it to aboutReader.html after it has been loaded into a new tab. At the present time this data is being displayed using simple alert messages as was discussed in our last meeting.

The process of extending the functionality of Bookmarks to cover our Reading List has begun. A new folder which contains our saved articles has been added to the Bookmarks menu. More steps are needed to include all of the same functionality that the Bookmarks Lists currently offer.

Some additional points of discussion included ideas for testing some of the functionality of Reader Mode (see Bug 786638) as currently there is little testing for Reader Mode on Android. Android has made several changes to the (Android) Reader Mode since the Desktop project has begun, but no major conflicts have arisen.

Imminent changes:

1. Wait for aboutReader.html to load into new tab
2. Write content to aboutReader.html using aboutReader.js functionality (see _showContent)
3. Add ability to save an article to the new menu item (Reading List) in Bookmarks
4. Hide Reader Mode button once the Reader determines that an article is not able to be parsed using Readability API

Reader Mode view will be fully functional within the week and the team will begin to clean-up the style/display/etc. of our Reader Mode articles. Beta presentations will begin in 2 weeks, at this time Reader Mode and Reading List should both be fully implemented.

Status Update 5 of Reader Mode for desktop Firefox

This post was guest authored by Matt Vorce, one of the students working on the reader-mode project.

Since the last time we met we made quite a bit of progress with regards to getting content from Readability.js. We were able to click our reader mode button and get the reader content for a given page and display it in an alert message.

Our current goal is to move this content in to the about:reader page. Currently we are looking into how to import/access functionality from aboutReader.js so we can add functionality on top of the aboutReader.html.

During the meeting we discussed that we need a way to run privileged code on top of the aboutReader.html. The HTML file does not have access to the information needed to retrieve the results we receive from Readability.

Mobile handles this problem by first taking the result from Readability and appending it as a private property of the tab instance. The aboutReader.js is then able to find that tab through a distinct ID and grab the result data. We need to look into similar functionality for desktop.

A few things that we need to keep in mind moving forward:

• There will be three paths for retrieving content for about:reader.
• Using a cached result retrieved from Readability.
• When a cached result doesn’t exist load the content in the background first
• Retrieving the information from the reading list

This week we need to look into importing aboutReader.js. Mobile does it via “lazy loading” but desktop may do it differently. Once this is figured out we can use aboutReader.js to act as privileged code on top of aboutReader.html in order to retrieve our results from Readability and display the appropriate content.

Also we should look into logging information to the console over using alert messages.