1465696 - Search filter's help logo jumping / incorrectly placed

Status: RESOLVED WORKSFORME

(DevTools :: Netmonitor, defect, P2)

Description

[Ruturaj Vartak]

Attachment: filter-help-logo-mac.png

The search box's help logo on the right keeps jumping in linux and is incorrectly placed on Mac.

Comment 1

[Ruturaj Vartak]

Attachment: filter-help-logo-linux-jumping.mp4

Comment 2

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Thanks for the report!

I can see the jumping problem on Windows 10
The incorrect position seems to be Mac issue only.

Honza

Comment 3

[Ruturaj Vartak]

Hey Honza,

I was looking into this bug. I found its also existing in the Beta.

The issue comes up specifically when toolbar is in a `devtools-toolbar-single-row`
AND the width of the window is inadequate to accommodate all the controls.

The issue is `devtools-searchbox has-clear-btn` is set to `flex:1` AND itself is set to `display: inline-flex`
and on hover, The extra help icon gets added the width of the `devtools-searchbox`, since its set to flex=1,
Which causes incremental reflows !

I'm not a CSS expert, probable suggestions,
- In single row mode, ensure the width is adequate by removing display: inline-flex
- always show the `help` icon (Easiest fix)
- show help icon the way we show `devtools-searchinput-clear` button by absolute positioning.

Rutu.

Comment 4

[Ruturaj Vartak]

I forgot `Need More Info` flag

Comment 5

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: Bug 1465696 - Fix position of search MDN icon; ?

Review commit: https://reviewboard.mozilla.org/r/249910/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/249910/

Comment 6

[Jan Honza Odvarko [:Honza] (always need-info? me)]

@Ruturaj: can you try out my patch? Does it fix the problem for you?

I used `visibility` instead of `display`.

Honza

Comment 7

[Ruturaj Vartak]

Attachment: jumping.mp4

Hey Honza,

The patch that you supplied solved the issue, but added another. Now on typing anything leads to the jump.

Perhaps showing it always, and only replacing for the "X" when somebody types text could be a solution.

Ruturaj.

Comment 8

[Hengyeow (:tanhengyeow)]

Hi Ruturaj

The incorrect position seems to be fixed on Mac. Can you verify if the issue with Linux still exists?

Comment 9

[Ruturaj Vartak]

Hey Heng,

The issue isn't present in Linux latest build. I guess its safe to close the issue if Windows too doesn't have the problem

thanks,
Rutu

Comment 10

[Hengyeow (:tanhengyeow)]

Hi Honza

Passing on to you to verify if the problem exists on Windows :) Am using Mac here.

Comment 11

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Tested on Win10 and it works for me, closing.

Thanks to everyone for testing!

Honza