extensions: clean up hiding/showing of developer controls.

extensions: clean up hiding/showing of developer controls.

Also adds better support for zoom/wrapping.

BUG=438815
R=kalman@chromium.org

Committed: https://crrev.com/e49c51372ab82a4c33bf74f050937cc7373a176c
Cr-Commit-Position: refs/heads/master@{#314016}

[Dan Beam, 2015-01-30 00:26:06]

Patchset #1 (id:1) has been deleted

[Dan Beam, 2015-01-30 17:26:16]

ping, also +hcarmona@ as FYI

[not at google - send to devlin, 2015-01-30 19:28:48]

What changed in the zoom? I patched this in and tried zooming
chrome://extensions to 200% and it looks the same as before.

[Dan Beam, 2015-01-30 19:29:56]

On 2015/01/30 19:28:48, kalman wrote:
> What changed in the zoom? I patched this in and tried zooming
> chrome://extensions to 200% and it looks the same as before.

try CrOS and/or German or see the BUG=.  when there's more/longer buttons they
wrap.  en+desktop doesn't have issues.

[not at google - send to devlin, 2015-01-30 19:32:42]

Looks fine otherwise, though not quite sure what I'm looking at at all times.

[Dan Beam, 2015-01-30 19:34:23]

On 2015/01/30 19:32:42, kalman wrote:
> Looks fine otherwise, though not quite sure what I'm looking at at all times.

i simplified a lot of code that does:

  if (something)
    el.classList.add('cls')
  else
    el.classList.remove('cls')

to just

  el.classList.toggle('cls', something);

and changed a bunch of:

  ... do some calcs, set some styles in JS ...

to

  ... add a class, let CSS apply ...

[Dan Beam, 2015-01-30 19:41:31]

https://codereview.chromium.org/887803003/diff/80001/chrome/browser/resources...
File chrome/browser/resources/extensions/extensions.css (left):

https://codereview.chromium.org/887803003/diff/80001/chrome/browser/resources...
chrome/browser/resources/extensions/extensions.css:94: }
all these heights (e.g. 105/45) are calc'd in 1 line of JS and don't need to be
updated if the text wraps or sizes change

https://codereview.chromium.org/887803003/diff/80001/chrome/browser/resources...
File chrome/browser/resources/extensions/extensions.css (right):

https://codereview.chromium.org/887803003/diff/80001/chrome/browser/resources...
chrome/browser/resources/extensions/extensions.css:20: margin-top: 45px;
this replaces the marginTop calcs in JS

https://codereview.chromium.org/887803003/diff/80001/chrome/browser/resources...
chrome/browser/resources/extensions/extensions.css:31: #dev-controls.animated {
this is required for times we don't want to transition height (like on zoom
change, which results in a 'resize' event)

https://codereview.chromium.org/887803003/diff/80001/chrome/browser/resources...
chrome/browser/resources/extensions/extensions.css:40: padding: 8px 3px;
this combines the rule/paddings for the buttons and promo

https://codereview.chromium.org/887803003/diff/80001/chrome/browser/resources...
chrome/browser/resources/extensions/extensions.css:45: flex-wrap: wrap;
this is what actually allows buttons to wrap

https://codereview.chromium.org/887803003/diff/80001/chrome/browser/resources...
chrome/browser/resources/extensions/extensions.css:64: margin-top: -5px;
these negative margins make the icon (which has a lot of near transparency on
the edges) take up a more natural amount of vertical space

https://codereview.chromium.org/887803003/diff/80001/chrome/browser/resources...
File chrome/browser/resources/extensions/extensions.js (left):

https://codereview.chromium.org/887803003/diff/80001/chrome/browser/resources...
chrome/browser/resources/extensions/extensions.js:215: updatePromoVisibility_:
function() {
combined updatePromoVisibility_ and handleToggleDevMode_ as they're very related
(it was becoming circular)

https://codereview.chromium.org/887803003/diff/80001/chrome/browser/resources...
File chrome/browser/resources/extensions/extensions.js (right):

https://codereview.chromium.org/887803003/diff/80001/chrome/browser/resources...
chrome/browser/resources/extensions/extensions.js:143:
[$('toggle-dev-on').checked]);
sending a true/false arg makes it harder for the JS/C++ to get out of sync

https://codereview.chromium.org/887803003/diff/80001/chrome/browser/resources...
chrome/browser/resources/extensions/extensions.js:146:
window.addEventListener('resize', function() {
this happens when zoomed

https://codereview.chromium.org/887803003/diff/80001/chrome/browser/resources...
chrome/browser/resources/extensions/extensions.js:167:
$('update-extensions-now').focus();
this moves the focus if the keyboard was used to hide the promo (before the
focus was just dropped)

https://codereview.chromium.org/887803003/diff/80001/chrome/browser/resources...
chrome/browser/resources/extensions/extensions.js:335:
instance.updateDevControlsVisibility_(false);
most of this is purely simplifications or moving from JS -> CSS where possible

[not at google - send to devlin, 2015-01-30 21:45:36]

lgtm

(incidcentally the zoom change I was referring to was the buttons along the top
overflowing or something, which hasn't changed)

[Dan Beam, 2015-01-30 22:13:15]

The CQ bit was checked by dbeam@chromium.org

[commit-bot: I haz the power, 2015-01-30 22:14:20]

CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/887803003/80001

[commit-bot: I haz the power, 2015-01-30 23:00:45]

Committed patchset #4 (id:80001)

[commit-bot: I haz the power, 2015-01-30 23:01:30]

Patchset 4 (id:??) landed as
https://crrev.com/e49c51372ab82a4c33bf74f050937cc7373a176c
Cr-Commit-Position: refs/heads/master@{#314016}