commit 32e63d587ac4de0f47ef13db8625a474d0492d34 Author: Arthur Edelstein arthuredelstein@gmail.com Date: Fri Jun 22 09:31:09 2018 -0700
Bug 26430 - New torbutton icons
Icon design by Antonela Debiasi.
Switching our torbutton icons to SVG allows us get high quality for any size, including retina screens.
Also, SVGs should scale to the correct image size, which means I think #8941 can be closed.
In any case, the "iconsize" attribute has been dropped by Mozilla; see https://bugzilla.mozilla.org/show_bug.cgi?id=1430128
Blinking of update warning is implemented with a CSS animation. --- src/chrome/skin/tor-16.png | Bin 711 -> 0 bytes src/chrome/skin/tor-24.png | Bin 1433 -> 0 bytes src/chrome/skin/tor-disabled-16.png | Bin 5536 -> 0 bytes src/chrome/skin/tor-disabled-24.png | Bin 5990 -> 0 bytes src/chrome/skin/tor-enabled-16.png | Bin 915 -> 0 bytes src/chrome/skin/tor-enabled-24.png | Bin 1588 -> 0 bytes src/chrome/skin/tor-update-16.gif | Bin 1304 -> 0 bytes src/chrome/skin/tor-update-24.gif | Bin 1732 -> 0 bytes src/chrome/skin/torbutton-update-needed.svg | 11 +++++ src/chrome/skin/torbutton.css | 69 ++++++++-------------------- src/chrome/skin/torbutton.svg | 9 ++++ 11 files changed, 40 insertions(+), 49 deletions(-)
diff --git a/src/chrome/skin/tor-16.png b/src/chrome/skin/tor-16.png deleted file mode 100644 index b85043f..0000000 Binary files a/src/chrome/skin/tor-16.png and /dev/null differ diff --git a/src/chrome/skin/tor-24.png b/src/chrome/skin/tor-24.png deleted file mode 100644 index a498806..0000000 Binary files a/src/chrome/skin/tor-24.png and /dev/null differ diff --git a/src/chrome/skin/tor-disabled-16.png b/src/chrome/skin/tor-disabled-16.png deleted file mode 100644 index f749377..0000000 Binary files a/src/chrome/skin/tor-disabled-16.png and /dev/null differ diff --git a/src/chrome/skin/tor-disabled-24.png b/src/chrome/skin/tor-disabled-24.png deleted file mode 100644 index c083748..0000000 Binary files a/src/chrome/skin/tor-disabled-24.png and /dev/null differ diff --git a/src/chrome/skin/tor-enabled-16.png b/src/chrome/skin/tor-enabled-16.png deleted file mode 100644 index d48a8b0..0000000 Binary files a/src/chrome/skin/tor-enabled-16.png and /dev/null differ diff --git a/src/chrome/skin/tor-enabled-24.png b/src/chrome/skin/tor-enabled-24.png deleted file mode 100644 index c8b932f..0000000 Binary files a/src/chrome/skin/tor-enabled-24.png and /dev/null differ diff --git a/src/chrome/skin/tor-update-16.gif b/src/chrome/skin/tor-update-16.gif deleted file mode 100644 index d006458..0000000 Binary files a/src/chrome/skin/tor-update-16.gif and /dev/null differ diff --git a/src/chrome/skin/tor-update-24.gif b/src/chrome/skin/tor-update-24.gif deleted file mode 100644 index 72591a8..0000000 Binary files a/src/chrome/skin/tor-update-24.gif and /dev/null differ diff --git a/src/chrome/skin/torbutton-update-needed.svg b/src/chrome/skin/torbutton-update-needed.svg new file mode 100644 index 0000000..73f819e --- /dev/null +++ b/src/chrome/skin/torbutton-update-needed.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g id="Icon---Tor---Update" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="Tor-Button-Icon" transform="translate(2.000000, 1.000000)" fill="#0C0C0D"> + <path d="M8.27206791,6.27905236 C7.88283063,6.53485117 6.37928571,7.48491742 6.38222311,7.48303971 C5.92467564,7.77552366 5.55774616,8.01739321 5.22956304,8.24495813 C4.62774003,8.66226724 4.1902024,9.01032507 3.90524298,9.30237927 C2.34845165,10.8521114 1.86583368,12.1863028 2.03292037,14.2840468 C2.17744778,16.6290092 3.98280543,18.7226974 6.62789966,19.5725823 C7.66430091,19.8978216 8.64783036,20 10.3045058,20 C12.4566798,20 14.4305353,19.426444 15.7257727,18.390024 C17.1602235,17.2499732 18,15.5258216 18,13.7581121 C18,11.9676824 17.2065463,10.2463814 15.7919239,9.00433992 C15.0624549,8.37501782 14.1112169,7.77509114 12.728283,7.03810567 C11.4758566,6.39901667 10.3718516,5.26209475 9.95586156,3.83344263 C9.74417905,4.87665258 9.16812751,5.7299448 8.27206791,6.27905236 Z M17.1048177,7.49557522 C18.9563878,9.1179941 20,11.3893805 20,13.7581121 C20,16.1268437 18.889058,18.4306785 16.9701581,19.9557522 C15.1859178,21.3834808 12.6947145,22 10.3045058,22 C8.8232498,22 7.47 665339,21.9351032 6.02906225,21.480826 C2.69623613,20.4100295 0.238697687,17.6843658 0.0367082257,14.4070796 C-0.165281236,11.8761062 0.440687149,9.92920354 2.49424667,7.88495575 C3.53785889,6.81415929 5.69241315,5.58112094 7.1736692,4.60766962 C7.91429722,4.15339233 8.68859016,2.79056047 7.20733411,0.227138643 L7.5103183,0 L11.9204215,1.75221239 C11.3144532,3.63421829 13.0650285,4.96460177 13.637332,5.25663717 C14.9165986,5.9380531 16.1285353,6.6519174 17.1048177,7.49557522 Z" id="Border" fill-rule="nonzero"></path> + <path d="M10,5.80000019 C10.3632315,6.90320629 11.2333653,7.78038283 12.2159038,8.28105702 C13.3397544,8.87914153 14.1127842,9.36599897 14.7055922,9.87671162 C15.8551945,10.8846633 16.5,12.2815477 16.5,13.7345319 C16.5,15.1690781 15.81755,16.5682758 14.6518339,17.4934592 C13.5992506,18.3345433 11.9951837,18.8000002 10.2462051,18.8000002 C10.1620472,18.8000002 10.0800269,18.7996762 10,18.7990042 L10,5.80000019 Z" id="Half-Content"></path> + </g> + <polygon id="Triangle" fill="#0C0C0D" points="7 11 13 23 1 23"></polygon> + <path d="M13.6929417,21.0118641 C14.0028183,21.6319873 13.9694684,22.3683526 13.6048048,22.957926 C13.2401412,23.5474994 12.5961777,23.9061872 11.9029417,23.9058641 L1.99794165,23.9058641 C1.30603325,23.9051512 0.663641796,23.5468644 0.299459428,22.9585541 C-0.0647229393,22.3702439 -0.0989581202,21.6354894 0.208941651,21.0158641 L5.16194165,11.1058641 C5.50066779,10.428136 6.19328022,10 6.95094165,10 C7.70860308,10 8.40121551,10.428136 8.73994165,11.1058641 L13.6929417,21.0118641 Z M5.95094165,13.9058641 L5.95094165,17.9058641 C5.95094165,18.4581489 6.3986569,18.9058641 6.95094165,18.9058641 C7.5032264,18.9058641 7.95094165,18.4581489 7.95094165,17.9058641 L7.95094165,13.9058641 C7.95094165,13.3535794 7.5032264,12.9058641 6.95094165,12.9058641 C6.3986569,12.9058641 5.95094165,13.3535794 5.95094165,13.9058641 Z M6.95094165,22.1558641 C7.64129759,22.1558641 8.20094165,21.59622 8.20094165,20.9058641 C8.20094165,20.2155082 7.64129759,19.6558641 6.95094165,19.6558641 C6.26058571, 19.6558641 5.70094165,20.2155082 5.70094165,20.9058641 C5.70094165,21.59622 6.26058571,22.1558641 6.95094165,22.1558641 Z" id="Shape" fill="#FFE900" fill-rule="nonzero"></path> + </g> +</svg> diff --git a/src/chrome/skin/torbutton.css b/src/chrome/skin/torbutton.css index 5bdcaa6..14166b7 100644 --- a/src/chrome/skin/torbutton.css +++ b/src/chrome/skin/torbutton.css @@ -1,73 +1,44 @@ +@keyframes blink-update { + 0% { + list-style-image: url("chrome://torbutton/skin/torbutton-update-needed.svg"); + } + 100% { + list-style-image: url("chrome://torbutton/skin/torbutton.svg"); + } +} + #torbutton-button { - list-style-image: url("chrome://torbutton/skin/tor-24.png"); + list-style-image: url("chrome://torbutton/skin/torbutton.svg"); } #torbutton-button[tbstatus="on"] { - list-style-image: url("chrome://torbutton/skin/tor-enabled-24.png"); + opacity: 1.0; } #torbutton-button[tbstatus="off"] { - list-style-image: url("chrome://torbutton/skin/tor-disabled-24.png"); + opacity: 0.4; } #torbutton-button[tbUpdateNeeded="true"] { - list-style-image: url("chrome://torbutton/skin/tor-update-24.gif"); -} -toolbar[iconsize="small"] #torbutton-button { - list-style-image: url("chrome://torbutton/skin/tor-16.png"); -} -/* Although the tor-enabled-16.png, tor-disabled-16.png and tor-update-16.gif -indicate that they are 16x16 icons, they have 18x18 pixels in fact. This -leads to resizing the content window's height on start-up on Windows at -least. To guarantee a content window with a multiple of 200x100 we -therefore use only a x16 part of each icon while trying to minimize bad UI -effects until #8941 gets fixed.*/ -toolbar[iconsize="small"] #torbutton-button[tbstatus="on"] { - list-style-image: url("chrome://torbutton/skin/tor-enabled-16.png"); - -moz-image-region: rect(1px, 17px, 17px, 1px); -} -toolbar[iconsize="small"] #torbutton-button[tbstatus="off"] { - list-style-image: url("chrome://torbutton/skin/tor-disabled-16.png"); - -moz-image-region: rect(0px, 18px, 16px, 0px); -} -toolbar[iconsize="small"] #torbutton-button[tbUpdateNeeded="true"] { - list-style-image: url("chrome://torbutton/skin/tor-update-16.gif"); - -moz-image-region: rect(1px, 17px, 17px, 1px); + opacity: 1.0; + animation: blink-update normal 1s infinite ease-in-out; }
#torbutton-button-tb { - list-style-image: url("chrome://torbutton/skin/tor-24.png"); + list-style-image: url("chrome://torbutton/skin/torbutton.svg"); } #torbutton-button-tb[tbstatus="on"] { - list-style-image: url("chrome://torbutton/skin/tor-enabled-24.png"); + opacity: 1.0; } #torbutton-button-tb[tbstatus="off"] { - list-style-image: url("chrome://torbutton/skin/tor-disabled-24.png"); -} -toolbar[iconsize="small"] #torbutton-button-tb { - list-style-image: url("chrome://torbutton/skin/tor-16.png"); -} -toolbar[iconsize="small"] #torbutton-button-tb[tbstatus="on"] { - list-style-image: url("chrome://torbutton/skin/tor-enabled-16.png"); -} -toolbar[iconsize="small"] #torbutton-button-tb[tbstatus="off"] { - list-style-image: url("chrome://torbutton/skin/tor-disabled-16.png"); + opacity: 0.4; }
#torbutton-button-tb-msg { - list-style-image: url("chrome://torbutton/skin/tor-24.png"); + list-style-image: url("chrome://torbutton/skin/torbutton.svg"); } #torbutton-button-tb-msg[tbstatus="on"] { - list-style-image: url("chrome://torbutton/skin/tor-enabled-24.png"); + opacity: 1.0; } #torbutton-button-tb-msg[tbstatus="off"] { - list-style-image: url("chrome://torbutton/skin/tor-disabled-24.png"); -} -toolbar[iconsize="small"] #torbutton-button-tb-msg { - list-style-image: url("chrome://torbutton/skin/tor-16.png"); -} -toolbar[iconsize="small"] #torbutton-button-tb-msg[tbstatus="on"] { - list-style-image: url("chrome://torbutton/skin/tor-enabled-16.png"); -} -toolbar[iconsize="small"] #torbutton-button-tb-msg[tbstatus="off"] { - list-style-image: url("chrome://torbutton/skin/tor-disabled-16.png"); + opacity: 0.4; }
#torbutton-checkForUpdate[tbUpdateNeeded] { diff --git a/src/chrome/skin/torbutton.svg b/src/chrome/skin/torbutton.svg new file mode 100644 index 0000000..518e981 --- /dev/null +++ b/src/chrome/skin/torbutton.svg @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g id="Icon---Tor-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="Tor-Button-Icon" transform="translate(2.000000, 1.000000)" fill="#0C0C0D"> + <path d="M8.27206791,6.27905236 C7.88283063,6.53485117 6.37928571,7.48491742 6.38222311,7.48303971 C5.92467564,7.77552366 5.55774616,8.01739321 5.22956304,8.24495813 C4.62774003,8.66226724 4.1902024,9.01032507 3.90524298,9.30237927 C2.34845165,10.8521114 1.86583368,12.1863028 2.03292037,14.2840468 C2.17744778,16.6290092 3.98280543,18.7226974 6.62789966,19.5725823 C7.66430091,19.8978216 8.64783036,20 10.3045058,20 C12.4566798,20 14.4305353,19.426444 15.7257727,18.390024 C17.1602235,17.2499732 18,15.5258216 18,13.7581121 C18,11.9676824 17.2065463,10.2463814 15.7919239,9.00433992 C15.0624549,8.37501782 14.1112169,7.77509114 12.728283,7.03810567 C11.4758566,6.39901667 10.3718516,5.26209475 9.95586156,3.83344263 C9.74417905,4.87665258 9.16812751,5.7299448 8.27206791,6.27905236 Z M17.1048177,7.49557522 C18.9563878,9.1179941 20,11.3893805 20,13.7581121 C20,16.1268437 18.889058,18.4306785 16.9701581,19.9557522 C15.1859178,21.3834808 12.6947145,22 10.3045058,22 C8.8232498,22 7.47 665339,21.9351032 6.02906225,21.480826 C2.69623613,20.4100295 0.238697687,17.6843658 0.0367082257,14.4070796 C-0.165281236,11.8761062 0.440687149,9.92920354 2.49424667,7.88495575 C3.53785889,6.81415929 5.69241315,5.58112094 7.1736692,4.60766962 C7.91429722,4.15339233 8.68859016,2.79056047 7.20733411,0.227138643 L7.5103183,0 L11.9204215,1.75221239 C11.3144532,3.63421829 13.0650285,4.96460177 13.637332,5.25663717 C14.9165986,5.9380531 16.1285353,6.6519174 17.1048177,7.49557522 Z" id="Border" fill-rule="nonzero"></path> + <path d="M10,5.80000019 C10.3632315,6.90320629 11.2333653,7.78038283 12.2159038,8.28105702 C13.3397544,8.87914153 14.1127842,9.36599897 14.7055922,9.87671162 C15.8551945,10.8846633 16.5,12.2815477 16.5,13.7345319 C16.5,15.1690781 15.81755,16.5682758 14.6518339,17.4934592 C13.5992506,18.3345433 11.9951837,18.8000002 10.2462051,18.8000002 C10.1620472,18.8000002 10.0800269,18.7996762 10,18.7990042 L10,5.80000019 Z" id="Half-Content"></path> + </g> + </g> +</svg>