Use css ellipsis

css/doorhanger.css

@@ -16,7 +16,11 @@ body {
   #password-toolbar .toolbar-text {
     float: left;
     display: inline-block;
-    margin-top: 5px; }
+    margin-top: 5px;
+    width: calc(100% - 180px );
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis; }
   #password-toolbar .passman-btn {
     float: right;
     display: inline-block;

js/ui/doorhanger/doorhanger.js

@@ -66,16 +66,11 @@ $(document).ready(function () {
         }
         var buttons = data.buttons;
         data = data.data;
-        var displayUrl = data.url;
-        console.log(displayUrl.substring(0, 8))
-        if (displayUrl.length > 250) {
-            displayUrl = displayUrl.substring(0, 150) + '...';
-        }
         var username = (data.username) ? data.username : data.email;
         var doorhanger_div = $('<div id="password-toolbar">');
         $('<span>', {
             class: 'toolbar-text',
-            text: data.title + ' ' + username + ' at ' + displayUrl
+            text: data.title + ' ' + username + ' at ' + data.url
         }).appendTo(doorhanger_div);
 
 

style/doorhanger.scss

@@ -22,6 +22,10 @@ body{
     float: left;
     display: inline-block;
     margin-top: 5px;
+    width: calc(100% - 180px );
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .passman-btn {