Promote Apps Developer Tools in the chrome:extensions page

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;
 }
 
 html:not(.focus-outline-visible)
 :enabled:focus:-webkit-any(input[type='checkbox'], input[type='radio']) {
@@ skipping 23 matching lines @@
 
 #dev-controls .buttons-container {
   display: -webkit-box;
   padding-top: 13px;
 }
 
 #dev-controls button {
   white-space: nowrap;
 }
 
+#apps-developer-tools-promo {
+  -webkit-margin-before: 15px;
+  -webkit-padding-before: 5px;
+  align-items: center;
+  border-top: 1px solid #eee;
+  display: flex;
+  font-size: 13px;
+}
+
+#apps-developer-tools-promo img {
+  content: url('apps_developer_tools_promo_48.png');

[Dan Beam, 2014/04/18 21:27:28]

nit: no need for single quotes

[Devlin, 2014/04/18 22:19:55]

Done.

+}
+
+#apps-developer-tools-promo-text,
+#apps-developer-tools-promo-link {
+  -webkit-margin-start: 5px;
+}
+
+#apps-developer-tools-promo-link {
+  text-decoration: none;

[Dan Beam, 2014/04/18 21:27:28]

i think we underline links that go to new hosts

[Devlin, 2014/04/18 22:19:55]

Ah, so we do. Done.

+}
+
+#apps-developer-tools-promo-close-wrapper {
+  display: flex;
+  flex-grow: 1;
+  justify-content: flex-end;
+}
+
+#apps-developer-tools-promo .close-button {
+  background-image: url('chrome://theme/IDR_CLOSE_DIALOG');
+  background-position: center;

[Dan Beam, 2014/04/18 21:27:28]

background-position's initial value is 0% 0% (top-left for both x and y).  when
you provide an x value, the initial y value is center (go home CSS, you're
drunk) [1].  whether you meant to do this or not, it's pretty darn sneaky.

tl;dr - list both x & y

[1] http://dev.w3.org/csswg/css-backgrounds/#position

[Devlin, 2014/04/18 22:19:55]

Crazy... done.

+  background-repeat: no-repeat;

[Dan Beam, 2014/04/18 21:27:28]

or better yet:

  background: url(chrome://theme/IDR_CLOSE_DIALOG) no-repeat center center;

[Devlin, 2014/04/18 22:19:55]

Awesome, thanks.

+  height: 14px;
+  width: 14px;
+  z-index: 1;
+}
+
+#apps-developer-tools-promo .close-button:hover {
+  background-image: url('chrome://theme/IDR_CLOSE_DIALOG_H');

[Dan Beam, 2014/04/18 21:27:28]

^ does this preload?  i.e. does this load when hovering and potentially flicker?

[Devlin, 2014/04/18 22:19:55]

I don't see any hover, and this is how we do it elsewhere - but neither of those
are exactly definitive. Is there a better alternative to this?

[Dan Beam, 2014/04/18 22:34:22]

eh, this is local and so small... if you don't notice (or this image is already
loaded elsewhere on the page), I wouldn't worry about it.

+}
+
+#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, 2014/04/18 21:28:22]

also, it'd be kinda cool if we could just somehow dynamically calculate this
(e.g. 100% or calc(<orig height> + <extra height>) but I don't know a good way
to do this...

[Devlin, 2014/04/18 22:19:55]

I agree it'd be cool, but it'd require a bit more work (obviously, we do it this
way for extending to include #dev-controls, too). It okay to leave this one off
for now?

[Dan Beam, 2014/04/18 22:34:22]

yes

+}
+
 #dev-controls-spacer {
   -webkit-box-flex: 1;
 }
 
 #dev-toggle {
   margin-top: 0;
   text-align: end;
 }
 
 #extension-settings:not(.dev-mode) .developer-extras {
@@ skipping 258 matching lines @@
 /* Sideload Wipeout */
 
 .sideload-wipeout-learn-more {
   text-decoration: none;
 }
 
 .sideload-wipeout-banner .page-banner-text {
   -webkit-padding-start: 8px;
   background-image: none;
 }