Include a settings page for configuring the Dart Debug Extension

dwds/debug_extension_mv3/pubspec.yaml

@@ -9,12 +9,14 @@ environment:
   sdk: '>=2.18.0 <3.0.0'
 
 dependencies:
+  built_value: ^8.3.0
   js: ^0.6.1+1
 
 dev_dependencies:
   build: ^2.0.0
   build_web_compilers: ^3.0.0
   build_runner: ^2.0.6
+  built_value_generator: ^8.3.0
   dwds: ^16.0.0
 
 dependency_overrides:

dwds/debug_extension_mv3/web/background.dart

@@ -11,7 +11,9 @@ import 'package:dwds/data/debug_info.dart';
 import 'package:js/js.dart';
 
 import 'chrome_api.dart';
+import 'data_types.dart';
 import 'messaging.dart';
+import 'storage.dart';
 import 'web_api.dart';
 
 void main() {
@@ -27,7 +29,10 @@ void _registerListeners() {
 
 Future<void> _startDebugSession(Tab _) async {
   // TODO(elliette): Start a debug session instead.
-  await _createTab('https://dart.dev/');
+  final devToolsOpener = await fetchStorageObject<DevToolsOpener>(
+      type: StorageObject.devToolsOpener);
+  await _createTab('https://dart.dev/',
+      inNewWindow: devToolsOpener?.newWindow ?? false);
 }
 
 void _handleRuntimeMessages(
@@ -59,7 +64,14 @@ Future<Tab?> _getTab() async {
   return tabs.isNotEmpty ? tabs.first : null;
 }
 
-Future<Tab> _createTab(String url) async {
+Future<Tab> _createTab(String url, {bool inNewWindow = false}) async {
+  if (inNewWindow) {
+    final windowPromise = chrome.windows.create(
+      WindowInfo(focused: true, url: url),
+    );
+    final windowObj = await promiseToFuture<WindowObj>(windowPromise);
+    return windowObj.tabs.first;
+  }
   final tabPromise = chrome.tabs.create(TabInfo(
     active: true,
     url: url,

dwds/debug_extension_mv3/web/chrome_api.dart

@@ -12,7 +12,9 @@ external Chrome get chrome;
 class Chrome {
   external Action get action;
   external Runtime get runtime;
+  external Storage get storage;
   external Tabs get tabs;
+  external Windows get windows;
 }
 
 /// chrome.action APIs
@@ -67,6 +69,23 @@ class MessageSender {
   external factory MessageSender({String? id, String? url, Tab? tab});
 }
 
+/// chrome.storage APIs
+/// https://developer.chrome.com/docs/extensions/reference/storage
+
+@JS()
+@anonymous
+class Storage {
+  external StorageArea get local;
+}
+
+@JS()
+@anonymous
+class StorageArea {
+  external Object get(List<String> keys, void Function(Object result) callback);
+
+  external Object set(Object items, void Function()? callback);
+}
+
 /// chrome.tabs APIs
 /// https://developer.chrome.com/docs/extensions/reference/tabs
 
@@ -102,3 +121,27 @@ class Tab {
   external int get id;
   external String get url;
 }
+
+/// chrome.windows APIs
+/// https://developer.chrome.com/docs/extensions/reference/windows
+
+@JS()
+@anonymous
+class Windows {
+  external Object create(WindowInfo? createData);
+}
+
+@JS()
+@anonymous
+class WindowInfo {
+  external bool? get focused;
+  external String? get url;
+  external factory WindowInfo({bool? focused, String? url});
+}
+
+@JS()
+@anonymous
+class WindowObj {
+  external int get id;
+  external List<Tab> get tabs;
+}

dwds/debug_extension_mv3/web/data_serializers.dart

@@ -0,0 +1,15 @@
+// Copyright (c) 2022, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+import 'package:built_value/serializer.dart';
+
+import 'data_types.dart';
+
+part 'data_serializers.g.dart';
+
+/// Serializers for all the data types used in the Dart Debug Extension.
+@SerializersFor([
+  DevToolsOpener,
+])
+final Serializers serializers = _$serializers;

dwds/debug_extension_mv3/web/data_types.dart

@@ -0,0 +1,21 @@
+// Copyright (c) 2022, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+import 'package:built_value/built_value.dart';
+import 'package:built_value/serializer.dart';
+
+part 'data_types.g.dart';
+
+abstract class DevToolsOpener
+    implements Built<DevToolsOpener, DevToolsOpenerBuilder> {
+  static Serializer<DevToolsOpener> get serializer =>
+      _$devToolsOpenerSerializer;
+
+  factory DevToolsOpener([Function(DevToolsOpenerBuilder) updates]) =
+      _$DevToolsOpener;
+
+  DevToolsOpener._();
+
+  bool get newWindow;
+}

dwds/debug_extension_mv3/web/manifest.json

@@ -6,9 +6,10 @@
         "default_icon": "dart_dev.png"
     },
     "permissions": [
+        "debugger",
         "scripting",
-        "tabs",
-        "debugger"
+        "storage",
+        "tabs"
     ],
     "host_permissions": [
         "<all_urls>"
@@ -37,5 +38,6 @@
             ],
             "run_at": "document_end"
         }
-    ]
-}
+    ],
+    "options_page": "settings.html"
+}

dwds/debug_extension_mv3/web/settings.dart

@@ -0,0 +1,59 @@
+// Copyright (c) 2022, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+@JS()
+library settings;
+
+import 'dart:async';
+import 'dart:html';
+
+import 'package:js/js.dart';
+
+import 'data_types.dart';
+import 'storage.dart';
+
+void main() {
+  _registerListeners();
+}
+
+void _registerListeners() {
+  document.addEventListener('DOMContentLoaded', _updateSettingsFromStorage);
+  final saveButton = document.getElementById('saveButton') as ButtonElement;
+  saveButton.addEventListener('click', _saveSettingsToStorage);
+}
+
+void _updateSettingsFromStorage(Event _) async {
+  final devToolsOpener = await fetchStorageObject<DevToolsOpener>(
+      type: StorageObject.devToolsOpener);
+  final openInNewWindow = devToolsOpener?.newWindow ?? false;
+  _getRadioButton('windowOpt').checked = openInNewWindow;
+  _getRadioButton('tabOpt').checked = !openInNewWindow;
+}
+
+void _saveSettingsToStorage(Event event) async {
+  event.preventDefault();
+  final form = document.querySelector("form") as FormElement;
+  final data = FormData(form);
+  final devToolsOpenerValue = data.get('devToolsOpener') as String;
+  await setStorageObject<DevToolsOpener>(
+      type: StorageObject.devToolsOpener,
+      value: DevToolsOpener(
+          (b) => b..newWindow = devToolsOpenerValue == 'window'));
+  _showSavedMsg();
+}
+
+void _showSavedMsg() {
+  final msgContainer = document.getElementById('savedMsgEmpty');
+  if (msgContainer == null) return;
+  msgContainer.id = 'savedMsg';
+  msgContainer.innerHtml = 'Saved!';
+  Timer(Duration(seconds: 3), () {
+    msgContainer.id = 'savedMsgEmpty';
+    msgContainer.innerHtml = '';
+  });
+}
+
+RadioButtonInputElement _getRadioButton(String id) {
+  return document.getElementById(id) as RadioButtonInputElement;
+}