Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-12-11 16:32:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1865745 - Fix feature callout arrow hiding behavior r=aminomancer,omc-reviewers

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D195191
This commit is contained in:
Jason Prickett 2023-12-01 23:26:58 +00:00
parent 7ec579b0d6
commit d8b0a631e0
3 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
browser/components/aboutwelcome/content/aboutwelcome.css
View File

@ -483,11 +483,11 @@ div#feature-callout.hidden {
color: var(--fc-primary-button-color-active);
border: 1px solid var(--fc-primary-button-border-active);
}
panel#feature-callout:is([side=top], [side=bottom]):not(.hidden-arrow) {
panel#feature-callout:is([side=top], [side=bottom]):not([hide-arrow=permanent]) {
margin-inline: var(--panel-margin-offset);
}
panel#feature-callout:is([side=left], [side=right]):not(.hidden-arrow) {
panel#feature-callout:is([side=left], [side=right]):not([hide-arrow=permanent]) {
margin-block: var(--panel-margin-offset);
}
@ -501,7 +501,7 @@ panel#feature-callout::part(content) {
transform: rotate(45deg);
transform-style: preserve-3d;
}
#feature-callout:not([arrow-position]) .arrow-box, #feature-callout.hidden-arrow .arrow-box {
#feature-callout:not([arrow-position]) .arrow-box, #feature-callout[hide-arrow] .arrow-box {
display: none;
}
#feature-callout .arrow {

6
browser/components/newtab/content-src/styles/_feature-callout.scss
View File

@ -441,11 +441,11 @@
}
}
@at-root panel#{&}:is([side='top'], [side='bottom']):not(.hidden-arrow) {
@at-root panel#{&}:is([side='top'], [side='bottom']):not([hide-arrow='permanent']) {
margin-inline: var(--panel-margin-offset);
}
@at-root panel#{&}:is([side='left'], [side='right']):not(.hidden-arrow) {
@at-root panel#{&}:is([side='left'], [side='right']):not([hide-arrow='permanent']) {
margin-block: var(--panel-margin-offset);
}
@ -464,7 +464,7 @@
}
&:not([arrow-position]) .arrow-box,
&.hidden-arrow .arrow-box {
&[hide-arrow] .arrow-box {
display: none;
}

17
browser/modules/FeatureCallout.sys.mjs
View File

@ -699,8 +699,15 @@ export class FeatureCallout {
}
// Hide the arrow if the `flip` behavior has caused the panel to
// offset relative to its anchor, since the arrow would no longer
// point at the true anchor.
this.classList.toggle("hidden-arrow", !!alignmentOffset);
// point at the true anchor. This differs from an arrow that is
// intentionally hidden by the user in message.
if (this.getAttribute("hide-arrow") !== "permanent") {
if (alignmentOffset) {
this.setAttribute("hide-arrow", "temporary");
} else {
this.removeAttribute("hide-arrow");
}
}
let arrowPosition = "top";
switch (positionParts[1]) {
case "start":
@ -782,7 +789,11 @@ export class FeatureCallout {
this._container?.classList.add("hidden");
}
this._container.classList.add("featureCallout", "callout-arrow");
this._container.classList.toggle("hidden-arrow", !!hide_arrow);
if (hide_arrow) {
this._container.setAttribute("hide-arrow", "permanent");
} else {
this._container.removeAttribute("hide-arrow");
}
this._container.id = CONTAINER_ID;
this._container.setAttribute(
"aria-describedby",