Fine tune click-to-load widget

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.
gorhill · Nov 14, 2020 · 46d7f8a · 46d7f8a
1 parent 54c8a0a
commit 46d7f8a
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
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>