message: Improve the copy codeblock and playground buttons.

This commit improves the copy codeblock button and playground button
in the codeblocks to improve their visibility, particularly when on
top of some code.

Previously, the text under these buttons was difficult to select, as the
buttons would block the selection. This commit now hides these buttons
when a user clicks on any part of the codeblock, allowing to view the
code without any distractions, as well as, allowing the user to select
any part of the code.

web/src/playground_links_popover.ts

@@ -111,22 +111,16 @@ function register_click_handlers(): void {
             if (playground_info === undefined) {
                 return;
             }
-            // We do the code extraction here and set the target href expanding
+            // We do the code extraction here and send user to the target destination,
-            // the url_template with the extracted code. Depending on whether
+            // obtained by expanding the url_template with the extracted code.
-            // the language has multiple playground links configured, a popover
+            // Depending on whether the language has multiple playground links configured,
-            // is shown.
+            // a popover is shown.
             const extracted_code = $codehilite_div.find("code").text();
             if (playground_info.length === 1 && playground_info[0] !== undefined) {
                 const url_template = url_template_lib.parse(playground_info[0].url_template);
-                $view_in_playground_button.attr(
+                const playground_url = url_template.expand({code: extracted_code});
-                    "href",
+                window.open(playground_url, "_blank", "noopener,noreferrer");
-                    url_template.expand({code: extracted_code}),
-                );
             } else {
-                // Remove the href attribute that was set when there was only
-                // one playground link, so that it doesn't interfere with the
-                // popover toggle when multiple playground links exist.
-                $view_in_playground_button.removeAttr("href");
                 const playground_store = new Map<number, RealmPlaygroundWithURL>();
                 for (const playground of playground_info) {
                     const url_template = url_template_lib.parse(playground.url_template);

web/styles/rendered_markdown.css

@@ -738,6 +738,14 @@
         &:hover .code-buttons-container {
             visibility: visible;
         }
+
+        /* Hide the code buttons container when the user is
+           clicking on the code block other than the buttons.
+           This allows the user to select part of the the code
+           without the buttons interfering with the selection. */
+        &:active .code-buttons-container:not(:hover) {
+            visibility: hidden;
+        }
     }
 
     & pre code {
@@ -776,50 +784,40 @@
         /* Having absolute positioning here ensures that the element
         doesn't scroll along with the code div in narrow windows */
         position: absolute;
-        top: 5px;
+        top: 4px;
         right: 0;
         padding: 0 4px;
         /* Invisible unless <pre> is hovered. */
         visibility: hidden;
         z-index: 0;
+    }
 
-        &::after {
+    /* The properties of the code_external_link button are copied from the
-            content: " ";
+       copy-btn class in app_components.css. */
-            position: absolute;
+    .code_external_link {
-            height: 100%;
+        display: flex;
-            width: 100%;
+        border-radius: 4px;
-            z-index: -1;
+        color: var(--color-copy-btn);
-            /* Blur the background behind the button container */
+        /* 2px at 16px/1em */
-            backdrop-filter: blur(5px);
+        padding: 0.125em;
-            /* Use a radial gradient to avoid obvious hard edges
+        cursor: pointer;
-               to the blur. */
+
-            mask-image: radial-gradient(
+        &:hover,
-                farthest-corner,
+        :focus-visible {
-                hsl(0deg 0% 0% / 100%),
+            background-color: var(--color-copy-btn-square-bg-hover);
-                hsl(0deg 0% 0% / 50%)
+        }
-            );
+
+        &:active {
+            background-color: var(--color-copy-btn-square-bg-active);
+            color: var(--color-copy-btn-square-active);
         }
     }
 
+    .copy_codeblock,
     .code_external_link {
-        /* Match the apparent size of the playground icon
+        font-size: 1.1363em;
-           to the copy-to-clipboard icon. */
+        border: 1px solid var(--color-copy-btn-square-bg-active);
-        font-size: 16px;
+        backdrop-filter: blur(20px);
-        /* Center the icon vertically in the link container. */
-        display: flex;
-        align-content: center;
-        /* The font-icon footprint still requires 2px of
-           top padding to get better alignment with the
-           copy-to-clipboard icon. */
-        padding-top: 2px;
-        /* The default icon and on-hover colors are inherited from <a> tag.
-        so we set our own to match the copy-to-clipbord icon */
-        color: hsl(0deg 0% 47%);
-
-        &:hover {
-            color: hsl(200deg 100% 40%);
-            text-decoration: none;
-        }
     }
 }
 

web/templates/code_buttons_container.hbs

@@ -1,8 +1,11 @@
 <div class="code-buttons-container">
-    <span class="copy_codeblock copy-btn" data-tippy-content="{{t 'Copy code' }}" aria-label="{{t 'Copy code' }}" role="button">
+    <span class="copy_codeblock copy-btn copy-btn-square" data-tippy-content="{{t 'Copy code' }}" aria-label="{{t 'Copy code' }}" role="button">
         <i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
     </span>
     {{~#if show_playground_button~}}
-    {{~> view_code_in_playground~}}
+    {{! Display the "view code in playground" option for code blocks}}
+    <span class="code_external_link">
+        <i class="zulip-icon zulip-icon-external-link playground-links-popover-container"></i>
+    </span>
     {{~/if~}}
 </div>

web/templates/view_code_in_playground.hbs

@@ -1,2 +0,0 @@
-{{! Display the "view code in playground" option for code blocks}}
-<a target="_blank" rel="noopener noreferrer" class="code_external_link"><i class="fa fa-external-link playground-links-popover-container"></i></a>