From db2735950439368beb639b2c588fb4741a9666b1 Mon Sep 17 00:00:00 2001 From: Hector Dearman Date: Wed, 6 Sep 2023 16:23:35 +0100 Subject: [PATCH] ui: Move raf to new widgets directory Change-Id: I7010df5b19dc7b81a47b46d1db8ec3101904809e --- ui/src/frontend/index.ts | 4 ++++ ui/src/frontend/widgets/multiselect.ts | 14 +++++++------- ui/src/frontend/widgets/popup.ts | 6 +++--- ui/src/frontend/widgets/select.ts | 4 ++-- ui/src/frontend/widgets/tree.ts | 10 +++++----- ui/src/frontend/widgets/vega_view.ts | 6 +++--- ui/src/widgets/raf.ts | 23 +++++++++++++++++++++++ 7 files changed, 47 insertions(+), 20 deletions(-) create mode 100644 ui/src/widgets/raf.ts diff --git a/ui/src/frontend/index.ts b/ui/src/frontend/index.ts index 527345e151..08295e93ae 100644 --- a/ui/src/frontend/index.ts +++ b/ui/src/frontend/index.ts @@ -35,6 +35,7 @@ import { isGetCategoriesResponse, } from '../controller/chrome_proxy_record_controller'; import {raf} from '../core/raf_scheduler'; +import {setScheduleFullRedraw} from '../widgets/raf'; import {App} from './app'; import {initCssConstants} from './css_constants'; @@ -177,6 +178,9 @@ function setupContentSecurityPolicy() { } function main() { + // Wire up raf for widgets. + setScheduleFullRedraw(() => raf.scheduleFullRedraw()); + setupContentSecurityPolicy(); // Load the css. The load is asynchronous and the CSS is not ready by the time diff --git a/ui/src/frontend/widgets/multiselect.ts b/ui/src/frontend/widgets/multiselect.ts index 3ef0bc7e74..c53786806d 100644 --- a/ui/src/frontend/widgets/multiselect.ts +++ b/ui/src/frontend/widgets/multiselect.ts @@ -14,7 +14,7 @@ import m from 'mithril'; -import {raf} from '../../core/raf_scheduler'; +import {scheduleFullRedraw} from '../../widgets/raf'; import {DESELECT, SELECT_ALL} from '../icons'; import {Button} from './button'; @@ -114,7 +114,7 @@ export class MultiSelect implements m.ClassComponent { options.filter(({checked}) => checked) .map(({id}) => ({id, checked: false})); onChange(diffs); - raf.scheduleFullRedraw(); + scheduleFullRedraw(); }, disabled: !anyChecked, }), @@ -138,7 +138,7 @@ export class MultiSelect implements m.ClassComponent { const diffs = options.filter(({checked}) => !checked) .map(({id}) => ({id, checked: true})); onChange(diffs); - raf.scheduleFullRedraw(); + scheduleFullRedraw(); }, disabled: allChecked, }), @@ -152,7 +152,7 @@ export class MultiSelect implements m.ClassComponent { const diffs = options.filter(({checked}) => checked) .map(({id}) => ({id, checked: false})); onChange(diffs); - raf.scheduleFullRedraw(); + scheduleFullRedraw(); }, disabled: !anyChecked, }), @@ -170,7 +170,7 @@ export class MultiSelect implements m.ClassComponent { oninput: (event: Event) => { const eventTarget = event.target as HTMLTextAreaElement; this.searchText = eventTarget.value; - raf.scheduleFullRedraw(); + scheduleFullRedraw(); }, value: this.searchText, placeholder: 'Filter options...', @@ -185,7 +185,7 @@ export class MultiSelect implements m.ClassComponent { return m(Button, { onclick: () => { this.searchText = ''; - raf.scheduleFullRedraw(); + scheduleFullRedraw(); }, label: '', icon: 'close', @@ -210,7 +210,7 @@ export class MultiSelect implements m.ClassComponent { classes: 'pf-multiselect-item', onchange: () => { onChange([{id, checked: !checked}]); - raf.scheduleFullRedraw(); + scheduleFullRedraw(); }, }); }); diff --git a/ui/src/frontend/widgets/popup.ts b/ui/src/frontend/widgets/popup.ts index 8fa603c50a..ba19fa6590 100644 --- a/ui/src/frontend/widgets/popup.ts +++ b/ui/src/frontend/widgets/popup.ts @@ -19,7 +19,7 @@ import {MountOptions, Portal, PortalAttrs} from './portal'; import {classNames} from '../classnames'; import {findRef, isOrContains, toHTMLElement} from '../../base/dom_utils'; import {assertExists} from '../../base/logging'; -import {raf} from '../../core/raf_scheduler'; +import {scheduleFullRedraw} from '../../widgets/raf'; type CustomModifier = Modifier<'sameWidth', {}>; type ExtendedModifiers = StrictModifiers|CustomModifier; @@ -336,13 +336,13 @@ export class Popup implements m.ClassComponent { if (this.isOpen) { this.isOpen = false; this.onChange(this.isOpen); - raf.scheduleFullRedraw(); + scheduleFullRedraw(); } } private togglePopup() { this.isOpen = !this.isOpen; this.onChange(this.isOpen); - raf.scheduleFullRedraw(); + scheduleFullRedraw(); } } diff --git a/ui/src/frontend/widgets/select.ts b/ui/src/frontend/widgets/select.ts index 72245098ec..abae62da62 100644 --- a/ui/src/frontend/widgets/select.ts +++ b/ui/src/frontend/widgets/select.ts @@ -15,7 +15,7 @@ import m from 'mithril'; import {exists} from '../../base/utils'; -import {raf} from '../../core/raf_scheduler'; +import {scheduleFullRedraw} from '../../widgets/raf'; import {Menu, MenuItem} from './menu'; import {TextInput} from './text_input'; @@ -77,7 +77,7 @@ export class FilterableSelect implements oninput: (event: Event) => { const eventTarget = event.target as HTMLTextAreaElement; this.searchText = eventTarget.value; - raf.scheduleFullRedraw(); + scheduleFullRedraw(); }, onload: (event: Event) => { if (!attrs.autofocusInput) return; diff --git a/ui/src/frontend/widgets/tree.ts b/ui/src/frontend/widgets/tree.ts index 9e7462b9e3..285a7727f9 100644 --- a/ui/src/frontend/widgets/tree.ts +++ b/ui/src/frontend/widgets/tree.ts @@ -15,7 +15,7 @@ import m from 'mithril'; import {hasChildren} from '../../base/mithril_utils'; -import {raf} from '../../core/raf_scheduler'; +import {scheduleFullRedraw} from '../../widgets/raf'; import {classNames} from '../classnames'; // Heirachical tree layout but right values are horizontally aligned. @@ -81,7 +81,7 @@ export class TreeNode implements m.ClassComponent { onclick: () => { this.collapsed = !this.isCollapsed(vnode); onCollapseChanged(this.collapsed, attrs); - raf.scheduleFullRedraw(); + scheduleFullRedraw(); }, }), m( @@ -210,19 +210,19 @@ export class LazyTreeNode implements m.ClassComponent { // Expanding if (this.renderChildren) { this.collapsed = false; - raf.scheduleFullRedraw(); + scheduleFullRedraw(); } else { this.loading = true; fetchData().then((result) => { this.loading = false; this.collapsed = false; this.renderChildren = result; - raf.scheduleFullRedraw(); + scheduleFullRedraw(); }); } } this.collapsed = collapsed; - raf.scheduleFullRedraw(); + scheduleFullRedraw(); }, }, this.renderChildren && this.renderChildren()); diff --git a/ui/src/frontend/widgets/vega_view.ts b/ui/src/frontend/widgets/vega_view.ts index 51a78c1d03..fb6b3d1af5 100644 --- a/ui/src/frontend/widgets/vega_view.ts +++ b/ui/src/frontend/widgets/vega_view.ts @@ -22,7 +22,7 @@ import {SimpleResizeObserver} from '../../base/resize_observer'; import {EngineProxy} from '../../common/engine'; import {getErrorMessage} from '../../common/errors'; import {QueryError} from '../../common/query_result'; -import {raf} from '../../core/raf_scheduler'; +import {scheduleFullRedraw} from '../../widgets/raf'; import {Spinner} from './spinner'; @@ -227,7 +227,7 @@ class VegaWrapper { } this._status = Status.Done; this.pending = undefined; - raf.scheduleFullRedraw(); + scheduleFullRedraw(); } private handleError(pending: Promise, err: unknown) { @@ -241,7 +241,7 @@ class VegaWrapper { private setError(err: unknown) { this._status = Status.Error; this._error = getErrorMessage(err); - raf.scheduleFullRedraw(); + scheduleFullRedraw(); } dispose() { diff --git a/ui/src/widgets/raf.ts b/ui/src/widgets/raf.ts new file mode 100644 index 0000000000..20afb61492 --- /dev/null +++ b/ui/src/widgets/raf.ts @@ -0,0 +1,23 @@ +// 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. + +let FULL_REDRAW_FUNCTION = () => {}; + +export function setScheduleFullRedraw(func: () => void) { + FULL_REDRAW_FUNCTION = func; +} + +export function scheduleFullRedraw() { + FULL_REDRAW_FUNCTION(); +}