Browser-laptop: implement new bravery panel spec

[diracdeltas]

from @bradleyrichter:

since we don't yet support flash, the "Block Flash Objects" switch should be un-switchable

[bradleyrichter]

@diracdeltas Let's leave the Flash switch out rather than disabled since we are including an un-switchable Block Popups switch which does block but can't be changed yet.

[diracdeltas]

@bradleyrichter did you intend to set Block Scripts to be unswitchable in the screenshot above?

"Block Popups" and "Block Flash" are in the same boat right now (enabled but unswitchable). I'm fine with only showing "Block Popups" and not "Block Flash" though.

[bradleyrichter]

Unintended confusion. We will just remove the "unswitchable" switches and the style for OFF will be dark grey.

[diracdeltas]

++

[bradleyrichter]

so, it should look like this: (big favicon to come later)

[diracdeltas]

This is basically done now except for the 'Edit Bravery Global Settings...' link which is in progress

[luixxiul]

I'm pushing a PR to make this

into

align-items: center could be flex-start.

[diracdeltas]

@luixxiul thanks. looks better, though i would prefer the question-mark to be closer to "Fingerprinting Protection". on my screen, it looks fine because everything fits in one line:

is it possible for you to make the panel wider so that the text fits in one line without making it wider than the minimum browser window size?

[bsclifton]

This is a great looking screen :smile:

[luixxiul]

@diracdeltas I noticed that once too. I think maybe it's not enough to solve the issue completely by changing the width of the panel due to the nature of display: flex. You'll have to rewrite the divs around the question mark. I'll take a look at it again.

[luixxiul]

I noticed that the previous commit has broken the margin between the shields switch and "Up". I'll push another commit to fix it.

[bradleyrichter]

@diracdeltas The reason for the original order of the number display was to put the least-used at the far left. (assuming blocking scripts is least-used)

Is there a reason you preferred or needed the order that was implemented?

Also - Let's add left-margin in front of the ? mark button, and make it dark grey to reduce it's visual importance. (when time permits)

[diracdeltas]

@bradleyrichter I think fingerprinting protection will be less used than script blocking actually. I ordered them so that the one most likely to be '0' is at the end.

[bbondy]

I think fingerprinting protection will be used more than script blocking but I'm fine with whatever. Just because the most web breaking thing is script blocking.

[luixxiul]

Do we need the disabled vertical scrollbar here?

cf. https://twitter.com/bcrypt/status/737171844092956672

[bradleyrichter]

This needs to turn into a popup that hides on any click outside of the popup region. I'm worried it will otherwise be confusing when users open them accidentally.