Merge pull request #1914 from adobe/pflynn/red-no-results

When Find has no results, turn search field bg color red

Author: redmunds

src/search/FindReplace.js

@@ -95,6 +95,7 @@ define(function (require, exports, module) {
     }
 
     function findNext(cm, rev) {
+        var found = true;
         cm.operation(function () {
             var state = getSearchState(cm);
             var cursor = getSearchCursor(cm, state.query, rev ? state.posFrom : state.posTo);
@@ -105,13 +106,15 @@ define(function (require, exports, module) {
                 // No result found, period: clear selection & bail
                 if (!cursor.find(rev)) {
                     cm.setCursor(cm.getCursor());  // collapses selection, keeping cursor in place to avoid scrolling
+                    found = false;
                     return;
                 }
             }
             cm.setSelection(cursor.from(), cursor.to());
             state.posFrom = cursor.from();
             state.posTo = cursor.to();
         });
+        return found;
     }
 
     function clearSearch(cm) {
@@ -170,7 +173,9 @@ define(function (require, exports, module) {
                 }
 
                 state.posFrom = state.posTo = searchStartPos;
-                findNext(cm, rev);
+                var foundAny = findNext(cm, rev);
+                
+                getDialogTextField().toggleClass("no-results", !foundAny);
             });
         }
 

src/styles/brackets.less

@@ -711,40 +711,47 @@ ins.jstree-icon {
     .code-font();
 }
 
-/* Styles for the search dialog--this is temporary, only for debugging */
+
+/* Find & Replace search bars - temporary UI, to be replaced with a richer search feature later */
 
 .CodeMirror-dialog {
-  position: relative;
-  z-index: @z-index-cm-dialog-override;
+    position: relative;
+    z-index: @z-index-cm-dialog-override;
 }
 
 .CodeMirror-dialog > div {
-  font-family: @fontstack-sans-serif;
-  position: absolute;
-  top: 0; left: 0; right: 0;
-  background: @background-color-2;
-  color: @content-color;
-  border-bottom: 1px solid @bc-gray;
-  .box-shadow(0 1px 3px 0 fadeout(@bc-black, 70%));
-  z-index: 1;
-  padding: .5em .8em;
-  overflow: hidden;
+    font-family: @fontstack-sans-serif;
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    background: @background-color-2;
+    color: @content-color;
+    border-bottom: 1px solid @bc-gray;
+    .box-shadow(0 1px 3px 0 fadeout(@bc-black, 70%));
+    z-index: 1;
+    padding: .5em .8em;
+    overflow: hidden;
 }
 
 .CodeMirror-dialog input {
-  font-family: @fontstack-sans-serif;
-  border: 1px solid @content-color-weaker;
-  outline: none;
-  background: @background-color-3;
-  width: 20em;
-  margin: .3em .3em;
-  color: inherit;
+    font-family: @fontstack-sans-serif;
+    border: 1px solid @content-color-weaker;
+    outline: none;
+    background: @background-color-3;
+    width: 20em;
+    margin: .3em .3em;
+    color: inherit;
+    &.no-results {
+        background-color: mix(@background-color-3, #FF0000, 70%);
+    }
 }
 
 .CodeMirror-searching {
-  background-color: inherit;
+    background-color: inherit;
 }
 
+
+/* Quick Open search bar & dropdown */
+
 .smart_autocomplete_container {
 
     border: 1px solid #999;
@@ -772,8 +779,4 @@ ins.jstree-icon {
 
 li.smart_autocomplete_highlight {
     background-color: #e0f0fa;
-}
-
-.clickable-link {
-    cursor: pointer;
-}
+}

src/styles/brackets_patterns_override.less

@@ -363,6 +363,11 @@
     font-weight: @font-weight-semibold;
 }
 
+/* Any Dialog text in this style is automatically turned into a link that opens in the browser. Use data-href for the link's target. */
+.clickable-link {
+    cursor: pointer;
+}
+
 .btn {
     font-size: 16px;
     font-weight: @font-weight-semibold;