Closed Bug 1731714 Opened 2 months ago Closed 1 month ago

Prototype a chrome API for saving a skeleton UI based on the prominent shapes on a webpage


(Core :: Layout, task)




95 Branch
Tracking Status
firefox95 --- fixed


(Reporter: bgrins, Assigned: emilio)


(Blocks 1 open bug)



(5 files)

We'd like to experiment with saving a low fidelity version of a page to potentially render in place of an unloaded browser while the page loads.

One of the unknowns is the technical feasibility of grabbing a representative set of rectangles on the page that would roughly match the type of skeleton UIs used by web content. This bug is to get some sense of that feasibility and not to actually ship anything. The rough thought in mind is a function available from ChromeUtils that returns the current relevant rects (bounds, size, colors, etc) given a page.

Flags: needinfo?(emilio)
Assignee: nobody → emilio
Flags: needinfo?(emilio)

I added an option to return also the nodes because it's very helpful for
debugging. A bunch of the "unknown" ones are just elements with
transparent backgrounds (but still hit-testable), so we probably want to
exclude them from the result list or what not to massively reduce the
size of the returned object.

But anyhow, this probably does for a prototype.

What I've done to test this is basically copy(JSON.stringify(tabs[0].content.document.getWireframe())) from the inspector's console for a given PID. This is the result for

As mentioned in the commit message, there's a lot of "unknown" rects that should probably go away (they're mostly useful for debugging when combined with showNodes=true).

We might want to use rounded corners etc by default, perhaps something else than rgba(0, 0, 0, .2) for text / images, but this looks close enough imo :-)

Pushed by
Add a document.getWireframe() API that gets some relevant rects in the viewport. r=mconley
Closed: 1 month ago
Resolution: --- → FIXED
Target Milestone: --- → 95 Branch
You need to log in before you can comment on or make changes to this bug.