| /** |
| * @module module/perf-scaffold-sk |
| * @description <h2><code>perf-scaffold-sk</code></h2> |
| * |
| * Contains the title bar and error-toast for all the Perf pages. The rest of |
| * every Perf page should be a child of this element. |
| * |
| */ |
| import { define } from 'elements-sk/define'; |
| import { html } from 'lit-html'; |
| import { ElementSk } from '../../../infra-sk/modules/ElementSk'; |
| import 'elements-sk/error-toast-sk'; |
| import 'elements-sk/icon/add-alert-icon-sk'; |
| import 'elements-sk/icon/build-icon-sk'; |
| import 'elements-sk/icon/event-icon-sk'; |
| import 'elements-sk/icon/folder-icon-sk'; |
| import 'elements-sk/icon/help-icon-sk'; |
| import 'elements-sk/icon/home-icon-sk'; |
| import 'elements-sk/icon/menu-icon-sk'; |
| import 'elements-sk/icon/sort-icon-sk'; |
| import 'elements-sk/icon/trending-up-icon-sk'; |
| import '../../../infra-sk/modules/alogin-sk'; |
| import '../../../infra-sk/modules/theme-chooser-sk'; |
| |
| // The class applied to perf-scaffold-sk that hides the sidebar. It is also used |
| // as the key for localStorage, which is used to remember the user's preference. |
| const SIDEBAR_HIDDEN_CLASS = 'sidebar_hidden'; |
| |
| // The ID of a top level element under perf-scaffold-sk that will be moved under |
| // the right hand side nav bar. |
| const SIDEBAR_HELP_ID = 'sidebar_help'; |
| |
| /** |
| * Moves the elements from a list to be the children of the target element. |
| * |
| * @param from - The list of elements we are moving. |
| * @param to - The new parent. |
| */ |
| function move(from: HTMLCollection | NodeList, to: HTMLElement) { |
| Array.prototype.slice.call(from).forEach((ele) => to.appendChild(ele)); |
| } |
| |
| export class PerfScaffoldSk extends ElementSk { |
| private _main: HTMLElement | null = null; |
| |
| private _help: HTMLElement | null = null; |
| |
| constructor() { |
| super(PerfScaffoldSk.template); |
| } |
| |
| private static template = (ele: PerfScaffoldSk) => html` |
| <nav id=topbar> |
| <button id=toggleSidebarButton @click=${() => ele.toggleSidebar()}> |
| <menu-icon-sk></menu-icon-sk> |
| </button> |
| <h1 class=name>Perf</h1> |
| <alogin-sk url=/_/login/status></alogin-sk> |
| <theme-chooser-sk></theme-chooser-sk> |
| </nav> |
| <nav id=sidebar> |
| <ul> |
| <li><a href="/e/" tab-index=0 ><home-icon-sk></home-icon-sk><span>Home</span></a></li> |
| <li><a href="/t/" tab-index=0 ><trending-up-icon-sk></trending-up-icon-sk><span>Triage</span></a></li> |
| <li><a href="/a/" tab-index=0 ><add-alert-icon-sk></add-alert-icon-sk><span>Alerts</span></a></li> |
| <li><a href="/d/" tab-index=0 ><build-icon-sk></build-icon-sk><span>Dry Run</span></a></li> |
| <li><a href="/c/" tab-index=0 ><sort-icon-sk></sort-icon-sk><span>Clustering<span></a></li> |
| <li><a href="http://go/perf-user-doc" tab-index=0 ><help-icon-sk></help-icon-sk><span>Help</span></a></li> |
| </ul> |
| <div id=help> |
| </div> |
| </nav> |
| <main> |
| </main> |
| <error-toast-sk></error-toast-sk> |
| `; |
| |
| connectedCallback(): void { |
| super.connectedCallback(); |
| // Don't call more than once. |
| if (this._main) { |
| return; |
| } |
| // We aren't using shadow dom so we need to manually move the children of |
| // perf-scaffold-sk to be children of 'main'. We have to do this for the |
| // existing elements and for all future mutations. |
| |
| // Create a temporary holding spot for elements we're moving. |
| const div = document.createElement('div'); |
| move(this.children, div); |
| |
| // Now that we've moved all the old children out of the way we can render |
| // the template. |
| this._render(); |
| |
| this._main = this.querySelector('main'); |
| this._help = this.querySelector('#help'); |
| |
| // Move the old children back. |
| this.redistributeAddedNodes(div.childNodes); |
| |
| // Move all future children also. |
| const observer = new MutationObserver((mutList) => { |
| mutList.forEach((mut) => { |
| this.redistributeAddedNodes(mut.addedNodes); |
| }); |
| }); |
| observer.observe(this, { childList: true }); |
| // Force the sidebar status based on localStorage. If the user has never |
| // toggled the sidebar then localStorage.getItem will return null, which |
| // won't equal 'true', so we will show the sidebar by default. |
| this.classList.toggle( |
| SIDEBAR_HIDDEN_CLASS, |
| window.localStorage.getItem(SIDEBAR_HIDDEN_CLASS) === 'true', |
| ); |
| } |
| |
| |
| // Place these newly added nodes in the right place under the perf-scaffold-sk |
| // element. |
| private redistributeAddedNodes(from: NodeList) { |
| Array.prototype.slice.call(from).forEach((node: Node) => { |
| if ((node as Element).id === SIDEBAR_HELP_ID) { |
| this._help!.appendChild(node); |
| } else { |
| this._main!.appendChild(node); |
| } |
| }); |
| } |
| |
| private toggleSidebar() { |
| this.classList.toggle(SIDEBAR_HIDDEN_CLASS); |
| // Remember the user's preference. |
| window.localStorage.setItem( |
| SIDEBAR_HIDDEN_CLASS, |
| this.classList.contains(SIDEBAR_HIDDEN_CLASS).toString(), |
| ); |
| } |
| } |
| |
| define('perf-scaffold-sk', PerfScaffoldSk); |