Settings page, Dart Debugger panel, and Flutter Inspector panel match DevTools styles (#1815)

Author: elliette

dwds/debug_extension_mv3/build.yaml

@@ -19,8 +19,9 @@ builders:
     build_extensions:
       {
         "web/{{}}.dart.js": ["compiled/{{}}.dart.js"],
-        "web/{{}}.png": ["compiled/{{}}.png"],
-        "web/{{}}.html": ["compiled/{{}}.html"],
+        "web/static_assets/{{}}.png": ["compiled/static_assets/{{}}.png"],
+        "web/static_assets/{{}}.html": ["compiled/static_assets/{{}}.html"],
+        "web/static_assets/{{}}.css": ["compiled/static_assets/{{}}.css"],
         "web/manifest.json": ["compiled/manifest.json"],
       }
     auto_apply: none

dwds/debug_extension_mv3/tool/copy_builder.dart

@@ -11,8 +11,9 @@ class _CopyBuilder extends Builder {
   @override
   Map<String, List<String>> get buildExtensions => {
         "web/{{}}.dart.js": ["compiled/{{}}.dart.js"],
-        "web/{{}}.png": ["compiled/{{}}.png"],
-        "web/{{}}.html": ["compiled/{{}}.html"],
+        "web/static_assets/{{}}.png": ["compiled/static_assets/{{}}.png"],
+        "web/static_assets/{{}}.html": ["compiled/static_assets/{{}}.html"],
+        "web/static_assets/{{}}.css": ["compiled/static_assets/{{}}.css"],
         "web/manifest.json": ["compiled/manifest.json"],
       };
 

dwds/debug_extension_mv3/web/background.dart

@@ -140,11 +140,14 @@ void _updateIcon(int activeTabId) async {
 }
 
 void _setDebuggableIcon() {
-  chrome.action.setIcon(IconInfo(path: 'dart.png'), /*callback*/ null);
+  chrome.action
+      .setIcon(IconInfo(path: 'static_assets/dart.png'), /*callback*/ null);
 }
 
 void _setDefaultIcon() {
-  final iconPath = isDevMode() ? 'dart_dev.png' : 'dart_grey.png';
+  final iconPath = isDevMode()
+      ? 'static_assets/dart_dev.png'
+      : 'static_assets/dart_grey.png';
   chrome.action.setIcon(IconInfo(path: iconPath), /*callback*/ null);
 }
 
@@ -161,7 +164,7 @@ void _showWarningNotification(String message) {
     NotificationOptions(
       title: '[Error] Dart Debug Extension',
       message: message,
-      iconUrl: 'dart.png',
+      iconUrl: 'static_assets/dart.png',
       type: 'basic',
     ),
     /*callback*/ null,

dwds/debug_extension_mv3/web/devtools.dart

@@ -45,7 +45,7 @@ void _maybeCreatePanels() async {
   chrome.devtools.panels.create(
     isDevMode() ? '[DEV] Dart Debugger' : 'Dart Debugger',
     '',
-    'panel.html',
+    'static_assets/debugger_panel.html',
     allowInterop((ExtensionPanel panel) => _onPanelAdded(panel, debugInfo)),
   );
   // Create an inspector panel for internal Flutter apps:
@@ -54,7 +54,7 @@ void _maybeCreatePanels() async {
     chrome.devtools.panels.create(
       isDevMode() ? '[DEV] Flutter Inspector' : 'Flutter Inspector',
       '',
-      'panel.html',
+      'static_assets/inspector_panel.html',
       allowInterop((ExtensionPanel panel) => _onPanelAdded(panel, debugInfo)),
     );
   }

dwds/debug_extension_mv3/web/manifest.json

@@ -2,9 +2,9 @@
     "name": "MV3 Dart Debug Extension",
     "version": "1.0",
     "manifest_version": 3,
-    "devtools_page": "devtools.html",
+    "devtools_page": "static_assets/devtools.html",
     "action": {
-        "default_icon": "dart_dev.png"
+        "default_icon": "static_assets/dart_dev.png"
     },
     "permissions": [
         "debugger",
@@ -31,5 +31,5 @@
             "run_at": "document_end"
         }
     ],
-    "options_page": "settings.html"
+    "options_page": "static_assets/settings.html"
 }

dwds/debug_extension_mv3/web/panel.html

@@ -33,6 +33,7 @@ void _updateSettingsFromStorage(Event _) async {
 
 void _saveSettingsToStorage(Event event) async {
   event.preventDefault();
+  _maybeHideSavedMsg();
   final form = document.querySelector("form") as FormElement;
   final data = FormData(form);
   final devToolsOpenerValue = data.get('devToolsOpener') as String;
@@ -44,16 +45,20 @@ void _saveSettingsToStorage(Event event) async {
 }
 
 void _showSavedMsg() {
-  final msgContainer = document.getElementById('savedMsgEmpty');
-  if (msgContainer == null) return;
-  msgContainer.id = 'savedMsg';
-  msgContainer.innerHtml = 'Saved!';
+  final snackbar = document.getElementById('savedSnackbar');
+  if (snackbar == null) return;
+  snackbar.classes.add('show');
   Timer(Duration(seconds: 3), () {
-    msgContainer.id = 'savedMsgEmpty';
-    msgContainer.innerHtml = '';
+    _maybeHideSavedMsg();
   });
 }
 
+void _maybeHideSavedMsg() {
+  final snackbar = document.getElementById('savedSnackbar');
+  if (snackbar == null) return;
+  snackbar.classes.remove('show');
+}
+
 RadioButtonInputElement _getRadioButton(String id) {
   return document.getElementById(id) as RadioButtonInputElement;
 }