commit 036174b6420464474280f3e0877bbd7ff35d6743
parent e2ebd64bfcf1de349fb90ab6b9f40e1cb79c67b3
Author: Lootyhoof <lootyhoofer@gmail.com>
Date: Tue, 25 Oct 2016 22:57:22 +0100
Use more SVGs in /browser
Diffstat:
3 files changed, 112 insertions(+), 35 deletions(-)
diff --git a/src/chrome/browser/browser.css b/src/chrome/browser/browser.css
@@ -235,7 +235,7 @@
#appmenu_bookmarks {
list-style-image: url("chrome://browser/skin/places/bookmark.png");
- -moz-image-region: rect(0px 48px 16px 32px);
+ -moz-image-region: rect(0px 32px 16px 16px);
}
#appmenu_privateBrowsing,
@@ -864,17 +864,16 @@ html|*.urlbar-input:-moz-lwtheme:-moz-placeholder,
background-color: transparent;
border: none;
width: auto;
- list-style-image: url("chrome://browser/skin/urlbar-history-dropmarker.png");
- -moz-image-region: rect(0px, 11px, 14px, 0px);
+ list-style-image: url("chrome://browser/skin/urlbar-history-dropmarker.svg#closed");
}
-.urlbar-history-dropmarker:hover {
- -moz-image-region: rect(0px, 22px, 14px, 11px);
+.urlbar-history-dropmarker:not(:hover):not(:active):not([open="true"]) {
+ opacity: 0.15;
}
-.urlbar-history-dropmarker:hover:active,
+.urlbar-history-dropmarker:active,
.urlbar-history-dropmarker[open="true"] {
- -moz-image-region: rect(0px, 33px, 14px, 22px);
+ list-style-image: url("chrome://browser/skin/urlbar-history-dropmarker.svg#open");
}
@@ -962,15 +961,14 @@ window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icon
.ac-result-type-bookmark,
.autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
list-style-image: url("chrome://browser/skin/places/bookmark.png");
- -moz-image-region: rect(0px 48px 16px 32px);
+ -moz-image-region: rect(0px 32px 16px 16px);
width: 16px;
height: 16px;
}
.ac-result-type-keyword,
.autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
- list-style-image: url(chrome://global/skin/icons/Search-glass.png);
- -moz-image-region: rect(0px 32px 16px 16px);
+ list-style-image: url(chrome://global/skin/icons/Search-glass.svg);
width: 16px;
height: 16px;
}
@@ -1016,15 +1014,12 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
border-top: 1px solid GrayText;
}
-
-
#go-button,
#urlbar > toolbarbutton {
-moz-appearance: none;
padding: 0 2px;
background-origin: border-box;
border: none;
- list-style-image: url("chrome://browser/skin/reload-stop-go.png");
}
#go-button {
@@ -1032,15 +1027,11 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
}
#urlbar-reload-button {
- -moz-image-region: rect(0, 14px, 14px, 0);
-}
-
-#urlbar-reload-button:not([disabled]):hover {
- -moz-image-region: rect(14px, 14px, 28px, 0);
+ list-style-image: url("chrome://browser/skin/reload-stop-go.svg#reload");
}
#urlbar-reload-button:not([disabled]):hover:active {
- -moz-image-region: rect(28px, 14px, 42px, 0);
+ list-style-image: url("chrome://browser/skin/reload-stop-go.svg#reload-active");
}
#urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
@@ -1049,17 +1040,12 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
#go-button,
#urlbar-go-button {
- -moz-image-region: rect(0, 42px, 14px, 28px);
-}
-
-#go-button:hover,
-#urlbar-go-button:hover {
- -moz-image-region: rect(14px, 42px, 28px, 28px);
+ list-style-image: url("chrome://browser/skin/reload-stop-go.svg#go");
}
#go-button:hover:active,
#urlbar-go-button:hover:active {
- -moz-image-region: rect(28px, 42px, 42px, 28px);
+ list-style-image: url("chrome://browser/skin/reload-stop-go.svg#go-active");
}
#go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
@@ -1068,18 +1054,20 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
}
#urlbar-stop-button {
- -moz-image-region: rect(0, 28px, 14px, 14px);
+ list-style-image: url("chrome://browser/skin/reload-stop-go.svg#stop");
}
-#urlbar-stop-button:not([disabled]):hover {
- -moz-image-region: rect(14px, 28px, 28px, 14px);
-}
#urlbar-stop-button:hover:active {
- -moz-image-region: rect(28px, 28px, 42px, 14px);
+ list-style-image: url("chrome://browser/skin/reload-stop-go.svg#stop-active");
}
-
+#urlbar-reload-button:not(:hover):not(:active),
+#urlbar-stop-button:not(:hover):not(:active),
+#urlbar-go-button:not(:hover):not(:active),
+#go-button:not(:hover):not(:active) {
+ opacity: .6;
+}
#page-report-button {
list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
@@ -1095,9 +1083,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
-moz-image-region: rect(0, 48px, 16px, 32px);
}
-
-
-
#social-share-panel > iframe {
background: linear-gradient(to bottom, #f0f4f7, #fafbfc);
width: 300px;
diff --git a/src/chrome/browser/reload-stop-go.svg b/src/chrome/browser/reload-stop-go.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ x="0"
+ y="0"
+ width="14"
+ height="14"
+ viewBox="0 0 14 14"
+ shape-rendering="geometricPrecision">
+ <style>
+ use:not(:target) {
+ display: none;
+ }
+ use {
+ fill: none;
+ stroke: #fff;
+ stroke-width: 1;
+ }
+ use[id$="normal"] {
+ opacity: 0.6;
+ }
+ use[id="reload-active"] {
+ stroke: #128ED3;
+ }
+ use[id="stop-active"] {
+ stroke: #C62323;
+ }
+ use[id="go-active"] {
+ stroke: #469046;
+ }
+ </style>
+ <defs style="display: none;">
+ <g id="reload-shape">
+ <path d="M 6,8 m 4.537,0 a 4.537,4.537 0 1,1 -4.537,-4.537
+ l 2.5,0 m -2.5,-2.5 l 2.65,2.5 l -2.65,2.5" stroke-width="1.027"/>
+ </g>
+ <g id="stop-shape">
+ <line x1="3" y1="3" x2="11" y2="11"/>
+ <line x1="3" y1="11" x2="11" y2="3"/>
+ </g>
+ <g id="go-shape0">
+ <path d="M 2,7.5 l 10,0 m -5,-5 l 5,5 l -5,5" fill="none"/>
+ </g>
+ <g id="go-shape">
+ <path d="M 2,7.5 l 9.2,0 m -4.2,-4.5 l 4.5,4.5 l -4.5,4.5" fill="none"/>
+ </g>
+ </defs>
+ <use id="reload" xlink:href="#reload-shape"/>
+ <use id="reload-normal" xlink:href="#reload-shape"/>
+ <use id="reload-hover" xlink:href="#reload-shape"/>
+ <use id="reload-active" xlink:href="#reload-shape"/>
+ <use id="stop" xlink:href="#stop-shape"/>
+ <use id="stop-normal" xlink:href="#stop-shape"/>
+ <use id="stop-hover" xlink:href="#stop-shape"/>
+ <use id="stop-active" xlink:href="#stop-shape"/>
+ <use id="go" xlink:href="#go-shape"/>
+ <use id="go-normal" xlink:href="#go-shape"/>
+ <use id="go-hover" xlink:href="#go-shape"/>
+ <use id="go-active" xlink:href="#go-shape"/>
+</svg>
+\ No newline at end of file
diff --git a/src/chrome/browser/urlbar-history-dropmarker.svg b/src/chrome/browser/urlbar-history-dropmarker.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ x="0"
+ y="0"
+ width="11"
+ height="14"
+ viewBox="0 0 11 14">#1796DD
+ <style>
+ use:not(:target) {
+ display: none;
+ }
+ use {
+ fill: #fff;
+ stroke: none;
+ stroke-width: 0;
+ }
+ use[id="normal"] {
+ opacity: 0.15;
+ }
+ use[id="open"] {
+ fill: #1796DD;
+ }
+ </style>
+ <defs style="display: none;">
+ <path id="drop-shape" d="M 1,4 l 9,0 l -4.5,6.5 l -4.5,-6.5 z"/>
+ </defs>
+ <use id="closed" xlink:href="#drop-shape"/>
+ <use id="open" xlink:href="#drop-shape"/>
+</svg>
+\ No newline at end of file
