infra/perfetto.dev/src/assets/script.js - third_party/perfetto - Git at Google

 // Copyright (C) 2020 The Android Open Source Project
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
 //
 //      http://www.apache.org/licenses/LICENSE-2.0
 //
 // Unless required by applicable law or agreed to in writing, software
 // distributed under the License is distributed on an "AS IS" BASIS,
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.

 "use strict";

 let tocAnchors = [];
 let lastMouseOffY = 0;
 let onloadFired = false;
 const postLoadActions = [];
 let tocEventHandlersInstalled = false;
 let resizeObserver = undefined;

 function doAfterLoadEvent(action) {
   if (onloadFired) {
     return action();
   }
   postLoadActions.push(action);
 }

 function setupSandwichMenu() {
   const header = document.querySelector(".site-header");
   const docsNav = document.querySelector(".nav");
   const menu = header.querySelector(".menu");
   menu.addEventListener("click", (e) => {
     e.preventDefault();

     // If we are displaying any /docs, toggle the navbar instead (the TOC).
     if (docsNav) {
       // |after_first_click| is to avoid spurious transitions on page load.
       docsNav.classList.add("after_first_click");
       updateNav();
       setTimeout(() => docsNav.classList.toggle("expanded"), 0);
     } else {
       header.classList.toggle("expanded");
     }
   });
 }

 // (Re-)Generates the Table Of Contents for docs (the right-hand-side one).
 function updateTOC() {
   const tocContainer = document.querySelector(".docs .toc");
   if (!tocContainer) return;
   const toc = document.createElement("ul");
   const anchors = document.querySelectorAll(".doc a.anchor");
   tocAnchors = [];
   for (const anchor of anchors) {
     const li = document.createElement("li");
     const link = document.createElement("a");
     link.innerText = anchor.parentElement.innerText;
     link.href = anchor.href;
     link.onclick = () => {
       onScroll(link);
     };
     li.appendChild(link);
     if (anchor.parentElement.tagName === "H3") li.style.paddingLeft = "10px";
     toc.appendChild(li);
     doAfterLoadEvent(() => {
       tocAnchors.push({
         top: anchor.offsetTop + anchor.offsetHeight / 2,
         obj: link,
       });
     });
   }
   tocContainer.innerHTML = "";
   tocContainer.appendChild(toc);

   // Add event handlers on the first call (can be called more than once to
   // recompute anchors on resize).
   if (tocEventHandlersInstalled) return;
   tocEventHandlersInstalled = true;
   const doc = document.querySelector(".doc");
   const passive = { passive: true };
   if (doc) {
     const offY = doc.offsetTop;
     doc.addEventListener("mousemove", (e) => onMouseMove(offY, e), passive);
     doc.addEventListener(
       "mouseleave",
       () => {
         lastMouseOffY = 0;
       },
       passive,
     );
   }
   window.addEventListener("scroll", () => onScroll(), passive);
   resizeObserver = new ResizeObserver(() =>
     requestAnimationFrame(() => {
       updateNav();
       updateTOC();
     }),
   );
   resizeObserver.observe(doc);
 }

 // Highlights the current TOC anchor depending on the scroll offset.
 function onMouseMove(offY, e) {
   lastMouseOffY = e.clientY - offY;
   onScroll();
 }

 function onScroll(forceHighlight) {
   const y = document.documentElement.scrollTop + lastMouseOffY;
   let highEl = undefined;
   for (const x of tocAnchors) {
     if (y < x.top) continue;
     highEl = x.obj;
   }
   for (const link of document.querySelectorAll(".docs .toc a")) {
     if ((!forceHighlight && link === highEl) || forceHighlight === link) {
       link.classList.add("highlighted");
     } else {
       link.classList.remove("highlighted");
     }
   }
 }

 // This function needs to be idempotent as it is called more than once (on every
 // resize).
 function updateNav() {
   const curDoc = document.querySelector(".doc");
   let curFileName = "";
   if (curDoc) curFileName = curDoc.dataset["mdFile"];

   // First identify all the top-level nav entries (Quickstart, Data Sources,
   // ...) and make them compressible.
   const toplevelSections = document.querySelectorAll(".docs .nav > ul > li");
   const toplevelLinks = [];
   for (const sec of toplevelSections) {
     const childMenu = sec.querySelector("ul");
     if (!childMenu) {
       // Don't make it compressible if it has no children (e.g. the very
       // first 'Introduction' link).
       continue;
     }

     // Don't make it compressible if the entry has an actual link (e.g. the very
     // first 'Introduction' link), because otherwise it become ambiguous whether
     // the link should toggle or open the link.
     const link = sec.querySelector("a");
     if (!link || !link.href.endsWith("#")) continue;

     sec.classList.add("compressible");

     // Remember the compressed status as long as the page is opened, so clicking
     // through links keeps the sidebar in a consistent visual state.
     const memoKey = `docs.nav.compressed[${link.innerHTML}]`;

     if (sessionStorage.getItem(memoKey) === "1") {
       sec.classList.add("compressed");
     }
     doAfterLoadEvent(() => {
       childMenu.style.maxHeight = `${childMenu.scrollHeight + 40}px`;
     });

     toplevelLinks.push(link);
     link.onclick = (evt) => {
       evt.preventDefault();
       sec.classList.toggle("compressed");
       if (sec.classList.contains("compressed")) {
         sessionStorage.setItem(memoKey, "1");
       } else {
         sessionStorage.removeItem(memoKey);
       }
     };
   }

   const exps = document.querySelectorAll(".docs .nav ul a");
   let found = false;
   for (const x of exps) {
     // If the url of the entry matches the url of the page, mark the item as
     // highlighted and expand all its parents.
     if (!x.href) continue;
     const url = new URL(x.href);
     if (x.href.endsWith("#")) {
       // This is a non-leaf link to a menu.
       if (toplevelLinks.indexOf(x) < 0) {
         x.removeAttribute("href");
       }
     } else if (url.pathname === curFileName && !found) {
       x.classList.add("selected");
       doAfterLoadEvent(() => x.scrollIntoViewIfNeeded());
       found = true; // Highlight only the first occurrence.
     }
   }
 }

 // If the page contains a ```mermaid ``` block, lazily loads the plugin and
 // renders.
 function initMermaid() {
   const graphs = document.querySelectorAll(".mermaid");

   // Skip if there are no mermaid graphs to render.
   if (!graphs.length) return;

   const script = document.createElement("script");
   script.type = "text/javascript";
   script.src = "/assets/mermaid.min.js";
   const themeCSS = `
   .cluster rect { fill: #FCFCFC; stroke: #ddd }
   .node rect { fill: #DCEDC8; stroke: #8BC34A}
   .edgeLabel:not(:empty) {
       border-radius: 6px;
       font-size: 0.9em;
       padding: 4px;
       background: #F5F5F5;
       border: 1px solid #DDDDDD;
       color: #666;
   }
   `;
   script.addEventListener("load", () => {
     mermaid.initialize({
       startOnLoad: false,
       themeCSS: themeCSS,
       securityLevel: "loose", // To allow #in-page-links
     });
     for (const graph of graphs) {
       requestAnimationFrame(() => {
         mermaid.init(undefined, graph);
         graph.classList.add("rendered");
       });
     }
   });
   document.body.appendChild(script);
 }

 function setupSearch() {
   const URL =
     "https://www.googleapis.com/customsearch/v1?key=AIzaSyBTD2XJkQkkuvDn76LSftsgWOkdBz9Gfwo&cx=007128963598137843411:8suis14kcmy&q=";
   const searchContainer = document.getElementById("search");
   const searchBox = document.getElementById("search-box");
   const searchRes = document.getElementById("search-res");
   if (!searchBox || !searchRes) return;

   document.body.addEventListener("keydown", (e) => {
     if (e.key === "/" && e.target.tagName.toLowerCase() === "body") {
       searchBox.setSelectionRange(0, -1);
       searchBox.focus();
       e.preventDefault();
     } else if (e.key === "Escape" && searchContainer.contains(e.target)) {
       searchBox.blur();

       // Handle the case of clicking Tab and moving down to results.
       e.target.blur();
     }
   });

   let timerId = -1;
   let lastSearchId = 0;

   const doSearch = async () => {
     timerId = -1;
     searchRes.style.width = `${searchBox.offsetWidth}px`;

     // `searchId` handles the case of two subsequent requests racing. This is to
     // prevent older results, delivered in reverse order, to replace newer ones.
     const searchId = ++lastSearchId;
     const f = await fetch(URL + encodeURIComponent(searchBox.value));
     const jsonRes = await f.json();
     const results = jsonRes["items"];
     searchRes.innerHTML = "";
     if (results === undefined || searchId != lastSearchId) {
       return;
     }
     for (const res of results) {
       const link = document.createElement("a");
       link.href = res.link;
       const title = document.createElement("div");
       title.className = "sr-title";
       title.innerText = res.title.replace(" - Perfetto Tracing Docs", "");
       link.appendChild(title);

       const snippet = document.createElement("div");
       snippet.className = "sr-snippet";
       snippet.innerText = res.snippet;
       link.appendChild(snippet);

       const div = document.createElement("div");
       div.appendChild(link);
       searchRes.appendChild(div);
     }
   };

   searchBox.addEventListener("keyup", () => {
     if (timerId >= 0) return;
     timerId = setTimeout(doSearch, 200);
   });
 }

 window.addEventListener("DOMContentLoaded", () => {
   updateNav();
   updateTOC();
 });

 window.addEventListener("load", () => {
   setupSandwichMenu();
   initMermaid();

   // Don't smooth-scroll on pages that are too long (e.g. reference pages).
   if (document.body.scrollHeight < 10000) {
     document.documentElement.style.scrollBehavior = "smooth";
   } else {
     document.documentElement.style.scrollBehavior = "initial";
   }

   onloadFired = true;
   while (postLoadActions.length > 0) {
     postLoadActions.shift()();
   }

   updateTOC();
   setupSearch();

   // Enable animations only after the load event. This is to prevent glitches
   // when switching pages.
   document.documentElement.style.setProperty("--anim-enabled", "1");
 });

 // Handles redirects from the old docs.perfetto.dev.
 const legacyRedirectMap = {
   "#/contributing": "/docs/contributing/getting-started#community",
   "#/build-instructions": "/docs/contributing/build-instructions",
   "#/testing": "/docs/contributing/testing",
   "#/app-instrumentation": "/docs/instrumentation/tracing-sdk",
   "#/recording-traces": "/docs/instrumentation/tracing-sdk#recording",
   "#/running": "/docs/quickstart/android-tracing",
   "#/long-traces": "/docs/concepts/config#long-traces",
   "#/detached-mode": "/docs/concepts/detached-mode",
   "#/heapprofd": "/docs/data-sources/native-heap-profiler",
   "#/java-hprof": "/docs/data-sources/java-heap-profiler",
   "#/trace-processor": "/docs/analysis/trace-processor",
   "#/analysis": "/docs/analysis/trace-processor#annotations",
   "#/metrics": "/docs/analysis/metrics",
   "#/traceconv": "/docs/quickstart/traceconv",
   "#/clock-sync": "/docs/concepts/clock-sync",
   "#/architecture": "/docs/concepts/service-model",
 };

 const fragment = location.hash.split("?")[0].replace(".md", "");
 if (fragment in legacyRedirectMap) {
   location.replace(legacyRedirectMap[fragment]);
 }

 // Pages which have been been removed/renamed/moved and need to be redirected
 // to their new home.
 const redirectMap = {
   // stdlib docs is not a perfect replacement but is good enough until we write
   // a proper, Android specific query codelab page.
   // TODO(lalitm): switch to that page when it's ready.
   "/docs/analysis/common-queries": "/docs/analysis/stdlib-docs",
 };

 if (location.pathname in redirectMap) {
   location.replace(redirectMap[location.pathname]);
 }
	// Copyright (C) 2020 The Android Open Source Project
	//
	// Licensed under the Apache License, Version 2.0 (the "License");
	// you may not use this file except in compliance with the License.
	// You may obtain a copy of the License at
	//
	// http://www.apache.org/licenses/LICENSE-2.0
	//
	// Unless required by applicable law or agreed to in writing, software
	// distributed under the License is distributed on an "AS IS" BASIS,
	// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	// See the License for the specific language governing permissions and
	// limitations under the License.

	"use strict";

	let tocAnchors = [];
	let lastMouseOffY = 0;
	let onloadFired = false;
	const postLoadActions = [];
	let tocEventHandlersInstalled = false;
	let resizeObserver = undefined;

	function doAfterLoadEvent(action) {
	if (onloadFired) {
	return action();
	}
	postLoadActions.push(action);
	}

	function setupSandwichMenu() {
	const header = document.querySelector(".site-header");
	const docsNav = document.querySelector(".nav");
	const menu = header.querySelector(".menu");
	menu.addEventListener("click", (e) => {
	e.preventDefault();

	// If we are displaying any /docs, toggle the navbar instead (the TOC).
	if (docsNav) {
	// \|after_first_click\| is to avoid spurious transitions on page load.
	docsNav.classList.add("after_first_click");
	updateNav();
	setTimeout(() => docsNav.classList.toggle("expanded"), 0);
	} else {
	header.classList.toggle("expanded");
	}
	});
	}

	// (Re-)Generates the Table Of Contents for docs (the right-hand-side one).
	function updateTOC() {
	const tocContainer = document.querySelector(".docs .toc");
	if (!tocContainer) return;
	const toc = document.createElement("ul");
	const anchors = document.querySelectorAll(".doc a.anchor");
	tocAnchors = [];
	for (const anchor of anchors) {
	const li = document.createElement("li");
	const link = document.createElement("a");
	link.innerText = anchor.parentElement.innerText;
	link.href = anchor.href;
	link.onclick = () => {
	onScroll(link);
	};
	li.appendChild(link);
	if (anchor.parentElement.tagName === "H3") li.style.paddingLeft = "10px";
	toc.appendChild(li);
	doAfterLoadEvent(() => {
	tocAnchors.push({
	top: anchor.offsetTop + anchor.offsetHeight / 2,
	obj: link,
	});
	});
	}
	tocContainer.innerHTML = "";
	tocContainer.appendChild(toc);

	// Add event handlers on the first call (can be called more than once to
	// recompute anchors on resize).
	if (tocEventHandlersInstalled) return;
	tocEventHandlersInstalled = true;
	const doc = document.querySelector(".doc");
	const passive = { passive: true };
	if (doc) {
	const offY = doc.offsetTop;
	doc.addEventListener("mousemove", (e) => onMouseMove(offY, e), passive);
	doc.addEventListener(
	"mouseleave",
	() => {
	lastMouseOffY = 0;
	},
	passive,
	);
	}
	window.addEventListener("scroll", () => onScroll(), passive);
	resizeObserver = new ResizeObserver(() =>
	requestAnimationFrame(() => {
	updateNav();
	updateTOC();
	}),
	);
	resizeObserver.observe(doc);
	}

	// Highlights the current TOC anchor depending on the scroll offset.
	function onMouseMove(offY, e) {
	lastMouseOffY = e.clientY - offY;
	onScroll();
	}

	function onScroll(forceHighlight) {
	const y = document.documentElement.scrollTop + lastMouseOffY;
	let highEl = undefined;
	for (const x of tocAnchors) {
	if (y < x.top) continue;
	highEl = x.obj;
	}
	for (const link of document.querySelectorAll(".docs .toc a")) {
	if ((!forceHighlight && link === highEl) \|\| forceHighlight === link) {
	link.classList.add("highlighted");
	} else {
	link.classList.remove("highlighted");
	}
	}
	}

	// This function needs to be idempotent as it is called more than once (on every
	// resize).
	function updateNav() {
	const curDoc = document.querySelector(".doc");
	let curFileName = "";
	if (curDoc) curFileName = curDoc.dataset["mdFile"];

	// First identify all the top-level nav entries (Quickstart, Data Sources,
	// ...) and make them compressible.
	const toplevelSections = document.querySelectorAll(".docs .nav > ul > li");
	const toplevelLinks = [];
	for (const sec of toplevelSections) {
	const childMenu = sec.querySelector("ul");
	if (!childMenu) {
	// Don't make it compressible if it has no children (e.g. the very
	// first 'Introduction' link).
	continue;
	}

	// Don't make it compressible if the entry has an actual link (e.g. the very
	// first 'Introduction' link), because otherwise it become ambiguous whether
	// the link should toggle or open the link.
	const link = sec.querySelector("a");
	if (!link \|\| !link.href.endsWith("#")) continue;

	sec.classList.add("compressible");

	// Remember the compressed status as long as the page is opened, so clicking
	// through links keeps the sidebar in a consistent visual state.
	const memoKey = `docs.nav.compressed[${link.innerHTML}]`;

	if (sessionStorage.getItem(memoKey) === "1") {
	sec.classList.add("compressed");
	}
	doAfterLoadEvent(() => {
	childMenu.style.maxHeight = `${childMenu.scrollHeight + 40}px`;
	});

	toplevelLinks.push(link);
	link.onclick = (evt) => {
	evt.preventDefault();
	sec.classList.toggle("compressed");
	if (sec.classList.contains("compressed")) {
	sessionStorage.setItem(memoKey, "1");
	} else {
	sessionStorage.removeItem(memoKey);
	}
	};
	}

	const exps = document.querySelectorAll(".docs .nav ul a");
	let found = false;
	for (const x of exps) {
	// If the url of the entry matches the url of the page, mark the item as
	// highlighted and expand all its parents.
	if (!x.href) continue;
	const url = new URL(x.href);
	if (x.href.endsWith("#")) {
	// This is a non-leaf link to a menu.
	if (toplevelLinks.indexOf(x) < 0) {
	x.removeAttribute("href");
	}
	} else if (url.pathname === curFileName && !found) {
	x.classList.add("selected");
	doAfterLoadEvent(() => x.scrollIntoViewIfNeeded());
	found = true; // Highlight only the first occurrence.
	}
	}
	}

	// If the page contains a ```mermaid ``` block, lazily loads the plugin and
	// renders.
	function initMermaid() {
	const graphs = document.querySelectorAll(".mermaid");

	// Skip if there are no mermaid graphs to render.
	if (!graphs.length) return;

	const script = document.createElement("script");
	script.type = "text/javascript";
	script.src = "/assets/mermaid.min.js";
	const themeCSS = `
	.cluster rect { fill: #FCFCFC; stroke: #ddd }
	.node rect { fill: #DCEDC8; stroke: #8BC34A}
	.edgeLabel:not(:empty) {
	border-radius: 6px;
	font-size: 0.9em;
	padding: 4px;
	background: #F5F5F5;
	border: 1px solid #DDDDDD;
	color: #666;
	}
	`;
	script.addEventListener("load", () => {
	mermaid.initialize({
	startOnLoad: false,
	themeCSS: themeCSS,
	securityLevel: "loose", // To allow #in-page-links
	});
	for (const graph of graphs) {
	requestAnimationFrame(() => {
	mermaid.init(undefined, graph);
	graph.classList.add("rendered");
	});
	}
	});
	document.body.appendChild(script);
	}

	function setupSearch() {
	const URL =
	"https://www.googleapis.com/customsearch/v1?key=AIzaSyBTD2XJkQkkuvDn76LSftsgWOkdBz9Gfwo&cx=007128963598137843411:8suis14kcmy&q=";
	const searchContainer = document.getElementById("search");
	const searchBox = document.getElementById("search-box");
	const searchRes = document.getElementById("search-res");
	if (!searchBox \|\| !searchRes) return;

	document.body.addEventListener("keydown", (e) => {
	if (e.key === "/" && e.target.tagName.toLowerCase() === "body") {
	searchBox.setSelectionRange(0, -1);
	searchBox.focus();
	e.preventDefault();
	} else if (e.key === "Escape" && searchContainer.contains(e.target)) {
	searchBox.blur();

	// Handle the case of clicking Tab and moving down to results.
	e.target.blur();
	}
	});

	let timerId = -1;
	let lastSearchId = 0;

	const doSearch = async () => {
	timerId = -1;
	searchRes.style.width = `${searchBox.offsetWidth}px`;

	// `searchId` handles the case of two subsequent requests racing. This is to
	// prevent older results, delivered in reverse order, to replace newer ones.
	const searchId = ++lastSearchId;
	const f = await fetch(URL + encodeURIComponent(searchBox.value));
	const jsonRes = await f.json();
	const results = jsonRes["items"];
	searchRes.innerHTML = "";
	if (results === undefined \|\| searchId != lastSearchId) {
	return;
	}
	for (const res of results) {
	const link = document.createElement("a");
	link.href = res.link;
	const title = document.createElement("div");
	title.className = "sr-title";
	title.innerText = res.title.replace(" - Perfetto Tracing Docs", "");
	link.appendChild(title);

	const snippet = document.createElement("div");
	snippet.className = "sr-snippet";
	snippet.innerText = res.snippet;
	link.appendChild(snippet);

	const div = document.createElement("div");
	div.appendChild(link);
	searchRes.appendChild(div);
	}
	};

	searchBox.addEventListener("keyup", () => {
	if (timerId >= 0) return;
	timerId = setTimeout(doSearch, 200);
	});
	}

	window.addEventListener("DOMContentLoaded", () => {
	updateNav();
	updateTOC();
	});

	window.addEventListener("load", () => {
	setupSandwichMenu();
	initMermaid();

	// Don't smooth-scroll on pages that are too long (e.g. reference pages).
	if (document.body.scrollHeight < 10000) {
	document.documentElement.style.scrollBehavior = "smooth";
	} else {
	document.documentElement.style.scrollBehavior = "initial";
	}

	onloadFired = true;
	while (postLoadActions.length > 0) {
	postLoadActions.shift()();
	}

	updateTOC();
	setupSearch();

	// Enable animations only after the load event. This is to prevent glitches
	// when switching pages.
	document.documentElement.style.setProperty("--anim-enabled", "1");
	});

	// Handles redirects from the old docs.perfetto.dev.
	const legacyRedirectMap = {
	"#/contributing": "/docs/contributing/getting-started#community",
	"#/build-instructions": "/docs/contributing/build-instructions",
	"#/testing": "/docs/contributing/testing",
	"#/app-instrumentation": "/docs/instrumentation/tracing-sdk",
	"#/recording-traces": "/docs/instrumentation/tracing-sdk#recording",
	"#/running": "/docs/quickstart/android-tracing",
	"#/long-traces": "/docs/concepts/config#long-traces",
	"#/detached-mode": "/docs/concepts/detached-mode",
	"#/heapprofd": "/docs/data-sources/native-heap-profiler",
	"#/java-hprof": "/docs/data-sources/java-heap-profiler",
	"#/trace-processor": "/docs/analysis/trace-processor",
	"#/analysis": "/docs/analysis/trace-processor#annotations",
	"#/metrics": "/docs/analysis/metrics",
	"#/traceconv": "/docs/quickstart/traceconv",
	"#/clock-sync": "/docs/concepts/clock-sync",
	"#/architecture": "/docs/concepts/service-model",
	};

	const fragment = location.hash.split("?")[0].replace(".md", "");
	if (fragment in legacyRedirectMap) {
	location.replace(legacyRedirectMap[fragment]);
	}

	// Pages which have been been removed/renamed/moved and need to be redirected
	// to their new home.
	const redirectMap = {
	// stdlib docs is not a perfect replacement but is good enough until we write
	// a proper, Android specific query codelab page.
	// TODO(lalitm): switch to that page when it's ready.
	"/docs/analysis/common-queries": "/docs/analysis/stdlib-docs",
	};

	if (location.pathname in redirectMap) {
	location.replace(redirectMap[location.pathname]);
	}