Bug 859997 - [Metro] Overlay plus button. r=mbrubeck

browser/metro/base/content/browser.xul

@@ -678,7 +678,9 @@
   </stack>
 
   <html:div id="overlay-back" class="overlay-button"
-            command="cmd_back" onclick="CommandUpdater.doCommand('cmd_back');"></html:div>
+            observes="cmd_back" onclick="CommandUpdater.doCommand('cmd_back');"></html:div>
+  <html:div id="overlay-plus" class="overlay-button"
+            observes="cmd_back" onclick="CommandUpdater.doCommand('cmd_newTab');"></html:div>
 
   <svg:svg height="0">
     <svg:clipPath id="forward-button-clip-path" clipPathUnits="objectBoundingBox">

browser/metro/theme/browser.css

@@ -977,41 +977,66 @@ setting[type="directory"] > .preferences-alignment {
 }
 
 /* overlay buttons */
+
 .overlay-button {
   position: fixed;
   top: 50%;
-  left: -72px;
   margin-top: -66px;
   width: 120px;
   height: 120px;
-  background-image: url(chrome://browser/skin/images/overlay-back.png);
-  background-repeat: no-repeat;
-  background-position: right 6px center;
-  background-size: 60px;
   background-color: hsla(210,30%,10%,.2);
+  background-size: 60px;
+  background-repeat: no-repeat;
   background-origin: padding-box;
   background-clip: padding-box;
   border: 6px solid hsla(0,0%,100%,.7);
   border-radius: 50%;
   box-shadow: 0 0 0 1px hsla(0,0%,0%,.04),
-              0 0 12px 0 hsla(0,0%,0%,.1);
+              0 0 9px 0 hsla(0,0%,0%,.1);
   transition-duration: 550ms;
   transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
 }
 
+#overlay-back {
+  left: -72px;
+  background-image: url(chrome://browser/skin/images/overlay-back.png);
+  background-position: right 6px center;
+}
+
+#overlay-plus {
+  right: -72px;
+  background-image: url(chrome://browser/skin/images/overlay-plus.png);
+  background-position: left 6px center;
+}
+
 .overlay-button[disabled] {
   box-shadow: none;
-  transform: translateX(-54px);
+}
+
+#overlay-back[disabled] {
+  transform: translateX(-60px);
+}
+
+#overlay-plus[disabled] {
+  transform: translateX(60px);
 }
 
 .overlay-button:not([disabled]):hover {
-  background-position: right 12px center;
-  background-size: 78px;
   background-color: hsla(210,30%,10%,.4);
+  background-size: 78px;
   border-color: hsla(0,0%,100%,.9);
+}
+
+#overlay-back:not([disabled]):hover {
+  background-position: right 12px center;
   transform: translateX(40px) scale(1.2);
 }
 
+#overlay-plus:not([disabled]):hover {
+  background-position: left 12px center;
+  transform: translateX(-40px) scale(1.2);
+}
+
 /* helperapp (save-as) popup ----------------------------------------------- */
 #helperapp-target {
   font-size: @font_small@ !important;

browser/metro/theme/jar.mn

@@ -83,3 +83,4 @@ chrome.jar:
   skin/images/selection-monocle.png         (images/selection-monocle.png)
   skin/images/appbar-icons.png              (images/appbar-icons.png)
   skin/images/overlay-back.png              (images/overlay-back.png)
+  skin/images/overlay-plus.png              (images/overlay-plus.png)