]> scripts.mit.edu Git - autoinstalls/wordpress.git/blobdiff - wp-admin/js/theme.js
WordPress 4.7.2-scripts
[autoinstalls/wordpress.git] / wp-admin / js / theme.js
index 57e33127ac9fa84b809a957c9a88a2944bd82dca..9ccf61581ce6ab550822163c4194c1e8077d3821 100644 (file)
@@ -79,12 +79,11 @@ themes.view.Appearance = wp.Backbone.View.extend({
 
                // Render and append
                this.view.render();
-               this.$el.empty().append( this.view.el ).addClass('rendered');
-               this.$el.append( '<br class="clear"/>' );
+               this.$el.empty().append( this.view.el ).addClass( 'rendered' );
        },
 
        // Defines search element container
-       searchContainer: $( '#wpbody h2:first' ),
+       searchContainer: $( '#wpbody h1:first' ),
 
        // Search input and view
        // for current theme collection
@@ -156,16 +155,17 @@ themes.Collection = Backbone.Collection.extend({
                // Useful for resetting the views when you clean the input
                if ( this.terms === '' ) {
                        this.reset( themes.data.themes );
+                       $( 'body' ).removeClass( 'no-results' );
                }
 
-               // Trigger an 'update' event
-               this.trigger( 'update' );
+               // Trigger a 'themes:update' event
+               this.trigger( 'themes:update' );
        },
 
        // Performs a search within the collection
        // @uses RegExp
        search: function( term ) {
-               var match, results, haystack;
+               var match, results, haystack, name, description, author;
 
                // Start with a full collection
                this.reset( themes.data.themes, { silent: true } );
@@ -181,7 +181,11 @@ themes.Collection = Backbone.Collection.extend({
                // Find results
                // _.filter and .test
                results = this.filter( function( data ) {
-                       haystack = _.union( data.get( 'name' ), data.get( 'id' ), data.get( 'description' ), data.get( 'author' ), data.get( 'tags' ) );
+                       name        = data.get( 'name' ).replace( /(<([^>]+)>)/ig, '' );
+                       description = data.get( 'description' ).replace( /(<([^>]+)>)/ig, '' );
+                       author      = data.get( 'author' ).replace( /(<([^>]+)>)/ig, '' );
+
+                       haystack = _.union( [ name, data.get( 'id' ), description, author, data.get( 'tags' ) ] );
 
                        if ( match.test( data.get( 'author' ) ) && term.length > 2 ) {
                                data.set( 'displayAuthor', true );
@@ -260,7 +264,7 @@ themes.Collection = Backbone.Collection.extend({
 
                                // Trigger a collection refresh event
                                // and a `query:success` event with a `count` argument.
-                               self.trigger( 'update' );
+                               self.trigger( 'themes:update' );
                                self.trigger( 'query:success', count );
 
                                if ( data.themes && data.themes.length === 0 ) {
@@ -304,7 +308,7 @@ themes.Collection = Backbone.Collection.extend({
                                this.count = this.length;
                        }
 
-                       this.trigger( 'update' );
+                       this.trigger( 'themes:update' );
                        this.trigger( 'query:success', this.count );
                }
        },
@@ -371,17 +375,25 @@ themes.view.Theme = wp.Backbone.View.extend({
                'keydown': themes.isInstall ? 'preview': 'expand',
                'touchend': themes.isInstall ? 'preview': 'expand',
                'keyup': 'addFocus',
-               'touchmove': 'preventExpand'
+               'touchmove': 'preventExpand',
+               'click .theme-install': 'installTheme',
+               'click .update-message': 'updateTheme'
        },
 
        touchDrag: false,
 
+       initialize: function() {
+               this.model.on( 'change', this.render, this );
+       },
+
        render: function() {
                var data = this.model.toJSON();
+
                // Render themes using the html template
                this.$el.html( this.html( data ) ).attr({
                        tabindex: 0,
-                       'aria-describedby' : data.id + '-action ' + data.id + '-name'
+                       'aria-describedby' : data.id + '-action ' + data.id + '-name',
+                       'data-slug': data.id
                });
 
                // Renders active theme styles
@@ -390,10 +402,6 @@ themes.view.Theme = wp.Backbone.View.extend({
                if ( this.model.get( 'displayAuthor' ) ) {
                        this.$el.addClass( 'display-author' );
                }
-
-               if ( this.model.get( 'installed' ) ) {
-                       this.$el.addClass( 'is-installed' );
-               }
        },
 
        // Adds a class to the currently active theme
@@ -435,6 +443,11 @@ themes.view.Theme = wp.Backbone.View.extend({
                        return;
                }
 
+               // Prevent the modal from showing when the user clicks one of the direct action buttons.
+               if ( $( event.target ).is( '.theme-actions a, .update-message, .button-link, .notice-dismiss' ) ) {
+                       return;
+               }
+
                // Set focused theme to current element
                themes.focusedTheme = this.$el;
 
@@ -449,13 +462,15 @@ themes.view.Theme = wp.Backbone.View.extend({
                var self = this,
                        current, preview;
 
+               event = event || window.event;
+
                // Bail if the user scrolled on a touch device
                if ( this.touchDrag === true ) {
                        return this.touchDrag = false;
                }
 
                // Allow direct link path to installing a theme.
-               if ( $( event.target ).hasClass( 'button-primary' ) ) {
+               if ( $( event.target ).not( '.install-theme-preview' ).parents( '.theme-actions' ).length ) {
                        return;
                }
 
@@ -573,6 +588,51 @@ themes.view.Theme = wp.Backbone.View.extend({
                if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
                        $themeInstaller.find( '.next-theme' ).addClass( 'disabled' );
                }
+       },
+
+       installTheme: function( event ) {
+               var _this = this;
+
+               event.preventDefault();
+
+               wp.updates.maybeRequestFilesystemCredentials( event );
+
+               $( document ).on( 'wp-theme-install-success', function( event, response ) {
+                       if ( _this.model.get( 'id' ) === response.slug ) {
+                               _this.model.set( { 'installed': true } );
+                       }
+               } );
+
+               wp.updates.installTheme( {
+                       slug: $( event.target ).data( 'slug' )
+               } );
+       },
+
+       updateTheme: function( event ) {
+               var _this = this;
+
+               if ( ! this.model.get( 'hasPackage' ) ) {
+                       return;
+               }
+
+               event.preventDefault();
+
+               wp.updates.maybeRequestFilesystemCredentials( event );
+
+               $( document ).on( 'wp-theme-update-success', function( event, response ) {
+                       _this.model.off( 'change', _this.render, _this );
+                       if ( _this.model.get( 'id' ) === response.slug ) {
+                               _this.model.set( {
+                                       hasUpdate: false,
+                                       version: response.newVersion
+                               } );
+                       }
+                       _this.model.on( 'change', _this.render, _this );
+               } );
+
+               wp.updates.updateTheme( {
+                       slug: $( event.target ).parents( 'div.theme' ).first().data( 'slug' )
+               } );
        }
 });
 
@@ -587,7 +647,8 @@ themes.view.Details = wp.Backbone.View.extend({
                'click': 'collapse',
                'click .delete-theme': 'deleteTheme',
                'click .left': 'previousTheme',
-               'click .right': 'nextTheme'
+               'click .right': 'nextTheme',
+               'click #update-theme': 'updateTheme'
        },
 
        // The HTML template for the theme overlay
@@ -613,28 +674,26 @@ themes.view.Details = wp.Backbone.View.extend({
                this.$el.toggleClass( 'active', this.model.get( 'active' ) );
        },
 
-       // Keeps :focus within the theme details elements
+       // Set initial focus and constrain tabbing within the theme browser modal.
        containFocus: function( $el ) {
-               var $target;
 
-               // Move focus to the primary action
+               // Set initial focus on the primary action control.
                _.delay( function() {
                        $( '.theme-wrap a.button-primary:visible' ).focus();
-               }, 500 );
+               }, 100 );
 
+               // Constrain tabbing within the modal.
                $el.on( 'keydown.wp-themes', function( event ) {
+                       var $firstFocusable = $el.find( '.theme-header button:not(.disabled)' ).first(),
+                               $lastFocusable = $el.find( '.theme-actions a:visible' ).last();
 
-                       // Tab key
-                       if ( event.which === 9 ) {
-                               $target = $( event.target );
-
-                               // Keep focus within the overlay by making the last link on theme actions
-                               // switch focus to button.left on tabbing and vice versa
-                               if ( $target.is( 'button.left' ) && event.shiftKey ) {
-                                       $el.find( '.theme-actions a:last-child' ).focus();
+                       // Check for the Tab key.
+                       if ( 9 === event.which ) {
+                               if ( $firstFocusable[0] === event.target && event.shiftKey ) {
+                                       $lastFocusable.focus();
                                        event.preventDefault();
-                               } else if ( $target.is( '.theme-actions a:last-child' ) ) {
-                                       $el.find( 'button.left' ).focus();
+                               } else if ( $lastFocusable[0] === event.target && ! event.shiftKey ) {
+                                       $firstFocusable.focus();
                                        event.preventDefault();
                                }
                        }
@@ -691,10 +750,14 @@ themes.view.Details = wp.Backbone.View.extend({
 
                // Disable Left/Right when at the start or end of the collection
                if ( this.model.cid === this.model.collection.at(0).cid ) {
-                       this.$el.find( '.left' ).addClass( 'disabled' );
+                       this.$el.find( '.left' )
+                               .addClass( 'disabled' )
+                               .prop( 'disabled', true );
                }
                if ( this.model.cid === this.model.collection.at( this.model.collection.length - 1 ).cid ) {
-                       this.$el.find( '.right' ).addClass( 'disabled' );
+                       this.$el.find( '.right' )
+                               .addClass( 'disabled' )
+                               .prop( 'disabled', true );
                }
        },
 
@@ -707,9 +770,56 @@ themes.view.Details = wp.Backbone.View.extend({
                this.trigger( 'theme:collapse' );
        },
 
-       // Confirmation dialog for deleting a theme
-       deleteTheme: function() {
-               return confirm( themes.data.settings.confirmDelete );
+       updateTheme: function( event ) {
+               var _this = this;
+               event.preventDefault();
+
+               wp.updates.maybeRequestFilesystemCredentials( event );
+
+               $( document ).on( 'wp-theme-update-success', function( event, response ) {
+                       if ( _this.model.get( 'id' ) === response.slug ) {
+                               _this.model.set( {
+                                       hasUpdate: false,
+                                       version: response.newVersion
+                               } );
+                       }
+                       _this.render();
+               } );
+
+               wp.updates.updateTheme( {
+                       slug: $( event.target ).data( 'slug' )
+               } );
+       },
+
+       deleteTheme: function( event ) {
+               var _this = this,
+                   _collection = _this.model.collection,
+                   _themes = themes;
+               event.preventDefault();
+
+               // Confirmation dialog for deleting a theme.
+               if ( ! window.confirm( wp.themes.data.settings.confirmDelete ) ) {
+                       return;
+               }
+
+               wp.updates.maybeRequestFilesystemCredentials( event );
+
+               $( document ).one( 'wp-theme-delete-success', function( event, response ) {
+                       _this.$el.find( '.close' ).trigger( 'click' );
+                       $( '[data-slug="' + response.slug + '"]' ).css( { backgroundColor:'#faafaa' } ).fadeOut( 350, function() {
+                               $( this ).remove();
+                               _themes.data.themes = _.without( _themes.data.themes, _.findWhere( _themes.data.themes, { id: response.slug } ) );
+
+                               $( '.wp-filter-search' ).val( '' );
+                               _collection.doSearch( '' );
+                               _collection.remove( _this.model );
+                               _collection.trigger( 'themes:update' );
+                       } );
+               } );
+
+               wp.updates.deleteTheme( {
+                       slug: this.model.get( 'id' )
+               } );
        },
 
        nextTheme: function() {
@@ -750,25 +860,45 @@ themes.view.Preview = themes.view.Details.extend({
        events: {
                'click .close-full-overlay': 'close',
                'click .collapse-sidebar': 'collapse',
+               'click .devices button': 'previewDevice',
                'click .previous-theme': 'previousTheme',
                'click .next-theme': 'nextTheme',
-               'keyup': 'keyEvent'
+               'keyup': 'keyEvent',
+               'click .theme-install': 'installTheme'
        },
 
        // The HTML template for the theme preview
        html: themes.template( 'theme-preview' ),
 
        render: function() {
-               var data = this.model.toJSON();
+               var self = this,
+                       currentPreviewDevice,
+                       data = this.model.toJSON(),
+                       $body = $( document.body );
 
-               this.$el.html( this.html( data ) );
+               $body.attr( 'aria-busy', 'true' );
 
-               themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.get( 'id' ) ), { replace: true } );
+               this.$el.removeClass( 'iframe-ready' ).html( this.html( data ) );
+
+               currentPreviewDevice = this.$el.data( 'current-preview-device' );
+               if ( currentPreviewDevice ) {
+                       self.tooglePreviewDeviceButtons( currentPreviewDevice );
+               }
+
+               themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: true } );
 
                this.$el.fadeIn( 200, function() {
-                       $( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
-                       $( '.close-full-overlay' ).focus();
+                       $body.addClass( 'theme-installer-active full-overlay-active' );
                });
+
+               this.$el.find( 'iframe' ).one( 'load', function() {
+                       self.iframeLoaded();
+               });
+       },
+
+       iframeLoaded: function() {
+               this.$el.addClass( 'iframe-ready' );
+               $( document.body ).attr( 'aria-busy', 'false' );
        },
 
        close: function() {
@@ -779,7 +909,7 @@ themes.view.Preview = themes.view.Details.extend({
                        if ( themes.focusedTheme ) {
                                themes.focusedTheme.focus();
                        }
-               });
+               }).removeClass( 'iframe-ready' );
 
                themes.router.navigate( themes.router.baseUrl( '' ) );
                this.trigger( 'preview:close' );
@@ -788,12 +918,41 @@ themes.view.Preview = themes.view.Details.extend({
                return false;
        },
 
-       collapse: function() {
+       collapse: function( event ) {
+               var $button = $( event.currentTarget );
+               if ( 'true' === $button.attr( 'aria-expanded' ) ) {
+                       $button.attr({ 'aria-expanded': 'false', 'aria-label': l10n.expandSidebar });
+               } else {
+                       $button.attr({ 'aria-expanded': 'true', 'aria-label': l10n.collapseSidebar });
+               }
 
                this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
                return false;
        },
 
+       previewDevice: function( event ) {
+               var device = $( event.currentTarget ).data( 'device' );
+
+               this.$el
+                       .removeClass( 'preview-desktop preview-tablet preview-mobile' )
+                       .addClass( 'preview-' + device )
+                       .data( 'current-preview-device', device );
+
+               this.tooglePreviewDeviceButtons( device );
+       },
+
+       tooglePreviewDeviceButtons: function( newDevice ) {
+               var $devices = $( '.wp-full-overlay-footer .devices' );
+
+               $devices.find( 'button' )
+                       .removeClass( 'active' )
+                       .attr( 'aria-pressed', false );
+
+               $devices.find( 'button.preview-' + newDevice )
+                       .addClass( 'active' )
+                       .attr( 'aria-pressed', true );
+       },
+
        keyEvent: function( event ) {
                // The escape key closes the preview
                if ( event.keyCode === 27 ) {
@@ -809,6 +968,26 @@ themes.view.Preview = themes.view.Details.extend({
                if ( event.keyCode === 37 ) {
                        this.previousTheme();
                }
+       },
+
+       installTheme: function( event ) {
+               var _this   = this,
+                   $target = $( event.target );
+               event.preventDefault();
+
+               if ( $target.hasClass( 'disabled' ) ) {
+                       return;
+               }
+
+               wp.updates.maybeRequestFilesystemCredentials( event );
+
+               $( document ).on( 'wp-theme-install-success', function() {
+                       _this.model.set( { 'installed': true } );
+               } );
+
+               wp.updates.installTheme( {
+                       slug: $target.data( 'slug' )
+               } );
        }
 });
 
@@ -816,7 +995,7 @@ themes.view.Preview = themes.view.Details.extend({
 // a wrapper that will hold all the theme elements
 themes.view.Themes = wp.Backbone.View.extend({
 
-       className: 'themes',
+       className: 'themes wp-clearfix',
        $overlay: $( 'div.theme-overlay' ),
 
        // Number to keep track of scroll position
@@ -824,7 +1003,10 @@ themes.view.Themes = wp.Backbone.View.extend({
        index: 0,
 
        // The theme count element
-       count: $( '.theme-count' ),
+       count: $( '.wrap .theme-count' ),
+
+       // The live themes count
+       liveThemeCount: 0,
 
        initialize: function( options ) {
                var self = this;
@@ -839,18 +1021,20 @@ themes.view.Themes = wp.Backbone.View.extend({
                self.currentTheme();
 
                // When the collection is updated by user input...
-               this.listenTo( self.collection, 'update', function() {
+               this.listenTo( self.collection, 'themes:update', function() {
                        self.parent.page = 0;
                        self.currentTheme();
                        self.render( this );
-               });
+               } );
 
                // Update theme count to full result set when available.
                this.listenTo( self.collection, 'query:success', function( count ) {
                        if ( _.isNumber( count ) ) {
                                self.count.text( count );
+                               self.announceSearchResults( count );
                        } else {
                                self.count.text( self.collection.length );
+                               self.announceSearchResults( self.collection.length );
                        }
                });
 
@@ -874,6 +1058,11 @@ themes.view.Themes = wp.Backbone.View.extend({
                                return;
                        }
 
+                       // Bail if the filesystem credentials dialog is shown.
+                       if ( $( '#request-filesystem-credentials-dialog' ).is( ':visible' ) ) {
+                               return;
+                       }
+
                        // Pressing the right arrow key fires a theme:next event
                        if ( event.keyCode === 39 ) {
                                self.overlay.nextTheme();
@@ -895,7 +1084,7 @@ themes.view.Themes = wp.Backbone.View.extend({
        // and keeping theme count in sync
        render: function() {
                // Clear the DOM, please
-               this.$el.html( '' );
+               this.$el.empty();
 
                // If the user doesn't have switch capabilities
                // or there is only one theme in the collection
@@ -921,7 +1110,16 @@ themes.view.Themes = wp.Backbone.View.extend({
                }
 
                // Display a live theme count for the collection
-               this.count.text( this.collection.count ? this.collection.count : this.collection.length );
+               this.liveThemeCount = this.collection.count ? this.collection.count : this.collection.length;
+               this.count.text( this.liveThemeCount );
+
+               /*
+                * In the theme installer the themes count is already announced
+                * because `announceSearchResults` is called on `query:success`.
+                */
+               if ( ! themes.isInstall ) {
+                       this.announceSearchResults( this.liveThemeCount );
+               }
        },
 
        // Iterates through each instance of the collection
@@ -939,7 +1137,7 @@ themes.view.Themes = wp.Backbone.View.extend({
                }
 
                // Make sure the add-new stays at the end
-               if ( page >= 1 ) {
+               if ( ! themes.isInstall && page >= 1 ) {
                        $( '.add-new-theme' ).remove();
                }
 
@@ -961,8 +1159,8 @@ themes.view.Themes = wp.Backbone.View.extend({
                });
 
                // 'Add new theme' element shown at the end of the grid
-               if ( themes.data.settings.canInstall ) {
-                       this.$el.append( '<div class="theme add-new-theme"><a href="' + themes.data.settings.installURI + '"><div class="theme-screenshot"><span></span></div><h3 class="theme-name">' + l10n.addNew + '</h3></a></div>' );
+               if ( ! themes.isInstall && themes.data.settings.canInstall ) {
+                       this.$el.append( '<div class="theme add-new-theme"><a href="' + themes.data.settings.installURI + '"><div class="theme-screenshot"><span></span></div><h2 class="theme-name">' + l10n.addNew + '</h2></a></div>' );
                }
 
                this.parent.page++;
@@ -990,13 +1188,13 @@ themes.view.Themes = wp.Backbone.View.extend({
        // Renders the overlay with the ThemeDetails view
        // Uses the current model data
        expand: function( id ) {
-               var self = this;
+               var self = this, $card, $modal;
 
                // Set the current theme model
                this.model = self.collection.get( id );
 
                // Trigger a route update for the current model
-               themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.id ) );
+               themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.id ) );
 
                // Sets this.view to 'detail'
                this.setView( 'detail' );
@@ -1008,6 +1206,22 @@ themes.view.Themes = wp.Backbone.View.extend({
                });
 
                this.overlay.render();
+
+               if ( this.model.get( 'hasUpdate' ) ) {
+                       $card  = $( '[data-slug="' + this.model.id + '"]' );
+                       $modal = $( this.overlay.el );
+
+                       if ( $card.find( '.updating-message' ).length ) {
+                               $modal.find( '.notice-warning h3' ).remove();
+                               $modal.find( '.notice-warning' )
+                                       .removeClass( 'notice-large' )
+                                       .addClass( 'updating-message' )
+                                       .find( 'p' ).text( wp.updates.l10n.updating );
+                       } else if ( $card.find( '.notice-error' ).length ) {
+                               $modal.find( '.notice-warning' ).remove();
+                       }
+               }
+
                this.$overlay.html( this.overlay.el );
 
                // Bind to theme:next and theme:previous
@@ -1073,6 +1287,15 @@ themes.view.Themes = wp.Backbone.View.extend({
                        self.theme.trigger( 'theme:expand', previousModel.cid );
 
                }
+       },
+
+       // Dispatch audible search results feedback message
+       announceSearchResults: function( count ) {
+               if ( 0 === count ) {
+                       wp.a11y.speak( l10n.noThemesFound );
+               } else {
+                       wp.a11y.speak( l10n.themesFound.replace( '%d', count ) );
+               }
        }
 });
 
@@ -1086,15 +1309,14 @@ themes.view.Search = wp.Backbone.View.extend({
 
        attributes: {
                placeholder: l10n.searchPlaceholder,
-               type: 'search'
+               type: 'search',
+               'aria-describedby': 'live-search-desc'
        },
 
        events: {
-               'input':  'search',
-               'keyup':  'search',
-               'change': 'search',
-               'search': 'search',
-               'blur':   'pushState'
+               'input': 'search',
+               'keyup': 'search',
+               'blur': 'pushState'
        },
 
        initialize: function( options ) {
@@ -1107,19 +1329,21 @@ themes.view.Search = wp.Backbone.View.extend({
 
        },
 
-       // Runs a search on the theme collection.
        search: function( event ) {
-               var options = {};
-
                // Clear on escape.
                if ( event.type === 'keyup' && event.which === 27 ) {
                        event.target.value = '';
                }
 
-               // Lose input focus when pressing enter
-               if ( event.which === 13 ) {
-                       this.$el.trigger( 'blur' );
-               }
+               /**
+                * Since doSearch is debounced, it will only run when user input comes to a rest
+                */
+               this.doSearch( event );
+       },
+
+       // Runs a search on the theme collection.
+       doSearch: _.debounce( function( event ) {
+               var options = {};
 
                this.collection.doSearch( event.target.value );
 
@@ -1132,17 +1356,17 @@ themes.view.Search = wp.Backbone.View.extend({
 
                // Update the URL hash
                if ( event.target.value ) {
-                       themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), options );
+                       themes.router.navigate( themes.router.baseUrl( themes.router.searchPath + event.target.value ), options );
                } else {
                        themes.router.navigate( themes.router.baseUrl( '' ) );
                }
-       },
+       }, 500 ),
 
        pushState: function( event ) {
                var url = themes.router.baseUrl( '' );
 
                if ( event.target.value ) {
-                       url = themes.router.baseUrl( '?search=' + event.target.value );
+                       url = themes.router.baseUrl( themes.router.searchPath + event.target.value );
                }
 
                this.searching = false;
@@ -1167,6 +1391,9 @@ themes.Router = Backbone.Router.extend({
                return 'themes.php' + url;
        },
 
+       themePath: '?theme=',
+       searchPath: '?search=',
+
        search: function( query ) {
                $( '.wp-filter-search' ).val( query );
        },
@@ -1244,9 +1471,12 @@ themes.Run = {
 themes.view.InstallerSearch =  themes.view.Search.extend({
 
        events: {
+               'input': 'search',
                'keyup': 'search'
        },
 
+       terms: '',
+
        // Handles Ajax request for searching through themes in public repo
        search: function( event ) {
 
@@ -1262,12 +1492,20 @@ themes.view.InstallerSearch =  themes.view.Search.extend({
                        event.target.value = '';
                }
 
-               _.debounce( _.bind( this.doSearch, this ), 300 )( event.target.value );
+               this.doSearch( event.target.value );
        },
 
        doSearch: _.debounce( function( value ) {
                var request = {};
 
+               // Don't do anything if the search terms haven't changed.
+               if ( this.terms === value ) {
+                       return;
+               }
+
+               // Updates terms with the value passed.
+               this.terms = value;
+
                request.search = value;
 
                // Intercept an [author] search.
@@ -1289,15 +1527,16 @@ themes.view.InstallerSearch =  themes.view.Search.extend({
                }
 
                $( '.filter-links li > a.current' ).removeClass( 'current' );
-               $( 'body' ).removeClass( 'show-filters filters-applied' );
+               $( 'body' ).removeClass( 'show-filters filters-applied show-favorites-form' );
+               $( '.drawer-toggle' ).attr( 'aria-expanded', 'false' );
 
                // Get the themes by sending Ajax POST request to api.wordpress.org/themes
                // or searching the local cache
                this.collection.query( request );
 
                // Set route
-               themes.router.navigate( themes.router.baseUrl( '?search=' + value ), { replace: true } );
-       }, 300 )
+               themes.router.navigate( themes.router.baseUrl( themes.router.searchPath + value ), { replace: true } );
+       }, 500 )
 });
 
 themes.view.Installer = themes.view.Appearance.extend({
@@ -1312,7 +1551,9 @@ themes.view.Installer = themes.view.Appearance.extend({
                'click .filter-drawer .apply-filters': 'applyFilters',
                'click .filter-group [type="checkbox"]': 'addFilter',
                'click .filter-drawer .clear-filters': 'clearFilters',
-               'click .filtered-by': 'backToFilters'
+               'click .edit-filters': 'backToFilters',
+               'click .favorites-form-submit' : 'saveUsername',
+               'keyup #wporg-username-input': 'saveUsername'
        },
 
        // Initial render method
@@ -1386,6 +1627,7 @@ themes.view.Installer = themes.view.Appearance.extend({
                event.preventDefault();
 
                $( 'body' ).removeClass( 'filters-applied show-filters' );
+               $( '.drawer-toggle' ).attr( 'aria-expanded', 'false' );
 
                // Bail if this is already active
                if ( $el.hasClass( this.activeClass ) ) {
@@ -1395,7 +1637,7 @@ themes.view.Installer = themes.view.Appearance.extend({
                this.sort( sort );
 
                // Trigger a router.naviagte update
-               themes.router.navigate( themes.router.baseUrl( '?browse=' + sort ) );
+               themes.router.navigate( themes.router.baseUrl( themes.router.browsePath + sort ) );
        },
 
        sort: function( sort ) {
@@ -1404,6 +1646,12 @@ themes.view.Installer = themes.view.Appearance.extend({
                $( '.filter-links li > a, .theme-filter' ).removeClass( this.activeClass );
                $( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
 
+               if ( 'favorites' === sort ) {
+                       $( 'body' ).addClass( 'show-favorites-form' );
+               } else {
+                       $( 'body' ).removeClass( 'show-favorites-form' );
+               }
+
                this.browse( sort );
        },
 
@@ -1427,7 +1675,7 @@ themes.view.Installer = themes.view.Appearance.extend({
 
                // Construct the filter request
                // using the default values
-               filter = _.union( filter, this.filtersChecked() );
+               filter = _.union( [ filter, this.filtersChecked() ] );
                request = { tag: [ filter ] };
 
                // Get the themes by sending Ajax POST request to api.wordpress.org/themes
@@ -1451,6 +1699,11 @@ themes.view.Installer = themes.view.Appearance.extend({
                        event.preventDefault();
                }
 
+               if ( ! tags ) {
+                       wp.a11y.speak( l10n.selectFeatureFilter );
+                       return;
+               }
+
                $( 'body' ).addClass( 'filters-applied' );
                $( '.filter-links li > a.current' ).removeClass( 'current' );
                filteringBy.empty();
@@ -1465,6 +1718,35 @@ themes.view.Installer = themes.view.Appearance.extend({
                this.collection.query( request );
        },
 
+       // Save the user's WordPress.org username and get his favorite themes.
+       saveUsername: function ( event ) {
+               var username = $( '#wporg-username-input' ).val(),
+                       nonce = $( '#wporg-username-nonce' ).val(),
+                       request = { browse: 'favorites', user: username },
+                       that = this;
+
+               if ( event ) {
+                       event.preventDefault();
+               }
+
+               // save username on enter
+               if ( event.type === 'keyup' && event.which !== 13 ) {
+                       return;
+               }
+
+               return wp.ajax.send( 'save-wporg-username', {
+                       data: {
+                               _wpnonce: nonce,
+                               username: username
+                       },
+                       success: function () {
+                               // Get the themes by sending Ajax POST request to api.wordpress.org/themes
+                               // or searching the local cache
+                               that.collection.query( request );
+                       }
+               } );
+       },
+
        // Get the checked filters
        // @return {array} of tags or false
        filtersChecked: function() {
@@ -1495,37 +1777,39 @@ themes.view.Installer = themes.view.Appearance.extend({
        // in new location
        searchContainer: $( '.wp-filter .search-form' ),
 
+       /*
+        * When users press the "Upload Theme" button, show the upload form in place.
+        */
        uploader: function() {
-               $( 'a.upload' ).on( 'click', function( event ) {
-                       event.preventDefault();
-                       $( 'body' ).addClass( 'show-upload-theme' );
-                       themes.router.navigate( themes.router.baseUrl( '?upload' ), { replace: true } );
-               });
-               $( 'a.browse-themes' ).on( 'click', function( event ) {
-                       event.preventDefault();
-                       $( 'body' ).removeClass( 'show-upload-theme' );
-                       themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
+               var uploadViewToggle = $( '.upload-view-toggle' ),
+                       $body = $( document.body );
+
+               uploadViewToggle.on( 'click', function() {
+                       // Toggle the upload view.
+                       $body.toggleClass( 'show-upload-view' );
+                       // Toggle the `aria-expanded` button attribute.
+                       uploadViewToggle.attr( 'aria-expanded', $body.hasClass( 'show-upload-view' ) );
                });
        },
 
        // Toggle the full filters navigation
        moreFilters: function( event ) {
+               var $body = $( 'body' ),
+                       $toggleButton = $( '.drawer-toggle' );
+
                event.preventDefault();
 
-               if ( $( 'body' ).hasClass( 'filters-applied' ) ) {
+               if ( $body.hasClass( 'filters-applied' ) ) {
                        return this.backToFilters();
                }
 
-               // If the filters section is opened and filters are checked
-               // run the relevant query collapsing to filtered-by state
-               if ( $( 'body' ).hasClass( 'show-filters' ) && this.filtersChecked() ) {
-                       return this.addFilter();
-               }
-
                this.clearSearch();
 
                themes.router.navigate( themes.router.baseUrl( '' ) );
-               $( 'body' ).toggleClass( 'show-filters' );
+               // Toggle the feature filters view.
+               $body.toggleClass( 'show-filters' );
+               // Toggle the `aria-expanded` button attribute.
+               $toggleButton.attr( 'aria-expanded', $body.hasClass( 'show-filters' ) );
        },
 
        // Clears all the checked filters
@@ -1559,7 +1843,6 @@ themes.InstallerRouter = Backbone.Router.extend({
        routes: {
                'theme-install.php?theme=:slug': 'preview',
                'theme-install.php?browse=:sort': 'sort',
-               'theme-install.php?upload': 'upload',
                'theme-install.php?search=:query': 'search',
                'theme-install.php': 'sort'
        },
@@ -1568,6 +1851,10 @@ themes.InstallerRouter = Backbone.Router.extend({
                return 'theme-install.php' + url;
        },
 
+       themePath: '?theme=',
+       browsePath: '?browse=',
+       searchPath: '?search=',
+
        search: function( query ) {
                $( '.wp-filter-search' ).val( query );
        },
@@ -1621,6 +1908,9 @@ themes.RunInstaller = {
                themes.router.on( 'route:preview', function( slug ) {
                        request.theme = slug;
                        self.view.collection.query( request );
+                       self.view.collection.once( 'update', function() {
+                               self.view.view.theme.preview();
+                       });
                });
 
                // Handles sorting / browsing routes
@@ -1634,11 +1924,6 @@ themes.RunInstaller = {
                        self.view.trigger( 'theme:close' );
                });
 
-               // Support the `upload` route by going straight to upload section
-               themes.router.on( 'route:upload', function() {
-                       $( 'a.upload' ).trigger( 'click' );
-               });
-
                // The `search` route event. The router populates the input field.
                themes.router.on( 'route:search', function() {
                        $( '.wp-filter-search' ).focus().trigger( 'keyup' );
@@ -1659,6 +1944,10 @@ $( document ).ready(function() {
        } else {
                themes.Run.init();
        }
+
+       $( '.broken-themes .delete-theme' ).on( 'click', function() {
+               return confirm( _wpThemeSettings.settings.confirmDelete );
+       });
 });
 
 })( jQuery );