Show a Chrome notification when the app ID has been copied instead of a banner (#2282)

Author: elliette

dwds/debug_extension_mv3/web/background.dart

@@ -158,6 +158,16 @@ Future<void> _handleRuntimeMessages(
     },
   );
 
+  interceptMessage<String>(
+    message: jsRequest,
+    expectedType: MessageType.appId,
+    expectedSender: Script.copier,
+    expectedRecipient: Script.background,
+    messageHandler: (String appId) {
+      displayNotification('Copied app ID: $appId');
+    },
+  );
+
   sendResponse(defaultResponse);
 }
 

dwds/debug_extension_mv3/web/copier.dart

@@ -42,14 +42,12 @@ void _copyAppId(String appId) {
   final clipboard = window.navigator.clipboard;
   if (clipboard == null) return;
   clipboard.writeText(appId);
-  _showCopiedMessage(appId);
+  _notifyCopiedSuccess(appId);
 }
 
-Future<void> _showCopiedMessage(String appId) async {
-  final snackbar = document.createElement('div');
-  snackbar.setInnerHtml('Copied app ID: <i>$appId</i>');
-  snackbar.classes.addAll(['snackbar', 'snackbar--info', 'show']);
-  document.body?.append(snackbar);
-  await Future.delayed(Duration(seconds: 4));
-  snackbar.remove();
-}
+Future<bool> _notifyCopiedSuccess(String appId) => sendRuntimeMessage(
+      type: MessageType.appId,
+      body: appId,
+      sender: Script.copier,
+      recipient: Script.background,
+    );

dwds/debug_extension_mv3/web/debug_session.dart

@@ -246,13 +246,7 @@ _enableExecutionContextReporting(int tabId) {
       final chromeError = chrome.runtime.lastError;
       if (chromeError != null) {
         final errorMessage = _translateChromeError(chromeError.message);
-        chrome.notifications.create(
-          // notificationId
-          null,
-          NotificationOptions(message: errorMessage),
-          // callback
-          null,
-        );
+        displayNotification(errorMessage, isError: true);
         return;
       }
     }),
@@ -720,16 +714,10 @@ Future<bool> _showWarning(
 
 Future<bool> _showWarningNotification(String message) {
   final completer = Completer<bool>();
-  chrome.notifications.create(
-    // notificationId
-    null,
-    NotificationOptions(
-      title: '[Error] Dart Debug Extension',
-      message: message,
-      iconUrl: 'static_assets/dart.png',
-      type: 'basic',
-    ),
-    allowInterop((_) {
+  displayNotification(
+    message,
+    isError: true,
+    callback: allowInterop((_) {
       completer.complete(true);
     }),
   );

dwds/debug_extension_mv3/web/manifest_mv2.json

@@ -1,6 +1,6 @@
 {
   "name": "Dart Debug Extension",
-  "version": "1.38",
+  "version": "1.40",
   "manifest_version": 2,
   "devtools_page": "static_assets/devtools.html",
   "browser_action": {
@@ -25,7 +25,6 @@
     {
       "matches": ["<all_urls>"],
       "js": ["detector.dart.js", "copier.dart.js"],
-      "css": ["static_assets/styles.css"],
       "run_at": "document_end"
     }
   ],

dwds/debug_extension_mv3/web/manifest_mv3.json

@@ -1,6 +1,6 @@
 {
   "name": "Dart Debug Extension",
-  "version": "1.38",
+  "version": "1.40",
   "manifest_version": 3,
   "devtools_page": "static_assets/devtools.html",
   "action": {
@@ -32,7 +32,6 @@
     {
       "matches": ["<all_urls>"],
       "js": ["detector.dart.js", "copier.dart.js"],
-      "css": ["static_assets/styles.css"],
       "run_at": "document_end"
     }
   ],

dwds/debug_extension_mv3/web/static_assets/styles.css

@@ -75,7 +75,7 @@ h6 {
 }
 
 .snackbar {
-  top: 0px;
+  bottom: 0px;
   color: #eeeeee;
   font-family:  Roboto, 'Helvetica Neue', sans-serif;
   left: 0px;
@@ -113,44 +113,22 @@ h6 {
 
 @-webkit-keyframes fadein {
   from {
-    top: 0;
+    bottom: 0;
     opacity: 0;
   }
   to {
-    top: 0px;
+    bottom: 0px;
     opacity: 1;
   }
 }
 
 @keyframes fadein {
   from {
-    top: 0;
+    bottom: 0;
     opacity: 0;
   }
   to {
-    top: 0px;
+    bottom: 0px;
     opacity: 1;
   }
 }
-
-@-webkit-keyframes fadeout {
-  from {
-    top: 0px;
-    opacity: 1;
-  }
-  to {
-    top: 0;
-    opacity: 0;
-  }
-}
-
-@keyframes fadeout {
-  from {
-    top: 0px;
-    opacity: 1;
-  }
-  to {
-    top: 0;
-    opacity: 0;
-  }
-}

dwds/debug_extension_mv3/web/utils.dart

@@ -69,6 +69,25 @@ Future<bool> removeTab(int tabId) {
   return completer.future;
 }
 
+void displayNotification(
+  String message, {
+  bool isError = false,
+  Function? callback,
+}) {
+  chrome.notifications.create(
+    // notificationId
+    null,
+    NotificationOptions(
+      title: '${isError ? '[Error] ' : ''}Dart Debug Extension',
+      message: message,
+      iconUrl:
+          isError ? 'static_assets/dart_warning.png' : 'static_assets/dart.png',
+      type: 'basic',
+    ),
+    callback,
+  );
+}
+
 Future<bool> injectScript(String scriptName, {required int tabId}) async {
   if (isMV3) {
     await promiseToFuture(