dart migrate: Move title bar and add 'Migrate' check box next to title

This check box displays whether a file is migrating, opting out, or
already migrated. The check box can be clicked to toggle between
migrating and opting out. Clicking the check box updates status in the
navigation tree. Clicking on check boxes updates the status in the
title bar.

Screenshot here: https://screenshot.googleplex.com/9z9v9L5DHhBXzEU.png

In terms of the HTML, a new parent above '.content' div was added:
the '.file' div, which includes a '.title-bar' div above the '.content'
div.

Bug: dart-lang/sdk#44101 and
Change-Id: I021f0dd873119ae801e29faa92e97fe48d03ef3c
dart-lang/sdk#44124
Reviewed-on: https://dart-review.googlesource.com/c/sdk/+/174440
Commit-Queue: Samuel Rawlins <srawlins@google.com>
Reviewed-by: Paul Berry <paulberry@google.com>

pkg/nnbd_migration/lib/src/front_end/navigation_tree_renderer.dart

@@ -56,7 +56,8 @@ class NavigationTreeRenderer {
       for (var entry in linksGroupedByDirectory.entries)
         NavigationTreeDirectoryNode(
           name: entry.key,
-          path: pathContext.joinAll(entry.value.first.pathParts),
+          path: pathContext
+              .dirname(pathContext.joinAll(entry.value.first.pathParts)),
           subtree: _renderNavigationSubtree(entry.value, depth + 1),
         )..setSubtreeParents(),
       for (var link in links.where((link) => link.depth == depth))

pkg/nnbd_migration/lib/src/front_end/resources/index.html

@@ -25,7 +25,6 @@ <h2></h2><!-- header placeholder element -->
     <h1>Dart</h1>
     <h2 class="before-apply">Proposed null safety changes</h2>
     <h2 class="after-apply">&#10003; Null safety migration applied</h2>
-    <h3 id="unit-name">&nbsp;</h3>
     <a target="_blank"
        href="https://goo.gle/dart-null-safety-migration-tool">
       <button class="action-button">
@@ -63,16 +62,26 @@ <h3 id="unit-name">&nbsp;</h3>
             <div class="nav-tree"></div>
         </div><!-- /nav-inner -->
     </div><!-- /nav -->
-    <div class="content">
-        <div class="regions">
-            <!-- The regions overlay code copy of the content to provide -->
-            <!-- tooltips for modified regions. -->
-        </div><!-- /regions -->
-        <div class="code">
-            <!-- Compilation unit content is written here. -->
-            <p class="welcome">
-                Select a source file on the left to preview the proposed edits.
-            </p>
+    <div class="file">
+        <div class="title-bar">
+            <h3 id="unit-name">&nbsp;</h3>
+            <span id="migrate-unit-status-icon-label">Migrate
+                <span
+                    class="material-icons status-icon migrating"
+                    id="migrate-unit-status-icon">check_box</span>
+            </span>
+        </div>
+        <div class="content">
+            <div class="regions">
+                <!-- The regions overlay code copy of the content to provide -->
+                <!-- tooltips for modified regions. -->
+            </div><!-- /regions -->
+            <div class="code">
+                <!-- Compilation unit content is written here. -->
+                <p class="welcome">
+                    Select a source file on the left to preview the proposed edits.
+                </p>
+            </div>
         </div>
     </div><!-- /content -->
     <div class="info-panel">

pkg/nnbd_migration/lib/src/front_end/resources/migration.css

@@ -93,8 +93,7 @@ header {
 }
 
 header h1,
-header h2,
-header h3 {
+header h2 {
   display: inline-block;
   font-family: "Google Sans","Roboto",sans-serif;
   font-weight: 400;
@@ -113,13 +112,6 @@ header h2 {
   top: -2px;
 }
 
-header h3 {
-  /* Shift text up */
-  position: relative;
-  top: -2px;
-}
-
-
 header .action-button, header a {
   right: 0px;
   float: right;
@@ -222,23 +214,23 @@ footer .sdk-version {
   color: #676767; /* $secondary-color */
 }
 
-.nav-tree .status-icon.already-migrated {
+.status-icon.already-migrated {
   color: #007a27; /* $light-green */
 }
 
-.nav-tree .status-icon.opted-out {
+.status-icon.opted-out {
   color: #676767; /* $secondary-color */
 }
 
-.nav-tree .status-icon.opted-out:hover {
+.status-icon.opted-out:hover {
   color: #ffffff;
 }
 
-.nav-tree .status-icon.migrating {
+.status-icon.migrating {
   color: #51c686; /* $dark-green */
 }
 
-.nav-tree .status-icon.migrating:hover {
+.status-icon.migrating:hover {
   color: #ffffff;
 }
 
@@ -300,14 +292,41 @@ footer .sdk-version {
   line-height: 1em;
 }
 
-.content {
+.file {
   flex: 4 300px;
+  font-family: "Google Sans","Roboto",sans-serif;
   background: #12202f;
-  font-family: "Roboto Mono", monospace;
-  margin: 0 6px;
+  margin: 6px;
+  overflow: scroll;
+}
+
+.title-bar h3 {
+  display: inline-block;
+  font-weight: 400;
+  /* This aligns the title text with the content text, accounting for the width
+   * of the line numbers.
+   */
+  margin: 0.5em 24px 0.5em 63px;
+}
+
+.title-bar #migrate-unit-status-icon-label {
+  display: none;
+  user-select: none;
+}
+
+.title-bar #migrate-unit-status-icon-label.visible {
+  /* Change to 'inline' to enable the incremental migration feature. */
+  display: none;
+}
+
+.title-bar #migrate-unit-status-icon {
+  vertical-align: text-bottom;
+}
+
+.content {
+  font-family: "Roboto Mono",monospace;
   position: relative;
   white-space: pre;
-  overflow: scroll;
 }
 
 .code {
@@ -659,7 +678,7 @@ button[disabled] {
  * Adjustments to align material icons in the toolbar buttons.
 */
 .action-button > span {
-  position:relative;
+  position: relative;
   top: -3px;
 }