[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:

committed by
Chromium LUCI CQ

parent
f87e77be2e
commit
9dd974d823
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;
|
||||
|
Reference in New Issue
Block a user