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: https://github.com/dart-lang/sdk/issues/44101 and
Change-Id: I021f0dd873119ae801e29faa92e97fe48d03ef3c
https://github.com/dart-lang/sdk/issues/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 @@
     <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 @@
             <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;
 }
 

pkg/nnbd_migration/lib/src/front_end/web/migration.dart

@@ -72,6 +72,20 @@ void main() {
 
     document.querySelector('.popup-pane .close').onClick.listen(
         (_) => document.querySelector('.popup-pane').style.display = 'none');
+
+    migrateUnitStatusIcon.onClick.listen((MouseEvent event) {
+      var unitPath = unitName.innerText;
+      var unitNavItem = document
+          .querySelector('.nav-panel [data-name*="$unitPath"]')
+          .parentNode as Element;
+      var statusIcon = unitNavItem.querySelector('.status-icon');
+      var entity = navigationTree.find(unitPath);
+      if (entity is NavigationTreeFileNode) {
+        toggleFileMigrationStatus(entity);
+        updateIconsForNode(statusIcon, entity);
+        updateParentIcons(unitNavItem, entity);
+      }
+    });
   });
 
   window.addEventListener('popstate', (event) {
@@ -109,10 +123,18 @@ final Element headerPanel = document.querySelector('header');
 
 final Element unitName = document.querySelector('#unit-name');
 
+final Element migrateUnitStatusIconLabel =
+    document.querySelector('#migrate-unit-status-icon-label');
+
+final Element migrateUnitStatusIcon =
+    document.querySelector('#migrate-unit-status-icon');
+
 String get rootPath => querySelector('.root').text.trim();
 
 String get sdkVersion => document.getElementById('sdk-version').text;
 
+/*late final*/ List<NavigationTreeNode> navigationTree;
+
 void addArrowClickHandler(Element arrow) {
   var childList = (arrow.parentNode as Element).querySelector(':scope > ul');
   // Animating height from "auto" to "0" is not supported by CSS [1], so all we
@@ -430,7 +452,8 @@ void loadNavigationTree() async {
     final response = await doGet<List<Object>>(path);
     var navTree = document.querySelector('.nav-tree');
     navTree.innerHtml = '';
-    writeNavigationSubtree(navTree, NavigationTreeNode.listFromJson(response),
+    navigationTree = NavigationTreeNode.listFromJson(response);
+    writeNavigationSubtree(navTree, navigationTree,
         enablePartialMigration: false);
   } catch (e, st) {
     handleError('Could not load navigation tree', e, st);
@@ -707,6 +730,19 @@ void toggleFileMigrationStatus(NavigationTreeFileNode entity) {
   }
 }
 
+/// Updates the navigation [icon] and current file icon according to the current
+/// migration status of [entity].
+void updateIconsForNode(Element icon, NavigationTreeNode entity) {
+  updateIconForStatus(icon, entity.migrationStatus);
+  // Update the status at the top of the file view if [entity] represents the
+  // current file.
+  var unitPath = unitName.innerText;
+  if (entity.path == unitPath) {
+    updateIconForStatus(migrateUnitStatusIcon, entity.migrationStatus);
+  }
+}
+
+/// Updates [icon] according to [status].
 void updateIconForStatus(Element icon, UnitMigrationStatus status) {
   switch (status) {
     case UnitMigrationStatus.alreadyMigrated:
@@ -753,6 +789,7 @@ void updatePage(String path, [int offset]) {
       link.classes.remove('selected-file');
     }
   });
+  migrateUnitStatusIconLabel.classes.add('visible');
 }
 
 /// Updates the parent icons of [entity] with list item [element] in the
@@ -762,7 +799,7 @@ void updateParentIcons(Element element, NavigationTreeNode entity) {
   if (parent != null) {
     var parentElement = (element.parentNode as Element).parentNode as Element;
     var statusIcon = parentElement.querySelector(':scope > .status-icon');
-    updateIconForStatus(statusIcon, parent.migrationStatus);
+    updateIconsForNode(statusIcon, parent);
     updateParentIcons(parentElement, parent);
   }
 }
@@ -774,11 +811,11 @@ void updateSubtreeIcons(Element element, NavigationTreeDirectoryNode entity) {
     if (child is NavigationTreeDirectoryNode) {
       updateSubtreeIcons(childNode, child);
       var childIcon = childNode.querySelector(':scope > .status-icon');
-      updateIconForStatus(childIcon, entity.migrationStatus);
+      updateIconsForNode(childIcon, entity);
     } else {
       var childIcon = (childNode.parentNode as Element)
           .querySelector(':scope > .status-icon');
-      updateIconForStatus(childIcon, child.migrationStatus);
+      updateIconsForNode(childIcon, child);
     }
   }
 }
@@ -824,11 +861,11 @@ void writeNavigationSubtree(
       if (enablePartialMigration) {
         var statusIcon = createIcon('indeterminate_check_box')
           ..classes.add('status-icon');
-        updateIconForStatus(statusIcon, entity.migrationStatus);
+        updateIconsForNode(statusIcon, entity);
         statusIcon.onClick.listen((MouseEvent event) {
           toggleDirectoryMigrationStatus(entity);
           updateSubtreeIcons(li, entity);
-          updateIconForStatus(statusIcon, entity.migrationStatus);
+          updateIconsForNode(statusIcon, entity);
           updateParentIcons(li, entity);
         });
         li.insertBefore(statusIcon, folderIcon);
@@ -837,10 +874,10 @@ void writeNavigationSubtree(
     } else if (entity is NavigationTreeFileNode) {
       if (enablePartialMigration) {
         var statusIcon = createIcon()..classes.add('status-icon');
-        updateIconForStatus(statusIcon, entity.migrationStatus);
+        updateIconsForNode(statusIcon, entity);
         statusIcon.onClick.listen((MouseEvent event) {
           toggleFileMigrationStatus(entity);
-          updateIconForStatus(statusIcon, entity.migrationStatus);
+          updateIconsForNode(statusIcon, entity);
           updateParentIcons(li, entity);
         });
         li.append(statusIcon);
@@ -991,3 +1028,19 @@ extension on Element {
     }
   }
 }
+
+extension on List<NavigationTreeNode> {
+  /// Finds the node with path equal to [path], recursively, or `null`.
+  NavigationTreeNode find(String path) {
+    for (var node in this) {
+      if (node is NavigationTreeDirectoryNode) {
+        var foundInSubtree = node.subtree.find(path);
+        if (foundInSubtree != null) return foundInSubtree;
+      } else {
+        assert(node is NavigationTreeFileNode);
+        if (node.path == path) return node;
+      }
+    }
+    return null;
+  }
+}

tools/abiversions/.cipd/pkgs/0/_current

@@ -0,0 +1 @@
+nUZcDJx3qTxCaT-h-Mw2OLbM-x8VxzrX4YDD9gCGoosC

tools/abiversions/.cipd/pkgs/0/description.json

@@ -0,0 +1,4 @@
+{
+  "subdir": "39",
+  "package_name": "dart/abiversions/39"
+}

tools/abiversions/.cipd/pkgs/0/nUZcDJx3qTxCaT-h-Mw2OLbM-x8VxzrX4YDD9gCGoosC/.cipdpkg/manifest.json

@@ -0,0 +1,22 @@
+{
+  "format_version": "1.1",
+  "package_name": "dart/abiversions/39",
+  "install_mode": "copy",
+  "files": [
+    {
+      "name": "gen_kernel_bytecode.dill",
+      "size": 5280200,
+      "hash": "I1SaF8VZ3FJGz_iT5syDDh0N5Z8zJfLQypxuMpk0gNMC"
+    },
+    {
+      "name": "kernel_service.dill",
+      "size": 9529664,
+      "hash": "XfD_LgRwvrc0dsbcfESHHhRUXKvDz3Owo7-EB1s97xsC"
+    },
+    {
+      "name": "vm_platform_strong.dill",
+      "size": 6202872,
+      "hash": "lbD-hNFdjnZ3VR4xKblv-1e95Wc3KRIgvKh_vw40nkYC"
+    }
+  ]
+}