Media: set the image editor spinner on the smallest possible area.

When using spinners as background images, the re-painted area should be the smallest
possible one. See similar performance issue in #31196, #33311, #33322, and #34951.

Fixes #35296.
Built from https://develop.svn.wordpress.org/trunk@36162


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

wp-admin/css/media-rtl.css

@@ -875,16 +875,30 @@ border color while dragging a file over the uploader drop area */
 .imgedit-wait {
 	position: absolute;
 	top: 0;
-	background: #fff url(../images/spinner.gif) no-repeat center;
+	bottom: 0;
-	-webkit-background-size: 20px 20px;
+	width: 100%;
-	background-size: 20px 20px;
+	background: #fff;
 	opacity: 0.7;
 	filter: alpha(opacity=70);
-	width: 100%;
-	height: 500px;
 	display: none;
 }
 
+.imgedit-wait:before {
+	content: "";
+	display: block;
+	width: 20px;
+	height: 20px;
+	position: absolute;
+	right: 50%;
+	top: 50%;
+	margin: -10px -10px 0 0;
+	background: transparent url(../images/spinner.gif) no-repeat center;
+	-webkit-background-size: 20px 20px;
+	background-size: 20px 20px;
+	-webkit-transform: translateZ(0);
+	transform: translateZ(0);
+}
+
 .no-float {
 	float: none;
 }
@@ -1093,7 +1107,7 @@ audio, video {
 @media print,
   (-webkit-min-device-pixel-ratio: 1.25),
   (min-resolution: 120dpi) {
-	.imgedit-wait {
+	.imgedit-wait:before {
 		background-image: url(../images/spinner-2x.gif);
 	}
 }

wp-admin/css/media.css

@@ -875,16 +875,30 @@ border color while dragging a file over the uploader drop area */
 .imgedit-wait {
 	position: absolute;
 	top: 0;
-	background: #fff url(../images/spinner.gif) no-repeat center;
+	bottom: 0;
-	-webkit-background-size: 20px 20px;
+	width: 100%;
-	background-size: 20px 20px;
+	background: #fff;
 	opacity: 0.7;
 	filter: alpha(opacity=70);
-	width: 100%;
-	height: 500px;
 	display: none;
 }
 
+.imgedit-wait:before {
+	content: "";
+	display: block;
+	width: 20px;
+	height: 20px;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	margin: -10px 0 0 -10px;
+	background: transparent url(../images/spinner.gif) no-repeat center;
+	-webkit-background-size: 20px 20px;
+	background-size: 20px 20px;
+	-webkit-transform: translateZ(0);
+	transform: translateZ(0);
+}
+
 .no-float {
 	float: none;
 }
@@ -1093,7 +1107,7 @@ audio, video {
 @media print,
   (-webkit-min-device-pixel-ratio: 1.25),
   (min-resolution: 120dpi) {
-	.imgedit-wait {
+	.imgedit-wait:before {
 		background-image: url(../images/spinner-2x.gif);
 	}
 }

wp-admin/js/image-edit.js

@@ -56,7 +56,7 @@ var imageEdit = window.imageEdit = {
 		var wait = $('#imgedit-wait-' + postid);
 
 		if ( toggle ) {
-			wait.height( $('#imgedit-panel-' + postid).height() ).fadeIn('fast');
+			wait.fadeIn( 'fast' );
 		} else {
 			wait.fadeOut('fast');
 		}

wp-includes/css/media-views-rtl.css

@@ -1721,13 +1721,6 @@
 	position: static;
 }
 
-.media-modal .imgedit-wait {
-	height: auto !important;
-	left: 0;
-	bottom: 0;
-	right: 0;
-}
-
 .media-modal .imgedit-wrap .imgedit-panel-content {
 	padding: 16px;
 	position: absolute;

wp-includes/css/media-views.css

@@ -1721,13 +1721,6 @@
 	position: static;
 }
 
-.media-modal .imgedit-wait {
-	height: auto !important;
-	right: 0;
-	bottom: 0;
-	left: 0;
-}
-
 .media-modal .imgedit-wrap .imgedit-panel-content {
 	padding: 16px;
 	position: absolute;

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.5-alpha-36160';
+$wp_version = '4.5-alpha-36162';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.