From b4d68389e3bf46f49912dd4c4eb70bd7d02d0d21 Mon Sep 17 00:00:00 2001
From: Kenzie Davisson <43759233+kenzieschmoll@users.noreply.github.com>
Date: Tue, 18 Jul 2023 14:19:38 -0700
Subject: [PATCH] UI polish for the DevTools app bar and "page not found"
 screen (#6053)

---
 packages/devtools_app/lib/src/app.dart           | 16 ++++++++++++++--
 .../devtools_app/lib/src/framework/app_bar.dart  |  6 ++----
 packages/devtools_app/lib/src/shared/screen.dart |  6 +++++-
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/devtools_app/lib/src/app.dart b/packages/devtools_app/lib/src/app.dart
index cbee5fa9876..73152a58736 100644
--- a/packages/devtools_app/lib/src/app.dart
+++ b/packages/devtools_app/lib/src/app.dart
@@ -44,7 +44,6 @@ import 'service/service_extension_widgets.dart';
 import 'shared/analytics/analytics.dart' as ga;
 import 'shared/analytics/analytics_controller.dart';
 import 'shared/analytics/metrics.dart';
-import 'shared/common_widgets.dart';
 import 'shared/console/primitives/simple_items.dart';
 import 'shared/feature_flags.dart';
 import 'shared/globals.dart';
@@ -209,7 +208,20 @@ class DevToolsAppState extends State<DevToolsApp> with AutoDisposeMixin {
       child: DevToolsScaffold.withChild(
         key: const Key('not-found'),
         embed: isEmbedded(args),
-        child: CenteredMessage("'$page' not found."),
+        child: Center(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Text("'$page' not found."),
+              const SizedBox(height: defaultSpacing),
+              ElevatedButton(
+                onPressed: () =>
+                    routerDelegate.navigateHome(clearScreenParam: true),
+                child: const Text('Go to Home screen'),
+              ),
+            ],
+          ),
+        ),
       ),
     );
   }
diff --git a/packages/devtools_app/lib/src/framework/app_bar.dart b/packages/devtools_app/lib/src/framework/app_bar.dart
index 307ff763f2f..f09998610db 100644
--- a/packages/devtools_app/lib/src/framework/app_bar.dart
+++ b/packages/devtools_app/lib/src/framework/app_bar.dart
@@ -82,9 +82,7 @@ class DevToolsAppBar extends StatelessWidget {
         // have added a spacer element to [actionsWithSpacer] above, which
         // should be excluded from the width calculation.
         actionWidgetSize * ((actions ?? []).length) +
-            (actionsWithSpacer.safeFirst is VerticalLineSpacer
-                ? VerticalLineSpacer.totalWidth
-                : 0.0),
+            VerticalLineSpacer.totalWidth,
       );
 
       flexibleSpace = Align(
@@ -140,7 +138,7 @@ class DevToolsAppBar extends StatelessWidget {
       (prev, screen) => prev + screen.approximateTabWidth(textTheme),
     );
     final actionsWidth = (actions?.length ?? 0) * actionWidgetSize;
-    return tabsWidth + actionsWidth;
+    return tabsWidth + VerticalLineSpacer.totalWidth + actionsWidth;
   }
 }
 
diff --git a/packages/devtools_app/lib/src/shared/screen.dart b/packages/devtools_app/lib/src/shared/screen.dart
index 8bda151666f..6f43d976505 100644
--- a/packages/devtools_app/lib/src/shared/screen.dart
+++ b/packages/devtools_app/lib/src/shared/screen.dart
@@ -187,10 +187,14 @@ abstract class Screen {
       text: TextSpan(text: title),
       textDirection: TextDirection.ltr,
     )..layout();
+    const measurementBuffer = 1.5;
     return painter.width +
         denseSpacing +
         defaultIconSize +
-        (includeTabBarSpacing ? tabBarSpacing * 2 : 0.0);
+        (includeTabBarSpacing ? tabBarSpacing * 2 : 0.0) +
+        // Add a small buffer to account for variances between the text painter
+        // approximation and the actual measurement.
+        measurementBuffer;
   }
 
   /// Builds the tab to show for this screen in the [DevToolsScaffold]'s main