Promote Apps Developer Tools in the chrome:extensions page

chrome/browser/resources/extensions/extensions.css

Index: chrome/browser/resources/extensions/extensions.css
diff --git a/chrome/browser/resources/extensions/extensions.css b/chrome/browser/resources/extensions/extensions.css
index 4bece460aec8d03dc98f3890f14aee5a93c0f175..4f62985dcfb06d1e82318e695c78efdc902195d5 100644
--- a/chrome/browser/resources/extensions/extensions.css
+++ b/chrome/browser/resources/extensions/extensions.css
@@ -41,6 +41,51 @@ html:not(.focus-outline-visible)
   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;
@@ -48,6 +93,10 @@ html:not(.focus-outline-visible)
   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;
 }