Skip to content

Conversation

@elliette
Copy link
Member

@elliette elliette commented Nov 5, 2024

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. f: material design flutter/packages/flutter/material repository. f: cupertino flutter/packages/flutter/cupertino repository labels Nov 5, 2024
@kenzieschmoll
Copy link
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
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
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
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
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

@elliette
Copy link
Member Author

elliette commented Nov 13, 2024

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
child: WidgetInspector(
key: inspectorKey,
exitWidgetSelectionButtonBuilder: exitWidgetSelectionButtonBuilder,
moveExitWidgetSelectionButtonBuilder: null,
Copy link
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
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
Copy link
Member Author

elliette commented Nov 20, 2024

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
78 checks passed
@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
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
Copy link

anujgill commented Apr 8, 2025

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
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
Copy link
Member Author

elliette commented Apr 8, 2025

@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!

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

Labels

f: cupertino flutter/packages/flutter/cupertino repository f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Select widget mode is confusing

4 participants