A Short Tour of

Fission's

Architecture

June 20, 2019

Pre-electrolysis

Single Process

Runs everything

Electrolysis

Parent Process

Runs browser code

Content Process

Runs all web content

Electrolysis-multi

Parent Process

Runs browser code

Content Processes

Run individual "tabs"

Electrolysis-multi

Fission

Parent Process

Runs browser code

Content Processes

Run individual "sites"

Fission

Fission

Architecture

Designing for Fission

01.

Browsing Context

​

02.

Navigation

03.

Embedding

​

04.

Fission

Architecture

Designing for Fission

01.

Browsing Context

​

02.

Navigation

03.

Embedding

​

04.

Browsing Contexts

"Container" for documents

​

Instance exists in every "relevant process"

​

"Cross-process nsDocShell"

​

Parent process has extra info on CanonicalBrowsingContext

Tree Syncing

Browsing

Context

Browsing Context

Canonical Browsing Context

Canonical

Browsing Context

Canonical

Browsing Context

Browsing

Context

Browsing

Context

Browsing Context

Browsing

Context

interface BrowsingContext

BrowsingContext? parent;

BrowsingContext top;

BrowsingContext? opener;

array<BrowsingContext> getChildren();

​

nsIDocShell? docShell; // embedded

Element? embedderElement; // embedder

Synced Fields

docshell/base/BrowsingContextFieldList.h

Browsing Context Groups

https://news.com/

https://videos.com/

social.com

video.com

Document

Toplevel Browsing Context

Nested Browsing Context

Browsing Context Group

Browsing Context Groups

​

https://news.com/

https://videos.com/

social.com

video.com

https://social.com/

https://social.com/

video.com

news.com

opener

Fission

Architecture

01.

Browsing Context

​

02.

Navigation

03.

Embedding

​

04.

Designing for Fission

Navigation

DocShell

Browsing Context

Document

Window

Document

Window

Document

Window

Document

Window

DocShell

Navigate

Navigate

X-Origin Navigate

Window Global Actors

Window Global Actors

• Actor Replaced on Navigation
• 1:1 with nsGlobalWindowInner
• Bridges from Parent ↔ Inner Window
• Exists for in-parent globals too!

interface WindowGlobalParent

BrowsingContext? browsingContext;

uint64_t innerWindowId;

uint64_t outerWindowId;

​

nsIPrincipal documentPrincipal;

nsIURI? documentURI;

​

JSWindowActor? getActor(DOMString name);

/dom/chrome-webidl/WindowGlobalActors.webidl

JSWindowActors

ChromeUtils.registerWindowActor("Actor", {

parent: { moduleURI: "…/ActorParent.jsm" },

child: {

moduleURI: "…/ActorChild.jsm",

events: { "EventSomething": {…}, … },

},

allFrames: true,

…

});

/dom/chrome-webidl/JSWindowActor.webidl

JSWindowActors

class ActorParent extends JSWindowActorParent {

async receiveMessage(msg) {

// …

await this.sendQuery("withreply", …);

this.sendAsyncMessage("noreply", …);

return this.browsingContext.stuff;

}

handleEvent(evt) { … }

};

/dom/chrome-webidl/JSWindowActor.webidl

Fission

Architecture

01.

Browsing Context

​

02.

Navigation

03.

Embedding

​

04.

Designing for Fission

It's Always Trees

news.com

video.com

social.com

video.com

Tabbed Browser UI

other tab

other tab

It's Always Trees

news.com

video.com

social.com

video.com

Tabbed Browser UI

other tab

other tab

Browser

In-Process

Fission

In-Process Embedding

nsFrameLoader

nsDocShell

Browser Embedding

BrowserChild

nsDocShell

nsFrameLoader

BrowserParent

Fission Embedding

BrowserBridgeChild

nsFrameLoader

BrowserChild

nsDocShell

BrowserBridgeParent

BrowserParent

Fission

Architecture

01.

Browsing Context

​

02.

Navigation

03.

Embedding

​

04.

Designing for Fission

Avoid Process-Local Objects

Methods like GetParentDocument() and GetTopWindow() can't work with Fission!

​

Prefer using BrowsingContext's GetParent(), Top(), and Children() APIs when possible.

• Top DocShell => Top Browsing Context
• Top Document => Top WindowGlobalParent

* Renaming Soon! - Bug 1559414

Fine-grained Actors

A tab can have many PBrowsers

• Don't expect 1:1 PBrowser ↔ <xul:browser>

​

