Bug 1446975 - Replace synced Tabs sidebar device icons; r?:eoger draft
authorAmy Chan <amy_yyc@yahoo.com>
Tue, 27 Mar 2018 23:38:30 -0700
changeset 780991 43290e7442b3
parent 770373 3d21d31141dc
push id106184
push userbmo:amy_yyc@yahoo.com
push dateThu, 12 Apr 2018 11:04:07 +0000
bugs1446975
milestone61.0a1
Bug 1446975 - Replace synced Tabs sidebar device icons; r?:eoger MozReview-Commit-ID: GnawrVrfpEz
browser/components/syncedtabs/TabListView.js
browser/components/syncedtabs/test/browser/browser_sidebar_syncedtabslist.js
browser/themes/linux/jar.mn
browser/themes/osx/jar.mn
browser/themes/shared/sync-desktopIcon.svg
browser/themes/shared/sync-mobileIcon.svg
browser/themes/shared/syncedtabs/sidebar.inc.css
browser/themes/windows/jar.mn
services/sync/modules/SyncedTabs.jsm
services/sync/modules/engines/clients.js
--- a/browser/components/syncedtabs/TabListView.js
+++ b/browser/components/syncedtabs/TabListView.js
@@ -219,24 +219,20 @@ TabListView.prototype = {
     } else {
       itemNode.classList.remove("closed");
     }
     if (item.selected) {
       itemNode.classList.add("selected");
     } else {
       itemNode.classList.remove("selected");
     }
-    if (item.isMobile) {
-      itemNode.classList.add("device-image-mobile");
-    } else {
-      itemNode.classList.add("device-image-desktop");
-    }
     if (item.focused) {
       itemNode.focus();
     }
