Index: CKEditor/branches/versions/3.6.x/CHANGES.html
===================================================================
--- CKEditor/branches/versions/3.6.x/CHANGES.html	(revision 6677)
+++ CKEditor/branches/versions/3.6.x/CHANGES.html	(revision 6681)
@@ -42,4 +42,5 @@
 		<li><a href="http://dev.ckeditor.com/ticket/6589">#6589</a> : Automatically use a "onDialogEvent" function in the iframeDialog contents if no callback is used on creation.</li>
 		<li><a href="http://dev.ckeditor.com/ticket/5745">#5745</a> : Allow to pass extra configuration options for iframeDialog.</li>
+		<li><a href="http://dev.ckeditor.com/ticket/7240">#7240</a> : Added the Developer Tools (<code>devtools</code>) plugin that shows information about dialog window UI elements to allow for easier customization.</li>
 	</ul>
 	<p>
Index: CKEditor/branches/versions/3.6.x/_samples/devtools.html
===================================================================
--- CKEditor/branches/versions/3.6.x/_samples/devtools.html	(revision 6681)
+++ CKEditor/branches/versions/3.6.x/_samples/devtools.html	(revision 6681)
@@ -0,0 +1,98 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--
+Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<title>Using DevTools Plugin &mdash; CKEditor Sample</title>
+	<meta content="text/html; charset=utf-8" http-equiv="content-type" />
+	<!-- CKReleaser %REMOVE_LINE%
+	<script type="text/javascript" src="../ckeditor.js"></script>
+	CKReleaser %REMOVE_START% -->
+	<script type="text/javascript" src="../ckeditor_source.js"></script>
+	<!-- CKReleaser %REMOVE_END% -->
+	<script src="sample.js" type="text/javascript"></script>
+	<link href="sample.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+	<h1 class="samples">
+		CKEditor Sample &mdash; Using the Developer Tools Plugin
+	</h1>
+	<div class="description">
+	<p>
+		This sample shows how to configure CKEditor instances to use the
+		<strong>Developer Tools</strong> (<code>devtools</code>) plugin that displays
+		information about dialog window elements, including the name of the dialog window,
+		tab, and UI element. Please note that the tooltip also contains a link to the
+		<a href="http://docs.cksource.com/ckeditor_api/">CKEditor JavaScript API</a>
+		documentation for each of the selected elements.
+	</p>
+	<p>
+		This plugin is aimed at developers who would like to customize their CKEditor
+		instances and create their own plugins. By default it is turned off; it is
+		usually useful to only turn it on in the development phase. Note that it works with
+		all CKEditor dialog windows, including the ones that were created by custom plugins.
+	</p>
+	<p>
+		To add a CKEditor instance using the <strong>devtools</strong> plugin, insert
+		the following JavaScript call into your code:
+	</p>
+	<pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
+	{
+		<strong>extraPlugins : 'devtools'</strong>
+	});</pre>
+	<p>
+		Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
+		the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.
+	</p>
+	</div>
+
+	<!-- This <div> holds alert messages to be display in the sample page. -->
+	<div id="alerts">
+		<noscript>
+			<p>
+				<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
+				support, like yours, you should still see the contents (HTML data) and you should
+				be able to edit it normally, without a rich editor interface.
+			</p>
+		</noscript>
+	</div>
+	<form action="sample_posteddata.php" method="post">
+		<p>
+			<label for="editor1">
+				Editor 1:</label>
+			<textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
+			<script type="text/javascript">
+			//<![CDATA[
+
+				// This call can be placed at any point after the
+				// <textarea>, or inside a <head><script> in a
+				// window.onload event handler.
+
+				// Replace the <textarea id="editor"> with an CKEditor
+				// instance, using default configurations.
+				CKEDITOR.replace( 'editor1' ,
+				{
+					extraPlugins : 'devtools'
+				});
+
+			//]]>
+			</script>
+		</p>
+		<p>
+			<input type="submit" value="Submit" />
+		</p>
+	</form>
+	<div id="footer">
+		<hr />
+		<p>
+			CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
+		</p>
+		<p id="copy">
+			Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
+			Knabben. All rights reserved.
+		</p>
+	</div>
+</body>
+</html>
Index: CKEditor/branches/versions/3.6.x/_samples/index.html
===================================================================
--- CKEditor/branches/versions/3.6.x/_samples/index.html	(revision 6677)
+++ CKEditor/branches/versions/3.6.x/_samples/index.html	(revision 6681)
@@ -83,4 +83,7 @@
 			Using the Placeholder plugin to create uneditable sections that can only be created and modified with a proper dialog window.
 		</li>
