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

 // Copyright (C) 2023 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 {classNames} from '../base/classnames';
 import {FuzzySegment} from '../base/fuzzy';
 import {isString} from '../base/object_utils';
 import {exists} from '../base/utils';
 import {raf} from '../core/raf_scheduler';
 import {EmptyState} from '../widgets/empty_state';
 import {KeycapGlyph} from '../widgets/hotkey_glyphs';
 import {Popup} from '../widgets/popup';

 interface OmniboxOptionRowAttrs {
   // Human readable display name for the option.
   // This can either be a simple string, or a list of fuzzy segments in which
   // case highlighting will be applied to the matching segments.
   displayName: FuzzySegment[] | string;

   // Highlight this option.
   highlighted: boolean;

   // Arbitrary components to put on the right hand side of the option.
   rightContent?: m.Children;

   // Some tag to place on the right (to the left of the right content).
   label?: string;

   // Additional attrs forwarded to the underlying element.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [htmlAttrs: string]: any;
 }

 class OmniboxOptionRow implements m.ClassComponent<OmniboxOptionRowAttrs> {
   private highlightedBefore = false;

   view({attrs}: m.Vnode<OmniboxOptionRowAttrs>): void | m.Children {
     const {displayName, highlighted, rightContent, label, ...htmlAttrs} = attrs;
     return m(
       'li',
       {
         class: classNames(highlighted && 'pf-highlighted'),
         ...htmlAttrs,
       },
       m('span.pf-title', this.renderTitle(displayName)),
       label && m('span.pf-tag', label),
       rightContent,
     );
   }

   private renderTitle(title: FuzzySegment[] | string): m.Children {
     if (isString(title)) {
       return title;
     } else {
       return title.map(({matching, value}) => {
         return matching ? m('b', value) : value;
       });
     }
   }

   onupdate({attrs, dom}: m.VnodeDOM<OmniboxOptionRowAttrs, this>) {
     if (this.highlightedBefore !== attrs.highlighted) {
       if (attrs.highlighted) {
         dom.scrollIntoView({block: 'nearest'});
       }
       this.highlightedBefore = attrs.highlighted;
     }
   }
 }

 // Omnibox option.
 export interface OmniboxOption {
   // The value to place into the omnibox. This is what's returned in onSubmit.
   key: string;

   // Display name provided as a string or a list of fuzzy segments to enable
   // fuzzy match highlighting.
   displayName: FuzzySegment[] | string;

   // Some tag to place on the right (to the left of the right content).
   tag?: string;

   // Arbitrary components to put on the right hand side of the option.
   rightContent?: m.Children;
 }

 export interface OmniboxAttrs {
   // Current value of the omnibox input.
   value: string;

   // What to show when value is blank.
   placeholder?: string;

   // Called when the text changes.
   onInput?: (value: string, previousValue: string) => void;

   // Class or list of classes to append to the Omnibox element.
   extraClasses?: string | string[];

   // Called on close.
   onClose?: () => void;

   // Dropdown items to show. If none are supplied, the omnibox runs in free text
   // mode, where anyt text can be input. Otherwise, onSubmit will always be
   // called with one of the options.
   // Options are provided in groups called categories. If the category has a
   // name the name will be listed at the top of the group rendered with a little
   // divider as well.
   options?: OmniboxOption[];

   // Called when the user expresses the intent to "execute" the thing.
   onSubmit?: (value: string, mod: boolean, shift: boolean) => void;

   // Called when the user hits backspace when the field is empty.
   onGoBack?: () => void;

   // When true, disable and grey-out the omnibox's input.
   readonly?: boolean;

   // Ref to use on the input - useful for extracing this element from the DOM.
   inputRef?: string;

   // Whether to close when the user presses Enter. Default = false.
   closeOnSubmit?: boolean;

   // Whether to close the omnibox (i.e. call the |onClose| handler) when we
   // click outside the omnibox or its dropdown. Default = false.
   closeOnOutsideClick?: boolean;

   // Some content to place into the right hand side of the after the input.
   rightContent?: m.Children;

   // If we have options, this value indicates the index of the option which
   // is currently highlighted.
   selectedOptionIndex?: number;

   // Callback for when the user pressed up/down, expressing a desire to change
   // the |selectedOptionIndex|.
   onSelectedOptionChanged?: (index: number) => void;
 }

 export class Omnibox implements m.ClassComponent<OmniboxAttrs> {
   private popupElement?: HTMLElement;
   private dom?: Element;
   private attrs?: OmniboxAttrs;

   view({attrs}: m.Vnode<OmniboxAttrs>): m.Children {
     const {
       value,
       placeholder,
       extraClasses,
       onInput = () => {},
       onSubmit = () => {},
       onGoBack = () => {},
       inputRef = 'omnibox',
       options,
       closeOnSubmit = false,
       rightContent,
       selectedOptionIndex = 0,
     } = attrs;

     return m(
       Popup,
       {
         onPopupMount: (dom: HTMLElement) => (this.popupElement = dom),
         onPopupUnMount: (_dom: HTMLElement) => (this.popupElement = undefined),
         isOpen: exists(options),
         showArrow: false,
         matchWidth: true,
         offset: 2,
         trigger: m(
           '.omnibox',
           {
             class: classNames(extraClasses),
           },
           m('input', {
             ref: inputRef,
             value,
             placeholder,
             oninput: (e: Event) => {
               onInput((e.target as HTMLInputElement).value, value);
             },
             onkeydown: (e: KeyboardEvent) => {
               if (e.key === 'Backspace' && value === '') {
                 onGoBack();
               } else if (e.key === 'Escape') {
                 e.preventDefault();
                 this.close(attrs);
               }

               if (options) {
                 if (e.key === 'ArrowUp') {
                   e.preventDefault();
                   this.highlightPreviousOption(attrs);
                 } else if (e.key === 'ArrowDown') {
                   e.preventDefault();
                   this.highlightNextOption(attrs);
                 } else if (e.key === 'Enter') {
                   e.preventDefault();

                   const option = options[selectedOptionIndex];
                   // Return values from indexing arrays can be undefined.
                   // We should enable noUncheckedIndexedAccess in
                   // tsconfig.json.
                   /* eslint-disable
                       @typescript-eslint/strict-boolean-expressions */
                   if (option) {
                     /* eslint-enable */
                     closeOnSubmit && this.close(attrs);

                     const mod = e.metaKey || e.ctrlKey;
                     const shift = e.shiftKey;
                     onSubmit(option.key, mod, shift);
                   }
                 }
               } else {
                 if (e.key === 'Enter') {
                   e.preventDefault();

                   closeOnSubmit && this.close(attrs);

                   const mod = e.metaKey || e.ctrlKey;
                   const shift = e.shiftKey;
                   onSubmit(value, mod, shift);
                 }
               }
             },
           }),
           rightContent,
         ),
       },
       options && this.renderDropdown(attrs),
     );
   }

   private renderDropdown(attrs: OmniboxAttrs): m.Children {
     const {options} = attrs;

     if (!options) return null;

     if (options.length === 0) {
       return m(EmptyState, {title: 'No matching options...'});
     } else {
       return m(
         '.pf-omnibox-dropdown',
         this.renderOptionsContainer(attrs, options),
         this.renderFooter(),
       );
     }
   }

   private renderFooter() {
     return m(
       '.pf-omnibox-dropdown-footer',
       m(
         'section',
         m(KeycapGlyph, {keyValue: 'ArrowUp'}),
         m(KeycapGlyph, {keyValue: 'ArrowDown'}),
         'to navigate',
       ),
       m('section', m(KeycapGlyph, {keyValue: 'Enter'}), 'to use'),
       m('section', m(KeycapGlyph, {keyValue: 'Escape'}), 'to dismiss'),
     );
   }

   private renderOptionsContainer(
     attrs: OmniboxAttrs,
     options: OmniboxOption[],
   ): m.Children {
     const {
       onClose = () => {},
       onSubmit = () => {},
       closeOnSubmit = false,
       selectedOptionIndex,
     } = attrs;

     const opts = options.map(({displayName, key, rightContent, tag}, index) => {
       return m(OmniboxOptionRow, {
         key,
         label: tag,
         displayName: displayName,
         highlighted: index === selectedOptionIndex,
         onclick: () => {
           closeOnSubmit && onClose();
           onSubmit(key, false, false);
         },
         rightContent,
       });
     });

     return m('ul.pf-omnibox-options-container', opts);
   }

   oncreate({attrs, dom}: m.VnodeDOM<OmniboxAttrs, this>) {
     this.attrs = attrs;
     this.dom = dom;
     const {closeOnOutsideClick} = attrs;
     if (closeOnOutsideClick) {
       document.addEventListener('mousedown', this.onMouseDown);
     }
   }

   onupdate({attrs, dom}: m.VnodeDOM<OmniboxAttrs, this>) {
     this.attrs = attrs;
     this.dom = dom;
     const {closeOnOutsideClick} = attrs;
     if (closeOnOutsideClick) {
       document.addEventListener('mousedown', this.onMouseDown);
     } else {
       document.removeEventListener('mousedown', this.onMouseDown);
     }
   }

   onremove(_: m.VnodeDOM<OmniboxAttrs, this>) {
     this.attrs = undefined;
     this.dom = undefined;
     document.removeEventListener('mousedown', this.onMouseDown);
   }

   private onMouseDown = (e: Event) => {
     // Don't close if the click was within ourselves or our popup.
     if (e.target instanceof Node) {
       if (this.popupElement && this.popupElement.contains(e.target)) {
         return;
       }
       if (this.dom && this.dom.contains(e.target)) return;
     }
     if (this.attrs) {
       this.close(this.attrs);
     }
   };

   private close(attrs: OmniboxAttrs): void {
     const {onClose = () => {}} = attrs;
     raf.scheduleFullRedraw();
     onClose();
   }

   private highlightPreviousOption(attrs: OmniboxAttrs) {
     const {selectedOptionIndex = 0, onSelectedOptionChanged = () => {}} = attrs;

     onSelectedOptionChanged(Math.max(0, selectedOptionIndex - 1));
   }

   private highlightNextOption(attrs: OmniboxAttrs) {
     const {
       selectedOptionIndex = 0,
       onSelectedOptionChanged = () => {},
       options = [],
     } = attrs;

     const max = options.length - 1;
     onSelectedOptionChanged(Math.min(max, selectedOptionIndex + 1));
   }
 }
	// Copyright (C) 2023 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 {classNames} from '../base/classnames';
	import {FuzzySegment} from '../base/fuzzy';
	import {isString} from '../base/object_utils';
	import {exists} from '../base/utils';
	import {raf} from '../core/raf_scheduler';
	import {EmptyState} from '../widgets/empty_state';
	import {KeycapGlyph} from '../widgets/hotkey_glyphs';
	import {Popup} from '../widgets/popup';

	interface OmniboxOptionRowAttrs {
	// Human readable display name for the option.
	// This can either be a simple string, or a list of fuzzy segments in which
	// case highlighting will be applied to the matching segments.
	displayName: FuzzySegment[] \| string;

	// Highlight this option.
	highlighted: boolean;

	// Arbitrary components to put on the right hand side of the option.
	rightContent?: m.Children;

	// Some tag to place on the right (to the left of the right content).
	label?: string;

	// Additional attrs forwarded to the underlying element.
	// eslint-disable-next-line @typescript-eslint/no-explicit-any
	[htmlAttrs: string]: any;
	}

	class OmniboxOptionRow implements m.ClassComponent<OmniboxOptionRowAttrs> {
	private highlightedBefore = false;

	view({attrs}: m.Vnode<OmniboxOptionRowAttrs>): void \| m.Children {
	const {displayName, highlighted, rightContent, label, ...htmlAttrs} = attrs;
	return m(
	'li',
	{
	class: classNames(highlighted && 'pf-highlighted'),
	...htmlAttrs,
	},
	m('span.pf-title', this.renderTitle(displayName)),
	label && m('span.pf-tag', label),
	rightContent,
	);
	}

	private renderTitle(title: FuzzySegment[] \| string): m.Children {
	if (isString(title)) {
	return title;
	} else {
	return title.map(({matching, value}) => {
	return matching ? m('b', value) : value;
	});
	}
	}

	onupdate({attrs, dom}: m.VnodeDOM<OmniboxOptionRowAttrs, this>) {
	if (this.highlightedBefore !== attrs.highlighted) {
	if (attrs.highlighted) {
	dom.scrollIntoView({block: 'nearest'});
	}
	this.highlightedBefore = attrs.highlighted;
	}
	}
	}

	// Omnibox option.
	export interface OmniboxOption {
	// The value to place into the omnibox. This is what's returned in onSubmit.
	key: string;

	// Display name provided as a string or a list of fuzzy segments to enable
	// fuzzy match highlighting.
	displayName: FuzzySegment[] \| string;

	// Some tag to place on the right (to the left of the right content).
	tag?: string;

	// Arbitrary components to put on the right hand side of the option.
	rightContent?: m.Children;
	}

	export interface OmniboxAttrs {
	// Current value of the omnibox input.
	value: string;

	// What to show when value is blank.
	placeholder?: string;

	// Called when the text changes.
	onInput?: (value: string, previousValue: string) => void;

	// Class or list of classes to append to the Omnibox element.
	extraClasses?: string \| string[];

	// Called on close.
	onClose?: () => void;

	// Dropdown items to show. If none are supplied, the omnibox runs in free text
	// mode, where anyt text can be input. Otherwise, onSubmit will always be
	// called with one of the options.
	// Options are provided in groups called categories. If the category has a
	// name the name will be listed at the top of the group rendered with a little
	// divider as well.
	options?: OmniboxOption[];

	// Called when the user expresses the intent to "execute" the thing.
	onSubmit?: (value: string, mod: boolean, shift: boolean) => void;

	// Called when the user hits backspace when the field is empty.
	onGoBack?: () => void;

	// When true, disable and grey-out the omnibox's input.
	readonly?: boolean;

	// Ref to use on the input - useful for extracing this element from the DOM.
	inputRef?: string;

	// Whether to close when the user presses Enter. Default = false.
	closeOnSubmit?: boolean;

	// Whether to close the omnibox (i.e. call the \|onClose\| handler) when we
	// click outside the omnibox or its dropdown. Default = false.
	closeOnOutsideClick?: boolean;

	// Some content to place into the right hand side of the after the input.
	rightContent?: m.Children;

	// If we have options, this value indicates the index of the option which
	// is currently highlighted.
	selectedOptionIndex?: number;

	// Callback for when the user pressed up/down, expressing a desire to change
	// the \|selectedOptionIndex\|.
	onSelectedOptionChanged?: (index: number) => void;
	}

	export class Omnibox implements m.ClassComponent<OmniboxAttrs> {
	private popupElement?: HTMLElement;
	private dom?: Element;
	private attrs?: OmniboxAttrs;

	view({attrs}: m.Vnode<OmniboxAttrs>): m.Children {
	const {
	value,
	placeholder,
	extraClasses,
	onInput = () => {},
	onSubmit = () => {},
	onGoBack = () => {},
	inputRef = 'omnibox',
	options,
	closeOnSubmit = false,
	rightContent,
	selectedOptionIndex = 0,
	} = attrs;

	return m(
	Popup,
	{
	onPopupMount: (dom: HTMLElement) => (this.popupElement = dom),
	onPopupUnMount: (_dom: HTMLElement) => (this.popupElement = undefined),
	isOpen: exists(options),
	showArrow: false,
	matchWidth: true,
	offset: 2,
	trigger: m(
	'.omnibox',
	{
	class: classNames(extraClasses),
	},
	m('input', {
	ref: inputRef,
	value,
	placeholder,
	oninput: (e: Event) => {
	onInput((e.target as HTMLInputElement).value, value);
	},
	onkeydown: (e: KeyboardEvent) => {
	if (e.key === 'Backspace' && value === '') {
	onGoBack();
	} else if (e.key === 'Escape') {
	e.preventDefault();
	this.close(attrs);
	}

	if (options) {
	if (e.key === 'ArrowUp') {
	e.preventDefault();
	this.highlightPreviousOption(attrs);
	} else if (e.key === 'ArrowDown') {
	e.preventDefault();
	this.highlightNextOption(attrs);
	} else if (e.key === 'Enter') {
	e.preventDefault();

	const option = options[selectedOptionIndex];
	// Return values from indexing arrays can be undefined.
	// We should enable noUncheckedIndexedAccess in
	// tsconfig.json.
	/* eslint-disable
	@typescript-eslint/strict-boolean-expressions */
	if (option) {
	/* eslint-enable */
	closeOnSubmit && this.close(attrs);

	const mod = e.metaKey \|\| e.ctrlKey;
	const shift = e.shiftKey;
	onSubmit(option.key, mod, shift);
	}
	}
	} else {
	if (e.key === 'Enter') {
	e.preventDefault();

	closeOnSubmit && this.close(attrs);

	const mod = e.metaKey \|\| e.ctrlKey;
	const shift = e.shiftKey;
	onSubmit(value, mod, shift);
	}
	}
	},
	}),
	rightContent,
	),
	},
	options && this.renderDropdown(attrs),
	);
	}

	private renderDropdown(attrs: OmniboxAttrs): m.Children {
	const {options} = attrs;

	if (!options) return null;

	if (options.length === 0) {
	return m(EmptyState, {title: 'No matching options...'});
	} else {
	return m(
	'.pf-omnibox-dropdown',
	this.renderOptionsContainer(attrs, options),
	this.renderFooter(),
	);
	}
	}

	private renderFooter() {
	return m(
	'.pf-omnibox-dropdown-footer',
	m(
	'section',
	m(KeycapGlyph, {keyValue: 'ArrowUp'}),
	m(KeycapGlyph, {keyValue: 'ArrowDown'}),
	'to navigate',
	),
	m('section', m(KeycapGlyph, {keyValue: 'Enter'}), 'to use'),
	m('section', m(KeycapGlyph, {keyValue: 'Escape'}), 'to dismiss'),
	);
	}

	private renderOptionsContainer(
	attrs: OmniboxAttrs,
	options: OmniboxOption[],
	): m.Children {
	const {
	onClose = () => {},
	onSubmit = () => {},
	closeOnSubmit = false,
	selectedOptionIndex,
	} = attrs;

	const opts = options.map(({displayName, key, rightContent, tag}, index) => {
	return m(OmniboxOptionRow, {
	key,
	label: tag,
	displayName: displayName,
	highlighted: index === selectedOptionIndex,
	onclick: () => {
	closeOnSubmit && onClose();
	onSubmit(key, false, false);
	},
	rightContent,
	});
	});

	return m('ul.pf-omnibox-options-container', opts);
	}

	oncreate({attrs, dom}: m.VnodeDOM<OmniboxAttrs, this>) {
	this.attrs = attrs;
	this.dom = dom;
	const {closeOnOutsideClick} = attrs;
	if (closeOnOutsideClick) {
	document.addEventListener('mousedown', this.onMouseDown);
	}
	}

	onupdate({attrs, dom}: m.VnodeDOM<OmniboxAttrs, this>) {
	this.attrs = attrs;
	this.dom = dom;
	const {closeOnOutsideClick} = attrs;
	if (closeOnOutsideClick) {
	document.addEventListener('mousedown', this.onMouseDown);
	} else {
	document.removeEventListener('mousedown', this.onMouseDown);
	}
	}

	onremove(_: m.VnodeDOM<OmniboxAttrs, this>) {
	this.attrs = undefined;
	this.dom = undefined;
	document.removeEventListener('mousedown', this.onMouseDown);
	}

	private onMouseDown = (e: Event) => {
	// Don't close if the click was within ourselves or our popup.
	if (e.target instanceof Node) {
	if (this.popupElement && this.popupElement.contains(e.target)) {
	return;
	}
	if (this.dom && this.dom.contains(e.target)) return;
	}
	if (this.attrs) {
	this.close(this.attrs);
	}
	};

	private close(attrs: OmniboxAttrs): void {
	const {onClose = () => {}} = attrs;
	raf.scheduleFullRedraw();
	onClose();
	}

	private highlightPreviousOption(attrs: OmniboxAttrs) {
	const {selectedOptionIndex = 0, onSelectedOptionChanged = () => {}} = attrs;

	onSelectedOptionChanged(Math.max(0, selectedOptionIndex - 1));
	}

	private highlightNextOption(attrs: OmniboxAttrs) {
	const {
	selectedOptionIndex = 0,
	onSelectedOptionChanged = () => {},
	options = [],
	} = attrs;

	const max = options.length - 1;
	onSelectedOptionChanged(Math.min(max, selectedOptionIndex + 1));
	}
	}