Bug 1387077 - Reimplement Pocket animation in the Page Action area. r=adw

MozReview-Commit-ID: 5pJ96un8W5t

--HG--
extra : rebase_source : bef396788013f8ed60d72b01bf59e34e01d36209
This commit is contained in:
Jared Wein 2017-08-08 11:56:49 -04:00
Родитель 7cdf3d96ac
Коммит 8880224f6b
10 изменённых файлов: 429 добавлений и 120 удалений

Просмотреть файл

@ -69,6 +69,7 @@ var BrowserPageActions = {
this._appendPanelSeparator(action); this._appendPanelSeparator(action);
return; return;
} }
action.onBeforePlacedInWindow(window);
this.placeActionInPanel(action, panelInsertBeforeID); this.placeActionInPanel(action, panelInsertBeforeID);
this.placeActionInUrlbar(action, urlbarInsertBeforeID); this.placeActionInUrlbar(action, urlbarInsertBeforeID);
}, },
@ -176,7 +177,7 @@ var BrowserPageActions = {
let panelNode = document.getElementById(panelNodeID); let panelNode = document.getElementById(panelNodeID);
if (panelNode) { if (panelNode) {
panelNode.hidePopup(); panelNode.hidePopup();
return; return null;
} }
panelNode = document.createElement("panel"); panelNode = document.createElement("panel");
@ -205,9 +206,18 @@ var BrowserPageActions = {
let popupSet = document.getElementById("mainPopupSet"); let popupSet = document.getElementById("mainPopupSet");
popupSet.appendChild(panelNode); popupSet.appendChild(panelNode);
panelNode.addEventListener("popuphidden", () => { panelNode.addEventListener("popuphidden", () => {
if (iframeNode) {
action.onIframeHidden(iframeNode, panelNode);
}
panelNode.remove(); panelNode.remove();
}, { once: true }); }, { once: true });
panelNode.addEventListener("popuphiding", () => {
if (iframeNode) {
action.onIframeHiding(iframeNode, panelNode);
}
}, { once: true });
if (panelViewNode) { if (panelViewNode) {
action.subview.onPlaced(panelViewNode); action.subview.onPlaced(panelViewNode);
action.subview.onShowing(panelViewNode); action.subview.onShowing(panelViewNode);
@ -216,13 +226,22 @@ var BrowserPageActions = {
this.panelNode.hidePopup(); this.panelNode.hidePopup();
let urlbarNodeID = this._urlbarButtonNodeIDForActionID(action.id); let urlbarNodeID = this._urlbarButtonNodeIDForActionID(action.id);
let anchorNode = let urlbarNode = document.getElementById(urlbarNodeID);
document.getElementById(urlbarNodeID) || this.mainButtonNode; let anchorNode;
if (urlbarNode && !urlbarNode.hidden) {
anchorNode = action.anchorIDOverride ?
document.getElementById(action.anchorIDOverride) :
urlbarNode;
} else {
anchorNode = this.mainButtonNode;
}
panelNode.openPopup(anchorNode, "bottomcenter topright"); panelNode.openPopup(anchorNode, "bottomcenter topright");
if (iframeNode) { if (iframeNode) {
action.onIframeShown(iframeNode, panelNode); action.onIframeShown(iframeNode, panelNode);
} }
return panelNode;
}, },
get _tempPanelID() { get _tempPanelID() {
@ -411,6 +430,14 @@ var BrowserPageActions = {
} }
}, },
doCommandForAction(action) {
if (action.subview || action.wantsIframe) {
this._toggleTempPanelForAction(action);
return;
}
action.onCommand();
},
/** /**
* Returns the action for a node. * Returns the action for a node.
* *

Просмотреть файл

@ -664,7 +664,7 @@ html|input.urlbar-input[textoverflow]:not([focused]) {
} }
#urlbar[pageproxystate="invalid"] > #urlbar-icons > .urlbar-icon, #urlbar[pageproxystate="invalid"] > #urlbar-icons > .urlbar-icon,
#urlbar[pageproxystate="invalid"] > #urlbar-icons > #star-button-box > .urlbar-icon, #urlbar[pageproxystate="invalid"] > #urlbar-icons > .urlbar-icon-wrapper > .urlbar-icon,
.urlbar-go-button[pageproxystate="valid"], .urlbar-go-button[pageproxystate="valid"],
.urlbar-go-button:not([parentfocused="true"]), .urlbar-go-button:not([parentfocused="true"]),
#urlbar[pageproxystate="invalid"] > #identity-box > #blocked-permissions-container, #urlbar[pageproxystate="invalid"] > #identity-box > #blocked-permissions-container,

Просмотреть файл

@ -899,6 +899,7 @@
onclick="BrowserPageActions.mainButtonClicked(event);"/> onclick="BrowserPageActions.mainButtonClicked(event);"/>
<hbox id="star-button-box" <hbox id="star-button-box"
hidden="true" hidden="true"
class="urlbar-icon-wrapper"
context="pageActionPanelContextMenu" context="pageActionPanelContextMenu"
oncontextmenu="BrowserPageActions.onContextMenu(event);" oncontextmenu="BrowserPageActions.onContextMenu(event);"
onclick="BrowserPageActions.bookmark.onUrlbarNodeClicked(event);"> onclick="BrowserPageActions.bookmark.onUrlbarNodeClicked(event);">

130
browser/extensions/pocket/bootstrap.js поставляемый
Просмотреть файл

@ -10,22 +10,24 @@ const {classes: Cc, interfaces: Ci, utils: Cu, manager: Cm} = Components;
Cu.import("resource://gre/modules/XPCOMUtils.jsm"); Cu.import("resource://gre/modules/XPCOMUtils.jsm");
Cu.import("resource://services-common/utils.js"); Cu.import("resource://services-common/utils.js");
Cu.import("resource://gre/modules/AppConstants.jsm"); Cu.import("resource://gre/modules/AppConstants.jsm");
XPCOMUtils.defineLazyModuleGetter(this, "Services", XPCOMUtils.defineLazyModuleGetter(this, "AboutPocket",
"resource://gre/modules/Services.jsm"); "chrome://pocket/content/AboutPocket.jsm");
XPCOMUtils.defineLazyModuleGetter(this, "RecentWindow", XPCOMUtils.defineLazyModuleGetter(this, "AddonManagerPrivate",
"resource:///modules/RecentWindow.jsm"); "resource://gre/modules/AddonManager.jsm");
XPCOMUtils.defineLazyModuleGetter(this, "BrowserUtils",
"resource://gre/modules/BrowserUtils.jsm");
XPCOMUtils.defineLazyModuleGetter(this, "CustomizableUI", XPCOMUtils.defineLazyModuleGetter(this, "CustomizableUI",
"resource:///modules/CustomizableUI.jsm"); "resource:///modules/CustomizableUI.jsm");
XPCOMUtils.defineLazyModuleGetter(this, "PageActions", XPCOMUtils.defineLazyModuleGetter(this, "PageActions",
"resource:///modules/PageActions.jsm"); "resource:///modules/PageActions.jsm");
XPCOMUtils.defineLazyModuleGetter(this, "AddonManagerPrivate",
"resource://gre/modules/AddonManager.jsm");
XPCOMUtils.defineLazyModuleGetter(this, "ReaderMode",
"resource://gre/modules/ReaderMode.jsm");
XPCOMUtils.defineLazyModuleGetter(this, "Pocket", XPCOMUtils.defineLazyModuleGetter(this, "Pocket",
"chrome://pocket/content/Pocket.jsm"); "chrome://pocket/content/Pocket.jsm");
XPCOMUtils.defineLazyModuleGetter(this, "AboutPocket", XPCOMUtils.defineLazyModuleGetter(this, "ReaderMode",
"chrome://pocket/content/AboutPocket.jsm"); "resource://gre/modules/ReaderMode.jsm");
XPCOMUtils.defineLazyModuleGetter(this, "RecentWindow",
"resource:///modules/RecentWindow.jsm");
XPCOMUtils.defineLazyModuleGetter(this, "Services",
"resource://gre/modules/Services.jsm");
XPCOMUtils.defineLazyGetter(this, "gPocketBundle", function() { XPCOMUtils.defineLazyGetter(this, "gPocketBundle", function() {
return Services.strings.createBundle("chrome://pocket/locale/pocket.properties"); return Services.strings.createBundle("chrome://pocket/locale/pocket.properties");
}); });
@ -158,6 +160,7 @@ function isPocketEnabled() {
var PocketPageAction = { var PocketPageAction = {
pageAction: null, pageAction: null,
urlbarNode: null,
get shouldUse() { get shouldUse() {
return !Services.prefs.getBranch(PREF_BRANCH) return !Services.prefs.getBranch(PREF_BRANCH)
@ -180,12 +183,72 @@ var PocketPageAction = {
title: gPocketBundle.GetStringFromName("pocket-button.label"), title: gPocketBundle.GetStringFromName("pocket-button.label"),
shownInUrlbar: true, shownInUrlbar: true,
wantsIframe: true, wantsIframe: true,
urlbarIDOverride: "pocket-button-box",
anchorIDOverride: "pocket-button",
_insertBeforeActionID: PageActions.ACTION_ID_BOOKMARK_SEPARATOR, _insertBeforeActionID: PageActions.ACTION_ID_BOOKMARK_SEPARATOR,
_urlbarNodeInMarkup: true,
onBeforePlacedInWindow(window) {
let doc = window.document;
if (doc.getElementById("pocket-button-box")) {
return;
}
let wrapper = doc.createElement("hbox");
wrapper.id = "pocket-button-box";
wrapper.classList.add("urlbar-icon-wrapper");
wrapper.setAttribute("context", "pageActionPanelContextMenu");
wrapper.addEventListener("contextmenu", event => {
window.BrowserPageActions.onContextMenu(event);
});
let animatableBox = doc.createElement("hbox");
animatableBox.id = "pocket-animatable-box";
let animatableImage = doc.createElement("image");
animatableImage.id = "pocket-animatable-image";
let pocketButton = doc.createElement("image");
pocketButton.id = "pocket-button";
pocketButton.classList.add("urlbar-icon");
wrapper.appendChild(pocketButton);
wrapper.appendChild(animatableBox);
animatableBox.appendChild(animatableImage);
let iconBox = doc.getElementById("urlbar-icons");
iconBox.appendChild(wrapper);
wrapper.hidden = true;
wrapper.addEventListener("click", event => {
PocketPageAction.onUrlbarNodeClicked(event);
});
},
onPlacedInPanel(panelNode, urlbarNode) { onPlacedInPanel(panelNode, urlbarNode) {
PocketOverlay.onWindowOpened(panelNode.ownerGlobal); PocketOverlay.onWindowOpened(panelNode.ownerGlobal);
}, },
onIframeShown(iframe, panel) { onIframeShown(iframe, panel) {
Pocket.onShownInPhotonPageActionPanel(panel, iframe); Pocket.onShownInPhotonPageActionPanel(panel, iframe);
let doc = panel.ownerDocument;
let urlbarNode = doc.getElementById("pocket-button-box");
if (!urlbarNode || urlbarNode.hidden) {
return;
}
PocketPageAction.urlbarNode = urlbarNode;
PocketPageAction.urlbarNode.setAttribute("open", "true");
if (Services.prefs.getBoolPref("toolkit.cosmeticAnimations.enabled")) {
PocketPageAction.urlbarNode.setAttribute("animate", "true");
}
},
onIframeHiding(iframe, panel) {
if (iframe.getAttribute("itemAdded") == "true") {
PocketPageAction.startLibraryAnimation(iframe.ownerDocument);
}
},
onIframeHidden(iframe, panel) {
if (!PocketPageAction.urlbarNode) {
return;
}
PocketPageAction.urlbarNode.removeAttribute("animate");
PocketPageAction.urlbarNode.removeAttribute("open");
PocketPageAction.urlbarNode = null;
}, },
})); }));
} }
@ -195,9 +258,56 @@ var PocketPageAction = {
if (!this.pageAction) { if (!this.pageAction) {
return; return;
} }
for (let win of browserWindows()) {
let doc = win.document;
let pocketButtonBox = doc.getElementById("pocket-button-box");
if (pocketButtonBox) {
pocketButtonBox.remove();
}
}
this.pageAction.remove(); this.pageAction.remove();
this.pageAction = null; this.pageAction = null;
}, },
onUrlbarNodeClicked(event) {
if (event.type == "click" && event.button != 0) {
return;
}
BrowserUtils.setToolbarButtonHeightProperty(event.target);
let win = event.target.ownerGlobal;
let browserPageActions = win.BrowserPageActions;
browserPageActions.doCommandForAction(PocketPageAction.pageAction);
},
startLibraryAnimation(doc) {
var libraryButton = doc.getElementById("library-button");
if (!Services.prefs.getBoolPref("toolkit.cosmeticAnimations.enabled") ||
!libraryButton ||
libraryButton.getAttribute("cui-areatype") == "menu-panel" ||
libraryButton.getAttribute("overflowedItem") == "true" ||
!libraryButton.closest("#nav-bar")) {
return;
}
libraryButton.removeAttribute("fade");
libraryButton.setAttribute("animate", "pocket");
libraryButton.addEventListener("animationend", PocketPageAction.onLibraryButtonAnimationEnd);
},
onLibraryButtonAnimationEnd(event) {
let doc = event.target.ownerDocument;
let libraryButton = doc.getElementById("library-button");
if (event.animationName.startsWith("library-pocket-animation")) {
libraryButton.setAttribute("fade", "true");
} else if (event.animationName == "library-pocket-fade") {
libraryButton.removeEventListener("animationend", PocketPageAction.onLibraryButtonAnimationEnd);
libraryButton.removeAttribute("animate");
libraryButton.removeAttribute("fade");
}
},
}; };
// PocketContextMenu // PocketContextMenu

Просмотреть файл

@ -225,6 +225,7 @@ var pktUI = (function() {
onShow() { onShow() {
var saveLinkMessageId = "saveLink"; var saveLinkMessageId = "saveLink";
_lastAddSucceeded = false; _lastAddSucceeded = false;
getPanelFrame().setAttribute("itemAdded", "false");
// Send error message for invalid url // Send error message for invalid url
if (!isValidURL) { if (!isValidURL) {
@ -257,6 +258,7 @@ var pktUI = (function() {
}; };
pktUIMessaging.sendMessageToPanel(panelId, saveLinkMessageId, successResponse); pktUIMessaging.sendMessageToPanel(panelId, saveLinkMessageId, successResponse);
_lastAddSucceeded = true; _lastAddSucceeded = true;
getPanelFrame().setAttribute("itemAdded", "true");
}, },
error(error, request) { error(error, request) {
// If user is not authorized show singup page // If user is not authorized show singup page
@ -487,6 +489,7 @@ var pktUI = (function() {
var successResponse = {status: "success"}; var successResponse = {status: "success"};
pktUIMessaging.sendResponseMessageToPanel(panelId, _deleteItemMessageId, successResponse); pktUIMessaging.sendResponseMessageToPanel(panelId, _deleteItemMessageId, successResponse);
_lastAddSucceeded = false; _lastAddSucceeded = false;
getPanelFrame().setAttribute("itemAdded", "false");
}, },
error(error, response) { error(error, response) {
pktUIMessaging.sendErrorResponseMessageToPanel(panelId, _deleteItemMessageId, error); pktUIMessaging.sendErrorResponseMessageToPanel(panelId, _deleteItemMessageId, error);

Просмотреть файл

@ -1,157 +1,243 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public <!-- 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 - 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/. --> - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="18" fill="context-fill"> <svg xmlns="http://www.w3.org/2000/svg" width="260" height="16" fill="context-fill">
<svg width="20" height="18"> <svg>
<defs> <defs>
<filter id="a" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox"> <filter id="a">
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/> <feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter> </filter>
</defs> </defs>
<g> <g>
<g fill-opacity=".25"> <g>
<path d="M10 16.41c-4.527 0 -8.179 -3.826 -8.179 -8.352v-4.097a2.05 2.05 0 0 1 2.05 -2.05h12.253a2.05 2.05 0 0 1 2.049 2.05v4.097c0 4.526 -3.648 8.352 -8.174 8.352z"/> <path d="M10.016 15.253c-4.525 0 -8.195 -3.669 -8.195 -8.195v-4.097a2.048 2.048 0 0 1 2.05 -2.05h12.292a2.048 2.048 0 0 1 2.049 2.05v4.097c0 4.526 -3.67 8.195 -8.196 8.195z"/>
<path d="M10 16.41c-4.527 0 -8.179 -3.826 -8.179 -8.352v-4.097a2.05 2.05 0 0 1 2.05 -2.05h12.253a2.05 2.05 0 0 1 2.049 2.05v4.097c0 4.526 -3.648 8.352 -8.174 8.352z"/> </g>
<path d="M10 16.41c-4.527 0 -8.179 -3.826 -8.179 -8.352v-4.097a2.05 2.05 0 0 1 2.05 -2.05h12.253a2.05 2.05 0 0 1 2.049 2.05v4.097c0 4.526 -3.648 8.352 -8.174 8.352z"/> <g filter="url(#a)" transform="translate(1.749 1.092) scale(1.02438)">
<path d="M10 16.41c-4.527 0 -8.179 -3.826 -8.179 -8.352v-4.097a2.05 2.05 0 0 1 2.05 -2.05h12.253a2.05 2.05 0 0 1 2.049 2.05v4.097c0 4.526 -3.648 8.352 -8.174 8.352z"/> <g>
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
</g>
</g> </g>
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#a)" transform="translate(10.005 9.286) scale(1.02438)"/>
</g> </g>
</svg> </svg>
<svg width="20" height="18" x="20"> <svg x="20">
<defs> <defs>
<filter id="b" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox"> <filter id="b">
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/> <feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter> </filter>
</defs> </defs>
<g> <g>
<g fill-opacity=".25"> <g>
<path d="M10 16.41c-4.527 0 -8.179 -3.826 -8.179 -8.352v-4.097a2.05 2.05 0 0 1 2.05 -2.05h12.253a2.05 2.05 0 0 1 2.049 2.05v4.097c0 4.526 -3.648 8.352 -8.174 8.352z"/> <path d="M10.016 15.253c-4.525 0 -8.195 -3.669 -8.195 -8.195v-4.097a2.048 2.048 0 0 1 2.05 -2.05h12.292a2.048 2.048 0 0 1 2.049 2.05v4.097c0 4.526 -3.67 8.195 -8.196 8.195z"/>
<path d="M10 16.41c-4.527 0 -8.179 -3.826 -8.179 -8.352v-4.097a2.05 2.05 0 0 1 2.05 -2.05h12.253a2.05 2.05 0 0 1 2.049 2.05v4.097c0 4.526 -3.648 8.352 -8.174 8.352z"/> </g>
<path d="M10 16.41c-4.527 0 -8.179 -3.826 -8.179 -8.352v-4.097a2.05 2.05 0 0 1 2.05 -2.05h12.253a2.05 2.05 0 0 1 2.049 2.05v4.097c0 4.526 -3.648 8.352 -8.174 8.352z"/> <g filter="url(#b)" transform="translate(1.749 1.092) scale(1.02438)">
<path d="M10 16.41c-4.527 0 -8.179 -3.826 -8.179 -8.352v-4.097a2.05 2.05 0 0 1 2.05 -2.05h12.253a2.05 2.05 0 0 1 2.049 2.05v4.097c0 4.526 -3.648 8.352 -8.174 8.352z"/> <g>
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
</g>
</g> </g>
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#b)" transform="translate(10.005 9.286) scale(1.02438)"/>
</g> </g>
</svg> </svg>
<svg width="20" height="18" x="40"> <svg x="40">
<defs> <defs>
<filter id="c" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox"> <filter id="c">
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/> <feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter> </filter>
</defs> </defs>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <g>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <g>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <path d="M10.016 15.97c-4.978 0 -9.014 -4.036 -9.014 -9.014v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.521a2.253 2.253 0 0 1 2.254 2.254v4.507c0 4.978 -4.036 9.014 -9.015 9.014z"/>
<path fill="#EE4055" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> </g>
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#c)" transform="translate(10.005 10.054) scale(1.02438)"/> <g filter="url(#c)" transform="translate(1.749 1.86) scale(1.02438)">
<g>
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
</g>
</g>
</g>
</svg> </svg>
<svg width="20" height="18" x="60"> <svg x="60">
<defs> <defs>
<filter id="d" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox"> <filter id="d">
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/> <feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter> </filter>
</defs> </defs>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <g>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <g>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <path d="M10.016 15.97c-4.978 0 -9.014 -4.036 -9.014 -9.014v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.521a2.253 2.253 0 0 1 2.254 2.254v4.507c0 4.978 -4.036 9.014 -9.015 9.014z"/>
<path fill="#EE4055" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> </g>
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#d)" transform="translate(10.009 10.057) scale(1.02438)"/> <g filter="url(#d)" transform="translate(1.752 1.862) scale(1.02438)">
<g>
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
</g>
</g>
</g>
</svg> </svg>
<svg width="20" height="18" x="80"> <svg x="80">
<defs> <defs>
<filter id="e" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox"> <filter id="e">
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/> <feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter> </filter>
</defs> </defs>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <g>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <g>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <path d="M10.016 15.97c-4.978 0 -9.014 -4.036 -9.014 -9.014v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.521a2.253 2.253 0 0 1 2.254 2.254v4.507c0 4.978 -4.036 9.014 -9.015 9.014z"/>
<path fill="#EE4055" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> </g>
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#e)" transform="translate(10.005 10.054) scale(1.02438)"/> <g filter="url(#e)" transform="translate(1.749 1.86) scale(1.02438)">
<g>
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
</g>
</g>
</g>
</svg> </svg>
<svg width="20" height="18" x="100"> <svg x="100">
<defs> <defs>
<filter id="f" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox"> <filter id="f">
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/> <feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter> </filter>
</defs> </defs>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <g>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <g>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <path d="M10.016 15.94c-4.958 0 -8.979 -4.021 -8.979 -8.98v-4.49a2.244 2.244 0 0 1 2.245 -2.244h13.469a2.244 2.244 0 0 1 2.245 2.245v4.49c0 4.958 -4.02 8.979 -8.98 8.979z"/>
<path fill="#EE4055" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> </g>
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#f)" transform="translate(10.005 10.016) scale(1.02438)"/> <g filter="url(#f)" transform="translate(1.749 1.817) scale(1.02438)">
<g>
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
</g>
</g>
</g>
</svg> </svg>
<svg width="20" height="18" x="120"> <svg x="120">
<defs> <defs>
<filter id="g" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox"> <filter id="g">
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/> <feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter> </filter>
</defs> </defs>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <g>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <g>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <path d="M10.016 15.858c-4.907 0 -8.886 -3.979 -8.886 -8.886v-4.443a2.221 2.221 0 0 1 2.222 -2.222h13.33a2.221 2.221 0 0 1 2.22 2.222v4.443c0 4.907 -3.978 8.886 -8.886 8.886z"/>
<path fill="#EE4055" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> </g>
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#g)" transform="translate(10.005 9.925) scale(1.02438)"/> <g filter="url(#g)" transform="translate(1.749 1.705) scale(1.02438)">
<g>
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
</g>
</g>
</g>
</svg> </svg>
<svg width="20" height="18" x="140"> <svg x="140">
<defs> <defs>
<filter id="h" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox"> <filter id="h">
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/> <feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter> </filter>
</defs> </defs>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <g>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <g>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <path d="M10.016 15.743c-4.835 0 -8.755 -3.92 -8.755 -8.755v-4.377a2.188 2.188 0 0 1 2.19 -2.19h13.132c1.21 0 2.189 0.98 2.189 2.19v4.377c0 4.835 -3.92 8.755 -8.756 8.755z"/>
<path fill="#EE4055" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> </g>
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#h)" transform="translate(10.005 9.802) scale(1.02438)"/> <g filter="url(#h)" transform="translate(1.749 1.552) scale(1.02438)">
<g>
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
</g>
</g>
</g>
</svg> </svg>
<svg width="20" height="18" x="160"> <svg x="160">
<defs> <defs>
<filter id="i" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox"> <filter id="i">
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/> <feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter> </filter>
</defs> </defs>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <g>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <g>
<path fill-opacity=".25" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> <path d="M10.016 15.612c-4.752 0 -8.604 -3.853 -8.604 -8.605v-4.302a2.15 2.15 0 0 1 2.15 -2.152h12.908a2.15 2.15 0 0 1 2.151 2.152v4.302c0 4.752 -3.853 8.605 -8.605 8.605z"/>
<path fill="#EE4055" d="M9.997 16.955c-4.978 0 -8.995 -4.208 -8.995 -9.187v-4.507a2.253 2.253 0 0 1 2.254 -2.254h13.479a2.253 2.253 0 0 1 2.253 2.254v4.507c0 4.979 -4.012 9.187 -8.99 9.187z"/> </g>
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#i)" transform="translate(10.005 9.66) scale(1.02438)"/> <g filter="url(#i)" transform="translate(1.749 1.387) scale(1.02438)">
<g>
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
</g>
</g>
</g>
</svg> </svg>
<svg width="20" height="18" x="180"> <svg x="180">
<defs> <defs>
<filter id="j" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox"> <filter id="j">
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/> <feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter> </filter>
</defs> </defs>
<path fill-opacity=".25" d="M9.997 16.924c-4.958 0 -8.96 -4.192 -8.96 -9.151v-4.49a2.244 2.244 0 0 1 2.245 -2.245h13.426a2.244 2.244 0 0 1 2.245 2.245v4.49c0 4.959 -3.997 9.15 -8.956 9.15z"/> <g>
<path fill-opacity=".25" d="M9.997 16.924c-4.958 0 -8.96 -4.192 -8.96 -9.151v-4.49a2.244 2.244 0 0 1 2.245 -2.245h13.426a2.244 2.244 0 0 1 2.245 2.245v4.49c0 4.959 -3.997 9.15 -8.956 9.15z"/> <g>
<path fill-opacity=".25" d="M9.997 16.924c-4.958 0 -8.96 -4.192 -8.96 -9.151v-4.49a2.244 2.244 0 0 1 2.245 -2.245h13.426a2.244 2.244 0 0 1 2.245 2.245v4.49c0 4.959 -3.997 9.15 -8.956 9.15z"/> <path d="M10.016 15.48c-4.668 0 -8.454 -3.785 -8.454 -8.454v-4.227a2.113 2.113 0 0 1 2.114 -2.114h12.681a2.113 2.113 0 0 1 2.114 2.114v4.227c0 4.669 -3.786 8.454 -8.455 8.454z"/>
<path fill="#EE4055" d="M9.997 16.924c-4.958 0 -8.96 -4.192 -8.96 -9.151v-4.49a2.244 2.244 0 0 1 2.245 -2.245h13.426a2.244 2.244 0 0 1 2.245 2.245v4.49c0 4.959 -3.997 9.15 -8.956 9.15z"/> </g>
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#j)" transform="translate(10.005 9.512) scale(1.02438)"/> <g filter="url(#j)" transform="translate(1.749 1.238) scale(1.02438)">
<g>
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
</g>
</g>
</g>
</svg> </svg>
<svg width="20" height="18" x="200"> <svg x="200">
<defs> <defs>
<filter id="k" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox"> <filter id="k">
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/> <feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter> </filter>
</defs> </defs>
<path fill-opacity=".25" d="M9.998 16.84c-4.908 0 -8.868 -4.148 -8.868 -9.056v-4.443a2.222 2.222 0 0 1 2.222 -2.222h13.287a2.222 2.222 0 0 1 2.222 2.222v4.443c0 4.908 -3.956 9.057 -8.863 9.057z"/> <g>
<path fill-opacity=".25" d="M9.998 16.84c-4.908 0 -8.868 -4.148 -8.868 -9.056v-4.443a2.222 2.222 0 0 1 2.222 -2.222h13.287a2.222 2.222 0 0 1 2.222 2.222v4.443c0 4.908 -3.956 9.057 -8.863 9.057z"/> <g>
<path fill-opacity=".25" d="M9.998 16.84c-4.908 0 -8.868 -4.148 -8.868 -9.056v-4.443a2.222 2.222 0 0 1 2.222 -2.222h13.287a2.222 2.222 0 0 1 2.222 2.222v4.443c0 4.908 -3.956 9.057 -8.863 9.057z"/> <path d="M10.016 15.365c-4.596 0 -8.323 -3.726 -8.323 -8.323v-4.161a2.08 2.08 0 0 1 2.081 -2.081h12.485a2.08 2.08 0 0 1 2.08 2.08v4.162c0 4.597 -3.726 8.323 -8.323 8.323z"/>
<path fill="#EE4055" d="M9.998 16.84c-4.908 0 -8.868 -4.148 -8.868 -9.056v-4.443a2.222 2.222 0 0 1 2.222 -2.222h13.287a2.222 2.222 0 0 1 2.222 2.222v4.443c0 4.908 -3.956 9.057 -8.863 9.057z"/> </g>
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#k)" transform="translate(10.005 9.372) scale(1.02438)"/> <g filter="url(#k)" transform="translate(1.749 1.132) scale(1.02438)">
<g>
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
</g>
</g>
</g>
</svg> </svg>
<svg width="20" height="18" x="220"> <svg x="220">
<defs> <defs>
<filter id="l" width="100%" height="100%" x="0%" y="0%" filterUnits="objectBoundingBox"> <filter id="l">
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/> <feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter> </filter>
</defs> </defs>
<path fill-opacity=".25" d="M9.998 16.723c-4.835 0 -8.737 -4.087 -8.737 -8.922v-4.378a2.189 2.189 0 0 1 2.19 -2.189h13.09a2.19 2.19 0 0 1 2.19 2.19v4.376c0 4.835 -3.898 8.922 -8.733 8.922z"/> <g>
<path fill-opacity=".25" d="M9.998 16.723c-4.835 0 -8.737 -4.087 -8.737 -8.922v-4.378a2.189 2.189 0 0 1 2.19 -2.189h13.09a2.19 2.19 0 0 1 2.19 2.19v4.376c0 4.835 -3.898 8.922 -8.733 8.922z"/> <g>
<path fill-opacity=".25" d="M9.998 16.723c-4.835 0 -8.737 -4.087 -8.737 -8.922v-4.378a2.189 2.189 0 0 1 2.19 -2.189h13.09a2.19 2.19 0 0 1 2.19 2.19v4.376c0 4.835 -3.898 8.922 -8.733 8.922z"/> <path d="M10.016 15.284c-4.545 0 -8.23 -3.685 -8.23 -8.23v-4.115a2.057 2.057 0 0 1 2.058 -2.058h12.345a2.057 2.057 0 0 1 2.058 2.058v4.115c0 4.545 -3.685 8.23 -8.23 8.23z"/>
<path fill="#EE4055" d="M9.998 16.723c-4.835 0 -8.737 -4.087 -8.737 -8.922v-4.378a2.189 2.189 0 0 1 2.19 -2.189h13.09a2.19 2.19 0 0 1 2.19 2.19v4.376c0 4.835 -3.898 8.922 -8.733 8.922z"/> </g>
<path d="M3.986 -3.055a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 -0.715 -1.711z" filter="url(#l)" transform="translate(10.005 9.286) scale(1.02438)"/> <g filter="url(#l)" transform="translate(1.749 1.092) scale(1.02438)">
<g>
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
</g>
</g>
</g>
</svg>
<svg x="240">
<defs>
<filter id="m">
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter>
</defs>
<g>
<g>
<path d="M10.016 15.253c-4.525 0 -8.195 -3.669 -8.195 -8.195v-4.097a2.048 2.048 0 0 1 2.05 -2.05h12.292a2.048 2.048 0 0 1 2.049 2.05v4.097c0 4.526 -3.67 8.195 -8.196 8.195z"/>
</g>
<g filter="url(#m)" transform="translate(1.749 1.092) scale(1.02438)">
<g>
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
</g>
</g>
</g>
</svg>
<svg x="260">
<defs>
<filter id="n">
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter>
</defs>
<g>
<g>
<path d="M10.016 15.253c-4.525 0 -8.195 -3.669 -8.195 -8.195v-4.097a2.048 2.048 0 0 1 2.05 -2.05h12.292a2.048 2.048 0 0 1 2.049 2.05v4.097c0 4.526 -3.67 8.195 -8.196 8.195z"/>
</g>
<g filter="url(#n)" transform="translate(1.749 1.092) scale(1.02438)">
<g>
<path d="M11.985 3.968a0.991 0.991 0 0 0 -0.726 0.319l-3.281 3.284 -3.224 -3.235a0.984 0.984 0 0 0 -0.754 -0.368 1.001 1.001 0 0 0 -0.715 1.7l-0.016 0.011 3.294 3.306 0.706 0.707a1 1 0 0 0 1.414 0l0.707 -0.707 3.31 -3.306a1.001 1.001 0 0 0 0.22 -1.097 1 1 0 0 0 -0.935 -0.614z"/>
</g>
</g>
</g>
</svg> </svg>
</svg> </svg>

До

Ширина:  |  Высота:  |  Размер: 17 KiB

После

Ширина:  |  Высота:  |  Размер: 12 KiB

Просмотреть файл

@ -1,7 +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="M4 7a4 4 0 0 1-4-4V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2a4 4 0 0 1-4 4zm1.993-5.016a.5.5 0 0 0-.362.159L3.989 3.785 2.378 2.168A.492.492 0 0 0 2 1.984a.5.5 0 0 0-.357.85l-.008.006 1.647 1.653.353.354a.5.5 0 0 0 .707 0l.358-.354L6.35 2.84a.5.5 0 0 0-.357-.856z"/>
<path fill="context-fill" d="M13 1h-3a1 1 0 0 0 0 2h3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V8a1 1 0 0 0-2 0v4a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3z"/>
</svg>

До

Ширина:  |  Высота:  |  Размер: 764 B

Просмотреть файл

@ -17,16 +17,22 @@ panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-vi
list-style-image: url("chrome://pocket-shared/skin/pocket.svg"); list-style-image: url("chrome://pocket-shared/skin/pocket.svg");
} }
#pocket-button-box[animate="true"] > #pocket-button,
#pocket-button[open="true"][animationsenabled] > .toolbarbutton-icon { #pocket-button[open="true"][animationsenabled] > .toolbarbutton-icon {
fill: transparent; fill: transparent;
} }
#pocket-button-box[open="true"] > #pocket-button {
fill: rgb(213,32,20);
fill-opacity: 1;
}
@keyframes pocket-animation { @keyframes pocket-animation {
from { from {
transform: translateX(0); transform: translateX(0);
} }
to { to {
transform: translateX(-220px); transform: translateX(-240px);
} }
} }
@ -35,14 +41,15 @@ panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-vi
transform: scaleX(-1) translateX(0); transform: scaleX(-1) translateX(0);
} }
to { to {
transform: scaleX(-1) translateX(-220px); transform: scaleX(-1) translateX(-240px);
} }
} }
#pocket-button-box > #pocket-animatable-box,
#pocket-button > .toolbarbutton-animatable-box { #pocket-button > .toolbarbutton-animatable-box {
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
top: calc(50% - 9px); /* 9px is half the height of the sprite */ top: calc(50% - 8px); /* 8px is half the height of the sprite */
/* Since .toolbarbutton-icon uses a different width than the animatable box, /* Since .toolbarbutton-icon uses a different width than the animatable box,
we need to set a padding relative to the difference in widths. */ we need to set a padding relative to the difference in widths. */
margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 20px) / 2); margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 20px) / 2);
@ -52,14 +59,21 @@ panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-vi
`inline-size less than zero: 'aContainingBlockISize >= 0'` (bug 1379332). */ `inline-size less than zero: 'aContainingBlockISize >= 0'` (bug 1379332). */
min-width: 20px; min-width: 20px;
max-width: 20px; max-width: 20px;
min-height: 18px; min-height: 16px;
max-height: 18px; max-height: 16px;
} }
#pocket-button-box > #pocket-animatable-box {
/* Match the 6px margin-inline-start of .urlbar-icon plus 1px for internal padding in the animation sprite. */
margin-inline-start: 7px;
}
#pocket-button-box > #pocket-animatable-box > #pocket-animatable-image,
#pocket-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { #pocket-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
height: var(--toolbarbutton-height); /* Height must be equal to height of toolbarbutton padding-box */ height: var(--toolbarbutton-height); /* Height must be equal to height of toolbarbutton padding-box */
} }
#pocket-button-box[animate="true"],
#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]) { #pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]) {
position: relative; position: relative;
} }
@ -68,20 +82,25 @@ panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-vi
a flicker at the start of either animation. The preloading of the library a flicker at the start of either animation. The preloading of the library
animation is triggered off of hovering the pocket button since the pocket animation is triggered off of hovering the pocket button since the pocket
button always animates before the library button. */ button always animates before the library button. */
#pocket-button-box:not([animate="true"]):hover > #pocket-animatable-box > #pocket-animatable-image,
#pocket-button[animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]):not([open="true"]):hover > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { #pocket-button[animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]):not([open="true"]):hover > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
background-image: url("chrome://pocket-shared/skin/pocket-animation.svg"), background-image: url("chrome://pocket-shared/skin/pocket-animation.svg"),
url("chrome://pocket-shared/skin/library-pocket-animation.svg"); url("chrome://pocket-shared/skin/library-pocket-animation.svg");
background-size: 0, 0; background-size: 0, 0;
} }
#pocket-button-box[animate="true"] > #pocket-animatable-box > #pocket-animatable-image,
#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { #pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
animation-name: pocket-animation; animation-name: pocket-animation;
animation-timing-function: steps(11); animation-timing-function: steps(12);
animation-duration: 184ms; animation-duration: 200ms;
background-image: url("chrome://pocket-shared/skin/pocket-animation.svg"); background-image: url("chrome://pocket-shared/skin/pocket-animation.svg");
width: 240px; fill: rgb(213,32,20);
-moz-context-properties: fill;
width: 260px;
} }
#pocket-button-box[animate="true"]:-moz-locale-dir(rtl) > #pocket-animatable-box > #pocket-animatable-image,
#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]):-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image { #pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]):-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
animation-name: pocket-animation-rtl; animation-name: pocket-animation-rtl;
} }
@ -223,7 +242,7 @@ panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-vi
} }
#appMenu-library-pocket-button { #appMenu-library-pocket-button {
list-style-image: url("chrome://pocket-shared/skin/pocket-list.svg"); list-style-image: url("chrome://pocket-shared/skin/pocket.svg");
} }
#panelMenu_pocket, #panelMenu_pocket,
@ -245,6 +264,6 @@ panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-vi
} }
#pageAction-panel-pocket, #pageAction-panel-pocket,
#pageAction-urlbar-pocket { #pocket-button {
list-style-image: url("chrome://pocket-shared/skin/pocket.svg"); list-style-image: url("chrome://pocket-shared/skin/pocket.svg");
} }

