Allow mouse-wheel scrolling over plots when in multi graph view.

- Currently if the mouse hovers over a plot, the scrolling action is related to zoom over the plot. This disables page scrolling.
- While this is okay when there is a single plot, the experience is kind of annoying in a multi graph view where it is common to scroll up and down looking at multiple graphs.
- This CL adds an attribute to the plot-simple-sk and sets it in the multi graph view. The regular explore view remains unchanged.

Bug: b/309172104
Change-Id: I61eb40120ad1a3feb9b515c7180d24c41cf0e70b
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/805925
Reviewed-by: Eduardo Yap <eduardoyap@google.com>
Commit-Queue: Ashwin Verleker <ashwinpv@google.com>

perf/modules/explore-multi-sk/explore-multi-sk.ts

diff --git a/perf/modules/explore-multi-sk/explore-multi-sk.ts b/perf/modules/explore-multi-sk/explore-multi-sk.ts
index d0c6231..eb34e96 100644
--- a/perf/modules/explore-multi-sk/explore-multi-sk.ts
+++ b/perf/modules/explore-multi-sk/explore-multi-sk.ts
@@ -193,7 +193,7 @@
     }
 
     const graphDiv: Element | null = this.querySelector('#graphContainer');
-    const explore: ExploreSimpleSk = new ExploreSimpleSk();
+    const explore: ExploreSimpleSk = new ExploreSimpleSk(true);
 
     explore.openQueryByDefault = false;
     explore.navOpen = false;

perf/modules/explore-simple-sk/explore-simple-sk.ts

diff --git a/perf/modules/explore-simple-sk/explore-simple-sk.ts b/perf/modules/explore-simple-sk/explore-simple-sk.ts
index 8e4c650..936361d 100644
--- a/perf/modules/explore-simple-sk/explore-simple-sk.ts
+++ b/perf/modules/explore-simple-sk/explore-simple-sk.ts
@@ -461,8 +461,11 @@
 
   private originalTraceSet: TraceSet = TraceSet({});
 
-  constructor() {
+  private scrollable: boolean = false;
+
+  constructor(scrollable: boolean) {
     super(ExploreSimpleSk.template);
+    this.scrollable = scrollable;
     this.traceFormatter = GetTraceFormatter();
   }
 
@@ -610,6 +613,7 @@
         @zoom=${ele.plotZoom}
         @trace_focused=${ele.plotTraceFocused}
         class="hide_on_pivot_table hide_on_query_only hide_on_spinner"
+        .scrollable=${ele.scrollable}
         >
       </plot-simple-sk>
       <div id=spin-container class="hide_on_query_only hide_on_pivot_table hide_on_pivot_plot hide_on_plot">

perf/modules/plot-simple-sk/plot-simple-sk.ts

diff --git a/perf/modules/plot-simple-sk/plot-simple-sk.ts b/perf/modules/plot-simple-sk/plot-simple-sk.ts
index 0293a95..50c1295 100644
--- a/perf/modules/plot-simple-sk/plot-simple-sk.ts
+++ b/perf/modules/plot-simple-sk/plot-simple-sk.ts
@@ -711,6 +711,18 @@
 
   private BAND_COLOR!: string; // CSS color.
 
+  get scrollable(): boolean {
+    return this.hasAttribute('scrollable');
+  }
+
+  set scrollable(val: boolean) {
+    if (val) {
+      this.setAttribute('scrollable', '');
+    } else {
+      this.removeAttribute('scrollable');
+    }
+  }
+
   constructor() {
     super(PlotSimpleSk.template);
 
@@ -815,34 +827,36 @@
       this.inZoomDrag = 'no-zoom';
     });
 
-    this.addEventListener('wheel', (e: WheelEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-      // If the wheel is spun while we are zoomed then move through the stack of
-      // zoom ranges.
-      if (this.detailsZoomRangesStack) {
-        // Scrolling up on the scroll wheel gives e.deltaY a negative value. Up
-        // means to scroll in, which means we want to take a rect from
-        // inactiveDetailsZoomRangesStack and make it active by pushing it on
-        // detailsZoomRangesStack. Down reverses the push/pop direction.
-        if (e.deltaY < 0) {
-          if (this.inactiveDetailsZoomRangesStack.length === 0) {
-            return;
+    if (!this.scrollable) {
+      this.addEventListener('wheel', (e: WheelEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        // If the wheel is spun while we are zoomed then move through the stack of
+        // zoom ranges.
+        if (this.detailsZoomRangesStack) {
+          // Scrolling up on the scroll wheel gives e.deltaY a negative value. Up
+          // means to scroll in, which means we want to take a rect from
+          // inactiveDetailsZoomRangesStack and make it active by pushing it on
+          // detailsZoomRangesStack. Down reverses the push/pop direction.
+          if (e.deltaY < 0) {
+            if (this.inactiveDetailsZoomRangesStack.length === 0) {
+              return;
+            }
+            this.detailsZoomRangesStack.push(
+              this.inactiveDetailsZoomRangesStack.pop()!
+            );
+          } else {
+            if (this.detailsZoomRangesStack.length === 0) {
+              return;
+            }
+            this.inactiveDetailsZoomRangesStack.push(
+              this.detailsZoomRangesStack.pop()!
+            );
           }
-          this.detailsZoomRangesStack.push(
-            this.inactiveDetailsZoomRangesStack.pop()!
-          );
-        } else {
-          if (this.detailsZoomRangesStack.length === 0) {
-            return;
-          }
-          this.inactiveDetailsZoomRangesStack.push(
-            this.detailsZoomRangesStack.pop()!
-          );
+          this._zoomImpl();
         }
-        this._zoomImpl();
-      }
-    });
+      });
+    }
 
     this.addEventListener('click', (e) => {
       const pt = this.eventToCanvasPt(e);