Merge pull request #4661 from zaggino/issue4602

Fix for issue 4602.

src/htmlContent/search-panel.html

@@ -1,6 +1,6 @@
 <div id="search-results" class="bottom-panel vert-resizable top-resizer no-focus">
     <div class="toolbar simple-toolbar-layout">
-        <div class="title" id="search-result-summary"></div>
+        <div class="title"></div>
         <a href="#" class="close">&times;</a>
     </div>
     <div class="table-container resizable-content"></div>

src/htmlContent/search-replace-panel.html

@@ -1,8 +1,16 @@
 <div id="replace-all-results" class="bottom-panel vert-resizable top-resizer no-focus">
     <div class="toolbar simple-toolbar-layout">
         <input type="checkbox" class="check-all" />
-        <div class="title"></div>
-        <button class="btn small replace-checked">{{BUTTON_REPLACE}}</button>
+        <div class="title">
+            <div class="fixed-col">{{FIND_REPLACE_TITLE_PART1}}</div>
+            <div class="contracting-col replace-what"></div>
+            <div class="fixed-col">{{FIND_REPLACE_TITLE_PART2}}</div>
+            <div class="contracting-col replace-with"></div>
+            <div class="fixed-col replace-summary"></div>
+            <div class="replace-col">
+                <button class="btn small replace-checked">{{BUTTON_REPLACE}}</button>
+            </div>
+        </div>
         <a href="#" class="close">&times;</a>
     </div>
     <div class="table-container resizable-content"></div>

src/htmlContent/search-summary.html