+    itemNode.classList.add(`device-image-${item.formFactor}`);
     itemNode.dataset.id = item.id;
     itemNode.querySelector(".item-title").textContent = item.name;
   },
 
   /**
    * Update the element representing a tab, ensuring it's in sync with the
    * underlying data.
    * @param {tab} item - Item to use as a source.
--- a/browser/components/syncedtabs/test/browser/browser_sidebar_syncedtabslist.js
+++ b/browser/components/syncedtabs/test/browser/browser_sidebar_syncedtabslist.js
@@ -1,34 +1,34 @@
 "use strict";
 
 const FIXTURE = [
   {
     "id": "7cqCr77ptzX3",
     "type": "client",
     "lastModified": 1492201200,
     "name": "zcarter's Nightly on MacBook-Pro-25",
-    "isMobile": false,
+    "formFactor": "desktop",
     "tabs": [
       {
         "type": "tab",
         "title": "Firefox for Android — Mobile Web browser — More ways to customize and protect your privacy — Mozilla",
         "url": "https://www.mozilla.org/en-US/firefox/android/?utm_source=firefox-browser&utm_medium=firefox-browser&utm_campaign=synced-tabs-sidebar",
         "icon": "chrome://mozapps/skin/places/defaultFavicon.svg",
         "client": "7cqCr77ptzX3",
         "lastUsed": 1452124677
       }
     ]
   },
   {
     "id": "2xU5h-4bkWqA",
     "type": "client",
     "lastModified": 1492201200,
     "name": "laptop",
-    "isMobile": false,
+    "formFactor": "desktop",
     "tabs": [
       {
         "type": "tab",
         "title": "Firefox for iOS — Mobile Web browser for your iPhone, iPad and iPod touch — Mozilla",
         "url": "https://www.mozilla.org/en-US/firefox/ios/?utm_source=firefox-browser&utm_medium=firefox-browser&utm_campaign=synced-tabs-sidebar",
         "icon": "moz-anno:favicon:https://www.mozilla.org/media/img/firefox/favicon.dc6635050bf5.ico",
         "client": "2xU5h-4bkWqA",
         "lastUsed": 1451519425
@@ -52,17 +52,17 @@ const FIXTURE = [
       }
     ]
   },
   {
     "id": "OL3EJCsdb2JD",
     "type": "client",
     "lastModified": 1492201200,
     "name": "desktop",
-    "isMobile": false,
+    "formFactor": "desktop",
     "tabs": []
   }
 ];
 
 let originalSyncedTabsInternal = null;
 
 async function testClean() {
   let syncedTabsDeckComponent = window.SidebarUI.browser.contentWindow.syncedTabsDeckComponent;
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -45,17 +45,15 @@ browser.jar:
   skin/classic/browser/places/downloads.png           (places/downloads.png)
   skin/classic/browser/preferences/alwaysAsk.png      (preferences/alwaysAsk.png)
   skin/classic/browser/preferences/preferences.css    (preferences/preferences.css)
 * skin/classic/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
 * skin/classic/browser/preferences/in-content/dialog.css      (preferences/in-content/dialog.css)
   skin/classic/browser/preferences/applications.css   (preferences/applications.css)
   skin/classic/browser/tabbrowser/tabDragIndicator.png      (tabbrowser/tabDragIndicator.png)
 
-  skin/classic/browser/sync-desktopIcon.svg  (../shared/sync-desktopIcon.svg)
-  skin/classic/browser/sync-mobileIcon.svg  (../shared/sync-mobileIcon.svg)
   skin/classic/browser/e10s-64@2x.png (../shared/e10s-64@2x.png)
 
 [extensions/{972ce4c6-7e08-4474-a285-3208198ce6fd}] chrome.jar:
 % override chrome://browser/skin/feeds/audioFeedIcon.png              chrome://browser/skin/feeds/feedIcon.png
 % override chrome://browser/skin/feeds/audioFeedIcon16.png            chrome://browser/skin/feeds/feedIcon16.png
 % override chrome://browser/skin/feeds/videoFeedIcon.png              chrome://browser/skin/feeds/feedIcon.png
 % override chrome://browser/skin/feeds/videoFeedIcon16.png            chrome://browser/skin/feeds/feedIcon16.png
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -54,18 +54,16 @@ browser.jar:
   skin/classic/browser/preferences/application.png          (preferences/application.png)
   skin/classic/browser/preferences/saveFile.png             (preferences/saveFile.png)
 * skin/classic/browser/preferences/preferences.css          (preferences/preferences.css)
 * skin/classic/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
 * skin/classic/browser/preferences/in-content/dialog.css      (preferences/in-content/dialog.css)
   skin/classic/browser/preferences/applications.css         (preferences/applications.css)
   skin/classic/browser/tabbrowser/tabDragIndicator.png                   (tabbrowser/tabDragIndicator.png)
   skin/classic/browser/tabbrowser/tabDragIndicator@2x.png                (tabbrowser/tabDragIndicator@2x.png)
-  skin/classic/browser/sync-desktopIcon.svg  (../shared/sync-desktopIcon.svg)
-  skin/classic/browser/sync-mobileIcon.svg  (../shared/sync-mobileIcon.svg)
   skin/classic/browser/e10s-64@2x.png                                  (../shared/e10s-64@2x.png)
 
 [extensions/{972ce4c6-7e08-4474-a285-3208198ce6fd}] chrome.jar:
 % override chrome://browser/skin/feeds/audioFeedIcon.png                   chrome://browser/skin/feeds/feedIcon.png
 % override chrome://browser/skin/feeds/audioFeedIcon16.png                 chrome://browser/skin/feeds/feedIcon16.png
 % override chrome://browser/skin/feeds/videoFeedIcon.png                   chrome://browser/skin/feeds/feedIcon.png
 % override chrome://browser/skin/feeds/videoFeedIcon16.png                 chrome://browser/skin/feeds/feedIcon16.png
 % override chrome://browser/skin/notification-icons/geo-detailed.svg       chrome://browser/skin/notification-icons/geo.svg
deleted file mode 100644
--- a/browser/themes/shared/sync-desktopIcon.svg
+++ /dev/null
@@ -1,8 +0,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"
-     width="16" height="16" viewBox="0 0 16 16">
-  <path fill="context-fill" d="M15,14H1a1,1,0,0,1-1-1V12.526H16V13A1,1,0,0,1,15,14ZM1,4A1,1,0,0,1,2,3H14a1,1,0,0,1,1,1v8H1V4Zm1,7H14V4H2v7Z"/>
-  <rect fill="context-fill" fill-opacity="0.15" x="2" y="4" width="12" height="7"/>
-</svg>
deleted file mode 100644
--- a/browser/themes/shared/sync-mobileIcon.svg
+++ /dev/null
@@ -1,8 +0,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"
-     width="16" height="16" viewBox="0 0 16 16">
-  <path fill="context-fill" d="M12,16H4a1,1,0,0,1-1-1V1A1,1,0,0,1,4,0h8a1,1,0,0,1,1,1V15A1,1,0,0,1,12,16Zm-4-.684a0.785,0.785,0,1,0-.785-0.785A0.785,0.785,0,0,0,8,15.316ZM12,2H4V13h8V2Z"/>
-  <rect fill="context-fill" fill-opacity="0.15" x="4" y="2" width="8" height="11"/>
-</svg>
--- a/browser/themes/shared/syncedtabs/sidebar.inc.css
+++ b/browser/themes/shared/syncedtabs/sidebar.inc.css
@@ -83,34 +83,40 @@ body {
 .client .item.tab > .item-title-container {
   padding-inline-start: 35px;
 }
 
 .item.tab > .item-title-container {
   padding-inline-start: 20px;
 }
 
-.item.client.device-image-desktop > .item-title-container > .item-icon-container {
-  background-image: url("chrome://browser/skin/sync-desktopIcon.svg");
+.item.client.device-image-desktop > .item-title-container > .item-icon-container,
+.item.client.device-image-tablet > .item-title-container > .item-icon-container,
+.item.client.device-image-mobile > .item-title-container > .item-icon-container
+ {
   -moz-context-properties: fill;
   fill: #4d4d4d;
 }
 
-.item.client.device-image-desktop.selected:focus > .item-title-container > .item-icon-container {
+.item.client.device-image-desktop.selected:focus > .item-title-container > .item-icon-container,
+.item.client.device-image-tablet.selected:focus > .item-title-container > .item-icon-container,
+.item.client.device-image-mobile.selected:focus > .item-title-container > .item-icon-container {
   fill: white;
 }
 
+.item.client.device-image-desktop > .item-title-container > .item-icon-container {
+  background-image: url("chrome://browser/skin/device-desktop.svg");
+}
+
 .item.client.device-image-mobile > .item-title-container > .item-icon-container {
-  background-image: url("chrome://browser/skin/sync-mobileIcon.svg");
-  -moz-context-properties: fill;
-  fill: #4d4d4d;
+  background-image: url("chrome://browser/skin/device-mobile.svg");
 }
 
-.item.client.device-image-mobile.selected:focus > .item-title-container > .item-icon-container {
-  fill: white;
+.item.client.device-image-tablet > .item-title-container > .item-icon-container {
+  background-image: url("chrome://browser/skin/device-tablet.svg");
 }
 
 .item.tab > .item-title-container > .item-icon-container {
   background-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -12,18 +12,16 @@ browser.jar:
 * skin/classic/browser/compacttheme.css
   skin/classic/browser/monitor.png
   skin/classic/browser/monitor_16-10.png
   skin/classic/browser/pageInfo.css
   skin/classic/browser/pageInfo.png
 * skin/classic/browser/searchbar.css
   skin/classic/browser/setDesktopBackground.css
   skin/classic/browser/slowStartup-16.png
-  skin/classic/browser/sync-desktopIcon.svg  (../shared/sync-desktopIcon.svg)
-  skin/classic/browser/sync-mobileIcon.svg  (../shared/sync-mobileIcon.svg)
   skin/classic/browser/webRTC-indicator.css  (../shared/webRTC-indicator.css)
 * skin/classic/browser/controlcenter/panel.css                 (controlcenter/panel.css)
   skin/classic/browser/customizableui/menu-arrow.svg           (customizableui/menu-arrow.svg)
 * skin/classic/browser/customizableui/panelUI.css       (customizableui/panelUI.css)
 * skin/classic/browser/downloads/allDownloadsViewOverlay.css   (downloads/allDownloadsViewOverlay.css)
 * skin/classic/browser/downloads/downloads.css                 (downloads/downloads.css)
   skin/classic/browser/feeds/feedIcon.png                      (feeds/feedIcon.png)
   skin/classic/browser/feeds/feedIcon16.png                    (feeds/feedIcon16.png)
--- a/services/sync/modules/SyncedTabs.jsm
+++ b/services/sync/modules/SyncedTabs.jsm
@@ -67,21 +67,28 @@ let SyncedTabsInternal = {
       icon,
       client: client.id,
       lastUsed: tab.lastUsed,
     };
   },
 
   /* Make a "client" record. Returns a promise for consistency with _makeTab */
   async _makeClient(client) {
+    let formFactor;
+    if (Weave.Service.clientsEngine.isMobile(client.id)) {
+      formFactor = (Weave.Service.clientsEngine.getFormFactor(client.id) == "phone") ? "mobile" : "tablet";
+    } else {
+      formFactor = "desktop";
+    }
+
     return {
       id: client.id,
       type: "client",
       name: Weave.Service.clientsEngine.getClientName(client.id),
-      isMobile: Weave.Service.clientsEngine.isMobile(client.id),
+      formFactor,
       lastModified: client.lastModified * 1000, // sec to ms
       tabs: []
     };
   },
 
   _tabMatchesFilter(tab, filter) {
     let reFilter = new RegExp(escapeRegExp(filter), "i");
     return tab.url.match(reFilter) || tab.title.match(reFilter);
--- a/services/sync/modules/engines/clients.js
+++ b/services/sync/modules/engines/clients.js
@@ -223,16 +223,20 @@ ClientEngine.prototype = {
 
   getClientFxaDeviceId(id) {
     if (this._store._remoteClients[id]) {
       return this._store._remoteClients[id].fxaDeviceId;
     }
     return null;
   },
 
+ getFormFactor(id) {
+    return this._store._remoteClients[id].formfactor || null;
+  },
+
   isMobile: function isMobile(id) {
     if (this._store._remoteClients[id])
       return this._store._remoteClients[id].type == DEVICE_TYPE_MOBILE;
     return false;
   },
 
   async _readCommands() {
     let commands = await Utils.jsonLoad("commands", this);