Skip to content

Commit df692c3

Browse files
marco-cmarco-c
committed
Bug 1583696 - Remove XUL grid from toolkit/components/prompts/content/tabprompts.jsm. r=MattN,marionette-reviewers,whimboo
Differential Revision: https://phabricator.services.mozilla.com/D61442 UltraBlame original commit: 0aa77ee04caae3d4081bbc992f2d962d3c9ec449
1 parent f8a655d commit df692c3

File tree

9 files changed

+108
-131
lines changed

9 files changed

+108
-131
lines changed

‎browser/base/content/browser.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8890,16 +8890,19 @@ TabModalPromptBox.prototype = {
88908890

88918891
}
88928892
if (hostForAllowFocusCheckbox) {
8893-
let allowFocusRow = document.createXULElement("row");
8894-
allowFocusCheckbox = document.createXULElement("checkbox");
8895-
let spacer = document.createXULElement("spacer");
8893+
let allowFocusRow = document.createElement("div");
8894+
8895+
let spacer = document.createElement("div");
88968896
allowFocusRow.appendChild(spacer);
8897+
8898+
allowFocusCheckbox = document.createXULElement("checkbox");
88978899
let label = gTabBrowserBundle.formatStringFromName(
88988900
"tabs.allowTabFocusByPromptForSite",
88998901
[hostForAllowFocusCheckbox]
89008902
);
89018903
allowFocusCheckbox.setAttribute("label", label);
89028904
allowFocusRow.appendChild(allowFocusCheckbox);
8905+
89038906
newPrompt.ui.rows.append(allowFocusRow);
89048907
}
89058908

‎docshell/test/browser/browser_bug1415918_beforeunload_options.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,6 @@ const TEST_PATH = getRootDirectory(gTestPath).replace(
77
);
88

