[turbolizer] Make the resizers permanently big

Since the resizers (the handles used to resize the panes) were
getting bigger when selected, they obscured part of the scrollbar
making the scrollbar too hard to select.

Also, when they were snapped, the right resizer totally obscured
the scrollbar.

Bug: v8:7327
Change-Id: I04f3df00181df2265890ef54706091b3bc36f23e
Notry: true
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/1869191Reviewed-by: Sigurd Schneider <sigurds@chromium.org>
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
Cr-Commit-Position: refs/heads/master@{#64421}

tools/turbolizer/src/resizer.ts

@@ -91,12 +91,10 @@ export class Resizer {
   clientWidth: number;
   left: HTMLElement;
   right: HTMLElement;
-  middle: HTMLElement;
   sepLeft: number;
   sepRight: number;
   sepLeftSnap: number;
   sepRightSnap: number;
-  sepWidthOffset: number;
   panesUpdatedCallback: () => void;
   resizerRight: d3.Selection<HTMLDivElement, any, any, any>;
   resizerLeft: d3.Selection<HTMLDivElement, any, any, any>;
@@ -106,20 +104,17 @@ export class Resizer {
     resizer.panesUpdatedCallback = panesUpdatedCallback;
     resizer.deadWidth = deadWidth;
     resizer.left = document.getElementById(C.SOURCE_PANE_ID);
-    resizer.middle = document.getElementById(C.INTERMEDIATE_PANE_ID);
     resizer.right = document.getElementById(C.GENERATED_PANE_ID);
     resizer.resizerLeft = d3.select('#resizer-left');
     resizer.resizerRight = d3.select('#resizer-right');
     resizer.sepLeftSnap = 0;
     resizer.sepRightSnap = 0;
-    // Offset to prevent resizers from sliding slightly over one another.
-    resizer.sepWidthOffset = 7;
     this.updateWidths();
 
     const dragResizeLeft = d3.drag()
       .on('drag', function () {
         const x = d3.mouse(this.parentElement)[0];
-        resizer.sepLeft = Math.min(Math.max(0, x), resizer.sepRight - resizer.sepWidthOffset);
+        resizer.sepLeft = Math.min(Math.max(0, x), resizer.sepRight);
         resizer.updatePanes();
       })
       .on('start', function () {
@@ -140,7 +135,7 @@ export class Resizer {
     const dragResizeRight = d3.drag()
       .on('drag', function () {
         const x = d3.mouse(this.parentElement)[0];
-        resizer.sepRight = Math.max(resizer.sepLeft + resizer.sepWidthOffset, Math.min(x, resizer.clientWidth));
+        resizer.sepRight = Math.max(resizer.sepLeft, Math.min(x, resizer.clientWidth));
         resizer.updatePanes();
       })
       .on('start', function () {
@@ -180,7 +175,6 @@ export class Resizer {
     this.resizerLeft.classed("snapped", leftSnapped);
     this.resizerRight.classed("snapped", rightSnapped);
     this.left.style.width = this.sepLeft + 'px';
-    this.middle.style.width = (this.sepRight - this.sepLeft) + 'px';
     this.right.style.width = (this.clientWidth - this.sepRight) + 'px';
     this.resizerLeft.style('left', this.sepLeft + 'px');
     this.resizerRight.style('right', (this.clientWidth - this.sepRight - 1) + 'px');

tools/turbolizer/tabs.css

 .content {
     display: grid;
-    grid-template-areas: "tabs" "window";
+    grid-template-areas:
+        "tabs"
+        "window";
     grid-template-columns: 1fr;
     grid-template-rows: auto 1fr;
     min-height: calc(100vh);

tools/turbolizer/turbo-visualizer.css

@@ -155,9 +155,10 @@ html,
 body {
   margin: 0;
   padding: 0;
-  /*height: 99vh;
-    width: 99vw;*/
   overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  width: 100vw;
 }
 
 p {
@@ -334,18 +335,13 @@ input:hover,
 
 
 #left {
-  float: left;
   user-select: none;
 }
 
 #middle {
-  float: left;
   background-color: #F8F8F8;
   user-select: none;
-}
-
-#right {
-  float: right;
+  flex: 1;
 }
 
 .viewpane {
@@ -380,8 +376,6 @@ input:hover,
   background: rgba(100%, 100%, 100%);
   box-sizing: border-box;
   padding: 3px;
-  margin-left: 4px;
-  margin-right: 4px;
   overflow-x: hidden;
 }
 
@@ -430,27 +424,15 @@ text {
 }
 
 .resizer {
-  position: absolute;
   z-index: 10;
-  width: 4px;
-  height: 100%;
+  width: 10px;
+  height: 100vh;
   background: #a0a0a0;
   cursor: pointer;
 }
 
-.resizer.snapped {
-  width: 12px;
-}
-
-.resizer.snapped:hover {
-  width: 12px;
-  margin-left: 0px;
-}
-
 .resizer:hover,
 .resizer.dragged {
-  width: 10px;
-  margin-left: -4px;
   background: orange;
 }