Haiku: support rendering dark/light controls

This commit adds support to rendering light controls
in a light document even if the OS is in a dark mode
This is done by picking the default color from the OS
The same is done with dark controls
this is based on the color-scheme css property.

This commit makes controls use the configured OS colors.
Aswell as using the configured OS background color for the :root element

In addition this commit also provides default color values for css constants
based on the OS Settings
This makes light buttons get a dark text per default and dark buttons
get a light text by default.

This commit also enabled hover interactions for controls.

This commit fixes white screens between page loads.

Author: Pascal Abresch

Source/WTF/wtf/PlatformHave.h

@@ -418,7 +418,7 @@
 #define HAVE_FOUNDATION_WITH_SAME_SITE_COOKIE_SUPPORT 1
 #endif
 
-#if PLATFORM(MAC) || PLATFORM(IOS) || PLATFORM(MACCATALYST) || PLATFORM(GTK) || PLATFORM(WPE)
+#if PLATFORM(MAC) || PLATFORM(IOS) || PLATFORM(MACCATALYST) || PLATFORM(GTK) || PLATFORM(WPE) || PLATFORM(HAIKU)
 #define HAVE_OS_DARK_MODE_SUPPORT 1
 #endif
 

Source/WebCore/platform/haiku/RenderThemeHaiku.cpp

@@ -33,11 +33,13 @@
 #include "InputTypeNames.h"
 #include "NotImplemented.h"
 #include "PaintInfo.h"
+#include "RenderBox.h"
 #include "RenderElement.h"
 #include "UserAgentScripts.h"
 #include "UserAgentStyleSheets.h"
 #include <ControlLook.h>
 #include <View.h>
+#include <private/interface/DefaultColors.h>
 
 #include <wtf/text/StringBuilder.h>
 
