Bug 634065 - Implement design for identity block and persistent indicators, r=dao

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);
   }
 };
 

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;

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)

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 {

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)

browser/themes/winstripe/browser/browser.css

@@ -1176,50 +1176,79 @@ html|*.urlbar-input:-moz-lwtheme:-moz-placeholder,
 /* identity box */
 
 #identity-box {
-  background-color: -moz-dialog;
-  background-image: -moz-linear-gradient(rgba(255,255,255,.25), rgba(0,0,0,.15));
-  color: -moz-dialogText;
-  border-radius: 2px;
+  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);
+  padding: 2px;
+  margin: -2px;
+  -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:hover {
-  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(50%,50%,50%,.2), rgba(0,0,0,.15));
+  background-image: -moz-linear-gradient(hsl(0,0%,95%), hsl(0,0%,87%));
 }
 
 #identity-box[open="true"],
 #identity-box:hover:active {
-  background-image: -moz-linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.1));
-}
-
-#identity-box.verifiedDomain,
-#identity-box.verifiedIdentity {
-  color: white;
-  text-shadow: 0 1px 0 rgba(0,0,0,.25);
-  box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
+  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-box.verifiedDomain {
-  background-color: hsl(219,45%,60%);
+  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 {
+  background-image: -moz-linear-gradient(hsl(215,85%,85%), hsl(215,70%,68%));
+}
+
+#identity-box.verifiedDomain[open="true"],
+#identity-box.verifiedDomain:hover:active {
+  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: hsl(92,45%,52%);
+  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,100%,20%);
+}
+
+#identity-box.verifiedIdentity:hover {
+  background-image: -moz-linear-gradient(hsl(92,69%,77%), hsl(92,44%,51%));
+}
+
+#identity-box.verifiedIdentity[open="true"],
+#identity-box.verifiedIdentity:hover:active {
+  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-box:-moz-focusring {
-  outline: 1px dotted -moz-DialogText;
+  outline: 1px dotted #000;
   outline-offset: -3px;
 }
 
-#identity-box.verifiedDomain:-moz-focusring,
-#identity-box.verifiedIdentity:-moz-focusring {
-  outline-color: white;
-}
-
 #identity-icon-labels {
   -moz-margin-start: 1px;
   -moz-margin-end: 3px;
-  -moz-transform: translate(0, -1px);
 }
 
 /* Location bar dropmarker */
@@ -1255,7 +1284,6 @@ html|*.urlbar-input:-moz-lwtheme:-moz-placeholder,
   width: 24px;
   height: 18px;
   padding: 1px 4px;
-  background: url(urlbar-favicon-glow.png) center center no-repeat;
 }
 
 #page-proxy-favicon:not([src]) {
@@ -2029,7 +2057,25 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
 
 /* Notification icon box */
 #notification-popup-box {
-  margin: 0 3px;
+  position: relative;
+  background-color: #fff;
+  background-clip: padding-box;
+  padding-left: 3px;
+  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: -2px;
+  margin-bottom: -2px;
+}
+
+#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 {

browser/themes/winstripe/browser/jar.mn

@@ -45,7 +45,7 @@ browser.jar:
         skin/classic/browser/menu-forward.png                        (menu-forward.png)
         skin/classic/browser/monitor.png
         skin/classic/browser/monitor_16-10.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/feedIcon.png                      (feeds/feedIcon.png)
         skin/classic/browser/feeds/feedIcon16.png                    (feeds/feedIcon16.png)
@@ -158,7 +158,7 @@ browser.jar:
         skin/classic/aero/browser/menu-forward.png                   (menu-forward-aero.png)
         skin/classic/aero/browser/monitor.png
         skin/classic/aero/browser/monitor_16-10.png
-        skin/classic/aero/browser/urlbar-favicon-glow.png
+        skin/classic/aero/browser/urlbar-arrow.png
         skin/classic/aero/browser/urlbar-popup-blocked.png
         skin/classic/aero/browser/feeds/feedIcon.png                 (feeds/feedIcon-aero.png)
         skin/classic/aero/browser/feeds/feedIcon16.png               (feeds/feedIcon16-aero.png)