Halfway

For this year’s outreachy program, I have been working on a project to Improve Firefox Screenshots.

About the project

The extension adds a toolbar button to the browser action area. Clicking on this button opens a popup window that contains three options. "Full Page", "Save Visible", and "Capture a Portion". These items are also added to the right-click context menu of the page for easy access. My project is to move the screenshot from an extension to a dedicated browser component.

Breaking down large tasks into smaller chunks, so that it is easier to know where to start.

Part 1: Create preference for new component. A preference helps us develop our new screenshots component without breaking the current screenshots functionality.We gave this a default value of false, so Firefox users will continue to use the old screenshots mechanism. When we want to test the new value, we should go to about:config and toggle the value of screenshots.browser.component.enabled to true.

Part 2: Create the browser/components/screenshots directory and files. Creating the files that we’re going to need to use as a foundation.

Part 3: Create a custom element. One of the key features of the Web Components standard is the ability to create custom elements that encapsulate your functionality on an HTML page, rather than having to make do with a long, nested batch of elements that together provide a custom page feature.

Part 4: Migrate icon assets. Move all icons into new Screenshot directory and change existing references.

Part 5: Add custom element to browser.xhtml and hook up some functionality.

Part 6: Incorporate screenshots UI markup into custom element.

What I Worked On

Bug 1715838 - Creates preference for new screenshot components.

Bug 1717486 - Creates browser/components/screenshots directory and files.

Bug 1718713 - Creates dummy custom element in new screenshot.

Bug 1719492 - Migrates screenshot icons into the browser/component/screenshots directory.

What's Left To Do?

Part 5: Add custom element to browser.xhtml and hook up some functionality.

Part 6: Incorporate screenshots UI markup into custom element.