[Australis]
Bug 477948: Keyhole back/ forward button for Linux. r=jaws, a=sledru.
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -1181,25 +1181,24 @@
tooltiptext="&devToolbarCloseButton.tooltiptext;"/>
#endif
</toolbar>
</vbox>
<svg:svg height="0">
#include tab-shape.inc.svg
-#ifndef XP_UNIX
- <svg:clipPath id="windows-keyhole-forward-clip-path" clipPathUnits="userSpaceOnUse">
+#ifndef XP_MACOSX
+ <svg:clipPath id="keyhole-forward-clip-path" clipPathUnits="userSpaceOnUse">
<svg:path d="M 0,0 a 16 16 0 0 1 0,24 l 10000,0 l 0,-24 l -10000,0 z"/>
</svg:clipPath>
- <svg:clipPath id="windows-urlbar-back-button-clip-path" clipPathUnits="userSpaceOnUse">
+ <svg:clipPath id="urlbar-back-button-clip-path" clipPathUnits="userSpaceOnUse">
<svg:path d="M -1,1 a 16 16 0 0 1 0,24 l 10000,0 l 0,-24 l -10000,0 z"/>
</svg:clipPath>
-#endif
-#ifdef XP_MACOSX
+#else
<svg:clipPath id="osx-keyhole-forward-clip-path" clipPathUnits="userSpaceOnUse">
<svg:path d="M 0,0 a 16 16 0 0 1 0,24 l 10000,0 l 0,-24 l -10000,0 z"/>
</svg:clipPath>
<svg:clipPath id="osx-urlbar-back-button-clip-path" clipPathUnits="userSpaceOnUse">
<svg:path d="M -12,-5 a 16 16 0 0 1 0,34 l 10000,0 l 0,-34 l -10000,0 z"/>
</svg:clipPath>
#endif
</svg:svg>
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -10,17 +10,17 @@
@namespace html url("http://www.w3.org/1999/xhtml");
%include ../shared/browser.inc
%include linuxShared.inc
%filter substitution
%define forwardTransitionLength 150ms
%define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-container
-%define conditionalForwardWithUrlbarWidth 40
+%define conditionalForwardWithUrlbarWidth 30
#menubar-items {
-moz-box-orient: vertical; /* for flex hack */
}
#main-menubar {
-moz-box-flex: 1; /* make menu items expand to fill toolbar height */
}
@@ -663,31 +663,106 @@ toolbarbutton[sdk-button="true"][cui-are
background-position: center;
background-repeat: no-repeat;
background-size: 1px 18px;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.2);
}
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
-moz-margin-start: -4px;
+ margin-top: 3px;
+ margin-bottom: 3px;
+}
+
+#back-button {
+ padding-top: 3px;
+ padding-bottom: 3px;
+ -moz-padding-start: 5px;
+ -moz-padding-end: 0;
+ position: relative;
+ z-index: 1;
+ border-radius: 0 10000px 10000px 0;
+}
+
+#back-button:-moz-locale-dir(rtl) {
+ border-radius: 10000px 0 0 10000px;
+}
+
+#back-button > menupopup {
+ margin-top: -1px;
}
-#forward-button[disabled] {
- transform: scale(0);
+#back-button > .toolbarbutton-icon {
+ border-radius: 10000px;
+ background-clip: padding-box;
+ padding: 6px;
+ border: none;
+ box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset,
+ 0 0 0 1px hsla(0,0%,100%,.3) inset,
+ 0 0 0 1px hsla(210,54%,20%,.25),
+ 0 1px 0 hsla(210,54%,20%,.35);
+ background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
+ transition-property: background-color, box-shadow;
+ transition-duration: 250ms;
+}
+
+#back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
+ background-color: hsla(210,48%,96%,.75);
+ box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset,
+ 0 0 0 1px hsla(0,0%,100%,.3) inset,
+ 0 0 0 1px hsla(210,54%,20%,.3),
+ 0 1px 0 hsla(210,54%,20%,.4),
+ 0 0 4px hsla(210,54%,20%,.2);
+}
+
+#back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
+#back-button[open="true"] > .toolbarbutton-icon {
+ background-color: hsla(210,54%,20%,.15);
+ box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset,
+ 0 0 1px hsla(210,54%,20%,.2) inset,
+ 0 0 0 1px hsla(210,54%,20%,.4),
+ 0 1px 0 hsla(210,54%,20%,.2);
+ transition: none;
+}
+
+#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
+ box-shadow: 0 0 0 1px hsla(210,54%,20%,.55),
+ 0 1px 0 hsla(210,54%,20%,.65) !important;
+ transition: none;
+}
+
+#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
+#forward-button:-moz-locale-dir(rtl) {
+ transform: scaleX(-1);
+}
+
+@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
opacity: 0;
- pointer-events: none;
}
@conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button {
- transition: @forwardTransitionLength@ ease-out;
+ transition: opacity @forwardTransitionLength@ ease-out;
+}
+
+@conditionalForwardWithUrlbar@ > #forward-button[occluded-by-urlbar] {
+ visibility: hidden;
}
-#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
-#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
- transform: scaleX(-1);
+#forward-button {
+ padding: 0;
+}
+
+#forward-button > .toolbarbutton-icon {
+ background-clip: padding-box;
+ clip-path: url("chrome://browser/content/browser.xul#keyhole-forward-clip-path");
+ margin-left: -6px;
+ border-left-style: none;
+ border-radius: 0;
+ padding: 2px 3px 2px 9px;
+ border: 1px solid #9a9a9a;
}
/* tabview menu item */
#menu_tabview {
list-style-image: url(chrome://browser/skin/tabview/tabview.png);
-moz-image-region: rect(0, 80px, 16px, 64px);
}
@@ -782,19 +857,31 @@ toolbarbutton[sdk-button="true"][cui-are
#restore-button {
list-style-image: url("chrome://global/skin/icons/Restore.gif");
}
#close-button {
list-style-image: url("chrome://global/skin/icons/Close.gif");
}
/* Location bar */
+#urlbar,
+.searchbar-textbox {
+ -moz-appearance: none;
+ padding: 1px;
+ border: 1px solid ThreeDShadow;
+ border-radius: 2px;
+}
+
+#urlbar[focused],
+.searchbar-textbox[focused] {
+ border-color: Highlight;
+}
+
#urlbar {
- -moz-appearance: textfield;
- padding: 0;
+ background-color: -moz-field;
}
.urlbar-textbox-container {
-moz-appearance: none;
-moz-box-align: stretch;
}
.urlbar-input-box {
@@ -806,36 +893,69 @@ toolbarbutton[sdk-button="true"][cui-are
}
#urlbar-container {
-moz-box-orient: horizontal;
-moz-box-align: stretch;
}
@conditionalForwardWithUrlbar@ > #urlbar-wrapper {
- -moz-padding-start: @conditionalForwardWithUrlbarWidth@px;
+ padding-left: @conditionalForwardWithUrlbarWidth@px;
-moz-margin-start: -@conditionalForwardWithUrlbarWidth@px;
position: relative;
pointer-events: none;
}
@conditionalForwardWithUrlbar@ > #urlbar-wrapper > #urlbar {
+ -moz-border-start: none;
+ margin-left: 0;
pointer-events: all;
}
@conditionalForwardWithUrlbar@:not([switchingtabs]) > #urlbar-wrapper > #urlbar {
- transition: margin-left @forwardTransitionLength@ ease-out,
- margin-right @forwardTransitionLength@ ease-out;
+ transition: margin-left @forwardTransitionLength@ ease-out;
+}
+
+@conditionalForwardWithUrlbar@ > #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+@conditionalForwardWithUrlbar@ > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+@conditionalForwardWithUrlbar@[forwarddisabled] > #urlbar-wrapper {
+ /* Work with margin-top to align the clip-path correctly. */
+ margin-top: 5px;
+ clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");
}
-@conditionalForwardWithUrlbar@[forwarddisabled] > #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
+@conditionalForwardWithUrlbar@[forwarddisabled] > #urlbar-wrapper > #urlbar {
+ margin-top: -4px;
margin-left: -@conditionalForwardWithUrlbarWidth@px;
}
-@conditionalForwardWithUrlbar@[forwarddisabled] > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
- margin-right: -@conditionalForwardWithUrlbarWidth@px;
+
+@conditionalForwardWithUrlbar@[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar {
+ /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
+ transition-delay: 100s;
+}
+
+@conditionalForwardWithUrlbar@[forwarddisabled][switchingtabs] + #urlbar-container > #urlbar,
+@conditionalForwardWithUrlbar@[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar {
+ /* when switching tabs, or when not hovered anymore, trigger a new transition
+ * to hide the forward button immediately */
+ margin-left: -@conditionalForwardWithUrlbarWidth@.01px;
+}
+
+@conditionalForwardWithUrlbar@ > #urlbar-wrapper:-moz-locale-dir(rtl),
+@conditionalForwardWithUrlbar@ > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
+ /* let windows-urlbar-back-button-mask clip the urlbar's right side for RTL */
+ transform: scaleX(-1);
}
#urlbar-icons {
-moz-box-align: center;
}
.urlbar-icon {
cursor: pointer;
@@ -865,67 +985,109 @@ toolbarbutton[sdk-button="true"][cui-are
-moz-margin-start: 0;
color: GrayText;
}
#search-container {
min-width: calc(54px + 11ch);
}
-%include ../shared/identity-block.inc.css
-
-#page-proxy-favicon {
- margin-top: 2px;
- margin-bottom: 2px;
- -moz-margin-start: 4px;
- -moz-margin-end: 3px;
- -moz-image-region: rect(0, 16px, 16px, 0);
-}
+/* identity box */
-#identity-box:hover > #page-proxy-favicon {
- -moz-image-region: rect(0, 32px, 16px, 16px);
-}
-
-#identity-box:hover:active > #page-proxy-favicon,
-#identity-box[open=true] > #page-proxy-favicon {
- -moz-image-region: rect(0, 48px, 16px, 32px);
-}
-
-/* Identity indicator */
#identity-box {
padding: 1px;
- margin: -1px;
- -moz-margin-end: 0;
font-size: .9em;
}
#identity-box:-moz-locale-dir(ltr) {
- border-top-left-radius: 2.5px;
- border-bottom-left-radius: 2.5px;
+ border-top-left-radius: 1.5px;
+ border-bottom-left-radius: 1.5px;
}
#identity-box:-moz-locale-dir(rtl) {
- border-top-right-radius: 2.5px;
- border-bottom-right-radius: 2.5px;
+ border-top-right-radius: 1.5px;
+ border-bottom-right-radius: 1.5px;
+}
+
+#notification-popup-box:not([hidden]) + #identity-box {
+ -moz-padding-start: 10px;
+ border-radius: 0;
+}
+
+@conditionalForwardWithUrlbar@ > #urlbar-wrapper > #urlbar > #identity-box {
+ border-radius: 0;
+}
+
+@conditionalForwardWithUrlbar@[forwarddisabled] > #urlbar-wrapper > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
+ padding-left: 5px;
+ transition: padding-left;
+}
+
+@conditionalForwardWithUrlbar@[forwarddisabled] > #urlbar-wrapper > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
+ padding-right: 5px;
+ transition: padding-right;
+}
+
+@conditionalForwardWithUrlbar@[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar > #notification-popup-box[hidden] + #identity-box {
+ /* forward button hiding is delayed when hovered */
+ transition-delay: 100s;
+}
+
+@conditionalForwardWithUrlbar@[forwarddisabled][switchingtabs] + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr),
+@conditionalForwardWithUrlbar@[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
+ /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
+ padding-left: 5.01px;
+}
+
+@conditionalForwardWithUrlbar@[forwarddisabled][switchingtabs] + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl),
+@conditionalForwardWithUrlbar@[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
+ /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
+ padding-right: 5.01px;
+}
+
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
+ -moz-margin-end: 4px;
+}
+
+#identity-box.verifiedIdentity:not(:-moz-lwtheme) {
+ background-color: #fff;
}
#identity-box:-moz-focusring {
outline: 1px dotted #000;
outline-offset: -3px;
}
#identity-icon-labels {
-moz-padding-start: 2px;
-moz-padding-end: 5px;
}
-#urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
- background-color: #fff;
- -moz-margin-end: 4px;
+%include ../shared/identity-block.inc.css
+
+#page-proxy-favicon {
+ margin-top: 1px;
+ margin-bottom: 1px;
+ -moz-margin-start: 3px;
+ -moz-margin-end: 2px;
+ -moz-image-region: rect(0, 16px, 16px, 0);
+}
+
+@conditionalForwardWithUrlbar@ > #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
+ -moz-margin-end: 1px;
+}
+
+#identity-box:hover > #page-proxy-favicon {
+ -moz-image-region: rect(0, 32px, 16px, 16px);
+}
+
+#identity-box:hover:active > #page-proxy-favicon,
+#identity-box[open=true] > #page-proxy-favicon {
+ -moz-image-region: rect(0, 48px, 16px, 32px);
}
/* Identity popup icons */
#identity-popup-icon {
height: 64px;
width: 64px;
padding: 0;
list-style-image: url("chrome://browser/skin/identity.png");
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -807,17 +807,17 @@ toolbarbutton[sdk-button="true"][cui-are
#nav-bar .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
#nav-bar .toolbarbutton-1:not([disabled]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container {
background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
background-color: hsla(210,54%,20%,.15);
border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4);
box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset,
0 0 1px hsla(210,54%,20%,.2) inset,
- /* allows windows-keyhole-forward-clip-path to be used for non-hover as well as hover: */
+ /* allows keyhole-forward-clip-path to be used for non-hover as well as hover: */
0 1px 0 hsla(210,54%,20%,0),
0 0 2px hsla(210,54%,20%,0);
text-shadow: none;
transition: none;
}
#nav-bar .toolbarbutton-1:-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
-moz-border-start-color: hsla(210,54%,20%,.35);
@@ -865,17 +865,17 @@ toolbarbutton[sdk-button="true"][cui-are
#forward-button > menupopup {
margin-top: 1px !important;
}
#forward-button > .toolbarbutton-icon {
background-clip: padding-box !important;
/*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
- clip-path: url(chrome://browser/content/browser.xul#windows-keyhole-forward-clip-path) !important;
+ clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;
margin-left: -6px !important;
border-left-style: none !important;
border-radius: 0 !important;
padding-left: 9px !important;
padding-right: 3px !important;
}
%ifdef WINDOWS_AERO
@@ -1168,17 +1168,17 @@ toolbarbutton[sdk-button="true"][cui-are
}
@conditionalForwardWithUrlbar@ > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@conditionalForwardWithUrlbar@[forwarddisabled] > #urlbar-wrapper {
- clip-path: url("chrome://browser/content/browser.xul#windows-urlbar-back-button-clip-path");
+ clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");
}
@conditionalForwardWithUrlbar@[forwarddisabled] > #urlbar-wrapper > #urlbar {
margin-left: -@conditionalForwardWithUrlbarWidth@px;
}
@conditionalForwardWithUrlbar@[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar {
/* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */