Debugger file picker

[DaveShuckerow]

Branch based on #1649

Introduce a picker with search functionality for files.

[kenzieschmoll]

DBC: can you put a border and padding around the two sections to break up the view? It is a bit difficult to visually parse the UI and the two sections are too close to the splitter grippy.

Example of what we do for the flame chart:

    Padding(
      padding: const EdgeInsets.only(bottom: 8.0),
      child: Container(
        key: TimelineScreen.flameChartSectionKey,
        decoration: BoxDecoration(
          border: Border.all(color: Theme.of(context).focusColor),
        ),
        child: content,
      ),
    );

[jacob314]

Added @terrylucas as a reviewer as he wrote the equivalent dart:html code.

[jacob314]

@grouma your concerns about slow file pickers when a project has 1000s of files are about to be solved.... :)

[jacob314]

nit: if you have Padding + Align why not use Container
@pq this is an example where I think we could have a nice quick fix to convert this code to a Container if we thought that was the cleaner way to write this.

[pq]

Interesting!

If we can generalize this at all, it would be nice to add some layout related refactorings to server.

/fyi @bwilkerson.

[DaveShuckerow]

That's a reasonable refactoring to apply here.

I don't think it's a particularly high-value lint or quick fix. It's not a very common problem, and there can be cases where the transformation between Padding(child: Align)) to Container() is not possible.

[jacob314]

nit: consider removing this trailing comma.

[jacob314]

this logic should be extended to match what was in html_scripts_view.
specifically, use getShortScriptName or equivalent before calling contains.

[DaveShuckerow]

I've left a TODO to do this. Currently debugger_state is not importable in flutter code.

[jacob314]

sg

[jacob314]

this seems a bit different than what html_scripts_view.dart is currently showing. Can you make it consistent or add a TODO to make it consistent with a followup cl?
Specifically: matching text should be in bold and we should be showing the entire uri.
What we have currently in the html app isn't perfect so it could also be reasonable to iterate with UXR to figure out what we really want to show here.

[DaveShuckerow]

I came to this design from meeting with internal users last week. They explained that one of the problems with the existing debugger page is that they can't see the names of files in the list because there is too much boilerplate in the long g3 package paths. To remedy this, I've adopted the form:

foo.dart (package:my_long_package_name/lib/src/long/path/to/foo.dart)

[jacob314]

I had also hoped users would want to use package: for this but that isn't what our users say overall.
we did a user survey on this last summer and 38% of users want to see package: and 39% of users prefer package: while 56% percent prefer file paths relative to their app route.
in bazel projects the package: urls are particularly bad and counterintuitive. Rather than
package:my_long_package_name/lib/src/long/path/to/foo.dart
you get
package:my_long_package_name.src.long.path.to/foo.dart

[jacob314]

maybe just add a TODO resolve this. For example, you could wrap each file its own scrollable so the filename was always visible and the start of the path was truncated. Would be good to get UXR involved on this as there are some tradeoffs and there is a lot of plcaes in the tool where we would like to do a better job of displaying file names.

[DaveShuckerow]

DBC: can you put a border and padding around the two sections to break up the view? It is a bit difficult to visually parse the UI and the two sections are too close to the splitter grippy.

Example of what we do for the flame chart:

    Padding(
      padding: const EdgeInsets.only(bottom: 8.0),
      child: Container(
        key: TimelineScreen.flameChartSectionKey,
        decoration: BoxDecoration(
          border: Border.all(color: Theme.of(context).focusColor),
        ),
        child: content,
      ),
    );

Good idea; added this as a common widget.

[jacob314]