Bug 238751 – [css-ui] Hide input[type=search] icons when appearance: textfield is set

• Status: RESOLVED
• Resolution: FIXED
• Component: Forms

[Tim Nguyen (:ntim)]

https://drafts.csswg.org/css-ui-4/#valdef-appearance-textfield

textfield
For input elements where the type attribute is in the Search state, the element is rendered as a "normal" text entry widget, similar to an input element where the type attribute is in the Text state.
For all other elements, this value has the same effect as auto.

[Radar WebKit Bug Importer]

<rdar://problem/91253463>

[Tim Nguyen (:ntim)]

This is a good starting point to hide the clear button:

diff --git a/Source/WebCore/html/shadow/TextControlInnerElements.cpp b/Source/WebCore/html/shadow/TextControlInnerElements.cpp
index c0e8fee503fe..0098997ddc63 100644
--- a/Source/WebCore/html/shadow/TextControlInnerElements.cpp
+++ b/Source/WebCore/html/shadow/TextControlInnerElements.cpp
@@ -306,11 +306,13 @@ Ref<SearchFieldCancelButtonElement> SearchFieldCancelButtonElement::create(Docum
     return element;
 }
 
-std::optional<Style::ElementStyle> SearchFieldCancelButtonElement::resolveCustomStyle(const Style::ResolutionContext& resolutionContext, const RenderStyle*)
+std::optional<Style::ElementStyle> SearchFieldCancelButtonElement::resolveCustomStyle(const Style::ResolutionContext& resolutionContext, const RenderStyle* shadowHostStyle)
 {
     auto elementStyle = resolveStyle(resolutionContext);
     auto& inputElement = downcast<HTMLInputElement>(*shadowHost());
     elementStyle.renderStyle->setVisibility(elementStyle.renderStyle->visibility() == Visibility::Hidden || inputElement.value().isEmpty() ? Visibility::Hidden : Visibility::Visible);
+    if (shadowHostStyle->effectiveAppearance() == TextFieldPart)
+        elementStyle.renderStyle->setEffectiveDisplay(DisplayType::None);
     return elementStyle;
 }



Remaining issues are:
- width is too large compared to <input type="text"> (not quite sure why)
- focusring offset is too large compared to <input type="text"> (html.css sets input[type=text] outline-offset to -2px, but [type=search] to 0, outline-offset needs to be tied to appearance: textfield instead of input[type])

