Closed
Bug 1222881
Opened 9 years ago
Closed 9 years ago
Text cut off in Inspector html searchbox
Categories
(DevTools :: Inspector, defect, P3)
DevTools
Inspector
Tracking
(Not tracked)
RESOLVED
WORKSFORME
People
(Reporter: peregrino, Assigned: peregrino)
Details
(Whiteboard: [btpp-backlog])
Attachments
(2 files)
17.24 KB,
image/png
|
Details | |
1.58 KB,
patch
|
Details | Diff | Splinter Review |
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.
Assignee | ||
Comment 1•9 years ago
|
||
Attachment #8684750 -
Flags: review?(bgrinstead)
Assignee | ||
Updated•9 years ago
|
Assignee: nobody → colmeiro
Status: NEW → ASSIGNED
Comment 2•9 years ago
|
||
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?
Attachment #8684750 -
Flags: review?(bgrinstead)
Assignee | ||
Comment 3•9 years ago
|
||
(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•9 years ago
|
||
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.
Flags: needinfo?(colmeiro)
Priority: -- → P3
Whiteboard: [btpp-backlog]
Assignee | ||
Comment 5•9 years ago
|
||
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.
Flags: needinfo?(colmeiro)
Comment 6•9 years ago
|
||
(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.
Flags: needinfo?(bgrinstead)
Comment 7•9 years ago
|
||
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?
Flags: needinfo?(bgrinstead) → needinfo?(pbrosset)
Comment 8•9 years ago
|
||
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.
Status: ASSIGNED → RESOLVED
Closed: 9 years ago
Flags: needinfo?(pbrosset)
Resolution: --- → WORKSFORME
Assignee | ||
Comment 9•9 years ago
|
||
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.
Updated•7 years ago
|
Product: Firefox → DevTools
You need to log in
before you can comment on or make changes to this bug.
Description
•