From a456333108b0ae1e24c93cd2d74736ba4803511a Mon Sep 17 00:00:00 2001 From: Jared Wein Date: Mon, 7 Nov 2011 10:48:27 -0800 Subject: [PATCH] Bug 674744 - Implement conditional forward button for pinstripe. r=dao ui-r=shorlander --- browser/base/content/browser.xul | 4 + browser/themes/pinstripe/browser/browser.css | 157 ++++++++++++++++++- 2 files changed, 158 insertions(+), 3 deletions(-) diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul index 1ca600b86d92..ba2a7cb7bdfa 100644 --- a/browser/base/content/browser.xul +++ b/browser/base/content/browser.xul @@ -1063,6 +1063,10 @@ + + + + diff --git a/browser/themes/pinstripe/browser/browser.css b/browser/themes/pinstripe/browser/browser.css index f0d20a85d827..2a96556acd40 100644 --- a/browser/themes/pinstripe/browser/browser.css +++ b/browser/themes/pinstripe/browser/browser.css @@ -47,6 +47,10 @@ @import url("chrome://global/skin/"); %include shared.inc +%filter substitution +%define forwardTransitionLength 150ms +%define conditionalForwardWithUrlbar window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button +%define conditionalForwardWithUrlbarWidth 27 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); @@ -531,6 +535,71 @@ toolbar[mode="icons"] #forward-button { mask: url(chrome://browser/content/browser.xul#pinstripe-keyhole-forward-mask); } +@conditionalForwardWithUrlbar@ > #forward-button:not(:-moz-lwtheme) { + -moz-appearance: none; + -moz-padding-start: 2px; + background: -moz-linear-gradient(hsl(0,0%,99%), hsl(0,0%,67%)) padding-box; + border: 1px solid; + border-color: hsl(0,0%,31%) hsla(0,0%,29%,.6) hsl(0,0%,27%); + box-shadow: inset 0 1px 0 hsla(0,0%,100%,.35), + 0 1px 0 hsla(0,0%,100%,.2); +} + +@conditionalForwardWithUrlbar@ > #forward-button { + border-radius: 0; + -moz-margin-end: 0; +} + +@conditionalForwardWithUrlbar@ > #forward-button:-moz-lwtheme { + -moz-padding-start: 2px; + -moz-padding-end: 0; +} + +@conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button { + -moz-transition: opacity @forwardTransitionLength@ ease-out; +} + +@conditionalForwardWithUrlbar@ > #forward-button:hover:active:not(:-moz-lwtheme) { + background-image: -moz-linear-gradient(hsl(0,0%,74%), hsl(0,0%,61%)); + box-shadow: inset rgba(0,0,0,.3) 0 -6px 10px, + inset #000 0 1px 3px, + inset rgba(0,0,0,.2) 0 1px 3px, + 0 1px 0 hsla(0,0%,100%,.2); +} + +@conditionalForwardWithUrlbar@ > #forward-button:-moz-window-inactive:not(:-moz-lwtheme) { + border-color: hsl(0,0%,64%) hsl(0,0%,65%) hsl(0,0%,66%); + background-image: -moz-linear-gradient(hsl(0,0%,99%), hsl(0,0%,82%)); + box-shadow: inset 0 1px 0 hsla(0,0%,100%,.35); +} + +@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] { + opacity: 0; +} + +@media (-moz-mac-lion-theme) { + @conditionalForwardWithUrlbar@ > #forward-button:not(:-moz-lwtheme) { + background-image: -moz-linear-gradient(hsla(0,0%,100%,.73), hsla(0,0%,100%,.05) 85%); + border-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.25) hsla(0,0%,0%,.2); + box-shadow: inset 0 1px 0 hsla(0,0%,100%,.2), + inset 0 0 1px hsla(0,0%,100%,.1), + 0 1px 0 hsla(0,0%,100%,.2); + } + + @conditionalForwardWithUrlbar@ > #forward-button:hover:active:not(:-moz-lwtheme) { + background-image: -moz-linear-gradient(hsla(0,0%,60%,.37), hsla(0,0%,100%,.35) 95%); + border-color: hsla(0,0%,0%,.43) hsla(0,0%,0%,.25) hsla(0,0%,0%,.37); + box-shadow: inset 0 1px 0 hsla(0,0%,0%,.02), + inset 0 1px 2px hsla(0,0%,0%,.2), + 0 1px 0 hsla(0,0%,100%,.2); + } + + @conditionalForwardWithUrlbar@ > #forward-button:-moz-window-inactive:not(:-moz-lwtheme) { + background-image: none; + border-color: hsla(0,0%,0%,.2); + } +} + #navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar #forward-button { width: 27px; } @@ -842,6 +911,57 @@ toolbar[mode="icons"] #zoom-in-button { border-radius: @toolbarbuttonCornerRadius@; } +@conditionalForwardWithUrlbar@ + #urlbar-container { + padding-left: @conditionalForwardWithUrlbarWidth@px; + -moz-margin-start: -@conditionalForwardWithUrlbarWidth@px; + position: relative; + pointer-events: none; +} + +@conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar { + -moz-border-start: none; + margin-left: 0; + pointer-events: all; +} + +@conditionalForwardWithUrlbar@:not([switchingtabs]) + #urlbar-container > #urlbar { + -moz-transition: margin-left @forwardTransitionLength@ ease-out; +} + +@conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar:-moz-locale-dir(ltr) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +@conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar:-moz-locale-dir(rtl) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +@conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container { + mask: url("chrome://browser/content/browser.xul#pinstripe-urlbar-back-button-mask"); +} + +@conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container > #urlbar { + margin-left: -@conditionalForwardWithUrlbarWidth@px; +} + +@conditionalForwardWithUrlbar@[forwarddisabled]:hover:not([switchingtabs]) + #urlbar-container > #urlbar { + /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */ + -moz-transition-delay: 100s; +} + +@conditionalForwardWithUrlbar@[forwarddisabled]:not(:hover) + #urlbar-container > #urlbar { + /* when not hovered anymore, trigger a new transition to hide the forward button immediately */ + margin-left: -@conditionalForwardWithUrlbarWidth@.01px; +} + +@conditionalForwardWithUrlbar@ + #urlbar-container:-moz-locale-dir(rtl), +@conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar:-moz-locale-dir(rtl) { + /* let pinstripe-urlbar-back-button-mask clip the urlbar's right side for RTL */ + -moz-transform: scaleX(-1); +} + #identity-box { background-image: -moz-linear-gradient(hsl(0,0%,98%), hsl(0,0%,92%)); box-shadow: 0 1px 0 hsla(0,0%,0%,.05) inset; @@ -860,6 +980,38 @@ toolbar[mode="icons"] #zoom-in-button { border-bottom-right-radius: 2px; } +#notification-popup-box:not([hidden]) + #identity-box { + -moz-padding-start: 10px; + border-radius: 0; +} + +@conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar > #identity-box { + border-radius: 0; +} + +@conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) { + -moz-transition: 0s padding-left; + padding-left: 10px; +} + +@conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) { + -moz-transition: 0s padding-right; + padding-right: 10px; +} + +@conditionalForwardWithUrlbar@[forwarddisabled]:hover:not([switchingtabs]) + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box { + /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */ + -moz-transition-delay: 100s; +} + +@conditionalForwardWithUrlbar@[forwarddisabled]:not(:hover) + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) { + padding-left: 10.01px; +} + +@conditionalForwardWithUrlbar@[forwarddisabled]:not(:hover) + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) { + padding-right: 10.01px; +} + #identity-box:active:hover, #identity-box[open="true"] { background-image: -moz-linear-gradient(hsl(0,0%,93%), hsl(0,0%,80%)); @@ -2155,9 +2307,8 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker { -moz-margin-end: -8px; } -#notification-popup-box:not([hidden]) + #identity-box { - -moz-padding-start: 10px; - border-radius: 0; +@conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container > #urlbar > #notification-popup-box { + padding-left: 7px; } #notification-popup-box:-moz-locale-dir(rtl),