Bug 1446975 - Replace synced Tabs sidebar device icons. r=eoger
☠☠ backed out by ff301ae67fe8 ☠ ☠
authorAmy Chan <amy_yyc@yahoo.com>
Tue, 27 Mar 2018 23:38:30 -0700
changeset 781494 44e3e7446b02decfd30b66795544441b11f1ae88
parent 781493 dce413699c31023dd641d3438aadd55df81cb864
child 781495 0f2deb58c5d663af4d5b6973fc37d5463ecf1dc3
push id106313
push usermaglione.k@gmail.com
push dateThu, 12 Apr 2018 23:47:02 +0000
reviewerseoger
bugs1446975
milestone61.0a1
Bug 1446975 - Replace synced Tabs sidebar device icons. r=eoger MozReview-Commit-ID: GnawrVrfpEz
browser/base/content/browser-sync.js
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/icons/device-mobile.svg
browser/themes/shared/icons/device-phone.svg
browser/themes/shared/jar.inc.mn
browser/themes/shared/menupanel.inc.css
browser/themes/shared/sync-desktopIcon.svg
browser/themes/shared/sync-mobileIcon.svg
browser/themes/shared/syncedtabs/sidebar.inc.css
browser/themes/shared/urlbar-searchbar.inc.css
browser/themes/windows/jar.mn
services/sync/modules/SyncedTabs.jsm
services/sync/modules/engines/clients.js
toolkit/components/places/PlacesRemoteTabsAutocompleteProvider.jsm
--- a/browser/base/content/browser-sync.js
+++ b/browser/base/content/browser-sync.js
@@ -379,18 +379,17 @@ var gSync = {
       targetDevice.setAttribute("clientId", clientId);
       targetDevice.setAttribute("clientType", clientType);
       targetDevice.setAttribute("label", name);
       fragment.appendChild(targetDevice);
     }
 
     const clients = this.remoteClients;
     for (let client of clients) {
-      const type = client.formfactor && client.formfactor.includes("tablet") ?
-                   "tablet" : client.type;
+      const type = Weave.Service.clientsEngine.getClientType(client.id);
       addTargetDevice(client.id, client.name, type, new Date(client.serverLastModified * 1000));
     }
 
     // "Send to All Devices" menu item
     if (clients.length > 1) {
       const separator = createDeviceNodeFn();
       separator.classList.add("sync-menuitem");
       fragment.appendChild(separator);
--- a/browser/components/syncedtabs/TabListView.js
+++ b/browser/components/syncedtabs/TabListView.js
@@ -226,24 +226,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.setAttribute("clientType", item.clientType);
     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,
+    "clientType": "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,
+    "clientType": "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,
+    "clientType": "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
@@ -44,17 +44,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
@@ -53,18 +53,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
rename from browser/themes/shared/icons/device-mobile.svg
rename to browser/themes/shared/icons/device-phone.svg
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -123,17 +123,17 @@
   skin/classic/browser/bookmark-star-on-tray.svg      (../shared/icons/bookmark-star-on-tray.svg)
   skin/classic/browser/characterEncoding.svg          (../shared/icons/characterEncoding.svg)
   skin/classic/browser/chevron.svg                    (../shared/icons/chevron.svg)
   skin/classic/browser/chevron-animation.svg          (../shared/icons/chevron-animation.svg)
   skin/classic/browser/check.svg                      (../shared/icons/check.svg)
   skin/classic/browser/check-animation.svg            (../shared/icons/check-animation.svg)
   skin/classic/browser/customize.svg                  (../shared/icons/customize.svg)
   skin/classic/browser/developer.svg                  (../shared/icons/developer.svg)
-  skin/classic/browser/device-mobile.svg              (../shared/icons/device-mobile.svg)
+  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/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)
   skin/classic/browser/feed.svg                       (../shared/icons/feed.svg)
   skin/classic/browser/folder.svg                     (../shared/icons/folder.svg)
   skin/classic/browser/forget.svg                     (../shared/icons/forget.svg)
--- a/browser/themes/shared/menupanel.inc.css
+++ b/browser/themes/shared/menupanel.inc.css
@@ -78,17 +78,17 @@
   list-style-image: url("chrome://browser/skin/tab.svg");
 }
 
 #PanelUI-remotetabs-syncnow {
   list-style-image: url("chrome://browser/skin/sync.svg");
 }
 
 #PanelUI-remotetabs-view-managedevices {
