PERF: Don't render advanced search options when not expanded.

* Debounce options update as well.

app/assets/javascripts/discourse/components/search-advanced-options.js.es6

@@ -17,8 +17,7 @@ const REGEXP_CATEGORY_ID    = /\s?(category:[0-9]+)/ig;
 const REGEXP_POST_TIME_WHEN = /(before|after)/ig;
 
 export default Em.Component.extend({
-  tagName: 'div',
-  classNames: ['search-advanced', 'row'],
+  classNames: ['search-advanced-options'],
   searchedTerms: {username: [], category: null, group: [], badge: [], tags: [],
     in: '', status: '', posts_count: '', time: {when: 'before', days: ''}},
   inOptions: [
@@ -45,8 +44,16 @@ export default Em.Component.extend({
     {name: I18n.t('search.advanced.post.time.after'),   value: "after"}
   ],
 
-  @on('init')
+  didInsertElement() {
+    this._super();
+    this._init();
+  },
+
   @observes('searchTerm')
+  _updateOptions() {
+    Ember.run.debounce(this, this._init, 250);
+  },
+
   _init() {
     let searchTerm = this.get('searchTerm');
 
@@ -382,18 +389,5 @@ export default Em.Component.extend({
   badgeFinder(term) {
     const Badge = require('discourse/models/badge').default;
     return Badge.findAll({search: term});
-  },
-
-  @computed('isExpanded')
-  collapsedClassName(isExpanded) {
-    return isExpanded ? "fa-caret-down" : "fa-caret-right";
-  },
-
-  actions: {
-    expandOptions() {
-      this.set('isExpanded', !this.get('isExpanded'));
-      if (this.get('isExpanded'))
-        this._init();
-    }
   }
 });

app/assets/javascripts/discourse/controllers/full-page-search.js.es6

@@ -4,6 +4,7 @@ import { default as computed, observes } from 'ember-addons/ember-computed-decor
 import Category from 'discourse/models/category';
 import { escapeExpression } from 'discourse/lib/utilities';
 import { setTransient } from 'discourse/lib/page-tracker';
+import { iconHTML } from 'discourse-common/helpers/fa-icon';
 
 const SortOrders = [
   {name: I18n.t('search.relevance'), id: 0},
@@ -143,6 +144,11 @@ export default Ember.Controller.extend({
     return this.currentUser && !this.site.mobileView && !expanded;
   },
 
+  @computed('expanded')
+  searchAdvancedIcon(expanded) {
+    return iconHTML(expanded ? "caret-down" : "caret-right");
+  },
+
   _search() {
     if (this.get("searching")) { return; }
 
@@ -208,6 +214,10 @@ export default Ember.Controller.extend({
 
     search() {
       this._search();
+    },
+
+    toggleAdvancedSearch() {
+      this.toggleProperty('expanded');
     }
   }
 });

app/assets/javascripts/discourse/templates/components/search-advanced-options.hbs

@@ -1,9 +1,4 @@
-<h3 class="panel-title" {{action "expandOptions"}}>
-  <i class="fa {{collapsedClassName}}"></i> {{i18n "search.advanced.title"}}
-</h3>
-{{#if isExpanded}}
-  <div class="search-options">
-    <div class="container">
+<div class="container">
   <div class="control-group pull-left">
     <label class="control-label" for="search-posted-by">{{i18n "search.advanced.posted_by.label"}}</label>
     <div class="controls">
@@ -16,10 +11,10 @@
       {{category-chooser value=searchedTerms.category}}
     </div>
   </div>
-    </div>
+</div>
 
-    <!-- disable these super-advanced searches for now
-    <div class="container">
+<!-- disable these super-advanced searches for now
+<div class="container">
   <div class="control-group pull-left">
     <label class="control-label" for="search-in-group">{{i18n "search.advanced.in_group.label"}}</label>
     <div class="controls">
@@ -32,10 +27,10 @@
       {{badge-selector badgeFinder=badgeFinder badgeNames=searchedTerms.badge single="true" canReceiveUpdates="true"}}
     </div>
   </div>
-    </div>
-    -->
+</div>
+-->
 
-    {{#if siteSettings.tagging_enabled}}
+{{#if siteSettings.tagging_enabled}}
   <div class="container">
     <div class="control-group">
       <label class="control-label" for="search-with-tags">{{i18n "search.advanced.with_tags.label"}}</label>
@@ -44,9 +39,9 @@
       </div>
     </div>
   </div>
-    {{/if}}
+{{/if}}
 
-    <div class="container">
+<div class="container">
   <div class="control-group pull-left">
     <label class="control-label" for="search-in-options">{{i18n "search.advanced.filters.label"}}</label>
     <div class="controls">
@@ -59,9 +54,9 @@
       {{combo-box id="status" valueAttribute="value" content=statusOptions value=searchedTerms.status none="user.locale.any"}}
     </div>
   </div>
-    </div>
+</div>
 
-    <div class="container">
+<div class="container">
   <div class="control-group pull-left">
     <label class="control-label" for="search-post-date">{{i18n "search.advanced.post.time.label"}}</label>
     <div class="controls">
@@ -75,6 +70,4 @@
       {{input type="number" value=searchedTerms.posts_count class="input-small" id='search-posts-count'}}
     </div>
   </div>
-    </div>
-  </div>
-{{/if}}
+</div>

app/assets/javascripts/discourse/templates/full-page-search.hbs

@@ -2,7 +2,16 @@
   {{search-text-field value=searchTerm class="full-page-search input-xxlarge search no-blur" action="search" hasAutofocus=hasAutofocus}}
   {{d-button action="search" icon="search" class="btn-primary" disabled=searching}}
 
+  <div class='search-advanced'>
+    <button class="search-advanced-btn btn" {{action "toggleAdvancedSearch"}}>
+      {{{searchAdvancedIcon}}}
+      {{i18n "search.advanced.title"}}
+    </button>
+
+    {{#if expanded}}
       {{search-advanced-options searchTerm=searchTerm isExpanded=expanded}}
+    {{/if}}
+  </div>
 
   {{#if canCreateTopic}}
     <span class="new-topic-btn">{{d-button id="create-topic" class="btn-default" action="createTopic" actionParam=searchTerm icon="plus" label="topic.create"}}</span>

app/assets/stylesheets/common/base/search.scss

@@ -100,13 +100,14 @@
 .search-advanced {
   margin-bottom: 15px;
 
-  .panel-title {
-    background-color: dark-light-diff($primary, $secondary, 94%, -80%);
+  .search-advanced-btn {
     padding: 8px 10px;
-    cursor: pointer;
+    width: 100%;
+    text-align: left;
+    font-weight: bold;
   }
 
-  .search-options {
+  .search-advanced-options {
     border: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
     padding: 10px;
 

app/assets/stylesheets/mobile/search.scss

@@ -3,11 +3,7 @@
 }
 
 .search-advanced {
-  h3.panel-title {
-    margin: 0;
-  }
-
-  .search-options {
+  .search-advanced-options {
     .control-group {
       padding-bottom: 10px;