mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-20 16:55:40 +00:00
Bug 1443561 - Part 0: Workaround bug 1482157, set -moz-appearance:toolbox on #navigator-toolbox::after. r=dao
MozReview-Commit-ID: CuJIYn9ioPO --HG-- extra : rebase_source : 47f0b067884cdc1b18c183f1674c473162f73343
This commit is contained in:
parent
8ca32c5454
commit
ec46af2969
@ -47,9 +47,25 @@
|
||||
}
|
||||
|
||||
#navigator-toolbox {
|
||||
-moz-appearance: none;
|
||||
--tabs-border-color: rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
/*
|
||||
This is a workaround for Bug 1482157
|
||||
-moz-appearance: toolbox; makes the macOS sheets attached to the element's
|
||||
bottom border. We cannot put this property on the toolbox itself as it
|
||||
cancels all backgrounds that are there, so we set it on the toolbox bottom
|
||||
border.
|
||||
*/
|
||||
#navigator-toolbox::after {
|
||||
-moz-appearance: toolbox;
|
||||
height: 1px;
|
||||
/* use inset box-shadow instead of border because -moz-appearance hides the border */
|
||||
border: none;
|
||||
box-shadow: inset 0 -1px var(--toolbox-border-bottom-color);
|
||||
}
|
||||
|
||||
#tabbrowser-tabs {
|
||||
--tab-line-color: #0a84ff;
|
||||
}
|
||||
|
@ -10,7 +10,7 @@ add_task(async function test_sanitization_invalid() {
|
||||
"colors": {
|
||||
"accentcolor": ACCENT_COLOR,
|
||||
"textcolor": TEXT_COLOR,
|
||||
"toolbar_bottom_separator": "ntimsfavoriteblue",
|
||||
"toolbar_text": "ntimsfavoriteblue",
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -22,9 +22,9 @@ add_task(async function test_sanitization_invalid() {
|
||||
await extension.startup();
|
||||
await transitionPromise;
|
||||
|
||||
let toolbox = document.querySelector("#navigator-toolbox");
|
||||
let navbar = document.querySelector("#nav-bar");
|
||||
Assert.equal(
|
||||
window.getComputedStyle(toolbox, "::after").borderBottomColor,
|
||||
window.getComputedStyle(navbar).color,
|
||||
"rgb(0, 0, 0)",
|
||||
"All invalid values should always compute to black."
|
||||
);
|
||||
@ -40,7 +40,7 @@ add_task(async function test_sanitization_css_variables() {
|
||||
"colors": {
|
||||
"accentcolor": ACCENT_COLOR,
|
||||
"textcolor": TEXT_COLOR,
|
||||
"toolbar_bottom_separator": "var(--arrowpanel-dimmed)",
|
||||
"toolbar_text": "var(--arrowpanel-dimmed)",
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -52,9 +52,9 @@ add_task(async function test_sanitization_css_variables() {
|
||||
await extension.startup();
|
||||
await transitionPromise;
|
||||
|
||||
let toolbox = document.querySelector("#navigator-toolbox");
|
||||
let navbar = document.querySelector("#nav-bar");
|
||||
Assert.equal(
|
||||
window.getComputedStyle(toolbox, "::after").borderBottomColor,
|
||||
window.getComputedStyle(navbar).color,
|
||||
"rgb(0, 0, 0)",
|
||||
"All CSS variables should always compute to black."
|
||||
);
|
||||
@ -71,7 +71,6 @@ add_task(async function test_sanitization_transparent() {
|
||||
"accentcolor": ACCENT_COLOR,
|
||||
"textcolor": TEXT_COLOR,
|
||||
"toolbar_top_separator": "transparent",
|
||||
"toolbar_bottom_separator": "transparent",
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -89,13 +88,6 @@ add_task(async function test_sanitization_transparent() {
|
||||
"Top separator should be transparent"
|
||||
);
|
||||
|
||||
let toolbox = document.querySelector("#navigator-toolbox");
|
||||
Assert.equal(
|
||||
window.getComputedStyle(toolbox, "::after").borderBottomColor,
|
||||
"rgba(0, 0, 0, 0)",
|
||||
"Bottom separator should be transparent"
|
||||
);
|
||||
|
||||
await extension.unload();
|
||||
});
|
||||
|
||||
|
@ -56,11 +56,19 @@ add_task(async function test_support_separator_properties() {
|
||||
);
|
||||
|
||||
let toolbox = document.querySelector("#navigator-toolbox");
|
||||
Assert.equal(
|
||||
window.getComputedStyle(toolbox, "::after").borderBottomColor,
|
||||
`rgb(${hexToRGB(SEPARATOR_BOTTOM_COLOR).join(", ")})`,
|
||||
"Bottom separator color properly set"
|
||||
);
|
||||
if (AppConstants.platform == "macosx") {
|
||||
Assert.ok(
|
||||
window.getComputedStyle(toolbox, "::after").boxShadow
|
||||
.includes(`rgb(${hexToRGB(SEPARATOR_BOTTOM_COLOR).join(", ")})`),
|
||||
"Bottom separator color properly set"
|
||||
);
|
||||
} else {
|
||||
Assert.equal(
|
||||
window.getComputedStyle(toolbox, "::after").borderBottomColor,
|
||||
`rgb(${hexToRGB(SEPARATOR_BOTTOM_COLOR).join(", ")})`,
|
||||
"Bottom separator color properly set"
|
||||
);
|
||||
}
|
||||
|
||||
await extension.unload();
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user