Bug 1614972 - make event URLs clickable - make sure all the text from the location is visible, not only the location. r=pmorris
authorMagnus Melin <mkmelin+mozilla@iki.fi>
Thu, 28 May 2020 14:17:46 +0300
changeset 39257 00e93f6c59c33a902d1e853fc96cafcd6b7d21e5
parent 39256 92b5978bce31c5a8b8ddd9c866d8df1ca198c67a
child 39258 53bd3a77386ec329a600c06b6aabc5d344252328
push id402
push userclokep@gmail.com
push dateMon, 29 Jun 2020 20:48:04 +0000
reviewerspmorris
bugs1614972
Bug 1614972 - make event URLs clickable - make sure all the text from the location is visible, not only the location. r=pmorris
calendar/base/content/dialogs/calendar-summary-dialog.js
calendar/base/content/widgets/calendar-item-summary.js
calendar/base/themes/common/dialogs/calendar-event-dialog.css
--- a/calendar/base/content/dialogs/calendar-summary-dialog.js
+++ b/calendar/base/content/dialogs/calendar-summary-dialog.js
@@ -253,19 +253,16 @@ function updateToolbar() {
 function browseDocument() {
   let args = window.arguments[0];
   let item = args.calendarEvent;
   let url = item.getProperty("URL");
   launchBrowser(url);
 }
 
 /**
- * Copy the value of the given link node to the clipboard.
+ * Copy the text content of the given link node to the clipboard.
  *
- * @param {string} linkNode - The node containing the value to copy to the clipboard.
+ * @param {string} labelNode - The label node inside an html:a element.
  */
-function locationCopyLink(linkNode) {
-  if (linkNode) {
-    let linkAddress = linkNode.value;
-    let clipboard = Cc["@mozilla.org/widget/clipboardhelper;1"].getService(Ci.nsIClipboardHelper);
-    clipboard.copyString(linkAddress);
-  }
+function locationCopyLink(labelNode) {
+  let clipboard = Cc["@mozilla.org/widget/clipboardhelper;1"].getService(Ci.nsIClipboardHelper);
+  clipboard.copyString(labelNode.parentNode.getAttribute("href"));
 }
--- a/calendar/base/content/widgets/calendar-item-summary.js
+++ b/calendar/base/content/widgets/calendar-item-summary.js
@@ -575,24 +575,28 @@
      * @param {string} location - The value of the location property.
      */
     updateLocation(location) {
       this.querySelector(".location-row").removeAttribute("hidden");
       let urlMatch = location.match(/(https?:\/\/[^ ]*)/);
       let url = urlMatch && urlMatch[1];
       let itemLocation = this.querySelector(".item-location");
       if (url) {
-        let locationLabel = document.createXULElement("label");
-        locationLabel.setAttribute("class", "item-location-link text-link");
-        locationLabel.setAttribute("context", "location-link-context-menu");
-        locationLabel.setAttribute("value", url);
-        locationLabel.setAttribute("tooltiptext", url);
-        locationLabel.setAttribute("onclick", "launchBrowser(this.getAttribute('value'), event)");
-        locationLabel.setAttribute("oncommand", "launchBrowser(this.getAttribute('value'), event)");
-        itemLocation.replaceWith(locationLabel);
+        let link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
+        link.setAttribute("class", "item-location-link text-link");
+        link.setAttribute("href", url);
+        link.setAttribute("onclick", "launchBrowser(this.getAttribute('href'), event)");
+        link.setAttribute("oncommand", "launchBrowser(this.getAttribute('href'), event)");
+
+        let label = document.createXULElement("label");
+        label.setAttribute("context", "location-link-context-menu");
+        label.textContent = location;
+        link.appendChild(label);
+
+        itemLocation.replaceWith(link);
       } else {
         itemLocation.value = location;
       }
     }
 
     /**
      * Handle window resize event. Rearrange attendees.
      */
--- a/calendar/base/themes/common/dialogs/calendar-event-dialog.css
+++ b/calendar/base/themes/common/dialogs/calendar-event-dialog.css
@@ -206,16 +206,24 @@ label.label {
 #item-title,
 .item-title {
   margin: 0;
   margin-inline-end: 0;
   margin-inline-start: 0;
   padding-inline-start: 4px;
 }
 
+.item-location-link {
+  padding-inline-start: 0;
+}
+
+.item-location-link > label{
+  cursor: pointer;
+}
+
 #todo-status,
 #item-repeat,
 .item-alarm {
   margin: 0;
 }
 
 #event-grid td,
 #event-grid th {