Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-12-02 10:00:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1462790 - Update Save to Pocket icons to use outline icon treatment. r=jaws

Browse Source 
Update the Save to Pocket svg icons in the urlbar, page action panel, and reader view. There's another Save to Pocket icon in activity stream that the bug doesn't mention but that should probably be updated too. I'll make a different revision for it.

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

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Drew Willcoxon 2018-08-02 20:13:13 +00:00
parent 657b098b22
commit 9987b543d1
10 changed files with 58 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
browser/components/newtab/data/content/assets/glyph-pocket-16.svg
View File

@ -1 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path 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>
<!-- 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-opacity="context-fill-opacity" fill="context-fill" d="M14.5.932h-13A1.509 1.509 0 0 0 0 2.435v4.5a8 8 0 0 0 16 0v-4.5A1.508 1.508 0 0 0 14.5.932zm-.5 6a6 6 0 0 1-12 0v-4h12zm-6.7 3.477a1 1 0 0 0 1.422 0l3.343-3.39a1 1 0 1 0-1.423-1.406L8.01 8.283 5.38 5.614a1 1 0 0 0-1.425 1.405zm.711.3z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 358 B

After

Width:  |  Height:  |  Size: 608 B

21
browser/extensions/pocket/bootstrap.js vendored
View File

@ -344,10 +344,13 @@ var PocketReader = {
if (this.hidden) {
Services.mm.broadcastAsyncMessage("Reader:RemoveButton", { id: "pocket-button" });
} else {
Services.mm.broadcastAsyncMessage("Reader:AddButton",
{ id: "pocket-button",
title: gPocketBundle.GetStringFromName("pocket-button.tooltiptext"),
image: "chrome://pocket/content/panels/img/pocket.svg#pocket-mark" });
Services.mm.broadcastAsyncMessage("Reader:AddButton", {
id: "pocket-button",
title: gPocketBundle.GetStringFromName("pocket-button.tooltiptext"),
image: "chrome://pocket/content/panels/img/pocket-outline.svg",
width: 20,
height: 20,
});
}
},
receiveMessage(message) {
@ -357,9 +360,13 @@ var PocketReader = {
if (this.hidden)
break;
message.target.messageManager.
sendAsyncMessage("Reader:AddButton", { id: "pocket-button",
title: gPocketBundle.GetStringFromName("pocket-button.tooltiptext"),
image: "chrome://pocket/content/panels/img/pocket.svg#pocket-mark"});
sendAsyncMessage("Reader:AddButton", {
id: "pocket-button",
title: gPocketBundle.GetStringFromName("pocket-button.tooltiptext"),
image: "chrome://pocket/content/panels/img/pocket-outline.svg",
width: 20,
height: 20,
});
break;
}
case "Reader:Clicked-pocket-button": {

12
browser/extensions/pocket/content/panels/img/pocket-outline.svg Normal file
View File

@ -0,0 +1,12 @@
<!-- 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/. -->
<!--
This file is the same as skin/shared/pocket-outline.svg and the two should be
kept in sync. The only reason this file exists is that it lives in the
contentaccessible content directory so that Firefox's reader mode can use it.
-->
<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="M14.5.932h-13A1.509 1.509 0 0 0 0 2.435v4.5a8 8 0 0 0 16 0v-4.5A1.508 1.508 0 0 0 14.5.932zm-.5 6a6 6 0 0 1-12 0v-4h12zm-6.7 3.477a1 1 0 0 0 1.422 0l3.343-3.39a1 1 0 1 0-1.423-1.406L8.01 8.283 5.38 5.614a1 1 0 0 0-1.425 1.405zm.711.3z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 852 B

22
browser/extensions/pocket/content/panels/img/pocket.svg
View File

@ -1,22 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<style>
use:not(:target) {
display: none;
}
use {
fill: #808080;
}
use[id$="-added"] {
fill: #ee4056;
}
</style>
<defs>
<path id="pocket-mark-shape" d="M21.901,4.204C21.642,3.484,20.956,3,20.196,3h-0.01h-1.721H3.814C3.067,3,2.385,3.474,2.119,4.179 C2.04,4.388,2,4.606,2,4.828v6.082l0.069,1.21c0.29,2.751,1.707,5.155,3.899,6.832c0.039,0.03,0.079,0.06,0.119,0.089l0.025,0.018 c1.175,0.866,2.491,1.452,3.91,1.741C10.677,20.932,11.347,21,12.013,21c0.615,0,1.232-0.057,1.839-0.171 c0.073-0.014,0.145-0.028,0.219-0.044c0.02-0.004,0.042-0.012,0.064-0.023c1.359-0.299,2.621-0.87,3.753-1.704l0.025-0.018 c0.04-0.029,0.08-0.059,0.119-0.089c2.192-1.677,3.609-4.08,3.898-6.832L22,10.91V4.828C22,4.618,21.975,4.409,21.901,4.204z M17.667,10.539l-4.704,4.547c-0.266,0.256-0.608,0.385-0.949,0.385c-0.342,0-0.684-0.129-0.949-0.385l-4.705-4.547 c-0.547-0.528-0.565-1.403-0.04-1.954c0.524-0.551,1.392-0.569,1.939-0.041l3.756,3.63l3.755-3.63 c0.547-0.528,1.415-0.51,1.939,0.04C18.231,9.136,18.213,10.011,17.667,10.539z"/>
</defs>
<use id="pocket-mark" xlink:href="#pocket-mark-shape"/>
<use id="pocket-mark-added" xlink:href="#pocket-mark-shape"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

13
browser/extensions/pocket/skin/shared/pocket-outline.svg Normal file
View File

@ -0,0 +1,13 @@
<!-- 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/. -->
<!--
This file is the same as content/panels/img/pocket-outline.svg and the two
should be kept in sync. The only reason that file exists is that it lives in
the contentaccessible content directory so that Firefox's reader mode can use
it.
-->
<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="M14.5.932h-13A1.509 1.509 0 0 0 0 2.435v4.5a8 8 0 0 0 16 0v-4.5A1.508 1.508 0 0 0 14.5.932zm-.5 6a6 6 0 0 1-12 0v-4h12zm-6.7 3.477a1 1 0 0 0 1.422 0l3.343-3.39a1 1 0 1 0-1.423-1.406L8.01 8.283 5.38 5.614a1 1 0 0 0-1.425 1.405zm.711.3z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 861 B

9
browser/extensions/pocket/skin/shared/pocket.css
View File

@ -7,9 +7,14 @@
fill: #fbfbfb;
}
#pocket-button,
#pageAction-panel-pocket {
list-style-image: url("chrome://pocket-shared/skin/pocket-outline.svg");
}
#appMenu-library-pocket-button,
#pageAction-panel-pocket,
#pocket-button {
#pocket-button-box[open="true"] > #pocket-button,
#pocket-button-box[pocketed="true"] > #pocket-button {
list-style-image: url("chrome://pocket-shared/skin/pocket.svg");
}

