From afc708c340b5a5ef616f2d26b3791c9ced84ea37 Mon Sep 17 00:00:00 2001
From: Rogier Lankhorst <rogierlankhorst@gmail.com>
Date: Thu, 18 Apr 2024 10:16:23 +0200
Subject: [PATCH 1/5] use popover for values

---
 css/style.css            | 27 ++++++++++++++++++++++++++
 css/style.css.map        |  1 +
 css/style.min.css        |  1 +
 css/style.scss           | 25 ++++++++++++++++++++++++
 src/class-admin-page.php | 41 +++++++++++++++++++++++++++++++++++++---
 5 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 css/style.css
 create mode 100644 css/style.css.map
 create mode 100644 css/style.min.css
 create mode 100644 css/style.scss

diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..6db05ad
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,27 @@
+.aaa-option-optimizer-popover {
+  font-family: sans-serif;
+  overflow: visible;
+  padding: 40px 40px 20px 20px;
+  position: fixed;
+  word-wrap: break-word;
+  max-width: 80%;
+  min-height: 200px;
+}
+.aaa-option-optimizer-popover::backdrop {
+  background: rgba(0, 0, 0, 0.75);
+}
+.aaa-option-optimizer-popover__close {
+  background: none !important;
+  border: none;
+  padding: 5px;
+  margin: 5px;
+  z-index: 10;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.aaa-option-optimizer-popover__close:hover {
+  cursor: pointer;
+}
+
+/*# sourceMappingURL=style.css.map */
diff --git a/css/style.css.map b/css/style.css.map
new file mode 100644
index 0000000..9844e8b
--- /dev/null
+++ b/css/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE","file":"style.css"}
\ No newline at end of file
diff --git a/css/style.min.css b/css/style.min.css
new file mode 100644
index 0000000..4805cd6
--- /dev/null
+++ b/css/style.min.css
@@ -0,0 +1 @@
+.aaa-option-optimizer-popover{font-family:sans-serif;overflow:visible;padding:40px 40px 20px 20px;position:fixed;word-wrap:break-word;max-width:80%;min-height:200px}.aaa-option-optimizer-popover::backdrop{background:rgba(0,0,0,0.75)}.aaa-option-optimizer-popover__close{background:none !important;border:0;padding:5px;margin:5px;z-index:10;position:absolute;top:0;right:0}.aaa-option-optimizer-popover__close:hover{cursor:pointer}
\ No newline at end of file
diff --git a/css/style.scss b/css/style.scss
new file mode 100644
index 0000000..88e678f
--- /dev/null
+++ b/css/style.scss
@@ -0,0 +1,25 @@
+.aaa-option-optimizer-popover {
+  font-family: sans-serif;
+  overflow: visible;
+  padding: 40px 40px 20px 20px;
+  position: fixed;
+  word-wrap: break-word;
+  max-width: 80%;
+  min-height: 200px;
+  &::backdrop {
+    background: rgb(0 0 0 / 75%);
+  }
+  &__close {
+    background: none!important;
+    border: none;
+    padding: 5px;
+    margin: 5px;
+    z-index: 10;
+    position: absolute;
+    top: 0;
+    right: 0;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/class-admin-page.php b/src/class-admin-page.php
index dadc141..21c5a73 100644
--- a/src/class-admin-page.php
+++ b/src/class-admin-page.php
@@ -35,7 +35,19 @@ public function add_admin_page() {
 	/**
 	 * Enqueue our scripts.
 	 */
-	public function enqueue_scripts() {
+	public function enqueue_scripts( $hook ) {
+		error_log($hook);
+		if ( $hook !== 'tools_page_aaa-option-optimizer') {
+			return;
+		}
+
+		wp_enqueue_style(
+			'aaa-option-optimizer',
+			plugin_dir_url( AAA_OPTION_OPTIMIZER_FILE ) . 'css/style.min.css',
+			[],
+			'2.0.1'
+		);
+
 		wp_enqueue_script(
 			'datatables',
 			plugin_dir_url( AAA_OPTION_OPTIMIZER_FILE ) . 'js/vendor/dataTables.min.js',
@@ -210,7 +222,9 @@ function ( $value, $key ) {
 			foreach ( $unused_options as $option => $value ) {
 				echo '<tr id="option_' . esc_attr( str_replace( ':', '', str_replace( '.', '', $option ) ) ) . '"><td>' . esc_html( $option ) . '</td>';
 				echo '<td>' . esc_html( $this->get_length( $value ) ) . 'KB</td>';
-				echo '<td class="value">' . esc_html( $this->print_value( $value ) ) . '</td>';
+				echo '<td class="value">';
+				echo $this->get_popover_html( $option, $value );
+				echo '</td>';
 				echo '<td><button class="button remove-autoload" data-option="' . esc_attr( $option ) . '">' . esc_html__( 'Remove Autoload', 'aaa-option-optimizer' ) . '</button> ';
 				echo ' <button class="button delete-option" data-option="' . esc_attr( $option ) . '">' . esc_html__( 'Delete Option', 'aaa-option-optimizer' ) . '</button></td></tr>';
 			}
@@ -239,7 +253,9 @@ function ( $value, $key ) {
 				echo '<tr id="option_' . esc_attr( str_replace( ':', '', str_replace( '.', '', $option ) ) ) . '">';
 				echo '<td>' . esc_html( $option ) . '</td>';
 				echo '<td>' . esc_html( $this->get_length( $arr['value'] ) ) . 'KB</td>';
-				echo '<td class="value">' . esc_html( $this->print_value( $arr['value'] ) ) . '</td>';
+				echo '<td class="value">';
+				echo $this->get_popover_html( $option, $arr['value'] );
+				echo '</td>';
 				echo '<td>' . esc_html( $arr['count'] ) . '</td>';
 				echo '<td><button class="button add-autoload" data-option="' . esc_attr( $option ) . '">' . esc_html__( 'Add Autoload', 'aaa-option-optimizer' ) . '</button> ';
 			}
@@ -273,4 +289,23 @@ function ( $value, $key ) {
 
 		echo '</div>'; // Close .wrap.
 	}
+
+	/**
+	 * Get html to show a popover
+	 *
+	 * @param string $id
+	 * @param mixed $value
+	 *
+	 * @return string
+	 */
+	private function get_popover_html( $id, $value ): string {
+		$string = is_string($value) ? $value : json_encode($value);
+		$id = 'aaa-option-optimizer-'.esc_attr($id);
+		return '
+		<button class="button" popovertarget="'.$id.'">'.__("Show value", "aaa-option-optimizer").'</button>
+		<div id="'.$id.'" popover class="aaa-option-optimizer-popover">
+		  <button class="aaa-option-optimizer-popover__close" popovertarget="'.$id.'" popovertargetaction="hide">X</button>
+		  ' . esc_html( $string ) .'
+		</div>';
+	}
 }

From c87f8533e941d9f9b7e406858ee25e93875db1cf Mon Sep 17 00:00:00 2001
From: Rogier Lankhorst <rogierlankhorst@gmail.com>
Date: Thu, 18 Apr 2024 11:22:39 +0200
Subject: [PATCH 2/5] esc_html__

---
 src/class-admin-page.php | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/class-admin-page.php b/src/class-admin-page.php
index 21c5a73..874a589 100644
--- a/src/class-admin-page.php
+++ b/src/class-admin-page.php
@@ -294,17 +294,17 @@ function ( $value, $key ) {
 	 * Get html to show a popover
 	 *
 	 * @param string $id
-	 * @param mixed $value
+	 * @param mixed  $value
 	 *
 	 * @return string
 	 */
-	private function get_popover_html( $id, $value ): string {
+	private function get_popover_html( string $id, $value ): string {
 		$string = is_string($value) ? $value : json_encode($value);
-		$id = 'aaa-option-optimizer-'.esc_attr($id);
+		$id = 'aaa-option-optimizer-' . esc_attr($id);
 		return '
-		<button class="button" popovertarget="'.$id.'">'.__("Show value", "aaa-option-optimizer").'</button>
+		<button class="button" popovertarget="'.$id.'">' . esc_html__( 'Show value', 'aaa-option-optimizer' ) . '</button>
 		<div id="'.$id.'" popover class="aaa-option-optimizer-popover">
-		  <button class="aaa-option-optimizer-popover__close" popovertarget="'.$id.'" popovertargetaction="hide">X</button>
+		  <button class="aaa-option-optimizer-popover__close" popovertarget="' . $id . '" popovertargetaction="hide">X</button>
 		  ' . esc_html( $string ) .'
 		</div>';
 	}

From 984c1a12befdae98a420b184a0fd7c61009405dc Mon Sep 17 00:00:00 2001
From: Joost de Valk <joost@altha.nl>
Date: Fri, 19 Apr 2024 11:32:07 +0200
Subject: [PATCH 3/5] Stick to plain CSS and clean up CS for PHP

---
 css/style.css            | 36 +++++++++++++++++-------------------
 css/style.css.map        |  1 -
 css/style.min.css        |  1 -
 css/style.scss           | 25 -------------------------
 src/class-admin-page.php | 27 ++++++++++++++++-----------
 5 files changed, 33 insertions(+), 57 deletions(-)
 delete mode 100644 css/style.css.map
 delete mode 100644 css/style.min.css
 delete mode 100644 css/style.scss

diff --git a/css/style.css b/css/style.css
index 6db05ad..b64de29 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,27 +1,25 @@
 .aaa-option-optimizer-popover {
-  font-family: sans-serif;
-  overflow: visible;
-  padding: 40px 40px 20px 20px;
-  position: fixed;
-  word-wrap: break-word;
-  max-width: 80%;
-  min-height: 200px;
+	font-family: sans-serif;
+	overflow: visible;
+	padding: 40px 40px 20px 20px;
+	position: fixed;
+	word-wrap: break-word;
+	max-width: 80%;
+	min-height: 200px;
 }
 .aaa-option-optimizer-popover::backdrop {
-  background: rgba(0, 0, 0, 0.75);
+	background: rgba(0, 0, 0, 0.75);
 }
 .aaa-option-optimizer-popover__close {
-  background: none !important;
-  border: none;
-  padding: 5px;
-  margin: 5px;
-  z-index: 10;
-  position: absolute;
-  top: 0;
-  right: 0;
+	background: none !important;
+	border: none;
+	padding: 5px;
+	margin: 5px;
+	z-index: 10;
+	position: absolute;
+	top: 0;
+	right: 0;
 }
 .aaa-option-optimizer-popover__close:hover {
-  cursor: pointer;
+	cursor: pointer;
 }
-
-/*# sourceMappingURL=style.css.map */
diff --git a/css/style.css.map b/css/style.css.map
deleted file mode 100644
index 9844e8b..0000000
--- a/css/style.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE","file":"style.css"}
\ No newline at end of file
diff --git a/css/style.min.css b/css/style.min.css
deleted file mode 100644
index 4805cd6..0000000
--- a/css/style.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.aaa-option-optimizer-popover{font-family:sans-serif;overflow:visible;padding:40px 40px 20px 20px;position:fixed;word-wrap:break-word;max-width:80%;min-height:200px}.aaa-option-optimizer-popover::backdrop{background:rgba(0,0,0,0.75)}.aaa-option-optimizer-popover__close{background:none !important;border:0;padding:5px;margin:5px;z-index:10;position:absolute;top:0;right:0}.aaa-option-optimizer-popover__close:hover{cursor:pointer}
\ No newline at end of file
diff --git a/css/style.scss b/css/style.scss
deleted file mode 100644
index 88e678f..0000000
--- a/css/style.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.aaa-option-optimizer-popover {
-  font-family: sans-serif;
-  overflow: visible;
-  padding: 40px 40px 20px 20px;
-  position: fixed;
-  word-wrap: break-word;
-  max-width: 80%;
-  min-height: 200px;
-  &::backdrop {
-    background: rgb(0 0 0 / 75%);
-  }
-  &__close {
-    background: none!important;
-    border: none;
-    padding: 5px;
-    margin: 5px;
-    z-index: 10;
-    position: absolute;
-    top: 0;
-    right: 0;
-    &:hover {
-      cursor: pointer;
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/class-admin-page.php b/src/class-admin-page.php
index 874a589..00b7720 100644
--- a/src/class-admin-page.php
+++ b/src/class-admin-page.php
@@ -34,16 +34,19 @@ public function add_admin_page() {
 
 	/**
 	 * Enqueue our scripts.
+	 *
+	 * @param string $hook The current page hook.
+	 *
+	 * @return void
 	 */
 	public function enqueue_scripts( $hook ) {
-		error_log($hook);
-		if ( $hook !== 'tools_page_aaa-option-optimizer') {
+		if ( $hook !== 'tools_page_aaa-option-optimizer' ) {
 			return;
 		}
 
 		wp_enqueue_style(
 			'aaa-option-optimizer',
-			plugin_dir_url( AAA_OPTION_OPTIMIZER_FILE ) . 'css/style.min.css',
+			plugin_dir_url( AAA_OPTION_OPTIMIZER_FILE ) . 'css/style.css',
 			[],
 			'2.0.1'
 		);
@@ -223,6 +226,7 @@ function ( $value, $key ) {
 				echo '<tr id="option_' . esc_attr( str_replace( ':', '', str_replace( '.', '', $option ) ) ) . '"><td>' . esc_html( $option ) . '</td>';
 				echo '<td>' . esc_html( $this->get_length( $value ) ) . 'KB</td>';
 				echo '<td class="value">';
+				// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- output escaped in get_popover_html.
 				echo $this->get_popover_html( $option, $value );
 				echo '</td>';
 				echo '<td><button class="button remove-autoload" data-option="' . esc_attr( $option ) . '">' . esc_html__( 'Remove Autoload', 'aaa-option-optimizer' ) . '</button> ';
@@ -254,6 +258,7 @@ function ( $value, $key ) {
 				echo '<td>' . esc_html( $option ) . '</td>';
 				echo '<td>' . esc_html( $this->get_length( $arr['value'] ) ) . 'KB</td>';
 				echo '<td class="value">';
+				// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- output escaped in get_popover_html.
 				echo $this->get_popover_html( $option, $arr['value'] );
 				echo '</td>';
 				echo '<td>' . esc_html( $arr['count'] ) . '</td>';
@@ -291,21 +296,21 @@ function ( $value, $key ) {
 	}
 
 	/**
-	 * Get html to show a popover
+	 * Get html to show a popover.
 	 *
-	 * @param string $id
-	 * @param mixed  $value
+	 * @param string $id    The id of the popover.
+	 * @param mixed  $value The value to show.
 	 *
 	 * @return string
 	 */
 	private function get_popover_html( string $id, $value ): string {
-		$string = is_string($value) ? $value : json_encode($value);
-		$id = 'aaa-option-optimizer-' . esc_attr($id);
+		$string = is_string( $value ) ? $value : wp_json_encode( $value );
+		$id     = 'aaa-option-optimizer-' . esc_attr( $id );
 		return '
-		<button class="button" popovertarget="'.$id.'">' . esc_html__( 'Show value', 'aaa-option-optimizer' ) . '</button>
-		<div id="'.$id.'" popover class="aaa-option-optimizer-popover">
+		<button class="button" popovertarget="' . $id . '">' . esc_html__( 'Show value', 'aaa-option-optimizer' ) . '</button>
+		<div id="' . $id . '" popover class="aaa-option-optimizer-popover">
 		  <button class="aaa-option-optimizer-popover__close" popovertarget="' . $id . '" popovertargetaction="hide">X</button>
-		  ' . esc_html( $string ) .'
+		  ' . esc_html( $string ) . '
 		</div>';
 	}
 }

From 89d736fe62cd1d28a09454b5c3e0d57b972db662 Mon Sep 17 00:00:00 2001
From: Joost de Valk <joost@altha.nl>
Date: Fri, 19 Apr 2024 11:32:43 +0200
Subject: [PATCH 4/5] Exclude css from CS

---
 phpcs.xml.dist | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/phpcs.xml.dist b/phpcs.xml.dist
index fe65fb5..87b712e 100644
--- a/phpcs.xml.dist
+++ b/phpcs.xml.dist
@@ -20,7 +20,7 @@
 
 	<!-- Exclude the Coverage output directory. -->
 	<exclude-pattern>/coverage/*</exclude-pattern>
-
+	<exclude-pattern>/css/*</exclude-pattern>
 	<exclude-pattern>/js/vendor/*</exclude-pattern>
 
 	<!-- Exclude minified Javascript files. -->

From 0c93c5aebceefe767d2559a2c41fd689effd8508 Mon Sep 17 00:00:00 2001
From: Joost de Valk <joost@altha.nl>
Date: Fri, 19 Apr 2024 11:52:12 +0200
Subject: [PATCH 5/5] Further improvements

---
 css/style.css            | 26 ++++++++++++++++++++++++++
 js/admin-script.js       | 22 ++++++++++++++--------
 phpcs.xml.dist           |  1 -
 src/class-admin-page.php | 21 +++++++--------------
 4 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/css/style.css b/css/style.css
index b64de29..dc25e3c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,22 @@
+.aaa_option_table {
+	margin-left: -5px;
+	border-spacing: 0;
+}
+.aaa_option_table td, .aaa_option_table th {
+	padding: 5px 10px 5px 5px;
+	text-align: left;
+	width: 25%;
+}
+.aaa_option_table tr:nth-child(even) {
+	background-color: #fff;
+}
+.aaa_option_table tr:hover {
+	background-color: #ddd;
+}
+div.dt-container .dt-input {
+	padding: 5px 20px 5px 10px !important;
+	max-width: none !important;
+}
 .aaa-option-optimizer-popover {
 	font-family: sans-serif;
 	overflow: visible;
@@ -7,6 +26,13 @@
 	max-width: 80%;
 	min-height: 200px;
 }
+.aaa-option-optimizer-popover pre {
+	padding: 10px;
+	min-width: 300px;
+	border: 1px solid #ccc;
+	background-color: #eee;
+	overflow: auto;
+}
 .aaa-option-optimizer-popover::backdrop {
 	background: rgba(0, 0, 0, 0.75);
 }
diff --git a/js/admin-script.js b/js/admin-script.js
index f5b8c58..d07fad6 100644
--- a/js/admin-script.js
+++ b/js/admin-script.js
@@ -7,18 +7,20 @@
 jQuery( document ).ready(
 	function ($) {
 		if ( $( '#unused_options_table' ).length ) {
-			var table1 = new DataTable( '#unused_options_table', { responsive: true, columns: [ { width: '20%' }, { searchable: false, width: '10%' }, { searchable: false, width: '50%' }, { searchable: false, width: '20%' } ] } );
+			var table1 = new DataTable( '#unused_options_table', { responsive: true, columns: [ { width: '30%' }, { searchable: false, width: '10%' }, { searchable: false, width: '20%' }, { searchable: false, width: '20%' } ] } );
 		}
 		if ( $( '#used_not_autloaded_table' ).length ) {
-			var table2 = new DataTable( '#used_not_autloaded_table', { columns: [ null, { searchable: false }, { searchable: false }, { searchable: false }, { searchable: false } ] } );
+			var table2 = new DataTable( '#used_not_autloaded_table', { columns: [ null, { width: '30%', searchable: false }, { width: '15%', searchable: false }, { width: '15%', searchable: false }, { width: '15%', searchable: false } ] } );
 		}
 		if ( $( '#requested_do_not_exist_table' ).length ) {
 			var table3 = new DataTable( '#requested_do_not_exist_table', { columns: [ null, { searchable: false }, { searchable: false } ] } );
 		}
 
 		// Handle the "Remove Autoload" button click.
-		$( 'table tbody' ).on( 
-			'click', '.add-autoload', function (e) {
+		$( 'table tbody' ).on(
+			'click',
+			'.add-autoload',
+			function (e) {
 				e.preventDefault();
 				var optionName = $( this ).data( 'option' );
 
@@ -45,8 +47,10 @@ jQuery( document ).ready(
 			}
 		);
 
-		$( 'table tbody' ).on( 
-			'click', '.remove-autoload', function (e) {
+		$( 'table tbody' ).on(
+			'click',
+			'.remove-autoload',
+			function (e) {
 				e.preventDefault();
 				console.log( 'test remove-autoload' );
 				var optionName = $( this ).data( 'option' );
@@ -75,8 +79,10 @@ jQuery( document ).ready(
 		);
 
 		// Handle the "Delete Option" button click.
-		$( 'table tbody' ).on( 
-			'click', '.delete-option', function (e) {
+		$( 'table tbody' ).on(
+			'click',
+			'.delete-option',
+			function (e) {
 				e.preventDefault();
 				var optionName = $( this ).data( 'option' );
 
diff --git a/phpcs.xml.dist b/phpcs.xml.dist
index 87b712e..79a9ab1 100644
--- a/phpcs.xml.dist
+++ b/phpcs.xml.dist
@@ -20,7 +20,6 @@
 
 	<!-- Exclude the Coverage output directory. -->
 	<exclude-pattern>/coverage/*</exclude-pattern>
-	<exclude-pattern>/css/*</exclude-pattern>
 	<exclude-pattern>/js/vendor/*</exclude-pattern>
 
 	<!-- Exclude minified Javascript files. -->
diff --git a/src/class-admin-page.php b/src/class-admin-page.php
index 00b7720..dea7be2 100644
--- a/src/class-admin-page.php
+++ b/src/class-admin-page.php
@@ -171,15 +171,6 @@ function ( $value, $key ) {
 		}
 
 		// Start HTML output.
-		echo '<style>
-			.aaa_option_table { margin-left: -5px; border-spacing: 0; }
-			.aaa_option_table td, .aaa_option_table th { padding: 5px 10px 5px 5px; text-align: left; width: 25%; }
-			.aaa_option_table tr:nth-child(even) { background-color: #fff; }
-			.aaa_option_table tr:hover { background-color: #ddd; }
-			.aaa_option_table td.value code { display:block; max-width: 200px; height: 20px; overflow: hidden; }
-			div.dt-container .dt-input { padding: 5px 20px 5px 10px !important; max-width: none !important; }
-
-		</style>';
 		echo '<div class="wrap"><h1>' . esc_html__( 'AAA Option Optimizer', 'aaa-option-optimizer' ) . '</h1>';
 
 		global $wpdb;
@@ -298,19 +289,21 @@ function ( $value, $key ) {
 	/**
 	 * Get html to show a popover.
 	 *
-	 * @param string $id    The id of the popover.
+	 * @param string $name  The name of the option, used in the id of the popover.
 	 * @param mixed  $value The value to show.
 	 *
 	 * @return string
 	 */
-	private function get_popover_html( string $id, $value ): string {
+	private function get_popover_html( string $name, $value ): string {
 		$string = is_string( $value ) ? $value : wp_json_encode( $value );
-		$id     = 'aaa-option-optimizer-' . esc_attr( $id );
+		$id     = 'aaa-option-optimizer-' . esc_attr( $name );
 		return '
 		<button class="button" popovertarget="' . $id . '">' . esc_html__( 'Show value', 'aaa-option-optimizer' ) . '</button>
 		<div id="' . $id . '" popover class="aaa-option-optimizer-popover">
-		  <button class="aaa-option-optimizer-popover__close" popovertarget="' . $id . '" popovertargetaction="hide">X</button>
-		  ' . esc_html( $string ) . '
+		<button class="aaa-option-optimizer-popover__close" popovertarget="' . $id . '" popovertargetaction="hide">X</button>' .
+		// translators: %s is the name of the option.
+		'<p><strong>' . sprintf( esc_html__( 'Value of %s', 'aaa-option-optimizer' ), '<code>' . esc_html( $name ) . '</code>' ) . '</strong></p>
+		<pre>' . esc_html( $string ) . '</pre>
 		</div>';
 	}
 }