perf: apply layout/layer bound where possible (#3642)

This is a CSS/layout optimization for areas that renders a lot of DOM
Nodes including the scrollable area.

- `will-change`: transform <- hints browser to put the DOM in different
  GPU layer
- `contain` <- hints browser that certain operations can be done by
  reasoning children only. For instance, when `size` is present, browser
  can calculate size/bounds by only reasoning with the child nodes.
  For more information, refer to the [doc](https://developer.mozilla.org/en-US/docs/Web/CSS/contain).

Author: stephanwlee

tensorboard/components/tf_dashboard_common/tf-dashboard-layout.html

@@ -56,6 +56,7 @@
       }
 
       ::slotted([slot='center']) {
+        contain: strict;
         height: 100%;
         overflow-x: hidden;
         overflow-y: auto;

tensorboard/components/tf_dashboard_common/tf-multi-checkbox.html

@@ -98,14 +98,17 @@
         overflow: hidden;
       }
       #outer-container {
-        overflow-y: auto;
-        overflow-x: hidden;
-        width: 100%;
+        contain: content;
         flex-grow: 1;
         flex-shrink: 1;
+        overflow-x: hidden;
+        overflow-y: auto;
+        width: 100%;
+        will-change: transform;
         word-wrap: break-word;
       }
       .name-row {
+        contain: content;
         padding-top: 5px;
         padding-bottom: 5px;
         display: flex;

tensorboard/components/tf_paginated_view/tf-category-paginated-view.html

@@ -262,6 +262,11 @@
         flex-wrap: wrap;
       }
 
+      ::slotted([slot='items']) {
+        /* Tooltip for descriptions and others break with more strict ones. */
+        contain: style;
+      }
+
       #page-input {
         display: inline-block;
         width: var(--tf-category-paginated-view-page-input-width, 100%);

tensorboard/components/vz_chart_helpers/vz-chart-tooltip.ts

@@ -158,6 +158,7 @@ namespace vz_chart_helper {
       }
 
       const newStyle = {
+        contain: 'content',
         opacity: 1,
         left: left ? `${left}px` : null,
         right: right ? `${right}px` : null,

tensorboard/components/vz_line_chart2/vz-line-chart2.html

@@ -62,6 +62,7 @@
       }
 
       #chartdiv .main {
+        contain: strict;
         cursor: crosshair;
       }
 
@@ -75,11 +76,15 @@
         cursor: grabbing;
       }
 
+      #chartdiv {
+        contain: strict;
+      }
+
       #chartdiv line.guide-line {
         stroke: #999;
         stroke-width: 1.5px;
       }
-      #chartdiv:hover {
+      #chartdiv:hover .main {
         will-change: transform;
       }