99
add_task(async function test() {
10-
const XUL_NS =
11-
"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
12-
1310
await SpecialPowers.pushPrefEnv({
1411
set: [["dom.require_user_interaction_for_beforeunload", false]],
1512
});
@@ -28,7 +25,7 @@ add_task(async function test() {
2825
mutation.type == "attributes" &&
2926
browser.hasAttribute("tabmodalPromptShowing")
3027
) {
31-
let prompt = stack.getElementsByTagNameNS(XUL_NS, "tabmodalprompt")[0];
28+
let prompt = stack.getElementsByTagName("tabmodalprompt")[0];
3229
prompt.querySelector(`.tabmodalprompt-${buttonId}`).click();
3330
promptShown = true;
3431
}

‎testing/marionette/browser.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,6 @@ this.EXPORTED_SYMBOLS = ["browser", "Context", "WindowState"];
3333

3434
this.browser = {};
3535

36-
const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
37-
3836

3937

4038

@@ -300,10 +298,7 @@ browser.Context = class {
300298

301299

302300

303-
let modalElements = br.parentNode.getElementsByTagNameNS(
304-
XUL_NS,
305-
"tabmodalprompt"
306-
);
301+
let modalElements = br.parentNode.getElementsByTagName("tabmodalprompt");
307302

308303
return br.tabModalPromptBox.getPrompt(modalElements[0]);
309304
}

‎toolkit/components/prompts/content/tabprompts.css‎

Lines changed: 64 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,26 @@
33

44

55

6+
7+
.tabModalBackground {
8+
-moz-box-pack: center;
9+
-moz-box-orient: vertical;
10+
}
11+
612
.tabModalBackground,
713
tabmodalprompt {
814
width: 100%;
915
height: 100%;
10-
-moz-box-pack: center;
11-
-moz-box-orient: vertical;
1216
}
1317

14-
.tabmodalprompt-mainContainer {
15-
min-width: 20em;
16-
min-height: 12em;
17-
-moz-user-focus: normal;
18+
tabmodalprompt {
19+
--tabmodalprompt-padding: 20px;
20+
}
21+
22+
tabmodalprompt:not([hidden]) {
23+
display: grid;
24+
grid-template-rows: 1fr [dialog-start] auto [dialog-end] 2fr;
25+
justify-items: center;
1826
}
1927

2028

@@ -25,14 +33,48 @@ tabmodalprompt {
2533
tabmodalprompt.tab-prompt {
2634
overflow: visible;
2735
z-index: 1;
36+
grid-template-rows: [dialog-start] auto [dialog-end] 1fr;
2837
}
2938

30-
tabmodalprompt.tab-prompt .spacer-top {
31-
display: none;
39+
tabmodalprompt.tab-prompt .tabmodalprompt-mainContainer {
40+
margin-top: -5px;
3241
}
3342

34-
tabmodalprompt.tab-prompt *.tabmodalprompt-mainContainer {
35-
margin-top: -5px;
43+
.tabmodalprompt-mainContainer {
44+
min-width: 20em;
45+
min-height: 12em;
46+
max-width: calc(60% + calc(var(--tabmodalprompt-padding) * 2));
47+
-moz-user-focus: normal;
48+
grid-row: dialog;
49+
50+
display: flex;
51+
flex-direction: column;
52+
}
53+
54+
.tabmodalprompt-topContainer {
55+
flex-grow: 1;
56+
padding: var(--tabmodalprompt-padding);
57+
display: grid;
58+
grid-template-columns: auto 1fr;
59+
align-items: baseline;
60+
}
61+
62+
.tabmodalprompt-topContainer > div:not(.tabmodalprompt-infoContainer):not([hidden]) {
63+
display: contents;
64+
}
65+
66+
.tabmodalprompt-infoContainer {
67+
grid-column: span 2;
68+
69+
display: block;
70+
margin-block: auto;
71+
text-align: center;
72+
}
73+
74+
75+
76+
.tabmodalprompt-topContainer > div > *:nth-child(2) {
77+
grid-column: 2;
3678
}
3779

3880
.infoTitle {
@@ -47,10 +89,21 @@ tabmodalprompt.tab-prompt *.tabmodalprompt-mainContainer {
4789
cursor: text !important;
4890
white-space: pre-wrap;
4991
unicode-bidi: plaintext;
92+
outline: none;
93+
overflow: auto;
5094
}
5195

5296
tabmodalprompt label[value=""] {
53-
visibility: collapse;
97+
display: none;
98+
}
99+
100+
.tabmodalprompt-buttonContainer {
101+
display: flex;
102+
padding: 12px var(--tabmodalprompt-padding) 15px;
103+
}
104+
105+
.tabmodalprompt-buttonSpacer {
106+
flex-grow: 1;
54107
}
55108

56109

‎toolkit/components/prompts/content/tabprompts.jsm‎

Lines changed: 34 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const { AppConstants } = ChromeUtils.import(
1414
var TabModalPrompt = class {
1515
constructor(win) {
1616
this.win = win;
17-
let newPrompt = (this.element = win.document.createXULElement(
17+
let newPrompt = (this.element = win.document.createElement(
1818
"tabmodalprompt"
1919
));
2020
newPrompt.setAttribute("role", "dialog");
@@ -25,50 +25,38 @@ var TabModalPrompt = class {
2525
newPrompt.appendChild(
2626
win.MozXULElement.parseXULToFragment(
2727
`
28-
<spacer class="spacer-top" flex="1"/>
29-
<hbox pack="center">
30-
<vbox class="tabmodalprompt-mainContainer">
31-
<grid class="tabmodalprompt-topContainer" flex="1">
32-
<columns>
33-
<column/>
34-
<column flex="1"/>
35-
</columns>
36-
37-
<rows class="tabmodalprompt-rows">
38-
<vbox class="tabmodalprompt-infoContainer" align="center" pack="center" flex="1">
39-
<description class="tabmodalprompt-infoTitle infoTitle" hidden="true" />
40-
<description class="tabmodalprompt-infoBody infoBody" id="infoBody-${randomIdSuffix}"/>
41-
</vbox>
42-
43-
<row class="tabmodalprompt-loginContainer" hidden="true" align="center">
44-
<label class="tabmodalprompt-loginLabel" value="&editfield0.label;" control="loginTextbox-${randomIdSuffix}"/>
45-
<html:input class="tabmodalprompt-loginTextbox" id="loginTextbox-${randomIdSuffix}"/>
46-
</row>
47-
48-
<row class="tabmodalprompt-password1Container" hidden="true" align="center">
49-
<label class="tabmodalprompt-password1Label" value="&editfield1.label;" control="password1Textbox-${randomIdSuffix}"/>
50-
<html:input class="tabmodalprompt-password1Textbox" type="password" id="password1Textbox-${randomIdSuffix}"/>
51-
</row>
52-
53-
<row class="tabmodalprompt-checkboxContainer" hidden="true">
54-
<spacer/>
55-
<checkbox class="tabmodalprompt-checkbox"/>
56-
</row>
57-
58-
<!-- content goes here -->
59-
</rows>
60-
</grid>
61-
<hbox class="tabmodalprompt-buttonContainer">
62-
<button class="tabmodalprompt-button3" hidden="true"/>
63-
<spacer class="tabmodalprompt-buttonSpacer" flex="1"/>
64-
<button class="tabmodalprompt-button0" label="&okButton.label;"/>
65-
<button class="tabmodalprompt-button2" hidden="true"/>
66-
<button class="tabmodalprompt-button1" label="&cancelButton.label;"/>
67-
</hbox>
68-
</vbox>
69-
</hbox>
70-
<spacer flex="2"/>
71-
`,
28+
<div class="tabmodalprompt-mainContainer" xmlns="http://www.w3.org/1999/xhtml" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
29+
<div class="tabmodalprompt-topContainer">
30+
<div class="tabmodalprompt-infoContainer">
31+
<div class="tabmodalprompt-infoTitle infoTitle" hidden="hidden"/>
32+
<div class="tabmodalprompt-infoBody infoBody" id="infoBody-${randomIdSuffix}" tabindex="-1"/>
33+
</div>
34+
35+
<div class="tabmodalprompt-loginContainer" hidden="hidden">
36+
<xul:label class="tabmodalprompt-loginLabel" value="&editfield0.label;" control="loginTextbox-${randomIdSuffix}"/>
37+
<input class="tabmodalprompt-loginTextbox" id="loginTextbox-${randomIdSuffix}"/>
38+
</div>
39+
40+
<div class="tabmodalprompt-password1Container" hidden="hidden">
41+
<xul:label class="tabmodalprompt-password1Label" value="&editfield1.label;" control="password1Textbox-${randomIdSuffix}"/>
42+
<input class="tabmodalprompt-password1Textbox" type="password" id="password1Textbox-${randomIdSuffix}"/>
43+
</div>
44+
45+
<div class="tabmodalprompt-checkboxContainer" hidden="hidden">
46+
<div/>
47+
<xul:checkbox class="tabmodalprompt-checkbox"/>
48+
</div>
49+
50+
<!-- content goes here -->
51+
</div>
52+
<div class="tabmodalprompt-buttonContainer">
53+
<xul:button class="tabmodalprompt-button3" hidden="true"/>
54+
<div class="tabmodalprompt-buttonSpacer"/>
55+
<xul:button class="tabmodalprompt-button0" label="&okButton.label;"/>
56+
<xul:button class="tabmodalprompt-button2" hidden="true"/>
57+
<xul:button class="tabmodalprompt-button1" label="&cancelButton.label;"/>
58+
</div>
59+
</div>`,
7260
[
7361
"chrome://global/locale/commonDialog.dtd",
7462
"chrome://global/locale/dialogOverlay.dtd",
@@ -94,7 +82,7 @@ var TabModalPrompt = class {
9482
infoBody: newPrompt.querySelector(".tabmodalprompt-infoBody"),
9583
infoTitle: newPrompt.querySelector(".tabmodalprompt-infoTitle"),
9684
infoIcon: null,
97-
rows: newPrompt.querySelector(".tabmodalprompt-rows"),
85+
rows: newPrompt.querySelector(".tabmodalprompt-topContainer"),
9886
checkbox: newPrompt.querySelector(".tabmodalprompt-checkbox"),
9987
checkboxContainer: newPrompt.querySelector(
10088
".tabmodalprompt-checkboxContainer"
@@ -250,8 +238,6 @@ var TabModalPrompt = class {
250238

251239

252240

253-
254-
this.onResize();
255241
}
256242

257243
shutdownPrompt() {
@@ -280,58 +266,13 @@ var TabModalPrompt = class {
280266

281267
handleEvent(aEvent) {
282268
switch (aEvent.type) {
283-
case "resize":
284-
this.onResize();
285-
break;
286269
case "unload":
287270
case "TabClose":
288271
this.abortPrompt();
289272
break;
290273
}
291274
}
292275

293-
onResize() {
294-
let availWidth = this.element.clientWidth;
295-
let availHeight = this.element.clientHeight;
296-
if (availWidth == this.availWidth && availHeight == this.availHeight) {
297-
return;
298-
}
299-
this.availWidth = availWidth;
300-
this.availHeight = availHeight;
301-
302-
let main = this.ui.mainContainer;
303-
let info = this.ui.infoContainer;
304-
let body = this.ui.infoBody;
305-
306-
307-
if (!this.minWidth) {
308-
this.minWidth = parseInt(this.win.getComputedStyle(main).minWidth);
309-
}
310-
if (!this.minHeight) {
311-
this.minHeight = parseInt(this.win.getComputedStyle(main).minHeight);
312-
}
313-
let maxWidth =
314-
Math.max(Math.floor(availWidth * 0.6), this.minWidth) +
315-
info.clientWidth -
316-
main.clientWidth;
317-
let maxHeight =
318-
Math.max(Math.floor(availHeight * 0.6), this.minHeight) +
319-
info.clientHeight -
320-
main.clientHeight;
321-
body.style.maxWidth = maxWidth + "px";
322-
info.style.overflow = info.style.width = info.style.height = "";
323-
324-
325-
if (info.clientWidth > maxWidth) {
326-
info.style.overflow = "auto";
327-
info.style.width = maxWidth + "px";
328-
}
329-
if (info.clientHeight > maxHeight) {
330-
info.style.overflow = "auto";
331-
info.style.height = maxHeight + "px";
332-
}
333-
}
334-
335276
onButtonClick(buttonNum) {
336277

337278

‎toolkit/components/prompts/test/chromeScript.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ function checkTabModal(prompt, browser) {
5353
"Check clicks on the content area don't go to the browser"
5454
);
5555
is(
56-
doc.elementFromPoint(x - 10, y + 50).parentNode,
56+
doc.elementFromPoint(x - 10, y + 50),
5757
prompt.element,
5858
"Check clicks on the content area go to the prompt dialog background"
5959
);
@@ -131,7 +131,7 @@ function getSelectState(ui) {
131131
function getPromptState(ui) {
132132
let state = {};
133133
state.msg = ui.infoBody.textContent;
134-
state.titleHidden = ui.infoTitle.getAttribute("hidden") == "true";
134+
state.titleHidden = ui.infoTitle.hidden;
135135
state.textHidden = ui.loginContainer.hidden;
136136
state.passHidden = ui.password1Container.hidden;
137137
state.checkHidden = ui.checkboxContainer.hidden;

‎toolkit/components/startup/tests/browser/head.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33

44
"use strict";
55

6-
const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
7-
86
function whenBrowserLoaded(browser, callback) {
97
return BrowserTestUtils.browserLoaded(browser).then(callback);
108
}

‎toolkit/themes/osx/global/tabprompts.css‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,7 @@ tabmodalprompt {
2222
border: 1px solid hsla(0,0%,0%,.5);
2323
}
2424

25-
.tabmodalprompt-topContainer {
26-
padding: 20px;
27-
}
28-
2925
.tabmodalprompt-buttonContainer {
30-
padding: 12px 20px 15px;
3126
background-color: hsla(0,0%,0%,.05);
3227
border-top: 1px solid hsla(0,0%,0%,.05);
3328
}

‎toolkit/themes/windows/global/tabprompts.css‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,7 @@ tabmodalprompt {
2020
border: 1px solid threeDDarkShadow;
2121
}
2222

23-
.tabmodalprompt-topContainer {
24-
padding: 20px;
25-
}
26-
2723
.tabmodalprompt-buttonContainer {
28-
padding: 12px 20px 15px;
2924
background-color: hsla(0,0%,0%,.05);
3025
border-top: 1px solid hsla(0,0%,0%,.05);
3126
}

0 commit comments

Comments
 (0)