- Revision
- 256724
- Author
- [email protected]
- Date
- 2020-02-17 01:07:52 -0800 (Mon, 17 Feb 2020)
Log Message
[WPE] Use custom theme style to render text fields
https://bugs.webkit.org/show_bug.cgi?id=207379
Reviewed by Adrian Perez de Castro.
This includes text entries, text areas and search fields. The search field icons are rendered using an extra
default style sheet for the theme, using Adwaita svg icons in the CSS.
* PlatformWPE.cmake:
* css/themeAdwaita.css: Added.
(input[type="search"]::-webkit-search-results-button,):
(input[type="search"]::-webkit-search-results-button:hover,):
(input[type="search"]::-webkit-search-cancel-button):
(body[dir="rtl"] input[type="search"]::-webkit-search-cancel-button):
(input[type="search"]::-webkit-search-cancel-button:hover):
* platform/wpe/RenderThemeWPE.cpp:
(WebCore::RenderThemeWPE::supportsFocusRing const): Return true for TextFieldPart, TextAreaPart and SearchFieldPart.
(WebCore::RenderThemeWPE::extraDefaultStyleSheet): Return themeAdwaita.css.
(WebCore::RenderThemeWPE::paintTextField):
(WebCore::RenderThemeWPE::paintTextArea):
(WebCore::RenderThemeWPE::paintSearchField):
* platform/wpe/RenderThemeWPE.h:
Modified Paths
Added Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (256723 => 256724)
--- trunk/Source/WebCore/ChangeLog 2020-02-17 09:03:25 UTC (rev 256723)
+++ trunk/Source/WebCore/ChangeLog 2020-02-17 09:07:52 UTC (rev 256724)
@@ -1,3 +1,28 @@
+2020-02-17 Carlos Garcia Campos <[email protected]>
+
+ [WPE] Use custom theme style to render text fields
+ https://bugs.webkit.org/show_bug.cgi?id=207379
+
+ Reviewed by Adrian Perez de Castro.
+
+ This includes text entries, text areas and search fields. The search field icons are rendered using an extra
+ default style sheet for the theme, using Adwaita svg icons in the CSS.
+
+ * PlatformWPE.cmake:
+ * css/themeAdwaita.css: Added.
+ (input[type="search"]::-webkit-search-results-button,):
+ (input[type="search"]::-webkit-search-results-button:hover,):
+ (input[type="search"]::-webkit-search-cancel-button):
+ (body[dir="rtl"] input[type="search"]::-webkit-search-cancel-button):
+ (input[type="search"]::-webkit-search-cancel-button:hover):
+ * platform/wpe/RenderThemeWPE.cpp:
+ (WebCore::RenderThemeWPE::supportsFocusRing const): Return true for TextFieldPart, TextAreaPart and SearchFieldPart.
+ (WebCore::RenderThemeWPE::extraDefaultStyleSheet): Return themeAdwaita.css.
+ (WebCore::RenderThemeWPE::paintTextField):
+ (WebCore::RenderThemeWPE::paintTextArea):
+ (WebCore::RenderThemeWPE::paintSearchField):
+ * platform/wpe/RenderThemeWPE.h:
+
2020-02-16 Peng Liu <[email protected]>
Remove class VideoLayerManager since it is not used
Modified: trunk/Source/WebCore/PlatformWPE.cmake (256723 => 256724)
--- trunk/Source/WebCore/PlatformWPE.cmake 2020-02-17 09:03:25 UTC (rev 256723)
+++ trunk/Source/WebCore/PlatformWPE.cmake 2020-02-17 09:07:52 UTC (rev 256724)
@@ -38,6 +38,7 @@
)
list(APPEND WebCore_USER_AGENT_STYLE_SHEETS
+ ${WEBCORE_DIR}/css/themeAdwaita.css
${WEBCORE_DIR}/Modules/mediacontrols/mediaControlsBase.css
)
Added: trunk/Source/WebCore/css/themeAdwaita.css (0 => 256724)
--- trunk/Source/WebCore/css/themeAdwaita.css (rev 0)
+++ trunk/Source/WebCore/css/themeAdwaita.css 2020-02-17 09:07:52 UTC (rev 256724)
@@ -0,0 +1,62 @@
+/*
+ * Adwaita icons for styling HTML elements
+ *
+ * Copyright (C) 2020 Igalia S.L.
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Library General Public
+ * License as published by the Free Software Foundation; either
+ * version 2 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Library General Public License for more details.
+ *
+ * You should have received a copy of the GNU Library General Public License
+ * along with this library; see the file COPYING.LIB. If not, write to
+ * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
+ * Boston, MA 02110-1301, USA.
+ *
+ */
+
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+ -webkit-appearance: none;
+ width: 1em;
+ height: 1em;
+ content: url("data:image/svg+xml;utf-8, \
+ <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'> \
+ <g color='#000' font-weight='400' font-family='sans-serif' white-space='normal' fill='#474747'> \
+ <path d='M6.508 1C3.48 1 1.002 3.473 1.002 6.5c0 3.026 2.478 5.5 5.506 5.5s5.504-2.474 5.504-5.5c0-3.027-2.476-5.5-5.504-5.5zm0 2a3.486 3.486 0 0 1 3.504 3.5c0 1.944-1.556 3.5-3.504 3.5a3.488 3.488 0 0 1-3.506-3.5C3.002 4.555 4.56 3 6.508 3z' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none' overflow='visible'/> \
+ <path d='M10 8.99a1 1 0 0 0-.695 1.717l4.004 4a1 1 0 1 0 1.414-1.414l-4.004-4A1 1 0 0 0 10 8.99z' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none' overflow='visible'/> \
+ </g> \
+ </svg>");
+}
+
+input[type="search"]::-webkit-search-results-button:hover,
+input[type="search"]::-webkit-search-results-decoration:hover {
+ filter: brightness(10%);
+}
+
+input[type="search"]::-webkit-search-cancel-button {
+ -webkit-appearance: none;
+ width: 1em;
+ height: 1em;
+ content: url("data:image/svg+xml;utf-8, \
+ <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'> \
+ <path d='M6 2L0 8l6 6h9.035A1.03 1.03 0 0 0 16 13V3c0-.53-.346-1-1.009-1zm1 3h1.031c.255.011.51.129.688.313L10 6.593l1.313-1.28c.265-.231.446-.306.687-.313h1v1c0 .286-.034.55-.25.75l-1.281 1.281 1.25 1.25c.188.188.281.454.281.719v1h-1c-.265 0-.53-.093-.719-.281L10 9.438l-1.281 1.28A1.015 1.015 0 0 1 8 11H7v-1c0-.265.093-.53.281-.719l1.282-1.25L7.28 6.75A.909.909 0 0 1 7 6z' style='marker:none' color='#000' overflow='visible' fill='#474747'/> \
+ </svg>");
+}
+
+body[dir="rtl"] input[type="search"]::-webkit-search-cancel-button {
+ -webkit-appearance: none;
+ content: url("data:image/svg+xml;utf-8, \
+ <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'> \
+ <path d='M10 2l6 6-6 6H.965A1.03 1.03 0 0 1 0 13V3c0-.53.346-1 1.009-1zM9 5H7.969a1.04 1.04 0 0 0-.688.313L6 6.593l-1.313-1.28C4.423 5.082 4.242 5.006 4 5H3v1c0 .286.034.55.25.75l1.281 1.281-1.25 1.25A1.015 1.015 0 0 0 3 10v1h1c.265 0 .53-.093.719-.281L6 9.438l1.281 1.28c.188.189.454.282.719.282h1v-1c0-.265-.093-.53-.281-.719l-1.281-1.25 1.28-1.281A.909.909 0 0 0 9 6z' style='marker:none' color='#000' overflow='visible' fill='#474747'/> \
+ </svg>");
+}
+
+input[type="search"]::-webkit-search-cancel-button:hover {
+ filter: brightness(10%);
+}
Modified: trunk/Source/WebCore/platform/wpe/RenderThemeWPE.cpp (256723 => 256724)
--- trunk/Source/WebCore/platform/wpe/RenderThemeWPE.cpp 2020-02-17 09:03:25 UTC (rev 256723)
+++ trunk/Source/WebCore/platform/wpe/RenderThemeWPE.cpp 2020-02-17 09:07:52 UTC (rev 256724)
@@ -40,6 +40,12 @@
namespace WebCore {
+static const int textFieldBorderSize = 1;
+static const Color textFieldBorderColor = makeRGB(205, 199, 194);
+static const Color textFieldBorderActiveColor = makeRGB(52, 132, 228);
+static const Color textFieldBorderDisabledColor = makeRGB(213, 208, 204);
+static const Color textFieldBackgroundColor = makeRGB(255, 255, 255);
+static const Color textFieldBackgroundDisabledColor = makeRGB(252, 252, 252);
static const int focusOffset = 3;
static const unsigned focusLineWidth = 1;
static const Color focusColor = makeRGBA(46, 52, 54, 150);
@@ -63,10 +69,10 @@
switch (style.appearance()) {
case PushButtonPart:
case ButtonPart:
+ return false;
case TextFieldPart:
case TextAreaPart:
case SearchFieldPart:
- return false;
case MenulistPart:
return true;
case RadioPart:
@@ -88,7 +94,7 @@
String RenderThemeWPE::extraDefaultStyleSheet()
{
- return String();
+ return String(themeAdwaitaUserAgentStyleSheet, sizeof(themeAdwaitaUserAgentStyleSheet));
}
#if ENABLE(VIDEO)
@@ -106,6 +112,52 @@
}
#endif
+bool RenderThemeWPE::paintTextField(const RenderObject& renderObject, const PaintInfo& paintInfo, const FloatRect& rect)
+{
+ auto& graphicsContext = paintInfo.context();
+ GraphicsContextStateSaver stateSaver(graphicsContext);
+
+ int borderSize = textFieldBorderSize;
+ if (isEnabled(renderObject) && !isReadOnlyControl(renderObject) && isFocused(renderObject))
+ borderSize *= 2;
+
+ FloatRect fieldRect = rect;
+ FloatSize corner(5, 5);
+ Path path;
+ path.addRoundedRect(fieldRect, corner);
+ fieldRect.inflate(-borderSize);
+ path.addRoundedRect(fieldRect, corner);
+ graphicsContext.setFillRule(WindRule::EvenOdd);
+ if (!isEnabled(renderObject) || isReadOnlyControl(renderObject))
+ graphicsContext.setFillColor(textFieldBorderDisabledColor);
+ else if (isFocused(renderObject))
+ graphicsContext.setFillColor(textFieldBorderActiveColor);
+ else
+ graphicsContext.setFillColor(textFieldBorderColor);
+ graphicsContext.fillPath(path);
+ path.clear();
+
+ path.addRoundedRect(fieldRect, corner);
+ graphicsContext.setFillRule(WindRule::NonZero);
+ if (!isEnabled(renderObject) || isReadOnlyControl(renderObject))
+ graphicsContext.setFillColor(textFieldBackgroundDisabledColor);
+ else
+ graphicsContext.setFillColor(textFieldBackgroundColor);
+ graphicsContext.fillPath(path);
+
+ return false;
+}
+
+bool RenderThemeWPE::paintTextArea(const RenderObject& renderObject, const PaintInfo& paintInfo, const FloatRect& rect)
+{
+ return paintTextField(renderObject, paintInfo, rect);
+}
+
+bool RenderThemeWPE::paintSearchField(const RenderObject& renderObject, const PaintInfo& paintInfo, const IntRect& rect)
+{
+ return paintTextField(renderObject, paintInfo, rect);
+}
+
static void paintFocus(GraphicsContext& graphicsContext, const FloatRect& rect)
{
FloatRect focusRect = rect;
Modified: trunk/Source/WebCore/platform/wpe/RenderThemeWPE.h (256723 => 256724)
--- trunk/Source/WebCore/platform/wpe/RenderThemeWPE.h 2020-02-17 09:03:25 UTC (rev 256723)
+++ trunk/Source/WebCore/platform/wpe/RenderThemeWPE.h 2020-02-17 09:07:52 UTC (rev 256724)
@@ -48,6 +48,10 @@
void updateCachedSystemFontDescription(CSSValueID, FontCascadeDescription&) const override;
+ bool paintTextField(const RenderObject&, const PaintInfo&, const FloatRect&) override;
+ bool paintTextArea(const RenderObject&, const PaintInfo&, const FloatRect&) override;
+ bool paintSearchField(const RenderObject&, const PaintInfo&, const IntRect&) override;
+
bool popsMenuBySpaceOrReturn() const override { return true; }
LengthBox popupInternalPaddingBox(const RenderStyle&) const override;
bool paintMenuList(const RenderObject&, const PaintInfo&, const FloatRect&) override;