2
browser/extensions/pocket/skin/shared/pocket.svg
View File

@ -2,5 +2,5 @@
- 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-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"/>
<path fill-opacity="context-fill-opacity" fill="context-fill" fill-rule="evenodd" d="M14.496.933C15.323.933 16 1.61 16 2.436v4.497c0 4.418-3.581 8-8 8-4.418 0-8-3.582-8-8V2.436C0 1.61.677.933 1.504.933h12.992zM8.013 8.222L4.994 5.319c-.434-.418-1.125-.404-1.543.03-.418.434-.404 1.125.03 1.543l3.776 3.63c.423.406 1.09.406 1.513 0l3.775-3.63c.435-.418.448-1.109.03-1.543-.417-.434-1.108-.448-1.542-.03l-3.02 2.903z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 634 B

After

Width:  |  Height:  |  Size: 723 B

2
toolkit/components/reader/AboutReader.jsm
View File

@ -212,6 +212,8 @@ AboutReader.prototype = {
btn.title = message.data.title;
if (message.data.text)
btn.textContent = message.data.text;
if (message.data.width && message.data.height)
btn.style.backgroundSize = `${message.data.width}px ${message.data.height}px`;
let tb = this._toolbarElement;
tb.appendChild(btn);
this._setupButton(message.data.id, button => {

4
toolkit/themes/shared/aboutReader.css
View File

@ -273,6 +273,8 @@ body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
border-left: 0;
border-right: 1px solid #b5b5b5;
border-bottom: 1px solid #c1c1c1;
-moz-context-properties: fill;
fill: #808080;
}
.button[hidden] {
@ -501,8 +503,6 @@ body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
.close-button {
background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg");
-moz-context-properties: fill;
fill: #808080;
height: 68px;
background-position: center 8px;
}

2
toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg
View File

@ -3,5 +3,5 @@
- 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="24" height="24" viewBox="0 0 24 24">
<path fill="#737373" d="M10.87,18.989h2.144L8.3,3.991H5.724l-4.739,15H3.044l1.115-4.171h5.6ZM4.652,12.91L6.968,5.69l2.294,7.22H4.652ZM22.1,16.515v-5.06c0-2.31-.984-3.713-3.65-3.713a10.236,10.236,0,0,0-3.7.756L15.116,9.9A9.9,9.9,0,0,1,18.1,9.317c1.533,0,1.958.627,1.958,2.223v0.975h-1.35c-3.086,0-4.871,1.125-4.871,3.5a3.217,3.217,0,0,0,3.527,3.338,3.205,3.205,0,0,0,2.945-1.659,2.573,2.573,0,0,0,2.436,1.659l0.441-1.344A1.408,1.408,0,0,1,22.1,16.515ZM17.8,17.9a1.744,1.744,0,0,1-1.911-1.995c0-1.512,1.029-2.111,3.065-2.111h1.1V16.18C19.426,17.334,18.938,17.9,17.8,17.9Z"/>
<path fill="context-fill" d="M10.87,18.989h2.144L8.3,3.991H5.724l-4.739,15H3.044l1.115-4.171h5.6ZM4.652,12.91L6.968,5.69l2.294,7.22H4.652ZM22.1,16.515v-5.06c0-2.31-.984-3.713-3.65-3.713a10.236,10.236,0,0,0-3.7.756L15.116,9.9A9.9,9.9,0,0,1,18.1,9.317c1.533,0,1.958.627,1.958,2.223v0.975h-1.35c-3.086,0-4.871,1.125-4.871,3.5a3.217,3.217,0,0,0,3.527,3.338,3.205,3.205,0,0,0,2.945-1.659,2.573,2.573,0,0,0,2.436,1.659l0.441-1.344A1.408,1.408,0,0,1,22.1,16.515ZM17.8,17.9a1.744,1.744,0,0,1-1.911-1.995c0-1.512,1.029-2.111,3.065-2.111h1.1V16.18C19.426,17.334,18.938,17.9,17.8,17.9Z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 924 B

After

Width:  |  Height:  |  Size: 929 B