Debugging integration_test.dart from IntelliJ fails to connect to observatory.

Running the test from IntelliJ works fine. It also runs successfully from command line using both dart test/integration_test.dart as well as pub run test/integration_test.dart.

When debugging, output of stdout from WebdevFixture.create()

Observatory server failed to start after 1 tries
Observatory server failed to start after 2 tries
...
Observatory server failed to start after 11 tries
Could not start Observatory HTTP server:
SocketException: Failed to create server socket (OS Error: Address already in use, errno = 48), address = localhost, port = 57412
#0      _NativeSocket.bind (dart:io/runtime/binsocket_patch.dart:573:7)
<asynchronous suspension>
#1      _RawServerSocket.bind (dart:io/runtime/binsocket_patch.dart:1166:26)
#2      _ServerSocket.bind (dart:io/runtime/binsocket_patch.dart:1422:29)
#3      ServerSocket.bind (dart:io/runtime/binsocket_patch.dart:1413:26)
#4      _HttpServer.bind (dart:_http/http_impl.dart:2524:25)
#5      HttpServer.bind (dart:_http:364:19)
#6      Server.startup.poll (dart:vmservice_io/server.dart:352:36)
<asynchronous suspension>
#7      Server.startup (dart:vmservice_io/server.dart:364:23)
<asynchronous suspension>
#8      main (dart:vmservice_io:253:12)

We should display a message over the entire UI saying we couldn't connect and what you should do to connect.

We may want to scaffold out the page a bit more, even if the content isn't relevant to a cli app.

When we can't set a breakpoint, we should provide some lightweight feedback to the user (something less than a dialog or toast). Perhaps flashing the associated source line once or twice.

To report on things like the script locations the VM has loaded source from.

In order to make the virtual table drawing a bit smoother, we should render perhaps 1/2 - 1 full table's worth of contents before and after the visible rows.

The frames overview svg is laying out too high:

We show the scripts in use by the apps in the 'Scripts' panel in a flat list. Apps generally have between 250-800 scripts; this is too many to navigate well in the available space. We should make navigation easier here, perhaps by adding a filter text field in the title area of the Scripts panel.

The touchpad scrolling triggering navigation is annoying at least in the inspector when left and right scroll is a common action given large trees.

So, we'd run tests using both DDC and dart2js.

The assertion at https://github.com/flutter/devtools/blob/master/lib/src/service_manager.dart#L448:

  assert(_pendingServiceExtensions.isEmpty);

fired while I was using the app. I don't have repro instructions unfortunately. I don't know if this represents a logic issue, or if the assert is too aggressive.

Unless users are trying to keyboard navigate it would be nice to not display it particularly if the user just clicked on a button and didn't try to do anything explicitly toggling focus.
For example, see:
https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

When we receive an event indicating that the app stopped as a result of an exception, we should show that info in the logging view.

The memory view currently has a real first table, but the other tables are fake data.

When the application is paused at a breakpoint (or at an exception, or while stepping), we should clearly indicate this globally in the UI. Otherwise user's may interact with the app under debug and not be aware of why the UI is not responding.

Some options for indicating the paused state are a full width stripe across the top of the app, and / or a badge on the title of the 'Debugger' tab.

This makes iterating on a particular page on the devtools a bit annoying as the permalinks fail.

We should ensure that when a frame a created on the device, we see it on the timeline view.

There's currently no visual change in the logging page when we lose the device connection. We should make sure there is (put a subtle transparent overlay on the logging items?), and do something similar on the other pages as well.

We should start supporting both light and dark themes for all our UI sooner rather than later so it is less work to refactor later.
VS Code and Android Studio users tend to use a dark theme so having a dark theme will make the devtool tool feel more consistent.

When running from a built version of the app, this is how the error appears when there's no connection:

The icon for 'Track widget rebuilds' is animating. This draws the eye - we should try and find an equivalent, non-animating icon.

We should move the reload and restart buttons into the app's header area (and style them similar to other elements in that area).

For example:

Our bots take 5-6 mins to run now. We should do some investigation, to either speed them up, or shard them into more bots. It'd be nice to get the cycle time down to 2-4 minutes.

