0

[realbox][cr23] Implement realbox cr23 hover fill shape.

Before: https://screenshot.googleplex.com/4VGa2AQzrf7mT2D
Before (zarya): https://screenshot.googleplex.com/3ezdefadj5ReDP9
After: https://screenshot.googleplex.com/3GaPBqz2fv5tWUZ
After(zarya): https://screenshot.googleplex.com/7gQPvm2ELPNVECb

Bug: 1508440
Change-Id: Ia2945d2bb0f63e29809e865bcfc3ed127db21754
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5089929
Reviewed-by: Moe Ahmadi <mahmadi@chromium.org>
Commit-Queue: Nihar Majmudar <niharm@google.com>
Reviewed-by: Khalid Peer <khalidpeer@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1236637}
This commit is contained in:
Nihar Majmudar
2023-12-12 23:00:26 +00:00
committed by Chromium LUCI CQ
parent f87e77be2e
commit 9dd974d823
4 changed files with 38 additions and 1 deletions
chrome/browser/ui/webui/realbox
ui/webui/resources/cr_components/omnibox

@@ -676,6 +676,10 @@ void RealboxHandler::SetupWebUIDataSource(content::WebUIDataSource* source,
base::FeatureList::IsEnabled( base::FeatureList::IsEnabled(
ntp_features::kRealboxCr23ConsistentRowHeight) || ntp_features::kRealboxCr23ConsistentRowHeight) ||
base::FeatureList::IsEnabled(ntp_features::kRealboxCr23All)); base::FeatureList::IsEnabled(ntp_features::kRealboxCr23All));
source->AddBoolean(
"realboxCr23HoverFillShape",
base::FeatureList::IsEnabled(ntp_features::kRealboxCr23HoverFillShape) ||
base::FeatureList::IsEnabled(ntp_features::kRealboxCr23All));
} }
// static // static

@@ -67,7 +67,12 @@
var(--color-realbox-results-icon-selected); var(--color-realbox-results-icon-selected);
} }
cr-realbox-match:-webkit-any(:hover, :focus-within, [selected]) { :host(:not([chrome-refresh-hover-shape])) cr-realbox-match:-webkit-any(:hover, :focus-within, [selected]) {
background-color:
var(--color-realbox-results-background-hovered);
}
:host([chrome-refresh-hover-shape]) .secondary-side cr-realbox-match:-webkit-any(:hover, :focus-within, [selected]) {
background-color: background-color:
var(--color-realbox-results-background-hovered); var(--color-realbox-results-background-hovered);
} }

@@ -56,6 +56,12 @@ export class RealboxDropdownElement extends PolymerElement {
value: false, value: false,
}, },
chromeRefreshHoverShape: {
type: Boolean,
value: () => loadTimeData.getBoolean('realboxCr23HoverFillShape'),
reflectToAttribute: true,
},
expandedStateLayoutChromeRefresh: { expandedStateLayoutChromeRefresh: {
type: Boolean, type: Boolean,
value: () => loadTimeData.getBoolean('realboxCr23ExpandedStateLayout'), value: () => loadTimeData.getBoolean('realboxCr23ExpandedStateLayout'),
@@ -78,6 +84,7 @@ export class RealboxDropdownElement extends PolymerElement {
type: Boolean, type: Boolean,
computed: `computeHasSecondarySide_(result)`, computed: `computeHasSecondarySide_(result)`,
notify: true, notify: true,
reflectToAttribute: true,
}, },
result: { result: {
@@ -123,6 +130,7 @@ export class RealboxDropdownElement extends PolymerElement {
} }
canShowSecondarySide: boolean; canShowSecondarySide: boolean;
chromeRefreshHoverShape: boolean;
expandedStateLayoutChromeRefresh: boolean; expandedStateLayoutChromeRefresh: boolean;
hadSecondarySide: boolean; hadSecondarySide: boolean;
hasSecondarySide: boolean; hasSecondarySide: boolean;

@@ -54,6 +54,25 @@
padding-bottom: 5px; padding-bottom: 5px;
} }
:host-context([chrome-refresh-hover-shape]) .container:not(.actions) {
margin-inline-end: 16px;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
}
:host-context([chrome-refresh-hover-shape]):host-context([has-secondary-side]) .container:not(.actions) {
margin-inline-end: 0px;
}
:host-context([chrome-refresh-hover-shape]):host([side-type-class_='primary-side']) .container:not(.actions):hover {
background-color: var(--color-realbox-results-background-hovered);
}
:host-context([chrome-refresh-hover-shape]):host(:is(:focus-visible, [selected]):not(
[side-type-class_='secondary-side'])) .container:not(.actions) {
background-color: var(--color-realbox-results-background-hovered);
}
.actions.inlined { .actions.inlined {
flex-grow: 1; flex-grow: 1;
align-self: center; align-self: center;
@@ -189,6 +208,7 @@
.container { .container {
box-sizing: border-box; box-sizing: border-box;
flex-direction: column; flex-direction: column;
margin-inline-end: 0;
padding: 6px; padding: 6px;
padding-block-end: 16px; padding-block-end: 16px;
width: 102px; width: 102px;