Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-28 23:31:56 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1734835 - Remove the arrow and arrowbox elements from "arrow" panels. r=Gijs

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D131616
This commit is contained in:
Dão Gottwald 2021-11-19 19:58:50 +00:00
parent 5dbdec13b6
commit 6b1d9f7cac
19 changed files with 84 additions and 501 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -153,10 +153,6 @@ panelview[mainview] > .panel-header {
transition: height var(--panelui-subview-transition-duration);
}
:is(panel, menupopup)::part(arrow) {
display: none;
}
@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
#tabbrowser-tabs {
/* Without this, the tabs container width extends beyond the window width */

6
browser/base/content/browser.js
View File

@ -9885,7 +9885,6 @@ var ConfirmationHint = {
* @param options (object, optional)
* An object with the following optional properties:
* - event (DOM event): The event that triggered the feedback.
* - hideArrow (boolean): Optionally hide the arrow.
* - showDescription (boolean): show description text (confirmationHint.<messageId>.description)
*
*/
@ -9907,10 +9906,6 @@ var ConfirmationHint = {
this._panel.classList.remove("with-description");
}
if (options.hideArrow) {
this._panel.setAttribute("hidearrow", "true");
}
this._panel.setAttribute("data-message-id", messageId);
// The timeout value used here allows the panel to stay open for
@ -9949,7 +9944,6 @@ var ConfirmationHint = {
this._timerID = null;
}
if (this.__panel) {
this._panel.removeAttribute("hidearrow");
this._animationBox.removeAttribute("animate");
this._panel.removeAttribute("data-message-id");
}

46
browser/components/extensions/test/browser/browser_ext_popup_background.js
View File

@ -5,51 +5,16 @@
async function testPanel(browser, standAlone, initial_background) {
let panel = getPanelForNode(browser);
let arrowContent = panel.panelContent;
let arrow = panel.shadowRoot.querySelector(".panel-arrow");
let checkArrow = (background = null) => {
let checkBackground = (background = null) => {
if (background == null || !standAlone) {
if (standAlone) {
is(
getComputedStyle(arrow).fill,
"rgb(255, 255, 255)",
"Arrow fill should be set to #fff when no background is supplied and popup is standAlone"
);
} else {
let default_background = getComputedStyle(
document.documentElement
).getPropertyValue("--arrowpanel-background");
// Need to apply the color to a node and get the computed value
// to resolve CSS named colors such as -moz-field.
let span = document.createElementNS(
"http://www.w3.org/1999/xhtml",
"span"
);
span.style.color = default_background;
span.style.display = "none";
document.documentElement.appendChild(span);
let default_background_computed = getComputedStyle(span).color;
span.remove();
is(
getComputedStyle(arrow).fill,
default_background_computed,
"Arrow fill should be the default one"
);
}
return;
}
is(
getComputedStyle(arrowContent).backgroundColor,
getComputedStyle(panel.panelContent).backgroundColor,
background,
"Arrow content should have correct background"
);
is(
getComputedStyle(arrow).fill,
background,
"Arrow should have correct background"
"Content should have correct background"
);
};
@ -66,15 +31,14 @@ async function testPanel(browser, standAlone, initial_background) {
await new Promise(resolve => setTimeout(resolve, 100));
info("Test that initial background color is applied");
checkArrow(initial_background);
checkBackground(initial_background);
info("Test that dynamically-changed background color is applied");
await alterContent(browser, setBackground, "black");
checkArrow(await getBackground(browser));
checkBackground(await getBackground(browser));
info("Test that non-opaque background color results in default styling");
await alterContent(browser, setBackground, "rgba(1, 2, 3, .9)");
checkArrow(null);
}
add_task(async function testPopupBackground() {

80
browser/components/places/content/places-menupopup.js
View File

@ -41,7 +41,7 @@
<arrowscrollbox class="menupopup-arrowscrollbox" flex="1" orient="vertical"
exportparts="scrollbox: arrowscrollbox-scrollbox"
smoothscroll="false" part="arrowscrollbox content">
<html:slot></html:slot>
<html:slot/>
</arrowscrollbox>
</hbox>
`;
@ -583,33 +583,6 @@
}
}
static get inheritedAttributes() {
return {
".panel-arrowcontent": "align,dir,orient,pack",
};
}
get markup() {
return `
<html:link rel="stylesheet" href="chrome://global/skin/global.css"/>
<vbox class="panel-arrowcontainer" flex="1">
<box class="panel-arrowbox" part="arrowbox">
<image class="panel-arrow" part="arrow"/>
</box>
<box class="panel-arrowcontent" part="arrowcontent" flex="1">
<vbox part="drop-indicator-bar" hidden="true">
<image part="drop-indicator"/>
</vbox>
<arrowscrollbox class="menupopup-arrowscrollbox" flex="1"
orient="vertical" smoothscroll="false"
part="arrowscrollbox content">
<html:slot/>
</arrowscrollbox>
</box>
</vbox>
`;
}
connectedCallback() {
if (this.delayConnectedCallback()) {
return;
@ -623,76 +596,31 @@
this.setAttribute("position", "bottomcenter topright");
}
get container() {
return this.shadowRoot.querySelector(".panel-arrowcontainer");
}
get arrowbox() {
return this.shadowRoot.querySelector(".panel-arrowbox");
}
get arrow() {
return this.shadowRoot.querySelector(".panel-arrow");
}
adjustArrowPosition(event) {
let arrow = this.arrow;
let anchor = this.anchorNode;
if (!anchor) {
arrow.hidden = true;
_setSideAttribute(event) {
if (!this.anchorNode) {
return;
}
let container = this.container;
let arrowbox = this.arrowbox;
var position = event.alignmentPosition;
var offset = event.alignmentOffset;
// if this panel has a "sliding" arrow, we may have previously set margins...
arrowbox.style.removeProperty("transform");
if (position.indexOf("start_") == 0 || position.indexOf("end_") == 0) {
container.setAttribute("orient", "horizontal");
arrowbox.setAttribute("orient", "vertical");
if (position.indexOf("_after") > 0) {
arrowbox.setAttribute("pack", "end");
} else {
arrowbox.setAttribute("pack", "start");
}
arrowbox.style.transform = "translate(0, " + -offset + "px)";
// The assigned side stays the same regardless of direction.
let isRTL = this.matches(":-moz-locale-dir(rtl)");
if (position.indexOf("start_") == 0) {
container.style.MozBoxDirection = "reverse";
this.setAttribute("side", isRTL ? "left" : "right");
} else {
container.style.removeProperty("-moz-box-direction");
this.setAttribute("side", isRTL ? "right" : "left");
}
} else if (
position.indexOf("before_") == 0 ||
position.indexOf("after_") == 0
) {
container.removeAttribute("orient");
arrowbox.removeAttribute("orient");
if (position.indexOf("_end") > 0) {
arrowbox.setAttribute("pack", "end");
} else {
arrowbox.setAttribute("pack", "start");
}
arrowbox.style.transform = "translate(" + -offset + "px, 0)";
if (position.indexOf("before_") == 0) {
container.style.MozBoxDirection = "reverse";
this.setAttribute("side", "bottom");
} else {
container.style.removeProperty("-moz-box-direction");
this.setAttribute("side", "top");
}
}
arrow.hidden = false;
}
on_popupshowing(event) {
@ -704,7 +632,7 @@
on_popuppositioned(event) {
if (event.target == this) {
this.adjustArrowPosition(event);
this._setSideAttribute(event);
}
}

10
browser/themes/osx/customizableui/panelUI.css
View File

@ -4,16 +4,6 @@
%include ../../shared/customizableui/panelUI.inc.css
panel[type="arrow"][side="top"],
panel[type="arrow"][side="bottom"] {
margin-inline: -16px;
}
panel[type="arrow"][side="left"],
panel[type="arrow"][side="right"] {
margin-block: -16px;
}
#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="top"],
#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="bottom"] {
margin-inline: -8px;

10
browser/themes/shared/controlcenter/panel.inc.css
View File

@ -199,16 +199,6 @@
padding: 4px 8px;
}
#protections-popup::part(arrow) {
transition-property: fill;
transition-timing-function: var(--animation-easing-function);
transition-duration: var(--panelui-subview-transition-duration);
}
#protections-popup[mainviewshowing][side=top]::part(arrow) {
fill: #0A51BF;
}
#protections-popup-mainView-panel-header-section {
overflow: hidden;
}

9
browser/themes/shared/customizableui/panelUI.inc.css
View File

@ -280,12 +280,6 @@ panelview .toolbaritem-combined-buttons,
-moz-box-align: center;
}
#confirmation-hint[hidearrow]::part(arrowbox) {
/* Don't display the arrow but keep the popup at the same vertical
offset as other arrow panels. */
visibility: hidden;
}
#confirmation-hint-checkmark-animation-container {
position: relative;
overflow: hidden;
@ -380,8 +374,7 @@ panelview[id^=PanelUI-webext-] {
overflow: hidden;
}
.cui-widget-panel,
.cui-widget-panel::part(arrowcontent) {
.cui-widget-panel {
--arrowpanel-padding: var(--panel-subview-body-padding);
}

4
toolkit/components/passwordmgr/LoginManagerPrompter.jsm
View File

@ -607,9 +607,7 @@ class LoginManagerPrompter {
// visible icon as the anchor.
const anchor = browser.ownerDocument.getElementById("identity-icon");
log.debug("Showing the ConfirmationHint");
anchor.ownerGlobal.ConfirmationHint.show(anchor, "loginRemoved", {
hideArrow: true,
});
anchor.ownerGlobal.ConfirmationHint.show(anchor, "loginRemoved");
},
});
}

78
toolkit/content/tests/chrome/test_arrowpanel.xhtml
View File

@ -56,7 +56,7 @@ SimpleTest.waitForExplicitFinish();
const isOSXYosemite = navigator.userAgent.includes("Mac OS X 10.10");
var expectedAnchor = null;
var expectedSide = "", expectedAnchorEdge = "", expectedPack = "";
var expectedSide = "", expectedAnchorEdge = "";
var zoomFactor = 1;
var animatedPopupShown = false;
var animatedPopupHidden = false;
@ -72,102 +72,101 @@ function* nextTest()
{
var panel = $("panel");
function openPopup(position, anchor, expected, anchorEdge, pack, alignment)
function openPopup(position, anchor, expected, anchorEdge, alignment)
{
expectedAnchor = anchor instanceof Node ? anchor : $(anchor);
expectedSide = expected;
expectedAnchorEdge = anchorEdge;
expectedPack = pack;
panel.removeAttribute("side");
panel.openPopup(expectedAnchor, position, 0, 0, false, false, null);
}
for (var iter = 0; iter < 2; iter++) {
openPopup("after_start", "topleft", "top", "left", "start");
openPopup("after_start", "topleft", "top", "left");
yield;
openPopup("after_start", "bottomleft", "bottom", "left", "start", "before_start");
openPopup("after_start", "bottomleft", "bottom", "left", "before_start");
yield;
openPopup("before_start", "topleft", "top", "left", "start", "after_start");
openPopup("before_start", "topleft", "top", "left", "after_start");
yield;
openPopup("before_start", "bottomleft", "bottom", "left", "start");
openPopup("before_start", "bottomleft", "bottom", "left");
yield;
openPopup("after_start", "middle", "top", "left", "start");
openPopup("after_start", "middle", "top", "left");
yield;
openPopup("before_start", "middle", "bottom", "left", "start");
openPopup("before_start", "middle", "bottom", "left");
yield;
openPopup("after_start", "topright", "top", "right", "end", "after_end");
openPopup("after_start", "topright", "top", "right", "after_end");
yield;
openPopup("after_start", "bottomright", "bottom", "right", "end", "before_end");
openPopup("after_start", "bottomright", "bottom", "right", "before_end");
yield;
openPopup("before_start", "topright", "top", "right", "end", "after_end");
openPopup("before_start", "topright", "top", "right", "after_end");
yield;
openPopup("before_start", "bottomright", "bottom", "right", "end", "before_end");
openPopup("before_start", "bottomright", "bottom", "right", "before_end");
yield;
openPopup("after_end", "middle", "top", "right", "end");
openPopup("after_end", "middle", "top", "right");
yield;
openPopup("before_end", "middle", "bottom", "right", "end");
openPopup("before_end", "middle", "bottom", "right");
yield;
openPopup("start_before", "topleft", "left", "top", "start", "end_before");
openPopup("start_before", "topleft", "left", "top", "end_before");
yield;
openPopup("start_before", "topright", "right", "top", "start");
openPopup("start_before", "topright", "right", "top");
yield;
openPopup("end_before", "topleft", "left", "top", "start");
openPopup("end_before", "topleft", "left", "top");
yield;
openPopup("end_before", "topright", "right", "top", "start", "start_before");
openPopup("end_before", "topright", "right", "top", "start_before");
yield;
openPopup("start_before", "middle", "right", "top", "start");
openPopup("start_before", "middle", "right", "top");
yield;
openPopup("end_before", "middle", "left", "top", "start");
openPopup("end_before", "middle", "left", "top");
yield;
openPopup("start_before", "bottomleft", "left", "bottom", "end", "end_after");
openPopup("start_before", "bottomleft", "left", "bottom", "end_after");
yield;
openPopup("start_before", "bottomright", "right", "bottom", "end", "start_after");
openPopup("start_before", "bottomright", "right", "bottom", "start_after");
yield;
openPopup("end_before", "bottomleft", "left", "bottom", "end", "end_after");
openPopup("end_before", "bottomleft", "left", "bottom", "end_after");
yield;
openPopup("end_before", "bottomright", "right", "bottom", "end", "start_after");
openPopup("end_before", "bottomright", "right", "bottom", "start_after");
yield;
openPopup("start_after", "middle", "right", "bottom", "end");
openPopup("start_after", "middle", "right", "bottom");
yield;
openPopup("end_after", "middle", "left", "bottom", "end");
openPopup("end_after", "middle", "left", "bottom");
yield;
openPopup("topcenter bottomleft", "bottomleft", "bottom", "center left", "start", "before_start");
openPopup("topcenter bottomleft", "bottomleft", "bottom", "center left", "before_start");
yield;
openPopup("bottomcenter topleft", "topleft", "top", "center left", "start", "after_start");
openPopup("bottomcenter topleft", "topleft", "top", "center left", "after_start");
yield;
openPopup("topcenter bottomright", "bottomright", "bottom", "center right", "end", "before_end");
openPopup("topcenter bottomright", "bottomright", "bottom", "center right", "before_end");
yield;
openPopup("bottomcenter topright", "topright", "top", "center right", "end", "after_end");
openPopup("bottomcenter topright", "topright", "top", "center right", "after_end");
yield;
openPopup("topcenter bottomleft", "middle", "bottom", "center left", "start", "before_start");
openPopup("topcenter bottomleft", "middle", "bottom", "center left", "before_start");
yield;
openPopup("bottomcenter topleft", "middle", "top", "center left", "start", "after_start");
openPopup("bottomcenter topleft", "middle", "top", "center left", "after_start");
yield;
openPopup("leftcenter topright", "middle", "right", "center top", "start", "start_before");
openPopup("leftcenter topright", "middle", "right", "center top", "start_before");
yield;
openPopup("rightcenter bottomleft", "middle", "left", "center bottom", "end", "end_after");
openPopup("rightcenter bottomleft", "middle", "left", "center bottom", "end_after");
yield;
/*
XXXndeakin disable these parts of the test which often cause problems, see bug 626563
openPopup("after_start", frames[0].document.getElementById("input"), "top", "left", "start");
openPopup("after_start", frames[0].document.getElementById("input"), "top", "left");
yield;
setScale(frames[0], 1.5);
openPopup("after_start", frames[0].document.getElementById("input"), "top", "left", "start");
openPopup("after_start", frames[0].document.getElementById("input"), "top", "left");
yield;
setScale(frames[0], 2.5);
openPopup("before_start", frames[0].document.getElementById("input"), "bottom", "left", "start");
openPopup("before_start", frames[0].document.getElementById("input"), "bottom", "left");
yield;
setScale(frames[0], 1);
@ -304,10 +303,7 @@ function checkPanelPosition(panel)
is(anchor, expectedAnchor, "anchor");
var arrow = panel.shadowRoot.querySelector(".panel-arrow");
is(panel.getAttribute("side"), expectedSide, "panel arrow side");
is(arrow.hidden, false, "panel hidden");
is(arrow.parentNode.getAttribute("pack"), expectedPack, "panel arrow pack");
panel.hidePopup();
}

152
toolkit/content/tests/widgets/test_popupanchor.xhtml
View File

@ -16,7 +16,7 @@
<script>
<![CDATA[
var anchor, panel, arrow;
var anchor, panel;
function is_close(got, exp, msg) {
// on some platforms we see differences of a fraction of a pixel - so
@ -24,52 +24,16 @@ function is_close(got, exp, msg) {
ok(Math.abs(got - exp) < 1, msg + ": " + got + " should be equal(-ish) to " + exp);
}
function isArrowPositionedOn(side, offset) {
var arrowRect = arrow.getBoundingClientRect();
var arrowMidX = (arrowRect.left + arrowRect.right) / 2;
var arrowMidY = (arrowRect.top + arrowRect.bottom) / 2;
function checkPositionRelativeToAnchor(side) {
var panelRect = panel.getBoundingClientRect();
var panelMidX = (panelRect.left + panelRect.right) / 2;
var panelMidY = (panelRect.top + panelRect.bottom) / 2;
// First check the "flip" of the panel is correct. If we are expecting the
// arrow to be pointing to the left side of the anchor, the arrow must
// also be on the left side of the panel (and vice-versa)
// XXX - on OSX, the arrow seems to always be exactly in the center, hence
// the 'equals' sign in the "<=" and ">=" comparisons. NFI why though...
switch (side) {
case "left":
ok(arrowMidX <= panelMidX, "arrow should be on the left of the panel");
break;
case "right":
ok(arrowMidX >= panelMidX, "arrow should be on the right of the panel");
break;
case "top":
ok(arrowMidY <= panelMidY, "arrow should be on the top of the panel");
break;
case "bottom":
ok(arrowMidY >= panelMidY, "arrow should be on the bottom of the panel");
break;
default:
ok(false, "invalid position " + side);
break;
}
// Now check the arrow really is pointing where we expect. The middle of
// the arrow should be pointing exactly to the left (or right) side of the
// anchor rect, +- any offsets.
if (offset === null) // special case - explicit 'null' means 'don't check offset'
return;
offset = offset || 0; // no param means no offset expected.
var anchorRect = anchor.getBoundingClientRect();
var anchorPos = anchorRect[side];
switch (side) {
case "left":
case "right":
is_close(arrowMidX - anchorPos, offset, "arrow should be " + offset + "px from " + side + " side of anchor");
is_close(panelRect.top, anchorRect.bottom, "top of panel should be at bottom of anchor");
break;
case "top":
case "bottom":
is_close(arrowMidY - anchorPos, offset, "arrow should be " + offset + "px from " + side + " side of anchor");
is_close(panelRect.right, anchorRect.left, "right of panel should be left of anchor");
break;
default:
@ -116,29 +80,8 @@ async function waitForPopupPositioned(actionFn, callback)
}
function _openPopup(position, callback) {
// this is very ugly: the panel CSS sets the arrow's list-style-image based
// on the 'side' attribute. If the setting of the 'side' attribute causes
// the image to change, we may get the popupshown event before the new
// image has loaded - which causes the size of the arrow to be incorrect
// for a brief moment - right when we are measuring it!
// So we work around this in 2 steps:
// * Force the 'side' attribute to a value which causes the CSS to not
// specify an image - then when the popup gets shown, the correct image
// is set, causing a load() event on the image element.
// * Listen to *both* popupshown and the image load event. When both have
// fired (the order is indeterminate) we start the test.
panel.setAttribute("side", "noside");
var numEvents = 0;
function onEvent() {
if (++numEvents == 2) // after both panel 'popupshown' and image 'load'
callback();
};
panel.addEventListener("popupshown", function popupshown() {
onEvent();
}, {once: true});
arrow.addEventListener("load", function imageload() {
onEvent();
}, {once: true});
panel.addEventListener("popupshown", callback, {once: true});
panel.openPopup(anchor, position);
}
@ -146,45 +89,45 @@ var tests = [
// A panel with the anchor after_end - the anchor should not move on resize
['simpleResizeHorizontal', 'middle', function(next) {
openPopup("after_end", function() {
isArrowPositionedOn("right");
checkPositionRelativeToAnchor("right");
var origPanelRect = panel.getBoundingClientRect();
panel.sizeTo(100, 100);
isArrowPositionedOn("right"); // should not have flipped, so still "right"
checkPositionRelativeToAnchor("right"); // should not have flipped, so still "right"
panel.sizeTo(origPanelRect.width, origPanelRect.height);
isArrowPositionedOn("right"); // should not have flipped, so still "right"
checkPositionRelativeToAnchor("right"); // should not have flipped, so still "right"
next();
});
}],
['simpleResizeVertical', 'middle', function(next) {
openPopup("start_after", function() {
isArrowPositionedOn("bottom");
checkPositionRelativeToAnchor("bottom");
var origPanelRect = panel.getBoundingClientRect();
panel.sizeTo(100, 100);
isArrowPositionedOn("bottom"); // should not have flipped
checkPositionRelativeToAnchor("bottom"); // should not have flipped.
panel.sizeTo(origPanelRect.width, origPanelRect.height);
isArrowPositionedOn("bottom"); // should not have flipped
checkPositionRelativeToAnchor("bottom"); // should not have flipped.
next();
});
}],
['flippingResizeHorizontal', 'middle', function(next) {
openPopup("after_end", function() {
isArrowPositionedOn("right");
checkPositionRelativeToAnchor("right");
waitForPopupPositioned(
() => { panel.sizeTo(anchor.getBoundingClientRect().left + 50, 50); },
() => {
isArrowPositionedOn("left"); // check it flipped and has zero offset.
checkPositionRelativeToAnchor("left"); // check it flipped.
next();
});
});
}],
['flippingResizeVertical', 'middle', function(next) {
openPopup("start_after", function() {
isArrowPositionedOn("bottom");
checkPositionRelativeToAnchor("bottom");
waitForPopupPositioned(
() => { panel.sizeTo(50, anchor.getBoundingClientRect().top + 50); },
() => {
isArrowPositionedOn("top"); // check it flipped and has zero offset.
checkPositionRelativeToAnchor("top"); // check it flipped.
next();
});
});
@ -192,17 +135,17 @@ var tests = [
['simpleMoveToAnchorHorizontal', 'middle', function(next) {
openPopup("after_end", function() {
isArrowPositionedOn("right");
checkPositionRelativeToAnchor("right");
waitForPopupPositioned(
() => { panel.moveToAnchor(anchor, "after_end", 20, 0); },
() => {
// the anchor and the panel should have moved 20px right without flipping.
isArrowPositionedOn("right", 20);
checkPositionRelativeToAnchor("right");
waitForPopupPositioned(
() => { panel.moveToAnchor(anchor, "after_end", -20, 0); },
() => {
// the anchor and the panel should have moved 20px left without flipping.
isArrowPositionedOn("right", -20);
checkPositionRelativeToAnchor("right");
next();
});
});
@ -211,17 +154,17 @@ var tests = [
['simpleMoveToAnchorVertical', 'middle', function(next) {
openPopup("start_after", function() {
isArrowPositionedOn("bottom");
checkPositionRelativeToAnchor("bottom");
waitForPopupPositioned(
() => { panel.moveToAnchor(anchor, "start_after", 0, 20); },
() => {
// the anchor and the panel should have moved 20px down without flipping.
isArrowPositionedOn("bottom", 20);
checkPositionRelativeToAnchor("bottom");
waitForPopupPositioned(
() => { panel.moveToAnchor(anchor, "start_after", 0, -20) },
() => {
// the anchor and the panel should have moved 20px up without flipping.
isArrowPositionedOn("bottom", -20);
checkPositionRelativeToAnchor("bottom");
next();
});
});
@ -236,7 +179,7 @@ var tests = [
// anchored to the right-hand side of the anchor.
panel.sizeTo(anchorRight - 10, 100);
openPopup("after_end", function() {
isArrowPositionedOn("right");
checkPositionRelativeToAnchor("right");
// Ask for it to be anchored 1/2 way between the left edge of the window
// and the anchor right - it can't fit with the panel on the left/arrow
// on the right, so it must flip (arrow on the left, panel on the right)
@ -245,14 +188,14 @@ var tests = [
waitForPopupPositioned(
() => panel.moveToAnchor(anchor, "after_end", offset, 0),
() => {
isArrowPositionedOn("left", offset); // should have flipped and have the offset.
checkPositionRelativeToAnchor("left");
// resize back to original and move to a zero offset - it should flip back.
panel.sizeTo(anchorRight - 10, 100);
waitForPopupPositioned(
() => panel.moveToAnchor(anchor, "after_end", 0, 0),
() => {
isArrowPositionedOn("right"); // should have flipped back and no offset
checkPositionRelativeToAnchor("right"); // should have flipped back.
next();
});
});
@ -266,19 +209,19 @@ var tests = [
// "top/bottom" instead of "left/right"
panel.sizeTo(100, anchorBottom - 10);
openPopup("start_after", function() {
isArrowPositionedOn("bottom");
checkPositionRelativeToAnchor("bottom");
var offset = Math.floor(-anchorBottom / 2);
waitForPopupPositioned(
() => panel.moveToAnchor(anchor, "start_after", 0, offset),
() => {
isArrowPositionedOn("top", offset);
checkPositionRelativeToAnchor("top");
panel.sizeTo(100, anchorBottom - 10);
waitForPopupPositioned(
() => panel.moveToAnchor(anchor, "start_after", 0, 0),
() => {
isArrowPositionedOn("bottom");
checkPositionRelativeToAnchor("bottom");
next();
});
});
@ -287,18 +230,10 @@ var tests = [
['veryWidePanel-after_end', 'middle', function(next) {
openSlidingPopup("after_end", function() {
var origArrowRect = arrow.getBoundingClientRect();
// Now move it such that the arrow can't be at either end of the panel but
// instead somewhere in the middle as that is the only way things fit,
// meaning the arrow should "slide" down the panel.
waitForPopupPositioned(
() => { panel.sizeTo(window.innerWidth - 10, 60); },
() => {
is(panel.getBoundingClientRect().width, window.innerWidth - 10, "width is what we requested.")
// the arrow should not have moved.
var curArrowRect = arrow.getBoundingClientRect();
is_close(curArrowRect.left, origArrowRect.left, "arrow should not have moved");
is_close(curArrowRect.top, origArrowRect.top, "arrow should not have moved up or down");
next();
});
});
@ -306,17 +241,10 @@ var tests = [
['veryWidePanel-before_start', 'middle', function(next) {
openSlidingPopup("before_start", function() {
var origArrowRect = arrow.getBoundingClientRect();
// Now size it such that the arrow can't be at either end of the panel but
// instead somewhere in the middle as that is the only way things fit.
waitForPopupPositioned(
() => { panel.sizeTo(window.innerWidth - 10, 60); },
() => {
is(panel.getBoundingClientRect().width, window.innerWidth - 10, "width is what we requested")
// the arrow should not have moved.
var curArrowRect = arrow.getBoundingClientRect();
is_close(curArrowRect.left, origArrowRect.left, "arrow should not have moved");
is_close(curArrowRect.top, origArrowRect.top, "arrow should not have moved up or down");
next();
});
});
@ -324,18 +252,10 @@ var tests = [
['veryTallPanel-start_after', 'middle', function(next) {
openSlidingPopup("start_after", function() {
var origArrowRect = arrow.getBoundingClientRect();
// Now move it such that the arrow can't be at either end of the panel but
// instead somewhere in the middle as that is the only way things fit,
// meaning the arrow should "slide" down the panel.
waitForPopupPositioned(
() => { panel.sizeTo(100, window.innerHeight - 10); },
() => {
is(panel.getBoundingClientRect().height, window.innerHeight - 10, "height is what we requested.")
// the arrow should not have moved.
var curArrowRect = arrow.getBoundingClientRect();
is_close(curArrowRect.left, origArrowRect.left, "arrow should not have moved");
is_close(curArrowRect.top, origArrowRect.top, "arrow should not have moved up or down");
next();
});
});
@ -343,17 +263,10 @@ var tests = [
['veryTallPanel-start_before', 'middle', function(next) {
openSlidingPopup("start_before", function() {
var origArrowRect = arrow.getBoundingClientRect();
// Now size it such that the arrow can't be at either end of the panel but
// instead somewhere in the middle as that is the only way things fit.
waitForPopupPositioned(
() => { panel.sizeTo(100, window.innerHeight - 10); },
() => {
is(panel.getBoundingClientRect().height, window.innerHeight - 10, "height is what we requested")
// the arrow should not have moved.
var curArrowRect = arrow.getBoundingClientRect();
is_close(curArrowRect.left, origArrowRect.left, "arrow should not have moved");
is_close(curArrowRect.top, origArrowRect.top, "arrow should not have moved up or down");
next();
});
});
@ -364,10 +277,7 @@ var tests = [
openPopup("after_end", function() {
// when we request too far to the right/bottom, the panel gets shrunk
// and moved. The amount it is shrunk by is how far it is moved.
var panelRect = panel.getBoundingClientRect();
// panel was requested 100px wide - calc offset based on actual width.
var offset = panelRect.width - 100;
isArrowPositionedOn("right", offset);
checkPositionRelativeToAnchor("right");
next();
});
}],
@ -376,9 +286,7 @@ var tests = [
openPopup("after_start", function() {
// See above - we are still too far to the right, but the anchor is
// on the other side.
var panelRect = panel.getBoundingClientRect();
var offset = panelRect.width - 100;
isArrowPositionedOn("right", offset);
checkPositionRelativeToAnchor("right");
next();
});
}],
@ -388,10 +296,7 @@ var tests = [
openPopup("after_start", function() {
var panelRect = panel.getBoundingClientRect();
is(panelRect.left, 0, "panel remains within the screen");
// not sure how to determine the offset here, so given we have checked
// the panel is as left as possible while still being inside the window,
// we just don't check the offset.
isArrowPositionedOn("left", null);
checkPositionRelativeToAnchor("left");
next();
});
}],
@ -449,7 +354,6 @@ addEventListener("load", function() {
// anchor is set by the test runner above
panel = document.getElementById("testPanel");
arrow = panel.shadowRoot.querySelector(".panel-arrow");
runTests();
});

8
toolkit/content/tests/widgets/test_popupreflows.xhtml
View File

@ -16,7 +16,7 @@
<![CDATA[
ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");
let panel, anchor, arrow;
let panel, anchor;
// A reflow observer - it just remembers the stack trace of all sync reflows
// done by the panel.
@ -86,12 +86,6 @@ SimpleTest.waitForExplicitFinish();
addEventListener("load", function() {
anchor = document.getElementById("anchor");
panel = document.getElementById("testPanel");
arrow = panel.shadowRoot.querySelector(".panel-arrow");
// Cancel the arrow panel slide-in transition (bug 767133) - we are only
// testing reflows in the core panel implementation and not reflows that may
// or may not be caused by transitioning....
arrow.style.transition = "none";
// and off we go...
countReflows(testSimplePanel, 0).then(SimpleTest.finish);

50
toolkit/content/widgets/panel.js
View File

@ -9,14 +9,7 @@
{
class MozPanel extends MozElements.MozElementMixin(XULPopupElement) {
static get markup() {
return `
<vbox class="panel-arrowcontainer" flex="1">
<box class="panel-arrowbox" part="arrowbox">
<image class="panel-arrow" part="arrow"/>
</box>
<html:slot part="content" style="display: none" />
</vbox>
`;
return `<html:slot part="content" style="display: none"/>`;
}
constructor() {
super();
@ -102,55 +95,28 @@
return this.getAttribute("type") == "arrow";
}
adjustArrowPosition(event) {
_setSideAttribute(event) {
if (!this.isArrowPanel || !this.isAnchored) {
return;
}
var container = this.shadowRoot.querySelector(".panel-arrowcontainer");
var arrowbox = this.shadowRoot.querySelector(".panel-arrowbox");
var position = event.alignmentPosition;
var offset = event.alignmentOffset;
let position = event.alignmentPosition;
if (position.indexOf("start_") == 0 || position.indexOf("end_") == 0) {
container.setAttribute("orient", "horizontal");
arrowbox.setAttribute("orient", "vertical");
if (position.indexOf("_after") > 0) {
arrowbox.setAttribute("pack", "end");
} else {
arrowbox.setAttribute("pack", "start");
}
arrowbox.style.transform = "translate(0, " + -offset + "px)";
// The assigned side stays the same regardless of direction.
var isRTL = window.getComputedStyle(this).direction == "rtl";
let isRTL = window.getComputedStyle(this).direction == "rtl";
if (position.indexOf("start_") == 0) {
container.style.MozBoxDirection = "reverse";
this.setAttribute("side", isRTL ? "left" : "right");
} else {
container.style.removeProperty("-moz-box-direction");
this.setAttribute("side", isRTL ? "right" : "left");
}
} else if (
position.indexOf("before_") == 0 ||
position.indexOf("after_") == 0
) {
container.removeAttribute("orient");
arrowbox.removeAttribute("orient");
if (position.indexOf("_end") > 0) {
arrowbox.setAttribute("pack", "end");
} else {
arrowbox.setAttribute("pack", "start");
}
arrowbox.style.transform = "translate(" + -offset + "px, 0)";
if (position.indexOf("before_") == 0) {
container.style.MozBoxDirection = "reverse";
this.setAttribute("side", "bottom");
} else {
container.style.removeProperty("-moz-box-direction");
this.setAttribute("side", "top");
}
}
@ -168,12 +134,6 @@
anchorRoot.setAttribute("open", "true");
}
var arrow = this.shadowRoot.querySelector(".panel-arrow");
arrow.hidden = !this.isAnchored;
this.shadowRoot
.querySelector(".panel-arrowbox")
.style.removeProperty("transform");
if (this.getAttribute("animate") != "false") {
this.setAttribute("animate", "open");
// the animating attribute prevents user interaction during transition
@ -321,7 +281,7 @@
on_popuppositioned(event) {
if (event.target == this) {
this.adjustArrowPosition(event);
this._setSideAttribute(event);
}
}
}

38
toolkit/themes/linux/global/popup.css
View File

@ -60,44 +60,6 @@ panel[type="arrow"].panel-no-padding::part(content) {
overflow: hidden; /* Don't let panel content overflow the border */
}
:is(panel, menupopup)::part(arrow) {
-moz-context-properties: fill, stroke;
fill: var(--panel-background);
stroke: var(--panel-border-color);
}
:is(panel, menupopup)[side="top"]::part(arrow),
:is(panel, menupopup)[side="bottom"]::part(arrow) {
list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
position: relative;
margin-inline: 10px;
}
:is(panel, menupopup)[side="top"]::part(arrow) {
margin-bottom: -5px;
}
:is(panel, menupopup)[side="bottom"]::part(arrow) {
transform: scaleY(-1);
margin-top: -5px;
}
:is(panel, menupopup)[side="left"]::part(arrow),
:is(panel, menupopup)[side="right"]::part(arrow) {
list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.svg");
position: relative;
margin-block: 10px;
}
:is(panel, menupopup)[side="left"]::part(arrow) {
margin-right: -5px;
}
:is(panel, menupopup)[side="right"]::part(arrow) {
transform: scaleX(-1);
margin-left: -5px;
}
/* rules for popups associated with menulists */
menulist > menupopup {

7
toolkit/themes/osx/global/arrow/panelarrow-horizontal.svg
View File

@ -1,7 +0,0 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="18">
<path d="M 10,0 L 0,9 10,18 z" fill="context-stroke"/>
<path d="M 10,1 L 1,9 10,17 z" fill="context-fill"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 394 B

1
toolkit/themes/osx/global/jar.mn
View File

@ -28,7 +28,6 @@ toolkit.jar:
skin/classic/global/tooltip.css
* skin/classic/global/tree.css
skin/classic/global/wizard.css
skin/classic/global/arrow/panelarrow-horizontal.svg (arrow/panelarrow-horizontal.svg)
skin/classic/global/arrow/panelarrow-vertical.svg (arrow/panelarrow-vertical.svg)
skin/classic/global/dirListing/dirListing.css (dirListing/dirListing.css)
skin/classic/global/dirListing/folder.png (dirListing/folder.png)

36
toolkit/themes/osx/global/popup.css
View File

@ -40,12 +40,12 @@ panel[type="arrow"] {
panel[type="arrow"][side="top"],
panel[type="arrow"][side="bottom"] {
margin-inline: -25px;
margin-inline: -16px;
}
panel[type="arrow"][side="left"],
panel[type="arrow"][side="right"] {
margin-block: -25px;
margin-block: -16px;
}
:is(panel, menupopup)::part(content) {
@ -74,38 +74,6 @@ panel[type="arrow"].panel-no-padding::part(content) {
overflow: hidden; /* Don't let panel content overflow the border-radius */
}
:is(panel, menupopup)::part(arrow) {
-moz-context-properties: fill, stroke;
fill: var(--panel-background);
stroke: var(--panel-border-color);
}
:is(panel, menupopup)[side="top"]::part(arrow) {
list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
margin-inline: 16px;
margin-bottom: -1px;
}
:is(panel, menupopup)[side="bottom"]::part(arrow) {
list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
-moz-transform: scaleY(-1);
margin-inline: 16px;
margin-top: -1px;
}
:is(panel, menupopup)[side="left"]::part(arrow) {
list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.svg");
margin-block: 16px;
margin-right: -1px;
}
:is(panel, menupopup)[side="right"]::part(arrow) {
list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.svg");
transform: scaleX(-1);
margin-block: 16px;
margin-left: -1px;
}
/* rules for popups associated with menulists */
menulist > menupopup {

1
toolkit/themes/shared/desktop-non-mac.jar.inc.mn
View File

@ -14,7 +14,6 @@
skin/classic/global/tabprompts.css (../../windows/global/tabprompts.css)
skin/classic/global/wizard.css (../../windows/global/wizard.css)
skin/classic/global/arrow/panelarrow-horizontal.svg (../../windows/global/arrow/panelarrow-horizontal.svg)
skin/classic/global/arrow/panelarrow-vertical.svg (../../windows/global/arrow/panelarrow-vertical.svg)
* skin/classic/global/dirListing/dirListing.css (../../windows/global/dirListing/dirListing.css)

7
toolkit/themes/windows/global/arrow/panelarrow-horizontal.svg
View File

@ -1,7 +0,0 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="20">
<path d="M 10,0 L 0,10 10,20 z" fill="context-stroke"/>
<path d="M 10,1 L 1,10 10,19 z" fill="context-fill"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 397 B

38
toolkit/themes/windows/global/popup.css
View File

@ -121,44 +121,6 @@ panel[type="arrow"].panel-no-padding::part(content) {
overflow: hidden; /* Don't let panel content overflow the border-radius */
}
:is(panel, menupopup)::part(arrow) {
-moz-context-properties: fill, stroke;
fill: var(--arrowpanel-background);
stroke: var(--arrowpanel-border-color);
}
:is(panel, menupopup)[side="top"]::part(arrow),
:is(panel, menupopup)[side="bottom"]::part(arrow) {
list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
position: relative;
margin-inline: 10px;
}
:is(panel, menupopup)[side="top"]::part(arrow) {
margin-bottom: -5px;
}
:is(panel, menupopup)[side="bottom"]::part(arrow) {
transform: scaleY(-1);
margin-top: -5px;
}
:is(panel, menupopup)[side="left"]::part(arrow),
:is(panel, menupopup)[side="right"]::part(arrow) {
list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.svg");
position: relative;
margin-block: 10px;
}
:is(panel, menupopup)[side="left"]::part(arrow) {
margin-right: -5px;
}
:is(panel, menupopup)[side="right"]::part(arrow) {
transform: scaleX(-1);
margin-left: -5px;
}
/* rules for popups associated with menulists */
menulist > menupopup {