Fine tune click-to-load widget

gorhill · gorhill · commit 46d7f8a70c93 · 2020-11-14T08:34:47.000-05:00
Notably, add clickable link to open the widget
in its own tab. Also, allows the URL to be text-
selected so that it becomes possible to use the
selection in a browser contextual menu's "Open
in a new tab" option.
diff --git a/src/css/click2load.css b/src/css/click2load.css
@@ -42,7 +42,10 @@ body {
     overflow: hidden;
     word-break: break-all;
     }
-
+#frameURL > a {
+    font-size: 1rem;
+    }
+    
 #clickToLoad {
     cursor: default;
     margin-bottom: 1em;
diff --git a/src/js/click2load.js b/src/js/click2load.js
@@ -34,7 +34,8 @@ const url = new URL(self.location.href);
 const frameURL = url.searchParams.get('url');
 const frameURLElem = document.getElementById('frameURL');
 
-frameURLElem.textContent = frameURL;
+frameURLElem.children[0].textContent = frameURL;
+frameURLElem.children[1].href = frameURL;
 
 const onWindowResize = function() {
     document.body.style.width = `${self.innerWidth}px`;
@@ -47,7 +48,7 @@ self.addEventListener('resize', onWindowResize);
 
 document.body.addEventListener('click', ev => {
     if ( ev.isTrusted === false ) { return; }
-    //if ( ev.target === frameURLElem ) { return; }
+    if ( ev.target.closest('#frameURL') !== null ) { return; }
     vAPI.messaging.send('default', {
         what: 'clickToLoad',
         frameURL,
diff --git a/src/web_accessible_resources/click2load.html b/src/web_accessible_resources/click2load.html
@@ -6,15 +6,17 @@
 <title>uBlock Origin Click-to-Load</title>
 <link rel="stylesheet" href="../css/themes/default.css">
 <link rel="stylesheet" href="../css/common.css">
+<link rel="stylesheet" href="../css/fa-icons.css">
 <link rel="stylesheet" href="../css/click2load.css">
 </head>
 
 <body>
 
 <span class="logo"><img src="../img/ublock.svg"></span>
 <span id="clickToLoad" data-i18n="clickToLoad"></span>
-<div id="frameURL"></div>
+<div id="frameURL"><span></span>&nbsp;<a class="fa-icon" href="" rel="noreferrer noopener" target="_blank">external-link</a></div>
 
+<script src="../js/fa-icons.js"></script>
 <script src="../js/vapi.js"></script>
 <script src="../js/vapi-common.js"></script>
 <script src="../js/vapi-client.js"></script>
