TinyMCE: fix styles, add 2x background icons and load buttons.css in the Edit Image modal, remove wp-view styles from content.css, add 2x icons for the popup buttons (for editing image and gallery), fixes #22447, see #21019

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

wp-includes/js/tinymce/plugins/wpeditimage/css/editimage.css

@@ -5,25 +5,10 @@ html, body {
 	padding: 0;
 }
 
-.submit input,
+body {
-.button,
+	font-family: sans-serif;
-.button-primary,
+	font-size: 12px;
-.button-secondary,
+	line-height: 1.4em;
-.button-highlighted {
-	font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
-	text-decoration: none;
-	font-size: 11px !important;
-	line-height: 16px;
-	padding: 2px 8px;
-	cursor: pointer;
-	border-width: 1px;
-	border-style: solid;
-	-webkit-border-radius: 11px;
-	border-radius: 11px;
-	-moz-box-sizing: content-box;
-	-webkit-box-sizing: content-box;
-	-khtml-box-sizing: content-box;
-	box-sizing: content-box;
 }
 
 a.button {
@@ -33,7 +18,7 @@ a.button {
 textarea,
 input,
 select {
-	font: 13px Verdana, Arial, Helvetica, sans-serif;
+	font: inherit;
 	margin: 1px;
 	padding: 3px;
 }
@@ -44,10 +29,6 @@ p.help {
 	font-style: italic;
 }
 
-body, td {
-	font: 13px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
-}
-
 abbr.required {
 	color: #FF0000;
 	text-align: left;
@@ -311,6 +292,7 @@ form {
 	padding: 0 0 0 28px;
 	margin: 0 1em 0 0;
 }
+
 .image-align-none-label {
 	background: url(../../../../../../wp-admin/images/align-none.png) no-repeat center left;
 }
@@ -429,3 +411,25 @@ body#media-upload.rtl ul#sidemenu {
 .rtl #img_size_title {
 	text-align: left;
 }
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
+	.image-align-none-label {
+		background: url(../../../../../../wp-admin/images/align-none-2x.png) no-repeat center left;
+		background-size: auto 15px;
+	}
+
+	.image-align-left-label {
+		background: url(../../../../../../wp-admin/images/align-left-2x.png) no-repeat center left;
+		background-size: auto 15px;
+	}
+
+	.image-align-center-label {
+		background: url(../../../../../../wp-admin/images/align-center-2x.png) no-repeat center left;
+		background-size: auto 15px;
+	}
+
+	.image-align-right-label {
+		background: url(../../../../../../wp-admin/images/align-right-2x.png) no-repeat center left;
+		background-size: auto 15px;
+	}
+}

wp-includes/js/tinymce/plugins/wpeditimage/editimage.html

@@ -5,6 +5,7 @@
 <title></title>
 
 <link rel="stylesheet" href="css/editimage.css?ver=357-20121111" type="text/css" media="all" />
+<link rel="stylesheet" href="../../../../css/buttons.css?ver=357-20121111" type="text/css" media="all" />
 <script type="text/javascript" src="js/editimage.min.js?ver=357-20121111"></script>
 <script type="text/javascript" src="../../utils/form_utils.js?ver=357-20121111"></script>
 <base target="_self" />

wp-includes/js/tinymce/plugins/wpeditimage/editor_plugin_src.js

@@ -199,7 +199,10 @@
 		},
 
 		_createButtons : function() {
-			var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton;
+			var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton, isRetina;
+
+			isRetina = ( window.devicePixelRatio && window.devicePixelRatio > 1 ) || // WebKit, Opera
+				( window.matchMedia && window.matchMedia('(min-resolution:130dpi)').matches ); // Firefox, IE10, Opera
 
 			DOM.remove('wp_editbtns');
 
@@ -209,7 +212,7 @@
 			});
 
 			editButton = DOM.add('wp_editbtns', 'img', {
-				src : t.url+'/img/image.png',
+				src : isRetina ? t.url+'/img/image-2x.png' : t.url+'/img/image.png',
 				id : 'wp_editimgbtn',
 				width : '24',
 				height : '24',
@@ -221,7 +224,7 @@
 			});
 
 			dellButton = DOM.add('wp_editbtns', 'img', {
-				src : t.url+'/img/delete.png',
+				src : isRetina ? t.url+'/img/delete-2x.png' : t.url+'/img/delete.png',
 				id : 'wp_delimgbtn',
 				width : '24',
 				height : '24',

wp-includes/js/tinymce/plugins/wpgallery/editor_plugin_src.js

@@ -69,7 +69,10 @@
 		},
 
 		_createButtons : function() {
-			var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton;
+			var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton, isRetina;
+
+			isRetina = ( window.devicePixelRatio && window.devicePixelRatio > 1 ) || // WebKit, Opera
+				( window.matchMedia && window.matchMedia('(min-resolution:130dpi)').matches ); // Firefox, IE10, Opera
 
 			DOM.remove('wp_gallerybtns');
 
@@ -79,7 +82,7 @@
 			});
 
 			editButton = DOM.add('wp_gallerybtns', 'img', {
-				src : t.url+'/img/edit.png',
+				src : isRetina ? t.url+'/img/edit-2x.png' : t.url+'/img/edit.png',
 				id : 'wp_editgallery',
 				width : '24',
 				height : '24',
@@ -93,7 +96,7 @@
 			});
 
 			dellButton = DOM.add('wp_gallerybtns', 'img', {
-				src : t.url+'/img/delete.png',
+				src : isRetina ? t.url+'/img/delete-2x.png' : t.url+'/img/delete.png',
 				id : 'wp_delgallery',
 				width : '24',
 				height : '24',

wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css

@@ -140,165 +140,3 @@ img.wp-oembed {
 	width: 300px;
 	height: 250px;
 }
-
-/* WordPress TinyMCE Previews */
-.wp-view-wrap {
-	position: relative;
-	display: inline-block;
-}
-
-.wp-view-wrap * {
-	font-family: sans-serif;
-	font-weight: normal;
-}
-
-.wp-view-wrap img {
-	display: block;
-	border: 0;
-	padding: 0;
-	margin: 0;
-	border-radius: 0;
-	box-shadow: none;
-}
-
-.wp-view-wrap.alignnone {
-	display: block;
-}
-
-.wp-view-wrap.aligncenter {
-	display: block;
-	text-align: center;
-}
-
-.wp-view-wrap.alignleft {
-	float: left;
-}
-
-.wp-view-wrap.alignright {
-	float: right;
-}
-
-.wp-view-wrap .overlay {
-	opacity: 0;
-	display: block;
-	content: '';
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	box-shadow: inset 0 0 45px rgba( 0, 0, 0, 0.3 );
-	/*box-shadow:
-		inset 0 60px 30px -30px rgba( 0, 0, 0, 0.2 ),
-		inset 0 -60px 30px -30px rgba( 0, 0, 0, 0.2 );*/
-	overflow: hidden;
-
-	-webkit-transition: opacity 100ms ease-in-out, background 150ms;
-	-moz-transition:    opacity 100ms ease-in-out, background 150ms;
-	-ms-transition:     opacity 100ms ease-in-out, background 150ms;
-	-o-transition:      opacity 100ms ease-in-out, background 150ms;
-	transition:         opacity 100ms ease-in-out, background 150ms;
-}
-
-.wp-view-wrap:hover .overlay,
-.wp-view-wrap.selected .overlay {
-	opacity: 1;
-}
-.wp-view-wrap.selected .overlay {
-	background: rgba( 0, 86, 132, 0.3 );
-}
-
-.wp-view-wrap .spinner {
-	background: #fff url("../../../../../../../wp-admin/images/wpspin_light.gif") no-repeat center center;
-}
-
-.wp-view-wrap .button {
-	position: absolute;
-	height: 22px;
-	line-height: 22px;
-	font-size: 14px;
-	text-align: center;
-	cursor: pointer;
-	color: #464646;
-
-	background: #f3f3f3;
-	background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4));
-	background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4);
-	background-image:    -moz-linear-gradient(top, #fefefe, #f4f4f4);
-	background-image:     -ms-linear-gradient(top, #fefefe, #f4f4f4);
-	background-image:      -o-linear-gradient(top, #fefefe, #f4f4f4);
-	background-image:   linear-gradient(to bottom, #fefefe, #f4f4f4);
-
-	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );
-	border-radius: 2px;
-}
-
-.wp-view-wrap .button:hover {
-	box-shadow:
-		0 0 0 1px rgba( 0, 0, 0, 0.6 ),
-		0 0 10px rgba( 255, 255, 255, 0.4 );
-	background: #fff;
-	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));
-	background-image: -webkit-linear-gradient(top, #fff, #f3f3f3);
-	background-image:    -moz-linear-gradient(top, #fff, #f3f3f3);
-	background-image:     -ms-linear-gradient(top, #fff, #f3f3f3);
-	background-image:      -o-linear-gradient(top, #fff, #f3f3f3);
-	background-image:   linear-gradient(to bottom, #fff, #f3f3f3);
-	color: #333;
-}
-
-.wp-view-wrap .close {
-	top: 5px;
-	right: 5px;
-	width: 22px;
-	font-size: 22px;
-	line-height: 20px;
-}
-
-.wp-view-wrap .edit {
-	bottom: 5px;
-	right: 5px;
-	padding: 0 10px;
-}
-
-.editor-attachment {
-	display: inline-block;
-	position: relative;
-	margin-top: 10px;
-	margin-right: 10px;
-	overflow: hidden;
-}
-
-.editor-attachment,
-.editor-attachment img {
-	min-height: 100px;
-	min-width: 100px;
-}
-
-.editor-attachment img,
-.editor-attachment .overlay {
-	border-radius: inherit;
-}
-
-.editor-attachment-preview {
-	position: relative;
-}
-
-.wp-view-type-gallery {
-	display: block;
-}
-
-.editor-gallery {
-	display: inline-block;
-	position: relative;
-	min-height: 150px;
-	min-width: 150px;
-	margin: 5px 15px 15px 5px;
-	box-shadow:
-	    0 0 0 4px #fff,
-	    0 0 0 5px #ccc,
-	    5px 5px 0 4px #fff,
-	    5px 5px 0 5px #ccc,
-	    10px 10px 0 4px #fff,
-	    10px 10px 0 5px #ccc;
-}