Fix "add media" icon in DFW for IE < 9, restore media-button.png, add media-button-2x.png and make them background images, see #21019

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

wp-admin/includes/media.php

@@ -384,9 +384,9 @@ function media_buttons($editor_id = 'content') {
 
 	$context = apply_filters('media_buttons_context', __('Upload/Insert %s'));
 
-	$img = '<img src="' . esc_url( admin_url( 'images/media-button.png?ver=20111005' ) ) . '" width="16" height="16" />';
+	$img = '<span class="wp-media-buttons-icon"></span>';
 
-	echo '<a href="#" class="button insert-media" data-editor="' . esc_attr( $editor_id ) . '" title="' . esc_attr__( 'Add Media' ) . '">' . $img . ' Beta Media</a>';
+	echo '<a href="#" class="button insert-media add_media" data-editor="' . esc_attr( $editor_id ) . '" title="' . esc_attr__( 'Add Media' ) . '">' . $img . ' Beta Media</a>';
 
 	echo '<a href="' . esc_url( get_upload_iframe_src() ) . '" class="thickbox add_media" id="' . esc_attr( $editor_id ) . '-add_media" title="' . esc_attr__( 'Add Media' ) . '" onclick="return false;">' . sprintf( $context, $img ) . '</a>';
 }

wp-includes/css/editor.css

@@ -392,47 +392,6 @@
 	background-image: url('../images/wpicons.png?ver=20120720');
 }
 
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
-	.wp_themeSkin span.mce_undo,
-	.wp_themeSkin span.mce_redo,
-	.wp_themeSkin span.mce_bullist,
-	.wp_themeSkin span.mce_numlist,
-	.wp_themeSkin span.mce_blockquote,
-	.wp_themeSkin span.mce_charmap,
-	.wp_themeSkin span.mce_bold,
-	.wp_themeSkin span.mce_italic,
-	.wp_themeSkin span.mce_underline,
-	.wp_themeSkin span.mce_justifyleft,
-	.wp_themeSkin span.mce_justifyright,
-	.wp_themeSkin span.mce_justifycenter,
-	.wp_themeSkin span.mce_justifyfull,
-	.wp_themeSkin span.mce_indent,
-	.wp_themeSkin span.mce_outdent,
-	.wp_themeSkin span.mce_link,
-	.wp_themeSkin span.mce_unlink,
-	.wp_themeSkin span.mce_help,
-	.wp_themeSkin span.mce_removeformat,
-	.wp_themeSkin span.mce_fullscreen,
-	.wp_themeSkin span.mce_wp_fullscreen,
-	.wp_themeSkin span.mce_media,
-	.wp_themeSkin span.mce_pastetext,
-	.wp_themeSkin span.mce_pasteword,
-	.wp_themeSkin span.mce_wp_help,
-	.wp_themeSkin span.mce_wp_adv,
-	.wp_themeSkin span.mce_wp_more,
-	.wp_themeSkin span.mce_strikethrough,
-	.wp_themeSkin span.mce_spellchecker,
-	.wp_themeSkin span.mce_forecolor,
-	.wp_themeSkin .mce_forecolorpicker,
-	.wp_themeSkin .mceSplitButton .mce_spellchecker span.mce_spellchecker,
-	.wp_themeSkin .mceSplitButton .mce_forecolor span.mce_forecolor,
-	.wp_themeSkin .mceSplitButton span.mce_numlist,
-	.wp_themeSkin .mceSplitButton span.mce_bullist {
-		background-image: url('../images/wpicons-2x.png?ver=20120720');
-		background-size: 560px 40px;
-	}
-}
-
 /* ColorSplitButton */
 .wp_themeSkin div.mceColorSplitMenu table {
 	background-color: #ebebeb;
@@ -1098,6 +1057,18 @@ html[dir="rtl"] .wp-switch-editor {
 	vertical-align: middle;
 }
 
+.wp-media-buttons span.wp-media-buttons-icon {
+	display: inline-block;
+	width: 16px;
+	height: 16px;
+	vertical-align: text-top;
+	margin: 0 2px;
+}
+
+.wp-media-buttons .add_media span.wp-media-buttons-icon {
+	background: url('../../wp-admin/images/media-button.png') no-repeat top left;
+}
+
 .quicktags-toolbar {
 	border-bottom-style: solid;
 	border-bottom-width: 1px;
@@ -1868,10 +1839,9 @@ RTL
 	display: none;
 }
 
-#wp-fullscreen-buttons .mce_image .mce_image {
+#wp-fullscreen-buttons #wp_fs_image span.mce_image {
-	background-image: url('../../wp-admin/images/media-button.png?ver=20120201');
+	background-image: url('../../wp-admin/images/media-button.png');
-	background-position: top left;
+	background-position: 2px 2px;
-	background-size: 100%;
 }
 
 /* =Thickbox Adjustments
@@ -2049,3 +2019,52 @@ RTL
 -------------------------------------------------------------- */
 /* No RTL for now, this space intentionally left blank */
 
+
+/* HiDPI */
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
+	.wp_themeSkin span.mce_undo,
+	.wp_themeSkin span.mce_redo,
+	.wp_themeSkin span.mce_bullist,
+	.wp_themeSkin span.mce_numlist,
+	.wp_themeSkin span.mce_blockquote,
+	.wp_themeSkin span.mce_charmap,
+	.wp_themeSkin span.mce_bold,
+	.wp_themeSkin span.mce_italic,
+	.wp_themeSkin span.mce_underline,
+	.wp_themeSkin span.mce_justifyleft,
+	.wp_themeSkin span.mce_justifyright,
+	.wp_themeSkin span.mce_justifycenter,
+	.wp_themeSkin span.mce_justifyfull,
+	.wp_themeSkin span.mce_indent,
+	.wp_themeSkin span.mce_outdent,
+	.wp_themeSkin span.mce_link,
+	.wp_themeSkin span.mce_unlink,
+	.wp_themeSkin span.mce_help,
+	.wp_themeSkin span.mce_removeformat,
+	.wp_themeSkin span.mce_fullscreen,
+	.wp_themeSkin span.mce_wp_fullscreen,
+	.wp_themeSkin span.mce_media,
+	.wp_themeSkin span.mce_pastetext,
+	.wp_themeSkin span.mce_pasteword,
+	.wp_themeSkin span.mce_wp_help,
+	.wp_themeSkin span.mce_wp_adv,
+	.wp_themeSkin span.mce_wp_more,
+	.wp_themeSkin span.mce_strikethrough,
+	.wp_themeSkin span.mce_spellchecker,
+	.wp_themeSkin span.mce_forecolor,
+	.wp_themeSkin .mce_forecolorpicker,
+	.wp_themeSkin .mceSplitButton .mce_spellchecker span.mce_spellchecker,
+	.wp_themeSkin .mceSplitButton .mce_forecolor span.mce_forecolor,
+	.wp_themeSkin .mceSplitButton span.mce_numlist,
+	.wp_themeSkin .mceSplitButton span.mce_bullist {
+		background-image: url('../images/wpicons-2x.png?ver=20120720');
+		background-size: 560px 40px;
+	}
+
+	.wp-media-buttons .add_media span.wp-media-buttons-icon,
+	#wp-fullscreen-buttons #wp_fs_image span.mce_image {
+		background-image: url('../../wp-admin/images/media-button-2x.png');
+		background-size: 16px 16px;
+	}
+}
+