Merge "ui: Move raf to new widgets directory" into main

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

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<MultiSelectAttrs> {
                               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<MultiSelectAttrs> {
                       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<MultiSelectAttrs> {
                       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<MultiSelectAttrs> {
           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<MultiSelectAttrs> {
       return m(Button, {
         onclick: () => {
           this.searchText = '';
-          raf.scheduleFullRedraw();
+          scheduleFullRedraw();
         },
         label: '',
         icon: 'close',
@@ -210,7 +210,7 @@ export class MultiSelect implements m.ClassComponent<MultiSelectAttrs> {
         classes: 'pf-multiselect-item',
         onchange: () => {
           onChange([{id, checked: !checked}]);
-          raf.scheduleFullRedraw();
+          scheduleFullRedraw();
         },
       });
     });

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<PopupAttrs> {
     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();
   }
 }

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;

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<TreeNodeAttrs> {
           onclick: () => {
             this.collapsed = !this.isCollapsed(vnode);
             onCollapseChanged(this.collapsed, attrs);
-            raf.scheduleFullRedraw();
+            scheduleFullRedraw();
           },
         }),
         m(
@@ -210,19 +210,19 @@ export class LazyTreeNode implements m.ClassComponent<LazyTreeNodeAttrs> {
               // 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());

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<vega.View>, err: unknown) {
@@ -241,7 +241,7 @@ class VegaWrapper {
   private setError(err: unknown) {
     this._status = Status.Error;
     this._error = getErrorMessage(err);
-    raf.scheduleFullRedraw();
+    scheduleFullRedraw();
   }
 
   dispose() {

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();
+}