Layout explorer is not dense enough for IDE

[kenzieschmoll]

This view is difficult to use when embedded in the IDE. This should be modified so that the UI is far more dense. Arbitrarily, this view should work well in when it is ~2-3" wide and tall.

This should be part of the work for inspector V2 to provide a great embedded IDE experience.

[elliette]

Keeping track of https://github.com/flutter/devtools/pull/8161#issuecomment-2274140091 here

[elliette]

Some notes here:

Currently, for the following code snippet:

Padding(
        padding: EdgeInsetsDirectional.only(start: appBarPadding),
        child: IconButton(
          key: const ValueKey('Back'),
          icon: const BackButtonIcon(),
          tooltip: MaterialLocalizations.of(context).backButtonTooltip,
          onPressed: () {
            Navigator.maybePop(context);
          },
        ),
      )

Which corresponds to this portion of the Widget Tree:

In the layout explorer, we show the following:

For the IconButton:

For the Padding:

IMO, I don't think the layout we are showing for padding is very useful. I don't particularly care about seeing the ConstrainedBox, particularly because it is the exact same size as my padding (although the layout explorer is a bit misleading in this regard). What I'm really interested is not its parent widget, but its child widget (the IconButton). I would rather see the same view for both of them.

Something like:

[elliette]

Note: it's unnecessary to show the width / height twice: