Skip to content

GitLab

T
tangled
Commit 49977962 authored by Seokho Song's avatar Seokho Song Committed by Commit Bot
Browse files
Options

Implement Custom scrollbar in Internal Popup to be affected by :hover 

The custom scrollbar has been affected by pseudo-class :hover.
However that in the internal popup was not affected :hover.

In this change, Hover styles will be calculated using temporality declared CustomScrollbar.
And that will be appended via AppendOwnerElementPseudoStyles function.

Bug: 1076508
Change-Id: Ic57ca5c36b91b221bb3488292bfe2eb53b988ac2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2418527Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Commit-Queue: Seokho Song <0xdevssh@gmail.com>
Cr-Commit-Position: refs/heads/master@{#810339}
parent 450a01de
Hide whitespace changes
Inline Side-by-side
Showing with 264 additions and 24 deletions
third_party/blink/renderer/core/html/forms/internal_popup_menu.cc
View file @ 49977962
...@@ -10,7 +10,9 @@ ...@@ -10,7 +10,9 @@
#include "third_party/blink/public/platform/task_type.h" #include "third_party/blink/public/platform/task_type.h"
#include "third_party/blink/renderer/core/css/css_font_selector.h" #include "third_party/blink/renderer/core/css/css_font_selector.h"
#include "third_party/blink/renderer/core/css/css_value_id_mappings.h" #include "third_party/blink/renderer/core/css/css_value_id_mappings.h"
#include "third_party/blink/renderer/core/css/pseudo_style_request.h"
#include "third_party/blink/renderer/core/css/style_engine.h" #include "third_party/blink/renderer/core/css/style_engine.h"
#include "third_party/blink/renderer/core/dom/element.h"
#include "third_party/blink/renderer/core/dom/element_traversal.h" #include "third_party/blink/renderer/core/dom/element_traversal.h"
#include "third_party/blink/renderer/core/dom/events/scoped_event_queue.h" #include "third_party/blink/renderer/core/dom/events/scoped_event_queue.h"
#include "third_party/blink/renderer/core/dom/node_computed_style.h" #include "third_party/blink/renderer/core/dom/node_computed_style.h"
...@@ -25,9 +27,11 @@ ...@@ -25,9 +27,11 @@
#include "third_party/blink/renderer/core/html/parser/html_parser_idioms.h" #include "third_party/blink/renderer/core/html/parser/html_parser_idioms.h"
#include "third_party/blink/renderer/core/html_names.h" #include "third_party/blink/renderer/core/html_names.h"
#include "third_party/blink/renderer/core/input/event_handler.h" #include "third_party/blink/renderer/core/input/event_handler.h"
#include "third_party/blink/renderer/core/layout/layout_box.h"
#include "third_party/blink/renderer/core/layout/layout_theme.h" #include "third_party/blink/renderer/core/layout/layout_theme.h"
#include "third_party/blink/renderer/core/page/chrome_client.h" #include "third_party/blink/renderer/core/page/chrome_client.h"
#include "third_party/blink/renderer/core/page/page_popup.h" #include "third_party/blink/renderer/core/page/page_popup.h"
#include "third_party/blink/renderer/core/scroll/scrollable_area.h"
#include "third_party/blink/renderer/platform/fonts/font_selector.h" #include "third_party/blink/renderer/platform/fonts/font_selector.h"
#include "third_party/blink/renderer/platform/fonts/font_selector_client.h" #include "third_party/blink/renderer/platform/fonts/font_selector_client.h"
#include "third_party/blink/renderer/platform/geometry/int_rect.h" #include "third_party/blink/renderer/platform/geometry/int_rect.h"
...@@ -59,6 +63,37 @@ const String SerializeComputedStyleForProperty(const ComputedStyle& style, ...@@ -59,6 +63,37 @@ const String SerializeComputedStyleForProperty(const ComputedStyle& style,
value->CssText().Utf8().c_str()); value->CssText().Utf8().c_str());
} }
ScrollbarPart ScrollbarPartFromPseudoId(PseudoId id) {
switch (id) {
case kPseudoIdScrollbar:
return kScrollbarBGPart;
case kPseudoIdScrollbarThumb:
return kThumbPart;
case kPseudoIdScrollbarTrack:
case kPseudoIdScrollbarTrackPiece:
return kBackTrackPart;
default:
break;
}
return kNoPart;
}
scoped_refptr<const ComputedStyle> StyleForHoveredScrollbarPart(
HTMLSelectElement& element,
const ComputedStyle* style,
Scrollbar* scrollbar,
PseudoId target_id) {
ScrollbarPart part = ScrollbarPartFromPseudoId(target_id);
if (part == kNoPart)
return nullptr;
scrollbar->SetHoveredPart(part);
scoped_refptr<const ComputedStyle> part_style = element.StyleForPseudoElement(
PseudoElementStyleRequest(target_id, To<CustomScrollbar>(scrollbar),
part),
style);
return part_style;
}
} // anonymous namespace } // anonymous namespace
class PopupMenuCSSFontSelector : public CSSFontSelector, class PopupMenuCSSFontSelector : public CSSFontSelector,
...@@ -236,30 +271,41 @@ void InternalPopupMenu::WriteDocument(SharedBuffer* data) { ...@@ -236,30 +271,41 @@ void InternalPopupMenu::WriteDocument(SharedBuffer* data) {
"<!DOCTYPE html><head><meta charset='UTF-8'><style>\n", data); "<!DOCTYPE html><head><meta charset='UTF-8'><style>\n", data);
LayoutObject* owner_layout = owner_element.GetLayoutObject(); LayoutObject* owner_layout = owner_element.GetLayoutObject();
if (const ComputedStyle* style =
owner_layout->GetCachedPseudoElementStyle(kPseudoIdScrollbar)) { std::pair<PseudoId, const String> targets[] = {
AppendOwnerElementPseudoStyles("select::-webkit-scrollbar", data, *style); {kPseudoIdScrollbar, "select::-webkit-scrollbar"},
} {kPseudoIdScrollbarThumb, "select::-webkit-scrollbar-thumb"},
if (const ComputedStyle* style = {kPseudoIdScrollbarTrack, "select::-webkit-scrollbar-track"},
owner_layout->GetCachedPseudoElementStyle(kPseudoIdScrollbarThumb)) { {kPseudoIdScrollbarTrackPiece, "select::-webkit-scrollbar-track-piece"},
AppendOwnerElementPseudoStyles("select::-webkit-scrollbar-thumb", data, {kPseudoIdScrollbarCorner, "select::-webkit-scrollbar-corner"}};
*style);
} Scrollbar* temp_scrollbar = nullptr;
if (const ComputedStyle* style = const LayoutBox* box = owner_element.InnerElement().GetLayoutBox();
owner_layout->GetCachedPseudoElementStyle(kPseudoIdScrollbarTrack)) { if (box && box->GetScrollableArea()) {
AppendOwnerElementPseudoStyles("select::-webkit-scrollbar-track", data, if (ScrollableArea* scrollable = box->GetScrollableArea()) {
*style); temp_scrollbar = MakeGarbageCollected<CustomScrollbar>(
} scrollable, kVerticalScrollbar, &owner_element.InnerElement());
if (const ComputedStyle* style = owner_layout->GetCachedPseudoElementStyle( }
kPseudoIdScrollbarTrackPiece)) {
AppendOwnerElementPseudoStyles("select::-webkit-scrollbar-track-piece",
data, *style);
} }
if (const ComputedStyle* style = for (auto target : targets) {
owner_layout->GetCachedPseudoElementStyle(kPseudoIdScrollbarCorner)) { if (const ComputedStyle* style =
AppendOwnerElementPseudoStyles("select::-webkit-scrollbar-corner", data, owner_layout->GetCachedPseudoElementStyle(target.first)) {
*style); AppendOwnerElementPseudoStyles(target.second, data, *style);
}
// For Pseudo-class styles, Style should be calculated via that status.
if (temp_scrollbar) {
scoped_refptr<const ComputedStyle> part_style =
StyleForHoveredScrollbarPart(owner_element,
owner_element.GetComputedStyle(),
temp_scrollbar, target.first);
if (part_style) {
AppendOwnerElementPseudoStyles(target.second + ":hover", data,
*part_style);
}
}
} }
if (temp_scrollbar)
temp_scrollbar->DisconnectFromScrollableArea();
data->Append(ChooserResourceLoader::GetPickerCommonStyleSheet()); data->Append(ChooserResourceLoader::GetPickerCommonStyleSheet());
data->Append(ChooserResourceLoader::GetListPickerStyleSheet()); data->Append(ChooserResourceLoader::GetListPickerStyleSheet());
......
third_party/blink/web_tests/fast/forms/select-popup/popup-menu-appearance-custom-scrollbar-thumb-display-none.html
View file @ 49977962
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
select { select {
width: 200px; width: 200px;
font: 10px Ahem; font: 10px Ahem;
-webkit-appearance: none; appearance: none;
background-color: white; background-color: white;
} }
select::-webkit-scrollbar { select::-webkit-scrollbar {
......
third_party/blink/web_tests/fast/forms/select-popup/popup-menu-appearance-custom-scrollbar-thumb-hover.html 0 → 100644
View file @ 49977962
<!DOCTYPE html>
<html>
<head>
<script>
window.enablePixelTesting = true;
</script>
<script src="../resources/picker-common.js"></script>
<script src="../resources/common.js"></script>
<style>
select:focus {
outline-width: 0;
}
select {
width: 200px;
font: 10px Ahem;
-webkit-appearance: none;
background-color: white;
}
select::-webkit-scrollbar {
width: 200px;
}
select::-webkit-scrollbar-track {
background: orange;
}
select::-webkit-scrollbar-corner {
background: yellow;
}
select::-webkit-scrollbar-thumb {
background: gray;
}
select::-webkit-scrollbar-thumb:hover {
background: green;
}
option:hover{
background-color: green;
}
</style>
</head>
<body>
<select id='menu'>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
</select>
<script>
let menu = document.getElementById('menu');
function mouseMoveToScrollbar() {
return new Promise(function(resolve, reject) {
if (window.chrome && chrome.gpuBenchmarking) {
let selectElement = internals.pagePopupWindow.global.picker._selectElement;
let innerSelectRect = selectElement.getBoundingClientRect();
let scrollbarX = innerSelectRect.x + innerSelectRect.width - 10;
let scrollbarY = innerSelectRect.y + 50;
chrome.gpuBenchmarking.pointerActionSequence(
[{
source: 'mouse',
actions: [{name: 'pointerMove', x: scrollbarX, y: scrollbarY}]
}],
resolve);
} else {
reject();
}
});
}
openPicker(menu, ()=>{
mouseMoveToScrollbar().then(()=>{
testRunner.notifyDone()
})
})
testRunner.waitUntilDone()
</script>
</body>
</html>
\ No newline at end of file
third_party/blink/web_tests/fast/forms/select-popup/popup-menu-appearance-custom-scrollbar-track-display-none.html
View file @ 49977962
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
select { select {
width: 200px; width: 200px;
font: 10px Ahem; font: 10px Ahem;
-webkit-appearance: none; appearance: none;
background-color: white; background-color: white;
} }
select::-webkit-scrollbar { select::-webkit-scrollbar {
......
third_party/blink/web_tests/fast/forms/select-popup/popup-menu-appearance-custom-scrollbar-track-hover.html 0 → 100644
View file @ 49977962
<!DOCTYPE html>
<html>
<head>
<script>
window.enablePixelTesting = true;
</script>
<script src="../resources/picker-common.js"></script>
<script src="../resources/common.js"></script>
<style>
select:focus {
outline-width: 0;
}
select {
width: 200px;
font: 10px Ahem;
-webkit-appearance: none;
background-color: white;
}
select::-webkit-scrollbar {
width: 200px;
}
select::-webkit-scrollbar-track {
background: orange;
}
select::-webkit-scrollbar-corner {
background: yellow;
}
select::-webkit-scrollbar-thumb {
background: gray;
}
select::-webkit-scrollbar-track:hover {
background: green;
}
option:hover{
background-color: green;
}
</style>
</head>
<body>
<select id='menu'>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
<option>This is an option</option>
</select>
<script>
let menu = document.getElementById('menu');
function mouseMoveToScrollbar() {
return new Promise(function(resolve, reject) {
if (window.chrome && chrome.gpuBenchmarking) {
let selectElement = internals.pagePopupWindow.global.picker._selectElement;
let innerSelectRect = selectElement.getBoundingClientRect();
let scrollbarX = innerSelectRect.x + innerSelectRect.width - 5;
let scrollbarY = innerSelectRect.y + innerSelectRect.height - 10;
chrome.gpuBenchmarking.pointerActionSequence(
[{
source: 'mouse',
actions: [{name: 'pointerMove', x: scrollbarX, y: scrollbarY}]
}],
resolve);
} else {
reject();
}
});
}
openPicker(menu, ()=>{
mouseMoveToScrollbar().then(()=>{testRunner.notifyDone()})
})
testRunner.waitUntilDone()
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment