Settings page, Dart Debugger panel, and Flutter Inspector panel match DevTools styles

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/settings.dart

@@ -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;
 }

dwds/debug_extension_mv3/web/static_assets/debugger_panel.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" type="text/css" />
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
+    <link rel="stylesheet" href="styles.css" type="text/css">
+</head>
+
+<body class="dark-theme">
+
+    <div class="mdl-layout mdl-js-layout">
+
+        <header class="mdl-layout__header">
+            <div class="mdl-layout__header-row">
+              <span class="mdl-layout__title">Dart Debugger</span>
+              <div class="mdl-layout-spacer"></div>
+            </div>
+          </header>
+
+        <div class="mdl-grid">
+            <div class="mdl-cell mdl-cell--12-col">
+
+                <div class="dart-card debugger-card mdl-card mdl-shadow--2dp">
+                    <div class="mdl-card__title"></div>
+                    <div class="mdl-card__supporting-text">
+                        <p>Before debugging, please <strong>disable</strong> focus on the Sources panel for breakpoints:
+                        </p>
+                        <code>Settings > Preferences > Sources > uncheck "Focus Sources panel when triggering a breakpoint"</code>
+                    </div>
+                    <div class="mdl-card__actions mdl-card--border">
+                        <button
+                            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
+                            Launch Debugger
+                        </button>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+    </div>
+
+</body>
+
+</html>

dwds/debug_extension_mv3/web/devtools.html → dwds/debug_extension_mv3/web/static_assets/devtools.html

@@ -5,7 +5,7 @@
 </head>
 
 <body>
-  <script src="devtools.dart.js"></script>
+  <script src="../devtools.dart.js"></script>
 </body>
 
 </html>

dwds/debug_extension_mv3/web/static_assets/inspector_panel.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" type="text/css" />
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
+    <link rel="stylesheet" href="styles.css" type="text/css">
+</head>
+
+<body class="dark-theme">
+
+    <div class="mdl-layout mdl-js-layout">
+
+        <header class="mdl-layout__header">
+            <div class="mdl-layout__header-row">
+              <span class="mdl-layout__title">Flutter Inspector</span>
+              <div class="mdl-layout-spacer"></div>
+            </div>
+          </header>
+
+        <div class="mdl-grid">
+            <div class="mdl-cell mdl-cell--12-col">
+
+                <div class="dart-card inspector-card mdl-card mdl-shadow--2dp">
+                    <div class="mdl-card__title"></div>
+                    <div class="mdl-card__supporting-text">
+                        The Flutter Inspector allows you to inspect the widgets in your Flutter app.
+                    </div>
+                    <div class="mdl-card__actions mdl-card--border">
+                        <button
+                            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
+                            Launch Inspector
+                        </button>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+    </div>
+
+</body>
+
+</html>

dwds/debug_extension_mv3/web/settings.html → dwds/debug_extension_mv3/web/static_assets/settings.html

@@ -4,16 +4,16 @@
 <head>
   <title>Dart Debug Extension Settings</title>
   <link rel="icon" href="dart.png">
-  <!-- TODO(elliette): Update stylesheet to more closely match the DevTools styles: -->
   <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" />
   <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
+  <link rel="stylesheet" href="styles.css" type="text/css">
 </head>
 
-<body>
+<body class="dark-theme">
+
   <div class="mdl-layout mdl-js-layout">
 
     <header class="mdl-layout__header">
-      <div class="mdl-layout-icon"></div>
       <div class="mdl-layout__header-row">
         <span class="mdl-layout__title">Dart Debug Extension Settings</span>
         <div class="mdl-layout-spacer"></div>
@@ -22,7 +22,9 @@
 
     <div class="mdl-grid">
       <div class="mdl-cell mdl-cell--12-col">
-        <div class="demo-card-square mdl-card mdl-shadow--2dp">
+
+        <div class="dart-card mdl-card mdl-shadow--2dp">
+
           <div class="mdl-card__supporting-text">
             <h6>Open DevTools in a:</h3>
               <form>
@@ -38,18 +40,22 @@ <h6>Open DevTools in a:</h3>
                 </fieldset>
               </form>
           </div>
+
           <div class="mdl-card__actions mdl-card--border">
-            <button id="saveButton" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
-              Save settings
+            <button
+                id="saveButton"
+                class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
+                Save settings
             </button>
-            <span id="savedMsgEmpty"></span>
           </div>
+
         </div>
       </div>
     </div>
+    <div id="savedSnackbar" class="snackbar snackbar--info">Settings saved!</div>
 
     <!-- Load script: -->
-    <script src="settings.dart.js"></script>
+    <script src="../settings.dart.js"></script>
 </body>
 
 </html>