Browser-laptop: Compact Bravery panel tracking issue

[cezaraugusto]

TODOs:

• [x] Fix jumpy double digits (#9077)
• [ ] Set text-overflow to Fingerprinting Protection (?)
• [ ] feature to save the advanced control open/closed state (#4403)
• [ ] feature to avoid opening the advanced control panel when you click the counter
• [x] hide empty scrollbar on bravery panel (#9296)
• [x] cursor:text should be replaced with cursor:auto on the scroll bar (#9802)

---

Original title: jumpy double digits when using compact brave panel

this is a follow-up of #8990. We should add more room for 2 digits to avoid numbers being "jumpy". See below:

/cc @luixxiul

[Jacalz]

I also would suggest adding the compact bravery panel as the default and having an option to enable classic bravery panel 😉🦁

[luixxiul]

@cezaraugusto I would agree. I'll work on that later.

[Jacalz]

Also maby make it shift slowly one step to the right when changing to double digits 😉

[luixxiul]

I also would suggest adding the compact bravery panel as the default and having an option to enable classic bravery panel.

I'm not sure if it should be fine (as we are already used to the current panel). I would like to ask @bradleyrichter for his thought.

[Jacalz]

I would say that it is okay to change it to the default since Brave hasn't hit 1.0 yet @luixxiul

[bradleyrichter]

One more concern I have is with long URLs. Are they truncating?

We may need to adjust the header and put the URL on its own line if it will be truncated more than 30% of the time.

[luixxiul]

@bradleyrichter this is my solution:

https://github.com/brave/browser-laptop/issues/8954#issuecomment-302656753

[luixxiul]

@cezaraugusto By setting min-width: 2ch you would not get the jumpy counters, instead however:

I would prefer the jumpy counters (which only can be noticed when you keep opening the panel while loading the page) to the ugly fixed width stats to be honest..

[bradleyrichter]

I think we can come up with something else that will make it more solid using a fixed width.

Either reduce the text size to allow for more characters or add another row.

I’ll mock up both options…

On May 23, 2017, at 6:44 PM, Suguru Hirahara [e-mail] wrote:

@bradleyrichter https://github.com/bradleyrichter this is my solution:

https://cloud.githubusercontent.com/assets/3362943/26241987/bc58e06e-3cc1-11e7-8517-a155609684e4.gif
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/brave/browser-laptop/issues/9016#issuecomment-303594510, or mute the thread https://github.com/notifications/unsubscribe-auth/AM4jqmydZjTuVmdWy5kykPhX0vQ-POz_ks5r84t9gaJpZM4NkISt.

[luixxiul]

using a fixed width.

I'm afraid that will cause the same issue as #5726 (and #2096), so using fixed width should be avoided and that's why I aligned the elements vertically in one column.

We could find another way but applying fixed width.

[luixxiul]

Either reduce the text size to allow for more characters

+1, would you please let me know which one is acceptable? I'm going to address that, thanks.

[bradleyrichter]

@luixxiul When I meant fixed width, I mean to use a width that is dynamic based on the string width for that language.

Here is a new layout that should solve our issues:

• I added a close button as I have witnessed some user delay for initial closing.
• I rearranged the top area to make room for the long URL

• I adjusted the number area to allow for 1 or 2 numbers. I think this will look cleanest and not matter if digits are updating when the panel is open.

• This also shows a new popup for a future 3-way selection requested by @diracdeltas

[luixxiul]

@bradleyrichter nice!

note: align the counters with items inside the advanced controls

[luixxiul]

@cezaraugusto May I change this ticket into a tracking one, to apply the mockup provided by @bradleyrichter ?

[cezaraugusto]

sure all yours ;)

[cezaraugusto]

ok so based on Slack convo here's Brad's requests:

• master plan is to make this panel the default. I think the plan is to eliminate the old panel
• main concern is that blocking list increase panel width
• better have it 320px min-width, as it works great in English. Other languages would follow that.
• For small screen size, Brad suggested the picture below:

[bradleyrichter]

To be extra clear, I don’t want to reduce language to O/I on the switch for normal widths. Shields Down/Up is part of the lingo that we need to retain normally.

Also, we may be able to avoid this issue just by increasing the min-width slightly.

On Jun 30, 2017, at 9:08 AM, Cezar Augusto [e-mail] wrote:

ok so based on Slack convo here's Brad's requests:

master plan is to make this panel the default. I think the plan is to eliminate the old panel
main concern is that blocking list increase panel width
better have it 320px min-width, as it works great in English. Other languages would follow that.
For small screen size, Brad suggested the picture below:
https://user-images.githubusercontent.com/4672033/27744217-0c9cf97c-5d95-11e7-9909-19bf7e90ed38.png
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/brave/browser-laptop/issues/9016#issuecomment-312308575, or mute the thread https://github.com/notifications/unsubscribe-auth/AM4jqhH9eGNwZbsd7TmtXqNdax96CK7yks5sJR2CgaJpZM4NkISt.

[luixxiul]

@cezaraugusto and I have discussed and concluded that we would get the max length of strings on the panel for each language with l20n and specify max-width: Xch with that length. FIxed with #9840.

Also adding width: 100% and margin-left: 10vw would prevent the panel from covering all viewport.

[luixxiul]

I don’t want to reduce language to O/I on the switch for normal widths.

is it possible to detect with JS that the words overwrap / overflow, to control when to display O/I instead of language?