AI: improve the walkthrough UI [devtools/devtools-frontend : main]
0 views
Skip to first unread message
Jack Franklin (Gerrit)
Mar 23, 2026, 12:29:19 PM (20 hours ago) Mar 23
to Kateryna Prokopenko, Devtools-frontend LUCI CQ, devtools-rev...@chromium.org
Attention needed from Kateryna Prokopenko
Jack Franklin added 1 comment![]( "Open in Gerrit")
Patchset-level comments
File-level comment, Patchset 1 (Latest):
Jack Franklin . resolved
PTAL.
I don't love that a lot of these styles exist in two places (inline CTA and sidebar CTA) but that would require a chunky refactor + styling work to make it possible to have one button in two places that I don't see another solution just now.
Related details
Attention is currently required from:
- Kateryna Prokopenko
Submit Requirements:
Code-Owners
Code-Review
Review-Enforcement
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Kateryna Prokopenko (Gerrit)
Mar 23, 2026, 2:10:17 PM (18 hours ago) Mar 23
to Jack Franklin, Devtools-frontend LUCI CQ, devtools-rev...@chromium.org
Attention needed from Jack Franklin
Kateryna Prokopenko voted and added 2 comments![]( "Open in Gerrit")
Votes added by Kateryna Prokopenko
| Code-Review | +1 |
2 comments
Patchset-level comments
File-level comment, Patchset 2 (Latest):
Kateryna Prokopenko . resolved
Looks good to me, Jack! One small suggestion
File front_end/panels/ai_assistance/components/WalkthroughView.ts
Line 94, Patchset 2 (Latest):
?data-has-widgets=${!input.isLoading && hasWidgets}
?data-no-widgets=${!hasWidgets}>Kateryna Prokopenko . unresolved
Could we rename or at least add a comment as to why we have both? Otherwise it seems like we are passing 2 vars, which intuitively should be `var1 = !var2`
Related details
Attention is currently required from:
- Jack Franklin
Submit Requirements:
Code-Owners
Code-Review
No-Unresolved-Comments
Review-Enforcement
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Jack Franklin (Gerrit)
5:32 AM (3 hours ago) 5:32 AM
to Kateryna Prokopenko, Devtools-frontend LUCI CQ, devtools-rev...@chromium.org
Jack Franklin voted and added 1 comment![]( "Open in Gerrit")
Votes added by Jack Franklin
| Commit-Queue | +2 |
1 comment
File front_end/panels/ai_assistance/components/WalkthroughView.ts
Line 94, Patchset 2:
?data-has-widgets=${!input.isLoading && hasWidgets}
?data-no-widgets=${!hasWidgets}>Kateryna Prokopenko . resolved
Could we rename or at least add a comment as to why we have both? Otherwise it seems like we are passing 2 vars, which intuitively should be `var1 = !var2`
Code-Owners
Code-Review
Review-Enforcement
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Devtools-frontend LUCI CQ (Gerrit)
6:09 AM (2 hours ago) 6:09 AM
to Jack Franklin, Kateryna Prokopenko, devtools-rev...@chromium.org
Devtools-frontend LUCI CQ submitted the change with unreviewed changes![]( "Open in Gerrit")
Unreviewed changes
2 is the latest approved patch-set.
The change was submitted with unreviewed changes in the following files:
```
The name of the file: front_end/panels/ai_assistance/components/WalkthroughView.ts
Insertions: 6, Deletions: 0.
@@ -87,6 +87,12 @@
const hasWidgets = steps.some(s => s.widgets?.length);
+ // Note: we apply data-*-widgets attributes because we need to alter styling
+ // based on if widgets are present. It's clearer to style each state rather
+ // than only apply one data-* and then override existing styles. The styling
+ // here is more complex because we have to make the summary element look just
+ // like a DevTools Button, so as the user resizes the view from wide > small
+ // or vice-versa, the CTA does not change.
// clang-format off
return html`
<details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle}>
```
Change information
Commit message:
AI: improve the walkthrough UI
1. Change the backgrounds & styles of the CTAs depending on if the
walkthrough has widgets.
2. Add the chevron to the CTAs.
Bug: 495374445
Change-Id: Ida6a6c42b5949e1688577b5edd821d16defd5c65
Reviewed-by: Kateryna Prokopenko <kprok...@chromium.org>
Commit-Queue: Jack Franklin <jacktf...@chromium.org>
Files:
- M front_end/panels/ai_assistance/components/ChatMessage.ts
- M front_end/panels/ai_assistance/components/WalkthroughView.ts
- M front_end/panels/ai_assistance/components/chatMessage.css
- M front_end/panels/ai_assistance/components/walkthroughView.css
Change size: M
Delta: 4 files changed, 57 insertions(+), 7 deletions(-)
Branch: refs/heads/main
Submit Requirements:
Code-Review: +1 by Kateryna Prokopenko
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Reply all
Reply to author
Forward
0 new messages