UI polish for the DevTools app bar and "page not found" screen (#6053)

flutter · Jul 18, 2023 · b4d6838 · b4d6838
1 parent d6b74b5
commit b4d6838
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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