Bug 898843 - Update logos and colors in Metro About flyout [r=rsilveira,dolske]

browser/branding/aurora/content/jar.mn

@@ -17,3 +17,8 @@ browser.jar:
   content/branding/identity-icons-brand.png      (identity-icons-brand.png)
   content/branding/identity-icons-brand@2x.png   (identity-icons-brand@2x.png)
   content/branding/aboutDialog.css               (aboutDialog.css)
+#ifdef MOZ_METRO
+  content/branding/metro-about.css               (metro-about.css)
+  content/branding/metro-about-footer.png        (metro-about-footer.png)
+  content/branding/metro-about-wordmark.png      (metro-about-wordmark.png)
+#endif

browser/branding/aurora/content/metro-about.css

@@ -0,0 +1,14 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#about-flyoutpanel {
+  background-color: #331e54;
+  color: white;
+}
+
+#about-policy-label:hover,
+#about-policy-label:active {
+  background: #181327;
+}
+

browser/branding/nightly/content/jar.mn

@@ -17,3 +17,8 @@ browser.jar:
   content/branding/identity-icons-brand.png      (identity-icons-brand.png)
   content/branding/identity-icons-brand@2x.png   (identity-icons-brand@2x.png)
   content/branding/aboutDialog.css               (aboutDialog.css)
+#ifdef MOZ_METRO
+  content/branding/metro-about.css               (metro-about.css)
+  content/branding/metro-about-footer.png        (metro-about-footer.png)
+  content/branding/metro-about-wordmark.png      (metro-about-wordmark.png)
+#endif

browser/branding/nightly/content/metro-about.css

@@ -0,0 +1,14 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#about-flyoutpanel {
+  background-color: #002147;
+  color: white;
+}
+
+#about-policy-label:hover,
+#about-policy-label:active {
+  background: #0a111c;
+}
+

browser/branding/official/content/jar.mn

@@ -16,3 +16,8 @@ browser.jar:
   content/branding/identity-icons-brand.png      (identity-icons-brand.png)
   content/branding/identity-icons-brand@2x.png   (identity-icons-brand@2x.png)
   content/branding/aboutDialog.css               (aboutDialog.css)
+#ifdef MOZ_METRO
+  content/branding/metro-about.css               (metro-about.css)
+  content/branding/metro-about-footer.png        (metro-about-footer.png)
+  content/branding/metro-about-wordmark.png      (metro-about-wordmark.png)
+#endif

browser/branding/official/content/metro-about.css

@@ -0,0 +1,14 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#about-flyoutpanel {
+  background-color: #0095dd;
+  color: white;
+}
+
+#about-policy-label:hover,
+#about-policy-label:active {
+  background: #036fa4;
+}
+

browser/branding/unofficial/content/jar.mn

@@ -17,3 +17,8 @@ browser.jar:
   content/branding/identity-icons-brand.png      (identity-icons-brand.png)
   content/branding/identity-icons-brand@2x.png   (identity-icons-brand@2x.png)
   content/branding/aboutDialog.css               (aboutDialog.css)
+#ifdef MOZ_METRO
+  content/branding/metro-about.css               (metro-about.css)
+  content/branding/metro-about-footer.png        (metro-about-footer.png)
+  content/branding/metro-about-wordmark.png      (metro-about-wordmark.png)
+#endif

browser/branding/unofficial/content/metro-about.css

@@ -0,0 +1,14 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#about-flyoutpanel {
+  background-color: #002147;
+  color: white;
+}
+
+#about-policy-label:hover,
+#about-policy-label:active {
+  background: #0a111c;
+}
+

browser/metro/base/content/browser.xul

@@ -9,6 +9,7 @@
 <?xml-stylesheet href="chrome://browser/content/browser.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/cssthrobber.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/tiles.css" type="text/css"?>
+<?xml-stylesheet href="chrome://branding/content/metro-about.css" type="text/css"?>
 
 <!DOCTYPE window [
 <!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd">
@@ -384,7 +385,9 @@ Desktop browser's sync prefs.
     </appbar>
     <autoscroller class="autoscroller" id="autoscrollerid"/>
     <flyoutpanel id="about-flyoutpanel" class="flyout-narrow" headertext="&aboutHeader.title;">
-      <label id="about-product-label" linewrap="true" value="&aboutHeader.product.label;"/>
+      <label align="start">
+        <html:img src="chrome://branding/content/metro-about-wordmark.png" alt="&aboutHeader.product.label;"/>
+      </label>
       <label value="&aboutHeader.company.label;" linewrap="true"/>
 #expand <label id="about-version-label">__MOZ_APP_VERSION__</label>
       <vbox id="updateBox">

browser/metro/theme/browser.css

@@ -1167,25 +1167,34 @@ flyoutpanel > settings:first-child {
 
 /* About flyout pane ------------------------------------------------------- */
 
+/* Colors are defined in /browser/branding/<dir>/content/metro-about.css */
+
 #about-flyoutpanel {
-  background-image:url('chrome://browser/skin/images/about-footer.png');
+  background-image: url('chrome://branding/content/metro-about-footer.png');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: right bottom;
 }
 
-#about-product-label {
- font-weight: bold;
+#about-flyoutpanel .text-link {
+  color: inherit;
+}
+
+#about-flyoutpanel > .flyoutpanel-wrapper > .flyoutpanel-header,
+#about-flyoutpanel > .flyoutpanel-wrapper > .flyoutpanel-contents {
+  background-color: inherit;
+  border: none;
+}
+
+#about-policy-label {
+  padding: 1.5em @metro_spacing_large@;
+  margin: 1em -@metro_spacing_large@;
 }
 
 #about-version-label {
  margin-top: 11pt;
 }
 
-#about-policy-label {
- margin-top: 24pt;
-}
-
 #currentChannel {
   margin: 0;
   padding: 0;

browser/metro/theme/flyoutpanel.css

@@ -63,7 +63,7 @@ flyoutpanel[visible] {
   border-width: 1px;
   -moz-border-start-style: solid;
   border-color: #c2c2c2;
-  padding: 40px;
+  padding: @metro_spacing_large@;
   width: 100%;
 }
 

browser/metro/theme/jar.mn

@@ -95,7 +95,6 @@ chrome.jar:
   skin/images/aboutAddonsBackground.png     (images/aboutAddonsBackground.png)
   skin/images/aboutAddonsBackgroundFillSlice.png     (images/aboutAddonsBackgroundFillSlice.png)
   skin/images/flyout-back-button.png        (images/flyout-back-button.png)
-  skin/images/about-footer.png              (images/about-footer.png)
   skin/images/arrowleft-16.png              (images/arrowleft-16.png)
   skin/images/arrowright-16.png             (images/arrowright-16.png)
   skin/images/arrowup-16.png                (images/arrowup-16.png)