Integrate button icons with easyimage styles

plugins/button/plugin.js

@@ -260,14 +260,15 @@
 			}
 
 			var name = this.name || this.command,
-				iconPath = null;
+				iconPath = null,
+				overridePath = this.icon;
 
 			iconName = name;
 
 			// Check if we're pointing to an icon defined by another command. (https://dev.ckeditor.com/ticket/9555)
 			if ( this.icon && !( /\./ ).test( this.icon ) ) {
 				iconName = this.icon;
-				this.icon = null;
+				overridePath = null;
 
 			} else {
 				// Register and use custom icon for button (#1530).
@@ -281,7 +282,7 @@
 
 			if ( iconPath ) {
 				CKEDITOR.skin.addIcon( iconPath, iconPath );
-				this.icon = null;
+				overridePath = null;
 			} else {
 				iconPath = iconName;
 			}
@@ -301,7 +302,7 @@
 				keydownFn: keydownFn,
 				focusFn: focusFn,
 				clickFn: clickFn,
-				style: CKEDITOR.skin.getIconStyle( iconPath, ( editor.lang.dir == 'rtl' ), this.icon, this.iconOffset ),
+				style: CKEDITOR.skin.getIconStyle( iconPath, ( editor.lang.dir == 'rtl' ), overridePath, this.iconOffset ),
 				arrowHtml: this.hasArrow ? btnArrowTpl.output() : ''
 			};
 

plugins/easyimage/plugin.js

@@ -168,7 +168,9 @@
 				editor.ui.addButton( 'Easyimage' + capitalize( style ), {
 					label: styles[ style ].label,
 					command: 'easyimage' + capitalize( style ),
-					toolbar: 'easyimage,99'
+					toolbar: 'easyimage,99',
+					icon: styles[ style ].icon,
+					iconHiDpi: styles[ style ].iconHiDpi
 				} );
 			}
 		}

tests/plugins/easyimage/customstyleicons.js

@@ -0,0 +1,73 @@
+/* bender-tags: editor */
+/* bender-ckeditor-plugins: floatingspace,easyimage,toolbar */
+
+( function() {
+	'use strict';
+
+	var buttonCreated = false,
+		commonConfig = {
+			easyimage_styles: {
+				test: {
+					icon: 'tests/_assets/sample_icon.png',
+					iconHiDpi: 'tests/_assets/sample_icon.hidpi.png'
+				}
+			},
+			easyimage_toolbar: [ 'EasyimageTest' ]
+		};
+
+	bender.test( {
+		setUp: function() {
+			if ( CKEDITOR.env.ie && CKEDITOR.env.version < 11 ) {
+				assert.ignore();
+			}
+
+			this.addButtonStub = sinon.stub( CKEDITOR.ui.prototype, 'addButton', function( name, definition ) {
+				if ( definition.command === 'easyimageTest' ) {
+					buttonCreated = true;
+					assert.areSame( 'tests/_assets/sample_icon.png', definition.icon, 'button definition.icon has proper value' );
+					assert.areSame( 'tests/_assets/sample_icon.hidpi.png', definition.iconHiDpi, 'button definition.iconHiDpi has proper value' );
+				}
+			} );
+		},
+
+		tearDown: function() {
+			buttonCreated = false;
+			if ( this.addButtonStub ) {
+				this.addButtonStub.restore();
+				this.addButtonStub = null;
+			}
+		},
+
+		'test easyimage styles button icons are properly passed to button element (classic)': function() {
+			bender.editorBot.create( {
+				name: 'editor1',
+				creator: 'replace',
+				config: commonConfig
+			}, function() {
+				assert.isTrue( buttonCreated, 'button was created' );
+			} );
+		},
+
+		'test easyimage styles button icons are properly passed to button element (divarea)': function() {
+			bender.editorBot.create( {
+				name: 'editor2',
+				creator: 'replace',
+				config: CKEDITOR.tools.object.merge( {
+					extraPlugins: 'divarea'
+				}, commonConfig )
+			}, function() {
+				assert.isTrue( buttonCreated, 'button was created' );
+			} );
+		},
+
+		'test easyimage styles button icons are properly passed to button element (inline)': function() {
+			bender.editorBot.create( {
+				name: 'editor3',
+				creator: 'inline',
+				config: commonConfig
+			}, function() {
+				assert.isTrue( buttonCreated, 'button was created' );
+			} );
+		}
+	} );
+} )();

tests/plugins/easyimage/manual/customstyleicons.html

@@ -0,0 +1,51 @@
+<h2>Classic editor</h2>
+<div id="classic">
+	<p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
+	<figure class="image easyimage">
+		<img src="../../image2/_assets/foo.png" alt="foo">
+		<figcaption>Test image</figcaption>
+	</figure>
+	<p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>
+</div>
+
+<h2>Divarea editor</h2>
+<div id="divarea">
+	<p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
+	<figure class="image easyimage">
+		<img src="../../image2/_assets/foo.png" alt="foo">
+		<figcaption>Test image</figcaption>
+	</figure>
+	<p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>
+</div>
+
+<h2>Inline editor</h2>
+<div id="inline" contenteditable="true">
+	<p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
+	<figure class="image easyimage">
+		<img src="../../image2/_assets/foo.png" alt="foo">
+		<figcaption>Test image</figcaption>
+	</figure>
+	<p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>
+</div>
+
+<script>
+	if ( CKEDITOR.env.ie && CKEDITOR.env.version < 11 ) {
+		bender.ignore();
+	}
+
+	var commonConfig = {
+		easyimage_styles: {
+			test: {
+				icon: 'tests/_assets/sample_icon.png',
+				iconHiDpi: 'tests/_assets/sample_icon.hidpi.png'
+			}
+		},
+		easyimage_toolbar: [ 'EasyimageTest' ]
+	};
+
+	CKEDITOR.replace( 'classic', commonConfig );
+	CKEDITOR.replace( 'divarea', CKEDITOR.tools.object.merge( {
+		extraPlugins: 'divarea'
+	}, commonConfig ) );
+	CKEDITOR.inline( 'inline', commonConfig );
+</script>

tests/plugins/easyimage/manual/customstyleicons.md

@@ -0,0 +1,13 @@
+@bender-tags: 4.9.0, feature, 932
+@bender-ui: collapsed
+@bender-ckeditor-plugins: sourcearea, wysiwygarea, floatingspace, toolbar, easyimage
+
+## Balloon toolbar style icons
+
+1. Click on image widget in each editor.
+
+## Expected:
+
+Balloon toolbar with one button with custom icon (red Bold icon) appears.
+
+**Important**: When in HiDPI environment make sure the visible icon is HiDPI version (its path should contain `hidpi` part somewhere).