@@ -1,8 +1,14 @@
-{{{summary}}}
+<div class="fixed-col">{{Strings.FIND_IN_FILES_TITLE_PART1}}</div>
+<div class="contracting-col">{{query}}</div>
+<div class="fixed-col">{{Strings.FIND_IN_FILES_TITLE_PART2}}</div>
+<div class="contracting-col">{{{scope}}}</div>
+<div class="fixed-col">{{{summary}}}</div>
 {{#hasPages}}
+<div class="pagination-col">
     <span class="first-page {{^hasPrev}}disabled{{/hasPrev}}"></span>
     <span class="prev-page {{^hasPrev}}disabled{{/hasPrev}}"></span>
     {{{results}}}
     <span class="next-page {{^hasNext}}disabled{{/hasNext}}"></span>
     <span class="last-page {{^hasNext}}disabled{{/hasNext}}"></span>
+</div>
 {{/hasPages}}

src/nls/root/strings.js

@@ -129,9 +129,13 @@ define({
     "NO_UPDATE_TITLE"                   : "You're up to date!",
     "NO_UPDATE_MESSAGE"                 : "You are running the latest version of {APP_NAME}.",
 
-    "FIND_REPLACE_TITLE"                : "Replace \"{0}\" with \"{1}\" — {3} {2} matches",
+    "FIND_REPLACE_TITLE_PART1"          : "Replace \"",
+    "FIND_REPLACE_TITLE_PART2"          : "\" with \"",
+    "FIND_REPLACE_TITLE_PART3"          : "\" — {2} {0} {1}",
 
-    "FIND_IN_FILES_TITLE"               : "\"{4}\" found {5} — {0} {1} in {2} {3}",
+    "FIND_IN_FILES_TITLE_PART1"         : "\"",
+    "FIND_IN_FILES_TITLE_PART2"         : "\" found",
+    "FIND_IN_FILES_TITLE_PART3"         : "— {0} {1} in {2} {3}",
     "FIND_IN_FILES_SCOPED"              : "in <span class='dialog-filename'>{0}</span>",
     "FIND_IN_FILES_NO_SCOPE"            : "in project",
     "FIND_IN_FILES_FILE"                : "file",

src/search/FindInFiles.js

@@ -328,25 +328,26 @@ define(function (require, exports, module) {
 
             // This text contains some formatting, so all the strings are assumed to be already escaped
             var summary = StringUtils.format(
-                Strings.FIND_IN_FILES_TITLE,
+                Strings.FIND_IN_FILES_TITLE_PART3,
                 numMatchesStr,
                 (numMatches > 1) ? Strings.FIND_IN_FILES_MATCHES : Strings.FIND_IN_FILES_MATCH,
                 numFiles,
-                (numFiles > 1 ? Strings.FIND_IN_FILES_FILES : Strings.FIND_IN_FILES_FILE),
-                StringUtils.htmlEscape(currentQuery),
-                currentScope ? _labelForScope(currentScope) : ""
+                (numFiles > 1 ? Strings.FIND_IN_FILES_FILES : Strings.FIND_IN_FILES_FILE)
             );
 
             // The last result index displayed
             var last = currentStart + RESULTS_PER_PAGE > numMatches ? numMatches : currentStart + RESULTS_PER_PAGE;
 
             // Insert the search summary
             $searchSummary.html(Mustache.render(searchSummaryTemplate, {
+                query:    currentQuery,
+                scope:    currentScope ? " " + _labelForScope(currentScope) + " " : "",
                 summary:  summary,
                 hasPages: numMatches > RESULTS_PER_PAGE,
                 results:  StringUtils.format(Strings.FIND_IN_FILES_PAGING, currentStart + 1, last),
                 hasPrev:  currentStart > 0,
-                hasNext:  last < numMatches
+                hasNext:  last < numMatches,
+                Strings:  Strings
             }));
 
             // Create the results template search list
@@ -689,7 +690,7 @@ define(function (require, exports, module) {
         searchResultsPanel = PanelManager.createBottomPanel("find-in-files.results", $(panelHtml));
 
         $searchResults = $("#search-results");
-        $searchSummary = $("#search-result-summary");
+        $searchSummary = $searchResults.find(".title");
         $searchContent = $("#search-results .table-container");
     });
 

src/search/FindReplace.js

@@ -62,6 +62,9 @@ define(function (require, exports, module) {
 
     /** @type {$.Element} jQuery elements used in the replaceAll panel */
     var $replaceAllContainer,
+        $replaceAllWhat,
+        $replaceAllWith,
+        $replaceAllSummary,
         $replaceAllTable;
 
     var modalBar,
@@ -363,16 +366,18 @@ define(function (require, exports, module) {
         }
 
         // This text contains some formatting, so all the strings are assumed to be already escaped
-        var summary = StringUtils.format(
-            Strings.FIND_REPLACE_TITLE,
-            StringUtils.htmlEscape(replaceWhat.toString()),
-            StringUtils.htmlEscape(replaceWith.toString()),
-            results.length,
-            results.length >= FIND_REPLACE_MAX ? Strings.FIND_IN_FILES_MORE_THAN : ""
-        );
+        var resultsLength = results.length,
+            summary = StringUtils.format(
+                Strings.FIND_REPLACE_TITLE_PART3,
+                resultsLength,
+                resultsLength > 1 ? Strings.FIND_IN_FILES_MATCHES : Strings.FIND_IN_FILES_MATCH,
+                resultsLength >= FIND_REPLACE_MAX ? Strings.FIND_IN_FILES_MORE_THAN : ""
+            );
 
         // Insert the search summary
-        $replaceAllContainer.find(".title").html(summary);
+        $replaceAllWhat.text(replaceWhat.toString());
+        $replaceAllWith.text(replaceWith.toString());
+        $replaceAllSummary.html(summary);
 
         // All checkboxes are checked by default
         $replaceAllContainer.find(".check-all").prop("checked", true);
@@ -538,6 +543,9 @@ define(function (require, exports, module) {
         var panelHtml        = Mustache.render(searchReplacePanelTemplate, Strings);
         replaceAllPanel      = PanelManager.createBottomPanel("findReplace-all.panel", $(panelHtml), 100);
         $replaceAllContainer = replaceAllPanel.$panel;
+        $replaceAllWhat      = $replaceAllContainer.find(".replace-what");
+        $replaceAllWith      = $replaceAllContainer.find(".replace-with");
+        $replaceAllSummary   = $replaceAllContainer.find(".replace-summary");
         $replaceAllTable     = $replaceAllContainer.children(".table-container");
 
         // Attach events to the panel

src/styles/brackets.less

@@ -730,7 +730,30 @@ a, img {
 
 /* Find in Files results panel - temporary UI, to be replaced with a richer search feature later */
 
-#search-result-summary {
+#search-results .title, #replace-all-results .title {
+    .sane-box-model;
+    padding-right: 20px;
+    width: 100%;
+
+    .flex-box;
+    .contracting-col {
+        .flex-item(0);
+        min-width: 1px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .fixed-col {
+        .flex-item(0);
+    }
+    .pagination-col {
+        .flex-item(1);
+        min-width: 100px;
+    }
+    .replace-col {
+        .flex-item(1);
+        min-width: 120px;
+        padding-left: 20px;
+    }
     .first-page,
     .prev-page,
     .next-page,
@@ -770,9 +793,11 @@ a, img {
     }
 }
 
-#search-results td {
-    padding-left: 3px;
-    vertical-align: baseline;
+#search-results {
+    td {
+        padding-left: 3px;
+        vertical-align: baseline;
+    }
 }
 
 /* Find-Replace All UI */
@@ -782,7 +807,9 @@ a, img {
         margin: 0px 22px 0px 6px;
     }
     .title {
-        margin-right: 10px;
+        > div {
+            line-height: 1.8em;
+        }
     }
     table {
         td.checkbox-column {

src/styles/brackets_mixins.less

@@ -21,6 +21,19 @@
 
 /* Brackets mixins */
 
+/* Helpers for working with flex layouts */
+/* see: https://developer.mozilla.org/en-US/docs/Web/CSS/flex */
+.flex-box(@direction: row) {
+    display: -webkit-flex;
+    -webkit-flex-direction: @direction;
+    display: flex;
+    flex-direction: @direction;
+}
+.flex-item(@grow: 0, @shrink: 1, @basis: auto) {
+    -webkit-flex: @grow @shrink @basis;
+    flex: @grow @shrink @basis;
+}
+
 /* Helpers for working with box layouts */
 .box {
     display: -webkit-box;