corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Back out bug 1950189 because I pushed it accidentally.

Browse Source 
MANUAL PUSH: Back out CLOSED TREE
This commit is contained in:
Emilio Cobos Álvarez
2025-02-27 01:15:58 +01:00
parent 6a37c946d1
commit 1ed7833723
4 changed files with 16 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
browser/components/asrouter/content-src/styles/_feature-callout.scss
View File

@@ -301,9 +301,9 @@
position: relative;
overflow: hidden;
border: 1px solid var(--fc-border);
box-shadow: 0 2px 5px rgba(0, 0, 0, 15%);
box-shadow: 0 2px 6px rgba(0, 0, 0, 15%);
border-radius: 4px;
padding: var(--callout-padding, 16px);
padding: var(--callout-padding, 24px);
width: 25em;
gap: 16px;
background: var(--fc-background);
@@ -321,10 +321,10 @@
.steps {
height: auto;
position: absolute;
// 16px is the callout's default bottom padding. The CTAs are 32px
// tall, and the steps are 8px tall. So we need to offset the steps
// by half the difference in order to center them. 32/2 - 8/2 = 12.
bottom: calc(var(--callout-padding, 16px) + 12px);
// 24px is the callout's bottom padding. The CTAs are 32px tall, and
// the steps are 8px tall. So we need to offset the steps by half
// the difference in order to center them. 32/2 - 8/2 = 12.
bottom: calc(var(--callout-padding, 24px) + 12px);
padding-block: 0;
.indicator {
@@ -673,7 +673,7 @@
.shadow-arrow {
background: transparent;
outline: 1px solid var(--fc-border);
box-shadow: 0 2px 5px rgba(0, 0, 0, 15%);
box-shadow: 0 2px 6px rgba(0, 0, 0, 15%);
}
// the 'filled' arrow box

8
browser/components/asrouter/docs/feature-callout.md
View File

@@ -216,16 +216,10 @@ interface FeatureCallout {
// By default, callouts don't hide if the user clicks outside of them.
// Set this to true to make the callout hide on outside clicks.
autohide?: boolean;
// By default, hitting Escape will dismiss the callout, whether it is
// focused or not. Setting this to true will stop keypresses from
// dispatching up to the callout from outside it, though they will
// still work when the callout is focused. Best to leave this as-is.
ignorekeys?: boolean;
// Callout card width as a CSS value, e.g. "400px" or "min-content".
// Defaults to "400px".
width?: string;
// Callout card padding as a CSS value, e.g. "12px 16px" or "1em".
// Defaults to "16px".
// Callout card padding in pixels. Defaults to 24.
padding?: number;
// Callouts normally have a vertical layout, with rows of content. If
// you want a single row with a more inline layout, you can use this

24
browser/components/asrouter/modules/FeatureCallout.sys.mjs
View File

@@ -783,7 +783,7 @@ export class FeatureCallout {
return false;
}
const { autohide, ignorekeys, padding } = this.currentScreen.content;
const { autohide, padding } = this.currentScreen.content;
const { panel_position, hide_arrow, no_open_on_anchor, arrow_width } =
anchor;
const needsPanel =
@@ -800,15 +800,13 @@ export class FeatureCallout {
let fragment = this.win.MozXULElement.parseXULToFragment(`<panel
class="panel-no-padding"
orient="vertical"
ignorekeys="true"
noautofocus="true"
flip="slide"
type="arrow"
consumeoutsideclicks="never"
norolluponanchor="true"
position="${panel_position.panel_position_string}"
${hide_arrow ? "" : 'show-arrow=""'}
${autohide ? "" : 'noautohide="true"'}
${ignorekeys ? 'ignorekeys="true"' : ""}
${no_open_on_anchor ? 'no-open-on-anchor=""' : ""}
/>`);
this._container = fragment.firstElementChild;
@@ -817,7 +815,7 @@ export class FeatureCallout {
this._container = this.doc.createElement("div");
this._container?.classList.add("hidden");
}
this._container.classList.add("featureCallout");
this._container.classList.add("featureCallout", "callout-arrow");
if (hide_arrow) {
this._container.setAttribute("hide-arrow", "permanent");
} else {
@@ -834,21 +832,7 @@ export class FeatureCallout {
this._container.style.removeProperty("--arrow-width");
}
if (padding) {
// This property used to accept a number value, either a number or a
// string that is a number. It now accepts a standard CSS padding value
// (e.g. "10px 12px" or "1em"), but we need to maintain backwards
// compatibility with the old number value until there are no more uses
// of it across experiments.
if (CSS.supports("padding", padding)) {
this._container.style.setProperty("--callout-padding", padding);
} else {
let cssValue = `${padding}px`;
if (CSS.supports("padding", cssValue)) {
this._container.style.setProperty("--callout-padding", cssValue);
} else {
this._container.style.removeProperty("--callout-padding");
}
}
this._container.style.setProperty("--callout-padding", `${padding}px`);
} else {
this._container.style.removeProperty("--callout-padding");
}