1222881 - Text cut off in Inspector html searchbox

Status: RESOLVED WORKSFORME

(DevTools :: Inspector, defect, P3)

Description

[Hernán Rodriguez Colmeiro (:peregrino)]

Attachment: text cut off in searchbox

While fixing bug 1216569 I saw that something similar was happening in the html section of the inspector, the final words being cut off.

The reason here is that the clear button is part of the search textbox widget and in this cases is just hidden by changing it's visibility. Setting `display: none` causes the width of the textbox to change when entering text so it's not good.

Comment 1

[Hernán Rodriguez Colmeiro (:peregrino)]

Attachment: Make the inspector html searchbox clear icon not cut off placeholder text

Comment 2

[Brian Grinstead [:bgrins]]

Comment on attachment 8684750 [details] [diff] [review]
Make the inspector html searchbox clear icon not cut off placeholder text

Review of attachment 8684750 [details] [diff] [review]:
-----------------------------------------------------------------

I've checked into this hoping there was a simple way to handle this by somehow hiding the icons and simultaneously increasing the width of the textbox-input-box by 16px but haven't been able to find anything.  I believe that setting width instead of max width will change how much space the input takes up across platforms, although it's probably not worth worrying about too much - at some point I'd like to convert this element into an html devtools-searchinput

::: devtools/client/themes/inspector.css
@@ +25,5 @@
>    overflow: hidden;
>  }
>  
>  #inspector-searchbox:not([focused]):not([filled]) {
> +  width: 29px;

Where are these numbers coming from (29px and 167px)?

@@ +37,5 @@
>    max-width: 200px !important;
> +  width: 167px;
> +}
> +
> +#inspector-searchbox[focused] > .textbox-input-box > .textbox-search-icons {

I believe this could just as well be

#inspector-searchbox > .textbox-input-box > .textbox-search-icons

right?

Comment 3

[Hernán Rodriguez Colmeiro (:peregrino)]

(In reply to Brian Grinstead [:bgrins] from comment #2)
> Comment on attachment 8684750 [details] [diff] [review]
> Make the inspector html searchbox clear icon not cut off placeholder text
> 
> Review of attachment 8684750 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> I've checked into this hoping there was a simple way to handle this by
> somehow hiding the icons and simultaneously increasing the width of the
> textbox-input-box by 16px but haven't been able to find anything.  I believe
> that setting width instead of max width will change how much space the input
> takes up across platforms, although it's probably not worth worrying about
> too much - at some point I'd like to convert this element into an html
> devtools-searchinput
> 
> ::: devtools/client/themes/inspector.css
> @@ +25,5 @@
> >    overflow: hidden;
> >  }
> >  
> >  #inspector-searchbox:not([focused]):not([filled]) {
> > +  width: 29px;
> 
> Where are these numbers coming from (29px and 167px)?

for the collapsed button 29px = 22px padding-left + 5px padding right + 1px border-left + 1px border right
for the extended button 167px = (121px width + 1px padding + 1px padding from the base input) + 16px for the looking glass + 22px padding left + 4px padding right + 1px border left + 1px border right

> 
> @@ +37,5 @@
> >    max-width: 200px !important;
> > +  width: 167px;
> > +}
> > +
> > +#inspector-searchbox[focused] > .textbox-input-box > .textbox-search-icons {
> 
> I believe this could just as well be
> 
> #inspector-searchbox > .textbox-input-box > .textbox-search-icons
> 
> right?

Yes, that would work also, as when the searchbox is not focused those icons are not shown anyway.

Comment 4

[Patrick Brosset <:pbro>]

Hernán: are you interested in working on this bug still? It's been a few months. If not, then feel free to un-assign you from it.

Comment 5

[Hernán Rodriguez Colmeiro (:peregrino)]

Yep! I'm still interested on fixing this :)

Any chance to get a response on the numbers above? There's a fix from me pending for the last comment, but would like to know if it's ok to use the widths above.

Comment 6

[Patrick Brosset <:pbro>]

(In reply to Hernán Rodriguez Colmeiro (:peregrino) from comment #5)
> Yep! I'm still interested on fixing this :)
> 
> Any chance to get a response on the numbers above? There's a fix from me
> pending for the last comment, but would like to know if it's ok to use the
> widths above.
Pinging bgrins as he has reviewed the first patch. Brian, see comment 3.

Comment 7

[Brian Grinstead [:bgrins]]

Sorry for dropping the ball on this!  Now that the breadcrumbs have moved to the bottom of the panel, I'm not able to reproduce the text clipping problem anymore.  So I think we can close this out.  What do you think Patrick?

Comment 8

[Patrick Brosset <:pbro>]

Oh you're right. This issue is now gone in 48.
Hernán: sorry about this, but it looks like this bug has been rendered useless now :)
Going to close this now, feel free to re-open if you find a use case where it still happens.

If you're still interested in fixing devtools bugs, let me know here or on IRC and we can help find good next bugs to work on.

Comment 9

[Hernán Rodriguez Colmeiro (:peregrino)]

No problem, if it's fixed no need to keep this open :P

Have enough in my plate right now, when I feel I can contribute I'll reach out.