Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
const lazy = {};
ChromeUtils.defineESModuleGetters(lazy, {
SessionStore: "resource:///modules/sessionstore/SessionStore.sys.mjs",
});
export const PageWireframes = {
/**
* Returns the wireframe object for the current index of the session history
* for the given tab. The wireframe will only exist with browser.history.collectWireframes.
*
* @param {Object} tab
* @return {Object} wireframe
* See dom/webidl/Document.webidl for the Wireframe dictionary
*/
getWireframeState(tab) {
if (!tab) {
return null;
}
const sessionHistory = lazy.SessionStore.getSessionHistory(tab);
return sessionHistory?.entries[sessionHistory.index]?.wireframe;
},
/**
* Returns an SVG preview for the wireframe at the current index of the session history
* for the given tab. The wireframe will only exist with browser.history.collectWireframes.
*
* @param {Object} tab
* @return {SVGElement}
*/
getWireframeElementForTab(tab) {
const wireframe = this.getWireframeState(tab);
return wireframe && this.getWireframeElement(wireframe, tab.ownerDocument);
},
/**
* Converts a color encoded as a uint32_t (Gecko's nscolor format)
* to an rgb string.
*
* @param {Number} nscolor
* An RGB color encoded in nscolor format.
* @return {String}
* A string of the form "rgb(r, g, b)".
*/
nscolorToRGB(nscolor) {
let r = nscolor & 0xff;
let g = (nscolor >> 8) & 0xff;
let b = (nscolor >> 16) & 0xff;
return `rgb(${r}, ${g}, ${b})`;
},
/**
* Converts a color encoded as a uint32_t (Gecko's nscolor format)
* to an rgb string.
*
* @param {Object} wireframe
* @param {Document} document
* A Document to crate SVG elements.
* @return {SVGElement}
* The rendered wireframe
*/
getWireframeElement(wireframe, document) {
let svg = document.createElementNS(SVG_NS, "svg");
// Currently guessing width & height from rects on the object, it would be better to
// save these on the wireframe object itself.
let width = wireframe.rects.reduce(
(max, rect) => Math.max(max, rect.x + rect.width),
0
);
let height = wireframe.rects.reduce(
(max, rect) => Math.max(max, rect.y + rect.height),
0
);
svg.setAttributeNS(null, "viewBox", `0 0 ${width} ${height}`);
svg.style.backgroundColor = this.nscolorToRGB(wireframe.canvasBackground);
const DEFAULT_FILL = "color-mix(in srgb, gray 20%, transparent)";
for (let rectObj of wireframe.rects) {
// For now we'll skip rects that have an unknown classification, since
// it's not clear how we should treat them.
if (rectObj.type == "unknown") {
continue;
}
let rectEl = document.createElementNS(SVG_NS, "rect");
rectEl.setAttribute("x", rectObj.x);
rectEl.setAttribute("y", rectObj.y);
rectEl.setAttribute("width", rectObj.width);
rectEl.setAttribute("height", rectObj.height);
let fill;
switch (rectObj.type) {
case "background": {
fill = this.nscolorToRGB(rectObj.color);
break;
}
case "image": {
fill = rectObj.color
? this.nscolorToRGB(rectObj.color)
: DEFAULT_FILL;
break;
}
case "text": {
fill = DEFAULT_FILL;
break;
}
}
rectEl.setAttribute("fill", fill);
svg.appendChild(rectEl);
}
return svg;
},
};