extensions: clean up hiding/showing of developer controls.

chrome/browser/resources/extensions/extensions.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 html.loading * {
-  -webkit-transition-duration: 0 !important;
+  transition-duration: 0 !important;
 }
 
 html:not(.focus-outline-visible)
 :enabled:focus:-webkit-any(input[type='checkbox'], input[type='radio']) {
   /* Cancel border-color for :focus specified in widgets.css. */
   border-color: rgba(0, 0, 0, 0.25);
 }
 
 .no-scroll {
   overflow-y: hidden;
 }
 
+#extension-settings.showing-banner {
+  margin-top: 45px;

[Dan Beam, 2015/01/30 19:41:30]

this replaces the marginTop calcs in JS

+}
+
 /* Developer mode */
 
 #dev-controls {
   -webkit-margin-end: 20px;
-  -webkit-transition: padding 100ms, height 100ms, opacity 100ms;
-  border-bottom: 1px solid #eee;
   height: 0;
-  opacity: 0;
   overflow: hidden;
 }
 
-#dev-controls .buttons-container {
-  -webkit-padding-end: 3px;
-  -webkit-padding-start: 4px;
+#dev-controls.animated {

[Dan Beam, 2015/01/30 19:41:30]

this is required for times we don't want to transition height (like on zoom
change, which results in a 'resize' event)

+  transition: height 150ms;
 }
 
-#dev-controls .buttons-container {
-  display: -webkit-box;
-  height: 32px;  /* height + padding-top matches #dev-controls height. */
-  padding-top: 13px;
+.dev-mode #dev-controls {
+  border-bottom: 1px solid #eee;
+}
+
+#dev-controls > * {
+  padding: 8px 3px;

[Dan Beam, 2015/01/30 19:41:30]

this combines the rule/paddings for the buttons and promo

+}
+
+#dev-controls .button-container {
+  display: flex;
+  flex-wrap: wrap;

[Dan Beam, 2015/01/30 19:41:30]

this is what actually allows buttons to wrap

 }
 
 #dev-controls button {
   white-space: nowrap;
 }
 
 #apps-developer-tools-promo {
-  -webkit-padding-end: 3px;
   align-items: center;
   border-top: 1px solid #eee;
   display: flex;
   font-size: 13px;
-  margin-top: 7px;  /* This matches #dev-controls padding-bottom. */
-  padding-top: 5px;
 }
 
 #apps-developer-tools-promo img {
+  -webkit-margin-end: 5px;
+  -webkit-margin-start: -5px;
   content: url(apps_developer_tools_promo_48.png);
-}
-
-#apps-developer-tools-promo-text {
-  -webkit-margin-start: 5px;
+  margin-bottom: -5px;
+  margin-top: -5px;

[Dan Beam, 2015/01/30 19:41:30]

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

 }
 
 #apps-developer-tools-promo-close-wrapper {
   display: flex;
   flex-grow: 1;
   justify-content: flex-end;
 }
 
 #apps-developer-tools-promo .close-button {
   background: url(chrome://theme/IDR_CLOSE_DIALOG) no-repeat center center;
   border: 0;
   height: 14px;
   width: 14px;
   z-index: 1;
 }
 
 #apps-developer-tools-promo .close-button:hover {
   background-image: url(chrome://theme/IDR_CLOSE_DIALOG_H);
 }
 
 #apps-developer-tools-promo .close-button:active {
   background-image: url(chrome://theme/IDR_CLOSE_DIALOG_P);
 }
 
-#extension-settings.dev-mode #dev-controls {
-  -webkit-transition-duration: 250ms;
-  height: 45px;
-  opacity: 1;
-  padding-bottom: 7px;
-}
-
-#extension-settings.dev-mode.adt-promo #dev-controls {
-  height: 105px;  /* Allow more height for the Apps Developer Tools promo. */
-}

[Dan Beam, 2015/01/30 19:41:30]

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

-
 #dev-controls-spacer {
-  -webkit-box-flex: 1;
+  flex: 1;
 }
 
 #dev-toggle {
   margin-top: 0;
   text-align: end;
 }
 
 .extension-code {
   border: 1px solid #ccc;
   display: flex;
   font-family: monospace;
   overflow: auto;
   white-space: pre;
 }
 
 .extension-code > * {
   padding: 3px;
 }
 
 .extension-code-line-numbers {
   align-self: flex-start;
   background-color: rgba(240, 240, 240, 1);
   border-right: 1px solid #ccc;
   color: rgba(128, 128, 128, 1);
   flex-shrink: 0;
   text-align: right;
 }
 
-#extension-settings:not(.dev-mode) .developer-extras {
-  display: none;
-}
-
 .developer-extras > div,
 .permanent-warnings > div {
   margin: 5px 0;
 }
 
 #extension-settings #page-header {
   /* These values match the .page values. */
   -webkit-margin-end: 24px;
   min-width: 576px;
 }
@@ skipping 170 matching lines @@
   background: pink;
 }
 
 .install-warnings ul,
 .extension-warnings ul {
   margin: 0;
 }
 
 .error-collection-control {
   -webkit-margin-start: 5px;
+}
+
+#extension-settings:not(.dev-mode) .developer-extras,
+#extension-settings:not(.dev-mode) .error-collection-control {
   display: none;
 }
 
-#extension-settings.dev-mode .error-collection-control {
-  display: initial;
-}
-
 #font-measuring-div {
   /* Remove from the flow and hide. */
   position: absolute;
   visibility: hidden;
 }
 
 .extension-commands-config {
   float: right;
 }
 
@@ skipping 23 matching lines @@
 
 .location-text,
 .blacklist-text {
   display: block;
   width: 100px;
 }
 
 /* Trash */
 
 #extension-settings .trash {
-  -webkit-transition: opacity 200ms;
   height: 22px;
   opacity: 0.8;
   position: relative;
   right: 0;
   top: 6px;
+  transition: opacity 200ms;
 }
 
 html[dir='rtl'] #extension-settings .trash {
   left: 0;
   right: auto;
 }
 
 .extension-list-item:not(:hover) .trash:not(:focus) {
   opacity: 0;
 }
@@ skipping 31 matching lines @@
 /* Sideload Wipeout */
 
 .sideload-wipeout-learn-more {
   text-decoration: none;
 }
 
 .sideload-wipeout-banner .page-banner-text {
   -webkit-padding-start: 8px;
   background-image: none;
 }