From ff883a2de2b9260c7af6d3b54b96870e2fb0acf7 Mon Sep 17 00:00:00 2001 From: Elliott Brooks <21270878+elliette@users.noreply.github.com> Date: Wed, 1 Nov 2023 15:38:07 -0700 Subject: [PATCH 1/4] Inject only CSS styles needed for the banner --- dwds/debug_extension_mv3/web/copier.dart | 5 +- .../debug_extension_mv3/web/manifest_mv2.json | 4 +- .../debug_extension_mv3/web/manifest_mv3.json | 4 +- .../web/static_assets/styles_injected.css | 54 +++++++++++++++++++ 4 files changed, 62 insertions(+), 5 deletions(-) create mode 100644 dwds/debug_extension_mv3/web/static_assets/styles_injected.css diff --git a/dwds/debug_extension_mv3/web/copier.dart b/dwds/debug_extension_mv3/web/copier.dart index 79ce3aeaf..6625091ec 100644 --- a/dwds/debug_extension_mv3/web/copier.dart +++ b/dwds/debug_extension_mv3/web/copier.dart @@ -48,7 +48,10 @@ void _copyAppId(String appId) { Future _showCopiedMessage(String appId) async { final snackbar = document.createElement('div'); snackbar.setInnerHtml('Copied app ID: $appId'); - snackbar.classes.addAll(['snackbar', 'snackbar--info', 'show']); + snackbar.classes.addAll([ + 'dart-debug-extension-snackbar', + 'dart-debug-extension-show', + ]); document.body?.append(snackbar); await Future.delayed(Duration(seconds: 4)); snackbar.remove(); diff --git a/dwds/debug_extension_mv3/web/manifest_mv2.json b/dwds/debug_extension_mv3/web/manifest_mv2.json index 800ebc4b2..483d40274 100644 --- a/dwds/debug_extension_mv3/web/manifest_mv2.json +++ b/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,7 @@ { "matches": [""], "js": ["detector.dart.js", "copier.dart.js"], - "css": ["static_assets/styles.css"], + "css": ["static_assets/styles_injected.css"], "run_at": "document_end" } ], diff --git a/dwds/debug_extension_mv3/web/manifest_mv3.json b/dwds/debug_extension_mv3/web/manifest_mv3.json index a0f010ef4..543085a60 100644 --- a/dwds/debug_extension_mv3/web/manifest_mv3.json +++ b/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,7 @@ { "matches": [""], "js": ["detector.dart.js", "copier.dart.js"], - "css": ["static_assets/styles.css"], + "css": ["static_assets/styles_injected.css"], "run_at": "document_end" } ], diff --git a/dwds/debug_extension_mv3/web/static_assets/styles_injected.css b/dwds/debug_extension_mv3/web/static_assets/styles_injected.css new file mode 100644 index 000000000..46b67ae7d --- /dev/null +++ b/dwds/debug_extension_mv3/web/static_assets/styles_injected.css @@ -0,0 +1,54 @@ +/** + * WARNING: THIS STYLESHEET IS INJECTED INTO EVERY WEBPAGE. + * + * All classes should be prefixed with "dart-debug-extension" + * to avoid interfering with other styles on the page. + */ + +.dart-debug-extension-snackbar { + background-color: #303030; + top: 0px; + color: #eeeeee; + font-family: Roboto, 'Helvetica Neue', sans-serif; + left: 0px; + padding: 16px; + position: fixed; + right: 0px; + text-align: center; + visibility: hidden; + width: 100%; + z-index: 2147483647; +} + +.dart-debug-extension-snackbar > a { + color: #eeeeee; + font-weight: bold; +} + +.dart-debug-extension-show { + -webkit-animation: dart-debug-extension-fadein 0.5s; + animation: dart-debug-extension-fadein 0.5s; + visibility: visible; +} + +@-webkit-keyframes dart-debug-extension-fadein { + from { + top: 0; + opacity: 0; + } + to { + top: 0px; + opacity: 1; + } +} + +@keyframes dart-debug-extension-fadein { + from { + top: 0; + opacity: 0; + } + to { + top: 0px; + opacity: 1; + } +} \ No newline at end of file From 7ce9dc1996381547d14a7d7bcc4ac75cd29c8e67 Mon Sep 17 00:00:00 2001 From: Elliott Brooks <21270878+elliette@users.noreply.github.com> Date: Wed, 1 Nov 2023 15:39:05 -0700 Subject: [PATCH 2/4] Sort CSS properties --- .../web/static_assets/styles_injected.css | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/dwds/debug_extension_mv3/web/static_assets/styles_injected.css b/dwds/debug_extension_mv3/web/static_assets/styles_injected.css index 46b67ae7d..9bb5c61fc 100644 --- a/dwds/debug_extension_mv3/web/static_assets/styles_injected.css +++ b/dwds/debug_extension_mv3/web/static_assets/styles_injected.css @@ -7,7 +7,6 @@ .dart-debug-extension-snackbar { background-color: #303030; - top: 0px; color: #eeeeee; font-family: Roboto, 'Helvetica Neue', sans-serif; left: 0px; @@ -15,40 +14,41 @@ position: fixed; right: 0px; text-align: center; + top: 0px; visibility: hidden; width: 100%; z-index: 2147483647; -} + } .dart-debug-extension-snackbar > a { color: #eeeeee; font-weight: bold; -} + } .dart-debug-extension-show { -webkit-animation: dart-debug-extension-fadein 0.5s; animation: dart-debug-extension-fadein 0.5s; visibility: visible; -} + } @-webkit-keyframes dart-debug-extension-fadein { from { - top: 0; opacity: 0; - } + top: 0; + } to { - top: 0px; opacity: 1; - } -} + top: 0px; + } + } @keyframes dart-debug-extension-fadein { from { - top: 0; opacity: 0; - } + top: 0; + } to { - top: 0px; opacity: 1; - } -} \ No newline at end of file + top: 0px; + } + } \ No newline at end of file From c9d18dfe6094ae0b7473e0a6a4ea8051cba4da82 Mon Sep 17 00:00:00 2001 From: Elliott Brooks <21270878+elliette@users.noreply.github.com> Date: Wed, 1 Nov 2023 15:39:49 -0700 Subject: [PATCH 3/4] New line at end of file --- dwds/debug_extension_mv3/web/static_assets/styles_injected.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dwds/debug_extension_mv3/web/static_assets/styles_injected.css b/dwds/debug_extension_mv3/web/static_assets/styles_injected.css index 9bb5c61fc..80949042d 100644 --- a/dwds/debug_extension_mv3/web/static_assets/styles_injected.css +++ b/dwds/debug_extension_mv3/web/static_assets/styles_injected.css @@ -51,4 +51,4 @@ opacity: 1; top: 0px; } - } \ No newline at end of file + } From 3fcf4c70a74f91a038e84c19cc35c9ed190b7019 Mon Sep 17 00:00:00 2001 From: Elliott Brooks <21270878+elliette@users.noreply.github.com> Date: Wed, 1 Nov 2023 15:43:29 -0700 Subject: [PATCH 4/4] Clean up stylesheet --- dwds/debug_extension_mv3/web/copier.dart | 1 - .../web/static_assets/styles_injected.css | 15 +++------------ 2 files changed, 3 insertions(+), 13 deletions(-) diff --git a/dwds/debug_extension_mv3/web/copier.dart b/dwds/debug_extension_mv3/web/copier.dart index 6625091ec..6060e7ea4 100644 --- a/dwds/debug_extension_mv3/web/copier.dart +++ b/dwds/debug_extension_mv3/web/copier.dart @@ -50,7 +50,6 @@ Future _showCopiedMessage(String appId) async { snackbar.setInnerHtml('Copied app ID: $appId'); snackbar.classes.addAll([ 'dart-debug-extension-snackbar', - 'dart-debug-extension-show', ]); document.body?.append(snackbar); await Future.delayed(Duration(seconds: 4)); diff --git a/dwds/debug_extension_mv3/web/static_assets/styles_injected.css b/dwds/debug_extension_mv3/web/static_assets/styles_injected.css index 80949042d..382d2e193 100644 --- a/dwds/debug_extension_mv3/web/static_assets/styles_injected.css +++ b/dwds/debug_extension_mv3/web/static_assets/styles_injected.css @@ -6,6 +6,8 @@ */ .dart-debug-extension-snackbar { + -webkit-animation: dart-debug-extension-fadein 0.5s; + animation: dart-debug-extension-fadein 0.5s; background-color: #303030; color: #eeeeee; font-family: Roboto, 'Helvetica Neue', sans-serif; @@ -15,22 +17,11 @@ right: 0px; text-align: center; top: 0px; - visibility: hidden; + visibility: visible; width: 100%; z-index: 2147483647; } -.dart-debug-extension-snackbar > a { - color: #eeeeee; - font-weight: bold; - } - -.dart-debug-extension-show { - -webkit-animation: dart-debug-extension-fadein 0.5s; - animation: dart-debug-extension-fadein 0.5s; - visibility: visible; - } - @-webkit-keyframes dart-debug-extension-fadein { from { opacity: 0;