// Copyright 2023 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
'use strict';
/**
* @fileoverview
* Constants, utilities, and objects for DOM access.
*/
/** @enum {string} Keys in query string and names of input elements. */
const STATE_KEY = {
LOAD_URL: 'load_url',
BEFORE_URL: 'before_url',
BYTE_UNIT: 'byteunit',
METHOD_COUNT: 'method_count',
MIN_SIZE: 'min_size',
GROUP_BY: 'group_by',
INCLUDE: 'include',
EXCLUDE: 'exclude',
TYPE: 'type',
FLAG_FILTER: 'flag_filter',
FOCUS: 'focus',
};
/** Utilities for working with the DOM */
const dom = {
/**
* Creates a document fragment from the given nodes.
* @param {Iterable<Node>} nodes
* @return {!DocumentFragment}
*/
createFragment(nodes) {
const fragment = document.createDocumentFragment();
for (const node of nodes)
fragment.appendChild(node);
return fragment;
},
/**
* Removes all the existing children of `parent` and inserts `newChild` in
* their place.
* @param {!Element} parent
* @param {Node | null} newChild
*/
replace(parent, newChild) {
parent.innerHTML = '';
if (newChild)
parent.appendChild(newChild);
},
/**
* Builds a text element in a single statement.
* @param {string} tagName Type of the element, such as "span".
* @param {string} text Text content for the element.
* @param {string} [className] Class to apply to the element.
*/
textElement(tagName, text, className) {
const element = document.createElement(tagName);
element.textContent = text;
if (className)
element.className = className;
return element;
},
/**
* Schedule a one-time |task| call on next animation frame when |node| is
* added to the DOM, or if |node| is already in the DOM.
* @param {!Node} node
* @param {!function(): *} task
*/
onNodeAdded(node, task) {
if (document.contains(node)) {
requestAnimationFrame(task);
return;
}
let found = false;
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
for (const node of mutation.addedNodes) {
if (node.contains(node)) {
observer.disconnect();
found = true;
requestAnimationFrame(task);
return;
}
}
}
});
observer.observe(document, {subtree: true, childList: true});
},
};
/** Centralized object for element access. */
class MainElements {
constructor() {
/** @public {!NodeList} Elements that toggle body.show-options on click. */
this.nlShowOptions =
/** @type {!NodeList} */ (document.querySelectorAll('.toggle-options'));
/** @public {!HTMLDivElement} */
this.divReviewInfo =
/** @type {!HTMLDivElement} */ (this.query('#div-review-info'));
/** @type {!HTMLAnchorElement} */
this.linkReviewText =
/** @type {!HTMLAnchorElement} */ (this.query('#link-review-text'));
/** @type {!HTMLAnchorElement} */
this.linkDownloadBefore =
/** @type {!HTMLAnchorElement} */ (this.query('#link-download-before'));
/** @type {!HTMLAnchorElement} */
this.linkDownloadLoad =
/** @type {!HTMLAnchorElement} */ (this.query('#link-download-load'));
/** @type {!HTMLInputElement} */
this.fileUpload =
/** @type {!HTMLInputElement} */ (this.query('#file-upload'));
/** @type {!HTMLAnchorElement} */
this.linkFaq =
/** @type {!HTMLAnchorElement} */ (this.query('#link-faq'));
/** @type {!HTMLProgressElement} */
this.progAppbar =
/** @type {!HTMLProgressElement} */ (this.query('#prog-appbar'));
/** @public {!HTMLFormElement} Form with options and filters. */
this.frmOptions =
/** @type {!HTMLFormElement} */ (this.query('#frm-options'));
/** @public {!HTMLInputElement} */
this.cbMethodCount =
/** @type {!HTMLInputElement} */ (this.query('#cb-method-count'));
/** @public {!HTMLSelectElement} */
this.selByteUnit =
/** @type {!HTMLSelectElement} */ (this.query('#sel-byte-unit'));
/** @public {!HTMLInputElement} */
this.nbMinSize =
/** @type {!HTMLInputElement} */ (this.query('#nb-min-size'));
/** @public {!RadioNodeList} */
this.rnlGroupBy = /** @type {!RadioNodeList} */ (
this.frmOptions.elements.namedItem(STATE_KEY.GROUP_BY));
assert(this.rnlGroupBy.length > 0);
/** @public {!HTMLInputElement} */
this.tbIncludeRegex =
/** @type {!HTMLInputElement} */ (this.query('#tb-include-regex'));
/** @public {!HTMLInputElement} */
this.tbExcludeRegex =
/** @type {!HTMLInputElement} */ (this.query('#tb-exclude-regex'));
/** @public {!RadioNodeList} */
this.rnlType = /** @type {!RadioNodeList} */ (
this.frmOptions.elements.namedItem(STATE_KEY.TYPE));
assert(this.rnlType.length > 0);
/** @type {!HTMLFieldSetElement} */
this.fsTypesFilter =
/** @type {!HTMLFieldSetElement} */ (this.query('#fs-types-filter'));
/** @type {!HTMLButtonElement} */
this.btnTypeAll =
/** @type {!HTMLButtonElement} */ (this.query('#btn-type-all'));
/** @type {!HTMLButtonElement} */
this.btnTypeNone =
/** @type {!HTMLButtonElement} */ (this.query('#btn-type-none'));
/** @public {!RadioNodeList} */
this.rnlFlagFilter = /** @type {!RadioNodeList} */ (
this.frmOptions.elements.namedItem(STATE_KEY.FLAG_FILTER));
assert(this.rnlFlagFilter.length > 0);
/** @public {!HTMLDivElement} */
this.divIcons =
/** @type {!HTMLDivElement} */ (this.query('#div-icons'));
/** @public {!HTMLDivElement} */
this.divDiffStatusIcons =
/** @type {!HTMLDivElement} */ (this.query('#div-diff-status-icons'));
/** @public {!HTMLDivElement} */
this.divMiscIcons =
/** @type {!HTMLDivElement} */ (this.query('#div-misc-icons'));
/** @type {!HTMLTemplateElement} Template for groups in the Symbol Tree. */
this.tmplSymbolTreeGroup = /** @type {!HTMLTemplateElement} */ (
this.query('#tmpl-symbol-tree-group'));
/** @type {!HTMLTemplateElement} Template for leaves in the Symbol Tree. */
this.tmplSymbolTreeLeaf = /** @type {!HTMLTemplateElement} */ (
this.query('#tmpl-symbol-tree-leaf'));
/** @type {!HTMLSpanElement} */
this.spanSizeHeader =
/** @type {!HTMLSpanElement} */ (this.query('#span-size-header'));
/** @type {!HTMLUListElement} */
this.ulSymbolTree =
/** @type {!HTMLUListElement} */ (this.query('#ul-symbol-tree'));
/** @type {!HTMLTemplateElement} Template for groups in the Metrics Tree. */
this.tmplMetricsTreeGroup = /** @type {!HTMLTemplateElement} */ (
this.query('#tmpl-metrics-tree-group'));
/** @type {!HTMLTemplateElement} Template for leaves in the Metrics Tree. */
this.tmplMetricsTreeLeaf = /** @type {!HTMLTemplateElement} */ (
this.query('#tmpl-metrics-tree-leaf'));
/** @public {!HTMLDivElement} */
this.divMetricsView =
/** @type {!HTMLDivElement} */ (this.query('#div-metrics-view'));
/** @type {!HTMLUListElement} */
this.ulMetricsTree =
/** @type {!HTMLUListElement} */ (this.query('#ul-metrics-tree'));
/** @public {!HTMLDivElement} */
this.divNoSymbolsMsg =
/** @type {!HTMLDivElement} */ (this.query('#div-no-symbols-msg'));
/**
* @type {!HTMLTemplateElement} Template for groups in the Metadata Tree.
*/
this.tmplMetadataTreeGroup = /** @type {!HTMLTemplateElement} */ (
this.query('#tmpl-metadata-tree-group'));
/**
* @type {!HTMLTemplateElement} Template for leaves in the Metadata Tree.
*/
this.tmplMetadataTreeLeaf = /** @type {!HTMLTemplateElement} */ (
this.query('#tmpl-metadata-tree-leaf'));
/** @public {!HTMLDivElement} */
this.divMetadataView =
/** @type {!HTMLDivElement} */ (this.query('#div-metadata-view'));
/** @type {!HTMLUListElement} */
this.ulMetadataTree =
/** @type {!HTMLUListElement} */ (this.query('#ul-metadata-tree'));
/** @public {!HTMLDivElement} */
this.divInfocardArtifact =
/** @type {!HTMLDivElement} */ (this.query('#div-infocard-artifact'));
/** @public {!HTMLDivElement} */
this.divInfocardSymbol =
/** @type {!HTMLDivElement} */ (this.query('#div-infocard-symbol'));
/** @public {!HTMLDivElement} */
this.divSigninModal =
/** @type {!HTMLDivElement} */ (this.query('#div-signin-modal'));
/** @public {!HTMLDivElement} */
this.divDisassemblyModal =
/** @type {!HTMLDivElement} */ (this.query('#div-disassembly-modal'));
}
/**
* @param {string} q Query string.
* @return {!Element}
* @private
*/
query(q) {
return /** @type {!Element} */ (assertNotNull(document.querySelector(q)));
}
/**
* @param {!Element} elt
* @return {!Element}
* @public
*/
getAriaDescribedBy(elt) {
const id = assertNotNull(elt.getAttribute('aria-describedby'));
return assertNotNull(document.getElementById(id));
}
}
/** @const {!MainElements} */
const g_el = new MainElements();
Codebase Browser
chromium