Skip to content

Commit 066f393

Browse files
ellietteelliette
authored
Detect Flutter Web apps and embed inspector page for them (#1539)
1 parent 3778a9a commit 066f393

File tree

7 files changed

+78
-18
lines changed

7 files changed

+78
-18
lines changed

‎dwds/debug_extension/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## 1.27
2+
3+
- Support embedded debugger and inspector in Chrome DevTools for Flutter Web apps.
4+
15
## 1.26
26

37
- Support embedded debugging experience in environments with no Dart app ID.

‎dwds/debug_extension/pubspec.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
name: extension
22
publish_to: none
3-
version: 1.26.0
3+
version: 1.27.0
44
author: Dart Team <misc@dartlang.org>
55
homepage: https://github.com/dart-lang/webdev
66
description: >-

‎dwds/debug_extension/web/panel.html‎ renamed to ‎dwds/debug_extension/web/debugger_panel.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<link rel="stylesheet" href="panel.css">
66
</head>
77

8-
<body>
8+
<body id="panelBody" data-panel="debugger">
99

1010
<div class='flex-row'>
1111
<div class='flex-column'>

‎dwds/debug_extension/web/devtools.js‎

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,63 @@
11
(function loadDevToolsScript() {
22
const DDR_DART_APP_ATTRIBUTE = 'data-ddr-dart-app';
3-
let created = false;
4-
let checkCount = 0;
53

6-
chrome.devtools.network.onNavigated.addListener(createPanelIfDartApp)
7-
const checkDartAppInterval = setInterval(createPanelIfDartApp, 1000)
8-
createPanelIfDartApp()
4+
let debuggerCreated = false;
5+
let inspectorCreated = false;
6+
let checkDartCount = 0;
7+
let checkFlutterCount = 0;
98

10-
function createPanelIfDartApp() {
11-
if (created || checkCount++ > 20) {
9+
chrome.devtools.network.onNavigated.addListener(createDebuggerPanelIfDartApp)
10+
const checkDartAppInterval = setInterval(createDebuggerPanelIfDartApp, 1000)
11+
createDebuggerPanelIfDartApp()
12+
13+
function createDebuggerPanelIfDartApp() {
14+
if (debuggerCreated || checkDartCount++ > 20) {
1215
clearInterval(checkDartAppInterval);
1316
return;
1417
}
1518

19+
checkIsDartApp();
20+
}
21+
22+
function checkIsDartApp() {
1623
// TODO(elliette): Remove the DDR data attribute check when we are ready to launch externally,
1724
// and instead replace it with the following: !!window.$dartAppId
1825
// Note: we must remove the useContentScriptContext option as well.
1926
chrome.devtools.inspectedWindow.eval(
2027
`document.documentElement.hasAttribute("${DDR_DART_APP_ATTRIBUTE}")`,
21-
{useContentScriptContext: true},
28+
{ useContentScriptContext: true },
2229
function (isDartApp) {
23-
if (isDartApp) {
24-
created = true
25-
chrome.devtools.panels.create(
26-
'Dart Debugger', '', 'panel.html'
30+
if (!isDartApp) return;
31+
32+
chrome.devtools.panels.create(
33+
'Dart Debugger', '', 'debugger_panel.html'
2734
);
35+
debuggerCreated = true;
36+
createInspectorPanelIfFlutterApp();
37+
});
38+
}
39+
40+
function createInspectorPanelIfFlutterApp() {
41+
const checkFlutterAppInterval = setInterval(function () {
42+
if (inspectorCreated|| checkFlutterCount++ > 10) {
43+
clearInterval(checkFlutterAppInterval);
44+
return;
45+
}
46+
47+
// The following value is loaded asynchronously, which is why
48+
// we check for it every 1 second:
49+
chrome.devtools.inspectedWindow.eval(
50+
'!!window._flutter_web_set_location_strategy',
51+
function (isFlutterWeb) {
52+
if (isFlutterWeb) {
53+
chrome.devtools.panels.create(
54+
'Flutter Inspector', '', 'inspector_panel.html'
55+
);
56+
inspectorCreated = true;
57+
}
2858
}
29-
},
30-
)
59+
);
60+
}, 1000)
3161
}
3262
}());
3363

‎dwds/debug_extension/web/inspector_panel.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<link rel="stylesheet" href="panel.css">
6+
</head>
7+
8+
<body id="panelBody" data-panel="inspector">
9+
10+
<div class='flex-row'>
11+
<div class='flex-column'>
12+
<button class="material-button" id="debuggingButton" type="button" disabled>Inspect app</button>
13+
</div>
14+
<div id="iframeContainer"></div>
15+
</div>
16+
17+
<!-- Load script: -->
18+
<script src="panel.js"></script>
19+
</body>
20+
21+
</html>

‎dwds/debug_extension/web/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "Dart Debug Extension",
3-
"version": "1.26",
3+
"version": "1.27",
44
"minimum_chrome_version": "10.0",
55
"devtools_page": "devtools.html",
66
"manifest_version": 2,

‎dwds/debug_extension/web/panel.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,16 @@
1010
const PANEL_SCRIPT = 'panel-script';
1111
const START_DEBUGGING = 'start-debugging';
1212
const DEVTOOLS_OPEN = 'devtools-open';
13+
const PANEL_BODY = 'panelBody';
14+
const PANEL_ATTRIBUTE = 'data-panel';
1315

1416
const chromeTheme = chrome.devtools.panels.themeName;
1517
const backgroundColor = chromeTheme == CHROME_DARK ? DARK_COLOR : LIGHT_COLOR;
1618
const fontColor = chromeTheme == CHROME_DARK ? LIGHT_COLOR : DARK_COLOR;
1719

1820
let appId = null;
1921
let currentDevToolsUrl = '';
22+
let panel = '';
2023

2124
// Helper functions:
2225
function sendStartDebuggingRequest() {
@@ -26,6 +29,7 @@
2629
}
2730

2831
window.onload = function () {
32+
panel = document.getElementById(PANEL_BODY).getAttribute(PANEL_ATTRIBUTE)
2933
document.getElementById(DEBUGGING_BUTTON).addEventListener('click', sendStartDebuggingRequest);
3034
// Set the background and text color of the panel to match the Chrome theme:
3135
document.body.style.backgroundColor = `#${backgroundColor}`;
@@ -51,7 +55,8 @@
5155
} else {
5256
// Debugger has benn connected, add an IFRAME for Dart DevTools:
5357
const iframe = document.createElement(IFRAME_TAG);
54-
const src = `${devToolsUrl}&embed=true&page=debugger&backgroundColor=${backgroundColor}`;
58+
if (panel == '') return;
59+
const src = `${devToolsUrl}&embed=true&page=${panel}&backgroundColor=${backgroundColor}`;
5560
iframe.setAttribute('src', src);
5661
iframe.setAttribute('scrolling', 'no');
5762
iframe.id = IFRAME_ID;

0 commit comments

Comments
 (0)