ui/src/frontend/topbar.ts - third_party/perfetto - Git at Google

 // Copyright (C) 2018 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.

 import m from 'mithril';

 import {Actions} from '../common/actions';
 import {Command} from '../common/commands';
 import {raf} from '../core/raf_scheduler';
 import {VERSION} from '../gen/perfetto_version';

 import {classNames} from './classnames';
 import {globals} from './globals';
 import {runQueryInNewTab} from './query_result_tab';
 import {executeSearch} from './search_handler';
 import {taskTracker} from './task_tracker';
 import {EmptyState} from './widgets/empty_state';
 import {Icon} from './widgets/icon';
 import {Popup} from './widgets/popup';

 const SEARCH = Symbol('search');
 const QUERY = Symbol('query');
 const COMMAND = Symbol('command');
 type Mode = typeof SEARCH|typeof QUERY|typeof COMMAND;
 let highlightedCommandIndex = 0;

 const PLACEHOLDER = {
   [SEARCH]: 'Search',
   [QUERY]: 'e.g. select * from sched left join thread using(utid) limit 10',
   [COMMAND]: 'Start typing a command..',
 };

 let matchingCommands: Command[] = [];

 export const DISMISSED_PANNING_HINT_KEY = 'dismissedPanningHint';

 let mode: Mode = SEARCH;
 let displayStepThrough = false;

 function onKeyDown(e: Event) {
   const event = (e as KeyboardEvent);
   const key = event.key;
   if (key !== 'Enter') {
     e.stopPropagation();
   }
   const txt = (e.target as HTMLInputElement);

   if (mode === SEARCH && txt.value === '' && key === ':') {
     e.preventDefault();
     mode = QUERY;
     raf.scheduleFullRedraw();
     return;
   }

   if (mode === SEARCH && txt.value === '' && key === '>') {
     e.preventDefault();
     mode = COMMAND;
     raf.scheduleFullRedraw();
     return;
   }

   if (mode !== SEARCH && txt.value === '' && key === 'Backspace') {
     mode = SEARCH;
     raf.scheduleFullRedraw();
     return;
   }

   if (mode === COMMAND) {
     if (key === 'ArrowDown') {
       highlightedCommandIndex++;
       highlightedCommandIndex =
           Math.min(matchingCommands.length - 1, highlightedCommandIndex);
       raf.scheduleFullRedraw();
     } else if (key === 'ArrowUp') {
       highlightedCommandIndex--;
       highlightedCommandIndex = Math.max(0, highlightedCommandIndex);
       raf.scheduleFullRedraw();
     } else if (key === 'Enter') {
       const cmd = matchingCommands[highlightedCommandIndex];
       if (cmd) {
         globals.commandManager.runCommand(cmd.id);
       }
       highlightedCommandIndex = 0;
       mode = SEARCH;
       globals.dispatch(Actions.setOmnibox({
         omnibox: '',
         mode: 'SEARCH',
       }));
     } else {
       highlightedCommandIndex = 0;
     }
   }

   if (mode === SEARCH && key === 'Enter') {
     txt.blur();
   }

   if (mode === QUERY && key === 'Enter') {
     const openInPinnedTab = event.metaKey || event.ctrlKey;
     runQueryInNewTab(
         txt.value,
         openInPinnedTab ? 'Pinned query' : 'Omnibox query',
         openInPinnedTab ? undefined : 'omnibox_query',
     );
   }
 }

 function onKeyUp(e: Event) {
   e.stopPropagation();
   const event = (e as KeyboardEvent);
   const key = event.key;
   const txt = e.target as HTMLInputElement;

   if (key === 'Escape') {
     mode = SEARCH;
     txt.value = '';
     txt.blur();
     raf.scheduleFullRedraw();
     return;
   }
 }

 interface CmdAttrs {
   title: string;
   subtitle: string;
   highlighted?: boolean;
   icon?: string;
   [htmlAttrs: string]: any;
 }

 class Cmd implements m.ClassComponent<CmdAttrs> {
   view({attrs}: m.Vnode<CmdAttrs, this>): void|m.Children {
     const {title, subtitle, icon, highlighted = false, ...htmlAttrs} = attrs;
     return m(
         'section.pf-cmd',
         {
           class: classNames(highlighted && 'pf-highlighted'),
           ...htmlAttrs,
         },
         m('h1', title),
         m('h2', subtitle),
         m(Icon, {className: 'pf-right-icon', icon: icon ?? 'play_arrow'}),
     );
   }
 }

 class Omnibox implements m.ClassComponent {
   view() {
     const msgTTL = globals.state.status.timestamp + 1 - Date.now() / 1e3;
     const engineIsBusy =
         globals.state.engine !== undefined && !globals.state.engine.ready;

     if (msgTTL > 0 || engineIsBusy) {
       setTimeout(() => raf.scheduleFullRedraw(), msgTTL * 1000);
       return m(
           `.omnibox.message-mode`,
           m(`input[placeholder=${globals.state.status.msg}][readonly]`, {
             value: '',
           }));
     }
     return m(
         Popup,
         {
           isOpen: mode === COMMAND,
           trigger: this.renderOmnibox(),
           className: 'pf-popup-padded',
         },
         m(
             '.pf-cmd-container',
             this.renderCommandDropdown(),
             ),
     );
   }

   private renderCommandDropdown(): m.Children {
     if (mode === COMMAND) {
       const searchTerm = globals.state.omniboxState.omnibox;
       matchingCommands = globals.commandManager.fuzzyFilterCommands(searchTerm);
       if (matchingCommands.length === 0) {
         return m(EmptyState, {header: 'No matching commands'});
       } else {
         return matchingCommands.map((cmd, index) => {
           return m(Cmd, {
             title: cmd.name,
             subtitle: cmd.id,
             highlighted: index === highlightedCommandIndex,
             onclick: () => {
               globals.commandManager.runCommand(cmd.id);
               mode = SEARCH;
               globals.dispatch(Actions.setOmnibox({
                 omnibox: '',
                 mode: 'SEARCH',
               }));
               highlightedCommandIndex = 0;
             },
           });
         });
       }
     } else {
       return null;
     }
   }

   private renderOmnibox() {
     const queryMode = mode === QUERY;
     const classes = classNames(
         mode === QUERY && 'query-mode',
         mode === COMMAND && 'command-mode',
     );
     return m(
         `.omnibox`,
         {
           class: classes,
         },
         m('input', {
           placeholder: PLACEHOLDER[mode],
           onkeydown: (e: Event) => onKeyDown(e),
           onkeyup: (e: Event) => onKeyUp(e),
           oninput: (e: InputEvent) => {
             const value = (e.target as HTMLInputElement).value;
             globals.dispatch(Actions.setOmnibox({
               omnibox: value,
               mode: queryMode ? 'COMMAND' : 'SEARCH',
             }));
             if (mode === SEARCH) {
               displayStepThrough = value.length >= 4;
               globals.dispatch(Actions.setSearchIndex({index: -1}));
             }
           },
           value: globals.state.omniboxState.omnibox,
         }),
         displayStepThrough ?
             m('.stepthrough',
               m('.current',
                 `${
                     globals.currentSearchResults.totalResults === 0 ?
                         '0 / 0' :
                         `${globals.state.searchIndex + 1} / ${
                             globals.currentSearchResults.totalResults}`}`),
               m('button',
                 {
                   onclick: () => {
                     executeSearch(true /* reverse direction */);
                   },
                 },
                 m('i.material-icons.left', 'keyboard_arrow_left')),
               m('button',
                 {
                   onclick: () => {
                     executeSearch();
                   },
                 },
                 m('i.material-icons.right', 'keyboard_arrow_right'))) :
             '');
   }
 }

 class Progress implements m.ClassComponent {
   private loading: () => void;
   private progressBar?: HTMLElement;

   constructor() {
     this.loading = () => this.loadingAnimation();
   }

   oncreate(vnodeDom: m.CVnodeDOM) {
     this.progressBar = vnodeDom.dom as HTMLElement;
     raf.addRedrawCallback(this.loading);
   }

   onremove() {
     raf.removeRedrawCallback(this.loading);
   }

   view() {
     return m('.progress');
   }

   loadingAnimation() {
     if (this.progressBar === undefined) return;
     const engine = globals.getCurrentEngine();
     if ((engine && !engine.ready) || globals.numQueuedQueries > 0 ||
         taskTracker.hasPendingTasks()) {
       this.progressBar.classList.add('progress-anim');
     } else {
       this.progressBar.classList.remove('progress-anim');
     }
   }
 }


 class NewVersionNotification implements m.ClassComponent {
   view() {
     return m(
         '.new-version-toast',
         `Updated to ${VERSION} and ready for offline use!`,
         m('button.notification-btn.preferred',
           {
             onclick: () => {
               globals.frontendLocalState.newVersionAvailable = false;
               raf.scheduleFullRedraw();
             },
           },
           'Dismiss'),
     );
   }
 }


 class HelpPanningNotification implements m.ClassComponent {
   view() {
     const dismissed = localStorage.getItem(DISMISSED_PANNING_HINT_KEY);
     // Do not show the help notification in embedded mode because local storage
     // does not persist for iFrames. The host is responsible for communicating
     // to users that they can press '?' for help.
     if (globals.embeddedMode || dismissed === 'true' ||
         !globals.frontendLocalState.showPanningHint) {
       return;
     }
     return m(
         '.helpful-hint',
         m('.hint-text',
           'Are you trying to pan? Use the WASD keys or hold shift to click ' +
               'and drag. Press \'?\' for more help.'),
         m('button.hint-dismiss-button',
           {
             onclick: () => {
               globals.frontendLocalState.showPanningHint = false;
               localStorage.setItem(DISMISSED_PANNING_HINT_KEY, 'true');
               raf.scheduleFullRedraw();
             },
           },
           'Dismiss'),
     );
   }
 }

 class TraceErrorIcon implements m.ClassComponent {
   view() {
     if (globals.embeddedMode) return;

     const errors = globals.traceErrors;
     if (!errors && !globals.metricError || mode === QUERY) return;
     const message = errors ? `${errors} import or data loss errors detected.` :
                              `Metric error detected.`;
     return m(
         'a.error',
         {href: '#!/info'},
         m('i.material-icons',
           {
             title: message + ` Click for more info.`,
           },
           'announcement'));
   }
 }

 export class Topbar implements m.ClassComponent {
   view() {
     return m(
         '.topbar',
         {class: globals.state.sidebarVisible ? '' : 'hide-sidebar'},
         globals.frontendLocalState.newVersionAvailable ?
             m(NewVersionNotification) :
             m(Omnibox),
         m(Progress),
         m(HelpPanningNotification),
         m(TraceErrorIcon));
   }
 }
	// Copyright (C) 2018 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.

	import m from 'mithril';

	import {Actions} from '../common/actions';
	import {Command} from '../common/commands';
	import {raf} from '../core/raf_scheduler';
	import {VERSION} from '../gen/perfetto_version';

	import {classNames} from './classnames';
	import {globals} from './globals';
	import {runQueryInNewTab} from './query_result_tab';
	import {executeSearch} from './search_handler';
	import {taskTracker} from './task_tracker';
	import {EmptyState} from './widgets/empty_state';
	import {Icon} from './widgets/icon';
	import {Popup} from './widgets/popup';

	const SEARCH = Symbol('search');
	const QUERY = Symbol('query');
	const COMMAND = Symbol('command');
	type Mode = typeof SEARCH\|typeof QUERY\|typeof COMMAND;
	let highlightedCommandIndex = 0;

	const PLACEHOLDER = {
	[SEARCH]: 'Search',
	[QUERY]: 'e.g. select * from sched left join thread using(utid) limit 10',
	[COMMAND]: 'Start typing a command..',
	};

	let matchingCommands: Command[] = [];

	export const DISMISSED_PANNING_HINT_KEY = 'dismissedPanningHint';

	let mode: Mode = SEARCH;
	let displayStepThrough = false;

	function onKeyDown(e: Event) {
	const event = (e as KeyboardEvent);
	const key = event.key;
	if (key !== 'Enter') {
	e.stopPropagation();
	}
	const txt = (e.target as HTMLInputElement);

	if (mode === SEARCH && txt.value === '' && key === ':') {
	e.preventDefault();
	mode = QUERY;
	raf.scheduleFullRedraw();
	return;
	}

	if (mode === SEARCH && txt.value === '' && key === '>') {
	e.preventDefault();
	mode = COMMAND;
	raf.scheduleFullRedraw();
	return;
	}

	if (mode !== SEARCH && txt.value === '' && key === 'Backspace') {
	mode = SEARCH;
	raf.scheduleFullRedraw();
	return;
	}

	if (mode === COMMAND) {
	if (key === 'ArrowDown') {
	highlightedCommandIndex++;
	highlightedCommandIndex =
	Math.min(matchingCommands.length - 1, highlightedCommandIndex);
	raf.scheduleFullRedraw();
	} else if (key === 'ArrowUp') {
	highlightedCommandIndex--;
	highlightedCommandIndex = Math.max(0, highlightedCommandIndex);
	raf.scheduleFullRedraw();
	} else if (key === 'Enter') {
	const cmd = matchingCommands[highlightedCommandIndex];
	if (cmd) {
	globals.commandManager.runCommand(cmd.id);
	}
	highlightedCommandIndex = 0;
	mode = SEARCH;
	globals.dispatch(Actions.setOmnibox({
	omnibox: '',
	mode: 'SEARCH',
	}));
	} else {
	highlightedCommandIndex = 0;
	}
	}

	if (mode === SEARCH && key === 'Enter') {
	txt.blur();
	}

	if (mode === QUERY && key === 'Enter') {
	const openInPinnedTab = event.metaKey \|\| event.ctrlKey;
	runQueryInNewTab(
	txt.value,
	openInPinnedTab ? 'Pinned query' : 'Omnibox query',
	openInPinnedTab ? undefined : 'omnibox_query',
	);
	}
	}

	function onKeyUp(e: Event) {
	e.stopPropagation();
	const event = (e as KeyboardEvent);
	const key = event.key;
	const txt = e.target as HTMLInputElement;

	if (key === 'Escape') {
	mode = SEARCH;
	txt.value = '';
	txt.blur();
	raf.scheduleFullRedraw();
	return;
	}
	}

	interface CmdAttrs {
	title: string;
	subtitle: string;
	highlighted?: boolean;
	icon?: string;
	[htmlAttrs: string]: any;
	}

	class Cmd implements m.ClassComponent<CmdAttrs> {
	view({attrs}: m.Vnode<CmdAttrs, this>): void\|m.Children {
	const {title, subtitle, icon, highlighted = false, ...htmlAttrs} = attrs;
	return m(
	'section.pf-cmd',
	{
	class: classNames(highlighted && 'pf-highlighted'),
	...htmlAttrs,
	},
	m('h1', title),
	m('h2', subtitle),
	m(Icon, {className: 'pf-right-icon', icon: icon ?? 'play_arrow'}),
	);
	}
	}

	class Omnibox implements m.ClassComponent {
	view() {
	const msgTTL = globals.state.status.timestamp + 1 - Date.now() / 1e3;
	const engineIsBusy =
	globals.state.engine !== undefined && !globals.state.engine.ready;

	if (msgTTL > 0 \|\| engineIsBusy) {
	setTimeout(() => raf.scheduleFullRedraw(), msgTTL * 1000);
	return m(
	`.omnibox.message-mode`,
	m(`input[placeholder=${globals.state.status.msg}][readonly]`, {
	value: '',
	}));
	}
	return m(
	Popup,
	{
	isOpen: mode === COMMAND,
	trigger: this.renderOmnibox(),
	className: 'pf-popup-padded',
	},
	m(
	'.pf-cmd-container',
	this.renderCommandDropdown(),
	),
	);
	}

	private renderCommandDropdown(): m.Children {
	if (mode === COMMAND) {
	const searchTerm = globals.state.omniboxState.omnibox;
	matchingCommands = globals.commandManager.fuzzyFilterCommands(searchTerm);
	if (matchingCommands.length === 0) {
	return m(EmptyState, {header: 'No matching commands'});
	} else {
	return matchingCommands.map((cmd, index) => {
	return m(Cmd, {
	title: cmd.name,
	subtitle: cmd.id,
	highlighted: index === highlightedCommandIndex,
	onclick: () => {
	globals.commandManager.runCommand(cmd.id);
	mode = SEARCH;
	globals.dispatch(Actions.setOmnibox({
	omnibox: '',
	mode: 'SEARCH',
	}));
	highlightedCommandIndex = 0;
	},
	});
	});
	}
	} else {
	return null;
	}
	}

	private renderOmnibox() {
	const queryMode = mode === QUERY;
	const classes = classNames(
	mode === QUERY && 'query-mode',
	mode === COMMAND && 'command-mode',
	);
	return m(
	`.omnibox`,
	{
	class: classes,
	},
	m('input', {
	placeholder: PLACEHOLDER[mode],
	onkeydown: (e: Event) => onKeyDown(e),
	onkeyup: (e: Event) => onKeyUp(e),
	oninput: (e: InputEvent) => {
	const value = (e.target as HTMLInputElement).value;
	globals.dispatch(Actions.setOmnibox({
	omnibox: value,
	mode: queryMode ? 'COMMAND' : 'SEARCH',
	}));
	if (mode === SEARCH) {
	displayStepThrough = value.length >= 4;
	globals.dispatch(Actions.setSearchIndex({index: -1}));
	}
	},
	value: globals.state.omniboxState.omnibox,
	}),
	displayStepThrough ?
	m('.stepthrough',
	m('.current',
	`${
	globals.currentSearchResults.totalResults === 0 ?
	'0 / 0' :
	`${globals.state.searchIndex + 1} / ${
	globals.currentSearchResults.totalResults}`}`),
	m('button',
	{
	onclick: () => {
	executeSearch(true /* reverse direction */);
	},
	},
	m('i.material-icons.left', 'keyboard_arrow_left')),
	m('button',
	{
	onclick: () => {
	executeSearch();
	},
	},
	m('i.material-icons.right', 'keyboard_arrow_right'))) :
	'');
	}
	}

	class Progress implements m.ClassComponent {
	private loading: () => void;
	private progressBar?: HTMLElement;

	constructor() {
	this.loading = () => this.loadingAnimation();
	}

	oncreate(vnodeDom: m.CVnodeDOM) {
	this.progressBar = vnodeDom.dom as HTMLElement;
	raf.addRedrawCallback(this.loading);
	}

	onremove() {
	raf.removeRedrawCallback(this.loading);
	}

	view() {
	return m('.progress');
	}

	loadingAnimation() {
	if (this.progressBar === undefined) return;
	const engine = globals.getCurrentEngine();
	if ((engine && !engine.ready) \|\| globals.numQueuedQueries > 0 \|\|
	taskTracker.hasPendingTasks()) {
	this.progressBar.classList.add('progress-anim');
	} else {
	this.progressBar.classList.remove('progress-anim');
	}
	}
	}


	class NewVersionNotification implements m.ClassComponent {
	view() {
	return m(
	'.new-version-toast',
	`Updated to ${VERSION} and ready for offline use!`,
	m('button.notification-btn.preferred',
	{
	onclick: () => {
	globals.frontendLocalState.newVersionAvailable = false;
	raf.scheduleFullRedraw();
	},
	},
	'Dismiss'),
	);
	}
	}


	class HelpPanningNotification implements m.ClassComponent {
	view() {
	const dismissed = localStorage.getItem(DISMISSED_PANNING_HINT_KEY);
	// Do not show the help notification in embedded mode because local storage
	// does not persist for iFrames. The host is responsible for communicating
	// to users that they can press '?' for help.
	if (globals.embeddedMode \|\| dismissed === 'true' \|\|
	!globals.frontendLocalState.showPanningHint) {
	return;
	}
	return m(
	'.helpful-hint',
	m('.hint-text',
	'Are you trying to pan? Use the WASD keys or hold shift to click ' +
	'and drag. Press \'?\' for more help.'),
	m('button.hint-dismiss-button',
	{
	onclick: () => {
	globals.frontendLocalState.showPanningHint = false;
	localStorage.setItem(DISMISSED_PANNING_HINT_KEY, 'true');
	raf.scheduleFullRedraw();
	},
	},
	'Dismiss'),
	);
	}
	}

	class TraceErrorIcon implements m.ClassComponent {
	view() {
	if (globals.embeddedMode) return;

	const errors = globals.traceErrors;
	if (!errors && !globals.metricError \|\| mode === QUERY) return;
	const message = errors ? `${errors} import or data loss errors detected.` :
	`Metric error detected.`;
	return m(
	'a.error',
	{href: '#!/info'},
	m('i.material-icons',
	{
	title: message + ` Click for more info.`,
	},
	'announcement'));
	}
	}

	export class Topbar implements m.ClassComponent {
	view() {
	return m(
	'.topbar',
	{class: globals.state.sidebarVisible ? '' : 'hide-sidebar'},
	globals.frontendLocalState.newVersionAvailable ?
	m(NewVersionNotification) :
	m(Omnibox),
	m(Progress),
	m(HelpPanningNotification),
	m(TraceErrorIcon));
	}
	}