26601.3.patch on Ticket #26601 – Attachment – WordPress Trac

src/wp-admin/css/common.css

 a:focus {
         color: #124964;
     -webkit-box-shadow:
 0 0 1px #5b9dd9,
 0 2px 1px rgba(30, 140, 190, .8);
     box-shadow:
 0 0 1px #5b9dd9,
 0 2px 1px rgba(30, 140, 190, .8);
+        -webkit-box-shadow:
+0 0 1px #5b9dd9,
+0 2px 1px rgba(30, 140, 190, .8);
+        box-shadow:
+0 0 1px #5b9dd9,
+0 2px 1px rgba(30, 140, 190, .8);
+}
 .ie8 a:focus {
 …
 /* not a part of filter bar, but derived from it, so here for now */
 .title-count {
         display: inline;
-        top: -3px;
-        margin-left: 5px;
         margin-right: 20px;
+        vertical-align: bottom;
+}
+.add-new-theme {
+        display: inline;
+        position: relative;
+        bottom: -10px;
+}
 .filter-items {
         float: left;
+}
 …
 .notice-success,
 div.updated {
      border-color: #7ad03a;
+        border-color: #7ad03a;
+}
 .notice-warning {
     border-color: #ffba00;
+        border-color: #ffba00;
+}
 .notice-error,
 div.error {
     border-color: #dd3d36;
+        border-color: #dd3d36;
+}
 .notice-info {
     border-color: #2ea2cc;
+        border-color: #2ea2cc;
+}
 .wrap .notice,
 …
+}
 @media print,
         (-o-min-device-pixel-ratio: 5/4),
         (-webkit-min-device-pixel-ratio: 1.25),
         (min-resolution: 120dpi) {
+(-o-min-device-pixel-ratio: 5/4),
+(-webkit-min-device-pixel-ratio: 1.25),
+(min-resolution: 120dpi) {
         body.plugin-install-php #TB_window,
         body.import-php #TB_window,
 …
  * HiDPI Displays
  */
 @media print,
   (-o-min-device-pixel-ratio: 5/4),
   (-webkit-min-device-pixel-ratio: 1.25),
   (min-resolution: 120dpi) {
+(-o-min-device-pixel-ratio: 5/4),
+(-webkit-min-device-pixel-ratio: 1.25),
+(min-resolution: 120dpi) {
         /* Back-compat for pre-3.8 */
         div.star-holder,
         div.star-holder .star-rating {
 …
         div#post-body.metabox-holder.columns-1 {
                 overflow-x: hidden;
+        }
+}
+}
+ No newline at end of file

src/wp-admin/css/themes.css

 .theme-overlay .theme-header .close:focus,
 .theme-overlay .theme-header .right:focus,
 .theme-overlay .theme-header .left:focus {
     -webkit-box-shadow: none;
     box-shadow: none;
     outline: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+        outline: none;
+}
 .theme-overlay .theme-header .left.disabled,
 …
  * HiDPI Displays
  */
 @media print,
   (-o-min-device-pixel-ratio: 5/4),
   (-webkit-min-device-pixel-ratio: 1.25),
   (min-resolution: 120dpi) {
+(-o-min-device-pixel-ratio: 5/4),
+(-webkit-min-device-pixel-ratio: 1.25),
+(min-resolution: 120dpi) {
         .wp-full-overlay .collapse-sidebar-arrow {
                 background-image: url(../images/arrows-2x.png);
                 -webkit-background-size: 15px 123px;
 …
                 margin-top: 6px;
                 line-height: normal;
+        }
+}
+}
+ No newline at end of file

src/wp-admin/js/theme.js

 ( function($) {
 // Set up our namespace...
 var themes, l10n;
 themes = wp.themes = wp.themes || {};
+        var themes, l10n;
+        themes = wp.themes = wp.themes || {};
 // Store the theme data and settings for organized and quick access
 // themes.data.settings, themes.data.themes, themes.data.l10n
 themes.data = _wpThemeSettings;
 l10n = themes.data.l10n;
+        themes.data = _wpThemeSettings;
+        l10n = themes.data.l10n;
 // Shortcut for isInstall check
 themes.isInstall = !! themes.data.settings.isInstall;
+        themes.isInstall = !! themes.data.settings.isInstall;
 // Setup app structure
 _.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });
+        _.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });
 themes.Model = Backbone.Model.extend({
         // Adds attributes to the default data coming through the .org themes api
         // Map `id` to `slug` for shared code
         initialize: function() {
                 var description;
+        themes.Model = Backbone.Model.extend({
+                // Adds attributes to the default data coming through the .org themes api
+                // Map `id` to `slug` for shared code
+                initialize: function() {
+                        var description;
                 // If theme is already installed, set an attribute.
                 if ( _.indexOf( themes.data.installedThemes, this.get( 'slug' ) ) !== -1 ) {
                         this.set({ installed: true });
+                }
+                        // If theme is already installed, set an attribute.
+                        if ( _.indexOf( themes.data.installedThemes, this.get( 'slug' ) ) !== -1 ) {
+                                this.set({ installed: true });
+                        }
                 // Set the attributes
                 this.set({
                         // slug is for installation, id is for existing.
                         id: this.get( 'slug' ) || this.get( 'id' )
                 });
+                        // Set the attributes
+                        this.set({
+                                // slug is for installation, id is for existing.
+                                id: this.get( 'slug' ) || this.get( 'id' )
+                        });
+                // Map `section.description` to `description`
+                // as the API sometimes returns it differently
+                if ( this.has( 'sections' ) ) {
+                        description = this.get( 'sections' ).description;
+                        this.set({ description: description });
+                        // Map `section.description` to `description`
+                        // as the API sometimes returns it differently
+                        if ( this.has( 'sections' ) ) {
+                                description = this.get( 'sections' ).description;
+                                this.set({ description: description });
+                        }
+                }
+        }
+});
+        });
 // Main view controller for themes.php
 // Unifies and renders all available views
 themes.view.Appearance = wp.Backbone.View.extend({
+        themes.view.Appearance = wp.Backbone.View.extend({
         el: '#wpbody-content .wrap .theme-browser',
+                el: '#wpbody-content .wrap .theme-browser',
         window: $( window ),
         // Pagination instance
         page: 0,
+                window: $( window ),
+                // Pagination instance
+                page: 0,
         // Sets up a throttler for binding to 'scroll'
         initialize: function( options ) {
                 // Scroller checks how far the scroll position is
                 _.bindAll( this, 'scroller' );
+                // Sets up a throttler for binding to 'scroll'
+                initialize: function( options ) {
+                        // Scroller checks how far the scroll position is
+                        _.bindAll( this, 'scroller' );
                 this.SearchView = options.SearchView ? options.SearchView : themes.view.Search;
                 // Bind to the scroll event and throttle
                 // the results from this.scroller
                 this.window.bind( 'scroll', _.throttle( this.scroller, 300 ) );
         },
+                        this.SearchView = options.SearchView ? options.SearchView : themes.view.Search;
+                        // Bind to the scroll event and throttle
+                        // the results from this.scroller
+                        this.window.bind( 'scroll', _.throttle( this.scroller, 300 ) );
+                },
         // Main render control
         render: function() {
                 // Setup the main theme view
                 // with the current theme collection
                 this.view = new themes.view.Themes({
                         collection: this.collection,
                         parent: this
                 });
+                // Main render control
+                render: function() {
+                        // Setup the main theme view
+                        // with the current theme collection
+                        this.view = new themes.view.Themes({
+                                collection: this.collection,
+                                parent: this
+                        });
                 // Render search form.
                 this.search();
+                        // Render search form.
+                        this.search();
                 // Render and append
                 this.view.render();
                 this.$el.empty().append( this.view.el ).addClass('rendered');
                 this.$el.append( '<br class="clear"/>' );
         },
+                        // Render and append
+                        this.view.render();
+                        this.$el.empty().append( this.view.el ).addClass('rendered');
+                        this.$el.append( '<br class="clear"/>' );
+                },
         // Defines search element container
         searchContainer: $( '#wpbody h2:first' ),
+                // Defines search element container
+                searchContainer: $( '#wpbody .add-new-theme' ),
         // Search input and view
         // for current theme collection
         search: function() {
                 var view,
                         self = this;
+                // Search input and view
+                // for current theme collection
+                search: function() {
+                        var view,
+                                self = this;
                 // Don't render the search if there is only one theme
                 if ( themes.data.themes.length === 1 ) {
                         return;
+                }
+                        // Don't render the search if there is only one theme
+                        if ( themes.data.themes.length === 1 ) {
+                                return;
+                        }
                 view = new this.SearchView({
                         collection: self.collection,
                         parent: this
                 });
+                        view = new this.SearchView({
+                                collection: self.collection,
+                                parent: this
+                        });
                 // Render and append after screen title
                 view.render();
                 this.searchContainer
                         .append( $.parseHTML( '<label class="screen-reader-text" for="wp-filter-search-input">' + l10n.search + '</label>' ) )
                         .append( view.el );
         },
+                        // Render and append after screen title
+                        view.render();
+                        this.searchContainer
+                                .append( $.parseHTML( '<label class="screen-reader-text" for="wp-filter-search-input">' + l10n.search + '</label>' ) )
+                                .append( view.el );
+                },
         // Checks when the user gets close to the bottom
         // of the mage and triggers a theme:scroll event
         scroller: function() {
                 var self = this,
                         bottom, threshold;
+                // Checks when the user gets close to the bottom
+                // of the mage and triggers a theme:scroll event
+                scroller: function() {
+                        var self = this,
+                                bottom, threshold;
                 bottom = this.window.scrollTop() + self.window.height();
                 threshold = self.$el.offset().top + self.$el.outerHeight( false ) - self.window.height();
                 threshold = Math.round( threshold * 0.9 );
+                        bottom = this.window.scrollTop() + self.window.height();
+                        threshold = self.$el.offset().top + self.$el.outerHeight( false ) - self.window.height();
+                        threshold = Math.round( threshold * 0.9 );
+                if ( bottom > threshold ) {
+                        this.trigger( 'theme:scroll' );
+                        if ( bottom > threshold ) {
+                                this.trigger( 'theme:scroll' );
+                        }
+                }
+        }
+});
+        });
 // Set up the Collection for our theme data
 // @has 'id' 'name' 'screenshot' 'author' 'authorURI' 'version' 'active' ...
 themes.Collection = Backbone.Collection.extend({
+        themes.Collection = Backbone.Collection.extend({
         model: themes.Model,
+                model: themes.Model,
         // Search terms
         terms: '',
+                // Search terms
+                terms: '',
         // Controls searching on the current theme collection
         // and triggers an update event
         doSearch: function( value ) {
+                // Controls searching on the current theme collection
+                // and triggers an update event
+                doSearch: function( value ) {
                 // Don't do anything if we've already done this search
                 // Useful because the Search handler fires multiple times per keystroke
                 if ( this.terms === value ) {
                         return;
+                }
+                        // Don't do anything if we've already done this search
+                        // Useful because the Search handler fires multiple times per keystroke
+                        if ( this.terms === value ) {
+                                return;
+                        }
                 // Updates terms with the value passed
                 this.terms = value;
+                        // Updates terms with the value passed
+                        this.terms = value;
                 // If we have terms, run a search...
                 if ( this.terms.length > 0 ) {
                         this.search( this.terms );
+                }
+                        // If we have terms, run a search...
+                        if ( this.terms.length > 0 ) {
+                                this.search( this.terms );
+                        }
                 // If search is blank, show all themes
                 // Useful for resetting the views when you clean the input
                 if ( this.terms === '' ) {
                         this.reset( themes.data.themes );
+                }
+                        // If search is blank, show all themes
+                        // Useful for resetting the views when you clean the input
+                        if ( this.terms === '' ) {
+                                this.reset( themes.data.themes );
+                        }
                 // Trigger an 'update' event
                 this.trigger( 'update' );
         },
+                        // Trigger an 'update' event
+                        this.trigger( 'update' );
+                },
         // Performs a search within the collection
         // @uses RegExp
         search: function( term ) {
                 var match, results, haystack, name, description, author;
+                // Performs a search within the collection
+                // @uses RegExp
+                search: function( term ) {
+                        var match, results, haystack, name, description, author;
                 // Start with a full collection
                 this.reset( themes.data.themes, { silent: true } );
+                        // Start with a full collection
+                        this.reset( themes.data.themes, { silent: true } );
                 // Escape the term string for RegExp meta characters
                 term = term.replace( /[-\/\\^$*+?.()|[\]{}]/g, '\\$&' );
+                        // Escape the term string for RegExp meta characters
+                        term = term.replace( /[-\/\\^$*+?.()|[\]{}]/g, '\\$&' );
                 // Consider spaces as word delimiters and match the whole string
                 // so matching terms can be combined
                 term = term.replace( / /g, ')(?=.*' );
                 match = new RegExp( '^(?=.*' + term + ').+', 'i' );
+                        // Consider spaces as word delimiters and match the whole string
+                        // so matching terms can be combined
+                        term = term.replace( / /g, ')(?=.*' );
+                        match = new RegExp( '^(?=.*' + term + ').+', 'i' );
                 // Find results
                 // _.filter and .test
                 results = this.filter( function( data ) {
                         name        = data.get( 'name' ).replace( /(<([^>]+)>)/ig, '' );
                         description = data.get( 'description' ).replace( /(<([^>]+)>)/ig, '' );
                         author      = data.get( 'author' ).replace( /(<([^>]+)>)/ig, '' );
+                        // Find results
+                        // _.filter and .test
+                        results = this.filter( function( data ) {
+                                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' ) );
+                                haystack = _.union( name, data.get( 'id' ), description, author, data.get( 'tags' ) );
                         if ( match.test( data.get( 'author' ) ) && term.length > 2 ) {
                                 data.set( 'displayAuthor', true );
+                        }
+                                if ( match.test( data.get( 'author' ) ) && term.length > 2 ) {
+                                        data.set( 'displayAuthor', true );
+                                }
                         return match.test( haystack );
                 });
+                                return match.test( haystack );
+                        });
                 if ( results.length === 0 ) {
                         this.trigger( 'query:empty' );
                 } else {
                         $( 'body' ).removeClass( 'no-results' );
+                }
+                        if ( results.length === 0 ) {
+                                this.trigger( 'query:empty' );
+                        } else {
+                                $( 'body' ).removeClass( 'no-results' );
+                        }
                 this.reset( results );
         },
+                        this.reset( results );
+                },
         // Paginates the collection with a helper method
         // that slices the collection
         paginate: function( instance ) {
                 var collection = this;
                 instance = instance || 0;
+                // Paginates the collection with a helper method
+                // that slices the collection
+                paginate: function( instance ) {
+                        var collection = this;
+                        instance = instance || 0;
                 // Themes per instance are set at 20
                 collection = _( collection.rest( 20 * instance ) );
                 collection = _( collection.first( 20 ) );
+                        // Themes per instance are set at 20
+                        collection = _( collection.rest( 20 * instance ) );
+                        collection = _( collection.first( 20 ) );
                 return collection;
         },
+                        return collection;
+                },
         count: false,
+                count: false,
         // Handles requests for more themes
         // and caches results
         //
         // When we are missing a cache object we fire an apiCall()
         // which triggers events of `query:success` or `query:fail`
         query: function( request ) {
                 /**
                  * @static
                  * @type Array
                  */
                 var queries = this.queries,
                         self = this,
                         query, isPaginated, count;
+                // Handles requests for more themes
+                // and caches results
+                //
+                // When we are missing a cache object we fire an apiCall()
+                // which triggers events of `query:success` or `query:fail`
+                query: function( request ) {
+                        /**
+                         * @static
+                         * @type Array
+                         */
+                        var queries = this.queries,
+                                self = this,
+                                query, isPaginated, count;
                 // Store current query request args
                 // for later use with the event `theme:end`
                 this.currentQuery.request = request;
+                        // Store current query request args
+                        // for later use with the event `theme:end`
+                        this.currentQuery.request = request;
                 // Search the query cache for matches.
                 query = _.find( queries, function( query ) {
                         return _.isEqual( query.request, request );
                 });
+                        // Search the query cache for matches.
+                        query = _.find( queries, function( query ) {
+                                return _.isEqual( query.request, request );
+                        });
                 // If the request matches the stored currentQuery.request
                 // it means we have a paginated request.
                 isPaginated = _.has( request, 'page' );
+                        // If the request matches the stored currentQuery.request
+                        // it means we have a paginated request.
+                        isPaginated = _.has( request, 'page' );
                 // Reset the internal api page counter for non paginated queries.
                 if ( ! isPaginated ) {
                         this.currentQuery.page = 1;
+                }
+                        // Reset the internal api page counter for non paginated queries.
+                        if ( ! isPaginated ) {
+                                this.currentQuery.page = 1;
+                        }
                 // Otherwise, send a new API call and add it to the cache.
                 if ( ! query && ! isPaginated ) {
                         query = this.apiCall( request ).done( function( data ) {
+                        // Otherwise, send a new API call and add it to the cache.
+                        if ( ! query && ! isPaginated ) {
+                                query = this.apiCall( request ).done( function( data ) {
                                 // Update the collection with the queried data.
                                 if ( data.themes ) {
                                         self.reset( data.themes );
                                         count = data.info.results;
                                         // Store the results and the query request
                                         queries.push( { themes: data.themes, request: request, total: count } );
+                                }
+                                        // Update the collection with the queried data.
+                                        if ( data.themes ) {
+                                                self.reset( data.themes );
+                                                count = data.info.results;
+                                                // Store the results and the query request
+                                                queries.push( { themes: data.themes, request: request, total: count } );
+                                        }
                                 // Trigger a collection refresh event
                                 // and a `query:success` event with a `count` argument.
                                 self.trigger( 'update' );
                                 self.trigger( 'query:success', count );
+                                        // Trigger a collection refresh event
+                                        // and a `query:success` event with a `count` argument.
+                                        self.trigger( 'update' );
+                                        self.trigger( 'query:success', count );
                                 if ( data.themes && data.themes.length === 0 ) {
                                         self.trigger( 'query:empty' );
+                                }
+                                        if ( data.themes && data.themes.length === 0 ) {
+                                                self.trigger( 'query:empty' );
+                                        }
-                        }).fail( function() {
-                                self.trigger( 'query:fail' );
-                        });
-                } else {
-                        // If it's a paginated request we need to fetch more themes...
-                        if ( isPaginated ) {
-                                return this.apiCall( request, isPaginated ).done( function( data ) {
-                                        // Add the new themes to the current collection
-                                        // @todo update counter
-                                        self.add( data.themes );
-                                        self.trigger( 'query:success' );
-                                        // We are done loading themes for now.
-                                        self.loadingThemes = false;
                                 }).fail( function() {
                                         self.trigger( 'query:fail' );
                                 });
+                        }
-                        if ( query.themes.length === 0 ) {
-                                self.trigger( 'query:empty' );
                         } else {
+                                $( 'body' ).removeClass( 'no-results' );
+                        }
+                                // If it's a paginated request we need to fetch more themes...
+                                if ( isPaginated ) {
+                                        return this.apiCall( request, isPaginated ).done( function( data ) {
+                                                // Add the new themes to the current collection
+                                                // @todo update counter
+                                                self.add( data.themes );
+                                                self.trigger( 'query:success' );
+                        // Only trigger an update event since we already have the themes
+                        // on our cached object
+                        if ( _.isNumber( query.total ) ) {
+                                this.count = query.total;
+                        }
+                                                // We are done loading themes for now.
+                                                self.loadingThemes = false;
+                        this.reset( query.themes );
+                        if ( ! query.total ) {
+                                this.count = this.length;
+                                        }).fail( function() {
+                                                self.trigger( 'query:fail' );
+                                        });
+                                }
+                                if ( query.themes.length === 0 ) {
+                                        self.trigger( 'query:empty' );
+                                } else {
+                                        $( 'body' ).removeClass( 'no-results' );
+                                }
+                                // Only trigger an update event since we already have the themes
+                                // on our cached object
+                                if ( _.isNumber( query.total ) ) {
+                                        this.count = query.total;
+                                }
+                                this.reset( query.themes );
+                                if ( ! query.total ) {
+                                        this.count = this.length;
+                                }
+                                this.trigger( 'update' );
+                                this.trigger( 'query:success', this.count );
+                        }
+                },
+                        this.trigger( 'update' );
+                        this.trigger( 'query:success', this.count );
+                }
+        },
+                // Local cache array for API queries
+                queries: [],
+        // Local cache array for API queries
+        queries: [],
+                // Keep track of current query so we can handle pagination
+                currentQuery: {
+                        page: 1,
+                        request: {}
+                },
+        // Keep track of current query so we can handle pagination
+        currentQuery: {
+                page: 1,
+                request: {}
+        },
+                // Send request to api.wordpress.org/themes
+                apiCall: function( request, paginated ) {
+                        return wp.ajax.send( 'query-themes', {
+                                data: {
+                                        // Request data
+                                        request: _.extend({
+                                                per_page: 100,
+                                                fields: {
+                                                        description: true,
+                                                        tested: true,
+                                                        requires: true,
+                                                        rating: true,
+                                                        downloaded: true,
+                                                        downloadLink: true,
+                                                        last_updated: true,
+                                                        homepage: true,
+                                                        num_ratings: true
+                                                }
+                                        }, request)
+                                },
+        // Send request to api.wordpress.org/themes
+        apiCall: function( request, paginated ) {
+                return wp.ajax.send( 'query-themes', {
+                        data: {
+                        // Request data
+                                request: _.extend({
+                                        per_page: 100,
+                                        fields: {
+                                                description: true,
+                                                tested: true,
+                                                requires: true,
+                                                rating: true,
+                                                downloaded: true,
+                                                downloadLink: true,
+                                                last_updated: true,
+                                                homepage: true,
+                                                num_ratings: true
+                                beforeSend: function() {
+                                        if ( ! paginated ) {
+                                                // Spin it
+                                                $( 'body' ).addClass( 'loading-content' ).removeClass( 'no-results' );
+                                        }
-                                }, request)
-                        },
-                        beforeSend: function() {
-                                if ( ! paginated ) {
-                                        // Spin it
-                                        $( 'body' ).addClass( 'loading-content' ).removeClass( 'no-results' );
+                                }
+                        }
+                });
+        },
+                        });
+                },
         // Static status controller for when we are loading themes.
         loadingThemes: false
 });
+                // Static status controller for when we are loading themes.
+                loadingThemes: false
+        });
 // This is the view that controls each theme item
 // that will be displayed on the screen
 themes.view.Theme = wp.Backbone.View.extend({
+        themes.view.Theme = wp.Backbone.View.extend({
         // Wrap theme data on a div.theme element
         className: 'theme',
+                // Wrap theme data on a div.theme element
+                className: 'theme',
         // Reflects which theme view we have
         // 'grid' (default) or 'detail'
         state: 'grid',
+                // Reflects which theme view we have
+                // 'grid' (default) or 'detail'
+                state: 'grid',
         // The HTML template for each element to be rendered
         html: themes.template( 'theme' ),
+                // The HTML template for each element to be rendered
+                html: themes.template( 'theme' ),
         events: {
                 'click': themes.isInstall ? 'preview': 'expand',
                 'keydown': themes.isInstall ? 'preview': 'expand',
                 'touchend': themes.isInstall ? 'preview': 'expand',
                 'keyup': 'addFocus',
                 'touchmove': 'preventExpand'
         },
+                events: {
+                        'click': themes.isInstall ? 'preview': 'expand',
+                        'keydown': themes.isInstall ? 'preview': 'expand',
+                        'touchend': themes.isInstall ? 'preview': 'expand',
+                        'keyup': 'addFocus',
+                        'touchmove': 'preventExpand'
+                },
         touchDrag: false,
+                touchDrag: false,
         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'
                 });
+                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'
+                        });
                 // Renders active theme styles
                 this.activeTheme();
+                        // Renders active theme styles
+                        this.activeTheme();
                 if ( this.model.get( 'displayAuthor' ) ) {
                         this.$el.addClass( 'display-author' );
+                }
+                        if ( this.model.get( 'displayAuthor' ) ) {
+                                this.$el.addClass( 'display-author' );
+                        }
                 if ( this.model.get( 'installed' ) ) {
                         this.$el.addClass( 'is-installed' );
+                }
         },
+                        if ( this.model.get( 'installed' ) ) {
+                                this.$el.addClass( 'is-installed' );
+                        }
+                },
         // Adds a class to the currently active theme
         // and to the overlay in detailed view mode
         activeTheme: function() {
                 if ( this.model.get( 'active' ) ) {
                         this.$el.addClass( 'active' );
+                }
         },
+                // Adds a class to the currently active theme
+                // and to the overlay in detailed view mode
+                activeTheme: function() {
+                        if ( this.model.get( 'active' ) ) {
+                                this.$el.addClass( 'active' );
+                        }
+                },
         // Add class of focus to the theme we are focused on.
         addFocus: function() {
                 var $themeToFocus = ( $( ':focus' ).hasClass( 'theme' ) ) ? $( ':focus' ) : $(':focus').parents('.theme');
+                // Add class of focus to the theme we are focused on.
+                addFocus: function() {
+                        var $themeToFocus = ( $( ':focus' ).hasClass( 'theme' ) ) ? $( ':focus' ) : $(':focus').parents('.theme');
                 $('.theme.focus').removeClass('focus');
                 $themeToFocus.addClass('focus');
         },
+                        $('.theme.focus').removeClass('focus');
+                        $themeToFocus.addClass('focus');
+                },
         // Single theme overlay screen
         // It's shown when clicking a theme
         expand: function( event ) {
                 var self = this;
+                // Single theme overlay screen
+                // It's shown when clicking a theme
+                expand: function( event ) {
+                        var self = this;
                 event = event || window.event;
+                        event = event || window.event;
                 // 'enter' and 'space' keys expand the details view when a theme is :focused
                 if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
                         return;
+                }
+                        // 'enter' and 'space' keys expand the details view when a theme is :focused
+                        if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
+                                return;
+                        }
                 // Bail if the user scrolled on a touch device
                 if ( this.touchDrag === true ) {
                         return this.touchDrag = false;
+                }
+                        // Bail if the user scrolled on a touch device
+                        if ( this.touchDrag === true ) {
+                                return this.touchDrag = false;
+                        }
                 // Prevent the modal from showing when the user clicks
                 // one of the direct action buttons
                 if ( $( event.target ).is( '.theme-actions a' ) ) {
                         return;
+                }
+                        // Prevent the modal from showing when the user clicks
+                        // one of the direct action buttons
+                        if ( $( event.target ).is( '.theme-actions a' ) ) {
+                                return;
+                        }
                 // Set focused theme to current element
                 themes.focusedTheme = this.$el;
+                        // Set focused theme to current element
+                        themes.focusedTheme = this.$el;
                 this.trigger( 'theme:expand', self.model.cid );
         },
+                        this.trigger( 'theme:expand', self.model.cid );
+                },
         preventExpand: function() {
                 this.touchDrag = true;
         },
+                preventExpand: function() {
+                        this.touchDrag = true;
+                },
         preview: function( event ) {
                 var self = this,
                         current, preview;
+                preview: function( event ) {
+                        var self = this,
+                                current, preview;
                 // Bail if the user scrolled on a touch device
                 if ( this.touchDrag === true ) {
                         return this.touchDrag = false;
+                }
+                        // 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' ) ) {
                         return;
+                }
+                        // Allow direct link path to installing a theme.
+                        if ( $( event.target ).hasClass( 'button-primary' ) ) {
+                                return;
+                        }
                 // 'enter' and 'space' keys expand the details view when a theme is :focused
                 if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
                         return;
+                }
+                        // 'enter' and 'space' keys expand the details view when a theme is :focused
+                        if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
+                                return;
+                        }
                 // pressing enter while focused on the buttons shouldn't open the preview
                 if ( event.type === 'keydown' && event.which !== 13 && $( ':focus' ).hasClass( 'button' ) ) {
                         return;
+                }
+                        // pressing enter while focused on the buttons shouldn't open the preview
+                        if ( event.type === 'keydown' && event.which !== 13 && $( ':focus' ).hasClass( 'button' ) ) {
+                                return;
+                        }
                 event.preventDefault();
+                        event.preventDefault();
                 event = event || window.event;
+                        event = event || window.event;
                 // Set focus to current theme.
                 themes.focusedTheme = this.$el;
+                        // Set focus to current theme.
+                        themes.focusedTheme = this.$el;
                 // Construct a new Preview view.
                 preview = new themes.view.Preview({
                         model: this.model
                 });
+                        // Construct a new Preview view.
+                        preview = new themes.view.Preview({
+                                model: this.model
+                        });
                 // Render the view and append it.
                 preview.render();
                 this.setNavButtonsState();
+                        // Render the view and append it.
+                        preview.render();
+                        this.setNavButtonsState();
                 // Hide previous/next navigation if there is only one theme
                 if ( this.model.collection.length === 1 ) {
                         preview.$el.addClass( 'no-navigation' );
                 } else {
                         preview.$el.removeClass( 'no-navigation' );
+                }
+                        // Hide previous/next navigation if there is only one theme
+                        if ( this.model.collection.length === 1 ) {
+                                preview.$el.addClass( 'no-navigation' );
+                        } else {
+                                preview.$el.removeClass( 'no-navigation' );
+                        }
                 // Append preview
                 $( 'div.wrap' ).append( preview.el );
+                        // Append preview
+                        $( 'div.wrap' ).append( preview.el );
                 // Listen to our preview object
                 // for `theme:next` and `theme:previous` events.
                 this.listenTo( preview, 'theme:next', function() {
+                        // Listen to our preview object
+                        // for `theme:next` and `theme:previous` events.
+                        this.listenTo( preview, 'theme:next', function() {
                         // Keep local track of current theme model.
                         current = self.model;
+                                // Keep local track of current theme model.
+                                current = self.model;
                         // If we have ventured away from current model update the current model position.
                         if ( ! _.isUndefined( self.current ) ) {
                                 current = self.current;
+                        }
+                                // If we have ventured away from current model update the current model position.
+                                if ( ! _.isUndefined( self.current ) ) {
+                                        current = self.current;
+                                }
                         // Get next theme model.
                         self.current = self.model.collection.at( self.model.collection.indexOf( current ) + 1 );
+                                // Get next theme model.
+                                self.current = self.model.collection.at( self.model.collection.indexOf( current ) + 1 );
                         // If we have no more themes, bail.
                         if ( _.isUndefined( self.current ) ) {
                                 self.options.parent.parent.trigger( 'theme:end' );
                                 return self.current = current;
+                        }
+                                // If we have no more themes, bail.
+                                if ( _.isUndefined( self.current ) ) {
+                                        self.options.parent.parent.trigger( 'theme:end' );
+                                        return self.current = current;
+                                }
                         preview.model = self.current;
+                                preview.model = self.current;
                         // Render and append.
                         preview.render();
                         this.setNavButtonsState();
                         $( '.next-theme' ).focus();
                 })
                 .listenTo( preview, 'theme:previous', function() {
+                                // Render and append.
+                                preview.render();
+                                this.setNavButtonsState();
+                                $( '.next-theme' ).focus();
+                        })
+                                .listenTo( preview, 'theme:previous', function() {
                         // Keep track of current theme model.
                         current = self.model;
+                                        // Keep track of current theme model.
+                                        current = self.model;
                         // Bail early if we are at the beginning of the collection
                         if ( self.model.collection.indexOf( self.current ) === 0 ) {
                                 return;
+                        }
+                                        // Bail early if we are at the beginning of the collection
+                                        if ( self.model.collection.indexOf( self.current ) === 0 ) {
+                                                return;
+                                        }
                         // If we have ventured away from current model update the current model position.
                         if ( ! _.isUndefined( self.current ) ) {
                                 current = self.current;
+                        }
+                                        // If we have ventured away from current model update the current model position.
+                                        if ( ! _.isUndefined( self.current ) ) {
+                                                current = self.current;
+                                        }
                         // Get previous theme model.
                         self.current = self.model.collection.at( self.model.collection.indexOf( current ) - 1 );
+                                        // Get previous theme model.
+                                        self.current = self.model.collection.at( self.model.collection.indexOf( current ) - 1 );
                         // If we have no more themes, bail.
                         if ( _.isUndefined( self.current ) ) {
                                 return;
+                        }
+                                        // If we have no more themes, bail.
+                                        if ( _.isUndefined( self.current ) ) {
+                                                return;
+                                        }
                         preview.model = self.current;
+                                        preview.model = self.current;
                         // Render and append.
                         preview.render();
                         this.setNavButtonsState();
                         $( '.previous-theme' ).focus();
                 });
+                                        // Render and append.
+                                        preview.render();
+                                        this.setNavButtonsState();
+                                        $( '.previous-theme' ).focus();
+                                });
                 this.listenTo( preview, 'preview:close', function() {
                         self.current = self.model;
                 });
         },
+                        this.listenTo( preview, 'preview:close', function() {
+                                self.current = self.model;
+                        });
+                },
         // Handles .disabled classes for previous/next buttons in theme installer preview
         setNavButtonsState: function() {
                 var $themeInstaller = $( '.theme-install-overlay' ),
                         current = _.isUndefined( this.current ) ? this.model : this.current;
+                // Handles .disabled classes for previous/next buttons in theme installer preview
+                setNavButtonsState: function() {
+                        var $themeInstaller = $( '.theme-install-overlay' ),
+                                current = _.isUndefined( this.current ) ? this.model : this.current;
                 // Disable previous at the zero position
                 if ( 0 === this.model.collection.indexOf( current ) ) {
                         $themeInstaller.find( '.previous-theme' ).addClass( 'disabled' );
+                }
+                        // Disable previous at the zero position
+                        if ( 0 === this.model.collection.indexOf( current ) ) {
+                                $themeInstaller.find( '.previous-theme' ).addClass( 'disabled' );
+                        }
+                // Disable next if the next model is undefined
+                if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
+                        $themeInstaller.find( '.next-theme' ).addClass( 'disabled' );
+                        // Disable next if the next model is undefined
+                        if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
+                                $themeInstaller.find( '.next-theme' ).addClass( 'disabled' );
+                        }
+                }
+        }
+});
+        });
 // Theme Details view
 // Set ups a modal overlay with the expanded theme data
 themes.view.Details = wp.Backbone.View.extend({
+        themes.view.Details = wp.Backbone.View.extend({
         // Wrap theme data on a div.theme element
         className: 'theme-overlay',
+                // Wrap theme data on a div.theme element
+                className: 'theme-overlay',
         events: {
                 'click': 'collapse',
                 'click .delete-theme': 'deleteTheme',
                 'click .left': 'previousTheme',
                 'click .right': 'nextTheme'
         },
+                events: {
+                        'click': 'collapse',
+                        'click .delete-theme': 'deleteTheme',
+                        'click .left': 'previousTheme',
+                        'click .right': 'nextTheme'
+                },
         // The HTML template for the theme overlay
         html: themes.template( 'theme-single' ),
+                // The HTML template for the theme overlay
+                html: themes.template( 'theme-single' ),
         render: function() {
                 var data = this.model.toJSON();
                 this.$el.html( this.html( data ) );
                 // Renders active theme styles
                 this.activeTheme();
                 // Set up navigation events
                 this.navigation();
                 // Checks screenshot size
                 this.screenshotCheck( this.$el );
                 // Contain "tabbing" inside the overlay
                 this.containFocus( this.$el );
         },
+                render: function() {
+                        var data = this.model.toJSON();
+                        this.$el.html( this.html( data ) );
+                        // Renders active theme styles
+                        this.activeTheme();
+                        // Set up navigation events
+                        this.navigation();
+                        // Checks screenshot size
+                        this.screenshotCheck( this.$el );
+                        // Contain "tabbing" inside the overlay
+                        this.containFocus( this.$el );
+                },
         // Adds a class to the currently active theme
         // and to the overlay in detailed view mode
         activeTheme: function() {
                 // Check the model has the active property
                 this.$el.toggleClass( 'active', this.model.get( 'active' ) );
         },
+                // Adds a class to the currently active theme
+                // and to the overlay in detailed view mode
+                activeTheme: function() {
+                        // Check the model has the active property
+                        this.$el.toggleClass( 'active', this.model.get( 'active' ) );
+                },
         // Keeps :focus within the theme details elements
         containFocus: function( $el ) {
                 var $target;
+                // Keeps :focus within the theme details elements
+                containFocus: function( $el ) {
+                        var $target;
                 // Move focus to the primary action
                 _.delay( function() {
                         $( '.theme-wrap a.button-primary:visible' ).focus();
                 }, 500 );
+                        // Move focus to the primary action
+                        _.delay( function() {
+                                $( '.theme-wrap a.button-primary:visible' ).focus();
+                        }, 500 );
                 $el.on( 'keydown.wp-themes', function( event ) {
+                        $el.on( 'keydown.wp-themes', function( event ) {
                         // Tab key
                         if ( event.which === 9 ) {
                                 $target = $( event.target );
+                                // 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();
+                                        event.preventDefault();
+                                } else if ( $target.is( '.theme-actions a:last-child' ) ) {
+                                        $el.find( 'button.left' ).focus();
+                                        event.preventDefault();
+                                        // 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();
+                                                event.preventDefault();
+                                        } else if ( $target.is( '.theme-actions a:last-child' ) ) {
+                                                $el.find( 'button.left' ).focus();
+                                                event.preventDefault();
+                                        }
+                                }
+                        }
+                });
+        },
+                        });
+                },
         // Single theme overlay screen
         // It's shown when clicking a theme
         collapse: function( event ) {
                 var self = this,
                         scroll;
+                // Single theme overlay screen
+                // It's shown when clicking a theme
+                collapse: function( event ) {
+                        var self = this,
+                                scroll;
                 event = event || window.event;
+                        event = event || window.event;
                 // Prevent collapsing detailed view when there is only one theme available
                 if ( themes.data.themes.length === 1 ) {
                         return;
+                }
+                        // Prevent collapsing detailed view when there is only one theme available
+                        if ( themes.data.themes.length === 1 ) {
+                                return;
+                        }
                 // Detect if the click is inside the overlay
                 // and don't close it unless the target was
                 // the div.back button
                 if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( '.close' ) || event.keyCode === 27 ) {
+                        // Detect if the click is inside the overlay
+                        // and don't close it unless the target was
+                        // the div.back button
+                        if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( '.close' ) || event.keyCode === 27 ) {
                         // Add a temporary closing class while overlay fades out
                         $( 'body' ).addClass( 'closing-overlay' );
+                                // Add a temporary closing class while overlay fades out
+                                $( 'body' ).addClass( 'closing-overlay' );
                         // With a quick fade out animation
                         this.$el.fadeOut( 130, function() {
                                 // Clicking outside the modal box closes the overlay
                                 $( 'body' ).removeClass( 'closing-overlay' );
                                 // Handle event cleanup
                                 self.closeOverlay();
+                                // With a quick fade out animation
+                                this.$el.fadeOut( 130, function() {
+                                        // Clicking outside the modal box closes the overlay
+                                        $( 'body' ).removeClass( 'closing-overlay' );
+                                        // Handle event cleanup
+                                        self.closeOverlay();
                                 // Get scroll position to avoid jumping to the top
                                 scroll = document.body.scrollTop;
+                                        // Get scroll position to avoid jumping to the top
+                                        scroll = document.body.scrollTop;
                                 // Clean the url structure
                                 themes.router.navigate( themes.router.baseUrl( '' ) );
+                                        // Clean the url structure
+                                        themes.router.navigate( themes.router.baseUrl( '' ) );
                                 // Restore scroll position
                                 document.body.scrollTop = scroll;
+                                        // Restore scroll position
+                                        document.body.scrollTop = scroll;
                                 // Return focus to the theme div
                                 if ( themes.focusedTheme ) {
                                         themes.focusedTheme.focus();
+                                }
                         });
+                }
         },
+                                        // Return focus to the theme div
+                                        if ( themes.focusedTheme ) {
+                                                themes.focusedTheme.focus();
+                                        }
+                                });
+                        }
+                },
         // Handles .disabled classes for next/previous buttons
         navigation: function() {
+                // Handles .disabled classes for next/previous buttons
+                navigation: function() {
                 // 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' );
+                }
                 if ( this.model.cid === this.model.collection.at( this.model.collection.length - 1 ).cid ) {
                         this.$el.find( '.right' ).addClass( 'disabled' );
+                }
         },
