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(
ntp_features::kRealboxCr23ConsistentRowHeight) ||
base::FeatureList::IsEnabled(ntp_features::kRealboxCr23All));
source->AddBoolean(
"realboxCr23HoverFillShape",
base::FeatureList::IsEnabled(ntp_features::kRealboxCr23HoverFillShape) ||
base::FeatureList::IsEnabled(ntp_features::kRealboxCr23All));
}
// static

@@ -67,7 +67,12 @@
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:
var(--color-realbox-results-background-hovered);
}

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

@@ -54,6 +54,25 @@
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 {
flex-grow: 1;
align-self: center;
@@ -189,6 +208,7 @@
.container {
box-sizing: border-box;
flex-direction: column;
margin-inline-end: 0;
padding: 6px;
padding-block-end: 16px;
width: 102px;