From 9adfde0d23bf0d5b98e5b2daf1fa69d972a88e7e Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 4 May 2016 16:58:00 +0200
Subject: [PATCH 01/13] Added a frist draft of StickyToolbarView.

---
 src/stickytoolbar/stickytoolbarview.js | 118 +++++++++++++++++++++++++
 1 file changed, 118 insertions(+)
 create mode 100644 src/stickytoolbar/stickytoolbarview.js

diff --git a/src/stickytoolbar/stickytoolbarview.js b/src/stickytoolbar/stickytoolbarview.js
new file mode 100644
index 0000000..c88be36
--- /dev/null
+++ b/src/stickytoolbar/stickytoolbarview.js
@@ -0,0 +1,118 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import ToolbarView from '../toolbar/toolbarview.js';
+
+/**
+ * The stocky toolbar view class.
+ *
+ * @memberOf ui.toolbar
+ * @extends ui.toolbar
+ */
+
+export default class StickyToolbarView extends ToolbarView {
+	constructor( model ) {
+		super( model );
+
+		this.model.set( 'isSticky', false );
+
+		const bind = this.attributeBinder;
+		this.template.attributes.class.push( bind.if( 'isSticky', 'ck-toolbar-sticky' ) );
+	}
+
+	init() {
+		super.init();
+
+		/**
+		 * Toolbar placeholder is a dummy element which replaces the actual toolbar as
+		 * long as the actual toolbar is sticky. It prevents flickering of the UI.
+		 *
+		 * @private
+		 * @type {HTMLElement}
+		 * @property _elementPlaceholder
+		 */
+		this._elementPlaceholder = document.createElement( 'div' );
+		this._elementPlaceholder.classList.add( 'ck-toolbar-sticky-placeholder' );
+		this.element.parentNode.insertBefore( this._elementPlaceholder, this.element );
+
+		// Update sticky state of the toolbar as the window is being scrolled.
+		this.listenTo( window, 'scroll', () => {
+			this._checkIfShouldBeSticky();
+		} );
+
+		// Synchronize with `model.isActive` because sticking an inactive toolbar is pointless.
+		this.model.on( 'change:isActive', ( evt, name, value ) => {
+			if ( value ) {
+				this._checkIfShouldBeSticky();
+			} else {
+				this._detach();
+			}
+		} );
+	}
+
+	/**
+	 * TODO
+	 *
+	 * @protected
+	 */
+	_checkIfShouldBeSticky() {
+		const rectElement = this.model.isSticky ?
+			this._elementPlaceholder : this.element;
+		const rect = rectElement.getBoundingClientRect();
+
+		if ( rect.top < 0 && this.model.isActive ) {
+			this._stick( rect );
+		} else {
+			this._detach();
+		}
+	}
+
+	/**
+	 * TODO
+	 *
+	 * @protected
+	 */
+	_stick( regionRect ) {
+		const elementStyle = this.element.style;
+		const placeholderStyle = this._elementPlaceholder.style;
+
+		// Setup placeholder.
+		placeholderStyle.display = 'block';
+		placeholderStyle.height = regionRect.height + 'px';
+
+		// Stick the top region.
+		elementStyle.position = 'fixed';
+		elementStyle.top = 0;
+		elementStyle.background = 'rgba(0,0,255,.2)';
+		elementStyle.width = regionRect.width + 'px';
+		elementStyle.marginLeft = -window.scrollX + 'px';
+
+		this.model.isSticky = true;
+	}
+
+	/**
+	 * TODO
+	 *
+	 * @protected
+	 */
+	_detach() {
+		const elementStyle = this.element.style;
+		const placeholderStyle = this._elementPlaceholder.style;
+
+		// Release the placeholder.
+		placeholderStyle.display = 'none';
+
+		// "Peel off" the top region.
+		elementStyle.position = 'static';
+		elementStyle.top = 'auto';
+		elementStyle.background = 'none';
+		elementStyle.width = 'auto';
+		elementStyle.marginLeft = 'auto';
+
+		this.model.isSticky = false;
+	}
+}

From d10aedae671b988b891ea96202252770faf4c0ab Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 4 May 2016 18:23:13 +0200
Subject: [PATCH 02/13] Extended documentation for StickyToolbarModel. Used BEM
 for class names. Code refactoring.

---
 src/stickytoolbar/stickytoolbarview.js | 59 +++++++++++++++-----------
 1 file changed, 35 insertions(+), 24 deletions(-)

