Fix searchInput UI when there are no search results (firefox-devtools#7608)

Author: nagpalm7

assets/panel/debugger.properties

@@ -450,9 +450,9 @@ editor.searchResults=%d of %d results
 # LOCALIZATION NOTE (editor.singleResult): Copy shown when there is one result.
 editor.singleResult=1 result
 
-# LOCALIZATION NOTE (editor.noResults): Editor Search bar message
+# LOCALIZATION NOTE (editor.noResultsFound): Editor Search bar message
 # for when no results found.
-editor.noResults=No results
+editor.noResultsFound=No results found
 
 # LOCALIZATION NOTE (editor.searchResults.nextResult): Editor Search bar
 # tooltip for traversing to the Next Result

src/components/Editor/SearchBar.js

@@ -231,7 +231,7 @@ class SearchBar extends Component<Props, State> {
     }
 
     if (count == 0) {
-      return L10N.getStr("editor.noResults");
+      return L10N.getStr("editor.noResultsFound");
     }
 
     if (index == -1) {

src/components/Editor/tests/__snapshots__/SearchBar.spec.js.snap

@@ -237,7 +237,7 @@ exports[`showErrorEmoji true if query + no results 1`] = `
     showClose={false}
     showErrorEmoji={true}
     size=""
-    summaryMsg="No results"
+    summaryMsg="No results found"
   />
   <div
     className="search-bottom-bar"

src/components/shared/SearchInput.css

@@ -101,7 +101,7 @@
 }
 
 .search-field input.empty {
-  color: var(--theme-highlight-orange);
+  color: var(--theme-body-color-inactive);
 }
 
 .search-field .summary {
@@ -113,6 +113,7 @@
   align-self: center;
   padding-top: 1px;
   white-space: nowrap;
+  user-select: none;
 }
 
 .search-field .search-nav-buttons {

src/components/shared/SearchInput.js

@@ -104,7 +104,7 @@ class SearchInput extends Component<Props, State> {
   }
 
   renderSvg() {
-    const svgName = this.props.showErrorEmoji ? "sad-face" : "magnifying-glass";
+    const svgName = "magnifying-glass";
     return <Svg name={svgName} />;
   }
 

src/components/shared/tests/__snapshots__/SearchInput.spec.js.snap

@@ -114,7 +114,7 @@ exports[`SearchInput shows svg error emoji 1`] = `
     role="combobox"
   >
     <Svg
-      name="sad-face"
+      name="magnifying-glass"
     />
     <input
       aria-activedescendant=""

src/components/test/__snapshots__/QuickOpenModal.spec.js.snap

@@ -77,16 +77,16 @@ exports[`QuickOpenModal Basic render with mount & searchType = functions 1`] = `
                   role="combobox"
                 >
                   <Svg
-                    name="sad-face"
+                    name="magnifying-glass"
                   >
                     <InlineSVG
-                      className="sad-face "
+                      className="magnifying-glass "
                       element="i"
                       raw={false}
                       src="<svg></svg>"
                     >
                       <i
-                        className="sad-face "
+                        className="magnifying-glass "
                         dangerouslySetInnerHTML={
                           Object {
                             "__html": "<svg></svg>",
@@ -213,16 +213,16 @@ exports[`QuickOpenModal Basic render with mount & searchType = variables 1`] = `
                   role="combobox"
                 >
                   <Svg
-                    name="sad-face"
+                    name="magnifying-glass"
                   >
                     <InlineSVG
-                      className="sad-face "
+                      className="magnifying-glass "
                       element="i"
                       raw={false}
                       src="<svg></svg>"
                     >
                       <i
-                        className="sad-face "
+                        className="magnifying-glass "
                         dangerouslySetInnerHTML={
                           Object {
                             "__html": "<svg></svg>",
@@ -498,16 +498,16 @@ exports[`QuickOpenModal Simple goto search query = :abc & searchType = goto 1`]
                   role="combobox"
                 >
                   <Svg
-                    name="sad-face"
+                    name="magnifying-glass"
                   >
                     <InlineSVG
-                      className="sad-face "
+                      className="magnifying-glass "
                       element="i"
                       raw={false}
                       src="<svg></svg>"
                     >
                       <i
-                        className="sad-face "
+                        className="magnifying-glass "
                         dangerouslySetInnerHTML={
                           Object {
                             "__html": "<svg></svg>",
@@ -1028,16 +1028,16 @@ exports[`QuickOpenModal showErrorEmoji true when goto not numeric ':22k22' 1`] =
                   role="combobox"
                 >
                   <Svg
-                    name="sad-face"
+                    name="magnifying-glass"
                   >
                     <InlineSVG
-                      className="sad-face "
+                      className="magnifying-glass "
                       element="i"
                       raw={false}
                       src="<svg></svg>"
                     >
                       <i
-                        className="sad-face "
+                        className="magnifying-glass "
                         dangerouslySetInnerHTML={
                           Object {
                             "__html": "<svg></svg>",
@@ -1147,16 +1147,16 @@ exports[`QuickOpenModal showErrorEmoji true when no count + query 1`] = `
                   role="combobox"
                 >
                   <Svg
-                    name="sad-face"
+                    name="magnifying-glass"
                   >
                     <InlineSVG
-                      className="sad-face "
+                      className="magnifying-glass "
                       element="i"
                       raw={false}
                       src="<svg></svg>"
                     >
                       <i
-                        className="sad-face "
+                        className="magnifying-glass "
                         dangerouslySetInnerHTML={
                           Object {
                             "__html": "<svg></svg>",