diff -Nru chromium-146.0.7680.80/chrome/browser/resources/contextual_tasks/composebox.ts chromium-146.0.7680.153/chrome/browser/resources/contextual_tasks/composebox.ts
--- chromium-146.0.7680.80/chrome/browser/resources/contextual_tasks/composebox.ts 2026-03-13 16:54:03.000000000 +0000
+++ chromium-146.0.7680.153/chrome/browser/resources/contextual_tasks/composebox.ts 2026-03-17 19:56:22.000000000 +0000
@@ -5,7 +5,6 @@
import '//resources/cr_components/composebox/composebox_dropdown.js';
import '//resources/cr_components/composebox/composebox.js';
import '//resources/cr_components/localized_link/localized_link.js';
-import './onboarding_tooltip.js';
import type {ComposeboxElement} from '//resources/cr_components/composebox/composebox.js';
import type {PageHandlerRemote} from '//resources/cr_components/composebox/composebox.mojom-webui.js';
@@ -16,7 +15,7 @@
import {assert} from '//resources/js/assert.js';
import {EventTracker} from '//resources/js/event_tracker.js';
import {loadTimeData} from '//resources/js/load_time_data.js';
-import type {AutocompleteMatch, AutocompleteResult, PageCallbackRouter as SearchboxPageCallbackRouter} from '//resources/mojo/components/omnibox/browser/searchbox.mojom-webui.js';
+import type {AutocompleteMatch, AutocompleteResult, PageCallbackRouter as SearchboxPageCallbackRouter, PageHandlerRemote as SearchboxPageHandlerRemote} from '//resources/mojo/components/omnibox/browser/searchbox.mojom-webui.js';
import {ToolMode} from '//resources/mojo/components/omnibox/composebox/composebox_query.mojom-webui.js';
import type {UnguessableToken} from '//resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-webui.js';
import {CrLitElement} from 'chrome://resources/lit/v3_0/lit.rollup.js';
@@ -25,7 +24,16 @@
import {getCss} from './composebox.css.js';
import {getHtml} from './composebox.html.js';
import {VoiceSearchState} from './constants.js';
-import type {ContextualTasksOnboardingTooltipElement} from './onboarding_tooltip.js';
+import {IconType} from './contextual_tasks.mojom-webui.js';
+
+const ICON_TYPE_TO_NAME: {[id: number]: string} = {
+ [IconType.kUnspecified]: 'unspecified',
+ [IconType.kAdd]: 'add',
+ [IconType.kFormatQuoteFilled]: 'quoteFilled',
+ [IconType.kImage]: 'image',
+ [IconType.kDrivePdf]: 'drivePdf',
+ [IconType.kCheck]: 'check',
+};
function recordVoiceSearchAction(voiceSearchState: VoiceSearchState) {
// Safety return statement in rare case chrome metrics is not available.
@@ -51,7 +59,6 @@
$: {
composebox: ComposeboxElement,
composeboxContainer: HTMLElement,
- onboardingTooltip: ContextualTasksOnboardingTooltipElement,
contextualTasksSuggestionsContainer: ComposeboxDropdownElement,
};
}
@@ -99,10 +106,6 @@
type: Boolean,
value: loadTimeData.getBoolean('composeboxShowContextMenu'),
},
- showOnboardingTooltip_: {
- type: Boolean,
- value: loadTimeData.getBoolean('showOnboardingTooltip'),
- },
zeroStateSuggestions_: {type: Object},
activeToolMode_: {
type: Number,
@@ -119,6 +122,7 @@
type: Boolean,
reflect: true,
},
+ selectedMatchIndex_: {type: Number},
};
}
@@ -147,25 +151,16 @@
protected accessor isComposeboxFocused_: boolean = false;
protected accessor showContextMenu_: boolean =
loadTimeData.getBoolean('composeboxShowContextMenu');
- protected accessor showOnboardingTooltip_: boolean =
- loadTimeData.getBoolean('showOnboardingTooltip');
protected accessor activeToolMode_: ToolMode = ToolMode.kUnspecified;
protected accessor showSuggestionsActivityLink_: boolean = false;
+ protected accessor selectedMatchIndex_: number = -1;
+ protected searchboxHandler_: SearchboxPageHandlerRemote;
private eventTracker_: EventTracker = new EventTracker();
private pageHandler_: PageHandlerRemote;
private searchboxCallbackRouter_: SearchboxPageCallbackRouter;
private searchboxListenerIds_: number[] = [];
- private onboardingTooltipIsVisible_: boolean = false;
- private numberOfTimesTooltipShown_: number = 0;
- private readonly maximumTimesTooltipShown_: number = loadTimeData.getInteger(
- 'composeboxShowOnboardingTooltipSessionImpressionCap');
- private isOnboardingTooltipDismissCountBelowCap_: boolean =
- loadTimeData.getBoolean('isOnboardingTooltipDismissCountBelowCap');
- private userDismissedTooltip_: boolean = false;
+ // Tracks the resize of the composebox to provide height updates.
private resizeObserver_: ResizeObserver|null = null;
- private tooltipImpressionTimer_: number|null = null;
- private readonly tooltipImpressionDelay_: number =
- loadTimeData.getInteger('composeboxShowOnboardingTooltipImpressionDelay');
protected caretAnimationsEnabled_: boolean =
loadTimeData.getBoolean('caretAnimationEnabled');
@@ -174,6 +169,7 @@
this.pageHandler_ = ComposeboxProxyImpl.getInstance().handler;
this.searchboxCallbackRouter_ =
ComposeboxProxyImpl.getInstance().searchboxCallbackRouter;
+ this.searchboxHandler_ = ComposeboxProxyImpl.getInstance().searchboxHandler;
}
override connectedCallback() {
@@ -193,7 +189,6 @@
composebox.animationState = GlowAnimationState.NONE;
});
this.eventTracker_.add(composebox, 'composebox-submit', () => {
-
this.clearInputAndFocus(/* querySubmitted= */ true);
});
this.eventTracker_.add(
@@ -201,7 +196,7 @@
if (e.detail.height !== undefined) {
composebox.style.setProperty(
'--carousel-height', `${e.detail.height}px`);
- this.updateTooltipVisibility_();
+ this.fire('update-tooltip-visibility');
}
});
this.eventTracker_.add(
@@ -213,7 +208,7 @@
this.eventTracker_.add(
composebox.getDropTarget(), 'on-context-files-changed', () => {
- this.updateTooltipVisibility_();
+ this.fire('update-tooltip-visibility');
});
this.eventTracker_.add(
@@ -245,10 +240,10 @@
composebox, 'composebox-voice-search-user-canceled', () => {
recordVoiceSearchAction(VoiceSearchState.VOICE_SEARCH_CANCELED);
});
- // Initial check.
- this.updateTooltipVisibility_();
this.activeToolMode_ = composebox.activeToolMode;
+ this.fire('update-tooltip-visibility', {height: composebox.offsetHeight});
+
this.resizeObserver_ = new ResizeObserver(() => {
this.composeboxHeight_ = composebox.offsetHeight;
this.dispatchEvent(new CustomEvent('composebox-height-update', {
@@ -263,8 +258,6 @@
override disconnectedCallback() {
super.disconnectedCallback();
- this.clearTooltipImpressionTimer_();
- this.stopObservingResize_();
if (this.resizeObserver_) {
this.resizeObserver_.disconnect();
this.resizeObserver_ = null;
@@ -295,7 +288,7 @@
}
get showLensButton_() {
- //Lens should be hidden in the side panel if deep search is enabled.
+ // Lens should be hidden in the side panel if deep search is enabled.
return this.isSidePanel && this.activeToolMode_ !== ToolMode.kDeepSearch;
}
@@ -312,73 +305,44 @@
this.showSuggestionsActivityLink_ = e.detail;
}
- private updateTooltipVisibility_() {
- if (!loadTimeData.getBoolean('showOnboardingTooltip')) {
- return;
- }
-
- const tooltip = this.$.onboardingTooltip;
- if (!tooltip) {
- return;
- }
-
- if (this.onboardingTooltipIsVisible_ &&
- !this.$.composebox.getHasAutomaticActiveTabChipToken()) {
- tooltip.hide();
- this.onboardingTooltipIsVisible_ = false;
- this.stopObservingResize_();
- // Clear the timer if the tooltip is hidden. This will prevent it being
- // count as an impression if the chip only showed up briefly.
- this.clearTooltipImpressionTimer_();
- } else if (this.$.composebox.getHasAutomaticActiveTabChipToken()) {
- const target = this.$.composebox.getAutomaticActiveTabChipElement();
- if (target) {
- tooltip.target = target;
- }
-
- if (this.onboardingTooltipIsVisible_) {
- tooltip.updatePosition();
- } else if (this.shouldShowOnboardingTooltip()) {
- tooltip.show();
- this.startObservingResize_(target);
- this.onboardingTooltipIsVisible_ = true;
-
- // Start the impression timer if the tooltip is newly shown.
- this.tooltipImpressionTimer_ = setTimeout(() => {
- // If the timer is not cleared, that means the delay passed since the
- // tooltip was shown. Increment the impression count.
- this.numberOfTimesTooltipShown_++;
- this.tooltipImpressionTimer_ = null;
- }, this.tooltipImpressionDelay_);
- }
- }
- tooltip.shouldShow = this.onboardingTooltipIsVisible_;
+ protected onSuggestionsResultReceived_(e: CustomEvent
) {
+ this.isLoading_ = false;
+ this.zeroStateSuggestions_ = e.detail;
}
- private shouldShowOnboardingTooltip(): boolean {
- return this.showOnboardingTooltip_ &&
- this.numberOfTimesTooltipShown_ < this.maximumTimesTooltipShown_ &&
- this.isOnboardingTooltipDismissCountBelowCap_ &&
- !this.userDismissedTooltip_;
+ // Handle keyboard events on the suggestions dropdown.
+ protected onDropdownKeydown_(e: KeyboardEvent) {
+ if (e.key === 'Enter') {
+ this.navigateToMatch_(this.selectedMatchIndex_);
+ e.preventDefault();
+ e.stopPropagation();
+ }
}
- protected onTooltipDismissed_() {
- this.userDismissedTooltip_ = true;
- this.onboardingTooltipIsVisible_ = false;
- this.stopObservingResize_();
- this.clearTooltipImpressionTimer_();
+ private updateSelection_(index: number) {
+ this.selectedMatchIndex_ = index;
}
- protected onSuggestionsResultReceived_(e: CustomEvent) {
- this.isLoading_ = false;
- this.zeroStateSuggestions_ = e.detail;
+ protected onMatchFocusin_(e: CustomEvent<{index: number}>) {
+ this.updateSelection_(e.detail.index);
}
- private clearTooltipImpressionTimer_() {
- if (this.tooltipImpressionTimer_) {
- clearTimeout(this.tooltipImpressionTimer_);
- this.tooltipImpressionTimer_ = null;
+ private navigateToMatch_(index: number) {
+ const match = this.zeroStateSuggestions_?.matches[index];
+
+ if (match) {
+ this.searchboxHandler_.openAutocompleteMatch(
+ /*line=*/ index,
+ /*url=*/ match.destinationUrl,
+ /*areMatchesShowing=*/ true,
+ /*mouseButton=*/ 0,
+ /*altKey=*/ false,
+ /*ctrlKey=*/ false,
+ /*metaKey=*/ false,
+ /*shiftKey=*/ false);
}
+ this.clearInputAndFocus(/* querySubmitted= */ true);
+ this.selectedMatchIndex_ = -1;
}
clearInputAndFocus(querySubmitted: boolean = false): void {
@@ -406,37 +370,29 @@
this.pageHandler_.handleFileUpload(false);
}
- private startObservingResize_(target: Element|null) {
- if (this.resizeObserver_) {
- this.resizeObserver_.disconnect();
- }
- this.resizeObserver_ = new ResizeObserver(() => {
- const tooltip = this.$.onboardingTooltip;
- if (tooltip && tooltip.target) {
- tooltip.updatePosition();
- }
- });
- this.resizeObserver_.observe(this.$.composebox);
- if (target) {
- this.resizeObserver_.observe(target);
- }
+ injectInput(
+ title: string, thumbnail: string, fileToken: UnguessableToken,
+ supportsUnimodal: boolean) {
+ this.$.composebox.injectInput(
+ title, thumbnail, fileToken, supportsUnimodal);
}
- private stopObservingResize_() {
- if (this.resizeObserver_) {
- this.resizeObserver_.disconnect();
- this.resizeObserver_ = null;
- }
- }
-
- injectInput(title: string, thumbnail: string, fileToken: UnguessableToken) {
- this.$.composebox.injectInput(title, thumbnail, fileToken);
+ injectInputWithIcon(
+ title: string, iconId: IconType, fileToken: UnguessableToken,
+ supportsUnimodal: boolean) {
+ this.$.composebox.injectInput(
+ title, '', fileToken, supportsUnimodal,
+ ICON_TYPE_TO_NAME[iconId as number] ?? 'unspecified');
}
deleteFile(fileToken: UnguessableToken) {
this.$.composebox.deleteFile(fileToken);
}
+ getComposebox() {
+ return this.$.composebox;
+ }
+
get isComposeboxFocusedForTesting() {
return this.isComposeboxFocused_;
}
@@ -445,20 +401,8 @@
return this.composeboxHeight_;
}
- get numberOfTimesTooltipShownForTesting() {
- return this.numberOfTimesTooltipShown_;
- }
-
- set numberOfTimesTooltipShownForTesting(n: number) {
- this.numberOfTimesTooltipShown_ = n;
- }
-
- set userDismissedTooltipForTesting(dismissed: boolean) {
- this.userDismissedTooltip_ = dismissed;
- }
-
- updateTooltipVisibilityForTesting() {
- this.updateTooltipVisibility_();
+ get resizeObserverForTesting() {
+ return this.resizeObserver_;
}
}
diff -Nru chromium-146.0.7680.80/chrome/browser/resources/contextual_tasks/contextual_tasks.html chromium-146.0.7680.153/chrome/browser/resources/contextual_tasks/contextual_tasks.html
--- chromium-146.0.7680.80/chrome/browser/resources/contextual_tasks/contextual_tasks.html 2026-03-13 16:54:03.000000000 +0000
+++ chromium-146.0.7680.153/chrome/browser/resources/contextual_tasks/contextual_tasks.html 2026-03-17 19:56:22.000000000 +0000
@@ -15,6 +15,13 @@
width: 100%;
}
+ /* This is only used for first load. */
+ @media (prefers-color-scheme: dark) {
+ body {
+ background-color: rgba(16, 18, 23, 1);
+ }
+ }
+
body {
align-items: stretch;
display: flex;
diff -Nru chromium-146.0.7680.80/chrome/browser/resources/contextual_tasks/ghost_loader.css chromium-146.0.7680.153/chrome/browser/resources/contextual_tasks/ghost_loader.css
--- chromium-146.0.7680.80/chrome/browser/resources/contextual_tasks/ghost_loader.css 2026-03-13 16:54:03.000000000 +0000
+++ chromium-146.0.7680.153/chrome/browser/resources/contextual_tasks/ghost_loader.css 2026-03-17 19:56:22.000000000 +0000
@@ -16,7 +16,7 @@
display: flex;
flex-direction: column;
gap: 12px;
- padding: 28px 15px;
+ padding-block-start: 28px;
}
.row {
diff -Nru chromium-146.0.7680.80/chrome/browser/resources/contextual_tasks/onboarding_tooltip.ts chromium-146.0.7680.153/chrome/browser/resources/contextual_tasks/onboarding_tooltip.ts
--- chromium-146.0.7680.80/chrome/browser/resources/contextual_tasks/onboarding_tooltip.ts 2026-03-13 16:54:03.000000000 +0000
+++ chromium-146.0.7680.153/chrome/browser/resources/contextual_tasks/onboarding_tooltip.ts 2026-03-17 19:56:22.000000000 +0000
@@ -6,6 +6,7 @@
import '//resources/cr_elements/icons.html.js';
import '//resources/cr_elements/cr_tooltip/cr_tooltip.js';
+import type {ComposeboxElement} from '//resources/cr_components/composebox/composebox.js';
import type {CrTooltipElement} from '//resources/cr_elements/cr_tooltip/cr_tooltip.js';
import {loadTimeData} from '//resources/js/load_time_data.js';
import {CrLitElement} from '//resources/lit/v3_0/lit.rollup.js';
@@ -47,10 +48,29 @@
protected onboardingAcceptButton_: string =
loadTimeData.getString('onboardingAcceptButton');
+ private onboardingTooltipIsVisible_: boolean = false;
+ private numberOfTimesTooltipShown_: number = 0;
+ private readonly maximumTimesTooltipShown_: number = loadTimeData.getInteger(
+ 'composeboxShowOnboardingTooltipSessionImpressionCap');
+ private isOnboardingTooltipDismissCountBelowCap_: boolean =
+ loadTimeData.getBoolean('isOnboardingTooltipDismissCountBelowCap');
+ private userDismissedTooltip_: boolean = false;
+ private tooltipResizeObserver_: ResizeObserver|null = null;
+ private tooltipMutationObserver_: MutationObserver|null = null;
+ private tooltipImpressionTimer_: number|null = null;
+ private readonly tooltipImpressionDelay_: number =
+ loadTimeData.getInteger('composeboxShowOnboardingTooltipImpressionDelay');
+
private get tooltip_(): CrTooltipElement {
return this.shadowRoot.querySelector('cr-tooltip')!;
}
+ override disconnectedCallback() {
+ super.disconnectedCallback();
+ this.stopObservingTooltipResize_();
+ this.clearTooltipImpressionTimer_();
+ }
+
override updated(changedProperties: PropertyValues) {
super.updated(changedProperties);
@@ -99,9 +119,104 @@
}
}
+ updateTooltipVisibility(
+ composeboxContainer: HTMLElement, composebox: ComposeboxElement) {
+ if (!loadTimeData.getBoolean('showOnboardingTooltip')) {
+ return;
+ }
+
+ if (this.onboardingTooltipIsVisible_ &&
+ !composebox.getHasAutomaticActiveTabChipToken()) {
+ this.hide();
+ this.onboardingTooltipIsVisible_ = false;
+ this.stopObservingTooltipResize_();
+ this.clearTooltipImpressionTimer_();
+ } else if (composebox.getHasAutomaticActiveTabChipToken()) {
+ const target = composebox.getAutomaticActiveTabChipElement();
+ if (target) {
+ this.target = target;
+ }
+
+ if (this.onboardingTooltipIsVisible_) {
+ this.updatePosition();
+ } else if (this.shouldShowOnboardingTooltip()) {
+ this.show();
+ this.startObservingTooltipResize_(composeboxContainer, composebox, target);
+ this.onboardingTooltipIsVisible_ = true;
+
+ this.tooltipImpressionTimer_ = setTimeout(() => {
+ this.numberOfTimesTooltipShown_++;
+ this.tooltipImpressionTimer_ = null;
+ }, this.tooltipImpressionDelay_);
+ }
+ }
+ this.shouldShow = this.onboardingTooltipIsVisible_;
+ }
+
+ private shouldShowOnboardingTooltip(): boolean {
+ return this.numberOfTimesTooltipShown_ < this.maximumTimesTooltipShown_ &&
+ this.isOnboardingTooltipDismissCountBelowCap_ &&
+ !this.userDismissedTooltip_;
+ }
+
+ private clearTooltipImpressionTimer_() {
+ if (this.tooltipImpressionTimer_) {
+ clearTimeout(this.tooltipImpressionTimer_);
+ this.tooltipImpressionTimer_ = null;
+ }
+ }
+
+ private startObservingTooltipResize_(
+ composeboxContainer: HTMLElement, composebox: ComposeboxElement, target: Element|null) {
+ this.stopObservingTooltipResize_();
+
+ // Observe the tooltip for any size changes.
+ this.tooltipResizeObserver_ = new ResizeObserver(() => {
+ if (this.target) {
+ this.updatePosition();
+ }
+ });
+ this.tooltipResizeObserver_.observe(composebox);
+ if (target) {
+ this.tooltipResizeObserver_.observe(target);
+ }
+
+ // Observe the composebox container and composebox for any style or class
+ // changes that may affect the tooltip position.
+ this.tooltipMutationObserver_ = new MutationObserver(() => {
+ if (this.target) {
+ this.updatePosition();
+ }
+ });
+ const mutationObserverOptions = {
+ attributes: true,
+ attributeFilter: ['style', 'class'],
+ };
+ this.tooltipMutationObserver_.observe(composeboxContainer, mutationObserverOptions);
+ this.tooltipMutationObserver_.observe(composebox, mutationObserverOptions);
+ if (target) {
+ this.tooltipMutationObserver_.observe(target, mutationObserverOptions);
+ }
+ }
+
+ private stopObservingTooltipResize_() {
+ if (this.tooltipResizeObserver_) {
+ this.tooltipResizeObserver_.disconnect();
+ this.tooltipResizeObserver_ = null;
+ }
+ if (this.tooltipMutationObserver_) {
+ this.tooltipMutationObserver_.disconnect();
+ this.tooltipMutationObserver_ = null;
+ }
+ }
+
protected onTooltipClose_(e: Event) {
e.stopPropagation();
BrowserProxyImpl.getInstance().handler.onboardingTooltipDismissed();
+ this.userDismissedTooltip_ = true;
+ this.onboardingTooltipIsVisible_ = false;
+ this.stopObservingTooltipResize_();
+ this.clearTooltipImpressionTimer_();
this.hide();
this.dispatchEvent(new CustomEvent('onboarding-tooltip-dismissed', {
bubbles: true,
@@ -109,6 +224,22 @@
}));
}
+ get numberOfTimesTooltipShownForTesting() {
+ return this.numberOfTimesTooltipShown_;
+ }
+
+ set numberOfTimesTooltipShownForTesting(n: number) {
+ this.numberOfTimesTooltipShown_ = n;
+ }
+
+ set userDismissedTooltipForTesting(dismissed: boolean) {
+ this.userDismissedTooltip_ = dismissed;
+ }
+
+ get tooltipResizeObserverForTesting() {
+ return this.tooltipResizeObserver_;
+ }
+
protected onHelpLinkClick_(e: Event) {
e.preventDefault();
BrowserProxyImpl.getInstance().handler.openOnboardingHelpUi();
diff -Nru chromium-146.0.7680.80/chrome/browser/resources/contextual_tasks/top_toolbar.html.ts chromium-146.0.7680.153/chrome/browser/resources/contextual_tasks/top_toolbar.html.ts
--- chromium-146.0.7680.80/chrome/browser/resources/contextual_tasks/top_toolbar.html.ts 2026-03-13 16:54:03.000000000 +0000
+++ chromium-146.0.7680.153/chrome/browser/resources/contextual_tasks/top_toolbar.html.ts 2026-03-17 19:56:22.000000000 +0000
@@ -36,7 +36,8 @@
@click="${this.onThreadHistoryClick_}"
iron-icon="contextual_tasks:notes_spark"
class="no-overlap" title="$i18n{threadHistoryTooltip}"
- aria-label="$i18n{threadHistoryTooltip}">
+ aria-label="$i18n{threadHistoryTooltip}"
+ ?hidden="${!this.isAiPage}">
{
- if (this.isComposeboxFocused) {
+ if (this.$.composebox.isExpanded()) {
return;
}
this.feedbackToastShown = true;
@@ -709,6 +709,10 @@
return;
}
+ if (this.$.composebox.isExpanded()) {
+ return;
+ }
+
this.feedbackToastShown = true;
this.$.feedbackToast.show();
}
diff -Nru chromium-146.0.7680.80/chrome/browser/resources/omnibox/aim_eligibility/app.html.ts chromium-146.0.7680.153/chrome/browser/resources/omnibox/aim_eligibility/app.html.ts
--- chromium-146.0.7680.80/chrome/browser/resources/omnibox/aim_eligibility/app.html.ts 2026-03-13 16:54:03.000000000 +0000
+++ chromium-146.0.7680.153/chrome/browser/resources/omnibox/aim_eligibility/app.html.ts 2026-03-17 19:56:22.000000000 +0000
@@ -47,6 +47,14 @@
${this.eligibilityState_.eligibilityResponseSource}