wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 861088 - Show the History subview as an arrow panel when the History widget is in the toolbar. r=mconley

Browse Source
This commit is contained in:
Jared Wein 2013-04-30 17:20:00 -04:00
parent 6c9aa98554
commit 5115f7f6a9
3 changed files with 74 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
browser/components/customizableui/content/panelUI.js
View File

@ -176,8 +176,10 @@ const PanelUI = {
* Shows a subview in the panel with a given ID.
*
* @param aViewId the ID of the subview to show.
* @param aAnchor the element that spawned the subview.
* @param aPlacementArea the CustomizableUI area that aAnchor is in.
*/
showSubView: function(aViewId, aAnchor) {
showSubView: function(aViewId, aAnchor, aPlacementArea) {
let viewNode = document.getElementById(aViewId);
if (!viewNode) {
Cu.reportError("Could not show panel subview with id: " + aViewId);
@ -189,39 +191,66 @@ const PanelUI = {
return;
}
let oldHeight = this.mainView.clientHeight;
viewNode.setAttribute("current", true);
this._currentSubView = viewNode;
if (aPlacementArea == CustomizableUI.AREA_PANEL) {
// The subview can get moved if the widget is not in the
// panel. For robustness, check that the subview is in the
// right place and move it if necessary.
if (viewNode.parentElement != this.subViews) {
this.subViews.appendChild(viewNode);
}
// Emit the ViewShowing event so that the widget definition has a chance
// to lazily populate the subview with things.
let evt = document.createEvent("CustomEvent");
evt.initCustomEvent("ViewShowing", true, true, viewNode);
viewNode.dispatchEvent(evt);
let oldHeight = this.mainView.clientHeight;
viewNode.setAttribute("current", true);
this._currentSubView = viewNode;
this.viewStack.setAttribute("view", "subview");
this.mainViewSpring.style.height = this.subViews.scrollHeight - oldHeight + "px";
this.container.style.height = this.subViews.scrollHeight + "px";
// Emit the ViewShowing event so that the widget definition has a chance
// to lazily populate the subview with things.
let evt = document.createEvent("CustomEvent");
evt.initCustomEvent("ViewShowing", true, true, viewNode);
viewNode.dispatchEvent(evt);
// Now we have to transition to transition the panel. There are a few parts
// to this:
//
// 1) The main view content gets shifted so that the center of the anchor
// node is at the left-most edge of the panel.
// 2) The subview deck slides in so that it takes up almost all of the
// panel.
// 3) If the subview is taller then the main panel contents, then the panel
// must grow to meet that new height. Otherwise, it must shrink.
//
// All three of these actions make use of CSS transformations, so they
// should all occur simultaneously.
this._shiftMainView(aAnchor);
this._subViewObserver.observe(viewNode, {
attributes: true,
characterData: true,
childList: true,
subtree: true
});
this.viewStack.setAttribute("view", "subview");
this.mainViewSpring.style.height = this.subViews.scrollHeight - oldHeight + "px";
this.container.style.height = this.subViews.scrollHeight + "px";
// Now we have to transition to transition the panel. There are a few parts
// to this:
//
// 1) The main view content gets shifted so that the center of the anchor
// node is at the left-most edge of the panel.
// 2) The subview deck slides in so that it takes up almost all of the
// panel.
// 3) If the subview is taller then the main panel contents, then the panel
// must grow to meet that new height. Otherwise, it must shrink.
//
// All three of these actions make use of CSS transformations, so they
// should all occur simultaneously.
this._shiftMainView(aAnchor);
this._subViewObserver.observe(viewNode, {
attributes: true,
characterData: true,
childList: true,
subtree: true
});
} else {
// Emit the ViewShowing event so that the widget definition has a chance
// to lazily populate the subview with things.
let evt = document.createEvent("CustomEvent");
evt.initCustomEvent("ViewShowing", true, true, viewNode);
viewNode.dispatchEvent(evt);
let panel = document.createElement("panel");
panel.appendChild(viewNode);
panel.setAttribute("type", "arrow");
panel.setAttribute("id", "customizationui-widget-panel");
document.getElementById(CustomizableUI.AREA_NAVBAR).appendChild(panel);
panel.addEventListener("popuphidden", function() {
this.subViews.appendChild(viewNode);
panel.parentElement.removeChild(panel);
});
panel.openPopup(aAnchor, "bottomcenter topright");
}
},
/**

5
browser/components/customizableui/src/CustomizableUI.jsm
View File

@ -115,7 +115,7 @@ XPCOMUtils.defineLazyGetter(this, "gBuiltInWidgets", function() {
name: "History...",
description: "History repeats itself!",
defaultArea: CustomizableUI.AREA_PANEL,
allowedAreas: [CustomizableUI.AREA_PANEL],
allowedAreas: [CustomizableUI.AREA_PANEL, CustomizableUI.AREA_NAVBAR],
icons: {
"16": "chrome://branding/content/icon16.png",
"32": "chrome://branding/content/icon48.png",
@ -788,7 +788,8 @@ let CustomizableUIInternal = {
}
} else if (aWidget.type == "view") {
let ownerWindow = aNode.ownerDocument.defaultView;
ownerWindow.PanelUI.showSubView(aWidget.viewId, aNode);
ownerWindow.PanelUI.showSubView(aWidget.viewId, aNode,
this.getPlacementOfWidget(aNode.id).area);
}
},

16
browser/themes/shared/customizableui/panelUIOverlay.inc.css
View File

@ -41,7 +41,8 @@
font-size: 10px;
}
#PanelUI-contents {
#PanelUI-contents,
#customizationui-widget-panel {
max-width: @menuPanelWidth@;
padding: 0 1em;
}
@ -99,11 +100,13 @@
-moz-box-orient: horizontal;
}
#PanelUI-contents[type="list"] toolbarbutton .toolbarbutton-text,
#PanelUI-subViews toolbarbutton .toolbarbutton-text {
#PanelUI-contents[type="list"] toolbarbutton > .toolbarbutton-text,
#PanelUI-subViews toolbarbutton > .toolbarbutton-text,
#customizationui-widget-panel toolbarbutton > .toolbarbutton-text {
text-align: start;
-moz-padding-start: 8px;
font-size: 12px;
display: -moz-box;
}
#PanelUI-contents[type="list"] toolbarbutton .toolbarbutton-acceltext {
@ -186,7 +189,8 @@
}
#PanelUI-subViews toolbarbutton,
#PanelUI-mainView toolbarbutton {
#PanelUI-mainView toolbarbutton,
#customizationui-widget-panel toolbarbutton {
-moz-appearance: none;
padding: 2px 6px;
background: hsla(210,32%,93%,0) padding-box;
@ -202,6 +206,7 @@
#PanelUI-subViews toolbarbutton:not([disabled]):not([checked]):not([open]):not(:active):hover,
#PanelUI-mainView toolbarbutton:not([disabled]):not([checked]):not([open]):not(:active):hover,
#customizationui-widget-panel toolbarbutton:not([disabled]):not([checked]):not([open]):not(:active):hover,
#PanelUI-mainView .PanelUI-pageControls toolbarbutton,
#PanelUI-mainView #PanelUI-customize-btn {
background-image: -moz-linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
@ -212,7 +217,8 @@
}
#PanelUI-subViews toolbarbutton:not([disabled]):-moz-any([open],[checked],:hover:active),
#PanelUI-mainView toolbarbutton:not([disabled]):-moz-any([open],[checked],:hover:active) {
#PanelUI-mainView toolbarbutton:not([disabled]):-moz-any([open],[checked],:hover:active),
#customizationui-widget-panel toolbarbutton:not([disabled]):-moz-any([open],[checked],:hover:active) {
background-image: -moz-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);