Merge branch 't/9923' into major

Author: oleq

CHANGES.md

@@ -7,6 +7,7 @@ CKEditor 4 Changelog
 * [#10042](http://dev.ckeditor.com/ticket/10042): Introduced config.title to change the human-readable title of the editor.
 * [#10370](http://dev.ckeditor.com/ticket/10370): Inconsistency in data events between framed and inline editors.
 * [#9794](http://dev.ckeditor.com/ticket/9794): OnChange event.
+* [#9923](http://dev.ckeditor.com/ticket/9923): HiDPI support in editor UI. HiDPI icons for Moono skin.
 
 ## CKEditor 4.1.2
 

core/env.js

@@ -277,6 +277,16 @@ if ( !CKEDITOR.env ) {
 				false
 			);
 
+		/**
+		 * Indicates that CKEditor is running in HiDPI environment.
+		 *
+		 *		if ( CKEDITOR.env.hidpi )
+		 *			alert( 'You are using a screen with high pixel density.' );
+		 *
+		 * @property {Boolean}
+		 */
+		env.hidpi = window.devicePixelRatio >= 2;
+
 		/**
 		 * The CSS class to be appended on the main UI containers, making it
 		 * easy to apply browser specific styles to it.
@@ -310,6 +320,9 @@ if ( !CKEDITOR.env ) {
 		if ( env.iOS )
 			env.cssClass += ' cke_browser_ios';
 
+		if ( env.hidpi )
+			env.cssClass += ' cke_hidpi';
+
 		return env;
 	})();
 }

core/plugindefinition.js

@@ -77,3 +77,20 @@
  * @method init
  * @param {CKEDITOR.editor} editor The editor instance being initialized.
  */
+
+/**
+ * Announces the plugin as HiDPI-ready (optimized for hi-density screens e.g. *Retina*)
+ * by providing high-resolution icons and images. HiDPI icons must be twice as big
+ * (defaults are `16px x 16px`) and stored under `plugin_name/icons/hidpi/` directory.
+ *
+ * The common place for additional HiDPI images used by the plugin (**but not icons**)
+ * is `plugin_name/images/hidpi/` directory.
+ *
+ * This property is optional and only makes sense if `32px x 32px` icons
+ * and high-resolution images actually exist. Editor will automatically detect
+ * the HiDPI environment and attempt to load the high-resolution resources
+ * if this flag is set `true`.
+ *
+ * @since 4.2
+ * @property {Boolean} hidpi
+ */

core/plugins.js

@@ -38,8 +38,13 @@ CKEDITOR.plugins.load = CKEDITOR.tools.override( CKEDITOR.plugins.load, function
 							// Register all icons eventually defined by this plugin.
 							if ( plugin.icons ) {
 								var icons = plugin.icons.split( ',' );
-								for ( var ic = 0 ; ic < icons.length ; ic++ ) {
-									CKEDITOR.skin.addIcon( icons[ ic ], plugin.path + 'icons/' + icons[ ic ] + '.png' );
+								for ( var ic = icons.length; ic--; ) {
+									CKEDITOR.skin.addIcon( icons[ ic ],
+										plugin.path +
+										'icons/' +
+										( CKEDITOR.env.hidpi && plugin.hidpi ? 'hidpi/' : '' ) +
+										icons[ ic ] +
+										'.png' );
 								}
 							}
 							initialized[ pluginName ] = 1;

core/skin.js

@@ -76,13 +76,16 @@
 		 * @param {String} path The path to reach the icon image file.
 		 * @param {Number} [offset] The vertical offset position of the icon, if
 		 * available inside a strip image.
+		 * @param {String} [bgsize] The value of CSS "background-size" property to
+		 * use for this icon
 		 */
-		addIcon: function( name, path, offset ) {
+		addIcon: function( name, path, offset, bgsize ) {
 			name = name.toLowerCase();
 			if ( !this.icons[ name ] ) {
 				this.icons[ name ] = {
 					path: path,
-					offset: offset || 0
+					offset: offset || 0,
+					bgsize : bgsize || '16px'
 				};
 			}
 		},
@@ -99,9 +102,12 @@
 		 * @param {Number} [overrideOffset] The vertical offset position of the
 		 * icon. It overrides the offset defined by the named icon, if
 		 * available, and is used if the named icon was not registered.
+		 * @param {String} [overrideBgsize] The value of CSS "background-size" property
+		 * to use for the icon. It overrides the value defined by the named icon,
+		 * if available, and is used if the named icon was not registered.
 		 */
-		getIconStyle: function( name, rtl, overridePath, overrideOffset ) {
-			var icon, path, offset;
+		getIconStyle: function( name, rtl, overridePath, overrideOffset, overrideBgsize ) {
+			var icon, path, offset, bgsize;
 
 			if ( name ) {
 				name = name.toLowerCase();
@@ -116,9 +122,10 @@
 
 			path = overridePath || ( icon && icon.path ) || '';
 			offset = overrideOffset || ( icon && icon.offset );
+			bgsize = overrideBgsize || ( icon && icon.bgsize ) || '16px';
 
 			return path &&
-				( 'background-image:url(' + CKEDITOR.getUrl( path ) + ');background-position:0 ' + offset + 'px;' );
+				( 'background-image:url(' + CKEDITOR.getUrl( path ) + ');background-position:0 ' + offset + 'px;background-size:' + bgsize + ';' );
 		}
 	};
 
@@ -283,12 +290,12 @@
  * @todo type?
  */
 
- /**
-  * Current skin name.
-  *
-  * @property {String} name
-  * @todo
-  */
+/**
+ * Current skin name.
+ *
+ * @property {String} name
+ * @todo
+ */
 
 /**
  * The editor skin name. Note that is is not possible to have editors with

dev/builder/build.sh

@@ -9,7 +9,7 @@ set -e
 echo "CKBuilder - Builds a release version of ckeditor-dev."
 echo ""
 
-CKBUILDER_VERSION="1.6.1"
+CKBUILDER_VERSION="1.7"
 CKBUILDER_URL="http://download.cksource.com/CKBuilder/$CKBUILDER_VERSION/ckbuilder.jar"
 
 PROGNAME=$(basename $0)