Title: [274473] trunk/Source/WebCore
Revision
274473
Author
akeer...@apple.com
Date
2021-03-16 06:42:56 -0700 (Tue, 16 Mar 2021)

Log Message

[iOS][FCR] Add pressed state for button-like controls
https://bugs.webkit.org/show_bug.cgi?id=223208
<rdar://problem/72399087>

Reviewed by Wenson Hsieh.

Add a pressed state for buttons, checkboxes, radio buttons, select
elements and date inputs. The pressed state has a 75% opacity level
relative to the default state.

* css/html.css:

Explicitly set the default active style to opacity: initial to ensure
styles are adjusted when the element is pressed. Note that we do not
set the default to 75% to avoid unexpected application of the new
style.

(input:matches([type="button"], [type="submit"], [type="reset"]):active, input[type="file"]::file-selector-button:active, button:active):
(input:matches([type="checkbox"], [type="radio"]):active):
(select:active):
* rendering/RenderThemeIOS.h:
* rendering/RenderThemeIOS.mm:

The style adjustment is only performed if the -webkit-appearance property
is not set to none. This ensures we do not override the opacity for
custom styled form controls.

(WebCore::RenderThemeIOS::adjustPressedStyle const):
(WebCore::RenderThemeIOS::adjustCheckboxStyle const):
(WebCore::RenderThemeIOS::adjustRadioStyle const):
(WebCore::RenderThemeIOS::adjustMenuListButtonStyle const):
(WebCore::RenderThemeIOS::adjustButtonStyle const):

Modified Paths

Diff

Modified: trunk/Source/WebCore/ChangeLog (274472 => 274473)


--- trunk/Source/WebCore/ChangeLog	2021-03-16 12:20:31 UTC (rev 274472)
+++ trunk/Source/WebCore/ChangeLog	2021-03-16 13:42:56 UTC (rev 274473)
@@ -1,3 +1,38 @@
+2021-03-16  Aditya Keerthi  <akeer...@apple.com>
+
+        [iOS][FCR] Add pressed state for button-like controls
+        https://bugs.webkit.org/show_bug.cgi?id=223208
+        <rdar://problem/72399087>
+
+        Reviewed by Wenson Hsieh.
+
+        Add a pressed state for buttons, checkboxes, radio buttons, select
+        elements and date inputs. The pressed state has a 75% opacity level
+        relative to the default state.
+
+        * css/html.css:
+
+        Explicitly set the default active style to opacity: initial to ensure
+        styles are adjusted when the element is pressed. Note that we do not
+        set the default to 75% to avoid unexpected application of the new
+        style.
+
+        (input:matches([type="button"], [type="submit"], [type="reset"]):active, input[type="file"]::file-selector-button:active, button:active):
+        (input:matches([type="checkbox"], [type="radio"]):active):
+        (select:active):
+        * rendering/RenderThemeIOS.h:
+        * rendering/RenderThemeIOS.mm:
+
+        The style adjustment is only performed if the -webkit-appearance property
+        is not set to none. This ensures we do not override the opacity for
+        custom styled form controls.
+
+        (WebCore::RenderThemeIOS::adjustPressedStyle const):
+        (WebCore::RenderThemeIOS::adjustCheckboxStyle const):
+        (WebCore::RenderThemeIOS::adjustRadioStyle const):
+        (WebCore::RenderThemeIOS::adjustMenuListButtonStyle const):
+        (WebCore::RenderThemeIOS::adjustButtonStyle const):
+
 2021-03-16  Frederic Wang  <fw...@igalia.com>
 
         Crash in makeBoundaryPoint via ReplaceSelectionCommand::insertedContentRange

Modified: trunk/Source/WebCore/css/html.css (274472 => 274473)


--- trunk/Source/WebCore/css/html.css	2021-03-16 12:20:31 UTC (rev 274472)
+++ trunk/Source/WebCore/css/html.css	2021-03-16 13:42:56 UTC (rev 274473)
@@ -867,7 +867,11 @@
 #endif
 
 input:matches([type="button"], [type="submit"], [type="reset"]):active, input[type="file"]::file-selector-button:active, button:active {
+#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
+    opacity: initial;
+#else
     color: ActiveButtonText;
+#endif
 }
 
 input[type="range"] {
@@ -1008,6 +1012,10 @@
     opacity: initial;
     background: rgba(0, 0, 0, 0.8);
 }
+
+input:matches([type="checkbox"], [type="radio"]):active {
+    opacity: initial;
+}
 #endif
 
 #if !(defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY)
@@ -1021,6 +1029,10 @@
 select:focus {
     border-color: rgb(17, 46, 135);
 }
+
+select:active {
+    opacity: initial;
+}
 #endif
 
 #if defined(ENABLE_INPUT_TYPE_COLOR) && ENABLE_INPUT_TYPE_COLOR

Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.h (274472 => 274473)


--- trunk/Source/WebCore/rendering/RenderThemeIOS.h	2021-03-16 12:20:31 UTC (rev 274472)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.h	2021-03-16 13:42:56 UTC (rev 274473)
@@ -186,6 +186,8 @@
     void paintMenuListButtonDecorationsWithFormControlRefresh(const RenderBox&, const PaintInfo&, const FloatRect&);
 #endif
 
+    void adjustPressedStyle(RenderStyle&, const Element&) const;
+
     FloatRect addRoundedBorderClip(const RenderObject& box, GraphicsContext&, const IntRect&);
 
     Color systemColor(CSSValueID, OptionSet<StyleColor::Options>) const override;

Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.mm (274472 => 274473)


--- trunk/Source/WebCore/rendering/RenderThemeIOS.mm	2021-03-16 12:20:31 UTC (rev 274472)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.mm	2021-03-16 13:42:56 UTC (rev 274473)
@@ -343,8 +343,19 @@
     return border.rect();
 }
 
-void RenderThemeIOS::adjustCheckboxStyle(RenderStyle& style, const Element*) const
+void RenderThemeIOS::adjustPressedStyle(RenderStyle& style, const Element& element) const
 {
+#if ENABLE(IOS_FORM_CONTROL_REFRESH)
+    if (element.document().settings().iOSFormControlRefreshEnabled() && element.active())
+        style.setOpacity(0.75f);
+#endif
+}
+
+void RenderThemeIOS::adjustCheckboxStyle(RenderStyle& style, const Element* element) const
+{
+    if (element)
+        adjustPressedStyle(style, *element);
+
     if (!style.width().isIntrinsicOrAuto() && !style.height().isAuto())
         return;
 
@@ -485,8 +496,11 @@
     return RenderTheme::isControlStyled(style, userAgentStyle);
 }
 
-void RenderThemeIOS::adjustRadioStyle(RenderStyle& style, const Element*) const
+void RenderThemeIOS::adjustRadioStyle(RenderStyle& style, const Element* element) const
 {
+    if (element)
+        adjustPressedStyle(style, *element);
+
     if (!style.width().isIntrinsicOrAuto() && !style.height().isAuto())
         return;
 
@@ -696,6 +710,8 @@
     if (!element)
         return;
 
+    adjustPressedStyle(style, *element);
+
     // Enforce some default styles in the case that this is a non-multiple <select> element,
     // or a date input. We don't force these if this is just an element with
     // "-webkit-appearance: menulist-button".
@@ -1108,6 +1124,8 @@
     if (!element)
         return;
 
+    adjustPressedStyle(style, *element);
+
     RenderBox* box = element->renderBox();
     if (!box)
         return;
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to