DevTools: make search in sources show up in drawer again.

Change-Id: Ib2a034a4ee2b38ced8e1dc51247a49eee244aede
Reviewed-on: https://chromium-review.googlesource.com/991152
Commit-Queue: Pavel Feldman <pfeldman@chromium.org>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Commit-Position: refs/heads/master@{#548231}

third_party/WebKit/Source/devtools/front_end/search/SearchView.js

@@ -35,16 +35,27 @@ Search.SearchView = class extends UI.VBox {
 
     this._searchPanelElement = this.contentElement.createChild('div', 'search-drawer-header');
     this._searchPanelElement.addEventListener('keydown', this._onKeyDown.bind(this), false);
-    this._searchPanelElement.addEventListener('input', this._onInput.bind(this), false);
 
     this._searchResultsElement = this.contentElement.createChild('div');
     this._searchResultsElement.className = 'search-results';
 
+    const searchContainer = createElement('div');
+    searchContainer.style.flex = 'auto';
+    searchContainer.style.justifyContent = 'start';
+    searchContainer.style.maxWidth = '300px';
+    this._search = UI.HistoryInput.create();
+    searchContainer.appendChild(this._search);
+    this._search.placeholder = Common.UIString('Search');
+    this._search.setAttribute('type', 'text');
+    this._search.setAttribute('results', '0');
+    this._search.setAttribute('size', 42);
+    const searchItem = new UI.ToolbarItem(searchContainer);
+
     const toolbar = new UI.Toolbar('search-toolbar', this._searchPanelElement);
     this._matchCaseButton = Search.SearchView._appendToolbarToggle(toolbar, 'Aa', Common.UIString('Match Case'));
     this._regexButton =
         Search.SearchView._appendToolbarToggle(toolbar, '.*', Common.UIString('Use Regular Expression'));
-    toolbar.appendSpacer();
+    toolbar.appendToolbarItem(searchItem);
     const refreshButton = new UI.ToolbarButton(Common.UIString('Refresh'), 'largeicon-refresh');
     const clearButton = new UI.ToolbarButton(Common.UIString('Clear'), 'largeicon-clear');
     toolbar.appendToolbarItem(refreshButton);
@@ -55,23 +66,6 @@ Search.SearchView = class extends UI.VBox {
       this._onSearchInputClear();
     });
 
-    const searchContainer = this._searchPanelElement.createChild('div', 'search-container');
-
-    this._search = UI.HistoryInput.create();
-    searchContainer.appendChild(this._search);
-    this._search.placeholder = Common.UIString('Search');
-    this._search.setAttribute('type', 'text');
-    this._search.classList.add('search-config-search');
-    this._search.setAttribute('results', '0');
-    this._search.setAttribute('size', 42);
-
-    this._searchInputClearElement = UI.Icon.create('mediumicon-gray-cross-hover', 'search-cancel-button');
-    this._searchInputClearElement.classList.add('hidden');
-    this._searchInputClearElement.addEventListener('click', this._onSearchInputClear.bind(this), false);
-    const cancelButtonContainer = searchContainer.createChild('div', 'search-cancel-button-container');
-    cancelButtonContainer.appendChild(this._searchInputClearElement);
-
-
     const searchStatusBarElement = this.contentElement.createChild('div', 'search-toolbar-summary');
     this._searchMessageElement = searchStatusBarElement.createChild('div', 'search-message');
     this._searchProgressPlaceholderElement = searchStatusBarElement.createChild('div', 'flex-centered');
@@ -177,7 +171,6 @@ Search.SearchView = class extends UI.VBox {
   _onSearchInputClear() {
     this._search.value = '';
     this.focus();
-    this._searchInputClearElement.classList.add('hidden');
   }
 
   /**
@@ -357,11 +350,6 @@ Search.SearchView = class extends UI.VBox {
     }
   }
 
-  _onInput() {
-    const hasText = this._search.value && this._search.value.length;
-    this._searchInputClearElement.classList.toggle('hidden', !hasText);
-  }
-
   _save() {
     this._advancedSearchConfig.set(this._buildSearchConfig().toPlainObject());
   }
@@ -371,9 +359,6 @@ Search.SearchView = class extends UI.VBox {
     this._search.value = searchConfig.query();
     this._matchCaseButton.setToggled(!searchConfig.ignoreCase());
     this._regexButton.setToggled(searchConfig.isRegex());
-
-    if (this._search.value && this._search.value.length)
-      this._searchInputClearElement.classList.remove('hidden');
   }
 
   _onAction() {

third_party/WebKit/Source/devtools/front_end/search/searchView.css

@@ -10,34 +10,9 @@
     overflow: hidden;
 }
 
-.search-drawer-header input.search-config-search {
-    border: none;
-    flex-grow: 1;
-    height: 22px;
-    margin: 2px 2px 2px 2px;
-    padding-left: 2px;
-}
-
-.search-drawer-header input.search-config-search:focus {
-    box-shadow: var(--focus-ring-active-shadow);
-}
-
-.search-config-search::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-}
-
-.search-drawer-header .search-cancel-button-container {
-    position: relative;
-}
-
-.search-drawer-header .search-cancel-button {
-    position: absolute;
-    right: 6px;
-    top: 6px;
-}
-
-:host-context(.platform-mac) .search-drawer-header input.search-config-search {
-    top: 1px;
+.search-toolbar {
+    background-color: var(--toolbar-bg-color);
+    border-bottom: var(--divider-border);
 }
 
 .search-toolbar-summary {
@@ -66,14 +41,3 @@
 .search-view .search-results > div {
     flex: auto;
 }
-
-.search-container {
-    display: flex;
-    flex-grow: 1;
-    margin: 4px;
-}
-
-.search-container:focus-within {
-    background-color: transparent;
-    border-color: transparent;
-}

third_party/WebKit/Source/devtools/front_end/sources/SearchSourcesView.js

@@ -10,14 +10,18 @@ Sources.SearchSourcesView = class extends Search.SearchView {
   /**
    * @param {string} query
    * @param {boolean=} searchImmediately
-   * @return {!Promise<!Search.SearchView>}
+   * @return {!Promise}
    */
   static async openSearch(query, searchImmediately) {
-    await UI.viewManager.showView('sources.search-sources-tab');
-    const searchView =
-        /** @type {!Search.SearchView} */ (self.runtime.sharedInstance(Sources.SearchSourcesView));
-    searchView.toggle(query, !!searchImmediately);
-    return searchView;
+    const view = UI.viewManager.view('sources.search-sources-tab');
+    // Deliberately use target location name so that it could be changed
+    // based on the setting later.
+    const location = await UI.viewManager.resolveLocation('drawer-view');
+    location.appendView(view);
+    await UI.viewManager.revealView(/** @type {!UI.View} */ (view));
+    const widget = /** @type {!Search.SearchView} */ (await view.widget());
+    widget.toggle(query, !!searchImmediately);
+    return widget;
   }
 
   /**

third_party/WebKit/Source/devtools/front_end/sources/module.json

@@ -317,11 +317,11 @@
         },
         {
             "type": "view",
-            "location": "navigator-view",
+            "location": "drawer-view",
             "id": "sources.search-sources-tab",
             "title": "Search",
             "order": 7,
-            "persistence": "permanent",
+            "persistence": "closeable",
             "className": "Sources.SearchSourcesView"
         },
         {

third_party/WebKit/Source/devtools/front_end/ui/HistoryInput.js

@@ -5,10 +5,6 @@
  * @unrestricted
  */
 UI.HistoryInput = class extends HTMLInputElement {
-  constructor() {
-    super();
-  }
-
   /**
    * @return {!UI.HistoryInput}
    */

third_party/WebKit/Source/devtools/front_end/ui/View.js

@@ -364,7 +364,7 @@ UI.ViewManager = class {
       return location.showView(view, undefined, userGesture, omitFocus);
     }
 
-    return this._resolveLocation(locationName).then(location => {
+    return this.resolveLocation(locationName).then(location => {
       if (!location)
         throw new Error('Could not resolve location for view: ' + viewId);
       location._reveal();
@@ -376,7 +376,7 @@ UI.ViewManager = class {
    * @param {string=} location
    * @return {!Promise<?UI.ViewManager._Location>}
    */
-  _resolveLocation(location) {
+  resolveLocation(location) {
     if (!location)
       return /** @type {!Promise<?UI.ViewManager._Location>} */ (Promise.resolve(null));
 
@@ -730,10 +730,12 @@ UI.ViewManager._TabbedLocation = class extends UI.ViewManager._Location {
   appendView(view, insertBefore) {
     if (this._tabbedPane.hasTab(view.viewId()))
       return;
+    const oldLocation = view[UI.ViewManager._Location.symbol];
+    if (oldLocation && oldLocation !== this)
+      oldLocation.removeView(view);
     view[UI.ViewManager._Location.symbol] = this;
     this._manager._views.set(view.viewId(), view);
     this._views.set(view.viewId(), view);
-
     let index = undefined;
     const tabIds = this._tabbedPane.tabIds();
     if (this._allowReorder) {
@@ -793,8 +795,8 @@ UI.ViewManager._TabbedLocation = class extends UI.ViewManager._Location {
 
     delete view[UI.ViewManager._Location.symbol];
     this._manager._views.delete(view.viewId());
-    this._views.delete(view.viewId());
     this._tabbedPane.closeTab(view.viewId());
+    this._views.delete(view.viewId());
   }
 
   /**
@@ -858,6 +860,10 @@ UI.ViewManager._StackLocation = class extends UI.ViewManager._Location {
    * @param {?UI.View=} insertBefore
    */
   appendView(view, insertBefore) {
+    const oldLocation = view[UI.ViewManager._Location.symbol];
+    if (oldLocation && oldLocation !== this)
+      oldLocation.removeView(view);
+
     let container = this._expandableContainers.get(view.viewId());
     if (!container) {
       view[UI.ViewManager._Location.symbol] = this;

third_party/WebKit/Source/devtools/front_end/ui/toolbar.css

@@ -327,3 +327,17 @@ select.toolbar-item[data-keyboard-focus="true"]:focus > * {
     width: 28px;
     left: -2px;
 }
+
+input[is=history-input] {
+    border: none;
+    line-height: 16px;
+    padding: 1px;
+}
+
+input[is=history-input]:hover {
+    box-shadow: var(--focus-ring-inactive-shadow);
+}
+
+input[is=history-input]:focus {
+    box-shadow: var(--focus-ring-active-shadow);
+}