fix(ui5-dialog): Texts are no longer blurred in Chromium-based browsers (#2417)

Author: georgimkv

packages/main/src/Dialog.js

@@ -1,4 +1,5 @@
 import { isPhone, isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import Popup from "./Popup.js";
 import "@ui5/webcomponents-icons/dist/resize-corner.js";
 import Icon from "./Icon.js";
@@ -152,6 +153,18 @@ const metadata = {
  * @public
  */
 class Dialog extends Popup {
+	constructor() {
+		super();
+
+		this._screenResizeHandler = this._center.bind(this);
+
+		this._dragMouseMoveHandler = this._onDragMouseMove.bind(this);
+		this._dragMouseUpHandler = this._onDragMouseUp.bind(this);
+
+		this._resizeMouseMoveHandler = this._onResizeMouseMove.bind(this);
+		this._resizeMouseUpHandler = this._onResizeMouseUp.bind(this);
+	}
+
 	static get metadata() {
 		return metadata;
 	}
@@ -197,6 +210,11 @@ class Dialog extends Popup {
 		};
 	}
 
+	show() {
+		super.show();
+		this._center();
+	}
+
 	_clamp(val, min, max) {
 		return Math.min(Math.max(val, min), max);
 	}
@@ -208,16 +226,33 @@ class Dialog extends Popup {
 	}
 
 	onEnterDOM() {
-		this._dragMouseMoveHandler = this._onDragMouseMove.bind(this);
-		this._dragMouseUpHandler = this._onDragMouseUp.bind(this);
-
-		this._resizeMouseMoveHandler = this._onResizeMouseMove.bind(this);
-		this._resizeMouseUpHandler = this._onResizeMouseUp.bind(this);
+		ResizeHandler.register(this, this._screenResizeHandler);
+		ResizeHandler.register(document.body, this._screenResizeHandler);
 	}
 
 	onExitDOM() {
-		this._dragMouseMoveHandler = null;
-		this._dragMouseUpHandler = null;
+		ResizeHandler.deregister(this, this._screenResizeHandler);
+		ResizeHandler.deregister(document.body, this._screenResizeHandler);
+	}
+
+	_center() {
+		const height = window.innerHeight - this.offsetHeight,
+			width = window.innerWidth - this.offsetWidth;
+
+		Object.assign(this.style, {
+			top: `${Math.round(height / 2)}px`,
+			left: `${Math.round(width / 2)}px`,
+		});
+	}
+
+	_revertSize() {
+		Object.assign(this.style, {
+			top: "",
+			left: "",
+			width: "",
+			height: "",
+		});
+		this.removeEventListener("ui5-before-close", this._revertSize);
 	}
 
 	/**
@@ -246,7 +281,6 @@ class Dialog extends Popup {
 		} = window.getComputedStyle(this);
 
 		Object.assign(this.style, {
-			transform: "none",
 			top: `${top}px`,
 			left: `${left}px`,
 			width: `${Math.round(Number.parseFloat(width) * 100) / 100}px`,
@@ -286,25 +320,18 @@ class Dialog extends Popup {
 	}
 
 	_attachDragHandlers() {
+		ResizeHandler.deregister(this, this._screenResizeHandler);
+		ResizeHandler.deregister(document.body, this._screenResizeHandler);
+
 		window.addEventListener("mousemove", this._dragMouseMoveHandler);
 		window.addEventListener("mouseup", this._dragMouseUpHandler);
-		this.addEventListener("ui5-before-close", this._recenter);
 	}
 
 	_detachDragHandlers() {
 		window.removeEventListener("mousemove", this._dragMouseMoveHandler);
 		window.removeEventListener("mouseup", this._dragMouseUpHandler);
 	}
 
-	_recenter() {
-		Object.assign(this.style, {
-			top: "",
-			left: "",
-			transform: "",
-		});
-		this.removeEventListener("ui5-before-close", this._recenter);
-	}
-
 	_onResizeMouseDown(event) {
 		if (!(this.resizable && this.onDesktop)) {
 			return;
@@ -333,7 +360,6 @@ class Dialog extends Popup {
 		this._minHeight = Number.parseFloat(minHeight);
 
 		Object.assign(this.style, {
-			transform: "none",
 			top: `${top}px`,
 			left: `${left}px`,
 		});
@@ -394,6 +420,9 @@ class Dialog extends Popup {
 	}
 
 	_attachResizeHandlers() {
+		ResizeHandler.deregister(this, this._screenResizeHandler);
+		ResizeHandler.deregister(document.body, this._screenResizeHandler);
+
 		window.addEventListener("mousemove", this._resizeMouseMoveHandler);
 		window.addEventListener("mouseup", this._resizeMouseUpHandler);
 		this.addEventListener("ui5-before-close", this._revertSize);
@@ -403,17 +432,6 @@ class Dialog extends Popup {
 		window.removeEventListener("mousemove", this._resizeMouseMoveHandler);
 		window.removeEventListener("mouseup", this._resizeMouseUpHandler);
 	}
-
-	_revertSize() {
-		Object.assign(this.style, {
-			top: "",
-			left: "",
-			width: "",
-			height: "",
-			transform: "",
-		});
-		this.removeEventListener("ui5-before-close", this._revertSize);
-	}
 }
 
 Dialog.define();

packages/main/src/themes/Dialog.css

@@ -1,7 +1,4 @@
 :host {
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
 	min-width: 20rem;
 	min-height: 6rem;
 	box-shadow: var(--sapContent_Shadow3);

packages/main/test/pages/DialogLifecycle.html

@@ -30,7 +30,7 @@
 
 <template id="dt">
 	<ui5-dialog id="hello-dialog" header-text="Dialogs are easy!">
-		<div stype="padding: 2rem; display:flex; justify-content: center;">
+		<div style="padding: 2rem; display:flex; justify-content: center;">
 			Hello World!
 			<ui5-button id="closeDialogButton">Dismiss</ui5-button>
 		</div>