+                        // 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' );
+                        }
+                        if ( this.model.cid === this.model.collection.at( this.model.collection.length - 1 ).cid ) {
+                                this.$el.find( '.right' ).addClass( 'disabled' );
+                        }
+                },
         // Performs the actions to effectively close
         // the theme details overlay
         closeOverlay: function() {
                 $( 'body' ).removeClass( 'modal-open' );
                 this.remove();
                 this.unbind();
                 this.trigger( 'theme:collapse' );
         },
+                // Performs the actions to effectively close
+                // the theme details overlay
+                closeOverlay: function() {
+                        $( 'body' ).removeClass( 'modal-open' );
+                        this.remove();
+                        this.unbind();
+                        this.trigger( 'theme:collapse' );
+                },
         // Confirmation dialog for deleting a theme
         deleteTheme: function() {
                 return confirm( themes.data.settings.confirmDelete );
         },
+                // Confirmation dialog for deleting a theme
+                deleteTheme: function() {
+                        return confirm( themes.data.settings.confirmDelete );
+                },
         nextTheme: function() {
                 var self = this;
                 self.trigger( 'theme:next', self.model.cid );
                 return false;
         },
+                nextTheme: function() {
+                        var self = this;
+                        self.trigger( 'theme:next', self.model.cid );
+                        return false;
+                },
         previousTheme: function() {
                 var self = this;
                 self.trigger( 'theme:previous', self.model.cid );
                 return false;
         },
