Bug 1446975 - Replace synced Tabs sidebar device icons; r?:eoger
MozReview-Commit-ID: GnawrVrfpEz
--- 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);