Просмотреть файл

@ -1,6 +1,6 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public <!-- 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 - 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/. --> - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill-opacity="context-fill-opacity" fill="context-fill" d="M9,15.969a8,8,0,0,1-8-8v-4a2,2,0,0,1,2-2H15a2,2,0,0,1,2,2v4A8,8,0,0,1,9,15.969ZM12.985,5.937a0.99,0.99,0,0,0-.725.319L8.978,9.539,5.755,6.305A0.984,0.984,0,0,0,5,5.937a1,1,0,0,0-.714,1.7L4.27,7.648l3.293,3.306h0l0.707,0.707a1,1,0,0,0,1.414,0l0.707-.707h0L13.7,7.648l0,0A1,1,0,0,0,12.985,5.937Z"/> <path fill-opacity="context-fill-opacity" fill="context-fill" d="M8 15a8 8 0 0 1-8-8V3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4a8 8 0 0 1-8 8zm3.985-10.032a.99.99 0 0 0-.725.319L7.978 8.57 4.755 5.336A.984.984 0 0 0 4 4.968a1 1 0 0 0-.714 1.7l-.016.011 3.293 3.306.707.707a1 1 0 0 0 1.414 0l.707-.707L12.7 6.679a1 1 0 0 0-.715-1.711z"/>
</svg> </svg>

