The following changes address #1 of bug #5686

1. make image meta data strings not wrap
2. add ellipsis to image meta data when clipping
3. add title attribute to allow viewing the full path and meta data when text is clipped.

Author: jhagenst

src/editor/ImageViewer.js

@@ -64,7 +64,9 @@ define(function (require, exports, module) {
             currentPath = $("#img-path").text();
 
         if (currentPath === oldRelPath) {
-            $("#img-path").text(ProjectManager.makeProjectRelativeIfPossible(newName));
+            var newRelName = ProjectManager.makeProjectRelativeIfPossible(newName);
+            $("#img-path").text(newRelName);
+            $("#img-path").attr("title", newRelName);
         }
     }
 
@@ -95,6 +97,7 @@ define(function (require, exports, module) {
         var relPath = ProjectManager.makeProjectRelativeIfPossible(fullPath);
 
         $("#img-path").text(relPath);
+        $("#img-path").attr("title", relPath);
         $("#img-preview").on("load", function () {
             // add dimensions and size
             _naturalWidth = this.naturalWidth;
@@ -107,10 +110,15 @@ define(function (require, exports, module) {
                     if (metadata && metadata.size) {
                         sizeString = " — " + StringUtils.prettyPrintBytes(metadata.size, 2);
                     }
-                    $("#img-data").html(dimensionString + sizeString);
+                    var dimensionAndSize = dimensionString + sizeString;
+                    $("#img-data").html(dimensionAndSize);
+                    $("#img-data").attr("title", dimensionAndSize
+                                        .replace("×", "x")
+                                        .replace("—", "-"));
                 },
                 function (error) {
                     $("#img-data").html(dimensionString);
+                    $("#img-data").attr("title", dimensionString).replace("×", "x");
                 }
             );
             $("#image-holder").show();

src/styles/brackets.less

@@ -282,6 +282,9 @@ a, img {
     #img-path {
         text-align: left;
         .user-select(text);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;        
     }
 
     #img-data::selection,