commit f3e34aecf3f480fe4c9c5bc7999bd8039e7ec86c
parent c958307491114072664648638f9bfd7b62aa561d
Author: Atila Butkovits <abutkovits@mozilla.com>
Date: Mon, 29 Dec 2025 04:47:44 +0200
Revert "Bug 2000494 - Update ConfirmDialog component to use `dialog` element. r=home-newtab-reviewers,ini" for causing node failures.
This reverts commit c958307491114072664648638f9bfd7b62aa561d.
Diffstat:
4 files changed, 117 insertions(+), 95 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/ConfirmDialog/ConfirmDialog.jsx b/browser/extensions/newtab/content-src/components/ConfirmDialog/ConfirmDialog.jsx
@@ -30,23 +30,6 @@ export class _ConfirmDialog extends React.PureComponent {
super(props);
this._handleCancelBtn = this._handleCancelBtn.bind(this);
this._handleConfirmBtn = this._handleConfirmBtn.bind(this);
- this.dialogRef = React.createRef();
- }
-
- componentDidUpdate() {
- const dialogElement = this.dialogRef.current;
- if (!dialogElement) {
- return;
- }
-
- // Open dialog when visible becomes true
- if (this.props.visible && !dialogElement.open) {
- dialogElement.showModal();
- }
- // Close dialog when visible becomes false
- else if (!this.props.visible && dialogElement.open) {
- dialogElement.close();
- }
}
_handleCancelBtn() {
@@ -80,17 +63,17 @@ export class _ConfirmDialog extends React.PureComponent {
}
render() {
+ if (!this.props.visible) {
+ return null;
+ }
+
return (
- <dialog
- ref={this.dialogRef}
- className="confirmation-dialog"
- onClick={e => {
- // Close modal when clicking on the backdrop pseudo element (the background of the modal)
- if (e.target === this.dialogRef.current) {
- this._handleCancelBtn();
- }
- }}
- >
+ <div className="confirmation-dialog">
+ <div
+ className="modal-overlay"
+ onClick={this._handleCancelBtn}
+ role="presentation"
+ />
<div className="modal">
<section className="modal-message">
{this.props.data.icon && (
@@ -100,24 +83,22 @@ export class _ConfirmDialog extends React.PureComponent {
)}
{this._renderModalMessage()}
</section>
- <section className="button-group">
- <moz-button-group>
- <moz-button
- onClick={this._handleCancelBtn}
- data-l10n-id={this.props.data.cancel_button_string_id}
- ></moz-button>
- <moz-button
- type="primary"
- onClick={this._handleConfirmBtn}
- data-l10n-id={this.props.data.confirm_button_string_id}
- data-l10n-args={JSON.stringify(
- this.props.data.confirm_button_string_args
- )}
- ></moz-button>
- </moz-button-group>
+ <section className="actions">
+ <button
+ onClick={this._handleCancelBtn}
+ data-l10n-id={this.props.data.cancel_button_string_id}
+ />
+ <button
+ className="done"
+ onClick={this._handleConfirmBtn}
+ data-l10n-id={this.props.data.confirm_button_string_id}
+ data-l10n-args={JSON.stringify(
+ this.props.data.confirm_button_string_args
+ )}
+ />
</section>
</div>
- </dialog>
+ </div>
);
}
}
diff --git a/browser/extensions/newtab/content-src/components/ConfirmDialog/_ConfirmDialog.scss b/browser/extensions/newtab/content-src/components/ConfirmDialog/_ConfirmDialog.scss
@@ -1,13 +1,12 @@
.confirmation-dialog {
- border: 1px solid var(--border-color);
- border-radius: var(--border-radius-small);
- padding: 0;
- width: 400px;
- box-shadow: var(--box-shadow-popup);
- background: var(--newtab-background-color-secondary);
-
- &::backdrop {
- background: var(--newtab-overlay-color);
+ .modal {
+ box-shadow: $shadow-secondary;
+ inset-inline-start: 0;
+ margin: auto;
+ position: fixed;
+ inset-inline-end: 0;
+ inset-block-start: 20%;
+ width: 400px;
}
section {
@@ -25,12 +24,43 @@
}
}
- .button-group {
+ .actions {
border: 0;
- padding: var(--space-large);
+ display: flex;
+ flex-wrap: nowrap;
+ padding: 0 var(--space-large);
+
+ button {
+ margin-inline-end: var(--space-large);
+ padding-inline: var(--space-large);
+ white-space: normal;
+ width: 50%;
+
+ &.done {
+ margin-inline-end: 0;
+ margin-inline-start: 0;
+ }
+ }
}
.icon {
margin-inline-end: var(--space-large);
}
}
+
+.modal-overlay {
+ background: var(--newtab-overlay-color);
+ height: 100%;
+ inset-inline-start: 0;
+ position: fixed;
+ inset-block-start: 0;
+ width: 100%;
+ z-index: 11001;
+}
+
+.modal {
+ background: var(--newtab-background-color-secondary);
+ border: 1px solid var(--border-color);
+ border-radius: var(--border-radius-small);
+ z-index: 11002;
+}
diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css
@@ -1824,16 +1824,14 @@ main section {
pointer-events: none;
}
-.confirmation-dialog {
- border: 1px solid var(--border-color);
- border-radius: var(--border-radius-small);
- padding: 0;
+.confirmation-dialog .modal {
+ box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2);
+ inset-inline-start: 0;
+ margin: auto;
+ position: fixed;
+ inset-inline-end: 0;
+ inset-block-start: 20%;
width: 400px;
- box-shadow: var(--box-shadow-popup);
- background: var(--newtab-background-color-secondary);
-}
-.confirmation-dialog::backdrop {
- background: var(--newtab-overlay-color);
}
.confirmation-dialog section {
margin: 0;
@@ -1847,14 +1845,43 @@ main section {
margin: 0;
margin-block-end: var(--space-large);
}
-.confirmation-dialog .button-group {
+.confirmation-dialog .actions {
border: 0;
- padding: var(--space-large);
+ display: flex;
+ flex-wrap: nowrap;
+ padding: 0 var(--space-large);
+}
+.confirmation-dialog .actions button {
+ margin-inline-end: var(--space-large);
+ padding-inline: var(--space-large);
+ white-space: normal;
+ width: 50%;
+}
+.confirmation-dialog .actions button.done {
+ margin-inline-end: 0;
+ margin-inline-start: 0;
}
.confirmation-dialog .icon {
margin-inline-end: var(--space-large);
}
+.modal-overlay {
+ background: var(--newtab-overlay-color);
+ height: 100%;
+ inset-inline-start: 0;
+ position: fixed;
+ inset-block-start: 0;
+ width: 100%;
+ z-index: 11001;
+}
+
+.modal {
+ background: var(--newtab-background-color-secondary);
+ border: 1px solid var(--border-color);
+ border-radius: var(--border-radius-small);
+ z-index: 11002;
+}
+
.personalizeButtonWrapper {
margin: 0;
padding: 0;
diff --git a/browser/extensions/newtab/data/content/activity-stream.bundle.js b/browser/extensions/newtab/data/content/activity-stream.bundle.js
@@ -1301,22 +1301,6 @@ class _ConfirmDialog extends (external_React_default()).PureComponent {
super(props);
this._handleCancelBtn = this._handleCancelBtn.bind(this);
this._handleConfirmBtn = this._handleConfirmBtn.bind(this);
- this.dialogRef = /*#__PURE__*/external_React_default().createRef();
- }
- componentDidUpdate() {
- const dialogElement = this.dialogRef.current;
- if (!dialogElement) {
- return;
- }
-
- // Open dialog when visible becomes true
- if (this.props.visible && !dialogElement.open) {
- dialogElement.showModal();
- }
- // Close dialog when visible becomes false
- else if (!this.props.visible && dialogElement.open) {
- dialogElement.close();
- }
}
_handleCancelBtn() {
this.props.dispatch({
@@ -1341,32 +1325,32 @@ class _ConfirmDialog extends (external_React_default()).PureComponent {
})));
}
render() {
- return /*#__PURE__*/external_React_default().createElement("dialog", {
- ref: this.dialogRef,
- className: "confirmation-dialog",
- onClick: e => {
- // Close modal when clicking on the backdrop pseudo element (the background of the modal)
- if (e.target === this.dialogRef.current) {
- this._handleCancelBtn();
- }
- }
+ if (!this.props.visible) {
+ return null;
+ }
+ return /*#__PURE__*/external_React_default().createElement("div", {
+ className: "confirmation-dialog"
}, /*#__PURE__*/external_React_default().createElement("div", {
+ className: "modal-overlay",
+ onClick: this._handleCancelBtn,
+ role: "presentation"
+ }), /*#__PURE__*/external_React_default().createElement("div", {
className: "modal"
}, /*#__PURE__*/external_React_default().createElement("section", {
className: "modal-message"
}, this.props.data.icon && /*#__PURE__*/external_React_default().createElement("span", {
className: `icon icon-spacer icon-${this.props.data.icon}`
}), this._renderModalMessage()), /*#__PURE__*/external_React_default().createElement("section", {
- className: "button-group"
- }, /*#__PURE__*/external_React_default().createElement("moz-button-group", null, /*#__PURE__*/external_React_default().createElement("moz-button", {
+ className: "actions"
+ }, /*#__PURE__*/external_React_default().createElement("button", {
onClick: this._handleCancelBtn,
"data-l10n-id": this.props.data.cancel_button_string_id
- }), /*#__PURE__*/external_React_default().createElement("moz-button", {
- type: "primary",
+ }), /*#__PURE__*/external_React_default().createElement("button", {
+ className: "done",
onClick: this._handleConfirmBtn,
"data-l10n-id": this.props.data.confirm_button_string_id,
"data-l10n-args": JSON.stringify(this.props.data.confirm_button_string_args)
- })))));
+ }))));
}
}
const ConfirmDialog = (0,external_ReactRedux_namespaceObject.connect)(state => state.Dialog)(_ConfirmDialog);