До

Ширина:  |  Высота:  |  Размер: 667 B

После

Ширина:  |  Высота:  |  Размер: 634 B

Просмотреть файл

@ -380,6 +380,9 @@ this.PageActions = {
* The action's ID. Treat this like the ID of a DOM node. * The action's ID. Treat this like the ID of a DOM node.
* @param title (string, required) * @param title (string, required)
* The action's title. * The action's title.
* @param anchorIDOverride (string, optional)
* Pass a string for this property if to override which element
* that the temporary panel is anchored to.
* @param iconURL (string, optional) * @param iconURL (string, optional)
* The URL of the action's icon. Usually you want to specify an * The URL of the action's icon. Usually you want to specify an
* icon in CSS, but this option is useful if that would be a pain * icon in CSS, but this option is useful if that would be a pain
@ -388,11 +391,27 @@ this.PageActions = {
* @param nodeAttributes (object, optional) * @param nodeAttributes (object, optional)
* An object of name-value pairs. Each pair will be added as * An object of name-value pairs. Each pair will be added as
* an attribute to DOM nodes created for this action. * an attribute to DOM nodes created for this action.
* @param onBeforePlacedInWindow (function, optional)
* Called before the action is placed in the window. Passed the
* following arguments:
* * window: The window that the action will be placed in.
* @param onCommand (function, optional) * @param onCommand (function, optional)
* Called when the action is clicked, but only if it has neither * Called when the action is clicked, but only if it has neither
* a subview nor an iframe. Passed the following arguments: * a subview nor an iframe. Passed the following arguments:
* * event: The triggering event. * * event: The triggering event.
* * buttonNode: The button node that was clicked. * * buttonNode: The button node that was clicked.
* @param onIframeHiding (function, optional)
* Called when the action's iframe is hiding. Passed the
* following arguments:
* * iframeNode: The iframe.
* * parentPanelNode: The panel node in which the iframe is
* shown.
* @param onIframeHidden (function, optional)
* Called when the action's iframe is hidden. Passed the
* following arguments:
* * iframeNode: The iframe.
* * parentPanelNode: The panel node in which the iframe is
* shown.
* @param onIframeShown (function, optional) * @param onIframeShown (function, optional)
* Called when the action's iframe is shown to the user. Passed * Called when the action's iframe is shown to the user. Passed
* the following arguments: * the following arguments:
@ -432,9 +451,13 @@ function Action(options) {
setProperties(this, options, { setProperties(this, options, {
id: true, id: true,
title: !options._isSeparator, title: !options._isSeparator,
anchorIDOverride: false,
iconURL: false, iconURL: false,
nodeAttributes: false, nodeAttributes: false,
onBeforePlacedInWindow: false,
onCommand: false, onCommand: false,
onIframeHiding: false,
onIframeHidden: false,
onIframeShown: false, onIframeShown: false,
onPlacedInPanel: false, onPlacedInPanel: false,
onPlacedInUrlbar: false, onPlacedInUrlbar: false,
@ -531,6 +554,13 @@ Action.prototype = {
return this._tooltip; return this._tooltip;
}, },
/**
* Override for the ID of the action's temporary panel anchor (string, nullable)
*/
get anchorIDOverride() {
return this._anchorIDOverride;
},
/** /**
* Override for the ID of the action's urlbar node (string, nullable) * Override for the ID of the action's urlbar node (string, nullable)
*/ */
@ -552,6 +582,18 @@ Action.prototype = {
return this._subview; return this._subview;
}, },
/**
* Call this when before placing the action in the window.
*
* @param window (DOM window, required)
* The window the action will be placed in.
*/
onBeforePlacedInWindow(window) {
if (this._onBeforePlacedInWindow) {
this._onBeforePlacedInWindow(window);
}
},
/** /**
* Call this when the user activates the action. * Call this when the user activates the action.
* *
@ -566,6 +608,34 @@ Action.prototype = {
} }
}, },
/**
* Call this when the action's iframe is hiding.
*
* @param iframeNode (DOM node, required)
* The iframe that's hiding.
* @param parentPanelNode (DOM node, required)
* The panel in which the iframe is hiding.
*/
onIframeHiding(iframeNode, parentPanelNode) {
if (this._onIframeHiding) {
this._onIframeHiding(iframeNode, parentPanelNode);
}
},
/**
* Call this when the action's iframe is hidden.
*
* @param iframeNode (DOM node, required)
* The iframe that's being hidden.
* @param parentPanelNode (DOM node, required)
* The panel in which the iframe is hidden.
*/
onIframeHidden(iframeNode, parentPanelNode) {
if (this._onIframeHidden) {
this._onIframeHidden(iframeNode, parentPanelNode);
}
},
/** /**
* Call this when the action's iframe is shown. * Call this when the action's iframe is shown.
* *