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 948807 - [Australis] UITour: Fix highlight position and clipping when a dimension is smaller than the minimum. r=Unfocused

Browse Source
This commit is contained in:
Matthew Noorenberghe 2013-12-10 23:35:31 -08:00
parent 4705c7d9c1
commit e93dd15e9e
4 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
browser/base/content/browser.css
View File

@ -975,26 +975,26 @@ toolbarpaletteitem[place="palette"][hidden] {
} }
#UITourHighlightContainer, #UITourHighlightContainer,
html|div#UITourHighlight { #UITourHighlight {
pointer-events: none; pointer-events: none;
} }
html|div#UITourHighlight[active] { #UITourHighlight[active] {
animation-delay: 2s; animation-delay: 2s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-timing-function: linear; animation-timing-function: linear;
} }
html|div#UITourHighlight[active="wobble"] { #UITourHighlight[active="wobble"] {
animation-name: uitour-wobble; animation-name: uitour-wobble;
animation-duration: 1s; animation-duration: 1s;
} }
html|div#UITourHighlight[active="zoom"] { #UITourHighlight[active="zoom"] {
animation-name: uitour-zoom; animation-name: uitour-zoom;
animation-duration: 1s; animation-duration: 1s;
} }
html|div#UITourHighlight[active="color"] { #UITourHighlight[active="color"] {
animation-name: uitour-color; animation-name: uitour-color;
animation-duration: 2s; animation-duration: 2s;
} }

2
browser/base/content/browser.xul
View File

@ -209,7 +209,7 @@
noautofocus="true" noautofocus="true"
noautohide="true" noautohide="true"
consumeoutsideclicks="false"> consumeoutsideclicks="false">
<html:div id="UITourHighlight"></html:div> <box id="UITourHighlight"></box>
</panel> </panel>
<panel id="socialActivatedNotification" <panel id="socialActivatedNotification"

15
browser/modules/UITour.jsm
View File

@ -460,9 +460,18 @@ this.UITour = {
if (highlighter.parentElement.state == "open") { if (highlighter.parentElement.state == "open") {
highlighter.parentElement.hidePopup(); highlighter.parentElement.hidePopup();
} }
/* -4 offsets come from the padding in CSS for UITourHighlightContainer /* The "overlap" position anchors from the top-left but we want to centre highlights at their
for the wobble animation */ minimum size. */
highlighter.parentElement.openPopup(aTargetEl, "overlap", -4, -4); let highlightWindow = aTargetEl.ownerDocument.defaultView;
let containerStyle = highlightWindow.getComputedStyle(highlighter.parentElement);
let paddingTopPx = 0 - parseFloat(containerStyle.paddingTop);
let paddingLeftPx = 0 - parseFloat(containerStyle.paddingLeft);
let highlightStyle = highlightWindow.getComputedStyle(highlighter);
let offsetX = paddingTopPx
- (Math.max(0, parseFloat(highlightStyle.minWidth) - targetRect.width) / 2);
let offsetY = paddingLeftPx
- (Math.max(0, parseFloat(highlightStyle.minHeight) - targetRect.height) / 2);
highlighter.parentElement.openPopup(aTargetEl, "overlap", offsetX, offsetY);
} }
this._setAppMenuStateForAnnotation(aTarget.node.ownerDocument.defaultView, "highlight", this._setAppMenuStateForAnnotation(aTarget.node.ownerDocument.defaultView, "highlight",

2
browser/themes/shared/UITour.inc.css
View File

@ -13,7 +13,7 @@
padding: 4px; padding: 4px;
} }
html|div#UITourHighlight { #UITourHighlight {
background-image: radial-gradient(50% 100%, rgba(0,149,220,0.4) 50%, rgba(0,149,220,0.6) 100%); background-image: radial-gradient(50% 100%, rgba(0,149,220,0.4) 50%, rgba(0,149,220,0.6) 100%);
border-radius: 40px; border-radius: 40px;
border: 1px solid white; border: 1px solid white;