Bug 979053 - fade in navbar and placeholder outlines when opening Australis customize mode, r=MattN

This commit is contained in:
Gijs Kruitbosch 2014-03-04 17:10:45 -05:00
parent 28dd7144a4
commit aae6348cc9
2 changed files with 19 additions and 2 deletions

View File

@ -269,6 +269,11 @@ CustomizeMode.prototype = {
panelContents.removeAttribute("customize-transitioning");
CustomizableUI.dispatchToolboxEvent("customizationready", {}, window);
this._enableOutlinesTimeout = window.setTimeout(() => {
this.document.getElementById("nav-bar").setAttribute("showoutline", "true");
this.panelUIContents.setAttribute("showoutline", "true");
delete this._enableOutlinesTimeout;
}, 0);
// It's possible that we didn't enter customize mode via the menu panel,
// meaning we didn't kick off about:customizing preloading. If that's
@ -307,6 +312,13 @@ CustomizeMode.prototype = {
this._handler.isExitingCustomizeMode = true;
if (this._enableOutlinesTimeout) {
this.window.clearTimeout(this._enableOutlinesTimeout);
} else {
this.document.getElementById("nav-bar").removeAttribute("showoutline");
this.panelUIContents.removeAttribute("showoutline");
}
this._removeExtraToolbarsIfEmpty();
CustomizableUI.removeListener(this);

View File

@ -56,11 +56,16 @@
#main-window[customize-entered] .customization-target:not(#PanelUI-contents):hover::before,
#main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(#PanelUI-contents)::before,
/* nav-bar and panel outlines are always shown */
#main-window[customize-entered] #nav-bar-customization-target.customization-target::before {
#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
outline-color: rgb(102,102,102);
}
#main-window[customize-entered] .panel-customization-placeholder {
#nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
transition: outline-color 250ms linear;
}
#PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
transition: outline-color 250ms linear;
outline-color: #bbb;
}