Bug 1567569 - Add VR and TV device icons. r=markh

Differential Revision: https://phabricator.services.mozilla.com/D41464

--HG--
extra : moz-landing-system : lando

browser/base/content/browser-sync.js

@@ -873,7 +873,10 @@ var gSync = {
         );
         lastModified = new Date(target.clientRecord.serverLastModified * 1000);
       } else {
-        type = target.type === "desktop" ? "desktop" : "phone"; // Normalizing the FxA types just in case.
+        const validFxADeviceTypes = ["desktop", "phone", "tablet", "tv", "vr"];
+        type = validFxADeviceTypes.includes(target.type)
+          ? target.type
+          : "desktop";
         lastModified = null;
       }
       addTargetDevice(target.id, target.name, type, lastModified);

browser/themes/shared/icons/device-tv.svg

@@ -0,0 +1,6 @@
+<!-- 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" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.5 2h-13A1.5 1.5 0 0 0 0 3.5v8A1.5 1.5 0 0 0 1.5 13h3a0.5 0.5 0 0 0 0 1h7a0.5 0.5 0 0 0 0-1h3a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 14.5 2zM14 11H2V4h12z"/>
+</svg>

browser/themes/shared/icons/device-vr.svg

@@ -0,0 +1,7 @@
+<!-- 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" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M13.5 3h-11A2.5 2.5 0 0 0 0 5.5v5A2.5 2.5 0 0 0 2.5 13h3a2 2 0 0 0 1.56-0.75l0.1-0.15 0.38-0.7a0.5 0.5 0 0 1 0.88 0l0.38 0.7 0.1 0.15A2 2 0 0 0 10.46 13h3A2.5 2.5 0 0 0 16 10.5v-5A2.5 2.5 0 0 0 13.5 3zm0.5 7.5a0.5 0.5 0 0 1-0.5 0.5h-3l-0.3-0.56a2.51 2.51 0 0 0-4.4 0L5.5 11h-3A0.5 0.5 0 0 1 2 10.5v-5A0.5 0.5 0 0 1 2.5 5h11A0.5 0.5 0 0 1 14 5.5z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M12.5 6h-9a0.5 0.5 0 0 0 0 1h9a0.5 0.5 0 0 0 0-1z"/>
+</svg>

browser/themes/shared/jar.inc.mn

@@ -165,6 +165,8 @@
   skin/classic/browser/device-phone.svg               (../shared/icons/device-phone.svg)
   skin/classic/browser/device-tablet.svg              (../shared/icons/device-tablet.svg)
   skin/classic/browser/device-desktop.svg             (../shared/icons/device-desktop.svg)
+  skin/classic/browser/device-tv.svg                  (../shared/icons/device-tv.svg)
+  skin/classic/browser/device-vr.svg                  (../shared/icons/device-vr.svg)
   skin/classic/browser/edit-copy.svg                  (../shared/icons/edit-copy.svg)
   skin/classic/browser/edit-cut.svg                   (../shared/icons/edit-cut.svg)
   skin/classic/browser/edit-paste.svg                 (../shared/icons/edit-paste.svg)

browser/themes/shared/syncedtabs/sidebar.inc.css

@@ -123,6 +123,14 @@ body {
   background-image: url("chrome://browser/skin/device-desktop.svg");
 }
 
+.item.client[clientType=tv] > .item-title-container > .item-icon-container {
+  background-image: url("chrome://browser/skin/device-tv.svg");
+}
+
+.item.client[clientType=vr] > .item-title-container > .item-icon-container {
+  background-image: url("chrome://browser/skin/device-vr.svg");
+}
+
 .item.tab > .item-title-container > .item-icon-container {
   background-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
   -moz-context-properties: fill;

browser/themes/shared/urlbar-searchbar.inc.css

@@ -220,6 +220,14 @@
   list-style-image: url("chrome://browser/skin/device-desktop.svg");
 }
 
+.pageAction-sendToDevice-device[clientType=tv] {
+  list-style-image: url("chrome://browser/skin/device-tv.svg");
+}
+
+.pageAction-sendToDevice-device[clientType=vr] {
+  list-style-image: url("chrome://browser/skin/device-vr.svg");
+}
+
 .pageAction-sendToDevice-device.signintosync,
 #pageAction-panel-sendToDevice-fxa,
 #pageAction-urlbar-sendToDevice-fxa {