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 1170759 - Prevent the mainView of a <panelmultiview> being shifted too far when showing a subView r=Gijs

Browse Source
This commit is contained in:
Tim Taubert 2015-06-11 14:21:54 +02:00
parent 3f85056bf8
commit 3b272ab41a
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
browser/components/customizableui/content/panelUI.xml
View File

@ -240,15 +240,24 @@
let mainViewRect = this._mainViewContainer.getBoundingClientRect();
let center = aAnchor.clientWidth / 2;
let direction = aAnchor.ownerDocument.defaultView.getComputedStyle(aAnchor, null).direction;
let edge, target;
let edge;
if (direction == "ltr") {
edge = anchorRect.left - mainViewRect.left;
target = "-" + (edge + center);
} else {
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);
} else {
this._mainViewContainer.style.transform = "";

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

@ -12,7 +12,6 @@
% 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
%define menuPanelButtonWidth (@menuPanelWidth@ / 3 - 0.1px)
%define exitSubviewGutterWidth 38px
%define buttonStateHover :not(:-moz-any([disabled],[open],:active)):hover
%define menuStateHover :not(:-moz-any([disabled],:active))[_moz-menuactive]
%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-position: 0px 0px, 1px 0px, 2px 0px;
--panel-ui-button-background-repeat: no-repeat;
--panel-ui-exit-subview-gutter-width: 38px;
}
#PanelUI-popup #PanelUI-contents:empty {
@ -119,7 +119,7 @@
border-left: 1px solid hsla(210,4%,10%,.3);
box-shadow: 0 3px 5px 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 {
@ -973,7 +973,7 @@ toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button
position: absolute;
top: 0;
height: 100%;
width: @exitSubviewGutterWidth@;
width: var(--panel-ui-exit-subview-gutter-width);
background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png),
linear-gradient(rgba(255,255,255,0.3), transparent);
background-repeat: no-repeat;
@ -990,14 +990,14 @@ toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button
toolbarbutton[panel-multiview-anchor="true"] {
background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png),
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;
}
toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png),
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,