mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 1170759 - Prevent the mainView of a <panelmultiview> being shifted too far when showing a subView r=Gijs
This commit is contained in:
parent
3f85056bf8
commit
3b272ab41a
@ -240,15 +240,24 @@
|
|||||||
let mainViewRect = this._mainViewContainer.getBoundingClientRect();
|
let mainViewRect = this._mainViewContainer.getBoundingClientRect();
|
||||||
let center = aAnchor.clientWidth / 2;
|
let center = aAnchor.clientWidth / 2;
|
||||||
let direction = aAnchor.ownerDocument.defaultView.getComputedStyle(aAnchor, null).direction;
|
let direction = aAnchor.ownerDocument.defaultView.getComputedStyle(aAnchor, null).direction;
|
||||||
let edge, target;
|
let edge;
|
||||||
if (direction == "ltr") {
|
if (direction == "ltr") {
|
||||||
edge = anchorRect.left - mainViewRect.left;
|
edge = anchorRect.left - mainViewRect.left;
|
||||||
target = "-" + (edge + center);
|
|
||||||
} else {
|
} else {
|
||||||
edge = mainViewRect.right - anchorRect.right;
|
edge = mainViewRect.right - anchorRect.right;
|
||||||
target = edge + center;
|
|
||||||
}
|
}
|
||||||
this._mainViewContainer.style.transform = "translateX(" + target + "px)";
|
|
||||||
|
// If the anchor is an element on the far end of the mainView we
|
||||||
|
// don't want to shift the mainView too far, we would reveal empty
|
||||||
|
// space otherwise.
|
||||||
|
let cstyle = window.getComputedStyle(document.documentElement, null);
|
||||||
|
let exitSubViewGutterWidth =
|
||||||
|
cstyle.getPropertyValue("--panel-ui-exit-subview-gutter-width");
|
||||||
|
let maxShift = mainViewRect.width - parseInt(exitSubViewGutterWidth);
|
||||||
|
let target = Math.min(maxShift, edge + center);
|
||||||
|
|
||||||
|
let neg = direction == "ltr" ? "-" : "";
|
||||||
|
this._mainViewContainer.style.transform = `translateX(${neg}${target}px)`;
|
||||||
aAnchor.setAttribute("panel-multiview-anchor", true);
|
aAnchor.setAttribute("panel-multiview-anchor", true);
|
||||||
} else {
|
} else {
|
||||||
this._mainViewContainer.style.transform = "";
|
this._mainViewContainer.style.transform = "";
|
||||||
|
@ -12,7 +12,6 @@
|
|||||||
% There's no calc() here (and therefore lots of calc() where this is used) because
|
% There's no calc() here (and therefore lots of calc() where this is used) because
|
||||||
% we don't support nested calc(): https://bugzilla.mozilla.org/show_bug.cgi?id=968761
|
% we don't support nested calc(): https://bugzilla.mozilla.org/show_bug.cgi?id=968761
|
||||||
%define menuPanelButtonWidth (@menuPanelWidth@ / 3 - 0.1px)
|
%define menuPanelButtonWidth (@menuPanelWidth@ / 3 - 0.1px)
|
||||||
%define exitSubviewGutterWidth 38px
|
|
||||||
%define buttonStateHover :not(:-moz-any([disabled],[open],:active)):hover
|
%define buttonStateHover :not(:-moz-any([disabled],[open],:active)):hover
|
||||||
%define menuStateHover :not(:-moz-any([disabled],:active))[_moz-menuactive]
|
%define menuStateHover :not(:-moz-any([disabled],:active))[_moz-menuactive]
|
||||||
%define buttonStateActive :not([disabled]):-moz-any([open],:hover:active)
|
%define buttonStateActive :not([disabled]):-moz-any([open],:hover:active)
|
||||||
@ -28,6 +27,7 @@
|
|||||||
--panel-ui-button-background-size: 1px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 1px) !important;
|
--panel-ui-button-background-size: 1px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 1px) !important;
|
||||||
--panel-ui-button-background-position: 0px 0px, 1px 0px, 2px 0px;
|
--panel-ui-button-background-position: 0px 0px, 1px 0px, 2px 0px;
|
||||||
--panel-ui-button-background-repeat: no-repeat;
|
--panel-ui-button-background-repeat: no-repeat;
|
||||||
|
--panel-ui-exit-subview-gutter-width: 38px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#PanelUI-popup #PanelUI-contents:empty {
|
#PanelUI-popup #PanelUI-contents:empty {
|
||||||
@ -119,7 +119,7 @@
|
|||||||
border-left: 1px solid hsla(210,4%,10%,.3);
|
border-left: 1px solid hsla(210,4%,10%,.3);
|
||||||
box-shadow: 0 3px 5px hsla(210,4%,10%,.1),
|
box-shadow: 0 3px 5px hsla(210,4%,10%,.1),
|
||||||
0 0 7px hsla(210,4%,10%,.1);
|
0 0 7px hsla(210,4%,10%,.1);
|
||||||
-moz-margin-start: @exitSubviewGutterWidth@;
|
-moz-margin-start: var(--panel-ui-exit-subview-gutter-width);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-viewstack[viewtype="main"] > .panel-subviews {
|
.panel-viewstack[viewtype="main"] > .panel-subviews {
|
||||||
@ -973,7 +973,7 @@ toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: @exitSubviewGutterWidth@;
|
width: var(--panel-ui-exit-subview-gutter-width);
|
||||||
background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png),
|
background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png),
|
||||||
linear-gradient(rgba(255,255,255,0.3), transparent);
|
linear-gradient(rgba(255,255,255,0.3), transparent);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@ -990,14 +990,14 @@ toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button
|
|||||||
toolbarbutton[panel-multiview-anchor="true"] {
|
toolbarbutton[panel-multiview-anchor="true"] {
|
||||||
background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png),
|
background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png),
|
||||||
linear-gradient(rgba(255,255,255,0.3), transparent);
|
linear-gradient(rgba(255,255,255,0.3), transparent);
|
||||||
background-position: right calc(@menuPanelButtonWidth@ / 2 - @exitSubviewGutterWidth@ + 2px) center;
|
background-position: right calc(@menuPanelButtonWidth@ / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
|
||||||
background-repeat: no-repeat, repeat;
|
background-repeat: no-repeat, repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
|
toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
|
||||||
background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png),
|
background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png),
|
||||||
linear-gradient(rgba(255,255,255,0.3), transparent);
|
linear-gradient(rgba(255,255,255,0.3), transparent);
|
||||||
background-position: left calc(@menuPanelButtonWidth@ / 2 - @exitSubviewGutterWidth@ + 2px) center;
|
background-position: left calc(@menuPanelButtonWidth@ / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
|
||||||
}
|
}
|
||||||
|
|
||||||
toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
|
toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
|
||||||
|
Loading…
Reference in New Issue
Block a user