[Table] TruncatedFormat popover improvements and performance tuning f…

…or dev preview (#1624)

* Add "SlowLayout". Make TruncatedFormat fast.

Uses off-DOM canvas text measuring to avoid forced reflows.
SlowLayout component allows us to highlight potential perf issues in the dev preview.

* Add layout boundary isolation

* PR comments. Fix tests

* Use shorter string in test since linux has different fonts. Add text wrap to preview

* Remove it.only

* fix tests for real this time

* Reverting canvas measuring. Keeping dev preview updates

* new lint rules

* more lint

* coverage

* revert utils and test changes. use for loop

.gitignore

@@ -9,7 +9,7 @@
 
 # Node
 node_modules
-npm-debug.log
+npm-debug.log*
 lerna-debug.log
 package-lock.json
 yarn-error.log

packages/table/preview/index.html

@@ -30,16 +30,43 @@
       right: 0;
     }
 
+    /**
+     * A simple filling layout that DOES NOT create a layout boundary (due to
+     * `display: inline-block`)
+     */
+    .layout-passthrough-fill {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      position: relative;
+    }
+
+    /**
+     * A simple filling layout that DOES create a layout boundary.
+     * See: http://wilsonpage.co.uk/introducing-layout-boundaries/
+     */
+    .layout-boundary {
+      display: block;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      overflow: hidden;
+    }
+
     .container {
       display: flex;
       overflow: hidden;
       height: 100%;
     }
 
     .table {
-      flex: 1;
+      flex: 1 1 auto;
       order: 2;
       z-index: 2;
+      overflow: hidden;
+      position: relative;
     }
 
     .table.is-inline {
@@ -51,7 +78,7 @@
 
     .sidebar {
       background-color: #EBF1F5;
-      flex-basis: 300px;
+      flex: 0 0 300px;
       height: 100%;
       order: 1;
       overflow-y: auto;