Bug 1076709 - "Beta" Tag to be added to the panel. r=mikedeboer

browser/components/loop/content/shared/css/common.css

@@ -233,7 +233,6 @@ p {
 /* Alerts/Notifications */
 .notificationContainer {
   border-bottom: 2px solid #E9E9E9;
-  margin-bottom: 1em;
 }
 
 .messages > .notificationContainer > .alert {

browser/components/loop/content/shared/css/panel.css

@@ -25,6 +25,12 @@ body {
 
 /* Tabs and tab selection buttons */
 
+.tab-view-container {
+  background-image: url("../img/beta-ribbon.svg#beta-ribbon");
+  background-size: 36px 36px;
+  background-repeat: no-repeat;
+}
+
 .tab-view {
   display: flex;
   flex-direction: row;
@@ -93,6 +99,12 @@ body {
 
 .content-area header {
   font-weight: 700;
+  -moz-padding-start: 20px;
+}
+
+.tab-view + .tab .content-area header {
+  /* The header shouldn't be indented if the tabs are present. */
+  -moz-padding-start: 0;
 }
 
 .content-area label {

browser/components/loop/content/shared/img/beta-ribbon.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 100 100"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     enable-background="new 0 0 100 100">
+<style>
+</style>
+<defs>
+  <g id="beta-ribbon">
+    <path fill="#e6e6e6" d="M0,100 100,0 49.1,0 0,49.2z"/>
+    <path fill="#fff" d="M0,94.7 94.7,0 46.5,0 0,46.6z"/>
+    <g fill="#999">
+      <path d="m25.9,56.7l-4,4-13.7-13.7 3.7-3.7c2.4-2.4 5.7-4.1 8.3-1.4 1.7,1.7 1.4,3.9 .5,5.3l.1,.1c1.6-1.1 4-1.9 6.3,.3 3,3 1.3,6.5-1.2,9.1zm-12.2-12.2l-2.2,2.2 4.3,4.3 2.3-2.3c1.6-1.6 1.8-3.1 .2-4.7-1.4-1.6-2.9-1.2-4.6,.5zm6.1,5.4l-2.5,2.5 4.9,4.9 2.4-2.4c1.3-1.3 2.5-3.3 .6-5.3-2-2-3.9-1.2-5.4,.3z"/>
+      <path d="m30.7,42.7c2.5,2.2 4.6,2.1 6.2,.5 1-1 1.5-2 1.6-3.6l2,.4c-.2,1.7-.9,3.4-2.2,4.7-3.1,3.1-6.9,2.5-10.2-.7-3.2-3.2-3.8-7.1-1.1-9.9 2.7-2.7 6.2-2.3 9.4,.9 .4,.4 .7,.7 .9,1l-6.6,6.7zm-1.4-1.4l4.9-4.9c-2.2-2.1-4.1-2.5-5.7-.9-1.4,1.5-1.3,3.4 .8,5.8z"/>
+      <path d="m49.8,31.8c-.2,1.1-.8,2.2-1.6,3.1-1.9,1.9-4,1.6-5.9-.2l-6.3-6.3-1.6,1.6-1.4-1.4 1.7-1.7-2.4-2.4 1.6-2 2.6,2.6 2.6-2.6 1.2,1.6-2.4,2.4 6.3,6.3c1.1,1.1 1.9,1.2 2.8,.3 .5-.5 .7-1 .9-1.8l1.9,.5z"/>
+      <path d="m57,20.8c.8,.8 1.4,.9 2.1,.6l.8,1.7c-1.1,.8-2.1,1.1-3.4,.5 .3,1.7-.4,3.3-1.6,4.6-2.1,2.1-4.7,2.1-6.6,.2-2.2-2.2-1.6-5.1 1.5-8.3l1.4-1.3-.8-.8c-1.5-1.5-2.8-1.3-4.3,.2-.7,.7-1.5,1.8-2.2,3.3l-1.8-.9c.8-1.8 1.8-3.1 2.8-4.2 2.7-2.7 5.1-2.5 7.2-.4l4.9,4.8zm-2,1.6l-2.6-2.6-1.3,1.3c-2.2,2.2-2.2,3.8-.9,5.1 1.3,1.3 2.5,1.4 3.8,.1 1.1-1.1 1.3-2.4 1-3.9z"/>
+      <path d="M93.4,0 0,94.1 0,96 95.2,0z"/>
+      <path d="M45.3,0 0,46 0,47.9 47,0z"/>
+    </g>
+  </g>
+</defs>
+<use id="beta-ribbon" xlink:href="#beta-ribbon"/>
+</svg>

browser/components/loop/jar.mn

@@ -48,6 +48,7 @@ browser.jar:
   content/browser/loop/shared/img/svg/glyph-signin-16x16.svg    (content/shared/img/svg/glyph-signin-16x16.svg)
   content/browser/loop/shared/img/svg/glyph-signout-16x16.svg   (content/shared/img/svg/glyph-signout-16x16.svg)
   content/browser/loop/shared/img/audio-call-avatar.svg         (content/shared/img/audio-call-avatar.svg)
+  content/browser/loop/shared/img/beta-ribbon.svg               (content/shared/img/beta-ribbon.svg)
   content/browser/loop/shared/img/icons-10x10.svg               (content/shared/img/icons-10x10.svg)
   content/browser/loop/shared/img/icons-14x14.svg               (content/shared/img/icons-14x14.svg)
   content/browser/loop/shared/img/icons-16x16.svg               (content/shared/img/icons-16x16.svg)