Bug 1424264 - Part 3 - Use the minimum height from the older transitioning view. r=Gijs
MozReview-Commit-ID: 28XQlUoLLCr
--- a/browser/components/customizableui/PanelMultiView.jsm
+++ b/browser/components/customizableui/PanelMultiView.jsm
@@ -196,17 +196,16 @@ this.PanelMultiView = class extends this
return this._currentShowPromise || Promise.resolve();
}
connect() {
this.knownViews = new Set(Array.from(
this.node.getElementsByTagName("panelview"),
node => PanelView.forNode(node)));
this.openViews = [];
- this._mainViewHeight = 0;
this.__transitioning = false;
this.showingSubView = false;
const {document, window} = this;
this._viewContainer =
document.getAnonymousElementByAttribute(this.node, "anonid", "viewContainer");
this._viewStack =
@@ -359,20 +358,16 @@ this.PanelMultiView = class extends this
let previousViewNode = aPreviousView || this._currentSubView;
// If the panelview to show is the same as the previous one, the 'ViewShowing'
// event has already been dispatched. Don't do it twice.
let showingSameView = viewNode == previousViewNode;
let prevPanelView = PanelView.forNode(previousViewNode);
prevPanelView.captureKnownSize();
- if (!this._mainViewHeight) {
- this._mainViewHeight = prevPanelView.knownHeight;
- this._viewContainer.style.minHeight = this._mainViewHeight + "px";
- }
this._viewShowing = viewNode;
let reverse = !!aPreviousView;
if (!reverse) {
// We are opening a new view, either because we are navigating forward
// or because we are showing the main view. Some properties of the view
// may vary between panels, so we make sure to update them every time.
@@ -470,17 +465,19 @@ this.PanelMultiView = class extends this
anchor.setAttribute("open", "true");
// Since we're going to show two subview at the same time, don't abuse the
// 'current' attribute, since it's needed for other state-keeping, but use
// a separate 'in-transition' attribute instead.
previousViewNode.setAttribute("in-transition", true);
// Set the viewContainer dimensions to make sure only the current view is
// visible.
- this._viewContainer.style.height = Math.max(prevPanelView.knownHeight, this._mainViewHeight) + "px";
+ let olderView = reverse ? nextPanelView : prevPanelView;
+ this._viewContainer.style.minHeight = olderView.knownHeight + "px";
+ this._viewContainer.style.height = prevPanelView.knownHeight + "px";
this._viewContainer.style.width = prevPanelView.knownWidth + "px";
// Lock the dimensions of the window that hosts the popup panel.
let rect = this._panel.popupBoxObject.getOuterScreenRect();
this._panel.setAttribute("width", rect.width);
this._panel.setAttribute("height", rect.height);
let viewRect;
if (reverse) {
@@ -497,18 +494,17 @@ this.PanelMultiView = class extends this
viewRect = Object.assign({height, width}, viewNode.customRectGetter());
let header = viewNode.firstChild;
if (header && header.classList.contains("panel-header")) {
viewRect.height += this._dwu.getBoundsWithoutFlushing(header).height;
}
viewNode.setAttribute("in-transition", true);
} else {
let oldSibling = viewNode.nextSibling || null;
- this._offscreenViewStack.style.minHeight =
- this._viewContainer.style.height;
+ this._offscreenViewStack.style.minHeight = olderView.knownHeight + "px";
this._offscreenViewStack.appendChild(viewNode);
viewNode.setAttribute("in-transition", true);
// Now that the subview is visible, we can check the height of the
// description elements it contains.
nextPanelView.descriptionHeightWorkaround();
viewRect = await BrowserUtils.promiseLayoutFlushed(this.document, "layout", () => {
@@ -545,17 +541,17 @@ this.PanelMultiView = class extends this
this._viewStack.style.transition = "transform var(--animation-easing-function)" +
" var(--panelui-subview-transition-duration)";
this._viewStack.style.willChange = "transform";
// Use an outline instead of a border so that the size is not affected.
deepestNode.style.outline = "1px solid var(--panel-separator-color)";
// Now set the viewContainer dimensions to that of the new view, which
// kicks of the height animation.
- this._viewContainer.style.height = Math.max(viewRect.height, this._mainViewHeight) + "px";
+ this._viewContainer.style.height = viewRect.height + "px";
this._viewContainer.style.width = viewRect.width + "px";
this._panel.removeAttribute("width");
this._panel.removeAttribute("height");
// We're setting the width property to prevent flickering during the
// sliding animation with smaller views.
viewNode.style.width = viewRect.width + "px";
await BrowserUtils.promiseLayoutFlushed(document, "layout", () => {});
@@ -755,21 +751,20 @@ this.PanelMultiView = class extends this
this.showMainView();
this.window.removeEventListener("keydown", this);
this._panel.removeEventListener("mousemove", this);
this.openViews.forEach(panelView => panelView.clearNavigation());
this.openViews = [];
// Clear the main view size caches. The dimensions could be different
// when the popup is opened again, e.g. through touch mode sizing.
- this._mainViewHeight = 0;
this._viewContainer.style.removeProperty("min-height");
this._viewStack.style.removeProperty("max-height");
- this._viewContainer.style.removeProperty("min-width");
- this._viewContainer.style.removeProperty("max-width");
+ this._viewContainer.style.removeProperty("width");
+ this._viewContainer.style.removeProperty("height");
this.dispatchCustomEvent("PanelMultiViewHidden");
break;
}
}
}
};
@@ -867,16 +862,19 @@ this.PanelView = class extends this.Asso
dispatchCustomEvent(...args) {
CustomizableUI.ensureSubviewListeners(this.node);
return super.dispatchCustomEvent(...args);
}
/**
* Populates the "knownWidth" and "knownHeight" properties with the current
* dimensions of the view. These may be zero if the view is invisible.
+ *
+ * These values are relevant during transitions and are retained for backwards
+ * navigation if the view is still open but is invisible.
*/
captureKnownSize() {
let rect = this._dwu.getBoundsWithoutFlushing(this.node);
this.knownWidth = rect.width;
this.knownHeight = rect.height;
}
/**