Bug 1797313 - Fix alert/confirm dialog layout after bug 1779695. r=Gijs

max-height percentages were not honored, which caused the infoRow to
collapse. With min-height: 0 the info row shrinks too much.

Differential Revision: https://phabricator.services.mozilla.com/D160227
This commit is contained in:
Emilio Cobos Álvarez 2022-10-26 15:24:44 +00:00
parent 2d02ebbcdf
commit bbed6df0c3
3 changed files with 37 additions and 59 deletions

View file

@ -40,21 +40,22 @@ dialog[insecureauth] {
white-space: pre-wrap;
word-break: break-word;
unicode-bidi: plaintext;
}
.sizeDetermined #infoBody {
overflow-y: auto;
}
.sizeDetermined,
.sizeDetermined::part(content-box) {
display: flex;
flex-direction: column;
.sizeDetermined::part(content-box),
.sizeDetermined #infoBody,
.sizeDetermined #infoRow,
.sizeDetermined #infoContainer {
/* Allow stuff to shrink */
min-height: 0;
}
.sizeDetermined > div {
display: contents;
.sizeDetermined #infoRow {
/* Make the info row take all the available space, potentially shrinking,
* since it's what contains the infoBody, which is scrollable */
flex: 1;
}
#loginLabel, #password1Label {
@ -76,23 +77,6 @@ dialog[subdialog] .dialogRow:not([hidden]) {
align-items: stretch;
}
dialog[subdialog] #infoContainer {
max-height: 100%;
}
dialog[subdialog] #infoContainer,
dialog[subdialog] #checkboxContainer {
/* Needed to ensure text wrapping happens correctly. Without this, when
* text wraps unexpectedly, the overall dialog height is off by the height
* of a line of text. This is 100% of the width, minus the grid padding, 8px
* of which is inline padding on the contents of these containers. */
max-width: calc(100vw - 2 * var(--grid-padding) + 8px);
}
.sizeDetermined #infoRow {
min-height: 0;
}
dialog[subdialog] #iconContainer {
display: none;
}

View file

@ -54,31 +54,28 @@
</menupopup>
</popupset>
<!-- The <div> was added in bug 1606617 to workaround bug 1614447 -->
<div xmlns="http://www.w3.org/1999/xhtml">
<div id="dialogGrid">
<div class="dialogRow" id="infoRow" hidden="hidden">
<div id="iconContainer">
<xul:image id="infoIcon"/>
</div>
<div id="infoContainer">
<xul:description id="infoTitle"/>
<xul:description id="infoBody" context="contentAreaContextMenu" noinitialfocus="true"/>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" id="dialogGrid">
<div class="dialogRow" id="infoRow" hidden="hidden">
<div id="iconContainer">
<xul:image id="infoIcon"/>
</div>
<div id="loginContainer" class="dialogRow" hidden="hidden">
<xul:label id="loginLabel" data-l10n-id="common-dialog-username" control="loginTextbox"/>
<input type="text" id="loginTextbox" dir="ltr"/>
</div>
<div id="password1Container" class="dialogRow" hidden="hidden">
<xul:label id="password1Label" data-l10n-id="common-dialog-password" control="password1Textbox"/>
<input type="password" id="password1Textbox" dir="ltr"/>
</div>
<div id="checkboxContainer" class="dialogRow" hidden="hidden">
<div/> <!-- spacer -->
<xul:checkbox id="checkbox" oncommand="Dialog.onCheckbox()"/>
<div id="infoContainer">
<xul:description id="infoTitle"/>
<xul:description id="infoBody" context="contentAreaContextMenu" noinitialfocus="true"/>
</div>
</div>
<div id="loginContainer" class="dialogRow" hidden="hidden">
<xul:label id="loginLabel" data-l10n-id="common-dialog-username" control="loginTextbox"/>
<input type="text" id="loginTextbox" dir="ltr"/>
</div>
<div id="password1Container" class="dialogRow" hidden="hidden">
<xul:label id="password1Label" data-l10n-id="common-dialog-password" control="password1Textbox"/>
<input type="password" id="password1Textbox" dir="ltr"/>
</div>
<div id="checkboxContainer" class="dialogRow" hidden="hidden">
<div/> <!-- spacer -->
<xul:checkbox id="checkbox" oncommand="Dialog.onCheckbox()"/>
</div>
</div>
</dialog>
</window>

View file

@ -25,18 +25,15 @@
<html:link rel="localization" href="toolkit/global/resetProfile.ftl"/>
</linkset>
<!-- The <div> was added in bug 1606617 to workaround bug 1614447 -->
<div xmlns="http://www.w3.org/1999/xhtml">
<div id="dialogGrid">
<div class="dialogRow" id="infoRow">
<div id="iconContainer">
<xul:image id="infoIcon"/>
</div>
<div id="infoContainer">
<xul:description id="infoTitle" data-l10n-id="refresh-profile-dialog-title"/>
<xul:description id="infoBody" context="contentAreaContextMenu" noinitialfocus="true" data-l10n-id="refresh-profile-dialog-description"/>
<xul:description id="learnMoreDescription"><a id="refreshProfileLearnMore" data-l10n-id="refresh-profile-learn-more" href=""></a></xul:description>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" id="dialogGrid">
<div class="dialogRow" id="infoRow">
<div id="iconContainer">
<xul:image id="infoIcon"/>
</div>
<div id="infoContainer">
<xul:description id="infoTitle" data-l10n-id="refresh-profile-dialog-title"/>
<xul:description id="infoBody" context="contentAreaContextMenu" noinitialfocus="true" data-l10n-id="refresh-profile-dialog-description"/>
<xul:description id="learnMoreDescription"><a id="refreshProfileLearnMore" data-l10n-id="refresh-profile-learn-more" href=""></a></xul:description>
</div>
</div>
</div>