Skip to content

GitLab

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

Implement the internal popup should be affected by custom scrollbar tags 

The custom scrollbar options are available on the scrollable.
But the internal popup (used html_select) was not affected by pseudo custom scrollbar tags.
In this change, the pseudo styles from owner_element.GetLayoutObject()
->GetCachedPseudoElementStyle(...) and CSSValueFromComputedStyle(...) were applied to serialize CSS.
And that would be appended to the SharedBuffer data which will be used for popup webview.

Bug: 1076508
Change-Id: I47dcf88017e3cc1d1d03a1a2d87d49fffed4a057
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2364316
Commit-Queue: Mason Freed <masonfreed@chromium.org>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#803928}
parent 8dfa5a92
Hide whitespace changes
Inline Side-by-side
Showing with 339 additions and 0 deletions
third_party/blink/renderer/core/html/forms/internal_popup_menu.cc
View file @ 2f5d1202
......@@ -50,6 +50,15 @@ const char* TextTransformToString(ETextTransform transform) {
return getValueName(PlatformEnumToCSSValueID(transform));
}
const String SerializeComputedStyleForProperty(const ComputedStyle& style,
CSSPropertyID id) {
const CSSProperty& property = CSSProperty::Get(id);
const CSSValue* value =
property.CSSValueFromComputedStyle(style, nullptr, false);
return String::Format("%s : %s;\n", property.GetPropertyName(),
value->CssText().Utf8().c_str());
}
} // anonymous namespace
class PopupMenuCSSFontSelector : public CSSFontSelector,
......@@ -225,6 +234,33 @@ void InternalPopupMenu::WriteDocument(SharedBuffer* data) {
owner_element.GetDocument().GetFrame(), 1.f);
PagePopupClient::AddString(
"<!DOCTYPE html><head><meta charset='UTF-8'><style>\n", data);
LayoutObject* owner_layout = owner_element.GetLayoutObject();
if (const ComputedStyle* style =
owner_layout->GetCachedPseudoElementStyle(kPseudoIdScrollbar)) {
AppendOwnerElementPseudoStyles("select::-webkit-scrollbar", data, *style);
}
if (const ComputedStyle* style =
owner_layout->GetCachedPseudoElementStyle(kPseudoIdScrollbarThumb)) {
AppendOwnerElementPseudoStyles("select::-webkit-scrollbar-thumb", data,
*style);
}
if (const ComputedStyle* style =
owner_layout->GetCachedPseudoElementStyle(kPseudoIdScrollbarTrack)) {
AppendOwnerElementPseudoStyles("select::-webkit-scrollbar-track", data,
*style);
}
if (const ComputedStyle* style = owner_layout->GetCachedPseudoElementStyle(
kPseudoIdScrollbarTrackPiece)) {
AppendOwnerElementPseudoStyles("select::-webkit-scrollbar-track-piece",
data, *style);
}
if (const ComputedStyle* style =
owner_layout->GetCachedPseudoElementStyle(kPseudoIdScrollbarCorner)) {
AppendOwnerElementPseudoStyles("select::-webkit-scrollbar-corner", data,
*style);
}
data->Append(ChooserResourceLoader::GetPickerCommonStyleSheet());
data->Append(ChooserResourceLoader::GetListPickerStyleSheet());
if (!RuntimeEnabledFeatures::ForceTallerSelectPopupEnabled())
......@@ -403,6 +439,27 @@ void InternalPopupMenu::AddSeparator(ItemIterationContext& context,
PagePopupClient::AddString("},\n", data);
}
void InternalPopupMenu::AppendOwnerElementPseudoStyles(
const String& target,
SharedBuffer* data,
const ComputedStyle& style) {
PagePopupClient::AddString(target + "{ \n", data);
const CSSPropertyID serialize_targets[] = {
CSSPropertyID::kDisplay, CSSPropertyID::kBackgroundColor,
CSSPropertyID::kWidth, CSSPropertyID::kBorderBottom,
CSSPropertyID::kBorderLeft, CSSPropertyID::kBorderRight,
CSSPropertyID::kBorderTop, CSSPropertyID::kBorderRadius,
CSSPropertyID::kBoxShadow};
for (CSSPropertyID id : serialize_targets) {
PagePopupClient::AddString(SerializeComputedStyleForProperty(style, id),
data);
}
PagePopupClient::AddString("}\n", data);
}
CSSFontSelector* InternalPopupMenu::CreateCSSFontSelector(
Document& popup_document) {
Document& owner_document = OwnerElement().GetDocument();
......
third_party/blink/renderer/core/html/forms/internal_popup_menu.h
View file @ 2f5d1202
......@@ -6,6 +6,7 @@
#define THIRD_PARTY_BLINK_RENDERER_CORE_HTML_FORMS_INTERNAL_POPUP_MENU_H_
#include "third_party/blink/renderer/core/core_export.h"
#include "third_party/blink/renderer/core/dom/node_computed_style.h"
#include "third_party/blink/renderer/core/html/forms/popup_menu.h"
#include "third_party/blink/renderer/core/page/page_popup_client.h"
......@@ -43,6 +44,10 @@ class CORE_EXPORT InternalPopupMenu final : public PopupMenu,
void AddSeparator(ItemIterationContext&, HTMLHRElement&);
void AddElementStyle(ItemIterationContext&, HTMLElement&);
void AppendOwnerElementPseudoStyles(const String&,
SharedBuffer*,
const ComputedStyle&);
// PopupMenu functions:
void Show() override;
void Hide() override;
......
third_party/blink/web_tests/fast/forms/select-popup/popup-menu-appearance-custom-scrollbar-display-none.html 0 → 100644
View file @ 2f5d1202
<!DOCTYPE html>
<html>
<head>
<script>
window.enablePixelTesting = true;
</script>
<script src="../../resources/ahem.js"></script>
<script src="../resources/picker-common.js"></script>
<style>
select:focus {
outline-width: 0;
}
select {
width: 200px;
font: 10px Ahem;
-webkit-appearance: none;
background-color: white;
}
select::-webkit-scrollbar {
display: none;
width: 15px;
}
</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 >
</select>
<script>
openPickerAppearanceOnly(document.getElementById('menu'), () => testRunner.notifyDone());
</script>
</body>
</html>
\ No newline at end of file
third_party/blink/web_tests/fast/forms/select-popup/popup-menu-appearance-custom-scrollbar-thumb-display-none.html 0 → 100644
View file @ 2f5d1202
<!DOCTYPE html>
<html>
<head>
<script>
window.enablePixelTesting = true;
</script>
<script src="../../resources/ahem.js"></script>
<script src="../resources/picker-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: 15px;
}
select::-webkit-scrollbar-track {
background: orange;
}
select::-webkit-scrollbar-thumb {
background: gray;
display: none;
}
</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>
</select>
<script>
openPickerAppearanceOnly(document.getElementById('menu'), () => testRunner.notifyDone());
</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 0 → 100644
View file @ 2f5d1202
<!DOCTYPE html>
<html>
<head>
<script>
window.enablePixelTesting = true;
</script>
<script src="../../resources/ahem.js"></script>
<script src="../resources/picker-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: 15px;
}
select::-webkit-scrollbar-track {
background: orange;
display: none;
}
select::-webkit-scrollbar-thumb {
background: gray;
}
</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 >
</select>
<script>
openPickerAppearanceOnly(document.getElementById('menu'), () => testRunner.notifyDone());
</script>
</body>
</html>
\ No newline at end of file
third_party/blink/web_tests/fast/forms/select-popup/popup-menu-appearance-custom-scrollbar.html 0 → 100644
View file @ 2f5d1202
<!DOCTYPE html>
<html>
<head>
<script>
window.enablePixelTesting = true;
</script>
<script src="../resources/picker-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: 20px;
}
select::-webkit-scrollbar-track {
border-width: 2px;
border-color: gold;
border-style: solid;
box-shadow: 0 0 1px 1px inset blue;
border-radius: 0px;
background: orange;
}
select::-webkit-scrollbar-track-piece {
border-width: 2px;
border-color: fuchsia;
border-style: solid dashed;
box-shadow: 0 0 4px 4px inset greenyellow;
border-radius: 30px;
background: ivory;
}
select::-webkit-scrollbar-corner {
border-width: 3px;
border-color: brown;
border-style: double;
box-shadow: 0 0 4px 1px inset pink;
border-radius: 10px 0 20px 0;
background: yellow;
}
select::-webkit-scrollbar-thumb {
border-width: 3px;
border-color: black;
border-style: solid;
border-radius: 10px;
background: gray;
border-radius: 0 20px 0 10px;
box-shadow: -1px 0 4px 1px inset white;
}
</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>
openPickerAppearanceOnly(document.getElementById('menu'), () => testRunner.notifyDone());
</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