From 74317b2092d32e3508ad2e8390f2d0397826990b Mon Sep 17 00:00:00 2001 From: Margaret Leibovic Date: Fri, 18 Mar 2011 14:21:02 -0700 Subject: [PATCH] Bug 634065 - Implement design for identity block and persistent indicators, r=dao --- browser/base/content/browser.js | 2 +- .../themes/gnomestripe/browser/browser.css | 81 +++++++++++--- browser/themes/gnomestripe/browser/jar.mn | 2 +- .../gnomestripe/browser/urlbar-arrow.png | Bin 0 -> 305 bytes .../browser/urlbar-favicon-glow.png | Bin 619 -> 0 bytes browser/themes/pinstripe/browser/browser.css | 100 +++++++++++------- browser/themes/pinstripe/browser/jar.mn | 2 +- .../themes/pinstripe/browser/urlbar-arrow.png | Bin 0 -> 305 bytes .../pinstripe/browser/urlbar-favicon-glow.png | Bin 504 -> 0 bytes browser/themes/winstripe/browser/browser.css | 94 +++++++++++----- browser/themes/winstripe/browser/jar.mn | 4 +- .../themes/winstripe/browser/urlbar-arrow.png | Bin 0 -> 305 bytes .../winstripe/browser/urlbar-favicon-glow.png | Bin 619 -> 0 bytes 13 files changed, 201 insertions(+), 84 deletions(-) create mode 100644 browser/themes/gnomestripe/browser/urlbar-arrow.png delete mode 100644 browser/themes/gnomestripe/browser/urlbar-favicon-glow.png create mode 100644 browser/themes/pinstripe/browser/urlbar-arrow.png delete mode 100644 browser/themes/pinstripe/browser/urlbar-favicon-glow.png create mode 100644 browser/themes/winstripe/browser/urlbar-arrow.png delete mode 100644 browser/themes/winstripe/browser/urlbar-favicon-glow.png diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js index acecd2afa892..7d1cd26fcd6f 100644 --- a/browser/base/content/browser.js +++ b/browser/base/content/browser.js @@ -7794,7 +7794,7 @@ var gIdentityHandler = { dt.setData("text/uri-list", value); dt.setData("text/plain", value); dt.setData("text/html", htmlString); - dt.addElement(event.currentTarget); + dt.setDragImage(gProxyFavIcon, 16, 16); } }; diff --git a/browser/themes/gnomestripe/browser/browser.css b/browser/themes/gnomestripe/browser/browser.css index 7454417b0d3d..5e5c40a02fb2 100644 --- a/browser/themes/gnomestripe/browser/browser.css +++ b/browser/themes/gnomestripe/browser/browser.css @@ -970,7 +970,6 @@ toolbar[iconsize="small"] #feed-button { width: 24px; height: 20px; padding: 2px 4px; - background: url(urlbar-favicon-glow.png) center center no-repeat; } #page-proxy-favicon:not([src]) { @@ -987,37 +986,67 @@ toolbar[iconsize="small"] #feed-button { /* Identity indicator */ #identity-box { - background-color: rgb(95%,95%,95%); - background-image: -moz-linear-gradient(rgba(170,170,170,.25), rgba(0,0,0,.3)); - color: #444; - box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset; - border-radius: 1.5px; + background-image: -moz-linear-gradient(hsl(0,0%,98%), hsl(0,0%,92%)); + box-shadow: 0 1px 0 hsla(0,0%,0%,.05) inset; + -moz-border-end: 1px solid rgba(0,0,0,.1); + padding: 1px; + margin: -1px; + -moz-margin-end: 0; +} + +#identity-box:-moz-locale-dir(ltr) { + border-top-left-radius: 2.5px; + border-bottom-left-radius: 2.5px; +} + +#identity-box:-moz-locale-dir(rtl) { + border-top-right-radius: 2.5px; + border-bottom-right-radius: 2.5px; } #identity-box:-moz-focusring { - outline: 1px dotted -moz-DialogText; + outline: 1px dotted #000; + outline-offset: -3px; } #identity-box:hover:active, #identity-box[open="true"] { - background-image: -moz-linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.1)); + background-image: -moz-linear-gradient(hsl(0,0%,92%), hsl(0,0%,82%)); + box-shadow: 0 1px 1px hsla(0,0%,0%,.3) inset, + 0 1px 3px hsla(0,0%,0%,.3) inset; } #identity-icon-labels { -moz-padding-start: 2px; - -moz-padding-end: 3px; + -moz-padding-end: 5px; } #identity-box.verifiedDomain { - background-color: rgba(30, 80, 170, 0.7); - color: white; - text-shadow: 0 1px 0 rgba(0,0,0,.25); + background-image: -moz-linear-gradient(hsl(215,60%,92%), hsl(215,58%,88%)); + box-shadow: 0 1px 0 hsla(215,54%,33%,.05) inset; + -moz-border-end-color: hsla(215,54%,33%,.2); + color: hsl(215,54%,33%); +} + +#identity-box.verifiedDomain:hover:active, +#identity-box.verifiedDomain[open="true"] { + background-image: -moz-linear-gradient(hsl(215,80%,80%), hsl(215,67%,65%)); + box-shadow: 0 1px 1px hsla(215,54%,33%,.7) inset, + 0 1px 3px 1px hsla(215,54%,33%,.5) inset; } #identity-box.verifiedIdentity { - background-color: rgba(50, 150, 50, 0.8); - color: white; - text-shadow: 0 1px 0 rgba(0,0,0,.25); + background-image: -moz-linear-gradient(hsl(91,70%,90%), hsl(93,60%,81%)); + box-shadow: 0 1px 0 hsla(92,81%,16%,.05) inset; + -moz-border-end-color: hsla(92,81%,16%,.2); + color: hsl(92,81%,16%); +} + +#identity-box.verifiedIdentity:hover:active, +#identity-box.verifiedIdentity[open="true"] { + background-image: -moz-linear-gradient(hsl(92,65%,70%), hsl(92,40%,48%)); + box-shadow: 0 1px 1px hsla(92,81%,16%,.6) inset, + 0 1px 3px 1px hsla(92,81%,16%,.5) inset; } /* Identity popup icons */ @@ -1146,7 +1175,25 @@ toolbar[iconsize="small"] #feed-button { /* Notification icon box */ #notification-popup-box { - margin: 0 3px; + position: relative; + background-color: #fff; + background-clip: padding-box; + padding-left: 4px; + border-radius: 2.5px 0 0 2.5px; + -moz-border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0; + -moz-margin-end: -8px; + margin-top: -1px; + margin-bottom: -1px; +} + +#notification-popup-box:not([hidden]) + #identity-box { + -moz-padding-start: 10px; + border-radius: 0; +} + +#notification-popup-box:-moz-locale-dir(rtl), +.notification-anchor-icon:-moz-locale-dir(rtl) { + -moz-transform: scaleX(-1); } .notification-anchor-icon { @@ -1256,7 +1303,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- #urlbar > toolbarbutton { -moz-appearance: none; list-style-image: url("chrome://browser/skin/reload-stop-go.png"); - margin: -2px; + margin: -1px; -moz-margin-start: 0; padding: 0 3px; background-origin: border-box; diff --git a/browser/themes/gnomestripe/browser/jar.mn b/browser/themes/gnomestripe/browser/jar.mn index 432e8e06d6e9..0fe27e649eb1 100644 --- a/browser/themes/gnomestripe/browser/jar.mn +++ b/browser/themes/gnomestripe/browser/jar.mn @@ -37,7 +37,7 @@ browser.jar: skin/classic/browser/setDesktopBackground.css skin/classic/browser/Toolbar.png skin/classic/browser/Toolbar-small.png - skin/classic/browser/urlbar-favicon-glow.png + skin/classic/browser/urlbar-arrow.png skin/classic/browser/feeds/feedIcon.png (feeds/feedIcon.png) skin/classic/browser/feeds/feedIcon16.png (feeds/feedIcon16.png) skin/classic/browser/feeds/videoFeedIcon.png (feeds/videoFeedIcon.png) diff --git a/browser/themes/gnomestripe/browser/urlbar-arrow.png b/browser/themes/gnomestripe/browser/urlbar-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..fcab253bb301ddfb14e5cabfaa441a6fffff81ee GIT binary patch literal 305 zcmV-10nYx3P)wgfB*OF*|QzU<;SW31U`QJcn-)l0b(Ys3ZPb90tzYM zRPguj-~SyQ9YsK4F02Yb;KhpT^VTCu*0t6TU2HhI)hrNZJ00000NkvXXu0mjf DzTkRv literal 0 HcmV?d00001 diff --git a/browser/themes/gnomestripe/browser/urlbar-favicon-glow.png b/browser/themes/gnomestripe/browser/urlbar-favicon-glow.png deleted file mode 100644 index 19de6ff972550759b8eedb5b2caf6146d599973f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 619 zcmV-x0+juUP)qNDOG$e~OyR&mna;zAJA%+kZf->U* z;|SQ?+>x?_RZ!p(DVBrL4!vUn5j90{+D&*=atk%dM02^P;SQSuyf;DE# zR;s1=XdO3{*4$=10T15@a5E`Tqe52I(jr!HB^Etq++(hRKp|iS9Rw2dRRV^)COE7o`H8{UrqTX)@^`mb{#ee_X@(F0w1Dmy^e9!;@002ovPDHLk FV1f$<0{Z{} diff --git a/browser/themes/pinstripe/browser/browser.css b/browser/themes/pinstripe/browser/browser.css index 2553bc279a1c..377eb94d45fd 100644 --- a/browser/themes/pinstripe/browser/browser.css +++ b/browser/themes/pinstripe/browser/browser.css @@ -779,7 +779,7 @@ toolbar[mode="icons"] #zoom-in-button { width: 7em; min-width: 7em; -moz-appearance: none; - box-shadow: 0 1px rgba(255, 255, 255, 0.2), inset 0 1px #d6d6d6; + box-shadow: 0 1px rgba(255, 255, 255, 0.2), inset 0 1px hsla(0,0%,0%,.05); margin: 0 4px; padding: 0; border: 1px solid; @@ -807,45 +807,65 @@ toolbar[mode="icons"] #zoom-in-button { } #identity-box { - margin: 1px; - border-radius: 2px; - padding: 1px; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); - text-shadow: 0 1px rgba(255, 255, 255, 0.2); -} - - -#identity-box:-moz-focusring { - box-shadow: 0 0 2px 1px -moz-mac-focusring inset, - 0 0 2px 2px -moz-mac-focusring; -} - -#identity-box { - color: white; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7); + background-image: -moz-linear-gradient(hsl(0,0%,98%), hsl(0,0%,92%)); + box-shadow: 0 1px 0 hsla(0,0%,0%,.05) inset; + -moz-border-end: 1px solid hsla(0,0%,0%,.1); -moz-margin-end: 3px; + padding: 1px 4px; } -#identity-box { - background-image: -moz-linear-gradient(#FFF, #DDD); +#identity-box:-moz-locale-dir(ltr) { + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; +} + +#identity-box:-moz-locale-dir(rtl) { + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; } #identity-box:active:hover, #identity-box[open="true"] { - box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35), - inset 0 0 0 20px rgba(0, 0, 0, 0.06); + background-image: -moz-linear-gradient(hsl(0,0%,93%), hsl(0,0%,80%)); + box-shadow: 0 1px 1px hsla(0,0%,0%,.3) inset, + 0 1px 3px hsla(0,0%,0%,.3) inset; } #identity-box.verifiedDomain { - background-image: -moz-linear-gradient(#588EC6, #3C68AE); + background-image: -moz-linear-gradient(hsl(215,60%,92%), hsl(215,58%,88%)); + -moz-border-end-color: hsla(215,54%,33%,.2); + color: hsl(215,54%,33%); +} + +#identity-box.verifiedDomain:active:hover, +#identity-box.verifiedDomain[open="true"] { + background-image: -moz-linear-gradient(hsl(215,85%,85%), hsl(215,70%,68%)); + box-shadow: 0 1px 1px hsla(215,54%,33%,.7) inset, + 0 1px 3px 1px hsla(215,54%,33%,.5) inset; } #identity-box.verifiedIdentity { - background-image: -moz-linear-gradient(#84BB40, #5BA020); + background-image: -moz-linear-gradient(hsl(91,70%,90%), hsl(93,60%,81%)); + -moz-border-end-color: hsla(92,81%,16%,.2); + color: hsl(92,100%,20%); +} + +#identity-box.verifiedIdentity:active:hover, +#identity-box.verifiedIdentity[open="true"] { + background-image: -moz-linear-gradient(hsl(92,69%,77%), hsl(92,44%,51%)); + box-shadow: 0 1px 1px hsla(92,81%,16%,.6) inset, + 0 1px 3px 1px hsla(92,81%,16%,.5) inset; +} + +#identity-box:-moz-focusring { + box-shadow: 0 0 2px 1px -moz-mac-focusring inset, + 0 0 2px 2px -moz-mac-focusring; + -moz-border-end-style: none; + -moz-padding-end: 5px; } #identity-icon-labels { - margin: 0 4px 1px; + -moz-margin-start: 6px; } .urlbar-input-box { @@ -875,20 +895,8 @@ toolbar[mode="icons"] #zoom-in-button { } #page-proxy-stack { - width: 18px; + width: 16px; height: 16px; - padding: 0 1px; -} - -#identity-box.verifiedIdentity > hbox > #page-proxy-stack, -#identity-box.verifiedDomain > hbox > #page-proxy-stack { - width: 24px; - padding: 0 4px; -} - -#identity-box.verifiedIdentity > hbox > #page-proxy-stack, -#identity-box.verifiedDomain > hbox > #page-proxy-stack { - background: url(urlbar-favicon-glow.png) center center no-repeat; } #page-proxy-favicon:not([src]) { @@ -2082,7 +2090,23 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker { } #notification-popup-box { - margin: 0 3px; + position: relative; + background-color: #fff; + background-clip: padding-box; + padding-left: 3px; + border-radius: 2px 0 0 2px; + -moz-border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0; + -moz-margin-end: -8px; +} + +#notification-popup-box:not([hidden]) + #identity-box { + -moz-padding-start: 10px; + border-radius: 0; +} + +#notification-popup-box:-moz-locale-dir(rtl), +.notification-anchor-icon:-moz-locale-dir(rtl) { + -moz-transform: scaleX(-1); } .notification-anchor-icon { diff --git a/browser/themes/pinstripe/browser/jar.mn b/browser/themes/pinstripe/browser/jar.mn index 99f52b5c603a..7f371640dc50 100644 --- a/browser/themes/pinstripe/browser/jar.mn +++ b/browser/themes/pinstripe/browser/jar.mn @@ -45,7 +45,7 @@ browser.jar: skin/classic/browser/Secure-background.gif skin/classic/browser/Toolbar.png skin/classic/browser/toolbarbutton-dropmarker.png - skin/classic/browser/urlbar-favicon-glow.png + skin/classic/browser/urlbar-arrow.png skin/classic/browser/urlbar-popup-blocked.png skin/classic/browser/feeds/subscribe.css (feeds/subscribe.css) skin/classic/browser/feeds/subscribe-ui.css (feeds/subscribe-ui.css) diff --git a/browser/themes/pinstripe/browser/urlbar-arrow.png b/browser/themes/pinstripe/browser/urlbar-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..fcab253bb301ddfb14e5cabfaa441a6fffff81ee GIT binary patch literal 305 zcmV-10nYx3P)wgfB*OF*|QzU<;SW31U`QJcn-)l0b(Ys3ZPb90tzYM zRPguj-~SyQ9YsK4F02Yb;KhpT^VTCu*0t6TU2HhI)hrNZJ00000NkvXXu0mjf DzTkRv literal 0 HcmV?d00001 diff --git a/browser/themes/pinstripe/browser/urlbar-favicon-glow.png b/browser/themes/pinstripe/browser/urlbar-favicon-glow.png deleted file mode 100644 index 68803e5d07861fc2fe1bec2fc0ef3ba2e05fed24..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 504 zcmVZ#CCjo;DS7wRa$f*z zLKFnd>)Hg2f?jYY3_zZrjG25TxD(WZ2cW`SFajfpI>7;G1xKuzL?Vm=NHY0G@FaK? zG!R>14Yw?C0qIV#6@1X#v=1LHA0ei{vvqB ze+loL36X}Of^DL3bvO?nDgG+Z0Qvi#!sCqxdJZa{3HJ!q9^*ZG5V4yYeF^e{NNgL> zm&SI^JQfI)Nd;w&4G()zP|vo31soBCA4vTb0Tt2lZ^VwWhY7q9T-vPN%oW^?TQFBY z8TXeqYnN=P;ItblJJK&=>B^lL=@!o(SmFy6EGuR`v1MM z8Qb0p47iC06s`?!wp&mtPGq;k_nE7y?nDK)*uBTtl46%j!#iwMVD`X~KuaaJ`)9ds uNx(((cpRzZvNwNyaP**)zx9*(DZl_xp1-<|EHsn=0000wgfB*OF*|QzU<;SW31U`QJcn-)l0b(Ys3ZPb90tzYM zRPguj-~SyQ9YsK4F02Yb;KhpT^VTCu*0t6TU2HhI)hrNZJ00000NkvXXu0mjf DzTkRv literal 0 HcmV?d00001 diff --git a/browser/themes/winstripe/browser/urlbar-favicon-glow.png b/browser/themes/winstripe/browser/urlbar-favicon-glow.png deleted file mode 100644 index 19de6ff972550759b8eedb5b2caf6146d599973f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 619 zcmV-x0+juUP)qNDOG$e~OyR&mna;zAJA%+kZf->U* z;|SQ?+>x?_RZ!p(DVBrL4!vUn5j90{+D&*=atk%dM02^P;SQSuyf;DE# zR;s1=XdO3{*4$=10T15@a5E`Tqe52I(jr!HB^Etq++(hRKp|iS9Rw2dRRV^)COE7o`H8{UrqTX)@^`mb{#ee_X@(F0w1Dmy^e9!;@002ovPDHLk FV1f$<0{Z{}