[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(
|
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;
|
||||||
|
Reference in New Issue
Block a user