Bug 1601347 - Fix reverse search input jumpiness. r=Honza.

Making the reverse search input not taking into account
for the editor grid layout.
This meant we needed to group icons in their own
element to be able to wrap.

Differential Revision: https://phabricator.services.mozilla.com/D61395

--HG--
extra : moz-landing-system : lando

devtools/client/webconsole/components/App.css

@@ -154,13 +154,21 @@ body {
   background-image: url("chrome://devtools/skin/images/webconsole/editor.svg");
 }
 
-.reverse-search {
+.webconsole-app .reverse-search {
   grid-column: 1 / 2;
   grid-row: -1 / -2;
+  /* Those 2 next lines make it so the element isn't impacting the grid column size, but
+     will still take the whole available space. */
+  width: 0;
+  min-width: 100%;
+  /* Let the reverse search buttons wrap to the next line */
+  flex-wrap: wrap;
+  justify-content: end;
   border-top: 1px solid var(--theme-splitter-color);
   border-inline-end: 1px solid var(--theme-splitter-color);
 }
 
+
 .sidebar {
   display: grid;
   grid-row: 1 / -1;

devtools/client/webconsole/components/Input/ReverseSearchInput.css

@@ -35,6 +35,9 @@
   fill: var(--theme-icon-dimmed-color);
   text-align: match-parent;
   unicode-bidi: plaintext;
+  min-width: 80px;
+  flex-shrink: 1;
+  flex-basis: 0;
 }
 
 .reverse-search:dir(ltr) input {
@@ -58,6 +61,12 @@
   fill: var(--theme-icon-checked-color);
 }
 
+.reverse-search-actions {
+  flex-shrink: 0;
+  display: flex;
+  align-items: baseline;
+}
+
 .reverse-search-info {
   flex-shrink: 0;
   padding: 0 8px;

devtools/client/webconsole/components/Input/ReverseSearchInput.js

@@ -247,18 +247,23 @@ class ReverseSearchInput extends Component {
         onInput: ({ target }) =>
           dispatch(actions.reverseSearchInputChange(target.value)),
       }),
-      this.renderSearchInformation(),
-      this.renderNavigationButtons(),
-      dom.button({
-        className: "devtools-button reverse-search-close-button",
-        title: l10n.getFormatStr(
-          "webconsole.reverseSearch.closeButton.tooltip",
-          ["Esc" + (isMacOS ? " | Ctrl + C" : "")]
-        ),
-        onClick: () => {
-          dispatch(actions.reverseSearchInputToggle());
+      dom.div(
+        {
+          className: "reverse-search-actions",
         },
-      })
+        this.renderSearchInformation(),
+        this.renderNavigationButtons(),
+        dom.button({
+          className: "devtools-button reverse-search-close-button",
+          title: l10n.getFormatStr(
+            "webconsole.reverseSearch.closeButton.tooltip",
+            ["Esc" + (isMacOS ? " | Ctrl + C" : "")]
+          ),
+          onClick: () => {
+            dispatch(actions.reverseSearchInputToggle());
+          },
+        })
+      )
     );
   }
 }