mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-23 18:26:15 +00:00
fix for bug #342900
improve indication that open tab in background opened tab in overflow area. instead of flashing the "all tabs" button, provide a smoother animation. note, this will not work on mac trunk (but it will work on the mac branch) due to bug #346738 (aka #325296), so for now, there is no animation on the mac. r=mconnor
This commit is contained in:
parent
d264b05e10
commit
81a8257967
@ -2468,14 +2468,28 @@
|
|||||||
<xul:arrowscrollbox anonid="arrowscrollbox" orient="horizontal" flex="1" style="min-width: 1px;" clicktoscroll="true">
|
<xul:arrowscrollbox anonid="arrowscrollbox" orient="horizontal" flex="1" style="min-width: 1px;" clicktoscroll="true">
|
||||||
<children includes="tab"/>
|
<children includes="tab"/>
|
||||||
</xul:arrowscrollbox>
|
</xul:arrowscrollbox>
|
||||||
<xul:hbox class="tabs-alltabs-box" align="center" pack="end"
|
<xul:stack align="center" pack="end">
|
||||||
anonid="alltabs-box">
|
<!-- XXXsspitzer hack
|
||||||
<xul:toolbarbutton class="tabs-alltabs-button" type="menu">
|
this extra hbox with position: relative
|
||||||
<xul:menupopup class="tabs-alltabs-popup"
|
is needed to work around two bugs.
|
||||||
anonid="alltabs-popup"
|
see bugs #346307 and #346035
|
||||||
position="after_end"/>
|
-->
|
||||||
|
<xul:hbox style="position: relative;">
|
||||||
|
<xul:hbox flex="1" class="tabs-alltabs-box" anonid="alltabs-box"/>
|
||||||
|
</xul:hbox>
|
||||||
|
<!-- XXXsspitzer hack
|
||||||
|
this extra hbox with position: relative
|
||||||
|
is needed to work around two bugs.
|
||||||
|
see bugs #346307 and #346035
|
||||||
|
-->
|
||||||
|
<xul:hbox style="position: relative;">
|
||||||
|
<xul:toolbarbutton class="tabs-alltabs-button" type="menu">
|
||||||
|
<xul:menupopup class="tabs-alltabs-popup"
|
||||||
|
anonid="alltabs-popup"
|
||||||
|
position="after_end"/>
|
||||||
</xul:toolbarbutton>
|
</xul:toolbarbutton>
|
||||||
</xul:hbox>
|
</xul:hbox>
|
||||||
|
</xul:stack>
|
||||||
<xul:hbox class="tabs-closebutton-box" align="center" pack="end" anonid="tabstrip-closebutton">
|
<xul:hbox class="tabs-closebutton-box" align="center" pack="end" anonid="tabstrip-closebutton">
|
||||||
<xul:toolbarbutton class="close-button tabs-closebutton"/>
|
<xul:toolbarbutton class="close-button tabs-closebutton"/>
|
||||||
</xul:hbox>
|
</xul:hbox>
|
||||||
@ -2522,9 +2536,9 @@
|
|||||||
<destructor>
|
<destructor>
|
||||||
<![CDATA[
|
<![CDATA[
|
||||||
// Release timer to avoid reference cycles.
|
// Release timer to avoid reference cycles.
|
||||||
if (this.mFlashTimer) {
|
if (this._animateTimer) {
|
||||||
this.mFlashTimer.cancel();
|
this._animateTimer.cancel();
|
||||||
this.mFlashTimer = null;
|
this._animateTimer = null;
|
||||||
}
|
}
|
||||||
]]>
|
]]>
|
||||||
</destructor>
|
</destructor>
|
||||||
@ -2667,17 +2681,37 @@
|
|||||||
"anonid", "alltabs-box");
|
"anonid", "alltabs-box");
|
||||||
</field>
|
</field>
|
||||||
|
|
||||||
<field name="mFlashTimer">null</field>
|
<field name="_animateTimer">null</field>
|
||||||
<field name="mFlashStage">0</field>
|
<field name="_animateStep">-1</field>
|
||||||
<field name="mFlashStart">6</field>
|
<field name="_animateDelay">50</field>
|
||||||
<field name="mFlashDelay">150</field>
|
<field name="_animatePercents">
|
||||||
|
[0.50, 0.60, 0.70, 0.80, 0.90,
|
||||||
|
1.00, 1.00, 1.00, 1.00, 1.00, 1.00, 1.00, 1.00, 1.00, 1.00,
|
||||||
|
1.00, 1.00, 1.00, 1.00, 1.00, 1.00, 1.00, 1.00, 1.00, 1.00,
|
||||||
|
1.00, 1.00, 1.00, 1.00, 1.00, 1.00, 1.00, 1.00, 1.00, 1.00,
|
||||||
|
0.95, 0.90, 0.85, 0.80, 0.75, 0.70, 0.65, 0.60, 0.55, 0.50,
|
||||||
|
0.45, 0.40, 0.35, 0.30, 0.25, 0.20, 0.15, 0.10, 0.05, 0.00]
|
||||||
|
</field>
|
||||||
|
|
||||||
|
<method name="_stopAnimation">
|
||||||
|
<body><![CDATA[
|
||||||
|
if (this._animateStep != -1) {
|
||||||
|
if (this._animateTimer)
|
||||||
|
this._animateTimer.cancel();
|
||||||
|
|
||||||
|
this._animateStep = -1;
|
||||||
|
this.mAllTabsBox.style.opacity = 0.0;
|
||||||
|
}
|
||||||
|
]]></body>
|
||||||
|
</method>
|
||||||
|
|
||||||
<method name="_notifyBackgroundTab">
|
<method name="_notifyBackgroundTab">
|
||||||
<parameter name="aTab"/>
|
<parameter name="aTab"/>
|
||||||
<body><![CDATA[
|
<body><![CDATA[
|
||||||
if (this.mFlashStage)
|
// if we are already animating, don't do it again
|
||||||
|
if (this._animateStep != -1)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
var tsbo = this.mTabstrip.scrollBoxObject;
|
var tsbo = this.mTabstrip.scrollBoxObject;
|
||||||
var tsboStart = tsbo.screenX;
|
var tsboStart = tsbo.screenX;
|
||||||
var tsboEnd = tsboStart + tsbo.width;
|
var tsboEnd = tsboStart + tsbo.width;
|
||||||
@ -2689,17 +2723,17 @@
|
|||||||
// only start the flash timer if the new tab (which was loaded in
|
// only start the flash timer if the new tab (which was loaded in
|
||||||
// the background) is not completely visible
|
// the background) is not completely visible
|
||||||
if (tsboStart > ctboStart || ctboEnd > tsboEnd) {
|
if (tsboStart > ctboStart || ctboEnd > tsboEnd) {
|
||||||
this.mFlashStage = this.mFlashStart;
|
this._animateStep = 0;
|
||||||
|
|
||||||
if (!this.mFlashTimer)
|
if (!this._animateTimer)
|
||||||
this.mFlashTimer =
|
this._animateTimer =
|
||||||
Components.classes["@mozilla.org/timer;1"]
|
Components.classes["@mozilla.org/timer;1"]
|
||||||
.createInstance(Components.interfaces.nsITimer);
|
.createInstance(Components.interfaces.nsITimer);
|
||||||
else
|
else
|
||||||
this.mFlashTimer.cancel();
|
this._animateTimer.cancel();
|
||||||
|
|
||||||
this.mFlashTimer.initWithCallback(this,
|
this._animateTimer.initWithCallback(this,
|
||||||
this.mFlashDelay,
|
this._animateDelay,
|
||||||
Components.interfaces.nsITimer.TYPE_REPEATING_SLACK);
|
Components.interfaces.nsITimer.TYPE_REPEATING_SLACK);
|
||||||
}
|
}
|
||||||
]]></body>
|
]]></body>
|
||||||
@ -2711,13 +2745,13 @@
|
|||||||
if (!document)
|
if (!document)
|
||||||
aTimer.cancel();
|
aTimer.cancel();
|
||||||
|
|
||||||
this.mFlashStage--;
|
var percent = this._animatePercents[this._animateStep];
|
||||||
|
this.mAllTabsBox.style.opacity = percent;
|
||||||
|
|
||||||
this.mAllTabsBox.setAttribute("flash",
|
if (this._animateStep < (this._animatePercents.length - 1))
|
||||||
(this.mFlashStage % 2) ? "true" : "false");
|
this._animateStep++;
|
||||||
|
else
|
||||||
if (!this.mFlashStage)
|
this._stopAnimation();
|
||||||
aTimer.cancel();
|
|
||||||
]]></body>
|
]]></body>
|
||||||
</method>
|
</method>
|
||||||
</implementation>
|
</implementation>
|
||||||
@ -2802,6 +2836,10 @@
|
|||||||
var tabcontainer = document.getBindingParent(this);
|
var tabcontainer = document.getBindingParent(this);
|
||||||
var tabs = tabcontainer.childNodes;
|
var tabs = tabcontainer.childNodes;
|
||||||
|
|
||||||
|
// if an animation is in progress and the user
|
||||||
|
// clicks on the "all tabs" button, stop the animation
|
||||||
|
tabcontainer._stopAnimation();
|
||||||
|
|
||||||
for (var i = 0; i < tabs.length; i++) {
|
for (var i = 0; i < tabs.length; i++) {
|
||||||
var menuItem = document.createElementNS(
|
var menuItem = document.createElementNS(
|
||||||
"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
|
"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul",
|
||||||
|
@ -41,8 +41,6 @@ tab:hover > .tab-image-middle > .tab-icon > .tab-extra-status {
|
|||||||
padding-top: 1px;
|
padding-top: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
tab[busy] > .tab-icon-image, tab[busy] > .tab-image-middle > .tab-icon > .tab-icon-image {
|
tab[busy] > .tab-icon-image, tab[busy] > .tab-image-middle > .tab-icon > .tab-icon-image {
|
||||||
list-style-image: url("chrome://global/skin/icons/loading_16_grey.gif") !important;
|
list-style-image: url("chrome://global/skin/icons/loading_16_grey.gif") !important;
|
||||||
}
|
}
|
||||||
@ -245,8 +243,14 @@ tabbrowser > tabbox > tabpanels {
|
|||||||
* All Tabs Button
|
* All Tabs Button
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.tabs-alltabs-box[flash="true"] {
|
.tabs-alltabs-box {
|
||||||
background-color: orange;
|
/* XXXsspitzer
|
||||||
|
* disabling the background-color because on mac trunk
|
||||||
|
* due to the opacity bug #346738 (aka #325296)
|
||||||
|
*
|
||||||
|
* background-color: orange;
|
||||||
|
*/
|
||||||
|
opacity: 0.0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs-alltabs-button {
|
.tabs-alltabs-button {
|
||||||
|
@ -62,13 +62,28 @@
|
|||||||
<xul:arrowscrollbox anonid="arrowscrollbox" orient="horizontal" flex="1" style="min-width: 1px;" clicktoscroll="true">
|
<xul:arrowscrollbox anonid="arrowscrollbox" orient="horizontal" flex="1" style="min-width: 1px;" clicktoscroll="true">
|
||||||
<children/>
|
<children/>
|
||||||
</xul:arrowscrollbox>
|
</xul:arrowscrollbox>
|
||||||
<xul:hbox class="tabs-alltabs-box" pack="end" align="center"
|
<xul:stack align="center" pack="end">
|
||||||
anonid="alltabs-box">
|
<!-- XXXsspitzer hack
|
||||||
<xul:toolbarbutton class="tabs-alltabs-button" type="menu">
|
this extra hbox with position: relative
|
||||||
<xul:menupopup class="tabs-alltabs-popup"
|
is needed to work around two bugs.
|
||||||
anonid="alltabs-popup" position="after_end"/>
|
see bugs #346307 and #346035
|
||||||
</xul:toolbarbutton>
|
-->
|
||||||
</xul:hbox>
|
<xul:hbox style="position: relative;">
|
||||||
|
<xul:hbox flex="1" class="tabs-alltabs-box"
|
||||||
|
anonid="alltabs-box"/>
|
||||||
|
</xul:hbox>
|
||||||
|
<!-- XXXsspitzer hack
|
||||||
|
this extra hbox with position: relative
|
||||||
|
is needed to work around two bugs.
|
||||||
|
see bugs #346307 and #346035
|
||||||
|
-->
|
||||||
|
<xul:hbox style="position: relative;">
|
||||||
|
<xul:toolbarbutton class="tabs-alltabs-button" type="menu">
|
||||||
|
<xul:menupopup class="tabs-alltabs-popup"
|
||||||
|
anonid="alltabs-popup" position="after_end"/>
|
||||||
|
</xul:toolbarbutton>
|
||||||
|
</xul:hbox>
|
||||||
|
</xul:stack>
|
||||||
<xul:hbox class="tabs-closebutton-box" align="center" pack="end" anonid="tabstrip-closebutton">
|
<xul:hbox class="tabs-closebutton-box" align="center" pack="end" anonid="tabstrip-closebutton">
|
||||||
<xul:toolbarbutton class="close-button tabs-closebutton"/>
|
<xul:toolbarbutton class="close-button tabs-closebutton"/>
|
||||||
</xul:hbox>
|
</xul:hbox>
|
||||||
|
@ -137,8 +137,9 @@ tab {
|
|||||||
* All Tabs Button
|
* All Tabs Button
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.tabs-alltabs-box[flash="true"] {
|
.tabs-alltabs-box {
|
||||||
background-color: orange;
|
background-color: orange;
|
||||||
|
opacity: 0.0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs-alltabs-button {
|
.tabs-alltabs-button {
|
||||||
|
Loading…
Reference in New Issue
Block a user