Highlight the URL on click

Author: patch-malone

chromium/pages/cancel/index.html

@@ -12,7 +12,7 @@
       <h1 id="https-everywhere"><img src="../../images/banner-red.png" alt="HTTPS Everywhere" /></h1>
       <p data-i18n="cancel_he_blocking_explainer"></p>
       <p id="url-paragraph">
-        <span id="url-label">URL: </span><a href="#" id="url-value">PLACEHOLDER</a>
+        <span id="url-label">URL: </span><span id="url-value">PLACEHOLDER</span>
       </p>
       <form method="get" action="#" id="url-form">
         <button name="open" formaction="#" id="open-url-button">Open insecurely and do not ask again</button>

chromium/pages/cancel/style.css

@@ -28,7 +28,7 @@ form button{
   padding: 8px 16px;
 }
 
-#open-url-button {
+#open-url-button{
 	cursor: pointer;
 	display: inline-block;
 	margin: 0;
@@ -43,3 +43,8 @@ form button{
 	border: 0;
 	border-radius: 5px;
 }
+
+#url-value{
+  -moz-user-select: text;
+  user-select: text;
+}

chromium/pages/cancel/ux.js

@@ -16,6 +16,19 @@ document.addEventListener("DOMContentLoaded", () => {
   displayURL();
 });
 
+/**
+ * Highlights the content (text, images, etc.) of an element
+ * @param {Element}
+ * @returns {void}
+ */
+function highlightElementContent(element) {
+  if (window.getSelection) {
+    var range = document.createRange();
+    range.selectNode(element);
+    window.getSelection().addRange(range);
+  }
+}
+
 function replaceLink(explainer) {
   observer.disconnect();
   const linkText = chrome.i18n.getMessage("cancel_he_blocking_network");
@@ -28,14 +41,17 @@ function replaceLink(explainer) {
 function displayURL() {
   const cancelURL = new URL(window.location.href);
   const originURL = decodeURI(cancelURL.searchParams.get('originURL'));
-  const originURLLinkElement = document.getElementById('url-value');
+  const originURLLink = document.getElementById('url-value');
   const originURLForm = document.getElementById('url-form');
   const openURLButton = document.getElementById('open-url-button');
 
-  originURLLinkElement.href = originURL;
-  originURLLinkElement.innerText = originURL;
+  originURLLink.innerHTML = originURL;
   openURLButton.formaction = originURL;
 
+  originURLLink.addEventListener("click", function(event) {
+    highlightElementContent(event.target);
+  });
+
   originURLForm.addEventListener("submit", function(event) {
     event.preventDefault();