+                previousTheme: function() {
+                        var self = this;
+                        self.trigger( 'theme:previous', self.model.cid );
+                        return false;
+                },
         // Checks if the theme screenshot is the old 300px width version
         // and adds a corresponding class if it's true
         screenshotCheck: function( el ) {
                 var screenshot, image;
+                // Checks if the theme screenshot is the old 300px width version
+                // and adds a corresponding class if it's true
+                screenshotCheck: function( el ) {
+                        var screenshot, image;
                 screenshot = el.find( '.screenshot img' );
                 image = new Image();
                 image.src = screenshot.attr( 'src' );
+                        screenshot = el.find( '.screenshot img' );
+                        image = new Image();
+                        image.src = screenshot.attr( 'src' );
+                // Width check
+                if ( image.width && image.width <= 300 ) {
+                        el.addClass( 'small-screenshot' );
+                        // Width check
+                        if ( image.width && image.width <= 300 ) {
+                                el.addClass( 'small-screenshot' );
+                        }
+                }
+        }
+});
+        });
 // Theme Preview view
 // Set ups a modal overlay with the expanded theme data
 themes.view.Preview = themes.view.Details.extend({
+        themes.view.Preview = themes.view.Details.extend({
         className: 'wp-full-overlay expanded',
         el: '.theme-install-overlay',
+                className: 'wp-full-overlay expanded',
+                el: '.theme-install-overlay',
         events: {
                 'click .close-full-overlay': 'close',
                 'click .collapse-sidebar': 'collapse',
                 'click .previous-theme': 'previousTheme',
                 'click .next-theme': 'nextTheme',
                 'keyup': 'keyEvent'
         },
+                events: {
+                        'click .close-full-overlay': 'close',
+                        'click .collapse-sidebar': 'collapse',
+                        'click .previous-theme': 'previousTheme',
+                        'click .next-theme': 'nextTheme',
+                        'keyup': 'keyEvent'
+                },
         // The HTML template for the theme preview
         html: themes.template( 'theme-preview' ),
+                // The HTML template for the theme preview
+                html: themes.template( 'theme-preview' ),
         render: function() {
                 var data = this.model.toJSON();
+                render: function() {
+                        var data = this.model.toJSON();
                 this.$el.html( this.html( data ) );
+                        this.$el.html( this.html( data ) );
                 themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: true } );
+                        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();
                 });
         },
+                        this.$el.fadeIn( 200, function() {
+                                $( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
+                                $( '.close-full-overlay' ).focus();
+                        });
+                },
         close: function() {
                 this.$el.fadeOut( 200, function() {
                         $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
+                close: function() {
+                        this.$el.fadeOut( 200, function() {
+                                $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
                         // Return focus to the theme div
                         if ( themes.focusedTheme ) {
                                 themes.focusedTheme.focus();
+                        }
                 });
+                                // Return focus to the theme div
+                                if ( themes.focusedTheme ) {
+                                        themes.focusedTheme.focus();
+                                }
+                        });
                 themes.router.navigate( themes.router.baseUrl( '' ) );
                 this.trigger( 'preview:close' );
                 this.undelegateEvents();
                 this.unbind();
                 return false;
         },
+                        themes.router.navigate( themes.router.baseUrl( '' ) );
+                        this.trigger( 'preview:close' );
+                        this.undelegateEvents();
+                        this.unbind();
+                        return false;
+                },
         collapse: function() {
+                collapse: function() {
                 this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
                 return false;
         },
+                        this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
+                        return false;
+                },
         keyEvent: function( event ) {
                 // The escape key closes the preview
                 if ( event.keyCode === 27 ) {
                         this.undelegateEvents();
                         this.close();
+                }
                 // The right arrow key, next theme
                 if ( event.keyCode === 39 ) {
                         _.once( this.nextTheme() );
+                }
+                keyEvent: function( event ) {
+                        // The escape key closes the preview
+                        if ( event.keyCode === 27 ) {
+                                this.undelegateEvents();
+                                this.close();
+                        }
+                        // The right arrow key, next theme
+                        if ( event.keyCode === 39 ) {
+                                _.once( this.nextTheme() );
+                        }
+                // The left arrow key, previous theme
+                if ( event.keyCode === 37 ) {
+                        this.previousTheme();
+                        // The left arrow key, previous theme
+                        if ( event.keyCode === 37 ) {
+                                this.previousTheme();
+                        }
+                }
+        }
+});
+        });
 // Controls the rendering of div.themes,
 // a wrapper that will hold all the theme elements
 themes.view.Themes = wp.Backbone.View.extend({
+        themes.view.Themes = wp.Backbone.View.extend({
         className: 'themes',
         $overlay: $( 'div.theme-overlay' ),
+                className: 'themes',
+                $overlay: $( 'div.theme-overlay' ),
         // Number to keep track of scroll position
         // while in theme-overlay mode
         index: 0,
+                // Number to keep track of scroll position
+                // while in theme-overlay mode
+                index: 0,
         // The theme count element
         count: $( '.wp-filter .theme-count' ),
+                // The theme count element
+                count: $( '.wp-filter .theme-count' ),
         initialize: function( options ) {
                 var self = this;
+                initialize: function( options ) {
+                        var self = this;
                 // Set up parent
                 this.parent = options.parent;
+                        // Set up parent
+                        this.parent = options.parent;
                 // Set current view to [grid]
                 this.setView( 'grid' );
+                        // Set current view to [grid]
+                        this.setView( 'grid' );
+                // Move the active theme to the beginning of the collection
+                self.currentTheme();
+                // When the collection is updated by user input...
+                this.listenTo( self.collection, 'update', function() {
+                        self.parent.page = 0;
+                        // Move the active theme to the beginning of the collection
                         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 );
+                        } else {
+                                self.count.text( self.collection.length );
+                        }
+                });
+                        // When the collection is updated by user input...
+                        this.listenTo( self.collection, 'update', function() {
+                                self.parent.page = 0;
+                                self.currentTheme();
+                                self.render( this );
+                        });
+                this.listenTo( self.collection, 'query:empty', function() {
+                        $( 'body' ).addClass( 'no-results' );
+                });
+                        // Update theme count to full result set when available.
+                        this.listenTo( self.collection, 'query:success', function( count ) {
+                                if ( _.isNumber( count ) ) {
+                                        self.count.text( count );
+                                } else {
+                                        self.count.text( self.collection.length );
+                                }
+                        });
                 this.listenTo( this.parent, 'theme:scroll', function() {
                         self.renderThemes( self.parent.page );
                 });
+                        this.listenTo( self.collection, 'query:empty', function() {
+                                $( 'body' ).addClass( 'no-results' );
+                        });
+                this.listenTo( this.parent, 'theme:close', function() {
+                        if ( self.overlay ) {
+                                self.overlay.closeOverlay();
+                        }
+                } );
+                        this.listenTo( this.parent, 'theme:scroll', function() {
+                                self.renderThemes( self.parent.page );
+                        });
                 // Bind keyboard events.
                 $( 'body' ).on( 'keyup', function( event ) {
                         if ( ! self.overlay ) {
                                 return;
+                        }
+                        this.listenTo( this.parent, 'theme:close', function() {
+                                if ( self.overlay ) {
+                                        self.overlay.closeOverlay();
+                                }
+                        } );
+                        // Pressing the right arrow key fires a theme:next event
+                        if ( event.keyCode === 39 ) {
+                                self.overlay.nextTheme();
+                        }
+                        // Bind keyboard events.
+                        $( 'body' ).on( 'keyup', function( event ) {
+                                if ( ! self.overlay ) {
+                                        return;
+                                }
                         // Pressing the left arrow key fires a theme:previous event
                         if ( event.keyCode === 37 ) {
                                 self.overlay.previousTheme();
+                        }
+                                // Pressing the right arrow key fires a theme:next event
+                                if ( event.keyCode === 39 ) {
+                                        self.overlay.nextTheme();
+                                }
+                        // Pressing the escape key fires a theme:collapse event
+                        if ( event.keyCode === 27 ) {
+                                self.overlay.collapse( event );
+                        }
+                });
+        },
+                                // Pressing the left arrow key fires a theme:previous event
+                                if ( event.keyCode === 37 ) {
+                                        self.overlay.previousTheme();
+                                }
+        // Manages rendering of theme pages
+        // and keeping theme count in sync
+        render: function() {
+                // Clear the DOM, please
+                this.$el.html( '' );
+                                // Pressing the escape key fires a theme:collapse event
+                                if ( event.keyCode === 27 ) {
+                                        self.overlay.collapse( event );
+                                }
+                        });
+                },
+                // If the user doesn't have switch capabilities
+                // or there is only one theme in the collection
+                // render the detailed view of the active theme
+                if ( themes.data.themes.length === 1 ) {
+                // Manages rendering of theme pages
+                // and keeping theme count in sync
+                render: function() {
+                        // Clear the DOM, please
+                        this.$el.html( '' );
                         // Constructs the view
                         this.singleTheme = new themes.view.Details({
                                 model: this.collection.models[0]
                         });
+                        // If the user doesn't have switch capabilities
+                        // or there is only one theme in the collection
+                        // render the detailed view of the active theme
+                        if ( themes.data.themes.length === 1 ) {
+                        // Render and apply a 'single-theme' class to our container
+                        this.singleTheme.render();
+                        this.$el.addClass( 'single-theme' );
+                        this.$el.append( this.singleTheme.el );
+                }
+                                // Constructs the view
+                                this.singleTheme = new themes.view.Details({
+                                        model: this.collection.models[0]
+                                });
+                // Generate the themes
+                // Using page instance
+                // While checking the collection has items
+                if ( this.options.collection.size() > 0 ) {
+                        this.renderThemes( this.parent.page );
+                }
+                                // Render and apply a 'single-theme' class to our container
+                                this.singleTheme.render();
+                                this.$el.addClass( 'single-theme' );
+                                this.$el.append( this.singleTheme.el );
+                        }
+                // Display a live theme count for the collection
+                this.count.text( this.collection.count ? this.collection.count : this.collection.length );
+        },
+                        // Generate the themes
+                        // Using page instance
+                        // While checking the collection has items
+                        if ( this.options.collection.size() > 0 ) {
+                                this.renderThemes( this.parent.page );
+                        }
+        // Iterates through each instance of the collection
+        // and renders each theme module
+        renderThemes: function( page ) {
+                var self = this;
+                        // Display a live theme count for the collection
+                        this.count.text( this.collection.count ? this.collection.count : this.collection.length );
+                },
+                self.instance = self.collection.paginate( page );
+                // Iterates through each instance of the collection
+                // and renders each theme module
+                renderThemes: function( page ) {
+                        var self = this;
+                // If we have no more themes bail
+                if ( self.instance.size() === 0 ) {
+                        // Fire a no-more-themes event.
+                        this.parent.trigger( 'theme:end' );
+                        return;
+                }
+                        self.instance = self.collection.paginate( page );
+                // Make sure the add-new stays at the end
+                if ( page >= 1 ) {
+                        $( '.add-new-theme' ).remove();
+                }
+                        // If we have no more themes bail
+                        if ( self.instance.size() === 0 ) {
+                                // Fire a no-more-themes event.
+                                this.parent.trigger( 'theme:end' );
+                                return;
+                        }
+                // Loop through the themes and setup each theme view
+                self.instance.each( function( theme ) {
+                        self.theme = new themes.view.Theme({
+                                model: theme,
+                                parent: self
+                        });
+                        // Make sure the add-new stays at the end
+                        if ( page >= 1 ) {
+                                $( '.add-new-theme' ).remove();
+                        }
+                        // Render the views...
+                        self.theme.render();
+                        // and append them to div.themes
+                        self.$el.append( self.theme.el );
+                        // Loop through the themes and setup each theme view
+                        self.instance.each( function( theme ) {
+                                self.theme = new themes.view.Theme({
+                                        model: theme,
+                                        parent: self
+                                });
                         // Binds to theme:expand to show the modal box
                         // with the theme details
                         self.listenTo( self.theme, 'theme:expand', self.expand, self );
                 });
+                                // Render the views...
+                                self.theme.render();
+                                // and append them to div.themes
+                                self.$el.append( self.theme.el );
                 // '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>' );
+                }
+                                // Binds to theme:expand to show the modal box
+                                // with the theme details
+                                self.listenTo( self.theme, 'theme:expand', self.expand, self );
+                        });
+                this.parent.page++;
+        },
+                        // '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>' );
+                        }
+        // Grabs current theme and puts it at the beginning of the collection
+        currentTheme: function() {
+                var self = this,
+                        current;
+                        this.parent.page++;
+                },
+                current = self.collection.findWhere({ active: true });
+                // Grabs current theme and puts it at the beginning of the collection
+                currentTheme: function() {
+                        var self = this,
+                                current;
+                // Move the active theme to the beginning of the collection
+                if ( current ) {
+                        self.collection.remove( current );
+                        self.collection.add( current, { at:0 } );
+                }
+        },
+                        current = self.collection.findWhere({ active: true });
+        // Sets current view
+        setView: function( view ) {
+                return view;
+        },
+                        // Move the active theme to the beginning of the collection
+                        if ( current ) {
+                                self.collection.remove( current );
+                                self.collection.add( current, { at:0 } );
+                        }
+                },
         // Renders the overlay with the ThemeDetails view
         // Uses the current model data
         expand: function( id ) {
                 var self = this;
+                // Sets current view
+                setView: function( view ) {
+                        return view;
+                },
+                // Set the current theme model
+                this.model = self.collection.get( id );
+                // Renders the overlay with the ThemeDetails view
+                // Uses the current model data
+                expand: function( id ) {
+                        var self = this;
                 // Trigger a route update for the current model
                 themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.id ) );
