Compact Shields panel close button doesn't work properly

[cptpcrd]

Test plan

Make sure the left half of the close button on the compact shields panel is clickable.

---

Description

When in compact mode, only the right half of the Shields panel's close button works. The other half does nothing when clicked.

Steps to Reproduce

1. Go to about:preferences#shields.
2. Select "Use compact panel" under "Shields panel options."
3. Go to any webpage and open the shields panel.
4. Click on the left half of the close button on the shields panel.

Actual result:
The shields panel stays open.

Expected result:
The shields panel should close, no matter what part of the close button is clicked.

Reproduces how often:
Every time.

Brave Version

about:brave info:

Brave | 0.19.80
rev | 7d07299

[bsclifton]

cc: @luixxiul

[luixxiul]

maybe related with dpi setting?

[cptpcrd]

More testing indicates that this problem only appears when I deselect "Hide the menu bar by default" in Preferences. Could this be related to the resulting change in position of the shields icon?

Also, I'm running Windows.

[luixxiul]

Still I cannot reproduce the issue.. Would you mind recording your issue with LICECap?

https://www.cockos.com/licecap/

Information on about:brave is appreciated 😄

[cptpcrd]

Poking around in the electron dev tools, it looks like the problem might occur because the shield down/up slider's padding overlaps the close button. Of course, this doesn't explain why it doesn't occur when the menu isn't shown.

More information coming soon.

[cptpcrd]

LICECap recording of the problem:

As you can see, the left half of the close button is not clickable.

Contents of about:brave:

Name | Version
Brave | 0.19.80
rev | 7d07299
Muon | 4.5.13
libchromiumcontent | 62.0.3202.75
V8 | 6.2.414.36
Node.js | 7.9.0
Update Channel | Release
OS Platform | Microsoft Windows
OS Release | 10.0.16299
OS Architecture | x64

[luixxiul]

Poking around in the electron dev tools, it looks like the problem might occur because the shield down/up slider's padding overlaps the close button.

I thought so and tried but I cannot reproduce the issue yet 😞

Would you mind trying to edit the switch like this to see if this fixes your issue?

[cptpcrd]

I tried that, but it didn't fix the problem.

However, I played around with the settings and found that this specific combination is necessary to make the problem appear:

Hide the menu bar by default: deselected

Always show the bookmarks bar: selected

And under Advanced:

Always show the URL bar: selected

Use wide URL bar: selected

And, of course, the option selected to use the compact panel under Shields.

I don't think I left anything important out, but I might have. Is there a way to reset the settings to defaults?

[luixxiul]

Hmm... I tried that combination but no luck yet 😞 I haven't seen the issue reported on the community so it might be specific to your environment.

Is there a way to reset the settings to defaults?

The profile folder is AppData/Roaming/brave. It would be nice if you create a back up and try again. It would be also appreciated if you would download the latest beta and see the issue is still reproduced there 😄

[cptpcrd]

Beta or dev channel?

[luixxiul]

0.20.x please :-)

[cptpcrd]

I backed up my profile and retried. Changing nothing but those settings from the defaults immediately brought the problem back.

The beta, however, did not exhibit the bug.

[luixxiul]

The beta, however, did not exhibit the bug.

Sounds nice! So I think some UI change has fixed the issue.
Is it OK to close this for QA test?

[cptpcrd]

Sure.