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, You can obtain one at https://mozilla.org/MPL/2.0/. */
"use strict";
const {
createElement,
createFactory,
} = require("resource://devtools/client/shared/vendor/react.mjs");
const {
PropTypes,
} = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
const {
button,
} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
const Localized = createFactory(FluentReact.Localized);
function Diagram({ rows, entriesByKey }) {
let ctr = 0;
return createElement(
"tbody",
{},
...rows.map(row =>
createElement(
"tr",
{},
row.map(({ age, key, sameDocNav }) => {
const id = `entry-info-container-${ctr++}`;
const className = sameDocNav ? "same-document-nav" : "";
return key
? createElement(
"td",
{
colSpan: age,
className,
},
Localized(
{
id: "session-history-entry-info-button-title",
attrs: {
title: true,
},
},
button(
{
popovertarget: id,
},
`${entriesByKey[key].url.pathname}${entriesByKey[key].url.search}`
)
),
createElement(EntryInfo, { fields: entriesByKey[key], id })
)
: createElement("td", {
colSpan: age,
});
})
)
)
);
}
Diagram.propTypes = {
rows: PropTypes.object.isRequired,
entriesByKey: PropTypes.object.isRequired,
};
function EntryInfo({ fields, id }) {
return createElement(
"div",
{ id, popover: "auto" },
createElement(
`dl`,
{},
...Object.entries(fields).flatMap(([key, value]) => [
createElement("dt", {}, key),
createElement(
"dd",
{},
value instanceof Array
? createElement("ul", {
children: value.map(child =>
createElement("li", {}, `${child}`)
),
})
: `${value}`
),
])
)
);
}
EntryInfo.propTypes = {
entry: PropTypes.object.isRequired,
id: PropTypes.string.isRequired,
};
function SessionHistoryDiagram({ count, current, rows, entriesByKey }) {
const header = new Array(count);
for (let index = 0; index < count; index++) {
const props = index == current ? { id: "current" } : {};
header.push(createElement("th", props, index));
}
return createElement(
`table`,
{},
createElement("thead", {}, createElement("tr", {}, ...header)),
createElement(Diagram, {
rows,
entriesByKey,
})
);
}
SessionHistoryDiagram.propTypes = {
count: PropTypes.number.isRequired,
current: PropTypes.number.isRequired,
rows: PropTypes.object.isRequired,
entriesByKey: PropTypes.object.isRequired,
};
// Exports
module.exports = SessionHistoryDiagram;