+                        // Set the current theme model
+                        this.model = self.collection.get( id );
+                // Sets this.view to 'detail'
+                this.setView( 'detail' );
+                $( 'body' ).addClass( 'modal-open' );
+                        // Trigger a route update for the current model
+                        themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.id ) );
+                // Set up the theme details view
+                this.overlay = new themes.view.Details({
+                        model: self.model
+                });
+                        // Sets this.view to 'detail'
+                        this.setView( 'detail' );
+                        $( 'body' ).addClass( 'modal-open' );
+                this.overlay.render();
+                this.$overlay.html( this.overlay.el );
+                        // Set up the theme details view
+                        this.overlay = new themes.view.Details({
+                                model: self.model
+                        });
+                // Bind to theme:next and theme:previous
+                // triggered by the arrow keys
+                //
+                // Keep track of the current model so we
+                // can infer an index position
+                this.listenTo( this.overlay, 'theme:next', function() {
+                        // Renders the next theme on the overlay
+                        self.next( [ self.model.cid ] );
+                        this.overlay.render();
+                        this.$overlay.html( this.overlay.el );
+                })
+                .listenTo( this.overlay, 'theme:previous', function() {
+                        // Renders the previous theme on the overlay
+                        self.previous( [ self.model.cid ] );
+                });
+        },
+                        // Bind to theme:next and theme:previous
+                        // triggered by the arrow keys
+                        //
+                        // Keep track of the current model so we
+                        // can infer an index position
+                        this.listenTo( this.overlay, 'theme:next', function() {
+                                // Renders the next theme on the overlay
+                                self.next( [ self.model.cid ] );
         // This method renders the next theme on the overlay modal
         // based on the current position in the collection
         // @params [model cid]
         next: function( args ) {
                 var self = this,
                         model, nextModel;
+                        })
+                                .listenTo( this.overlay, 'theme:previous', function() {
+                                        // Renders the previous theme on the overlay
+                                        self.previous( [ self.model.cid ] );
+                                });
+                },
+                // Get the current theme
+                model = self.collection.get( args[0] );
+                // Find the next model within the collection
+                nextModel = self.collection.at( self.collection.indexOf( model ) + 1 );
+                // This method renders the next theme on the overlay modal
+                // based on the current position in the collection
+                // @params [model cid]
+                next: function( args ) {
+                        var self = this,
+                                model, nextModel;
+                // Sanity check which also serves as a boundary test
+                if ( nextModel !== undefined ) {
+                        // Get the current theme
+                        model = self.collection.get( args[0] );
+                        // Find the next model within the collection
+                        nextModel = self.collection.at( self.collection.indexOf( model ) + 1 );
+                        // We have a new theme...
+                        // Close the overlay
+                        this.overlay.closeOverlay();
+                        // Sanity check which also serves as a boundary test
+                        if ( nextModel !== undefined ) {
+                        // Trigger a route update for the current model
+                        self.theme.trigger( 'theme:expand', nextModel.cid );
+                                // We have a new theme...
+                                // Close the overlay
+                                this.overlay.closeOverlay();
+                }
         },
+                                // Trigger a route update for the current model
+                                self.theme.trigger( 'theme:expand', nextModel.cid );
+        // This method renders the previous theme on the overlay modal
+        // based on the current position in the collection
+        // @params [model cid]
+        previous: function( args ) {
+                var self = this,
+                        model, previousModel;
+                        }
+                },
+                // Get the current theme
+                model = self.collection.get( args[0] );
+                // Find the previous model within the collection
+                previousModel = self.collection.at( self.collection.indexOf( model ) - 1 );
+                // This method renders the previous theme on the overlay modal
+                // based on the current position in the collection
+                // @params [model cid]
+                previous: function( args ) {
+                        var self = this,
+                                model, previousModel;
+                if ( previousModel !== undefined ) {
+                        // Get the current theme
+                        model = self.collection.get( args[0] );
+                        // Find the previous model within the collection
+                        previousModel = self.collection.at( self.collection.indexOf( model ) - 1 );
+                        // We have a new theme...
+                        // Close the overlay
+                        this.overlay.closeOverlay();
+                        if ( previousModel !== undefined ) {
+                        // Trigger a route update for the current model
+                        self.theme.trigger( 'theme:expand', previousModel.cid );
+                                // We have a new theme...
+                                // Close the overlay
+                                this.overlay.closeOverlay();
+                                // Trigger a route update for the current model
+                                self.theme.trigger( 'theme:expand', previousModel.cid );
+                        }
+                }
+        }
+});
+        });
 // Search input view controller.
 themes.view.Search = wp.Backbone.View.extend({
+        themes.view.Search = wp.Backbone.View.extend({
         tagName: 'input',
         className: 'wp-filter-search',
         id: 'wp-filter-search-input',
         searching: false,
+                tagName: 'input',
+                className: 'wp-filter-search',
+                id: 'wp-filter-search-input',
+                searching: false,
         attributes: {
                 placeholder: l10n.searchPlaceholder,
                 type: 'search'
         },
+                attributes: {
+                        placeholder: l10n.searchPlaceholder,
+                        type: 'search'
+                },
         events: {
                 'input':  'search',
                 'keyup':  'search',
                 'change': 'search',
                 'search': 'search',
                 'blur':   'pushState'
         },
+                events: {
+                        'input':  'search',
+                        'keyup':  'search',
+                        'change': 'search',
+                        'search': 'search',
+                        'blur':   'pushState'
+                },
         initialize: function( options ) {
+                initialize: function( options ) {
                 this.parent = options.parent;
+                        this.parent = options.parent;
                 this.listenTo( this.parent, 'theme:close', function() {
                         this.searching = false;
                 } );
+                        this.listenTo( this.parent, 'theme:close', function() {
+                                this.searching = false;
+                        } );
         },
+                },
         // Runs a search on the theme collection.
         search: function( event ) {
                 var options = {};
+                // 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 = '';
+                }
+                        // 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' );
+                }
+                        // Lose input focus when pressing enter
+                        if ( event.which === 13 ) {
+                                this.$el.trigger( 'blur' );
+                        }
                 this.collection.doSearch( event.target.value );
+                        this.collection.doSearch( event.target.value );
                 // if search is initiated and key is not return
                 if ( this.searching && event.which !== 13 ) {
                         options.replace = true;
                 } else {
                         this.searching = true;
+                }
+                        // if search is initiated and key is not return
+                        if ( this.searching && event.which !== 13 ) {
+                                options.replace = true;
+                        } else {
+                                this.searching = true;
+                        }
                 // Update the URL hash
                 if ( event.target.value ) {
                         themes.router.navigate( themes.router.baseUrl( themes.router.searchPath + event.target.value ), options );
                 } else {
                         themes.router.navigate( themes.router.baseUrl( '' ) );
+                }
         },
+                        // Update the URL hash
+                        if ( event.target.value ) {
+                                themes.router.navigate( themes.router.baseUrl( themes.router.searchPath + event.target.value ), options );
+                        } else {
+                                themes.router.navigate( themes.router.baseUrl( '' ) );
+                        }
+                },
         pushState: function( event ) {
                 var url = themes.router.baseUrl( '' );
+                pushState: function( event ) {
+                        var url = themes.router.baseUrl( '' );
                 if ( event.target.value ) {
                         url = themes.router.baseUrl( themes.router.searchPath + event.target.value );
+                }
+                        if ( event.target.value ) {
+                                url = themes.router.baseUrl( themes.router.searchPath + event.target.value );
+                        }
                 this.searching = false;
                 themes.router.navigate( url );
+                        this.searching = false;
+                        themes.router.navigate( url );
+        }
 });
