Improve pushState, replaceState and routing for Themes page

* Uses `pushState()` generally
* Uses `replaceState()` when updating a search query (so no history cruft from typing)

fixes #27198. props gcorne, adamsilverstein.
Built from https://develop.svn.wordpress.org/trunk@27268


git-svn-id: http://core.svn.wordpress.org/trunk@27124 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/js/theme.js

@@ -66,7 +66,7 @@ themes.view.Appearance = wp.Backbone.View.extend({
 			return;
 		}
 
-		view = new themes.view.Search({ collection: self.collection });
+		view = new themes.view.Search({ collection: self.collection, parent: this });
 
 		// Render and append after screen title
 		view.render();
@@ -350,7 +350,7 @@ themes.view.Details = wp.Backbone.View.extend({
 				scroll = document.body.scrollTop;
 
 				// Clean the url structure
-				themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
+				themes.router.navigate( themes.router.baseUrl( '' ) );
 
 				// Restore scroll position
 				document.body.scrollTop = scroll;
@@ -451,6 +451,12 @@ themes.view.Themes = wp.Backbone.View.extend({
 			self.renderThemes( self.parent.page );
 		});
 
+		this.listenTo( this.parent, 'theme:close', function() {
+			if ( self.overlay ) {
+				self.overlay.closeOverlay();
+			}
+		} );
+
 		// Bind keyboard events.
 		$('body').on( 'keyup', function( event ) {
 			if ( ! self.overlay ) {
@@ -573,7 +579,7 @@ themes.view.Themes = wp.Backbone.View.extend({
 		this.model = self.collection.get( id );
 
 		// Trigger a route update for the current model
-		themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.id ), { replace: true } );
+		themes.router.navigate( themes.router.baseUrl( '?theme=' + this.model.id ) );
 
 		// Sets this.view to 'detail'
 		this.setView( 'detail' );
@@ -659,6 +665,7 @@ themes.view.Search = wp.Backbone.View.extend({
 	tagName: 'input',
 	className: 'theme-search',
 	id: 'theme-search-input',
+	searching: false,
 
 	attributes: {
 		placeholder: l10n.searchPlaceholder,
@@ -669,11 +676,24 @@ themes.view.Search = wp.Backbone.View.extend({
 		'input':  'search',
 		'keyup':  'search',
 		'change': 'search',
-		'search': 'search'
+		'search': 'search',
+		'blur':   'pushState'
+	},
+
+	initialize: function( options ) {
+
+		this.parent = options.parent;
+
+		this.listenTo( this.parent, 'theme:close', function() {
+			this.searching = false;
+		} );
+
 	},
 
 	// 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 = '';
@@ -681,12 +701,31 @@ themes.view.Search = wp.Backbone.View.extend({
 
 		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;
+		}
+
 		// Update the URL hash
 		if ( event.target.value ) {
-			themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), { replace: true } );
+			themes.router.navigate( themes.router.baseUrl( '?search=' + event.target.value ), options );
 		} else {
-			themes.router.navigate( themes.router.baseUrl( '' ), { replace: true } );
+			themes.router.navigate( themes.router.baseUrl( '' ) );
 		}
+	},
+
+	pushState: function( event ) {
+		var url = themes.router.baseUrl( '' );
+
+		if ( event.target.value ) {
+			url = themes.router.baseUrl( '?search=' + event.target.value );
+		}
+
+		this.searching = false;
+		themes.router.navigate( url );
+
 	}
 });
 
@@ -694,14 +733,26 @@ themes.view.Search = wp.Backbone.View.extend({
 // Listens to [theme] and [search] params
 themes.routes = Backbone.Router.extend({
 
-	initialize: function() {
+	routes: {
-		this.routes = _.object([
+		'themes.php?theme=:slug': 'theme',
-		]);
+		'themes.php?search=:query': 'search',
+		'themes.php?s=:query': 'search',
+		'themes.php': 'themes',
+		'': 'themes'
 	},
 
 	baseUrl: function( url ) {
-		return themes.data.settings.root + url;
+		return 'themes.php' + url;
+	},
+
+	search: function( query ) {
+		$( '.theme-search' ).val( query );
+	},
+
+	themes: function() {
+		$( '.theme-search' ).val( '' );
 	}
+
 });
 
 // Execute and setup the application
@@ -720,32 +771,39 @@ themes.Run = {
 	},
 
 	render: function() {
+
 		// Render results
 		this.view.render();
 		this.routes();
 
-		// Set the initial theme
+		Backbone.history.start({
-		if ( 'undefined' !== typeof themes.data.settings.theme && '' !== themes.data.settings.theme ){
+			root: themes.data.settings.adminUrl,
-			this.view.view.theme.trigger( 'theme:expand', this.view.collection.findWhere( { id: themes.data.settings.theme } ) );
+			pushState: true,
-		}
+			hashChange: false
-
+		});
-		// Set the initial search
-		if ( 'undefined' !== typeof themes.data.settings.search && '' !== themes.data.settings.search ){
-			$( '.theme-search' ).val( themes.data.settings.search );
-			this.themes.doSearch( themes.data.settings.search );
-		}
-
-		// Start the router if browser supports History API
-		if ( window.history && window.history.pushState ) {
-			// Calls the routes functionality
-			Backbone.history.start({ pushState: true, silent: true });
-		}
 	},
 
 	routes: function() {
+		var self = this;
 		// Bind to our global thx object
 		// so that the object is available to sub-views
 		themes.router = new themes.routes();
+
+		// 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' );
+		});
+
+		// Handles search route event
+		themes.router.on( 'route:search', function( query ) {
+			self.view.trigger( 'theme:close' );
+			self.themes.doSearch( query );
+		});
 	}
 };
 

wp-admin/themes.php

@@ -99,10 +99,7 @@ wp_localize_script( 'theme', '_wpThemeSettings', array(
 		'canInstall'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ),
 		'installURI'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ) ? admin_url( 'theme-install.php' ) : null,
 		'confirmDelete' => __( "Are you sure you want to delete this theme?\n\nClick 'Cancel' to go back, 'OK' to confirm the delete." ),
-		'root'          => parse_url( admin_url( 'themes.php' ), PHP_URL_PATH ),
+		'adminUrl'      => parse_url( admin_url(), PHP_URL_PATH ),
-		'theme'         => esc_html( $theme ),
-		'search'        => esc_html( $search ),
-
 	),
  	'l10n' => array(
  		'addNew' => __( 'Add New Theme' ),