-  list-style-image: url("chrome://browser/skin/device-mobile.svg");
+  list-style-image: url("chrome://browser/skin/device-phone.svg");
 }
 
 #appMenuViewHistorySidebar,
 #PanelUI-remotetabs-view-sidebar,
 #panelMenu_viewBookmarksSidebar {
   list-style-image: url("chrome://browser/skin/sidebars.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,35 @@ 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[clientType] > .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[clientType].selected:focus > .item-title-container > .item-icon-container {
   fill: white;
 }
 
-.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;
+.item.client[clientType=phone] > .item-title-container > .item-icon-container {
+  background-image: url("chrome://browser/skin/device-phone.svg");
 }
 
-.item.client.device-image-mobile.selected:focus > .item-title-container > .item-icon-container {
-  fill: white;
+.item.client[clientType=tablet] > .item-title-container > .item-icon-container {
+  background-image: url("chrome://browser/skin/device-tablet.svg");
+}
+
+.item.client[clientType=desktop] > .item-title-container > .item-icon-container {
+  background-image: url("chrome://browser/skin/device-desktop.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/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -146,18 +146,18 @@
   list-style-image: url("chrome://browser/skin/send-to-device.svg");
 }
 
 #pageAction-panel-sendToDevice:-moz-locale-dir(rtl) > .toolbarbutton-icon,
 #pageAction-urlbar-sendToDevice:-moz-locale-dir(rtl) {
   transform: scaleX(-1);
 }
 
-.pageAction-sendToDevice-device[clientType=mobile] {
-  list-style-image: url("chrome://browser/skin/device-mobile.svg");
+.pageAction-sendToDevice-device[clientType=phone] {
+  list-style-image: url("chrome://browser/skin/device-phone.svg");
 }
 
 .pageAction-sendToDevice-device[clientType=tablet] {
   list-style-image: url("chrome://browser/skin/device-tablet.svg");
 }
 
 .pageAction-sendToDevice-device[clientType=desktop] {
   list-style-image: url("chrome://browser/skin/device-desktop.svg");
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -11,18 +11,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/allDownloadsView.css   (downloads/allDownloadsView.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
@@ -71,17 +71,17 @@ let SyncedTabsInternal = {
   },
 
   /* Make a "client" record. Returns a promise for consistency with _makeTab */
   async _makeClient(client) {
     return {
       id: client.id,
       type: "client",
       name: Weave.Service.clientsEngine.getClientName(client.id),
-      isMobile: Weave.Service.clientsEngine.isMobile(client.id),
+      clientType: Weave.Service.clientsEngine.getClientType(client.id),
       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
@@ -227,20 +227,25 @@ ClientEngine.prototype = {
 
   getClientFxaDeviceId(id) {
     if (this._store._remoteClients[id]) {
       return this._store._remoteClients[id].fxaDeviceId;
     }
     return null;
   },
 
-  isMobile: function isMobile(id) {
-    if (this._store._remoteClients[id])
-      return this._store._remoteClients[id].type == DEVICE_TYPE_MOBILE;
-    return false;
+  getClientType(id) {
+    const client = this._store._remoteClients[id];
+    if (client.type == DEVICE_TYPE_DESKTOP) {
+      return "desktop";
+    }
+    if (client.formfactor && client.formfactor.includes("tablet")) {
+      return "tablet"
+    }
+    return "phone";
   },
 
   async _readCommands() {
     let commands = await Utils.jsonLoad("commands", this);
     return commands || {};
   },
 
   /**
--- a/toolkit/components/places/PlacesRemoteTabsAutocompleteProvider.jsm
+++ b/toolkit/components/places/PlacesRemoteTabsAutocompleteProvider.jsm
@@ -130,17 +130,17 @@ var PlacesRemoteTabsAutocompleteProvider
       let title = tab.title;
       if (url.match(re) || (title && title.match(re))) {
         // lookup the client record.
         let client = clients.get(clientId);
         let icon = showRemoteIcons ? tab.icon : null;
         // create the record we return for auto-complete.
         let record = {
           url, title, icon,
-          deviceClass: Weave.Service.clientsEngine.isMobile(clientId) ? "mobile" : "desktop",
+          deviceClass: Weave.Service.clientsEngine.getClientType(clientId),
           deviceName: client.clientName,
         };
         matches.push(record);
       }
     }
     return Promise.resolve(matches);
   },
 };