+                }
+        });
 // Sets up the routes events for relevant url queries
 // Listens to [theme] and [search] params
 themes.Router = Backbone.Router.extend({
+        themes.Router = Backbone.Router.extend({
         routes: {
                 'themes.php?theme=:slug': 'theme',
                 'themes.php?search=:query': 'search',
                 'themes.php?s=:query': 'search',
                 'themes.php': 'themes',
                 '': 'themes'
         },
+                routes: {
+                        'themes.php?theme=:slug': 'theme',
+                        'themes.php?search=:query': 'search',
+                        'themes.php?s=:query': 'search',
+                        'themes.php': 'themes',
+                        '': 'themes'
+                },
         baseUrl: function( url ) {
                 return 'themes.php' + url;
         },
+                baseUrl: function( url ) {
+                        return 'themes.php' + url;
+                },
         themePath: '?theme=',
         searchPath: '?search=',
+                themePath: '?theme=',
+                searchPath: '?search=',
         search: function( query ) {
                 $( '.wp-filter-search' ).val( query );
         },
+                search: function( query ) {
+                        $( '.wp-filter-search' ).val( query );
+                },
         themes: function() {
                 $( '.wp-filter-search' ).val( '' );
         },
+                themes: function() {
+                        $( '.wp-filter-search' ).val( '' );
+                },
+        navigate: function() {
+                if ( Backbone.history._hasPushState ) {
+                        Backbone.Router.prototype.navigate.apply( this, arguments );
+                navigate: function() {
+                        if ( Backbone.history._hasPushState ) {
+                                Backbone.Router.prototype.navigate.apply( this, arguments );
+                        }
+                }
+        }
 });
+        });
 // Execute and setup the application
 themes.Run = {
         init: function() {
                 // Initializes the blog's theme library view
                 // Create a new collection with data
                 this.themes = new themes.Collection( themes.data.themes );
+        themes.Run = {
+                init: function() {
+                        // Initializes the blog's theme library view
+                        // Create a new collection with data
+                        this.themes = new themes.Collection( themes.data.themes );
                 // Set up the view
                 this.view = new themes.view.Appearance({
                         collection: this.themes
                 });
+                        // Set up the view
+                        this.view = new themes.view.Appearance({
+                                collection: this.themes
+                        });
                 this.render();
         },
+                        this.render();
+                },
         render: function() {
+                render: function() {
                 // Render results
                 this.view.render();
                 this.routes();
+                        // Render results
+                        this.view.render();
+                        this.routes();
                 Backbone.history.start({
                         root: themes.data.settings.adminUrl,
                         pushState: true,
                         hashChange: false
                 });
         },
+                        Backbone.history.start({
+                                root: themes.data.settings.adminUrl,
+                                pushState: true,
+                                hashChange: false
+                        });
+                },
         routes: function() {
                 var self = this;
                 // Bind to our global thx object
                 // so that the object is available to sub-views
                 themes.router = new themes.Router();
+                routes: function() {
+                        var self = this;
+                        // Bind to our global thx object
+                        // so that the object is available to sub-views
+                        themes.router = new themes.Router();
                 // Handles theme details route event
                 themes.router.on( 'route:theme', function( slug ) {
                         self.view.view.expand( slug );
                 });
+                        // Handles theme details route event
+                        themes.router.on( 'route:theme', function( slug ) {
+                                self.view.view.expand( slug );
+                        });
                 themes.router.on( 'route:themes', function() {
                         self.themes.doSearch( '' );
                         self.view.trigger( 'theme:close' );
                 });
+                        themes.router.on( 'route:themes', function() {
+                                self.themes.doSearch( '' );
+                                self.view.trigger( 'theme:close' );
+                        });
                 // Handles search route event
                 themes.router.on( 'route:search', function() {
                         $( '.wp-filter-search' ).trigger( 'keyup' );
                 });
+                        // Handles search route event
+                        themes.router.on( 'route:search', function() {
+                                $( '.wp-filter-search' ).trigger( 'keyup' );
+                        });
                 this.extraRoutes();
         },
+                        this.extraRoutes();
+                },
         extraRoutes: function() {
                 return false;
+        }
 };
+                extraRoutes: function() {
+                        return false;
+                }
+        };
 // Extend the main Search view
 themes.view.InstallerSearch =  themes.view.Search.extend({
+        themes.view.InstallerSearch =  themes.view.Search.extend({
         events: {
                 'keyup': 'search'
         },
+                events: {
+                        'keyup': 'search'
+                },
         // Handles Ajax request for searching through themes in public repo
         search: function( event ) {
+                // Handles Ajax request for searching through themes in public repo
+                search: function( event ) {
                 // Tabbing or reverse tabbing into the search input shouldn't trigger a search
                 if ( event.type === 'keyup' && ( event.which === 9 || event.which === 16 ) ) {
                         return;
+                }
+                        // Tabbing or reverse tabbing into the search input shouldn't trigger a search
+                        if ( event.type === 'keyup' && ( event.which === 9 || event.which === 16 ) ) {
+                                return;
+                        }
                 this.collection = this.options.parent.view.collection;
+                        this.collection = this.options.parent.view.collection;
                 // Clear on escape.
                 if ( event.type === 'keyup' && event.which === 27 ) {
                         event.target.value = '';
+                }
+                        // Clear on escape.
+                        if ( event.type === 'keyup' && event.which === 27 ) {
+                                event.target.value = '';
+                        }
                 _.debounce( _.bind( this.doSearch, this ), 300 )( event.target.value );
         },
+                        _.debounce( _.bind( this.doSearch, this ), 300 )( event.target.value );
+                },
         doSearch: _.debounce( function( value ) {
                 var request = {};
+                doSearch: _.debounce( function( value ) {
+                        var request = {};
                 request.search = value;
+                        request.search = value;
                 // Intercept an [author] search.
                 //
                 // If input value starts with `author:` send a request
                 // for `author` instead of a regular `search`
                 if ( value.substring( 0, 7 ) === 'author:' ) {
                         request.search = '';
                         request.author = value.slice( 7 );
+                }
+                        // Intercept an [author] search.
+                        //
+                        // If input value starts with `author:` send a request
+                        // for `author` instead of a regular `search`
+                        if ( value.substring( 0, 7 ) === 'author:' ) {
+                                request.search = '';
+                                request.author = value.slice( 7 );
+                        }
                 // Intercept a [tag] search.
                 //
                 // If input value starts with `tag:` send a request
                 // for `tag` instead of a regular `search`
                 if ( value.substring( 0, 4 ) === 'tag:' ) {
                         request.search = '';
                         request.tag = [ value.slice( 4 ) ];
+                }
+                        // Intercept a [tag] search.
+                        //
+                        // If input value starts with `tag:` send a request
+                        // for `tag` instead of a regular `search`
+                        if ( value.substring( 0, 4 ) === 'tag:' ) {
+                                request.search = '';
+                                request.tag = [ value.slice( 4 ) ];
+                        }
                 $( '.filter-links li > a.current' ).removeClass( 'current' );
                 $( 'body' ).removeClass( 'show-filters filters-applied' );
+                        $( '.filter-links li > a.current' ).removeClass( 'current' );
+                        $( 'body' ).removeClass( 'show-filters filters-applied' );
                 // Get the themes by sending Ajax POST request to api.wordpress.org/themes
                 // or searching the local cache
                 this.collection.query( request );
+                        // 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( themes.router.searchPath + value ), { replace: true } );
         }, 300 )
 });
+                        // Set route
+                        themes.router.navigate( themes.router.baseUrl( themes.router.searchPath + value ), { replace: true } );
+                }, 300 )
+        });
 themes.view.Installer = themes.view.Appearance.extend({
+        themes.view.Installer = themes.view.Appearance.extend({
         el: '#wpbody-content .wrap',
+                el: '#wpbody-content .wrap',
         // Register events for sorting and filters in theme-navigation
         events: {
                 'click .filter-links li > a': 'onSort',
                 'click .theme-filter': 'onFilter',
                 'click .drawer-toggle': 'moreFilters',
                 'click .filter-drawer .apply-filters': 'applyFilters',
                 'click .filter-group [type="checkbox"]': 'addFilter',
                 'click .filter-drawer .clear-filters': 'clearFilters',
                 'click .filtered-by': 'backToFilters'
         },
+                // Register events for sorting and filters in theme-navigation
+                events: {
+                        'click .filter-links li > a': 'onSort',
+                        'click .theme-filter': 'onFilter',
+                        'click .drawer-toggle': 'moreFilters',
+                        'click .filter-drawer .apply-filters': 'applyFilters',
+                        'click .filter-group [type="checkbox"]': 'addFilter',
+                        'click .filter-drawer .clear-filters': 'clearFilters',
+                        'click .filtered-by': 'backToFilters'
+                },
         // Initial render method
         render: function() {
                 var self = this;
+                // Initial render method
+                render: function() {
+                        var self = this;
                 this.search();
                 this.uploader();
+                        this.search();
+                        this.uploader();
                 this.collection = new themes.Collection();
+                        this.collection = new themes.Collection();
                 // Bump `collection.currentQuery.page` and request more themes if we hit the end of the page.
                 this.listenTo( this, 'theme:end', function() {
+                        // Bump `collection.currentQuery.page` and request more themes if we hit the end of the page.
+                        this.listenTo( this, 'theme:end', function() {
                         // Make sure we are not already loading
                         if ( self.collection.loadingThemes ) {
                                 return;
+                        }
+                                // Make sure we are not already loading
+                                if ( self.collection.loadingThemes ) {
+                                        return;
+                                }
                         // Set loadingThemes to true and bump page instance of currentQuery.
                         self.collection.loadingThemes = true;
                         self.collection.currentQuery.page++;
+                                // Set loadingThemes to true and bump page instance of currentQuery.
+                                self.collection.loadingThemes = true;
+                                self.collection.currentQuery.page++;
                         // Use currentQuery.page to build the themes request.
                         _.extend( self.collection.currentQuery.request, { page: self.collection.currentQuery.page } );
                         self.collection.query( self.collection.currentQuery.request );
                 });
+                                // Use currentQuery.page to build the themes request.
+                                _.extend( self.collection.currentQuery.request, { page: self.collection.currentQuery.page } );
+                                self.collection.query( self.collection.currentQuery.request );
+                        });
                 this.listenTo( this.collection, 'query:success', function() {
                         $( 'body' ).removeClass( 'loading-content' );
                         $( '.theme-browser' ).find( 'div.error' ).remove();
                 });
+                        this.listenTo( this.collection, 'query:success', function() {
+                                $( 'body' ).removeClass( 'loading-content' );
+                                $( '.theme-browser' ).find( 'div.error' ).remove();
+                        });
                 this.listenTo( this.collection, 'query:fail', function() {
                         $( 'body' ).removeClass( 'loading-content' );
                         $( '.theme-browser' ).find( 'div.error' ).remove();
                         $( '.theme-browser' ).find( 'div.themes' ).before( '<div class="error"><p>' + l10n.error + '</p></div>' );
                 });
+                        this.listenTo( this.collection, 'query:fail', function() {
+                                $( 'body' ).removeClass( 'loading-content' );
+                                $( '.theme-browser' ).find( 'div.error' ).remove();
+                                $( '.theme-browser' ).find( 'div.themes' ).before( '<div class="error"><p>' + l10n.error + '</p></div>' );
+                        });
                 if ( this.view ) {
                         this.view.remove();
+                }
+                        if ( this.view ) {
+                                this.view.remove();
+                        }
                 // Set ups the view and passes the section argument
                 this.view = new themes.view.Themes({
                         collection: this.collection,
                         parent: this
                 });
+                        // Set ups the view and passes the section argument
+                        this.view = new themes.view.Themes({
+                                collection: this.collection,
+                                parent: this
+                        });
                 // Reset pagination every time the install view handler is run
                 this.page = 0;
+                        // Reset pagination every time the install view handler is run
+                        this.page = 0;
                 // Render and append
                 this.$el.find( '.themes' ).remove();
                 this.view.render();
                 this.$el.find( '.theme-browser' ).append( this.view.el ).addClass( 'rendered' );
         },
+                        // Render and append
+                        this.$el.find( '.themes' ).remove();
+                        this.view.render();
+                        this.$el.find( '.theme-browser' ).append( this.view.el ).addClass( 'rendered' );
+                },
         // Handles all the rendering of the public theme directory
         browse: function( section ) {
                 // Create a new collection with the proper theme data
                 // for each section
                 this.collection.query( { browse: section } );
         },
+                // Handles all the rendering of the public theme directory
+                browse: function( section ) {
+                        // Create a new collection with the proper theme data
+                        // for each section
+                        this.collection.query( { browse: section } );
+                },
         // Sorting navigation
         onSort: function( event ) {
                 var $el = $( event.target ),
                         sort = $el.data( 'sort' );
+                // Sorting navigation
+                onSort: function( event ) {
+                        var $el = $( event.target ),
+                                sort = $el.data( 'sort' );
                 event.preventDefault();
+                        event.preventDefault();
                 $( 'body' ).removeClass( 'filters-applied show-filters' );
+                        $( 'body' ).removeClass( 'filters-applied show-filters' );
                 // Bail if this is already active
                 if ( $el.hasClass( this.activeClass ) ) {
                         return;
+                }
+                        // Bail if this is already active
+                        if ( $el.hasClass( this.activeClass ) ) {
+                                return;
+                        }
                 this.sort( sort );
+                        this.sort( sort );
                 // Trigger a router.naviagte update
                 themes.router.navigate( themes.router.baseUrl( themes.router.browsePath + sort ) );
         },
+                        // Trigger a router.naviagte update
+                        themes.router.navigate( themes.router.baseUrl( themes.router.browsePath + sort ) );
+                },
         sort: function( sort ) {
                 this.clearSearch();
+                sort: function( sort ) {
+                        this.clearSearch();
                 $( '.filter-links li > a, .theme-filter' ).removeClass( this.activeClass );
                 $( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
+                        $( '.filter-links li > a, .theme-filter' ).removeClass( this.activeClass );
+                        $( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
                 this.browse( sort );
         },
+                        this.browse( sort );
+                },
         // Filters and Tags
         onFilter: function( event ) {
                 var request,
                         $el = $( event.target ),
                         filter = $el.data( 'filter' );
+                // Filters and Tags
+                onFilter: function( event ) {
+                        var request,
+                                $el = $( event.target ),
+                                filter = $el.data( 'filter' );
                 // Bail if this is already active
                 if ( $el.hasClass( this.activeClass ) ) {
                         return;
+                }
+                        // Bail if this is already active
+                        if ( $el.hasClass( this.activeClass ) ) {
+                                return;
+                        }
                 $( '.filter-links li > a, .theme-section' ).removeClass( this.activeClass );
                 $el.addClass( this.activeClass );
+                        $( '.filter-links li > a, .theme-section' ).removeClass( this.activeClass );
+                        $el.addClass( this.activeClass );
                 if ( ! filter ) {
                         return;
+                }
+                        if ( ! filter ) {
+                                return;
+                        }
                 // Construct the filter request
                 // using the default values
                 filter = _.union( filter, this.filtersChecked() );
                 request = { tag: [ filter ] };
+                        // Construct the filter request
+                        // using the default values
+                        filter = _.union( filter, this.filtersChecked() );
+                        request = { tag: [ filter ] };
                 // Get the themes by sending Ajax POST request to api.wordpress.org/themes
                 // or searching the local cache
                 this.collection.query( request );
         },
+                        // Get the themes by sending Ajax POST request to api.wordpress.org/themes
+                        // or searching the local cache
+                        this.collection.query( request );
+                },
         // Clicking on a checkbox to add another filter to the request
         addFilter: function() {
                 this.filtersChecked();
         },
+                // Clicking on a checkbox to add another filter to the request
+                addFilter: function() {
+                        this.filtersChecked();
+                },
         // Applying filters triggers a tag request
         applyFilters: function( event ) {
                 var name,
                         tags = this.filtersChecked(),
                         request = { tag: tags },
                         filteringBy = $( '.filtered-by .tags' );
+                // Applying filters triggers a tag request
+                applyFilters: function( event ) {
+                        var name,
+                                tags = this.filtersChecked(),
+                                request = { tag: tags },
+                                filteringBy = $( '.filtered-by .tags' );
                 if ( event ) {
                         event.preventDefault();
+                }
+                        if ( event ) {
+                                event.preventDefault();
+                        }
                 $( 'body' ).addClass( 'filters-applied' );
                 $( '.filter-links li > a.current' ).removeClass( 'current' );
                 filteringBy.empty();
+                        $( 'body' ).addClass( 'filters-applied' );
+                        $( '.filter-links li > a.current' ).removeClass( 'current' );
+                        filteringBy.empty();
                 _.each( tags, function( tag ) {
                         name = $( 'label[for="filter-id-' + tag + '"]' ).text();
                         filteringBy.append( '<span class="tag">' + name + '</span>' );
                 });
+                        _.each( tags, function( tag ) {
+                                name = $( 'label[for="filter-id-' + tag + '"]' ).text();
+                                filteringBy.append( '<span class="tag">' + name + '</span>' );
+                        });
                 // Get the themes by sending Ajax POST request to api.wordpress.org/themes
                 // or searching the local cache
                 this.collection.query( request );
         },
+                        // Get the themes by sending Ajax POST request to api.wordpress.org/themes
+                        // or searching the local cache
+                        this.collection.query( request );
+                },
         // Get the checked filters
         // @return {array} of tags or false
         filtersChecked: function() {
                 var items = $( '.filter-group' ).find( ':checkbox' ),
                         tags = [];
+                // Get the checked filters
+                // @return {array} of tags or false
+                filtersChecked: function() {
+                        var items = $( '.filter-group' ).find( ':checkbox' ),
+                                tags = [];
                 _.each( items.filter( ':checked' ), function( item ) {
                         tags.push( $( item ).prop( 'value' ) );
                 });
+                        _.each( items.filter( ':checked' ), function( item ) {
+                                tags.push( $( item ).prop( 'value' ) );
+                        });
                 // When no filters are checked, restore initial state and return
                 if ( tags.length === 0 ) {
                         $( '.filter-drawer .apply-filters' ).find( 'span' ).text( '' );
                         $( '.filter-drawer .clear-filters' ).hide();
                         $( 'body' ).removeClass( 'filters-applied' );
                         return false;
+                }
+                        // When no filters are checked, restore initial state and return
+                        if ( tags.length === 0 ) {
+                                $( '.filter-drawer .apply-filters' ).find( 'span' ).text( '' );
+                                $( '.filter-drawer .clear-filters' ).hide();
+                                $( 'body' ).removeClass( 'filters-applied' );
+                                return false;
+                        }
                 $( '.filter-drawer .apply-filters' ).find( 'span' ).text( tags.length );
                 $( '.filter-drawer .clear-filters' ).css( 'display', 'inline-block' );
+                        $( '.filter-drawer .apply-filters' ).find( 'span' ).text( tags.length );
+                        $( '.filter-drawer .clear-filters' ).css( 'display', 'inline-block' );
                 return tags;
         },
+                        return tags;
+                },
         activeClass: 'current',
+                activeClass: 'current',
         // Overwrite search container class to append search
         // in new location
         searchContainer: $( '.wp-filter .search-form' ),
+                // Overwrite search container class to append search
+                // in new location
+                searchContainer: $( '.wp-filter .search-form' ),
+        uploader: function() {
+                $( 'a.upload' ).on( 'click', function( event ) {
+                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 } );
+                        });
+                },
+                // Toggle the full filters navigation
+                moreFilters: 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 } );
-                });
-        },
         // Toggle the full filters navigation
         moreFilters: function( event ) {
                 event.preventDefault();
+                        if ( $( 'body' ).hasClass( 'filters-applied' ) ) {
+                                return this.backToFilters();
+                        }
+                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();
+                        }
+                // 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();
+                this.clearSearch();
+                        themes.router.navigate( themes.router.baseUrl( '' ) );
+                        $( 'body' ).toggleClass( 'show-filters' );
+                },
+                themes.router.navigate( themes.router.baseUrl( '' ) );
+                $( 'body' ).toggleClass( 'show-filters' );
+        },
+                // Clears all the checked filters
+                // @uses filtersChecked()
+                clearFilters: function( event ) {
+                        var items = $( '.filter-group' ).find( ':checkbox' ),
+                                self = this;
+        // Clears all the checked filters
+        // @uses filtersChecked()
+        clearFilters: function( event ) {
+                var items = $( '.filter-group' ).find( ':checkbox' ),
+                        self = this;
+                        event.preventDefault();
+                event.preventDefault();
+                        _.each( items.filter( ':checked' ), function( item ) {
+                                $( item ).prop( 'checked', false );
+                                return self.filtersChecked();
+                        });
+                },
+                _.each( items.filter( ':checked' ), function( item ) {
+                        $( item ).prop( 'checked', false );
+                        return self.filtersChecked();
+                });
+        },
+                backToFilters: function( event ) {
+                        if ( event ) {
+                                event.preventDefault();
+                        }
+        backToFilters: function( event ) {
+                if ( event ) {
+                        event.preventDefault();
+                        $( 'body' ).removeClass( 'filters-applied' );
+                },
+                clearSearch: function() {
+                        $( '#wp-filter-search-input').val( '' );
+                }
+        });
+                $( 'body' ).removeClass( 'filters-applied' );
+        },
+        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'
+                },
+        clearSearch: function() {
+                $( '#wp-filter-search-input').val( '' );
+        }
+});
+                baseUrl: function( url ) {
+                        return 'theme-install.php' + url;
+                },
+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'
+        },
+                themePath: '?theme=',
+                browsePath: '?browse=',
+                searchPath: '?search=',
         baseUrl: function( url ) {
                 return 'theme-install.php' + url;
         },