Use PWindowGlobal for per-window msgs

• It even works for documents loaded in-parent!

​

Use JSWindowActors instead of FrameScripts

• FrameScripts won't load in subframes

Small Children

Only use resources when they're needed!

• We're going to have a lot of content processes!

​

Move responsibility to the Parent

• Some state will only be there!

Build Tests for Fission

await SpecialPowers.spawn(

window, [a, b, c],

async (a, b, c) => {

return content.document.whatever;

});

* Coming Soon! - Bug 1532795

What's Been Done?

→

8.5 MB

4.1 MB

JavaScript

Q2 2018

Q3 2019

51%

→

21.5 MB

14.8 MB

Windows

Q2 2018

Q3 2019

43%

→

34.3 MB

19.5 MB

Linux

Q2 2018

Q3 2019

31%

→

32.7 MB

24.6 MB

macOS

Q2 2018

Q3 2019

25%

fission.autostart

Demo

Thank You!

15 Origins!

Embedding Trees

news.com

video.com

social.com

video.com

Tabbed Browser UI

other tab

other tab

Embedder → Embedded Links

Embedder (iframe/browser)

Embedded (nsDocShell)

In-Process

Subframe

Browser

Embedding Trees

news.com

video.com

social.com

video.com

Tabbed Browser UI

other tab

other tab

Browser

In-Process

Subframe

Subframe Edges

New!

Takeaways

PBrowserBridge embeds oop iframes

​

Multiple PBrowser actors per tab

​

Subframes can be in a different process than their embedder

​

"Top Window" & "Root DocShell" should be replaced with "Top BrowsingContext"

Navigation

"Embedding Link"

DocShell

BrowsingContext

Frame Element

All Relevant Processes

Document

Window

Document

Window

Document

Window

Document

Window

DocShell

Load

Load

X-Origin Load

<iframe> / <xul:browser>

nsFrameLoader, PBrowser, etc.

JS Global

Document Loader

"Embed. Link"

Navigation

"Embedding Link"

DocShell

BrowsingContext

Frame Element

All Relevant Processes

Document

Window

Document

Window

Document

Window

Document

Window

DocShell

Load

Load

X-Origin Load

<iframe> / <xul:browser>

nsFrameLoader, PBrowser, etc.

JS Global

Document Loader

"Embed. Link"

Split Trees

news.com

Unfortunately, <iframe>

https://news.com/

https://videos.com/

social.com

video.com

https://social.com/

https://social.com/

video.com

news.com

Fission

General tips

Please try and keep amount of single slide content as low as possible. Use speaker notes vs reading from slide.

​

Showing and speaking to key points works well. Expand on points using speaker notes, avoiding wordy slides.

​

Limit bullet usage.

​

​

Presentation Accessibility Guidelines

Accessibility - Themes

When in doubt, use the theme as designed as it has been created based on accessibility guidelines.

​

(right click image, ‘Apply layout’)

​

​

Accessibility - Typography

Headlines

​

Body copy

​

36pt, Zilla Slab Semi Bold

​

24pt, Open Sans Normal

​

No smaller than 36pt for headlines.

Body copy for important information should not drop below 24pt.

Avoid ALLCAPS.

Accessibility - Color

Do not only use colour to convey essential information. This won’t be accessible to people who are colour blind.

​

If you use colours, choose a good high contrast between text and background and avoid pale colours on coloured backgrounds.

​

​

Accessibility - Color grades

Color combo grades with white or black text. Please try and use these passing combos at all times.

AA Large

AAA Large

Fails

AAA

AA Large

AAA Large

AAA

AA Large

AAA

AAA

Accessibility - Imagery

Add alternative text to describe images and graphs so that people with visual impairments know what they are.

​

(right click image, ‘Alt text…’)

Example Usage

Example Agenda

01.

Topic title

​

02.

Topic title

​

03.

Topic title

​

04.

Topic title

​

Fruitcake topping gummies. Icing brownie jelly-o toffee cookie lemon drops. Carrot cake pastry icing marshmallow cake muffin.

Bold

One line

Impact

Example Agenda

01.

Topic title

​

02.

Topic title

​

03.

Topic title

​

04.

Topic title

​

Fruitcake topping gummies. Icing brownie jelly-o toffee cookie lemon drops. Carrot cake pastry icing marshmallow cake muffin.

Fruitcake topping gummies. Icing brownie jelly-o toffee cookie lemon drops. Carrot cake pastry icing marshmallow cake muffin.

Example

Example

Example

Venue

Location