diff --git a/src/stickytoolbar/stickytoolbarview.js b/src/stickytoolbar/stickytoolbarview.js
index c88be36..9dc573b 100644
--- a/src/stickytoolbar/stickytoolbarview.js
+++ b/src/stickytoolbar/stickytoolbarview.js
@@ -8,20 +8,29 @@
 import ToolbarView from '../toolbar/toolbarview.js';
 
 /**
- * The stocky toolbar view class.
+ * The sticky toolbar view class.
  *
  * @memberOf ui.toolbar
- * @extends ui.toolbar
+ * @extends ui.toolbarView
  */
 
 export default class StickyToolbarView extends ToolbarView {
 	constructor( model ) {
 		super( model );
 
+		const bind = this.attributeBinder;
+
+		/**
+		 * Indicates whether the toolbar is in the "sticky" state.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Boolean} ui.button.StickyToolbarModel#isSticky
+		 */
 		this.model.set( 'isSticky', false );
 
-		const bind = this.attributeBinder;
-		this.template.attributes.class.push( bind.if( 'isSticky', 'ck-toolbar-sticky' ) );
+		// Toggle class of the toolbar when "sticky" state changes in the model.
+		this.template.attributes.class.push( bind.if( 'isSticky', 'ck-toolbar_sticky' ) );
 	}
 
 	init() {
@@ -36,7 +45,7 @@ export default class StickyToolbarView extends ToolbarView {
 		 * @property _elementPlaceholder
 		 */
 		this._elementPlaceholder = document.createElement( 'div' );
-		this._elementPlaceholder.classList.add( 'ck-toolbar-sticky-placeholder' );
+		this._elementPlaceholder.classList.add( 'ck-toolbar__placeholder' );
 		this.element.parentNode.insertBefore( this._elementPlaceholder, this.element );
 
 		// Update sticky state of the toolbar as the window is being scrolled.
@@ -77,19 +86,20 @@ export default class StickyToolbarView extends ToolbarView {
 	 * @protected
 	 */
 	_stick( regionRect ) {
-		const elementStyle = this.element.style;
-		const placeholderStyle = this._elementPlaceholder.style;
-
 		// Setup placeholder.
-		placeholderStyle.display = 'block';
-		placeholderStyle.height = regionRect.height + 'px';
+		Object.assign( this._elementPlaceholder.style, {
+			display: 'block',
+			height: regionRect.height + 'px'
+		} );
 
 		// Stick the top region.
-		elementStyle.position = 'fixed';
-		elementStyle.top = 0;
-		elementStyle.background = 'rgba(0,0,255,.2)';
-		elementStyle.width = regionRect.width + 'px';
-		elementStyle.marginLeft = -window.scrollX + 'px';
+		Object.assign( this.element.style, {
+			position: 'fixed',
+			top: 0,
+			background: 'rgba(0,0,255,.2)',
+			width: regionRect.width + 'px',
+			marginLeft: -window.scrollX + 'px'
+		} );
 
 		this.model.isSticky = true;
 	}
@@ -100,18 +110,19 @@ export default class StickyToolbarView extends ToolbarView {
 	 * @protected
 	 */
 	_detach() {
-		const elementStyle = this.element.style;
-		const placeholderStyle = this._elementPlaceholder.style;
-
 		// Release the placeholder.
-		placeholderStyle.display = 'none';
+		Object.assign( this._elementPlaceholder.style, {
+			display: 'none'
+		} );
 
 		// "Peel off" the top region.
-		elementStyle.position = 'static';
-		elementStyle.top = 'auto';
-		elementStyle.background = 'none';
-		elementStyle.width = 'auto';
-		elementStyle.marginLeft = 'auto';
+		Object.assign( this.element.style, {
+			position: 'static',
+			top: 'auto',
+			background: 'none',
+			width: 'auto',
+			marginLeft: 'auto'
+		} );
 
 		this.model.isSticky = false;
 	}

From 92c2ba2d766cde53fbefd59405825ac24ee0f270 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 4 May 2016 18:35:36 +0200
Subject: [PATCH 03/13] Added theme file for StickyToolbar.

---
 src/stickytoolbar/stickytoolbarview.js | 6 ------
 theme/components/stickytoolbar.scss    | 8 ++++++++
 theme/theme.scss                       | 4 ++++
 3 files changed, 12 insertions(+), 6 deletions(-)
 create mode 100644 theme/components/stickytoolbar.scss
 create mode 100644 theme/theme.scss

diff --git a/src/stickytoolbar/stickytoolbarview.js b/src/stickytoolbar/stickytoolbarview.js
index 9dc573b..84b799c 100644
--- a/src/stickytoolbar/stickytoolbarview.js
+++ b/src/stickytoolbar/stickytoolbarview.js
@@ -94,9 +94,6 @@ export default class StickyToolbarView extends ToolbarView {
 
 		// Stick the top region.
 		Object.assign( this.element.style, {
-			position: 'fixed',
-			top: 0,
-			background: 'rgba(0,0,255,.2)',
 			width: regionRect.width + 'px',
 			marginLeft: -window.scrollX + 'px'
 		} );
@@ -117,9 +114,6 @@ export default class StickyToolbarView extends ToolbarView {
 
 		// "Peel off" the top region.
 		Object.assign( this.element.style, {
-			position: 'static',
-			top: 'auto',
-			background: 'none',
 			width: 'auto',
 			marginLeft: 'auto'
 		} );
diff --git a/theme/components/stickytoolbar.scss b/theme/components/stickytoolbar.scss
new file mode 100644
index 0000000..d985aef
--- /dev/null
+++ b/theme/components/stickytoolbar.scss
@@ -0,0 +1,8 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+.ck-toolbar_sticky {
+	position: fixed;
+	top: 0;
+	background: rgba(0,0,255,.2);
+}
diff --git a/theme/theme.scss b/theme/theme.scss
new file mode 100644
index 0000000..dcddcb8
--- /dev/null
+++ b/theme/theme.scss
@@ -0,0 +1,4 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+@import 'components/stickytoolbar';

From 0a6eef1ee5a51636b9f296b0875376c8211acf81 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 5 May 2016 13:55:50 +0200
Subject: [PATCH 04/13] Theme adjustments for StickyToolbarView.

---
 src/stickytoolbar/stickytoolbarview.js |  3 ++-
 src/toolbar/toolbarview.js             |  2 +-
 theme/components/stickytoolbar.scss    | 11 +++++++----
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/stickytoolbar/stickytoolbarview.js b/src/stickytoolbar/stickytoolbarview.js
index 84b799c..f67c332 100644
--- a/src/stickytoolbar/stickytoolbarview.js
+++ b/src/stickytoolbar/stickytoolbarview.js
@@ -95,7 +95,8 @@ export default class StickyToolbarView extends ToolbarView {
 		// Stick the top region.
 		Object.assign( this.element.style, {
 			width: regionRect.width + 'px',
-			marginLeft: -window.scrollX + 'px'
+			// Compensate 1px border which is added when becoming "sticky".
+			marginLeft: -window.scrollX - 1 + 'px'
 		} );
 
 		this.model.isSticky = true;
diff --git a/src/toolbar/toolbarview.js b/src/toolbar/toolbarview.js
index 8300515..f9ff3e9 100644
--- a/src/toolbar/toolbarview.js
+++ b/src/toolbar/toolbarview.js
@@ -21,7 +21,7 @@ export default class ToolbarView extends View {
 		this.template = {
 			tag: 'div',
 			attributes: {
-				class: [ 'ck-toolbar' ]
+				class: [ 'ck-reset ck-toolbar' ]
 			}
 		};
 
diff --git a/theme/components/stickytoolbar.scss b/theme/components/stickytoolbar.scss
index d985aef..725e9ca 100644
--- a/theme/components/stickytoolbar.scss
+++ b/theme/components/stickytoolbar.scss
@@ -1,8 +1,11 @@
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
-.ck-toolbar_sticky {
-	position: fixed;
-	top: 0;
-	background: rgba(0,0,255,.2);
+@include ck-editor {
+	.ck-toolbar.ck-toolbar_sticky {
+		position: fixed;
+		top: 0;
+		border: 1px solid ck-border-color();
+		background: ck-color( 'foreground' );
+	}
 }

From 136862cc2cabb0bddfb2a8516893d95bfb337054 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 5 May 2016 14:07:12 +0200
Subject: [PATCH 05/13] Minor fixes to StickyToolbarView positioning.

---
 src/stickytoolbar/stickytoolbarview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stickytoolbar/stickytoolbarview.js b/src/stickytoolbar/stickytoolbarview.js
index f67c332..2398a9e 100644
--- a/src/stickytoolbar/stickytoolbarview.js
+++ b/src/stickytoolbar/stickytoolbarview.js
@@ -94,8 +94,8 @@ export default class StickyToolbarView extends ToolbarView {
 
 		// Stick the top region.
 		Object.assign( this.element.style, {
-			width: regionRect.width + 'px',
 			// Compensate 1px border which is added when becoming "sticky".
+			width: regionRect.width + 2 + 'px',
 			marginLeft: -window.scrollX - 1 + 'px'
 		} );
 

From 0022b3010f5eaae2d9f022468963fb1e7268f2f5 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Mon, 9 May 2016 11:14:11 +0200
Subject: [PATCH 06/13] Updated documentation of StickyToolbarView.

---
 src/stickytoolbar/stickytoolbarview.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/stickytoolbar/stickytoolbarview.js b/src/stickytoolbar/stickytoolbarview.js
index 2398a9e..fe5a614 100644
--- a/src/stickytoolbar/stickytoolbarview.js
+++ b/src/stickytoolbar/stickytoolbarview.js
@@ -37,8 +37,8 @@ export default class StickyToolbarView extends ToolbarView {
 		super.init();
 
 		/**
-		 * Toolbar placeholder is a dummy element which replaces the actual toolbar as
-		 * long as the actual toolbar is sticky. It prevents flickering of the UI.
+		 * A dummy element which visually fills the space as long as the
+		 * actual toolbar is sticky. It prevents flickering of the UI.
 		 *
 		 * @private
 		 * @type {HTMLElement}
@@ -64,7 +64,9 @@ export default class StickyToolbarView extends ToolbarView {
 	}
 
 	/**
-	 * TODO
+	 * Analyzes the environment to decide whether the toolbar should
+	 * be sticky or not. Then, it uses {@link _stick} and {@link _detach}
+	 * methods to manage the state of the toolbar.
 	 *
 	 * @protected
 	 */
@@ -81,8 +83,13 @@ export default class StickyToolbarView extends ToolbarView {
 	}
 
 	/**
-	 * TODO
+	 * Sticks the toolbar to the top edge of the viewport simulating
+	 * CSS position:sticky. Also see {@link _detach}.
 	 *
+	 * TODO: Possibly replaced by CSS in the future
+	 * http://caniuse.com/#feat=css-sticky
+	 *
+	 * @param {Object} regionRect An output of getBoundingClientRect native DOM method.
 	 * @protected
 	 */
 	_stick( regionRect ) {
@@ -103,7 +110,8 @@ export default class StickyToolbarView extends ToolbarView {
 	}
 
 	/**
-	 * TODO
+	 * Detaches the toolbar from the top edge of the viewport.
+	 * See {@link _stick}.
 	 *
 	 * @protected
 	 */
@@ -113,7 +121,7 @@ export default class StickyToolbarView extends ToolbarView {
 			display: 'none'
 		} );
 
-		// "Peel off" the top region.
+		// Detach the top region.
 		Object.assign( this.element.style, {
 			width: 'auto',
 			marginLeft: 'auto'

From 274b55d5f8df1665ed78109d57a6392a3b44f845 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= <pkoszulinski@gmail.com>
Date: Tue, 10 May 2016 15:42:47 +0200
Subject: [PATCH 07/13] Minor API doc fix.

---
 src/stickytoolbar/stickytoolbarview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stickytoolbar/stickytoolbarview.js b/src/stickytoolbar/stickytoolbarview.js
index fe5a614..29a89f4 100644
--- a/src/stickytoolbar/stickytoolbarview.js
+++ b/src/stickytoolbar/stickytoolbarview.js
@@ -89,8 +89,8 @@ export default class StickyToolbarView extends ToolbarView {
 	 * TODO: Possibly replaced by CSS in the future
 	 * http://caniuse.com/#feat=css-sticky
 	 *
-	 * @param {Object} regionRect An output of getBoundingClientRect native DOM method.
 	 * @protected
+	 * @param {Object} regionRect An output of getBoundingClientRect native DOM method.
 	 */
 	_stick( regionRect ) {
 		// Setup placeholder.

From d11c824f0ccbd3a9abd1a6fa20c442cb39588aff Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 12 May 2016 15:34:29 +0200
Subject: [PATCH 08/13] Added IframeView component with tests.

---
 src/iframe/iframeview.js   | 108 +++++++++++++++++++++++++++++++++++++
 tests/iframe/iframeview.js |  99 ++++++++++++++++++++++++++++++++++
 2 files changed, 207 insertions(+)
 create mode 100644 src/iframe/iframeview.js
 create mode 100644 tests/iframe/iframeview.js

diff --git a/src/iframe/iframeview.js b/src/iframe/iframeview.js
new file mode 100644
index 0000000..65a2671
--- /dev/null
+++ b/src/iframe/iframeview.js
@@ -0,0 +1,108 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import View from '../view.js';
+
+/**
+ * The basic iframe view class.
+ *
+ * @memberOf ui.iframe
+ * @extends ui.View
+ */
+export default class IframeView extends View {
+	/**
+	 * Creates a new instance of the IframeView.
+	 *
+	 * @param {ui.iframe.IframeModel} [model] (View)Model of this IframeView.
+	 * @param {utils.Locale} [locale] The {@link ckeditor5.Editor#locale editor's locale} instance.
+	 */
+	constructor( model, locale ) {
+		super( model, locale );
+
+		const bind = this.attributeBinder;
+
+		this.template = {
+			tag: 'iframe',
+			attributes: {
+				class: [ 'ck-reset-all' ],
+				// It seems that we need to allow scripts in order to be able to listen to events.
+				// TODO: Research that. Perhaps the src must be set?
+				sandbox: 'allow-same-origin allow-scripts',
+				width: bind.to( 'width' ),
+				height: bind.to( 'height' )
+			},
+			on: {
+				load: 'loaded'
+			}
+		};
+
+		/**
+		 * A promise returned by {@link init} since iframe loading may be asynchronous.
+		 *
+		 * **Note**: Listening to `load` in {@link init} makes no sense because at this point
+		 * the element is already in the DOM and the `load` event might already be fired.
+		 *
+		 * See {@link _iframeDeferred}.
+		 *
+		 * @private
+		 * @member {Object} ui.iframe.IframeView
+		 */
+		this._iframePromise = new Promise( ( resolve, reject ) => {
+			/**
+			 * A deferred object used to resolve the iframe promise associated with
+			 * asynchronous loading of `contentDocument`. See {@link _iframePromise}.
+			 *
+			 * @private
+			 * @member {Object} ui.iframe.IframeView
+			 */
+			this._iframeDeferred = { resolve, reject };
+		} );
+
+		this.on( 'loaded', () => {
+			this._iframeDeferred.resolve();
+		} );
+	}
+
+	/**
+	 * Initializes iframe {@link element} and returns a `Promise` for asynchronous
+	 * child `contentDocument` loading process. See {@link _iframePromise}.
+	 *
+	 * @returns {Promise} A promise which resolves once the iframe `contentDocument` has
+	 * been {@link ui.iframe.IframeView#loaded loaded}.
+	 */
+	init() {
+		super.init();
+
+		return this._iframePromise;
+	}
+}
+
+/**
+ * Fired when the iframe `contentDocument` finished loading.
+ *
+ * @event ui.iframe.IframeView#loaded
+ */
+
+/**
+ * The basic iframe model interface.
+ *
+ * @memberOf ui.iframe
+ * @interface IframeModel
+ * @mixes utils.ObservableMixin
+ */
+
+/**
+ * The width of the iframe.
+ *
+ * @member {Number} ui.iframe.IframeModel#width
+ */
+
+/**
+ * The height of the iframe.
+ *
+ * @member {Number} ui.iframe.IframeModel#height
+ */
diff --git a/tests/iframe/iframeview.js b/tests/iframe/iframeview.js
new file mode 100644
index 0000000..f9d4e95
--- /dev/null
+++ b/tests/iframe/iframeview.js
@@ -0,0 +1,99 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* bender-tags: ui, button */
+
+'use strict';
+
+import IframeView from '/ckeditor5/ui/iframe/iframeview.js';
+import Model from '/ckeditor5/ui/model.js';
+
+describe( 'IframeView', () => {
+	let model, view;
+
+	beforeEach( () => {
+		model = new Model( {
+			width: 100,
+			height: 200
+		} );
+
+		view = new IframeView( model );
+
+		view.init();
+	} );
+
+	describe( 'constructor', () => {
+		it( 'creates view element from the template', () => {
+			expect( view.element.classList.contains( 'ck-reset-all' ) ).to.be.true;
+			expect( view.element.attributes.getNamedItem( 'sandbox' ).value ).to.equal( 'allow-same-origin allow-scripts' );
+		} );
+	} );
+
+	describe( 'init', () => {
+		it( 'returns promise', () => {
+			view = new IframeView( model );
+
+			expect( view.init() ).to.be.an.instanceof( Promise );
+		} );
+
+		it( 'returns promise which is resolved when iframe finished loading', () => {
+			view = new IframeView( model );
+
+			const promise = view.init().then( () => {
+				expect( view.element.contentDocument.readyState ).to.equal( 'complete' );
+			} );
+
+			// Moving iframe into DOM trigger creation of a document inside iframe.
+			document.body.appendChild( view.element );
+
+			return promise;
+		} );
+	} );
+
+	describe( 'loaded event', () => {
+		it( 'is fired when frame finished loading', ( done ) => {
+			view = new IframeView( model );
+
+			view.on( 'loaded', () => {
+				done();
+			} );
+
+			view.init();
+
+			// Moving iframe into DOM trigger creation of a document inside iframe.
+			document.body.appendChild( view.element );
+		} );
+	} );
+
+	describe( '<iframe> bindings', () => {
+		describe( 'width', () => {
+			it( 'is set initially', () => {
+				expect( view.element.attributes.getNamedItem( 'width' ).value ).to.equal( '100' );
+			} );
+
+			it( 'reacts to change in the model', () => {
+				model.width = 123;
+				expect( view.element.attributes.getNamedItem( 'width' ).value ).to.equal( '123' );
+
+				model.width = 321;
+				expect( view.element.attributes.getNamedItem( 'width' ).value ).to.equal( '321' );
+			} );
+		} );
+
+		describe( 'height', () => {
+			it( 'is set initially', () => {
+				expect( view.element.attributes.getNamedItem( 'height' ).value ).to.equal( '200' );
+			} );
+
+			it( 'reacts to change in the model', () => {
+				model.height = 123;
+				expect( view.element.attributes.getNamedItem( 'height' ).value ).to.equal( '123' );
+
+				model.height = 321;
+				expect( view.element.attributes.getNamedItem( 'height' ).value ).to.equal( '321' );
+			} );
+		} );
+	} );
+} );

From 7ea1ad1eb2bf83c2eadbfc7f3e60dea616ecceea Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 12 May 2016 17:06:02 +0200
Subject: [PATCH 09/13] Test: Fixed tags in IframeView tests.

---
 tests/iframe/iframeview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/iframe/iframeview.js b/tests/iframe/iframeview.js
index f9d4e95..5fc66d2 100644
--- a/tests/iframe/iframeview.js
+++ b/tests/iframe/iframeview.js
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-/* bender-tags: ui, button */
+/* bender-tags: ui, iframe */
 
 'use strict';
 

From 421639a2717f886c424cef9382468c358c5a1921 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 13 May 2016 14:19:20 +0200
Subject: [PATCH 10/13] Removed width/height bindings from IframeView.

---
 src/iframe/iframeview.js   | 26 +-------------------------
 tests/iframe/iframeview.js | 30 ------------------------------
 2 files changed, 1 insertion(+), 55 deletions(-)

diff --git a/src/iframe/iframeview.js b/src/iframe/iframeview.js
index 65a2671..562db52 100644
--- a/src/iframe/iframeview.js
+++ b/src/iframe/iframeview.js
@@ -23,17 +23,13 @@ export default class IframeView extends View {
 	constructor( model, locale ) {
 		super( model, locale );
 
-		const bind = this.attributeBinder;
-
 		this.template = {
 			tag: 'iframe',
 			attributes: {
 				class: [ 'ck-reset-all' ],
 				// It seems that we need to allow scripts in order to be able to listen to events.
 				// TODO: Research that. Perhaps the src must be set?
-				sandbox: 'allow-same-origin allow-scripts',
-				width: bind.to( 'width' ),
-				height: bind.to( 'height' )
+				sandbox: 'allow-same-origin allow-scripts'
 			},
 			on: {
 				load: 'loaded'
@@ -86,23 +82,3 @@ export default class IframeView extends View {
  *
  * @event ui.iframe.IframeView#loaded
  */
-
-/**
- * The basic iframe model interface.
- *
- * @memberOf ui.iframe
- * @interface IframeModel
- * @mixes utils.ObservableMixin
- */
-
-/**
- * The width of the iframe.
- *
- * @member {Number} ui.iframe.IframeModel#width
- */
-
-/**
- * The height of the iframe.
- *
- * @member {Number} ui.iframe.IframeModel#height
- */
diff --git a/tests/iframe/iframeview.js b/tests/iframe/iframeview.js
index 5fc66d2..279fe36 100644
--- a/tests/iframe/iframeview.js
+++ b/tests/iframe/iframeview.js
@@ -66,34 +66,4 @@ describe( 'IframeView', () => {
 			document.body.appendChild( view.element );
 		} );
 	} );
-
-	describe( '<iframe> bindings', () => {
-		describe( 'width', () => {
-			it( 'is set initially', () => {
-				expect( view.element.attributes.getNamedItem( 'width' ).value ).to.equal( '100' );
-			} );
-
-			it( 'reacts to change in the model', () => {
-				model.width = 123;
-				expect( view.element.attributes.getNamedItem( 'width' ).value ).to.equal( '123' );
-
-				model.width = 321;
-				expect( view.element.attributes.getNamedItem( 'width' ).value ).to.equal( '321' );
-			} );
-		} );
-
-		describe( 'height', () => {
-			it( 'is set initially', () => {
-				expect( view.element.attributes.getNamedItem( 'height' ).value ).to.equal( '200' );
-			} );
-
-			it( 'reacts to change in the model', () => {
-				model.height = 123;
-				expect( view.element.attributes.getNamedItem( 'height' ).value ).to.equal( '123' );
-
-				model.height = 321;
-				expect( view.element.attributes.getNamedItem( 'height' ).value ).to.equal( '321' );
-			} );
-		} );
-	} );
 } );

From 6d9fce5d80c60bdfd5d280f149e367e5dd30104d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= <pkoszulinski@gmail.com>
Date: Fri, 13 May 2016 16:28:27 +0200
Subject: [PATCH 11/13] API docs fixes.

---
 src/iframe/iframeview.js               |  4 +--
 src/stickytoolbar/stickytoolbarview.js | 45 +++++++++++++++++---------
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/iframe/iframeview.js b/src/iframe/iframeview.js
index 562db52..ed8e92f 100644
--- a/src/iframe/iframeview.js
+++ b/src/iframe/iframeview.js
@@ -45,7 +45,7 @@ export default class IframeView extends View {
 		 * See {@link _iframeDeferred}.
 		 *
 		 * @private
-		 * @member {Object} ui.iframe.IframeView
+		 * @member {Object} ui.iframe.IframeView#_iframePromise
 		 */
 		this._iframePromise = new Promise( ( resolve, reject ) => {
 			/**
@@ -53,7 +53,7 @@ export default class IframeView extends View {
 			 * asynchronous loading of `contentDocument`. See {@link _iframePromise}.
 			 *
 			 * @private
-			 * @member {Object} ui.iframe.IframeView
+			 * @member {Object} ui.iframe.IframeView#_iframeDefrred
 			 */
 			this._iframeDeferred = { resolve, reject };
 		} );
diff --git a/src/stickytoolbar/stickytoolbarview.js b/src/stickytoolbar/stickytoolbarview.js
index 29a89f4..8ae890c 100644
--- a/src/stickytoolbar/stickytoolbarview.js
+++ b/src/stickytoolbar/stickytoolbarview.js
@@ -10,23 +10,15 @@ import ToolbarView from '../toolbar/toolbarview.js';
 /**
  * The sticky toolbar view class.
  *
- * @memberOf ui.toolbar
- * @extends ui.toolbarView
+ * @memberOf ui.stickyToolbar
+ * @extends ui.toolbar.ToolbarView
  */
-
 export default class StickyToolbarView extends ToolbarView {
 	constructor( model ) {
 		super( model );
 
 		const bind = this.attributeBinder;
 
-		/**
-		 * Indicates whether the toolbar is in the "sticky" state.
-		 *
-		 * @readonly
-		 * @observable
-		 * @member {Boolean} ui.button.StickyToolbarModel#isSticky
-		 */
 		this.model.set( 'isSticky', false );
 
 		// Toggle class of the toolbar when "sticky" state changes in the model.
@@ -41,8 +33,7 @@ export default class StickyToolbarView extends ToolbarView {
 		 * actual toolbar is sticky. It prevents flickering of the UI.
 		 *
 		 * @private
-		 * @type {HTMLElement}
-		 * @property _elementPlaceholder
+		 * @property {HTMLElement} ui.stickyToobar.StickyToolbarView#_elementPlaceholder
 		 */
 		this._elementPlaceholder = document.createElement( 'div' );
 		this._elementPlaceholder.classList.add( 'ck-toolbar__placeholder' );
@@ -54,7 +45,7 @@ export default class StickyToolbarView extends ToolbarView {
 		} );
 
 		// Synchronize with `model.isActive` because sticking an inactive toolbar is pointless.
-		this.model.on( 'change:isActive', ( evt, name, value ) => {
+		this.listenTo( this.model, 'change:isActive', ( evt, name, value ) => {
 			if ( value ) {
 				this._checkIfShouldBeSticky();
 			} else {
@@ -84,7 +75,7 @@ export default class StickyToolbarView extends ToolbarView {
 
 	/**
 	 * Sticks the toolbar to the top edge of the viewport simulating
-	 * CSS position:sticky. Also see {@link _detach}.
+	 * CSS position:sticky. Also see {@link #_detach}.
 	 *
 	 * TODO: Possibly replaced by CSS in the future
 	 * http://caniuse.com/#feat=css-sticky
@@ -111,7 +102,7 @@ export default class StickyToolbarView extends ToolbarView {
 
 	/**
 	 * Detaches the toolbar from the top edge of the viewport.
-	 * See {@link _stick}.
+	 * See {@link #_stick}.
 	 *
 	 * @protected
 	 */
@@ -130,3 +121,27 @@ export default class StickyToolbarView extends ToolbarView {
 		this.model.isSticky = false;
 	}
 }
+
+/**
+ * The basic sticky toolbar model interface.
+ *
+ * @memberOf ui.stickyToolbar
+ * @interface StickyToolbarModel
+ */
+
+/**
+ * Indicates whether the toolbar should be active. When any editable
+ * is focused in the editor, toolbar becomes active.
+ *
+ * @readonly
+ * @observable
+ * @member {Boolean} ui.button.StickyToolbarModel#isActive
+ */
+
+/**
+ * Indicates whether the toolbar is in the "sticky" state.
+ *
+ * @readonly
+ * @observable
+ * @member {Boolean} ui.button.StickyToolbarModel#isSticky
+ */

From b445b33659cba64cb5d45b0abbfaaf4eac0d9522 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 13 May 2016 17:00:04 +0200
Subject: [PATCH 12/13] Remove _elementPlaceholder when StickyToolbarView is
 being destroyed.

---
 src/stickytoolbar/stickytoolbarview.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/stickytoolbar/stickytoolbarview.js b/src/stickytoolbar/stickytoolbarview.js
index 8ae890c..2f3fba6 100644
--- a/src/stickytoolbar/stickytoolbarview.js
+++ b/src/stickytoolbar/stickytoolbarview.js
@@ -54,6 +54,15 @@ export default class StickyToolbarView extends ToolbarView {
 		} );
 	}
 
+	/**
+	 * Destroys the toolbar and removes the {@link _elementPlaceholder}.
+	 */
+	destroy() {
+		super.destroy();
+
+		this._elementPlaceholder.remove();
+	}
+
 	/**
 	 * Analyzes the environment to decide whether the toolbar should
 	 * be sticky or not. Then, it uses {@link _stick} and {@link _detach}

From 20e5a39a9805133a12545f7eef0d9ba16beabc68 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Mon, 16 May 2016 12:06:35 +0200
Subject: [PATCH 13/13] Tests: Added unit tests for StickyToolbarView.

---
 tests/stickytoolbar/stickytoolbarview.js | 203 +++++++++++++++++++++++
 1 file changed, 203 insertions(+)
 create mode 100644 tests/stickytoolbar/stickytoolbarview.js

diff --git a/tests/stickytoolbar/stickytoolbarview.js b/tests/stickytoolbar/stickytoolbarview.js
new file mode 100644
index 0000000..d59e8e1
--- /dev/null
+++ b/tests/stickytoolbar/stickytoolbarview.js
@@ -0,0 +1,203 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* bender-tags: ui, toolbar */
+
+'use strict';
+
+import testUtils from '/tests/ckeditor5/_utils/utils.js';
+import StickyToolbarView from '/ckeditor5/ui/stickytoolbar/stickytoolbarview.js';
+import ToolbarView from '/ckeditor5/ui/toolbar/toolbarview.js';
+import Model from '/ckeditor5/ui/model.js';
+
+testUtils.createSinonSandbox();
+
+describe( 'StickyToolbarView', () => {
+	let model, view;
+
+	beforeEach( () => {
+		model = new Model();
+		view = new StickyToolbarView( model );
+
+		// In real life, it would be set by the Toollbar Controller (like editor binding).
+		model.set( 'isActive', false );
+
+		document.body.appendChild( view.element );
+
+		return view.init();
+	} );
+
+	describe( 'constructor', () => {
+		it( 'inherits from ToolbarView', () => {
+			expect( view ).to.be.instanceof( ToolbarView );
+		} );
+
+		it( 'sets model.isSticky false', () => {
+			expect( model.isSticky ).to.be.false;
+		} );
+	} );
+
+	describe( 'view.element bindings', () => {
+		it( 'work when model.isSticky changes', () => {
+			expect( view.element.classList.contains( 'ck-toolbar_sticky' ) ).to.be.false;
+
+			model.isSticky = true;
+
+			expect( view.element.classList.contains( 'ck-toolbar_sticky' ) ).to.be.true;
+		} );
+	} );
+
+	describe( 'init', () => {
+		it( 'creates view._elementPlaceholder', () => {
+			expect( view._elementPlaceholder.classList.contains( 'ck-toolbar__placeholder' ) ).to.be.true;
+			expect( view.element.previousSibling ).to.equal( view._elementPlaceholder );
+		} );
+
+		it( 'listens to window#scroll event and calls view._checkIfShouldBeSticky', () => {
+			const spy = testUtils.sinon.spy( view, '_checkIfShouldBeSticky' );
+
+			window.dispatchEvent( new Event( 'scroll' ) );
+
+			expect( spy.calledOnce ).to.be.true;
+		} );
+
+		it( 'listens to model.isActive calls view._checkIfShouldBeSticky or view.detach', () => {
+			const checkSpy = testUtils.sinon.spy( view, '_checkIfShouldBeSticky' );
+			const detachSpy = testUtils.sinon.spy( view, '_detach' );
+
+			expect( checkSpy.notCalled ).to.be.true;
+			expect( detachSpy.notCalled ).to.be.true;
+
+			model.isActive = true;
+
+			expect( checkSpy.calledOnce ).to.be.true;
+			expect( detachSpy.calledOnce ).to.be.true;
+
+			model.isActive = false;
+
+			expect( checkSpy.calledOnce ).to.be.true;
+			expect( detachSpy.calledTwice ).to.be.true;
+		} );
+	} );
+
+	describe( 'destroy', () => {
+		it( 'calls destroy on parent class', () => {
+			const spy = testUtils.sinon.spy( ToolbarView.prototype, 'destroy' );
+
+			view.destroy();
+
+			expect( spy.calledOnce ).to.be.true;
+		} );
+
+		it( 'removes view._elementPlaceholder from DOM', () => {
+			view.destroy();
+			expect( view._elementPlaceholder.parentNode ).to.be.null;
+		} );
+	} );
+
+	describe( '_checkIfShouldBeSticky', () => {
+		it( 'sticks the toolbar if beyond the top of the viewport (toolbar is active)', () => {
+			model.isActive = true;
+
+			testUtils.sinon.stub( HTMLElement.prototype, 'getBoundingClientRect', () => {
+				return {
+					top: -10
+				};
+			} );
+
+			const stickSpy = testUtils.sinon.spy( view, '_stick' );
+			const detachSpy = testUtils.sinon.spy( view, '_detach' );
+
+			view._checkIfShouldBeSticky();
+
+			expect( stickSpy.calledOnce ).to.be.true;
+			expect( detachSpy.notCalled ).to.be.true;
+		} );
+
+		it( 'detaches the toolbar if beyond the top of the viewport (toolbar is inactive)', () => {
+			model.isActive = false;
+
+			testUtils.sinon.stub( HTMLElement.prototype, 'getBoundingClientRect', () => {
+				return {
+					top: -10
+				};
+			} );
+
+			const stickSpy = testUtils.sinon.spy( view, '_stick' );
+			const detachSpy = testUtils.sinon.spy( view, '_detach' );
+
+			view._checkIfShouldBeSticky();
+
+			expect( stickSpy.notCalled ).to.be.true;
+			expect( detachSpy.calledOnce ).to.be.true;
+		} );
+
+		it( 'detaches the toolbar if in the viewport (toolbar is active)', () => {
+			model.isActive = true;
+
+			testUtils.sinon.stub( HTMLElement.prototype, 'getBoundingClientRect', () => {
+				return {
+					top: 10
+				};
+			} );
+
+			const stickSpy = testUtils.sinon.spy( view, '_stick' );
+			const detachSpy = testUtils.sinon.spy( view, '_detach' );
+
+			view._checkIfShouldBeSticky();
+
+			expect( stickSpy.notCalled ).to.be.true;
+			expect( detachSpy.calledOnce ).to.be.true;
+		} );
+	} );
+
+	describe( '_stick', () => {
+		it( 'updates view._elementPlaceholder styles', () => {
+			view._stick( { top: 10, width: 20, height: 30 } );
+
+			expect( view._elementPlaceholder.style.display ).to.equal( 'block' );
+			expect( view._elementPlaceholder.style.height ).to.equal( '30px' );
+		} );
+
+		it( 'updates view.element styles', () => {
+			view._stick( { top: 10, width: 20, height: 30 } );
+
+			expect( view.element.style.width ).to.equal( '22px' );
+			// It's tricky to mock window.scrollX.
+			expect( view.element.style.marginLeft ).to.not.equal( '' );
+		} );
+
+		it( 'updates model.isSticky attribute', () => {
+			expect( model.isSticky ).to.be.false;
+
+			view._stick( { top: 10, width: 20, height: 30 } );
+
+			expect( model.isSticky ).to.be.true;
+		} );
+	} );
+
+	describe( '_detach', () => {
+		it( 'updates view._elementPlaceholder styles', () => {
+			view._detach();
+
+			expect( view._elementPlaceholder.style.display ).to.equal( 'none' );
+		} );
+
+		it( 'updates view.element styles', () => {
+			view._detach();
+
+			expect( view.element.style.width ).to.equal( 'auto' );
+			expect( view.element.style.marginLeft ).to.equal( 'auto' );
+		} );
+
+		it( 'updates model.isSticky attribute', () => {
+			model.isSticky = true;
+
+			view._detach();
+
+			expect( model.isSticky ).to.be.false;
+		} );
+	} );
+} );