+                search: function( query ) {
+                        $( '.wp-filter-search' ).val( query );
+                },
+        themePath: '?theme=',
+        browsePath: '?browse=',
+        searchPath: '?search=',
+        search: function( query ) {
+                $( '.wp-filter-search' ).val( query );
+        },
+        navigate: function() {
+                if ( Backbone.history._hasPushState ) {
+                        Backbone.Router.prototype.navigate.apply( this, arguments );
+                navigate: function() {
+                        if ( Backbone.history._hasPushState ) {
+                                Backbone.Router.prototype.navigate.apply( this, arguments );
+                        }
+                }
+        }
+});
+        });
 themes.RunInstaller = {
+        themes.RunInstaller = {
         init: function() {
                 // Set up the view
                 // Passes the default 'section' as an option
                 this.view = new themes.view.Installer({
                         section: 'featured',
                         SearchView: themes.view.InstallerSearch
                 });
+                init: function() {
+                        // Set up the view
+                        // Passes the default 'section' as an option
+                        this.view = new themes.view.Installer({
+                                section: 'featured',
+                                SearchView: themes.view.InstallerSearch
+                        });
                 // Render results
                 this.render();
+                        // Render results
+                        this.render();
         },
+                },
         render: function() {
+                render: function() {
                 // Render results
                 this.view.render();
                 this.routes();
+                        // Render results
+                        this.view.render();
+                        this.routes();
                 Backbone.history.start({
                         root: themes.data.settings.adminUrl,
                         pushState: true,
                         hashChange: false
                 });
         },
+                        Backbone.history.start({
+                                root: themes.data.settings.adminUrl,
+                                pushState: true,
+                                hashChange: false
+                        });
+                },
         routes: function() {
                 var self = this,
                         request = {};
+                routes: function() {
+                        var self = this,
+                                request = {};
                 // Bind to our global `wp.themes` object
                 // so that the router is available to sub-views
                 themes.router = new themes.InstallerRouter();
+                        // Bind to our global `wp.themes` object
+                        // so that the router is available to sub-views
+                        themes.router = new themes.InstallerRouter();
                 // Handles `theme` route event
                 // Queries the API for the passed theme slug
                 themes.router.on( 'route:preview', function( slug ) {
                         request.theme = slug;
                         self.view.collection.query( request );
                 });
+                        // Handles `theme` route event
+                        // Queries the API for the passed theme slug
+                        themes.router.on( 'route:preview', function( slug ) {
+                                request.theme = slug;
+                                self.view.collection.query( request );
+                        });
                 // Handles sorting / browsing routes
                 // Also handles the root URL triggering a sort request
                 // for `featured`, the default view
                 themes.router.on( 'route:sort', function( sort ) {
                         if ( ! sort ) {
                                 sort = 'featured';
+                        }
                         self.view.sort( sort );
                         self.view.trigger( 'theme:close' );
                 });
+                        // Handles sorting / browsing routes
+                        // Also handles the root URL triggering a sort request
+                        // for `featured`, the default view
+                        themes.router.on( 'route:sort', function( sort ) {
+                                if ( ! sort ) {
+                                        sort = 'featured';
+                                }
+                                self.view.sort( sort );
+                                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' );
                 });
+                        // 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' );
                 });
+                        // The `search` route event. The router populates the input field.
+                        themes.router.on( 'route:search', function() {
+                                $( '.wp-filter-search' ).focus().trigger( 'keyup' );
+                        });
                 this.extraRoutes();
         },
+                        this.extraRoutes();
+                },
         extraRoutes: function() {
                 return false;
+        }
 };
+                extraRoutes: function() {
+                        return false;
+                }
+        };
 // Ready...
 $( document ).ready(function() {
         if ( themes.isInstall ) {
                 themes.RunInstaller.init();
         } else {
                 themes.Run.init();
+        }
+        $( document ).ready(function() {
+                if ( themes.isInstall ) {
+                        themes.RunInstaller.init();
+                } else {
+                        themes.Run.init();
+                }
+        $( '.broken-themes .delete-theme' ).on( 'click', function() {
+                return confirm( _wpThemeSettings.settings.confirmDelete );
+                $( '.broken-themes .delete-theme' ).on( 'click', function() {
+                        return confirm( _wpThemeSettings.settings.confirmDelete );
+                });
         });
-});
 })( jQuery );
 …
         };
         $(window).resize(function(){ tb_position(); });
+});
+});
+ No newline at end of file

