Skip to content

On-device Widget Inspector button exits widget selection - #158219

Merged
elliette merged 16 commits into
flutter:masterfrom
elliette:widget-selection
Nov 21, 2024
Merged

elliette merged 16 commits into
flutter:masterfrom
elliette:widget-selection

Conversation

@elliette

@elliette elliette commented Nov 5, 2024 •

Copy link
Copy Markdown
Member

Fixes flutter/devtools#8155

Previously after enabling Widget Selection mode from DevTools and selecting a widget to inspect, a user would then have to click the on-device "Select widget" button before being able to select another widget. This was very confusing to users; we got multiple comments on our latest DevTools Survey that widget selection mode only worked the first time and was broken on subsequent selections.

Now, once "Select widget mode" is enabled from DevTools, any subsequent click is treated as a selection until the user exits from select widget mode either via DevTools or via the Exit Selection mode button.

The user can re-position the Exit Selection button to either the left or the right of their device (this way they can select a widget beneath it).

exit_select_mode_button

Note: Previously this button was behind any widget selection overlays. This PR also updates the order of the Stack so that exit selection button is on top.

@github-actions github-actions Bot added framework flutter/packages/flutter repository. See also f: labels. p: material_ui material_ui package in flutter/packages p: cupertino_ui cupertino_ui package in flutter/packages labels Nov 5, 2024
@kenzieschmoll

Copy link
Copy Markdown
Member

Edge case: what if the widget a user wants to select is under the button?

this.debugShowWidgetInspector = false,
this.debugShowCheckedModeBanner = true,
this.inspectorSelectButtonBuilder,
this.exitWidgetSelectionButtonBuilder,

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is a breaking change, so we'll need to follow the flutter breaking change policy for this

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pinged on Flutter discord to get guidance on the process for this

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems this isn't considered a breaking change: https://discord.com/channels/608014603317936148/608018585025118217/1306392838224875621

But we should probably announce it after it has landed

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This broke https://pub.dev/packages/wiredash. Even if it is not considered a breaking change by the flutter policy, it still breaks user code.
Adding a deprecation next time would have been appreciated

Comment thread packages/flutter/lib/src/widgets/widget_inspector.dart Outdated
Comment thread packages/flutter/test/widgets/widget_inspector_test.dart Outdated
Comment thread packages/flutter/test/widgets/widget_inspector_test.dart Outdated
@elliette

elliette commented Nov 13, 2024 •

Copy link
Copy Markdown
Member Author

Edge case: what if the widget a user wants to select is under the button?

Good point, modified the PR to add a button next to the "exit selection mode" button that will let the user move the controls from the left to the right of their device (see gif in PR description).

