From 6bf0a5cb5034a7e684dcc3500e841785237ce2dd Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 19:32:43 +0200 Subject: Adding upstream version 1:115.7.0. Signed-off-by: Daniel Baumann --- toolkit/content/aboutwebrtc/aboutWebrtc.css | 197 ++++ toolkit/content/aboutwebrtc/aboutWebrtc.html | 34 + toolkit/content/aboutwebrtc/aboutWebrtc.mjs | 1481 ++++++++++++++++++++++++++ toolkit/content/aboutwebrtc/graph.mjs | 150 +++ toolkit/content/aboutwebrtc/graphdb.mjs | 208 ++++ 5 files changed, 2070 insertions(+) create mode 100644 toolkit/content/aboutwebrtc/aboutWebrtc.css create mode 100644 toolkit/content/aboutwebrtc/aboutWebrtc.html create mode 100644 toolkit/content/aboutwebrtc/aboutWebrtc.mjs create mode 100644 toolkit/content/aboutwebrtc/graph.mjs create mode 100644 toolkit/content/aboutwebrtc/graphdb.mjs (limited to 'toolkit/content/aboutwebrtc') diff --git a/toolkit/content/aboutwebrtc/aboutWebrtc.css b/toolkit/content/aboutwebrtc/aboutWebrtc.css new file mode 100644 index 0000000000..c43163de55 --- /dev/null +++ b/toolkit/content/aboutwebrtc/aboutWebrtc.css @@ -0,0 +1,197 @@ +/* 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 http://mozilla.org/MPL/2.0/. */ + +body { + margin: 8px; +} + +table { + font-family: monospace; + border: 1px solid var(--in-content-border-color); + border-spacing: 0; + margin-block: 1em; +} + +.controls { + font-size: 1.1em; + display: inline-block; + margin: 0 0.5em; +} + +.control { + margin: 0.5em 0; +} + +.message > p { + margin: 4px; +} + +.log p, +.prefs p { + font-family: monospace; + padding-inline-start: 2em; + text-indent: -2em; + margin-block: 2px; +} + +#content > div { + padding: 1em 2em; + margin: 1em 0; + border: 1px solid var(--in-content-box-border-color); + border-radius: 10px; + background-color: var(--in-content-box-background); +} + +.section-heading > * { + display: inline-block; +} + +.section-heading > button { + margin-inline: 1em; +} + +.peer-connection > h3 { + background-color: var(--in-content-box-info-background); + padding: 4px; +} + +.peer-connection > button { + margin-inline-start: 0; +} + +.peer-connection table { + width: 100%; + text-align: center; +} + +.peer-connection table th { + font-weight: bold; +} + +.peer-connection table th, +.peer-connection table td { + padding: 0.4em; + border: 1px solid var(--in-content-border-color); +} + +.peer-connection table tr:nth-child(odd) { + background-color: var(--in-content-box-background-odd); +} + +.peer-connection table caption { + text-align: start; +} + +.peer-connection table.raw-candidate { + text-align: match-parent; +} + +.bottom-border td { + border-bottom: 2px solid currentColor; +} + +.peer-connection-config div { + margin-inline: 1em; + padding: 4px; + border: 1px solid var(--in-content-border-color); +} + +.peer-connection-config div:nth-child(odd) { + background-color: var(--in-content-box-background-odd); +} + +/* The pale colour scheme is taken from: + https://personal.sron.nl/~pault/#sec:qualitative */ +.ice-trickled { + background-color: #cceeff; /* pale cyan */ +} +.ice-succeeded { + background-color: #ccddaa; /* pale green */ +} +.ice-failed { + background-color: #ffcccc; /* pale red */ +} +.ice-cancelled { + background-color: #eeeebb; /* pale yellow */ +} +.ice-trickled, +.ice-succeeded, +.ice-failed, +.ice-cancelled { + color: black +} + +.info-label { + font-weight: bold; +} + +.info-body, +.stat-label { + padding-inline-start: 0.5em; +} + +.section-ctrl { + margin: 1em 1.5em; +} + +div.fold-trigger { + color: var(--blue-60); + cursor: pointer; +} + +@media screen { + .fold-closed { + display: none !important; + } +} + +@media print { + .no-print { + display: none !important; + } +} + +.tab-pane { + display: none; +} + +.active-tab-pane { + border: 1px solid var(--in-content-border-color); + display: block; +} + +.tab-button { + color: var(--in-content-button-text-color); +} + +.active-tab-button { + color: var(--in-content-button-text-color-active); + background: var(--in-content-button-background-active); +} + +.sdp-history { + display: flex; + height: 400px; +} + +.sdp-history-link { + text-decoration: underline; +} + +.sdp-history h5 { + background-color: var(--in-content-box-info-background); +} + +.sdp-history div { + border: 1px solid var(--in-content-border-color); + padding: 1em; + width: 50%; + overflow: scroll; +} + +.line-graph { + border: 1px solid var(--in-content-border-color); + margin-inline: 1px; + padding: 1px; +} diff --git a/toolkit/content/aboutwebrtc/aboutWebrtc.html b/toolkit/content/aboutwebrtc/aboutWebrtc.html new file mode 100644 index 0000000000..c1b16032c8 --- /dev/null +++ b/toolkit/content/aboutwebrtc/aboutWebrtc.html @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + +
+
+ + diff --git a/toolkit/content/aboutwebrtc/aboutWebrtc.mjs b/toolkit/content/aboutwebrtc/aboutWebrtc.mjs new file mode 100644 index 0000000000..80af7aae4d --- /dev/null +++ b/toolkit/content/aboutwebrtc/aboutWebrtc.mjs @@ -0,0 +1,1481 @@ +/* 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 http://mozilla.org/MPL/2.0/. */ + +import { GraphImpl } from "chrome://global/content/aboutwebrtc/graph.mjs"; +import { GraphDb } from "chrome://global/content/aboutwebrtc/graphdb.mjs"; + +const lazy = {}; + +ChromeUtils.defineESModuleGetters(lazy, { + FileUtils: "resource://gre/modules/FileUtils.sys.mjs", +}); + +function makeFilePickerService() { + const fpContractID = "@mozilla.org/filepicker;1"; + const fpIID = Ci.nsIFilePicker; + return Cc[fpContractID].createInstance(fpIID); +} + +const WGI = WebrtcGlobalInformation; + +const LOGFILE_NAME_DEFAULT = "aboutWebrtc.html"; +const WEBRTC_TRACE_ALL = 65535; + +class Renderer { + // Long function names preserved until code can be uniformly moved to new names + renderElement(eleName, options, l10n_id, l10n_args) { + let elem = Object.assign(document.createElement(eleName), options); + if (l10n_id) { + document.l10n.setAttributes(elem, l10n_id, l10n_args); + } + return elem; + } + elem() { + return this.renderElement(...arguments); + } + text(eleName, textContent, options) { + return this.renderElement(eleName, Object.assign({ textContent }, options)); + } + renderElements(eleName, options, list) { + const element = renderElement(eleName, options); + element.append(...list); + return element; + } + elems() { + return this.renderElements(...arguments); + } +} + +// Proxies a Renderer instance to provide some meta programming methods to make +// adding elements more readable, e.g. elemRenderer.elem_h4(...) instead of +// elemRenderer.elem("h4", ...). +const elemRenderer = new Proxy(new Renderer(), { + get(target, prop, receiver) { + // Function prefixes to proxy. + const proxied = { + elem_: (...args) => target.elem(...args), + elems_: (...args) => target.elems(...args), + text_: (...args) => target.text(...args), + }; + for (let [prefix, func] of Object.entries(proxied)) { + if (prop.startsWith(prefix) && prop.length > prefix.length) { + return (...args) => func(prop.substring(prefix.length), ...args); + } + } + // Pass non-matches to the base object + return Reflect.get(...arguments); + }, +}); + +let graphData = []; +let mostRecentReports = {}; +let sdpHistories = []; +let historyTsMemoForPcid = {}; +let sdpHistoryTsMemoForPcid = {}; + +function clearStatsHistory() { + graphData = []; + mostRecentReports = {}; + sdpHistories = []; + historyTsMemoForPcid = {}; + sdpHistoryTsMemoForPcid = {}; +} + +function appendReportToHistory(report) { + appendSdpHistory(report); + mostRecentReports[report.pcid] = report; + if (graphData[report.pcid] === undefined) { + graphData[report.pcid] ??= new GraphDb(report); + } else { + graphData[report.pcid].insertReportData(report); + } +} + +function appendSdpHistory({ pcid, sdpHistory: newHistory }) { + sdpHistories[pcid] ??= []; + let storedHistory = sdpHistories[pcid]; + newHistory.forEach(entry => { + const { timestamp } = entry; + if (!storedHistory.length || storedHistory.at(-1).timestamp < timestamp) { + storedHistory.push(entry); + sdpHistoryTsMemoForPcid[pcid] = timestamp; + } + }); +} + +function recentStats() { + return Object.values(mostRecentReports); +} + +// Returns the sdpHistory for a given stats report +function getSdpHistory({ pcid, timestamp: a }) { + sdpHistories[pcid] ??= []; + return sdpHistories[pcid].filter(({ timestamp: b }) => a >= b); +} + +function appendStats(allStats) { + allStats.forEach(appendReportToHistory); +} + +function getAndUpdateStatsTsMemoForPcid(pcid) { + historyTsMemoForPcid[pcid] = mostRecentReports[pcid]?.timestamp; + return historyTsMemoForPcid[pcid] || null; +} + +function getSdpTsMemoForPcid(pcid) { + return sdpHistoryTsMemoForPcid[pcid] || null; +} + +const REQUEST_FULL_REFRESH = true; +async function getStats(requestFullRefresh) { + if ( + requestFullRefresh || + !Services.prefs.getBoolPref("media.aboutwebrtc.hist.enabled") + ) { + const { reports } = await new Promise(r => WGI.getAllStats(r)); + appendStats(reports); + return reports.sort((a, b) => b.timestamp - a.timestamp); + } + const pcids = await new Promise(r => WGI.getStatsHistoryPcIds(r)); + await Promise.all( + [...pcids].map(pcid => + new Promise(r => + WGI.getStatsHistorySince( + r, + pcid, + getAndUpdateStatsTsMemoForPcid(pcid), + getSdpTsMemoForPcid(pcid) + ) + ).then(r => { + appendStats(r.reports); + r.sdpHistories.forEach(hist => appendSdpHistory(hist)); + }) + ) + ); + let recent = recentStats(); + return recent.sort((a, b) => b.timestamp - a.timestamp); +} + +const getLog = () => new Promise(r => WGI.getLogging("", r)); + +const renderElement = (eleName, options, l10n_id, l10n_args) => + elemRenderer.elem(eleName, options, l10n_id, l10n_args); + +const renderText = (eleName, textContent, options) => + elemRenderer.text(eleName, textContent, options); + +const renderElements = (eleName, options, list) => + elemRenderer.elems(eleName, options, list); + +// Button control classes + +class Control { + label = null; + message = null; + messageArgs = null; + messageHeader = null; + + render() { + this.ctrl = renderElement( + "button", + { onclick: () => this.onClick() }, + this.label + ); + this.msg = renderElement("p"); + this.update(); + return [this.ctrl, this.msg]; + } + + update() { + document.l10n.setAttributes(this.ctrl, this.label); + this.msg.textContent = ""; + if (this.message) { + this.msg.append( + renderElement( + "span", + { + className: "info-label", + }, + this.messageHeader + ), + renderElement( + "span", + { + className: "info-body", + }, + this.message, + this.messageArgs + ) + ); + } + } +} + +class SavePage extends Control { + constructor() { + super(); + this.messageHeader = "about-webrtc-save-page-label"; + this.label = "about-webrtc-save-page-label"; + } + + async onClick() { + FoldEffect.expandAll(); + let [dialogTitle] = await document.l10n.formatValues([ + { id: "about-webrtc-save-page-dialog-title" }, + ]); + let FilePicker = makeFilePickerService(); + const lazyFileUtils = lazy.FileUtils; + FilePicker.init(window, dialogTitle, FilePicker.modeSave); + FilePicker.defaultString = LOGFILE_NAME_DEFAULT; + const rv = await new Promise(r => FilePicker.open(r)); + if (rv != FilePicker.returnOK && rv != FilePicker.returnReplace) { + return; + } + const fout = lazyFileUtils.openAtomicFileOutputStream( + FilePicker.file, + lazyFileUtils.MODE_WRONLY | lazyFileUtils.MODE_CREATE + ); + const content = document.querySelector("#content"); + const noPrintList = [...content.querySelectorAll(".no-print")]; + for (const node of noPrintList) { + node.style.setProperty("display", "none"); + } + try { + fout.write(content.outerHTML, content.outerHTML.length); + } finally { + lazyFileUtils.closeAtomicFileOutputStream(fout); + for (const node of noPrintList) { + node.style.removeProperty("display"); + } + } + this.message = "about-webrtc-save-page-msg"; + this.messageArgs = { path: FilePicker.file.path }; + this.update(); + } +} + +class DebugMode extends Control { + constructor() { + super(); + this.messageHeader = "about-webrtc-debug-mode-msg-label"; + + if (WGI.debugLevel > 0) { + this.setState(true); + } else { + this.label = "about-webrtc-debug-mode-off-state-label"; + } + } + + setState(state) { + this.label = state + ? "about-webrtc-debug-mode-on-state-label" + : "about-webrtc-debug-mode-off-state-label"; + try { + const file = Services.prefs.getCharPref("media.webrtc.debug.log_file"); + this.message = state + ? "about-webrtc-debug-mode-on-state-msg" + : "about-webrtc-debug-mode-off-state-msg"; + this.messageArgs = { path: file }; + } catch (e) { + this.message = null; + } + return state; + } + + onClick() { + this.setState((WGI.debugLevel = WGI.debugLevel ? 0 : WEBRTC_TRACE_ALL)); + this.update(); + } +} + +class AecLogging extends Control { + constructor() { + super(); + this.messageHeader = "about-webrtc-aec-logging-msg-label"; + + if (WGI.aecDebug) { + this.setState(true); + } else { + this.label = "about-webrtc-aec-logging-off-state-label"; + this.message = null; + } + } + + setState(state) { + this.label = state + ? "about-webrtc-aec-logging-on-state-label" + : "about-webrtc-aec-logging-off-state-label"; + try { + if (!state) { + const file = WGI.aecDebugLogDir; + this.message = "about-webrtc-aec-logging-off-state-msg"; + this.messageArgs = { path: file }; + } else { + this.message = "about-webrtc-aec-logging-on-state-msg"; + } + } catch (e) { + this.message = null; + } + } + + onClick() { + this.setState((WGI.aecDebug = !WGI.aecDebug)); + this.update(); + } +} + +class ShowTab extends Control { + constructor(browserId) { + super(); + this.label = "about-webrtc-show-tab-label"; + this.message = null; + this.browserId = browserId; + } + + onClick() { + const globalBrowser = + window.ownerGlobal.browsingContext.topChromeWindow.gBrowser; + for (const tab of globalBrowser.visibleTabs) { + if (tab.linkedBrowser && tab.linkedBrowser.browserId == this.browserId) { + globalBrowser.selectedTab = tab; + return; + } + } + this.ctrl.disabled = true; + } +} + +(async () => { + // Setup. Retrieve reports & log while page loads. + const haveReports = getStats(); + const haveLog = getLog(); + await new Promise(r => (window.onload = r)); + { + const ctrl = renderElement("div", { className: "control" }); + const msg = renderElement("div", { className: "message" }); + const add = ([control, message]) => { + ctrl.appendChild(control); + msg.appendChild(message); + }; + add(new SavePage().render()); + add(new DebugMode().render()); + add(new AecLogging().render()); + // Add the autorefresh checkbox and its label + const autorefresh = document.createElement("input"); + Object.assign(autorefresh, { + type: "checkbox", + id: "autorefresh", + checked: true, + }); + const autorefreshLabel = document.createElement("label"); + document.l10n.setAttributes( + autorefreshLabel, + "about-webrtc-auto-refresh-label" + ); + + const ctrls = document.querySelector("#controls"); + ctrls.append(renderElements("div", { className: "controls" }, [ctrl, msg])); + ctrls.appendChild(autorefresh); + ctrls.appendChild(autorefreshLabel); + } + + // Render pcs and log + let reports = await haveReports; + let log = await haveLog; + + reports.sort((a, b) => a.browserId - b.browserId); + + let peerConnections = renderElement("div"); + let connectionLog = renderElement("div"); + let userPrefs = renderElement("div"); + + const content = document.querySelector("#content"); + content.append(peerConnections, connectionLog, userPrefs); + + // This does not handle the auto-refresh, only the manual refreshes needed + // for certain user actions, and the initial population of the data + function refresh() { + const pcDiv = renderElements("div", { className: "stats" }, [ + renderElements("span", { className: "section-heading" }, [ + renderElement("h3", {}, "about-webrtc-stats-heading"), + renderElement( + "button", + { + className: "no-print", + onclick: async () => { + WGI.clearAllStats(); + clearStatsHistory(); + reports = await getStats(REQUEST_FULL_REFRESH); + refresh(); + }, + }, + "about-webrtc-stats-clear" + ), + ]), + ...reports.map(renderPeerConnection), + ]); + const logDiv = renderElements("div", { className: "log" }, [ + renderElements("span", { className: "section-heading" }, [ + renderElement("h3", {}, "about-webrtc-log-heading"), + renderElement( + "button", + { + className: "no-print", + onclick: async () => { + WGI.clearLogging(); + log = await getLog(); + refresh(); + }, + }, + "about-webrtc-log-clear" + ), + ]), + ]); + if (log.length) { + const div = renderFoldableSection(logDiv, { + showMsg: "about-webrtc-log-show-msg", + hideMsg: "about-webrtc-log-hide-msg", + }); + div.append(...log.map(line => renderText("p", line))); + logDiv.append(div); + } + // Replace previous info + peerConnections.replaceWith(pcDiv); + connectionLog.replaceWith(logDiv); + userPrefs.replaceWith((userPrefs = renderUserPrefs())); + + peerConnections = pcDiv; + connectionLog = logDiv; + } + refresh(); + + async function translate(element) { + const frag = document.createDocumentFragment(); + frag.append(element); + await document.l10n.translateFragment(frag); + return frag; + } + + window.setInterval( + async hist => { + const statReports = await getStats(); + // Only refresh if the autorefresh checkbox is checked + if (!document.getElementById("autorefresh").checked) { + return; + } + const rndr = elemRenderer; + + const translateSection = async (report, id, renderFunc) => { + const element = document.getElementById(`${id}: ${report.pcid}`); + const result = + element && (await translate(renderFunc(rndr, report, hist))); + return { element, translated: result }; + }; + + const sections = ( + await Promise.all( + statReports.flatMap(report => [ + translateSection(report, "ice-stats", renderICEStats), + translateSection(report, "rtp-stats", renderRTPStats), + translateSection(report, "bandwidth-stats", renderBandwidthStats), + translateSection(report, "frame-stats", renderFrameRateStats), + ]) + ) + ).filter(({ element }) => element); + + document.l10n.pauseObserving(); + for (const { element, translated } of sections) { + element.replaceWith(translated); + } + document.l10n.resumeObserving(); + }, + 250, + {} + ); +})(); + +function renderPeerConnection(report) { + const rndr = elemRenderer; + const { + pcid, + browserId, + closed: isClosed, + timestamp, + configuration, + } = report; + + const pcDiv = renderElement("div", { className: "peer-connection" }); + { + const id = pcid.match(/id=(\S+)/)[1]; + const url = pcid.match(/url=([^)]+)/)[1]; + const now = new Date(timestamp); + + pcDiv.append( + isClosed + ? renderElement("h3", {}, "about-webrtc-connection-closed", { + "browser-id": browserId, + id, + url, + now, + }) + : renderElement("h3", {}, "about-webrtc-connection-open", { + "browser-id": browserId, + id, + url, + now, + }) + ); + pcDiv.append(new ShowTab(browserId).render()[0]); + } + { + const section = renderFoldableSection(pcDiv); + section.append( + renderElements("div", {}, [ + renderElement( + "span", + { + className: "info-label", + }, + "about-webrtc-peerconnection-id-label" + ), + renderText("span", pcid, { className: "info-body" }), + renderConfiguration(rndr, configuration), + ]), + renderRTPStats(rndr, report), + renderICEStats(rndr, report), + renderSDPStats(rndr, report), + renderBandwidthStats(rndr, report), + renderFrameRateStats(rndr, report) + ); + pcDiv.append(section); + } + return pcDiv; +} + +const trimNewlines = sdp => sdp.replaceAll("\r\n", "\n"); + +const tabElementProps = (element, elemSubId, pcid) => ({ + className: + elemSubId != "answer" + ? `tab-${element}` + : `tab-${element} active-tab-${element}`, + id: `tab_${element}_${elemSubId}_${pcid}`, +}); + +const renderSDPTab = (rndr, sdp, props) => + rndr.elems("div", props, [rndr.text("pre", trimNewlines(sdp))]); + +const renderSDPHistoryTab = (rndr, hist, props) => { + // All SDP in sequential order. Add onclick handler to scroll the associated + // SDP into view below. + let first = Math.min(...hist.map(({ timestamp }) => timestamp)); + const parts = hist.map(({ isLocal, timestamp, sdp, errors: errs }) => { + let errorsSubSect = () => [ + rndr.elem_h5({}, "about-webrtc-sdp-parsing-errors-heading"), + ...errs.map(({ lineNumber: n, error: e }) => rndr.text_br(`${n}: ${e}`)), + ]; + + let sdpSection = [ + rndr.elem_h5({}, "about-webrtc-sdp-set-timestamp", { + timestamp, + "relative-timestamp": timestamp - first, + }), + ...(errs && errs.length ? errorsSubSect() : []), + rndr.text_pre(trimNewlines(sdp)), + ]; + + return { + link: rndr.elems_div({}, [ + rndr.elem_h5( + { + className: "sdp-history-link", + onclick: () => sdpSection[0].scrollIntoView(), + }, + isLocal + ? "about-webrtc-sdp-set-at-timestamp-local" + : "about-webrtc-sdp-set-at-timestamp-remote", + { timestamp } + ), + ]), + ...(isLocal ? { local: sdpSection } : { remote: sdpSection }), + }; + }); + + return rndr.elems_div(props, [ + // Render the links + rndr.elems_div( + {}, + parts.map(({ link }) => link) + ), + rndr.elems_div({ className: "sdp-history" }, [ + // Render the SDP into separate columns for local and remote. + rndr.elems_div({}, [ + rndr.elem_h4({}, "about-webrtc-local-sdp-heading"), + ...parts.filter(({ local }) => local).flatMap(({ local }) => local), + ]), + rndr.elems_div({}, [ + rndr.elem_h4({}, "about-webrtc-remote-sdp-heading"), + ...parts.filter(({ remote }) => remote).flatMap(({ remote }) => remote), + ]), + ]), + ]); +}; + +function renderSDPStats(rndr, { offerer, pcid, timestamp }) { + // Get the most recent (as of timestamp) local and remote SDPs from the + // history + const sdpEntries = getSdpHistory({ pcid, timestamp }); + const localSdp = sdpEntries.findLast(({ isLocal }) => isLocal)?.sdp || ""; + const remoteSdp = sdpEntries.findLast(({ isLocal }) => !isLocal)?.sdp || ""; + + const sdps = offerer + ? { offer: localSdp, answer: remoteSdp } + : { offer: remoteSdp, answer: localSdp }; + + const sdpLabels = offerer + ? { offer: "local", answer: "remote" } + : { offer: "remote", answer: "local" }; + + sdpLabels.l10n = { + offer: offerer + ? "about-webrtc-local-sdp-heading-offer" + : "about-webrtc-remote-sdp-heading-offer", + answer: offerer + ? "about-webrtc-remote-sdp-heading-answer" + : "about-webrtc-local-sdp-heading-answer", + history: "about-webrtc-sdp-history-heading", + }; + + const tabPaneProps = elemSubId => tabElementProps("pane", elemSubId, pcid); + + const panes = { + answer: renderSDPTab(rndr, sdps.answer, tabPaneProps("answer")), + offer: renderSDPTab(rndr, sdps.offer, tabPaneProps("offer")), + history: renderSDPHistoryTab( + rndr, + getSdpHistory({ pcid, timestamp }), + tabPaneProps("history") + ), + }; + + // Creates the properties and l10n label for tab buttons + const tabButtonProps = (elemSubId, pane) => [ + { + ...tabElementProps("button", elemSubId, pcid), + onclick({ currentTarget: t }) { + const flipPane = c => c.classList.toggle("active-tab-pane", c == pane); + Object.values(panes).forEach(flipPane); + const selButton = c => c.classList.toggle("active-tab-button", c == t); + [...t.parentElement.children].forEach(selButton); + }, + }, + sdpLabels.l10n[elemSubId], + ]; + + const sdpDiv = rndr.elems_div({}, [ + rndr.elem_h4({}, "about-webrtc-sdp-heading"), + ]); + let foldSection = renderFoldableSection(sdpDiv, { + showMsg: "about-webrtc-show-msg-sdp", + hideMsg: "about-webrtc-hide-msg-sdp", + }); + foldSection.append( + rndr.elems_div({ className: "tab-buttons" }, [ + ...Object.entries(panes).map(([elemSubId, pane]) => + rndr.elem_button(...tabButtonProps(elemSubId, pane)) + ), + ...Object.values(panes), + ]) + ); + sdpDiv.append(foldSection); + + return sdpDiv; +} + +function renderBandwidthStats(rndr, report) { + const statsDiv = renderElement("div", { + id: "bandwidth-stats: " + report.pcid, + }); + const table = renderSimpleTable( + "", + [ + "about-webrtc-track-identifier", + "about-webrtc-send-bandwidth-bytes-sec", + "about-webrtc-receive-bandwidth-bytes-sec", + "about-webrtc-max-padding-bytes-sec", + "about-webrtc-pacer-delay-ms", + "about-webrtc-round-trip-time-ms", + ], + report.bandwidthEstimations.map(stat => [ + stat.trackIdentifier, + stat.sendBandwidthBps, + stat.receiveBandwidthBps, + stat.maxPaddingBps, + stat.pacerDelayMs, + stat.rttMs, + ]) + ); + statsDiv.append( + renderElement("h4", {}, "about-webrtc-bandwidth-stats-heading"), + table + ); + return statsDiv; +} + +function renderFrameRateStats(rndr, report) { + const statsDiv = renderElement("div", { id: "frame-stats: " + report.pcid }); + report.videoFrameHistories.forEach(hist => { + const stats = hist.entries.map(stat => { + stat.elapsed = stat.lastFrameTimestamp - stat.firstFrameTimestamp; + if (stat.elapsed < 1) { + stat.elapsed = "0.00"; + } + stat.elapsed = (stat.elapsed / 1_000).toFixed(3); + if (stat.elapsed && stat.consecutiveFrames) { + stat.avgFramerate = (stat.consecutiveFrames / stat.elapsed).toFixed(2); + } else { + stat.avgFramerate = "0.00"; + } + return stat; + }); + + const table = renderSimpleTable( + "", + [ + "about-webrtc-width-px", + "about-webrtc-height-px", + "about-webrtc-consecutive-frames", + "about-webrtc-time-elapsed", + "about-webrtc-estimated-framerate", + "about-webrtc-rotation-degrees", + "about-webrtc-first-frame-timestamp", + "about-webrtc-last-frame-timestamp", + "about-webrtc-local-receive-ssrc", + "about-webrtc-remote-send-ssrc", + ], + stats.map(stat => + [ + stat.width, + stat.height, + stat.consecutiveFrames, + stat.elapsed, + stat.avgFramerate, + stat.rotationAngle, + stat.firstFrameTimestamp, + stat.lastFrameTimestamp, + stat.localSsrc, + stat.remoteSsrc || "?", + ].map(entry => (Object.is(entry, undefined) ? "<>" : entry)) + ) + ); + + statsDiv.append( + renderElement("h4", {}, "about-webrtc-frame-stats-heading", { + "track-identifier": hist.trackIdentifier, + }), + table + ); + }); + + return statsDiv; +} + +function renderRTPStats(rndr, report, hist) { + const rtpStats = [ + ...(report.inboundRtpStreamStats || []), + ...(report.outboundRtpStreamStats || []), + ]; + const remoteRtpStats = [ + ...(report.remoteInboundRtpStreamStats || []), + ...(report.remoteOutboundRtpStreamStats || []), + ]; + + // Generate an id-to-streamStat index for each remote streamStat. This will + // be used next to link the remote to its local side. + const remoteRtpStatsMap = {}; + for (const stat of remoteRtpStats) { + remoteRtpStatsMap[stat.id] = stat; + } + + // If a streamStat has a remoteId attribute, create a remoteRtpStats + // attribute that references the remote streamStat entry directly. + // That is, the index generated above is merged into the returned list. + for (const stat of rtpStats.filter(s => "remoteId" in s)) { + stat.remoteRtpStats = remoteRtpStatsMap[stat.remoteId]; + } + for (const stat of rtpStats.filter(s => "codecId" in s)) { + stat.codecStat = report.codecStats.find(({ id }) => id == stat.codecId); + } + const graphsByStat = stat => + (graphData[report.pcid]?.getGraphDataById(stat.id) || []).map(gd => { + // For some (remote) graphs data comes in slowly. + // Those graphs can be larger to show trends. + const histSecs = gd.getConfig().histSecs; + const canvas = rndr.elem_canvas({ + width: (histSecs > 30 ? histSecs / 3 : 15) * 20, + height: 100, + className: "line-graph", + }); + const graph = new GraphImpl(canvas, canvas.width, canvas.height); + graph.startTime = () => stat.timestamp - histSecs * 1000; + graph.stopTime = () => stat.timestamp; + if (gd.subKey == "packetsLost") { + const oldMaxColor = graph.maxColor; + graph.maxColor = data => (data.value == 0 ? "red" : oldMaxColor(data)); + } + // Get a bit more history for averages (20%) + const dataSet = gd.getDataSetSince( + graph.startTime() - histSecs * 0.2 * 1000 + ); + graph.drawSparseValues(dataSet, gd.subKey, gd.getConfig()); + return canvas; + }); + // Render stats set + return renderElements("div", { id: "rtp-stats: " + report.pcid }, [ + renderElement("h4", {}, "about-webrtc-rtp-stats-heading"), + ...rtpStats.map(stat => { + const { ssrc, remoteId, remoteRtpStats: rtcpStats } = stat; + const remoteGraphs = rtcpStats + ? [ + rndr.elems_div({}, [ + rndr.text_h6(rtcpStats.type), + ...graphsByStat(rtcpStats), + ]), + ] + : []; + const mime = stat?.codecStat?.mimeType?.concat(" - ") || ""; + const div = renderElements("div", {}, [ + rndr.text_h5(`${mime}SSRC ${ssrc}`), + rndr.elems_div({}, [rndr.text_h6(stat.type), ...graphsByStat(stat)]), + ...remoteGraphs, + renderCodecStats(stat), + renderTransportStats(stat, true, hist), + ]); + if (remoteId && rtcpStats) { + div.append(renderTransportStats(rtcpStats, false)); + } + return div; + }), + ]); +} + +function renderCodecStats({ + codecStat, + framesEncoded, + framesDecoded, + framesDropped, + discardedPackets, + packetsReceived, +}) { + let elements = []; + + if (codecStat) { + elements.push( + renderText("span", `${codecStat.payloadType} ${codecStat.mimeType}`, {}) + ); + if (framesEncoded !== undefined || framesDecoded !== undefined) { + elements.push( + renderElement( + "span", + { className: "stat-label" }, + "about-webrtc-frames", + { + frames: framesEncoded || framesDecoded || 0, + } + ) + ); + } + if (codecStat.channels !== undefined) { + elements.push( + renderElement( + "span", + { className: "stat-label" }, + "about-webrtc-channels", + { + channels: codecStat.channels, + } + ) + ); + } + elements.push( + renderText( + "span", + ` ${codecStat.clockRate} ${codecStat.sdpFmtpLine || ""}`, + {} + ) + ); + } + if (framesDropped !== undefined) { + elements.push( + renderElement( + "span", + { className: "stat-label" }, + "about-webrtc-dropped-frames-label" + ) + ); + elements.push(renderText("span", ` ${framesDropped}`, {})); + } + if (discardedPackets !== undefined) { + elements.push( + renderElement( + "span", + { className: "stat-label" }, + "about-webrtc-discarded-packets-label" + ) + ); + elements.push(renderText("span", ` ${discardedPackets}`, {})); + } + if (elements.length) { + if (packetsReceived !== undefined) { + elements.unshift( + renderElement("span", {}, "about-webrtc-decoder-label"), + renderText("span", ": ") + ); + } else { + elements.unshift( + renderElement("span", {}, "about-webrtc-encoder-label"), + renderText("span", ": ") + ); + } + } + return renderElements("div", {}, elements); +} + +function renderTransportStats( + { + id, + timestamp, + type, + packetsReceived, + bytesReceived, + packetsLost, + jitter, + roundTripTime, + packetsSent, + bytesSent, + }, + local, + hist +) { + if (hist) { + if (hist[id] === undefined) { + hist[id] = {}; + } + } + + const estimateKBps = (curTimestamp, lastTimestamp, bytes, lastBytes) => { + if (!curTimestamp || !lastTimestamp || !bytes || !lastBytes) { + return "0.0"; + } + const elapsedTime = curTimestamp - lastTimestamp; + if (elapsedTime <= 0) { + return "0.0"; + } + return ((bytes - lastBytes) / elapsedTime).toFixed(1); + }; + + let elements = []; + + if (local) { + elements.push( + renderElement("span", {}, "about-webrtc-type-local"), + renderText("span", ": ") + ); + } else { + elements.push( + renderElement("span", {}, "about-webrtc-type-remote"), + renderText("span", ": ") + ); + } + + const time = new Date(timestamp).toTimeString(); + elements.push(renderText("span", `${time} ${type}`)); + + if (packetsReceived) { + elements.push( + renderElement( + "span", + { className: "stat-label" }, + "about-webrtc-received-label", + { + packets: packetsReceived, + } + ) + ); + + if (bytesReceived) { + let s = ` (${(bytesReceived / 1024).toFixed(2)} Kb`; + if (local && hist) { + s += ` , ${estimateKBps( + timestamp, + hist[id].lastTimestamp, + bytesReceived, + hist[id].lastBytesReceived + )} KBps`; + } + s += ")"; + elements.push(renderText("span", s)); + } + + elements.push( + renderElement( + "span", + { className: "stat-label" }, + "about-webrtc-lost-label", + { + packets: packetsLost, + } + ) + ); + elements.push( + renderElement( + "span", + { className: "stat-label" }, + "about-webrtc-jitter-label", + { + jitter, + } + ) + ); + + if (roundTripTime !== undefined) { + elements.push(renderText("span", ` RTT: ${roundTripTime * 1000} ms`)); + } + } else if (packetsSent) { + elements.push( + renderElement( + "span", + { className: "stat-label" }, + "about-webrtc-sent-label", + { + packets: packetsSent, + } + ) + ); + if (bytesSent) { + let s = ` (${(bytesSent / 1024).toFixed(2)} Kb`; + if (local && hist) { + s += `, ${estimateKBps( + timestamp, + hist[id].lastTimestamp, + bytesSent, + hist[id].lastBytesSent + )} KBps`; + } + s += ")"; + elements.push(renderText("span", s)); + } + } + + // Update history + if (hist) { + hist[id].lastBytesReceived = bytesReceived; + hist[id].lastBytesSent = bytesSent; + hist[id].lastTimestamp = timestamp; + } + + return renderElements("div", {}, elements); +} + +function renderRawIceTable(caption, candidates) { + const table = renderSimpleTable( + "", + [caption], + [...new Set(candidates.sort())].filter(i => i).map(i => [i]) + ); + table.className = "raw-candidate"; + return table; +} + +function renderConfiguration(rndr, c) { + const provided = "about-webrtc-configuration-element-provided"; + const notProvided = "about-webrtc-configuration-element-not-provided"; + + // Create the text for a configuration field + const cfg = (obj, key) => [ + renderElement("br"), + `${key}: `, + key in obj ? obj[key] : renderElement("i", {}, notProvided), + ]; + + // Create the text for a fooProvided configuration field + const pro = (obj, key) => [ + renderElement("br"), + `${key}(`, + renderElement("i", {}, provided), + `/`, + renderElement("i", {}, notProvided), + `): `, + renderElement("i", {}, obj[`${key}Provided`] ? provided : notProvided), + ]; + + const confDiv = rndr.elem_div({ display: "contents" }); + let disclosure = renderFoldableSection(confDiv, { + showMsg: "about-webrtc-pc-configuration-show-msg", + hideMsg: "about-webrtc-pc-configuration-hide-msg", + }); + disclosure.append( + rndr.elems_div({ classList: "peer-connection-config" }, [ + "RTCConfiguration", + ...cfg(c, "bundlePolicy"), + ...cfg(c, "iceTransportPolicy"), + ...pro(c, "peerIdentity"), + ...cfg(c, "sdpSemantics"), + renderElement("br"), + "iceServers: ", + ...(!c.iceServers + ? [renderElement("i", {}, notProvided)] + : c.iceServers.map(i => + renderElements("div", {}, [ + `urls: ${JSON.stringify(i.urls)}`, + ...pro(i, "credential"), + ...pro(i, "userName"), + ]) + )), + ]) + ); + confDiv.append(disclosure); + return confDiv; +} + +function renderICEStats(rndr, report) { + const iceDiv = renderElements("div", { id: "ice-stats: " + report.pcid }, [ + renderElement("h4", {}, "about-webrtc-ice-stats-heading"), + ]); + + // Render ICECandidate table + { + const caption = renderElement( + "caption", + { className: "no-print" }, + "about-webrtc-trickle-caption-msg" + ); + + // Generate ICE stats + const stats = []; + { + // Create an index based on candidate ID for each element in the + // iceCandidateStats array. + const candidates = {}; + for (const candidate of report.iceCandidateStats) { + candidates[candidate.id] = candidate; + } + + // a method to see if a given candidate id is in the array of tickled + // candidates. + const isTrickled = candidateId => + report.trickledIceCandidateStats.some(({ id }) => id == candidateId); + + // A component may have a remote or local candidate address or both. + // Combine those with both; these will be the peer candidates. + const matched = {}; + + for (const { + localCandidateId, + remoteCandidateId, + componentId, + state, + priority, + nominated, + selected, + bytesSent, + bytesReceived, + } of report.iceCandidatePairStats) { + const local = candidates[localCandidateId]; + if (local) { + const stat = { + ["local-candidate"]: candidateToString(local), + componentId, + state, + priority, + nominated, + selected, + bytesSent, + bytesReceived, + }; + matched[local.id] = true; + if (isTrickled(local.id)) { + stat["local-trickled"] = true; + } + + const remote = candidates[remoteCandidateId]; + if (remote) { + stat["remote-candidate"] = candidateToString(remote); + matched[remote.id] = true; + if (isTrickled(remote.id)) { + stat["remote-trickled"] = true; + } + } + stats.push(stat); + } + } + + // sort (group by) componentId first, then bytesSent if available, else by + // priority + stats.sort((a, b) => { + if (a.componentId != b.componentId) { + return a.componentId - b.componentId; + } + return b.bytesSent + ? b.bytesSent - (a.bytesSent || 0) + : (b.priority || 0) - (a.priority || 0); + }); + } + // Render ICE stats + // don't use |stat.x || ""| here because it hides 0 values + const statsTable = renderSimpleTable( + caption, + [ + "about-webrtc-ice-state", + "about-webrtc-nominated", + "about-webrtc-selected", + "about-webrtc-local-candidate", + "about-webrtc-remote-candidate", + "about-webrtc-ice-component-id", + "about-webrtc-priority", + "about-webrtc-ice-pair-bytes-sent", + "about-webrtc-ice-pair-bytes-received", + ], + stats.map(stat => + [ + stat.state, + stat.nominated, + stat.selected, + stat["local-candidate"], + stat["remote-candidate"], + stat.componentId, + stat.priority, + stat.bytesSent, + stat.bytesReceived, + ].map(entry => (Object.is(entry, undefined) ? "" : entry)) + ) + ); + + // after rendering the table, we need to change the class name for each + // candidate pair's local or remote candidate if it was trickled. + let index = 0; + for (const { + state, + nominated, + selected, + "local-trickled": localTrickled, + "remote-trickled": remoteTrickled, + } of stats) { + // look at statsTable row index + 1 to skip column headers + const { cells } = statsTable.rows[++index]; + cells[0].className = `ice-${state}`; + if (nominated) { + cells[1].className = "ice-succeeded"; + } + if (selected) { + cells[2].className = "ice-succeeded"; + } + if (localTrickled) { + cells[3].className = "ice-trickled"; + } + if (remoteTrickled) { + cells[4].className = "ice-trickled"; + } + } + + // if the current row's component id changes, mark the bottom of the + // previous row with a thin, black border to differentiate the + // component id grouping. + let previousRow; + for (const row of statsTable.rows) { + if (previousRow) { + if (previousRow.cells[5].innerHTML != row.cells[5].innerHTML) { + previousRow.className = "bottom-border"; + } + } + previousRow = row; + } + iceDiv.append(statsTable); + } + // restart/rollback counts. + iceDiv.append( + renderIceMetric("about-webrtc-ice-restart-count-label", report.iceRestarts), + renderIceMetric( + "about-webrtc-ice-rollback-count-label", + report.iceRollbacks + ) + ); + + // Render raw ICECandidate section + { + const section = renderElements("div", {}, [ + renderElement("h4", {}, "about-webrtc-raw-candidates-heading"), + ]); + const foldSection = renderFoldableSection(section, { + showMsg: "about-webrtc-raw-cand-show-msg", + hideMsg: "about-webrtc-raw-cand-hide-msg", + }); + + // render raw candidates + foldSection.append( + renderElements("div", {}, [ + renderRawIceTable( + "about-webrtc-raw-local-candidate", + report.rawLocalCandidates + ), + renderRawIceTable( + "about-webrtc-raw-remote-candidate", + report.rawRemoteCandidates + ), + ]) + ); + section.append(foldSection); + iceDiv.append(section); + } + return iceDiv; +} + +function renderIceMetric(label, value) { + return renderElements("div", {}, [ + renderElement("span", { className: "info-label" }, label), + renderText("span", value, { className: "info-body" }), + ]); +} + +function candidateToString({ + type, + address, + port, + protocol, + candidateType, + relayProtocol, + proxied, +} = {}) { + if (!type) { + return "*"; + } + if (relayProtocol) { + candidateType = `${candidateType}-${relayProtocol}`; + } + proxied = type == "local-candidate" ? ` [${proxied}]` : ""; + return `${address}:${port}/${protocol}(${candidateType})${proxied}`; +} + +function renderUserPrefs() { + const getPref = key => { + switch (Services.prefs.getPrefType(key)) { + case Services.prefs.PREF_BOOL: + return Services.prefs.getBoolPref(key); + case Services.prefs.PREF_INT: + return Services.prefs.getIntPref(key); + case Services.prefs.PREF_STRING: + return Services.prefs.getStringPref(key); + } + return ""; + }; + const prefs = [ + "media.aboutwebrtc", + "media.peerconnection", + "media.navigator", + "media.getusermedia", + "media.gmp-gmpopenh264.enabled", + ]; + const renderPref = p => renderText("p", `${p}: ${getPref(p)}`); + const display = prefs + .flatMap(Services.prefs.getChildList) + .filter(Services.prefs.prefHasUserValue) + .map(renderPref); + return renderElements( + "div", + { + id: "prefs", + className: "prefs", + style: display.length ? "" : "visibility:hidden", + }, + [ + renderElements("span", { className: "section-heading" }, [ + renderElement( + "h3", + {}, + "about-webrtc-custom-webrtc-configuration-heading" + ), + ]), + ...display, + ] + ); +} + +function renderFoldableSection(parentElem, options = {}) { + const section = renderElement("div"); + if (parentElem) { + const ctrl = renderElements("div", { className: "section-ctrl no-print" }, [ + new FoldEffect(section, options).render(), + ]); + parentElem.append(ctrl); + } + return section; +} + +function renderSimpleTable(caption, headings, data) { + const heads = headings.map(text => renderElement("th", {}, text)); + const renderCell = text => renderText("td", text); + + return renderElements("table", {}, [ + caption, + renderElements("tr", {}, heads), + ...data.map(line => renderElements("tr", {}, line.map(renderCell))), + ]); +} + +class FoldEffect { + constructor( + target, + { + showMsg = "about-webrtc-fold-show-msg", + hideMsg = "about-webrtc-fold-hide-msg", + } = {} + ) { + Object.assign(this, { target, showMsg, hideMsg }); + } + + render() { + this.target.classList.add("fold-target"); + this.trigger = renderElement("div", { className: "fold-trigger" }); + this.trigger.classList.add(this.showMsg, this.hideMsg); + this.collapse(); + this.trigger.onclick = () => { + if (this.target.classList.contains("fold-closed")) { + this.expand(); + } else { + this.collapse(); + } + }; + return this.trigger; + } + + expand() { + this.target.classList.remove("fold-closed"); + document.l10n.setAttributes(this.trigger, this.hideMsg); + } + + collapse() { + this.target.classList.add("fold-closed"); + document.l10n.setAttributes(this.trigger, this.showMsg); + } + + static expandAll() { + for (const target of document.getElementsByClassName("fold-closed")) { + target.classList.remove("fold-closed"); + } + for (const trigger of document.getElementsByClassName("fold-trigger")) { + const hideMsg = trigger.classList[2]; + document.l10n.setAttributes(trigger, hideMsg); + } + } + + static collapseAll() { + for (const target of document.getElementsByClassName("fold-target")) { + target.classList.add("fold-closed"); + } + for (const trigger of document.getElementsByClassName("fold-trigger")) { + const showMsg = trigger.classList[1]; + document.l10n.setAttributes(trigger, showMsg); + } + } +} diff --git a/toolkit/content/aboutwebrtc/graph.mjs b/toolkit/content/aboutwebrtc/graph.mjs new file mode 100644 index 0000000000..fefb564a38 --- /dev/null +++ b/toolkit/content/aboutwebrtc/graph.mjs @@ -0,0 +1,150 @@ +/* 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 http://mozilla.org/MPL/2.0/. */ + +function compStyle(property) { + return getComputedStyle(window.document.body).getPropertyValue(property); +} + +function toHumanReadable(num, fpDecimals) { + const prefixes = [..." kMGTPEYZYRQ"]; + const inner = (curr, remainingPrefixes) => { + return Math.abs(curr >= 1000) + ? inner(curr / 1000, remainingPrefixes.slice(1, -1)) + : [curr.toFixed(fpDecimals), remainingPrefixes[0].trimEnd()]; + }; + return inner(num, prefixes); +} + +class GraphImpl { + constructor(canvas, width, height) { + this.canvas = canvas; + this.width = width; + this.height = height; + this.drawCtx = canvas.getContext("2d"); + } + + // The returns the earliest time to graph + startTime = dataSet => (dataSet.earliest() || { time: 0 }).time; + + // Returns the latest time to graph + stopTime = dataSet => (dataSet.latest() || { time: 0 }).time; + + /** @type {HTMLCanvasElement} */ + canvas = {}; + /** @type {CanvasRenderingContext2D} */ + drawCtx = {}; + // The default background color + bgColor = () => compStyle("--in-content-page-background"); + // The color to use for value graph lines + valueLineColor = () => "grey"; + // The color to use for average graph lines and text + averageLineColor = () => "green"; + // The color to use for the max value + maxColor = ({ time, value }) => "grey"; + // The color to use for the min value + minColor = ({ time, value }) => "grey"; + // Title color + titleColor = title => compStyle("--in-content-page-color"); + // The color to use for a data point at a time. + // The destination x coordinate and graph width are also provided. + datumColor = ({ time, value, x, width }) => "red"; + + drawSparseValues = (dataSet, title, config) => { + if (config.toRate) { + dataSet = dataSet.toRateDataSet(); + } + const { drawCtx: ctx, width, height } = this; + // Clear the canvas + const bgColor = this.bgColor(); + ctx.fillStyle = bgColor; + ctx.clearRect(0, 0, width, height); + ctx.fillRect(0, 0, width, height); + + const startTime = this.startTime(dataSet); + const stopTime = this.stopTime(dataSet); + let timeFilter = ({ time }) => time >= startTime && time <= stopTime; + + let avgDataSet = { dataPoints: [] }; + if (!config.noAvg) { + avgDataSet = dataSet.toRollingAverageDataSet(config.avgPoints); + } + + let filtered = dataSet.filter(timeFilter); + if (filtered.dataPoints == []) { + return; + } + + let range = filtered.dataRange(); + if (range === undefined) { + return; + } + let { min: rangeMin, max: rangeMax } = range; + + // Adjust the _display_ range to lift flat lines towards the center + if (rangeMin == rangeMax) { + rangeMin = rangeMin - 1; + rangeMax = rangeMax + 1; + } + const yFactor = (height - 26) / (1 + rangeMax - rangeMin); + const yPos = ({ value }) => + this.height - 1 - (value - rangeMin) * yFactor - 13; + const xFactor = width / (1 + stopTime - startTime); + const xPos = ({ time }) => (time - startTime) * xFactor; + ctx.lineWidth = 1; + ctx.beginPath(); + ctx.strokeStyle = this.valueLineColor(); + [...filtered.dataPoints].forEach((datum, index) => { + if (!index) { + ctx.moveTo(xPos(datum), yPos(datum)); + } else { + ctx.lineTo(xPos(datum), yPos(datum)); + } + // Draw data point + ctx.fillStyle = this.datumColor({ ...datum, width: this.width }); + ctx.fillRect(xPos(datum), yPos(datum), 1, 1); + }); + ctx.stroke(); + + // Rolling average + ctx.lineWidth = 2; + ctx.strokeStyle = this.averageLineColor(); + ctx.beginPath(); + const rollingAverage = avgDataSet.dataPoints; + [...rollingAverage].forEach((datum, index) => { + if (!index) { + ctx.moveTo(xPos(datum), yPos(datum)); + } else { + ctx.lineTo(xPos(datum), yPos(datum)); + } + }); + const fixed = num => num.toFixed(config.fixedPointDecimals); + const formatValue = value => + config.toHuman + ? toHumanReadable(value, config.fixedPointDecimals).join("") + : fixed(value); + rollingAverage.slice(-1).forEach(({ value }) => { + ctx.stroke(); + ctx.fillStyle = this.averageLineColor(); + ctx.font = "12px Arial"; + ctx.textAlign = "left"; + ctx.fillText(formatValue(value), 5, this.height - 4); + }); + + // Draw the title + if (title) { + ctx.fillStyle = this.titleColor(this); + ctx.font = "12px Arial"; + ctx.textAlign = "left"; + ctx.fillText(`${title}${config.toRate ? "/s" : ""}`, 5, 12); + } + ctx.font = "12px Arial"; + ctx.fillStyle = this.maxColor(range.max); + ctx.textAlign = "right"; + ctx.fillText(formatValue(range.max), this.width - 5, 12); + ctx.fillStyle = this.minColor(range.min); + ctx.fillText(formatValue(range.min), this.width - 5, this.height - 4); + }; +} + +export { GraphImpl }; diff --git a/toolkit/content/aboutwebrtc/graphdb.mjs b/toolkit/content/aboutwebrtc/graphdb.mjs new file mode 100644 index 0000000000..c559921113 --- /dev/null +++ b/toolkit/content/aboutwebrtc/graphdb.mjs @@ -0,0 +1,208 @@ +/* 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 http://mozilla.org/MPL/2.0/. */ + +const CHECK_RTC_STATS_COLLECTION = [ + "inboundRtpStreamStats", + "outboundRtpStreamStats", + "remoteInboundRtpStreamStats", + "remoteOutboundRtpStreamStats", +]; + +const DEFAULT_PROPS = { + avgPoints: 10, + histSecs: 15, + toRate: false, + noAvg: false, + fixedPointDecimals: 2, + toHuman: false, +}; + +const REMOTE_RTP_PROPS = "avgPoints=2;histSecs=90"; +const GRAPH_KEYS = [ + "inbound-rtp.framesPerSecond;noAvg", + "inbound-rtp.packetsReceived;toRate", + "inbound-rtp.packetsLost;toRate", + "inbound-rtp.jitter;fixedPointDecimals=4", + `remote-inbound-rtp.roundTripTime;${REMOTE_RTP_PROPS}`, + `remote-inbound-rtp.packetsReceived;toRate;${REMOTE_RTP_PROPS}`, + "outbound-rtp.packetsSent;toRate", + "outbound-rtp.nackCount", + "outbound-rtp.pliCount", + "outbound-rtp.firCount", + `remote-outbound-rtp.bytesSent;toHuman;toRate;${REMOTE_RTP_PROPS}`, + `remote-outbound-rtp.packetsSent;toRate;${REMOTE_RTP_PROPS}`, +] + .map(k => k.split(".", 2)) + .reduce((mapOfArr, [k, rest]) => { + mapOfArr[k] ??= []; + const [subKey, ...conf] = rest.split(";"); + let config = conf.reduce((c, v) => { + let [configName, ...configVal] = v.split("=", 2); + c[configName] = !configVal.length ? true : configVal[0]; + return c; + }, {}); + mapOfArr[k].push({ subKey, config }); + return mapOfArr; + }, {}); + +// Sliding window iterator of size n (where: n >= 1) over the array. +// Only returns full windows. +// Returns [] if n > array.length. +// eachN(['a','b','c','d','e'], 3) will yield the following values: +// ['a','b','c'], ['b','c','d'], and ['c','d','e'] +const eachN = (array, n) => { + return { + // Index state + index: 0, + // Iteration function + next() { + let slice = array.slice(this.index, this.index + n); + this.index++; + // Done is true _AFTER_ the last value has returned. + // When done is true, value is ignored. + return { value: slice, done: slice.length < n }; + }, + [Symbol.iterator]() { + return this; + }, + }; +}; + +const msToSec = ms => 1000 * ms; + +// +// A subset of the graph data +// +class GraphDataSet { + constructor(dataPoints) { + this.dataPoints = dataPoints; + } + + // The latest + latest = () => (this.dataPoints ? this.dataPoints.slice(-1)[0] : undefined); + + earliest = () => (this.dataPoints ? this.dataPoints[0] : undefined); + + // The returns the earliest time to graph + startTime = () => (this.earliest() || { time: 0 }).time; + + // Returns the latest time to graph + stopTime = () => (this.latest() || { time: 0 }).time; + + // Elapsed time within the display window + elapsed = () => + this.dataPoints ? this.latest().time - this.earliest().time : 0; + + // Return a new data set that has been filtered + filter = fn => new GraphDataSet([...this.dataPoints].filter(fn)); + + // The range of values in the set or or undefined if the set is empty + dataRange = () => + this.dataPoints.reduce( + ({ min, max }, { value }) => ({ + min: Math.min(min, value), + max: Math.max(max, value), + }), + this.dataPoints.length + ? { min: this.dataPoints[0].value, max: this.dataPoints[0].value } + : undefined + ); + + // Get the rates between points. By definition the rates will have + // one fewer data points. + toRateDataSet = () => + new GraphDataSet( + [...eachN(this.dataPoints, 2)].map(([a, b]) => ({ + // Time mid point + time: (b.time + a.time) / 2, + value: msToSec(b.value - a.value) / (b.time - a.time), + })) + ); + + average = samples => + samples.reduce( + ({ time, value }, { time: t, value: v }) => ({ + time: time + t / samples.length, + value: value + v / samples.length, + }), + { time: 0, value: 0 } + ); + + toRollingAverageDataSet = sampleSize => + new GraphDataSet([...eachN(this.dataPoints, sampleSize)].map(this.average)); +} + +class GraphData { + constructor(id, key, subKey, config) { + this.id = id; + this.key = key; + this.subKey = subKey; + this.data = []; + this.config = Object.assign({}, DEFAULT_PROPS, config); + } + + setValueForTime(dataPoint) { + this.data = this.data.filter(({ time: t }) => t != dataPoint.time); + this.data.push(dataPoint); + } + + getValuesSince = time => this.data.filter(dp => dp.time > time); + + getDataSetSince = time => + new GraphDataSet(this.data.filter(dp => dp.time > time)); + + getConfig = () => this.config; + + // Cull old data, but keep twice the window size for average computation + cullData = timeNow => + (this.data = this.data.filter( + ({ time }) => time + msToSec(this.config.histSecs * 2) > timeNow + )); +} + +class GraphDb { + constructor(report) { + this.graphDatas = new Map(); + this.insertReportData(report); + } + + mkStoreKey = ({ id, key, subKey }) => `${key}.${id}.${subKey}`; + + insertDataPoint(id, key, subKey, config, time, value) { + let storeKey = this.mkStoreKey({ id, key, subKey }); + let data = + this.graphDatas.get(storeKey) || new GraphData(id, key, subKey, config); + data.setValueForTime({ time, value }); + data.cullData(time); + this.graphDatas.set(storeKey, data); + } + + insertReportData(report) { + if (report.timestamp == this.lastReportTimestamp) { + return; + } + this.lastReportTimestamp = report.timestamp; + CHECK_RTC_STATS_COLLECTION.forEach(listName => { + (report[listName] || []).forEach(stats => { + (GRAPH_KEYS[stats.type] || []).forEach(({ subKey, config }) => { + if (stats[subKey] !== undefined) { + this.insertDataPoint( + stats.id, + stats.type, + subKey, + config, + stats.timestamp, + stats[subKey] + ); + } + }); + }); + }); + } + + getGraphDataById = id => + [...this.graphDatas.values()].filter(gd => gd.id == id); +} + +export { GraphDb }; -- cgit v1.2.3