+		<li><a class="samples" href="devtools.html">Developer Tools plugin</a><br />
+			Using the Developer Tools plugin to display information about dialog window UI elements to allow for easier customization.
+		</li>
 	</ul>
 	<div id="footer">
Index: CKEditor/branches/versions/3.6.x/_source/plugins/devtools/lang/en.js
===================================================================
--- CKEditor/branches/versions/3.6.x/_source/plugins/devtools/lang/en.js	(revision 6681)
+++ CKEditor/branches/versions/3.6.x/_source/plugins/devtools/lang/en.js	(revision 6681)
@@ -0,0 +1,16 @@
+/*
+Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+*/
+
+CKEDITOR.plugins.setLang( 'devtools', 'en',
+{
+	devTools :
+	{
+		title		: 'Element Information',
+		dialogName	: 'Dialog window name',
+		tabName		: 'Tab name',
+		elementId	: 'Element ID',
+		elementType	: 'Element type'
+	}
+});
Index: CKEditor/branches/versions/3.6.x/_source/plugins/devtools/plugin.js
===================================================================
--- CKEditor/branches/versions/3.6.x/_source/plugins/devtools/plugin.js	(revision 6681)
+++ CKEditor/branches/versions/3.6.x/_source/plugins/devtools/plugin.js	(revision 6681)
@@ -0,0 +1,173 @@
+/*
+Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+*/
+
+CKEDITOR.plugins.add( 'devtools',
+{
+	lang : [ 'en' ],
+
+	init : function( editor )
+	{
+		editor._.showDialogDefinitionTooltips = 1;
+	},
+	onLoad : function()
+	{
+		CKEDITOR.document.appendStyleText( CKEDITOR.config.devtools_styles ||
+							'#cke_tooltip { padding: 5px; border: 2px solid #333; background: #ffffff }' + 
+							'#cke_tooltip h2 { font-size: 1.1em; border-bottom: 1px solid; margin: 0; padding: 1px; }' +
+							'#cke_tooltip ul { padding: 0pt; list-style-type: none; }' );
+	}
+});
+
+(function()
+{
+	function defaultCallback( editor, dialog, element, tabName )
+	{
+		var lang = editor.lang.devTools,
+			link = '<a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.' +
+					( element ? ( element.type == 'text' ? 'textInput' : element.type ) : 'content' ) +
+					'.html" target="_blank">' + ( element ? element.type : 'content' ) + '</a>',
+			str =
+				'<h2>' + lang.title + '</h2>' + 
+				'<ul>' + 
+					'<li><strong>' + lang.dialogName + '</strong> : ' + dialog.getName() + '</li>' +
+					'<li><strong>' + lang.tabName + '</strong> : ' + tabName + '</li>';
+
+		if ( element )
+			str += '<li><strong>' + lang.elementId + '</strong> : ' + element.id + '</li>';
+
+		str += '<li><strong>' + lang.elementType + '</strong> : ' + link + '</li>';
+
+		return str + '</ul>';
+	}
+
+	function showTooltip( callback, el, editor, dialog, obj, tabName )
+	{
+		var pos = el.getDocumentPosition(),
+			styles = { 'z-index' : CKEDITOR.dialog._.currentZIndex + 10, top : ( pos.y + el.getSize( 'height' ) ) + 'px' };
+
+		tooltip.setHtml( callback( editor, dialog, obj, tabName ) );
+		tooltip.show();
+
+		// Translate coordinate for RTL.
+		if ( editor.lang.dir == 'rtl' )
+		{
+			var viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize();
+			styles.right = ( viewPaneSize.width - pos.x - el.getSize( 'width' ) ) + 'px';
+		}
+		else
+			styles.left = pos.x + 'px';
+
+		tooltip.setStyles( styles );
+	}
+
+	var tooltip;
+	CKEDITOR.on( 'reset', function()
+	{
+		tooltip && tooltip.remove();
+		tooltip = null;
+	});
+
+	CKEDITOR.on( 'dialogDefinition', function( evt )
+	{
+		var editor = evt.editor;
+		if ( editor._.showDialogDefinitionTooltips )
+		{
+			if ( !tooltip )
+			{
+				tooltip = CKEDITOR.dom.element.createFromHtml( '<div id="cke_tooltip" tabindex="-1" style="position: absolute"></div>', CKEDITOR.document );
+				tooltip.hide();
+				tooltip.on( 'mouseover', function(){ this.show(); } );
+				tooltip.on( 'mouseout', function(){ this.hide(); } );
+				tooltip.appendTo( CKEDITOR.document.getBody() );
+			}
+
+			var dialog = evt.data.definition.dialog,
+				callback = editor.config.devtools_textCallback || defaultCallback;
+
+			dialog.on( 'load', function()
+			{
+				var tabs = dialog.parts.tabs.getChildren(), tab;
+				for ( var i = 0, len = tabs.count(); i < len; i++ )
+				{
+					tab = tabs.getItem( i );
+					tab.on( 'mouseover', function()
+					{
+						var id = this.$.id;
+						showTooltip( callback, this, editor, dialog, null, id.substring( 4, id.lastIndexOf( '_' ) ) );
+					});
+					tab.on( 'mouseout', function()
+					{
+						tooltip.hide();
+					});
+				}
+
+				dialog.foreach( function( obj )
+				{
+					if ( obj.type in { hbox : 1, vbox : 1 } )
+						return;
+
+					var el = obj.getElement();
+					if ( el )
+					{
+						el.on( 'mouseover', function()
+						{
+							showTooltip( callback, this, editor, dialog, obj, dialog._.currentTabId );
+						});
+						el.on( 'mouseout', function()
+						{
+							tooltip.hide();
+						});
+					}
+				});
+			});
+		}
+	});
+})();
+
+/**
+ * A function that returns the text to be displayed inside the developer tooltip when hovering over a dialog UI element.
+ * There are 4 parameters that are being passed into the function: editor, dialog, element, tab name.
+ * @name editor.config.devtools_textCallback
+ * @since 3.6
+ * @type Function
+ * @default (see example)
+ * @example
+ * // This is actually the default value.
+ * // Show dialog name, tab id and element id.
+ * config.devtools_textCallback = function( editor, dialog, element, tabName )
+ * {
+ * 	var lang = editor.lang.devTools,
+ * 		link = '<a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.' +
+ * 				( element ? ( element.type == 'text' ? 'textInput' : element.type ) : 'content' ) +
+ * 				'.html" target="_blank">' + ( element ? element.type : 'content' ) + '</a>',
+ * 		str =
+ * 			'<h2>' + lang.title + '</h2>' + 
+ * 			'<ul>' + 
+ * 				'<li><strong>' + lang.dialogName + '</strong> : ' + dialog.getName() + '</li>' +
+ * 				'<li><strong>' + lang.tabName + '</strong> : ' + tabName + '</li>';
+ * 
+ * 	if ( element )
+ * 		str += '<li><strong>' + lang.elementId + '</strong> : ' + element.id + '</li>';
+ * 
+ * 	str += '<li><strong>' + lang.elementType + '</strong> : ' + link + '</li>';
+ * 
+ * 	return str + '</ul>';
+ * }
+ */
+
+/**
+ * A setting that holds CSS rules to be injected do page and contain styles to be applied to the tooltip element.
+ * @name CKEDITOR.config.devtools_styles
+ * @since 3.6
+ * @type String
+ * @default (see example)
+ * @example
+ * // This is actually the default value.
+ * CKEDITOR.config.devtools_styles = &quot;
+ *  #cke_tooltip { padding: 5px; border: 2px solid #333; background: #ffffff }
+ *  #cke_tooltip h2 { font-size: 1.1em; border-bottom: 1px solid; margin: 0; padding: 1px; }
+ *  #cke_tooltip ul { padding: 0pt; list-style-type: none; }
+ * &quot;;
+ */
Index: CKEditor/branches/versions/3.6.x/_source/plugins/find/dialogs/find.js
===================================================================
--- CKEditor/branches/versions/3.6.x/_source/plugins/find/dialogs/find.js	(revision 6677)
+++ CKEditor/branches/versions/3.6.x/_source/plugins/find/dialogs/find.js	(revision 6681)
@@ -629,4 +629,5 @@
 								{
 									type : 'button',
+									id : 'btnFind',
 									align : 'left',
 									style : 'width:100%',
@@ -694,4 +695,5 @@
 								{
 									type : 'button',
+									id : 'btnFindReplace',
 									align : 'left',
 									style : 'width:100%',
@@ -727,4 +729,5 @@
 								{
 									type : 'button',
+									id : 'btnReplaceAll',
 									align : 'left',
 									style : 'width:100%',
Index: CKEditor/branches/versions/3.6.x/_source/plugins/forms/dialogs/select.js
===================================================================
--- CKEditor/branches/versions/3.6.x/_source/plugins/forms/dialogs/select.js	(revision 6677)
+++ CKEditor/branches/versions/3.6.x/_source/plugins/forms/dialogs/select.js	(revision 6681)
@@ -409,4 +409,5 @@
 									{
 										type : 'button',
+										id : 'btnAdd',
 										style : '',
 										label : editor.lang.select.btnAdd,
@@ -432,4 +433,5 @@
 									{
 										type : 'button',
+										id : 'btnModify',
 										label : editor.lang.select.btnModify,
 										title : editor.lang.select.btnModify,
@@ -454,4 +456,5 @@
 									{
 										type : 'button',
+										id : 'btnUp',
 										style : 'width:100%;',
 										label : editor.lang.select.btnUp,
@@ -470,4 +473,5 @@
 									{
 										type : 'button',
+										id : 'btnDown',
 										style : 'width:100%;',
 										label : editor.lang.select.btnDown,
@@ -495,4 +499,5 @@
 							{
 								type : 'button',
+								id : 'btnSetValue',
 								label : editor.lang.select.btnSetValue,
 								title : editor.lang.select.btnSetValue,
@@ -508,4 +513,5 @@
 							{
 								type : 'button',
+								id : 'btnDelete',
 								label : editor.lang.select.btnDelete,
 								title : editor.lang.select.btnDelete,
Index: CKEditor/branches/versions/3.6.x/_source/plugins/image/dialogs/image.js
===================================================================
--- CKEditor/branches/versions/3.6.x/_source/plugins/image/dialogs/image.js	(revision 6677)
+++ CKEditor/branches/versions/3.6.x/_source/plugins/image/dialogs/image.js	(revision 6681)
@@ -730,4 +730,5 @@
 												{
 													type : 'html',
+													id : 'htmlButtons',
 													style : 'margin-top:30px;width:40px;height:40px;',
 													onLoad : function()
@@ -1060,4 +1061,5 @@
 										{
 											type : 'html',
+											id : 'htmlPreview',
 											style : 'width:95%;',
 											html : '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.common.preview ) +'<br>'+
Index: CKEditor/branches/versions/3.6.x/_source/plugins/smiley/dialogs/smiley.js
===================================================================
--- CKEditor/branches/versions/3.6.x/_source/plugins/smiley/dialogs/smiley.js	(revision 6677)
+++ CKEditor/branches/versions/3.6.x/_source/plugins/smiley/dialogs/smiley.js	(revision 6681)
@@ -184,4 +184,5 @@
 	{
 		type : 'html',
+		id : 'smileySelector',
 		html : html.join( '' ),
 		onLoad : function( event )
Index: CKEditor/branches/versions/3.6.x/_source/plugins/templates/dialogs/templates.js
===================================================================
--- CKEditor/branches/versions/3.6.x/_source/plugins/templates/dialogs/templates.js	(revision 6677)
+++ CKEditor/branches/versions/3.6.x/_source/plugins/templates/dialogs/templates.js	(revision 6681)
@@ -169,4 +169,5 @@
 								[
 									{
+										id : 'selectTplText',
 										type : 'html',
 										html :
