Improve control char rendering and escape button styling (#37094)

Follow-up to #37078.

- Use Unicode Control Pictures](U+2400-U+2421) to render C0 control characters
- Make it work in diff view too
- Replace escape warning emoji with SVG
- Align escape warning button with code lines

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/css/base.css

@@ -17,6 +17,7 @@
   /* images */
   --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9"><path fill-rule="evenodd" d="M11.78.22a.75.75 0 0 1 0 1.061L4.52 8.541a.75.75 0 0 1-1.062 0L.202 5.285a.75.75 0 0 1 1.061-1.061l2.725 2.723L10.718.22a.75.75 0 0 1 1.062 0"/></svg>');
   --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="2" viewBox="0 0 10 2"><path fill-rule="evenodd" d="M0 1a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1" clip-rule="evenodd"/></svg>');
+  --octicon-alert-fill: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575ZM8 5a.75.75 0 0 0-.75.75v2.5a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8 5Zm1 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"/></svg>');
   --octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
   --octicon-x: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.75.75 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.75.75 0 0 1-.734-.215L8 9.06l-3.22 3.22a.75.75 0 0 1-1.042-.018.75.75 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06"/></svg>');
   --select-arrows: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="m4.074 9.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.043 9H4.251a.25.25 0 0 0-.177.427m0-1.957L7.47 4.073a.25.25 0 0 1 .354 0L11.22 7.47a.25.25 0 0 1-.177.426H4.251a.25.25 0 0 1-.177-.426"/></svg>');
@@ -686,6 +687,7 @@ overflow-menu .ui.label {
 }
 
 .lines-num,
+.lines-escape,
 .lines-code {
   font-size: 12px;
   font-family: var(--fonts-monospace);

web_src/css/modules/charescape.css

@@ -1,24 +1,31 @@
 /*
 Show the escaped and hide the real char:
-  <span class="broken-code-point" data-escaped="DEL"><span class="char">{real-char}</span></span>
+  <span class="broken-code-point" data-escaped="␡"><span class="char">{real-char}</span></span>
 Only show the real-char:
   <span class="broken-code-point">{real-char}</span>
 */
-.broken-code-point:not([data-escaped]),
-.broken-code-point[data-escaped]::before {
+.broken-code-point:not([data-escaped]) {
   border-radius: 4px;
   padding: 0 2px;
-  color: var(--color-body);
-  background: var(--color-text-light-1);
+  border: 1px var(--color-yellow) solid;
+}
+
+.broken-code-point[data-escaped] {
+  position: relative;
 }
 
 .broken-code-point[data-escaped]::before {
   visibility: visible;
   content: attr(data-escaped);
+  border-radius: 2px;
+  padding: 0 1px;
+  border: 1px var(--color-yellow) solid;
 }
+
 .broken-code-point[data-escaped] .char {
-  /* make it copyable by selecting the text (AI suggestion, no other solution) */
+  /* keep the original character selectable/copyable while showing the escaped label via ::before */
   position: absolute;
+  left: 0;
   opacity: 0;
   pointer-events: none;
 }
@@ -26,11 +33,11 @@ Only show the real-char:
 /*
 Show the escaped and hide the real-char:
   <span class="unicode-escaped">
-    <span class="escaped-code-point" data-escaped="U+1F600"><span class="char">{real-char}</span></span>
+    <span class="escaped-code-point" data-escaped="[U+1F600]"><span class="char">{real-char}</span></span>
   </span>
 Hide the escaped and show the real-char:
   <span>
-    <span class="escaped-code-point" data-escaped="U+1F600"><span class="char">{real-char}</span></span>
+    <span class="escaped-code-point" data-escaped="[U+1F600]"><span class="char">{real-char}</span></span>
   </span>
 */
 .unicode-escaped .escaped-code-point[data-escaped]::before {

web_src/css/review.css

@@ -15,11 +15,20 @@
   transform: scale(1.1);
 }
 
+.lines-escape .toggle-escape-button {
+  margin: -1px 2px 0;
+}
+
 .lines-escape .toggle-escape-button::before {
-  visibility: visible;
-  content: "⚠️";
-  font-family: var(--fonts-emoji);
-  color: var(--color-red);
+  content: "";
+  display: inline-flex;
+  width: 14px;
+  height: 14px;
+  background-color: var(--color-yellow); /* TODO: maybe it needs a new kind of color, there is no suitable "warning" color in the current palette */
+  mask-image: var(--octicon-alert-fill);
+  -webkit-mask-image: var(--octicon-alert-fill);
+  mask-size: contain;
+  -webkit-mask-size: contain;
 }
 
 .repository .diff-file-box .code-diff td.lines-escape {