@@ -80,7 +82,7 @@ bool RenderThemeHaiku::supportsFocusRing(const RenderStyle& style) const
 
 bool RenderThemeHaiku::paintSliderTrack(const RenderObject& object, const PaintInfo& info, const IntRect& intRect)
 {
-    rgb_color base = ui_color(B_PANEL_BACKGROUND_COLOR);
+    rgb_color base = colorForValue(B_CONTROL_BACKGROUND_COLOR, object.useDarkAppearance());
     rgb_color background = base;
     	// TODO: From PaintInfo?
     BRect rect = intRect;
@@ -156,7 +158,7 @@ bool RenderThemeHaiku::supportsDataListUI(const AtomString& type) const
 
 bool RenderThemeHaiku::paintSliderThumb(const RenderObject& object, const PaintInfo& info, const IntRect& intRect)
 {
-    rgb_color base = ui_color(B_PANEL_BACKGROUND_COLOR);
+    rgb_color base = colorForValue(B_CONTROL_BACKGROUND_COLOR, object.useDarkAppearance());
     BRect rect = intRect;
     BView* view = info.context().platformContext();
     unsigned flags = flagsForObject(object);
@@ -201,7 +203,7 @@ bool RenderThemeHaiku::paintCheckbox(const RenderObject& object, const PaintInfo
     if (!be_control_look)
         return true;
 
-    rgb_color base = ui_color(B_PANEL_BACKGROUND_COLOR);
+    rgb_color base = colorForValue(B_CONTROL_BACKGROUND_COLOR, object.useDarkAppearance());
     BRect rect = floatRect;
     BView* view = info.context().platformContext();
     unsigned flags = flagsForObject(object);
@@ -237,7 +239,7 @@ bool RenderThemeHaiku::paintRadio(const RenderObject& object, const PaintInfo& i
     if (!be_control_look)
         return true;
 
-    rgb_color base = ui_color(B_PANEL_BACKGROUND_COLOR);
+    rgb_color base = colorForValue(B_CONTROL_BACKGROUND_COLOR, object.useDarkAppearance());
     BRect rect = floatRect;
     BView* view = info.context().platformContext();
     unsigned flags = flagsForObject(object);
@@ -262,7 +264,7 @@ bool RenderThemeHaiku::paintButton(const RenderObject& object, const PaintInfo&
     if (!be_control_look)
         return true;
 
-    rgb_color base = ui_color(B_PANEL_BACKGROUND_COLOR);
+    rgb_color base = colorForValue(B_CONTROL_BACKGROUND_COLOR, object.useDarkAppearance());
     rgb_color background = base;
         // TODO: From PaintInfo?
     BRect rect = intRect;
@@ -293,7 +295,7 @@ bool RenderThemeHaiku::paintTextField(const RenderObject& object, const PaintInf
     if (!be_control_look)
         return true;
 
-    rgb_color base = ui_color(B_PANEL_BACKGROUND_COLOR);
+    rgb_color base = colorForValue(B_CONTROL_BACKGROUND_COLOR, object.useDarkAppearance());
     //rgb_color background = base;
         // TODO: From PaintInfo?
     BRect rect(intRect);
@@ -321,7 +323,7 @@ void RenderThemeHaiku::adjustMenuListStyle(RenderStyle& style, const Element* el
     adjustMenuListButtonStyle(style, element);
 }
 
-void RenderThemeHaiku::adjustMenuListButtonStyle(RenderStyle& style, const Element* element) const
+void RenderThemeHaiku::adjustMenuListButtonStyle(RenderStyle& style, const Element*) const
 {
     style.resetBorder();
     style.resetBorderRadius();
@@ -352,21 +354,19 @@ void RenderThemeHaiku::paintMenuListButtonDecorations(const RenderBox& object, c
     if (!be_control_look)
         return;
 
-    rgb_color base = ui_color(B_PANEL_BACKGROUND_COLOR);
+    rgb_color base = colorForValue(B_CONTROL_BACKGROUND_COLOR, object.firstChild()->useDarkAppearance());
         // TODO get the color from PaintInfo?
     BRect rect = floatRect;
     BView* view = info.context().platformContext();
-    unsigned flags = BControlLook::B_BLEND_FRAME;
-        // TODO unfortunately we don't get access to the RenderObject here so
-        // we can't use flagsForObject(object) & ~BControlLook::B_CLICKED;
-
+    unsigned flags = flagsForObject(*object.firstChild()) & ~BControlLook::B_CLICKED;
+    
     view->PushState();
     be_control_look->DrawMenuFieldFrame(view, rect, rect, base, base, flags);
     be_control_look->DrawMenuFieldBackground(view, rect, rect, base, true, flags);
     view->PopState();
 }
 
-bool RenderThemeHaiku::paintMenuList(const RenderObject& object, const PaintInfo& info, const FloatRect& intRect)
+bool RenderThemeHaiku::paintMenuList(const RenderObject&, const PaintInfo&, const FloatRect&)
 {
     // This is never called: the list is handled natively as a BMenu.
     return true;
@@ -383,7 +383,79 @@ unsigned RenderThemeHaiku::flagsForObject(const RenderObject& object) const
     	flags |= BControlLook::B_CLICKED;
     if (isChecked(object))
     	flags |= BControlLook::B_ACTIVATED;
+    if (isHovered(object))
+        flags |= BControlLook::B_HOVER;
 	return flags;
 }
 
+
+rgb_color RenderThemeHaiku::colorForValue(color_which colorConstant, bool useDarkAppearance) const
+{
+    rgb_color systemColor = ui_color(B_DOCUMENT_BACKGROUND_COLOR);
+    if (useDarkAppearance) {
+        if (systemColor.Brightness() > 127) // system is in light mode, but we need a dark color
+            return BPrivate::GetSystemColor(colorConstant, true);
+    } else {
+        if (systemColor.Brightness() < 127) // system is in dark mode but we need a light color
+            return BPrivate::GetSystemColor(colorConstant, false);
+    }
+    return ui_color(colorConstant);
+}
+
+
+Color RenderThemeHaiku::systemColor(CSSValueID cssValueID, OptionSet<StyleColorOptions> options) const
+{
+    const bool useDarkAppearance = options.contains(StyleColorOptions::UseDarkAppearance);
+
+    switch (cssValueID) {
+    case CSSValueButtonface:
+        return colorForValue(B_CONTROL_BACKGROUND_COLOR, useDarkAppearance);
+
+    // Doesn't exist?
+    //case CSSValueButtonborder:
+    //    return colorForValue(B_CONTROL_BORDER_COLOR, useDarkAppearence);
+
+    case CSSValueActivebuttontext:
+    case CSSValueButtontext:
+        return colorForValue(B_CONTROL_TEXT_COLOR, useDarkAppearance);
+
+    case CSSValueField:
+    case CSSValueCanvas:
+    case CSSValueWindow:
+        return colorForValue(B_DOCUMENT_BACKGROUND_COLOR, useDarkAppearance);
+
+    case CSSValueCanvastext:
+    case CSSValueFieldtext:
+        return colorForValue(B_DOCUMENT_TEXT_COLOR, useDarkAppearance);
+
+    case CSSValueWebkitFocusRingColor:
+    case CSSValueActiveborder:
+    case CSSValueHighlight:
+        return colorForValue(B_CONTROL_HIGHLIGHT_COLOR, useDarkAppearance);
+
+    case CSSValueHighlighttext:
+        return colorForValue(B_CONTROL_TEXT_COLOR, useDarkAppearance);
+
+    case CSSValueWebkitLink:
+    case CSSValueLinktext:
+        return colorForValue(B_LINK_TEXT_COLOR, useDarkAppearance);
+
+    case CSSValueVisitedtext:
+        return colorForValue(B_LINK_VISITED_COLOR, useDarkAppearance);
+
+    // case CSSValueWebkitActivetext:
+    case CSSValueWebkitActivelink:
+        return colorForValue(B_LINK_ACTIVE_COLOR, useDarkAppearance);
+
+    /* is there any haiku colors that make sense to use here?
+    case CSSValueSelecteditem:
+    case CSSValueSelecteditemtext:
+    case CSSValueMark:
+    case CSSValueMarkText:
+    */
+    default:
+        return RenderTheme::systemColor(cssValueID, options);
+    }
+}
+
 } // namespace WebCore

Source/WebCore/platform/haiku/RenderThemeHaiku.h

@@ -91,8 +91,13 @@ class RenderThemeHaiku : public RenderTheme {
 
     bool paintSliderThumb(const RenderObject&, const PaintInfo&, const IntRect&) override;
 
+    Color systemColor(CSSValueID, OptionSet<StyleColorOptions>) const override;
+
 private:
 	unsigned flagsForObject(const RenderObject&) const;
+    rgb_color colorForControl(const RenderObject&) const;
+    rgb_color colorForValue(color_which, bool useDarkAppearance) const;
+
 };
 
 } // namespace WebCore

Source/WebCore/platform/haiku/ScrollbarThemeHaiku.cpp

@@ -30,9 +30,11 @@
 
 #include "GraphicsContext.h"
 #include "Scrollbar.h"
+#include "ScrollableArea.h"
 #include <ControlLook.h>
 #include <InterfaceDefs.h>
 #include <Shape.h>
+#include <private/interface/DefaultColors.h>
 
 
 static int buttonWidth(int scrollbarWidth, int thickness)
@@ -126,15 +128,17 @@ IntRect ScrollbarThemeHaiku::trackRect(Scrollbar& scrollbar, bool)
     return IntRect(scrollbar.x(), scrollbar.y() + thickness, thickness, scrollbar.height() - 2 * thickness - 1);
 }
 
-void ScrollbarThemeHaiku::paintScrollCorner(ScrollableArea&, GraphicsContext& context, const IntRect& rect)
+void ScrollbarThemeHaiku::paintScrollCorner(ScrollableArea& scrollArea, GraphicsContext& context, const IntRect& rect)
 {
     if (rect.width() == 0 || rect.height() == 0)
         return;
 
     BRect drawRect = BRect(rect);
     BView* view = context.platformContext();
     view->PushState();
-    rgb_color base = ui_color(B_PANEL_BACKGROUND_COLOR);
+    rgb_color base = colorForScrollbar(B_CONTROL_BACKGROUND_COLOR,
+        scrollArea.useDarkAppearanceForScrollbars());
+ 
     if (!m_drawOuterFrame) {
         view->SetHighColor(tint_color(base, B_DARKEN_2_TINT));
         view->StrokeLine(drawRect.LeftBottom(), drawRect.LeftTop());
@@ -153,7 +157,8 @@ void ScrollbarThemeHaiku::paintScrollbarBackground(GraphicsContext& context, Scr
     if (!be_control_look)
         return;
 
-    rgb_color base = ui_color(B_PANEL_BACKGROUND_COLOR);
+    rgb_color base = colorForScrollbar(B_CONTROL_BACKGROUND_COLOR,
+        scrollbar.scrollableArea().useDarkAppearanceForScrollbars());
     BRect rect = trackRect(scrollbar, false);
     BView* view = context.platformContext();
     view->SetHighColor(tint_color(base, B_DARKEN_2_TINT));
@@ -196,7 +201,8 @@ void ScrollbarThemeHaiku::paintButton(GraphicsContext& context, Scrollbar& scrol
     BView* view = context.platformContext();
        bool down = scrollbar.pressedPart() == part;
 
-    rgb_color base = ui_color(B_PANEL_BACKGROUND_COLOR);
+    rgb_color base = colorForScrollbar(B_CONTROL_BACKGROUND_COLOR,
+        scrollbar.scrollableArea().useDarkAppearanceForScrollbars());
     rgb_color dark2 = tint_color(base, B_DARKEN_2_TINT);
 
     enum orientation orientation;
@@ -236,7 +242,8 @@ void ScrollbarThemeHaiku::paintThumb(GraphicsContext& context, Scrollbar& scroll
 
     BRect drawRect = BRect(rect);
     BView* view = context.platformContext();
-    rgb_color base = ui_color(B_SCROLL_BAR_THUMB_COLOR);
+    rgb_color base = colorForScrollbar(B_SCROLL_BAR_THUMB_COLOR,
+        scrollbar.scrollableArea().useDarkAppearanceForScrollbars());
     rgb_color dark2 = tint_color(base, B_DARKEN_2_TINT);
     rgb_color dark3 = tint_color(base, B_DARKEN_3_TINT);
 
@@ -274,6 +281,18 @@ void ScrollbarThemeHaiku::paintThumb(GraphicsContext& context, Scrollbar& scroll
     view->PopState();
 }
 
+rgb_color ScrollbarThemeHaiku::colorForScrollbar(color_which controlColor, bool darkMode) const
+{
+    rgb_color systemColor = ui_color(B_DOCUMENT_BACKGROUND_COLOR);
+    if (darkMode) {
+        if (systemColor.Brightness() > 127) // system is in light mode, but we need dark
+            return BPrivate::GetSystemColor(controlColor, true);
+    } else {
+        if (systemColor.Brightness() < 127) // system is in dark mode but we need light
+            return BPrivate::GetSystemColor(controlColor, false);
+    }
+    return ui_color(controlColor);
+}
 
 } // namespace WebCore
 

Source/WebCore/platform/haiku/ScrollbarThemeHaiku.h

@@ -55,6 +55,7 @@ class ScrollbarThemeHaiku : public ScrollbarThemeComposite {
 
 private:
     bool m_drawOuterFrame;
+    rgb_color colorForScrollbar(color_which base, const bool darkMode) const;
 };
 
 }

Source/WebKitLegacy/haiku/API/WebView.cpp

@@ -94,6 +94,10 @@ BWebView::BWebView(const char* name, BPrivate::Network::BUrlContext* urlContext)
     rgb_color background = ui_color(B_DOCUMENT_BACKGROUND_COLOR);
     if (background.Brightness() < 127)
         fWebPage->page()->effectiveAppearanceDidChange(true, false);
+
+    // doesn't seem to affect the "background" for css, but it does fix the glaring
+    // white screen between page loads (or when no page is open)
+    fWebPage->page()->mainFrame().view()->setBaseBackgroundColor(background);
 }
 
 BWebView::~BWebView()