Splitter locations should persist between session; perhaps just by writing their values on changes to Window.localStorage?

This would enable supporting hot restart and hot reload robustly from the devtools app.

This feature request is similar in spirit to
#70

We depend on IntersectionObserver which is not available in Safari stable.
In general our UI is only tested on Chrome so even for FireFox it is probably safer to remind users that they should probably be opening the page in Chrome.

If I uncomment the code to call _loadHeapSnapshot and run it, it seems like we don't process ever other frame of data from the stream (and therefore never complete). Testing with iOS Simulator, flutter_gallery (last pulled yesterday):

As far as I can tell, this shows all 6 packages coming over the WS, but we only fired events for 3 of them.

As a follow up to #147, we should handle showing lists and maps with a large number of elements. These generally need to be broken down into showing sublists ([0..99], [100..199],...).

The PR (#93) to deflake the integration tests introduced several delays, not all of which are likely necessary. We should remove the ones we find aren't necessary - this will recapture 1-2 seconds of test execution time per test.

There are cases such as displaying doc comments, autocompleting expressions, and getting types where having access to the analyzer service is needed.

TBD: the most robust way to wire up the analyzer to the web app. IDEs such as VSCode already have an analyzer service running but command line users do not.

Our flutter test bot takes ~6 mins to run. We should in investigate downloading one of the pre-built flutter sdk zip files to see if that's a faster way to provision the flutter sdk.

This happens when I launch the tools (so possibly the inspector view?). It only happens in the pre-built version, not if I run webdev serve (so maybe caused by a difference between DDC/dart2js?).

[{"event":"app.inited"}]
main.dart.js:1358 Uncaught Error: NoSuchMethodError: method not found: 'call'
Receiver: Closure 'minified:D5'
Arguments: ["width", 35, 6, null]
    at Object.k (main.dart.js:1358)
    at D5.dart.h.it (main.dart.js:5849)
    at Object.J.p9 (main.dart.js:18364)
    at Object.lG (main.dart.js:1321)
    at Object.wz (main.dart.js:1332)
    at Object.wB (main.dart.js:1327)
    at Object.l6 (main.dart.js:5173)
    at dart.BP (main.dart.js:7611)
    at main.dart.js:7606
    at w (split.min.js:2)

When the web page resizes - get taller - we show blank rows for the table until a scroll event:

When the logging page is not active, and we receive framework error messages, we should badge the 'Logging' page with the number of framework error messages received. This will indicate to the user that there are messages in the logging view that they may want to see. When the logging view next becomes active, the badge count on that page can be cleared out.

If you click in the logging table and press and hold up or down, the selected row quickly disappears off the screen and the scrolling doesn't keep up with it. When you let go, it quickly slides to the correct position.

This may be a similar problem to that described here:

However that fix applies only to adding new rows, whereas this is just scrolling the existing rows by moving the selection.

These would be useful for components (CoreElements) that need to do cleanup when they're removed from the DOM (like remove global listeners).

Match functionality of intellij inspector. Write code so it is straightforward to port to Hummingbird.

(Not sure if it matters, but I found this when running from a pre-build JS version)

When I click the Debugger tab then try to add a breakpoint on a blank line, I get a JS error (I'm not sure if this tab is supposed to be hidden right now though?).

dart_sdk.js:4858 Uncaught vm_service_lib.RPCError.new {Symbol(RPCError.callingMethod): "addBreakpoint", Symbol(RPCError.code): 102, Symbol(RPCError.message): "Cannot add breakpoint", Symbol(RPCError.data): c…t._…p.new, Symbol(_error): Error
    at Object.dart.throw (http://localhost:8765/packages/$sdk/dev_compiler/amd/dart_sdk.js:485…}Symbol(RPCError.callingMethod): "addBreakpoint"Symbol(RPCError.code): 102Symbol(RPCError.data): convert._JsonMap.new {Symbol(_processed): {…}, Symbol(_data): null, Symbol(_original): {…}}Symbol(RPCError.message): "Cannot add breakpoint"Symbol(_error): Error
    at Object.dart.throw (http://localhost:8765/packages/$sdk/dev_compiler/amd/dart_sdk.js:4857:29)
    at async._AsyncCallbackEntry.new.async._schedulePriorityAsyncCallback.dart.fn [as callback] (http://localhost:8765/packages/$sdk/dev_compiler/amd/dart_sdk.js:27736:41)
    at Object.async._microtaskLoop (http://localhost:8765/packages/$sdk/dev_compiler/amd/dart_sdk.js:24434:13)
    at async._startMicrotaskLoop (http://localhost:8765/packages/$sdk/dev_compiler/amd/dart_sdk.js:24440:13)
    at MutationObserver.internalCallback (http://localhost:8765/packages/$sdk/dev_compiler/amd/dart_sdk.js:24510:11)callingMethod: (...)code: (...)data: (...)details: (...)hashCode: (...)message: (...)runtimeType: (...)Symbol(dartx.hashCode): (...)Symbol(dartx.runtimeType): (...)__proto__: Object
dart.throw @ dart_sdk.js:4858
async._schedulePriorityAsyncCallback.dart.fn @ dart_sdk.js:27736
async._microtaskLoop @ dart_sdk.js:24434
async._startMicrotaskLoop @ dart_sdk.js:24440
internalCallback @ dart_sdk.js:24510
childList (async)
dart.fn.callback @ dart_sdk.js:24520
_scheduleImmediate @ dart_sdk.js:24496
async._scheduleAsyncCallback @ dart_sdk.js:24454
async._rootScheduleMicrotask @ dart_sdk.js:27793
async.scheduleMicrotask @ dart_sdk.js:24484
schedule @ dart_sdk.js:25408
[_addPending] @ dart_sdk.js:22411
[_sendData] @ dart_sdk.js:25144
[_add] @ dart_sdk.js:24935
add @ dart_sdk.js:24903
stream.listen.dart.fn.e @ service.dart:65
dart._checkAndCall @ dart_sdk.js:4668
dart.dcall @ dart_sdk.js:4673
(anonymous function).html$._wrapZone.dart.fn.e @ dart_sdk.js:96928

What I'm doing here might not be very supported, but since the behaviour seemed strange I thought it was worth raising.

When VS Code has a Flutter project open it always uses the Dart SDK from the Flutter SDK. This means if we want to pub run build_runner watch this (I know we probably want webdev, but this was already here so I tried it) it'll use Flutter's version. I noticed a weird discrepancy when running pub run build_runner serve web using this version of pub versus Dart v2.1 (the Dart one works, the Flutter one does not).

I don't know if this is an expected difference because it's in Flutter, or if something changed/broke between v2.1 and vMaster of Dart.

Dart v2.1

dantup-macbookpro:devtools dantup$ which pub
/Users/dantup/Dev/dart-sdk/v2.1/bin/pub

dantup-macbookpro:devtools dantup$ pub run build_runner serve web
[INFO] Generating build script completed, took 293ms
[INFO] Setting up file watchers completed, took 17ms
[INFO] Waiting for all file watchers to be ready completed, took 203ms
[INFO] Reading cached asset graph completed, took 383ms
[INFO] Checking for updates since last build completed, took 573ms
[INFO] Running build completed, took 15.8s
[INFO] Caching finalized dependency graph completed, took 170ms
[INFO] Succeeded after 16.0s with 217 outputs (151 actions)
Serving `web` on http://localhost:8080

Flutter (master)

dantup-macbookpro:devtools dantup$ /Users/dantup/Dev/Google/flutter/bin/cache/dart-sdk/bin/pub run build_runner serve web
[INFO] Generating build script completed, took 366ms
[INFO] Setting up file watchers completed, took 21ms
[INFO] Waiting for all file watchers to be ready completed, took 204ms
[WARNING] Throwing away cached asset graph due to Dart SDK update.
[INFO] Cleaning up outputs from previous builds. completed, took 229ms
[INFO] Reading cached asset graph completed, took 576ms
[INFO] Building new asset graph completed, took 1.2s
[INFO] Checking for unexpected pre-existing outputs. completed, took 1ms
[WARNING] build_modules|dartdevc on lib/.dartdevc.meta_module.raw:
Unable to read module information for package:flutter, make sure you have a dependency on it in your pubspec.
[SEVERE] build_web_compilers|ddc on package:vm_service_lib/vm_service_lib.dartdevc.module:

ProcessException: No such file or directory
  Command: /Users/dantup/Dev/Google/flutter/bin/cache/dart-sdk/bin/dartdevc --persistent_worker
[SEVERE] build_web_compilers|ddc on package:meta/meta.dartdevc.module:

ProcessException: No such file or directory
  Command: /Users/dantup/Dev/Google/flutter/bin/cache/dart-sdk/bin/dartdevc --persistent_worker
[SEVERE] build_web_compilers|ddc on package:intl/number_symbols.dartdevc.module:

ProcessException: No such file or directory
  Command: /Users/dantup/Dev/Google/flutter/bin/cache/dart-sdk/bin/dartdevc --persistent_worker
[SEVERE] build_web_compilers|ddc on package:intl/date_symbols.dartdevc.module:

ProcessException: No such file or directory
  Command: /Users/dantup/Dev/Google/flutter/bin/cache/dart-sdk/bin/dartdevc --persistent_worker
[WARNING] build_web_compilers|entrypoint on web/main.dart:
Unable to read intl|lib/date_symbols.ddc.js, check your console or the `.dart_tool/build/generated/intl/lib/date_symbols.ddc.js.errors` log file.
[WARNING] build_web_compilers|entrypoint on web/main.dart:
Unable to read vm_service_lib|lib/vm_service_lib.ddc.js, check your console or the `.dart_tool/build/generated/vm_service_lib/lib/vm_service_lib.ddc.js.errors` log file.
[WARNING] build_web_compilers|entrypoint on web/main.dart:
Unable to read intl|lib/number_symbols.ddc.js, check your console or the `.dart_tool/build/generated/intl/lib/number_symbols.ddc.js.errors` log file.
[WARNING] build_web_compilers|entrypoint on web/main.dart:
Unable to read meta|lib/meta.ddc.js, check your console or the `.dart_tool/build/generated/meta/lib/meta.ddc.js.errors` log file.
[WARNING] No actions completed for 15.1s, waiting on:
  - build_web_compilers|ddc on package:path/path.dartdevc.module
  - build_web_compilers|ddc on package:intl/number_symbols_data.dartdevc.module
  - build_web_compilers|ddc on package:intl/src/plural_rules.dartdevc.module
  - build_web_compilers|ddc on package:intl/intl.dartdevc.module
  - build_web_compilers|ddc on package:collection/src/utils.dartdevc.module
  .. and 12 more

[WARNING] No actions completed for 15.1s, waiting on:
  - build_web_compilers|ddc on package:path/path.dartdevc.module
  - build_web_compilers|ddc on package:intl/number_symbols_data.dartdevc.module
  - build_web_compilers|ddc on package:intl/src/plural_rules.dartdevc.module
  - build_web_compilers|ddc on package:intl/intl.dartdevc.module
  - build_web_compilers|ddc on package:collection/src/utils.dartdevc.module
  .. and 12 more

@devoncarew @jacob314

I'm not I totally understand the relationship between the top graph and the list of frames here, but when my app is rendering frames the very last box here (1.7ms / 16.6ms) never moves - all the others scroll to the left but it seems like one (the first frame?) is stuck to the end of the list.

If you scroll in the logging table, switch to a different page, and switch back to the logging page, the scroll position is reset to the top of the table.

We'll want to retain the scrolling position as if the user hadn't switched away from the page. That's either the current scroll position, or the bottom of the table if any logging output had been received when it was off screen.

@devoncarew It feels a bit weird (frustrating, even) that we can't click frames in the live chart, and it seems like there's a lot of overlap with the frames shown underneath.

Could we make these clickable, or even maybe combine the two? For ex. we could split the bars in the live chart into two colours (for GPU/Dart) and add a tooltip with the numbers and show the selection in the live chart.

Keyboard navigation to move left/right would be neat too :-)

(I don't know how easy it'll be to figure out the frame under the mouse from the coordinate clicks given it's canvas, but if we think this'd be a good change I'm happy to have a go).

It looks like the tests introduced w/ the debugger PR are flaky on the bots:

https://travis-ci.org/flutter/devtools/jobs/474983704

We should investigate the timing issues and ensure the tests are reliable.