src/wp-admin/themes.php

 // Help tab: Overview
 if ( current_user_can( 'switch_themes' ) ) {
         $help_overview  = '<p>' . __( 'This screen is used for managing your installed themes. Aside from the default theme(s) included with your WordPress installation, themes are designed and developed by third parties.' ) . '</p>' .
                 '<p>' . __( 'From this screen you can:' ) . '</p>' .
                 '<ul><li>' . __( 'Hover or tap to see Activate and Live Preview buttons' ) . '</li>' .
                 '<li>' . __( 'Click on the theme to see the theme name, version, author, description, tags, and the Delete link' ) . '</li>' .
                 '<li>' . __( 'Click Customize for the current theme or Live Preview for any other theme to see a live preview' ) . '</li></ul>' .
                 '<p>' . __( 'The current theme is displayed highlighted as the first theme.' ) . '</p>';
+                          '<p>' . __( 'From this screen you can:' ) . '</p>' .
+                          '<ul><li>' . __( 'Hover or tap to see Activate and Live Preview buttons' ) . '</li>' .
+                          '<li>' . __( 'Click on the theme to see the theme name, version, author, description, tags, and the Delete link' ) . '</li>' .
+                          '<li>' . __( 'Click Customize for the current theme or Live Preview for any other theme to see a live preview' ) . '</li></ul>' .
+                          '<p>' . __( 'The current theme is displayed highlighted as the first theme.' ) . '</p>';
         get_current_screen()->add_help_tab( array(
                 'id'      => 'overview',
 …
                 'confirmDelete' => __( "Are you sure you want to delete this theme?\n\nClick 'Cancel' to go back, 'OK' to confirm the delete." ),
                 'adminUrl'      => parse_url( admin_url(), PHP_URL_PATH ),
         ),
         'l10n' => array(
                 'addNew' => __( 'Add New Theme' ),
                 'search'  => __( 'Search Installed Themes' ),
                 'searchPlaceholder' => __( 'Search installed themes...' ), // placeholder (no ellipsis)
         ),
+        'l10n' => array(
+                'addNew' => __( 'Add New Theme' ),
+                'search'  => __( 'Search Installed Themes' ),
+                'searchPlaceholder' => __( 'Search installed themes...' ), // placeholder (no ellipsis)
+        ),
 ) );
 add_thickbox();
 …
 require_once( ABSPATH . 'wp-admin/admin-header.php' );
 ?>
+<div class="wrap">
+        <h2><?php esc_html_e( 'Themes' ); ?>
+                <span class="title-count theme-count"><?php echo count( $themes ); ?></span>
+        <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
+                <a href="<?php echo admin_url( 'theme-install.php' ); ?>" class="hide-if-no-js add-new-h2"><?php echo esc_html_x( 'Add New', 'Add new theme' ); ?></a>
+        <?php endif; ?>
+        </h2>
+<?php
+if ( ! validate_current_theme() || isset( $_GET['broken'] ) ) : ?>
+<div id="message1" class="updated"><p><?php _e('The active theme is broken. Reverting to the default theme.'); ?></p></div>
+<?php elseif ( isset($_GET['activated']) ) :
+                if ( isset( $_GET['previewed'] ) ) { ?>
+                <div id="message2" class="updated"><p><?php printf( __( 'Settings saved and theme activated. <a href="%s">Visit site</a>' ), home_url( '/' ) ); ?></p></div>
+                <?php } else { ?>
+<div id="message2" class="updated"><p><?php printf( __( 'New theme activated. <a href="%s">Visit site</a>' ), home_url( '/' ) ); ?></p></div><?php
+                }
+        elseif ( isset($_GET['deleted']) ) : ?>
+<div id="message3" class="updated"><p><?php _e('Theme deleted.') ?></p></div>
+<?php elseif ( isset( $_GET['delete-active-child'] ) ) : ?>
+        <div id="message4" class="error"><p><?php _e( 'You cannot delete a theme while it has an active child theme.' ); ?></p></div>
+<?php
+endif;
+        <div class="wrap">
+                <div class="header-content">
+                        <h2><?php esc_html_e( 'Themes' ); ?></h2>
+                        <div class="title-count theme-count"><?php echo count( $themes ); ?></div>
+                        <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
+                                <div class="add-new-theme"><a href="<?php echo admin_url( 'theme-install.php' ); ?>" class="hide-if-no-js add-new-h2"><?php echo esc_html_x( 'Add New', 'Add new theme' ); ?></a></div>
+                        <?php endif; ?>
+                </div>
+$ct = wp_get_theme();
+                <?php
+                if ( ! validate_current_theme() || isset( $_GET['broken'] ) ) : ?>
+                        <div id="message1" class="updated"><p><?php _e('The active theme is broken. Reverting to the default theme.'); ?></p></div>
+                <?php elseif ( isset($_GET['activated']) ) :
+                        if ( isset( $_GET['previewed'] ) ) { ?>
+                                <div id="message2" class="updated"><p><?php printf( __( 'Settings saved and theme activated. <a href="%s">Visit site</a>' ), home_url( '/' ) ); ?></p></div>
+                        <?php } else { ?>
+                                <div id="message2" class="updated"><p><?php printf( __( 'New theme activated. <a href="%s">Visit site</a>' ), home_url( '/' ) ); ?></p></div><?php
+                        }
+                elseif ( isset($_GET['deleted']) ) : ?>
+                        <div id="message3" class="updated"><p><?php _e('Theme deleted.') ?></p></div>
+                <?php elseif ( isset( $_GET['delete-active-child'] ) ) : ?>
+                        <div id="message4" class="error"><p><?php _e( 'You cannot delete a theme while it has an active child theme.' ); ?></p></div>
+                <?php
+                endif;
+if ( $ct->errors() && ( ! is_multisite() || current_user_can( 'manage_network_themes' ) ) ) {
+        echo '<div class="error"><p>' . sprintf( __( 'ERROR: %s' ), $ct->errors()->get_error_message() ) . '</p></div>';
+}
+                $ct = wp_get_theme();
+/*
+// Certain error codes are less fatal than others. We can still display theme information in most cases.
+if ( ! $ct->errors() || ( 1 == count( $ct->errors()->get_error_codes() )
+        && in_array( $ct->errors()->get_error_code(), array( 'theme_no_parent', 'theme_parent_invalid', 'theme_no_index' ) ) ) ) : ?>
+*/
+                if ( $ct->errors() && ( ! is_multisite() || current_user_can( 'manage_network_themes' ) ) ) {
+                        echo '<div class="error"><p>' . sprintf( __( 'ERROR: %s' ), $ct->errors()->get_error_message() ) . '</p></div>';
+                }
+        // Pretend you didn't see this.
+        $current_theme_actions = array();
+        if ( is_array( $submenu ) && isset( $submenu['themes.php'] ) ) {
+                foreach ( (array) $submenu['themes.php'] as $item) {
+                        $class = '';
+                        if ( 'themes.php' == $item[2] || 'theme-editor.php' == $item[2] || 0 === strpos( $item[2], 'customize.php' ) )
+                                continue;
+                        // 0 = name, 1 = capability, 2 = file
+                        if ( ( strcmp($self, $item[2]) == 0 && empty($parent_file)) || ($parent_file && ($item[2] == $parent_file)) )
+                                $class = ' current';
+                        if ( !empty($submenu[$item[2]]) ) {
+                                $submenu[$item[2]] = array_values($submenu[$item[2]]); // Re-index.
+                                $menu_hook = get_plugin_page_hook($submenu[$item[2]][0][2], $item[2]);
+                                if ( file_exists(WP_PLUGIN_DIR . "/{$submenu[$item[2]][0][2]}") || !empty($menu_hook))
+                                        $current_theme_actions[] = "<a class='button button-secondary$class' href='admin.php?page={$submenu[$item[2]][0][2]}'>{$item[0]}</a>";
+                                else
+                                        $current_theme_actions[] = "<a class='button button-secondary$class' href='{$submenu[$item[2]][0][2]}'>{$item[0]}</a>";
+                        } elseif ( ! empty( $item[2] ) && current_user_can( $item[1] ) ) {
+                                $menu_file = $item[2];
+                /*
+                // Certain error codes are less fatal than others. We can still display theme information in most cases.
+                if ( ! $ct->errors() || ( 1 == count( $ct->errors()->get_error_codes() )
+                        && in_array( $ct->errors()->get_error_code(), array( 'theme_no_parent', 'theme_parent_invalid', 'theme_no_index' ) ) ) ) : ?>
+                */
+                                if ( current_user_can( 'customize' ) ) {
+                                        if ( 'custom-header' === $menu_file ) {
+                                                $current_theme_actions[] = "<a class='button button-secondary hide-if-no-customize$class' href='customize.php?autofocus[control]=header_image'>{$item[0]}</a>";
+                                        } elseif ( 'custom-background' === $menu_file ) {
+                                                $current_theme_actions[] = "<a class='button button-secondary hide-if-no-customize$class' href='customize.php?autofocus[control]=background_image'>{$item[0]}</a>";
+                // Pretend you didn't see this.
+                $current_theme_actions = array();
+                if ( is_array( $submenu ) && isset( $submenu['themes.php'] ) ) {
+                        foreach ( (array) $submenu['themes.php'] as $item) {
+                                $class = '';
+                                if ( 'themes.php' == $item[2] || 'theme-editor.php' == $item[2] || 0 === strpos( $item[2], 'customize.php' ) )
+                                        continue;
+                                // 0 = name, 1 = capability, 2 = file
+                                if ( ( strcmp($self, $item[2]) == 0 && empty($parent_file)) || ($parent_file && ($item[2] == $parent_file)) )
+                                        $class = ' current';
+                                if ( !empty($submenu[$item[2]]) ) {
+                                        $submenu[$item[2]] = array_values($submenu[$item[2]]); // Re-index.
+                                        $menu_hook = get_plugin_page_hook($submenu[$item[2]][0][2], $item[2]);
+                                        if ( file_exists(WP_PLUGIN_DIR . "/{$submenu[$item[2]][0][2]}") || !empty($menu_hook))
+                                                $current_theme_actions[] = "<a class='button button-secondary$class' href='admin.php?page={$submenu[$item[2]][0][2]}'>{$item[0]}</a>";
+                                        else
+                                                $current_theme_actions[] = "<a class='button button-secondary$class' href='{$submenu[$item[2]][0][2]}'>{$item[0]}</a>";
+                                } elseif ( ! empty( $item[2] ) && current_user_can( $item[1] ) ) {
+                                        $menu_file = $item[2];
+                                        if ( current_user_can( 'customize' ) ) {
+                                                if ( 'custom-header' === $menu_file ) {
+                                                        $current_theme_actions[] = "<a class='button button-secondary hide-if-no-customize$class' href='customize.php?autofocus[control]=header_image'>{$item[0]}</a>";
+                                                } elseif ( 'custom-background' === $menu_file ) {
+                                                        $current_theme_actions[] = "<a class='button button-secondary hide-if-no-customize$class' href='customize.php?autofocus[control]=background_image'>{$item[0]}</a>";
+                                                }
+                                        }
+                                }
                                 if ( false !== ( $pos = strpos( $menu_file, '?' ) ) ) {
                                         $menu_file = substr( $menu_file, 0, $pos );
+                                }
+                                        if ( false !== ( $pos = strpos( $menu_file, '?' ) ) ) {
+                                                $menu_file = substr( $menu_file, 0, $pos );
+                                        }
+                                if ( file_exists( ABSPATH . "wp-admin/$menu_file" ) ) {
+                                        $current_theme_actions[] = "<a class='button button-secondary$class' href='{$item[2]}'>{$item[0]}</a>";
+                                } else {
+                                        $current_theme_actions[] = "<a class='button button-secondary$class' href='themes.php?page={$item[2]}'>{$item[0]}</a>";
+                                        if ( file_exists( ABSPATH . "wp-admin/$menu_file" ) ) {
+                                                $current_theme_actions[] = "<a class='button button-secondary$class' href='{$item[2]}'>{$item[0]}</a>";
+                                        } else {
+                                                $current_theme_actions[] = "<a class='button button-secondary$class' href='themes.php?page={$item[2]}'>{$item[0]}</a>";
+                                        }
+                                }
+                        }
+                }
+        }
 ?>
+                ?>
 <div class="theme-browser">
         <div class="themes">
+                <div class="theme-browser">
+                        <div class="themes">
 <?php
 /*
  * This PHP is synchronized with the tmpl-theme template below!
  */
+                                <?php
+                                /*
+                                 * This PHP is synchronized with the tmpl-theme template below!
+                                 */
 foreach ( $themes as $theme ) :
         $aria_action = esc_attr( $theme['id'] . '-action' );
         $aria_name   = esc_attr( $theme['id'] . '-name' );
         ?>
 <div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>" tabindex="0" aria-describedby="<?php echo $aria_action . ' ' . $aria_name; ?>">
         <?php if ( ! empty( $theme['screenshot'][0] ) ) { ?>
                 <div class="theme-screenshot">
                         <img src="<?php echo $theme['screenshot'][0]; ?>" alt="" />
                 </div>
         <?php } else { ?>
                 <div class="theme-screenshot blank"></div>
         <?php } ?>
         <span class="more-details" id="<?php echo $aria_action; ?>"><?php _e( 'Theme Details' ); ?></span>
         <div class="theme-author"><?php printf( __( 'By %s' ), $theme['author'] ); ?></div>
+                                foreach ( $themes as $theme ) :
+                                        $aria_action = esc_attr( $theme['id'] . '-action' );
+                                        $aria_name   = esc_attr( $theme['id'] . '-name' );
+                                        ?>
+                                        <div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>" tabindex="0" aria-describedby="<?php echo $aria_action . ' ' . $aria_name; ?>">
+                                                <?php if ( ! empty( $theme['screenshot'][0] ) ) { ?>
+                                                        <div class="theme-screenshot">
+                                                                <img src="<?php echo $theme['screenshot'][0]; ?>" alt="" />
+                                                        </div>
+                                                <?php } else { ?>
+                                                        <div class="theme-screenshot blank"></div>
+                                                <?php } ?>
+                                                <span class="more-details" id="<?php echo $aria_action; ?>"><?php _e( 'Theme Details' ); ?></span>
+                                                <div class="theme-author"><?php printf( __( 'By %s' ), $theme['author'] ); ?></div>
         <?php if ( $theme['active'] ) { ?>
                 <h3 class="theme-name" id="<?php echo $aria_name; ?>"><span><?php _ex( 'Active:', 'theme' ); ?></span> <?php echo $theme['name']; ?></h3>
         <?php } else { ?>
                 <h3 class="theme-name" id="<?php echo $aria_name; ?>"><?php echo $theme['name']; ?></h3>
         <?php } ?>
+                                                <?php if ( $theme['active'] ) { ?>
+                                                        <h3 class="theme-name" id="<?php echo $aria_name; ?>"><span><?php _ex( 'Active:', 'theme' ); ?></span> <?php echo $theme['name']; ?></h3>
+                                                <?php } else { ?>
+                                                        <h3 class="theme-name" id="<?php echo $aria_name; ?>"><?php echo $theme['name']; ?></h3>
+                                                <?php } ?>
         <div class="theme-actions">
+                                                <div class="theme-actions">
         <?php if ( $theme['active'] ) { ?>
                 <?php if ( $theme['actions']['customize'] && current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?>
                         <a class="button button-primary customize load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Customize' ); ?></a>
                 <?php } ?>
         <?php } else { ?>
                 <a class="button button-secondary activate" href="<?php echo $theme['actions']['activate']; ?>"><?php _e( 'Activate' ); ?></a>
                 <?php if ( current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?>
                         <a class="button button-primary load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Live Preview' ); ?></a>
                         <a class="button button-secondary hide-if-customize" href="<?php echo $theme['actions']['preview']; ?>"><?php _e( 'Preview' ); ?></a>
                 <?php } ?>
         <?php } ?>
+                                                        <?php if ( $theme['active'] ) { ?>
+                                                                <?php if ( $theme['actions']['customize'] && current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?>
+                                                                        <a class="button button-primary customize load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Customize' ); ?></a>
+                                                                <?php } ?>
+                                                        <?php } else { ?>
+                                                                <a class="button button-secondary activate" href="<?php echo $theme['actions']['activate']; ?>"><?php _e( 'Activate' ); ?></a>
+                                                                <?php if ( current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?>
+                                                                        <a class="button button-primary load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Live Preview' ); ?></a>
+                                                                        <a class="button button-secondary hide-if-customize" href="<?php echo $theme['actions']['preview']; ?>"><?php _e( 'Preview' ); ?></a>
+                                                                <?php } ?>
+                                                        <?php } ?>
         </div>
+                                                </div>
         <?php if ( $theme['hasUpdate'] ) { ?>
                 <div class="theme-update"><?php _e( 'Update Available' ); ?></div>
         <?php } ?>
 </div>
 <?php endforeach; ?>
         <br class="clear" />
         </div>
 </div>
 <div class="theme-overlay"></div>
+                                                <?php if ( $theme['hasUpdate'] ) { ?>
+                                                        <div class="theme-update"><?php _e( 'Update Available' ); ?></div>
+                                                <?php } ?>
+                                        </div>
+                                <?php endforeach; ?>
+                                <br class="clear" />
+                        </div>
+                </div>
+                <div class="theme-overlay"></div>
 <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
+                <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
 <?php
 // List broken themes, if any.
 if ( ! is_multisite() && current_user_can('edit_themes') && $broken_themes = wp_get_themes( array( 'errors' => true ) ) ) {
 ?>
+                <?php
+                // List broken themes, if any.
+                if ( ! is_multisite() && current_user_can('edit_themes') && $broken_themes = wp_get_themes( array( 'errors' => true ) ) ) {
+                        ?>
 <div class="broken-themes">
 <h3><?php _e('Broken Themes'); ?></h3>
 <p><?php _e('The following themes are installed but incomplete. Themes must have a stylesheet and a template.'); ?></p>
+                        <div class="broken-themes">
+                                <h3><?php _e('Broken Themes'); ?></h3>
+                                <p><?php _e('The following themes are installed but incomplete. Themes must have a stylesheet and a template.'); ?></p>
+<?php
+$can_delete = current_user_can( 'delete_themes' );
+?>
+<table>
+        <tr>
+                <th><?php _ex('Name', 'theme name'); ?></th>
+                <th><?php _e('Description'); ?></th>
+                <?php if ( $can_delete ) { ?>
+                        <th></th>
+                <?php } ?>
+                </tr>
+        </tr>
+        <?php foreach ( $broken_themes as $broken_theme ) : ?>
+                <tr>
+                        <td><?php echo $broken_theme->get( 'Name' ) ? $broken_theme->display( 'Name' ) : $broken_theme->get_stylesheet(); ?></td>
+                        <td><?php echo $broken_theme->errors()->get_error_message(); ?></td>
+                        <?php
+                        if ( $can_delete ) {
+                                $stylesheet = $broken_theme->get_stylesheet();
+                                $delete_url = add_query_arg( array(
+                                        'action'     => 'delete',
+                                        'stylesheet' => urlencode( $stylesheet ),
+                                ), admin_url( 'themes.php' ) );
+                                $delete_url = wp_nonce_url( $delete_url, 'delete-theme_' . $stylesheet );
+                                <?php
+                                $can_delete = current_user_can( 'delete_themes' );
                                 ?>
+                                <td><a href="<?php echo esc_url( $delete_url ); ?>" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a></td>
+                                <?php
+                        }
+                        ?>
+                </tr>
+        <?php endforeach; ?>
+</table>
+</div>
+                                <table>
+                                        <tr>
+                                                <th><?php _ex('Name', 'theme name'); ?></th>
+                                                <th><?php _e('Description'); ?></th>
+                                                <?php if ( $can_delete ) { ?>
+                                                        <th></th>
+                                                <?php } ?>
+                                        </tr>
+                                        </tr>
+                                        <?php foreach ( $broken_themes as $broken_theme ) : ?>
+                                                <tr>
+                                                        <td><?php echo $broken_theme->get( 'Name' ) ? $broken_theme->display( 'Name' ) : $broken_theme->get_stylesheet(); ?></td>
+                                                        <td><?php echo $broken_theme->errors()->get_error_message(); ?></td>
+                                                        <?php
+                                                        if ( $can_delete ) {
+                                                                $stylesheet = $broken_theme->get_stylesheet();
+                                                                $delete_url = add_query_arg( array(
+                                                                        'action'     => 'delete',
+                                                                        'stylesheet' => urlencode( $stylesheet ),
+                                                                ), admin_url( 'themes.php' ) );
+                                                                $delete_url = wp_nonce_url( $delete_url, 'delete-theme_' . $stylesheet );
+                                                                ?>
+                                                                <td><a href="<?php echo esc_url( $delete_url ); ?>" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a></td>
+                                                        <?php
+                                                        }
+                                                        ?>
+                                                </tr>
+                                        <?php endforeach; ?>
+                                </table>
+                        </div>
 <?php
+}
 ?>
 </div><!-- .wrap -->
+                <?php
+                }
+                ?>
+        </div><!-- .wrap -->
 <?php
 /*
 …
  * The tmpl-theme template is synchronized with PHP above!
  */
 ?>
 <script id="tmpl-theme" type="text/template">
         <# if ( data.screenshot[0] ) { #>
                 <div class="theme-screenshot">
                         <img src="{{ data.screenshot[0] }}" alt="" />
                 </div>
         <# } else { #>
                 <div class="theme-screenshot blank"></div>
         <# } #>
         <span class="more-details" id="{{ data.id }}-action"><?php _e( 'Theme Details' ); ?></span>
         <div class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></div>
+        <script id="tmpl-theme" type="text/template">
+                <# if ( data.screenshot[0] ) { #>
+                        <div class="theme-screenshot">
+                                <img src="{{ data.screenshot[0] }}" alt="" />
+                        </div>
+                        <# } else { #>
+                                <div class="theme-screenshot blank"></div>
+                                <# } #>
+                                        <span class="more-details" id="{{ data.id }}-action"><?php _e( 'Theme Details' ); ?></span>
+                                        <div class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></div>
         <# if ( data.active ) { #>
                 <h3 class="theme-name" id="{{ data.id }}-name"><span><?php _ex( 'Active:', 'theme' ); ?></span> {{{ data.name }}}</h3>
         <# } else { #>
                 <h3 class="theme-name" id="{{ data.id }}-name">{{{ data.name }}}</h3>
         <# } #>
+                                        <# if ( data.active ) { #>
+                                                <h3 class="theme-name" id="{{ data.id }}-name"><span><?php _ex( 'Active:', 'theme' ); ?></span> {{{ data.name }}}</h3>
+                                                <# } else { #>
+                                                        <h3 class="theme-name" id="{{ data.id }}-name">{{{ data.name }}}</h3>
+                                                        <# } #>
         <div class="theme-actions">
+                                                                <div class="theme-actions">
         <# if ( data.active ) { #>
                 <# if ( data.actions.customize ) { #>
                         <a class="button button-primary customize load-customize hide-if-no-customize" href="{{ data.actions.customize }}"><?php _e( 'Customize' ); ?></a>
                 <# } #>
         <# } else { #>
                 <a class="button button-secondary activate" href="{{{ data.actions.activate }}}"><?php _e( 'Activate' ); ?></a>
                 <a class="button button-primary load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a>
                 <a class="button button-secondary hide-if-customize" href="{{{ data.actions.preview }}}"><?php _e( 'Preview' ); ?></a>
         <# } #>
+                                                                        <# if ( data.active ) { #>
+                                                                                <# if ( data.actions.customize ) { #>
+                                                                                        <a class="button button-primary customize load-customize hide-if-no-customize" href="{{ data.actions.customize }}"><?php _e( 'Customize' ); ?></a>
+                                                                                        <# } #>
+                                                                                                <# } else { #>
+                                                                                                        <a class="button button-secondary activate" href="{{{ data.actions.activate }}}"><?php _e( 'Activate' ); ?></a>
+                                                                                                        <a class="button button-primary load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a>
+                                                                                                        <a class="button button-secondary hide-if-customize" href="{{{ data.actions.preview }}}"><?php _e( 'Preview' ); ?></a>
+                                                                                                        <# } #>
         </div>
+                                                                </div>
         <# if ( data.hasUpdate ) { #>
                 <div class="theme-update"><?php _e( 'Update Available' ); ?></div>
         <# } #>
 </script>
+                                                                <# if ( data.hasUpdate ) { #>
+                                                                        <div class="theme-update"><?php _e( 'Update Available' ); ?></div>
+                                                                        <# } #>
+        </script>
+<script id="tmpl-theme-single" type="text/template">
+        <div class="theme-backdrop"></div>
+        <div class="theme-wrap">
+                <div class="theme-header">
+                        <button class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show previous theme' ); ?></span></button>
+                        <button class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show next theme' ); ?></span></button>
+                        <button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close overlay' ); ?></span></button>
+                </div>
+                <div class="theme-about">
+                        <div class="theme-screenshots">
+                        <# if ( data.screenshot[0] ) { #>
+                                <div class="screenshot"><img src="{{ data.screenshot[0] }}" alt="" /></div>
+                        <# } else { #>
+                                <div class="screenshot blank"></div>
+                        <# } #>
+        <script id="tmpl-theme-single" type="text/template">
+                <div class="theme-backdrop"></div>
+                <div class="theme-wrap">
+                        <div class="theme-header">
+                                <button class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show previous theme' ); ?></span></button>
+                                <button class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show next theme' ); ?></span></button>
+                                <button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close overlay' ); ?></span></button>
                         </div>
+                        <div class="theme-about">
+                                <div class="theme-screenshots">
+                                        <# if ( data.screenshot[0] ) { #>
+                                                <div class="screenshot"><img src="{{ data.screenshot[0] }}" alt="" /></div>
+                                                <# } else { #>
+                                                        <div class="screenshot blank"></div>
+                                                        <# } #>
+                                </div>
                         <div class="theme-info">
                                 <# if ( data.active ) { #>
                                         <span class="current-label"><?php _e( 'Current Theme' ); ?></span>
                                 <# } #>
                                 <h3 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{{ data.version }}}' ); ?></span></h3>
                                 <h4 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.authorAndUri }}}' ); ?></h4>
