docs: function initLine( that ) {
  		var doc = that.doc,
  			// This the main box element that holds triangles and the insertion button
  			line = newElementFromHtml( '<span contenteditable="false" style="' + CSS_COMMON + 'position:absolute;border-top:1px dashed ' + that.boxColor + '"></span>', doc ),
  			iconPath = CKEDITOR.getUrl( this.path + 'images/' + ( env.hidpi ? 'hidpi/' : '' ) + 'icon' + ( that.rtl ? '-rtl' : '' ) + '.png' );
  
  		extend( line, {
  
  			attach: function() {
  				// Only if not already attached
  				if ( !this.wrap.getParent() )
  					this.wrap.appendTo( that.editable, true );
  
  				return this;
  			},
  
  			// Looks are as follows: [ LOOK_TOP, LOOK_BOTTOM, LOOK_NORMAL ].
  			lineChildren: [
  				extend(
  					newElementFromHtml( '<span title="' + that.editor.lang.magicline.title +
  						'" contenteditable="false">&#8629;</span>', doc ), {
  					base: CSS_COMMON + 'height:17px;width:17px;' + ( that.rtl ? 'left' : 'right' ) + ':17px;'
  						+ 'background:url(' + iconPath + ') center no-repeat ' + that.boxColor + ';cursor:pointer;'
  						+ ( env.hc ? 'font-size: 15px;line-height:14px;border:1px solid #fff;text-align:center;' : '' )
  						+ ( env.hidpi ? 'background-size: 9px 10px;' : '' ),
  					looks: [
  						'top:-8px;' + CKEDITOR.tools.cssVendorPrefix( 'border-radius', '2px', 1 ),
  						'top:-17px;' + CKEDITOR.tools.cssVendorPrefix( 'border-radius', '2px 2px 0px 0px', 1 ),
  						'top:-1px;' + CKEDITOR.tools.cssVendorPrefix( 'border-radius', '0px 0px 2px 2px', 1 )
  					]
  				} ),
  				extend( newElementFromHtml( TRIANGLE_HTML, doc ), {
  					base: CSS_TRIANGLE + 'left:0px;border-left-color:' + that.boxColor + ';',
  					looks: [
  						'border-width:8px 0 8px 8px;top:-8px',
  						'border-width:8px 0 0 8px;top:-8px',
  						'border-width:0 0 8px 8px;top:0px'
  					]
  				} ),
  				extend( newElementFromHtml( TRIANGLE_HTML, doc ), {
  					base: CSS_TRIANGLE + 'right:0px;border-right-color:' + that.boxColor + ';',
  					looks: [
  						'border-width:8px 8px 8px 0;top:-8px',
  						'border-width:8px 8px 0 0;top:-8px',
  						'border-width:0 8px 8px 0;top:0px'
  					]
  				} )
  			],
  
  			detach: function() {
  				// Detach only if already attached.
  				if ( this.wrap.getParent() )
  					this.wrap.remove();
  
  				return this;
  			},
  
  			// Checks whether mouseY is around an element by comparing boundaries and considering
  			// an offset distance.
  			mouseNear: function() {
  				that.debug.groupStart( 'mouseNear' ); // %REMOVE_LINE%
  
  				updateSize( that, this );
  				var offset = that.holdDistance,
  					size = this.size;
  
  				// Determine neighborhood by element dimensions and offsets.
  				if ( size && inBetween( that.mouse.y, size.top - offset, size.bottom + offset ) && inBetween( that.mouse.x, size.left - offset, size.right + offset ) ) {
  					that.debug.logEnd( 'Mouse is near.' ); // %REMOVE_LINE%
  					return true;
  				}
  
  				that.debug.logEnd( 'Mouse isn\'t near.' ); // %REMOVE_LINE%
  				return false;
  			},
  
  			// Adjusts position of the box according to the trigger properties.
  			// If also affects look of the box depending on the type of the trigger.
  			place: function() {
  				var view = that.view,
  					editable = that.editable,
  					trigger = that.trigger,
  					upper = trigger.upper,
  					lower = trigger.lower,
  					any = upper || lower,
  					parent = any.getParent(),
  					styleSet = {};
  
  				// Save recent trigger for further insertion.
  				// It is necessary due to the fact, that that.trigger may
  				// contain different boxTrigger at the moment of insertion
  				// or may be even null.
  				this.trigger = trigger;
  
  				upper && updateSize( that, upper, true );
  				lower && updateSize( that, lower, true );
  				updateSize( that, parent, true );
  
  				// Yeah, that's gonna be useful in inline-mode case.
  				if ( that.inInlineMode )
  					updateEditableSize( that, true );
  
  				// Set X coordinate (left, right, width).
  				if ( parent.equals( editable ) ) {
  					styleSet.left = view.scroll.x;
  					styleSet.right = -view.scroll.x;
  					styleSet.width = '';
  				} else {
  					styleSet.left = any.size.left - any.size.margin.left + view.scroll.x - ( that.inInlineMode ? view.editable.left + view.editable.border.left : 0 );
  					styleSet.width = any.size.outerWidth + any.size.margin.left + any.size.margin.right + view.scroll.x;
  					styleSet.right = '';
  				}
  
  				// Set Y coordinate (top) for trigger consisting of two elements.
  				if ( upper && lower ) {
  					// No margins at all or they're equal. Place box right between.
  					if ( upper.size.margin.bottom === lower.size.margin.top )
  						styleSet.top = 0 | ( upper.size.bottom + upper.size.margin.bottom / 2 );
  					else {
  						// Upper margin < lower margin. Place at lower margin.
  						if ( upper.size.margin.bottom < lower.size.margin.top )
  							styleSet.top = upper.size.bottom + upper.size.margin.bottom;
  						// Upper margin > lower margin. Place at upper margin - lower margin.
  						else
  							styleSet.top = upper.size.bottom + upper.size.margin.bottom - lower.size.margin.top;
  					}
  				}
  				// Set Y coordinate (top) for single-edge trigger.
  				else if ( !upper )
  					styleSet.top = lower.size.top - lower.size.margin.top;
  				else if ( !lower )
  					styleSet.top = upper.size.bottom + upper.size.margin.bottom;
  
  				// Set box button modes if close to the viewport horizontal edge
  				// or look forced by the trigger.
  				if ( trigger.is( LOOK_TOP ) || inBetween( styleSet.top, view.scroll.y - 15, view.scroll.y + 5 ) ) {
  					styleSet.top = that.inInlineMode ? 0 : view.scroll.y;
  					this.look( LOOK_TOP );
  				} else if ( trigger.is( LOOK_BOTTOM ) || inBetween( styleSet.top, view.pane.bottom - 5, view.pane.bottom + 15 ) ) {
  					styleSet.top = that.inInlineMode ?
  							view.editable.height + view.editable.padding.top + view.editable.padding.bottom
  						:
  							view.pane.bottom - 1;
  
  					this.look( LOOK_BOTTOM );
  				} else {
  					if ( that.inInlineMode )
  						styleSet.top -= view.editable.top + view.editable.border.top;
  
  					this.look( LOOK_NORMAL );
  				}
  
  				if ( that.inInlineMode ) {
  					// 1px bug here...
  					styleSet.top--;
  
  					// Consider the editable to be an element with overflow:scroll
  					// and non-zero scrollTop/scrollLeft value.
  					// For example: divarea editable. (#9383)
  					styleSet.top += view.editable.scroll.top;
  					styleSet.left += view.editable.scroll.left;
  				}
  
  				// Append `px` prefixes.
  				for ( var style in styleSet )
  					styleSet[ style ] = CKEDITOR.tools.cssLength( styleSet[ style ] );
  
  				this.setStyles( styleSet );
  			},
  
  			// Changes look of the box according to current needs.
  			// Three different styles are available: [ LOOK_TOP, LOOK_BOTTOM, LOOK_NORMAL ].
  			look: function( look ) {
  				if ( this.oldLook == look )
  					return;
  
  				for ( var i = this.lineChildren.length, child; i--; )
  					( child = this.lineChildren[ i ] ).setAttribute( 'style', child.base + child.looks[ 0 | look / 2 ] );
  
  				this.oldLook = look;
  			},
  
  			wrap: new newElement( 'span', that.doc )
  
  		} );
  
  		// Insert children into the box.
  		for ( var i = line.lineChildren.length; i--; )
  			line.lineChildren[ i ].appendTo( line );
  
  		// Set default look of the box.
  		line.look( LOOK_NORMAL );
  
  		// Using that wrapper prevents IE (8,9) from resizing editable area at the moment
  		// of box insertion. This works thanks to the fact, that positioned box is wrapped by
  		// an inline element. So much tricky.
  		line.appendTo( line.wrap );
  
  		// Make the box unselectable.
  		line.unselectable();
  
  		// Handle accessSpace node insertion.
  		line.lineChildren[ 0 ].on( 'mouseup', function( event ) {
  			line.detach();
  
  			accessFocusSpace( that, function( accessNode ) {
  				// Use old trigger that was saved by 'place' method. Look: line.place
  				var trigger = that.line.trigger;
  
  				accessNode[ trigger.is( EDGE_TOP ) ? 'insertBefore' : 'insertAfter' ]
  					( trigger.is( EDGE_TOP ) ? trigger.lower : trigger.upper );
  			}, true );
  
  			that.editor.focus();
  
  			if ( !env.ie && that.enterMode != CKEDITOR.ENTER_BR )
  				that.hotNode.scrollIntoView();
  
  			event.data.preventDefault( true );
  		} );
  
  		// Prevents IE9 from displaying the resize box and disables drag'n'drop functionality.
  		line.on( 'mousedown', function( event ) {
  			event.data.preventDefault( true );
  		} );
  
  		that.line = line;
  	}