(In reply to Tim Nguyen (:ntim) from comment #2)
> This is a good starting point to hide the clear button:
> 
> diff --git a/Source/WebCore/html/shadow/TextControlInnerElements.cpp
> b/Source/WebCore/html/shadow/TextControlInnerElements.cpp
> index c0e8fee503fe..0098997ddc63 100644
> --- a/Source/WebCore/html/shadow/TextControlInnerElements.cpp
> +++ b/Source/WebCore/html/shadow/TextControlInnerElements.cpp
> @@ -306,11 +306,13 @@ Ref<SearchFieldCancelButtonElement>
> SearchFieldCancelButtonElement::create(Docum
>      return element;
>  }
>  
> -std::optional<Style::ElementStyle>
> SearchFieldCancelButtonElement::resolveCustomStyle(const
> Style::ResolutionContext& resolutionContext, const RenderStyle*)
> +std::optional<Style::ElementStyle>
> SearchFieldCancelButtonElement::resolveCustomStyle(const
> Style::ResolutionContext& resolutionContext, const RenderStyle*
> shadowHostStyle)
>  {
>      auto elementStyle = resolveStyle(resolutionContext);
>      auto& inputElement = downcast<HTMLInputElement>(*shadowHost());
>     
> elementStyle.renderStyle->setVisibility(elementStyle.renderStyle-
> >visibility() == Visibility::Hidden || inputElement.value().isEmpty() ?
> Visibility::Hidden : Visibility::Visible);
> +    if (shadowHostStyle->effectiveAppearance() == TextFieldPart)
> +        elementStyle.renderStyle->setEffectiveDisplay(DisplayType::None);
>      return elementStyle;
>  }
> 
> 
> 
> Remaining issues are:
> - width is too large compared to <input type="text"> (not quite sure why)
> - focusring offset is too large compared to <input type="text"> (html.css
> sets input[type=text] outline-offset to -2px, but [type=search] to 0,
> outline-offset needs to be tied to appearance: textfield instead of
> input[type])

I figure the remaining issues might still be related to the SearchFieldCancelButtonElement.  The extra width seems caused by the SearchFieldCancelButtonElement. When we do "elementStyle.renderStyle->setEffectiveDisplay(DisplayType::None);", is it supposed to re-rendering the box or just simply make the CancelButton invisible (but it still exists)? I'm not familiar with this code...

[zalan]

(In reply to zsun from comment #3)
> (In reply to Tim Nguyen (:ntim) from comment #2)
> > This is a good starting point to hide the clear button:
> > 
> > diff --git a/Source/WebCore/html/shadow/TextControlInnerElements.cpp
> > b/Source/WebCore/html/shadow/TextControlInnerElements.cpp
> > index c0e8fee503fe..0098997ddc63 100644
> > --- a/Source/WebCore/html/shadow/TextControlInnerElements.cpp
> > +++ b/Source/WebCore/html/shadow/TextControlInnerElements.cpp
> > @@ -306,11 +306,13 @@ Ref<SearchFieldCancelButtonElement>
> > SearchFieldCancelButtonElement::create(Docum
> >      return element;
> >  }
> >  
> > -std::optional<Style::ElementStyle>
> > SearchFieldCancelButtonElement::resolveCustomStyle(const
> > Style::ResolutionContext& resolutionContext, const RenderStyle*)
> > +std::optional<Style::ElementStyle>
> > SearchFieldCancelButtonElement::resolveCustomStyle(const
> > Style::ResolutionContext& resolutionContext, const RenderStyle*
> > shadowHostStyle)
> >  {
> >      auto elementStyle = resolveStyle(resolutionContext);
> >      auto& inputElement = downcast<HTMLInputElement>(*shadowHost());
> >     
> > elementStyle.renderStyle->setVisibility(elementStyle.renderStyle-
> > >visibility() == Visibility::Hidden || inputElement.value().isEmpty() ?
> > Visibility::Hidden : Visibility::Visible);
> > +    if (shadowHostStyle->effectiveAppearance() == TextFieldPart)
> > +        elementStyle.renderStyle->setEffectiveDisplay(DisplayType::None);
> >      return elementStyle;
> >  }
> > 
> > 
> > 
> > Remaining issues are:
> > - width is too large compared to <input type="text"> (not quite sure why)
> > - focusring offset is too large compared to <input type="text"> (html.css
> > sets input[type=text] outline-offset to -2px, but [type=search] to 0,
> > outline-offset needs to be tied to appearance: textfield instead of
> > input[type])
> 
> I figure the remaining issues might still be related to the
> SearchFieldCancelButtonElement.  The extra width seems caused by the
> SearchFieldCancelButtonElement. When we do
> "elementStyle.renderStyle->setEffectiveDisplay(DisplayType::None);", is it
> supposed to re-rendering the box or just simply make the CancelButton
> invisible (but it still exists)? I'm not familiar with this code...
Not sure what you mean by re-rendering and/or invisible but display:none means no associated renderer which implies no geometry (i.e. does not take up any space. it is indeed invisible but not in the sense of CSS visibility but more like "it does not participate in layout at all". When an element gains "display: none", the associated renderer needs to be detached/destroyed and layout to be issued).

[Tim Nguyen (:ntim)]

Pull request: https://github.com/WebKit/WebKit/pull/895

[EWS]

Committed 253691@main (d08a6f782660): <https://commits.webkit.org/253691@main>

Reviewed commits have been landed. Closing PR #895 and removing active labels.