@Piinks
Piinks requested a review from kenzieschmoll November 19, 2024 19:13
Comment thread packages/flutter/lib/src/material/app.dart Outdated
Comment thread packages/flutter/lib/src/material/app.dart Outdated
Comment thread packages/flutter/lib/src/widgets/widget_inspector.dart Outdated
Comment thread packages/flutter/lib/src/widgets/widget_inspector.dart Outdated
Comment thread packages/flutter/lib/src/widgets/widget_inspector.dart
Comment thread packages/flutter/lib/src/widgets/widget_inspector.dart
child: WidgetInspector(
key: inspectorKey,
exitWidgetSelectionButtonBuilder: exitWidgetSelectionButtonBuilder,
moveExitWidgetSelectionButtonBuilder: null,

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we add a test case for moving the button left and right using the arrow button?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, added!

@elliette

elliette commented Nov 20, 2024 •

Copy link
Copy Markdown
Member Author

FYI I tweaked the colors of the buttons so they would be visible against both dark/light backgrounds.

Material (dark and light)
Screenshot 2024-11-20 at 1 54 43 PM

Screenshot 2024-11-20 at 1 54 25 PM

Cupertino (dark and light)
Screenshot 2024-11-20 at 2 09 29 PM
Screenshot 2024-11-20 at 2 07 43 PM

@elliette
elliette added this pull request to the merge queue Nov 21, 2024
Merged via the queue into flutter:master with commit a051be8 Nov 21, 2024
@elliette
elliette deleted the widget-selection branch November 21, 2024 17:13
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 21, 2024
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 21, 2024
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 21, 2024
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 21, 2024
auto-submit Bot pushed a commit to flutter/packages that referenced this pull request Nov 21, 2024
Roll Flutter from 8536b96 to 93d772c (37 revisions)

flutter/flutter@8536b96...93d772c

2024-11-21 [email protected] Added additional logging to `_listCoreDevices` (flutter/flutter#159275)
2024-11-21 [email protected] Roll Flutter Engine from 78b87f3fe023 to d1a08064e193 (1 revision) (flutter/flutter#159280)
2024-11-21 [email protected] Shut down DevTools and DDS processes if flutter_tools is killed by a signal (flutter/flutter#159238)
2024-11-21 [email protected] Remove `RepaintBoundary` that is no longer needed. (flutter/flutter#159232)
2024-11-21 [email protected] Try a speculative fix for Gradle OOMs. (flutter/flutter#159234)
2024-11-21 [email protected] On-device Widget Inspector button exits widget selection (flutter/flutter#158219)
2024-11-21 [email protected] Roll Flutter Engine from 523d381893c8 to 78b87f3fe023 (2 revisions) (flutter/flutter#159270)
2024-11-21 [email protected] Remove `firebase_abstract_method_smoke_test` (flutter/flutter#159145)
2024-11-21 [email protected] Roll Packages from e95f6d8 to 913b99e (7 revisions) (flutter/flutter#159268)
2024-11-21 [email protected] Roll Flutter Engine from 69c325513a65 to 523d381893c8 (3 revisions) (flutter/flutter#159263)
2024-11-21 [email protected] [flutter_tools] opt iOS/macOS apps out of Metal API validation via migrator, update templates in repo. (flutter/flutter#159228)
2024-11-21 [email protected] Scribe Android handwriting text input (flutter/flutter#148784)
2024-11-21 [email protected] Terminate non-detached test devices on `flutter run` completion (flutter/flutter#159170)
2024-11-21 [email protected] Un-skip tests that use `flutter build apk`. (flutter/flutter#159231)
2024-11-20 [email protected] Roll Flutter Engine from 2d32cf3a7971 to 69c325513a65 (1 revision) (flutter/flutter#159229)
2024-11-20 [email protected] Roll Flutter Engine from 3828681d1f86 to 2d32cf3a7971 (3 revisions) (flutter/flutter#159226)
2024-11-20 [email protected] Roll Flutter Engine from 3245c8976976 to 3828681d1f86 (1 revision) (flutter/flutter#159217)
2024-11-20 [email protected] Add `--dry-run` to `dev/bots/test.dart`. (flutter/flutter#158956)
2024-11-20 [email protected] Add docs for setting up Android Studio to auto format Kotlin code (flutter/flutter#159209)
2024-11-20 [email protected] Roll Flutter Engine from 80d77505fdde to 3245c8976976 (1 revision) (flutter/flutter#159214)
2024-11-20 [email protected] Fix: The enableFeedback property of InkWell cannot be set to a nullabâ�¦ (flutter/flutter#158907)
2024-11-20 [email protected] Roll Flutter Engine from 3f19207e820e to 80d77505fdde (1 revision) (flutter/flutter#159210)
2024-11-20 [email protected] Roll Packages from fc4adc7 to e95f6d8 (6 revisions) (flutter/flutter#159201)
2024-11-20 [email protected] Remove dependency on [Target] and instead operate on [Architecture] (flutter/flutter#159196)
2024-11-20 [email protected] Fix git command in Quality-Assurance.md (flutter/flutter#155146)
2024-11-20 [email protected] Roll Flutter Engine from 7eb87547cbc6 to 3f19207e820e (4 revisions) (flutter/flutter#159176)
2024-11-20 [email protected] Make `runner` non-nullable as it always is. (flutter/flutter#159156)
2024-11-19 [email protected] Update Material 3 `CircularProgressIndicator` for new visual style (flutter/flutter#158104)
2024-11-19 [email protected] Roll Flutter Engine from 4ff696b555dc to 7eb87547cbc6 (3 revisions) (flutter/flutter#159168)
2024-11-19 [email protected] Add platform-android label for all flutter_tools *android* files (flutter/flutter#159166)
2024-11-19 [email protected] Roll Flutter Engine from d5820a638885 to 4ff696b555dc (1 revision) (flutter/flutter#159164)
2024-11-19 [email protected] Reland Add UI Benchmarks (flutter/flutter#153368)
2024-11-19 [email protected] fix lint usage of `task` inside `resolve_dependecies.gradle` file (flutter/flutter#158022)
2024-11-19 [email protected] Roll Flutter Engine from cff1e751f853 to d5820a638885 (5 revisions) (flutter/flutter#159155)
2024-11-19 [email protected] Removing redundant backticks in `flutter\packages\flutter_tools\gradle\gradle.kts` (flutter/flutter#159051)
2024-11-19 [email protected] Fixes initial validation with AutovalidateMode.always on first build (flutter/flutter#156708)
2024-11-19 [email protected] Introduce new Material 3 `Slider` shapes (flutter/flutter#152237)

If this roll has caused a breakage, revert this CL and stop the roller
using the controls here:
https://autoroll.skia.org/r/flutter-packages
Please CC [email protected],[email protected] on the revert to ensure that a human
is aware of the problem.

To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose

...
@reidbaker reidbaker mentioned this pull request Dec 13, 2024
9 of 11 tasks
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 12, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 13, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 13, 2025
laynor added a commit to pokepay/vrouter that referenced this pull request Feb 20, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 6, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 7, 2025
@anujgill

anujgill commented Apr 8, 2025

Copy link
Copy Markdown

Issue: The inspector no longer works with dialogs or pop-ups in the latest update. Enabling the inspector causes the page to refresh, closing the dialog. After the inspector is disabled, each click is treated as a selection, preventing the dialog from reopening until the inspector is turned off.

@kenzieschmoll

Copy link
Copy Markdown
Member

@anujgill can you please provide the output of flutter --version?
CC @elliette this sounds like this may be an issue where turning on select widget mode triggers a hot reload or a change in state?

@elliette

elliette commented Apr 8, 2025

Copy link
Copy Markdown
Member Author

@anujgill can you please provide the output of flutter --version?

Hi @anujgill! Please file an issue for this, with the output of flutter --version and what device you are running. I am not able to reproduce this behavior myself, so without an issue filed with instructions this will be difficult to fix. Thanks!

creatorpiyush pushed a commit to creatorpiyush/packages that referenced this pull request Jun 10, 2026
Roll Flutter from 8536b96 to 93d772c (37 revisions)

flutter/flutter@8536b96...93d772c

2024-11-21 [email protected] Added additional logging to `_listCoreDevices` (flutter/flutter#159275)
2024-11-21 [email protected] Roll Flutter Engine from 78b87f3fe023 to d1a08064e193 (1 revision) (flutter/flutter#159280)
2024-11-21 [email protected] Shut down DevTools and DDS processes if flutter_tools is killed by a signal (flutter/flutter#159238)
2024-11-21 [email protected] Remove `RepaintBoundary` that is no longer needed. (flutter/flutter#159232)
2024-11-21 [email protected] Try a speculative fix for Gradle OOMs. (flutter/flutter#159234)
2024-11-21 [email protected] On-device Widget Inspector button exits widget selection (flutter/flutter#158219)
2024-11-21 [email protected] Roll Flutter Engine from 523d381893c8 to 78b87f3fe023 (2 revisions) (flutter/flutter#159270)
2024-11-21 [email protected] Remove `firebase_abstract_method_smoke_test` (flutter/flutter#159145)
2024-11-21 [email protected] Roll Packages from e95f6d8 to 913b99e (7 revisions) (flutter/flutter#159268)
2024-11-21 [email protected] Roll Flutter Engine from 69c325513a65 to 523d381893c8 (3 revisions) (flutter/flutter#159263)
2024-11-21 [email protected] [flutter_tools] opt iOS/macOS apps out of Metal API validation via migrator, update templates in repo. (flutter/flutter#159228)
2024-11-21 [email protected] Scribe Android handwriting text input (flutter/flutter#148784)
2024-11-21 [email protected] Terminate non-detached test devices on `flutter run` completion (flutter/flutter#159170)
2024-11-21 [email protected] Un-skip tests that use `flutter build apk`. (flutter/flutter#159231)
2024-11-20 [email protected] Roll Flutter Engine from 2d32cf3a7971 to 69c325513a65 (1 revision) (flutter/flutter#159229)
2024-11-20 [email protected] Roll Flutter Engine from 3828681d1f86 to 2d32cf3a7971 (3 revisions) (flutter/flutter#159226)
2024-11-20 [email protected] Roll Flutter Engine from 3245c8976976 to 3828681d1f86 (1 revision) (flutter/flutter#159217)
2024-11-20 [email protected] Add `--dry-run` to `dev/bots/test.dart`. (flutter/flutter#158956)
2024-11-20 [email protected] Add docs for setting up Android Studio to auto format Kotlin code (flutter/flutter#159209)
2024-11-20 [email protected] Roll Flutter Engine from 80d77505fdde to 3245c8976976 (1 revision) (flutter/flutter#159214)
2024-11-20 [email protected] Fix: The enableFeedback property of InkWell cannot be set to a nullabâ�¦ (flutter/flutter#158907)
2024-11-20 [email protected] Roll Flutter Engine from 3f19207e820e to 80d77505fdde (1 revision) (flutter/flutter#159210)
2024-11-20 [email protected] Roll Packages from fc4adc7 to e95f6d8 (6 revisions) (flutter/flutter#159201)
2024-11-20 [email protected] Remove dependency on [Target] and instead operate on [Architecture] (flutter/flutter#159196)
2024-11-20 [email protected] Fix git command in Quality-Assurance.md (flutter/flutter#155146)
2024-11-20 [email protected] Roll Flutter Engine from 7eb87547cbc6 to 3f19207e820e (4 revisions) (flutter/flutter#159176)
2024-11-20 [email protected] Make `runner` non-nullable as it always is. (flutter/flutter#159156)
2024-11-19 [email protected] Update Material 3 `CircularProgressIndicator` for new visual style (flutter/flutter#158104)
2024-11-19 [email protected] Roll Flutter Engine from 4ff696b555dc to 7eb87547cbc6 (3 revisions) (flutter/flutter#159168)
2024-11-19 [email protected] Add platform-android label for all flutter_tools *android* files (flutter/flutter#159166)
2024-11-19 [email protected] Roll Flutter Engine from d5820a638885 to 4ff696b555dc (1 revision) (flutter/flutter#159164)
2024-11-19 [email protected] Reland Add UI Benchmarks (flutter/flutter#153368)
2024-11-19 [email protected] fix lint usage of `task` inside `resolve_dependecies.gradle` file (flutter/flutter#158022)
2024-11-19 [email protected] Roll Flutter Engine from cff1e751f853 to d5820a638885 (5 revisions) (flutter/flutter#159155)
2024-11-19 [email protected] Removing redundant backticks in `flutter\packages\flutter_tools\gradle\gradle.kts` (flutter/flutter#159051)
2024-11-19 [email protected] Fixes initial validation with AutovalidateMode.always on first build (flutter/flutter#156708)
2024-11-19 [email protected] Introduce new Material 3 `Slider` shapes (flutter/flutter#152237)

If this roll has caused a breakage, revert this CL and stop the roller
using the controls here:
https://autoroll.skia.org/r/flutter-packages
Please CC [email protected],[email protected] on the revert to ensure that a human
is aware of the problem.

To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose

...
bisor0627 pushed a commit to bisor0627/packages that referenced this pull request Jun 19, 2026
Roll Flutter from 8536b96 to 93d772c (37 revisions)

flutter/flutter@8536b96...93d772c

2024-11-21 [email protected] Added additional logging to `_listCoreDevices` (flutter/flutter#159275)
2024-11-21 [email protected] Roll Flutter Engine from 78b87f3fe023 to d1a08064e193 (1 revision) (flutter/flutter#159280)
2024-11-21 [email protected] Shut down DevTools and DDS processes if flutter_tools is killed by a signal (flutter/flutter#159238)
2024-11-21 [email protected] Remove `RepaintBoundary` that is no longer needed. (flutter/flutter#159232)
2024-11-21 [email protected] Try a speculative fix for Gradle OOMs. (flutter/flutter#159234)
2024-11-21 [email protected] On-device Widget Inspector button exits widget selection (flutter/flutter#158219)
2024-11-21 [email protected] Roll Flutter Engine from 523d381893c8 to 78b87f3fe023 (2 revisions) (flutter/flutter#159270)
2024-11-21 [email protected] Remove `firebase_abstract_method_smoke_test` (flutter/flutter#159145)
2024-11-21 [email protected] Roll Packages from 588310c to 7b55153 (7 revisions) (flutter/flutter#159268)
2024-11-21 [email protected] Roll Flutter Engine from 69c325513a65 to 523d381893c8 (3 revisions) (flutter/flutter#159263)
2024-11-21 [email protected] [flutter_tools] opt iOS/macOS apps out of Metal API validation via migrator, update templates in repo. (flutter/flutter#159228)
2024-11-21 [email protected] Scribe Android handwriting text input (flutter/flutter#148784)
2024-11-21 [email protected] Terminate non-detached test devices on `flutter run` completion (flutter/flutter#159170)
2024-11-21 [email protected] Un-skip tests that use `flutter build apk`. (flutter/flutter#159231)
2024-11-20 [email protected] Roll Flutter Engine from 2d32cf3a7971 to 69c325513a65 (1 revision) (flutter/flutter#159229)
2024-11-20 [email protected] Roll Flutter Engine from 3828681d1f86 to 2d32cf3a7971 (3 revisions) (flutter/flutter#159226)
2024-11-20 [email protected] Roll Flutter Engine from 3245c8976976 to 3828681d1f86 (1 revision) (flutter/flutter#159217)
2024-11-20 [email protected] Add `--dry-run` to `dev/bots/test.dart`. (flutter/flutter#158956)
2024-11-20 [email protected] Add docs for setting up Android Studio to auto format Kotlin code (flutter/flutter#159209)
2024-11-20 [email protected] Roll Flutter Engine from 80d77505fdde to 3245c8976976 (1 revision) (flutter/flutter#159214)
2024-11-20 [email protected] Fix: The enableFeedback property of InkWell cannot be set to a nullabâ�¦ (flutter/flutter#158907)
2024-11-20 [email protected] Roll Flutter Engine from 3f19207e820e to 80d77505fdde (1 revision) (flutter/flutter#159210)
2024-11-20 [email protected] Roll Packages from 4ce2ac0 to 588310c (6 revisions) (flutter/flutter#159201)
2024-11-20 [email protected] Remove dependency on [Target] and instead operate on [Architecture] (flutter/flutter#159196)
2024-11-20 [email protected] Fix git command in Quality-Assurance.md (flutter/flutter#155146)
2024-11-20 [email protected] Roll Flutter Engine from 7eb87547cbc6 to 3f19207e820e (4 revisions) (flutter/flutter#159176)
2024-11-20 [email protected] Make `runner` non-nullable as it always is. (flutter/flutter#159156)
2024-11-19 [email protected] Update Material 3 `CircularProgressIndicator` for new visual style (flutter/flutter#158104)
2024-11-19 [email protected] Roll Flutter Engine from 4ff696b555dc to 7eb87547cbc6 (3 revisions) (flutter/flutter#159168)
2024-11-19 [email protected] Add platform-android label for all flutter_tools *android* files (flutter/flutter#159166)
2024-11-19 [email protected] Roll Flutter Engine from d5820a638885 to 4ff696b555dc (1 revision) (flutter/flutter#159164)
2024-11-19 [email protected] Reland Add UI Benchmarks (flutter/flutter#153368)
2024-11-19 [email protected] fix lint usage of `task` inside `resolve_dependecies.gradle` file (flutter/flutter#158022)
2024-11-19 [email protected] Roll Flutter Engine from cff1e751f853 to d5820a638885 (5 revisions) (flutter/flutter#159155)
2024-11-19 [email protected] Removing redundant backticks in `flutter\packages\flutter_tools\gradle\gradle.kts` (flutter/flutter#159051)
2024-11-19 [email protected] Fixes initial validation with AutovalidateMode.always on first build (flutter/flutter#156708)
2024-11-19 [email protected] Introduce new Material 3 `Slider` shapes (flutter/flutter#152237)

If this roll has caused a breakage, revert this CL and stop the roller
using the controls here:
https://autoroll.skia.org/r/flutter-packages
Please CC [email protected],[email protected] on the revert to ensure that a human
is aware of the problem.

To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose

...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

framework flutter/packages/flutter repository. See also f: labels. p: cupertino_ui cupertino_ui package in flutter/packages p: material_ui material_ui package in flutter/packages

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Select widget mode is confusing

4 participants