Bug 1126286: update screenshare icon in conversation view toolbar. r=Standard8
authorMike de Boer <mdeboer@mozilla.com>
Wed, 11 Feb 2015 14:58:55 +0100
changeset 255749 c58869e9273c2c1f3c2978d2f6bf5e02f6fac3e9
parent 255748 218de6606929e693c91010cdce65d909806f06d6
child 255750 fdcb26aac28cc74c14a19942449fd3637e5e4445
push id4610
push userjlund@mozilla.com
push dateMon, 30 Mar 2015 18:32:55 +0000
treeherdermozilla-beta@4df54044d9ef [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersStandard8
bugs1126286
milestone38.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1126286: update screenshare icon in conversation view toolbar. r=Standard8
browser/components/loop/content/shared/css/conversation.css
browser/components/loop/content/shared/img/icons-16x16.svg
--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/browser/components/loop/content/shared/css/conversation.css
@@ -204,20 +204,22 @@
   .btn-mute-video.muted {
     background-image: url(../img/facemute-14x14@2x.png);
   }
 }
 
 /* Screen share button */
 .btn-screen-share {
   /* XXX Replace this with the real button: bug 1126286 */
-  background-image: url(../img/video-inverse-14x14.png);
+  background-image: url(../img/icons-16x16.svg#screen-white);
+  background-size: 16px 16px;
 }
 
 .btn-screen-share.active {
+  background-image: url(../img/icons-16x16.svg#screenmute-white);
   background-color: #6CB23E;
   opacity: 1;
 }
 
 .btn-screen-share.disabled {
   /* XXX Add css here for disabled state: bug 1126286 */
 }
 
--- a/browser/components/loop/content/shared/img/icons-16x16.svg
+++ b/browser/components/loop/content/shared/img/icons-16x16.svg
@@ -23,16 +23,20 @@ use[id$="-hover"] {
 
 use[id$="-active"] {
   fill: #0095dd;
 }
 
 use[id$="-red"] {
   fill: #d74345
 }
+
+use[id$="-white"] {
+  fill: #fff;
+}
 </style>
 <defs style="display:none">
   <path id="audio-shape" fill-rule="evenodd" clip-rule="evenodd" d="M11.429,6.857v2.286c0,1.894-1.535,3.429-3.429,3.429
     c-1.894,0-3.429-1.535-3.429-3.429V6.857H3.429v2.286c0,2.129,1.458,3.913,3.429,4.422v1.293H6.286
     c-0.746,0-1.379,0.477-1.615,1.143h6.658c-0.236-0.665-0.869-1.143-1.615-1.143H9.143v-1.293c1.971-0.508,3.429-2.292,3.429-4.422
     V6.857H11.429z M8,12c1.578,0,2.857-1.279,2.857-2.857V2.857C10.857,1.279,9.578,0,8,0C6.422,0,5.143,1.279,5.143,2.857v6.286
     C5.143,10.721,6.422,12,8,12z"/>
   <path id="block-shape" fill-rule="evenodd" clip-rule="evenodd" d="M8,0C3.582,0,0,3.582,0,8c0,4.418,3.582,8,8,8
@@ -117,20 +121,33 @@ use[id$="-red"] {
     <rect x="7.75" y="7.542" fill="#FFFFFF" width="0.5" height="4"/>
     <polyline fill="#FFFFFF" points="9.25,7.542 8.75,7.542 8.75,11.542 9.25,11.542  "/>
     <rect x="6.75" y="7.542" fill="#FFFFFF" width="0.5" height="4"/>
   </g>
   <g id="leave-shape">
     <polygon fill="#FFFFFF" points="2.08,11.52 2.08,4 8,4 8,2.24 0.32,2.24 0.32,13.28 8,13.28 8,11.52"/>
     <polygon fill="#FFFFFF" points="15.66816,7.77344 9.6,2.27456 9.6,5.6 3.68,5.6 3.68,9.92 9.6,9.92 9.6,13.27232"/>
   </g>
-  <path id="tour-shape" fill="#5A5A5A" d="M8,0C4.831,0,2.262,2.674,2.262,5.972c0,1.393,1.023,3.398,2.206,5.249l0.571,0.866C6.504,14.245,8,16,8,16
-	s1.496-1.755,2.961-3.912l0.571-0.866c1.182-1.852,2.206-3.856,2.206-5.249C13.738,2.674,11.169,0,8,0z M8,7.645
-	c-0.603,0-1.146-0.262-1.534-0.681C6.098,6.566,5.87,6.025,5.87,5.428c0-1.224,0.954-2.217,2.13-2.217s2.13,0.992,2.13,2.217
-	C10.13,6.653,9.177,7.645,8,7.645z"/>
+  <path id="tour-shape" fill="#5A5A5A" d="M8,0C4.831,0,2.262,2.674,2.262,5.972c0,1.393,1.023,3.398,2.206,5.249l0.571,
+    0.866C6.504,14.245,8,16,8,16 s1.496-1.755,2.961-3.912l0.571-0.866c1.182-1.852,2.206-3.856,2.206-5.249C13.738,2.674,
+    11.169,0,8,0z M8,7.645 c-0.603,0-1.146-0.262-1.534-0.681C6.098,6.566,5.87,6.025,5.87,5.428c0-1.224,0.954-2.217,
+    2.13-2.217s2.13,0.992,2.13,2.217 C10.13,6.653,9.177,7.645,8,7.645z"/>
+  <g id="screen-shape">
+    <path d="M12.199,3.915v-0.4c0-0.837-0.65-1.515-1.452-1.515H2.452C1.65,2,1,2.678,1,3.515v6.242
+      c0,0.837,0.65,1.515,1.452,1.515h0.514V5.431c0-0.837,0.65-1.515,1.452-1.515H12.199z"/>
+    <path d="M13.548,4.727H5.253c-0.802,0-1.452,0.678-1.452,1.515v6.242c0,0.837,0.65,1.515,1.452,
+      1.515h8.294 C14.35,14,15,13.322,15,12.485V6.242C15,5.406,14.35,4.727,13.548,4.727z"/>
+  </g>
+  <g id="screenmute-shape">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.55,4.73h-0.54l-8.13,8.13L4.2,13.53
+      C4.46,13.82,4.84,14,5.25,14h8.3c0.8,0,1.45-0.68,1.45-1.52V6.24C15,5.41,14.35,4.73,13.55,4.73z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.21,2.72l-0.99-0.99l-1.15,1.15C11.83,2.36,11.33,2,10.75,2
+      h-8.3C1.65,2,1,2.68,1,3.52v6.24c0,0.83,0.65,1.51,1.45,1.51h0.52V5.43c0-0.84,0.65-1.51,1.45-1.51h6.61l-0.81,
+      0.81H5.25 c-0.8,0-1.45,0.68-1.45,1.51v4.91l-1.89,1.89l0.99,0.99l1-1l8.3-8.3L14.21,2.72z"/>
+  </g>
 </defs>
 <use id="audio"               xlink:href="#audio-shape"/>
 <use id="audio-hover"         xlink:href="#audio-shape"/>
 <use id="audio-active"        xlink:href="#audio-shape"/>
 <use id="block"               xlink:href="#block-shape"/>
 <use id="block-red"           xlink:href="#block-shape"/>
 <use id="block-hover"         xlink:href="#block-shape"/>
 <use id="block-active"        xlink:href="#block-shape"/>
@@ -158,9 +175,11 @@ use[id$="-red"] {
 <use id="trash"               xlink:href="#trash-shape"/>
 <use id="unblock"             xlink:href="#unblock-shape"/>
 <use id="unblock-hover"       xlink:href="#unblock-shape"/>
 <use id="unblock-active"      xlink:href="#unblock-shape"/>
 <use id="video"               xlink:href="#video-shape"/>
 <use id="video-hover"         xlink:href="#video-shape"/>
 <use id="video-active"        xlink:href="#video-shape"/>
 <use id="tour"                xlink:href="#tour-shape"/>
+<use id="screen-white"        xlink:href="#screen-shape"/>
+<use id="screenmute-white"    xlink:href="#screenmute-shape"/>
 </svg>