+                                <div class="theme-info">
+                                        <# if ( data.active ) { #>
+                                                <span class="current-label"><?php _e( 'Current Theme' ); ?></span>
+                                                <# } #>
+                                                        <h3 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{{ data.version }}}' ); ?></span></h3>
+                                                        <h4 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.authorAndUri }}}' ); ?></h4>
                                 <# if ( data.hasUpdate ) { #>
                                 <div class="theme-update-message">
                                         <h4 class="theme-update"><?php _e( 'Update Available' ); ?></h4>
                                         {{{ data.update }}}
                                 </div>
                                 <# } #>
                                 <p class="theme-description">{{{ data.description }}}</p>
+                                                        <# if ( data.hasUpdate ) { #>
+                                                                <div class="theme-update-message">
+                                                                        <h4 class="theme-update"><?php _e( 'Update Available' ); ?></h4>
+                                                                        {{{ data.update }}}
+                                                                </div>
+                                                                <# } #>
+                                                                        <p class="theme-description">{{{ data.description }}}</p>
                                 <# if ( data.parent ) { #>
                                         <p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), '<strong>{{{ data.parent }}}</strong>' ); ?></p>
                                 <# } #>
+                                                                        <# if ( data.parent ) { #>
+                                                                                <p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), '<strong>{{{ data.parent }}}</strong>' ); ?></p>
+                                                                                <# } #>
+                                <# if ( data.tags ) { #>
+                                        <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{{ data.tags }}}</p>
+                                <# } #>
+                                                                                        <# if ( data.tags ) { #>
+                                                                                                <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{{ data.tags }}}</p>
+                                                                                                <# } #>
+                                </div>
                         </div>
-                </div>
+                <div class="theme-actions">
+                        <div class="active-theme">
+                                <a href="{{{ data.actions.customize }}}" class="button button-primary customize load-customize hide-if-no-customize"><?php _e( 'Customize' ); ?></a>
+                                <?php echo implode( ' ', $current_theme_actions ); ?>
+                        <div class="theme-actions">
+                                <div class="active-theme">
+                                        <a href="{{{ data.actions.customize }}}" class="button button-primary customize load-customize hide-if-no-customize"><?php _e( 'Customize' ); ?></a>
+                                        <?php echo implode( ' ', $current_theme_actions ); ?>
+                                </div>
+                                <div class="inactive-theme">
+                                        <# if ( data.actions.activate ) { #>
+                                                <a href="{{{ data.actions.activate }}}" class="button button-secondary activate"><?php _e( 'Activate' ); ?></a>
+                                                <# } #>
+                                                        <a href="{{{ data.actions.customize }}}" class="button button-primary load-customize hide-if-no-customize"><?php _e( 'Live Preview' ); ?></a>
+                                                        <a href="{{{ data.actions.preview }}}" class="button button-secondary hide-if-customize"><?php _e( 'Preview' ); ?></a>
+                                </div>
+                                <# if ( ! data.active && data.actions['delete'] ) { #>
+                                        <a href="{{{ data.actions['delete'] }}}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
+                                        <# } #>
                         </div>
-                        <div class="inactive-theme">
-                                <# if ( data.actions.activate ) { #>
-                                        <a href="{{{ data.actions.activate }}}" class="button button-secondary activate"><?php _e( 'Activate' ); ?></a>
-                                <# } #>
-                                <a href="{{{ data.actions.customize }}}" class="button button-primary load-customize hide-if-no-customize"><?php _e( 'Live Preview' ); ?></a>
-                                <a href="{{{ data.actions.preview }}}" class="button button-secondary hide-if-customize"><?php _e( 'Preview' ); ?></a>
-                        </div>
-                        <# if ( ! data.active && data.actions['delete'] ) { #>
-                                <a href="{{{ data.actions['delete'] }}}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
-                        <# } #>
                 </div>
+        </div>
+</script>
+        </script>
+<?php require( ABSPATH . 'wp-admin/admin-footer.php' );
+<?php require( ABSPATH . 'wp-admin/admin-footer.php' );
+ No newline at end of file

WordPress.org

Make WordPress Core

Context Navigation

Ticket #26601: 26601.3.patch

src/wp-admin/css/common.css

src/wp-admin/css/themes.css

src/wp-admin/js/theme.js

src/wp-admin/themes.php

Download in other formats: