Import Qt5x2 branch of QtWebkit for Qt 5.2

Importing a new snapshot of webkit.

Change-Id: I2d01ad12cdc8af8cb015387641120a9d7ea5f10c
Reviewed-by: Allan Sandfeld Jensen <allan.jensen@digia.com>

594 files changed, 121637 insertions, 0 deletions

diff --git a/Source/WebInspectorUI/APPLE_IMAGES_LICENSE.rtf b/Source/WebInspectorUI/APPLE_IMAGES_LICENSE.rtf
new file mode 100644
index 000000000..32dddc262
--- /dev/null
+++ b/Source/WebInspectorUI/APPLE_IMAGES_LICENSE.rtf
@@ -0,0 +1,81 @@
+{\rtf1\ansi\ansicpg1252\cocoartf1187\cocoasubrtf340
+{\fonttbl\f0\fnil\fcharset0 HelveticaNeue;}
+{\colortbl;\red255\green255\blue255;\red0\green0\blue255;\red255\green0\blue0;}
+{\info
+{\title Apple Computer, Inc}
+{\author Joyce Chow}
+{\*\company Apple Computer, Inc.}}\margl1267\margr994\margb1080\margt634\vieww30680\viewh19140\viewkind0
+\deftab720
+\pard\pardeftab720\ri0
+
+\f0\b\fs24 \cf0 Apple Inc.\
+Software License Agreement for Web Inspector Images\
+Internal Use License Only \'96 No Redistribution Permitted\
+\
+PLEASE READ THIS SOFTWARE LICENSE AGREEMENT ("LICENSE") CAREFULLY BEFORE USING THE APPLE SOFTWARE INCLUDED IN THIS PACKAGE.  BY USING THIS SOFTWARE, YOU ARE AGREEING TO BE BOUND BY THE TERMS OF THIS LICENSE.  IF YOU DO NOT AGREE TO THE TERMS OF THIS LICENSE, DO NOT USE THIS SOFTWARE.\
+\pard\pardeftab720\ri0
+
+\b0 \cf0 \
+\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardeftab720\ri0
+
+\b \cf0 1. General.
+\b0   The Apple binary runtime software, Apple Web Inspector images, and documentation accompanying this License whether made available by Apple for download, on media, in read only memory or in any other form (collectively the \'93Apple Software\'94) are licensed, not sold, to you by Apple Inc. (\'93Apple\'94) and Apple\'92s licensors for use only under the terms of this License.  Apple and/or its licensors retain ownership of the Apple Software itself and reserve all rights not expressly granted to you. The terms of this License will govern any software updates provided by Apple that replace and/or supplement the original Apple Software, unless such update is accompanied by a separate license in which case the terms of that license will govern.\
+\pard\pardeftab720\ri0
+\cf0 \
+\pard\pardeftab720\ri0
+
+\b \cf0 2. Permitted License Uses and Restrictions; No Redistribution.
+\b0   \
+A.  As used in this License, the term \'93WebKit\'94 means the official WebKit Open Source Project that is hosted by Apple at {\field{\*\fldinst{HYPERLINK "http://www"}}{\fldrslt \cf2 \ul \ulc2 www.webkit.org}}, including any and all open source projects that are part of the official WebKit source tree at {\field{\*\fldinst{HYPERLINK "http://www.webkit.org"}}{\fldrslt \cf2 \ul \ulc2 www.webkit.org}}. This License does not extend to any other forks or branches of WebKit. Subject to the terms and conditions of this License:\
+\
+(i)  you may, in connection with your development of WebKit, use the Apple Software for personal use or internally within your business or organization, and you may make a reasonable number of copies of the Apple Software to the extent necessary to effect such internal use purposes; and \
+\
+(ii)  you may also make one copy of the Apple Software in machine-readable form for backup purposes only.\
+\
+You may not redistribute the Apple Software, in whole or in part. \
+\
+B.  In all cases, you must reproduce the Apple copyright notices that are on the original version of the Apple Software on each copy of the Apple Software that you make. If you provide copies of the Apple Software to others within your business or organization for their internal use in connection with WebKit, you must provide them with a copy of this License. You may not rent, lease, loan, sublicense, sell, transfer or otherwise redistribute the Apple Software, in whole or in part.  Except as and only to the extent expressly permitted in this License or by applicable law, you may not copy, decompile, reverse engineer, disassemble, modify, create derivative works of, incorporate into or compile in combination with your own programs, the Apple Software, in whole or in part.\
+\
+
+\b 3. Termination.
+\b0   This License is effective until terminated.  Your rights under this License will terminate automatically without notice from Apple if you fail to comply with any term(s) of this License. Upon the termination of this License, you shall cease all use of the Apple Software and destroy all copies, full or partial, of the Apple Software.  Sections 3, 4, 5, 6, 8 and 9 of this License shall survive any such termination.\
+\
+
+\b 4.  Disclaimer of Warranties
+\b0 . \
+A.  YOU EXPRESSLY ACKNOWLEDGE AND AGREE THAT, TO THE EXTENT PERMITTED BY APPLICABLE LAW, USE OF THE APPLE SOFTWARE IS AT YOUR SOLE RISK AND THAT THE ENTIRE RISK AS TO SATISFACTORY QUALITY, PERFORMANCE, ACCURACY AND EFFORT IS WITH YOU. \
+\
+B.  TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, THE APPLE SOFTWARE IS PROVIDED "AS IS", WITH ALL FAULTS AND WITHOUT WARRANTY OF ANY KIND, AND APPLE AND APPLE'S LICENSORS (COLLECTIVELY REFERRED TO AS "APPLE" FOR THE PURPOSES OF SECTIONS 4 AND 5) HEREBY DISCLAIM ALL WARRANTIES AND CONDITIONS WITH RESPECT TO THE APPLE SOFTWARE, EITHER EXPRESS, IMPLIED OR STATUTORY, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES AND/OR CONDITIONS OF MERCHANTABILITY, OF SATISFACTORY QUALITY, OF FITNESS FOR A PARTICULAR PURPOSE, OF ACCURACY, OF QUIET ENJOYMENT, AND NON-INFRINGEMENT OF THIRD PARTY RIGHTS.  \
+\
+C.  APPLE DOES NOT WARRANT AGAINST INTERFERENCE WITH YOUR ENJOYMENT OF THE APPLE SOFTWARE, THAT THE FUNCTIONS CONTAINED IN THE APPLE SOFTWARE WILL MEET YOUR REQUIREMENTS, THAT THE OPERATION OF THE APPLE SOFTWARE WILL BE UNINTERRUPTED OR ERROR-FREE, THAT THE APPLE SOFTWARE WILL BE COMPATIBLE OR WORK WITH ANY THIRD PARTY SOFTWARE, APPLICATIONS, OR THIRD PARTY SERVICES, OR THAT DEFECTS IN THE APPLE SOFTWARE WILL BE CORRECTED. INSTALLATION OF THIS SOFTWARE MAY AFFECT THE USABILITY OF THIRD PARTY SOFTWARE, APPLICATIONS OR THIRD PARTY SERVICES. \
+\
+D.  NO ORAL OR WRITTEN INFORMATION OR ADVICE GIVEN BY APPLE OR AN APPLE AUTHORIZED REPRESENTATIVE SHALL CREATE A WARRANTY.  SHOULD THE APPLE SOFTWARE PROVE DEFECTIVE, YOU ASSUME THE ENTIRE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.  SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OF IMPLIED WARRANTIES OR LIMITATIONS ON APPLICABLE STATUTORY RIGHTS OF A CONSUMER, SO THE ABOVE EXCLUSION AND LIMITATIONS MAY NOT APPLY TO YOU.  \
+
+\b \
+\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardeftab720\ri0
+\cf0 5. Limitation of Liability.
+\b0  TO THE EXTENT NOT PROHIBITED BY APPLICABLE LAW, IN NO EVENT SHALL APPLE BE LIABLE FOR PERSONAL INJURY, OR ANY INCIDENTAL, SPECIAL, INDIRECT OR CONSEQUENTIAL DAMAGES WHATSOEVER, INCLUDING, WITHOUT LIMITATION, DAMAGES FOR LOSS OF PROFITS, LOSS OF DATA OR INFORMATION, BUSINESS INTERRUPTION OR ANY OTHER COMMERCIAL DAMAGES OR LOSSES, ARISING OUT OF OR RELATED TO YOUR USE OR INABILITY TO USE THE APPLE SOFTWARE, HOWEVER CAUSED, REGARDLESS OF THE THEORY OF LIABILITY (CONTRACT, TORT OR OTHERWISE) AND EVEN IF APPLE HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. SOME JURISDICTIONS DO NOT ALLOW THE LIMITATION OF LIABILITY FOR PERSONAL INJURY, OR OF INCIDENTAL OR CONSEQUENTIAL DAMAGES, SO THIS LIMITATION MAY NOT APPLY TO YOU. In no event shall Apple's total liability to you for all damages (other than as may be required by applicable law in cases involving personal injury) exceed the amount of fifty dollars ($50.00). The foregoing limitations will apply even if the above stated remedy fails of its essential purpose.\
+\pard\pardeftab720\ri0
+\cf0 \
+\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardeftab720\ri0
+
+\b \cf0 6. Export Control.  
+\b0 You may not use or otherwise export or reexport the Apple Software except as authorized by United States law and the laws of the jurisdiction in which the Apple Software was obtained. In particular, but without limitation, the Apple Software may not be exported or re-exported (a) into any U.S. embargoed countries or (b) to anyone on the U.S. Treasury Department's list of Specially Designated Nationals or the U.S. Department of Commerce Denied Person\'92s List or Entity List.  By using the Apple Software, you represent and warrant that you are not located in any such country or on any such list. You also agree that you will not use the Apple Software for any purposes prohibited by United States law, including, without limitation, the development, design, manufacture or production of missiles, nuclear, chemical or biological weapons.\
+\
+
+\b 7. Government End Users.
+\b0   The Apple Software and related documentation are \'93Commercial Items\'94, as that term is defined at 48 C.F.R. \'a72.101, consisting of \'93Commercial Computer Software\'94 and \'93Commercial Computer Software Documentation\'94, as such terms are used in 48 C.F.R. \'a712.212 or 48 C.F.R. \'a7227.7202, as applicable.  Consistent with 48 C.F.R. \'a712.212 or 48 C.F.R. \'a7227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein.  Unpublished-rights reserved under the copyright laws of the United States.\
+\
+
+\b 8. Controlling Law and Severability
+\b0 . This License will be governed by and construed in accordance with the laws of the State of California, excluding its conflict of law principles. This License shall not be governed by the United Nations Convention on Contracts for the International Sale of Goods, the application of which is expressly excluded. If for any reason a court of competent jurisdiction finds any provision, or portion thereof, to be unenforceable, the remainder of this License shall continue in full force and effect.\
+\
+
+\b 9. Complete Agreement.
+\b0  This License constitutes the entire agreement between you and Apple relating to the use of the Apple Software and supersedes all prior or contemporaneous understandings regarding such subject matter. No amendment to or modification of this License will be binding unless in writing and signed by Apple. The parties hereto confirm that they have requested that this License and all related documents be drafted in English.\cf3 \
+\pard\pardeftab720\ri0
+\cf0 \
+EA1013\
+052413\
+							\
+}
\ No newline at end of file
diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
new file mode 100644
index 000000000..94046b7d1
--- /dev/null
+++ b/Source/WebInspectorUI/ChangeLog
@@ -0,0 +1,707 @@
+2013-07-24  Antoine Quint  <graouts@apple.com>
+
+        Web Inspector: control+clicking on a numeric token should not show the context menu
+        https://bugs.webkit.org/show_bug.cgi?id=119048
+
+        Reviewed by Timothy Hatcher.
+
+        Track "contextmenu" events when we're hovering a token containing a numeric value
+        and call preventDefault() in the event handler to ensure that the context menu does
+        not appear.
+
+        * UserInterface/CodeMirrorDragToAlterNumberController.js:
+        (WebInspector.CodeMirrorDragToAlterNumberController.prototype.handleEvent):
+        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._setTracksMouseClickAndDrag):
+
+2013-07-24  Antoine Quint  <graouts@apple.com>
+
+        Web Inspector: support click-and-drag editing of CSS numeric values
+        https://bugs.webkit.org/show_bug.cgi?id=118896
+
+        Reviewed by Timothy Hatcher.
+
+        Add support for adjustment of numeric values in the various CodeMirror editors
+        by holding the option key and dragging the mouse. By default, dragging one pixel
+        changes the value by 1, but key modifiers allow to customize that behavior by using
+        the control key to change the value to 0.1 and the shift key to change the value to 10.
+
+        * UserInterface/CodeMirrorAdditions.js:
+        Split adjustNumber() into two methods such that we may use its logic from the
+        CodeMirrorDragToAlterNumberController. The new method, CodeMirror.prototype.alterNumberInRange()
+        allow to set begin and end CodeMirror positions such that the existing alterNumber()
+        can use information based on the current cursor position, and CodeMirrorDragToAlterNumberController
+        can use information based on the hovered token.
+
+        * UserInterface/CodeMirrorDragToAlterNumberController.css: Added.
+        (.CodeMirror.drag-to-adjust .CodeMirror-lines):
+        Set the cursor to "col-resize" when a number token is hovered and the option key
+        modifier is pressed.
+
+        * UserInterface/CodeMirrorDragToAlterNumberController.js: Added.
+        (WebInspector.CodeMirrorDragToAlterNumberController):
+        We define the new "dragToAdjustNumbers" CodeMirror option.
+
+        (WebInspector.CodeMirrorDragToAlterNumberController.prototype.set enabled):
+        The "enabled" property controls whether the associated CodeMirror instance
+        may act upon hovering numeric values to adjust them via a drag interaction.
+
+        (WebInspector.CodeMirrorDragToAlterNumberController.prototype.handleEvent):
+        Proxy for various event-specific methods to deal with mouse events. We also bind
+        the value of the "active" property to the "mouseenter" and "mouseleave" events
+        if we're not currently dragging-to-adjust.
+
+        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._setActive):
+        The "active" property is set when the mouse is over the associated CodeMirror
+        editor and when it's on we track all "mousemove" events such that we may
+        identify tokens containing numeric values. We also start tracking changes to the
+        option modifier key press state such that we may change the cursor accordingly.
+        We ensure that the CodeMirror instance is not read-only such that we don't
+        allow adjustment of numeric values in places where they couldn't be committed.
+
+        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._setDragging):
+        The "dragging" property reflects whether a dragging-to-adjust interaction
+        is underway. We call into WebInspector.elementDragStart() and WebInspector.elementDragEnd()
+        to set the cursor to "col-resize" for the whole document while tracking mousemove
+        and mouseup events at the window level such that we can drag-to-adjust even outside
+        of the inspector window.
+
+        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._setTracksMouseClickAndDrag):
+        The "tracksMouseClickAndDrag" property is set to true whenever the controller
+        has detected that a token containing a numeric value is being hovered and the
+        option modifier key is pressed. This property controls the cursor value for the
+        hovered token to reflect that a drag-to-adjust interaction is allowed and tracks
+        "mousedown" events for when a dragging interaction may be initiated.
+
+        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._modifiersDidChange):
+        Sets the "tracksMouseClickAndDrag" property depending on the availability of a hovered
+        token containing a numeric value and the pressed state of the option modified key.
+
+        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._mouseMoved):
+        Handles "mousemove" events when we're not in the "dragging" state such that we
+        check the currently hovered token, if any, to see if it contains a number that
+        we may drag-to-adjust. Subsequently, we may enter the "tracksMouseClickAndDrag"
+        state.
+
+        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._mouseWasPressed):
+        Handles "mousedown" events during a drag-to-adjust interaction. We simply track
+        the current mouse position in the x-axis and enter the "dragging" state.
+
+        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._mouseWasDragged):
+        Handles "mousemove" events when we are in the "dragging" state. We compare the
+        current mouse position in the x-axis with the last recoreded value and determine
+        the amount by which we should adjust the value, taking into account the shift and
+        control modifier keys. We then call into WebInspector.alterNumberInRange() to
+        apply the change amount to the associated CodeMirror editor.
+
+        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._mouseWasReleased):
+        Handles "mouseup" events, simply exiting the "dragging" state and resetting other
+        parameters we would have customized as a result of the drag-to-adjust interaction.
+
+        (WebInspector.CodeMirrorDragToAlterNumberController.prototype._reset):
+        Resetting some parameters we would have customized as a result of the drag-to-adjust
+        interaction.
+
+        * UserInterface/Main.html:
+        Include the new CodeMirrorDragToAlterNumberController.{js|css} files.
+
+        * UserInterface/Main.js:
+        (WebInspector.elementDragStart):
+        (WebInspector.elementDragEnd):
+        Add an extra parameter to elementDragStart() such that the caller may specify the event
+        target for the "mousemove" and "mouseup" events.
+
+2013-07-23  Roland Takacs  <rtakacs@inf.u-szeged.hu>
+
+        WebSocket initialization to use remote inspector
+        https://bugs.webkit.org/show_bug.cgi?id=118678
+
+        Reviewed by Timothy Hatcher.
+
+        Add WebSocket initialization and define a 'connect-src' directive in the
+        Content-Security-Policy HTTP header to enable the connection.
+
+        * UserInterface/InspectorFrontendHostStub.js:
+        (.WebInspector.InspectorFrontendHostStub.prototype.sendMessageToBackend):
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.loaded):
+        (WebInspector._initializeWebSocketIfNeeded.createSocket.WebInspector):
+        (WebInspector._initializeWebSocketIfNeeded.createSocket):
+        (WebInspector._initializeWebSocketIfNeeded):
+
+2013-07-22  Diego Pino Garcia  <dpino@igalia.com>
+
+        Web Inspector: When right-clicking on a DataGrid column, show editing 
+        menu option as "Edit <columnName>" instead of just "Edit"
+        https://bugs.webkit.org/show_bug.cgi?id=118970
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js: Add literal "Edit '%s'"
+        * UserInterface/DataGrid.js: Change "Edit" for "Edit <columnTitle>"
+        (WebInspector.DataGrid.prototype._contextMenuInDataTable):
+
+2013-07-21  Seokju Kwon  <seokju.kwon@gmail.com>
+
+        Web Inspector: Cleanup InspectorFrontendHostStub.js
+        https://bugs.webkit.org/show_bug.cgi?id=118959
+
+        Reviewed by Timothy Hatcher.
+
+        Remove some functions because we dont use on New Inspector.
+
+        * UserInterface/InspectorFrontendHostStub.js:
+        (.WebInspector.InspectorFrontendHostStub):
+        (.WebInspector.InspectorFrontendHostStub.prototype.save):
+
+2013-07-17  Seokju Kwon  <seokju.kwon@gmail.com>
+
+        Web Inspector: Fix a typo in WebInspector.loaded
+        https://bugs.webkit.org/show_bug.cgi?id=118834
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.js:
+        (WebInspector.loaded):
+
+2013-07-16  Seokju Kwon  <seokju.kwon@gmail.com>
+
+        Web Inspector: InspectorFrontendHost is undefined
+        https://bugs.webkit.org/show_bug.cgi?id=118715
+
+        Reviewed by Timothy Hatcher.
+
+        Add InspectorFrontendHostStub.js to New Inspector because of the InspectorFrontendHost initialization.
+
+        * UserInterface/InspectorFrontendHostStub.js: Added.
+        (.WebInspector.InspectorFrontendHostStub):
+        (.WebInspector.InspectorFrontendHostStub.prototype.platform):
+        (.WebInspector.InspectorFrontendHostStub.prototype.port):
+        (.WebInspector.InspectorFrontendHostStub.prototype.bringToFront):
+        (.WebInspector.InspectorFrontendHostStub.prototype.closeWindow):
+        (.WebInspector.InspectorFrontendHostStub.prototype.requestSetDockSide):
+        (.WebInspector.InspectorFrontendHostStub.prototype.setAttachedWindowHeight):
+        (.WebInspector.InspectorFrontendHostStub.prototype.setAttachedWindowWidth):
+        (.WebInspector.InspectorFrontendHostStub.prototype.setToolbarHeight):
+        (.WebInspector.InspectorFrontendHostStub.prototype.moveWindowBy):
+        (.WebInspector.InspectorFrontendHostStub.prototype.loaded):
+        (.WebInspector.InspectorFrontendHostStub.prototype.localizedStringsURL):
+        (.WebInspector.InspectorFrontendHostStub.prototype.inspectedURLChanged):
+        (.WebInspector.InspectorFrontendHostStub.prototype.copyText):
+        (.WebInspector.InspectorFrontendHostStub.prototype.openInNewTab):
+        (.WebInspector.InspectorFrontendHostStub.prototype.canSave):
+        (.WebInspector.InspectorFrontendHostStub.prototype.save):
+        (.WebInspector.InspectorFrontendHostStub.prototype.append):
+        (.WebInspector.InspectorFrontendHostStub.prototype.close.cleanup):
+        (.WebInspector.InspectorFrontendHostStub.prototype.close):
+        (.WebInspector.InspectorFrontendHostStub.prototype.sendMessageToBackend):
+        (.WebInspector.InspectorFrontendHostStub.prototype.loadResourceSynchronously):
+        * UserInterface/Main.html:
+
+2013-07-15  Seokju Kwon  <seokju.kwon@gmail.com>
+
+        Web Inspector: Remove unused columns from select query in ImageUtilities.js
+        https://bugs.webkit.org/show_bug.cgi?id=118694
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ImageUtilities.js: Remove pixelRatio and formatVersion from select query.
+
+2013-07-15  Timothy Hatcher  <timothy@apple.com>
+
+        Update CodeMirror to 3.14.1.
+
+        https://bugs.webkit.org/show_bug.cgi?id=118605
+
+        Reviewed by Joseph Pecoraro.
+
+        * Scripts/update-codemirror-resources.rb: Updated the list to add closebrackets.js and sorted the files.
+        * Tools/PrettyPrinting/CodeMirrorFormatters.js:
+        * Tools/PrettyPrinting/Formatter.js:
+        * Tools/PrettyPrinting/FormatterContentBuilder.js:
+        * Tools/PrettyPrinting/codemirror.css:
+        * Tools/PrettyPrinting/codemirror.js:
+        * Tools/PrettyPrinting/css.js:
+        * Tools/PrettyPrinting/javascript.js:
+        * UserInterface/External/CodeMirror/closebrackets.js:
+        * UserInterface/External/CodeMirror/codemirror.css:
+        * UserInterface/External/CodeMirror/codemirror.js:
+        * UserInterface/External/CodeMirror/coffeescript.js:
+        * UserInterface/External/CodeMirror/comment.js:
+        * UserInterface/External/CodeMirror/css.js:
+        * UserInterface/External/CodeMirror/javascript.js:
+        * UserInterface/External/CodeMirror/matchbrackets.js:
+        * UserInterface/External/CodeMirror/sql.js:
+        * UserInterface/External/CodeMirror/xml.js:
+
+2013-07-15  Timothy Hatcher  <timothy@apple.com>
+
+        Make sure to add main resources for sub-frames to the Network Timeline.
+
+        https://bugs.webkit.org/show_bug.cgi?id=118649
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype._mainResourceDidChange): Remove the
+        call to _clear() and early return for event.target.isMainFrame(). The _clear()
+        is already handled if needed by the call to _startAutoRecording(), so it was
+        redundant here and caused the erroneous addition of isMainFrame() early return.
+
+2013-07-15  Timothy Hatcher  <timothy@apple.com>
+
+        Properly handle style text changes while the color popover is open.
+
+        https://bugs.webkit.org/show_bug.cgi?id=118575
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchClicked.updateCodeMirror):
+        The original text marker might have been cleared by a style update, in this case we need to
+        find the new color text marker so we know the right range for the new style color text.
+
+2013-07-14  Commit Queue  <commit-queue@webkit.org>
+
+        Unreviewed, rolling out r152598.
+        http://trac.webkit.org/changeset/152598
+        https://bugs.webkit.org/show_bug.cgi?id=118658
+
+        totally broke the web inspector (JS ERROR: SyntaxError:
+        Expected token '}') (Requested by thorton on #webkit).
+
+        * Tools/PrettyPrinting/CodeMirrorFormatters.js:
+        * Tools/PrettyPrinting/Formatter.js:
+        * Tools/PrettyPrinting/FormatterContentBuilder.js:
+        * Tools/PrettyPrinting/codemirror.css:
+        (.CodeMirror-scrollbar-filler):
+        (.CodeMirror-gutters):
+        (.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler):
+        (.CodeMirror-widget):
+        * Tools/PrettyPrinting/codemirror.js:
+        (window.CodeMirror):
+        (window.CodeMirror.):
+        (.do):
+        (moveVisually):
+        * Tools/PrettyPrinting/css.js:
+        (.):
+        (CodeMirror):
+        * Tools/PrettyPrinting/javascript.js:
+        (.):
+        * UserInterface/External/CodeMirror/codemirror.css:
+        (.CodeMirror-widget):
+        * UserInterface/External/CodeMirror/codemirror.js:
+        (window.CodeMirror):
+        (window.CodeMirror.):
+        * UserInterface/External/CodeMirror/coffeescript.js:
+        * UserInterface/External/CodeMirror/comment.js:
+        (.):
+        * UserInterface/External/CodeMirror/css.js:
+        (.):
+        (CodeMirror):
+        * UserInterface/External/CodeMirror/javascript.js:
+        (.):
+        * UserInterface/External/CodeMirror/matchbrackets.js:
+        (.):
+        * UserInterface/External/CodeMirror/sql.js:
+        * UserInterface/External/CodeMirror/xml.js:
+
+2013-07-12  Timothy Hatcher  <timothy@apple.com>
+
+        Update CodeMirror to 7f560afa1c (3.14+).
+
+        https://bugs.webkit.org/show_bug.cgi?id=118605
+
+        Reviewed by Sam Weinig.
+
+        * Tools/PrettyPrinting/CodeMirrorFormatters.js:
+        * Tools/PrettyPrinting/Formatter.js:
+        * Tools/PrettyPrinting/FormatterContentBuilder.js:
+        * Tools/PrettyPrinting/codemirror.css:
+        * Tools/PrettyPrinting/codemirror.js:
+        * Tools/PrettyPrinting/css.js:
+        * Tools/PrettyPrinting/javascript.js:
+        * UserInterface/External/CodeMirror/codemirror.css:
+        * UserInterface/External/CodeMirror/codemirror.js:
+        * UserInterface/External/CodeMirror/coffeescript.js:
+        * UserInterface/External/CodeMirror/comment.js:
+        * UserInterface/External/CodeMirror/css.js:
+        * UserInterface/External/CodeMirror/javascript.js:
+        * UserInterface/External/CodeMirror/matchbrackets.js:
+        * UserInterface/External/CodeMirror/sql.js:
+        * UserInterface/External/CodeMirror/xml.js:
+
+2013-07-12  Seokju Kwon  <seokju.kwon@gmail.com>
+
+        Web Inspector: Pass null for sidebarPanels and role in WebInspector.Sidebar()
+        https://bugs.webkit.org/show_bug.cgi?id=118589
+
+        Reviewed by Timothy Hatcher.
+
+        sidebarPanels : It is necessary to get correct argument after r152141.
+        Without this, error messages can be displayed.
+        role : Could pass null for it since default value is "group".
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+
+2013-07-03  Timothy Hatcher  <timothy@apple.com>
+
+        Guard remaining calls to decodeURIComponent with a try/catch.
+
+        https://bugs.webkit.org/show_bug.cgi?id=118371
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Main.js:
+        (WebInspector.displayNameForURL):
+        (WebInspector.updateWindowTitle):
+        * UserInterface/Utilities.js:
+        (arrayResult):
+        (queryString):
+
+2013-07-03  Jessie Berlin  <jberlin@apple.com>
+
+        Ran update-webkit-localizable-strings.
+
+        Rubber-stamped by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+2013-06-28  Dean Jackson  <dino@apple.com>
+
+        Update Apple System fonts in auto-complete
+        https://bugs.webkit.org/show_bug.cgi?id=118205
+        <rdar://problem/14308488>
+
+        Reviewed by Joseph Pecoraro.
+
+        Update for the new Apple System font names, and remove some invalid entries.
+
+        * UserInterface/CSSKeywordCompletions.js: General cleanup. Note that
+        "apple-system-short-caption2" looks like it was accidentally omitted. It wasn't :)
+
+2013-06-28  James Craig  <james@cookiecrook.com>
+
+        Web Inspector: AX: VoiceOver speaks all inspector search fields as 'required'
+        https://bugs.webkit.org/show_bug.cgi?id=118122
+
+        Reviewed by Timothy Hatcher.
+
+        Removed bogus "required" state, and switched :valid selector to use :not(:placeholder-shown)
+        so that screen readers will not indicate a bogus :required/:invalid state to the user.
+        Minor cosmetic difference blocked by http://webkit.org/b/118162
+
+        * UserInterface/FilterBar.css:
+        (.filter-bar > input[type="search"]:focus):
+        (.filter-bar > input[type="search"]:not(:placeholder-shown)):
+        * UserInterface/FilterBar.js:
+        (WebInspector.FilterBar):
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel):
+        * UserInterface/SearchBar.css:
+        (.search-bar > input[type="search"]:focus):
+        (.search-bar > input[type="search"]:not(:placeholder-shown)):
+        * UserInterface/SearchBar.js:
+        (WebInspector.SearchBar):
+
+2013-06-27  James Craig  <james@cookiecrook.com>
+
+        Web Inspector: AX: Add container ARIA roles (toolbar, main, labeled regions, etc.) 
+        so the layout is more discoverable to screen reader users
+        https://bugs.webkit.org/show_bug.cgi?id=118104
+
+        Reviewed by Timothy Hatcher.
+
+        Made the basic layout (toolbar, sidebars, main) of the Web Inspector understandable
+        and navigable with VoiceOver.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/ButtonNavigationItem.js:
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        * UserInterface/DashboardManager.js:
+        * UserInterface/Main.js:
+        * UserInterface/NavigationBar.js:
+        * UserInterface/NavigationItem.js:
+        * UserInterface/NavigationSidebarPanel.js:
+        * UserInterface/RadioButtonNavigationItem.js:
+        * UserInterface/Sidebar.js:
+        * UserInterface/SidebarPanel.js:
+        * UserInterface/Toolbar.js:
+
+2013-06-27  James Craig  <james@cookiecrook.com>
+
+        Web Inspector: AX: Console log of the Inspector does not announce output for screen readers
+        https://bugs.webkit.org/show_bug.cgi?id=115976
+
+        Reviewed by Timothy Hatcher.
+
+        Main console log area (div.console-messages) is now an ARIA live region (role="log")
+        so screen readers speak plain text updates.
+        
+        Also added contextual labels (e.g. input/output) but speech output verification of
+        those is currently blocked by http://webkit.org/b/118096
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/ConsoleCommand.js:
+        (WebInspector.ConsoleCommand.prototype.toMessageElement):
+        * UserInterface/ConsoleCommandResult.js:
+        (WebInspector.ConsoleCommandResult.prototype.toMessageElement):
+        * UserInterface/LogContentView.css:
+        (@media reader):
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView):
+
+
+2013-06-27  Matthew Holden  <jftholden@yahoo.com>
+
+        Web Inspector: Display color picker in popover on color swatch click
+        https://bugs.webkit.org/show_bug.cgi?id=117919
+
+        Reviewed by Timothy Hatcher.
+
+        Includes fixes from second code review.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/CSSColorPicker.css: Added.
+        (.colorpicker-container):
+        (.colorpicker-fill-parent):
+        (.colorpicker-top):
+        (.colorpicker-color):
+        (.colorpicker-bottom span):
+        (.colorpicker-text):
+        (.colorpicker-color-text-value):
+        (.colorpicker-hue):
+        (.colorpicker-fill):
+        (.colorpicker-range-container):
+        (.colorpicker-range-container *):
+        (.colorpicker-range-container label):
+        (.colorpicker-range-container input):
+        (.colorpicker-saturation):
+        (.colorpicker-value):
+        (.colorpicker-dragger):
+        (.colorpicker-slider):
+        (.colorpicker-container .swatch):
+        (.colorpicker-container .swatch-inner):
+        * UserInterface/CSSColorPicker.js: Added.
+        (WebInspector.CSSColorPicker.consume):
+        (WebInspector.CSSColorPicker.move):
+        (WebInspector.CSSColorPicker.start):
+        (WebInspector.CSSColorPicker.stop):
+        (WebInspector.CSSColorPicker.makeDraggable):
+        (WebInspector.CSSColorPicker.hueDrag):
+        (WebInspector.CSSColorPicker.colorDragStart):
+        (WebInspector.CSSColorPicker.colorDrag):
+        (WebInspector.CSSColorPicker.alphaDrag):
+        (WebInspector.CSSColorPicker.colorSwatchClicked):
+        (WebInspector.CSSColorPicker):
+        (WebInspector.CSSColorPicker.prototype.get element):
+        (WebInspector.CSSColorPicker.prototype.set color):
+        (WebInspector.CSSColorPicker.prototype.get color):
+        (WebInspector.CSSColorPicker.prototype.get outputColorFormat):
+        (WebInspector.CSSColorPicker.prototype.get colorHueOnly):
+        (WebInspector.CSSColorPicker.prototype.set displayText):
+        (WebInspector.CSSColorPicker.prototype.shown):
+        (WebInspector.CSSColorPicker.prototype._updateHelperLocations):
+        (WebInspector.CSSColorPicker.prototype._updateDisplay):
+        (WebInspector.CSSColorPicker.hsvaToRGBA):
+        (WebInspector.CSSColorPicker.rgbaToHSVA):
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.didDismissPopover):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.event.newColorText.colorTextMarker):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.event.newColorText):
+        * UserInterface/Main.html:
+
+2013-06-26  Antoine Quint  <graouts@apple.com>
+
+        Web Inspector: stepping through while paused in debugger makes a popover appear
+        https://bugs.webkit.org/show_bug.cgi?id=117994
+
+        There is no obvious need to call tokenTrackingControllerNewHighlightCandidate when the
+        active call frame changes and it leads to an extraneous display of the popover.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._activeCallFrameDidChange):
+
+2013-06-24  Antoine Quint  <graouts@apple.com>
+
+        Web Inspector: WebInspector.displayNameForURL() failure prevents DOM inspection
+        https://bugs.webkit.org/show_bug.cgi?id=117927
+
+        Handle possible mis-encoded URI fragments passed to decodeURIComponent() which
+        could prevent inspection of the DOM.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.js:
+        (WebInspector.displayNameForURL):
+
+2013-06-17  Darin Adler  <darin@apple.com>
+
+        Sort all the Xcode project files
+        https://bugs.webkit.org/show_bug.cgi?id=117696
+
+        Reviewed by Anders Carlsson.
+
+        * WebInspectorUI.xcodeproj/project.pbxproj: Ran the sort-Xcode-project-file script.
+
+2013-06-21  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Web Inspector: Uncaught exception when pretty printing WebInspector.Script
+        https://bugs.webkit.org/show_bug.cgi?id=117893
+
+        This was an issue with an earlier refactoring. The sourceCode is a Script,
+        so replace the non-existent local variable "script" with "this._sourceCode".
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorUpdatedFormatting):
+
+2013-06-21  Timothy Hatcher  <timothy@apple.com>
+
+        Stop removing and re-adding breakpoints from the backend on reload.
+
+        On reload the sourceCode for breakpoints are nulled out, which fires DisplayLocationDidChange.
+        Then the sourceCode is reassociated, firing DisplayLocationDidChange again. In these cases we
+        don't need to update the backend, since nothing really changed.
+
+        https://bugs.webkit.org/show_bug.cgi?id=117877
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager.prototype._breakpointDisplayLocationDidChange): Return early when
+        _ignoreBreakpointDisplayLocationDidChangeEvent is true.
+        (WebInspector.DebuggerManager.prototype.reset): Set _ignoreBreakpointDisplayLocationDidChangeEvent.
+        (WebInspector.DebuggerManager.prototype._associateBreakpointsWithSourceCode): Ditto.
+
+2013-06-19  Antoine Quint  <graouts@apple.com>
+
+        Web Inspector: Copying array or object output does not contain values
+        https://bugs.webkit.org/show_bug.cgi?id=117669
+
+        ConsoleCommandResult was overriding toClipboardString() but wasn't using the complex code
+        in ConsoleMessageImpl's toClipboardString() to provide a nicely formatted output for objects.
+        We now use a "clipboarPrefixString" property to customize the prefix used in the clipboard
+        and, additionally, only use that prefix if we're copying more than a single message since it's
+        the only situation where it's useful to have the ">" or "<" prefix shown. Console messages with
+        a log level always print the level and when saving the console log using Cmd+S, all messages
+        contain their prefix as well.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ConsoleCommand.js:
+        (WebInspector.ConsoleCommand.prototype.toClipboardString):
+        Handle the new isPrefixOptional argument.
+
+        * UserInterface/ConsoleCommandResult.js:
+        (WebInspector.ConsoleCommandResult.prototype.get clipboarPrefixString):
+        Provide a custom "< " prefix and set "enforcesClipboardPrefixString" to false such that
+        the prefix isn't printed out in situations when it may not.
+
+        * UserInterface/ConsoleMessageImpl.js:
+        Set "enforcesClipboardPrefixString" to true since we always want to log the log level
+        prefix in all situations.
+
+        (WebInspector.ConsoleMessageImpl.prototype.get clipboarPrefixString):
+        Implement this new getter to return our clipboard string such that subclasses may
+        customize it.
+
+        (WebInspector.ConsoleMessageImpl.prototype.toClipboardString):
+        Take into account both isPrefixOptional and the "enforcesClipboardPrefixString" property
+        to only log the prefix if necessary.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype._formatMessagesAsData):
+        Make the logging of prefix optional when we have a single message selected and we're
+        not saving via Cmd+S.
+
+2013-06-18  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Web Inspector: Infrequent uncaught exception with debugger popovers breaks inspector
+        https://bugs.webkit.org/show_bug.cgi?id=117755
+
+        Create the ZERO_SIZE and ZERO_RECT objects after we've setup the Size
+        and Rect prototypes, so they get the expected methods. We then need to
+        handle the ZERO_RECT case better, and not attempt to draw a background
+        in a canvas with a 0 size, which would produce an exception.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Geometry.js:
+        * UserInterface/Popover.js:
+        (WebInspector.Popover.prototype._update):
+
+2013-06-18  Timothy Hatcher  <timothy@apple.com>
+
+        If the tree outline is processing a selection currently, then don't change the selection.
+
+        This is needed to allow breakpoints tree elements to be selected without jumping back to
+        selecting the resource tree element.
+
+        https://bugs.webkit.org/show_bug.cgi?id=117746
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Main.js:
+        (WebInspector._revealAndSelectRepresentedObjectInNavigationSidebar):
+        * UserInterface/TreeOutline.js:
+        (TreeElement.prototype.select):
+
+2013-06-18  Timothy Hatcher  <timothy@apple.com>
+
+        Update breakpoints to match Xcode 5.
+
+        This updates the breakpoint images, line colors, and moves breakpoints toggle button
+        to the Debugger sidebar navigation bar.
+
+        https://bugs.webkit.org/show_bug.cgi?id=117723
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/DebuggerSidebarPanel.css: Removed custom toggle button rules.
+        * UserInterface/DebuggerSidebarPanel.js:
+        (WebInspector.DebuggerSidebarPanel):
+        (WebInspector.DebuggerSidebarPanel.prototype._breakpointsToggleButtonClicked):
+        * UserInterface/Images/Breakpoint.png: Updated.
+        * UserInterface/Images/Breakpoints.pdf: Added.
+        * UserInterface/Images/Breakpoint@2x.png: Updated.
+        * UserInterface/Images/BreakpointButton.pdf: Updated.
+        * UserInterface/Images/BreakpointInactive.png: Updated.
+        * UserInterface/Images/BreakpointInactive@2x.png: Updated.
+        * UserInterface/Images/BreakpointInactiveButton.pdf: Updated.
+        * UserInterface/Images/InstructionPointer.png: Updated.
+        * UserInterface/Images/InstructionPointer@2x.png: Updated.
+        * UserInterface/SourceCodeTextEditor.css:
+        (.source-code.text-editor > .CodeMirror .error): Updated background-color and removed box-shadow.
+        (.source-code.text-editor > .CodeMirror .warning): Ditto.
+        * UserInterface/TextEditor.css:
+        (.text-editor > .CodeMirror .has-breakpoint .CodeMirror-linenumber::before): Changed left position to 0.
+        (.text-editor > .CodeMirror .execution-line .CodeMirror-linenumber::after): Updated position.
+        (.text-editor > .CodeMirror .execution-line): Updated background-color and removed box-shadow.
+
+2013-06-13  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <http://webkit.org/b/117615> Web Inspector: JS PrettyPrinting Should have space between "do" and "{"
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CodeMirrorFormatters.js:
+
+2013-06-13  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <http://webkit.org/b/117612> Web Inspector: "Search Resource Content" should cancel when I remove all text search text
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel):
+        (WebInspector.ResourceSidebarPanel.prototype._searchFieldInput):
+
+== Rolled over to ChangeLog-2013-06-11 ==
diff --git a/Source/WebInspectorUI/ChangeLog-2013-06-11 b/Source/WebInspectorUI/ChangeLog-2013-06-11
new file mode 100644
index 000000000..fb82b37dc
--- /dev/null
+++ b/Source/WebInspectorUI/ChangeLog-2013-06-11
@@ -0,0 +1,31620 @@
+2013-06-10  Timothy Hatcher  <timothy@apple.com>
+
+        Remove Xcode 4 skin and only have the Xcode 5 look.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ButtonNavigationItem.css:
+        (.navigation-bar .item.button.suppress-emboss.disabled > .glyph):
+        * UserInterface/CodeMirrorOverrides.css:
+        * UserInterface/DashboardView.css:
+        (.toolbar .dashboard):
+        (body.window-inactive .toolbar .dashboard):
+        (.toolbar.collapsed .dashboard):
+        (.toolbar.collapsed .dashboard > .logs):
+        * UserInterface/DashboardView.js:
+        (WebInspector.DashboardView):
+        (WebInspector.DashboardView.prototype._setItemEnabled):
+        * UserInterface/DetailsSection.css:
+        * UserInterface/DividerNavigationItem.css:
+        (.navigation-bar .item.divider):
+        * UserInterface/FilterBar.css:
+        (.filter-bar > input[type="search"]):
+        (.filter-bar > input[type="search"]::-webkit-input-placeholder):
+        (.filter-bar > input[type="search"]:valid):
+        * UserInterface/FindBanner.css:
+        (.find-banner > input[type="search"]):
+        (.find-banner > button):
+        * UserInterface/HierarchicalPathComponent.css:
+        * UserInterface/InstrumentSidebarPanel.css:
+        * UserInterface/LayerTreeSidebarPanel.css:
+        * UserInterface/Main.css:
+        (#split-content-browser > .navigation-bar):
+        * UserInterface/NavigationBar.css:
+        * UserInterface/NavigationSidebarPanel.css:
+        * UserInterface/RadioButtonNavigationItem.css:
+        (.navigation-bar .item.radio.button.text-only.selected):
+        * UserInterface/ResourceSidebarPanel.css:
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.treeElementForRepresentedObject):
+        * UserInterface/ScopeBar.css:
+        (.scope-bar > li):
+        (.scope-bar > li:active):
+        (.scope-bar > li:hover):
+        (.scope-bar > li.selected):
+        * UserInterface/SearchBar.css:
+        (.search-bar > input[type="search"]):
+        (.search-bar > input[type="search"]::-webkit-input-placeholder):
+        (.search-bar > input[type="search"]:valid):
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .data-grid > .navigation-bar-container > .navigation-bar):
+
+2013-06-08  Timothy Hatcher  <timothy@apple.com>
+
+        Improve switching from the full view console to the Resource sidebar, so the previous resource is shown in the content browser again.
+
+        Also cleans up my earlier changes and removes an assert that can fire often now.
+
+        <rdar://problem/14075352> Jumping to a resource from the Timelines panel should reveal file in Resources sidebar when showing resource
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/Main.js:
+        (WebInspector.showFullHeightConsole):
+        (WebInspector._sidebarCollapsedStateDidChange): Call _updateNavigationSidebarForCurrentContentView for the navigation sidebar.
+        (WebInspector._revealAndSelectRepresentedObjectInNavigationSidebar): Only do this work if the sidebar is not collapsed. We don't
+        want to deselect items if the sidebar is collapsed, preserving the selection is important when showing the sidebar later.
+        (WebInspector._updateNavigationSidebarForCurrentContentView): Added. Split off from _navigationSidebarPanelSelected. Only do this work
+        if the sidebar is not collapsed.
+        (WebInspector._navigationSidebarPanelSelected): Call _updateNavigationSidebarForCurrentContentView.
+        (WebInspector._contentBrowserCurrentContentViewDidChange): Clean up by returning early if there is no current content view.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.treeElementForRepresentedObject): Remove an assert that can happen a lot now.
+
+2013-06-07  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/14094308> Styles should come before Layers details sidebar
+
+        Switch Layers and Styles.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel):
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel):
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+
+2013-06-07  Timothy Hatcher  <timothy@apple.com>
+
+        Keep the selected tree element in sync with the current content view.
+
+        <rdar://problem/14075352> Jumping to a resource from the Timelines panel should reveal file in Resources sidebar when showing resource
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/Main.js:
+        (WebInspector._revealAndSelectRepresentedObjectInNavigationSidebar): Added.
+        (WebInspector._navigationSidebarPanelSelected): Call _revealAndSelectRepresentedObjectInNavigationSidebar.
+        (WebInspector._contentBrowserCurrentContentViewDidChange): Ditto.
+
+2013-06-07  Timothy Hatcher  <timothy@apple.com>
+
+        Keep the navigation sidebar and the current content view in sync with a set of allowed sidebars per content view.
+
+        <rdar://problem/14075352> Jumping to a resource from the Timelines panel should reveal file in Resources sidebar when showing resource
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView.prototype.get allowedNavigationSidebarPanels): Added.
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView.prototype.get allowedNavigationSidebarPanels): Added.
+        * UserInterface/Main.js:
+        (WebInspector.showSplitConsole): Show the navigation sidebar if it was showing.
+        (WebInspector.showFullHeightConsole): Hide the navigation sidebar and remember if it was showing.
+        (WebInspector.toggleConsoleView): Show the sidebar if it was showing.
+        (WebInspector._navigationSidebarPanelSelected): Ensure the navigation sidebar panel is allowed by the current content view.
+        (WebInspector._contentBrowserCurrentContentViewDidChange): Ditto.
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel.prototype.showContentViewForCurrentSelection):
+        (WebInspector.NavigationSidebarPanel.prototype.shown):
+        * UserInterface/ProfileView.js:
+        (WebInspector.ProfileView.prototype.get allowedNavigationSidebarPanels): Added.
+        * UserInterface/ResourceClusterContentView.js:
+        (WebInspector.ResourceClusterContentView.prototype.get allowedNavigationSidebarPanels): Added.
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView.prototype.get allowedNavigationSidebarPanels): Added.
+
+2013-06-06  Timothy Hatcher  <timothy@apple.com>
+
+        Properly filter into resources with a source map if they haven't been expanded yet.
+
+        <rdar://problem/14072548> Resources filter shows "No Filter Results" after reload with SourceMaps
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel.prototype._treeElementAddedOrChanged): Pass false to
+        traverseNextTreeElement to cause the tree elements to be populated. This matches the interactive
+        case when typing into the filter bar, which already worked with source maps.
+
+2013-06-05  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/14077407> Jumping to an error in a JS file form the console highlights to white first before going back to red
+
+        Remove the explicit ÒtoÓ color in the CSS animation we use to highlight a link
+        in the text editor as it is revealed, which means the ÒtoÓ color will be the
+        underlying color set on the element. This will animate to red for errors,
+        yellow for warnings, and transparent for regular lines.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TextEditor.css:
+        (@-webkit-keyframes text-editor-highlight-fadeout):
+
+2013-06-05  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/14077152> Activity viewer does not update error count for grouped errors when inspector is closed.
+
+        Take into account the repeat count of an error when incrementing
+        the message count.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DashboardManager.js:
+        (WebInspector.DashboardManager.prototype._consoleMessageAdded):
+        (WebInspector.DashboardManager.prototype._consoleMessageWasRepeated):
+        (WebInspector.DashboardManager.prototype._incrementConsoleMessageType):
+
+2013-06-05  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/14072409> Pressing Enter/Esc when editing a breakpoint (conditional breakpoint) should dismiss popover
+
+        Handle Esc and Enter on the <input> to dismiss the popover.
+        This behaves like Xcode's breakpoint condition popover.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Breakpoint.js:
+        (WebInspector.Breakpoint.prototype._popoverConditionInputKeyDown):
+        (WebInspector.Breakpoint.prototype._editBreakpointPopoverContentElement):
+        (WebInspector.Breakpoint.prototype._showEditBreakpointPopover):
+
+2013-06-05  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/14054886> Pressing Enter in a blank console should do nothing, not insert a newline
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/ConsolePrompt.js:
+
+2013-06-05  Timothy Hatcher  <timothy@apple.com>
+
+        Add/update copyright and license to all the user interface files in
+        preparation for open sourcing to WebKit.
+
+        Rubber-stamped by Antoine Quint.
+
+        * UserInterface/ActivateButtonNavigationItem.js:
+        * UserInterface/ActivateButtonToolbarItem.js:
+        * UserInterface/ApplicationCacheDetailsSidebarPanel.js:
+        * UserInterface/ApplicationCacheFrame.js:
+        * UserInterface/ApplicationCacheFrameContentView.css:
+        * UserInterface/ApplicationCacheFrameContentView.js:
+        * UserInterface/ApplicationCacheFrameTreeElement.js:
+        * UserInterface/ApplicationCacheIcons.css:
+        * UserInterface/ApplicationCacheManager.js:
+        * UserInterface/ApplicationCacheManifest.js:
+        * UserInterface/ApplicationCacheManifestTreeElement.js:
+        * UserInterface/ApplicationCacheObserver.js:
+        * UserInterface/BinarySearch.js:
+        * UserInterface/BlankStylePropertiesSection.js:
+        * UserInterface/BottomUpProfileDataGridTree.js:
+        * UserInterface/BoxModelDetailsSectionRow.css:
+        * UserInterface/BoxModelDetailsSectionRow.js:
+        * UserInterface/Branch.js:
+        * UserInterface/BranchManager.js:
+        * UserInterface/Breakpoint.css:
+        * UserInterface/Breakpoint.js:
+        * UserInterface/BreakpointIcons.css:
+        * UserInterface/BreakpointTreeElement.css:
+        * UserInterface/BreakpointTreeElement.js:
+        * UserInterface/ButtonNavigationItem.css:
+        * UserInterface/ButtonNavigationItem.js:
+        * UserInterface/ButtonToolbarItem.css:
+        * UserInterface/ButtonToolbarItem.js:
+        * UserInterface/CSSCompletions.js:
+        * UserInterface/CSSKeywordCompletions.js:
+        * UserInterface/CSSMedia.js:
+        * UserInterface/CSSObserver.js:
+        * UserInterface/CSSProperty.js:
+        * UserInterface/CSSRule.js:
+        * UserInterface/CSSSelectorProfileObject.js:
+        * UserInterface/CSSSelectorProfileType.js:
+        * UserInterface/CSSSelectorProfileView.js:
+        * UserInterface/CSSStyleDeclaration.js:
+        * UserInterface/CSSStyleDeclarationSection.css:
+        * UserInterface/CSSStyleDeclarationSection.js:
+        * UserInterface/CSSStyleDeclarationTextEditor.css:
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        * UserInterface/CSSStyleDetailsSidebarPanel.css:
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        * UserInterface/CSSStyleManager.js:
+        * UserInterface/CSSStyleSheet.js:
+        * UserInterface/CallFrame.js:
+        * UserInterface/CallFrameIcons.css:
+        * UserInterface/CallFrameTreeElement.js:
+        * UserInterface/ClusterContentView.css:
+        * UserInterface/ClusterContentView.js:
+        * UserInterface/CodeMirrorAdditions.js:
+        * UserInterface/CodeMirrorCompletionController.css:
+        * UserInterface/CodeMirrorCompletionController.js:
+        * UserInterface/CodeMirrorFormatters.js:
+        * UserInterface/CodeMirrorOverrides.css:
+        * UserInterface/CodeMirrorTokenTrackingController.css:
+        * UserInterface/CodeMirrorTokenTrackingController.js:
+        * UserInterface/Color.js:
+        * UserInterface/CompletionSuggestionsView.css:
+        * UserInterface/CompletionSuggestionsView.js:
+        * UserInterface/ComputedStyleDetailsPanel.js:
+        * UserInterface/ConsoleCommand.js:
+        * UserInterface/ConsoleCommandResult.js:
+        * UserInterface/ConsoleGroup.js:
+        * UserInterface/ConsoleMessage.js:
+        * UserInterface/ConsoleMessageImpl.js:
+        * UserInterface/ConsoleObserver.js:
+        * UserInterface/ConsolePrompt.css:
+        * UserInterface/ConsolePrompt.js:
+        * UserInterface/ContentBrowser.css:
+        * UserInterface/ContentBrowser.js:
+        * UserInterface/ContentView.css:
+        * UserInterface/ContentView.js:
+        * UserInterface/ContentViewContainer.css:
+        * UserInterface/ContentViewContainer.js:
+        * UserInterface/ContextMenu.js:
+        * UserInterface/ControlToolbarItem.css:
+        * UserInterface/ControlToolbarItem.js:
+        * UserInterface/CookieIcon.css:
+        * UserInterface/CookieStorageContentView.css:
+        * UserInterface/CookieStorageContentView.js:
+        * UserInterface/CookieStorageObject.js:
+        * UserInterface/CookieStorageTreeElement.js:
+        * UserInterface/DOMDetailsSidebarPanel.js:
+        * UserInterface/DOMNode.js:
+        * UserInterface/DOMNodeDetailsSidebarPanel.js:
+        * UserInterface/DOMNodeStyles.js:
+        * UserInterface/DOMObserver.js:
+        * UserInterface/DOMSearchMatchObject.js:
+        * UserInterface/DOMStorageContentView.css:
+        * UserInterface/DOMStorageContentView.js:
+        * UserInterface/DOMStorageIcons.css:
+        * UserInterface/DOMStorageObject.js:
+        * UserInterface/DOMStorageObserver.js:
+        * UserInterface/DOMStorageTreeElement.js:
+        * UserInterface/DOMTree.js:
+        * UserInterface/DOMTreeContentView.css:
+        * UserInterface/DOMTreeContentView.js:
+        * UserInterface/DOMTreeElement.js:
+        * UserInterface/DOMTreeElementPathComponent.js:
+        * UserInterface/DOMTreeManager.js:
+        * UserInterface/DOMTreeOutline.css:
+        * UserInterface/DOMTreeOutline.js:
+        * UserInterface/DOMTreeUpdater.js:
+        * UserInterface/DOMUtilities.js:
+        * UserInterface/DashboardManager.js:
+        * UserInterface/DashboardView.css:
+        * UserInterface/DashboardView.js:
+        * UserInterface/DataGrid.css:
+        * UserInterface/DataGrid.js:
+        * UserInterface/DatabaseContentView.css:
+        * UserInterface/DatabaseContentView.js:
+        * UserInterface/DatabaseHostTreeElement.js:
+        * UserInterface/DatabaseIcon.css:
+        * UserInterface/DatabaseObject.js:
+        * UserInterface/DatabaseObserver.js:
+        * UserInterface/DatabaseTableContentView.css:
+        * UserInterface/DatabaseTableContentView.js:
+        * UserInterface/DatabaseTableIcon.css:
+        * UserInterface/DatabaseTableObject.js:
+        * UserInterface/DatabaseTableTreeElement.js:
+        * UserInterface/DatabaseTreeElement.js:
+        * UserInterface/DebuggerManager.js:
+        * UserInterface/DebuggerObserver.js:
+        * UserInterface/DebuggerSidebarPanel.css:
+        * UserInterface/DebuggerSidebarPanel.js:
+        * UserInterface/DetailsSection.css:
+        * UserInterface/DetailsSection.js:
+        * UserInterface/DetailsSectionDataGridRow.js:
+        * UserInterface/DetailsSectionGroup.js:
+        * UserInterface/DetailsSectionPropertiesRow.js:
+        * UserInterface/DetailsSectionRow.js:
+        * UserInterface/DetailsSectionSimpleRow.js:
+        * UserInterface/DetailsSidebarPanel.css:
+        * UserInterface/DetailsSidebarPanel.js:
+        * UserInterface/DividerNavigationItem.css:
+        * UserInterface/DividerNavigationItem.js:
+        * UserInterface/Editing.css:
+        * UserInterface/EditingSupport.js:
+        * UserInterface/EventHandler.js:
+        * UserInterface/EventListenerSection.js:
+        * UserInterface/EventListenerSectionGroup.css:
+        * UserInterface/EventListenerSectionGroup.js:
+        * UserInterface/ExecutionContext.js:
+        * UserInterface/ExecutionContextList.js:
+        * UserInterface/FilterBar.css:
+        * UserInterface/FilterBar.js:
+        * UserInterface/FindBanner.css:
+        * UserInterface/FindBanner.js:
+        * UserInterface/FlexibleSpaceNavigationItem.css:
+        * UserInterface/FlexibleSpaceNavigationItem.js:
+        * UserInterface/FolderIcon.css:
+        * UserInterface/FolderTreeElement.js:
+        * UserInterface/FontResourceContentView.css:
+        * UserInterface/FontResourceContentView.js:
+        * UserInterface/Formatter.js:
+        * UserInterface/FormatterContentBuilder.js:
+        * UserInterface/FormatterSourceMap.js:
+        * UserInterface/Frame.js:
+        * UserInterface/FrameContentView.js:
+        * UserInterface/FrameResourceManager.js:
+        * UserInterface/FrameTreeElement.js:
+        * UserInterface/GeneralTreeElement.js:
+        * UserInterface/GeneralTreeElementPathComponent.js:
+        * UserInterface/GenericResourceContentView.js:
+        * UserInterface/Geometry.js:
+        * UserInterface/HierarchicalPathComponent.css:
+        * UserInterface/HierarchicalPathComponent.js:
+        * UserInterface/HierarchicalPathNavigationItem.js:
+        * UserInterface/ImageResourceContentView.css:
+        * UserInterface/ImageResourceContentView.js:
+        * UserInterface/ImageUtilities.js:
+        * UserInterface/IndeterminateProgressSpinner.css:
+        * UserInterface/IndeterminateProgressSpinner.js:
+        * UserInterface/InspectorBackend.js:
+        * UserInterface/InspectorFrontendAPI.js:
+        * UserInterface/InspectorObserver.js:
+        * UserInterface/InstrumentIcons.css:
+        * UserInterface/InstrumentSidebarPanel.css:
+        * UserInterface/InstrumentSidebarPanel.js:
+        * UserInterface/IssueManager.js:
+        * UserInterface/IssueMessage.js:
+        * UserInterface/JavaScriptLogViewController.js:
+        * UserInterface/JavaScriptProfileObject.js:
+        * UserInterface/JavaScriptProfileType.js:
+        * UserInterface/JavaScriptProfileView.css:
+        * UserInterface/JavaScriptProfileView.js:
+        * UserInterface/KeyboardShortcut.js:
+        * UserInterface/LayerTreeDataGrid.js:
+        * UserInterface/LayerTreeDataGridNode.js:
+        * UserInterface/LayerTreeManager.js:
+        * UserInterface/LayerTreeObserver.js:
+        * UserInterface/LayerTreeSidebarPanel.css:
+        * UserInterface/LayerTreeSidebarPanel.js:
+        * UserInterface/LayoutTimelineDataGrid.js:
+        * UserInterface/LayoutTimelineDataGridNode.js:
+        * UserInterface/LayoutTimelineRecord.js:
+        * UserInterface/LoadInspectorBackendCommands.js:
+        * UserInterface/LoadLocalizedStrings.js:
+        * UserInterface/LogContentView.css:
+        * UserInterface/LogContentView.js:
+        * UserInterface/LogIcon.css:
+        * UserInterface/LogManager.js:
+        * UserInterface/LogObject.js:
+        * UserInterface/LogTreeElement.js:
+        * UserInterface/MIMETypeUtilities.js:
+        * UserInterface/Main.css:
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        * UserInterface/MetricsStyleDetailsPanel.js:
+        * UserInterface/NavigationBar.css:
+        * UserInterface/NavigationBar.js:
+        * UserInterface/NavigationItem.js:
+        * UserInterface/NavigationSidebarPanel.css:
+        * UserInterface/NavigationSidebarPanel.js:
+        * UserInterface/NetworkDataGrid.css:
+        * UserInterface/NetworkDataGrid.js:
+        * UserInterface/NetworkGraphCalculator.js:
+        * UserInterface/NetworkObserver.js:
+        * UserInterface/NetworkTimeline.css:
+        * UserInterface/Object.js:
+        * UserInterface/ObjectPropertiesSection.js:
+        * UserInterface/PageObserver.js:
+        * UserInterface/PathComponentIcons.css:
+        * UserInterface/Popover.css:
+        * UserInterface/Popover.js:
+        * UserInterface/ProfileManager.js:
+        * UserInterface/ProfileObject.js:
+        * UserInterface/ProfileType.js:
+        * UserInterface/ProfileView.css:
+        * UserInterface/ProfileView.js:
+        * UserInterface/ProfilerObserver.js:
+        * UserInterface/PropertiesSection.js:
+        * UserInterface/QuickConsole.css:
+        * UserInterface/QuickConsole.js:
+        * UserInterface/QuickConsoleNavigationBar.js:
+        * UserInterface/RadioButtonNavigationItem.css:
+        * UserInterface/RadioButtonNavigationItem.js:
+        * UserInterface/Resource.js:
+        * UserInterface/ResourceClusterContentView.js:
+        * UserInterface/ResourceCollection.js:
+        * UserInterface/ResourceContentView.js:
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        * UserInterface/ResourceIcons.css:
+        * UserInterface/ResourceSearchMatchObject.js:
+        * UserInterface/ResourceSidebarPanel.css:
+        * UserInterface/ResourceSidebarPanel.js:
+        * UserInterface/ResourceTimelineDataGridNode.js:
+        * UserInterface/ResourceTimelineDataGridNodePathComponent.js:
+        * UserInterface/ResourceTimelineRecord.js:
+        * UserInterface/ResourceTreeElement.css:
+        * UserInterface/ResourceTreeElement.js:
+        * UserInterface/Revision.js:
+        * UserInterface/RulesStyleDetailsPanel.css:
+        * UserInterface/RulesStyleDetailsPanel.js:
+        * UserInterface/RuntimeObserver.js:
+        * UserInterface/ScopeBar.css:
+        * UserInterface/ScopeBar.js:
+        * UserInterface/ScopeBarItem.js:
+        * UserInterface/ScopeChainDetailsSidebarPanel.js:
+        * UserInterface/ScopeChainNode.js:
+        * UserInterface/ScopeVariableTreeElement.js:
+        * UserInterface/Script.js:
+        * UserInterface/ScriptContentView.css:
+        * UserInterface/ScriptContentView.js:
+        * UserInterface/ScriptTimelineDataGrid.js:
+        * UserInterface/ScriptTimelineDataGridNode.js:
+        * UserInterface/ScriptTimelineRecord.js:
+        * UserInterface/ScriptTreeElement.js:
+        * UserInterface/SearchBar.css:
+        * UserInterface/SearchBar.js:
+        * UserInterface/SearchIcons.css:
+        * UserInterface/SearchResultTreeElement.js:
+        * UserInterface/Section.css:
+        * UserInterface/Section.js:
+        * UserInterface/Setting.js:
+        * UserInterface/Sidebar.css:
+        * UserInterface/Sidebar.js:
+        * UserInterface/SidebarPanel.js:
+        * UserInterface/SourceCode.js:
+        * UserInterface/SourceCodeLocation.js:
+        * UserInterface/SourceCodePosition.js:
+        * UserInterface/SourceCodeRevision.js:
+        * UserInterface/SourceCodeTextEditor.css:
+        * UserInterface/SourceCodeTextEditor.js:
+        * UserInterface/SourceCodeTextRange.js:
+        * UserInterface/SourceCodeTreeElement.js:
+        * UserInterface/SourceMap.js:
+        * UserInterface/SourceMapManager.js:
+        * UserInterface/SourceMapResource.js:
+        * UserInterface/SourceMapResourceTreeElement.js:
+        * UserInterface/StorageManager.js:
+        * UserInterface/StorageTreeElement.js:
+        * UserInterface/StyleDetailsPanel.js:
+        * UserInterface/StyleRuleIcons.css:
+        * UserInterface/SyntaxHighlightingDefaultTheme.css:
+        * UserInterface/SyntaxHighlightingSupport.js:
+        * UserInterface/TextContentView.css:
+        * UserInterface/TextContentView.js:
+        * UserInterface/TextEditor.css:
+        * UserInterface/TextEditor.js:
+        * UserInterface/TextRange.js:
+        * UserInterface/TextResourceContentView.css:
+        * UserInterface/TextResourceContentView.js:
+        * UserInterface/TimelineDataGrid.css:
+        * UserInterface/TimelineDataGrid.js:
+        * UserInterface/TimelineDecorations.css:
+        * UserInterface/TimelineDecorations.js:
+        * UserInterface/TimelineEventMarker.js:
+        * UserInterface/TimelineManager.js:
+        * UserInterface/TimelineObserver.js:
+        * UserInterface/TimelineOverview.css:
+        * UserInterface/TimelineOverview.js:
+        * UserInterface/TimelineRecord.js:
+        * UserInterface/TimelinesContentView.css:
+        * UserInterface/TimelinesContentView.js:
+        * UserInterface/TimelinesObject.js:
+        * UserInterface/ToggleButtonNavigationItem.js:
+        * UserInterface/ToggleControlToolbarItem.js:
+        * UserInterface/Toolbar.css:
+        * UserInterface/Toolbar.js:
+        * UserInterface/TreeOutline.js:
+        * UserInterface/Utilities.js:
+        * UserInterface/WebInspector.js:
+
+2013-06-05  Timothy Hatcher  <timothy@apple.com>
+
+        Properly update the boundaries for the NetworkTransferTimeCalculator.
+
+        It is expected that _lowerBound and _upperBound return NaN instead of 0.
+
+        <rdar://problem/14040314> Web Inspector says it takes ~15,000 days to load developer library
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/NetworkDataGrid.js:
+        (WebInspector.NetworkDataGrid.prototype._updateHeaderTimes):
+        * UserInterface/NetworkGraphCalculator.js:
+        (WebInspector.NetworkTransferTimeCalculator.prototype._lowerBound):
+        (WebInspector.NetworkTransferTimeCalculator.prototype._upperBound):
+        * UserInterface/TimelineDecorations.js:
+        (WebInspector.TimelineDecorations.prototype.updateHeaderTimes):
+
+2013-06-05  Timothy Hatcher  <timothy@apple.com>
+
+        Unlocalize the box model labels.
+
+        <rdar://problem/14057745> [WebBrowser]: Euro: 13A476r: Box model should not be localized
+
+        Reviewed by Ada Chan.
+
+        * UserInterface/BoxModelDetailsSectionRow.js:
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics):
+
+2013-06-05  Timothy Hatcher  <timothy@apple.com>
+
+        Syntax highlight inherit, initial and function names in CSS as keywords.
+
+        Part of: <rdar://problem/14053613> "-webkit-transform" autocompletes with colon in -webkit-transition definition
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSCompletions.js:
+        (WebInspector.CSSCompletions.requestCSSNameCompletions.propertyNamesCallback):
+        Strip function parenthesis from names. Process the color list to strip function parenthesis from rgb(), etc.
+
+2013-06-05  Timothy Hatcher  <timothy@apple.com>
+
+        Improve the implicit suffix handling when editing in the middle of a CSS value.
+
+        Part of: <rdar://problem/14053613> "-webkit-transform" autocompletes with colon in -webkit-transition definition
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController.prototype._generateCSSCompletions):
+
+2013-06-05  Timothy Hatcher  <timothy@apple.com>
+
+        Autocomplete property names for transition and transition-property.
+
+        Part of: <rdar://problem/14053613> "-webkit-transform" autocompletes with colon in -webkit-transition definition
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSCompletions.js:
+        (WebInspector.CSSCompletions.prototype.get values):
+        * UserInterface/CSSKeywordCompletions.js:
+        (WebInspector.CSSKeywordCompletions.forProperty):
+
+2013-06-04  Timothy Hatcher  <timothy@apple.com>
+
+        Properly autocomplete CSS values if the property name is on a previous line.
+
+        Part of: <rdar://problem/14053613> "-webkit-transform" autocompletes with colon in -webkit-transition definition
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController.prototype._generateCSSCompletions):
+
+2013-06-03  Timothy Hatcher  <timothy@apple.com>
+
+        Add property names to the value keywords list so they are highlighted for -webkit-transition.
+
+        <rdar://problem/14052662> "-webkit-transform" is not correctly highlighted when editing CSS resource
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSCompletions.js:
+        (WebInspector.CSSCompletions.requestCSSNameCompletions.collectPropertyNameForCodeMirror):
+
+2013-06-03  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/14047312> Add New Rules sometimes doesn't do anything
+
+        Better handle generating selectors for nodes with spaces in class or id attributes.
+
+        Tests: (Cases that were failing before)
+
+          <div class=" x "> => Before: (..x.)  After: (.x)
+          <div id=" x ">    => Before: (# x )  After: (div[id=" x "])
+          <div id='"x"'>    => Before: (#"x")  After: (div[id="\"x\""])
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMNode.js:
+        (WebInspector.DOMNode.prototype.appropriateSelectorFor):
+        * UserInterface/DOMUtilities.js:
+        (WebInspector.displayNameForNode):
+
+2013-06-03  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13932229> Update CSSKeywordCompletions.js for iOS properties
+
+        Add support for the new Ò-appleÓ-prefixed values for the ÒfontÓ property.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CSSKeywordCompletions.js:
+
+2013-06-03  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/14047029> Exception CallFrameTreeElement.js:19: TypeError: 'null' is not an object (evaluating 'callFrame.sourceCodeLocation.displaySourceCode')
+
+        Only include a subtitle for call frame tree elements if there is a
+        source code location, because that is used to determine the subtitle.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CallFrameTreeElement.js:
+        (WebInspector.CallFrameTreeElement):
+
+2013-06-03  Timothy Hatcher  <timothy@apple.com>
+
+        Hide the caret in read-only style declarations.
+
+        <rdar://problem/14047344> Locked rules (UA stylesheets) in Styles sidebar shouldn't display a caret
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.css:
+        (.css-style-text-editor.read-only > .CodeMirror .CodeMirror-cursor): Added.
+
+2013-06-03  Timothy Hatcher  <timothy@apple.com>
+
+        Correctly stop auto recording the Timeline after the load event or a maximum duration (which ever comes first).
+
+        The original fix for <rdar://problem/13180009> was incorrect and caused <rdar://problem/13919974>
+        and also caused infinite auto recording on pages with indefinite timers that rapidly adds records.
+
+        <rdar://problem/14043180> REGRESSION (6.0.5-Curie): Safari Web Content: 100% CPU when using Inspector
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype.eventRecorded.processRecord):
+        Don't call _stopAutoRecordingSoon for the DOMContent event.
+
+        (WebInspector.TimelineManager.prototype._addRecord):
+        Don't call _stopAutoRecordingSoon. Add the call to _resetAutoRecordingDeadTimeTimeout back.
+
+        (WebInspector.TimelineManager.prototype._startAutoRecording):
+        Use MaximumAutoRecordDuration instead of MaximumAutoRecordDurationAfterLastRecord for the timeout.
+
+        (WebInspector.TimelineManager.prototype._stopAutoRecordingSoon):
+        Remove the dead time timeout now that it is back in _addRecord.
+
+2013-06-02  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/14040519> BoxModelDetailsSectionRow.js:120: ERROR: TypeError: 'null' is not an object (evaluating 'style.propertyForName(width).value')
+
+        Make the sidebar resilient against the possibility of an empty computed
+        style object. The ultimate issue is that the DOM Tree does not have a
+        selected node, but this could should be resilient anyways.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/BoxModelDetailsSectionRow.js:
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics):
+
+2013-06-02  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Reveal line sometimes doesn't work with content right at the edge of the screen.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype._isPositionVisible):
+
+2013-05-31  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/14039888> Should not have spellchecking during most HTML editing
+
+        Allow EditingConfig to specify whether or not spellchecking should be enabled.
+        Spellcheck is off by default, because most of the time it is code, and it is
+        only enabled when editing a TextNode in the DOM Tree.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype._startEditingTextNode):
+        * UserInterface/EditingSupport.js:
+        (WebInspector.EditingConfig):
+        (.cleanUpAfterEditing):
+
+2013-05-30  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/14030289> Goto arrow from Timelines to autoformatted script not highlighting line correctly
+
+        Previously the SourceCodeTextEditor was automatically formatting the
+        content after the content was set on the TextEditor and some initial
+        processing; such as revealing a pending position. This change lets
+        the SourceCodeTextEditor signal to the TextEditor that it should
+        automatically format the incoming string before the extra processing
+        takes place. Now the pending position is updated in _prettyPrint,
+        and revealed appropriately.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._contentWillPopulate):
+        (WebInspector.SourceCodeTextEditor.prototype._contentDidPopulate):
+        (WebInspector.SourceCodeTextEditor.prototype._populateWithContent):
+        Move the auto formatting decision from didPopulate to willPopulate.
+        If autoformatting is needed, we signal the TextEditor before setting
+        the string.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.set string.update):
+        (WebInspector.TextEditor.prototype.set string):
+        (WebInspector.TextEditor.prototype.set autoFormat):
+        Keep a boolean for whether or not we should auto format when setting
+        the string. When setting the string, format if needed, after clearing
+        the history and before any pending position reveals.
+
+2013-05-30  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/14030289> Goto arrow from Timelines to autoformatted script not highlighting line correctly
+
+        Rename "revealLine" to "revealPosition". Now, if the first reveal is
+        for a position in pretty printed code, it can be remapped to an
+        appropriate (line, column), instead of whatever (line, 0) mapped to.
+
+        There is one bug fix here, the _prettyPrint in TextEditor was
+        incorrectly doing this._lineNumberToReveal.lineNumber, which should
+        have just been this._lineNumberToReveal. However, this code was not
+        getting reached in its current form. That will be addressed in the
+        next part.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView.prototype.showSourceCode):
+        * UserInterface/ResourceClusterContentView.js:
+        (WebInspector.ResourceClusterContentView.prototype.showResponse):
+        (WebInspector.ResourceClusterContentView.prototype._resourceLoadingDidFinish):
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.showSourceCode):
+        (WebInspector.ResourceSidebarPanel.prototype.showSourceCodeLocation):
+        (WebInspector.ResourceSidebarPanel.prototype.showOriginalUnformattedSourceCodeLocation):
+        (WebInspector.ResourceSidebarPanel.prototype.showOriginalOrFormattedSourceCodeLocation):
+        (WebInspector.ResourceSidebarPanel.prototype.showSourceCodeTextRange):
+        (WebInspector.ResourceSidebarPanel.prototype.showOriginalOrFormattedSourceCodeTextRange):
+        * UserInterface/ScriptContentView.js:
+        (WebInspector.ScriptContentView.prototype.revealPosition):
+        * UserInterface/TextContentView.js:
+        (WebInspector.TextContentView.prototype.revealPosition):
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.set string.update):
+        (WebInspector.TextEditor.prototype.set string):
+        (WebInspector.TextEditor.prototype.revealNextSearchResult):
+        (WebInspector.TextEditor.prototype.line):
+        (WebInspector.TextEditor.prototype.updateLayout):
+        (WebInspector.TextEditor.prototype._textRangeFromCodeMirrorPosition):
+        (WebInspector.TextEditor.prototype._codeMirrorPositionFromTextRange):
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.prototype.revealPosition):
+
+2013-05-30  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/14030289> Goto arrow from Timelines to autoformatted script not highlighting line correctly
+
+        Add WebInspector.SourceCodePosition. Rather than passing lineNumber
+        and columnNumber as separate parameters all over the place, we can
+        pass a position object. Create positions as appropriate from other
+        classes like SourceCodeLocation and TextRange.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/Main.html:
+        * UserInterface/SourceCodeLocation.js:
+        (WebInspector.SourceCodeLocation.prototype.position):
+        (WebInspector.SourceCodeLocation.prototype.formattedPosition):
+        (WebInspector.SourceCodeLocation.prototype.displayPosition):
+        * UserInterface/SourceCodePosition.js: Added.
+        (WebInspector.SourceCodePosition):
+        (WebInspector.SourceCodePosition.prototype.get lineNumber):
+        (WebInspector.SourceCodePosition.prototype.get columnNumber):
+        * UserInterface/TextRange.js:
+        (WebInspector.TextRange.prototype.startPosition):
+        (WebInspector.TextRange.prototype.endPosition):
+
+2013-05-30  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/14030289> Goto arrow from Timelines to autoformatted script not highlighting line correctly
+
+        Remove a reveal that always happens with line number 0.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/Main.js:
+        (WebInspector.toggleConsoleView):
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.showMainFrameSourceCode):
+
+2013-05-30  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Unprefix uses of "-webkit-calc".
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.css:
+        (.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch):
+
+2013-05-30  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/14028576> Inspector finds CSS color names in other strings
+
+        Be a little more picky with our CSS regex, and include some post-processing
+        to act as a negative lookbehind, which is not supported in JavaScript regexes.
+        Do not allow color names that are prefixed or post-fixed with '-' or '.'.
+
+        Tests cases that previously would have produced swatches:
+
+          url(gold.png);
+          url("fools-gold.png");
+          url(fools.gold.png);
+
+        Using a regex is of course an imperfect solution, but it covers the majority
+        of cases and works well. It also allows us to detect colors in comments and
+        provide color swatches for those. This allows us to filter out some more
+        inappropriate cases.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches):
+
+2013-05-30  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/14023649> No -webkit-filter autocompletion
+
+        Add functions to CSS completion suggestions. When the completion
+        suggestion is showing it has both parens, when committed, the cursor is
+        placed inside the two parens so users can keep typing.
+
+        This adds a bunch of common function completions.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CSSKeywordCompletions.js:
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController.prototype._commitCompletionHint):
+
+2013-05-30  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13994485> Hovering element breadcrumbs should highlight element on page
+
+        When hovering DOMTreeElementPathComponents highlight the associated
+        node on the page, like when you hover the DOMTreeElement.
+
+        Reviewed by Dean Jackson.
+
+        * UserInterface/HierarchicalPathComponent.js:
+        (WebInspector.HierarchicalPathComponent):
+        (WebInspector.HierarchicalPathComponent.prototype._selectElementMouseOver):
+        (WebInspector.HierarchicalPathComponent.prototype._selectElementMouseOut):
+        Provide hooks for subclass mouseOver and mouseOut functions.
+
+        * UserInterface/DOMTreeElementPathComponent.js:
+        (WebInspector.DOMTreeElementPathComponent.prototype.get nextSibling):
+        (WebInspector.DOMTreeElementPathComponent.prototype.mouseOver):
+        (WebInspector.DOMTreeElementPathComponent.prototype.mouseOut):
+        Implement the mouseOver and mouseOut to show / hide the DOM highlight.
+
+2013-05-30  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/14020206> Debugger popover not showing for "this"
+
+        Allow popover for the keyword "this".
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/CodeMirrorTokenTrackingController.js:
+        (WebInspector.CodeMirrorTokenTrackingController.prototype._processJavaScriptExpression):
+
+2013-05-28  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/14007495> Web Inspector has "Instruments," but this is already a feature in Xcode
+
+        Rename the "Instruments" Navigation Sidebar to "Timelines". Marketing
+        had concerns about using the same name in multiple places.
+
+        Rubber-stamped by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel):
+
+2013-05-28  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/14006550> Console errors persist when you navigate to other pages
+
+        The console can clear in two ways, handle both events.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DashboardManager.js:
+        (WebInspector.DashboardManager):
+
+2013-05-27  Timothy Hatcher  <timothy@apple.com>
+
+        Fix copy handeling for DataGrid.
+
+        When text selection was disabled in r48866, that broke the copy event
+        handlers for DataGrid. That change prevents focus from making a caret
+        selection inside the DataGrid (it goes outside to the nearest selectable
+        text). This broke bubbling of the copy event to the right elements.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGrid):
+        (WebInspector.DataGrid.prototype.handleBeforeCopyEvent):
+        (WebInspector.DataGrid.prototype.handleCopyEvent):
+        * UserInterface/Main.js:
+        (WebInspector._beforecopy):
+        (WebInspector._copy):
+
+2013-05-27  Timothy Hatcher  <timothy@apple.com>
+
+        Allow data grid value column's in details sections wrap to multiple lines.
+
+        <rdar://problem/12329905> Can't easily view long header values
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/DataGrid.css:
+        (.data-grid tr.selected):
+        (.data-grid:focus tr.selected):
+        * UserInterface/DetailsSection.css:
+        (.details-section > .content .data-grid table.data):
+        (.details-section > .content .data-grid tr:nth-child(even)):
+        (.details-section > .content .data-grid tr:nth-child(odd)):
+        (.details-section > .content .data-grid td.value-column):
+        (.details-section > .content .data-grid td.value-column > div):
+
+2013-05-27  Timothy Hatcher  <timothy@apple.com>
+
+        Only add event markers for the main frame.
+
+        The event markers for frame heavy pages are too noisy and not very
+        useful. We also didn't distinguish frames in the marker tooltips.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype.eventRecorded.processRecord):
+        (WebInspector.TimelineManager.prototype.eventRecorded):
+
+2013-05-26  Timothy Hatcher  <timothy@apple.com>
+
+        Stop using a CSS drop-shadow filter for the Web Inspector popover.
+
+        Use the existing background canvas to draw the drop shadow instead.
+
+        <rdar://problem/13991902> Stop using CSS filters for Popover
+
+        This also fixes:
+        <rdar://problem/13977466> Popover arrow is not perfectly centered with content
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Popover.css:
+        (.popover):
+        (.popover > .container):
+        * UserInterface/Popover.js:
+        (WebInspector.Popover.prototype._update):
+        (WebInspector.Popover.prototype._drawBackground):
+        (WebInspector.Popover.prototype._bestMetricsForEdge):
+
+2013-05-25  Timothy Hatcher  <timothy@apple.com>
+
+        Show the popover after a delay so quickly arrowing down the grid does not flash the popover.
+
+        Also prevent showing the popover if the element is hidden, which was happening sometimes for
+        rows at the bottom which were marked as offscreen still. Put MIN_Y before MAX_X so the popover
+        is more predictably positioned, and this matches NSPopover. Plus always clear the popover
+        TreeOutline after giving the popover time to animate out when hiding.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TimelineDataGrid.js:
+        (WebInspector.TimelineDataGrid.prototype._dataGridSelectedNodeChanged):
+        (WebInspector.TimelineDataGrid.prototype._showPopoverForSelectedNodeSoon.delayedWork):
+        (WebInspector.TimelineDataGrid.prototype._showPopoverForSelectedNodeSoon):
+        (WebInspector.TimelineDataGrid.prototype._hidePopover):
+        (WebInspector.TimelineDataGrid.prototype._updatePopoverForSelectedNode):
+
+2013-05-24  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Show a highlight quad on the screen when selecting a Layout/Paint record.
+
+        If we know the Quad / Rect of a Paint / Layout we can highlight that
+        portion on the inspected page. Unfortunately this information is not
+        very useful after the page scrolls, but it can be useful.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Geometry.js:
+        (WebInspector.Quad.prototype.toProtocol):
+        * UserInterface/LayoutTimelineDataGrid.js:
+        (WebInspector.LayoutTimelineDataGrid):
+        (WebInspector.LayoutTimelineDataGrid.prototype.reset):
+        (WebInspector.LayoutTimelineDataGrid.prototype.callFramePopoverAnchorElement):
+        (WebInspector.LayoutTimelineDataGrid.prototype.hidden):
+        (WebInspector.LayoutTimelineDataGrid.prototype._layoutDataGridSelectedNodeChanged):
+        (WebInspector.LayoutTimelineDataGrid.prototype._hideHighlightIfNeeded):
+        * UserInterface/TimelineDataGrid.js:
+        (WebInspector.TimelineDataGrid.prototype.shown):
+        (WebInspector.TimelineDataGrid.prototype.hidden):
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView.prototype.showTimelineForRecordType):
+        (WebInspector.TimelinesContentView.prototype.shown):
+        (WebInspector.TimelinesContentView.prototype.hidden):
+
+2013-05-24  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12656683> Show whole JS stack for layout & rendering triggers
+
+        Clear the popover's contents when the content view is reset so
+        we don't leak anything held by the CallFrameTreeElements.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/NetworkDataGrid.js:
+        (WebInspector.NetworkDataGrid.prototype.reset):
+        * UserInterface/TimelineDataGrid.js:
+        (WebInspector.TimelineDataGrid.prototype.reset):
+
+2013-05-24  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12656683> Show whole JS stack for layout & rendering triggers
+
+        Stack trace information is already available from the backend. Display
+        it in a popover when the corresponding row in the data grid is selected.
+        Users can then click a call frame to jump to that source code location.
+
+        Because both Layout and Script timelines include call traces, this is
+        made generic an put in TimelineDataGrid. Subclasses tell the superclass
+        which element to anchor the popover next to, but the superclass handles
+        showing the popover.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CallFrameTreeElement.js:
+        (WebInspector.CallFrameTreeElement):
+        Allow a CallFrameTreeElement for native code call frames. Such call
+        frames don't have a source code location, so they have no subtitle.
+
+        * UserInterface/Images/Native.pdf: Added.
+        * UserInterface/CallFrameIcons.css:
+        (.native-icon .icon):
+        This is a duplicate of the DOMNode.pdf gray [N] icon.
+
+        * UserInterface/Main.html:
+        Include new files.
+
+        * UserInterface/NetworkDataGrid.js:
+        (WebInspector.NetworkDataGrid):
+        * UserInterface/ScriptTimelineDataGrid.js: Added.
+        (WebInspector.ScriptTimelineDataGrid):
+        (WebInspector.ScriptTimelineDataGrid.prototype.callFramePopoverAnchorElement):
+        * UserInterface/LayoutTimelineDataGrid.js: Added.
+        (WebInspector.LayoutTimelineDataGrid):
+        (WebInspector.LayoutTimelineDataGrid.prototype.callFramePopoverAnchorElement):
+        Give each TimelineDataGrid subclass its own class. Implement only
+        what is needed. The new subclasses provide the element for the
+        superclass to anchor the call frame popover.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView):
+        Instantiate the specific DataGrid types.
+
+        * UserInterface/TimelineDataGrid.css: Added.
+        * UserInterface/TimelineDataGrid.js:
+        (WebInspector.TimelineDataGrid):
+        (WebInspector.TimelineDataGrid.prototype.callFramePopoverAnchorElement):
+        (WebInspector.TimelineDataGrid.prototype._scopeBarSelectedItemsDidChange):
+        (WebInspector.TimelineDataGrid.prototype._dataGridSelectedNodeChanged):
+        (WebInspector.TimelineDataGrid.prototype._windowResized):
+        (WebInspector.TimelineDataGrid.prototype._hidePopover):
+        (WebInspector.TimelineDataGrid.prototype._updatePopoverForSelectedNode):
+        Show and manager the popover.
+
+        (WebInspector.TimelineDataGrid.prototype._createPopoverContent):
+        (WebInspector.TimelineDataGrid.prototype._popoverCallStackTreeElementSelected):
+        Popover content is a TreeOutline containing CallFrameTreeElements.
+        When a call frame is selected, reveal the source code location.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGridNode.prototype.elementWithColumnIdentifier):
+        Helper for accessing a specific <td> inside a <tr> by column name.
+
+2013-05-24  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Switch from "X" and "Y" to "Area" in the Layout Timeline
+
+        For transformed paint rects an X, Y, Width and Height, didn't make
+        sense, so the backend switched to quads. Instead of showing approximate
+        values, like the bounding box, lets just remove unknowns and switch
+        to showing the Area instead.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/LayoutTimelineDataGridNode.js:
+        (WebInspector.LayoutTimelineDataGridNode.prototype.createCellContent):
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView):
+
+2013-05-24  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Restore Width and Height values for Layouts and Paints in Timeline
+
+        The backend changed a while back from including rect values, to quad
+        values. We should move away from X and Y and instead show Area.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Geometry.js:
+        (WebInspector.Quad):
+        Provide a wrapper object for the protocol Quad representation.
+
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype.eventRecorded.processRecord):
+        (WebInspector.TimelineManager.prototype.eventRecorded):
+        Ingest new and old Layout and Paint timeline record.
+
+        * UserInterface/LayoutTimelineRecord.js:
+        (WebInspector.LayoutTimelineRecord):
+        (WebInspector.LayoutTimelineRecord.prototype.get area):
+        (WebInspector.LayoutTimelineRecord.prototype.get rect):
+        (WebInspector.LayoutTimelineRecord.prototype.get quad):
+        A record may be wrapping a quad.
+
+2013-05-24  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Use SourceCodeLocations when displaying Script locations.
+
+        Using SourceCodeLocations allows the locations to show formatted
+        and display locations and is therefore more accurate. It also shows
+        the tooltip and display strings consistent with the rest of the UI.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ScriptTimelineDataGridNode.js:
+        (WebInspector.ScriptTimelineDataGridNode.prototype.createCellContent):
+        * UserInterface/ScriptTimelineRecord.js:
+        (WebInspector.ScriptTimelineRecord):
+        (WebInspector.ScriptTimelineRecord.prototype.get lineNumber):
+        (WebInspector.ScriptTimelineRecord.prototype.get callFrames):
+        (WebInspector.ScriptTimelineRecord.prototype.get sourceCodeLocation):
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype.eventRecorded.processRecord):
+        (WebInspector.TimelineManager.prototype.eventRecorded):
+
+2013-05-24  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Add Script Timeline records for Installing / Removing Timelines
+
+        We had records for TimerFired but not install / remove. It is sometimes
+        useful to see the stack traces where timers are added and removed.
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/ScriptTimelineRecord.js:
+        (WebInspector.ScriptTimelineRecord.EventType.displayName):
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype.eventRecorded.processRecord):
+        (WebInspector.TimelineManager.prototype.eventRecorded):
+
+2013-05-24  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Remove some unused old style DataGrid events.
+
+        These events are not used anywhere, and we have a new style event.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGridNode.prototype.select):
+        (WebInspector.DataGridNode.prototype.deselect):
+
+2013-05-23  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Turn off spellchecking on some text inputs.
+
+        Reviewed by David Kilzer.
+
+        * UserInterface/Breakpoint.js:
+        (WebInspector.Breakpoint.prototype._editBreakpointPopoverContentElement):
+        * UserInterface/FindBanner.js:
+        (WebInspector.FindBanner):
+
+2013-05-24  Timothy Hatcher  <timothy@apple.com>
+
+        Tag all Web Inspector images with copyright info.
+
+        Added to all images: Copyright © 2013 Apple Inc. All rights reserved.
+
+        Requested by Joyce Chow.
+
+        * UserInterface/Images/ApplicationCache.png:
+        * UserInterface/Images/ApplicationCache@2x.png:
+        * UserInterface/Images/ApplicationCacheManifest.png:
+        * UserInterface/Images/ApplicationCacheManifest@2x.png:
+        * UserInterface/Images/BackArrow.pdf:
+        * UserInterface/Images/BottomUpTree.pdf:
+        * UserInterface/Images/Breakpoint.png:
+        * UserInterface/Images/Breakpoint@2x.png:
+        * UserInterface/Images/BreakpointButton.pdf:
+        * UserInterface/Images/BreakpointInactive.png:
+        * UserInterface/Images/BreakpointInactive@2x.png:
+        * UserInterface/Images/BreakpointInactiveButton.pdf:
+        * UserInterface/Images/ClippingCSS.png:
+        * UserInterface/Images/ClippingCSS@2x.png:
+        * UserInterface/Images/ClippingGeneric.png:
+        * UserInterface/Images/ClippingGeneric@2x.png:
+        * UserInterface/Images/ClippingJS.png:
+        * UserInterface/Images/ClippingJS@2x.png:
+        * UserInterface/Images/Close.pdf:
+        * UserInterface/Images/Colors.png:
+        * UserInterface/Images/Colors@2x.png:
+        * UserInterface/Images/Cookie.png:
+        * UserInterface/Images/Cookie@2x.png:
+        * UserInterface/Images/Crosshair.pdf:
+        * UserInterface/Images/DOMCharacterData.pdf:
+        * UserInterface/Images/DOMComment.pdf:
+        * UserInterface/Images/DOMDocument.pdf:
+        * UserInterface/Images/DOMDocumentType.pdf:
+        * UserInterface/Images/DOMElement.pdf:
+        * UserInterface/Images/DOMNode.pdf:
+        * UserInterface/Images/DOMTextNode.pdf:
+        * UserInterface/Images/DOMTree.pdf:
+        * UserInterface/Images/Database.png:
+        * UserInterface/Images/Database@2x.png:
+        * UserInterface/Images/DatabaseTable.png:
+        * UserInterface/Images/DatabaseTable@2x.png:
+        * UserInterface/Images/DisclosureTriangleSmallClosed.pdf:
+        * UserInterface/Images/DisclosureTriangleSmallOpen.pdf:
+        * UserInterface/Images/DisclosureTriangleTinyClosed.pdf:
+        * UserInterface/Images/DisclosureTriangleTinyOpen.pdf:
+        * UserInterface/Images/DockBottom.pdf:
+        * UserInterface/Images/DockRight.pdf:
+        * UserInterface/Images/DocumentCSS.png:
+        * UserInterface/Images/DocumentCSS@2x.png:
+        * UserInterface/Images/DocumentFont.png:
+        * UserInterface/Images/DocumentFont@2x.png:
+        * UserInterface/Images/DocumentGeneric.png:
+        * UserInterface/Images/DocumentGeneric@2x.png:
+        * UserInterface/Images/DocumentImage.png:
+        * UserInterface/Images/DocumentImage@2x.png:
+        * UserInterface/Images/DocumentJS.png:
+        * UserInterface/Images/DocumentJS@2x.png:
+        * UserInterface/Images/DocumentMarkup.png:
+        * UserInterface/Images/DocumentMarkup@2x.png:
+        * UserInterface/Images/Error.pdf:
+        * UserInterface/Images/ErrorSmall.pdf:
+        * UserInterface/Images/Errors.svg:
+        * UserInterface/Images/ErrorsEnabled.svg:
+        * UserInterface/Images/EventListener.pdf:
+        * UserInterface/Images/Exception.pdf:
+        * UserInterface/Images/FilterFieldGlyph.pdf:
+        * UserInterface/Images/FolderGeneric.png:
+        * UserInterface/Images/FolderGeneric@2x.png:
+        * UserInterface/Images/ForwardArrow.pdf:
+        * UserInterface/Images/Function.pdf:
+        * UserInterface/Images/GoToArrow.pdf:
+        * UserInterface/Images/HierarchicalNavigationItemChevron.pdf:
+        * UserInterface/Images/IndeterminateProgressSpinner1.pdf:
+        * UserInterface/Images/IndeterminateProgressSpinner10.pdf:
+        * UserInterface/Images/IndeterminateProgressSpinner11.pdf:
+        * UserInterface/Images/IndeterminateProgressSpinner12.pdf:
+        * UserInterface/Images/IndeterminateProgressSpinner2.pdf:
+        * UserInterface/Images/IndeterminateProgressSpinner3.pdf:
+        * UserInterface/Images/IndeterminateProgressSpinner4.pdf:
+        * UserInterface/Images/IndeterminateProgressSpinner5.pdf:
+        * UserInterface/Images/IndeterminateProgressSpinner6.pdf:
+        * UserInterface/Images/IndeterminateProgressSpinner7.pdf:
+        * UserInterface/Images/IndeterminateProgressSpinner8.pdf:
+        * UserInterface/Images/IndeterminateProgressSpinner9.pdf:
+        * UserInterface/Images/InstructionPointer.png:
+        * UserInterface/Images/InstructionPointer@2x.png:
+        * UserInterface/Images/Issues.svg:
+        * UserInterface/Images/IssuesEnabled.svg:
+        * UserInterface/Images/LayerBorders.pdf:
+        * UserInterface/Images/LessColumns.pdf:
+        * UserInterface/Images/LocalStorage.png:
+        * UserInterface/Images/LocalStorage@2x.png:
+        * UserInterface/Images/Locked.pdf:
+        * UserInterface/Images/Log.png:
+        * UserInterface/Images/Log@2x.png:
+        * UserInterface/Images/Logs.svg:
+        * UserInterface/Images/Memory.svg:
+        * UserInterface/Images/MoreColumns.pdf:
+        * UserInterface/Images/NavigationItemAngleBrackets.pdf:
+        * UserInterface/Images/NavigationItemBrushAndRuler.pdf:
+        * UserInterface/Images/NavigationItemBug.pdf:
+        * UserInterface/Images/NavigationItemCurleyBraces.pdf:
+        * UserInterface/Images/NavigationItemFile.pdf:
+        * UserInterface/Images/NavigationItemLayers.pdf:
+        * UserInterface/Images/NavigationItemLog.pdf:
+        * UserInterface/Images/NavigationItemMagnifyingGlass.pdf:
+        * UserInterface/Images/NavigationItemStopwatch.pdf:
+        * UserInterface/Images/NavigationItemStorage.pdf:
+        * UserInterface/Images/NavigationItemTrash.pdf:
+        * UserInterface/Images/NavigationItemVariable.pdf:
+        * UserInterface/Images/Network.png:
+        * UserInterface/Images/Network@2x.png:
+        * UserInterface/Images/NetworkBarBlue.png:
+        * UserInterface/Images/NetworkBarBlue@2x.png:
+        * UserInterface/Images/NetworkBarGray.png:
+        * UserInterface/Images/NetworkBarGray@2x.png:
+        * UserInterface/Images/NetworkBarGreen.png:
+        * UserInterface/Images/NetworkBarGreen@2x.png:
+        * UserInterface/Images/NetworkBarLabelCalloutLeft.pdf:
+        * UserInterface/Images/NetworkBarLabelCalloutRight.pdf:
+        * UserInterface/Images/NetworkBarLabelCalloutWhiteLeft.pdf:
+        * UserInterface/Images/NetworkBarLabelCalloutWhiteRight.pdf:
+        * UserInterface/Images/NetworkBarOrange.png:
+        * UserInterface/Images/NetworkBarOrange@2x.png:
+        * UserInterface/Images/NetworkBarPurple.png:
+        * UserInterface/Images/NetworkBarPurple@2x.png:
+        * UserInterface/Images/NetworkBarRed.png:
+        * UserInterface/Images/NetworkBarRed@2x.png:
+        * UserInterface/Images/NetworkBarWhiteFlat.png:
+        * UserInterface/Images/NetworkBarWhiteFlat@2x.png:
+        * UserInterface/Images/NetworkBarYellow.png:
+        * UserInterface/Images/NetworkBarYellow@2x.png:
+        * UserInterface/Images/NetworkHollowBarBlue.png:
+        * UserInterface/Images/NetworkHollowBarBlue@2x.png:
+        * UserInterface/Images/NetworkHollowBarGray.png:
+        * UserInterface/Images/NetworkHollowBarGray@2x.png:
+        * UserInterface/Images/NetworkHollowBarGreen.png:
+        * UserInterface/Images/NetworkHollowBarGreen@2x.png:
+        * UserInterface/Images/NetworkHollowBarOrange.png:
+        * UserInterface/Images/NetworkHollowBarOrange@2x.png:
+        * UserInterface/Images/NetworkHollowBarPurple.png:
+        * UserInterface/Images/NetworkHollowBarPurple@2x.png:
+        * UserInterface/Images/NetworkHollowBarRed.png:
+        * UserInterface/Images/NetworkHollowBarRed@2x.png:
+        * UserInterface/Images/NetworkHollowBarYellow.png:
+        * UserInterface/Images/NetworkHollowBarYellow@2x.png:
+        * UserInterface/Images/Pause.pdf:
+        * UserInterface/Images/Percent.pdf:
+        * UserInterface/Images/Plus.pdf:
+        * UserInterface/Images/Profile.png:
+        * UserInterface/Images/Profile@2x.png:
+        * UserInterface/Images/PseudoElement.pdf:
+        * UserInterface/Images/Recording.png:
+        * UserInterface/Images/Recording@2x.png:
+        * UserInterface/Images/RecordingHovered.png:
+        * UserInterface/Images/RecordingHovered@2x.png:
+        * UserInterface/Images/RecordingStopped.png:
+        * UserInterface/Images/RecordingStopped@2x.png:
+        * UserInterface/Images/Reflection.pdf:
+        * UserInterface/Images/Reload.svg:
+        * UserInterface/Images/ReloadSelected.svg:
+        * UserInterface/Images/Request.pdf:
+        * UserInterface/Images/Resources.svg:
+        * UserInterface/Images/Response.pdf:
+        * UserInterface/Images/ResultLine.pdf:
+        * UserInterface/Images/Resume.pdf:
+        * UserInterface/Images/Script.png:
+        * UserInterface/Images/Script@2x.png:
+        * UserInterface/Images/SessionStorage.png:
+        * UserInterface/Images/SessionStorage@2x.png:
+        * UserInterface/Images/ShadowDOM.pdf:
+        * UserInterface/Images/SortIndicatorDownArrow.pdf:
+        * UserInterface/Images/SortIndicatorUpArrow.pdf:
+        * UserInterface/Images/SourceCode.pdf:
+        * UserInterface/Images/SplitToggleDown.pdf:
+        * UserInterface/Images/SplitToggleUp.pdf:
+        * UserInterface/Images/StepInto.pdf:
+        * UserInterface/Images/StepOut.pdf:
+        * UserInterface/Images/StepOver.pdf:
+        * UserInterface/Images/Stopwatch.png:
+        * UserInterface/Images/Stopwatch@2x.png:
+        * UserInterface/Images/StyleRuleAuthor.pdf:
+        * UserInterface/Images/StyleRuleInherited.pdf:
+        * UserInterface/Images/StyleRuleInheritedElement.pdf:
+        * UserInterface/Images/StyleRuleInspector.pdf:
+        * UserInterface/Images/StyleRuleUser.pdf:
+        * UserInterface/Images/StyleRuleUserAgent.pdf:
+        * UserInterface/Images/Time.svg:
+        * UserInterface/Images/TimelineBarBlue.png:
+        * UserInterface/Images/TimelineBarBlue@2x.png:
+        * UserInterface/Images/TimelineBarOrange.png:
+        * UserInterface/Images/TimelineBarOrange@2x.png:
+        * UserInterface/Images/TimelineBarPurple.png:
+        * UserInterface/Images/TimelineBarPurple@2x.png:
+        * UserInterface/Images/Undock.pdf:
+        * UserInterface/Images/UpDownArrows.svg:
+        * UserInterface/Images/UserInputPrompt.pdf:
+        * UserInterface/Images/UserInputPromptPrevious.pdf:
+        * UserInterface/Images/UserInputPromptPreviousSelected.pdf:
+        * UserInterface/Images/UserInputResult.pdf:
+        * UserInterface/Images/UserInputResultSelected.pdf:
+        * UserInterface/Images/Warning.pdf:
+        * UserInterface/Images/WarningSmall.pdf:
+        * UserInterface/Images/Weight.svg:
+
+2013-05-24  Timothy Hatcher  <timothy@apple.com>
+
+        Workaround an error with minifying the Web Inspector.
+
+        jsmin.py does not like: return //.test();
+
+        <rdar://problem/13983475> REGRESSION(r51583): Cannot show web inspector in recent spades
+
+        * UserInterface/External/CodeMirror/codemirror.js:
+        (window.CodeMirror):
+
+2013-05-23  Timothy Hatcher  <timothy@apple.com>
+
+        Update CodeMirror from 3.12 to 3.13.
+
+        Include the new comment.js addon and hook it up to Command-/.
+
+        Reviewed by Joseph Pecoraro.
+
+        * Scripts/update-codemirror-resources.rb: Added comment.js.
+        * UserInterface/CodeMirrorAdditions.js:
+        * UserInterface/External/CodeMirror/clojure.js:
+        * UserInterface/External/CodeMirror/codemirror.css:
+        * UserInterface/External/CodeMirror/codemirror.js:
+        * UserInterface/External/CodeMirror/coffeescript.js:
+        * UserInterface/External/CodeMirror/comment.js: Added.
+        * UserInterface/External/CodeMirror/css.js:
+        * UserInterface/External/CodeMirror/javascript.js:
+        * UserInterface/External/CodeMirror/less.js:
+        * UserInterface/External/CodeMirror/placeholder.js:
+        * UserInterface/External/CodeMirror/runmode.js:
+        * UserInterface/External/CodeMirror/sass.js:
+        * UserInterface/External/CodeMirror/searchcursor.js:
+        * UserInterface/External/CodeMirror/sql.js:
+        * UserInterface/External/CodeMirror/xml.js:
+        * UserInterface/Main.html: Include comment.js.
+
+2013-05-23  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13972577> ER: when deleting break points on a file, don't move up if you can't delete
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DebuggerSidebarPanel.js:
+        (WebInspector.DebuggerSidebarPanel.prototype._breakpointTreeOutlineDeleteTreeElement):
+
+2013-05-23  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/7545262> Command-E should put selected text in the search box
+
+        Don't implicitly preventDefault with the keyboard shortcut. This allows the
+        default behavior of populating the system find pasteboard.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/FindBanner.js:
+        (WebInspector.FindBanner):
+
+2013-05-23  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/7545262> Command-E should put selected text in the search box
+
+        Pass the "changeFocus" parameter through the internal cursor relative reveal functions.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.revealPreviousSearchResult):
+        (WebInspector.TextEditor.prototype.revealNextSearchResult):
+        (WebInspector.TextEditor.prototype._revealFirstSearchResultBeforeCursor):
+        (WebInspector.TextEditor.prototype._revealFirstSearchResultAfterCursor):
+
+2013-05-23  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/7545262> Command-E should put selected text in the search box
+
+        Instead of continuing the binary search when we encounter an invalid entry,
+        just break out immediately. This way we can revalidate all of the search results
+        and accurately search forward or back.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CodeMirrorAdditions.js:
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype._binarySearchInsertionIndexInSearchResults):
+        (WebInspector.TextEditor.prototype._revealFirstSearchResultBeforeCursor):
+        (WebInspector.TextEditor.prototype._revealFirstSearchResultAfterCursor):
+        (WebInspector.TextEditor.prototype._cursorDoesNotMatchLastRevealedSearchResult):
+        (WebInspector.TextEditor.prototype._revalidateSearchResults):
+
+2013-05-23  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/7545262> Command-E should put selected text in the search box
+
+        Clear the automaticallyRevealFirstSearchResult state after revealing a search term.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TextEditor.js:
+
+2013-05-23  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/7545262> Command-E should put selected text in the search box
+
+        When searching forwards and backwards search relative to the current cursor position.
+        If we were already on a particular result we can keep the old path and just move
+        forward / back in the result list. Otherwise we binary search the closest position
+        to the cursor. Because results can be removed in the search path we have a
+        bit of added complexity.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.set automaticallyRevealFirstSearchResult):
+        (WebInspector.TextEditor.prototype.addSearchResults.markRanges):
+        When automatically revealing, do so relative to the cursor.
+
+        (WebInspector.TextEditor.prototype.revealPreviousSearchResult):
+        (WebInspector.TextEditor.prototype.revealNextSearchResult):
+        (WebInspector.TextEditor.prototype._cursorDoesNotMatchLastRevealedSearchResult):
+        If we don't have a search result index, or if the cursor moved off
+        of the last search result index, search relative to the cursor.
+
+        (WebInspector.TextEditor.prototype._comparePositions):
+        (WebInspector.TextEditor.prototype._binarySearchInsertionIndexInSearchResults):
+        (WebInspector.TextEditor.prototype._revealFirstSearchResultBeforeCursor):
+        (WebInspector.TextEditor.prototype._revealFirstSearchResultAfterCursor):
+        Binary search search results handling the possibility that a search result
+        could be null. I'm not sure if this works perfectly in such cases, but
+        it worked fine in practice.
+        
+        (WebInspector.TextEditor.prototype._revalidateSearchResults):
+        When we try to traverse to a search result and it was deleted, revalidate
+        all the search results. This can happen if in a CSS file and the user
+        deleted some instances of a search result.
+
+2013-05-23  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/7545262> Command-E should put selected text in the search box
+
+        Step 1, make Command+E populate the FindBanner's search query, and silently
+        perform the search so that Command+G and Shift+Command+G work. Expose a
+        new ContentView method "searchQueryWithSelection" to get a search query
+        from the selection in that ContentView. This currently only works with
+        TextEditor ContentViews.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/FindBanner.js:
+        (WebInspector.FindBanner): Add the keyboard shortcut.
+        (WebInspector.FindBanner.prototype._populateSearchQueryFromSelection):
+        Ask the delegate (ContentBrowser) for a search query from selection.
+        If we get one, silently perform a search.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.searchQueryWithSelection):
+        Get the selection from CodeMirror and return that.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView.prototype.searchQueryWithSelection):
+        Default implementation returns null, meaning no change.
+
+        * UserInterface/ClusterContentView.js:
+        (WebInspector.ClusterContentView.prototype.searchQueryWithSelection):
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser.prototype.findBannerSearchQueryForSelection):
+        * UserInterface/ScriptContentView.js:
+        (WebInspector.ScriptContentView.prototype.searchQueryWithSelection):
+        * UserInterface/TextContentView.js:
+        (WebInspector.TextContentView.prototype.searchQueryWithSelection):
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.prototype.searchQueryWithSelection):
+        Plumbing the message down the content views heirarchy.
+
+2013-05-23  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Remove unnecessary return for setter.
+
+        This was just a copy / paste error from when it was originally written.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ClusterContentView.js:
+        (WebInspector.ClusterContentView.prototype.set automaticallyRevealFirstSearchResult):
+
+2013-05-23  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Remove unused instance variable TextEditor._pendingSearchResultLineNumbers
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor):
+
+2013-05-22  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13961791> Stopping recording clears the timeline
+
+        It actually seems like a non-main frame resource change causes the
+        timeline to clear. Only clear on main frame main resource changes.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype._mainResourceDidChange):
+
+2013-05-22  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12837326> REGRESSION: Content just displays a spinner when it stops on a breakpoint during load
+
+        When a BreakpointTreeElement is selected and the page is reloaded the
+        breakpoint tree elements are removed. When removing the tree element
+        the parent, ResourceTreeElement, was selected and the tree outline
+        created a content view to show for that resource. This content view
+        was being orphaned and replaced when new resources were loaded.
+
+        We never want to create a content view for a Script/ResourceTreeElement
+        in the DebuggerSidebarPanel when it has no children. That is a sign
+        that the tree element is about to be deleted.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DebuggerSidebarPanel.js:
+        (WebInspector.DebuggerSidebarPanel.prototype._treeElementSelected):
+
+2013-05-22  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12837326> REGRESSION: Content just displays a spinner when it stops on a breakpoint during load
+
+        Prevent the populate with script content path from requesting content
+        multiple times. This is just an optimization to prevent duplicated work.
+        This can happen the first time the debugger is paused, by setting the
+        active call frame, opening the resource, and then triggering the active
+        call frame did change notification.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._activeCallFrameDidChange):
+        (WebInspector.SourceCodeTextEditor.prototype._populateWithInlineScriptContent.scriptContentAvailable):
+        (WebInspector.SourceCodeTextEditor.prototype._populateWithInlineScriptContent):
+        (WebInspector.SourceCodeTextEditor.prototype._populateWithScriptContent):
+
+2013-05-22  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12837326> REGRESSION: Content just displays a spinner when it stops on a breakpoint during load
+
+        On iOS 6, when associating a Script with a Resource also update the type
+        to be Script, that way the resource will get a TextResourceContentView
+        instead of a GeneralResourceContentView and fall into the existing path
+        that will fetch Script Source for an editor when it is on a breakpoint
+        and cannot load the resource content.
+
+        Also, replace instances of "scriptsForResource" with the new scripts
+        accessor on WebInspector.Resource.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager.prototype.breakpointsForSourceCode):
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.associateWithScript):
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorUpdatedFormatting):
+
+2013-05-22  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12837326> REGRESSION: Content just displays a spinner when it stops on a breakpoint during load
+
+        Never loading content while on a breakpoint is possible in scripts if
+        the backend is paused executing the script before it has sent the
+        frontend information that the resource has finished loading. In these
+        cases, it is still possible for the frontend to get the "script source"
+        instead of the "resource content". These patches do that.
+
+        Start by creating an association between WebInspector.Resource and
+        WebInspector.Script. The order of events is always such that the Resource
+        is created first:
+
+          - Network.requestWillBeSent => create WebInspector.Resource
+          - Debugger.scriptParsed => create WebInspector.Script
+
+        So associate a Script with a Resource, if there is one, when the Script
+        is created. Currently we can only create the association with URLs,
+        which is not perfect if resources have the same URL but different
+        contents. That has never worked perfectly.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Script.js:
+        (WebInspector.Script):
+        (WebInspector.Script.prototype.get resource):
+        (WebInspector.Script.prototype.requestContentFromBackend):
+        (WebInspector.Script.prototype._resolveResource):
+        On creation associate with a Resource via URL.
+
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.get scripts):
+        (WebInspector.Resource.prototype.associateWithScript):
+        Allow a Script to associate with this resource.
+
+        * UserInterface/FrameResourceManager.js:
+        Remove "resourceForScript". Script's now have a resource property.
+
+        * UserInterface/DebuggerSidebarPanel.js:
+        (WebInspector.DebuggerSidebarPanel.prototype._scriptAdded):
+        * UserInterface/Main.js:
+        (WebInspector.linkifyLocation):
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.showSourceCode):
+        (WebInspector.ResourceSidebarPanel.prototype._scriptWasAdded):
+        * UserInterface/ScriptContentView.js:
+        (WebInspector.ScriptContentView):
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointToggled):
+        * UserInterface/SourceMapManager.js:
+        (WebInspector.SourceMapManager.prototype._loadAndParseSucceeded):
+        Refactor to the simpler script.resource.
+
+2013-05-21  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Remove generic event listeners when ClusterContentViews are closed.
+
+        Some event listeners were removed, but not all. This would have
+        caused the cluster content views to be leaked.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ClusterContentView.js:
+        (WebInspector.ClusterContentView.prototype.closed):
+
+2013-05-21  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Remove the concept of left and right navigation items.
+
+        They are unused. So just remove them.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser):
+        (WebInspector.ContentBrowser.prototype._updateContentViewNavigationItems):
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar):
+
+2013-05-22  Timothy Hatcher  <timothy@apple.com>
+
+        Fix auto complete property caching.
+
+        <rdar://problem/13961832> Autocomplete of function return value causes side-effects multiple times
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/JavaScriptLogViewController.js:
+
+2013-05-21  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13948862> REGRESSION (r150395): Sticky headers are mis-positioned
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DetailsSection.css:
+        (.details-section > .header):
+        (.details-section .details-section > .header):
+        Position and layer the headers correctly such that they snap to
+        the right position when scrolling.
+
+        * UserInterface/Main.js:
+        (WebInspector.updateDockedState):
+        (WebInspector._toolbarDisplayModeDidChange):
+        (WebInspector._toolbarSizeModeDidChange):
+        Remove unnecessary code now that sticky-positioned elements behave
+        as expected in Òoverflow: scrollÓ elements.
+
+2013-05-21  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13941438> Debugger popovers should prefer placement to the bottom/right over left to not cover expression
+
+        Reviewed by Timothy Hatcher.
+
+        Let Popover.present() be provided with a list of preferred edges in order
+        of preference and let the source code popovers prefer layout above, below and on
+        the right, in this order.
+
+        * UserInterface/Breakpoint.js:
+        (WebInspector.Breakpoint.prototype._showEditBreakpointPopover):
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel.prototype._updatePopoverForSelectedNode):
+        Adopt new Popover.present() parameter type.
+
+        * UserInterface/Popover.js:
+        (WebInspector.Popover):
+        (WebInspector.Popover.prototype.present):
+        Rename ÒpreferredEdgeÓ to ÒpreferredEdgesÓ (plural).
+
+        (WebInspector.Popover.prototype._update):
+        Instead of gathering metrics sorted by keys, gather them sorted in the
+        order of preference provided by the ÒpreferredEdgesÓ argument.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._showPopover):
+        Adopt new Popover.present() parameter type and provide the desired list
+        of preferred edges in order.
+
+2013-05-20  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13945892> Console messages not working with iOS 6
+
+        Reviewed by Timothy Hatcher.
+
+        Don't use the enums right now. They were not generated for the iOS 6
+        InspectorBackend commands file. In the future we should generate it
+        for Legacy systems as well as trunk, and use constants instead of
+        magic values in code.
+
+        * UserInterface/ConsoleObserver.js:
+        (WebInspector.ConsoleObserver.prototype.messageAdded):
+
+2013-05-19  Timothy Hatcher  <timothy@apple.com>
+
+        Prevent selection and deselect all messages when clicking disclosure triangles in the console.
+
+        This mostly worked before, but if a selection did happen it wouldn't go away by itself. Now
+        it will go away if a disclosure triangle is clicked. Also the initial focus mouse down always
+        selected the row, now it does not.
+
+        <rdar://problem/13839762> REGRESSION: When inspecting an object in the console, the entire object becomes highlighted
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ConsoleGroup.js:
+        (WebInspector.ConsoleGroup.prototype.addMessage):
+        (WebInspector.ConsoleGroup.prototype._titleMouseDown): Added.
+        (WebInspector.ConsoleGroup.prototype._titleClicked):
+        Don't select a group row when the title is clicked.
+
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline.prototype._onmousedown):
+        Prevent default instead of stopping propagation.
+
+        * UserInterface/LogContentView.css:
+        (.outline-disclosure li.parent::before):
+        Drive by disclosure triangle position tweak.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype._mousedown):
+        Check for defaultPrevented and deselect all messages.
+
+        * UserInterface/TreeOutline.js:
+        (TreeElement.treeElementMouseDown):
+        Prevent default instead of stopping propagation.
+
+2013-05-19  Timothy Hatcher  <timothy@apple.com>
+
+        Fix the issue where console logs would overlap on reload.
+
+        Rejigger the console elements so the flex element can grow to fit and the parent does the scrolling.
+
+        <rdar://problem/13932826> REGRESSION (r147261): Reloading page causes overlapping console logs (116404)
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController):
+        (WebInspector.JavaScriptLogViewController.prototype.isScrolledToBottom):
+        (WebInspector.JavaScriptLogViewController.prototype.scrollToBottom.delayedWork):
+        (WebInspector.JavaScriptLogViewController.prototype.scrollToBottom):
+        * UserInterface/LogContentView.css:
+        (.content-view.log):
+        (.console-messages):
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView):
+        (WebInspector.LogContentView.prototype.updateLayout):
+        (WebInspector.LogContentView.prototype.get scrollableElements):
+        (WebInspector.LogContentView.prototype._ensureMessageIsVisible):
+        (WebInspector.LogContentView.prototype._positionForMessage):
+
+2013-05-18  Timothy Hatcher  <timothy@apple.com>
+
+        Make prefixed keywords syntax highlight correctly.
+
+        CodeMirror parses the vendor prefix separate from the property or keyword name,
+        so we need to strip vendor prefixes from our all our names, not just properties.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSCompletions.js:
+        (WebInspector.CSSCompletions.requestCSSNameCompletions.nameForCodeMirror):
+        (WebInspector.CSSCompletions.requestCSSNameCompletions.collectPropertyNameForCodeMirror):
+
+2013-05-18  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13774412> Update CSSKeywordCompletions.js for Curie + iOS
+
+        This is a pretty mechanical update to CSS autocompletion suggestions.
+        Also fix suggestions not working for "-webkit-" properties.
+
+        Most of this list was manually generated by looking at specifications
+        and walking CSSParser::parseValue, isValidKeywordPropertyAndValue,
+        CSSProperty::isInheritedProperty, the related .in files, and a bit
+        of sleuthing. It is not meant to be perfect, webkit differs from
+        specs slightly and doesn't implement all properties, but it does
+        a better job than before.
+
+        Rubber-stamped by Timothy Hatcher.
+
+        * UserInterface/CSSKeywordCompletions.js:
+        (WebInspector.CSSKeywordCompletions.forProperty):
+
+2013-05-17  Timothy Hatcher  <timothy@apple.com>
+
+        Drop -webkit- prefixes from CSS properties that no longer require them.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationSection.css:
+        * UserInterface/CodeMirrorOverrides.css:
+        * UserInterface/DOMTreeOutline.css:
+        * UserInterface/Editing.css:
+        * UserInterface/LogContentView.css:
+        * UserInterface/Main.css:
+        * UserInterface/NavigationSidebarPanel.css:
+        * UserInterface/Section.css:
+        * UserInterface/TimelinesContentView.css:
+
+2013-05-17  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13919974> 11A368: Instruments tab of RWI is almost empty when loading apple.com on device
+
+        Fix a typo in the constant name. It was using a non-existent constant
+        which resulted in a 0ms timeout instead of the intended 15s.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype._startAutoRecording):
+
+2013-05-16  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13917982> Inconsistency between right-clicking and control-clicking in Debugger gutter
+
+        Ignore "Ctrl + Left Click" in more places:
+
+          * in drag / resize scenarios
+          * text editor gutter on a breakpoint
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGrid.prototype._startResizerDragging):
+        (WebInspector.DataGrid.prototype._resizerDragging):
+        (WebInspector.DataGrid.prototype._endResizerDragging):
+        * UserInterface/Main.js:
+        (WebInspector._dockedResizerMouseDown.dockedResizerDrag):
+        (WebInspector._dockedResizerMouseDown.dockedResizerDragEnd):
+        (WebInspector._dockedResizerMouseDown):
+        (WebInspector._moveWindowMouseDown.toolbarDrag):
+        (WebInspector._moveWindowMouseDown.toolbarDragEnd):
+        (WebInspector._moveWindowMouseDown):
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar.prototype._resizerMouseDown):
+        (WebInspector.Sidebar.prototype._resizerMouseUp):
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype._gutterMouseDown):
+
+2013-05-17  Timothy Hatcher  <timothy@apple.com>
+
+        Make clicking completions work again in the Style details sidebar.
+
+        <rdar://problem/13919341> REGRESSION: Mouse clicking a CSS autocompletion suggestion no longer works
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._editorBlured):
+        Clicking a suggestion causes the editor to blur. We don't want to reset content in this case.
+
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController.prototype.isHandlingClickEvent): Added.
+        (WebInspector.CodeMirrorCompletionController.prototype._generateJavaScriptCompletions): Use this.isHandlingClickEvent().
+
+2013-05-16  Timothy Hatcher  <timothy@apple.com>
+
+        Reset the branches when the main frame navigates.
+
+        This makes sure the SourceCodeRevisions don't stick around between page loads and take up memory.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/BranchManager.js:
+        (WebInspector.BranchManager):
+        (WebInspector.BranchManager.prototype.initialize):
+        (WebInspector.BranchManager.prototype.deleteBranch):
+        (WebInspector.BranchManager.prototype._mainResourceDidChange):
+
+2013-05-16  Timothy Hatcher  <timothy@apple.com>
+
+        Some random style tweaks.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationSection.css:
+        (.style-declaration-section > .header): Smaller top margin to align with the icon better.
+        * UserInterface/CodeMirrorOverrides.css:
+        (.CodeMirror .CodeMirror-gutters): Lighter border color to match Xcode 5.
+
+2013-05-16  Timothy Hatcher  <timothy@apple.com>
+
+        Fix a case where we would enter an infinite loop, consuming memory and hang.
+
+        <rdar://problem/13911608> REGRESSION (r50998): Massive memory growth and hanging (115811)
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.updateForRedirectResponse):
+        (WebInspector.Resource.prototype.updateForResponse):
+        (WebInspector.Resource.prototype.increaseSize):
+        (WebInspector.Resource.prototype.markAsFinished):
+        (WebInspector.Resource.prototype.markAsFailed):
+        Timestamps are expected to be NaN instead of null. This wasn't an issue before because
+        the timeline code didn't use these timestamps. Now Resource.firstTimestamp uses them,
+        which is used by ResourceTimelineRecord.startTime.
+
+2013-05-15  Timothy Hatcher  <timothy@apple.com>
+
+        Allow Command-K to clear the console anywhere in the Inspector.
+
+        <rdar://problem/13888241> Command-K doesn't clear the Console unless it has focus
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController):
+
+2013-05-15  Timothy Hatcher  <timothy@apple.com>
+
+        Fix the Save As... keyboard shortcut.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser):
+        Don't require the Option key. It is Command-Shift-S.
+
+2013-05-15  Timothy Hatcher  <timothy@apple.com>
+
+        Make clicking the console icons in the dashboard toggle the scope.
+
+        <rdar://problem/13884713> Improve console filtering via the dashboard buttons
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/Main.js:
+        (WebInspector.showFullHeightConsole):
+        If the requested scope is already selected and the console is showing, then switch back to All.
+
+2013-05-15  Timothy Hatcher  <timothy@apple.com>
+
+        Make the tab key commit the completion of there is only one suggestion.
+
+        <rdar://problem/13897001> REGRESSION (Safari 6): Tab to accept autocomplete with 1 result
+        should dismiss completion suggestions popover
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController.prototype._handleTabKey):
+        Commit the current completion if there is only one suggestion.
+
+2013-05-14  Timothy Hatcher  <timothy@apple.com>
+
+        Always evaluate the console prompt if the cursor is not at the last position.
+
+        <rdar://problem/13854691> New Return key behavior in Web Inspector breaks my typical usage
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ConsolePrompt.js:
+        (WebInspector.ConsolePrompt.prototype._handleEnterKey):
+        * UserInterface/JavaScriptLogViewController.js:
+
+2013-05-14  Timothy Hatcher  <timothy@apple.com>
+
+        Update Frame.securityOrigin when committing the provisional load.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Frame.js:
+        (WebInspector.Frame.prototype.commitProvisionalLoad):
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.frameDidNavigate):
+
+2013-05-14  Timothy Hatcher  <timothy@apple.com>
+
+        Add DOMStorage when the main resource changes.
+
+        <rdar://problem/13844066> REGRESSION: If the Web Inspector is displayed when you refresh the page, local and session storage is not visible
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/StorageManager.js:
+        (WebInspector.StorageManager.prototype._mainResourceDidChange):
+        (WebInspector.StorageManager.prototype._addDOMStorageIfNeeded):
+        (WebInspector.StorageManager.prototype._securityOriginDidChange):
+
+2013-05-13  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13876379> Pretty printing while paused in the debugger loses the execution line
+
+        When pretty printing we replace the entire contents of the editor. If
+        the display location didn't change at all, then when we re-set the
+        execution line number, we wouldn't update the style on the line.
+
+        This change makes updating the execution line more of the TextEditor's
+        responsibility on a pretty print. Previously it was working in most cases
+        but now it should always work as long as the TextEditor has been given
+        an accurate execution line and column number. In pretty print we delete
+        the execution line handle so we are guaranteed to recreate it.
+
+        Just in case, also update SourceCodeLocation to listen to any location
+        changes, not just display location changes.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.close):
+        (WebInspector.SourceCodeTextEditor.prototype._activeCallFrameDidChange):
+        (WebInspector.SourceCodeTextEditor.prototype._activeCallFrameSourceCodeLocationChanged):
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor):
+        (WebInspector.TextEditor.prototype.get executionColumnNumber):
+        (WebInspector.TextEditor.prototype.set executionColumnNumber):
+
+2013-05-13  Timothy Hatcher  <timothy@apple.com>
+
+        Fix the shortcut for the Layer details sidebar panel.
+
+        Also fix the naming of the toolbar buttons for the Style details sidebar and
+        Layer details sidebar so they are plural while the name in the tooltip is still singular.
+
+        <rdar://problem/13871872> Layers details sidebar shortcut should be control-shift-4, not control-shift-5
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/ApplicationCacheDetailsSidebarPanel.js:
+        (WebInspector.ApplicationCacheDetailsSidebarPanel):
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel):
+        * UserInterface/DOMDetailsSidebarPanel.js:
+        (WebInspector.DOMDetailsSidebarPanel):
+        * UserInterface/DOMNodeDetailsSidebarPanel.js:
+        (WebInspector.DOMNodeDetailsSidebarPanel):
+        * UserInterface/DetailsSidebarPanel.js:
+        (WebInspector.DetailsSidebarPanel):
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel):
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel):
+        * UserInterface/ScopeChainDetailsSidebarPanel.js:
+        (WebInspector.ScopeChainDetailsSidebarPanel):
+
+2013-05-13  Timothy Hatcher  <timothy@apple.com>
+
+        Tweak the console completions to work as expected in more cases.
+
+        Also prevent empty prefix completions unless it is the start of property access.
+        This was a regression from the fix for <rdar://problem/13860627>.
+
+        <rdar://problem/13871885> Command-line API functions don't autocomplete when passed as parameter
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController.prototype._completeAtCurrentPosition):
+        * UserInterface/ConsolePrompt.js:
+        (WebInspector.ConsolePrompt.prototype.completionControllerCompletionsNeeded):
+        * UserInterface/JavaScriptLogViewController.js:
+
+2013-05-12  Timothy Hatcher  <timothy@apple.com>
+
+        Update the toolbar height so the save sheet is positioned correctly and window gradient is accurate.
+
+        <rdar://problem/13871067> Save sheet on the Web Inspector does not come out from under the toolbar
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        (WebInspector.updateDockedState):
+        (WebInspector._updateToolbarHeight):
+        (WebInspector._toolbarDisplayModeDidChange):
+        (WebInspector._toolbarSizeModeDidChange):
+
+2013-05-13  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Improve String.prototype.startsWith to not search the entire string.
+
+        Using the optional second parameter of lastIndexOf we can only search
+        for a substring from index 0, and not check the rest of the string.
+
+        I also went through and replaced all uses of str.indexOf(...) === 0 with
+        str.startsWith(...), or if a single character str.charAt(0) === "?".
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CSSCompletions.js:
+        (WebInspector.CSSCompletions.prototype.startsWith):
+        (WebInspector.CSSCompletions.prototype._firstIndexOfPrefix):
+        * UserInterface/CallFrameTreeElement.js:
+        (WebInspector.CallFrameTreeElement):
+        * UserInterface/CookieStorageContentView.js:
+        (WebInspector.cookieMatchesResourceURL):
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype._buildAttributeDOM):
+        * UserInterface/EditingSupport.js:
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel.prototype._titleForProfile):
+        * UserInterface/JavaScriptProfileView.js:
+        * UserInterface/Main.js:
+        (WebInspector.linkifyStringAsFragmentWithCustomLinkifier):
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.Type.fromMIMEType):
+        * UserInterface/Utilities.js:
+
+2013-05-13  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Make mailto: href links behave correctly.
+
+        Test: data:text/html,<a href="mailto:pecoraro@apple.com?subject=email">Email Joe</a>
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Utilities.js:
+
+2013-05-13  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13572739> REGRESSION: Styles sidebar url(...) should have a way to jump to the resource
+
+        TextEditor / SourceCodeTextEditor (most resources) already had behavior where
+        clicking a "link" would attempt to open it in the Inspector, and fallback to
+        opening a new browser tab for the URL. This hardens that behavior in the
+        "jump to symbol" case, and makes it work in the CSS Sidebar with Command+Click.
+
+        To encourage editing in the style sidebar, style url(...)s as strings,
+        which is how they displayed before these patches.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype._openClickedLinks):
+        Cleanup the code a bit.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.tokenTrackingControllerHighlightedRangeWasClicked):
+        Don't jump to symbol when clicking a link. Fallback to TextEditor's link opening behavior.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype):
+        Handle jump to symbol when clicking a link to behave link TextEditor's link opening behavior.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.css:
+        (.css-style-text-editor > .CodeMirror .cm-link):
+        In the Style sidebar editors display links as strings by default.
+
+2013-05-13  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13572739> REGRESSION: Styles sidebar url(...) should have a way to jump to the resource
+
+        Add extendedCSSToken, modeled after extendedXMLToken to parse url(...)
+        links and give them a "link" style class.
+
+        Normally CodeMirror parses "url", "(", <optionally quoted string>, ")".
+        We hook into this case and manually parse the optionally quoted string
+        ourselves so that we can handle quotes and whitespace exactly how we
+        want to.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CodeMirrorAdditions.js:
+
+2013-05-15  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13865123> REGRESSION: Incorrect link tokenization of unquoted src/href links - <img src=...>
+
+        Handle unquoted attributes when we take over tokenization of link attribute values.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CodeMirrorAdditions.js:
+
+2013-05-11  Timothy Hatcher  <timothy@apple.com>
+
+        Make the tab behavior consistent among all CodeMirror editors.
+
+        Making this a setting is tracked by <rdar://problem/10593948>.
+
+        Reviewed by Darin Adler.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor):
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor):
+
+2013-05-11  Timothy Hatcher  <timothy@apple.com>
+
+        Allow editing any local file since edits can be saved and reloaded right from the Inspector.
+
+        Reviewed by Dean Jackson.
+
+        * UserInterface/ScriptContentView.js:
+        (WebInspector.ScriptContentView.prototype._contentWillPopulate):
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.prototype._contentWillPopulate):
+
+2013-05-11  Timothy Hatcher  <timothy@apple.com>
+
+        Support saving text resources and the console log to a local file.
+
+        <rdar://problem/5827275> PARITY (Chrome Developer Tools): Add an option to save a resource locally
+
+        Reviewed by Dean Jackson.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/ClusterContentView.js:
+        (WebInspector.ClusterContentView.prototype.get supportsSave):
+        (WebInspector.ClusterContentView.prototype.get saveData):
+        * UserInterface/ConsoleMessageImpl.js:
+        (WebInspector.ConsoleMessageImpl.prototype.toClipboardString): Always include the level. It was omitted
+        when we didn't have text range selection to make it easier to copy and paste. But we also include the
+        file and line info, so it was already has more info than just the message.
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser):
+        (WebInspector.ContentBrowser.prototype._saveDataToFile):
+        (WebInspector.ContentBrowser.prototype._save):
+        (WebInspector.ContentBrowser.prototype._saveAs):
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype.get supportsSave):
+        (WebInspector.LogContentView.prototype.get saveData):
+        (WebInspector.LogContentView.prototype.handleCopyEvent):
+        (WebInspector.LogContentView.prototype._formatMessagesAsData.var):
+        (WebInspector.LogContentView.prototype._formatMessagesAsData):
+        * UserInterface/ScriptContentView.js:
+        (WebInspector.ScriptContentView.prototype.get supportsSave):
+        (WebInspector.ScriptContentView.prototype.get saveData):
+        * UserInterface/TextContentView.js:
+        (WebInspector.TextContentView.prototype.get supportsSave):
+        (WebInspector.TextContentView.prototype.get saveData):
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.prototype.get supportsSave):
+        (WebInspector.TextResourceContentView.prototype.get saveData):
+
+2013-05-11  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an exception I saw while navigating between pages.
+
+        I only reproduced this once, but the fix is a simple null check.
+        I'm assuming close was called a second time.
+
+        Reviewed by Anders Carlsson.
+
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline.prototype.close):
+
+2013-05-10  Timothy Hatcher  <timothy@apple.com>
+
+        Tweak layer borders icon.
+
+        <rdar://problem/13717886> Two layers buttons with different meanings
+
+        * UserInterface/Images/LayerBorders.pdf:
+
+2013-05-10  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13769698> Should be a way to jump between SourceMap resource and Original resource
+
+        Add a "jump to symbol" mode when the command key is down for the CSS
+        style sidebar to jump to the display CSS Resource.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.set style):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._updateJumpToSymbolTrackingMode):
+        Listen for GlobalModifierKeysDidChange events when the style for the
+        editor has an owner rule and that owner rule has a source code location.
+
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.tokenTrackingControllerHighlightedRangeWasClicked):
+        Jump to the display resource when clicking the highlighted range.
+
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.tokenTrackingControllerNewHighlightCandidate):
+        Immediately highlight hovered ranges for jump to symbol mode.
+
+2013-05-10  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13769698> Should be a way to jump between SourceMap resource and Original resource
+
+        Add a "jump to symbol" mode when the command key is down, to quickly
+        jump between a SourceMapResource and the original resources for the
+        hovered token. This mode takes precedence over debugger popovers if
+        enabled (because the command key is pressed).
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor):
+        (WebInspector.SourceCodeTextEditor.prototype.hidden):
+        (WebInspector.SourceCodeTextEditor.prototype.close):
+        (WebInspector.SourceCodeTextEditor.prototype._contentDidPopulate):
+        (WebInspector.SourceCodeTextEditor.prototype._shouldTrackTokenHovering):
+        Listen for GlobalModifierKeysDidChange events when this file has a source map
+        (either it is a SourceMapResource or it is a SourceCode with sourceMap resources).
+
+        (WebInspector.SourceCodeTextEditor.prototype._startTrackingTokenHoveringIfNeeded):
+        (WebInspector.SourceCodeTextEditor.prototype._stopTrackingTokenHoveringIfNeeded):
+        (WebInspector.SourceCodeTextEditor.prototype._debuggerDidPause):
+        (WebInspector.SourceCodeTextEditor.prototype._debuggerDidResume):
+        (WebInspector.SourceCodeTextEditor.prototype._sourceCodeSourceMapAdded):
+        In SourceCodeTextEditors there are 2 possible reasons we may have hover tracking,
+        when on a breakpoint for JavaScript or in Jump To Symbol tracking mode.
+
+        (WebInspector.SourceCodeTextEditor.prototype._updateJumpToSymbolTrackingMode):
+        (WebInspector.SourceCodeTextEditor.prototype._enableJumpToSymbolTrackingModeSettings):
+        (WebInspector.SourceCodeTextEditor.prototype._disableJumpToSymbolTrackingModeSettings):
+        Switch between and different tracking modes with different settings.
+
+        (WebInspector.SourceCodeTextEditor.prototype._sourceCodeLocationForEditorPosition):
+        (WebInspector.SourceCodeTextEditor.prototype.tokenTrackingControllerHighlightedRangeWasClicked):
+        When in jump to symbol mode, determine the sourceCodeLocation relating to the
+        token that was clicked and jump between resources.
+        
+        (WebInspector.SourceCodeTextEditor.prototype.tokenTrackingControllerNewHighlightCandidate):
+        When in jump to symbol mode, that takes precedence. Highlight just the hovered token.
+
+2013-05-10  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13769698> Should be a way to jump between SourceMap resource and Original resource
+
+        Move token tracking out of TextEditor into its own class with settings,
+        CodeMirrorTokenTrackingController. You can now set the token mode on
+        the controller to get different types of candidate hovered token results
+        back to the delegate (TextEditor subclass).
+
+        The CodeMirrorTokenTrackingController can start/stop tracking, highlight
+        a given text range, set delays for mousing over and out of tokens before
+        actions are taken, and provide different candidates depending the chosen
+        mode. The current modes are:
+        
+            NonSymbolTokens - returns a candidate for just the hovered token.
+            JavaScriptExpression - returns a candidate for the hovered token with
+            extra information about the JavaScript expression ending at that token.
+
+        When tracking is enabled, the delegate may be notified of changes:
+
+            tokenTrackingControllerCanReleaseHighlightedRange - should remove the highlight
+            tokenTrackingControllerHighlightedRangeReleased - the highlight was removed
+            tokenTrackingControllerHighlightedRangeWasClicked - the highlight was clicked
+            tokenTrackingControllerNewHighlightCandidate - new hovered highlight candidate
+
+        A plus side of this is that TextEditor now no longer knows about
+        "JavaScript". It shouldn't need to know about a certain mode of
+        content that it contains.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.html:
+        * UserInterface/CodeMirrorTokenTrackingController.css: Added.
+        (.CodeMirror .jump-to-symbol-highlight): Shared style for any type of editor.
+        * UserInterface/CodeMirrorTokenTrackingController.js: Added.
+        (WebInspector.CodeMirrorTokenTrackingController):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype.get delegate):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype.set delegate):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype.get mode):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype.set mode):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype.get mouseOverDelayDuration):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype.set mouseOverDelayDuration):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype.get mouseOutReleaseDelayDuration):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype.set mouseOutReleaseDelayDuration):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype.get classNameForHighlightedRange):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype.set classNameForHighlightedRange):
+        Different settings of the controller.
+
+        (WebInspector.CodeMirrorTokenTrackingController.prototype.get tracking):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype.get candidate):
+        Accessors for current state, but cannot be modified.
+
+        (WebInspector.CodeMirrorTokenTrackingController.prototype.startTracking):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype.stopTracking):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype.highlightRange):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype.removeHighlightedRange):
+        API to make use of the tracker to start/stop/highlight.
+
+        (WebInspector.CodeMirrorTokenTrackingController.prototype.boundsForRange):
+        Helper for getting the bounds of a given codemirror text range.
+
+        (WebInspector.CodeMirrorTokenTrackingController.prototype.handleEvent):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype._mouseMovedWithMarkedText):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype._markedTextIsNoLongerHovered):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype._mouseMovedOverEditor):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype._mouseMovedOutOfEditor):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype._mouseButtonWasPressedOverEditor):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype._mouseButtonWasReleasedOverEditor):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype._windowLostFocus):
+        Events handled while tracking. Very few changes.
+
+        (WebInspector.CodeMirrorTokenTrackingController.prototype._processNewHoveredToken):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype._processNonSymbolToken):
+        (WebInspector.CodeMirrorTokenTrackingController.prototype._processJavaScriptExpression):
+        When a token is hovered, create a candidate depending on the controller's mode.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor):
+        (WebInspector.TextEditor.prototype.get tokenTrackingController):
+        Create and expose the tokenTrackingController.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor):
+        (WebInspector.SourceCodeTextEditor.prototype._breakpointRemoved):
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorUpdatedFormatting):
+        (WebInspector.SourceCodeTextEditor.prototype._shouldTrackTokenHovering):
+        (WebInspector.SourceCodeTextEditor.prototype._startTrackingTokenHoveringIfNeeded):
+        (WebInspector.SourceCodeTextEditor.prototype._stopTrackingTokenHoveringIfNeeded):
+        (WebInspector.SourceCodeTextEditor.prototype._debuggerDidPause):
+        (WebInspector.SourceCodeTextEditor.prototype._debuggerDidResume):
+        (WebInspector.SourceCodeTextEditor.prototype._updateJumpToSymbolTrackingMode):
+        (WebInspector.SourceCodeTextEditor.prototype._enableJumpToSymbolTrackingModeSettings):
+        (WebInspector.SourceCodeTextEditor.prototype._disableJumpToSymbolTrackingModeSettings):
+        (WebInspector.SourceCodeTextEditor.prototype.tokenTrackingControllerCanReleaseHighlightedRange):
+        (WebInspector.SourceCodeTextEditor.prototype.tokenTrackingControllerHighlightedRangeWasClicked):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForFunction.didGetDetails):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForFunction):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForObject):
+        Switch to the tracking controller instead of TextEditor methods and properties.
+
+        * UserInterface/TextEditor.css:
+        (.text-editor > .CodeMirror .hovered-expression-highlight):
+        (@-webkit-keyframes text-editor-hovered-expression-highlight-fadeout):
+        Renamed the class name for expressions to have "expression" in the name.
+
+
+2013-05-10  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13769698> Should be a way to jump between SourceMap resource and Original resource
+
+        Introduce WebInspector.modifierKeys to know which modifier keys are
+        active at any time (command, option, shift). Trigger events on changes
+        through WebInspector.notifications.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        (WebInspector._updateModifierKeys):
+        (WebInspector._windowKeyDown):
+        (WebInspector._windowKeyUp):
+        * UserInterface/Object.js:
+
+2013-05-10  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Do a little renaming on ResourceSidebarPanel show methods for text
+        ranges. This better matches the showSourceCodeLocation method names.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.showSourceCodeTextRange):
+        (WebInspector.ResourceSidebarPanel.prototype.showOriginalOrFormattedSourceCodeTextRange):
+        (WebInspector.ResourceSidebarPanel.prototype._treeElementSelected):
+
+2013-05-10  Timothy Hatcher  <timothy@apple.com>
+
+        Make the console prompt suggest completions after typing "." or "[".
+
+        <rdar://problem/13860627> REGRESSION: Console autocompletion does not suggest anything until first character is typed
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController.prototype.updateCompletions):
+        (WebInspector.CodeMirrorCompletionController.prototype.hideCompletions):
+        (WebInspector.CodeMirrorCompletionController.prototype._scanStringForExpression):
+        (WebInspector.CodeMirrorCompletionController.prototype._completeAtCurrentPosition):
+
+2013-05-09  Timothy Hatcher  <timothy@apple.com>
+
+        Tell WebInspector.Resource about its type when it is created instead of changing it later.
+        
+        This depends on: https://webkit.org/b/74935
+
+        <rdar://problem/13726105> Timeline network filters don't update as resources change type (74935)
+
+        Reviewed by David Kilzer.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.frameDidNavigate):
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWillBeSent):
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWasServedFromMemoryCache):
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidReceiveResponse):
+        (WebInspector.FrameResourceManager.prototype._addNewResourceToFrame):
+        * UserInterface/InspectorBackendCommands.js:
+        * UserInterface/NetworkObserver.js:
+        (WebInspector.NetworkObserver.prototype.requestWillBeSent):
+
+2013-05-09  Timothy Hatcher  <timothy@apple.com>
+
+        Use a different image for the layer border toggle button.
+
+        <rdar://problem/13717886> Two layers buttons with different meanings
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView):
+        * UserInterface/Images/LayerBorders.pdf: Added.
+
+2013-05-08  Timothy Hatcher  <timothy@apple.com>
+
+        Fix the heirarchical path components for unrevealed source map resources.
+
+        <rdar://problem/13681487> Missing heirarchical path components selecting breakpoints in source map resources in Debugger sidebar
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.treeElementForRepresentedObject):
+        (WebInspector.ResourceSidebarPanel.prototype.treeElementForRepresentedObject.getParent):
+        Special case WebInspector.SourceMapResource.
+
+        * UserInterface/SourceCodeTreeElement.js:
+        (WebInspector.SourceCodeTreeElement.prototype._updateSourceCode):
+        Revert r50608.
+
+2013-05-07  Timothy Hatcher  <timothy@apple.com>
+
+        Fix the background color for the Timeline navigation bar.
+
+        The container is taller than the navigation bar, and it used for mouse over slop.
+        So the background color needs to be on the navigation bar.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .data-grid > .navigation-bar-container):
+        (.content-view.timelines > .data-grid > .navigation-bar-container > .navigation-bar):
+
+2013-05-07  Timothy Hatcher  <timothy@apple.com>
+
+        Compare async resource types by their first timestamp so they are in chronological order.
+
+        <rdar://problem/13827118> Web Inspector: cannot see order of xhrs in resource inspector (115728)
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement.compareResourceTreeElements):
+
+2013-05-07  Timothy Hatcher  <timothy@apple.com>
+
+        Fix and simplify the layout path for Toolbar.
+
+        <rdar://problem/13828232> REGRESSION: Toolbar overflows when using Icons and Text (Horizontal) mode
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Toolbar.css:
+        (.toolbar .control-section):
+        * UserInterface/Toolbar.js:
+        (WebInspector.Toolbar.prototype.customUpdateLayout.isOverflowingToolbar):
+        (WebInspector.Toolbar.prototype.customUpdateLayout):
+
+2013-05-07  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13821139> After deleting a node when remote inspecting, Web Inspector is broken
+
+        When using the remote inspector, there is enough of a delay between
+        messages that the didRemoveNode handler triggers the DOMTreeUpdater to
+        refresh the portion of the tree before this removeNodeCallback happens.
+        Since removeNodeCallback is asynchronous anyways, we should bail if
+        the tree element was already removed from the tree (has no parent).
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype.remove.removeNodeCallback):
+        (WebInspector.DOMTreeElement.prototype.remove):
+
+2013-05-07  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Fix member name typo.
+
+        This was the only occurrence of _selectDOMNode. This looks
+        like it was just a typo of _selectedDOMNode.
+
+        Reviewed by Darin Adler.
+
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline):
+
+2013-05-07  Timothy Hatcher  <timothy@apple.com>
+
+        Use a brighter blue for selected labels in the label-only toolbar mode.
+
+        This better matches the blue used in the selected toolbar icons.
+
+        Part of: <rdar://problem/13810992> Update Web Inspector to match Xcode 5's new design language
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/ButtonToolbarItem.css:
+        (.toolbar.label-only .item.activate.button.activated > .label):
+
+2013-05-07  Timothy Hatcher  <timothy@apple.com>
+
+        Only allow the LCD to be a single line, giving less difference between toolbar modes and sizes.
+
+        This better distributes the space in the LCD and makes it collapse down to 3 items when
+        there isn't enough room for all 6 items.
+
+        Part of: <rdar://problem/13810992> Update Web Inspector to match Xcode 5's new design language
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/DashboardView.css:
+        (.toolbar .dashboard):
+        (body.nightly-build .toolbar .dashboard):
+        (body.nightly-build .toolbar.collapsed .dashboard):
+        (body:not(.nightly-build) .toolbar.collapsed .dashboard):
+        (body:not(.nightly-build) .toolbar.collapsed .dashboard > .logs):
+        (.toolbar .dashboard > .item):
+        (.toolbar .dashboard > .resourcesSize):
+        (.toolbar .dashboard > .item > div):
+        (.toolbar.normal-size.icon-and-label-vertical .dashboard):
+        (.toolbar.normal-size.icon-and-label-horizontal .dashboard > .item):
+        * UserInterface/DashboardView.js:
+        (WebInspector.DashboardView):
+
+2013-05-06  Timothy Hatcher  <timothy@apple.com>
+
+        Update the LCD background to match Xcode 5.
+
+        This change is conditional to non-nightlies.
+
+        Part of: <rdar://problem/13810992> Update Web Inspector to match Xcode 5's new design language
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DashboardView.css:
+        (.toolbar .dashboard):
+        (body:not(.nightly-build) .toolbar .dashboard):
+        (body.window-inactive:not(.nightly-build) .toolbar .dashboard):
+        (body.nightly-build .toolbar .dashboard):
+        (.toolbar .dashboard > .item):
+        (.toolbar.small-size.icon-and-label-horizontal .dashboard):
+        (body.nightly-build .toolbar.small-size.icon-and-label-horizontal .dashboard):
+        (.toolbar.small-size.icon-and-label-horizontal .dashboard > .item):
+        (body.nightly-build .toolbar.small-size.icon-and-label-horizontal .dashboard > .item):
+        (.toolbar.normal-size.icon-and-label-horizontal .dashboard):
+        (body.nightly-build .toolbar.normal-size.icon-and-label-horizontal .dashboard):
+        (.toolbar.small-size.icon-and-label-vertical .dashboard):
+        (body.nightly-build .toolbar.small-size.icon-and-label-vertical .dashboard):
+        (.toolbar.normal-size.icon-and-label-vertical .dashboard):
+        (body.nightly-build .toolbar.normal-size.icon-and-label-vertical .dashboard):
+        (.toolbar.icon-and-label-vertical .dashboard > .item):
+        (body.nightly-build .toolbar.icon-and-label-vertical .dashboard > .item):
+
+2013-05-06  Timothy Hatcher  <timothy@apple.com>
+
+        Update the filter field placeholder in the Resources sidebar when showing search results.
+
+        Reviewed by Antoine Quint.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/ResourceSidebarPanel.js:
+
+2013-05-06  Timothy Hatcher  <timothy@apple.com>
+
+        Always have the HierarchicalPathComponent take space so it gives the last item some padding.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/HierarchicalPathComponent.css:
+        (.hierarchical-path:not(.always-show-last-path-component-separator) > .hierarchical-path-component:last-child > .separator):
+        Use visibility: hidden instead of display: none.
+
+2013-05-06  Timothy Hatcher  <timothy@apple.com>
+
+        Make ScopeBarItem and RadioButtonNavigationItem have a min-width so when they are selected the bold
+        weight does not cause the item to change its width.
+
+        This adds some updateLayout calls to places that needed it now or were missing it already.
+
+        This change is not conditional to non-nightlies. It does no harm to always do this.
+
+        Part of: <rdar://problem/13810992> Update Web Inspector to match Xcode 5's new design language
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem.prototype.set label):
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.visibilityDidChange):
+        * UserInterface/Main.js:
+        (WebInspector._contentBrowserSizeDidChange):
+        * UserInterface/RadioButtonNavigationItem.js:
+        (WebInspector.RadioButtonNavigationItem.prototype.get selected):
+        (WebInspector.RadioButtonNavigationItem.prototype.set selected):
+        (WebInspector.RadioButtonNavigationItem.prototype.get active):
+        (WebInspector.RadioButtonNavigationItem.prototype.set active):
+        (WebInspector.RadioButtonNavigationItem.prototype.updateLayout):
+        * UserInterface/ScopeBar.js:
+        (WebInspector.ScopeBar.prototype.updateLayout):
+        (WebInspector.ScopeBar.prototype._populate):
+        * UserInterface/TimelineDataGrid.js:
+        (WebInspector.TimelineDataGrid):
+        (WebInspector.TimelineDataGrid.prototype.updateLayout):
+
+2013-05-06  Timothy Hatcher  <timothy@apple.com>
+
+        Show overflow shadow pockets in the navigation sidebar when content can scroll.
+
+        This change is conditional to non-nightlies.
+
+        Part of: <rdar://problem/13810992> Update Web Inspector to match Xcode 5's new design language
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/NavigationSidebarPanel.css:
+        (.sidebar > .panel.navigation > .overflow-shadow):
+        (body.nightly-build .sidebar > .panel.navigation > .overflow-shadow):
+        (.sidebar > .panel.navigation > .overflow-shadow.top):
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel):
+        (WebInspector.NavigationSidebarPanel.prototype.createContentTreeOutline):
+        (WebInspector.NavigationSidebarPanel.prototype.showEmptyContentPlaceholder):
+        (WebInspector.NavigationSidebarPanel.prototype.hideEmptyContentPlaceholder):
+        (WebInspector.NavigationSidebarPanel.prototype.shown):
+        (WebInspector.NavigationSidebarPanel.prototype._updateContentOverflowShadowVisibility):
+        (WebInspector.NavigationSidebarPanel.prototype._updateFilter):
+        (WebInspector.NavigationSidebarPanel.prototype._treeElementAddedOrChanged):
+        (WebInspector.NavigationSidebarPanel.prototype._treeElementExpandedOrCollapsed):
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel):
+        * UserInterface/TreeOutline.js:
+        (TreeElement.prototype.collapse):
+        (TreeElement.prototype.expand):
+
+2013-05-06  Timothy Hatcher  <timothy@apple.com>
+
+        Update focus and active focus generated images to match the blues used by Xcode 5.
+
+        This change is not conditional to non-nightlies. It shouldn't be too revealing.
+
+        Part of: <rdar://problem/13810992> Update Web Inspector to match Xcode 5's new design language
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/ImageUtilities.js:
+        (.generateImage):
+
+2013-05-06  Timothy Hatcher  <timothy@apple.com>
+
+        Update styles to match the majority of Xcode 5's design changes.
+
+        The style changes are conditional so they wont apply when running a WebKit nightly.
+        After WWDC we can remove the condition and the extra style rules this adds.
+
+        Part of: <rdar://problem/13810992> Update Web Inspector to match Xcode 5's new design language
+
+        Rubber-stamped by Antoine Quint.
+
+        * UserInterface/ButtonNavigationItem.css:
+        (.navigation-bar .item.button.text-only):
+        (body.nightly .navigation-bar .item.button:not(.disabled):not(.radio):not(.suppress-bezel):active):
+        * UserInterface/CodeMirrorOverrides.css:
+        (.CodeMirror .CodeMirror-gutters):
+        (.body.nightly-build .CodeMirror .CodeMirror-gutters):
+        (.CodeMirror .CodeMirror-linenumber):
+        * UserInterface/DetailsSection.css:
+        (.details-section > .header):
+        (.details-section .details-section > .header):
+        (body.nightly-build .details-section > .header):
+        (body.nightly-build .details-section .details-section > .header):
+        * UserInterface/DividerNavigationItem.css:
+        (.navigation-bar .item.divider):
+        (body.nightly .navigation-bar .item.divider):
+        * UserInterface/FilterBar.css:
+        (.filter-bar):
+        (body.nightly-build .filter-bar):
+        (body:not(.nightly-build) .filter-bar > input[type="search"]):
+        (body:not(.nightly-build) .filter-bar > input[type="search"]::-webkit-input-placeholder):
+        (body:not(.nightly-build) .filter-bar > input[type="search"]:valid):
+        * UserInterface/FilterBar.js:
+        (WebInspector.FilterBar):
+        * UserInterface/FindBanner.css:
+        (body.nightly-build .find-banner):
+        (body:not(.nightly) .find-banner > input[type="search"]):
+        (body:not(.nightly) .find-banner > button):
+        (.find-banner > button > .glyph):
+        (body.nightly .find-banner > button > .glyph):
+        * UserInterface/HierarchicalPathComponent.css:
+        (body.nightly .hierarchical-path-component > .separator):
+        (.hierarchical-path-component.text-only > select):
+        * UserInterface/InstrumentSidebarPanel.css:
+        (.sidebar > .panel.instrument > .title-bar):
+        (body.nightly-build .sidebar > .panel.instrument > .title-bar):
+        (.sidebar > .panel.instrument > .title-bar.profiles):
+        (body.nightly-build .sidebar > .panel.instrument > .title-bar.profiles):
+        * UserInterface/LayerTreeSidebarPanel.css:
+        (.layer-tree.panel .bottom-bar):
+        (body.nightly-build .layer-tree.panel .bottom-bar):
+        * UserInterface/Main.css:
+        (#split-content-browser > .navigation-bar):
+        (body.nightly-build #split-content-browser > .navigation-bar):
+        * UserInterface/NavigationBar.css:
+        (.navigation-bar):
+        (body.nightly-build .navigation-bar):
+        (body.nightly-build.window-inactive .navigation-bar):
+        * UserInterface/NavigationSidebarPanel.css:
+        (.sidebar > .panel.navigation > .content):
+        (body.nightly-build .sidebar > .panel.navigation > .content):
+        (.sidebar > .panel.navigation > .overflow-shadow):
+        (.sidebar > .panel.navigation > .overflow-shadow.top):
+        * UserInterface/RadioButtonNavigationItem.css:
+        (.navigation-bar .item.radio.button.text-only.selected):
+        (body:not(.nightly) .navigation-bar .item.radio.button.text-only.selected):
+        (body.nightly .navigation-bar .item.radio.button.selected):
+        * UserInterface/ResourceSidebarPanel.css:
+        (.sidebar > .panel.resource > .empty-content-placeholder):
+        (body.nightly-build .sidebar > .panel.resource > .empty-content-placeholder):
+        (.sidebar > .panel.resource > .search-bar):
+        (body.nightly-build .sidebar > .panel.resource > .search-bar):
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel):
+        * UserInterface/ScopeBar.css:
+        (.scope-bar > li):
+        (body:not(.nightly-build) .scope-bar > li):
+        (body:not(.nightly-build) .scope-bar > li:active):
+        (body:not(.nightly-build) .scope-bar > li.selected):
+        (body.nightly-build .scope-bar > li):
+        (body.nightly-build .scope-bar > li:active):
+        (.scope-bar > li:hover):
+        (.scope-bar > li.selected):
+        (.scope-bar > li:active):
+        (body.nightly-build .scope-bar > li.selected):
+        * UserInterface/SearchBar.css:
+        (.search-bar > input[type="search"]):
+        (body:not(.nightly-build) .search-bar > input[type="search"]):
+        (body:not(.nightly-build) .search-bar > input[type="search"]::-webkit-input-placeholder):
+        (body:not(.nightly-build) .search-bar > input[type="search"]:valid):
+        * UserInterface/SearchBar.js:
+        (WebInspector.SearchBar):
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .data-grid):
+        (body.nightly-build .content-view.timelines > .data-grid):
+        (.content-view.timelines > .data-grid th):
+        (body.nightly-build .content-view.timelines > .data-grid th):
+        (.content-view.timelines > .data-grid th:not(:last-child)):
+        (body.nightly-build .content-view.timelines > .data-grid th:not(:last-child)):
+        (.content-view.timelines > .data-grid th.sortable:not(.mouse-over-collapser):active):
+        (body.nightly-build .content-view.timelines > .data-grid th.sortable:not(.mouse-over-collapser):active):
+        (.content-view.timelines > .data-grid th.sort-descending):
+        (body.nightly-build .content-view.timelines > .data-grid th.sort-descending):
+        (.content-view.timelines > .data-grid > .navigation-bar-container):
+        (.content-view.timelines > .data-grid > .navigation-bar-container > .navigation-bar):
+        (body.nightly-build .content-view.timelines > .data-grid > .navigation-bar-container > .navigation-bar):
+
+2013-05-06  Timothy Hatcher  <timothy@apple.com>
+
+        Add a nightly-build class so we can hide new UI from nightly WebKit builds.
+
+        Part of: <rdar://problem/13810992> Update Web Inspector to match Xcode 5's new design language
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        Set the nightly-build class on body if we are in a nightly build.
+
+2013-05-03  Timothy Hatcher  <timothy@apple.com>
+
+        Add stubs for savedURL and appendedToURL.
+
+        https://webkit.org/b/115561
+        rdar://problem/13806055
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.savedURL):
+        (InspectorFrontendAPI.appendedToURL):
+
+2013-05-02  Timothy Hatcher  <timothy@apple.com>
+
+        Fix the alignment of the titles in the Timelines sidebar.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/GeneralTreeElement.js:
+        (WebInspector.GeneralTreeElement.prototype._updateTitleElements):
+        Only create a subtitle if the string has a value, not an empty string.
+
+2013-05-01  Timothy Hatcher  <timothy@apple.com>
+
+        Make the Dashboard timer and Timeline views more robust when going back/forward.
+
+        <rdar://problem/13612025> Dashboard: LCD timer never stops when going back/forward
+        <rdar://problem/13180009> Recording sometimes never stops because the load event marker is never added
+        <rdar://problem/13510955> Intermittently, timeline is in "days" after refreshing wsj.com site
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/DashboardManager.js:
+        (WebInspector.DashboardManager):
+        (WebInspector.DashboardManager.prototype._mainResourceDidChange):
+        (WebInspector.DashboardManager.prototype._recordingStopped):
+        (WebInspector.DashboardManager.prototype._startUpdatingTime):
+        (WebInspector.DashboardManager.prototype._stopUpdatingTime): Added.
+        (WebInspector.DashboardManager.prototype._updateTime):
+
+        * UserInterface/NetworkGraphCalculator.js:
+        (WebInspector.NetworkTransferTimeCalculator.prototype._lowerBound):
+        (WebInspector.NetworkTransferTimeCalculator.prototype._upperBound):
+        (WebInspector.NetworkTransferDurationCalculator.prototype._upperBound):
+        Don't return NaN for the bounds.
+
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.get firstTimestamp): Added.
+        Added as a helper to prevent using NaN as the start time.
+
+        * UserInterface/ResourceTimelineRecord.js:
+        (WebInspector.ResourceTimelineRecord.prototype.get startTime):
+        Use firstTimestamp.
+
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype.startRecording):
+        (WebInspector.TimelineManager.prototype.stopRecording):
+        (WebInspector.TimelineManager.prototype.eventRecorded.processRecord):
+        (WebInspector.TimelineManager.prototype.eventRecorded):
+        (WebInspector.TimelineManager.prototype._clear):
+        (WebInspector.TimelineManager.prototype._addRecord):
+        (WebInspector.TimelineManager.prototype._startAutoRecording):
+        (WebInspector.TimelineManager.prototype._stopAutoRecordingSoon):
+        (WebInspector.TimelineManager.prototype._resetAutoRecordingDeadTimeTimeout):
+        (WebInspector.TimelineManager.prototype._mainResourceDidChange):
+        Fire an event on clear so the timeline view clears even if recording does not start.
+        Track the main resource object and not the request identifier, since a resource
+        might not have a request identifier in the back/forward case. Auto stop recording soon
+        after every record, not just the load event since we don't always have load events.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView):
+        (WebInspector.TimelinesContentView.prototype._recordsCleared):
+        Use RecordsCleared event instead of RecordingStarted to clear the view.
+
+2013-05-01  Timothy Hatcher  <timothy@apple.com>
+
+        Reveal the line (if supplied) when showing a ScriptContentView.
+
+        <rdar://problem/13785027> REGRESSION: Extra Scripts: no autoscroll to debugger statement.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.showSourceCode):
+
+2013-05-01  Timothy Hatcher  <timothy@apple.com>
+
+        Don't update the dashboard text unless it has changed.
+
+        Also step up the interval we update the time so it does not try to update every 50ms when the
+        duration is long enough to not matter.
+
+        <rdar://problem/13718056> While JS debugging, everything in the inspector window is repainting all the time
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DashboardManager.js:
+        (WebInspector.DashboardManager.prototype._startUpdatingTime):
+        (WebInspector.DashboardManager.prototype._updateTime):
+        * UserInterface/DashboardView.js:
+        (WebInspector.DashboardView.prototype.set logs):
+        (WebInspector.DashboardView.prototype.set issues):
+        (WebInspector.DashboardView.prototype.set errors):
+        (WebInspector.DashboardView.prototype.set time):
+        (WebInspector.DashboardView.prototype.set resourcesCount):
+        (WebInspector.DashboardView.prototype.set resourcesSize):
+        (WebInspector.DashboardView.prototype._appendElementForNamedItem.):
+
+2013-05-01  Timothy Hatcher  <timothy@apple.com>
+
+        Breakpoint context menu items should appear for Extra and Anonymous Scripts.
+
+        <rdar://problem/13776299>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DebuggerSidebarPanel.js:
+        (WebInspector.DebuggerSidebarPanel.prototype._breakpointsBeneathTreeElement):
+        (WebInspector.DebuggerSidebarPanel.prototype._breakpointTreeOutlineDeleteTreeElement):
+        (WebInspector.DebuggerSidebarPanel.prototype._breakpointTreeOutlineContextMenuTreeElement):
+        Check for WebInspector.ScriptTreeElement in addition to WebInspector.ResourceTreeElement.
+
+2013-04-30  Timothy Hatcher  <timothy@apple.com>
+
+        Disable spellcheck and smart quotes in the console prompt.
+
+        I'll upstream this to CodeMirror once I get approval from legal.
+
+        <rdar://problem/13757709>
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/External/CodeMirror/codemirror.js:
+        (window.CodeMirror):
+
+2013-04-30  Timothy Hatcher  <timothy@apple.com>
+
+        Tweak the Toolbar layout code to not hide the Dashboard when sizes are off by one.
+
+        This wasn't needed when sub-pixel layout was on, but that was disabled in http://webkit.org/b/149209.
+
+        <rdar://problem/13757354> REGRESSION: Toolbar thinks it is collapsed, so dashboard is hidden
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Toolbar.js:
+        (WebInspector.Toolbar.prototype.customUpdateLayout):
+
+2013-04-30  Timothy Hatcher  <timothy@apple.com>
+
+        Have dashboard buttons (console summary buttons) do filtering as well.
+
+        <rdar://problem/13685685>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DashboardView.js:
+        (WebInspector.DashboardView):
+        (WebInspector.DashboardView.prototype._consoleItemWasClicked):
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype.get scopeBar):
+        * UserInterface/Main.js:
+        (WebInspector.showFullHeightConsole):
+        (WebInspector.showConsoleView):
+
+2013-04-30  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12719925> Call stack should show live line number next to file name
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/GeneralTreeElement.js:
+        (WebInspector.GeneralTreeElement):
+        (WebInspector.GeneralTreeElement.prototype.get tooltipHandledSeparately):
+        (WebInspector.GeneralTreeElement.prototype.set tooltipHandledSeparately):
+        (WebInspector.GeneralTreeElement.prototype._updateTitleElements):
+        Allow clients to handle the tooltip themselves, and to set subtitle as
+        an element, instead of a string (already possible with mainTitle).
+
+        * UserInterface/CallFrameTreeElement.js:
+        (WebInspector.CallFrameTreeElement):
+        Set the subtitle as a live location <span>.
+        (WebInspector.CallFrameTreeElement.prototype.onattach):
+        Set the tooltip on the entire tree element once it is created.
+
+        * UserInterface/SourceCodeLocation.js:
+        (WebInspector.SourceCodeLocation.prototype.populateLiveDisplayLocationTooltip):
+        Allow an optional prefix before the location string.
+
+2013-04-29  Timothy Hatcher  <timothy@apple.com>
+
+        Remove an assert from StyleDetailsPanel.prototype.shown.
+
+        The shown function can be called multiple times. Just keep the early return.
+        Also make sure to call StyleDetailsPanel.prototype.hidden in another case.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.visibilityDidChange):
+        * UserInterface/StyleDetailsPanel.js:
+        (WebInspector.StyleDetailsPanel.prototype.shown):
+
+2013-04-29  Timothy Hatcher  <timothy@apple.com>
+
+        Skip invalid properties when associating related properties.
+
+        <rdar://problem/13752586> DOMNodeStyles.js:981: console.assert(property.overridden); on html5please.com
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype._associateRelatedProperties):
+
+2013-04-29  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Don't allow Command+Enter in the Console with an empty expression.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ConsolePrompt.js:
+
+2013-04-29  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13616567> Can no longer clear the console with clear()
+
+        LogContentView starts listening for an event in the constructor which
+        was getting removed in close and not being added back. This ContentView
+        is already treated like a singleton with other events, treat this the
+        same and just avoid removing event listeners in close.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/LogContentView.js:
+
+2013-04-29  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13765474> REGRESSION: Console should not clear on reload
+
+        The backend sends the frontend a messagesCleared messages for many reasons.
+        We should not clear the active log when there was a navigation. In those
+        cases the LogManager will send out a Cleared or SessionStarted event.
+        It would be messy and brittle to determine if we are in the middle of a
+        main resource load, so it is easier to do a setTimeout and send an event
+        if we did not do a navigation.
+
+        This works well with all common cases, but breaks:
+
+            js> console.log(1); console.clear(); console.log(2);
+
+        Filed the follow-up bug to handle fixing this by providing the frontend
+        with the information it needs in messagesCleared.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ConsoleObserver.js:
+        (WebInspector.ConsoleObserver.prototype.messageAdded):
+        Don't append a blank ConsoleMessage row for console.clear messages.
+
+        * UserInterface/LogManager.js:
+        (WebInspector.LogManager.prototype.messagesCleared):
+        (WebInspector.LogManager.prototype._mainResourceDidChange):
+        Defer ActiveLogCleared events so that we don't issue one while we
+        are reloading the page.
+
+2013-04-29  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13764663> Tooltips on live location links are no longer working
+
+        Changing the content in mousemove, even if the content was the same,
+        would cause the tooltip to disappear. Avoid changing the content unless
+        we absolutely need to.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeLocation.js:
+        (WebInspector.SourceCodeLocation.prototype.updateDisplayString):
+        Avoid unnecessary content updates.
+
+        (WebInspector.SourceCodeLocation.prototype._locationString):
+        Fix typo causing column numbers to not show up in tooltips.
+
+2013-04-29  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13763988> Jump to "rs.js" error location link not live on theverge.com
+
+        The URL in the ConsoleMessage is the URL of the Script, which contains
+        a fragment. The URL of the Resource does not contain the fragment. When
+        we create a sourceCodeLocation in linkifyLocation we want to get the
+        resource that has a sidebar item, because that is the resource in the
+        sidebar that will show a ContentView. So if we get a Script try to get
+        the Resource for that Script if one exists.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.js:
+        (WebInspector.linkifyLocation):
+
+2013-04-29  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13442566> Console context selector should truncate or generate better names when the names are long
+
+        Truncate the context selector quick console nav bar item. And modify
+        how items are sorted in the context menu to show the frame name if one
+        is available.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/HierarchicalPathComponent.js:
+        (WebInspector.HierarchicalPathComponent):
+        (WebInspector.HierarchicalPathComponent.prototype.get displayName):
+        (WebInspector.HierarchicalPathComponent.prototype.set displayName):
+        (WebInspector.HierarchicalPathComponent.prototype.get truncatedDisplayNameLength):
+        (WebInspector.HierarchicalPathComponent.prototype.set truncatedDisplayNameLength):
+        Separate the display name property from the title element's content, so we
+        can truncate the display but store the real name.
+
+        (WebInspector.HierarchicalPathComponent.prototype._updateElementTitleAndText):
+        Truncate the display in the navigation bar.
+
+        (WebInspector.HierarchicalPathComponent.prototype._updateSelectElement.createOption):
+        (WebInspector.HierarchicalPathComponent.prototype._updateSelectElement):
+        Work around an NSMenu issue and truncate in the option text in the context menu.
+
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole.prototype._createExecutionContextPathComponent):
+        (WebInspector.QuickConsole.prototype._createExecutionContextPathComponentFromFrame):
+        (WebInspector.QuickConsole.prototype._compareExecutionContextPathComponents):
+        Set the Frame on the PathComponents to use later for sorting.
+
+2013-04-29  Timothy Hatcher  <timothy@apple.com>
+
+        Abort earlier when loading completions for a null or undefined value.
+
+        <rdar://problem/13764611> JavaScriptLogViewController.js:293: CONSOLEAPI ERROR: Unknown result type: undefined
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController.prototype.consolePromptCompletionsNeeded):
+        Return early if the RemoteObject is null or undefined. Also release the completion group.
+
+2013-04-29  Timothy Hatcher  <timothy@apple.com>
+
+        Correct the layout of navigation items when an item has selector arrows.
+
+        <rdar://problem/13717922> Layer border toggle button disappears sometimes
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/HierarchicalPathComponent.js:
+        (WebInspector.HierarchicalPathComponent):
+        (WebInspector.HierarchicalPathComponent.prototype.get minimumWidth): Added.
+        (WebInspector.HierarchicalPathComponent.prototype.set forcedWidth):
+        (WebInspector.HierarchicalPathComponent.prototype.get selectorArrows): Added.
+        (WebInspector.HierarchicalPathComponent.prototype.set selectorArrows): Added.
+        Account for the width of the selector arrows when using minimum width.
+
+        * UserInterface/HierarchicalPathNavigationItem.js:
+        (WebInspector.HierarchicalPathNavigationItem.prototype.updateLayout):
+        Ask HierarchicalPathComponent for its minimum width.
+
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype.updateLayout):
+        Skip flexible space items since they can take up no space at the minimum width.
+
+2013-04-27  Dean Jackson  <dino@apple.com>
+
+        <rdar://problem/13441708> Make the Web Inspector work if HiDPI canvas is disabled on OS X
+
+        Reviewed by Tim Hatcher.
+
+        For <rdar://problem/13437328>, HIGH_DPI_CANVAS was disabled on retina devices, so
+        the places in the inspector that use a canvas must double the dimensions of
+        the image buffers they request.
+
+        * UserInterface/DashboardView.css:
+        (.toolbar .dashboard): Since the image being pased in as background might be 2x,
+            make sure that it uses the element size for the background.
+        * UserInterface/DashboardView.js: Request a 2x canvas if necessary.
+
+        * UserInterface/ImageUtilities.js:
+        (generateColoredImage): No need to pass in scale, as this method is passed the
+            correct width and height the caller needs. Use get/setImageData methods.
+        (generateColoredImagesForCSS): Calculate a scaledWidth/Height to be used throughout
+            this method. Make sure we create contexts with the correct dimensions, and save/restore
+            them at full size.
+        (._drawImageShadow): Use scaledWidth/Height.
+        (._invertMaskImage): No need to pass in width and height..
+        (._applyImageMask): Ditto.
+        (generateEmbossedImages): Calculate a scaledWidth/Height to be used throughout
+            this method. Make sure we create contexts with the correct dimensions.
+
+        * UserInterface/Popover.js:
+        (WebInspector.Popover.prototype.set frame): Make sure to set the background size when
+            the frame is updated.
+        (WebInspector.Popover.prototype._drawBackground): Create a correctly scaled canvas,
+            and some minor code cleanup.
+
+2013-04-27  Timothy Hatcher  <timothy@apple.com>
+
+        Fix the speed of typing in the Web Inspector.
+
+        ToggleControlToolbarItem regenerates its images every time 'toggled' is set, even
+        if the flag does not change! And the dock button updates 'toggled' on keydown and
+        keyup to update when Option is pressed.
+
+        <rdar://problem/13756496> REGRESSION: Dock/undock buttons regenerates ever keydown and keyup!
+
+        Reviewed by Dean Jackson.
+
+        * UserInterface/ToggleButtonNavigationItem.js:
+        (WebInspector.ToggleButtonNavigationItem.prototype.set toggled): Return early if flag does not change.
+
+2013-04-27  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13143692> Object literal properties should not have popovers
+
+        Given test:
+
+          var foo = 300, o = { foo: 1 };
+          var result = o.foo;
+
+        This patch makes it so hovering "foo" in the object literal does not
+        show a popover, it used to show 300. While hovering the variable "foo"
+        or hovering the property access "o.foo" both show expected values.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype._mouseMovedOverEditor):
+        If we are hovering a JavaScript token inside of a <script> in HTML resources
+        then the JavaScript state is actually token.state.localState. If it is in
+        a JavaScript resource then it is just token.state. Pass the most specific
+        state on our partial "token" object.
+
+        (WebInspector.TextEditor.prototype._checkHoveredToken):
+        Bail for JavaScript object literal properties.
+
+2013-04-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13753106> SourceCodeTextEditor.js:815: JS ERROR: TypeError: undefined is not an object (evaluating this.hoveredToken.bounds)
+
+        We have a complete token in tokenWasHovered, however between then and
+        when the async DebuggerAgent.evaluateOnCallFrame callback happens the
+        hovered token can change. If it changed, bail, so we don't end up
+        trying to put the popover on the wrong hovered token or worse
+        hit this exception and break execution.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.tokenWasHovered.populate):
+        (WebInspector.SourceCodeTextEditor.prototype.tokenWasHovered):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopover):
+        Add asserts and preventative bails in multiple places to catch
+        similar issues in the future if new paths are added.
+
+2013-04-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13746094> Esc inside a read only editor (JavaScript) should not bring up completion suggestions
+
+        Pass on "Esc" if the editor is read only.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController.prototype._handleEscapeKey):
+
+2013-04-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13573902> Line numbers in JS console.log / console.error Messages should be live, they jump to the wrong location
+        <rdar://problem/13702357> Line numbers in JS Console Error Messages should be live, they jump to the wrong location
+
+        Make the ConsoleMessage and Profiler links live when possible. Create
+        a live link with createSourceCodeLocationLink or linkifyLocation.
+        ConsoleMessages's have line and column information now both at the
+        base and in stack traces. Profiler nodes don't have column info, but we
+        can still make them live, just not entirely accurate.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ConsoleMessageImpl.js:
+        (WebInspector.ConsoleMessageImpl.prototype._formatMessage):
+        (WebInspector.ConsoleMessageImpl.prototype._linkifyLocation):
+        Use WebInspector.linkifyLocation with url, line, and column.
+
+        * UserInterface/Main.js:
+        (.showSourceCodeLocation):
+        (WebInspector.createSourceCodeLocationLink):
+        (WebInspector.linkifyLocation):
+        If we have the resource with url passed into linkifyLocation
+        it creates a link with a sourceCodeLocation. Otherwise it just
+        creates a basic link with the appropriate styles.
+
+        * UserInterface/CSSSelectorProfileView.js:
+        (WebInspector.CSSSelectorDataGridNode.prototype.createCell):
+        (WebInspector.CSSSelectorDataGridNode.prototype._linkifyLocation):
+        * UserInterface/ProfileDataGridTree.js:
+        (WebInspector.ProfileDataGridNode.prototype._linkifyLocation):
+        Use WebInspector.linkifyLocation with url and lineNumber. Add
+        a FIXME about the missing column number.
+
+2013-04-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13573902> Line numbers in JS console.log / console.error Messages should be live, they jump to the wrong location
+        <rdar://problem/13702357> Line numbers in JS Console Error Messages should be live, they jump to the wrong location
+
+        Give ConsoleMessage a column number. The backend now sends us this info.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ConsoleCommandResult.js:
+        (WebInspector.ConsoleCommandResult):
+        * UserInterface/ConsoleMessage.js:
+        (WebInspector.ConsoleMessage):
+        (WebInspector.ConsoleMessage.create):
+        * UserInterface/ConsoleMessageImpl.js:
+        (WebInspector.ConsoleMessageImpl):
+        (WebInspector.ConsoleMessageImpl.prototype.get levelString):
+        * UserInterface/ConsoleObserver.js:
+        (WebInspector.ConsoleObserver.prototype.messageAdded):
+        * UserInterface/LogManager.js:
+        (WebInspector.LogManager.prototype.messageWasAdded):
+
+2013-04-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13745104> First revealLine to SourceMapResource lineNumber is not working
+
+        SourceMapResource's may lazily load their data. In such cases the
+        ContentView for the resource will be Generic and ignore the revealLine.
+        Once loaded, the Generic ContentView will be replaced by a better view,
+        but the line number to reveal has been lost. Save that information in
+        the cluster content view, as long as the resource has not finished,
+        and pass it on to the new content view when the resource finishes.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceMapResource.js:
+        (WebInspector.SourceMapResource.prototype.requestContentFromBackend):
+        Mark as finished after updating types.
+
+        * UserInterface/ResourceClusterContentView.js:
+        (WebInspector.ResourceClusterContentView.prototype.showResponse):
+        (WebInspector.ResourceClusterContentView.prototype._resourceTypeDidChange):
+        (WebInspector.ResourceClusterContentView.prototype._resourceLoadingDidFinish):
+        If a revealLine comes in for a resource not yet finished loading, replay
+        the reveal line when the resource does finish. If subsequent reveals come
+        in, the most recent one wins.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor._prettyPrint.prettyPrintAndUpdateEditor):
+        When a file is formatted we updated the delayed line number to reveal, but
+        didn't update the delayed text range to select. Do that just in case.
+
+2013-04-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13701579> Styles sidebar should show source map location by default instead of on hover
+
+        When hovering a link with Command we are showing the original,
+        unformatted location. So make sure that when clicked we jump
+        to that exact, unformatted location.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.js:
+        (WebInspector.createGoToArrowButton):
+        Handle Command+Click to jump to an unformatted location.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.showSourceCode):
+        (WebInspector.ResourceSidebarPanel.prototype.showOriginalUnformattedSourceCodeLocation):
+        Allow showing a source code that forces unformatting.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype._revealPendingLineIfPossible):
+        (WebInspector.TextEditor.prototype.revealLine):
+        May need to unformat the resource before revealing the line.
+
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView.prototype.showSourceCode):
+        * UserInterface/ResourceClusterContentView.js:
+        (WebInspector.ResourceClusterContentView.prototype.showResponse):
+        * UserInterface/ScriptContentView.js:
+        (WebInspector.ScriptContentView.prototype.revealLine):
+        * UserInterface/TextContentView.js:
+        (WebInspector.TextContentView.prototype.revealLine):
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.prototype.revealLine):
+        Pass the forceUnformat option through revealLine paths.
+
+2013-04-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13701579> Styles sidebar should show source map location by default instead of on hover
+
+        Update the rules for a live location display.
+
+          - Show display location by default if there is one.
+          - Show display locations in italics, original locations display non-italics.
+          - Command+Mouseover a display location will show the original location.
+          - Provide different display styles for column numbers. Default to "OnlyIfLarge"
+            meaning only show column numbers if the column is > 80.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CallFrameTreeElement.js:
+        (WebInspector.CallFrameTreeElement):
+        Simplify by using SourceCodeLocation.prototype.tooltipString.
+
+        * UserInterface/SourceCodeLocation.js:
+        (WebInspector.SourceCodeLocation.prototype.originalLocationString):
+        (WebInspector.SourceCodeLocation.prototype.formattedLocationString):
+        (WebInspector.SourceCodeLocation.prototype.displayLocationString):
+        Add the new column style parameter. Pass it through to _locationString.
+
+        (WebInspector.SourceCodeLocation.prototype.tooltipString):
+        Always show full URLs and columns in tooltips.
+
+        (WebInspector.SourceCodeLocation.prototype._locationString):
+        Respect the column style when including column numbers.
+
+        (WebInspector.SourceCodeLocation.prototype.updateDisplayString):
+        (WebInspector.SourceCodeLocation.prototype.mouseOverOrMove):
+        (WebInspector.SourceCodeLocation.prototype.populateLiveDisplayLocationString):
+        Update the default value to displayLocation. And the Command+Mouseover to originalLocation.
+
+2013-04-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13701576> SASS source map location is wrong on http://html5please.com
+
+        CSSRule.selectorList.range has column information, which allows us to
+        provide a much better location to jump to. So when selectorList and
+        its SourceRange is available, use that for its start line and column.
+        Fallback to the CSSRule.sourceLine which is always available.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype._parseRulePayload):
+
+2013-04-26  Timothy Hatcher  <timothy@apple.com>
+
+        Update CodeMirror from 3.11+ to 3.12.
+
+        * UserInterface/External/CodeMirror/clojure.js: Updated.
+        * UserInterface/External/CodeMirror/codemirror.js: Updated.
+        * UserInterface/External/CodeMirror/javascript.js: Updated.
+        * UserInterface/External/CodeMirror/searchcursor.js: Updated.
+        * UserInterface/External/CodeMirror/sql.js: Updated.
+
+2013-04-26  Timothy Hatcher  <timothy@apple.com>
+
+        Make completions work after open brackets.
+
+        This also improves things to limit keywords to certain contexts.
+
+        <rdar://problem/13746491> Should have JavaScript completion suggestions after a base of all open bracket characters, e.g. "if (tr|"
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController.prototype._generateJavaScriptCompletions):
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController.prototype.consolePromptCompletionsNeeded):
+
+2013-04-26  Timothy Hatcher  <timothy@apple.com>
+
+        Improve multi-line support in the console prompt.
+
+        Pressing return at the end of the expression now does a parse to see if the expression
+        is ready to evaluate. We will insert a new line if the error is recoverable, otherwise
+        we will evaluate it. Pressing enter will insert a new line when there is no text, when
+        the cursor is not at the last position or there is a selection. Command-Enter will now
+        always evaluate the expression.
+
+        <rdar://problem/13747367>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ConsolePrompt.js:
+        (WebInspector.ConsolePrompt):
+        (WebInspector.ConsolePrompt.prototype._handleEnterKey.positionsEqual): Added.
+        (WebInspector.ConsolePrompt.prototype._handleEnterKey.commitTextOrInsertNewLine): Added.
+        (WebInspector.ConsolePrompt.prototype._handleEnterKey):
+        (WebInspector.ConsolePrompt.prototype._handleCommandEnterKey):
+        * UserInterface/InspectorBackendCommands.js:
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController.prototype.):
+        (WebInspector.JavaScriptLogViewController.prototype.consolePromptShouldCommitText):
+
+2013-04-25  Timothy Hatcher  <timothy@apple.com>
+
+        Fix some edge cases with the default JavaScript completions.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController.prototype._generateJavaScriptCompletions):
+        Correct the check for switch statements which was missing the "type" parts. Use "info"
+        instead to check for "switch". Substring the suffix, since there are cases it can be longer.
+        Also prevent keyword completions in var declarations, except for "this".
+
+2013-04-25  Timothy Hatcher  <timothy@apple.com>
+
+        Properly handle duplicate query parameters and form encoded POST data.
+
+        <rdar://problem/13737105> Duplicate query parameters only show the last item in the sidebar data grids
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshURL):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._createNameValueDataGrid):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshRequestDataSection):
+        Pass true to parseQueryString to get an array of name/value pairs. Then build
+        the DataGrid using that result.
+
+        * UserInterface/Utilities.js:
+        (parseLocationQueryParameters):
+        (parseQueryString):
+        Added arrayResult parameter to allow getting all values, not just the last one.
+
+2013-04-24  Timothy Hatcher  <timothy@apple.com>
+
+        Improve the sort order for array index completions.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController.prototype.consolePromptCompletionsNeeded.receivedPropertyNames.compare):
+        (WebInspector.JavaScriptLogViewController.prototype.consolePromptCompletionsNeeded.receivedPropertyNames):
+        Try to sort in numerical order first, then as strings.
+
+2013-04-24  Timothy Hatcher  <timothy@apple.com>
+
+        Allow autocompletion after "({a:1,b:2})" to suggest "a" and "b" properties.
+
+        <rdar://problem/5866281> Console should allow autocompletion after symbols like ), ], }
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController.prototype._scanStringForExpression):
+        Ignore stop characters when we are inside brackets.
+
+2013-04-24  Timothy Hatcher  <timothy@apple.com>
+
+        Remove TextPrompt and JavaScriptTextPrompt.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/JavaScriptTextPrompt.css: Removed.
+        * UserInterface/JavaScriptTextPrompt.js: Removed.
+        * UserInterface/Main.html:
+        * UserInterface/TextPrompt.css: Removed.
+        * UserInterface/TextPrompt.js: Removed.
+
+2013-04-24  Timothy Hatcher  <timothy@apple.com>
+
+        Update DatabaseContentView to use ConsolePrompt.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DatabaseContentView.css:
+        (.database-query-prompt):
+        (.database-user-query::before, .database-query-prompt::before, .database-query-result::before):
+        (.database-user-query):
+        (.database-query-result):
+        * UserInterface/DatabaseContentView.js:
+        (WebInspector.DatabaseContentView):
+        (WebInspector.DatabaseContentView.prototype.shown):
+        (WebInspector.DatabaseContentView.prototype.updateLayout):
+        (WebInspector.DatabaseContentView.prototype._messagesClicked):
+        (WebInspector.DatabaseContentView.prototype.accumulateMatches):
+        (WebInspector.DatabaseContentView.prototype.tableNamesCallback):
+        (WebInspector.DatabaseContentView.prototype.consolePromptCompletionsNeeded):
+        (WebInspector.DatabaseContentView.prototype.consolePromptTextCommited):
+        (WebInspector.DatabaseContentView.prototype._appendQueryResult):
+
+2013-04-24  Timothy Hatcher  <timothy@apple.com>
+
+        Implement live completions for the ConsolePrompt.
+
+        Part of: <rdar://problem/13359916> Typing in the console is improved, but still much slower
+        than in Chrome / the WebKit inspector
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ConsolePrompt.js:
+        (WebInspector.ConsolePrompt.prototype.updateCompletions):
+        (WebInspector.ConsolePrompt.prototype.completionControllerCompletionsNeeded):
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController):
+        (WebInspector.JavaScriptLogViewController.prototype.consolePromptCompletionsNeeded.evaluated.getCompletions):
+        (WebInspector.JavaScriptLogViewController.prototype.consolePromptCompletionsNeeded.evaluated):
+        (WebInspector.JavaScriptLogViewController.prototype.consolePromptCompletionsNeeded.receivedPropertyNamesFromEvaluate):
+        (WebInspector.JavaScriptLogViewController.prototype.consolePromptCompletionsNeeded.receivedPropertyNames):
+        (WebInspector.JavaScriptLogViewController.prototype.consolePromptCompletionsNeeded):
+        (WebInspector.JavaScriptLogViewController.prototype._clearLastProperties):
+        Most of this is copied and adapted from JavaScriptTextPrompt. The new part if the caching of property names.
+
+2013-04-24  Timothy Hatcher  <timothy@apple.com>
+
+        Prevent the Escape key from toggling and triggering a completion.
+
+        When the prompt is empty we allow console toggling. When not empty it triggers completion.
+
+        Part of: <rdar://problem/13359916> Typing in the console is improved, but still much slower
+        than in Chrome / the WebKit inspector
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController.prototype._handleEscapeKey):
+        Call the completionControllerShouldAllowEscapeCompletion delegate function.
+
+        * UserInterface/ConsolePrompt.js:
+        (WebInspector.ConsolePrompt.prototype.completionControllerShouldAllowEscapeCompletion):
+        Added. Return true if the prompt is not empty.
+
+        * UserInterface/KeyboardShortcut.js:
+        (WebInspector.KeyboardShortcut._handleKeyDown):
+        Don't process the shortcut if default was prevented. We know someone already handled
+        the key, but didn't call stopPropagation. CodeMirror does this.
+
+2013-04-24  Timothy Hatcher  <timothy@apple.com>
+
+        Implement default completions for JavaScript in CodeMirrorCompletionController.
+
+        Also hook up completions in ConsolePrompt to get the default completions.
+
+        Part of: <rdar://problem/13359916> Typing in the console is improved, but still much slower
+        than in Chrome / the WebKit inspector
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController.prototype._scanStringForExpression):
+        (WebInspector.CodeMirrorCompletionController.prototype._completeAtCurrentPosition):
+        (WebInspector.CodeMirrorCompletionController.prototype._generateCSSCompletions):
+        (WebInspector.CodeMirrorCompletionController.prototype._generateJavaScriptCompletions.matchKeywords):
+        (WebInspector.CodeMirrorCompletionController.prototype._generateJavaScriptCompletions.matchVariables.filterVariables):
+        (WebInspector.CodeMirrorCompletionController.prototype._generateJavaScriptCompletions.matchVariables):
+        (WebInspector.CodeMirrorCompletionController.prototype._generateJavaScriptCompletions):
+        * UserInterface/ConsolePrompt.js:
+        (WebInspector.ConsolePrompt):
+
+2013-04-24  Timothy Hatcher  <timothy@apple.com>
+
+        Hook up the ConsolePrompt delegate to JavaScriptLogViewController.
+
+        This makes the prompt work and evaluate results. No auto completion yet.
+
+        Part of: <rdar://problem/13359916> Typing in the console is improved, but still much slower
+        than in Chrome / the WebKit inspector
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController.prototype.consolePromptHistoryDidChange):
+        (WebInspector.JavaScriptLogViewController.prototype.consolePromptTextCommited.printResult):
+        (WebInspector.JavaScriptLogViewController.prototype.consolePromptTextCommited):
+        (WebInspector.JavaScriptLogViewController.prototype._evaluateInInspectedWindow.evalCallback):
+        (WebInspector.JavaScriptLogViewController.prototype._evaluateInInspectedWindow):
+        Copied from JavaScriptTextPrompt.evalInInspectedWindow.
+
+2013-04-24  Timothy Hatcher  <timothy@apple.com>
+
+        Start using ConsolePrompt in the QuickConsole.
+
+        This simplifies the DOM structure of the QuickConsole and makes resizing happen
+        automatically using flex layout instead of JavaScript.
+
+        Part of: <rdar://problem/13359916> Typing in the console is improved, but still much slower
+        than in Chrome / the WebKit inspector
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController):
+        (WebInspector.JavaScriptLogViewController.prototype.clear):
+        (WebInspector.JavaScriptLogViewController.prototype.startNewSession):
+        (WebInspector.JavaScriptLogViewController.prototype._handleClearShortcut):
+        (WebInspector.JavaScriptLogViewController.prototype._handleFindShortcut):
+        (WebInspector.JavaScriptLogViewController.prototype._handleFindNextShortcut):
+        (WebInspector.JavaScriptLogViewController.prototype._handleFindPreviousShortcut):
+        (WebInspector.JavaScriptLogViewController.prototype._appendConsoleMessage):
+        Remove keydown and bind the the keyboard shortcuts to the messages element
+        and prompt element using specific event handlers.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView):
+        (WebInspector.LogContentView.prototype.shown):
+        (WebInspector.LogContentView.prototype.searchBarWantsToLoseFocus): Match _escapeWasPressed.
+        (WebInspector.LogContentView.prototype._activeLogCleared):
+        (WebInspector.LogContentView.prototype._keyDown):
+        Removed keyboard shortcut handling that was using private properties
+        from JavaScriptLogViewController.
+
+        * UserInterface/Main.html:
+        Include ConsolePrompt.js and ConsolePrompt.css.
+
+        * UserInterface/QuickConsole.css:
+        (.quick-console):
+        (.quick-console > .console-prompt):
+        (.quick-console > .console-prompt::before):
+        (.quick-console > .console-prompt > .CodeMirror):
+        (.quick-console > .navigation-bar):
+        Simplified by removing redundant elements.
+
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole): Removed redundant elements.
+        (WebInspector.QuickConsole.prototype.updateLayout):
+        Set max-height and stop calling _updateSize.
+        (WebInspector.QuickConsole.prototype._updateSize): Removed.
+
+2013-04-23  Timothy Hatcher  <timothy@apple.com>
+
+        Start using CodeMirror for the Console prompt.
+
+        This introduces a new class, ConsolePrompt.
+
+        Part of: <rdar://problem/13359916> Typing in the console is improved, but still much slower
+        than in Chrome / the WebKit inspector
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ConsolePrompt.css: Added.
+        (.console-prompt):
+        (.console-prompt > .CodeMirror):
+        (.console-prompt > .CodeMirror-scroll):
+        * UserInterface/ConsolePrompt.js: Added.
+        (WebInspector.ConsolePrompt):
+        (WebInspector.ConsolePrompt.prototype.get element):
+        (WebInspector.ConsolePrompt.prototype.get delegate):
+        (WebInspector.ConsolePrompt.prototype.set delegate):
+        (WebInspector.ConsolePrompt.prototype.get text):
+        (WebInspector.ConsolePrompt.prototype.set text):
+        (WebInspector.ConsolePrompt.prototype.get history):
+        (WebInspector.ConsolePrompt.prototype.set history):
+        (WebInspector.ConsolePrompt.prototype.get focused):
+        (WebInspector.ConsolePrompt.prototype.focus):
+        (WebInspector.ConsolePrompt.prototype.shown):
+        (WebInspector.ConsolePrompt.prototype._handlePreviousKey):
+        (WebInspector.ConsolePrompt.prototype._handleNextKey):
+        (WebInspector.ConsolePrompt.prototype._handleEnterKey):
+        (WebInspector.ConsolePrompt.prototype._restoreHistoryEntry):
+        (WebInspector.ConsolePrompt.prototype._historyEntryForCurrentText):
+        (WebInspector.ConsolePrompt.prototype._rememberCurrentTextInHistory):
+
+2013-04-23  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13681931> Debugger Popover should not dismiss when mouse is over the popover
+
+        We would always dismiss the popover when we'd hover more than 1 second
+        outside of the marked token in the text editor. This would also happen
+        if the mouse happened to be over the popover shown for the marked token.
+        We now track whether the mouse is over the presented popover and only
+        dismiss the popover when no longer hovering the marked text in case the
+        mouse is not over it.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/EventHandler.js: Added.
+        (WebInspector.EventHandler):
+        (WebInspector.EventHandler.prototype.handleEvent):
+        New utility to handle events in a way that makes it convenient to start
+        and stop tracking events in the scope of that object without using closures.
+        * UserInterface/Main.html:
+        Add the new EventHandler helper.
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.hidden):
+        (WebInspector.SourceCodeTextEditor.prototype._activeCallFrameDidChange):
+        (WebInspector.SourceCodeTextEditor.prototype._debuggerDidResume):
+        (WebInspector.SourceCodeTextEditor.prototype.hoveredTokenWasReleased):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopover):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForFunction.didGetDetails):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForFunction):
+        (WebInspector.SourceCodeTextEditor.prototype.willDismissPopover):
+        (WebInspector.SourceCodeTextEditor.prototype._dismissPopover):
+        (WebInspector.SourceCodeTextEditor.prototype._trackPopoverEvents):
+        (WebInspector.SourceCodeTextEditor.prototype._popoverMouseover):
+        (WebInspector.SourceCodeTextEditor.prototype._popoverMouseout):
+
+2013-04-22  Timothy Hatcher  <timothy@apple.com>
+
+        Teach CodeMirror about the CSS properties, keywords and colors we support in WebKit.
+
+        This keeps syntax highlighting in sync with code completion.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSCompletions.js:
+        (WebInspector.CSSCompletions.requestCSSNameCompletions.collectPropertyNameForCodeMirror):
+        (WebInspector.CSSCompletions.requestCSSNameCompletions.updateCodeMirrorCSSMode):
+        (WebInspector.CSSCompletions.requestCSSNameCompletions):
+
+2013-04-21  Timothy Hatcher  <timothy@apple.com>
+
+        Fix some selection issues in the Console.
+
+        Allow command-click on a single row selection to deselect that row the first time.
+        Before it was requiring two clicks -- because it would become selected twice --
+        before it would deselect.
+
+        Also make sure to clear focusable children after populating delayed results,
+        like a the DOM tree.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype.didAppendConsoleMessage):
+        (WebInspector.LogContentView.prototype._updateMessagesSelection):
+
+2013-04-21  Timothy Hatcher  <timothy@apple.com>
+
+        Allow the context menu and clicking on any link in the console.
+
+        There are other links in the console besides those with the console-message-url
+        style class that should work and get the normal context menu.
+
+        <rdar://problem/13702031> can't click on a "failed to load" url in console
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype._handleContextMenuEvent):
+        (WebInspector.LogContentView.prototype._targetInMessageCanBeSelected):
+        Check only for tag name, not class name.
+
+2013-04-19  Timothy Hatcher  <timothy@apple.com>
+
+        Allow both text and row selections in the Console.
+
+        Text selection switches to row selection if the text selection spans multiple rows.
+
+        <rdar://problem/13599610> REGRESSION: Can't select partial text of console output
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline.prototype._onmousedown):
+        Call event.stopPropagation() to prevent row selection in the console.
+
+        * UserInterface/LogContentView.css:
+        (.console-message-text > span): Added. Allow text selection.
+        (.console-message::before, .console-user-command::before, .javascript-prompt::before, .console-group-title::before):
+        (.console-group-title::before):
+        Use px instead of em to fix a positioning issue.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView):
+        (WebInspector.LogContentView.prototype._mousedown):
+        (WebInspector.LogContentView.prototype._targetInMessageCanBeSelected):
+        (WebInspector.LogContentView.prototype._mousemove):
+        Allow text selection that switches to row selection if the text selection spans multiple rows.
+        This involves delaying operations from mousedown until later in mousemove or mouseup.
+
+        * UserInterface/TreeOutline.js:
+        (TreeElement.treeElementMouseDown):
+        Call event.stopPropagation() to prevent row selection in the console.
+
+2013-04-20  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13701561> Improve SourceMap folder tree hierarchies
+
+        Implement a few improvements to folder tree hierarchies.
+
+          - if there is a sourceRoot in the sourceMap use that as the base for
+            subpaths, otherwise fallback to the sourceMappingURL (may change).
+          - if a source is an absolute URL on a different scheme / host, prefix
+            the subpath with a folder of the host name.
+          - flatten folder chains in the UI. Makes expanding folders easier.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceMap.js:
+        (WebInspector.SourceMap):
+        (WebInspector.SourceMap.prototype.get sourceMappingBasePathURLComponents):
+        (WebInspector.SourceMap.prototype._parseMap):
+        Save the sourceRoot. And return urlComponents for the basePath, instead of
+        just the path.
+
+        * UserInterface/Utilities.js:
+        * UserInterface/SourceMapResource.js:
+        (WebInspector.SourceMapResource.prototype.get sourceMapDisplaySubpath):
+        Determine the subpath to display in the UI for this source map resource.
+
+        * UserInterface/SourceCodeTreeElement.js:
+        (WebInspector.SourceCodeTreeElement.prototype.onpopulate.combineFolderChain):
+        (WebInspector.SourceCodeTreeElement.prototype.onpopulate.findAndCombineFolderChains):
+        (WebInspector.SourceCodeTreeElement.prototype.onpopulate):
+        Flatten folder chains.
+
+2013-04-20  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13701561> Improve SourceMap folder tree hierarchies
+
+        Correctly resolve dots when determining absolute URLs. Previously I had
+        left in extra "../s", however they should have been removed. And
+        absoluteURL should handle resolving any dots in the partialURL.
+
+        This fixes ASSERTs in Debug WebKit builds where we were calling
+        loadResourceSynchronously with a URL that was expected to be
+        absolute and wasn't.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceMap.js:
+        * UserInterface/Utilities.js:
+
+2013-04-20  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13701561> Improve SourceMap folder tree hierarchies
+
+        Remove the old combine folder chain code. It will be easier to follow
+        the new code with the old code gone.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTreeElement.js:
+        (WebInspector.SourceCodeTreeElement.prototype.onpopulate.combineFolderChain):
+
+2013-04-19  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13654793> Source Maps: Support for Stylesheets (less / sass / scss) with SourceMaps
+
+        The Inspector protocol now tells us when a CSS response contains a
+        sourceMappingURL for a Resource. If we are given a source map URL,
+        download the source map and associate it with the Resource.
+
+        Give Stylesheet SourceMapResources (like sass stylesheets) a CSS
+        clipping icon instead of using the generic clipping icon.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWasServedFromMemoryCache):
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidFinishLoading):
+        (WebInspector.FrameResourceManager.prototype._createResource):
+        If there is a sourceMapURL, download it and associate it with the Resource.
+
+        * UserInterface/Images/ClippingCSS.png: Added.
+        * UserInterface/Images/ClippingCSS@2x.png: Added.
+        * UserInterface/ResourceIcons.css:
+        (.source-map-resource.resource-icon.resource-type-stylesheet .icon):
+        CSS Clipping icon for stylesheet source map resources (like less / sass / scss).
+
+        * UserInterface/InspectorBackendCommands.js:
+        * UserInterface/NetworkObserver.js:
+        (WebInspector.NetworkObserver.prototype.loadingFinished):
+        Handle and pass on the new "extraResourceInfo" parameter.
+
+2013-04-19  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13654793> Source Maps: Support for Stylesheets (less / sass / scss) with SourceMaps
+
+        Follow OpenSource and merge PositionSourceMap into SourceMap.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceMap.js:
+        (WebInspector.SourceMap):
+        (WebInspector.SourceMap.prototype.findEntry):
+        (WebInspector.SourceMap.prototype.findEntryReversed):
+        (WebInspector.SourceMap.prototype._parseMap):
+        * UserInterface/SourceMapManager.js:
+        (WebInspector.SourceMapManager.prototype._loadAndParseSourceMap):
+
+2013-04-18  Timothy Hatcher  <timothy@apple.com>
+
+        Make sure to call shown on the current Style sub-panel when the sidebar visibility changes.
+
+        <rdar://problem/13604148> Content jumps in details sidebar when switching to styles pane
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.visibilityDidChange):
+        Call shown on the selected panel.
+
+2013-04-18  Timothy Hatcher  <timothy@apple.com>
+
+        Use CSSAgent.setStyleText for Style Attribute editing too.
+
+        <rdar://problem/13630483> Style Attribute editing in the Style details sidebar does not work on shadow content (114442)
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.changeStyleText):
+
+2013-04-18  Timothy Hatcher  <timothy@apple.com>
+
+        Switch from X-WebKit-CSP to Content-Security-Policy for the CSP header.
+
+        Also stop allowing 'unsafe-eval' since the one place we used eval() is dead code.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/InspectorBackend.js:
+        (InspectorBackendClass.prototype.loadFromJSONIfNeeded): Removed. Not used by Safari.
+        * UserInterface/Main.html:
+
+2013-04-18  Timothy Hatcher  <timothy@apple.com>
+
+        Make sure to always include the New Rule button in the Styles sidebar.
+
+        <rdar://problem/13683941> Can't add a new rule unless there is a matched rule already
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/RulesStyleDetailsPanel.js:
+        (WebInspector.RulesStyleDetailsPanel.prototype.refresh.addNewRuleButton): Added.
+        (WebInspector.RulesStyleDetailsPanel.prototype.refresh): Call addNewRuleButton if
+        addedNewRuleButton isn't true after the end of the loop.
+
+2013-04-18  Timothy Hatcher  <timothy@apple.com>
+
+        Remove workaround for <rdar://problem/13337211> now that it is fixed.
+
+        Removing this ends up fixing:
+        <rdar://problem/13612942> REGRESSION: Style sidebar does not update immediately with node change
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.refresh):
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedMatchedStyles):
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedInlineStyles):
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedComputedStyle):
+        Removed the repeat refresh polling logic.
+
+2013-04-18  Timothy Hatcher  <timothy@apple.com>
+
+        Properly handle !important properties from inherited rules.
+
+        <rdar://problem/13683742> Important properties from inherited rules
+        mistakenly strikeout the effective property
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype._markOverriddenProperties):
+        Mark properties as overridden from inherited elements if there
+        is already an effective property from another element.
+
+2013-04-18  Timothy Hatcher  <timothy@apple.com>
+
+        Adopt CSSAgent.setStyleText added in https://webkit.org/b/109340.
+
+        <rdar://problem/13337211> Editing styles on daringfireball.net interrupts autocompletion and flashes
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.styleChanged): Use CSSAgent.setStyleText.
+        * UserInterface/InspectorBackendCommands.js: Updated.
+
+2013-04-18  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13681577> Unresolved breakpoint in SourceMapResource when reloading page
+
+        The ContentBrowser no longer contains ResourceContentViews directly, it
+        has ResourceClusterContentViews. Update the closeAll prototype call on
+        page navigations to make sure resource views get closed properly.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ResourceSidebarPanel.js:
+
+2013-04-18  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13681487> Missing heirarchical path components selecting breakpoints in source map resources in Debugger sidebar
+
+        Force onpopulate to create the SourceMapTreeElements immediately,
+        instead of lazily waiting for the user to expand the Resource in
+        the Resources sidebar. Then, when we look up the TreeElement to
+        get the hierarchical path components it will be found.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTreeElement.js:
+        (WebInspector.SourceCodeTreeElement.prototype._updateSourceCode):
+        (WebInspector.SourceCodeTreeElement.prototype._sourceMapAdded):
+
+2013-04-17  Joseph Pecoraro  <pecoraro@apple.com>
+
+        ERROR: TypeError: 'undefined' is not an object (evaluating 'currentContentView.handleCopyEvent.bind')
+
+        Right clicking in an editor was producing an error. Check if both
+        the content view and the handleCopyEvent handler exist.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ClusterContentView.js:
+        (WebInspector.ClusterContentView.prototype.get handleCopyEvent):
+
+2013-04-15  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an exception that happens when clicking source links multiple times.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer.prototype.showContentView):
+        Return currentView if it is already showing. This matches the case where we return the view
+        if it wasn't already showing. Change other returns to return null instead of undefined.
+
+        * UserInterface/ResourceClusterContentView.js:
+        (WebInspector.ResourceClusterContentView.prototype._showContentViewForIdentifier):
+        Add an assert that we have a content view. This wasn't needed but I used to to pinpoint the bug.
+
+2013-04-15  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13644426> Support %c - styled console messages - http://adamschwartz.co/log/
+
+        Merge OpenSource r130941, r131448, r134166, r134202.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ConsoleMessageImpl.js:
+        (WebInspector.ConsoleMessageImpl.prototype.styleFormatter):
+        (WebInspector.ConsoleMessageImpl.prototype.isWhitelistedProperty):
+        (WebInspector.ConsoleMessageImpl.prototype.append):
+        (WebInspector.ConsoleMessageImpl.prototype._formatWithSubstitutionString):
+
+2013-04-15  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13658744> Improve %f, %d, %i formatters for numbers and non-numeric input
+
+        Developer tools differ subtly in this area. I like Firefox's behavior
+        the most, calling parseFloat or parseInt on the argument. We now match
+        that behavior.
+
+        Chrome prints NaN for anything but primitive numbers. Which causes it
+        to print NaN for Infinity and "1.5". Firebug just prints out everything
+        like "%s", like we used to before this patch.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ConsoleMessageImpl.js:
+        (WebInspector.ConsoleMessageImpl.prototype.stringFormatter):
+        (WebInspector.ConsoleMessageImpl.prototype.floatFormatter):
+        (WebInspector.ConsoleMessageImpl.prototype.integerFormatter):
+
+2013-04-15  Timothy Hatcher  <timothy@apple.com>
+
+        Don't call clearHistory or markClean in TextEditor after the first time.
+
+        This allows undo/redo in the content browser after editing in style sidebar.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor): Set _initialStringNotSet.
+        (WebInspector.TextEditor.prototype.set string.update):
+        Call clearHistory and markClean only if _initialStringNotSet is set.
+        And delete _initialStringNotSet afterwards.
+
+2013-04-14  Timothy Hatcher  <timothy@apple.com>
+
+        Default dockSide to "undocked" if it isn't specified in the query parameters.
+
+        This hides the dock buttons again in the iOS Inspector.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+
+2013-04-14  Timothy Hatcher  <timothy@apple.com>
+
+        Don't allow Command-Z to clear the editor.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.set string.update):
+        Call clearHistory and markClean.
+
+2013-04-13  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an exception when inspecting a request that has a "Content-type"
+        header instead of "Content-Type".
+
+        All HTTP headers are case-insensitive, so we need to handle that.
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.get requestDataContentType):
+        (WebInspector.Resource.prototype.get encodedSize):
+        (WebInspector.Resource.prototype.get compressed):
+        (WebInspector.Resource.prototype.updateForResponse):
+        (WebInspector.Resource.prototype.increaseSize):
+        Use valueForCaseInsensitiveKey to fetch headers.
+
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshRequestDataSection):
+        Set requestDataContentType to "" if it is null so the split() that comes later works.
+
+        * UserInterface/Utilities.js:
+        (Object.prototype.valueForCaseInsensitiveKey): Added.
+
+2013-04-13  Timothy Hatcher  <timothy@apple.com>
+
+        Rename "Post Data" to "Request Data" and show the data if it exists,
+        not just for the "POST" method.
+
+        Reviewed by Antoine Quint.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype._addNewResourceToFrame):
+
+        * UserInterface/Resource.js:
+        (WebInspector.Resource):
+        (WebInspector.Resource.prototype.get requestData):
+        (WebInspector.Resource.prototype.get requestDataContentType):
+
+        * UserInterface/ResourceClusterContentView.js:
+        (WebInspector.ResourceClusterContentView.prototype.get requestContentView):
+        (WebInspector.ResourceClusterContentView.prototype._canShowRequestContentView):
+
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype.refresh):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._goToRequestDataClicked):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshRequestDataSection):
+        Remove a workaround for file data that is no longer needed.
+
+2013-04-12  Timothy Hatcher  <timothy@apple.com>
+
+        Prevent a double layout in the content browser navigation bar when switching views.
+
+        By default inserted navigation items schedule a layout soon, which prevents multiple consecutive layouts
+        when inserting many navigation items. Forcing a layout after inserting navigation items causes the
+        items to be displayed in their final positions and sizes right away.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser.prototype._contentViewSelectionPathComponentDidChange):
+        (WebInspector.ContentBrowser.prototype._currentContentViewDidChange):
+        (WebInspector.ContentBrowser.prototype._contentViewNavigationItemsDidChange):
+        Call updateLayout after changing the navigation bar.
+
+        * UserInterface/HierarchicalPathNavigationItem.js:
+        (WebInspector.HierarchicalPathNavigationItem.prototype.set components):
+        Use updateLayoutSoon to coalesce multiple changes.
+
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype.updateLayout): Clear the timeout.
+
+2013-04-12  Timothy Hatcher  <timothy@apple.com>
+
+        Fix the layout of the selector arrows when components start to collapse.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/HierarchicalPathComponent.css:
+        (.hierarchical-path-component.show-selector-arrows): Added.
+        (.hierarchical-path:not(.always-show-last-path-component-separator) > .hierarchical-path-component.show-selector-arrows:last-child): Added.
+        Specify correct min-widths that include space for the selector arrows.
+
+        * UserInterface/HierarchicalPathComponent.js:
+        (WebInspector.HierarchicalPathComponent): Add the show-selector-arrows class name to the element.
+
+2013-04-12  Timothy Hatcher  <timothy@apple.com>
+
+        Add the ability to see POST data that isn't in the application/x-www-form-urlencoded format.
+
+        <rdar://problem/12667485> REGRESSION (Safari 6): Missing POST request view for non-urlencoded data
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+
+        * UserInterface/ClusterContentView.js:
+        (WebInspector.ClusterContentView.prototype.get handleCopyEvent): Added.
+        Handles passing through the current content view's handleCopyEvent function.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView):
+        (WebInspector.ContentView.isViewable):
+        Added TextContentView.
+
+        * UserInterface/DetailsSection.css:
+        (.details-section > .content > .group > .row.simple > .value .go-to-arrow): Added.
+
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView.createPathComponent): Pass true to get double arrows.
+        (WebInspector.FrameContentView.prototype.showResource): Added.
+        (WebInspector.FrameContentView.prototype.showSourceCode): Return the view. Use showResource.
+        (WebInspector.FrameContentView.prototype.showDOMTree): Return the view.
+
+        * UserInterface/Images/Request.pdf: Added.
+        * UserInterface/Images/Response.pdf: Added.
+
+        * UserInterface/Main.html: Included new files.
+
+        * UserInterface/PathComponentIcons.css:
+        (.request-icon .icon): Added.
+        (.response-icon .icon): Added.
+
+        * UserInterface/ResourceClusterContentView.js: Added.
+        (WebInspector.ResourceClusterContentView.createPathComponent):
+        (WebInspector.ResourceClusterContentView):
+        (WebInspector.ResourceClusterContentView.prototype.get resource):
+        (WebInspector.ResourceClusterContentView.prototype.get responseContentView):
+        (WebInspector.ResourceClusterContentView.prototype.get requestContentView):
+        (WebInspector.ResourceClusterContentView.prototype.get selectionPathComponents):
+        (WebInspector.ResourceClusterContentView.prototype.shown):
+        (WebInspector.ResourceClusterContentView.prototype.closed):
+        (WebInspector.ResourceClusterContentView.prototype.showRequest):
+        (WebInspector.ResourceClusterContentView.prototype.showResponse):
+        (WebInspector.ResourceClusterContentView.prototype._canShowRequestContentView):
+        (WebInspector.ResourceClusterContentView.prototype._pathComponentForContentView):
+        (WebInspector.ResourceClusterContentView.prototype._identifierForContentView):
+        (WebInspector.ResourceClusterContentView.prototype._showContentViewForIdentifier):
+        (WebInspector.ResourceClusterContentView.prototype._pathComponentSelected):
+        (WebInspector.ResourceClusterContentView.prototype._resourceTypeDidChange):
+
+        * UserInterface/ResourceContentView.js:
+        (WebInspector.ResourceContentView):
+        Removed code that handled resource type changes and concrete subclasses.
+        That is now handled by ResourceClusterContentView.
+
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._goToPostDataClicked): Added.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshPostDataSection):
+        Renamed Size to Data in the Post Data section. Added a go-to arrow.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.cookieForContentView): Handle ResourceClusterContentView.
+        (WebInspector.ResourceSidebarPanel.prototype.showSourceCode): Ditto.
+        (WebInspector.ResourceSidebarPanel.prototype.showResourceRequest): Added.
+
+        * UserInterface/TextContentView.css: Added.
+        (.content-view.text > .text-editor):
+
+        * UserInterface/TextContentView.js: Added.
+        (WebInspector.TextContentView):
+        (WebInspector.TextContentView.prototype.get textEditor):
+        (WebInspector.TextContentView.prototype.get navigationItems):
+        (WebInspector.TextContentView.prototype.revealLine):
+        (WebInspector.TextContentView.prototype.shown):
+        (WebInspector.TextContentView.prototype.hidden):
+        (WebInspector.TextContentView.prototype.closed):
+        (WebInspector.TextContentView.prototype.get supportsSearch):
+        (WebInspector.TextContentView.prototype.get numberOfSearchResults):
+        (WebInspector.TextContentView.prototype.get hasPerformedSearch):
+        (WebInspector.TextContentView.prototype.set automaticallyRevealFirstSearchResult):
+        (WebInspector.TextContentView.prototype.performSearch):
+        (WebInspector.TextContentView.prototype.searchCleared):
+        (WebInspector.TextContentView.prototype.revealPreviousSearchResult):
+        (WebInspector.TextContentView.prototype.revealNextSearchResult):
+        (WebInspector.TextContentView.prototype.updateLayout):
+        (WebInspector.TextContentView.prototype._togglePrettyPrint):
+        (WebInspector.TextContentView.prototype._textEditorFormattingDidChange):
+        (WebInspector.TextContentView.prototype._numberOfSearchResultsDidChange):
+
+2013-04-11  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13630859> Remote Web Inspector doesn't work for some sites (114447)
+
+        RWIInspectorFrontendHost always returns undefined for IFH.loadResourceSynchronously.
+        Gracefully handle that in our frontend while we either implement it, or create
+        a new Inspector protocol method to load resources through the backend.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceMapManager.js:
+        (WebInspector.SourceMapManager.prototype._loadAndParseSourceMap):
+        * UserInterface/SourceMapResource.js:
+        (WebInspector.SourceMapResource.prototype._requestResourceAsynchronously):
+
+2013-04-11  Timothy Hatcher  <timothy@apple.com>
+
+        Force CodeMirror editors to be a stacking context to prevent creating many layers
+        inside when another element overlaps.
+
+        <rdar://problem/13608839> REGRESSION: Text in Web Inspector Source Code
+        view looks heavy (double rendered?)
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CodeMirrorOverrides.css:
+        (.CodeMirror): Added. Set z-index: 0. Position is already set in codemirror.css.
+
+2013-04-10  Timothy Hatcher  <timothy@apple.com>
+
+        Make the Web Inspector database code tolerant of quota exceptions.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ImageUtilities.js:
+        If we can't open the database it isn't the end of the world, we just will
+        always generate the images and not cache them for better load times.
+
+2013-04-10  Timothy Hatcher  <timothy@apple.com>
+
+        Drop the expected usage down to 5 MB to match the values in RWI and WK1.
+
+        This fixes an exception on load for first time users.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ImageUtilities.js:
+
+2013-04-10  Timothy Hatcher  <timothy@apple.com>
+
+        Update the Style Attribute in the sidebar when the DOM attribute changes.
+
+        Also only update a style rule for external changes if the editor isn't focused.
+        This prevents external changes from fighting with user edits.
+
+        <rdar://problem/13619049>
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._commitChanges):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._editorBlured): Added.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._propertiesChanged):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent):
+        Simplify when we reset the content to only do it when not focused.
+
+        * UserInterface/DOMTreeManager.js:
+        (WebInspector.DOMTreeManager.prototype._loadNodeAttributes):
+        Fire WebInspector.DOMNode.Event.AttributeModified. Remove StyleInvalidated event.
+
+2013-04-10  Timothy Hatcher  <timothy@apple.com>
+
+        Make DOMNodeStyles mark as needing refresh in all cases when a stylesheet changes.
+
+        The stylesheet change might be a rule that we didn't match yet, so checking existing matched
+        rules for the stylesheet will not trigger a refresh. This code was added back when refresh was
+        not as smart, so this is the correct thing to do now.
+
+        <rdar://problem/13387359> Undoing selector change does not show selector affecting the page anywhere
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype._styleSheetContentDidChange):
+        Simplify by always calling _markAsNeedsRefresh.
+
+2013-04-09  Timothy Hatcher  <timothy@apple.com>
+
+        Indent invalid style properties, not just blank lines.
+
+        Also strike out text that is not recognized as a property or comment.
+
+        This will now properly indent and strike out these two error cases:
+
+            padding; 0;
+            *line-height: 1;
+
+        <rdar://problem/13608848> Checkbox missing for a style property
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.css:
+        Strike out spans that are not comments or marked properties.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._contentChanged):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._updateTextMarkers):
+        Call _markLinesWithCheckboxPlaceholder so the placeholders are added if needed for
+        lines htat didn't have properties.
+
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createTextMarkerForPropertyIfNeeded):
+        Remove use of __checkboxMarker, it is not set anymore.
+
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._markLinesWithCheckboxPlaceholder):
+        Renamed from _markBlankLinesWithCheckboxPlaceholder and taught how to mark only lines that
+        need marked, and ignores the rest.
+
+2013-04-08  Timothy Hatcher  <timothy@apple.com>
+
+        Avoid a console error when viewing Anonymous scripts.
+
+        Reviewed by Geoffrey Garen.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.cookieForContentView):
+
+2013-04-08  Timothy Hatcher  <timothy@apple.com>
+
+        Make the Scope Variables details sidebar work when evaluating in the Console.
+
+        <rdar://problem/12831236> REGRESSION (6.0.3-Curie): Scope Chain shows nothing while debugging
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ScopeChainDetailsSidebarPanel.js:
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh.delayedWork): Clear the timeout.
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh): Set a timeout.
+
+2013-04-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Copy PrettyPrinter updates into UserInterface to enact the changes.
+
+        Unreviewed, just moving reviewed code between directories.
+
+        * UserInterface/CodeMirrorFormatters.js:
+        * UserInterface/External/CodeMirror/javascript.js:
+        * UserInterface/Formatter.js:
+        (Formatter.prototype._handleToken):
+
+2013-04-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13593779> Pretty printer should line "case" and "default" with "switch"
+
+        Dedent before case/default and indent after, so it lines up with the switch.
+
+        Reviewed by Timothy Hatcher.
+
+        * Tools/PrettyPrinting/CodeMirrorFormatters.js:
+        * Tools/PrettyPrinting/index.html:
+        * Tools/PrettyPrinting/js-tests/switch-case-default-expected.js: Added.
+        * Tools/PrettyPrinting/js-tests/switch-case-default.js: Added.
+
+2013-04-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13584713> Pretty printer should gracefully handle single line if/else/for/do/while blocks
+
+        This adds indentation support for single statement blocks. This had a
+        pretty big performance cost pretty printing jquery.min.js (20ms), but
+        I think it is worth it. In the inspector itself, I did not see pretty
+        printing actually taking longer. I'll continue to look at performance.
+
+        Reviewed by Timothy Hatcher.
+
+        * Tools/PrettyPrinting/Formatter.js:
+        (Formatter.prototype._handleToken):
+        Let the Code modify state before / after the token is consumed.
+        Let the formatters specify multiple dedents at once.
+
+        * Tools/PrettyPrinting/FormatterDebug.js:
+        (Formatter.prototype.debug):
+        In JavaScript print out the previous lexical state.
+
+        * Tools/PrettyPrinting/CodeMirrorFormatters.js:
+        Pretty print a good chunk of JavaScript single statement blocks and
+        if/else chains.
+
+        * Tools/PrettyPrinting/javascript.js:
+        Update to "near" trunk CodeMirror JavaScript. The most recent commit
+        causes issues.
+
+        * Tools/PrettyPrinting/index.html:
+        * Tools/PrettyPrinting/js-tests/block-comment-expected.js: Added.
+        * Tools/PrettyPrinting/js-tests/block-comment.js: Added.
+        * Tools/PrettyPrinting/js-tests/single-statement-blocks-expected.js: Added.
+        * Tools/PrettyPrinting/js-tests/single-statement-blocks.js: Added.
+        Added some micro-tests for recent pretty printing changes.
+
+2013-04-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Add a little test running harness to the PrettyPrinter tool. No tests yet.
+
+        Reviewed by Timothy Hatcher.
+
+        * Tools/PrettyPrinting/index.html:
+
+2013-04-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Update the PrettyPrinting Tool to match UserInterface.
+
+        Unreviewed tools change.
+
+        * Tools/PrettyPrinting/codemirror.js:
+        (window.CodeMirror):
+        * Tools/PrettyPrinting/javascript.js:
+
+2013-04-08  Timothy Hatcher  <timothy@apple.com>
+
+        Enable completions for resource content views.
+
+        <rdar://problem/13598062>
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor): Hook up a WebInspector.CodeMirrorCompletionController.
+
+2013-04-08  Timothy Hatcher  <timothy@apple.com>
+
+        Delay computing suggestions for 250ms to keep from slowing down typing.
+
+        <rdar://problem/13598014> CSS completions can slow down typing
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController.prototype.hideCompletions):
+        (WebInspector.CodeMirrorCompletionController.prototype._completeAtCurrentPosition):
+        Clear the typing delay timeout.
+
+        (WebInspector.CodeMirrorCompletionController.prototype._handleChange):
+        Set _ignoreNextCursorActivity so hideCompletions isn't called.
+
+2013-04-08  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13597681> Layers sidebar panel may flash popovers with stale content
+
+        We only present the popover when the data grid node hasn't changed
+        between the time we called into the backend and the time the callback
+        is called.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel.prototype._showPopoverForSelectedNode):
+
+2013-04-08  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/12892280> Layer tree panel data grid should refresh less frequently when layers for nodes are recreated
+
+        Provide a custom DataGrid subclass for the Layers panel where we
+        use CSS transforms to update the position of data grid nodes
+        instead of relying on DOM order so that we can avoid DOM thrashing
+        and retain scroll position for rapidly changing content. We also
+        set the width of "Paints" and "Memory" columns for a nicely
+        consistent formatting.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DetailsSectionDataGridRow.js:
+        (WebInspector.DetailsSectionDataGridRow.prototype.set dataGrid):
+        Perform a quick return in case the new data grid is the same
+        as the previous in order to remove the possibility of appending
+        the data grid's element if it was already the current data grid.
+
+        * UserInterface/LayerTreeDataGrid.js: Added.
+        (WebInspector.LayerTreeDataGrid):
+        Initialize the DataGrid with a custom set of columns and set the
+        width of the "Paints" and "Memory" columns.
+
+        (WebInspector.LayerTreeDataGrid.prototype.insertChild):
+        (WebInspector.LayerTreeDataGrid.prototype.removeChild):
+        Override these DataGrid methods to perform our custom layout of
+        cells when a child is added or removed.
+
+        (WebInspector.LayerTreeDataGrid.prototype.setChildren):
+        Public API used to set the list of children data grid nodes for
+        this data grid. We compare this new list to the previous list
+        and only remove / add the nodes that need to be, avoiding having
+        to remove the entire set of children to update the nodes list.
+
+        (WebInspector.LayerTreeDataGrid.prototype._updateChildren):
+        Position the children data grid nodes using CSS transforms instead
+        of DOM order. We also manually set the sibling relationship there
+        since it can no longer be accomplished in insertChild() or
+        removeChild() calls.
+
+        (WebInspector.LayerTreeDataGrid.prototype._recalculateSiblings):
+        Make this method a no-op since we manually perform the same task in
+        _updateChildren().
+
+        * UserInterface/LayerTreeDataGridNode.js:
+        (WebInspector.LayerTreeDataGridNode):
+        Add a new _outlets private ivar we use to stash the DOM elements
+        we'll need to update when the node's data changes.
+
+        (WebInspector.LayerTreeDataGridNode.prototype.createCells):
+        Override this DataGridNode API in order to add a flag that cells
+        were created which we'll use as a flag to allow the update of a
+        cell's data in the data setter.
+
+        (WebInspector.LayerTreeDataGridNode.prototype.createCellContent):
+        (WebInspector.LayerTreeDataGridNode.prototype.set layer):
+        (WebInspector.LayerTreeDataGridNode.prototype.get data):
+        (WebInspector.LayerTreeDataGridNode.prototype.set data):
+        Custom data setter as the default version would completely trash
+        the DOM tree and replace it with a whole new set of elements to
+        update the data. We choose a more incremental approach here since
+        individual fields for this node may change (paint count being the
+        most likely).
+
+        (WebInspector.LayerTreeDataGridNode.prototype._makeOutlet):
+        (WebInspector.LayerTreeDataGridNode.prototype._makeNameCell):
+        Prepare the DOM elements used to present the node's data. Many
+        elements for the name cell are dynamically added and removed in
+        _updateNameCellData().
+
+        (WebInspector.LayerTreeDataGridNode.prototype._updateCell):
+        (WebInspector.LayerTreeDataGridNode.prototype._updateNameCellData):
+        Update the information on outlets or their very availability based
+        on the current data and represented layer.
+
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel.prototype.shown):
+        (WebInspector.LayerTreeSidebarPanel.prototype.hidden):
+        Remove the auto-sizing of data grid columns as we're not setting them
+        to be constant for a more consistent look.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype._buildDataGridSection):
+        Instantiate our new LayerTreeDataGrid class.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype._sortDataGrid):
+        Use the custom setChildren() API on LayerTreeDataGrid to change the
+        children order.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype._updateDataGrid):
+        * UserInterface/Main.html:
+        Add LayerTreeDataGrid.js.
+
+2013-04-07  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13584696> Pretty printer should preserve whitespace in multi-line comments
+
+        Update CodeMirror to trunk to get a few recent fixes.
+
+        This update includes project wide tailing whitespace and tab removal
+        which is why so many files were changed.
+
+        Rubber-stamped by Timothy Hatcher.
+
+        * UserInterface/External/CodeMirror/clojure.js:
+        * UserInterface/External/CodeMirror/codemirror.js:
+        * UserInterface/External/CodeMirror/coffeescript.js:
+        * UserInterface/External/CodeMirror/javascript.js:
+        * UserInterface/External/CodeMirror/less.js:
+        * UserInterface/External/CodeMirror/matchbrackets.js:
+        * UserInterface/External/CodeMirror/overlay.js:
+        * UserInterface/External/CodeMirror/sql.js:
+        * UserInterface/External/CodeMirror/xml.js:
+
+2013-04-07  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13043550> REGRESSION: Scrollbar renders behind position: sticky elements in the Web Inspector
+
+        Give the Sidebar Panels a stacking context to work around the issue.
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/Sidebar.css:
+        (.sidebar > .panel):
+
+2013-04-05  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Add a small script to update the Tools/PrettyPrinting directory.
+
+        My workflow for fixing a PrettyPrinting bug is to first update the Tools
+        directory with exact replicas of files in UserInterface. Make changes
+        and test with the debug page, and then transfer the files back to the
+        inspector. This script helps automate those steps.
+
+        Reviewed by Cody Krieger.
+
+        * Scripts/update-codemirror-resources.rb:
+        * Scripts/update-pretty-printer.rb: Added.
+
+2013-04-05  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Update the PrettyPrinting Tool with a few Debug changes.
+
+        Unreviewed tools change.
+
+        * Tools/PrettyPrinting/index.html:
+        * Tools/PrettyPrinting/FormatterDebug.js:
+        (.pad):
+        (.debugToken):
+        (Formatter.prototype.debug):
+        Output null, undefined, or 'string' for tokens.
+        Previously null and undefined output as '-'.
+
+2013-04-05  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Update the PrettyPrinting Tool with CodeMirror CSS changes.
+
+        Unreviewed tools change.
+
+        * Tools/PrettyPrinting/codemirror-additions.css: Added.
+        * Tools/PrettyPrinting/codemirror.css:
+        * Tools/PrettyPrinting/index.html:
+
+2013-04-05  Timothy Hatcher  <timothy@apple.com>
+
+        Tweak Web Inspector's image cache database.
+
+        We only want to keep the image data around for the first use. These
+        images are typically only used in one place. This keeps performance
+        good during page load and frees memory that typically won't be reused.
+
+        Also add transaction error logging and a better expected database size.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ImageUtilities.js:
+        (_logSQLTransactionError):
+        (_prefetchCachedImagesAndUpdate):
+        (.restoreImageData):
+        (restoreImageFromStorage):
+
+2013-04-05  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Update the PrettyPrinting Tool with new formatter changes.
+
+        Also some tweaks so that the Tools files are identical to the ones in
+        the actual Web Inspector (UserInterface).
+
+        Unreviewed tools change.
+
+        * Tools/PrettyPrinting/CodeMirrorFormatters.js:
+        * Tools/PrettyPrinting/Formatter.js:
+        (Formatter.prototype.format):
+        (Formatter.prototype._handleToken):
+        (Formatter.prototype._handleEmptyLine):
+        * Tools/PrettyPrinting/FormatterContentBuilder.js:
+        (FormatterContentBuilder.prototype.appendNewline):
+        (FormatterContentBuilder.prototype.appendMultipleNewlines):
+        (FormatterContentBuilder.prototype.removeLastNewline):
+        (FormatterContentBuilder.prototype._addFormattedLineEnding):
+        * Tools/PrettyPrinting/FormatterDebug.js: Added.
+        (Formatter.prototype.debug):
+        * Tools/PrettyPrinting/Utilities.js: Added.
+        * Tools/PrettyPrinting/codemirror.js:
+        * Tools/PrettyPrinting/css.js:
+        * Tools/PrettyPrinting/index.html:
+        * Tools/PrettyPrinting/javascript.js:
+
+2013-04-05  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Win back performance in pretty-printing large files
+
+        With preserving newlines we lost a few ms. This wins back at
+        least the same amount and a bit more on JavaScript (2-3ms).
+
+        Checking if the current token is a comment is a very common
+        in our pretty printers. Only perform the work once, and pass
+        the result around as needed to prevent duplicated work.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CodeMirrorFormatters.js:
+        * UserInterface/Formatter.js:
+        (Formatter.prototype._handleToken):
+
+2013-04-05  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13582023> Web Inspector removes blank lines in my JS when pretty printing
+
+        When pretty-printing already pretty code we did a poor job of preserving
+        the nice extra whitespace the original code had. This preserves the empty
+        (whitespace only) lines in the original code.
+
+        Because our pretty printer sometimes adds multiple newlines, like in CSS
+        after each rule, we don't need to add yet another newline to just preserve
+        a blank line from the original content. Handle that gracefully.
+
+        This introduces a minor performance regression (1-3ms in large content)
+        but I think it is well worth it considering the results. Much prettier!
+
+        JavaScript Test:
+
+            Foo.prototype.f = function() {
+              // ...
+            }
+
+            Foo.prototype.g = function() {
+              // ...
+            }
+
+        CSS Test:
+
+            /* comment one */
+          
+            /* comment two */
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/Formatter.js:
+        (Formatter.prototype.format):
+        (Formatter.prototype._handleToken):
+        (Formatter.prototype._handleEmptyLine):
+        Call handleEmptyLine for whitespace only lines, and force
+        append a newline unless the builder just had multiple.
+
+        * UserInterface/FormatterContentBuilder.js:
+        (FormatterContentBuilder):
+        (FormatterContentBuilder.prototype.appendNewline):
+        (FormatterContentBuilder.prototype.appendMultipleNewlines):
+        Helper for appending multiple newlines, to set some extra state.
+
+2013-04-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13583718> Pretty printing should not move comments to the end of the previous line
+
+        Previously we removed newlines before comments if they were after a
+        semicolon. This was intended to keep comments on the same line as code.
+        This could backfire if the comment was really on actually on the next
+        line. So be more specific, and don't remove the previous newline if
+        the comment is the first token on a line.
+
+        JavaScript Test:
+
+            function() {
+              var a;
+              // test
+            }
+
+        CSS Test:
+
+            a {
+              color: red;
+              /* test */
+            }
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CodeMirrorFormatters.js:
+        * UserInterface/Formatter.js:
+        (Formatter.prototype.format):
+        (Formatter.prototype._handleToken):
+
+2013-04-05  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13472300> Layers in sidebar panel should use iconography
+
+        Refreshing the look of the Layers sidebar panel data grid nodes
+        to use icons to identify the kind of layers presented (element,
+        pseudo-element or reflection). Also, we mark the pseudo-element
+        part of the CSS selector by displaying it in lighter text as well
+        as showing a " Ñ Reflection" extra label in the case of reflections.
+        Finally, we also trim the text in the CSS selector label and shorten
+        it to make room for the go-to arrow button should it be visible
+        when hovering the data grid node.
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Images/PseudoElement.pdf: Added.
+        * UserInterface/Images/Reflection.pdf: Added.
+        * UserInterface/LayerTreeDataGridNode.js:
+        (WebInspector.LayerTreeDataGridNode.prototype.createCellContent):
+        (WebInspector.LayerTreeDataGridNode.prototype.set layer):
+        (WebInspector.LayerTreeDataGridNode.prototype._createNodeCellContent):
+        (WebInspector.LayerTreeDataGridNode.prototype._goToArrowWasClicked):
+        * UserInterface/LayerTreeSidebarPanel.css:
+        (.layer-tree.panel .data-grid table.data):
+        (.layer-tree.panel .data-container tr):
+        (.layer-tree.panel .data-container td > div):
+        (.layer-tree.panel .data-container .name-column):
+        (.layer-tree.panel .data-container .name-column .icon):
+        (.layer-tree.panel .data-container tr.reflection .name-column .icon):
+        (.layer-tree.panel .data-container tr.pseudo-element .name-column .icon):
+        (.layer-tree.panel .data-container .name-column .label):
+        (.layer-tree.panel .data-container tr:hover .name-column .label):
+        (.layer-tree.panel .data-container .name-column .reflection):
+        (.layer-tree.panel .data-container tr.selected .name-column .reflection):
+        (.layer-tree.panel .data-container .go-to-arrow):
+        (.layer-tree.panel .data-container tr:hover .go-to-arrow):
+
+2013-04-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13573165> Pressing Esc in a readOnly editor should still focus the quick console
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/EditingSupport.js:
+        (WebInspector.isEventTargetAnEditableField):
+
+2013-04-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13580154> DOMTreeOutline.js:504: JS ERROR: TypeError: 'true' is not a function (evaluating 'this._contextMenuCallback(contextMenu, node)'
+
+        DOMTreeOutline constructors were passing 3 booleans. In the case of
+        outlines in the Console it was passing "true" expecting that to provide
+        a "Reveal Element" context menu item, but that mis-matched the
+        constructor. Fix the error, and add back the context menu item.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline):
+        Update parameters.
+
+        (WebInspector.DOMTreeOutline.prototype.revealElement):
+        (WebInspector.DOMTreeOutline.prototype._populateContextMenu):
+        Append a "Reveal Element" context menu item if needed.
+
+        * UserInterface/ObjectPropertiesSection.js:
+        (WebInspector.ObjectPropertyTreeElement.prototype._contextMenuEventFired):
+        Update the string. We don't have a panel, the nav bar labels this "DOM Tree".
+
+2013-04-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        ERROR URIError: URI error in FrameResourceManager.prototype.resourceForScript
+
+        decodeURI can throw a URIError, e.g. decodeURI("%"). Protect against
+        this in FrameResourceManager. This method is meant to work with both
+        already decoded and encoded URIs.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.resourceForScript):
+        Wrap the code with decodeURI in a try/catch.
+
+2013-04-04  Timothy Hatcher  <timothy@apple.com>
+
+        Fix opening the Web Inspector in Production builds.
+
+        A function declaration was pushed up next to a parenthesis when minified.
+        This made the parser think we were trying to make a call. Adding a semicolon
+        is all we need to make things work again when combined and minified.
+
+        <rdar://problem/13577591> REGRESSION (r50120-50124): Can't open Web Inspector
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/MIMETypeUtilities.js:
+        (WebInspector.fileExtensionForURL):
+        (WebInspector.mimeTypeForFileExtension):
+
+2013-04-04  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13570821> Reasons for compositing popover should adjust position if inspector window resizes
+
+        Allow for popovers to have their target frame updated independently
+        of their content so we can efficiently update their position as the
+        element for which a popover is presented changes position. Now that
+        we have this support, we update the popover presentation when the
+        window size changes and a popover is visible in the Layers sidebar
+        panel.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Breakpoint.js:
+        (WebInspector.Breakpoint.prototype._showEditBreakpointPopover):
+        Adopt the updated Popover API.
+
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel):
+        Track window resize events so that we may update the popover
+        presentation as it changes.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype._windowResized):
+        Update the popover presentation in case there is a visible popover.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype._showPopoverForSelectedNode):
+        Use the new _updatePopoverForSelectedNode() method as the callback.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype._updatePopoverForSelectedNode):
+        Adopt the updated Popover API and only set the popover's content
+        should one be provided, ie. when the method is called as callback
+        to _contentForPopover().
+
+        * UserInterface/Popover.js:
+        (WebInspector.Popover):
+        New private ivars to track some popover presentation state.
+
+        (WebInspector.Popover.prototype.get visible):
+        New public property to let clients check on popover visibility.
+
+        (WebInspector.Popover.prototype.set content):
+        (WebInspector.Popover.prototype.present):
+        New public property and method signature to let clients set the
+        content of the popover independently of its presentation attributes.
+
+        (WebInspector.Popover.prototype._update):
+        New private method called to update the presentation state
+        of the popover and basically the old content of the present()
+        method with use of the presentation ivars instead of method
+        arguments and some optimizations to check that we only update
+        the content and draw the canvas background should they have
+        changed.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._showPopover):
+        Adopt the updated Popover API.
+
+2013-04-04  Timothy Hatcher  <timothy@apple.com>
+
+        Make ContentViewContainer robust against null/undefined elements in contentView.scrollableElements.
+
+        DatabaseTableContentView can return a null element when the table is empty, and this causes exceptions.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer.prototype._saveScrollPositionsForContentView):
+        (WebInspector.ContentViewContainer.prototype._restoreScrollPositionsForContentView):
+
+2013-04-04  Timothy Hatcher  <timothy@apple.com>
+
+        Don't use localStorage to cache generated images in the Web Inspector.
+
+        This migrates ImageUtilities off localStorage to a SQL database.
+
+        <rdar://problem/13574226> Web Inspector breaks when file:/// localStorage hits 5MB limit
+
+        Rubber-stamped by Antoine Quint.
+
+        * UserInterface/ImageUtilities.js:
+        (_devicePixelRatioChanged):
+        (_registerGeneratedImageUpdateFunction):
+        (_logSQLError):
+        (_prefetchCachedImagesAndUpdate.complete):
+        (_prefetchCachedImagesAndUpdate._generatedImageCacheDatabase.transaction):
+        (_prefetchCachedImagesAndUpdate):
+        (restoreImageFromStorage):
+        (generateColoredImagesForCSS.restoreImages):
+        (generateColoredImagesForCSS.restoreImages.restoreActiveImages):
+        (generateColoredImagesForCSS.restoreImage):
+        (generateColoredImagesForCSS.update):
+        (generateColoredImagesForCSS.generateImage):
+        (generateEmbossedImages):
+        (generateEmbossedImages.generateImages):
+        (generateEmbossedImages.generateImages.generateActiveImages):
+
+2013-04-04  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13570779> Reasons for compositing popover in layers sidebar is poorly aligned with selected datagrid row
+
+        Also apply padding to the target frame size, not just the origin, and
+        adjust the padding down to 2 to match the padding used for breakpoints.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel.prototype._showPopoverForSelectedNode):
+
+2013-04-03  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13573798> REGRESSION: CodeMirror editor doesn't refresh when split console is hidden and more of the content view is visible
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole.prototype.consoleLogVisibilityChanged):
+        Trigger a DidResize event because the console would have changed
+        its visible size.
+
+2013-04-03  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13474739> Respect sourcesContent in SourceMaps for SourceMapResources
+
+        If the resource's contents are available via the Source Map's
+        sourcesContent array, then use them. Otherwise, go the normal path of
+        downloading the resource. Because neither path can get the MIME type of
+        the resource right now, fallback to trying to determine the MIME type
+        from the resource's file extension.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.html:
+        * UserInterface/MIMETypeUtilities.js: Added.
+        (WebInspector.fileExtensionForURL):
+        (WebInspector.mimeTypeForFileExtension):
+        Helpers for extensions and MIME types.
+
+        * UserInterface/SourceMapResource.js:
+        (WebInspector.SourceMapResource.prototype._requestResourceAsynchronously):
+        Check for embedded sourcesContent content, and determine the MIME type
+        from the file extension.
+
+        * UserInterface/Resource.js:
+        Be sure to give types to some of the MIME types for CodeMirror supported
+        types, which may show up as SourceMap sources.
+
+2013-04-03  Joseph Pecoraro  <pecoraro@apple.com>
+
+        ERROR: console.assert(alternateImage) in ToggleButtonNavigationItem.js:4
+
+        Remove assert that there must be an alternateImage. The undock button
+        does not have an alternate image, and this assert would trigger each
+        time the inspector was opened.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ToggleButtonNavigationItem.js:
+        (WebInspector.ToggleButtonNavigationItem):
+
+2013-04-03  Jessie Berlin  <jberlin@apple.com>
+
+        Ran update-safari-localizable-strings.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+2013-04-03  Timothy Hatcher  <timothy@apple.com>
+
+        Add switch to activate / deactivate all breakpoints.
+
+        <rdar://problem/11329057> REGRESSION (Safari 6): Switch to activate / deactivate all
+        breakpoints is missing (debugger)
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/Breakpoint.js:
+        (WebInspector.Breakpoint.prototype.get resolved):
+        Check DebuggerManager.breakpointsEnabled. This is the easiest approach to get the gray
+        icons for breakpoints in all the right places without adding checks at all call sites.
+
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager):
+        (WebInspector.DebuggerManager.prototype.get breakpointsEnabled):
+        (WebInspector.DebuggerManager.prototype.set breakpointsEnabled):
+        (WebInspector.DebuggerManager.prototype._updateBreakOnExceptionsState):
+        Check the breakpointsEnabled setting when updating the break on exception state.
+
+        * UserInterface/DebuggerSidebarPanel.css:
+        (.sidebar > .panel.debugger .breakpoint-toggle): Added.
+        (.sidebar > .panel.debugger .breakpoint-toggle.enabled): Added.
+
+        * UserInterface/DebuggerSidebarPanel.js:
+        (WebInspector.DebuggerSidebarPanel):
+        (WebInspector.DebuggerSidebarPanel.prototype._breakpointsToggleButtonClicked):
+        Added a button to the Breakpoints section header.
+
+2013-04-03  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13566082> DOMTreeManager.highlightRect() does not take scrolling into account
+
+        Add support for the new "usePageCoordinates" argument to DOM.highlightRect()
+        and set it to true when highlighting the bounds of generated layers.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMTreeManager.js:
+        (WebInspector.DOMTreeManager.prototype.highlightRect):
+        * UserInterface/InspectorBackendCommands.js:
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel.prototype._highlightSelectedNode):
+
+2013-04-03  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13105224> Reflect data grid timeline filters in the Timeline overview
+
+        Apply the filtering of records directly into the timelineOverviewRecordsWithType()
+        method which is the method used by the TimelineOverview to gather data. Additionally,
+        we now update the content of the TimelineOverview when the filters applied to one of
+        the data grids change such that the timeline overview is kept in sync.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView.prototype.timelineOverviewRecordsWithType):
+        (WebInspector.TimelinesContentView.prototype._dataGridFiltersDidChange):
+
+2013-04-03  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13557373> Layers panel doesn't know how to account for anonymous layers
+
+        Handle the new "isAnonymous" property on the protocol and the renamed
+        "pseudoElement" property. We also format use of pseudo-elements better
+        and handle the somewhat unlikely possibility that we would deal with
+        layers with unknown nodes.
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        New localized string for "Unknown node".
+
+        * UserInterface/LayerTreeDataGridNode.js:
+        (WebInspector.LayerTreeDataGridNode.prototype.createCellContent):
+        Update the "no-node" class on the data grid node's element.
+
+        (WebInspector.LayerTreeDataGridNode.prototype.set layer):
+        Set an "Unknown node" label for layers with an unknown node, which
+        shouldn't really happen, but we should be prepared for the possibility.
+        Seeing this message means that the agent should be taught how to deal
+        with a probably edge case. We also update the code to deal with the
+        "pseudoElement" property instead of "pseudoClass" to match the protocol
+        change. Finally, we also update the "no-node" class on the data grid's node.
+
+        (WebInspector.LayerTreeDataGridNode.prototype._updateDOMNodeAvailability):
+        New method to update the "no-node" class on the data grid's node so
+        that we may hide the go-to arrow button in the case where there is
+        no associated node.
+
+        * UserInterface/LayerTreeSidebarPanel.css:
+        (.layer-tree.panel .data-grid tr.no-node .go-to-arrow):
+        Hide the go-to arrow button in the case where there is no associated node.
+
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel.prototype._highlightSelectedNode):
+        Also use highlightRect() in the case where the layer is anonymous.
+
+2013-04-02  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13548470> REGRESSION: Web inspector hung after searching for "swf"
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype._scrollIntoViewCentered):
+        Be more careful providing a center margin when the text size and editor
+        height can be fractional. If the margin is greater than half the size of
+        the editor, CodeMirror gets stuck in an infinite loop.
+
+2013-04-02  Joseph Pecoraro  <pecoraro@apple.com>
+
+        ERROR: TypeError: 'undefined' is not an object (evaluating 'this._profileView.showTimeAsPercent.value')
+
+        When selecting a CSS Profile, displayProfile could trigger from the
+        superclass constructor before the showTimeAsPercent Setting was
+        initialized, causing this error. ProfileView's are assumed to have
+        this property, and the ProfileView constructor had an unused
+        parameter, which looks like it was intended for this purpose.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CSSSelectorProfileView.js:
+        (WebInspector.CSSSelectorProfileView):
+        * UserInterface/JavaScriptProfileView.js:
+        (WebInspector.JavaScriptProfileView):
+        * UserInterface/ProfileView.js:
+        (WebInspector.ProfileView):
+
+2013-04-02  Timothy Hatcher  <timothy@apple.com>
+
+        Update toolbar layout for recent flex box changes.
+
+        <rdar://problem/13556024>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Toolbar.css:
+        (.toolbar .item-section): Added min-width: -webkit-min-content.
+        min-width now defaults to 0, but we need the sections to stop at the
+        content size so the JavaScript layout function can do the right thing.
+
+2013-04-02  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13545256> Automatic selection of a CSS profile upon finishing recording fails to show any content
+
+        Make sure we set the "showAsTimePercent" property before calling super since
+        it may be used by the generated WebInspector.CSSSelectorDataGridNode in 
+        displayProfile() which would be called in the super call in the case where
+        the view is created as the profile finishes recording.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CSSSelectorProfileView.js:
+        (WebInspector.CSSSelectorProfileView):
+
+2013-04-01  Timothy Hatcher  <timothy@apple.com>
+
+        Fix the icons for the exception breakpoints.
+
+        <rdar://problem/13552326> REGRESSION: Exception breakpoints are missing custom icons
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DebuggerSidebarPanel.js:
+        (WebInspector.DebuggerSidebarPanel.ExceptionIconStyleClassName): Added.
+        This property was expected to exist but got removed at some point.
+        BreakpointTreeElement property handled undefined and used the generic icon.
+
+2013-04-01  Timothy Hatcher  <timothy@apple.com>
+
+        Compressed PNGs with pngcrush and further reduced the size of some PDFs by re-exporting them. Removed some unused images too.
+
+        This goes from 2.1 MB of images down to 1.2 MB.
+
+        Rubber-stamped by Joseph Pecoraro.
+
+        * UserInterface/Images/ApplicationCache.png:
+        * UserInterface/Images/ApplicationCache@2x.png:
+        * UserInterface/Images/ApplicationCacheManifest.png:
+        * UserInterface/Images/ApplicationCacheManifest@2x.png:
+        * UserInterface/Images/Breakpoint.png:
+        * UserInterface/Images/Breakpoint@2x.png:
+        * UserInterface/Images/BreakpointInactive.png:
+        * UserInterface/Images/BreakpointInactive@2x.png:
+        * UserInterface/Images/ClippingGeneric.png:
+        * UserInterface/Images/ClippingGeneric@2x.png:
+        * UserInterface/Images/ClippingJS.png:
+        * UserInterface/Images/ClippingJS@2x.png:
+        * UserInterface/Images/Close.pdf:
+        * UserInterface/Images/Colors.png:
+        * UserInterface/Images/Colors@2x.png:
+        * UserInterface/Images/Cookie.png:
+        * UserInterface/Images/Cookie@2x.png:
+        * UserInterface/Images/Crosshair.pdf:
+        * UserInterface/Images/DOMCharacterData.pdf:
+        * UserInterface/Images/DOMComment.pdf:
+        * UserInterface/Images/DOMDocument.pdf:
+        * UserInterface/Images/DOMDocumentType.pdf:
+        * UserInterface/Images/DOMElement.pdf:
+        * UserInterface/Images/DOMNode.pdf:
+        * UserInterface/Images/DOMTextNode.pdf:
+        * UserInterface/Images/DOMTree.pdf:
+        * UserInterface/Images/Database.png:
+        * UserInterface/Images/Database@2x.png:
+        * UserInterface/Images/DatabaseTable.png:
+        * UserInterface/Images/DatabaseTable@2x.png:
+        * UserInterface/Images/DisclosureTriangleSmallClosed.pdf:
+        * UserInterface/Images/DisclosureTriangleSmallOpen.pdf:
+        * UserInterface/Images/DockBottom.pdf:
+        * UserInterface/Images/DockRight.pdf:
+        * UserInterface/Images/DocumentCSS.png:
+        * UserInterface/Images/DocumentCSS@2x.png:
+        * UserInterface/Images/DocumentFont.png:
+        * UserInterface/Images/DocumentFont@2x.png:
+        * UserInterface/Images/DocumentGeneric.png:
+        * UserInterface/Images/DocumentGeneric@2x.png:
+        * UserInterface/Images/DocumentImage.png:
+        * UserInterface/Images/DocumentImage@2x.png:
+        * UserInterface/Images/DocumentJS.png:
+        * UserInterface/Images/DocumentJS@2x.png:
+        * UserInterface/Images/DocumentMarkup.png:
+        * UserInterface/Images/DocumentMarkup@2x.png:
+        * UserInterface/Images/EventListener.pdf:
+        * UserInterface/Images/Exception.pdf:
+        * UserInterface/Images/FilterFieldGlyph.pdf:
+        * UserInterface/Images/FolderGeneric.png:
+        * UserInterface/Images/FolderGeneric@2x.png:
+        * UserInterface/Images/Function.pdf:
+        * UserInterface/Images/HierarchicalNavigationItemChevron.pdf:
+        * UserInterface/Images/InstructionPointer.png:
+        * UserInterface/Images/InstructionPointer@2x.png:
+        * UserInterface/Images/LeftSidebarClose.pdf: Removed.
+        * UserInterface/Images/LeftSidebarOpen.pdf: Removed.
+        * UserInterface/Images/LessColumns.pdf:
+        * UserInterface/Images/LocalStorage.png:
+        * UserInterface/Images/LocalStorage@2x.png:
+        * UserInterface/Images/Log.png:
+        * UserInterface/Images/Log@2x.png:
+        * UserInterface/Images/MoreColumns.pdf:
+        * UserInterface/Images/NavigationItemAngleBrackets.pdf:
+        * UserInterface/Images/NavigationItemBug.pdf:
+        * UserInterface/Images/NavigationItemCurleyBraces.pdf:
+        * UserInterface/Images/NavigationItemFile.pdf:
+        * UserInterface/Images/NavigationItemLayers.pdf:
+        * UserInterface/Images/NavigationItemLog.pdf:
+        * UserInterface/Images/NavigationItemRuler.pdf: Removed.
+        * UserInterface/Images/NavigationItemStopwatch.pdf:
+        * UserInterface/Images/NavigationItemStorage.pdf:
+        * UserInterface/Images/Network.png:
+        * UserInterface/Images/Network@2x.png:
+        * UserInterface/Images/NetworkBarBlue.png:
+        * UserInterface/Images/NetworkBarBlue@2x.png:
+        * UserInterface/Images/NetworkBarGray.png:
+        * UserInterface/Images/NetworkBarGray@2x.png:
+        * UserInterface/Images/NetworkBarGreen.png:
+        * UserInterface/Images/NetworkBarGreen@2x.png:
+        * UserInterface/Images/NetworkBarLabelCalloutLeft.pdf:
+        * UserInterface/Images/NetworkBarLabelCalloutRight.pdf:
+        * UserInterface/Images/NetworkBarLabelCalloutWhiteLeft.pdf:
+        * UserInterface/Images/NetworkBarLabelCalloutWhiteRight.pdf:
+        * UserInterface/Images/NetworkBarOrange.png:
+        * UserInterface/Images/NetworkBarOrange@2x.png:
+        * UserInterface/Images/NetworkBarPurple.png:
+        * UserInterface/Images/NetworkBarPurple@2x.png:
+        * UserInterface/Images/NetworkBarRed.png:
+        * UserInterface/Images/NetworkBarRed@2x.png:
+        * UserInterface/Images/NetworkBarWhiteFlat.png:
+        * UserInterface/Images/NetworkBarWhiteFlat@2x.png:
+        * UserInterface/Images/NetworkBarYellow.png:
+        * UserInterface/Images/NetworkBarYellow@2x.png:
+        * UserInterface/Images/NetworkHollowBarBlue.png:
+        * UserInterface/Images/NetworkHollowBarBlue@2x.png:
+        * UserInterface/Images/NetworkHollowBarGray.png:
+        * UserInterface/Images/NetworkHollowBarGray@2x.png:
+        * UserInterface/Images/NetworkHollowBarGreen.png:
+        * UserInterface/Images/NetworkHollowBarGreen@2x.png:
+        * UserInterface/Images/NetworkHollowBarOrange.png:
+        * UserInterface/Images/NetworkHollowBarOrange@2x.png:
+        * UserInterface/Images/NetworkHollowBarPurple.png:
+        * UserInterface/Images/NetworkHollowBarPurple@2x.png:
+        * UserInterface/Images/NetworkHollowBarRed.png:
+        * UserInterface/Images/NetworkHollowBarRed@2x.png:
+        * UserInterface/Images/NetworkHollowBarYellow.png:
+        * UserInterface/Images/NetworkHollowBarYellow@2x.png:
+        * UserInterface/Images/Pause.pdf:
+        * UserInterface/Images/Profile.png:
+        * UserInterface/Images/Profile@2x.png:
+        * UserInterface/Images/Recording.png:
+        * UserInterface/Images/RecordingHovered.png:
+        * UserInterface/Images/RecordingHovered@2x.png:
+        * UserInterface/Images/RecordingStopped.png:
+        * UserInterface/Images/RecordingStopped@2x.png:
+        * UserInterface/Images/ResultLine.pdf:
+        * UserInterface/Images/Resume.pdf:
+        * UserInterface/Images/RightSidebarClose.pdf: Removed.
+        * UserInterface/Images/RightSidebarOpen.pdf: Removed.
+        * UserInterface/Images/Script.png:
+        * UserInterface/Images/Script@2x.png:
+        * UserInterface/Images/SessionStorage.png:
+        * UserInterface/Images/SessionStorage@2x.png:
+        * UserInterface/Images/SourceCode.pdf:
+        * UserInterface/Images/StepInto.pdf:
+        * UserInterface/Images/StepOut.pdf:
+        * UserInterface/Images/StepOver.pdf:
+        * UserInterface/Images/Stopwatch.png:
+        * UserInterface/Images/Stopwatch@2x.png:
+        * UserInterface/Images/StyleRuleAuthor.pdf:
+        * UserInterface/Images/StyleRuleInherited.pdf:
+        * UserInterface/Images/StyleRuleInheritedElement.pdf:
+        * UserInterface/Images/StyleRuleInspector.pdf:
+        * UserInterface/Images/StyleRuleUser.pdf:
+        * UserInterface/Images/StyleRuleUserAgent.pdf:
+        * UserInterface/Images/TimelineBarBlue.png:
+        * UserInterface/Images/TimelineBarBlue@2x.png:
+        * UserInterface/Images/TimelineBarOrange.png:
+        * UserInterface/Images/TimelineBarOrange@2x.png:
+        * UserInterface/Images/TimelineBarPurple.png:
+        * UserInterface/Images/TimelineBarPurple@2x.png:
+        * UserInterface/Images/ToggleArrowDown.pdf: Removed.
+        * UserInterface/Images/ToggleArrowUp.pdf: Removed.
+        * UserInterface/Images/Undock.pdf:
+        * UserInterface/Images/UserInputPrompt.pdf:
+        * UserInterface/Images/UserInputPromptPrevious.pdf:
+        * UserInterface/Images/UserInputResult.pdf:
+
+2013-03-31  Timothy Hatcher  <timothy@apple.com>
+
+        Allow changing Web Inspector dock sides without undocking first.
+
+        Holding option will change the undock button to the opposite attachment side. When clicked
+        the button will change to the other attachment side. Holding option with allow undock. This
+        keeps the last used option available if the user hardly undocks but frequently changes sides.
+
+        rdar://problem/13543127
+
+        Reviewed by Antoine Quint.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+
+        * UserInterface/Images/Dock.pdf: Removed.
+        * UserInterface/Images/DockBottom.pdf: Added.
+        * UserInterface/Images/DockRight.pdf: Added.
+
+        * UserInterface/Main.js:
+        (WebInspector.loaded): Added key event listeners.
+        (WebInspector.contentLoaded): Use ToggleControlToolbarItem for undock button.
+        (WebInspector._windowKeyDown): Added.
+        (WebInspector._windowKeyUp): Added.
+
+        (WebInspector._undock):
+        (WebInspector._updateDockNavigationItems):
+        Set and check toggled state for undock button and do the right thing.
+
+        * UserInterface/ToggleButtonNavigationItem.js:
+        (WebInspector.ToggleButtonNavigationItem.prototype.set alternateToolTip): Added.
+        (WebInspector.ToggleButtonNavigationItem.prototype.set alternateImage): Added.
+
+2013-04-01  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13492413> Improve line number subtitle for SourceMap Breakpoints in Debugger sidebar
+
+        If a breakpoint is in a SourceMapResource, there is a subtitle showing
+        the original location. If the original location is in a formatted file
+        show the italics formatted location that you would jump to. Don't show
+        a subtitle for breakpoints in formatted resources, just the Line:Column.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/BreakpointTreeElement.css:
+        (.item.breakpoint .subtitle.formatted-location):
+        Italics if the subtitle is displaying a formatted location.
+
+        * UserInterface/BreakpointTreeElement.js:
+        (WebInspector.BreakpointTreeElement):
+        (WebInspector.BreakpointTreeElement.prototype._updateTitles):
+        For SourceMap resources, show the formatted / original location.
+        Always have the real original location in the tooltip.
+
+        (WebInspector.BreakpointTreeElement.prototype._breakpointLocationDidChange):
+        Update the titles if any location changes (the original file may
+        have been formatted, and we'd want to update for that).
+
+        * UserInterface/GeneralTreeElement.js:
+        (WebInspector.GeneralTreeElement.prototype.get subtitleElement):
+        Be sure to create the title element the subtitle gets appended to.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.showOriginalOrFormattedSourceCodeLocation):
+        This essentially means, show location in the editor.
+
+        * UserInterface/SourceCodeLocation.js:
+        (WebInspector.SourceCodeLocation.prototype.formattedLocationString):
+        Helper for getting the display string for the formatted location.
+
+2013-04-01  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Avoid some asserts that can happen when reformatting files with breakpoints.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._updateBreakpointLocation):
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.updateStyles):
+        (WebInspector.TextEditor.prototype._removeBreakpointFromLineAndColumn):
+
+2013-03-29  Timothy Hatcher  <timothy@apple.com>
+
+        Add CSS as a known source type.
+
+        <rdar://problem/13498380> ASSERTION: IssueMessage.js:64: Unknown issue source: css
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/IssueMessage.js:
+        (WebInspector.IssueMessage):
+
+2013-03-29  Timothy Hatcher  <timothy@apple.com>
+
+        Don't try to toggle visibility if a toggle is already pending.
+
+        <rdar://problem/13401011> New Shortcut to hide/show elements while
+        inspecting breaks if you leave the key pressed.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline.prototype._hideElement.toggleProperties):
+        (WebInspector.DOMTreeOutline.prototype._hideElement):
+
+2013-03-29  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Avoid a SourceMapResource Folder chain of single level folders.
+
+        On of my test cases, <http://dev.fontdragr.com>, a resource with
+        a source map has all its source map resources in a "src" folder.
+        This creates a poor experience in the resources sidebar. When
+        expanding the resource, there is just a "src" folder. In those
+        cases, and in general if there is one long chain of folders,
+        don't even use folders.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTreeElement.js:
+        (WebInspector.SourceCodeTreeElement.prototype.onpopulate.folderHasOnlyResourceChildren):
+        (WebInspector.SourceCodeTreeElement.prototype.onpopulate):
+        (WebInspector.SourceCodeTreeElement.prototype.createFoldersAsNeededForSubpath):
+
+2013-03-28  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13310717> Source Maps: should display folder hierarchy in the sidebar
+
+        Resolve "./" and "../" in URL paths in parseURL. Leave the path
+        unadjusted if we get to a point we don't know how to handle, e.g.
+        too many "../" components.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTreeElement.js:
+        (WebInspector.SourceCodeTreeElement.prototype.createFoldersAsNeededForSubpath):
+        * UserInterface/Utilities.js:
+
+2013-03-28  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13310717> Source Maps: should display folder hierarchy in the sidebar
+
+        Often SourceMap's include sources in a hierarchy. We should create
+        a folder structure for that hierarchy in the resources sidebar. When
+        the SourceMap is part of a Frame, we don't do this, we still just
+        sort SourceMapResources into their associated type folder.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement.compareFolderAndResourceTreeElements):
+        Added a generic sort function that can take both Folder and Resource
+        tree elements. It sorts folders first, by name, then resources by their
+        normal sort order (type and name).
+
+        * UserInterface/SourceMap.js:
+        (WebInspector.SourceMap.prototype.get sourceMappingURLBasePath):
+        When the source map resolves its sources it builds an absolute URL
+        using the partial URL (map.sourceRoot + map.source[i]) and base URL
+        of the provided sourceMappingURL. We can use this "base path" to
+        get only the individual source's relative subpath later on.
+
+        * UserInterface/SourceMapResource.js:
+        (WebInspector.SourceMapResource.prototype.get sourceMapRelativeSubpath):
+        Get the subpath relative to the SourceMap's url. This allows us
+        to get the path components and build a directory tree.
+
+        * UserInterface/SourceCodeTreeElement.js:
+        (WebInspector.SourceCodeTreeElement.prototype.onpopulate):
+        (WebInspector.SourceCodeTreeElement.prototype.createFoldersAsNeededForSubpath):
+        (WebInspector.SourceCodeTreeElement.prototype.descendantResourceTreeElementTypeDidChange):
+        Given a subpath, create folders as needed and insert the actual
+        SourceMapResourceTreeElement inside the deepest folder. Cache
+        folders along the way so we don't re-create folders, and so that
+        we can look them up again later if needed.
+
+2013-03-28  Timothy Hatcher  <timothy@apple.com>
+
+        Combine and minify CodeMirror scripts and styles in Production builds.
+
+        <rdar://problem/13446918>
+
+        Reviewed by Joseph Pecoraro.
+
+        * Scripts/combine-resources.pl:
+        * Scripts/copy-user-interface-resources.sh:
+
+2013-03-28  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Unreviewed. Missing semicolon causing warning when stripping asserts.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.updateBreakpointLineAndColumn):
+
+2013-03-28  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13412969> Reveal line centered hits a code mirror exception unless put in setTimeout
+
+        CodeMirror issue has been fixed. Remove the "delay" form paths that
+        would have hit the exception before. They no longer do.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.revealAndHighlightLine):
+        (WebInspector.TextEditor.prototype.revealLine):
+        (WebInspector.TextEditor.prototype._revealPendingLineIfPossible):
+        (WebInspector.TextEditor.prototype._scrollIntoViewCentered):
+
+2013-03-28  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13412969> Reveal line centered hits a code mirror exception unless put in setTimeout
+        <rdar://problem/13512430> Idle Inspector recalculates styles a few times a second because of CodeMirror
+
+        Update CodeMirror to trunk to get a few recent fixes.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/External/CodeMirror/codemirror.js:
+        * UserInterface/External/CodeMirror/sass.js:
+
+2013-03-28  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Add a small script to update CodeMirror resources.
+
+        Reviewed by Cody Krieger.
+
+        * Scripts/update-codemirror-resources.rb: Added.
+
+2013-03-28  Jessie Berlin  <jberlin@apple.com>
+
+        Ran update-safari-localizable-strings.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+2013-03-28  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13505485> REGRESSION: Can't copy links from the console via the context menu
+
+        Let the default context menu show if the user targeted an
+        <a> element that is not a console message URL.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype._handleContextMenuEvent):
+
+2013-03-28  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13526203> Recording profiles in the Instruments sidebar should show a spinner
+
+        Remove the "Recording" prefix for profiles that are recording and
+        instead use an indeterminate spinner to indicate the profile is
+        recording.
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        Remove unused string "Recording JavaScript Profile %s\u2026".
+
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel.prototype._profilingEnded):
+        Remove the indeterminate spinner from the tree element representing
+        the profile that finished recording.
+
+        (WebInspector.InstrumentSidebarPanel.prototype._titleForProfile):
+        For profiles that are presently recording, simulate the pending
+        addition of the tree element by adding 1 to the generated number.
+        This ensures that the generated title matches the one that will
+        appear as this method is called again upon recording completion.
+
+        (WebInspector.InstrumentSidebarPanel.prototype._profileWasAdded):
+        Add an indeterminate spinner to the tree element representing
+        the newly-added profile.
+
+        * UserInterface/ProfileManager.js:
+        (WebInspector.ProfileManager.prototype.startProfilingCSSSelectors):
+        (WebInspector.ProfileManager.prototype.stopProfilingCSSSelectors):
+        (WebInspector.ProfileManager.prototype.profileWasStartedFromConsole):
+        (WebInspector.ProfileManager.prototype.setRecordingJavaScriptProfile):
+        Use the final title directly since we're now using an indeterminate
+        spinner to indicate a profile is recording.
+
+2013-03-28  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13525984> Profile name in navigation bar breadcrumbs doesn't update when recording completes
+
+        Propagate an event when a GeneralTreeElement's "mainTitle"
+        property changes such that the NavigationBar may eventually
+        pick it up and update itself.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/GeneralTreeElement.js:
+        (WebInspector.GeneralTreeElement.prototype.set mainTitle):
+        Dispatch the new MainTitleDidChange event.
+
+        * UserInterface/GeneralTreeElementPathComponent.js:
+        (WebInspector.GeneralTreeElementPathComponent):
+        Register a listener for the MainTitleDidChange event on the
+        provided GeneralTreeElement.
+
+        (WebInspector.GeneralTreeElementPathComponent.prototype._mainTitleDidChange):
+        Update the "displayName" property to match the GeneralTreeElement's
+        updated "mainTitle" property.
+
+        * UserInterface/TreeOutline.js:
+        (TreeOutline):
+        (TreeElement):
+        Make both TreeOutline and TreeElement subclasses of
+        WebInspector.Object such that they may dispatch events.
+
+2013-03-28  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13105775> Handle currently recording profiles in a more graceful manner
+
+        We now present a nice-looking "RecordingÉ" message when a recording
+        profile is selected in the instruments sidebar.
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        New "RecordingÉ" string used to present when we're recording a profile
+        of an unknown type (future-proofing).
+
+        * UserInterface/CSSSelectorProfileView.js:
+        (WebInspector.CSSSelectorProfileView):
+        (WebInspector.CSSSelectorProfileView.prototype.recordingTitle):
+        (WebInspector.CSSSelectorProfileView.prototype.displayProfile):
+        Implement the new ProfileView protocol to display the profile
+        data only when it's available.
+
+        * UserInterface/JavaScriptProfileView.js:
+        (WebInspector.JavaScriptProfileView):
+        (WebInspector.JavaScriptProfileView.prototype.recordingTitle):
+        (WebInspector.JavaScriptProfileView.prototype.displayProfile.profileCallback):
+        (WebInspector.JavaScriptProfileView.prototype.displayProfile):
+        Implement the new ProfileView protocol to display the profile
+        data only when it's available.
+
+        * UserInterface/Main.html:
+        Add the new ProfileView.css file.
+
+        * UserInterface/ProfileManager.js:
+        (WebInspector.ProfileManager.prototype.stopProfilingCSSSelectors):
+        Ensure we set the "recording" property last as it would fire the
+        new WebInspector.ProfileObject.Event.FinshedRecording event before 
+        the profile data has been set on the object.
+
+        * UserInterface/ProfileObject.js:
+        (WebInspector.ProfileObject.prototype.set recording):
+        Dispatch a new WebInspector.ProfileObject.Event.FinshedRecording
+        event when the profile has finished recording.
+
+        * UserInterface/ProfileView.css: Added.
+        (.recording-profile-view):
+        (.recording-profile-view > .indeterminate-progress-spinner):
+        (.recording-profile-view > span):
+        New CSS support for the new recording message in ProfileView,
+        using CSS flexbox to vertically and horizontally center the
+        indeterminate spinner and text.
+
+        * UserInterface/ProfileView.js:
+        (WebInspector.ProfileView):
+        In case the profile for this ProfileView is still recording,
+        register for the WebInspector.ProfileObject.Event.FinshedRecording
+        event to be notified of when the profile is done recording
+        and show a "RecordingÉ" message until then.
+
+        (WebInspector.ProfileView.prototype.displayProfile):
+        New method called when the profile has finished recording and
+        we've removed the "RecordingÉ" message from display. Meant to
+        be implemented by subclasses.
+
+        (WebInspector.ProfileView.prototype.recordingTitle):
+        New method called when populating the "RecordingÉ" message allowing
+        subclasses to return a clearer message.
+
+        (WebInspector.ProfileView.prototype._profileFinishedRecording):
+        Event handler for the WebInspector.ProfileObject.Event.FinshedRecording
+        event which removes the "RecordingÉ" message and calls
+        displayProfile().
+
+        (WebInspector.ProfileView.prototype._showRecordingMessage):
+        Display the "RecordingÉ" message.
+
+        (WebInspector.ProfileView.prototype._hideRecordingMessage):
+        Removes the "RecordingÉ" message, if any.
+
+2013-03-28  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13483963> copying text from the web inspector includes [LOG] when you paste
+
+        Don't add [Log] prefix for log-level messages.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ConsoleMessageImpl.js:
+        (WebInspector.ConsoleMessageImpl.prototype.toClipboardString):
+
+2013-03-26  Timothy Hatcher  <timothy@apple.com>
+
+        Support for dock-to-right in the Web Inspector.
+
+        rdar://problem/10368152
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.setDockSide):
+        * UserInterface/Main.css:
+        (body.docked.bottom):
+        (body.docked.right):
+        (#docked-resizer):
+        (body.docked #docked-resizer):
+        (body.docked.bottom #docked-resizer):
+        (body.docked.right #docked-resizer):
+        (body.docked.bottom #toolbar):
+        (body.docked.bottom #toolbar .item:not(.flexible-space)):
+        (body.docked.right #navigation-sidebar.collapsed > .resizer):
+        * UserInterface/Main.js:
+        (WebInspector.loaded):
+        (WebInspector.contentLoaded):
+        (WebInspector.updateDockedState):
+        (WebInspector._toolbarDisplayModeDidChange):
+        (WebInspector._toolbarSizeModeDidChange):
+        (WebInspector._toolbarMouseDown):
+        (WebInspector._dockedResizerMouseDown.dockedResizerDrag):
+        (WebInspector._dockedResizerMouseDown):
+
+2013-03-27  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13105774> Recording a profile with the inspector UI should automatically select the new profile upon completion
+
+        Automatically select profiles that completed as a result of the user
+        pressing the record button in the instruments sidebar panel.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel.prototype._profilingEnded):
+        Check the "fromConsole" property on the ProfilingEnded event to
+        see whether this profile should be automatically selected.
+
+        * UserInterface/ProfileManager.js:
+        (WebInspector.ProfileManager.prototype.setRecordingJavaScriptProfile):
+        Also indicate whether the ProfilingEnded event is created as a
+        result of a profile finishing recording as a result of calling
+        one of the console APIs.
+
+2013-03-27  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13190009> Profile recorded prior to the current page load may show empty content view
+
+        We now create the content view for a profile that finished recording instantly
+        rather than delay it until selection. This ensures that all recorded profiles
+        are available across page loads, until we navigate away.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ConsoleObserver.js:
+        (WebInspector.ConsoleObserver.prototype.messageAdded):
+        Fix an oversight from the previous commit where we wouldn't distinguish
+        calls to console.profile() and console.profileEnd() made as a result
+        of starting a profile from the UI or starting a profile by actually
+        calling these methods.
+
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel.prototype._profilingEnded):
+        Force the creation of the content view for the provided profile so that
+        the profile is immediately retrieved from the backend and available
+        across page loads.
+
+        * UserInterface/ProfileManager.js:
+        (WebInspector.ProfileManager.prototype.stopProfilingCSSSelectors):
+        (WebInspector.ProfileManager.prototype.addJavaScriptProfile):
+        (WebInspector.ProfileManager.prototype.setRecordingJavaScriptProfile):
+        Pass the currently recording profile as data to the ProfilingEnded
+        event dispatched.
+
+2013-03-27  Jessie Berlin  <jberlin@apple.com>
+
+        Ran update-safari-localizable-strings.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+2013-03-27  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13515381> Profiles started from console API don't appear until done
+
+        We now intercept console.profile() and console.profileEnd() messages
+        appearing through the ConsoleObserver so that we can simulate
+        setRecordingJavaScriptProfile protocol events in the ConsoleManager.
+        This allows us to deal with console profiles in a more unified manner.
+        The recording button, however, does not go red when a profile is
+        recording from the console.
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        Changed string for "Recording JavaScript ProfileÉ" to allow for
+        a profile title as well, since it might be known form the
+        console.profile() call that initiated it.
+
+        * UserInterface/ConsoleObserver.js:
+        (WebInspector.ConsoleObserver.prototype.messageAdded):
+        Check for console.profile() and console.profileEnd() calls and
+        inform the ProfileManager that a profile started or ended from
+        the console API.
+
+        * UserInterface/ProfileManager.js:
+        (WebInspector.ProfileManager.prototype.profileWasStartedFromConsole):
+        Simulate a setRecordingJavaScriptProfile protocol event and set up
+        the profile's title if provided.
+
+        (WebInspector.ProfileManager.prototype.profileWasEndedFromConsole):
+        Simulate a setRecordingJavaScriptProfile protocol event.
+
+        (WebInspector.ProfileManager.prototype.addJavaScriptProfile):
+        Remove custom logic to deal with the belated creation of a
+        JavaScriptProfileObject for a profile that would have been started
+        from the console API since we now get the notification via the simulated
+        setRecordingJavaScriptProfile protocol event.
+
+        (WebInspector.ProfileManager.prototype.setRecordingJavaScriptProfile):
+        Only dispatch the ProfilingStarted event if the profile was initiated
+        from the user interface.
+
+2013-03-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Check-in some documentation files on the RWI protocols.
+
+        Better these be checked in then floating on my machine.
+
+        Rubber-stamped by Timothy Hatcher.
+
+        * Documentation/RWI-Messages.graffle: Added.
+        * Documentation/RWI-Messages.pdf: Added.
+
+2013-03-26  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13096650> Debugger popover does not appear sometimes (or is too slow to appear)
+
+        We now dismiss the debugger popover when the hovered token (or the
+        popover for it) is no longer hovered for a whole second. Additionally,
+        if there is marked text, we immediately show a popover for a newly
+        hovered token instead of waiting 500ms so that's easier to go from
+        token to token to get their information.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Popover.js:
+        (WebInspector.Popover.prototype.get element):
+        Newly public property, used to check in hoveredElementCanReleaseHoveredToken() in
+        the SourceCodeTextEditor whether the newly hovered element is contained within
+        a popover.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.hoveredElementCanReleaseHoveredToken):
+        Check whether the newly hovered element is contained within the presented
+        popover or whether text in the popover is selected.
+
+        (WebInspector.SourceCodeTextEditor.prototype.hoveredTokenWasReleased):
+        Dismiss the popover since the user has moused out of the hovered token long
+        enough that it shouldn't be considered hovered anymore.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.stopTrackingTokenHovering):
+        Remove the window-wide mousemove event listener.
+
+        (WebInspector.TextEditor.prototype.handleEvent):
+        Route mousemove events to the _mouseMovedWithMarkedText() method
+        if it's the window-wide mousemove event listener.
+
+        (WebInspector.TextEditor.prototype.highlightHoveredExpression):
+        Start tracking mousemove events at the window level so that we can
+        detect any element, even outside of the text editor, that might be
+        hovered long enough to release the hovered token.
+
+        (WebInspector.TextEditor.prototype.removeHighlightOnHoveredExpression):
+        Remove the document-wide mousemove event listener and delete the
+        _tokenHighlightMarkedText property so that we can use its absence
+        to gather that there is no marked text when checking for a newly
+        hovered token in _mouseMovedOverEditor().
+
+        (WebInspector.TextEditor.prototype.hoveredElementCanReleaseHoveredToken):
+        Public method used to identify whether the hovered element qualifies
+        to release the hovered token. The default implementation simply checks
+        that the hovered element is the marked text for the hovered token. 
+
+        (WebInspector.TextEditor.prototype.hoveredTokenWasReleased):
+        Public method meant to be subclassed, called when we've identified that
+        the hovered token has been moused out of for more than a second.
+
+        (WebInspector.TextEditor.prototype._mouseMovedOverEditor):
+        Immediately check the newly hovered token if there already is
+        hovered token, allowing for a quick inspection of hovered tokens.
+
+        (WebInspector.TextEditor.prototype._mouseMovedWithMarkedText):
+        Check the hovered element qualifies to release the hover token, and if it so,
+        start a one-second timer to release it.
+
+        (WebInspector.TextEditor.prototype._checkHoveredToken):
+        Stop the timer started in _mouseMovedWithMarkedText() to check whether
+        the currently hovered element could qualify to release the hovered token.
+
+        (WebInspector.TextEditor.prototype._markedTextIsNoLongerHovered):
+        Method called when the timer started in _mouseMovedWithMarkedText() to
+        check whether the currently hovered element could qualify to relase the
+        hovered token has fired.
+
+2013-03-26  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13505817> Debugger popovers don't appear for undefined values
+
+        Handle the RemoteObject type "undefined" and also implement better
+        handling of null Object values as well.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.tokenWasHovered.populate):
+        (WebInspector.SourceCodeTextEditor.prototype.tokenWasHovered):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForObject):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForNull):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForUndefined):
+
+2013-03-26  Jessie Berlin  <jberlin@apple.com>
+
+        Ran update-safari-localizable-strings.
+
+        Reviewed by Conrad Shultz.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+2013-03-26  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13439854> REGRESSION: Copying array or object output does not contain values
+
+        We now simply use the _formattedMessage DOM node if available and
+        if the message isn't a stack trace. Then, we insert the URL line,
+        with repeat count if set, after the first line.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ConsoleMessageImpl.js:
+        (WebInspector.ConsoleMessageImpl.prototype.toClipboardString):
+
+2013-03-26  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13345023> Logging an Array after it has been sorted results in its undefined elements not being shown
+
+        Merging code from OpenSource to match the handling of arrays in the Console.
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/ConsoleMessageImpl.js:
+        (WebInspector.ConsoleMessageImpl.prototype._formatParameterAsArray):
+        (WebInspector.ConsoleMessageImpl.prototype.appendUndefined):
+        (WebInspector.ConsoleMessageImpl.prototype._printArray):
+        * UserInterface/RemoteObject.js:
+        (WebInspector.RemoteObject.prototype.release):
+        (WebInspector.RemoteObject.prototype.arrayLength):
+
+2013-03-25  Timothy Hatcher  <timothy@apple.com>
+
+        Don't include the main frame document as a separate resource in the sidebar.
+
+        <rdar://problem/13484805> REGRESSION: Main frame is included twice in the Resources sidebar
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype._addFrameTreeFromFrameResourceTreePayload):
+        Skip resources with type "Document" and with the same url as the frame.
+
+2013-03-25  Timothy Hatcher  <timothy@apple.com>
+
+        Fix large image scaling after the switch to the new flex model
+
+        <rdar://problem/13493712> REGRESSION: Very poor image squishing when content
+        window is narrow / image is large (113222)
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ImageResourceContentView.css:
+        (.content-view.resource.image):
+        (.content-view.resource.image img):
+        Use min-width: 0 so the image can shrink.
+
+2013-03-24  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Turn on support for breakpoints in pretty printed resources and SourceMaps
+
+        We are now getting expected column information from the backend and
+        hitting breakpoints on columns as expected. This was the last change
+        needed to consider the following tasks complete:
+        <rdar://problem/11219771> REGRESSION (Safari 6): Can't pretty-print JavaScript
+        <rdar://problem/11735116> PARITY (WebKit Web Inspector): Missing Source Map support
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DebuggerSidebarPanel.js:
+        (WebInspector.DebuggerSidebarPanel.prototype._treeElementSelected):
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._contentDidPopulate):
+        (WebInspector.SourceCodeTextEditor.prototype._activeCallFrameDidChange):
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointAdded):
+
+2013-03-24  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Workaround while still investigating <rdar://problem/13412969>.
+
+        Jump to line centered can still throw an exception when revealing a
+        when the content first loads (reveal pending line). So delay in
+        just that case.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.revealAndHighlightLine):
+        (WebInspector.TextEditor.prototype.revealLine):
+        (WebInspector.TextEditor.prototype._revealPendingLineIfPossible):
+
+2013-03-25  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13495086> Commands and their result should not be subject to search filtering
+
+        No longer filter out commands and their results based on search terms.
+        We also change the CSS class name we use to hide messages that may be
+        filtered out due to the search terms to be exclusive rather than
+        inclusive.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/LogContentView.css:
+        (.search-in-progress .console-item.filtered-out-by-search):
+        (.search-in-progress .console-item:not(.filtered-out-by-search) .highlighted):
+        (.search-in-progress .console-item:not(.filtered-out-by-search) .highlighted.selected):
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype._isMessageVisible):
+        (WebInspector.LogContentView.prototype._visibleMessages):
+        (WebInspector.LogContentView.prototype._performSearch):
+
+2013-03-25  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13494748> Expandable console items should only select when clicking outside of the expandable part
+
+        We no longer select messages if the hit area is part of an expandable element.
+        This makes it easier to expand nodes and JS objects without first having to
+        select the console message.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype._mousedown):
+        (WebInspector.LogContentView.prototype._targetInMessageCanBeSelected):
+
+2013-03-25  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13495023> JS objects logged to console can't be expanded using keyboard
+
+        We now also handle expansion of JS objects logged to the console. To support this,
+        we add a new VisibleContentDidChange event to WebInspector.Section such that we can
+        when the visible content of a given WebInspector.ObjectPropertiesSection is updated,
+        since there is no onexpand() method available as is the case with TreeOutline.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype._leftArrowWasPressed):
+        (WebInspector.LogContentView.prototype._rightArrowWasPressed.else.bind):
+        (WebInspector.LogContentView.prototype._rightArrowWasPressed):
+        (WebInspector.LogContentView.prototype._propertiesSectionDidUpdateContent):
+        * UserInterface/ObjectPropertiesSection.js:
+        (WebInspector.ObjectPropertiesSection.prototype.updateProperties):
+        * UserInterface/Section.js:
+        (WebInspector.Section):
+        (WebInspector.Section.prototype.expand):
+
+2013-03-25  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13416461> Message repeat count causes bad layout in the Console
+
+        We now always display the warning or error icon as well as the repeat count
+        for the message, and we copy the repeat count to the clipboard as well.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ConsoleMessageImpl.js:
+        (WebInspector.ConsoleMessageImpl.prototype.updateRepeatCount):
+        (WebInspector.ConsoleMessageImpl.prototype.toClipboardString):
+        * UserInterface/LogContentView.css:
+        (.console-message .bubble):
+
+2013-03-25  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13493775> Console log should scroll to reveal messages for highlighted search match
+
+        Make sure we scroll to reveal messages upon highlighting a match.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype._highlightSearchMatchAtIndex):
+
+2013-03-24  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13418317> REGRESSION: DOM Tree "Edit as HTML" is not inserting newlines with return
+
+        Give multiline WebInspector.startEditing edit boxes have better white-space behavior.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Editing.css:
+        (.editing.multiline):
+        * UserInterface/EditingSupport.js:
+
+2013-03-24  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13491916> Searching forward or back in find banner should reveal in center
+
+        Reviewed by Dean Jackson.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype._revealSearchResult):
+        (WebInspector.TextEditor.prototype._isPositionVisible):
+        (WebInspector.TextEditor.prototype._scrollIntoViewCentered):
+        When revealing a search result, reveal the line centered in
+        the editor if needed. Don't do the setTimeout, the lines in
+        the editor did not change so we shouldn't need to worry about
+        the CodeMirror exception.
+
+        (WebInspector.TextEditor.prototype.revealAndHighlightLine):
+        Share the isPositionVisible code.
+
+        (WebInspector.TextEditor.prototype._prettyPrint):
+        This is the only case where I know we need the setTimeout delay
+        to workaround a CodeMirror exception when autoformatting.
+
+2013-03-23  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13491257> CSS pretty printing no longer works
+
+        For CSS there is now a "css-base" mode with a "text/css" variant,
+        and a "text/x-scss" variant. There is a convenience mode "css"
+        which explicitly gets the "text/css" variant of the "css-base" mode.
+
+        The pretty printer should extend "css-base". Whether the content
+        is "text/css" or "text/x-scss" the mode outputting the tokens will
+        be "css-base", and that mode needs to have the pretty printer
+        extensions.
+
+        Extend the "css-base" mode, instead of the overly specific text/css
+        css mode to have extendedToken and alternate name "css". So, as
+        "css-base" creates tokens for either "text/css" or "text/x-scss",
+        it will adds our "m-css" style classes and get our styles.
+
+        We still define the "css-rule" mode to be an alias of the text/css
+        specific mode. To workaround a limitation of CodeMirror, we don't
+        re-extend any properties that have already been extended (token,
+        alternate name) and only extend new properties. We get the earlier
+        extensions because internally when creating a "css-rule" mode,
+        CodeMirror get the text/css variant of "css-base" with "css-base"
+        extensions and then applies our extensions on top of that.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CodeMirrorFormatters.js:
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.hasFormatter):
+        * UserInterface/CodeMirrorAdditions.js:
+
+2013-03-23  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13490780> Find banner status does not update after switching between source files
+
+        When switching content views, reset the find banner and perform a
+        search with the find banner's query in the new content view so that
+        keyboard shortcuts will work in the new content view even though
+        the find banner is hidden.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView.prototype.get hasPerformedSearch):
+        (WebInspector.ContentView.prototype.set automaticallyRevealFirstSearchResult):
+        Properties used by ContentBrowser to update the find banner when
+        switching to the ContentView. Allow a search to be performed on
+        a ContentView without automatically jumping to the first result.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser):
+        (WebInspector.ContentBrowser.prototype._findBannerDidShow):
+        (WebInspector.ContentBrowser.prototype._findBannerDidHide):
+        Allow or disallow jumping to the first search result based on banner visibility.
+        Keyboard shortcuts will still work.
+
+        (WebInspector.ContentBrowser.prototype._updateFindBanner):
+        (WebInspector.ContentBrowser.prototype._currentContentViewDidChange):
+        When the content view changes, update the banner. Search the new
+        content view so that keyboard shortcuts work.
+
+        * UserInterface/FindBanner.js:
+        (WebInspector.FindBanner.prototype.show):
+        (WebInspector.FindBanner.prototype.hide):
+        Emit events for when the banner shows or hides.
+
+        * UserInterface/ClusterContentView.js:
+        (WebInspector.ClusterContentView.prototype.get hasPerformedSearch):
+        (WebInspector.ClusterContentView.prototype.set automaticallyRevealFirstSearchResult):
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView.prototype.get hasPerformedSearch):
+        (WebInspector.DOMTreeContentView.prototype.set automaticallyRevealFirstSearchResult):
+        (WebInspector.DOMTreeContentView.prototype.performSearch.searchResultsReady):
+        (WebInspector.DOMTreeContentView.prototype.performSearch):
+        * UserInterface/ScriptContentView.js:
+        (WebInspector.ScriptContentView.prototype.get hasPerformedSearch):
+        (WebInspector.ScriptContentView.prototype.set automaticallyRevealFirstSearchResult):
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor):
+        (WebInspector.TextEditor.prototype.set automaticallyRevealFirstSearchResult):
+        (WebInspector.TextEditor.prototype.addSearchResults.markRanges):
+        (WebInspector.TextEditor.prototype.addSearchResults):
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.prototype.get hasPerformedSearch):
+        (WebInspector.TextResourceContentView.prototype.set automaticallyRevealFirstSearchResult):
+        Implement the new ContentView properties. Respect the 
+        automaticallyRevealFirstSearchResult property by not jumping to the
+        first result unless we are allowed too.
+
+2013-03-23  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Fix a typo causing warnings in the inspector.
+
+        Unreviewed.
+
+        * UserInterface/Main.html:
+
+2013-03-23  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/11682467> Should be able to do a Find in a Log
+
+        Add a search / filter bar to the navigation bar of the console log.
+        The search bar can be given focus by hitting Cmd+F, and it can provide
+        focus back to the console prompt by hitting Esc. or Enter (which also
+        highlights the first matching search result). The Cmd+G and Cmd+Shift+G
+        keyboard shortcuts also work as expected.
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController):
+        (WebInspector.JavaScriptLogViewController.prototype._promptKeyDown):
+        Add support for the new Cmd+F, Cmd+G and Cmd+Shift+G keyboard shortcuts.
+
+        * UserInterface/LogContentView.css:
+        (.log-search-bar > input):
+        (.search-in-progress .console-item):
+        (.search-in-progress .console-item.matches-search:not(.filtered-out)):
+        (.search-in-progress .console-item.matches-search .highlighted):
+        (.search-in-progress .console-item.matches-search .highlighted.selected):
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView):
+        Create the SearchBar.
+
+        (WebInspector.LogContentView.prototype.get navigationItems):
+        Add the SearchBar to the navigation bar.
+
+        (WebInspector.LogContentView.prototype.get searchInProgress):
+        Inidicates whether a search is in progress (ie. search term
+        isn't the empty string).
+
+        (WebInspector.LogContentView.prototype.focusSearchBar):
+        New API to bring focus to the SearchBar's input field.
+
+        (WebInspector.LogContentView.prototype.highlightPreviousSearchMatch):
+        New API to highlight the previous search match.
+
+        (WebInspector.LogContentView.prototype.highlightNextSearchMatch):
+        New API to highlight the next search match.
+
+        (WebInspector.LogContentView.prototype.searchBarWantsToLoseFocus):
+        SearchBar delegate method we use to move focus back to the prompt
+        as the user hit the Esc. key while the search bar has focus.
+
+        (WebInspector.LogContentView.prototype.searchBarDidActivate):
+        SearchBar delegate method we use to move focus back to the prompt
+        as the user hit the Enter key while the search bar has focus. We
+        also select the first search match to make it stand out.
+
+        (WebInspector.LogContentView.prototype._updateMessagesSelection):
+        Refactoring: _allVisibleMessages() is now _visibleMessages().
+
+        (WebInspector.LogContentView.prototype._isMessageVisible):
+        Take into account whether the message matches the search terms
+        so that it's filtered otherwise.
+
+        (WebInspector.LogContentView.prototype._selectAllMessages):
+        Refactoring: _allVisibleMessages() is now _visibleMessages().
+
+        (WebInspector.LogContentView.prototype._unfilteredMessages):
+        New method to provide the list of messsages that match the
+        filters provided via the scope bar.
+
+        (WebInspector.LogContentView.prototype._visibleMessages):
+        Refactoring: _allVisibleMessages() is now _visibleMessages().
+        Also take into account additional filtering via the search bar.
+
+        (WebInspector.LogContentView.prototype._filterMessages):
+        Perform a search after the filters have changed to ensure we
+        are showing the correct set of messages.
+
+        (WebInspector.LogContentView.prototype._keyDown):
+        Add support for the new Cmd+F, Cmd+G and Cmd+Shift+G keyboard shortcuts.
+
+        (WebInspector.LogContentView.prototype._commandFWasPressed):
+        Focus the search bar upon hitting Cmd+F.
+
+        (WebInspector.LogContentView.prototype._commandGWasPressed):
+        Highlight the next search match upon hitting Cmd+G.
+
+        (WebInspector.LogContentView.prototype._commandShiftGWasPressed):
+        Highlight the next search match upon hitting Cmd+Shift+G.
+
+        (WebInspector.LogContentView.prototype._upArrowWasPressed):
+        (WebInspector.LogContentView.prototype._downArrowWasPressed):
+        (WebInspector.LogContentView.prototype._previousMessage):
+        (WebInspector.LogContentView.prototype._nextMessage):
+        (WebInspector.LogContentView.prototype._clearFocusableChildren):
+        Refactoring: _allVisibleMessages() is now _visibleMessages().
+
+        (WebInspector.LogContentView.prototype._searchTextDidChange):
+        Run the search as the terms in the search bar changed.
+
+        (WebInspector.LogContentView.prototype._performSearch):
+        (WebInspector.LogContentView.prototype._highlightRanges):
+        Perform a search based on the text in the search bar and apply
+        a "matches-search" CSS class to all text ranges matching the
+        search terms. This is actually performed by method merged from
+        the OpenSource Web Inspector code.
+
+        (WebInspector.LogContentView.prototype._rangesOverlap):
+        Checks whether two text ranges overlap at all. We use this to identify
+        if the previously selected search term is still present in the new
+        set of matching search ranges.
+
+        (WebInspector.LogContentView.prototype._highlightSearchMatchAtIndex):
+        Highlights a given term in the array of highlighted elements created in
+        _performSearch().
+
+        * UserInterface/Main.html:
+        Include the new SearchBar files.
+
+        * UserInterface/Main.js:
+        (WebInspector.highlightRangesWithStyleClass):
+        (WebInspector.revertDomChanges):
+        Methods merged as-is from OpenSource.
+
+        * UserInterface/SearchBar.css: Added.
+        (.search-bar > input):
+        * UserInterface/SearchBar.js: Added.
+        (WebInspector.SearchBar):
+        (WebInspector.SearchBar.prototype.get text):
+        (WebInspector.SearchBar.prototype.set text):
+        (WebInspector.SearchBar.prototype.focus):
+        (WebInspector.SearchBar.prototype._handleSearchEvent):
+        (WebInspector.SearchBar.prototype._handleKeydownEvent):
+        New NavigationItem subclass to provide a SearchBar within a NavigationBar.
+
+2013-03-22  Timothy Hatcher  <timothy@apple.com>
+
+        Make the New Rule button 10px taller for a bigger hit target.
+
+        <rdar://problem/13470200> I expect the clickable area for "+ New Rule" to be bigger.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/RulesStyleDetailsPanel.css:
+        (.sidebar > .panel.details.css-style .rules .new-rule):
+
+2013-03-22  Timothy Hatcher  <timothy@apple.com>
+
+        Show the compression status and the compression amount in the Resource details sidebar.
+
+        <rdar://problem/13201070> Show gzip status of resources more prominently
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.get encodedSize): Added.
+        (WebInspector.Resource.prototype.get transferSize): Use encodedSize.
+        (WebInspector.Resource.prototype.get compressed): Added.
+
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel): Added compression group.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshRequestAndResponse): Call _refreshCompressed.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshCompressed): Added.
+
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshDecodedSize):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshTransferSize):
+        Call _refreshCompressed and update encoded size row.
+
+2013-03-21  Timothy Hatcher  <timothy@apple.com>
+
+        Add a placeholder for empty style rules in the Style details sidebar.
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/CSSStyleDeclarationTextEditor.css:
+        (.css-style-text-editor > .CodeMirror .CodeMirror-placeholder): Added.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent):
+        Set the placeholder option based on the readOnly state.
+
+2013-03-21  Timothy Hatcher  <timothy@apple.com>
+
+        Enable auto closing brackets and quotes along with matching bracket highlighting.
+
+        Also share common CodeMirror styles in CodeMirrorOverrides.css.
+
+        Reviewed by Dean Jackson.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.css:
+        (.css-style-text-editor > .CodeMirror):
+        (.css-style-text-editor > .CodeMirror-scroll):
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor):
+        * UserInterface/CodeMirrorOverrides.css: Added.
+        (.CodeMirror *):
+        (.CodeMirror .CodeMirror-lines):
+        (.CodeMirror pre):
+        (.CodeMirror .CodeMirror-selected):
+        (.CodeMirror.CodeMirror-focused .CodeMirror-selected):
+        (.CodeMirror .CodeMirror-cursor):
+        (.CodeMirror .CodeMirror-lines .CodeMirror-matchingbracket):
+        (.CodeMirror .CodeMirror-lines .CodeMirror-nonmatchingbracket):
+        (.CodeMirror .CodeMirror-gutters):
+        (.CodeMirror .CodeMirror-linenumber):
+        * UserInterface/Main.html:
+        * UserInterface/TextEditor.css:
+        (.text-editor > .CodeMirror):
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor):
+
+2013-03-21  Timothy Hatcher  <timothy@apple.com>
+
+        Update CodeMirror to ToT (v3.11+) which includes a scroll performance file and other changes.
+
+        Include the new placeholder and closebrackets add-ons so we can use them in our editors.
+        Also includes more modes that could be encountered on the web that we should syntax highlight.
+        I've included the SQL mode since I plan to switch the database prompt to use it soon.
+
+        <rdar://problem/13470814> Scrolling in the Style > Rules sidebar is kind of sluggish
+
+        Rubber-stamped by Joseph Pecoraro.
+
+        * UserInterface/External/CodeMirror/clojure.js: Added.
+        * UserInterface/External/CodeMirror/closebrackets.js: Added.
+        * UserInterface/External/CodeMirror/codemirror.css: Updated.
+        * UserInterface/External/CodeMirror/codemirror.js: Updated.
+        * UserInterface/External/CodeMirror/coffeescript.js: Added.
+        * UserInterface/External/CodeMirror/css.js: Updated.
+        * UserInterface/External/CodeMirror/less.js: Added.
+        * UserInterface/External/CodeMirror/livescript.js: Added.
+        * UserInterface/External/CodeMirror/placeholder.js: Added.
+        * UserInterface/External/CodeMirror/sass.js: Added.
+        * UserInterface/External/CodeMirror/searchcursor.js: Updated.
+        * UserInterface/External/CodeMirror/sql.js: Added.
+        * UserInterface/External/CodeMirror/xml.js: Updated.
+        * UserInterface/Main.html: Include added files.
+
+2013-03-21  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13439837> REGRESSION: Copying the output of console.log(1,2,3) only copies "[Log] 1"        
+
+        Use the _message property rather than _messageText to provide the base
+        textual representation of a console message, as hinted by the _formatMessage
+        method which says that _message "is used for inline message bubbles in
+        SourceFrames, or other plain-text representations".
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/ConsoleMessageImpl.js:
+        (WebInspector.ConsoleMessageImpl.prototype.toClipboardString):
+
+2013-03-20  Timothy Hatcher  <timothy@apple.com>
+
+        Make the relaod button appear correctly when inspecting web archives.
+
+        <rdar://problem/13455883> Extra misplaced folder in Inspector sidebar
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ResourceTreeElement.css:
+        (.item.resource > .status > .reload-button):
+        (.item.resource.selected > .status > .reload-button):
+        Use .resource instead of .resource-type-document. Since the button exists
+        for web archives, and they get .resource-type-other. Fixing web archives
+        to get a proper type is tracked by <rdar://problem/6420783>.
+
+2013-03-20  Timothy Hatcher  <timothy@apple.com>
+
+        Correct some inconsistencies with opening the Inspector and what content views are opened.
+
+        <rdar://problem/12947914> Opening web inspector with Show Page Resources can open inspector in inconsistent state
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.showResources):
+        (InspectorFrontendAPI.showMainResourceForFrame):
+        Set ignoreLastContentCookie so the ResourceSidebarPanel has a chance to show the content view for the main frame
+        once the main frame is known.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        Set collapsed after loading the pending frontend commands are dispatched so only the final selected sidebar panel
+        gets shown and has a say in what content view gets shown. Also removed code that collapsed the details sidebar,
+        now that sidebars are collapsed by default.
+
+        (WebInspector.sidebarPanelForCurrentContentView): Added.
+
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel.prototype.shown):
+        Only select the selected tree element again if the content view is from a different sidebar. This way showing the
+        Resources sidebar when you have gone back and forth between other resource wont jump to some old selected resource.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameDidChange):
+        Allow onselect if we aren't showing a content view yet. That way the main frame is selected and shown in the content.
+
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar):
+        (WebInspector.Sidebar.prototype.set width):
+        Make collapsed by default. Only tell the sidebar panel about width changes if not collapsed.
+
+2013-03-20  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13442600> Picking a frame in the console context selector menu should refocus the console input
+
+        Detect when the hidden <select> in the HierarchicalPathComponent was
+        interacted with, even if its value did not change, and trigger a
+        "Clicked" event for those interested. The Console refocuses its prompt
+        in these cases when the execution context selector is interacted with.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/HierarchicalPathComponent.js:
+        (WebInspector.HierarchicalPathComponent):
+        (WebInspector.HierarchicalPathComponent.prototype._selectElementMouseUp):
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole.prototype._createExecutionContextPathComponent):
+        (WebInspector.QuickConsole.prototype._removeExecutionContextPathComponentForFrame):
+        (WebInspector.QuickConsole.prototype._pathComponentClicked):
+
+2013-03-20  Timothy Hatcher  <timothy@apple.com>
+
+        Make editing CSS resources work correctly again.
+
+        <rdar://problem/13457053> Safari Web Inspector: Editing .css files in main area is jumpy (112750)
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager.prototype._resourceContentDidChange.applyStyleSheetChanges.styleSheetFound):
+        (WebInspector.CSSStyleManager.prototype._resourceContentDidChange.applyStyleSheetChanges):
+        (WebInspector.CSSStyleManager.prototype._resourceContentDidChange):
+        (WebInspector.CSSStyleManager.prototype._updateResourceContent.fetchedStyleSheetContent):
+        We were relying on SourceCode.Event.ContentDidChange not firing if the content was equal. However, since we
+        coalesce changes the content might be briefly out of sync and the event was firing. That would cause us to
+        update TextEditor with a slightly older version of the content and mess up the user.
+
+2013-03-19  Timothy Hatcher  <timothy@apple.com>
+
+        Don't create a new console group on reload if the current one is empty.
+
+        Also make sure to scroll the new group into view when it is create so it is visible and ready to show new messages.
+
+        <rdar://problem/12951299> Web Inspector console shouldn't draw a line on refresh if nothing was printed
+        <rdar://problem/13209212> Console doesn't scroll to the bottom when a reloaded page logs
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ConsoleGroup.js:
+        (WebInspector.ConsoleGroup.prototype.hasMessages): Added.
+
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController.prototype.startNewSession):
+        Reuse the previous group if it does not have messages. Also scroll the new session into view so it is ready
+        to show messages.
+
+        * UserInterface/LogContentView.css:
+        (.console-group.new-session .console-group-messages .console-item:first-child): Added.
+        Don't show a border when it is in a new-session since there is already a dashed border.
+
+2013-03-19  Timothy Hatcher  <timothy@apple.com>
+
+        Don't show storage if we don't have a security origin (about:blank).
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/StorageManager.js:
+        (WebInspector.StorageManager.prototype._securityOriginDidChange):
+
+2013-03-19  Timothy Hatcher  <timothy@apple.com>
+
+        Don't refresh the metrics display if the user is incrementing/decrementing via the arrow keys.
+
+        When editing is committed or canceled we do a refresh to pick up any changes.
+
+        <rdar://problem/13441338> REGRESSION: Safari Web Inspector: Using Up/Down to
+        modify margins loses focus (112566)
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/BoxModelDetailsSectionRow.js:
+        (WebInspector.BoxModelDetailsSectionRow.prototype._refresh): Return early if _ignoreNextRefresh.
+        (WebInspector.BoxModelDetailsSectionRow.prototype._handleKeyDown): Set _ignoreNextRefresh.
+
+2013-03-19  Timothy Hatcher  <timothy@apple.com>
+
+        Make Local and Session storage work again.
+
+        <rdar://problem/13266278> REGRESSION: Local and Session storage protocol
+        changes break displaying these items
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMStorageObject.js:
+        (WebInspector.DOMStorageObject.prototype.getEntries):
+        Use DOMStorageAgent.getDOMStorageEntries or DOMStorageAgent.getDOMStorageItems.
+
+        * UserInterface/DOMStorageObserver.js:
+        (WebInspector.DOMStorageObserver.prototype.addDOMStorage):
+        Revert earlier Curie compatibility support since it changed again!
+
+        * UserInterface/StorageManager.js:
+        (WebInspector.StorageManager):
+        (WebInspector.StorageManager.prototype._securityOriginDidChange): Added.
+        (WebInspector.StorageManager.prototype._domStorageForId):
+        When a Frame's security origin changes, add local and session storage if they don't
+        already exist for that security origin.
+
+2013-03-19  Timothy Hatcher  <timothy@apple.com>
+
+        Add securityOrigin to WebInspector.Frame.
+
+        This will be needed to fix DOM Storage inspection.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Frame.js:
+        (WebInspector.Frame):
+        (WebInspector.Frame.prototype.initialize):
+        (WebInspector.Frame.prototype.get securityOrigin): Added.
+        Added securityOrigin parameters. Also fire the NameDidChange at the end of initialize
+        so the Frame is in the final state instead of an intermediate state.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.frameDidNavigate):
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWillBeSent):
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWasServedFromMemoryCache):
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidReceiveResponse):
+        (WebInspector.FrameResourceManager.prototype._addNewResourceToFrame):
+        (WebInspector.FrameResourceManager.prototype._createFrame):
+        Pass along the securityOrigin so Frame can be created or initialized with it.
+        Also pass along the frame name in places it was missing, now that we might need it.
+
+2013-03-19  Timothy Hatcher  <timothy@apple.com>
+
+        Update InspectorBackendCommands to the latest.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/InspectorBackend.js:
+        (InspectorBackendClass.prototype._getAgent):
+        (InspectorBackendClass.prototype.registerCommand):
+        (InspectorBackendClass.prototype.registerEnum):
+        Added support for registerEnum, which is new.
+
+        * UserInterface/InspectorBackendCommands.js:
+        Updated to the latest from Open Source r146200.
+
+2013-03-18  Timothy Hatcher  <timothy@apple.com>
+
+        Make console messages bottom align if the log hasn't scrolled yet.
+
+        Also includes:
+        * Restore clicking the empty space in the log to focus the prompt.
+        * Make the prompt top border lighten when the log view is showing.
+
+        <rdar://problem/13442215> Maybe improve console typing UI (112588)
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ConsoleGroup.js:
+        (WebInspector.ConsoleGroup.prototype.addMessage):
+        * UserInterface/LogContentView.css:
+        (.console-messages):
+        (.console-messages :first-child):
+        Use flex layout and an auto top margin to push items to the bottom until scrolled.
+
+        (.console-item):
+        (.console-user-command .console-message):
+        Move the border to the top since items are bottom aligned now.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype._mousedown):
+        Focus the prompt if the click was in empty space.
+
+        * UserInterface/Main.js:
+        (WebInspector.showSplitConsole):
+        (WebInspector.hideSplitConsole):
+        (WebInspector.showFullHeightConsole):
+        (WebInspector._contentBrowserCurrentContentViewDidChange):
+        Notify the QuickConsole via consoleLogVisibilityChanged when the log view shows
+        or hides in the main content browser or split content browser.
+
+        * UserInterface/QuickConsole.css:
+        (.quick-console.showing-log): Added. Lighten the border color.
+
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole.prototype.consoleLogVisibilityChanged): Added.
+        Add or remove the showing-log style class.
+
+2013-03-17  Timothy Hatcher  <timothy@apple.com>
+
+        Tweak how the console view and split console work.
+
+        Clicking the console button will always show the console full height. The console button
+        is only blue when the console view is full height. Pressing escape always shows the split
+        console. Add support for allowing the content view to decide if the split console can be
+        shown. If it can't the full height console is shown instead.
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/ClusterContentView.js:
+        (WebInspector.ClusterContentView.prototype.get supportsSplitContentBrowser):
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView.prototype.get supportsSplitContentBrowser):
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer.prototype._showContentView):
+        (WebInspector.ContentViewContainer.prototype._hideContentView):
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel):
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView):
+        (WebInspector.LogContentView.prototype.didAppendConsoleMessage):
+        (WebInspector.LogContentView.prototype._toggleSplit):
+        * UserInterface/Main.js:
+        (WebInspector.loaded):
+        (WebInspector.contentLoaded):
+        (WebInspector.isShowingSplitConsole):
+        (WebInspector.currentViewSupportsSplitContentBrowser):
+        (WebInspector.toggleSplitConsole):
+        (WebInspector.showSplitConsole):
+        (WebInspector.hideSplitConsole):
+        (WebInspector.showFullHeightConsole):
+        (WebInspector.isShowingConsoleView):
+        (WebInspector.showConsoleView):
+        (WebInspector.toggleConsoleView):
+        (WebInspector._contentBrowserCurrentContentViewDidChange):
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole.prototype._toggleOrFocus):
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView.prototype.get supportsSplitContentBrowser):
+
+2013-03-18  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13443806> Safari Web Inspector: Point-to-inspect mode breaks when Node details sidebar open (112607)
+
+        Fix typos that could cause exceptions.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/EventListenerSectionGroup.js:
+        (WebInspector.EventListenerSectionGroup.prototype._functionTextOrLink):
+
+2013-03-17  Timothy Hatcher  <timothy@apple.com>
+
+        Stop scaling the MoreColumns.pdf and LessColumns.pdf images.
+
+        Reviewed by Jon Honeycutt.
+
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .data-grid th.collapser > .collapser-button):
+        * UserInterface/TimelinesContentView.js:
+
+2013-03-17  Timothy Hatcher  <timothy@apple.com>
+
+        Only call SidebarPanel's shown and hidden when the visibility actually changes.
+
+        This was causing the Console view to not be remembered between sessions because the
+        InstrumentsPanel was selecting a tree element in the shown function, even though
+        the sidebar panel was not visible.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar.prototype.set selectedSidebarPanel):
+        (WebInspector.Sidebar.prototype.set collapsed):
+
+2013-03-17  Timothy Hatcher  <timothy@apple.com>
+
+        Speed up Web Inspector image generation some by using Uint32Array.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ImageUtilities.js:
+        (generateColoredImage):
+        (generateEmbossedImages._invertMaskImage):
+        Use Uint32Array to process the pixels faster. Account for endianness (even though we don't
+        really need to since we don't support Windows or PowerPC.)
+
+        * UserInterface/Utilities.js:
+        (Uint32Array.isLittleEndian): Added.
+
+2013-03-17  Timothy Hatcher  <timothy@apple.com>
+
+        Cache and restore generated images to speed up the load time for the Web Inspector.
+
+        <rdar://problem/13436334> Web Inspector takes about 3s to activate
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem.prototype._generateImages):
+        Pass !this._imageCacheable to generateEmbossedImages.
+
+        * UserInterface/ImageUtilities.js:
+        (generateColoredImage):
+        Don't set globalCompositeOperation to "clear" before using webkitPutImageDataHD.
+
+        (generateColoredImagesForCSS):
+        (generateColoredImagesForCSS.imageLoaded): Added.
+        (generateColoredImagesForCSS.ensureImageIsLoaded): Added.
+        (generateColoredImagesForCSS.restoreImages): Added.
+        (generateColoredImagesForCSS.restoreImage): Added.
+        (generateColoredImagesForCSS.devicePixelRatioChanged): Added.
+        (generateColoredImagesForCSS.generateImagesIfNeeded): Renamed from generateImages.
+        (generateColoredImagesForCSS.generateImagesIfNeeded.generateActiveImages):
+        (generateColoredImagesForCSS.generateImage):
+        Try to restore the images first. If needed, load the image and regenerate them.
+
+        (_createImageLocalStorageKey): Added.
+        (saveImageToLocalStorage): Added.
+        (restoreImageFromLocalStorage): Added.
+        (restoreImageFromLocalStorage.parseVersion): Added.
+        Save and restore images via pixel arrays with localStorage. Abort the restore
+        if versions mismatch or the array size isn't correct.
+
+        (generateEmbossedImages):
+        (generateEmbossedImages.imageLoaded): Added.
+        (generateEmbossedImages.ensureImageIsLoaded): Added.
+        (generateEmbossedImages.restoreImages): Added.
+        (generateEmbossedImages.restoreImage): Added.
+        (generateEmbossedImages.devicePixelRatioChanged): Added.
+        (generateEmbossedImages.generateImagesIfNeeded): Added.
+        (generateEmbossedImages.generateImagesIfNeeded.generateActiveImages):
+        (generateEmbossedImages.generateImage): Renamed from _createEmbossedCanvasImage.
+        Try to restore the images first. If needed, load the image and regenerate them.
+
+        (generateEmbossedImages._invertMaskImage):
+        (generateEmbossedImages._applyImageMask):
+        Don't set globalCompositeOperation to "clear" before using webkitPutImageDataHD.
+
+        * UserInterface/ToggleButtonNavigationItem.js:
+        Mark the image as not cacheable. We need to swap images with the same identifiers.
+
+2013-03-17  Timothy Hatcher  <timothy@apple.com>
+
+        Make generateColoredImagesForCSS require passing image width and height.
+
+        This will be needed to cache and restore generated images for <rdar://problem/13436334>.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationSection.js:
+        (WebInspector.CSSStyleDeclarationSection):
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGrid.prototype._generateSortIndicatorImagesIfNeeded):
+        * UserInterface/DetailsSection.js:
+        (WebInspector.DetailsSection.prototype._generateDisclosureTrianglesIfNeeded):
+        * UserInterface/FindBanner.js:
+        (WebInspector.FindBanner.prototype._generateButtonsGlyphsIfNeeded):
+        * UserInterface/ImageUtilities.js:
+        (generateColoredImagesForCSS):
+        * UserInterface/Main.js:
+        (WebInspector._generateDisclosureTriangleImages):
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel.prototype._generateDisclosureTrianglesIfNeeded):
+
+2013-03-17  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Simplify giving ExecutionContexts for Frames a name
+
+        Reviewed by Dean Jackson.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.executionContextCreated):
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole.prototype._createExecutionContextPathComponentFromFrame):
+        Make both iOS 6 and trunk use the frame's main resource's display name.
+
+2013-03-17  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Clean-up Weight.svg a little more.
+
+        Rubber-stamped by Timothy Hatcher.
+
+        * UserInterface/Images/Weight.svg:
+        Removed the path id, and extra processing instruction attribute.
+
+2013-03-17  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Add Execution Context / Frame selector to the QuickConsole
+
+        <rdar://problem/10809363> PARITY (WebKit Web Inspector): UI for evaluating in different windows / frames from the console is missing
+
+        Reviewed by Dean Jackson.
+
+        * UserInterface/ExecutionContext.js:
+        (WebInspector.ExecutionContext):
+        Allow an execution context with the special undefined identifier.
+
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype.get sizesToFit):
+        * UserInterface/QuickConsoleNavigationBar.js:
+        (WebInspector.QuickConsoleNavigationBar.prototype.get sizesToFit):
+        * UserInterface/HierarchicalPathNavigationItem.js:
+        (WebInspector.HierarchicalPathNavigationItem.prototype.updateLayout):
+        The QuickConsoleNavigationBar stretches. Respect that laying out a hierarchical path.
+
+        * UserInterface/HierarchicalPathComponent.css:
+        (.hierarchical-path-component > .selector-arrows):
+        (.hierarchical-path-component.text-only):
+        (.hierarchical-path-component.text-only > select):
+        * UserInterface/HierarchicalPathComponent.js:
+        (WebInspector.HierarchicalPathComponent):
+        * UserInterface/Images/UpDownArrows.svg: Added.
+        Allow creating a text only HierarchicalPathComponent, and one that shows
+        up/down popup selector arrows.
+
+        * UserInterface/Frame.js:
+        (WebInspector.Frame.prototype.commitProvisionalLoad):
+        (WebInspector.Frame.prototype.clearExecutionContexts):
+        Send an event when clearing contexts. Provide a flag for when it happens
+        while a frame is navigating, in which case we would expect a new execution
+        context soon for the new page.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole):
+        Register for events necessary to fill a selector picker with frames.
+        iOS 6 needs to provide frame ids, so listen for added / removed frames.
+        Trunk and later use ExecutionContexts which Frames broadcast changes for.
+        Executing in the main frame uses "undefined".
+
+        (WebInspector.QuickConsole.prototype.get executionContextIdentifier):
+        This is the selected identifier (contextId or frameId on iOS 6). If no
+        selector is shown, this will still be the main frame execution context.
+
+        (WebInspector.QuickConsole.prototype._executionContextPathComponentsToDisplay):
+        (WebInspector.QuickConsole.prototype._rebuildExecutionContextPathComponents):
+        Update the nav bar components. There is a single segment, with the selected component.
+
+        (WebInspector.QuickConsole.prototype._framePageExecutionContextsCleared):
+        (WebInspector.QuickConsole.prototype._framePageExecutionContextsChanged):
+        Trunk, event handlers when frames get and clear execution contexts. When a frame
+        navigates we have a little bit of logic to reselect that frame when its new
+        execution context comes in.
+
+        (WebInspector.QuickConsole.prototype._frameAdded):
+        (WebInspector.QuickConsole.prototype._frameRemoved):
+        (WebInspector.QuickConsole.prototype._frameMainResourceChanged):
+        iOS 6 support. Track frame adds, removes, and resource changes to update the display.
+
+        (WebInspector.QuickConsole.prototype._createExecutionContextPathComponent):
+        (WebInspector.QuickConsole.prototype._createExecutionContextPathComponentFromFrame):
+        Helpers for creating path components. Handles iOS 6 and trunk to get the right id.
+
+        (WebInspector.QuickConsole.prototype._compareExecutionContextPathComponents):
+        (WebInspector.QuickConsole.prototype._insertExecutionContextPathComponentForFrame):
+        (WebInspector.QuickConsole.prototype._removeExecutionContextPathComponentForFrame):
+        (WebInspector.QuickConsole.prototype._updateExecutionContextPathComponentForFrame):
+        PathComponents are a linked list. We display them sorted. These are helpers for
+        inserting, removing, and updating a path component in that list.
+
+        (WebInspector.QuickConsole.prototype._pathComponentSelected):
+        (WebInspector.QuickConsole.prototype._debuggerActiveCallFrameDidChange):
+        Changes to the state of the inspector that may require the UI to update.
+
+        * UserInterface/JavaScriptTextPrompt.js:
+        (WebInspector.JavaScriptTextPrompt.prototype.evalInInspectedWindow):
+        Evaluate in the context selected in the QuickConsole.
+
+2013-03-17  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Create an ExecutionContextList class.
+
+        <rdar://problem/10809363> PARITY (WebKit Web Inspector): UI for evaluating in different windows / frames from the console is missing
+
+        There may be many ExecutionContexts for a page, one for each isolated
+        world in the frame. Store each context for a frame in an ExecutionContext
+        and provide an accessor for the one that is the page context.
+
+        This also converges on the name "pageExecutionContext" instead of
+        "mainExecutionContext" for the special context of the page.
+
+        Reviewed by Dean Jackson.
+
+        * UserInterface/Main.html:
+        * UserInterface/ExecutionContextList.js: Added.
+        (WebInspector.ExecutionContextList):
+        (WebInspector.ExecutionContextList.prototype.get pageExecutionContext):
+        (WebInspector.ExecutionContextList.prototype.get contexts):
+        (WebInspector.ExecutionContextList.prototype.add):
+        (WebInspector.ExecutionContextList.prototype.clear):
+        ExecutionContextList holds a list of contexts and has a quick
+        accessor for the page execution context.
+
+        * UserInterface/Frame.js:
+        (WebInspector.Frame):
+        (WebInspector.Frame.prototype.get pageExecutionContext):
+        (WebInspector.Frame.prototype.get executionContextList):
+        (WebInspector.Frame.prototype.clearExecutionContexts):
+        (WebInspector.Frame.prototype.addExecutionContext):
+        Updated to use an ExecutionContextList.
+
+        * UserInterface/DOMTree.js:
+        (WebInspector.DOMTree):
+        (WebInspector.DOMTree.prototype.requestRootDOMNode):
+        (WebInspector.DOMTree.prototype._requestRootDOMNode):
+        (WebInspector.DOMTree.prototype._framePageExecutionContextChanged):
+        Updated from mainExecutionContext to pageExecutionContext.
+
+2013-03-16  Timothy Hatcher  <timothy@apple.com>
+
+        Move the debugger controls from the quick console to the debugger sidebar.
+
+        Also dynamically add and remove the call stack section so it isn't an eyesore
+        when you are not paused.
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/DebuggerSidebarPanel.css: Added.
+        (.sidebar > .panel.debugger > .content):
+        (.sidebar > .panel.debugger > .navigation-bar):
+        * UserInterface/DebuggerSidebarPanel.js:
+        (WebInspector.DebuggerSidebarPanel):
+        (WebInspector.DebuggerSidebarPanel.prototype._debuggerPauseResumeButtonClicked):
+        (WebInspector.DebuggerSidebarPanel.prototype._debuggerStepOverButtonClicked):
+        (WebInspector.DebuggerSidebarPanel.prototype._debuggerStepIntoButtonClicked):
+        (WebInspector.DebuggerSidebarPanel.prototype._debuggerStepOutButtonClicked):
+        (WebInspector.DebuggerSidebarPanel.prototype._debuggerDidPause):
+        (WebInspector.DebuggerSidebarPanel.prototype._debuggerDidResume):
+        (WebInspector.DebuggerSidebarPanel.prototype._debuggerCallFramesDidChange):
+        (WebInspector.DebuggerSidebarPanel.prototype.deselectCallStackContentTreeElements): Added.
+        (WebInspector.DebuggerSidebarPanel.prototype._treeElementSelected):
+        * UserInterface/Main.html:
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole):
+        (WebInspector.QuickConsole.prototype._toggleOrFocus):
+
+2013-03-16  Timothy Hatcher  <timothy@apple.com>
+
+        Make the toolbar labels look better in window mode.
+
+        Rubber-stamped by Joseph Pecoraro.
+
+        * UserInterface/Toolbar.css:
+        (body:not(.docked) .toolbar .item.button > .label): Apply antialiased only to the labels
+        so we don't affect text in the dashboard. Also add a stroke to make the text heavier.
+
+2013-03-16  Timothy Hatcher  <timothy@apple.com>
+
+        Make toolbar items layout and collapse better at narrow window sizes.
+
+        <rdar://problem/13189092> Toolbar items can be laid out on top of each other with narrow window
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ButtonToolbarItem.css:
+        (.toolbar.collapsed .item.button > .label): Removed. We only use icon-only now.
+
+        * UserInterface/DashboardView.css:
+        (.toolbar.collapsed .dashboard): Added. Collapses when there is no room.
+
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype.updateLayout): Call customUpdateLayout() if it exists.
+
+        * UserInterface/Toolbar.css:
+        (.toolbar .item-section:not(.center)): Removed min-width and made flex be 1.
+        (.toolbar .item-section.left): Added right margin to prevent touching.
+        (.toolbar .item-section.center): Make flex be 2 so it can be a different width.
+        (.toolbar .item-section.right): Added a left margin to prevent touching.
+
+        * UserInterface/Toolbar.js:
+        (WebInspector.Toolbar.prototype.set displayMode): Revert the forced icon-only mode.
+
+        (WebInspector.Toolbar.prototype.customUpdateLayout.computeItemWidths): Added.
+        (WebInspector.Toolbar.prototype.customUpdateLayout.computeSectionWidths): Added.
+        (WebInspector.Toolbar.prototype.customUpdateLayout): Added.
+        Computes each section individually for overflow. If any section overflow switch to icon-only
+        mode when in horizontal-label mode. If any section overflows after that then collapse the
+        toolbar, which only hides the Dashboard right now.
+
+2013-03-16  Timothy Hatcher  <timothy@apple.com>
+
+        Make the labels in the Instruments sidebar be 11px instead of 10px.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/NavigationSidebarPanel.css:
+        Removed a rule that was making the font-size 10px. Only the Instruments
+        sidebar triggered this rule.
+
+2013-03-16  Timothy Hatcher  <timothy@apple.com>
+
+        Break-up the generation of images and delay the generation of
+        active images so the initial page load is faster.
+
+        <rdar://problem/13436334> Web Inspector takes about 3s to activate
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ImageUtilities.js:
+        (.generateImages.generateActiveImages): Added.
+        (.generateImages): Set a tiemout to call generateActiveImages.
+        (._generateImages.generateActiveImages): Added.
+        (._generateImages): Set a tiemout to call generateActiveImages.
+
+2013-03-15  Timothy Hatcher  <timothy@apple.com>
+
+        Sort resources by domain before sorting alphabetically by name.
+
+        This was suggested by someone on Twitter. It allows local resources to bubble
+        to the top and external resources (analytic scripts, etc.) to come later.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/GeneralTreeElement.js:
+        (WebInspector.GeneralTreeElement):
+        (WebInspector.GeneralTreeElement.prototype.set mainTitle):
+        (WebInspector.GeneralTreeElement.prototype.set subtitle):
+        Fallback to "" for mainTitle and subtitle.
+ 
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement.compareResourceTreeElements):
+        Sort resources by domain (subtitle) before sorting by name (mainTitle).
+
+2013-03-15  Jessie Berlin  <jberlin@apple.com>
+
+        Ran update-safari-localizable-strings.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+2013-03-14  Timothy Hatcher  <timothy@apple.com>
+
+        Display em-dashes instead of "0" for resources size and time to make it clear
+        the values are not known yet.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DashboardView.js:
+        (WebInspector.DashboardView.prototype.set time):
+        (WebInspector.DashboardView.prototype.set resourcesSize):
+
+2013-03-14  Timothy Hatcher  <timothy@apple.com>
+
+        Remove references to bottomUpHead. We can build the bottom-up tree locally.
+
+        The bottomUpHead is being removed from the protocol by https://webkit.org/b/112351.
+        Also remove references to TopDownTreeFactory and BottomUpTreeFactory with is dead code.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/JavaScriptProfileView.js:
+        (WebInspector.JavaScriptProfileView.prototype.get bottomUpProfileDataGridTree):
+
+2013-03-14  Timothy Hatcher  <timothy@apple.com>
+
+        Always specify overflow-x when specifying overflow-y.
+
+        Not specifying overflow-x causes it to be auto and can show scrollbars for wide content.
+        Also use auto instead of scroll in a few places to prevent scroll bars from always being
+        visible when the system prefers non-overlay scrollbars.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style > .content):
+        * UserInterface/LayerTreeSidebarPanel.css:
+        (.layer-tree.panel .data-container):
+        * UserInterface/LogContentView.css:
+        (.console-messages):
+        * UserInterface/Popover.css:
+        (.popover > .container):
+
+2013-03-14  Timothy Hatcher  <timothy@apple.com>
+
+        Remove the memory placeholder in the toolbar dashboard now that we deferred that feature.
+
+        This also evenly distributes the items for a better layout in all modes.
+
+        <rdar://problem/13237747> Dashboard items are not evenly distributed
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+
+        * UserInterface/DashboardView.css:
+        Overhauled the styles to use flex layout in all cases.
+
+        * UserInterface/DashboardView.js:
+        (WebInspector.DashboardView):
+        Removed memory and split resources into resourceCount and resourcesSize.
+
+        (WebInspector.DashboardView.prototype.set logs):
+        (WebInspector.DashboardView.prototype.set issues):
+        (WebInspector.DashboardView.prototype.set errors):
+        (WebInspector.DashboardView.prototype.set resourcesCount):
+        Call _formatPossibleLargeNumber and set the outlet.
+
+        (WebInspector.DashboardView.prototype.set resourcesSize):
+        Set the resourcesSize outlet instead of calling _updateResourcesOutlet.
+
+        (WebInspector.DashboardView.prototype._formatPossibleLargeNumber):
+        Added. This is a better approach to dealing with large numbers than ellipsis.
+
+        (WebInspector.DashboardView.prototype._appendElementForNamedItem):
+        Removed the double div. It is no longer needed to truncate since all the outlets
+        can't really go larger than 6 characters now.
+
+        (WebInspector.DashboardView.prototype._networkItemWasClicked):
+        Renamed from _timeWasClicked so resourcesSize can use it.
+
+        * UserInterface/Images/Weight.svg: Added.
+
+2013-03-13  Timothy Hatcher  <timothy@apple.com>
+
+        Mark DOM node styles as needing refreshed when an ancestor changes pseudo classes or any attributes change.
+
+        <rdar://problem/13412234> REGRESSION: Style details sidebar does not update when ancestor nodes change
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager): Add event listeners for all nodes.
+        (WebInspector.CSSStyleManager.prototype._nodePseudoClassesDidChange): Added.
+        (WebInspector.CSSStyleManager.prototype._nodeAttributesDidChange): Added.
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles): Remove event listeners on the single node.
+        (WebInspector.DOMNodeStyles.prototype.pseudoClassesDidChange): Added.
+        (WebInspector.DOMNodeStyles.prototype.attributeDidChange): Added.
+
+2013-03-13  Timothy Hatcher  <timothy@apple.com>
+
+        Always refresh the DOM node styles when visibility changes for the sidebar or separate panels.
+
+        <rdar://problem/13412234> REGRESSION: Style details sidebar does not update when ancestor nodes change
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.visibilityDidChange):
+        Call markAsNeedsRefresh instead of the removed refreshIfNeeded.
+
+        * UserInterface/StyleDetailsPanel.js:
+        (WebInspector.StyleDetailsPanel):
+        (WebInspector.StyleDetailsPanel.prototype.shown):
+        (WebInspector.StyleDetailsPanel.prototype.markAsNeedsRefresh):
+        (WebInspector.StyleDetailsPanel.prototype._refreshNodeStyles): Added.
+        (WebInspector.StyleDetailsPanel.prototype._nodeStylesRefreshed):
+        (WebInspector.StyleDetailsPanel.prototype._nodeStylesNeedsRefreshed):
+        Remove the concept of having a separate needs refresh flag. Instead we just call refresh on the DOMNodeStyles
+        and wait for the Refreshed event. This way we always get the latest styles when first showing the panel.
+
+2013-03-14  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13421555> Source code links should always show the original location
+
+        Location links will now show the original location normally, and
+        display a mapped / formatted display location in italics when hovered,
+        but only if such a location exists.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/LayoutTimelineDataGridNode.js:
+        (WebInspector.LayoutTimelineDataGridNode.prototype.createCellContent):
+        * UserInterface/Main.js:
+        (WebInspector.createSourceCodeLocationLink):
+        Use the SourceCodeLocation helpers to keep the contents live.
+
+        * UserInterface/Main.css:
+        (.display-location):
+        Make display locations italic.
+
+        * UserInterface/SourceCodeLocation.js:
+        (WebInspector.SourceCodeLocation.prototype.tooltipString):
+        (WebInspector.SourceCodeLocation.prototype.populateLiveDisplayLocationTooltip):
+        (WebInspector.SourceCodeLocation.prototype.populateLiveDisplayLocationString):
+        Different handlers to keep a tooltip or element property live.
+
+2013-03-14  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13418338> Show / Hide Shadow DOM should not change the selected node, or select the earliest ancestor
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMTreeOutline.js:
+
+2013-03-14  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13418332> Remove or selectively show "Show Shadow DOM" context menu, there is a nav bar button
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline.prototype.populateContextMenu):
+        (WebInspector.DOMTreeOutline.prototype._populateContextMenu):
+
+2013-03-14  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Improve JavaScript pretty printing of "finally"
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CodeMirrorFormatters.js:
+        * Tools/PrettyPrinting/CodeMirrorFormatters.js:
+
+2013-03-14  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Provide a SourceCodeLocation helper that keeps an element text up to date.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/LayoutTimelineDataGridNode.js:
+        (WebInspector.LayoutTimelineDataGridNode.prototype.createCellContent):
+        * UserInterface/SourceCodeLocation.js:
+        (WebInspector.SourceCodeLocation.prototype.setAndKeepElementDisplayLocationStringUpToDate):
+
+2013-03-14  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Let WebInspector.createSourceCodeLocationLink create a goToArrow
+
+        Reviewed by Timothy Hatcher.
+
+        This allows LayoutTimelineDataGridNode to use createSourceCodeLocationLink
+        and not remove its children.
+
+        * UserInterface/LayoutTimelineDataGridNode.js:
+        (WebInspector.LayoutTimelineDataGridNode.prototype.createCellContent):
+        * UserInterface/Main.js:
+        (.updateLinkDisplayStrings):
+        (WebInspector.createSourceCodeLocationLink):
+
+2013-03-14  Joseph Pecoraro  <pecoraro@apple.com>
+
+        WebInspector.createSourceCodeLocationLink use SourceCodeLocation's full power
+
+        Reviewed by Timothy Hatcher.
+
+        When a link is created with a source code location we can show the real
+        location (mapped location, formatted location, original location) and
+        update the link and tooltip when things change.
+
+        * UserInterface/EventListenerSectionGroup.js:
+        (WebInspector.EventListenerSectionGroup.prototype._functionTextOrLink):
+        Switch to from createSourceCodeLink to createSourceCodeLocationLink.
+
+        * UserInterface/Main.js:
+        (WebInspector.createSourceCodeLocationLink):
+        Update link text and tooltip when the location changes.
+
+        * UserInterface/SourceCodeLocation.js:
+        (WebInspector.SourceCodeLocation.prototype._locationString):
+        Use SourceCode.displayName and handle source codes without URLs if needed.
+
+2013-03-14  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13386143> REGRESSION (CodeMirror): Jump to line / reveal line should reveal closer to the middle of the editor never the top or bottom if possible
+
+        If revealLine is called with a line outside the visible set of lines
+        in the editor then scroll the editor to make that line the center.
+        This also behaves as expected for lines the start / end of a document.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.shown):
+        In order for cm.getScrollInfo() values to be valid after an editor is
+        reattached to the DOM Hierarchy we have to call refresh, and because of
+        the way CodeMirror works (coalescing changes in operations) the
+        getScrollInfo is only valid after the refresh operation. So remove the
+        wrapping operation here.
+
+        (WebInspector.TextEditor.prototype.set formatted):
+        If you pretty print a document do not send a change event and
+        cause the value to be sent to the backend. The frontend style
+        sidebar expects line and column numbers for the original
+        unformatted document.
+
+        (WebInspector.TextEditor.prototype.revealAndHighlightLine):
+        (WebInspector.TextEditor.prototype.revealLine):
+        (WebInspector.TextEditor.prototype._scrollIntoViewCentered):
+        (WebInspector.TextEditor.prototype._prettyPrint):
+        In revealLine or prettyPrint when we move the selection make a decision
+        whether or not to scroll the editor to put that line in the center.
+
+2013-03-14  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Update CodeMirror to ToT (v3.1+) which includes some JavaScript language and selection fixes
+
+        <rdar://problem/13396332> CodeMirror: Selection on lines that wrap more than once is incorrect
+
+        Rubber-stamped by Timothy Hatcher.
+
+        * UserInterface/External/CodeMirror/codemirror.js:
+        * UserInterface/External/CodeMirror/javascript.js:
+
+2013-03-14  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13410237> REGRESSION: Editing CSS resources no longer works (it is read-only)
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.set readOnly):
+
+2013-03-14  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13410257> Display the reason why a layer is composited
+
+        Retrieve the reason why the selected layer in the layer tree sidebar
+        panel is composited and display them in a popover anchored to the
+        selected data grid node, removing the popover when the inspector
+        loses focus or the data grid node is no longer selected.
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        Add new strings used to display the various compositing reasons.
+
+        * UserInterface/InspectorBackendCommands.js:
+        Add new LayerTree.reasonsForCompositingLayer() protocol method.
+
+        * UserInterface/LayerTreeManager.js:
+        (WebInspector.LayerTreeManager.prototype.reasonsForCompositingLayer):
+        Wrapper for the new LayerTree.reasonsForCompositingLayer() protocol
+        method.
+
+        * UserInterface/LayerTreeSidebarPanel.css:
+        (.layer-tree-popover):
+        (.layer-tree-popover p):
+        (.layer-tree-popover ul):
+        (.layer-tree-popover li):
+        Styles for the content displayed in a popover to show the compositing
+        reasons for the selected layer.
+
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel.prototype._selectedDataGridNodeChanged):
+        On top of highlighting the appropriate region in the canvas for the
+        selected layer, also show a popover with the reasons why it was
+        composited or remove the popover if there are no selected layers.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype._dataGridGainedFocus):
+        Show the popover for the selected data grid node.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype._dataGridLostFocus):
+        Hide the popover.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype._showPopoverForSelectedNode):
+        (WebInspector.LayerTreeSidebarPanel.prototype._hidePopover):
+        (WebInspector.LayerTreeSidebarPanel.prototype.):
+        (WebInspector.LayerTreeSidebarPanel.prototype._populateListOfCompositingReasons):
+        Show a popover listing the compositing reasons for the selected layer
+        anchored to the selected data grid node. The content of the popover
+        is provided after the call to the agent to retrieve the reasons for
+        compositing has returned.
+
+        * UserInterface/Popover.css:
+        (.popover):
+        (.popover.arrow-up):
+        (.popover.arrow-right):
+        (.popover.arrow-down):
+        (.popover.arrow-left):
+        * UserInterface/Popover.js:
+        (WebInspector.Popover.prototype.area):
+        (WebInspector.Popover.prototype.present):
+        (WebInspector.Popover.prototype._bestMetricsForEdge):
+        Miscellaneous enhancements for better popover behavior where we correctly
+        round up the metrics for the hosted content, ensure we interrupt a dismiss
+        animation when presenting the popover again, and change the sizing behavior
+        to take into account the various padding metrics applied as a result of
+        picking a given edge.
+
+2013-03-13  Timothy Hatcher  <timothy@apple.com>
+
+        Don't wait until DOMContentLoaded to do non-UI initialization when loading the Web Inspector.
+
+        Part of: <rdar://problem/13412219> REGRESSION: Opening the Web Inspector takes 5s
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CodeMirrorAdditions.js:
+        Moved extra MIME-type registration here.
+
+        * UserInterface/Main.html:
+        Added a inline script to call WebInspector.loaded(). This needs to be outside of Main.js so it
+        comes after the scripts added via document.write when Main.js is a combined file.
+
+        * UserInterface/Main.js:
+        (WebInspector.loaded): Added. Moved code from contentLoaded.
+        (WebInspector.contentLoaded): Moved code to loaded.
+        (WebInspector._windowResized): Call _contentBrowserSizeDidChange to avoid registering for resize twice.
+
+2013-03-13  Timothy Hatcher  <timothy@apple.com>
+
+        Add selected images for UserInputResult.pdf and UserInputPromptPrevious.pdf.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Images/UserInputPromptPreviousSelected.pdf: Added.
+        * UserInterface/Images/UserInputResultSelected.pdf: Added.
+        * UserInterface/LogContentView.css:
+        (.console-messages:focus .console-item.selected .console-user-command-result.console-log-level::before):
+        (.console-messages:focus .console-item.selected .console-user-command::before):
+
+2013-03-13  Timothy Hatcher  <timothy@apple.com>
+
+        Make copy work in the split console.
+
+        <rdar://problem/13411428> Copy does not work if the console is in split view
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Main.js:
+        (WebInspector._focusedContentView): Added.
+        (WebInspector._beforecopy): Structure more like _copy. Use _focusedContentView.
+        (WebInspector._copy): Use _focusedContentView.
+
+2013-03-13  Timothy Hatcher  <timothy@apple.com>
+
+        Remove old focus tracking code in EditingSupport.js and start tracking currentFocusElement
+        and previousFocusElement in Main.js's _focusChanged handler.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/EditingSupport.js:
+        (WebInspector.startEditing.cleanUpAfterEditing): Use restoreFocusFromElement().
+
+        * UserInterface/JavaScriptTextPrompt.js:
+        (WebInspector.JavaScriptTextPrompt.prototype.focus): Use focus().
+
+        * UserInterface/Main.js:
+        (WebInspector.restoreFocusFromElement): Added.
+        (WebInspector._focusChanged): Set currentFocusElement and previousFocusElement.
+
+        * UserInterface/TextPrompt.js:
+        (WebInspector.TextPrompt.prototype._startEditing): Use focus().
+
+2013-03-13  Timothy Hatcher  <timothy@apple.com>
+
+        Fix some things with the new console selection behavior.
+
+        * Makes sure all disclosure triangles and text are white when the row selection is blue.
+        * Makes sure all disclosure triangles and text are normal when the row selection is gray.
+        * Fixes a bug where click would cause the row to jump between top and bottom reveal instead of
+          toggling a clicked disclosure triangle.
+        * Only expand recursively if the Option key is pressed. This matches the TreeOutline code.
+        * Collapse recursively if the option key is pressed.
+        * Better aligns the disclosure triangles with DOM tree nodes.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/LogContentView.css:
+        (.console-messages):
+        (.console-item.selected):
+        (.console-messages:focus .console-item.selected *):
+        (.console-group-title::before):
+        (.console-messages:focus .console-item.selected .console-group-title::before):
+        (.console-messages:focus .console-group.collapsed .console-item.selected .console-group-title::before):
+        (.console-messages:focus .console-item.selected .section .header .title):
+        (.console-message-url):
+        (.console-messages:focus .console-item.selected .section .header::before):
+        (.console-messages:focus .console-item.selected .section.expanded .header::before):
+        (.console-messages:focus .console-item.selected .properties-tree li.parent::before):
+        (.console-messages:focus .console-item.selected .properties-tree li.parent.expanded::before):
+        (.outline-disclosure li.parent::before):
+        (.console-messages:focus .console-item.selected .outline-disclosure li.parent::before):
+        (.console-messages:focus .console-item.selected .outline-disclosure li.parent.expanded::before):
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype._mousedown):
+        Use focus() instead of setCurrentFocusElement. The setCurrentFocusElement function is legacy and
+        should be removed someday.
+
+        (WebInspector.LogContentView.prototype._updateMessagesSelection):
+        Don't call _ensureMessageIsVisible if the message was already selected from the start.
+
+        (WebInspector.LogContentView.prototype._rightArrowWasPressed):
+        (WebInspector.LogContentView.prototype._leftArrowWasPressed):
+        Only expand or collapse recursively if the Option key is pressed.
+
+2013-03-13  Timothy Hatcher  <timothy@apple.com>
+
+        Tweak the New Rule behavior in the Style details sidebar.
+
+        Makes sure to scroll to reveal the section when it is focused. Also use appropriateSelectorFor
+        instead of displayNameForNode to generate better selectors.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.addRule): Use appropriateSelectorFor.
+        * UserInterface/RulesStyleDetailsPanel.js:
+        (WebInspector.RulesStyleDetailsPanel.prototype.refresh.scrollToFocusedSection): Added.
+        (WebInspector.RulesStyleDetailsPanel.prototype.refresh): Call scrollToFocusedSection on a timeout.
+
+2013-03-13  Antoine Quint  <graouts@apple.com>
+
+        Make the "Memory" outlet at the bottom of the layer tree
+        sidebar panel align to the right as expected.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/LayerTreeSidebarPanel.css:
+        (.layer-tree.panel .layers-memory-label):
+
+2013-03-13  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13410203> Correctly identify layers for generated and reflected content
+
+        We now correctly identify layers as reflected content and/or generated
+        content with a more appropriate name in the "child layers" data grid.
+        Additionally, we highlight the bounds of the layer on the page to
+        clearly identify what this reflection or generated content is on the
+        canvas.
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        New localized string used to identify reflections layers.
+
+        * UserInterface/DOMTreeManager.js:
+        (WebInspector.DOMTreeManager.prototype.highlightRect):
+        New method wrapping DOMAgent.highlightRect().
+
+        * UserInterface/LayerTreeDataGridNode.js:
+        (WebInspector.LayerTreeDataGridNode.prototype.set layer):
+        Further qualify the layer by adding either the ::before or ::after
+        pseudo-class for layers that are associated to generated content as
+        well as a localized "Reflection for" prefix for reflected layers.
+
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel.prototype._highlightSelectedNode):
+        Check what type of layer is now selected and call the new
+        DOMTreeManager.highlightRect() method in case we're dealing with a
+        reflection or generated layer.
+
+2013-03-13  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13209485> Layer Tree sidebar should respect "show-shadow-dom" setting
+
+        The layer tree sidebar panel data grid now respects the
+        "show-shadow-dom" setting.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel):
+        Track changes for the "show-shadow-dom" setting.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype.refresh):
+        Keep track of the unfiltered set of child layers returned when calling
+        into the LayerTreeAgent such that we can reuse this unfiltered list
+        of child layers layer as the "show-shadow-dom" setting changes.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype._showShadowDOMSettingChanged):
+        Update the display such that the new setting is taken into account.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype._updateDisplayWithLayers):
+        Filter the list of child layers to take into account the
+        "show-shadow-dom" setting. We also keep track of the layer for
+        the current node in the new "_layerForNode" property such that
+        it may be used to call into this method again when we need to
+        update the shadow DOM filter without querying the backend again.
+
+2013-03-13  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13409543> Adopt new LayerTreeAgent protocol
+
+        We remove all code related to the previous LayerTreeAgent protocol where
+        we'd use the LayerTree.getLayerTree() and LayerTree.nodeIdForLayerId()
+        methods which have now been replaced by a single method to provide the
+        layers in the scope of a given DOM subtree with LayerTree.layersForNode().
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        Remove the strings related to composited layers since the protocol now
+        only provides composited layers.
+
+        * UserInterface/InspectorBackendCommands.js:
+        Remove the old LayerTree.getLayerTree() and LayerTree.nodeIdForLayerId()
+        protocol methods and add the new LayerTree.layersForNode() method.
+
+        * UserInterface/LayerTreeDataGridNode.js:
+        (WebInspector.LayerTreeDataGridNode.prototype.get layer):
+        New public accessor for the "_layer" property such that the
+        LayerTreeSidebarPanel may access properties of the selected data grid
+        node's layer.
+
+        (WebInspector.LayerTreeDataGridNode.prototype.set layer):
+        Remove the check for a valid node since the protocol ensures that layers
+        now have a valid nodeId pushed to the front-end. We're also removing the
+        redundant "layerData" property by just letting the layer be accessible
+        via a public accessor.
+
+        (WebInspector.LayerTreeDataGridNode.prototype._goToArrowWasClicked):
+        Use the "_layer" property to find out the nodeId rather than the removed
+        "layerData" property.
+
+        * UserInterface/LayerTreeManager.js:
+        (WebInspector.LayerTreeManager):
+        Remove the hard-coded disabling of the LayerTree features in the front-end
+        and instead use a real run-time check for availability of the LayerTreeAgent.
+        We also remove some ivars we no longer use.
+
+        (WebInspector.LayerTreeManager.prototype.layerTreeMutations):
+        Complete rewrite of the method to account for the richer set of
+        information exposed by the new protocol. We now have to take into account
+        much more than just layer ids to indentify mutations, node ids should also
+        be taken into account to check if a layer for the same node has appeared
+        with a new layer id (as it may have been destroyed and recreated for a
+        content update). We also need to take into account generated content and
+        reflections, which may have pseudo element ids.
+
+        (WebInspector.LayerTreeManager.prototype.layersForNode):
+        New wrapper for the new LayerTreeAgent.layersForNode() protocol method.
+
+        (WebInspector.LayerTreeManager.prototype.layerTreeDidChange):
+        We no longer obtain the layer tree upon a change, we merely dispatch
+        an event indicating that the layer tree has changed.
+
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel):
+        Remove the setting to only show composited layers since the protocol now
+        only returns composited layers.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype.refresh):
+        Retrieve layers from the agent and update our display with the result.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype._layerTreeDidChange):
+        Mark that we need a refresh following a change in the layer tree.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype._buildLayerInfoSection):
+        No longer show the "Composited" row since all layers are now composited.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype._buildDataGridSection):
+        No longer build the "only show composited layers" checkbox.        
+
+        (WebInspector.LayerTreeSidebarPanel.prototype._sortDataGrid):
+        (WebInspector.LayerTreeSidebarPanel.prototype._highlightSelectedNode):
+        Use the now-public "layer" property on the LayerTreeDataGridNode to
+        look up layer information for sorting.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype._updateDisplayWithLayers):
+        Keep track of the new child layers in a "_childLayers" property.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype._updateLayerInfoSection):
+        Remove the checks for composited since all layers are now composited.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype._updateDataGrid):
+        (WebInspector.LayerTreeSidebarPanel.prototype._updateMetrics):
+        Update to use new properties on layer objects per the change in protocol.
+
+2013-03-13  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/12886275> Selecting errors in the console doesn't select the error and the filename
+
+        In order to be able to provide custom content to the clipboard for console messages,
+        we must also allow selection of console messages in a different way than via text
+        selection. In this patch, we make the list of messages selectable, supporting the
+        selection types one would expect from a desktop application. I go into the details
+        of what features exactly are implemented in the per-method discussion below.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ConsoleCommand.js:
+        (WebInspector.ConsoleCommand.prototype.toClipboardString):
+        Adopt the protocol to provide a custom clipboard string in the form of
+        "> theJSCommand();".
+        
+        * UserInterface/ConsoleCommandResult.js:
+        (WebInspector.ConsoleCommandResult.prototype.toClipboardString):
+        Adopt the protocol to provide a custom clipboard string in the form of
+        "< theCommandResult".
+
+        * UserInterface/ConsoleGroup.js:
+        (WebInspector.ConsoleGroup.prototype.addMessage):
+        Wrap individual messages in a group within a wrapper element with a "console-item"
+        CSS class. These elements are used to apply a "selected" or "filtered-out" class and
+        to draw the full-width borders on the items.
+
+        * UserInterface/ConsoleMessageImpl.js:
+        (WebInspector.ConsoleMessageImpl.prototype._formatMessage):
+        Refactor to use new _shouldDumpStackTrace() method.
+
+        (WebInspector.ConsoleMessageImpl.prototype._shouldDumpStackTrace):
+        New method to share logic once used only in _formatMessage() with
+        toClipboardString() as well.
+
+        (WebInspector.ConsoleMessageImpl.prototype.toString):
+        Refactor to use new "levelString" property.
+
+        (WebInspector.ConsoleMessageImpl.prototype.get levelString):
+        New accessor to share logic once used only in toString() with toClipboardString()
+        as well.
+
+        (WebInspector.ConsoleMessageImpl.prototype.toClipboardString):
+        Adopt the protocol to provide a custom clipboard string where we log the level,
+        message text, url, line number and optionally the stack frames.
+
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController.prototype.appendConsoleMessage):
+        Return the cloned message so that we may manipulate it from call sites (ie. in
+        LogContentView.prototype._messageAdded()).
+
+        (WebInspector.JavaScriptLogViewController.prototype._appendConsoleMessage): Fix a
+        missing semi-colon.
+
+        * UserInterface/LogContentView.css:
+        (.console-messages):
+        Remove useless properties.
+
+        (.console-item):
+        Basic style for all console item wrappers, draw a 1px bottom border.
+
+        (.console-item.selected):
+        Background color for selected items when the container doesn't have focus (gray).
+
+        (.console-messages:focus .console-item.selected):
+        Background color for selected items when the container has focus (blue).
+
+        (.console-messages:focus .console-item.selected *):
+        Make all text in selected items white.
+
+        (.console-item.selected .console-group-title::before):
+        Use a white triangle for selected items.
+
+        (.console-group.collapsed .console-item.selected .console-group-title::before):
+        Use a white triangle for selected items.
+
+        (.console-item.selected .console-error-level .section .header .title):
+        Ensure text is white in selected items.
+
+        (.console-item.selected .console-debug-level .console-message-text):
+        Ensure text is white in selected items.
+
+        (.auto-complete-text, .editing .auto-complete-text):
+        Remove useless property.
+
+        (.console-item.selected .outline-disclosure li.parent::before):
+        Use a white triangle for selected items.
+
+        (.console-item.selected .outline-disclosure li.parent.expanded::before):
+        Use a white triangle for selected items.
+
+        (.console-item.filtered-out):
+        Remove all filtered-out items from layout.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView):
+        New ivars to track the current nesting level and the list of all selected message
+        elements. We also start tracking a series of keyboard and mouse events on the
+        messages container to implement multiple selection of message elements.
+
+        (WebInspector.LogContentView.prototype.updateLayout):
+        Override this ContentView method to track the height of the messages container
+        in order to update the scroll position of the container as we ensure the visibility
+        of selected items.
+
+        (WebInspector.LogContentView.prototype.didAppendConsoleMessage):
+        Manually nest the messages hosted in wrappers and keep track of the nesting level
+        as groups are opened and closed. We also clear all focusable children there as new
+        content may have been added with markup using the "tabindex" attributes.
+
+        (WebInspector.LogContentView.prototype.handleCopyEvent):
+        Provide custom content to the clipboard based on the clipboard text of each message
+        in the selected messages list in DOM order.
+
+        (WebInspector.LogContentView.prototype._messageAdded):
+        Ensure newly added messages are filtered out in case they don't match the selected
+        filters in the scope bar.
+
+        (WebInspector.LogContentView.prototype._mousedown):
+        Event handler for the "mousedown" event on the messages container. We ignore user
+        interaction if we would otherwise show a contextual menu, and ensure the messages
+        container has focus otherwise. In case we're getting focus now and we already had
+        selected elements, we go no further. Otherwise, we figure out which message was
+        under the mouse pointer and track that we should prevent a "click" event from being
+        dispatched in case the message was not yet selected. This ensures that we don't
+        collapse/expand an outline and select at the same time. We then update the message
+        selection state and track further mouse interaction. If we detect we didn't click on
+        a message, ie. the empty area of the messages container, we clear the selection list.
+
+        (WebInspector.LogContentView.prototype._mousemove):
+        Get the message element under the mouse pointer, if any, and update the messages
+        selection list so that we select messages from the first element we moused down
+        on to this one.
+
+        (WebInspector.LogContentView.prototype._mouseup):
+        Stop tracking any further "mousemove" and "mouseup" events as the selection-by-mouse
+        interaction draws to an end.
+
+        (WebInspector.LogContentView.prototype._click):
+        Prevent the propagation of "click" events if we established in the "mousedown" event
+        handler that we should have.
+
+        (WebInspector.LogContentView.prototype.handleEvent):
+        Router for mouse "mousemove" and "mouseup" events.
+
+        (WebInspector.LogContentView.prototype._updateMessagesSelection):
+        Method that updates the selected state of the provided message based on whether
+        we're allowing multiple selection (Cmd+click) and range selection
+        (Shift+click/arrow-up/arrow-down). 
+
+        (WebInspector.LogContentView.prototype._ensureMessageIsVisible):
+        Scrolls the messages container as necessary to reveal the provided message. We avoid
+        getting metrics from CSS as much as possible by using the positiong of the message
+        directly after the provided one since we can get that information via
+        _positionForMessage() without triggering a style recalc. In the case where we want to
+        ensure the last message is visible, we have no other resort but to query its height.
+
+        (WebInspector.LogContentView.prototype._positionForMessage):
+        Get the position of the given message in the coordinate system established by the
+        messages container.
+
+        (WebInspector.LogContentView.prototype._isMessageVisible):
+        Indicates whether the provided message is visible (ie. not filtered-out or within a
+        collapsed group).
+
+        (WebInspector.LogContentView.prototype._isMessageSelected):
+        Indicates whether the provided message is selected.
+
+        (WebInspector.LogContentView.prototype._selectAllMessages):
+        Selects all visible messages.
+
+        (WebInspector.LogContentView.prototype._allMessages):
+        All the messages in the messages container as an Array.
+
+        (WebInspector.LogContentView.prototype._allVisibleMessages):
+        All visible messages in the messages container as an Array.
+
+        (WebInspector.LogContentView.prototype._scopeBarSelectionDidChange):
+        Filter messages as the selected filters in the scope bar have changed.
+
+        (WebInspector.LogContentView.prototype._filterMessages):
+        Filter the messages based on scope bar filters selection. We ensure commands and
+        results are always visible, no matter what filters are selected.
+
+        (WebInspector.LogContentView.prototype._didFocus):
+        Track that the messages container is focused.
+
+        (WebInspector.LogContentView.prototype._didBlur):
+        Track that the messages container is not focused.
+
+        (WebInspector.LogContentView.prototype._keyDown):
+        Event handler for the "keydown" event, used to route to the more specific handlers.
+
+        (WebInspector.LogContentView.prototype._commandAWasPressed):
+        Event handler for Cmd+A key combination, selects all visible messages.
+
+        (WebInspector.LogContentView.prototype._escapeWasPressed):
+        Event handler for the Esc. key being pressed, clears the selection if there are
+        any selected messages, otherwise moving focus to the command prompt.
+
+        (WebInspector.LogContentView.prototype._upArrowWasPressed):
+        Event handler for the up arrow key being pressed, selects the message above, or add
+        it to the selection list if the shift key is selected.
+
+        (WebInspector.LogContentView.prototype._downArrowWasPressed):
+        Event handler for the down arrow key being pressed, selects the message below, or add
+        it to the selection list if the shift key is selected.
+
+        (WebInspector.LogContentView.prototype._leftArrowWasPressed):
+        Event handler for the left arrow key veing pressed, collapses the current group or
+        message with stack trace. Otherwise, does nothing.
+
+        (WebInspector.LogContentView.prototype._rightArrowWasPressed):
+        Event handler for the right arrow key veing pressed, expands the current group or
+        message with stack trace. Otherwise, does nothing.
+
+        (WebInspector.LogContentView.prototype._previousMessage):
+        Traverses the list of visible messages until we find a message located prior to
+        the provided message.
+
+        (WebInspector.LogContentView.prototype._nextMessage):
+        Traverses the list of visible messages until we find a message located after to the
+        provided message.
+
+        (WebInspector.LogContentView.prototype._clearFocusableChildren):
+        Remove the "tabindex" attribute on all elements located within the messages container
+        to ensure no element can steal focus away from the messages container and mess with our
+        handling of keyboard events.
+
+2013-03-12  Timothy Hatcher  <timothy@apple.com>
+
+        Don't truncate the suggestions menu when it gets close to the right edge.
+
+        Restore a line that was removed that we needed after all to get the right behavior.
+
+        Rubber-stamped by Joseph Pecoraro.
+
+        * UserInterface/CompletionSuggestionsView.js:
+        (WebInspector.CompletionSuggestionsView.prototype.show): Update width after maximumWidth changes.
+
+2013-03-12  Timothy Hatcher  <timothy@apple.com>
+
+        Prevent style text from shifting as properties are marked with checkboxes.
+
+        This marks blanks lines in editable styles with a placeholder that is the same
+        size as the checkbox. When a checkbox is added the placeholder is removed. That
+        switch keeps the text in the same position and looks superb!
+
+        This also forces checkboxes to be visible when the editor has focus, not just hovered.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.css:
+        (.css-style-text-editor > .CodeMirror .CodeMirror-lines .checkbox-placeholder): Added.
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._clearTextMarkers): Added all
+        param so we don't clear placeholder in all cases, only when doing a reset.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createTextMarkerForPropertyIfNeeded): Call
+        _removeCheckboxPlaceholder.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._contentChanged): Call
+        _markBlankLinesWithCheckboxPlaceholder.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._markBlankLinesWithCheckboxPlaceholder): Added.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._removeCheckboxPlaceholder): Added.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent): Call
+        _markBlankLinesWithCheckboxPlaceholder and pass true for _clearTextMarkers's all param.
+
+2013-03-12  Timothy Hatcher  <timothy@apple.com>
+
+        Improve the load time of the Web Inspector by loading localizedString.js sooner.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/LoadLocalizedStrings.js: Added.
+        * UserInterface/Main.html: Include LoadLocalizedStrings.js before Main.js.
+        * UserInterface/Main.js: Don't dynamically load localizedString.js.
+
+2013-03-11  Timothy Hatcher  <timothy@apple.com>
+
+        Disable auto completion inside comments.
+
+        <rdar://problem/13387317>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController.prototype._completeAtCurrentPosition): Return early inside comments.
+
+2013-03-11  Timothy Hatcher  <timothy@apple.com>
+
+        Don't highlight autocompletion items on hover. Only highlight them when active.
+
+        <rdar://problem/13387350> CSS autocompletion can be confusing if mouse cursor is hidden and hovering completion menu
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CompletionSuggestionsView.css:
+        (.completion-suggestions-container:not(:active) > .item.selected,
+         .completion-suggestions-container > .item:active): Renamed from being hover to active.
+
+2013-03-11  Timothy Hatcher  <timothy@apple.com>
+
+        Workaround <rdar://problem/13392441> so Images and Fonts don't get cut off at the top.
+
+        We can get the expected result by using margin: 0 auto until the behavior of -webkit-align-items
+        is hashed out more.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/FontResourceContentView.css:
+        (.content-view.resource.font): Remove -webkit-align-items: center and use margin: 0 auto.
+        (.content-view.resource.font .preview): Change 13px to 15px to be less arbitrary.
+        * UserInterface/ImageResourceContentView.css:
+        (.content-view.resource.image): Ditto.
+
+2013-03-11  Timothy Hatcher  <timothy@apple.com>
+
+        Make SVG fonts work in the Web Inspector.
+
+        <rdar://problem/13392056> SVG fonts are not rendered when selected
+
+        Reviewed by Jon Lee.
+
+        * UserInterface/FontResourceContentView.js:
+        (WebInspector.FontResourceContentView.prototype.contentAvailable): Supply format("svg") when we
+        know we are loading an SVG font. This seems to be required for SVG fonts.
+
+2013-03-11  Timothy Hatcher  <timothy@apple.com>
+
+        Don't allow setting a rule's selector to an empty string.
+
+        <rdar://problem/13387384> When editing a selector to be the empty string, nothing is committed - UI should reflect that
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/CSSStyleDeclarationSection.css:
+        (.style-declaration-section > .header > .selector:empty): Added.
+        (.style-declaration-section > .header > .selector:empty::before): Added.
+        * UserInterface/CSSStyleDeclarationSection.js:
+        (WebInspector.CSSStyleDeclarationSection.prototype._commitSelector): Call refresh if the selector is empty.
+
+2013-03-11  Timothy Hatcher  <timothy@apple.com>
+
+        Ignore Shift-Tab in CodeMirror instances since it does unexpected things.
+
+        <rdar://problem/13387373> CSS editor typing Shift+Tab adds weird pre-indent
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/CodeMirrorAdditions.js:
+        (ignoreKey): Added.
+
+2013-03-11  Timothy Hatcher  <timothy@apple.com>
+
+        Improve the wrapping of the pseudo class checkboxes.
+
+        Also make sure the scroll logic handles the different heights possible.
+
+        <rdar://problem/13383635> Pseudo class checkboxes should wrap better with narrow sidebar (never 3x1 & 1x1)
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style > .content > .pseudo-classes): Switch to flex layout.
+        (.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group): Added.
+        (.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label): Split the margin on each side.
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel): Create group elements of up to two labels each.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.visibilityDidChange): Call _updateNoForcedPseudoClassesScrollOffset.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.widthDidChange): Ditto.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._updateNoForcedPseudoClassesScrollOffset): Update the height.
+
+2013-03-11  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11720808> REGRESSION (Safari 6): Conditional breakpoints UI missing
+
+        Add back conditional breakpoints UI. The UI is modeled after Xcode's
+        "Edit Breakpoint" context menu and popover UI.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Breakpoint.js:
+        (WebInspector.Breakpoint):
+        (WebInspector.Breakpoint.prototype.get condition):
+        (WebInspector.Breakpoint.prototype.set condition):
+        (WebInspector.Breakpoint.prototype.get info):
+        Give a breakpoint a condition, mutators, and save the condition in
+        the breakpoint info.
+
+        (WebInspector.Breakpoint.prototype.appendContextMenuItems):
+        Add a context menu item for "Edit Breakpoint".
+
+        (WebInspector.Breakpoint.prototype._popoverToggleCheckboxChanged):
+        (WebInspector.Breakpoint.prototype._popoverConditionInputChanged):
+        (WebInspector.Breakpoint.prototype._editBreakpointPopoverContentElement):
+        (WebInspector.Breakpoint.prototype._showEditBreakpointPopover):
+        Generate the popover content and show the popover.
+
+        * UserInterface/Breakpoint.css: Added.
+        (.popover .edit-breakpoint-popover-content):
+        (.popover .edit-breakpoint-popover-content > label.toggle):
+        (.popover .edit-breakpoint-popover-content > table):
+        (.popover .edit-breakpoint-popover-content > table > tr > th):
+        (.popover .edit-breakpoint-popover-content > table > tr > td):
+        (#edit-breakpoint-popover-condition):
+        Styles for the edit breakpoint popover.
+
+        * UserInterface/BreakpointTreeElement.js:
+        (WebInspector.BreakpointTreeElement.prototype.oncontextmenu):
+        Pass the breakpoint element in the display so that if a popover needs
+        to be shown, we have the bounds of an element to show it for.
+
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager):
+        (WebInspector.DebuggerManager.prototype.isBreakpointEditable):
+        Never allow setting a condition on the special breakpoints.
+
+        (WebInspector.DebuggerManager.prototype._breakpointConditionDidChange):
+        (WebInspector.DebuggerManager.prototype._breakpointConditionDidChange.breakpointRemoved):
+        To set the condition delete the old breakpoint and set a new breakpoint
+        with the new condition. The WebInspector.Breakpoint will get an updated id.
+
+        * UserInterface/Main.html:
+        * Localizations/en.lproj/localizedStrings.js:
+        Include new files and strings.
+
+2013-03-09  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Add a "Select Output" button to PrettyPrinting tools.
+
+        The new button make copying the entire output easier. Useful for saving
+        before and after contents to see changes. Also update the formatter and
+        clean up some style issues.
+
+        Unreviewed tools change.
+
+        * Tools/PrettyPrinting/CodeMirrorFormatters.js:
+        * Tools/PrettyPrinting/index.html:
+
+2013-03-09  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Pretty printing: Don't try to be smart about unary +/-.
+
+        This was causing some simple expressions like "1+1" or "foo+1" to
+        become "1 +1" and "foo +1" instead of the expected "1 + 1" and
+        "foo + 1". The most common unary expressions negative numbers,
+        are parsed as a single token by CodeMirror anyways, so drop the
+        special case in the formatter.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CodeMirrorFormatters.js:
+        Remove the special case that tried to handle unary +/-.
+
+2013-03-09  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Update the PrettyPrinting Tool with new formatter changes.
+
+        Unreviewed tools change.
+
+        * Tools/PrettyPrinting/CodeMirrorFormatters.js:
+        * Tools/PrettyPrinting/Formatter.js:
+        (Formatter.prototype._handleToken):
+        (Formatter.prototype._handleEmptyLine):
+
+2013-03-09  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Pretty Printing: switch from startsWith to regex matching for tokens
+
+        This addresses a review comment that using startsWith for checking
+        token types is brittle and we should check the entire string. The
+        performance impact was negligible on JavaScript and minor on CSS,
+        so it is worth making the change to make the code less brittle.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CodeMirrorFormatters.js:
+        * UserInterface/Formatter.js:
+        (Formatter.prototype._handleToken):
+        (Formatter.prototype._handleEmptyLine):
+
+2013-03-09  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Add Pretty Printing Debug Page to WebInspector/Tools/PrettyPrinting
+
+        The pretty printing files in the Inspector can be run independently of
+        the Inspector. The only requirements are CodeMirror, its modes, and a
+        few Utility functions. This provides a separate tool that makes it
+        easier to debug and benchmark pretty printing without needing to run
+        the entire inspector. By default it includes some debug information
+        that will speed up debugging and make making improvements easier.
+
+        Rubber-stamped by Timothy Hatcher.
+
+        * Tools/PrettyPrinting/CodeMirrorFormatters.js: Added.
+        * Tools/PrettyPrinting/Formatter.js: Added.
+        * Tools/PrettyPrinting/FormatterContentBuilder.js: Added.
+        * Tools/PrettyPrinting/codemirror.css: Added.
+        * Tools/PrettyPrinting/codemirror.js: Added.
+        * Tools/PrettyPrinting/css.js: Added.
+        * Tools/PrettyPrinting/javascript.js: Added.
+        CodeMirror and WebInspector pretty printing files copied with only
+        minor tweaks (debugging code).
+
+        * Tools/PrettyPrinting/populate/apple.css: Added.
+        * Tools/PrettyPrinting/populate/jquery.min.js: Added.
+        Useful JavaScript and CSS content to populate the editor with. The
+        contents are decent stress tests for coverage and benchmarking.
+        jQuery is already in Safari for other tools, and apple.com's CSS
+        is Apple source. These files are just included as test data.
+
+        * Tools/PrettyPrinting/index.html: Added.
+        Driver. Includes an editor, some buttons, and outputs results.
+
+2013-03-09  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13375942> Pretty printing: Search results highlight wrong text range and highlight wrong line
+
+        Provide a SourceCodeTextRange. This contains start and end SourceCodeLocation
+        objects and uses those to provide raw, formatted, and mapped (display)
+        WebInspector.TextRanges and events when the range bounds change.
+
+        Search results coming from the backend have the original content and so
+        include raw text range information. When we jump to the source code we
+        will want to reveal and highlight the formatted line.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMSearchMatchObject.js:
+        (WebInspector.DOMSearchMatchObject):
+        (WebInspector.DOMSearchMatchObject.prototype.get sourceCodeTextRange):
+        * UserInterface/Main.html:
+        * UserInterface/ResourceSearchMatchObject.js:
+        (WebInspector.ResourceSearchMatchObject):
+        (WebInspector.ResourceSearchMatchObject.prototype.get sourceCodeTextRange):
+        Switch these to create and hold a SourceCodeTextRange.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.showSourceCodeTextRange):
+        (WebInspector.ResourceSidebarPanel.prototype._treeElementSelected):
+        When selecting a SearchMatchObject reveal and select the formatted range.
+        It may be jarring to the user to see a search result for something and
+        jump to the mapped (display) location which may not contain the search term.
+
+        * UserInterface/SearchResultTreeElement.js:
+        (WebInspector.SearchResultTreeElement):
+        (WebInspector.SearchResultTreeElement.truncateAndHighlightTitle):
+        Be aware that the represented SearchMatchObject has a sourceCodeTextRange
+        now. But we are provided line content from the original resource, so in
+        highlighting the search string use the original resource's text range.
+
+        * UserInterface/SourceCode.js:
+        (WebInspector.SourceCode.prototype.createSourceCodeTextRange):
+        * UserInterface/SourceMapResource.js:
+        (WebInspector.SourceMapResource.prototype.createSourceCodeTextRange):
+        Helpers for creating a SourceCodeTextRange by providing an unformatted
+        TextRange in the given resource. Automatically takes care of SourceMaps.
+
+        * UserInterface/SourceCodeTextRange.js: Added.
+        (WebInspector.SourceCodeTextRange):
+        (WebInspector.SourceCodeTextRange.prototype.get sourceCode):
+        (WebInspector.SourceCodeTextRange.prototype.get textRange):
+        (WebInspector.SourceCodeTextRange.prototype.get formattedTextRange):
+        (WebInspector.SourceCodeTextRange.prototype.get displaySourceCode):
+        (WebInspector.SourceCodeTextRange.prototype.get displayTextRange):
+        (WebInspector.SourceCodeTextRange.prototype._startAndEndLocationsInSameMappedResource):
+        (WebInspector.SourceCodeTextRange.prototype._sourceCodeLocationChanged):
+        SourceCodeTextRange matching SourceCodeLocation's semantics.
+
+2013-03-09  Timothy Hatcher  <timothy@apple.com>
+
+        Don't flash red strikethrough when actively editing a style.
+
+        <rdar://problem/13385762>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.css:
+        (.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line .css-style-declaration-property.invalid): Renamed.
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._clearRemoveEditingLineClassesTimeout): Added.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._removeEditingLineClasses): Added.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._removeEditingLineClasses.removeEditingLineClasses): Added.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._removeEditingLineClassesSoon): Added.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._contentChanged): Add EditingLineStyleClassName to the changed line.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._updateProperties): Call _removeEditingLineClassesSoon.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent): Call _removeEditingLineClasses.
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController.prototype._applyCompletionHint): Don't add line CompletionPendingStyleClassName.
+        (WebInspector.CodeMirrorCompletionController.prototype._commitCompletionHint): Remove call to _removePendingCompletionLineStyleClass.
+        (WebInspector.CodeMirrorCompletionController.prototype._removeCompletionHint): Ditto.
+        (WebInspector.CodeMirrorCompletionController.prototype._removePendingCompletionLineStyleClass): Removed.
+
+2013-03-09  Timothy Hatcher  <timothy@apple.com>
+
+        Prevent CSS autocompletion from interfering with the undo/redo history.
+
+        We now remove any changes we programmatically do from the undo history.
+        And before undo or redo we make sure to hide the completions so the editor
+        is back to the state that matches the history.
+
+        <rdar://problem/13384296> CSS Autocompletion causes unexpected Undo behavior
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController): Hook up _handleHideKey to the standard
+        undo and redo shortcuts. Also hook up select all so it goes through instead of being
+        blocked by _handleCursorActivity.
+        (WebInspector.CodeMirrorCompletionController.prototype.get _currentReplacementText): Added.
+        (WebInspector.CodeMirrorCompletionController.prototype._applyCompletionHint.update): Call
+        _removeLastChangeFromHistory after replaceRange.
+        (WebInspector.CodeMirrorCompletionController.prototype._commitCompletionHint.update): Added.
+        Replace the prefix with the full completion text. Don't call _removeLastChangeFromHistory.
+        (WebInspector.CodeMirrorCompletionController.prototype._commitCompletionHint): Call update.
+        (WebInspector.CodeMirrorCompletionController.prototype._removeLastChangeFromHistory): Added.
+        (WebInspector.CodeMirrorCompletionController.prototype._removeCompletionHint.update): Call
+        _removeLastChangeFromHistory after each replaceRange.
+        (WebInspector.CodeMirrorCompletionController.prototype._completeAtCurrentPosition): Call
+        _removeCompletionHint before getting the cursor so any cursor changes are done first.
+        (WebInspector.CodeMirrorCompletionController.prototype._handleHideKey): Added. Hide the completions
+        and pass through to other the standard handlers.
+
+2013-03-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12463631> REGRESSION: Subframes don't show the DOM tree
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMTree.js:
+        (WebInspector.DOMTree):
+        (WebInspector.DOMTree.prototype.requestRootDOMNode):
+        (WebInspector.DOMTree.prototype._requestRootDOMNodeInternal):
+        (WebInspector.DOMTree.prototype._frameMainResourceDidChange):
+        (WebInspector.DOMTree.prototype._frameExecutionContextChanged):
+        If we are a subframe we must wait for a context execution identifier
+        to do the RuntimeAgent.evaluate to get the document. So we may need
+        to wait for it. Switch to invoke and clarify we use frameId for
+        iOS 6 backwards compatibility.
+
+        * UserInterface/ExecutionContext.js: Added.
+        (WebInspector.ExecutionContext):
+        (WebInspector.ExecutionContext.supported):
+        (WebInspector.ExecutionContext.prototype.get id):
+        (WebInspector.ExecutionContext.prototype.get name):
+        (WebInspector.ExecutionContext.prototype.get isPageContext):
+        (WebInspector.ExecutionContext.prototype.get frame):
+        WebInspector.Object class for Runtime.ExecutionContextDescription type.
+        This was unavailable in iOS 6, so add a static "supported" function.
+
+        * UserInterface/Frame.js:
+        (WebInspector.Frame.prototype.initialize):
+        (WebInspector.Frame.prototype.commitProvisionalLoad):
+        Clear executino contexts on initialize, navigating, and detaching (manager).
+
+        (WebInspector.Frame.prototype.get mainExecutionContext):
+        (WebInspector.Frame.prototype.get executionContexts):
+        (WebInspector.Frame.prototype.clearExecutionContexts):
+        (WebInspector.Frame.prototype.addExecutionContext):
+        A frame may have multiple execution contexts. One for each world. We consider
+        the first execution context we receive for a frame to be the main one.
+
+        (WebInspector.Frame.prototype.get executionContextIdentifier):
+        Backwards compatible execution context identifier. Null if not yet resolved.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.frameDidDetach):
+        When detaching a page, clear the execution contexts.
+        (WebInspector.FrameResourceManager.prototype.executionContextCreated):
+        Set the execution context on a frame if provided.
+
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        Register a "Runtime" domain observer and enable it when it is available.
+
+        * UserInterface/RuntimeObserver.js: Added.
+        (WebInspector.RuntimeObserver):
+        (WebInspector.RuntimeObserver.prototype.executionContextCreated):
+        Add a new Observer for "Runtime" domain events.
+
+2013-03-08  Timothy Hatcher  <timothy@apple.com>
+
+        <rdar://problem/13381025> REGRESSION (Safari 6): Bottom-up profiling option missing
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/Images/BottomUpTree.pdf: Added.
+        * UserInterface/JavaScriptProfileView.js:
+        (WebInspector.JavaScriptProfileView.prototype.get navigationItems): Added. Return percent
+        and bottom up item.
+        (WebInspector.JavaScriptProfileView.prototype._toggleBottomUpView): Added. Flip the setting
+        and call _changeView.
+        (WebInspector.JavaScriptProfileView.prototype._changeView): Check _showTreeBottomUpSetting.
+        Removing reference to old viewSelectElement property.
+
+2013-03-08  Timothy Hatcher  <timothy@apple.com>
+
+        Make the "H" key toggle the visibility of the selected DOM element.
+
+        <rdar://problem/13352674> PARITY (WebKit Web Inspector): Shortcut to hide/show DOM elements while inspecting
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline): Create the keyboard shortcut.
+        (WebInspector.DOMTreeOutline.prototype._hideElement.toggleProperties): Added.
+        (WebInspector.DOMTreeOutline.prototype._hideElement): Added.
+
+2013-03-08  Timothy Hatcher  <timothy@apple.com>
+
+        Always fire the Refreshed event for DOMNodeStyles.
+
+        Not firing Refreshed made it hard to listen for when it was safe to use the properties.
+        If you call refresh, you expect Refreshed to always fire. But it would only fire if there
+        was a significant change. Now it always fires and passes a flag whether it was significant.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclaration.js:
+        (WebInspector.CSSStyleDeclaration.prototype.propertyForName): Drive by: don't consider
+        pending properties if we can't create or are not editable.
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedComputedStyle): Keep track on if we
+        found a significant change since the last time we fired the Refreshed event. Only recompute
+        if it was significant if we aren't already marked as significant. Pass significantChange along
+        with the Refreshed event and always fire it.
+        * UserInterface/RulesStyleDetailsPanel.js:
+        (WebInspector.RulesStyleDetailsPanel.prototype.refresh): Added significantChange param. Only
+        do a rebuild if it was significant.
+        * UserInterface/StyleDetailsPanel.js:
+        (WebInspector.StyleDetailsPanel.prototype.markAsNeedsRefresh): Set _forceSignificantChange.
+        (WebInspector.StyleDetailsPanel.prototype.refresh): Added significantChange param.
+        (WebInspector.StyleDetailsPanel.prototype._refreshPreservingScrollPosition): Pass along
+        significantChange to refresh, taking into consideration _forceSignificantChange.
+        (WebInspector.StyleDetailsPanel.prototype._nodeStylesRefreshed): Pass along significantChange
+        from the event to _refreshPreservingScrollPosition.
+
+2013-03-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13372615> REGRESSION: theverge.com shows 2 duplicate "rs.js" Extra Script resources
+
+        The URLs passed in scriptParsed messages appears to not match up properly
+        with the Resource URL. Testing on theverge.com we can get script URLs
+        that are encoded where the resource URL is decoded, and we can get script
+        URLs that have a hash where the resource URL does not have a hash. Provide
+        a generic resourceForScript lookup.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.resourceForScript):
+        Walk the frame tree looking for a resource with the same URL as
+        a script. Check the with fragment encoded and decoded script URL,
+        an without fragment encoded and decoded script URL.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.showSourceCode):
+        (WebInspector.ResourceSidebarPanel.prototype._scriptWasAdded):
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager.prototype.scriptsForURL):
+        * UserInterface/DebuggerSidebarPanel.js:
+        (WebInspector.DebuggerSidebarPanel.prototype._scriptAdded):
+        * UserInterface/ScriptContentView.js:
+        (WebInspector.ScriptContentView):
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorUpdatedFormatting):
+        * UserInterface/SourceMapManager.js:
+        (WebInspector.SourceMapManager.prototype._loadAndParseSucceeded):
+        When we have a script, use the resourceForScript instead of resourceForURL.
+
+        * UserInterface/Utilities.js:
+        (removeURLFragment): helper fro removing URL fragment.
+
+2013-03-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13371011> Misclassified resources if you open the inspector while the page is loading
+
+        When the Web Inspector is opened during a page load it gets a list of
+        all resources from the backend via getResourceTree. We assume that the
+        resources in that tree are completed loads. We may later discover that
+        some of those resources are actively loading, and that other actively
+        loading resources are not in that list. We can detect both of these
+        cases by receiving a receiveResponse message. Handle it appropriately
+        so that a WebInspector.Script can always find a WebInspector.Resource.
+        Otherwise, the Script would show its own tree element under "Extra
+        Scripts" in the sidebar.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidReceiveResponse):
+        When we don't have an identifier but we find a Resource by URL, then we should
+        update the Resource to still be loading. If we don't have a Resource at all we
+        should create one, it is currently loading.
+
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidFinishLoading):
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidFailLoading):
+        We can assert again. We always expect to have a Resource by the time we get a
+        didFinishLoading or didFailLoading message. If we don't then this could be
+        an extreme edge case (like a dataReceived without a receivedResponse).
+
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.revertMarkAsFinished):
+        Revert the finished and finished timestamp properties. When a
+        finishLoading or didFailLoading message comes in the states will
+        be updated again.
+
+2013-03-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        ASSERT: FrameResourceManager.prototype.frameDidNavigate: console.assert(frame)
+
+        Fix a typo. A WebInspector.Resource has a parentFrame, not a frame accessor.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.frameDidNavigate):
+
+2013-03-08  Timothy Hatcher  <timothy@apple.com>
+
+        Fix the font smoothing in the Web Inspector.
+
+        This is needed after making the Web Inspector WKView use tiled drawing since our WKView is transparent.
+
+        <rdar://problem/12922185> REGRESSION: Text in the Web Inspector is not sub-pixel anti-aliased anymore
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Main.css:
+        (body): Add -webkit-font-smoothing: subpixel-antialiased to force sub-pixel in our transparent WebView.
+        * UserInterface/NavigationSidebarPanel.css:
+        (.sidebar > .panel.navigation > .empty-content-placeholder > .message): Remove -webkit-font-smoothing: antialiased.
+
+2013-03-07  Timothy Hatcher  <timothy@apple.com>
+
+        Don't scroll the Style details sidebar if the pseudo class checkboxes are not present.
+
+        This applies when inspecting an iOS 6 device or simulator.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.get _initialScrollOffset): Return 0
+        if we can't for pseudo classes.
+        * UserInterface/StyleDetailsPanel.js:
+        (WebInspector.StyleDetailsPanel.prototype.get _initialScrollOffset): Ditto.
+
+2013-03-07  Timothy Hatcher  <timothy@apple.com>
+
+        Display applied media queries in the new Style details sidebar.
+
+        <rdar://problem/13376129>
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/RulesStyleDetailsPanel.css:
+        (.sidebar > .panel.details.css-style .rules .label): Renamed from .inherited-label.
+        (.sidebar > .panel.details.css-style .rules .label .go-to-link): Added.
+        (.sidebar > .panel.details.css-style .rules .label + .style-declaration-section): Added.
+        (.sidebar > .panel.details.css-style .rules .new-rule): Tweaked opacity to better match .label.
+        (.sidebar > .panel.details.css-style .rules .new-rule:hover): Ditto.
+        (.sidebar > .panel.details.css-style .rules .new-rule:active): Ditto.
+        * UserInterface/RulesStyleDetailsPanel.js:
+        (WebInspector.RulesStyleDetailsPanel.prototype.refresh.mediaListsEqual): Added.
+        (WebInspector.RulesStyleDetailsPanel.prototype.refresh.filteredMediaList): Added.
+        (WebInspector.RulesStyleDetailsPanel.prototype.refresh): Only include the media list if it is
+        different from the previous media list shown.
+        * UserInterface/SourceCodeLocation.js:
+        (WebInspector.SourceCodeLocation.prototype.isEqual): Added.
+
+2013-03-07  Timothy Hatcher  <timothy@apple.com>
+
+        Fix a typo in the Dashboard tooltips.
+
+        <rdar://problem/13365669> [WebInspector] typo in source - "click to show to the" should be "click to show the"
+
+        Reviewed by Ricky Mondello.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/DashboardView.js:
+        (WebInspector.DashboardView): Removed "to" from two tooltips.
+
+2013-03-07  Timothy Hatcher  <timothy@apple.com>
+
+        Fix the word wrapping for long origins that are links.
+
+        Also fixes the location and wrapping of the read-only lock icon.
+
+        <rdar://problem/13365935> Long CSS resource names causes poor line wrapping in Style sidebar
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationSection.css:
+        (.style-declaration-section.locked > .header::before): Changed from after so the lock sticks
+        to the top of the section as intended instead of on the last line. Add a left margin to prevent
+        the origin from touching the icon.
+        (.style-declaration-section > .header > .origin): Remove display: inline-block and vertical-align.
+        Added word-wrap: break-word and white-space: nowrap to prevent breaking the built-in origins among
+        multiple lines.
+        (.style-declaration-section > .header > .origin a): Added. Set white-space to normal to allow it
+        to break along multiple lines.
+
+2013-03-07  Timothy Hatcher  <timothy@apple.com>
+
+        Indent wrapped lines by 2 extra spaces to better break up long lines in the details sidebar.
+
+        An earlier change made it work for editable styles, this makes it work for read-only styles.
+
+        <rdar://problem/13310983> Long styles that wrap are hard to read in new Style details sidebar.
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.css:
+        (.css-style-text-editor.read-only > .CodeMirror pre):
+
+2013-03-07  Jessie Berlin  <jberlin@apple.com>
+
+        Ran update-safari-localizable-strings.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+2013-03-07  Timothy Hatcher  <timothy@apple.com>
+
+        Add Array.lastValue and start using it.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController.prototype._scanStringForExpression):
+        * UserInterface/CodeMirrorFormatters.js:
+        * UserInterface/DOMNode.js:
+        (WebInspector.DOMNode.prototype.get lastChild):
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype._updateChildren):
+        (WebInspector.DOMTreeElement.prototype.moveToNextAttributeIfNeeded):
+        (WebInspector.DOMTreeElement.prototype._attributeEditingCommitted):
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGrid.prototype.sortNodes):
+        (WebInspector.DataGridNode.prototype.traversePreviousNode):
+        * UserInterface/FormatterContentBuilder.js:
+        (FormatterContentBuilder.prototype.removeLastNewline):
+        (FormatterContentBuilder.prototype._addFormattedLineEnding):
+        * UserInterface/HierarchicalPathNavigationItem.js:
+        (WebInspector.HierarchicalPathNavigationItem.prototype.get lastComponent):
+        * UserInterface/InspectorBackend.js:
+        (InspectorBackendClass.prototype._sendMessageToBackend):
+        * UserInterface/TextPrompt.js:
+        (WebInspector.TextPrompt.prototype._completionsReady):
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype.eventRecorded):
+        * UserInterface/TimelineOverview.js:
+        (WebInspector.TimelineOverview.prototype.update):
+        * UserInterface/Utilities.js:
+
+2013-03-07  Timothy Hatcher  <timothy@apple.com>
+
+        Use Array.contains instead of indexOf.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/Branch.js:
+        (WebInspector.Branch.prototype.addRevision):
+        * UserInterface/CSSRule.js:
+        * UserInterface/CSSStyleDeclaration.js:
+        * UserInterface/CSSStyleDeclarationSection.js:
+        (WebInspector.CSSStyleDeclarationSection.prototype.refresh):
+        * UserInterface/CodeMirrorCompletionController.js:
+        (WebInspector.CodeMirrorCompletionController.prototype._generateCSSCompletions):
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser.prototype._updateContentViewSelectionPathNavigationItem):
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer.prototype.showContentView):
+        * UserInterface/DOMNode.js:
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype._parseStyleDeclarationPayload):
+        * UserInterface/DOMTreeElement.js:
+        * UserInterface/GeneralTreeElement.js:
+        (WebInspector.GeneralTreeElement.prototype.addClassName):
+        (WebInspector.GeneralTreeElement.prototype.removeClassName):
+        * UserInterface/LayerTreeManager.js:
+        (WebInspector.LayerTreeManager.prototype.var):
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype._findNavigationItem):
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar.prototype.findSidebarPanel):
+
+2013-03-07  Timothy Hatcher  <timothy@apple.com>
+
+        Don't ignore user agent rules when forced pseudo classes change.
+
+        Normally the Refreshed event is not fired only when user agent rules change, due to a bug
+        in WebCore. However, we need to fire it when the forced pseudo classes change since there
+        are base rules for most of the pseudo classes that need to show up in the sidebar.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedComputedStyle): Don't check for
+        user agent rules if _includeUserAgentRulesOnNextRefresh is true.
+        (WebInspector.DOMNodeStyles.prototype._markAsNeedsRefresh): Added includeUserAgentRules.
+        Set _includeUserAgentRulesOnNextRefresh if includeUserAgentRules is true.
+        (WebInspector.DOMNodeStyles.prototype._pseudoClassesDidChange): Pass true to _markAsNeedsRefresh.
+
+2013-03-06  Timothy Hatcher  <timothy@apple.com>
+
+        Add checkboxes that allow forcing pseudo classes in the Style details sidebar.
+
+        The checkboxes are scrolled off the top if there are no forced pseudo classes.
+        When there are forced classes the checkboxes are initially visible. Also we can
+        only scroll them away when there is enough content to scroll.
+
+        <rdar://problem/13143555> Add the ability to toggle forced CSS pseudo-classes from style sidebar
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/CSSStyleDeclarationSection.css:
+        * UserInterface/CSSStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style > .content > .pseudo-classes):
+        (.sidebar > .panel.details.css-style > .content > .pseudo-classes > label):
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel):
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh):
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.addEventListeners):
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.removeEventListeners):
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.get _initialScrollOffset):
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._navigationItemSelected):
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._forcedPseudoClassCheckboxChanged):
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._updatePseudoClassCheckboxes):
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager.prototype.canForcePseudoClasses):
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype._populateTagContextMenu):
+        * UserInterface/StyleDetailsPanel.js:
+        (WebInspector.StyleDetailsPanel.prototype.get _initialScrollOffset):
+        (WebInspector.StyleDetailsPanel.prototype._refreshPreservingScrollPosition):
+        * UserInterface/Utilities.js:
+        (Array.prototype.contains): Added.
+
+2013-03-06  Timothy Hatcher  <timothy@apple.com>
+
+        Remove more dead code from CSSStyleManager that I missed.
+
+        Rubber-stamped by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager.parseRuleArrayPayload): Removed.
+
+2013-03-06  Timothy Hatcher  <timothy@apple.com>
+
+        Add missing image Images/Locked.pdf.
+
+        <rdar://problem/13355862>
+
+        * UserInterface/Images/Locked.pdf: Added.
+
+2013-03-05  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for adding new rules in the Style details sidebar.
+
+        <rdar://problem/11326086> REGRESSION (Safari 6): Can't add new selectors / rules
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/CSSStyleDeclarationSection.css:
+        (div:not(.style-declaration-section) + .style-declaration-section): Added. Generic
+        rule to add a shadow on the top when something is between sections.
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.addRule): Added.
+        (WebInspector.DOMNodeStyles.prototype._collectStylesInCascadeOrder): Include Inspector
+        styles. Also collect user and user agent styles into one array.
+        * UserInterface/Images/Plus.pdf: Added.
+        * UserInterface/RulesStyleDetailsPanel.css:
+        (.sidebar > .panel.details.css-style .rules .new-rule): Added.
+        (.sidebar > .panel.details.css-style .rules .new-rule img): Added.
+        (.sidebar > .panel.details.css-style .rules .new-rule:hover): Added.
+        (.sidebar > .panel.details.css-style .rules .new-rule:active): Added.
+        * UserInterface/RulesStyleDetailsPanel.js:
+        (WebInspector.RulesStyleDetailsPanel.prototype.refresh.appendStyleSection): Focus the new
+        inspector rule when it is added.
+        (WebInspector.RulesStyleDetailsPanel.prototype.refresh): Create a New Rule button.
+        (WebInspector.RulesStyleDetailsPanel.prototype._newRuleClicked): Added.
+
+2013-03-05  Timothy Hatcher  <timothy@apple.com>
+
+        Remove dead code from CSSStyleManager.
+
+        Rubber-stamped by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleManager.js:
+        Remove old code and the copyright that went with the code. None of the remaining
+        code came from the original open source file.
+
+2013-03-04  Timothy Hatcher  <timothy@apple.com>
+
+        Always insert a space after ":" when pretty printing in the Style details sidebar.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSProperty.js:
+        (WebInspector.CSSProperty.prototype.get synthesizedText): Added.
+        (WebInspector.CSSProperty.prototype.get text): Factored into synthesizedText.
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent): Use synthesizedText.
+        Using CSSProperty.text still uses the original text which might not have a space after ":".
+
+2013-03-04  Timothy Hatcher  <timothy@apple.com>
+
+        Skip invalid properties when marking overridden properties.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype._markOverriddenProperties): Check for not valid and continue early.
+
+2013-03-04  Timothy Hatcher  <timothy@apple.com>
+
+        Flag properties that have other vendor keywords in the value so they are not crossed out in red.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSProperty.js:
+        (WebInspector.CSSProperty.prototype.hasOtherVendorNameOrKeyword): Check propertyValueHasOtherVendorKeyword too.
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager.prototype.propertyValueHasOtherVendorKeyword): Added.
+
+2013-03-04  Timothy Hatcher  <timothy@apple.com>
+
+        Indent wrapped lines by 2 extra spaces to better break up long lines in the details sidebar.
+
+        <rdar://problem/13310983> Long styles that wrap are hard to read in new Style details sidebar.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.css:
+        (.css-style-text-editor > .CodeMirror pre): Tweak the padding and text-indent.
+
+2013-03-04  Timothy Hatcher  <timothy@apple.com>
+
+        Add CodeMirrorCompletionController and start using it in CSSStyleDeclarationTextEditor.
+
+        This restores auto complete to the Style details sidebar and also paves the way for using
+        CodeMirror for the console prompt.
+
+        <rdar://problem/13304962> REGRESSION: Style property autocomplete missing from the Style details sidebar
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.css:
+        (.css-style-text-editor > .CodeMirror .CodeMirror-lines .completion-pending .css-style-declaration-property.invalid):
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.completionControllerCompletionsHidden):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._contentChanged):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype):
+        * UserInterface/CodeMirrorCompletionController.css: Added.
+        (.CodeMirror .CodeMirror-lines .completion-hint):
+        * UserInterface/CodeMirrorCompletionController.js: Added.
+        (WebInspector.CodeMirrorCompletionController):
+        (WebInspector.CodeMirrorCompletionController.prototype.get delegate):
+        (WebInspector.CodeMirrorCompletionController.prototype.updateCompletions):
+        (WebInspector.CodeMirrorCompletionController.prototype.isCompletionChange):
+        (WebInspector.CodeMirrorCompletionController.prototype.isShowingCompletions):
+        (WebInspector.CodeMirrorCompletionController.prototype.hideCompletions):
+        (WebInspector.CodeMirrorCompletionController.prototype.close):
+        (WebInspector.CodeMirrorCompletionController.prototype.completionSuggestionsSelectedCompletion):
+        (WebInspector.CodeMirrorCompletionController.prototype.completionSuggestionsClickedCompletion):
+        (WebInspector.CodeMirrorCompletionController.prototype._hasPendingCompletion):
+        (WebInspector.CodeMirrorCompletionController.prototype._notifyCompletionsHiddenSoon):
+        (WebInspector.CodeMirrorCompletionController.prototype._applyCompletionHint.update):
+        (WebInspector.CodeMirrorCompletionController.prototype._applyCompletionHint):
+        (WebInspector.CodeMirrorCompletionController.prototype._commitCompletionHint):
+        (WebInspector.CodeMirrorCompletionController.prototype.update):
+        (WebInspector.CodeMirrorCompletionController.prototype._removeCompletionHint):
+        (WebInspector.CodeMirrorCompletionController.prototype._removePendingCompletionLineStyleClass.removePendingStyleClass):
+        (WebInspector.CodeMirrorCompletionController.prototype._removePendingCompletionLineStyleClass):
+        (WebInspector.CodeMirrorCompletionController.prototype.isStopCharacter):
+        (WebInspector.CodeMirrorCompletionController.prototype.isOpenBracketCharacter):
+        (WebInspector.CodeMirrorCompletionController.prototype.isCloseBracketCharacter):
+        (WebInspector.CodeMirrorCompletionController.prototype.matchingBracketCharacter):
+        (WebInspector.CodeMirrorCompletionController.prototype._scanStringForExpression):
+        (WebInspector.CodeMirrorCompletionController.prototype._completeAtCurrentPosition):
+        (WebInspector.CodeMirrorCompletionController.prototype._generateCSSCompletions):
+        (WebInspector.CodeMirrorCompletionController.prototype._generateJavaScriptCompletions):
+        (WebInspector.CodeMirrorCompletionController.prototype._handleUpKey):
+        (WebInspector.CodeMirrorCompletionController.prototype._handleDownKey):
+        (WebInspector.CodeMirrorCompletionController.prototype._handleRightOrEnterKey):
+        (WebInspector.CodeMirrorCompletionController.prototype._handleEscapeKey):
+        (WebInspector.CodeMirrorCompletionController.prototype._handleTabKey):
+        (WebInspector.CodeMirrorCompletionController.prototype._handleChange):
+        (WebInspector.CodeMirrorCompletionController.prototype._handleCursorActivity):
+        (WebInspector.CodeMirrorCompletionController.prototype._handleHideAction):
+        * UserInterface/CompletionSuggestionsView.css: Added.
+        (.completion-suggestions):
+        (.completion-suggestions > .completion-suggestions-container):
+        (.completion-suggestions-container > .item):
+        (.completion-suggestions-container > .item:hover):
+        * UserInterface/CompletionSuggestionsView.js: Added.
+        (WebInspector.CompletionSuggestionsView):
+        (WebInspector.CompletionSuggestionsView.prototype.get delegate):
+        (WebInspector.CompletionSuggestionsView.prototype.get visible):
+        (WebInspector.CompletionSuggestionsView.prototype.get selectedIndex):
+        (WebInspector.CompletionSuggestionsView.prototype.set selectedIndex):
+        (WebInspector.CompletionSuggestionsView.prototype.selectNext):
+        (WebInspector.CompletionSuggestionsView.prototype.selectPrevious):
+        (WebInspector.CompletionSuggestionsView.prototype.isHandlingClickEvent):
+        (WebInspector.CompletionSuggestionsView.prototype.show):
+        (WebInspector.CompletionSuggestionsView.prototype.hide):
+        (WebInspector.CompletionSuggestionsView.prototype.update):
+        (WebInspector.CompletionSuggestionsView.prototype.get _selectedItemElement):
+        (WebInspector.CompletionSuggestionsView.prototype._mouseDown):
+        (WebInspector.CompletionSuggestionsView.prototype._mouseUp):
+        (WebInspector.CompletionSuggestionsView.prototype._itemClicked):
+        * UserInterface/Main.html:
+
+2013-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Disable some features while column debugging is broken
+
+        <rdar://problem/11219771> REGRESSION (Safari 6): Can't pretty-print JavaScript
+
+        To prevent broken behavior and a poor experience with breakpoints and
+        debugging but still allow for pretty-printing disable some features
+        related to columns. We can revert this change later and test more when
+        the underlying issue is fixed.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DebuggerSidebarPanel.js:
+        (WebInspector.DebuggerSidebarPanel.prototype._treeElementSelected):
+        Instead of jumping to the display location, jump to the original location.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._contentDidPopulate):
+        Don't autoformat if we're being debugged.
+
+        (WebInspector.SourceCodeTextEditor.prototype._activeCallFrameDidChange):
+        If we are going to be debugged unformat.
+
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointAdded):
+        Disallow setting breakpoints in formatted content.
+
+2013-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Update CodeMirror to ToT (v3.1+) which includes some important performance fixes
+
+        <rdar://problem/11219771> REGRESSION (Safari 6): Can't pretty-print JavaScript
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/External/CodeMirror/codemirror.js:
+        * UserInterface/External/CodeMirror/javascript.js:
+
+2013-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Set the FormatterSourceMap on both Resource and Script like SourceMaps
+
+        <rdar://problem/11219771> REGRESSION (Safari 6): Can't pretty-print JavaScript
+
+        Most source code text editors are for Resources, like external scripts.
+        However the backend identifies call frames with Script line and column
+        information. So the Script needs to know about the Resource's formatter.
+
+        We register for events in case the execution line changes on the fly.
+        This could happen if a breakpoint is hit on page load of a script that
+        is auto formatted. When the page loads, the breakpoint is hit and the
+        call frame is created with the original location and no formatter. When
+        the script Resource is shown it gets formatted, the associated Script
+        gets the formatter and the active call frame location updates its
+        display location. In that case the text editor for the Resource may
+        need to update its display of the execution line number.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.close):
+        (WebInspector.SourceCodeTextEditor.prototype._activeCallFrameDidChange):
+        (WebInspector.SourceCodeTextEditor.prototype._activeCallFrameSourceCodeLocationChanged):
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorUpdatedFormatting):
+
+2013-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Update Display Strings in Breakpoint and CallFrame TreeElements
+
+        <rdar://problem/11219771> REGRESSION (Safari 6): Can't pretty-print JavaScript
+
+        If a breakpoint is on a column, show line:column. If the breakpoint is
+        in a formatted view, set the subtitle to the original location. If a
+        call frame is in a formatted source, include the original location in
+        the tooltip.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeLocation.js:
+        (WebInspector.SourceCodeLocation.prototype.originalLocationString):
+        (WebInspector.SourceCodeLocation.prototype.displayLocationString):
+        (WebInspector.SourceCodeLocation.prototype._locationString):
+        Provide generic file:line:column string support.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/BreakpointTreeElement.js:
+        (WebInspector.BreakpointTreeElement.prototype._updateTitles):
+        * UserInterface/CallFrameTreeElement.js:
+        (WebInspector.CallFrameTreeElement):
+        Update strings where appropriate.
+
+2013-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Automatically pretty print files that look like they are minified.
+
+        <rdar://problem/11219771> REGRESSION (Safari 6): Can't pretty-print JavaScript
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._contentDidPopulate):
+
+2013-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Update breakpoint handling for formatted content
+
+        <rdar://problem/11219771> REGRESSION (Safari 6): Can't pretty-print JavaScript
+
+        TextEditor and SourceCodeTextEditor both have a map that stores breakpoint
+        information for editor lineNumber and columnNumber. For editors it makes
+        the most sense to keep these maps consistent with the formatted state of
+        the editor.
+
+        Terminology with this in mind "editor line info" is always the line and
+        column information for the current state of the editor. If the editor
+        is formatted, this is a formatted line and column of the sourceCode.
+        if the editor is not formatted this is the original line and column of
+        the sourceCode.
+
+        A tricky part here is that with a FormatterSourceMap is that it may map
+        a simple line:0 to a more accurate line:#. For example setting the
+        breakpoint on a pretty printed source code with leading whitespace, the
+        accurate location will not be column 0 but instead be the column # of
+        the first character on that line. When this happens we need to make sure
+        that both the SourceCodeTextEditor and TextEditor have stored the more
+        accurate location in their maps.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._unformattedLineInfoForEditorLineInfo):
+        Given an editor line info, this gives us the original line info depending on
+        if the text editor is formatted or not.
+
+        (WebInspector.SourceCodeTextEditor.prototype._editorLineInfoForSourceCodeLocation):
+        Given a SourceCodeLocation this gives us a line info for the text editor depending
+        on if the text editor is formatted or not. SourceCodeLocation already handles this.
+
+        (WebInspector.SourceCodeTextEditor.prototype._updateBreakpointLocation):
+        When a breakpoint moves, we'll need to update our tables removing the old
+        location and setting the new location. SourceCodeLocation gives us the old
+        and new formatted location which handles if the text editor is formatted or not.
+
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointRemoved):
+        If the text editor is formatted, be sure to remove a breakpoint with the
+        unformatted, original location because we're dealing with the backend.
+
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointAdded):
+        When the TextEditor sends a delegate up to the SourceCodeTextEditor about
+        a breakpoint being added, it waits for a response to put into its table.
+        Use this as an opportunity to provide the accurate resolved location.
+
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointMoved):
+        When the TextEditor sends a delegate up to the SourceCodeTextEditor about
+        a breakpoint being moved, it has already put an entry into its table at
+        line + column 0. We update that entry via updateBreakpointLineAndColumn.
+
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorFormattingDidChange):
+        After pretty printing the editor's value was completely changed. Some
+        breakpoints may have moved, some might not have. Ignore the DisplayLocation
+        change events when setting the formatter on the SourceCode and update all
+        the breakpoint map locations for ourself and the underlying TextEditor.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.updateBreakpointLineAndColumn):
+        (WebInspector.TextEditor.prototype._gutterMouseDown):
+        Update or set breakpoint info entires with accurante line and column info.
+
+2013-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Pretty print and incorporate the formatted location into the SourceCodeLocation display location
+
+        <rdar://problem/11219771> REGRESSION (Safari 6): Can't pretty-print JavaScript
+
+        When a SourceCodeTextEditor formats a SourceCode it produces a
+        FormatterSourceMap and sets it on the SourceCode. All SourceCodeLocations
+        associated with that SourceCode can update their display location.
+        If a location is already listening for DisplayLocation change events
+        it will just work (BreakPointTreeElements, CallFrameTreeElements).
+
+        SourceCodeLocation now has 3 sets of values and a display value:
+
+          - [public] sourceCode, lineNumber, columnNumber
+            - raw original sourceCode and values
+            - useful for interaction with the backend
+
+          - [public] formattedLineNumber, formattedColumnNumber
+            - for the original sourceCode
+            - if the sourceCode has a formatter, these are the formatted values
+            - if the sourceCode doesn't have a formatter, these are the same as the raw values
+            - useful for TextEditors that are showing content + gutters for formatted source
+
+          - [private] mappedResource, mappedLineNumber, mappedColumnNumber
+            - if the sourceCode has a sourceMap, this is the mapped location of the raw
+              values into a SourceMapResource line and column
+            - if the sourceCode doesn't have a sourceMap these are null, NaN, NaN
+            - useful for a display location, since it is the author's original pre-generated source
+
+          - [public] displayResource, displayLineNumber, displayColumnNumber
+            - if there is a mapped location use that
+            - if there is a formatted location use that
+            - otherwise use the raw original location
+            - useful for anyone who wants to display a location
+
+        Most users of SourceCodeLocation should only care about the display
+        values and should register for DisplayLocation change events to know
+        when to update.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor):
+        (WebInspector.TextEditor.prototype.get formatterSourceMap):
+        (WebInspector.TextEditor.prototype._prettyPrint):
+        Run the formatter. Update selection. Update search. Notify delegate.
+
+        * UserInterface/ScriptContentView.js:
+        (WebInspector.ScriptContentView):
+        (WebInspector.ScriptContentView.prototype._textEditorFormattingDidChange):
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView):
+        (WebInspector.TextResourceContentView.prototype._textEditorFormattingDidChange):
+        Update the pretty print button's activated state when formatting changes to match the TextEditor.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorUpdatedFormatting):
+        The TextEditor changed formatting and updated its FormatterSourceMap. Set
+        the FormatterSourceMap on the SourceCode itself.
+
+        * UserInterface/SourceCode.js:
+        (WebInspector.SourceCode):
+        (WebInspector.SourceCode.prototype.get formatterSourceMap):
+        (WebInspector.SourceCode.prototype.set formatterSourceMap):
+        A SourceCode may have a formatter source map when the TextEditor for it
+        was pretty printed. Store that on the SourceCode so SourceCodeLocation
+        objects know where to find it, and send an event when it changes.
+
+        * UserInterface/SourceCodeLocation.js:
+        (WebInspector.SourceCodeLocation.prototype.get formattedLineNumber):
+        (WebInspector.SourceCodeLocation.prototype.get formattedColumnNumber):
+        (WebInspector.SourceCodeLocation.prototype._resolveFormattedLocation):
+        Formatted location when the SourceCode is pretty printed. Original otherwise.
+
+        (WebInspector.SourceCodeLocation.prototype.get displayLineNumber):
+        (WebInspector.SourceCodeLocation.prototype.get displayColumnNumber):
+        Mapped location, fallback to formatted, fallback to raw original.
+
+        (WebInspector.SourceCodeLocation.prototype.hasFormattedLocation):
+        (WebInspector.SourceCodeLocation.prototype.hasDifferentDisplayLocation):
+        Helpful accessors for those that might be interested.
+
+        (WebInspector.SourceCodeLocation.prototype._sourceCodeFormatterDidChange):
+        When the SourceCode's formatter source map changed resolve our re-resolve
+        our locations and fire an event if needed.
+
+        (WebInspector.SourceCodeLocation.prototype._makeChangeAndDispatchChangeEventIfNeeded):
+        Make the code simpler and handle formatted location changes.
+
+2013-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Add a pretty print button to text content views
+
+        <rdar://problem/11219771> REGRESSION (Safari 6): Can't pretty-print JavaScript
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser.prototype._contentViewSelectionPathComponentDidChange):
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView.prototype.get navigationItems):
+        Be sure to update navigation items when a FrameContentView changes
+        content views (Source Code and DOM Tree), because the different views
+        might have different navigation items.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/ScriptContentView.js:
+        (WebInspector.ScriptContentView.prototype.get navigationItems):
+        (WebInspector.ScriptContentView.prototype._contentDidPopulate):
+        (WebInspector.ScriptContentView.prototype._togglePrettyPrint):
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.prototype.get navigationItems):
+        (WebInspector.TextResourceContentView.prototype._contentDidPopulate):
+        (WebInspector.TextResourceContentView.prototype._togglePrettyPrint):
+        Add a pretty print button to Script and TextResource content views.
+        Disabled initially, and enabled when content populates and the
+        TextEditor supports formatting
+        
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor):
+        (WebInspector.TextEditor.prototype.set readOnly):
+        (WebInspector.TextEditor.prototype.get formatted):
+        (WebInspector.TextEditor.prototype.set formatted):
+        (WebInspector.TextEditor.prototype._updateCodeMirrorReadOnly):
+        Currently, mark the editor as readyOnly immediately when it is formatted.
+        This may change in the future.
+
+        (WebInspector.TextEditor.prototype.hasFormatter):
+        (WebInspector.TextEditor.prototype.canBeFormatted):
+        Accessor for whether the TextEditor can be formatted.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.canBeFormatted):
+        Don't allow SourceMapResources to be formatted. This is to simplify
+        later changes a bit. We can do this later in the future if we want.
+        
+        (WebInspector.SourceCodeTextEditor.prototype._contentDidPopulate):
+        Fire an event when content populates.
+
+2013-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        FormatterSourceMap to convert between original and formatted locations
+
+        <rdar://problem/11219771> REGRESSION (Safari 6): Can't pretty-print JavaScript
+
+        Add FormatterSourceMap class. This is nearly identical to OpenSource's
+        FormatterSourceMapping, which does the same thing. This provides
+        conversions in either direction between an original and formatted line
+        and column number. It requires the original and formatted line endings
+        and a mapping, all data the the ContentBuilder has.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/FormatterSourceMap.js: Added.
+        (WebInspector.FormatterSourceMap):
+        (WebInspector.FormatterSourceMap.fromBuilder):
+        (WebInspector.FormatterSourceMap.prototype.originalToFormatted):
+        (WebInspector.FormatterSourceMap.prototype.formattedToOriginal):
+        (WebInspector.FormatterSourceMap.prototype._locationToPosition):
+        (WebInspector.FormatterSourceMap.prototype._positionToLocation):
+        (WebInspector.FormatterSourceMap.prototype._convertPosition):
+        * UserInterface/Main.html:
+        * UserInterface/Utilities.js:
+
+2013-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        CSS Pretty Printer
+
+        <rdar://problem/11219771> REGRESSION (Safari 6): Can't pretty-print JavaScript
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CodeMirrorFormatters.js:
+        (CodeMirror["css mode"].shouldHaveSpaceBeforeToken):
+        (CodeMirror["css mode"].shouldHaveSpaceAfterLastToken):
+        (CodeMirror["css mode"].newlinesAfterToken):
+        (CodeMirror["css mode"].removeLastNewline):
+        (CodeMirror["css mode"].indentAfterToken):
+        (CodeMirror["css mode"].newlineBeforeToken):
+        (CodeMirror["css mode"].dedentBeforeToken):
+        (CodeMirror["css mode"].modifyStateForToken):
+        The general goals are:
+          - spaces after ',' in selector lists
+          - spaces after ':' between properties and values
+          - newlines after '{', '}', and ';', with 2 newlines between blocks
+          - newlines after ',' in long selector lists "a,b,..,z {}"
+          - indent after '{' and dedent before '}'
+
+2013-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Formatter, ContentBuilder, and JavaScript Pretty Printer
+
+        <rdar://problem/11219771> REGRESSION (Safari 6): Can't pretty-print JavaScript
+
+        This patch adds a Formatter driver class, a ContentBuilder class that
+        builds both the formatted string and line ending markers needed for a
+        source mapping, and JavaScript CodeMirror extensions for pretty printing.
+
+        The Formatter and FormatterContentBuilder classes are not WebInspector
+        prefixed. Their only dependency is CodeMirror and the CodeMirror modes.
+        They are standalone, and could be moved to a Worker if needed.
+
+        The Formatter class takes a tokenizer (in our case a CodeMirror object)
+        and a builder object. Call format() on a range to tokenize over that
+        range and populate the builder for that range. The Formatter assumes
+        the CodeMirror object has the appropriate pretty printing extensions.
+
+        The ContentBuilder class manages line endings the resulting string, and
+        all things whitespace related in the output string (such as collapsing
+        whitespace, and indentation).
+
+        The CodeMirror pretty printing extensions are very primitive. For each
+        token CodeMirror outputs the mode for that token is asked if we should
+        add a space before or after, add newlines before or after, indent or
+        dedent, retroactively remove the last newline, or updating private state.
+        Most of the time whitespace is already required languages, so whitespace
+        only really needs to be added where it is optional and would be prettier.
+        One simple example is "}else{" versus "} else {". The mode doesn't need
+        to worry about collapsing whitespace. It just suggests where whitespace
+        goes and the Formatter + ContentBuilder takes care of the rest.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Formatter.js: Added.
+        (Formatter):
+        (Formatter.prototype.format):
+        A StringStream is considered to be one line. So split the content over
+        the given range into lines, and tokenize over the lines. There are hooks
+        for handling tokens, empty lines, and line endings.
+
+        (Formatter.prototype._handleToken):
+        Ask the mode how to pretty print the current token.
+
+        (Formatter.prototype._handleEmptyLine):
+        Preserve newlines in multi-line comments. If this is an empty line in
+        a comment, force the builder to add a new line.
+
+        (Formatter.prototype._handleLineEnding):
+        Notify the builder that of an original line ending.
+
+
+        * UserInterface/FormatterContentBuilder.js: Added.
+        (FormatterContentBuilder):
+        (FormatterContentBuilder.prototype.get originalContent):
+        (FormatterContentBuilder.prototype.get formattedContent):
+        (FormatterContentBuilder.prototype.get mapping):
+        (FormatterContentBuilder.prototype.get originalLineEndings):
+        (FormatterContentBuilder.prototype.get formattedLineEndings):
+        (FormatterContentBuilder.prototype.setOriginalContent):
+        Results of a formatting run. Everything needed for a SourceMap.
+
+        (FormatterContentBuilder.prototype.appendToken):
+        (FormatterContentBuilder.prototype.appendSpace):
+        (FormatterContentBuilder.prototype.appendNewline):
+        (FormatterContentBuilder.prototype.removeLastNewline):
+        (FormatterContentBuilder.prototype.indent):
+        (FormatterContentBuilder.prototype.dedent):
+        (FormatterContentBuilder.prototype.addOriginalLineEnding):
+        (FormatterContentBuilder.prototype.finish):
+        Public interface is simple.
+
+        (FormatterContentBuilder.prototype._popNewLine):        
+        (FormatterContentBuilder.prototype._append):
+        Handle growing / shrinking the content + content length at the same time.
+
+        (FormatterContentBuilder.prototype._appendIndent):
+        Indentation is stored in a cache to avoid recomputing often. However,
+        the cache stops at 20, if there is an indentation greater than 20 we
+        compose it in chunks.
+
+        (FormatterContentBuilder.prototype._addMappingIfNeeded):
+        Add a mapping for each token originalPosition and formattedPosition.
+
+        (FormatterContentBuilder.prototype._addFormattedLineEnding):
+        Keep track of formatted content line endings.
+
+        * UserInterface/CodeMirrorFormatters.js: Added.
+        (CodeMirror["javascript mode"].shouldHaveSpaceBeforeToken):
+        (CodeMirror["javascript mode"].shouldHaveSpaceAfterLastToken):
+        (CodeMirror["javascript mode"].newlinesAfterToken):
+        (CodeMirror["javascript mode"].removeLastNewline):
+        (CodeMirror["javascript mode"].indentAfterToken):
+        (CodeMirror["javascript mode"].newlineBeforeToken):
+        (CodeMirror["javascript mode"].dedentBeforeToken):
+        The general goal with these hooks are:
+          - spaces before and after most operators (not unary)
+          - spaces around keywords
+          - newlines after '{', '}', and ';'
+          - newlines after ',' when inside an object context
+          - indent after '{' and dedent before '}'
+
+        * UserInterface/Main.html:
+        Add new files.
+
+2013-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13331470> REGRESSION: Inspector debugger continue button is a pause icon when it should be an arrow
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem.prototype.set image):
+        This was appending a new child image element each time instead of
+        replacing the existing image. Remove the old children on changes.
+
+2013-03-04  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13331811> Web Inspector: remove existing LayerTreeAgent protocol APIs (111251)
+
+        Deactivate the layer tree sidebar panel until the new API
+        lands in WebCore and we can update the Internal code to use
+        this API.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/LayerTreeManager.js:
+        (WebInspector.LayerTreeManager):
+        * UserInterface/LayerTreeObserver.js:
+        (WebInspector.LayerTreeObserver.prototype.layerTreeDidChange):
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel.prototype.supportsDOMNode):
+
+2013-03-01  Timothy Hatcher  <timothy@apple.com>
+
+        Update the Style details sidebar when when pseudo classes are forced or media queries change.
+
+        <rdar://problem/13328298>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager.prototype.mediaQueryResultChanged): Call mediaQueryResultDidChange on each DOMNodeStyles.
+        Removed the event since it wasn't used anymore.
+        * UserInterface/DOMNode.js:
+        (WebInspector.DOMNode.prototype.setPseudoClassEnabled): Fire the event after the agent actually does the change.
+        (WebInspector.DOMNode.prototype.setPseudoClassEnabled.changed): Added.
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles): Added listener for EnabledPseudoClassesChanged.
+        (WebInspector.DOMNodeStyles.prototype.mediaQueryResultDidChange): Added. Call _markAsNeedsRefresh.
+        (WebInspector.DOMNodeStyles.prototype._markAsNeedsRefresh): Added.
+        (WebInspector.DOMNodeStyles.prototype._pseudoClassesDidChange): Added. Call _markAsNeedsRefresh.
+        (WebInspector.DOMNodeStyles.prototype._attributesDidChange): Use _markAsNeedsRefresh.
+        (WebInspector.DOMNodeStyles.prototype._styleSheetContentDidChange.checkRules): Ditto.
+        (WebInspector.DOMNodeStyles.prototype._styleSheetContentDidChange): Ditto.
+
+2013-03-01  Timothy Hatcher  <timothy@apple.com>
+
+        Changes are committed to frequently since updating to CodeMirror 3.1.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._contentChanged): The origin for user input
+        changed from "input" to "+input". And there is now "+delete". Internally CodeMirror just looks for
+        the "+" prefix to decide if the change should coalesce in undo history. We should do the same.
+
+2013-03-01  Timothy Hatcher  <timothy@apple.com>
+
+        Fix style editing after an Inspector protocol change for how SourceRange is sent.
+
+        <rdar://problem/13324015> Style editing in the new Style details sidebar is broken after r144434
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSProperty.js:
+        (WebInspector.CSSProperty): Removed startStyleSheetTextPosition and endStyleSheetTextPosition.
+        Added styleSheetTextRange and styleDeclarationTextRange.
+        (WebInspector.CSSProperty.prototype.update): Ditto. Delete _styleDeclarationTextRange if it isn't
+        given so it can be recomputed.
+        (WebInspector.CSSProperty.prototype.get styleSheetTextRange): Added.
+        (WebInspector.CSSProperty.prototype.get styleDeclarationTextRange): Added. Compute if missing.
+        * UserInterface/CSSStyleDeclaration.js:
+        (WebInspector.CSSStyleDeclaration): Removed startStyleSheetTextPosition and endStyleSheetTextPosition.
+        Added styleSheetTextRange.
+        (WebInspector.CSSStyleDeclaration.prototype.update): Ditto.
+        (WebInspector.CSSStyleDeclaration.prototype.get visibleProperties): Look for styleDeclarationTextRange.
+        (WebInspector.CSSStyleDeclaration.prototype.get styleSheetTextRange): Added.
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createTextMarkerForPropertyIfNeeded): Don't add
+        checkboxes for properties if the editor is read-only.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._updateTextMarkers): Use styleDeclarationTextRange.
+        Don't add checkboxes for comments if the editor is read-only.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent): Use styleSheetTextRange.
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.changeStyleText): Use styleSheetTextRange.
+        (WebInspector.DOMNodeStyles.prototype.changeStyleText.fetchedStyleSheetContent): Use styleSheetTextRange.
+        (WebInspector.DOMNodeStyles.prototype._handlePropertyChange): Update comment.
+        (WebInspector.DOMNodeStyles.prototype._parseSourceRangePayload): Added. Helper.
+        (WebInspector.DOMNodeStyles.prototype._parseStylePropertyPayload): Use _parseSourceRangePayload.
+        (WebInspector.DOMNodeStyles.prototype._parseStyleDeclarationPayload): Ditto.
+        * UserInterface/TextRange.js:
+        (WebInspector.TextRange): Allow 4 or 2 argument construction. One for lines and columns, the other for offsets.
+        (WebInspector.TextRange.prototype.get startLine): Added.
+        (WebInspector.TextRange.prototype.get startColumn): Added.
+        (WebInspector.TextRange.prototype.get endLine): Added.
+        (WebInspector.TextRange.prototype.get endColumn): Added.
+        (WebInspector.TextRange.prototype.get startOffset): Added.
+        (WebInspector.TextRange.prototype.get endOffset): Added.
+        (WebInspector.TextRange.prototype.resolveLinesAndColumns): Added.
+        (WebInspector.TextRange.prototype.resolveLinesAndColumns.countNewLineCharacters): Added.
+        (WebInspector.TextRange.prototype.resolveOffsets): Added.
+
+2013-02-28  Timothy Hatcher  <timothy@apple.com>
+
+        Switch from post-processing for the style pretty printer to fully synthesized content.
+
+        Inserting a newline between the semicolon and the next property was causing the newline
+        to be inserted between the next property and its checkbox. This is controllable via the
+        insertLeft option on bookmarks in CodeMirror; however, that causes typed text to go on
+        the left of the checkbox.
+
+        Switching to the synthesized code path is cleaner and simpler.
+
+        <rdar://problem/13314682> Styles on Twitter.com have checkboxes at the end of the property
+        instead of beginning
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent): Renamed lineCount()
+        to countNewLineCharacters() since it conflicts with the lineCount variable.
+
+2013-02-28  Timothy Hatcher  <timothy@apple.com>
+
+        Don't disable property checkboxes after click to prevent a subtle flash.
+
+        <rdar://problem/13306506> CSS rule box flashes checkboxes and crossed-out text during editing
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._propertyCheckboxChanged): Don't set disabled.
+        Remove assert for range since it might have been removed already.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._propertyCommentCheckboxChanged): Ditto.
+
+2013-02-28  Timothy Hatcher  <timothy@apple.com>
+
+        Use CodeMirror 3.1's new getAllMarks() instead of tracking them ourselves.
+
+        Also fix an assert that would fire if we reused a text marker that was removed.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor): Remove _textMarkers.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._updateTextMarkers): Stop using _textMarkers.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createTextMarkerForPropertyIfNeeded): Ditto.
+        Also only reuse a marker if it is still in the document.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches): Stop using _textMarkers.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._updateTextMarkers): Ditto.
+
+2013-02-27  Timothy Hatcher  <timothy@apple.com>
+
+        Remove a flash of the color swatch when toggling a property.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches): Add lineNumber
+        parameter to update only that line. Also skip colors that are already marked.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._propertyCheckboxChanged): Call _createColorSwatches.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._propertyCommentCheckboxChanged): Ditto.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchClicked): Set __markedColor
+        to true so we know it is a color. Remove an unused class name.
+
+2013-02-27  Timothy Hatcher  <timothy@apple.com>
+
+        Pretty print the style text if there are more properties than there are lines.
+
+        There are a few style rules on apple.com that are multiple lines with 5-10
+        properties per line. These were avoiding the pretty printing because the line
+        count was greater than one.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclaration.js:
+        (WebInspector.CSSStyleDeclaration.prototype.update): Clear _visibleProperties.
+        (WebInspector.CSSStyleDeclaration.prototype.get visibleProperties): Added.
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._iterateOverProperties): Add an
+        option to only iterate over the visible properties. Also pass along if this is the last
+        property to the callback.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._updateTextMarkers): Pass true to
+        _iterateOverProperties.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent): Pretty print if the
+        visible property count is greater than the line count.
+
+2013-02-27  Timothy Hatcher  <timothy@apple.com>
+
+        Fix the text selection color in the style
+
+        This is fallout from upgrading to CodeMirror 3.1.
+
+        <rdar://problem/13307885> REGRESSION: Selection color in CodeMirror editors is always showing as gray unfocused
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.css:
+        (.css-style-text-editor > .CodeMirror.CodeMirror-focused .CodeMirror-selected): Fixed the selector
+        to look for CodeMirror-focused on the .CodeMirror element.
+        * UserInterface/TextEditor.css:
+        (.text-editor > .CodeMirror.CodeMirror-focused .CodeMirror-selected): Ditto.
+
+2013-02-27  Timothy Hatcher  <timothy@apple.com>
+
+        Don't do a full refresh of the Style details sidebar unless the included style declarations
+        actually did change.
+
+        Firing the DOMNodeStyles refreshed event cause the DOM to be rebuilt and that interrupts typing
+        and causes the checkboxes to flash.
+
+        <rdar://problem/13306506> CSS rule box flashes checkboxes and crossed-out text during editing
+        <rdar://problem/13306813> Typing very fast drops characters when editing in the Style details sidebar
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.refresh): Removed dontFireRefreshedEvent parameter. We now
+        smartly detect if the event needs to fire.
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedMatchedStyles): Remove dontFireRefreshedEvent.
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedComputedStyle): Iterate over the styles and
+        check if any were added or removed from the last refresh.
+        (WebInspector.DOMNodeStyles.prototype.attributeChanged): Stop passing true to refresh().
+        (WebInspector.DOMNodeStyles.prototype._handlePropertyChange): Ditto.
+
+2013-02-27  Timothy Hatcher  <timothy@apple.com>
+
+        WebInspector.CSSProperty.Event.OverriddenStatusChanged is firing too much.
+
+        In the workaround that landed in r48890, we delayed the fetch for inline and computed styles.
+        This caused the OverriddenStatusChanged event to fire because the coalesce delay timed out
+        while waiting for the inline style to come over the wire.
+
+        Now we fetch them immediately again and if matched styles fails we make the inline and computed
+        style callbacks bail before parsing their results. Failing is an edge case that might be fixed
+        on the backend soon, so throwing the results away isn't that expensive. This also improves
+        refresh performance in the common case.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.refresh): Initialize matchedStylesFailed to false.
+        (WebInspector.DOMNodeStyles.prototype.fetchedMatchedStyles): Set matchedStylesFailed.
+        (WebInspector.DOMNodeStyles.prototype.fetchedInlineStyles): Return early if matchedStylesFailed.
+        (WebInspector.DOMNodeStyles.prototype.fetchedComputedStyle): Ditto.
+
+2013-02-27  Timothy Hatcher  <timothy@apple.com>
+
+        Properties are not updated when overridden status changes.
+
+        This is fallout from upgrading to CodeMirror 3.1.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createTextMarkerForPropertyIfNeeded):
+        The cm property moved to the new doc property of TextMarker.
+
+2013-02-27  Timothy Hatcher  <timothy@apple.com>
+
+        Pretty print the style text if there are multiple properties on only one line.
+
+        This helps cases like apple.com and nytimes.com where minified or single line
+        rules are the norm.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent): Loop over
+        the properties that have markers and add newlines after them.
+
+2013-02-27  Timothy Hatcher  <timothy@apple.com>
+
+        Make color swatches show up for user agent styles, and other styles that don't have text.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._contentChanged): Return early if the style isn't
+        editable. This still can be called when readOnly is set because clicking on a color swatch modifies the text.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._updateTextMarkers): Broke color matching out into
+        _createColorSwatches. Added nonatomic support to avoid nesting operations.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches): Added.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent): Call _createColorSwatches in synthesized
+        case when there isn't style text.
+
+2013-02-27  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13218172> Make hover state for dashboard icons more pronounced
+
+        Add a thin border around dashboard items on hover and make it slightly
+        more pronounced when the item is also being clicked.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DashboardView.css:
+        (.dashboard > .item):
+        (.dashboard > .item.enabled:hover):
+        (.dashboard > .item.enabled:active):
+        (.toolbar.normal-size.icon-and-label-horizontal > .item-section > .dashboard > .item):
+        (.toolbar.small-size.icon-and-label-vertical > .item-section > .dashboard > .item):
+        (.toolbar.small-size.icon-and-label-vertical > .item-section > .dashboard > .resources):
+        (.toolbar.small-size.icon-and-label-vertical > .item-section > .dashboard > .time):
+        (.toolbar.small-size.icon-and-label-vertical > .item-section > .dashboard > .logs):
+        (.toolbar.small-size.icon-and-label-vertical > .item-section > .dashboard > .memory):
+        (.toolbar.small-size.icon-and-label-vertical > .item-section > .dashboard > .errors):
+        (.toolbar.small-size.icon-and-label-vertical > .item-section > .dashboard > .issues):
+        (.toolbar.normal-size.icon-and-label-vertical > .item-section > .dashboard > .item):
+        (.toolbar.normal-size.icon-and-label-vertical > .item-section > .dashboard > .resources):
+        (.toolbar.normal-size.icon-and-label-vertical > .item-section > .dashboard > .time):
+        (.toolbar.normal-size.icon-and-label-vertical > .item-section > .dashboard > .logs):
+        (.toolbar.normal-size.icon-and-label-vertical > .item-section > .dashboard > .memory):
+        (.toolbar.normal-size.icon-and-label-vertical > .item-section > .dashboard > .errors):
+        (.toolbar.normal-size.icon-and-label-vertical > .item-section > .dashboard > .issues):
+
+2013-02-27  Timothy Hatcher  <timothy@apple.com>
+
+        Update CodeMirror from 3.0.2 to 3.1.
+
+        Rubber-stamped by Jeff Miller.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.get focused): Use the wrapper
+        element since the classname moved from the scroller element.
+        * UserInterface/External/CodeMirror/codemirror.css: Updated.
+        * UserInterface/External/CodeMirror/codemirror.js: Updated.
+        * UserInterface/External/CodeMirror/htmlmixed.js: Updated.
+        * UserInterface/External/CodeMirror/javascript.js: Updated.
+        * UserInterface/External/CodeMirror/matchbrackets.js: Updated.
+        * UserInterface/External/CodeMirror/searchcursor.js: Updated.
+
+2013-02-26  Timothy Hatcher  <timothy@apple.com>
+
+        Add support to CodeMirror for incrementing and decrementing numbers.
+
+        The key binding are:
+        * Option-Up: +1
+        * Shift-Option-Up: +10
+        * Option-PageUp: +10
+        * Shift-Option-PageUp: +100
+        * Option-Down: -1
+        * Shift-Option-Down: -10
+        * Option-PageDown: -10
+        * Shift-Alt-PageDown: -100
+
+        When altering by 1 or -1 any numbers between 1 and -1 will be altered
+        by 0.1 or -0.1 instead.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CodeMirrorAdditions.js:
+        (alterNumber): Added. Hooked up via the default key map that extends the
+        Mac keybindings. This means all instances of CodeMirror get this support.
+
+2013-02-26  Timothy Hatcher  <timothy@apple.com>
+
+        Add color swatches next to color strings.
+
+        <rdar://problem/7206272>
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/CSSStyleDeclarationTextEditor.css:
+        (.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch): Added.
+        (.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch > span): Added.
+        (.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch:hover > span): Added.
+        (.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch:active > span): Added.
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._updateTextMarkers): Search for colors
+        and add swatches next to them.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchClicked): Added. Replace the
+        text with the next color format.
+        * UserInterface/Color.js:
+        (WebInspector.Color.prototype.nextFormat): Added. Helper to pick the next format.
+
+2013-02-26  Timothy Hatcher  <timothy@apple.com>
+
+        Add checkboxes next to property names and commented out properties.
+
+        Unchecking will comment out the property and checking the box next to a property comment
+        will uncomment it and make it live again.
+
+        <rdar://problem/7206272>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.css:
+        (.css-style-text-editor.read-only > .CodeMirror pre): Added. Indent the text the same amount
+        as if there were checkboxes.
+        (.css-style-text-editor > .CodeMirror .CodeMirror-lines input[type=checkbox]): Added.
+        (.css-style-text-editor:hover > .CodeMirror .CodeMirror-lines input[type=checkbox]): Added.
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._updateTextMarkers): Look for comments
+        that look like properties and add checkboxes in front of them.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createTextMarkerForPropertyIfNeeded):
+        Create checkbox marker for properties or update the existing one.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._clearTextMarkers): Delete __checkboxMarker.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._propertyCheckboxChanged): Added.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._propertyCommentCheckboxChanged): Added.
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent): Set the read-only style class
+        so the text of read-only styles is indented the same amount as if there were checkboxes.
+
+2013-02-25  Timothy Hatcher  <timothy@apple.com>
+
+        Implement the Rules details style panel.
+
+        <rdar://problem/7206272&12526319>
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+
+        * UserInterface/CSSStyleDeclarationSection.css: Added.
+        (.style-declaration-section):
+        (.style-declaration-section + .style-declaration-section):
+        (.style-declaration-section.last-in-group):
+        (.style-declaration-section.last-in-group + .style-declaration-section):
+        (.style-declaration-section.last-in-group + .style-declaration-section:last-child):
+        (.style-declaration-section:last-child):
+        (.style-declaration-section > .header):
+        (.style-declaration-section > .header > .icon):
+        (.style-declaration-section > .header > .selector):
+        (.style-declaration-section > .header > .selector:focus):
+        (.style-declaration-section.selector-locked > .header > .selector):
+        (.style-declaration-section.locked > .header::after):
+        (.style-declaration-section > .header > .selector > .matched):
+        (.style-declaration-section > .header > .origin):
+        (.style-declaration-section > .header > .origin > .go-to-link):
+
+        * UserInterface/CSSStyleDeclarationSection.js: Added.
+        (WebInspector.CSSStyleDeclarationSection):
+        (WebInspector.CSSStyleDeclarationSection.prototype.get element):
+        (WebInspector.CSSStyleDeclarationSection.prototype.get style):
+        (WebInspector.CSSStyleDeclarationSection.prototype.get lastInGroup):
+        (WebInspector.CSSStyleDeclarationSection.prototype.set lastInGroup):
+        (WebInspector.CSSStyleDeclarationSection.prototype.get focused):
+        (WebInspector.CSSStyleDeclarationSection.prototype.focus):
+        (WebInspector.CSSStyleDeclarationSection.prototype.refresh.appendSelector):
+        (WebInspector.CSSStyleDeclarationSection.prototype.refresh):
+        (WebInspector.CSSStyleDeclarationSection.prototype.updateLayout):
+        (WebInspector.CSSStyleDeclarationSection.prototype._commitSelector):
+
+        * UserInterface/Images/StyleRuleAuthor.pdf: Added.
+        * UserInterface/Images/StyleRuleInherited.pdf: Added.
+        * UserInterface/Images/StyleRuleInheritedElement.pdf: Added.
+        * UserInterface/Images/StyleRuleInspector.pdf: Added.
+        * UserInterface/Images/StyleRuleUser.pdf: Added.
+        * UserInterface/Images/StyleRuleUserAgent.pdf: Added.
+
+        * UserInterface/Main.html: Included new files.
+
+        * UserInterface/RulesStyleDetailsPanel.css: Added.
+        (.sidebar > .panel.details.css-style .rules .inherited-label):
+        (.sidebar > .panel.details.css-style .rules .inherited-label + .style-declaration-section):
+
+        * UserInterface/RulesStyleDetailsPanel.js:
+        (WebInspector.RulesStyleDetailsPanel):
+        (WebInspector.RulesStyleDetailsPanel.prototype.refresh.appendStyleSection):
+        (WebInspector.RulesStyleDetailsPanel.prototype.refresh):
+        (WebInspector.RulesStyleDetailsPanel.prototype.shown):
+        (WebInspector.RulesStyleDetailsPanel.prototype.hidden):
+        (WebInspector.RulesStyleDetailsPanel.prototype.widthDidChange):
+
+        * UserInterface/StyleRuleIcons.css: Added.
+        (.author-style-rule-icon .icon):
+        (.user-style-rule-icon .icon):
+        (.user-agent-style-rule-icon .icon):
+        (.inspector-style-rule-icon .icon):
+        (.inherited-style-rule-icon .icon):
+        (.inherited-element-style-rule-icon .icon):
+
+2013-02-25  Timothy Hatcher  <timothy@apple.com>
+
+        Implement the Computed details style panel.
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/ComputedStyleDetailsPanel.js:
+        (WebInspector.ComputedStyleDetailsPanel):
+        (WebInspector.ComputedStyleDetailsPanel.prototype.refresh):
+        (WebInspector.ComputedStyleDetailsPanel.prototype.shown):
+        (WebInspector.ComputedStyleDetailsPanel.prototype.widthDidChange):
+        (WebInspector.ComputedStyleDetailsPanel.prototype._computedStyleShowAllCheckboxValueChanged):
+
+2013-02-25  Timothy Hatcher  <timothy@apple.com>
+
+        Add CSSStyleDeclarationTextEditor.
+
+        This class implements a rich text editor for style text. It will reflect the assigned CSSStyleDeclaration.
+        Edits will be applied to the page and property parse errors or overridden status will be highlighted.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclarationTextEditor.css: Added.
+        (.css-style-text-editor):
+        (.css-style-text-editor > .CodeMirror):
+        (.css-style-text-editor > .CodeMirror *):
+        (.css-style-text-editor > .CodeMirror-scroll):
+        (.css-style-text-editor > .CodeMirror .CodeMirror-lines):
+        (.css-style-text-editor > .CodeMirror pre):
+        (.css-style-text-editor > .CodeMirror .CodeMirror-selected):
+        (.css-style-text-editor > .CodeMirror .CodeMirror-focused .CodeMirror-selected):
+        (.css-style-text-editor > .CodeMirror .CodeMirror-cursor):
+        (.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.overridden):
+        (.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.invalid):
+        (.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.not-inherited):
+        * UserInterface/CSSStyleDeclarationTextEditor.js: Added.
+        (WebInspector.CSSStyleDeclarationTextEditor):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.get element):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.get delegate):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.set delegate):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.get style):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.set style):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.get focused):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.get alwaysShowPropertyNames):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.set alwaysShowPropertyNames):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.get showsImplicitProperties):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.set showsImplicitProperties):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.get sortProperties):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.set sortProperties):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.focus):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.refresh):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.updateLayout):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.shown):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.hidden):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._formatedContent):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._commitChanges):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._contentChanged):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._updateTextMarkers):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._updateTextMarkerForPropertyIfNeeded):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createTextMarkerForPropertyIfNeeded):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._clearTextMarkers):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._iterateOverProperties.sortProperty):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._iterateOverProperties):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._propertyOverriddenStatusChanged):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._propertiesChanged):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._styleOffsetToCodeMirrorPosition):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent.update.else.lineCount):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent.update):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent):
+        * UserInterface/CodeMirrorAdditions.js:
+        * UserInterface/Main.html:
+
+2013-02-25  Timothy Hatcher  <timothy@apple.com>
+
+        Implement the Metrics details style panel.
+
+        Converts BoxModelDetailsSectionRow to use the new CSS model. Removes code needed to
+        work with the old CSS model.
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/BoxModelDetailsSectionRow.js:
+        (WebInspector.BoxModelDetailsSectionRow):
+        (WebInspector.BoxModelDetailsSectionRow.prototype.get nodeStyles):
+        (WebInspector.BoxModelDetailsSectionRow.prototype.set nodeStyles):
+        (WebInspector.BoxModelDetailsSectionRow.prototype._refresh):
+        (WebInspector.BoxModelDetailsSectionRow.prototype._getPropertyValueAsPx):
+        (WebInspector.BoxModelDetailsSectionRow.prototype._highlightDOMNode):
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createBoxPartElement):
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createContentAreaWidthElement):
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createContentAreaHeightElement):
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics):
+        (WebInspector.BoxModelDetailsSectionRow.prototype._startEditing):
+        (WebInspector.BoxModelDetailsSectionRow.prototype._alteredFloatNumber): Added. Copied from the now
+        removed CSSPropertyPrompt class.
+        (WebInspector.BoxModelDetailsSectionRow.prototype._handleKeyDown):
+        (WebInspector.BoxModelDetailsSectionRow.prototype._editingCancelled):
+        (WebInspector.BoxModelDetailsSectionRow.prototype._applyUserInput):
+        * UserInterface/MetricsStyleDetailsPanel.js:
+        (WebInspector.MetricsStyleDetailsPanel):
+        (WebInspector.MetricsStyleDetailsPanel.prototype.refresh):
+
+2013-02-25  Timothy Hatcher  <timothy@apple.com>
+
+        Remember the scroll position when refreshing the style detail panels.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/StyleDetailsPanel.js:
+        (WebInspector.StyleDetailsPanel.prototype.refreshIfNeeded): Call _refreshPreservingScrollPosition
+        instead refresh.
+        (WebInspector.StyleDetailsPanel.prototype._refreshPreservingScrollPosition): Added. Only remember the
+        scroll position if the previous node is the same as this one.
+        (WebInspector.StyleDetailsPanel.prototype._nodeStylesRefreshed): Call _refreshPreservingScrollPosition
+        instead refresh.
+
+2013-02-25  Timothy Hatcher  <timothy@apple.com>
+
+        Tell SidebarPanel and StyleDetailsPanel when the width of the Sidebar changes.
+
+        This will be needed to update CodeMirror on the size change.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.visibilityDidChange): Added. Tell the selected
+        panel to refresh if needed.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.widthDidChange): Added. Tell the selected panel
+        that the width changed.
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar.prototype.set width): Call widthDidChange on the sidebar panel.
+        (WebInspector.Sidebar.prototype.set collapsed): Ditto.
+        * UserInterface/SidebarPanel.js:
+        (WebInspector.SidebarPanel.prototype.widthDidChange): Added stub.
+        * UserInterface/StyleDetailsPanel.js:
+        (WebInspector.StyleDetailsPanel.prototype.widthDidChange): Added stub.
+
+2013-02-21  Timothy Hatcher  <timothy@apple.com>
+
+        Add start implementation for each of the three Style detail panels.
+
+        <rdar://problem/7206272&12526319>
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/CSSStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style):
+        (.sidebar > .panel.details.css-style > .navigation-bar):
+        (.sidebar > .panel.details.css-style > .content):
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel):
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh):
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._navigationItemSelected):
+        * UserInterface/ComputedStyleDetailsPanel.js: Added.
+        (WebInspector.ComputedStyleDetailsPanel):
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.get needsRefresh): Added.
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector._updateStickyPostionStyles):
+        * UserInterface/MetricsStyleDetailsPanel.js: Added.
+        (WebInspector.MetricsStyleDetailsPanel):
+        * UserInterface/RulesStyleDetailsPanel.js: Added.
+        (WebInspector.RulesStyleDetailsPanel):
+        * UserInterface/StyleDetailsPanel.js: Added.
+        (WebInspector.StyleDetailsPanel):
+        (WebInspector.StyleDetailsPanel.prototype.get element):
+        (WebInspector.StyleDetailsPanel.prototype.get navigationItem):
+        (WebInspector.StyleDetailsPanel.prototype.get nodeStyles):
+        (WebInspector.StyleDetailsPanel.prototype.shown):
+        (WebInspector.StyleDetailsPanel.prototype.hidden):
+        (WebInspector.StyleDetailsPanel.prototype.markAsNeedsRefresh):
+        (WebInspector.StyleDetailsPanel.prototype.refreshIfNeeded):
+        (WebInspector.StyleDetailsPanel.prototype.refresh):
+        (WebInspector.StyleDetailsPanel.prototype._nodeStylesRefreshed):
+        (WebInspector.StyleDetailsPanel.prototype._nodeStylesNeedsRefreshed):
+
+2013-02-21  Timothy Hatcher  <timothy@apple.com>
+
+        Add start of new implementation of CSSStyleDetailsSidebarPanel.
+
+        <rdar://problem/7206272&12526319>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.css: Added.
+        (.sidebar > .panel.details.css-style): Added. Empty for now.
+        * UserInterface/CSSStyleDetailsSidebarPanel.js: Added.
+        (WebInspector.CSSStyleDetailsSidebarPanel):
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.supportsDOMNode):
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh):
+        * UserInterface/Images/NavigationItemBrushAndRuler.pdf: Added.
+
+2013-02-21  Timothy Hatcher  <timothy@apple.com>
+
+        Remove CSSStyleDetailsSidebarPanel and friends in preparation for a new implementation.
+
+        <rdar://problem/7206272&12526319>
+
+        Rubber-stamped by Joseph Pecoraro.
+
+        * UserInterface/CSSPropertyPrompt.js: Removed.
+        * UserInterface/CSSStyleDetailsSidebarPanel.css: Removed.
+        * UserInterface/CSSStyleDetailsSidebarPanel.js: Removed.
+        * UserInterface/ComputedStylePropertiesSection.js: Removed.
+        * UserInterface/Main.html: Removed files except CSSStyleDetailsSidebarPanel.{js,css}.
+        * UserInterface/OldCSSMedia.js: Removed.
+        * UserInterface/OldCSSProperty.js: Removed.
+        * UserInterface/OldCSSRule.js: Removed.
+        * UserInterface/OldCSSStyleDeclaration.js: Removed.
+        * UserInterface/StylePropertiesSection.js: Removed.
+        * UserInterface/StylePropertyTreeElement.js: Removed.
+
+2013-02-21  Timothy Hatcher  <timothy@apple.com>
+
+        Remove AppearanceDetailsSidebarPanel in preparation for it being merged with Style details.
+
+        <rdar://problem/7206272&12526319>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/AppearanceDetailsSidebarPanel.js: Removed.
+        * UserInterface/Main.html: Removed AppearanceDetailsSidebarPanel.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Removed AppearanceDetailsSidebarPanel.
+
+2013-02-21  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for text only navigation buttons.
+
+        This will be used by the navigation bar in the new Styles sidebar.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ButtonNavigationItem.css:
+        (.navigation-bar .item.button.text-only): Added.
+        (.navigation-bar .item.button:not(.disabled):not(.radio):not(.suppress-bezel):active):
+        Use -webkit-calc in the background-position to work with variable widths.
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem):
+        (WebInspector.ButtonNavigationItem.prototype.get label):
+        (WebInspector.ButtonNavigationItem.prototype.set label):
+        (WebInspector.ButtonNavigationItem.prototype.set image):
+        * UserInterface/RadioButtonNavigationItem.css:
+        (.navigation-bar .item.radio.button:not(.text-only)): Added :not(.text-only) to allow
+        variable based on text length.
+        (.navigation-bar.collapsed .item.radio.button:not(.text-only)): Ditto.
+        (.navigation-bar .item.radio.button.selected): Use -webkit-calc in the background-position
+        to work with variable widths.
+
+2013-02-25  Timothy Hatcher  <timothy@apple.com>
+
+        Don't try to commit changes before we have new text positions.
+
+        We need to keep the startStyleSheetTextPosition and endStyleSheetTextPosition up-to-date.
+        If we don't have the correct positions then we can corrupt the stylesheet the next time
+        the user makes an edit.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles): Initialize _stylesNeedingTextCommited to [].
+        (WebInspector.DOMNodeStyles.prototype.refresh): Call changeStyleText for the next style
+        object that needs changed.
+        (WebInspector.DOMNodeStyles.prototype.changeRuleSelector): Set _needsRefresh to true.
+        (WebInspector.DOMNodeStyles.prototype.changeStyleText): If we need a refresh then it is not safe
+        to make the edits now. Store the text and remember the style so we can commit it after the next refresh.
+        (WebInspector.DOMNodeStyles.prototype.changePropertyText): Set _needsRefresh to true.
+        (WebInspector.DOMNodeStyles.prototype._handlePropertyChange): Call refresh to get updated positions and
+        computed style info.
+
+2013-02-25  Timothy Hatcher  <timothy@apple.com>
+
+        Always try to update the resource when a stylesheet changes.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager.prototype.styleSheetChanged): Always call _updateResourceContent. This
+        was preventing resource updates when the stylesheet changed because of a sidebar text edit. Checking the result
+        of noteContentDidChange was to prevent updating the resource content if the change originated from a resource edit.
+        However, we will soon allow text edits from the sidebar and the check was preventing resources from being updated.
+        The new check in the content setter of SourceCodeRevision prevents updating resources when they haven't changed.
+        * UserInterface/SourceCodeRevision.js:
+        (WebInspector.SourceCodeRevision.prototype.set content): Return early if the content is the same.
+
+2013-02-25  Timothy Hatcher  <timothy@apple.com>
+
+        Fix typo that was preventing refresh of DOMNodeStyles.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype._styleSheetContentDidChange): The property is ownerStyleSheet, not parentStyleSheet.
+
+2013-02-25  Timothy Hatcher  <timothy@apple.com>
+
+        Workaround a bug where matched rules is empty for stylesheets with imported stylesheets.
+
+        If matched rules is empty (rare because of user agent stylesheet rules) then WebCore might
+        be waiting for an @import rule to load. Check again after a delay until we get some results or timeout.
+        We shouldn't need to poll like this, https://webkit.org/b/110750 tracks this problem.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.refresh): Removed map clearing and call to CSSAgent.getInlineStylesForNode
+        and CSSAgent.getComputedStyleForNode. We only want to fetch those if fetchedMatchedStyles succeeds.
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedMatchedStyles): Schedule another refresh attempt and
+        return early if the match is empty. Moved the map clearing here after the early return. Call CSSAgent.getInlineStylesForNode.
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedInlineStyles): Call CSSAgent.getComputedStyleForNode.
+
+2013-02-25  Timothy Hatcher  <timothy@apple.com>
+
+        Don't reuse a pending property if it is already used.
+
+        This was happening when parsing an edit that had multiple properties with the same name.
+        The last property to be parsed was picking the same pending property and preventing
+        all properties from being represented with the right value, etc.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype._parseStylePropertyPayload): Only pick a pending property
+        if the index is NaN.
+
+2013-02-25  Timothy Hatcher  <timothy@apple.com>
+
+        Prevent firing change events in more places when nothing has changed.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclaration.js:
+        (WebInspector.CSSStyleDeclaration.prototype.update.delayed): Don't fire the event if there is text and it hasn't changed.
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedComputedStyle): Only fire Refreshed if !dontFireRefreshedEvent.
+        (WebInspector.DOMNodeStyles.prototype.changeStyleText.attributeChanged): Pass true to refresh().
+        (WebInspector.DOMNodeStyles.prototype.changeStyleText.contentDidChange): Added. Call refresh().
+        (WebInspector.DOMNodeStyles.prototype.changeStyleText.fetchedStyleSheetContent): Listen for content change.
+        (WebInspector.DOMNodeStyles.prototype._attributesDidChange): Ignore if _ignoreNextStyleAttributeDidChangeEvent
+        is set and the attribute is "style".
+
+2013-02-22  Timothy Hatcher  <timothy@apple.com>
+
+        Minimize the number of times the OverriddenStatusChanged is fired for properties.
+
+        When updating styles, DOMNodeStyles will sometimes temporarily change overridden
+        to false only to later change it back to true when it finds the effective property
+        in a later style in the cascade. To minimize churn we coalesce these changes and
+        only fire the event if the value is different after a delay.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSProperty.js:
+        (WebInspector.CSSProperty.prototype.update): Use the setter for overridden
+        if we want to fire events.
+        (WebInspector.CSSProperty.prototype.set overridden.delayed): Added.
+        (WebInspector.CSSProperty.prototype.set overridden): Coalesce changes and
+        only fire the event if the end result differs.
+
+2013-02-22  Timothy Hatcher  <timothy@apple.com>
+
+        Delay firing the PropertiesChanged event so DOMNodeStyles has a chance
+        to mark overridden and associated properties.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclaration.js:
+        (WebInspector.CSSStyleDeclaration.prototype.update.delayed): Added. Fire the event here.
+        (WebInspector.CSSStyleDeclaration.prototype.update): Set a timeout and call delayed.
+
+2013-02-22  Timothy Hatcher  <timothy@apple.com>
+
+        Consider the properties as enabled for computed style declarations.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSProperty.js:
+        (WebInspector.CSSProperty.prototype.get enabled): Check for CSSStyleDeclaration.Type.Computed.
+
+2013-02-22  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for checking if a property has another vendor prefix.
+
+        This will be used to style those properties differently instead of marking
+        them as completely invalid. Also fix a regex error in canonicalNameForPropertyName.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSProperty.js:
+        (WebInspector.CSSProperty.prototype.update): Delete _hasOtherVendorPrefix.
+        (WebInspector.CSSProperty.prototype.hasOtherVendorPrefix): Added.
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager.prototype.propertyNameHasOtherVendorPrefix): Added.
+        (WebInspector.CSSStyleManager.prototype.canonicalNameForPropertyName): Fix the regex
+        to check the beginning of the string.
+
+2013-02-25  Timothy Hatcher  <timothy@apple.com>
+
+        Add effectivePropertyForName to DOMNodeStyles.
+
+        Also mark the longhand properties as effective if the shorthand property is the effective property.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.effectivePropertyForName): Added.
+        (WebInspector.DOMNodeStyles.prototype._updateStyleCascade): Pass _propertyNameToEffectivePropertyMap
+        to _associateRelatedProperties.
+        (WebInspector.DOMNodeStyles.prototype._associateRelatedProperties): Set propertyNameToEffectiveProperty
+        for the longhand if the related shorthand is effective.
+
+2013-02-21  Timothy Hatcher  <timothy@apple.com>
+
+        Don't try to add or remove a CSSProperty if the index is wrong.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSProperty.js:
+        (WebInspector.CSSProperty.prototype.add): Return early if index is not NaN.
+        (WebInspector.CSSProperty.prototype.remove): Return early if index is NaN.
+
+2013-02-22  Timothy Hatcher  <timothy@apple.com>
+
+        Mark DOMNodesStyles as needing refresh if attributes change on the node.
+
+        Also fix a leak with the CSSStyleSheet.Event.ContentDidChange listener.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNode.js:
+        (WebInspector.DOMNode.Event.AttributeModified): Added.
+        (WebInspector.DOMNode.Event.AttributeRemoved): Added.
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles): Listen for AttributeModified and AttributeRemoved events.
+        Stop listening for CSSStyleSheet.Event.ContentDidChange globally to avoid a leak.
+        (WebInspector.DOMNodeStyles.prototype._parseStyleDeclarationPayload): Listen for
+        CSSStyleSheet.Event.ContentDidChange on the stylesheet object here.
+        (WebInspector.DOMNodeStyles.prototype._parseRulePayload): Ditto.
+        (WebInspector.DOMNodeStyles.prototype._attributesDidChange): Added. Mark as needing
+        refresh and fire the NeedsRefresh event.
+        * UserInterface/DOMTreeManager.js:
+        (WebInspector.DOMTreeManager.prototype._attributeModified): Fire the event on DOMNode too.
+        (WebInspector.DOMTreeManager.prototype._attributeRemoved): Ditto.
+
+2013-02-22  Timothy Hatcher  <timothy@apple.com>
+
+        Fix some event listener leaks related to the DOM content view.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView.prototype.closed): Call close on the DOMTreeOutline.
+        Use the new version of removeEventListener by passing null for type and listener.
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline.prototype.close): Added. Call close on the DOMTreeUpdater.
+        * UserInterface/DOMTreeUpdater.js:
+        (WebInspector.DOMTreeUpdater.prototype.close): Added. Call removeEventListener.
+        * UserInterface/Object.js:
+        (WebInspector.Object.addEventListener): Prevent registering multiple times.
+        (WebInspector.Object.removeEventListener): Handle a null eventType by looping over all
+        the registered types. Delete _listeners if the map is empty.
+
+2013-02-20  Timothy Hatcher  <timothy@apple.com>
+
+        Avoid a crash when changing the text of an inline style.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.attributeChanged): Set the style attribute
+        on the node when the style is an inline style.
+
+2013-02-20  Timothy Hatcher  <timothy@apple.com>
+
+        Return early in the CSSProperty and CSSStyleDeclaration setters if the value does not change.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSProperty.js:
+        (WebInspector.CSSProperty.prototype.set text): Return early.
+        (WebInspector.CSSProperty.prototype.set name): Ditto.
+        (WebInspector.CSSProperty.prototype.set value): Ditto.
+        (WebInspector.CSSProperty.prototype.set priority): Ditto.
+        * UserInterface/CSSStyleDeclaration.js:
+        (WebInspector.CSSStyleDeclaration.prototype.set text): Return early.
+
+2013-02-20  Timothy Hatcher  <timothy@apple.com>
+
+        Properly parse CSSProperty.status and handle when it is missing.
+
+        The Inspector.json documentation was incorrect about this, and has been
+        fixed in r143465.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSProperty.js:
+        (WebInspector.CSSProperty): Added anonymous parameter.
+        (WebInspector.CSSProperty.prototype.update): Ditto.
+        (WebInspector.CSSProperty.prototype.get anonymous): Added.
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype._parseStylePropertyPayload): Set anonymous
+        to true when status is "style". Also default to "style" when status is missing.
+        (WebInspector.DOMNodeStyles.prototype._markOverriddenProperties): Skip anonymous
+        properties.
+
+2013-02-19  Timothy Hatcher  <timothy@apple.com>
+
+        Correct and simplify overridden property marking.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSProperty.js:
+        (WebInspector.CSSProperty.prototype.isActive): Removed.
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype._markOverriddenProperties): Only
+        use the propertyNameToEffectiveProperty map to accomplish what we needed
+        three maps for before. Only enabled is checked, instead of the old isActive
+        function. The isActive function was skipping already overridden properties,
+        so repeat calls to _markOverriddenProperties would not work correctly.
+
+2013-02-19  Timothy Hatcher  <timothy@apple.com>
+
+        Store all properties for inherited styles.
+
+        We need all properties so we can allow editing inherited styles while
+        not removing the non-inherited properties when the edits are applied.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSProperty.js:
+        (WebInspector.CSSProperty.prototype.update):
+        (WebInspector.CSSProperty.prototype.get inherited):
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.refresh):
+        (WebInspector.DOMNodeStyles.prototype._parseStyleDeclarationPayload):
+        (WebInspector.DOMNodeStyles.prototype._parseRulePayload):
+        (WebInspector.DOMNodeStyles.prototype._markOverriddenProperties):
+
+2013-02-19  Timothy Hatcher  <timothy@apple.com>
+
+        Properly handle repeat occurrences of the same rule.
+
+        A rule might match multiple times if the selector is generic and matches
+        ancestors and has inherited properties.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.refresh):
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedComputedStyle):
+        (WebInspector.DOMNodeStyles.prototype._handlePropertyChange):
+        (WebInspector.DOMNodeStyles.prototype._parseStyleDeclarationPayload):
+        (WebInspector.DOMNodeStyles.prototype._parseRulePayload):
+
+2013-02-19  Timothy Hatcher  <timothy@apple.com>
+
+        Add matchedSelectors and matchedSelectorText to CSSRule.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSRule.js:
+        (WebInspector.CSSRule.prototype.update): Delete _matchedSelectors and _matchedSelectorText.
+        (WebInspector.CSSRule.prototype.get matchedSelectors): Added.
+        (WebInspector.CSSRule.prototype.get matchedSelectorText): Added.
+
+2013-02-19  Timothy Hatcher  <timothy@apple.com>
+
+        Add editable getter to CSSRule.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSRule.js:
+        (WebInspector.CSSRule.prototype.get editable): Added.
+        (WebInspector.CSSRule.prototype.set selectorText): Return early if not editable
+        or if the selectors already match.
+        * UserInterface/CSSStyleDeclaration.js:
+        (WebInspector.CSSStyleDeclaration.prototype.get editable): Check the rule's editable
+        property too.
+
+2013-02-19  Timothy Hatcher  <timothy@apple.com>
+
+        Add orderedStyles to DOMNodeStyles.
+
+        This will allow the UI to easily display the styles in the right order.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles): Added _orderedStyles.
+        (WebInspector.DOMNodeStyles.prototype.get orderedStyles): Added.
+        (WebInspector.DOMNodeStyles.prototype._updateStyleCascade): Store orderedStyles
+        on the DOMNodeStyles object and the pseudo element objects.
+
+2013-02-19  Timothy Hatcher  <timothy@apple.com>
+
+        Store matched rules in reverse order so the most specific rule is first, not last.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.refresh.parseRuleMatchArrayPayload):
+        Iterate in reverse order to match the cascade order.
+        (WebInspector.DOMNodeStyles.prototype.changeRuleSelector.ruleSelectorChanged): Fix a typo.
+        (WebInspector.DOMNodeStyles.prototype._parseStylePropertyPayload): Ditto.
+        (WebInspector.DOMNodeStyles.prototype._collectStylesInCascadeOrder):
+        Iterate in normal order now that they stored in reverse order.
+
+2013-02-19  Timothy Hatcher  <timothy@apple.com>
+
+        Fix parsing of pseudo styles and inherited inline styles.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedMatchedStyles): Properly
+        iterate of the pseudoElementRulesPayload array. Also fix the arguments passed
+        to _parseStyleDeclarationPayload. The first argument was 'this', back when
+        it was using call().
+
+2013-02-19  Timothy Hatcher  <timothy@apple.com>
+
+        Store the relevant node on CSSStyleDeclaration.
+
+        The node is useful for inherited styles so we can jump to the
+        element the styles are inherited from.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDeclaration.js:
+        (WebInspector.CSSStyleDeclaration):
+        (WebInspector.CSSStyleDeclaration.prototype.get node): Added.
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.refresh.parseRuleMatchArrayPayload):
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedMatchedStyles):
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedInlineStyles):
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedComputedStyle):
+        (WebInspector.DOMNodeStyles.prototype.refresh):
+        (WebInspector.DOMNodeStyles.prototype._handlePropertyChange):
+        (WebInspector.DOMNodeStyles.prototype._parseStyleDeclarationPayload):
+        (WebInspector.DOMNodeStyles.prototype._parseRulePayload):
+
+2013-02-25  Timothy Hatcher  <timothy@apple.com>
+
+        Make copy work if there is a CodeMirror editor focused in the sidebar.
+
+        The content view was stealing the copy event and preventing the editor from putting
+        anything on the pasteboard. We were also having a focus issue where the console or
+        other editor was staying focused after clicking the DOM tree.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/EditingSupport.js:
+        (WebInspector.isEventTargetAnEditableField): Correct the check to include CodeMirror
+        and also only count text input types.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Added focus event listener.
+        (WebInspector._focusChanged): Added. Make a caret selection inside the focused element.
+        This is needed (at least) to remove caret from console when focus is moved.
+        (WebInspector._copy): Only pass along the copy event if the target isn't an editable field.
+
+2013-02-19  Timothy Hatcher  <timothy@apple.com>
+
+        Don't allow text selection in data grid rows.
+
+        The row selection conflicts with the text range selection.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DataGrid.css:
+        (.data-grid td): Removed -webkit-user-select: text.
+
+2013-02-26  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13265166> Remote inspecting an iOS 6.1 device never has the dashboard timer stop
+
+        Previous to iOS7, we don't get a frameId reported for timeline events. We fallback to using the
+        page's loadEventFired event and message the timelineManager to use the reported timestamp
+        as the _loadEventTime in case it hadn't already been set. 
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/PageObserver.js:
+        (WebInspector.PageObserver.prototype.loadEventFired):
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype.pageDidLoad):
+
+2013-02-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11978845> Pressing delete on a file should delete all breakpoints
+
+        Allow TreeOutlines to handle keyboard events on TreeElements if the
+        TreeElement hasn't already handled the event. This will allow the
+        breakpoint outline to handle delete keys pressed on resources.
+
+        Likewise, allow TreeOutlines to handle context menus on TreeElements
+        that don't specifically have a context menu handler. This will allow
+        the breakpoint outline to show a context menu for resources.
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/DebuggerSidebarPanel.js:
+        (WebInspector.DebuggerSidebarPanel):
+        (WebInspector.DebuggerSidebarPanel.prototype._breakpointsBeneathTreeElement):
+        (WebInspector.DebuggerSidebarPanel.prototype._removeAllBreakpoints):
+        (WebInspector.DebuggerSidebarPanel.prototype._toggleAllBreakpoints):
+        (WebInspector.DebuggerSidebarPanel.prototype._breakpointTreeOutlineDeleteTreeElement):
+        (WebInspector.DebuggerSidebarPanel.prototype.removeAllResourceBreakpoints):
+        (WebInspector.DebuggerSidebarPanel.prototype.toggleAllResourceBreakpoints):
+        (WebInspector.DebuggerSidebarPanel.prototype._breakpointTreeOutlineContextMenuTreeElement):
+        Setup ondelete and oncontextmenu handlers on the breakpoint tree outline.
+        The delete action deletes all breakpoints in that resource. The content
+        menu action provides a choice to delete or toggle all breakpoints.
+
+        * UserInterface/Breakpoint.js:
+        (WebInspector.Breakpoint.prototype.appendContextMenuItems):
+        Reorder and rename the context menus to more closely match Xcode.
+
+        * UserInterface/TreeOutline.js:
+        (TreeOutline.prototype._treeKeyDown):
+        Send common key events up to the tree outline if it implements them.
+
+        * UserInterface/GeneralTreeElement.js:
+        (WebInspector.GeneralTreeElement.prototype.onattach.this._boundContextMenuEventHandler):
+        (WebInspector.GeneralTreeElement.prototype.onattach):
+        Bind a TreeOutline context menu to the individual GeneralTreeElements if the
+        specific GeneralTreeElement does not have a context menu handler.
+
+2013-02-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13299163> Give Breakpoint Tree Elements Context Menus to Delete and Toggle
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Breakpoint.js:
+        (WebInspector.Breakpoint.prototype.appendContextMenuItems):
+        (WebInspector.Breakpoint.prototype.appendContextMenuItems.removeBreakpoint):
+        (WebInspector.Breakpoint.prototype.appendContextMenuItems.toggleBreakpoint):
+        Offer context menu items to remove and toggle the breakpoint, if possible.
+
+2013-02-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Update remaining SourceCodeLocation constructors.
+
+        <rdar://problem/11735116> PARITY (WebKit Web Inspector): Missing Source Map support
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype._createSourceCodeLocation):
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype._callFramesFromPayload.createCallFrame):
+        (WebInspector.TimelineManager.prototype._callFramesFromPayload):
+
+2013-02-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Update CallFrame displays for SourceMap display locations.
+
+        <rdar://problem/11735116> PARITY (WebKit Web Inspector): Missing Source Map support
+
+        Use the display (mapped) location when available. Multiple editors
+        may show the execution line, the original and mapped editors.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CallFrameTreeElement.js:
+        (WebInspector.CallFrameTreeElement):
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager.prototype._sourceCodeLocationFromPayload):
+        * UserInterface/DebuggerSidebarPanel.js:
+        (WebInspector.DebuggerSidebarPanel.prototype._treeElementSelected):
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype):
+
+2013-02-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Add isEmptyObject instead of doing Object.keys(foo).length
+
+        In benchmarks of empty, small, and large objects isEmptyObject
+        performed better then checking the length of Object.keys. Especially
+        for large objects.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype._associateRelatedProperties):
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel.prototype._updateDataGrid):
+        * UserInterface/RemoteObject.js:
+        (WebInspector.LocalJSONObject.prototype.get hasChildren):
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._removeBreakpointWithEditorLineInfo):
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype._removeBreakpointFromLineAndColumn):
+        (WebInspector.TextEditor.prototype):
+        * UserInterface/Utilities.js:
+        (isEmptyObject):
+
+2013-02-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Get Breakpoints Working with SourceMaps - Line + Column Breakpoint Support.
+
+        <rdar://problem/11735116> PARITY (WebKit Web Inspector): Missing Source Map support
+
+        Previously breakpoints could only appear in a single SourceCodeTextEditor, and
+        only one could be placed on a line. After this patch:
+
+          - Breakpoints may show up in multiple editors at the original and mapped locations.
+          - Breakpoints effective locations may be on columns. If you set a breakpoint on
+            a line in a mapped resource, it may map back to a non-0 column in the original.
+          - Multiple breakpoints may be set on a line. If you set a breakpoint on a few
+            lines in a mapped resource, they may all map back to the same line in the original
+            but just have different column offsets.
+
+        Breakpoints are still set and saved with their original SourceMapLocation locations.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager.prototype.breakpointsForSourceCode):
+        (WebInspector.DebuggerManager.prototype._associateBreakpointsWithSourceCode):
+        When looking up breakpoints for a source code, associate them with the source code
+        at the same time by setting the Breakpoint's SourceCodeLocation's sourceCode. The
+        breakpoints for a SourceMapResource are only those in the originator that have
+        a display location inside the mapped resource.
+
+        (WebInspector.DebuggerManager.prototype.reset):
+        Disassociate breakpoints on reset, by clearing the SourceCodeLocation's sourceCode.
+
+        (WebInspector.DebuggerManager.prototype._breakpointSourceCodeLocationDidChange):
+        Dispatch a new BreakpointMoved event. There were already existing events for
+        BreakpointAdded and Removed but not Moved. We add this for convenience, there
+        are currently no users though, they all watch the breakpoints source code location.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.setBreakpointInfoForLineAndColumn):
+        (WebInspector.TextEditor.prototype._addBreakpointToLineAndColumnWithInfo):
+        (WebInspector.TextEditor.prototype._removeBreakpointFromLineAndColumn):
+        Update setBreakpointInfo to include line + column numbers.
+
+        (WebInspector.TextEditor.prototype._setBreakpointStylesOnLine.updateStyles):
+        (WebInspector.TextEditor.prototype._setBreakpointStylesOnLine):
+        Updating breakpoint style now handles multi-breakpoints. For multi-breakpoints
+        we only style it as disabled if all breakpoints on that line are disabled.
+        Likewise for resolved.
+
+        (WebInspector.TextEditor.prototype._allColumnBreakpointInfoForLine):
+        (WebInspector.TextEditor.prototype._setColumnBreakpointInfoForLine):
+        Now that a line may have multiple column breakpoints, this is a bulk
+        getter and setter used during breakpoint dragging to set the breakpoint
+        infos on a line.
+
+        (WebInspector.TextEditor.prototype._gutterMouseDown):
+        (WebInspector.TextEditor.prototype._documentMouseMoved):
+        (WebInspector.TextEditor.prototype._documentMouseUp):
+        Do nothing if clicking on a multi-breakpoint. Otherwise, when dragging
+        remember the original breakpoints line and column information. While the
+        drag is happening, we are already updating our internal line + column
+        information, so in mouse up when notifying delegates we can ignore their
+        setBreakpointInfo calls.
+
+        * UserInterface/TextEditor.css:
+        (.text-editor > .CodeMirror .has-breakpoint.multiple-breakpoints .CodeMirror-linenumber):
+        (.text-editor > .CodeMirror .has-breakpoint.multiple-breakpoints .CodeMirror-linenumber::before):
+        Styles for a line with multiple breakpoints. We show a centered white
+        ellipsis and hide the line number.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor):
+        (WebInspector.SourceCodeTextEditor.prototype.close):
+        Now that breakpoints can be added in one editor and affect a different editor
+        we must listen for breakpoint added and move (via it's source code location).
+        Register for the events in the constructor and clear in close.
+
+        (WebInspector.SourceCodeTextEditor.prototype._editorLineInfoForSourceCodeLocation):
+        SourceCodeTextEditors for original resources show their content with original line
+        numbers. For mapped resources show their content with display line numbers. So
+        whenever we have a sourceCodeLocation, we use this to convert it to the "editor"
+        line info, which is just the line + column number for this editor + TextEditor.
+        
+        (WebInspector.SourceCodeTextEditor.prototype._breakpointForEditorLineInfo):
+        (WebInspector.SourceCodeTextEditor.prototype._addBreakpointWithEditorLineInfo):
+        (WebInspector.SourceCodeTextEditor.prototype._removeBreakpointWithEditorLineInfo):
+        Update addBreakpoint and removeBreakpoint for line + column, instead of just line.
+
+        (WebInspector.SourceCodeTextEditor.prototype._contentWillPopulate):
+        (WebInspector.SourceCodeTextEditor.prototype._updateBreakpointStatus):
+        (WebInspector.SourceCodeTextEditor.prototype._breakpointAdded):
+        (WebInspector.SourceCodeTextEditor.prototype._breakpointRemoved):
+        When breakpoints are added, removed update our map, and pass that information
+        on to the underlying TextEditor.
+
+        (WebInspector.SourceCodeTextEditor.prototype._updateBreakpointLocation):
+        When a breakpoint moves, we need to lookup the breakpoint from its old location.
+        The old location is different depending on if we are the editor for the original
+        or mapped resource. So work out the correct old location, and pass that
+        information and the underlying TextEditor.
+
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointAdded):
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointRemoved):
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointMoved):
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointToggled):
+        When the TextEditor modifies a breakpoint, we must update our maps for that
+        breakpoint. When we tell the DebuggerManager about the updates, we will
+        expect some events to fire to update other editors that might be interested
+        in that breakpoint. We can ignore those events ourselves, because we
+        just made the change.
+
+2013-02-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Sort Breakpoints in the Debugger Sidebar
+
+        <rdar://problem/11735116> PARITY (WebKit Web Inspector): Missing Source Map support
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DebuggerSidebarPanel.js:
+        (WebInspector.DebuggerSidebarPanel.prototype._addBreakpoint):
+        (WebInspector.DebuggerSidebarPanel.prototype._compareTopLevelTreeElements):
+        (WebInspector.DebuggerSidebarPanel.prototype._compareBreakpointTreeElements):
+        Sort BreakpointsTreeElements (children of Resources) by Line #.
+        Sort top level tree elements by title, always placing the special breakpoints at the top.
+
+2013-02-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Give BreakpointTreeElements a ContextMenu to Reveal Original Resource.
+
+        <rdar://problem/11735116> PARITY (WebKit Web Inspector): Missing Source Map support
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Breakpoint.js:
+        (WebInspector.Breakpoint.prototype.appendContextMenuItems):
+        Given a context menu, add a show original resource menu item.
+
+        * UserInterface/TreeOutline.js:
+        (TreeElement.prototype._detach):
+        Add an ondetach event to balance onattach.
+
+        * UserInterface/GeneralTreeElement.js:
+        (WebInspector.GeneralTreeElement.prototype.onattach):
+        (WebInspector.GeneralTreeElement.prototype.ondetach):
+        Manage adding and removing a contextmenu event listener for oncontextmenu.
+
+        * UserInterface/BreakpointTreeElement.js:
+        (WebInspector.BreakpointTreeElement.prototype.oncontextmenu):
+        Show a ContextMenu with the Breakpoint's menu items.
+
+2013-02-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Make Breakpoint to use a SourceCodeLocation. Update its BreakpointTreeElement display.
+
+        <rdar://problem/11735116> PARITY (WebKit Web Inspector): Missing Source Map support
+
+        This is the start of modifying Breakpoints to use SourceCodeLocation.
+        There are remaining users (SourceCodeTextEditor) which will be addressed
+        in a following patch. This updates Breakpoint and its display in the sidebar.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Breakpoint.js:
+        (WebInspector.Breakpoint):
+        (WebInspector.Breakpoint.prototype.get sourceCodeLocation):
+        (WebInspector.Breakpoint.prototype.get info):
+        Update the constructor and serialization to use SourceCodeLocations,
+        which includes a line number and column number.
+
+        * UserInterface/BreakpointTreeElement.js:
+        (WebInspector.BreakpointTreeElement):
+        (WebInspector.BreakpointTreeElement.prototype._updateTitles):
+        (WebInspector.BreakpointTreeElement.prototype._updateStatus):
+        BreakpointTreeElements always display the display line + column. They
+        show the original location as a subtitle.
+
+        (WebInspector.BreakpointTreeElement.prototype._breakpointDisplayLocationDidChange):
+        When the breakpoint's display location changes update our titles.
+        However, if the breakpoint actually changed resources, then prepare
+        for removal. The sidebar will detect this and create a new tree element.
+
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager):
+        (WebInspector.DebuggerManager.prototype.didSetBreakpoint):
+        (WebInspector.DebuggerManager.prototype._setBreakpoint):
+        Set breakpoints with the breakpoints line + column information.
+
+        * UserInterface/DebuggerSidebarPanel.js:
+        (WebInspector.DebuggerSidebarPanel):
+        (WebInspector.DebuggerSidebarPanel.prototype._addBreakpoint):
+        Simplify now that the breakpoint's SourceCodeLocation already has the
+        original SourceCode. Also, create SourceMapResourceTreeElements as needed.
+
+        (WebInspector.DebuggerSidebarPanel.prototype._breakpointRemoved):
+        (WebInspector.DebuggerSidebarPanel.prototype._removeBreakpointTreeElement):
+        Refactor breakpoint removal code so it can be shared.
+
+        (WebInspector.DebuggerSidebarPanel.prototype._breakpointDisplayLocationDidChange):
+        If a breakpoint changes resources remove the old breakpoint tree element
+        and add a new one with the new location.
+
+        (WebInspector.DebuggerSidebarPanel.prototype._treeElementSelected):
+        Show the display location.
+
+2013-02-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Make Find banner when viewing a SourceMapResource work.
+
+        <rdar://problem/11735116> PARITY (WebKit Web Inspector): Missing Source Map support
+
+        A SourceMapResource can display its content in a SourceCodeTextEditor just
+        like regular resources. However, it does not use the backend to search
+        it's contents, because its contents are all loaded by the frontend. Give
+        customPerformSearch a return value saying whether or not it was handled.
+        If not handled, we fall back to CodeMirror's text search, which works fine.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.customPerformSearch):
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.performSearch):
+        If the customPerformSearch returns false, then the custom search did
+        not handle the search, and we fallback to the default CodeMirror search.
+
+2013-02-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Make SourceCodeLocation provide raw and mapped locations.
+
+        <rdar://problem/11735116> PARITY (WebKit Web Inspector): Missing Source Map support
+
+        SourceCodeLocation automatically provide original (raw) and mapped (display)
+        source code locations. It's API requires that it be constructed with the raw
+        source code and location information, which is automated by using
+        SourceCode.prototype.createSourceCodeLocation, passing a lineNumber and
+        columnNumber for the source code that you're invoking the method on.
+
+        All uses of SourceCodeLocation will be audited and updated in later patches,
+        this patch includes just the core SourceCodeLocation uses.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.showSourceCode):
+        (WebInspector.ResourceSidebarPanel.prototype.showSourceCodeLocation):
+        (WebInspector.ResourceSidebarPanel.prototype.showOriginalSourceCodeLocation):
+        By default, when showing any location we want to show it's display location,
+        which will be the source map resource if there is one, otherwise the raw resource.
+        If needed, there is a way to explicitly show the original source code location.
+
+        * UserInterface/SourceCode.js:
+        (WebInspector.SourceCode.prototype.createSourceCodeLocation):
+        Default implementation, just use the given line and column number.
+
+        * UserInterface/SourceMapResource.js:
+        (WebInspector.SourceMapResource.prototype.createSourceCodeLocation):
+        Mapped resource. Reverse lookup the raw line and column. Adjust if
+        needed for inline <script> offsets. And construct the SourceCodeLocation
+        with the raw values.
+
+        * UserInterface/SourceCodeLocation.js:
+        (WebInspector.SourceCodeLocation):
+
+        (WebInspector.SourceCodeLocation.prototype.get sourceCode):
+        (WebInspector.SourceCodeLocation.prototype.get lineNumber):
+        (WebInspector.SourceCodeLocation.prototype.get columnNumber):
+        This is the raw location data.
+
+        (WebInspector.SourceCodeLocation.prototype.hasMappedLocation):
+        (WebInspector.SourceCodeLocation.prototype.get displaySourceCode):
+        (WebInspector.SourceCodeLocation.prototype.get displayLineNumber):
+        (WebInspector.SourceCodeLocation.prototype.get displayColumnNumber):
+        If we have a mapped location, use that. Otherwise use the raw location.
+
+        (WebInspector.SourceCodeLocation.prototype.update):
+        If a user of a SourceCodeLocation wants to update the location there
+        are restrictions. The updated location must be either the raw resource
+        or the mapped resource. SourceCodeLocation then does the rest, and
+        updates its internal values and dispatches events appropriately.
+
+        (WebInspector.SourceCodeLocation.prototype.set sourceCode):
+        There are cases where the inspector (Breakpoints) which may want to keep
+        around a line/column SourceCodeLocation but without an associated
+        SourceCode. Setting the source code to null will make this a dumb
+        location, and setting it to a source code will update appropriately.
+
+        (WebInspector.SourceCodeLocation.prototype._resetMappedLocation):
+        (WebInspector.SourceCodeLocation.prototype._setMappedLocation):
+        (WebInspector.SourceCodeLocation.prototype._resolveMappedLocation):
+        We lazily resolve the mapped location when needed. In cases where
+        a SourceCodeLocation is created from a SourceMapResource the mapped
+        location is already known and can be set directly.
+
+        (WebInspector.SourceCodeLocation.prototype._makeChangeAndDispatchChangeEventIfNeeded):
+        Clients of SourceCodeLocation may want to update their display if
+        a source map was added and a new better location is available. We
+        provide events for any change, or just display location changes.
+
+        (WebInspector.SourceCodeLocation.prototype._sourceCodeSourceMapAdded):
+        Whenever the raw resource adds a source map check if there was a
+        display location change.
+
+2013-02-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Show SourceMapResources in the Resources Sidebar
+
+        <rdar://problem/11735116> PARITY (WebKit Web Inspector): Missing Source Map support
+
+        SourceMapResources are added to the Resources Sidebar as children
+        of the originator Resource. So if a Script has a SourceMap with
+        multiple inputs, there will be a disclosure triangle by the Script
+        and you can see the original resources for that Script.
+
+        Since both Resources and Scripts can have SourceMapChildren this
+        patch refactors both of those TreeElement classes to extend from a
+        common SourceCodeTreeElement class that manages the new
+        SourceMapResourceTreeElement children.
+
+        FrameTreeElements, special subclasses of ResourceTreeElements and
+        thus SourceCodeTreeElements handle their own source map resource
+        children. This is so that SourceMapResources for <script>s in the
+        frame are placed along with that frame's same typed resources.
+        SourceMapResources that are scripts will be in the Scripts folder,
+        or no folder if the frame has only a few resources.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel):
+        A TreeOutline must opt-in to displaying source map tree elements
+        for resources. We only show source map children of resources in the
+        main resource tree outline. We will not show them in the search
+        results tree outline or breakpoints tree outline.
+
+        * UserInterface/GeneralTreeElement.js:
+        (WebInspector.GeneralTreeElement.prototype.callFirstAncestorFunction):
+        Move this code from ResourceTreeElement to General. It is useful.
+
+        * UserInterface/SourceCodeTreeElement.js: Added.
+        (WebInspector.SourceCodeTreeElement):
+        (WebInspector.SourceCodeTreeElement.prototype.updateSourceMapResources):
+        (WebInspector.SourceCodeTreeElement.prototype.onattach):
+        (WebInspector.SourceCodeTreeElement.prototype.onpopulate):
+        (WebInspector.SourceCodeTreeElement.prototype.descendantResourceTreeElementTypeDidChange):
+        (WebInspector.SourceCodeTreeElement.prototype._updateSourceCode):
+        Common superclass for Script and Resource TreeElements. This manages the
+        child source map resources. Sorts them, and replaces them when they change.
+
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement):
+        (WebInspector.ResourceTreeElement.compareResourceTreeElements): Common comparison.
+        (WebInspector.ResourceTreeElement.prototype._updateResource):
+        (WebInspector.ResourceTreeElement.prototype._updateTitles):
+        (WebInspector.ResourceTreeElement.prototype._typeDidChange):
+        * UserInterface/ScriptTreeElement.js:
+        (WebInspector.ScriptTreeElement):
+        Refactor as subclasses of SourceCodeTreeElement.
+
+        * UserInterface/SourceMapResourceTreeElement.js: Added.
+        (WebInspector.SourceMapResourceTreeElement):
+        (WebInspector.SourceMapResourceTreeElement.prototype.onattach):
+        (WebInspector.SourceMapResourceTreeElement.prototype._updateTitles):
+        A SourceMapResourceTreeElement is very simple. It adds a style class to
+        get unique icons, lazy loads on attach, and since it doesn't have a
+        parent frame it uses it's originator's host to display a subtitle if
+        it is loaded from a different origin.
+
+        * UserInterface/FrameTreeElement.js:
+        (WebInspector.FrameTreeElement.prototype.updateSourceMapResources):
+        (WebInspector.FrameTreeElement.prototype.onattach):
+        (WebInspector.FrameTreeElement.prototype.onpopulate):
+        (WebInspector.FrameTreeElement.prototype._updateParentStatus):
+        (WebInspector.FrameTreeElement.prototype._addTreeElementForRepresentedObject):
+        (WebInspector.FrameTreeElement.prototype._insertResourceTreeElement):
+        Handle our own SourceMapResource children in onpopulate and addTreeElement paths.
+
+        * UserInterface/Main.html:
+        * UserInterface/ResourceIcons.css:
+        (.source-map-resource.resource-icon .icon):
+        (.source-map-resource.resource-icon.resource-type-script .icon):
+        * UserInterface/Images/ClippingGeneric.png: Added.
+        * UserInterface/Images/ClippingGeneric@2x.png: Added.
+        Add new files, images, and styles to trigger the images.
+
+2013-02-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Download SourceMaps and create SourceMapResources.
+
+        <rdar://problem/11735116> PARITY (WebKit Web Inspector): Missing Source Map support
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceMap.js:
+        (WebInspector.SourceMap):
+        (WebInspector.SourceMap.prototype.get originalSourceCode):
+        (WebInspector.SourceMap.prototype.get resources):
+        (WebInspector.SourceMap.prototype.addResource):
+        (WebInspector.SourceMap.prototype.resourceForURL):
+        Give a SourceMap references to the SourceCode that originally requested
+        it, and the SourceMapResources created for the input sources.
+
+        * UserInterface/SourceMapResource.js: Added.
+        (WebInspector.SourceMapResource):
+        (WebInspector.SourceMapResource.prototype.get sourceMap):
+        A SourceMapResource is a Resource subclass with no loading information.
+        It has a reference to the SourceMap that it belongs to.
+
+        (WebInspector.SourceMapResource.prototype.canRequestContentFromBackend):
+        (WebInspector.SourceMapResource.prototype.requestContentFromBackend):
+        The content is loaded on demand. Normal requests for SourceCode content
+        goes through SourceCode.prototype.requestContent. Since the content is
+        loaded on demand, the type and data are filled in after content is
+        requested, and we fire normal Resource events, like Type changed.
+
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.markAsFinished):
+        Don't request content if we can't / shouldn't request content from the
+        backend. Normally resources load their content as soon as they finish
+        loading. However SourceMapResources load their content and then mark
+        as finished. Without this we would get a harmless assert.
+
+        * UserInterface/SourceCode.js:
+        (WebInspector.SourceCode):
+        (WebInspector.SourceCode.prototype.get sourceMaps):
+        (WebInspector.SourceCode.prototype.addSourceMap):
+        Any SourceCode resource can have a set of source maps. In the common case,
+        a Script will have a single source map. However a Document resource map
+        have multiple sourceMaps for different inline <script> sections.
+
+        * UserInterface/DebuggerObserver.js:
+        (WebInspector.DebuggerObserver.prototype.scriptParsed):
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager.prototype.scriptDidParse):
+        The SourceMap resource's url comes in from scriptDidParse. Pass it on
+        eventually to the Script constructor.
+
+        * UserInterface/Script.js:
+        (WebInspector.Script):
+        If we have a source map URL, load and parse the source map.
+
+        * UserInterface/SourceMapManager.js: Added.
+        (WebInspector.SourceMapManager):
+        (WebInspector.SourceMapManager.prototype.sourceMapForURL):
+        (WebInspector.SourceMapManager.prototype.downloadSourceMap):
+        (WebInspector.SourceMapManager.prototype._loadAndParseSourceMap):
+        (WebInspector.SourceMapManager.prototype._loadAndParseFailed):
+        (WebInspector.SourceMapManager.prototype._loadAndParseSucceeded):
+        (WebInspector.SourceMapManager.prototype._mainResourceDidChange):
+        A global set of SourceMaps by url. This prevents multiple downloads of
+        the same source map. The map is cleared on main resource changes.
+
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        Add new files and instantiate the new manager singleton.
+
+2013-02-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Add parts of SourceMap.js from OpenSource.
+
+        <rdar://problem/11735116> PARITY (WebKit Web Inspector): Missing Source Map support
+
+        This parses a v3 SourceMap file. The spec is linked at the top.
+        SourceMap.js comes from OpenSource's frontend/SourceMap.js.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.html:
+        * UserInterface/SourceMap.js: Added.
+        (WebInspector.SourceMap):
+        (WebInspector.SourceMap.prototype.sources):
+        (WebInspector.SourceMap.prototype.sourceContent):
+        (WebInspector.SourceMap.prototype._parseMappingPayload):
+        (WebInspector.SourceMap.prototype._parseSections):
+        (WebInspector.SourceMap.prototype._parseMap):
+        (WebInspector.SourceMap.prototype._isSeparator):
+        (WebInspector.SourceMap.prototype._decodeVLQ):
+        (WebInspector.SourceMap.StringCharIterator):
+        (WebInspector.SourceMap.StringCharIterator.prototype.next):
+        (WebInspector.SourceMap.StringCharIterator.prototype.peek):
+        (WebInspector.SourceMap.StringCharIterator.prototype.hasNext):
+        (WebInspector.PositionBasedSourceMap):
+        (WebInspector.PositionBasedSourceMap.prototype.findEntry):
+        (WebInspector.PositionBasedSourceMap.prototype.findEntryReversed):
+        (WebInspector.PositionBasedSourceMap.prototype._parseMap):
+
+2013-02-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Only allow left clicks on the gutter / dragging breakpoints.
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype):
+        Bail if the mouse down button is not the left button.
+
+2013-02-26  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Remove unused ContextMenu soft menu code.
+
+        Rubber-stamped by Ricky Mondello.
+
+        * UserInterface/ContextMenu.js:
+
+2013-02-21  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Standardize on "Event" not "Events". There were a few outliers.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DatabaseContentView.js:
+        (WebInspector.DatabaseContentView.prototype._queryFinished):
+        * UserInterface/StylePropertyTreeElement.js:
+        (WebInspector.StylePropertyTreeElement.prototype):
+        * UserInterface/TextPrompt.js:
+        (WebInspector.TextPrompt.prototype.applySuggestion):
+        (WebInspector.TextPrompt.prototype.acceptSuggestion):
+
+2013-02-19  Jeff Miller  <jeffm@apple.com>
+
+        Regenerate localizedStrings.js after recent changes.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        Regenerated.
+
+2013-02-18  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13232839> Show Error Console (Option+Cmd+C) should always put keyboard focus in the console
+
+        The keyboard shortcut already existed, but if used to open the inspector
+        the focus was getting stolen away by other elements with tabindex and
+        the DOM Tree. Fix this so focus is not stolen away. As an added bonus
+        the console now keeps its focus across page reloads and navigations.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.showConsole):
+        When the keyboard shortcut is triggered, focus the quick console. If
+        the page is still loading, we will need to focus again because other
+        elements with tabindex may steal focus away from the console prompt.
+
+        * UserInterface/Main.js:
+        (WebInspector.isConsoleFocused):
+        Global accessor for whether or not the console is focused.
+
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView.prototype.shown):
+        When showing a the DOMTreeOutline, never steal focus from the console.
+
+        (WebInspector.DOMTreeContentView.prototype._rootDOMNodeAvailable.selectNode):
+        When the root dom node changes and we reveal and select an element,
+        never steal focus from the console.
+
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline.prototype.setVisible):
+        Provide an optional omitFocus parameter to pass on. It already exists below.
+
+2013-02-18  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Move .indeterminate-progress-spinner from resources only to all content views.
+
+        ScriptContentViews also use spinners, and they were not getting the
+        proper styling if you were fast enough to see it!
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ContentView.css: Renamed from WebInspector/UserInterface/ResourceContentView.css.
+        (.content-view > .indeterminate-progress-spinner):
+        * UserInterface/Main.html:
+
+2013-02-18  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Hide the Image Size section for Image resources if the load failed.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshImageSizeSection):
+        Don't show an empty image size section if the image failed to load.
+
+2013-02-16  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Accidentally added some code referencing SourceMapResource before it was added.
+
+        Unreviewed cleanup.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.cookieForContentView):
+
+2013-02-18  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13180267> REGRESSION: Reload button is no longer visible in the Web Inspector
+
+        Make the ResourceTreeElement's "status" property a reload button in case we're
+        dealing with the main resource of the main frame.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Images/Reload.pdf: Removed.
+        * UserInterface/Images/Reload.svg: Added.
+        * UserInterface/Images/ReloadSelected.svg: Added.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        * UserInterface/ResourceTreeElement.css:
+        (.item.resource-type-document > .status > .reload-button):
+        (.item.resource-type-document.selected > .status > .reload-button):
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement.prototype.get reloadButton):
+        (WebInspector.ResourceTreeElement.prototype._updateResource):
+        (WebInspector.ResourceTreeElement.prototype._updateStatus):
+        (WebInspector.ResourceTreeElement.prototype._reloadPageClicked):
+
+2013-02-15  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Double clicking the disclosure triangle for a TreeElement should not
+        trigger the ondblclick for the element.
+
+        This will be more possible once we add SourceMaps, but it is currently
+        possible right now with the Main Resource's disclosure triangle.
+
+        Reviewed by Dean Jackson.
+
+        * UserInterface/TreeOutline.js:
+        (TreeElement.treeElementDoubleClicked):
+
+2013-02-15  Joseph Pecoraro  <pecoraro@apple.com>
+
+        We don't need to check the entire string when we mean to check just the
+        first character. Convert an indexOf to charAt(0).
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/FrameTreeElement.js:
+        (WebInspector.FrameTreeElement.prototype._shouldGroupIntoFolders):
+
+2013-02-15  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13226395> Multiline console.asserts in ResourceSidebarPanel.js not getting stripped
+
+        Reviewed by Timothy Hatcher.
+
+        * Scripts/remove-console-asserts.pl:
+        For safety, keep the script reading line by line and warn if there is
+        a console.assert that was not stripped. This almost always means the
+        assert spanned multiple lines.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        Converted multi-line asserts to a single line.
+
+2013-02-15  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Manually running remove-console-asserts.pl was failing on rename.
+        Change instead to File::move from the File::copy module and
+        report errors if they happen.
+
+        Reviewed by Timothy Hatcher.
+
+        * Scripts/remove-console-asserts.pl:
+
+2013-02-15  Timothy Hatcher  <timothy@apple.com>
+
+        Fix exceptions caused by my earlier InspectorBackendCommands change.
+
+        Unreviewed.
+
+        * UserInterface/DOMStorageObserver.js:
+        (WebInspector.DOMStorageObserver.prototype.domStorageItemsCleared): Call
+        updateDOMStorage instead of domStorageUpdated.
+        (WebInspector.DOMStorageObserver.prototype.domStorageItemRemoved): Ditto.
+        (WebInspector.DOMStorageObserver.prototype.domStorageItemAdded): Ditto.
+        (WebInspector.DOMStorageObserver.prototype.domStorageItemUpdated): Ditto.
+
+2013-02-15  Jessie Berlin  <jberlin@apple.com>
+
+        Ran update-safari-localizable-strings.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+2013-02-15  Timothy Hatcher  <timothy@apple.com>
+
+        Update InspectorBackendCommands.js for the latest protocol changes.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/CSSObserver.js:
+        (WebInspector.CSSObserver.prototype.styleSheetAdded): Added.
+        (WebInspector.CSSObserver.prototype.styleSheetRemoved): Added.
+        * UserInterface/CookieStorageContentView.js:
+        (WebInspector.CookieStorageContentView.prototype._deleteCallback): Pass both domain and url.
+        * UserInterface/DOMStorageObserver.js:
+        (WebInspector.DOMStorageObserver.prototype.updateDOMStorage): Renamed from domStorageUpdated.
+        (WebInspector.DOMStorageObserver.prototype.domStorageItemsCleared): Added.
+        (WebInspector.DOMStorageObserver.prototype.domStorageItemRemoved): Added.
+        (WebInspector.DOMStorageObserver.prototype.domStorageItemAdded): Added.
+        (WebInspector.DOMStorageObserver.prototype.domStorageItemUpdated): Added.
+        * UserInterface/DOMTreeManager.js:
+        (WebInspector.DOMTreeManager.prototype.highlightDOMNode): Use invoke since the argument
+        order changed and objectId is an optional argument we don't use.
+        * UserInterface/InspectorBackend.js:
+        (InspectorBackendClass.prototype.reportProtocolError): Log the whole error, not just the message.
+        * UserInterface/InspectorBackendCommands.js: Updated from OpenSource r142992.
+        * UserInterface/InspectorObserver.js:
+        (WebInspector.InspectorObserver.prototype.detached): Added.
+        * UserInterface/PageObserver.js:
+        (WebInspector.PageObserver.prototype.javascriptDialogOpening): Added.
+        (WebInspector.PageObserver.prototype.javascriptDialogClosed): Added.
+        (WebInspector.PageObserver.prototype.scriptsEnabled): Added.
+
+2013-02-15  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13207008> Allow toggling showing shadow trees with a button in the DOM Tree navigation bar
+
+        We do a few things in this patch:
+
+        1. We move the existing compositing borders navigation item from
+        FrameContentView to DOMTreeContentView.
+
+        2. We add a new navigation item on DOMTreeContentView to toggle
+        shadow tree DOM nodes.
+
+        3. We make ClusterContentView return its current content view's
+        navigation items in the navigationItems accessor since otherwise
+        the DOMTreeContentView navigation items wouldn't get picked up.
+
+        4. We add a new event to notify when a ContentView's navigation
+        items have changed so that they may be picked up by the ContentBrowser.
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/ClusterContentView.js:
+        (WebInspector.ClusterContentView.prototype.get navigationItems):
+        (WebInspector.ClusterContentView.prototype._currentContentViewDidChange):
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser):
+        (WebInspector.ContentBrowser.prototype._contentViewNavigationItemsDidChange):
+        * UserInterface/ContentView.js:
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView):
+        (WebInspector.DOMTreeContentView.prototype.get navigationItems):
+        (WebInspector.DOMTreeContentView.prototype.shown):
+        (WebInspector.DOMTreeContentView.prototype._mouseWasClicked):
+        (WebInspector.DOMTreeContentView.prototype._toggleCompositingBorders):
+        (WebInspector.DOMTreeContentView.prototype._updateCompositingBordersButtonToMatchPageSettings):
+        (WebInspector.DOMTreeContentView.prototype._showShadowDOMSettingChanged):
+        (WebInspector.DOMTreeContentView.prototype._toggleShowsShadowDOMSetting):
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView.prototype.shown):
+        (WebInspector.FrameContentView.prototype._pathComponentSelected):
+        * UserInterface/Images/ShadowDOM.pdf: Added.
+
+2013-02-15  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13026376> Layers sidebar panel should show layers associated with any descendant node
+
+        Use the DOM hierarchy to compile a list of layers associated with any
+        descendant of the node passed to LayerTreeManager's layersForNode()
+        method.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/LayerTreeManager.js:
+        (WebInspector.LayerTreeManager.prototype.get flatLayerTree): New getter
+        to make it much easier to debug issues with the LayerTreeManager so we
+        get the flat list of all known layers from the console.
+        (WebInspector.LayerTreeManager.prototype.layersForNode):
+        (WebInspector.LayerTreeManager.prototype.):
+        (WebInspector.LayerTreeManager.prototype._flattenedLayerTree):
+        (WebInspector.LayerTreeManager.prototype._obtainNodeIdsForLayerIds):
+        (WebInspector.LayerTreeManager.prototype._layersForDescendantsOfNode):
+
+2013-02-15  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13223597> Dashboard resources size may be only partial
+
+        Wait until we've gotten an event indicating we're loading the main
+        resource to start tracking sizes.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DashboardManager.js:
+        (WebInspector.DashboardManager):
+        (WebInspector.DashboardManager.prototype._mainResourceDidChange):
+        (WebInspector.DashboardManager.prototype._startUpdatingTime):
+
+2013-02-15  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13217869> Dashboard: LCD timer does not update when going back/forward
+
+        Don't forget to kill any previously running timer when a new page loads
+        and reset the time reported in the dashboard to 0 before starting the
+        new timer.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DashboardManager.js:
+        (WebInspector.DashboardManager.prototype._mainResourceDidChange):
+
+2013-02-15  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13207017> Nodes hosted in shadow trees should not be disregarded when "show-shadow-dom" setting is off
+
+        We used to only deal with the "show-shadow-dom" setting as immutable and
+        would simply not create DOMNodes for payloads with shadow roots in case
+        the setting was false (the default). However, we would run in a situation
+        where the backend could push nodes that were part of a shadow tree,
+        regardless of the setting, and the parentId for the node would not be
+        referenced in the DOMTreeManager's _idToDOMNode map which would eventually
+        yield an error when handling setChildNodes payloads and break any further
+        DOM interaction in the inspector. This kind of case happened quite often
+        when the LayerTreeManager would get composted layers that were part of
+        an <input> element, <video> element, etc. 
+
+        We now switch to a system where the "show-shadow-dom" setting can be changed
+        at any time and we reflect the correct state in the DOMTreeOutline. Since
+        the DOMTreeOutline bases its representation on the data represented by
+        DOMNode instances, we make the "firstChild", "lastChild", "previousSibling",
+        "nextSibling" and "children" properties getters and dynamically check whether
+        child nodes hosted in shadow roots should be ignored.
+
+        We only build the filtered children list in the case where we shouldn't
+        show shadow roots and we've identified through a call to _renumber() that
+        the filtered list needed updating. The filtered list is then cached until
+        the next time it needs updating.
+
+        We also make the "childNodeCount" property use a getter / setter as it was
+        being accessed using the ivar from outside the DOMNode class and it would
+        not reflect whether shadow roots should be reported as children.
+
+        Then, we move the setting to be a shared setting on the global WebInspector
+        object and track changes to it, updating all nodes in the DOMTreeOutline
+        when the change happens.
+
+        Further fixes will ensure we refresh the layer tree when the setting changes,
+        and teach the LayerTreeManager to ignore layers attached to nodes in shadow
+        roots when the setting is to hide shadow nodes. Another fix will be to provide
+        a button to toggle that setting in the DOM tree's navigation bar in lieu of
+        a contextual menu item.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNode.js:
+        (WebInspector.DOMNode):
+        (WebInspector.DOMNode.prototype.get firstChild):
+        (WebInspector.DOMNode.prototype.get lastChild):
+        (WebInspector.DOMNode.prototype.get nextSibling):
+        (WebInspector.DOMNode.prototype.get previousSibling):
+        (WebInspector.DOMNode.prototype.get childNodeCount):
+        (WebInspector.DOMNode.prototype.set childNodeCount):
+        (WebInspector.DOMNode.prototype.hasChildNodes):
+        (WebInspector.DOMNode.prototype.hasShadowRoots):
+        (WebInspector.DOMNode.prototype._insertChild):
+        (WebInspector.DOMNode.prototype._removeChild):
+        (WebInspector.DOMNode.prototype._setChildrenPayload):
+        (WebInspector.DOMNode.prototype._renumber):
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype.handleLoadAllChildren):
+        * UserInterface/DOMTreeManager.js:
+        (WebInspector.DOMTreeManager.prototype._childNodeCountUpdated):
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline):
+        (WebInspector.DOMTreeOutline.prototype.populateContextMenu):
+        (WebInspector.DOMTreeOutline.prototype._toggleShowShadowDOM):
+        (WebInspector.DOMTreeOutline.prototype._showShadowDOMSettingChanged):
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+
+2013-02-14  Timothy Hatcher  <timothy@apple.com>
+
+        Switch to the new flexbox model for significantly faster layout times.
+
+        <rdar://problem/13206930> REGRESSION: Layout time in the Web Inspector
+        is 1.21x longer compared to Safari 6
+
+        Reviewed by Simon Fraser.
+
+        * UserInterface/TextPrompt.js:
+        (WebInspector.TextPrompt.SuggestBox.prototype._updateBoxPosition): Make sure to absolute position
+        the element when measuring in the body to avoid flexbox layout.
+
+        * UserInterface/HierarchicalPathNavigationItem.js:
+        (WebInspector.HierarchicalPathNavigationItem.prototype.set components): Use updateLayout instead
+        of updateLayoutSoon. Delaying the layout causes a visual flash of wrapped items.
+
+        * UserInterface/ButtonToolbarItem.css: Replaced -webkit-box with -webkit-flex.
+        Replaced -webkit-box-flex with -webkit-flex. Replaced -webkit-box-orient: vertical
+        with -webkit-flex-direction: column. Replaced -webkit-box-orient: horizontal with
+        -webkit-flex-direction: row. Replaced -webkit-box-align: center with -webkit-align-items: center.
+        Replaced -webkit-box-pack: center with -webkit-justify-content: center. Replaced
+        -webkit-box-pack: start with -webkit-justify-content: flex-start. Replaced -webkit-box-pack: end
+        with -webkit-justify-content: flex-end.
+        * UserInterface/ContentBrowser.css: Ditto.
+        * UserInterface/ControlToolbarItem.css: Ditto.
+        * UserInterface/DashboardView.css: Ditto.
+        * UserInterface/FilterBar.css: Ditto.
+        * UserInterface/FlexibleSpaceNavigationItem.css: Ditto.
+        * UserInterface/FontResourceContentView.css: Ditto.
+        * UserInterface/ImageResourceContentView.css: Ditto.
+        * UserInterface/LayerTreeSidebarPanel.css: Ditto.
+        * UserInterface/Main.css: Ditto.
+        * UserInterface/NavigationSidebarPanel.css: Ditto.
+        * UserInterface/Popover.css: Ditto.
+        * UserInterface/QuickConsole.css: Ditto.
+        * UserInterface/ResourceSidebarPanel.css: Ditto.
+        * UserInterface/Toolbar.css: Ditto.
+
+        * UserInterface/HierarchicalPathComponent.css: Ditto.
+        Plus added min-width: 0 in a couple places to get proper shrinking.
+
+        * UserInterface/NavigationBar.css: Ditto.
+        Plus added -webkit-flex-wrap: wrap in a couple places to get proper measuring in JavaScript.
+
+2013-02-14  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13200858> Popovers can draw their background twice
+
+        Since the canvas context may be the very same context across
+        presentations of the popover, ensure that we restore the default
+        state after we're done drawing so that the previous clip path
+        is removed.
+
+        We also clear the drawing region so that we don't get remnants
+        of the previously drawn frame in case the frame size is the same
+        as for the previous popover presentation.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Popover.js:
+        (WebInspector.Popover.prototype._drawBackground):
+
+2013-02-14  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13192982> Debugger popovers should line-up arrow to match hovered token
+
+        Use the token's bounds rather than the expression's bounds
+        to present the popover.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype._checkHoveredToken):
+
+2013-02-14  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13209159> Dashboard load timer starts over when recording in the Timeline manually
+
+        Instead of starting the timer upon starting recording the timeline, use the
+        WebInspector.Frame.Event.MainResourceDidChange event to track load of the
+        main frame only since it's the load of the main frame that we're showing
+        the time for in the dashboard.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DashboardManager.js:
+        (WebInspector.DashboardManager):
+        (WebInspector.DashboardManager.prototype._mainResourceDidChange):
+
+2013-02-13  Timothy Hatcher  <timothy@apple.com>
+
+        Don't fire WebInspector.QuickConsole.Event.DidResize if nothing changed.
+
+        Part of: <rdar://problem/12745890> Autocomplete slows down my typing in the Web Inspector console while debugging
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole.prototype._updateSize): Only change the style and fire the event
+        if the height of the toolbar or element changed.
+
+2013-02-12  Timothy Hatcher  <timothy@apple.com>
+
+        Speed up selection of deeply nested DOM nodes.
+
+        <rdar://problem/13201584> UI updates after selecting elements is very slow
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/HierarchicalPathNavigationItem.js:
+        (WebInspector.HierarchicalPathNavigationItem.prototype.updateLayout): Remove a offsetWidth
+        from a loop that also sets style info.
+
+2013-02-12  Timothy Hatcher  <timothy@apple.com>
+
+        Treat an empty URL for frames as "about:blank" for the special empty page.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype._createFrame):
+
+2013-02-13  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13193125> Debugger popovers don't appear for boolean values
+
+        Don't forget to handle boolean values for the debugger popover.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.tokenWasHovered.populate):
+        (WebInspector.SourceCodeTextEditor.prototype.tokenWasHovered):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForBoolean):
+
+2013-02-12  Jessie Berlin  <jberlin@apple.com>
+
+        Ran update-safari-localizable-strings.
+
+        Reviewed by Cody Krieger.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        Updated by the script.
+
+2013-02-11  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for computed style.
+
+        <rdar://problem/7206272&12526319>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSProperty.js:
+        (WebInspector.CSSProperty.prototype.set text): Return early if not editable.
+        (WebInspector.CSSProperty.prototype.set name): Ditto.
+        (WebInspector.CSSProperty.prototype.get canonicalName): Use CSSStyleManager.canonicalNameForPropertyName.
+        (WebInspector.CSSProperty.prototype.set value): Return early if not editable.
+        (WebInspector.CSSProperty.prototype.set priority): Ditto.
+        (WebInspector.CSSProperty.prototype.set enabled): Ditto.
+        (WebInspector.CSSProperty.prototype.add): Ditto.
+        (WebInspector.CSSProperty.prototype.remove): Ditto.
+        * UserInterface/CSSStyleDeclaration.js:
+        (WebInspector.CSSStyleDeclaration):
+        (WebInspector.CSSStyleDeclaration.prototype.get editable): Added.
+        (WebInspector.CSSStyleDeclaration.prototype.update): Store the property in a map if we aren't editable.
+        (WebInspector.CSSStyleDeclaration.prototype.addProperty): Return early if not editable.
+        (WebInspector.CSSStyleDeclaration.prototype.removeProperty): Ditto.
+        (WebInspector.CSSStyleDeclaration.prototype.propertyForName): Use property map if not editable.
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager.prototype.canonicalNameForPropertyName): Added. Moved from CSSProperty.
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles):
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedComputedStyle): Added. Moved the finish here.
+        (WebInspector.DOMNodeStyles.prototype.get computedStyle): Added.
+        (WebInspector.DOMNodeStyles.prototype._parseStylePropertyPayload): Handle NaN index better.
+        (WebInspector.DOMNodeStyles.prototype._updateStyleCascade): Use an external effective property map for
+        the main element styles.
+        (WebInspector.DOMNodeStyles.prototype._markOverriddenProperties): Use an external effective property map
+        if one is passed in.
+
+2013-02-11  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for editing rules, styles and properties.
+
+        <rdar://problem/7206272&12526319>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSProperty.js:
+        (WebInspector.CSSProperty.prototype.set index): Added.
+        (WebInspector.CSSProperty.prototype.update): Delete the pending properties.
+        (WebInspector.CSSProperty.prototype.get text): Use the getters to get the pending values.
+        (WebInspector.CSSProperty.prototype.set text): Added.
+        (WebInspector.CSSProperty.prototype.get name): Return _pendingName if index is NaN.
+        (WebInspector.CSSProperty.prototype.set name): Added.
+        (WebInspector.CSSProperty.prototype.get value): Return _pendingValue if index is NaN.
+        (WebInspector.CSSProperty.prototype.set value): Added.
+        (WebInspector.CSSProperty.prototype.get important): Use priority getter.
+        (WebInspector.CSSProperty.prototype.set important): Added.
+        (WebInspector.CSSProperty.prototype.get priority): Return _pendingPriority if index is NaN.
+        (WebInspector.CSSProperty.prototype.set priority): Added.
+        (WebInspector.CSSProperty.prototype.get enabled): Check ownerStyle and index too.
+        (WebInspector.CSSProperty.prototype.set enabled): Added.
+        (WebInspector.CSSProperty.prototype.add): Added.
+        (WebInspector.CSSProperty.prototype.remove): Added.
+        (WebInspector.CSSProperty.prototype._updatePropertySoon): Added.
+        (WebInspector.CSSProperty.prototype._updatePropertySoon.performUpdate): Added.
+        (WebInspector.CSSProperty.prototype._cancelPendingUpdate): Added.
+        * UserInterface/CSSRule.js:
+        (WebInspector.CSSRule.prototype.set selectorText): Added.
+        (WebInspector.CSSRule.prototype.set selectors): Added.
+        * UserInterface/CSSStyleDeclaration.js:
+        (WebInspector.CSSStyleDeclaration):
+        (WebInspector.CSSStyleDeclaration.prototype.update): Don't set ownerStyle to null anymore
+        since we reuse properties and want them associated still.
+        (WebInspector.CSSStyleDeclaration.prototype.set text): Added.
+        (WebInspector.CSSStyleDeclaration.prototype.get pendingProperties): Added.
+        (WebInspector.CSSStyleDeclaration.prototype.propertyForName): Added.
+        (WebInspector.CSSStyleDeclaration.prototype.propertyForName.findMatch): Added.
+        (WebInspector.CSSStyleDeclaration.prototype.addProperty): Added.
+        (WebInspector.CSSStyleDeclaration.prototype.removeProperty): Added.
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.ruleSelectorChanged): Added.
+        (WebInspector.DOMNodeStyles.prototype.changeRuleSelector): Added.
+        (WebInspector.DOMNodeStyles.prototype.changeStyleText): Added.
+        (WebInspector.DOMNodeStyles.prototype.changeStyleText.fetchedStyleSheetContent): Added.
+        (WebInspector.DOMNodeStyles.prototype.changeProperty): Added.
+        (WebInspector.DOMNodeStyles.prototype.changePropertyText): Added.
+        (WebInspector.DOMNodeStyles.prototype.changePropertyEnabledState): Added.
+        (WebInspector.DOMNodeStyles.prototype.addProperty): Added.
+        (WebInspector.DOMNodeStyles.prototype.removeProperty): Added.
+        (WebInspector.DOMNodeStyles.prototype._handlePropertyChange): Added.
+        (WebInspector.DOMNodeStyles.prototype._parseStylePropertyPayload): Reuse pending properties.
+        (WebInspector.DOMNodeStyles.prototype._styleSheetContentDidChange): Ignore stylesheets we know
+        we just changed.
+
+2013-02-11  Timothy Hatcher  <timothy@apple.com>
+
+        Mark overridden properties and associate shorthand to longhand properties.
+
+        <rdar://problem/7206272&12526319>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSProperty.js:
+        (WebInspector.CSSProperty.prototype.update):
+        (WebInspector.CSSProperty.prototype.get canonicalName): Added.
+        (WebInspector.CSSProperty.prototype.get canonicalName.canonicalPropertyName): Added.
+        (WebInspector.CSSProperty.prototype.set overridden): Added.
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedInlineStyles): Call _updateStyleCascade.
+        (WebInspector.DOMNodeStyles.prototype._updateStyleCascade): Added.
+        (WebInspector.DOMNodeStyles.prototype._collectStylesInCascadeOrder): Added.
+        (WebInspector.DOMNodeStyles.prototype._markOverriddenProperties): Added.
+        (WebInspector.DOMNodeStyles.prototype._associateRelatedProperties): Added.
+
+2013-02-11  Timothy Hatcher  <timothy@apple.com>
+
+        Parse inherited rules, pseudo elements, inline style and attribute styles.
+
+        <rdar://problem/7206272&12526319>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles): Added maps and properties.
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedMatchedStyles): Parse pseudoElementRulesPayload
+        and inheritedRulesPayload.
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedInlineStyles): Parse inlineStylePayload and
+        attributesStylePayload.
+        (WebInspector.DOMNodeStyles.prototype.get inheritedRules): Added.
+        (WebInspector.DOMNodeStyles.prototype.get inlineStyle): Added.
+        (WebInspector.DOMNodeStyles.prototype.get attributesStyle): Added.
+        (WebInspector.DOMNodeStyles.prototype.get pseudoElements): Added.
+        (WebInspector.DOMNodeStyles.prototype._styleSheetContentDidChange): Check inherited,
+        inline, attributes and pseudo elements.
+
+2013-02-11  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.CSSStyleDeclaration and WebInspector.CSSProperty and have DOMNodeStyles parse and create them.
+
+        <rdar://problem/7206272&12526319>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSProperty.js: Added.
+        (WebInspector.CSSProperty):
+        (WebInspector.CSSProperty.prototype.get ownerStyle):
+        (WebInspector.CSSProperty.prototype.set ownerStyle):
+        (WebInspector.CSSProperty.prototype.get index):
+        (WebInspector.CSSProperty.prototype.update):
+        (WebInspector.CSSProperty.prototype.get text):
+        (WebInspector.CSSProperty.prototype.get name):
+        (WebInspector.CSSProperty.prototype.get value):
+        (WebInspector.CSSProperty.prototype.get important):
+        (WebInspector.CSSProperty.prototype.get priority):
+        (WebInspector.CSSProperty.prototype.get enabled):
+        (WebInspector.CSSProperty.prototype.get overridden):
+        (WebInspector.CSSProperty.prototype.get implicit):
+        (WebInspector.CSSProperty.prototype.get valid):
+        (WebInspector.CSSProperty.prototype.get startStyleSheetTextPosition):
+        (WebInspector.CSSProperty.prototype.get endStyleSheetTextPosition):
+        (WebInspector.CSSProperty.prototype.get relatedShorthandProperty):
+        (WebInspector.CSSProperty.prototype.set relatedShorthandProperty):
+        (WebInspector.CSSProperty.prototype.get relatedLonghandProperties):
+        (WebInspector.CSSProperty.prototype.addRelatedLonghandProperty):
+        (WebInspector.CSSProperty.prototype.clearRelatedLonghandProperties):
+        (WebInspector.CSSProperty.prototype.isActive):
+        * UserInterface/CSSStyleDeclaration.js: Added.
+        (WebInspector.CSSStyleDeclaration):
+        (WebInspector.CSSStyleDeclaration.prototype.get id):
+        (WebInspector.CSSStyleDeclaration.prototype.get ownerStyleSheet):
+        (WebInspector.CSSStyleDeclaration.prototype.get type):
+        (WebInspector.CSSStyleDeclaration.prototype.get inherited):
+        (WebInspector.CSSStyleDeclaration.prototype.update):
+        (WebInspector.CSSStyleDeclaration.prototype.get ownerRule):
+        (WebInspector.CSSStyleDeclaration.prototype.set ownerRule):
+        (WebInspector.CSSStyleDeclaration.prototype.get text):
+        (WebInspector.CSSStyleDeclaration.prototype.get properties):
+        (WebInspector.CSSStyleDeclaration.prototype.get startStyleSheetTextPosition):
+        (WebInspector.CSSStyleDeclaration.prototype.get endStyleSheetTextPosition):
+        (WebInspector.CSSStyleDeclaration.prototype.get nodeStyles):
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles):
+        (WebInspector.DOMNodeStyles.prototype._parseStylePropertyPayload):
+        (WebInspector.DOMNodeStyles.prototype._parseStyleDeclarationPayload):
+        (WebInspector.DOMNodeStyles.prototype._parseRulePayload):
+        * UserInterface/Main.html:
+
+2013-02-11  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.CSSRule and WebInspector.CSSMedia and have DOMNodeStyles parse and create them.
+
+        <rdar://problem/7206272&12526319>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSMedia.js: Added.
+        (WebInspector.CSSMedia):
+        (WebInspector.CSSMedia.prototype.get type):
+        (WebInspector.CSSMedia.prototype.get text):
+        (WebInspector.CSSMedia.prototype.get sourceCodeLocation):
+        * UserInterface/CSSRule.js: Added.
+        (WebInspector.CSSRule):
+        (WebInspector.CSSRule.prototype.get id):
+        (WebInspector.CSSRule.prototype.get ownerStyleSheet):
+        (WebInspector.CSSRule.prototype.update):
+        (WebInspector.CSSRule.prototype.get type):
+        (WebInspector.CSSRule.prototype.get sourceCodeLocation):
+        (WebInspector.CSSRule.prototype.get selectorText):
+        (WebInspector.CSSRule.prototype.get selectors):
+        (WebInspector.CSSRule.prototype.get matchedSelectorIndices):
+        (WebInspector.CSSRule.prototype.get style):
+        (WebInspector.CSSRule.prototype.get mediaList):
+        (WebInspector.CSSRule.prototype.get nodeStyles):
+        * UserInterface/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles):
+        (WebInspector.DOMNodeStyles.prototype.refresh.parseRuleMatchArrayPayload):
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedMatchedStyles):
+        (WebInspector.DOMNodeStyles.prototype.refresh):
+        (WebInspector.DOMNodeStyles.prototype.get matchedRules):
+        (WebInspector.DOMNodeStyles.prototype._identifierToString):
+        (WebInspector.DOMNodeStyles.prototype._createSourceCodeLocation):
+        (WebInspector.DOMNodeStyles.prototype._parseRulePayload):
+        (WebInspector.DOMNodeStyles.prototype._styleSheetContentDidChange.markAsNeedsRefresh):
+        (WebInspector.DOMNodeStyles.prototype._styleSheetContentDidChange.checkRules):
+        (WebInspector.DOMNodeStyles.prototype._styleSheetContentDidChange):
+        * UserInterface/Main.html:
+
+2013-02-11  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.DOMNodeStyles, a new class to inspect and manage styles for a node.
+
+        <rdar://problem/7206272&12526319>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager): Added _nodeStylesMap.
+        (WebInspector.CSSStyleManager.prototype.stylesForNode): Added.
+        (WebInspector.CSSStyleManager.prototype._mainResourceDidChange): Clear _nodeStylesMap.
+        * UserInterface/DOMNodeStyles.js: Added.
+        (WebInspector.DOMNodeStyles):
+        (WebInspector.DOMNodeStyles.prototype.get node):
+        (WebInspector.DOMNodeStyles.prototype.refreshIfNeeded):
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedMatchedStyles):
+        (WebInspector.DOMNodeStyles.prototype.refresh.fetchedInlineStyles):
+        (WebInspector.DOMNodeStyles.prototype.refresh):
+        * UserInterface/Main.html: Added DOMNodeStyles.js.
+
+2013-02-11  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.CSSStyleSheet and start using it.
+
+        This replaces a collection of maps and content updating functions in CSSStyleManager
+        with a proper SourceCode subclass that manages its info, content and works with branches.
+
+        <rdar://problem/7206272&12526319>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/BoxModelDetailsSectionRow.js:
+        (WebInspector.BoxModelDetailsSectionRow): Listen for the change event on CSSStyleSheet.
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel): Ditto.
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager): Added event listeners for resources.
+        (WebInspector.CSSStyleManager.prototype.styleSheetForIdentifier): Added.
+        (WebInspector.CSSStyleManager.prototype.styleSheetChanged): Call noteContentDidChange and
+        _updateResourceContent.
+        (WebInspector.CSSStyleManager.prototype._mainResourceDidChange): Added. Clear the maps when the
+        main frame navigates.
+        (WebInspector.CSSStyleManager.prototype._resourceAdded): Added. Call _clearStyleSheetsForResource.
+        (WebInspector.CSSStyleManager.prototype._resourceTypeDidChange): Ditto.
+        (WebInspector.CSSStyleManager.prototype._clearStyleSheetsForResource): Added.
+        (WebInspector.CSSStyleManager.prototype._frameURLMapKey): Added.
+        (WebInspector.CSSStyleManager.prototype._lookupStyleSheetForResource.syleSheetsFetched): Use
+        _styleSheetFrameURLMap instead of _styleSheetInfoMap.
+        (WebInspector.CSSStyleManager.prototype._setContentForStyleSheetIdentifier): Removed.
+        (WebInspector.CSSStyleManager.prototype._lookupStyleSheet): Updated function names.
+        (WebInspector.CSSStyleManager.prototype._fetchInfoForAllStyleSheets): Ditto.
+        (WebInspector.CSSStyleManager.prototype._resourceContentDidChange.applyStyleSheetChanges.styleSheetFound):
+        Use SourceCodeRevision to update the stylesheet content.
+        (WebInspector.CSSStyleManager.prototype._updateResourceContent): Added.
+        (WebInspector.CSSStyleManager.prototype._updateResourceContent.fetchedStyleSheetContent): Added.
+        (WebInspector.CSSStyleManager.prototype._updateResourceContent.styleSheetReady): Added.
+        (WebInspector.CSSStyleManager.prototype._updateResourceContent.applyStyleSheetChanges): Added.
+        * UserInterface/CSSStyleSheet.js: Added.
+        (WebInspector.CSSStyleSheet):
+        (WebInspector.CSSStyleSheet.resetUniqueDisplayNameNumbers):
+        (WebInspector.CSSStyleSheet.prototype.get id):
+        (WebInspector.CSSStyleSheet.prototype.get parentFrame):
+        (WebInspector.CSSStyleSheet.prototype.get url):
+        (WebInspector.CSSStyleSheet.prototype.get urlComponents):
+        (WebInspector.CSSStyleSheet.prototype.get displayName):
+        (WebInspector.CSSStyleSheet.prototype.updateInfo):
+        (WebInspector.CSSStyleSheet.prototype.get revisionForRequestedContent):
+        (WebInspector.CSSStyleSheet.prototype.handleCurrentRevisionContentChange.contentDidChange):
+        (WebInspector.CSSStyleSheet.prototype.handleCurrentRevisionContentChange):
+        (WebInspector.CSSStyleSheet.prototype.canRequestContentFromBackend):
+        (WebInspector.CSSStyleSheet.prototype.requestContentFromBackend):
+        (WebInspector.CSSStyleSheet.prototype.noteContentDidChange):
+        * UserInterface/Main.html: Added CSSStyleSheet.js.
+        * UserInterface/SourceCode.js:
+        (WebInspector.SourceCode.prototype.revisionContentDidChange): Call handleCurrentRevisionContentChange.
+        (WebInspector.SourceCode.prototype.handleCurrentRevisionContentChange): Added.
+        (WebInspector.SourceCode.prototype.get revisionForRequestedContent): Added.
+        (WebInspector.SourceCode.prototype.markContentAsStale): Added.
+        (WebInspector.SourceCode.prototype._processContent): Use revisionForRequestedContent.
+
+2013-02-11  Timothy Hatcher  <timothy@apple.com>
+
+        Remove noteStyleSheetChanged and use the styleSheetChanged backend event.
+
+        The backend already tells us when a stylesheet changes, so we should use it
+        instead of trying to fire the event when we think it should.
+
+        <rdar://problem/7206272&12526319>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSObserver.js:
+        (WebInspector.CSSObserver.prototype.styleSheetChanged): Call CSSStyleManager.
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager.prototype.mediaQueryResultChanged): Moved to the top.
+        (WebInspector.CSSStyleManager.prototype.styleSheetChanged): Added.
+        (WebInspector.CSSStyleManager.prototype.noteStyleSheetChanged): Removed.
+        * UserInterface/OldCSSProperty.js:
+        (WebInspector.OldCSSProperty.prototype.callback): Removed call to noteStyleSheetChanged.
+        (WebInspector.OldCSSProperty.prototype.setText): Ditto.
+        (WebInspector.OldCSSProperty.prototype.setDisabled): Ditto.
+        * UserInterface/OldCSSStyleDeclaration.js:
+        (WebInspector.OldCSSStyleDeclaration.prototype.insertPropertyAt): Removed call to noteStyleSheetChanged.
+
+2013-02-11  Timothy Hatcher  <timothy@apple.com>
+
+        Create mappings between shorthand and longhand property names.
+
+        <rdar://problem/7206272&12526319>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSCompletions.js:
+        (WebInspector.CSSCompletions): Create the mappings.
+        (WebInspector.CSSCompletions.prototype.longhandsForShorthand): Added.
+        (WebInspector.CSSCompletions.prototype.shorthandsForLonghand): Added.
+
+2013-02-11  Timothy Hatcher  <timothy@apple.com>
+
+        Rename current CSS model classes to have "Old" prefixes.
+
+        This is in preparation for a new and improved CSS model classes.
+
+        <rdar://problem/7206272&12526319>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager.parseRuleArrayPayload):
+        (WebInspector.CSSStyleManager.prototype.):
+        (WebInspector.CSSStyleManager.prototype.getMatchedStylesAsync):
+        (WebInspector.CSSStyleManager.prototype.getComputedStyleAsync):
+        (WebInspector.CSSStyleManager.prototype.getInlineStylesAsync):
+        * UserInterface/Main.html:
+        * UserInterface/OldCSSMedia.js: Renamed from WebInspector/UserInterface/CSSMedia.js.
+        * UserInterface/OldCSSProperty.js: Renamed from WebInspector/UserInterface/CSSProperty.js.
+        * UserInterface/OldCSSRule.js: Renamed from WebInspector/UserInterface/CSSRule.js.
+        * UserInterface/OldCSSStyleDeclaration.js: Renamed from WebInspector/UserInterface/CSSStyleDeclaration.js.
+        * UserInterface/StylePropertiesSection.js:
+        (WebInspector.StylePropertiesSection):
+        (WebInspector.StylePropertiesSection.prototype.onpopulate):
+
+2013-02-12  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/11053300> Profile recording button falsely indicates "recording" if started and then page navigates or refreshes
+
+        We now correctly keep the recording state across a page reload,
+        only resetting it, as well as removing any previous profile, when
+        we navigate away from the current page.
+
+        To do so, we alert the sidebar panel when a profile is interrupted
+        such that any old tree item for this profile is pruned and the
+        state of the profile recording button is updated to match that of
+        the profiler. Additionally, when the main frame is refreshed, we
+        attempt to resume profiling by looking for existing, though stale,
+        profile objects, and creating a new one as needed. In cases where
+        we navigate to a new frame, the "Cleared" event is dispatched and
+        the sidebar panel empties itself.
+
+        Finally, we ensure that the number set for the profile's title
+        reflects the current list of profiles of this type and that any
+        selected CSS profile's content view is hidden if the profile list
+        is cleared.
+
+        Note that profiles that were recorded prior to the current load
+        will show an empty content view unless they had also been selected
+        prior to a subsequent load. This is a known issue and will be fixed
+        with a followup task.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel):
+        (WebInspector.InstrumentSidebarPanel.prototype._profilingInterrupted):
+        (WebInspector.InstrumentSidebarPanel.prototype._titleForProfile):
+        (WebInspector.InstrumentSidebarPanel.prototype._profilesCleared):
+        * UserInterface/ProfileManager.js:
+        (WebInspector.ProfileManager.prototype.initialize):
+        (WebInspector.ProfileManager.prototype.setRecordingJavaScriptProfile):
+        (WebInspector.ProfileManager.prototype._mainResourceDidChange):
+        (WebInspector.ProfileManager.prototype._checkForInterruptions):
+        (WebInspector.ProfileManager.prototype._attemptToResumeProfiling):
+
+2013-02-12  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13171934> Control+click on toolbar doesn't bring up toolbar context menu items
+
+        Don't do any custom handling of mousedown events on the toolbar if
+        the control key was pressed.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.js:
+        (WebInspector._toolbarMouseDown):
+
+2013-02-11  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/10854712> REGRESSION (Safari 6): It's hard to see at a glance if a page has any JS/HTML errors/warnings
+
+        We add a new DashboardManager singleton which taps into events exposed
+        by other managers and classes in order to monitor resources, timeline
+        records and console messages and display the respective counts in a
+        DashboardView. The DashboardView knows how to lay itself out in the
+        various toolbar modes and lets the user jump to various parts of the
+        inspector upon clicking its outlets, while providing useful information
+        as the user hovers over the item with the mouse.
+
+        Reviewed by Timothy Hatcher and Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/DashboardManager.js: Added.
+        (WebInspector.DashboardManager):
+        (WebInspector.DashboardManager.prototype._resourceWasAdded):
+        (WebInspector.DashboardManager.prototype._resourcesWereCleared):
+        (WebInspector.DashboardManager.prototype._frameWasAdded):
+        (WebInspector.DashboardManager.prototype._resourceSizeDidChange):
+        (WebInspector.DashboardManager.prototype._timelineRecordingStarted):
+        (WebInspector.DashboardManager.prototype._updateTime):
+        (WebInspector.DashboardManager.prototype._consoleMessageAdded):
+        (WebInspector.DashboardManager.prototype._consoleMessageWasRepeated):
+        (WebInspector.DashboardManager.prototype._incrementConsoleMessageType):
+        (WebInspector.DashboardManager.prototype._consoleWasCleared):
+        * UserInterface/DashboardView.css: Added.
+        (.dashboard):
+        (.dashboard > .item):
+        (.dashboard > .item > *):
+        (.dashboard > .item > img):
+        (.dashboard > .item.enabled > img):
+        (.dashboard > .item.enabled:hover > img):
+        (.dashboard > .item > div):
+        (.dashboard > .item.issues > div > div):
+        (.dashboard > .item.enabled > div):
+        (.dashboard > .item.enabled:hover > div):
+        (.dashboard > .resources > img):
+        (.dashboard > .time > img):
+        (.dashboard > .logs > img):
+        (.dashboard > .memory > img):
+        (.dashboard > .errors > img):
+        (.dashboard > .errors.enabled > img):
+        (.dashboard > .errors.enabled:hover > img):
+        (.dashboard > .errors.enabled > div):
+        (.dashboard > .errors.enabled:hover > div):
+        (.dashboard > .issues > img):
+        (.dashboard > .issues.enabled > img):
+        (.dashboard > .issues.enabled:hover > img):
+        (.dashboard > .issues.enabled > div):
+        (.dashboard > .issues.enabled:hover > div):
+        (.toolbar.normal-size.icon-and-label-horizontal > .item-section > .dashboard):
+        (.toolbar.small-size.icon-and-label-vertical > .item-section > .dashboard):
+        (.toolbar.small-size.icon-and-label-vertical > .item-section > .dashboard > .item):
+        (.toolbar.small-size.icon-and-label-vertical > .item-section > .dashboard > .resources):
+        (.toolbar.small-size.icon-and-label-vertical > .item-section > .dashboard > .time):
+        (.toolbar.small-size.icon-and-label-vertical > .item-section > .dashboard > .logs):
+        (.toolbar.small-size.icon-and-label-vertical > .item-section > .dashboard > .memory):
+        (.toolbar.small-size.icon-and-label-vertical > .item-section > .dashboard > .errors):
+        (.toolbar.small-size.icon-and-label-vertical > .item-section > .dashboard > .issues):
+        (.toolbar.normal-size.icon-and-label-vertical > .item-section > .dashboard):
+        (.toolbar.normal-size.icon-and-label-vertical > .item-section > .dashboard > .item):
+        (.toolbar.normal-size.icon-and-label-vertical > .item-section > .dashboard > .resources):
+        (.toolbar.normal-size.icon-and-label-vertical > .item-section > .dashboard > .time):
+        (.toolbar.normal-size.icon-and-label-vertical > .item-section > .dashboard > .logs):
+        (.toolbar.normal-size.icon-and-label-vertical > .item-section > .dashboard > .memory):
+        (.toolbar.normal-size.icon-and-label-vertical > .item-section > .dashboard > .errors):
+        (.toolbar.normal-size.icon-and-label-vertical > .item-section > .dashboard > .issues):
+        * UserInterface/DashboardView.js: Added.
+        (WebInspector.DashboardView):
+        (WebInspector.DashboardView.prototype.get logs):
+        (WebInspector.DashboardView.prototype.set logs):
+        (WebInspector.DashboardView.prototype.get issues):
+        (WebInspector.DashboardView.prototype.set issues):
+        (WebInspector.DashboardView.prototype.get errors):
+        (WebInspector.DashboardView.prototype.set errors):
+        (WebInspector.DashboardView.prototype.set memory):
+        (WebInspector.DashboardView.prototype.set time):
+        (WebInspector.DashboardView.prototype.get resourcesCount):
+        (WebInspector.DashboardView.prototype.set resourcesCount):
+        (WebInspector.DashboardView.prototype.get resourcesSize):
+        (WebInspector.DashboardView.prototype.set resourcesSize):
+        (WebInspector.DashboardView.prototype._appendElementForNamedItem):
+        (WebInspector.DashboardView.prototype._itemWasClicked):
+        (WebInspector.DashboardView.prototype._resourcesWasClicked):
+        (WebInspector.DashboardView.prototype._timeWasClicked):
+        (WebInspector.DashboardView.prototype._consoleItemWasClicked):
+        (WebInspector.DashboardView.prototype._updateResourcesOutlet):
+        (WebInspector.DashboardView.prototype._setItemEnabled):
+        * UserInterface/Images/Errors.svg: Added.
+        * UserInterface/Images/ErrorsEnabled.svg: Added.
+        * UserInterface/Images/Issues.svg: Added.
+        * UserInterface/Images/IssuesEnabled.svg: Added.
+        * UserInterface/Images/Logs.svg: Added.
+        * UserInterface/Images/Memory.svg: Added.
+        * UserInterface/Images/Resources.svg: Added.
+        * UserInterface/Images/Time.svg: Added.
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.increaseSize):
+
+2013-02-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13184288> REGRESSION: Undo / Redo no longer works in QuickConsole
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/KeyboardShortcut.js:
+        (WebInspector.KeyboardShortcut):
+        (WebInspector.KeyboardShortcut._handleKeyDown):
+        (WebInspector.KeyboardShortcut.prototype.get implicitlyPreventsDefault):
+        (WebInspector.KeyboardShortcut.prototype.set implicitlyPreventsDefault):
+        By default keyboard shortcuts prevent default. Allow the KeyboardShortcut
+        to opt out of implicitly preventing default. That way a keyboard shortcut
+        can be added that does not prevent default.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        The undo and redo keyboard shortcuts will not implicitly prevent default.
+
+        (WebInspector._undoKeyboardShortcut):
+        (WebInspector._redoKeyboardShortcut):
+        Do not trigger WebInspector.undo or redo if the key event triggered
+        while in a text field. Instead let the event bubble to get default
+        text editing behavior.
+
+2013-02-08  Timothy Hatcher  <timothy@apple.com>
+
+        Only record the load event time for the main frame.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype.eventRecorded.processRecord): Check the frameId against the
+        mainFrame's id before setting _loadEventTime.
+
+2013-02-07  Timothy Hatcher  <timothy@apple.com>
+
+        Make CSS autocompletion work again when editing a property.
+
+        <rdar://problem/13058573> REGRESSION: CSS autocompletion broken after OpenSource r123612
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSCompletions.js:
+        (WebInspector.CSSCompletions): Support the change in format of values.
+
+2013-02-07  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13162142> Contextual menu items on the toolbar are missing
+
+        Pass the event when creating a ContextMenu object instead on calling show().
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype._handleContextMenuEvent):
+        * UserInterface/Toolbar.js:
+        (WebInspector.Toolbar.prototype._handleContextMenuEvent):
+
+2013-02-07  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Merge OpenSource r116305 to fix TextPrompt event listener and style leaks.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TextPrompt.js:
+        (WebInspector.TextPrompt.prototype._attachInternal):
+        (WebInspector.TextPrompt.prototype.detach):
+
+2013-02-05  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/11007445> PARITY (WebKit Web Inspector): Support Undo/Redo for DOM changes
+
+        Wire up Cmd+Z and Cmd+Shift+Z keyboard shortcuts to call DOMAgent's
+        undo() and redo() methods while marking DOM and CSS editing tasks
+        as undoable via the DOMAgent's markUndoableState() method.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CSSProperty.js:
+        (WebInspector.CSSProperty.prototype.callback):
+        (WebInspector.CSSProperty.prototype.setText):
+        (WebInspector.CSSProperty.prototype.setDisabled):
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager.prototype.):
+        (WebInspector.CSSStyleManager.prototype._setContentForStyleSheetIdentifier):
+        (WebInspector.CSSStyleManager.prototype.callback):
+        (WebInspector.CSSStyleManager.prototype.setRuleSelector):
+        (WebInspector.CSSStyleManager.prototype.addRule):
+        * UserInterface/DOMNode.js:
+        (WebInspector.DOMNode.prototype.setNodeName):
+        (WebInspector.DOMNode.prototype.setNodeValue):
+        (WebInspector.DOMNode.prototype.setAttribute):
+        (WebInspector.DOMNode.prototype.setAttributeValue):
+        (WebInspector.DOMNode.prototype.):
+        (WebInspector.DOMNode.prototype.removeAttribute):
+        (WebInspector.DOMNode.prototype.setOuterHTML):
+        (WebInspector.DOMNode.prototype.removeNode):
+        (WebInspector.DOMNode.prototype.moveTo):
+        (WebInspector.DOMNode.prototype.setPseudoClassEnabled):
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        (WebInspector.undo):
+        (WebInspector.redo):
+
+2013-02-05  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/11133526> PARITY (WebKit Web Inspector): Ability to force pseudo state for an element is missing
+
+        In order to show submenu items in contextual menus in the Web Inspector, we update ContextMenu.js
+        to be the latest from OpenSource and update the way we use this API in our code so that the event
+        is provided at construction time rather than when calling the .show() method.
+
+        We also have to update the RWI-specific front-end host in order to recognize the new "subMenu"
+        contextual menu item type and handle its items to show as a submenu item in the NSMenu we
+        create.
+
+        Then, we allow the possibility to enforce certain pseudo-classes on a DOMNode, which triggers
+        a new event that the style and appearance panels listen to in order to refresh their display
+        and account for any style changes that may result from a pseudo-class being forced.
+
+        Finally, we add new menu items to the contextual menu of a DOM node in the inspector's DOM
+        tree to allow to "Force CSS Pseudo-Classes".
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/BoxModelDetailsSectionRow.js:
+        (WebInspector.BoxModelDetailsSectionRow):
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel):
+        * UserInterface/ContextMenu.js:
+        (WebInspector.ContextMenuItem):
+        (WebInspector.ContextMenuItem.prototype.id):
+        (WebInspector.ContextMenuItem.prototype.type):
+        (WebInspector.ContextMenuItem.prototype.isEnabled):
+        (WebInspector.ContextMenuItem.prototype.setEnabled):
+        (WebInspector.ContextMenuItem.prototype._buildDescriptor):
+        (WebInspector.ContextSubMenuItem):
+        (WebInspector.ContextSubMenuItem.prototype.appendItem):
+        (WebInspector.ContextSubMenuItem.prototype.appendSubMenuItem):
+        (WebInspector.ContextSubMenuItem.prototype.appendCheckboxItem):
+        (WebInspector.ContextSubMenuItem.prototype.appendSeparator):
+        (WebInspector.ContextSubMenuItem.prototype._pushItem):
+        (WebInspector.ContextSubMenuItem.prototype.isEmpty):
+        (WebInspector.ContextSubMenuItem.prototype._buildDescriptor):
+        (WebInspector.ContextMenu):
+        (WebInspector.ContextMenu.prototype.nextId):
+        (WebInspector.ContextMenu.prototype.show):
+        (WebInspector.ContextMenu.prototype.showSoftMenu):
+        (WebInspector.ContextMenu.prototype._setHandler):
+        (WebInspector.ContextMenu.prototype._buildDescriptor):
+        (WebInspector.ContextMenu.prototype._itemSelected):
+        (WebInspector.ContextMenu.prototype.appendApplicableItems):
+        (WebInspector.ContextMenu.Provider):
+        (WebInspector.ContextMenu.Provider.prototype.appendApplicableItems):
+        (WebInspector.ContextMenu.registerProvider):
+        * UserInterface/DOMNode.js:
+        (WebInspector.DOMNode):
+        (WebInspector.DOMNode.prototype.isXMLNode):
+        (WebInspector.DOMNode.prototype.get enabledPseudoClasses):
+        (WebInspector.DOMNode.prototype.setPseudoClassEnabled):
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype._populateTagContextMenu):
+        (WebInspector.DOMTreeElement.prototype._populateForcedPseudoStateItems.string_appeared_here.forEach):
+        (WebInspector.DOMTreeElement.prototype._populateForcedPseudoStateItems):
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline.prototype._contextMenuEventFired):
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGrid.prototype._contextMenuInDataTable):
+        * UserInterface/ObjectPropertiesSection.js:
+        (WebInspector.ObjectPropertyTreeElement.prototype._contextMenuEventFired):
+        (WebInspector.ObjectPropertyTreeElement.prototype._functionContextMenuEventFired):
+        * UserInterface/Utilities.js:
+
+2013-02-04  Jessie Berlin  <jberlin@apple.com>
+
+        Ran update-safari-localizable-strings.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+2013-02-04  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13042270> Debugger should be smarter about hovered tokens
+
+        When notifying that we're hovering a new token, keep going through
+        previous tokens on the same line to find other expressions and .
+        so that a full property chain can be resolved. The result is now
+        stored in a new "fullExpression" property on the "hoveredToken" object.
+
+        Additionally, the bounds of the token are now those of the full expression
+        such that highlight is correct and the highlight-related APIs have been
+        renamed to work within the context of an expression and not a token.
+
+        While this patch doesn't handle expressions across several lines, it gets
+        us to parity with what the OpenSource Web Inspector knows how to handle.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.tokenWasHovered):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopover):
+        (WebInspector.SourceCodeTextEditor.prototype.willDismissPopover):
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.highlightHoveredExpression):
+        (WebInspector.TextEditor.prototype.removeHighlightOnHoveredExpression):
+        (WebInspector.TextEditor.prototype._mouseMovedOverEditor):
+        (WebInspector.TextEditor.prototype._checkHoveredToken):
+
+2013-02-01  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13137010> Console toggle split / full-height button is showing the wrong direction
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype.shown):
+        (WebInspector.LogContentView.prototype._toggleSplit):
+        Always update the toggle button whenever the log content view is shown.
+
+        * UserInterface/Main.js:
+        (WebInspector.toggleSplitConsole):
+        This no longer needs to return true or false, so clean it up.
+
+2013-02-01  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/13137050> Clicking Console button in main toolbar should always toggle the console, even if no back history
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.js:
+        (WebInspector.toggleConsoleView):
+        When toggling and there is no history, open the source code for the main resource.
+
+2013-02-01  Timothy Hatcher  <timothy@apple.com>
+
+        Add the ability to resize the split console.
+
+        Part of: <rdar://problem/13118771> Unify the quick console and full console
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Main.css:
+        (#split-content-browser > .navigation-bar): Use row-resize cursor.
+        (#split-content-browser > .navigation-bar .item:not(.flexible-space)): Use default cursor.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Added height setting and event listener. Call _updateSplitConsoleHeight.
+        (WebInspector._updateSplitConsoleHeight): Added.
+        (WebInspector._consoleResizerMouseDown): Added.
+        (WebInspector._consoleResizerMouseDown.dockedResizerDrag): Added.
+        (WebInspector._consoleResizerMouseDown.dockedResizerDragEnd): Added.
+
+2013-01-30  Timothy Hatcher  <timothy@apple.com>
+
+        Gut the old Quick Console except the prompt and make the Console view use the Quick Console prompt.
+
+        Part of: <rdar://problem/13118771> Unify the quick console and full console
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView): Use the quick console prompt. Don't append a <br> now that the prompt
+        isn't in the view.
+        (WebInspector.LogContentView.prototype.didAppendConsoleMessage): Added.
+        (WebInspector.LogContentView.prototype.promptDidChangeHeight): Added.
+        * UserInterface/QuickConsole.css: Removed unused rules.
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole):
+        (WebInspector.QuickConsole.prototype.updateLayout): Just call _updateSize.
+        (WebInspector.QuickConsole.prototype._updateSize): Added.
+        (WebInspector.QuickConsole.prototype._toggleOrFocus): Call WebInspector.toggleConsoleView.
+
+2013-01-30  Timothy Hatcher  <timothy@apple.com>
+
+        Add the ability to show a second content browser at the bottom for the console view.
+
+        Part of: <rdar://problem/13118771> Unify the quick console and full console
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser.prototype.get element): Added.
+        * UserInterface/Images/SplitToggleDown.pdf: Added.
+        * UserInterface/Images/SplitToggleUp.pdf: Added.
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.showConsole): Use toggleConsoleView instead.
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView): Create a navigation item for toggling the split.
+        (WebInspector.LogContentView.prototype.get navigationItems): Include the new item.
+        (WebInspector.LogContentView.prototype._toggleSplit): Added.
+        * UserInterface/Main.css:
+        (#split-content-browser): Added.
+        * UserInterface/Main.html: Added #split-content-browser element.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create settings and the split content browser.
+        (WebInspector.prefersUsingSplitConsole): Added.
+        (WebInspector.isShowingSplitConsole): Added.
+        (WebInspector.toggleSplitConsole): Added.
+        (WebInspector.showSplitConsole): Added.
+        (WebInspector.hideSplitConsole): Added.
+        (WebInspector.showFullHeightConsole): Added.
+        (WebInspector.isShowingConsoleView): Added.
+        (WebInspector.showConsoleView): Call showSplitConsole or showFullHeightConsole.
+        (WebInspector.toggleConsoleView): Added.
+        (WebInspector._contentBrowserCurrentContentViewDidChange): Added. Update the console
+        button activated state.
+
+2013-02-01  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12808694> Enter and Shift+Enter should search forward and backwards
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/FindBanner.js:
+        (WebInspector.FindBanner):
+        Initialize new member variables.
+
+        (WebInspector.FindBanner.prototype._inputFieldKeyDown):
+        (WebInspector.FindBanner.prototype._inputFieldKeyUp):
+        Track when the shift key is down inside the search field. Also track
+        when the enter key is pressed to trigger the input's "search" event.
+        We only want to respect shift when the user hits enter to search.
+
+        (WebInspector.FindBanner.prototype._inputFieldSearch):
+        If the search value stayed the same, and there are search results,
+        and the user hit enter, then search forwards or backwards.
+
+2013-01-31  Antoine Quint  <graouts@apple.com>
+
+        Followup fixes after <rdar://problem/11279186> REGRESSION (Safari 6): Timeline
+        view missing type filters. Addresses the good feedback from JoePeck.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TimelineDataGrid.js:
+        (WebInspector.TimelineDataGrid):
+        (WebInspector.TimelineDataGrid.prototype._scopeBarSelectedItemsDidChange):
+        * UserInterface/TimelinesContentView.js:
+
+2013-01-31  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13085826> Add stubs for new Page protocol events (frameStartedLoading, etc.)
+
+        WebCore added a bunch of Page events in http://trac.webkit.org/changeset/140649. We're
+        registering them and providing stub handlers until we actually do something with them.
+        This removes some annoying errors in the Inception console output.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/InspectorBackendCommands.js:
+        * UserInterface/PageObserver.js:
+        (WebInspector.PageObserver.prototype.frameDetached):
+        (WebInspector.PageObserver.prototype.frameStartedLoading):
+        (WebInspector.PageObserver.prototype.frameStoppedLoading):
+        (WebInspector.PageObserver.prototype.frameScheduledNavigation):
+        (WebInspector.PageObserver.prototype.frameClearedScheduledNavigation):
+
+2013-01-31  Antoine Quint  <graouts@apple.com>
+
+        Followup fix to <rdar://problem/10981607> REGRESSION (Safari 6): CSS and JavaScript profiles need a visible way to toggle between absolute times and percentages.
+
+        * UserInterface/ProfileView.js:
+        (WebInspector.ProfileView):
+
+2013-01-30  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13115633> JavaScript profiles percentage values don't have the "%" symbol in them
+
+        Ensure we add the "%" symbol to values reported in the JS profile data
+        grid when percents are used.
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/ProfileDataGridTree.js:
+        (WebInspector.ProfileDataGridNode.prototype.get data):
+
+2013-01-30  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13101516> REGRESSION: JavaScript profile recorded from Web Inspector UI never finishes
+
+        Two changes made in WebCore broke our support for JavaScript profiling. The first introduced by
+        http://trac.webkit.org/changeset/126580 was that ProfilerAgent.getProfileHeaders() needed to be
+        called for any addProfileHeader event to be dispatched to the front-end. The second issue was
+        introduced by http://trac.webkit.org/changeset/139998 which changed the backend API in a non-
+        backward-compatible way so that ProfilerAgent.getProfile() was split in two methods:
+        getCPUProfile() and getHeapSnapshot().
+
+        This patch simply adds a call to ProfilerAgent.getProfileHeaders() as soon as the ProfilerAgent
+        is enabled and also changes the backend we register and call to get the profile to use the
+        most current WebCore API.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/InspectorBackendCommands.js:
+        * UserInterface/JavaScriptProfileView.js:
+        (WebInspector.JavaScriptProfileView):
+        * UserInterface/ProfileManager.js:
+        (WebInspector.ProfileManager):
+
+2013-01-29  Timothy Hatcher  <timothy@apple.com>
+
+        Stop showing "undefined" and empty scope bar items in the Timeline view.
+
+        <rdar://problem/13109468>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView.prototype._makeColumnScopeBar): Check the type of the value,
+        not the type of the key.
+
+2013-01-29  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/11279186> REGRESSION (Safari 6): Timeline view missing type filters
+
+        We now add a ScopeBar above the data grid shown for the currently selected record
+        type as the data grid is hovered. The filtered type is set by adding a .scopeBar
+        property on the column descriptor and the filtering code is ready to be able to
+        deal with multiple filterable types per data grid if/when we decide to do this.
+        However, the UI code only knows how to handle one filterable column per data grid
+        as it stands. The scope bar showing above the data grid fits snuggly where the timeline
+        would usually show and has a 10px invisible padding at the top to ensure the user
+        doesn't mouse out of it too easily.
+
+        The hot path _updatePendingRecordsWithNewBounds was updated to filter the pending
+        records taking into account the current filters, and a new _refreshAllRecordsForCurrentDataGrid
+        method was added to deal with changes of filters, which takes a less optimized and
+        more brutal path.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ScopeBar.js:
+        (WebInspector.ScopeBar.prototype.get defaultItem):
+        * UserInterface/TimelineDataGrid.js:
+        (WebInspector.TimelineDataGrid):
+        (WebInspector.TimelineDataGrid.prototype._scopeBarSelectedItemsDidChange):
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .data-grid > .navigation-bar-container):
+        (.content-view.timelines > .data-grid:hover > .navigation-bar-container):
+        (.content-view.timelines > .data-grid > .navigation-bar-container > .navigation-bar):
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView):
+        (WebInspector.TimelinesContentView.prototype._updatePendingRecordsWithNewBounds):
+        (WebInspector.TimelinesContentView.prototype._scheduleGridNodeForRefresh):
+        (WebInspector.TimelinesContentView.prototype._makeColumnScopeBar):
+        (WebInspector.TimelinesContentView.prototype._dataGridFiltersDidChange):
+        (WebInspector.TimelinesContentView.prototype._refreshAllRecordsForCurrentDataGrid):
+        (WebInspector.TimelinesContentView.prototype.filterableValueForRecordAndIdentifier):
+        (WebInspector.TimelinesContentView.prototype._filterRecordsWithType):
+
+2013-01-29  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/10981607> REGRESSION (Safari 6): CSS and JavaScript profiles need a visible way to toggle between absolute times and percentages
+
+        Refactoring the CSSSelectorProfileView and JavaScriptProfileView classes to both
+        inherit from the new ProfileView class which provide a navigation bar item to
+        toggle how times are displayed (absolute times vs. a percentage) via a % icon.
+
+        This was also the chance to simplify the settings used in the JavaScriptProfileView
+        which used three different settings for the self, total and average columns. Now these
+        columns shared the same setting.
+
+        Note that part of this patch is speculative due to <rdar://problem/13101516> REGRESSION:
+        Profile recorded from Web Inspector UI never finishes.
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/CSSSelectorProfileView.js:
+        (WebInspector.CSSSelectorProfileView):
+        (WebInspector.CSSSelectorProfileView.prototype.toggleTimeDisplay):
+        (WebInspector.CSSSelectorProfileView.prototype._sortProfile):
+        * UserInterface/Images/Percent.pdf: Added.
+        * UserInterface/JavaScriptProfileView.js:
+        (WebInspector.JavaScriptProfileView.profileCallback):
+        (WebInspector.JavaScriptProfileView):
+        (WebInspector.JavaScriptProfileView.prototype.toggleTimeDisplay):
+        * UserInterface/Main.html:
+        * UserInterface/ProfileDataGridTree.js:
+        (WebInspector.ProfileDataGridNode.prototype.get data):
+        * UserInterface/ProfileView.js: Added.
+        (WebInspector.ProfileView):
+        (WebInspector.ProfileView.prototype.get navigationItems):
+        (WebInspector.ProfileView.prototype.get profile):
+        (WebInspector.ProfileView.prototype.set profile):
+        (WebInspector.ProfileView.prototype.toggleTimeDisplay):
+
+2013-01-26  Timothy Hatcher  <timothy@apple.com>
+
+        Update CodeMirror to from 3.0 to 3.0.2.
+
+        https://github.com/marijnh/CodeMirror/compare/v3.0...v3.02
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/External/CodeMirror/LICENSE: Updated.
+        * UserInterface/External/CodeMirror/codemirror.css: Updated.
+        * UserInterface/External/CodeMirror/codemirror.js: Updated.
+        * UserInterface/External/CodeMirror/css.js: Updated.
+        * UserInterface/External/CodeMirror/javascript.js: Updated.
+        * UserInterface/External/CodeMirror/runmode.js: Updated.
+        * UserInterface/External/CodeMirror/searchcursor.js: Updated.
+        * UserInterface/External/CodeMirror/xml.js: Updated.
+        * UserInterface/TextEditor.css:
+        (.text-editor > .CodeMirror pre): Dropped the ":not(.CodeMirror-cursor)".
+        Since CodeMirror-cursor is now a div.
+
+2013-01-25  Timothy Hatcher  <timothy@apple.com>
+
+        Account for a difference in how frames load about:blank.
+
+        There was a change in how about:blank frame loads are reported over the Inspector
+        protocol that was causing a far reaching exception to break parts of the Inspector.
+
+        <rdar://problem/13067806> REGRESSION: Timeline fail to record anything in some cases
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.frameDidNavigate): If the frame isn't known, then
+        create a new resource which will make a new frame. Mark is as loaded at the end too since we don't
+        expect any more events about the load finishing for these frames.
+
+2013-01-24  Timothy Hatcher  <timothy@apple.com>
+
+        Reduce the number layouts and style recalculations when switching views or updating
+        the navigation bar when the selection changes.
+
+        <rdar://problem/12975185> 30 second hang inspecting scrolling perf results page
+        <rdar://problem/11349044> Changing element selection in the Web Inspector hangs
+        for ~2s because JavaScript forces 27 layouts
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/HierarchicalPathNavigationItem.js:
+        (WebInspector.HierarchicalPathNavigationItem.prototype.set components): Use updateLayoutSoon.
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype.insertNavigationItem): Use updateLayoutSoon. Remove explicit
+        call to _updateStyle and set _needsStyleUpdated instead.
+        (WebInspector.NavigationBar.prototype.removeNavigationItem): Ditto.
+        (WebInspector.NavigationBar.prototype.updateLayoutSoon): Added.
+        (WebInspector.NavigationBar.prototype.updateLayoutSoon.update): Added.
+        (WebInspector.NavigationBar.prototype.updateLayout): Clear _needsLayout. Call _updateStyle if
+        _needsStyleUpdated is true.
+        (WebInspector.NavigationBar.prototype._updateStyle): Clear _needsStyleUpdated.
+        * UserInterface/NavigationItem.js:
+        (WebInspector.NavigationItem.prototype.set hidden): Use updateLayoutSoon.
+
+2013-01-24  Timothy Hatcher  <timothy@apple.com>
+
+        Show the resource and line info in the Initiator column, next to the function name.
+
+        This helps further identify which file and line the event occurred on without needing
+        to hover for the tooltip.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/LayoutTimelineDataGridNode.js:
+        (WebInspector.LayoutTimelineDataGridNode.prototype.createCellContent): Add a subtitle
+        element so the resource name is visible.
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .data-grid td .subtitle::before): Added. Show a emdash
+        before the subtitle.
+
+2013-01-23  Timothy Hatcher  <timothy@apple.com>
+
+        Make editing CSS resources work and update the page live.
+
+        <rdar://problem/3143094> Edit-mode for resources (local substation of resources) (16440)
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager):
+        (WebInspector.CSSStyleManager.prototype.noteStyleSheetChanged.gotStyleSheetText): Implement the FIXME.
+        (WebInspector.CSSStyleManager.prototype._lookupStyleSheetIdentifiersForResource): Added.
+        (WebInspector.CSSStyleManager.prototype._lookupStyleSheetIdentifiers): Added.
+        (WebInspector.CSSStyleManager.prototype._setContentForStyleSheetIdentifier): Added.
+        (WebInspector.CSSStyleManager.prototype._resourceContentDidChange): Added.
+        (WebInspector.CSSStyleManager.prototype._resourceContentDidChange.applyStyleSheetChanges): Added.
+        (WebInspector.CSSStyleManager.prototype._resourceContentDidChange.applyStyleSheetChanges.styleSheetIdentifiersFound): Added.
+        * UserInterface/SourceCode.js:
+        (WebInspector.SourceCode.prototype.set currentRevision): Fire ContentDidChange event.
+        (WebInspector.SourceCode.prototype.revisionContentDidChange): Ditto.
+        (WebInspector.SourceCode.prototype._processContent): Ignore content change events for original content.
+        * UserInterface/SourceCodeRevision.js:
+        (WebInspector.SourceCodeRevision.prototype.set content): Call revisionContentDidChange on SourceCode.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor): Listen for change event.
+        (WebInspector.TextEditor.prototype.set string): Ignore change event when setting the string.
+        (WebInspector.TextEditor.prototype.get readOnly): Added.
+        (WebInspector.TextEditor.prototype.set readOnly): Added.
+        (WebInspector.TextEditor.prototype._contentChanged): Added.
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView): Listen for SourceCode ContentDidChange event.
+        (WebInspector.TextResourceContentView.prototype.closed): Remove ContentDidChange event listener.
+        (WebInspector.TextResourceContentView.prototype._contentWillPopulate): Make editor writable for CSS.
+        (WebInspector.TextResourceContentView.prototype._sourceCodeContentDidChange): Added. Update editor content.
+        (WebInspector.TextResourceContentView.prototype._textEditorContentDidChange): Added. Update source code content.
+
+2013-01-22  Timothy Hatcher  <timothy@apple.com>
+
+        Clean up how CSSStyleManager tracks stylesheet changes.
+
+        Replaces _fireStyleSheetChanged with noteStyleSheetChanged and populates stylesheet
+        identifiers for later use.
+
+        <rdar://problem/3143094> Edit-mode for resources (local substation of resources) (16440)
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSProperty.js:
+        (WebInspector.CSSProperty.prototype.callback): Use noteStyleSheetChanged instead of _fireStyleSheetChanged.
+        (WebInspector.CSSProperty.prototype.setText): Ditto.
+        (WebInspector.CSSProperty.prototype.setDisabled): Ditto.
+        * UserInterface/CSSStyleDeclaration.js:
+        (WebInspector.CSSStyleDeclaration.prototype.insertPropertyAt): Use noteStyleSheetChanged instead of _fireStyleSheetChanged.
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager):
+        (WebInspector.CSSStyleManager.prototype.noteStyleSheetChanged): Added.
+        (WebInspector.CSSStyleManager.prototype.noteStyleSheetChanged.gotStyleSheetText): Added.
+        (WebInspector.CSSStyleManager.prototype.noteStyleSheetChanged.syleSheetsFetched): Added.
+        (WebInspector.CSSStyleManager.prototype._fetchInfoForAllStyleSheets): Added. Populate the identifier maps.
+        (WebInspector.CSSStyleManager.prototype.setRuleSelector): Use noteStyleSheetChanged instead of _fireStyleSheetChanged.
+        (WebInspector.CSSStyleManager.prototype.addRule): Ditto.
+        * UserInterface/CSSStyleSheet.js: Removed.
+        * UserInterface/Main.html: Removed CSSStyleSheet.js.
+
+2013-01-22  Timothy Hatcher  <timothy@apple.com>
+
+        Add a BranchManager class for tracking various branches.
+
+        There are two initial branches -- Original and Working Copy. Currently
+        the Working Copy is always the current branch, but this will be controllable
+        from the user interface at some point.
+
+        <rdar://problem/3143094> Edit-mode for resources (local substation of resources) (16440)
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/BranchManager.js: Added.
+        (WebInspector.BranchManager):
+        (WebInspector.BranchManager.prototype.get branches):
+        (WebInspector.BranchManager.prototype.get currentBranch):
+        (WebInspector.BranchManager.prototype.set currentBranch):
+        (WebInspector.BranchManager.prototype.createBranch):
+        (WebInspector.BranchManager.prototype.deleteBranch):
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Instantiate BranchManager.
+
+2013-01-22  Timothy Hatcher  <timothy@apple.com>
+
+        Add a SourceCodeRevision class for recording changes to SourceCode objects.
+
+        Offloads the the content and contentIsBase64Encoded properties to SourceCodeRevision.
+        SourceCode now creates an original revision that holds the original content. In addition
+        to the original revision, there is a current revision that can be set to point to different
+        content based on the original.
+
+        <rdar://problem/3143094> Edit-mode for resources (local substation of resources) (16440)
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Branch.js:
+        (WebInspector.Branch.prototype.revisionForRepresentedObject): Added. Helper for finding or
+        creating a new revision for an object.
+        * UserInterface/Main.html:
+        * UserInterface/SourceCode.js:
+        (WebInspector.SourceCode):
+        (WebInspector.SourceCode.prototype.get originalRevision): Added.
+        (WebInspector.SourceCode.prototype.get currentRevision): Added.
+        (WebInspector.SourceCode.prototype.set currentRevision): Added.
+        (WebInspector.SourceCode.prototype.get content): Use currentRevision.
+        (WebInspector.SourceCode.prototype.get contentIsBase64Encoded): Use currentRevision.
+        (WebInspector.SourceCode.prototype._processContent): Set originalRevision content.
+        * UserInterface/SourceCodeRevision.js: Added.
+        (WebInspector.SourceCodeRevision):
+        (WebInspector.SourceCodeRevision.prototype.get sourceCode):
+        (WebInspector.SourceCodeRevision.prototype.get content):
+        (WebInspector.SourceCodeRevision.prototype.set content):
+        (WebInspector.SourceCodeRevision.prototype.get contentIsBase64Encoded):
+        (WebInspector.SourceCodeRevision.prototype.set contentIsBase64Encoded):
+        (WebInspector.SourceCodeRevision.prototype.apply): Set currentRevision to point to this.
+        (WebInspector.SourceCodeRevision.prototype.revert): Set currentRevision to point to the original.
+        (WebInspector.SourceCodeRevision.prototype.copy): Copy the content and create a new SourceCodeRevision.
+
+2013-01-22  Timothy Hatcher  <timothy@apple.com>
+
+        Add a BranchManager class for tracking various branches.
+
+        There are two initial branches -- Original and Working Copy. Currently
+        the Working Copy is always the current branch, but this will be controllable
+        from the user interface at some point.
+
+        <rdar://problem/3143094> Edit-mode for resources (local substation of resources) (16440)
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/BranchManager.js: Added.
+        (WebInspector.BranchManager):
+        (WebInspector.BranchManager.prototype.get branches):
+        (WebInspector.BranchManager.prototype.get currentBranch):
+        (WebInspector.BranchManager.prototype.set currentBranch):
+        (WebInspector.BranchManager.prototype.createBranch):
+        (WebInspector.BranchManager.prototype.deleteBranch):
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Instantiate BranchManager.
+
+2013-01-22  Timothy Hatcher  <timothy@apple.com>
+
+        Add a Branch and Revision class for tracking edits in the Inspector.
+
+        These classes are not used yet and will be used in subsequent changes.
+        A branch holds revisions that are differences from the original page.
+        Concrete revision subclasses will know the specifics about the edited
+        part of the page and how to apply or revert the change.
+
+        <rdar://problem/3143094> Edit-mode for resources (local substation of resources) (16440)
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Branch.js: Added.
+        (WebInspector.Branch):
+        (WebInspector.Branch.prototype.get displayName):
+        (WebInspector.Branch.prototype.set displayName):
+        (WebInspector.Branch.prototype.get revisions):
+        (WebInspector.Branch.prototype.get locked):
+        (WebInspector.Branch.prototype.addRevision):
+        (WebInspector.Branch.prototype.removeRevision):
+        (WebInspector.Branch.prototype.reset):
+        (WebInspector.Branch.prototype.apply):
+        (WebInspector.Branch.prototype.revert):
+        (WebInspector.Branch.prototype.lock):
+        (WebInspector.Branch.prototype.unlock):
+        * UserInterface/Main.html:
+        * UserInterface/Revision.js: Added.
+        (WebInspector.Revision):
+        (WebInspector.Revision.prototype.apply):
+        (WebInspector.Revision.prototype.revert):
+        (WebInspector.Revision.prototype.copy):
+
+2013-01-22  Timothy Hatcher  <timothy@apple.com>
+
+        Move contentURL from SourceCode to Resource since _mimeType is
+        only available on Resource.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.get contentURL): Added.
+        * UserInterface/SourceCode.js:
+        (WebInspector.SourceCode.prototype.get contentURL): Removed.
+
+2013-01-23  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13069440> Switching away from debugger using keyboard shortcut retains popover on screen
+
+        Dismiss the popover upon hiding the debugger.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.hidden):
+
+2013-01-23  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13059630> Move debugger popover display support to SourceCodeTextEditor
+
+        Split code between TextEditor and SourceCodeTextEditor such that TextEditor handles all
+        the user interaction and the interfacing with CodeMirror and notifies subclasses using
+        the .tokenWasHovered() method and keeping the currently hovered token in .hoveredToken.
+        This token contains the bounds of the hovered token as well as its expression, type,
+        start and end characters information.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SourceCodeTextEditor.css:
+        (.popover .debugger-popover-content):
+        (.popover .expandable):
+        (.popover .debugger-popover-content .title):
+        (.popover .debugger-popover-content .body):
+        (.popover .debugger-popover-content.function .body):
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor):
+        (WebInspector.SourceCodeTextEditor.prototype._activeCallFrameDidChange):
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointToggled):
+        (WebInspector.SourceCodeTextEditor.prototype._debuggerDidPause):
+        (WebInspector.SourceCodeTextEditor.prototype._debuggerDidResume):
+        (WebInspector.SourceCodeTextEditor.prototype.tokenWasHovered.populate):
+        (WebInspector.SourceCodeTextEditor.prototype.tokenWasHovered):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopover):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForFunction.didGetDetails):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForFunction):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForObject):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForString):
+        (WebInspector.SourceCodeTextEditor.prototype._showPopoverForNumber):
+        (WebInspector.SourceCodeTextEditor.prototype.willDismissPopover):
+        * UserInterface/TextEditor.css:
+        (.text-editor > .CodeMirror .hovered-token-highlight):
+        (@-webkit-keyframes text-editor-hovered-token-highlight-fadeout):
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor):
+        (WebInspector.TextEditor.prototype.startTrackingTokenHovering):
+        (WebInspector.TextEditor.prototype.stopTrackingTokenHovering):
+        (WebInspector.TextEditor.prototype.handleEvent):
+        (WebInspector.TextEditor.prototype.highlightHoveredToken):
+        (WebInspector.TextEditor.prototype.removeHighlightOnHoveredToken):
+        (WebInspector.TextEditor.prototype.tokenWasHovered):
+        (WebInspector.TextEditor.prototype._openClickedLinks):
+        (WebInspector.TextEditor.prototype._mouseMovedOverEditor):
+        (WebInspector.TextEditor.prototype._mouseMovedOutOfEditor):
+        (WebInspector.TextEditor.prototype._checkHoveredToken):
+
+2013-01-22  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13059425> Console filters should persist across sessions
+
+        Make ScopeBarItem save their selected state in a WebInspector.Setting that
+        we read from to set the initial state. This change requires consumers of the
+        ScopeBar class to ensure they don't just rely on selection change events
+        but also run an initial update to match selected ScopeBarItems upon creation,
+        so we update LogContentView to do this.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView):
+        (WebInspector.LogContentView.prototype._scopeBarSelectionDidChange):
+        * UserInterface/ScopeBar.js:
+        (WebInspector.ScopeBar):
+        (WebInspector.ScopeBar.prototype.get selectedItems):
+        (WebInspector.ScopeBar.prototype._populate):
+        (WebInspector.ScopeBar.prototype._itemSelectionDidChange):
+        * UserInterface/ScopeBarItem.js:
+        (WebInspector.ScopeBarItem):
+        (WebInspector.ScopeBarItem.prototype.get selected):
+        (WebInspector.ScopeBarItem.prototype.setSelected):
+        (WebInspector.ScopeBarItem.prototype._markElementSelected):
+
+2013-01-22  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/11651957> REGRESSION (Safari 6): Does not show var value on hover in the debugger
+
+        Display a popover for any variable or function definition in the text editor
+        hovered long enough (500ms) during a debugging session. The popover contains
+        the expression as evaluated by the DebuggerAgent. Each value type has a specialized
+        display as borrowed from OpenSource code (from ObjectPopoverHelper) and adapted to fit
+        our coding style.
+
+        We do a fair bit of nifty work to avoid unwanted actions. For instance, we track mouseout
+        events to identify when the user mouses out of the editor so that we can reset the hover
+        state and avoid having whatever was the last hovered token show a popover even though we
+        may have exited the editor along the way. Additionally, we track the pressed state of the
+        mouse button to avoid having the popover show during a selection.
+
+        We're also making various enhancements to the Popover class to support the attachment of
+        popovers to tokens in the TextEditor as the debugger is paused. Here are the highlights:
+
+        - adopt UIKit-like terminology for present/dismiss methods.
+        - let consumers of the Popover API provide bounds instead of an element as a reference to
+        which the popover should be attached, removing the dependency on having an element to work with.
+        - make the popover's element private since it really needs not to be customised as presentation
+        is fully managed by the popover itself, however allow a `content` element to be provided to
+        the .present() method and letting the popover host it as needed.
+        - no longer remove the popover on window blur as OpenSource leaves it on display and it makes
+        debugging of the popover difficult.
+        - handle padding of the popover frame in code for computations of the tighter bounding box
+        as we can't have it done in CSS until we already know what edge we end up using for the popover.
+        - begin to offer a delegation protocol for popovers, right now willDismiss / didDismiss.
+        - horizontal and vertically align content that is smaller than the minimal bounds of the popover.
+
+        Reviewed by Joseph Pecoraro and Timothy Hatcher.
+
+        * UserInterface/Main.html:
+        * UserInterface/Popover.css:
+        (.popover):
+        (.popover > .container):
+        (.popover > .container.center):
+        (.popover.arrow-up > .container):
+        (.popover.arrow-right > .container):
+        (.popover.arrow-down > .container):
+        (.popover.arrow-left > .container):
+        * UserInterface/Popover.js:
+        (WebInspector.Popover):
+        (WebInspector.Popover.prototype.set frame):
+        (WebInspector.Popover.prototype.present):
+        (WebInspector.Popover.prototype.dismiss):
+        (WebInspector.Popover.prototype.handleEvent):
+        (WebInspector.Popover.prototype._cssClassNameForEdge):
+        (WebInspector.Popover.prototype._bestFrameForEdge):
+        * UserInterface/TextEditor.css:
+        (.text-editor > .CodeMirror .popover-highlight):
+        (@-webkit-keyframes text-editor-popover-highlight-fadeout):
+        (to):
+        (.popover .debugger-popover-content):
+        (.popover .expandable):
+        (.popover .debugger-popover-content .title):
+        (.popover .debugger-popover-content .body):
+        (.popover .debugger-popover-content.function .body):
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor):
+        (WebInspector.TextEditor.prototype._openClickedLinks):
+        (WebInspector.TextEditor.prototype._debuggerDidPause):
+        (WebInspector.TextEditor.prototype._debuggerDidResume):
+        (WebInspector.TextEditor.prototype._debuggerActiveCallFrameDidChange):
+        (WebInspector.TextEditor.prototype.handleEvent):
+        (WebInspector.TextEditor.prototype._mouseMovedOverEditor):
+        (WebInspector.TextEditor.prototype._mouseMovedOutOfEditor):
+        (WebInspector.TextEditor.prototype._mouseButtonWasPressedOverEditor):
+        (WebInspector.TextEditor.prototype._mouseButtonWasReleasedOverEditor):
+        (WebInspector.TextEditor.prototype._windowLostFocus):
+        (WebInspector.TextEditor.prototype._tokenWasHovered):
+        (WebInspector.TextEditor.prototype._populateCallback):
+        (WebInspector.TextEditor.prototype._showPopover):
+        (WebInspector.TextEditor.prototype._showPopoverForFunction.didGetDetails):
+        (WebInspector.TextEditor.prototype._showPopoverForFunction):
+        (WebInspector.TextEditor.prototype._showPopoverForObject):
+        (WebInspector.TextEditor.prototype._showPopoverForString):
+        (WebInspector.TextEditor.prototype._showPopoverForNumber):
+        (WebInspector.TextEditor.prototype.willDismissPopover):
+
+2013-01-22  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/12243633> REGRESSION (Safari 6): Console missing type filters
+
+        Adding a new ScopeBar subclass of NavigationItem to allow the display of scope
+        options in a navigation bar. Use this new class in LogContentView to display
+        All / Errors / Warnings / Logs options in the right part of the view's navigation bar.
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser.prototype._updateContentViewNavigationItems):
+        * UserInterface/LogContentView.css:
+        (.console-messages.supress-logs .console-log-level):
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView):
+        (WebInspector.LogContentView.prototype.get navigationItems):
+        (WebInspector.LogContentView.prototype._clearLog):
+        (WebInspector.LogContentView.prototype._scopeBarSelectionDidChange.toggle):
+        (WebInspector.LogContentView.prototype._scopeBarSelectionDidChange):
+        * UserInterface/Main.html:
+        * UserInterface/ScopeBar.css: Added.
+        (.scope-bar):
+        (.scope-bar > li):
+        (.scope-bar > li:active):
+        (.scope-bar > li:hover):
+        (.scope-bar > li.selected):
+        * UserInterface/ScopeBar.js: Added.
+        (WebInspector.ScopeBar):
+        (WebInspector.ScopeBar.prototype.item):
+        (WebInspector.ScopeBar.prototype._populate):
+        (WebInspector.ScopeBar.prototype._itemSelectionDidChange):
+        * UserInterface/ScopeBarItem.js: Added.
+        (WebInspector.ScopeBarItem):
+        (WebInspector.ScopeBarItem.prototype.get element):
+        (WebInspector.ScopeBarItem.prototype.get selected):
+        (WebInspector.ScopeBarItem.prototype.set selected):
+        (WebInspector.ScopeBarItem.prototype.setSelected):
+        (WebInspector.ScopeBarItem.prototype._clicked):
+
+2013-01-17  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/13006824> Provide a Popover class
+
+        Basic Popover class to allow the display of any HTML content within a popover.
+
+        The public API of this class is very simple. Use .showRelativeToElement(element, preferredEdge)
+        to display the popover pointing to the provided target element with the provided edge as the
+        preferred edge of the target element towards which the popover's arrow should point to.
+        The method will check whether it can honour the edge preference based on the available screen
+        real estate. As it stands, the popover will constrain its display to the entire Web Inspector
+        window, but it could easily be made to match a more constrained space with a new WebInspector.Rect
+        parameter or Element reference.
+
+        You can then use .close() to dismiss the popover with an animated transition, although the popover
+        will automatically dismiss itself upon user interaction initiated outside of the popover's bounds
+        or when the Web Inspector window is no longer focused.
+
+        Additionally, the necessary geometry functions for the Popover class is taken from iAd JS and adapted
+        here to fit with the Web Inspector coding style.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Geometry.js: Added.
+        (WebInspector.Point):
+        (WebInspector.Point.fromEvent):
+        (WebInspector.Point.fromEventInElement):
+        (WebInspector.Point.prototype.toString):
+        (WebInspector.Point.prototype.copy):
+        (WebInspector.Point.prototype.equals):
+        (WebInspector.Size):
+        (WebInspector.Size.prototype.toString):
+        (WebInspector.Size.prototype.copy):
+        (WebInspector.Size.prototype.equals):
+        (WebInspector.Rect):
+        (WebInspector.Rect.rectFromClientRect):
+        (WebInspector.Rect.prototype.toString):
+        (WebInspector.Rect.prototype.copy):
+        (WebInspector.Rect.prototype.equals):
+        (WebInspector.Rect.prototype.inset):
+        (WebInspector.Rect.prototype.minX):
+        (WebInspector.Rect.prototype.minY):
+        (WebInspector.Rect.prototype.midX):
+        (WebInspector.Rect.prototype.midY):
+        (WebInspector.Rect.prototype.maxX):
+        (WebInspector.Rect.prototype.maxY):
+        (WebInspector.Rect.prototype.intersectionWithRect):
+        (WebInspector.EdgeInsets):
+        (WebInspector.EdgeInsets.prototype.equals):
+        (WebInspector.EdgeInsets.prototype.copy):
+        * UserInterface/Popover.css: Added.
+        (.popover):
+        (.popover.arrow-up):
+        (.popover.arrow-right):
+        (.popover.arrow-down):
+        (.popover.arrow-left):
+        (.popover.fade-out):
+        * UserInterface/Popover.js: Added.
+        (WebInspector.Popover):
+        (WebInspector.Popover.prototype.get element):
+        (WebInspector.Popover.prototype.get frame):
+        (WebInspector.Popover.prototype.set frame):
+        (WebInspector.Popover.prototype.area):
+        (WebInspector.Popover.prototype.showRelativeToElement):
+        (WebInspector.Popover.prototype.close):
+        (WebInspector.Popover.prototype.handleEvent):
+        (WebInspector.Popover.prototype._drawBackground):
+        (WebInspector.Popover.prototype._bestFrameForEdge):
+        (WebInspector.Popover.prototype._drawFrame):
+
+2013-01-11  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/10015674> REGRESSION (Safari 5): Option-click on a disclosure triangle does not deep-expand a DOM subtree (66868)
+
+        Up to now, the TreeElement.prototype.expandRecursively() method would correctly
+        expand children recursively based on the provided depth, but would not wait to
+        perform this task until all child nodes had been populated, which means that this
+        would only work incrementally with one additional level of child nodes being shown
+        expanded in the DOM tree upon alt+clicking a given node with a deep hierarchy.
+        
+        In order to fix this, we rely on the newly added optional argument to DOMAgent's
+        requestChildNodes() method to provide the depth at which we want to retrieve children
+        of a given node (see http://trac.webkit.org/changeset/139429). The DOMAgent provides
+        a new .getSubtree() method that calls requestChildNodes() with the provided depth.
+
+        Then in DOMTreeElement, we subclass .expandRecursively() to first call DOMAgent's
+        new .getSubtree() method and then call the default implementation when all nodes
+        have been retrieved from the backend.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMNode.js:
+        (WebInspector.DOMNode.prototype.):
+        (WebInspector.DOMNode.prototype.getSubtree): New method allowing to specify at what
+        depth we want to retrieve children of a given node from the backend.
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype.expandRecursively): Override default implementation
+        to first obtain the deepest subtree for the current node so that deep expansion happens
+        as expected.
+        * UserInterface/InspectorBackendCommands.js: Register the new optional `depth` parameter
+        for DOMAgent's .requestChildNodes().
+
+2013-01-07  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Drive by style fix. Add super constructor call to CSSStyleManager.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager):
+        No functional difference, but I just noticed a missing call.
+
+2013-01-07  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12967231> extract-localizable-js-strings should warn about improper WebInspector.UIString uses
+
+        Reviewed by David Kilzer.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        Add missing strings.
+
+        * UserInterface/ApplicationCacheFrameContentView.js:
+        (WebInspector.ApplicationCacheFrameContentView.prototype._updateCallback):
+        Remove a comment containing a UIString call. This is not needed for Safari.
+
+        * UserInterface/DatabaseContentView.js:
+        (WebInspector.DatabaseContentView.prototype._queryError):
+        Use WebInspector.UIString("...").format syntax so the string is not missed.
+
+2013-01-07  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12964366> LayerTreeSidebarPanel._buildLayerInfoSection is too clever for update-safari-localizable-string / extract-localizable-js-strings
+
+        Reviewed by David Kilzer.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel.prototype._buildLayerInfoSection):
+        (WebInspector.LayerTreeSidebarPanel.prototype._updateLayerInfoSection):
+        Ensure all WebInspector.UIString uses contain a string literal, which
+        is what extract-localizable-js-strings expects.
+
+2013-01-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12961674> Resizing QuickConsole drawer may need to refresh CodeMirror editor for new visible size
+
+        The CodeMirror TextEditor only has DOM elements for visible lines, with
+        some buffer. It needs to be updated when the visible (scroll dimensions)
+        of its content area are updated. The content view's dimensions flex with
+        the size of the QuickConsole. So, when the QuickConsole resizes we
+        should update the layout of the content browser.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        (WebInspector._quickConsoleDidResize):
+        Observe when the quick console resizes and update the layout of the content browser.
+
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole.prototype._updateViewContainerSizeAndScrollDivider):
+        (WebInspector.QuickConsole.prototype._isResizing):
+        Whenever we resize we go through this method. Dispatch the resize event.
+        We may take the early path if we are resizing manually, in that case the
+        new height would have been set in the mouse handler.
+
+        * UserInterface/ScriptContentView.js:
+        (WebInspector.ScriptContentView.prototype.updateLayout):
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.prototype.updateLayout):
+        In content views containing text editors be sure to pass update layout
+        on to the text editor to refresh the CodeMirror editor.
+
+2013-01-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12961455> "No Style Properties" text in styles HTML Attributes sidebar should not be monospace
+
+        Adjust the styles for the sidebar so that things look a bit nicer.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style .styles-section):
+        Make the minimum size 17px. This makes the HTML attributes section not
+        look like there is extra padding at the bottom. This also reduces the
+        height of empty sections a bit, saving vertical space.
+
+        * UserInterface/DetailsSection.css:
+        (.details-section > .content > .group > .row.empty.syntax-highlighted):
+        The HTML Attributes section is .syntax-highlighted. Ignore the fonts it
+        sets and revert back to the normal details section font.
+
+        (.details-section > .content > .group > .row.properties:not(.empty)):
+        Remove extra padding on properties sections when its the empty message.
+
+2013-01-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Skip document nodes when searching.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.performSearch.domSearchResults):
+        (WebInspector.ResourceSidebarPanel.prototype.performSearch.domCallback):
+        (WebInspector.ResourceSidebarPanel.prototype.performSearch):
+
+2013-01-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12956057> REGRESSION: Cannot develop nodes in the DOM tree inspector for dynamically-generated content (106080)
+
+        Handle a null ownerDocument to avoid an error. This worked previously
+        because each backend message was dispatched individually via setInterval.
+        Now however, they are batched after a setTimeout so an earlier uncaught
+        exception can break / prevent handling of other messages in that batch.
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype._buildAttributeDOM):
+
+2013-01-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12959910> Uncaught Error in LayerTreeSidebar breaks all right sidebars
+
+        In SidebarPanel.prototype.hidden the parentSidebar might be null. In
+        those cases, LayerTreeSidebarPanel could cause an error that would
+        make changing the right sidebar impossible.
+
+        The error was happening if the sidebar panel was removed instead of
+        being hidden. Removed meaning the content view changes and the sidebar
+        panel is no longer relevant. Hidden meaning the user just switched
+        to a different sidebar panel.
+
+        The fix checks if parentSidebar exists when the panel is being hidden,
+        but we also make sure to remove our event listener if the parentSidebar
+        is being cleared with a new willRemove method.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar.prototype.removeSidebarPanel):
+        * UserInterface/SidebarPanel.js:
+        (WebInspector.SidebarPanel.prototype.willRemove):
+        Give the sidebar panel an opportunity to handle the parentSidebar being cleared.
+
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel.prototype.shown):
+        Assert that there is a parent sidebar when we are shown.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype.hidden):
+        If there is a parent sidebar and we are hidden, the user is just switching
+        sidebars, and we can remove the listener.
+
+        (WebInspector.LayerTreeSidebarPanel.prototype.willRemove):
+        If the parent sidebar is being cleared remove our listener, if it existed.
+
+2013-01-05  Dan Bernstein  <mitz@apple.com>
+
+        Updated localizable strings.
+
+        * Localizations/en.lproj/localizedStrings.js: Let update-safari-localizable-string
+        remove one entry and one empty line.
+
+2012-12-20  Antoine Quint  <graouts@apple.com>
+
+        Add missing localizedString that I forgot in the previous patch for
+        <rdar://problem/12908978> Layer Tree: resize data grid upon width change.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+2012-12-19  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/12908978> Layer Tree: resize data grid upon width change
+
+        Listen to width change events on the parent sidebar as the layer tree panel
+        is shown, and do the opposite operation when it's hidden. Upon a width change,
+        call .autoSizeColumns() on the data grid so that the separators are correctly
+        positioned.
+
+        In this patch we also change the string used to show the paint count from
+        "Paint Count" to "Paints" which makes the data grid look much better.
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel.prototype.shown):
+        (WebInspector.LayerTreeSidebarPanel.prototype.hidden):
+        (WebInspector.LayerTreeSidebarPanel.prototype._widthDidChange):
+        (WebInspector.LayerTreeSidebarPanel.prototype._buildLayerInfoSection):
+        (WebInspector.LayerTreeSidebarPanel.prototype._buildDataGridSection):
+        (WebInspector.LayerTreeSidebarPanel.prototype._updateLayerInfoSection):
+
+2012-12-19  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/12646424> Show redraw counts in layer tree inspector
+
+        Simply add a new "Paint Count" field in the layer info and data grid to display
+        the contents of the .paintCount property provided by the back-end, which had already
+        landed in WebCore with <rdar://problem/12882763>.
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/LayerTreeDataGridNode.js:
+        (WebInspector.LayerTreeDataGridNode.prototype.set layer):
+        * UserInterface/LayerTreeSidebarPanel.js:
+        (WebInspector.LayerTreeSidebarPanel.prototype._buildLayerInfoSection):
+        (WebInspector.LayerTreeSidebarPanel.prototype._buildDataGridSection):
+        (WebInspector.LayerTreeSidebarPanel.prototype._updateLayerInfoSection):
+
+2012-12-19  Antoine Quint  <graouts@apple.com>
+
+        <rdar://problem/12031104> Show which elements are layer-backed
+
+        This is the front-end part of the work started on the backend with
+        https://bugs.webkit.org/show_bug.cgi?id=103513. We now provide a
+        new details sidebar for the inspected element which lists the characteristics
+        of its backing RenderLayer (metrics, amount of memory used and whether it is
+        composited in hardware) and all child RenderLayers, with the option of only
+        showing layers composited in hardware. At the bottom of the pane, we also have
+        a status bar indicating the total number of layers for the selected node and
+        its descendants as well as the total amount of memory used.
+
+        The list of child layers allows the developer to select a node to see it
+        highlighted on the page, and to click an arrow icon to jump to the layer's
+        associated node in the DOM tree.
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/InspectorBackendCommands.js:
+        * UserInterface/LayerTreeDataGridNode.js: Added. DataGridNode custom subclass for the type of data grid nodes
+        we show in the child layers data grid.
+        (WebInspector.LayerTreeDataGridNode):
+        (WebInspector.LayerTreeDataGridNode.prototype.createCellContent):
+        (WebInspector.LayerTreeDataGridNode.prototype.set layer):
+        (WebInspector.LayerTreeDataGridNode.prototype._createNodeCellContent):
+        (WebInspector.LayerTreeDataGridNode.prototype._goToArrowWasClicked):
+        * UserInterface/LayerTreeManager.js: Added.
+        (WebInspector.LayerTreeManager):
+        (WebInspector.LayerTreeManager.prototype.get supported):
+        (WebInspector.LayerTreeManager.prototype.layerTreeMutations): Obtain the complete
+        list of mutations between two flattened layer trees.
+        (WebInspector.LayerTreeManager.prototype.refreshLayerTree): Retrieve the current layer
+        tree from the backend, eventually triggering a layerTreeDidChange event as a result.
+        (WebInspector.LayerTreeManager.prototype.flattenedLayerTree):
+        (WebInspector.LayerTreeManager.prototype.):
+        (WebInspector.LayerTreeManager.prototype.layersForNode): Obtain the layer associated to
+        the provided node, if any, and a list of child layers, if any.
+        (WebInspector.LayerTreeManager.prototype.layerTreeDidChange):
+        (WebInspector.LayerTreeManager.prototype.var):
+        (WebInspector.LayerTreeManager.prototype._obtainNodeIdsForLayerIds): Obtain the node ids
+        for the provided layer ids from the backend.
+        * UserInterface/LayerTreeObserver.js: Added.
+        (WebInspector.LayerTreeObserver): Listen to "layerTreeDidChange" events triggered by the
+        LayerTreeAgent exposed by WebCore.
+        (WebInspector.LayerTreeObserver.prototype.layerTreeDidChange): Inform the layer tree manager
+        that the layer tree has changed.
+        * UserInterface/LayerTreeSidebarPanel.css: Added.
+        * UserInterface/LayerTreeSidebarPanel.js: Added.
+        (WebInspector.LayerTreeSidebarPanel):
+        (WebInspector.LayerTreeSidebarPanel.prototype.shown):
+        (WebInspector.LayerTreeSidebarPanel.prototype.hidden):
+        (WebInspector.LayerTreeSidebarPanel.prototype.refresh):
+        (WebInspector.LayerTreeSidebarPanel.prototype.supportsDOMNode): Element nodes only are supported.
+        (WebInspector.LayerTreeSidebarPanel.prototype._layerTreeDidChange): Event handler for the
+        "layerTreeDidChange" triggered by the layer tree manager.
+        (WebInspector.LayerTreeSidebarPanel.prototype._buildCheckbox): Build the checkbox controlling
+        the option to only show layers composited in hardware.
+        (WebInspector.LayerTreeSidebarPanel.prototype._buildLayerInfoSection): Build the top section
+        containing information about the inspected node's layer, if any.
+        (WebInspector.LayerTreeSidebarPanel.prototype._buildDataGridSection): Build the middle section
+        containing the data grid showing the list of child layers, if any.
+        (WebInspector.LayerTreeSidebarPanel.prototype._buildBottomBar): Build the status bar displayed
+        at the bottom showing the total number of layers for the inspected node and the amount of
+        memory used.
+        (WebInspector.LayerTreeSidebarPanel.prototype._sortDataGrid.comparator):
+        (WebInspector.LayerTreeSidebarPanel.prototype._sortDataGrid):
+        (WebInspector.LayerTreeSidebarPanel.prototype._selectedDataGridNodeChanged):
+        (WebInspector.LayerTreeSidebarPanel.prototype._dataGridGainedFocus):
+        (WebInspector.LayerTreeSidebarPanel.prototype._dataGridLostFocus):
+        (WebInspector.LayerTreeSidebarPanel.prototype._dataGridWasClicked):
+        (WebInspector.LayerTreeSidebarPanel.prototype._highlightSelectedNode):
+        (WebInspector.LayerTreeSidebarPanel.prototype._updateDataGridFilter):
+        (WebInspector.LayerTreeSidebarPanel.prototype._updateDisplayWithLayers): Callback for the call
+        made to .layersForNode() on the manager, triggers an update of all of the information reported
+        in the panel.
+        (WebInspector.LayerTreeSidebarPanel.prototype._updateLayerInfoSection): Update only the top section.
+        (WebInspector.LayerTreeSidebarPanel.prototype._updateDataGrid): Update only the data grid.
+        (WebInspector.LayerTreeSidebarPanel.prototype._dataGridNodeForLayer): Generate a node for the data
+        grid for the provided layer.
+        (WebInspector.LayerTreeSidebarPanel.prototype._updateMetrics): Update only the bottom status bar.
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+
+2012-12-04  Timothy Hatcher  <timothy@apple.com>
+
+        Prevent lines from highlighting again if the user scrolls with a line highlighted.
+
+        This switches off of a webkitAnimationEnd event listener because the line element might
+        be removed if the user scrolls during the animation. In that case webkitAnimationEnd isn't
+        fired, and the line would highlight again the next time it scrolls into view.
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.removeStyleClass): Removed event listener code.
+        (WebInspector.TextEditor.prototype.revealAndHighlightLine): Schedule a timeout instead
+        of an event listener.
+
+2012-12-04  Timothy Hatcher  <timothy@apple.com>
+
+        Delay revealing a line until visible and the line exists.
+
+        This regressed when we switched to CodeMirror.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.set string.update): Call _revealPendingLineIfPossible.
+        (WebInspector.TextEditor.prototype.shown.update): Call _revealPendingLineIfPossible.
+        (WebInspector.TextEditor.prototype._revealPendingLineIfPossible): Store the line number
+        and requested range until visible and the line exists.
+
+2012-12-03  Dean Jackson  <dino@apple.com>
+
+        Followup on <rdar://problem/11492568> Show shadow DOM elements
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: New string for "Shadow Content".
+        * UserInterface/DOMNode.js:
+        (WebInspector.DOMNode): Only create the _shadowRoots if necessary.
+        (WebInspector.DOMNode.prototype.hasChildNodes): Test for existence of _shadowRoots.
+        (WebInspector.DOMNode.prototype.hasShadowRoots): Ditto.
+        (WebInspector.DOMNode.prototype._insertChild): Ditto.
+        (WebInspector.DOMNode.prototype._setChildrenPayload): Ditto.
+        * UserInterface/DOMNodeDetailsSidebarPanel.js:
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype._nodeTypeDisplayName): Handle Document Fragment in switch.
+        * UserInterface/DOMTreeElement.js: Use new UIString.
+        * UserInterface/DOMTreeElementPathComponent.js: Handle Document Fragment in switch.
+        (WebInspector.DOMTreeElementPathComponent):
+
+2012-12-03  Dean Jackson  <dino@apple.com>
+
+        Allow inspection of Shadow DOM elements in Web Inspector
+        <rdar://problem/11492568> Show shadow DOM elements
+
+        Reviewed by Tim Hatcher.
+
+        Add the Shadow DOM fragments to the DOM tree view. This allows
+        us to inspect things like HTML5 Media captions and controls.
+        Expose the setting via a checkbox in the context menu on the DOM
+        tree view (which requires a reload if changed). Luckily the
+        inspector protocol already provided all the Shadow DOM data so
+        this was purely a UI change.
+
+        * Localizations/en.lproj/localizedStrings.js: New menu item.
+        * UserInterface/DOMNode.js:
+        (WebInspector.DOMNode): New parameter to constructor: "isInShadowTree".
+        (WebInspector.DOMNode.prototype.hasChildNodes): Check for shadow children too.
+        (WebInspector.DOMNode.prototype.hasShadowRoots): New method.
+        (WebInspector.DOMNode.prototype.isInShadowTree): New method.
+        (WebInspector.DOMNode.prototype._insertChild): Inherit the shadow state as constructing children.
+        (WebInspector.DOMNode.prototype._setChildrenPayload): Ditto.
+        * UserInterface/DOMObserver.js:
+        (WebInspector.DOMObserver.prototype.shadowRootPushed): Answer the protocol calls.
+        (WebInspector.DOMObserver.prototype.shadowRootPopped): Ditto.
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype._buildTagDOM): Document Fragments get a special style if they are shadow root elements.
+        (WebInspector.DOMTreeElement.prototype._singleTextChild): Return early if in shadow DOM.
+        * UserInterface/DOMTreeManager.js:
+        (WebInspector.DOMTreeManager.prototype._setDocument): Use new parameter when constructing DOMNode.
+        (WebInspector.DOMTreeManager.prototype._setDetachedRoot): Ditto.
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline):
+        (WebInspector.DOMTreeOutline.prototype.populateContextMenu): Add a new checkbox to toggle the Shadow DOM visibility.
+        (WebInspector.DOMTreeOutline.prototype._populateContextMenu):
+        (WebInspector.DOMTreeOutline.prototype._toggleShowShadowDOM):
+        * UserInterface/LogContentView.css:
+        (.webkit-html-fragment.shadow): New style for shadow root fragments.
+
+2012-12-02  Timothy Hatcher  <timothy@apple.com>
+
+        Linkify "src" and "href" attributes in HTML/SVG/XML resources.
+
+        This extends the XML tokenizer to change the style of the string following
+        "src" and "href" attributes into links.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CodeMirrorAdditions.js:
+        (tokenizeLinkString): Added.
+        (tokenizeEndOfLinkString): Added.
+        (extendedXMLToken): Added.
+        * UserInterface/SyntaxHighlightingDefaultTheme.css:
+        (.cm-s-default .cm-link): Added.
+        (.cm-s-default .cm-link:hover): Added.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor): Added click event listener for _openClickedLinks.
+        (WebInspector.TextEditor.prototype._openClickedLinks): Added.
+
+2012-11-30  Timothy Hatcher  <timothy@apple.com>
+
+        Use CodeMirror to syntax highlight strings used for the DOM tree.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/SyntaxHighlightingSupport.js:
+        (WebInspector.syntaxHighlightStringAsDocumentFragment): Use CodeMirror.runMode.
+        (WebInspector.syntaxHighlightStringAsDocumentFragment.appendText): Added. Create nodes based on the style.
+
+2012-11-30  Timothy Hatcher  <timothy@apple.com>
+
+        Use WebInspector.CSSKeywordCompletions instead of WebInspector.SourceTokenizer to decide what
+        is a keyword in the Style details sidebar.
+
+        Reviewed by Jon Honeycutt.
+
+        * UserInterface/StylePropertyTreeElement.js:
+        (WebInspector.StylePropertyTreeElement.prototype.updateTitle): Get the keywords.
+        (WebInspector.StylePropertyTreeElement.prototype.updateTitle.processKeyword): Use the keywords
+        for the current property.
+
+2012-11-30  Timothy Hatcher  <timothy@apple.com>
+
+        Hook up issues using CodeMirror.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/SourceCodeTextEditor.css:
+        (.source-code.text-editor > .CodeMirror .error): Renamed.
+        (.source-code.text-editor > .CodeMirror .warning): Renamed.
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._contentWillPopulate): Moved issue population from here.
+        (WebInspector.SourceCodeTextEditor.prototype._contentDidPopulate): ... to here.
+        (WebInspector.SourceCodeTextEditor.prototype._issueWasAdded): Call _addIssue.
+        (WebInspector.SourceCodeTextEditor.prototype._addIssue): Renamed from _addIssueToLine. Use
+        addStyleClassToLine to add the styles.
+        (WebInspector.SourceCodeTextEditor.prototype._addIssueToLineNumberMap): Merged with _addIssue.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.addStyleClassToLine): Added.
+        (WebInspector.TextEditor.prototype.removeStyleClassFromLine): Added.
+        (WebInspector.TextEditor.prototype.toggleStyleClassForLine): Added.
+
+2012-11-30  Timothy Hatcher  <timothy@apple.com>
+
+        Hook up breakpoints using CodeMirror.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CodeMirrorAdditions.js: Added hasLineClass and toggleLineClass extensions.
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._contentWillPopulate): Call setBreakpointInfoForLine
+        for each breakpoint.
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointInfo): Removed.
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointRemoved): Removed delete here
+        since calling removeBreakpoint will fire an event that causes us to delete the breakpoint.
+        Deleting early was causing an assert in the event handler.
+        * UserInterface/TextEditor.css:
+        (.text-editor > .CodeMirror .has-breakpoint:not(.breakpoint-disabled) .CodeMirror-linenumber): Added.
+        (.text-editor > .CodeMirror .has-breakpoint .CodeMirror-linenumber::before): Added.
+        (.text-editor > .CodeMirror .breakpoint-resolved .CodeMirror-linenumber::before): Added.
+        (.text-editor > .CodeMirror .breakpoint-disabled .CodeMirror-linenumber::before): Added.
+        (.text-editor > .CodeMirror .execution-line .CodeMirror-linenumber::after): Added.
+        (.text-editor > .CodeMirror .execution-line pre): Added.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor): Added "gutterClick" event listener.
+        (WebInspector.TextEditor.prototype.set string):
+        (WebInspector.TextEditor.prototype.set string.updateStyles): Update the execution line and breakpoints
+        now that we might have content for that line.
+        (WebInspector.TextEditor.prototype.get executionLineNumber):
+        (WebInspector.TextEditor.prototype.set executionLineNumber):
+        (WebInspector.TextEditor.prototype.setBreakpointInfoForLine):
+        (WebInspector.TextEditor.prototype._updateExecutionLine): Added.
+        (WebInspector.TextEditor.prototype._addBreakpointToLineWithInfo): Added.
+        (WebInspector.TextEditor.prototype._setBreakpointStylesOnLineWithInfo): Added.
+        (WebInspector.TextEditor.prototype._removeBreakpointFromLine.updateStyles): Added.
+        (WebInspector.TextEditor.prototype._removeBreakpointFromLine): Added.
+        (WebInspector.TextEditor.prototype._gutterMouseDown): Added.
+        (WebInspector.TextEditor.prototype._documentMouseMoved): Added.
+        (WebInspector.TextEditor.prototype._documentMouseUp): Added.
+
+2012-11-30  Timothy Hatcher  <timothy@apple.com>
+
+        Hook up search using CodeMirror.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.customPerformSearch): Move off of textContent and AttributedString.
+        Use addSearchResults instead of the individual addSearchResultRange.
+        * UserInterface/TextEditor.css:
+        (.text-editor .bouncy-highlight): Added.
+        (@-webkit-keyframes text-editor-bouncy): Added.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.performSearch): Create a search cursor.
+        (WebInspector.TextEditor.prototype.performSearch.batchSearch): Use the search cursor to find matches in
+        the slow path. Stop using _textContent.
+        (WebInspector.TextEditor.prototype.addSearchResults): Renamed from addSearchResultRange.
+        (WebInspector.TextEditor.prototype.addSearchResults.markRanges): Added. Mark the ranges in a CodeMirror
+        operation to get better performance.
+        (WebInspector.TextEditor.prototype.searchCleared): Clear the marked text ranges.
+        (WebInspector.TextEditor.prototype.revealPreviousSearchResult): Call _revealSearchResult.
+        (WebInspector.TextEditor.prototype.revealNextSearchResult): Ditto.
+        (WebInspector.TextEditor.prototype.line): Added.
+        (WebInspector.TextEditor.prototype._revealSearchResult): Added.
+        (WebInspector.TextEditor.prototype._revealSearchResult.animationEnded): Added.
+
+2012-11-30  Timothy Hatcher  <timothy@apple.com>
+
+        Hook up the basics of CodeMirror in TextEditor.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorLineContentUpdated): Removed.
+        * UserInterface/SyntaxHighlightingDefaultTheme.css: Added CodeMirror selectors.
+        * UserInterface/TextEditor.css:
+        (.text-editor > .CodeMirror): Added. Reset box-sizing to content-box.
+        (.text-editor > .CodeMirror *): Added. Ditto.
+        (.text-editor > .CodeMirror .CodeMirror-lines): Added.
+        (.text-editor > .CodeMirror pre): Added.
+        (.text-editor > .CodeMirror .CodeMirror-selected): Added.
+        (.text-editor > .CodeMirror .CodeMirror-focused .CodeMirror-selected): Added.
+        (.text-editor > .CodeMirror textarea): Added. Prevent pointer events to make right
+        click Inspect Element hit the line instead of the input area.
+        (.text-editor > .CodeMirror .CodeMirror-gutters): Added.
+        (.text-editor > .CodeMirror .CodeMirror-linenumber): Added.
+        (.text-editor > .CodeMirror .highlighted): Added.
+        (@-webkit-keyframes text-editor-highlight-fadeout):
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor):
+        (WebInspector.TextEditor.prototype.get string):
+        (WebInspector.TextEditor.prototype.set string):
+        (WebInspector.TextEditor.prototype.get selectedTextRange):
+        (WebInspector.TextEditor.prototype.set selectedTextRange):
+        (WebInspector.TextEditor.prototype.get mimeType):
+        (WebInspector.TextEditor.prototype.set mimeType):
+        (WebInspector.TextEditor.prototype.revealLine): Set the cursor position and highlight the line.
+        (WebInspector.TextEditor.prototype.updateLayout): Call refresh to let CodeMirror know we might have changed size.
+        (WebInspector.TextEditor.prototype.shown): Ditto.
+        (WebInspector.TextEditor.prototype._textRangeFromCodeMirrorPosition): Added.
+        (WebInspector.TextEditor.prototype._codeMirrorPositionFromTextRange): Added.
+
+2012-11-30  Timothy Hatcher  <timothy@apple.com>
+
+        Remove TextEditor implementation and supporting classes for syntax highlighting.
+
+        Rubber-stamped by Jon Honeycutt.
+
+        * UserInterface/AttributedString.js: Removed.
+        * UserInterface/CSSSourceTokenizer.js: Removed.
+        * UserInterface/HTMLSourceTokenizer.js: Removed.
+        * UserInterface/JavaScriptSourceTokenizer.js: Removed.
+        * UserInterface/Main.html: Removed deleted files.
+        * UserInterface/ScriptContentView.js:
+        * UserInterface/SourceTokenizer.js: Removed.
+        * UserInterface/SyntaxHighlighter.js: Removed.
+        * UserInterface/SyntaxHighlightingSupport.js:
+        (WebInspector.syntaxHighlightStringAsDocumentFragment): Cleared.
+        * UserInterface/TextContent.js: Removed.
+        * UserInterface/TextEditor.css: Removed most rules.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor): Cleared.
+        (WebInspector.TextEditor.prototype.get string): Cleared.
+        (WebInspector.TextEditor.prototype.set string): Cleared.
+        (WebInspector.TextEditor.prototype.get selectedTextRange): Cleared.
+        (WebInspector.TextEditor.prototype.set selectedTextRange): Cleared.
+        (WebInspector.TextEditor.prototype.get mimeType): Cleared.
+        (WebInspector.TextEditor.prototype.set mimeType): Cleared.
+        (WebInspector.TextEditor.prototype.get executionLineNumber): Cleared.
+        (WebInspector.TextEditor.prototype.set executionLineNumber): Cleared.
+        (WebInspector.TextEditor.prototype.performSearch.batchSearch): Cleared.
+        (WebInspector.TextEditor.prototype.performSearch): Cleared.
+        (WebInspector.TextEditor.prototype.addSearchResultRange): Cleared.
+        (WebInspector.TextEditor.prototype.searchCleared): Cleared.
+        (WebInspector.TextEditor.prototype.revealPreviousSearchResult): Cleared.
+        (WebInspector.TextEditor.prototype.revealNextSearchResult): Cleared.
+        (WebInspector.TextEditor.prototype.revealLine): Cleared.
+        (WebInspector.TextEditor.prototype.updateLayout): Cleared.
+        (WebInspector.TextEditor.prototype.shown): Cleared.
+        (WebInspector.TextEditor.prototype.hidden): Cleared.
+        (WebInspector.TextEditor.prototype.setBreakpointInfoForLine): Cleared.
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.prototype.get scrollableElements): Removed.
+
+2012-11-30  Timothy Hatcher  <timothy@apple.com>
+
+        Extend CodeMirror to allow syntax highlighting styles based on the mode.
+
+        By default CodeMirror defines syntax highlighting styles based on token
+        only and shared styles between modes. This limiting and does not match
+        what we have done in the Web Inspector. So this modifies the XML, CSS
+        and JavaScript modes to supply two styles for each token. One for the
+        token and one with the mode name.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CodeMirrorAdditions.js: Added.
+        * UserInterface/Main.html: Included CodeMirrorAdditions.js.
+
+2012-11-30  Timothy Hatcher  <timothy@apple.com>
+
+        Define extra MIME-types for CodeMirror's syntax highlighting modes.
+
+        Reviewed by Jon Honeycutt.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Define extra MIME-types for XML, HTML, SVG,
+        JSON and JavaScript.
+
+2012-11-30  Timothy Hatcher  <timothy@apple.com>
+
+        Update CodeMirror from 3.0 beta 2 to 3.0 release candidate 2.
+
+        Rubber-stamped by Jon Honeycutt.
+
+        * UserInterface/External/CodeMirror/codemirror.css: Updated.
+        * UserInterface/External/CodeMirror/codemirror.js: Updated.
+        * UserInterface/External/CodeMirror/htmlmixed.js: Updated.
+        * UserInterface/External/CodeMirror/javascript.js: Updated.
+        * UserInterface/External/CodeMirror/matchbrackets.js: Updated.
+        * UserInterface/External/CodeMirror/xml.js: Updated.
+
+2012-11-22  Timothy Hatcher  <timothy@apple.com>
+
+        Fix a perl script error that was preventing resources from being
+        copied on production builds.
+
+        Perl thought the [\t ] that followed $tagExpression meant that
+        tagExpression should be @tagExpression.
+
+        * Scripts/combine-resources.pl:
+        (concatinateFiles): Split the replacementExpression string into parts
+        and concat it to prevent this. Fix a typo too.
+
+2012-11-18  Timothy Hatcher  <timothy@apple.com>
+
+        Include CodeMirror in the Web Inspector.
+
+        This also teaches the scripts we use to copy the CodeMirror resources and skip them
+        when we concatenate our scripts/styles.
+
+        Rubber-stamped by Antoine Quint.
+
+        * Scripts/combine-resources.pl:
+        (concatinateFiles): Skip External files. Smartly replace the first concatenated file's tag
+        so we don't mix the order of style and script loading.
+        * Scripts/copy-user-interface-resources.sh:
+        * UserInterface/Main.html: Included CodeMirror files.
+
+2012-11-18  Timothy Hatcher  <timothy@apple.com>
+
+        Add CodeMirror to the Web Inspector.
+
+        Open Source Software use approved by Joyce Chow on 11/16/2012.
+
+        Part of: <rdar://problem/3143094> Edit-mode for resources (local substation of resources) (16440)
+
+        Rubber-stamped by Antoine Quint.
+
+        * UserInterface/External/CodeMirror/LICENSE: Added.
+        * UserInterface/External/CodeMirror/codemirror.css: Added.
+        * UserInterface/External/CodeMirror/codemirror.js: Added.
+        * UserInterface/External/CodeMirror/css.js: Added.
+        * UserInterface/External/CodeMirror/htmlmixed.js: Added.
+        * UserInterface/External/CodeMirror/javascript.js: Added.
+        * UserInterface/External/CodeMirror/matchbrackets.js: Added.
+        * UserInterface/External/CodeMirror/overlay.js: Added.
+        * UserInterface/External/CodeMirror/runmode.js: Added.
+        * UserInterface/External/CodeMirror/searchcursor.js: Added.
+        * UserInterface/External/CodeMirror/xml.js: Added.
+
+2012-11-17  Timothy Hatcher  <timothy@apple.com>
+
+        Hide the toolbar labels if there isn't enough room to show them.
+
+        Reviewed by Brady Eidson.
+
+        * UserInterface/ButtonToolbarItem.css:
+        (.toolbar.collapsed .item.button > .label): Added.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Added event listener for window resize.
+        (WebInspector._windowResized): Added. Update the toolbar layout.
+        * UserInterface/Toolbar.js:
+        (WebInspector.Toolbar.prototype.set displayMode): Update the toolbar layout.
+        (WebInspector.Toolbar.prototype.set sizeMode): Ditto.
+
+2012-11-17  Timothy Hatcher  <timothy@apple.com>
+
+        Keep toolbar items in constant positions as items are added or removed.
+
+        This keeps centered items in the center and adds the items on the right in reverse
+        order since right most items are more stable as context changes. Also vertically stack
+        the close and undock button if the toolbar is tall enough to fit them.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/ControlToolbarItem.css:
+        (.toolbar .item.control):
+        (.toolbar.small-size .item.control):
+        (.toolbar.icon-only .item.control):
+        (.toolbar .item.control:hover):
+        (.toolbar .item.control:active):
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Use addToolbarItem instead of addNavigationItem. Add the
+        detail sidebar items in reverse order.
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype.addNavigationItem): Added parentElement argument.
+        (WebInspector.NavigationBar.prototype.insertNavigationItem): Added parentElement argument.
+        Use the nextSibling only if it is in the same parent element.
+        (WebInspector.NavigationBar.prototype.removeNavigationItem): Use remove to remove the element.
+        * UserInterface/Toolbar.css:
+        (.toolbar .control-section): Added.
+        (.toolbar.label-only .control-section): Added.
+        (.toolbar .item-section): Added.
+        (.toolbar .item-section:not(.center)): Added.
+        (.toolbar .item-section.left): Added.
+        (.toolbar .item-section.center): Added.
+        (.toolbar .item-section.right): Added.
+        * UserInterface/Toolbar.js:
+        (WebInspector.Toolbar): Create the four sections.
+        (WebInspector.Toolbar.prototype.addToolbarItem): Added.
+        * UserInterface/Utilities.js:
+        (Element.prototype.remove): Added only if the engine does not have it. This is needed
+        for iAd Producer, which uses an older WebKit.
+
+2012-11-17  Timothy Hatcher  <timothy@apple.com>
+
+        Change ".navigation-bar > .item" and ".toolbar > .item" selectors into ".navigation-bar .item"
+        and ".toolbar .item" so we can have intermediary elements between the bar and item.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/ActivateButtonNavigationItem.js:
+        (WebInspector.ActivateButtonNavigationItem.prototype.generateStyleText):
+        * UserInterface/ButtonNavigationItem.css:
+        (.navigation-bar .item.button):
+        (.navigation-bar .item.button > .glyph):
+        (body.window-inactive .navigation-bar .item.button:not(.suppress-emboss) > .glyph):
+        (.navigation-bar .item.button.disabled > .glyph):
+        (body.window-inactive .navigation-bar .item.button.disabled:not(.suppress-emboss) > .glyph):
+        (.navigation-bar .item.button.suppress-emboss > .glyph):
+        (.navigation-bar .item.button.suppress-emboss:active > .glyph):
+        (.navigation-bar .item.button.suppress-emboss.disabled > .glyph):
+        (.navigation-bar .item.button:not(.disabled):not(.radio):not(.suppress-bezel):active):
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem.prototype.generateStyleText):
+        * UserInterface/ButtonToolbarItem.css:
+        (.toolbar .item.button):
+        (.toolbar.icon-and-label-vertical .item.button):
+        (.toolbar.icon-and-label-horizontal .item.button):
+        (.toolbar .item.button > .glyph):
+        (.toolbar.small-size .item.button > .glyph):
+        (.toolbar.label-only .item.button > .glyph):
+        (.toolbar .item.button > .label):
+        (.toolbar.label-only .item.activate.button.activated > .label):
+        (.toolbar.icon-and-label-horizontal .item.button > .label):
+        * UserInterface/ControlToolbarItem.css:
+        (.toolbar .item.control):
+        (.toolbar .item.control:hover):
+        (.toolbar .item.control:active):
+        (.toolbar .item.control > .glyph):
+        (body.window-inactive .toolbar .item.control):
+        (body.window-inactive .toolbar .item.control.disabled):
+        * UserInterface/DividerNavigationItem.css:
+        (.navigation-bar .item.divider):
+        * UserInterface/FlexibleSpaceNavigationItem.css:
+        (.toolbar .item.flexible-space):
+        * UserInterface/NavigationBar.css:
+        (.navigation-bar .item):
+        * UserInterface/RadioButtonNavigationItem.css:
+        (.navigation-bar .item.radio.button):
+        (.navigation-bar.collapsed .item.radio.button):
+        (.navigation-bar .item.radio.button.selected):
+        (.navigation-bar.collapsed .item.radio.button.selected):
+        * UserInterface/RadioButtonNavigationItem.js:
+        (WebInspector.RadioButtonNavigationItem.prototype.generateStyleText):
+        * UserInterface/Toolbar.css:
+        (.toolbar .control-section):
+
+2012-11-17  Timothy Hatcher  <timothy@apple.com>
+
+        Make the close and undock buttons in the docked Web Inspector better match
+        the style of the undock button and the iTunes 11 mini-player controls.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/ControlToolbarItem.css:
+        (.toolbar > .item.control): 50% opacity.
+        (.toolbar > .item.control:hover): Added. 90% opacity.
+        (.toolbar > .item.control:active): Added. 100% opacity.
+        (body.window-inactive .toolbar > .item.control): 35% opacity.
+        (.toolbar > .item.control.disabled): 35% opacity.
+        (body.window-inactive .toolbar > .item.control.disabled): 20% opacity.
+        * UserInterface/Images/Undock.pdf: Rounded the corners a bit.
+
+2012-11-16  Timothy Hatcher  <timothy@apple.com>
+
+        Renamed the Breakpoint sidebar to Debugger and give it a new icon.
+
+        Also removed unused images from previous sidebar panels.
+
+        Reviewed by Brian Weinstein.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/DebuggerSidebarPanel.js: Renamed from WebInspector/UserInterface/BreakpointSidebarPanel.js.
+        (WebInspector.DebuggerSidebarPanel): Updated the keyboard shortcut to be Control-3.
+        * UserInterface/Images/NavigationItemBreakpoint.pdf: Removed.
+        * UserInterface/Images/NavigationItemBug.pdf: Added.
+        * UserInterface/Images/NavigationItemFunction.pdf: Removed.
+        * UserInterface/Images/NavigationItemThreads.pdf: Removed.
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel): Updated the keyboard shortcut to be Control-2.
+        * UserInterface/Main.html: Renamed BreakpointSidebarPanel to DebuggerSidebarPanel.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Ditto.
+        (WebInspector._debuggerDidPause): Ditto.
+
+2012-11-16  Timothy Hatcher  <timothy@apple.com>
+
+        Merge the Debug sidebar panel into Breakpoints sidebar panel.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/BreakpointSidebarPanel.js:
+        (WebInspector.BreakpointSidebarPanel): Added CallFramesDidChange event listener. Create the content tree
+        outline and section for the Call Stack.
+        (WebInspector.BreakpointSidebarPanel.prototype._debuggerCallFramesDidChange): Added.
+        (WebInspector.BreakpointSidebarPanel.prototype._treeElementSelected): Support CallFrameTreeElement.
+        * UserInterface/DebugSidebarPanel.js: Removed.
+        * UserInterface/Main.html: Removed DebugSidebarPanel.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Removed DebugSidebarPanel.
+        (WebInspector._debuggerDidPause): Show the BreakpointSidebarPanel instead.
+
+2012-11-16  Timothy Hatcher  <timothy@apple.com>
+
+        Place breakpoints into a section in preparation of merging the Debug and Breakpoints sidebars.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/BreakpointSidebarPanel.js:
+        (WebInspector.BreakpointSidebarPanel): Store contentTreeOutline as _breakpointsContentTreeOutline.
+        Make a DetailsSection and put the content tree in its only row.
+        (WebInspector.BreakpointSidebarPanel.prototype._addBreakpoint): Use _breakpointsContentTreeOutline.
+        (WebInspector.BreakpointSidebarPanel.prototype._scriptsCleared): Ditto.
+        (WebInspector.BreakpointSidebarPanel.prototype._breakpointRemoved): Ditto.
+
+2012-11-13  Timothy Hatcher  <timothy@apple.com>
+
+        Make dragging the Web Inspector window in the toolbar move the window.
+
+        <rdar://problem/12688599> Should be able to drag to move Web Inspector window from empty parts of toolbar
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Changed mousedown event listener to _toolbarMouseDown.
+        (WebInspector._toolbarMouseDown): Added. Call _moveWindowMouseDown or _dockedResizerMouseDown.
+        (WebInspector._moveWindowMouseDown): Added.
+        (WebInspector._moveWindowMouseDown.toolbarDrag): Added.
+        (WebInspector._moveWindowMouseDown.toolbarDragEnd): Added.
+
+2012-11-13  Jeff Miller  <jeffm@apple.com>
+
+        Regenerated localizedStrings.js, which was out-of-date.
+
+        * Localizations/en.lproj/localizedStrings.js:
+
+2012-11-13  Timothy Hatcher  <timothy@apple.com>
+
+        Disable sub-pixel antialiasing in the Web Inspector toolbar when in window mode.
+
+        This portion of the window has no background (showing the window chrome). So text rendered
+        here does not look good when sub-pixel antialiased.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/Toolbar.css:
+        (body:not(.docked) .toolbar): Added. Set -webkit-font-smoothing: antialiased.
+
+2012-11-12  Timothy Hatcher  <timothy@apple.com>
+
+        Don't show the dock button in the toolbar now that it is in the window title bar.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.setDockingUnavailable): Empty stub now.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Changed the dock toggle into an undock button.
+        (WebInspector.updateDockedState): Removed use of dockToggleButtonNavigationItem.
+        Removed call to _updateDockToggleButtonVisibility.
+        (WebInspector.setDockingUnavailable): Removed.
+        (WebInspector._updateDockToggleButtonVisibility): Removed.
+        (WebInspector._undock): Renamed from _toggleDockedState. Only undock now.
+        (WebInspector._updateDockNavigationItems): Update undockButtonNavigationItem too.
+
+2012-11-11  Timothy Hatcher  <timothy@apple.com>
+
+        Give WebInspector.ContentBrowser the ability to not have back and forward buttons.
+
+        This will be used for the ContentBrowser in the quick console area.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser): Added disableBackForward argument. Don't create the buttons
+        or keyboard shortcuts if disableBackForward is true.
+        (WebInspector.ContentBrowser.prototype._updateBackForwardButtons): Return early if the buttons
+        don't exist and there is nothing to update.
+
+2012-11-11  Timothy Hatcher  <timothy@apple.com>
+
+        Fix some flashing while scrolling the Web Inspector when docked.
+
+        When docked the toolbar isn't transparent, so we can have a background
+        on the body which fixes the flashing. This isn't an issue in when undocked.
+        This also isn't an issue with accelerated composting, which we should turn
+        on for the Inspector in <rdar://problem/12676223>.
+
+        Reviewed by Anders Carlsson.
+
+        * UserInterface/Main.css:
+        (body.docked): Set the background-color to white.
+
+2012-11-11  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an exception that was causing the Web Inspector to fail when trying to debug a script.
+
+        The fact that we don't know about a script in a call frame is really a deeper bug. But this
+        at least makes things gracefully keep working. The deeper issue is <rdar://problem/12679475>.
+
+        <rdar://problem/12676344> Web Inspector gets stuck trying to debug an exception
+
+        Reviewed by Dean Jackson.
+
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager.prototype.debuggerDidPause): Continue if the SourceCodeLocation
+        ended up being null. This prevents an exception later.
+        (WebInspector.DebuggerManager.prototype._sourceCodeLocationFromPayload): Return null if
+        the script was not found.
+
+2012-11-11  Timothy Hatcher  <timothy@apple.com>
+
+        Remove the Log navigation sidebar.
+
+        Create a single LogContentView to be shown for the console. Previous sessions are now shown
+        inline like the quick console (with a divider between them).
+
+        The ultimate goal here is to merge the quick console and the full height console.
+
+        Reviewed by Dean Jackson.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.showConsole): Call WebInspector.showConsoleView.
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView): Add event listeners that were in LogSidebarPanel.
+        (WebInspector.LogContentView.prototype.shown): Removed disabled check.
+        (WebInspector.LogContentView.prototype._sessionsCleared): Added.
+        (WebInspector.LogContentView.prototype._sessionStarted): Added.
+        (WebInspector.LogContentView.prototype._messageAdded): Added.
+        (WebInspector.LogContentView.prototype._previousMessageRepeatCountUpdated): Added.
+        (WebInspector.LogContentView.prototype._handleContextMenuEvent): Removed disabled check.
+        (WebInspector.LogContentView.prototype._activeLogCleared): Ditto.
+        (WebInspector.LogContentView.prototype._clearLog): Ditto.
+        * UserInterface/LogSidebarPanel.js: Removed.
+        * UserInterface/LogTreeElement.js:
+        (WebInspector.LogTreeElement): Change "Current Log" to "Console".
+        * UserInterface/Main.html: Removed LogSidebarPanel.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Removed LogSidebarPanel use. Create a Console toolbar button.
+        Handle the last content cookie for the console.
+        (WebInspector.sidebarPanelForRepresentedObject): Return null for the console.
+        (WebInspector.contentBrowserTreeElementForRepresentedObject): Return the special tree element
+        for the console.
+        (WebInspector.showConsoleView): Added.
+        (WebInspector._updateCurrentContentViewCookie): Set a special cookie for the console view.
+
+2012-11-11  Timothy Hatcher  <timothy@apple.com>
+
+        Add reload and inspect toolbar buttons.
+
+        <rdar://problem/11187904> REGRESSION (Safari 6): Inspect node button should always be available
+
+        Reviewed by Dean Jackson.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView): Removed _inspectModeButtonNavigationItem.
+        (WebInspector.FrameContentView.prototype.get navigationItems): Ditto.
+        * UserInterface/Images/Reload.pdf: Added.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create the reload and inspect toolbar buttons.
+        (WebInspector._inspectModeStateChanged): Added.
+        (WebInspector._toggleInspectMode): Added.
+        (WebInspector._reloadPageClicked): Added.
+
+2012-11-11  Timothy Hatcher  <timothy@apple.com>
+
+        Use sticky positioning for the section headers in the Details sidebar.
+
+        To make this work I had to dynamically generate style rules based on the
+        current height of the toolbar (now that it is dynamic). Kind of gross, but
+        the end result is really nice!
+
+        While I was at it I bumped the height of the headers to 23px to match the
+        other bars. That way when they are at the top everything lines up nicely.
+
+        <rdar://problem/12611547> Consider using sticky positioning for sidebar section headers
+
+        Reviewed by Dean Jackson.
+
+        * UserInterface/DetailsSection.css:
+        (.details-section > .header): Bump the height and padding up.
+        * UserInterface/Main.js:
+        (WebInspector.updateDockedState): Call _updateStickyPostionStyles.
+        (WebInspector._updateStickyPostionStyles): Added.
+        (WebInspector._toolbarDisplayModeDidChange): Call _updateStickyPostionStyles.
+        (WebInspector._toolbarSizeModeDidChange): Ditto.
+        * UserInterface/Utilities.js:
+        (Element.prototype.totalOffsetLeft): Use getBoundingClientRect for better results.
+        (Element.prototype.totalOffsetTop): Ditto.
+
+2012-11-10  Timothy Hatcher  <timothy@apple.com>
+
+        Don't deselect the selected row when refreshing the Network data grid.
+
+        This preserves selection during refreshes that happen while loading the page.
+        It also prevents notifying that the selectionPathComponents changed which causes
+        the details sidebar to refresh and hide because there was no selection.
+
+        <rdar://problem/12603744> Details sidebar auto-closes while trying to read it on a loading page
+
+        Reviewed by Dean Jackson.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView.prototype._selectedNodeChanged): Return early if _ignoreSelectionEvent.
+        (WebInspector.TimelinesContentView.prototype._updatePendingRecordsWithNewBounds): Save and restore the
+        selectedNode if it was refreshed.
+        (WebInspector.TimelinesContentView.prototype._sortCurrentDataGrid): Set _ignoreSelectionEvent while
+        updating the data grid.
+
+2012-11-10  Timothy Hatcher  <timothy@apple.com>
+
+        Don't crossfade the indeterminate progress spinner.
+
+        <rdar://problem/12676407> Web Inspector shouldn't cross-fade its "discrete" spinner
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/IndeterminateProgressSpinner.css:
+        (.indeterminate-progress-spinner): Use -webkit-animation-timing-function: step-start.
+
+2012-11-10  Timothy Hatcher  <timothy@apple.com>
+
+        Prevent the details sidebar from ever being shown empty.
+
+        This removes the setting to auto hide when empty and always hides when empty.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Removed _detailsSidebarAutoHideWhenEmptySetting and start the
+        details sidebar out in the collapsed state.
+        (WebInspector._sidebarCollapsedStateDidChange): Don't remember the collapsed state if
+        _ignoreDetailsSidebarPanelCollapsedEvent is set. This is for ignoring programatic changes.
+        (WebInspector._contentBrowserRepresentedObjectsDidChange): Removed _detailsSidebarAutoHideWhenEmptySetting.
+
+2012-11-10  Timothy Hatcher  <timothy@apple.com>
+
+        Don't draw a background on the toolbar when the window is inactive.
+
+        We want to show through to the window chrome in this case too.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/Toolbar.css:
+        (body.window-inactive .toolbar): Removed background-image.
+
+2012-11-10  Timothy Hatcher  <timothy@apple.com>
+
+        Move the time bar to the bottom so the sidebar elements align with the timelines again.
+
+        Now that the sidebars don't have a navigation bar, everything is shifted higher in the sidebar.
+        This caused a misalignment in the timeline view. The best solution is to move the time bar to the
+        bottom so the timeline overviews line up with the tree elements in the sidebar again. The Profiles
+        sidebar header does not align with the data grid header anymore, but that does not matter as much.
+        Maybe later we can add a summary or zoom slider to sidebar, shifting Profiles down again.
+
+        To make the time bar not be as distracting the background is now white and the markers fade out.
+        The fade points in the direction of the graph, up for the overview and down for the network graph.
+        This prevents the lines from touching since the two time bars are now next to each other.
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/NetworkDataGrid.css:
+        (.network-timeline-decorations > .header):
+        (.network-timeline-decorations > .header > .divider):
+        (.network-timeline-decorations:not(.sort-active) > .header > .divider:last-child):
+        (.network-timeline-decorations > .header > .divider > .label):
+        * UserInterface/TimelineDecorations.css:
+        (.timeline-decorations > .header):
+        (.timeline-decorations > .header > .divider):
+        (.timeline-decorations > .header > .divider:last-child):
+        (.timeline-decorations > .header > .divider > .label):
+        * UserInterface/TimelineOverview.js:
+        (WebInspector.TimelineOverview):
+        * UserInterface/Toolbar.css:
+
+2012-11-10  Timothy Hatcher  <timothy@apple.com>
+
+        Merge the Storage sidebar into the Resources sidebar.
+
+        Most of this is just copied from StorageSidebarPanel with trivial tweaks to work
+        inside of ResourceSidebarPanel.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/ApplicationCacheFrameTreeElement.js:
+        (WebInspector.ApplicationCacheFrameTreeElement.prototype.updateTitles):
+        * UserInterface/InspectorObserver.js:
+        (WebInspector.InspectorObserver.prototype.inspect):
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        (WebInspector.sidebarPanelForRepresentedObject):
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel):
+        (WebInspector.ResourceSidebarPanel.prototype.cookieForContentView):
+        (WebInspector.ResourceSidebarPanel.prototype.showContentViewForCookie.finalizeCookieChecking):
+        (WebInspector.ResourceSidebarPanel.prototype.showContentViewForCookie):
+        (WebInspector.ResourceSidebarPanel.prototype.treeElementForRepresentedObject):
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameDidChange):
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameMainResourceDidChange.delayedWork):
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameMainResourceDidChange):
+        (WebInspector.ResourceSidebarPanel.prototype._scriptWasAdded):
+        (WebInspector.ResourceSidebarPanel.prototype._treeElementSelected):
+        (WebInspector.ResourceSidebarPanel.prototype._domNodeWasInspected):
+        (WebInspector.ResourceSidebarPanel.prototype._checkStorageTreeElementAgainstPendingContentViewCookie):
+        (WebInspector.ResourceSidebarPanel.prototype._domStorageObjectWasAdded):
+        (WebInspector.ResourceSidebarPanel.prototype._domStorageObjectWasInspected):
+        (WebInspector.ResourceSidebarPanel.prototype._databaseWasAdded):
+        (WebInspector.ResourceSidebarPanel.prototype._databaseWasInspected):
+        (WebInspector.ResourceSidebarPanel.prototype._cookieStorageObjectWasAdded):
+        (WebInspector.ResourceSidebarPanel.prototype._frameManifestAdded):
+        (WebInspector.ResourceSidebarPanel.prototype._frameManifestRemoved):
+        (WebInspector.ResourceSidebarPanel.prototype._compareTreeElements):
+        (WebInspector.ResourceSidebarPanel.prototype._addStorageChild):
+        (WebInspector.ResourceSidebarPanel.prototype._storageCleared):
+        * UserInterface/StorageSidebarPanel.js: Removed.
+
+2012-11-09  Timothy Hatcher  <timothy@apple.com>
+
+        Remove the Issues sidebar.
+
+        It might come back in some form in the new Debugger sidebar if there is demand.
+        But it has proven to not be that helpful in its current form.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/IssueIcons.css: Removed.
+        * UserInterface/IssueSidebarPanel.js: Removed.
+        * UserInterface/IssueTreeElement.js: Removed.
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+
+2012-11-09  Timothy Hatcher  <timothy@apple.com>
+
+        Add placeholders to all the search and filter fields in the navigation sidebars.
+
+        <rdar://problem/11113717> Two search-related fields in the Search sidebar is confusing
+
+        Reviewed by Dan Bernstein.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/BreakpointSidebarPanel.js:
+        (WebInspector.BreakpointSidebarPanel):
+        * UserInterface/DebugSidebarPanel.js:
+        (WebInspector.DebugSidebarPanel):
+        * UserInterface/FilterBar.js:
+        (WebInspector.FilterBar.prototype.get placeholder): Added.
+        (WebInspector.FilterBar.prototype.set placeholder): Added.
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel):
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel):
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel):
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel):
+
+2012-11-09  Timothy Hatcher  <timothy@apple.com>
+
+        Merge the Search sidebar into the Resources sidebar.
+
+        Most of this is just copied from SearchSidebarPanel with trivial tweaks to work
+        inside of ResourceSidebarPanel.
+
+        Rubber-stamped by Antoine Quint.
+
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        * UserInterface/ResourceSidebarPanel.css: Added.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel):
+        (WebInspector.ResourceSidebarPanel.prototype.get contentTreeOutlineToAutoPrune):
+        (WebInspector.ResourceSidebarPanel.prototype.treeElementForRepresentedObject):
+        (WebInspector.ResourceSidebarPanel.prototype.performSearch.updateEmptyContentPlaceholderSoon):
+        (WebInspector.ResourceSidebarPanel.prototype.performSearch.updateEmptyContentPlaceholder):
+        (WebInspector.ResourceSidebarPanel.prototype.performSearch.resourceCallback):
+        (WebInspector.ResourceSidebarPanel.prototype.performSearch.resourcesCallback):
+        (WebInspector.ResourceSidebarPanel.prototype.performSearch.domSearchResults):
+        (WebInspector.ResourceSidebarPanel.prototype.performSearch.domCallback):
+        (WebInspector.ResourceSidebarPanel.prototype.performSearch):
+        (WebInspector.ResourceSidebarPanel.prototype._searchFieldChanged):
+        (WebInspector.ResourceSidebarPanel.prototype._searchTreeElementForResource):
+        (WebInspector.ResourceSidebarPanel.prototype._focusSearchField):
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameDidChange):
+        (WebInspector.ResourceSidebarPanel.prototype._scriptWasAdded):
+        (WebInspector.ResourceSidebarPanel.prototype._treeElementSelected):
+        * UserInterface/SearchSidebarPanel.css: Removed.
+        * UserInterface/SearchSidebarPanel.js: Removed.
+
+2012-11-09  Timothy Hatcher  <timothy@apple.com>
+
+        Allow setting the contentTreeOutline of a WebInspector.NavigationSidebarPanel.
+
+        This will allow one sidebar to manage multiple content trees, so we can merge
+        Resources and Search into one.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel): Use createContentTreeOutline.
+        (WebInspector.NavigationSidebarPanel.prototype.get contentTreeOutlineElement): Use .element.
+        (WebInspector.NavigationSidebarPanel.prototype.set contentTreeOutline): Added.
+        (WebInspector.NavigationSidebarPanel.prototype.get contentTreeOutlineToAutoPrune): Added.
+        (WebInspector.NavigationSidebarPanel.prototype.createContentTreeOutline): Added.
+        (WebInspector.NavigationSidebarPanel.prototype.show): Use contentTreeOutlineElement.
+        (WebInspector.NavigationSidebarPanel.prototype._checkForOldResources.delayedWork): Use the
+        new contentTreeOutlineToAutoPrune property.
+        * UserInterface/TreeOutline.js:
+        (TreeOutline): Set .element for public use.
+
+2012-11-09  Nathan de Vries  <ndevries@apple.com>
+
+        Fix for <rdar://problem/11498628> Can inadvertently copy part of the UI
+        when attempting to copy the Full URL of a resource
+
+        Ensure that when a value in the details side pane is triple-tapped to
+        select the whole value, the label from the following row is not included
+        in the selection.
+
+        The table-cell selection issue will be addressed properly in
+        <rdar://problem/12668870> Triple-clicking text within a <div> set to
+        "display: table-cell" selects text outside the cell
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DetailsSectionSimpleRow.js:
+        (WebInspector.DetailsSectionSimpleRow): Add a click handler to the value
+        cell and adjust the selection range on triple-click if it extends beyond
+        the cell.
+
+2012-11-09  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12526413> Compositing borders button does not work for iOS 6 (should be suppressed or dimmed)
+
+        Reviewed by Jon Honeycutt.
+
+        Disable the toggle compositing borders navigation button when debugging
+        an iOS 6 device, which doesn't have backend support for it.
+
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView.prototype._toggleCompositingBorders):
+        (WebInspector.FrameContentView.prototype._updateCompositingBordersButtonToMatchPageSettings):
+
+2012-11-09  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12462428> Make the Safari Curie Web Inspector compatible with iOS 6
+
+        Reviewed by Timothy Hatcher.
+
+        In production builds be sure to copy over resources that are
+        dynamically loaded in the frontend, and aren't explicitly loaded
+        by Main.html.
+
+        * Scripts/copy-user-interface-resources.sh:
+
+2012-11-09  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12462428> Make the Safari Curie Web Inspector compatible with iOS 6
+
+        Reviewed by Timothy Hatcher.
+
+        In this change the inspector frontend will load a backend commands file
+        that is exactly compatible with the backend it is communicating with.
+        When loading the frontend for a remote session the RWI frontend host
+        can suggest a more specific InspectorBackendCommands file to load.
+        For non-remote session, or non-legacy remote session
+        the default InspectorBackendCommands.js file is loaded.
+
+        This approach has some benefits:
+
+          - loading the exact set of backend commands allows backend feature
+            detection by simply checking if the "BackendAgent.<method>" exists.
+            Therefore you immediately get errors if you use a backend agent
+            method without feature detecting it.
+
+          - by having Legacy InspectorBackendCommands files checked in it is
+            easier to see exactly what an older version of iOS supported and
+            when functions were added / removed.
+
+        And drawbacks:
+
+          - if a protocol message changes in some way (renamed params, gains or
+            loses params, reorders params, changes to multiple methods, etc) we
+            may need to do extra work to ensure compatibility with older devices.
+            Like we've already seen with Database SQL handling.
+
+        Timothy Hatcher already addressed all of the iOS 6 protocol changes so far.
+
+        * UserInterface/LoadInspectorBackendCommands.js: Added.
+        Load either the default InspectorBackendCommands.js or the one exposed
+        by InspectorFrontendHost.inspectorBackendCommandsURL() in remote sessions.
+
+        * UserInterface/Main.html:
+        Remove InspectorBackendLegacyCommands, add in LoadInspectorBackendCommands.
+
+        * UserInterface/InspectorBackendLegacyCommands.js: Removed.
+        * UserInterface/Legacy/6.0/InspectorBackendCommands.js: Added.
+        This is the complete InspectorBackendCommands supported by iOS 6.
+
+2012-11-08  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an exception that started happening in the Web Inspector, that broke everything.
+
+        Revision 133862 of WebCore started looking for InspectorFrontendAPI.dispatchMessageAsync.
+        So we need to implement thta method to make things work again. There are a few other
+        methods that needed added to InspectorFrontendAPI too.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.contextMenuItemSelected): Added.
+        (InspectorFrontendAPI.contextMenuCleared): Added.
+        (InspectorFrontendAPI.dispatchMessageAsync): Added.
+        (InspectorFrontendAPI.dispatchMessage): Added.
+
+2012-11-08  Timothy Hatcher  <timothy@apple.com>
+
+        Default to horizontal labels and small icons for the toolbar when docked.
+
+        This also remembers the toolbar modes for docked and undocked if the user changes them.
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Listen for the new toolbar events and create the settings.
+        (WebInspector.updateDockedState): Change the modes using the settings based on docked state.
+        (WebInspector._toolbarDisplayModeDidChange): Added. Store the mode in the setting.
+        (WebInspector._toolbarSizeModeDidChange): Added. Ditto.
+        * UserInterface/Toolbar.js:
+        (WebInspector.Toolbar.prototype.set displayMode): Fire the DisplayModeDidChange event.
+        (WebInspector.Toolbar.prototype.set sizeMode): Fire the SizeModeDidChange event.
+
+2012-11-08  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an exception that was preventing console expression from evaluating.
+
+        This exposed a deeper issue where we were not using the origin property for DOM storage
+        objects and still looking for the host property.
+
+        There also seems to be a backend issue where local storage is showing up twice.
+        https://bugs.webkit.org/show_bug.cgi?id=101643
+
+        <rdar://problem/12656188> Can't evaluate expressions in the console on this npr.org page
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/DOMStorageObserver.js:
+        (WebInspector.DOMStorageObserver.prototype.addDOMStorage): Look for origin and parse
+        the host out of it since our code still expects the host.
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel.prototype._compareTreeElementsByMainTitle): Assert
+        that the mainTitle is not empty/null/undefined. Handle it anyway just in case.
+
+2012-11-08  Timothy Hatcher  <timothy@apple.com>
+
+        Update the Web Inspector strings for all the string changes in the last few revisions.
+
+        Part of:
+        <rdar://problem/10947541> Navigation bar buttons are too small
+        <rdar://problem/12294575> Navigation bar button icons are difficult to identify
+        <rdar://problem/12589291> Navigation bar buttons are unlabeled
+
+        Reviewed by Ricky Mondello.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+
+2012-11-08  Timothy Hatcher  <timothy@apple.com>
+
+        Add the sidebar panel toolbar items and dock controls to the toolbar.
+
+        Part of:
+        <rdar://problem/10947541> Navigation bar buttons are too small
+        <rdar://problem/12294575> Navigation bar button icons are difficult to identify
+        <rdar://problem/12589291> Navigation bar buttons are unlabeled
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        (WebInspector._updateDockToggleButtonVisibility):
+        (WebInspector._updateDockNavigationItems):
+        (WebInspector._contentBrowserRepresentedObjectsDidChange):
+
+2012-11-08  Timothy Hatcher  <timothy@apple.com>
+
+        Remove the toggle sidebar buttons and keyboard shortcuts.
+
+        Part of:
+        <rdar://problem/10947541> Navigation bar buttons are too small
+        <rdar://problem/12294575> Navigation bar button icons are difficult to identify
+        <rdar://problem/12589291> Navigation bar buttons are unlabeled
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        (WebInspector._navigationSidebarPanelSelected):
+
+2012-11-08  Timothy Hatcher  <timothy@apple.com>
+
+        Don't have sidebars manage and display a NavigationBar anymore.
+
+        This removes the navigation bar from Sidebar and makes each SidebarPanel have a toolbar item instead.
+        To work with the toolbar item the display names and tooltips have been tweaked. The toolbar items
+        are not used in the toolbar yet.
+
+        Part of:
+        <rdar://problem/10947541> Navigation bar buttons are too small
+        <rdar://problem/12294575> Navigation bar button icons are difficult to identify
+        <rdar://problem/12589291> Navigation bar buttons are unlabeled
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/AppearanceDetailsSidebarPanel.js:
+        (WebInspector.AppearanceDetailsSidebarPanel):
+        * UserInterface/ApplicationCacheDetailsSidebarPanel.js:
+        (WebInspector.ApplicationCacheDetailsSidebarPanel):
+        * UserInterface/BreakpointSidebarPanel.js:
+        (WebInspector.BreakpointSidebarPanel):
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel):
+        * UserInterface/DOMNodeDetailsSidebarPanel.js:
+        (WebInspector.DOMNodeDetailsSidebarPanel):
+        * UserInterface/DebugSidebarPanel.js:
+        (WebInspector.DebugSidebarPanel):
+        * UserInterface/DetailsSidebarPanel.js:
+        (WebInspector.DetailsSidebarPanel):
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel):
+        * UserInterface/IssueSidebarPanel.js:
+        (WebInspector.IssueSidebarPanel):
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel):
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel):
+        (WebInspector.NavigationSidebarPanel.prototype.showEmptyContentPlaceholder):
+        (WebInspector.NavigationSidebarPanel.prototype.hideEmptyContentPlaceholder):
+        (WebInspector.NavigationSidebarPanel.prototype.updateEmptyContentPlaceholder):
+        (WebInspector.NavigationSidebarPanel.prototype.shown):
+        (WebInspector.NavigationSidebarPanel.prototype.hidden):
+        (WebInspector.NavigationSidebarPanel.prototype._updateToolbarItemVisibility):
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel):
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel):
+        * UserInterface/ScopeChainDetailsSidebarPanel.js:
+        (WebInspector.ScopeChainDetailsSidebarPanel):
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel):
+        * UserInterface/Sidebar.css:
+        (.sidebar > .panel):
+        (.sidebar.right):
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar):
+        (WebInspector.Sidebar.prototype.addSidebarPanel):
+        (WebInspector.Sidebar.prototype.removeSidebarPanel):
+        (WebInspector.Sidebar.prototype.set selectedSidebarPanel):
+        (WebInspector.Sidebar.prototype.get minimumWidth):
+        (WebInspector.Sidebar.prototype.set width):
+        (WebInspector.Sidebar.prototype.set collapsed):
+        * UserInterface/SidebarPanel.js:
+        (WebInspector.SidebarPanel):
+        (WebInspector.SidebarPanel.prototype.get toolbarItem):
+        (WebInspector.SidebarPanel.prototype.get visible):
+        (WebInspector.SidebarPanel.prototype.hide):
+        (WebInspector.SidebarPanel.prototype.toggle):
+        (WebInspector.SidebarPanel.prototype.added):
+        (WebInspector.SidebarPanel.prototype.removed):
+        (WebInspector.SidebarPanel.prototype.hidden):
+        (WebInspector.SidebarPanel.prototype.visibilityDidChange):
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel):
+
+2012-11-08  Timothy Hatcher  <timothy@apple.com>
+
+        Rename the QuickConsole toolbar style class so it does not conflict with the new Toolbar class.
+
+        Part of:
+        <rdar://problem/10947541> Navigation bar buttons are too small
+        <rdar://problem/12294575> Navigation bar button icons are difficult to identify
+        <rdar://problem/12589291> Navigation bar buttons are unlabeled
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/QuickConsole.css:
+        (.quick-console > .quick-console-toolbar):
+        (.quick-console > .quick-console-toolbar > .text-prompt):
+        (.quick-console > .quick-console-toolbar > .navigation-bar-container):
+        (.quick-console > .quick-console-toolbar > .navigation-bar-container > .navigation-bar-spacer):
+        (.quick-console > .quick-console-toolbar > .navigation-bar-container > .navigation-bar):
+        (.quick-console > .quick-console-toolbar.scroll-divider):
+        (.quick-console > .quick-console-toolbar > .text-prompt > .javascript-prompt):
+        * UserInterface/QuickConsole.js:
+
+2012-11-08  Timothy Hatcher  <timothy@apple.com>
+
+        Add a toolbar class and toolbar item classes to the Web Inspector.
+
+        The toolbar and item inherits most of the functionality from the existing NavigationBar and ButtonNavigationItem.
+        This also makes the toolbar be the resize area when docked. No items are added to the toolbar yet.
+
+        Part of:
+        <rdar://problem/10947541> Navigation bar buttons are too small
+        <rdar://problem/12294575> Navigation bar button icons are difficult to identify
+        <rdar://problem/12589291> Navigation bar buttons are unlabeled
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/ActivateButtonToolbarItem.js: Added.
+        (WebInspector.ActivateButtonToolbarItem):
+        (WebInspector.ActivateButtonToolbarItem.prototype.get label):
+        (WebInspector.ActivateButtonToolbarItem.prototype.set label):
+        * UserInterface/ButtonToolbarItem.css: Added.
+        (.toolbar > .item.button):
+        (.toolbar.icon-and-label-vertical > .item.button):
+        (.toolbar.icon-and-label-horizontal > .item.button):
+        (.toolbar > .item.button > .glyph):
+        (.toolbar.small-size > .item.button > .glyph):
+        (.toolbar.label-only > .item.button > .glyph):
+        (.toolbar > .item.button > .label):
+        (.toolbar.label-only > .item.activate.button.activated > .label):
+        (.toolbar.icon-and-label-horizontal > .item.button > .label):
+        (.toolbar.icon-only > .item.button > .label):
+        (body.window-inactive .toolbar > .item.button):
+        (.toolbar > .item.button.disabled):
+        (body.window-inactive .toolbar > .item.button.disabled):
+        * UserInterface/ButtonToolbarItem.js: Added.
+        (WebInspector.ButtonToolbarItem):
+        (WebInspector.ButtonToolbarItem.prototype.get label):
+        (WebInspector.ButtonToolbarItem.prototype.set label):
+        * UserInterface/ControlToolbarItem.css: Added.
+        (.toolbar > .item.control):
+        (.toolbar.icon-and-label-vertical > .item.control):
+        (.toolbar > .item.control:not(.hidden) + .item.control):
+        (.toolbar > .item.control > .glyph):
+        (body.window-inactive .toolbar > .item.control > .glyph):
+        (.toolbar > .item.control.disabled > .glyph):
+        (body.window-inactive .toolbar > .item.control.disabled > .glyph):
+        * UserInterface/ControlToolbarItem.js: Added.
+        (WebInspector.ControlToolbarItem):
+        * UserInterface/Main.css:
+        (body):
+        (#toolbar):
+        (body.docked #toolbar):
+        (body.docked #toolbar .item:not(.flexible-space)):
+        (#main):
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        (WebInspector._reloadPageIgnoringCache):
+        (WebInspector._copy):
+        * UserInterface/ToggleControlToolbarItem.js: Added.
+        (WebInspector.ToggleControlToolbarItem):
+        * UserInterface/Toolbar.css: Added.
+        (.toolbar):
+        (.toolbar.icon-and-label-vertical):
+        (.toolbar.icon-and-label-vertical.small-size):
+        (.toolbar.icon-only):
+        (.toolbar.label-only):
+        (body.docked .toolbar):
+        (body.window-inactive .toolbar):
+        (.toolbar > .item):
+        * UserInterface/Toolbar.js: Added.
+        (WebInspector.Toolbar):
+        (WebInspector.Toolbar.prototype.get displayMode):
+        (WebInspector.Toolbar.prototype.set displayMode):
+        (WebInspector.Toolbar.prototype.get sizeMode):
+        (WebInspector.Toolbar.prototype.set sizeMode):
+        (WebInspector.Toolbar.prototype._handleContextMenuEvent):
+        (WebInspector.Toolbar.prototype._changeDisplayMode):
+        (WebInspector.Toolbar.prototype._toggleSmallIcons):
+
+2012-11-07  Timothy Hatcher  <timothy@apple.com>
+
+        Make the Web Inspector correctly reflect the docked state again.
+
+        The query parameter changed in r133393. The front-end needs to look for the
+        new dockSide parameter instead of docked.
+
+        Reviewed by Jon Honeycutt.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Look for dockSide === "bottom".
+
+2012-11-05  Timothy Hatcher  <timothy@apple.com>
+
+        Change the point to inspect button icon from a hand to a crosshair.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView): Use Crosshair.pdf instead of Hand.pdf.
+        * UserInterface/Images/Crosshair.pdf: Added.
+        * UserInterface/Images/Hand.pdf: Removed.
+
+2012-11-04  Timothy Hatcher  <timothy@apple.com>
+
+        Fix the line numbers in the JavaScript & Events timeline; make them 0-based.
+
+        The rest of the Web Inspector expects 0-based line numbers. But the line numbers in the
+        JavaScript & Events timeline come in 1-based. We were displaying them correctly before,
+        but clicking the go-to arrow would instead highlight the next line in the source.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ScriptTimelineDataGridNode.js:
+        (WebInspector.ScriptTimelineDataGridNode.prototype.createCellContent): Correctly display the now
+        0-based line number. Also add the line number to the tooltip to match what we do elsewhere.
+        (WebInspector.ScriptTimelineDataGridNode.prototype._goToResource): Only pass the lineNumber if it
+        isn't the first line.
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype.eventRecorded.processRecord): Subtract 1 from the line numbers
+        coming in over the protocol before using them elsewhere in the Inspector.
+
+2012-11-04  Timothy Hatcher  <timothy@apple.com>
+
+        Rename ContentView.keepElementsScrolledToTheBottom to ContentView.shouldKeepElementsScrolledToBottom.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView.prototype.get shouldKeepElementsScrolledToBottom):
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer.prototype._saveScrollPositionsForContentView):
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype.get shouldKeepElementsScrolledToBottom):
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView.prototype.get shouldKeepElementsScrolledToBottom):
+
+2012-11-04  Timothy Hatcher  <timothy@apple.com>
+
+        Save and restore the timeline scroll positions when going back and forth between views.
+
+        Reviewed by Dan Bernstein and Joseph Pecoraro.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView.prototype.showTimelineForRecordType): Save and restore
+        the scroll position when swapping the DataGrids.
+        (WebInspector.TimelinesContentView.prototype.get scrollableElements): Added.
+        (WebInspector.TimelinesContentView.prototype.get keepElementsScrolledToTheBottom): Added.
+
+2012-11-04  Timothy Hatcher  <timothy@apple.com>
+
+        Show the Initiator for the layout and style events in the Layout and Rendering timeline.
+
+        This removes the Area column to make room.
+
+        <rdar://problem/10935408> PARITY (WebKit Web Inspector): Add initiator information to the timeline
+        data grids (e.g. JS stacks for RecalcStyle, Layout and Painting)
+
+        Reviewed by Ricky Mondello and Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/CallFrame.js:
+        (WebInspector.CallFrame): Added nativeCode parameter. Allow more null parameters in asserts.
+        (WebInspector.CallFrame.prototype.get nativeCode): Ditto.
+        * UserInterface/LayoutTimelineDataGridNode.js:
+        (WebInspector.LayoutTimelineDataGridNode.prototype.createCellContent): Removed "area" and added
+        "initiatorCallFrame" support.
+        * UserInterface/LayoutTimelineRecord.js:
+        (WebInspector.LayoutTimelineRecord): Added callFrames parameter.
+        (WebInspector.LayoutTimelineRecord.prototype.get callFrames): Added.
+        (WebInspector.LayoutTimelineRecord.prototype.get initiatorCallFrame): Added.
+        * UserInterface/Main.js:
+        (WebInspector.createSourceCodeLocationLink): Added helper.
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype.eventRecorded.processRecord): Build CallFrames from the
+        record stack trace.
+        (WebInspector.TimelineManager.prototype._callFramesFromPayload): Added.
+        (WebInspector.TimelineManager.prototype._callFramesFromPayload.createCallFrame): Added.
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .data-grid td .subtitle): Added.
+        (.content-view.timelines > .data-grid:focus tr.selected td .subtitle): Added.
+        (.content-view.timelines > .data-grid td .icon): Simplified selector to work with any column.
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView): Added Initiator column.
+        (WebInspector.TimelinesContentView.prototype._sortComparator): Added support for comparing CallFrame.
+
+2012-11-03  Timothy Hatcher  <timothy@apple.com>
+
+        Rename ScriptLocation to SourceCodeLocation so it can be reused for more generic stack traces.
+
+        Rubber-stamped by Dan Bernstein.
+
+        * UserInterface/CallFrame.js:
+        (WebInspector.CallFrame):
+        (WebInspector.CallFrame.prototype.get sourceCodeLocation):
+        * UserInterface/CallFrameTreeElement.js:
+        (WebInspector.CallFrameTreeElement):
+        * UserInterface/DebugSidebarPanel.js:
+        (WebInspector.DebugSidebarPanel.prototype._treeElementSelected):
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager.prototype.debuggerDidPause):
+        (WebInspector.DebuggerManager.prototype._sourceCodeLocationFromPayload):
+        * UserInterface/Main.html:
+        * UserInterface/SourceCodeLocation.js: Renamed from WebInspector/UserInterface/ScriptLocation.js.
+        (WebInspector.SourceCodeLocation):
+        (WebInspector.SourceCodeLocation.prototype.get sourceCode):
+        (WebInspector.SourceCodeLocation.prototype.get lineNumber):
+        (WebInspector.SourceCodeLocation.prototype.get columnNumber):
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._activeCallFrameDidChange):
+        (WebInspector.SourceCodeTextEditor.prototype._matchesSourceCodeLocation):
+
+2012-11-03  Timothy Hatcher  <timothy@apple.com>
+
+        Start showing "Invalidate Styles" and "Invalidate Layout" in the Layout and Rendering timeline.
+
+        These records will be the one showing the initiator (back trace) information.
+
+        Part of: <rdar://problem/10935408> PARITY (WebKit Web Inspector): Add initiator information to the timeline
+        data grids (e.g. JS stacks for RecalcStyle, Layout and Painting)
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/LayoutTimelineRecord.js:
+        (WebInspector.LayoutTimelineRecord.EventType.displayName): Support InvalidateStyles and InvalidateLayout.
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype.eventRecorded.processRecord): Handle "ScheduleStyleRecalculation"
+        and "InvalidateLayout" and create records for them.
+
+2012-11-03  Timothy Hatcher  <timothy@apple.com>
+
+        Round width and height in the metrics sidebar to the nearest hundredth.
+
+        Width and height were missed when the other metrics started to be rounded. This also fixes
+        editing by using the unrounded value instead of keeping the tilde. Also append "px" when
+        updating the style if there is a decimal value.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/BoxModelDetailsSectionRow.js:
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createElement): Added. Moved from
+        the createBoxPartElement function.
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createBoxPartElement): Use createElement.
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createContentAreaWidthElement): Renamed
+        from getContentAreaWidthPx. Use createElement.
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics.createContentAreaHeightElement): Renamed
+        from getContentAreaHeightPx. Use createElement.
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics): Use createContentAreaWidthElement
+        and createContentAreaHeightElement instead.
+        (WebInspector.BoxModelDetailsSectionRow.prototype._startEditing): If the target element has a title use
+        it as the editing value since the current text is likely truncated/rounded.
+        (WebInspector.BoxModelDetailsSectionRow.prototype._applyUserInput): Account for decimals values.
+
+2012-11-03  Timothy Hatcher  <timothy@apple.com>
+
+        Clear the quick console when navigating to another page.
+
+        When reloading the same page we insert a divider.
+
+        <rdar://problem/11194811> Quick Console does not clear on navigation/refresh
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ConsoleGroup.js:
+        (WebInspector.ConsoleGroup): Added newSession parameter and style class.
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController): Removed group creation and call startNewSession.
+        (WebInspector.JavaScriptLogViewController.prototype.clear): Call startNewSession passing true.
+        (WebInspector.JavaScriptLogViewController.prototype.startNewSession): Added. Moved parts
+        from clear and the constructor.
+        * UserInterface/LogContentView.css:
+        (.console-messages > .console-group:last-of-type .console-user-command): Added.
+        (.console-message, .console-user-command): Removed border-bottom.
+        (.console-message:not(:last-child), .console-user-command:not(:last-child)): Added.
+        (.console-group:not(:first-child)): Added.
+        (.console-group.new-session): Added.
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype._activeLogCleared): Check isWaitingForResult
+        to make sure this was the console that requested the clear.
+        * UserInterface/QuickConsole.css:
+        (.quick-console > .toolbar): Added shadow to look like a border on the toolbar. This
+        is needed now that the last console message does not have a bottom-border.
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole):
+        (WebInspector.QuickConsole.prototype.didClearMessages): Clear _lastMessage and _lastMessageIgnored.
+        (WebInspector.QuickConsole.prototype._activeLogCleared): Check isWaitingForResult
+        to make sure this was the console that requested the clear.
+        (WebInspector.QuickConsole.prototype._previousMessageRepeatCountUpdated):
+        (WebInspector.QuickConsole.prototype._logsCleared): Added.
+        (WebInspector.QuickConsole.prototype._sessionStarted): Added.
+
+2012-10-31  Timothy Hatcher  <timothy@apple.com>
+
+        Don't show 'undefined' in the console after sending the clear() command.
+
+        Reviewed by Ada Chan.
+
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController): Set _cleared to true.
+        (WebInspector.JavaScriptLogViewController.prototype.clear): Ditto.
+        (WebInspector.JavaScriptLogViewController.prototype.printResult): Return early if _cleared.
+        (WebInspector.JavaScriptLogViewController.prototype._appendConsoleMessage): Set _cleared to false.
+
+2012-10-31  Timothy Hatcher  <timothy@apple.com>
+
+        Allow independently clearing either the log view or the quick console.
+
+        This fixes up the clearing process and mostly decouples it from LogManager.
+        The ActiveLogCleared event is now only used to honor the clear() command.
+        This also adds the Clear Log context menu item to the Quick Console.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController.prototype.clear): Focus the prompt
+        and call the new didClearMessages delegate function.
+        (WebInspector.JavaScriptLogViewController.prototype._requestClearMessages): Removed.
+        (WebInspector.JavaScriptLogViewController.prototype._promptKeyDown): Call clear
+        instead of _requestClearMessages.
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype.didClearMessages): Added. Tell LogManager.
+        (WebInspector.LogContentView.prototype._activeLogCleared): Only clear this log if
+        it is being used at the time.
+        (WebInspector.LogContentView.prototype._clearLog): Call clear instead of requestClearMessages.
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole.prototype.didClearMessages): Added.
+        (WebInspector.QuickConsole.prototype.didAppendConsoleMessage): Set _cleared to false.
+        (WebInspector.QuickConsole.prototype._viewContainerHandleContextMenuEvent): Added Clear Log
+        context menu item.
+        (WebInspector.QuickConsole.prototype._clearLog): Added.
+        (WebInspector.QuickConsole.prototype._activeLogCleared): Only clear this log if it is
+        being used at the time. Move code from here to didClearMessages.
+        (WebInspector.QuickConsole.prototype._messageAdded): Even if we show the message,
+        remember it in case we get an updated repeat count later.
+        (WebInspector.QuickConsole.prototype._previousMessageRepeatCountUpdated):
+
+2012-10-31  Timothy Hatcher  <timothy@apple.com>
+
+        Add an option to make the Quick Console only show messages while actively debugging.
+
+        This adds a context menu item to toggle the option. When "Always Show Console Messages"
+        is unchecked then console messages will only show when evaluating and expression or
+        stepping through code in the debugger. The default is to always show messages.
+
+        <rdar://problem/11194915> REGRESSION (Safari 6): Console messages are not echoed to Quick Console
+
+        Reviewed by Brian Weinstein.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController.prototype.isWaitingForResult): Added.
+        (WebInspector.JavaScriptLogViewController.prototype._appendCommand): Set _waitingForResult.
+        (WebInspector.JavaScriptLogViewController.prototype._appendCommand.printResult): Clear _waitingForResult.
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole): Added event listeners for the contextmenu event.
+        (WebInspector.QuickConsole.prototype._viewContainerHandleContextMenuEvent): Added. Create and
+        show the context menu with the new option.
+        (WebInspector.QuickConsole.prototype._toggleAlwaysShowConsoleMessages): Added. Toggle the setting.
+        (WebInspector.QuickConsole.prototype._activeLogCleared): Clear the ignored emssage.
+        (WebInspector.QuickConsole.prototype._shouldAddNewMessage): Added.
+        (WebInspector.QuickConsole.prototype._messageAdded): Check _shouldAddNewMessage before appending.
+        Squirrel away the ignored message incase we need to show it later.
+        (WebInspector.QuickConsole.prototype._previousMessageRepeatCountUpdated): Check _shouldAddNewMessage.
+        Appended the squirreled away the ignored message first.
+
+2012-10-30  Timothy Hatcher  <timothy@apple.com>
+
+        Remember and restore the console history between page reloads and Web Inspector sessions.
+
+        <rdar://problem/11343640> REGRESSION (Safari 6): Log panel console history of commands
+        (up/down arrows) lost after page navigation
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController): Create the setting and initialize the prompt.
+        (WebInspector.JavaScriptLogViewController.prototype.printResult): Update the history setting
+        with the last 30 commands.
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView): Pass a history setting identifier.
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole): Ditto.
+
+2012-10-30  Timothy Hatcher  <timothy@apple.com>
+
+        Echo console messages to the Web Inspector's quick console.
+
+        <rdar://problem/11194915> REGRESSION (Safari 6): Console messages are not echoed to Quick Console
+
+        Reviewed by Ada Chan.
+
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole): Listen for MessageAdded and PreviousMessageRepeatCountUpdated.
+        (WebInspector.QuickConsole.prototype.didAppendConsoleMessage): Only auto expand and scroll down
+        for result messages.
+        (WebInspector.QuickConsole.prototype._messageAdded): Added. Call through.
+        (WebInspector.QuickConsole.prototype._previousMessageRepeatCountUpdated): Added. Call through.
+
+2012-10-30  Timothy Hatcher  <timothy@apple.com>
+
+        Make JavaScriptLogViewController keep track of the previous message and repeat counts.
+
+        Part of: <rdar://problem/11194915> REGRESSION (Safari 6): Console messages are not echoed to Quick Console
+
+        Reviewed by Ada Chan.
+
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController): Don't store _messages, it wasn't used. Added _previousMessage
+        and _repeatCountWasInterrupted.
+        (WebInspector.JavaScriptLogViewController.prototype.clear): Reset _previousMessage and _repeatCountWasInterrupted.
+        (WebInspector.JavaScriptLogViewController.prototype.appendConsoleMessage): Clone the message since there might be
+        multiple clients using the message, and since the message has a DOM element it can't be two places at once.
+        (WebInspector.JavaScriptLogViewController.prototype.updatePreviousMessageRepeatCount): Added. Moved from LogManager.
+        (WebInspector.JavaScriptLogViewController.prototype._appendCommand): Pass true to _appendConsoleMessage to set the
+        _repeatCountWasInterrupted flag and not set _previousMessage.
+        (WebInspector.JavaScriptLogViewController.prototype._appendCommand.printResult): Ditto.
+        (WebInspector.JavaScriptLogViewController.prototype._appendConsoleMessage): Set _repeatCountWasInterrupted and only
+        set _previousMessage when repeatCountWasInterrupted is false. Don't store _messages, it wasn't used.
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype.updatePreviousMessageRepeatCount): Added. Call through.
+        * UserInterface/LogManager.js:
+        (WebInspector.LogManager): Remove initialize call.
+        (WebInspector.LogManager.prototype.initialize): Removed. Not needed.
+        (WebInspector.LogManager.prototype.messageWasAdded): Dispatch the message in an object, not as data directly.
+        Assert the message was not used directly, it should be cloned.
+        (WebInspector.LogManager.prototype.messagesCleared): Removed call to initialize.
+        (WebInspector.LogManager.prototype.messageRepeatCountUpdated): MOved to JavaScriptLogViewController.
+        Fire PreviousMessageRepeatCountUpdated event instead.
+        (WebInspector.LogManager.prototype._mainResourceDidChange): Removed initialize call.
+        (WebInspector.LogManager.prototype._addMessage): Removed.
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel): Added event listener for PreviousMessageRepeatCountUpdated.
+        (WebInspector.LogSidebarPanel.prototype._messageAdded): Get message off data object. Update comment.
+        (WebInspector.LogSidebarPanel.prototype._previousMessageRepeatCountUpdated): Added. Call through to current view.
+
+2012-10-30  Timothy Hatcher  <timothy@apple.com>
+
+        Change the icons for Debug, Storage and Log navigators.
+
+        This also renamed Debug Navigator to Call Stack Navigator and moved
+        it and Issue to the end of the list since they are not always visible.
+        I updated the keyboard shortcut numbers to match the new order.
+
+        For better balance, I updated the Breakpoint and Issue icons.
+
+        To help clarify these navigation items I added "Navigator" or "Details"
+        to the tooltips, so they are no longer just singular word tooltips.
+
+        <rdar://problem/11991020> Debug icon is unintuitive, consider a new icon
+        <rdar://problem/12598939> Storage icon is unintuitive, consider a new icon
+        <rdar://problem/12596756> Log icon is unintuitive, consider a new icon
+
+        Reviewed by Conrad Shultz.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/AppearanceDetailsSidebarPanel.js:
+        (WebInspector.AppearanceDetailsSidebarPanel):
+        * UserInterface/ApplicationCacheDetailsSidebarPanel.js:
+        (WebInspector.ApplicationCacheDetailsSidebarPanel):
+        * UserInterface/BreakpointSidebarPanel.js:
+        (WebInspector.BreakpointSidebarPanel):
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel):
+        * UserInterface/DOMNodeDetailsSidebarPanel.js:
+        (WebInspector.DOMNodeDetailsSidebarPanel):
+        * UserInterface/DebugSidebarPanel.js:
+        (WebInspector.DebugSidebarPanel):
+        * UserInterface/Images/NavigationItemBreakpoint.pdf: Changed.
+        * UserInterface/Images/NavigationItemFunction.pdf: Added.
+        * UserInterface/Images/NavigationItemLog.pdf: Changed.
+        * UserInterface/Images/NavigationItemStorage.pdf: Changed.
+        * UserInterface/Images/NavigationItemWarning.pdf: Changed.
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel):
+        * UserInterface/IssueSidebarPanel.js:
+        (WebInspector.IssueSidebarPanel):
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel):
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel):
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel):
+        * UserInterface/ScopeChainDetailsSidebarPanel.js:
+        (WebInspector.ScopeChainDetailsSidebarPanel):
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel):
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel):
+
+2012-10-28  Mark Rowe  <mrowe@apple.com>
+
+        Remove references to unsupported OS and Xcode versions.
+
+        Reviewed by Dan Bernstein.
+
+        * Configurations/Base.xcconfig:
+        * Configurations/CompilerVersion.xcconfig: Removed.
+        * WebInspectorUI.xcodeproj/project.pbxproj: Remove reference to CompilerVersion.xcconfig.
+
+2012-10-29  Timothy Hatcher  <timothy@apple.com>
+
+        Make the Web Inspector's clear() command work in the console again.
+
+        <rdar://problem/11007383> REGRESSION (Safari 6): Should be able to clear current console log via clear() command
+
+        Reviewed by Ada Chan.
+
+        * UserInterface/ConsoleObserver.js:
+        (WebInspector.ConsoleObserver.prototype.messagesCleared): Call LogManager.messagesCleared.
+        * UserInterface/LogManager.js:
+        (WebInspector.LogManager.prototype.messageWasAdded): Added comment about ConsoleObserver.
+        (WebInspector.LogManager.prototype.messagesCleared): Added. Moved from requestClearMessages.
+        (WebInspector.LogManager.prototype.messageRepeatCountUpdated): Added comment about ConsoleObserver.
+        (WebInspector.LogManager.prototype.requestClearMessages): Removed clearing since that happens
+        in messagesCleared now in response to the request.
+
+2012-10-29  Timothy Hatcher  <timothy@apple.com>
+
+        Allow resizing the docked Web Inspector from any empty space in the navigation bars.
+
+        <rdar://problem/11964849> REGRESSION (Safari 6): Resizing the docked Web Inspector is not easy
+
+        Reviewed by Ada Chan.
+
+        * UserInterface/Main.css:
+        (body.docked #details-sidebar > .navigation-bar): Show row-resize cursor.
+        (body.docked #details-sidebar > .navigation-bar .item:not(.flexible-space)): Reset the cursor to default.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Add event listeners to the navigation bars.
+
+2012-10-28  Timothy Hatcher  <timothy@apple.com>
+
+        Use a specific icon for application cache manifests instead of the generic document icon.
+
+        <rdar://problem/11427380> In Storage navigator Application Cache icon should be better than a generic document icon
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/ApplicationCacheIcons.css:
+        (.application-cache-manifest .icon): Use the new icons.
+        * UserInterface/Images/ApplicationCacheManifest.png: Added.
+        * UserInterface/Images/ApplicationCacheManifest@2x.png: Added.
+
+2012-10-28  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Make radio navigation buttons only switch for the left mouse button.
+
+        <rdar://problem/11795081> Right-clicking navigator icons produces unexpected results
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype._mouseDown): Return early if event.button !== 0.
+        (WebInspector.NavigationBar.prototype._mouseMoved): Assert event.button !== 0.
+        (WebInspector.NavigationBar.prototype._mouseUp): Ditto.
+
+2012-10-27  Timothy Hatcher  <timothy@apple.com>
+
+        Make the network timeline bars and callouts HiDPI compliant.
+
+        <rdar://problem/10643175> Timeline pills/callouts should be made HiDPI compliant
+
+        Reviewed by Sam Weinig.
+
+        * UserInterface/Images/NetworkBarBlue.png: Added.
+        * UserInterface/Images/NetworkBarBlue@2x.png: Added.
+        * UserInterface/Images/NetworkBarGray.png: Added.
+        * UserInterface/Images/NetworkBarGray@2x.png: Added.
+        * UserInterface/Images/NetworkBarGreen.png: Added.
+        * UserInterface/Images/NetworkBarGreen@2x.png: Added.
+        * UserInterface/Images/NetworkBarLabelCalloutLeft.pdf: Added.
+        * UserInterface/Images/NetworkBarLabelCalloutRight.pdf: Added.
+        * UserInterface/Images/NetworkBarLabelCalloutWhiteLeft.pdf: Added.
+        * UserInterface/Images/NetworkBarLabelCalloutWhiteRight.pdf: Added.
+        * UserInterface/Images/NetworkBarOrange.png: Added.
+        * UserInterface/Images/NetworkBarOrange@2x.png: Added.
+        * UserInterface/Images/NetworkBarPurple.png: Added.
+        * UserInterface/Images/NetworkBarPurple@2x.png: Added.
+        * UserInterface/Images/NetworkBarRed.png: Added.
+        * UserInterface/Images/NetworkBarRed@2x.png: Added.
+        * UserInterface/Images/NetworkBarWhiteFlat.png: Added.
+        * UserInterface/Images/NetworkBarWhiteFlat@2x.png: Added.
+        * UserInterface/Images/NetworkBarYellow.png: Added.
+        * UserInterface/Images/NetworkBarYellow@2x.png: Added.
+        * UserInterface/Images/NetworkHollowBarBlue.png: Added.
+        * UserInterface/Images/NetworkHollowBarBlue@2x.png: Added.
+        * UserInterface/Images/NetworkHollowBarGray.png: Added.
+        * UserInterface/Images/NetworkHollowBarGray@2x.png: Added.
+        * UserInterface/Images/NetworkHollowBarGreen.png: Added.
+        * UserInterface/Images/NetworkHollowBarGreen@2x.png: Added.
+        * UserInterface/Images/NetworkHollowBarOrange.png: Added.
+        * UserInterface/Images/NetworkHollowBarOrange@2x.png: Added.
+        * UserInterface/Images/NetworkHollowBarPurple.png: Added.
+        * UserInterface/Images/NetworkHollowBarPurple@2x.png: Added.
+        * UserInterface/Images/NetworkHollowBarRed.png: Added.
+        * UserInterface/Images/NetworkHollowBarRed@2x.png: Added.
+        * UserInterface/Images/NetworkHollowBarYellow.png: Added.
+        * UserInterface/Images/NetworkHollowBarYellow@2x.png: Added.
+        * UserInterface/Images/graphLabelCalloutLeft.png: Removed.
+        * UserInterface/Images/graphLabelCalloutLeftWhite.png: Removed.
+        * UserInterface/Images/graphLabelCalloutRight.png: Removed.
+        * UserInterface/Images/graphLabelCalloutRightWhite.png: Removed.
+        * UserInterface/Images/timelineHollowPillBlue.png: Removed.
+        * UserInterface/Images/timelineHollowPillGray.png: Removed.
+        * UserInterface/Images/timelineHollowPillGreen.png: Removed.
+        * UserInterface/Images/timelineHollowPillOrange.png: Removed.
+        * UserInterface/Images/timelineHollowPillPurple.png: Removed.
+        * UserInterface/Images/timelineHollowPillRed.png: Removed.
+        * UserInterface/Images/timelineHollowPillYellow.png: Removed.
+        * UserInterface/Images/timelinePillBlue.png: Removed.
+        * UserInterface/Images/timelinePillGray.png: Removed.
+        * UserInterface/Images/timelinePillGreen.png: Removed.
+        * UserInterface/Images/timelinePillOrange.png: Removed.
+        * UserInterface/Images/timelinePillPurple.png: Removed.
+        * UserInterface/Images/timelinePillRed.png: Removed.
+        * UserInterface/Images/timelinePillWhiteFlat.png: Removed.
+        * UserInterface/Images/timelinePillYellow.png: Removed.
+        * UserInterface/NetworkTimeline.css:
+        (.network-graph-label.before):
+        (.network-graph-label.before::after):
+        (.network-graph-label.after):
+        (.network-graph-label.after::before):
+        (.network-graph-bar):
+        (.resource-cached .network-graph-bar):
+        (.network-resource-type-document .network-graph-bar):
+        (.network-resource-type-document.resource-cached .network-graph-bar):
+        (.network-resource-type-stylesheet .network-graph-bar):
+        (.network-resource-type-stylesheet.resource-cached .network-graph-bar):
+        (.network-resource-type-image .network-graph-bar):
+        (.network-resource-type-image.resource-cached .network-graph-bar):
+        (.network-resource-type-font .network-graph-bar):
+        (.network-resource-type-font.resource-cached .network-graph-bar):
+        (.network-resource-type-script .network-graph-bar):
+        (.network-resource-type-script.resource-cached .network-graph-bar):
+        (.network-resource-type-xhr .network-graph-bar):
+        (.network-resource-type-xhr.resource-cached .network-graph-bar):
+        (.network-resource-type-other .network-graph-bar):
+        (.network-resource-type-other.resource-cached .network-graph-bar):
+        (.data-grid:focus tr.selected .network-graph-bar):
+        (.data-grid:focus tr.selected .resource-cached .network-graph-bar):
+        (.data-grid:focus tr.selected .network-graph-label.before::after):
+        (.data-grid:focus tr.selected .network-graph-label.after::before):
+
+2012-10-26  Timothy Hatcher  <timothy@apple.com>
+
+        Clear the issue navigator sidebar when the active log is cleared.
+
+        Reviewed by Ada Chan.
+
+        * UserInterface/IssueManager.js:
+        (WebInspector.IssueManager): Listen for the ActiveLogCleared event.
+        (WebInspector.IssueManager.prototype.initialize): Dispatch the Cleared event.
+        (WebInspector.IssueManager.prototype._activeLogCleared): Added. Call initialize.
+        (WebInspector.IssueManager.prototype._mainResourceDidChange): Just call initialize
+        since it now dispatches the Cleared event.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create logManager before issueManager so IssueManager
+        can listen for the ActiveLogCleared event.
+
+2012-10-26  Timothy Hatcher  <timothy@apple.com>
+
+        Clean up LogContentView and make clearing the console have straightforward code path.
+
+        The icon for the trashcan was also 1px too low and not embossed.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Images/NavigationItemTrash.pdf: Updated.
+        * UserInterface/LogContentView.css:
+        (.console-messages): Changed from #console-messages.
+        (.console-messages a): Ditto.
+        (.console-messages a:hover): Ditto.
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView): Don't set ids on elements. Remove unused className.
+        Directly listen for the ActiveLogCleared event. Remove true from the end of the
+        ButtonNavigationItem for the clear button to make it embossed.
+        (WebInspector.LogContentView.prototype.disable): Set _disabled. Also disable the clear
+        button and add a FIXME.
+        (WebInspector.LogContentView.prototype.consoleCleared): Removed. Replaced by _activeLogCleared.
+        (WebInspector.LogContentView.prototype.closed): Added.
+        (WebInspector.LogContentView.prototype.didAppendConsoleMessage): Removed. Stop firing
+        and event no one listens for.
+        (WebInspector.LogContentView.prototype._handleContextMenuEvent): Use _clearLog. Don't
+        add the context menu item for disabled logs.
+        (WebInspector.LogContentView.prototype._requestClearMessages): Removed. Replaced by _clearLog.
+        (WebInspector.LogContentView.prototype._activeLogCleared): Added.
+        (WebInspector.LogContentView.prototype._clearLog): Call WebInspector.logManager.requestClearMessages
+        and wait for the ActiveLogCleared event.
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel): Removed ActiveLogCleared event listener.
+        (WebInspector.LogSidebarPanel.prototype._activeLogCleared): Removed.
+
+2012-10-26  Timothy Hatcher  <timothy@apple.com>
+
+        Update all of the generated icons in the Web Inspector when the device pixel ratio changes.
+
+        <rdar://problem/12579083> Update generated images as the window moves between 1x and 2x screens
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/ImageUtilities.js:
+        (generateColoredImagesForCSS): Added matchMedia listener.
+        (generateColoredImagesForCSS.generateImages): Renamed from imageLoaded.
+        (generateEmbossedImages): Added matchMedia listener.
+        (generateEmbossedImages._generateImages): Renamed from _imageLoaded.
+
+2012-10-25  Timothy Hatcher  <timothy@apple.com>
+
+        Make ImageUtilities.js in Web Inspector webkitGetImageDataHD and webkitGetImageDataHD.
+
+        Since the 2x canvas approach was no longer working we now only generate one canvas that
+        matches the device pixel ratio. This does not properly update as the Web Inspector
+        changes screens, and that is tracked by <rdar://problem/12579083>.
+
+        The icons are still blurry in HiDPI, and that is tracked by <rdar://problem/12574189>.
+
+        <rdar://problem/12579056> Update ImageUtilities.js to properly work in HIDPI
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/ActivateButtonNavigationItem.js:
+        (WebInspector.ActivateButtonNavigationItem.prototype.generateStyleText): Remove 2x selectors.
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem.prototype.generateStyleText): Ditto.
+        * UserInterface/RadioButtonNavigationItem.js:
+        (WebInspector.RadioButtonNavigationItem.prototype.generateStyleText): Ditto.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.css: Remove 2x selectors and media queries.
+        * UserInterface/DOMTreeOutline.css: Ditto.
+        * UserInterface/DataGrid.css: Ditto.
+        * UserInterface/DetailsSection.css: Ditto.
+        * UserInterface/LogContentView.css: Ditto.
+        * UserInterface/Main.css: Ditto.
+        * UserInterface/NavigationSidebarPanel.css: Ditto.
+        * UserInterface/Section.css: Ditto.
+        * UserInterface/TimelinesContentView.css: Ditto.
+
+        * UserInterface/ImageUtilities.js:
+        (generateColoredImage): Use webkitGetImageDataHD and webkitPutImageDataHD.
+        (generateColoredImagesForCSS): Stop generating 2x versions.
+        (generateEmbossedImages): Stop generating 2x versions. Use webkitGetImageDataHD and
+        webkitPutImageDataHD.
+
+2012-10-25  Korhan Bircan  <kbircan@apple.com>
+
+        Fix for "<rdar://problem/12120092> REGRESSION (Safari 6): No button to clear the Log view or Quick Console".
+
+        Reviewed by Timothy Hatcher.
+
+        There's no "Clear Console" button in the log content view and we only support Command-K shortcut
+        to clear the console. This is a missing feature that has been mentioned a few times on Twitter
+        and Stack Overflow. This patch adds a "Clear Console" button in the navigation bar where we think
+        is a good place for discoverability.
+
+        We can likely do the same for the Quick Console once we decide where the best place to put the
+        button is.
+
+        * Localizations/en.lproj/localizedStrings.js: Regenerated after adding the tooltip.
+        * UserInterface/Images/NavigationItemTrash.pdf: Added.
+        * UserInterface/LogContentView.js:
+        Added a navigation item button with a trashcan icon for clearing the console log.
+        Renamed context menu tooltip from "Clear Console" to "Clear Log" for consistency.
+
+2012-10-25  Timothy Hatcher  <timothy@apple.com>
+
+        Correct the blurriness of the Close, Dock and Undock navigation items in the Web Inspector.
+
+        <rdar://problem/12573816> Close, Dock and Undock navigation items are blurry
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem.prototype._generateImages): Pass _imageHeight instead of _imageWidth again.
+
+2012-10-25  Timothy Hatcher  <timothy@apple.com>
+
+        Darken the blue used for Web Inspector active navigation items to have better contrast.
+
+        This also adds a slight glow to simulate that these buttons have a blue light.
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/ImageUtilities.js:
+        (._createEmbossedCanvasImage): Tweak the colors and add a glow.
+
+2012-10-24  Timothy Hatcher  <timothy@apple.com>
+
+        Hide empty navigation sidebars in the Web Inspector until they have content.
+
+        This hides Issues, Debug and Storage if they are empty. This frees up the navigation
+        bar and makes it less intimidating in most cases.
+
+        <rdar://problem/12569339> Empty navigation sidebars should be hidden until they have content.
+
+        Rubber-stamped by Antoine Quint.
+
+        * UserInterface/DebugSidebarPanel.js:
+        (WebInspector.DebugSidebarPanel.prototype._showNotPausedEmptyContentPlaceholder): Pass true
+        to showEmptyContentPlaceholder to indicate the navigation item should be hidden too.
+        * UserInterface/IssueSidebarPanel.js:
+        (WebInspector.IssueSidebarPanel): Pass true to NavigationSidebarPanel for auto-hiding.
+        * UserInterface/NavigationItem.js:
+        (WebInspector.NavigationItem.prototype.set hidden): Update layout os items expand and collapse
+        as the space available changes.
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel): Start the navigation bar out as hidden if auto-hiding.
+        (WebInspector.NavigationSidebarPanel.prototype.showEmptyContentPlaceholder): Call
+        _updateNavigationItemVisibility after setting _hideNavigationItemWhenEmpty.
+        (WebInspector.NavigationSidebarPanel.prototype.hideEmptyContentPlaceholder): Ditto.
+        (WebInspector.NavigationSidebarPanel.prototype.updateEmptyContentPlaceholder): Call
+        _updateNavigationItemVisibility.
+        (WebInspector.NavigationSidebarPanel.prototype.shown): Force navigation item visible.
+        (WebInspector.NavigationSidebarPanel.prototype.hidden): Added. Call _updateNavigationItemVisibility.
+        (WebInspector.NavigationSidebarPanel.prototype._updateNavigationItemVisibility): Added.
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel): Pass true to NavigationSidebarPanel for auto-hiding.
+
+2012-10-24  Timothy Hatcher  <timothy@apple.com>
+
+        Make Command-Shift-C toggle the "point to inspect" mode.
+
+        This shortcut originates from Firebug and is also available in Chrome. To make this work
+        I had to make DOMTreeManager keep track of the state and fire an event when it changed.
+        That way the global shortcut could toggle the mode even if there isn't a FrameContentView.
+        This also allows all the FrameContentViews to keep in sync with the global switch.
+
+        <rdar://problem/6275138> Inspect clicked element needs a keyboard shortcut
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/DOMTreeManager.js:
+        (WebInspector.DOMTreeManager.prototype.inspectElement): Fire InspectModeStateChanged.
+        (WebInspector.DOMTreeManager.prototype.get inspectModeEnabled): Added.
+        (WebInspector.DOMTreeManager.prototype.set inspectModeEnabled.callback): Added.
+        Handle the error case and fire InspectModeStateChanged.
+        (WebInspector.DOMTreeManager.prototype.set inspectModeEnabled): Changed from
+        setInspectModeEnabled into a setter. Use an internal callback.
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView.prototype.get navigationItems): Renamed _nodeSearchActivateButtonNavigationItem
+        to _inspectModeButtonNavigationItem.
+        (WebInspector.FrameContentView.prototype.shown): Removed call to _setNodeSearchEnabled.
+        (WebInspector.FrameContentView.prototype._inspectModeStateChanged): Renamed from _setNodeSearchEnabled.
+        (WebInspector.FrameContentView.prototype._toggleNodeSearch): Toggle WebInspector.domTreeManager.inspectModeEnabled
+        and listen for the event instead of a callback.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create a shortcut for inspect mode.
+        (WebInspector._toggleInspectMode): Added.
+
+2012-10-24  Timothy Hatcher  <timothy@apple.com>
+
+        Make it easy to have different tooltips for toggle buttons in the Web Inspector.
+
+        Also tweak the wording of the hand button in an attempt to keep it clear and terse.
+
+        Reviewed by Jeff Miller.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/ActivateButtonNavigationItem.js:
+        (WebInspector.ActivateButtonNavigationItem): Take an activatedToolTip param in addition to
+        defaultToolTip and store them.
+        (WebInspector.ActivateButtonNavigationItem.prototype.get defaultToolTip): Added.
+        (WebInspector.ActivateButtonNavigationItem.prototype.get activatedToolTip): Added.
+        (WebInspector.ActivateButtonNavigationItem.prototype.set activated): Switch the tooltips.
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView): Pass in alternate tooltips for the navigation items.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Setup the tooltips when the navigation items are created.
+        (WebInspector.updateDockedState): Remove toolTip manipulation.
+        (WebInspector._sidebarCollapsedStateDidChange): Ditto.
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole): Setup the tooltips when the navigation items are created.
+        (WebInspector.QuickConsole.prototype.set collapsed): Remove toolTip manipulation.
+        (WebInspector.QuickConsole.prototype._debuggerDidPause): Ditto.
+        (WebInspector.QuickConsole.prototype._debuggerDidResume): Ditto.
+        * UserInterface/ToggleButtonNavigationItem.js:
+        (WebInspector.ToggleButtonNavigationItem):Take an alternateToolTip param in addition to
+        defaultToolTip and store them.
+        (WebInspector.ToggleButtonNavigationItem.prototype.get defaultToolTip): Added.
+        (WebInspector.ToggleButtonNavigationItem.prototype.get alternateToolTip): Added.
+        (WebInspector.ToggleButtonNavigationItem.prototype.set toggled): Switch the tooltips.
+
+2012-10-25  Antoine Quint  <graouts@apple.com>
+
+        Customise the word-wrapping behaviour to break even when there is no space in the text
+        typed into the console (W3C spec at http://www.w3.org/TR/css3-text/#overflow-wrap)
+
+        <rdar://problem/12331949> Quick console text overlaps debugging controls
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/JavaScriptTextPrompt.css:
+        (.javascript-prompt):
+
+2012-10-24  Antoine Quint  <graouts@apple.com>
+
+        Add the "active-focus" state as a shared state for all button navigation items and use that state as well
+        as the "focus" state regardless of keyboard focus.
+
+        <rdar://problem/11742049> Web Inspector navigation bar buttons need a more noticeable selected state
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ActivateButtonNavigationItem.js: Stop using custom states and use the shared states defined in
+        ButtonNavigationItem.
+        (WebInspector.ActivateButtonNavigationItem.prototype.generateStyleText):
+        * UserInterface/ButtonNavigationItem.js: Add the "active-focus" from ActivateButtonNavigationItem.
+        * UserInterface/RadioButtonNavigationItem.js: Use the "focus" state even when we're not using keyboard focus
+        and use the "active-focus" state when we're pressing the button as well.
+        (WebInspector.RadioButtonNavigationItem.prototype.generateStyleText):
+
+2012-10-23  Timothy Hatcher  <timothy@apple.com>
+
+        Make "Inspect Element" and the inspect() console API switch the sidebar to match the content view.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/InspectorObserver.js:
+        (WebInspector.InspectorObserver.prototype.inspect): Select the resourceSidebarPanel or
+        the storageSidebarPanel depending on the type of object being inspected.
+
+2012-10-23  Timothy Hatcher  <timothy@apple.com>
+
+        Fix event listener links and make them work with anonymous scripts.
+
+        <rdar://problem/12557978> REGRESSION: Event listener function links are displayed as
+        numbers and don't work
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager.prototype.reset): Call Script.resetUniqueDisplayNameNumbers. This
+        way the anonymous scripts scripts start back at 1 when you reload or load a new page.
+        * UserInterface/EventListenerSectionGroup.js:
+        (WebInspector.EventListenerSectionGroup.prototype._functionTextOrLink): In the past scriptId
+        could be a URL. Now it is always a script identifier. So try looking up the resource by URL
+        if a script can't be found directly. Use WebInspector.createSourceCodeLink.
+        * UserInterface/Main.css:
+        (.go-to-link): Added cursor: pointer for cases when the link has no href.
+        * UserInterface/Main.js:
+        (WebInspector.createSourceCodeLink): Added.
+        (WebInspector.createSourceCodeLink.showSourceCode): Added.
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.get displayName): Added.
+        * UserInterface/Script.js:
+        (WebInspector.Script.resetUniqueDisplayNameNumbers): Added.
+        (WebInspector.Script.prototype.get displayName): Added.
+        * UserInterface/ScriptTreeElement.js:
+        (WebInspector.ScriptTreeElement): Use the displayName getter for mainTitle.
+        * UserInterface/SourceCode.js:
+        (WebInspector.SourceCode.prototype.get displayName): Added.
+
+2012-10-22  Timothy Hatcher  <timothy@apple.com>
+
+        Make docking/undocking the Web Inspector work again.
+
+        <rdar://problem/12554785> REGRESSION (r132045): Docking/undocking does not work
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.setAttachedWindow): Removed.
+        (InspectorFrontendAPI.setDockSide): Added.
+        * UserInterface/Main.js:
+        (WebInspector._toggleDockedState): Use InspectorFrontendHost.requestSetDockSide.
+
+2012-10-22  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/12540519> Should be able to copy text from datagrid easier
+
+        Reviewed by Timothy Hatcher.
+
+        Have a DataGrid handle a copy event if the last selection was in the
+        DataGrid and it has a selected row. Also add a "Copy Row" context menu.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        Add "Copy Row" context menu string.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGrid):
+        (WebInspector.DataGrid.prototype._contextMenuInDataTable):
+        Add "Copy Row" context menu item if the node is selectable.
+
+        (WebInspector.DataGrid.prototype._copyTextForDataGridNode):
+        Return a tab separated list of values. This uses the original data from
+        which the node is created. In some cases, like the instrument navigator's
+        datagrids, this may not match the final DataGrid row's content.
+
+        (WebInspector.DataGrid.prototype._beforeCopy):
+        (WebInspector.DataGrid.prototype._copy):
+        Allow copy when the event is inside the datagrid, there is no range
+        selection, and we have a selected row.
+
+        (WebInspector.DataGrid.prototype._copyRow):
+        Directly copy an individual row.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        Remove useCapture from the main document's beforecopy handler.
+
+2012-10-22  Timothy Hatcher  <timothy@apple.com>
+
+        Make the Web Inspector fast!
+
+        Use a timeout instead of an interval to prevent being capped on the time between protocol messages.
+        Only one timeout is created and the whole queue is dispatched when the timer fires. This prevents
+        creating potentially hundreds of timers that were all firing at the same time.
+
+        <rdar://problem/11759145> REGRESSION (Safari 6): console.log() exhibits extremely long delay (slow)
+        when many javascript files have just been loaded
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Main.js:
+        (WebInspector.dispatchNextQueuedMessageFromBackend): Removed interval code.
+        (WebInspector.dispatchMessageFromBackend): Use setTimeout instead of setInterval. Updated the comment
+        and removed the reentrancy part, which isn't possible since the backend also has a queue with a timer.
+
+2012-10-22  Timothy Hatcher  <timothy@apple.com>
+
+        Make WebInspector.JavaScriptLogViewController be responsible for scrolling to the bottom,
+        since it can check before new messages are added to know if a scroll is needed.
+
+        This fixes a bug where we were not auto scrolling down if you were at the bottom.
+
+        <rdar://problem/12049983> REGRESSION (Safari 6): Console doesn't autoscroll when it should
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController): Store element as _element.
+        (WebInspector.JavaScriptLogViewController.prototype.isScrolledToBottom): Added.
+        (WebInspector.JavaScriptLogViewController.prototype.scrollToBottom.delayedWork): Added.
+        Do the actual scroll here.
+        (WebInspector.JavaScriptLogViewController.prototype.scrollToBottom): Added. Don't scroll
+        immediately so we are not causing excessive layouts.
+        (WebInspector.JavaScriptLogViewController.prototype._appendConsoleMessage): Remember if we
+        were scrolled to the bottom before appending the message. This was the bug, before the delegate
+        didAppendConsoleMessage was checking and that was after the content was appended and we were
+        never scrolled to the bottom at that point.
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype.didAppendConsoleMessage): Don't try to scroll, it is
+        now handled by JavaScriptLogViewController.
+        (WebInspector.LogContentView.prototype._isScrollIntoViewScheduled): Removed.
+        (WebInspector.LogContentView.prototype._scheduleScrollIntoView): Removed.
+        (WebInspector.LogContentView.prototype._immediatelyScrollIntoView): Removed.
+        (WebInspector.LogContentView.prototype._cancelScheduledScrollIntoView): Removed.
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole.prototype._isScrolledToBottom): Call through to JavaScriptLogViewController.
+        (WebInspector.QuickConsole.prototype._scrollToBottom): Ditto.
+
+2012-10-22  Timothy Hatcher  <timothy@apple.com>
+
+        Make WebInspector.JavaScriptLogViewController create the top WebInspector.ConsoleGroup.
+
+        JavaScriptLogViewController now takes the parent element so it controls more of the DOM. This will
+        be needed to control the scroll state instead of having LogContentView and QuickConsole do it.
+
+        Part of: <rdar://problem/12049983> REGRESSION (Safari 6): Console doesn't autoscroll when it should
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController): Don't take in a ConsoleGroup, create it internally.
+        Insert or append the ConsoleGroup into the parentElement.
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView): Don't make the ConsoleGroup, just get it from _logViewController.
+        Create and assign this.prompt first so it is in the DOM before making the _logViewController.
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole): Don't make the ConsoleGroup.
+
+2012-10-21  Timothy Hatcher  <timothy@apple.com>
+
+        Prevent the scroll position from changing when rebuilding the styles sidebar.
+
+        <rdar://problem/12544009> The Styles details sidebar scrolls to the top after editing a property
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections): Save and restore scrollTop.
+
+2012-10-20  Timothy Hatcher  <timothy@apple.com>
+
+        Add an "Inherited Styles" section to the Style details sidebar.
+
+        <rdar://problem/11981468> REGRESSION (Safari 6): Inspector does not show Inherited Style Rules
+
+        Reviewed by Ricky Mondello.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/CSSStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style .styles-section.inherited .properties .inherited): Added.
+        Hides non-iherited properties for inherited rules.
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel): Create and add the Inherited Styles section.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.buildSections.createStylePropertiesSection):
+        Pass styleRule.isInherited instead of always passing false.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.buildSections.createRuleGroups): Added.
+        Factored out of createMatchedRuleGroups for reuse by inherited rules.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.buildSections.createMatchedRuleGroups):
+        Use the factored out createRuleGroups function.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.buildSections): Append inherited rules
+        to inheritedStyleRules for later use. Walk the inheritedStyleRules and create the sections and groups.
+        * UserInterface/DetailsSection.css:
+        (.details-section > .header): Reduce right padding, it was too wide.
+        (.details-section > .header > .node-link, .details-section > .header > .go-to-arrow): Added.
+        Float right to position the arrow on the right side of the title.
+        (.details-section > .header .go-to-arrow): Added. Adjust the size and margin to better fit the header.
+        * UserInterface/StylePropertiesSection.js:
+        (WebInspector.StylePropertiesSection): Changed "show-inherited" to just "inherited". This reduces the
+        confusion with the computed style "show-inherited" class.
+
+2012-10-20  Timothy Hatcher  <timothy@apple.com>
+
+        Make the console log stay active when navigating to a new page if one was showing.
+
+        <rdar://problem/12542303> DOM Tree forces itself visible when navigating to a new page while looking at a Log
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/LogManager.js:
+        (WebInspector.LogManager.prototype._mainResourceDidChange): Only send SessionStarted or Cleared,
+        not both. This way listeners of Cleared can start the new session with some context.
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel.prototype._startSession): Added. Factored out of _sessionStarted.
+        Honor the forceActiveContentView parameter when deciding to show the content view.
+        (WebInspector.LogSidebarPanel.prototype._sessionStarted): Call _startSession.
+        (WebInspector.LogSidebarPanel.prototype._logsCleared): Remember if we were showing a log before
+        closing all the logs. Call _startSession can force the content view to be active if we were
+        showing a log before.
+
+2012-10-20  Timothy Hatcher  <timothy@apple.com>
+
+        Make Encoded and Transfer Size update when the values change during page load.
+
+        Renamed Encoded Size to Transfer Size to avoid confusion in cases where it isn't encoded. Also
+        the value includes the response headers size, which is the only size when showing a 304. This
+        is consistent with the title of the Transferred column in the Network Timeline.
+
+        <rdar://problem/12542122> Encoded and Decoded Size doesn't update in the Resource details sidebar
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.get transferSize): Move the 304 check before the cached
+        check since we mark 304 loads as cached now, but there still was network transfer of headers.
+        (WebInspector.Resource.prototype.updateForResponse): Fire TransferSizeDidChange for 304 and
+        if we have a Content-Length.
+        (WebInspector.Resource.prototype.increaseSize): Fire TransferSizeDidChange if we don't have
+        a _transferSize and it isn't a 304 or Content-Length is missing.
+        (WebInspector.Resource.prototype.markAsCached): Fire TransferSizeDidChange when not a 304.
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel): Renamed "Encoded Size" to "Transfer Size".
+        (WebInspector.ResourceDetailsSidebarPanel.prototype.set resource): Listen for SizeDidChange and
+        TransferSizeDidChange events.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype.refresh): Call _refreshDecodedSize and
+        _refreshTransferSize.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshRequestAndResponse): Use emDash
+        in more places. Removed valueForSize and updating of size rows.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._valueForSize): Added.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshDecodedSize): Added.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshTransferSize): Added.
+
+2012-10-19  Timothy Hatcher  <timothy@apple.com>
+
+        Make the Scope Chain details sidebar update when continuing in a loop.
+
+        <rdar://problem/11828667> REGRESSION (Safari 6): Variables do not update when continuing in a loop
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._activeCallFrameDidChange): Don't return early if the line
+        number didn't change. The execution state still could have changed.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.set executionLineNumber): Only return early if there isn't a line
+        number and that isn't changing. Still dispatch the event even if the number didn't change. The execution
+        state still could have changed.
+
+2012-10-19  Timothy Hatcher  <timothy@apple.com>
+
+        Better support for complex Content-Types in the Post Data section.
+
+        This change splits out the charset and boundary info from the Content-Type and
+        displays that info on separate rows. It also handles zero size data since the
+        backend does not send data if there are any files present.
+
+        Part of: <rdar://problem/6716080> REGRESSION (Safari 6): Missing POST request data
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/DetailsSection.css:
+        (.details-section > .content > .group > .row.simple.data > .value): Added.
+        * UserInterface/DetailsSectionSimpleRow.js:
+        (WebInspector.DetailsSectionSimpleRow.prototype.set value): Set the data class name
+        if the value does not have any spaces for good word breaking. This will allow breaking
+        on every character, which looks better for the boundary post data string.
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshPostDataSection): Parse
+        the content type into MIME-type and the boundary and/or charset.
+
+2012-10-19  Timothy Hatcher  <timothy@apple.com>
+
+        Add the first part of showing POST data: simple data in the Resource details sidebar.
+
+        Part of: <rdar://problem/6716080> REGRESSION (Safari 6): Missing POST request data
+
+        Reviewed by Dean Jackson.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.frameDidNavigate): Removed optional parameters
+        when making a Resource.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWillBeSent): Pass along postData.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWasServedFromMemoryCache): Pass null for postData.
+        (WebInspector.FrameResourceManager.prototype._addNewResourceToFrame): Added parameter for postData.
+        Pass along postData to Resource constructor.
+        (WebInspector.FrameResourceManager.prototype._createFrame): Removed optional parameters
+        when making a Resource.
+        (WebInspector.FrameResourceManager.prototype._createResource): Ditto.
+        * UserInterface/Resource.js:
+        (WebInspector.Resource): Added postData parameter. Store the _postData.
+        (WebInspector.Resource.prototype.get postData): Added.
+        (WebInspector.Resource.prototype.get postDataContentType): Added.
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel): Create _postDataSection. Don't show _queryParametersSection
+        by default, it is now added or removed in _refreshURL.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype.refresh): Call _refreshPostDataSection.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshURL): Show and hide the query
+        parameters section based on the query string.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshPostDataSection): Added.
+
+2012-10-19  Timothy Hatcher  <timothy@apple.com>
+
+        Support text/x-javascript and other MIME-types as scripts.
+
+        The code was also throwing an exception for unknown MIME-types, which was causing
+        the view displaying the Resource to not show anything. Now we just log an error
+        and return null so plain text will be shown for unknown types.
+
+        <rdar://problem/11961403> REGRESSION (Safari 6): XHR response is blank for some
+        sites (including store.apple.com)
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.Type._mimeTypeMap): Added application/x-json and variants.
+        * UserInterface/SourceTokenizer.js:
+        (WebInspector.SourceTokenizer): Added application/x-json and variants. Changed a throw
+        into a console.error with a return of null.
+
+2012-10-19  Timothy Hatcher  <timothy@apple.com>
+
+        Properly clear the special script folders after a reload so old scripts don't stay around.
+
+        <rdar://problem/11329600> REGRESSION (Safari 6): Special scripts duplicate for each reload
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype._scriptsCleared): Set each folder to null so they will be
+        recreated instead of reused the next time there is a script to show.
+
+=2012-10-18  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an issue where the Inspector would show duplicate broken resources if you opened it
+        while the page was still loading.
+
+        <rdar://problem/11328818> Broken resources if you open the inspector while the page is loading
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.markResourceRequestAsServedFromMemoryCache): Add a comment
+        about why we might not have a resource.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidReceiveResponse): Don't try to make a
+        resource here since we missed the resourceRequestWillBeSent call. It just caused duplicate resources
+        and broken ones too. Add a comment and return early.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidReceiveData): Add a comment about why we
+        might not have a resource. Removed an assert.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidFinishLoading): Ditto.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidFailLoading): Ditto.
+
+2012-10-18  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Add missing color aware CSS properties.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CSSKeywordCompletions.js:
+
+2012-10-18  Joseph Pecoraro  <pecoraro@apple.com>
+
+        In cases where the search term is a CSS Selector or XPath query and
+        not a textual match we were not adding a sidebar entry. In such cases
+        add a sidebar entry and highlight the entire title.
+
+        <rdar://problem/12522494> Searching "link[href]" in search navigator has missing sidebar items
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel.performSearch.domCallback.domSearchResults):
+        First check for partial highlights in textual matches. If none were
+        found, this is a Selector or XPath match, and we highlight it entirely.
+
+2012-10-18  Timothy Hatcher  <timothy@apple.com>
+
+        Harden the Web Inspector a bit with a Content Security Policy header.
+
+        By default only load content from 'self'. Allow external loading of images, media and
+        fonts; because large resources are not sent over the inspector protocol. Allow inline
+        styles and eval for scripts.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Main.html:
+
+2012-10-17  Timothy Hatcher  <timothy@apple.com>
+
+        Improve error reporting for Inspector protocol errors.
+
+        Reviewed by Dean Jackson.
+
+        * UserInterface/InspectorBackend.js:
+        (InspectorBackendClass.prototype.reportProtocolError): Log the message of the error
+        object, not the error object itself.
+
+2012-10-17  Antoine Quint  <graouts@apple.com>
+
+        We now display a new section in the resource details sidebar panel for the image size when we're inspecting
+        an image resource. To facilitate this, we add a new .getImageSize() method on Resource which creates an
+        <img> element to load the base64 version of the image as it was loaded and use the loaded element to query
+        the intrinsic image metrics.
+        
+        <rdar://problem/11247288> REGRESSION (Safari 6): Width and height size info for image resources is missing
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.markAsFailed):
+        (WebInspector.Resource.prototype.getImageSize.imageDidLoad):
+        (WebInspector.Resource.prototype.getImageSize):
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype.refresh):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._createNameValueDataGrid):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshImageSizeSection):
+
+2012-10-16  Mark Rowe  <mrowe@apple.com>
+
+        Add a configuration setting to control whether resources in the
+        Web Inspector framework are combined and minified.
+
+        Reviewed by Timothy Hatcher.
+
+        This allows non-Production builds to enable this functionality if desired.
+
+        * Configurations/WebInspectorFramework.xcconfig:
+        * Scripts/copy-user-interface-resources.sh:
+
+2012-10-16  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an exception and properly deactivate the node search button after a node is inspected.
+
+        <rdar://problem/12507181> Remnant mention of .nodeSearchActivateButtonNavigationItem in Main.js
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView): Added DOMNodeWasInspected event listener.
+        (WebInspector.FrameContentView.prototype._domNodeWasInspected): Added. Deactivate the node search button.
+        * UserInterface/Main.js:
+        (WebInspector._domNodeWasInspected): Always call InspectorFrontendHost.bringToFront(). This is good
+        for the Inspect Element context menu item in windowed mode too.
+
+2012-10-16  Timothy Hatcher  <timothy@apple.com>
+
+        Fix the dock buttons in the Web Inspector navigation bar when opening the Inspector with the left sidebar hidden.
+
+        <rdar://problem/12509577> REGRESSION: Dock navigation items are in the wrong place if the
+        Inspector is opened with the left sidebar hidden
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/Main.js:
+        (WebInspector._updateDockNavigationItems): Only do this work if needed by checking if the close button is not
+        in the right place. This function can be called multiple times, and the concat can cause the items to be
+        inserted into the leftNavigationItems array multiple times.
+
+2012-10-16  Antoine Quint  <graouts@apple.com>
+
+        Adding decoded and encoded sizes as a new group in the Request & Response panel in
+        the resource details sidebar panel. To make the reported sizes more legible, we also
+        make a small change in Number.bytesToString() such that we have a space between the
+        value and the unit, just like what the Get Info panel does in the Finder.
+        
+        <rdar://problem/12508215> Add decoded and encoded sizes to Request & Response panel
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshRequestAndResponse.valueForSize):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshRequestAndResponse):
+        * UserInterface/Utilities.js:
+        (Number.string_appeared_here.value):
+
+2012-10-16  Antoine Quint  <graouts@apple.com>
+
+        We add a new method to sync the state of the compositing borders button to the WebCore page settings
+        when a frame content view is shown in the Web Inspector UI. We also add a new backend command to complement
+        the OpenSource patch for https://bugs.webkit.org/show_bug.cgi?id=99458 which is also out for review.
+        
+        <rdar://problem/12498181> "Show compositing borders" button is not activated when inspector is re-opened
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView.prototype.shown):
+        (WebInspector.FrameContentView.prototype._toggleCompositingBorders):
+        (WebInspector.FrameContentView.prototype._updateCompositingBordersButtonToMatchPageSettings):
+        * UserInterface/InspectorBackendCommands.js:
+
+2012-10-16  Antoine Quint  <graouts@apple.com>
+
+        Add a new .highlight() method on TextEditorChunk which applies a simple CSS
+        animation to the HTML element for the text chunk, and call this method in
+        TextEditor's revealLine() method. Since the CSS class we're applying is only
+        meant to be transitory, we remove the CSS class name upon completion of the
+        animation.
+
+        <rdar://problem/12349298> REGRESSION (Safari 6): When clicking a file/line link
+        in the console the line is not highlighted in the source
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TextEditor.css:
+        (.text-editor-text-chunk.highlighted):
+        (@-webkit-keyframes fadeout):
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.revealLine):
+        (WebInspector.TextEditorTextChunk.prototype.updateContent):
+        (WebInspector.TextEditorTextChunk.prototype.highlight):
+
+2012-10-15  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an exception in ContentBrowser._updateContentViewNavigationItems that was causing resource to not be cleared.
+
+        <rdar://problem/12501269> REGRESSION: Reloading or loading a new page does not clear previous resources
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser.prototype._updateContentViewNavigationItems): The currentContentView can be
+        null when this is called. In that case just clear _currentContentViewNavigationItems and return early.
+
+2012-10-15  Timothy Hatcher  <timothy@apple.com>
+
+        Remove extra line breaks before color values when copying from the style sidebar.
+
+        <rdar://problem/12506099> When copying style rule sets from the sidebar,
+        line breaks are inserted in the middle of each line
+
+        Reviewed by Simon Fraser.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style .swatch): Improve spacing and alignment since
+        having swatch-inner as an inline-block affects layout slightly.
+        (.sidebar > .panel.details.css-style .swatch-inner): Change display from block to
+        inline-block. This fixes the bug by making WebKit not insert a newline for the block.
+
+2012-10-15  Timothy Hatcher  <timothy@apple.com>
+
+        Treat SVG main resources as documents and syntax highlight them using the HTML tokenizer.
+
+        SVG subresources are still treated as images and preview as such. This matches how the
+        WebKit Web Inspector treats SVGs.
+
+        <rdar://problem/11332688> REGRESSION (Safari 6): Source code view shows SVG image instead of source
+
+        Reviewed by Ada Chan and Dan Bernstein.
+
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.Type._mimeTypeMap): Added image/svg+xml
+        * UserInterface/SourceTokenizer.js:
+        (WebInspector.SourceTokenizer): Use HTMLSourceTokenizer for image/svg+xml.
+
+2012-10-14  Jeff Miller  <jeffm@apple.com>
+
+        Regenerate localizedStrings.js after r45263.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        Regenerated.
+
+2012-10-13  Timothy Hatcher  <timothy@apple.com>
+
+        Avoid direct manipulation of the ContentBrowser and Sidebar navigation bars in Main.js.
+
+        <rdar://problem/12494193> Main.js should not modify the navigationBars directly
+
+        Reviewed by Antoine Quint.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser): Added _leftNavigationItems and _rightNavigationItems.
+        (WebInspector.ContentBrowser.prototype.get leftNavigationItems): Added.
+        (WebInspector.ContentBrowser.prototype.set leftNavigationItems): Added.
+        (WebInspector.ContentBrowser.prototype.get rightNavigationItems): Added.
+        (WebInspector.ContentBrowser.prototype.set rightNavigationItems): Added.
+        (WebInspector.ContentBrowser.prototype._updateContentViewNavigationItems): Fix a
+        FIXME when calculating the insertionIndex by using _rightNavigationItems.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Use leftNavigationItems and rightNavigationItems
+        instead of direct manipulation of the navigation bar.
+        (WebInspector._updateDockNavigationItems): Ditto.
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype.insertNavigationItem): Remove the item if it
+        is already in another NavigationBar.
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar): Added _leftNavigationItems and _rightNavigationItems.
+        (WebInspector.Sidebar.prototype.insertSidebarPanel): Don't use addNavigationItem
+        since that would go after the right items.
+        (WebInspector.Sidebar.prototype.get leftNavigationItems): Added.
+        (WebInspector.Sidebar.prototype.set leftNavigationItems): Added.
+        (WebInspector.Sidebar.prototype.get rightNavigationItems): Added.
+        (WebInspector.Sidebar.prototype.set rightNavigationItems): Added.
+
+2012-10-13  Antoine Quint  <graouts@apple.com>
+
+        We add a new navigation item to the FrameContentView to toggle composition debug options using
+        the page's settings. To facilitate that, we added a new method in InspectorPageAgent to allow
+        to tap into WebCore and change those settings. That work is covered by an OpenSource patch for
+        https://bugs.webkit.org/show_bug.cgi?id=99253.
+        
+        <rdar://problem/10358004> Would like ability to turn layer borders on/off via the Web Inspector
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView.prototype.get navigationItems):
+        (WebInspector.FrameContentView.prototype.shown):
+        (WebInspector.FrameContentView.prototype._toggleNodeSearch):
+        (WebInspector.FrameContentView.prototype._toggleCompositingBorders):
+        * UserInterface/Images/NavigationItemLayers.pdf: Added.
+        * UserInterface/InspectorBackendCommands.js:
+
+2012-10-12  Antoine Quint  <graouts@apple.com>
+
+        We remove the code that manages the display of the "node inspection by selection" toggle navigation
+        item from Main.js and let the ContentBrowser add and remove navigation items registered on the ContentView
+        instance made the current content view.
+        
+        <rdar://problem/12487959> Let content views provide navigation items to the content browser.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser):
+        (WebInspector.ContentBrowser.prototype._updateContentViewNavigationItems.var):
+        (WebInspector.ContentBrowser.prototype._updateContentViewNavigationItems):
+        (WebInspector.ContentBrowser.prototype._currentContentViewDidChange):
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView.prototype.get navigationItems):
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView.prototype.get navigationItems):
+        (WebInspector.FrameContentView.prototype.shown):
+        (WebInspector.FrameContentView.prototype._pathComponentSelected):
+        (WebInspector.FrameContentView.prototype._setNodeSearchEnabled):
+        (WebInspector.FrameContentView.prototype._toggleNodeSearch):
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+
+2012-10-12  Timothy Hatcher  <timothy@apple.com>
+
+        Update the CSSKeywordCompletions.InheritedProperties list.
+
+        <rdar://problem/12371756> Computed -webkit-font-smoothing should appear in Inspector
+
+        Rubber-stamped by Brian Weinstein.
+
+        * UserInterface/CSSKeywordCompletions.js:
+        (WebInspector.CSSKeywordCompletions.InheritedProperties): Updated from CSSProperty::isInheritedProperty
+        from WebCore. The old list was from an old CSS 2.1 list.
+
+2012-10-12  Timothy Hatcher  <timothy@apple.com>
+
+        Don't overdraw the DataGrid sort indicator each time a DataGrid is created.
+
+        <rdar://problem/12488653> DataGrid sort indicator keeps getting darker
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGrid.prototype._generateSortIndicatorImagesIfNeeded): Store _generatedSortIndicatorImages
+        on the WebInspector.DataGrid constructor so it only generates the images once. Use a solid color for the
+        arrows. The previous color was too light now that it isn't overdrawing.
+
+2012-10-11  Timothy Hatcher  <timothy@apple.com>
+
+        Show the HTTP method, cached and HTTP status code/text in the Resource details sidebar.
+
+        This fixes two cases where the resource was not marked as cached; when loaded from the
+        disk cache and when there is a 304 response.
+
+        <rdar://problem/11256645> REGRESSION (Safari 6): No HTTP method shown
+
+        Reviewed by Ricky Mondello.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWillBeSent): Pass along the method.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWasServedFromMemoryCache): Pass null
+        for the request method.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidReceiveResponse): Mark as cached
+        when loaded from the disk cache.
+        (WebInspector.FrameResourceManager.prototype._addNewResourceToFrame): Pass along the method.
+        * UserInterface/Resource.js:
+        (WebInspector.Resource): Added requestMethod and store it.
+        (WebInspector.Resource.prototype.get requestMethod): Added.
+        (WebInspector.Resource.prototype.updateForResponse): Renamed ResponseHeadersDidChange event to
+        ResponseReceived since it represents more than headers.
+        (WebInspector.Resource.prototype.markAsCached): Fire CacheStatusDidChange event.
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel): Create new rows and section.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype.set resource): Listen for new events.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype.refresh): Call _refreshRequestAndResponse
+        instead of _refreshResponseHeaders.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshRequestAndResponse): Added.
+        Update the new section and also call _refreshResponseHeaders.
+
+2012-10-11  Antoine Quint  <graouts@apple.com>
+
+        Identify floating value and display a rounded value to the 100th in the box model
+        section with a thumbnail showing the full value. Here are screenshots of before
+        after applying this patch for margins with a floating value.
+
+        <rdar://problem/12478166> Box Model section can show values overlapping their label
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/BoxModelDetailsSectionRow.js
+
+2012-10-11  Antoine Quint  <graouts@apple.com>
+
+        Make headers in the details section use an ellipsis overflow style.
+
+        <rdar://problem/12478151> Class names in the list of inherited classes in the Node
+        sidebar can overflow
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DetailsSection.css
+
+2012-10-10  Timothy Hatcher  <timothy@apple.com>
+
+        Prevent searches from breaking links in the Source Code view of the Web Inspector.
+
+        This changes how the syntax highlighter appends tokens and search results. The token
+        elements are now created in whole before processing the inner text and search results.
+        Before the DOM would end up being flatter, but it caused multiple links to be created
+        if a search result was in the middle. The links were broken too because it only knew
+        about the fragment of the text and it resolved the absolute URL on that.
+
+        <rdar://problem/12461082> Searching in Safari's Web Inspector breaks links in source
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/SyntaxHighlightingSupport.js:
+        (WebInspector.createSyntaxHighlightedDocumentFragment):
+        (WebInspector.createSyntaxHighlightedDocumentFragment.createTextNode):
+        (WebInspector.createSyntaxHighlightedDocumentFragment.appendText):
+        (WebInspector.createSyntaxHighlightedDocumentFragment.appendToken):
+
+2012-10-10  Timothy Hatcher  <timothy@apple.com>
+
+        Make DOM storage refresh on update when inspecting iOS 6 devices.
+
+        <rdar://problem/12472491> REGRESSION: DOM Storage does not refresh when inspecting iOS 6
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMStorageObserver.js:
+        (WebInspector.DOMStorageObserver.prototype.updateDOMStorage): Added. Call domStorageUpdated.
+        * UserInterface/InspectorBackendLegacyCommands.js: Registered DOMStorage.updateDOMStorage event.
+
+2012-10-10  Timothy Hatcher  <timothy@apple.com>
+
+        Make database inspection work with Curie and keep it backwards compatible with iOS 6.
+
+        <rdar://problem/12463671> REGRESSION: Database inspection is broken
+
+        Reviewed by Brian Weinstein.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/DatabaseObject.js:
+        (WebInspector.DatabaseObject.prototype.executeSQL): Set expectsResultObject on the callback.
+        (WebInspector.DatabaseObject.prototype.executeSQL.queryCallback): Added.
+        (WebInspector.DatabaseObject.prototype.executeSQL.callback): Reworked for compatibility
+        by using the result object.
+        * UserInterface/DatabaseObserver.js:
+        (WebInspector.DatabaseObserver.prototype.sqlTransactionSucceeded): Added.
+        (WebInspector.DatabaseObserver.prototype.sqlTransactionFailed): Added.
+        * UserInterface/InspectorBackend.js:
+        (InspectorBackendClass.prototype.dispatch): See if the callback needs the result
+        object by checking for expectsResultObject.
+        * UserInterface/InspectorBackendLegacyCommands.js: Added.
+        * UserInterface/Main.html: Included InspectorBackendLegacyCommands.js.
+
+2012-10-09  Timothy Hatcher  <timothy@apple.com>
+
+        When using "Inspect Element", select the Style details sidebar panel if one of the DOM
+        details sidebar panels isn't already selected.
+
+        <rdar://problem/12239441> REGRESSION (Safari 6): "Inspect Element" shows Resource
+        details instead of useful Style details
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/Main.js:
+        (WebInspector._domNodeWasInspected): Set this.detailsSidebar.selectedSidebarPanel
+        to this.cssStyleDetailsSidebarPanel if the current sidebar ins't an instance of
+        the WebInspector.DOMDetailsSidebarPanel prototype.
+
+2012-10-09  Timothy Hatcher  <timothy@apple.com>
+
+        Make the Style details sidebar work again after recent protocol changes.
+
+        This change makes the Web Inspector work with Curie's Inspector protocol as well
+        as maintaining backwards compatibility with iOS 6.
+
+        <rdar://problem/12281730> REGRESSION (r129470): Nothing is showing in the Style sidebar
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/BoxModelDetailsSectionRow.js:
+        (WebInspector.BoxModelDetailsSectionRow.prototype._refresh): Removed forcedPseudoClasses
+        from the call to getComputedStyleAsync, because it was always ignored.
+        * UserInterface/CSSRule.js:
+        (WebInspector.CSSRule): Support selectorList and selectorText.
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections): Removed
+        forcedPseudoClasses from the calls to getComputedStyleAsync and getMatchedStylesAsync.
+        Fallback to empty array for matchedCSSRules.
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager.parseRuleArrayPayload): The protocol had just an array of
+        rules, now it is an array of matches that have a 'rule' property. Support both.
+        (WebInspector.CSSStyleManager.prototype.forcedPseudoClasses): Removed.
+        (WebInspector.CSSStyleManager.prototype.getMatchedStylesAsync): Removed forcedPseudoClasses
+        parameter. The protocol used 'rules' as a property, now it is 'matches'. Support both.
+        Use invoke() when calling CSSAgent.getMatchedStylesForNode since forcedPseudoClasses was removed
+        as an parameter, and invoke uses parameter names instead of parameter order.
+        (WebInspector.CSSStyleManager.prototype.getComputedStyleAsync): Removed forcedPseudoClasses
+        parameter. Use invoke() here too.
+
+2012-10-09  Timothy Hatcher  <timothy@apple.com>
+
+        Update InspectorBackendCommands.js to r130785 of the Inspector protocol.
+
+        <rdar://problem/12463786>
+
+        Some features need to be updated to work with these changes:
+        <rdar://problem/12281730> REGRESSION (r129470): Nothing is showing in the Style sidebar
+        <rdar://problem/12463671> REGRESSION: Database inspection is broken
+        <rdar://problem/12463631> REGRESSION: Subframes don't show the correct DOM (always the main frame's DOM)
+
+        Reviewed by Ricky Mondello.
+
+        * UserInterface/CSSObserver.js:
+        (WebInspector.CSSObserver.prototype.namedFlowCreated): Added stub.
+        (WebInspector.CSSObserver.prototype.namedFlowRemoved): Added stub.
+        (WebInspector.CSSObserver.prototype.regionLayoutUpdated): Added stub.
+        * UserInterface/DOMStorageObserver.js:
+        (WebInspector.DOMStorageObserver.prototype.updateDOMStorage): Removed.
+        * UserInterface/DatabaseObserver.js:
+        (WebInspector.DatabaseObserver.prototype.sqlTransactionSucceeded): Removed.
+        (WebInspector.DatabaseObserver.prototype.sqlTransactionFailed): Removed.
+        * UserInterface/DebuggerObserver.js:
+        (WebInspector.DebuggerObserver.prototype.scriptParsed): Added sourceMapURL and hasSourceURL arguments.
+        * UserInterface/InspectorBackendCommands.js: Updated to r130785.
+        * UserInterface/InspectorObserver.js:
+        (WebInspector.InspectorObserver.prototype.didCreateWorker): Removed.
+        (WebInspector.InspectorObserver.prototype.didDestroyWorker): Removed.
+
+2012-10-04  Mark Rowe  <mrowe@apple.com>
+
+        Take Xcode's suggestions for changes to our internal Xcode projects.
+
+        Rubber-stamped by John Sullivan.
+
+        Xcode 4.5 suggests enabling several new warnings in most of our projects. While doing this
+        I also noticed and removed a number of obsolete configuration settings, and upgraded the
+        project format for the few projects that were not using the latest version.
+
+        * Configurations/Base.xcconfig:
+        * WebInspectorUI.xcodeproj/project.pbxproj:
+
+2012-09-13  Timothy Hatcher  <timothy@apple.com>
+
+        Collapse the Computed Style section by default.
+
+        We do remember the state, but lets help people along here and collapse it by default.
+
+        <rdar://problem/12294479>
+
+        Reviewed by Cody Krieger and Mark Rowe.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel): Pass true when making the _computedStyleSection
+        to make it collapse by default.
+
+2012-08-27  Timothy Hatcher  <timothy@apple.com>
+
+        Use -webkit-image-set for border-image instead of media queries in the Web Inspector.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/TextEditor.css:
+        (.text-editor > .gutter > .line-number > .breakpoint): Use -webkit-image-set.
+        (.text-editor > .gutter > .line-number.breakpoint-resolved > .breakpoint): Ditto.
+        (.text-editor > .gutter > .line-number.execution-line::after): Ditto.
+        * UserInterface/TimelineOverview.css:
+        (.timeline-overview > .timeline .bar): Combine two rules with identical selectors.
+        (.timeline-overview > .timeline.timeline-record-type-network .bar): Use -webkit-image-set.
+        (.timeline-overview > .timeline.timeline-record-type-layout .bar): Ditto.
+        (.timeline-overview > .timeline.timeline-record-type-script .bar): Ditto.
+
+2012-08-27  Timothy Hatcher  <timothy@apple.com>
+
+        Make the JavaScript & Events timeline pills render correctly in HiDPI.
+
+        <rdar://problem/12183848> JavaScript timeline pill broken in HiDPI
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/TimelineOverview.css:
+        (.timeline-overview > .timeline.timeline-record-type-script .bar): Changed from
+        .timeline-overview > .timeline.timeline-record-type-script > .bar.
+
+2012-08-15  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Add iOS inheritable properties to the inspector to match
+        CSSProperty::isInheritedProperty.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSKeywordCompletions.js:
+
+2012-08-16  Timothy Hatcher  <timothy@apple.com>
+
+        Save and restore the text selection when modifying the DOM representation of the text.
+
+        <rdar://problem/12059199> Selection is lost when scrolling in the source code view
+
+        Reviewed by Darin Adler.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.set selectedTextRange): Return early if null is passed.
+        This allow the callers to avoid a null check.
+        (WebInspector.TextEditor.prototype._breakVisibleTextChunksIntoSingleLineTextChunks):
+        Save at the beginning the text selection, and restore it at the end.
+        (WebInspector.TextEditor.prototype._consolidateHiddenSingleLineTextChunks): Ditto.
+
+2012-08-14  Timothy Hatcher  <timothy@apple.com>
+
+        Make the "Show Error Console" and "Show Page Source" menu items also change the selected navigator
+        to match the view showing in the content browser.
+
+        <rdar://problem/12058796> Web Inspector comes up in an inconsistent state, always showing the console
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.showConsole): Select the Log sidebar.
+        (InspectorFrontendAPI.showMainResourceForFrame): Select the Resource sidebar.
+
+2012-08-03  Timothy Hatcher  <timothy@apple.com>
+
+        Disable pause on exception by default.
+
+        Developers are confused that pause on uncaught exceptions is enabled by default.
+
+        <rdar://problem/12025998>
+
+        Reviewed by Jessie Berlin.
+
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager): Change true to false for the "break-on-all-uncaught-exceptions"
+        setting default value.
+
+2012-08-01  Timothy Hatcher  <timothy@apple.com>
+
+        Update CSSKeywordCompletions.js.
+
+        <rdar://problem/12008709>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSKeywordCompletions.js:  Merge r124016 from WebKit.
+
+2012-08-01  Timothy Hatcher  <timothy@apple.com>
+
+        DOMStorageObserver.updateDOMStorage should be DOMStorageObserver.domStorageUpdated.
+
+        "updateDOMStorage" was renamed to "domStorageUpdated" in WebKit r118349. We need to support
+        the old and new name for backwards compatibility.
+
+        <rdar://problem/12008490>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMStorageObserver.js:
+        (WebInspector.DOMStorageObserver.prototype.updateDOMStorage): Added comment. Call domStorageUpdated.
+        (WebInspector.DOMStorageObserver.prototype.domStorageUpdated): Added. Does what updateDOMStorage did.
+
+2012-07-31  Timothy Hatcher  <timothy@apple.com>
+
+        Show the file and line number instead of a go-to arrow for style rules and event listeners.
+
+        <rdar://problem/11347946> REGRESSION (New Web Inspector): Inspector does not show filename/line number for CSS rules
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style .styles-section .header .title .media a): Added !important to color. Renamed from .subtitle.
+        * UserInterface/DetailsSection.css:
+        (.details-section > .content > .group > .row.simple > .label): Remove duplicate padding property, set padding-left to be 6px.
+        (.details-section > .content > .group > .row.simple > .value): Set padding-right to be 6px.
+        (.details-section > .content > .group > .row.properties): Make left and right padding equal.
+        * UserInterface/EventListenerSectionGroup.css:
+        (.event-listener-section > .content > .group > .row.simple > .value .go-to-arrow): Removed.
+        * UserInterface/EventListenerSectionGroup.js:
+        (WebInspector.EventListenerSectionGroup.prototype._functionTextOrLink): Use WebInspector.createResourceLink.
+        * UserInterface/Main.css:
+        (.go-to-link): Added.
+        (.go-to-link:not(.dont-float)): Added.
+        * UserInterface/Main.js:
+        (WebInspector.createResourceLink): Added.
+        * UserInterface/StylePropertiesSection.js:
+        (WebInspector.StylePropertiesSection): Use WebInspector.createResourceLink.
+        (WebInspector.StylePropertiesSection.prototype._linkify): Removed.
+        (WebInspector.StylePropertiesSection.prototype._createRuleOriginNode): Use WebInspector.createResourceLink.
+
+2012-07-28  Timothy Hatcher  <timothy@apple.com>
+
+        Make reloading while viewing a resource in the Web Inspector show the main resource.
+
+        This keeps you looking at resources instead of dumping you into a log or timeline view.
+        This was only an issue if you had viewed a log or timeline before viewing a resource.
+
+        <rdar://problem/11981540> Reloading while viewing a resource sometimes switches to the Log or Timeline
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameMainResourceDidChange): Remember if the current view was one
+        that we care about before closing them.
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameMainResourceDidChange.delayedWork): Show the main frame since
+        there is no content view showing or we were showing a resource before.
+
+2012-07-28  Timothy Hatcher  <timothy@apple.com>
+
+        Make selection of a navigator in the Web Inspector show the last selected content view from that navigator.
+
+        This makes switching between different content quicker, especially for the Resource, Instrument and Log
+        navigators which have default initial selections.
+
+        <rdar://problem/10854727> Selecting the Log sidebar should select a log by default
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel): Make the Network Requests timeline selected by default.
+        (WebInspector.InstrumentSidebarPanel.prototype.shown):
+        (WebInspector.InstrumentSidebarPanel.prototype._timelinesTreeElementSelected): Deselect any tree element
+        in the main content tree outline to prevent two selections in the sidebar.
+        (WebInspector.InstrumentSidebarPanel.prototype._profileSelected): Deselect any tree element in the timelines
+        tree outline to prevent two selections in the sidebar.
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel.prototype._sessionStarted): Select the Current Log tree element by default the first time.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Move some settings above this.navigationSidebar.selectedSidebarPanel to prevent
+        an exception from accessing them before they are set. This was triggered by the new code in NavigationSidebarPanel.shown.
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel.prototype.shown): Reselect the selected tree element to cause the content view
+        to be shown as well.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameDidChange): Select the main frame tree element by default.
+
+2012-07-26  Timothy Hatcher  <timothy@apple.com>
+
+        Make searching source code via the find banner fast again.
+
+        <rdar://problem/11955081> REGRESSION (New Web Inspector): Searching large resources via Find Banner is dramatically slower than Safari 5
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype.customPerformSearch): Added. Uses the backend agents to do a quick search pass before doing
+        the inner-line matches.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor):
+        (WebInspector.TextEditor.prototype.get currentSearchQuery): Added. Needed by SourceCodeTextEditor.customPerformSearch.
+        (WebInspector.TextEditor.prototype.performSearch): Use searchCleared to fully clear the previous results.
+        (WebInspector.TextEditor.prototype.performSearch.batchSearch): Use addSearchResultRange for adding a new result.
+        (WebInspector.TextEditor.prototype.addSearchResultRange): Added. Factored out of performSearch.batchSearch. Calls _updateLineForSearchResultMatchSoon.
+        (WebInspector.TextEditor.prototype.searchCleared): Clear _pendingSearchResultLineNumbers.
+        (WebInspector.TextEditor.prototype._updateLineForSearchResultMatchSoon): Added. Helper for batching line updates.
+        (WebInspector.TextEditor.prototype._updateLineForSearchResultMatchSoon.delayedWork): Added. Factored out of performSearch.batchSearch.
+
+2012-07-11  Mark Rowe  <mrowe@apple.com>
+
+        Build against the latest SDK when targeting older OS X versions.
+
+        The deployment target is already set to the version that we're targeting, and it's that setting
+        which determines which functionality from the SDK is available to us.
+
+        Reviewed by Dan Bernstein.
+
+        * Configurations/Base.xcconfig:
+
+2012-06-18  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an exception when viewing a JavaScript profile with milliseconds instead of percentages.
+
+        <rdar://problem/11691663> REGRESSION (New Web Inspector): Exception when viewing JavaScript Profile, making profiles unusable
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ProfileDataGridTree.js:
+        (WebInspector.ProfileDataGridNode.prototype.get data.formatMilliseconds): Pass true for the last argument of Number.secondsToString.
+
+2012-06-16  Timothy Hatcher  <timothy@apple.com>
+
+        Show Resource details for the selected row in Network requests.
+
+        <rdar://problem/11683757>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGridNode.prototype.select): Fire the WebInspector.DataGrid.Event.SelectedNodeChanged event.
+        (WebInspector.DataGridNode.prototype.deselect): Ditto.
+        * UserInterface/Main.html: Include ResourceTimelineDataGridNodePathComponent.js.
+        * UserInterface/ResourceTimelineDataGridNodePathComponent.js: Added.
+        (WebInspector.ResourceTimelineDataGridNodePathComponent):
+        (WebInspector.ResourceTimelineDataGridNodePathComponent.prototyp.get resourceTimelineDataGridNode):
+        (WebInspector.ResourceTimelineDataGridNodePathComponent.prototype.get previousSibling):
+        (WebInspector.ResourceTimelineDataGridNodePathComponent.prototype.get nextSibling):
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView): Add WebInspector.DataGrid.Event.SelectedNodeChanged listener.
+        (WebInspector.TimelinesContentView.prototype.get selectionPathComponents): Include a ResourceTimelineDataGridNodePathComponent
+        if the selected node is a ResourceTimelineDataGridNode.
+        (WebInspector.TimelinesContentView.prototype._dataGridNodePathComponentSelected): Added. Reveal and select the node.
+        (WebInspector.TimelinesContentView.prototype._selectedNodeChanged): Dispatch WebInspector.ContentView.Event.SelectionPathComponentsDidChange.
+
+2012-06-09  Timothy Hatcher  <timothy@apple.com>
+
+        Switch the Web Inspector over to use tab-size for the source code view.
+
+        <rdar://problem/11633291> Use tab-size CSS property in the Web Inspector instead of an inline-block
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/SyntaxHighlighter.js:
+        (WebInspector.SyntaxHighlighter.CharacterTokens): Removed \t.
+        * UserInterface/SyntaxHighlightingDefaultTheme.css:
+        (.syntax-highlighted): Added tab-size: 4.
+        (.syntax-highlighted .tab): Removed.
+        * UserInterface/SyntaxHighlightingSupport.js:
+        (WebInspector.createSyntaxHighlightedDocumentFragment): Removed tab token support.
+
+2012-06-07  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11613940> DataGrid column collapser button should have a tooltip
+
+        Reviewed by Darin Adler and Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGrid):
+        (WebInspector.DataGrid.prototype._collapseColumnGroupWithCell):
+        (WebInspector.DataGrid.prototype._collapserButtonCollapseColumnsToolTip):
+        (WebInspector.DataGrid.prototype._collapserButtonExpandColumnsToolTip):
+
+2012-05-30  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Workaround for: <rdar://problem/11536832> Cannot access content view from Instruments navigator if name of file is truncated
+
+        Implement a workaround so that go-to arrows still work in situations
+        where text boxes incorrectly prevent them from being clickable.
+        Giving the arrows a z-index always makes them work.
+
+        Reviewed by Timothy hatcher.
+
+        * UserInterface/Main.css:
+        (.go-to-arrow):
+
+2012-05-25  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11538965> Breakpoint callframe tooltips show wrong line number
+
+        ScriptLocation lineNumber is 0-based. Convert to 1-based for display.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CallFrameTreeElement.js:
+        (WebInspector.CallFrameTreeElement):
+
+2012-05-24  Timothy Hatcher  <timothy@apple.com>
+
+        Make the WebInspector.framework build 32/64-bit universal to match WebKit.
+
+        Since WebKit links against the WebInspector framework, they need to support
+        the same architectures. Otherwise, the framework fails to load when soft
+        linking and the resources aren't found, which causes an exception/crash.
+
+        <rdar://problem/11373948> Crash opening the Web Inspector in 32-bit apps
+
+        Reviewed by Joseph Pecoraro.
+
+        * Configurations/Base.xcconfig: Set VALID_ARCHS to ARCHS_STANDARD_32_64_BIT.
+        * Configurations/DebugRelease.xcconfig: Set ARCHS to ARCHS_STANDARD_32_64_BIT.
+
+2012-05-23  Timothy Hatcher  <timothy@apple.com>
+
+        Fix some occasional assertions and an exception that happens in CSSStyleDetailsSidebarPanel.
+
+        These can happen if there is an error from the protocol when fetching the CSS rules. Now when
+        this happens the sidebar will not show stale data.
+
+        <rdar://problem/11516416>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.matchedStylesCallback): Added fallback values.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.buildSections): Ditto.
+
+2012-05-22  Timothy Hatcher  <timothy@apple.com>
+
+        Fix a regression that would cause resource content to overlap when reloading.
+
+        <rdar://problem/11509620> REGRESSION (r42994): Overlapping content views when navigating
+
+        Reviewed by Kevin Decker.
+
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer.prototype.closeAllContentViewsOfPrototype): Use oldCurrentContentView
+        in the loop. The currentContentView variable is not declared until after the loop, so using currentContentView
+        is just comparing to undefined at this point.
+
+2012-05-21  Timothy Hatcher  <timothy@apple.com>
+
+        Fixes an uncaught exception in WebInspector.ContentBrowser._currentContentViewDidChange.
+
+        This event fires when all content views are closed and there is no longer a current view.
+        The code under this listener was not properly null checking the content view.
+
+        <rdar://problem/11467085> ContentBrowser has uncaught exception on reload needs to handle null currentContentView
+
+        Reviewed by Oliver Hunt.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser.prototype._updateHierarchicalPathNavigationItem): Added null check for representedObject.
+        (WebInspector.ContentBrowser.prototype._updateContentViewSelectionPathNavigationItem): Added null check for contentView.
+        (WebInspector.ContentBrowser.prototype._currentContentViewDidChange): Added null check for currentContentView.
+
+2012-05-16  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11468003> REGRESSION: Error log messages contains wrong line number in jump link
+
+        The Log messages coming from the backend contain the expected, file and 1-based
+        line number. In the Safari inspector _linkifyLocation was adjusting this to 0-based
+        and using the 0-based line number as the display text. The OpenSource inspector's
+        linkifier uses WebInspector.formatLinkText for display text which adds back the 1.
+        The Safari inspector does not have that. We can just display the correct line number.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ConsoleMessageImpl.js:
+        (WebInspector.ConsoleMessageImpl.prototype._linkifyLocation):
+
+2012-05-11  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an issue where the DOM Tree and Source Code would overlap.
+
+        <rdar://problem/11329121> REGRESSION (r42567): Overlapping display DOM Tree and Source Code
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer.prototype.showContentView): Remove assert and call to _removeContentViewElement.
+        The content view is already guaranteed to be removed. The _disassociateFromContentView function now does the assert.
+        (WebInspector.ContentViewContainer.prototype.showBackForwardEntry): Return early if it is the same index. Fire the
+        CurrentContentViewDidChange event here since _showContentView no longer fires it.
+        (WebInspector.ContentViewContainer.prototype.closeAllContentViewsOfPrototype): Remove call to _removeContentViewElement.
+        Only call _showContentView and fire the CurrentContentViewDidChange event if the content view actually changed.
+        (WebInspector.ContentViewContainer.prototype.closeAllContentViews): Remove call to _removeContentViewElement.
+        Fire the CurrentContentViewDidChange event here since _showContentView no longer fires it.
+        (WebInspector.ContentViewContainer.prototype.shown): Call _showContentView instead of _prepareContentViewToShow.
+        (WebInspector.ContentViewContainer.prototype.hidden): Call _hideContentView instead of _prepareContentViewToShow.
+        (WebInspector.ContentViewContainer.prototype._disassociateFromContentView): Added assert for visible.
+        (WebInspector.ContentViewContainer.prototype._showContentView): Added assert for visible. Removed event dispatch.
+        (WebInspector.ContentViewContainer.prototype._hideContentView): Added assert for visible.
+
+2012-05-10  Timothy Hatcher  <timothy@apple.com>
+
+        Timer events in the WebInspector should show where they were scheduled from.
+
+        Depends on: https://webkit.org/b/86173
+
+        <rdar://problem/11427463>
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype.eventRecorded.processRecord): Process TimerFire when the corresponding
+        EvaluateScript or FunctionCall record is encountered so we can gather the resource and line number.
+
+2012-05-10  Timothy Hatcher  <timothy@apple.com>
+
+        Use a static copy of InspectorBackend.js and InspectorBackendCommands.js.
+
+        This fixes a build failure since WebCore renamed the file we were coping.
+
+        For compatibility reasons we should use a static copy of the InspectorBackend instead
+        of copying the latest version from WebCore during the build. Using a stable version of
+        the InspectorBackend guarantees a constant API for the front-end and protocol level
+        changes in WebCore are compatible with older versions of the InspectorBackend.
+
+        <rdar://problem/11426912>
+
+        * Scripts/copy-user-interface-resources.sh: Removed copy commands from derived sources.
+        * UserInterface/InspectorBackend.js: Copied from OpenSource r116449.
+        * UserInterface/InspectorBackendCommands.js: Ditto.
+        * WebInspectorUI.xcodeproj/project.pbxproj: Removed build phase to copy from WebCore.
+
+2012-04-26  Timothy Hatcher  <timothy@apple.com>
+
+        Update the Web Inspector to work with recent protocol changes.
+
+        <rdar://problem/11329835>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeDetailsSidebarPanel.js:
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshProperties.nodeResolved): Pass undefined for the args parameter of callFunction.
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype._createTooltipForNode.resolvedNode): Ditto.
+        * UserInterface/JavaScriptTextPrompt.js:
+        (WebInspector.JavaScriptTextPrompt.prototype.evalInInspectedWindow): Renamed doNotPauseOnExceptions to doNotPauseOnExceptionsAndMuteConsole.
+        Pass doNotPauseOnExceptionsAndMuteConsole to evaluateOnCallFrame.
+        (WebInspector.JavaScriptTextPrompt.prototype._completions.evaluated): Pass undefined for the args parameter of callFunctionJSON.
+        * UserInterface/NetworkObserver.js:
+        (WebInspector.NetworkObserver.prototype.requestWillBeSent): Removed stackTrace parameter.
+        * UserInterface/RemoteObject.js:
+        (WebInspector.RemoteObject.prototype.setPropertyValue): Renamed doNotPauseOnExceptions to doNotPauseOnExceptionsAndMuteConsole.
+        Pass true for doNotPauseOnExceptionsAndMuteConsole in RuntimeAgent.callFunctionOn.
+        (WebInspector.RemoteObject.prototype.callFunction): Added args parameter and pass it along. Pass true for doNotPauseOnExceptionsAndMuteConsole.
+        (WebInspector.RemoteObject.prototype.callFunctionJSON): Ditto.
+
+2012-04-20  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11287053> ApplicationCache sorting Resource column is broken
+
+        The items being sorted in the data grid are ApplicationCacheResources
+        from the Inspector protocol. Those resources do not have a "name"
+        property. Only "url", "size", and "type".        
+
+        Reviewed by Jon Honeycutt.
+
+        * UserInterface/ApplicationCacheFrameContentView.js:
+        (WebInspector.ApplicationCacheFrameContentView.prototype._populateDataGrid):
+
+2012-04-20  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11287121> REGRESSION: Inspector window should move to front when you hit a breakpoint
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/Main.js:
+        (WebInspector._debuggerDidPause):
+
+2012-04-18  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an regression where issues were replacing the content view when they should be inline.
+
+        This also fixes an regression where issue lines were not highlighting because the style class
+        was not being applied, 'undefined' was.
+
+        <rdar://problem/11180526> REGRESSION (r41932-r41943): ResourceContentView was only showing
+        an error message and not content
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ResourceContentView.js:
+        (WebInspector.ResourceContentView): Only add issue event listener and issues if !managesOwnIssues.
+        (WebInspector.ResourceContentView.prototype.closed): Remove issue event listener only if !managesOwnIssues.
+        (WebInspector.ResourceContentView.prototype._issueWasAdded): Assert !managesOwnIssues.
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._addIssueToLine): Use the connect object for the style classes.
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.get managesOwnIssues): Added. Return true.
+
+2012-04-16  Timothy Hatcher  <timothy@apple.com>
+
+        Save and restore the scroll position for content views when hiding and showing.
+
+        <rdar://problem/11184241> REGRESSION (New Web Inspector): Console log view scroll offset
+        does not follow most recent messages
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ApplicationCacheFrameContentView.js:
+        (WebInspector.ApplicationCacheFrameContentView.prototype.get scrollableElements): Added.
+        * UserInterface/ClusterContentView.js:
+        (WebInspector.ClusterContentView.prototype.shown): Call shown directly on the _contentViewContainer.
+        (WebInspector.ClusterContentView.prototype.hidden): Ditto for hidden.
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView.prototype.get visible): Use a simple boolean.
+        (WebInspector.ContentView.prototype.set visible): Ditto.
+        (WebInspector.ContentView.prototype.get scrollableElements): Added stub.
+        (WebInspector.ContentView.prototype.get keepElementsScrolledToTheBottom): Added stub.
+        * UserInterface/ContentViewContainer.css:
+        (.content-view-container > .content-view): Removed. Using display: none was pointless since the
+        element is removed from the DOM. This prevented saving scroll positions.
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer.prototype.shown): Added. Calls _prepareContentViewToShow.
+        (WebInspector.ContentViewContainer.prototype.hidden): Added. Calls _prepareContentViewToHide.
+        (WebInspector.ContentViewContainer.prototype._saveScrollPositionsForContentView): Added.
+        (WebInspector.ContentViewContainer.prototype._restoreScrollPositionsForContentView): Added.
+        (WebInspector.ContentViewContainer.prototype._showContentView): Calls _prepareContentViewToShow.
+        (WebInspector.ContentViewContainer.prototype._prepareContentViewToShow): Added. Calls
+        _restoreScrollPositionsForContentView in addition to the work _showContentView did.
+        (WebInspector.ContentViewContainer.prototype._hideContentView): Calls _prepareContentViewToHide.
+        (WebInspector.ContentViewContainer.prototype._prepareContentViewToHide): Added. Calls
+        _saveScrollPositionsForContentView in addition to the work _hideContentView did.
+        * UserInterface/CookieStorageContentView.js:
+        (WebInspector.CookieStorageContentView.prototype.get scrollableElements): Added.
+        * UserInterface/DOMStorageContentView.js:
+        (WebInspector.DOMStorageContentView.prototype.get scrollableElements): Added.
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView.prototype.get scrollableElements): Added.
+        * UserInterface/DatabaseTableContentView.js:
+        (WebInspector.DatabaseTableContentView.prototype.get scrollableElements): Added.
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView): Removed _scrolledToBottom.
+        (WebInspector.LogContentView.prototype.consoleCleared): Removed _scrolledToBottom.
+        (WebInspector.LogContentView.prototype.hidden): Removed call to storeScrollPositions.
+        (WebInspector.LogContentView.prototype.get scrollableElements): Added.
+        (WebInspector.LogContentView.prototype.get keepElementsScrolledToTheBottom): Added.
+        * UserInterface/ScriptContentView.js:
+        (WebInspector.ScriptContentView.prototype.get scrollableElements): Added.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.get contentContainerElement): Added.
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.prototype.get scrollableElements): Added.
+
+2012-04-14  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for searching the DOM tree with the Find Banner.
+
+        Part of: <rdar://problem/11039642> REGRESSION (New Web Inspector): Can't search in the DOM tree and source
+        code view (no Find banner is present)
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView.prototype.get supportsSearch): Added. Return true.
+        (WebInspector.DOMTreeContentView.prototype.get numberOfSearchResults): Added.
+        (WebInspector.DOMTreeContentView.prototype.performSearch): Added. Clear previous results and call
+        DOMAgent.performSearch.
+        (WebInspector.DOMTreeContentView.prototype.performSearch.searchResultsReady): Store the identifier and
+        fire the NumberOfSearchResultsDidChange event.
+        (WebInspector.DOMTreeContentView.prototype.searchCleared): Added. Clear the result and state.
+        (WebInspector.DOMTreeContentView.prototype.revealPreviousSearchResult): Added. Call _revealSearchResult.
+        (WebInspector.DOMTreeContentView.prototype.revealNextSearchResult): Added. Ditto.
+        (WebInspector.DOMTreeContentView.prototype._revealSearchResult): Added. Call DOMAgent.getSearchResults.
+        (WebInspector.DOMTreeContentView.prototype._revealSearchResult.revealResult): Select the DOM node.
+
+2012-04-14  Timothy Hatcher  <timothy@apple.com>
+
+        Show the yellow bouncy when highlighting the current search result.
+
+        Part of: <rdar://problem/11039642> REGRESSION (New Web Inspector): Can't search in the DOM tree and source
+        code view (no Find banner is present)
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/TextEditor.css:
+        (.text-editor .bouncy-highlight): Added.
+        (@-webkit-keyframes bouncy): Added.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype._revealSearchResultTextRange): Create and add the bouncy element,
+        positioned to line up with the search result element.
+
+2012-04-13  Timothy Hatcher  <timothy@apple.com>
+
+        Support searching via the find banner on text resources and scripts.
+
+        Part of: <rdar://problem/11039642> REGRESSION (New Web Inspector): Can't search in the DOM tree and source
+        code view (no Find banner is present)
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ScriptContentView.js:
+        (WebInspector.ScriptContentView): Add event listener for TextEditor.Event.NumberOfSearchResultsDidChange.
+        (WebInspector.ScriptContentView.prototype.get supportsSearch): Return true.
+        (WebInspector.ScriptContentView.prototype.get numberOfSearchResults): Forward to _textEditor.
+        (WebInspector.ScriptContentView.prototype.performSearch): Ditto.
+        (WebInspector.ScriptContentView.prototype.searchCleared): Ditto.
+        (WebInspector.ScriptContentView.prototype.revealPreviousSearchResult): Ditto.
+        (WebInspector.ScriptContentView.prototype.revealNextSearchResult): Ditto.
+        (WebInspector.ScriptContentView.prototype._numberOfSearchResultsDidChange): Added. Fire ContentView.Event.NumberOfSearchResultsDidChange.
+        * UserInterface/SyntaxHighlighter.js:
+        * UserInterface/SyntaxHighlightingDefaultTheme.css:
+        (.supports-find-banner.showing-find-banner .syntax-highlighted .search-result): Added.
+        * UserInterface/SyntaxHighlightingSupport.js:
+        (WebInspector.createSyntaxHighlightedDocumentFragment.createTokenElement): Added parameter for search result. Append the search-result
+        class when needed. Fixes the quoting for links now that the attribute range can be split by a search result.
+        (WebInspector.createSyntaxHighlightedDocumentFragment.appendText): Changed to work with enumerateAttributes instead of enumerateAttribute.
+        Check for the search result attribute. Call createTokenElement for search results.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.get numberOfSearchResults): Added.
+        (WebInspector.TextEditor.prototype.performSearch): Added. Iterate over the lines in batches to prevent blocking too long.
+        (WebInspector.TextEditor.prototype.performSearch.reportNumberOfSearchResultsDidChange):
+        (WebInspector.TextEditor.prototype.performSearch.batchSearch): Loop over lines and perform a regex to find matches.
+        (WebInspector.TextEditor.prototype.searchCleared): Added. Clear the results and remove the attribute from the lines.
+        (WebInspector.TextEditor.prototype.revealPreviousSearchResult): Added. Decrement the index and call _revealSearchResultTextRange.
+        (WebInspector.TextEditor.prototype.revealNextSearchResult): Added. Increment the index and call _revealSearchResultTextRange.
+        (WebInspector.TextEditor.prototype._revealSearchResultTextRange): Added. Helper for revealPreviousSearchResult and revealNextSearchResult.
+        (WebInspector.TextEditor.prototype._removeSearchResultStyles): Added. Query for all the search results and remove the style.
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView): Add event listener for TextEditor.Event.NumberOfSearchResultsDidChange.
+        (WebInspector.TextResourceContentView.prototype.get supportsSearch): Return true.
+        (WebInspector.TextResourceContentView.prototype.get numberOfSearchResults): Forward to _textEditor.
+        (WebInspector.TextResourceContentView.prototype.performSearch): Ditto.
+        (WebInspector.TextResourceContentView.prototype.searchCleared): Ditto.
+        (WebInspector.TextResourceContentView.prototype.revealPreviousSearchResult): Ditto.
+        (WebInspector.TextResourceContentView.prototype.revealNextSearchResult): Ditto.
+        (WebInspector.TextResourceContentView.prototype._numberOfSearchResultsDidChange): Added. Fire ContentView.Event.NumberOfSearchResultsDidChange.
+
+2012-04-13  Timothy Hatcher  <timothy@apple.com>
+
+        Add keyboard shortcuts for next and previous search results.
+
+        Part of: <rdar://problem/11039642> REGRESSION (New Web Inspector): Can't search in the DOM tree
+        and source code view (no Find banner is present)
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/FindBanner.js:
+        (WebInspector.FindBanner): Added keyboard shortcuts for Command-G and Command-Shift-G.
+
+2012-04-05  Timothy Hatcher  <timothy@apple.com>
+
+        Add support to WebInspector.ContentView for dealing with the find banner.
+
+        Part of: <rdar://problem/11039642> REGRESSION (New Web Inspector): Can't search in the DOM tree and
+        source code view (no Find banner is present)
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ClusterContentView.js:
+        (WebInspector.ClusterContentView):
+        (WebInspector.ClusterContentView.prototype.get supportsSearch): Added. Always return true.
+        (WebInspector.ClusterContentView.prototype.get numberOfSearchResults): Added. Forward to the current content view.
+        (WebInspector.ClusterContentView.prototype.performSearch): Added. Ditto.
+        (WebInspector.ClusterContentView.prototype.searchCleared): Added. Ditto.
+        (WebInspector.ClusterContentView.prototype.revealPreviousSearchResult): Added. Ditto.
+        (WebInspector.ClusterContentView.prototype.revealNextSearchResult): Added. Ditto.
+        (WebInspector.ClusterContentView.prototype._currentContentViewDidChange): Dispatch the
+        NumberOfSearchResultsDidChange event.
+        (WebInspector.ClusterContentView.prototype._contentViewNumberOfSearchResultsDidChange): Re-dispatch
+        the NumberOfSearchResultsDidChange event with this content view as the target.
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser):
+        (WebInspector.ContentBrowser.prototype.findBannerPerformSearch): Added. Forward to the current content view.
+        (WebInspector.ContentBrowser.prototype.findBannerSearchCleared): Added. Ditto.
+        (WebInspector.ContentBrowser.prototype.findBannerRevealPreviousResult): Added. Ditto.
+        (WebInspector.ContentBrowser.prototype.findBannerRevealNextResult): Added. Ditto.
+        (WebInspector.ContentBrowser.prototype._showFindBanner): Don't show if the current content view does not support search.
+        (WebInspector.ContentBrowser.prototype._contentViewNumberOfSearchResultsDidChange): Added. Update the find banner.
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView.prototype.get supportsSearch): Added stub.
+        (WebInspector.ContentView.prototype.get numberOfSearchResults): Added stub.
+        (WebInspector.ContentView.prototype.performSearch): Added stub.
+        (WebInspector.ContentView.prototype.searchCleared): Added stub.
+        (WebInspector.ContentView.prototype.revealPreviousSearchResult): Added stub.
+        (WebInspector.ContentView.prototype.revealNextSearchResult): Added stub.
+        * UserInterface/FindBanner.js:
+        (WebInspector.FindBanner): Added event listeners.
+        (WebInspector.FindBanner.prototype._inputFieldChanged): Added. Call the delegate.
+        (WebInspector.FindBanner.prototype._previousResultButtonClicked): Added. Ditto.
+        (WebInspector.FindBanner.prototype._nextResultButtonClicked): Added. Ditto.
+
+2012-04-02  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.FindBanner which implements the user interface for searching in content views.
+
+        The banner shows via Command-F and hides with Escape. Searching is not hooked up yet.
+
+        Part of: <rdar://problem/11039642> REGRESSION (New Web Inspector): Can't search in the
+        DOM tree and source code view (no Find banner is present)
+
+        Reviewed by Brian Weinstein.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser): Create a FindBanner and keyboard shortcut for Command-F.
+        (WebInspector.ContentBrowser.prototype._showFindBanner): Added.
+        (WebInspector.ContentBrowser.prototype._currentContentViewDidChange): Change the target element
+        of the find banner to the new content view.
+        * UserInterface/ContentViewContainer.css:
+        (.content-view-container): Added overflow hidden so the find-banner does not show when hidden.
+        (.content-view-container > .content-view): Ditto.
+        * UserInterface/FindBanner.css: Added.
+        * UserInterface/FindBanner.js: Added.
+        (WebInspector.FindBanner):
+        (WebInspector.FindBanner.prototype.get delegate):
+        (WebInspector.FindBanner.prototype.set delegate):
+        (WebInspector.FindBanner.prototype.get element):
+        (WebInspector.FindBanner.prototype.get inputField):
+        (WebInspector.FindBanner.prototype.get searchQuery):
+        (WebInspector.FindBanner.prototype.set searchQuery):
+        (WebInspector.FindBanner.prototype.get numberOfResults):
+        (WebInspector.FindBanner.prototype.set numberOfResults):
+        (WebInspector.FindBanner.prototype.get targetElement):
+        (WebInspector.FindBanner.prototype.set targetElement.delayedWork):
+        (WebInspector.FindBanner.prototype.set targetElement):
+        (WebInspector.FindBanner.prototype.show.delayedWork):
+        (WebInspector.FindBanner.prototype.show):
+        (WebInspector.FindBanner.prototype.hide):
+        (WebInspector.FindBanner.prototype._doneButtonClicked):
+        (WebInspector.FindBanner.prototype._generateButtonsGlyphsIfNeeded):
+        * UserInterface/Main.html: Included FindBanner.css and FindBanner.js.
+
+2012-04-13  Timothy Hatcher  <timothy@apple.com>
+
+        Use searchRegex.lastIndex instead of lineMatch.index + searchTerm.length.
+
+        When creating TextRanges in SearchSidebarPanel it is better to use lastIndex instead of the search term length.
+        This isn't a bug now, but it could be later when we support regex search queries in addition of plan text searches.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel.prototype.performSearch.resourcesCallback.resourceCallback): Use searchRegex.lastIndex.
+        (WebInspector.SearchSidebarPanel.prototype.performSearch.domCallback.domSearchResults): Ditto.
+
+2012-04-05  Timothy Hatcher  <timothy@apple.com>
+
+        Add better support for getting and setting the text selection in WebInspector.TextEditor.
+
+        This will be needed for the find banner support. <rdar://problem/11193282>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.get selectedTextRange): Added.
+        (WebInspector.TextEditor.prototype.set selectedTextRange): Added.
+        (WebInspector.TextEditor.prototype.revealLine): Use the selectedTextRange setter.
+        (WebInspector.TextEditor.prototype._textRangeToDOMRange): Added. Use _textPositionToDOMLocation
+        to get the start and end and make a new Range.
+        (WebInspector.TextEditor.prototype._domRangeToTextRange): Added. Use _domLocationToTextPosition
+        to get the start and end and make a new TextRange.
+        (WebInspector.TextEditor.prototype._domLocationToTextPosition): Added.
+        (WebInspector.TextEditor.prototype._textPositionToDOMLocation): Added.
+        (WebInspector.TextEditorTextChunk): Set _textChunk on the element.
+        * UserInterface/Utilities.js:
+        (Node.prototype.traverseNextTextNode): Added. Copied from OpenSource utilities.js.
+        (Node.prototype.rangeBoundaryForOffset): Added. Ditto.
+
+2012-04-02  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for disabling keyboard shortcuts and unbinding them altogether.
+
+        You might disable a shortcut to make it only apply when a content view is showing, but still
+        have the shortcut be global. Also added support for unbinding a shortcut if you need to remove
+        it altogether from the document.
+
+        This is likely to be required for find banner support.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/KeyboardShortcut.js:
+        (WebInspector.KeyboardShortcut):
+        (WebInspector.KeyboardShortcut.prototype.get disabled): Added.
+        (WebInspector.KeyboardShortcut.prototype.set disabled): Added.
+        (WebInspector.KeyboardShortcut.prototype.unbind): Added. Removes the shortcut from the target.
+        (WebInspector.KeyboardShortcut.prototype.matchesEvent): Return early if disabled.
+
+2012-04-02  Timothy Hatcher  <timothy@apple.com>
+
+        Make it possible to generate colored images at different sizes than the intrinsic image size.
+
+        This is useful when the input image is a PDF and a different size is needed. This support
+        is needed for the find banner back/forward arrows.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ImageUtilities.js:
+        (generateColoredImage): Added optional width and height parameters. Use the intrinsic width and
+        height as fallback.
+        (generateColoredImagesForCSS.generateImage): Pull the width and height out of the specification.
+        Use the intrinsic width and height as fallback. Pass the width and height to generateColoredImage
+        with a scale of 1 now that the pixelRatio is now premultiplied in the width and height.
+
+2012-04-02  Timothy Hatcher  <timothy@apple.com>
+
+        Tweak the colors and gradients used by the search sidebar to match other bars in the Web Inspector.
+
+        If only we had variables in CSS...
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/SearchSidebarPanel.css:
+        (.sidebar > .panel.search > .search-bar): Tweaked the colors to match the ones in TimelinesContentView.css
+        the upcoming FindBanner.css.
+
+2012-04-12  Timothy Hatcher  <timothy@apple.com>
+
+        Create a funnel point for display names of URLs and hosts, and properly decode lastPathComponent.
+
+        This decodes lastPathComponent as a URL escaped string. The host needs to be decoded as a punycode string,
+        but that isn't easily done in JavaScript so <rdar://problem/11237413> tracks that.
+
+        <rdar://problem/11236933> High-ascii web addresses show corrupted in Web Inspector
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ApplicationCacheFrameContentView.js:
+        (WebInspector.ApplicationCacheFrameContentView.prototype._updateCallback): Remove unused lastPathComponent var.
+        * UserInterface/ApplicationCacheFrameTreeElement.js:
+        (WebInspector.ApplicationCacheFrameTreeElement.prototype.updateTitles): Use displayNameForURL and displayNameForHost.
+        * UserInterface/ApplicationCacheManifestTreeElement.js:
+        (WebInspector.ApplicationCacheManifestTreeElement.prototype._generateTitles): Ditto.
+        * UserInterface/CallFrameTreeElement.js:
+        (WebInspector.CallFrameTreeElement): Use displayNameForURL.
+        * UserInterface/ConsoleMessageImpl.js:
+        (WebInspector.ConsoleMessageImpl.prototype._linkifyLocation): Ditto.
+        * UserInterface/CookieStorageTreeElement.js:
+        (WebInspector.CookieStorageTreeElement): Use displayNameForHost.
+        * UserInterface/DOMStorageTreeElement.js:
+        (WebInspector.DOMStorageTreeElement): Ditto.
+        (WebInspector.DOMStorageTreeElement.prototype.get name): Ditto.
+        * UserInterface/DatabaseHostTreeElement.js:
+        (WebInspector.DatabaseHostTreeElement): Ditto.
+        (WebInspector.DatabaseHostTreeElement.prototype.get name): Ditto.
+        * UserInterface/EventListenerSectionGroup.js:
+        (WebInspector.EventListenerSectionGroup.prototype._functionTextOrLink): Use displayNameForURL.
+        * UserInterface/Main.js:
+        (WebInspector.displayNameForURL): Added. Use decodeURIComponent for lastPathComponent and displayNameForHost for host.
+        (WebInspector.displayNameForHost): Added. Returns the input, with a comment about decoding punycode.
+        (WebInspector.updateWindowTitle): Use decodeURIComponent for lastPathComponent and displayNameForHost for host.
+        * UserInterface/ProfileDataGridTree.js:
+        (WebInspector.ProfileDataGridNode.prototype._linkifyLocation): Use displayNameForURL.
+        * UserInterface/ResourceTimelineDataGridNode.js:
+        (WebInspector.ResourceTimelineDataGridNode.prototype.get data): Use displayNameForURL and displayNameForHost.
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement.prototype._updateTitles): Ditto.
+        * UserInterface/ScriptTimelineDataGridNode.js:
+        (WebInspector.ScriptTimelineDataGridNode.prototype.createCellContent): Use displayNameForURL.
+        * UserInterface/ScriptTreeElement.js:
+        (WebInspector.ScriptTreeElement): Use displayNameForURL and displayNameForHost.
+
+2012-04-11  Timothy Hatcher  <timothy@apple.com>
+
+        Strip common error message prefixes from the message line in the Issue sidebar.
+
+        The prefix is used to determine the title line, so it redundant to include it in the message.
+        And removing it from the message gives more room for the important info of the message.
+
+        <rdar://problem/11219712> Can't see entire content of errors in the Issue sidebar
+
+        Reviewed by Brian Weinstein.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/IssueMessage.js:
+        (WebInspector.IssueMessage): Determine the type based on source and text prefix matching.
+        Removed _source property, and added _type to replace it.
+        (WebInspector.IssueMessage.Type.displayName): Added.
+        (WebInspector.IssueMessage.prototype.get type): Renamed from source and return _type instead.
+        * UserInterface/IssueTreeElement.js:
+        (WebInspector.IssueTreeElement): Use a switch for the level instead of raw string comparison.
+        Use WebInspector.IssueMessage.Type.displayName to get the title.
+        (WebInspector.IssueTreeElement.titleForIssue): Removed.
+
+2012-04-09  Timothy Hatcher  <timothy@apple.com>
+
+        Add keyboard shortcuts for pause/continue, step over, step into and step out.
+
+        This matches Xcode's keyboard shortcuts and also supports the original Web Inspector
+        keyboard shortcuts for compatibility.
+
+        <rdar://problem/11205675> Debugger keyboard shortcuts are broken (step into, step over, etc)
+
+        Reviewed by John Sullivan.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole): Create the KeyboardShortcuts and show them in the tooltips.
+        (WebInspector.QuickConsole.prototype.set collapsed): Add the keyboard shortcut to the tooltips.
+        (WebInspector.QuickConsole.prototype._debuggerDidPause): Ditto.
+        (WebInspector.QuickConsole.prototype._debuggerDidResume): Ditto.
+
+2012-04-07  Timothy Hatcher  <timothy@apple.com>
+
+        Make the completion popup look like the one in Xcode.
+
+        <rdar://problem/11201824> Console: Autocomplete suggestion list is ugly (has wrong typeface)
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/TextPrompt.css:
+        (.suggest-box):
+        (.suggest-box .container):
+        (.suggest-box-content-item):
+        (.suggest-box-content-item.selected):
+        * UserInterface/TextPrompt.js:
+        (WebInspector.TextPrompt.SuggestBox.prototype._updateBoxPosition): Adjusted padding. Impose a max
+        height of 160, which turns out to be 10 items.
+
+2012-04-07  Timothy Hatcher  <timothy@apple.com>
+
+        Make the completion popup work when the console is scrolled.
+
+        <rdar://problem/11184504> "Current Log" console input is way broken when using inline completion popup
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Utilities.js:
+        (Element.prototype.offsetRelativeToWindow): Removed. boxInWindow was the only client.
+        (Element.prototype.boxInWindow): Removed targetWindow parameter, the only client always passed 'window'.
+        Use getClientRects instead of the broken offsetRelativeToWindow.
+
+2012-04-06  Timothy Hatcher  <timothy@apple.com>
+
+        Make console completion behave more like Xcode's auto completion.
+
+        This makes the suggestion popup appear for single items and completions are always shown
+        as unselected grey text, not a selected range. The tab key now also accepts the completion.
+
+        <rdar://problem/11201751> Console: Tab to autocomplete does not work
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TextPrompt.js:
+        (WebInspector.TextPrompt.prototype._completionsReady): Always pass true for canShowForSingleItem when call
+        _suggestBox.updateSuggestions.
+        (WebInspector.TextPrompt.prototype._completionsReady): Remove the auto completion path. There is now only
+        one completion style, handled by applySuggestion.
+        (WebInspector.TextPrompt.prototype.applySuggestion): Don't select the completion, do the what _completionsReady
+        did for the auto complete path -- create an auto complete element for the grey text.
+        (WebInspector.TextPrompt.prototype.tabKeyPressed): Call tabKeyPressed on _suggestBox to accept the completion
+        instead of doing nothing.
+
+2012-04-06  Timothy Hatcher  <timothy@apple.com>
+
+        Make the reload keyboard shortcut work when an input field is focused.
+
+        This makes the reload shortcuts and quick console toggle use the KeyboardShortcut class.
+
+        <rdar://problem/11187008> Web Inspector is very picky about what has to be focused in order to reload the page
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Remove keydown event listener. Added reload keyboard shortcuts.
+        (WebInspector._reloadPage): Added.
+        (WebInspector._reloadPageIgnoringCache): Added.
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole): Added toggle or focus keyboard shortcut.
+        (WebInspector.QuickConsole.prototype._toggleOrFocus): Added.
+
+2012-04-02  Timothy Hatcher  <timothy@apple.com>
+
+        Select the contents of the search field when pressing the Command-Shift-F keyboard shortcut.
+
+        In addition to focusing the field, we now select the contents. This matches behavior of all
+        search fields tied to keyboard shortcuts.
+
+        <rdar://problem/11169101>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel.prototype._focusSearchField): Call select() on the field.
+
+2012-04-05  Timothy Hatcher  <timothy@apple.com>
+
+        Make clicking search results select the text range again.
+
+        This broke when the TextEditor content element was made user modifiable. When a user modifiable region is blurred
+        it loses its selection. To prevent this we make it user modifiable only when focused.
+
+        <rdar://problem/11193282> REGRESSION (r42062): Search results are not selected when clicked in the Search sidebar
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/TextEditor.css:
+        (.text-editor > .content-container > .content): Removed -webkit-user-modify.
+        (.text-editor > .content-container > .content:focus): Added. Set -webkit-user-modify here when focused.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor): Set a tabIndex so the content can be focused when not user modifiable.
+
+2012-03-31  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11160188> Headers in resource details sidebar panel should be sortable
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._createNameValueDataGrid.sortDataGrid.comparator):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._createNameValueDataGrid.sortDataGrid):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._createNameValueDataGrid):
+
+2012-03-30  Timothy Hatcher  <timothy@apple.com>
+
+        Prevent dragging and dropping everywhere except editable fields in the Web Inspector.
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Added dragover event listener.
+        (WebInspector._dragOver): Added. Prevent the drop from being accepted unless the target
+        is an editable field.
+
+2012-03-30  Timothy Hatcher  <timothy@apple.com>
+
+        Make revealing line numbers in the Web Inspector work again in all cases.
+
+        This removes line number revealing from SourceCodeTextEditor and merges the extra logic that
+        SourceCodeTextEditor had down into TextEditor. The problem was in WebInspector.TextEditor.shown,
+        where _lineNumberToReveal was being deleted before SourceCodeTextEditor could use it.
+
+        <rdar://problem/11148983> REGRESSION: Debugger does not scroll execution line into view when
+        pausing in the debugger
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor.prototype._contentDidPopulate): Remove call to
+        _revealPendingLineIfPossible.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.shown): Call _revealPendingLineIfPossible instead of revealLine.
+        (WebInspector.TextEditor.prototype.revealLine): Delete _lineNumberToReveal now that the reveal
+        is likely to happen.
+        (WebInspector.TextEditor.prototype._revealPendingLineIfPossible): Added.
+        (WebInspector.TextEditor.prototype._reset): Call _revealPendingLineIfPossible.
+
+2012-03-29  Timothy Hatcher  <timothy@apple.com>
+
+        Switch to the new current log when reloading the page while viewing the current log.
+
+        <rdar://problem/11145724> Reloading the page should switch to Current Log
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel.prototype._sessionStarted): Select the new Current Log
+        if the current view is the previously active content view.
+
+2012-03-29  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10657781> Remote Inspector: Improve Generic Searching for Node "Inspect Element Eyeglass"
+
+        Match Open Source and add the two second highlight for inspected
+        nodes. This is very useful for the Remote Inspector when using
+        node searching.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.js:
+        (WebInspector._domNodeWasInspected):
+
+2012-03-28  Timothy Hatcher  <timothy@apple.com>
+
+        Add keyboard shortcuts for back and forward in the content browser.
+
+        The shortcuts are Command-Control-Left and Command-Control-Right.
+
+        Part of: <rdar://problem/10947746> Add keyboard shortcuts for common actions in the new Web Inspector
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser): Create the KeyboardShortcuts and add the shortcut to the button tooltips.
+
+2012-03-28  Timothy Hatcher  <timothy@apple.com>
+
+        Add keyboard shortcuts for toggling the navigation and details sidebars.
+
+        The shortcuts are Control-0 and Control-Shift-0.
+
+        Part of: <rdar://problem/10947746> Add keyboard shortcuts for common actions in the new Web Inspector
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create the KeyboardShortcuts.
+        (WebInspector._leftSidebarToggleButtonToolTip): Include the keyboard shortcut.
+        (WebInspector._rightSidebarToggleButtonToolTip): Ditto.
+
+2012-03-28  Timothy Hatcher  <timothy@apple.com>
+
+        Add keyboard shortcuts for the details sidebar panels.
+
+        The shortcuts are Control-Shift-1, Control-Shift-2, etc.
+
+        Part of: <rdar://problem/10947746> Add keyboard shortcuts for common actions in the new Web Inspector
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/AppearanceDetailsSidebarPanel.js:
+        (WebInspector.AppearanceDetailsSidebarPanel): Pass "4" as the keyboard shortcut key.
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel): Pass "3" as the keyboard shortcut key.
+        * UserInterface/DOMDetailsSidebarPanel.js:
+        (WebInspector.DOMDetailsSidebarPanel): Pass the keyboard shortcut key through.
+        * UserInterface/DOMNodeDetailsSidebarPanel.js:
+        (WebInspector.DOMNodeDetailsSidebarPanel): Pass "2" as the keyboard shortcut key.
+        * UserInterface/DetailsSidebarPanel.js:
+        (WebInspector.DetailsSidebarPanel): Create a KeyboardShortcut and add it to the displayName.
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel): Pass "1" as the keyboard shortcut key.
+        * UserInterface/ScopeChainDetailsSidebarPanel.js:
+        (WebInspector.ScopeChainDetailsSidebarPanel): Pass "5" as the keyboard shortcut key.
+
+2012-03-28  Timothy Hatcher  <timothy@apple.com>
+
+        Add keyboard shortcuts for the navigation sidebar panels.
+
+        The shortcuts are Control-1, Control-2, etc. We don't use Command to prevent conflicting with
+        Safari's existing bookmarks bar commands.
+
+        Part of: <rdar://problem/10947746> Add keyboard shortcuts for common actions in the new Web Inspector
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/BreakpointSidebarPanel.js:
+        (WebInspector.BreakpointSidebarPanel): Pass "7" as the keyboard shortcut key.
+        * UserInterface/DebugSidebarPanel.js:
+        (WebInspector.DebugSidebarPanel): Pass "6" as the keyboard shortcut key.
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel): Pass "3" as the keyboard shortcut key.
+        * UserInterface/IssueSidebarPanel.js:
+        (WebInspector.IssueSidebarPanel): Pass "5" as the keyboard shortcut key.
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel): Pass "8" as the keyboard shortcut key.
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel): Create a KeyboardShortcut and add it to the displayName.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel): Pass "1" as the keyboard shortcut key.
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel): Pass "4" as the keyboard shortcut key.
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel): Pass "2" as the keyboard shortcut key.
+
+2012-03-28  Timothy Hatcher  <timothy@apple.com>
+
+        Make it easier to properly show a sidebar panel in the Web Inspector.
+
+        This adds a show function to SidebarPanel that reveals the Sidebar if needed and selects
+        the sidebar panel. For navigation sidebar panels it also focuses the TreeOutline.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.stopProfilingJavaScript): Use show().
+        * UserInterface/Main.js:
+        (WebInspector._debuggerDidPause): Use show().
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel.prototype.show): Added. Call the superclass show and focus the tree.
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel.prototype._focusSearchField): Use show().
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar.prototype.addSidebarPanel): Use insertSidebarPanel.
+        (WebInspector.Sidebar.prototype.insertSidebarPanel): Set the _parentSidebar to this.
+        (WebInspector.Sidebar.prototype.removeSidebarPanel): Set the _parentSidebar to null.
+        * UserInterface/SidebarPanel.js:
+        (WebInspector.SidebarPanel.prototype.get parentSidebar): Added.
+        (WebInspector.SidebarPanel.prototype.show): Added.
+
+2012-03-28  Timothy Hatcher  <timothy@apple.com>
+
+        Add support to WebInspector.KeyboardShortcut for specifying a target element and callback.
+
+        This adds support for Command-Shift-F to focus the search field as the first shortcut.
+
+        Part of: <rdar://problem/10947746> Add keyboard shortcuts for common actions in the new Web Inspector
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/KeyboardShortcut.js:
+        (WebInspector.KeyboardShortcut): Added targetElement and callback parameters. Register a keydown listener.
+        (WebInspector.KeyboardShortcut._handleKeyDown): Added. Walk the tree from the target and check for matching
+        keyboard shortcuts.
+        (WebInspector.KeyboardShortcut.prototype.get callback): Added.
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel): Create a KeyboardShortcut for Command-Shift-F to focus the search field.
+        (WebInspector.SearchSidebarPanel.prototype._focusSearchFiled): Added.
+
+2012-03-28  Timothy Hatcher  <timothy@apple.com>
+
+        Reintroduce WebInspector.KeyboardShortcut as a proper class.
+
+        Part of: <rdar://problem/10947746> Add keyboard shortcuts for common actions in the new Web Inspector
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/EditingSupport.js:
+        (WebInspector.startEditing.defaultFinishHandler): Use KeyboardShortcut.Key.Escape.keyCode instead of
+        KeyboardShortcut.Keys.Esc.code.
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController): Remove the _shortcuts object and assign individual shortcuts.
+        (WebInspector.JavaScriptLogViewController.prototype._promptKeyDown): Call matchesEvent on each shortcut.
+        * UserInterface/KeyboardShortcut.js: Added.
+        (WebInspector.KeyboardShortcut):
+        (WebInspector.Key):
+        (WebInspector.Key.prototype.get keyCode):
+        (WebInspector.Key.prototype.get displayName):
+        (WebInspector.Key.prototype.toString):
+        (WebInspector.KeyboardShortcut.prototype.get modifiers):
+        (WebInspector.KeyboardShortcut.prototype.get key):
+        (WebInspector.KeyboardShortcut.prototype.get displayName):
+        (WebInspector.KeyboardShortcut.prototype.matchesEvent):
+        * UserInterface/StylePropertyTreeElement.js:
+        (WebInspector.StylePropertyTreeElement.prototype.editingNameValueKeyDown): Use KeyboardShortcut.Key
+        instead of KeyboardShortcut.Keys.
+
+2012-03-28  Timothy Hatcher  <timothy@apple.com>
+
+        Remove WebInspector.KeyboardShortcut, soon to be replaced by a better version.
+
+        Part of: <rdar://problem/10947746> Add keyboard shortcuts for common actions in the new Web Inspector
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/KeyboardShortcut.js: Removed.
+
+2012-03-26  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an issue where Inspect Element would sometimes not stick and the DOM node selection would revert to
+        the previous selected DOM node.
+
+        <rdar://problem/11122326> Using the Inspect Element content menu sometimes fails to select the right DOM node
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView.prototype._rootDOMNodeAvailable.selectNode): Return early if the DOM tree
+        has a selection already. A selection can be made while waiting for the async reply.
+
+2012-03-26  Timothy Hatcher  <timothy@apple.com>
+
+        Add some missing checks to the DOMNodeDetailsSidebarPanel.
+
+        This prevents updating the interface if the DOM node selection changed while waiting for a response about
+        the previous node from the backend.
+
+        Reviewed by Ada Chan.
+
+        * UserInterface/DOMNodeDetailsSidebarPanel.js:
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshProperties.nodePrototypesReady): Return early if the
+        DOM node does not match the current DOM node. The DOM node changed while we were waiting for the async response.
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshProperties.fillSection): Ditto.
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshEventListeners.eventListenersCallback): Ditto.
+
+2012-03-25  Timothy Hatcher  <timothy@apple.com>
+
+        Use DetailsSectionPropertiesRow for the DOM node Properties section.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNodeDetailsSidebarPanel.css: Removed.
+        * UserInterface/DOMNodeDetailsSidebarPanel.js:
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshProperties.fillSection): Create a
+        DetailsSection and DetailsSectionPropertiesRow for each prototype.
+        * UserInterface/DetailsSection.css: Set margin-bottom to -1px so nested section borders
+        collapse into a single border.
+        (.details-section):
+        * UserInterface/Main.html: Removed DOMNodeDetailsSidebarPanel.css.
+
+2012-03-24  Timothy Hatcher  <timothy@apple.com>
+
+        Make Select All only select the text content of the resource.
+
+        To do this content element needs to either be in an iframe or editable. Working with frames is
+        pretty annoying, so making the content editable was the best option. But since we don't support
+        editing resources yet, we need to prevent the editing from occurring.
+
+        <rdar://problem/11039596> REGRESSION (New Web Inspector): Select all while viewing source selects
+        info in Details sidebar
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/TextEditor.css:
+        (.text-editor > .content-container > .content): Added -webkit-user-modify: read-write-plaintext-only.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor): Added event listeners for keydown, textInput and webkitEditableContentChanged.
+        (WebInspector.TextEditor.prototype._preventKeyDown): Added. Allow command keys and page up, page down,
+        home, end, up, down, left, right.
+        (WebInspector.TextEditor.prototype._preventTextInput): Added. Prevent paste and other input.
+        (WebInspector.TextEditor.prototype._editableContentChanged): Added. Do a reset if this happens.
+
+2012-03-24  Timothy Hatcher  <timothy@apple.com>
+
+        Remove WebInspector.isMac() and the dead code that came with it.
+
+        Rubber-stamped by Dan Bernstein.
+
+        * UserInterface/EditingSupport.js:
+        (WebInspector.startEditing.defaultFinishHandler):
+        (WebInspector.setCurrentFocusElement):
+        * UserInterface/KeyboardShortcut.js:
+        (WebInspector.KeyboardShortcut._modifiersToString):
+        * UserInterface/TextPrompt.js:
+        (WebInspector.TextPromptWithHistory.prototype.defaultKeyHandler):
+
+2012-03-22  Timothy Hatcher  <timothy@apple.com>
+
+        Make the Web Inspector DataGrid sort indicator be HiDPI compliant.
+
+        Part of: <rdar://problem/10643175> DataGrid sort indicator arrow and Timeline pills/callouts should be made HiDPI compliant
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DataGrid.css:
+        (.data-grid th.sort-ascending > div:first-child::after): Use the canvas based image.
+        (.data-grid th.sort-descending > div:first-child::after): Ditto.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGrid): Call _generateSortIndicatorImagesIfNeeded.
+        (WebInspector.DataGrid.prototype._generateSortIndicatorImagesIfNeeded): Added.
+
+        * UserInterface/Images/SortIndicatorDownArrow.pdf: Added.
+        * UserInterface/Images/SortIndicatorUpArrow.pdf: Added.
+        * UserInterface/Images/treeDownTriangleBlack.png: Removed.
+        * UserInterface/Images/treeUpTriangleBlack.png: Removed.
+
+2012-03-22  Timothy Hatcher  <timothy@apple.com>
+
+        Make the rest of the disclosure triangles in the Web Inspector HiDPI compliant.
+
+        Part of: <rdar://problem/10643175> Some disclosure triangles and Timeline pills should be made HiDPI compliant
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Images/DisclosureTriangleTinyClosed.pdf: Added.
+        * UserInterface/Images/DisclosureTriangleTinyOpen.pdf: Added.
+        * UserInterface/Images/disclosureTriangleSmallDown.png: Removed.
+        * UserInterface/Images/disclosureTriangleSmallRight.png: Removed.
+        * UserInterface/Images/treeDownTriangleWhite.png: Removed.
+        * UserInterface/Images/treeRightTriangleBlack.png: Removed.
+        * UserInterface/Images/treeRightTriangleWhite.png: Removed.
+
+        * UserInterface/ConsoleGroup.js:
+        (WebInspector.ConsoleGroup): Delete bracket element. It was ugly and sooo Windows...
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Call _generateDisclosureTriangleImages.
+        (WebInspector._generateDisclosureTriangleImages): Added. Generate images for small and tiny.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.css: Use the canvas based disclosure triangles.
+        * UserInterface/DOMTreeOutline.css: Ditto.
+        * UserInterface/DataGrid.css: Ditto.
+        * UserInterface/Section.css: Ditto.
+        * UserInterface/LogContentView.css: Ditto. Also delete the bracket style rules.
+
+2012-03-22  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10391969> Remote Inspector: Add CSS Completion for iOS Properties
+
+        Add CSS auto-completion keywords for iOS properties.
+        Add "touch" to the list of syntax highlighted value keywords.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/CSSKeywordCompletions.js:
+        * UserInterface/CSSSourceTokenizer.js:
+        (WebInspector.CSSSourceTokenizer):
+
+
+2012-03-21  Timothy Hatcher  <timothy@apple.com>
+
+        Use -webkit-image-set instead of media queries in the Web Inspector.
+
+        This patch also uses separate border-image-slice and border-image-source properties to
+        avoid duplicate slice numbers in each rule.
+
+        I didn't use image-set for the border-image cases since you still need a media query
+        for the 2x slice numbers.
+
+        Reviewed by Jon Honeycutt.
+
+        * UserInterface/ApplicationCacheIcons.css:
+        (.application-cache-manifest .icon): Use -webkit-image-set.
+        (.application-cache-frame .icon): Ditto.
+        * UserInterface/CookieIcon.css:
+        (.cookie-icon .icon): Use -webkit-image-set.
+        * UserInterface/DOMStorageIcons.css:
+        (.local-storage-icon .icon): Use -webkit-image-set.
+        (.session-storage-icon .icon): Ditto.
+        * UserInterface/DatabaseIcon.css:
+        (.database-icon .icon): Use -webkit-image-set.
+        * UserInterface/DatabaseTableIcon.css:
+        (.database-table-icon .icon): Use -webkit-image-set.
+        * UserInterface/FolderIcon.css:
+        (.folder-icon .icon): Use -webkit-image-set.
+        * UserInterface/InstrumentIcons.css:
+        (.network-icon .icon): Use -webkit-image-set.
+        (.colors-icon .icon): Ditto.
+        (.script-icon .icon): Ditto.
+        (.stopwatch-icon .icon):
+        (.profile-icon .icon): Use -webkit-image-set.
+        * UserInterface/InstrumentSidebarPanel.css:
+        (.sidebar > .panel.instrument > .title-bar > .record-glyph): Use -webkit-image-set.
+        (.sidebar > .panel.instrument > .title-bar > .record-glyph.recording): Ditto.
+        (.sidebar > .panel.instrument > .title-bar > .record-glyph:hover): Ditto.
+        (.sidebar > .panel.instrument > .title-bar > .record-glyph.recording:hover): Ditto.
+        (.sidebar > .panel.instrument > .title-bar > .record-glyph.forced): Ditto.
+        (.sidebar > .panel.instrument > .title-bar > .record-glyph.recording.forced): Ditto.
+        * UserInterface/LogIcon.css:
+        (.log-icon .icon): Use -webkit-image-set.
+        * UserInterface/ResourceIcons.css:
+        (.resource-icon .icon): Use -webkit-image-set.
+        (.resource-icon.resource-type-document .icon): Ditto.
+        (.resource-icon.resource-type-image .icon): Ditto.
+        (.resource-icon.resource-type-font .icon): Ditto.
+        (.resource-icon.resource-type-stylesheet .icon): Ditto.
+        (.resource-icon.resource-type-script .icon): Ditto.
+        (.anonymous-script-icon .icon): Ditto.
+        * UserInterface/TextEditor.css:
+        (.text-editor > .gutter > .line-number.breakpoint-resolved > .breakpoint): Use border-image-source.
+        * UserInterface/TimelineOverview.css:
+        (.timeline-overview > .timeline .bar): Use border-image-slice.
+        (.timeline-overview > .timeline.timeline-record-type-network .bar): Use border-image-source.
+        (.timeline-overview > .timeline.timeline-record-type-layout .bar): Ditto.
+        (.timeline-overview > .timeline.timeline-record-type-script .bar): Ditto.
+
+2012-03-21  Timothy Hatcher  <timothy@apple.com>
+
+        Make the Web Inspector navigation bar and some disclosure triangles HiDPI aware again.
+
+        This regressed when HiDPI canvas was turned off by <rdar://problem/10887881>. This change also uses
+        media queries, so dragging the Web Inspector between different DPI monitors will correctly switch.
+
+        <rdar://problem/11091555> HiDPI: Many small icons in new Web Inspector are blurry in HiDPI
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ActivateButtonNavigationItem.js:
+        (WebInspector.ActivateButtonNavigationItem.prototype.generateStyleText): Added media query and 2x versions.
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem.prototype.generateStyleText): Added media query and 2x versions.
+        * UserInterface/DetailsSection.css:
+        (.details-section > .header::before): Set background-size.
+        (.details-section > .header:not(.mouse-over-options-element):active::before): Added 2x version.
+        (.details-section.collapsed > .header::before): Ditto.
+        (.details-section.collapsed > .header:not(.mouse-over-options-element):active::before): Ditto.
+        * UserInterface/ImageUtilities.js:
+        (generateColoredImage): Added scale parameter. Multiply width and height by scale.
+        (generateColoredImagesForCSS.imageLoaded): Call generateImage for each pixel ratio.
+        (generateColoredImagesForCSS.generateImage): Added pixelRatio parameter. Multiply the shadow values by pixelRatio.
+        Pass the pixelRation to generateColoredImage.
+        (generateColoredImagesForCSS): Remove depth and scale.
+        (generateEmbossedImages._imageLoaded): Call _createEmbossedCanvasImage for each pixel ratio.
+        (generateEmbossedImages._createEmbossedCanvasImage): Added pixelRatio parameter. Define the depth. Multiply the
+        width and height by pixelRatio. Use width and height instead of image.width and image.height through out.
+        (generateEmbossedImages._invertMaskImage): Added width and height parameters. Use instead of image.width and image.height.
+        (generateEmbossedImages._applyImageMask): Remove unused HTMLCanvasElement as input code path.
+        * UserInterface/Main.css:
+        (.go-to-arrow:active): Added 2x version.
+        (:focus .selected .go-to-arrow): Added 2x version.
+        (:focus .selected .go-to-arrow:active): Added 2x version.
+        * UserInterface/NavigationSidebarPanel.css:
+        (.navigation-sidebar-panel-content-tree-outline .item .disclosure-button): Set background-size.
+        (.navigation-sidebar-panel-content-tree-outline .item.selected .disclosure-button): Added 2x version.
+        (.navigation-sidebar-panel-content-tree-outline .item.expanded .disclosure-button): Added 2x version.
+        (.navigation-sidebar-panel-content-tree-outline .item.selected.expanded .disclosure-button): Added 2x version.
+        * UserInterface/RadioButtonNavigationItem.js:
+        (WebInspector.RadioButtonNavigationItem.prototype.generateStyleText): Added media query and 2x versions.
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .data-grid th.collapser > .collapser-button): Set background-size.
+        (.content-view.timelines > .data-grid th.collapser > .collapser-button:active): Added 2x version.
+        (.content-view.timelines > .data-grid th.collapser.collapsed > .collapser-button): Added 2x version.
+        (.content-view.timelines > .data-grid th.collapser.collapsed > .collapser-button:active): Added 2x version.
+
+2012-03-20  Timothy Hatcher  <timothy@apple.com>
+
+        Don't allow setting breakpoints for resource types that are not Script or Document.
+
+        <rdar://problem/11044410> Should not be allowed to set breakpoints on CSS resources
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor): Don't add event listeners unless _supportsDebugging is true.
+        (WebInspector.SourceCodeTextEditor.prototype.close): Remove event listeners inside if _supportsDebugging block.
+        (WebInspector.SourceCodeTextEditor.prototype._contentWillPopulate): Don't add breakpoints unless _supportsDebugging.
+        (WebInspector.SourceCodeTextEditor.prototype._updateBreakpointStatus): Assert _supportsDebugging.
+        (WebInspector.SourceCodeTextEditor.prototype._breakpointRemoved): Ditto.
+        (WebInspector.SourceCodeTextEditor.prototype._activeCallFrameDidChange): Ditto.
+        (WebInspector.SourceCodeTextEditor.prototype._matchesBreakpoint): Ditto.
+        (WebInspector.SourceCodeTextEditor.prototype.get _supportsDebugging): Added.
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointInfo): Return early if !_supportsDebugging.
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointAdded): Ditto.
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointRemoved): Assert and return early if !_supportsDebugging.
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointMoved): Ditto.
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointToggled): Ditto.
+
+2012-03-20  Timothy Hatcher  <timothy@apple.com>
+
+        Add and remove the window-inactive style class so controls, row selections, and backgrounds use their inactive colors.
+
+        <rdar://problem/11064364> Inspector controls (bars and buttons) have active appearance in inactive windows
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ButtonNavigationItem.css:
+        (body.window-inactive .navigation-bar > .item.button:not(.suppress-emboss) > .glyph):
+        (.navigation-bar > .item.button.disabled > .glyph):
+        (body.window-inactive .navigation-bar > .item.button.disabled:not(.suppress-emboss) > .glyph):
+        (.navigation-bar > .item.button.suppress-emboss > .glyph):
+        (.navigation-bar > .item.button.suppress-emboss:active > .glyph):
+        (.navigation-bar > .item.button.suppress-emboss.disabled > .glyph): Moved from QuickConsole.css.
+        * UserInterface/DataGrid.css:
+        (body.window-inactive .data-grid th.sort-descending): Fixed the selector to use window-inactive.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Added window event listeners for blur and focus.
+        (WebInspector.updateDockedState): Remove the window-inactive class when docking, just in case.
+        (WebInspector._windowFocused): Added.
+        (WebInspector._windowBlurred): Added.
+        * UserInterface/QuickConsole.css: Moved the disabled button style to ButtonNavigationItem.css.
+
+2012-03-19  Timothy Hatcher  <timothy@apple.com>
+
+        Support showing and working with Script breakpoints from the Breakpoint sidebar.
+
+        Part of: <rdar://problem/11075565> REGRESSION (New Web Inspector): Injected extension content scripts are not shown
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/BreakpointSidebarPanel.js:
+        (WebInspector.BreakpointSidebarPanel):
+        (WebInspector.BreakpointSidebarPanel.prototype._addBreakpoint): Refactor code to work in terms on both Resource and Script.
+        (WebInspector.BreakpointSidebarPanel.prototype._addBreakpointsForSourceCode): Renamed from _addBreakpointsForResource.
+        (WebInspector.BreakpointSidebarPanel.prototype._resourceAdded): Use _addBreakpointsForSourceCode.
+        (WebInspector.BreakpointSidebarPanel.prototype._mainResourceChanged): Ditto.
+        (WebInspector.BreakpointSidebarPanel.prototype._scriptAdded): Added. Call _addBreakpointsForSourceCode if this script isn't
+        backed by a Resource.
+        (WebInspector.BreakpointSidebarPanel.prototype._scriptsCleared): Added. Remove all ScriptTreeElements.
+        (WebInspector.BreakpointSidebarPanel.prototype._treeElementSelected): Refactored to work with either Resource or Script.
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager.prototype.scriptForIdentifier): Added.
+        (WebInspector.DebuggerManager.prototype.scriptsForURL): Added.
+        (WebInspector.DebuggerManager.prototype._setBreakpoint): Set the breakpoint correctly for Script's without URLs.
+
+2012-03-19  Timothy Hatcher  <timothy@apple.com>
+
+        Show Scripts in the Resource sidebar at the top level.
+
+        These scripts are grouped into 3 folders: Extension Scripts, Extra Scripts and Anonymous Scripts.
+
+        <rdar://problem/11075565> REGRESSION (New Web Inspector): Injected extension content scripts are not shown
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager.prototype.reset): Fire ScriptsCleared event.
+        (WebInspector.DebuggerManager.prototype.scriptDidParse): Fire ScriptAdded event. Pass isContentScript
+        to the Script constructor.
+        * UserInterface/Images/ClippingJS.png: Added.
+        * UserInterface/Images/ClippingJS@2x.png: Added.
+        * UserInterface/Main.html: Included ScriptTreeElement.js.
+        * UserInterface/ResourceIcons.css:
+        (.anonymous-script-icon .icon): Added.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel): Added event listeners for ScriptAdded and ScriptsCleared.
+        (WebInspector.ResourceSidebarPanel.prototype.treeElementForRepresentedObject): Create a tree element for
+        the anonymous script.
+        (WebInspector.ResourceSidebarPanel.prototype._scriptWasAdded): Create a tree element for scripts with URLs.
+        (WebInspector.ResourceSidebarPanel.prototype._scriptsCleared): Remove the script folders.
+        (WebInspector.ResourceSidebarPanel.prototype._treeElementSelected): Support ScriptTreeElement.
+        * UserInterface/Script.js:
+        (WebInspector.Script): Added injected parameter.
+        (WebInspector.Script.prototype.get injected): Added.
+        * UserInterface/ScriptTreeElement.js: Added.
+        (WebInspector.ScriptTreeElement):
+        (WebInspector.ScriptTreeElement.prototype.get script):
+
+2012-03-19  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.ScriptContentView for showing content of Script objects.
+
+        Part of: <rdar://problem/11047982> REGRESSION (New Web Inspector): Page source does not show when a
+        breakpoint is hit while loading the page
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView): Added case for Script.
+        (WebInspector.ContentView.isViewable): Ditto.
+        * UserInterface/DebugSidebarPanel.js:
+        (WebInspector.DebugSidebarPanel.prototype._treeElementSelected): Simplify and use ResourceSidebarPanel.showSourceCode.
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.sidebarPanelForRepresentedObject):
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.cookieForContentView): Update assert for ScriptContentView.
+        (WebInspector.ResourceSidebarPanel.prototype.showContentViewForCookie): Move a variable down below an early return.
+        (WebInspector.ResourceSidebarPanel.prototype.showSourceCode): Updated to work with Scripts.
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameDidChange): Close all ScriptContentViews.
+        * UserInterface/ScriptContentView.css: Added.
+        (.content-view.script > .text-editor):
+        * UserInterface/ScriptContentView.js: Added. Copied mostly from TextResourceContentView.
+        (WebInspector.ScriptContentView):
+        (WebInspector.ScriptContentView.prototype.get script):
+        (WebInspector.ScriptContentView.prototype.get textEditor):
+        (WebInspector.ScriptContentView.prototype.get supplementalRepresentedObjects):
+        (WebInspector.ScriptContentView.prototype.revealLine):
+        (WebInspector.ScriptContentView.prototype.shown):
+        (WebInspector.ScriptContentView.prototype.hidden):
+        (WebInspector.ScriptContentView.prototype.closed):
+        (WebInspector.ScriptContentView.prototype._contentWillPopulate):
+        (WebInspector.ScriptContentView.prototype._executionLineNumberDidChange):
+
+2012-03-18  Timothy Hatcher  <timothy@apple.com>
+
+        Hide line numbers for blank lines when showing inline scripts while the debugger is paused.
+
+        When paused in the debugger we sometimes can only show the scripts for the HTML file. When
+        this happens the scripts are the only thing visible (in their final position) with blank
+        lines for the earlier HTML content. This hides the line numbers for those blank lines
+        to provide a clue to the user that they shouldn't expect content there.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor): Start with the first line as invalid, before a populate there
+        is always a blank first line.
+        (WebInspector.SourceCodeTextEditor.prototype._contentAvailable): Clear the invalid line numbers.
+        (WebInspector.SourceCodeTextEditor.prototype._populateWithInlineScriptContent.scriptContentAvailable):
+        Add blank lines to the invalid line numbers map.
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorShouldHideLineNumber): Added. Check the invalid
+        line numbers map.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.updateLayout): Added force parameter and pass it to _updateLineNumbers.
+        (WebInspector.TextEditor.prototype._reset): Pass true to updateLayout.
+        (WebInspector.TextEditor.prototype._updateLineNumbers): Added force parameter. Always rebuild the line numbers
+        when this is true.
+        (WebInspector.TextEditor.prototype._lineNumberTextContent): Added. Helper.
+        (WebInspector.TextEditor.prototype._addBreakpointElementToLineElementWithInfo): Use _lineNumberTextContent.
+        (WebInspector.TextEditor.prototype._removePossibleBreakpointElementFromLineElement): Ditto.
+
+2012-03-18  Timothy Hatcher  <timothy@apple.com>
+
+        Remove duplicate copies of _checkForOldResources and put it in the NavigationSidebarPanel base class.
+
+        Now that the individual _checkForOldResources functions don't access different URL maps, this code
+        can now be shared down in NavigationSidebarPanel.
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/BreakpointSidebarPanel.js:
+        (WebInspector.BreakpointSidebarPanel): Removed event listeners for _checkForOldResources.
+        (WebInspector.BreakpointSidebarPanel.prototype._mainResourceChanged): Remove call to _checkForOldResources.
+        (WebInspector.BreakpointSidebarPanel.prototype._checkForOldResources): Removed.
+        * UserInterface/IssueSidebarPanel.js:
+        (WebInspector.IssueSidebarPanel): Removed event listeners for _checkForOldResources.
+        (WebInspector.IssueSidebarPanel.prototype._checkForOldResources): Removed.
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel): Added event listeners for _checkForOldResources.
+        (WebInspector.NavigationSidebarPanel.prototype._checkForOldResources): Added.
+        (WebInspector.NavigationSidebarPanel.prototype._checkForOldResources.delayedWork): Added.
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel): Removed event listeners for _checkForOldResources.
+        (WebInspector.SearchSidebarPanel.prototype._checkForOldResources): Removed.
+
+2012-03-18  Timothy Hatcher  <timothy@apple.com>
+
+        Simplify IssueSidebarPanel and SearchSidebarPanel by using TreeOutline.getCachedTreeElement to
+        find existing ResourceTreeElements.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/IssueSidebarPanel.js:
+        (WebInspector.IssueSidebarPanel): Removed _issueRootElements.
+        (WebInspector.IssueSidebarPanel.prototype._issueWasAdded): Use getCachedTreeElement to find
+        the existing ResourceTreeElement.
+        (WebInspector.IssueSidebarPanel.prototype._issuesCleared): Removed _issueRootElements reference.
+        (WebInspector.IssueSidebarPanel.prototype._checkForOldResources.delayedWork): Ditto.
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel): Removed _resourceSearchResultMap.
+        (WebInspector.SearchSidebarPanel.prototype._treeElementForResource): Removed _resourceSearchResultMap
+        reference. Use getCachedTreeElement to find the existing ResourceTreeElement.
+        (WebInspector.SearchSidebarPanel.prototype._checkForOldResources.delayedWork):
+        Removed _resourceSearchResultMap reference.
+
+2012-03-18  Timothy Hatcher  <timothy@apple.com>
+
+        Simplify BreakpointSidebarPanel by using TreeOutline.getCachedTreeElement to find existing
+        the BreakpointTreeElements and ResourceTreeElements.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/BreakpointSidebarPanel.js:
+        (WebInspector.BreakpointSidebarPanel): Removed _resourceTreeElementURLMap.
+        (WebInspector.BreakpointSidebarPanel.prototype._addBreakpoint): Use getCachedTreeElement to
+        find the existing ResourceTreeElement.
+        (WebInspector.BreakpointSidebarPanel.prototype._breakpointRemoved): Use getCachedTreeElement to
+        find the BreakpointTreeElement to remove.
+        (WebInspector.BreakpointSidebarPanel.prototype._checkForOldResources.delayedWork): Removed
+        _resourceTreeElementURLMap reference.
+
+2012-03-18  Timothy Hatcher  <timothy@apple.com>
+
+        Fix some exceptions I hit while adding ScriptContentView.
+
+        Add some null checks at the callers of sidebarPanelForRepresentedObject, since sidebarPanelForRepresentedObject
+        can return null when the representedObject is unknown. The sidebarPanelForRepresentedObject function logs an
+        error to the console when it returns null. So the exceptions were just more noise.
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentBrowserTreeElementForRepresentedObject): Null check the result of sidebarPanelForRepresentedObject.
+        (WebInspector._updateCurrentContentViewCookie): Ditto.
+
+2012-03-18  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an issue where the execution line was not highlighted for single line scripts.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype._reset): Add ExecutionLineStyleClassName to the text chunk element
+        if the chunk is one line and it is the execution line.
+
+2012-03-18  Timothy Hatcher  <timothy@apple.com>
+
+        Rename ResourceSidebarPanel.showResourceSourceCode to ResourceSidebarPanel.showSourceCode.
+
+        This is prep for making ResourceSidebarPanel be responsible for showing Scripts.
+
+        Part of: <rdar://problem/11047982> REGRESSION (New Web Inspector): Page source does not show when a
+        breakpoint is hit while loading the page
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/BreakpointSidebarPanel.js:
+        (WebInspector.BreakpointSidebarPanel.prototype._treeElementSelected):
+        * UserInterface/DebugSidebarPanel.js:
+        * UserInterface/IssueSidebarPanel.js:
+        (WebInspector.IssueSidebarPanel.prototype._treeElementSelected):
+        * UserInterface/Main.js:
+        (WebInspector.openURL):
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.showSourceCode): Renamed from showResourceSourceCode. Changed
+        to not assume we are dealing with a Resource.
+        * UserInterface/ResourceTimelineDataGridNode.js:
+        (WebInspector.ResourceTimelineDataGridNode.prototype._goToResource):
+        * UserInterface/ScriptTimelineDataGridNode.js:
+        (WebInspector.ScriptTimelineDataGridNode.prototype._goToResource):
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel.prototype._treeElementSelected):
+
+2012-03-18  Timothy Hatcher  <timothy@apple.com>
+
+        Prevent double dividers in the navigation bar when viewing a non-frame content view.
+
+        The node search navigation item is hidden when not on a frame content view, but that causes
+        the adjacent dividers to come together. We need to hide one divider in this case.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Remember the divider to the left of the node search item.
+        (WebInspector._currentContentViewDidChange): Hide the divider too.
+
+2012-03-18  Timothy Hatcher  <timothy@apple.com>
+
+        Show script content when the debugger pauses on a resource that hasn't populated its full content yet.
+
+        Part of: <rdar://problem/11047982> REGRESSION (New Web Inspector): Page source does not show when a
+        breakpoint is hit while loading the page
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager):
+        (WebInspector.DebuggerManager.prototype.scriptsForResource): Added.
+        (WebInspector.DebuggerManager.prototype.reset): Clear _scriptURLMap.
+        (WebInspector.DebuggerManager.prototype.scriptDidParse): Don't add the script again if it is already known.
+        Add scripts with URLs to _scriptURLMap.
+        * UserInterface/SourceCodeTextEditor.js:
+        (WebInspector.SourceCodeTextEditor): Call _activeCallFrameDidChange to update the execution line and request
+        script content if needed.
+        (WebInspector.SourceCodeTextEditor.prototype.revealLine): Store the line number if we don't have the line needed
+        to show yet. Delete the stored values if we call through to TextEditor.
+        (WebInspector.SourceCodeTextEditor.prototype._revealPendingLineIfPossible): Don't delete the stored values here.
+        Return early if we don't have the line needed.
+        (WebInspector.SourceCodeTextEditor.prototype._contentWillPopulate): Added.
+        (WebInspector.SourceCodeTextEditor.prototype._contentDidPopulate): Added.
+        (WebInspector.SourceCodeTextEditor.prototype._populateWithContent): Added.
+        (WebInspector.SourceCodeTextEditor.prototype._contentAvailable): Set _fullContentPopulated and call _populateWithContent.
+        (WebInspector.SourceCodeTextEditor.prototype._activeCallFrameDidChange): Call _populateWithInlineScriptContent or
+        _populateWithScriptContent for Resource source code.
+        (WebInspector.SourceCodeTextEditor.prototype._populateWithInlineScriptContent): Added. Request the content for all
+        the scripts for this URL.
+        (WebInspector.SourceCodeTextEditor.prototype._populateWithInlineScriptContent.scriptContentAvailable): Concat the scripts
+        together, adding the script tags.
+        (WebInspector.SourceCodeTextEditor.prototype._populateWithScriptContent): Added. Request the single script content.
+        (WebInspector.SourceCodeTextEditor.prototype._populateWithScriptContent.scriptContentAvailable): Set _fullContentPopulated
+        and call _populateWithContent.
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView): Listen for the ContentWillPopulate event.
+        (WebInspector.TextResourceContentView.prototype._contentWillPopulate): Renamed from contentAvailable. Do nothing if the text
+        editor is already added.
+
+2012-03-16  Timothy Hatcher  <timothy@apple.com>
+
+        Factor most of TextResourceContentView out into SourceCodeTextEditor, a new TextEditor subclass.
+
+        This is prep work for making a ScriptContentView to show Scripts before the resource loads.
+
+        Part of: <rdar://problem/11047982> REGRESSION (New Web Inspector): Page source does not
+        show when a breakpoint is hit while loading the page
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/IssueManager.js:
+        (WebInspector.IssueManager.prototype.issuesForSourceCode): Renamed from issuesForResource.
+        * UserInterface/Main.html: Included SourceCodeTextEditor.js and SourceCodeTextEditor.css.
+        * UserInterface/ResourceContentView.js:
+        (WebInspector.ResourceContentView): Use issuesForSourceCode.
+        * UserInterface/SourceCodeTextEditor.css: Copied from TextResourceContentView.css.
+        (.source-code.text-editor .text-editor-text-chunk.error):
+        (.source-code.text-editor .text-editor-text-chunk.warning):
+        * UserInterface/SourceCodeTextEditor.js: Added.
+        (WebInspector.SourceCodeTextEditor):
+        (WebInspector.SourceCodeTextEditor.prototype.get sourceCode):
+        (WebInspector.SourceCodeTextEditor.prototype.revealLine): Copied from TextResourceContentView.
+        (WebInspector.SourceCodeTextEditor.prototype.shown): Call _revealPendingLineIfPossible.
+        (WebInspector.SourceCodeTextEditor.prototype.close): Remove event listeners.
+        (WebInspector.SourceCodeTextEditor.prototype._revealPendingLineIfPossible): Helper.
+        (WebInspector.SourceCodeTextEditor.prototype._contentAvailable): Copied from TextResourceContentView.
+        (WebInspector.SourceCodeTextEditor.prototype._updateBreakpointStatus): Ditto.
+        (WebInspector.SourceCodeTextEditor.prototype._breakpointRemoved): Ditto.
+        (WebInspector.SourceCodeTextEditor.prototype._activeCallFrameDidChange): Ditto.
+        (WebInspector.SourceCodeTextEditor.prototype._matchesScriptLocation): Helper.
+        (WebInspector.SourceCodeTextEditor.prototype._matchesBreakpoint): Helper.
+        (WebInspector.SourceCodeTextEditor.prototype._matchesIssue): Helper.
+        (WebInspector.SourceCodeTextEditor.prototype._issueWasAdded): Copied from TextResourceContentView.
+        (WebInspector.SourceCodeTextEditor.prototype._addIssueToLineNumberMap): Helper.
+        (WebInspector.SourceCodeTextEditor.prototype._addIssueToLine): Copied from TextResourceContentView.
+        (WebInspector.SourceCodeTextEditor.prototype._breakpointInfoForBreakpoint): Ditto.
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBaseURL): Ditto.
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorLineContentUpdated): Ditto.
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointInfo): Ditto.
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointAdded): Ditto.
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointRemoved): Ditto.
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointMoved): Ditto.
+        (WebInspector.SourceCodeTextEditor.prototype.textEditorBreakpointToggled): Ditto.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor): Call the Object constructor.
+        (WebInspector.TextEditor.prototype.set executionLineNumber): Fire the ExecutionLineNumberDidChange event.
+        * UserInterface/TextResourceContentView.css:
+        (.text-editor .text-editor-text-chunk.error): Removed.
+        (.text-editor .text-editor-text-chunk.warning): Removed.
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView): Listen for the ExecutionLineNumberDidChange event.
+        (WebInspector.TextResourceContentView.prototype.get supplementalRepresentedObjects): If the SourceCodeTextEditor
+        has an executionLineNumber, we can assume it is always the active call frame.
+        (WebInspector.TextResourceContentView.prototype.contentAvailable): Just remove the spinner or error message
+        and append the text editor.
+        (WebInspector.TextResourceContentView.prototype.revealLine): Just call revealLine on the text editor.
+        (WebInspector.TextResourceContentView.prototype.closed): Call close on the text editor.
+        (WebInspector.TextResourceContentView.prototype._executionLineNumberDidChange): Added.
+
+2012-03-15  Timothy Hatcher  <timothy@apple.com>
+
+        Allow breakpoints to be set for a Resource or a Script.
+
+        This is prep for making a TextEditor subclass that works with either a Script or a Resource.
+
+        Part of: <rdar://problem/11047982> REGRESSION (New Web Inspector): Page source does not
+        show when a breakpoint is hit while loading the page
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Breakpoint.js:
+        (WebInspector.Breakpoint): Make the constructor take a SourceCode object instead of a URL.
+        (WebInspector.Breakpoint.prototype.get scriptIdentifier): Added.
+        (WebInspector.Breakpoint.prototype.get info): Updated the comment.
+        * UserInterface/BreakpointSidebarPanel.js:
+        (WebInspector.BreakpointSidebarPanel.prototype._addBreakpointsForResource): Use breakpointsForSourceCode.
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager):
+        (WebInspector.DebuggerManager.prototype.breakpointsForSourceCode): Renamed from breakpointsForURL. Takes
+        a SourceCode object and looks up by url or id.
+        (WebInspector.DebuggerManager.prototype.addBreakpoint): Don't assume there is a url. Adds the breakpoint
+        to the URL map and/or the script identifier map.
+        (WebInspector.DebuggerManager.prototype.removeBreakpoint): Ditto for removal.
+        (WebInspector.DebuggerManager.prototype._saveBreakpoints): Skips breakpoints without URLs.
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.prototype.contentAvailable): Use breakpointsForSourceCode.
+        (WebInspector.TextResourceContentView.prototype.textEditorBreakpointAdded): Pass the resource to the
+        Breakpoint constructor instead of the URL.
+
+2012-03-17  Timothy Hatcher  <timothy@apple.com>
+
+        Use Date.toLocaleString() to format the date in the Exprires column of the Cookies view.
+
+        <rdar://problem/9628659> Expires date in the Cookies view should be localized
+
+        Reviewed by Ada Chan.
+
+        * UserInterface/CookieStorageContentView.js:
+        (WebInspector.CookieStorageContentView.prototype._rebuildTable): Use toLocaleString().
+
+2012-03-16  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Give each Timeline DataGrid a chance to react to EventMarkers.
+
+        If another timeline data grid was active when event markers arrived,
+        then switching to the Network data grid was not showing those event
+        markers. Give each Timeline data grid a chance to react to the
+        event marker, not just the active data grid.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView):
+        (WebInspector.TimelinesContentView.prototype._recordingStarted):
+        (WebInspector.TimelinesContentView.prototype._recordedEventMarker):
+        (WebInspector.TimelinesContentView.prototype._updateCalculatorBoundsForPendingRecordsAndEventMarkers):
+
+2012-03-16  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Workaround sporatic double thick border appearing in collapsed columns.
+
+        Occasionally the Networks data grid will show a double thick border where
+        the collapsed, 0-width, columns were. Workaround this by just hiding the
+        border for collapsed columns.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .data-grid.collapsed-details td.column-group-details:not(:last-child)):
+        * UserInterface/NetworkDataGrid.js:
+        (WebInspector.NetworkDataGrid.prototype.didToggleColumnGroup):
+
+2012-03-15  Timothy Hatcher  <timothy@apple.com>
+
+        Make the Quick Console toolbar buttons pin to the bottom when doing multi-line input.
+
+        Also make the scrollbars not interfere if the user has old-school scrollbars.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/QuickConsole.css:
+        (.quick-console): Specify overflow-x and overflow-y separately. Use auto instead of scroll.
+        (.quick-console > .view-container): Use auto instead of scroll.
+        (.quick-console > .toolbar > .navigation-bar-container): Added.
+        (.quick-console > .toolbar > .navigation-bar-container > .navigation-bar-spacer): Added.
+        (.quick-console > .toolbar > .navigation-bar-container > .navigation-bar): Updated the selector.
+        (.quick-console > .toolbar > .navigation-bar-container > .navigation-bar > .item.button.disabled > .glyph): Ditto.
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole): Create navigation bar container and spacer.
+
+2012-03-15  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11049672> Delete key should delete selected breakpoint in sidebar
+
+        - Delete key removes the breakpoint.
+        - Enter / Space toggles the breakpoint.
+        - All Exceptions and Uncaught Exceptions breakpoints cannot be removed
+          and will beep if the user attempts to delete them.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TreeOutline.js:
+        (TreeOutline.prototype._treeKeyDown):
+        Expose onspace like onenter and ondelete.
+
+        * UserInterface/BreakpointTreeElement.js:
+        (WebInspector.BreakpointTreeElement.prototype.ondelete):
+        (WebInspector.BreakpointTreeElement.prototype.onenter):
+        (WebInspector.BreakpointTreeElement.prototype.onspace):
+        Implement default TreeElement handlers for keys.
+
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager.prototype.removeBreakpoint):
+        (WebInspector.DebuggerManager.prototype.isBreakpointRemovable):
+        Ensure we never try to remove the custom breakpoints.
+
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView):
+        (WebInspector.TextResourceContentView.prototype._breakpointRemoved):
+        When a breakpoint is removed update the ContentView and TextEditor.
+
+2012-03-15  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11050670> REGRESSION (New Web Inspector): Add Inspect Element button (magnifying glass button)
+
+        Only show the button when a FrameView (DOM Tree / Source Code) is available.
+        When switching away from a FrameView make sure to disable node searching
+        if it was active. Also since the nav bar may have changed size have the
+        content browser update its navigation bar layout.
+
+        If this happens more in the future the buttons should be owned by the
+        individual ContentViews instead of WebInspector.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        (WebInspector._currentContentViewDidChange):
+
+2012-03-15  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11050670> REGRESSION (New Web Inspector): Add Inspect Element button (magnifying glass button)
+
+        Add an on/off button for node searching.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ActivateButtonNavigationItem.js: Added.
+        (WebInspector.ActivateButtonNavigationItem):
+        (WebInspector.ActivateButtonNavigationItem.prototype.get activated):
+        (WebInspector.ActivateButtonNavigationItem.prototype.set activated):
+        (WebInspector.ActivateButtonNavigationItem.prototype.generateStyleText):
+        ActivateButton uses the normal "Focus" style when "Activated". It
+        then includes a darker version of "Focus" for "Activated:active".
+
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem.prototype._generateImages):
+        Allow for more flexible subclassing.
+
+        * UserInterface/ImageUtilities.js:
+        (generateEmbossedImages._imageLoaded):
+        (generateEmbossedImages._createEmbossedCanvasImage):
+        Create a FocusDark style if requested.
+
+        * UserInterface/Images/Hand.pdf: Added.
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        (WebInspector._domNodeWasInspected):
+        (WebInspector._toggleNodeSearch.callback):
+        (WebInspector._toggleNodeSearch):
+        Add the button to the right.
+
+2012-03-14  Timothy Hatcher  <timothy@apple.com>
+
+        Fix typo of the servicePendingContentRequests function was mentioned in review but I forgot to save the file.
+
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.markAsFailed): Fix typo of servicePendingContentRequests.
+
+2012-03-14  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10935394> REGRESSION (New Web Inspector): load and DOMContentLoaded event lines are not shown in the Timeline overview
+        <rdar://problem/10935417> REGRESSION (New Web Inspector): developer generated timestamps are not shown in the Timeline overview
+
+        Add event marker decorations to the TimelineOverview.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TimelineDecorations.css:
+        (.timeline-decorations > .event-markers > .event-marker.timestamp):
+        Make markTimeline/timeStamp green instead of yellow. Easier to see.
+
+        * UserInterface/TimelineDecorations.js:
+        (WebInspector.TimelineDecorations.prototype.clear):
+        Clearing should also remove visible EventMarkers.
+
+        * UserInterface/TimelineOverview.css:
+        (.timeline-overview .timeline-decorations > .event-markers):
+        (.timeline-overview .timeline-decorations > .event-markers > .event-marker-tooltip):
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView.prototype._recordedEventMarker):
+        Pass event markers on to the TimelineOverview.
+
+        * UserInterface/TimelineOverview.js:
+        (WebInspector.TimelineOverview.prototype.update):
+        (WebInspector.TimelineOverview.prototype.addTimelineEventMarker):
+        Have the decorator draw event markers.
+
+2012-03-14  Timothy Hatcher  <timothy@apple.com>
+
+        Provide a way to request content from a Script.
+
+        Factor out the content requesting parts of Resource down into a SourceCode class that
+        both Resource and Script now inherit from.
+
+        Part of: <rdar://problem/11047982> REGRESSION: Page source does not show when a breakpoint
+        is hit while loading the page
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Main.html: Included SourceCode.js.
+        * UserInterface/Resource.js:
+        (WebInspector.Resource):
+        (WebInspector.Resource.prototype.canRequestContentFromBackend): Added.
+        (WebInspector.Resource.prototype.requestContentFromBackend): Added.
+        (WebInspector.Resource.prototype.markAsFinished): Call requestContentFromBackendIfNeeded.
+        (WebInspector.Resource.prototype.markAsFailed): Call servicePendingContentRequests with force.
+        * UserInterface/Script.js:
+        (WebInspector.Script):
+        (WebInspector.Script.prototype.canRequestContentFromBackend): Added.
+        (WebInspector.Script.prototype.requestContentFromBackend): Added.
+        * UserInterface/SourceCode.js: Added.
+        (WebInspector.SourceCode):
+        (WebInspector.SourceCode.prototype.get content):
+        (WebInspector.SourceCode.prototype.get contentIsBase64Encoded):
+        (WebInspector.SourceCode.prototype.get contentURL):
+        (WebInspector.SourceCode.prototype.requestContent):
+        (WebInspector.SourceCode.prototype.canRequestContentFromBackend):
+        (WebInspector.SourceCode.prototype.requestContentFromBackend):
+        (WebInspector.SourceCode.prototype.requestContentFromBackendIfNeeded):
+        (WebInspector.SourceCode.prototype.servicePendingContentRequests):
+        (WebInspector.SourceCode.prototype._processContent):
+
+2012-03-13  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11044135> Quick Console should handle multiline input better
+
+        The QuickConsole consists of two pieces in a fixed height. The toolbar with
+        JavaScript prompt, and the output content view container. The console itself
+        grows to a maximum size (75% of the total window size or user specified by
+        resizing). When handling multiline input the toolbar containing the prompt
+        is allowed to grow, pushing up the content. When the maximum is reached the
+        content will scroll under it, and likewise the multiline JavaScript prompt
+        will eventually scroll under it.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController):
+        (WebInspector.JavaScriptLogViewController.prototype._promptKeyDown):
+        (WebInspector.JavaScriptLogViewController.prototype._promptHistoryChange):
+        (WebInspector.JavaScriptLogViewController.prototype._promptPasteboardEvent):
+        (WebInspector.JavaScriptLogViewController.prototype._detectPromptHeightChanges.afterEvent):
+        (WebInspector.JavaScriptLogViewController.prototype._detectPromptHeightChanges):
+        * UserInterface/TextPrompt.js:
+        (WebInspector.TextPrompt):
+        (WebInspector.TextPromptWithHistory.prototype.defaultKeyHandler):
+        In order to detect with the input prompt changes height, we hook into
+        a number of events. Keydown, cut/paste, and TextPrompt history changes.
+
+        * UserInterface/QuickConsole.css:
+        (.quick-console):
+        (.quick-console.collapsed):
+        Let the console scroll when multiline input fills the entire console.
+        To allow multiline input when collapsed remove !important from height.
+
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole):
+        (WebInspector.QuickConsole.prototype.set collapsed):
+        (WebInspector.QuickConsole.prototype.get multiline):
+        (WebInspector.QuickConsole.prototype.get collapsedHeight):
+        Use constants where possible for height values.
+
+        (WebInspector.QuickConsole.prototype.didAppendConsoleMessage):
+        (WebInspector.QuickConsole.prototype.promptDidChangeHeight):
+        Responds to actions that will most like require resizes.
+
+        (WebInspector.QuickConsole.prototype._updateToolbarSize):
+        Update the toolbar size if the prompt size changed.
+
+        (WebInspector.QuickConsole.prototype._updateViewContainerSizeAndScrollDivider):
+        Update the view container's size when single line or multiline.
+
+2012-03-13  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Tweak quick console focusing.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole.prototype._viewContainerClick.afterDispatches):
+        This didn't appear to work for all actions. Ignore the caret checking,
+        and more proactively focus as long as there is no selection.
+
+2012-03-13  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Minor quick console mouse improvements.
+
+        Allow selection in the messages output.
+
+        Clicking in the messages output focuses the prompt if there is no
+        selection. This matches LogContentView.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/QuickConsole.css:
+        (.quick-console > .view-container):
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole):
+        (WebInspector.QuickConsole.prototype._viewContainerClick.afterDispatches):
+
+2012-03-13  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Event marker lines should not overlap the quick console.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/TimelineDecorations.css:
+        (.timeline-decorations > .event-markers):
+
+2012-03-13  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Renamed isFocused() to a focused getter based on earlier review feedback.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/JavaScriptTextPrompt.js:
+        (WebInspector.JavaScriptTextPrompt.prototype.get focused):
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype.consoleCleared):
+        * UserInterface/Main.js:
+        (WebInspector._keydown):
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole.prototype._activeLogCleared):
+
+2012-03-13  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Converge to a single RecordedEventMarker event based on earlier review feedback.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager):
+        (WebInspector.TimelineManager.prototype.startRecording):
+        (WebInspector.TimelineManager.prototype.eventRecorded.processRecord):
+        (WebInspector.TimelineManager.prototype.eventRecorded):
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView):
+
+2012-03-13  Timothy Hatcher  <timothy@apple.com>
+
+        Make profiles work again while retaining the correct insertion order in the Timeline DataGrids.
+
+        This reverts most of r41172 and fixes the single issue from the open source version of the code.
+        When there isn't a previousGridNode that means we need to insert at the top of the DataGrid.
+        But the open source code was missing the !previousGridNode check, causing elements to append
+        at the end instead.
+
+        <rdar://problem/10960578> REGRESSION (r41172): DOM exceptions when showing profile data grid
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGridNode.prototype._attach): Revert r41172 and add a check for !previousGridNode.
+
+2012-03-13  Timothy Hatcher  <timothy@apple.com>
+
+        Don't follow links when they are being edited by the user.
+
+        Inspired by the fix for https://webkit.org/b/60814.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView.prototype._mouseWasClicked): Call isBeingEdited and return early if true.
+        * UserInterface/EditingSupport.js:
+        (WebInspector.isBeingEdited): Check ancestor elements too.
+        * UserInterface/Main.js:
+        (WebInspector.handlePossibleLinkClick): Call isBeingEdited and return early if true.
+
+2012-03-13  Timothy Hatcher  <timothy@apple.com>
+
+        Remove duplicate code for the handling clicked links.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSSelectorProfileView.js:
+        (WebInspector.CSSSelectorProfileView): Removed click event listener.
+        (WebInspector.CSSSelectorProfileView.prototype._mouseWasClicked): Removed.
+        * UserInterface/DOMDetailsSidebarPanel.js:
+        (WebInspector.DOMDetailsSidebarPanel.prototype._mouseWasClicked): Use handlePossibleLinkClick.
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView.prototype._mouseWasClicked.followLink): Pass along the lineNumber.
+        * UserInterface/JavaScriptProfileView.js:
+        (WebInspector.JavaScriptProfileView): Removed click event listener.
+        (WebInspector.JavaScriptProfileView.prototype._mouseWasClicked): Removed.
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView): Removed click event listener.
+        (WebInspector.LogContentView.prototype._messagesClicked): Removed.
+        * UserInterface/Main.js:
+        (WebInspector.handlePossibleLinkClick): Added.
+        (WebInspector._mouseWasClicked): Call handlePossibleLinkClick.
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole): Removed click event listener.
+        (WebInspector.QuickConsole.prototype._messagesClicked): Removed.
+        * UserInterface/ResourceContentView.js:
+        (WebInspector.ResourceContentView.prototype._mouseWasClicked): Use handlePossibleLinkClick.
+
+2012-03-13  Timothy Hatcher  <timothy@apple.com>
+
+        Properly bind and unbind every DOMNode to DOMTreeManager.
+
+        Merges the fix for https://webkit.org/b/78116 from open source (r107093).
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMNode.js:
+        (WebInspector.DOMNode): Inserts the node into the DOMTreeManager map here. So all
+        the callers don't need to do it.
+        * UserInterface/DOMTreeManager.js:
+        (WebInspector.DOMTreeManager.prototype._setDocument): Removed binding code.
+        (WebInspector.DOMTreeManager.prototype._setDetachedRoot): Ditto.
+        (WebInspector.DOMTreeManager.prototype._setChildNodes): Removed call to _bindNodes.
+        (WebInspector.DOMTreeManager.prototype._bindNodes): Removed.
+        (WebInspector.DOMTreeManager.prototype._childNodeRemoved): Call _unbind.
+        (WebInspector.DOMTreeManager.prototype._unbind): Added. Recursively unbind.
+
+2012-03-13  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an issue where removing a TreeElement from a TreeOutline would cause the TreeOutline
+        to forget all TreeElements that came after the TreeElement that was removed.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/TreeOutline.js:
+        (TreeOutline.prototype._forgetChildrenRecursive): Pass parentElement instead of this to
+        traverseNextTreeElement, forcing it to stop when it reaches the last descendant of parentElement.
+
+2012-03-12  Timothy Hatcher  <timothy@apple.com>
+
+        Keep the QuickConsole scroll position pinned to the bottom when changing the height.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole.prototype.updateLayout): Scroll to the bottom if we were before the possible height change.
+        (WebInspector.QuickConsole.prototype._isScrolledToBottom): Added.
+        (WebInspector.QuickConsole.prototype._scrollToBottom): Added.
+        (WebInspector.QuickConsole.prototype._resizerMouseDown): Remember if the view was scrolled to the bottom before resize.
+        (WebInspector.QuickConsole.prototype._resizerMouseMoved): Scroll to the bottom if we were before resize.
+        (WebInspector.QuickConsole.prototype._resizerMouseUp): Delete the flag.
+        (WebInspector.QuickConsole.prototype._viewContainerClick.afterDispatches): Scroll the console element into view that
+        was clicked or scroll to the bottom if we were before.
+
+2012-03-12  Timothy Hatcher  <timothy@apple.com>
+
+        Allow the QuickConsole to shrink in height when it auto grew in height.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole.prototype.set collapsed): Reset _userPreferredMaximumHeightWasSetSinceLastToggle back to false.
+        (WebInspector.QuickConsole.prototype.set userPreferredMaximumHeight): Set _userPreferredMaximumHeightWasSetSinceLastToggle to true.
+        (WebInspector.QuickConsole.prototype._updateViewContainerSizeAndScrollDivider): Return early if _userPreferredMaximumHeightWasSetSinceLastToggle
+        is set after calling _updateScrollDivider. Added an allowShrinking parameter.
+        (WebInspector.QuickConsole.prototype._viewContainerClick): Update comment. And call _updateViewContainerSizeAndScrollDivider,
+        passing true to allow shrinking.
+
+2012-03-12  Timothy Hatcher  <timothy@apple.com>
+
+        Quick fixes to the QuickConsole styles.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/QuickConsole.css:
+        (.quick-console): Set overflow to hidden so the toolbar box-shadow does not spill out the sides. Also
+        removes a box-shadow that was not doing anything useful.
+        (.quick-console > .view-container): Set overflow-x to hidden so the horizontal scrollbar never shows.
+        (.quick-console > .toolbar): Set a transition on box-shadow so the shadow animates. Add a base box-shadow
+        that has 0 for blur so it animates nicely.
+        (.quick-console > .toolbar.scroll-divider): Tweak the shadow so it is rgba() and a larger blur.
+
+2012-03-12  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Disable the Toggle button when there is no Quick Console content.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.js:
+        (WebInspector._keydown):
+        * UserInterface/QuickConsole.css:
+        (.quick-console > .toolbar > .navigation-bar > .item.button.disabled > .glyph):
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole):
+        (WebInspector.QuickConsole.prototype.toggle):
+        (WebInspector.QuickConsole.prototype.didAppendConsoleMessage):
+        (WebInspector.QuickConsole.prototype._toggleButtonClicked):
+        (WebInspector.QuickConsole.prototype._resizerDoubleClicked):
+        (WebInspector.QuickConsole.prototype._activeLogCleared):
+
+2012-03-12  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11034808> Esc should focus or toggle the QuickConsole
+
+        Esc will focus the quick console if nothing else is focused and accepting
+        input. When focused, Esc will toggle the console's drawer.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Main.js:
+        (WebInspector._keydown):
+        Handle the Esc key.
+
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole.prototype._toggleButtonClicked):
+        When the quick console is focused and a user clicks the toggle button,
+        the quick console emits a "blur" event even though the caret is still
+        inside it and commands can be run. This breaks the "isFocused()" state
+        of the field and thus the Esc key toggling the field. So, lets just
+        auto-focus the TextPrompt when the toggle button is clicked.
+
+2012-03-12  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11034699> Quick Console should respect clear keyboard shortcuts
+
+        React to the clear active log event but only on the currently active console.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/JavaScriptTextPrompt.js:
+        (WebInspector.JavaScriptTextPrompt):
+        (WebInspector.JavaScriptTextPrompt.prototype.isFocused):
+        (WebInspector.JavaScriptTextPrompt.prototype._focusedPrompt):
+        (WebInspector.JavaScriptTextPrompt.prototype._blurredPrompt):
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype.consoleCleared):
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole):
+        (WebInspector.QuickConsole.prototype._activeLogCleared):
+
+2012-03-12  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Improve QuickConsole content sizing.
+
+        Make the quick console work like a calculator. The most recent
+        result is closest to the console prompt. Older results scroll
+        up off the top. Now when resizing, the user is setting their
+        preferred maximum size of the drawer.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole):
+        (WebInspector.QuickConsole.prototype.set collapsed):
+        (WebInspector.QuickConsole.prototype.get collapsedHeight):
+        (WebInspector.QuickConsole.prototype.get minimumUncollapsedHeight):
+        (WebInspector.QuickConsole.prototype.get maximumUncollapsedHeight):
+        Give comments describing the boundary heights.
+
+        (WebInspector.QuickConsole.prototype.get userPreferredMaximumHeight):
+        (WebInspector.QuickConsole.prototype.set userPreferredMaximumHeight):
+        Add a convenient function for getting the user preferred sizes.
+
+        (WebInspector.QuickConsole.prototype.set height):
+        (WebInspector.QuickConsole.prototype._expandViewContainerSize):
+        (WebInspector.QuickConsole.prototype._updateViewContainerSizeAndScrollDivider):
+        (WebInspector.QuickConsole.prototype._updateScrollDivider):
+        When setting the height, we typically drop through to updating the
+        container size to get the size to fit, and update the scroll divider
+        if needed.
+
+        (WebInspector.QuickConsole.prototype._resizerMouseMoved):
+        When the user resized, save the height into Settings.
+
+        (WebInspector.QuickConsole.prototype.updateLayout):
+        (WebInspector.QuickConsole.prototype.didAppendConsoleMessage):
+        Times when we need to adjust sizes.
+
+        (WebInspector.QuickConsole.prototype._viewContainerScroll):
+        Don't adjust the size, just show/hide the divider.
+
+        (WebInspector.QuickConsole.prototype._viewContainerClick.afterDispatches):
+        (WebInspector.QuickConsole.prototype._viewContainerClick.afterClickHandling):
+        (WebInspector.QuickConsole.prototype._viewContainerClick):
+        Adjust the size, but only after any possible work.
+
+2012-03-12  Timothy Hatcher  <timothy@apple.com>
+
+        Don't break into the debugger when evaluating an expression in the console that triggers an exception.
+
+        The exception will still be logged as the result in the console. We might tweak how this works later,
+        but right now breaking into the debugger for this is annoying. This change matches open source.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/JavaScriptLogViewController.js:
+        (WebInspector.JavaScriptLogViewController.prototype._appendCommand): Pass true for doNotPauseOnExceptions parameter.
+
+2012-03-12  Timothy Hatcher  <timothy@apple.com>
+
+        Remove an overzealous assert in DebuggerManager.
+
+        The script identifier can be reused, so just make a new Script and insert it into the map again.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager.prototype.scriptDidParse): Removed console.assert.
+
+2012-03-12  Timothy Hatcher  <timothy@apple.com>
+
+        Clean up the styles for the console and log views.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/JavaScriptTextPrompt.css:
+        (.javascript-prompt): Adjust the padding and remove the margin.
+        * UserInterface/JavaScriptTextPrompt.js:
+        (WebInspector.JavaScriptTextPrompt): Set the text to "" so a "<br>" is inserted into the prompt. This lets the insertion
+        caret to position correctly.
+        * UserInterface/LogContentView.css:
+        (.console-message, .console-user-command): Adjust the padding and remove the margin.
+        (.console-message::before, .console-user-command::before, .javascript-prompt::before, .console-group-title::before):
+        Don't use a negative margin, make it a positive one. The padding above makes room.
+        (.console-group-messages .section .header::before): Bump up the disclosure triangle, it was 1px too low.
+        (.console-group-messages .section .header .title): Reset the line-height to make the logged object not take up extra space.
+        * UserInterface/QuickConsole.css:
+        (.quick-console > .toolbar > .text-prompt > .javascript-prompt): Reduce top position to better center the prompt.
+
+2012-03-12  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an issue where the whole Web Inspector Ui would just 1px after typing in the quick console.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/QuickConsole.css:
+        (.quick-console > .toolbar): Removed -webkit-box-sizing.
+        (.quick-console > .toolbar > .navigation-bar): Set the height to 21px so it does not extend out of .toolbar.
+
+2012-03-11  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10319586> Implement the Quick Console for the new Web Inspector design
+
+        Give the QuickConsole a LogViewController. The JavaScriptTextPrompt will
+        go in the toolbar, and the ViewContainer will hold the ConsoleGroup output.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/QuickConsole.css:
+        (.quick-console):
+        (.quick-console > .toolbar > .text-prompt):
+        (.quick-console > .toolbar > .text-prompt > .javascript-prompt):
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole):
+        (WebInspector.QuickConsole.prototype.didAppendConsoleMessage):
+        (WebInspector.QuickConsole.prototype._mouseWasClicked):
+
+2012-03-11  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10319586> Implement the Quick Console for the new Web Inspector design
+
+        Add a scroll divider box shadow when the Quick Console's view
+        contains scrollable content.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/QuickConsole.css:
+        (.quick-console > .view-container):
+        (.quick-console > .toolbar.scroll-divider):
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole):
+        (WebInspector.QuickConsole.prototype.set collapsed):
+        (WebInspector.QuickConsole.prototype.set height):
+        (WebInspector.QuickConsole.prototype._resizerMouseUp):
+        (WebInspector.QuickConsole.prototype._updateScrollDivider):
+
+2012-03-11  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10319586> Implement the Quick Console for the new Web Inspector design
+
+        Add JavaScriptLogViewController class. This holds a JavaScriptTextPrompt
+        for input and a ConsoleGroup to put the output of JavaScript commands.
+        The idea being that you could swap out either the input source or output
+        destination. Currently this class just knows how to deal with JavaScript.
+
+        This moves out most of the remaining JavaScript knowledge from
+        LogContentView and puts it into this new controller. There is just one
+        delegate message back.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/JavaScriptLogViewController.js: Added.
+        (WebInspector.JavaScriptLogViewController):
+        (WebInspector.JavaScriptLogViewController.prototype.constructor.WebInspector.JavaScriptLogViewController.get prompt):
+        (WebInspector.JavaScriptLogViewController.prototype.get topConsoleGroup):
+        (WebInspector.JavaScriptLogViewController.prototype.get currentConsoleGroup):
+        (WebInspector.JavaScriptLogViewController.prototype.clear):
+        (WebInspector.JavaScriptLogViewController.prototype.appendConsoleMessage):
+        (WebInspector.JavaScriptLogViewController.prototype._requestClearMessages):
+        (WebInspector.JavaScriptLogViewController.prototype._promptKeyDown):
+        (WebInspector.JavaScriptLogViewController.prototype._enterKeyPressed):
+        (WebInspector.JavaScriptLogViewController.prototype._appendCommand.printResult):
+        (WebInspector.JavaScriptLogViewController.prototype._appendCommand):
+        (WebInspector.JavaScriptLogViewController.prototype._appendConsoleMessage):
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView):
+        (WebInspector.LogContentView.prototype.constructor.WebInspector.LogContentView.messageAdded):
+        (WebInspector.LogContentView.prototype.consoleCleared):
+        (WebInspector.LogContentView.prototype.didAppendConsoleMessage):
+        (WebInspector.LogContentView.prototype._messagesClicked):
+        * UserInterface/Main.html:
+
+2012-03-11  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10319586> Implement the Quick Console for the new Web Inspector design
+
+        Remove unused OpenSource code from LogContentView.
+        Also simplify keyboard shortcut registrations.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ConsoleCommandResult.js:
+        (WebInspector.ConsoleCommandResult):
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView):
+        (WebInspector.LogContentView.prototype._appendCommand.printResult):
+        (WebInspector.LogContentView.prototype._appendCommand):
+
+2012-03-11  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10319586> Implement the Quick Console for the new Web Inspector design
+
+        Add OpenSource's ConsoleView copyright headers to JSTextPrompt, ConsoleGroup, and Command files.
+        Add OpenSource's ConsoleMessage* copyright headers to ConsoleMessage* files.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ConsoleCommand.js:
+        * UserInterface/ConsoleCommandResult.js:
+        * UserInterface/ConsoleGroup.js:
+        * UserInterface/ConsoleMessage.js:
+        * UserInterface/ConsoleMessageImpl.js:
+        * UserInterface/JavaScriptTextPrompt.js:
+
+2012-03-11  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10319586> Implement the Quick Console for the new Web Inspector design
+
+        Split ConsoleGroup, ConsoleCommand, and ConsoleCommandResult into
+        separate files and do a tiny bit of cleanup to match the Safari
+        frontend style.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ConsoleCommand.js: Added.
+        (WebInspector.ConsoleCommand):
+        (WebInspector.ConsoleCommand.prototype.constructor.WebInspector.ConsoleCommand.clearHighlight):
+        (WebInspector.ConsoleCommand.prototype.highlightSearchResults):
+        (WebInspector.ConsoleCommand.prototype.matchesRegex):
+        (WebInspector.ConsoleCommand.prototype.toMessageElement):
+        (WebInspector.ConsoleCommand.prototype._formatCommand):
+        * UserInterface/ConsoleCommandResult.js: Added.
+        (WebInspector.ConsoleCommandResult):
+        (WebInspector.ConsoleCommandResult.prototype.constructor.WebInspector.ConsoleCommandResult.toMessageElement):
+        * UserInterface/ConsoleGroup.js: Added.
+        (WebInspector.ConsoleGroup):
+        (WebInspector.ConsoleGroup.prototype.constructor.WebInspector.ConsoleGroup.addMessage):
+        (WebInspector.ConsoleGroup.prototype._titleClicked):
+        * UserInterface/ConsoleMessage.js:
+        (WebInspector.ConsoleMessage.create):
+        * UserInterface/LogContentView.js:
+        * UserInterface/Main.html:
+
+2012-03-11  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10319586> Implement the Quick Console for the new Web Inspector design
+
+        Extract the JavaScript TextPrompt details into a new class,
+        JavaScriptTextPrompt, which is a TextPrompt with JavaScript
+        completion logic.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/JavaScriptTextPrompt.js: Added.
+        (WebInspector.JavaScriptTextPrompt):
+        (WebInspector.JavaScriptTextPrompt.prototype.constructor.WebInspector.JavaScriptTextPrompt.get promptElement):
+        (WebInspector.JavaScriptTextPrompt.prototype.completions):
+        (WebInspector.JavaScriptTextPrompt.prototype._completions.evaluated.getCompletions):
+        (WebInspector.JavaScriptTextPrompt.prototype._completions.evaluated):
+        (WebInspector.JavaScriptTextPrompt.prototype._completions.receivedPropertyNamesFromEval):
+        (WebInspector.JavaScriptTextPrompt.prototype._completions.receivedPropertyNames):
+        (WebInspector.JavaScriptTextPrompt.prototype._completions):
+        (WebInspector.JavaScriptTextPrompt.prototype._reportCompletions):
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView):
+        (WebInspector.LogContentView.prototype.disable):
+        (WebInspector.LogContentView.prototype.shown):
+        (WebInspector.LogContentView.prototype._scheduleScrollIntoView.scrollIntoView):
+        (WebInspector.LogContentView.prototype._scheduleScrollIntoView):
+        (WebInspector.LogContentView.prototype._immediatelyScrollIntoView):
+        * UserInterface/Main.html:
+
+2012-03-10  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11025039> Console error when right clicking in Console: missing WebInspector.populateHrefContextMenu
+
+        Remove unnecessary or unsupported Console contextmenu options that
+        came from OpenSource.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype._handleContextMenuEvent):
+        * Localizations/en.lproj/localizedStrings.js:
+
+2012-03-11  Timothy Hatcher  <timothy@apple.com>
+
+        Don't highlight non-enumerable properties at the top level for Local, Closure, and Catch scopes.
+
+        Those scopes are synthesized scope objects, unlike Global and With scopes.
+
+        Part of: <rdar://problem/10318770>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ObjectPropertiesSection.js:
+        (WebInspector.ObjectPropertyTreeElement.prototype.update): Check for dontHighlightNonEnumerablePropertiesAtTopLevel.
+        * UserInterface/ScopeChainDetailsSidebarPanel.js:
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh): Set dontHighlightNonEnumerablePropertiesAtTopLevel
+        for the Local, Closure, and Catch scopes.
+
+2012-03-11  Timothy Hatcher  <timothy@apple.com>
+
+        Select and show the Scope Chain details sidebar panel when paused.
+
+        Part of: <rdar://problem/10318770>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Main.js:
+        (WebInspector._debuggerDidPause): Set a flag to show it when available.
+        (WebInspector._contentBrowserRepresentedObjectsDidChange): Check for the flag and show the panel.
+
+2012-03-11  Timothy Hatcher  <timothy@apple.com>
+
+        Populate the Scope Chain details sidebar panel.
+
+        Part of: <rdar://problem/10318770>
+
+        Reviewed by Brian Weinstein.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/Main.html: Included ScopeVariableTreeElement.js.
+        * UserInterface/ScopeChainDetailsSidebarPanel.js:
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh): Build ObjectPropertiesSections and DetailsSections
+        for each ScopeChainNode in the scope chain.
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh.delayedWork): Added. Append the DetailsSections.
+        * UserInterface/ScopeVariableTreeElement.js: Copied from OpenSource/Source/WebCore/inspector/front-end/ScopeChainSidebarPane.js.
+        Some code style clean up and modifications to how _expandedProperties and the _propertyIdentifier prefix are accessed.
+
+2012-03-11  Timothy Hatcher  <timothy@apple.com>
+
+        Clean up the styles for properties sections and support creation without the header element.
+
+        This is needed for the Scope Chain sidebar panel.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style .styles-section): Removed padding and background properties.
+        (.sidebar > .panel.details.css-style .styles-section .header): Removed background properties.
+        (.sidebar > .panel.details.css-style .styles-section.no-header .properties): Added. Reset padding.
+        * UserInterface/ComputedStylePropertiesSection.js:
+        (WebInspector.ComputedStylePropertiesSection): Call the PropertiesSection constructor after
+        some initial setup since Section will now call expand() when there is no header.
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline): Use the syntax-highlighted class name constant.
+        * UserInterface/DetailsSection.css:
+        (.details-section > .content > .group > .row.properties): Added. Specify padding.
+        * UserInterface/DetailsSectionPropertiesRow.js:
+        (WebInspector.DetailsSectionPropertiesRow): Add the syntax-highlighted class name.
+        * UserInterface/PropertiesSection.js:
+        (WebInspector.PropertiesSection): Call the Section constructor after some initial setup since
+        Section will now call expand() when there is no header.
+        * UserInterface/Section.css:
+        (.section.expanded.no-header .properties): Added. Reset padding-left.
+        * UserInterface/Section.js:
+        (WebInspector.Section): Don't create the header element if there if title and subtitle are not
+        strings or Nodes.
+        * UserInterface/StylePropertiesSection.js:
+        (WebInspector.StylePropertiesSection): Removed syntax-highlighted class name since it is added
+        by DetailsSectionPropertiesRow now.
+        * UserInterface/SyntaxHighlightingDefaultTheme.css: Removed background-color so this does not cause
+        sidebar to be white.
+        * UserInterface/SyntaxHighlightingSupport.js: Added syntax-highlighted class name constant.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor): Use constant from SyntaxHighlightingSupport.js.
+
+2012-03-10  Timothy Hatcher  <timothy@apple.com>
+
+        Add the start of the Scope Chain details sidebar panel which will show all the variables
+        available when paused in the debugger.
+
+        Part of: <rdar://problem/10318770>
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/Images/NavigationItemVariable.pdf: Added.
+        * UserInterface/Main.html: Included ScopeChainDetailsSidebarPanel.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create a ScopeChainDetailsSidebarPanel and include it.
+        * UserInterface/ScopeChainDetailsSidebarPanel.js: Added.
+        (WebInspector.ScopeChainDetailsSidebarPanel):
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype.inspect): Look for CallFrame objects.
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype.get callFrame):
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype.set callFrame):
+        (WebInspector.ScopeChainDetailsSidebarPanel.prototype.refresh): Needs implemented.
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.prototype.get supplementalRepresentedObjects): Include _callFrame.
+        (WebInspector.TextResourceContentView.prototype._updateExecutionLineNumber): Store the activeCallFrame when
+        it applies to this resource to we can return it in supplementalRepresentedObjects.
+
+2012-03-10  Timothy Hatcher  <timothy@apple.com>
+
+        Add support to ContentView for supplemental represented objects.
+
+        Supplemental represented objects can be used to provide more matching choices to the details
+        sidebar panels for things that are are not represented as path components in the navigation bar.
+        This support will be used to supply the call frame that is active in a TextResourceContentView,
+        for the purposes of showing a details sidebar panel with scope chain information.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ClusterContentView.js:
+        (WebInspector.ClusterContentView): Listen for the SupplementalRepresentedObjectsDidChange event.
+        (WebInspector.ClusterContentView.prototype.get supplementalRepresentedObjects): Added. Pass through
+        the current content view's supplementalRepresentedObjects.
+        (WebInspector.ClusterContentView.prototype._contentViewSupplementalRepresentedObjectsDidChange): Added.
+        Fire the SupplementalRepresentedObjectsDidChange on behalf of the current content view.
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser): Listen for the SupplementalRepresentedObjectsDidChange event.
+        (WebInspector.ContentBrowser.prototype.get currentRepresentedObjects): Include the current content view's
+        supplementalRepresentedObjects if they are not null and not empty.
+        (WebInspector.ContentBrowser.prototype._contentViewSupplementalRepresentedObjectsDidChange): Added.
+        Dispatch the CurrentRepresentedObjectsDidChange event soon.
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView.prototype.get supplementalRepresentedObjects): Added stub.
+
+2012-03-10  Timothy Hatcher  <timothy@apple.com>
+
+        Include scope variables when doing autocompletion in the console.
+
+        Part of: <rdar://problem/10318770>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CallFrame.js:
+        (WebInspector.CallFrame.prototype.collectScopeChainVariableNames): Added. Walk the scope chain and
+        request all the properties for each scope node object.
+        (WebInspector.CallFrame.prototype.collectScopeChainVariableNames.propertiesCollected): Added. Add the property
+        names to the result and call the callback when pendingRequests is 0.
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype._completions): Use CallFrame.collectScopeChainVariableNames.
+
+2012-03-10  Timothy Hatcher  <timothy@apple.com>
+
+        Support evaluating against the local scope when paused in the debugger.
+
+        Part of: <rdar://problem/10318770>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype.evalInInspectedWindow): Use DebuggerAgent.evaluateOnCallFrame
+        when there is an active call frame.
+
+2012-03-10  Timothy Hatcher  <timothy@apple.com>
+
+        Move the flashing prevention code from DebugSidebarPanel to DebuggerManager.
+
+        Part of: <rdar://problem/10318770>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DebugSidebarPanel.js:
+        (WebInspector.DebugSidebarPanel): Listen for the new CallFramesDidChange event instead of
+        the Paused and Resumed events.
+        (WebInspector.DebugSidebarPanel.prototype._showNotPausedEmptyContentPlaceholder): Added.
+        (WebInspector.DebugSidebarPanel.prototype._updateEmptyContentPlaceholder): Updated the message.
+        (WebInspector.DebugSidebarPanel.prototype._debuggerCallFramesDidChange): Check for null callFrames
+        and call _showNotPausedEmptyContentPlaceholder.
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager.prototype.debuggerDidPause): Remove assert, since we might be paused still.
+        Clear the delayed resume timeout.
+        (WebInspector.DebuggerManager.prototype.debuggerDidResume): Delay clearing the state and firing events.
+
+2012-03-10  Timothy Hatcher  <timothy@apple.com>
+
+        Add debugger controls for pause, resume, step over, step in, and step out.
+
+        Part of: <rdar://problem/10318770>
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Images/Pause.pdf: Added.
+        * UserInterface/Images/Resume.pdf: Added.
+        * UserInterface/Images/StepInto.pdf: Added.
+        * UserInterface/Images/StepOut.pdf: Added.
+        * UserInterface/Images/StepOver.pdf: Added.
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole): Create the button items.
+        (WebInspector.QuickConsole.prototype._debuggerPauseResumeButtonClicked): Added.
+        (WebInspector.QuickConsole.prototype._debuggerStepOverButtonClicked): Added.
+        (WebInspector.QuickConsole.prototype._debuggerStepIntoButtonClicked): Added.
+        (WebInspector.QuickConsole.prototype._debuggerStepOutButtonClicked): Added.
+        (WebInspector.QuickConsole.prototype._debuggerDidPause): Added.
+        (WebInspector.QuickConsole.prototype._debuggerDidResume): Added.
+
+2012-03-10  Timothy Hatcher  <timothy@apple.com>
+
+        Use ToggleButtonNavigationItem for the quick console toggle button.
+
+        Also start using the right artwork for the glyph.
+
+        Part of: <rdar://problem/10319586>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Images/ToggleArrowDown.pdf: Added.
+        * UserInterface/Images/ToggleArrowUp.pdf: Added.
+        * UserInterface/QuickConsole.css: Removed styles to flip the arrow when collapsed.
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole): Use ToggleButtonNavigationItem. Add a divider to the left of the button.
+        (WebInspector.QuickConsole.prototype.set collapsed): Change the image for the toggle button.
+
+2012-03-10  Timothy Hatcher  <timothy@apple.com>
+
+        Remove QuickConsoleButtonNavigationItem and merge its functionality down into ButtonNavigationItem.
+
+        Having a special subclass prevent us from using ToggleButtonNavigationItem without adding another
+        special QuickConsoleToggleButtonNavigationItem subclass.
+
+        Part of: <rdar://problem/10319586>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ButtonNavigationItem.css:
+        (.navigation-bar > .item.suppress-emboss > .glyph):
+        (.navigation-bar > .item.suppress-emboss:active > .glyph):
+        (.navigation-bar > .item.button.disabled > .glyph):
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem): Call _updateImage and the suppress-emboss style class if needed.
+        (WebInspector.ButtonNavigationItem.prototype.set image): Call _updateImage.
+        (WebInspector.ButtonNavigationItem.prototype.generateStyleText): Generate a background-size for _suppressEmboss.
+        (WebInspector.ButtonNavigationItem.prototype._canvasIdentifier): Added assert.
+        (WebInspector.ButtonNavigationItem.prototype._updateImage): Added.
+        (WebInspector.ButtonNavigationItem.prototype._generateImages): Added assert.
+        * UserInterface/Main.html: Removed QuickConsoleButtonNavigationItem.{css,js}.
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole): Use ButtonNavigationItem.
+        * UserInterface/QuickConsoleButtonNavigationItem.css: Removed.
+        * UserInterface/QuickConsoleButtonNavigationItem.js: Removed.
+
+2012-03-10  Timothy Hatcher  <timothy@apple.com>
+
+        Make line numbers in the Breakpoint sidebar be 1-based. Also fixes a couple asserts that the
+        breakpoint lineNumber is 0-based.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/Breakpoint.js:
+        (WebInspector.Breakpoint): Fix assert.
+        (WebInspector.Breakpoint.prototype.set lineNumber): Ditto.
+        * UserInterface/BreakpointTreeElement.js:
+        (WebInspector.BreakpointTreeElement.prototype._updateMainTitle): Add 1 to the user visible number.
+
+2012-03-10  Timothy Hatcher  <timothy@apple.com>
+
+        Select the Debug sidebar panel and show the navigation sidebar when the debugger pauses.
+
+        Part of: <rdar://problem/10318770>
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Added Paused event listener.
+        (WebInspector._debuggerDidPause): Added.
+
+2012-03-10  Timothy Hatcher  <timothy@apple.com>
+
+        Highlight the current execution line.
+
+        Part of: <rdar://problem/10318770>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DebugSidebarPanel.js:
+        (WebInspector.DebugSidebarPanel.prototype._debuggerDidPause): Select the active call frame tree element.
+        (WebInspector.DebugSidebarPanel.prototype._treeElementSelected): Set the active call frame.
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager.prototype.get activeCallFrame): Added.
+        (WebInspector.DebuggerManager.prototype.set activeCallFrame): Added. Fire ActiveCallFrameDidChange
+        (WebInspector.DebuggerManager.prototype.debuggerDidPause): Set _activeCallFrame and fire ActiveCallFrameDidChange.
+        (WebInspector.DebuggerManager.prototype.debuggerDidResume): Ditto.
+        * UserInterface/Images/InstructionPointer.png: Added.
+        * UserInterface/Images/InstructionPointer@2x.png: Added.
+        * UserInterface/TextEditor.css:
+        (.text-editor > .gutter > .line-number.execution-line::after):
+        (.text-editor .text-editor-text-chunk.execution-line):
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor): Initialize _executionLineNumber to NaN.
+        (WebInspector.TextEditor.prototype.get executionLineNumber): Added.
+        (WebInspector.TextEditor.prototype.set executionLineNumber): Added. Call _updateExecutionLineNumber.
+        (WebInspector.TextEditor.prototype.singleLineElementForLine): Handle a null result from _textChunkForLine.
+        (WebInspector.TextEditor.prototype._updateExecutionLineNumber): Added. Removes from the old line and adds to the new.
+        (WebInspector.TextEditor.prototype._updateLineNumbers): Make lineNumber 0-based instead of 1-based.
+        (WebInspector.TextEditor.prototype._addBreakpointElementToLineElementWithInfo): Add 1 for user visible line numbers.
+        (WebInspector.TextEditor.prototype._removePossibleBreakpointElementFromLineElement): Ditto.
+        (WebInspector.TextEditor.prototype._textChunkForLine): Handle negative numbers and NaN.
+        (WebInspector.TextEditor.prototype._breakTextChunkAtIndexIntoSingleLineTextChunks): Assert the textChunk isn't null.
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView):
+        (WebInspector.TextResourceContentView.prototype.contentAvailable):
+        (WebInspector.TextResourceContentView.prototype._updateExecutionLineNumber):
+
+2012-03-09  Timothy Hatcher  <timothy@apple.com>
+
+        Populate the Debug sidebar with call frames when the debugger pauses.
+
+        Part of: <rdar://problem/10318770>
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/CallFrameIcons.css: Added.
+        (.function-icon .icon):
+        (.event-listener-icon .icon):
+        * UserInterface/CallFrameTreeElement.js: Added.
+        (WebInspector.CallFrameTreeElement):
+        (WebInspector.CallFrameTreeElement.prototype.get callFrame):
+        * UserInterface/DebugSidebarPanel.js:
+        (WebInspector.DebugSidebarPanel):
+        (WebInspector.DebugSidebarPanel.prototype._updateEmptyContentPlaceholder): Added.
+        (WebInspector.DebugSidebarPanel.prototype._debuggerDidPause): Added. Create CallFrameTreeElements.
+        (WebInspector.DebugSidebarPanel.prototype._debuggerDidResume): Added. Set a timeout for delayedWork.
+        (WebInspector.DebugSidebarPanel.prototype._debuggerDidResume.delayedWork): Added. Remove the tree elements.
+        (WebInspector.DebugSidebarPanel.prototype._treeElementSelected): Added. Show the resource source code.
+        * UserInterface/Images/EventListener.pdf: Added.
+        * UserInterface/Images/Function.pdf: Added.
+        * UserInterface/Main.html: Included CallFrameIcons.css and CallFrameTreeElement.js.
+
+2012-03-09  Timothy Hatcher  <timothy@apple.com>
+
+        Process the call frames when the debugger pauses and create easy to use objects.
+
+        Part of: <rdar://problem/10318770>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CallFrame.js: Added.
+        (WebInspector.CallFrame):
+        (WebInspector.CallFrame.prototype.get id):
+        (WebInspector.CallFrame.prototype.get scriptLocation):
+        (WebInspector.CallFrame.prototype.get functionName):
+        (WebInspector.CallFrame.prototype.get thisObject):
+        (WebInspector.CallFrame.prototype.get scopeChain):
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager.prototype.get callFrames): Added.
+        (WebInspector.DebuggerManager.prototype.debuggerDidPause): Process the callFramesPayload.
+        (WebInspector.DebuggerManager.prototype.debuggerDidResume): Clear the _callFrames.
+        (WebInspector.DebuggerManager.prototype._scriptLocationFromPayload): Added. Helper.
+        (WebInspector.DebuggerManager.prototype._scopeChainFromPayload): Added. Helper.
+        (WebInspector.DebuggerManager.prototype._scopeChainNodeFromPayload): Added. Helper.
+        * UserInterface/Main.html: Included CallFrame.js, ScopeChainNode.js, and ScriptLocation.js.
+        * UserInterface/ScopeChainNode.js: Added.
+        (WebInspector.ScopeChainNode):
+        (WebInspector.ScopeChainNode.prototype.get type):
+        (WebInspector.ScopeChainNode.prototype.get object):
+        * UserInterface/ScriptLocation.js: Added.
+        (WebInspector.ScriptLocation):
+        (WebInspector.ScriptLocation.prototype.get script):
+        (WebInspector.ScriptLocation.prototype.get lineNumber):
+        (WebInspector.ScriptLocation.prototype.get columnNumber):
+
+2012-03-09  Timothy Hatcher  <timothy@apple.com>
+
+        Track the paused state of the debugger and add functions to pause, resume, and step.
+
+        Part of: <rdar://problem/10318770>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager.prototype.get paused): Added.
+        (WebInspector.DebuggerManager.prototype.pause): Added.
+        (WebInspector.DebuggerManager.prototype.resume): Added.
+        (WebInspector.DebuggerManager.prototype.stepOver): Added.
+        (WebInspector.DebuggerManager.prototype.stepInto): Added.
+        (WebInspector.DebuggerManager.prototype.reset): Reset _paused and fire the Resumed event.
+        (WebInspector.DebuggerManager.prototype.debuggerDidPause): Set _paused and fire the Paused event.
+        (WebInspector.DebuggerManager.prototype.debuggerDidResume): Set _paused and fire the Resumed event.
+        * UserInterface/DebuggerObserver.js:
+        (WebInspector.DebuggerObserver.prototype.paused): Call DebuggerManager.debuggerDidPause.
+        (WebInspector.DebuggerObserver.prototype.resumed): Call DebuggerManager.debuggerDidResume.
+
+2012-03-09  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.Script and create them when scripts are parsed.
+
+        Part of: <rdar://problem/10318770>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager):
+        (WebInspector.DebuggerManager.prototype.reset): Clear the script map.
+        (WebInspector.DebuggerManager.prototype.scriptDidParse): Added. Create a Script instance
+        and add it to the id map.
+        * UserInterface/DebuggerObserver.js:
+        (WebInspector.DebuggerObserver.prototype.scriptParsed): Call DebuggerManager.scriptDidParse.
+        * UserInterface/Main.html: Included Script.js.
+        * UserInterface/Script.js: Added.
+        (WebInspector.Script):
+        (WebInspector.Script.prototype.get id):
+        (WebInspector.Script.prototype.get range):
+        (WebInspector.Script.prototype.get url):
+        (WebInspector.Script.prototype.get urlComponents):
+
+2012-03-09  Timothy Hatcher  <timothy@apple.com>
+
+        Add a way to break on all exceptions and uncaught exceptions.
+
+        Part of: <rdar://problem/10318770&10318777>
+
+        Reviewed by Brian Weinstein and Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/BreakpointIcons.css:
+        (.breakpoint-exception-icon .icon): Added.
+        * UserInterface/BreakpointSidebarPanel.js:
+        (WebInspector.BreakpointSidebarPanel): Create BreakpointTreeElements for the two exception breakpoints.
+        * UserInterface/BreakpointTreeElement.js:
+        (WebInspector.BreakpointTreeElement): Add support for a custom style class and title.
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager): Create an all exceptions and and all uncaught exceptions breakpoint.
+        (WebInspector.DebuggerManager.prototype.get allExceptionsBreakpoint): Added.
+        (WebInspector.DebuggerManager.prototype.get allUncaughtExceptionsBreakpoint): Added.
+        (WebInspector.DebuggerManager.prototype.breakpointResolved): Remove an overzealous assert.
+        (WebInspector.DebuggerManager.prototype._breakpointDisabledStateDidChange): Intercept the exception breakpoints
+        and call _updateBreakOnExceptionsState after updating the settings.
+        (WebInspector.DebuggerManager.prototype._updateBreakOnExceptionsState): Added. Communicate the state to the
+        backend and update resolved state.
+
+2012-03-10  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10319586> Implement the Quick Console for the new Web Inspector design
+
+        Allow resizing of the quick console. The quick console behaves like
+        sidebars. It toggles collapsed state when double clicked, and opens
+        or closes when resizing. The allowed maximum height is 75% of the
+        screen. When the window is resized smaller, we may need to shorten
+        the console to be within the 75%.
+
+        Remember the height before we collapsed so that if you toggle
+        immediately it will restore the height to what it was.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.js:
+        (WebInspector._contentBrowserSizeDidChange):
+        * UserInterface/QuickConsole.css:
+        (.quick-console):
+        (.quick-console > .resizer):
+        Position the quick-console resizer like a sidebar resizer. 5px
+        wide, with a couple pixels above and below the border.
+
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole):
+        (WebInspector.QuickConsole.prototype.get collapsedHeight):
+        (WebInspector.QuickConsole.prototype.get minimumUncollapsedHeight):
+        (WebInspector.QuickConsole.prototype.get maximumUncollapsedHeight):
+        (WebInspector.QuickConsole.prototype.updateLayout):
+        (WebInspector.QuickConsole.prototype.get height):
+        (WebInspector.QuickConsole.prototype.set height):
+        (WebInspector.QuickConsole.prototype._toggleButtonClicked):
+        (WebInspector.QuickConsole.prototype._resizerDoubleClicked):
+        (WebInspector.QuickConsole.prototype._resizerMouseDown):
+        (WebInspector.QuickConsole.prototype._resizerMouseMoved):
+        (WebInspector.QuickConsole.prototype._resizerMouseUp):
+
+2012-03-09  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10319586> Implement the Quick Console for the new Web Inspector design
+
+        Pull the console out of ContentBrowser and instead just put it underneath.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser):
+        * UserInterface/Main.css:
+        (#content):
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        * UserInterface/QuickConsole.css:
+        (#quick-console):
+        (#quick-console.collapsed):
+        (#quick-console .navigation-bar > .console-toggle):
+        (#quick-console.collapsed .navigation-bar > .console-toggle):
+        (#quick-console > .quick-console-view-container):
+        (#quick-console > .quick-console-toolbar):
+        (#quick-console > .quick-console-toolbar > .quick-console-text-prompt):
+        (#quick-console > .quick-console-toolbar > .navigation-bar):
+
+2012-03-09  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10319586> Implement the Quick Console for the new Web Inspector design
+
+        Add a toggle button to the quick console's navigation bar.
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:        
+        * UserInterface/Main.html:
+        Misc changes.
+
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem):
+        (WebInspector.ButtonNavigationItem.prototype.get glyphElement):
+        Expose glyphElement for QuickConsole buttons to use.
+        Add a way to suppress creating embossed images.
+
+        * UserInterface/QuickConsoleButtonNavigationItem.css: Added.
+        (.navigation-bar > .item.quick-console-button):
+        (.navigation-bar > .item.quick-console-button:active):
+        * UserInterface/QuickConsoleButtonNavigationItem.js: Added.
+        (WebInspector.QuickConsoleButtonNavigationItem):
+        (WebInspector.QuickConsoleButtonNavigationItem.prototype.generateStyleText):
+        The QuickConsole buttons are just styled with different opacities. We
+        can remove most of the custom NavigationItem styles and set the glyph
+        image directly.
+
+        * UserInterface/QuickConsole.css:
+        (.quick-console .navigation-bar > .console-toggle):
+        (.quick-console.collapsed .navigation-bar > .console-toggle):
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole):
+        (WebInspector.QuickConsole.prototype.get collapsed):
+        (WebInspector.QuickConsole.prototype.set collapsed):
+        (WebInspector.QuickConsole.prototype._toggleButtonClicked):
+        Give the console a toggle button.
+
+2012-03-09  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10319586> Implement the Quick Console for the new Web Inspector design
+
+        View hierarchy for the quick console:
+
+          <div class="quick-console">
+              <!--
+                Content view container. When the console adjusts its height this becomes
+                visible. This flex fills the vertical space.
+              -->
+              <div class="view-container"></div>
+
+              <!--
+                Toolbar fixed to the bottom. TextPrompt and NavigationBar with buttons.
+                Fixed height, position:relative to appear on top, and the text-prompt
+                flex fills horizontally.
+              -->
+              <div class="toolbar">
+                  <div class="text-prompt" contenteditable="true"></div>
+                  <div class="navigation-bar"></div>
+              </div>
+          </div>
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.html:
+        * UserInterface/QuickConsole.css:
+        (.quick-console):
+        (.quick-console.collapsed):
+        (.quick-console > .view-container):
+        (.quick-console > .toolbar):
+        (.quick-console > .toolbar > .text-prompt):
+        (.quick-console > .toolbar > .navigation-bar):
+        * UserInterface/QuickConsole.js:
+        (WebInspector.QuickConsole):
+        (WebInspector.QuickConsole.get element):
+
+        * UserInterface/QuickConsoleNavigationBar.js: Added.
+        (WebInspector.QuickConsoleNavigationBar):
+        (WebInspector.QuickConsoleNavigationBar.prototype.addNavigationItem):
+        Add navigation items on the left. Since we will always want the toggle button on the right.
+
+2012-03-09  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10319586> Implement the Quick Console for the new Web Inspector design
+
+        Add the QuickConsole to the bottom of the ContentBrowser.
+
+        Reviewed by Timothy Hatcher.
+        
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser):
+        * UserInterface/Main.html:
+        * UserInterface/QuickConsole.css: Added.
+        (.quick-console):
+        (body.window-inactive .navigation-bar):
+        * UserInterface/QuickConsole.js: Added.
+        (WebInspector.QuickConsole):
+        (WebInspector.QuickConsole.prototype.get element):
+
+2012-03-09  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11017753> Sometimes Load event-marker doesn't show up (99%)
+
+        When an event-marker is very close to, but not, the new maximum boundary
+        the maximum boundary wasn't being extended to allow for a nice display of
+        the event-marker. Now, if the event-marker is within 3% of the maximum
+        boundary, then just extend the maximum boundary by 3%.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/NetworkGraphCalculator.js:
+        (WebInspector.NetworkTimeCalculator.prototype.updateBoundariesForEventMarker):
+
+2012-03-08  Timothy Hatcher  <timothy@apple.com>
+
+        Follow up to my previous fix for reloading the page sometimes removes the main resource from breakpoints.
+
+        Not all breakpoints pass in the resource to _addBreakpoint. If resource was undefined it would cause
+        a new ResourceTreeElement to be created for each breakpoint.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/BreakpointSidebarPanel.js:
+        (WebInspector.BreakpointSidebarPanel.prototype._addBreakpoint): Lookup the resource first,
+        so it can always be compared to the ResourceTreeElement's resource.
+
+2012-03-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Follow-up patch to clean up DOMTreeManager events data.
+
+        Always pass the node as "node" and parentNode as "parent". There was
+        one case looking for parentNode that was totally wrong.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView.prototype._domNodeChanged):
+        * UserInterface/DOMTreeManager.js:
+        (WebInspector.DOMTreeManager.prototype._characterDataModified):
+        (WebInspector.DOMTreeManager.prototype._childNodeInserted):
+        * UserInterface/DOMTreeUpdater.js:
+        (WebInspector.DOMTreeUpdater.prototype._characterDataModified):
+        (WebInspector.DOMTreeUpdater.prototype._nodeInserted):
+
+2012-03-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11005082> Editing node attribute should or HTML should update Path Components
+
+        Update path components when the selected node has an attribute
+        or character data change.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView):
+        (WebInspector.DOMTreeContentView.prototype._domNodeChanged):
+        In the attribute events the changed node is event.data.node.
+        In the character data event the changed node is event.data.
+
+2012-03-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11014611> Inline Web SQL Database DataGrid resizers are not updated if inspector window resized
+
+        When the window resizes, the ContentView gets an updateLayout. Use this
+        opportunity to update the layout of any inline DataGrids so that their
+        resizers are positioned correctly.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DatabaseContentView.js:
+        (WebInspector.DatabaseContentView.prototype.constructor.WebInspector.DatabaseContentView.updateLayout):
+        (WebInspector.DatabaseContentView.prototype._appendViewQueryResult):
+
+2012-03-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Remove uses of WebInspector.useLowerCaseMenuTitles. On the Safari frontend
+        this is always yes and the function doesn't even exist. This code is currently
+        unreachable, the change is to fix update-safari-localizable-strings usage.
+
+        Reviewed by Brian Weinstein.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/LogContentView.js:
+
+2012-03-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Tweak the event-markers so they are always behind the network datagrid's
+        timeline pills. This is done by making three layers: event-marker (bottom),
+        timeline pills (middle), and tooltip div (top).
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/NetworkDataGrid.css:
+        (.network-timeline-decorations > .event-markers > .event-marker):
+        (.network-datagrid tr > td.timeline-column):
+        (.network-timeline-decorations > .event-markers > .event-marker-tooltip):
+        Style the three layers, z-indexes.
+
+        * UserInterface/TimelinesContentView.css:
+        Remove old z-index.
+
+        * UserInterface/NetworkDataGrid.js:
+        (WebInspector.NetworkDataGrid):
+        Rename the constants to use the standard "StyleClassName" suffix and
+        give the DataGrid a class name.
+
+        * UserInterface/TimelineDecorations.css:
+        (.timeline-decorations > .event-markers > .event-marker-tooltip):
+        (.timeline-decorations > .event-markers > .event-marker):
+        (.timeline-decorations > .event-markers > .event-marker.load-event):
+        (.timeline-decorations > .event-markers > .event-marker.dom-content-event):
+        (.timeline-decorations > .event-markers > .event-marker.timestamp):
+        Drop the "wrapper" element. The event-marker now displays the same as the tooltip div.
+
+        * UserInterface/TimelineDecorations.js:
+        (WebInspector.TimelineDecorations.prototype.updateEventMarkers):
+        Rename "wrapper" -> "tooltip" and position the tooltip and marker the same.
+
+2012-03-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Remember if the Network DataGrid column group was collapsed or expanded.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGrid.prototype._clickInColumnCollapser):
+        (WebInspector.DataGrid.prototype.collapseColumnGroup):
+        (WebInspector.DataGrid.prototype._collapseColumnGroupWithCell):
+        Add collapseColumnGroup(name) API to DataGrid and share the
+        code with the old path, when the user clicks the button.
+
+        * UserInterface/NetworkDataGrid.js:
+        (WebInspector.NetworkDataGrid):
+        (WebInspector.NetworkDataGrid.prototype.didToggleColumnGroup):
+        On creation load the setting, and save the setting on toggle.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView):
+        Give all columns a starting width (based on the auto-calculated widths).
+
+2012-03-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/11014578> DOM Storage DataGrids should be sortable
+
+        Allow sorting of both of the DOM Storage DataGrid columns.
+        Before sorting nodes, make sure to delete the creation node
+        and re-add it in the end.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMStorageContentView.js:
+        (WebInspector.DOMStorageContentView.prototype._updateDataGridForDOMStorageEntries):
+        (WebInspector.DOMStorageContentView.prototype._sortDataGrid):
+        (WebInspector.DOMStorageContentView.prototype._insertNodesIntoDataGridWithSort.comparator):
+        (WebInspector.DOMStorageContentView.prototype._insertNodesIntoDataGridWithSort):
+        Share sort code with table creation and sort changed.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGrid.prototype.removeChild):
+        When the creation node is removed, delete the reference to it.
+
+2012-03-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Rename DataGrid methods and events.
+
+            DataGrid.prototype.updateWidths -> updateLayout
+            "sorting changed" event -> WebInspector.DataGrid.Event.SortChanged
+            "width changed" event -> WebInspector.DataGrid.Event.DidLayout
+
+        This then also renames the NetworkDataGrid event handlers
+        and moves the sorting dispatch function into its only caller.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ApplicationCacheFrameContentView.js:
+        (WebInspector.ApplicationCacheFrameContentView.prototype.updateLayout):
+        (WebInspector.ApplicationCacheFrameContentView.prototype._createDataGrid):
+        * UserInterface/CSSSelectorProfileView.js:
+        (WebInspector.CSSSelectorProfileView):
+        (WebInspector.CSSSelectorProfileView.prototype.updateLayout):
+        * UserInterface/CookieStorageContentView.js:
+        (WebInspector.CookieStorageContentView.prototype.updateLayout):
+        (WebInspector.CookieStorageContentView.prototype._rebuildTable):
+        * UserInterface/DOMStorageContentView.js:
+        (WebInspector.DOMStorageContentView.prototype.updateLayout):
+        (WebInspector.DOMStorageContentView.prototype._showDOMStorageEntries):
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGrid.prototype.autoSizeColumns):
+        (WebInspector.DataGrid.prototype.updateLayout):
+        (WebInspector.DataGrid.prototype.applyColumnWidthsMap):
+        (WebInspector.DataGrid.prototype._clickInHeaderCell):
+        (WebInspector.DataGrid.prototype._resizerDragging):
+        (WebInspector.DataGrid.prototype._endResizerDragging):
+        * UserInterface/DatabaseTableContentView.js:
+        (WebInspector.DatabaseTableContentView.prototype.updateLayout):
+        (WebInspector.DatabaseTableContentView.prototype._queryFinished):
+        * UserInterface/JavaScriptProfileView.js:
+        (WebInspector.JavaScriptProfileView.prototype.updateLayout):
+        * UserInterface/NetworkDataGrid.js:
+        (WebInspector.NetworkDataGrid):
+        (WebInspector.NetworkDataGrid.prototype._dataGridSortChanged):
+        (WebInspector.NetworkDataGrid.prototype._dataGridDidLayout):
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView):
+        (WebInspector.TimelinesContentView.prototype.constructor.WebInspector.TimelinesContentView.showTimelineForRecordType):
+        (WebInspector.TimelinesContentView.prototype.updateLayout):
+
+2012-03-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Relayout the selected node when widths change. This is only needed for
+        the selected node because currently it is the only node that can be
+        displaying labels when the data grid's columns widths change.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGridNode.prototype.updateLayout):
+        * UserInterface/NetworkDataGrid.js:
+        (WebInspector.NetworkDataGrid):
+        (WebInspector.NetworkDataGrid.prototype._updateLayout):
+        * UserInterface/ResourceTimelineDataGridNode.js:
+        (WebInspector.ResourceTimelineDataGridNode.prototype.updateLayout):
+
+2012-03-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Draw the event markers over the Network datagrid.
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        Tooltip strings for the event-marker lines.
+
+        * UserInterface/NetworkDataGrid.js:
+        (WebInspector.NetworkDataGrid.prototype.updateCalculatorBoundariesWithEventMarker):
+        (WebInspector.NetworkDataGrid.prototype._updateDecorations):
+        (WebInspector.NetworkDataGrid.prototype._updateEventMarkers):
+        Let the calculator handle updating the bounds and the decorator drawing the markers.
+
+        * UserInterface/NetworkGraphCalculator.js:
+        (WebInspector.NetworkTimeCalculator.prototype.updateBoundariesForEventMarker):
+        When updating boundaries for event markers its possible that event markers will
+        arrive later then resources (onload or console.timeStamp() for example). If such
+        an event is more than 10% past the current bounds we don't stretch the bounds
+        because it would distort the graph too much. Likewise, if a timestamp will become
+        the new maximum extend an extra 3% to provide some white-space past the marker.
+
+        * UserInterface/TimelineDecorations.css:
+        (.timeline-decorations > .event-markers):
+        (.timeline-decorations > .event-markers > .event-marker-wrapper):
+        This wrapper provides a larger surface area for the tooltip. 9px total (4px + 1px + 4px).
+
+        (.timeline-decorations > .event-markers > .event-marker-wrapper > .event-marker):
+        (.timeline-decorations > .event-markers > .event-marker-wrapper > .event-marker.load-event):
+        (.timeline-decorations > .event-markers > .event-marker-wrapper > .event-marker.dom-content-event):
+        (.timeline-decorations > .event-markers > .event-marker-wrapper > .event-marker.timestamp):
+        Different colors for the different types of event-markers.
+
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .data-grid tr.selected td.timeline-column):
+        Make sure the selected timeline datagrid row draws over the event-marker.
+
+        * UserInterface/TimelineDecorations.js:
+        (WebInspector.TimelineDecorations):
+        (WebInspector.TimelineDecorations.prototype.updateEventMarkers.toolTipForEventMarker):
+        (WebInspector.TimelineDecorations.prototype.updateEventMarkers):
+        Position and style the event markers within the bounds.
+
+2012-03-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Add TimelineEventMarkers to the Network's TimelineDecorations. They are
+        not displayed yet, and the TimelineOverview won't show markers yet.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView):
+        (WebInspector.TimelinesContentView.prototype._recordedEventMarker):
+        Pass incoming event markers to the current datagrid. Only the network data grid uses them.
+
+        (WebInspector.TimelinesContentView.prototype._updatePendingRecords):
+        (WebInspector.TimelinesContentView.prototype._updateCalculatorBoundsForPendingRecordsAndEventMarkers):
+        When updating the bounds of the timeline graph also provide pending event markers
+        so that late events (like onload) can stretch the maximum bounds if necessary.
+
+        * UserInterface/TimelineDataGrid.js:
+        (WebInspector.TimelineDataGrid.prototype.updateCalculatorBoundariesWithEventMarker):
+        (WebInspector.TimelineDataGrid.prototype.addTimelineEventMarker):
+        Default empty implementations for DataGrids to handle event markers.
+
+        * UserInterface/NetworkDataGrid.js:
+        (WebInspector.NetworkDataGrid.prototype.reset):
+        (WebInspector.NetworkDataGrid.prototype.addTimelineEventMarker):
+        Pass event markers on to the decorations manager. We also need a way to reset now.
+
+        * UserInterface/TimelineDecorations.js:
+        (WebInspector.TimelineDecorations):
+        (WebInspector.TimelineDecorations.prototype.addTimelineEventMarker):
+        Keep track of event makers we may need to display.
+
+        * UserInterface/TimelineOverview.js:
+        (WebInspector.TimelineOverview.prototype.clear):
+        Add clear, just in case it is needed later. The overview currently doesn't handle event markers.
+
+2012-03-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Add a TimelineEventMarker class for marked timestamps. Current
+        event markers that we are interested in are the DOMContent event,
+        Load event, and console.timeStamp() calls.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.html:
+        * UserInterface/PageObserver.js:
+        (WebInspector.PageObserver.domContentEventFired):
+        (WebInspector.PageObserver.prototype.loadEventFired):
+        Point out that these are not needed, they are covered by TimelineAgent
+        in the Safari frontend.
+
+        * UserInterface/TimelineEventMarker.js: Added.
+        (WebInspector.TimelineEventMarker):
+        (WebInspector.TimelineEventMarker.prototype.constructor.WebInspector.TimelineEventMarker.get timestamp):
+        (WebInspector.TimelineEventMarker.prototype.get type):
+        Simple class encapsulating a timestamp and type.
+
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager):
+        (WebInspector.TimelineManager.prototype.get timelineEventMarkers):
+        (WebInspector.TimelineManager.prototype.startRecording):
+        (WebInspector.TimelineManager.prototype.eventRecorded.processRecord):
+        (WebInspector.TimelineManager.prototype.eventRecorded):
+        Keep a record of event markers.
+
+2012-03-08  Joseph Pecoraro  <pecoraro@apple.com>
+
+        When hiding the dock button also hide the divider between the dock
+        button and the sidebar's other navigation items. 
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ButtonNavigationItem.js:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        (WebInspector._updateDockToggleButtonVisibility):
+        * UserInterface/NavigationItem.js:
+        (WebInspector.NavigationItem.prototype.get hidden):
+        (WebInspector.NavigationItem.prototype.set hidden):
+
+2012-03-08  Timothy Hatcher  <timothy@apple.com>
+
+        Reloading the page sometimes removes the main resource from breakpoints.
+
+        The _checkForOldResources function is delayed on the timeout. This caused the
+        breakpoints to be appended to a ResourceTreeElement that will soon be removed.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/BreakpointSidebarPanel.js:
+        (WebInspector.BreakpointSidebarPanel.prototype._addBreakpoint): Create a new ResourceTreeElement
+        if the resource is different from the previous ResourceTreeElement.
+        * UserInterface/IssueSidebarPanel.js:
+        (WebInspector.IssueSidebarPanel.prototype._issueWasAdded): Ditto.
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel.prototype._treeElementForResource): Ditto.
+
+2012-03-08  Timothy Hatcher  <timothy@apple.com>
+
+        Communicate breakpoints to the backend and update the resolved state of the breakpoints.
+
+        Part of: <rdar://problem/10318770&10318777>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Breakpoint.js:
+        (WebInspector.Breakpoint): Initialize _id to null.
+        (WebInspector.Breakpoint.prototype.get id): Added.
+        (WebInspector.Breakpoint.prototype.set id): Added.
+        (WebInspector.Breakpoint.prototype.set lineNumber): Report oldLineNumber in the event.
+        (WebInspector.Breakpoint.prototype.get info): Updated comment.
+        * UserInterface/BreakpointSidebarPanel.js:
+        (WebInspector.BreakpointSidebarPanel.prototype._addBreakpoint): Mark disabled breakpoints as resolved
+        when they are added to the user interface.
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager):
+        (WebInspector.DebuggerManager.prototype.addBreakpoint): Call _setBreakpoint.
+        (WebInspector.DebuggerManager.prototype.removeBreakpoint): Call _removeBreakpoint.
+        (WebInspector.DebuggerManager.prototype.breakpointResolved): Added.
+        (WebInspector.DebuggerManager.prototype.reset): Added.
+        (WebInspector.DebuggerManager.prototype._setBreakpoint): Added. Talk to the DebuggerAgent.
+        (WebInspector.DebuggerManager.prototype._setBreakpoint.didSetBreakpoint):
+        (WebInspector.DebuggerManager.prototype._removeBreakpoint): Added. Talk to the DebuggerAgent.
+        (WebInspector.DebuggerManager.prototype._removeBreakpoint.didRemoveBreakpoint):
+        (WebInspector.DebuggerManager.prototype._breakpointLineNumberDidChange): Added. Call _removeBreakpoint.
+        (WebInspector.DebuggerManager.prototype._breakpointLineNumberDidChange.breakpointRemoved): Call _setBreakpoint.
+        (WebInspector.DebuggerManager.prototype._breakpointDisabledStateDidChange): Call _removeBreakpoint or _setBreakpoint.
+        * UserInterface/DebuggerObserver.js:
+        (WebInspector.DebuggerObserver.prototype.globalObjectCleared): Call DebuggerManager.reset.
+        (WebInspector.DebuggerObserver.prototype.breakpointResolved): Call DebuggerManager.breakpointResolved.
+
+2012-03-08  Timothy Hatcher  <timothy@apple.com>
+
+        Use "resolved" to describe breakpoints instead of "inactive".
+
+        The term inactive was confusing since we also have disabled. Using resolved better
+        describes the property.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Breakpoint.js:
+        (WebInspector.Breakpoint):
+        (WebInspector.Breakpoint.prototype.set lineNumber):
+        (WebInspector.Breakpoint.prototype.get resolved): Renamed from inactive.
+        (WebInspector.Breakpoint.prototype.set resolved): Renamed from inactive.
+        (WebInspector.Breakpoint.prototype.get info):
+        * UserInterface/BreakpointTreeElement.css:
+        (.item.breakpoint .status > .status-image):
+        (.item.breakpoint .status > .status-image.resolved):
+        * UserInterface/BreakpointTreeElement.js:
+        (WebInspector.BreakpointTreeElement):
+        (WebInspector.BreakpointTreeElement.prototype._updateStatus):
+        * UserInterface/TextEditor.css:
+        (.text-editor > .gutter > .line-number > .breakpoint):
+        (.text-editor > .gutter > .line-number.breakpoint-resolved > .breakpoint):
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype._addBreakpointElementToLineElementWithInfo):
+        (WebInspector.TextEditor.prototype._removePossibleBreakpointElementFromLineElement):
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView):
+        (WebInspector.TextResourceContentView.prototype.closed):
+        (WebInspector.TextResourceContentView.prototype._updateBreakpointStatus):
+        (WebInspector.TextResourceContentView.prototype.textEditorBreakpointInfo):
+        (WebInspector.TextResourceContentView.prototype.textEditorBreakpointAdded):
+        (WebInspector.TextResourceContentView.prototype.textEditorLineContentUpdated):
+        (WebInspector.TextResourceContentView.prototype._textEditorBreakpointInfoForBreakpoint):
+
+2012-03-08  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an assertion and exception that is seen sometimes when opening the Web Inspector.
+
+        The _rebuildSections function is wired up to events. Those events can fire when we don't have
+        a selected DOM node. So we need to return early in that case and not assert.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections): Return early if domNode is null.
+
+2012-03-08  Timothy Hatcher  <timothy@apple.com>
+
+        Fix a merge issue that caused breakpoint lines to not have an icon.
+
+        Part of: <rdar://problem/10318777>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/BreakpointTreeElement.js: Remove the duplicate GenericLineIconStyleClassName that
+        had a typo in the value.
+
+2012-03-08  Brian Weinstein  <bweinstein@apple.com>
+
+        <rdar://problem/11007383> Need a way to clear the current console log.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView): Call this._registerShortcuts.
+        (WebInspector.LogContentView.prototype.consoleCleared): Renamed from _consoleCleared.
+        (WebInspector.LogContentView.prototype._registerShortcuts): Remove the shortcut to dump memory, and remove
+            the code to set up shortcuts screen.
+        (WebInspector.LogContentView.prototype._requestClearMessages): Call to the LogManager.
+        (WebInspector.LogContentView.prototype._promptKeyDown): Actually look up the shortcut in the shortcuts
+            list.
+        * UserInterface/LogManager.js:
+        (WebInspector.LogManager.prototype.requestClearMessages): Call clearMessages on the ConsoleAgent, and fire
+            an event saying the active log was cleared.
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel): Listen for the active log being cleared.
+        (WebInspector.LogSidebarPanel.prototype._activeLogCleared): Call consoleCleared on the active log content view.
+
+2012-03-08  Brian Weinstein  <bweinstein@apple.com>
+
+        <rdar://problem/11012162> Log repeat counts are not updated when the console is open.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ConsoleObserver.js:
+        (WebInspector.ConsoleObserver.prototype.messageRepeatCountUpdated): Call through to the LogManager.
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype._appendCommand): Call LogManager.repeatCountWasInterrupted.
+        * UserInterface/LogManager.js:
+        (WebInspector.LogManager.prototype.constructor.WebInspector.LogManager.initialize): Initialize whether or
+            not the repeat count was interrupted (by the user entering a command in the log content view).
+        (WebInspector.LogManager.prototype.messageWasAdded): Create a ConsoleMessage and call _addMessage.
+        (WebInspector.LogManager.prototype.messageRepeatCountUpdated): If the repeat count wasn't interrupted,
+            update the count. If it was, then clone our message element, and create a new one, and set its repeat
+            and ignored count.
+        (WebInspector.LogManager.prototype.repeatCountWasInterrupted): Set the flag indicating our repeat count
+            was interrupted.
+        (WebInspector.LogManager.prototype._addMessage): Add the message to our list of messages, set it as our
+            previous message, and fire our event.
+
+2012-03-08  Timothy Hatcher  <timothy@apple.com>
+
+        Update the disabled and inactive state of breakpoints in the TextEditor gutter as they change.
+
+        Part of: <rdar://problem/10318777>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.setBreakpointInfoForLine): Added.
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView): Added event listeners for DisabledStateDidChange and InactiveStateDidChange.
+        (WebInspector.TextResourceContentView.prototype.closed): Removed the added event listeners.
+        (WebInspector.TextResourceContentView.prototype._updateBreakpointStatus): Added. Calls setBreakpointInfoForLine.
+
+2012-03-08  Timothy Hatcher  <timothy@apple.com>
+
+        Show the status of each breakpoint in the Breakpoint sidebar. Also update the title when the line number changes.
+
+        Clicking the breakpoint image will toggle the disabled state.
+
+        Part of: <rdar://problem/10318777>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Breakpoint.js:
+        * UserInterface/BreakpointTreeElement.css: Added.
+        (.item.breakpoint .status > .status-image):
+        (.item.breakpoint .status > .status-image.inactive):
+        (.item.breakpoint .status > .status-image.disabled):
+        * UserInterface/BreakpointTreeElement.js:
+        (WebInspector.BreakpointTreeElement):
+        (WebInspector.BreakpointTreeElement.prototype._updateMainTitle): Added.
+        (WebInspector.BreakpointTreeElement.prototype._updateStatus): Added.
+        (WebInspector.BreakpointTreeElement.prototype._statusImageElementMouseDown): Added
+        (WebInspector.BreakpointTreeElement.prototype._statusImageElementClicked): Added
+        * UserInterface/Images/BreakpointButton.pdf: Added.
+        * UserInterface/Images/BreakpointInactiveButton.pdf: Added.
+        * UserInterface/Main.html: Included BreakpointTreeElement.css.
+
+2012-03-07  Timothy Hatcher  <timothy@apple.com>
+
+        Fix the AttributedString prototype chain.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/AttributedString.js: Set the AttributedString prototype instead of the SourceTokenizer prototype.
+
+2012-03-07  Timothy Hatcher  <timothy@apple.com>
+
+        Make selecting a breakpoint in the sidebar show the resource and reveal the line.
+
+        Part of: <rdar://problem/10318777>
+
+        Reviewed by Brian Weinstein and Joseph Pecoraro.
+
+        * UserInterface/BreakpointSidebarPanel.js:
+        (WebInspector.BreakpointSidebarPanel): Set onselect to _treeElementSelected.
+        (WebInspector.BreakpointSidebarPanel.prototype._treeElementSelected): Added.
+
+2012-03-07  Timothy Hatcher  <timothy@apple.com>
+
+        Populate the Breakpoint sidebar with breakpoints.
+
+        Part of: <rdar://problem/10318777>
+
+        Reviewed by Brian Weinstein.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/BreakpointIcons.css: Added.
+        (.breakpoint-generic-line-icon .icon):
+        * UserInterface/BreakpointSidebarPanel.js:
+        (WebInspector.BreakpointSidebarPanel):
+        (WebInspector.BreakpointSidebarPanel.prototype._addBreakpoint): Added. Helper.
+        (WebInspector.BreakpointSidebarPanel.prototype._addBreakpointsForResource): Added. Helper.
+        (WebInspector.BreakpointSidebarPanel.prototype._resourceAdded): Added. Call _addBreakpointsForResource.
+        (WebInspector.BreakpointSidebarPanel.prototype._mainResourceChanged): Added. Call _addBreakpointsForResource.
+        (WebInspector.BreakpointSidebarPanel.prototype._breakpointAdded): Added. Call _addBreakpoint.
+        (WebInspector.BreakpointSidebarPanel.prototype._breakpointRemoved): Added. Remove the breakpoint, and resource
+        if that was the last breakpoint.
+        (WebInspector.BreakpointSidebarPanel.prototype._checkForOldResources):
+        (WebInspector.BreakpointSidebarPanel.prototype._checkForOldResources.delayedWork): Check for detached resources
+        and remove them from the tree.
+        * UserInterface/BreakpointTreeElement.js: Added.
+        (WebInspector.BreakpointTreeElement):
+        (WebInspector.BreakpointTreeElement.prototype.get breakpoint):
+        * UserInterface/Main.html: Included BreakpointTreeElement.js and BreakpointIcons.css.
+
+2012-03-07  Timothy Hatcher  <timothy@apple.com>
+
+        Rename ResourceSearchMatch.pdf to ResultLine.pdf to be more generic so it can be used by the Breakpoint sidebar.
+
+        Part of: <rdar://problem/10318777>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Images/ResultLine.pdf: Renamed from WebInspector/UserInterface/Images/ResourceSearchMatch.pdf.
+        * UserInterface/SearchIcons.css:
+        (.resource-match-icon .icon): Use ResultLine.pdf.
+
+2012-03-07  Timothy Hatcher  <timothy@apple.com>
+
+        Persist breakpoints between sessions.
+
+        Part of: <rdar://problem/10318770&10318777>
+
+        Reviewed by Brian Weinstein and Joseph Pecoraro.
+
+        * UserInterface/Breakpoint.js:
+        (WebInspector.Breakpoint): Support taking an info object or url. Make inactive default to true.
+        The backend will later mark them as active once they are resolved.
+        (WebInspector.Breakpoint.prototype.get info): Added. Returns an object to store.
+        * UserInterface/DebuggerManager.js:
+        (WebInspector.DebuggerManager): Iterate over the info objects in the setting and make breakpoints.
+        (WebInspector.DebuggerManager.prototype.addBreakpoint): Return early if null.
+        (WebInspector.DebuggerManager.prototype.removeBreakpoint): Ditto.
+        (WebInspector.DebuggerManager.prototype._inspectorClosing): Added. Call _saveBreakpoints.
+        (WebInspector.DebuggerManager.prototype._saveBreakpoints): Added. Make an array of info objects
+        and save them in the setting.
+
+2012-03-07  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Bring the padding down to 1px for both sides of the timeline graph.
+        This makes the percent widths a little more accurate and matches
+        the padding on the timeline overview.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .data-grid td.timeline-column):
+
+2012-03-07  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Dynamically determine the width of the localized string
+        with similar table heading styles.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/NetworkDataGrid.js:
+        (WebInspector.NetworkDataGrid.prototype._localizedTimelineHeaderWidth):
+
+2012-03-07  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Improve the header display to only show dividers within the visible range.
+        Now, when we show dividers in that range, the first divider always has a left
+        border, and the last divider only does when that column is not the active sort.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/NetworkDataGrid.css:
+        (.network-timeline-decorations > .header > .divider:last-child):
+        (.network-timeline-decorations:not(.sort-active) > .header > .divider:last-child):
+        * UserInterface/NetworkDataGrid.js:
+        (WebInspector.NetworkDataGrid.prototype._updateHeaderTimes):
+        * UserInterface/TimelineDecorations.js:
+        (WebInspector.TimelineDecorations.prototype.updateHeaderTimes):
+
+2012-03-07  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Changing the sort column might not be enough of a size difference to
+        cause the headers to refresh. Force a refresh in this case.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/NetworkDataGrid.js:
+        (WebInspector.NetworkDataGrid.prototype._sortChanged):
+        (WebInspector.NetworkDataGrid.prototype._updateDecorations):
+        (WebInspector.NetworkDataGrid.prototype._updateHeaderTimes):
+        * UserInterface/TimelineDecorations.js:
+        (WebInspector.TimelineDecorations.prototype.updateHeaderTimes):
+
+2012-03-07  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        The NetworkDataGrid's timeline graph should only show header
+        values when its "details" columns are collapsed. Give
+        TimelineDecorations a way to hide header times.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/NetworkDataGrid.js:
+        (WebInspector.NetworkDataGrid):
+        (WebInspector.NetworkDataGrid.prototype.didToggleColumnGroup):
+        Hide / show the header dividers when columns are collapsed / expanded.
+
+        * UserInterface/TimelineDecorations.js:
+        (WebInspector.TimelineDecorations.prototype.updateHeaderTimes):
+        (WebInspector.TimelineDecorations.prototype.isShowingHeaderDividers):
+        (WebInspector.TimelineDecorations.prototype.showHeaderDividers):
+        (WebInspector.TimelineDecorations.prototype.hideHeaderDividers):
+        Hide / show the header dividers by applying the "hidden" class to the headerElement.
+
+2012-03-07  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Give the NetworkDataGrid timeline TimelineDecorations. We want to
+        make sure that the header labels don't overlap the column header
+        "Timeline" on the left or sort / collapse columns button on the right.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGrid.prototype._clickInHeaderCell):
+        (WebInspector.DataGrid.prototype._sortChanged):
+        (WebInspector.DataGrid.prototype.isColumnSortColumn):
+        Expose a way for a subclass to act on sort changes and check
+        if a column is the active sort column.
+
+        * UserInterface/Main.html:
+        * UserInterface/NetworkDataGrid.css: Added.
+        (.network-timeline-decorations):
+        (.network-timeline-decorations > .header):
+        Give the network timeline decorations some specific styles because
+        JavaScript will have to position the decorations.
+
+        * UserInterface/NetworkDataGrid.js:
+        (WebInspector.NetworkDataGrid):
+        (WebInspector.NetworkDataGrid.prototype.reset):
+        (WebInspector.NetworkDataGrid.prototype.update):
+        (WebInspector.NetworkDataGrid.prototype.updateWidths):
+        (WebInspector.NetworkDataGrid.prototype._sortChanged):
+        Update the timeline decorations whenever widths change or content changes.
+
+        (WebInspector.NetworkDataGrid.prototype._localizedTimelineHeaderWidth):
+        (WebInspector.NetworkDataGrid.prototype._updateDecorations):
+        (WebInspector.NetworkDataGrid.prototype._updateDecorationsPosition):
+        (WebInspector.NetworkDataGrid.prototype._updateHeaderTimes):
+        Position the header decorations over the timeline columns, and update the
+        header times using our current calculator's bounds.
+
+        * UserInterface/TimelineDecorations.css:
+        (.timeline-decorations):
+        Allow clicking through all decorations, they are simply overlays.
+
+        * UserInterface/TimelineDecorations.js:
+        (WebInspector.TimelineDecorations.prototype.updateHeaderTimes):
+        Adjust for a left / right padding in which we won't let labels overflow into.
+        This can be improved further by packing the labels just into the visible area.
+
+2012-03-07  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Make the timeline data grids share a common base class so we don't need
+        to check for functions before calling them. Only the NetworkDataGrid
+        has a graph right now and needs extra calls, other others are empty.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView):
+        (WebInspector.TimelinesContentView.prototype._recordingStarted):
+        (WebInspector.TimelinesContentView.prototype._updatePendingRecords):
+        (WebInspector.TimelinesContentView.prototype._updateCalculatorBoundsForPendingRecords):
+        No need to check if the DataGrid implements a function now.
+        Also call update on the datagrid after we update records.
+
+        * UserInterface/TimelineDataGrid.js: Added.
+        (WebInspector.TimelineDataGrid):
+        (WebInspector.TimelineDataGrid.prototype.constructor.WebInspector.TimelinesDataGrid.get currentCalculator):
+        (WebInspector.TimelineDataGrid.prototype.updateCalculatorBoundariesWithRecord):
+        (WebInspector.TimelineDataGrid.prototype.updateCalculatorBoundariesWithDataGridNode):
+        (WebInspector.TimelineDataGrid.prototype.reset):
+        (WebInspector.TimelineDataGrid.prototype.update):
+        Shared base class interface.
+
+        * UserInterface/NetworkDataGrid.js:
+        (WebInspector.NetworkDataGrid):
+        Extend from TimelineDataGrid instead of DataGrid directly.
+
+2012-03-07  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Refactor the display of timeline headers into a separate file.
+        This currently handles drawing the header dividers, but will
+        also manage event markers (DOMContent and onload events).
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.html:
+        * UserInterface/TimelineOverview.css:
+        * UserInterface/TimelineDecorations.css: Added.
+        (.timeline-decorations):
+        (.timeline-decorations > .header):
+        (.timeline-decorations > .header > .divider):
+        (.timeline-decorations > .header > .divider:last-child):
+        (.timeline-decorations > .header > .divider > .label):
+        (.timeline-decorations > .header > .divider:first-child > .label):
+        Move timeline-overview header styles to timeline-decorations header styles.
+
+        * UserInterface/TimelineDecorations.js: Added.
+        (WebInspector.TimelineDecorations):
+        (WebInspector.TimelineDecorations.prototype.constructor.WebInspector.TimelineDecorations.get element):
+        (WebInspector.TimelineDecorations.prototype.get headerElement):
+        (WebInspector.TimelineDecorations.prototype.updateHeaderTimes):
+        Manage the header and dividers.
+
+        * UserInterface/TimelineOverview.js:
+        (WebInspector.TimelineOverview):
+        (WebInspector.TimelineOverview.prototype.clear):
+        (WebInspector.TimelineOverview.prototype.update):
+        (WebInspector.TimelineOverview.prototype.updateLayout):
+        User the decorations class to draw headers over the timeline.
+
+2012-03-07  Timothy Hatcher  <timothy@apple.com>
+
+        Install the Web Inspector user interface files in Production builds again.
+
+        <rdar://problem/10957655>
+
+        Reviewed by Joseph Pecoraro.
+
+        * Scripts/copy-user-interface-resources.sh: Removed early exit and FIXME comment.
+
+2012-03-07  Timothy Hatcher  <timothy@apple.com>
+
+        Implement the TextEditor breakpoint delegates in WebInspector.TextResourceContentView.
+
+        Part of: <rdar://problem/10318770&10318777>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.prototype.contentAvailable): Populate the breakpoint
+        map by asking the DebuggerManager for all the breakpoints for this URL.
+        (WebInspector.TextResourceContentView.prototype.textEditorBreakpointInfo): Added.
+        (WebInspector.TextResourceContentView.prototype.textEditorBreakpointAdded): Added.
+        (WebInspector.TextResourceContentView.prototype.textEditorBreakpointRemoved): Added.
+        (WebInspector.TextResourceContentView.prototype.textEditorBreakpointMoved): Added.
+        (WebInspector.TextResourceContentView.prototype.textEditorBreakpointToggled): Added.
+
+2012-03-07  Timothy Hatcher  <timothy@apple.com>
+
+        Add the start of WebInspector.DebuggerManager.
+
+        Part of: <rdar://problem/10318770&10318777>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DebuggerManager.js: Added.
+        (WebInspector.DebuggerManager):
+        (WebInspector.DebuggerManager.prototype.get breakpoints):
+        (WebInspector.DebuggerManager.prototype.breakpointsForURL):
+        (WebInspector.DebuggerManager.prototype.addBreakpoint):
+        (WebInspector.DebuggerManager.prototype.removeBreakpoint):
+        * UserInterface/Main.html: Incldued DebuggerManager.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create an instance of WebInspector.DebuggerManager.
+
+2012-03-07  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.Breakpoint.
+
+        Part of: <rdar://problem/10318770&10318777>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Breakpoint.js: Added.
+        (WebInspector.Breakpoint):
+        (WebInspector.Breakpoint.prototype.get url):
+        (WebInspector.Breakpoint.prototype.get lineNumber):
+        (WebInspector.Breakpoint.prototype.set lineNumber):
+        (WebInspector.Breakpoint.prototype.get inactive):
+        (WebInspector.Breakpoint.prototype.set inactive):
+        (WebInspector.Breakpoint.prototype.get disabled):
+        (WebInspector.Breakpoint.prototype.set disabled):
+        * UserInterface/Main.html: Included Breakpoint.js.
+
+2012-03-06  Timothy Hatcher  <timothy@apple.com>
+
+        Support dragging breakpoints to move them to a new line or to delete them.
+
+        Part of: <rdar://problem/10318770&10318777>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor):
+        (WebInspector.TextEditor.prototype._gutterElementMouseDown): Add a new breakpoint
+        if the target does not already have one. Otherwise start tracking the existing
+        breakpoint for dragging.
+        (WebInspector.TextEditor.prototype._documentMouseMoved): Added.
+        (WebInspector.TextEditor.prototype._documentMouseUp): Added.
+        (WebInspector.TextEditor.prototype._gutterElementMouseUp): Only toggle on mouse up.
+
+2012-03-06  Timothy Hatcher  <timothy@apple.com>
+
+        Make clicking on the line gutter create and toggle breakpoints.
+
+        Part of: <rdar://problem/10318770&10318777>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor): Added mouseup event listener.
+        (WebInspector.TextEditor.prototype._gutterElementMouseUp): Added. Notifies the delegate to add
+        or toggle a breakpoint when a line number if clicked.
+
+2012-03-06  Timothy Hatcher  <timothy@apple.com>
+
+        Add initial support for displaying breakpoints.
+
+        Part of: <rdar://problem/10318770&10318777>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Images/Breakpoint.png: Added.
+        * UserInterface/Images/Breakpoint@2x.png: Added.
+        * UserInterface/Images/BreakpointInactive.png: Added.
+        * UserInterface/Images/BreakpointInactive@2x.png: Added.
+        * UserInterface/TextEditor.css:
+        (.text-editor > .gutter):
+        (.text-editor > .gutter > .line-number.has-breakpoint):
+        (.text-editor > .gutter > .line-number.has-breakpoint > .text):
+        (.text-editor > .gutter > .line-number.has-breakpoint.breakpoint-disabled > .text):
+        (.text-editor > .gutter > .line-number > .breakpoint):
+        (.text-editor > .gutter > .line-number.breakpoint-inactive > .breakpoint):
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype._updateLineNumbers): Call _addBreakpointElementToLineElementWithInfo
+        and _removePossibleBreakpointElementFromLineElement depending on the delegate result.
+        (WebInspector.TextEditor.prototype._addBreakpointElementToLineElementWithInfo): Added.
+        (WebInspector.TextEditor.prototype._removePossibleBreakpointElementFromLineElement): Added.
+
+2012-03-06  Mark Rowe  <mrowe@apple.com>
+
+        <rdar://problem/10873285> Make WebInspector.framework work with staged frameworks
+
+        Install WebInspector.framework in /System/Library/StagedFrameworks/Safari when USE_STAGING_INSTALL_PATH is set to YES.
+
+        Reviewed by Dan Bernstein.
+
+        * Configurations/WebInspectorFramework.xcconfig:
+
+2012-03-06  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Share duplicated code to get a display name for a node.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMTreeElementPathComponent.js:
+        (WebInspector.DOMTreeElementPathComponent):
+        * UserInterface/DOMUtilities.js:
+        (WebInspector.displayNameForNode):
+        * UserInterface/Main.html:
+
+2012-03-06  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10989550> Inspector should hide docking button when undocked and not allowed to dock (78575)
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem.prototype.get hidden):
+        (WebInspector.ButtonNavigationItem.prototype.set hidden):
+        Allow a button navigation item to be hidden.
+
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.setDockingAvailable):
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        (WebInspector.updateDockedState):
+        (WebInspector.setDockingAvailable):
+        (WebInspector._updateDockToggleButtonVisibility):
+        Update the dock toggle button's visibility when it is created,
+        when the attached state changes, or when availability changes.
+
+2012-03-05  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.BreakpointSidebarPanel and WebInspector.DebugSidebarPanel.
+
+        Start of: <rdar://problem/10318770&10318777>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/BreakpointSidebarPanel.js: Added.
+        (WebInspector.BreakpointSidebarPanel):
+        * UserInterface/DebugSidebarPanel.js: Added.
+        (WebInspector.DebugSidebarPanel):
+        * UserInterface/Main.html: Included BreakpointSidebarPanel.js and DebugSidebarPanel.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Use BreakpointSidebarPanel and DebugSidebarPanel classes.
+
+2012-03-05  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Follow-up and remove unnecessary outline:none from specific
+        data-grids now that this style is the default.
+
+        * UserInterface/ApplicationCacheFrameContentView.css:
+        (.content-view.application-cache-frame > .data-grid):
+        * UserInterface/CookieStorageContentView.css:
+        (.content-view.cookie-storage > .data-grid):
+        * UserInterface/DatabaseTableContentView.css:
+        (.content-view.database-table > .data-grid):
+        * UserInterface/DetailsSection.css:
+
+2012-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        WebSQL Database inline data grids should not have an outline
+        when clicked on. The data grid can keep its tabindex, but
+        just remove the outline when its focused.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DataGrid.css:
+        (.data-grid):
+
+2012-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Format the Cookie size column using standard size representations.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CookieStorageContentView.js:
+        (WebInspector.CookieStorageContentView.prototype._rebuildTable):
+
+2012-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10982421> Event Listeners section flashes when switching between nodes
+
+        We no longer need to resolve the node, since the Safari frontend
+        doesn't show an ObjectProperties tree. We already have all the
+        information we need in the eventListener callback. Removing this
+        async call removes the flashing.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMNodeDetailsSidebarPanel.js:
+        * UserInterface/EventListenerSectionGroup.js:
+        (WebInspector.EventListenerSectionGroup):
+
+2012-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        We should save state the expanded/collapsed state of different event types.
+        Just default to having them collapsed and save the state when they are expanded.
+
+        Rubber-stamped by Timothy Hatcher.
+
+        * UserInterface/DetailsSection.js:
+        (WebInspector.DetailsSection):
+        * UserInterface/EventListenerSection.js:
+        (WebInspector.EventListenerSection):
+
+2012-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Don't linkify EventListeners without a URL.
+
+        This can happen for EventListeners added through the Inspector's console.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/EventListenerSectionGroup.js:
+        (WebInspector.EventListenerSectionGroup.prototype._functionTextOrLink):
+
+2012-03-04  Timothy Hatcher  <timothy@apple.com>
+
+        Hook up the Start Timeline Recording Develop menu items.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.isTimelineProfilingEnabled): Return WebInspector.timelineManager.recording.
+        (InspectorFrontendAPI.setTimelineProfilingEnabled): Show the Instrument panel and timeline, then start recording.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Only load the last content view if InspectorFrontendAPI didn't show one.
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype._mainResourceDidChange): Ignore resource events when there isn't a main frame yet.
+        (WebInspector.TimelineManager.prototype._resourceWasAdded): Ditto.
+
+2012-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10981986> Back button should be enabled when link causes a switch between "DOM Tree" and "Source Code"
+
+        Update the back/forward buttons when the path components change.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser.prototype._contentViewSelectionPathComponentDidChange):
+
+2012-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Rename WebInspector.domAgent -> WebInspector.domTreeManager.
+        This code is currently unreachable.
+
+        Reviewed by Brian Weinstein and Timothy Hatcher.
+
+        * UserInterface/ObjectPropertiesSection.js:
+        (WebInspector.ObjectPropertyTreeElement.prototype._contextMenuEventFired):
+
+2012-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10319546> Implement the Event Listener inspector for the new Web Inspector design
+
+        Make node name's in the EventListener section links that jump to
+        that node. Also, when hovering the node it highlights on the page.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMUtilites.js: Added.
+        (WebInspector.displayNameForNode):
+        (WebInspector.linkifyNodeReference):
+        Copied from OpenSource's DOMPresentationUtils.js, updated for the new
+        frontend, and remove unused code.
+
+        * UserInterface/EventListenerSectionGroup.js:
+        (WebInspector.EventListenerSectionGroup.prototype._nodeTextOrLink):
+        Use the DOMUtilities method to linkify the node.
+
+        * UserInterface/Main.html:
+        * UserInterface/Main.css:
+        (.node-link):
+
+2012-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10319546> Implement the Event Listener inspector for the new Web Inspector design
+
+        Add event listener information to the DOM Node Details Sidebar panel.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMNodeDetailsSidebarPanel.js:
+        (WebInspector.DOMNodeDetailsSidebarPanel):
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype.constructor.WebInspector.DOMNodeDetailsSidebarPanel.refresh):
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshEventListeners.eventListenersCallback):
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshEventListeners):
+        Add a new "Event Listeners" Section and refresh it when the selected node changes.
+        Each row in this section is an EventListenerSection.
+
+        * UserInterface/DetailsSection.css:
+        (.details-section .details-section > .header):
+        Style a nested details section to be gray.
+
+        * UserInterface/DetailsSection.js:
+        (WebInspector.DetailsSection):
+        Take an extra parameter in the Constructor to avoid saving collapsed states.
+        EventListener event type sections will always start out collapsed.
+
+        * UserInterface/EventListenerSection.js: Added.
+        (WebInspector.EventListenerSection):
+        (WebInspector.EventListenerSection.prototype.constructor.WebInspector.EventListenerSection.addListener):
+        EventListenerSection is a specific event type, and contains a group for each listener.
+
+        * UserInterface/EventListenerSectionGroup.js: Added.
+        (WebInspector.EventListenerSectionGroup):
+        (WebInspector.EventListenerSectionGroup.prototype.constructor.WebInspector.EventListenerSectionGroup.update.updateWithNodeObject):
+        (WebInspector.EventListenerSectionGroup.prototype.constructor.WebInspector.EventListenerSectionGroup.update):
+        (WebInspector.EventListenerSectionGroup.prototype._nodeTextOrLink):
+        (WebInspector.EventListenerSectionGroup.prototype._type):
+        (WebInspector.EventListenerSectionGroup.prototype._functionTextOrLink):
+        Each listener displays a few rows of information about it. Go-to arrow
+        links are provided to jump to the function.
+
+        * UserInterface/EventListenerSectionGroup.css: Added.
+        (.event-listener-section > .content > .group > .row.simple > .value .go-to-arrow):
+        (.event-listener-section > .content > .group > .row.simple > .value):
+        Style the simple row in the section to play nicely with resizing and the go-to arrow.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Main.html:
+        Add new strings and files.
+
+2012-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10319546> Implement the Event Listener inspector for the new Web Inspector design
+
+        Rename the DOM Node sidebar's Properties object group and make sure
+        to release it when its no longer needed. There will be a separate
+        object group for Event Listeners.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMNodeDetailsSidebarPanel.js:
+        (WebInspector.DOMNodeDetailsSidebarPanel):
+
+2012-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Add missing Copyright entires to the pre-built License.
+
+        Reviewed by Damian Kaleta.
+
+        * Scripts/copy-user-interface-resources.sh:
+
+2012-03-04  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Fix outline around previously edited DOM element attribute.
+
+        When editing, the tabIndex attribute of the element is set
+        to 0 and restored to the old value after editing. In most cases
+        the previous value was unset, which returns -1. When cleaning
+        up elem.tabIndex = -1 was actually keeping around the tabIndex
+        attribute and giving the element an outline when clicked once
+        and receiving :focus.
+
+        Instead of restoring the tabIndex to -1, just remove the
+        tabIndex attribute and avoid its associated focus behavior.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/EditingSupport.js:
+        (WebInspector.startEditing.cleanUpAfterEditing):
+
+2012-03-04  Brian Weinstein  <bweinstein@apple.com>
+
+        Part of <rdar://problem/10981607> CSS and JavaScript profiles need a way to toggle between absolute times and percentages.
+        
+        The CSS selector profile code had the ability to switch from percentages to time when the
+        user double clicks an element in the "Total" column.
+        
+        However, we were accessing a WebInspector setting the wrong way.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/CSSSelectorProfileView.js:
+        (WebInspector.CSSSelectorProfileView.prototype._mouseDownInDataGrid): Access the WebInspector setting the right way.
+
+2012-03-04  Brian Weinstein  <bweinstein@apple.com>
+
+        Have ConsoleMessageImpl and ProfileDataGridTree use WebInspector.linkifyURLAsNode instead of
+        using their own custom code to do the same thing.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ConsoleMessageImpl.js:
+        (WebInspector.ConsoleMessageImpl.prototype._linkifyLocation): Call WebInspector.linkifyURLAsNode.
+        * UserInterface/ProfileDataGridTree.js:
+        (WebInspector.ProfileDataGridNode.prototype._linkifyLocation): Ditto.
+
+2012-03-04  Brian Weinstein  <bweinstein@apple.com>
+
+        Hook up the links in the CSS selector profile view.
+        
+        Rest of <rdar://problem/10897489> Implement CSS profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/CSSSelectorProfileView.js:
+        (WebInspector.CSSSelectorDataGridNode.prototype.createCell): Pass the line number to WebInspector.linkifyURLAsNode.
+        (WebInspector.CSSSelectorProfileView): Add a click event listener.
+        (WebInspector.CSSSelectorProfileView.prototype._mouseWasClicked): Call WebInspector.openURL on the clicked link.
+        * UserInterface/Main.js:
+        (WebInspector.linkifyURLAsNode): Set the link's lineNumber property to be the passed in line number.
+
+2012-03-04  Brian Weinstein  <bweinstein@apple.com>
+
+        Make the columns in all DataGrids resizable.
+        
+        This fixes:
+        - JavaScript profile views
+        - CSS selector profile views
+        - Application cache views.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ApplicationCacheFrameContentView.js:
+        (WebInspector.ApplicationCacheFrameContentView.prototype.updateLayout):
+        * UserInterface/CSSSelectorProfileView.js:
+        (WebInspector.CSSSelectorProfileView.prototype.updateLayout):
+        * UserInterface/JavaScriptProfileView.js:
+        (WebInspector.JavaScriptProfileView.prototype.updateLayout):
+
+2012-03-04  Brian Weinstein  <bweinstein@apple.com>
+
+        Rename some functions to make them more clear that they are for JavaScript.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ProfileManager.js:
+        (WebInspector.ProfileManager.prototype.addJavaScriptProfile): Renamed from addProfile.
+        (WebInspector.ProfileManager.prototype.setRecordingJavaScriptProfile): Renamed from setRecordingProfile.
+        * UserInterface/ProfilerObserver.js:
+        (WebInspector.ProfilerObserver.prototype.addProfileHeader): Update for naming.
+        (WebInspector.ProfilerObserver.prototype.setRecordingProfile): Ditto.
+
+2012-03-04  Brian Weinstein  <bweinstein@apple.com>
+
+        Implement the recording of CSS selector profiles, and have them show up in the inspector and be
+        selectable.
+        
+        There are a few loose ends to clean up after this patch.
+        
+        - Some renames in ProfileManager.
+        - Make link clicking work in CSS selector profiles.
+
+        More of <rdar://problem/10897489> Implement CSS profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated localized strings
+
+        * UserInterface/CSSSelectorProfileType.js:
+        (WebInspector.CSSSelectorProfileType.prototype.nextProfileId): Returns the available profile ID.
+        (WebInspector.CSSSelectorProfileType.prototype.startRecordingProfile): Don't call anything in the profiles panel.
+        (WebInspector.CSSSelectorProfileType.prototype.stopRecordingProfile): Remove the callback that creates a profile
+            header.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView): Change ProfileObject to JavaScriptProfileObject and add a case for CSSSelectorProfileObject.
+        (WebInspector.ContentView.isViewable): Ditto.
+
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel.prototype._recordProfileGlyphMousedOver): Check the CSS selector case.
+        (WebInspector.InstrumentSidebarPanel.prototype._recordProfileGlyphMousedDown): Ditto.
+        (WebInspector.InstrumentSidebarPanel.prototype._recordProfileGlyphClicked): Ditto.
+        (WebInspector.InstrumentSidebarPanel.prototype._profileTypeWasSelected): Ditto.
+
+        * UserInterface/JavaScriptProfileView.js: Change the assert.
+
+        * UserInterface/Main.html: Add new files.
+
+        * UserInterface/ProfileManager.js:
+        (WebInspector.ProfileManager): Create a CSS selector profile type.
+        (WebInspector.ProfileManager.prototype.constructor.WebInspector.ProfileManager.initialize): Clear the recording CSS
+            selector profile.
+        (WebInspector.ProfileManager.prototype.isProfilingCSSSelectors): Returns whether or not we are recording a CSS selector
+            profile.
+        (WebInspector.ProfileManager.prototype.startProfilingCSSSelectors): Start recording a CSS selector profile, and create
+            a WebInspector.CSSSelectorProfileObject, and send an event to tell the instrument sidebar panel about it.
+        (WebInspector.ProfileManager.prototype.stopProfilingCSSSelectors): Stop recording the CSS selector profile, and in the
+            callback for when the profile finished, update the information about the CSS selector profile and tell the instrument
+            sidebar that the profile was updated.
+        (WebInspector.ProfileManager.prototype.addProfile): Create a JavaScriptProfileObject instead of a ProfileObject.
+        (WebInspector.ProfileManager.prototype.setRecordingProfile): Ditto.
+
+2012-03-04  Brian Weinstein  <bweinstein@apple.com>
+
+        Add subclasses of ProfileObject for CSS Selector profile and JavaScript profiles. They are not used anywhere,
+        but they will be to be able to differentiate between the two types of profiles.
+        
+        It also gives us a way to store the CSS selector profile data on the CSSSelectorProfileObject.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/CSSSelectorProfileObject.js: Added.
+        (WebInspector.CSSSelectorProfileObject):
+        (WebInspector.CSSSelectorProfileObject.prototype.constructor.WebInspector.CSSSelectorProfileObject.get data): Returns
+            the data.
+        (WebInspector.CSSSelectorProfileObject.prototype.set data): Sets the data.
+        (WebInspector.CSSSelectorProfileObject.prototype.get totalTime): Returns the total time.
+        (WebInspector.CSSSelectorProfileObject.prototype.set totalTime): Sets the total time.
+        * UserInterface/JavaScriptProfileObject.js: Added.
+        (WebInspector.JavaScriptProfileObject):
+        * UserInterface/Main.html: Add new files
+
+2012-03-04  Brian Weinstein  <bweinstein@apple.com>
+
+        Fix some issues in CSSSelectorProfileView.js to get it running with the new inspector.
+        
+        This patch changes the superclass from View -> ContentView, removes instances of the percent button,
+        and changes *styleClass -> classList.*.
+
+        More of <rdar://problem/10897489> Implement CSS profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/CSSSelectorProfileView.js:
+        (WebInspector.CSSSelectorDataGridNode.prototype.get data): Switch the format of a setting.
+        (WebInspector.CSSSelectorDataGridNode.prototype.createCell): Use linkifyURLAsNode instead of 
+            linkifyResourceAsNode (which we don't have).
+        (WebInspector.CSSSelectorProfileView): Add an assert, change our superclass type, update the
+            setting syntax, and call updateWidths on the data grid.
+        (WebInspector.CSSSelectorProfileView.prototype.refreshShowAsPercents): Use classList.contains.
+
+2012-03-02  Brian Weinstein  <bweinstein@apple.com>
+
+        Bring in some files from open source.
+        
+        More of <rdar://problem/10897489> Implement CSS profiling in the new Web Inspector.
+
+        Rubber-stamped by Jing Jin.
+
+        * UserInterface/CSSSelectorProfileType.js: Added. Moved from CSSSelectorProfileView.js to its own file.
+        * UserInterface/CSSSelectorProfileView.js: Added. Copied from open source.
+
+2012-03-02  Brian Weinstein  <bweinstein@apple.com>
+
+        Turn the glyph that starts profiles in the inspector into a select with two options.
+        
+        - Start JavaScript Profiling
+        - Start CSS Profiling
+        
+        JavaScript profiling uses the same codepath as before, and CSS profiling isn't hooked up
+        yet, but will be in future patches.
+
+        Start of <rdar://problem/10897489> Implement CSS profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js: Update localized strings.
+
+        * UserInterface/InstrumentSidebarPanel.css:
+        (.sidebar > .panel.instrument > .title-bar > .record-glyph): Add some additional rules so
+            this style works for a select and a div.
+
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel): Change _recordProfileGlyphElement to a select, and add
+            options to it.
+        (WebInspector.InstrumentSidebarPanel.prototype._recordProfileGlyphMousedDown): Clear any selection
+            the select might have had, and prevent opening the select if we are stopping a profile.
+        (WebInspector.InstrumentSidebarPanel.prototype._recordProfileGlyphClicked): Return early if we are
+            ignoring this click.
+        (WebInspector.InstrumentSidebarPanel.prototype._profileTypeWasSelected): Start a JavaScript profile
+            if that was the user's selection, and add a FIXME for starting a CSS profile.
+
+2012-03-04  Timothy Hatcher  <timothy@apple.com>
+
+        Strike out all properties that did not parse correctly.
+
+        The broken case is if you use: background: -webkit-linear-gradient(...);
+        and background: -moz-linear-gradient(...) in the same rule. Before they
+        would both be shown normal (except for the warning icon on the -moz line),
+        now the -moz property is also striked out.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.css: Added not-parsed-ok to the
+        rule that adds text-decoration: line-through to properties.
+
+2012-03-04  Timothy Hatcher  <timothy@apple.com>
+
+        Syntax highlight values in the Style details sidebar.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/StylePropertyTreeElement.js:
+        (WebInspector.StylePropertyTreeElement.prototype.updateTitle.processColor): Call numberProcessor instead
+        of directly making text nodes for unknown colors and color values.
+        (WebInspector.StylePropertyTreeElement.prototype.updateTitle.processKeyword): Added.
+        (WebInspector.StylePropertyTreeElement.prototype.updateTitle.processSimpleSyntax): Added.
+        (WebInspector.StylePropertyTreeElement.prototype.updateTitle): Add new processors for strings, numbers, and keywords.
+
+2012-03-03  Brian Weinstein  <bweinstein@apple.com>
+
+        <rdar://problem/10977869> Profile Link in Log View doesn't jump to Profile in Instruments View.
+        
+        Give WebInspector.openURL the ability to open URLs with the webkit-profile scheme.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel.prototype.showProfile): Look over the tree elements for one with
+            a profile with the matching title and type, and show it.
+        * UserInterface/Main.js:
+        (WebInspector.openURL): If the URL has the webkit-profile scheme, call InstrumentSidebarPanel.showProfile.
+        * UserInterface/ProfileType.js: Add a constant for "webkit-profile".
+
+2012-03-03  Timothy Hatcher  <timothy@apple.com>
+
+        Hide the DOM node highlight when the DOM tree content view is hidden.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView.prototype.hidden): Call WebInspector.domTreeManager.hideDOMNodeHighlight().
+
+2012-03-03  Timothy Hatcher  <timothy@apple.com>
+
+        Reduce flashing in the details sidebar when switching content views.
+
+        This makes sure to fire the represented objects did change event immediately after the content
+        view changes so the sidebar updates at the same time as the content view. This is especially important
+        if the sidebar is auto showing or hiding.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser.prototype._dispatchCurrentRepresentedObjectsDidChangeEventSoon):
+        Use _dispatchCurrentRepresentedObjectsDidChangeEvent instead of a nested function.
+        (WebInspector.ContentBrowser.prototype._dispatchCurrentRepresentedObjectsDidChangeEvent): Added.
+        Clears the timeout if there is one pending.
+        (WebInspector.ContentBrowser.prototype._currentContentViewDidChange): Call _dispatchCurrentRepresentedObjectsDidChangeEvent
+        instead of _dispatchCurrentRepresentedObjectsDidChangeEventSoon.
+
+2012-03-03  Timothy Hatcher  <timothy@apple.com>
+
+        Auto hide the details sidebar when empty if the user closed it when empty.
+
+        The details sidebar will show again when switching to a content view that has sidebar panels to show.
+        If the user shows the sidebar when empty it will not auto hide anymore. If the user hides the sidebar
+        when it isn't empty it will stay hidden until manually shown.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Added setting.
+        (WebInspector._sidebarCollapsedStateDidChange): Update setting based on collapsed state and sidebar panel count.
+        (WebInspector._contentBrowserRepresentedObjectsDidChange): Show or hide the details sidebar when the sidebar
+        panel count changes.
+
+2012-03-03  Timothy Hatcher  <timothy@apple.com>
+
+        Add the "Show All" checkbox to the Computed Style section header.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/CSSStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style .styles-section .properties li): Clean up to better align the text.
+        (.sidebar > .panel.details.css-style .styles-section.read-only .properties > li): Ditto.
+        (.sidebar > .panel.details.css-style .styles-section.computed-style .properties .inherited): Fixed to work.
+        (.sidebar > .panel.details.css-style .details-section.show-all .styles-section.computed-style .properties .inherited): Ditto.
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel): Create the checkbox and label.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._computedStyleShowAllCheckboxValueChanged): Added. Toggle the setting
+        and show-all class on the computed style section.
+        * UserInterface/DetailsSection.css:
+        (.details-section > .header:not(.mouse-over-options-element):active::before): Don't show active if the options element is.
+        (.details-section.collapsed > .header:not(.mouse-over-options-element):active::before): Ditto.
+        (.details-section > .header > label): Added. Generic support for a label and checkbox.
+        (.details-section.collapsed  > .header > label): Ditto.
+        (.details-section > .header > label > input[type="checkbox"]): Ditto.
+        * UserInterface/DetailsSection.js:
+        (WebInspector.DetailsSection): Make a title element span so it can be updated separately. Append the options element.
+        (WebInspector.DetailsSection.prototype.get title): Use the title element.
+        (WebInspector.DetailsSection.prototype.set title): Ditto.
+        (WebInspector.DetailsSection.prototype._headerElementClicked): Return early if it is within the options element.
+        (WebInspector.DetailsSection.prototype._optionsElementMouseDown): Added. Add the mouse-over-options-element class.
+        (WebInspector.DetailsSection.prototype._optionsElementMouseUp): Added. Remove the mouse-over-options-element class.
+
+2012-03-03  Brian Weinstein  <bweinstein@apple.com>
+
+        <rdar://problem/10979339> Links in Log and Profile content views don't take you to the correct line
+
+        r41258 added the ability to jump to a certain line number when opening a resource
+        in the inspector by setting the lineNumber property on the link element that will
+        be clicked.
+        
+        Adopt this for JavaScript profiles and the Log content view. 
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ConsoleMessageImpl.js:
+        (WebInspector.ConsoleMessageImpl.prototype._linkifyLocation): Set the line number of the link
+            element.
+        * UserInterface/JavaScriptProfileView.js:
+        (WebInspector.JavaScriptProfileView): Add a mouse listener.
+        (WebInspector.JavaScriptProfileView.prototype._mouseWasClicked): Call WebInspector.openURL.
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype._mouseWasClicked): Get the line number from the link
+            element and pass that line number to WebInspector.openURL.
+        * UserInterface/ProfileDataGridTree.js:
+        (WebInspector.ProfileDataGridNode.prototype._linkifyLocation): Set the line number of the
+            link element.
+
+2012-03-03  Timothy Hatcher  <timothy@apple.com>
+
+        Make $0..$9 work in the new Web Inspector's console.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView.prototype._selectedNodeDidChange): Call ConsoleAgent.addInspectedNode
+        when the selected DOM node changes.
+
+2012-03-03  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        When we need to refresh all of the rows, we need to make a copy of the
+        children array, because the children array gets resorted as the rows
+        are updated.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView.prototype._updatePendingRecordsWithNewBounds):
+
+2012-03-03  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Tweak to prevent hiding a few of the rows on either end of the
+        visible bounds. This makes scrolling feel a little bit nicer.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView.prototype._updateOffscreenRows):
+
+2012-03-03  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Style the collapse-button and divider.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DataGrid.css:
+        (.data-grid th.sortable:not(.mouse-over-collapser):active):
+        (.data-grid th.sortable.sort-ascending:not(.mouse-over-collapser):active, .data-grid th.sortable.sort-descending:not(.mouse-over-collapser):active):
+        When the collapse-button is moused over, we shouldn't apply the :active
+        style to the entire table header cell when its clicked, because the
+        user will be clicking on the collapser-button.
+
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .data-grid th.sortable:not(.mouse-over-collapser):active):
+        (.content-view.timelines > .data-grid th.collapser):
+        (.content-view.timelines > .data-grid th.collapser > .divider):
+        (.content-view.timelines > .data-grid th.collapser > .collapser-button):
+        (.content-view.timelines > .data-grid th.collapser > .collapser-button:active):
+        (.content-view.timelines > .data-grid th.collapser.collapsed > .collapser-button):
+        (.content-view.timelines > .data-grid th.collapser.collapsed > .collapser-button:active):
+        (.content-view.timelines > .data-grid th.sort-descending.collapser > div:first-child):
+        Style the button to the far right. Adjust the sort indicator
+        to be the left of the collapse-button and divider.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView):
+        (WebInspector.TimelinesContentView.generateEmbossedCollapseImages.canvasIdentifier):
+        (WebInspector.TimelinesContentView.generateEmbossedCollapseImages):
+        Generate embossed images once for all Timeline DataGrids.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGrid.prototype._mouseoverColumnCollapser):
+        (WebInspector.DataGrid.prototype._mouseoutColumnCollapser):
+        Add a class to the <th> so that the :active highlight won't take
+        affect when the user clicks the collapser button, but does when
+        the user clicks on the test of the header cell.
+
+        * UserInterface/ImageUtilities.js:
+        (generateEmbossedImages._imageLoaded):
+        Make the Focus state optional, and don't generate it if its not needed.
+
+        * UserInterface/Images/LessColumns.pdf: Added.
+        * UserInterface/Images/MoreColumns.pdf: Added.
+        Images added for the collapse button.
+
+2012-03-03  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Move generating embossed canvas images into ImageUtilities so
+        that it can be shared with DataGrid in the next part. This turns
+        all self/this references into parameters.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem.prototype._generateImages):
+        * UserInterface/ImageUtilities.js:
+        (generateEmbossedImages._imageLoaded):
+        (generateEmbossedImages._createEmbossedCanvasImage):
+        (generateEmbossedImages._drawImageShadow):
+        (generateEmbossedImages._invertMaskImage):
+        (generateEmbossedImages._applyImageMask):
+        (generateEmbossedImages):
+        * UserInterface/Main.html:
+
+2012-03-03  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DataGrid.css:
+        (.data-grid th):
+        When columns were collapsed down to width:0, the <th> content was overflowing.
+        <td> already had overflow:hidden, so this just adds it to <th>.
+
+        (.data-grid th.sort-descending > div:first-child):
+        (.data-grid th.sort-ascending > div:first-child::after):
+        (.data-grid th.sort-descending > div:first-child::after):
+        Now that a <th> may have multiple divs, specify that we want the
+        sort indicator to show up after the first <div>, before the
+        divider and collapse-button.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGrid):
+        (WebInspector.DataGrid.prototype.updateWidths):
+        Move code into the block that was only used in the block.
+
+        (WebInspector.DataGrid.prototype.columnWidthsMap):
+        (WebInspector.DataGrid.prototype.applyColumnWidthsMap):
+        A brute force API to get / adjust all column widths.
+
+        (WebInspector.DataGrid.prototype._isColumnVisible):
+        (WebInspector.DataGrid.prototype._showColumn):
+        (WebInspector.DataGrid.prototype._hideColumn):
+        (WebInspector.DataGrid.prototype._positionResizers):
+        Rewrite to actually work. Setting a colgroup as hidden or display:none
+        was actually ignoring the colgroup alltogether, breaking the normal
+        colgroup[i] === column[i] relationship. Setting the width to 0 kept
+        the relationship, and hides the column's contents.
+
+        (WebInspector.DataGrid.prototype._clickInHeaderCell):
+        (WebInspector.NetworkDataGrid.prototype.willToggleColumnGroup):
+        (WebInspector.NetworkDataGrid.prototype.didToggleColumnGroup):
+        Handle clicks on the collapser button. Run some optional subclass
+        methods so state can be saved and so the column widths can be adjusted.
+
+        * UserInterface/NetworkDataGrid.js:
+        (WebInspector.NetworkDataGrid.prototype.willToggleColumnGroup):
+        (WebInspector.NetworkDataGrid.prototype.didToggleColumnGroup):
+        Handle toggling the column sizes. When collapsing, keep the "Name"
+        field the same width that it was. But when expanding, just relayout
+        back to whatever the original widths were.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView):
+        Add rows to a "details" column group and specify a collapser.
+
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .data-grid .column-group-details):
+        Slightly dim the "details" column group.
+
+2012-03-03  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Update offscreen rows after sorting.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView.prototype._sortCurrentDataGrid):
+
+2012-03-03  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Sorting the Network Timeline column should sort by resource
+        response time, falling back to request time. Make this
+        the default sort for the DataGrid.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/ResourceTimelineDataGridNode.js:
+        (WebInspector.ResourceTimelineDataGridNode.prototype.get data):
+
+2012-03-03  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Fix the Timeline Grid sizes for the RemoteDebugger. It looks
+        as if this isn't needed anymore and actually displays poorly
+        on 10.7.3 WebKit.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TimelinesContentView.css:
+
+2012-03-03  Timothy Hatcher  <timothy@apple.com>
+
+        Don't move to editing the next property when pressing return/enter while editing a property value.
+
+        Pressing return/enter still moves to the value when you are editing the property name. If you want
+        to edit the next property, that is what tab is for!
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/StylePropertyTreeElement.js:
+        (WebInspector.StylePropertyTreeElement.prototype.editingNameValueKeyDown): Support a move direction of "none".
+        (WebInspector.StylePropertyTreeElement.prototype.selectElement.editingCommitted): Don't call the moveToNextCallback
+        if there is no moveDirection or moveDirection is "none".
+
+2012-03-03  Timothy Hatcher  <timothy@apple.com>
+
+        Override TreeElement.ondblclick instead of having a separate dblclick listener in StylePropertyTreeElement.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/StylePropertyTreeElement.js:
+        (WebInspector.StylePropertyTreeElement.prototype.onattach): Removed dblclick event listener.
+        (WebInspector.StylePropertyTreeElement.prototype.ondblclick): Renamed from _startEditing.
+
+2012-03-03  Timothy Hatcher  <timothy@apple.com>
+
+        Make URLs that go to the main resource of a frame open in the Web Inspector instead of in a new tab.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Main.js:
+        (WebInspector.openURL): Check frame.mainResource.url before calling frame.resourceForURL.
+
+2012-03-02  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an error that was showing in the console and prevented revalidation of styled when DOM attributes are removed.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._attributesModified): Renamed from _attributesRemovedOrStyleInvalidated
+        since _attributesModified is what was registered as the event listener.
+        * UserInterface/Object.js:
+        (WebInspector.Object.addEventListener): Assert the event type and listener are not null/undefined/empty.
+        (WebInspector.Object.removeEventListener): Ditto.
+
+2012-03-03  Timothy Hatcher  <timothy@apple.com>
+
+        Use a go-to arrow to link to the location of the style rule in the stylesheet resource.
+
+        The text links added a lot of clutter and often collided with the selector in bad ways.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style .styles-section .go-to-arrow): Sized to fit the line. Hidden by default.
+        (.sidebar > .panel.details.css-style .styles-section:hover .go-to-arrow): Reveal on hover of the section.
+        * UserInterface/StylePropertiesSection.js:
+        (WebInspector.StylePropertiesSection.prototype._linkify): Create the go-to arrow instead of a text link.
+
+2012-03-02  Timothy Hatcher  <timothy@apple.com>
+
+        Show user agent rules in a separate section called "Base Style Rules".
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel): Create the Base Style Rules section.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.buildSections.createMatchedRuleGroups): Take an array and
+        return a modified version of the array instead of fixed modification of the matchedRuleGroups array.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.buildSections): Update the user agent section separately.
+        * UserInterface/StylePropertiesSection.js:
+        (WebInspector.StylePropertiesSection.prototype._createRuleOriginNode): Don't show an origin for user agent rules, since they are
+        in their own section now.
+
+2012-03-02  Timothy Hatcher  <timothy@apple.com>
+
+        Style the Style details sidebar.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.css: Added.
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.buildSections.createStylePropertiesSection):
+        Stop passing false for isFirstSection argument.
+        * UserInterface/ComputedStylePropertiesSection.js:
+        (WebInspector.ComputedStylePropertiesSection): Update className.
+        * UserInterface/DetailsSection.css:
+        * UserInterface/Main.html: Included CSSStyleDetailsSidebarPanel.css.
+        * UserInterface/StylePropertiesSection.js:
+        (WebInspector.StylePropertiesSection): Remove isFirstSection argument.
+        * UserInterface/StylePropertyTreeElement.js:
+        (WebInspector.StylePropertyTreeElement.prototype.updateTitle): Create and append the expand element for the
+        disclosure triangle use for shorthands. Create an inner element for the swatch for transparent colors.
+        (WebInspector.StylePropertyTreeElement.prototype.restoreNameElement): Remove "webkit-" class prefix.
+        (WebInspector.StylePropertyTreeElement.prototype._isNameElement): Ditto.
+        (WebInspector.StylePropertyTreeElement.prototype._isValueElement): Ditto. Return early if it is the expand element.
+        (WebInspector.StylePropertyTreeElement.prototype.isEventWithinDisclosureTriangle): Added.
+
+2012-03-01  Timothy Hatcher  <timothy@apple.com>
+
+        Show an empty content message in the Issue sidebar when there are no issues.
+
+        Reviewed by Brian Weinstein.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/IssueSidebarPanel.js:
+        (WebInspector.IssueSidebarPanel): Call _updateEmptyContentPlaceholder.
+        (WebInspector.IssueSidebarPanel.prototype._updateEmptyContentPlaceholder): Added.
+        (WebInspector.IssueSidebarPanel.prototype._issuesCleared): Call _updateEmptyContentPlaceholder.
+        (WebInspector.IssueSidebarPanel.prototype._checkForOldResources.delayedWork): Ditto.
+
+2012-03-01  Timothy Hatcher  <timothy@apple.com>
+
+        Don't show the same node twice in the navigation bar when the close tag is selected in the DOM tree.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView.prototype.get selectionPathComponents): Skip close tag tree elements.
+
+2012-03-01  Timothy Hatcher  <timothy@apple.com>
+
+        Update the Style details sidebar when stylesheets, the media query result, or the DOM changes.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel): Added event listeners for the DOM and CSS changes.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.get _userOperationInProgress): Added.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSectionsIfNonUserAction): Added. Call _rebuildSections.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._attributesModified): Added. Call _rebuildSectionsIfNonUserAction.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._attributesRemoved): Added. Ditto.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._styleInvalidated): Added. Ditto.
+
+2012-03-01  Timothy Hatcher  <timothy@apple.com>
+
+        Include pseudo elements in the Style details sidebar.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.buildSections): Go through the pseudo elements.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.buildSections.createStylePropertiesSection): Broken out from
+        createStylePropertiesSectionGroup.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.buildSections.createStylePropertiesSectionGroup): Only create
+        the row and group now.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.buildSections.createMatchedRuleGroups): Added. Creates sections
+        and groups for each pseudo element identifier.
+
+2012-03-01  Timothy Hatcher  <timothy@apple.com>
+
+        Update the computed style and overloaded properties when editing a style property.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel):
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.buildSections.createStylePropertiesSectionGroup):
+        Add the StylePropertiesSection to the mainPropertySectionMap.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.buildSections): Store direct references to the important
+        property sections and add them to the mainPropertySections.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._refreshSections): Added.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._refreshSections.computedStyleCallback): Iterate over all the property sections
+        and build the style rules needed to update overloaded and used properties.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._markUsedProperties): Clean up.
+        * UserInterface/StylePropertiesSection.js:
+        (WebInspector.StylePropertiesSection.prototype.editingSelectorCommitted.successCallback): Call _refreshSections.
+        (WebInspector.StylePropertiesSection.prototype.editingSelectorCommitted): Remove reference to WebInspector.panels.elements.
+        * UserInterface/StylePropertyTreeElement.js:
+        (WebInspector.StylePropertyTreeElement.prototype._updatePane): Use _refreshSections.
+        (WebInspector.StylePropertyTreeElement.prototype.toggleEnabled): Use _parentPane.
+        (WebInspector.StylePropertyTreeElement.prototype.applyStyleText): Ditto.
+
+2012-03-01  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Fixed localization typo.
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView):
+
+2012-03-01  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Before we make other improvements at least adjust the timeline graph
+        sizes to reasonable sizes.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView):
+
+2012-03-01  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Adopt OpenSource's "offscreen" row hiding for performance.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .data-grid tr.offscreen):
+        (.content-view.timelines > .data-grid tr.offscreen td):
+        Ensure offscreen table rows still have a height, and hide their contents.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView):
+        (WebInspector.TimelinesContentView.prototype.updateLayout):
+        (WebInspector.TimelinesContentView.prototype._updatePendingRecords):
+        Update offscreen rows when the view resizes, and after we've sorted / added new rows.
+
+        (WebInspector.TimelinesContentView.prototype._updateOffscreenRows):
+        Mark data grid table rows outside the visible bounds as "offscreen".
+
+        * UserInterface/ResourceTimelineDataGridNode.js:
+        (WebInspector.ResourceTimelineDataGridNode.prototype.select):
+        When a user uses keyboard shortcuts and moves up/down to a row that
+        was offscreen, the selection happens before the node scrolls into view.
+        In order for its layout to work properly it can't be display none,
+        so remove the offscreen class preemptively.
+
+2012-03-01  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Images/graphLabelCalloutLeft.png: Added.
+        * UserInterface/Images/graphLabelCalloutLeftWhite.png: Added.
+        * UserInterface/Images/graphLabelCalloutRight.png: Added.
+        * UserInterface/Images/graphLabelCalloutRightWhite.png: Added.
+        * UserInterface/Images/timelineHollowPillBlue.png: Added.
+        * UserInterface/Images/timelineHollowPillGray.png: Added.
+        * UserInterface/Images/timelineHollowPillGreen.png: Added.
+        * UserInterface/Images/timelineHollowPillOrange.png: Added.
+        * UserInterface/Images/timelineHollowPillPurple.png: Added.
+        * UserInterface/Images/timelineHollowPillRed.png: Added.
+        * UserInterface/Images/timelineHollowPillYellow.png: Added.
+        * UserInterface/Images/timelinePillBlue.png: Added.
+        * UserInterface/Images/timelinePillGray.png: Added.
+        * UserInterface/Images/timelinePillGreen.png: Added.
+        * UserInterface/Images/timelinePillOrange.png: Added.
+        * UserInterface/Images/timelinePillPurple.png: Added.
+        * UserInterface/Images/timelinePillRed.png: Added.
+        * UserInterface/Images/timelinePillWhiteFlat.png: Added.
+        Open Source images and new white images from Timothy Hatcher.
+        There will need to be HiDPI versions of these images.
+
+        * UserInterface/Main.html:
+        Added new files.
+
+        * UserInterface/Main.html:
+        * UserInterface/NetworkTimeline.css: Added.
+        Basic styles copied from Open Source. Minor adjustments for image sizes.
+
+        (.data-grid:focus tr.selected .network-graph-bar):
+        (.data-grid:focus tr.selected .resource-cached .network-graph-bar):
+        (.data-grid:focus tr.selected .network-graph-bar.waiting):
+        (.data-grid:focus tr.selected .network-graph-label):
+        (.data-grid:focus tr.selected .network-graph-label.after):
+        (.data-grid:focus tr.selected .network-graph-label.before::after):
+        (.data-grid:focus tr.selected .network-graph-label.after::before):
+        New frontend styles for the network graph when the data grid row is selected.
+        This makes the pill, callouts, and text white / blue matching the data grid
+        selected style.
+
+        * UserInterface/NetworkDataGrid.js: Added.
+        (WebInspector.NetworkDataGrid):
+        (WebInspector.NetworkDataGrid.prototype.constructor.WebInspector.NetworkDataGrid.get currentCalculator):
+        (WebInspector.NetworkDataGrid.prototype.updateCalculatorBoundariesWithRecord):
+        (WebInspector.NetworkDataGrid.prototype.updateCalculatorBoundariesWithDataGridNode):
+        (WebInspector.NetworkDataGrid.prototype.reset):
+        NetworkDataGrid has a just a time calculator right now, that adjusts its bounds
+        based on resource start time, end times, and on-going load times.
+
+        * UserInterface/ResourceTimelineDataGridNode.js:
+        (WebInspector.ResourceTimelineDataGridNode):
+        (WebInspector.ResourceTimelineDataGridNode.prototype.createCellContent):
+        (WebInspector.ResourceTimelineDataGridNode.prototype._createGraphElement):
+        Create and update the network graph elements for the cell content.
+
+        (WebInspector.ResourceTimelineDataGridNode.prototype.select):
+        Show the pill labels when the row is selected. Not just onmouseover.
+
+        (WebInspector.ResourceTimelineDataGridNode.prototype._refreshGraph):
+        (WebInspector.ResourceTimelineDataGridNode.prototype._refreshLabelPositions):
+        Use the provided network calculator shared with the other grid nodes to create
+        the appropriate bar for this resource.
+        appropriately within the network calculators bounds.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView):
+        Timeline DataGrids may have embedded timeline graphs that adjust their bounds
+        based on the records (start times, max sizes, etc) their content contains.
+        Calculator objects manage those bounds. If the current data grid has a
+        calculator we do a few extra actions to ensure nice updates.
+
+        (WebInspector.TimelinesContentView.prototype._recordingStarted):
+        Reset the data grid's calculators.
+
+        (WebInspector.TimelinesContentView.prototype._updatePendingRecords):
+        (WebInspector.TimelinesContentView.prototype._updateCalculatorBoundsForPendingRecords):
+        (WebInspector.TimelinesContentView.prototype._updatePendingRecordsWithNewBounds):
+        Update the calculator's bounds before updating pending records so that all records
+        are drawn with the same, most accurate bounds.
+
+2012-03-01  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10960903> Include Network timeline graph in the network data grid
+
+        Reviewed by Timothy Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        New strings for the tooltips provided by the graph calculator.
+
+        * UserInterface/Main.html:
+        * UserInterface/NetworkGraphCalculator.js: Added.
+        (WebInspector.NetworkTimeCalculator):
+        (WebInspector.NetworkTimeCalculator.prototype.get boundarySpan):
+        (WebInspector.NetworkTimeCalculator.prototype.reset):
+        (WebInspector.NetworkTimeCalculator.prototype.computeBarGraphPercentages):
+        (WebInspector.NetworkTimeCalculator.prototype.computeBarGraphLabels):
+        (WebInspector.NetworkTimeCalculator.prototype.updateBoundaries):
+        (WebInspector.NetworkTimeCalculator.prototype.formatValue):
+        (WebInspector.NetworkTimeCalculator.prototype._lowerBound):
+        (WebInspector.NetworkTimeCalculator.prototype._upperBound):
+        (WebInspector.NetworkTransferTimeCalculator):
+        (WebInspector.NetworkTransferTimeCalculator.prototype._lowerBound):
+        (WebInspector.NetworkTransferTimeCalculator.prototype._upperBound):
+        (WebInspector.NetworkTransferDurationCalculator):
+        (WebInspector.NetworkTransferDurationCalculator.prototype._upperBound):
+        Port from OpenSource to work with the new frontend's resource objects.
+
+        * UserInterface/ResourceTimelineRecord.js:
+        (WebInspector.ResourceTimelineRecord.prototype.get endTime):
+        Move "endTime" resource calculation from here ...
+
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.get lastTimestamp):
+        ... to here as "lastTimestamp".
+
+2012-03-01  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Upgrade .hidden to a common case that does display:none.
+        This is used throughout the OpenSource frontend to hide elements
+        and some existing code already uses it and may not be getting
+        the proper treatment.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TextEditor.css:
+        * UserInterface/NavigationSidebarPanel.css:
+        * UserInterface/ApplicationCacheFrameContentView.css:
+        * UserInterface/Main.css:
+        (.hidden):
+        * UserInterface/TextEditor.css:
+        This removes new front-end occurrences of "hidden". However
+        it did not remove their JavaScript property.
+
+2012-03-01  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Prevent adding a node to the pending refresh list multiple times.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView):
+        (WebInspector.TimelinesContentView.prototype._updatePendingRecords):
+        (WebInspector.TimelinesContentView.prototype._scheduleGridNodeForRefresh):
+        Flag on the DataGridNode as pending a refresh if we've added it
+        to the refresh list and remove the flag after refreshing.
+
+2012-03-01  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10952471> Page should reload when pushing <cmd>+R
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/EditingSupport.js:
+        (WebInspector.isEventTargetAnEditableField):
+        Add code, similar to Open Source to detect if the event is inside of
+        an editable field. Although some TextPrompt's mark their element as
+        editing, the Console does not. Nor do <input>s.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        (WebInspector._keydown):
+        Add a keydown listener on the document checking for <cmd>+R.
+
+2012-03-01  Brian Weinstein  <bweinstein@apple.com>
+
+        Finish up JavaScript profiling in the new inspector.
+        
+        This patch fixes some loose ends.
+        - Profiles started by the user now have the title "JavaScript Profile n".
+        - Profile tree elements now have an icon.
+        - Selecting "Start Profiling JavaScript" or "Stop Profiling JavaScript" from the Develop menu
+        now take you to the instrument sidebar panel.
+        
+        Rest of <rdar://problem/10897473> Implement JavaScript profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js: Update localized strings.
+
+        * UserInterface/Images/Profile.png: Added.
+        * UserInterface/Images/Profile@2x.png: Added.
+
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.startProfilingJavaScript): Show the instrument sidebar panel.
+        (InspectorFrontendAPI.stopProfilingJavaScript): Ditto.
+
+        * UserInterface/InstrumentIcons.css: Add icons for profile tree elements.
+
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel.prototype._titleForProfile): Make the title for user generated
+            profiles "JavaScript Profile n", instead of just "Profile n".
+        (WebInspector.InstrumentSidebarPanel.prototype._profileWasAdded): Use the class name for the icon.
+
+2012-03-01  Brian Weinstein  <bweinstein@apple.com>
+
+        Clear the list of profiles when the page navigates.
+
+        More of <rdar://problem/10897473> Implement JavaScript profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel): Add a listener for when the profile manager says the profiles
+            were cleared.
+        (WebInspector.InstrumentSidebarPanel.prototype._profilesCleared): Remove the tree elements from the sidebar,
+            clear the map from profile titles -> tree elements, close all profile content views, and update the empty
+            content placeholder. 
+        * UserInterface/ProfileManager.js:
+        (WebInspector.ProfileManager): Add a listener for when the main resource did change.
+        (WebInspector.ProfileManager.prototype.constructor.WebInspector.ProfileManager.initialize): Remove an unused variable.
+        (WebInspector.ProfileManager.prototype._mainResourceDidChange): Call initialize and fire an event saying that profiles
+            were cleared.
+
+2012-02-29  Brian Weinstein  <bweinstein@apple.com>
+
+        Add the ability to start/stop JavaScript profiling from the inspector.
+        
+        This patch adds a recording glyph to the profiles title bar (which matches the one in the timelines title bar).
+        The button will start and stop JavaScript profiling.
+        
+        More of <rdar://problem/10897473> Implement JavaScript profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js: Update localized strings.
+
+        * UserInterface/InstrumentSidebarPanel.css: Make all of these rules work for title bars in the instruments
+            sidebar panel other than the Timelines title bar. We need these rules for the Profiles title bar as well.
+
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel): Add a record button and status text next to the profiles sidebar. Also start
+            listening for when the profile manager starts and stops profiling.
+        (WebInspector.InstrumentSidebarPanel.prototype._profilingStarted): Start the text of the profiling status and add
+            a recording style class to the glyph.
+        (WebInspector.InstrumentSidebarPanel.prototype._profilingEnded): Clear the text of the profiling status and remove
+            the recording style class from the glyph.
+        (WebInspector.InstrumentSidebarPanel.prototype._profileGlyphMousedOver): Update the text of the profiling status.
+        (WebInspector.InstrumentSidebarPanel.prototype._profileGlyphMousedOut): Ditto.
+        (WebInspector.InstrumentSidebarPanel.prototype._profileGlyphClicked): Toggle the profiling state.
+
+        * UserInterface/ProfileManager.js:
+        (WebInspector.ProfileManager.prototype.constructor.WebInspector.ProfileManager.initialize): Add a flag that represents
+            whether or not we are currently profiling.
+        (WebInspector.ProfileManager.prototype.setRecordingProfile): Fire events for when we start or stop profiling.
+
+2012-02-29  Timothy Hatcher  <timothy@apple.com>
+
+        Remember the last selected details sidebar panel and restore it when that panel becomes available.
+
+        Reviewed by Jon Honeycutt.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Add event listener for SidebarPanelSelected event.
+        (WebInspector._detailsSidebarPanelSelected): Added. Remember the identifier of the selected sidebar panel.
+        (WebInspector._contentBrowserRepresentedObjectsDidChange): Ignore selection changes and restore the selection
+        when the last selected sidebar panel is reinserted into the sidebar.
+
+2012-02-29  Timothy Hatcher  <timothy@apple.com>
+
+        Prevent the new Web Inspector resources from installing in production builds since we are
+        not enabling the Inspector in DP2.
+
+        Reviewed by Mark Rowe.
+
+        * Scripts/copy-user-interface-resources.sh: Exit early before copying.
+
+2012-02-29  Timothy Hatcher  <timothy@apple.com>
+
+        Include missing image needed by the Log and Database content views.
+
+        <rdar://problem/10952496> "userInputPreviousIcon.png" resource failed to load in Console
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/DatabaseContentView.css:
+        (.database-user-query::before): Use UserInputPromptPrevious.pdf.
+        * UserInterface/Images/UserInputPromptPrevious.pdf: Added.
+        * UserInterface/LogContentView.css:
+        (.console-user-command::before): Use UserInputPromptPrevious.pdf.
+
+2012-02-29  Timothy Hatcher  <timothy@apple.com>
+
+        Go through the style rules and mark the used and overloaded properties.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections): Call _markUsedProperties and
+        pass the result to WebInspector.ComputedStylePropertiesSection.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._markUsedProperties): Added. Copied from open source's
+        StylesSidebarPane.js file.
+
+2012-02-29  Timothy Hatcher  <timothy@apple.com>
+
+        Populate the Style sidebar sections after getting all the style info.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.buildSections): Build a list of style rules
+        that match the cascade order so we can mark used and overloaded properties. Rebuild the sections.
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager.prototype.getInlineStylesAsync): Merge from open source to work with TOT protocol.
+        * UserInterface/StylePropertiesSection.js:
+        (WebInspector.StylePropertiesSection): Don't show a selector if selectorText is empty.
+
+2012-02-29  Timothy Hatcher  <timothy@apple.com>
+
+        Request the style information and store it, then build the sections after the last callback.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections): Request the style info.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.computedStyleCallback): Store the result.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.matchedStylesCallback): Store the result.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.inlineStylesCallback): Store the results and
+        call buildSections. Since this was the last async call to cssStyleManager, this will always be the last response.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections.buildSections): Added stub that needs implemented.
+
+2012-02-29  Timothy Hatcher  <timothy@apple.com>
+
+        Remove the refresh code in the Style sidebar since it needs reworked to properly update in one step.
+
+        The updating needs to be done in one step so the cascade and property priority are taken into account.
+        The previous way of updating the sections in three async steps was not going to work.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh): Call _rebuildSections.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._refreshStyleRules): Removed.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._refreshAttributeStyles): Removed.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._refreshComputedStyle): Removed.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._rebuildSections): Added stub that needs implemented.
+
+2012-02-28  Timothy Hatcher  <timothy@apple.com>
+
+        More work for resource links in the Style details sidebar.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMDetailsSidebarPanel.js:
+        (WebInspector.DOMDetailsSidebarPanel): Make the event listener capture since another listener interferes.
+        (WebInspector.DOMDetailsSidebarPanel.prototype._mouseWasClicked): Pass along the line number.
+        * UserInterface/Main.js:
+        (WebInspector.openURL): Add support for opening to a line number. Use ResourceSidebarPanel which does all the work.
+        * UserInterface/StylePropertiesSection.js:
+        (WebInspector.StylePropertiesSection): Use _linkify instead of linkifyResourceAsNode.
+        (WebInspector.StylePropertiesSection.prototype._linkify): Added.
+        (WebInspector.StylePropertiesSection.prototype._createRuleOriginNode): Use _linkify instead of linkifyResourceAsNode.
+
+2012-02-28  Timothy Hatcher  <timothy@apple.com>
+
+        Copy over Color.js from open source and hook it up to the Style details sidebar.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager): Use WebInspector.Color.Format.
+        * UserInterface/Color.js: Copied from OpenSource/Source/WebCore/inspector/front-end/Color.js.
+        * UserInterface/Main.html: Included Color.js.
+        * UserInterface/StylePropertyTreeElement.js: Use WebInspector.Color.Format.
+
+2012-02-28  Timothy Hatcher  <timothy@apple.com>
+
+        Get style editing working.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/BoxModelDetailsSectionRow.js:
+        (WebInspector.BoxModelDetailsSectionRow.prototype._handleKeyDown): Use WebInspector.CSSPropertyPrompt.alteredFloatNumber.
+        * UserInterface/CSSPropertyPrompt.js:
+        (WebInspector.CSSPropertyPrompt):
+        (WebInspector.CSSPropertyPrompt.alteredFloatNumber): Moved from BoxModelDetailsSectionRow.
+        (WebInspector.CSSPropertyPrompt.alteredHexNumber): Added from Open Source.
+        (WebInspector.CSSPropertyPrompt.prototype._handleUpOrDownValue): Use alteredFloatNumber and alteredHexNumber on this class.
+        * UserInterface/EditingSupport.js:
+        (WebInspector.restoreFocusFromElement): Added from Open Source.
+        * UserInterface/Main.html: Included CSSPropertyPrompt.js.
+        * UserInterface/StylePropertyTreeElement.js:
+        (WebInspector.StylePropertyTreeElement.prototype): Create CSSPropertyPrompt correctly.
+
+2012-02-28  Timothy Hatcher  <timothy@apple.com>
+
+        Replace more uses of {add,remove,has}StyleClass with classList.{add,remove,contains}.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/BlankStylePropertiesSection.js:
+        (WebInspector.BlankStylePropertiesSection):
+        (WebInspector.BlankStylePropertiesSection.prototype.editingSelectorCommitted.successCallback):
+        (WebInspector.BlankStylePropertiesSection.prototype.editingSelectorCommitted):
+        (WebInspector.BlankStylePropertiesSection.prototype.makeNormal):
+        * UserInterface/ProfileDataGridTree.js:
+        (WebInspector.ProfileDataGridNode.prototype.createCell):
+        * UserInterface/StylePropertiesSection.js:
+        (WebInspector.StylePropertiesSection.prototype._handleEmptySpaceDoubleClick):
+
+2012-02-28  Timothy Hatcher  <timothy@apple.com>
+
+        Make links work in the Style details sidebar.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._refreshAttributeStyles): Pass the domNode.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._refreshComputedStyle): Ditto.
+        * UserInterface/DOMDetailsSidebarPanel.js:
+        (WebInspector.DOMDetailsSidebarPanel): Add click event listener.
+        (WebInspector.DOMDetailsSidebarPanel.prototype._mouseWasClicked): Added. Find the parentFrame for
+        the inspected DOM node and then call openURL.
+        * UserInterface/StylePropertyTreeElement.js:
+        (WebInspector.StylePropertyTreeElement.prototype.updateTitle.linkifyURL): Remove references to
+        elements panel and fix up the linifying code to work with the new Inspector code.
+
+2012-02-29  Brian Weinstein  <bweinstein@apple.com>
+
+        Group together profiles with the same name into folders when there is more than
+        one of them.
+        
+        More of <rdar://problem/10897473> Implement JavaScript profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js: Update localized strings.
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel): Add a mapping from profile title -> profile tree element (or folder).
+        (WebInspector.InstrumentSidebarPanel.prototype._profileWasAdded): Add multiple cases for when
+            we add a profile. If it's the first profile with a given name, add it to the sidebar. If there already
+            is a folder that represents all profiles with that name, then add the profile to that folder. If there
+            is already a profile with that same name, create a folder to represent all profiles with that name,
+            and add both the previous profile and the new profile to that folder.
+
+2012-02-28  Brian Weinstein  <bweinstein@apple.com>
+
+        Make console.profile work and show entries in the instrument sidebar.
+        
+        We now enable profiling when we open the web inspector, instead of when we are just told to create
+        a profile. This allows console.profile to work when the web inspector is open.
+        
+        More of <rdar://problem/10897473> Implement JavaScript profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ProfileManager.js:
+        (WebInspector.ProfileManager): Enable the ProfilerAgent when we start the ProfileManager.
+        (WebInspector.ProfileManager.prototype.startProfilingJavaScript): Call startRecordingProfile.
+        (WebInspector.ProfileManager.prototype.stopProfilingJavaScript): Don't disable the ProfilerAgent.
+        (WebInspector.ProfileManager.prototype.addProfile): If we don't have a recording JavaScript profile (which
+            we wouldn't if addProfile was called from console.profile), then create a new ProfileObject and fire an
+            event.
+
+2012-02-28  Timothy Hatcher  <timothy@apple.com>
+
+        Start showing Computed Style in the Style details sidebar.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel): Create a Computed Style section.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh): Call _refreshComputedStyle.
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._refreshComputedStyle): Added. Request the computed styles
+        then make a ComputedStylePropertiesSection.
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager): Added setting for color format.
+        (WebInspector.CSSStyleManager.prototype.get preferredColorFormat): Added.
+        * UserInterface/ComputedStylePropertiesSection.js:
+        (WebInspector.ComputedStylePropertiesSection): Replace addStyleClass with classList.add.
+        (WebInspector.ComputedStylePropertiesSection.prototype.rebuildComputedTrace): Ditto.
+        * UserInterface/DetailsSection.js:
+        (WebInspector.DetailsSection): Make a empty group by default if none are passed in.
+        * UserInterface/DetailsSectionPropertiesRow.js: Added.
+        (WebInspector.DetailsSectionPropertiesRow):
+        (WebInspector.DetailsSectionPropertiesRow.prototype.get propertiesSection):
+        (WebInspector.DetailsSectionPropertiesRow.prototype.set propertiesSection):
+        * UserInterface/Main.html: Included DetailsSectionPropertiesRow.
+        * UserInterface/StylePropertiesSection.js:
+        (WebInspector.StylePropertiesSection): Removed single-click experiment.
+        * UserInterface/StylePropertyTreeElement.js:
+        (WebInspector.StylePropertyTreeElement.prototype.onattach): Removed single-click experiment.
+        (WebInspector.StylePropertyTreeElement.prototype.updateTitle): Use CSSStyleManager for the color format.
+        Replaced addStyleClass with classList.add and removeStyleClass with classList.remove.
+
+2012-02-27  Timothy Hatcher  <timothy@apple.com>
+
+        Fix some exceptions when running against shipping WebKit.
+
+        There are no setters for sortOrder or sortColumnIdentifier. Trying to set them use to throw an exception.
+        They just are silently ignored in TOT WebKit. The sort info is properly set earlier in the function.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView): Remove sets for sortOrder and sortColumnIdentifier.
+
+2012-02-27  Timothy Hatcher  <timothy@apple.com>
+
+        Hide the appearance and style details sidebars when the node is not an element.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/AppearanceDetailsSidebarPanel.js:
+        (WebInspector.AppearanceDetailsSidebarPanel.prototype.supportsDOMNode): Added. Support only ELEMENT_NODE types.
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.supportsDOMNode): Added. Support only ELEMENT_NODE types.
+        * UserInterface/DOMDetailsSidebarPanel.js:
+        (WebInspector.DOMDetailsSidebarPanel.prototype..inspect): Call supportsDOMNode before setting domNode.
+        (WebInspector.DOMDetailsSidebarPanel.prototype.supportsDOMNode): Added. Always return true.
+
+2012-02-27  Timothy Hatcher  <timothy@apple.com>
+
+        Move empty message support from DetailsSectionDataGridRow down to DetailsSectionRow.
+
+        This allows BoxModelDetailsSectionRow to show a properly styled empty message. It will
+        also allow other rows in the Style details sidebar to do the same.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/BoxModelDetailsSectionRow.js:
+        (WebInspector.BoxModelDetailsSectionRow): Pass the emptyMessage to the DetailsSectionRow constructor.
+        (WebInspector.BoxModelDetailsSectionRow.prototype._refresh): Use showEmptyMessage.
+        (WebInspector.BoxModelDetailsSectionRow.prototype._updateMetrics): Use hideEmptyMessage
+        * UserInterface/DetailsSection.css:
+        (.details-section > .content > .group > .row.empty): Removed .data-grid from the selector.
+        * UserInterface/DetailsSectionDataGridRow.js:
+        (WebInspector.DetailsSectionDataGridRow): Pass the emptyMessage to DetailsSectionRow constructor.
+        (WebInspector.DetailsSectionDataGridRow.prototype.set dataGrid): Use showEmptyMessage
+        and hideEmptyMessage.
+        * UserInterface/DetailsSectionRow.js:
+        (WebInspector.DetailsSectionRow): Initialize the _emptyMessage.
+        (WebInspector.DetailsSectionRow.prototype.get emptyMessage): Added.
+        (WebInspector.DetailsSectionRow.prototype.set emptyMessage): Added.
+        (WebInspector.DetailsSectionRow.prototype.showEmptyMessage): Added.
+        (WebInspector.DetailsSectionRow.prototype.hideEmptyMessage): Added.
+
+2012-02-27  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.CSSStyleDetailsSidebarPanel and make it show up in the details sidebar.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSStyleDetailsSidebarPanel.js: Added.
+        (WebInspector.CSSStyleDetailsSidebarPanel):
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh):
+        * UserInterface/Images/NavigationItemCurleyBraces.pdf: Added.
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+
+2012-02-27  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.CSSObserver and wire it up to the InspectorBackend.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSObserver.js: Added.
+        (WebInspector.CSSObserver):
+        (WebInspector.CSSObserver.prototype.mediaQueryResultChanged):
+        (WebInspector.CSSObserver.prototype.styleSheetChanged):
+        * UserInterface/Main.html: Included CSSObserver.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Call registerCSSDispatcher with an CSSObserver instance.
+
+2012-02-24  Brian Weinstein  <bweinstein@apple.com>
+
+        Add a sane name for user generated profiles.
+
+        More of <rdar://problem/10897473> Implement JavaScript profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel.prototype.addProfile):
+        * UserInterface/ProfileManager.js:
+
+2012-02-24  Brian Weinstein  <bweinstein@apple.com>
+
+        Create a JavaScriptProfileView when a profile is selected and show it.
+
+        More of <rdar://problem/10897473> Implement JavaScript profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * Localizations/en.lproj/localizedStrings.js: Update localized strings.
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView): Add a case for ProfileObject.
+        (WebInspector.ContentView.isViewable): Ditto.
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel): Add a listener for when items in the content tree outline are selected.
+        (WebInspector.InstrumentSidebarPanel.prototype._profileSelected): Call showContentViewForRepresentedObject on
+            the selected ProfileObject.
+        * UserInterface/Main.js:
+        (WebInspector.sidebarPanelForRepresentedObject): Add a case for ProfileObject.
+
+2012-02-24  Brian Weinstein  <bweinstein@apple.com>
+
+        Hook up Start/Stop Profiling JavaScript in the Develop menu, and make each profile show
+        up as a sidebar item.
+
+        More of <rdar://problem/10897473> Implement JavaScript profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.isProfilingJavaScript): Call into the ProfileManager.
+        (InspectorFrontendAPI.startProfilingJavaScript): Ditto.
+        (InspectorFrontendAPI.stopProfilingJavaScript): Ditto.
+
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel.prototype._profileWasAdded): Create a tree element for the added profile.
+        (WebInspector.InstrumentSidebarPanel.prototype._profileWasUpdated): Update the title of the tree element for the
+            profile that was updated.
+
+        * UserInterface/JavaScriptProfileType.js: Change the value of a constant to match data we get back
+            from the Profiler.
+
+        * UserInterface/ProfileManager.js:
+        (WebInspector.ProfileManager.prototype.constructor.WebInspector.ProfileManager.initialize): Clear the current JavaScript
+            profile variable.
+        (WebInspector.ProfileManager.prototype.isProfilingJavaScript): Return whether or not we are profiling JavaScript.
+        (WebInspector.ProfileManager.prototype.startProfilingJavaScript): Enable the ProfilerAgent, we kick off the profile in
+            the callback.
+        (WebInspector.ProfileManager.prototype.stopProfilingJavaScript): Stop recording the current profile and disable the
+            ProfilerAgent.
+        (WebInspector.ProfileManager.prototype.addProfile): Update our temporary recording profile to give it the information about
+            the profile that was added, and fire an event that the profile was u pdated.
+        (WebInspector.ProfileManager.prototype.setRecordingProfile): Create a temporary profile if needed, and fire an event that
+            it was created.
+        (WebInspector.ProfileManager.prototype._profilerWasEnabled): Create a JavaScriptProfileType and start recording.
+
+        * UserInterface/ProfilerObserver.js:
+        (WebInspector.ProfilerObserver.prototype.addProfileHeader): Call ProfileManager.addProfile.
+        (WebInspector.ProfilerObserver.prototype.setRecordingProfile): Call ProfileManager.setRecordingProfile.
+
+2012-02-24  Brian Weinstein  <bweinstein@apple.com>
+
+        Add a stub ProfilerObserver and hook it up in Main.js.
+        
+        More of <rdar://problem/10897473> Implement JavaScript profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/Main.html: Add new file.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Set up the ProfilerObserver.
+        * UserInterface/ProfilerObserver.js: Added.
+        (WebInspector.ProfilerObserver):
+        (WebInspector.ProfilerObserver.prototype.constructor.WebInspector.ProfilerObserver.resetProfiles):
+        (WebInspector.ProfilerObserver.prototype.addProfileHeader):
+        (WebInspector.ProfilerObserver.prototype.addHeapSnapshotChunk):
+        (WebInspector.ProfilerObserver.prototype.finishHeapSnapshot):
+        (WebInspector.ProfilerObserver.prototype.setRecordingProfile):
+        (WebInspector.ProfilerObserver.prototype.reportHeapSnapshotProgress):
+
+2012-02-24  Brian Weinstein  <bweinstein@apple.com>
+
+        Add ProfileType and JavaScriptProfileType to Main.html, since later patches will depend on them.
+
+        More of <rdar://problem/10897473> Implement JavaScript profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/Main.html:
+
+2012-02-24  Brian Weinstein  <bweinstein@apple.com>
+
+        Make ProfileDataGridTree work with the changes to the new inspector.
+        
+        - Update the way formatted strings are created
+        - Changes the settings to use the new inspector's syntax
+        - Remove the depedency on the linkifier
+
+        More of <rdar://problem/10897473> Implement JavaScript profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ProfileDataGridTree.js:
+        (WebInspector.ProfileDataGridNode.prototype.get data):
+        (WebInspector.ProfileDataGridNode.prototype.linkifyLocation):
+        (WebInspector.ProfileDataGridNode.prototype.createCell):
+
+2012-02-24  Brian Weinstein  <bweinstein@apple.com>
+
+        Bring in some specialized profile data grid components from open source.
+    
+        More of <rdar://problem/10897473> Implement JavaScript profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/BottomUpProfileDataGridTree.js: Added. Copied from open source.
+        * UserInterface/ProfileDataGridTree.js: Added. Copied from open source.
+        * UserInterface/TopDownProfileDataGridTree.js: Added. Copied from open source.
+        * UserInterface/Main.html: Add new files.
+
+2012-02-24  Brian Weinstein  <bweinstein@apple.com>
+
+        Add rules from open source for the profile view to JavaScriptProfileView.css.
+        
+        More of <rdar://problem/10897473> Implement JavaScript profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/JavaScriptProfileView.css: Added. Copied rules from open source.
+        * UserInterface/Main.html: Added file.
+
+2012-02-24  Brian Weinstein  <bweinstein@apple.com>
+
+        Clean up JavaScriptProfileView so it can be used in the new inspector.
+        
+        This patch:
+            - Removes the status bar buttons (adding a FIXME to bring back that functionality)
+            - Makes the class inherit from ContentView instead of just View
+            - Replaces *styleClass functions with classList.*
+            - Changes the settings to use the new inspector's syntax
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/JavaScriptProfileView.js:
+        (WebInspector.JavaScriptProfileView):
+        (WebInspector.JavaScriptProfileView.prototype._changeView):
+        (WebInspector.JavaScriptProfileView.prototype._percentClicked):
+        (WebInspector.JavaScriptProfileView.prototype._updatePercentButton):
+        (WebInspector.JavaScriptProfileView.prototype._focusClicked):
+        (WebInspector.JavaScriptProfileView.prototype._excludeClicked):
+        (WebInspector.JavaScriptProfileView.prototype._resetClicked):
+        (WebInspector.JavaScriptProfileView.prototype._dataGridNodeSelected):
+        (WebInspector.JavaScriptProfileView.prototype._dataGridNodeDeselected):
+        (WebInspector.JavaScriptProfileView.prototype._mouseDownInDataGrid):
+        * UserInterface/Main.html: Add JavaScriptProfileView.
+
+2012-02-24  Brian Weinstein  <bweinstein@apple.com>
+
+        Add a ProfileObject class, which just holds some data about profiles (type, title, uid, and whether or not
+        it is temporary).
+
+        More of <rdar://problem/10897473> Implement JavaScript profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ProfileObject.js: Added.
+        (WebInspector.ProfileObject):
+        (WebInspector.ProfileObject.prototype.constructor.WebInspector.ProfileObject.get typeId):
+        (WebInspector.ProfileObject.prototype.get title):
+        (WebInspector.ProfileObject.prototype.get uid):
+        (WebInspector.ProfileObject.prototype.get isTemporary):
+
+2012-02-22  Brian Weinstein  <bweinstein@apple.com>
+
+        Create a stub ProfileManager and add an initialize method.
+        
+        More of <rdar://problem/10897473> Implement JavaScript profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/Main.html: Add new file.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create a profile manager.
+        * UserInterface/ProfileManager.js: Added.
+        (WebInspector.ProfileManager):
+        (WebInspector.ProfileManager.prototype.constructor.WebInspector.ProfileManager.initialize):
+
+2012-02-20  Brian Weinstein  <bweinstein@apple.com>
+
+        Rename CPUProfile to JavaScriptProfile.
+        
+        More of <rdar://problem/10897473> Implement JavaScript profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/JavaScriptProfileType.js:
+        (WebInspector.JavaScriptProfileType):
+        (WebInspector.JavaScriptProfileType.prototype.createView):
+        * UserInterface/JavaScriptProfileView.js:
+        (WebInspector.JavaScriptProfileView.prototype._changeView.set else):
+
+2012-02-20  Brian Weinstein  <bweinstein@apple.com>
+
+        Bring in some files from open source.
+        
+        Start of <rdar://problem/10897473> Implement JavaScript profiling in the new Web Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/JavaScriptProfileType.js: Added. Copied from open source.
+        * UserInterface/JavaScriptProfileView.js: Added. Copied from open source.
+        * UserInterface/ProfileType.js: Added. Copied from open source.
+
+2012-02-26  Timothy Hatcher  <timothy@apple.com>
+
+        Use insertionIndexForObjectInListSortedByFunction to efficiently build the timeline data grids.
+
+        Calling _sortCurrentDataGrid for each update was expensive since it removes all the rows and reinserts them.
+
+        Part of: <rdar://problem/10319553&10319567&10319571>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGridNode.prototype._attach): Fix a bug that prevented inserting the row in the right place.
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView.prototype._updatePendingRecords): Use insertionIndexForObjectInListSortedByFunction
+        when there is a sortColumnIdentifier. Don't call _sortCurrentDataGrid anymore.
+        (WebInspector.TimelinesContentView.prototype._sortCurrentDataGrid): Use _sortComparator.
+        (WebInspector.TimelinesContentView.prototype._sortComparator): Added. Factored out of _sortCurrentDataGrid.
+
+2012-02-26  Timothy Hatcher  <timothy@apple.com>
+
+        Show recoding status in the Instrument sidebar and allow manually starting and stopping recording.
+
+        Part of: <rdar://problem/10319553&10319567&10319571>
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/Images/Recording.png: Added.
+        * UserInterface/Images/Recording@2x.png: Added.
+        * UserInterface/Images/RecordingHovered.png: Added.
+        * UserInterface/Images/RecordingHovered@2x.png: Added.
+        * UserInterface/Images/RecordingStopped.png: Added.
+        * UserInterface/Images/RecordingStopped@2x.png: Added.
+        * UserInterface/InstrumentSidebarPanel.css:
+        (.sidebar > .panel.instrument > .title-bar):
+        (.sidebar > .panel.instrument > .title-bar.timelines > .record-glyph):
+        (.sidebar > .panel.instrument > .title-bar.timelines > .record-glyph.recording):
+        (.sidebar > .panel.instrument > .title-bar.timelines > .record-glyph:hover):
+        (.sidebar > .panel.instrument > .title-bar.timelines > .record-glyph.recording:hover):
+        (.sidebar > .panel.instrument > .title-bar.timelines > .record-glyph.forced):
+        (.sidebar > .panel.instrument > .title-bar.timelines > .record-glyph.recording.forced):
+        (.sidebar > .panel.instrument > .title-bar.timelines > .record-status):
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel): Create glyph and status elements.
+        (WebInspector.InstrumentSidebarPanel.prototype._recordingStarted): Added. Update glyph and status.
+        (WebInspector.InstrumentSidebarPanel.prototype._recordingStopped): Added. Ditto.
+        (WebInspector.InstrumentSidebarPanel.prototype._recordGlyphMousedOver): Added. Clear forced class.
+        Update status to reflect what it will be if the button is clicked.
+        (WebInspector.InstrumentSidebarPanel.prototype._recordGlyphMousedOut): Added. Restore current status.
+        (WebInspector.InstrumentSidebarPanel.prototype._recordGlyphClicked): Added. Add forced class to prevent
+        the glyph from showing a confusing status after click.
+
+2012-02-26  Timothy Hatcher  <timothy@apple.com>
+
+        Draw the overview bar graph at the top of the timeline content view.
+
+        Part of: <rdar://problem/10319553&10319567&10319571>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TimelineOverview.css:
+        (.timeline-overview > .timeline > .bar-container):
+        (.timeline-overview > .timeline .bar):
+        (.timeline-overview > .timeline .bar.waiting):
+        (.timeline-overview > .timeline.timeline-record-type-network .bar):
+        (.timeline-overview > .timeline.timeline-record-type-layout .bar):
+        (.timeline-overview > .timeline.timeline-record-type-script .bar):
+        * UserInterface/TimelineOverview.js:
+        (WebInspector.TimelineOverview): Create a bar container in each timeline.
+        (WebInspector.TimelineOverview.prototype.update): Call _updateTimelineBars for each type.
+        (WebInspector.TimelineOverview.prototype._updateTimelineBars): Added.
+        (WebInspector.TimelineOverview.prototype._updateTimelineBars.computePercentages): Compute percentages
+        for startTime and endTime.
+        (WebInspector.TimelineOverview.prototype._updateTimelineBars.computeActivePercentages): Compute percentages
+        for endTime and the start of activeDuration.
+        (WebInspector.TimelineOverview.prototype._updateTimelineBars.addBar): Create a bar and append it.
+        (WebInspector.TimelineOverview.prototype._updateTimelineBars.createBars): Iterate over the records and find
+        the distribution on the graph.
+
+2012-02-26  Timothy Hatcher  <timothy@apple.com>
+
+        Improve auto recording of timeline data so it stops at a reasonable time instead of a fixed 30 seconds.
+
+        Recording will now stop when there has been 1 second of dead time after the load event fires. Or after a
+        maximum of 10 seconds after the load event fires. This works well for a number of large and small sites.
+
+        Part of: <rdar://problem/10319553&10319567&10319571>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager): Initialize _domContentLoadedEventTime and _loadEventTime. 
+        (WebInspector.TimelineManager.prototype.get mainFrameLoadEventTime): Added.
+        (WebInspector.TimelineManager.prototype.get mainFrameDOMContentLoadedEventTime): Added.
+        (WebInspector.TimelineManager.prototype.startRecording): Initialize _domContentLoadedEventTime and _loadEventTime.
+        (WebInspector.TimelineManager.prototype.stopRecording): Clear _deadTimeTimeout.
+        (WebInspector.TimelineManager.prototype.eventRecorded.processRecord): Process the MarkLoad and MarkDOMContent records.
+        Call _stopAutoRecordingSoon for MarkLoad.
+        (WebInspector.TimelineManager.prototype._addRecord): Call _resetAutoRecordingDeadTimeTimeout.
+        (WebInspector.TimelineManager.prototype._startAutoRecording): Removed timeout for stopRecording.
+        (WebInspector.TimelineManager.prototype._stopAutoRecordingSoon): Added. Start a timeout for the maximum time. Also
+        call _resetAutoRecordingDeadTimeTimeout to start watching dead time.
+        (WebInspector.TimelineManager.prototype._resetAutoRecordingDeadTimeTimeout): Added. Reset the dead time timeout.
+
+2012-02-26  Timothy Hatcher  <timothy@apple.com>
+
+        Draw the times in the timeline overview header.
+
+        Part of: <rdar://problem/10319553&10319567&10319571>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/InstrumentSidebarPanel.css:
+        (.sidebar > .panel.instrument > .navigation-sidebar-panel-content-tree-outline.timelines .item:not(:first-child):not(.selected)): Reduce divider opacity.
+        * UserInterface/TimelineOverview.css:
+        (.timeline-overview > .header): Added.
+        (.timeline-overview > .header > .divider): Added.
+        (.timeline-overview > .header > .divider:last-child): Added.
+        (.timeline-overview > .header > .divider > .label): Added.
+        (.timeline-overview > .header > .divider:first-child > .label): Added.
+        (.timeline-overview > .timeline): Added.
+        (.timeline-overview > .timeline:not(:first-child)): Added.
+        * UserInterface/TimelineOverview.js:
+        (WebInspector.TimelineOverview): Create the header element and timeline rows.
+        (WebInspector.TimelineOverview.prototype.get recordTypes): Added.
+        (WebInspector.TimelineOverview.prototype.clear): Added. Reset the minimum and maximum boundaries. Call _updateHeaderTimes.
+        (WebInspector.TimelineOverview.prototype.update): Added. Find the minimum and maximum times. Call _updateHeaderTimes.
+        (WebInspector.TimelineOverview.prototype.updateLayout): Added. Call _updateHeaderTimes.
+        (WebInspector.TimelineOverview.prototype._updateHeaderTimes): Added. Update the dividers and labels.
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView.prototype.updateLayout): Call updateLayout on the timeline overview.
+        (WebInspector.TimelinesContentView.prototype.timelineOverviewRecordsWithType): Added.
+        (WebInspector.TimelinesContentView.prototype._addRecordToDataGrid): Don't return early, call _updatePendingRecordsSoon.
+        (WebInspector.TimelinesContentView.prototype._updatePendingRecordsSoon): Return early if not visible.
+        (WebInspector.TimelinesContentView.prototype._updatePendingRecords): Call update on the timeline overview. Fix if statement.
+        (WebInspector.TimelinesContentView.prototype._scheduleGridNodeForRefresh): Don't return early, call _updatePendingRecordsSoon.
+
+2012-02-25  Timothy Hatcher  <timothy@apple.com>
+
+        Add the start of WebInspector.TimelineOverview, the overview graph at the top of the timeline content view.
+
+        Part of: <rdar://problem/10319553&10319567&10319571>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Main.html:
+        * UserInterface/TimelineOverview.css: Added.
+        (.timeline-overview):
+        * UserInterface/TimelineOverview.js: Added.
+        (WebInspector.TimelineOverview):
+        (WebInspector.TimelineOverview.prototype.get element):
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .timeline-overview):
+        * UserInterface/TimelinesContentView.js:
+
+2012-02-25  Timothy Hatcher  <timothy@apple.com>
+
+        Add a way to jump to resource source code from the Network and Script timeline data grid.
+
+        Part of: <rdar://problem/10319553&10319567>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGrid): Remove capture on the click and mousedown events. This allows the go-to
+        to prevent row selection in the data grid.
+        * UserInterface/ImageUtilities.js:
+        (generateColoredImage): Added support for adjusting the alpha by multiplying.
+        (generateColoredImagesForCSS.generateImage): Pass along the fillColor alpha.
+        * UserInterface/Main.css:
+        (.go-to-arrow): Added.
+        (.go-to-arrow:active): Added.
+        (:focus .selected .go-to-arrow): Added.
+        (:focus .selected .go-to-arrow:active): Added.
+        * UserInterface/Main.js:
+        (WebInspector.createGoToArrowButton.stopPropagation): Added.
+        (WebInspector.createGoToArrowButton): Added. Generate the images and button element.
+        * UserInterface/ResourceTimelineDataGridNode.js:
+        (WebInspector.ResourceTimelineDataGridNode.prototype.createCellContent): Append a go-to button to the name column.
+        (WebInspector.ResourceTimelineDataGridNode.prototype._goToResource): Added. Show the resource.
+        * UserInterface/ScriptTimelineDataGridNode.js:
+        (WebInspector.ScriptTimelineDataGridNode.prototype.createCellContent): Append a go-to button to the resource column.
+        (WebInspector.ScriptTimelineDataGridNode.prototype._goToResource): Added. Show the resource and line.
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .data-grid td .go-to-arrow): Added. Float right, hidden by default
+        (.content-view.timelines > .data-grid tr:hover .go-to-arrow): Added. Show the button.
+
+2012-02-25  Timothy Hatcher  <timothy@apple.com>
+
+        Fix some exceptions that occurred when clicking on a resource in the Issues sidebar.
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView): Move _issues and _contentPopulated above the call to the ResourceContentView
+        constructor since addIssue needs them and ResourceContentView populates the issues.
+
+2012-02-25  Timothy Hatcher  <timothy@apple.com>
+
+        Share code for generating disclosure triangles so it can be used in other places.
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/DetailsSection.js:
+        (WebInspector.DetailsSection.prototype._generateDisclosureTrianglesIfNeeded): Use generateColoredImagesForCSS.
+        * UserInterface/ImageUtilities.js:
+        (generateColoredImagesForCSS): Added. Copied from NavigationSidebarPanel and made generic.
+        (generateColoredImagesForCSS.imageLoaded): Added.
+        (generateColoredImagesForCSS.generateImage): Added.
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel.prototype._generateDisclosureTrianglesIfNeeded): Use generateColoredImagesForCSS.
+
+2012-02-24  Timothy Hatcher  <timothy@apple.com>
+
+        Populate the Script data grid in the timeline content view.
+
+        Part of: <rdar://problem/10319567> Implement the Script instrument for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/Main.html: Included ScriptTimelineDataGridNode.js and ScriptTimelineRecord.js.
+        * UserInterface/ScriptTimelineDataGridNode.js: Added.
+        (WebInspector.ScriptTimelineDataGridNode):
+        (WebInspector.ScriptTimelineDataGridNode.prototype.get record):
+        (WebInspector.ScriptTimelineDataGridNode.prototype.get data):
+        (WebInspector.ScriptTimelineDataGridNode.prototype.createCellContent):
+        * UserInterface/ScriptTimelineRecord.js: Added.
+        (WebInspector.ScriptTimelineRecord):
+        (WebInspector.ScriptTimelineRecord.EventType.displayName):
+        (WebInspector.ScriptTimelineRecord.prototype.get eventType):
+        (WebInspector.ScriptTimelineRecord.prototype.get details):
+        (WebInspector.ScriptTimelineRecord.prototype.get resource):
+        (WebInspector.ScriptTimelineRecord.prototype.get lineNumber):
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype.eventRecorded.processRecord): Handle script record types.
+        (WebInspector.TimelineManager.prototype.eventRecorded): Pass along the parent record to processRecord.
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .data-grid .resource-column .icon): Updated the selector to work with name-column and resource-column.
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView):
+        (WebInspector.TimelinesContentView.prototype._sortCurrentDataGrid.comparator): Handle WebInspector.Resource values.
+        (WebInspector.TimelinesContentView.prototype._createDataGridNodeForRecord): Create a ScriptTimelineDataGridNode.
+
+2012-02-24  Timothy Hatcher  <timothy@apple.com>
+
+        Populate the Layout & Rendering data grid in timeline content view.
+
+        Part of: <rdar://problem/10319571> Implement the Rendering instrument for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/LayoutTimelineDataGridNode.js: Added.
+        (WebInspector.LayoutTimelineDataGridNode):
+        (WebInspector.LayoutTimelineDataGridNode.prototype.get record):
+        (WebInspector.LayoutTimelineDataGridNode.prototype.get data):
+        (WebInspector.LayoutTimelineDataGridNode.prototype.createCellContent):
+        * UserInterface/LayoutTimelineRecord.js: Added.
+        (WebInspector.LayoutTimelineRecord):
+        (WebInspector.LayoutTimelineRecord.EventType.displayName):
+        (WebInspector.LayoutTimelineRecord.prototype.get eventType):
+        (WebInspector.LayoutTimelineRecord.prototype.get x):
+        (WebInspector.LayoutTimelineRecord.prototype.get y):
+        (WebInspector.LayoutTimelineRecord.prototype.get width):
+        (WebInspector.LayoutTimelineRecord.prototype.get height):
+        (WebInspector.LayoutTimelineRecord.prototype.get area):
+        * UserInterface/Main.html: Included LayoutTimelineRecord.js and LayoutTimelineDataGridNode.js.
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype.eventRecorded.processRecord): Create record objects for each type.
+        (WebInspector.TimelineManager.prototype.eventRecorded): Iterate over the records.
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView): Create columns for the Layout data grid.
+        (WebInspector.TimelinesContentView.prototype._createDataGridNodeForRecord): Create a LayoutTimelineDataGridNode.
+
+2012-02-22  Timothy Hatcher  <timothy@apple.com>
+
+        Adjust the output of Number.secondsToString to give higher resolution for < 100ms.
+
+        Part of: <rdar://problem/10319553> Implement the Network instrument for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/Utilities.js:
+        (Number.secondsToString): Show more decimal points for < 100ms. Reduce the number of
+        decimal points in higher resolution mode as well.
+
+2012-02-22  Timothy Hatcher  <timothy@apple.com>
+
+        Support sorting the data grids in the timeline view.
+
+        Part of: <rdar://problem/10319553&10319567&10319571>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DataGrid.css:
+        (.data-grid th.sort-descending > div): Add some padding so the sort direction arrow does not overlap the text.
+        * UserInterface/Resource.js:
+        (WebInspector.Resource): Initialize _cached so it can sort properly.
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView): Add event listeners for sorting changes.
+        (WebInspector.TimelinesContentView.prototype._updatePendingRecords): Call _sortCurrentDataGrid.
+        (WebInspector.TimelinesContentView.prototype._sortCurrentDataGrid): Added.
+        (WebInspector.TimelinesContentView.prototype._sortCurrentDataGrid.comparator): Added.
+
+2012-02-22  Timothy Hatcher  <timothy@apple.com>
+
+        Separate data from presentation in ResourceTimelineDataGridNode to make it easy to sort using the raw data.
+
+        Part of: <rdar://problem/10319553> Implement the Network instrument for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGridNode.prototype.createCell): Make a text node if the content isn't a Node.
+        (WebInspector.DataGridNode.prototype.createCellContent): Return raw data. The text node is made by the caller.
+        * UserInterface/ResourceTimelineDataGridNode.js:
+        (WebInspector.ResourceTimelineDataGridNode.prototype.get data): Return the raw data instead of formatted data.
+        (WebInspector.ResourceTimelineDataGridNode.prototype.createCellContent): Format the data based on the column.
+
+2012-02-22  Timothy Hatcher  <timothy@apple.com>
+
+        Cause network records to update in batches with any new records being added to reduce flashing.
+
+        Part of: <rdar://problem/10319553> Implement the Network instrument for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ResourceTimelineDataGridNode.js:
+        (WebInspector.ResourceTimelineDataGridNode): Update event listeners to call _needsRefresh.
+        (WebInspector.ResourceTimelineDataGridNode.prototype.get record): Added.
+        (WebInspector.ResourceTimelineDataGridNode.prototype.refresh): Remove timeout check.
+        (WebInspector.ResourceTimelineDataGridNode.prototype._needsRefresh): Renamed from _refreshSoon. Fire
+        NeedsRefresh event.
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView): Add event listener for NeedsRefresh.
+        (WebInspector.TimelinesContentView.prototype.showTimelineForRecordType): Call _updatePendingRecords.
+        (WebInspector.TimelinesContentView.prototype.shown): Call _updatePendingRecords.
+        (WebInspector.TimelinesContentView.prototype._addRecordToDataGrid): Call _updatePendingRecordsSoon.
+        (WebInspector.TimelinesContentView.prototype._updatePendingRecordsSoon): Renamed from _addPendingRecordsSoon.
+        (WebInspector.TimelinesContentView.prototype._updatePendingRecords): Renamed from _addPendingRecords. Also
+        refresh pending grid nodes.
+        (WebInspector.TimelinesContentView.prototype._scheduleGridNodeForRefresh): Added. Store the grid node and
+        call _updatePendingRecordsSoon.
+
+2012-02-22  Timothy Hatcher  <timothy@apple.com>
+
+        Properly record main resources for all frames in the Network timeline.
+
+        Part of: <rdar://problem/10319553> Implement the Network instrument for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager): Change MainFrameDidChange listener to _mainResourceDidChange.
+        (WebInspector.TimelineManager.prototype._startAutoRecording): Return true if recording started.
+        (WebInspector.TimelineManager.prototype._mainResourceDidChange): Added. Call _startAutoRecording,
+        return early if true. Add the main resource as a record if it isn't the auto recording resource.
+
+2012-02-22  Timothy Hatcher  <timothy@apple.com>
+
+        Always clear records and restart recording when navigating to a new page.
+
+        Part of: <rdar://problem/10319553&10319567&10319571>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager.prototype.stopRecording): Clear _autoRecordingMainResourceRequestIdentifier.
+        (WebInspector.TimelineManager.prototype._startAutoRecording): Set _autoRecordingMainResourceRequestIdentifier.
+        Don't return early if _autoRecordingMainResourceRequestIdentifier.
+
+2012-02-22  Timothy Hatcher  <timothy@apple.com>
+
+        Show resource icons and failed loads in the Network data grid.
+
+        Part of: <rdar://problem/10319553> Implement the Network instrument for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGridNode.prototype.createCell): Call createCellContent.
+        (WebInspector.DataGridNode.prototype.createCellContent): Added. Make a text node.
+        * UserInterface/ResourceTimelineDataGridNode.js:
+        (WebInspector.ResourceTimelineDataGridNode.prototype.createCellContent): Added. Create a fragment
+        for the name column with an icon. Add the error class to all cells for failed loads.
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .data-grid .name-column .icon): Added.
+        (.content-view.timelines > .data-grid td.error): Added. Color red.
+        (.content-view.timelines > .data-grid tr.selected td.error): Added. Color white.
+
+2012-02-21  Timothy Hatcher  <timothy@apple.com>
+
+        Start populating the Network timeline data grid with resource load information.
+
+        Part of: <rdar://problem/10319553> Implement the Network instrument for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/Main.html: Included ResourceTimelineDataGridNode.js.
+        * UserInterface/Resource.js:
+        (WebInspector.Resource): Initialize _responseHeaders to avoid an exception.
+        (WebInspector.Resource.prototype.get statusCode): Added.
+        (WebInspector.Resource.prototype.get statusText): Added.
+        * UserInterface/ResourceTimelineDataGridNode.js: Added.
+        (WebInspector.ResourceTimelineDataGridNode):
+        (WebInspector.ResourceTimelineDataGridNode.prototype.get data):
+        * UserInterface/ResourceTimelineRecord.js:
+        (WebInspector.ResourceTimelineRecord): Add event listener for TimestampsDidChange.
+        (WebInspector.ResourceTimelineRecord.prototype._dispatchUpdatedEvent): Added. Fire Updated event.
+        * UserInterface/TimelinesContentView.css:
+        (.content-view.timelines > .data-grid td:last-child):
+        (.content-view.timelines > .data-grid td):
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView): Create the Network data grid headers and populate _pendingRecords.
+        (WebInspector.TimelinesContentView.prototype.showTimelineForRecordType): Call updateWidths
+        and _addPendingRecords.
+        (WebInspector.TimelinesContentView.prototype.updateLayout): Added.
+        (WebInspector.TimelinesContentView.prototype.shown): Call _addPendingRecords.
+        (WebInspector.TimelinesContentView.prototype._recordingStarted): Added.
+        (WebInspector.TimelinesContentView.prototype._recordAdded): Added.
+        (WebInspector.TimelinesContentView.prototype._addRecordToDataGrid): Added.
+        (WebInspector.TimelinesContentView.prototype._addPendingRecordsSoon): Added.
+        (WebInspector.TimelinesContentView.prototype._addPendingRecords): Added.
+        (WebInspector.TimelinesContentView.prototype._createDataGridNodeForRecord): Added.
+        * UserInterface/Utilities.js:
+        (Number.secondsToString): Added. Copied from open source.
+
+2012-02-21  Timothy Hatcher  <timothy@apple.com>
+
+        Make showing a timeline switch to a different data grid and reflect the selected timeline
+        in the sidebar and the navigation bar.
+
+        Also make the timeline show when reopening the inspector when it was showing last time.
+
+        Part of: <rdar://problem/10319553&10319567&10319571>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel): Don't store the tree elements on this. Create a map of tree elements
+        based on the the record type.
+        (WebInspector.InstrumentSidebarPanel.prototype.showTimeline): Added.
+        (WebInspector.InstrumentSidebarPanel.prototype.showTimelineForRecordType): Added. Select the tree element.
+        (WebInspector.InstrumentSidebarPanel.prototype.cookieForContentView): Added.
+        (WebInspector.InstrumentSidebarPanel.prototype.showContentViewForCookie): Added.
+        (WebInspector.InstrumentSidebarPanel.prototype._timelinesTreeElementSelected):
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView.createPathComponent): Added.
+        (WebInspector.TimelinesContentView): Create the path components and test data grids.
+        (WebInspector.TimelinesContentView.prototype.showTimelineForRecordType): Added. Show the data grid. Update
+        the path component. Tell the sidebar panel to select the right tree element.
+        (WebInspector.TimelinesContentView.prototype.get selectionPathComponents): Added.
+        (WebInspector.TimelinesContentView.prototype.shown): Added.
+        (WebInspector.TimelinesContentView.prototype._pathComponentSelected): Added.
+
+2012-02-21  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.TimelineRecord and WebInspector.ResourceTimelineRecord. Start recording Network records on load.
+
+        Part of: <rdar://problem/10319553&10319567&10319571>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Main.html:
+        * UserInterface/ResourceTimelineRecord.js: Added.
+        (WebInspector.ResourceTimelineRecord):
+        (WebInspector.ResourceTimelineRecord.prototype.get resource):
+        (WebInspector.ResourceTimelineRecord.prototype.get startTime):
+        (WebInspector.ResourceTimelineRecord.prototype.get endTime):
+        (WebInspector.ResourceTimelineRecord.prototype.get waitingDuration):
+        (WebInspector.ResourceTimelineRecord.prototype.get activeDuration):
+        * UserInterface/TimelineManager.js:
+        (WebInspector.TimelineManager): Listen for Frame events. Initialize properties.
+        (WebInspector.TimelineManager.prototype.get recording): Added.
+        (WebInspector.TimelineManager.prototype.get records): Added.
+        (WebInspector.TimelineManager.prototype.get recordsWithType): Added.
+        (WebInspector.TimelineManager.prototype.startRecording): Clear records. Dispatch RecordingStarted event.
+        (WebInspector.TimelineManager.prototype.stopRecording): Clear timeout. Dispatch RecordingStopped event.
+        (WebInspector.TimelineManager.prototype._addRecord): Added. Adds record and dispatches RecordAdded event.
+        (WebInspector.TimelineManager.prototype._startAutoRecording): Added. Start recording and 
+        (WebInspector.TimelineManager.prototype._resourceWasAdded): Added. Create a record.
+        * UserInterface/TimelineRecord.js: Added.
+        (WebInspector.TimelineRecord):
+        (WebInspector.TimelineRecord.prototype.get startTime):
+        (WebInspector.TimelineRecord.prototype.get endTime):
+        (WebInspector.TimelineRecord.prototype.get duration):
+        (WebInspector.TimelineRecord.prototype.get waitingDuration):
+        (WebInspector.TimelineRecord.prototype.get activeDuration):
+
+2012-02-20  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.TimelineObserver and WebInspector.TimelineManager.
+
+        Part of: <rdar://problem/10319553&10319567&10319571>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Main.html: Included TimelineManager.js and TimelineObserver.js.
+        * UserInterface/Main.js: Create an instance of TimelineManager.
+        (WebInspector.contentLoaded):
+        * UserInterface/TimelineManager.js: Added.
+        (WebInspector.TimelineManager):
+        (WebInspector.TimelineManager.prototype.startRecording):
+        (WebInspector.TimelineManager.prototype.stopRecording):
+        (WebInspector.TimelineManager.prototype.eventRecorded):
+        * UserInterface/TimelineObserver.js: Added.
+        (WebInspector.TimelineObserver):
+        (WebInspector.TimelineObserver.prototype.eventRecorded): Call TimelineManager.
+
+2012-02-20  Timothy Hatcher  <timothy@apple.com>
+
+        Change the names for the Instrument timelines based on feedback from Adam.
+
+        Now: "Network Requests", "Layout & Rendering" and "JavaScript & Events".
+
+        Reviewed by Adam Roben.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel): Update the tree element titles.
+
+2012-02-19  Timothy Hatcher  <timothy@apple.com>
+
+        Record network timestamps on WebInspector.Resource along with HTTP response status and sizes.
+
+        Needed for: <rdar://problem/10319553> Implement the Network instrument for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWillBeSent): Added timestamp parameter.
+        (WebInspector.FrameResourceManager.prototype.markResourceRequestAsServedFromMemoryCache): Added.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWasServedFromMemoryCache): Added timestamp parameter.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidReceiveResponse): Ditto.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidReceiveData): Added.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidFinishLoading): Added timestamp parameter.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidFailLoading): Ditto.
+        (WebInspector.FrameResourceManager.prototype._addNewResourceToFrame): Ditto.
+        * UserInterface/NetworkObserver.js:
+        (WebInspector.NetworkObserver.prototype.requestWillBeSent): Pass along timestamp.
+        (WebInspector.NetworkObserver.prototype.requestServedFromCache): Call markResourceRequestAsServedFromMemoryCache.
+        (WebInspector.NetworkObserver.prototype.responseReceived): Pass along timestamp.
+        (WebInspector.NetworkObserver.prototype.dataReceived): Call resourceRequestDidReceiveData.
+        (WebInspector.NetworkObserver.prototype.loadingFinished): Pass along timestamp.
+        (WebInspector.NetworkObserver.prototype.loadingFailed): Ditto.
+        (WebInspector.NetworkObserver.prototype.requestServedFromMemoryCache): Ditto.
+        * UserInterface/Resource.js:
+        (WebInspector.Resource): Added timestamp parameter.
+        (WebInspector.Resource.prototype.get requestSentTimestamp): Added.
+        (WebInspector.Resource.prototype.get lastRedirectReceivedTimestamp): Added.
+        (WebInspector.Resource.prototype.get responseReceivedTimestamp): Added.
+        (WebInspector.Resource.prototype.get lastDataReceivedTimestamp): Added.
+        (WebInspector.Resource.prototype.get finishedOrFailedTimestamp): Added.
+        (WebInspector.Resource.prototype.get duration): Added.
+        (WebInspector.Resource.prototype.get latency): Added.
+        (WebInspector.Resource.prototype.get receiveDuration): Added.
+        (WebInspector.Resource.prototype.get cached): Added.
+        (WebInspector.Resource.prototype.get size): Added.
+        (WebInspector.Resource.prototype.get transferSize): Added.
+        (WebInspector.Resource.prototype.updateForRedirectResponse): Added timestamp parameter.
+        (WebInspector.Resource.prototype.updateForResponse): Ditto.
+        (WebInspector.Resource.prototype.increaseSize): Added.
+        (WebInspector.Resource.prototype.increaseTransferSize): Added.
+        (WebInspector.Resource.prototype.markAsCached): Added.
+        (WebInspector.Resource.prototype.markAsFinished): Added timestamp parameter.
+        (WebInspector.Resource.prototype.markAsFailed): Ditto.
+
+2012-02-19  Timothy Hatcher  <timothy@apple.com>
+
+        Show empty content messages for no search results, no recorded profiles and no storage.
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/InstrumentSidebarPanel.css:
+        (.sidebar > .panel.instrument > .empty-content-placeholder): Position with the content.
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel): Call updateEmptyContentPlaceholder.
+        * UserInterface/NavigationSidebarPanel.css:
+        (.sidebar > .panel.navigation > .empty-content-placeholder): Use a flex box to center the message.
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel.prototype.updateEmptyContentPlaceholder): Added. Helper.
+        (WebInspector.NavigationSidebarPanel.prototype._checkForEmptyFilterResults): Set and unset _emptyFilterResults.
+        * UserInterface/SearchSidebarPanel.css:
+        (.sidebar > .panel.search > .empty-content-placeholder): Position with the content.
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel.performSearch.updateEmptyContentPlaceholderSoon): Added.
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel.performSearch.updateEmptyContentPlaceholder): Added.
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel.performSearch.resourcesCallback.resourceCallback): Call
+        updateEmptyContentPlaceholderSoon before any return.
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel.performSearch.resourcesCallback): Ditto.
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel.performSearch.domCallback.domSearchResults): Ditto.
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel.performSearch.domCallback): Ditto.
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel): Call _updateEmptyContentPlaceholder.
+        (WebInspector.StorageSidebarPanel.prototype._updateEmptyContentPlaceholder): Added.
+        (WebInspector.StorageSidebarPanel.prototype._addChild): Call _updateEmptyContentPlaceholder.
+        (WebInspector.StorageSidebarPanel.prototype._storageCleared): Call _updateEmptyContentPlaceholder.
+
+2012-02-19  Timothy Hatcher  <timothy@apple.com>
+
+        Make DataGrid have a custom style in the timelines content view.
+
+        Larger headers with matching gradient to the sidebar panel. Also larger rows with a grey alternating row color.
+
+        Part of: <rdar://problem/10319553&10319567&10319571>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Main.html:
+        * UserInterface/TimelinesContentView.css: Added.
+        (.content-view.timelines > .data-grid):
+        (.content-view.timelines > .data-grid th):
+        (.content-view.timelines > .data-grid th:not(:last-child)):
+        (.content-view.timelines > .data-grid th.sortable:active):
+        (.content-view.timelines > .data-grid th.sort-descending):
+        (.content-view.timelines > .data-grid .data-container):
+        (.content-view.timelines > .data-grid table.data):
+        (.content-view.timelines > .data-grid td):
+        (.content-view.timelines > .data-grid td:not(:last-child)):
+        * UserInterface/TimelinesContentView.js:
+        (WebInspector.TimelinesContentView): Create a dummy DataGrid for position and style testing.
+
+2012-02-19  Timothy Hatcher  <timothy@apple.com>
+
+        Add an empty content view for the Instrument sidebar timelines.
+
+        Part of: <rdar://problem/10318728> Implement the Instrument sidebar for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView): Added check for TimelinesObject.
+        (WebInspector.ContentView.isViewable): Added check for TimelinesObject.
+        * UserInterface/Images/Stopwatch.png: Added.
+        * UserInterface/Images/Stopwatch@2x.png: Added.
+        * UserInterface/InstrumentIcons.css:
+        (.stopwatch-icon .icon):
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel): Create the _timelinesElement and an instance of TimelinesObject.
+        (WebInspector.InstrumentSidebarPanel.prototype.treeElementForRepresentedObject): Added.
+        (WebInspector.InstrumentSidebarPanel.prototype._timelinesTreeElementSelected): Added.
+        * UserInterface/Main.html: Included TimelinesContentView.js and TimelinesObject.js.
+        * UserInterface/Main.js:
+        (WebInspector.sidebarPanelForRepresentedObject): Added check for TimelinesObject.
+        * UserInterface/TimelinesContentView.js: Added.
+        (WebInspector.TimelinesContentView):
+        * UserInterface/TimelinesObject.js: Added.
+        (WebInspector.TimelinesObject):
+
+2012-02-18  Timothy Hatcher  <timothy@apple.com>
+
+        Start implementing the user interface for the Instrument sidebar panel.
+
+        This adds the Loading, Rendering and Scripting tree elements to the top of the sidebar.
+
+        Part of: <rdar://problem/10318728> Implement the Instrument sidebar for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/Images/Colors.png: Added.
+        * UserInterface/Images/Colors@2x.png: Added.
+        * UserInterface/Images/Network.png: Added.
+        * UserInterface/Images/Network@2x.png: Added.
+        * UserInterface/Images/Script.png: Added.
+        * UserInterface/Images/Script@2x.png: Added.
+        * UserInterface/InstrumentIcons.css: Added.
+        (.network-icon .icon):
+        (.colors-icon .icon):
+        (.script-icon .icon):
+        * UserInterface/InstrumentSidebarPanel.css: Added.
+        (.sidebar > .panel.instrument > .title-bar):
+        (.sidebar > .panel.instrument > .title-bar.timelines):
+        (.sidebar > .panel.instrument > .navigation-sidebar-panel-content-tree-outline.timelines):
+        (.sidebar > .panel.instrument > .navigation-sidebar-panel-content-tree-outline.timelines .item:not(:first-child):not(.selected)):
+        (.sidebar > .panel.instrument > .navigation-sidebar-panel-content-tree-outline.timelines .item.selected + .item):
+        (.sidebar > .panel.instrument > .title-bar.profiles):
+        (.sidebar > .panel.instrument > .content):
+        * UserInterface/InstrumentSidebarPanel.js:
+        (WebInspector.InstrumentSidebarPanel): Create the title abrs and tree outline.
+        * UserInterface/Main.html: Included InstrumentSidebarPanel.css and InstrumentIcons.css.
+
+2012-02-18  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for hiding the disclosure triangle column for sidebar panels that don't have a hierarchy.
+
+        The only panel we have like this right now is Log, but Instrument will also use it.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel): Set HideDisclosureButtonsStyleClassName on the contentTreeOutlineElement.
+        * UserInterface/NavigationSidebarPanel.css:
+        (.navigation-sidebar-panel-content-tree-outline .item): Remove a margin-top that was pushing all items down
+        for no good reason.
+        (.navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons > .children): Added.
+        (.navigation-sidebar-panel-content-tree-outline > .children.hide-disclosure-buttons > .children): Added.
+        (.navigation-sidebar-panel-content-tree-outline:not(.hide-disclosure-buttons) .item:not(.parent) .icon): Added.
+        (.navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons .item .disclosure-button): Added.
+        * UserInterface/NavigationSidebarPanel.js:
+
+2012-02-18  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.InstrumentSidebarPanel.
+
+        Part of: <rdar://problem/10318728> Implement the Instrument sidebar for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/InstrumentSidebarPanel.js: Added.
+        (WebInspector.InstrumentSidebarPanel):
+        * UserInterface/Main.html: Included InstrumentSidebarPanel.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create an instance of InstrumentSidebarPanel.
+
+2012-02-20  Jeff Miller  <jeffm@apple.com>
+
+        Ignore files generated by Xcode inside WebInspectorUI.xcodeproj.
+
+        * WebInspectorUI.xcodeproj: Added property svn:ignore.
+
+2012-02-17  Timothy Hatcher  <timothy@apple.com>
+
+        Fix a couple of issues where settings were not being retrieved or stored.
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/Setting.js:
+        (WebInspector.Setting.prototype.get value): Make a copy of the default value so changes to object values don't modify the default value.
+        Switch a use of _name to _localStorageKey when checking if the key in in localStorage.
+        (WebInspector.Setting.prototype.set value): Use Object.shallowEqual to better check if objects are equal.
+        * UserInterface/Utilities.js:
+        (Object.defineProperty): Return early if a or b are null. null is an object, but Object.keys throws for null.
+
+2012-02-17  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an exception when using the Web Inspector with empty settings.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView.prototype._rootDOMNodeAvailable): Null check this._lastSelectedNodePathSetting.value
+        and this._lastSelectedNodePathSetting.value.path.
+
+2012-02-17  Timothy Hatcher  <timothy@apple.com>
+
+        Prefix the setting keys in localStorage with "com.apple.WebInspector".
+
+        The Web Inspector is loaded from a file url it share localStorage with other local files.
+        This prevents conflicting with another key.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Setting.js:
+        (WebInspector.Setting): Set _localStorageKey.
+        (WebInspector.Setting.prototype.get value): Use _localStorageKey.
+        (WebInspector.Setting.prototype.set value): Ditto.
+
+2012-02-17  Timothy Hatcher  <timothy@apple.com>
+
+        Cache setting values locally to avoid JSON and localStorage when the value doesn't change often.
+        This mimics r107953 from open source with some style cleanup.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Setting.js:
+        (WebInspector.Setting.prototype.get value): Return this._value if it exists.
+        (WebInspector.Setting.prototype.set value): Set _value.
+
+2012-02-16  Timothy Hatcher  <timothy@apple.com>
+
+        Don't store settings in localStorage with values equal to the default value.
+
+        Part of: <rdar://problem/10854042> Remember aspects of the user interface customization
+
+        Reviewed by Ada Chan.
+
+        * UserInterface/Setting.js:
+        (WebInspector.Setting.prototype.set value): Call removeItem if the value equals the default value.
+
+2012-02-17  Timothy Hatcher  <timothy@apple.com>
+
+        Remember the last selected DOM node between reloads and Inspector sessions.
+
+        Last part of: <rdar://problem/10854042> Remember aspects of the user interface customization
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView): Create the setting. Use _requestRootDOMNode.
+        (WebInspector.DOMTreeContentView.prototype._rootDOMNodeAvailable): Try to select the last DOM node
+        if the URL matches, otherwise just select the body or document element.
+        (WebInspector.DOMTreeContentView.prototype._rootDOMNodeAvailable.selectNode): Added.
+        (WebInspector.DOMTreeContentView.prototype._rootDOMNodeAvailable.selectLastSelectedNode): Added.
+        (WebInspector.DOMTreeContentView.prototype._rootDOMNodeInvalidated): Don't set rootDOMNode to null.
+        This minimizes DOM tree churn and better matches what the open source inspector does.
+        (WebInspector.DOMTreeContentView.prototype._requestRootDOMNode): Added helper.
+        (WebInspector.DOMTreeContentView.prototype._selectedNodeDidChange): Remember the selected node path.
+        * UserInterface/DOMTreeUpdater.js:
+        (WebInspector.DOMTreeUpdater.prototype._reset): Don't set rootDOMNode to null. DOMTreeContentView handles it.
+
+2012-02-17  Timothy Hatcher  <timothy@apple.com>
+
+        Minimize the number of times DOMTree's RootDOMNodeInvalidated event fires.
+
+        This was causing some DOM tree churn on reload. There is still some churn, but this helps.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMTree.js:
+        (WebInspector.DOMTree): Only add extra event listeners when not the main frame.
+        (WebInspector.DOMTree.prototype.get frame): Added for good measure, will be needed soon.
+        (WebInspector.DOMTree.prototype.requestRootDOMNode): Bump the request identifier.
+        (WebInspector.DOMTree.prototype.requestRootDOMNode.rootObjectAvailable): Check the request identifier.
+        (WebInspector.DOMTree.prototype.requestRootDOMNode.rootDOMNodeAvailable): Ditto.
+        (WebInspector.DOMTree.prototype.requestRootDOMNode.dispatchCallbacks): Ditto.
+        (WebInspector.DOMTree.prototype._nodeRemoved): Assert not the main frame.
+        (WebInspector.DOMTree.prototype._frameMainResourceDidChange): Ditto.
+
+2012-02-16  Timothy Hatcher  <timothy@apple.com>
+
+        Add support to the storage sidebar panel to restore the last content view.
+
+        Part of: <rdar://problem/10854042> Remember aspects of the user interface customization
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel.prototype.cookieForContentView): Added. Create a cookie based on the
+        type of the represented object.
+        (WebInspector.StorageSidebarPanel.prototype.showContentViewForCookie.finalizeCookieChecking): Walk all the tree
+        elements and match them based on type alone. So if you were looking at cookies on one site, and later open the
+        inspector on another site, the new site's cookies will show.
+        (WebInspector.StorageSidebarPanel.prototype.showContentViewForCookie): Set a timeout to call finalizeCookieChecking.
+        (WebInspector.StorageSidebarPanel.prototype._checkTreeElementAgainstPendingContentViewCookie): Added.
+        (WebInspector.StorageSidebarPanel.prototype._domStorageObjectWasAdded): Call _checkTreeElementAgainstPendingContentViewCookie.
+        (WebInspector.StorageSidebarPanel.prototype._databaseWasAdded): Ditto.
+        (WebInspector.StorageSidebarPanel.prototype._cookieStorageObjectWasAdded): Ditto.
+        (WebInspector.StorageSidebarPanel.prototype._frameManifestAdded): Ditto.
+        (WebInspector.StorageSidebarPanel.prototype._treeElementSelected): Style cleanup.
+
+2012-02-16  Timothy Hatcher  <timothy@apple.com>
+
+        Add support to the log sidebar panel to restore the last content view.
+
+        Part of: <rdar://problem/10854042> Remember aspects of the user interface customization
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel.prototype.cookieForContentView): Added.
+        (WebInspector.LogSidebarPanel.prototype.showContentViewForCookie): Added.
+
+2012-02-16  Timothy Hatcher  <timothy@apple.com>
+
+        Add support to the resource sidebar panel to restore the last content view and select the resource in the sidebar.
+
+        Part of: <rdar://problem/10854042> Remember aspects of the user interface customization
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.cookieForContentView): Added. Return a cookie with the resource URL.
+        (WebInspector.ResourceSidebarPanel.prototype.showContentViewForCookie): Added. Find the resource by URL and shows it.
+        (WebInspector.ResourceSidebarPanel.prototype.showSourceCodeForFrame): Cleaned up to match showContentViewForCookie.
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameDidChange): Call showContentViewForCookie if _cookieToShowWhenAvailable.
+        (WebInspector.ResourceSidebarPanel.prototype._frameWasAdded): Remove code that moved into showSourceCodeForFrame.
+
+2012-02-16  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for remembering the last content view so it can potentially be restored next session.
+        This requires each sidebar to supply a cookie and restore it on load. No sidebars support it yet.
+
+        Part of: <rdar://problem/10854042> Remember aspects of the user interface customization
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create setting objects for the responsible sidebar panel and cookie.
+        (WebInspector.sidebarPanelForRepresentedObject): Added. Broke out of contentBrowserTreeElementForRepresentedObject.
+        (WebInspector.contentBrowserTreeElementForRepresentedObject): Use sidebarPanelForRepresentedObject.
+        (WebInspector._updateCurrentContentViewCookie): Added. Asks the responsible sidebar panel for a cookie.
+        (WebInspector._contentBrowserRepresentedObjectsDidChange): Call _updateCurrentContentViewCookie.
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel.prototype.cookieForContentView): Added stub.
+        (WebInspector.NavigationSidebarPanel.prototype.showContentViewForCookie): Added. Ditto.
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar.prototype.removeSidebarPanel): Use findSidebarPanel.
+        (WebInspector.Sidebar.prototype.set selectedSidebarPanel): Ditto.
+        (WebInspector.Sidebar.prototype.findSidebarPanel): Renamed from _findSidebarPanel.
+
+2012-02-16  Timothy Hatcher  <timothy@apple.com>
+
+        Remember what view was last used for frames (DOM Tree or Source Code).
+
+        Part of: <rdar://problem/10854042> Remember aspects of the user interface customization
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView): Create a setting.
+        (WebInspector.FrameContentView.prototype.shown): Use the setting to call _showContentViewForIdentifier.
+        (WebInspector.FrameContentView.prototype._identifierForContentView): Added. Helper.
+        (WebInspector.FrameContentView.prototype._showContentViewForIdentifier): Set the setting value.
+
+2012-02-16  Timothy Hatcher  <timothy@apple.com>
+
+        If the left sidebar is collapsed, then show the dock buttons in the content browser navigation bar.
+
+        Reviewed by Adam Roben.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Make a static dockButtonDividerNavigationItem. Remove inserts for the buttons.
+        (WebInspector.updateDockedState): Call _updateDockNavigationItems.
+        (WebInspector._updateDockNavigationItems): Added. Shows the buttons in the right navigation bar based on
+        docked and left sidebar collapsed state.
+        (WebInspector._sidebarCollapsedStateDidChange): Call _updateDockNavigationItems.
+
+2012-02-16  Timothy Hatcher  <timothy@apple.com>
+
+        Add a null check in resourceForURL, since the mainFrame can be null if called early enough.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.resourceForURL): Null check mainFrame.
+
+2012-02-16  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.ContentBrowser.Event.CurrentContentViewDidChange.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser.prototype._currentContentViewDidChange): Fire the CurrentContentViewDidChange event.
+
+2012-02-16  Timothy Hatcher  <timothy@apple.com>
+
+        Remember the expanded state of frames and folders in the resource sidebar panel.
+
+        Part of: <rdar://problem/10854042> Remember aspects of the user interface customization
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/FrameTreeElement.js:
+        (WebInspector.FrameTreeElement): Call _updateExpandedSetting.
+        (WebInspector.FrameTreeElement.prototype.onexpand): Added. Set the expanded setting value.
+        (WebInspector.FrameTreeElement.prototype.oncollapse): Added. Set the expanded setting value.
+        (WebInspector.FrameTreeElement.prototype.removeChildren): Delete the folder tree elements.
+        (WebInspector.FrameTreeElement.prototype._updateExpandedSetting): Added. 
+        (WebInspector.FrameTreeElement.prototype._mainResourceDidChange): Change the expanded setting since the frame URL has changed.
+        (WebInspector.FrameTreeElement.prototype._addChildForRepresentedObject): Removed _shouldExpandWhenFirstChildIsAdded code.
+        (WebInspector.FrameTreeElement.prototype._parentTreeElementForRepresentedObject.createFolderTreeElement): Added.
+        Sets up the onexpand and oncollapse listeners and creates a expanded setting.
+        (WebInspector.FrameTreeElement.prototype._parentTreeElementForRepresentedObject): Use createFolderTreeElement.
+        (WebInspector.FrameTreeElement.prototype._folderTreeElementExpandedStateChange): Added. Set the expanded setting value.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameDidChange): Remove a call to expand, that is handled by FrameTreeElement now.
+
+2012-02-16  Timothy Hatcher  <timothy@apple.com>
+
+        Support expanding a TreeElement before it has children, so it will expand once the first child is added.
+
+        Needed for: <rdar://problem/10854042> Remember aspects of the user interface customization
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/TreeOutline.js:
+        (TreeOutline.prototype.appendChild): Call expand if this is the first child.
+        (TreeOutline.prototype.insertChild): Ditto.
+        (TreeElement.prototype.expand): Set the expanded flag even if there are no children.
+
+2012-02-16  Timothy Hatcher  <timothy@apple.com>
+
+        Use a hash of the URL instead of the whole URL for remembering the last page searched.
+
+        This way the URL isn't cluttering localStorage for size and privacy reasons.
+
+        Part of: <rdar://problem/10854042> Remember aspects of the user interface customization
+
+        Reviewed by Adam Roben.
+
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel.prototype.performSearch): Use hash when setting
+        the _lastSearchedPageSetting.value.
+        (WebInspector.SearchSidebarPanel.prototype._mainFrameDidChange): Use hash when comparing
+        with the _lastSearchedPageSetting.value.
+        * UserInterface/Utilities.js:
+        (String.prototype.hash): Added. Based on wtf/StringHasher.h (SuperFastHash) algorithm.
+
+2012-02-15  Timothy Hatcher  <timothy@apple.com>
+
+        Remember the search term and rerun the search when re-opening the inspector on the same page.
+
+        Part of: <rdar://problem/10854042> Remember aspects of the user interface customization
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel): Store the inputElement on the object and add an event
+        listener for the MainFrameChanged event. Create the setting objects and restore the search term.
+        (WebInspector.SearchSidebarPanel.prototype.performSearch): Broken out from _searchFieldChanged.
+        (WebInspector.SearchSidebarPanel.prototype._searchFieldChanged): Call performSearch.
+        (WebInspector.SearchSidebarPanel.prototype._mainFrameDidChange): Added. Call performSearch
+        if the frame change is the first and the page is the same as the last time.
+
+2012-02-15  Timothy Hatcher  <timothy@apple.com>
+
+        Remember the filter bar filters for each navigation sidebar panel.
+
+        Part of: <rdar://problem/10854042> Remember aspects of the user interface customization
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/FilterBar.js:
+        (WebInspector.FilterBar.prototype.set filters): Added.
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel): Create the filters setting.
+        (WebInspector.NavigationSidebarPanel.prototype._updateFilter): Set the filters setting.
+
+2012-02-15  Timothy Hatcher  <timothy@apple.com>
+
+        Remember the collapsed state of sections in the details sidebar.
+
+        Part of: <rdar://problem/10854042> Remember aspects of the user interface customization
+        (sidebar state, last view, etc.)
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/AppearanceDetailsSidebarPanel.js:
+        (WebInspector.AppearanceDetailsSidebarPanel): Give identifiers to DetailsSections.
+        * UserInterface/ApplicationCacheDetailsSidebarPanel.js:
+        (WebInspector.ApplicationCacheDetailsSidebarPanel): Give identifiers to DetailsSections.
+        * UserInterface/DOMNodeDetailsSidebarPanel.js:
+        (WebInspector.DOMNodeDetailsSidebarPanel): Give identifiers to DetailsSections.
+        * UserInterface/DetailsSection.js:
+        (WebInspector.DetailsSection): Create a collapsed setting. Set collapsed to the value of the setting.
+        (WebInspector.DetailsSection.prototype.get identifier): Added.
+        (WebInspector.DetailsSection.prototype.set collapsed): Update the collapsed setting.
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel): Give identifiers to DetailsSections.
+
+2012-02-15  Timothy Hatcher  <timothy@apple.com>
+
+        Remember the last selected navigation sidebar panel, the sidebar widths and their collapsed state.
+
+        <rdar://problem/10854042> Remember aspects of the user interface customization (sidebar state, last view, etc.)
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Listed for SidebarPanelSelected. Use _sidebarWidthDidChange for WidthDidChange.
+        Create setting objects for last selected navigation sidebar panel, the sidebar widths and their collapsed state.
+        (WebInspector._sidebarCollapsedStateDidChange): Update the collapsed settings.
+        (WebInspector._navigationSidebarPanelSelected): Added. Update the last selected navigation sidebar panel setting.
+        (WebInspector._sidebarWidthDidChange): Added. Update the width settings. Call _contentBrowserSizeDidChange.
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar.prototype.set width): Return early if the width is the same. This avoids sending events
+        if the width didn't change.
+        (WebInspector.Sidebar.prototype.set collapsed): Return early if the collapsed state is the same. This avoids
+        sending events if the collapsed state didn't change.
+
+2012-02-15  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.Setting from Open Source.
+
+        <rdar://problem/10854042> Remember aspects of the user interface customization (sidebar state, last view, etc.)
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Main.html: Included Setting.js.
+        * UserInterface/Setting.js: Added. Copied partially from OpenSource/Source/WebCore/inspector/front-end/Settings.js.
+        (WebInspector.Setting):
+        (WebInspector.Setting.prototype.get name):
+        (WebInspector.Setting.prototype.get value):
+        (WebInspector.Setting.prototype.set value):
+
+2012-02-14  Brian Weinstein  <bweinstein@apple.com>
+
+        <rdar://problem/10857306> Consider putting "Show Activity" menu item in Develop menu as mitigation for the old Activity window.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.showResources): Make the resources panel the selected panel, and make it not collapsed.
+
+2012-02-14  Timothy Hatcher  <timothy@apple.com>
+
+        Tail truncate the search result title so the tooltip does not get too large.
+
+        <rdar://problem/10843369> Web Inspector should impose limit on tooltip size to avoid insanely large tooltips
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/SearchResultTreeElement.js:
+        (WebInspector.SearchResultTreeElement.truncateAndHighlightTitle): Truncate the title at the end to 50 characters max.
+        Use \u2026 instead of the actual ellipsis character since UTF8 in source code makes me nervous.
+
+2012-02-14  Timothy Hatcher  <timothy@apple.com>
+
+        Show failed resources when first opening the Web Inspector.
+
+        This is the Safari side of the Open Source r107715.
+
+        Follow up to: <rdar://problem/10843653>
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype._createResource): Set the loaderId for good measure.
+        (WebInspector.FrameResourceManager.prototype._addFrameTreeFromFrameResourceTreePayload): Check for failed and canceled.
+
+2012-02-13  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10854052> Cmd-C (and Copy menu item) don't work for selected line in DOM Tree
+
+        Allow the current ContentView to handle a "copy" event.
+        If the ContentView implements handleCopyEvent and there is
+        no window selection, we send the copy event to the ContentView.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        (WebInspector._beforecopy):
+        (WebInspector._copy):
+        Add support for passing copy event to a ContentView implementing handleCopyEvent.
+
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView.prototype.handleCopyEvent):
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView.prototype.handleCopyEvent):
+        A DOMTreeContentView allows copying the current selected element.
+
+2012-02-13  Joseph Pecoraro  <pecoraro@apple.com>
+
+        <rdar://problem/10854052> Cmd-C (and Copy menu item) don't work for selected line in DOM Tree
+
+        Merge r105679 from Open Source's frontend to get the "Copy as HTML"
+        context menu working.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/DOMNode.js:
+        (WebInspector.DOMNode.prototype.copyNode):
+
+2012-02-13  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Make RemoteDebugger work on 10.7.3.
+
+        When the front-end is run on an earlier Lion system, such as
+        SULionDuchess in RemoteDebugger.app, it fails because
+        Function.prototype.bind is unavailable. Since this appears to be the
+        only deficiency at the moment, lets define it when its not available.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Main.html:
+        Move Utilities.js earlier.
+
+        * UserInterface/Utilities.js:
+        Provide a Function.prototype.bind implementation when unavailable.
+
+2012-02-13  Timothy Hatcher  <timothy@apple.com>
+
+        Make failed resources show up with red text in the sidebar and show an error message when selected.
+
+        <rdar://problem/10843653> Failed resources have no visible distinction in the new Web Inspector
+
+        Reviewed by Brian Weinstein.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/FontResourceContentView.js:
+        (WebInspector.FontResourceContentView.prototype.contentAvailable): Removed FIXME and resource parameter.
+        * UserInterface/GeneralTreeElement.js:
+        (WebInspector.GeneralTreeElement.prototype.addClassName): Added.
+        (WebInspector.GeneralTreeElement.prototype.removeClassName): Added.
+        * UserInterface/ImageResourceContentView.js:
+        (WebInspector.ImageResourceContentView.prototype.contentAvailable): Removed FIXME and resource parameter.
+        * UserInterface/Main.css:
+        (.message-text-view): Reduced the line-height and added some padding.
+        (.message-text-view.error): Changed the color of red to a ddarker shade.
+        (.message-text-view.error::before): Added. Show an error icon.
+        * UserInterface/Main.html:
+        * UserInterface/ResourceContentView.js:
+        (WebInspector.ResourceContentView): Added issue event listener and issue code from TextResourceContentView.
+        (WebInspector.ResourceContentView.prototype.contentAvailable): Removed resource parameter.
+        (WebInspector.ResourceContentView.prototype.addIssue): Added.
+        (WebInspector.ResourceContentView.prototype.closed): Remove issue event listener.
+        (WebInspector.ResourceContentView.prototype._contentAvailable): Added.
+        (WebInspector.ResourceContentView.prototype._issueWasAdded): Added.
+        * UserInterface/ResourceTreeElement.css: Added.
+        (.item.resource.failed): Color text red.
+        (.item.resource.failed .subtitle): Ditto.
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement): Add the resource style class.
+        (WebInspector.ResourceTreeElement.prototype._updateLoadingStatus): Add or remove the failed style class.
+        (WebInspector.ResourceTreeElement.prototype._typeDidChange): Use addClassName and removeClassName.
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView): Removed the issue code, it is now in ResourceContentView.
+        (WebInspector.TextResourceContentView.prototype.contentAvailable): Removed FIXME and resource parameter.
+        (WebInspector.TextResourceContentView.prototype.addIssue): Show a full error message if there is no content yet.
+
+2012-02-13  Timothy Hatcher  <timothy@apple.com>
+
+        Fix a bug where opening the Inspector while loading a page could cause a subresource that just finished loading
+        to be shown in the Inspector as the main resource.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.initialize): Set _waitingForMainFrameResourceTreePayload.
+        (WebInspector.FrameResourceManager.prototype.frameDidNavigate): Return early if _waitingForMainFrameResourceTreePayload.
+        (WebInspector.FrameResourceManager.prototype.frameDidDetach): Ditto.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWillBeSent): Ditto.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWasServedFromMemoryCache): Ditto.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidReceiveResponse): Ditto.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidFinishLoading): Ditto.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidFailLoading): Ditto.
+        (WebInspector.FrameResourceManager.prototype._addNewResourceToFrame): Ditto.
+        (WebInspector.FrameResourceManager.prototype._addResourceToFrame): Ditto.
+        (WebInspector.FrameResourceManager.prototype._processMainFrameResourceTreePayload): Delete _waitingForMainFrameResourceTreePayload.
+        Also clear the _resourceRequestIdentifierMap and _frameIdentifierMap maps.
+
+2012-02-13  Timothy Hatcher  <timothy@apple.com>
+
+        Make sure the sidebar tree is ready before showing the source code in response to a Show Page Source user action.
+        Also reveal and select the frame in the Resource sidebar for which the source was shown.
+
+        <rdar://problem/10855004> File path components are missing when using Show Page Source menu item
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.showMainResourceForFrame):
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.showSourceCodeForFrame):
+        (WebInspector.ResourceSidebarPanel.prototype.treeElementForRepresentedObject): Added. A custom implementation is
+        needed for this since the frames are populated lazily.
+        (WebInspector.ResourceSidebarPanel.prototype.treeElementForRepresentedObject.getParent): Added.
+        (WebInspector.ResourceSidebarPanel.prototype.treeElementForRepresentedObject.isAncestor): Added.
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameDidChange): Check for _frameIdentifierToShowSourceCodeWhenAvailable
+        and call showSourceCodeForFrame.
+        (WebInspector.ResourceSidebarPanel.prototype._frameWasAdded): Return early if the main frame tree element isn't
+        in the sidebar tree outline yet.
+
+2012-02-13  Timothy Hatcher  <timothy@apple.com>
+
+        Remove the "Create RemoteWebInspector.framework symlinks" build phase now that all
+        clients are off the old framework.
+
+        This also fixes a build error seen in the archive builders.
+
+        <rdar://problem/10828236> Remove Symlinks for RemoteWebInspector.framework
+
+        Rubber-stamped by Joseph Pecoraro.
+
+        * WebInspectorUI.xcodeproj/project.pbxproj: Removed "Create RemoteWebInspector.framework symlinks".
+
+2012-02-12  Timothy Hatcher  <timothy@apple.com>
+
+        Enable localization of the new Web Inspector again.
+
+        <rdar://problem/10688721>
+
+        Reviewed by John Sullivan.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+        * UserInterface/Main.js:
+        (WebInspector.UIString): Lookup the string in window.localizedStrings again.
+
+2012-02-11  Timothy Hatcher  <timothy@apple.com>
+
+        Minify the CSS and JavaScript resources in Production builds.
+
+        <rdar://problem/10408292> Master the new Web Inspector resources into a separate framework
+
+        Reviewed by Joseph Pecoraro.
+
+        * Scripts/cssmin.py: Added.
+        * Scripts/jsmin.py: Copied from Safari/Reader/jsmin.py.
+        * WebInspectorUI.xcodeproj/project.pbxproj: Call cssmin.py on Main.css and jsmin.py on Main.js.
+
+2012-02-11  Timothy Hatcher  <timothy@apple.com>
+
+        Remove console.assert() calls from Productions builds.
+
+        <rdar://problem/10408292> Master the new Web Inspector resources into a separate framework
+
+        Reviewed by Joseph Pecoraro.
+
+        * Scripts/remove-console-asserts.pl: Added.
+        * WebInspectorUI.xcodeproj/project.pbxproj: Call remove-console-asserts.pl on the combined Main.js file.
+
+2012-02-11  Timothy Hatcher  <timothy@apple.com>
+
+        Combine scripts and stylesheets into single files in Production builds.
+
+        <rdar://problem/10408292> Master the new Web Inspector resources into a separate framework
+
+        Reviewed by Joseph Pecoraro.
+
+        * Scripts/combine-resources.pl: Added.
+        * Scripts/copy-user-interface-resources.sh: Call combine-resources.pl in Production builds.
+        * UserInterface/Main.html: Removed a FIXME comment that gets in the way of combine-resources.pl.
+        * WebInspectorUI.xcodeproj/project.pbxproj: Added combine-resources.pl.
+
+2012-02-11  Timothy Hatcher  <timothy@apple.com>
+
+        Build the user interface files into the WebInspector framework.
+
+        <rdar://problem/10408292> Master the new Web Inspector resources into a separate framework
+
+        Reviewed by Joseph Pecoraro.
+
+        * Configurations/Base.xcconfig: Added WEBKIT_UMBRELLA_FRAMEWORKS_DIR and WEBCORE_PRIVATE_HEADERS_DIR.
+        * Configurations/DebugRelease.xcconfig: Added WEBKIT_UMBRELLA_FRAMEWORKS_DIR for engineering builds.
+        * Scripts/copy-user-interface-resources.sh: Added.
+        * WebInspectorUI.xcodeproj/project.pbxproj: Added UserInterface folder, localizedStrings.js,
+        Copy User Interface Resources and Copy WebCore Inspector Resources build phases.
+
+2012-02-11  Timothy Hatcher  <timothy@apple.com>
+
+        Move Safari/Develop/WebInspector to WebInspector/UserInterface.
+
+        <rdar://problem/10408292> Master the new Web Inspector resources into a separate framework
+
+        Reviewed by Joseph Pecoraro.
+
+        * ChangeLog: Copied over the Safari/ChangeLog entries with changes in Safari/Develop/WebInspector.
+        * UserInterface: Renamed from Safari/Develop/WebInspector.
+
+2012-02-10  Timothy Hatcher  <timothy@apple.com>
+
+        Copy over StylesSidebarPane.js from Open Source and break it up into one class per file.
+
+        Part of: <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/BlankStylePropertiesSection.js: Copied from OpenSource/Source/WebCore/inspector/front-end/StylesSidebarPane.js.
+        * UserInterface/CSSPropertyPrompt.js: Ditto.
+        * UserInterface/ComputedStylePropertiesSection.js: Ditto.
+        * UserInterface/StylePropertiesSection.js: Ditto.
+        * UserInterface/StylePropertyTreeElement.js: Ditto.
+
+2012-02-10  Timothy Hatcher  <timothy@apple.com>
+
+        Collapse bread-crumb compoenents in the middle when there ins't enough room to show them all.
+        This keeps the important ones (the ends) on the screen while hiding the less important middle.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/HierarchicalPathComponent.css:
+        (.hierarchical-path-component.hidden): Added.
+        (.hierarchical-path-component.collapsed): Added.
+        (.hierarchical-path-component.collapsed > .icon): Added.
+        (.hierarchical-path-component.collapsed > .title): Added.
+        (.hierarchical-path-component.collapsed > select): Added.
+        (.hierarchical-path-component > .separator): Added.
+        * UserInterface/HierarchicalPathComponent.js:
+        (WebInspector.HierarchicalPathComponent.prototype.get hidden): Added.
+        (WebInspector.HierarchicalPathComponent.prototype.set hidden): Added.
+        (WebInspector.HierarchicalPathComponent.prototype.get collapsed): Added.
+        (WebInspector.HierarchicalPathComponent.prototype.set collapsed): Added.
+        * UserInterface/HierarchicalPathNavigationItem.js:
+        (WebInspector.HierarchicalPathNavigationItem.prototype.set components): Delete _collapsedComponent.
+        (WebInspector.HierarchicalPathNavigationItem.prototype.updateLayout): Loop through the components starting
+        at the middle and fanning out in each direction to collapse until widthToRemove depleted.
+
+2012-02-10  Brian Weinstein  <bweinstein@apple.com>
+
+        Show page and frame source using the new inspector if it is enabled.
+
+        When the user selects Show Page Source from the Develop menu or Show Page Source or Show Frame Source
+        from the context menu, call new WKInspector API if we are using the new inspector.
+
+        <rdar://problem/10830076> Show Page Source should open the new Web Inspector to the page source
+        <rdar://problem/10844831> Show Frame Source should open the new Web Inspector to that frame's source
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.showMainResourceForFrame): Call through to the ResourceSidebarPanel.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel):
+        (WebInspector.ResourceSidebarPanel.prototype.showSourceCodeForFrame): If we have a Frame object for
+            the frame ID we were given, find its content view and show the source for it. If there isn't a frame
+            object yet, store the frame ID for the frame we want to show.
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameDidChange): If we want to show a frame ID when it becomes
+            available, then return early before showing the main resource.
+        (WebInspector.ResourceSidebarPanel.prototype._frameWasAdded): If we are waiting to show a frame's source, and it
+            was just added, then call showSourceCodeForFrame.
+
+2012-02-09  Timothy Hatcher  <timothy@apple.com>
+
+        Set a default tooltip for GeneralTreeElements if there isn't a custom one already assigned.
+
+        This gives the user a way to read truncated titles for all the sidebar tree elements.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/GeneralTreeElement.js:
+        (WebInspector.GeneralTreeElement.prototype._updateTitleElements): Build a tool tip based on the
+        main title and subtitle.
+
+2012-02-09  Brian Weinstein  <bweinstein@apple.com>
+
+        Clean up the code to set the titles of application cache manifest and frame tree elements.
+
+        This patch moves the responsibility of generating titles and subtitles for the application cache
+        manifests and frames from their represented objects to the tree elements.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ApplicationCacheFrame.js: Moved code from here...
+        * UserInterface/ApplicationCacheFrameTreeElement.js: ... to here.
+        (WebInspector.ApplicationCacheFrameTreeElement): Pass a blank title, it will be populated by updateTitles, and then call updateTitles.
+        (WebInspector.ApplicationCacheFrameTreeElement.prototype.constructor.WebInspector.ApplicationCacheFrameTreeElement.updateTitles): Set the
+            mainTitle and the subtitle on the GeneralTreeElement.
+        * UserInterface/ApplicationCacheManifest.js: Moved code from here...
+        * UserInterface/ApplicationCacheManifestTreeElement.js: ... to here.
+        (WebInspector.ApplicationCacheManifestTreeElement): Pass an empty title. StorageTreeElement will populate it when the flattened variable
+            is set.
+        (WebInspector.ApplicationCacheManifestTreeElement.prototype.constructor.WebInspector.ApplicationCacheManifestTreeElement.get name): Call _generateTitles
+            if necessary, and then return the name.
+        (WebInspector.ApplicationCacheManifestTreeElement.prototype.get secondaryName): Call _generateTitles if necessary, and then
+            return the secondary name.
+        (WebInspector.ApplicationCacheManifestTreeElement.prototype._generateTitles): Moved from ApplicationCacheManifest.js.
+
+2012-02-09  Brian Weinstein  <bweinstein@apple.com>
+
+        Implement a better titling scheme for application cache manifests and frames.
+
+        This patch reworks the titles and subtitles of application cache manifests and frames.
+
+        For the manifest, if it is collapsed, it will say: Application Cache - Manifest Name.
+        If it isn't collapsed (there is a top level "Application Cache" folder), then it will say: Manifest Name - Host Name.
+
+        For the frame, the main title will be the last path component of the frame (if it exists), or the host. The subtitle
+        will be the host, if the host isn't the same as the main title of the frame, or the subtitle of the application cache
+        manifest's tree element.
+
+        Rest of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ApplicationCacheFrame.js:
+        (WebInspector.ApplicationCacheFrame.prototype.get title): Call _generateTitles, which doesn't return a title anymore.
+        (WebInspector.ApplicationCacheFrame.prototype.get subtitle): Call _generateTitles and return this._subtitle.
+        (WebInspector.ApplicationCacheFrame.prototype.clearTitles): Set the subtitle and main title to null, and call _generateTitles.
+        (WebInspector.ApplicationCacheFrame.prototype._generateTitles): Clean up the code to generate a main title, and generate
+            a subtitle as well.
+
+        * UserInterface/ApplicationCacheFrameTreeElement.js:
+        (WebInspector.ApplicationCacheFrameTreeElement): Pass the title and the subtitle.
+        (WebInspector.ApplicationCacheFrameTreeElement.prototype.constructor.WebInspector.ApplicationCacheFrameTreeElement.updateTitles):
+            Clear the titles on the represented object, and set the mainTitle and subtitle on the tree element to their new values.
+
+        * UserInterface/ApplicationCacheManifest.js:
+        (WebInspector.ApplicationCacheManifest.prototype.get title): Call _generateTitles.
+        (WebInspector.ApplicationCacheManifest.prototype.get subtitle): Ditto.
+        (WebInspector.ApplicationCacheManifest.prototype._generateTitles): Clean up the code to generate a main title and also generate
+            a subtitle.
+
+        * UserInterface/ApplicationCacheManifestTreeElement.js:
+        (WebInspector.ApplicationCacheManifestTreeElement.prototype.get secondaryName): Get the represented object's subtitle.
+
+        * UserInterface/StorageTreeElement.js:
+        (WebInspector.StorageTreeElement): Use the flattened setter instead of setting the variable. The setter does a bit more work
+            that we need to do.
+        (WebInspector.StorageTreeElement.prototype.set flattened): Add the ability to set a subtitle when we are not flattened. If the
+            flattening changes, call _updateChildrensTitles.
+        (WebInspector.StorageTreeElement.prototype._updateChildrensTitles): Call updateTitles for each child that has updateTitles in their
+            prototype.
+
+2012-02-09  Brian Weinstein  <bweinstein@apple.com>
+
+        Have ApplicationCacheFrameContentView listen for when application cache statuses change.
+
+        More of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ApplicationCacheFrameContentView.js:
+        (WebInspector.ApplicationCacheFrameContentView): Add an event listener.
+        (WebInspector.ApplicationCacheFrameContentView.prototype.closed): Remove an event listener.
+        (WebInspector.ApplicationCacheFrameContentView.prototype._updateStatus): Call through to updateStatus.
+
+2012-02-09  Brian Weinstein  <bweinstein@apple.com>
+
+        Remove a bunch of dead code from ApplicationCacheFrameContentView.
+
+        More of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ApplicationCacheFrameContentView.js:
+        (WebInspector.ApplicationCacheFrameContentView):
+        (WebInspector.ApplicationCacheFrameContentView.prototype.updateStatus):
+
+2012-02-09  Brian Weinstein  <bweinstein@apple.com>
+
+        Add icons for application cache manifest and frame tree elements.
+
+        More of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ApplicationCacheFrameTreeElement.js:
+        (WebInspector.ApplicationCacheFrameTreeElement): Set a class name.
+        * UserInterface/ApplicationCacheManifestTreeElement.js:
+        (WebInspector.ApplicationCacheManifestTreeElement): Ditto.
+        * UserInterface/ApplicationCacheIcons.css: Added.
+        * UserInterface/Images/ApplicationCache.png: Added.
+        * UserInterface/Images/ApplicationCache@2x.png: Added.
+        * UserInterface/Main.html: Add new file.
+
+2012-02-09  Timothy Hatcher  <timothy@apple.com>
+
+        Fix a file not found error in the Web Inspector.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/IndeterminateProgressSpinner.css:
+        (.indeterminate-progress-spinner): Use IndeterminateProgressSpinner1.pdf instead of IndeterminateProgressSpinner.pdf.
+
+2012-02-09  Timothy Hatcher  <timothy@apple.com>
+
+        Don't add event listeners in the ContentView "shown" functions.
+
+        This was leading to duplicate listeners if the content view was hidden and shown multiple times.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ClusterContentView.js:
+        (WebInspector.ClusterContentView): Add the event listener here...
+        (WebInspector.ClusterContentView.prototype.shown): ... instead of here.
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView): Add the event listener here...
+        (WebInspector.DOMTreeContentView.prototype.shown): ... instead of here.
+        * UserInterface/ResourceContentView.js:
+        (WebInspector.ResourceContentView): Add the event listener here.
+        (WebInspector.ResourceContentView.prototype.shown): Removed.
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView): Add the event listener here...
+        (WebInspector.TextResourceContentView.prototype.shown): ... instead of here.
+        (WebInspector.TextResourceContentView.prototype.hidden): Don't remove the event listener here...
+        (WebInspector.TextResourceContentView.prototype.closed): ... remove it here instead.
+
+2012-02-07  Brian Weinstein  <bweinstein@apple.com>
+
+        Update the details sidebar when the network state or the frame manifest state changes.
+
+        More of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ApplicationCacheDetailsSidebarPanel.js:
+        (WebInspector.ApplicationCacheDetailsSidebarPanel):
+        (WebInspector.ApplicationCacheDetailsSidebarPanel.prototype.refresh): Call _refreshOnlineRow and _refreshStatusRow.
+        (WebInspector.ApplicationCacheDetailsSidebarPanel.prototype._networkStateUpdated): Call _refreshOnlineRow.
+        (WebInspector.ApplicationCacheDetailsSidebarPanel.prototype._frameManifestStatusChanged): If the frame that changed
+            matches ours, call _refreshStatusRow.
+        (WebInspector.ApplicationCacheDetailsSidebarPanel.prototype._refreshOnlineRow): Set the text of the online row.
+        (WebInspector.ApplicationCacheDetailsSidebarPanel.prototype._refreshStatusRow): Set the text of the status row.
+        * UserInterface/ApplicationCacheManager.js:
+        (WebInspector.ApplicationCacheManager.prototype.networkStateUpdated):
+        (WebInspector.ApplicationCacheManager.prototype._frameManifestUpdated):
+
+2012-02-07  Brian Weinstein  <bweinstein@apple.com>
+
+        Make sure we update the status of an existing cache frame in _frameManifestUpdated.
+
+        More of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ApplicationCacheFrame.js:
+        (WebInspector.ApplicationCacheFrame.prototype.set status): Add a setter.
+        * UserInterface/ApplicationCacheManager.js:
+        (WebInspector.ApplicationCacheManager.prototype._frameManifestUpdated): If we already have an ApplicationCacheFrame,
+            make sure to set the status when it changes.
+
+2012-02-07  Brian Weinstein  <bweinstein@apple.com>
+
+        Add a status section to the details sidebar that shows the application cache status and whether the user is online
+        or offline.
+
+        This doesn't listen to changes in state while the sidebar is showing yet, but it will in the next patch.
+
+        More of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ApplicationCacheDetailsSidebarPanel.js:
+        (WebInspector.ApplicationCacheDetailsSidebarPanel):
+        (WebInspector.ApplicationCacheDetailsSidebarPanel.prototype.refresh):
+
+2012-02-07  Brian Weinstein  <bweinstein@apple.com>
+
+        Add the manifest URL and the frame URL that loaded the manifest to the details sidebar.
+
+        More of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ApplicationCacheDetailsSidebarPanel.js:
+        (WebInspector.ApplicationCacheDetailsSidebarPanel): Create a start to our structure of groups and rows.
+        (WebInspector.ApplicationCacheDetailsSidebarPanel.prototype.get applicationCacheFrame): Return the application cache frame.
+        (WebInspector.ApplicationCacheDetailsSidebarPanel.prototype.set applicationCacheFrame): Set the application cache frame and say
+            we need a refresh.
+        (WebInspector.ApplicationCacheDetailsSidebarPanel.prototype.refresh): Set the data in our rows.
+
+2012-02-07  Brian Weinstein  <bweinstein@apple.com>
+
+        Add a basic ApplicationCacheDetailsSidebarPanel, and make it be enabled at the right time.
+
+        More of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ApplicationCacheDetailsSidebarPanel.js: Added.
+        (WebInspector.ApplicationCacheDetailsSidebarPanel): Call the DetailsSidebarPanel constructor.
+        (WebInspector.ApplicationCacheDetailsSidebarPanel.prototype.constructor.WebInspector.ApplicationCacheDetailsSidebarPanel.inspect): Determine
+            if one of the selected objects is an ApplicationCacheFrame.
+        (WebInspector.ApplicationCacheDetailsSidebarPanel.prototype.refresh): Add a FIXME.
+        * UserInterface/Main.html: Add a new file.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create the ApplicationCacheDetailsSidebarPanel.
+
+2012-02-07  Brian Weinstein  <bweinstein@apple.com>
+
+        Create an ApplicationCacheFrameContentView when an ApplicationCacheFrameTreeElement is selected.
+
+        More of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView):
+        (WebInspector.ContentView.isViewable):
+        * UserInterface/Main.js:
+        (WebInspector.contentBrowserTreeElementForRepresentedObject):
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel.prototype._storageCleared):
+        (WebInspector.StorageSidebarPanel.prototype._treeElementSelected):
+
+2012-02-07  Brian Weinstein  <bweinstein@apple.com>
+
+        Implement some needed functions in ApplicationCacheManager to handle calls from ApplicationCacheObserver and
+        ApplicationCacheFrameContentView.
+
+        More of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ApplicationCacheManager.js:
+        (WebInspector.ApplicationCacheManager):
+        (WebInspector.ApplicationCacheManager.prototype.networkStateUpdated): Update the online state, and add a FIXME to fire an event.
+        (WebInspector.ApplicationCacheManager.prototype.get online):
+        (WebInspector.ApplicationCacheManager.prototype.applicationCacheStatusUpdated):
+        (WebInspector.ApplicationCacheManager.prototype.requestApplicationCache):
+        * UserInterface/ApplicationCacheObserver.js:
+        (WebInspector.ApplicationCacheObserver.prototype.constructor.WebInspector.ApplicationCacheObserver.applicationCacheStatusUpdated):
+        (WebInspector.ApplicationCacheObserver.prototype.networkStateUpdated):
+
+2012-02-07  Brian Weinstein  <bweinstein@apple.com>
+
+        Implement Number.bytesToString.
+
+        More of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Utilities.js:
+        (Number.string_appeared_here.value):
+
+2012-02-07  Brian Weinstein  <bweinstein@apple.com>
+
+        Make more of ApplicationFrameContentView work.
+
+        Add some styling, and make some of the code in ApplicationFrameContentView match our mannerisms. There are a couple
+        places we ask the ApplicationCacheManager for data. These functions don't exist yet, but they will in the next patch.
+
+        More of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ApplicationCacheFrameContentView.css: Added.
+        (.content-view.application-cache-frame > .data-grid):
+        (.content-view.application-cache-frame .hidden):
+        * UserInterface/ApplicationCacheFrameContentView.js:
+        (WebInspector.ApplicationCacheFrameContentView): Create our version of an empty view instead of open source's. Ask the application
+            cache manager for data.
+        (WebInspector.ApplicationCacheFrameContentView.prototype.shown): Use our correct method name.
+        (WebInspector.ApplicationCacheFrameContentView.prototype.hidden): Ditto.
+        (WebInspector.ApplicationCacheFrameContentView.prototype._maybeUpdate): Check this.visible instead of isVisible().
+        (WebInspector.ApplicationCacheFrameContentView.prototype.updateStatus): Ditto.
+        (WebInspector.ApplicationCacheFrameContentView.prototype._update): Ask the application cache manager for data.
+        (WebInspector.ApplicationCacheFrameContentView.prototype._updateCallback): Use our functions to hide and show the empty views / datagrids.
+        (WebInspector.ApplicationCacheFrameContentView.prototype._createDataGrid): Ditto.
+
+2012-02-07  Brian Weinstein  <bweinstein@apple.com>
+
+        Do some clean-up of ApplicationCacheFrameContentView.
+
+        Change the argument it takes to a represented object, have it inherit from ContentView, and remove calls to add/removeStyleClass.
+
+        More of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ApplicationCacheFrameContentView.js:
+        (WebInspector.ApplicationCacheFrameContentView):
+        (WebInspector.ApplicationCacheFrameContentView.prototype._updateCallback):
+
+2012-02-07  Brian Weinstein  <bweinstein@apple.com>
+
+        Bring in ApplicationCacheItemsView from open source as ApplicationCacheFrameContentView.
+
+        More of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ApplicationCacheFrameContentView.js: Added. Copied from open source.
+
+2012-02-07  Brian Weinstein  <bweinstein@apple.com>
+
+        Add tree elements for application cache manifests and frames that have an application cache.
+
+        When the document adds or removes frames from the application cache, ApplicationCacheManager fires events. The storage sidebar
+        panel listens for these events and updates the state of the tree elements in the sidebar panel. Currently, we only add
+        sidebar items, but removing them will be added in a future patch.
+
+        More of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ApplicationCacheManager.js:
+        (WebInspector.ApplicationCacheManager.prototype._frameManifestUpdated):
+        (WebInspector.ApplicationCacheManager.prototype._frameManifestRemoved):
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel):
+        (WebInspector.StorageSidebarPanel.prototype._frameManifestAdded):
+        (WebInspector.StorageSidebarPanel.prototype._frameManifestRemoved):
+        (WebInspector.StorageSidebarPanel.prototype._storageCleared):
+
+2012-02-06  Brian Weinstein  <bweinstein@apple.com>
+
+        Add tree elements for application cache frames and application cache manifests.
+
+        They aren't used yet, but will be used by the StorageSidebarPanel in a later patch.
+
+        More of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ApplicationCacheFrameTreeElement.js: Added.
+        (WebInspector.ApplicationCacheFrameTreeElement): Basic tree element subclass with a FIXME for an icon.
+        * UserInterface/ApplicationCacheManifest.js:
+        (WebInspector.ApplicationCacheManifest.prototype.get title): Call _generateTitle if we don't already have one.
+        (WebInspector.ApplicationCacheManifest.prototype._generateTitle): Try and get a title from the manifest URL's last path component, host
+            or the whole URL.
+        * UserInterface/ApplicationCacheManifestTreeElement.js: Added.
+        (WebInspector.ApplicationCacheManifestTreeElement): Inherits from StorageTreeElement.
+        (WebInspector.ApplicationCacheManifestTreeElement.prototype.constructor.WebInspector.ApplicationCacheManifestTreeElement.get name): Get the
+            represented object's title.
+        (WebInspector.ApplicationCacheManifestTreeElement.prototype.get categoryName): return Application Cache.
+        * UserInterface/Main.html: Add new files.
+
+2012-02-06  Brian Weinstein  <bweinstein@apple.com>
+
+        Implement the callback functions when we get information about the application cache. We create the necessary
+        application cache objects now, but don't create tree elements or notify the storage sidebar panel about them
+        yet.
+
+        More of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ApplicationCacheManager.js:
+        (WebInspector.ApplicationCacheManager): Listen for when child frames are removed.
+        (WebInspector.ApplicationCacheManager.prototype.constructor.WebInspector.ApplicationCacheManager.initialize): Get the
+            frames with application caches here..
+        (WebInspector.ApplicationCacheManager.prototype._mainResourceDidChange): .. Instead of here.
+        (WebInspector.ApplicationCacheManager.prototype._childFrameWasRemoved): Call _frameManifestRemoved.
+        (WebInspector.ApplicationCacheManager.prototype._manifestForFrameLoaded): If the frame doesn't have a manifest URL,
+            call _frameManifestRemoved.
+        (WebInspector.ApplicationCacheManager.prototype._framesWithManifestsLoaded): Call _frameManifestUpdated for all frames
+            that have manifests.
+        (WebInspector.ApplicationCacheManager.prototype._frameManifestUpdated): Create a frame manifest object if it is necessary,
+            and add FIXMEs to fire some events about the application cache state.
+        (WebInspector.ApplicationCacheManager.prototype._frameManifestRemoved): Remove the manifest object for this frame.
+
+2012-02-06  Brian Weinstein  <bweinstein@apple.com>
+
+        Add ApplicationCacheFrame and ApplicationCacheManifest. These are just simple objects that wrap a few properties.
+
+        More of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ApplicationCacheFrame.js: Added.
+        (WebInspector.ApplicationCacheFrame):
+        (WebInspector.ApplicationCacheFrame.prototype.constructor.WebInspector.ApplicationCacheFrame.get frame):
+        (WebInspector.ApplicationCacheFrame.prototype.get manifest):
+        (WebInspector.ApplicationCacheFrame.prototype.get status):
+        * UserInterface/ApplicationCacheManifest.js: Added.
+        (WebInspector.ApplicationCacheManifest):
+        (WebInspector.ApplicationCacheManifest.prototype.constructor.WebInspector.ApplicationCacheManifest.get manifestURL):
+        * UserInterface/Main.html:
+
+2012-02-06  Brian Weinstein  <bweinstein@apple.com>
+
+        Add ApplicationCacheManager, and have it listen for when frames navigate, and call some ApplicationCacheAgent
+        methods to get data from WebCore.
+
+        We don't do anything with this data yet, but will in follow-up patches.
+
+        Part of <rdar://problem/10642953> Implement Application Cache sidebar items and content views for new web inspector.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ApplicationCacheManager.js: Added.
+        (WebInspector.ApplicationCacheManager): Initialize the ApplicationCacheAgent, and add a listener for when frames navigate.
+        (WebInspector.ApplicationCacheManager.prototype.constructor.WebInspector.ApplicationCacheManager.initialize): Clear our (always empty)
+            list of application cache objects.
+        (WebInspector.ApplicationCacheManager.prototype._mainResourceDidChange): Get the list of frames with application caches if the main frame
+            navigated. If it was a subframe, check the status of the application cache for the subframe.
+        (WebInspector.ApplicationCacheManager.prototype._manifestForFrameLoaded): Stub.
+        (WebInspector.ApplicationCacheManager.prototype._framesWithManifestsLoaded): Ditto.
+        * UserInterface/Main.html: Add new file.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create an ApplicationCacheManager.
+
+2012-02-06  Timothy Hatcher  <timothy@apple.com>
+
+        Show the full URL in the tool tip for resources in the Web Inspector.
+
+        Part of: <rdar://problem/10259020> Improve Web Inspector's view of per-page resources enough that Activity window can be eliminated
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement.prototype._updateResource): Call _updateToolTip.
+        (WebInspector.ResourceTreeElement.prototype._updateToolTip): Added.
+        (WebInspector.ResourceTreeElement.prototype._urlDidChange): Call _updateToolTip.
+
+2012-02-06  Timothy Hatcher  <timothy@apple.com>
+
+        Make double-click in the Web Inspector Resource sidebar open the resource in a new Safari tab/window.
+
+        This is like the Activity window, which we want to replace with the new Web Inspector.
+
+        Part of: <rdar://problem/10259020> Improve Web Inspector's view of per-page resources enough that Activity window can be eliminated
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement.prototype.ondblclick): Added.
+
+2012-02-06  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an error on reload in the Web Inspector where the main resource would not be marked as finished, so the source
+        would never display and the spinner in the sidebar would never go away.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype._addNewResourceToFrame): Only reuse the main resource
+        or provisional main resource if the loader identifiers match.
+
+2012-02-06  Timothy Hatcher  <timothy@apple.com>
+
+        Show a spinner in resource content views while waiting for content to become available.
+
+        Part of: <rdar://problem/10259020> Improve Web Inspector's view of per-page resources enough that Activity window can be eliminated
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Main.html:
+        * UserInterface/ResourceContentView.css: Added.
+        (.content-view.resource > .indeterminate-progress-spinner):
+        * UserInterface/ResourceContentView.js:
+        (WebInspector.ResourceContentView): Append a spinner.
+
+2012-02-06  Timothy Hatcher  <timothy@apple.com>
+
+        Show a progress spinner in the Resource sidebar next to resources that are still loading.
+
+        Part of: <rdar://problem/10259020> Improve Web Inspector's view of per-page resources enough that Activity window can be eliminated
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/GeneralTreeElement.js:
+        (WebInspector.GeneralTreeElement): Initialize status to "".
+        (WebInspector.GeneralTreeElement.prototype.get status): Added.
+        (WebInspector.GeneralTreeElement.prototype.set status): Added.
+        (WebInspector.GeneralTreeElement.prototype.onattach): Call _updateStatusElement.
+        (WebInspector.GeneralTreeElement.prototype._createElementsIfNeeded): Create the status element.
+        (WebInspector.GeneralTreeElement.prototype._updateStatusElement): Added.
+        * UserInterface/Images/IndeterminateProgressSpinner1.pdf: Added.
+        * UserInterface/Images/IndeterminateProgressSpinner10.pdf: Added.
+        * UserInterface/Images/IndeterminateProgressSpinner11.pdf: Added.
+        * UserInterface/Images/IndeterminateProgressSpinner12.pdf: Added.
+        * UserInterface/Images/IndeterminateProgressSpinner2.pdf: Added.
+        * UserInterface/Images/IndeterminateProgressSpinner3.pdf: Added.
+        * UserInterface/Images/IndeterminateProgressSpinner4.pdf: Added.
+        * UserInterface/Images/IndeterminateProgressSpinner5.pdf: Added.
+        * UserInterface/Images/IndeterminateProgressSpinner6.pdf: Added.
+        * UserInterface/Images/IndeterminateProgressSpinner7.pdf: Added.
+        * UserInterface/Images/IndeterminateProgressSpinner8.pdf: Added.
+        * UserInterface/Images/IndeterminateProgressSpinner9.pdf: Added.
+        * UserInterface/IndeterminateProgressSpinner.css: Added.
+        * UserInterface/IndeterminateProgressSpinner.js: Added.
+        (WebInspector.IndeterminateProgressSpinner):
+        (WebInspector.IndeterminateProgressSpinner.prototype.get element):
+        * UserInterface/Main.html:
+        * UserInterface/NavigationSidebarPanel.css:
+        (.navigation-sidebar-panel-content-tree-outline .item .status):
+        (.navigation-sidebar-panel-content-tree-outline .item .status:empty):
+        (.navigation-sidebar-panel-content-tree-outline .item.small .status):
+        (.navigation-sidebar-panel-content-tree-outline .item.small .status .indeterminate-progress-spinner):
+        (.navigation-sidebar-panel-content-tree-outline .item.small.two-line .status):
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement.prototype._updateResource): Add event listeners and call _updateLoadingStatus.
+        (WebInspector.ResourceTreeElement.prototype._updateLoadingStatus): Added. Sets status to a spinner when loading.
+
+2012-02-04  Timothy Hatcher  <timothy@apple.com>
+
+        Use PDFs for the user input prompt and result icons.
+
+        Part of: <rdar://problem/10643175> DataGrid and the DOM tree and the Console should be HiDPI compliant
+
+        Reviewed by Sam Weinig.
+
+        * UserInterface/DatabaseContentView.css:
+        (.database-query-prompt::before): Use Use UserInputPrompt.pdf.
+        * UserInterface/Images/UserInputPrompt.pdf: Added.
+        * UserInterface/Images/UserInputResult.pdf: Added.
+        * UserInterface/Images/userInputIcon.png: Removed.
+        * UserInterface/Images/userInputResultIcon.png: Removed.
+        * UserInterface/LogContentView.css:
+        (#console-prompt::before): Use UserInputPrompt.pdf.
+        (.console-user-command-result.console-log-level::before): Use UserInputResult.pdf.
+
+2012-02-04  Timothy Hatcher  <timothy@apple.com>
+
+        Use PDFs for the error and wrning icons.
+
+        Part of: <rdar://problem/10643175> DataGrid and the DOM tree and the Console should be HiDPI compliant
+
+        Reviewed by Sam Weinig.
+
+        * UserInterface/DatabaseContentView.css:
+        (.database-query-result.error::before): Use ErrorSmall.pdf.
+        * UserInterface/Images/ErrorSmall.pdf: Added.
+        * UserInterface/Images/WarningSmall.pdf: Added.
+        * UserInterface/Images/errorIcon.png: Removed.
+        * UserInterface/Images/warningIcon.png: Removed.
+        * UserInterface/LogContentView.css:
+        (.console-error-level::before): Use ErrorSmall.pdf.
+        (.console-warning-level::before): Use WarningSmall.pdf.
+
+2012-02-04  Timothy Hatcher  <timothy@apple.com>
+
+        Remove unused code and images from the log content view for status bar items and filtering.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Images/deleteIcon.png: Removed.
+        * UserInterface/Images/searchSmallBrightBlue.png: Removed.
+        * UserInterface/LogContentView.css:
+        (.console-debug-level::before): Use a background color instead of an image. The debug
+        level is not used by the new Web Inspector.
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView): Removed creation code for status bar items and filtering.
+        (WebInspector.LogContentView.prototype.evalInInspectedWindow): Pass undefined for the context.
+        * UserInterface/Section.css:
+        (.section .properties .delete-button): Removed.
+        (.section .properties li.hovered .delete-button): Removed.
+
+2012-02-04  Timothy Hatcher  <timothy@apple.com>
+
+        Update LogContentView to work with the new Web Inspector's ContentView instead of the old View.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype.hidden): Renamed from willHide. Call storeScrollPositions.
+        (WebInspector.LogContentView.prototype.shown): Renamed from willShow. Merged with afterShow.
+        (WebInspector.LogContentView.prototype.storeScrollPositions): Removed WebInspector.View.prototype call.
+        (WebInspector.LogContentView.prototype.restoreScrollPositions): Ditto.
+        (WebInspector.LogContentView.prototype.updateLayout): Renamed from onResize.
+
+2012-02-04  Timothy Hatcher  <timothy@apple.com>
+
+        Make the "Show Error Console" develop menu item work with the new Web Inspector.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser.prototype.get currentContentView): Added.
+        (WebInspector.ContentBrowser.prototype.canGoBack): Use this.currentContentView.
+        (WebInspector.ContentBrowser.prototype.canGoForward): Ditto.
+        (WebInspector.ContentBrowser.prototype.goBack): Ditto.
+        (WebInspector.ContentBrowser.prototype.goForward): Ditto.
+        (WebInspector.ContentBrowser.prototype._contentViewSelectionPathComponentDidChange): Ditto.
+        (WebInspector.ContentBrowser.prototype._currentContentViewDidChange): Ditto.
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.showConsole): Call LogSidebarPanel.showCurrentLog.
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel.prototype.showCurrentLog):
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameDidChange): Don't select the main frame
+        if there is already a content view showing.
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameMainResourceDidChange.delayedWork): Ditto.
+
+2012-02-04  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an infinite loop when doing "Show Error Console" or any of the Inspector develop menu items.
+
+        <rdar://problem/10801359> Hitting Cmd-Opt-C (Develop -> Show Error Console) causes WebProcess
+        to freak out (100% CPU, GBs of RAM)
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/InspectorFrontendAPI.js:
+        (InspectorFrontendAPI.loadCompleted): Set _loaded before calling dispatch, otherwise dispatch
+        will keep append commands to _pendingCommands and the for loop will never finish.
+
+2012-02-02  Timothy Hatcher  <timothy@apple.com>
+
+        Add the Box Model to the Appearance details sidebar panel.
+
+        Last part of: <rdar://problem/10319536> Implement the Metrics inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/AppearanceDetailsSidebarPanel.js:
+        (WebInspector.AppearanceDetailsSidebarPanel):
+        (WebInspector.AppearanceDetailsSidebarPanel.prototype._refreshBoxModel):
+        * UserInterface/BoxModelDetailsSectionRow.css: Added.
+        * UserInterface/BoxModelDetailsSectionRow.js: Copied from OpenSource/Source/WebCore/inspector/front-end/MetricsSidebarPane.js.
+        Modified to use DOMTreeManager and CSSStyleManager and other minor renames to work in the new inspector.
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager.prototype.get forcedPseudoClasses): Added stub with FIXME.
+        * UserInterface/Main.html: Included BoxModelDetailsSectionRow.{css,js}.
+
+2012-02-02  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.AppearanceDetailsSidebarPanel, future home for the box-model diagram.
+
+        Part of: <rdar://problem/10319536> Implement the Metrics inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/AppearanceDetailsSidebarPanel.js: Added.
+        (WebInspector.AppearanceDetailsSidebarPanel):
+        (WebInspector.AppearanceDetailsSidebarPanel.prototype.refresh): Call _refreshBoxModel.
+        (WebInspector.AppearanceDetailsSidebarPanel.prototype._refreshBoxModel):
+        * UserInterface/Main.html: Included AppearanceDetailsSidebarPanel.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create an instance of AppearanceDetailsSidebarPanel.
+
+2012-02-02  Timothy Hatcher  <timothy@apple.com>
+
+        Replace WebInspector.domAgent use with WebInspector.domTreeManager.
+
+        Needed for:
+        <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+        <rdar://problem/10319536> Implement the Metrics inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager.prototype.setRuleSelector.callback):
+        (WebInspector.CSSStyleManager.prototype.addRule.callback):
+        (WebInspector.CSSStyleManager.prototype._ownerDocumentId):
+
+2012-02-02  Timothy Hatcher  <timothy@apple.com>
+
+        Create a singelton WebInspector.CSSStyleManager instance.
+
+        Needed for:
+        <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+        <rdar://problem/10319536> Implement the Metrics inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+
+2012-02-02  Timothy Hatcher  <timothy@apple.com>
+
+        WebInspector.CSSStyleModel to WebInspector.CSSStyleManager.
+
+        Also rename WebInspector.CSSStyleModel.Events to WebInspector.CSSStyleManager.Event
+        and delete some calls in the CSSStyleManager constructor we don't need.
+
+        Needed for:
+        <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+        <rdar://problem/10319536> Implement the Metrics inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSStyleManager.js:
+        (WebInspector.CSSStyleManager):
+        (WebInspector.CSSStyleManager.parseRuleArrayPayload):
+        (WebInspector.CSSStyleManager.prototype.getMatchedStylesAsync):
+        (WebInspector.CSSStyleManager.prototype.mediaQueryResultChanged):
+        (WebInspector.CSSStyleManager.prototype._fireStyleSheetChanged.if):
+        (WebInspector.CSSStyleManager.prototype._fireStyleSheetChanged.mycallback):
+        (WebInspector.CSSStyleManager.prototype._fireStyleSheetChanged):
+
+2012-02-02  Timothy Hatcher  <timothy@apple.com>
+
+        Copy over classes from open source's CSSStyleModel.js.
+
+        Needed for:
+        <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+        <rdar://problem/10319536> Implement the Metrics inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CSSMedia.js: Added.
+        (WebInspector.CSSMedia):
+        (WebInspector.CSSMedia.parsePayload):
+        (WebInspector.CSSMedia.parseMediaArrayPayload):
+        * UserInterface/CSSProperty.js: Added.
+        (WebInspector.CSSProperty):
+        (WebInspector.CSSProperty.parsePayload):
+        (WebInspector.CSSProperty.prototype.get propertyText):
+        (WebInspector.CSSProperty.prototype.get isLive):
+        (WebInspector.CSSProperty.prototype.get active):
+        (WebInspector.CSSProperty.prototype.get styleBased):
+        (WebInspector.CSSProperty.prototype.get inactive):
+        (WebInspector.CSSProperty.prototype.get disabled):
+        (WebInspector.CSSProperty.prototype.setText):
+        (WebInspector.CSSProperty.prototype.setText.callback):
+        (WebInspector.CSSProperty.prototype.setValue):
+        (WebInspector.CSSProperty.prototype.setDisabled.callback):
+        (WebInspector.CSSProperty.prototype.setDisabled):
+        * UserInterface/CSSRule.js: Added.
+        (WebInspector.CSSRule):
+        (WebInspector.CSSRule.parsePayload):
+        (WebInspector.CSSRule.prototype.get isUserAgent):
+        (WebInspector.CSSRule.prototype.get isUser):
+        (WebInspector.CSSRule.prototype.get isViaInspector):
+        (WebInspector.CSSRule.prototype.get isRegular):
+        * UserInterface/CSSStyleDeclaration.js: Added.
+        (WebInspector.CSSStyleDeclaration):
+        (WebInspector.CSSStyleDeclaration.buildShorthandValueMap):
+        (WebInspector.CSSStyleDeclaration.parsePayload):
+        (WebInspector.CSSStyleDeclaration.parseComputedStylePayload):
+        (WebInspector.CSSStyleDeclaration.prototype.get allProperties):
+        (WebInspector.CSSStyleDeclaration.prototype.getLiveProperty):
+        (WebInspector.CSSStyleDeclaration.prototype.getPropertyValue):
+        (WebInspector.CSSStyleDeclaration.prototype.getPropertyPriority):
+        (WebInspector.CSSStyleDeclaration.prototype.getPropertyShorthand):
+        (WebInspector.CSSStyleDeclaration.prototype.isPropertyImplicit):
+        (WebInspector.CSSStyleDeclaration.prototype.styleTextWithShorthands):
+        (WebInspector.CSSStyleDeclaration.prototype.getLonghandProperties):
+        (WebInspector.CSSStyleDeclaration.prototype.getShorthandValue):
+        (WebInspector.CSSStyleDeclaration.prototype.getShorthandPriority):
+        (WebInspector.CSSStyleDeclaration.prototype.propertyAt):
+        (WebInspector.CSSStyleDeclaration.prototype.pastLastSourcePropertyIndex):
+        (WebInspector.CSSStyleDeclaration.prototype.newBlankProperty):
+        (WebInspector.CSSStyleDeclaration.prototype.insertPropertyAt):
+        (WebInspector.CSSStyleDeclaration.prototype.appendProperty):
+        * UserInterface/CSSStyleManager.js: Added.
+        (WebInspector.CSSStyleModel):
+        (WebInspector.CSSStyleModel.parseRuleArrayPayload):
+        (WebInspector.CSSStyleModel.prototype.getMatchedStylesAsync):
+        (WebInspector.CSSStyleModel.prototype.getComputedStyleAsync):
+        (WebInspector.CSSStyleModel.prototype.getInlineStylesAsync):
+        (WebInspector.CSSStyleModel.prototype.setRuleSelector):
+        (WebInspector.CSSStyleModel.prototype.setRuleSelector.callback):
+        (WebInspector.CSSStyleModel.prototype.addRule):
+        (WebInspector.CSSStyleModel.prototype.addRule.callback):
+        (WebInspector.CSSStyleModel.prototype.mediaQueryResultChanged):
+        (WebInspector.CSSStyleModel.prototype._ownerDocumentId):
+        (WebInspector.CSSStyleModel.prototype._fireStyleSheetChanged.if):
+        (WebInspector.CSSStyleModel.prototype._fireStyleSheetChanged.mycallback):
+        (WebInspector.CSSStyleModel.prototype._fireStyleSheetChanged):
+        (WebInspector.CSSStyleModel.prototype.setStyleSheetText):
+        * UserInterface/CSSStyleSheet.js: Added.
+        (WebInspector.CSSStyleSheet):
+        (WebInspector.CSSStyleSheet.createForId):
+        (WebInspector.CSSStyleSheet.prototype.getText):
+        (WebInspector.CSSStyleSheet.prototype.setText):
+        * UserInterface/Main.html:
+
+2012-02-02  Timothy Hatcher  <timothy@apple.com>
+
+        Fix asserts in the Web Inspector when loading a loopinsight.com article.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Frame.js:
+        (WebInspector.Frame.prototype.constructor.WebInspector.Frame.initialize): Don't disassociate from the
+        old main resource if it didn't change.
+        (WebInspector.Frame.prototype.commitProvisionalLoad): Ditto.
+
+2012-02-01  Timothy Hatcher  <timothy@apple.com>
+
+        Fix issue where log views would draw over the previous log view on reload.
+        This fixes a bunch of asserts that ContentViewContainer was spewing.
+
+        <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer.prototype.closeAllContentViewsOfPrototype): Decrement the
+        currentIndex when it is greater than or equal to i.
+
+2012-01-31  Brian Weinstein  <bweinstein@apple.com>
+
+        Add DatabaseContentView.{js|css}. These were taken from open source, with a few modifications.
+
+        Rest of <rdar://problem/10684679> Implement a database query view for the new Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DatabaseContentView.css: Added. Copied rules from open source.
+        * UserInterface/DatabaseContentView.js: Added. Copied from open source.
+        * UserInterface/Main.html: Added new files.
+
+2012-01-31  Brian Weinstein  <bweinstein@apple.com>
+
+        Stub the boilerplate that is needed to hook up DatabaseContentView.
+
+        DatabaseContentView doesn't exist yet, but when it does, a new DatabaseContentView will be
+        created when a DatabaseTreeElement is selected.
+
+        Work towards <rdar://problem/10684679> Implement a database query view for the new Inspector.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView): Add a new case for DatabaseContentView.
+        (WebInspector.ContentView.isViewable): Ditto.
+        * UserInterface/Main.html:
+        * UserInterface/Main.js: Ditto.
+        (WebInspector.contentBrowserTreeElementForRepresentedObject):
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel.prototype._storageCleared): Ditto.
+        (WebInspector.StorageSidebarPanel.prototype._treeElementSelected): Ditto.
+
+2012-01-31  Timothy Hatcher  <timothy@apple.com>
+
+        Generate friendlier titles for the current log and previous logs in the Log sidebar.
+
+        Part of: <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel.prototype._sessionStarted): Set the previous current tree element title
+        to "Previous Log %d".
+        (WebInspector.LogSidebarPanel.prototype._activeTreeElement): Added.
+        (WebInspector.LogSidebarPanel.prototype._activeLogContentView): Use _activeTreeElement().
+        * UserInterface/LogTreeElement.js:
+        (WebInspector.LogTreeElement): Set the main title to "Current Log" and the subtitle to the time.
+
+2012-01-31  Timothy Hatcher  <timothy@apple.com>
+
+        Add an icon for logs in the Web Inspector Log sidebar.
+
+        Part of: <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Images/Log.png: Added.
+        * UserInterface/Images/Log@2x.png: Added.
+        * UserInterface/LogIcon.css: Added.
+        * UserInterface/LogObject.js:
+        (WebInspector.LogObject): Added startDate parameter and set _startDate.
+        (WebInspector.LogObject.prototype.get startDate): Added.
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel.prototype._sessionStarted):
+        * UserInterface/LogTreeElement.js: Added.
+        (WebInspector.LogTreeElement):
+        (WebInspector.LogTreeElement.prototype.get logObject):
+        * UserInterface/Main.html: Included LogTreeElement.js and LogIcon.css.
+
+2012-01-30  Timothy Hatcher  <timothy@apple.com>
+
+        Fix disclosure triangles in the Log content view after they broke in r40433.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Section.css:
+        (.section): Added. Moved position: relative here.
+        (.section .header): Removed position: relative from here.
+
+2012-01-30  Brian Weinstein  <bweinstein@apple.com>
+
+        Clear all content views of type LogContentView when we clear the log sidebar panel.
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel.prototype._logsCleared):
+
+2012-01-30  Brian Weinstein  <bweinstein@apple.com>
+
+        Make the log views from previous loads of the page non-editable.
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/LogContentView.css:
+        (#console-prompt.disabled): Make the field read only.
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype.setDisabled): Add the disabled class to the content prompt.
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel.prototype.constructor.WebInspector.LogSidebarPanel._sessionStarted): Call setDisabled
+            on the previously active LogContentView.
+
+2012-01-30  Brian Weinstein  <bweinstein@apple.com>
+
+        Have to double click on disclosure triangles for log messages with backtraces.
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DOMTreeOutline.css:
+        (.dom-tree-outline li.parent): Switch from text-indent to margin-left.
+        * UserInterface/TreeOutline.js:
+        (TreeElement.prototype.isEventWithinDisclosureTriangle): Update this to match open source.
+
+2012-01-30  Brian Weinstein  <bweinstein@apple.com>
+
+        Make console log messages with backtraces display correctly in the log view.
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/LogContentView.css: Copied some rules about outline-disclosure from Open Source.
+
+2012-01-30  Brian Weinstein  <bweinstein@apple.com>
+
+        Create correct links in the Log content view.
+
+        Instead of calling through to this._linkifier (which we don't have), create links ourselves.
+
+        This will work by calling through to WebInspector.openURL, which will either open a resource in a new tab,
+        or show you the resource content view for the link you clicked.
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ConsoleMessageImpl.js:
+        (WebInspector.ConsoleMessageImpl.prototype._linkifyLocation): We don't have a this._linkifier, so use our own function.
+
+2012-01-30  Brian Weinstein  <bweinstein@apple.com>
+
+        When we get a console message from the ConsoleObserver, add it to the correct LogContentView.
+
+        With this patch, we show console logging from the page in the content view, so it is now more than
+        just a place to evaluate JavaScript.
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ConsoleObserver.js:
+        (WebInspector.ConsoleObserver.prototype.constructor.WebInspector.ConsoleObserver.messageAdded): Tell the LogManager about the
+            added message.
+        * UserInterface/LogManager.js:
+        (WebInspector.LogManager.prototype.messageWasAdded): Create a ConsoleMessage object, and fire an event that a new message
+            was added.
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel): Add a listener for when messages are added.
+        (WebInspector.LogSidebarPanel.prototype._messageAdded): Find the content view for the current log item, and call messageAdded
+            on the LogContentView.
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView.prototype.messageAdded): Call _consoleMessageAdded.
+        (WebInspector.LogContentView.prototype._consoleMessageAdded): This now takes just the ConsoleMessage instead of an event.
+
+2012-01-30  Brian Weinstein  <bweinstein@apple.com>
+
+        Enable the ConsoleAgent after creating the managers.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+
+2012-01-30  Timothy Hatcher  <timothy@apple.com>
+
+        Add DOM properties to the DOM node details sidebar panel.
+
+        Last part of: <rdar://problem/10319527> Implement the DOM Attributes inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMNodeDetailsSidebarPanel.css: Added.
+        (.sidebar > .panel.details.dom-node .row.properties):
+        * UserInterface/DOMNodeDetailsSidebarPanel.js:
+        (WebInspector.DOMNodeDetailsSidebarPanel):
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype.refresh): Call _refreshProperties.
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshProperties): Added.
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshProperties.nodeResolved.collectPrototypes): Added.
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshProperties.nodeResolved): Added.
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshProperties.nodePrototypesReady): Added.
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshProperties.fillSection): Added.
+        * UserInterface/Main.html: Included DOMNodeDetailsSidebarPanel.css.
+        * UserInterface/Section.css:
+        (.section .header): Added position: relative so the disclosure triangles show up correctly.
+        (.properties-tree): Added outline: none to prevent a focus ring.
+
+2012-01-29  Timothy Hatcher  <timothy@apple.com>
+
+        Add a simple DOM node details sidebar panel that shows type, name and attributes.
+
+        Part of: <rdar://problem/10319527> Implement the DOM Attributes inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMNodeDetailsSidebarPanel.js: Added.
+        (WebInspector.DOMNodeDetailsSidebarPanel):
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype.refresh):
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshAttributes):
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype._attributesChanged):
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype._nodeTypeDisplayName):
+        (WebInspector.DOMNodeDetailsSidebarPanel.prototype._createAttributesDataGrid):
+        * UserInterface/Images/NavigationItemAngleBrackets.pdf: Added.
+        * UserInterface/Main.html: Included DOMNodeDetailsSidebarPanel.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Included DOMNodeDetailsSidebarPanel in the details sidebar list.
+
+2012-01-29  Timothy Hatcher  <timothy@apple.com>
+
+        Add DOMDetailsSidebarPanel as a base class for all the DOM node focused details sidebar panels.
+
+        Needed for:
+        <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+        <rdar://problem/10319527> Implement the DOM Attributes inspector for the new Web Inspector design
+        <rdar://problem/10319536> Implement the Metrics inspector for the new Web Inspector design
+        <rdar://problem/10319541> Implement the Properties/DOM object inspector for the new Web Inspector design
+        <rdar://problem/10319546> Implement the Event Listener inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMDetailsSidebarPanel.js: Added.
+        (WebInspector.DOMDetailsSidebarPanel):
+        (WebInspector.DOMDetailsSidebarPanel.prototype.inspect):
+        (WebInspector.DOMDetailsSidebarPanel.prototype.get domNode):
+        (WebInspector.DOMDetailsSidebarPanel.prototype.set domNode):
+        (WebInspector.DOMDetailsSidebarPanel.prototype.addEventListeners):
+        (WebInspector.DOMDetailsSidebarPanel.prototype.removeEventListeners):
+        * UserInterface/Main.html: Included DOMDetailsSidebarPanel.js.
+
+2012-01-29  Timothy Hatcher  <timothy@apple.com>
+
+        Display information about the selected resource in the resource details sidebar panel.
+
+        Last part of: <rdar://problem/10319511> Implement the File inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ResourceDetailsSidebarPanel.js:
+        (WebInspector.ResourceDetailsSidebarPanel): Create DetailsSections for the various parts of info to display.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype.set resource): Remove and add event listeners.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype.refresh): Call the individual refresh functions.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshURL): Added. Update the affected rows.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshResourceType): Added. Ditto.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshMIMEType): Added. Ditto.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshRequestHeaders): Added. Ditto.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._refreshResponseHeaders): Added. Ditto.
+        (WebInspector.ResourceDetailsSidebarPanel.prototype._createNameValueDataGrid): Added. Helper to create a simple grid.
+        * UserInterface/Utilities.js:
+        (parseLocationQueryParameters): Use the queryString function after trimming the "?".
+        (queryString): Added. Factored out of parseLocationQueryParameters.
+        (queryString.decode): Added. Properly decode "+" as " ".
+
+2012-01-26  Timothy Hatcher  <timothy@apple.com>
+
+        Add the start of WebInspector.ResourceDetailsSidebarPanel.
+
+        Part of: <rdar://problem/10319511> Implement the File inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Main.html: Included ResourceDetailsSidebarPanel.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create a WebInspector.ResourceDetailsSidebarPanel.
+        * UserInterface/ResourceDetailsSidebarPanel.js: Added.
+        (WebInspector.ResourceDetailsSidebarPanel):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype.inspect):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype.get resource):
+        (WebInspector.ResourceDetailsSidebarPanel.prototype.refresh):
+
+2012-01-29  Timothy Hatcher  <timothy@apple.com>
+
+        Add DetailsSection and friends to be used by details sidebar panels.
+
+        Needed for:
+        <rdar://problem/10319511> Implement the File inspector for the new Web Inspector design
+        <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+        <rdar://problem/10319527> Implement the DOM Attributes inspector for the new Web Inspector design
+        <rdar://problem/10319536> Implement the Metrics inspector for the new Web Inspector design
+        <rdar://problem/10319541> Implement the Properties/DOM object inspector for the new Web Inspector design
+        <rdar://problem/10319546> Implement the Event Listener inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DetailsSection.css: Added.
+        (.details-section):
+        (.details-section > .header):
+        (.details-section > .header::before):
+        (.details-section > .header:active::before):
+        (.details-section.collapsed > .header::before):
+        (.details-section.collapsed > .header:active::before):
+        (.details-section > .content):
+        (.details-section.collapsed > .content):
+        (.details-section > .content > .group):
+        (.details-section > .content > .group:nth-child(even)):
+        (.details-section > .content > .group:nth-child(even) > .row:first-child > *):
+        (.details-section > .content > .group:nth-child(even) > .row:last-child > *):
+        (.details-section > .content > .group > .row):
+        (.details-section > .content > .group > .row:last-child > *):
+        (.details-section > .content > .group > .row.empty):
+        (.details-section > .content > .group:nth-child(even) > .row.empty:last-child):
+        (.details-section > .content > .group:nth-child(even) > .row.empty:last-child > *):
+        (.details-section > .content > .group:nth-child(even) > .row.empty:last-child > * > *):
+        (.details-section > .content > .group > .row > *):
+        (.details-section > .content > .group > .row > .label):
+        (.details-section > .content > .group > .row > .value):
+        (.details-section > .content > .group > .data-grid-row):
+        (.details-section > .content > .group > .data-grid-row.empty):
+        (.details-section > .content .data-grid):
+        * UserInterface/DetailsSection.js: Added.
+        (WebInspector.DetailsSection):
+        (WebInspector.DetailsSection.prototype.get element):
+        (WebInspector.DetailsSection.prototype.get title):
+        (WebInspector.DetailsSection.prototype.set title):
+        (WebInspector.DetailsSection.prototype.get collapsed):
+        (WebInspector.DetailsSection.prototype.set collapsed):
+        (WebInspector.DetailsSection.prototype.get groups):
+        (WebInspector.DetailsSection.prototype.set groups):
+        (WebInspector.DetailsSection.prototype._headerElementClicked):
+        (WebInspector.DetailsSection.prototype._generateDisclosureTrianglesIfNeeded.disclosureImageLoaded):
+        (WebInspector.DetailsSection.prototype._generateDisclosureTrianglesIfNeeded.generateDisclosureTriangle):
+        (WebInspector.DetailsSection.prototype._generateDisclosureTrianglesIfNeeded):
+        * UserInterface/DetailsSectionDataGridRow.js: Added.
+        (WebInspector.DetailsSectionDataGridRow):
+        (WebInspector.DetailsSectionDataGridRow.prototype.constructor.WebInspector.DetailsSectionDataGridRow.get element):
+        (WebInspector.DetailsSectionDataGridRow.prototype.get emptyMessage):
+        (WebInspector.DetailsSectionDataGridRow.prototype.set emptyMessage):
+        (WebInspector.DetailsSectionDataGridRow.prototype.get dataGrid):
+        (WebInspector.DetailsSectionDataGridRow.prototype.set dataGrid):
+        * UserInterface/DetailsSectionGroup.js: Added.
+        (WebInspector.DetailsSectionGroup):
+        (WebInspector.DetailsSectionGroup.prototype.get element):
+        (WebInspector.DetailsSectionGroup.prototype.get rows):
+        (WebInspector.DetailsSectionGroup.prototype.set rows):
+        * UserInterface/DetailsSectionRow.js: Added.
+        (WebInspector.DetailsSectionRow):
+        (WebInspector.DetailsSectionRow.prototype.get element):
+        (WebInspector.DetailsSectionRow.prototype.get label):
+        (WebInspector.DetailsSectionRow.prototype.set label):
+        (WebInspector.DetailsSectionRow.prototype.get value):
+        (WebInspector.DetailsSectionRow.prototype.set value):
+        * UserInterface/Main.html: Included DetailsSection.{css,js}, DetailsSectionDataGridRow.js,
+        DetailsSectionGroup.js, and DetailsSectionRow.js.
+
+2012-01-26  Timothy Hatcher  <timothy@apple.com>
+
+        Selectively show and hide panels in the Details sidebar based on if they can inspect the current
+        represented objects being viewed in the content browser.
+
+        Needed for:
+        <rdar://problem/10319511> Implement the File inspector for the new Web Inspector design
+        <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+        <rdar://problem/10319527> Implement the DOM Attributes inspector for the new Web Inspector design
+        <rdar://problem/10319536> Implement the Metrics inspector for the new Web Inspector design
+        <rdar://problem/10319541> Implement the Properties/DOM object inspector for the new Web Inspector design
+        <rdar://problem/10319546> Implement the Event Listener inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Added event listener for CurrentRepresentedObjectsDidChange event.
+        (WebInspector._contentBrowserRepresentedObjectsDidChange): Added. Call inspect on each details
+        sidebar panel and show ones that return true and hide ones that return false.
+
+2012-01-26  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.DetailsSidebarPanel for use by panels in the Details sidebar.
+
+        Needed for:
+        <rdar://problem/10319511> Implement the File inspector for the new Web Inspector design
+        <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+        <rdar://problem/10319527> Implement the DOM Attributes inspector for the new Web Inspector design
+        <rdar://problem/10319536> Implement the Metrics inspector for the new Web Inspector design
+        <rdar://problem/10319541> Implement the Properties/DOM object inspector for the new Web Inspector design
+        <rdar://problem/10319546> Implement the Event Listener inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DetailsSidebarPanel.js: Added.
+        (WebInspector.DetailsSidebarPanel):
+        (WebInspector.DetailsSidebarPanel.prototype.inspect):
+        (WebInspector.DetailsSidebarPanel.prototype.shown):
+        (WebInspector.DetailsSidebarPanel.prototype.needsRefresh):
+        (WebInspector.DetailsSidebarPanel.prototype.refresh):
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar.prototype.set selectedSidebarPanel): Call hidden and shown on the SidebarPanel.
+        (WebInspector.Sidebar.prototype.set collapsed): Update layout of the navigation bar when uncollapsed.
+        * UserInterface/SidebarPanel.js:
+        (WebInspector.SidebarPanel.prototype.shown): Added stub.
+        (WebInspector.SidebarPanel.prototype.hidden): Added stub.
+
+2012-01-26  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for removing and inserting SidebarPanels to WebInspector.Sidebar.
+
+        Needed for:
+        <rdar://problem/10319511> Implement the File inspector for the new Web Inspector design
+        <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+        <rdar://problem/10319527> Implement the DOM Attributes inspector for the new Web Inspector design
+        <rdar://problem/10319536> Implement the Metrics inspector for the new Web Inspector design
+        <rdar://problem/10319541> Implement the Properties/DOM object inspector for the new Web Inspector design
+        <rdar://problem/10319546> Implement the Event Listener inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype.removeNavigationItem): Clear the selected navigation item if it is this.
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar.prototype.insertSidebarPanel): Added.
+        (WebInspector.Sidebar.prototype.removeSidebarPanel): Added.
+        (WebInspector.Sidebar.prototype.set selectedSidebarPanel): Allow setting of null. Factored out code into _findSidebarPanel.
+        (WebInspector.Sidebar.prototype._findSidebarPanel): Added.
+
+2012-01-25  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for getting the current represented objects from ContentBrowser.
+
+        Needed for:
+        <rdar://problem/10319511> Implement the File inspector for the new Web Inspector design
+        <rdar://problem/10319520> Implement the Style inspector for the new Web Inspector design
+        <rdar://problem/10319527> Implement the DOM Attributes inspector for the new Web Inspector design
+        <rdar://problem/10319536> Implement the Metrics inspector for the new Web Inspector design
+        <rdar://problem/10319541> Implement the Properties/DOM object inspector for the new Web Inspector design
+        <rdar://problem/10319546> Implement the Event Listener inspector for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser.prototype.get currentRepresentedObjects): Added.
+        (WebInspector.ContentBrowser.prototype._updateContentViewSelectionPathNavigationItem): Make sure to set
+        components even if it is empty.
+        (WebInspector.ContentBrowser.prototype._dispatchCurrentRepresentedObjectsDidChangeEventSoon): Set a timeout.
+        (WebInspector.ContentBrowser.prototype._dispatchCurrentRepresentedObjectsDidChangeEventSoon.delayed): Fire the event.
+        (WebInspector.ContentBrowser.prototype._contentViewSelectionPathComponentDidChange): Call
+        _dispatchCurrentRepresentedObjectsDidChangeEventSoon.
+        (WebInspector.ContentBrowser.prototype._currentContentViewDidChange): Call
+        _dispatchCurrentRepresentedObjectsDidChangeEventSoon.
+        * UserInterface/DOMTreeElementPathComponent.js:
+        (WebInspector.DOMTreeElementPathComponent): Set the representedObject to the treeElement.representedObject if
+        a representedObject wasn't passed in.
+        * UserInterface/GeneralTreeElementPathComponent.js:
+        (WebInspector.GeneralTreeElementPathComponent): Set the representedObject to the treeElement.representedObject if
+        a representedObject wasn't passed in.
+        * UserInterface/HierarchicalPathNavigationItem.js:
+        (WebInspector.HierarchicalPathNavigationItem.prototype.get lastComponent): Added.
+
+2012-01-26  Timothy Hatcher  <timothy@apple.com>
+
+        Center align navigation items in navigation bars by default.
+
+        You can still get left alignment by adding a flexible space on the left. This make it easier than
+        flexible spaces on each side for center alignment.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/NavigationBar.css:
+        (.navigation-bar): Set -webkit-box-pack to center.
+
+2012-01-29  Timothy Hatcher  <timothy@apple.com>
+
+        Add a helper function for display names of resource types.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/FrameTreeElement.js:
+        (WebInspector.FrameTreeElement.prototype._folderNameForResourceType): Use WebInspector.Resource.Type.displayName.
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.Type.displayName): Added. Can return plural or singular strings.
+
+2012-01-29  Timothy Hatcher  <timothy@apple.com>
+
+        Update the request headers when resources are redirected.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWillBeSent): Pass along the
+        request headers to updateForRedirectResponse.
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.get updateForRedirectResponse): Added requestHeaders parameter.
+        Set _requestHeaders and fire the RequestHeadersDidChange event.
+
+2012-01-29  Timothy Hatcher  <timothy@apple.com>
+
+        Centralize the code that adds zero-width spaces to long strings so it can be used
+        in other places.
+
+        Also add a copy event listener that strips the zero-width spaces from the pasteboard.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype._buildAttributeDOM): Use insertWordBreakCharacters.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Added copy event listener.
+        (WebInspector._sanitizeClipboardData): Added.
+        * UserInterface/Utilities.js:
+        (String.prototype.insertWordBreakCharacters): Added.
+        (String.prototype.removeWordBreakCharacters): Added.
+
+2012-01-27  Brian Weinstein  <bweinstein@apple.com>
+
+        Create a log session when the inspector is first loaded.
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel):
+
+2012-01-27  Brian Weinstein  <bweinstein@apple.com>
+
+        Add some functions for open source needed to create links and strings.
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/LogContentView.js:
+        (WebInspector.LogContentView): Add a click handler to the content view.
+        (WebInspector.LogContentView.prototype._mouseWasClicked): Find the <a> element we clicked on,
+            and open the URL. This does the right thing for external resources (loads them in Safari),
+            and resources from the page (loads the Resource in the inspector).
+        * UserInterface/Main.js:
+        (WebInspector.linkifyURLAsNode): Copied from open source.
+        (WebInspector.linkifyStringAsFragmentWithCustomLinkifier): Ditto.
+        (WebInspector.linkifyStringAsFragment): Ditto.
+
+2012-01-27  Brian Weinstein  <bweinstein@apple.com>
+
+        Show the DOM tree for an element that the user enters.
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ConsoleMessageImpl.js:
+        (WebInspector.ConsoleMessageImpl.prototype._formatParameterAsNode): Create a DOMTreeOutline instead
+            of an ElementTreeOutline, and get the node from the DOMTreeManager.
+
+2012-01-26  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Add working versions of LogContentView.css and LogContentView.js.
+
+        LogContentView.css copied rules for open source's
+        inspector.css, with one change to add outline: none to the prompt and a change to use the same font that
+        we use in the text editor.
+
+        LogContentView.js changed *styleClass to classList.*, and removed calls to objects that we don't have in
+        our inspector (WebInspector.settings, WebInspector.debuggerPresentationModel).
+
+        This patch makes the console view show up, and you can type and run JavaScript.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/LogContentView.css: Added. Copied selected rules from inspector.css in Open Source.
+        * UserInterface/LogContentView.js: Added. This file was copied from Open Source, but changes have been
+            made to remove calls to objects that we don't have in our inspector (WebInspector.settings, WebInspector.debuggerPresentationModel),
+            and *styleClass has been changed to classList.*.
+        * UserInterface/Main.html: Added new files.
+
+2012-01-26  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Add some needed functions to Utilities.js. These were copied from Open Source, but switched over
+        to the Object.defineProperty syntax.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/Utilities.js:
+
+2012-01-26  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Add the ConsoleMessage and ConsoleMessageImpl files from Open Source. These will be renamed
+        and combined in a follow-up patch.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ConsoleMessage.js: Added. Copied from Open Source's ConsoleModel.js.
+        * UserInterface/ConsoleMessageImpl.js: Added. Copied from Open Source. The only changes are
+            changing *styleClass -> classList.*.
+        * UserInterface/Main.html: Added new files.
+
+2012-01-26  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Add the TextPrompt.js and TextPrompt.css files. These are needed for autocompleting of the
+        user's input.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/Main.html: Add new files.
+        * UserInterface/TextPrompt.css: Added. Copied from Open Source.
+        * UserInterface/TextPrompt.js: Added. Copied from Open Source. The only changes that were
+            made were changing *styleClass("class") -> classList.*("class").
+
+2012-01-26  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Add some images that will be needed by the log console view.
+
+        These need to be in HiDPI. I updated <rdar://problem/10749265> to say that the console images
+        need to be HiDPI as well.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/Images/disclosureTriangleSmallDown.png: Added.
+        * UserInterface/Images/disclosureTriangleSmallRight.png: Added.
+        * UserInterface/Images/errorIcon.png: Added.
+        * UserInterface/Images/searchSmallBrightBlue.png: Added.
+        * UserInterface/Images/userInputIcon.png: Added.
+        * UserInterface/Images/userInputResultIcon.png: Added.
+        * UserInterface/Images/warningIcon.png: Added.
+
+2012-01-26  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Add some needed files from Open Source.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/Images/deleteIcon.png: Added.
+        * UserInterface/Main.html: Added new files.
+        * UserInterface/ObjectPropertiesSection.js: Added. Copied from Open Source.
+        * UserInterface/PropertiesSection.js: Added. Copied from Open Source.
+        * UserInterface/Section.css: Added. Copied selected rules about .section and .properties-tree from Open Source.
+        * UserInterface/Section.js: Added. Copied from Open Source.
+
+2012-01-26  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        This patch hooks up the plumbing to show a LogContentView (which doesn't exist), when a tree element
+        from the Log sidebar panel is selected.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView): Add a case for LogObject. It creates a LogContentView, which isn't available
+            yet, but will be in a later patch.
+        (WebInspector.ContentView.isViewable): Ditto.
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel):
+        (WebInspector.LogSidebarPanel.prototype._treeElementSelected): Make sure the selected element
+            has a LogObject as its represented object, and then show the correct content view.
+        * UserInterface/Main.js:
+        (WebInspector.contentBrowserTreeElementForRepresentedObject): Add a case for LogObject.
+
+
+2012-01-26  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Add a stub LogObject and use that as the represented object for the logs sidebar panel.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/LogObject.js: Added.
+        (WebInspector.LogObject):
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel.prototype._sessionStarted):
+        * UserInterface/Main.html:
+
+2012-01-26  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Add tree elements to the Log Sidebar. Each tree element has the URL and date of when the page started loading,
+        and selecting it will show a console view in the future.
+
+        If the same page is loaded, the console sidebar isn't cleared, but when a page with a different URL is loaded,
+        then the sidebar is cleared.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/LogManager.js:
+        (WebInspector.LogManager):
+        (WebInspector.LogManager.prototype.constructor.WebInspector.LogManager.initialize):
+        (WebInspector.LogManager.prototype._mainResourceDidChange):
+        * UserInterface/LogSidebarPanel.js:
+        (WebInspector.LogSidebarPanel):
+        (WebInspector.LogSidebarPanel.prototype.constructor.WebInspector.LogSidebarPanel._sessionStarted):
+        (WebInspector.LogSidebarPanel.prototype._logsCleared):
+
+2012-01-26  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Add a stub LogManager, and call it from Main.js.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ConsoleObserver.js:
+        (WebInspector.ConsoleObserver.prototype.constructor.WebInspector.ConsoleObserver.messageAdded):
+        * UserInterface/LogManager.js: Added.
+        (WebInspector.LogManager):
+        (WebInspector.LogManager.prototype.constructor.WebInspector.LogManager.initialize):
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+
+2012-01-26  Brian Weinstein  <bweinstein@apple.com>
+
+        Start of <rdar://problem/10318784> Implement the Log sidebar for the new Web Inspector design.
+
+        Add a stub LogSidebarPanel and create it instead of a generic sidebar panel for Log.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+
+2012-01-25  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318761> Implement the Issue sidebar for the new Web Inspector design.
+
+        Highlight lines that have errors or warnings. This patch doesn't behave correctly for lines that
+        have multiple issues, but that won't be implemented until we actually show the issues on the page.
+
+        This patch adds a new delegate call to TextEditor - textEditorLineContentUpdated. When a single line's
+        content is updated, it calls to the delegate, which will add a style class if there is an issue on that
+        line. In the future, it will also add the error text, but that will be done later as well.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/TextResourceContentView.css:
+        (.text-editor .text-editor-text-chunk.error): Add a background color and a box shadow.
+        (.text-editor .text-editor-text-chunk.warning): Ditto.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.singleLineElementForLine): Returns the element of the line if it is
+            a single line (if it's not, it isn't visible and we don't need to worry about it).
+        (WebInspector.TextEditorTextChunk.prototype.updateContent):
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.prototype.addIssue): Call _addIssueToLine if we have an element to update.
+        (WebInspector.TextResourceContentView.prototype._addIssueToLine): Add a style class to the line if there is an
+            issue.
+        (WebInspector.TextResourceContentView.prototype.textEditorLineContentUpdated): Call _addIssueToLine if we have
+            any issues on that line.
+        * UserInterface/IssueManager.js
+        (WebInspector.IssueManager.prototype.issueWasAdded): We are given 1-based line numbers from the protocol, but everywhere
+            in the inspector deals with 0 based line numbers. Subtract 1 from the issue line number that we are given before
+            storing the IssueMessage.
+
+2012-01-24  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318761> Implement the Issue sidebar for the new Web Inspector design.
+
+        When a TextResourceContentView is instantiated, get a list of issues for its resource, and start listening for more.
+
+        When we get an issue from the listener or from the constructor, call _addIssue on them, which adds the issue to
+        the content view's collection of issues.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView): Start listening for issues and build a list of issues.
+        (WebInspector.TextResourceContentView.prototype._issueWasAdded): Call _addIssue.
+        (WebInspector.TextResourceContentView.prototype._addIssue): Add the issue to our list of issues, and add a FIXME to do more
+            with it.
+
+2012-01-23  Brian Weinstein  <bweinstein@apple.com>
+
+        Remove some unused variables.
+
+        Rubber-stamped by Joseph Pecoraro.
+
+        * UserInterface/TextEditor.js:
+
+2012-01-23  Brian Weinstein  <bweinstein@apple.com>
+
+        Last part of <rdar://problem/10318754> Implement the Search sidebar for the new Web Inspector design.
+
+        When a resource match is selected in the search sidebar, select the text that was searched for in
+        the TextContentResourceView and scroll it into view.
+
+        This makes it easier to find the text that the user searched for in long lines.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView.prototype.showSourceCode): Pass the text range to select along.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.showResourceSourceCode): Ditto.
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel.prototype._treeElementSelected): Ditto.
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.prototype.contentAvailable): Ditto.
+        (WebInspector.TextResourceContentView.prototype.revealLine): Ditto.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.shown): Ditto.
+        (WebInspector.TextEditor.prototype.revealLine): Build a selection range (start and end nodes and offsets), and set our selection
+            and bring the container of the selection end into view.
+        (WebInspector.TextEditor.prototype.revealLine.getTextNodes): Finds all of the text nodes in a possibly syntax highlighted line.
+        (WebInspector.TextEditor.prototype.revealLine.findOffsetInTextNodes): Iterate over all of the text nodes, and find the child
+            node and offset into the child node that matches the offset into the whole line.
+
+2012-01-23  Timothy Hatcher  <timothy@apple.com>
+
+        Fix some errors when inspecting frames now that #document is included in the tree.
+
+        This gives document nodes their own "D" icon, which was previously missing because of
+        a typo for the "N" icon.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMTreeElementPathComponent.js:
+        (WebInspector.DOMTreeElementPathComponent): Add a case for Node.DOCUMENT_NODE. Fix a typo
+        by using DOMNodeIconStyleClassName instead of DOMUnknownNodeIconStyleClassName.
+        * UserInterface/Images/DOMDocument.pdf: Added.
+        * UserInterface/PathComponentIcons.css:
+        (.dom-document-icon .icon): Added.
+
+2012-01-23  Timothy Hatcher  <timothy@apple.com>
+
+        Merge the DOMAgent.js change in r105620 so the Inspect Element content menu works in frames.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMNode.js:
+        (WebInspector.DOMNode.prototype._setChildrenPayload): Return early for frame elements.
+
+2012-01-23  Timothy Hatcher  <timothy@apple.com>
+
+        Make command-clicking links in the DOM tree always open into a new Safari window/tab.
+
+        Since DOMTreeContentView delays the call to WebInspector.openURL, the openURL function
+        can't look at window.event to see if the command key is down. So we need to do that
+        check before calling openURL.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView.prototype._mouseWasClicked.followLink): Check for metaKey
+        and pass that as alwaysOpenExternally to WebInspector.openURL.
+
+2012-01-23  Timothy Hatcher  <timothy@apple.com>
+
+        Use InspectorFrontendHost.openInNewTab instead of PageAgent.open now that
+        https://webkit.org/b/74790 is fixed.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Main.js:
+        (WebInspector.openURL): Use InspectorFrontendHost.openInNewTab instead of PageAgent.open.
+
+2012-01-23  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318754> Implement the Search sidebar for the new Web Inspector design.
+
+        Support the ability to have multiple matches on a line when we search the DOM.
+
+        When we find a DOM element matches our search term, we generate a title for it (by moving the _generateTitle
+        function from DOMSearchMatchObject out of the class to a static method), and find all of our matches in the title.
+
+        We then generate DOMSearchMatchObjects and SearchResultTreeElements for each of these.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DOMSearchMatchObject.js:
+        (WebInspector.DOMSearchMatchObject):
+        (WebInspector.DOMSearchMatchObject.prototype.get title): Returns the title.
+        (WebInspector.DOMSearchMatchObject.prototype.get textRange): Returns the text range.
+        (WebInspector.DOMSearchMatchObject.titleForDOMNode):
+        * UserInterface/SearchResultTreeElement.js:
+        (WebInspector.SearchResultTreeElement.truncateAndHighlightTitle): We always have a textRange now, both DOMSearchMatchObject and ResourceSearchMatchObject
+            both have a textRange getter.
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel._searchFieldChanged.domCallback.domSearchResults): Generate
+            the text for the DOM node that we found a result for, and find all of the matching instances in that node.
+
+
+2012-01-23  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318754> Implement the Search sidebar for the new Web Inspector design.
+
+        Support the ability to have multiple matches on a line for when we search in a resource.
+
+        When the PageAgent gives us information about the lines that match our search query, instead of just
+        finding the first match, find all of the matches on that line. Create a ResourceSearchMatchObject and
+        SearchResultTreeElement for each result on the line.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ResourceSearchMatchObject.js:
+        (WebInspector.ResourceSearchMatchObject): Set the textRange
+        (WebInspector.ResourceSearchMatchObject.prototype.get textRange):
+        * UserInterface/SearchResultTreeElement.js:
+        (WebInspector.SearchResultTreeElement):
+        (WebInspector.SearchResultTreeElement.truncateAndHighlightTitle): If we were given a text range, use that instead of finding the first match
+            in the title.
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel._searchFieldChanged.resourcesCallback.resourceCallback): Find
+            all of the matches on the line instead of just the first one.
+
+2012-01-23  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318754> Implement the Search sidebar for the new Web Inspector design.
+
+        Bring TextRange over from open source.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/TextRange.js: Added.
+        (WebInspector.TextRange):
+        (WebInspector.TextRange.prototype.constructor.WebInspector.TextRange.isEmpty):
+        (WebInspector.TextRange.prototype.get linesCount):
+        (WebInspector.TextRange.prototype.collapseToEnd):
+        (WebInspector.TextRange.prototype.normalize):
+        (WebInspector.TextRange.prototype.clone):
+
+2012-01-20  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318754> Implement the Search sidebar for the new Web Inspector design.
+
+        Cancel old searches when new ones are started.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel._searchFieldChanged.domCallback.domSearchResults): Check
+            to make sure we are still appending results for the right searchId.
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel._searchFieldChanged.domCallback): Set the current _searchId.
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel._searchFieldChanged): Call _cancelCurrentSearch.
+        (WebInspector.SearchSidebarPanel.prototype._cancelCurrentSearch): If a search ID is set, call DOMAgent.discardSearchResults on it,
+            and delete the searchId.
+
+2012-01-22  Timothy Hatcher  <timothy@apple.com>
+
+        Collaspe path components in the navigation bar when they are too wide to fit.
+
+        The components collapse from left to right with text truncation and eventually to just the icon.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/HierarchicalPathComponent.css:
+        (.hierarchical-path-component): Use -webkit-box and set a min-width.
+        (.hierarchical-path-component > .title): Use -webkit-box so the title can flex.
+        (.hierarchical-path-component > .title > .content): Added. Needed to make text-overflow work.
+        (.hierarchical-path:not(.always-show-last-path-component-separator) > .hierarchical-path-component:last-child): Added.
+        Use a different min-width since the separator is hidden.
+        (.hierarchical-path:not(.always-show-last-path-component-separator) > .hierarchical-path-component:last-child > .separator):
+        Renamed to use :last-child instead of :last-of-type.
+        * UserInterface/HierarchicalPathComponent.js:
+        (WebInspector.HierarchicalPathComponent): Create a title content element.
+        (WebInspector.HierarchicalPathComponent.prototype.get displayName): Use the title content element.
+        (WebInspector.HierarchicalPathComponent.prototype.set displayName): Ditto. Also set the tool tip.
+        (WebInspector.HierarchicalPathComponent.prototype.get forcedWidth): Added.
+        (WebInspector.HierarchicalPathComponent.prototype.set forcedWidth): Added.
+        * UserInterface/HierarchicalPathNavigationItem.js:
+        (WebInspector.HierarchicalPathNavigationItem.prototype.set components): Call updateLayout on the NavigationBar.
+        (WebInspector.HierarchicalPathNavigationItem.prototype.updateLayout): Added.
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype.insertNavigationItem): Set _parentNavigationBar to this.
+        (WebInspector.NavigationBar.prototype.removeNavigationItem): Set _parentNavigationBar to null.
+        (WebInspector.NavigationBar.prototype.updateLayout): Call updateLayout on each navigation item.
+        * UserInterface/NavigationItem.js:
+        (WebInspector.NavigationItem.prototype.get parentNavigationBar): Added.
+        (WebInspector.NavigationItem.prototype.updateLayout): Added stub.
+
+2012-01-22  Timothy Hatcher  <timothy@apple.com>
+
+        Make it possible for content views to update their layout as the size of the content area changes.
+
+        The DOM tree needs this to update the size of the selection to stay aligned with the row. Data grid
+        based content views need this to update the position of the resizer elements. The font content view
+        uses this to update the size of the font preview.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ClusterContentView.js:
+        (WebInspector.ClusterContentView.prototype.updateLayout): Added. Call through to the current content view.
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser.prototype.updateLayout): Added. Call updateLayout on the navigation bar and
+        the content view container.
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView.prototype.updateLayout): Added stub.
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer.prototype.updateLayout): Added. Call through to the current content view.
+        * UserInterface/CookieStorageContentView.js:
+        (WebInspector.CookieStorageContentView.prototype.updateLayout): Added. Call updateWidths on the DataGrid.
+        * UserInterface/DOMStorageContentView.js:
+        (WebInspector.DOMStorageContentView.prototype.updateLayout): Added. Call updateWidths on the DataGrid.
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView.prototype.updateLayout): Added. Call updateSelection on the DOMTreeOutline.
+        * UserInterface/DatabaseTableContentView.js:
+        (WebInspector.DatabaseTableContentView.prototype.updateLayout): Added. Call updateWidths on the DataGrid.
+        * UserInterface/FontResourceContentView.js:
+        (WebInspector.FontResourceContentView.prototype.updateLayout): Added. Call sizeToFit.
+        (WebInspector.FontResourceContentView.prototype.shown): Removed call to sizeToFit since updateLayout is
+        called on show too.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Added event listeners for Sidebar.Event.WidthDidChange and window resize.
+        (WebInspector._contentBrowserSizeDidChange): Added. Call updateLayout on contentBrowser.
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar.prototype.set width): Fire WidthDidChange event.
+        (WebInspector.Sidebar.prototype.set collapsed): Ditto.
+
+2012-01-21  Timothy Hatcher  <timothy@apple.com>
+
+        Remove resources from the Search and Issue sidebars when the frames they belong to are
+        removed or navigated to a new page.
+
+        Part of:
+        <rdar://problem/10318754> Implement the Search sidebar for the new Web Inspector design
+        <rdar://problem/10318761> Implement the Issue sidebar for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Frame.js:
+        (WebInspector.Frame.prototype.isDetached): Added. Helper function.
+        * UserInterface/IssueSidebarPanel.js:
+        (WebInspector.IssueSidebarPanel): Added event listeners.
+        (WebInspector.IssueSidebarPanel.prototype._checkForOldResources): Added.
+        (WebInspector.IssueSidebarPanel.prototype._checkForOldResources.delayedWork): Added.
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel): Added event listeners.
+        (WebInspector.SearchSidebarPanel.prototype._checkForOldResources): Added.
+        (WebInspector.SearchSidebarPanel.prototype._checkForOldResources.delayedWork): Added.
+
+2012-01-21  Timothy Hatcher  <timothy@apple.com>
+
+        Disassociate resources from their frame when the main resource changes.
+
+        Resources were not being disassociated, so they always had a valid parentFrame. This made it
+        hard to tell if a resource was still part of the page or not. This change is needed so the Search
+        and Issue sidebars knows when it can remove resources during navigation.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Frame.js:
+        (WebInspector.Frame.prototype.initialize): Call _disassociateWithResource for the old main resource.
+        (WebInspector.Frame.prototype.commitProvisionalLoad): Ditto. Also call removeAllResources before
+        committing the provisional resources.
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.isMainResource): Null check _parentFrame.
+        (WebInspector.Resource.prototype._requestContentFromBackend): Null check _parentFrame and add a
+        fallback branch so pending callbacks get notified.
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement.prototype._updateTitles): Null check frame.
+
+2012-01-21  Timothy Hatcher  <timothy@apple.com>
+
+        Show a focus ring around the search field in the Search sidebar of the Web Inspector.
+
+        The filter field does not show a focus ring (matching Xcode), but the search field should.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/FilterBar.css:
+        (.filter-bar): Remove outline: none. Not sure why it was here, it is still set on
+        .filter-bar > input[type="search"].
+        * UserInterface/SearchSidebarPanel.css:
+        (.sidebar > .panel.search > .search-bar): Remove outline: none.
+        (.sidebar > .panel.search > .search-bar > input[type="search"]): Ditto.
+
+2012-01-21  Timothy Hatcher  <timothy@apple.com>
+
+        Make filtering work again in the Search sidebar of the Web Inspector.
+
+        In r40218 the mainTitle became a DocumentFragemnt, but the filtering code expects a string.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/SearchResultTreeElement.js:
+        (WebInspector.SearchResultTreeElement.prototype.get filterableData): Added. Return the raw
+        title of the represented object, which is still a string.
+
+2012-01-20  Timothy Hatcher  <timothy@apple.com>
+
+        Allow resizing the Web Inspector when docked.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Main.css:
+        (#docked-resizer): Added.
+        (body.docked #docked-resizer): Added.
+        * UserInterface/Main.html: Added #docked-resizer element.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Add mousedown listener on #docked-resizer.
+        (WebInspector._dockedResizerMouseDown): Added.
+        (WebInspector._dockedResizerMouseDown.dockedResizerDrag): Added.
+        (WebInspector._dockedResizerMouseDown.dockedResizerDragEnd): Added.
+
+2012-01-20  Timothy Hatcher  <timothy@apple.com>
+
+        Add dock toggle and close buttons to the new Web Inspector.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ButtonNavigationItem.css:
+        (.navigation-bar > .item.button:not(.disabled):not(.radio):not(.suppress-bezel):active):
+        Added :not(.suppress-bezel).
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem.prototype.get suppressBezel): Added.
+        (WebInspector.ButtonNavigationItem.prototype.set suppressBezel): Added.
+        * UserInterface/Images/Close.pdf: Added.
+        * UserInterface/Images/Dock.pdf: Added.
+        * UserInterface/Images/Undock.pdf: Added.
+        * UserInterface/InspectorFrontendAPI.js: Added.
+        (InspectorFrontendAPI._loaded): Added.
+        (InspectorFrontendAPI._pendingCommands): Added.
+        (InspectorFrontendAPI.isDebuggingEnabled): Added stub.
+        (InspectorFrontendAPI.setDebuggingEnabled): Added stub.
+        (InspectorFrontendAPI.isTimelineProfilingEnabled): Added stub.
+        (InspectorFrontendAPI.setTimelineProfilingEnabled): Added stub.
+        (InspectorFrontendAPI.isProfilingJavaScript): Added stub.
+        (InspectorFrontendAPI.startProfilingJavaScript): Added stub.
+        (InspectorFrontendAPI.stopProfilingJavaScript): Added stub.
+        (InspectorFrontendAPI.setAttachedWindow): Added. Calls updateDockedState.
+        (InspectorFrontendAPI.showConsole): Added stub.
+        (InspectorFrontendAPI.dispatch): Added stub.
+        (InspectorFrontendAPI.loadCompleted): Added stub.
+        * UserInterface/Main.css:
+        (body.docked): Added. Adds a top border.
+        * UserInterface/Main.html: Included InspectorFrontendAPI.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create and insert the dock toggle and close buttons. Tell InspectorFrontendAPI
+        that we are loaded so pending commands are dispatched.
+        (WebInspector.updateDockedState): Added. Updates the sate of the navigation bar buttons.
+        (WebInspector.close): Added.
+        (WebInspector._dockToggleButtonToolTip): Added.
+        (WebInspector._toggleDockedState): Added.
+        * UserInterface/Utilities.js:
+        (parseLocationQueryParameters): Added. Helper to parse the query string.
+
+2012-01-19  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318754> Implement the Search sidebar for the new Web Inspector design.
+
+        Instead of passing a string as a title to the GeneralTreeElement, pass a DocumentFragment which
+        contains our necessary text, but highlights the search string.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/GeneralTreeElement.js:
+        (WebInspector.GeneralTreeElement.prototype._updateTitleElements): Add a special case for _mainTitle
+            being a Node.
+        * UserInterface/NavigationSidebarPanel.css:
+        (.navigation-sidebar-panel-content-tree-outline .item .highlight): Set the highlighted text to have
+            a yellow background with a darker yellow bottom border to match Xcode.
+        * UserInterface/SearchResultTreeElement.js:
+        (WebInspector.SearchResultTreeElement.truncateAndHighlightTitle): Create a document fragment, and
+            break the matching text into parts (before match, match, after match), and add a span around
+            the matching text.
+
+2012-01-19  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318754> Implement the Search sidebar for the new Web Inspector design.
+
+        Implement proper truncation of the search results, so the search term will always show up in the
+        title text of the search term
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DOMSearchMatchObject.js:
+        (WebInspector.DOMSearchMatchObject.prototype.get searchTerm): Return the search term.
+        * UserInterface/ResourceSearchMatchObject.js:
+        (WebInspector.ResourceSearchMatchObject.prototype.get searchTerm): Ditto.
+        * UserInterface/SearchResultTreeElement.js:
+        (WebInspector.SearchResultTreeElement): Call truncateAndHighlightTitle.
+        (WebInspector.SearchResultTreeElement.truncateAndHighlightTitle): Truncate the title, and
+            add a FIXME about highlighting it.
+
+2012-01-19  Timothy Hatcher  <timothy@apple.com>
+
+        Make selecting an issue in the Issue sidebar show the resource's content view and reveal the line.
+
+        Part of: <rdar://problem/10318761> Implement the Issue sidebar for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ConsoleObserver.js:
+        (WebInspector.ConsoleObserver.prototype.messageAdded): Pass line to IssueManager.
+        * UserInterface/IssueManager.js:
+        (WebInspector.IssueManager.prototype.issueWasAdded): Added lineNumber parameter.
+        * UserInterface/IssueMessage.js:
+        (WebInspector.IssueMessage): Added lineNumber parameter.
+        (WebInspector.IssueMessage.prototype.get lineNumber): Added.
+        * UserInterface/IssueSidebarPanel.js:
+        (WebInspector.IssueSidebarPanel): Set onselect to _treeElementSelected.
+        (WebInspector.IssueSidebarPanel.prototype._treeElementSelected): Added. Call showResourceSourceCode
+        based on the type of tree element selected.
+        * UserInterface/IssueTreeElement.js:
+        (WebInspector.IssueTreeElement): Added _issueMessage.
+        (WebInspector.IssueTreeElement.prototype.get issueMessage): Added.
+
+2012-01-19  Timothy Hatcher  <timothy@apple.com>
+
+        Make selecting the resource in the search sidebar show the resource.
+
+        Part of: <rdar://problem/10318754> Implement the Search sidebar for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.showResource): Added.
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel.prototype._treeElementSelected): Call ResourceSidebarPanel.showResource
+        if the tree element is a ResourceTreeElement.
+
+2012-01-19  Timothy Hatcher  <timothy@apple.com>
+
+        Make selecting text search results show the resource's content view and reveal the line.
+
+        Part of: <rdar://problem/10318754> Implement the Search sidebar for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView.prototype.showSourceCode): Added lineNumberToReveal parameter.
+        * UserInterface/ResourceSearchMatchObject.js:
+        (WebInspector.ResourceSearchMatchObject.prototype.get resource): Added.
+        (WebInspector.ResourceSearchMatchObject.prototype.get lineNumber): Added.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.showMainFrameSourceCode): Added lineNumberToReveal parameter.
+        (WebInspector.ResourceSidebarPanel.prototype.showResourceSourceCode): Added.
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel.prototype._treeElementSelected): Handle ResourceSearchMatchObject.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.revealLine): Added. Find the right text chunk for the line, then
+        break it into single line text chunks then call scrollIntoViewIfNeeded on that text chunk.
+        (WebInspector.TextEditor.prototype.shown): Set _visible to true. Check if there is a line number that
+        needs to be revealed.
+        (WebInspector.TextEditor.prototype.hidden):  Set _visible to false.
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView): Start _contentPopulated as false.
+        (WebInspector.TextResourceContentView.prototype.contentAvailable): Set _contentPopulated to true. Check if
+        there is a line number that needs to be revealed.
+        (WebInspector.TextResourceContentView.prototype.revealLine): Added.
+
+2012-01-19  Timothy Hatcher  <timothy@apple.com>
+
+        Expand the resources tree elements in the Issues and Search sidebars by default.
+
+        Part of:
+        <rdar://problem/10318754> Implement the Search sidebar for the new Web Inspector design
+        <rdar://problem/10318761> Implement the Issue sidebar for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/IssueSidebarPanel.js:
+        (WebInspector.IssueSidebarPanel.prototype._issueWasAdded): Call expand.
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel.prototype._treeElementForResource): Call expand.
+
+2012-01-19  Timothy Hatcher  <timothy@apple.com>
+
+        Call shown and hidden on the current content view in ClusterContentView.
+
+        This is needed for DOMTreeContentView to correctly reveal the selected DOM node when shown.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ClusterContentView.js:
+        (WebInspector.ClusterContentView.prototype.shown): Call shown on the currentContentView if there is one.
+        (WebInspector.ClusterContentView.prototype.hidden): Call hidden on the currentContentView if there is one.
+        (WebInspector.ClusterContentView.prototype.get selectionPathComponents): Return [] if there is no currentContentView.
+
+2012-01-19  Timothy Hatcher  <timothy@apple.com>
+
+        Make selecting DOM search results reveal and select the node in the DOM tree.
+
+        Part of: <rdar://problem/10318754> Implement the Search sidebar for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMSearchMatchObject.js:
+        (WebInspector.DOMSearchMatchObject.get domNode): Added.
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView.prototype.showDOMTree): Added preventFocusChange parameter.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.showMainFrameDOMTree): Added preventFocusChange parameter.
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel): Set onselect to _treeElementSelected.
+        (WebInspector.SearchSidebarPanel.prototype._treeElementSelected): Added. Call showMainFrameDOMTree for
+        DOMSearchMatchObject results.
+
+2012-01-18  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10318754> Implement the Search sidebar for the new Web Inspector design.
+
+        Add icons for the search sidebar. We are reusing the icons from the path components icons, and added
+        the resource match icon from Xcode.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DOMSearchMatchObject.js:
+        (WebInspector.DOMSearchMatchObject.prototype.get className): Call _generateClassName.
+        (WebInspector.DOMSearchMatchObject.prototype._generateClassName): Generate the correct class name from the node
+            type.
+        * UserInterface/Images/ResourceSearchMatch.pdf: Added.
+        * UserInterface/Main.html:
+        * UserInterface/ResourceSearchMatchObject.js:
+        (WebInspector.ResourceSearchMatchObject.prototype.get className): Return the resource match class name.
+        * UserInterface/SearchIcons.css: Added.
+        * UserInterface/SearchResultTreeElement.js:
+        (WebInspector.SearchResultTreeElement): Ask either the DOMSearchMatchObject or ResourceSearchMatchObject for its className.
+
+2012-01-18  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10318754> Implement the Search sidebar for the new Web Inspector design.
+
+        Add some new classes, and generate proper titles for DOM search matches.
+
+        The new classes added are:
+            - DOMSearchMatchObject, which represents a match of the search term in the DOM.
+            - ResourceSearchMatchObject, which represents a match of the search term in a resource.
+            - SearchResultTreeElement, which represents the tree elements in the search sidebar, and its represented
+                object is either a DOMSearchMatchObject or a ResourceSearchMatchObject.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DOMSearchMatchObject.js: Added.
+        (WebInspector.DOMSearchMatchObject):
+        (WebInspector.DOMSearchMatchObject.prototype.constructor.WebInspector.DOMSearchMatchObject.get title): Call _generateTitle if we don't
+            have one yet.
+        (WebInspector.DOMSearchMatchObject.prototype._generateTitle): Generate a title from the DOMNode.
+        * UserInterface/Main.html:
+        * UserInterface/ResourceSearchMatchObject.js: Added.
+        (WebInspector.ResourceSearchMatchObject):
+        (WebInspector.ResourceSearchMatchObject.prototype.constructor.WebInspector.ResourceSearchMatchObject.get title): Return the matching line
+            text with a FIXME.
+        * UserInterface/SearchResultTreeElement.js: Added.
+        (WebInspector.SearchResultTreeElement): Assert our represented object is either a DOMSearchMatchObject or a ResourceSearchMatchObject.
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel._searchFieldChanged.resourcesCallback.resourceCallback): Create a SearchResultTreeElement.
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel._searchFieldChanged.domCallback.domSearchResults): Ditto.
+
+2012-01-18  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10318754> Implement the Search sidebar for the new Web Inspector design.
+
+        Implement searching of the DOM, and add the results to the search sidebar alongside matches in resources.
+
+        This patch also stores the ResourceTreeElements in the SearchSidebarPanel class, since both DOM search results
+        and resource search results will need to be under the same parent.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel):
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel._searchFieldChanged.resourcesCallback.resourceCallback):
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel._searchFieldChanged.resourcesCallback):
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel._searchFieldChanged.domCallback.domSearchResults): For each
+            search result, get the DOM Node and owner document's URL, and add the DOM node under the owner document's ResourceTreeElement.
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel._searchFieldChanged.domCallback): Call DOMAgent.getSearchResults.
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel._searchFieldChanged): Call DOMAgent.performSearch.
+
+2012-01-18  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10318754> Implement the Search sidebar for the new Web Inspector design.
+
+        Implement searching of resources. Call the inspector API to search in all resources for our search term,
+        and then for each resource that found a match, search in that resource for all of the matching lines.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel._searchFieldChanged.resourcesCallback.resourceCallback): Loop
+            over each matching line, and add a ResourceTreeElement for the parent, and a tree element for each matching search result.
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel._searchFieldChanged.resourcesCallback): For
+            each matching resource, search the resource.
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel._searchFieldChanged): Call PageAgent.searchInResources.
+
+2012-01-17  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10318754> Implement the Search sidebar for the new Web Inspector design.
+
+        Add a search field to the search sidebar. It is there and looks pretty, but doesn't do anything yet.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/Main.html:
+        * UserInterface/SearchSidebarPanel.css: Added.
+        (.sidebar > .panel.search > .content):
+        (.sidebar > .panel.search > .search-bar):
+        (.search-bar):
+        (.search-bar > input[type="search"]):
+        * UserInterface/SearchSidebarPanel.js:
+        (WebInspector.SearchSidebarPanel):
+        (WebInspector.SearchSidebarPanel.prototype.constructor.WebInspector.SearchSidebarPanel._searchFieldChanged):
+
+2012-01-17  Brian Weinstein  <bweinstein@apple.com>
+
+        Start of <rdar://problem/10318754> Implement the Search sidebar for the new Web Inspector design.
+
+        Add a stub Search sidebar and call it from Main.js instead of creating a generic sidebar panel.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        * UserInterface/SearchSidebarPanel.js: Added.
+        (WebInspector.SearchSidebarPanel):
+
+2012-01-18  Timothy Hatcher  <timothy@apple.com>
+
+        Make the Inspect Element context menu item work along with the inspect() console function.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView.prototype.selectAndRevealDOMNode): Added.
+        (WebInspector.DOMTreeContentView.prototype._pathComponentSelected): Use selectDOMNode
+        instead of revealAndSelect since that also fires an event.
+        * UserInterface/DOMTreeManager.js:
+        (WebInspector.DOMTreeManager.prototype.inspectElement): Fire DOMNodeWasInspected.
+        (WebInspector.DOMTreeManager.prototype.inspectNodeObject): Added. Resolves an object to
+        a DOMNode and calls inspectElement.
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView): Remove call to _showContentViewForIdentifier.
+        (WebInspector.FrameContentView.prototype.get selectionPathComponents): Return [] if there
+        is no current content view.
+        (WebInspector.FrameContentView.prototype.shown): Added. Show the DOM tree if _shownInitialContent
+        is not true.
+        (WebInspector.FrameContentView.prototype.closed): Added. Reset _shownInitialContent to false.
+        (WebInspector.FrameContentView.prototype.showSourceCode): Added. Helper function.
+        (WebInspector.FrameContentView.prototype.showDOMTree): Added. Helper function.
+        (WebInspector.FrameContentView.prototype._pathComponentForContentView): Return null if there
+        is no current content view.
+        * UserInterface/InspectorObserver.js:
+        (WebInspector.InspectorObserver.prototype.inspect): Pass the object to the right manager.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Enable the InspectorAgent.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel): Add DOMNodeWasInspected event listener.
+        (WebInspector.ResourceSidebarPanel.prototype.showMainFrameDOMTree): Added. Helper function.
+        (WebInspector.ResourceSidebarPanel.prototype.showMainFrameSourceCode): Added. Helper function.
+        (WebInspector.ResourceSidebarPanel.prototype._domNodeWasInspected): Added. Call showMainFrameDOMTree.
+        * UserInterface/StorageManager.js:
+        (WebInspector.StorageManager.prototype.inspectDatabase): Added. Fire DatabaseWasInspected event.
+        (WebInspector.StorageManager.prototype.inspectDOMStorage): Added. Fire DOMStorageObjectWasInspected event.
+        (WebInspector.StorageManager.prototype._databaseForId): Added.
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel):
+        (WebInspector.StorageSidebarPanel.prototype._domStorageObjectWasInspected): Added. Reveal and select the tree element.
+        (WebInspector.StorageSidebarPanel.prototype._databaseWasInspected): Added. Ditto.
+
+2012-01-18  Timothy Hatcher  <timothy@apple.com>
+
+        Add String.prototype.collapseWhitespace since it is needed by DOMTreeElement.js.
+
+        Reviewed by Jing Jin.
+
+        * UserInterface/Utilities.js:
+        (String.prototype.collapseWhitespace): Added.
+
+2012-01-18  Timothy Hatcher  <timothy@apple.com>
+
+        Now that the document node for child frames is included in the DOM tree, use it as the root
+        for child frames to avoid seeing "#document" and having everything nested under it.
+
+        Also use the straight forward approach to request the document if the DOMTree is for the main frame.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMTree.js:
+        (WebInspector.DOMTree.prototype.requestRootDOMNode.mainDocumentAvailable): Added.
+        (WebInspector.DOMTree.prototype.requestRootDOMNode): Evaluate "document" for child frames instead of
+        "window.frameElement". And use WebInspector.domTreeManager.requestDocument for the main frame.
+
+2012-01-17  Timothy Hatcher  <timothy@apple.com>
+
+        Rename ContentBrowser.showContentForRepresentedObject to ContentBrowser.showContentViewForRepresentedObject.
+
+        Also adds ContentBrowser.showContentView and ContentBrowser.contentViewForRepresentedObject while making
+        the showContentView* functions return the content view that was shown so it can be used by the caller.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser.prototype.showContentViewForRepresentedObject): Renamed from showContentForRepresentedObject.
+        (WebInspector.ContentBrowser.prototype.showContentView): Added. Call through to the contentViewContainer.
+        (WebInspector.ContentBrowser.prototype.contentViewForRepresentedObject): Added. Ditto.
+        (WebInspector.ContentBrowser.prototype._hierarchicalPathComponentWasSelected): Use showContentViewForRepresentedObject.
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer.prototype.showContentViewForRepresentedObject): Return the contentView shown.
+        (WebInspector.ContentViewContainer.prototype.showContentView): Ditto.
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView.prototype._showContentViewForIdentifier): Return the contentView shown.
+        * UserInterface/Main.js:
+        (WebInspector.openURL): Use showContentViewForRepresentedObject.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype._treeElementSelected): Use showContentViewForRepresentedObject
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel.prototype._treeElementSelected): Use showContentViewForRepresentedObject
+
+2012-01-17  Timothy Hatcher  <timothy@apple.com>
+
+        Prevent leaking Web Inspector content views by unregistering event listeners from external objects
+        when the content views are closed.
+
+        Since some content views were registering as event listeners on external objects that had indefinite or
+        indeterminate lifetimes, that meant the closed content views were still around and responding to events
+        after they had been closed.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ClusterContentView.js:
+        (WebInspector.ClusterContentView): Moved event listnener to shown.
+        (WebInspector.ClusterContentView.prototype.shown): Added. Add event listener that was in the constructor.
+        (WebInspector.ClusterContentView.prototype.closed): Added. Remove event listener and close all
+        content views so they can do their own work.
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView.prototype.closed): Added stub.
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer.prototype._disassociateFromContentView): Call closed on the view.
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView): Moved event listnener to shown.
+        (WebInspector.DOMTreeContentView.prototype.shown): Add event listener that was in the constructor.
+        (WebInspector.DOMTreeContentView.prototype.closed): Added. Remove event listener.
+        * UserInterface/ResourceContentView.js:
+        (WebInspector.ResourceContentView): Moved event listnener to shown.
+        (WebInspector.ResourceContentView.prototype.shown): Added. Add event listener that was in the constructor.
+        (WebInspector.ResourceContentView.prototype.closed): Added. Remove event listener.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameDidChange): Close the content views right away, not after
+        a delay to prevent the content views from responding to events when they are about to be closed anyway.
+
+2012-01-17  Timothy Hatcher  <timothy@apple.com>
+
+        Minimize churn in the DOM tree content view when navigating between pages.
+
+        The DOMTree was calling callbacks multiple times because the list wasn't cleared
+        when the RootDOMNodeDidChange was sent. And DOMTreeContentView would request
+        the DOM node again when RootDOMNodeDidChange was observed, causing the same
+        callback to be added back into the pending callbacks array.
+
+        This change clears the pending callbacks array each time the DOMTree is invalidated
+        so it is the responsibility of the client to listen for the RootDOMNodeInvalidated
+        event and request the root DOM node again (which is what happens already.)
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMTree.js:
+        (WebInspector.DOMTree.Event.RootDOMNodeInvalidated): Renamed from RootDOMNodeDidChange to better
+        reflect what is means.
+        (WebInspector.DOMTree.prototype.invalidate.performInvalidate): Always fire the RootDOMNodeInvalidated
+        event and clear the pending callbacks.
+        (WebInspector.DOMTree.prototype.requestRootDOMNode.rootObjectAvailable): Check if we were invalidated
+        before continuing.
+        (WebInspector.DOMTree.prototype.requestRootDOMNode.rootDOMNodeAvailable): Ditto.
+        (WebInspector.DOMTree.prototype.requestRootDOMNode.dispatchCallbacks): Ditto.
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView): Listen for the renamed RootDOMNodeInvalidated event.
+        (WebInspector.DOMTreeContentView.prototype._rootDOMNodeInvalidated): Renamed from _rootDOMNodeDidChange.
+        * UserInterface/DOMTreeUpdater.js:
+        (WebInspector.DOMTreeUpdater.prototype._documentUpdated): Don't set rootDOMNode since the outline
+        might be for a subframe, and this is always the main document.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Properly create a RemoteObject in WebInspector.DOMTree so it can be released correctly.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMTree.js:
+        (WebInspector.DOMTree.prototype.requestRootDOMNode.rootObjectAvailable): Make a RemoteObject using
+        WebInspector.RemoteObject.fromPayload and bind it to rootDOMNodeAvailable.
+        (WebInspector.DOMTree.prototype.requestRootDOMNode.rootDOMNodeAvailable): Release the remote object.
+
+2012-01-17  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10318761> Implement the Issue sidebar for the new Web Inspector design.
+
+        Add images for for the error and warning tree elements.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/Images/Error.pdf: Added.
+        * UserInterface/Images/Warning.pdf: Added.
+        * UserInterface/IssueIcons.css: Added.
+        (.error-issue-icon .icon):
+        (.warning-issue-icon .icon):
+        * UserInterface/IssueTreeElement.js:
+        (WebInspector.IssueTreeElement):
+        * UserInterface/Main.html:
+
+2012-01-16  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10318761> Implement the Issue sidebar for the new Web Inspector design.
+
+        Move the information about an Issue tree element from IssueSidebarPanel to its own class - IssueTreeElement.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/IssueSidebarPanel.js:
+        (WebInspector.IssueSidebarPanel.prototype.constructor.WebInspector.IssueSidebarPanel._issueWasAdded): Create a new
+            IssueTreeElement, instead of a GeneralTreeElement.
+        * UserInterface/IssueTreeElement.js: Added.
+        (WebInspector.IssueTreeElement): Call through to GeneralTreeElement and set some properties.
+        (WebInspector.IssueTreeElement.titleForIssue): Moved from IssueSidebarPanel.
+        * UserInterface/Main.html: Added new file.
+
+2012-01-16  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10318761> Implement the Issue sidebar for the new Web Inspector design.
+
+        Implement displaying formatted console messages in the Issues Sidebar.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ConsoleObserver.js:
+        (WebInspector.ConsoleObserver.prototype.constructor.WebInspector.ConsoleObserver.messageAdded): Pass along the
+            parameters.
+        * UserInterface/IssueManager.js:
+        (WebInspector.IssueManager.prototype.issueWasAdded): Ditto.
+        * UserInterface/IssueMessage.js:
+        (WebInspector.IssueMessage): Turn the objects that we were passed in as parameters
+            into WebInspector.RemoteObjects, and call this._formatTextIfNecessary to format
+            our text.
+        (WebInspector.IssueMessage.prototype._formatTextIfNecessary.valueFormatter): Get the value of the RemoteObject.
+        (WebInspector.IssueMessage.prototype._formatTextIfNecessary.append): Append b to a, and return a.
+        (WebInspector.IssueMessage.prototype._formatTextIfNecessary): Format our text, and append any unused substitutions
+            to the string we generate. Once we are done generating the string, we set that as our text.
+
+2012-01-13  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10318761> Implement the Issue sidebar for the new Web Inspector design.
+
+        Clear the issues sidebar when the page is navigated. Add a listener in IssueManager that fires an
+        event that IssueSidebarPanel listens to.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/IssueManager.js:
+        (WebInspector.IssueManager):
+        (WebInspector.IssueManager.prototype.issueWasAdded):
+        (WebInspector.IssueManager.prototype._mainResourceDidChange):
+        * UserInterface/IssueSidebarPanel.js:
+        (WebInspector.IssueSidebarPanel):
+        (WebInspector.IssueSidebarPanel.prototype.constructor.WebInspector.IssueSidebarPanel._issueWasAdded):
+        (WebInspector.IssueSidebarPanel.prototype._issuesCleared):
+
+2012-01-13  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10318761> Implement the Issue sidebar for the new Web Inspector design.
+
+        Add things to the Issues sidebar, sorted by file. We currently only show issues that have a URL provided.
+
+        Each folder in the sidebar is a resource where the error came from. Each issue has a main title of the
+        kind of issue it is, and a subtitle of the issue text.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ConsoleObserver.js:
+        (WebInspector.ConsoleObserver.prototype.constructor.WebInspector.ConsoleObserver.messageAdded): If the message
+            was an error or warning, tell the IssueManager about it.
+        * UserInterface/IssueManager.js: Added.
+        (WebInspector.IssueManager):
+        (WebInspector.IssueManager.prototype.constructor.WebInspector.IssueManager.initialize):
+        (WebInspector.IssueManager.prototype.issueWasAdded): Dispatch a message saying an issue was added.
+        * UserInterface/IssueMessage.js: Added.
+        (WebInspector.IssueMessage):
+        * UserInterface/IssueSidebarPanel.js:
+        (WebInspector.IssueSidebarPanel):
+        (WebInspector.IssueSidebarPanel.prototype.constructor.WebInspector.IssueSidebarPanel._issueWasAdded):
+        (WebInspector.titleForIssue):
+        * UserInterface/Main.html: Add new files.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Initialize the IssueManager.
+        * UserInterface/Utilities.js:
+        (Object.defineProperty): Add String.prototype.startsWith.
+
+2012-01-13  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10318761> Implement the Issue sidebar for the new Web Inspector design.
+
+        Add a new flavor of tree item to tree elements in a NavigationSidebarPanel. If you set both the small and twoLine properties
+        on a tree element, the title and subtitle will be on two lines, but it will only be slightly bigger than the
+        small style, and will still use the same small icon size.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/GeneralTreeElement.js:
+        (WebInspector.GeneralTreeElement.prototype.get twoLine):
+        (WebInspector.GeneralTreeElement.prototype.set twoLine):
+        (WebInspector.GeneralTreeElement.prototype.onattach):
+        * UserInterface/NavigationSidebarPanel.css:
+        (.navigation-sidebar-panel-content-tree-outline .item.small.two-line):
+        (.navigation-sidebar-panel-content-tree-outline .item.small.two-line .titles):
+        (.navigation-sidebar-panel-content-tree-outline .item.small.two-line .titles.no-subtitle):
+        (.navigation-sidebar-panel-content-tree-outline .item.small.two-line .icon):
+        (.navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .title::after):
+        (.navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .subtitle::before):
+
+2012-01-13  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10318761> Implement the Issue sidebar for the new Web Inspector design.
+
+        Implement FrameResourceManager.resourceForURL. This checks the main frame's main resource for the passed in URL,
+        and then calls the main frame's resourceForURL function, which checks subresources and recursively checks
+        subframes for the correct URL.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.resourceForURL):
+
+2012-01-12  Brian Weinstein  <bweinstein@apple.com>
+
+        Start of <rdar://problem/10318761> Implement the Issue sidebar for the new Web Inspector design.
+
+        Add a stub IssueSidebarPanel and call it from Main.js instead of just creating a generic sidebar panel.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/IssueSidebarPanel.js: Added.
+        (WebInspector.IssueSidebarPanel):
+        * UserInterface/Main.html: Add new file.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create an IssueSidebarPanel.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Make the DOM tree content view show the current DOM node selection path in the quick navigation bar.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by Brian Weinstein and Joseph Pecoraro.
+
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView): Added event listener for DOM tree selection changes.
+        (WebInspector.DOMTreeContentView.prototype.get selectionPathComponents): Added. Return path components for the DOM tree selection.
+        (WebInspector.DOMTreeContentView.prototype._selectedNodeDidChange): Added. Fire the SelectionPathComponentsDidChange event.
+        (WebInspector.DOMTreeContentView.prototype._pathComponentSelected): Added. Reveal and select the DOM tree element.
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype.isCloseTag): Added.
+        * UserInterface/DOMTreeElementPathComponent.js: Added.
+        (WebInspector.DOMTreeElementPathComponent): Added.
+        (WebInspector.DOMTreeElementPathComponent.prototype.get domTreeElement): Added.
+        (WebInspector.DOMTreeElementPathComponent.prototype.get previousSibling): Added.
+        (WebInspector.DOMTreeElementPathComponent.prototype.get nextSibling): Added. Return null if isCloseTag.
+        * UserInterface/Images/DOMCharacterData.pdf: Added.
+        * UserInterface/Images/DOMComment.pdf: Added.
+        * UserInterface/Images/DOMDocumentType.pdf: Added.
+        * UserInterface/Images/DOMElement.pdf: Added.
+        * UserInterface/Images/DOMNode.pdf: Added.
+        * UserInterface/Images/DOMTextNode.pdf: Added.
+        * UserInterface/Main.html: Included DOMTreeElementPathComponent.js.
+        * UserInterface/PathComponentIcons.css:
+        (.dom-element-icon .icon): Added.
+        (.dom-text-node-icon .icon): Added.
+        (.dom-comment-icon .icon): Added.
+        (.dom-document-type-icon .icon): Added.
+        (.dom-character-data-icon .icon): Added.
+        (.dom-node-icon .icon): Added.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Make link navigation work in the DOM tree.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView): Add click event listener.
+        (WebInspector.DOMTreeContentView.prototype._mouseWasClicked): Added. Start a timeout since this is a single
+        click, if the timeout is canceled before it fires, then a double-click happened or another link was clicked.
+        (WebInspector.DOMTreeContentView.prototype._mouseWasClicked.followLink): Added.
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype.onattach): Removed call to _preventFollowingLinksOnDoubleClick.
+        (WebInspector.DOMTreeElement.prototype.updateTitle): Ditto.
+        (WebInspector.DOMTreeElement.prototype._preventFollowingLinksOnDoubleClick): Removed.
+        (WebInspector.DOMTreeElement.prototype._buildAttributeDOM): Removed linkify parameter and remove dependency on
+        WebInspector.resourceURLForRelatedNode by making the anchor element directly.
+        (WebInspector.DOMTreeElement.prototype._buildTagDOM): Removed linkify parameter.
+        (WebInspector.DOMTreeElement.prototype._nodeTitleInfo): Ditto.
+        * UserInterface/Utilities.js:
+        (String.prototype.trimMiddle): Added.
+        (String.prototype.trimEnd): Added.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Remove dependency on WebInspector.DOMSyntaxHighlighter and make style and script DOM nodes syntax highlighted
+        by using WebInspector.SyntaxHighlighter.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by Brian Weinstein and Joseph Pecoraro.
+
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype._nodeTitleInfo): Use WebInspector.syntaxHighlightStringAsDocumentFragment
+        instead of WebInspector.DOMSyntaxHighlighter. Also syntax highlight inline script and style text nodes.
+        * UserInterface/DOMTreeOutline.css:
+        (.dom-tree-outline .html-text-node.large): Added. Used for large text blocks, making viewing/editing more pleasant.
+        * UserInterface/SyntaxHighlighter.js:
+        (WebInspector.SyntaxHighlighter.prototype.synchronousHighlight): Added dontChunk parameter and fix undefined/null checks.
+        (WebInspector.SyntaxHighlighter.prototype.startHighlighting): Fix undefined/null checks
+        (WebInspector.SyntaxHighlighter.prototype._highlightNextChunk): Added dontChunk parameter and don't bail early if it is set.
+        * UserInterface/SyntaxHighlightingSupport.js:
+        (WebInspector.syntaxHighlightStringAsDocumentFragment): Added. Creates a TextContent and syntax highlights it and returns
+        the document fragment.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Break out the code for creating a syntax highlighted document fragment so it can be used
+        by the DOM tree for inline CSS and JavaScript.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/SyntaxHighlightingSupport.js: Added.
+        (WebInspector.createSyntaxHighlightedDocumentFragment): Copied from WebInspector.TextEditorTextChunk.prototype.updateContent.
+        (WebInspector.createSyntaxHighlightedDocumentFragment.appendText): Ditto.
+        (WebInspector.createSyntaxHighlightedDocumentFragment.createTokenElement): Ditto.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditorTextChunk.prototype.updateContent): Use WebInspector.createSyntaxHighlightedDocumentFragment.
+        * UserInterface/Main.html: Included SyntaxHighlightingSupport.js.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Remove references to the Elements panel and make the context menu work in the DOM tree.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype.selectOnMouseDown): Removed elements panel code.
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline): Remove showInElementsPanelEnabled parameter.
+        (WebInspector.DOMTreeOutline.prototype._contextMenuEventFired): Removed elements panel code and call populateContextMenu.
+        (WebInspector.DOMTreeOutline.prototype.populateContextMenu): Removed call to populateHrefContextMenu which doesn't exist.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Style and syntax highlight the DOM tree elements.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by Brian Weinstein and Joseph Pecoraro.
+
+        * UserInterface/DOMTreeElement.js: Found and replaced "webkit-" with "" to fix the syntax highlighting class names.
+        * UserInterface/DOMTreeOutline.css: Added.
+        (.dom-tree-outline):
+        (.dom-tree-outline li.hovered:not(.selected) .selection):
+        (.dom-tree-outline li .selection):
+        (.dom-tree-outline li.selected .selection):
+        (.dom-tree-outline li.elements-drag-over .selection):
+        (.dom-tree-outline:focus li.selected .selection):
+        (.dom-tree-outline, .dom-tree-outline ol):
+        (.dom-tree-outline ol.children):
+        (.dom-tree-outline ol.children.expanded):
+        (.dom-tree-outline li):
+        (.dom-tree-outline:focus li.selected):
+        (.dom-tree-outline:focus li.selected *):
+        (.dom-tree-outline li.parent):
+        (.dom-tree-outline li .html-tag.close):
+        (.dom-tree-outline li.parent::before):
+        (.dom-tree-outline:focus li.parent.selected::before):
+        (.dom-tree-outline li.parent.expanded::before):
+        (.dom-tree-outline:focus li.parent.expanded.selected::before):
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline): Set the dom-tree-outline and syntax-highlighted class names.
+        (WebInspector.DOMTreeOutline.prototype.populateContextMenu): Found and replaced "webkit-" with "" to fix the
+        syntax highlighting class names.
+        * UserInterface/Main.html: Included DOMTreeOutline.css.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Make it possible to share the syntax highlighting styles with the DOM tree.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/Main.html:
+        * UserInterface/SyntaxHighlightingDefaultTheme.css: Renamed from Safari/Develop/WebInspector/TextEditorDefaultTheme.css.
+        Found and replaced .text-editor with .syntax-highlighted.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor): Add the syntax-highlighted class name to the content container.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.DOMTreeContentView and have it as a second view available in WebInspector.FrameContentView.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView): Added support for WebInspector.DOMTree.
+        (WebInspector.ContentView.isViewable): Ditto.
+        * UserInterface/DOMTreeContentView.css: Added.
+        (.content-view.dom-tree):
+        * UserInterface/DOMTreeContentView.js: Added.
+        (WebInspector.DOMTreeContentView): Create the DOMTreeOutline and request the root DOMNode.
+        (WebInspector.DOMTreeContentView.prototype.get domTree): Return _domTree.
+        (WebInspector.DOMTreeContentView.prototype.shown): Call setVisible on the DOMTreeOutline.
+        (WebInspector.DOMTreeContentView.prototype.hidden): Ditto.
+        (WebInspector.DOMTreeContentView.prototype._rootDOMNodeAvailable): Set the rootDOMNode on DOMTreeOutline.
+        (WebInspector.DOMTreeContentView.prototype._rootDOMNodeDidChange): Request the root DOMNode.
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView): Create the DOM tree path component.
+        (WebInspector.FrameContentView.prototype._pathComponentForContentView): Return the DOM tree patch component
+        for DOMTree represented objects.
+        (WebInspector.FrameContentView.prototype._showContentViewForIdentifier): Use the DOMTree of the frame.
+        * UserInterface/Images/DOMTree.pdf: Added.
+        * UserInterface/Main.html: Included DOMTreeContentView.{js,css}.
+        * UserInterface/PathComponentIcons.css:
+        (.dom-tree-icon .icon): Added.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for getting the DOM tree for a specific WebInspector.Frame.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by Brian Weinstein and Joseph Pecoraro.
+
+        * UserInterface/DOMTree.js: Added.
+        (WebInspector.DOMTree):
+        (WebInspector.DOMTree.prototype.invalidate): Delay the invalidation on a timeout to coalesce multiple calls to invalidate.
+        (WebInspector.DOMTree.prototype.invalidate.performInvalidate): Do the work to invalidate.
+        (WebInspector.DOMTree.prototype.requestRootDOMNode): Get window.frameElement or document from the desired frame.
+        (WebInspector.DOMTree.prototype.requestRootDOMNode.rootObjectAvailable): Convert the RemoteObject to a DOMNode.
+        (WebInspector.DOMTree.prototype.requestRootDOMNode.rootDOMNodeAvailable): Get the child nodes before calling the callbacks.
+        (WebInspector.DOMTree.prototype.requestRootDOMNode.dispatchCallbacks): Helper to dispatch pending callbacks.
+        (WebInspector.DOMTree.prototype._nodeRemoved): Call invalidate if the node is the root node.
+        (WebInspector.DOMTree.prototype._documentUpdated): Call invalidate.
+        (WebInspector.DOMTree.prototype._frameMainResourceDidChange): Ditto.
+        * UserInterface/Frame.js:
+        (WebInspector.Frame.prototype.get domTree): Added.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Remove dependency on Preferences.maxInlineTextChildLength from WebInspector.DOMTreeElement.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.MaximumInlineTextChildLength): Added.
+        (WebInspector.DOMTreeElement.prototype._nodeTitleInfo): Use WebInspector.DOMTreeElement.MaximumInlineTextChildLength.
+        (WebInspector.DOMTreeElement.prototype._showInlineText): Ditto.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Use WebInspector.DOMNode instead of WebInspector.DOMDocument since we don't have DOMDocument
+        in the new Web Inspector.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/DOMNode.js:
+        (WebInspector.DOMNode): Set ownerDocument to this when this is a document node.
+        * UserInterface/DOMTreeManager.js:
+        (WebInspector.DOMTreeManager.prototype._setDocument): Use DOMNode instead of DOMDocument.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Update DOMTreeElement to correctly use the new non-formating WebInspector.UIString.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Rubber-stamped by John Sullivan.
+
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype._createTooltipForNode.setTooltip): Use format() after UIString.
+        (WebInspector.DOMTreeElement.prototype.adjustCollapsedRange): Ditto.
+        (WebInspector.DOMTreeElement.prototype._populateTagContextMenu): Removed WebInspector.useLowerCaseMenuTitles() use.
+        (WebInspector.DOMTreeElement.prototype._populateTextContextMenu): Ditto.
+        (WebInspector.DOMTreeElement.prototype._populateNodeContextMenu): Ditto.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Replace {add,remove,has}StyleClass in DOMTree{Element,Outline} with classList.{add,remove,contains}.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Rubber-stamped by John Sullivan.
+
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.ElementsTreeElement.prototype.set hovered):
+        (WebInspector.ElementsTreeElement.prototype.onattach):
+        (WebInspector.ElementsTreeElement.prototype._triggerEditAttribute):
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.ElementsTreeOutline.prototype._ondragover):
+        (WebInspector.ElementsTreeOutline.prototype._clearDragOverTreeElementMarker):
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Remove dependancy on WebInspector.Color from WebInspector.DOMTreeManager.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Rubber-stamped by John Sullivan.
+
+        * UserInterface/DOMTreeManager.js:
+        (WebInspector.DOMTreeManager.prototype._buildHighlightConfig): Include the colors directly.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Make WebInspector.DOMTreeUpdater listen for events on the correct object.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Rubber-stamped by John Sullivan.
+
+        * UserInterface/DOMTreeUpdater.js:
+        (WebInspector.DOMTreeUpdater): Use DOMTreeManager instead of the old DOMAgent name.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Make WebInspector.DOMTreeOutline conform to the right style for objects with events.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline.prototype._selectedNodeChanged):
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Make WebInspector.DOMTreeManager events conform to the style we use in the new Web Inspector.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/DOMTreeManager.js:
+        (WebInspector.DOMTreeManager.prototype._attributeModified): Use WebInspector.DOMTreeManager.Event and spell out Attribute.
+        (WebInspector.DOMTreeManager.prototype._attributeRemoved): Ditto.
+        (WebInspector.DOMTreeManager.prototype._loadNodeAttributes): Ditto.
+        (WebInspector.DOMTreeManager.prototype._characterDataModified): WebInspector.DOMTreeManager.Event.
+        (WebInspector.DOMTreeManager.prototype._setDocument): Ditto.
+        (WebInspector.DOMTreeManager.prototype._childNodeCountUpdated): Ditto.
+        (WebInspector.DOMTreeManager.prototype._childNodeInserted): Ditto.
+        (WebInspector.DOMTreeManager.prototype._childNodeRemoved): Ditto.
+        (WebInspector.DOMTreeManager.prototype.inspectElement): Ditto.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Don't call InspectorBackend.registerDOMDispatcher from WebInspector.DOMTreeManager.
+
+        The new Web Inspector calls InspectorBackend.registerDOMDispatcher from Main.js.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/DOMTreeManager.js:
+        (WebInspector.DOMTreeManager): Remove call to InspectorBackend.registerDOMDispatcher.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Wire up WebInspector.DOMObserver to WebInspector.DOMTreeManager.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/DOMObserver.js:
+        (WebInspector.DOMObserver.prototype.documentUpdated):
+        (WebInspector.DOMObserver.prototype.setChildNodes):
+        (WebInspector.DOMObserver.prototype.attributeModified):
+        (WebInspector.DOMObserver.prototype.attributeRemoved):
+        (WebInspector.DOMObserver.prototype.inlineStyleInvalidated):
+        (WebInspector.DOMObserver.prototype.characterDataModified):
+        (WebInspector.DOMObserver.prototype.childNodeCountUpdated):
+        (WebInspector.DOMObserver.prototype.childNodeInserted):
+        (WebInspector.DOMObserver.prototype.childNodeRemoved):
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Use WebInspector.domTreeManager instead of the old WebInspector.domAgent.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Rubber-stamped by John Sullivan.
+
+        * UserInterface/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype.onselect):
+        (WebInspector.DOMTreeElement.prototype._tagNameEditingCommitted.changeTagNameCallback):
+        (WebInspector.DOMTreeElement.prototype._tagNameEditingCommitted):
+        * UserInterface/DOMTreeOutline.js:
+        (WebInspector.DOMTreeOutline.prototype._onmousemove):
+        (WebInspector.DOMTreeOutline.prototype._onmouseout):
+        (WebInspector.DOMTreeOutline.prototype._ondragstart):
+        (WebInspector.DOMTreeOutline.prototype._ondrop.callback):
+        (WebInspector.DOMTreeOutline.prototype._ondrop):
+        (WebInspector.DOMTreeOutline.prototype._contextMenuEventFired.focusElement):
+        (WebInspector.DOMTreeOutline.prototype._contextMenuEventFired):
+        * UserInterface/DOMTreeUpdater.js:
+        (WebInspector.DOMTreeUpdater.prototype._reset):
+        * UserInterface/RemoteObject.js:
+        (WebInspector.RemoteObject.prototype.pushNodeToFrontend):
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Create a WebInspector.DOMTreeManager instance.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create a WebInspector.DOMTreeManager instance.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Rename WebInspector.ElementsTree{Outline,Element,Updater} to WebInspector.DOMTree{Outline,Element,Updater}.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Rubber-stamped by John Sullivan.
+
+        * UserInterface/DOMTreeElement.js: Found and replaced WebInspector.ElementsTree with WebInspector.DOMTree.
+        * UserInterface/DOMTreeOutline.js: Ditto.
+        * UserInterface/DOMTreeUpdater.js: Ditto.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Rename WebInspector.DOMAgent to WebInspector.DOMTreeManager.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Rubber-stamped by John Sullivan.
+
+        * UserInterface/DOMTreeManager.js: Found and replaced WebInspector.DOMAgent with WebInspector.DOMTreeManager.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Copy over WebInspector.ElementsTree{Outline,Element,Updater} from Open Source.
+
+        Copied into DOMTreeElement.js, DOMTreeOutline.js and DOMTreeUpdater.js since the classes will
+        soon be renamed to WebInspector.DOMTree{Outline,Element,Updater}.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Rubber-stamped by John Sullivan.
+
+        * UserInterface/DOMTreeElement.js: Added.
+        (WebInspector.ElementsTreeElement):
+        (WebInspector.ElementsTreeElement.prototype.highlightSearchResults):
+        (WebInspector.ElementsTreeElement.prototype.hideSearchHighlights):
+        (WebInspector.ElementsTreeElement.prototype._updateSearchHighlight.updateEntryShow):
+        (WebInspector.ElementsTreeElement.prototype._updateSearchHighlight.updateEntryHide):
+        (WebInspector.ElementsTreeElement.prototype._updateSearchHighlight):
+        (WebInspector.ElementsTreeElement.prototype.get hovered):
+        (WebInspector.ElementsTreeElement.prototype.set hovered):
+        (WebInspector.ElementsTreeElement.prototype.get expandedChildrenLimit):
+        (WebInspector.ElementsTreeElement.prototype.set expandedChildrenLimit):
+        (WebInspector.ElementsTreeElement.prototype.get expandedChildCount):
+        (WebInspector.ElementsTreeElement.prototype.showChild):
+        (WebInspector.ElementsTreeElement.prototype._createTooltipForNode.setTooltip):
+        (WebInspector.ElementsTreeElement.prototype._createTooltipForNode.resolvedNode.dimensions):
+        (WebInspector.ElementsTreeElement.prototype._createTooltipForNode.resolvedNode):
+        (WebInspector.ElementsTreeElement.prototype._createTooltipForNode):
+        (WebInspector.ElementsTreeElement.prototype.updateSelection):
+        (WebInspector.ElementsTreeElement.prototype.onattach):
+        (WebInspector.ElementsTreeElement.prototype._preventFollowingLinksOnDoubleClick):
+        (WebInspector.ElementsTreeElement.prototype.onpopulate):
+        (WebInspector.ElementsTreeElement.prototype.updateChildren):
+        (WebInspector.ElementsTreeElement.prototype.insertChildElement):
+        (WebInspector.ElementsTreeElement.prototype.moveChild):
+        (WebInspector.ElementsTreeElement.prototype._updateChildren.updateChildrenOfNode):
+        (WebInspector.ElementsTreeElement.prototype._updateChildren):
+        (WebInspector.ElementsTreeElement.prototype.adjustCollapsedRange):
+        (WebInspector.ElementsTreeElement.prototype.handleLoadAllChildren):
+        (WebInspector.ElementsTreeElement.prototype.onexpand):
+        (WebInspector.ElementsTreeElement.prototype.oncollapse):
+        (WebInspector.ElementsTreeElement.prototype.onreveal):
+        (WebInspector.ElementsTreeElement.prototype.onselect):
+        (WebInspector.ElementsTreeElement.prototype.ondelete):
+        (WebInspector.ElementsTreeElement.prototype.onenter):
+        (WebInspector.ElementsTreeElement.prototype.selectOnMouseDown):
+        (WebInspector.ElementsTreeElement.prototype.ondblclick):
+        (WebInspector.ElementsTreeElement.prototype._insertInLastAttributePosition):
+        (WebInspector.ElementsTreeElement.prototype._startEditingTarget):
+        (WebInspector.ElementsTreeElement.prototype._populateTagContextMenu):
+        (WebInspector.ElementsTreeElement.prototype._populateTextContextMenu):
+        (WebInspector.ElementsTreeElement.prototype._populateNodeContextMenu):
+        (WebInspector.ElementsTreeElement.prototype._startEditing):
+        (WebInspector.ElementsTreeElement.prototype._addNewAttribute):
+        (WebInspector.ElementsTreeElement.prototype._triggerEditAttribute):
+        (WebInspector.ElementsTreeElement.prototype._startEditingAttribute.removeZeroWidthSpaceRecursive):
+        (WebInspector.ElementsTreeElement.prototype._startEditingAttribute):
+        (WebInspector.ElementsTreeElement.prototype._startEditingTextNode):
+        (WebInspector.ElementsTreeElement.prototype._startEditingTagName.keyupListener):
+        (WebInspector.ElementsTreeElement.prototype._startEditingTagName.editingComitted):
+        (WebInspector.ElementsTreeElement.prototype._startEditingTagName.editingCancelled):
+        (WebInspector.ElementsTreeElement.prototype._startEditingTagName):
+        (WebInspector.ElementsTreeElement.prototype._startEditingAsHTML.commit):
+        (WebInspector.ElementsTreeElement.prototype._startEditingAsHTML.dispose):
+        (WebInspector.ElementsTreeElement.prototype._startEditingAsHTML):
+        (WebInspector.ElementsTreeElement.prototype._attributeEditingCommitted.moveToNextAttributeIfNeeded):
+        (WebInspector.ElementsTreeElement.prototype._attributeEditingCommitted):
+        (WebInspector.ElementsTreeElement.prototype._tagNameEditingCommitted.cancel):
+        (WebInspector.ElementsTreeElement.prototype._tagNameEditingCommitted.moveToNextAttributeIfNeeded):
+        (WebInspector.ElementsTreeElement.prototype._tagNameEditingCommitted.changeTagNameCallback):
+        (WebInspector.ElementsTreeElement.prototype._tagNameEditingCommitted):
+        (WebInspector.ElementsTreeElement.prototype._textNodeEditingCommitted):
+        (WebInspector.ElementsTreeElement.prototype._editingCancelled):
+        (WebInspector.ElementsTreeElement.prototype._distinctClosingTagElement):
+        (WebInspector.ElementsTreeElement.prototype.updateTitle):
+        (WebInspector.ElementsTreeElement.prototype._buildAttributeDOM):
+        * UserInterface/DOMTreeOutline.js: Added.
+        (WebInspector.ElementsTreeOutline):
+        (WebInspector.ElementsTreeOutline.prototype.wireToDomAgent):
+        (WebInspector.ElementsTreeOutline.prototype.setVisible):
+        (WebInspector.ElementsTreeOutline.prototype.addEventListener):
+        (WebInspector.ElementsTreeOutline.prototype.removeEventListener):
+        (WebInspector.ElementsTreeOutline.prototype.get rootDOMNode):
+        (WebInspector.ElementsTreeOutline.prototype.set rootDOMNode):
+        (WebInspector.ElementsTreeOutline.prototype.get isXMLMimeType):
+        (WebInspector.ElementsTreeOutline.prototype.selectedDOMNode):
+        (WebInspector.ElementsTreeOutline.prototype.selectDOMNode):
+        (WebInspector.ElementsTreeOutline.prototype.get editing):
+        (WebInspector.ElementsTreeOutline.prototype.update):
+        (WebInspector.ElementsTreeOutline.prototype.updateSelection):
+        (WebInspector.ElementsTreeOutline.prototype._selectedNodeChanged):
+        (WebInspector.ElementsTreeOutline.prototype.findTreeElement):
+        (WebInspector.ElementsTreeOutline.prototype.findTreeElement.parentNode):
+        (WebInspector.ElementsTreeOutline.prototype.createTreeElementFor):
+        (WebInspector.ElementsTreeOutline.prototype.set suppressRevealAndSelect):
+        (WebInspector.ElementsTreeOutline.prototype._revealAndSelectNode):
+        (WebInspector.ElementsTreeOutline.prototype._treeElementFromEvent):
+        (WebInspector.ElementsTreeOutline.prototype._onmousedown):
+        (WebInspector.ElementsTreeOutline.prototype._onmousemove):
+        (WebInspector.ElementsTreeOutline.prototype._onmouseout):
+        (WebInspector.ElementsTreeOutline.prototype._ondragstart):
+        (WebInspector.ElementsTreeOutline.prototype._ondragover):
+        (WebInspector.ElementsTreeOutline.prototype._ondragleave):
+        (WebInspector.ElementsTreeOutline.prototype._isValidDragSourceOrTarget):
+        (WebInspector.ElementsTreeOutline.prototype._ondrop.callback):
+        (WebInspector.ElementsTreeOutline.prototype._ondrop):
+        (WebInspector.ElementsTreeOutline.prototype._ondragend):
+        (WebInspector.ElementsTreeOutline.prototype._clearDragOverTreeElementMarker):
+        (WebInspector.ElementsTreeOutline.prototype._contextMenuEventFired.focusElement):
+        (WebInspector.ElementsTreeOutline.prototype._contextMenuEventFired):
+        (WebInspector.ElementsTreeOutline.prototype.populateContextMenu):
+        (WebInspector.ElementsTreeOutline.prototype.adjustCollapsedRange):
+        (WebInspector.ElementsTreeOutline.prototype._updateModifiedNodes):
+        (WebInspector.ElementsTreeOutline.prototype._populateContextMenu):
+        * UserInterface/DOMTreeUpdater.js: Added.
+        (WebInspector.ElementsTreeUpdater):
+        (WebInspector.ElementsTreeUpdater.prototype._documentUpdated):
+        (WebInspector.ElementsTreeUpdater.prototype._attributesUpdated):
+        (WebInspector.ElementsTreeUpdater.prototype._characterDataModified):
+        (WebInspector.ElementsTreeUpdater.prototype._nodeInserted):
+        (WebInspector.ElementsTreeUpdater.prototype._nodeRemoved):
+        (WebInspector.ElementsTreeUpdater.prototype._childNodeCountUpdated):
+        (WebInspector.ElementsTreeUpdater.prototype._updateModifiedNodesSoon):
+        (WebInspector.ElementsTreeUpdater.prototype._updateModifiedNodes):
+        (WebInspector.ElementsTreeUpdater.prototype._reset):
+        * UserInterface/Main.html: Included DOMTree{Outline,Element,Updater}.js.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Copy over WebInspector.DOMAgent from Open Source.
+
+        Copied into DOMTreeManager.js since WebInspector.DOMAgent will soon be renamed to WebInspector.DOMTreeManager.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Rubber-stamped by John Sullivan.
+
+        * UserInterface/DOMTreeManager.js: Copied from OpenSource/Source/WebCore/inspector/front-end/DOMAgent.js.
+        (WebInspector.DOMAgent):
+        (WebInspector.DOMAgent.prototype.requestDocument.onDocumentAvailable):
+        (WebInspector.DOMAgent.prototype.requestDocument):
+        (WebInspector.DOMAgent.prototype.pushNodeToFrontend):
+        (WebInspector.DOMAgent.prototype.pushNodeByPathToFrontend):
+        (WebInspector.DOMAgent.prototype._dispatchWhenDocumentAvailable.onDocumentAvailable):
+        (WebInspector.DOMAgent.prototype._dispatchWhenDocumentAvailable):
+        (WebInspector.DOMAgent.prototype._attributeModified):
+        (WebInspector.DOMAgent.prototype._attributeRemoved):
+        (WebInspector.DOMAgent.prototype._inlineStyleInvalidated):
+        (WebInspector.DOMAgent.prototype._loadNodeAttributes):
+        (WebInspector.DOMAgent.prototype._characterDataModified):
+        (WebInspector.DOMAgent.prototype.nodeForId):
+        (WebInspector.DOMAgent.prototype._documentUpdated):
+        (WebInspector.DOMAgent.prototype._setDocument):
+        (WebInspector.DOMAgent.prototype._setDetachedRoot):
+        (WebInspector.DOMAgent.prototype._setChildNodes):
+        (WebInspector.DOMAgent.prototype._bindNodes):
+        (WebInspector.DOMAgent.prototype._childNodeCountUpdated):
+        (WebInspector.DOMAgent.prototype._childNodeInserted):
+        (WebInspector.DOMAgent.prototype._childNodeRemoved):
+        (WebInspector.DOMAgent.prototype.inspectElement):
+        (WebInspector.DOMAgent.prototype.performSearch.callback):
+        (WebInspector.DOMAgent.prototype.performSearch):
+        (WebInspector.DOMAgent.prototype.searchResult.mycallback):
+        (WebInspector.DOMAgent.prototype.searchResult):
+        (WebInspector.DOMAgent.prototype.cancelSearch):
+        (WebInspector.DOMAgent.prototype.querySelector):
+        (WebInspector.DOMAgent.prototype.querySelectorAll):
+        (WebInspector.DOMAgent.prototype.highlightDOMNode):
+        (WebInspector.DOMAgent.prototype.hideDOMNodeHighlight):
+        (WebInspector.DOMAgent.prototype.highlightDOMNodeForTwoSeconds):
+        (WebInspector.DOMAgent.prototype.setInspectModeEnabled):
+        (WebInspector.DOMAgent.prototype._buildHighlightConfig):
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Copy over WebInspector.DOMNode from Open Source.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Rubber-stamped by John Sullivan.
+
+        * UserInterface/DOMNode.js: Copied from OpenSource/Source/WebCore/inspector/front-end/DOMAgent.js.
+        (WebInspector.DOMNode):
+        (WebInspector.DOMNode.prototype.hasAttributes):
+        (WebInspector.DOMNode.prototype.hasChildNodes):
+        (WebInspector.DOMNode.prototype.nodeType):
+        (WebInspector.DOMNode.prototype.nodeName):
+        (WebInspector.DOMNode.prototype.nodeNameInCorrectCase):
+        (WebInspector.DOMNode.prototype.setNodeName):
+        (WebInspector.DOMNode.prototype.localName):
+        (WebInspector.DOMNode.prototype.nodeValue):
+        (WebInspector.DOMNode.prototype.setNodeValue):
+        (WebInspector.DOMNode.prototype.getAttribute):
+        (WebInspector.DOMNode.prototype.setAttribute):
+        (WebInspector.DOMNode.prototype.setAttributeValue):
+        (WebInspector.DOMNode.prototype.attributes):
+        (WebInspector.DOMNode.prototype.removeAttribute):
+        (WebInspector.DOMNode.prototype.getChildNodes.mycallback):
+        (WebInspector.DOMNode.prototype.getChildNodes):
+        (WebInspector.DOMNode.prototype.getOuterHTML):
+        (WebInspector.DOMNode.prototype.setOuterHTML):
+        (WebInspector.DOMNode.prototype.removeNode):
+        (WebInspector.DOMNode.prototype.copyNode):
+        (WebInspector.DOMNode.prototype.eventListeners):
+        (WebInspector.DOMNode.prototype.path):
+        (WebInspector.DOMNode.prototype.appropriateSelectorFor):
+        (WebInspector.DOMNode.prototype.isAncestor):
+        (WebInspector.DOMNode.prototype.isDescendant):
+        (WebInspector.DOMNode.prototype._setAttributesPayload):
+        (WebInspector.DOMNode.prototype._insertChild):
+        (WebInspector.DOMNode.prototype._removeChild):
+        (WebInspector.DOMNode.prototype._setChildrenPayload):
+        (WebInspector.DOMNode.prototype._renumber):
+        (WebInspector.DOMNode.prototype._addAttribute):
+        (WebInspector.DOMNode.prototype._setAttribute):
+        (WebInspector.DOMNode.prototype._removeAttribute):
+        (WebInspector.DOMNode.prototype.ownerDocumentElement):
+        (WebInspector.DOMNode.prototype.moveTo):
+        (WebInspector.DOMNode.prototype.isXMLNode):
+        * UserInterface/Main.html: Included DOMNode.js.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Copy over WebInspector.RemoteObject from Open Source.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Rubber-stamped by John Sullivan.
+
+        * UserInterface/Main.html: Included RemoteObject.js.
+        * UserInterface/RemoteObject.js: Copied from OpenSource/Source/WebCore/inspector/front-end/RemoteObject.js.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Copy over WebInspector.ContextMenu from Open Source.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Rubber-stamped by John Sullivan.
+
+        * UserInterface/ContextMenu.js: Copied from OpenSource/Source/WebCore/inspector/front-end/ContextMenu.js.
+        * UserInterface/Main.html: Included ContextMenu.js.
+
+2012-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Rename TreeElementHierarchicalPathComponent.js to GeneralTreeElementPathComponent.js.
+
+        It always dealt with GeneralTreeElements from the start, not TreeElements. This makes it clear
+        that is can't be used with other TreeElement subclasses (like DOMTreeElement).
+
+        Rubber-stamped by John Sullivan.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser.prototype._updateHierarchicalPathNavigationItem): Use GeneralTreeElementPathComponent.
+        (WebInspector.ContentBrowser.prototype._hierarchicalPathComponentWasSelected): Ditto.
+        * UserInterface/GeneralTreeElementPathComponent.js: Renamed from TreeElementHierarchicalPathComponent.js.
+        * UserInterface/Main.html: Renamed TreeElementHierarchicalPathComponent.js to GeneralTreeElementPathComponent.js.
+
+2012-01-14  Timothy Hatcher  <timothy@apple.com>
+
+        Prevent deselection of frames in the Resources sidebar when they navigate, or when resources redirect.
+
+        When a frame navigates or a resource redirects we remove it from the tree and reinsert it at the correct
+        sort order based on the new URL. When the tree element was removed we would automatically select a sibling.
+        This uses new TreeOutline support to suppress notifying select/deselect listeners so the temporary removal
+        is not noticed, so the content view does not change briefly.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/FrameTreeElement.js:
+        (WebInspector.FrameTreeElement.prototype._addTreeElement):
+        (WebInspector.FrameTreeElement.prototype._removeTreeElement):
+
+2012-01-14  Timothy Hatcher  <timothy@apple.com>
+
+        Add more support for suppressing the select and deselect events in TreeOutline. This also fixes
+        a typo where suppress was pervasively misspelled.
+
+        This is needed to prevent changing views when a tree element in the Resources sidebar moves to a folder.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/TreeOutline.js:
+        (TreeOutline.prototype.removeChildAtIndex): Added suppressOnDeselect and suppressSelectSibling.
+        (TreeOutline.prototype.removeChild): Ditto.
+        (TreeOutline.prototype.removeChildren): Added suppressOnDeselect.
+        (TreeOutline.prototype.removeChildrenRecursive): Ditto.
+        (TreeElement.prototype.select): Added suppressOnSelect and suppressOnDeselect.
+        (TreeElement.prototype.revealAndSelect): Added the same parameters as select.
+
+2012-01-11  Timothy Hatcher  <timothy@apple.com>
+
+        Make DataGrid use CSS gradients for headers instead of images.
+
+        Part of: <rdar://problem/10643175> DataGrid should be HiDPI compliant
+
+        Reviewed by Jing Jin.
+
+        * UserInterface/DataGrid.css:
+        (.data-grid th):
+        (.data-grid th:first-child):
+        (.data-grid th:active:first-child):
+        (.data-grid th:last-child):
+        (.data-grid th:active:last-child):
+        (.data-grid table.data):
+        (.data-grid td):
+        (.data-grid td:last-child):
+        (.data-grid th.sortable:active):
+        (.data-grid th.sort-ascending, .data-grid th.sort-descending):
+        (.data-grid th.sortable.sort-ascending:active, .data-grid th.sortable.sort-descending:active):
+        (.data-grid th.sort-descending + th):
+        (.data-grid th.sort-descending + th:active):
+        (.data-grid th.sort-descending:first-child):
+        (.data-grid th.sort-descending:last-child):
+        (body.inactive .data-grid th.sort-ascending, body.inactive .data-grid th.sort-descending):
+        * UserInterface/Images/glossyHeader.png: Removed.
+        * UserInterface/Images/glossyHeaderPressed.png: Removed.
+        * UserInterface/Images/glossyHeaderSelected.png: Removed.
+        * UserInterface/Images/glossyHeaderSelectedPressed.png: Removed.
+
+2012-01-10  Timothy Hatcher  <timothy@apple.com>
+
+        Improve appearance of DataGrid in the new Web Inspector.
+
+        This removes the extra border and outline around the DOM Storage and Cookie Storage content views.
+        The empty gutter on the right is also removed now that OS X has overlay scrollers.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CookieStorageContentView.css:
+        (.content-view.cookie-storage > .data-grid): Set border and outline to none.
+        * UserInterface/DOMStorageContentView.css:
+        (.content-view.dom-storage > .data-grid): Ditto.
+        * UserInterface/DataGrid.css:
+        (.data-grid .data-container): Remove padding-right.
+        (.data-grid th:last-child): Added. Remove right border and set padding-right to give room for the scroller.
+        (.data-grid td:last-child): Added. Ditto.
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGrid): Removed the corder cell since it ins't needed to make room for the scroller anymore.
+
+2012-01-10  Timothy Hatcher  <timothy@apple.com>
+
+        Add utility functions needed by the DOM tree code.
+
+        Part of: <rdar://problem/10663163> Implement the DOM Tree content view
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/Utilities.js:
+        (Node.prototype.isAncestor): Copied from OpenSource/Source/WebCore/inspector/front-end/utilities.js.
+        (Node.prototype.isDescendant): Ditto.
+        (Element.prototype.createChild): Ditto.
+        (DocumentFragment.prototype.createChild): Ditto.
+
+2012-01-10  Timothy Hatcher  <timothy@apple.com>
+
+        Fix a case where Element.totalOffsetLeft is used as a function instead of a property.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/TreeOutline.js:
+        (TreeElement.prototype.isEventWithinDisclosureTriangle): Don't call totalOffsetLeft as a function.
+
+2012-01-10  Timothy Hatcher  <timothy@apple.com>
+
+        Make events dispatch to listeners on all constructors up the prototype chain, not just immediate constructor.
+
+        This is needed so subclasses of ContentView can dispatch events to listeners without the need for them to listen
+        on the concrete ContentView subclasses.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Object.js:
+        (WebInspector.Object.prototype.dispatchEventToListeners):
+
+2012-01-10  Timothy Hatcher  <timothy@apple.com>
+
+        Make clicking of links for main resources of frames navigate to those resources. Before this only subresources
+        were navigable and clicking a main resource link would open a new Safari window instead of showing the source.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Frame.js:
+        (WebInspector.Frame.prototype.resourceForURL): Check the main resources of the child frames for the requested URL.
+
+2012-01-10  Timothy Hatcher  <timothy@apple.com>
+
+        Allow repeated selection of tree elements in the Storage panel (and all future NavigationSidebarPanels.)
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel): Set this._contentTreeOutline.allowsRepeatSelection to true.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel): Moved this.contentTreeOutline.allowsRepeatSelection = true from here
+        to WebInspector.NavigationSidebarPanel.
+
+2012-01-12  Timothy Hatcher  <timothy@apple.com>
+
+        Exclude Web Inspector strings from localizedStrings.js until they can be included
+        in Production builds.
+
+        Reviewed by Darin Adler.
+
+        * UserInterface/Main.js:
+        (WebInspector.UIString): Always return the string until we can actually do the lookup.
+        * English.lproj/localizedStrings.js: Updated to exclude Web Inspector strings.
+
+2012-01-11  Brian Weinstein  <bweinstein@apple.com>
+
+        Rest of <rdar://problem/10643012> Implement Database content views for new inspector design.
+
+        Implement custom views for when a database table is empty, or when there was an error
+        loading the data.
+
+        If a table is empty, we don't get a list of column names, and can't show an empty data grid.
+        If there was an error, we also can't show a data grid because we don't know anything about
+        the table.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DatabaseTableContentView.js:
+        (WebInspector.DatabaseTableContentView.prototype._queryFinished): If we were unable to create
+            a data grid, the table was empty, so call createMessageTextView.
+        (WebInspector.DatabaseTableContentView.prototype._queryError): Call createMessageTextView.
+        * UserInterface/Main.css:
+        (.message-text-view, message-text-view > p, message-text-view.error): Added styles for createMessageTextView.
+        * UserInterface/Main.js:
+        (WebInspector.createMessageTextView): Creates a view and returns it to the caller.
+        * English.lproj/localizedStrings.js:
+
+2012-01-11  Brian Weinstein  <bweinstein@apple.com>
+
+        Clear database table views when the page navigates.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel.prototype._storageCleared):
+
+2012-01-11  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10643012> Implement Database content views for new inspector design.
+
+        Implement the DataGrid for database tables.
+
+        This patch adds the ability to be able to execute SQL queries on a DatabaseObject, and DatabaseContentView
+        uses that to get the data from the selected table.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DatabaseObject.js:
+        (WebInspector.DatabaseObject.prototype.executeSQL): Call through to DatabaseAgent.executeSQL.
+        * UserInterface/DatabaseObserver.js: Add a map from transaction ID -> callbacks to be able to do the right
+            thing when sqlTransactionSucceeded or sqlTransactionFailed is called.
+        (WebInspector.DatabaseObserver.prototype.sqlTransactionSucceeded): Call the onSuccess callback for that
+            transaction ID.
+        (WebInspector.DatabaseObserver.prototype.sqlTransactionFailed): Call the onError callback for that transaction
+            ID.
+        * UserInterface/DatabaseTableContentView.css: Added.
+        (.content-view.database-table > .data-grid):
+        * UserInterface/DatabaseTableContentView.js:
+        (WebInspector.DatabaseTableContentView): Call update.
+        (WebInspector.DatabaseTableContentView.prototype.constructor.WebInspector.DatabaseTableContentView.update): Get the
+            data from the table.
+        (WebInspector.DatabaseTableContentView.prototype._escapeTableName): Taken from open source.
+        (WebInspector.DatabaseTableContentView.prototype._queryFinished): Create a sortable data grid with the column names
+            and the values returned from the SQL call.
+        (WebInspector.DatabaseTableContentView.prototype._queryError): Added a FIXME to handle the error.
+        * UserInterface/Main.html:
+
+2012-01-10  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10643012> Implement Database content views for new inspector design.
+
+        Add a content view for database tables. It is currently empty, but a datagrid will be added that
+        will show the correct data.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView):
+        (WebInspector.ContentView.isViewable):
+        * UserInterface/DatabaseTableContentView.js: Added.
+        (WebInspector.DatabaseTableContentView):
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentBrowserTreeElementForRepresentedObject):
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel.prototype._treeElementSelected):
+
+2012-01-10  Brian Weinstein  <bweinstein@apple.com>
+
+        Clear the DOM and cookie storage content views when we navigate.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel.prototype._storageCleared):
+
+2012-01-10  Brian Weinstein  <bweinstein@apple.com>
+
+        Rest of <rdar://problem/10642964> Implement Cookie content view for new web inspector design.
+
+        Implement deleting of individual cookies.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/CookieStorageContentView.js:
+        (WebInspector.CookieStorageContentView.prototype._rebuildTable): Add a delete callback.
+        (WebInspector.CookieStorageContentView.prototype._deleteCallback): Delete the cookie.
+
+2012-01-10  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10642964> Implement Cookie content view for new web inspector design.
+
+        Implement the sorting of columns in the cookie data grid.
+
+        The code to sort the array was brought from open source. The rest of the patch is some refactoring
+        which makes the code more efficient. When we get the cookies from the PageAgent, we filter them,
+        and store the filtered cookies as a property in the class. When the sorting order is changed,
+        we just rebuild the table using the filtered cookies already stored, so we don't need to refilter
+        them when the sorting order changed.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/CookieStorageContentView.js:
+        (WebInspector.CookieStorageContentView.prototype.constructor.WebInspector.CookieStorageContentView.update): Store the filtered
+            cookies as a property, then call rebuildTable.
+        (WebInspector.CookieStorageContentView.prototype._rebuildTable): Don't take cookies as a parameter any more, and don't
+            filter them.
+
+        (WebInspector.CookieStorageContentView.prototype._sortCookies.localeCompare): Copied from open source.
+        (WebInspector.CookieStorageContentView.prototype._sortCookies.numberCompare): Ditto.
+        (WebInspector.CookieStorageContentView.prototype._sortCookies.expiresCompare): Ditto.
+        (WebInspector.CookieStorageContentView.prototype._sortCookies): Ditto.
+        * UserInterface/Utilities.js:
+        (Object.defineProperty): Copied from open source.
+
+2012-01-10  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10642964> Implement Cookie content view for new web inspector design.
+
+        Filter the cookies that are shown for each domain that the page has loaded. This means that when
+        you see the cookies for twitter.com, you will only see the twitter.com cookies, and not the doubleclick
+        cookies that twitter might have loaded.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/CookieStorageContentView.js:
+        (WebInspector.CookieStorageContentView.prototype._updateWithCookies): Use the filtered cookies.
+        (WebInspector.CookieStorageContentView.prototype._filterCookies): Get a list of all the resources
+            that are loaded with the CookieStorageContentView's host, and when looking at the document's cookies,
+            only add the ones that match the host.
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.get frames): Get the frames of the document.
+
+        (WebInspector.cookieMatchesResourceURL): Brought over from open source.
+        (WebInspector.cookieDomainMatchesResourceDomain): Ditto.
+
+2012-01-09  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10642964> Implement Cookie content view for new web inspector design.
+
+        Show a list of cookies on the page. It can't be sorted, and isn't filtered for the cookie host that
+        you selected, but cookies do show up.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/CookieStorageContentView.css: Added.
+        (.content-view.cookie-storage > .data-grid): The data grid takes up the whole view.
+        * UserInterface/CookieStorageContentView.js:
+        (WebInspector.CookieStorageContentView): Call update.
+        (WebInspector.CookieStorageContentView.prototype.constructor.WebInspector.CookieStorageContentView.update): Get the cookies
+            on the page, and then call _updateWithCookies on the result.
+        (WebInspector.CookieStorageContentView.prototype._updateWithCookies): Create the data grid if it hasn't been created yet, and
+            populate it.
+        * UserInterface/Main.html: Add new file.
+        * English.lproj/localizedStrings.js: Update localized string.
+
+2012-01-09  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10642964> Implement Cookie content view for new web inspector design.
+
+        Add a content view for cookie storage. It is currently empty, but a datagrid will be added that
+        will show the correct data.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView): Add a new case for CookieStorageObject,
+        (WebInspector.ContentView.isViewable): Ditto.
+        * UserInterface/CookieStorageContentView.js: Added.
+        (WebInspector.CookieStorageContentView):
+        * UserInterface/Main.html: Add new files.
+        * UserInterface/Main.js:
+        (WebInspector.contentBrowserTreeElementForRepresentedObject): Add a new case for CookieStorageObject.
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel.prototype._treeElementSelected): Ditto.
+
+2012-01-09  Brian Weinstein  <bweinstein@apple.com>
+
+        When we want to update the DOM storage data grid, don't remove the whole data grid and re-create it,
+        just remove the DataGridNodes and regenerate those.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DOMStorageContentView.js:
+        (WebInspector.DOMStorageContentView.prototype.constructor.WebInspector.DOMStorageContentView.update): Don't remove the content
+            view's children.
+        (WebInspector.DOMStorageContentView.prototype._showDOMStorageEntries): Call _updateDataGridForDOMStorageEntries (which was renamed).
+        (WebInspector.DOMStorageContentView.prototype._updateDataGridForDOMStorageEntries): Renamed. It also now only creates the data grid
+            if necessary, and removes the children from the data grid before adding the new children.
+
+2012-01-06  Brian Weinstein  <bweinstein@apple.com>
+
+        Rest towards <rdar://problem/10643005> Implement DOM Storage content views for new inspector design.
+
+        Hook up editing of the DOM storage items.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DOMStorageContentView.js:
+        (WebInspector.DOMStorageContentView.prototype._dataGridForDOMStorageEntries): Add an editing callback.
+        (WebInspector.DOMStorageContentView.prototype._editingCallback): Tell the DOMStorageObject about what
+            item to modify.
+        * UserInterface/DOMStorageObject.js:
+        (WebInspector.DOMStorageObject.prototype.setItem): Call through to DOMStorageAgent.
+        * UserInterface/Editing.css: Added. Copied some rules from inspector.css in Open Source.
+        * UserInterface/EditingSupport.js: Added. Copied selected functions from Open Source UIUtils.js.
+        * UserInterface/KeyboardShortcut.js: Added.
+        * UserInterface/Main.html: Added new files.
+        * UserInterface/Utilities.js: Copied isInsertionCaretInside from Open Source utilities.js, but made it
+            a property.
+
+2012-01-06  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10643005> Implement DOM Storage content views for new inspector design.
+
+        Implement DOMStorageObserver.updateDOMStorage, and have it call all the way through to calling
+        update on the DOMStorageContentView.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DOMStorageObserver.js:
+        (WebInspector.DOMStorageObserver.prototype.updateDOMStorage):
+        * UserInterface/StorageManager.js:
+        (WebInspector.StorageManager.prototype.domStorageWasUpdated):
+        (WebInspector.StorageManager.prototype._mainResourceDidChange):
+        (WebInspector.StorageManager.prototype._domStorageForId):
+
+2012-01-06  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10643005> Implement DOM Storage content views for new inspector design.
+
+        Hook up the delete callback from the datagrid. When the delete key is pressed and a row is selected,
+        that DOM storage item will be deleted.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DOMStorageContentView.js:
+        (WebInspector.DOMStorageContentView.prototype._dataGridForDOMStorageEntries):
+        (WebInspector.DOMStorageContentView.prototype._deleteCallback):
+        * UserInterface/DOMStorageObject.js:
+        (WebInspector.DOMStorageObject.prototype.getEntries):
+        (WebInspector.DOMStorageObject.prototype.removeItem):
+
+2012-01-06  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10643005> Implement DOM Storage content views for new inspector design.
+
+        Make resizing columns work.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DataGrid.js:
+        (WebInspector.DataGrid.prototype._resizerDragging): Change totalOffsetLeft to be a property instead of
+            a function. This matches Utilities.js and code that we already have.
+        (WebInspector.DataGridNode.prototype.isEventWithinDisclosureTriangle): Ditto.
+        * UserInterface/Main.js:
+        (WebInspector.elementDragStart): Copied from Open Source.
+        (WebInspector.elementDragEnd): Ditto.
+        * UserInterface/Utilities.js:
+        (Object.defineProperty):
+
+2012-01-06  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10643005> Implement DOM Storage content views for new inspector design.
+
+        We now show a data grid with the contents of the local or session storage.
+
+        It's not editable, and you can't resize the columns yet, but that will come in
+        the not too distant future.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DOMStorageContentView.css: Added.
+        (.content-view.dom-storage > .data-grid): Make the data grid take up the whole content view.
+        * UserInterface/DOMStorageContentView.js:
+        (WebInspector.DOMStorageContentView): Call update.
+        (WebInspector.DOMStorageContentView.prototype.constructor.WebInspector.DOMStorageContentView.update): Remove all children
+            from the content view, and ask the DOM storage object for a list of entries, and pass _showDOMStorageEntries as a callback.
+        (WebInspector.DOMStorageContentView.prototype._showDOMStorageEntries): Call _dataGridForDOMStorageEntries and add the data grid
+            to the
+        (WebInspector.DOMStorageContentView.prototype._dataGridForDOMStorageEntries): Create the data grid and populate it.
+        * UserInterface/DOMStorageObject.js:
+        (WebInspector.DOMStorageObject.prototype.isLocalStorage):
+        (WebInspector.DOMStorageObject.prototype.getEntries): Ask for the entries for the DOM storage.
+        * UserInterface/Main.html: Add the new CSS file.
+        * English.lproj/localizedStrings.js: Update the localized strings.
+
+2012-01-06  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10643005> Implement DOM Storage content views for new inspector design.
+
+        Clean up DataGrid by replacing (add|remove|has)StyleClass with classList.(add|remove|contains).
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DataGrid.js:
+
+2012-01-06  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10643005> Implement DOM Storage content views for new inspector design.
+
+        Add a content view for DOM storage. Currently it is just a blank view, but a datagrid will be
+        added that will show the correct data.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView): Add a new case for DOMStorageObject.
+        (WebInspector.ContentView.isViewable): Ditto.
+        (.content-view.dom-storage > .content-view-container):
+        * UserInterface/DOMStorageContentView.js: Added.
+        (WebInspector.DOMStorageContentView):
+        * UserInterface/Main.html:
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel): Add a listener for when a tree element is selected.
+        (WebInspector.StorageSidebarPanel.prototype._storageCleared):
+        (WebInspector.StorageSidebarPanel.prototype._treeElementSelected): Install the content view.
+
+2012-01-04  Brian Weinstein  <bweinstein@apple.com>
+
+        Work towards <rdar://problem/10643005> Implement DOM Storage content views for new inspector design.
+
+        Add DataGrid JavaScript, CSS files, and necessary images to the internal project.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DataGrid.js: Added. This was copied from ToT Open Source, but the changes from
+            http://trac.webkit.org/changeset/98225 and http://trac.webkit.org/changeset/98228 were rolled out,
+            because we don't share the same concept of a WebInspector view.
+
+        * UserInterface/Images/glossyHeader.png: Added.
+        * UserInterface/Images/glossyHeaderPressed.png: Added.
+        * UserInterface/Images/glossyHeaderSelected.png: Added.
+        * UserInterface/Images/glossyHeaderSelectedPressed.png: Added.
+        * UserInterface/Images/treeDownTriangleBlack.png: Added.
+        * UserInterface/Images/treeDownTriangleWhite.png: Added.
+        * UserInterface/Images/treeRightTriangleBlack.png: Added.
+        * UserInterface/Images/treeRightTriangleWhite.png: Added.
+        * UserInterface/Images/treeUpTriangleBlack.png: Added.
+
+        * UserInterface/Main.html: Added new files.
+
+        * UserInterface/dataGrid.css: Added.
+
+2012-01-06  Timothy Hatcher  <timothy@apple.com>
+
+        Add a path component to WebInspector.FrameContentView that will eventually let you switch
+        between Source Code and DOM Tree.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/FrameContentView.js:
+        (WebInspector.FrameContentView.createPathComponent): Added. Helper for making HierarchicalPathComponents.
+        (WebInspector.FrameContentView): Create a Source Code path component.
+        (WebInspector.FrameContentView.prototype.get selectionPathComponents): Added. Append the current view's path
+        components to the path component representing the current view.
+        (WebInspector.FrameContentView.prototype._pathComponentForContentView): Added.
+        (WebInspector.FrameContentView.prototype._showContentViewForIdentifier): Added.
+        (WebInspector.FrameContentView.prototype._pathComponentSelected): Added.
+        * UserInterface/Images/SourceCode.pdf: Added.
+        * UserInterface/Main.html: Included PathComponentIcons.css.
+        * UserInterface/PathComponentIcons.css: Added.
+        (.source-code-icon .icon):
+        * English.lproj/localizedStrings.js: Updated.
+
+2012-01-06  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for path components in the Quick Navigation bar that represent the current selection in a content view.
+
+        Part of: <rdar://problem/10318787> Implement the Quick Navigation bar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ClusterContentView.js:
+        (WebInspector.ClusterContentView): Listen for CurrentContentViewDidChange and SelectionPathComponentsDidChange events.
+        (WebInspector.ClusterContentView.prototype.get selectionPathComponents): Added. Forward the selectionPathComponents
+        of the current view.
+        (WebInspector.ClusterContentView.prototype._currentContentViewDidChange): Added. Dispatch SelectionPathComponentsDidChange event.
+        (WebInspector.ClusterContentView.prototype._contentViewSelectionPathComponentDidChange): Added. Dispatch the
+        SelectionPathComponentsDidChange event if the event target is our current content view.
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser): Create a hierarchical path navigation item for the content view path components.
+        (WebInspector.ContentBrowser.prototype._updateContentViewSelectionPathNavigationItem): Added. Remove and insert the navigation
+        item if needed and update the components.
+        (WebInspector.ContentBrowser.prototype._contentViewSelectionPathComponentDidChange): Added. Call _updateContentViewSelectionPathNavigationItem.
+        (WebInspector.ContentBrowser.prototype._currentContentViewDidChange): Call _updateContentViewSelectionPathNavigationItem.
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView.prototype.get selectionPathComponents): Added stub.
+        * UserInterface/HierarchicalPathComponent.css:
+        (.hierarchical-path:not(.always-show-last-path-component-separator) > .hierarchical-path-component:last-of-type > .separator): Added
+        the :not(.always-show-last-path-component-separator) part so so prevent hiding the separator in that case.
+        * UserInterface/HierarchicalPathNavigationItem.js:
+        (WebInspector.HierarchicalPathNavigationItem.prototype.get alwaysShowLastPathComponentSeparator): Added.
+        (WebInspector.HierarchicalPathNavigationItem.prototype.set alwaysShowLastPathComponentSeparator): Added.
+
+2012-01-05  Timothy Hatcher  <timothy@apple.com>
+
+        Fix a regression from r39746 where link navigation between Web Inspector resource broke.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Main.js:
+        (WebInspector.openURL): Use contentBrowser instead of the now removed contentViewContainer.
+        Also show the frame for main resources instead of the resource itself.
+
+2012-01-05  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an issue where host names for frames where not shown when they differ from the frame that includes them.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.isMainResource): Added. Helper function.
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement.prototype._updateTitles): When the resource is a main resource, get the
+        host from the parent frame instead of the current frame.
+
+2012-01-05  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for intra-view back/forward navigation.
+
+        Part of: <rdar://problem/10318787> Implement the Quick Navigation bar for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ClusterContentView.js:
+        (WebInspector.ClusterContentView.prototype.canGoBack): Added. Call through to the content view container.
+        (WebInspector.ClusterContentView.prototype.canGoForward): Added. Ditto.
+        (WebInspector.ClusterContentView.prototype.goBack): Added. Ditto.
+        (WebInspector.ClusterContentView.prototype.goForward): Added. Ditto.
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser.prototype.canGoBack): Added. Check the current content view first.
+        (WebInspector.ContentBrowser.prototype.canGoForward): Added. Check the current content view first.
+        (WebInspector.ContentBrowser.prototype.goBack): Added. Try the current content view first.
+        (WebInspector.ContentBrowser.prototype.goForward): Added. Try the current content view first.
+        (WebInspector.ContentBrowser.prototype._backButtonClicked): Call goBack on this instead of the content
+        view container directly.
+        (WebInspector.ContentBrowser.prototype._forwardButtonClicked): Call goForward on this instead of the
+        content view container directly.
+        (WebInspector.ContentBrowser.prototype._updateBackForwardButtons): Added.
+        (WebInspector.ContentBrowser.prototype._currentContentViewDidChange): Call _udpateBackForwardButtons.
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView.prototype.canGoBack): Added stub.
+        (WebInspector.ContentView.prototype.canGoForward): Added stub.
+        (WebInspector.ContentView.prototype.goBack): Added stub.
+        (WebInspector.ContentView.prototype.goForward): Added stub.
+
+2012-01-04  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.FrameContentView and WebInspector.ClusterContentView in preparation for showing
+        either the main resource text or the DOM tree for a frame.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ClusterContentView.css: Added.
+        (.content-view.cluster > .content-view-container):
+        * UserInterface/ClusterContentView.js: Added.
+        (WebInspector.ClusterContentView):
+        (WebInspector.ClusterContentView.prototype.get contentViewContainer):
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView): Return a FrameContentView for a Frame.
+        (WebInspector.ContentView.isViewable): Added Frame.
+        * UserInterface/FrameContentView.js: Added.
+        (WebInspector.FrameContentView):
+        (WebInspector.FrameContentView.prototype.get frame):
+        * UserInterface/Main.html: Included ClusterContentView.{css,js} and FrameContentView.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentBrowserTreeElementForRepresentedObject): Added WebInspector.Frame check.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.treeElementForRepresentedObject): Removed. The base class
+        version of this function is enough now.
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameMainResourceDidChange): Close all FrameContentViews
+        and improve a comment and add a FIXME.
+        (WebInspector.ResourceSidebarPanel.prototype._treeElementSelected): Use treeElement.representedObject
+        instead of treeElement.resource since we want a FrameContentView for frames.
+
+2012-01-04  Timothy Hatcher  <timothy@apple.com>
+
+        Populate the on-click menu for path components backed by tree elements.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser): Add PathComponentWasSelected event listener.
+        (WebInspector.ContentBrowser.prototype._updateHierarchicalPathNavigationItem): Use TreeElementHierarchicalPathComponent.
+        (WebInspector.ContentBrowser.prototype._hierarchicalPathComponentWasSelected): Added.
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView): Add assertions that isViewable is correct.
+        (WebInspector.ContentView.isViewable): Added.
+        * UserInterface/Main.html: Included TreeElementHierarchicalPathComponent.js.
+        * UserInterface/TreeElementHierarchicalPathComponent.js: Added.
+        (WebInspector.TreeElementHierarchicalPathComponent):
+        (WebInspector.TreeElementHierarchicalPathComponent.prototype.get treeElement):
+        (WebInspector.TreeElementHierarchicalPathComponent.prototype.get previousSibling):
+        (WebInspector.TreeElementHierarchicalPathComponent.prototype.get nextSibling):
+
+2012-01-04  Timothy Hatcher  <timothy@apple.com>
+
+        Show a popup menu on click in HierarchicalPathComponent that contains sibling path components.
+
+        Part of: <rdar://problem/10318787> Implement the Quick Navigation bar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/HierarchicalPathComponent.css:
+        (.hierarchical-path-component): Make positioning relative.
+        (.hierarchical-path-component > select): Added. Positioned so the text in the menu aligns with the text in .title.
+        * UserInterface/HierarchicalPathComponent.js:
+        (WebInspector.HierarchicalPathComponent): Create the select element.
+        (WebInspector.HierarchicalPathComponent.prototype.get previousSibling): Added.
+        (WebInspector.HierarchicalPathComponent.prototype.set previousSibling): Added.
+        (WebInspector.HierarchicalPathComponent.prototype.get nextSibling): Added.
+        (WebInspector.HierarchicalPathComponent.prototype.set nextSibling): Added.
+        (WebInspector.HierarchicalPathComponent.prototype._updateSelectElement): Added. Build the select menu.
+        (WebInspector.HierarchicalPathComponent.prototype._updateSelectElement.createOption): Added. Helper to create
+        an option element from a path component.
+        (WebInspector.HierarchicalPathComponent.prototype._selectElementMouseDown): Added. Call _updateSelectElement.
+        (WebInspector.HierarchicalPathComponent.prototype._selectElementSelectionChanged): Added. Fire the SiblingWasSelected event.
+        * UserInterface/HierarchicalPathNavigationItem.js:
+        (WebInspector.HierarchicalPathNavigationItem.prototype.set components): Remove and add event listeners.
+        (WebInspector.HierarchicalPathNavigationItem.prototype._siblingPathComponentWasSelected): Added. Fire the PathComponentWasSelected event.
+
+2012-01-03  Brian Weinstein  <bweinstein@apple.com>
+
+        If a database doesn't have any tables, its tree element shouldn't have a disclosure triangle.
+
+        When creating the tree element for a database, initially set it not to have children, but make sure
+        it is populated when it is first created, so children will be added if it has them.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DatabaseTreeElement.js:
+        (WebInspector.DatabaseTreeElement):
+        (WebInspector.DatabaseTreeElement.prototype.onpopulate.tableNamesCallback):
+        (WebInspector.DatabaseTreeElement.prototype.onpopulate):
+
+2012-01-02  Timothy Hatcher  <timothy@apple.com>
+
+        Localize the Web Inspector by adding WebInspector.UIString in places that need it.
+
+        Reviewed by Jessie Berlin.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser):
+        * UserInterface/CookieStorageTreeElement.js:
+        (WebInspector.CookieStorageTreeElement.prototype.get categoryName):
+        * UserInterface/DOMStorageTreeElement.js:
+        (WebInspector.DOMStorageTreeElement.prototype.get categoryName):
+        * UserInterface/DatabaseHostTreeElement.js:
+        (WebInspector.DatabaseHostTreeElement.prototype.get categoryName):
+        * UserInterface/DatabaseObject.js:
+        (WebInspector.DatabaseObject):
+        * UserInterface/FrameTreeElement.js:
+        (WebInspector.FrameTreeElement.prototype._folderNameForResourceType):
+        (WebInspector.FrameTreeElement.prototype._parentTreeElementForRepresentedObject):
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+        (WebInspector._leftSidebarToggleButtonToolTip):
+        (WebInspector._rightSidebarToggleButtonToolTip):
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel.prototype._checkForEmptyFilterResults):
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel):
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel):
+        (WebInspector.StorageSidebarPanel.prototype._domStorageObjectWasAdded):
+        (WebInspector.StorageSidebarPanel.prototype._databaseWasAdded):
+        (WebInspector.StorageSidebarPanel.prototype._cookieStorageObjectWasAdded):
+        * English.lproj/localizedStrings.js: Updated with update-safari-localizable-strings.
+
+2012-01-02  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.UIString and load the localized strings file.
+
+        Reviewed by Jessie Berlin.
+
+        * UserInterface/Main.js:
+        (WebInspector.loadLocalizedStrings): Added. Load the localized strings file and call
+        content loaded when it loads.
+        (WebInspector.UIString): Added.
+
+2012-01-02  Timothy Hatcher  <timothy@apple.com>
+
+        Add string formatting functions to Web Inspector.
+
+        These will be needed for localization and the console.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Utilities.js:
+        (Array.convert): Copied from OpenSource/Source/WebCore/inspector/front-end/utilities.js.
+        (String.tokenizeFormatString): Ditto.
+        (String.standardFormatters): Ditto.
+        (String.format): Ditto.
+        (String.prototype.format): Added.
+
+2011-12-31  Timothy Hatcher  <timothy@apple.com>
+
+        Add the toggle left and right sidebar buttons to the Quick Navigation bar.
+
+        Part of: <rdar://problem/10318787> Implement the Quick Navigation bar for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/Images/LeftSidebarClose.pdf: Added.
+        * UserInterface/Images/LeftSidebarOpen.pdf: Added.
+        * UserInterface/Images/RightSidebarClose.pdf: Added.
+        * UserInterface/Images/RightSidebarOpen.pdf: Added.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create the left and right toggle sidebar buttons and add event listeners.
+        (WebInspector._leftSidebarToggleButtonToolTip): Added. Return the correct tool tip based on which sidebar
+        is currently on the left.
+        (WebInspector._rightSidebarToggleButtonToolTip): Added. Ditto for the right.
+        (WebInspector._toggleLeftSidebar): Added.
+        (WebInspector._toggleRightSidebar): Added.
+        (WebInspector._sidebarCollapsedStateDidChange): Added. Update the toggle navigation buttons.
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar.prototype.set collapsed): Fire the CollapsedStateDidChange event.
+        * UserInterface/TextEditor.css:
+        (.text-editor > .gutter): Made the min-width 1px smaller to align with the divider in the navigation bar.
+
+2011-12-31  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for removing navigation items.
+
+        Part of: <rdar://problem/10318787> Implement the Quick Navigation bar for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype.removeNavigationItem): Added.
+        (WebInspector.NavigationBar.prototype.set selectedNavigationItem): Moved code from here into _findNavigationItem.
+        (WebInspector.NavigationBar.prototype._findNavigationItem): Added.
+
+2011-12-31  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for inserting navigation items at a specific index.
+
+        Part of: <rdar://problem/10318787> Implement the Quick Navigation bar for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype.addNavigationItem): Call insertNavigationItem.
+        (WebInspector.NavigationBar.prototype.insertNavigationItem): Added.
+
+2011-12-31  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.ToggleButtonNavigationItem for the sidebar toggle buttons in the Quick Navigation bar.
+
+        Part of: <rdar://problem/10318787> Implement the Quick Navigation bar for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem.prototype.set image): Added.
+        (WebInspector.ButtonNavigationItem.prototype._generateImages._createEmbossedCanvasImage): Call clearRect
+        since _generateImages can be called multiple times now.
+        * UserInterface/Main.html: Included ToggleButtonNavigationItem.js.
+        * UserInterface/ToggleButtonNavigationItem.js: Added.
+        (WebInspector.ToggleButtonNavigationItem): Added.
+        (WebInspector.ToggleButtonNavigationItem.prototype.get defaultImage): Added.
+        (WebInspector.ToggleButtonNavigationItem.prototype.get alternateImage): Added.
+        (WebInspector.ToggleButtonNavigationItem.prototype.get toggled): Added.
+        (WebInspector.ToggleButtonNavigationItem.prototype.set toggled): Added. Set _toggled and set the correct image.
+
+2011-12-31  Timothy Hatcher  <timothy@apple.com>
+
+        Actually set the ButtonNavigationItem tool tip so it shows up as expected.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem): Use the toolTip setter instead of _toolTip.
+        (WebInspector.ButtonNavigationItem.prototype.get toolTip): Return the title instead of _toolTip.
+        (WebInspector.ButtonNavigationItem.prototype.set toolTip): Added. Set the element title.
+
+2011-12-31  Timothy Hatcher  <timothy@apple.com>
+
+        Rename ButtonNavigationItem.displayName to toolTip.
+
+        It was always intended to be used as the tool tip, so this makes it clear.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem):
+        (WebInspector.ButtonNavigationItem.prototype.constructor.WebInspector.ButtonNavigationItem.get toolTip):
+        * UserInterface/RadioButtonNavigationItem.js:
+        (WebInspector.RadioButtonNavigationItem):
+
+2011-12-29  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an issue in the Web Inspector where the old page content might appear when
+        pressing the back button.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameMainResourceDidChange): Delay this work because
+        other listeners of this event might not have fired yet. So selecting the main frame before those listeners
+        do their work might cause the content of the old page to show instead of the new page.
+
+2011-12-29  Timothy Hatcher  <timothy@apple.com>
+
+        Add back/forward buttons to the Quick Navigation bar and hook them up.
+
+        Part of: <rdar://problem/10318787> Implement the Quick Navigation bar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser): Create the back and forward button navigation items.
+        (WebInspector.ContentBrowser.prototype._backButtonClicked): Added.
+        (WebInspector.ContentBrowser.prototype._forwardButtonClicked): Added.
+        (WebInspector.ContentBrowser.prototype._currentContentViewDidChange): Update the enabled state
+        of the back/forward navigation items.
+        * UserInterface/Images/BackArrow.pdf: Added.
+        * UserInterface/Images/ForwardArrow.pdf: Added.
+
+2011-12-29  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.DividerNavigationItem for dividing items in the Quick Navigation bar.
+
+        Part of: <rdar://problem/10318787> Implement the Quick Navigation bar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/DividerNavigationItem.css: Added.
+        (.navigation-bar > .item.divider):
+        * UserInterface/DividerNavigationItem.js: Added.
+        (WebInspector.DividerNavigationItem):
+        * UserInterface/Main.html: Included DividerNavigationItem.js and DividerNavigationItem.css.
+
+2011-12-29  Timothy Hatcher  <timothy@apple.com>
+
+        Add disabled support to WebInspector.ButtonNavigationItem.
+
+        This is needed for the back/forward buttons.
+
+        Part of: <rdar://problem/10318787> Implement the Quick Navigation bar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ButtonNavigationItem.css:
+        (.navigation-bar > .item.button.disabled > .glyph): Added.
+        (.navigation-bar > .item.button:not(.disabled):not(.radio):active): Don't highlight on click when disabled.
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem.prototype.get enabled): Added.
+        (WebInspector.ButtonNavigationItem.prototype.set enabled): Added.
+        (WebInspector.ButtonNavigationItem.prototype.generateStyleText): Added :not(.disabled) to the focus and active rules.
+        (WebInspector.ButtonNavigationItem.StyleClassName._mouseClicked): Don't fire the event when disabled.
+        * UserInterface/RadioButtonNavigationItem.js:
+        (WebInspector.RadioButtonNavigationItem.prototype.generateStyleText): Added :not(.disabled) to the focus and active rules.
+
+2011-12-29  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for click events to WebInspector.ButtonNavigationItem.
+
+        Part of: <rdar://problem/10318787> Implement the Quick Navigation bar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem): Added click event listener to the element.
+        (WebInspector.ButtonNavigationItem.StyleClassName._mouseClicked): Added. Dispatch the Clicked event.
+
+2011-12-29  Timothy Hatcher  <timothy@apple.com>
+
+        Support different size glyph images on WebInspector.ButtonNavigationItem. Also adds a highlight to
+        buttons when pressed and general style clean up.
+
+        Part of: <rdar://problem/10318787> Implement the Quick Navigation bar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ButtonNavigationItem.css:
+        (.navigation-bar > .item.button): Default buttons to a width of 26px. Removed background styles.
+        (.navigation-bar > .item.button > .glyph): Set width and height to 100% and have the background
+        centered and non-repeating.
+        (.navigation-bar > .item.button:not(.radio):active): Added. Highlight when pressed.
+        * UserInterface/ButtonNavigationItem.js:
+        (WebInspector.ButtonNavigationItem): Added image width and height arguments.
+        (WebInspector.ButtonNavigationItem.prototype.generateStyleText): Added background-size to the generated rules.
+        * UserInterface/RadioButtonNavigationItem.css:
+        (.navigation-bar > .item.radio.button): Added. Moved from ButtonNavigationItem.css.
+        (.navigation-bar.collapsed > .item.radio.button): Added. Moved from ButtonNavigationItem.css.
+        (.navigation-bar > .item.radio.button.selected): Moved background-repeat from ButtonNavigationItem.css to here.
+        (.navigation-bar.collapsed > .item.radio.button.selected): Added. Adjust the background-size to fit the width.
+        * UserInterface/RadioButtonNavigationItem.js:
+        (WebInspector.RadioButtonNavigationItem): Added image width and height arguments.
+        (WebInspector.RadioButtonNavigationItem.prototype.generateStyleText): Added background-size to the generated rules.
+
+2011-12-28  Timothy Hatcher  <timothy@apple.com>
+
+        Populate the Quick Navigation bar with the path of the selected item.
+
+        Part of: <rdar://problem/10318787> Implement the Quick Navigation bar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ContentBrowser.js:
+        (WebInspector.ContentBrowser): Added delegate argument. Create a HierarchicalPathNavigationItem and add
+        to the navigation bar.
+        (WebInspector.ContentBrowser.prototype.get delegate): Added.
+        (WebInspector.ContentBrowser.prototype.set delegate): Added.
+        (WebInspector.ContentBrowser.prototype._updateHierarchicalPathNavigationItem): Added. Build path components
+        based on the tree element for the represented object.
+        (WebInspector.ContentBrowser.prototype._currentContentViewDidChange): Added. Call _updateHierarchicalPathNavigationItem.
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer.prototype._showContentView): Dispatch the CurrentContentViewDidChange event.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Pass this as the delegate to the ContentBrowser.
+        (WebInspector.contentBrowserTreeElementForRepresentedObject): Added. Call treeElementForRepresentedObject on
+        the ResourceSidebarPanel for Resource represented objects.
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel.prototype.treeElementForRepresentedObject): Added. Generic implementation
+        that will work for most NavigationSidebarPanel subclasses.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype.treeElementForRepresentedObject): Added. If the resource is a
+        main resource, return the tree element for the parent frame.
+
+2011-12-28  Timothy Hatcher  <timothy@apple.com>
+
+        Add HierarchicalPathNavigationItem and friends for the Quick Navigation Bar.
+
+        Part of: <rdar://problem/10318787> Implement the Quick Navigation bar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/HierarchicalPathComponent.css: Added.
+        (.hierarchical-path-component):
+        (.hierarchical-path-component > .icon):
+        (.hierarchical-path-component > .title):
+        (.hierarchical-path-component:last-of-type > .separator):
+        (.hierarchical-path-component > .separator):
+        (.hierarchical-path-component.collapsed > .title):
+        * UserInterface/HierarchicalPathComponent.js: Added.
+        (WebInspector.HierarchicalPathComponent):
+        (WebInspector.HierarchicalPathComponent.prototype.get element):
+        (WebInspector.HierarchicalPathComponent.prototype.get representedObject):
+        (WebInspector.HierarchicalPathComponent.prototype.get displayName):
+        (WebInspector.HierarchicalPathComponent.prototype.set displayName):
+        * UserInterface/HierarchicalPathNavigationItem.js: Added.
+        (WebInspector.HierarchicalPathNavigationItem):
+        (WebInspector.HierarchicalPathNavigationItem.prototype.get components):
+        (WebInspector.HierarchicalPathNavigationItem.prototype.set components):
+        * UserInterface/Images/HierarchicalNavigationItemChevron.pdf: Added.
+        * UserInterface/Main.html: Included HierarchicalPathComponent.css, HierarchicalPathNavigationItem.js
+        and HierarchicalPathComponent.js.
+
+2011-12-26  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.ContentBrowser to coordinate between the Quick Navigation bar and content view container.
+
+        Part of: <rdar://problem/10318787> Implement the Quick Navigation bar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro and Brian Weinstein.
+
+        * UserInterface/ContentBrowser.css: Added.
+        (.content-browser):
+        (.content-browser > .navigation-bar):
+        (.content-browser > .content-view-container):
+        * UserInterface/ContentBrowser.js: Added.
+        (WebInspector.ContentBrowser):
+        (WebInspector.ContentBrowser.prototype.get navigationBar):
+        (WebInspector.ContentBrowser.prototype.get contentViewContainer):
+        (WebInspector.ContentBrowser.prototype.showContentForRepresentedObject):
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer.prototype.get element): Add missing return.
+        * UserInterface/Main.css:
+        (#content-browser):
+        * UserInterface/Main.html: Renamed #content to #content-browser.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create a ContentBrowser instead of a NavigationBar and ContentViewContainer.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameMainResourceDidChange): Use the ContentBrowser.
+        (WebInspector.ResourceSidebarPanel.prototype._treeElementSelected): Ditto.
+
+2011-12-28  Timothy Hatcher  <timothy@apple.com>
+
+        Hold references to the navigation sidebar panels for easy access.
+
+        Reviewed by Adam Roben.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Hold references to the sidebar panels.
+
+2011-12-28  Timothy Hatcher  <timothy@apple.com>
+
+        Remove unused TreeElement class names.
+
+        These class names were originally used for icons, but they have been
+        replaced by icon specific class names.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/CookieStorageTreeElement.js:
+        (WebInspector.CookieStorageTreeElement):
+        * UserInterface/DOMStorageTreeElement.js:
+        (WebInspector.DOMStorageTreeElement):
+        * UserInterface/DatabaseHostTreeElement.js:
+        (WebInspector.DatabaseHostTreeElement):
+        * UserInterface/DatabaseTableTreeElement.js:
+        (WebInspector.DatabaseTableTreeElement):
+        * UserInterface/DatabaseTreeElement.js:
+        (WebInspector.DatabaseTreeElement):
+        * UserInterface/FolderTreeElement.js:
+        (WebInspector.FolderTreeElement):
+        * UserInterface/FrameTreeElement.js:
+        (WebInspector.FrameTreeElement):
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement):
+        * UserInterface/StorageTreeElement.js:
+        (WebInspector.StorageTreeElement):
+
+2011-12-24  Timothy Hatcher  <timothy@apple.com>
+
+        Add icons for local and session storage.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMStorageIcons.css: Added.
+        (.local-storage-icon .icon):
+        (.session-storage-icon .icon):
+        * UserInterface/DOMStorageTreeElement.js:
+        (WebInspector.DOMStorageTreeElement): Add class names based on if it is local storage or not.
+        (WebInspector.DOMStorageTreeElement.prototype.get categoryName): Remove blank line.
+        * UserInterface/Images/LocalStorage.png: Added.
+        * UserInterface/Images/LocalStorage@2x.png: Added.
+        * UserInterface/Images/SessionStorage.png: Added.
+        * UserInterface/Images/SessionStorage@2x.png: Added.
+        * UserInterface/Main.html: Included DOMStorageIcons.css.
+
+2011-12-24  Timothy Hatcher  <timothy@apple.com>
+
+        Add icons for databases and database tables.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DatabaseHostTreeElement.css: Removed. Duplicates FolderIcon.css.
+        * UserInterface/DatabaseHostTreeElement.js:
+        (WebInspector.DatabaseHostTreeElement): Pass FolderIconStyleClassName.
+        * UserInterface/DatabaseIcon.css: Added.
+        (.database-icon .icon):
+        * UserInterface/DatabaseTableIcon.css: Added.
+        (.database-table-icon .icon):
+        * UserInterface/DatabaseTableTreeElement.js:
+        (WebInspector.DatabaseTableTreeElement): Pass class names to WebInspector.GeneralTreeElement.
+        * UserInterface/DatabaseTreeElement.js:
+        (WebInspector.DatabaseTreeElement): Don't inherit from FolderTreeElement. Pass class names
+        to WebInspector.GeneralTreeElement.
+        * UserInterface/Images/Database.png: Added.
+        * UserInterface/Images/Database@2x.png: Added.
+        * UserInterface/Images/DatabaseTable.png: Added.
+        * UserInterface/Images/DatabaseTable@2x.png: Added.
+        * UserInterface/Main.html: Included new files and removed DatabaseHostTreeElement.css.
+        * UserInterface/StorageTreeElement.js:
+        (WebInspector.StorageTreeElement): Remove a FIXME.
+
+2011-12-24  Timothy Hatcher  <timothy@apple.com>
+
+        Add images for the Cookie icon.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/CookieIcon.css: Added.
+        (.cookie-icon .icon):
+        * UserInterface/CookieStorageTreeElement.js:
+        (WebInspector.CookieStorageTreeElement):
+        * UserInterface/Images/Cookie.png: Added.
+        * UserInterface/Images/Cookie@2x.png: Added.
+        * UserInterface/Main.html: Included CookieIcon.css.
+
+2011-12-22  Timothy Hatcher  <timothy@apple.com>
+
+        Fix a couple of indentation problems in the Web Inspector.
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/CookieStorageObject.js: Indent before constructor.
+        * UserInterface/DatabaseHostTreeElement.js: Ditto.
+
+2011-12-22  Timothy Hatcher  <timothy@apple.com>
+
+        Break out WebInspector.NavigationItem and its subclasses from NavigationBar.js and NavigationBar.css into separate files.
+
+        Rubber-stamped by John Sullivan.
+
+        * UserInterface/ButtonNavigationItem.css: Added.
+        * UserInterface/ButtonNavigationItem.js: Added.
+        * UserInterface/FlexibleSpaceNavigationItem.css: Added.
+        * UserInterface/FlexibleSpaceNavigationItem.js: Added.
+        * UserInterface/Main.html: Included new files.
+        * UserInterface/NavigationBar.css: Moved "item" subclasses to seperate files.
+        * UserInterface/NavigationBar.js: Moved NavigationItem and its subclasses to seperate files.
+        * UserInterface/NavigationItem.js: Added.
+        * UserInterface/RadioButtonNavigationItem.css: Added.
+        * UserInterface/RadioButtonNavigationItem.js: Added.
+
+2011-12-22  Timothy Hatcher  <timothy@apple.com>
+
+        Dynamically register the "mousemove" and "mouseup" event listeners in WebInspector.NavigationBar
+        so they are not allways listening.
+
+        Reviewed by Darin Adler.
+
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar): Remove the static "mousemove" and "mouseup" event listeners.
+        (WebInspector.NavigationBar.prototype._mouseDown): Install the "mousemove" and "mouseup" event listeners
+        when a WebInspector.RadioButtonNavigationItem is hit.
+        (WebInspector.NavigationBar.prototype._mouseMoved): Assert the mouse is down now that we register dynamically.
+        (WebInspector.NavigationBar.prototype._mouseUp): Ditto. Remove the "mousemove" and "mouseup" event listeners.
+
+2011-12-22  Timothy Hatcher  <timothy@apple.com>
+
+        Change WebInspector.NavigationBar.NavigationItemSelectedEventName to WebInspector.NavigationBar.Event.NavigationItemSelected.
+
+        This beings WebInspector.NavigationBar in-line with all the other classes in how the event names are defined.
+
+        Reviewed by Darin Adler.
+
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype.set selectedNavigationItem): Use WebInspector.NavigationBar.Event.NavigationItemSelected.
+        (WebInspector.NavigationBar.prototype._mouseUp): Ditto.
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar): Use WebInspector.NavigationBar.Event.NavigationItemSelected.
+
+2011-12-22  Timothy Hatcher  <timothy@apple.com>
+
+        Properly define the SidebarPanelSelected event in WebInspector.Sidebar.
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar.Event): Added.
+        (WebInspector.Sidebar.Event.SidebarPanelSelected): Added.
+        (WebInspector.Sidebar.prototype.set selectedSidebarPanel): Use WebInspector.Sidebar.Event.SidebarPanelSelected
+        instead of the never defined WebInspector.Sidebar.SidebarPanelSelectedEventName.
+
+2011-12-22  Timothy Hatcher  <timothy@apple.com>
+
+        Break out the SidebarPanel class into a separate file and make it correctly inherit from WebInspector.Object.
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/Main.html: Included SidebarPanel.js.
+        * UserInterface/Sidebar.js: Moved WebInspector.SidebarPanel and WebInspector.SidebarPanel.prototype from here...
+        * UserInterface/SidebarPanel.js: Added. ...to here. Also fixed the prototype chain to make SidebarPanel inherit
+        from WebInspector.Object like it should have been.
+
+2011-12-22  Timothy Hatcher  <timothy@apple.com>
+
+        Fix an incorrect use of typeof in the Web Inspector by using instanceof instead.
+
+        Reviewed by Adam Roben.
+
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement.matchTextFilter): Use instanceof
+        instead of typeof to check if the input is an array.
+
+2011-12-22  Timothy Hatcher  <timothy@apple.com>
+
+        Make the CSS used for folder and resource icons generic so it can be used by the quick navigation bar.
+
+        Reviewed by Darin Adler.
+
+        * UserInterface/FolderIcon.css: Renamed from Safari/Develop/WebInspector/FolderTreeElement.css.
+        Replaced "folder-tree-element" with "folder-icon".
+        * UserInterface/FolderTreeElement.js:
+        (WebInspector.FolderTreeElement): Add the "folder-icon" class.
+        * UserInterface/Main.html:
+        * UserInterface/ResourceIcons.css: Renamed from Safari/Develop/WebInspector/ResourceTreeElement.css.
+        Replaced "resource-tree-element" with "resource-icon".
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement): Add the "resource-icon" class.
+
+2011-12-22  Timothy Hatcher  <timothy@apple.com>
+
+        Make identifier optional in the base class of WebInspector.NavigationItem but required for WebInspector.ButtonNavigationItem.
+
+        Reviewed by Darin Adler.
+
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationItem): Remove assert for identifier and added "|| null" to the assignment.
+        (WebInspector.NavigationItem.prototype.get _classNames): Null check identifier and add it separately.
+        (WebInspector.ButtonNavigationItem): Added assert for identifier.
+        (WebInspector.ButtonNavigationItem.prototype.generateStyleText): Don't pass the identifier to _canvasIdentifier.
+        (WebInspector.ButtonNavigationItem.StyleClassName._canvasIdentifier): Don't take the identifier as an argument, use this.identifier.
+        (WebInspector.ButtonNavigationItem.prototype._generateImages._createEmbossedCanvasImage): Don't pass the identifier to _canvasIdentifier.
+        (WebInspector.RadioButtonNavigationItem.prototype.generateStyleText): Ditto.
+
+2011-12-20  Timothy Hatcher  <timothy@apple.com>
+
+        Show a content view for XHR resources in the new Web Inspector.
+
+        Reviewed by Adam Roben.
+
+        * UserInterface/ResourceContentView.js:
+        (WebInspector.ResourceContentView): Add a case for WebInspector.Resource.Type.XHR.
+
+2011-12-19  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318744> Implement the Storage sidebar for the new Web Inspector design.
+
+        When inserting items into the Storage sidebar, insert them in alphabetical order by main title so
+        it is easier for the user to navigate.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel.prototype._compareTreeElementsByMainTitle):
+        (WebInspector.StorageSidebarPanel.prototype._addChild):
+
+2011-12-18  Timothy Hatcher  <timothy@apple.com>
+
+        Only fire the WebInspector.SyntaxHighlighter.Event.HighlightsDidChange event for whole lines.
+
+        Firing the event for partial lines causes too much DOM churn on large, single-line files.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/SyntaxHighlighter.js:
+        (WebInspector.SyntaxHighlighter.prototype._highlightNextChunk): Update actualStopLine after the
+        current line has completely finished. Don't fire the event if actualStopLine is still null.
+
+2011-12-18  Timothy Hatcher  <timothy@apple.com>
+
+        Start and stop syntax highlighting when a TextEditor is shown and hidden. This reduces the chance
+        of multiple TextEditors highlighting at the same time.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.shown): Added. Call startHighlighting and updateLayout.
+        (WebInspector.TextEditor.prototype.hidden): Added. Call stopHighlighting.
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.prototype.shown): Call TextEditor.shown instead of updateLayout.
+        (WebInspector.TextResourceContentView.prototype.hidden): Added. Call TextEditor.hidden.
+
+2011-12-18  Timothy Hatcher  <timothy@apple.com>
+
+        Use a synthetic MIME-type to select the syntax highlighter's tokenizer. Resources are often
+        transferred with a MIME-type that doesn't match the purpose the resource was loaded for.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.get syntheticMIMEType): Added.
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView.prototype.contentAvailable): Use syntheticMIMEType.
+
+2011-12-18  Timothy Hatcher  <timothy@apple.com>
+
+        Intercept link clicks in the Web Inspector and try to show the appropriate resource,
+        otherwise fallback to opening the URL in a new tab/window.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Frame.js:
+        (WebInspector.Frame.prototype.resourceForURL): Added argument to recursively search child frames.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Add click event listener.
+        (WebInspector.openURL): Added.
+        (WebInspector._mouseWasClicked): Added. Catch unhandled link clicks, cancel them and log and error.
+        * UserInterface/ResourceContentView.js:
+        (WebInspector.ResourceContentView): Added click event listener.
+        (WebInspector.ResourceContentView.prototype._mouseWasClicked): Added. Call WebInspector.openURL.
+        * UserInterface/Utilities.js:
+        (Node.prototype.enclosingNodeOrSelfWithNodeNameInArray): Copied from WebCore/inspector/front-end/utilities.js.
+        (Node.prototype.enclosingNodeOrSelfWithNodeName): Copied from WebCore/inspector/front-end/utilities.js.
+
+2011-12-18  Timothy Hatcher  <timothy@apple.com>
+
+        Make links in TextEditor be only absolute URLs. Otherwise relative URLs are resolved
+        against the Web Inspector as a base URL.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor): Set _delegate to null.
+        (WebInspector.TextEditor.prototype.get delegate): Added.
+        (WebInspector.TextEditor.prototype.set delegate): Added.
+        (WebInspector.TextEditor.prototype._reset): Pass this when making a TextEditorTextChunk.
+        (WebInspector.TextEditor.prototype._breakTextChunkAtIndexIntoSingleLineTextChunks): Ditto.
+        (WebInspector.TextEditor.prototype._consolidateSingleLineTextChunks): Ditto.
+        (WebInspector.TextEditorTextChunk): Added textEditor argument.
+        (WebInspector.TextEditorTextChunk.prototype.updateContent.createTokenElement): Ask the TextEditor
+        delegate for the baseURL and use absoluteURL when assigning the href for links.
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView): Set the TextEditor delegate to this.
+        (WebInspector.TextResourceContentView.prototype.textEditorBaseURL): Added. Returns the resource's URL.
+        * UserInterface/Utilities.js:
+        (parseURL): Trim whitespace from the URL.
+        (absoluteURL): Added.
+
+2011-12-18  Timothy Hatcher  <timothy@apple.com>
+
+        Workaround a weird and random JavaScript bug that causes the wrong 'this' object when filtering
+        the resource sidebar quickly.
+
+        The bug is tracked by: https://webkit.org/b/74811
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/TreeOutline.js:
+        (TreeElement.prototype.traverseNextTreeElement): Use call to always get the right 'this' object.
+
+2011-12-18  Timothy Hatcher  <timothy@apple.com>
+
+        Reduce the number of updates when setting the string of a WebInspector.TextEditor.
+
+        Invalidating the syntax highlighter causes HighlightsDidChange events to fire and update the text
+        chunks. We can ignore those events because _reset will completely rebuild the text chunks anyway.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype.set textContent): Set _ignoreHighlightChanges to true.
+        (WebInspector.TextEditor.prototype.set string): Ditto.
+        (WebInspector.TextEditor.prototype._reset): Reset _ignoreHighlightChanges back to false.
+        (WebInspector.TextEditor.prototype._highlightsChanged): Return early if _ignoreHighlightChanges is true.
+
+2011-12-18  Timothy Hatcher  <timothy@apple.com>
+
+        Improve a workaround and get the clientHeight of the correct element in WebInspector.TextEditor.
+
+        The bug this is working around is tracked by: https://webkit.org/b/74812
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/TextEditor.css:
+        (.text-editor > .content-container): Set height to 100%. It isn't clear why we should need to set
+        the height here, but without this the element collapses sometimes when it should have a height.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor.prototype._consolidateSingleLineTextChunks): Get clientHeight from _contentContainerElement.
+        (WebInspector.TextEditor.prototype._firstVisibleTextChunkIndex): Ditto.
+
+2011-12-17  Timothy Hatcher  <timothy@apple.com>
+
+        Don't show visited links in the Web Inspector.
+
+        Removed the :link pseudo class so visited links are styled the same.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/TextEditorDefaultTheme.css:
+        (.text-editor a):
+        (.text-editor a:hover):
+
+2011-12-17  Timothy Hatcher  <timothy@apple.com>
+
+        Allow clicking the selected resource again to show the content view if another content view
+        has been shown since the resource was last selected. This matches Xcode.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel):
+        * UserInterface/TreeOutline.js:
+        (TreeOutline): Set allowsRepeatSelection to false.
+        (TreeElement.prototype.select): Refactored so that when allowsRepeatSelection is true the
+        onselect functions are called still.
+
+2011-12-17  Timothy Hatcher  <timothy@apple.com>
+
+        Don't attempt to create a tokenizer for "text/plain" resources.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/SourceTokenizer.js:
+        (WebInspector.SourceTokenizer): Return null for a MIME-type of "text/plain".
+
+2011-12-17  Timothy Hatcher  <timothy@apple.com>
+
+        Collapse the details sidebar by default. It is empty right now, so there is no reason
+        to show it until we have some sidebar panels to show.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Set this.detailsSidebar.collapsed to true.
+
+2011-12-16  Timothy Hatcher  <timothy@apple.com>
+
+        Set the Web Inspector window title and update it when the main frame navigates.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Added event listeners for changes on the main frame.
+        (WebInspector.updateWindowTitle): Added. Build a title based on the URL components.
+        (WebInspector._mainFrameDidChange): Added. Call updateWindowTitle.
+        (WebInspector._mainResourceDidChange): Added. Call updateWindowTitle if this is the main frame.
+
+2011-12-16  Timothy Hatcher  <timothy@apple.com>
+
+        Force tabs to be 4 spaces wide in the new Web Inspector instead of the default 8 spaces wide.
+
+        This is done via the syntax highlighter, which tokenizes the tabs to be styled as inline-blocks
+        with a width equal to 4 spaces each.
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/SyntaxHighlighter.js:
+        (WebInspector.SyntaxHighlighter.CharacterTokens): Added \t.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditorTextChunk.prototype.updateContent.createTokenElement): Handle the "tab"
+        token type by creating a span per tab.
+        * UserInterface/TextEditorDefaultTheme.css:
+        (.text-editor .tab): Added. Inline-block with a width equal to 4 spaces.
+
+2011-12-16  Timothy Hatcher  <timothy@apple.com>
+
+        Implement WebInspector.TextResourceContentView.
+
+        Create a TextEditor that fills the view and displays the text content of the resource.
+
+        Part of: <rdar://problem/10488422> Implement Resource views for the new Web Inspector design
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/Main.html: Include TextResourceContentView.css.
+        * UserInterface/TextResourceContentView.css: Added.
+        (.content-view.resource.text > .text-editor):
+        * UserInterface/TextResourceContentView.js:
+        (WebInspector.TextResourceContentView): Create a TextEditor.
+        (WebInspector.TextResourceContentView.prototype.get textEditor): Added.
+        (WebInspector.TextResourceContentView.prototype.contentAvailable): Added. Populate the TextEditor
+        with content and set the MIME-type.
+
+2011-12-16  Timothy Hatcher  <timothy@apple.com>
+
+        Add the line number gutter to WebInspector.TextEditor.
+
+        Part of: <rdar://problem/10488422> Implement Resource views for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/TextEditor.css:
+        (.text-editor > .gutter): Added.
+        (.text-editor > .gutter > .line-number): Added.
+        (.text-editor > .gutter > .line-number.maximum): Added.
+        (.text-editor > .gutter > .line-number.hidden): Added.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor): Create the _gutterElement.
+        (WebInspector.TextEditor.prototype._reset): Call _updateLineNumbers.
+        (WebInspector.TextEditor.prototype._scrollPositionChanged): Ditto.
+        (WebInspector.TextEditor.prototype._updateLineNumbers): Added.
+
+2011-12-16  Timothy Hatcher  <timothy@apple.com>
+
+        Syntax highlight the content of WebInspector.TextEditor.
+
+        Only single line text chunks are rendered with syntax highlighting, which are the the text chunks
+        that are near the visible scroll range of the text editor.
+
+        Part of: <rdar://problem/10488422> Implement Resource views for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/SyntaxHighlighter.js:
+        (WebInspector.SyntaxHighlighter.prototype.invalidate): Dispatch the HighlightsDidChange event.
+        (WebInspector.SyntaxHighlighter.prototype._highlightNextChunk): Ditto.
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor): Create a WebInspector.SyntaxHighlighter and listen for the HighlightsDidChange event.
+        (WebInspector.TextEditor.prototype.set textContent): Set the SyntaxHighlighter textContent.
+        (WebInspector.TextEditor.prototype.set string): Invalidate the SyntaxHighlighter.
+        (WebInspector.TextEditor.prototype.get mimeType): Added.
+        (WebInspector.TextEditor.prototype.set mimeType): Added.
+        (WebInspector.TextEditor.prototype._reset): Stop highlighting and start again.
+        (WebInspector.TextEditor.prototype._scrollPositionChanged): Do a sync highlight.
+        (WebInspector.TextEditor.prototype._scrollingDidStop): Start highlighting.
+        (WebInspector.TextEditor.prototype._highlightsChanged): Update single line text chunks.
+        (WebInspector.TextEditor.prototype._textChunkIndexForLine): Added.
+        (WebInspector.TextEditor.prototype._textChunkForLine): Added.
+        (WebInspector.TextEditorTextChunk.prototype.updateContent.createTokenElement): Added.
+        (WebInspector.TextEditorTextChunk.prototype.updateContent.appendText): Added.
+        (WebInspector.TextEditorTextChunk.prototype.updateContent): Enumerate the syntax highlighting tokens when there is only one line.
+        * UserInterface/TextEditorDefaultTheme.css: Added.
+        (.text-editor > .content-container):
+        (.text-editor .css-comment):
+        (.text-editor .css-keyword):
+        (.text-editor .css-number):
+        (.text-editor .css-at-rule):
+        (.text-editor .css-selector):
+        (.text-editor .css-important):
+        (.text-editor .javascript-comment):
+        (.text-editor .javascript-keyword):
+        (.text-editor .javascript-number):
+        (.text-editor .javascript-regexp):
+        (.text-editor .javascript-ident):
+        (.text-editor .html-comment):
+        (.text-editor .html-tag):
+        (.text-editor .html-doctype):
+        (.text-editor .html-attribute-name):
+        (.text-editor .html-attribute-value):
+        (.text-editor a:link):
+        (.text-editor a:link:hover):
+
+2011-12-16  Timothy Hatcher  <timothy@apple.com>
+
+        Break up text chunks into single lines when they are visible, and consolidate them again
+        when they are not visible after scrolling.
+
+        Part of: <rdar://problem/10488422> Implement Resource views for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/TextEditor.js:
+        (WebInspector.TextEditor): Add scroll event listener.
+        (WebInspector.TextEditor.prototype._reset): Call _breakVisibleTextChunksIntoSingleLineTextChunks.
+        (WebInspector.TextEditor.prototype._scrollPositionChanged): Added. Schedule timeout for _scrollingDidStop.
+        Call _breakVisibleTextChunksIntoSingleLineTextChunks.
+        (WebInspector.TextEditor.prototype._scrollingDidStop): Added. Call _consolidateHiddenSingleLineTextChunksIfNeeded.
+        (WebInspector.TextEditor.prototype._breakTextChunkAtIndexIntoSingleLineTextChunks): Added.
+        (WebInspector.TextEditor.prototype._breakVisibleTextChunksIntoSingleLineTextChunks): Added.
+        (WebInspector.TextEditor.prototype._consolidateHiddenSingleLineTextChunksIfNeeded): Added.
+        (WebInspector.TextEditor.prototype._consolidateHiddenSingleLineTextChunks): Added.
+        (WebInspector.TextEditor.prototype._consolidateSingleLineTextChunks): Added.
+        (WebInspector.TextEditor.prototype._firstVisibleTextChunkIndex.compareTopOffsets): Added.
+        (WebInspector.TextEditor.prototype._firstVisibleTextChunkIndex): Added.
+        (WebInspector.TextEditor.prototype._rangeOfVisibleTextChunks): Added.
+        (WebInspector.TextEditor.prototype._lastLineNumberOfLastVisibleTextChunk): Added.
+
+2011-12-16  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.TextEditor which is the view for WebInspector.TextContent.
+
+        Right now it only shows plain-text. In the end it will support syntax highlighting and editing.
+
+        Part of: <rdar://problem/10488422> Implement Resource views for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TextEditor.css: Added.
+        (.text-editor):
+        (.text-editor > .content-container):
+        (.text-editor > .content-container > .content):
+        * UserInterface/TextEditor.js: Added.
+        (WebInspector.TextEditor):
+        (WebInspector.TextEditor.prototype.get element):
+        (WebInspector.TextEditor.prototype.get textContent):
+        (WebInspector.TextEditor.prototype.set textContent):
+        (WebInspector.TextEditor.prototype.get string):
+        (WebInspector.TextEditor.prototype.set string):
+        (WebInspector.TextEditor.prototype._reset):
+        (WebInspector.TextEditorTextChunk):
+        (WebInspector.TextEditorTextChunk.prototype.constructor.WebInspector.TextEditorChunk.get element):
+        (WebInspector.TextEditorTextChunk.prototype.get firstLineNumber):
+        (WebInspector.TextEditorTextChunk.prototype.get lastLineNumber):
+        (WebInspector.TextEditorTextChunk.prototype.get numberOfLines):
+        (WebInspector.TextEditorTextChunk.prototype.get offsetTop):
+        (WebInspector.TextEditorTextChunk.prototype.updateContent):
+
+2011-12-16  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.SyntaxHighlighter which uses SourceTokenizer, TextContent and AttributedString.
+
+        Part of: <rdar://problem/10488422> Implement Resource views for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/SyntaxHighlighter.js: Added.
+        (WebInspector.SyntaxHighlighter):
+        (WebInspector.SyntaxHighlighter.prototype.get textContent):
+        (WebInspector.SyntaxHighlighter.prototype.set textContent):
+        (WebInspector.SyntaxHighlighter.prototype.get mimeType):
+        (WebInspector.SyntaxHighlighter.prototype.set mimeType):
+        (WebInspector.SyntaxHighlighter.prototype.invalidate):
+        (WebInspector.SyntaxHighlighter.prototype.isHighlighting):
+        (WebInspector.SyntaxHighlighter.prototype.synchronousHighlight):
+        (WebInspector.SyntaxHighlighter.prototype.startHighlighting):
+        (WebInspector.SyntaxHighlighter.prototype.stopHighlighting):
+        (WebInspector.SyntaxHighlighter.prototype._highlightNextChunk):
+        (WebInspector.SyntaxHighlighter.prototype._highlightNextChunk.copyState):
+
+2011-12-16  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.TextContent which will be used for multi-line text, like resources.
+
+        Part of: <rdar://problem/10488422> Implement Resource views for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TextContent.js: Added.
+        (WebInspector.TextContent):
+        (WebInspector.TextContent.prototype.toString):
+        (WebInspector.TextContent.prototype.get string):
+        (WebInspector.TextContent.prototype.set string.createAttributedString):
+        (WebInspector.TextContent.prototype.set string):
+        (WebInspector.TextContent.prototype.get length):
+        (WebInspector.TextContent.prototype.get lineBreakString):
+        (WebInspector.TextContent.prototype.set lineBreakString):
+        (WebInspector.TextContent.prototype.get lines):
+        (WebInspector.TextContent.prototype.get numberOfLines):
+        (WebInspector.TextContent.prototype.line):
+        (WebInspector.TextContent.prototype.attributesForLine):
+        (WebInspector.TextContent.prototype.attributeForLine):
+        (WebInspector.TextContent.prototype.setAttributeForLine):
+        (WebInspector.TextContent.prototype.removeAttributeFromLine):
+        (WebInspector.TextContent.prototype.removeAttributesFromLine):
+
+2011-12-16  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.AttributedString which will be used for syntax highlighted text.
+
+        Part of: <rdar://problem/10488422> Implement Resource views for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/AttributedString.js: Added.
+        (WebInspector.AttributedString):
+        (WebInspector.AttributedString.prototype.toString):
+        (WebInspector.AttributedString.prototype.get string):
+        (WebInspector.AttributedString.prototype.enumerateAttributes):
+        (WebInspector.AttributedString.prototype.enumerateAttribute):
+        (WebInspector.AttributedString.prototype.attributesAtOffset):
+        (WebInspector.AttributedString.prototype.attributeAtOffset):
+        (WebInspector.AttributedString.prototype.setAttribute):
+        (WebInspector.AttributedString.prototype.removeAttribute.processAttributes):
+        (WebInspector.AttributedString.prototype.removeAttribute):
+        (WebInspector.AttributedString.prototype.removeAttributes):
+        * UserInterface/Utilities.js:
+        (Object.shallowCopy): Added. Helper for making a new object with the same top-level properties.
+        (Object.shallowEqual): Added. Helper for checking if two objects have the same top-level properties.
+
+2011-12-16  Timothy Hatcher  <timothy@apple.com>
+
+        Add tokenizers and support files needed for syntax highlighting.
+
+        Part of: <rdar://problem/10488422> Implement Resource views for the new Web Inspector design
+
+        Rubber-stamped by Joseph Pecoraro.
+
+        * UserInterface/CSSCompletions.js: Copied from WebCore/inspector/front-end/CSSCompletions.js.
+        * UserInterface/CSSKeywordCompletions.js: Copied from WebCore/inspector/front-end/CSSCompletions.js.
+        * UserInterface/CSSSourceTokenizer.js: Copied from WebCore/inspector/front-end/SourceCSSTokenizer.js.
+        * UserInterface/HTMLSourceTokenizer.js: Copied from WebCore/inspector/front-end/SourceHTMLTokenizer.js.
+        * UserInterface/JavaScriptSourceTokenizer.js: Copied from WebCore/inspector/front-end/SourceJavaScriptTokenizer.js.
+        * UserInterface/Utilities.js:
+        (Array.keySet): Added.
+
+2011-12-16  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.SourceTokenizer abstract base class.
+
+        This is the base class for HTMLSourceTokenizer, JavaScriptSourceTokenizer and CSSSourceTokenizer.
+
+        Part of: <rdar://problem/10488422> Implement Resource views for the new Web Inspector design
+
+        Reviewed by Jessie Berlin.
+
+        * UserInterface/SourceTokenizer.js: Added.
+        (WebInspector.SourceTokenizer):
+        (WebInspector.SourceTokenizer.prototype.initialize):
+        (WebInspector.SourceTokenizer.prototype.set line):
+        (WebInspector.SourceTokenizer.prototype.get condition):
+        (WebInspector.SourceTokenizer.prototype.set condition):
+        (WebInspector.SourceTokenizer.prototype.createInitialCondition):
+        (WebInspector.SourceTokenizer.prototype.nextToken):
+        (WebInspector.SourceTokenizer.prototype._charAt):
+
+2011-12-16  Timothy Hatcher  <timothy@apple.com>
+
+        Remove the cached ContentView from the represented object when the ContentView is closed.
+
+        This allows the ContentView to be garbage collected if the represented object stays around.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView): Set _representedObject.
+        (WebInspector.ContentView.prototype.get representedObject): Added.
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer.prototype.contentViewForRepresentedObject):
+        (WebInspector.ContentViewContainer.prototype.showContentView): Use _disassociateFromContentView
+        (WebInspector.ContentViewContainer.prototype.replaceContentView): Ditto.
+        (WebInspector.ContentViewContainer.prototype.closeAllContentViewsOfPrototype): Ditto.
+        (WebInspector.ContentViewContainer.prototype.closeAllContentViews): Ditto.
+        (WebInspector.ContentViewContainer.prototype._disassociateFromContentView): Added.
+        * UserInterface/ResourceContentView.js:
+        (WebInspector.ResourceContentView): Pass resource to ContentView as the representedObject.
+
+2011-12-16  Timothy Hatcher  <timothy@apple.com>
+
+        Don't support creating a WebInspector.ResourceContentView from a WebInspector.Frame.
+
+        Since the main frame stays the same between navigations and ContentViewContainer caches
+        the ContentView on the Frame, the ContentView is not being recreated for the new page.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView): Remove the check for WebInspector.Frame as a representedObject.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameMainResourceDidChange): Select the
+        main resource of the main frame.
+        (WebInspector.ResourceSidebarPanel.prototype._treeElementSelected): Pass the resource.
+
+2011-12-16  Timothy Hatcher  <timothy@apple.com>
+
+        Mark the main resource of frames as finished when the resource tree is pulled the first time.
+        Also delay marking resources as finished until they have a parent frame.
+
+        This is needed to show content for a selected frame, otherwise the content view is blank.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype._createFrame): Call markAsFinished on the mainResource.
+        (WebInspector.FrameResourceManager.prototype._createResource): Move the call to markAsFinished from here...
+        (WebInspector.FrameResourceManager.prototype._addFrameTreeFromFrameResourceTreePayload): ...to here.
+
+2011-12-15  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318744> Implement the Storage sidebar for the new Web Inspector design.
+
+        Add Database tables to the storage sidebar panel. When a database needs to be populated, we ask
+        for the database's table names asynchronously. In the callback we create DatabaseTableObjects
+        and DatabaseTableTreeElements for all of the table names that the database has, and add the
+        the DatabaseTableTreeElements as children of the DatabaseTreeElement.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DatabaseObject.js:
+        (WebInspector.DatabaseObject.prototype.getTableNames): Calls into WebCore to get the database's table names,
+            and sorts them.
+        * UserInterface/DatabaseTableObject.js: Added.
+        (WebInspector.DatabaseTableObject):
+        (WebInspector.DatabaseTableObject.prototype.constructor.WebInspector.DatabaseTableObject.get name): Returns the name.
+        (WebInspector.DatabaseTableObject.prototype.get database): Returns the databaseObject.
+        * UserInterface/DatabaseTableTreeElement.js: Added.
+        (WebInspector.DatabaseTableTreeElement):
+        * UserInterface/DatabaseTreeElement.js:
+        (WebInspector.DatabaseTreeElement.prototype.constructor.WebInspector.DatabaseTreeElement.oncollapse): Set a flag so that we
+            repopulate the children when the tree element is re-expanded.
+        (WebInspector.DatabaseTreeElement.prototype.onpopulate.tableNamesCallback): Create DatabaseTableObjects and DatabaseTableTreeElements
+            for each of the table names.
+        (WebInspector.DatabaseTreeElement.prototype.onpopulate): Ask the DatabaseObject for its list of table names.
+        * UserInterface/Main.html: Add new files.
+
+2011-12-14  Brian Weinstein  <bweinstein@apple.com>
+
+        Some cleanup after r39488.
+
+        Don't use FolderTreeElement's style in DatabaseHostTreeElement (because DatabaseHostTreeElement isn't a FolderTreeElement).
+
+        Instead, create a new css file and configure DatabaseHostTreeElement to show a folder.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DatabaseHostTreeElement.css: Added.
+        (.database-host-tree-element .icon):
+        * UserInterface/DatabaseHostTreeElement.js:
+        (WebInspector.DatabaseHostTreeElement):
+        * UserInterface/Main.html:
+
+2011-12-13  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318744> Implement the Storage sidebar for the new Web Inspector design.
+
+        Add Databases to the storage sidebar panel. This patch adds two new classes of tree elements - a DatabaseHostTreeElement,
+        which represents a host that has at least one database, and a DatabaseTreeElement, which eventually will have tables.
+
+        We use the same collapsing logic for databases that we use for cookies and DOM Storage. With one domain,
+        it will say:
+
+        Database - Domain
+            Name 1
+            Name 2
+
+        With multiple domains, it will say:
+
+        Databases
+            Domain 1
+                Name 1
+                Name 2
+            Domain 2
+                Name 3
+                Name 4
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/DatabaseObject.js: Added.
+        (WebInspector.DatabaseObject):
+        (WebInspector.DatabaseObject.prototype.constructor.WebInspector.DatabaseObject.get id): Returns the id.
+        (WebInspector.DatabaseObject.prototype.get host): Returns the host.
+        (WebInspector.DatabaseObject.prototype.get name): Returns the name.
+        (WebInspector.DatabaseObject.prototype.get version): Returns the version.
+        * UserInterface/DatabaseObserver.js:
+        (WebInspector.DatabaseObserver.prototype.constructor.WebInspector.DatabaseObserver.addDatabase): Tell the StorageManager
+            a database was added.
+        * UserInterface/DatabaseTreeElement.js: Added.
+        (WebInspector.DatabaseTreeElement):
+        (WebInspector.DatabaseTreeElement.prototype.constructor.WebInspector.DatabaseTreeElement.get name): Initialize the FolderTreeElement.
+        * UserInterface/DatabaseHostTreeElement.js: Added.
+        * UserInterface/Main.html:
+        * UserInterface/StorageManager.js:
+        (WebInspector.StorageManager):
+        (WebInspector.StorageManager.prototype.constructor.WebInspector.StorageManager.initialize): Initialize a list of databases.
+        (WebInspector.StorageManager.prototype.databaseWasAdded): Create a DatabaseObject and tell the StorageSidebarPanel we added
+            a database.
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel):
+        (WebInspector.StorageSidebarPanel.prototype._databaseWasAdded): Create a DatabaseTreeElement and add it to the sidebar.
+        (WebInspector.StorageSidebarPanel.prototype._storageCleared): Clear the root database tree element.
+
+2011-12-09  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318744> Implement the Storage sidebar for the new Web Inspector design.
+
+        Add Cookies to the Storage sidebar panel. Add a listener for when a cookie storage object is added,
+        and add it to the sidebar.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel):
+        (WebInspector.StorageSidebarPanel.prototype.constructor.WebInspector.StorageSidebarPanel._domStorageObjectWasAdded): Remove some dead code.
+        (WebInspector.StorageSidebarPanel.prototype._cookieStorageObjectWasAdded): Add a child to the storage sidebar.
+        (WebInspector.StorageSidebarPanel.prototype._addChild): Change the class that we are expecting to a StorageTreeElement, because it can be
+            either a DOMStorageTreeElement or a CookieStorageTreeElement, but both are StorageTreeElements.
+        (WebInspector.StorageSidebarPanel.prototype._storageCleared):
+
+2011-12-09  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318744> Implement the Storage sidebar for the new Web Inspector design.
+
+        Add CookieStorageTreeElement, and refactor DOMStorageTreeElement into StorageTreeElement so the code to handle
+        flattening of the folders can be shared between CookieStorageTreeElement, DOMStorageTreeElement, and the others
+        that we will add in the future.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/CookieStorageTreeElement.js: Added.
+        (WebInspector.CookieStorageTreeElement): Call
+        (WebInspector.CookieStorageTreeElement.prototype.constructor.WebInspector.CookieStorageTreeElement.name): Return the host of the CookieStorageObject.
+        (WebInspector.CookieStorageTreeElement.prototype.category): Return "Cookies".
+        * UserInterface/DOMStorageTreeElement.js:
+        (WebInspector.DOMStorageTreeElement):
+        (WebInspector.DOMStorageTreeElement.prototype.constructor.WebInspector.DOMStorageTreeElement.name): Return the host of the DOMStorageObject.
+        (WebInspector.DOMStorageTreeElement.prototype.category): Return "Local Storage" or "Session Storage".
+        * UserInterface/Main.html: Add new files.
+        (WebInspector.StorageTreeElement):
+        (WebInspector.StorageTreeElement.prototype.constructor.WebInspector.StorageTreeElement.get flattened): Moved from DOMStorageTreeElement
+            and refactored to be more general.
+        (WebInspector.StorageTreeElement.prototype.set flattened): Ditto.
+
+2011-12-09  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318744> Implement the Storage sidebar for the new Web Inspector design.
+
+        Listen for when the main resource of any frame navigates, and add a cookie storage object for every
+        frame with a unique host. Any of these frames could have cookies, and we want to show them all.
+
+        Reviewed by Tim Hatcher.
+
+        * UserInterface/CookieStorageObject.js: Added.
+        (WebInspector.CookieStorageObject):
+        (WebInspector.CookieStorageObject.prototype.constructor.WebInspector.CookieStorageObject.get host):
+        * UserInterface/Main.html: Add a new source file.
+        * UserInterface/StorageManager.js:
+        (WebInspector.StorageManager.prototype.constructor.WebInspector.StorageManager.initialize):
+        (WebInspector.StorageManager.prototype._mainResourceDidChange): If any frame navigates, add create a cookie
+            storage object for the frame's host.
+
+2011-12-08  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318744> Implement the Storage sidebar for the new Web Inspector design.
+
+        Generate the local storage and session storage folders on demand. We don't show them in the tree until
+        a local storage or session storage object has been added, and if there is only one object, we flatten the
+        folder so it says:
+
+        Local Storage Ñ foo.com
+
+        If there is more than one object, we create a folder, and the structure will be:
+
+        Local Storage
+            foo.com
+            bar.com
+
+        Reviewed by Tim Hatcher and Joseph Pecoraro.
+
+        * UserInterface/DOMStorageTreeElement.js: Added.
+        (WebInspector.DOMStorageTreeElement): Create a GeneralTreeElement and set a few properties.
+        (WebInspector.DOMStorageTreeElement.prototype.constructor.WebInspector.DOMStorageTreeElement.set flattened):
+        * UserInterface/Main.html: Include a new script.
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel): Initialize _localStorageTreeElement and _sessionStorageTreeElement to null.
+        (WebInspector.StorageSidebarPanel.prototype.constructor.WebInspector.StorageSidebarPanel._domStorageObjectWasAdded): Call _addChild.
+        (WebInspector.StorageSidebarPanel.prototype._addChild): This object is responsible for setting up the hierarchy described above.
+            - If there is no current child, it tells the just added child that it is the only child, and will be displayed flattened.
+            - If the current child is a DOMStorageTreeElement, we create a folder and add the previous only child and the just added child
+            to the folder.
+            - If the current child is a folder, we append the just added child to the folder.
+        (WebInspector.StorageSidebarPanel.prototype._storageCleared):
+
+2011-12-07  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318744> Implement the Storage sidebar for the new Web Inspector design.
+
+        Clear the Local Storage and Session Storage folders when the main resource of the main frame changes. This means
+        that we are navigating to a new site, and we want to clear all of the storage folders.
+
+        Reviewed by Tim Hatcher and Joseph Pecoraro.
+
+        * UserInterface/StorageManager.js:
+        (WebInspector.StorageManager): Listen for MainResourceDidChange on all frames.
+        (WebInspector.StorageManager.prototype._mainResourceDidChange): If the main resource changed for the main frame, fire an
+            event saying storage was cleared.
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel):
+        (WebInspector.StorageSidebarPanel.prototype.constructor.WebInspector.StorageSidebarPanel._domStorageObjectWasAdded):
+        (WebInspector.StorageSidebarPanel.prototype._storageCleared): Remove the children from the local storage and session storage folders.
+
+2011-12-07  Brian Weinstein  <bweinstein@apple.com>
+
+        More of <rdar://problem/10318744> Implement the Storage sidebar for the new Web Inspector design.
+
+        Add folders for Local Storage and Session Storage, and add children when DOMStorageObserver.addDOMStorage is called.
+
+        These items are never removed yet, we will need to listen for main frame navigation, and clear the folders, but
+        that will be done in a follow-up patch.
+
+        Reviewed by Tim Hatcher and Joseph Pecoraro.
+
+        * UserInterface/DOMStorageObject.js: Added.
+        (WebInspector.DOMStorageObject):
+        (WebInspector.DOMStorageObject.prototype.get id): Returns the id.
+        (WebInspector.DOMStorageObject.prototype.get domain): Returns the domain.
+        (WebInspector.DOMStorageObject.prototype.get isLocalStorage): Returns whether or not the DOM storage is local storage
+            (vs. session storage).
+        * UserInterface/DOMStorageObserver.js:
+        (WebInspector.DOMStorageObserver.prototype.constructor.WebInspector.DOMStorageObserver.addDOMStorage): Create a new DOMStorageObject
+            and tell the StorageManager about it.
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create the StorageManager.
+        * UserInterface/StorageManager.js: Added.
+        (WebInspector.StorageManager):
+        (WebInspector.StorageManager.prototype.constructor.WebInspector.StorageManager.initialize):
+        (WebInspector.StorageManager.prototype.addDOMStorage): Tell the StorageSidebarPanel we added a DOMStorageObject.
+        * UserInterface/StorageSidebarPanel.js:
+        (WebInspector.StorageSidebarPanel):
+        (WebInspector.StorageSidebarPanel.prototype.constructor.WebInspector.StorageSidebarPanel._domStorageObjectWasAdded): Add a child to either
+            local or session storage.
+
+2011-12-05  Brian Weinstein  <bweinstein@apple.com>
+
+        Part of <rdar://problem/10318744> Implement the Storage sidebar for the new Web Inspector design.
+
+        Add StorageSidebarPanel.js, and have it create a new NavigationSidebarPanel.
+
+        Reviewed by Tim Hatcher and Joseph Pecoraro.
+
+        * UserInterface/Main.html: Add the new js file.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Call WebInspector.StorageSidebarPanel.
+        * UserInterface/StorageSidebarPanel.js: Added.
+        (WebInspector.StorageSidebarPanel):
+
+2011-12-06  Timothy Hatcher  <timothy@apple.com>
+
+        Call WebInspector.Object.addConstructorFunctions on all the Web Inspector constructors that file events.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/FilterBar.js:
+        * UserInterface/Frame.js:
+        * UserInterface/FrameResourceManager.js:
+        * UserInterface/NavigationBar.js:
+        * UserInterface/Resource.js:
+        * UserInterface/Sidebar.js:
+
+2011-12-05  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for listening for events on constructors, which gets notified of events that fire
+        on any of the instances of that constructor.
+
+        This lets you do things like listen for navigation in any frame by doing:
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, ...)
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Object.js:
+        (WebInspector.Object.addConstructorFunctions): Added. Copies the relevant functions
+        the subclass constructor.
+        (WebInspector.Object.addEventListener): Copied from WebInspector.Object.prototype.
+        (WebInspector.Object.removeEventListener): Ditto.
+        (WebInspector.Object.removeAllListeners): Ditto.
+        (WebInspector.Object.hasEventListeners): Ditto.
+        (WebInspector.Object.prototype.addEventListener): Set to WebInspector.Object version.
+        (WebInspector.Object.prototype.removeEventListener): Ditto.
+        (WebInspector.Object.prototype.removeAllListeners): Ditto.
+        (WebInspector.Object.prototype.hasEventListeners): Ditto.
+        (WebInspector.Object.prototype.dispatchEventToListeners): Dispatch to listeners of this specific object,
+        and to listeners interested in all instances of this object's constructor.
+
+2011-12-05  Timothy Hatcher  <timothy@apple.com>
+
+        Use Object.defineProperty for our extensions in WebInspector/Utilities.js so they don't show
+        up when enumerating instances.
+
+        This patch has whitespace changes stripped, but the indentation is correct.
+
+        Reviewed by Ada Chan.
+
+        * UserInterface/Utilities.js:
+
+2011-12-05  Timothy Hatcher  <timothy@apple.com>
+
+        Provide a direct way to ask if a WebInspector.Frame is the main frame.
+
+        This is only needed in one place right now, but in the future it will be needed in more places.
+        And checking !frame.parentFrame is not an accurate check if the frame is a detached subframe.
+
+        Reviewed by Ada Chan.
+
+        * UserInterface/Frame.js:
+        (WebInspector.Frame):
+        (WebInspector.Frame.prototype.isMainFrame): Added.
+        (WebInspector.Frame.prototype.markAsMainFrame): Added.
+        (WebInspector.Frame.prototype.unmarkAsMainFrame): Added.
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.initialize): Call the renamed _mainFrameDidChange.
+        (WebInspector.FrameResourceManager.prototype.frameDidNavigate): Ditto.
+        (WebInspector.FrameResourceManager.prototype.frameDidDetach): Ditto.
+        (WebInspector.FrameResourceManager.prototype._addNewResourceToFrame): Ditto.
+        (WebInspector.FrameResourceManager.prototype._processMainFrameResourceTreePayload): Pass true for isMainFrame
+        when calling _addFrameTreeFromFrameResourceTreePayload.
+        (WebInspector.FrameResourceManager.prototype._addFrameTreeFromFrameResourceTreePayload): Call markAsMainFrame()
+        if isMainFrame is true.
+        (WebInspector.FrameResourceManager.prototype._mainFrameDidChange): Renamed from _dispatchMainFrameDidChangeEvent
+        and now calls unmarkAsMainFrame and markAsMainFrame.
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement.prototype._updateTitles): Use isMainFrame().
+
+2011-12-04  Timothy Hatcher  <timothy@apple.com>
+
+        Implement WebInspector.FontResourceContentView.
+
+        The font preview includes horizontal lines showing the top, bottom, middle and baseline CSS alignments.
+
+        Part of: <rdar://problem/10488422> Implement Resource views for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/FontResourceContentView.css: Added.
+        (.content-view.resource.font):
+        (.content-view.resource.font .preview):
+        (.content-view.resource.font .preview > .line):
+        (.content-view.resource.font .preview > .line > .content):
+        (.content-view.resource.font .preview > .line > .metric):
+        (.content-view.resource.font .metric.top):
+        (.content-view.resource.font .metric.baseline):
+        (.content-view.resource.font .metric.middle):
+        (.content-view.resource.font .metric.bottom):
+        * UserInterface/FontResourceContentView.js:
+        (WebInspector.FontResourceContentView):
+        (WebInspector.FontResourceContentView.prototype.get previewElement):
+        (WebInspector.FontResourceContentView.prototype.sizeToFit): Start at the maximum size and try each
+        font size until minimum is reached. Stop when the preview element is not as wide as the main element.
+        (WebInspector.FontResourceContentView.prototype.contentAvailable.createMetricElement): Helper function.
+        (WebInspector.FontResourceContentView.prototype.contentAvailable): Create the elements for the preview.
+        (WebInspector.FontResourceContentView.prototype.shown): Add the style element since it is removed when hidden.
+        (WebInspector.FontResourceContentView.prototype.hidden): Remove the style element so it will not stick around
+        when this content view is destroyed.
+        * UserInterface/Main.html: Included FontResourceContentView.css.
+
+2011-12-03  Timothy Hatcher  <timothy@apple.com>
+
+        Implement WebInspector.ImageResourceContentView.
+
+        Part of: <rdar://problem/10488422> Implement Resource views for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ImageResourceContentView.css: Added.
+        (.content-view.resource.image): Vertically and horizontally center the image.
+        (.content-view.resource.image img): Set max width to 100% and allow dragging.
+        * UserInterface/ImageResourceContentView.js:
+        (WebInspector.ImageResourceContentView): Initialize _imageElement to null.
+        (WebInspector.ImageResourceContentView.prototype.get imageElement): Added.
+        (WebInspector.ImageResourceContentView.prototype.contentAvailable): Added. Create and append the _imageElement.
+        * UserInterface/Main.html: Included ImageResourceContentView.css.
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.get contentURL): Added. Create a data URL if possible.
+        * UserInterface/ResourceContentView.js:
+        (WebInspector.ResourceContentView): Call requestContent.
+        (WebInspector.ResourceContentView.prototype.contentAvailable): Added. Implemented by subclasses.
+
+2011-12-05  Timothy Hatcher  <timothy@apple.com>
+
+        Select the main resource when opening the Web Inspector and when the inspected page navigates.
+
+        Part of: <rdar://problem/10488422> Implement Resource views for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameDidChange): Select and expand the main
+        resource so something is selected by default.
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameMainResourceDidChange): Select the main
+        resource since there are no other resources now.
+
+2011-12-05  Timothy Hatcher  <timothy@apple.com>
+
+        Close all resource content views when the inspected page navigates in the main frame.
+
+        Part of: <rdar://problem/10488422> Implement Resource views for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer.prototype.closeAllContentViewsOfPrototype): Added.
+        (WebInspector.ContentViewContainer.prototype.closeAllContentViews): Added.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameDidChange): Remove an event listener from
+        the old frame and add an event listener for MainResourceDidChange on the new frame.
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameMainResourceDidChange): Added. Call
+        closeAllContentViewsOfPrototype with WebInspector.ResourceContentView on the main content container.
+
+2011-12-05  Timothy Hatcher  <timothy@apple.com>
+
+        Make selecting a resource in the Resources sidebar show the content view for that resource.
+
+        Part of: <rdar://problem/10488422> Implement Resource views for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer.prototype.contentViewForRepresentedObject): Added.
+        (WebInspector.ContentViewContainer.prototype.showContentViewForRepresentedObject): Added.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel): Set onselect to _treeElementSelected.
+        (WebInspector.ResourceSidebarPanel.prototype._treeElementSelected): Added. Call showContentViewForRepresentedObject
+        on the main content container.
+
+2011-12-05  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for knowing when a TreeElement is selected/deselected in a TreeOutline.
+
+        There is already TreeElement.onselect which has been used in the past,
+        but having a tree-wide notification of selection changes makes it easier
+        to implement certain things.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/TreeOutline.js:
+        (TreeElement.prototype.select): Call onselect on the TreeOutline if it exists.
+        (TreeElement.prototype.deselect): Call ondeselect on the TreeOutline if it exists.
+
+2011-12-05  Timothy Hatcher  <timothy@apple.com>
+
+        Support resource type changes by making a new ResourceContentView and replacing the old one.
+
+        Part of: <rdar://problem/10488422> Implement Resource views for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer.prototype.replaceContentView): Added. Find all instances of the old one
+        and replace it with the new one.
+        * UserInterface/ResourceContentView.js:
+        (WebInspector.ResourceContentView): Add event listener for TypeDidChange.
+        (WebInspector.ResourceContentView.prototype._resourceTypeDidChange): Added. Make a new ResourceContentView
+        which will use the new resource type to make the correct concrete ResourceContentView subclass.
+
+2011-12-05  Timothy Hatcher  <timothy@apple.com>
+
+        Add the "constructor" property to all prototypes in the Web Inspector.
+
+        While working on a change that requires the constructor, I found it was always Object.
+        This is because (thanks Gavin) the "constructor" property is added at runtime during
+        the first lookup of the "prototype" property slot. But when "prototype" is assigned,
+        like we do in the Web Inspector, the "constructor" property isn't present.
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/ApplicationCacheObserver.js:
+        * UserInterface/ConsoleObserver.js:
+        * UserInterface/ContentView.js:
+        * UserInterface/ContentViewContainer.js:
+        * UserInterface/DOMObserver.js:
+        * UserInterface/DOMStorageObserver.js:
+        * UserInterface/DatabaseObserver.js:
+        * UserInterface/DebuggerObserver.js:
+        * UserInterface/FilterBar.js:
+        * UserInterface/FolderTreeElement.js:
+        * UserInterface/FontResourceContentView.js:
+        * UserInterface/Frame.js:
+        * UserInterface/FrameResourceManager.js:
+        * UserInterface/FrameTreeElement.js:
+        * UserInterface/GeneralTreeElement.js:
+        * UserInterface/GenericResourceContentView.js:
+        * UserInterface/ImageResourceContentView.js:
+        * UserInterface/InspectorObserver.js:
+        * UserInterface/NavigationBar.js:
+        * UserInterface/NavigationSidebarPanel.js:
+        * UserInterface/NetworkObserver.js:
+        * UserInterface/Object.js:
+        * UserInterface/PageObserver.js:
+        * UserInterface/Resource.js:
+        * UserInterface/ResourceCollection.js:
+        * UserInterface/ResourceContentView.js:
+        * UserInterface/ResourceSidebarPanel.js:
+        * UserInterface/ResourceTreeElement.js:
+        * UserInterface/Sidebar.js:
+        * UserInterface/TextResourceContentView.js:
+        * UserInterface/TreeOutline.js:
+
+2011-12-05  Timothy Hatcher  <timothy@apple.com>
+
+        And WebInspector.ResourceContentView and concrete subclasses for Text, Image and Font resources.
+
+        Part of: <rdar://problem/10488422> Implement Resource views for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView): Create ResourceContentViews for Resources and Frames.
+        * UserInterface/FontResourceContentView.js: Added.
+        (WebInspector.FontResourceContentView):
+        * UserInterface/GenericResourceContentView.js: Added.
+        (WebInspector.GenericResourceContentView):
+        * UserInterface/ImageResourceContentView.js: Added.
+        (WebInspector.ImageResourceContentView):
+        * UserInterface/Main.html: Included new files.
+        * UserInterface/ResourceContentView.js: Added.
+        (WebInspector.ResourceContentView): When instantiated directly return an instance of a type-based concrete subclass.
+        (WebInspector.ResourceContentView.prototype.get resource):
+        * UserInterface/TextResourceContentView.js: Added.
+        (WebInspector.TextResourceContentView):
+
+2011-12-05  Timothy Hatcher  <timothy@apple.com>
+
+        Add back/forward support to WebInspector.ContentViewContainer.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ContentViewContainer.js:
+        (WebInspector.ContentViewContainer): Initialize _backForwardList and _currentIndex.
+        (WebInspector.ContentViewContainer.prototype.get currentIndex): Added.
+        (WebInspector.ContentViewContainer.prototype.get backForwardList): Added.
+        (WebInspector.ContentViewContainer.prototype.get currentContentView): Use _backForwardList and _currentIndex.
+        (WebInspector.ContentViewContainer.prototype.showContentView): Insert the content view at the new current index.
+        This will remove any content views greater than or equal to the index. Call showBackForwardEntry for the index.
+        (WebInspector.ContentViewContainer.prototype.showBackForwardEntry): Added.
+        (WebInspector.ContentViewContainer.prototype.canGoBack): Added.
+        (WebInspector.ContentViewContainer.prototype.canGoForward): Added.
+        (WebInspector.ContentViewContainer.prototype.goBack): Added.
+        (WebInspector.ContentViewContainer.prototype.goForward): Added.
+
+2011-12-05  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.ContentView and WebInspector.ContentViewContainer.
+
+        These classes will be used to display content for resources and other data.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ContentView.js: Added.
+        (WebInspector.ContentView):
+        (WebInspector.ContentView.prototype.get element):
+        (WebInspector.ContentView.prototype.get parentContainer):
+        (WebInspector.ContentView.prototype.get visible):
+        (WebInspector.ContentView.prototype.set visible):
+        (WebInspector.ContentView.prototype.shown):
+        (WebInspector.ContentView.prototype.hidden):
+        * UserInterface/ContentViewContainer.css: Added.
+        (.content-view-container): Display relative to allow positioned content.
+        (.content-view-container > .content-view): Position to fill the container.
+        (.content-view-container > .content-view:not(.visible)): Display none.
+        * UserInterface/ContentViewContainer.js: Added.
+        (WebInspector.ContentViewContainer):
+        (WebInspector.ContentViewContainer.prototype.get element):
+        (WebInspector.ContentViewContainer.prototype.get currentContentView):
+        (WebInspector.ContentViewContainer.prototype.showContentView):
+        (WebInspector.ContentViewContainer.prototype._addContentViewElement):
+        (WebInspector.ContentViewContainer.prototype._removeContentViewElement):
+        (WebInspector.ContentViewContainer.prototype._showContentView):
+        (WebInspector.ContentViewContainer.prototype._hideContentView):
+        * UserInterface/Main.css:
+        (#content-views): Renamed from #content-panels.
+        * UserInterface/Main.html: Included ContentViewContainer.js and ContentViewContainer.css. Also renamed
+        content-panels to content-views.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create an instance of ContentViewContainer that uses the #content-views div.
+
+2011-12-05  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for getting the content of a resource in preparation for showing that content.
+
+        Part of: <rdar://problem/10488422> Implement Resource views for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Resource.js:
+        (WebInspector.Resource): Initialize _content, _pendingContentRequestCallbacks and _contentIsBase64Encoded.
+        (WebInspector.Resource.prototype.get content): Added.
+        (WebInspector.Resource.prototype.get contentIsBase64Encoded): Added.
+        (WebInspector.Resource.prototype.requestContent): Added. Queues the callback and requests the content if needed.
+        (WebInspector.Resource.prototype.markAsFinished): Call _requestContentFromBackend if there are pending requests.
+        (WebInspector.Resource.prototype.markAsFailed): Call _servicePendingContentRequests.
+        (WebInspector.Resource.prototype._requestContentFromBackend): Added. Use the NetworkPageAgent depending on if
+        we have a requestIdentifier for this Resource.
+        (WebInspector.Resource.prototype._processContent): Added. Store the content and call _servicePendingContentRequests.
+        (WebInspector.Resource.prototype._servicePendingContentRequests): Added. Call all the pending callbacks with the content.
+
+2011-12-05  Timothy Hatcher  <timothy@apple.com>
+
+        Mark resources loaded from the memory cache as finished in the Web Inspector so their content can be requested.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWasServedFromMemoryCache): Call markAsFinished.
+
+2011-12-05  Timothy Hatcher  <timothy@apple.com>
+
+        Add requestIdentifier to WebInspector.Resource.
+
+        The requestIdentifier will be needed for getting the resource content from the backend.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.frameDidNavigate): Pass null for the requestIdentifier.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWillBeSent): Pass the requestIdentifier.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWasServedFromMemoryCache): Ditto.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidReceiveResponse): Ditto.
+        (WebInspector.FrameResourceManager.prototype._addNewResourceToFrame): Added requestIdentifier parameter.
+        (WebInspector.FrameResourceManager.prototype._createFrame): Pass null for requestIdentifier.
+        (WebInspector.FrameResourceManager.prototype._createResource): Ditto.
+        * UserInterface/Resource.js:
+        (WebInspector.Resource): Added requestIdentifier parameter.
+        (WebInspector.Resource.prototype.get requestIdentifier): Added.
+
+2011-12-05  Timothy Hatcher  <timothy@apple.com>
+
+        Override the cursor to prevent the I-beam over various text UI elements in the Web Inspector.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/Main.css:
+        (body): Set cursor to default.
+
+2011-12-05  Timothy Hatcher  <timothy@apple.com>
+
+        Call preventDefault and stopPropagation in various event listeners in the Web Inspector.
+
+        This prevents text selection while dragging the sidebar resizer or scrubbing a navigation bar.
+        It also prevents text selection when double clicking the sidebar resizer.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype._mouseDown):
+        (WebInspector.NavigationBar.prototype._mouseMoved):
+        (WebInspector.NavigationBar.prototype._mouseUp):
+        (WebInspector.NavigationBar.prototype._keyDown):
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar.prototype._resizerDoubleClicked):
+        (WebInspector.Sidebar.prototype._resizerMouseDown):
+        (WebInspector.Sidebar.prototype._resizerMouseMoved):
+        (WebInspector.Sidebar.prototype._resizerMouseUp):
+
+2011-12-05  Timothy Hatcher  <timothy@apple.com>
+
+        Add a build phase copy of InspectorBackend.js from WebCore and rename the
+        InspectorBackendStub.js copied file to InspectorBackendCommands.js.
+
+        The InspectorBackend.js file split out of the generated InspectorBackendStub.js
+        in r101670, and both files are needed to be useful.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Main.html: Include InspectorBackendCommands.js.
+        * WebInspectorUI.xcodeproj/project.pbxproj: Update the WebCore Inspector Resources build pahse.
+
+2011-11-29  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.ResourceCollection to simplify parts of WebInspector.Frame.
+
+        The ResourceCollection class tracks resources it holds for URL and type changes
+        and updates internal mappings accordingly.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Frame.js:
+        (WebInspector.Frame): Create a ResourceCollection instead of multiple arrays/maps.
+        (WebInspector.Frame.prototype.initialize): Call clearProvisionalLoad before the main
+        resource did change event.
+        (WebInspector.Frame.prototype.startProvisionalLoad): Create a provisional ResourceCollection.
+        (WebInspector.Frame.prototype.commitProvisionalLoad): Commit the provisional ResourceCollection.
+        Added an early return to prevent exceptions if this is called when there isn't provisional load.
+        (WebInspector.Frame.prototype.clearProvisionalLoad): Added an early return and clear the ResourceCollection.
+        (WebInspector.Frame.prototype.get resources): Use ResourceCollection.
+        (WebInspector.Frame.prototype.resourceForURL): Ditto.
+        (WebInspector.Frame.prototype.resourcesWithType): Ditto.
+        (WebInspector.Frame.prototype.addResource): Moved the add code from _associateWithResource and use the
+        new _isProvisionalResource function to check which ResourceCollection to add the resource to.
+        (WebInspector.Frame.prototype.removeResource): Use ResourceCollection.
+        (WebInspector.Frame.prototype.removeAllResources): Ditto.
+        (WebInspector.Frame.prototype._isProvisionalResource): Added.
+        (WebInspector.Frame.prototype._associateWithResource): Only set _childFrame.
+        (WebInspector.Frame.prototype._disassociateWithResource): Only clear _childFrame.
+        * UserInterface/Main.html: Included ResourceCollection.js.
+        * UserInterface/ResourceCollection.js: Added. Broken out of Frame.js.
+        (WebInspector.ResourceCollection):
+        (WebInspector.ResourceCollection.prototype.get resources):
+        (WebInspector.ResourceCollection.prototype.resourceForURL):
+        (WebInspector.ResourceCollection.prototype.resourcesWithType):
+        (WebInspector.ResourceCollection.prototype.addResource):
+        (WebInspector.ResourceCollection.prototype.removeResource):
+        (WebInspector.ResourceCollection.prototype.removeAllResources):
+        (WebInspector.ResourceCollection.prototype._associateWithResource):
+        (WebInspector.ResourceCollection.prototype._disassociateWithResource):
+        (WebInspector.ResourceCollection.prototype._resourceURLDidChange):
+        (WebInspector.ResourceCollection.prototype._resourceTypeDidChange):
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Improve glob filtering in the Resources sidebar of the new Web Inspector.
+
+        Match edge boundaries when there is an asterisk to better meet the expectations
+        of the user. When someone types "*.js" they don't expect "foo.json" to match. They
+        would only expect that if they type "*.js*". We use \b (instead of ^ and $) to allow
+        matches inside paths or URLs, so "ba*.js" will match "foo/bar.js" but not "boo/bbar.js".
+        When there isn't an asterisk the regexString is just a substring search. Also properly
+        ignore escaped asterisks and collapse consecutive asterisks down to one.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Utilities.js:
+        (simpleGlobStringToRegExp):
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Show a message in the sidebar when it is empty because there are no filter matches.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/NavigationSidebarPanel.css:
+        (.sidebar > .panel.navigation > .content.hidden): Added.
+        (.sidebar > .panel.navigation > .empty-content-placeholder): Added.
+        (.sidebar > .panel.navigation > .empty-content-placeholder > .message): Added.
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel): Create the empty content placeholder elements.
+        (WebInspector.NavigationSidebarPanel.prototype.showEmptyContentPlaceholder): Set the message and add the element.
+        (WebInspector.NavigationSidebarPanel.prototype.hideEmptyContentPlaceholder): Remove the element.
+        (WebInspector.NavigationSidebarPanel.prototype._checkForEmptyFilterResults): Added. Check for hidden top level elements.
+        (WebInspector.NavigationSidebarPanel.prototype._updateFilter): Call _checkForEmptyFilterResults.
+        (WebInspector.NavigationSidebarPanel.prototype._treeElementAddedOrChanged): Ditto.
+        * UserInterface/Sidebar.css:
+        (.sidebar > .panel): Make overflow hidden so when the sidebar is collapsed the empty placeholder doesn't stick out.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Add text filtering support to WebInspector.NavigationSidebarPanel.
+
+        This makes it so you can filter the resource list, matching against the URLs.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/FilterBar.js:
+        (WebInspector.FilterBar): Add an search event listener and set incremental to true.
+        (WebInspector.FilterBar.prototype.get filters): Added.
+        (WebInspector.FilterBar.prototype.hasActiveFilters): Added.
+        (WebInspector.FilterBar.prototype._inputFieldChanged): Added. Dispatch the TextFilterDidChange event.
+        * UserInterface/GeneralTreeElement.js:
+        (WebInspector.GeneralTreeElement.prototype.set mainTitle): Call didChange.
+        (WebInspector.GeneralTreeElement.prototype.set subtitle): Ditto.
+        (WebInspector.GeneralTreeElement.prototype.get filterableData): Added. Returns the URL.
+        * UserInterface/NavigationSidebarPanel.css:
+        (.navigation-sidebar-panel-content-tree-outline .hidden): Added.
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel): Set onadd and onchange on the TreeOutline. Listen for
+        the TextFilterDidChange event.
+        (WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement): Added.
+        (WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement.matchTextFilter): Added.
+        (WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement.makeVisible): Added.
+        (WebInspector.NavigationSidebarPanel.prototype._updateFilter): Added. Call applyFiltersToTreeElement.
+        (WebInspector.NavigationSidebarPanel.prototype._treeElementAddedOrChanged): Added. Call applyFiltersToTreeElement.
+        * UserInterface/Utilities.js:
+        (String.prototype.escapeCharacters): Copied from WebCore/inspector/front-end/utilities.js.
+        (String.prototype.escapeForRegExp): Copied from WebCore/inspector/front-end/utilities.js.
+        (simpleGlobStringToRegExp): Added.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.FilterBar to be used in navigation sidebar panels.
+
+        The filter bar only contains a specially styled search field in this change.
+        It does not actually filter the sidebar yet.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/FilterBar.css: Added.
+        (.filter-bar): Styled like the filter bar in Xcode 4.
+        (.filter-bar > input[type="search"]): Set the margins and prevent an outline on focus.
+        (.filter-bar > input[type="search"]::-webkit-search-decoration): Replace the search
+        magnifying glass with the filter glyph.
+        * UserInterface/FilterBar.js: Added.
+        (WebInspector.FilterBar):
+        (WebInspector.FilterBar.prototype.get element):
+        (WebInspector.FilterBar.prototype.get inputField):
+        * UserInterface/Images/FilterFieldGlyph.pdf: Added.
+        * UserInterface/Main.html: Included FilterBar.js and FilterBar.css.
+        * UserInterface/NavigationSidebarPanel.css:
+        (.sidebar > .panel.navigation > .filter-bar): Position at the bottom.
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel): Create a FilterBar.
+        (WebInspector.NavigationSidebarPanel.prototype.get filterBar): Added.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Handle getting a resource load responce without getting the request first.
+
+        If the Web Inspector is opened while loading a page we can miss the resourceRequestWillBeSent call.
+        In that case we might get a respose but not know the resource yet, so make a new resource and add it.
+
+        Reviewed by Anders Carlsson.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidReceiveResponse): Make a new resource if
+        one isn't found in the request identifier map.
+        * UserInterface/NetworkObserver.js:
+        (WebInspector.NetworkObserver.prototype.responseReceived): Pass the frameId and loaderId along.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Store the request and response headers on WebInspector.Resource.
+
+        Part of: <rdar://problem/10318718> Implement the Resource sidebar for the new Web Inspector design
+
+        Reviewed by Anders Carlsson.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.frameDidNavigate): Pass null for the requestHeaders in a couple of places.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWillBeSent): Pass the requestHeaders along.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWasServedFromMemoryCache): Pass null for the requestHeaders.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidReceiveResponse): Pass the responseHeaders along to updateForResponse.
+        (WebInspector.FrameResourceManager.prototype._addNewResourceToFrame): Added an argument for requestHeaders.
+        (WebInspector.FrameResourceManager.prototype._createFrame): Pass null for the requestHeaders.
+        (WebInspector.FrameResourceManager.prototype._createResource): Ditto.
+        * UserInterface/Resource.js:
+        (WebInspector.Resource): Added requestHeaders argument.
+        (WebInspector.Resource.prototype.get requestHeaders): Added.
+        (WebInspector.Resource.prototype.get responseHeaders): Added.
+        (WebInspector.Resource.prototype.updateForResponse): Added responseHeaders argument and fire the ResponseHeadersDidChange event.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Keep track of failed, canceled and finished resources in the Web Inspector.
+
+        Part of: <rdar://problem/10318718> Implement the Resource sidebar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidFinishLoading): Call markAsFinished.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidFailLoading): Added canceled argument and call markAsFailed.
+        (WebInspector.FrameResourceManager.prototype._createResource): Call markAsFinished.
+        * UserInterface/NetworkObserver.js:
+        (WebInspector.NetworkObserver.prototype.loadingFailed): Pass along the canceled argument.
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.get finished): Added.
+        (WebInspector.Resource.prototype.get failed): Added.
+        (WebInspector.Resource.prototype.get canceled): Added.
+        (WebInspector.Resource.prototype.updateForRedirectResponse): Added asserts that loading hasn't failed, finished or canceled.
+        (WebInspector.Resource.prototype.updateForResponse): Ditto.
+        (WebInspector.Resource.prototype.markAsFinished): Added.
+        (WebInspector.Resource.prototype.markAsFailed): Added.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Sort folders by name, resources by type and name in the Web Inspector sidebar.
+
+        Part of: <rdar://problem/10318718> Implement the Resource sidebar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/FrameTreeElement.js:
+        (WebInspector.FrameTreeElement.prototype.descendantResourceTreeElementTypeDidChange): Remove the check for _groupedIntoFolders
+        since we sort by type in non-folder mode now. Updated the comment.
+        (WebInspector.FrameTreeElement.prototype.descendantResourceTreeElementMainTitleDidChange): Added.
+        (WebInspector.FrameTreeElement.prototype._addTreeElement): Use _insertRootFolderTreeElement and _insertResourceTreeElement.
+        (WebInspector.FrameTreeElement.prototype._compareTreeElementsByMainTitle): Added.
+        (WebInspector.FrameTreeElement.prototype._insertFolderTreeElement): Added.
+        (WebInspector.FrameTreeElement.prototype._compareResourceTreeElements): Added.
+        (WebInspector.FrameTreeElement.prototype._insertResourceTreeElement): Added.
+        * UserInterface/Main.html: Included BinarySearch.js.
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement.prototype._updateTitles): Call descendantResourceTreeElementMainTitleDidChange on the first ancestor
+        if the main title changed.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Queue new resources and frames to add them in bulk every half a second.
+
+        This reduces flashing in the Web Inspector sidebar as resources load and change folders as their type becomes known.
+
+        Part of: <rdar://problem/10318718> Implement the Resource sidebar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/FrameTreeElement.js:
+        (WebInspector.FrameTreeElement): Initialize _newChildQueue.
+        (WebInspector.FrameTreeElement.prototype.onpopulate): Call _clearNewChildQueue.
+        (WebInspector.FrameTreeElement.prototype._mainResourceDidChange): Ditto.
+        (WebInspector.FrameTreeElement.prototype._resourceWasAdded): Use _addRepresentedObjectToNewChildQueue.
+        (WebInspector.FrameTreeElement.prototype._childFrameWasAdded): Ditto.
+        (WebInspector.FrameTreeElement.prototype._addRepresentedObjectToNewChildQueue): Added. Adds the item to the queue and starts
+        a timer if one isn't already pending.
+        (WebInspector.FrameTreeElement.prototype._removeRepresentedObjectFromNewChildQueue): Added. Removes the item from the queue.
+        (WebInspector.FrameTreeElement.prototype._populateFromNewChildQueue): Added. Call _addChildForRepresentedObject
+        for each item in the queue.
+        (WebInspector.FrameTreeElement.prototype._clearNewChildQueue): Added. Clears the queue.
+        (WebInspector.FrameTreeElement.prototype._removeChildForRepresentedObject): Call _removeRepresentedObjectFromNewChildQueue.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Remember expanded frames when the main resource changes during navigation. Also auto expand the main frame.
+
+        Part of: <rdar://problem/10318718> Implement the Resource sidebar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/FrameTreeElement.js:
+        (WebInspector.FrameTreeElement.prototype._mainResourceDidChange): Remember if this tree element was expanded.
+        (WebInspector.FrameTreeElement.prototype._addChildForRepresentedObject): Expand if needed.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameDidChange): Expand when the main frame is created.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Group resources into folders once certain resource count thresholds are met.
+
+        Resources and Frames are grouped into folders if one of two thresholds are met:
+        1) Once the number of medium categories passes NumberOfMediumCategoriesThreshold.
+        2) When there is a category that passes LargeChildCountThreshold and there are
+           any resources in another category.
+
+        Folders are avoided when there is only one category or most categories are small.
+
+        Part of: <rdar://problem/10318718> Implement the Resource sidebar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/FrameTreeElement.js:
+        (WebInspector.FrameTreeElement.prototype.descendantResourceTreeElementTypeDidChange): Added. Called by ResourceTreeElement.
+        (WebInspector.FrameTreeElement.prototype.onpopulate): Call _shouldGroupIntoFolders and use _addTreeElement.
+        (WebInspector.FrameTreeElement.prototype._mainResourceDidChange): Reset _groupedIntoFolders to false.
+        (WebInspector.FrameTreeElement.prototype._addChildForRepresentedObject): Call _shouldGroupIntoFolders and use _addTreeElement.
+        (WebInspector.FrameTreeElement.prototype._removeChildForRepresentedObject): Remove the parent if it is an empty folder.
+        (WebInspector.FrameTreeElement.prototype._addTreeElement): Added. Adds the tree element to the right folder.
+        (WebInspector.FrameTreeElement.prototype._removeTreeElement): Added. Removes the tree element and empty folders.
+        (WebInspector.FrameTreeElement.prototype._folderNameForResourceType): Added.
+        (WebInspector.FrameTreeElement.prototype._parentTreeElementForRepresentedObject): Added. Make the folder tree element if needed.
+        (WebInspector.FrameTreeElement.prototype._shouldGroupIntoFolders): Added. Calculates if folders are needed.
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement.prototype._typeDidChange): Use _callFirstAncestorFunction to call descendantResourceTreeElementTypeDidChange.
+        (WebInspector.ResourceTreeElement.prototype._callFirstAncestorFunction): Added. Call the first ancestor that implements a function.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.FolderTreeElement to be used in navigation sidebar panels.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/FolderTreeElement.css: Added.
+        (.folder-tree-element .icon):
+        * UserInterface/FolderTreeElement.js: Added.
+        (WebInspector.FolderTreeElement):
+        * UserInterface/Images/FolderGeneric.png: Added.
+        * UserInterface/Images/FolderGeneric@2x.png: Added.
+        * UserInterface/Main.html: Included FolderTreeElement.css and FolderTreeElement.js.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Remember resources by type for each frame in the Web Inspector.
+
+        This will be used to organize the sidebar into folders for each type of resource.
+
+        Part of: <rdar://problem/10318718> Implement the Resource sidebar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Frame.js:
+        (WebInspector.Frame): Initialize _resourcesTypeMap and _provisionalResourcesTypeMap.
+        (WebInspector.Frame.prototype.startProvisionalLoad): Initialize _provisionalResourcesURLMap.
+        (WebInspector.Frame.prototype.commitProvisionalLoad): Commit _provisionalResourcesURLMap over to _resourcesTypeMap.
+        (WebInspector.Frame.prototype.clearProvisionalLoad): Initialize _provisionalResourcesURLMap.
+        (WebInspector.Frame.prototype.resourcesWithType): Added. Lookup in _resourcesTypeMap.
+        (WebInspector.Frame.prototype.removeAllResources): Initialize _resourcesTypeMap.
+        (WebInspector.Frame.prototype._associateWithResource): Added resource to the type map.
+        (WebInspector.Frame.prototype._disassociateWithResource): Remove the resource from the type map.
+        (WebInspector.Frame.prototype._resourceTypeDidChange): Update the resource type map.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Add icons for document, image, font, style, script and generic resource types in the Web Inspector.
+
+        Part of: <rdar://problem/10318718> Implement the Resource sidebar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Images/DocumentCSS.png: Added.
+        * UserInterface/Images/DocumentCSS@2x.png: Added.
+        * UserInterface/Images/DocumentFont.png: Added.
+        * UserInterface/Images/DocumentFont@2x.png: Added.
+        * UserInterface/Images/DocumentGeneric.png: Added.
+        * UserInterface/Images/DocumentGeneric@2x.png: Added.
+        * UserInterface/Images/DocumentImage.png: Added.
+        * UserInterface/Images/DocumentImage@2x.png: Added.
+        * UserInterface/Images/DocumentJS.png: Added.
+        * UserInterface/Images/DocumentJS@2x.png: Added.
+        * UserInterface/Images/DocumentMarkup.png: Added.
+        * UserInterface/Images/DocumentMarkup@2x.png: Added.
+        * UserInterface/Main.html: Included ResourceTreeElement.css.
+        * UserInterface/ResourceTreeElement.css: Added.
+        (.resource-tree-element .icon):
+        (.resource-tree-element.resource-type-document .icon):
+        (.resource-tree-element.resource-type-image .icon):
+        (.resource-tree-element.resource-type-stylesheet .icon):
+        (.resource-tree-element.resource-type-script .icon):
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement): Use the resource type as a class.
+        (WebInspector.ResourceTreeElement.prototype._updateResource): Added TypeDidChange event listener.
+        (WebInspector.ResourceTreeElement.prototype._typeDidChange): Added. Update the classNames with the new type.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Display the last path component instead of the full URL in the Web Inspector's Resource sidebar panel.
+        Show the host as the subtitle if it is different from the main resource or if this is the main frame's main resource.
+
+        Part of: <rdar://problem/10318718> Implement the Resource sidebar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.get urlComponents): Added. Calls parseURL if needed.
+        (WebInspector.Resource.prototype.updateForRedirectResponse): Delete the URL components so the URL is re-parsed the
+        next time it is requested.
+        (WebInspector.Resource.prototype.updateForResponse): Ditto.
+        * UserInterface/ResourceTreeElement.js:
+        (WebInspector.ResourceTreeElement.prototype._updateTitles): Set the mainTitle and subtitle based on the urlComponents.
+        * UserInterface/Utilities.js:
+        (parseURL): Added. Parses a URL into its components.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Populate the WebInspector's Resource sidebar panel with frame and resource tree elements.
+
+        Part of: <rdar://problem/10318718> Implement the Resource sidebar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/FrameTreeElement.js: Added.
+        (WebInspector.FrameTreeElement): Set up event listeners.
+        (WebInspector.FrameTreeElement.prototype.get frame): Returns _frame.
+        (WebInspector.FrameTreeElement.prototype.onpopulate): Add child frames and resources.
+        (WebInspector.FrameTreeElement.prototype._updateParentStatus): Update hasChildren.
+        (WebInspector.FrameTreeElement.prototype._mainResourceDidChange): Update the resource and remove children.
+        (WebInspector.FrameTreeElement.prototype._resourceWasAdded): Call _addChildForRepresentedObject.
+        (WebInspector.FrameTreeElement.prototype._resourceWasRemoved): Call _removeChildForRepresentedObject.
+        (WebInspector.FrameTreeElement.prototype._childFrameWasAdded): Call _addChildForRepresentedObject.
+        (WebInspector.FrameTreeElement.prototype._childFrameWasRemoved): Call _removeChildForRepresentedObject.
+        (WebInspector.FrameTreeElement.prototype._addChildForRepresentedObject): Update parent status and append the new tree element.
+        (WebInspector.FrameTreeElement.prototype._removeChildForRepresentedObject): Update parent status and remove the tree element.
+        * UserInterface/Main.html: Include FrameTreeElement.js and ResourceTreeElement.js.
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel): Add MainFrameDidChange event listener.
+        (WebInspector.ResourceSidebarPanel.prototype._mainFrameDidChange): Added.
+        * UserInterface/ResourceTreeElement.js: Added.
+        (WebInspector.ResourceTreeElement):
+        (WebInspector.ResourceTreeElement.prototype.get resource): Returns _resource.
+        (WebInspector.ResourceTreeElement.prototype._updateResource): Setup event listeners and update titles.
+        (WebInspector.ResourceTreeElement.prototype._updateTitles): Set the mainTitle to the URL for now.
+        (WebInspector.ResourceTreeElement.prototype._urlDidChange): Update the titles.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.GeneralTreeElement to be used in navigation sidebar panels.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/GeneralTreeElement.js: Added.
+        (WebInspector.GeneralTreeElement):
+        (WebInspector.GeneralTreeElement.prototype.get element):
+        (WebInspector.GeneralTreeElement.prototype.get disclosureButton):
+        (WebInspector.GeneralTreeElement.prototype.get iconElement):
+        (WebInspector.GeneralTreeElement.prototype.get titlesElement):
+        (WebInspector.GeneralTreeElement.prototype.get mainTitleElement):
+        (WebInspector.GeneralTreeElement.prototype.get subtitleElement):
+        (WebInspector.GeneralTreeElement.prototype.get classNames):
+        (WebInspector.GeneralTreeElement.prototype.set classNames):
+        (WebInspector.GeneralTreeElement.prototype.get small):
+        (WebInspector.GeneralTreeElement.prototype.set small):
+        (WebInspector.GeneralTreeElement.prototype.get mainTitle):
+        (WebInspector.GeneralTreeElement.prototype.set mainTitle):
+        (WebInspector.GeneralTreeElement.prototype.get subtitle):
+        (WebInspector.GeneralTreeElement.prototype.set subtitle):
+        (WebInspector.GeneralTreeElement.prototype.isEventWithinDisclosureTriangle):
+        (WebInspector.GeneralTreeElement.prototype.onattach):
+        (WebInspector.GeneralTreeElement.prototype.onreveal):
+        (WebInspector.GeneralTreeElement.prototype._createElementsIfNeeded):
+        (WebInspector.GeneralTreeElement.prototype._createSubtitleElementIfNeeded):
+        (WebInspector.GeneralTreeElement.prototype._updateTitleElements):
+        * UserInterface/Main.html: Add GeneralTreeElement.js.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Generate disclosure triangles from PDFs for the Web Inspector's navigation sidebar.
+
+        The disclosure triangles are a solid color plus a shadow for a normal and selected state.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ImageUtilities.js: Added.
+        (generateColoredImage): Take an input image and fill the image with a color while preserving the alpha.
+        * UserInterface/Images/DisclosureTriangleSmallClosed.pdf: Added.
+        * UserInterface/Images/DisclosureTriangleSmallOpen.pdf: Added.
+        * UserInterface/Main.html: Added ImageUtilities.js.
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel): Call _generateDisclosureTrianglesIfNeeded.
+        (WebInspector.NavigationSidebarPanel.prototype._generateDisclosureTrianglesIfNeeded): Load the open and closed images.
+        (WebInspector.NavigationSidebarPanel.prototype._generateDisclosureTrianglesIfNeeded._disclosureImageLoaded): Call
+        _generateDisclosureTriangle for the normal and selected state with different colors for each.
+        (WebInspector.NavigationSidebarPanel.prototype._generateDisclosureTrianglesIfNeeded._generateDisclosureTriangle):
+        Fill the image with the color and draw it with the desired shadow.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Create a TreeOutline for WebInspector.NavigationSidebarPanel that is styled like Xcode 4's Project Navigator.
+
+        The disclosure triangle generation is not part of this change, they will come in a later change.
+
+        Reviewed by Brian Weinstein and Joseph Pecoraro.
+
+        * UserInterface/Main.html: Included TreeOutline.js.
+        * UserInterface/NavigationSidebarPanel.css: Style rules for .navigation-sidebar-panel-content-tree-outline
+        and decedent elements.
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel): Create the TreeOutline and its element. Call _generateStyleRulesIfNeeded.
+        (WebInspector.NavigationSidebarPanel.prototype.get contentElement): Added.
+        (WebInspector.NavigationSidebarPanel.prototype.get contentTreeOutlineElement): Added.
+        (WebInspector.NavigationSidebarPanel.prototype.get contentTreeOutline): Added.
+        (WebInspector.NavigationSidebarPanel.prototype._generateStyleRulesIfNeeded): Added. Make repetitive style rules for
+        15 levels of indentation.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.NavigationSidebarPanel as a base class for all navigation
+        sidebar panels so they can share code for the content element and filter bar.
+
+        Only the content element is there now, the filter bar is coming later.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/Main.html: Add NavigationSidebarPanel.js and NavigationSidebarPanel.css.
+        * UserInterface/NavigationSidebarPanel.css: Added.
+        (.sidebar > .panel.navigation > .content): Account for 22px at the bottom for the future
+        filter bar height.
+        * UserInterface/NavigationSidebarPanel.js: Added.
+        (WebInspector.NavigationSidebarPanel):
+        (WebInspector.NavigationSidebarPanel.prototype.get contentElement):
+        * UserInterface/ResourceSidebarPanel.js:
+        (WebInspector.ResourceSidebarPanel): Inherit from NavigationSidebarPanel instead of SidebarPanel.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Add events to the Web Inspector for frame and resource changes.
+
+        These events will be used to keep the user interface up-to-date.
+
+        Part of: <rdar://problem/10318718> Implement the Resource sidebar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Frame.js:
+        (WebInspector.Frame.prototype.initialize):
+        (WebInspector.Frame.prototype.startProvisionalLoad):
+        (WebInspector.Frame.prototype.commitProvisionalLoad):
+        (WebInspector.Frame.prototype.clearProvisionalLoad):
+        (WebInspector.Frame.prototype.addChildFrame):
+        (WebInspector.Frame.prototype.removeChildFrame):
+        (WebInspector.Frame.prototype.removeAllChildFrames):
+        (WebInspector.Frame.prototype.addResource):
+        (WebInspector.Frame.prototype.removeResource):
+        (WebInspector.Frame.prototype.removeAllResources):
+        (WebInspector.Frame.prototype._resourceURLDidChange):
+        (WebInspector.Frame.prototype._dispatchMainResourceDidChangeEvent):
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.initialize):
+        (WebInspector.FrameResourceManager.prototype.frameDidNavigate):
+        (WebInspector.FrameResourceManager.prototype.frameDidDetach):
+        (WebInspector.FrameResourceManager.prototype._addNewResourceToFrame):
+        (WebInspector.FrameResourceManager.prototype._processMainFrameResourceTreePayload):
+        (WebInspector.FrameResourceManager.prototype._addFrameTreeFromFrameResourceTreePayload):
+        (WebInspector.FrameResourceManager.prototype._dispatchFrameWasAddedEvent):
+        (WebInspector.FrameResourceManager.prototype._dispatchMainFrameDidChangeEvent):
+        * UserInterface/Resource.js:
+        (WebInspector.Resource.prototype.updateForResponse):
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Keep WebInspector.FrameResourceManager up-to-date during resource loads.
+
+        Part of: <rdar://problem/10318718> Implement the Resource sidebar for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Frame.js:
+        (WebInspector.Frame):
+        (WebInspector.Frame.prototype.initialize): Add an assert. Set the loaderIdentifier and call clearProvisionalLoad.
+        (WebInspector.Frame.prototype.startProvisionalLoad): Added.
+        (WebInspector.Frame.prototype.commitProvisionalLoad): Added.
+        (WebInspector.Frame.prototype.clearProvisionalLoad): Added.
+        (WebInspector.Frame.prototype.get loaderIdentifier): Added.
+        (WebInspector.Frame.prototype.get provisionalLoaderIdentifier): Added.
+        (WebInspector.Frame.prototype.get provisionalMainResource): Added.
+        (WebInspector.Frame.prototype.addResource): Use _associateWithResource.
+        (WebInspector.Frame.prototype.removeResource): Use _disassociateWithResource.
+        (WebInspector.Frame.prototype.removeAllResources): Ditto.
+        (WebInspector.Frame.prototype._associateWithResource): Added.
+        (WebInspector.Frame.prototype._disassociateWithResource): Added.
+        (WebInspector.Frame.prototype._resourceURLDidChange): Added.
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager): Enable the NetworkAgent.
+        (WebInspector.FrameResourceManager.prototype.initialize): Initialize _resourceRequestIdentifierMap.
+        (WebInspector.FrameResourceManager.prototype.frameDidNavigate): Call commitProvisionalLoad if this was the provisionalLoaderIdentifier.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWillBeSent): Added.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestWasServedFromMemoryCache): Added.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidReceiveResponse): Added.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidFinishLoading): Added.
+        (WebInspector.FrameResourceManager.prototype.resourceRequestDidFailLoading): Added.
+        (WebInspector.FrameResourceManager.prototype._addNewResourceToFrame): Added.
+        (WebInspector.FrameResourceManager.prototype._addResourceToFrame): Added.
+        (WebInspector.FrameResourceManager.prototype._createFrame): Pass the loaderId.
+        * UserInterface/NetworkObserver.js:
+        (WebInspector.NetworkObserver.prototype.requestWillBeSent): Call FrameResourceManager.
+        (WebInspector.NetworkObserver.prototype.responseReceived): Ditto.
+        (WebInspector.NetworkObserver.prototype.loadingFinished): Ditto.
+        (WebInspector.NetworkObserver.prototype.loadingFailed): Ditto.
+        (WebInspector.NetworkObserver.prototype.requestServedFromMemoryCache): Ditto.
+        * UserInterface/PageObserver.js:
+        (WebInspector.PageObserver.prototype.frameNavigated): Pass the loaderId.
+        * UserInterface/Resource.js:
+        (WebInspector.Resource): Added loaderIdentifier.
+        (WebInspector.Resource.prototype.get loaderIdentifier): Added.
+        (WebInspector.Resource.prototype.updateForRedirectResponse): Added.
+        (WebInspector.Resource.prototype.updateForResponse): Added.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.Resource and populate existing resources for page frames.
+
+        Part of: <rdar://problem/10318718> Implement the Resource sidebar for the new Web Inspector design
+
+        Reviewed by Sam Weinig.
+
+        * UserInterface/Frame.js:
+        (WebInspector.Frame.prototype.initialize): Remove _url and _mimeType. Add _mainResource, _resources and _resourceURLMap.
+        (WebInspector.Frame.prototype.get url): Get the URL from the mainResource.
+        (WebInspector.Frame.prototype.get mainResource): Added.
+        (WebInspector.Frame.prototype.get resources): Added.
+        (WebInspector.Frame.prototype.resourceForURL): Added.
+        (WebInspector.Frame.prototype.addResource): Added.
+        (WebInspector.Frame.prototype.removeResource): Added.
+        (WebInspector.Frame.prototype.removeAllResources): Added.
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype._createResource): Added.
+        (WebInspector.FrameResourceManager.prototype._addFrameTreeFromFrameResourceTreePayload): Call _createResource for each
+        resource in the payload.
+        * UserInterface/Main.html:
+        * UserInterface/Resource.js: Added.
+        (WebInspector.Resource):
+        (WebInspector.Resource.Type.fromMIMEType):
+        (WebInspector.Resource.prototype.get url):
+        (WebInspector.Resource.prototype.get type):
+        (WebInspector.Resource.prototype.get mimeType):
+        (WebInspector.Resource.prototype.get parentFrame):
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Keep WebInspector.FrameResourceManager up-to-date during navigation, adding and detaching frames.
+
+        Part of: <rdar://problem/10318718> Implement the Resource sidebar for the new Web Inspector design
+
+        Reviewed by Ada Chan.
+
+        * UserInterface/Frame.js:
+        (WebInspector.Frame): Call initialize.
+        (WebInspector.Frame.prototype.initialize): Added.
+        (WebInspector.Frame.prototype.get parentFrame): Added.
+        (WebInspector.Frame.prototype.childFrameForIdentifier): Added.
+        (WebInspector.Frame.prototype.addChildFrame): Call removeChildFrame on the previous parentFrame. Set parentFrame.
+        (WebInspector.Frame.prototype.removeChildFrame): Added.
+        (WebInspector.Frame.prototype.removeAllChildFrames): Added.
+        * UserInterface/FrameResourceManager.js:
+        (WebInspector.FrameResourceManager.prototype.frameForIdentifier): Added.
+        (WebInspector.FrameResourceManager.prototype.frameDidNavigate): Added.
+        (WebInspector.FrameResourceManager.prototype.frameDidDetach): Added.
+        (WebInspector.FrameResourceManager.prototype._createFrame): Added.
+        (WebInspector.FrameResourceManager.prototype._addFrameTreeFromFrameResourceTreePayload): Use _createFrame.
+        * UserInterface/PageObserver.js:
+        (WebInspector.PageObserver.prototype.frameNavigated): Call WebInspector.FrameResourceManager.frameDidNavigate.
+        (WebInspector.PageObserver.prototype.frameDetached): Call WebInspector.FrameResourceManager.frameDidDetach.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.FrameResourceManager and have it build up the basic frame tree for the inspected page.
+
+        Part of: <rdar://problem/10318718> Implement the Resource sidebar for the new Web Inspector design
+
+        Reviewed by Jessie Berlin.
+
+        * UserInterface/Frame.js: Added.
+        (WebInspector.Frame):
+        (WebInspector.Frame.prototype.get id):
+        (WebInspector.Frame.prototype.get name):
+        (WebInspector.Frame.prototype.get url):
+        (WebInspector.Frame.prototype.get childFrames):
+        (WebInspector.Frame.prototype.addChildFrame):
+        * UserInterface/FrameResourceManager.js: Added.
+        (WebInspector.FrameResourceManager):
+        (WebInspector.FrameResourceManager.prototype.initialize):
+        (WebInspector.FrameResourceManager.prototype.get mainFrame):
+        (WebInspector.FrameResourceManager.prototype._processMainFrameResourceTreePayload):
+        (WebInspector.FrameResourceManager.prototype._addFrameTreeFromFrameResourceTreePayload):
+        * UserInterface/Main.html: Include Frame.js and FrameResourceManager.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Create an instance of WebInspector.FrameResourceManager.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Reorder the calls in WebInspector.contentLoaded to put InspectorBackend first.
+
+        This is needed so that the InspectorBackend is ready to use by the user interface elements.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Add Element.removeChildren, Array.remove and isEnterKey for the Web Inspector,
+        which are needed by TreeOutline.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/Utilities.js:
+        (Element.prototype.removeChildren): Added.
+        (Array.prototype.remove): Added.
+        (isEnterKey): Added.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Copy the treeoutline.js file from the OpenSource to use in the new Web Inspector.
+
+        Rubber-stamped by Dan Bernstein.
+
+        * UserInterface/TreeOutline.js: Copied from WebCore/inspector/front-end/treeoutline.js.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Copy the BinarySearch.js file from the OpenSource to use in the new Web Inspector.
+
+        Rubber-stamped by Dan Bernstein.
+
+        * UserInterface/BinarySearch.js: Copied from WebCore/inspector/front-end/BinarySearch.js.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Make double clicking a sidebar divider toggle the collapsed state of the sidebar.
+
+        Reviewed by Dan Bernstein.
+
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar): Add dblclick event listener on the resizer element.
+        (WebInspector.Sidebar.prototype._resizerDoubleClicked): Toggle the collapsed state.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Make Element.totalOffsetLeft and Element.totalOffsetTop getters again.
+
+        Historically these were getters until a Google engineer changed them.
+        I didn't realize they weren't anymore and used totalOffsetTop as a
+        getter when making WebInspector.NavigationBar, which is a bug.
+
+        Reviewed by Darin Adler.
+
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar.prototype._resizerMouseMoved): Remove the function call
+        when using totalOffsetLeft.
+        * UserInterface/Utilities.js:
+        (Element.prototype.totalOffsetLeft): Made a getter using __defineGetter__.
+        (Element.prototype.totalOffsetTop): Ditto.
+
+2011-11-28  Timothy Hatcher  <timothy@apple.com>
+
+        Update Web Inspector event observers to reflect changes in Inspector.json from Open Source as of r101194.
+
+        Reviewed by Anders Carlsson.
+
+        * UserInterface/DebuggerObserver.js:
+        (WebInspector.DebuggerObserver.prototype.debuggerWasEnabled): Removed.
+        (WebInspector.DebuggerObserver.prototype.debuggerWasDisabled): Removed.
+        (WebInspector.DebuggerObserver.prototype.globalObjectCleared): Added.
+        * UserInterface/InspectorObserver.js:
+        (WebInspector.InspectorObserver.prototype.disconnectFromBackend): Removed.
+        (WebInspector.InspectorObserver.prototype.disconnectFromWorker): Added.
+        (WebInspector.InspectorObserver.prototype.bringToFront): Removed.
+        (WebInspector.InspectorObserver.prototype.reset): Removed.
+        (WebInspector.InspectorObserver.prototype.showPanel): Removed.
+        (WebInspector.InspectorObserver.prototype.startUserInitiatedDebugging): Removed.
+        * UserInterface/NetworkObserver.js:
+        (WebInspector.NetworkObserver.prototype.responseReceived): Added frameId and loaderId arguments.
+
+2011-11-14  Timothy Hatcher  <timothy@apple.com>
+
+        Fix copy and paste error that called InspectorBackend.registerConsoleDispatcher
+        for all the other dispatchers.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded):
+
+2011-11-11  Timothy Hatcher  <timothy@apple.com>
+
+        Add the ResourceSidebarPanel class in the new Web Inspector.
+
+        Part of: <rdar://problem/10318718> Implement the Resource sidebar for the new Web Inspector design
+
+        Reviewed by Jessie Berlin.
+
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Use ResourceSidebarPanel for the Resource panel.
+        * UserInterface/ResourceSidebarPanel.js: Added.
+        (WebInspector.ResourceSidebarPanel):
+
+2011-11-14  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.ApplicationCacheObserver with stubs for events defined by the "ApplicationCache" domain.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/ApplicationCacheObserver.js: Added.
+        (WebInspector.ApplicationCacheObserver):
+        (WebInspector.ApplicationCacheObserver.prototype.applicationCacheStatusUpdated): Not implemented.
+        (WebInspector.ApplicationCacheObserver.prototype.networkStateUpdated): Not implemented.
+        * UserInterface/Main.html: Include ApplicationCacheObserver.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Register an instance of WebInspector.ApplicationCacheObserver with InspectorBackend.
+
+2011-11-14  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.DOMStorageObserver with stubs for events defined by the "DOMStorage" domain.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMStorageObserver.js: Added.
+        (WebInspector.DOMStorageObserver):
+        (WebInspector.DOMStorageObserver.prototype.addDOMStorage): Not implemented.
+        (WebInspector.DOMStorageObserver.prototype.updateDOMStorage): Not implemented.
+        * UserInterface/Main.html: Include DOMStorageObserver.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Register an instance of WebInspector.DOMStorageObserver with InspectorBackend.
+
+2011-11-14  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.DatabaseObserver with stubs for events defined by the "Database" domain.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DatabaseObserver.js: Added.
+        (WebInspector.DatabaseObserver):
+        (WebInspector.DatabaseObserver.prototype.addDatabase): Not implemented.
+        (WebInspector.DatabaseObserver.prototype.sqlTransactionSucceeded): Not implemented.
+        (WebInspector.DatabaseObserver.prototype.sqlTransactionFailed): Not implemented.
+        * UserInterface/Main.html: Include DatabaseObserver.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Register an instance of WebInspector.DatabaseObserver with InspectorBackend.
+
+2011-11-14  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.DebuggerObserver with stubs for events defined by the "Debugger" domain.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DebuggerObserver.js: Added.
+        (WebInspector.DebuggerObserver):
+        (WebInspector.DebuggerObserver.prototype.debuggerWasEnabled): Not implemented.
+        (WebInspector.DebuggerObserver.prototype.debuggerWasDisabled): Not implemented.
+        (WebInspector.DebuggerObserver.prototype.scriptParsed): Not implemented.
+        (WebInspector.DebuggerObserver.prototype.scriptFailedToParse): Not implemented.
+        (WebInspector.DebuggerObserver.prototype.breakpointResolved): Not implemented.
+        (WebInspector.DebuggerObserver.prototype.paused): Not implemented.
+        (WebInspector.DebuggerObserver.prototype.resumed): Not implemented.
+        * UserInterface/Main.html: Include DebuggerObserver.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Register an instance of WebInspector.DebuggerObserver with InspectorBackend.
+
+2011-11-14  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.DOMObserver with stubs for events defined by the "DOM" domain.
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/DOMObserver.js: Added.
+        (WebInspector.DOMObserver):
+        (WebInspector.DOMObserver.prototype.documentUpdated): Not implemented.
+        (WebInspector.DOMObserver.prototype.setChildNodes): Not implemented.
+        (WebInspector.DOMObserver.prototype.attributeModified): Not implemented.
+        (WebInspector.DOMObserver.prototype.attributeRemoved): Not implemented.
+        (WebInspector.DOMObserver.prototype.inlineStyleInvalidated): Not implemented.
+        (WebInspector.DOMObserver.prototype.characterDataModified): Not implemented.
+        (WebInspector.DOMObserver.prototype.childNodeCountUpdated): Not implemented.
+        (WebInspector.DOMObserver.prototype.childNodeInserted): Not implemented.
+        (WebInspector.DOMObserver.prototype.childNodeRemoved): Not implemented.
+        * UserInterface/Main.html: Include DOMObserver.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Register an instance of WebInspector.DOMObserver with InspectorBackend.
+
+2011-11-14  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.NetworkObserver with stubs for events defined by the "Network" domain.
+
+        Reviewed by Sam Weinig.
+
+        * UserInterface/Main.html: Include NetworkObserver.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Register an instance of WebInspector.NetworkObserver with InspectorBackend.
+        * UserInterface/NetworkObserver.js: Added.
+        (WebInspector.NetworkObserver):
+        (WebInspector.NetworkObserver.prototype.requestWillBeSent): Not implemented.
+        (WebInspector.NetworkObserver.prototype.requestServedFromCache): Not implemented.
+        (WebInspector.NetworkObserver.prototype.responseReceived): Not implemented.
+        (WebInspector.NetworkObserver.prototype.dataReceived): Not implemented.
+        (WebInspector.NetworkObserver.prototype.loadingFinished): Not implemented.
+        (WebInspector.NetworkObserver.prototype.loadingFailed): Not implemented.
+        (WebInspector.NetworkObserver.prototype.requestServedFromMemoryCache): Not implemented.
+        (WebInspector.NetworkObserver.prototype.webSocketWillSendHandshakeRequest): Not implemented.
+        (WebInspector.NetworkObserver.prototype.webSocketHandshakeResponseReceived): Not implemented.
+        (WebInspector.NetworkObserver.prototype.webSocketCreated): Not implemented.
+        (WebInspector.NetworkObserver.prototype.webSocketClosed): Not implemented.
+
+2011-11-14  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.ConsoleObserver with stubs for events defined by the "Console" domain.
+
+        Reviewed by Sam Weinig.
+
+        * UserInterface/Main.html: Include ConsoleObserver.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Register an instance of WebInspector.ConsoleObserver with InspectorBackend.
+        * UserInterface/ConsoleObserver.js: Added.
+        (WebInspector.ConsoleObserver):
+        (WebInspector.ConsoleObserver.prototype.messageAdded): Not implemented.
+        (WebInspector.ConsoleObserver.prototype.messageRepeatCountUpdated): Not implemented.
+        (WebInspector.ConsoleObserver.prototype.messagesCleared): Not implemented.
+
+2011-11-14  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.PageObserver with stubs for events defined by the "Page" domain.
+
+        Reviewed by Sam Weinig.
+
+        * UserInterface/Main.html: Include PageObserver.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Register an instance of WebInspector.PageObserver with InspectorBackend.
+        * UserInterface/PageObserver.js: Added.
+        (WebInspector.PageObserver):
+        (WebInspector.PageObserver.prototype.domContentEventFired): Not implemented.
+        (WebInspector.PageObserver.prototype.loadEventFired): Not implemented.
+        (WebInspector.PageObserver.prototype.frameNavigated): Not implemented.
+        (WebInspector.PageObserver.prototype.frameDetached): Not implemented.
+
+2011-11-13  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.InspectorObserver to receive events defined by the "Inspector" domain.
+        Most of the events are unimplemented stubs at this point.
+
+        Reviewed by Sam Weinig.
+
+        * UserInterface/InspectorObserver.js: Added.
+        (WebInspector.InspectorObserver):
+        (WebInspector.InspectorObserver.prototype.frontendReused): Not implemented.
+        (WebInspector.InspectorObserver.prototype.bringToFront): Call through to InspectorFrontendHost.
+        (WebInspector.InspectorObserver.prototype.disconnectFromBackend): Ditto.
+        (WebInspector.InspectorObserver.prototype.reset): Not implemented.
+        (WebInspector.InspectorObserver.prototype.showPanel): Not implemented.
+        (WebInspector.InspectorObserver.prototype.startUserInitiatedDebugging): Not implemented.
+        (WebInspector.InspectorObserver.prototype.evaluateForTestInFrontend): Not implemented.
+        (WebInspector.InspectorObserver.prototype.inspect): Not implemented.
+        (WebInspector.InspectorObserver.prototype.didCreateWorker): Not implemented.
+        (WebInspector.InspectorObserver.prototype.didDestroyWorker): Not implemented.
+        * UserInterface/Main.html: Include InspectorObserver.js.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Removed the load event listener and call InspectorFrontendHost.loaded
+        here. Register an instance of WebInspector.InspectorObserver with InspectorBackend.
+
+2011-11-13  Timothy Hatcher  <timothy@apple.com>
+
+        Include InspectorBackend.js and start accepting messages from the backend.
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.dispatchNextQueuedMessageFromBackend): Added.
+        (WebInspector.dispatchMessageFromBackend): Added.
+
+2011-11-11  Timothy Hatcher  <timothy@apple.com>
+
+        Copy InspectorBackendStub.js from WebCore so it can be used by the new Web Inspector.
+
+        Reviewed by Joseph Pecoraro.
+
+        * WebInspectorUI.xcodeproj/project.pbxproj: Add new Copy WebCore Inspector Resources build phase.
+        * Configurations/Base.xcconfig: Add WEBCORE_RESOURCES_DIR.
+
+2011-11-10  Timothy Hatcher  <timothy@apple.com>
+
+        Add WebInspector.FlexibleSpaceNavigationItem and make the navigation bar use flex box layout.
+
+        This change will allow for controls that float to the right or left (like a close button when docked.)
+
+        Part of: <rdar://problem/10318699> Implement the interface structure for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Add flexible spaces on each side.
+        * UserInterface/NavigationBar.css:
+        (.navigation-bar): Use -webkit-box.
+        (.navigation-bar > .item): Added.
+        (.navigation-bar > .item.flexible-space): Added.
+        (.navigation-bar > .item.button): Remove styles that aren't needed anymore.
+        (.navigation-bar > .item.button > .glyph): Use auto margins to center the glyph since text-align no longer works.
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype._calculateMinimumWidth): Skip flexible spaces.
+        (WebInspector.FlexibleSpaceNavigationItem): Added.
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar.prototype.get navigationBar): Added.
+
+2011-11-10  Timothy Hatcher  <timothy@apple.com>
+
+        Rename WebInspector.NavigationItem to WebInspector.ButtonNavigationItem and make new
+        WebInspector.RadioButtonNavigationItem and WebInspector.NavigationItem classes.
+
+        This change allows for future non-radio-button items to be placed in a NavigationBar.
+
+        Part of: <rdar://problem/10318699> Implement the interface structure for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/NavigationBar.css:
+        (.navigation-bar > .item.button):
+        (.navigation-bar.collapsed > .item.button):
+        (.navigation-bar > .item.button > .glyph):
+        (.navigation-bar > .item.button.selected):
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype._mouseDown):
+        (WebInspector.NavigationBar.prototype._mouseMoved):
+        (WebInspector.NavigationItem):
+        (WebInspector.NavigationItem.prototype.get _classNames):
+        (WebInspector.ButtonNavigationItem):
+        (WebInspector.ButtonNavigationItem.prototype.generateStyleText):
+        (WebInspector.ButtonNavigationItem.prototype._additionalClassNames.WebInspector.ButtonNavigationItem.StyleClassName._canvasIdentifier):
+        (WebInspector.ButtonNavigationItem.prototype._generateImages._imageLoaded):
+        (WebInspector.ButtonNavigationItem.prototype._generateImages._createEmbossedCanvasImage):
+        (WebInspector.RadioButtonNavigationItem):
+        (WebInspector.RadioButtonNavigationItem.prototype.get selected):
+        (WebInspector.RadioButtonNavigationItem.prototype.set selected):
+        (WebInspector.RadioButtonNavigationItem.prototype.get active):
+        (WebInspector.RadioButtonNavigationItem.prototype.set active):
+        (WebInspector.RadioButtonNavigationItem.prototype.generateStyleText):
+        * UserInterface/Sidebar.js:
+        (WebInspector.SidebarPanel):
+
+2011-11-10  Timothy Hatcher  <timothy@apple.com>
+
+        Add support for resizing the sidebars in the new Web Inspector.
+
+        Part of: <rdar://problem/10318699> Implement the interface structure for the new Web Inspector design
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/Main.css:
+        (body): Prevent overflow.
+        (#navigation-sidebar): Moved border and background properties to Sidebar.css.
+        (#details-sidebar): Ditto.
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Specify the side for the sidebars.
+        * UserInterface/Sidebar.css:
+        (.sidebar.collapsed): Added.
+        (.sidebar > .resizer): Added.
+        (.sidebar.right > .resizer): Added.
+        (.sidebar.left > .resizer): Added.
+        (.sidebar.collapsed.right > .resizer): Added.
+        (.sidebar.collapsed.left > .resizer): Added.
+        (.sidebar.left): Added.
+        (.sidebar.left:not(.collapsed) > .navigation-bar): Added.
+        (body.window-inactive .sidebar.left > .navigation-bar): Added.
+        (.sidebar.right): Added.
+        (.sidebar.right:not(.collapsed) > .navigation-bar): Added.
+        (body.window-inactive .sidebar.right > .navigation-bar): Added.
+        * UserInterface/Sidebar.js:
+        (WebInspector.Sidebar): Added the side argument. Setup the resizer element.
+        (WebInspector.Sidebar.prototype.get minimumWidth): Added.
+        (WebInspector.Sidebar.prototype.get maximumWidth): Added.
+        (WebInspector.Sidebar.prototype.get width): Added.
+        (WebInspector.Sidebar.prototype.set width): Added.
+        (WebInspector.Sidebar.prototype.get collapsed): Added.
+        (WebInspector.Sidebar.prototype.set collapsed): Added.
+        (WebInspector.Sidebar.prototype.get side): Added.
+        (WebInspector.Sidebar.prototype._resizerMouseDown): Added.
+        (WebInspector.Sidebar.prototype._resizerMouseMoved): Added.
+        (WebInspector.Sidebar.prototype._resizerMouseUp): Added.
+
+2011-11-10  Timothy Hatcher  <timothy@apple.com>
+
+        Add minimumWidth and support for collapsing of the navigation bar items in the Web Inspector.
+
+        Part of: <rdar://problem/10318699> Implement the interface structure for the new Web Inspector design
+
+        Reviewed by John Sullivan and Joseph Pecoraro.
+
+        * UserInterface/NavigationBar.css:
+        (.navigation-bar): Prevent overflow.
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype.addNavigationItem): Set _minimumWidthNeedsRecalculated to true.
+        (WebInspector.NavigationBar.prototype.updateLayout): Added.
+        (WebInspector.NavigationBar.prototype.get minimumWidth): Added. Call _calculateMinimumWidth if needed.
+        (WebInspector.NavigationBar.prototype._calculateMinimumWidth): Added.
+
+2011-11-09  Timothy Hatcher  <timothy@apple.com>
+
+        Use child CSS selectors for the NavigationBar in the new Web Inspector.
+
+        Part of: <rdar://problem/10318699> Implement the interface structure for the new Web Inspector design
+
+        Reviewed by Jon Honeycutt.
+
+        * UserInterface/NavigationBar.css:
+        (.navigation-bar > .item):
+        (.navigation-bar.collapsed > .item):
+        (.navigation-bar > .item > .glyph):
+        (.navigation-bar > .item.selected):
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationItem.prototype.generateStyleText):
+
+2011-11-09  Timothy Hatcher  <timothy@apple.com>
+
+        Improve the window inactive appearance for the navigation bars and sidebars in the new Web Inspector.
+
+        Part of: <rdar://problem/10318699> Implement the interface structure for the new Web Inspector design
+
+        Reviewed by Jon Honeycutt.
+
+        * UserInterface/Main.css:
+        (body.window-inactive #navigation-sidebar > .navigation-bar): Added. Set a grey background color.
+        (#details-sidebar > .navigation-bar): Use a grey background color.
+        (body.window-inactive #details-sidebar > .navigation-bar): Added. Set a grey background color.
+        * UserInterface/NavigationBar.css:
+        (body.window-inactive .navigation-bar): Use a grey background color.
+        * UserInterface/Sidebar.css:
+        (body.window-inactive .sidebar): Slight tweak to the grey color to match Xcode.
+
+2011-11-09  Timothy Hatcher  <timothy@apple.com>
+
+        Layout the sidebars and basic structure of the new Web Inspector.
+
+        Part of: <rdar://problem/10318699> Implement the interface structure for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Main.css:
+        (body): Use flex-box, position to fill the viewport. Disabled user select and drag.
+        (#navigation-sidebar): Added.
+        (#navigation-sidebar > .navigation-bar): Added.
+        (#content): Added.
+        (#content-panels): Added.
+        (#quick-navigation-bar): Added.
+        (#details-sidebar): Added.
+        (#details-sidebar > .navigation-bar): Added.
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.contentLoaded): Added.
+        (WebInspector.windowLoaded): Added.
+
+2011-11-08  Timothy Hatcher  <timothy@apple.com>
+
+        Add basic Sidebar support for the new Web Inspector.
+
+        Part of: <rdar://problem/10318699> Implement the interface structure for the new Web Inspector design
+
+        Reviewed by Brian Weinstein and Joseph Pecoraro.
+
+        * UserInterface/Main.html: Include Sidebar.js and Sidebar.css.
+        * UserInterface/Main.js:
+        (windowLoaded): Change test code to use Sidebar classes.
+        * UserInterface/Sidebar.css: Added.
+        (.sidebar):
+        (body.window-inactive .sidebar):
+        (.sidebar > .navigation-bar):
+        (.sidebar > .panel):
+        (.sidebar > .panel.selected):
+        * UserInterface/Sidebar.js: Added.
+        (WebInspector.Sidebar):
+        (WebInspector.Sidebar.prototype.addSidebarPanel):
+        (WebInspector.Sidebar.prototype.get selectedSidebarPanel):
+        (WebInspector.Sidebar.prototype.set selectedSidebarPanel):
+        (WebInspector.Sidebar.prototype.get sidebarPanels):
+        (WebInspector.Sidebar.prototype.get element):
+        (WebInspector.Sidebar.prototype._navigationItemSelected):
+        (WebInspector.SidebarPanel):
+        (WebInspector.SidebarPanel.prototype.get identifier):
+        (WebInspector.SidebarPanel.prototype.get navigationItem):
+        (WebInspector.SidebarPanel.prototype.get element):
+        (WebInspector.SidebarPanel.prototype.get selected):
+        (WebInspector.SidebarPanel.prototype.set selected):
+
+2011-11-08  Timothy Hatcher  <timothy@apple.com>
+
+        Fire an event when a navigation item is selected in a navigation bar.
+
+        Part of: <rdar://problem/10318699> Implement the interface structure for the new Web Inspector design
+
+        Reviewed by Brian Weinstein.
+
+        * UserInterface/NavigationBar.js:
+        (WebInspector.NavigationBar.prototype.addNavigationItem): Remove unused arguments. (Drive by change.)
+        (WebInspector.NavigationBar.prototype.set selectedNavigationItem): Avoid doing work if the item is already
+        selected. Fire the event if the mouse isn't down.
+        (WebInspector.NavigationBar.prototype._mouseDown): Store the previous selected item.
+        (WebInspector.NavigationBar.prototype._mouseUp): Fire the event if the selected item is different.
+
+2011-10-31  Timothy Hatcher  <timothy@apple.com>
+
+        Add the navigation bar for the new Web Insector.
+
+        Part of: <rdar://problem/10318699> Implement the interface structure for the new Web Inspector design
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Images/NavigationItemBreakpoint.pdf: Added.
+        * UserInterface/Images/NavigationItemFile.pdf: Added.
+        * UserInterface/Images/NavigationItemLog.pdf: Added.
+        * UserInterface/Images/NavigationItemMagnifyingGlass.pdf: Added.
+        * UserInterface/Images/NavigationItemStopwatch.pdf: Added.
+        * UserInterface/Images/NavigationItemStorage.pdf: Added.
+        * UserInterface/Images/NavigationItemThreads.pdf: Added.
+        * UserInterface/Images/NavigationItemWarning.pdf: Added.
+        * UserInterface/Main.css: Added.
+        (*):
+        (body):
+        * UserInterface/Main.html:
+        * UserInterface/Main.js: Added.
+        (windowLoaded):
+        * UserInterface/NavigationBar.css: Added.
+        (.navigation-bar):
+        (body.window-inactive .navigation-bar):
+        (.navigation-bar .item):
+        (.navigation-bar.collapsed .item):
+        (.navigation-bar .item .glyph):
+        (.navigation-bar .item.selected):
+        (.navigation-bar:focus):
+        * UserInterface/NavigationBar.js: Added.
+        (WebInspector.NavigationBar):
+        (WebInspector.NavigationBar.prototype.addNavigationItem):
+        (WebInspector.NavigationBar.prototype.get selectedNavigationItem):
+        (WebInspector.NavigationBar.prototype.set selectedNavigationItem):
+        (WebInspector.NavigationBar.prototype.get navigationItems):
+        (WebInspector.NavigationBar.prototype.get element):
+        (WebInspector.NavigationBar.prototype._mouseDown):
+        (WebInspector.NavigationBar.prototype._mouseMoved):
+        (WebInspector.NavigationBar.prototype._mouseUp):
+        (WebInspector.NavigationBar.prototype._keyDown):
+        (WebInspector.NavigationBar.prototype._focus):
+        (WebInspector.NavigationBar.prototype._blur):
+        (WebInspector.NavigationBar.prototype._updateStyle):
+        (WebInspector.NavigationItem):
+        (WebInspector.NavigationItem.prototype.get identifier):
+        (WebInspector.NavigationItem.prototype.get displayName):
+        (WebInspector.NavigationItem.prototype.get image):
+        (WebInspector.NavigationItem.prototype.get element):
+        (WebInspector.NavigationItem.prototype.get selected):
+        (WebInspector.NavigationItem.prototype.set selected):
+        (WebInspector.NavigationItem.prototype.get active):
+        (WebInspector.NavigationItem.prototype.set active):
+        (WebInspector.NavigationItem.prototype.generateStyleText):
+        (WebInspector.NavigationItem.prototype.get _classNames):
+        (WebInspector.NavigationItem.prototype._canvasIdenitfier):
+        (WebInspector.NavigationItem.prototype._generateImages._imageLoaded):
+        (WebInspector.NavigationItem.prototype._generateImages._createEmbossedCanvasImage):
+        (WebInspector.NavigationItem.prototype._generateImages._drawImageShadow):
+        (WebInspector.NavigationItem.prototype._generateImages._invertMaskImage):
+        (WebInspector.NavigationItem.prototype._generateImages._applyImageMask):
+        (WebInspector.NavigationItem.prototype._generateImages):
+        * UserInterface/Object.js: Added.
+        (WebInspector.Object):
+        (WebInspector.Object.prototype.addEventListener):
+        (WebInspector.Object.prototype.removeEventListener):
+        (WebInspector.Object.prototype.removeAllListeners):
+        (WebInspector.Object.prototype.hasEventListeners):
+        (WebInspector.Object.prototype.dispatchEventToListeners):
+        (WebInspector.Event):
+        (WebInspector.Event.prototype.stopPropagation):
+        (WebInspector.Event.prototype.preventDefault):
+        * UserInterface/Utilities.js: Added.
+        (Node.prototype.enclosingNodeOrSelfWithClass):
+        (Node.prototype.enclosingNodeWithClass):
+        (Element.prototype.totalOffsetLeft):
+        (Element.prototype.totalOffsetTop):
+        * UserInterface/WebInspector.js: Added.
+
+2011-10-28  Timothy Hatcher  <timothy@apple.com>
+
+        Add a experiments menu item to enabled the new Web Inspector. There is only a placeholder
+        for the new inspector right now, so it isn't useful for most people yet.
+
+        This chnage depends on: https://webkit.org/b/71089
+
+        <rdar://problem/10318665> Make it possible to use a different front-end for the Web Inspector
+
+        Reviewed by John Sullivan.
+
+        * UserInterface/Main.html: Added.
diff --git a/Source/WebInspectorUI/Configurations/Base.xcconfig b/Source/WebInspectorUI/Configurations/Base.xcconfig
new file mode 100644
index 000000000..3432e17f6
--- /dev/null
+++ b/Source/WebInspectorUI/Configurations/Base.xcconfig
@@ -0,0 +1,64 @@
+COPY_PHASE_STRIP = NO;
+DEAD_CODE_STRIPPING = YES;
+DEBUG_INFORMATION_FORMAT = dwarf-with-dsym;
+FRAMEWORK_SEARCH_PATHS = $(STAGED_FRAMEWORKS_SEARCH_PATH) $(SYSTEM_LIBRARY_DIR)/PrivateFrameworks $(FRAMEWORK_SEARCH_PATHS_$(TARGET_MAC_OS_X_VERSION_MAJOR)) $(inherited);
+
+STAGED_FRAMEWORKS_SEARCH_PATH = $(STAGED_FRAMEWORKS_SEARCH_PATH_$(USE_STAGING_INSTALL_PATH));
+STAGED_FRAMEWORKS_SEARCH_PATH_YES = $(NEXT_ROOT)$(SYSTEM_LIBRARY_DIR)/StagedFrameworks/Safari;
+
+CLANG_CXX_LANGUAGE_STANDARD = gnu++0x;
+CLANG_CXX_LIBRARY = libc++;
+CLANG_WARN_CXX0X_EXTENSIONS = NO;
+CLANG_WARN__DUPLICATE_METHOD_MATCH = NO
+GCC_C_LANGUAGE_STANDARD = gnu99;
+GCC_DYNAMIC_NO_PIC = YES;
+GCC_ENABLE_CPP_EXCEPTIONS = NO;
+GCC_ENABLE_CPP_RTTI = NO;
+GCC_ENABLE_OBJC_EXCEPTIONS = YES;
+GCC_ENABLE_OBJC_GC = NO;
+GCC_FAST_OBJC_DISPATCH = YES;
+GCC_GENERATE_DEBUGGING_SYMBOLS = YES;
+GCC_OPTIMIZATION_LEVEL = s;
+GCC_PRECOMPILE_PREFIX_HEADER = NO;
+GCC_PREPROCESSOR_DEFINITIONS = $(inherited) $(ENGINEERING_BUILD_DEFINES) WEBKIT_VERSION_MIN_REQUIRED=WEBKIT_VERSION_LATEST;
+GCC_THREADSAFE_STATICS = NO;
+GCC_TREAT_WARNINGS_AS_ERRORS = YES;
+GCC_VERSION = com.apple.compilers.llvm.clang.1_0;
+GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+GCC_WARN_ABOUT_DEPRECATED_FUNCTIONS = NO;
+GCC_WARN_ABOUT_MISSING_NEWLINE = YES;
+GCC_WARN_ABOUT_MISSING_PROTOTYPES = YES;
+GCC_WARN_ABOUT_RETURN_TYPE = YES
+GCC_WARN_ABOUT_RETURN_TYPE = YES;
+GCC_WARN_NON_VIRTUAL_DESTRUCTOR = YES;
+GCC_WARN_UNINITIALIZED_AUTOS = YES
+GCC_WARN_UNUSED_VARIABLE = YES
+GCC_WARN_UNUSED_VARIABLE = YES;
+LINKER_DISPLAYS_MANGLED_NAMES = YES;
+WARNING_CFLAGS = -Wall -W -Wchar-subscripts -Wformat-security -Wmissing-format-attribute -Wpointer-arith -Wwrite-strings -Wno-format-y2k -Wno-unused-parameter -Wexit-time-destructors;
+
+ENGINEERING_BUILD_DEFINES = $(ENGINEERING_BUILD_DEFINES_$(ENGINEERING_BUILD));
+ENGINEERING_BUILD_DEFINES_1 = ENGINEERING_BUILD=1;
+
+TARGET_MAC_OS_X_VERSION_MAJOR = $(MAC_OS_X_VERSION_MAJOR);
+
+TARGETING_SAME_OS_X_VERSION = $(TARGETING_SAME_OS_X_VERSION_$(MAC_OS_X_VERSION_MAJOR)_$(TARGET_MAC_OS_X_VERSION_MAJOR));
+TARGETING_SAME_OS_X_VERSION_1070_1070 = YES;
+TARGETING_SAME_OS_X_VERSION_1080_1080 = YES;
+TARGETING_SAME_OS_X_VERSION_1090_1090 = YES;
+
+// Don't build against an SDK unless we're targeting an older OS version.
+SDKROOT = $(SDKROOT_TARGETING_SAME_OS_X_VERSION_$(TARGETING_SAME_OS_X_VERSION));
+SDKROOT_TARGETING_SAME_OS_X_VERSION_ = macosxinternal;
+
+VALID_ARCHS = $(ARCHS_STANDARD_32_64_BIT);
+
+WEBKIT_UMBRELLA_FRAMEWORKS_DIR = $(WEBKIT_UMBRELLA_FRAMEWORKS_DIR_$(USE_STAGING_INSTALL_PATH));
+WEBKIT_UMBRELLA_FRAMEWORKS_DIR_ = $(WEBKIT_UMBRELLA_FRAMEWORKS_DIR_NO);
+WEBKIT_UMBRELLA_FRAMEWORKS_DIR_NO = $(NEXT_ROOT)$(SYSTEM_LIBRARY_DIR)/Frameworks/WebKit.framework/Versions/A/Frameworks;
+WEBKIT_UMBRELLA_FRAMEWORKS_DIR_YES = $(NEXT_ROOT)$(SYSTEM_LIBRARY_DIR)/StagedFrameworks/Safari;
+
+WEBCORE_PRIVATE_HEADERS_DIR = $(WEBKIT_UMBRELLA_FRAMEWORKS_DIR)/WebCore.framework/PrivateHeaders;
+WEBCORE_RESOURCES_DIR = $(WEBKIT_UMBRELLA_FRAMEWORKS_DIR)/WebCore.framework/Resources;
+
+OTHER_LDFLAGS_VERSIONED_FRAMEWORK_PATH = -Wl,-dyld_env -Wl,DYLD_VERSIONED_FRAMEWORK_PATH=/System/Library/StagedFrameworks/Safari;
diff --git a/Source/WebInspectorUI/Configurations/DebugRelease.xcconfig b/Source/WebInspectorUI/Configurations/DebugRelease.xcconfig
new file mode 100644
index 000000000..25d03ff84
--- /dev/null
+++ b/Source/WebInspectorUI/Configurations/DebugRelease.xcconfig
@@ -0,0 +1,18 @@
+#include "Base.xcconfig"
+
+ARCHS = $(ARCHS_STANDARD_32_64_BIT);
+
+ONLY_ACTIVE_ARCH = YES;
+
+MACOSX_DEPLOYMENT_TARGET = $(MACOSX_DEPLOYMENT_TARGET_$(TARGET_MAC_OS_X_VERSION_MAJOR));
+MACOSX_DEPLOYMENT_TARGET_1070 = 10.7;
+MACOSX_DEPLOYMENT_TARGET_1080 = 10.8;
+MACOSX_DEPLOYMENT_TARGET_1090 = 10.9;
+
+ENGINEERING_BUILD = 1;
+
+GCC_WARN_ABOUT_DEPRECATED_FUNCTIONS = YES;
+DEBUG_INFORMATION_FORMAT = dwarf;
+RUN_CLANG_STATIC_ANALYZER = YES;
+
+WEBKIT_UMBRELLA_FRAMEWORKS_DIR = $(BUILT_PRODUCTS_DIR);
diff --git a/Source/WebInspectorUI/Configurations/Version.xcconfig b/Source/WebInspectorUI/Configurations/Version.xcconfig
new file mode 100644
index 000000000..a3d062f54
--- /dev/null
+++ b/Source/WebInspectorUI/Configurations/Version.xcconfig
@@ -0,0 +1,13 @@
+MAJOR_VERSION = 538;
+MINOR_VERSION = 1;
+TINY_VERSION = 0;
+FULL_VERSION = $(MAJOR_VERSION).$(MINOR_VERSION);
+
+// The system version prefix is based on the current system version.
+SYSTEM_VERSION_PREFIX = $(SYSTEM_VERSION_PREFIX_$(TARGET_MAC_OS_X_VERSION_MAJOR));
+SYSTEM_VERSION_PREFIX_1070 = 7;
+SYSTEM_VERSION_PREFIX_1080 = 8;
+SYSTEM_VERSION_PREFIX_1090 = 9;
+
+BUNDLE_VERSION = $(SYSTEM_VERSION_PREFIX)$(FULL_VERSION);
+SHORT_VERSION_STRING = $(SYSTEM_VERSION_PREFIX)$(MAJOR_VERSION);
diff --git a/Source/WebInspectorUI/Configurations/WebInspectorUIFramework.xcconfig b/Source/WebInspectorUI/Configurations/WebInspectorUIFramework.xcconfig
new file mode 100644
index 000000000..f44461e84
--- /dev/null
+++ b/Source/WebInspectorUI/Configurations/WebInspectorUIFramework.xcconfig
@@ -0,0 +1,22 @@
+#include "Version.xcconfig"
+
+DYLIB_COMPATIBILITY_VERSION = 1;
+DYLIB_CURRENT_VERSION = $(FULL_VERSION);
+FRAMEWORK_VERSION = A;
+
+INFOPLIST_FILE = Info.plist
+INSTALL_PATH = $(INSTALL_PATH_$(USE_STAGING_INSTALL_PATH));
+INSTALL_PATH_ = $(INSTALL_PATH_NO);
+INSTALL_PATH_NO = $(SYSTEM_LIBRARY_DIR)/PrivateFrameworks;
+INSTALL_PATH_YES = $(SYSTEM_LIBRARY_DIR)/StagedFrameworks/Safari;
+DYLIB_INSTALL_NAME_BASE = $(SYSTEM_LIBRARY_DIR)/PrivateFrameworks;
+PRODUCT_NAME = WebInspectorUI;
+
+GCC_DYNAMIC_NO_PIC = NO;
+GCC_PRECOMPILE_PREFIX_HEADER = YES;
+GCC_PREPROCESSOR_DEFINITIONS = $(DEBUG_DEFINES) $(inherited) FRAMEWORK_NAME=WebInspectorUI;
+
+COMBINE_INSPECTOR_RESOURCES = $(COMBINE_INSPECTOR_RESOURCES_$(CONFIGURATION));
+COMBINE_INSPECTOR_RESOURCES_Debug = NO;
+COMBINE_INSPECTOR_RESOURCES_Release = NO;
+COMBINE_INSPECTOR_RESOURCES_Production = YES;
diff --git a/Source/WebInspectorUI/Info.plist b/Source/WebInspectorUI/Info.plist
new file mode 100644
index 000000000..8bd35f299
--- /dev/null
+++ b/Source/WebInspectorUI/Info.plist
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleExecutable</key>
+	<string>${EXECUTABLE_NAME}</string>
+	<key>CFBundleIdentifier</key>
+	<string>com.apple.${PRODUCT_NAME:rfc1034identifier}</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>${PRODUCT_NAME}</string>
+	<key>CFBundlePackageType</key>
+	<string>FMWK</string>
+	<key>CFBundleShortVersionString</key>
+	<string>${SHORT_VERSION_STRING}</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>${BUNDLE_VERSION}</string>
+</dict>
+</plist>
diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
new file mode 100644
index 000000000..cf9f4c69b
--- /dev/null
+++ b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
diff --git a/Source/WebInspectorUI/Makefile b/Source/WebInspectorUI/Makefile
new file mode 100644
index 000000000..cb4c11a57
--- /dev/null
+++ b/Source/WebInspectorUI/Makefile
@@ -0,0 +1 @@
+include ../Makefile.shared
diff --git a/Source/WebInspectorUI/Scripts/combine-resources.pl b/Source/WebInspectorUI/Scripts/combine-resources.pl
new file mode 100755
index 000000000..3e0994db3
--- /dev/null
+++ b/Source/WebInspectorUI/Scripts/combine-resources.pl
@@ -0,0 +1,86 @@
+#!/usr/bin/perl -w
+
+use strict;
+use Getopt::Long;
+use File::Basename;
+use File::Path;
+
+our $inputDirectory;
+our $outputDirectory;
+our $outputScriptName;
+our $outputStylesheetName;
+our $derivedSourcesDirectory;
+our $htmlDirectory;
+our $htmlFile;
+
+GetOptions('output-dir=s' => \$outputDirectory,
+           'output-script-name=s' => \$outputScriptName,
+           'output-style-name=s' => \$outputStylesheetName,
+           'derived-sources-dir=s' => \$derivedSourcesDirectory,
+           'input-dir=s' => \$inputDirectory,
+           'input-html-dir=s' => \$htmlDirectory,
+           'input-html=s' => \$htmlFile);
+
+unless (defined $htmlFile and defined $derivedSourcesDirectory and defined $outputDirectory and defined $outputScriptName and defined $outputStylesheetName) {
+    print "Usage: $0 --input-html <path> --derived-sources-dir <path> --output-dir <path> --output-script-name <name> --output-style-name <name>\n";
+    exit;
+}
+
+$htmlDirectory = dirname($htmlFile) unless $htmlDirectory;
+
+our $htmlContents;
+
+{
+    local $/;
+    open HTML, $htmlFile or die;
+    $htmlContents = <HTML>;
+    close HTML;
+}
+
+$htmlContents =~ m/<head>(.*)<\/head>/si;
+our $headContents = $1;
+
+mkpath $outputDirectory;
+
+sub concatinateFiles($$$)
+{
+    my $filename = shift;
+    my $tagExpression = shift;
+    my $concatinatedTag = shift;
+    my $fileCount = 0;
+
+    open OUT, ">", "$outputDirectory/$filename" or die "Can't open $outputDirectory/$filename: $!";
+
+    while ($headContents =~ m/$tagExpression/gi) {
+        local $/;
+        open IN, "$htmlDirectory/$1" or open IN, "$derivedSourcesDirectory/$1" or die "Can't open $htmlDirectory/$1: $!";
+        print OUT "\n" if $fileCount++;
+        print OUT "/* $1 */\n\n";
+        print OUT <IN>;
+        close IN;
+    }
+
+    close OUT;
+
+    # Don't use \s so we can control the newlines we consume.
+    my $replacementExpression = "([\t ]*)" . $tagExpression . "[\t ]*\n+";
+
+    # Replace the first occurance with a token so we can inject the concatinated tag in the same place
+    # as the first file that got consolidated. This makes sure we preserve some order if there are other
+    # items in the head that we didn't consolidate.
+    $headContents =~ s/$replacementExpression/$1%CONCATINATED%\n/i;
+    $headContents =~ s/$replacementExpression//gi;
+    $headContents =~ s/%CONCATINATED%/$concatinatedTag/;
+}
+
+my $inputDirectoryPattern = "(?!External\/)[^\"]*";
+$inputDirectoryPattern = $inputDirectory . "\/[^\"]*" if $inputDirectory;
+
+concatinateFiles($outputStylesheetName, "<link rel=\"stylesheet\" href=\"($inputDirectoryPattern)\">", "<link rel=\"stylesheet\" href=\"$outputStylesheetName\">");
+concatinateFiles($outputScriptName, "<script src=\"($inputDirectoryPattern)\"><\/script>", "<script src=\"$outputScriptName\"></script>");
+
+$htmlContents =~ s/<head>.*<\/head>/<head>$headContents<\/head>/si;
+
+open HTML, ">", "$outputDirectory/" . basename($htmlFile) or die "Can't open $outputDirectory/" . basename($htmlFile) . ": $!";
+print HTML $htmlContents;
+close HTML;
diff --git a/Source/WebInspectorUI/Scripts/copy-user-interface-resources.sh b/Source/WebInspectorUI/Scripts/copy-user-interface-resources.sh
new file mode 100755
index 000000000..1c84832c0
--- /dev/null
+++ b/Source/WebInspectorUI/Scripts/copy-user-interface-resources.sh
@@ -0,0 +1,74 @@
+#!/bin/sh
+
+LICENSE=$(cat <<EOF
+/*
+ * Copyright (C) 2007-2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2009-2011 Google Inc. All rights reserved.
+ * Copyright (C) 2009-2010 Joseph Pecoraro. All rights reserved.
+ * Copyright (C) 2008 Matt Lilek. All rights reserved.
+ * Copyright (C) 2008-2009 Anthony Ricaud <rik@webkit.org>
+ * Copyright (C) 2009 280 North Inc. All Rights Reserved.
+ * Copyright (C) 2010 Nikita Vasilyev. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+EOF
+)
+
+CODE_MIRROR_LICENSE=$(echo "/*" && sed 's/^/ * /' "${SRCROOT}/UserInterface/External/CodeMirror/LICENSE" && echo " */")
+
+if [[ ${COMBINE_INSPECTOR_RESOURCES:=YES} == "YES" ]]; then
+    # Combine the JavaScript and CSS files in Production builds into single files (Main.js and Main.css).
+    "${SRCROOT}/Scripts/combine-resources.pl" --input-html "${SRCROOT}/UserInterface/Main.html" --derived-sources-dir "${DERIVED_SOURCES_DIR}" --output-dir "${DERIVED_SOURCES_DIR}" --output-script-name "Main.js" --output-style-name "Main.css"
+
+    # Combine the CodeMirror JavaScript and CSS files in Production builds into single files (CodeMirror.js and CodeMirror.css).
+    "${SRCROOT}/Scripts/combine-resources.pl" --input-dir "External/CodeMirror" --input-html "${DERIVED_SOURCES_DIR}/Main.html" --input-html-dir "${SRCROOT}/UserInterface" --derived-sources-dir "${DERIVED_SOURCES_DIR}" --output-dir "${DERIVED_SOURCES_DIR}" --output-script-name "CodeMirror.js" --output-style-name "CodeMirror.css"
+
+    # Remove console.assert calls from the Main.js file.
+    "${SRCROOT}/Scripts/remove-console-asserts.pl" --input-script "${DERIVED_SOURCES_DIR}/Main.js" --output-script "${DERIVED_SOURCES_DIR}/Main.js"
+
+    # Export the license into Main.js.
+    echo "${LICENSE}" > "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Main.js"
+
+    # Export the license into CodeMirror.js and CodeMirror.css.
+    echo "${CODE_MIRROR_LICENSE}" > "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/CodeMirror.js"
+    echo "${CODE_MIRROR_LICENSE}" > "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/CodeMirror.css"
+
+    # Minify the Main.js and Main.css files, with Main.js appending to the license that was exported above.
+    python "${SRCROOT}/Scripts/jsmin.py" <"${DERIVED_SOURCES_DIR}/Main.js" >>"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Main.js"
+    python "${SRCROOT}/Scripts/cssmin.py" <"${DERIVED_SOURCES_DIR}/Main.css" >"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Main.css"
+
+    # Minify the CodeMirror.js and CodeMirror.css files, appending to the license that was exported above.
+    python "${SRCROOT}/Scripts/jsmin.py" <"${DERIVED_SOURCES_DIR}/CodeMirror.js" >>"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/CodeMirror.js"
+    python "${SRCROOT}/Scripts/cssmin.py" <"${DERIVED_SOURCES_DIR}/CodeMirror.css" >>"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/CodeMirror.css"
+
+    # Copy over Main.html and the Images directory.
+    ditto "${DERIVED_SOURCES_DIR}/Main.html" "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Main.html"
+    ditto "${SRCROOT}/UserInterface/Images" "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Images"
+
+    # Copy over files that are dynamically loaded. The default InspectorBackendCommands.js and the Legacy directory.
+    ditto "${SRCROOT}/UserInterface/InspectorBackendCommands.js" "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/InspectorBackendCommands.js"
+    ditto "${SRCROOT}/UserInterface/Legacy" "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Legacy"
+else
+    # Keep the files separate for engineering builds.
+    ditto "${SRCROOT}/UserInterface" "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}"
+fi
diff --git a/Source/WebInspectorUI/Scripts/cssmin.py b/Source/WebInspectorUI/Scripts/cssmin.py
new file mode 100644
index 000000000..a0640eb28
--- /dev/null
+++ b/Source/WebInspectorUI/Scripts/cssmin.py
@@ -0,0 +1,44 @@
+#!/usr/bin/python
+
+# Copyright (C) 2013 Apple Inc. All rights reserved.
+#
+# Redistribution and use in source and binary forms, with or without
+# modification, are permitted provided that the following conditions
+# are met:
+# 1. Redistributions of source code must retain the above copyright
+#    notice, this list of conditions and the following disclaimer.
+# 2. Redistributions in binary form must reproduce the above copyright
+#    notice, this list of conditions and the following disclaimer in the
+#    documentation and/or other materials provided with the distribution.
+#
+# THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+# AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+# THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+# PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+# BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+# CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+# SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+# INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+# CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+# ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+# THE POSSIBILITY OF SUCH DAMAGE.
+
+import re
+
+def cssminify(css):
+    rules = (
+        (r"\/\*.*?\*\/", ""),          # delete comments
+        (r"\n", ""),                   # delete new lines
+        (r"\s+", " "),                 # change multiple spaces to one space
+        (r"\s?([;:{},+>])\s?", r"\1"), # delete space where it is not needed
+        (r";}", "}")                   # change ';}' to '}' because the semicolon is not needed
+    )
+
+    css = css.replace("\r\n", "\n")
+    for rule in rules:
+        css = re.compile(rule[0], re.MULTILINE | re.UNICODE | re.DOTALL).sub(rule[1], css)
+    return css
+
+if __name__ == "__main__":
+    import sys
+    sys.stdout.write(cssminify(sys.stdin.read()))
diff --git a/Source/WebInspectorUI/Scripts/jsmin.py b/Source/WebInspectorUI/Scripts/jsmin.py
new file mode 100644
index 000000000..2339f7d87
--- /dev/null
+++ b/Source/WebInspectorUI/Scripts/jsmin.py
@@ -0,0 +1,218 @@
+#!/usr/bin/python
+
+# This code is original from jsmin by Douglas Crockford, it was translated to
+# Python by Baruch Even. The original code had the following copyright and
+# license.
+#
+# /* jsmin.c
+#    2007-05-22
+#
+# Copyright (c) 2002 Douglas Crockford  (www.crockford.com)
+#
+# Permission is hereby granted, free of charge, to any person obtaining a copy of
+# this software and associated documentation files (the "Software"), to deal in
+# the Software without restriction, including without limitation the rights to
+# use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+# of the Software, and to permit persons to whom the Software is furnished to do
+# so, subject to the following conditions:
+#
+# The above copyright notice and this permission notice shall be included in all
+# copies or substantial portions of the Software.
+#
+# The Software shall be used for Good, not Evil.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+# SOFTWARE.
+# */
+
+from StringIO import StringIO
+
+def jsmin(js):
+    ins = StringIO(js)
+    outs = StringIO()
+    JavascriptMinify().minify(ins, outs)
+    str = outs.getvalue()
+    if len(str) > 0 and str[0] == '\n':
+        str = str[1:]
+    return str
+
+def isAlphanum(c):
+    """return true if the character is a letter, digit, underscore,
+           dollar sign, or non-ASCII character.
+    """
+    return ((c >= 'a' and c <= 'z') or (c >= '0' and c <= '9') or
+            (c >= 'A' and c <= 'Z') or c == '_' or c == '$' or c == '\\' or (c is not None and ord(c) > 126));
+
+class UnterminatedComment(Exception):
+    pass
+
+class UnterminatedStringLiteral(Exception):
+    pass
+
+class UnterminatedRegularExpression(Exception):
+    pass
+
+class JavascriptMinify(object):
+
+    def _outA(self):
+        self.outstream.write(self.theA)
+    def _outB(self):
+        self.outstream.write(self.theB)
+
+    def _get(self):
+        """return the next character from stdin. Watch out for lookahead. If
+           the character is a control character, translate it to a space or
+           linefeed.
+        """
+        c = self.theLookahead
+        self.theLookahead = None
+        if c == None:
+            c = self.instream.read(1)
+        if c >= ' ' or c == '\n':
+            return c
+        if c == '': # EOF
+            return '\000'
+        if c == '\r':
+            return '\n'
+        return ' '
+
+    def _peek(self):
+        self.theLookahead = self._get()
+        return self.theLookahead
+
+    def _next(self):
+        """get the next character, excluding comments. peek() is used to see
+           if an unescaped '/' is followed by a '/' or '*'.
+        """
+        c = self._get()
+        if c == '/' and self.theA != '\\':
+            p = self._peek()
+            if p == '/':
+                c = self._get()
+                while c > '\n':
+                    c = self._get()
+                return c
+            if p == '*':
+                c = self._get()
+                while 1:
+                    c = self._get()
+                    if c == '*':
+                        if self._peek() == '/':
+                            self._get()
+                            return ' '
+                    if c == '\000':
+                        raise UnterminatedComment()
+
+        return c
+
+    def _action(self, action):
+        """do something! What you do is determined by the argument:
+           1   Output A. Copy B to A. Get the next B.
+           2   Copy B to A. Get the next B. (Delete A).
+           3   Get the next B. (Delete B).
+           action treats a string as a single character. Wow!
+           action recognizes a regular expression if it is preceded by ( or , or =.
+        """
+        if action <= 1:
+            self._outA()
+
+        if action <= 2:
+            self.theA = self.theB
+            if self.theA == "'" or self.theA == '"':
+                while 1:
+                    self._outA()
+                    self.theA = self._get()
+                    if self.theA == self.theB:
+                        break
+                    if self.theA <= '\n':
+                        raise UnterminatedStringLiteral()
+                    if self.theA == '\\':
+                        self._outA()
+                        self.theA = self._get()
+
+
+        if action <= 3:
+            self.theB = self._next()
+            if self.theB == '/' and (self.theA == '(' or self.theA == ',' or
+                                     self.theA == '=' or self.theA == ':' or
+                                     self.theA == '[' or self.theA == '?' or
+                                     self.theA == '!' or self.theA == '&' or
+                                     self.theA == '|' or self.theA == ';' or
+                                     self.theA == '{' or self.theA == '}' or
+                                     self.theA == '\n'):
+                self._outA()
+                self._outB()
+                while 1:
+                    self.theA = self._get()
+                    if self.theA == '/':
+                        break
+                    elif self.theA == '\\':
+                        self._outA()
+                        self.theA = self._get()
+                    elif self.theA <= '\n':
+                        raise UnterminatedRegularExpression()
+                    self._outA()
+                self.theB = self._next()
+
+
+    def _jsmin(self):
+        """Copy the input to the output, deleting the characters which are
+           insignificant to JavaScript. Comments will be removed. Tabs will be
+           replaced with spaces. Carriage returns will be replaced with linefeeds.
+           Most spaces and linefeeds will be removed.
+        """
+        self.theA = '\n'
+        self._action(3)
+
+        while self.theA != '\000':
+            if self.theA == ' ':
+                if isAlphanum(self.theB):
+                    self._action(1)
+                else:
+                    self._action(2)
+            elif self.theA == '\n':
+                if self.theB in ['{', '[', '(', '+', '-']:
+                    self._action(1)
+                elif self.theB == ' ':
+                    self._action(3)
+                else:
+                    if isAlphanum(self.theB):
+                        self._action(1)
+                    else:
+                        self._action(2)
+            else:
+                if self.theB == ' ':
+                    if isAlphanum(self.theA):
+                        self._action(1)
+                    else:
+                        self._action(3)
+                elif self.theB == '\n':
+                    if self.theA in ['}', ']', ')', '+', '-', '"', '\'']:
+                        self._action(1)
+                    else:
+                        if isAlphanum(self.theA):
+                            self._action(1)
+                        else:
+                            self._action(3)
+                else:
+                    self._action(1)
+
+    def minify(self, instream, outstream):
+        self.instream = instream
+        self.outstream = outstream
+        self.theA = '\n'
+        self.theB = None
+        self.theLookahead = None
+
+        self._jsmin()
+        self.instream.close()
+
+if __name__ == '__main__':
+    import sys
+    jsm = JavascriptMinify()
+    jsm.minify(sys.stdin, sys.stdout)
diff --git a/Source/WebInspectorUI/Scripts/remove-console-asserts.pl b/Source/WebInspectorUI/Scripts/remove-console-asserts.pl
new file mode 100755
index 000000000..8c5430f0f
--- /dev/null
+++ b/Source/WebInspectorUI/Scripts/remove-console-asserts.pl
@@ -0,0 +1,31 @@
+#!/usr/bin/perl -w
+
+use strict;
+use Getopt::Long;
+use File::Copy qw/move/;
+use File::Temp qw/tempfile/;
+
+our $inputScriptFilename;
+our $outputScriptFilename;
+
+GetOptions('input-script=s' => \$inputScriptFilename,
+           'output-script=s' => \$outputScriptFilename);
+
+unless (defined $inputScriptFilename and defined $outputScriptFilename) {
+    print "Usage: $0 --input-script <path> --output-script <path>\n";
+    exit;
+}
+
+open IN, $inputScriptFilename or die;
+our ($out, $tempFilename) = tempfile(UNLINK => 0) or die;
+
+while (<IN>) {
+    s/\s*console\.assert\(.*\);\s*//g;
+    print $out $_;
+    print "WARNING: Multi-line console.assert on line $.: $_" if $_ =~ /\s*console\.assert\(/;
+}
+
+close $out;
+close IN;
+
+move $tempFilename, $outputScriptFilename or die "$!";
diff --git a/Source/WebInspectorUI/Scripts/update-codemirror-resources.rb b/Source/WebInspectorUI/Scripts/update-codemirror-resources.rb
new file mode 100755
index 000000000..608603024
--- /dev/null
+++ b/Source/WebInspectorUI/Scripts/update-codemirror-resources.rb
@@ -0,0 +1,67 @@
+#!/usr/bin/ruby
+
+require 'fileutils'
+
+if ARGV.size != 1
+  puts "usage: #{File.basename $0} <codemirror-repo-path>"
+  exit 1
+end
+
+def verify_code_mirror_repository_path(path)
+  if !File.directory? path
+    puts "ERROR: Provided CodeMirror path is not a directory."
+    exit 1
+  end
+
+  Dir.chdir(path) do
+    results = `git config --list | grep 'marijnh/CodeMirror\.git'`
+    if $?.exitstatus != 0 || results.split("\n").empty?
+      puts "ERROR: Provided CodeMirror path does not appear to be a CodeMirror checkout."
+      exit 1
+    end
+  end
+end
+
+code_mirror_repository_path = File.expand_path ARGV[0]
+verify_code_mirror_repository_path code_mirror_repository_path
+
+web_inspector_user_interface_path = File.expand_path File.join(File.dirname(__FILE__), "../UserInterface")
+web_inspector_code_mirror_resources_path = File.join web_inspector_user_interface_path, "/External/CodeMirror"
+
+CODE_MIRROR_FILES_TO_COPY = %w(
+  addon/comment/comment.js
+  addon/display/placeholder.js
+  addon/edit/closebrackets.js
+  addon/edit/matchbrackets.js
+  addon/mode/overlay.js
+  addon/runmode/runmode.js
+  addon/search/searchcursor.js
+  lib/codemirror.css
+  lib/codemirror.js
+  mode/clojure/clojure.js
+  mode/coffeescript/coffeescript.js
+  mode/css/css.js
+  mode/htmlmixed/htmlmixed.js
+  mode/javascript/javascript.js
+  mode/less/less.js
+  mode/livescript/livescript.js
+  mode/sass/sass.js
+  mode/sql/sql.js
+  mode/xml/xml.js
+)
+
+all_success = true
+
+CODE_MIRROR_FILES_TO_COPY.each do |subpath|
+  from_path = File.join code_mirror_repository_path, subpath
+  to_path = File.join web_inspector_code_mirror_resources_path, File.basename(subpath)
+  begin
+    puts "Copying #{File.basename(subpath)}..."
+    FileUtils.cp from_path, to_path
+  rescue Exception => e
+    puts "WARNING: #{e}"
+    all_success = false
+  end
+end
+
+exit all_success ? 0 : 1
diff --git a/Source/WebInspectorUI/Scripts/update-pretty-printer.rb b/Source/WebInspectorUI/Scripts/update-pretty-printer.rb
new file mode 100755
index 000000000..fb0f78a4b
--- /dev/null
+++ b/Source/WebInspectorUI/Scripts/update-pretty-printer.rb
@@ -0,0 +1,60 @@
+#!/usr/bin/ruby
+
+require 'fileutils'
+
+def usage
+  puts "usage: #{File.basename $0} <destination-to-update>"
+  puts
+  puts "<destination-to-update> values:"
+  puts
+  puts "  Tools         - Copy the UserInterface files to the Tools directory"
+  puts "  UserInterface - Copy the Tools files to the UserInterface directory"
+  exit 1
+end
+
+if ARGV.size != 1
+  usage
+end
+
+destination = ARGV[0]
+if destination != "Tools" && destination != "UserInterface"
+  usage
+end
+
+# Copy the formatter and CodeMirror files from UserInterface to Tools.
+USER_INTERFACE_TO_TOOLS_MAP = {
+  "UserInterface/CodeMirrorFormatters.js"    => "Tools/PrettyPrinting/CodeMirrorFormatters.js",
+  "UserInterface/Formatter.js"               => "Tools/PrettyPrinting/Formatter.js",
+  "UserInterface/FormatterContentBuilder.js" => "Tools/PrettyPrinting/FormatterContentBuilder.js",
+
+  "UserInterface/External/CodeMirror/codemirror.css" => "Tools/PrettyPrinting/codemirror.css",
+  "UserInterface/External/CodeMirror/codemirror.js"  => "Tools/PrettyPrinting/codemirror.js",
+  "UserInterface/External/CodeMirror/javascript.js"  => "Tools/PrettyPrinting/javascript.js",
+  "UserInterface/External/CodeMirror/css.js"         => "Tools/PrettyPrinting/css.js",
+}
+
+# Copy only the formatter files from Tools to UserInterface.
+TOOLS_TO_USER_INTERFACE_MAP = {
+  "Tools/PrettyPrinting/CodeMirrorFormatters.js"    => "UserInterface/CodeMirrorFormatters.js",
+  "Tools/PrettyPrinting/Formatter.js"               => "UserInterface/Formatter.js",
+  "Tools/PrettyPrinting/FormatterContentBuilder.js" => "UserInterface/FormatterContentBuilder.js"
+}
+
+web_inspector_path = File.expand_path File.join(File.dirname(__FILE__), "..")
+map = destination == "Tools" ? USER_INTERFACE_TO_TOOLS_MAP : TOOLS_TO_USER_INTERFACE_MAP
+
+all_success = true
+
+map.each do |from, to|
+  from_path = File.join web_inspector_path, from
+  to_path = File.join web_inspector_path, to
+  begin
+    puts "Copying #{from} to #{to}..."
+    FileUtils.cp from_path, to_path
+  rescue Exception => e
+    puts "WARNING: #{e}"
+    all_success = false
+  end
+end
+
+exit all_success ? 0 : 1
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/CodeMirrorFormatters.js b/Source/WebInspectorUI/Tools/PrettyPrinting/CodeMirrorFormatters.js
new file mode 100644
index 000000000..81c8155e7
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/CodeMirrorFormatters.js
@@ -0,0 +1,403 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// In the inspector token types have been modified to include extra mode information
+// after the actual token type. So we can't do token === "foo". So instead we do
+// /\bfoo\b/.test(token).
+
+CodeMirror.extendMode("javascript", {
+    shouldHaveSpaceBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!token) {
+            if (content === "(") // Most keywords like "if (" but not "function(" or "typeof(".
+                return lastToken && /\bkeyword\b/.test(lastToken) && (lastContent !== "function" && lastContent !== "typeof" && lastContent !== "instanceof");
+            if (content === ":") // Ternary.
+                return (state.lexical.type === "stat" || state.lexical.type === ")");
+            if (content === "!") // Unary ! should not be confused with "!=".
+                return false;
+            return "+-/*&&||!===+=-=>=<=?".indexOf(content) >= 0; // Operators.
+        }
+
+        if (isComment)
+            return true;
+
+        if (/\bkeyword\b/.test(token)) { // Most keywords require spaces before them, unless a '}' can come before it.
+            if (content === "else" || content === "catch" || content === "finally")
+                return lastContent === "}";
+            return false;
+        }
+
+        return false;
+    },
+
+    shouldHaveSpaceAfterLastToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (lastToken && /\bkeyword\b/.test(lastToken)) {  // Most keywords require spaces after them, unless a '{' or ';' can come after it.
+            if (lastContent === "else")
+                return true;
+            if (lastContent === "catch")
+                return true;
+            if (lastContent === "return")
+                return content !== ";";
+            if (lastContent === "throw")
+                return true;
+            if (lastContent === "try")
+                return true;
+            if (lastContent === "finally")
+                return true;
+            if (lastContent === "do")
+                return true;
+            return false;
+        }
+
+        if (lastToken && /\bcomment\b/.test(lastToken)) // Embedded /* comment */.
+            return true;
+        if (lastContent === ")") // "){".
+            return content === "{";
+        if (lastContent === ";") // In for loop.
+            return state.lexical.type === ")";
+        if (lastContent === "!") // Unary ! should not be confused with "!=".
+            return false;
+
+        return ",+-/*&&||:!===+=-=>=<=?".indexOf(lastContent) >= 0; // Operators.
+    },
+
+    newlinesAfterToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!token) {
+            if (content === ",") // In object literals, like in {a:1,b:2}, but not in param lists or vardef lists.
+                return state.lexical.type === "}" ? 1 : 0;
+            if (content === ";") // Everywhere except in for loop conditions.
+                return state.lexical.type !== ")" ? 1 : 0;
+            if (content === ":" && state.lexical.type === "}" && state.lexical.prev && state.lexical.prev.type === "form") // Switch case/default.
+                return 1;
+            return content.length === 1 && "{}".indexOf(content) >= 0 ? 1 : 0; // After braces.
+        }
+
+        if (isComment)
+            return 1;
+
+        return 0;
+    },
+
+    removeLastNewline: function(lastToken, lastContent, token, state, content, isComment, firstTokenOnLine)
+    {
+        if (!token) {
+            if (content === "}") // "{}".
+                return lastContent === "{";
+            if (content === ";") // "x = {};" or ";;".
+                return "};".indexOf(lastContent) >= 0;
+            if (content === ":") // Ternary.
+                return lastContent === "}" && (state.lexical.type === "stat" || state.lexical.type === ")");
+            if (",().".indexOf(content) >= 0) // "})", "}.bind", "function() { ... }()", or "}, false)".
+                return lastContent === "}";
+            return false;
+        }
+
+        if (isComment) { // Comment after semicolon.
+            if (!firstTokenOnLine && lastContent === ";")
+                return true;
+            return false;
+        }
+
+        if (/\bkeyword\b/.test(token)) {
+            if (content === "else" || content === "catch" || content === "finally") // "} else", "} catch", "} finally"
+                return lastContent === "}";
+            return false;
+        }
+
+        return false;
+    },
+
+    indentAfterToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return content === "{" || content === "case" || content === "default";
+    },
+
+    newlineBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (state._jsPrettyPrint.shouldIndent)
+            return true;
+
+        return content === "}" && lastContent !== "{"; // "{}"
+    },
+
+    indentBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (state._jsPrettyPrint.shouldIndent)
+            return true;
+
+        return false;
+    },
+
+    dedentsBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        var dedent = 0;
+
+        if (state._jsPrettyPrint.shouldDedent)
+            dedent += state._jsPrettyPrint.dedentSize;
+
+        if (!token && content === "}")
+            dedent += 1;
+        else if (token && /\bkeyword\b/.test(token) && (content === "case" || content === "default"))
+            dedent += 1;
+
+        return dedent;
+    },
+
+    modifyStateForTokenPre: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!state._jsPrettyPrint) {
+            state._jsPrettyPrint = {
+                indentCount: 0,       // How far have we indented because of single statement blocks.
+                shouldIndent: false,  // Signal we should indent on entering a single statement block.
+                shouldDedent: false,  // Signal we should dedent on leaving a single statement block.
+                dedentSize: 0,        // How far we should dedent when leaving a single statement block.
+                lastIfIndentCount: 0, // Keep track of the indent the last time we saw an if without braces.
+                openBraceStartMarkers: [],  // Keep track of non-single statement blocks.
+                openBraceTrackingCount: -1, // Keep track of "{" and "}" in non-single statement blocks.
+            };
+        }
+
+        // - Entering:
+        //   - Preconditions:
+        //     - last lexical was a "form" we haven't encountered before
+        //     - last content was ")", "else", or "do"
+        //     - current lexical is not ")" (in an expression or condition)
+        //   - Cases:
+        //     1. "{"
+        //       - indent +0
+        //       - save this indent size so when we encounter the "}" we know how far to dedent
+        //     2. "else if"
+        //       - indent +0 and do not signal to add a newline and indent
+        //       - mark the last if location so when we encounter an "else" we know how far to dedent
+        //       - mark the lexical state so we know we are inside a single statement block
+        //     3. Token without brace.
+        //       - indent +1 and signal to add a newline and indent
+        //       - mark the last if location so when we encounter an "else" we know how far to dedent
+        //       - mark the lexical state so we know we are inside a single statement block
+        if (!isComment && state.lexical.prev && state.lexical.prev.type === "form" && !state.lexical.prev._jsPrettyPrintMarker && (lastContent === ")" || lastContent === "else" || lastContent === "do") && (state.lexical.type !== ")")) {
+            if (content === "{") {
+                // Save the state at the opening brace so we can return to it when we see "}".
+                var savedState = {indentCount:state._jsPrettyPrint.indentCount, openBraceTrackingCount:state._jsPrettyPrint.openBraceTrackingCount};
+                state._jsPrettyPrint.openBraceStartMarkers.push(savedState);
+                state._jsPrettyPrint.openBraceTrackingCount = 1;
+            } else if (state.lexical.type !== "}") {
+                // Increase the indent count. Signal for a newline and indent if needed.
+                if (!(lastContent === "else" && content === "if")) {
+                    state._jsPrettyPrint.indentCount++;
+                    state._jsPrettyPrint.shouldIndent = true;
+                }
+                state.lexical.prev._jsPrettyPrintMarker = true;
+                if (state._jsPrettyPrint.enteringIf)
+                    state._jsPrettyPrint.lastIfIndentCount = state._jsPrettyPrint.indentCount - 1;
+            }
+        }
+
+        // - Leaving:
+        //   - Preconditions:
+        //     - we must be indented
+        //     - ignore ";", wait for the next token instead.
+        //   - Cases:
+        //     1. "else"
+        //       - dedent to the last "if"
+        //     2. "}" and all braces we saw are balanced
+        //       - dedent to the last "{"
+        //     3. Token without a marker on the stack
+        //       - dedent all the way
+        else if (state._jsPrettyPrint.indentCount) {
+            console.assert(!state._jsPrettyPrint.shouldDedent);
+            console.assert(!state._jsPrettyPrint.dedentSize);
+
+            // Track "{" and "}" to know when the "}" is really closing a block.
+            if (!isComment) {
+                if (content === "{")
+                    state._jsPrettyPrint.openBraceTrackingCount++;
+                else if (content === "}")
+                    state._jsPrettyPrint.openBraceTrackingCount--;
+            }
+
+            if (content === ";") {
+                // Ignore.
+            } else if (content === "else") {
+                // Dedent to the last "if".
+                if (lastContent !== "}") {
+                    state._jsPrettyPrint.shouldDedent = true;
+                    state._jsPrettyPrint.dedentSize = state._jsPrettyPrint.indentCount - state._jsPrettyPrint.lastIfIndentCount;
+                    state._jsPrettyPrint.lastIfIndentCount = 0;
+                }
+            } else if (content === "}" && !state._jsPrettyPrint.openBraceTrackingCount && state._jsPrettyPrint.openBraceStartMarkers.length) {
+                // Dedent to the last "{".
+                var savedState = state._jsPrettyPrint.openBraceStartMarkers.pop();
+                state._jsPrettyPrint.shouldDedent = true;
+                state._jsPrettyPrint.dedentSize = state._jsPrettyPrint.indentCount - savedState.indentCount;
+                state._jsPrettyPrint.openBraceTrackingCount = savedState.openBraceTrackingCount;
+            } else {
+                // Dedent all the way.
+                var shouldDedent = true;
+                var lexical = state.lexical.prev;
+                while (lexical) {
+                    if (lexical._jsPrettyPrintMarker) {
+                        shouldDedent = false;
+                        break;
+                    }
+                    lexical = lexical.prev;
+                }
+                if (shouldDedent) {
+                    state._jsPrettyPrint.shouldDedent = true;
+                    state._jsPrettyPrint.dedentSize = state._jsPrettyPrint.indentCount;
+                }
+            }
+        }
+
+        // Signal for when we will be entering an if.
+        if (token && state.lexical.type === "form" && state.lexical.prev && state.lexical.prev !== "form" && /\bkeyword\b/.test(token))
+            state._jsPrettyPrint.enteringIf = (content === "if");
+    },
+
+    modifyStateForTokenPost: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (state._jsPrettyPrint.shouldIndent)
+            state._jsPrettyPrint.shouldIndent = false;
+
+        if (state._jsPrettyPrint.shouldDedent) {
+            state._jsPrettyPrint.indentCount -= state._jsPrettyPrint.dedentSize;
+            state._jsPrettyPrint.dedentSize = 0;
+            state._jsPrettyPrint.shouldDedent = false;
+        }
+    }
+});
+
+CodeMirror.extendMode("css-base", {
+    shouldHaveSpaceBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!token) {
+            if (content === "{")
+                return true;
+            return false;
+        }
+
+        if (isComment)
+            return true;
+
+        if (/\bkeyword\b/.test(token)) {
+            if (content.charAt(0) === "!") // "!important".
+                return true;
+            return false;
+        }
+
+        return false;
+    },
+
+    shouldHaveSpaceAfterLastToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!lastToken) {
+            if (lastContent === ",")
+                return true;
+            return false;
+        }
+
+        if (/\boperator\b/.test(lastToken)) {
+            if (lastContent === ":") // Space in "prop: value" but not in a selectors "a:link" or "div::after" or media queries "(max-device-width:480px)".
+                return state.stack.lastValue === "propertyValue";
+            return false;
+        }
+
+        if (/\bcomment\b/.test(lastToken))
+            return true;
+
+        return false;
+    },
+
+    newlinesAfterToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!token) {
+            if (content === ";")
+                return 1;
+            if (content === ",") { // "a,b,c,...,z{}" rule list at top level or in @media top level and only if the line length will be large.
+                if ((!state.stack.length || state.stack.lastValue === "@media{") && state._cssPrettyPrint.lineLength > 60) {
+                    state._cssPrettyPrint.lineLength = 0;
+                    return 1;
+                }
+                return 0;
+            }
+            if (content === "{")
+                return 1;
+            if (content === "}") // 2 newlines between rule declarations.
+                return 2;
+            return 0;
+        }
+
+        if (isComment)
+            return 1;
+
+        return 0;
+    },
+
+    removeLastNewline: function(lastToken, lastContent, token, state, content, isComment, firstTokenOnLine)
+    {
+        if (isComment) { // Comment after semicolon.
+            if (!firstTokenOnLine && lastContent === ";")
+                return true;
+            return false;
+        }
+
+        return content === "}" && (lastContent === "{" || lastContent === "}"); // "{}" and "}\n}" when closing @media.
+    },
+
+    indentAfterToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return content === "{";
+    },
+
+    newlineBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return content === "}" && (lastContent !== "{" && lastContent !== "}"); // "{}" and "}\n}" when closing @media.
+    },
+
+    indentBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return false;
+    },
+
+    dedentsBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return content === "}" ? 1 : 0;
+    },
+
+    modifyStateForTokenPost: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!state._cssPrettyPrint)
+            state._cssPrettyPrint = {lineLength: 0};
+
+        // In order insert newlines in selector lists we need keep track of the length of the current line.
+        // This isn't exact line length, only the builder knows that, but it is good enough to get an idea.
+        // If we are at a top level, keep track of the current line length, otherwise we reset to 0.
+        if (!state.stack.length || state.stack.lastValue === "@media{")
+            state._cssPrettyPrint.lineLength += content.length;
+        else
+            state._cssPrettyPrint.lineLength = 0;
+    }
+});
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/Formatter.js b/Source/WebInspectorUI/Tools/PrettyPrinting/Formatter.js
new file mode 100644
index 000000000..524e50d5a
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/Formatter.js
@@ -0,0 +1,164 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+function Formatter(codeMirror, builder)
+{
+    console.assert(codeMirror);
+    console.assert(builder);
+
+    this._codeMirror = codeMirror;
+    this._builder = builder;
+
+    this._lastToken = null;
+    this._lastContent = "";
+};
+
+Formatter.prototype = {
+    constructor: Formatter,
+
+    // Public
+
+    format: function(from, to)
+    {
+        console.assert(this._builder.originalContent === null);
+        if (this._builder.originalContent !== null)
+            return;
+
+        var outerMode = this._codeMirror.getMode();
+        var content = this._codeMirror.getRange(from, to);
+        var state = CodeMirror.copyState(outerMode, this._codeMirror.getTokenAt(from).state);
+        this._builder.setOriginalContent(content);
+
+        var lineOffset = 0;
+        var lines = content.split("\n");
+        for (var i = 0; i < lines.length; ++i) {
+            var line = lines[i];
+            var startOfNewLine = true;
+            var firstTokenOnLine = true;
+            var stream = new CodeMirror.StringStream(line);
+            while (!stream.eol()) {
+                var innerMode = CodeMirror.innerMode(outerMode, state);
+                var token = outerMode.token(stream, state);
+                var isWhiteSpace = token === null && /^\s*$/.test(stream.current());
+                this._handleToken(innerMode.mode, token, state, stream, lineOffset + stream.start, isWhiteSpace, startOfNewLine, firstTokenOnLine);
+                stream.start = stream.pos;
+                startOfNewLine = false;
+                if (firstTokenOnLine && !isWhiteSpace)
+                    firstTokenOnLine = false;
+            }
+
+            if (firstTokenOnLine)
+                this._handleEmptyLine();
+
+            lineOffset += line.length + 1; // +1 for the "\n" removed in split.
+            this._handleLineEnding(lineOffset - 1); // -1 for the index of the "\n".
+        }
+
+        this._builder.finish();
+    },
+
+    // Private
+
+    _handleToken: function(mode, token, state, stream, originalPosition, isWhiteSpace, startOfNewLine, firstTokenOnLine)
+    {
+        // String content of the token.
+        var content = stream.current();
+
+        // Start of a new line. Insert a newline to be safe if code was not-ASI safe. These are collapsed.
+        if (startOfNewLine)
+            this._builder.appendNewline();
+
+        // Whitespace. Collapse to a single space.
+        if (isWhiteSpace) {
+            this._builder.appendSpace();
+            return;
+        }
+
+        // Avoid some hooks for content in comments.
+        var isComment = token && /\bcomment\b/.test(token);
+
+        if (mode.modifyStateForTokenPre)
+            mode.modifyStateForTokenPre(this._lastToken, this._lastContent, token, state, content, isComment);
+
+        // Should we remove the last newline?
+        if (this._builder.lastTokenWasNewline && mode.removeLastNewline(this._lastToken, this._lastContent, token, state, content, isComment, firstTokenOnLine))
+            this._builder.removeLastNewline();
+
+        // Add whitespace after the last token?
+        if (!this._builder.lastTokenWasWhitespace && mode.shouldHaveSpaceAfterLastToken(this._lastToken, this._lastContent, token, state, content, isComment))
+            this._builder.appendSpace();
+
+        // Add whitespace before this token?
+        if (!this._builder.lastTokenWasWhitespace && mode.shouldHaveSpaceBeforeToken(this._lastToken, this._lastContent, token, state, content, isComment))
+            this._builder.appendSpace();
+
+        // Should we dedent before this token?
+        var dedents = mode.dedentsBeforeToken(this._lastToken, this._lastContent, token, state, content, isComment);
+        while (dedents-- > 0)
+            this._builder.dedent();
+
+        // Should we add a newline before this token?
+        if (mode.newlineBeforeToken(this._lastToken, this._lastContent, token, state, content, isComment))
+            this._builder.appendNewline();
+
+        // Should we indent before this token?
+        if (mode.indentBeforeToken(this._lastToken, this._lastContent, token, state, content, isComment))
+            this._builder.indent();
+
+        // Append token.
+        this._builder.appendToken(content, originalPosition);
+
+        // Let the pretty printer update any state it keeps track of.
+        if (mode.modifyStateForTokenPost)
+            mode.modifyStateForTokenPost(this._lastToken, this._lastContent, token, state, content, isComment);
+
+        // Should we indent or dedent after this token?
+        if (!isComment && mode.indentAfterToken(this._lastToken, this._lastContent, token, state, content, isComment))
+            this._builder.indent();
+
+        // Should we add newlines after this token?
+        var newlines = mode.newlinesAfterToken(this._lastToken, this._lastContent, token, state, content, isComment);
+        if (newlines)
+            this._builder.appendMultipleNewlines(newlines);
+
+        // Record this token as the last token.
+        this._lastToken = token;
+        this._lastContent = content;
+    },
+
+    _handleEmptyLine: function()
+    {
+        // Preserve original whitespace only lines by adding a newline.
+        // However, don't do this if the builder just added multiple newlines.
+        if (!(this._builder.lastTokenWasNewline && this._builder.lastNewlineAppendWasMultiple))
+            this._builder.appendNewline(true);
+    },
+
+    _handleLineEnding: function(originalNewLinePosition)
+    {
+        // Record the original line ending.
+        this._builder.addOriginalLineEnding(originalNewLinePosition);
+    }
+};
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/FormatterContentBuilder.js b/Source/WebInspectorUI/Tools/PrettyPrinting/FormatterContentBuilder.js
new file mode 100644
index 000000000..4596880cb
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/FormatterContentBuilder.js
@@ -0,0 +1,229 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+function FormatterContentBuilder(mapping, originalLineEndings, formattedLineEndings, originalOffset, formattedOffset, indentString)
+{
+    this._originalContent = null;
+    this._formattedContent = [];
+    this._formattedContentLength = 0;
+
+    this._startOfLine = true;
+    this.lastTokenWasNewline = false;
+    this.lastTokenWasWhitespace = false;
+    this.lastNewlineAppendWasMultiple = false;
+
+    this._indent = 0;
+    this._indentString = indentString;
+    this._indentCache = ["", this._indentString];
+
+    this._mapping = mapping;
+    this._originalLineEndings = originalLineEndings || [];
+    this._formattedLineEndings = formattedLineEndings || [];
+    this._originalOffset = originalOffset || 0;
+    this._formattedOffset = formattedOffset || 0;
+
+    this._lastOriginalPosition = 0;
+    this._lastFormattedPosition = 0;
+}
+
+FormatterContentBuilder.prototype = {
+    constructor: FormatterContentBuilder,
+
+    // Public
+
+    get originalContent()
+    {
+        return this._originalContent;
+    },
+
+    get formattedContent()
+    {
+        var formatted = this._formattedContent.join("");
+        console.assert(formatted.length === this._formattedContentLength);
+        return formatted;
+    },
+
+    get mapping()
+    {
+        return this._mapping;
+    },
+
+    get originalLineEndings()
+    {
+        return this._originalLineEndings;
+    },
+
+    get formattedLineEndings()
+    {
+        return this._formattedLineEndings;
+    },
+
+    setOriginalContent: function(originalContent)
+    {
+        console.assert(!this._originalContent);
+        this._originalContent = originalContent;
+    },
+
+    appendToken: function(string, originalPosition)
+    {
+        if (this._startOfLine)
+            this._appendIndent();
+
+        this._addMappingIfNeeded(originalPosition);
+
+        this._append(string);
+        this._startOfLine = false;
+        this.lastTokenWasNewline = false;
+        this.lastTokenWasWhitespace = false;
+    },
+
+    appendSpace: function()
+    {
+        if (!this._startOfLine) {
+            this._append(" ");
+            this.lastTokenWasNewline = false;
+            this.lastTokenWasWhitespace = true;
+        }
+    },
+
+    appendNewline: function(force)
+    {
+        if ((!this.lastTokenWasNewline && !this._startOfLine) || force) {
+            this._append("\n");
+            this._addFormattedLineEnding();
+            this._startOfLine = true;
+            this.lastTokenWasNewline = true;
+            this.lastTokenWasWhitespace = false;
+            this.lastNewlineAppendWasMultiple = false;
+        }
+    },
+
+    appendMultipleNewlines: function(newlines)
+    {
+        console.assert(newlines > 0);
+
+        var wasMultiple = newlines > 1;
+
+        while (newlines-- > 0)
+            this.appendNewline(true);
+
+        if (wasMultiple)
+            this.lastNewlineAppendWasMultiple = true;
+    },
+
+    removeLastNewline: function()
+    {
+        console.assert(this.lastTokenWasNewline);
+        console.assert(this._formattedContent.lastValue === "\n");
+        if (this.lastTokenWasNewline) {
+            this._popNewLine();
+            this._startOfLine = false;
+            this.lastTokenWasNewline = false;
+            this.lastTokenWasWhitespace = false;
+        }
+    },
+
+    indent: function()
+    {
+        ++this._indent;
+    },
+
+    dedent: function()
+    {
+        --this._indent;
+
+        console.assert(this._indent >= 0);
+        if (this._indent < 0)
+            this._indent = 0;
+    },
+
+    addOriginalLineEnding: function(originalPosition)
+    {
+        this._originalLineEndings.push(originalPosition);
+    },
+
+    finish: function()
+    {
+        this.appendNewline();
+    },
+
+    // Private
+
+    _popNewLine: function()
+    {
+        var removed = this._formattedContent.pop();
+        this._formattedContentLength -= removed.length;
+        this._formattedLineEndings.pop();
+    },
+
+    _append: function(str)
+    {
+        this._formattedContent.push(str);
+        this._formattedContentLength += str.length;
+    },
+
+    _appendIndent: function()
+    {
+        // Indent is already in the cache.
+        if (this._indent < this._indentCache.length) {
+            this._append(this._indentCache[this._indent]);
+            return;
+        }
+
+        // Indent was not in the cache, fill up the cache up with what was needed.
+        const maxCacheIndent = 20;
+        var max = Math.min(this._indent, maxCacheIndent);
+        for (var i = this._indentCache.length; i <= max; ++i)
+            this._indentCache[i] = this._indentCache[i-1] + this._indentString;
+
+        // Append indents as needed.
+        var indent = this._indent;
+        do {
+            if (indent >= maxCacheIndent)
+                this._append(this._indentCache[maxCacheIndent])
+            else
+                this._append(this._indentCache[indent]);
+            indent -= maxCacheIndent;
+        } while (indent > 0);
+    },
+
+    _addMappingIfNeeded: function(originalPosition)
+    {
+        if (originalPosition - this._lastOriginalPosition === this._formattedContentLength - this._lastFormattedPosition)
+            return;
+
+        this._mapping.original.push(this._originalOffset + originalPosition);
+        this._mapping.formatted.push(this._formattedOffset + this._formattedContentLength);
+
+        this._lastOriginalPosition = originalPosition;
+        this._lastFormattedPosition = this._formattedContentLength;
+    },
+
+    _addFormattedLineEnding: function()
+    {
+        console.assert(this._formattedContent.lastValue === "\n");
+        this._formattedLineEndings.push(this._formattedContentLength - 1);
+    }
+}
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/FormatterDebug.js b/Source/WebInspectorUI/Tools/PrettyPrinting/FormatterDebug.js
new file mode 100644
index 000000000..4374e993c
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/FormatterDebug.js
@@ -0,0 +1,52 @@
+Formatter.prototype.debug = function(from, to)
+{
+    var debug = "";
+    var outerMode = this._codeMirror.getMode();
+    var content = this._codeMirror.getRange(from, to);
+    var state = CodeMirror.copyState(outerMode, this._codeMirror.getTokenAt(from).state);
+
+    function pad(str, x, doNotQuote)
+    {
+        var result = doNotQuote ? str : "'" + str + "'";
+        for (var toPad = x - result.length; toPad > 0; --toPad)
+            result += " ";
+        return result;
+    }
+
+    function debugToken(mode, token, state, stream, originalPosition, startOfNewLine)
+    {
+        // Token Type
+        debug += "Token: " + pad(String(token), 14, !token);
+
+        // Original Position
+        debug += "Position: " + pad(String(originalPosition), 10);
+
+        // Language Specific Info
+        if (state.lexical) {
+            debug += "Lexical: " + pad(String(state.lexical.type), 10); // JavaScript
+            debug += "Prev: " + pad(String(state.lexical.prev ? state.lexical.prev.type : state.lexical.prev), 10, !state.lexical.prev);
+        }
+        else if (state.stack)
+            debug += "Stack: " + pad(String(state.stack[state.stack.length-1]), 16); // CSS
+
+        // String
+        debug += "Current: '" + stream.current() + "'\n";
+    }
+
+    var lineOffset = 0;
+    var lines = content.split("\n");
+    for (var i = 0; i < lines.length; ++i) {
+        var line = lines[i];
+        var startOfNewLine = true;
+        var stream = new CodeMirror.StringStream(line);
+        while (!stream.eol()) {
+            var innerMode = CodeMirror.innerMode(outerMode, state);
+            var token = outerMode.token(stream, state);
+            debugToken(innerMode.mode, token, state, stream, lineOffset + stream.start, startOfNewLine);
+            stream.start = stream.pos;
+            startOfNewLine = false;
+        }
+    }
+
+    return debug;
+}
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/Utilities.js b/Source/WebInspectorUI/Tools/PrettyPrinting/Utilities.js
new file mode 100644
index 000000000..74998c5a7
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/Utilities.js
@@ -0,0 +1,9 @@
+Object.defineProperty(Array.prototype, "lastValue",
+{
+    get: function()
+    {
+        if (!this.length)
+            return undefined;
+        return this[this.length - 1];
+    }
+});
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/codemirror-additions.css b/Source/WebInspectorUI/Tools/PrettyPrinting/codemirror-additions.css
new file mode 100644
index 000000000..01aa6f98b
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/codemirror-additions.css
@@ -0,0 +1,171 @@
+.CodeMirror {
+    height: auto;
+}
+
+body {
+  font-family: Droid Sans, Arial, sans-serif;
+  line-height: 1.5;
+  max-width: 64.3em;
+  margin: 3em auto;
+  padding: 0 1em;
+}
+
+h1 {
+  letter-spacing: -3px;
+  font-size: 3.23em;
+  font-weight: bold;
+  margin: 0;
+}
+
+h2 {
+  font-size: 1.23em;
+  font-weight: bold;
+  margin: .5em 0;
+  letter-spacing: -1px;
+}
+
+h3 {
+  font-size: 1.1em;
+  font-weight: bold;
+  margin: .4em 0;
+}
+
+pre {
+  background-color: #eee;
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  padding: 1em;
+}
+
+pre.code {
+  margin: 0 1em;
+}
+
+.grey {
+  background-color: #eee;
+  border-radius: 6px;
+  margin-bottom: 1.65em;
+  margin-top: 0.825em;
+  padding: 0.825em 1.65em;
+  position: relative;
+}
+
+img.logo {
+  position: absolute;
+  right: -1em;
+  bottom: 4px;
+  max-width: 23.6875em; /* Scale image down with text to prevent clipping */
+}
+
+.grey > pre {
+  background:none;
+  border-radius:0;
+  padding:0;
+  margin:0;
+  font-size:2.2em;
+  line-height:1.2em;
+}
+
+a:link, a:visited, .quasilink {
+  color: #df0019;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+a:hover, .quasilink:hover {
+  color: #800004;
+}
+
+h1 a:link, h1 a:visited, h1 a:hover {
+  color: black;
+}
+
+ul {
+  margin: 0;
+  padding-left: 1.2em;
+}
+
+a.download {
+  color: white;
+  background-color: #df0019;
+  width: 100%;
+  display: block;
+  text-align: center;
+  font-size: 1.23em;
+  font-weight: bold;
+  text-decoration: none;
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  padding: .5em 0;
+  margin-bottom: 1em;
+}
+
+a.download:hover {
+  background-color: #bb0010;
+}
+
+.rel {
+  margin-bottom: 0;
+}
+
+.rel-note {
+  color: #777;
+  font-size: .9em;
+  margin-top: .1em;
+}
+
+.logo-braces {
+  color: #df0019;
+  position: relative;
+  top: -4px;
+}
+
+.blk {
+  float: left;
+}
+
+.left {
+  margin-right: 20.68em;
+  max-width: 37em;
+  padding-right: 6.53em;
+  padding-bottom: 1em;
+}
+
+.left1 {
+  width: 15.24em;
+  padding-right: 6.45em;
+}
+
+.left2 {
+  max-width: 15.24em;
+}
+
+.right {
+  width: 20.68em;
+  margin-left: -20.68em;
+}
+
+.leftbig {
+  width: 42.44em;
+  padding-right: 6.53em;
+}
+
+.rightsmall {
+  width: 15.24em;
+}
+
+.clear:after {
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: " ";
+  clear: both;
+  height: 0;
+}
+.clear { display: inline-block; }
+/* start commented backslash hack \*/
+* html .clear { height: 1%; }
+.clear { display: block; }
+/* close commented backslash hack */
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/codemirror.css b/Source/WebInspectorUI/Tools/PrettyPrinting/codemirror.css
new file mode 100644
index 000000000..52881f7df
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/codemirror.css
@@ -0,0 +1,248 @@
+/* BASICS */
+
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 300px;
+}
+.CodeMirror-scroll {
+  /* Set scrolling behaviour here */
+  overflow: auto;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre {
+  padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+}
+
+/* CURSOR */
+
+.CodeMirror div.CodeMirror-cursor {
+  border-left: 1px solid black;
+  z-index: 3;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
+  width: auto;
+  border: 0;
+  background: #7e7;
+  z-index: 1;
+}
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite {}
+
+.cm-tab { display: inline-block; }
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable {color: black;}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3 {color: #085;}
+.cm-s-default .cm-property {color: black;}
+.cm-s-default .cm-operator {color: black;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-error {color: #f00;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+
+.cm-invalidchar {color: #f00;}
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  line-height: 1;
+  position: relative;
+  overflow: hidden;
+  background: white;
+  color: black;
+}
+
+.CodeMirror-scroll {
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -30px; margin-right: -30px;
+  padding-bottom: 30px; padding-right: 30px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+}
+.CodeMirror-sizer {
+  position: relative;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actuall scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0; top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0; left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute; left: 0; top: 0;
+  padding-bottom: 30px;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  padding-bottom: 30px;
+  margin-bottom: -32px;
+  display: inline-block;
+  /* Hack to make IE7 behave */
+  *zoom:1;
+  *display:inline;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+
+.CodeMirror-lines {
+  cursor: text;
+}
+.CodeMirror pre {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+}
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  overflow: auto;
+}
+
+.CodeMirror-widget {
+}
+
+.CodeMirror-wrap .CodeMirror-scroll {
+  overflow-x: hidden;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%; height: 0px;
+  overflow: hidden;
+  visibility: hidden;
+}
+.CodeMirror-measure pre { position: static; }
+
+.CodeMirror div.CodeMirror-cursor {
+  position: absolute;
+  visibility: hidden;
+  border-right: none;
+  width: 0;
+}
+.CodeMirror-focused div.CodeMirror-cursor {
+  visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+
+.cm-searching {
+  background: #ffa;
+  background: rgba(255, 255, 0, .4);
+}
+
+/* IE7 hack to prevent it from returning funny offsetTops on the spans */
+.CodeMirror span { *vertical-align: text-bottom; }
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursor {
+    visibility: hidden;
+  }
+}
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/codemirror.js b/Source/WebInspectorUI/Tools/PrettyPrinting/codemirror.js
new file mode 100644
index 000000000..aed7e83b1
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/codemirror.js
@@ -0,0 +1,5780 @@
+// CodeMirror is the only global var we claim
+window.CodeMirror = (function() {
+  "use strict";
+
+  // BROWSER SNIFFING
+
+  // Crude, but necessary to handle a number of hard-to-feature-detect
+  // bugs and behavior differences.
+  var gecko = /gecko\/\d/i.test(navigator.userAgent);
+  var ie = /MSIE \d/.test(navigator.userAgent);
+  var ie_lt8 = ie && (document.documentMode == null || document.documentMode < 8);
+  var ie_lt9 = ie && (document.documentMode == null || document.documentMode < 9);
+  var webkit = /WebKit\//.test(navigator.userAgent);
+  var qtwebkit = webkit && /Qt\/\d+\.\d+/.test(navigator.userAgent);
+  var chrome = /Chrome\//.test(navigator.userAgent);
+  var opera = /Opera\//.test(navigator.userAgent);
+  var safari = /Apple Computer/.test(navigator.vendor);
+  var khtml = /KHTML\//.test(navigator.userAgent);
+  var mac_geLion = /Mac OS X 1\d\D([7-9]|\d\d)\D/.test(navigator.userAgent);
+  var mac_geMountainLion = /Mac OS X 1\d\D([8-9]|\d\d)\D/.test(navigator.userAgent);
+  var phantom = /PhantomJS/.test(navigator.userAgent);
+
+  var ios = /AppleWebKit/.test(navigator.userAgent) && /Mobile\/\w+/.test(navigator.userAgent);
+  // This is woefully incomplete. Suggestions for alternative methods welcome.
+  var mobile = ios || /Android|webOS|BlackBerry|Opera Mini|Opera Mobi|IEMobile/i.test(navigator.userAgent);
+  var mac = ios || /Mac/.test(navigator.platform);
+  var windows = /windows/i.test(navigator.platform);
+
+  var opera_version = opera && navigator.userAgent.match(/Version\/(\d*\.\d*)/);
+  if (opera_version) opera_version = Number(opera_version[1]);
+  // Some browsers use the wrong event properties to signal cmd/ctrl on OS X
+  var flipCtrlCmd = mac && (qtwebkit || opera && (opera_version == null || opera_version < 12.11));
+  var captureMiddleClick = gecko || (ie && !ie_lt9);
+
+  // Optimize some code when these features are not used
+  var sawReadOnlySpans = false, sawCollapsedSpans = false;
+
+  // CONSTRUCTOR
+
+  function CodeMirror(place, options) {
+    if (!(this instanceof CodeMirror)) return new CodeMirror(place, options);
+
+    this.options = options = options || {};
+    // Determine effective options based on given values and defaults.
+    for (var opt in defaults) if (!options.hasOwnProperty(opt) && defaults.hasOwnProperty(opt))
+      options[opt] = defaults[opt];
+    setGuttersForLineNumbers(options);
+
+    var docStart = typeof options.value == "string" ? 0 : options.value.first;
+    var display = this.display = makeDisplay(place, docStart);
+    display.wrapper.CodeMirror = this;
+    updateGutters(this);
+    if (options.autofocus && !mobile) focusInput(this);
+
+    this.state = {keyMaps: [],
+                  overlays: [],
+                  modeGen: 0,
+                  overwrite: false, focused: false,
+                  suppressEdits: false, pasteIncoming: false,
+                  draggingText: false,
+                  highlight: new Delayed()};
+
+    themeChanged(this);
+    if (options.lineWrapping)
+      this.display.wrapper.className += " CodeMirror-wrap";
+
+    var doc = options.value;
+    if (typeof doc == "string") doc = new Doc(options.value, options.mode);
+    operation(this, attachDoc)(this, doc);
+
+    // Override magic textarea content restore that IE sometimes does
+    // on our hidden textarea on reload
+    if (ie) setTimeout(bind(resetInput, this, true), 20);
+
+    registerEventHandlers(this);
+    // IE throws unspecified error in certain cases, when
+    // trying to access activeElement before onload
+    var hasFocus; try { hasFocus = (document.activeElement == display.input); } catch(e) { }
+    if (hasFocus || (options.autofocus && !mobile)) setTimeout(bind(onFocus, this), 20);
+    else onBlur(this);
+
+    operation(this, function() {
+      for (var opt in optionHandlers)
+        if (optionHandlers.propertyIsEnumerable(opt))
+          optionHandlers[opt](this, options[opt], Init);
+      for (var i = 0; i < initHooks.length; ++i) initHooks[i](this);
+    })();
+  }
+
+  // DISPLAY CONSTRUCTOR
+
+  function makeDisplay(place, docStart) {
+    var d = {};
+
+    var input = d.input = elt("textarea", null, null, "position: absolute; padding: 0; width: 1px; height: 1em; outline: none; font-size: 4px;");
+    if (webkit) input.style.width = "1000px";
+    else input.setAttribute("wrap", "off");
+    // if border: 0; -- iOS fails to open keyboard (issue #1287)
+    if (ios) input.style.border = "1px solid black";
+    input.setAttribute("autocorrect", "off"); input.setAttribute("autocapitalize", "off"); input.setAttribute("spellcheck", "false");
+
+    // Wraps and hides input textarea
+    d.inputDiv = elt("div", [input], null, "overflow: hidden; position: relative; width: 3px; height: 0px;");
+    // The actual fake scrollbars.
+    d.scrollbarH = elt("div", [elt("div", null, null, "height: 1px")], "CodeMirror-hscrollbar");
+    d.scrollbarV = elt("div", [elt("div", null, null, "width: 1px")], "CodeMirror-vscrollbar");
+    d.scrollbarFiller = elt("div", null, "CodeMirror-scrollbar-filler");
+    d.gutterFiller = elt("div", null, "CodeMirror-gutter-filler");
+    // DIVs containing the selection and the actual code
+    d.lineDiv = elt("div", null, "CodeMirror-code");
+    d.selectionDiv = elt("div", null, null, "position: relative; z-index: 1");
+    // Blinky cursor, and element used to ensure cursor fits at the end of a line
+    d.cursor = elt("div", "\u00a0", "CodeMirror-cursor");
+    // Secondary cursor, shown when on a 'jump' in bi-directional text
+    d.otherCursor = elt("div", "\u00a0", "CodeMirror-cursor CodeMirror-secondarycursor");
+    // Used to measure text size
+    d.measure = elt("div", null, "CodeMirror-measure");
+    // Wraps everything that needs to exist inside the vertically-padded coordinate system
+    d.lineSpace = elt("div", [d.measure, d.selectionDiv, d.lineDiv, d.cursor, d.otherCursor],
+                         null, "position: relative; outline: none");
+    // Moved around its parent to cover visible view
+    d.mover = elt("div", [elt("div", [d.lineSpace], "CodeMirror-lines")], null, "position: relative");
+    // Set to the height of the text, causes scrolling
+    d.sizer = elt("div", [d.mover], "CodeMirror-sizer");
+    // D is needed because behavior of elts with overflow: auto and padding is inconsistent across browsers
+    d.heightForcer = elt("div", null, null, "position: absolute; height: " + scrollerCutOff + "px; width: 1px;");
+    // Will contain the gutters, if any
+    d.gutters = elt("div", null, "CodeMirror-gutters");
+    d.lineGutter = null;
+    // Provides scrolling
+    d.scroller = elt("div", [d.sizer, d.heightForcer, d.gutters], "CodeMirror-scroll");
+    d.scroller.setAttribute("tabIndex", "-1");
+    // The element in which the editor lives.
+    d.wrapper = elt("div", [d.inputDiv, d.scrollbarH, d.scrollbarV,
+                            d.scrollbarFiller, d.gutterFiller, d.scroller], "CodeMirror");
+    // Work around IE7 z-index bug
+    if (ie_lt8) { d.gutters.style.zIndex = -1; d.scroller.style.paddingRight = 0; }
+    if (place.appendChild) place.appendChild(d.wrapper); else place(d.wrapper);
+
+    // Needed to hide big blue blinking cursor on Mobile Safari
+    if (ios) input.style.width = "0px";
+    if (!webkit) d.scroller.draggable = true;
+    // Needed to handle Tab key in KHTML
+    if (khtml) { d.inputDiv.style.height = "1px"; d.inputDiv.style.position = "absolute"; }
+    // Need to set a minimum width to see the scrollbar on IE7 (but must not set it on IE8).
+    else if (ie_lt8) d.scrollbarH.style.minWidth = d.scrollbarV.style.minWidth = "18px";
+
+    // Current visible range (may be bigger than the view window).
+    d.viewOffset = d.lastSizeC = 0;
+    d.showingFrom = d.showingTo = docStart;
+
+    // Used to only resize the line number gutter when necessary (when
+    // the amount of lines crosses a boundary that makes its width change)
+    d.lineNumWidth = d.lineNumInnerWidth = d.lineNumChars = null;
+    // See readInput and resetInput
+    d.prevInput = "";
+    // Set to true when a non-horizontal-scrolling widget is added. As
+    // an optimization, widget aligning is skipped when d is false.
+    d.alignWidgets = false;
+    // Flag that indicates whether we currently expect input to appear
+    // (after some event like 'keypress' or 'input') and are polling
+    // intensively.
+    d.pollingFast = false;
+    // Self-resetting timeout for the poller
+    d.poll = new Delayed();
+
+    d.cachedCharWidth = d.cachedTextHeight = null;
+    d.measureLineCache = [];
+    d.measureLineCachePos = 0;
+
+    // Tracks when resetInput has punted to just putting a short
+    // string instead of the (large) selection.
+    d.inaccurateSelection = false;
+
+    // Tracks the maximum line length so that the horizontal scrollbar
+    // can be kept static when scrolling.
+    d.maxLine = null;
+    d.maxLineLength = 0;
+    d.maxLineChanged = false;
+
+    // Used for measuring wheel scrolling granularity
+    d.wheelDX = d.wheelDY = d.wheelStartX = d.wheelStartY = null;
+
+    return d;
+  }
+
+  // STATE UPDATES
+
+  // Used to get the editor into a consistent state again when options change.
+
+  function loadMode(cm) {
+    cm.doc.mode = CodeMirror.getMode(cm.options, cm.doc.modeOption);
+    cm.doc.iter(function(line) {
+      if (line.stateAfter) line.stateAfter = null;
+      if (line.styles) line.styles = null;
+    });
+    cm.doc.frontier = cm.doc.first;
+    startWorker(cm, 100);
+    cm.state.modeGen++;
+    if (cm.curOp) regChange(cm);
+  }
+
+  function wrappingChanged(cm) {
+    if (cm.options.lineWrapping) {
+      cm.display.wrapper.className += " CodeMirror-wrap";
+      cm.display.sizer.style.minWidth = "";
+    } else {
+      cm.display.wrapper.className = cm.display.wrapper.className.replace(" CodeMirror-wrap", "");
+      computeMaxLength(cm);
+    }
+    estimateLineHeights(cm);
+    regChange(cm);
+    clearCaches(cm);
+    setTimeout(function(){updateScrollbars(cm);}, 100);
+  }
+
+  function estimateHeight(cm) {
+    var th = textHeight(cm.display), wrapping = cm.options.lineWrapping;
+    var perLine = wrapping && Math.max(5, cm.display.scroller.clientWidth / charWidth(cm.display) - 3);
+    return function(line) {
+      if (lineIsHidden(cm.doc, line))
+        return 0;
+      else if (wrapping)
+        return (Math.ceil(line.text.length / perLine) || 1) * th;
+      else
+        return th;
+    };
+  }
+
+  function estimateLineHeights(cm) {
+    var doc = cm.doc, est = estimateHeight(cm);
+    doc.iter(function(line) {
+      var estHeight = est(line);
+      if (estHeight != line.height) updateLineHeight(line, estHeight);
+    });
+  }
+
+  function keyMapChanged(cm) {
+    var map = keyMap[cm.options.keyMap], style = map.style;
+    cm.display.wrapper.className = cm.display.wrapper.className.replace(/\s*cm-keymap-\S+/g, "") +
+      (style ? " cm-keymap-" + style : "");
+    cm.state.disableInput = map.disableInput;
+  }
+
+  function themeChanged(cm) {
+    cm.display.wrapper.className = cm.display.wrapper.className.replace(/\s*cm-s-\S+/g, "") +
+      cm.options.theme.replace(/(^|\s)\s*/g, " cm-s-");
+    clearCaches(cm);
+  }
+
+  function guttersChanged(cm) {
+    updateGutters(cm);
+    regChange(cm);
+    setTimeout(function(){alignHorizontally(cm);}, 20);
+  }
+
+  function updateGutters(cm) {
+    var gutters = cm.display.gutters, specs = cm.options.gutters;
+    removeChildren(gutters);
+    for (var i = 0; i < specs.length; ++i) {
+      var gutterClass = specs[i];
+      var gElt = gutters.appendChild(elt("div", null, "CodeMirror-gutter " + gutterClass));
+      if (gutterClass == "CodeMirror-linenumbers") {
+        cm.display.lineGutter = gElt;
+        gElt.style.width = (cm.display.lineNumWidth || 1) + "px";
+      }
+    }
+    gutters.style.display = i ? "" : "none";
+  }
+
+  function lineLength(doc, line) {
+    if (line.height == 0) return 0;
+    var len = line.text.length, merged, cur = line;
+    while (merged = collapsedSpanAtStart(cur)) {
+      var found = merged.find();
+      cur = getLine(doc, found.from.line);
+      len += found.from.ch - found.to.ch;
+    }
+    cur = line;
+    while (merged = collapsedSpanAtEnd(cur)) {
+      var found = merged.find();
+      len -= cur.text.length - found.from.ch;
+      cur = getLine(doc, found.to.line);
+      len += cur.text.length - found.to.ch;
+    }
+    return len;
+  }
+
+  function computeMaxLength(cm) {
+    var d = cm.display, doc = cm.doc;
+    d.maxLine = getLine(doc, doc.first);
+    d.maxLineLength = lineLength(doc, d.maxLine);
+    d.maxLineChanged = true;
+    doc.iter(function(line) {
+      var len = lineLength(doc, line);
+      if (len > d.maxLineLength) {
+        d.maxLineLength = len;
+        d.maxLine = line;
+      }
+    });
+  }
+
+  // Make sure the gutters options contains the element
+  // "CodeMirror-linenumbers" when the lineNumbers option is true.
+  function setGuttersForLineNumbers(options) {
+    var found = false;
+    for (var i = 0; i < options.gutters.length; ++i) {
+      if (options.gutters[i] == "CodeMirror-linenumbers") {
+        if (options.lineNumbers) found = true;
+        else options.gutters.splice(i--, 1);
+      }
+    }
+    if (!found && options.lineNumbers)
+      options.gutters.push("CodeMirror-linenumbers");
+  }
+
+  // SCROLLBARS
+
+  // Re-synchronize the fake scrollbars with the actual size of the
+  // content. Optionally force a scrollTop.
+  function updateScrollbars(cm) {
+    var d = cm.display, docHeight = cm.doc.height;
+    var totalHeight = docHeight + paddingVert(d);
+    d.sizer.style.minHeight = d.heightForcer.style.top = totalHeight + "px";
+    d.gutters.style.height = Math.max(totalHeight, d.scroller.clientHeight - scrollerCutOff) + "px";
+    var scrollHeight = Math.max(totalHeight, d.scroller.scrollHeight);
+    var needsH = d.scroller.scrollWidth > (d.scroller.clientWidth + 1);
+    var needsV = scrollHeight > (d.scroller.clientHeight + 1);
+    if (needsV) {
+      d.scrollbarV.style.display = "block";
+      d.scrollbarV.style.bottom = needsH ? scrollbarWidth(d.measure) + "px" : "0";
+      d.scrollbarV.firstChild.style.height =
+        (scrollHeight - d.scroller.clientHeight + d.scrollbarV.clientHeight) + "px";
+    } else d.scrollbarV.style.display = "";
+    if (needsH) {
+      d.scrollbarH.style.display = "block";
+      d.scrollbarH.style.right = needsV ? scrollbarWidth(d.measure) + "px" : "0";
+      d.scrollbarH.firstChild.style.width =
+        (d.scroller.scrollWidth - d.scroller.clientWidth + d.scrollbarH.clientWidth) + "px";
+    } else d.scrollbarH.style.display = "";
+    if (needsH && needsV) {
+      d.scrollbarFiller.style.display = "block";
+      d.scrollbarFiller.style.height = d.scrollbarFiller.style.width = scrollbarWidth(d.measure) + "px";
+    } else d.scrollbarFiller.style.display = "";
+    if (needsH && cm.options.coverGutterNextToScrollbar && cm.options.fixedGutter) {
+      d.gutterFiller.style.display = "block";
+      d.gutterFiller.style.height = scrollbarWidth(d.measure) + "px";
+      d.gutterFiller.style.width = d.gutters.offsetWidth + "px";
+    } else d.gutterFiller.style.display = "";
+
+    if (mac_geLion && scrollbarWidth(d.measure) === 0)
+      d.scrollbarV.style.minWidth = d.scrollbarH.style.minHeight = mac_geMountainLion ? "18px" : "12px";
+  }
+
+  function visibleLines(display, doc, viewPort) {
+    var top = display.scroller.scrollTop, height = display.wrapper.clientHeight;
+    if (typeof viewPort == "number") top = viewPort;
+    else if (viewPort) {top = viewPort.top; height = viewPort.bottom - viewPort.top;}
+    top = Math.floor(top - paddingTop(display));
+    var bottom = Math.ceil(top + height);
+    return {from: lineAtHeight(doc, top), to: lineAtHeight(doc, bottom)};
+  }
+
+  // LINE NUMBERS
+
+  function alignHorizontally(cm) {
+    var display = cm.display;
+    if (!display.alignWidgets && (!display.gutters.firstChild || !cm.options.fixedGutter)) return;
+    var comp = compensateForHScroll(display) - display.scroller.scrollLeft + cm.doc.scrollLeft;
+    var gutterW = display.gutters.offsetWidth, l = comp + "px";
+    for (var n = display.lineDiv.firstChild; n; n = n.nextSibling) if (n.alignable) {
+      for (var i = 0, a = n.alignable; i < a.length; ++i) a[i].style.left = l;
+    }
+    if (cm.options.fixedGutter)
+      display.gutters.style.left = (comp + gutterW) + "px";
+  }
+
+  function maybeUpdateLineNumberWidth(cm) {
+    if (!cm.options.lineNumbers) return false;
+    var doc = cm.doc, last = lineNumberFor(cm.options, doc.first + doc.size - 1), display = cm.display;
+    if (last.length != display.lineNumChars) {
+      var test = display.measure.appendChild(elt("div", [elt("div", last)],
+                                                 "CodeMirror-linenumber CodeMirror-gutter-elt"));
+      var innerW = test.firstChild.offsetWidth, padding = test.offsetWidth - innerW;
+      display.lineGutter.style.width = "";
+      display.lineNumInnerWidth = Math.max(innerW, display.lineGutter.offsetWidth - padding);
+      display.lineNumWidth = display.lineNumInnerWidth + padding;
+      display.lineNumChars = display.lineNumInnerWidth ? last.length : -1;
+      display.lineGutter.style.width = display.lineNumWidth + "px";
+      return true;
+    }
+    return false;
+  }
+
+  function lineNumberFor(options, i) {
+    return String(options.lineNumberFormatter(i + options.firstLineNumber));
+  }
+  function compensateForHScroll(display) {
+    return getRect(display.scroller).left - getRect(display.sizer).left;
+  }
+
+  // DISPLAY DRAWING
+
+  function updateDisplay(cm, changes, viewPort) {
+    var oldFrom = cm.display.showingFrom, oldTo = cm.display.showingTo, updated;
+    var visible = visibleLines(cm.display, cm.doc, viewPort);
+    for (;;) {
+      if (!updateDisplayInner(cm, changes, visible)) break;
+      updated = true;
+      updateSelection(cm);
+      updateScrollbars(cm);
+
+      // Clip forced viewport to actual scrollable area
+      if (viewPort)
+        viewPort = Math.min(cm.display.scroller.scrollHeight - cm.display.scroller.clientHeight,
+                            typeof viewPort == "number" ? viewPort : viewPort.top);
+      visible = visibleLines(cm.display, cm.doc, viewPort);
+      if (visible.from >= cm.display.showingFrom && visible.to <= cm.display.showingTo)
+        break;
+      changes = [];
+    }
+
+    if (updated) {
+      signalLater(cm, "update", cm);
+      if (cm.display.showingFrom != oldFrom || cm.display.showingTo != oldTo)
+        signalLater(cm, "viewportChange", cm, cm.display.showingFrom, cm.display.showingTo);
+    }
+    return updated;
+  }
+
+  // Uses a set of changes plus the current scroll position to
+  // determine which DOM updates have to be made, and makes the
+  // updates.
+  function updateDisplayInner(cm, changes, visible) {
+    var display = cm.display, doc = cm.doc;
+    if (!display.wrapper.clientWidth) {
+      display.showingFrom = display.showingTo = doc.first;
+      display.viewOffset = 0;
+      return;
+    }
+
+    // Bail out if the visible area is already rendered and nothing changed.
+    if (changes.length == 0 &&
+        visible.from > display.showingFrom && visible.to < display.showingTo)
+      return;
+
+    if (maybeUpdateLineNumberWidth(cm))
+      changes = [{from: doc.first, to: doc.first + doc.size}];
+    var gutterW = display.sizer.style.marginLeft = display.gutters.offsetWidth + "px";
+    display.scrollbarH.style.left = cm.options.fixedGutter ? gutterW : "0";
+
+    // Used to determine which lines need their line numbers updated
+    var positionsChangedFrom = Infinity;
+    if (cm.options.lineNumbers)
+      for (var i = 0; i < changes.length; ++i)
+        if (changes[i].diff) { positionsChangedFrom = changes[i].from; break; }
+
+    var end = doc.first + doc.size;
+    var from = Math.max(visible.from - cm.options.viewportMargin, doc.first);
+    var to = Math.min(end, visible.to + cm.options.viewportMargin);
+    if (display.showingFrom < from && from - display.showingFrom < 20) from = Math.max(doc.first, display.showingFrom);
+    if (display.showingTo > to && display.showingTo - to < 20) to = Math.min(end, display.showingTo);
+    if (sawCollapsedSpans) {
+      from = lineNo(visualLine(doc, getLine(doc, from)));
+      while (to < end && lineIsHidden(doc, getLine(doc, to))) ++to;
+    }
+
+    // Create a range of theoretically intact lines, and punch holes
+    // in that using the change info.
+    var intact = [{from: Math.max(display.showingFrom, doc.first),
+                   to: Math.min(display.showingTo, end)}];
+    if (intact[0].from >= intact[0].to) intact = [];
+    else intact = computeIntact(intact, changes);
+    // When merged lines are present, we might have to reduce the
+    // intact ranges because changes in continued fragments of the
+    // intact lines do require the lines to be redrawn.
+    if (sawCollapsedSpans)
+      for (var i = 0; i < intact.length; ++i) {
+        var range = intact[i], merged;
+        while (merged = collapsedSpanAtEnd(getLine(doc, range.to - 1))) {
+          var newTo = merged.find().from.line;
+          if (newTo > range.from) range.to = newTo;
+          else { intact.splice(i--, 1); break; }
+        }
+      }
+
+    // Clip off the parts that won't be visible
+    var intactLines = 0;
+    for (var i = 0; i < intact.length; ++i) {
+      var range = intact[i];
+      if (range.from < from) range.from = from;
+      if (range.to > to) range.to = to;
+      if (range.from >= range.to) intact.splice(i--, 1);
+      else intactLines += range.to - range.from;
+    }
+    if (intactLines == to - from && from == display.showingFrom && to == display.showingTo) {
+      updateViewOffset(cm);
+      return;
+    }
+    intact.sort(function(a, b) {return a.from - b.from;});
+
+    // Avoid crashing on IE's "unspecified error" when in iframes
+    try {
+      var focused = document.activeElement;
+    } catch(e) {}
+    if (intactLines < (to - from) * .7) display.lineDiv.style.display = "none";
+    patchDisplay(cm, from, to, intact, positionsChangedFrom);
+    display.lineDiv.style.display = "";
+    if (focused && document.activeElement != focused && focused.offsetHeight) focused.focus();
+
+    var different = from != display.showingFrom || to != display.showingTo ||
+      display.lastSizeC != display.wrapper.clientHeight;
+    // This is just a bogus formula that detects when the editor is
+    // resized or the font size changes.
+    if (different) {
+      display.lastSizeC = display.wrapper.clientHeight;
+      startWorker(cm, 400);
+    }
+    display.showingFrom = from; display.showingTo = to;
+
+    var prevBottom = display.lineDiv.offsetTop;
+    for (var node = display.lineDiv.firstChild, height; node; node = node.nextSibling) if (node.lineObj) {
+      if (ie_lt8) {
+        var bot = node.offsetTop + node.offsetHeight;
+        height = bot - prevBottom;
+        prevBottom = bot;
+      } else {
+        var box = getRect(node);
+        height = box.bottom - box.top;
+      }
+      var diff = node.lineObj.height - height;
+      if (height < 2) height = textHeight(display);
+      if (diff > .001 || diff < -.001) {
+        updateLineHeight(node.lineObj, height);
+        var widgets = node.lineObj.widgets;
+        if (widgets) for (var i = 0; i < widgets.length; ++i)
+          widgets[i].height = widgets[i].node.offsetHeight;
+      }
+    }
+    updateViewOffset(cm);
+
+    return true;
+  }
+
+  function updateViewOffset(cm) {
+    var off = cm.display.viewOffset = heightAtLine(cm, getLine(cm.doc, cm.display.showingFrom));
+    // Position the mover div to align with the current virtual scroll position
+    cm.display.mover.style.top = off + "px";
+  }
+
+  function computeIntact(intact, changes) {
+    for (var i = 0, l = changes.length || 0; i < l; ++i) {
+      var change = changes[i], intact2 = [], diff = change.diff || 0;
+      for (var j = 0, l2 = intact.length; j < l2; ++j) {
+        var range = intact[j];
+        if (change.to <= range.from && change.diff) {
+          intact2.push({from: range.from + diff, to: range.to + diff});
+        } else if (change.to <= range.from || change.from >= range.to) {
+          intact2.push(range);
+        } else {
+          if (change.from > range.from)
+            intact2.push({from: range.from, to: change.from});
+          if (change.to < range.to)
+            intact2.push({from: change.to + diff, to: range.to + diff});
+        }
+      }
+      intact = intact2;
+    }
+    return intact;
+  }
+
+  function getDimensions(cm) {
+    var d = cm.display, left = {}, width = {};
+    for (var n = d.gutters.firstChild, i = 0; n; n = n.nextSibling, ++i) {
+      left[cm.options.gutters[i]] = n.offsetLeft;
+      width[cm.options.gutters[i]] = n.offsetWidth;
+    }
+    return {fixedPos: compensateForHScroll(d),
+            gutterTotalWidth: d.gutters.offsetWidth,
+            gutterLeft: left,
+            gutterWidth: width,
+            wrapperWidth: d.wrapper.clientWidth};
+  }
+
+  function patchDisplay(cm, from, to, intact, updateNumbersFrom) {
+    var dims = getDimensions(cm);
+    var display = cm.display, lineNumbers = cm.options.lineNumbers;
+    if (!intact.length && (!webkit || !cm.display.currentWheelTarget))
+      removeChildren(display.lineDiv);
+    var container = display.lineDiv, cur = container.firstChild;
+
+    function rm(node) {
+      var next = node.nextSibling;
+      if (webkit && mac && cm.display.currentWheelTarget == node) {
+        node.style.display = "none";
+        node.lineObj = null;
+      } else {
+        node.parentNode.removeChild(node);
+      }
+      return next;
+    }
+
+    var nextIntact = intact.shift(), lineN = from;
+    cm.doc.iter(from, to, function(line) {
+      if (nextIntact && nextIntact.to == lineN) nextIntact = intact.shift();
+      if (lineIsHidden(cm.doc, line)) {
+        if (line.height != 0) updateLineHeight(line, 0);
+        if (line.widgets && cur.previousSibling) for (var i = 0; i < line.widgets.length; ++i) {
+          var w = line.widgets[i];
+          if (w.showIfHidden) {
+            var prev = cur.previousSibling;
+            if (/pre/i.test(prev.nodeName)) {
+              var wrap = elt("div", null, null, "position: relative");
+              prev.parentNode.replaceChild(wrap, prev);
+              wrap.appendChild(prev);
+              prev = wrap;
+            }
+            var wnode = prev.appendChild(elt("div", [w.node], "CodeMirror-linewidget"));
+            if (!w.handleMouseEvents) wnode.ignoreEvents = true;
+            positionLineWidget(w, wnode, prev, dims);
+          }
+        }
+      } else if (nextIntact && nextIntact.from <= lineN && nextIntact.to > lineN) {
+        // This line is intact. Skip to the actual node. Update its
+        // line number if needed.
+        while (cur.lineObj != line) cur = rm(cur);
+        if (lineNumbers && updateNumbersFrom <= lineN && cur.lineNumber)
+          setTextContent(cur.lineNumber, lineNumberFor(cm.options, lineN));
+        cur = cur.nextSibling;
+      } else {
+        // For lines with widgets, make an attempt to find and reuse
+        // the existing element, so that widgets aren't needlessly
+        // removed and re-inserted into the dom
+        if (line.widgets) for (var j = 0, search = cur, reuse; search && j < 20; ++j, search = search.nextSibling)
+          if (search.lineObj == line && /div/i.test(search.nodeName)) { reuse = search; break; }
+        // This line needs to be generated.
+        var lineNode = buildLineElement(cm, line, lineN, dims, reuse);
+        if (lineNode != reuse) {
+          container.insertBefore(lineNode, cur);
+        } else {
+          while (cur != reuse) cur = rm(cur);
+          cur = cur.nextSibling;
+        }
+
+        lineNode.lineObj = line;
+      }
+      ++lineN;
+    });
+    while (cur) cur = rm(cur);
+  }
+
+  function buildLineElement(cm, line, lineNo, dims, reuse) {
+    var lineElement = lineContent(cm, line);
+    var markers = line.gutterMarkers, display = cm.display, wrap;
+
+    if (!cm.options.lineNumbers && !markers && !line.bgClass && !line.wrapClass && !line.widgets)
+      return lineElement;
+
+    // Lines with gutter elements, widgets or a background class need
+    // to be wrapped again, and have the extra elements added to the
+    // wrapper div
+
+    if (reuse) {
+      reuse.alignable = null;
+      var isOk = true, widgetsSeen = 0, insertBefore = null;
+      for (var n = reuse.firstChild, next; n; n = next) {
+        next = n.nextSibling;
+        if (!/\bCodeMirror-linewidget\b/.test(n.className)) {
+          reuse.removeChild(n);
+        } else {
+          for (var i = 0; i < line.widgets.length; ++i) {
+            var widget = line.widgets[i];
+            if (widget.node == n.firstChild) {
+              if (!widget.above && !insertBefore) insertBefore = n;
+              positionLineWidget(widget, n, reuse, dims);
+              ++widgetsSeen;
+              break;
+            }
+          }
+          if (i == line.widgets.length) { isOk = false; break; }
+        }
+      }
+      reuse.insertBefore(lineElement, insertBefore);
+      if (isOk && widgetsSeen == line.widgets.length) {
+        wrap = reuse;
+        reuse.className = line.wrapClass || "";
+      }
+    }
+    if (!wrap) {
+      wrap = elt("div", null, line.wrapClass, "position: relative");
+      wrap.appendChild(lineElement);
+    }
+    // Kludge to make sure the styled element lies behind the selection (by z-index)
+    if (line.bgClass)
+      wrap.insertBefore(elt("div", null, line.bgClass + " CodeMirror-linebackground"), wrap.firstChild);
+    if (cm.options.lineNumbers || markers) {
+      var gutterWrap = wrap.insertBefore(elt("div", null, null, "position: absolute; left: " +
+                                             (cm.options.fixedGutter ? dims.fixedPos : -dims.gutterTotalWidth) + "px"),
+                                         wrap.firstChild);
+      if (cm.options.fixedGutter) (wrap.alignable || (wrap.alignable = [])).push(gutterWrap);
+      if (cm.options.lineNumbers && (!markers || !markers["CodeMirror-linenumbers"]))
+        wrap.lineNumber = gutterWrap.appendChild(
+          elt("div", lineNumberFor(cm.options, lineNo),
+              "CodeMirror-linenumber CodeMirror-gutter-elt",
+              "left: " + dims.gutterLeft["CodeMirror-linenumbers"] + "px; width: "
+              + display.lineNumInnerWidth + "px"));
+      if (markers)
+        for (var k = 0; k < cm.options.gutters.length; ++k) {
+          var id = cm.options.gutters[k], found = markers.hasOwnProperty(id) && markers[id];
+          if (found)
+            gutterWrap.appendChild(elt("div", [found], "CodeMirror-gutter-elt", "left: " +
+                                       dims.gutterLeft[id] + "px; width: " + dims.gutterWidth[id] + "px"));
+        }
+    }
+    if (ie_lt8) wrap.style.zIndex = 2;
+    if (line.widgets && wrap != reuse) for (var i = 0, ws = line.widgets; i < ws.length; ++i) {
+      var widget = ws[i], node = elt("div", [widget.node], "CodeMirror-linewidget");
+      if (!widget.handleMouseEvents) node.ignoreEvents = true;
+      positionLineWidget(widget, node, wrap, dims);
+      if (widget.above)
+        wrap.insertBefore(node, cm.options.lineNumbers && line.height != 0 ? gutterWrap : lineElement);
+      else
+        wrap.appendChild(node);
+      signalLater(widget, "redraw");
+    }
+    return wrap;
+  }
+
+  function positionLineWidget(widget, node, wrap, dims) {
+    if (widget.noHScroll) {
+      (wrap.alignable || (wrap.alignable = [])).push(node);
+      var width = dims.wrapperWidth;
+      node.style.left = dims.fixedPos + "px";
+      if (!widget.coverGutter) {
+        width -= dims.gutterTotalWidth;
+        node.style.paddingLeft = dims.gutterTotalWidth + "px";
+      }
+      node.style.width = width + "px";
+    }
+    if (widget.coverGutter) {
+      node.style.zIndex = 5;
+      node.style.position = "relative";
+      if (!widget.noHScroll) node.style.marginLeft = -dims.gutterTotalWidth + "px";
+    }
+  }
+
+  // SELECTION / CURSOR
+
+  function updateSelection(cm) {
+    var display = cm.display;
+    var collapsed = posEq(cm.doc.sel.from, cm.doc.sel.to);
+    if (collapsed || cm.options.showCursorWhenSelecting)
+      updateSelectionCursor(cm);
+    else
+      display.cursor.style.display = display.otherCursor.style.display = "none";
+    if (!collapsed)
+      updateSelectionRange(cm);
+    else
+      display.selectionDiv.style.display = "none";
+
+    // Move the hidden textarea near the cursor to prevent scrolling artifacts
+    if (cm.options.moveInputWithCursor) {
+      var headPos = cursorCoords(cm, cm.doc.sel.head, "div");
+      var wrapOff = getRect(display.wrapper), lineOff = getRect(display.lineDiv);
+      display.inputDiv.style.top = Math.max(0, Math.min(display.wrapper.clientHeight - 10,
+                                                        headPos.top + lineOff.top - wrapOff.top)) + "px";
+      display.inputDiv.style.left = Math.max(0, Math.min(display.wrapper.clientWidth - 10,
+                                                         headPos.left + lineOff.left - wrapOff.left)) + "px";
+    }
+  }
+
+  // No selection, plain cursor
+  function updateSelectionCursor(cm) {
+    var display = cm.display, pos = cursorCoords(cm, cm.doc.sel.head, "div");
+    display.cursor.style.left = pos.left + "px";
+    display.cursor.style.top = pos.top + "px";
+    display.cursor.style.height = Math.max(0, pos.bottom - pos.top) * cm.options.cursorHeight + "px";
+    display.cursor.style.display = "";
+
+    if (pos.other) {
+      display.otherCursor.style.display = "";
+      display.otherCursor.style.left = pos.other.left + "px";
+      display.otherCursor.style.top = pos.other.top + "px";
+      display.otherCursor.style.height = (pos.other.bottom - pos.other.top) * .85 + "px";
+    } else { display.otherCursor.style.display = "none"; }
+  }
+
+  // Highlight selection
+  function updateSelectionRange(cm) {
+    var display = cm.display, doc = cm.doc, sel = cm.doc.sel;
+    var fragment = document.createDocumentFragment();
+    var clientWidth = display.lineSpace.offsetWidth, pl = paddingLeft(cm.display);
+
+    function add(left, top, width, bottom) {
+      if (top < 0) top = 0;
+      fragment.appendChild(elt("div", null, "CodeMirror-selected", "position: absolute; left: " + left +
+                               "px; top: " + top + "px; width: " + (width == null ? clientWidth - left : width) +
+                               "px; height: " + (bottom - top) + "px"));
+    }
+
+    function drawForLine(line, fromArg, toArg) {
+      var lineObj = getLine(doc, line);
+      var lineLen = lineObj.text.length;
+      var start, end;
+      function coords(ch, bias) {
+        return charCoords(cm, Pos(line, ch), "div", lineObj, bias);
+      }
+
+      iterateBidiSections(getOrder(lineObj), fromArg || 0, toArg == null ? lineLen : toArg, function(from, to, dir) {
+        var leftPos = coords(from, "left"), rightPos, left, right;
+        if (from == to) {
+          rightPos = leftPos;
+          left = right = leftPos.left;
+        } else {
+          rightPos = coords(to - 1, "right");
+          if (dir == "rtl") { var tmp = leftPos; leftPos = rightPos; rightPos = tmp; }
+          left = leftPos.left;
+          right = rightPos.right;
+        }
+        if (fromArg == null && from == 0) left = pl;
+        if (rightPos.top - leftPos.top > 3) { // Different lines, draw top part
+          add(left, leftPos.top, null, leftPos.bottom);
+          left = pl;
+          if (leftPos.bottom < rightPos.top) add(left, leftPos.bottom, null, rightPos.top);
+        }
+        if (toArg == null && to == lineLen) right = clientWidth;
+        if (!start || leftPos.top < start.top || leftPos.top == start.top && leftPos.left < start.left)
+          start = leftPos;
+        if (!end || rightPos.bottom > end.bottom || rightPos.bottom == end.bottom && rightPos.right > end.right)
+          end = rightPos;
+        if (left < pl + 1) left = pl;
+        add(left, rightPos.top, right - left, rightPos.bottom);
+      });
+      return {start: start, end: end};
+    }
+
+    if (sel.from.line == sel.to.line) {
+      drawForLine(sel.from.line, sel.from.ch, sel.to.ch);
+    } else {
+      var fromLine = getLine(doc, sel.from.line), toLine = getLine(doc, sel.to.line);
+      var singleVLine = visualLine(doc, fromLine) == visualLine(doc, toLine);
+      var leftEnd = drawForLine(sel.from.line, sel.from.ch, singleVLine ? fromLine.text.length : null).end;
+      var rightStart = drawForLine(sel.to.line, singleVLine ? 0 : null, sel.to.ch).start;
+      if (singleVLine) {
+        if (leftEnd.top < rightStart.top - 2) {
+          add(leftEnd.right, leftEnd.top, null, leftEnd.bottom);
+          add(pl, rightStart.top, rightStart.left, rightStart.bottom);
+        } else {
+          add(leftEnd.right, leftEnd.top, rightStart.left - leftEnd.right, leftEnd.bottom);
+        }
+      }
+      if (leftEnd.bottom < rightStart.top)
+        add(pl, leftEnd.bottom, null, rightStart.top);
+    }
+
+    removeChildrenAndAdd(display.selectionDiv, fragment);
+    display.selectionDiv.style.display = "";
+  }
+
+  // Cursor-blinking
+  function restartBlink(cm) {
+    if (!cm.state.focused) return;
+    var display = cm.display;
+    clearInterval(display.blinker);
+    var on = true;
+    display.cursor.style.visibility = display.otherCursor.style.visibility = "";
+    display.blinker = setInterval(function() {
+      display.cursor.style.visibility = display.otherCursor.style.visibility = (on = !on) ? "" : "hidden";
+    }, cm.options.cursorBlinkRate);
+  }
+
+  // HIGHLIGHT WORKER
+
+  function startWorker(cm, time) {
+    if (cm.doc.mode.startState && cm.doc.frontier < cm.display.showingTo)
+      cm.state.highlight.set(time, bind(highlightWorker, cm));
+  }
+
+  function highlightWorker(cm) {
+    var doc = cm.doc;
+    if (doc.frontier < doc.first) doc.frontier = doc.first;
+    if (doc.frontier >= cm.display.showingTo) return;
+    var end = +new Date + cm.options.workTime;
+    var state = copyState(doc.mode, getStateBefore(cm, doc.frontier));
+    var changed = [], prevChange;
+    doc.iter(doc.frontier, Math.min(doc.first + doc.size, cm.display.showingTo + 500), function(line) {
+      if (doc.frontier >= cm.display.showingFrom) { // Visible
+        var oldStyles = line.styles;
+        line.styles = highlightLine(cm, line, state);
+        var ischange = !oldStyles || oldStyles.length != line.styles.length;
+        for (var i = 0; !ischange && i < oldStyles.length; ++i) ischange = oldStyles[i] != line.styles[i];
+        if (ischange) {
+          if (prevChange && prevChange.end == doc.frontier) prevChange.end++;
+          else changed.push(prevChange = {start: doc.frontier, end: doc.frontier + 1});
+        }
+        line.stateAfter = copyState(doc.mode, state);
+      } else {
+        processLine(cm, line, state);
+        line.stateAfter = doc.frontier % 5 == 0 ? copyState(doc.mode, state) : null;
+      }
+      ++doc.frontier;
+      if (+new Date > end) {
+        startWorker(cm, cm.options.workDelay);
+        return true;
+      }
+    });
+    if (changed.length)
+      operation(cm, function() {
+        for (var i = 0; i < changed.length; ++i)
+          regChange(this, changed[i].start, changed[i].end);
+      })();
+  }
+
+  // Finds the line to start with when starting a parse. Tries to
+  // find a line with a stateAfter, so that it can start with a
+  // valid state. If that fails, it returns the line with the
+  // smallest indentation, which tends to need the least context to
+  // parse correctly.
+  function findStartLine(cm, n, precise) {
+    var minindent, minline, doc = cm.doc;
+    for (var search = n, lim = n - 100; search > lim; --search) {
+      if (search <= doc.first) return doc.first;
+      var line = getLine(doc, search - 1);
+      if (line.stateAfter && (!precise || search <= doc.frontier)) return search;
+      var indented = countColumn(line.text, null, cm.options.tabSize);
+      if (minline == null || minindent > indented) {
+        minline = search - 1;
+        minindent = indented;
+      }
+    }
+    return minline;
+  }
+
+  function getStateBefore(cm, n, precise) {
+    var doc = cm.doc, display = cm.display;
+      if (!doc.mode.startState) return true;
+    var pos = findStartLine(cm, n, precise), state = pos > doc.first && getLine(doc, pos-1).stateAfter;
+    if (!state) state = startState(doc.mode);
+    else state = copyState(doc.mode, state);
+    doc.iter(pos, n, function(line) {
+      processLine(cm, line, state);
+      var save = pos == n - 1 || pos % 5 == 0 || pos >= display.showingFrom && pos < display.showingTo;
+      line.stateAfter = save ? copyState(doc.mode, state) : null;
+      ++pos;
+    });
+    return state;
+  }
+
+  // POSITION MEASUREMENT
+
+  function paddingTop(display) {return display.lineSpace.offsetTop;}
+  function paddingVert(display) {return display.mover.offsetHeight - display.lineSpace.offsetHeight;}
+  function paddingLeft(display) {
+    var e = removeChildrenAndAdd(display.measure, elt("pre", null, null, "text-align: left")).appendChild(elt("span", "x"));
+    return e.offsetLeft;
+  }
+
+  function measureChar(cm, line, ch, data, bias) {
+    var dir = -1;
+    data = data || measureLine(cm, line);
+
+    for (var pos = ch;; pos += dir) {
+      var r = data[pos];
+      if (r) break;
+      if (dir < 0 && pos == 0) dir = 1;
+    }
+    bias = pos > ch ? "left" : pos < ch ? "right" : bias;
+    if (bias == "left" && r.leftSide) r = r.leftSide;
+    else if (bias == "right" && r.rightSide) r = r.rightSide;
+    return {left: pos < ch ? r.right : r.left,
+            right: pos > ch ? r.left : r.right,
+            top: r.top,
+            bottom: r.bottom};
+  }
+
+  function findCachedMeasurement(cm, line) {
+    var cache = cm.display.measureLineCache;
+    for (var i = 0; i < cache.length; ++i) {
+      var memo = cache[i];
+      if (memo.text == line.text && memo.markedSpans == line.markedSpans &&
+          cm.display.scroller.clientWidth == memo.width &&
+          memo.classes == line.textClass + "|" + line.bgClass + "|" + line.wrapClass)
+        return memo;
+    }
+  }
+
+  function clearCachedMeasurement(cm, line) {
+    var exists = findCachedMeasurement(cm, line);
+    if (exists) exists.text = exists.measure = exists.markedSpans = null;
+  }
+
+  function measureLine(cm, line) {
+    // First look in the cache
+    var cached = findCachedMeasurement(cm, line);
+    if (cached) return cached.measure;
+
+    // Failing that, recompute and store result in cache
+    var measure = measureLineInner(cm, line);
+    var cache = cm.display.measureLineCache;
+    var memo = {text: line.text, width: cm.display.scroller.clientWidth,
+                markedSpans: line.markedSpans, measure: measure,
+                classes: line.textClass + "|" + line.bgClass + "|" + line.wrapClass};
+    if (cache.length == 16) cache[++cm.display.measureLineCachePos % 16] = memo;
+    else cache.push(memo);
+    return measure;
+  }
+
+  function measureLineInner(cm, line) {
+    var display = cm.display, measure = emptyArray(line.text.length);
+    var pre = lineContent(cm, line, measure);
+
+    // IE does not cache element positions of inline elements between
+    // calls to getBoundingClientRect. This makes the loop below,
+    // which gathers the positions of all the characters on the line,
+    // do an amount of layout work quadratic to the number of
+    // characters. When line wrapping is off, we try to improve things
+    // by first subdividing the line into a bunch of inline blocks, so
+    // that IE can reuse most of the layout information from caches
+    // for those blocks. This does interfere with line wrapping, so it
+    // doesn't work when wrapping is on, but in that case the
+    // situation is slightly better, since IE does cache line-wrapping
+    // information and only recomputes per-line.
+    if (ie && !ie_lt8 && !cm.options.lineWrapping && pre.childNodes.length > 100) {
+      var fragment = document.createDocumentFragment();
+      var chunk = 10, n = pre.childNodes.length;
+      for (var i = 0, chunks = Math.ceil(n / chunk); i < chunks; ++i) {
+        var wrap = elt("div", null, null, "display: inline-block");
+        for (var j = 0; j < chunk && n; ++j) {
+          wrap.appendChild(pre.firstChild);
+          --n;
+        }
+        fragment.appendChild(wrap);
+      }
+      pre.appendChild(fragment);
+    }
+
+    removeChildrenAndAdd(display.measure, pre);
+
+    var outer = getRect(display.lineDiv);
+    var vranges = [], data = emptyArray(line.text.length), maxBot = pre.offsetHeight;
+    // Work around an IE7/8 bug where it will sometimes have randomly
+    // replaced our pre with a clone at this point.
+    if (ie_lt9 && display.measure.first != pre)
+      removeChildrenAndAdd(display.measure, pre);
+
+    function measureRect(rect) {
+      var top = rect.top - outer.top, bot = rect.bottom - outer.top;
+      if (bot > maxBot) bot = maxBot;
+      if (top < 0) top = 0;
+      for (var i = vranges.length - 2; i >= 0; i -= 2) {
+        var rtop = vranges[i], rbot = vranges[i+1];
+        if (rtop > bot || rbot < top) continue;
+        if (rtop <= top && rbot >= bot ||
+            top <= rtop && bot >= rbot ||
+            Math.min(bot, rbot) - Math.max(top, rtop) >= (bot - top) >> 1) {
+          vranges[i] = Math.min(top, rtop);
+          vranges[i+1] = Math.max(bot, rbot);
+          break;
+        }
+      }
+      if (i < 0) { i = vranges.length; vranges.push(top, bot); }
+      return {left: rect.left - outer.left,
+              right: rect.right - outer.left,
+              top: i, bottom: null};
+    }
+    function finishRect(rect) {
+      rect.bottom = vranges[rect.top+1];
+      rect.top = vranges[rect.top];
+    }
+
+    for (var i = 0, cur; i < measure.length; ++i) if (cur = measure[i]) {
+      var node = cur, rect = null;
+      // A widget might wrap, needs special care
+      if (/\bCodeMirror-widget\b/.test(cur.className) && cur.getClientRects) {
+        if (cur.firstChild.nodeType == 1) node = cur.firstChild;
+        var rects = node.getClientRects();
+        if (rects.length > 1) {
+          rect = data[i] = measureRect(rects[0]);
+          rect.rightSide = measureRect(rects[rects.length - 1]);
+        }
+      }
+      if (!rect) rect = data[i] = measureRect(getRect(node));
+      if (cur.measureRight) rect.right = getRect(cur.measureRight).left;
+      if (cur.leftSide) rect.leftSide = measureRect(getRect(cur.leftSide));
+    }
+    for (var i = 0, cur; i < data.length; ++i) if (cur = data[i]) {
+      finishRect(cur);
+      if (cur.leftSide) finishRect(cur.leftSide);
+      if (cur.rightSide) finishRect(cur.rightSide);
+    }
+    return data;
+  }
+
+  function measureLineWidth(cm, line) {
+    var hasBadSpan = false;
+    if (line.markedSpans) for (var i = 0; i < line.markedSpans; ++i) {
+      var sp = line.markedSpans[i];
+      if (sp.collapsed && (sp.to == null || sp.to == line.text.length)) hasBadSpan = true;
+    }
+    var cached = !hasBadSpan && findCachedMeasurement(cm, line);
+    if (cached) return measureChar(cm, line, line.text.length, cached.measure, "right").right;
+
+    var pre = lineContent(cm, line);
+    var end = pre.appendChild(zeroWidthElement(cm.display.measure));
+    removeChildrenAndAdd(cm.display.measure, pre);
+    return getRect(end).right - getRect(cm.display.lineDiv).left;
+  }
+
+  function clearCaches(cm) {
+    cm.display.measureLineCache.length = cm.display.measureLineCachePos = 0;
+    cm.display.cachedCharWidth = cm.display.cachedTextHeight = null;
+    if (!cm.options.lineWrapping) cm.display.maxLineChanged = true;
+    cm.display.lineNumChars = null;
+  }
+
+  function pageScrollX() { return window.pageXOffset || (document.documentElement || document.body).scrollLeft; }
+  function pageScrollY() { return window.pageYOffset || (document.documentElement || document.body).scrollTop; }
+
+  // Context is one of "line", "div" (display.lineDiv), "local"/null (editor), or "page"
+  function intoCoordSystem(cm, lineObj, rect, context) {
+    if (lineObj.widgets) for (var i = 0; i < lineObj.widgets.length; ++i) if (lineObj.widgets[i].above) {
+      var size = widgetHeight(lineObj.widgets[i]);
+      rect.top += size; rect.bottom += size;
+    }
+    if (context == "line") return rect;
+    if (!context) context = "local";
+    var yOff = heightAtLine(cm, lineObj);
+    if (context == "local") yOff += paddingTop(cm.display);
+    else yOff -= cm.display.viewOffset;
+    if (context == "page" || context == "window") {
+      var lOff = getRect(cm.display.lineSpace);
+      yOff += lOff.top + (context == "window" ? 0 : pageScrollY());
+      var xOff = lOff.left + (context == "window" ? 0 : pageScrollX());
+      rect.left += xOff; rect.right += xOff;
+    }
+    rect.top += yOff; rect.bottom += yOff;
+    return rect;
+  }
+
+  // Context may be "window", "page", "div", or "local"/null
+  // Result is in "div" coords
+  function fromCoordSystem(cm, coords, context) {
+    if (context == "div") return coords;
+    var left = coords.left, top = coords.top;
+    // First move into "page" coordinate system
+    if (context == "page") {
+      left -= pageScrollX();
+      top -= pageScrollY();
+    } else if (context == "local" || !context) {
+      var localBox = getRect(cm.display.sizer);
+      left += localBox.left;
+      top += localBox.top;
+    }
+
+    var lineSpaceBox = getRect(cm.display.lineSpace);
+    return {left: left - lineSpaceBox.left, top: top - lineSpaceBox.top};
+  }
+
+  function charCoords(cm, pos, context, lineObj, bias) {
+    if (!lineObj) lineObj = getLine(cm.doc, pos.line);
+    return intoCoordSystem(cm, lineObj, measureChar(cm, lineObj, pos.ch, null, bias), context);
+  }
+
+  function cursorCoords(cm, pos, context, lineObj, measurement) {
+    lineObj = lineObj || getLine(cm.doc, pos.line);
+    if (!measurement) measurement = measureLine(cm, lineObj);
+    function get(ch, right) {
+      var m = measureChar(cm, lineObj, ch, measurement, right ? "right" : "left");
+      if (right) m.left = m.right; else m.right = m.left;
+      return intoCoordSystem(cm, lineObj, m, context);
+    }
+    function getBidi(ch, partPos) {
+      var part = order[partPos], right = part.level % 2;
+      if (ch == bidiLeft(part) && partPos && part.level < order[partPos - 1].level) {
+        part = order[--partPos];
+        ch = bidiRight(part) - (part.level % 2 ? 0 : 1);
+        right = true;
+      } else if (ch == bidiRight(part) && partPos < order.length - 1 && part.level < order[partPos + 1].level) {
+        part = order[++partPos];
+        ch = bidiLeft(part) - part.level % 2;
+        right = false;
+      }
+      if (right && ch == part.to && ch > part.from) return get(ch - 1);
+      return get(ch, right);
+    }
+    var order = getOrder(lineObj), ch = pos.ch;
+    if (!order) return get(ch);
+    var partPos = getBidiPartAt(order, ch);
+    var val = getBidi(ch, partPos);
+    if (bidiOther != null) val.other = getBidi(ch, bidiOther);
+    return val;
+  }
+
+  function PosWithInfo(line, ch, outside, xRel) {
+    var pos = new Pos(line, ch);
+    pos.xRel = xRel;
+    if (outside) pos.outside = true;
+    return pos;
+  }
+
+  // Coords must be lineSpace-local
+  function coordsChar(cm, x, y) {
+    var doc = cm.doc;
+    y += cm.display.viewOffset;
+    if (y < 0) return PosWithInfo(doc.first, 0, true, -1);
+    var lineNo = lineAtHeight(doc, y), last = doc.first + doc.size - 1;
+    if (lineNo > last)
+      return PosWithInfo(doc.first + doc.size - 1, getLine(doc, last).text.length, true, 1);
+    if (x < 0) x = 0;
+
+    for (;;) {
+      var lineObj = getLine(doc, lineNo);
+      var found = coordsCharInner(cm, lineObj, lineNo, x, y);
+      var merged = collapsedSpanAtEnd(lineObj);
+      var mergedPos = merged && merged.find();
+      if (merged && (found.ch > mergedPos.from.ch || found.ch == mergedPos.from.ch && found.xRel > 0))
+        lineNo = mergedPos.to.line;
+      else
+        return found;
+    }
+  }
+
+  function coordsCharInner(cm, lineObj, lineNo, x, y) {
+    var innerOff = y - heightAtLine(cm, lineObj);
+    var wrongLine = false, adjust = 2 * cm.display.wrapper.clientWidth;
+    var measurement = measureLine(cm, lineObj);
+
+    function getX(ch) {
+      var sp = cursorCoords(cm, Pos(lineNo, ch), "line",
+                            lineObj, measurement);
+      wrongLine = true;
+      if (innerOff > sp.bottom) return sp.left - adjust;
+      else if (innerOff < sp.top) return sp.left + adjust;
+      else wrongLine = false;
+      return sp.left;
+    }
+
+    var bidi = getOrder(lineObj), dist = lineObj.text.length;
+    var from = lineLeft(lineObj), to = lineRight(lineObj);
+    var fromX = getX(from), fromOutside = wrongLine, toX = getX(to), toOutside = wrongLine;
+
+    if (x > toX) return PosWithInfo(lineNo, to, toOutside, 1);
+    // Do a binary search between these bounds.
+    for (;;) {
+      if (bidi ? to == from || to == moveVisually(lineObj, from, 1) : to - from <= 1) {
+        var ch = x < fromX || x - fromX <= toX - x ? from : to;
+        var xDiff = x - (ch == from ? fromX : toX);
+        while (isExtendingChar.test(lineObj.text.charAt(ch))) ++ch;
+        var pos = PosWithInfo(lineNo, ch, ch == from ? fromOutside : toOutside,
+                              xDiff < 0 ? -1 : xDiff ? 1 : 0);
+        return pos;
+      }
+      var step = Math.ceil(dist / 2), middle = from + step;
+      if (bidi) {
+        middle = from;
+        for (var i = 0; i < step; ++i) middle = moveVisually(lineObj, middle, 1);
+      }
+      var middleX = getX(middle);
+      if (middleX > x) {to = middle; toX = middleX; if (toOutside = wrongLine) toX += 1000; dist = step;}
+      else {from = middle; fromX = middleX; fromOutside = wrongLine; dist -= step;}
+    }
+  }
+
+  var measureText;
+  function textHeight(display) {
+    if (display.cachedTextHeight != null) return display.cachedTextHeight;
+    if (measureText == null) {
+      measureText = elt("pre");
+      // Measure a bunch of lines, for browsers that compute
+      // fractional heights.
+      for (var i = 0; i < 49; ++i) {
+        measureText.appendChild(document.createTextNode("x"));
+        measureText.appendChild(elt("br"));
+      }
+      measureText.appendChild(document.createTextNode("x"));
+    }
+    removeChildrenAndAdd(display.measure, measureText);
+    var height = measureText.offsetHeight / 50;
+    if (height > 3) display.cachedTextHeight = height;
+    removeChildren(display.measure);
+    return height || 1;
+  }
+
+  function charWidth(display) {
+    if (display.cachedCharWidth != null) return display.cachedCharWidth;
+    var anchor = elt("span", "x");
+    var pre = elt("pre", [anchor]);
+    removeChildrenAndAdd(display.measure, pre);
+    var width = anchor.offsetWidth;
+    if (width > 2) display.cachedCharWidth = width;
+    return width || 10;
+  }
+
+  // OPERATIONS
+
+  // Operations are used to wrap changes in such a way that each
+  // change won't have to update the cursor and display (which would
+  // be awkward, slow, and error-prone), but instead updates are
+  // batched and then all combined and executed at once.
+
+  var nextOpId = 0;
+  function startOperation(cm) {
+    cm.curOp = {
+      // An array of ranges of lines that have to be updated. See
+      // updateDisplay.
+      changes: [],
+      updateInput: null,
+      userSelChange: null,
+      textChanged: null,
+      selectionChanged: false,
+      cursorActivity: false,
+      updateMaxLine: false,
+      updateScrollPos: false,
+      id: ++nextOpId
+    };
+    if (!delayedCallbackDepth++) delayedCallbacks = [];
+  }
+
+  function endOperation(cm) {
+    var op = cm.curOp, doc = cm.doc, display = cm.display;
+    cm.curOp = null;
+
+    if (op.updateMaxLine) computeMaxLength(cm);
+    if (display.maxLineChanged && !cm.options.lineWrapping && display.maxLine) {
+      var width = measureLineWidth(cm, display.maxLine);
+      display.sizer.style.minWidth = Math.max(0, width + 3 + scrollerCutOff) + "px";
+      display.maxLineChanged = false;
+      var maxScrollLeft = Math.max(0, display.sizer.offsetLeft + display.sizer.offsetWidth - display.scroller.clientWidth);
+      if (maxScrollLeft < doc.scrollLeft && !op.updateScrollPos)
+        setScrollLeft(cm, Math.min(display.scroller.scrollLeft, maxScrollLeft), true);
+    }
+    var newScrollPos, updated;
+    if (op.updateScrollPos) {
+      newScrollPos = op.updateScrollPos;
+    } else if (op.selectionChanged && display.scroller.clientHeight) { // don't rescroll if not visible
+      var coords = cursorCoords(cm, doc.sel.head);
+      newScrollPos = calculateScrollPos(cm, coords.left, coords.top, coords.left, coords.bottom);
+    }
+    if (op.changes.length || newScrollPos && newScrollPos.scrollTop != null) {
+      updated = updateDisplay(cm, op.changes, newScrollPos && newScrollPos.scrollTop);
+      if (cm.display.scroller.offsetHeight) cm.doc.scrollTop = cm.display.scroller.scrollTop;
+    }
+    if (!updated && op.selectionChanged) updateSelection(cm);
+    if (op.updateScrollPos) {
+      display.scroller.scrollTop = display.scrollbarV.scrollTop = doc.scrollTop = newScrollPos.scrollTop;
+      display.scroller.scrollLeft = display.scrollbarH.scrollLeft = doc.scrollLeft = newScrollPos.scrollLeft;
+      alignHorizontally(cm);
+      if (op.scrollToPos)
+        scrollPosIntoView(cm, clipPos(cm.doc, op.scrollToPos), op.scrollToPosMargin);
+    } else if (newScrollPos) {
+      scrollCursorIntoView(cm);
+    }
+    if (op.selectionChanged) restartBlink(cm);
+
+    if (cm.state.focused && op.updateInput)
+      resetInput(cm, op.userSelChange);
+
+    var hidden = op.maybeHiddenMarkers, unhidden = op.maybeUnhiddenMarkers;
+    if (hidden) for (var i = 0; i < hidden.length; ++i)
+      if (!hidden[i].lines.length) signal(hidden[i], "hide");
+    if (unhidden) for (var i = 0; i < unhidden.length; ++i)
+      if (unhidden[i].lines.length) signal(unhidden[i], "unhide");
+
+    var delayed;
+    if (!--delayedCallbackDepth) {
+      delayed = delayedCallbacks;
+      delayedCallbacks = null;
+    }
+    if (op.textChanged)
+      signal(cm, "change", cm, op.textChanged);
+    if (op.cursorActivity) signal(cm, "cursorActivity", cm);
+    if (delayed) for (var i = 0; i < delayed.length; ++i) delayed[i]();
+  }
+
+  // Wraps a function in an operation. Returns the wrapped function.
+  function operation(cm1, f) {
+    return function() {
+      var cm = cm1 || this, withOp = !cm.curOp;
+      if (withOp) startOperation(cm);
+      try { var result = f.apply(cm, arguments); }
+      finally { if (withOp) endOperation(cm); }
+      return result;
+    };
+  }
+  function docOperation(f) {
+    return function() {
+      var withOp = this.cm && !this.cm.curOp, result;
+      if (withOp) startOperation(this.cm);
+      try { result = f.apply(this, arguments); }
+      finally { if (withOp) endOperation(this.cm); }
+      return result;
+    };
+  }
+  function runInOp(cm, f) {
+    var withOp = !cm.curOp, result;
+    if (withOp) startOperation(cm);
+    try { result = f(); }
+    finally { if (withOp) endOperation(cm); }
+    return result;
+  }
+
+  function regChange(cm, from, to, lendiff) {
+    if (from == null) from = cm.doc.first;
+    if (to == null) to = cm.doc.first + cm.doc.size;
+    cm.curOp.changes.push({from: from, to: to, diff: lendiff});
+  }
+
+  // INPUT HANDLING
+
+  function slowPoll(cm) {
+    if (cm.display.pollingFast) return;
+    cm.display.poll.set(cm.options.pollInterval, function() {
+      readInput(cm);
+      if (cm.state.focused) slowPoll(cm);
+    });
+  }
+
+  function fastPoll(cm) {
+    var missed = false;
+    cm.display.pollingFast = true;
+    function p() {
+      var changed = readInput(cm);
+      if (!changed && !missed) {missed = true; cm.display.poll.set(60, p);}
+      else {cm.display.pollingFast = false; slowPoll(cm);}
+    }
+    cm.display.poll.set(20, p);
+  }
+
+  // prevInput is a hack to work with IME. If we reset the textarea
+  // on every change, that breaks IME. So we look for changes
+  // compared to the previous content instead. (Modern browsers have
+  // events that indicate IME taking place, but these are not widely
+  // supported or compatible enough yet to rely on.)
+  function readInput(cm) {
+    var input = cm.display.input, prevInput = cm.display.prevInput, doc = cm.doc, sel = doc.sel;
+    if (!cm.state.focused || hasSelection(input) || isReadOnly(cm) || cm.state.disableInput) return false;
+    var text = input.value;
+    if (text == prevInput && posEq(sel.from, sel.to)) return false;
+    if (ie && !ie_lt9 && cm.display.inputHasSelection === text) {
+      resetInput(cm, true);
+      return false;
+    }
+
+    var withOp = !cm.curOp;
+    if (withOp) startOperation(cm);
+    sel.shift = false;
+    var same = 0, l = Math.min(prevInput.length, text.length);
+    while (same < l && prevInput.charCodeAt(same) == text.charCodeAt(same)) ++same;
+    var from = sel.from, to = sel.to;
+    if (same < prevInput.length)
+      from = Pos(from.line, from.ch - (prevInput.length - same));
+    else if (cm.state.overwrite && posEq(from, to) && !cm.state.pasteIncoming)
+      to = Pos(to.line, Math.min(getLine(doc, to.line).text.length, to.ch + (text.length - same)));
+
+    var updateInput = cm.curOp.updateInput;
+    var changeEvent = {from: from, to: to, text: splitLines(text.slice(same)),
+                       origin: cm.state.pasteIncoming ? "paste" : "+input"};
+    makeChange(cm.doc, changeEvent, "end");
+    cm.curOp.updateInput = updateInput;
+    signalLater(cm, "inputRead", cm, changeEvent);
+
+    if (text.length > 1000 || text.indexOf("\n") > -1) input.value = cm.display.prevInput = "";
+    else cm.display.prevInput = text;
+    if (withOp) endOperation(cm);
+    cm.state.pasteIncoming = false;
+    return true;
+  }
+
+  function resetInput(cm, user) {
+    var minimal, selected, doc = cm.doc;
+    if (!posEq(doc.sel.from, doc.sel.to)) {
+      cm.display.prevInput = "";
+      minimal = hasCopyEvent &&
+        (doc.sel.to.line - doc.sel.from.line > 100 || (selected = cm.getSelection()).length > 1000);
+      var content = minimal ? "-" : selected || cm.getSelection();
+      cm.display.input.value = content;
+      if (cm.state.focused) selectInput(cm.display.input);
+      if (ie && !ie_lt9) cm.display.inputHasSelection = content;
+    } else if (user) {
+      cm.display.prevInput = cm.display.input.value = "";
+      if (ie && !ie_lt9) cm.display.inputHasSelection = null;
+    }
+    cm.display.inaccurateSelection = minimal;
+  }
+
+  function focusInput(cm) {
+    if (cm.options.readOnly != "nocursor" && (!mobile || document.activeElement != cm.display.input))
+      cm.display.input.focus();
+  }
+
+  function isReadOnly(cm) {
+    return cm.options.readOnly || cm.doc.cantEdit;
+  }
+
+  // EVENT HANDLERS
+
+  function registerEventHandlers(cm) {
+    var d = cm.display;
+    on(d.scroller, "mousedown", operation(cm, onMouseDown));
+    if (ie)
+      on(d.scroller, "dblclick", operation(cm, function(e) {
+        if (signalDOMEvent(cm, e)) return;
+        var pos = posFromMouse(cm, e);
+        if (!pos || clickInGutter(cm, e) || eventInWidget(cm.display, e)) return;
+        e_preventDefault(e);
+        var word = findWordAt(getLine(cm.doc, pos.line).text, pos);
+        extendSelection(cm.doc, word.from, word.to);
+      }));
+    else
+      on(d.scroller, "dblclick", function(e) { signalDOMEvent(cm, e) || e_preventDefault(e); });
+    on(d.lineSpace, "selectstart", function(e) {
+      if (!eventInWidget(d, e)) e_preventDefault(e);
+    });
+    // Gecko browsers fire contextmenu *after* opening the menu, at
+    // which point we can't mess with it anymore. Context menu is
+    // handled in onMouseDown for Gecko.
+    if (!captureMiddleClick) on(d.scroller, "contextmenu", function(e) {onContextMenu(cm, e);});
+
+    on(d.scroller, "scroll", function() {
+      if (d.scroller.clientHeight) {
+        setScrollTop(cm, d.scroller.scrollTop);
+        setScrollLeft(cm, d.scroller.scrollLeft, true);
+        signal(cm, "scroll", cm);
+      }
+    });
+    on(d.scrollbarV, "scroll", function() {
+      if (d.scroller.clientHeight) setScrollTop(cm, d.scrollbarV.scrollTop);
+    });
+    on(d.scrollbarH, "scroll", function() {
+      if (d.scroller.clientHeight) setScrollLeft(cm, d.scrollbarH.scrollLeft);
+    });
+
+    on(d.scroller, "mousewheel", function(e){onScrollWheel(cm, e);});
+    on(d.scroller, "DOMMouseScroll", function(e){onScrollWheel(cm, e);});
+
+    function reFocus() { if (cm.state.focused) setTimeout(bind(focusInput, cm), 0); }
+    on(d.scrollbarH, "mousedown", reFocus);
+    on(d.scrollbarV, "mousedown", reFocus);
+    // Prevent wrapper from ever scrolling
+    on(d.wrapper, "scroll", function() { d.wrapper.scrollTop = d.wrapper.scrollLeft = 0; });
+
+    var resizeTimer;
+    function onResize() {
+      if (resizeTimer == null) resizeTimer = setTimeout(function() {
+        resizeTimer = null;
+        // Might be a text scaling operation, clear size caches.
+        d.cachedCharWidth = d.cachedTextHeight = knownScrollbarWidth = null;
+        clearCaches(cm);
+        runInOp(cm, bind(regChange, cm));
+      }, 100);
+    }
+    on(window, "resize", onResize);
+    // Above handler holds on to the editor and its data structures.
+    // Here we poll to unregister it when the editor is no longer in
+    // the document, so that it can be garbage-collected.
+    function unregister() {
+      for (var p = d.wrapper.parentNode; p && p != document.body; p = p.parentNode) {}
+      if (p) setTimeout(unregister, 5000);
+      else off(window, "resize", onResize);
+    }
+    setTimeout(unregister, 5000);
+
+    on(d.input, "keyup", operation(cm, function(e) {
+      if (signalDOMEvent(cm, e) || cm.options.onKeyEvent && cm.options.onKeyEvent(cm, addStop(e))) return;
+      if (e.keyCode == 16) cm.doc.sel.shift = false;
+    }));
+    on(d.input, "input", bind(fastPoll, cm));
+    on(d.input, "keydown", operation(cm, onKeyDown));
+    on(d.input, "keypress", operation(cm, onKeyPress));
+    on(d.input, "focus", bind(onFocus, cm));
+    on(d.input, "blur", bind(onBlur, cm));
+
+    function drag_(e) {
+      if (signalDOMEvent(cm, e) || cm.options.onDragEvent && cm.options.onDragEvent(cm, addStop(e))) return;
+      e_stop(e);
+    }
+    if (cm.options.dragDrop) {
+      on(d.scroller, "dragstart", function(e){onDragStart(cm, e);});
+      on(d.scroller, "dragenter", drag_);
+      on(d.scroller, "dragover", drag_);
+      on(d.scroller, "drop", operation(cm, onDrop));
+    }
+    on(d.scroller, "paste", function(e){
+      if (eventInWidget(d, e)) return;
+      focusInput(cm);
+      fastPoll(cm);
+    });
+    on(d.input, "paste", function() {
+      cm.state.pasteIncoming = true;
+      fastPoll(cm);
+    });
+
+    function prepareCopy() {
+      if (d.inaccurateSelection) {
+        d.prevInput = "";
+        d.inaccurateSelection = false;
+        d.input.value = cm.getSelection();
+        selectInput(d.input);
+      }
+    }
+    on(d.input, "cut", prepareCopy);
+    on(d.input, "copy", prepareCopy);
+
+    // Needed to handle Tab key in KHTML
+    if (khtml) on(d.sizer, "mouseup", function() {
+        if (document.activeElement == d.input) d.input.blur();
+        focusInput(cm);
+    });
+  }
+
+  function eventInWidget(display, e) {
+    for (var n = e_target(e); n != display.wrapper; n = n.parentNode) {
+      if (!n || n.ignoreEvents || n.parentNode == display.sizer && n != display.mover) return true;
+    }
+  }
+
+  function posFromMouse(cm, e, liberal) {
+    var display = cm.display;
+    if (!liberal) {
+      var target = e_target(e);
+      if (target == display.scrollbarH || target == display.scrollbarH.firstChild ||
+          target == display.scrollbarV || target == display.scrollbarV.firstChild ||
+          target == display.scrollbarFiller || target == display.gutterFiller) return null;
+    }
+    var x, y, space = getRect(display.lineSpace);
+    // Fails unpredictably on IE[67] when mouse is dragged around quickly.
+    try { x = e.clientX; y = e.clientY; } catch (e) { return null; }
+    return coordsChar(cm, x - space.left, y - space.top);
+  }
+
+  var lastClick, lastDoubleClick;
+  function onMouseDown(e) {
+    if (signalDOMEvent(this, e)) return;
+    var cm = this, display = cm.display, doc = cm.doc, sel = doc.sel;
+    sel.shift = e.shiftKey;
+
+    if (eventInWidget(display, e)) {
+      if (!webkit) {
+        display.scroller.draggable = false;
+        setTimeout(function(){display.scroller.draggable = true;}, 100);
+      }
+      return;
+    }
+    if (clickInGutter(cm, e)) return;
+    var start = posFromMouse(cm, e);
+
+    switch (e_button(e)) {
+    case 3:
+      if (captureMiddleClick) onContextMenu.call(cm, cm, e);
+      return;
+    case 2:
+      if (start) extendSelection(cm.doc, start);
+      setTimeout(bind(focusInput, cm), 20);
+      e_preventDefault(e);
+      return;
+    }
+    // For button 1, if it was clicked inside the editor
+    // (posFromMouse returning non-null), we have to adjust the
+    // selection.
+    if (!start) {if (e_target(e) == display.scroller) e_preventDefault(e); return;}
+
+    if (!cm.state.focused) onFocus(cm);
+
+    var now = +new Date, type = "single";
+    if (lastDoubleClick && lastDoubleClick.time > now - 400 && posEq(lastDoubleClick.pos, start)) {
+      type = "triple";
+      e_preventDefault(e);
+      setTimeout(bind(focusInput, cm), 20);
+      selectLine(cm, start.line);
+    } else if (lastClick && lastClick.time > now - 400 && posEq(lastClick.pos, start)) {
+      type = "double";
+      lastDoubleClick = {time: now, pos: start};
+      e_preventDefault(e);
+      var word = findWordAt(getLine(doc, start.line).text, start);
+      extendSelection(cm.doc, word.from, word.to);
+    } else { lastClick = {time: now, pos: start}; }
+
+    var last = start;
+    if (cm.options.dragDrop && dragAndDrop && !isReadOnly(cm) && !posEq(sel.from, sel.to) &&
+        !posLess(start, sel.from) && !posLess(sel.to, start) && type == "single") {
+      var dragEnd = operation(cm, function(e2) {
+        if (webkit) display.scroller.draggable = false;
+        cm.state.draggingText = false;
+        off(document, "mouseup", dragEnd);
+        off(display.scroller, "drop", dragEnd);
+        if (Math.abs(e.clientX - e2.clientX) + Math.abs(e.clientY - e2.clientY) < 10) {
+          e_preventDefault(e2);
+          extendSelection(cm.doc, start);
+          focusInput(cm);
+        }
+      });
+      // Let the drag handler handle this.
+      if (webkit) display.scroller.draggable = true;
+      cm.state.draggingText = dragEnd;
+      // IE's approach to draggable
+      if (display.scroller.dragDrop) display.scroller.dragDrop();
+      on(document, "mouseup", dragEnd);
+      on(display.scroller, "drop", dragEnd);
+      return;
+    }
+    e_preventDefault(e);
+    if (type == "single") extendSelection(cm.doc, clipPos(doc, start));
+
+    var startstart = sel.from, startend = sel.to, lastPos = start;
+
+    function doSelect(cur) {
+      if (posEq(lastPos, cur)) return;
+      lastPos = cur;
+
+      if (type == "single") {
+        extendSelection(cm.doc, clipPos(doc, start), cur);
+        return;
+      }
+
+      startstart = clipPos(doc, startstart);
+      startend = clipPos(doc, startend);
+      if (type == "double") {
+        var word = findWordAt(getLine(doc, cur.line).text, cur);
+        if (posLess(cur, startstart)) extendSelection(cm.doc, word.from, startend);
+        else extendSelection(cm.doc, startstart, word.to);
+      } else if (type == "triple") {
+        if (posLess(cur, startstart)) extendSelection(cm.doc, startend, clipPos(doc, Pos(cur.line, 0)));
+        else extendSelection(cm.doc, startstart, clipPos(doc, Pos(cur.line + 1, 0)));
+      }
+    }
+
+    var editorSize = getRect(display.wrapper);
+    // Used to ensure timeout re-tries don't fire when another extend
+    // happened in the meantime (clearTimeout isn't reliable -- at
+    // least on Chrome, the timeouts still happen even when cleared,
+    // if the clear happens after their scheduled firing time).
+    var counter = 0;
+
+    function extend(e) {
+      var curCount = ++counter;
+      var cur = posFromMouse(cm, e, true);
+      if (!cur) return;
+      if (!posEq(cur, last)) {
+        if (!cm.state.focused) onFocus(cm);
+        last = cur;
+        doSelect(cur);
+        var visible = visibleLines(display, doc);
+        if (cur.line >= visible.to || cur.line < visible.from)
+          setTimeout(operation(cm, function(){if (counter == curCount) extend(e);}), 150);
+      } else {
+        var outside = e.clientY < editorSize.top ? -20 : e.clientY > editorSize.bottom ? 20 : 0;
+        if (outside) setTimeout(operation(cm, function() {
+          if (counter != curCount) return;
+          display.scroller.scrollTop += outside;
+          extend(e);
+        }), 50);
+      }
+    }
+
+    function done(e) {
+      counter = Infinity;
+      e_preventDefault(e);
+      focusInput(cm);
+      off(document, "mousemove", move);
+      off(document, "mouseup", up);
+    }
+
+    var move = operation(cm, function(e) {
+      if (!ie && !e_button(e)) done(e);
+      else extend(e);
+    });
+    var up = operation(cm, done);
+    on(document, "mousemove", move);
+    on(document, "mouseup", up);
+  }
+
+  function clickInGutter(cm, e) {
+    var display = cm.display;
+    try { var mX = e.clientX, mY = e.clientY; }
+    catch(e) { return false; }
+
+    if (mX >= Math.floor(getRect(display.gutters).right)) return false;
+    e_preventDefault(e);
+    if (!hasHandler(cm, "gutterClick")) return true;
+
+    var lineBox = getRect(display.lineDiv);
+    if (mY > lineBox.bottom) return true;
+    mY -= lineBox.top - display.viewOffset;
+
+    for (var i = 0; i < cm.options.gutters.length; ++i) {
+      var g = display.gutters.childNodes[i];
+      if (g && getRect(g).right >= mX) {
+        var line = lineAtHeight(cm.doc, mY);
+        var gutter = cm.options.gutters[i];
+        signalLater(cm, "gutterClick", cm, line, gutter, e);
+        break;
+      }
+    }
+    return true;
+  }
+
+  // Kludge to work around strange IE behavior where it'll sometimes
+  // re-fire a series of drag-related events right after the drop (#1551)
+  var lastDrop = 0;
+
+  function onDrop(e) {
+    var cm = this;
+    if (signalDOMEvent(cm, e) || eventInWidget(cm.display, e) || (cm.options.onDragEvent && cm.options.onDragEvent(cm, addStop(e))))
+      return;
+    e_preventDefault(e);
+    if (ie) lastDrop = +new Date;
+    var pos = posFromMouse(cm, e, true), files = e.dataTransfer.files;
+    if (!pos || isReadOnly(cm)) return;
+    if (files && files.length && window.FileReader && window.File) {
+      var n = files.length, text = Array(n), read = 0;
+      var loadFile = function(file, i) {
+        var reader = new FileReader;
+        reader.onload = function() {
+          text[i] = reader.result;
+          if (++read == n) {
+            pos = clipPos(cm.doc, pos);
+            makeChange(cm.doc, {from: pos, to: pos, text: splitLines(text.join("\n")), origin: "paste"}, "around");
+          }
+        };
+        reader.readAsText(file);
+      };
+      for (var i = 0; i < n; ++i) loadFile(files[i], i);
+    } else {
+      // Don't do a replace if the drop happened inside of the selected text.
+      if (cm.state.draggingText && !(posLess(pos, cm.doc.sel.from) || posLess(cm.doc.sel.to, pos))) {
+        cm.state.draggingText(e);
+        // Ensure the editor is re-focused
+        setTimeout(bind(focusInput, cm), 20);
+        return;
+      }
+      try {
+        var text = e.dataTransfer.getData("Text");
+        if (text) {
+          var curFrom = cm.doc.sel.from, curTo = cm.doc.sel.to;
+          setSelection(cm.doc, pos, pos);
+          if (cm.state.draggingText) replaceRange(cm.doc, "", curFrom, curTo, "paste");
+          cm.replaceSelection(text, null, "paste");
+          focusInput(cm);
+          onFocus(cm);
+        }
+      }
+      catch(e){}
+    }
+  }
+
+  function onDragStart(cm, e) {
+    if (ie && (!cm.state.draggingText || +new Date - lastDrop < 100)) { e_stop(e); return; }
+    if (signalDOMEvent(cm, e) || eventInWidget(cm.display, e)) return;
+
+    var txt = cm.getSelection();
+    e.dataTransfer.setData("Text", txt);
+
+    // Use dummy image instead of default browsers image.
+    // Recent Safari (~6.0.2) have a tendency to segfault when this happens, so we don't do it there.
+    if (e.dataTransfer.setDragImage && !safari) {
+      var img = elt("img", null, null, "position: fixed; left: 0; top: 0;");
+      if (opera) {
+        img.width = img.height = 1;
+        cm.display.wrapper.appendChild(img);
+        // Force a relayout, or Opera won't use our image for some obscure reason
+        img._top = img.offsetTop;
+      }
+      e.dataTransfer.setDragImage(img, 0, 0);
+      if (opera) img.parentNode.removeChild(img);
+    }
+  }
+
+  function setScrollTop(cm, val) {
+    if (Math.abs(cm.doc.scrollTop - val) < 2) return;
+    cm.doc.scrollTop = val;
+    if (!gecko) updateDisplay(cm, [], val);
+    if (cm.display.scroller.scrollTop != val) cm.display.scroller.scrollTop = val;
+    if (cm.display.scrollbarV.scrollTop != val) cm.display.scrollbarV.scrollTop = val;
+    if (gecko) updateDisplay(cm, []);
+    startWorker(cm, 100);
+  }
+  function setScrollLeft(cm, val, isScroller) {
+    if (isScroller ? val == cm.doc.scrollLeft : Math.abs(cm.doc.scrollLeft - val) < 2) return;
+    val = Math.min(val, cm.display.scroller.scrollWidth - cm.display.scroller.clientWidth);
+    cm.doc.scrollLeft = val;
+    alignHorizontally(cm);
+    if (cm.display.scroller.scrollLeft != val) cm.display.scroller.scrollLeft = val;
+    if (cm.display.scrollbarH.scrollLeft != val) cm.display.scrollbarH.scrollLeft = val;
+  }
+
+  // Since the delta values reported on mouse wheel events are
+  // unstandardized between browsers and even browser versions, and
+  // generally horribly unpredictable, this code starts by measuring
+  // the scroll effect that the first few mouse wheel events have,
+  // and, from that, detects the way it can convert deltas to pixel
+  // offsets afterwards.
+  //
+  // The reason we want to know the amount a wheel event will scroll
+  // is that it gives us a chance to update the display before the
+  // actual scrolling happens, reducing flickering.
+
+  var wheelSamples = 0, wheelPixelsPerUnit = null;
+  // Fill in a browser-detected starting value on browsers where we
+  // know one. These don't have to be accurate -- the result of them
+  // being wrong would just be a slight flicker on the first wheel
+  // scroll (if it is large enough).
+  if (ie) wheelPixelsPerUnit = -.53;
+  else if (gecko) wheelPixelsPerUnit = 15;
+  else if (chrome) wheelPixelsPerUnit = -.7;
+  else if (safari) wheelPixelsPerUnit = -1/3;
+
+  function onScrollWheel(cm, e) {
+    var dx = e.wheelDeltaX, dy = e.wheelDeltaY;
+    if (dx == null && e.detail && e.axis == e.HORIZONTAL_AXIS) dx = e.detail;
+    if (dy == null && e.detail && e.axis == e.VERTICAL_AXIS) dy = e.detail;
+    else if (dy == null) dy = e.wheelDelta;
+
+    var display = cm.display, scroll = display.scroller;
+    // Quit if there's nothing to scroll here
+    if (!(dx && scroll.scrollWidth > scroll.clientWidth ||
+          dy && scroll.scrollHeight > scroll.clientHeight)) return;
+
+    // Webkit browsers on OS X abort momentum scrolls when the target
+    // of the scroll event is removed from the scrollable element.
+    // This hack (see related code in patchDisplay) makes sure the
+    // element is kept around.
+    if (dy && mac && webkit) {
+      for (var cur = e.target; cur != scroll; cur = cur.parentNode) {
+        if (cur.lineObj) {
+          cm.display.currentWheelTarget = cur;
+          break;
+        }
+      }
+    }
+
+    // On some browsers, horizontal scrolling will cause redraws to
+    // happen before the gutter has been realigned, causing it to
+    // wriggle around in a most unseemly way. When we have an
+    // estimated pixels/delta value, we just handle horizontal
+    // scrolling entirely here. It'll be slightly off from native, but
+    // better than glitching out.
+    if (dx && !gecko && !opera && wheelPixelsPerUnit != null) {
+      if (dy)
+        setScrollTop(cm, Math.max(0, Math.min(scroll.scrollTop + dy * wheelPixelsPerUnit, scroll.scrollHeight - scroll.clientHeight)));
+      setScrollLeft(cm, Math.max(0, Math.min(scroll.scrollLeft + dx * wheelPixelsPerUnit, scroll.scrollWidth - scroll.clientWidth)));
+      e_preventDefault(e);
+      display.wheelStartX = null; // Abort measurement, if in progress
+      return;
+    }
+
+    if (dy && wheelPixelsPerUnit != null) {
+      var pixels = dy * wheelPixelsPerUnit;
+      var top = cm.doc.scrollTop, bot = top + display.wrapper.clientHeight;
+      if (pixels < 0) top = Math.max(0, top + pixels - 50);
+      else bot = Math.min(cm.doc.height, bot + pixels + 50);
+      updateDisplay(cm, [], {top: top, bottom: bot});
+    }
+
+    if (wheelSamples < 20) {
+      if (display.wheelStartX == null) {
+        display.wheelStartX = scroll.scrollLeft; display.wheelStartY = scroll.scrollTop;
+        display.wheelDX = dx; display.wheelDY = dy;
+        setTimeout(function() {
+          if (display.wheelStartX == null) return;
+          var movedX = scroll.scrollLeft - display.wheelStartX;
+          var movedY = scroll.scrollTop - display.wheelStartY;
+          var sample = (movedY && display.wheelDY && movedY / display.wheelDY) ||
+            (movedX && display.wheelDX && movedX / display.wheelDX);
+          display.wheelStartX = display.wheelStartY = null;
+          if (!sample) return;
+          wheelPixelsPerUnit = (wheelPixelsPerUnit * wheelSamples + sample) / (wheelSamples + 1);
+          ++wheelSamples;
+        }, 200);
+      } else {
+        display.wheelDX += dx; display.wheelDY += dy;
+      }
+    }
+  }
+
+  function doHandleBinding(cm, bound, dropShift) {
+    if (typeof bound == "string") {
+      bound = commands[bound];
+      if (!bound) return false;
+    }
+    // Ensure previous input has been read, so that the handler sees a
+    // consistent view of the document
+    if (cm.display.pollingFast && readInput(cm)) cm.display.pollingFast = false;
+    var doc = cm.doc, prevShift = doc.sel.shift, done = false;
+    try {
+      if (isReadOnly(cm)) cm.state.suppressEdits = true;
+      if (dropShift) doc.sel.shift = false;
+      done = bound(cm) != Pass;
+    } finally {
+      doc.sel.shift = prevShift;
+      cm.state.suppressEdits = false;
+    }
+    return done;
+  }
+
+  function allKeyMaps(cm) {
+    var maps = cm.state.keyMaps.slice(0);
+    if (cm.options.extraKeys) maps.push(cm.options.extraKeys);
+    maps.push(cm.options.keyMap);
+    return maps;
+  }
+
+  var maybeTransition;
+  function handleKeyBinding(cm, e) {
+    // Handle auto keymap transitions
+    var startMap = getKeyMap(cm.options.keyMap), next = startMap.auto;
+    clearTimeout(maybeTransition);
+    if (next && !isModifierKey(e)) maybeTransition = setTimeout(function() {
+      if (getKeyMap(cm.options.keyMap) == startMap) {
+        cm.options.keyMap = (next.call ? next.call(null, cm) : next);
+        keyMapChanged(cm);
+      }
+    }, 50);
+
+    var name = keyName(e, true), handled = false;
+    if (!name) return false;
+    var keymaps = allKeyMaps(cm);
+
+    if (e.shiftKey) {
+      // First try to resolve full name (including 'Shift-'). Failing
+      // that, see if there is a cursor-motion command (starting with
+      // 'go') bound to the keyname without 'Shift-'.
+      handled = lookupKey("Shift-" + name, keymaps, function(b) {return doHandleBinding(cm, b, true);})
+             || lookupKey(name, keymaps, function(b) {
+                  if (typeof b == "string" ? /^go[A-Z]/.test(b) : b.motion)
+                    return doHandleBinding(cm, b);
+                });
+    } else {
+      handled = lookupKey(name, keymaps, function(b) { return doHandleBinding(cm, b); });
+    }
+
+    if (handled) {
+      e_preventDefault(e);
+      restartBlink(cm);
+      if (ie_lt9) { e.oldKeyCode = e.keyCode; e.keyCode = 0; }
+      signalLater(cm, "keyHandled", cm, name, e);
+    }
+    return handled;
+  }
+
+  function handleCharBinding(cm, e, ch) {
+    var handled = lookupKey("'" + ch + "'", allKeyMaps(cm),
+                            function(b) { return doHandleBinding(cm, b, true); });
+    if (handled) {
+      e_preventDefault(e);
+      restartBlink(cm);
+      signalLater(cm, "keyHandled", cm, "'" + ch + "'", e);
+    }
+    return handled;
+  }
+
+  var lastStoppedKey = null;
+  function onKeyDown(e) {
+    var cm = this;
+    if (!cm.state.focused) onFocus(cm);
+    if (ie && e.keyCode == 27) { e.returnValue = false; }
+    if (signalDOMEvent(cm, e) || cm.options.onKeyEvent && cm.options.onKeyEvent(cm, addStop(e))) return;
+    var code = e.keyCode;
+    // IE does strange things with escape.
+    cm.doc.sel.shift = code == 16 || e.shiftKey;
+    // First give onKeyEvent option a chance to handle this.
+    var handled = handleKeyBinding(cm, e);
+    if (opera) {
+      lastStoppedKey = handled ? code : null;
+      // Opera has no cut event... we try to at least catch the key combo
+      if (!handled && code == 88 && !hasCopyEvent && (mac ? e.metaKey : e.ctrlKey))
+        cm.replaceSelection("");
+    }
+  }
+
+  function onKeyPress(e) {
+    var cm = this;
+    if (signalDOMEvent(cm, e) || cm.options.onKeyEvent && cm.options.onKeyEvent(cm, addStop(e))) return;
+    var keyCode = e.keyCode, charCode = e.charCode;
+    if (opera && keyCode == lastStoppedKey) {lastStoppedKey = null; e_preventDefault(e); return;}
+    if (((opera && (!e.which || e.which < 10)) || khtml) && handleKeyBinding(cm, e)) return;
+    var ch = String.fromCharCode(charCode == null ? keyCode : charCode);
+    if (this.options.electricChars && this.doc.mode.electricChars &&
+        this.options.smartIndent && !isReadOnly(this) &&
+        this.doc.mode.electricChars.indexOf(ch) > -1)
+      setTimeout(operation(cm, function() {indentLine(cm, cm.doc.sel.to.line, "smart");}), 75);
+    if (handleCharBinding(cm, e, ch)) return;
+    if (ie && !ie_lt9) cm.display.inputHasSelection = null;
+    fastPoll(cm);
+  }
+
+  function onFocus(cm) {
+    if (cm.options.readOnly == "nocursor") return;
+    if (!cm.state.focused) {
+      signal(cm, "focus", cm);
+      cm.state.focused = true;
+      if (cm.display.wrapper.className.search(/\bCodeMirror-focused\b/) == -1)
+        cm.display.wrapper.className += " CodeMirror-focused";
+      resetInput(cm, true);
+    }
+    slowPoll(cm);
+    restartBlink(cm);
+  }
+  function onBlur(cm) {
+    if (cm.state.focused) {
+      signal(cm, "blur", cm);
+      cm.state.focused = false;
+      cm.display.wrapper.className = cm.display.wrapper.className.replace(" CodeMirror-focused", "");
+    }
+    clearInterval(cm.display.blinker);
+    setTimeout(function() {if (!cm.state.focused) cm.doc.sel.shift = false;}, 150);
+  }
+
+  var detectingSelectAll;
+  function onContextMenu(cm, e) {
+    if (signalDOMEvent(cm, e, "contextmenu")) return;
+    var display = cm.display, sel = cm.doc.sel;
+    if (eventInWidget(display, e)) return;
+
+    var pos = posFromMouse(cm, e), scrollPos = display.scroller.scrollTop;
+    if (!pos || opera) return; // Opera is difficult.
+    if (posEq(sel.from, sel.to) || posLess(pos, sel.from) || !posLess(pos, sel.to))
+      operation(cm, setSelection)(cm.doc, pos, pos);
+
+    var oldCSS = display.input.style.cssText;
+    display.inputDiv.style.position = "absolute";
+    display.input.style.cssText = "position: fixed; width: 30px; height: 30px; top: " + (e.clientY - 5) +
+      "px; left: " + (e.clientX - 5) + "px; z-index: 1000; background: white; outline: none;" +
+      "border-width: 0; outline: none; overflow: hidden; opacity: .05; -ms-opacity: .05; filter: alpha(opacity=5);";
+    focusInput(cm);
+    resetInput(cm, true);
+    // Adds "Select all" to context menu in FF
+    if (posEq(sel.from, sel.to)) display.input.value = display.prevInput = " ";
+
+    function prepareSelectAllHack() {
+      if (display.input.selectionStart != null) {
+        var extval = display.input.value = " " + (posEq(sel.from, sel.to) ? "" : display.input.value);
+        display.prevInput = " ";
+        display.input.selectionStart = 1; display.input.selectionEnd = extval.length;
+      }
+    }
+    function rehide() {
+      display.inputDiv.style.position = "relative";
+      display.input.style.cssText = oldCSS;
+      if (ie_lt9) display.scrollbarV.scrollTop = display.scroller.scrollTop = scrollPos;
+      slowPoll(cm);
+
+      // Try to detect the user choosing select-all
+      if (display.input.selectionStart != null) {
+        if (!ie || ie_lt9) prepareSelectAllHack();
+        clearTimeout(detectingSelectAll);
+        var i = 0, poll = function(){
+          if (display.prevInput == " " && display.input.selectionStart == 0)
+            operation(cm, commands.selectAll)(cm);
+          else if (i++ < 10) detectingSelectAll = setTimeout(poll, 500);
+          else resetInput(cm);
+        };
+        detectingSelectAll = setTimeout(poll, 200);
+      }
+    }
+
+    if (ie && !ie_lt9) prepareSelectAllHack();
+    if (captureMiddleClick) {
+      e_stop(e);
+      var mouseup = function() {
+        off(window, "mouseup", mouseup);
+        setTimeout(rehide, 20);
+      };
+      on(window, "mouseup", mouseup);
+    } else {
+      setTimeout(rehide, 50);
+    }
+  }
+
+  // UPDATING
+
+  var changeEnd = CodeMirror.changeEnd = function(change) {
+    if (!change.text) return change.to;
+    return Pos(change.from.line + change.text.length - 1,
+               lst(change.text).length + (change.text.length == 1 ? change.from.ch : 0));
+  };
+
+  // Make sure a position will be valid after the given change.
+  function clipPostChange(doc, change, pos) {
+    if (!posLess(change.from, pos)) return clipPos(doc, pos);
+    var diff = (change.text.length - 1) - (change.to.line - change.from.line);
+    if (pos.line > change.to.line + diff) {
+      var preLine = pos.line - diff, lastLine = doc.first + doc.size - 1;
+      if (preLine > lastLine) return Pos(lastLine, getLine(doc, lastLine).text.length);
+      return clipToLen(pos, getLine(doc, preLine).text.length);
+    }
+    if (pos.line == change.to.line + diff)
+      return clipToLen(pos, lst(change.text).length + (change.text.length == 1 ? change.from.ch : 0) +
+                       getLine(doc, change.to.line).text.length - change.to.ch);
+    var inside = pos.line - change.from.line;
+    return clipToLen(pos, change.text[inside].length + (inside ? 0 : change.from.ch));
+  }
+
+  // Hint can be null|"end"|"start"|"around"|{anchor,head}
+  function computeSelAfterChange(doc, change, hint) {
+    if (hint && typeof hint == "object") // Assumed to be {anchor, head} object
+      return {anchor: clipPostChange(doc, change, hint.anchor),
+              head: clipPostChange(doc, change, hint.head)};
+
+    if (hint == "start") return {anchor: change.from, head: change.from};
+
+    var end = changeEnd(change);
+    if (hint == "around") return {anchor: change.from, head: end};
+    if (hint == "end") return {anchor: end, head: end};
+
+    // hint is null, leave the selection alone as much as possible
+    var adjustPos = function(pos) {
+      if (posLess(pos, change.from)) return pos;
+      if (!posLess(change.to, pos)) return end;
+
+      var line = pos.line + change.text.length - (change.to.line - change.from.line) - 1, ch = pos.ch;
+      if (pos.line == change.to.line) ch += end.ch - change.to.ch;
+      return Pos(line, ch);
+    };
+    return {anchor: adjustPos(doc.sel.anchor), head: adjustPos(doc.sel.head)};
+  }
+
+  function filterChange(doc, change, update) {
+    var obj = {
+      canceled: false,
+      from: change.from,
+      to: change.to,
+      text: change.text,
+      origin: change.origin,
+      cancel: function() { this.canceled = true; }
+    };
+    if (update) obj.update = function(from, to, text, origin) {
+      if (from) this.from = clipPos(doc, from);
+      if (to) this.to = clipPos(doc, to);
+      if (text) this.text = text;
+      if (origin !== undefined) this.origin = origin;
+    };
+    signal(doc, "beforeChange", doc, obj);
+    if (doc.cm) signal(doc.cm, "beforeChange", doc.cm, obj);
+
+    if (obj.canceled) return null;
+    return {from: obj.from, to: obj.to, text: obj.text, origin: obj.origin};
+  }
+
+  // Replace the range from from to to by the strings in replacement.
+  // change is a {from, to, text [, origin]} object
+  function makeChange(doc, change, selUpdate, ignoreReadOnly) {
+    if (doc.cm) {
+      if (!doc.cm.curOp) return operation(doc.cm, makeChange)(doc, change, selUpdate, ignoreReadOnly);
+      if (doc.cm.state.suppressEdits) return;
+    }
+
+    if (hasHandler(doc, "beforeChange") || doc.cm && hasHandler(doc.cm, "beforeChange")) {
+      change = filterChange(doc, change, true);
+      if (!change) return;
+    }
+
+    // Possibly split or suppress the update based on the presence
+    // of read-only spans in its range.
+    var split = sawReadOnlySpans && !ignoreReadOnly && removeReadOnlyRanges(doc, change.from, change.to);
+    if (split) {
+      for (var i = split.length - 1; i >= 1; --i)
+        makeChangeNoReadonly(doc, {from: split[i].from, to: split[i].to, text: [""]});
+      if (split.length)
+        makeChangeNoReadonly(doc, {from: split[0].from, to: split[0].to, text: change.text}, selUpdate);
+    } else {
+      makeChangeNoReadonly(doc, change, selUpdate);
+    }
+  }
+
+  function makeChangeNoReadonly(doc, change, selUpdate) {
+    var selAfter = computeSelAfterChange(doc, change, selUpdate);
+    addToHistory(doc, change, selAfter, doc.cm ? doc.cm.curOp.id : NaN);
+
+    makeChangeSingleDoc(doc, change, selAfter, stretchSpansOverChange(doc, change));
+    var rebased = [];
+
+    linkedDocs(doc, function(doc, sharedHist) {
+      if (!sharedHist && indexOf(rebased, doc.history) == -1) {
+        rebaseHist(doc.history, change);
+        rebased.push(doc.history);
+      }
+      makeChangeSingleDoc(doc, change, null, stretchSpansOverChange(doc, change));
+    });
+  }
+
+  function makeChangeFromHistory(doc, type) {
+    if (doc.cm && doc.cm.state.suppressEdits) return;
+
+    var hist = doc.history;
+    var event = (type == "undo" ? hist.done : hist.undone).pop();
+    if (!event) return;
+
+    var anti = {changes: [], anchorBefore: event.anchorAfter, headBefore: event.headAfter,
+                anchorAfter: event.anchorBefore, headAfter: event.headBefore,
+                generation: hist.generation};
+    (type == "undo" ? hist.undone : hist.done).push(anti);
+    hist.generation = event.generation || ++hist.maxGeneration;
+
+    var filter = hasHandler(doc, "beforeChange") || doc.cm && hasHandler(doc.cm, "beforeChange");
+
+    for (var i = event.changes.length - 1; i >= 0; --i) {
+      var change = event.changes[i];
+      change.origin = type;
+      if (filter && !filterChange(doc, change, false)) {
+        (type == "undo" ? hist.done : hist.undone).length = 0;
+        return;
+      }
+
+      anti.changes.push(historyChangeFromChange(doc, change));
+
+      var after = i ? computeSelAfterChange(doc, change, null)
+                    : {anchor: event.anchorBefore, head: event.headBefore};
+      makeChangeSingleDoc(doc, change, after, mergeOldSpans(doc, change));
+      var rebased = [];
+
+      linkedDocs(doc, function(doc, sharedHist) {
+        if (!sharedHist && indexOf(rebased, doc.history) == -1) {
+          rebaseHist(doc.history, change);
+          rebased.push(doc.history);
+        }
+        makeChangeSingleDoc(doc, change, null, mergeOldSpans(doc, change));
+      });
+    }
+  }
+
+  function shiftDoc(doc, distance) {
+    function shiftPos(pos) {return Pos(pos.line + distance, pos.ch);}
+    doc.first += distance;
+    if (doc.cm) regChange(doc.cm, doc.first, doc.first, distance);
+    doc.sel.head = shiftPos(doc.sel.head); doc.sel.anchor = shiftPos(doc.sel.anchor);
+    doc.sel.from = shiftPos(doc.sel.from); doc.sel.to = shiftPos(doc.sel.to);
+  }
+
+  function makeChangeSingleDoc(doc, change, selAfter, spans) {
+    if (doc.cm && !doc.cm.curOp)
+      return operation(doc.cm, makeChangeSingleDoc)(doc, change, selAfter, spans);
+
+    if (change.to.line < doc.first) {
+      shiftDoc(doc, change.text.length - 1 - (change.to.line - change.from.line));
+      return;
+    }
+    if (change.from.line > doc.lastLine()) return;
+
+    // Clip the change to the size of this doc
+    if (change.from.line < doc.first) {
+      var shift = change.text.length - 1 - (doc.first - change.from.line);
+      shiftDoc(doc, shift);
+      change = {from: Pos(doc.first, 0), to: Pos(change.to.line + shift, change.to.ch),
+                text: [lst(change.text)], origin: change.origin};
+    }
+    var last = doc.lastLine();
+    if (change.to.line > last) {
+      change = {from: change.from, to: Pos(last, getLine(doc, last).text.length),
+                text: [change.text[0]], origin: change.origin};
+    }
+
+    change.removed = getBetween(doc, change.from, change.to);
+
+    if (!selAfter) selAfter = computeSelAfterChange(doc, change, null);
+    if (doc.cm) makeChangeSingleDocInEditor(doc.cm, change, spans, selAfter);
+    else updateDoc(doc, change, spans, selAfter);
+  }
+
+  function makeChangeSingleDocInEditor(cm, change, spans, selAfter) {
+    var doc = cm.doc, display = cm.display, from = change.from, to = change.to;
+
+    var recomputeMaxLength = false, checkWidthStart = from.line;
+    if (!cm.options.lineWrapping) {
+      checkWidthStart = lineNo(visualLine(doc, getLine(doc, from.line)));
+      doc.iter(checkWidthStart, to.line + 1, function(line) {
+        if (line == display.maxLine) {
+          recomputeMaxLength = true;
+          return true;
+        }
+      });
+    }
+
+    if (!posLess(doc.sel.head, change.from) && !posLess(change.to, doc.sel.head))
+      cm.curOp.cursorActivity = true;
+
+    updateDoc(doc, change, spans, selAfter, estimateHeight(cm));
+
+    if (!cm.options.lineWrapping) {
+      doc.iter(checkWidthStart, from.line + change.text.length, function(line) {
+        var len = lineLength(doc, line);
+        if (len > display.maxLineLength) {
+          display.maxLine = line;
+          display.maxLineLength = len;
+          display.maxLineChanged = true;
+          recomputeMaxLength = false;
+        }
+      });
+      if (recomputeMaxLength) cm.curOp.updateMaxLine = true;
+    }
+
+    // Adjust frontier, schedule worker
+    doc.frontier = Math.min(doc.frontier, from.line);
+    startWorker(cm, 400);
+
+    var lendiff = change.text.length - (to.line - from.line) - 1;
+    // Remember that these lines changed, for updating the display
+    regChange(cm, from.line, to.line + 1, lendiff);
+
+    if (hasHandler(cm, "change")) {
+      var changeObj = {from: from, to: to,
+                       text: change.text,
+                       removed: change.removed,
+                       origin: change.origin};
+      if (cm.curOp.textChanged) {
+        for (var cur = cm.curOp.textChanged; cur.next; cur = cur.next) {}
+        cur.next = changeObj;
+      } else cm.curOp.textChanged = changeObj;
+    }
+  }
+
+  function replaceRange(doc, code, from, to, origin) {
+    if (!to) to = from;
+    if (posLess(to, from)) { var tmp = to; to = from; from = tmp; }
+    if (typeof code == "string") code = splitLines(code);
+    makeChange(doc, {from: from, to: to, text: code, origin: origin}, null);
+  }
+
+  // POSITION OBJECT
+
+  function Pos(line, ch) {
+    if (!(this instanceof Pos)) return new Pos(line, ch);
+    this.line = line; this.ch = ch;
+  }
+  CodeMirror.Pos = Pos;
+
+  function posEq(a, b) {return a.line == b.line && a.ch == b.ch;}
+  function posLess(a, b) {return a.line < b.line || (a.line == b.line && a.ch < b.ch);}
+  function copyPos(x) {return Pos(x.line, x.ch);}
+
+  // SELECTION
+
+  function clipLine(doc, n) {return Math.max(doc.first, Math.min(n, doc.first + doc.size - 1));}
+  function clipPos(doc, pos) {
+    if (pos.line < doc.first) return Pos(doc.first, 0);
+    var last = doc.first + doc.size - 1;
+    if (pos.line > last) return Pos(last, getLine(doc, last).text.length);
+    return clipToLen(pos, getLine(doc, pos.line).text.length);
+  }
+  function clipToLen(pos, linelen) {
+    var ch = pos.ch;
+    if (ch == null || ch > linelen) return Pos(pos.line, linelen);
+    else if (ch < 0) return Pos(pos.line, 0);
+    else return pos;
+  }
+  function isLine(doc, l) {return l >= doc.first && l < doc.first + doc.size;}
+
+  // If shift is held, this will move the selection anchor. Otherwise,
+  // it'll set the whole selection.
+  function extendSelection(doc, pos, other, bias) {
+    if (doc.sel.shift || doc.sel.extend) {
+      var anchor = doc.sel.anchor;
+      if (other) {
+        var posBefore = posLess(pos, anchor);
+        if (posBefore != posLess(other, anchor)) {
+          anchor = pos;
+          pos = other;
+        } else if (posBefore != posLess(pos, other)) {
+          pos = other;
+        }
+      }
+      setSelection(doc, anchor, pos, bias);
+    } else {
+      setSelection(doc, pos, other || pos, bias);
+    }
+    if (doc.cm) doc.cm.curOp.userSelChange = true;
+  }
+
+  function filterSelectionChange(doc, anchor, head) {
+    var obj = {anchor: anchor, head: head};
+    signal(doc, "beforeSelectionChange", doc, obj);
+    if (doc.cm) signal(doc.cm, "beforeSelectionChange", doc.cm, obj);
+    obj.anchor = clipPos(doc, obj.anchor); obj.head = clipPos(doc, obj.head);
+    return obj;
+  }
+
+  // Update the selection. Last two args are only used by
+  // updateDoc, since they have to be expressed in the line
+  // numbers before the update.
+  function setSelection(doc, anchor, head, bias, checkAtomic) {
+    if (!checkAtomic && hasHandler(doc, "beforeSelectionChange") || doc.cm && hasHandler(doc.cm, "beforeSelectionChange")) {
+      var filtered = filterSelectionChange(doc, anchor, head);
+      head = filtered.head;
+      anchor = filtered.anchor;
+    }
+
+    var sel = doc.sel;
+    sel.goalColumn = null;
+    // Skip over atomic spans.
+    if (checkAtomic || !posEq(anchor, sel.anchor))
+      anchor = skipAtomic(doc, anchor, bias, checkAtomic != "push");
+    if (checkAtomic || !posEq(head, sel.head))
+      head = skipAtomic(doc, head, bias, checkAtomic != "push");
+
+    if (posEq(sel.anchor, anchor) && posEq(sel.head, head)) return;
+
+    sel.anchor = anchor; sel.head = head;
+    var inv = posLess(head, anchor);
+    sel.from = inv ? head : anchor;
+    sel.to = inv ? anchor : head;
+
+    if (doc.cm)
+      doc.cm.curOp.updateInput = doc.cm.curOp.selectionChanged =
+        doc.cm.curOp.cursorActivity = true;
+
+    signalLater(doc, "cursorActivity", doc);
+  }
+
+  function reCheckSelection(cm) {
+    setSelection(cm.doc, cm.doc.sel.from, cm.doc.sel.to, null, "push");
+  }
+
+  function skipAtomic(doc, pos, bias, mayClear) {
+    var flipped = false, curPos = pos;
+    var dir = bias || 1;
+    doc.cantEdit = false;
+    search: for (;;) {
+      var line = getLine(doc, curPos.line);
+      if (line.markedSpans) {
+        for (var i = 0; i < line.markedSpans.length; ++i) {
+          var sp = line.markedSpans[i], m = sp.marker;
+          if ((sp.from == null || (m.inclusiveLeft ? sp.from <= curPos.ch : sp.from < curPos.ch)) &&
+              (sp.to == null || (m.inclusiveRight ? sp.to >= curPos.ch : sp.to > curPos.ch))) {
+            if (mayClear) {
+              signal(m, "beforeCursorEnter");
+              if (m.explicitlyCleared) {
+                if (!line.markedSpans) break;
+                else {--i; continue;}
+              }
+            }
+            if (!m.atomic) continue;
+            var newPos = m.find()[dir < 0 ? "from" : "to"];
+            if (posEq(newPos, curPos)) {
+              newPos.ch += dir;
+              if (newPos.ch < 0) {
+                if (newPos.line > doc.first) newPos = clipPos(doc, Pos(newPos.line - 1));
+                else newPos = null;
+              } else if (newPos.ch > line.text.length) {
+                if (newPos.line < doc.first + doc.size - 1) newPos = Pos(newPos.line + 1, 0);
+                else newPos = null;
+              }
+              if (!newPos) {
+                if (flipped) {
+                  // Driven in a corner -- no valid cursor position found at all
+                  // -- try again *with* clearing, if we didn't already
+                  if (!mayClear) return skipAtomic(doc, pos, bias, true);
+                  // Otherwise, turn off editing until further notice, and return the start of the doc
+                  doc.cantEdit = true;
+                  return Pos(doc.first, 0);
+                }
+                flipped = true; newPos = pos; dir = -dir;
+              }
+            }
+            curPos = newPos;
+            continue search;
+          }
+        }
+      }
+      return curPos;
+    }
+  }
+
+  // SCROLLING
+
+  function scrollCursorIntoView(cm) {
+    var coords = scrollPosIntoView(cm, cm.doc.sel.head, cm.options.cursorScrollMargin);
+    if (!cm.state.focused) return;
+    var display = cm.display, box = getRect(display.sizer), doScroll = null;
+    if (coords.top + box.top < 0) doScroll = true;
+    else if (coords.bottom + box.top > (window.innerHeight || document.documentElement.clientHeight)) doScroll = false;
+    if (doScroll != null && !phantom) {
+      var hidden = display.cursor.style.display == "none";
+      if (hidden) {
+        display.cursor.style.display = "";
+        display.cursor.style.left = coords.left + "px";
+        display.cursor.style.top = (coords.top - display.viewOffset) + "px";
+      }
+      display.cursor.scrollIntoView(doScroll);
+      if (hidden) display.cursor.style.display = "none";
+    }
+  }
+
+  function scrollPosIntoView(cm, pos, margin) {
+    if (margin == null) margin = 0;
+    for (;;) {
+      var changed = false, coords = cursorCoords(cm, pos);
+      var scrollPos = calculateScrollPos(cm, coords.left, coords.top - margin, coords.left, coords.bottom + margin);
+      var startTop = cm.doc.scrollTop, startLeft = cm.doc.scrollLeft;
+      if (scrollPos.scrollTop != null) {
+        setScrollTop(cm, scrollPos.scrollTop);
+        if (Math.abs(cm.doc.scrollTop - startTop) > 1) changed = true;
+      }
+      if (scrollPos.scrollLeft != null) {
+        setScrollLeft(cm, scrollPos.scrollLeft);
+        if (Math.abs(cm.doc.scrollLeft - startLeft) > 1) changed = true;
+      }
+      if (!changed) return coords;
+    }
+  }
+
+  function scrollIntoView(cm, x1, y1, x2, y2) {
+    var scrollPos = calculateScrollPos(cm, x1, y1, x2, y2);
+    if (scrollPos.scrollTop != null) setScrollTop(cm, scrollPos.scrollTop);
+    if (scrollPos.scrollLeft != null) setScrollLeft(cm, scrollPos.scrollLeft);
+  }
+
+  function calculateScrollPos(cm, x1, y1, x2, y2) {
+    var display = cm.display, snapMargin = textHeight(cm.display);
+    if (y1 < 0) y1 = 0;
+    var screen = display.scroller.clientHeight - scrollerCutOff, screentop = display.scroller.scrollTop, result = {};
+    var docBottom = cm.doc.height + paddingVert(display);
+    var atTop = y1 < snapMargin, atBottom = y2 > docBottom - snapMargin;
+    if (y1 < screentop) {
+      result.scrollTop = atTop ? 0 : y1;
+    } else if (y2 > screentop + screen) {
+      var newTop = Math.min(y1, (atBottom ? docBottom : y2) - screen);
+      if (newTop != screentop) result.scrollTop = newTop;
+    }
+
+    var screenw = display.scroller.clientWidth - scrollerCutOff, screenleft = display.scroller.scrollLeft;
+    x1 += display.gutters.offsetWidth; x2 += display.gutters.offsetWidth;
+    var gutterw = display.gutters.offsetWidth;
+    var atLeft = x1 < gutterw + 10;
+    if (x1 < screenleft + gutterw || atLeft) {
+      if (atLeft) x1 = 0;
+      result.scrollLeft = Math.max(0, x1 - 10 - gutterw);
+    } else if (x2 > screenw + screenleft - 3) {
+      result.scrollLeft = x2 + 10 - screenw;
+    }
+    return result;
+  }
+
+  function updateScrollPos(cm, left, top) {
+    cm.curOp.updateScrollPos = {scrollLeft: left == null ? cm.doc.scrollLeft : left,
+                                scrollTop: top == null ? cm.doc.scrollTop : top};
+  }
+
+  function addToScrollPos(cm, left, top) {
+    var pos = cm.curOp.updateScrollPos || (cm.curOp.updateScrollPos = {scrollLeft: cm.doc.scrollLeft, scrollTop: cm.doc.scrollTop});
+    var scroll = cm.display.scroller;
+    pos.scrollTop = Math.max(0, Math.min(scroll.scrollHeight - scroll.clientHeight, pos.scrollTop + top));
+    pos.scrollLeft = Math.max(0, Math.min(scroll.scrollWidth - scroll.clientWidth, pos.scrollLeft + left));
+  }
+
+  // API UTILITIES
+
+  function indentLine(cm, n, how, aggressive) {
+    var doc = cm.doc;
+    if (how == null) how = "add";
+    if (how == "smart") {
+      if (!cm.doc.mode.indent) how = "prev";
+      else var state = getStateBefore(cm, n);
+    }
+
+    var tabSize = cm.options.tabSize;
+    var line = getLine(doc, n), curSpace = countColumn(line.text, null, tabSize);
+    var curSpaceString = line.text.match(/^\s*/)[0], indentation;
+    if (how == "smart") {
+      indentation = cm.doc.mode.indent(state, line.text.slice(curSpaceString.length), line.text);
+      if (indentation == Pass) {
+        if (!aggressive) return;
+        how = "prev";
+      }
+    }
+    if (how == "prev") {
+      if (n > doc.first) indentation = countColumn(getLine(doc, n-1).text, null, tabSize);
+      else indentation = 0;
+    } else if (how == "add") {
+      indentation = curSpace + cm.options.indentUnit;
+    } else if (how == "subtract") {
+      indentation = curSpace - cm.options.indentUnit;
+    } else if (typeof how == "number") {
+      indentation = curSpace + how;
+    }
+    indentation = Math.max(0, indentation);
+
+    var indentString = "", pos = 0;
+    if (cm.options.indentWithTabs)
+      for (var i = Math.floor(indentation / tabSize); i; --i) {pos += tabSize; indentString += "\t";}
+    if (pos < indentation) indentString += spaceStr(indentation - pos);
+
+    if (indentString != curSpaceString)
+      replaceRange(cm.doc, indentString, Pos(n, 0), Pos(n, curSpaceString.length), "+input");
+    line.stateAfter = null;
+  }
+
+  function changeLine(cm, handle, op) {
+    var no = handle, line = handle, doc = cm.doc;
+    if (typeof handle == "number") line = getLine(doc, clipLine(doc, handle));
+    else no = lineNo(handle);
+    if (no == null) return null;
+    if (op(line, no)) regChange(cm, no, no + 1);
+    else return null;
+    return line;
+  }
+
+  function findPosH(doc, pos, dir, unit, visually) {
+    var line = pos.line, ch = pos.ch, origDir = dir;
+    var lineObj = getLine(doc, line);
+    var possible = true;
+    function findNextLine() {
+      var l = line + dir;
+      if (l < doc.first || l >= doc.first + doc.size) return (possible = false);
+      line = l;
+      return lineObj = getLine(doc, l);
+    }
+    function moveOnce(boundToLine) {
+      var next = (visually ? moveVisually : moveLogically)(lineObj, ch, dir, true);
+      if (next == null) {
+        if (!boundToLine && findNextLine()) {
+          if (visually) ch = (dir < 0 ? lineRight : lineLeft)(lineObj);
+          else ch = dir < 0 ? lineObj.text.length : 0;
+        } else return (possible = false);
+      } else ch = next;
+      return true;
+    }
+
+    if (unit == "char") moveOnce();
+    else if (unit == "column") moveOnce(true);
+    else if (unit == "word" || unit == "group") {
+      var sawType = null, group = unit == "group";
+      for (var first = true;; first = false) {
+        if (dir < 0 && !moveOnce(!first)) break;
+        var cur = lineObj.text.charAt(ch) || "\n";
+        var type = isWordChar(cur) ? "w"
+          : !group ? null
+          : /\s/.test(cur) ? null
+          : "p";
+        if (sawType && sawType != type) {
+          if (dir < 0) {dir = 1; moveOnce();}
+          break;
+        }
+        if (type) sawType = type;
+        if (dir > 0 && !moveOnce(!first)) break;
+      }
+    }
+    var result = skipAtomic(doc, Pos(line, ch), origDir, true);
+    if (!possible) result.hitSide = true;
+    return result;
+  }
+
+  function findPosV(cm, pos, dir, unit) {
+    var doc = cm.doc, x = pos.left, y;
+    if (unit == "page") {
+      var pageSize = Math.min(cm.display.wrapper.clientHeight, window.innerHeight || document.documentElement.clientHeight);
+      y = pos.top + dir * (pageSize - (dir < 0 ? 1.5 : .5) * textHeight(cm.display));
+    } else if (unit == "line") {
+      y = dir > 0 ? pos.bottom + 3 : pos.top - 3;
+    }
+    for (;;) {
+      var target = coordsChar(cm, x, y);
+      if (!target.outside) break;
+      if (dir < 0 ? y <= 0 : y >= doc.height) { target.hitSide = true; break; }
+      y += dir * 5;
+    }
+    return target;
+  }
+
+  function findWordAt(line, pos) {
+    var start = pos.ch, end = pos.ch;
+    if (line) {
+      if ((pos.xRel < 0 || end == line.length) && start) --start; else ++end;
+      var startChar = line.charAt(start);
+      var check = isWordChar(startChar) ? isWordChar
+        : /\s/.test(startChar) ? function(ch) {return /\s/.test(ch);}
+        : function(ch) {return !/\s/.test(ch) && !isWordChar(ch);};
+      while (start > 0 && check(line.charAt(start - 1))) --start;
+      while (end < line.length && check(line.charAt(end))) ++end;
+    }
+    return {from: Pos(pos.line, start), to: Pos(pos.line, end)};
+  }
+
+  function selectLine(cm, line) {
+    extendSelection(cm.doc, Pos(line, 0), clipPos(cm.doc, Pos(line + 1, 0)));
+  }
+
+  // PROTOTYPE
+
+  // The publicly visible API. Note that operation(null, f) means
+  // 'wrap f in an operation, performed on its `this` parameter'
+
+  CodeMirror.prototype = {
+    constructor: CodeMirror,
+    focus: function(){window.focus(); focusInput(this); onFocus(this); fastPoll(this);},
+
+    setOption: function(option, value) {
+      var options = this.options, old = options[option];
+      if (options[option] == value && option != "mode") return;
+      options[option] = value;
+      if (optionHandlers.hasOwnProperty(option))
+        operation(this, optionHandlers[option])(this, value, old);
+    },
+
+    getOption: function(option) {return this.options[option];},
+    getDoc: function() {return this.doc;},
+
+    addKeyMap: function(map, bottom) {
+      this.state.keyMaps[bottom ? "push" : "unshift"](map);
+    },
+    removeKeyMap: function(map) {
+      var maps = this.state.keyMaps;
+      for (var i = 0; i < maps.length; ++i)
+        if (maps[i] == map || (typeof maps[i] != "string" && maps[i].name == map)) {
+          maps.splice(i, 1);
+          return true;
+        }
+    },
+
+    addOverlay: operation(null, function(spec, options) {
+      var mode = spec.token ? spec : CodeMirror.getMode(this.options, spec);
+      if (mode.startState) throw new Error("Overlays may not be stateful.");
+      this.state.overlays.push({mode: mode, modeSpec: spec, opaque: options && options.opaque});
+      this.state.modeGen++;
+      regChange(this);
+    }),
+    removeOverlay: operation(null, function(spec) {
+      var overlays = this.state.overlays;
+      for (var i = 0; i < overlays.length; ++i) {
+        var cur = overlays[i].modeSpec;
+        if (cur == spec || typeof spec == "string" && cur.name == spec) {
+          overlays.splice(i, 1);
+          this.state.modeGen++;
+          regChange(this);
+          return;
+        }
+      }
+    }),
+
+    indentLine: operation(null, function(n, dir, aggressive) {
+      if (typeof dir != "string" && typeof dir != "number") {
+        if (dir == null) dir = this.options.smartIndent ? "smart" : "prev";
+        else dir = dir ? "add" : "subtract";
+      }
+      if (isLine(this.doc, n)) indentLine(this, n, dir, aggressive);
+    }),
+    indentSelection: operation(null, function(how) {
+      var sel = this.doc.sel;
+      if (posEq(sel.from, sel.to)) return indentLine(this, sel.from.line, how);
+      var e = sel.to.line - (sel.to.ch ? 0 : 1);
+      for (var i = sel.from.line; i <= e; ++i) indentLine(this, i, how);
+    }),
+
+    // Fetch the parser token for a given character. Useful for hacks
+    // that want to inspect the mode state (say, for completion).
+    getTokenAt: function(pos, precise) {
+      var doc = this.doc;
+      pos = clipPos(doc, pos);
+      var state = getStateBefore(this, pos.line, precise), mode = this.doc.mode;
+      var line = getLine(doc, pos.line);
+      var stream = new StringStream(line.text, this.options.tabSize);
+      while (stream.pos < pos.ch && !stream.eol()) {
+        stream.start = stream.pos;
+        var style = mode.token(stream, state);
+      }
+      return {start: stream.start,
+              end: stream.pos,
+              string: stream.current(),
+              className: style || null, // Deprecated, use 'type' instead
+              type: style || null,
+              state: state};
+    },
+
+    getTokenTypeAt: function(pos) {
+      pos = clipPos(this.doc, pos);
+      var styles = getLineStyles(this, getLine(this.doc, pos.line));
+      var before = 0, after = (styles.length - 1) / 2, ch = pos.ch;
+      if (ch == 0) return styles[2];
+      for (;;) {
+        var mid = (before + after) >> 1;
+        if ((mid ? styles[mid * 2 - 1] : 0) >= ch) after = mid;
+        else if (styles[mid * 2 + 1] < ch) before = mid + 1;
+        else return styles[mid * 2 + 2];
+      }
+    },
+
+    getModeAt: function(pos) {
+      var mode = this.doc.mode;
+      if (!mode.innerMode) return mode;
+      return CodeMirror.innerMode(mode, this.getTokenAt(pos).state).mode;
+    },
+
+    getHelper: function(pos, type) {
+      if (!helpers.hasOwnProperty(type)) return;
+      var help = helpers[type], mode = this.getModeAt(pos);
+      return mode[type] && help[mode[type]] ||
+        mode.helperType && help[mode.helperType] ||
+        help[mode.name];
+    },
+
+    getStateAfter: function(line, precise) {
+      var doc = this.doc;
+      line = clipLine(doc, line == null ? doc.first + doc.size - 1: line);
+      return getStateBefore(this, line + 1, precise);
+    },
+
+    cursorCoords: function(start, mode) {
+      var pos, sel = this.doc.sel;
+      if (start == null) pos = sel.head;
+      else if (typeof start == "object") pos = clipPos(this.doc, start);
+      else pos = start ? sel.from : sel.to;
+      return cursorCoords(this, pos, mode || "page");
+    },
+
+    charCoords: function(pos, mode) {
+      return charCoords(this, clipPos(this.doc, pos), mode || "page");
+    },
+
+    coordsChar: function(coords, mode) {
+      coords = fromCoordSystem(this, coords, mode || "page");
+      return coordsChar(this, coords.left, coords.top);
+    },
+
+    lineAtHeight: function(height, mode) {
+      height = fromCoordSystem(this, {top: height, left: 0}, mode || "page").top;
+      return lineAtHeight(this.doc, height + this.display.viewOffset);
+    },
+    heightAtLine: function(line, mode) {
+      var end = false, last = this.doc.first + this.doc.size - 1;
+      if (line < this.doc.first) line = this.doc.first;
+      else if (line > last) { line = last; end = true; }
+      var lineObj = getLine(this.doc, line);
+      return intoCoordSystem(this, getLine(this.doc, line), {top: 0, left: 0}, mode || "page").top +
+        (end ? lineObj.height : 0);
+    },
+
+    defaultTextHeight: function() { return textHeight(this.display); },
+    defaultCharWidth: function() { return charWidth(this.display); },
+
+    setGutterMarker: operation(null, function(line, gutterID, value) {
+      return changeLine(this, line, function(line) {
+        var markers = line.gutterMarkers || (line.gutterMarkers = {});
+        markers[gutterID] = value;
+        if (!value && isEmpty(markers)) line.gutterMarkers = null;
+        return true;
+      });
+    }),
+
+    clearGutter: operation(null, function(gutterID) {
+      var cm = this, doc = cm.doc, i = doc.first;
+      doc.iter(function(line) {
+        if (line.gutterMarkers && line.gutterMarkers[gutterID]) {
+          line.gutterMarkers[gutterID] = null;
+          regChange(cm, i, i + 1);
+          if (isEmpty(line.gutterMarkers)) line.gutterMarkers = null;
+        }
+        ++i;
+      });
+    }),
+
+    addLineClass: operation(null, function(handle, where, cls) {
+      return changeLine(this, handle, function(line) {
+        var prop = where == "text" ? "textClass" : where == "background" ? "bgClass" : "wrapClass";
+        if (!line[prop]) line[prop] = cls;
+        else if (new RegExp("(?:^|\\s)" + cls + "(?:$|\\s)").test(line[prop])) return false;
+        else line[prop] += " " + cls;
+        return true;
+      });
+    }),
+
+    removeLineClass: operation(null, function(handle, where, cls) {
+      return changeLine(this, handle, function(line) {
+        var prop = where == "text" ? "textClass" : where == "background" ? "bgClass" : "wrapClass";
+        var cur = line[prop];
+        if (!cur) return false;
+        else if (cls == null) line[prop] = null;
+        else {
+          var found = cur.match(new RegExp("(?:^|\\s+)" + cls + "(?:$|\\s+)"));
+          if (!found) return false;
+          var end = found.index + found[0].length;
+          line[prop] = cur.slice(0, found.index) + (!found.index || end == cur.length ? "" : " ") + cur.slice(end) || null;
+        }
+        return true;
+      });
+    }),
+
+    addLineWidget: operation(null, function(handle, node, options) {
+      return addLineWidget(this, handle, node, options);
+    }),
+
+    removeLineWidget: function(widget) { widget.clear(); },
+
+    lineInfo: function(line) {
+      if (typeof line == "number") {
+        if (!isLine(this.doc, line)) return null;
+        var n = line;
+        line = getLine(this.doc, line);
+        if (!line) return null;
+      } else {
+        var n = lineNo(line);
+        if (n == null) return null;
+      }
+      return {line: n, handle: line, text: line.text, gutterMarkers: line.gutterMarkers,
+              textClass: line.textClass, bgClass: line.bgClass, wrapClass: line.wrapClass,
+              widgets: line.widgets};
+    },
+
+    getViewport: function() { return {from: this.display.showingFrom, to: this.display.showingTo};},
+
+    addWidget: function(pos, node, scroll, vert, horiz) {
+      var display = this.display;
+      pos = cursorCoords(this, clipPos(this.doc, pos));
+      var top = pos.bottom, left = pos.left;
+      node.style.position = "absolute";
+      display.sizer.appendChild(node);
+      if (vert == "over") {
+        top = pos.top;
+      } else if (vert == "above" || vert == "near") {
+        var vspace = Math.max(display.wrapper.clientHeight, this.doc.height),
+        hspace = Math.max(display.sizer.clientWidth, display.lineSpace.clientWidth);
+        // Default to positioning above (if specified and possible); otherwise default to positioning below
+        if ((vert == 'above' || pos.bottom + node.offsetHeight > vspace) && pos.top > node.offsetHeight)
+          top = pos.top - node.offsetHeight;
+        else if (pos.bottom + node.offsetHeight <= vspace)
+          top = pos.bottom;
+        if (left + node.offsetWidth > hspace)
+          left = hspace - node.offsetWidth;
+      }
+      node.style.top = top + "px";
+      node.style.left = node.style.right = "";
+      if (horiz == "right") {
+        left = display.sizer.clientWidth - node.offsetWidth;
+        node.style.right = "0px";
+      } else {
+        if (horiz == "left") left = 0;
+        else if (horiz == "middle") left = (display.sizer.clientWidth - node.offsetWidth) / 2;
+        node.style.left = left + "px";
+      }
+      if (scroll)
+        scrollIntoView(this, left, top, left + node.offsetWidth, top + node.offsetHeight);
+    },
+
+    triggerOnKeyDown: operation(null, onKeyDown),
+
+    execCommand: function(cmd) {return commands[cmd](this);},
+
+    findPosH: function(from, amount, unit, visually) {
+      var dir = 1;
+      if (amount < 0) { dir = -1; amount = -amount; }
+      for (var i = 0, cur = clipPos(this.doc, from); i < amount; ++i) {
+        cur = findPosH(this.doc, cur, dir, unit, visually);
+        if (cur.hitSide) break;
+      }
+      return cur;
+    },
+
+    moveH: operation(null, function(dir, unit) {
+      var sel = this.doc.sel, pos;
+      if (sel.shift || sel.extend || posEq(sel.from, sel.to))
+        pos = findPosH(this.doc, sel.head, dir, unit, this.options.rtlMoveVisually);
+      else
+        pos = dir < 0 ? sel.from : sel.to;
+      extendSelection(this.doc, pos, pos, dir);
+    }),
+
+    deleteH: operation(null, function(dir, unit) {
+      var sel = this.doc.sel;
+      if (!posEq(sel.from, sel.to)) replaceRange(this.doc, "", sel.from, sel.to, "+delete");
+      else replaceRange(this.doc, "", sel.from, findPosH(this.doc, sel.head, dir, unit, false), "+delete");
+      this.curOp.userSelChange = true;
+    }),
+
+    findPosV: function(from, amount, unit, goalColumn) {
+      var dir = 1, x = goalColumn;
+      if (amount < 0) { dir = -1; amount = -amount; }
+      for (var i = 0, cur = clipPos(this.doc, from); i < amount; ++i) {
+        var coords = cursorCoords(this, cur, "div");
+        if (x == null) x = coords.left;
+        else coords.left = x;
+        cur = findPosV(this, coords, dir, unit);
+        if (cur.hitSide) break;
+      }
+      return cur;
+    },
+
+    moveV: operation(null, function(dir, unit) {
+      var sel = this.doc.sel;
+      var pos = cursorCoords(this, sel.head, "div");
+      if (sel.goalColumn != null) pos.left = sel.goalColumn;
+      var target = findPosV(this, pos, dir, unit);
+
+      if (unit == "page") addToScrollPos(this, 0, charCoords(this, target, "div").top - pos.top);
+      extendSelection(this.doc, target, target, dir);
+      sel.goalColumn = pos.left;
+    }),
+
+    toggleOverwrite: function(value) {
+      if (value != null && value == this.state.overwrite) return;
+      if (this.state.overwrite = !this.state.overwrite)
+        this.display.cursor.className += " CodeMirror-overwrite";
+      else
+        this.display.cursor.className = this.display.cursor.className.replace(" CodeMirror-overwrite", "");
+    },
+    hasFocus: function() { return this.state.focused; },
+
+    scrollTo: operation(null, function(x, y) {
+      updateScrollPos(this, x, y);
+    }),
+    getScrollInfo: function() {
+      var scroller = this.display.scroller, co = scrollerCutOff;
+      return {left: scroller.scrollLeft, top: scroller.scrollTop,
+              height: scroller.scrollHeight - co, width: scroller.scrollWidth - co,
+              clientHeight: scroller.clientHeight - co, clientWidth: scroller.clientWidth - co};
+    },
+
+    scrollIntoView: operation(null, function(pos, margin) {
+      if (typeof pos == "number") pos = Pos(pos, 0);
+      if (!margin) margin = 0;
+      var coords = pos;
+
+      if (!pos || pos.line != null) {
+        this.curOp.scrollToPos = pos ? clipPos(this.doc, pos) : this.doc.sel.head;
+        this.curOp.scrollToPosMargin = margin;
+        coords = cursorCoords(this, this.curOp.scrollToPos);
+      }
+      var sPos = calculateScrollPos(this, coords.left, coords.top - margin, coords.right, coords.bottom + margin);
+      updateScrollPos(this, sPos.scrollLeft, sPos.scrollTop);
+    }),
+
+    setSize: function(width, height) {
+      function interpret(val) {
+        return typeof val == "number" || /^\d+$/.test(String(val)) ? val + "px" : val;
+      }
+      if (width != null) this.display.wrapper.style.width = interpret(width);
+      if (height != null) this.display.wrapper.style.height = interpret(height);
+      this.refresh();
+    },
+
+    operation: function(f){return runInOp(this, f);},
+
+    refresh: operation(null, function() {
+      clearCaches(this);
+      updateScrollPos(this, this.doc.scrollLeft, this.doc.scrollTop);
+      regChange(this);
+    }),
+
+    swapDoc: operation(null, function(doc) {
+      var old = this.doc;
+      old.cm = null;
+      attachDoc(this, doc);
+      clearCaches(this);
+      resetInput(this, true);
+      updateScrollPos(this, doc.scrollLeft, doc.scrollTop);
+      return old;
+    }),
+
+    getInputField: function(){return this.display.input;},
+    getWrapperElement: function(){return this.display.wrapper;},
+    getScrollerElement: function(){return this.display.scroller;},
+    getGutterElement: function(){return this.display.gutters;}
+  };
+  eventMixin(CodeMirror);
+
+  // OPTION DEFAULTS
+
+  var optionHandlers = CodeMirror.optionHandlers = {};
+
+  // The default configuration options.
+  var defaults = CodeMirror.defaults = {};
+
+  function option(name, deflt, handle, notOnInit) {
+    CodeMirror.defaults[name] = deflt;
+    if (handle) optionHandlers[name] =
+      notOnInit ? function(cm, val, old) {if (old != Init) handle(cm, val, old);} : handle;
+  }
+
+  var Init = CodeMirror.Init = {toString: function(){return "CodeMirror.Init";}};
+
+  // These two are, on init, called from the constructor because they
+  // have to be initialized before the editor can start at all.
+  option("value", "", function(cm, val) {
+    cm.setValue(val);
+  }, true);
+  option("mode", null, function(cm, val) {
+    cm.doc.modeOption = val;
+    loadMode(cm);
+  }, true);
+
+  option("indentUnit", 2, loadMode, true);
+  option("indentWithTabs", false);
+  option("smartIndent", true);
+  option("tabSize", 4, function(cm) {
+    loadMode(cm);
+    clearCaches(cm);
+    regChange(cm);
+  }, true);
+  option("electricChars", true);
+  option("rtlMoveVisually", !windows);
+
+  option("theme", "default", function(cm) {
+    themeChanged(cm);
+    guttersChanged(cm);
+  }, true);
+  option("keyMap", "default", keyMapChanged);
+  option("extraKeys", null);
+
+  option("onKeyEvent", null);
+  option("onDragEvent", null);
+
+  option("lineWrapping", false, wrappingChanged, true);
+  option("gutters", [], function(cm) {
+    setGuttersForLineNumbers(cm.options);
+    guttersChanged(cm);
+  }, true);
+  option("fixedGutter", true, function(cm, val) {
+    cm.display.gutters.style.left = val ? compensateForHScroll(cm.display) + "px" : "0";
+    cm.refresh();
+  }, true);
+  option("coverGutterNextToScrollbar", false, updateScrollbars, true);
+  option("lineNumbers", false, function(cm) {
+    setGuttersForLineNumbers(cm.options);
+    guttersChanged(cm);
+  }, true);
+  option("firstLineNumber", 1, guttersChanged, true);
+  option("lineNumberFormatter", function(integer) {return integer;}, guttersChanged, true);
+  option("showCursorWhenSelecting", false, updateSelection, true);
+
+  option("readOnly", false, function(cm, val) {
+    if (val == "nocursor") {onBlur(cm); cm.display.input.blur();}
+    else if (!val) resetInput(cm, true);
+  });
+  option("dragDrop", true);
+
+  option("cursorBlinkRate", 530);
+  option("cursorScrollMargin", 0);
+  option("cursorHeight", 1);
+  option("workTime", 100);
+  option("workDelay", 100);
+  option("flattenSpans", true);
+  option("pollInterval", 100);
+  option("undoDepth", 40, function(cm, val){cm.doc.history.undoDepth = val;});
+  option("historyEventDelay", 500);
+  option("viewportMargin", 10, function(cm){cm.refresh();}, true);
+  option("maxHighlightLength", 10000, function(cm){loadMode(cm); cm.refresh();}, true);
+  option("moveInputWithCursor", true, function(cm, val) {
+    if (!val) cm.display.inputDiv.style.top = cm.display.inputDiv.style.left = 0;
+  });
+
+  option("tabindex", null, function(cm, val) {
+    cm.display.input.tabIndex = val || "";
+  });
+  option("autofocus", null);
+
+  // MODE DEFINITION AND QUERYING
+
+  // Known modes, by name and by MIME
+  var modes = CodeMirror.modes = {}, mimeModes = CodeMirror.mimeModes = {};
+
+  CodeMirror.defineMode = function(name, mode) {
+    if (!CodeMirror.defaults.mode && name != "null") CodeMirror.defaults.mode = name;
+    if (arguments.length > 2) {
+      mode.dependencies = [];
+      for (var i = 2; i < arguments.length; ++i) mode.dependencies.push(arguments[i]);
+    }
+    modes[name] = mode;
+  };
+
+  CodeMirror.defineMIME = function(mime, spec) {
+    mimeModes[mime] = spec;
+  };
+
+  CodeMirror.resolveMode = function(spec) {
+    if (typeof spec == "string" && mimeModes.hasOwnProperty(spec)) {
+      spec = mimeModes[spec];
+    } else if (spec && typeof spec.name == "string" && mimeModes.hasOwnProperty(spec.name)) {
+      var found = mimeModes[spec.name];
+      spec = createObj(found, spec);
+      spec.name = found.name;
+    } else if (typeof spec == "string" && /^[\w\-]+\/[\w\-]+\+xml$/.test(spec)) {
+      return CodeMirror.resolveMode("application/xml");
+    }
+    if (typeof spec == "string") return {name: spec};
+    else return spec || {name: "null"};
+  };
+
+  CodeMirror.getMode = function(options, spec) {
+    var spec = CodeMirror.resolveMode(spec);
+    var mfactory = modes[spec.name];
+    if (!mfactory) return CodeMirror.getMode(options, "text/plain");
+    var modeObj = mfactory(options, spec);
+    if (modeExtensions.hasOwnProperty(spec.name)) {
+      var exts = modeExtensions[spec.name];
+      for (var prop in exts) {
+        if (!exts.hasOwnProperty(prop)) continue;
+        if (modeObj.hasOwnProperty(prop)) modeObj["_" + prop] = modeObj[prop];
+        modeObj[prop] = exts[prop];
+      }
+    }
+    modeObj.name = spec.name;
+
+    return modeObj;
+  };
+
+  CodeMirror.defineMode("null", function() {
+    return {token: function(stream) {stream.skipToEnd();}};
+  });
+  CodeMirror.defineMIME("text/plain", "null");
+
+  var modeExtensions = CodeMirror.modeExtensions = {};
+  CodeMirror.extendMode = function(mode, properties) {
+    var exts = modeExtensions.hasOwnProperty(mode) ? modeExtensions[mode] : (modeExtensions[mode] = {});
+    copyObj(properties, exts);
+  };
+
+  // EXTENSIONS
+
+  CodeMirror.defineExtension = function(name, func) {
+    CodeMirror.prototype[name] = func;
+  };
+  CodeMirror.defineDocExtension = function(name, func) {
+    Doc.prototype[name] = func;
+  };
+  CodeMirror.defineOption = option;
+
+  var initHooks = [];
+  CodeMirror.defineInitHook = function(f) {initHooks.push(f);};
+
+  var helpers = CodeMirror.helpers = {};
+  CodeMirror.registerHelper = function(type, name, value) {
+    if (!helpers.hasOwnProperty(type)) helpers[type] = CodeMirror[type] = {};
+    helpers[type][name] = value;
+  };
+
+  // UTILITIES
+
+  CodeMirror.isWordChar = isWordChar;
+
+  // MODE STATE HANDLING
+
+  // Utility functions for working with state. Exported because modes
+  // sometimes need to do this.
+  function copyState(mode, state) {
+    if (state === true) return state;
+    if (mode.copyState) return mode.copyState(state);
+    var nstate = {};
+    for (var n in state) {
+      var val = state[n];
+      if (val instanceof Array) val = val.concat([]);
+      nstate[n] = val;
+    }
+    return nstate;
+  }
+  CodeMirror.copyState = copyState;
+
+  function startState(mode, a1, a2) {
+    return mode.startState ? mode.startState(a1, a2) : true;
+  }
+  CodeMirror.startState = startState;
+
+  CodeMirror.innerMode = function(mode, state) {
+    while (mode.innerMode) {
+      var info = mode.innerMode(state);
+      state = info.state;
+      mode = info.mode;
+    }
+    return info || {mode: mode, state: state};
+  };
+
+  // STANDARD COMMANDS
+
+  var commands = CodeMirror.commands = {
+    selectAll: function(cm) {cm.setSelection(Pos(cm.firstLine(), 0), Pos(cm.lastLine()));},
+    killLine: function(cm) {
+      var from = cm.getCursor(true), to = cm.getCursor(false), sel = !posEq(from, to);
+      if (!sel && cm.getLine(from.line).length == from.ch)
+        cm.replaceRange("", from, Pos(from.line + 1, 0), "+delete");
+      else cm.replaceRange("", from, sel ? to : Pos(from.line), "+delete");
+    },
+    deleteLine: function(cm) {
+      var l = cm.getCursor().line;
+      cm.replaceRange("", Pos(l, 0), Pos(l), "+delete");
+    },
+    delLineLeft: function(cm) {
+      var cur = cm.getCursor();
+      cm.replaceRange("", Pos(cur.line, 0), cur, "+delete");
+    },
+    undo: function(cm) {cm.undo();},
+    redo: function(cm) {cm.redo();},
+    goDocStart: function(cm) {cm.extendSelection(Pos(cm.firstLine(), 0));},
+    goDocEnd: function(cm) {cm.extendSelection(Pos(cm.lastLine()));},
+    goLineStart: function(cm) {
+      cm.extendSelection(lineStart(cm, cm.getCursor().line));
+    },
+    goLineStartSmart: function(cm) {
+      var cur = cm.getCursor(), start = lineStart(cm, cur.line);
+      var line = cm.getLineHandle(start.line);
+      var order = getOrder(line);
+      if (!order || order[0].level == 0) {
+        var firstNonWS = Math.max(0, line.text.search(/\S/));
+        var inWS = cur.line == start.line && cur.ch <= firstNonWS && cur.ch;
+        cm.extendSelection(Pos(start.line, inWS ? 0 : firstNonWS));
+      } else cm.extendSelection(start);
+    },
+    goLineEnd: function(cm) {
+      cm.extendSelection(lineEnd(cm, cm.getCursor().line));
+    },
+    goLineRight: function(cm) {
+      var top = cm.charCoords(cm.getCursor(), "div").top + 5;
+      cm.extendSelection(cm.coordsChar({left: cm.display.lineDiv.offsetWidth + 100, top: top}, "div"));
+    },
+    goLineLeft: function(cm) {
+      var top = cm.charCoords(cm.getCursor(), "div").top + 5;
+      cm.extendSelection(cm.coordsChar({left: 0, top: top}, "div"));
+    },
+    goLineUp: function(cm) {cm.moveV(-1, "line");},
+    goLineDown: function(cm) {cm.moveV(1, "line");},
+    goPageUp: function(cm) {cm.moveV(-1, "page");},
+    goPageDown: function(cm) {cm.moveV(1, "page");},
+    goCharLeft: function(cm) {cm.moveH(-1, "char");},
+    goCharRight: function(cm) {cm.moveH(1, "char");},
+    goColumnLeft: function(cm) {cm.moveH(-1, "column");},
+    goColumnRight: function(cm) {cm.moveH(1, "column");},
+    goWordLeft: function(cm) {cm.moveH(-1, "word");},
+    goGroupRight: function(cm) {cm.moveH(1, "group");},
+    goGroupLeft: function(cm) {cm.moveH(-1, "group");},
+    goWordRight: function(cm) {cm.moveH(1, "word");},
+    delCharBefore: function(cm) {cm.deleteH(-1, "char");},
+    delCharAfter: function(cm) {cm.deleteH(1, "char");},
+    delWordBefore: function(cm) {cm.deleteH(-1, "word");},
+    delWordAfter: function(cm) {cm.deleteH(1, "word");},
+    delGroupBefore: function(cm) {cm.deleteH(-1, "group");},
+    delGroupAfter: function(cm) {cm.deleteH(1, "group");},
+    indentAuto: function(cm) {cm.indentSelection("smart");},
+    indentMore: function(cm) {cm.indentSelection("add");},
+    indentLess: function(cm) {cm.indentSelection("subtract");},
+    insertTab: function(cm) {cm.replaceSelection("\t", "end", "+input");},
+    defaultTab: function(cm) {
+      if (cm.somethingSelected()) cm.indentSelection("add");
+      else cm.replaceSelection("\t", "end", "+input");
+    },
+    transposeChars: function(cm) {
+      var cur = cm.getCursor(), line = cm.getLine(cur.line);
+      if (cur.ch > 0 && cur.ch < line.length - 1)
+        cm.replaceRange(line.charAt(cur.ch) + line.charAt(cur.ch - 1),
+                        Pos(cur.line, cur.ch - 1), Pos(cur.line, cur.ch + 1));
+    },
+    newlineAndIndent: function(cm) {
+      operation(cm, function() {
+        cm.replaceSelection("\n", "end", "+input");
+        cm.indentLine(cm.getCursor().line, null, true);
+      })();
+    },
+    toggleOverwrite: function(cm) {cm.toggleOverwrite();}
+  };
+
+  // STANDARD KEYMAPS
+
+  var keyMap = CodeMirror.keyMap = {};
+  keyMap.basic = {
+    "Left": "goCharLeft", "Right": "goCharRight", "Up": "goLineUp", "Down": "goLineDown",
+    "End": "goLineEnd", "Home": "goLineStartSmart", "PageUp": "goPageUp", "PageDown": "goPageDown",
+    "Delete": "delCharAfter", "Backspace": "delCharBefore", "Tab": "defaultTab", "Shift-Tab": "indentAuto",
+    "Enter": "newlineAndIndent", "Insert": "toggleOverwrite"
+  };
+  // Note that the save and find-related commands aren't defined by
+  // default. Unknown commands are simply ignored.
+  keyMap.pcDefault = {
+    "Ctrl-A": "selectAll", "Ctrl-D": "deleteLine", "Ctrl-Z": "undo", "Shift-Ctrl-Z": "redo", "Ctrl-Y": "redo",
+    "Ctrl-Home": "goDocStart", "Alt-Up": "goDocStart", "Ctrl-End": "goDocEnd", "Ctrl-Down": "goDocEnd",
+    "Ctrl-Left": "goGroupLeft", "Ctrl-Right": "goGroupRight", "Alt-Left": "goLineStart", "Alt-Right": "goLineEnd",
+    "Ctrl-Backspace": "delGroupBefore", "Ctrl-Delete": "delGroupAfter", "Ctrl-S": "save", "Ctrl-F": "find",
+    "Ctrl-G": "findNext", "Shift-Ctrl-G": "findPrev", "Shift-Ctrl-F": "replace", "Shift-Ctrl-R": "replaceAll",
+    "Ctrl-[": "indentLess", "Ctrl-]": "indentMore",
+    fallthrough: "basic"
+  };
+  keyMap.macDefault = {
+    "Cmd-A": "selectAll", "Cmd-D": "deleteLine", "Cmd-Z": "undo", "Shift-Cmd-Z": "redo", "Cmd-Y": "redo",
+    "Cmd-Up": "goDocStart", "Cmd-End": "goDocEnd", "Cmd-Down": "goDocEnd", "Alt-Left": "goGroupLeft",
+    "Alt-Right": "goGroupRight", "Cmd-Left": "goLineStart", "Cmd-Right": "goLineEnd", "Alt-Backspace": "delGroupBefore",
+    "Ctrl-Alt-Backspace": "delGroupAfter", "Alt-Delete": "delGroupAfter", "Cmd-S": "save", "Cmd-F": "find",
+    "Cmd-G": "findNext", "Shift-Cmd-G": "findPrev", "Cmd-Alt-F": "replace", "Shift-Cmd-Alt-F": "replaceAll",
+    "Cmd-[": "indentLess", "Cmd-]": "indentMore", "Cmd-Backspace": "delLineLeft",
+    fallthrough: ["basic", "emacsy"]
+  };
+  keyMap["default"] = mac ? keyMap.macDefault : keyMap.pcDefault;
+  keyMap.emacsy = {
+    "Ctrl-F": "goCharRight", "Ctrl-B": "goCharLeft", "Ctrl-P": "goLineUp", "Ctrl-N": "goLineDown",
+    "Alt-F": "goWordRight", "Alt-B": "goWordLeft", "Ctrl-A": "goLineStart", "Ctrl-E": "goLineEnd",
+    "Ctrl-V": "goPageDown", "Shift-Ctrl-V": "goPageUp", "Ctrl-D": "delCharAfter", "Ctrl-H": "delCharBefore",
+    "Alt-D": "delWordAfter", "Alt-Backspace": "delWordBefore", "Ctrl-K": "killLine", "Ctrl-T": "transposeChars"
+  };
+
+  // KEYMAP DISPATCH
+
+  function getKeyMap(val) {
+    if (typeof val == "string") return keyMap[val];
+    else return val;
+  }
+
+  function lookupKey(name, maps, handle) {
+    function lookup(map) {
+      map = getKeyMap(map);
+      var found = map[name];
+      if (found === false) return "stop";
+      if (found != null && handle(found)) return true;
+      if (map.nofallthrough) return "stop";
+
+      var fallthrough = map.fallthrough;
+      if (fallthrough == null) return false;
+      if (Object.prototype.toString.call(fallthrough) != "[object Array]")
+        return lookup(fallthrough);
+      for (var i = 0, e = fallthrough.length; i < e; ++i) {
+        var done = lookup(fallthrough[i]);
+        if (done) return done;
+      }
+      return false;
+    }
+
+    for (var i = 0; i < maps.length; ++i) {
+      var done = lookup(maps[i]);
+      if (done) return done != "stop";
+    }
+  }
+  function isModifierKey(event) {
+    var name = keyNames[event.keyCode];
+    return name == "Ctrl" || name == "Alt" || name == "Shift" || name == "Mod";
+  }
+  function keyName(event, noShift) {
+    if (opera && event.keyCode == 34 && event["char"]) return false;
+    var name = keyNames[event.keyCode];
+    if (name == null || event.altGraphKey) return false;
+    if (event.altKey) name = "Alt-" + name;
+    if (flipCtrlCmd ? event.metaKey : event.ctrlKey) name = "Ctrl-" + name;
+    if (flipCtrlCmd ? event.ctrlKey : event.metaKey) name = "Cmd-" + name;
+    if (!noShift && event.shiftKey) name = "Shift-" + name;
+    return name;
+  }
+  CodeMirror.lookupKey = lookupKey;
+  CodeMirror.isModifierKey = isModifierKey;
+  CodeMirror.keyName = keyName;
+
+  // FROMTEXTAREA
+
+  CodeMirror.fromTextArea = function(textarea, options) {
+    if (!options) options = {};
+    options.value = textarea.value;
+    if (!options.tabindex && textarea.tabindex)
+      options.tabindex = textarea.tabindex;
+    if (!options.placeholder && textarea.placeholder)
+      options.placeholder = textarea.placeholder;
+    // Set autofocus to true if this textarea is focused, or if it has
+    // autofocus and no other element is focused.
+    if (options.autofocus == null) {
+      var hasFocus = document.body;
+      // doc.activeElement occasionally throws on IE
+      try { hasFocus = document.activeElement; } catch(e) {}
+      options.autofocus = hasFocus == textarea ||
+        textarea.getAttribute("autofocus") != null && hasFocus == document.body;
+    }
+
+    function save() {textarea.value = cm.getValue();}
+    if (textarea.form) {
+      on(textarea.form, "submit", save);
+      // Deplorable hack to make the submit method do the right thing.
+      if (!options.leaveSubmitMethodAlone) {
+        var form = textarea.form, realSubmit = form.submit;
+        try {
+          var wrappedSubmit = form.submit = function() {
+            save();
+            form.submit = realSubmit;
+            form.submit();
+            form.submit = wrappedSubmit;
+          };
+        } catch(e) {}
+      }
+    }
+
+    textarea.style.display = "none";
+    var cm = CodeMirror(function(node) {
+      textarea.parentNode.insertBefore(node, textarea.nextSibling);
+    }, options);
+    cm.save = save;
+    cm.getTextArea = function() { return textarea; };
+    cm.toTextArea = function() {
+      save();
+      textarea.parentNode.removeChild(cm.getWrapperElement());
+      textarea.style.display = "";
+      if (textarea.form) {
+        off(textarea.form, "submit", save);
+        if (typeof textarea.form.submit == "function")
+          textarea.form.submit = realSubmit;
+      }
+    };
+    return cm;
+  };
+
+  // STRING STREAM
+
+  // Fed to the mode parsers, provides helper functions to make
+  // parsers more succinct.
+
+  // The character stream used by a mode's parser.
+  function StringStream(string, tabSize) {
+    this.pos = this.start = 0;
+    this.string = string;
+    this.tabSize = tabSize || 8;
+    this.lastColumnPos = this.lastColumnValue = 0;
+  }
+
+  StringStream.prototype = {
+    eol: function() {return this.pos >= this.string.length;},
+    sol: function() {return this.pos == 0;},
+    peek: function() {return this.string.charAt(this.pos) || undefined;},
+    next: function() {
+      if (this.pos < this.string.length)
+        return this.string.charAt(this.pos++);
+    },
+    eat: function(match) {
+      var ch = this.string.charAt(this.pos);
+      if (typeof match == "string") var ok = ch == match;
+      else var ok = ch && (match.test ? match.test(ch) : match(ch));
+      if (ok) {++this.pos; return ch;}
+    },
+    eatWhile: function(match) {
+      var start = this.pos;
+      while (this.eat(match)){}
+      return this.pos > start;
+    },
+    eatSpace: function() {
+      var start = this.pos;
+      while (/[\s\u00a0]/.test(this.string.charAt(this.pos))) ++this.pos;
+      return this.pos > start;
+    },
+    skipToEnd: function() {this.pos = this.string.length;},
+    skipTo: function(ch) {
+      var found = this.string.indexOf(ch, this.pos);
+      if (found > -1) {this.pos = found; return true;}
+    },
+    backUp: function(n) {this.pos -= n;},
+    column: function() {
+      if (this.lastColumnPos < this.start) {
+        this.lastColumnValue = countColumn(this.string, this.start, this.tabSize, this.lastColumnPos, this.lastColumnValue);
+        this.lastColumnPos = this.start;
+      }
+      return this.lastColumnValue;
+    },
+    indentation: function() {return countColumn(this.string, null, this.tabSize);},
+    match: function(pattern, consume, caseInsensitive) {
+      if (typeof pattern == "string") {
+        var cased = function(str) {return caseInsensitive ? str.toLowerCase() : str;};
+        var substr = this.string.substr(this.pos, pattern.length);
+        if (cased(substr) == cased(pattern)) {
+          if (consume !== false) this.pos += pattern.length;
+          return true;
+        }
+      } else {
+        var match = this.string.slice(this.pos).match(pattern);
+        if (match && match.index > 0) return null;
+        if (match && consume !== false) this.pos += match[0].length;
+        return match;
+      }
+    },
+    current: function(){return this.string.slice(this.start, this.pos);}
+  };
+  CodeMirror.StringStream = StringStream;
+
+  // TEXTMARKERS
+
+  function TextMarker(doc, type) {
+    this.lines = [];
+    this.type = type;
+    this.doc = doc;
+  }
+  CodeMirror.TextMarker = TextMarker;
+  eventMixin(TextMarker);
+
+  TextMarker.prototype.clear = function() {
+    if (this.explicitlyCleared) return;
+    var cm = this.doc.cm, withOp = cm && !cm.curOp;
+    if (withOp) startOperation(cm);
+    var min = null, max = null;
+    for (var i = 0; i < this.lines.length; ++i) {
+      var line = this.lines[i];
+      var span = getMarkedSpanFor(line.markedSpans, this);
+      if (span.to != null) max = lineNo(line);
+      line.markedSpans = removeMarkedSpan(line.markedSpans, span);
+      if (span.from != null)
+        min = lineNo(line);
+      else if (this.collapsed && !lineIsHidden(this.doc, line) && cm)
+        updateLineHeight(line, textHeight(cm.display));
+    }
+    if (cm && this.collapsed && !cm.options.lineWrapping) for (var i = 0; i < this.lines.length; ++i) {
+      var visual = visualLine(cm.doc, this.lines[i]), len = lineLength(cm.doc, visual);
+      if (len > cm.display.maxLineLength) {
+        cm.display.maxLine = visual;
+        cm.display.maxLineLength = len;
+        cm.display.maxLineChanged = true;
+      }
+    }
+
+    if (min != null && cm) regChange(cm, min, max + 1);
+    this.lines.length = 0;
+    this.explicitlyCleared = true;
+    if (this.atomic && this.doc.cantEdit) {
+      this.doc.cantEdit = false;
+      if (cm) reCheckSelection(cm);
+    }
+    if (withOp) endOperation(cm);
+    signalLater(this, "clear");
+  };
+
+  TextMarker.prototype.find = function() {
+    var from, to;
+    for (var i = 0; i < this.lines.length; ++i) {
+      var line = this.lines[i];
+      var span = getMarkedSpanFor(line.markedSpans, this);
+      if (span.from != null || span.to != null) {
+        var found = lineNo(line);
+        if (span.from != null) from = Pos(found, span.from);
+        if (span.to != null) to = Pos(found, span.to);
+      }
+    }
+    if (this.type == "bookmark") return from;
+    return from && {from: from, to: to};
+  };
+
+  TextMarker.prototype.changed = function() {
+    var pos = this.find(), cm = this.doc.cm;
+    if (!pos || !cm) return;
+    var line = getLine(this.doc, pos.from.line);
+    clearCachedMeasurement(cm, line);
+    if (pos.from.line >= cm.display.showingFrom && pos.from.line < cm.display.showingTo) {
+      for (var node = cm.display.lineDiv.firstChild; node; node = node.nextSibling) if (node.lineObj == line) {
+        if (node.offsetHeight != line.height) updateLineHeight(line, node.offsetHeight);
+        break;
+      }
+      runInOp(cm, function() { cm.curOp.selectionChanged = true; });
+    }
+  };
+
+  TextMarker.prototype.attachLine = function(line) {
+    if (!this.lines.length && this.doc.cm) {
+      var op = this.doc.cm.curOp;
+      if (!op.maybeHiddenMarkers || indexOf(op.maybeHiddenMarkers, this) == -1)
+        (op.maybeUnhiddenMarkers || (op.maybeUnhiddenMarkers = [])).push(this);
+    }
+    this.lines.push(line);
+  };
+  TextMarker.prototype.detachLine = function(line) {
+    this.lines.splice(indexOf(this.lines, line), 1);
+    if (!this.lines.length && this.doc.cm) {
+      var op = this.doc.cm.curOp;
+      (op.maybeHiddenMarkers || (op.maybeHiddenMarkers = [])).push(this);
+    }
+  };
+
+  function markText(doc, from, to, options, type) {
+    if (options && options.shared) return markTextShared(doc, from, to, options, type);
+    if (doc.cm && !doc.cm.curOp) return operation(doc.cm, markText)(doc, from, to, options, type);
+
+    var marker = new TextMarker(doc, type);
+    if (type == "range" && !posLess(from, to)) return marker;
+    if (options) copyObj(options, marker);
+    if (marker.replacedWith) {
+      marker.collapsed = true;
+      marker.replacedWith = elt("span", [marker.replacedWith], "CodeMirror-widget");
+      if (!options.handleMouseEvents) marker.replacedWith.ignoreEvents = true;
+    }
+    if (marker.collapsed) sawCollapsedSpans = true;
+
+    if (marker.addToHistory)
+      addToHistory(doc, {from: from, to: to, origin: "markText"},
+                   {head: doc.sel.head, anchor: doc.sel.anchor}, NaN);
+
+    var curLine = from.line, size = 0, collapsedAtStart, collapsedAtEnd, cm = doc.cm, updateMaxLine;
+    doc.iter(curLine, to.line + 1, function(line) {
+      if (cm && marker.collapsed && !cm.options.lineWrapping && visualLine(doc, line) == cm.display.maxLine)
+        updateMaxLine = true;
+      var span = {from: null, to: null, marker: marker};
+      size += line.text.length;
+      if (curLine == from.line) {span.from = from.ch; size -= from.ch;}
+      if (curLine == to.line) {span.to = to.ch; size -= line.text.length - to.ch;}
+      if (marker.collapsed) {
+        if (curLine == to.line) collapsedAtEnd = collapsedSpanAt(line, to.ch);
+        if (curLine == from.line) collapsedAtStart = collapsedSpanAt(line, from.ch);
+        else updateLineHeight(line, 0);
+      }
+      addMarkedSpan(line, span);
+      ++curLine;
+    });
+    if (marker.collapsed) doc.iter(from.line, to.line + 1, function(line) {
+      if (lineIsHidden(doc, line)) updateLineHeight(line, 0);
+    });
+
+    if (marker.clearOnEnter) on(marker, "beforeCursorEnter", function() { marker.clear(); });
+
+    if (marker.readOnly) {
+      sawReadOnlySpans = true;
+      if (doc.history.done.length || doc.history.undone.length)
+        doc.clearHistory();
+    }
+    if (marker.collapsed) {
+      if (collapsedAtStart != collapsedAtEnd)
+        throw new Error("Inserting collapsed marker overlapping an existing one");
+      marker.size = size;
+      marker.atomic = true;
+    }
+    if (cm) {
+      if (updateMaxLine) cm.curOp.updateMaxLine = true;
+      if (marker.className || marker.title || marker.startStyle || marker.endStyle || marker.collapsed)
+        regChange(cm, from.line, to.line + 1);
+      if (marker.atomic) reCheckSelection(cm);
+    }
+    return marker;
+  }
+
+  // SHARED TEXTMARKERS
+
+  function SharedTextMarker(markers, primary) {
+    this.markers = markers;
+    this.primary = primary;
+    for (var i = 0, me = this; i < markers.length; ++i) {
+      markers[i].parent = this;
+      on(markers[i], "clear", function(){me.clear();});
+    }
+  }
+  CodeMirror.SharedTextMarker = SharedTextMarker;
+  eventMixin(SharedTextMarker);
+
+  SharedTextMarker.prototype.clear = function() {
+    if (this.explicitlyCleared) return;
+    this.explicitlyCleared = true;
+    for (var i = 0; i < this.markers.length; ++i)
+      this.markers[i].clear();
+    signalLater(this, "clear");
+  };
+  SharedTextMarker.prototype.find = function() {
+    return this.primary.find();
+  };
+
+  function markTextShared(doc, from, to, options, type) {
+    options = copyObj(options);
+    options.shared = false;
+    var markers = [markText(doc, from, to, options, type)], primary = markers[0];
+    var widget = options.replacedWith;
+    linkedDocs(doc, function(doc) {
+      if (widget) options.replacedWith = widget.cloneNode(true);
+      markers.push(markText(doc, clipPos(doc, from), clipPos(doc, to), options, type));
+      for (var i = 0; i < doc.linked.length; ++i)
+        if (doc.linked[i].isParent) return;
+      primary = lst(markers);
+    });
+    return new SharedTextMarker(markers, primary);
+  }
+
+  // TEXTMARKER SPANS
+
+  function getMarkedSpanFor(spans, marker) {
+    if (spans) for (var i = 0; i < spans.length; ++i) {
+      var span = spans[i];
+      if (span.marker == marker) return span;
+    }
+  }
+  function removeMarkedSpan(spans, span) {
+    for (var r, i = 0; i < spans.length; ++i)
+      if (spans[i] != span) (r || (r = [])).push(spans[i]);
+    return r;
+  }
+  function addMarkedSpan(line, span) {
+    line.markedSpans = line.markedSpans ? line.markedSpans.concat([span]) : [span];
+    span.marker.attachLine(line);
+  }
+
+  function markedSpansBefore(old, startCh, isInsert) {
+    if (old) for (var i = 0, nw; i < old.length; ++i) {
+      var span = old[i], marker = span.marker;
+      var startsBefore = span.from == null || (marker.inclusiveLeft ? span.from <= startCh : span.from < startCh);
+      if (startsBefore || marker.type == "bookmark" && span.from == startCh && (!isInsert || !span.marker.insertLeft)) {
+        var endsAfter = span.to == null || (marker.inclusiveRight ? span.to >= startCh : span.to > startCh);
+        (nw || (nw = [])).push({from: span.from,
+                                to: endsAfter ? null : span.to,
+                                marker: marker});
+      }
+    }
+    return nw;
+  }
+
+  function markedSpansAfter(old, endCh, isInsert) {
+    if (old) for (var i = 0, nw; i < old.length; ++i) {
+      var span = old[i], marker = span.marker;
+      var endsAfter = span.to == null || (marker.inclusiveRight ? span.to >= endCh : span.to > endCh);
+      if (endsAfter || marker.type == "bookmark" && span.from == endCh && (!isInsert || span.marker.insertLeft)) {
+        var startsBefore = span.from == null || (marker.inclusiveLeft ? span.from <= endCh : span.from < endCh);
+        (nw || (nw = [])).push({from: startsBefore ? null : span.from - endCh,
+                                to: span.to == null ? null : span.to - endCh,
+                                marker: marker});
+      }
+    }
+    return nw;
+  }
+
+  function stretchSpansOverChange(doc, change) {
+    var oldFirst = isLine(doc, change.from.line) && getLine(doc, change.from.line).markedSpans;
+    var oldLast = isLine(doc, change.to.line) && getLine(doc, change.to.line).markedSpans;
+    if (!oldFirst && !oldLast) return null;
+
+    var startCh = change.from.ch, endCh = change.to.ch, isInsert = posEq(change.from, change.to);
+    // Get the spans that 'stick out' on both sides
+    var first = markedSpansBefore(oldFirst, startCh, isInsert);
+    var last = markedSpansAfter(oldLast, endCh, isInsert);
+
+    // Next, merge those two ends
+    var sameLine = change.text.length == 1, offset = lst(change.text).length + (sameLine ? startCh : 0);
+    if (first) {
+      // Fix up .to properties of first
+      for (var i = 0; i < first.length; ++i) {
+        var span = first[i];
+        if (span.to == null) {
+          var found = getMarkedSpanFor(last, span.marker);
+          if (!found) span.to = startCh;
+          else if (sameLine) span.to = found.to == null ? null : found.to + offset;
+        }
+      }
+    }
+    if (last) {
+      // Fix up .from in last (or move them into first in case of sameLine)
+      for (var i = 0; i < last.length; ++i) {
+        var span = last[i];
+        if (span.to != null) span.to += offset;
+        if (span.from == null) {
+          var found = getMarkedSpanFor(first, span.marker);
+          if (!found) {
+            span.from = offset;
+            if (sameLine) (first || (first = [])).push(span);
+          }
+        } else {
+          span.from += offset;
+          if (sameLine) (first || (first = [])).push(span);
+        }
+      }
+    }
+    if (sameLine && first) {
+      // Make sure we didn't create any zero-length spans
+      for (var i = 0; i < first.length; ++i)
+        if (first[i].from != null && first[i].from == first[i].to && first[i].marker.type != "bookmark")
+          first.splice(i--, 1);
+      if (!first.length) first = null;
+    }
+
+    var newMarkers = [first];
+    if (!sameLine) {
+      // Fill gap with whole-line-spans
+      var gap = change.text.length - 2, gapMarkers;
+      if (gap > 0 && first)
+        for (var i = 0; i < first.length; ++i)
+          if (first[i].to == null)
+            (gapMarkers || (gapMarkers = [])).push({from: null, to: null, marker: first[i].marker});
+      for (var i = 0; i < gap; ++i)
+        newMarkers.push(gapMarkers);
+      newMarkers.push(last);
+    }
+    return newMarkers;
+  }
+
+  function mergeOldSpans(doc, change) {
+    var old = getOldSpans(doc, change);
+    var stretched = stretchSpansOverChange(doc, change);
+    if (!old) return stretched;
+    if (!stretched) return old;
+
+    for (var i = 0; i < old.length; ++i) {
+      var oldCur = old[i], stretchCur = stretched[i];
+      if (oldCur && stretchCur) {
+        spans: for (var j = 0; j < stretchCur.length; ++j) {
+          var span = stretchCur[j];
+          for (var k = 0; k < oldCur.length; ++k)
+            if (oldCur[k].marker == span.marker) continue spans;
+          oldCur.push(span);
+        }
+      } else if (stretchCur) {
+        old[i] = stretchCur;
+      }
+    }
+    return old;
+  }
+
+  function removeReadOnlyRanges(doc, from, to) {
+    var markers = null;
+    doc.iter(from.line, to.line + 1, function(line) {
+      if (line.markedSpans) for (var i = 0; i < line.markedSpans.length; ++i) {
+        var mark = line.markedSpans[i].marker;
+        if (mark.readOnly && (!markers || indexOf(markers, mark) == -1))
+          (markers || (markers = [])).push(mark);
+      }
+    });
+    if (!markers) return null;
+    var parts = [{from: from, to: to}];
+    for (var i = 0; i < markers.length; ++i) {
+      var mk = markers[i], m = mk.find();
+      for (var j = 0; j < parts.length; ++j) {
+        var p = parts[j];
+        if (posLess(p.to, m.from) || posLess(m.to, p.from)) continue;
+        var newParts = [j, 1];
+        if (posLess(p.from, m.from) || !mk.inclusiveLeft && posEq(p.from, m.from))
+          newParts.push({from: p.from, to: m.from});
+        if (posLess(m.to, p.to) || !mk.inclusiveRight && posEq(p.to, m.to))
+          newParts.push({from: m.to, to: p.to});
+        parts.splice.apply(parts, newParts);
+        j += newParts.length - 1;
+      }
+    }
+    return parts;
+  }
+
+  function collapsedSpanAt(line, ch) {
+    var sps = sawCollapsedSpans && line.markedSpans, found;
+    if (sps) for (var sp, i = 0; i < sps.length; ++i) {
+      sp = sps[i];
+      if (!sp.marker.collapsed) continue;
+      if ((sp.from == null || sp.from < ch) &&
+          (sp.to == null || sp.to > ch) &&
+          (!found || found.width < sp.marker.width))
+        found = sp.marker;
+    }
+    return found;
+  }
+  function collapsedSpanAtStart(line) { return collapsedSpanAt(line, -1); }
+  function collapsedSpanAtEnd(line) { return collapsedSpanAt(line, line.text.length + 1); }
+
+  function visualLine(doc, line) {
+    var merged;
+    while (merged = collapsedSpanAtStart(line))
+      line = getLine(doc, merged.find().from.line);
+    return line;
+  }
+
+  function lineIsHidden(doc, line) {
+    var sps = sawCollapsedSpans && line.markedSpans;
+    if (sps) for (var sp, i = 0; i < sps.length; ++i) {
+      sp = sps[i];
+      if (!sp.marker.collapsed) continue;
+      if (sp.from == null) return true;
+      if (sp.marker.replacedWith) continue;
+      if (sp.from == 0 && sp.marker.inclusiveLeft && lineIsHiddenInner(doc, line, sp))
+        return true;
+    }
+  }
+  function lineIsHiddenInner(doc, line, span) {
+    if (span.to == null) {
+      var end = span.marker.find().to, endLine = getLine(doc, end.line);
+      return lineIsHiddenInner(doc, endLine, getMarkedSpanFor(endLine.markedSpans, span.marker));
+    }
+    if (span.marker.inclusiveRight && span.to == line.text.length)
+      return true;
+    for (var sp, i = 0; i < line.markedSpans.length; ++i) {
+      sp = line.markedSpans[i];
+      if (sp.marker.collapsed && !sp.marker.replacedWith && sp.from == span.to &&
+          (sp.marker.inclusiveLeft || span.marker.inclusiveRight) &&
+          lineIsHiddenInner(doc, line, sp)) return true;
+    }
+  }
+
+  function detachMarkedSpans(line) {
+    var spans = line.markedSpans;
+    if (!spans) return;
+    for (var i = 0; i < spans.length; ++i)
+      spans[i].marker.detachLine(line);
+    line.markedSpans = null;
+  }
+
+  function attachMarkedSpans(line, spans) {
+    if (!spans) return;
+    for (var i = 0; i < spans.length; ++i)
+      spans[i].marker.attachLine(line);
+    line.markedSpans = spans;
+  }
+
+  // LINE WIDGETS
+
+  var LineWidget = CodeMirror.LineWidget = function(cm, node, options) {
+    if (options) for (var opt in options) if (options.hasOwnProperty(opt))
+      this[opt] = options[opt];
+    this.cm = cm;
+    this.node = node;
+  };
+  eventMixin(LineWidget);
+  function widgetOperation(f) {
+    return function() {
+      var withOp = !this.cm.curOp;
+      if (withOp) startOperation(this.cm);
+      try {var result = f.apply(this, arguments);}
+      finally {if (withOp) endOperation(this.cm);}
+      return result;
+    };
+  }
+  LineWidget.prototype.clear = widgetOperation(function() {
+    var ws = this.line.widgets, no = lineNo(this.line);
+    if (no == null || !ws) return;
+    for (var i = 0; i < ws.length; ++i) if (ws[i] == this) ws.splice(i--, 1);
+    if (!ws.length) this.line.widgets = null;
+    var aboveVisible = heightAtLine(this.cm, this.line) < this.cm.doc.scrollTop;
+    updateLineHeight(this.line, Math.max(0, this.line.height - widgetHeight(this)));
+    if (aboveVisible) addToScrollPos(this.cm, 0, -this.height);
+    regChange(this.cm, no, no + 1);
+  });
+  LineWidget.prototype.changed = widgetOperation(function() {
+    var oldH = this.height;
+    this.height = null;
+    var diff = widgetHeight(this) - oldH;
+    if (!diff) return;
+    updateLineHeight(this.line, this.line.height + diff);
+    var no = lineNo(this.line);
+    regChange(this.cm, no, no + 1);
+  });
+
+  function widgetHeight(widget) {
+    if (widget.height != null) return widget.height;
+    if (!widget.node.parentNode || widget.node.parentNode.nodeType != 1)
+      removeChildrenAndAdd(widget.cm.display.measure, elt("div", [widget.node], null, "position: relative"));
+    return widget.height = widget.node.offsetHeight;
+  }
+
+  function addLineWidget(cm, handle, node, options) {
+    var widget = new LineWidget(cm, node, options);
+    if (widget.noHScroll) cm.display.alignWidgets = true;
+    changeLine(cm, handle, function(line) {
+      var widgets = line.widgets || (line.widgets = []);
+      if (widget.insertAt == null) widgets.push(widget);
+      else widgets.splice(Math.min(widgets.length - 1, Math.max(0, widget.insertAt)), 0, widget);
+      widget.line = line;
+      if (!lineIsHidden(cm.doc, line) || widget.showIfHidden) {
+        var aboveVisible = heightAtLine(cm, line) < cm.doc.scrollTop;
+        updateLineHeight(line, line.height + widgetHeight(widget));
+        if (aboveVisible) addToScrollPos(cm, 0, widget.height);
+      }
+      return true;
+    });
+    return widget;
+  }
+
+  // LINE DATA STRUCTURE
+
+  // Line objects. These hold state related to a line, including
+  // highlighting info (the styles array).
+  var Line = CodeMirror.Line = function(text, markedSpans, estimateHeight) {
+    this.text = text;
+    attachMarkedSpans(this, markedSpans);
+    this.height = estimateHeight ? estimateHeight(this) : 1;
+  };
+  eventMixin(Line);
+
+  function updateLine(line, text, markedSpans, estimateHeight) {
+    line.text = text;
+    if (line.stateAfter) line.stateAfter = null;
+    if (line.styles) line.styles = null;
+    if (line.order != null) line.order = null;
+    detachMarkedSpans(line);
+    attachMarkedSpans(line, markedSpans);
+    var estHeight = estimateHeight ? estimateHeight(line) : 1;
+    if (estHeight != line.height) updateLineHeight(line, estHeight);
+  }
+
+  function cleanUpLine(line) {
+    line.parent = null;
+    detachMarkedSpans(line);
+  }
+
+  // Run the given mode's parser over a line, update the styles
+  // array, which contains alternating fragments of text and CSS
+  // classes.
+  function runMode(cm, text, mode, state, f) {
+    var flattenSpans = mode.flattenSpans;
+    if (flattenSpans == null) flattenSpans = cm.options.flattenSpans;
+    var curStart = 0, curStyle = null;
+    var stream = new StringStream(text, cm.options.tabSize), style;
+    if (text == "" && mode.blankLine) mode.blankLine(state);
+    while (!stream.eol()) {
+      if (stream.pos > cm.options.maxHighlightLength) {
+        flattenSpans = false;
+        // Webkit seems to refuse to render text nodes longer than 57444 characters
+        stream.pos = Math.min(text.length, stream.start + 50000);
+        style = null;
+      } else {
+        style = mode.token(stream, state);
+      }
+      if (!flattenSpans || curStyle != style) {
+        if (curStart < stream.start) f(stream.start, curStyle);
+        curStart = stream.start; curStyle = style;
+      }
+      stream.start = stream.pos;
+    }
+    if (curStart < stream.pos) f(stream.pos, curStyle);
+  }
+
+  function highlightLine(cm, line, state) {
+    // A styles array always starts with a number identifying the
+    // mode/overlays that it is based on (for easy invalidation).
+    var st = [cm.state.modeGen];
+    // Compute the base array of styles
+    runMode(cm, line.text, cm.doc.mode, state, function(end, style) {st.push(end, style);});
+
+    // Run overlays, adjust style array.
+    for (var o = 0; o < cm.state.overlays.length; ++o) {
+      var overlay = cm.state.overlays[o], i = 1, at = 0;
+      runMode(cm, line.text, overlay.mode, true, function(end, style) {
+        var start = i;
+        // Ensure there's a token end at the current position, and that i points at it
+        while (at < end) {
+          var i_end = st[i];
+          if (i_end > end)
+            st.splice(i, 1, end, st[i+1], i_end);
+          i += 2;
+          at = Math.min(end, i_end);
+        }
+        if (!style) return;
+        if (overlay.opaque) {
+          st.splice(start, i - start, end, style);
+          i = start + 2;
+        } else {
+          for (; start < i; start += 2) {
+            var cur = st[start+1];
+            st[start+1] = cur ? cur + " " + style : style;
+          }
+        }
+      });
+    }
+
+    return st;
+  }
+
+  function getLineStyles(cm, line) {
+    if (!line.styles || line.styles[0] != cm.state.modeGen)
+      line.styles = highlightLine(cm, line, line.stateAfter = getStateBefore(cm, lineNo(line)));
+    return line.styles;
+  }
+
+  // Lightweight form of highlight -- proceed over this line and
+  // update state, but don't save a style array.
+  function processLine(cm, line, state) {
+    var mode = cm.doc.mode;
+    var stream = new StringStream(line.text, cm.options.tabSize);
+    if (line.text == "" && mode.blankLine) mode.blankLine(state);
+    while (!stream.eol() && stream.pos <= cm.options.maxHighlightLength) {
+      mode.token(stream, state);
+      stream.start = stream.pos;
+    }
+  }
+
+  var styleToClassCache = {};
+  function styleToClass(style) {
+    if (!style) return null;
+    return styleToClassCache[style] ||
+      (styleToClassCache[style] = "cm-" + style.replace(/ +/g, " cm-"));
+  }
+
+  function lineContent(cm, realLine, measure) {
+    var merged, line = realLine, empty = true;
+    while (merged = collapsedSpanAtStart(line))
+      line = getLine(cm.doc, merged.find().from.line);
+
+    var builder = {pre: elt("pre"), col: 0, pos: 0, display: !measure,
+                   measure: null, measuredSomething: false, cm: cm};
+    if (line.textClass) builder.pre.className = line.textClass;
+
+    do {
+      if (line.text) empty = false;
+      builder.measure = line == realLine && measure;
+      builder.pos = 0;
+      builder.addToken = builder.measure ? buildTokenMeasure : buildToken;
+      if ((ie || webkit) && cm.getOption("lineWrapping"))
+        builder.addToken = buildTokenSplitSpaces(builder.addToken);
+      var next = insertLineContent(line, builder, getLineStyles(cm, line));
+      if (measure && line == realLine && !builder.measuredSomething) {
+        measure[0] = builder.pre.appendChild(zeroWidthElement(cm.display.measure));
+        builder.measuredSomething = true;
+      }
+      if (next) line = getLine(cm.doc, next.to.line);
+    } while (next);
+
+    if (measure && !builder.measuredSomething && !measure[0])
+      measure[0] = builder.pre.appendChild(empty ? elt("span", "\u00a0") : zeroWidthElement(cm.display.measure));
+    if (!builder.pre.firstChild && !lineIsHidden(cm.doc, realLine))
+      builder.pre.appendChild(document.createTextNode("\u00a0"));
+
+    var order;
+    // Work around problem with the reported dimensions of single-char
+    // direction spans on IE (issue #1129). See also the comment in
+    // cursorCoords.
+    if (measure && ie && (order = getOrder(line))) {
+      var l = order.length - 1;
+      if (order[l].from == order[l].to) --l;
+      var last = order[l], prev = order[l - 1];
+      if (last.from + 1 == last.to && prev && last.level < prev.level) {
+        var span = measure[builder.pos - 1];
+        if (span) span.parentNode.insertBefore(span.measureRight = zeroWidthElement(cm.display.measure),
+                                               span.nextSibling);
+      }
+    }
+
+    signal(cm, "renderLine", cm, realLine, builder.pre);
+    return builder.pre;
+  }
+
+  var tokenSpecialChars = /[\t\u0000-\u0019\u00ad\u200b\u2028\u2029\uFEFF]/g;
+  function buildToken(builder, text, style, startStyle, endStyle, title) {
+    if (!text) return;
+    if (!tokenSpecialChars.test(text)) {
+      builder.col += text.length;
+      var content = document.createTextNode(text);
+    } else {
+      var content = document.createDocumentFragment(), pos = 0;
+      while (true) {
+        tokenSpecialChars.lastIndex = pos;
+        var m = tokenSpecialChars.exec(text);
+        var skipped = m ? m.index - pos : text.length - pos;
+        if (skipped) {
+          content.appendChild(document.createTextNode(text.slice(pos, pos + skipped)));
+          builder.col += skipped;
+        }
+        if (!m) break;
+        pos += skipped + 1;
+        if (m[0] == "\t") {
+          var tabSize = builder.cm.options.tabSize, tabWidth = tabSize - builder.col % tabSize;
+          content.appendChild(elt("span", spaceStr(tabWidth), "cm-tab"));
+          builder.col += tabWidth;
+        } else {
+          var token = elt("span", "\u2022", "cm-invalidchar");
+          token.title = "\\u" + m[0].charCodeAt(0).toString(16);
+          content.appendChild(token);
+          builder.col += 1;
+        }
+      }
+    }
+    if (style || startStyle || endStyle || builder.measure) {
+      var fullStyle = style || "";
+      if (startStyle) fullStyle += startStyle;
+      if (endStyle) fullStyle += endStyle;
+      var token = elt("span", [content], fullStyle);
+      if (title) token.title = title;
+      return builder.pre.appendChild(token);
+    }
+    builder.pre.appendChild(content);
+  }
+
+  function buildTokenMeasure(builder, text, style, startStyle, endStyle) {
+    var wrapping = builder.cm.options.lineWrapping;
+    for (var i = 0; i < text.length; ++i) {
+      var ch = text.charAt(i), start = i == 0;
+      if (ch >= "\ud800" && ch < "\udbff" && i < text.length - 1) {
+        ch = text.slice(i, i + 2);
+        ++i;
+      } else if (i && wrapping && spanAffectsWrapping(text, i)) {
+        builder.pre.appendChild(elt("wbr"));
+      }
+      var old = builder.measure[builder.pos];
+      var span = builder.measure[builder.pos] =
+        buildToken(builder, ch, style,
+                   start && startStyle, i == text.length - 1 && endStyle);
+      if (old) span.leftSide = old.leftSide || old;
+      // In IE single-space nodes wrap differently than spaces
+      // embedded in larger text nodes, except when set to
+      // white-space: normal (issue #1268).
+      if (ie && wrapping && ch == " " && i && !/\s/.test(text.charAt(i - 1)) &&
+          i < text.length - 1 && !/\s/.test(text.charAt(i + 1)))
+        span.style.whiteSpace = "normal";
+      builder.pos += ch.length;
+    }
+    if (text.length) builder.measuredSomething = true;
+  }
+
+  function buildTokenSplitSpaces(inner) {
+    function split(old) {
+      var out = " ";
+      for (var i = 0; i < old.length - 2; ++i) out += i % 2 ? " " : "\u00a0";
+      out += " ";
+      return out;
+    }
+    return function(builder, text, style, startStyle, endStyle, title) {
+      return inner(builder, text.replace(/ {3,}/, split), style, startStyle, endStyle, title);
+    };
+  }
+
+  function buildCollapsedSpan(builder, size, marker, ignoreWidget) {
+    var widget = !ignoreWidget && marker.replacedWith;
+    if (widget) {
+      if (!builder.display) widget = widget.cloneNode(true);
+      builder.pre.appendChild(widget);
+      if (builder.measure) {
+        if (size) {
+          builder.measure[builder.pos] = widget;
+        } else {
+          var elt = builder.measure[builder.pos] = zeroWidthElement(builder.cm.display.measure);
+          if (marker.type != "bookmark" || marker.insertLeft)
+            builder.pre.insertBefore(elt, widget);
+          else
+            builder.pre.appendChild(elt);
+        }
+        builder.measuredSomething = true;
+      }
+    }
+    builder.pos += size;
+  }
+
+  // Outputs a number of spans to make up a line, taking highlighting
+  // and marked text into account.
+  function insertLineContent(line, builder, styles) {
+    var spans = line.markedSpans, allText = line.text, at = 0;
+    if (!spans) {
+      for (var i = 1; i < styles.length; i+=2)
+        builder.addToken(builder, allText.slice(at, at = styles[i]), styleToClass(styles[i+1]));
+      return;
+    }
+
+    var len = allText.length, pos = 0, i = 1, text = "", style;
+    var nextChange = 0, spanStyle, spanEndStyle, spanStartStyle, title, collapsed;
+    for (;;) {
+      if (nextChange == pos) { // Update current marker set
+        spanStyle = spanEndStyle = spanStartStyle = title = "";
+        collapsed = null; nextChange = Infinity;
+        var foundBookmark = null;
+        for (var j = 0; j < spans.length; ++j) {
+          var sp = spans[j], m = sp.marker;
+          if (sp.from <= pos && (sp.to == null || sp.to > pos)) {
+            if (sp.to != null && nextChange > sp.to) { nextChange = sp.to; spanEndStyle = ""; }
+            if (m.className) spanStyle += " " + m.className;
+            if (m.startStyle && sp.from == pos) spanStartStyle += " " + m.startStyle;
+            if (m.endStyle && sp.to == nextChange) spanEndStyle += " " + m.endStyle;
+            if (m.title && !title) title = m.title;
+            if (m.collapsed && (!collapsed || collapsed.marker.size < m.size))
+              collapsed = sp;
+          } else if (sp.from > pos && nextChange > sp.from) {
+            nextChange = sp.from;
+          }
+          if (m.type == "bookmark" && sp.from == pos && m.replacedWith) foundBookmark = m;
+        }
+        if (collapsed && (collapsed.from || 0) == pos) {
+          buildCollapsedSpan(builder, (collapsed.to == null ? len : collapsed.to) - pos,
+                             collapsed.marker, collapsed.from == null);
+          if (collapsed.to == null) return collapsed.marker.find();
+        }
+        if (foundBookmark && !collapsed) buildCollapsedSpan(builder, 0, foundBookmark);
+      }
+      if (pos >= len) break;
+
+      var upto = Math.min(len, nextChange);
+      while (true) {
+        if (text) {
+          var end = pos + text.length;
+          if (!collapsed) {
+            var tokenText = end > upto ? text.slice(0, upto - pos) : text;
+            builder.addToken(builder, tokenText, style ? style + spanStyle : spanStyle,
+                             spanStartStyle, pos + tokenText.length == nextChange ? spanEndStyle : "", title);
+          }
+          if (end >= upto) {text = text.slice(upto - pos); pos = upto; break;}
+          pos = end;
+          spanStartStyle = "";
+        }
+        text = allText.slice(at, at = styles[i++]);
+        style = styleToClass(styles[i++]);
+      }
+    }
+  }
+
+  // DOCUMENT DATA STRUCTURE
+
+  function updateDoc(doc, change, markedSpans, selAfter, estimateHeight) {
+    function spansFor(n) {return markedSpans ? markedSpans[n] : null;}
+    function update(line, text, spans) {
+      updateLine(line, text, spans, estimateHeight);
+      signalLater(line, "change", line, change);
+    }
+
+    var from = change.from, to = change.to, text = change.text;
+    var firstLine = getLine(doc, from.line), lastLine = getLine(doc, to.line);
+    var lastText = lst(text), lastSpans = spansFor(text.length - 1), nlines = to.line - from.line;
+
+    // First adjust the line structure
+    if (from.ch == 0 && to.ch == 0 && lastText == "") {
+      // This is a whole-line replace. Treated specially to make
+      // sure line objects move the way they are supposed to.
+      for (var i = 0, e = text.length - 1, added = []; i < e; ++i)
+        added.push(new Line(text[i], spansFor(i), estimateHeight));
+      update(lastLine, lastLine.text, lastSpans);
+      if (nlines) doc.remove(from.line, nlines);
+      if (added.length) doc.insert(from.line, added);
+    } else if (firstLine == lastLine) {
+      if (text.length == 1) {
+        update(firstLine, firstLine.text.slice(0, from.ch) + lastText + firstLine.text.slice(to.ch), lastSpans);
+      } else {
+        for (var added = [], i = 1, e = text.length - 1; i < e; ++i)
+          added.push(new Line(text[i], spansFor(i), estimateHeight));
+        added.push(new Line(lastText + firstLine.text.slice(to.ch), lastSpans, estimateHeight));
+        update(firstLine, firstLine.text.slice(0, from.ch) + text[0], spansFor(0));
+        doc.insert(from.line + 1, added);
+      }
+    } else if (text.length == 1) {
+      update(firstLine, firstLine.text.slice(0, from.ch) + text[0] + lastLine.text.slice(to.ch), spansFor(0));
+      doc.remove(from.line + 1, nlines);
+    } else {
+      update(firstLine, firstLine.text.slice(0, from.ch) + text[0], spansFor(0));
+      update(lastLine, lastText + lastLine.text.slice(to.ch), lastSpans);
+      for (var i = 1, e = text.length - 1, added = []; i < e; ++i)
+        added.push(new Line(text[i], spansFor(i), estimateHeight));
+      if (nlines > 1) doc.remove(from.line + 1, nlines - 1);
+      doc.insert(from.line + 1, added);
+    }
+
+    signalLater(doc, "change", doc, change);
+    setSelection(doc, selAfter.anchor, selAfter.head, null, true);
+  }
+
+  function LeafChunk(lines) {
+    this.lines = lines;
+    this.parent = null;
+    for (var i = 0, e = lines.length, height = 0; i < e; ++i) {
+      lines[i].parent = this;
+      height += lines[i].height;
+    }
+    this.height = height;
+  }
+
+  LeafChunk.prototype = {
+    chunkSize: function() { return this.lines.length; },
+    removeInner: function(at, n) {
+      for (var i = at, e = at + n; i < e; ++i) {
+        var line = this.lines[i];
+        this.height -= line.height;
+        cleanUpLine(line);
+        signalLater(line, "delete");
+      }
+      this.lines.splice(at, n);
+    },
+    collapse: function(lines) {
+      lines.splice.apply(lines, [lines.length, 0].concat(this.lines));
+    },
+    insertInner: function(at, lines, height) {
+      this.height += height;
+      this.lines = this.lines.slice(0, at).concat(lines).concat(this.lines.slice(at));
+      for (var i = 0, e = lines.length; i < e; ++i) lines[i].parent = this;
+    },
+    iterN: function(at, n, op) {
+      for (var e = at + n; at < e; ++at)
+        if (op(this.lines[at])) return true;
+    }
+  };
+
+  function BranchChunk(children) {
+    this.children = children;
+    var size = 0, height = 0;
+    for (var i = 0, e = children.length; i < e; ++i) {
+      var ch = children[i];
+      size += ch.chunkSize(); height += ch.height;
+      ch.parent = this;
+    }
+    this.size = size;
+    this.height = height;
+    this.parent = null;
+  }
+
+  BranchChunk.prototype = {
+    chunkSize: function() { return this.size; },
+    removeInner: function(at, n) {
+      this.size -= n;
+      for (var i = 0; i < this.children.length; ++i) {
+        var child = this.children[i], sz = child.chunkSize();
+        if (at < sz) {
+          var rm = Math.min(n, sz - at), oldHeight = child.height;
+          child.removeInner(at, rm);
+          this.height -= oldHeight - child.height;
+          if (sz == rm) { this.children.splice(i--, 1); child.parent = null; }
+          if ((n -= rm) == 0) break;
+          at = 0;
+        } else at -= sz;
+      }
+      if (this.size - n < 25) {
+        var lines = [];
+        this.collapse(lines);
+        this.children = [new LeafChunk(lines)];
+        this.children[0].parent = this;
+      }
+    },
+    collapse: function(lines) {
+      for (var i = 0, e = this.children.length; i < e; ++i) this.children[i].collapse(lines);
+    },
+    insertInner: function(at, lines, height) {
+      this.size += lines.length;
+      this.height += height;
+      for (var i = 0, e = this.children.length; i < e; ++i) {
+        var child = this.children[i], sz = child.chunkSize();
+        if (at <= sz) {
+          child.insertInner(at, lines, height);
+          if (child.lines && child.lines.length > 50) {
+            while (child.lines.length > 50) {
+              var spilled = child.lines.splice(child.lines.length - 25, 25);
+              var newleaf = new LeafChunk(spilled);
+              child.height -= newleaf.height;
+              this.children.splice(i + 1, 0, newleaf);
+              newleaf.parent = this;
+            }
+            this.maybeSpill();
+          }
+          break;
+        }
+        at -= sz;
+      }
+    },
+    maybeSpill: function() {
+      if (this.children.length <= 10) return;
+      var me = this;
+      do {
+        var spilled = me.children.splice(me.children.length - 5, 5);
+        var sibling = new BranchChunk(spilled);
+        if (!me.parent) { // Become the parent node
+          var copy = new BranchChunk(me.children);
+          copy.parent = me;
+          me.children = [copy, sibling];
+          me = copy;
+        } else {
+          me.size -= sibling.size;
+          me.height -= sibling.height;
+          var myIndex = indexOf(me.parent.children, me);
+          me.parent.children.splice(myIndex + 1, 0, sibling);
+        }
+        sibling.parent = me.parent;
+      } while (me.children.length > 10);
+      me.parent.maybeSpill();
+    },
+    iterN: function(at, n, op) {
+      for (var i = 0, e = this.children.length; i < e; ++i) {
+        var child = this.children[i], sz = child.chunkSize();
+        if (at < sz) {
+          var used = Math.min(n, sz - at);
+          if (child.iterN(at, used, op)) return true;
+          if ((n -= used) == 0) break;
+          at = 0;
+        } else at -= sz;
+      }
+    }
+  };
+
+  var nextDocId = 0;
+  var Doc = CodeMirror.Doc = function(text, mode, firstLine) {
+    if (!(this instanceof Doc)) return new Doc(text, mode, firstLine);
+    if (firstLine == null) firstLine = 0;
+
+    BranchChunk.call(this, [new LeafChunk([new Line("", null)])]);
+    this.first = firstLine;
+    this.scrollTop = this.scrollLeft = 0;
+    this.cantEdit = false;
+    this.history = makeHistory();
+    this.cleanGeneration = 1;
+    this.frontier = firstLine;
+    var start = Pos(firstLine, 0);
+    this.sel = {from: start, to: start, head: start, anchor: start, shift: false, extend: false, goalColumn: null};
+    this.id = ++nextDocId;
+    this.modeOption = mode;
+
+    if (typeof text == "string") text = splitLines(text);
+    updateDoc(this, {from: start, to: start, text: text}, null, {head: start, anchor: start});
+  };
+
+  Doc.prototype = createObj(BranchChunk.prototype, {
+    constructor: Doc,
+    iter: function(from, to, op) {
+      if (op) this.iterN(from - this.first, to - from, op);
+      else this.iterN(this.first, this.first + this.size, from);
+    },
+
+    insert: function(at, lines) {
+      var height = 0;
+      for (var i = 0, e = lines.length; i < e; ++i) height += lines[i].height;
+      this.insertInner(at - this.first, lines, height);
+    },
+    remove: function(at, n) { this.removeInner(at - this.first, n); },
+
+    getValue: function(lineSep) {
+      var lines = getLines(this, this.first, this.first + this.size);
+      if (lineSep === false) return lines;
+      return lines.join(lineSep || "\n");
+    },
+    setValue: function(code) {
+      var top = Pos(this.first, 0), last = this.first + this.size - 1;
+      makeChange(this, {from: top, to: Pos(last, getLine(this, last).text.length),
+                        text: splitLines(code), origin: "setValue"},
+                 {head: top, anchor: top}, true);
+    },
+    replaceRange: function(code, from, to, origin) {
+      from = clipPos(this, from);
+      to = to ? clipPos(this, to) : from;
+      replaceRange(this, code, from, to, origin);
+    },
+    getRange: function(from, to, lineSep) {
+      var lines = getBetween(this, clipPos(this, from), clipPos(this, to));
+      if (lineSep === false) return lines;
+      return lines.join(lineSep || "\n");
+    },
+
+    getLine: function(line) {var l = this.getLineHandle(line); return l && l.text;},
+    setLine: function(line, text) {
+      if (isLine(this, line))
+        replaceRange(this, text, Pos(line, 0), clipPos(this, Pos(line)));
+    },
+    removeLine: function(line) {
+      if (line) replaceRange(this, "", clipPos(this, Pos(line - 1)), clipPos(this, Pos(line)));
+      else replaceRange(this, "", Pos(0, 0), clipPos(this, Pos(1, 0)));
+    },
+
+    getLineHandle: function(line) {if (isLine(this, line)) return getLine(this, line);},
+    getLineNumber: function(line) {return lineNo(line);},
+
+    getLineHandleVisualStart: function(line) {
+      if (typeof line == "number") line = getLine(this, line);
+      return visualLine(this, line);
+    },
+
+    lineCount: function() {return this.size;},
+    firstLine: function() {return this.first;},
+    lastLine: function() {return this.first + this.size - 1;},
+
+    clipPos: function(pos) {return clipPos(this, pos);},
+
+    getCursor: function(start) {
+      var sel = this.sel, pos;
+      if (start == null || start == "head") pos = sel.head;
+      else if (start == "anchor") pos = sel.anchor;
+      else if (start == "end" || start === false) pos = sel.to;
+      else pos = sel.from;
+      return copyPos(pos);
+    },
+    somethingSelected: function() {return !posEq(this.sel.head, this.sel.anchor);},
+
+    setCursor: docOperation(function(line, ch, extend) {
+      var pos = clipPos(this, typeof line == "number" ? Pos(line, ch || 0) : line);
+      if (extend) extendSelection(this, pos);
+      else setSelection(this, pos, pos);
+    }),
+    setSelection: docOperation(function(anchor, head) {
+      setSelection(this, clipPos(this, anchor), clipPos(this, head || anchor));
+    }),
+    extendSelection: docOperation(function(from, to) {
+      extendSelection(this, clipPos(this, from), to && clipPos(this, to));
+    }),
+
+    getSelection: function(lineSep) {return this.getRange(this.sel.from, this.sel.to, lineSep);},
+    replaceSelection: function(code, collapse, origin) {
+      makeChange(this, {from: this.sel.from, to: this.sel.to, text: splitLines(code), origin: origin}, collapse || "around");
+    },
+    undo: docOperation(function() {makeChangeFromHistory(this, "undo");}),
+    redo: docOperation(function() {makeChangeFromHistory(this, "redo");}),
+
+    setExtending: function(val) {this.sel.extend = val;},
+
+    historySize: function() {
+      var hist = this.history;
+      return {undo: hist.done.length, redo: hist.undone.length};
+    },
+    clearHistory: function() {this.history = makeHistory(this.history.maxGeneration);},
+
+    markClean: function() {
+      this.cleanGeneration = this.changeGeneration();
+    },
+    changeGeneration: function() {
+      this.history.lastOp = this.history.lastOrigin = null;
+      return this.history.generation;
+    },
+    isClean: function (gen) {
+      return this.history.generation == (gen || this.cleanGeneration);
+    },
+
+    getHistory: function() {
+      return {done: copyHistoryArray(this.history.done),
+              undone: copyHistoryArray(this.history.undone)};
+    },
+    setHistory: function(histData) {
+      var hist = this.history = makeHistory(this.history.maxGeneration);
+      hist.done = histData.done.slice(0);
+      hist.undone = histData.undone.slice(0);
+    },
+
+    markText: function(from, to, options) {
+      return markText(this, clipPos(this, from), clipPos(this, to), options, "range");
+    },
+    setBookmark: function(pos, options) {
+      var realOpts = {replacedWith: options && (options.nodeType == null ? options.widget : options),
+                      insertLeft: options && options.insertLeft};
+      pos = clipPos(this, pos);
+      return markText(this, pos, pos, realOpts, "bookmark");
+    },
+    findMarksAt: function(pos) {
+      pos = clipPos(this, pos);
+      var markers = [], spans = getLine(this, pos.line).markedSpans;
+      if (spans) for (var i = 0; i < spans.length; ++i) {
+        var span = spans[i];
+        if ((span.from == null || span.from <= pos.ch) &&
+            (span.to == null || span.to >= pos.ch))
+          markers.push(span.marker.parent || span.marker);
+      }
+      return markers;
+    },
+    getAllMarks: function() {
+      var markers = [];
+      this.iter(function(line) {
+        var sps = line.markedSpans;
+        if (sps) for (var i = 0; i < sps.length; ++i)
+          if (sps[i].from != null) markers.push(sps[i].marker);
+      });
+      return markers;
+    },
+
+    posFromIndex: function(off) {
+      var ch, lineNo = this.first;
+      this.iter(function(line) {
+        var sz = line.text.length + 1;
+        if (sz > off) { ch = off; return true; }
+        off -= sz;
+        ++lineNo;
+      });
+      return clipPos(this, Pos(lineNo, ch));
+    },
+    indexFromPos: function (coords) {
+      coords = clipPos(this, coords);
+      var index = coords.ch;
+      if (coords.line < this.first || coords.ch < 0) return 0;
+      this.iter(this.first, coords.line, function (line) {
+        index += line.text.length + 1;
+      });
+      return index;
+    },
+
+    copy: function(copyHistory) {
+      var doc = new Doc(getLines(this, this.first, this.first + this.size), this.modeOption, this.first);
+      doc.scrollTop = this.scrollTop; doc.scrollLeft = this.scrollLeft;
+      doc.sel = {from: this.sel.from, to: this.sel.to, head: this.sel.head, anchor: this.sel.anchor,
+                 shift: this.sel.shift, extend: false, goalColumn: this.sel.goalColumn};
+      if (copyHistory) {
+        doc.history.undoDepth = this.history.undoDepth;
+        doc.setHistory(this.getHistory());
+      }
+      return doc;
+    },
+
+    linkedDoc: function(options) {
+      if (!options) options = {};
+      var from = this.first, to = this.first + this.size;
+      if (options.from != null && options.from > from) from = options.from;
+      if (options.to != null && options.to < to) to = options.to;
+      var copy = new Doc(getLines(this, from, to), options.mode || this.modeOption, from);
+      if (options.sharedHist) copy.history = this.history;
+      (this.linked || (this.linked = [])).push({doc: copy, sharedHist: options.sharedHist});
+      copy.linked = [{doc: this, isParent: true, sharedHist: options.sharedHist}];
+      return copy;
+    },
+    unlinkDoc: function(other) {
+      if (other instanceof CodeMirror) other = other.doc;
+      if (this.linked) for (var i = 0; i < this.linked.length; ++i) {
+        var link = this.linked[i];
+        if (link.doc != other) continue;
+        this.linked.splice(i, 1);
+        other.unlinkDoc(this);
+        break;
+      }
+      // If the histories were shared, split them again
+      if (other.history == this.history) {
+        var splitIds = [other.id];
+        linkedDocs(other, function(doc) {splitIds.push(doc.id);}, true);
+        other.history = makeHistory();
+        other.history.done = copyHistoryArray(this.history.done, splitIds);
+        other.history.undone = copyHistoryArray(this.history.undone, splitIds);
+      }
+    },
+    iterLinkedDocs: function(f) {linkedDocs(this, f);},
+
+    getMode: function() {return this.mode;},
+    getEditor: function() {return this.cm;}
+  });
+
+  Doc.prototype.eachLine = Doc.prototype.iter;
+
+  // The Doc methods that should be available on CodeMirror instances
+  var dontDelegate = "iter insert remove copy getEditor".split(" ");
+  for (var prop in Doc.prototype) if (Doc.prototype.hasOwnProperty(prop) && indexOf(dontDelegate, prop) < 0)
+    CodeMirror.prototype[prop] = (function(method) {
+      return function() {return method.apply(this.doc, arguments);};
+    })(Doc.prototype[prop]);
+
+  eventMixin(Doc);
+
+  function linkedDocs(doc, f, sharedHistOnly) {
+    function propagate(doc, skip, sharedHist) {
+      if (doc.linked) for (var i = 0; i < doc.linked.length; ++i) {
+        var rel = doc.linked[i];
+        if (rel.doc == skip) continue;
+        var shared = sharedHist && rel.sharedHist;
+        if (sharedHistOnly && !shared) continue;
+        f(rel.doc, shared);
+        propagate(rel.doc, doc, shared);
+      }
+    }
+    propagate(doc, null, true);
+  }
+
+  function attachDoc(cm, doc) {
+    if (doc.cm) throw new Error("This document is already in use.");
+    cm.doc = doc;
+    doc.cm = cm;
+    estimateLineHeights(cm);
+    loadMode(cm);
+    if (!cm.options.lineWrapping) computeMaxLength(cm);
+    cm.options.mode = doc.modeOption;
+    regChange(cm);
+  }
+
+  // LINE UTILITIES
+
+  function getLine(chunk, n) {
+    n -= chunk.first;
+    while (!chunk.lines) {
+      for (var i = 0;; ++i) {
+        var child = chunk.children[i], sz = child.chunkSize();
+        if (n < sz) { chunk = child; break; }
+        n -= sz;
+      }
+    }
+    return chunk.lines[n];
+  }
+
+  function getBetween(doc, start, end) {
+    var out = [], n = start.line;
+    doc.iter(start.line, end.line + 1, function(line) {
+      var text = line.text;
+      if (n == end.line) text = text.slice(0, end.ch);
+      if (n == start.line) text = text.slice(start.ch);
+      out.push(text);
+      ++n;
+    });
+    return out;
+  }
+  function getLines(doc, from, to) {
+    var out = [];
+    doc.iter(from, to, function(line) { out.push(line.text); });
+    return out;
+  }
+
+  function updateLineHeight(line, height) {
+    var diff = height - line.height;
+    for (var n = line; n; n = n.parent) n.height += diff;
+  }
+
+  function lineNo(line) {
+    if (line.parent == null) return null;
+    var cur = line.parent, no = indexOf(cur.lines, line);
+    for (var chunk = cur.parent; chunk; cur = chunk, chunk = chunk.parent) {
+      for (var i = 0;; ++i) {
+        if (chunk.children[i] == cur) break;
+        no += chunk.children[i].chunkSize();
+      }
+    }
+    return no + cur.first;
+  }
+
+  function lineAtHeight(chunk, h) {
+    var n = chunk.first;
+    outer: do {
+      for (var i = 0, e = chunk.children.length; i < e; ++i) {
+        var child = chunk.children[i], ch = child.height;
+        if (h < ch) { chunk = child; continue outer; }
+        h -= ch;
+        n += child.chunkSize();
+      }
+      return n;
+    } while (!chunk.lines);
+    for (var i = 0, e = chunk.lines.length; i < e; ++i) {
+      var line = chunk.lines[i], lh = line.height;
+      if (h < lh) break;
+      h -= lh;
+    }
+    return n + i;
+  }
+
+  function heightAtLine(cm, lineObj) {
+    lineObj = visualLine(cm.doc, lineObj);
+
+    var h = 0, chunk = lineObj.parent;
+    for (var i = 0; i < chunk.lines.length; ++i) {
+      var line = chunk.lines[i];
+      if (line == lineObj) break;
+      else h += line.height;
+    }
+    for (var p = chunk.parent; p; chunk = p, p = chunk.parent) {
+      for (var i = 0; i < p.children.length; ++i) {
+        var cur = p.children[i];
+        if (cur == chunk) break;
+        else h += cur.height;
+      }
+    }
+    return h;
+  }
+
+  function getOrder(line) {
+    var order = line.order;
+    if (order == null) order = line.order = bidiOrdering(line.text);
+    return order;
+  }
+
+  // HISTORY
+
+  function makeHistory(startGen) {
+    return {
+      // Arrays of history events. Doing something adds an event to
+      // done and clears undo. Undoing moves events from done to
+      // undone, redoing moves them in the other direction.
+      done: [], undone: [], undoDepth: Infinity,
+      // Used to track when changes can be merged into a single undo
+      // event
+      lastTime: 0, lastOp: null, lastOrigin: null,
+      // Used by the isClean() method
+      generation: startGen || 1, maxGeneration: startGen || 1
+    };
+  }
+
+  function attachLocalSpans(doc, change, from, to) {
+    var existing = change["spans_" + doc.id], n = 0;
+    doc.iter(Math.max(doc.first, from), Math.min(doc.first + doc.size, to), function(line) {
+      if (line.markedSpans)
+        (existing || (existing = change["spans_" + doc.id] = {}))[n] = line.markedSpans;
+      ++n;
+    });
+  }
+
+  function historyChangeFromChange(doc, change) {
+    var from = { line: change.from.line, ch: change.from.ch };
+    var histChange = {from: from, to: changeEnd(change), text: getBetween(doc, change.from, change.to)};
+    attachLocalSpans(doc, histChange, change.from.line, change.to.line + 1);
+    linkedDocs(doc, function(doc) {attachLocalSpans(doc, histChange, change.from.line, change.to.line + 1);}, true);
+    return histChange;
+  }
+
+  function addToHistory(doc, change, selAfter, opId) {
+    var hist = doc.history;
+    hist.undone.length = 0;
+    var time = +new Date, cur = lst(hist.done);
+
+    if (cur &&
+        (hist.lastOp == opId ||
+         hist.lastOrigin == change.origin && change.origin &&
+         ((change.origin.charAt(0) == "+" && doc.cm && hist.lastTime > time - doc.cm.options.historyEventDelay) ||
+          change.origin.charAt(0) == "*"))) {
+      // Merge this change into the last event
+      var last = lst(cur.changes);
+      if (posEq(change.from, change.to) && posEq(change.from, last.to)) {
+        // Optimized case for simple insertion -- don't want to add
+        // new changesets for every character typed
+        last.to = changeEnd(change);
+      } else {
+        // Add new sub-event
+        cur.changes.push(historyChangeFromChange(doc, change));
+      }
+      cur.anchorAfter = selAfter.anchor; cur.headAfter = selAfter.head;
+    } else {
+      // Can not be merged, start a new event.
+      cur = {changes: [historyChangeFromChange(doc, change)],
+             generation: hist.generation,
+             anchorBefore: doc.sel.anchor, headBefore: doc.sel.head,
+             anchorAfter: selAfter.anchor, headAfter: selAfter.head};
+      hist.done.push(cur);
+      hist.generation = ++hist.maxGeneration;
+      while (hist.done.length > hist.undoDepth)
+        hist.done.shift();
+    }
+    hist.lastTime = time;
+    hist.lastOp = opId;
+    hist.lastOrigin = change.origin;
+  }
+
+  function removeClearedSpans(spans) {
+    if (!spans) return null;
+    for (var i = 0, out; i < spans.length; ++i) {
+      if (spans[i].marker.explicitlyCleared) { if (!out) out = spans.slice(0, i); }
+      else if (out) out.push(spans[i]);
+    }
+    return !out ? spans : out.length ? out : null;
+  }
+
+  function getOldSpans(doc, change) {
+    var found = change["spans_" + doc.id];
+    if (!found) return null;
+    for (var i = 0, nw = []; i < change.text.length; ++i)
+      nw.push(removeClearedSpans(found[i]));
+    return nw;
+  }
+
+  // Used both to provide a JSON-safe object in .getHistory, and, when
+  // detaching a document, to split the history in two
+  function copyHistoryArray(events, newGroup) {
+    for (var i = 0, copy = []; i < events.length; ++i) {
+      var event = events[i], changes = event.changes, newChanges = [];
+      copy.push({changes: newChanges, anchorBefore: event.anchorBefore, headBefore: event.headBefore,
+                 anchorAfter: event.anchorAfter, headAfter: event.headAfter});
+      for (var j = 0; j < changes.length; ++j) {
+        var change = changes[j], m;
+        newChanges.push({from: change.from, to: change.to, text: change.text});
+        if (newGroup) for (var prop in change) if (m = prop.match(/^spans_(\d+)$/)) {
+          if (indexOf(newGroup, Number(m[1])) > -1) {
+            lst(newChanges)[prop] = change[prop];
+            delete change[prop];
+          }
+        }
+      }
+    }
+    return copy;
+  }
+
+  // Rebasing/resetting history to deal with externally-sourced changes
+
+  function rebaseHistSel(pos, from, to, diff) {
+    if (to < pos.line) {
+      pos.line += diff;
+    } else if (from < pos.line) {
+      pos.line = from;
+      pos.ch = 0;
+    }
+  }
+
+  // Tries to rebase an array of history events given a change in the
+  // document. If the change touches the same lines as the event, the
+  // event, and everything 'behind' it, is discarded. If the change is
+  // before the event, the event's positions are updated. Uses a
+  // copy-on-write scheme for the positions, to avoid having to
+  // reallocate them all on every rebase, but also avoid problems with
+  // shared position objects being unsafely updated.
+  function rebaseHistArray(array, from, to, diff) {
+    for (var i = 0; i < array.length; ++i) {
+      var sub = array[i], ok = true;
+      for (var j = 0; j < sub.changes.length; ++j) {
+        var cur = sub.changes[j];
+        if (!sub.copied) { cur.from = copyPos(cur.from); cur.to = copyPos(cur.to); }
+        if (to < cur.from.line) {
+          cur.from.line += diff;
+          cur.to.line += diff;
+        } else if (from <= cur.to.line) {
+          ok = false;
+          break;
+        }
+      }
+      if (!sub.copied) {
+        sub.anchorBefore = copyPos(sub.anchorBefore); sub.headBefore = copyPos(sub.headBefore);
+        sub.anchorAfter = copyPos(sub.anchorAfter); sub.readAfter = copyPos(sub.headAfter);
+        sub.copied = true;
+      }
+      if (!ok) {
+        array.splice(0, i + 1);
+        i = 0;
+      } else {
+        rebaseHistSel(sub.anchorBefore); rebaseHistSel(sub.headBefore);
+        rebaseHistSel(sub.anchorAfter); rebaseHistSel(sub.headAfter);
+      }
+    }
+  }
+
+  function rebaseHist(hist, change) {
+    var from = change.from.line, to = change.to.line, diff = change.text.length - (to - from) - 1;
+    rebaseHistArray(hist.done, from, to, diff);
+    rebaseHistArray(hist.undone, from, to, diff);
+  }
+
+  // EVENT OPERATORS
+
+  function stopMethod() {e_stop(this);}
+  // Ensure an event has a stop method.
+  function addStop(event) {
+    if (!event.stop) event.stop = stopMethod;
+    return event;
+  }
+
+  function e_preventDefault(e) {
+    if (e.preventDefault) e.preventDefault();
+    else e.returnValue = false;
+  }
+  function e_stopPropagation(e) {
+    if (e.stopPropagation) e.stopPropagation();
+    else e.cancelBubble = true;
+  }
+  function e_defaultPrevented(e) {
+    return e.defaultPrevented != null ? e.defaultPrevented : e.returnValue == false;
+  }
+  function e_stop(e) {e_preventDefault(e); e_stopPropagation(e);}
+  CodeMirror.e_stop = e_stop;
+  CodeMirror.e_preventDefault = e_preventDefault;
+  CodeMirror.e_stopPropagation = e_stopPropagation;
+
+  function e_target(e) {return e.target || e.srcElement;}
+  function e_button(e) {
+    var b = e.which;
+    if (b == null) {
+      if (e.button & 1) b = 1;
+      else if (e.button & 2) b = 3;
+      else if (e.button & 4) b = 2;
+    }
+    if (mac && e.ctrlKey && b == 1) b = 3;
+    return b;
+  }
+
+  // EVENT HANDLING
+
+  function on(emitter, type, f) {
+    if (emitter.addEventListener)
+      emitter.addEventListener(type, f, false);
+    else if (emitter.attachEvent)
+      emitter.attachEvent("on" + type, f);
+    else {
+      var map = emitter._handlers || (emitter._handlers = {});
+      var arr = map[type] || (map[type] = []);
+      arr.push(f);
+    }
+  }
+
+  function off(emitter, type, f) {
+    if (emitter.removeEventListener)
+      emitter.removeEventListener(type, f, false);
+    else if (emitter.detachEvent)
+      emitter.detachEvent("on" + type, f);
+    else {
+      var arr = emitter._handlers && emitter._handlers[type];
+      if (!arr) return;
+      for (var i = 0; i < arr.length; ++i)
+        if (arr[i] == f) { arr.splice(i, 1); break; }
+    }
+  }
+
+  function signal(emitter, type /*, values...*/) {
+    var arr = emitter._handlers && emitter._handlers[type];
+    if (!arr) return;
+    var args = Array.prototype.slice.call(arguments, 2);
+    for (var i = 0; i < arr.length; ++i) arr[i].apply(null, args);
+  }
+
+  var delayedCallbacks, delayedCallbackDepth = 0;
+  function signalLater(emitter, type /*, values...*/) {
+    var arr = emitter._handlers && emitter._handlers[type];
+    if (!arr) return;
+    var args = Array.prototype.slice.call(arguments, 2);
+    if (!delayedCallbacks) {
+      ++delayedCallbackDepth;
+      delayedCallbacks = [];
+      setTimeout(fireDelayed, 0);
+    }
+    function bnd(f) {return function(){f.apply(null, args);};};
+    for (var i = 0; i < arr.length; ++i)
+      delayedCallbacks.push(bnd(arr[i]));
+  }
+
+  function signalDOMEvent(cm, e, override) {
+    signal(cm, override || e.type, cm, e);
+    return e_defaultPrevented(e);
+  }
+
+  function fireDelayed() {
+    --delayedCallbackDepth;
+    var delayed = delayedCallbacks;
+    delayedCallbacks = null;
+    for (var i = 0; i < delayed.length; ++i) delayed[i]();
+  }
+
+  function hasHandler(emitter, type) {
+    var arr = emitter._handlers && emitter._handlers[type];
+    return arr && arr.length > 0;
+  }
+
+  CodeMirror.on = on; CodeMirror.off = off; CodeMirror.signal = signal;
+
+  function eventMixin(ctor) {
+    ctor.prototype.on = function(type, f) {on(this, type, f);};
+    ctor.prototype.off = function(type, f) {off(this, type, f);};
+  }
+
+  // MISC UTILITIES
+
+  // Number of pixels added to scroller and sizer to hide scrollbar
+  var scrollerCutOff = 30;
+
+  // Returned or thrown by various protocols to signal 'I'm not
+  // handling this'.
+  var Pass = CodeMirror.Pass = {toString: function(){return "CodeMirror.Pass";}};
+
+  function Delayed() {this.id = null;}
+  Delayed.prototype = {set: function(ms, f) {clearTimeout(this.id); this.id = setTimeout(f, ms);}};
+
+  // Counts the column offset in a string, taking tabs into account.
+  // Used mostly to find indentation.
+  function countColumn(string, end, tabSize, startIndex, startValue) {
+    if (end == null) {
+      end = string.search(/[^\s\u00a0]/);
+      if (end == -1) end = string.length;
+    }
+    for (var i = startIndex || 0, n = startValue || 0; i < end; ++i) {
+      if (string.charAt(i) == "\t") n += tabSize - (n % tabSize);
+      else ++n;
+    }
+    return n;
+  }
+  CodeMirror.countColumn = countColumn;
+
+  var spaceStrs = [""];
+  function spaceStr(n) {
+    while (spaceStrs.length <= n)
+      spaceStrs.push(lst(spaceStrs) + " ");
+    return spaceStrs[n];
+  }
+
+  function lst(arr) { return arr[arr.length-1]; }
+
+  function selectInput(node) {
+    if (ios) { // Mobile Safari apparently has a bug where select() is broken.
+      node.selectionStart = 0;
+      node.selectionEnd = node.value.length;
+    } else {
+      // Suppress mysterious IE10 errors
+      try { node.select(); }
+      catch(_e) {}
+    }
+  }
+
+  function indexOf(collection, elt) {
+    if (collection.indexOf) return collection.indexOf(elt);
+    for (var i = 0, e = collection.length; i < e; ++i)
+      if (collection[i] == elt) return i;
+    return -1;
+  }
+
+  function createObj(base, props) {
+    function Obj() {}
+    Obj.prototype = base;
+    var inst = new Obj();
+    if (props) copyObj(props, inst);
+    return inst;
+  }
+
+  function copyObj(obj, target) {
+    if (!target) target = {};
+    for (var prop in obj) if (obj.hasOwnProperty(prop)) target[prop] = obj[prop];
+    return target;
+  }
+
+  function emptyArray(size) {
+    for (var a = [], i = 0; i < size; ++i) a.push(undefined);
+    return a;
+  }
+
+  function bind(f) {
+    var args = Array.prototype.slice.call(arguments, 1);
+    return function(){return f.apply(null, args);};
+  }
+
+  var nonASCIISingleCaseWordChar = /[\u3040-\u309f\u30a0-\u30ff\u3400-\u4db5\u4e00-\u9fcc\uac00-\ud7af]/;
+  function isWordChar(ch) {
+    return /\w/.test(ch) || ch > "\x80" &&
+      (ch.toUpperCase() != ch.toLowerCase() || nonASCIISingleCaseWordChar.test(ch));
+  }
+
+  function isEmpty(obj) {
+    for (var n in obj) if (obj.hasOwnProperty(n) && obj[n]) return false;
+    return true;
+  }
+
+  var isExtendingChar = /[\u0300-\u036F\u0483-\u0487\u0488-\u0489\u0591-\u05BD\u05BF\u05C1-\u05C2\u05C4-\u05C5\u05C7\u0610-\u061A\u064B-\u065F\u0670\u06D6-\u06DC\u06DF-\u06E4\u06E7-\u06E8\u06EA-\u06ED\uA66F\uA670-\uA672\uA674-\uA67D\uA69F\udc00-\udfff]/;
+
+  // DOM UTILITIES
+
+  function elt(tag, content, className, style) {
+    var e = document.createElement(tag);
+    if (className) e.className = className;
+    if (style) e.style.cssText = style;
+    if (typeof content == "string") setTextContent(e, content);
+    else if (content) for (var i = 0; i < content.length; ++i) e.appendChild(content[i]);
+    return e;
+  }
+
+  function removeChildren(e) {
+    for (var count = e.childNodes.length; count > 0; --count)
+      e.removeChild(e.firstChild);
+    return e;
+  }
+
+  function removeChildrenAndAdd(parent, e) {
+    return removeChildren(parent).appendChild(e);
+  }
+
+  function setTextContent(e, str) {
+    if (ie_lt9) {
+      e.innerHTML = "";
+      e.appendChild(document.createTextNode(str));
+    } else e.textContent = str;
+  }
+
+  function getRect(node) {
+    return node.getBoundingClientRect();
+  }
+  CodeMirror.replaceGetRect = function(f) { getRect = f; };
+
+  // FEATURE DETECTION
+
+  // Detect drag-and-drop
+  var dragAndDrop = function() {
+    // There is *some* kind of drag-and-drop support in IE6-8, but I
+    // couldn't get it to work yet.
+    if (ie_lt9) return false;
+    var div = elt('div');
+    return "draggable" in div || "dragDrop" in div;
+  }();
+
+  // For a reason I have yet to figure out, some browsers disallow
+  // word wrapping between certain characters *only* if a new inline
+  // element is started between them. This makes it hard to reliably
+  // measure the position of things, since that requires inserting an
+  // extra span. This terribly fragile set of tests matches the
+  // character combinations that suffer from this phenomenon on the
+  // various browsers.
+  function spanAffectsWrapping() { return false; }
+  if (gecko) // Only for "$'"
+    spanAffectsWrapping = function(str, i) {
+      return str.charCodeAt(i - 1) == 36 && str.charCodeAt(i) == 39;
+    };
+  else if (safari && !/Version\/([6-9]|\d\d)\b/.test(navigator.userAgent))
+    spanAffectsWrapping = function(str, i) {
+      return /\-[^ \-?]|\?[^ !\'\"\),.\-\/:;\?\]\}]/.test(str.slice(i - 1, i + 1));
+    };
+  else if (webkit && !/Chrome\/(?:29|[3-9]\d|\d\d\d)\./.test(navigator.userAgent))
+    spanAffectsWrapping = function(str, i) {
+      if (i > 1 && str.charCodeAt(i - 1) == 45) {
+        if (/\w/.test(str.charAt(i - 2)) && /[^\-?\.]/.test(str.charAt(i))) return true;
+        if (i > 2 && /[\d\.,]/.test(str.charAt(i - 2)) && /[\d\.,]/.test(str.charAt(i))) return false;
+      }
+      return /[~!#%&*)=+}\]|\"\.>,:;][({[<]|-[^\-?\.\u2010-\u201f\u2026]|\?[\w~`@#$%\^&*(_=+{[|><]|…[\w~`@#$%\^&*(_=+{[><]/.test(str.slice(i - 1, i + 1));
+    };
+
+  var knownScrollbarWidth;
+  function scrollbarWidth(measure) {
+    if (knownScrollbarWidth != null) return knownScrollbarWidth;
+    var test = elt("div", null, null, "width: 50px; height: 50px; overflow-x: scroll");
+    removeChildrenAndAdd(measure, test);
+    if (test.offsetWidth)
+      knownScrollbarWidth = test.offsetHeight - test.clientHeight;
+    return knownScrollbarWidth || 0;
+  }
+
+  var zwspSupported;
+  function zeroWidthElement(measure) {
+    if (zwspSupported == null) {
+      var test = elt("span", "\u200b");
+      removeChildrenAndAdd(measure, elt("span", [test, document.createTextNode("x")]));
+      if (measure.firstChild.offsetHeight != 0)
+        zwspSupported = test.offsetWidth <= 1 && test.offsetHeight > 2 && !ie_lt8;
+    }
+    if (zwspSupported) return elt("span", "\u200b");
+    else return elt("span", "\u00a0", null, "display: inline-block; width: 1px; margin-right: -1px");
+  }
+
+  // See if "".split is the broken IE version, if so, provide an
+  // alternative way to split lines.
+  var splitLines = "\n\nb".split(/\n/).length != 3 ? function(string) {
+    var pos = 0, result = [], l = string.length;
+    while (pos <= l) {
+      var nl = string.indexOf("\n", pos);
+      if (nl == -1) nl = string.length;
+      var line = string.slice(pos, string.charAt(nl - 1) == "\r" ? nl - 1 : nl);
+      var rt = line.indexOf("\r");
+      if (rt != -1) {
+        result.push(line.slice(0, rt));
+        pos += rt + 1;
+      } else {
+        result.push(line);
+        pos = nl + 1;
+      }
+    }
+    return result;
+  } : function(string){return string.split(/\r\n?|\n/);};
+  CodeMirror.splitLines = splitLines;
+
+  var hasSelection = window.getSelection ? function(te) {
+    try { return te.selectionStart != te.selectionEnd; }
+    catch(e) { return false; }
+  } : function(te) {
+    try {var range = te.ownerDocument.selection.createRange();}
+    catch(e) {}
+    if (!range || range.parentElement() != te) return false;
+    return range.compareEndPoints("StartToEnd", range) != 0;
+  };
+
+  var hasCopyEvent = (function() {
+    var e = elt("div");
+    if ("oncopy" in e) return true;
+    e.setAttribute("oncopy", "return;");
+    return typeof e.oncopy == 'function';
+  })();
+
+  // KEY NAMING
+
+  var keyNames = {3: "Enter", 8: "Backspace", 9: "Tab", 13: "Enter", 16: "Shift", 17: "Ctrl", 18: "Alt",
+                  19: "Pause", 20: "CapsLock", 27: "Esc", 32: "Space", 33: "PageUp", 34: "PageDown", 35: "End",
+                  36: "Home", 37: "Left", 38: "Up", 39: "Right", 40: "Down", 44: "PrintScrn", 45: "Insert",
+                  46: "Delete", 59: ";", 91: "Mod", 92: "Mod", 93: "Mod", 109: "-", 107: "=", 127: "Delete",
+                  186: ";", 187: "=", 188: ",", 189: "-", 190: ".", 191: "/", 192: "`", 219: "[", 220: "\\",
+                  221: "]", 222: "'", 63276: "PageUp", 63277: "PageDown", 63275: "End", 63273: "Home",
+                  63234: "Left", 63232: "Up", 63235: "Right", 63233: "Down", 63302: "Insert", 63272: "Delete"};
+  CodeMirror.keyNames = keyNames;
+  (function() {
+    // Number keys
+    for (var i = 0; i < 10; i++) keyNames[i + 48] = String(i);
+    // Alphabetic keys
+    for (var i = 65; i <= 90; i++) keyNames[i] = String.fromCharCode(i);
+    // Function keys
+    for (var i = 1; i <= 12; i++) keyNames[i + 111] = keyNames[i + 63235] = "F" + i;
+  })();
+
+  // BIDI HELPERS
+
+  function iterateBidiSections(order, from, to, f) {
+    if (!order) return f(from, to, "ltr");
+    var found = false;
+    for (var i = 0; i < order.length; ++i) {
+      var part = order[i];
+      if (part.from < to && part.to > from || from == to && part.to == from) {
+        f(Math.max(part.from, from), Math.min(part.to, to), part.level == 1 ? "rtl" : "ltr");
+        found = true;
+      }
+    }
+    if (!found) f(from, to, "ltr");
+  }
+
+  function bidiLeft(part) { return part.level % 2 ? part.to : part.from; }
+  function bidiRight(part) { return part.level % 2 ? part.from : part.to; }
+
+  function lineLeft(line) { var order = getOrder(line); return order ? bidiLeft(order[0]) : 0; }
+  function lineRight(line) {
+    var order = getOrder(line);
+    if (!order) return line.text.length;
+    return bidiRight(lst(order));
+  }
+
+  function lineStart(cm, lineN) {
+    var line = getLine(cm.doc, lineN);
+    var visual = visualLine(cm.doc, line);
+    if (visual != line) lineN = lineNo(visual);
+    var order = getOrder(visual);
+    var ch = !order ? 0 : order[0].level % 2 ? lineRight(visual) : lineLeft(visual);
+    return Pos(lineN, ch);
+  }
+  function lineEnd(cm, lineN) {
+    var merged, line;
+    while (merged = collapsedSpanAtEnd(line = getLine(cm.doc, lineN)))
+      lineN = merged.find().to.line;
+    var order = getOrder(line);
+    var ch = !order ? line.text.length : order[0].level % 2 ? lineLeft(line) : lineRight(line);
+    return Pos(lineN, ch);
+  }
+
+  function compareBidiLevel(order, a, b) {
+    var linedir = order[0].level;
+    if (a == linedir) return true;
+    if (b == linedir) return false;
+    return a < b;
+  }
+  var bidiOther;
+  function getBidiPartAt(order, pos) {
+    for (var i = 0, found; i < order.length; ++i) {
+      var cur = order[i];
+      if (cur.from < pos && cur.to > pos) { bidiOther = null; return i; }
+      if (cur.from == pos || cur.to == pos) {
+        if (found == null) {
+          found = i;
+        } else if (compareBidiLevel(order, cur.level, order[found].level)) {
+          bidiOther = found;
+          return i;
+        } else {
+          bidiOther = i;
+          return found;
+        }
+      }
+    }
+    bidiOther = null;
+    return found;
+  }
+
+  function moveInLine(line, pos, dir, byUnit) {
+    if (!byUnit) return pos + dir;
+    do pos += dir;
+    while (pos > 0 && isExtendingChar.test(line.text.charAt(pos)));
+    return pos;
+  }
+
+  // This is somewhat involved. It is needed in order to move
+  // 'visually' through bi-directional text -- i.e., pressing left
+  // should make the cursor go left, even when in RTL text. The
+  // tricky part is the 'jumps', where RTL and LTR text touch each
+  // other. This often requires the cursor offset to move more than
+  // one unit, in order to visually move one unit.
+  function moveVisually(line, start, dir, byUnit) {
+    var bidi = getOrder(line);
+    if (!bidi) return moveLogically(line, start, dir, byUnit);
+    var pos = getBidiPartAt(bidi, start), part = bidi[pos];
+    var target = moveInLine(line, start, part.level % 2 ? -dir : dir, byUnit);
+
+    for (;;) {
+      if (target > part.from && target < part.to) return target;
+      if (target == part.from || target == part.to) {
+        if (getBidiPartAt(bidi, target) == pos) return target;
+        part = bidi[pos += dir];
+        return (dir > 0) == part.level % 2 ? part.to : part.from;
+      } else {
+        part = bidi[pos += dir];
+        if (!part) return null;
+        if ((dir > 0) == part.level % 2)
+          target = moveInLine(line, part.to, -1, byUnit);
+        else
+          target = moveInLine(line, part.from, 1, byUnit);
+      }
+    }
+  }
+
+  function moveLogically(line, start, dir, byUnit) {
+    var target = start + dir;
+    if (byUnit) while (target > 0 && isExtendingChar.test(line.text.charAt(target))) target += dir;
+    return target < 0 || target > line.text.length ? null : target;
+  }
+
+  // Bidirectional ordering algorithm
+  // See http://unicode.org/reports/tr9/tr9-13.html for the algorithm
+  // that this (partially) implements.
+
+  // One-char codes used for character types:
+  // L (L):   Left-to-Right
+  // R (R):   Right-to-Left
+  // r (AL):  Right-to-Left Arabic
+  // 1 (EN):  European Number
+  // + (ES):  European Number Separator
+  // % (ET):  European Number Terminator
+  // n (AN):  Arabic Number
+  // , (CS):  Common Number Separator
+  // m (NSM): Non-Spacing Mark
+  // b (BN):  Boundary Neutral
+  // s (B):   Paragraph Separator
+  // t (S):   Segment Separator
+  // w (WS):  Whitespace
+  // N (ON):  Other Neutrals
+
+  // Returns null if characters are ordered as they appear
+  // (left-to-right), or an array of sections ({from, to, level}
+  // objects) in the order in which they occur visually.
+  var bidiOrdering = (function() {
+    // Character types for codepoints 0 to 0xff
+    var lowTypes = "bbbbbbbbbtstwsbbbbbbbbbbbbbbssstwNN%%%NNNNNN,N,N1111111111NNNNNNNLLLLLLLLLLLLLLLLLLLLLLLLLLNNNNNNLLLLLLLLLLLLLLLLLLLLLLLLLLNNNNbbbbbbsbbbbbbbbbbbbbbbbbbbbbbbbbb,N%%%%NNNNLNNNNN%%11NLNNN1LNNNNNLLLLLLLLLLLLLLLLLLLLLLLNLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLNLLLLLLLL";
+    // Character types for codepoints 0x600 to 0x6ff
+    var arabicTypes = "rrrrrrrrrrrr,rNNmmmmmmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmrrrrrrrnnnnnnnnnn%nnrrrmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmmmmmmNmmmmrrrrrrrrrrrrrrrrrr";
+    function charType(code) {
+      if (code <= 0xff) return lowTypes.charAt(code);
+      else if (0x590 <= code && code <= 0x5f4) return "R";
+      else if (0x600 <= code && code <= 0x6ff) return arabicTypes.charAt(code - 0x600);
+      else if (0x700 <= code && code <= 0x8ac) return "r";
+      else return "L";
+    }
+
+    var bidiRE = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
+    var isNeutral = /[stwN]/, isStrong = /[LRr]/, countsAsLeft = /[Lb1n]/, countsAsNum = /[1n]/;
+    // Browsers seem to always treat the boundaries of block elements as being L.
+    var outerType = "L";
+
+    return function(str) {
+      if (!bidiRE.test(str)) return false;
+      var len = str.length, types = [];
+      for (var i = 0, type; i < len; ++i)
+        types.push(type = charType(str.charCodeAt(i)));
+
+      // W1. Examine each non-spacing mark (NSM) in the level run, and
+      // change the type of the NSM to the type of the previous
+      // character. If the NSM is at the start of the level run, it will
+      // get the type of sor.
+      for (var i = 0, prev = outerType; i < len; ++i) {
+        var type = types[i];
+        if (type == "m") types[i] = prev;
+        else prev = type;
+      }
+
+      // W2. Search backwards from each instance of a European number
+      // until the first strong type (R, L, AL, or sor) is found. If an
+      // AL is found, change the type of the European number to Arabic
+      // number.
+      // W3. Change all ALs to R.
+      for (var i = 0, cur = outerType; i < len; ++i) {
+        var type = types[i];
+        if (type == "1" && cur == "r") types[i] = "n";
+        else if (isStrong.test(type)) { cur = type; if (type == "r") types[i] = "R"; }
+      }
+
+      // W4. A single European separator between two European numbers
+      // changes to a European number. A single common separator between
+      // two numbers of the same type changes to that type.
+      for (var i = 1, prev = types[0]; i < len - 1; ++i) {
+        var type = types[i];
+        if (type == "+" && prev == "1" && types[i+1] == "1") types[i] = "1";
+        else if (type == "," && prev == types[i+1] &&
+                 (prev == "1" || prev == "n")) types[i] = prev;
+        prev = type;
+      }
+
+      // W5. A sequence of European terminators adjacent to European
+      // numbers changes to all European numbers.
+      // W6. Otherwise, separators and terminators change to Other
+      // Neutral.
+      for (var i = 0; i < len; ++i) {
+        var type = types[i];
+        if (type == ",") types[i] = "N";
+        else if (type == "%") {
+          for (var end = i + 1; end < len && types[end] == "%"; ++end) {}
+          var replace = (i && types[i-1] == "!") || (end < len - 1 && types[end] == "1") ? "1" : "N";
+          for (var j = i; j < end; ++j) types[j] = replace;
+          i = end - 1;
+        }
+      }
+
+      // W7. Search backwards from each instance of a European number
+      // until the first strong type (R, L, or sor) is found. If an L is
+      // found, then change the type of the European number to L.
+      for (var i = 0, cur = outerType; i < len; ++i) {
+        var type = types[i];
+        if (cur == "L" && type == "1") types[i] = "L";
+        else if (isStrong.test(type)) cur = type;
+      }
+
+      // N1. A sequence of neutrals takes the direction of the
+      // surrounding strong text if the text on both sides has the same
+      // direction. European and Arabic numbers act as if they were R in
+      // terms of their influence on neutrals. Start-of-level-run (sor)
+      // and end-of-level-run (eor) are used at level run boundaries.
+      // N2. Any remaining neutrals take the embedding direction.
+      for (var i = 0; i < len; ++i) {
+        if (isNeutral.test(types[i])) {
+          for (var end = i + 1; end < len && isNeutral.test(types[end]); ++end) {}
+          var before = (i ? types[i-1] : outerType) == "L";
+          var after = (end < len - 1 ? types[end] : outerType) == "L";
+          var replace = before || after ? "L" : "R";
+          for (var j = i; j < end; ++j) types[j] = replace;
+          i = end - 1;
+        }
+      }
+
+      // Here we depart from the documented algorithm, in order to avoid
+      // building up an actual levels array. Since there are only three
+      // levels (0, 1, 2) in an implementation that doesn't take
+      // explicit embedding into account, we can build up the order on
+      // the fly, without following the level-based algorithm.
+      var order = [], m;
+      for (var i = 0; i < len;) {
+        if (countsAsLeft.test(types[i])) {
+          var start = i;
+          for (++i; i < len && countsAsLeft.test(types[i]); ++i) {}
+          order.push({from: start, to: i, level: 0});
+        } else {
+          var pos = i, at = order.length;
+          for (++i; i < len && types[i] != "L"; ++i) {}
+          for (var j = pos; j < i;) {
+            if (countsAsNum.test(types[j])) {
+              if (pos < j) order.splice(at, 0, {from: pos, to: j, level: 1});
+              var nstart = j;
+              for (++j; j < i && countsAsNum.test(types[j]); ++j) {}
+              order.splice(at, 0, {from: nstart, to: j, level: 2});
+              pos = j;
+            } else ++j;
+          }
+          if (pos < i) order.splice(at, 0, {from: pos, to: i, level: 1});
+        }
+      }
+      if (order[0].level == 1 && (m = str.match(/^\s+/))) {
+        order[0].from = m[0].length;
+        order.unshift({from: 0, to: m[0].length, level: 0});
+      }
+      if (lst(order).level == 1 && (m = str.match(/\s+$/))) {
+        lst(order).to -= m[0].length;
+        order.push({from: len - m[0].length, to: len, level: 0});
+      }
+      if (order[0].level != lst(order).level)
+        order.push({from: len, to: len, level: order[0].level});
+
+      return order;
+    };
+  })();
+
+  // THE END
+
+  CodeMirror.version = "3.14.1";
+
+  return CodeMirror;
+})();
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/css.js b/Source/WebInspectorUI/Tools/PrettyPrinting/css.js
new file mode 100644
index 000000000..b52e787a7
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/css.js
@@ -0,0 +1,608 @@
+CodeMirror.defineMode("css", function(config) {
+  return CodeMirror.getMode(config, "text/css");
+});
+
+CodeMirror.defineMode("css-base", function(config, parserConfig) {
+  "use strict";
+
+  var indentUnit = config.indentUnit,
+      hooks = parserConfig.hooks || {},
+      atMediaTypes = parserConfig.atMediaTypes || {},
+      atMediaFeatures = parserConfig.atMediaFeatures || {},
+      propertyKeywords = parserConfig.propertyKeywords || {},
+      colorKeywords = parserConfig.colorKeywords || {},
+      valueKeywords = parserConfig.valueKeywords || {},
+      allowNested = !!parserConfig.allowNested,
+      type = null;
+
+  function ret(style, tp) { type = tp; return style; }
+
+  function tokenBase(stream, state) {
+    var ch = stream.next();
+    if (hooks[ch]) {
+      // result[0] is style and result[1] is type
+      var result = hooks[ch](stream, state);
+      if (result !== false) return result;
+    }
+    if (ch == "@") {stream.eatWhile(/[\w\\\-]/); return ret("def", stream.current());}
+    else if (ch == "=") ret(null, "compare");
+    else if ((ch == "~" || ch == "|") && stream.eat("=")) return ret(null, "compare");
+    else if (ch == "\"" || ch == "'") {
+      state.tokenize = tokenString(ch);
+      return state.tokenize(stream, state);
+    }
+    else if (ch == "#") {
+      stream.eatWhile(/[\w\\\-]/);
+      return ret("atom", "hash");
+    }
+    else if (ch == "!") {
+      stream.match(/^\s*\w*/);
+      return ret("keyword", "important");
+    }
+    else if (/\d/.test(ch)) {
+      stream.eatWhile(/[\w.%]/);
+      return ret("number", "unit");
+    }
+    else if (ch === "-") {
+      if (/\d/.test(stream.peek())) {
+        stream.eatWhile(/[\w.%]/);
+        return ret("number", "unit");
+      } else if (stream.match(/^[^-]+-/)) {
+        return ret("meta", "meta");
+      }
+    }
+    else if (/[,+>*\/]/.test(ch)) {
+      return ret(null, "select-op");
+    }
+    else if (ch == "." && stream.match(/^-?[_a-z][_a-z0-9-]*/i)) {
+      return ret("qualifier", "qualifier");
+    }
+    else if (ch == ":") {
+      return ret("operator", ch);
+    }
+    else if (/[;{}\[\]\(\)]/.test(ch)) {
+      return ret(null, ch);
+    }
+    else if (ch == "u" && stream.match("rl(")) {
+      stream.backUp(1);
+      state.tokenize = tokenParenthesized;
+      return ret("property", "variable");
+    }
+    else {
+      stream.eatWhile(/[\w\\\-]/);
+      return ret("property", "variable");
+    }
+  }
+
+  function tokenString(quote, nonInclusive) {
+    return function(stream, state) {
+      var escaped = false, ch;
+      while ((ch = stream.next()) != null) {
+        if (ch == quote && !escaped)
+          break;
+        escaped = !escaped && ch == "\\";
+      }
+      if (!escaped) {
+        if (nonInclusive) stream.backUp(1);
+        state.tokenize = tokenBase;
+      }
+      return ret("string", "string");
+    };
+  }
+
+  function tokenParenthesized(stream, state) {
+    stream.next(); // Must be '('
+    if (!stream.match(/\s*[\"\']/, false))
+      state.tokenize = tokenString(")", true);
+    else
+      state.tokenize = tokenBase;
+    return ret(null, "(");
+  }
+
+  return {
+    startState: function(base) {
+      return {tokenize: tokenBase,
+              baseIndent: base || 0,
+              stack: [],
+              lastToken: null};
+    },
+
+    token: function(stream, state) {
+
+      // Use these terms when applicable (see http://www.xanthir.com/blog/b4E50)
+      //
+      // rule** or **ruleset:
+      // A selector + braces combo, or an at-rule.
+      //
+      // declaration block:
+      // A sequence of declarations.
+      //
+      // declaration:
+      // A property + colon + value combo.
+      //
+      // property value:
+      // The entire value of a property.
+      //
+      // component value:
+      // A single piece of a property value. Like the 5px in
+      // text-shadow: 0 0 5px blue;. Can also refer to things that are
+      // multiple terms, like the 1-4 terms that make up the background-size
+      // portion of the background shorthand.
+      //
+      // term:
+      // The basic unit of author-facing CSS, like a single number (5),
+      // dimension (5px), string ("foo"), or function. Officially defined
+      //  by the CSS 2.1 grammar (look for the 'term' production)
+      //
+      //
+      // simple selector:
+      // A single atomic selector, like a type selector, an attr selector, a
+      // class selector, etc.
+      //
+      // compound selector:
+      // One or more simple selectors without a combinator. div.example is
+      // compound, div > .example is not.
+      //
+      // complex selector:
+      // One or more compound selectors chained with combinators.
+      //
+      // combinator:
+      // The parts of selectors that express relationships. There are four
+      // currently - the space (descendant combinator), the greater-than
+      // bracket (child combinator), the plus sign (next sibling combinator),
+      // and the tilda (following sibling combinator).
+      //
+      // sequence of selectors:
+      // One or more of the named type of selector chained with commas.
+
+      state.tokenize = state.tokenize || tokenBase;
+      if (state.tokenize == tokenBase && stream.eatSpace()) return null;
+      var style = state.tokenize(stream, state);
+      if (style && typeof style != "string") style = ret(style[0], style[1]);
+
+      // Changing style returned based on context
+      var context = state.stack[state.stack.length-1];
+      if (style == "variable") {
+        if (type == "variable-definition") state.stack.push("propertyValue");
+        return state.lastToken = "variable-2";
+      } else if (style == "property") {
+        var word = stream.current().toLowerCase();
+        if (context == "propertyValue") {
+          if (valueKeywords.hasOwnProperty(word)) {
+            style = "string-2";
+          } else if (colorKeywords.hasOwnProperty(word)) {
+            style = "keyword";
+          } else {
+            style = "variable-2";
+          }
+        } else if (context == "rule") {
+          if (!propertyKeywords.hasOwnProperty(word)) {
+            style += " error";
+          }
+        } else if (context == "block") {
+          // if a value is present in both property, value, or color, the order
+          // of preference is property -> color -> value
+          if (propertyKeywords.hasOwnProperty(word)) {
+            style = "property";
+          } else if (colorKeywords.hasOwnProperty(word)) {
+            style = "keyword";
+          } else if (valueKeywords.hasOwnProperty(word)) {
+            style = "string-2";
+          } else {
+            style = "tag";
+          }
+        } else if (!context || context == "@media{") {
+          style = "tag";
+        } else if (context == "@media") {
+          if (atMediaTypes[stream.current()]) {
+            style = "attribute"; // Known attribute
+          } else if (/^(only|not)$/.test(word)) {
+            style = "keyword";
+          } else if (word == "and") {
+            style = "error"; // "and" is only allowed in @mediaType
+          } else if (atMediaFeatures.hasOwnProperty(word)) {
+            style = "error"; // Known property, should be in @mediaType(
+          } else {
+            // Unknown, expecting keyword or attribute, assuming attribute
+            style = "attribute error";
+          }
+        } else if (context == "@mediaType") {
+          if (atMediaTypes.hasOwnProperty(word)) {
+            style = "attribute";
+          } else if (word == "and") {
+            style = "operator";
+          } else if (/^(only|not)$/.test(word)) {
+            style = "error"; // Only allowed in @media
+          } else {
+            // Unknown attribute or property, but expecting property (preceded
+            // by "and"). Should be in parentheses
+            style = "error";
+          }
+        } else if (context == "@mediaType(") {
+          if (propertyKeywords.hasOwnProperty(word)) {
+            // do nothing, remains "property"
+          } else if (atMediaTypes.hasOwnProperty(word)) {
+            style = "error"; // Known property, should be in parentheses
+          } else if (word == "and") {
+            style = "operator";
+          } else if (/^(only|not)$/.test(word)) {
+            style = "error"; // Only allowed in @media
+          } else {
+            style += " error";
+          }
+        } else if (context == "@import") {
+          style = "tag";
+        } else {
+          style = "error";
+        }
+      } else if (style == "atom") {
+        if(!context || context == "@media{" || context == "block") {
+          style = "builtin";
+        } else if (context == "propertyValue") {
+          if (!/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(stream.current())) {
+            style += " error";
+          }
+        } else {
+          style = "error";
+        }
+      } else if (context == "@media" && type == "{") {
+        style = "error";
+      }
+
+      // Push/pop context stack
+      if (type == "{") {
+        if (context == "@media" || context == "@mediaType") {
+          state.stack.pop();
+          state.stack[state.stack.length-1] = "@media{";
+        }
+        else {
+          var newContext = allowNested ? "block" : "rule";
+          state.stack.push(newContext);
+        }
+      }
+      else if (type == "}") {
+        var lastState = state.stack[state.stack.length - 1];
+        if (lastState == "interpolation") style = "operator";
+        state.stack.pop();
+        if (context == "propertyValue") state.stack.pop();
+      }
+      else if (type == "interpolation") state.stack.push("interpolation");
+      else if (type == "@media") state.stack.push("@media");
+      else if (type == "@import") state.stack.push("@import");
+      else if (context == "@media" && /\b(keyword|attribute)\b/.test(style))
+        state.stack.push("@mediaType");
+      else if (context == "@mediaType" && stream.current() == ",") state.stack.pop();
+      else if (context == "@mediaType" && type == "(") state.stack.push("@mediaType(");
+      else if (context == "@mediaType(" && type == ")") state.stack.pop();
+      else if (type == ":" && state.lastToken == "property") state.stack.push("propertyValue");
+      else if (context == "propertyValue" && type == ";") state.stack.pop();
+      else if (context == "@import" && type == ";") state.stack.pop();
+      return state.lastToken = style;
+    },
+
+    indent: function(state, textAfter) {
+      var n = state.stack.length;
+      if (/^\}/.test(textAfter))
+        n -= state.stack[state.stack.length-1] == "propertyValue" ? 2 : 1;
+      return state.baseIndent + n * indentUnit;
+    },
+
+    electricChars: "}",
+    blockCommentStart: "/*",
+    blockCommentEnd: "*/",
+    fold: "brace"
+  };
+});
+
+(function() {
+  function keySet(array) {
+    var keys = {};
+    for (var i = 0; i < array.length; ++i) {
+      keys[array[i]] = true;
+    }
+    return keys;
+  }
+
+  var atMediaTypes = keySet([
+    "all", "aural", "braille", "handheld", "print", "projection", "screen",
+    "tty", "tv", "embossed"
+  ]);
+
+  var atMediaFeatures = keySet([
+    "width", "min-width", "max-width", "height", "min-height", "max-height",
+    "device-width", "min-device-width", "max-device-width", "device-height",
+    "min-device-height", "max-device-height", "aspect-ratio",
+    "min-aspect-ratio", "max-aspect-ratio", "device-aspect-ratio",
+    "min-device-aspect-ratio", "max-device-aspect-ratio", "color", "min-color",
+    "max-color", "color-index", "min-color-index", "max-color-index",
+    "monochrome", "min-monochrome", "max-monochrome", "resolution",
+    "min-resolution", "max-resolution", "scan", "grid"
+  ]);
+
+  var propertyKeywords = keySet([
+    "align-content", "align-items", "align-self", "alignment-adjust",
+    "alignment-baseline", "anchor-point", "animation", "animation-delay",
+    "animation-direction", "animation-duration", "animation-iteration-count",
+    "animation-name", "animation-play-state", "animation-timing-function",
+    "appearance", "azimuth", "backface-visibility", "background",
+    "background-attachment", "background-clip", "background-color",
+    "background-image", "background-origin", "background-position",
+    "background-repeat", "background-size", "baseline-shift", "binding",
+    "bleed", "bookmark-label", "bookmark-level", "bookmark-state",
+    "bookmark-target", "border", "border-bottom", "border-bottom-color",
+    "border-bottom-left-radius", "border-bottom-right-radius",
+    "border-bottom-style", "border-bottom-width", "border-collapse",
+    "border-color", "border-image", "border-image-outset",
+    "border-image-repeat", "border-image-slice", "border-image-source",
+    "border-image-width", "border-left", "border-left-color",
+    "border-left-style", "border-left-width", "border-radius", "border-right",
+    "border-right-color", "border-right-style", "border-right-width",
+    "border-spacing", "border-style", "border-top", "border-top-color",
+    "border-top-left-radius", "border-top-right-radius", "border-top-style",
+    "border-top-width", "border-width", "bottom", "box-decoration-break",
+    "box-shadow", "box-sizing", "break-after", "break-before", "break-inside",
+    "caption-side", "clear", "clip", "color", "color-profile", "column-count",
+    "column-fill", "column-gap", "column-rule", "column-rule-color",
+    "column-rule-style", "column-rule-width", "column-span", "column-width",
+    "columns", "content", "counter-increment", "counter-reset", "crop", "cue",
+    "cue-after", "cue-before", "cursor", "direction", "display",
+    "dominant-baseline", "drop-initial-after-adjust",
+    "drop-initial-after-align", "drop-initial-before-adjust",
+    "drop-initial-before-align", "drop-initial-size", "drop-initial-value",
+    "elevation", "empty-cells", "fit", "fit-position", "flex", "flex-basis",
+    "flex-direction", "flex-flow", "flex-grow", "flex-shrink", "flex-wrap",
+    "float", "float-offset", "font", "font-feature-settings", "font-family",
+    "font-kerning", "font-language-override", "font-size", "font-size-adjust",
+    "font-stretch", "font-style", "font-synthesis", "font-variant",
+    "font-variant-alternates", "font-variant-caps", "font-variant-east-asian",
+    "font-variant-ligatures", "font-variant-numeric", "font-variant-position",
+    "font-weight", "grid-cell", "grid-column", "grid-column-align",
+    "grid-column-sizing", "grid-column-span", "grid-columns", "grid-flow",
+    "grid-row", "grid-row-align", "grid-row-sizing", "grid-row-span",
+    "grid-rows", "grid-template", "hanging-punctuation", "height", "hyphens",
+    "icon", "image-orientation", "image-rendering", "image-resolution",
+    "inline-box-align", "justify-content", "left", "letter-spacing",
+    "line-break", "line-height", "line-stacking", "line-stacking-ruby",
+    "line-stacking-shift", "line-stacking-strategy", "list-style",
+    "list-style-image", "list-style-position", "list-style-type", "margin",
+    "margin-bottom", "margin-left", "margin-right", "margin-top",
+    "marker-offset", "marks", "marquee-direction", "marquee-loop",
+    "marquee-play-count", "marquee-speed", "marquee-style", "max-height",
+    "max-width", "min-height", "min-width", "move-to", "nav-down", "nav-index",
+    "nav-left", "nav-right", "nav-up", "opacity", "order", "orphans", "outline",
+    "outline-color", "outline-offset", "outline-style", "outline-width",
+    "overflow", "overflow-style", "overflow-wrap", "overflow-x", "overflow-y",
+    "padding", "padding-bottom", "padding-left", "padding-right", "padding-top",
+    "page", "page-break-after", "page-break-before", "page-break-inside",
+    "page-policy", "pause", "pause-after", "pause-before", "perspective",
+    "perspective-origin", "pitch", "pitch-range", "play-during", "position",
+    "presentation-level", "punctuation-trim", "quotes", "rendering-intent",
+    "resize", "rest", "rest-after", "rest-before", "richness", "right",
+    "rotation", "rotation-point", "ruby-align", "ruby-overhang",
+    "ruby-position", "ruby-span", "size", "speak", "speak-as", "speak-header",
+    "speak-numeral", "speak-punctuation", "speech-rate", "stress", "string-set",
+    "tab-size", "table-layout", "target", "target-name", "target-new",
+    "target-position", "text-align", "text-align-last", "text-decoration",
+    "text-decoration-color", "text-decoration-line", "text-decoration-skip",
+    "text-decoration-style", "text-emphasis", "text-emphasis-color",
+    "text-emphasis-position", "text-emphasis-style", "text-height",
+    "text-indent", "text-justify", "text-outline", "text-shadow",
+    "text-space-collapse", "text-transform", "text-underline-position",
+    "text-wrap", "top", "transform", "transform-origin", "transform-style",
+    "transition", "transition-delay", "transition-duration",
+    "transition-property", "transition-timing-function", "unicode-bidi",
+    "vertical-align", "visibility", "voice-balance", "voice-duration",
+    "voice-family", "voice-pitch", "voice-range", "voice-rate", "voice-stress",
+    "voice-volume", "volume", "white-space", "widows", "width", "word-break",
+    "word-spacing", "word-wrap", "z-index",
+    // SVG-specific
+    "clip-path", "clip-rule", "mask", "enable-background", "filter", "flood-color",
+    "flood-opacity", "lighting-color", "stop-color", "stop-opacity", "pointer-events",
+    "color-interpolation", "color-interpolation-filters", "color-profile",
+    "color-rendering", "fill", "fill-opacity", "fill-rule", "image-rendering",
+    "marker", "marker-end", "marker-mid", "marker-start", "shape-rendering", "stroke",
+    "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin",
+    "stroke-miterlimit", "stroke-opacity", "stroke-width", "text-rendering",
+    "baseline-shift", "dominant-baseline", "glyph-orientation-horizontal",
+    "glyph-orientation-vertical", "kerning", "text-anchor", "writing-mode"
+  ]);
+
+  var colorKeywords = keySet([
+    "aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige",
+    "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown",
+    "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue",
+    "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod",
+    "darkgray", "darkgreen", "darkkhaki", "darkmagenta", "darkolivegreen",
+    "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen",
+    "darkslateblue", "darkslategray", "darkturquoise", "darkviolet",
+    "deeppink", "deepskyblue", "dimgray", "dodgerblue", "firebrick",
+    "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite",
+    "gold", "goldenrod", "gray", "green", "greenyellow", "honeydew",
+    "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender",
+    "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral",
+    "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightpink",
+    "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray",
+    "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta",
+    "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple",
+    "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise",
+    "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin",
+    "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered",
+    "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred",
+    "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue",
+    "purple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon",
+    "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue",
+    "slateblue", "slategray", "snow", "springgreen", "steelblue", "tan",
+    "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white",
+    "whitesmoke", "yellow", "yellowgreen"
+  ]);
+
+  var valueKeywords = keySet([
+    "above", "absolute", "activeborder", "activecaption", "afar",
+    "after-white-space", "ahead", "alias", "all", "all-scroll", "alternate",
+    "always", "amharic", "amharic-abegede", "antialiased", "appworkspace",
+    "arabic-indic", "armenian", "asterisks", "auto", "avoid", "background",
+    "backwards", "baseline", "below", "bidi-override", "binary", "bengali",
+    "blink", "block", "block-axis", "bold", "bolder", "border", "border-box",
+    "both", "bottom", "break-all", "break-word", "button", "button-bevel",
+    "buttonface", "buttonhighlight", "buttonshadow", "buttontext", "cambodian",
+    "capitalize", "caps-lock-indicator", "caption", "captiontext", "caret",
+    "cell", "center", "checkbox", "circle", "cjk-earthly-branch",
+    "cjk-heavenly-stem", "cjk-ideographic", "clear", "clip", "close-quote",
+    "col-resize", "collapse", "compact", "condensed", "contain", "content",
+    "content-box", "context-menu", "continuous", "copy", "cover", "crop",
+    "cross", "crosshair", "currentcolor", "cursive", "dashed", "decimal",
+    "decimal-leading-zero", "default", "default-button", "destination-atop",
+    "destination-in", "destination-out", "destination-over", "devanagari",
+    "disc", "discard", "document", "dot-dash", "dot-dot-dash", "dotted",
+    "double", "down", "e-resize", "ease", "ease-in", "ease-in-out", "ease-out",
+    "element", "ellipsis", "embed", "end", "ethiopic", "ethiopic-abegede",
+    "ethiopic-abegede-am-et", "ethiopic-abegede-gez", "ethiopic-abegede-ti-er",
+    "ethiopic-abegede-ti-et", "ethiopic-halehame-aa-er",
+    "ethiopic-halehame-aa-et", "ethiopic-halehame-am-et",
+    "ethiopic-halehame-gez", "ethiopic-halehame-om-et",
+    "ethiopic-halehame-sid-et", "ethiopic-halehame-so-et",
+    "ethiopic-halehame-ti-er", "ethiopic-halehame-ti-et",
+    "ethiopic-halehame-tig", "ew-resize", "expanded", "extra-condensed",
+    "extra-expanded", "fantasy", "fast", "fill", "fixed", "flat", "footnotes",
+    "forwards", "from", "geometricPrecision", "georgian", "graytext", "groove",
+    "gujarati", "gurmukhi", "hand", "hangul", "hangul-consonant", "hebrew",
+    "help", "hidden", "hide", "higher", "highlight", "highlighttext",
+    "hiragana", "hiragana-iroha", "horizontal", "hsl", "hsla", "icon", "ignore",
+    "inactiveborder", "inactivecaption", "inactivecaptiontext", "infinite",
+    "infobackground", "infotext", "inherit", "initial", "inline", "inline-axis",
+    "inline-block", "inline-table", "inset", "inside", "intrinsic", "invert",
+    "italic", "justify", "kannada", "katakana", "katakana-iroha", "khmer",
+    "landscape", "lao", "large", "larger", "left", "level", "lighter",
+    "line-through", "linear", "lines", "list-item", "listbox", "listitem",
+    "local", "logical", "loud", "lower", "lower-alpha", "lower-armenian",
+    "lower-greek", "lower-hexadecimal", "lower-latin", "lower-norwegian",
+    "lower-roman", "lowercase", "ltr", "malayalam", "match",
+    "media-controls-background", "media-current-time-display",
+    "media-fullscreen-button", "media-mute-button", "media-play-button",
+    "media-return-to-realtime-button", "media-rewind-button",
+    "media-seek-back-button", "media-seek-forward-button", "media-slider",
+    "media-sliderthumb", "media-time-remaining-display", "media-volume-slider",
+    "media-volume-slider-container", "media-volume-sliderthumb", "medium",
+    "menu", "menulist", "menulist-button", "menulist-text",
+    "menulist-textfield", "menutext", "message-box", "middle", "min-intrinsic",
+    "mix", "mongolian", "monospace", "move", "multiple", "myanmar", "n-resize",
+    "narrower", "ne-resize", "nesw-resize", "no-close-quote", "no-drop",
+    "no-open-quote", "no-repeat", "none", "normal", "not-allowed", "nowrap",
+    "ns-resize", "nw-resize", "nwse-resize", "oblique", "octal", "open-quote",
+    "optimizeLegibility", "optimizeSpeed", "oriya", "oromo", "outset",
+    "outside", "overlay", "overline", "padding", "padding-box", "painted",
+    "paused", "persian", "plus-darker", "plus-lighter", "pointer", "portrait",
+    "pre", "pre-line", "pre-wrap", "preserve-3d", "progress", "push-button",
+    "radio", "read-only", "read-write", "read-write-plaintext-only", "relative",
+    "repeat", "repeat-x", "repeat-y", "reset", "reverse", "rgb", "rgba",
+    "ridge", "right", "round", "row-resize", "rtl", "run-in", "running",
+    "s-resize", "sans-serif", "scroll", "scrollbar", "se-resize", "searchfield",
+    "searchfield-cancel-button", "searchfield-decoration",
+    "searchfield-results-button", "searchfield-results-decoration",
+    "semi-condensed", "semi-expanded", "separate", "serif", "show", "sidama",
+    "single", "skip-white-space", "slide", "slider-horizontal",
+    "slider-vertical", "sliderthumb-horizontal", "sliderthumb-vertical", "slow",
+    "small", "small-caps", "small-caption", "smaller", "solid", "somali",
+    "source-atop", "source-in", "source-out", "source-over", "space", "square",
+    "square-button", "start", "static", "status-bar", "stretch", "stroke",
+    "sub", "subpixel-antialiased", "super", "sw-resize", "table",
+    "table-caption", "table-cell", "table-column", "table-column-group",
+    "table-footer-group", "table-header-group", "table-row", "table-row-group",
+    "telugu", "text", "text-bottom", "text-top", "textarea", "textfield", "thai",
+    "thick", "thin", "threeddarkshadow", "threedface", "threedhighlight",
+    "threedlightshadow", "threedshadow", "tibetan", "tigre", "tigrinya-er",
+    "tigrinya-er-abegede", "tigrinya-et", "tigrinya-et-abegede", "to", "top",
+    "transparent", "ultra-condensed", "ultra-expanded", "underline", "up",
+    "upper-alpha", "upper-armenian", "upper-greek", "upper-hexadecimal",
+    "upper-latin", "upper-norwegian", "upper-roman", "uppercase", "urdu", "url",
+    "vertical", "vertical-text", "visible", "visibleFill", "visiblePainted",
+    "visibleStroke", "visual", "w-resize", "wait", "wave", "wider",
+    "window", "windowframe", "windowtext", "x-large", "x-small", "xor",
+    "xx-large", "xx-small"
+  ]);
+
+  function tokenCComment(stream, state) {
+    var maybeEnd = false, ch;
+    while ((ch = stream.next()) != null) {
+      if (maybeEnd && ch == "/") {
+        state.tokenize = null;
+        break;
+      }
+      maybeEnd = (ch == "*");
+    }
+    return ["comment", "comment"];
+  }
+
+  CodeMirror.defineMIME("text/css", {
+    atMediaTypes: atMediaTypes,
+    atMediaFeatures: atMediaFeatures,
+    propertyKeywords: propertyKeywords,
+    colorKeywords: colorKeywords,
+    valueKeywords: valueKeywords,
+    hooks: {
+      "<": function(stream, state) {
+        function tokenSGMLComment(stream, state) {
+          var dashes = 0, ch;
+          while ((ch = stream.next()) != null) {
+            if (dashes >= 2 && ch == ">") {
+              state.tokenize = null;
+              break;
+            }
+            dashes = (ch == "-") ? dashes + 1 : 0;
+          }
+          return ["comment", "comment"];
+        }
+        if (stream.eat("!")) {
+          state.tokenize = tokenSGMLComment;
+          return tokenSGMLComment(stream, state);
+        }
+      },
+      "/": function(stream, state) {
+        if (stream.eat("*")) {
+          state.tokenize = tokenCComment;
+          return tokenCComment(stream, state);
+        }
+        return false;
+      }
+    },
+    name: "css-base"
+  });
+
+  CodeMirror.defineMIME("text/x-scss", {
+    atMediaTypes: atMediaTypes,
+    atMediaFeatures: atMediaFeatures,
+    propertyKeywords: propertyKeywords,
+    colorKeywords: colorKeywords,
+    valueKeywords: valueKeywords,
+    allowNested: true,
+    hooks: {
+      "$": function(stream) {
+        stream.match(/^[\w-]+/);
+        if (stream.peek() == ":") {
+          return ["variable", "variable-definition"];
+        }
+        return ["variable", "variable"];
+      },
+      "/": function(stream, state) {
+        if (stream.eat("/")) {
+          stream.skipToEnd();
+          return ["comment", "comment"];
+        } else if (stream.eat("*")) {
+          state.tokenize = tokenCComment;
+          return tokenCComment(stream, state);
+        } else {
+          return ["operator", "operator"];
+        }
+      },
+      "#": function(stream) {
+        if (stream.eat("{")) {
+          return ["operator", "interpolation"];
+        } else {
+          stream.eatWhile(/[\w\\\-]/);
+          return ["atom", "hash"];
+        }
+      }
+    },
+    name: "css-base"
+  });
+})();
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/index.html b/Source/WebInspectorUI/Tools/PrettyPrinting/index.html
new file mode 100644
index 000000000..0a82949ab
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/index.html
@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Debug</title>
+    <link rel="stylesheet" href="codemirror.css">
+    <link rel="stylesheet" href="codemirror-additions.css">
+    <script src="codemirror.js"></script>
+    <script src="javascript.js"></script>
+    <script src="css.js"></script>
+    <script src="Utilities.js"></script>
+    <script src="Formatter.js"></script>
+    <script src="FormatterDebug.js"></script>
+    <script src="FormatterContentBuilder.js"></script>
+    <script src="CodeMirrorFormatters.js"></script>
+</head>
+<body>
+
+    <h1>Debug Pretty Printing</h1>
+
+    <!-- FIXME: There should be a "save" button that saves the mode and content, so reloading will restore that state -->
+
+    <!-- Controls -->
+    <select id="mode">
+        <option selected value="text/javascript">JavaScript</option>
+        <option value="text/css">CSS</option>
+    </select>
+    <button id="populate">Populate</button>
+    <button id="run-tests">Run Tests</button>
+    <button id="clear">Clear</button>
+    <button id="select-output">Select Output</button>
+    <button id="run-again">Run Again</button>
+    <small id="time"></small>
+
+    <br><br>
+
+    <!-- Editor -->
+    <textarea id="code" name="code"></textarea>
+
+    <!-- Output -->
+    <pre id="pretty"></pre>
+    <pre id="debug"></pre>
+
+    <script>
+    // Editor.
+    var cm = CodeMirror.fromTextArea(document.getElementById("code"), {
+        lineNumbers: true,
+    });
+
+    // Initial value.
+    var str = "(function() { var a=1; return a+1; })();";
+    cm.setValue(str);
+
+    // Setup and changing the mode.
+    cm.setOption("mode", "text/javascript");
+    var modePicker = document.getElementById("mode");
+    modePicker.addEventListener("change", function(event) {
+        cm.setValue("");
+        cm.setOption("mode", modePicker.value);
+        refresh();
+    });
+
+    // Populate button to populate with some canned content.
+    document.getElementById("populate").addEventListener("click", function(event) {
+        switch (modePicker.value) {
+            case "text/javascript":
+                var url = "populate/jquery.min.js";
+                break;
+            case "text/css":
+                var url = "populate/apple.css";
+                break;
+        }
+
+        var xhr = new XMLHttpRequest;
+        xhr.open("GET", url, true);
+        xhr.onload = function() {
+            cm.setValue(xhr.responseText);
+            setTimeout(refresh);
+        }
+        xhr.send();
+    });
+
+    // Run Tests button.
+    document.getElementById("run-tests").addEventListener("click", function(event) {
+        cm.setValue("Running Tests...");
+        refresh();
+        runTests();
+    });
+
+    // Clear button.
+    document.getElementById("clear").addEventListener("click", function(event) {
+        cm.setValue("");
+        refresh();
+    });
+
+    // Select output button.
+    document.getElementById("select-output").addEventListener("click", function(event) {
+        var range = document.createRange();
+        range.selectNodeContents(document.getElementById("pretty"));
+        var selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+    });
+
+    // Run again button.
+    document.getElementById("run-again").addEventListener("click", function(event) {
+        refresh();
+    });
+
+    // Button helpers.
+    var buttons = ["mode", "populate", "run-tests", "clear", "select-output", "run-again"];
+    function disableButtons() {
+        console.log("disableButtons");
+        buttons.forEach(function(id) {
+            document.getElementById(id).disabled = true;
+        });
+    }
+    function enableButtons() {
+        console.log("enableButtons");
+        buttons.forEach(function(id) {
+            document.getElementById(id).disabled = false;
+        });
+    }
+
+    // Refresh after changes after a short delay.
+    var timer = null;
+    cm.on("change", function(codeMirror, change) {
+        if (timer)
+            clearTimeout(timer)
+        timer = setTimeout(function() {
+            clearTimeout(timer);
+            timer = null;
+            refresh();
+        }, 500);
+    });
+
+    // Output elements.
+    var timeOutput = document.getElementById("time");
+    var prettyPre = document.getElementById("pretty");
+    var debugPre = document.getElementById("debug");
+
+    function refresh() {
+        if (timer)
+            clearTimeout(timer);
+
+        const start = {line: 0, ch: 0};
+        const end = {line: cm.lineCount() - 1};
+
+        // Setup.
+        const indentString = "    ";
+        var originalLineEndings = [];
+        var formattedLineEndings = [];
+        var mapping = {original: [0], formatted: [0]};
+        var builder = new FormatterContentBuilder(mapping, originalLineEndings, formattedLineEndings, 0, 0, indentString);
+        var formatter = new Formatter(cm, builder);
+
+        // Time the formatter.
+        var startTime = Date.now();
+        formatter.format(start, end);
+        var endTime = Date.now();
+
+        // Gather debug information.
+        var debug = formatter.debug(start, end);
+
+        // Output the results.
+        timeOutput.innerText = (endTime - startTime) + "ms";
+        prettyPre.innerText = builder.formattedContent;
+        debugPre.innerText = debug;
+    }
+
+    setTimeout(refresh);
+
+    // Tests.
+    function runTests() {        
+        disableButtons();
+        function completedCallback() {
+            enableButtons();
+        }
+
+        if (modePicker.value === "text/javascript")
+            runJavaScriptTests(completedCallback);
+        else
+            runCSSTests(completedCallback);
+    }
+    function runJavaScriptTests(callback) {
+        _runTests(callback, [
+            "js-tests/block-comment.js",
+            "js-tests/single-statement-blocks.js",
+            "js-tests/switch-case-default.js",
+        ]);
+    }
+    function runCSSTests(callback) {
+        _runTests(callback, []);
+    }
+    function _runTests(callback, manifest) {
+        var index = -1;
+        var results = [];
+        setTimeout(runNextTest, 0);
+
+        function runNextTest() {
+            // Next test.
+            index++;
+
+            // Done.
+            if (index >= manifest.length) {
+                if (!index)
+                    results.push("/* No tests for mode: " + modePicker.value);
+                printResults();
+                return;
+            }
+
+            // Load test and expected results.
+            var test = manifest[index];
+            var expected = test.replace(/\.js$/, "-expected.js");
+            var xhr1 = new XMLHttpRequest;
+            xhr1.open("GET", test, false);
+            xhr1.send();
+            var testData = xhr1.responseText;
+            var xhr2 = new XMLHttpRequest;
+            xhr2.open("GET", expected, false);
+            xhr2.send();
+            var expectedData = xhr2.responseText;
+
+            // Run the test.
+            var editor = CodeMirror(document.createElement("div"));
+            editor.setOption("mode", modePicker.value);
+            editor.setValue(testData);
+            const start = {line: 0, ch: 0};
+            const end = {line: editor.lineCount() - 1};
+            const indentString = "    ";
+            var originalLineEndings = [];
+            var formattedLineEndings = [];
+            var mapping = {original: [0], formatted: [0]};
+            var builder = new FormatterContentBuilder(mapping, originalLineEndings, formattedLineEndings, 0, 0, indentString);
+            var formatter = new Formatter(editor, builder);
+            formatter.format(start, end);
+
+            // Compare results.
+            var pass = builder.formattedContent === expectedData;
+            results.push("/* " + (pass ? "PASS" : "FAIL") + ": " + test + " */");
+            runNextTest();
+        }
+
+        function printResults() {
+            cm.setValue(results.join("\n"));
+            cm.refresh();
+            callback();
+        }
+    }
+
+    </script>
+</body>
+</html>
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/javascript.js b/Source/WebInspectorUI/Tools/PrettyPrinting/javascript.js
new file mode 100644
index 000000000..3d04603c2
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/javascript.js
@@ -0,0 +1,478 @@
+// TODO actually recognize syntax of TypeScript constructs
+
+CodeMirror.defineMode("javascript", function(config, parserConfig) {
+  var indentUnit = config.indentUnit;
+  var statementIndent = parserConfig.statementIndent;
+  var jsonMode = parserConfig.json;
+  var isTS = parserConfig.typescript;
+
+  // Tokenizer
+
+  var keywords = function(){
+    function kw(type) {return {type: type, style: "keyword"};}
+    var A = kw("keyword a"), B = kw("keyword b"), C = kw("keyword c");
+    var operator = kw("operator"), atom = {type: "atom", style: "atom"};
+
+    var jsKeywords = {
+      "if": kw("if"), "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B,
+      "return": C, "break": C, "continue": C, "new": C, "delete": C, "throw": C,
+      "var": kw("var"), "const": kw("var"), "let": kw("var"),
+      "function": kw("function"), "catch": kw("catch"),
+      "for": kw("for"), "switch": kw("switch"), "case": kw("case"), "default": kw("default"),
+      "in": operator, "typeof": operator, "instanceof": operator,
+      "true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Infinity": atom,
+      "this": kw("this")
+    };
+
+    // Extend the 'normal' keywords with the TypeScript language extensions
+    if (isTS) {
+      var type = {type: "variable", style: "variable-3"};
+      var tsKeywords = {
+        // object-like things
+        "interface": kw("interface"),
+        "class": kw("class"),
+        "extends": kw("extends"),
+        "constructor": kw("constructor"),
+
+        // scope modifiers
+        "public": kw("public"),
+        "private": kw("private"),
+        "protected": kw("protected"),
+        "static": kw("static"),
+
+        "super": kw("super"),
+
+        // types
+        "string": type, "number": type, "bool": type, "any": type
+      };
+
+      for (var attr in tsKeywords) {
+        jsKeywords[attr] = tsKeywords[attr];
+      }
+    }
+
+    return jsKeywords;
+  }();
+
+  var isOperatorChar = /[+\-*&%=<>!?|~^]/;
+
+  function chain(stream, state, f) {
+    state.tokenize = f;
+    return f(stream, state);
+  }
+
+  function nextUntilUnescaped(stream, end) {
+    var escaped = false, next;
+    while ((next = stream.next()) != null) {
+      if (next == end && !escaped)
+        return false;
+      escaped = !escaped && next == "\\";
+    }
+    return escaped;
+  }
+
+  // Used as scratch variables to communicate multiple values without
+  // consing up tons of objects.
+  var type, content;
+  function ret(tp, style, cont) {
+    type = tp; content = cont;
+    return style;
+  }
+
+  function jsTokenBase(stream, state) {
+    var ch = stream.next();
+    if (ch == '"' || ch == "'")
+      return chain(stream, state, jsTokenString(ch));
+    else if (/[\[\]{}\(\),;\:\.]/.test(ch))
+      return ret(ch);
+    else if (ch == "0" && stream.eat(/x/i)) {
+      stream.eatWhile(/[\da-f]/i);
+      return ret("number", "number");
+    }
+    else if (/\d/.test(ch) || ch == "-" && stream.eat(/\d/)) {
+      stream.match(/^\d*(?:\.\d*)?(?:[eE][+\-]?\d+)?/);
+      return ret("number", "number");
+    }
+    else if (ch == "/") {
+      if (stream.eat("*")) {
+        return chain(stream, state, jsTokenComment);
+      }
+      else if (stream.eat("/")) {
+        stream.skipToEnd();
+        return ret("comment", "comment");
+      }
+      else if (state.lastType == "operator" || state.lastType == "keyword c" ||
+               /^[\[{}\(,;:]$/.test(state.lastType)) {
+        nextUntilUnescaped(stream, "/");
+        stream.eatWhile(/[gimy]/); // 'y' is "sticky" option in Mozilla
+        return ret("regexp", "string-2");
+      }
+      else {
+        stream.eatWhile(isOperatorChar);
+        return ret("operator", null, stream.current());
+      }
+    }
+    else if (ch == "#") {
+      stream.skipToEnd();
+      return ret("error", "error");
+    }
+    else if (isOperatorChar.test(ch)) {
+      stream.eatWhile(isOperatorChar);
+      return ret("operator", null, stream.current());
+    }
+    else {
+      stream.eatWhile(/[\w\$_]/);
+      var word = stream.current(), known = keywords.propertyIsEnumerable(word) && keywords[word];
+      return (known && state.lastType != ".") ? ret(known.type, known.style, word) :
+                     ret("variable", "variable", word);
+    }
+  }
+
+  function jsTokenString(quote) {
+    return function(stream, state) {
+      if (!nextUntilUnescaped(stream, quote))
+        state.tokenize = jsTokenBase;
+      return ret("string", "string");
+    };
+  }
+
+  function jsTokenComment(stream, state) {
+    var maybeEnd = false, ch;
+    while (ch = stream.next()) {
+      if (ch == "/" && maybeEnd) {
+        state.tokenize = jsTokenBase;
+        break;
+      }
+      maybeEnd = (ch == "*");
+    }
+    return ret("comment", "comment");
+  }
+
+  // Parser
+
+  var atomicTypes = {"atom": true, "number": true, "variable": true, "string": true, "regexp": true, "this": true};
+
+  function JSLexical(indented, column, type, align, prev, info) {
+    this.indented = indented;
+    this.column = column;
+    this.type = type;
+    this.prev = prev;
+    this.info = info;
+    if (align != null) this.align = align;
+  }
+
+  function inScope(state, varname) {
+    for (var v = state.localVars; v; v = v.next)
+      if (v.name == varname) return true;
+  }
+
+  function parseJS(state, style, type, content, stream) {
+    var cc = state.cc;
+    // Communicate our context to the combinators.
+    // (Less wasteful than consing up a hundred closures on every call.)
+    cx.state = state; cx.stream = stream; cx.marked = null, cx.cc = cc;
+
+    if (!state.lexical.hasOwnProperty("align"))
+      state.lexical.align = true;
+
+    while(true) {
+      var combinator = cc.length ? cc.pop() : jsonMode ? expression : statement;
+      if (combinator(type, content)) {
+        while(cc.length && cc[cc.length - 1].lex)
+          cc.pop()();
+        if (cx.marked) return cx.marked;
+        if (type == "variable" && inScope(state, content)) return "variable-2";
+        return style;
+      }
+    }
+  }
+
+  // Combinator utils
+
+  var cx = {state: null, column: null, marked: null, cc: null};
+  function pass() {
+    for (var i = arguments.length - 1; i >= 0; i--) cx.cc.push(arguments[i]);
+  }
+  function cont() {
+    pass.apply(null, arguments);
+    return true;
+  }
+  function register(varname) {
+    function inList(list) {
+      for (var v = list; v; v = v.next)
+        if (v.name == varname) return true;
+      return false;
+    }
+    var state = cx.state;
+    if (state.context) {
+      cx.marked = "def";
+      if (inList(state.localVars)) return;
+      state.localVars = {name: varname, next: state.localVars};
+    } else {
+      if (inList(state.globalVars)) return;
+      state.globalVars = {name: varname, next: state.globalVars};
+    }
+  }
+
+  // Combinators
+
+  var defaultVars = {name: "this", next: {name: "arguments"}};
+  function pushcontext() {
+    cx.state.context = {prev: cx.state.context, vars: cx.state.localVars};
+    cx.state.localVars = defaultVars;
+  }
+  function popcontext() {
+    cx.state.localVars = cx.state.context.vars;
+    cx.state.context = cx.state.context.prev;
+  }
+  function pushlex(type, info) {
+    var result = function() {
+      var state = cx.state, indent = state.indented;
+      if (state.lexical.type == "stat") indent = state.lexical.indented;
+      state.lexical = new JSLexical(indent, cx.stream.column(), type, null, state.lexical, info);
+    };
+    result.lex = true;
+    return result;
+  }
+  function poplex() {
+    var state = cx.state;
+    if (state.lexical.prev) {
+      if (state.lexical.type == ")")
+        state.indented = state.lexical.indented;
+      state.lexical = state.lexical.prev;
+    }
+  }
+  poplex.lex = true;
+
+  function expect(wanted) {
+    return function(type) {
+      if (type == wanted) return cont();
+      else if (wanted == ";") return pass();
+      else return cont(arguments.callee);
+    };
+  }
+
+  function statement(type) {
+    if (type == "var") return cont(pushlex("vardef"), vardef1, expect(";"), poplex);
+    if (type == "keyword a") return cont(pushlex("form"), expression, statement, poplex);
+    if (type == "keyword b") return cont(pushlex("form"), statement, poplex);
+    if (type == "{") return cont(pushlex("}"), block, poplex);
+    if (type == ";") return cont();
+    if (type == "if") return cont(pushlex("form"), expression, statement, poplex, maybeelse);
+    if (type == "function") return cont(functiondef);
+    if (type == "for") return cont(pushlex("form"), expect("("), pushlex(")"), forspec1, expect(")"),
+                                   poplex, statement, poplex);
+    if (type == "variable") return cont(pushlex("stat"), maybelabel);
+    if (type == "switch") return cont(pushlex("form"), expression, pushlex("}", "switch"), expect("{"),
+                                      block, poplex, poplex);
+    if (type == "case") return cont(expression, expect(":"));
+    if (type == "default") return cont(expect(":"));
+    if (type == "catch") return cont(pushlex("form"), pushcontext, expect("("), funarg, expect(")"),
+                                     statement, poplex, popcontext);
+    return pass(pushlex("stat"), expression, expect(";"), poplex);
+  }
+  function expression(type) {
+    return expressionInner(type, false);
+  }
+  function expressionNoComma(type) {
+    return expressionInner(type, true);
+  }
+  function expressionInner(type, noComma) {
+    var maybeop = noComma ? maybeoperatorNoComma : maybeoperatorComma;
+    if (atomicTypes.hasOwnProperty(type)) return cont(maybeop);
+    if (type == "function") return cont(functiondef);
+    if (type == "keyword c") return cont(noComma ? maybeexpressionNoComma : maybeexpression);
+    if (type == "(") return cont(pushlex(")"), maybeexpression, expect(")"), poplex, maybeop);
+    if (type == "operator") return cont(noComma ? expressionNoComma : expression);
+    if (type == "[") return cont(pushlex("]"), commasep(expressionNoComma, "]"), poplex, maybeop);
+    if (type == "{") return cont(pushlex("}"), commasep(objprop, "}"), poplex, maybeop);
+    return cont();
+  }
+  function maybeexpression(type) {
+    if (type.match(/[;\}\)\],]/)) return pass();
+    return pass(expression);
+  }
+  function maybeexpressionNoComma(type) {
+    if (type.match(/[;\}\)\],]/)) return pass();
+    return pass(expressionNoComma);
+  }
+
+  function maybeoperatorComma(type, value) {
+    if (type == ",") return cont(expression);
+    return maybeoperatorNoComma(type, value, maybeoperatorComma);
+  }
+  function maybeoperatorNoComma(type, value, me) {
+    if (!me) me = maybeoperatorNoComma;
+    if (type == "operator") {
+      if (/\+\+|--/.test(value)) return cont(me);
+      if (value == "?") return cont(expression, expect(":"), expression);
+      return cont(expression);
+    }
+    if (type == ";") return;
+    if (type == "(") return cont(pushlex(")", "call"), commasep(expressionNoComma, ")"), poplex, me);
+    if (type == ".") return cont(property, me);
+    if (type == "[") return cont(pushlex("]"), maybeexpression, expect("]"), poplex, me);
+  }
+  function maybelabel(type) {
+    if (type == ":") return cont(poplex, statement);
+    return pass(maybeoperatorComma, expect(";"), poplex);
+  }
+  function property(type) {
+    if (type == "variable") {cx.marked = "property"; return cont();}
+  }
+  function objprop(type, value) {
+    if (type == "variable") {
+      cx.marked = "property";
+      if (value == "get" || value == "set") return cont(getterSetter);
+    } else if (type == "number" || type == "string") {
+      cx.marked = type + " property";
+    }
+    if (atomicTypes.hasOwnProperty(type)) return cont(expect(":"), expressionNoComma);
+  }
+  function getterSetter(type) {
+    if (type == ":") return cont(expression);
+    if (type != "variable") return cont(expect(":"), expression);
+    cx.marked = "property";
+    return cont(functiondef);
+  }
+  function commasep(what, end) {
+    function proceed(type) {
+      if (type == ",") {
+        var lex = cx.state.lexical;
+        if (lex.info == "call") lex.pos = (lex.pos || 0) + 1;
+        return cont(what, proceed);
+      }
+      if (type == end) return cont();
+      return cont(expect(end));
+    }
+    return function(type) {
+      if (type == end) return cont();
+      else return pass(what, proceed);
+    };
+  }
+  function block(type) {
+    if (type == "}") return cont();
+    return pass(statement, block);
+  }
+  function maybetype(type) {
+    if (type == ":") return cont(typedef);
+    return pass();
+  }
+  function typedef(type) {
+    if (type == "variable"){cx.marked = "variable-3"; return cont();}
+    return pass();
+  }
+  function vardef1(type, value) {
+    if (type == "variable") {
+      register(value);
+      return isTS ? cont(maybetype, vardef2) : cont(vardef2);
+    }
+    return pass();
+  }
+  function vardef2(type, value) {
+    if (value == "=") return cont(expressionNoComma, vardef2);
+    if (type == ",") return cont(vardef1);
+  }
+  function maybeelse(type, value) {
+    if (type == "keyword b" && value == "else") return cont(pushlex("form"), statement, poplex);
+  }
+  function forspec1(type) {
+    if (type == "var") return cont(vardef1, expect(";"), forspec2);
+    if (type == ";") return cont(forspec2);
+    if (type == "variable") return cont(formaybein);
+    return pass(expression, expect(";"), forspec2);
+  }
+  function formaybein(_type, value) {
+    if (value == "in") return cont(expression);
+    return cont(maybeoperatorComma, forspec2);
+  }
+  function forspec2(type, value) {
+    if (type == ";") return cont(forspec3);
+    if (value == "in") return cont(expression);
+    return pass(expression, expect(";"), forspec3);
+  }
+  function forspec3(type) {
+    if (type != ")") cont(expression);
+  }
+  function functiondef(type, value) {
+    if (type == "variable") {register(value); return cont(functiondef);}
+    if (type == "(") return cont(pushlex(")"), pushcontext, commasep(funarg, ")"), poplex, statement, popcontext);
+  }
+  function funarg(type, value) {
+    if (type == "variable") {register(value); return isTS ? cont(maybetype) : cont();}
+  }
+
+  // Interface
+
+  return {
+    startState: function(basecolumn) {
+      return {
+        tokenize: jsTokenBase,
+        lastType: null,
+        cc: [],
+        lexical: new JSLexical((basecolumn || 0) - indentUnit, 0, "block", false),
+        localVars: parserConfig.localVars,
+        globalVars: parserConfig.globalVars,
+        context: parserConfig.localVars && {vars: parserConfig.localVars},
+        indented: 0
+      };
+    },
+
+    token: function(stream, state) {
+      if (stream.sol()) {
+        if (!state.lexical.hasOwnProperty("align"))
+          state.lexical.align = false;
+        state.indented = stream.indentation();
+      }
+      if (state.tokenize != jsTokenComment && stream.eatSpace()) return null;
+      var style = state.tokenize(stream, state);
+      if (type == "comment") return style;
+      state.lastType = type == "operator" && (content == "++" || content == "--") ? "incdec" : type;
+      return parseJS(state, style, type, content, stream);
+    },
+
+    indent: function(state, textAfter) {
+      if (state.tokenize == jsTokenComment) return CodeMirror.Pass;
+      if (state.tokenize != jsTokenBase) return 0;
+      var firstChar = textAfter && textAfter.charAt(0), lexical = state.lexical;
+      // Kludge to prevent 'maybelse' from blocking lexical scope pops
+      for (var i = state.cc.length - 1; i >= 0; --i) {
+        var c = state.cc[i];
+        if (c == poplex) lexical = lexical.prev;
+        else if (c != maybeelse || /^else\b/.test(textAfter)) break;
+      }
+      if (lexical.type == "stat" && firstChar == "}") lexical = lexical.prev;
+      if (statementIndent && lexical.type == ")" && lexical.prev.type == "stat")
+        lexical = lexical.prev;
+      var type = lexical.type, closing = firstChar == type;
+
+      if (type == "vardef") return lexical.indented + (state.lastType == "operator" || state.lastType == "," ? 4 : 0);
+      else if (type == "form" && firstChar == "{") return lexical.indented;
+      else if (type == "form") return lexical.indented + indentUnit;
+      else if (type == "stat")
+        return lexical.indented + (state.lastType == "operator" || state.lastType == "," ? statementIndent || indentUnit : 0);
+      else if (lexical.info == "switch" && !closing && parserConfig.doubleIndentSwitch != false)
+        return lexical.indented + (/^(?:case|default)\b/.test(textAfter) ? indentUnit : 2 * indentUnit);
+      else if (lexical.align) return lexical.column + (closing ? 0 : 1);
+      else return lexical.indented + (closing ? 0 : indentUnit);
+    },
+
+    electricChars: ":{}",
+    blockCommentStart: jsonMode ? null : "/*",
+    blockCommentEnd: jsonMode ? null : "*/",
+    lineComment: jsonMode ? null : "//",
+    fold: "brace",
+
+    helperType: jsonMode ? "json" : "javascript",
+    jsonMode: jsonMode
+  };
+});
+
+CodeMirror.defineMIME("text/javascript", "javascript");
+CodeMirror.defineMIME("text/ecmascript", "javascript");
+CodeMirror.defineMIME("application/javascript", "javascript");
+CodeMirror.defineMIME("application/ecmascript", "javascript");
+CodeMirror.defineMIME("application/json", {name: "javascript", json: true});
+CodeMirror.defineMIME("application/x-json", {name: "javascript", json: true});
+CodeMirror.defineMIME("text/typescript", { name: "javascript", typescript: true });
+CodeMirror.defineMIME("application/typescript", { name: "javascript", typescript: true });
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/js-tests/block-comment-expected.js b/Source/WebInspectorUI/Tools/PrettyPrinting/js-tests/block-comment-expected.js
new file mode 100644
index 000000000..425c0f123
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/js-tests/block-comment-expected.js
@@ -0,0 +1,4 @@
+/*
+ * Test
+ */
+
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/js-tests/block-comment.js b/Source/WebInspectorUI/Tools/PrettyPrinting/js-tests/block-comment.js
new file mode 100644
index 000000000..835bf2549
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/js-tests/block-comment.js
@@ -0,0 +1,3 @@
+/*
+ * Test
+ */
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/js-tests/single-statement-blocks-expected.js b/Source/WebInspectorUI/Tools/PrettyPrinting/js-tests/single-statement-blocks-expected.js
new file mode 100644
index 000000000..cbacc28c1
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/js-tests/single-statement-blocks-expected.js
@@ -0,0 +1,89 @@
+if (true)
+    if (true)
+        alert(1);
+    else if (true)
+        alert(2);
+    else 
+        alert(3);
+
+if (true)
+    if (true) {
+        alert(1)
+    } else 
+        alert(2);
+
+if (true)
+    if (true) {
+        var a = 1;
+        var b = {
+            a: 1
+        };
+    } else 
+        alert(2);
+
+function() {
+    for (var i = 0; i < 100; ++i)
+        if (true)
+            return true;
+    return false;
+}
+
+function foo(cm) {
+    if (true)
+        return;
+    else 
+        false;
+}
+
+if (true) {
+    if (false)
+        if (true) {
+            true;
+        }
+    return 2;
+}
+
+if (true) {
+    if (false)
+        if (true)
+            true;
+        else 
+            false;
+    else if (true)
+        true;
+    else 
+        false;
+}
+
+if (true)
+    for (; ;)
+        true;
+else 
+    while (true)
+        true;
+
+function() {
+    if (true) {
+        for (; ;)
+            true;
+    } else if (1)
+        for (; ;)
+            true;
+    return;
+}
+
+do 
+    true;
+while (true);
+
+if (x == 1)
+    alert(1);
+else if (x == 2)
+    alert(2);
+else 
+    alert(3);
+
+// FIXME: Failing.
+
+// if(true)try{true;}catch(e){true;}finally{true;}
+
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/js-tests/single-statement-blocks.js b/Source/WebInspectorUI/Tools/PrettyPrinting/js-tests/single-statement-blocks.js
new file mode 100644
index 000000000..92d4dfa59
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/js-tests/single-statement-blocks.js
@@ -0,0 +1,25 @@
+if(true)if(true)alert(1);else if(true)alert(2);else alert(3);
+
+if(true)if(true){alert(1)}else alert(2);
+
+if(true)if(true){var a=1;var b={a:1};}else alert(2);
+
+function(){for(var i=0;i<100;++i)if(true)return true;return false;}
+
+function foo(cm){if(true)return;else false;}
+
+if(true){if(false)if(true){true;}return 2;}
+
+if(true){if(false)if(true)true;else false;else if(true)true;else false;}
+
+if(true)for(;;)true;else while(true)true;
+
+function(){if(true){for(;;)true;}else if(1)for(;;)true;return;}
+
+do true;while(true);
+
+if(x==1)alert(1);else if(x==2)alert(2);else alert(3);
+
+// FIXME: Failing.
+
+// if(true)try{true;}catch(e){true;}finally{true;}
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/js-tests/switch-case-default-expected.js b/Source/WebInspectorUI/Tools/PrettyPrinting/js-tests/switch-case-default-expected.js
new file mode 100644
index 000000000..eb19424e2
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/js-tests/switch-case-default-expected.js
@@ -0,0 +1,18 @@
+switch (x) {
+case "abc":
+    return 1;
+case "def":
+    return 2;
+default:
+    return 3;
+}
+
+switch (x) {
+case "abc":
+    return 1;
+case "def":
+    return 2;
+default:
+    return 3;
+}
+
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/js-tests/switch-case-default.js b/Source/WebInspectorUI/Tools/PrettyPrinting/js-tests/switch-case-default.js
new file mode 100644
index 000000000..49db86f97
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/js-tests/switch-case-default.js
@@ -0,0 +1,10 @@
+switch(x){case "abc":return 1;case "def":return 2;default:return 3;}
+
+switch(x){
+  case "abc":
+    return 1;
+  case "def":
+    return 2;
+  default:
+    return 3;
+}
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/populate/apple.css b/Source/WebInspectorUI/Tools/PrettyPrinting/populate/apple.css
new file mode 100644
index 000000000..89a25ae33
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/populate/apple.css
@@ -0,0 +1,466 @@
+/* RESET */
+html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,abbr,article,aside,command,details,figcaption,figure,footer,header,hgroup,mark,meter,nav,output,progress,section,summary,time { margin: 0; padding: 0; }
+h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th,figcaption { font-size: 1em; font-weight: normal; font-style: normal; }
+fieldset,iframe { border: none; }
+caption,th { text-align: left; }
+table { border-collapse: collapse; border-spacing: 0; }
+article,aside,footer,header,hgroup,nav,section,figure,figcaption { display: block; }
+
+/* LAYOUT */
+html { background-color:#fff; }
+
+.clear { clear: both; }
+.clearer { clear: both; display: block; margin: 0; padding: 0; height: 0; line-height: 1px; font-size: 1px; }
+.selfclear { zoom:1; }
+.selfclear:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; }
+
+img, .search-wrapper .left, .search-wrapper .right, ul.sp-results li.viewall a, ul.sp-results li .replacementimg, 
+#globalfooter #breadcrumbs, #globalfooter #breadcrumbs span, #directorynav .capbottom, 
+#productheader h1 a, #productheader h2 a, #main .maincap { behavior: url(/global/scripts/lib/iepngfix.htc); }
+
+img { border: 0; }
+img.left { float: left; margin: 2px 20px 16px 0; }
+img.right { float: right; margin: 2px 0 16px 20px; }
+img.across { margin: 2px 0 16px 0; }
+img.flushleft { margin-left: -20px; }
+img.flushright { margin-right: -20px; }
+
+.replaced { display: block; width: 1px; height: 1px; outline: none; overflow: hidden; text-indent: -9999px; }
+#omniture, #top { position: absolute; top: 0; }
+#container { width: 980px; margin: 0 auto; position: relative; }
+#main { width: 100%; position: relative; }
+#content { padding: 18px 20px; position: relative; color: #333; }
+#breadcrumb { clear: both; text-align: center; margin: 18px auto; clear: both; font-size: 10px; color: #686868; }
+
+.content { background: #fff; border: 1px solid; border-color: #e5e5e5 #dbdbdb #d2d2d2; -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px; -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px; box-shadow: rgba(0,0,0,0.3) 0 1px 3px; }
+.content:nth-child(1n) { border: none; } /* reset border for smart browsers */
+
+.content,
+.rounded { border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -khtml-border-radius: 4px; }
+
+.shadow { -webkit-box-shadow: rgba(0,0,0,0.35) 0 1px 3px; -moz-box-shadow: rgba(0,0,0,0.35) 0 1px 3px; box-shadow: rgba(0,0,0,0.35) 0 1px 3px; }
+img.shadow { padding: 5px; background: #fff; margin-bottom: 2px; *border: 1px solid #e2e2e2; _position: relative; }
+
+
+.callout { border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -o-border-radius: 7px; -khtml-border-radius: 7px; }
+
+.roundedtop { border-radius: 4px 4px 0 0; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -moz-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0; -khtml-border-radius: 4px 4px 0 0; }
+.roundedbottom { border-radius: 0 0 4px 4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; -moz-border-radius: 0 0 4px 4px; -o-border-radius: 0 0 4px 4px; -khtml-border-radius: 0 0 4px 4px; }
+.roundedright { border-radius: 0 4px 4px 0; -webkit-border-top-right-radius:4px; -webkit-border-bottom-right-radius:4px; -moz-border-radius: 0 4px 4px 0; -o-border-radius: 0 4px 4px 0; -khtml-border-radius: 0 4px 4px 0; }
+.roundedleft { border-radius: 4px 0 0 4px; -webkit-border-top-left-radius:4px; -webkit-border-bottom-left-radius:4px; -moz-border-radius: 4px 0 0 4px; -o-border-radius: 4px 0 0 4px; -khtml-border-radius: 4px 0 0 4px; }
+.roundedtopleft { border-radius:4px 0 0; -webkit-border-top-left-radius:4px; -moz-border-radius:4px 0 0; -o-border-radius:4px 0 0; -khtml-border-radius:4px 0 0; }
+.roundedtopright { border-radius: 0 4px 0 0; -webkit-border-top-right-radius:4px; -moz-border-radius:0 4px 0 0; -o-border-radius:0 4px 0 0; -khtml-border-radius: 0 4px 0 0; }
+.roundedbottomleft { border-radius: 0 0 0 4px; -webkit-border-bottom-left-radius:4px; -moz-border-radius: 0 0 0 4px; -o-border-radius: 0 0 0 4px; -khtml-border-radius: 0 0 0 4px; }
+.roundedbottomright { border-radius: 0 0 4px 0; -webkit-border-bottom-right-radius:4px; -moz-border-radius: 0 0 4px 0; -o-border-radius: 0 0 4px 0; -khtml-border-radius: 0 0 4px 0; }
+
+.grabbable { cursor:move; cursor:-webkit-grab; cursor:-moz-grab; cursor:grab; }
+.grabbing,
+.grabbing .grabbable { cursor:move; cursor:-webkit-grabbing; cursor:-moz-grabbing; cursor:grabbing; }
+
+/* GRID */
+.column { float: left; }
+.grid2col, .grid2cola, .grid2colb, .grid2colc, .grid2cold, .grid2cole, .grid2colf, .grid3col, .grid3cola, .grid4col, .grid5col, .grid6col { width: 100%; }
+
+.grid2col .column { width: 49%; }
+.grid2col .grid2col .column { width: 47.8%; }
+.grid3col .grid2col .column { width: 46%; }
+.grid4col .grid2col .column { width: 45%; }
+
+.grid2cola .column.first { width: 66%; }
+.grid2cola .column.last { width: 32%; }
+
+.grid2colb .column.first { width: 74.9%; }
+.grid2colb .column.last { width: 23%; }
+
+.grid2colc .column.first { width: 32%; }
+.grid2colc .column.last { width: 66%; }
+
+.grid2cold .column.first { width: 23%; }
+.grid2cold .column.last { width: 74.9%; }
+
+.grid2cole .column.first { width: 79%; }
+.grid2cole .column.last { width: 19%; }
+
+.grid2colf .column.first { width: 19%; }
+.grid2colf .column.last { width: 79%; }
+
+.grid3col .column { width: 32%; margin-left: 2%; }
+.grid2col .grid3col .column { width: 31%; }
+
+.grid3cola .column { width: 58%; margin-left: 2%; }
+.grid3cola .column.first,
+.grid3cola .column.last { width: 19%; }
+
+.grid4col .column { width: 23%; margin-left: 3%; }
+
+.grid5col .column { width: 18.4%; margin-left: 2%; }
+
+.grid6col .column { width: 15%; margin-left: 2%; }
+
+.column.first, .column.last { margin-left: 0 !important; }
+.column.last { float: right !important; }
+
+p.last, ul.last, ol.last, li.last { _width: auto !important; _float: none !important; }
+
+#container:after, #content:after, .grid2col:after, .grid2cola:after, .grid2colb:after, .grid2colc:after, .grid2cold:after, .grid2cole:after, .grid2colf:after, .grid3col:after, .grid3cola:after, .grid4col:after, .grid5col:after, .grid6col:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+#container, #content, .grid2col, .grid2cola, .grid2colb, .grid2colc, .grid2cold, .grid2cole, .grid2colf, .grid3col, .grid3cola, .grid4col, .grid5col, .grid6col { zoom: 1; }
+
+/* TYPE */
+body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; background-color: transparent; color: #333; -webkit-font-smoothing: antialiased; }
+
+a { color: #08c; }
+a:link, a:visited, a:active { text-decoration: none; }
+a:hover { text-decoration: underline; }
+a.block { display: block; cursor: pointer; }
+a.block span,
+a.block em { color:#08c; cursor: pointer; }
+a.block:hover { text-decoration: none; }
+a.block:hover span,
+a.block:hover em { color: #08c; text-decoration: underline; }
+a.more, em.more, span.more { white-space: nowrap; padding-right: 10px; background: url(http://images.apple.com/global/elements/arrows/morearrow_08c.gif) no-repeat 100% 50%; cursor: pointer; zoom: 1; }
+a.morelarge, em.morelarge, span.morelarge { white-space:nowrap; padding-right:12px; background:url(http://images.apple.com/global/elements/arrows/morearrow_big_08c.gif) no-repeat 100% 50%; cursor:pointer; zoom:1; }
+a.lesslarge, em.lesslarge, span.lesslarge { white-space:nowrap; padding-left:12px; background:url(http://images.apple.com/global/elements/arrows/lessarrow_big_08c.gif) no-repeat 0 50%; cursor:pointer; zoom:1; }
+@media only screen {
+	a.more, em.more, span.more { background-image:url(./../elements/arrows/morearrow_08c.svg); }
+	a.morelarge, em.morelarge, span.morelarge { background-image:url(./../elements/arrows/morearrow_big_08c.svg); }
+	a.lesslarge, em.lesslarge, span.lesslarge { background-image:url(./../elements/arrows/lessarrow_big_08c.svg); }
+}
+a.external, em.external, span.external { white-space: nowrap; padding-right: 15px; background: url(http://images.apple.com/global/elements/icons/external10x10.gif) no-repeat 100% 49%; cursor: pointer; zoom: 1; }
+a[rel="external"] { white-space: nowrap; padding-right: 15px; background: url(http://images.apple.com/global/elements/icons/external10x10.gif) no-repeat 100% 49%; cursor: pointer; zoom: 1; }
+em.more, span.more, em.external, span.external { color:#08c; font-style: normal; cursor: pointer; }
+.nowrap { white-space:nowrap; }
+strong, b { font-weight: bold; }
+em, i, cite { font-style: italic; }
+sup { padding-left: 1px; font-size: 10px !important; font-weight: normal !important; vertical-align: baseline; position: relative; bottom: 0.33em; _position: static !important; }
+sup, sup a { color:#666; }
+sup a:hover { color:#08c; text-decoration:none; }
+abbr { border: 0; }
+.sosumi { font-size: 10px !important; line-height:1.5; color:#888; }
+.sosumi_features { font-size: 10px !important; line-height:1.5; color:#888; }
+
+h1,h2,h3,h4,h5,h6,strong { color:#000; }
+h1,h2,h3,h4 { font-weight: bold; }
+h2,h3,h4 { line-height: 18px; }
+h1,h2 { margin-bottom: 18px; }
+h1 { font-size: 24px; line-height: 36px; }
+h2 { font-size: 16px; }
+h3 { font-size: 1em; }
+h4 { font-size: 10px; }
+p { margin-bottom: 18px; }
+p.intro { color: #888; font-size: 16px; line-height: 22px; font-weight: normal; }
+.more { text-align: right; }
+
+ul { list-style: none outside; }
+ol { margin-bottom: 18px; list-style: decimal; margin-left: 2.2em; }
+ul.square,
+ul.circle { margin-left: 2em; margin-bottom: 18px; }
+ul.square { list-style: square outside; }
+ul.circle { list-style: circle outside; }
+ul ul.circle,
+ul ul.square { margin-top: 4px; margin-bottom: 5px; }
+ol.sosumi { margin-left: 0; padding-left: 2em; *padding-left: 2.2em; }
+
+a.pdf { background: url(http://images.apple.com/global/elements/icons/globaliconpdf12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; }
+a.html { background: url(http://images.apple.com/global/elements/icons/globaliconhtml12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; }
+a.qt { background: url(http://images.apple.com/global/elements/icons/globaliconqt12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; }
+a.ical { background: url(http://images.apple.com/global/elements/icons/globaliconical12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; }
+a.dl { background: url(http://images.apple.com/global/elements/icons/globalicondl11x10.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; }
+a.dmg { background: url(http://images.apple.com/global/elements/icons/globalicondmg12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; }
+a.zip { background: url(http://images.apple.com/global/elements/icons/globaliconzip12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; }
+a.keynote { background: url(http://images.apple.com/global/elements/icons/globaliconkeynote12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; }
+a.audio { background: url(http://images.apple.com/global/elements/icons/globaliconaudio12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; }
+
+.dot-nav { width:100%; margin:0; padding:0; text-align:center; line-height:1px; }
+.dot-nav li,
+.dot-nav li a { display:-moz-inline-stack; display:inline-block; *display:inline; *zoom:1; }
+.dot-nav li { position:relative; z-index:1; margin:0; width:13px; height:15px; overflow:hidden; }
+.dot-nav li a { position:absolute; z-index:1; width:13px; height:45px; top:0; left:0; cursor:pointer; text-indent:-1000em; background:url(http://images.apple.com/global/elements/buttons/dots_08c.png) no-repeat 0 0; behavior:url(/global/scripts/lib/ie7pngfix.htc); }
+.dot-nav li a:hover { top:-15px; }
+.dot-nav li a.active { cursor:default; top:-30px; }
+
+.dot-nav:nth-child(1n) li { width:10px; height:10px; padding:3px 2px 2px 2px; }
+.dot-nav:nth-child(1n) li a { border-radius:5px; width:10px; height:10px; background:#e0e1e3;
+	-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .25);
+	   -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .25);
+	        box-shadow:inset 0 1px 1px rgba(0, 0, 0, .25);
+}
+.dot-nav:nth-child(1n) li a:hover { top:0; background:#ccc;}
+.dot-nav:nth-child(1n) li a.active { top:0; background:#08c;
+	background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,rgb(126,198,234)),color-stop(24%,rgb(70,179,234)),color-stop(100%,rgb(3,135,201)));
+	background:-webkit-linear-gradient(top,rgb(126,198,234)0%,rgb(70,179,234)45%,rgb(3,135,201)100%);
+	background:   -moz-linear-gradient(top,rgb(126,198,234)0%,rgb(70,179,234)45%,rgb(3,135,201)100%);
+	background:        linear-gradient(top,rgb(126,198,234)0%,rgb(70,179,234)45%,rgb(3,135,201)100%);
+	-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, .25);
+	   -moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, .25);
+	        box-shadow:inset 0 1px 0 rgba(0, 0, 0, .25);
+}
+
+.last { margin-bottom: 0; }
+#main .sidebar { font-size: 10px; line-height: 18px; color:#333; }
+#main .callout { font-size: 11px; line-height: 18px; margin-bottom: 18px; }
+
+body.specs #main { font-size: 11px; line-height: 16px; }
+
+/* PIPED LINKS */
+.piped { display: block; zoom: 1; }
+.piped:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+.piped li { float: left; display: inline; }
+.piped a { border-left: 1px solid #797c80; padding: 0 0 0 0.75em; margin-left: 0.75em; }
+.piped a.first { border-left: 0 !important; padding-left: 0; margin-left: 0 !important; }
+
+/*--- Global Footer (legacy) ---*/
+#globalfooter .gf-buy { float: left; width: 60%; margin: 18px 0 9px; }
+#globalfooter .gf-links { float: right; margin: 18px 0 9px; }
+#globalfooter .gf-links a { padding: 0 10px; white-space: nowrap; }
+#globalfooter .gf-links a.last { padding-right: 0; _float: none !important; width: auto !important; }
+
+/*--- Global Footer ---*/
+#globalfooter { width: 980px; color: #888; font-size: 10px; margin: 18px auto 0; padding-bottom: 36px; text-align: left !important; }
+#globalfooter a { color: #08c; }
+#globalfooter p { margin-bottom: 1em; }
+#globalfooter p.gf-buy { float: left; width: 52%; margin: 18px 0 9px 3px; }
+#globalfooter ul.piped a { padding: 0 0 0 1.5em; margin-left: 1.5em; border-left: 1px solid #d0d0d0; }
+#globalfooter .gf-links { float: right; margin: 18px 3px 9px 0; }
+#globalfooter .gf-sosumi { clear: both; width: 100%; border-top: 1px solid #ddd; padding-top: 9px; }
+#globalfooter .gf-sosumi a { padding: 0 10px; }
+#globalfooter .gf-sosumi p { float: left; margin-left: 3px; }
+#globalfooter form { margin: 18px 10px; }
+#globalfooter .search-wrapper { margin: 0 auto; }
+#globalfooter .search-wrapper input.prettysearch { margin-left: 10px; }
+#globalfooter ul.piped a.contact_us { padding-right: 1.5em; border-right: 1px solid #d0d0d0; }
+#globalfooter ul.piped a.choose { margin-left: 0; border: 0; }
+#globalfooter ul.piped a.choose img { vertical-align: middle; margin-top: -5px; *position: relative; }
+
+/*--- Breadcrumbs (legacy) ---*/
+#globalfooter #breadcrumbs { font-size: 11px; color: #444; background: url(http://images.apple.com/global/elements/breadory/breadcrumb_bg.png) no-repeat; overflow: hidden; height: 36px; line-height: 34px; font-weight: bold; text-shadow: 0 1px 0 #fff; }
+#globalfooter #breadcrumbs a { color: #444; text-decoration: none; float: left; padding: 0 10px; margin-left: -10px; *position: relative; _cursor: hand; }
+#globalfooter #breadcrumbs a:hover { color: #333; text-decoration: none !important; }
+#globalfooter #breadcrumbs a.home { margin: 0; width: 15px; height: 0; padding-top: 36px; overflow: hidden; }
+#globalfooter #breadcrumbs span { float: left; width: 9px; margin: 0 10px 0 0; height: 0; padding-top: 34px; margin-top: 1px; overflow: hidden; background: url(http://images.apple.com/global/elements/breadory/breadcrumb_sep.png) no-repeat; }
+
+/*--- Breadcrumbs ---*/
+#globalfooter ol#breadcrumbs { font-size: 11px; color: #444; background: url(http://images.apple.com/global/elements/breadory/breadcrumb_bg.png) no-repeat; height: 36px; line-height: 34px; margin: 0; list-style: none; font-weight: bold; text-shadow: 0 1px 0 #fff; }
+#globalfooter ol#breadcrumbs li { float: left; margin: 0; padding: 0 0 0 20px; background: url(http://images.apple.com/global/elements/breadory/breadcrumb_sep_20080909.png) no-repeat; }
+#globalfooter ol#breadcrumbs li a { float: left; color: #444; text-decoration: none; padding: 0 10px; margin-left: -10px; }
+#globalfooter ol#breadcrumbs li a:hover { color: #333; text-decoration: none; }
+#globalfooter ol#breadcrumbs li.home { background: none; margin: 0; padding: 0; }
+#globalfooter ol#breadcrumbs li.home a { margin: 0; padding: 0 10px; width: 15px; text-indent: -9999px; overflow: hidden; }
+
+/*--- Directory Nav ---*/
+#directorynav { font-size: 11px; line-height:14px; padding-top:2px; background: url(http://images.apple.com/global/elements/breadory/directory_bg.png) repeat-y; border-top: 1px solid #ddd; float: left; width: 100%; margin-top: -4px; *position: relative; }
+#directorynav .column { width: 120px; padding: 9px 0 2px 18px; }
+#directorynav .column.last { float: left !important; padding-right: 0; }
+#directorynav h3 { color: #666; margin: 0; font-size: 1em; line-height: 14px; font-weight: bold; padding-bottom: 4px; }
+#directorynav h3.standalone { margin-bottom: 18px; }
+#directorynav a { color: #888; text-decoration: none; display: block; zoom: 1; }
+#directorynav h3.standalone a:link,
+#directorynav h3.standalone a:visited { color: #444; }
+#directorynav a:hover { color: #333 !important; text-decoration: none !important; }
+#directorynav .capbottom { clear: both; position: relative; top: 5px; _top: 12px; height: 5px; width: 980px; background: url(http://images.apple.com/global/elements/breadory/directory_capbg.png) no-repeat; }
+#directorynav ul { margin-bottom: 0; padding-bottom: 9px; }
+#directorynav ul li { padding-bottom: 4px; }
+#directorynav.ios .column,
+#directorynav.mac .column,
+#directorynav.ipod .column,
+#directorynav.ipodtouch .column,
+#directorynav.ipad .column,
+#directorynav.iphone .column,
+#directorynav.itunes .column { width: 190px; padding: 9px 0 0 54px; }
+
+/*--- BREADORY ---*/
+#breadory { border: 1px solid #ddd; width: 978px; margin: 0 auto; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
+#globalfooter #breadory ol#breadcrumbs { background: none; clear: both; float: none; height: 3em; line-height: 3em; font-size: 11px; color: #666; margin: 0; list-style: none; font-weight: bold; text-shadow: 0 1px 0 #fff; }
+#breadory ol#breadcrumbs li { background: none; float: left; margin: 0; padding: 0 0 0 1em; }
+#breadory ol#breadcrumbs li a { float: left; color: #666; text-decoration: none; padding: 0 1.75em 0 0; margin-left: 0px; background: url(http://images.apple.com/global/elements/breadory/breadcrumb_separator.png) no-repeat 100% 50%; }
+#breadory ol#breadcrumbs li a:hover { color: #333; text-decoration: none; }
+#breadory ol#breadcrumbs li.home { background: none; margin: 0; padding: 0; }
+#breadory ol#breadcrumbs li.home a { background: url(http://images.apple.com/global/elements/breadory/breadcrumb_home.png) no-repeat 1.25em 50%; margin: 0; padding: 0 0 0 1.25em; width: 30px; text-indent: -9999px; overflow: hidden; }
+#breadory ol#breadcrumbs li.home a:hover { background-image: url(http://images.apple.com/global/elements/breadory/breadcrumb_home_over.png); }
+
+@media only screen { 
+	#breadory ol#breadcrumbs li a { background-image:url(./../elements/breadory/breadcrumb_separator.svg); }
+	#breadory ol#breadcrumbs li.home a { background-image:url(./../elements/breadory/breadcrumb_home.svg); }
+	#breadory ol#breadcrumbs li.home a:hover { background-image:url(./../elements/breadory/breadcrumb_home_over.svg); }
+}
+
+#breadory #directorynav { background: none; clear: both; float: none; margin-top: 0; }
+#breadory #directorynav .capbottom { height: 0; font-size: 1px; _display: none; }
+
+/* PRODUCTHEADER */
+#productheader { padding: 1em 0 0.2em; overflow: hidden; width: 980px; margin: 0 auto; *position: relative; *height: 39px; }
+#productheader h1, 
+#productheader h2 { height: 32px; line-height: 32px; display: inline; float: left; margin: 1px 0 6px 8px; padding: 0; margin-bottom: 6px !important; }
+#productheader h1 a, 
+#productheader h2 a { line-height: 32px; background-position: 0 0; background-repeat: no-repeat; color: #888; display: block; font-weight: normal; height: 32px; outline: none; text-decoration: none; text-indent: -9999px; *position: relative; }
+body#overview #productheader h1 a, 
+body#overview #productheader h2 a { cursor: default; }
+
+#productheader ul { display: inline; float: right; margin: 0; }
+#productheader ul li { display: inline; }
+#productheader ul li a { color: #333; float: left !important; margin-top: 1em; margin-left: 30px; margin-right: 8px; padding: 0; text-decoration: none; }
+#productheader ul li a:hover { color: #08c; }
+
+#productheader a.buynow, #productheader span.buynow, /* old */
+#productheader a.ordernow, #productheader span.ordernow,
+#productheader a.joinnow, #productheader span.joinnow,
+#productheader a.preorder, #productheader span.preorder,
+#productheader a.preorder_blue, #productheader span.preorder_blue,
+#productheader a.howtobuy, #productheader span.howtobuy,
+#productheader a.howtoapply, #productheader span.howtoapply,
+#productheader a.freetrial, #productheader span.freetrial,
+#productheader a.downloadnow, #productheader span.downloadnow,
+#productnav a.downloadnow, #productnav span.downloadnow,
+#productheader a.upgradenow, #productheader span.upgradenow,
+#productheader a.tryamac, #productheader span.tryamac { height: 25px; margin: 0.7em 0 0 20px; background-position: 0 0; background-repeat: no-repeat; display: block; float: right; position: relative; text-decoration: none; text-indent: -9999px; outline: none; overflow: hidden; }
+#productheader a.notifyme, #productheader span.notifyme { height: 25px; margin: 0.8em 0 0 20px; background-position: 0 0; background-repeat: no-repeat; display: block; float: right; position: relative; text-decoration: none; text-indent: -9999px; outline: none; overflow: hidden; }
+
+#productheader a.preorder_blue, #productheader span.preorder_blue { width: 75px; background-image: url(http://images.apple.com/global/elements/buttons/preorder_blue.png); }
+#productheader a.buynow, #productheader span.buynow { width: 72px; background-image: url(http://images.apple.com/global/elements/buttons/buynows.png); _background-image: url(http://images.apple.com/global/elements/buttons/buynows.gif); }
+#productheader a.ordernow, #productheader span.ordernow { width: 81px; background-image: url(http://images.apple.com/global/elements/buttons/ordernows.png); _background-image: url(http://images.apple.com/global/elements/buttons/ordernows.gif); }
+#productheader a.joinnow, #productheader span.joinnow { width: 72px; background-image: url(http://images.apple.com/global/elements/buttons/joinnows.png); _background-image: url(http://images.apple.com/global/elements/buttons/joinnows.gif); }
+#productheader a.preorder, #productheader span.preorder { width: 99px; background-image: url(http://images.apple.com/global/elements/buttons/preordernows.png); _background-image: url(http://images.apple.com/global/elements/buttons/preordernows.gif); }
+#productheader a.howtobuy, #productheader span.howtobuy { width: 86px; background-image: url(http://images.apple.com/global/elements/buttons/howtobuys.png); _background-image: url(http://images.apple.com/global/elements/buttons/howtobuys.gif); }
+#productheader a.howtoapply, #productheader span.howtoapply { width: 100px; background-image: url(http://images.apple.com/global/elements/buttons/howtoapplys.png); _background-image: url(http://images.apple.com/global/elements/buttons/howtoapplys.gif); }
+#productheader a.freetrial, #productheader span.freetrial { width: 72px; background-image: url(http://images.apple.com/global/elements/buttons/freetrials.png); _background-image: url(http://images.apple.com/global/elements/buttons/freetrials.gif); }
+#productheader a.downloadnow, #productheader span.downloadnow { width: 108px; background-image: url(http://images.apple.com/global/elements/buttons/downloadnows.png); _background-image: url(http://images.apple.com/global/elements/buttons/downloadnows.gif); }
+#productnav a.downloadnow, #productnav span.downloadnow { width: 108px; background-image: url(http://images.apple.com/global/elements/buttons/downloadnows.png); _background-image: url(http://images.apple.com/global/elements/buttons/downloadnows.gif); }
+#productheader a.upgradenow, #productheader span.upgradenow { width: 104px; background-image: url(http://images.apple.com/global/elements/buttons/upgradenows.png); _background-image: url(http://images.apple.com/global/elements/buttons/upgradenows.gif); }
+#productheader a.tryamac, #productheader span.tryamac { width: 77px; background-image: url(http://images.apple.com/global/elements/buttons/tryamacs.png); _background-image: url(http://images.apple.com/global/elements/buttons/tryamacs.gif); }
+#productheader a.notifyme, #productheader span.notifyme { width: 75px; background-image: url(http://images.apple.com/global/elements/buttons/notifymes.png); _background-image: url(http://images.apple.com/global/elements/buttons/notifymes.gif); }
+
+#productheader a.buynow:hover, #productheader a.buynow:focus,
+#productheader a.ordernow:hover, #productheader a.ordernow:focus,
+#productheader a.joinnow:hover, #productheader a.joinnow:focus,
+#productheader a.preorder:hover, #productheader a.preorder:focus,
+#productheader a.howtobuy:hover, #productheader a.howtobuy:focus,
+#productheader a.howtoapply:hover, #productheader a.howtoapply:focus,
+#productheader a.freetrial:hover, #productheader a.freetrial:focus,
+#productheader a.downloadnow:hover, #productheader a.downloadnow:focus,
+#productnav a.downloadnow:hover, #productnav a.downloadnow:focus,
+#productheader a.upgradenow:hover, #productheader a.upgradenow:focus,
+#productheader a.tryamac:hover, #productheader a.tryamac:focus,
+#productheader a.notifyme:hover, #productheader a.notifyme:focus { background-position: 0 -25px; }
+
+#productheader a.buynow:active,
+#productheader a.ordernow:active,
+#productheader a.joinnow:active,
+#productheader a.preorder:active,
+#productheader a.howtobuy:active,
+#productheader a.howtoapply:active,
+#productheader a.freetrial:active,
+#productheader a.downloadnow:active,
+#productnav a.downloadnow:active,
+#productheader a.upgradenow:active,
+#productheader a.tryamac:active,
+#productheader a.notifyme:active { background-position: 0 -50px; }
+
+#productheader span.buynow,
+#productheader span.ordernow,
+#productheader span.joinnow,
+#productheader span.preorder,
+#productheader span.howtobuy,
+#productheader span.howtoapply,
+#productheader span.freetrial,
+#productheader span.downloadnow,
+#productnav span.downloadnow,
+#productheader span.upgradenow,
+#productheader span.notifyme { background-position: 0 -75px; }
+
+
+/* BUTTONS - (U.S.) */
+.browsewebappss, .businessstores, .buyiphones, .buynows, .buynows-arrow, .comingsoons, .descargarahoras, .downloadituness, .downloadnows, .finds, .freetrials, .getstarteds, .gos, .howtoapplys, .howtobuys, .joinnows, .learnmores, .nikebuynows, .notifymes, .ordernows, .preordernows, .preorders, .reserves, .startyoursearchs, .submits, .tryamacs, .upgradenows {
+	height: 25px; background-position: 0 0; background-repeat: no-repeat; display: block; text-decoration: none; text-indent: -9999px; overflow: hidden;
+}
+a.browsewebappss:hover, a.businessstores:hover, a.buyiphones:hover, a.buynows:hover, a.buynows-arrow:hover, a.comingsoons:hover, a.descargarahoras:hover, a.downloadituness:hover, a.downloadnows:hover, a.finds:hover, a.freetrials:hover, a.getstarteds:hover, a.gos:hover, a.howtoapplys:hover, a.howtobuys:hover, a.joinnows:hover, a.learnmores:hover, a.nikebuynows:hover, a.notifymes:hover, a.ordernows:hover, a.preordernows:hover, a.preorders:hover, a.reserves:hover, a.startyoursearchs:hover, a.submits:hover, a.tryamacs:hover, a.upgradenows:hover,
+a.browsewebappss:focus, a.businessstores:focus, a.buyiphones:focus, a.buynows:focus, a.buynows-arrow:focus, a.comingsoons:focus, a.descargarahoras:focus, a.downloadituness:focus, a.downloadnows:focus, a.finds:focus, a.freetrials:focus, a.getstarteds:focus, a.gos:focus, a.howtoapplys:focus, a.howtobuys:focus, a.joinnows:focus, a.learnmores:focus, a.nikebuynows:focus, a.notifymes:focus, a.ordernows:focus, a.preordernows:focus, a.preorders:focus, a.reserves:focus, a.startyoursearchs:focus, a.submits:focus, a.tryamacs:focus, a.upgradenows:focus {
+	background-position: 0 -25px;
+}
+a.browsewebappss:active, a.businessstores:active, a.buyiphones:active, a.buynows:active, a.buynows-arrow:active, a.comingsoons:active, a.descargarahoras:active, a.downloadituness:active, a.downloadnows:active, a.finds:active, a.freetrials:active, a.getstarteds:active, a.gos:active, a.howtoapplys:active, a.howtobuys:active, a.joinnows:active, a.learnmores:active, a.nikebuynows:active, a.notifymes:active, a.ordernows:active, a.preordernows:active, a.preorders:active, a.reserves:active, a.startyoursearchs:active, a.submits:active, a.tryamacs:active, a.upgradenows:active {
+	background-position: 0 -50px;
+}
+span.browsewebappss, span.businessstores, span.buyiphones, span.buynows, span.comingsoons, span.descargarahoras, span.downloadituness, span.downloadnows, span.finds, span.freetrials, span.getstarteds, span.gos, span.howtoapplys, span.howtobuys, span.joinnows, span.learnmores, span.nikebuynows, span.notifymes, span.ordernows, span.preordernows, span.preorders, span.reserves, span.startyoursearchs, span.submits, span.tryamacs, span.upgradenows {
+	background-position: 0 -75px;
+}
+.browsewebappss { background-image: url(http://images.apple.com/global/elements/buttons/browsewebappss.png); _background-image: url(http://images.apple.com/global/elements/buttons/browsewebappss.gif); width: 123px; }
+.businessstores { background-image: url(http://images.apple.com/global/elements/buttons/businessstores.png); _background-image: url(http://images.apple.com/global/elements/buttons/businessstores.gif); width: 105px; }
+.buyiphones { background-image: url(http://images.apple.com/global/elements/buttons/buyiphones.png); _background-image: url(http://images.apple.com/global/elements/buttons/buyiphones.gif); width: 87px; }
+.buynows { background-image: url(http://images.apple.com/global/elements/buttons/buynows.png); _background-image: url(http://images.apple.com/global/elements/buttons/buynows.gif); width: 72px; }
+.buynows-arrow { background-image: url(http://images.apple.com/global/elements/buttons/buynows_arrow.png); _background-image: url(http://images.apple.com/global/elements/buttons/buynows_arrow.gif); width: 86px; }
+.comingsoons { background-image: url(http://images.apple.com/global/elements/buttons/comingsoons.png); _background-image: url(http://images.apple.com/global/elements/buttons/comingsoons.gif); width: 97px; }
+.descargarahoras { background-image: url(http://images.apple.com/global/elements/buttons/descargarahoras.png); _background-image: url(http://images.apple.com/global/elements/buttons/descargarahoras.gif); width: 108px; }
+.downloadituness { background-image: url(http://images.apple.com/global/elements/buttons/downloadituness.png); _background-image: url(http://images.apple.com/global/elements/buttons/downloadituness.gif); width: 116px; }
+.downloadnows { background-image: url(http://images.apple.com/global/elements/buttons/downloadnows.png); _background-image: url(http://images.apple.com/global/elements/buttons/downloadnows.gif); width: 108px; }
+.finds { background-image: url(http://images.apple.com/global/elements/buttons/finds.png); _background-image: url(http://images.apple.com/global/elements/buttons/finds.gif); width: 52px; }
+.freetrials { background-image: url(http://images.apple.com/global/elements/buttons/freetrials.png); _background-image: url(http://images.apple.com/global/elements/buttons/freetrials.gif); width: 72px; }
+.getstarteds { background-image: url(http://images.apple.com/global/elements/buttons/getstarteds.png); _background-image: url(http://images.apple.com/global/elements/buttons/getstarteds.gif); width: 90px; }
+.gos { background-image: url(http://images.apple.com/global/elements/buttons/gos.png); _background-image: url(http://images.apple.com/global/elements/buttons/gos.gif); width: 44px; }
+.howtoapplys { background-image: url(http://images.apple.com/global/elements/buttons/howtoapplys.png); _background-image: url(http://images.apple.com/global/elements/buttons/howtoapplys.gif); width: 100px; }
+.howtobuys { background-image: url(http://images.apple.com/global/elements/buttons/howtobuys.png); _background-image: url(http://images.apple.com/global/elements/buttons/howtobuys.gif); width: 86px; }
+.joinnows { background-image: url(http://images.apple.com/global/elements/buttons/joinnows.png); _background-image: url(http://images.apple.com/global/elements/buttons/joinnows.gif); width: 72px; }
+.learnmores { background-image: url(http://images.apple.com/global/elements/buttons/learnmores.png); _background-image: url(http://images.apple.com/global/elements/buttons/learnmores.gif); width: 89px; }
+.nikebuynows { background-image: url(http://images.apple.com/global/elements/buttons/nikebuynows.png); _background-image: url(http://images.apple.com/global/elements/buttons/nikebuynows.gif); width: 72px; }
+.notifymes { background-image: url(http://images.apple.com/global/elements/buttons/notifymes.png); _background-image: url(http://images.apple.com/global/elements/buttons/notifymes.gif); width: 80px; }
+.ordernows { background-image: url(http://images.apple.com/global/elements/buttons/ordernows.png); _background-image: url(http://images.apple.com/global/elements/buttons/ordernows.gif); width: 81px; }
+.preordernows { background-image: url(http://images.apple.com/global/elements/buttons/preordernows.png); _background-image: url(http://images.apple.com/global/elements/buttons/preordernows.gif); width: 99px; }
+.preorders { background-image: url(http://images.apple.com/global/elements/buttons/preorders.png); _background-image: url(http://images.apple.com/global/elements/buttons/preorders.gif); width: 77px; }
+.reserves { background-image: url(http://images.apple.com/global/elements/buttons/reserves.png); _background-image: url(http://images.apple.com/global/elements/buttons/reserves.gif); width: 68px; }
+.startyoursearchs { background-image: url(http://images.apple.com/global/elements/buttons/startyoursearchs.png); _background-image: url(http://images.apple.com/global/elements/buttons/startyoursearchs.gif); width: 120px; }
+.submits { background-image: url(http://images.apple.com/global/elements/buttons/submits.png); _background-image: url(http://images.apple.com/global/elements/buttons/submits.gif); width: 67px; }
+.tryamacs { background-image: url(http://images.apple.com/global/elements/buttons/tryamacs.png); _background-image: url(http://images.apple.com/global/elements/buttons/tryamacs.gif); width: 77px; }
+.upgradenows { background-image: url(http://images.apple.com/global/elements/buttons/upgradenows.png); _background-image: url(http://images.apple.com/global/elements/buttons/upgradenows.gif); width: 104px; }
+
+#productheader .browsewebappss, #productheader .businessstores, #productheader .buyiphones, #productheader .buynows, #productheader .comingsoons, #productheader .descargarahoras, 
+#productheader .downloadituness, #productheader .downloadnows, #productheader .finds, #productheader .freetrials, #productheader .getstarteds, 
+#productheader .gos, #productheader .howtoapplys, #productheader .howtobuys, #productheader .joinnows, #productheader .learnmores, 
+#productheader .notifymes, #productheader .ordernows, #productheader .preordernows, #productheader .preorders, #productheader .reserves, 
+#productheader .startyoursearchs, #productheader .submits, #productheader .tryamacs, #productheader .upgradenows {
+	margin: 0.8em 0 0 20px; float: left;
+}
+
+/* promofooter */
+#promofooter { width:984px; margin:18px auto 0; padding-top:17px; background:url(http://images.apple.com/promos/images/promofooter_top.png) no-repeat; zoom:1; _background-image:url(http://images.apple.com/promos/images/promofooter_top.gif); }
+#promofooter #promos { width:980px; margin-bottom:0; padding:0 2px 4px; background:url(http://images.apple.com/promos/images/promofooter_bottom.png) no-repeat 0 100%; zoom:1; _background-image:url(http://images.apple.com/promos/images/promofooter_bottom.gif); }
+#promofooter #promos:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; }
+#promofooter #promos li.promo { position:relative; float:left; width:244px; min-height:15em; _height:15em; padding-right:1px; margin-top:-16px; }
+#promofooter #promos li.promo a { color:#777; }
+#promofooter #promos li.promo:hover a { color:#08c; text-decoration:none; }
+
+#promofooter #promos img { display:block; }
+
+#promofooter #promos h4 a,
+#promofooter #promos p a,
+#promofooter #promos ul { display:block; padding-left:15px; padding-right:12px; text-align:left; z-index:101; *position:relative; }
+
+#promofooter #promos h4 a { font-size:18px; font-weight:normal; padding-top:15px; }
+#promofooter #promos p { margin-bottom:0; }
+#promofooter #promos p a { font-size:11px; line-height:16px; }
+#promofooter #promos a.image { height:180px; position:absolute; bottom:0; z-index:100; }
+
+#promofooter #promos .promo.left p a { width:110px; }
+#promofooter #promos .promo.right p a { width:112px; padding-left:116px; }
+#promofooter #promos .promo.center p a { text-align:center; }
+
+#promofooter #promos li.buy { position:relative; float:left; width:244px; padding-right:1px; margin-top:-17px; color:#777; }
+#promofooter #promos li.buy ul { font-size:11px; line-height:1.4; }
+
+#promofooter.grid2col { min-height: 70px; padding:15px 0 8px 0;  border: 1px solid #D2D2D2; }
+#promofooter.grid2col { background:#fff;
+    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e5e5e5));
+    background:-moz-linear-gradient(100% 100% 90deg, #e5e5e5, #fff);
+    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFFFF', endColorstr='#e5e5e5');
+ }
+#promofooter.grid2col #promos { background: none;}
+#promofooter.grid2col #promos li.promo { width: 47%; min-height: 70px; margin-bottom: -10px; }
+#promofooter.grid2col #promos li.promo.first { border-right: 1px solid #e8e8e8; }
+#promofooter.grid2col li.promo { padding:20px; }
+
+/* PRINT */
+@media print {
+	body, #main, #content { color: #000 !important; }
+	a, a:link, a:visited { color: #000 !important; text-decoration:none !important; }
+	#tabs, #globalheader, #globalfooter, #directorynav, .noprint, .hide { display: none !important; }
+	#main a.pdf, #main a.html, #main a.qt, #main a.ical, #main a.dl, #main a.dmg, #main a.zip, #main a.keynote, #main a.audio { padding-left: 0 !important; background-image: none !important; }
+}
+
+/* iPhone */
+@media screen and (max-device-width: 480px) { html { -webkit-text-size-adjust: none; } }
diff --git a/Source/WebInspectorUI/Tools/PrettyPrinting/populate/jquery.min.js b/Source/WebInspectorUI/Tools/PrettyPrinting/populate/jquery.min.js
new file mode 100644
index 000000000..006e95310
--- /dev/null
+++ b/Source/WebInspectorUI/Tools/PrettyPrinting/populate/jquery.min.js
@@ -0,0 +1,5 @@
+/*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license
+//@ sourceMappingURL=jquery.min.map
+*/(function(e,t){var n,r,i=typeof t,o=e.document,a=e.location,s=e.jQuery,u=e.$,l={},c=[],p="1.9.1",f=c.concat,d=c.push,h=c.slice,g=c.indexOf,m=l.toString,y=l.hasOwnProperty,v=p.trim,b=function(e,t){return new b.fn.init(e,t,r)},x=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,w=/\S+/g,T=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,N=/^(?:(<[\w\W]+>)[^>]*|#([\w-]*))$/,C=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,k=/^[\],:{}\s]*$/,E=/(?:^|:|,)(?:\s*\[)+/g,S=/\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,A=/"[^"\\\r\n]*"|true|false|null|-?(?:\d+\.|)\d+(?:[eE][+-]?\d+|)/g,j=/^-ms-/,D=/-([\da-z])/gi,L=function(e,t){return t.toUpperCase()},H=function(e){(o.addEventListener||"load"===e.type||"complete"===o.readyState)&&(q(),b.ready())},q=function(){o.addEventListener?(o.removeEventListener("DOMContentLoaded",H,!1),e.removeEventListener("load",H,!1)):(o.detachEvent("onreadystatechange",H),e.detachEvent("onload",H))};b.fn=b.prototype={jquery:p,constructor:b,init:function(e,n,r){var i,a;if(!e)return this;if("string"==typeof e){if(i="<"===e.charAt(0)&&">"===e.charAt(e.length-1)&&e.length>=3?[null,e,null]:N.exec(e),!i||!i[1]&&n)return!n||n.jquery?(n||r).find(e):this.constructor(n).find(e);if(i[1]){if(n=n instanceof b?n[0]:n,b.merge(this,b.parseHTML(i[1],n&&n.nodeType?n.ownerDocument||n:o,!0)),C.test(i[1])&&b.isPlainObject(n))for(i in n)b.isFunction(this[i])?this[i](n[i]):this.attr(i,n[i]);return this}if(a=o.getElementById(i[2]),a&&a.parentNode){if(a.id!==i[2])return r.find(e);this.length=1,this[0]=a}return this.context=o,this.selector=e,this}return e.nodeType?(this.context=this[0]=e,this.length=1,this):b.isFunction(e)?r.ready(e):(e.selector!==t&&(this.selector=e.selector,this.context=e.context),b.makeArray(e,this))},selector:"",length:0,size:function(){return this.length},toArray:function(){return h.call(this)},get:function(e){return null==e?this.toArray():0>e?this[this.length+e]:this[e]},pushStack:function(e){var t=b.merge(this.constructor(),e);return t.prevObject=this,t.context=this.context,t},each:function(e,t){return b.each(this,e,t)},ready:function(e){return b.ready.promise().done(e),this},slice:function(){return this.pushStack(h.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(0>e?t:0);return this.pushStack(n>=0&&t>n?[this[n]]:[])},map:function(e){return this.pushStack(b.map(this,function(t,n){return e.call(t,n,t)}))},end:function(){return this.prevObject||this.constructor(null)},push:d,sort:[].sort,splice:[].splice},b.fn.init.prototype=b.fn,b.extend=b.fn.extend=function(){var e,n,r,i,o,a,s=arguments[0]||{},u=1,l=arguments.length,c=!1;for("boolean"==typeof s&&(c=s,s=arguments[1]||{},u=2),"object"==typeof s||b.isFunction(s)||(s={}),l===u&&(s=this,--u);l>u;u++)if(null!=(o=arguments[u]))for(i in o)e=s[i],r=o[i],s!==r&&(c&&r&&(b.isPlainObject(r)||(n=b.isArray(r)))?(n?(n=!1,a=e&&b.isArray(e)?e:[]):a=e&&b.isPlainObject(e)?e:{},s[i]=b.extend(c,a,r)):r!==t&&(s[i]=r));return s},b.extend({noConflict:function(t){return e.$===b&&(e.$=u),t&&e.jQuery===b&&(e.jQuery=s),b},isReady:!1,readyWait:1,holdReady:function(e){e?b.readyWait++:b.ready(!0)},ready:function(e){if(e===!0?!--b.readyWait:!b.isReady){if(!o.body)return setTimeout(b.ready);b.isReady=!0,e!==!0&&--b.readyWait>0||(n.resolveWith(o,[b]),b.fn.trigger&&b(o).trigger("ready").off("ready"))}},isFunction:function(e){return"function"===b.type(e)},isArray:Array.isArray||function(e){return"array"===b.type(e)},isWindow:function(e){return null!=e&&e==e.window},isNumeric:function(e){return!isNaN(parseFloat(e))&&isFinite(e)},type:function(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?l[m.call(e)]||"object":typeof e},isPlainObject:function(e){if(!e||"object"!==b.type(e)||e.nodeType||b.isWindow(e))return!1;try{if(e.constructor&&!y.call(e,"constructor")&&!y.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(n){return!1}var r;for(r in e);return r===t||y.call(e,r)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},error:function(e){throw Error(e)},parseHTML:function(e,t,n){if(!e||"string"!=typeof e)return null;"boolean"==typeof t&&(n=t,t=!1),t=t||o;var r=C.exec(e),i=!n&&[];return r?[t.createElement(r[1])]:(r=b.buildFragment([e],t,i),i&&b(i).remove(),b.merge([],r.childNodes))},parseJSON:function(n){return e.JSON&&e.JSON.parse?e.JSON.parse(n):null===n?n:"string"==typeof n&&(n=b.trim(n),n&&k.test(n.replace(S,"@").replace(A,"]").replace(E,"")))?Function("return "+n)():(b.error("Invalid JSON: "+n),t)},parseXML:function(n){var r,i;if(!n||"string"!=typeof n)return null;try{e.DOMParser?(i=new DOMParser,r=i.parseFromString(n,"text/xml")):(r=new ActiveXObject("Microsoft.XMLDOM"),r.async="false",r.loadXML(n))}catch(o){r=t}return r&&r.documentElement&&!r.getElementsByTagName("parsererror").length||b.error("Invalid XML: "+n),r},noop:function(){},globalEval:function(t){t&&b.trim(t)&&(e.execScript||function(t){e.eval.call(e,t)})(t)},camelCase:function(e){return e.replace(j,"ms-").replace(D,L)},nodeName:function(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()},each:function(e,t,n){var r,i=0,o=e.length,a=M(e);if(n){if(a){for(;o>i;i++)if(r=t.apply(e[i],n),r===!1)break}else for(i in e)if(r=t.apply(e[i],n),r===!1)break}else if(a){for(;o>i;i++)if(r=t.call(e[i],i,e[i]),r===!1)break}else for(i in e)if(r=t.call(e[i],i,e[i]),r===!1)break;return e},trim:v&&!v.call("\ufeff\u00a0")?function(e){return null==e?"":v.call(e)}:function(e){return null==e?"":(e+"").replace(T,"")},makeArray:function(e,t){var n=t||[];return null!=e&&(M(Object(e))?b.merge(n,"string"==typeof e?[e]:e):d.call(n,e)),n},inArray:function(e,t,n){var r;if(t){if(g)return g.call(t,e,n);for(r=t.length,n=n?0>n?Math.max(0,r+n):n:0;r>n;n++)if(n in t&&t[n]===e)return n}return-1},merge:function(e,n){var r=n.length,i=e.length,o=0;if("number"==typeof r)for(;r>o;o++)e[i++]=n[o];else while(n[o]!==t)e[i++]=n[o++];return e.length=i,e},grep:function(e,t,n){var r,i=[],o=0,a=e.length;for(n=!!n;a>o;o++)r=!!t(e[o],o),n!==r&&i.push(e[o]);return i},map:function(e,t,n){var r,i=0,o=e.length,a=M(e),s=[];if(a)for(;o>i;i++)r=t(e[i],i,n),null!=r&&(s[s.length]=r);else for(i in e)r=t(e[i],i,n),null!=r&&(s[s.length]=r);return f.apply([],s)},guid:1,proxy:function(e,n){var r,i,o;return"string"==typeof n&&(o=e[n],n=e,e=o),b.isFunction(e)?(r=h.call(arguments,2),i=function(){return e.apply(n||this,r.concat(h.call(arguments)))},i.guid=e.guid=e.guid||b.guid++,i):t},access:function(e,n,r,i,o,a,s){var u=0,l=e.length,c=null==r;if("object"===b.type(r)){o=!0;for(u in r)b.access(e,n,u,r[u],!0,a,s)}else if(i!==t&&(o=!0,b.isFunction(i)||(s=!0),c&&(s?(n.call(e,i),n=null):(c=n,n=function(e,t,n){return c.call(b(e),n)})),n))for(;l>u;u++)n(e[u],r,s?i:i.call(e[u],u,n(e[u],r)));return o?e:c?n.call(e):l?n(e[0],r):a},now:function(){return(new Date).getTime()}}),b.ready.promise=function(t){if(!n)if(n=b.Deferred(),"complete"===o.readyState)setTimeout(b.ready);else if(o.addEventListener)o.addEventListener("DOMContentLoaded",H,!1),e.addEventListener("load",H,!1);else{o.attachEvent("onreadystatechange",H),e.attachEvent("onload",H);var r=!1;try{r=null==e.frameElement&&o.documentElement}catch(i){}r&&r.doScroll&&function a(){if(!b.isReady){try{r.doScroll("left")}catch(e){return setTimeout(a,50)}q(),b.ready()}}()}return n.promise(t)},b.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(e,t){l["[object "+t+"]"]=t.toLowerCase()});function M(e){var t=e.length,n=b.type(e);return b.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||"function"!==n&&(0===t||"number"==typeof t&&t>0&&t-1 in e)}r=b(o);var _={};function F(e){var t=_[e]={};return b.each(e.match(w)||[],function(e,n){t[n]=!0}),t}b.Callbacks=function(e){e="string"==typeof e?_[e]||F(e):b.extend({},e);var n,r,i,o,a,s,u=[],l=!e.once&&[],c=function(t){for(r=e.memory&&t,i=!0,a=s||0,s=0,o=u.length,n=!0;u&&o>a;a++)if(u[a].apply(t[0],t[1])===!1&&e.stopOnFalse){r=!1;break}n=!1,u&&(l?l.length&&c(l.shift()):r?u=[]:p.disable())},p={add:function(){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this},remove:function(){return u&&b.each(arguments,function(e,t){var r;while((r=b.inArray(t,u,r))>-1)u.splice(r,1),n&&(o>=r&&o--,a>=r&&a--)}),this},has:function(e){return e?b.inArray(e,u)>-1:!(!u||!u.length)},empty:function(){return u=[],this},disable:function(){return u=l=r=t,this},disabled:function(){return!u},lock:function(){return l=t,r||p.disable(),this},locked:function(){return!l},fireWith:function(e,t){return t=t||[],t=[e,t.slice?t.slice():t],!u||i&&!l||(n?l.push(t):c(t)),this},fire:function(){return p.fireWith(this,arguments),this},fired:function(){return!!i}};return p},b.extend({Deferred:function(e){var t=[["resolve","done",b.Callbacks("once memory"),"resolved"],["reject","fail",b.Callbacks("once memory"),"rejected"],["notify","progress",b.Callbacks("memory")]],n="pending",r={state:function(){return n},always:function(){return i.done(arguments).fail(arguments),this},then:function(){var e=arguments;return b.Deferred(function(n){b.each(t,function(t,o){var a=o[0],s=b.isFunction(e[t])&&e[t];i[o[1]](function(){var e=s&&s.apply(this,arguments);e&&b.isFunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[a+"With"](this===r?n.promise():this,s?[e]:arguments)})}),e=null}).promise()},promise:function(e){return null!=e?b.extend(e,r):r}},i={};return r.pipe=r.then,b.each(t,function(e,o){var a=o[2],s=o[3];r[o[1]]=a.add,s&&a.add(function(){n=s},t[1^e][2].disable,t[2][2].lock),i[o[0]]=function(){return i[o[0]+"With"](this===i?r:this,arguments),this},i[o[0]+"With"]=a.fireWith}),r.promise(i),e&&e.call(i,i),i},when:function(e){var t=0,n=h.call(arguments),r=n.length,i=1!==r||e&&b.isFunction(e.promise)?r:0,o=1===i?e:b.Deferred(),a=function(e,t,n){return function(r){t[e]=this,n[e]=arguments.length>1?h.call(arguments):r,n===s?o.notifyWith(t,n):--i||o.resolveWith(t,n)}},s,u,l;if(r>1)for(s=Array(r),u=Array(r),l=Array(r);r>t;t++)n[t]&&b.isFunction(n[t].promise)?n[t].promise().done(a(t,l,n)).fail(o.reject).progress(a(t,u,s)):--i;return i||o.resolveWith(l,n),o.promise()}}),b.support=function(){var t,n,r,a,s,u,l,c,p,f,d=o.createElement("div");if(d.setAttribute("className","t"),d.innerHTML="  <link/><table></table><a href='/a'>a</a><input type='checkbox'/>",n=d.getElementsByTagName("*"),r=d.getElementsByTagName("a")[0],!n||!r||!n.length)return{};s=o.createElement("select"),l=s.appendChild(o.createElement("option")),a=d.getElementsByTagName("input")[0],r.style.cssText="top:1px;float:left;opacity:.5",t={getSetAttribute:"t"!==d.className,leadingWhitespace:3===d.firstChild.nodeType,tbody:!d.getElementsByTagName("tbody").length,htmlSerialize:!!d.getElementsByTagName("link").length,style:/top/.test(r.getAttribute("style")),hrefNormalized:"/a"===r.getAttribute("href"),opacity:/^0.5/.test(r.style.opacity),cssFloat:!!r.style.cssFloat,checkOn:!!a.value,optSelected:l.selected,enctype:!!o.createElement("form").enctype,html5Clone:"<:nav></:nav>"!==o.createElement("nav").cloneNode(!0).outerHTML,boxModel:"CSS1Compat"===o.compatMode,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0,boxSizingReliable:!0,pixelPosition:!1},a.checked=!0,t.noCloneChecked=a.cloneNode(!0).checked,s.disabled=!0,t.optDisabled=!l.disabled;try{delete d.test}catch(h){t.deleteExpando=!1}a=o.createElement("input"),a.setAttribute("value",""),t.input=""===a.getAttribute("value"),a.value="t",a.setAttribute("type","radio"),t.radioValue="t"===a.value,a.setAttribute("checked","t"),a.setAttribute("name","t"),u=o.createDocumentFragment(),u.appendChild(a),t.appendChecked=a.checked,t.checkClone=u.cloneNode(!0).cloneNode(!0).lastChild.checked,d.attachEvent&&(d.attachEvent("onclick",function(){t.noCloneEvent=!1}),d.cloneNode(!0).click());for(f in{submit:!0,change:!0,focusin:!0})d.setAttribute(c="on"+f,"t"),t[f+"Bubbles"]=c in e||d.attributes[c].expando===!1;return d.style.backgroundClip="content-box",d.cloneNode(!0).style.backgroundClip="",t.clearCloneStyle="content-box"===d.style.backgroundClip,b(function(){var n,r,a,s="padding:0;margin:0;border:0;display:block;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;",u=o.getElementsByTagName("body")[0];u&&(n=o.createElement("div"),n.style.cssText="border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px",u.appendChild(n).appendChild(d),d.innerHTML="<table><tr><td></td><td>t</td></tr></table>",a=d.getElementsByTagName("td"),a[0].style.cssText="padding:0;margin:0;border:0;display:none",p=0===a[0].offsetHeight,a[0].style.display="",a[1].style.display="none",t.reliableHiddenOffsets=p&&0===a[0].offsetHeight,d.innerHTML="",d.style.cssText="box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%;",t.boxSizing=4===d.offsetWidth,t.doesNotIncludeMarginInBodyOffset=1!==u.offsetTop,e.getComputedStyle&&(t.pixelPosition="1%"!==(e.getComputedStyle(d,null)||{}).top,t.boxSizingReliable="4px"===(e.getComputedStyle(d,null)||{width:"4px"}).width,r=d.appendChild(o.createElement("div")),r.style.cssText=d.style.cssText=s,r.style.marginRight=r.style.width="0",d.style.width="1px",t.reliableMarginRight=!parseFloat((e.getComputedStyle(r,null)||{}).marginRight)),typeof d.style.zoom!==i&&(d.innerHTML="",d.style.cssText=s+"width:1px;padding:1px;display:inline;zoom:1",t.inlineBlockNeedsLayout=3===d.offsetWidth,d.style.display="block",d.innerHTML="<div></div>",d.firstChild.style.width="5px",t.shrinkWrapBlocks=3!==d.offsetWidth,t.inlineBlockNeedsLayout&&(u.style.zoom=1)),u.removeChild(n),n=d=a=r=null)}),n=s=u=l=r=a=null,t}();var O=/(?:\{[\s\S]*\}|\[[\s\S]*\])$/,B=/([A-Z])/g;function P(e,n,r,i){if(b.acceptData(e)){var o,a,s=b.expando,u="string"==typeof n,l=e.nodeType,p=l?b.cache:e,f=l?e[s]:e[s]&&s;if(f&&p[f]&&(i||p[f].data)||!u||r!==t)return f||(l?e[s]=f=c.pop()||b.guid++:f=s),p[f]||(p[f]={},l||(p[f].toJSON=b.noop)),("object"==typeof n||"function"==typeof n)&&(i?p[f]=b.extend(p[f],n):p[f].data=b.extend(p[f].data,n)),o=p[f],i||(o.data||(o.data={}),o=o.data),r!==t&&(o[b.camelCase(n)]=r),u?(a=o[n],null==a&&(a=o[b.camelCase(n)])):a=o,a}}function R(e,t,n){if(b.acceptData(e)){var r,i,o,a=e.nodeType,s=a?b.cache:e,u=a?e[b.expando]:b.expando;if(s[u]){if(t&&(o=n?s[u]:s[u].data)){b.isArray(t)?t=t.concat(b.map(t,b.camelCase)):t in o?t=[t]:(t=b.camelCase(t),t=t in o?[t]:t.split(" "));for(r=0,i=t.length;i>r;r++)delete o[t[r]];if(!(n?$:b.isEmptyObject)(o))return}(n||(delete s[u].data,$(s[u])))&&(a?b.cleanData([e],!0):b.support.deleteExpando||s!=s.window?delete s[u]:s[u]=null)}}}b.extend({cache:{},expando:"jQuery"+(p+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(e){return e=e.nodeType?b.cache[e[b.expando]]:e[b.expando],!!e&&!$(e)},data:function(e,t,n){return P(e,t,n)},removeData:function(e,t){return R(e,t)},_data:function(e,t,n){return P(e,t,n,!0)},_removeData:function(e,t){return R(e,t,!0)},acceptData:function(e){if(e.nodeType&&1!==e.nodeType&&9!==e.nodeType)return!1;var t=e.nodeName&&b.noData[e.nodeName.toLowerCase()];return!t||t!==!0&&e.getAttribute("classid")===t}}),b.fn.extend({data:function(e,n){var r,i,o=this[0],a=0,s=null;if(e===t){if(this.length&&(s=b.data(o),1===o.nodeType&&!b._data(o,"parsedAttrs"))){for(r=o.attributes;r.length>a;a++)i=r[a].name,i.indexOf("data-")||(i=b.camelCase(i.slice(5)),W(o,i,s[i]));b._data(o,"parsedAttrs",!0)}return s}return"object"==typeof e?this.each(function(){b.data(this,e)}):b.access(this,function(n){return n===t?o?W(o,e,b.data(o,e)):null:(this.each(function(){b.data(this,e,n)}),t)},null,n,arguments.length>1,null,!0)},removeData:function(e){return this.each(function(){b.removeData(this,e)})}});function W(e,n,r){if(r===t&&1===e.nodeType){var i="data-"+n.replace(B,"-$1").toLowerCase();if(r=e.getAttribute(i),"string"==typeof r){try{r="true"===r?!0:"false"===r?!1:"null"===r?null:+r+""===r?+r:O.test(r)?b.parseJSON(r):r}catch(o){}b.data(e,n,r)}else r=t}return r}function $(e){var t;for(t in e)if(("data"!==t||!b.isEmptyObject(e[t]))&&"toJSON"!==t)return!1;return!0}b.extend({queue:function(e,n,r){var i;return e?(n=(n||"fx")+"queue",i=b._data(e,n),r&&(!i||b.isArray(r)?i=b._data(e,n,b.makeArray(r)):i.push(r)),i||[]):t},dequeue:function(e,t){t=t||"fx";var n=b.queue(e,t),r=n.length,i=n.shift(),o=b._queueHooks(e,t),a=function(){b.dequeue(e,t)};"inprogress"===i&&(i=n.shift(),r--),o.cur=i,i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,a,o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return b._data(e,n)||b._data(e,n,{empty:b.Callbacks("once memory").add(function(){b._removeData(e,t+"queue"),b._removeData(e,n)})})}}),b.fn.extend({queue:function(e,n){var r=2;return"string"!=typeof e&&(n=e,e="fx",r--),r>arguments.length?b.queue(this[0],e):n===t?this:this.each(function(){var t=b.queue(this,e,n);b._queueHooks(this,e),"fx"===e&&"inprogress"!==t[0]&&b.dequeue(this,e)})},dequeue:function(e){return this.each(function(){b.dequeue(this,e)})},delay:function(e,t){return e=b.fx?b.fx.speeds[e]||e:e,t=t||"fx",this.queue(t,function(t,n){var r=setTimeout(t,e);n.stop=function(){clearTimeout(r)}})},clearQueue:function(e){return this.queue(e||"fx",[])},promise:function(e,n){var r,i=1,o=b.Deferred(),a=this,s=this.length,u=function(){--i||o.resolveWith(a,[a])};"string"!=typeof e&&(n=e,e=t),e=e||"fx";while(s--)r=b._data(a[s],e+"queueHooks"),r&&r.empty&&(i++,r.empty.add(u));return u(),o.promise(n)}});var I,z,X=/[\t\r\n]/g,U=/\r/g,V=/^(?:input|select|textarea|button|object)$/i,Y=/^(?:a|area)$/i,J=/^(?:checked|selected|autofocus|autoplay|async|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped)$/i,G=/^(?:checked|selected)$/i,Q=b.support.getSetAttribute,K=b.support.input;b.fn.extend({attr:function(e,t){return b.access(this,b.attr,e,t,arguments.length>1)},removeAttr:function(e){return this.each(function(){b.removeAttr(this,e)})},prop:function(e,t){return b.access(this,b.prop,e,t,arguments.length>1)},removeProp:function(e){return e=b.propFix[e]||e,this.each(function(){try{this[e]=t,delete this[e]}catch(n){}})},addClass:function(e){var t,n,r,i,o,a=0,s=this.length,u="string"==typeof e&&e;if(b.isFunction(e))return this.each(function(t){b(this).addClass(e.call(this,t,this.className))});if(u)for(t=(e||"").match(w)||[];s>a;a++)if(n=this[a],r=1===n.nodeType&&(n.className?(" "+n.className+" ").replace(X," "):" ")){o=0;while(i=t[o++])0>r.indexOf(" "+i+" ")&&(r+=i+" ");n.className=b.trim(r)}return this},removeClass:function(e){var t,n,r,i,o,a=0,s=this.length,u=0===arguments.length||"string"==typeof e&&e;if(b.isFunction(e))return this.each(function(t){b(this).removeClass(e.call(this,t,this.className))});if(u)for(t=(e||"").match(w)||[];s>a;a++)if(n=this[a],r=1===n.nodeType&&(n.className?(" "+n.className+" ").replace(X," "):"")){o=0;while(i=t[o++])while(r.indexOf(" "+i+" ")>=0)r=r.replace(" "+i+" "," ");n.className=e?b.trim(r):""}return this},toggleClass:function(e,t){var n=typeof e,r="boolean"==typeof t;return b.isFunction(e)?this.each(function(n){b(this).toggleClass(e.call(this,n,this.className,t),t)}):this.each(function(){if("string"===n){var o,a=0,s=b(this),u=t,l=e.match(w)||[];while(o=l[a++])u=r?u:!s.hasClass(o),s[u?"addClass":"removeClass"](o)}else(n===i||"boolean"===n)&&(this.className&&b._data(this,"__className__",this.className),this.className=this.className||e===!1?"":b._data(this,"__className__")||"")})},hasClass:function(e){var t=" "+e+" ",n=0,r=this.length;for(;r>n;n++)if(1===this[n].nodeType&&(" "+this[n].className+" ").replace(X," ").indexOf(t)>=0)return!0;return!1},val:function(e){var n,r,i,o=this[0];{if(arguments.length)return i=b.isFunction(e),this.each(function(n){var o,a=b(this);1===this.nodeType&&(o=i?e.call(this,n,a.val()):e,null==o?o="":"number"==typeof o?o+="":b.isArray(o)&&(o=b.map(o,function(e){return null==e?"":e+""})),r=b.valHooks[this.type]||b.valHooks[this.nodeName.toLowerCase()],r&&"set"in r&&r.set(this,o,"value")!==t||(this.value=o))});if(o)return r=b.valHooks[o.type]||b.valHooks[o.nodeName.toLowerCase()],r&&"get"in r&&(n=r.get(o,"value"))!==t?n:(n=o.value,"string"==typeof n?n.replace(U,""):null==n?"":n)}}}),b.extend({valHooks:{option:{get:function(e){var t=e.attributes.value;return!t||t.specified?e.value:e.text}},select:{get:function(e){var t,n,r=e.options,i=e.selectedIndex,o="select-one"===e.type||0>i,a=o?null:[],s=o?i+1:r.length,u=0>i?s:o?i:0;for(;s>u;u++)if(n=r[u],!(!n.selected&&u!==i||(b.support.optDisabled?n.disabled:null!==n.getAttribute("disabled"))||n.parentNode.disabled&&b.nodeName(n.parentNode,"optgroup"))){if(t=b(n).val(),o)return t;a.push(t)}return a},set:function(e,t){var n=b.makeArray(t);return b(e).find("option").each(function(){this.selected=b.inArray(b(this).val(),n)>=0}),n.length||(e.selectedIndex=-1),n}}},attr:function(e,n,r){var o,a,s,u=e.nodeType;if(e&&3!==u&&8!==u&&2!==u)return typeof e.getAttribute===i?b.prop(e,n,r):(a=1!==u||!b.isXMLDoc(e),a&&(n=n.toLowerCase(),o=b.attrHooks[n]||(J.test(n)?z:I)),r===t?o&&a&&"get"in o&&null!==(s=o.get(e,n))?s:(typeof e.getAttribute!==i&&(s=e.getAttribute(n)),null==s?t:s):null!==r?o&&a&&"set"in o&&(s=o.set(e,r,n))!==t?s:(e.setAttribute(n,r+""),r):(b.removeAttr(e,n),t))},removeAttr:function(e,t){var n,r,i=0,o=t&&t.match(w);if(o&&1===e.nodeType)while(n=o[i++])r=b.propFix[n]||n,J.test(n)?!Q&&G.test(n)?e[b.camelCase("default-"+n)]=e[r]=!1:e[r]=!1:b.attr(e,n,""),e.removeAttribute(Q?n:r)},attrHooks:{type:{set:function(e,t){if(!b.support.radioValue&&"radio"===t&&b.nodeName(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(e,n,r){var i,o,a,s=e.nodeType;if(e&&3!==s&&8!==s&&2!==s)return a=1!==s||!b.isXMLDoc(e),a&&(n=b.propFix[n]||n,o=b.propHooks[n]),r!==t?o&&"set"in o&&(i=o.set(e,r,n))!==t?i:e[n]=r:o&&"get"in o&&null!==(i=o.get(e,n))?i:e[n]},propHooks:{tabIndex:{get:function(e){var n=e.getAttributeNode("tabindex");return n&&n.specified?parseInt(n.value,10):V.test(e.nodeName)||Y.test(e.nodeName)&&e.href?0:t}}}}),z={get:function(e,n){var r=b.prop(e,n),i="boolean"==typeof r&&e.getAttribute(n),o="boolean"==typeof r?K&&Q?null!=i:G.test(n)?e[b.camelCase("default-"+n)]:!!i:e.getAttributeNode(n);return o&&o.value!==!1?n.toLowerCase():t},set:function(e,t,n){return t===!1?b.removeAttr(e,n):K&&Q||!G.test(n)?e.setAttribute(!Q&&b.propFix[n]||n,n):e[b.camelCase("default-"+n)]=e[n]=!0,n}},K&&Q||(b.attrHooks.value={get:function(e,n){var r=e.getAttributeNode(n);return b.nodeName(e,"input")?e.defaultValue:r&&r.specified?r.value:t},set:function(e,n,r){return b.nodeName(e,"input")?(e.defaultValue=n,t):I&&I.set(e,n,r)}}),Q||(I=b.valHooks.button={get:function(e,n){var r=e.getAttributeNode(n);return r&&("id"===n||"name"===n||"coords"===n?""!==r.value:r.specified)?r.value:t},set:function(e,n,r){var i=e.getAttributeNode(r);return i||e.setAttributeNode(i=e.ownerDocument.createAttribute(r)),i.value=n+="","value"===r||n===e.getAttribute(r)?n:t}},b.attrHooks.contenteditable={get:I.get,set:function(e,t,n){I.set(e,""===t?!1:t,n)}},b.each(["width","height"],function(e,n){b.attrHooks[n]=b.extend(b.attrHooks[n],{set:function(e,r){return""===r?(e.setAttribute(n,"auto"),r):t}})})),b.support.hrefNormalized||(b.each(["href","src","width","height"],function(e,n){b.attrHooks[n]=b.extend(b.attrHooks[n],{get:function(e){var r=e.getAttribute(n,2);return null==r?t:r}})}),b.each(["href","src"],function(e,t){b.propHooks[t]={get:function(e){return e.getAttribute(t,4)}}})),b.support.style||(b.attrHooks.style={get:function(e){return e.style.cssText||t},set:function(e,t){return e.style.cssText=t+""}}),b.support.optSelected||(b.propHooks.selected=b.extend(b.propHooks.selected,{get:function(e){var t=e.parentNode;return t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex),null}})),b.support.enctype||(b.propFix.enctype="encoding"),b.support.checkOn||b.each(["radio","checkbox"],function(){b.valHooks[this]={get:function(e){return null===e.getAttribute("value")?"on":e.value}}}),b.each(["radio","checkbox"],function(){b.valHooks[this]=b.extend(b.valHooks[this],{set:function(e,n){return b.isArray(n)?e.checked=b.inArray(b(e).val(),n)>=0:t}})});var Z=/^(?:input|select|textarea)$/i,et=/^key/,tt=/^(?:mouse|contextmenu)|click/,nt=/^(?:focusinfocus|focusoutblur)$/,rt=/^([^.]*)(?:\.(.+)|)$/;function it(){return!0}function ot(){return!1}b.event={global:{},add:function(e,n,r,o,a){var s,u,l,c,p,f,d,h,g,m,y,v=b._data(e);if(v){r.handler&&(c=r,r=c.handler,a=c.selector),r.guid||(r.guid=b.guid++),(u=v.events)||(u=v.events={}),(f=v.handle)||(f=v.handle=function(e){return typeof b===i||e&&b.event.triggered===e.type?t:b.event.dispatch.apply(f.elem,arguments)},f.elem=e),n=(n||"").match(w)||[""],l=n.length;while(l--)s=rt.exec(n[l])||[],g=y=s[1],m=(s[2]||"").split(".").sort(),p=b.event.special[g]||{},g=(a?p.delegateType:p.bindType)||g,p=b.event.special[g]||{},d=b.extend({type:g,origType:y,data:o,handler:r,guid:r.guid,selector:a,needsContext:a&&b.expr.match.needsContext.test(a),namespace:m.join(".")},c),(h=u[g])||(h=u[g]=[],h.delegateCount=0,p.setup&&p.setup.call(e,o,m,f)!==!1||(e.addEventListener?e.addEventListener(g,f,!1):e.attachEvent&&e.attachEvent("on"+g,f))),p.add&&(p.add.call(e,d),d.handler.guid||(d.handler.guid=r.guid)),a?h.splice(h.delegateCount++,0,d):h.push(d),b.event.global[g]=!0;e=null}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,p,f,d,h,g,m=b.hasData(e)&&b._data(e);if(m&&(c=m.events)){t=(t||"").match(w)||[""],l=t.length;while(l--)if(s=rt.exec(t[l])||[],d=g=s[1],h=(s[2]||"").split(".").sort(),d){p=b.event.special[d]||{},d=(r?p.delegateType:p.bindType)||d,f=c[d]||[],s=s[2]&&RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),u=o=f.length;while(o--)a=f[o],!i&&g!==a.origType||n&&n.guid!==a.guid||s&&!s.test(a.namespace)||r&&r!==a.selector&&("**"!==r||!a.selector)||(f.splice(o,1),a.selector&&f.delegateCount--,p.remove&&p.remove.call(e,a));u&&!f.length&&(p.teardown&&p.teardown.call(e,h,m.handle)!==!1||b.removeEvent(e,d,m.handle),delete c[d])}else for(d in c)b.event.remove(e,d+t[l],n,r,!0);b.isEmptyObject(c)&&(delete m.handle,b._removeData(e,"events"))}},trigger:function(n,r,i,a){var s,u,l,c,p,f,d,h=[i||o],g=y.call(n,"type")?n.type:n,m=y.call(n,"namespace")?n.namespace.split("."):[];if(l=f=i=i||o,3!==i.nodeType&&8!==i.nodeType&&!nt.test(g+b.event.triggered)&&(g.indexOf(".")>=0&&(m=g.split("."),g=m.shift(),m.sort()),u=0>g.indexOf(":")&&"on"+g,n=n[b.expando]?n:new b.Event(g,"object"==typeof n&&n),n.isTrigger=!0,n.namespace=m.join("."),n.namespace_re=n.namespace?RegExp("(^|\\.)"+m.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,n.result=t,n.target||(n.target=i),r=null==r?[n]:b.makeArray(r,[n]),p=b.event.special[g]||{},a||!p.trigger||p.trigger.apply(i,r)!==!1)){if(!a&&!p.noBubble&&!b.isWindow(i)){for(c=p.delegateType||g,nt.test(c+g)||(l=l.parentNode);l;l=l.parentNode)h.push(l),f=l;f===(i.ownerDocument||o)&&h.push(f.defaultView||f.parentWindow||e)}d=0;while((l=h[d++])&&!n.isPropagationStopped())n.type=d>1?c:p.bindType||g,s=(b._data(l,"events")||{})[n.type]&&b._data(l,"handle"),s&&s.apply(l,r),s=u&&l[u],s&&b.acceptData(l)&&s.apply&&s.apply(l,r)===!1&&n.preventDefault();if(n.type=g,!(a||n.isDefaultPrevented()||p._default&&p._default.apply(i.ownerDocument,r)!==!1||"click"===g&&b.nodeName(i,"a")||!b.acceptData(i)||!u||!i[g]||b.isWindow(i))){f=i[u],f&&(i[u]=null),b.event.triggered=g;try{i[g]()}catch(v){}b.event.triggered=t,f&&(i[u]=f)}return n.result}},dispatch:function(e){e=b.event.fix(e);var n,r,i,o,a,s=[],u=h.call(arguments),l=(b._data(this,"events")||{})[e.type]||[],c=b.event.special[e.type]||{};if(u[0]=e,e.delegateTarget=this,!c.preDispatch||c.preDispatch.call(this,e)!==!1){s=b.event.handlers.call(this,e,l),n=0;while((o=s[n++])&&!e.isPropagationStopped()){e.currentTarget=o.elem,a=0;while((i=o.handlers[a++])&&!e.isImmediatePropagationStopped())(!e.namespace_re||e.namespace_re.test(i.namespace))&&(e.handleObj=i,e.data=i.data,r=((b.event.special[i.origType]||{}).handle||i.handler).apply(o.elem,u),r!==t&&(e.result=r)===!1&&(e.preventDefault(),e.stopPropagation()))}return c.postDispatch&&c.postDispatch.call(this,e),e.result}},handlers:function(e,n){var r,i,o,a,s=[],u=n.delegateCount,l=e.target;if(u&&l.nodeType&&(!e.button||"click"!==e.type))for(;l!=this;l=l.parentNode||this)if(1===l.nodeType&&(l.disabled!==!0||"click"!==e.type)){for(o=[],a=0;u>a;a++)i=n[a],r=i.selector+" ",o[r]===t&&(o[r]=i.needsContext?b(r,this).index(l)>=0:b.find(r,this,null,[l]).length),o[r]&&o.push(i);o.length&&s.push({elem:l,handlers:o})}return n.length>u&&s.push({elem:this,handlers:n.slice(u)}),s},fix:function(e){if(e[b.expando])return e;var t,n,r,i=e.type,a=e,s=this.fixHooks[i];s||(this.fixHooks[i]=s=tt.test(i)?this.mouseHooks:et.test(i)?this.keyHooks:{}),r=s.props?this.props.concat(s.props):this.props,e=new b.Event(a),t=r.length;while(t--)n=r[t],e[n]=a[n];return e.target||(e.target=a.srcElement||o),3===e.target.nodeType&&(e.target=e.target.parentNode),e.metaKey=!!e.metaKey,s.filter?s.filter(e,a):e},props:"altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(e,t){return null==e.which&&(e.which=null!=t.charCode?t.charCode:t.keyCode),e}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(e,n){var r,i,a,s=n.button,u=n.fromElement;return null==e.pageX&&null!=n.clientX&&(i=e.target.ownerDocument||o,a=i.documentElement,r=i.body,e.pageX=n.clientX+(a&&a.scrollLeft||r&&r.scrollLeft||0)-(a&&a.clientLeft||r&&r.clientLeft||0),e.pageY=n.clientY+(a&&a.scrollTop||r&&r.scrollTop||0)-(a&&a.clientTop||r&&r.clientTop||0)),!e.relatedTarget&&u&&(e.relatedTarget=u===e.target?n.toElement:u),e.which||s===t||(e.which=1&s?1:2&s?3:4&s?2:0),e}},special:{load:{noBubble:!0},click:{trigger:function(){return b.nodeName(this,"input")&&"checkbox"===this.type&&this.click?(this.click(),!1):t}},focus:{trigger:function(){if(this!==o.activeElement&&this.focus)try{return this.focus(),!1}catch(e){}},delegateType:"focusin"},blur:{trigger:function(){return this===o.activeElement&&this.blur?(this.blur(),!1):t},delegateType:"focusout"},beforeunload:{postDispatch:function(e){e.result!==t&&(e.originalEvent.returnValue=e.result)}}},simulate:function(e,t,n,r){var i=b.extend(new b.Event,n,{type:e,isSimulated:!0,originalEvent:{}});r?b.event.trigger(i,null,t):b.event.dispatch.call(t,i),i.isDefaultPrevented()&&n.preventDefault()}},b.removeEvent=o.removeEventListener?function(e,t,n){e.removeEventListener&&e.removeEventListener(t,n,!1)}:function(e,t,n){var r="on"+t;e.detachEvent&&(typeof e[r]===i&&(e[r]=null),e.detachEvent(r,n))},b.Event=function(e,n){return this instanceof b.Event?(e&&e.type?(this.originalEvent=e,this.type=e.type,this.isDefaultPrevented=e.defaultPrevented||e.returnValue===!1||e.getPreventDefault&&e.getPreventDefault()?it:ot):this.type=e,n&&b.extend(this,n),this.timeStamp=e&&e.timeStamp||b.now(),this[b.expando]=!0,t):new b.Event(e,n)},b.Event.prototype={isDefaultPrevented:ot,isPropagationStopped:ot,isImmediatePropagationStopped:ot,preventDefault:function(){var e=this.originalEvent;this.isDefaultPrevented=it,e&&(e.preventDefault?e.preventDefault():e.returnValue=!1)},stopPropagation:function(){var e=this.originalEvent;this.isPropagationStopped=it,e&&(e.stopPropagation&&e.stopPropagation(),e.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=it,this.stopPropagation()}},b.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(e,t){b.event.special[e]={delegateType:t,bindType:t,handle:function(e){var n,r=this,i=e.relatedTarget,o=e.handleObj;
+return(!i||i!==r&&!b.contains(r,i))&&(e.type=o.origType,n=o.handler.apply(this,arguments),e.type=t),n}}}),b.support.submitBubbles||(b.event.special.submit={setup:function(){return b.nodeName(this,"form")?!1:(b.event.add(this,"click._submit keypress._submit",function(e){var n=e.target,r=b.nodeName(n,"input")||b.nodeName(n,"button")?n.form:t;r&&!b._data(r,"submitBubbles")&&(b.event.add(r,"submit._submit",function(e){e._submit_bubble=!0}),b._data(r,"submitBubbles",!0))}),t)},postDispatch:function(e){e._submit_bubble&&(delete e._submit_bubble,this.parentNode&&!e.isTrigger&&b.event.simulate("submit",this.parentNode,e,!0))},teardown:function(){return b.nodeName(this,"form")?!1:(b.event.remove(this,"._submit"),t)}}),b.support.changeBubbles||(b.event.special.change={setup:function(){return Z.test(this.nodeName)?(("checkbox"===this.type||"radio"===this.type)&&(b.event.add(this,"propertychange._change",function(e){"checked"===e.originalEvent.propertyName&&(this._just_changed=!0)}),b.event.add(this,"click._change",function(e){this._just_changed&&!e.isTrigger&&(this._just_changed=!1),b.event.simulate("change",this,e,!0)})),!1):(b.event.add(this,"beforeactivate._change",function(e){var t=e.target;Z.test(t.nodeName)&&!b._data(t,"changeBubbles")&&(b.event.add(t,"change._change",function(e){!this.parentNode||e.isSimulated||e.isTrigger||b.event.simulate("change",this.parentNode,e,!0)}),b._data(t,"changeBubbles",!0))}),t)},handle:function(e){var n=e.target;return this!==n||e.isSimulated||e.isTrigger||"radio"!==n.type&&"checkbox"!==n.type?e.handleObj.handler.apply(this,arguments):t},teardown:function(){return b.event.remove(this,"._change"),!Z.test(this.nodeName)}}),b.support.focusinBubbles||b.each({focus:"focusin",blur:"focusout"},function(e,t){var n=0,r=function(e){b.event.simulate(t,e.target,b.event.fix(e),!0)};b.event.special[t]={setup:function(){0===n++&&o.addEventListener(e,r,!0)},teardown:function(){0===--n&&o.removeEventListener(e,r,!0)}}}),b.fn.extend({on:function(e,n,r,i,o){var a,s;if("object"==typeof e){"string"!=typeof n&&(r=r||n,n=t);for(a in e)this.on(a,n,r,e[a],o);return this}if(null==r&&null==i?(i=n,r=n=t):null==i&&("string"==typeof n?(i=r,r=t):(i=r,r=n,n=t)),i===!1)i=ot;else if(!i)return this;return 1===o&&(s=i,i=function(e){return b().off(e),s.apply(this,arguments)},i.guid=s.guid||(s.guid=b.guid++)),this.each(function(){b.event.add(this,e,i,r,n)})},one:function(e,t,n,r){return this.on(e,t,n,r,1)},off:function(e,n,r){var i,o;if(e&&e.preventDefault&&e.handleObj)return i=e.handleObj,b(e.delegateTarget).off(i.namespace?i.origType+"."+i.namespace:i.origType,i.selector,i.handler),this;if("object"==typeof e){for(o in e)this.off(o,n,e[o]);return this}return(n===!1||"function"==typeof n)&&(r=n,n=t),r===!1&&(r=ot),this.each(function(){b.event.remove(this,e,r,n)})},bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},trigger:function(e,t){return this.each(function(){b.event.trigger(e,t,this)})},triggerHandler:function(e,n){var r=this[0];return r?b.event.trigger(e,n,r,!0):t}}),function(e,t){var n,r,i,o,a,s,u,l,c,p,f,d,h,g,m,y,v,x="sizzle"+-new Date,w=e.document,T={},N=0,C=0,k=it(),E=it(),S=it(),A=typeof t,j=1<<31,D=[],L=D.pop,H=D.push,q=D.slice,M=D.indexOf||function(e){var t=0,n=this.length;for(;n>t;t++)if(this[t]===e)return t;return-1},_="[\\x20\\t\\r\\n\\f]",F="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",O=F.replace("w","w#"),B="([*^$|!~]?=)",P="\\["+_+"*("+F+")"+_+"*(?:"+B+_+"*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|("+O+")|)|)"+_+"*\\]",R=":("+F+")(?:\\(((['\"])((?:\\\\.|[^\\\\])*?)\\3|((?:\\\\.|[^\\\\()[\\]]|"+P.replace(3,8)+")*)|.*)\\)|)",W=RegExp("^"+_+"+|((?:^|[^\\\\])(?:\\\\.)*)"+_+"+$","g"),$=RegExp("^"+_+"*,"+_+"*"),I=RegExp("^"+_+"*([\\x20\\t\\r\\n\\f>+~])"+_+"*"),z=RegExp(R),X=RegExp("^"+O+"$"),U={ID:RegExp("^#("+F+")"),CLASS:RegExp("^\\.("+F+")"),NAME:RegExp("^\\[name=['\"]?("+F+")['\"]?\\]"),TAG:RegExp("^("+F.replace("w","w*")+")"),ATTR:RegExp("^"+P),PSEUDO:RegExp("^"+R),CHILD:RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+_+"*(even|odd|(([+-]|)(\\d*)n|)"+_+"*(?:([+-]|)"+_+"*(\\d+)|))"+_+"*\\)|)","i"),needsContext:RegExp("^"+_+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+_+"*((?:-\\d)?\\d*)"+_+"*\\)|)(?=[^-]|$)","i")},V=/[\x20\t\r\n\f]*[+~]/,Y=/^[^{]+\{\s*\[native code/,J=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,G=/^(?:input|select|textarea|button)$/i,Q=/^h\d$/i,K=/'|\\/g,Z=/\=[\x20\t\r\n\f]*([^'"\]]*)[\x20\t\r\n\f]*\]/g,et=/\\([\da-fA-F]{1,6}[\x20\t\r\n\f]?|.)/g,tt=function(e,t){var n="0x"+t-65536;return n!==n?t:0>n?String.fromCharCode(n+65536):String.fromCharCode(55296|n>>10,56320|1023&n)};try{q.call(w.documentElement.childNodes,0)[0].nodeType}catch(nt){q=function(e){var t,n=[];while(t=this[e++])n.push(t);return n}}function rt(e){return Y.test(e+"")}function it(){var e,t=[];return e=function(n,r){return t.push(n+=" ")>i.cacheLength&&delete e[t.shift()],e[n]=r}}function ot(e){return e[x]=!0,e}function at(e){var t=p.createElement("div");try{return e(t)}catch(n){return!1}finally{t=null}}function st(e,t,n,r){var i,o,a,s,u,l,f,g,m,v;if((t?t.ownerDocument||t:w)!==p&&c(t),t=t||p,n=n||[],!e||"string"!=typeof e)return n;if(1!==(s=t.nodeType)&&9!==s)return[];if(!d&&!r){if(i=J.exec(e))if(a=i[1]){if(9===s){if(o=t.getElementById(a),!o||!o.parentNode)return n;if(o.id===a)return n.push(o),n}else if(t.ownerDocument&&(o=t.ownerDocument.getElementById(a))&&y(t,o)&&o.id===a)return n.push(o),n}else{if(i[2])return H.apply(n,q.call(t.getElementsByTagName(e),0)),n;if((a=i[3])&&T.getByClassName&&t.getElementsByClassName)return H.apply(n,q.call(t.getElementsByClassName(a),0)),n}if(T.qsa&&!h.test(e)){if(f=!0,g=x,m=t,v=9===s&&e,1===s&&"object"!==t.nodeName.toLowerCase()){l=ft(e),(f=t.getAttribute("id"))?g=f.replace(K,"\\$&"):t.setAttribute("id",g),g="[id='"+g+"'] ",u=l.length;while(u--)l[u]=g+dt(l[u]);m=V.test(e)&&t.parentNode||t,v=l.join(",")}if(v)try{return H.apply(n,q.call(m.querySelectorAll(v),0)),n}catch(b){}finally{f||t.removeAttribute("id")}}}return wt(e.replace(W,"$1"),t,n,r)}a=st.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return t?"HTML"!==t.nodeName:!1},c=st.setDocument=function(e){var n=e?e.ownerDocument||e:w;return n!==p&&9===n.nodeType&&n.documentElement?(p=n,f=n.documentElement,d=a(n),T.tagNameNoComments=at(function(e){return e.appendChild(n.createComment("")),!e.getElementsByTagName("*").length}),T.attributes=at(function(e){e.innerHTML="<select></select>";var t=typeof e.lastChild.getAttribute("multiple");return"boolean"!==t&&"string"!==t}),T.getByClassName=at(function(e){return e.innerHTML="<div class='hidden e'></div><div class='hidden'></div>",e.getElementsByClassName&&e.getElementsByClassName("e").length?(e.lastChild.className="e",2===e.getElementsByClassName("e").length):!1}),T.getByName=at(function(e){e.id=x+0,e.innerHTML="<a name='"+x+"'></a><div name='"+x+"'></div>",f.insertBefore(e,f.firstChild);var t=n.getElementsByName&&n.getElementsByName(x).length===2+n.getElementsByName(x+0).length;return T.getIdNotName=!n.getElementById(x),f.removeChild(e),t}),i.attrHandle=at(function(e){return e.innerHTML="<a href='#'></a>",e.firstChild&&typeof e.firstChild.getAttribute!==A&&"#"===e.firstChild.getAttribute("href")})?{}:{href:function(e){return e.getAttribute("href",2)},type:function(e){return e.getAttribute("type")}},T.getIdNotName?(i.find.ID=function(e,t){if(typeof t.getElementById!==A&&!d){var n=t.getElementById(e);return n&&n.parentNode?[n]:[]}},i.filter.ID=function(e){var t=e.replace(et,tt);return function(e){return e.getAttribute("id")===t}}):(i.find.ID=function(e,n){if(typeof n.getElementById!==A&&!d){var r=n.getElementById(e);return r?r.id===e||typeof r.getAttributeNode!==A&&r.getAttributeNode("id").value===e?[r]:t:[]}},i.filter.ID=function(e){var t=e.replace(et,tt);return function(e){var n=typeof e.getAttributeNode!==A&&e.getAttributeNode("id");return n&&n.value===t}}),i.find.TAG=T.tagNameNoComments?function(e,n){return typeof n.getElementsByTagName!==A?n.getElementsByTagName(e):t}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},i.find.NAME=T.getByName&&function(e,n){return typeof n.getElementsByName!==A?n.getElementsByName(name):t},i.find.CLASS=T.getByClassName&&function(e,n){return typeof n.getElementsByClassName===A||d?t:n.getElementsByClassName(e)},g=[],h=[":focus"],(T.qsa=rt(n.querySelectorAll))&&(at(function(e){e.innerHTML="<select><option selected=''></option></select>",e.querySelectorAll("[selected]").length||h.push("\\["+_+"*(?:checked|disabled|ismap|multiple|readonly|selected|value)"),e.querySelectorAll(":checked").length||h.push(":checked")}),at(function(e){e.innerHTML="<input type='hidden' i=''/>",e.querySelectorAll("[i^='']").length&&h.push("[*^$]="+_+"*(?:\"\"|'')"),e.querySelectorAll(":enabled").length||h.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),h.push(",.*:")})),(T.matchesSelector=rt(m=f.matchesSelector||f.mozMatchesSelector||f.webkitMatchesSelector||f.oMatchesSelector||f.msMatchesSelector))&&at(function(e){T.disconnectedMatch=m.call(e,"div"),m.call(e,"[s!='']:x"),g.push("!=",R)}),h=RegExp(h.join("|")),g=RegExp(g.join("|")),y=rt(f.contains)||f.compareDocumentPosition?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},v=f.compareDocumentPosition?function(e,t){var r;return e===t?(u=!0,0):(r=t.compareDocumentPosition&&e.compareDocumentPosition&&e.compareDocumentPosition(t))?1&r||e.parentNode&&11===e.parentNode.nodeType?e===n||y(w,e)?-1:t===n||y(w,t)?1:0:4&r?-1:1:e.compareDocumentPosition?-1:1}:function(e,t){var r,i=0,o=e.parentNode,a=t.parentNode,s=[e],l=[t];if(e===t)return u=!0,0;if(!o||!a)return e===n?-1:t===n?1:o?-1:a?1:0;if(o===a)return ut(e,t);r=e;while(r=r.parentNode)s.unshift(r);r=t;while(r=r.parentNode)l.unshift(r);while(s[i]===l[i])i++;return i?ut(s[i],l[i]):s[i]===w?-1:l[i]===w?1:0},u=!1,[0,0].sort(v),T.detectDuplicates=u,p):p},st.matches=function(e,t){return st(e,null,null,t)},st.matchesSelector=function(e,t){if((e.ownerDocument||e)!==p&&c(e),t=t.replace(Z,"='$1']"),!(!T.matchesSelector||d||g&&g.test(t)||h.test(t)))try{var n=m.call(e,t);if(n||T.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(r){}return st(t,p,null,[e]).length>0},st.contains=function(e,t){return(e.ownerDocument||e)!==p&&c(e),y(e,t)},st.attr=function(e,t){var n;return(e.ownerDocument||e)!==p&&c(e),d||(t=t.toLowerCase()),(n=i.attrHandle[t])?n(e):d||T.attributes?e.getAttribute(t):((n=e.getAttributeNode(t))||e.getAttribute(t))&&e[t]===!0?t:n&&n.specified?n.value:null},st.error=function(e){throw Error("Syntax error, unrecognized expression: "+e)},st.uniqueSort=function(e){var t,n=[],r=1,i=0;if(u=!T.detectDuplicates,e.sort(v),u){for(;t=e[r];r++)t===e[r-1]&&(i=n.push(r));while(i--)e.splice(n[i],1)}return e};function ut(e,t){var n=t&&e,r=n&&(~t.sourceIndex||j)-(~e.sourceIndex||j);if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function lt(e){return function(t){var n=t.nodeName.toLowerCase();return"input"===n&&t.type===e}}function ct(e){return function(t){var n=t.nodeName.toLowerCase();return("input"===n||"button"===n)&&t.type===e}}function pt(e){return ot(function(t){return t=+t,ot(function(n,r){var i,o=e([],n.length,t),a=o.length;while(a--)n[i=o[a]]&&(n[i]=!(r[i]=n[i]))})})}o=st.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=o(e)}else if(3===i||4===i)return e.nodeValue}else for(;t=e[r];r++)n+=o(t);return n},i=st.selectors={cacheLength:50,createPseudo:ot,match:U,find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(et,tt),e[3]=(e[4]||e[5]||"").replace(et,tt),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||st.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&st.error(e[0]),e},PSEUDO:function(e){var t,n=!e[5]&&e[2];return U.CHILD.test(e[0])?null:(e[4]?e[2]=e[4]:n&&z.test(n)&&(t=ft(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){return"*"===e?function(){return!0}:(e=e.replace(et,tt).toLowerCase(),function(t){return t.nodeName&&t.nodeName.toLowerCase()===e})},CLASS:function(e){var t=k[e+" "];return t||(t=RegExp("(^|"+_+")"+e+"("+_+"|$)"))&&k(e,function(e){return t.test(e.className||typeof e.getAttribute!==A&&e.getAttribute("class")||"")})},ATTR:function(e,t,n){return function(r){var i=st.attr(r,e);return null==i?"!="===t:t?(i+="","="===t?i===n:"!="===t?i!==n:"^="===t?n&&0===i.indexOf(n):"*="===t?n&&i.indexOf(n)>-1:"$="===t?n&&i.slice(-n.length)===n:"~="===t?(" "+i+" ").indexOf(n)>-1:"|="===t?i===n||i.slice(0,n.length+1)===n+"-":!1):!0}},CHILD:function(e,t,n,r,i){var o="nth"!==e.slice(0,3),a="last"!==e.slice(-4),s="of-type"===t;return 1===r&&0===i?function(e){return!!e.parentNode}:function(t,n,u){var l,c,p,f,d,h,g=o!==a?"nextSibling":"previousSibling",m=t.parentNode,y=s&&t.nodeName.toLowerCase(),v=!u&&!s;if(m){if(o){while(g){p=t;while(p=p[g])if(s?p.nodeName.toLowerCase()===y:1===p.nodeType)return!1;h=g="only"===e&&!h&&"nextSibling"}return!0}if(h=[a?m.firstChild:m.lastChild],a&&v){c=m[x]||(m[x]={}),l=c[e]||[],d=l[0]===N&&l[1],f=l[0]===N&&l[2],p=d&&m.childNodes[d];while(p=++d&&p&&p[g]||(f=d=0)||h.pop())if(1===p.nodeType&&++f&&p===t){c[e]=[N,d,f];break}}else if(v&&(l=(t[x]||(t[x]={}))[e])&&l[0]===N)f=l[1];else while(p=++d&&p&&p[g]||(f=d=0)||h.pop())if((s?p.nodeName.toLowerCase()===y:1===p.nodeType)&&++f&&(v&&((p[x]||(p[x]={}))[e]=[N,f]),p===t))break;return f-=i,f===r||0===f%r&&f/r>=0}}},PSEUDO:function(e,t){var n,r=i.pseudos[e]||i.setFilters[e.toLowerCase()]||st.error("unsupported pseudo: "+e);return r[x]?r(t):r.length>1?(n=[e,e,"",t],i.setFilters.hasOwnProperty(e.toLowerCase())?ot(function(e,n){var i,o=r(e,t),a=o.length;while(a--)i=M.call(e,o[a]),e[i]=!(n[i]=o[a])}):function(e){return r(e,0,n)}):r}},pseudos:{not:ot(function(e){var t=[],n=[],r=s(e.replace(W,"$1"));return r[x]?ot(function(e,t,n,i){var o,a=r(e,null,i,[]),s=e.length;while(s--)(o=a[s])&&(e[s]=!(t[s]=o))}):function(e,i,o){return t[0]=e,r(t,null,o,n),!n.pop()}}),has:ot(function(e){return function(t){return st(e,t).length>0}}),contains:ot(function(e){return function(t){return(t.textContent||t.innerText||o(t)).indexOf(e)>-1}}),lang:ot(function(e){return X.test(e||"")||st.error("unsupported lang: "+e),e=e.replace(et,tt).toLowerCase(),function(t){var n;do if(n=d?t.getAttribute("xml:lang")||t.getAttribute("lang"):t.lang)return n=n.toLowerCase(),n===e||0===n.indexOf(e+"-");while((t=t.parentNode)&&1===t.nodeType);return!1}}),target:function(t){var n=e.location&&e.location.hash;return n&&n.slice(1)===t.id},root:function(e){return e===f},focus:function(e){return e===p.activeElement&&(!p.hasFocus||p.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:function(e){return e.disabled===!1},disabled:function(e){return e.disabled===!0},checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,e.selected===!0},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeName>"@"||3===e.nodeType||4===e.nodeType)return!1;return!0},parent:function(e){return!i.pseudos.empty(e)},header:function(e){return Q.test(e.nodeName)},input:function(e){return G.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||t.toLowerCase()===e.type)},first:pt(function(){return[0]}),last:pt(function(e,t){return[t-1]}),eq:pt(function(e,t,n){return[0>n?n+t:n]}),even:pt(function(e,t){var n=0;for(;t>n;n+=2)e.push(n);return e}),odd:pt(function(e,t){var n=1;for(;t>n;n+=2)e.push(n);return e}),lt:pt(function(e,t,n){var r=0>n?n+t:n;for(;--r>=0;)e.push(r);return e}),gt:pt(function(e,t,n){var r=0>n?n+t:n;for(;t>++r;)e.push(r);return e})}};for(n in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})i.pseudos[n]=lt(n);for(n in{submit:!0,reset:!0})i.pseudos[n]=ct(n);function ft(e,t){var n,r,o,a,s,u,l,c=E[e+" "];if(c)return t?0:c.slice(0);s=e,u=[],l=i.preFilter;while(s){(!n||(r=$.exec(s)))&&(r&&(s=s.slice(r[0].length)||s),u.push(o=[])),n=!1,(r=I.exec(s))&&(n=r.shift(),o.push({value:n,type:r[0].replace(W," ")}),s=s.slice(n.length));for(a in i.filter)!(r=U[a].exec(s))||l[a]&&!(r=l[a](r))||(n=r.shift(),o.push({value:n,type:a,matches:r}),s=s.slice(n.length));if(!n)break}return t?s.length:s?st.error(e):E(e,u).slice(0)}function dt(e){var t=0,n=e.length,r="";for(;n>t;t++)r+=e[t].value;return r}function ht(e,t,n){var i=t.dir,o=n&&"parentNode"===i,a=C++;return t.first?function(t,n,r){while(t=t[i])if(1===t.nodeType||o)return e(t,n,r)}:function(t,n,s){var u,l,c,p=N+" "+a;if(s){while(t=t[i])if((1===t.nodeType||o)&&e(t,n,s))return!0}else while(t=t[i])if(1===t.nodeType||o)if(c=t[x]||(t[x]={}),(l=c[i])&&l[0]===p){if((u=l[1])===!0||u===r)return u===!0}else if(l=c[i]=[p],l[1]=e(t,n,s)||r,l[1]===!0)return!0}}function gt(e){return e.length>1?function(t,n,r){var i=e.length;while(i--)if(!e[i](t,n,r))return!1;return!0}:e[0]}function mt(e,t,n,r,i){var o,a=[],s=0,u=e.length,l=null!=t;for(;u>s;s++)(o=e[s])&&(!n||n(o,r,i))&&(a.push(o),l&&t.push(s));return a}function yt(e,t,n,r,i,o){return r&&!r[x]&&(r=yt(r)),i&&!i[x]&&(i=yt(i,o)),ot(function(o,a,s,u){var l,c,p,f=[],d=[],h=a.length,g=o||xt(t||"*",s.nodeType?[s]:s,[]),m=!e||!o&&t?g:mt(g,f,e,s,u),y=n?i||(o?e:h||r)?[]:a:m;if(n&&n(m,y,s,u),r){l=mt(y,d),r(l,[],s,u),c=l.length;while(c--)(p=l[c])&&(y[d[c]]=!(m[d[c]]=p))}if(o){if(i||e){if(i){l=[],c=y.length;while(c--)(p=y[c])&&l.push(m[c]=p);i(null,y=[],l,u)}c=y.length;while(c--)(p=y[c])&&(l=i?M.call(o,p):f[c])>-1&&(o[l]=!(a[l]=p))}}else y=mt(y===a?y.splice(h,y.length):y),i?i(null,a,y,u):H.apply(a,y)})}function vt(e){var t,n,r,o=e.length,a=i.relative[e[0].type],s=a||i.relative[" "],u=a?1:0,c=ht(function(e){return e===t},s,!0),p=ht(function(e){return M.call(t,e)>-1},s,!0),f=[function(e,n,r){return!a&&(r||n!==l)||((t=n).nodeType?c(e,n,r):p(e,n,r))}];for(;o>u;u++)if(n=i.relative[e[u].type])f=[ht(gt(f),n)];else{if(n=i.filter[e[u].type].apply(null,e[u].matches),n[x]){for(r=++u;o>r;r++)if(i.relative[e[r].type])break;return yt(u>1&&gt(f),u>1&&dt(e.slice(0,u-1)).replace(W,"$1"),n,r>u&&vt(e.slice(u,r)),o>r&&vt(e=e.slice(r)),o>r&&dt(e))}f.push(n)}return gt(f)}function bt(e,t){var n=0,o=t.length>0,a=e.length>0,s=function(s,u,c,f,d){var h,g,m,y=[],v=0,b="0",x=s&&[],w=null!=d,T=l,C=s||a&&i.find.TAG("*",d&&u.parentNode||u),k=N+=null==T?1:Math.random()||.1;for(w&&(l=u!==p&&u,r=n);null!=(h=C[b]);b++){if(a&&h){g=0;while(m=e[g++])if(m(h,u,c)){f.push(h);break}w&&(N=k,r=++n)}o&&((h=!m&&h)&&v--,s&&x.push(h))}if(v+=b,o&&b!==v){g=0;while(m=t[g++])m(x,y,u,c);if(s){if(v>0)while(b--)x[b]||y[b]||(y[b]=L.call(f));y=mt(y)}H.apply(f,y),w&&!s&&y.length>0&&v+t.length>1&&st.uniqueSort(f)}return w&&(N=k,l=T),x};return o?ot(s):s}s=st.compile=function(e,t){var n,r=[],i=[],o=S[e+" "];if(!o){t||(t=ft(e)),n=t.length;while(n--)o=vt(t[n]),o[x]?r.push(o):i.push(o);o=S(e,bt(i,r))}return o};function xt(e,t,n){var r=0,i=t.length;for(;i>r;r++)st(e,t[r],n);return n}function wt(e,t,n,r){var o,a,u,l,c,p=ft(e);if(!r&&1===p.length){if(a=p[0]=p[0].slice(0),a.length>2&&"ID"===(u=a[0]).type&&9===t.nodeType&&!d&&i.relative[a[1].type]){if(t=i.find.ID(u.matches[0].replace(et,tt),t)[0],!t)return n;e=e.slice(a.shift().value.length)}o=U.needsContext.test(e)?0:a.length;while(o--){if(u=a[o],i.relative[l=u.type])break;if((c=i.find[l])&&(r=c(u.matches[0].replace(et,tt),V.test(a[0].type)&&t.parentNode||t))){if(a.splice(o,1),e=r.length&&dt(a),!e)return H.apply(n,q.call(r,0)),n;break}}}return s(e,p)(r,t,d,n,V.test(e)),n}i.pseudos.nth=i.pseudos.eq;function Tt(){}i.filters=Tt.prototype=i.pseudos,i.setFilters=new Tt,c(),st.attr=b.attr,b.find=st,b.expr=st.selectors,b.expr[":"]=b.expr.pseudos,b.unique=st.uniqueSort,b.text=st.getText,b.isXMLDoc=st.isXML,b.contains=st.contains}(e);var at=/Until$/,st=/^(?:parents|prev(?:Until|All))/,ut=/^.[^:#\[\.,]*$/,lt=b.expr.match.needsContext,ct={children:!0,contents:!0,next:!0,prev:!0};b.fn.extend({find:function(e){var t,n,r,i=this.length;if("string"!=typeof e)return r=this,this.pushStack(b(e).filter(function(){for(t=0;i>t;t++)if(b.contains(r[t],this))return!0}));for(n=[],t=0;i>t;t++)b.find(e,this[t],n);return n=this.pushStack(i>1?b.unique(n):n),n.selector=(this.selector?this.selector+" ":"")+e,n},has:function(e){var t,n=b(e,this),r=n.length;return this.filter(function(){for(t=0;r>t;t++)if(b.contains(this,n[t]))return!0})},not:function(e){return this.pushStack(ft(this,e,!1))},filter:function(e){return this.pushStack(ft(this,e,!0))},is:function(e){return!!e&&("string"==typeof e?lt.test(e)?b(e,this.context).index(this[0])>=0:b.filter(e,this).length>0:this.filter(e).length>0)},closest:function(e,t){var n,r=0,i=this.length,o=[],a=lt.test(e)||"string"!=typeof e?b(e,t||this.context):0;for(;i>r;r++){n=this[r];while(n&&n.ownerDocument&&n!==t&&11!==n.nodeType){if(a?a.index(n)>-1:b.find.matchesSelector(n,e)){o.push(n);break}n=n.parentNode}}return this.pushStack(o.length>1?b.unique(o):o)},index:function(e){return e?"string"==typeof e?b.inArray(this[0],b(e)):b.inArray(e.jquery?e[0]:e,this):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){var n="string"==typeof e?b(e,t):b.makeArray(e&&e.nodeType?[e]:e),r=b.merge(this.get(),n);return this.pushStack(b.unique(r))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}}),b.fn.andSelf=b.fn.addBack;function pt(e,t){do e=e[t];while(e&&1!==e.nodeType);return e}b.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return b.dir(e,"parentNode")},parentsUntil:function(e,t,n){return b.dir(e,"parentNode",n)},next:function(e){return pt(e,"nextSibling")},prev:function(e){return pt(e,"previousSibling")},nextAll:function(e){return b.dir(e,"nextSibling")},prevAll:function(e){return b.dir(e,"previousSibling")},nextUntil:function(e,t,n){return b.dir(e,"nextSibling",n)},prevUntil:function(e,t,n){return b.dir(e,"previousSibling",n)},siblings:function(e){return b.sibling((e.parentNode||{}).firstChild,e)},children:function(e){return b.sibling(e.firstChild)},contents:function(e){return b.nodeName(e,"iframe")?e.contentDocument||e.contentWindow.document:b.merge([],e.childNodes)}},function(e,t){b.fn[e]=function(n,r){var i=b.map(this,t,n);return at.test(e)||(r=n),r&&"string"==typeof r&&(i=b.filter(r,i)),i=this.length>1&&!ct[e]?b.unique(i):i,this.length>1&&st.test(e)&&(i=i.reverse()),this.pushStack(i)}}),b.extend({filter:function(e,t,n){return n&&(e=":not("+e+")"),1===t.length?b.find.matchesSelector(t[0],e)?[t[0]]:[]:b.find.matches(e,t)},dir:function(e,n,r){var i=[],o=e[n];while(o&&9!==o.nodeType&&(r===t||1!==o.nodeType||!b(o).is(r)))1===o.nodeType&&i.push(o),o=o[n];return i},sibling:function(e,t){var n=[];for(;e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n}});function ft(e,t,n){if(t=t||0,b.isFunction(t))return b.grep(e,function(e,r){var i=!!t.call(e,r,e);return i===n});if(t.nodeType)return b.grep(e,function(e){return e===t===n});if("string"==typeof t){var r=b.grep(e,function(e){return 1===e.nodeType});if(ut.test(t))return b.filter(t,r,!n);t=b.filter(t,r)}return b.grep(e,function(e){return b.inArray(e,t)>=0===n})}function dt(e){var t=ht.split("|"),n=e.createDocumentFragment();if(n.createElement)while(t.length)n.createElement(t.pop());return n}var ht="abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",gt=/ jQuery\d+="(?:null|\d+)"/g,mt=RegExp("<(?:"+ht+")[\\s/>]","i"),yt=/^\s+/,vt=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,bt=/<([\w:]+)/,xt=/<tbody/i,wt=/<|&#?\w+;/,Tt=/<(?:script|style|link)/i,Nt=/^(?:checkbox|radio)$/i,Ct=/checked\s*(?:[^=]|=\s*.checked.)/i,kt=/^$|\/(?:java|ecma)script/i,Et=/^true\/(.*)/,St=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g,At={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],area:[1,"<map>","</map>"],param:[1,"<object>","</object>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:b.support.htmlSerialize?[0,"",""]:[1,"X<div>","</div>"]},jt=dt(o),Dt=jt.appendChild(o.createElement("div"));At.optgroup=At.option,At.tbody=At.tfoot=At.colgroup=At.caption=At.thead,At.th=At.td,b.fn.extend({text:function(e){return b.access(this,function(e){return e===t?b.text(this):this.empty().append((this[0]&&this[0].ownerDocument||o).createTextNode(e))},null,e,arguments.length)},wrapAll:function(e){if(b.isFunction(e))return this.each(function(t){b(this).wrapAll(e.call(this,t))});if(this[0]){var t=b(e,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstChild&&1===e.firstChild.nodeType)e=e.firstChild;return e}).append(this)}return this},wrapInner:function(e){return b.isFunction(e)?this.each(function(t){b(this).wrapInner(e.call(this,t))}):this.each(function(){var t=b(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=b.isFunction(e);return this.each(function(n){b(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(){return this.parent().each(function(){b.nodeName(this,"body")||b(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(e){(1===this.nodeType||11===this.nodeType||9===this.nodeType)&&this.appendChild(e)})},prepend:function(){return this.domManip(arguments,!0,function(e){(1===this.nodeType||11===this.nodeType||9===this.nodeType)&&this.insertBefore(e,this.firstChild)})},before:function(){return this.domManip(arguments,!1,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return this.domManip(arguments,!1,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},remove:function(e,t){var n,r=0;for(;null!=(n=this[r]);r++)(!e||b.filter(e,[n]).length>0)&&(t||1!==n.nodeType||b.cleanData(Ot(n)),n.parentNode&&(t&&b.contains(n.ownerDocument,n)&&Mt(Ot(n,"script")),n.parentNode.removeChild(n)));return this},empty:function(){var e,t=0;for(;null!=(e=this[t]);t++){1===e.nodeType&&b.cleanData(Ot(e,!1));while(e.firstChild)e.removeChild(e.firstChild);e.options&&b.nodeName(e,"select")&&(e.options.length=0)}return this},clone:function(e,t){return e=null==e?!1:e,t=null==t?e:t,this.map(function(){return b.clone(this,e,t)})},html:function(e){return b.access(this,function(e){var n=this[0]||{},r=0,i=this.length;if(e===t)return 1===n.nodeType?n.innerHTML.replace(gt,""):t;if(!("string"!=typeof e||Tt.test(e)||!b.support.htmlSerialize&&mt.test(e)||!b.support.leadingWhitespace&&yt.test(e)||At[(bt.exec(e)||["",""])[1].toLowerCase()])){e=e.replace(vt,"<$1></$2>");try{for(;i>r;r++)n=this[r]||{},1===n.nodeType&&(b.cleanData(Ot(n,!1)),n.innerHTML=e);n=0}catch(o){}}n&&this.empty().append(e)},null,e,arguments.length)},replaceWith:function(e){var t=b.isFunction(e);return t||"string"==typeof e||(e=b(e).not(this).detach()),this.domManip([e],!0,function(e){var t=this.nextSibling,n=this.parentNode;n&&(b(this).remove(),n.insertBefore(e,t))})},detach:function(e){return this.remove(e,!0)},domManip:function(e,n,r){e=f.apply([],e);var i,o,a,s,u,l,c=0,p=this.length,d=this,h=p-1,g=e[0],m=b.isFunction(g);if(m||!(1>=p||"string"!=typeof g||b.support.checkClone)&&Ct.test(g))return this.each(function(i){var o=d.eq(i);m&&(e[0]=g.call(this,i,n?o.html():t)),o.domManip(e,n,r)});if(p&&(l=b.buildFragment(e,this[0].ownerDocument,!1,this),i=l.firstChild,1===l.childNodes.length&&(l=i),i)){for(n=n&&b.nodeName(i,"tr"),s=b.map(Ot(l,"script"),Ht),a=s.length;p>c;c++)o=l,c!==h&&(o=b.clone(o,!0,!0),a&&b.merge(s,Ot(o,"script"))),r.call(n&&b.nodeName(this[c],"table")?Lt(this[c],"tbody"):this[c],o,c);if(a)for(u=s[s.length-1].ownerDocument,b.map(s,qt),c=0;a>c;c++)o=s[c],kt.test(o.type||"")&&!b._data(o,"globalEval")&&b.contains(u,o)&&(o.src?b.ajax({url:o.src,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0}):b.globalEval((o.text||o.textContent||o.innerHTML||"").replace(St,"")));l=i=null}return this}});function Lt(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function Ht(e){var t=e.getAttributeNode("type");return e.type=(t&&t.specified)+"/"+e.type,e}function qt(e){var t=Et.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function Mt(e,t){var n,r=0;for(;null!=(n=e[r]);r++)b._data(n,"globalEval",!t||b._data(t[r],"globalEval"))}function _t(e,t){if(1===t.nodeType&&b.hasData(e)){var n,r,i,o=b._data(e),a=b._data(t,o),s=o.events;if(s){delete a.handle,a.events={};for(n in s)for(r=0,i=s[n].length;i>r;r++)b.event.add(t,n,s[n][r])}a.data&&(a.data=b.extend({},a.data))}}function Ft(e,t){var n,r,i;if(1===t.nodeType){if(n=t.nodeName.toLowerCase(),!b.support.noCloneEvent&&t[b.expando]){i=b._data(t);for(r in i.events)b.removeEvent(t,r,i.handle);t.removeAttribute(b.expando)}"script"===n&&t.text!==e.text?(Ht(t).text=e.text,qt(t)):"object"===n?(t.parentNode&&(t.outerHTML=e.outerHTML),b.support.html5Clone&&e.innerHTML&&!b.trim(t.innerHTML)&&(t.innerHTML=e.innerHTML)):"input"===n&&Nt.test(e.type)?(t.defaultChecked=t.checked=e.checked,t.value!==e.value&&(t.value=e.value)):"option"===n?t.defaultSelected=t.selected=e.defaultSelected:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}}b.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(e,t){b.fn[e]=function(e){var n,r=0,i=[],o=b(e),a=o.length-1;for(;a>=r;r++)n=r===a?this:this.clone(!0),b(o[r])[t](n),d.apply(i,n.get());return this.pushStack(i)}});function Ot(e,n){var r,o,a=0,s=typeof e.getElementsByTagName!==i?e.getElementsByTagName(n||"*"):typeof e.querySelectorAll!==i?e.querySelectorAll(n||"*"):t;if(!s)for(s=[],r=e.childNodes||e;null!=(o=r[a]);a++)!n||b.nodeName(o,n)?s.push(o):b.merge(s,Ot(o,n));return n===t||n&&b.nodeName(e,n)?b.merge([e],s):s}function Bt(e){Nt.test(e.type)&&(e.defaultChecked=e.checked)}b.extend({clone:function(e,t,n){var r,i,o,a,s,u=b.contains(e.ownerDocument,e);if(b.support.html5Clone||b.isXMLDoc(e)||!mt.test("<"+e.nodeName+">")?o=e.cloneNode(!0):(Dt.innerHTML=e.outerHTML,Dt.removeChild(o=Dt.firstChild)),!(b.support.noCloneEvent&&b.support.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||b.isXMLDoc(e)))for(r=Ot(o),s=Ot(e),a=0;null!=(i=s[a]);++a)r[a]&&Ft(i,r[a]);if(t)if(n)for(s=s||Ot(e),r=r||Ot(o),a=0;null!=(i=s[a]);a++)_t(i,r[a]);else _t(e,o);return r=Ot(o,"script"),r.length>0&&Mt(r,!u&&Ot(e,"script")),r=s=i=null,o},buildFragment:function(e,t,n,r){var i,o,a,s,u,l,c,p=e.length,f=dt(t),d=[],h=0;for(;p>h;h++)if(o=e[h],o||0===o)if("object"===b.type(o))b.merge(d,o.nodeType?[o]:o);else if(wt.test(o)){s=s||f.appendChild(t.createElement("div")),u=(bt.exec(o)||["",""])[1].toLowerCase(),c=At[u]||At._default,s.innerHTML=c[1]+o.replace(vt,"<$1></$2>")+c[2],i=c[0];while(i--)s=s.lastChild;if(!b.support.leadingWhitespace&&yt.test(o)&&d.push(t.createTextNode(yt.exec(o)[0])),!b.support.tbody){o="table"!==u||xt.test(o)?"<table>"!==c[1]||xt.test(o)?0:s:s.firstChild,i=o&&o.childNodes.length;while(i--)b.nodeName(l=o.childNodes[i],"tbody")&&!l.childNodes.length&&o.removeChild(l)
+}b.merge(d,s.childNodes),s.textContent="";while(s.firstChild)s.removeChild(s.firstChild);s=f.lastChild}else d.push(t.createTextNode(o));s&&f.removeChild(s),b.support.appendChecked||b.grep(Ot(d,"input"),Bt),h=0;while(o=d[h++])if((!r||-1===b.inArray(o,r))&&(a=b.contains(o.ownerDocument,o),s=Ot(f.appendChild(o),"script"),a&&Mt(s),n)){i=0;while(o=s[i++])kt.test(o.type||"")&&n.push(o)}return s=null,f},cleanData:function(e,t){var n,r,o,a,s=0,u=b.expando,l=b.cache,p=b.support.deleteExpando,f=b.event.special;for(;null!=(n=e[s]);s++)if((t||b.acceptData(n))&&(o=n[u],a=o&&l[o])){if(a.events)for(r in a.events)f[r]?b.event.remove(n,r):b.removeEvent(n,r,a.handle);l[o]&&(delete l[o],p?delete n[u]:typeof n.removeAttribute!==i?n.removeAttribute(u):n[u]=null,c.push(o))}}});var Pt,Rt,Wt,$t=/alpha\([^)]*\)/i,It=/opacity\s*=\s*([^)]*)/,zt=/^(top|right|bottom|left)$/,Xt=/^(none|table(?!-c[ea]).+)/,Ut=/^margin/,Vt=RegExp("^("+x+")(.*)$","i"),Yt=RegExp("^("+x+")(?!px)[a-z%]+$","i"),Jt=RegExp("^([+-])=("+x+")","i"),Gt={BODY:"block"},Qt={position:"absolute",visibility:"hidden",display:"block"},Kt={letterSpacing:0,fontWeight:400},Zt=["Top","Right","Bottom","Left"],en=["Webkit","O","Moz","ms"];function tn(e,t){if(t in e)return t;var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=en.length;while(i--)if(t=en[i]+n,t in e)return t;return r}function nn(e,t){return e=t||e,"none"===b.css(e,"display")||!b.contains(e.ownerDocument,e)}function rn(e,t){var n,r,i,o=[],a=0,s=e.length;for(;s>a;a++)r=e[a],r.style&&(o[a]=b._data(r,"olddisplay"),n=r.style.display,t?(o[a]||"none"!==n||(r.style.display=""),""===r.style.display&&nn(r)&&(o[a]=b._data(r,"olddisplay",un(r.nodeName)))):o[a]||(i=nn(r),(n&&"none"!==n||!i)&&b._data(r,"olddisplay",i?n:b.css(r,"display"))));for(a=0;s>a;a++)r=e[a],r.style&&(t&&"none"!==r.style.display&&""!==r.style.display||(r.style.display=t?o[a]||"":"none"));return e}b.fn.extend({css:function(e,n){return b.access(this,function(e,n,r){var i,o,a={},s=0;if(b.isArray(n)){for(o=Rt(e),i=n.length;i>s;s++)a[n[s]]=b.css(e,n[s],!1,o);return a}return r!==t?b.style(e,n,r):b.css(e,n)},e,n,arguments.length>1)},show:function(){return rn(this,!0)},hide:function(){return rn(this)},toggle:function(e){var t="boolean"==typeof e;return this.each(function(){(t?e:nn(this))?b(this).show():b(this).hide()})}}),b.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=Wt(e,"opacity");return""===n?"1":n}}}},cssNumber:{columnCount:!0,fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":b.support.cssFloat?"cssFloat":"styleFloat"},style:function(e,n,r,i){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var o,a,s,u=b.camelCase(n),l=e.style;if(n=b.cssProps[u]||(b.cssProps[u]=tn(l,u)),s=b.cssHooks[n]||b.cssHooks[u],r===t)return s&&"get"in s&&(o=s.get(e,!1,i))!==t?o:l[n];if(a=typeof r,"string"===a&&(o=Jt.exec(r))&&(r=(o[1]+1)*o[2]+parseFloat(b.css(e,n)),a="number"),!(null==r||"number"===a&&isNaN(r)||("number"!==a||b.cssNumber[u]||(r+="px"),b.support.clearCloneStyle||""!==r||0!==n.indexOf("background")||(l[n]="inherit"),s&&"set"in s&&(r=s.set(e,r,i))===t)))try{l[n]=r}catch(c){}}},css:function(e,n,r,i){var o,a,s,u=b.camelCase(n);return n=b.cssProps[u]||(b.cssProps[u]=tn(e.style,u)),s=b.cssHooks[n]||b.cssHooks[u],s&&"get"in s&&(a=s.get(e,!0,r)),a===t&&(a=Wt(e,n,i)),"normal"===a&&n in Kt&&(a=Kt[n]),""===r||r?(o=parseFloat(a),r===!0||b.isNumeric(o)?o||0:a):a},swap:function(e,t,n,r){var i,o,a={};for(o in t)a[o]=e.style[o],e.style[o]=t[o];i=n.apply(e,r||[]);for(o in t)e.style[o]=a[o];return i}}),e.getComputedStyle?(Rt=function(t){return e.getComputedStyle(t,null)},Wt=function(e,n,r){var i,o,a,s=r||Rt(e),u=s?s.getPropertyValue(n)||s[n]:t,l=e.style;return s&&(""!==u||b.contains(e.ownerDocument,e)||(u=b.style(e,n)),Yt.test(u)&&Ut.test(n)&&(i=l.width,o=l.minWidth,a=l.maxWidth,l.minWidth=l.maxWidth=l.width=u,u=s.width,l.width=i,l.minWidth=o,l.maxWidth=a)),u}):o.documentElement.currentStyle&&(Rt=function(e){return e.currentStyle},Wt=function(e,n,r){var i,o,a,s=r||Rt(e),u=s?s[n]:t,l=e.style;return null==u&&l&&l[n]&&(u=l[n]),Yt.test(u)&&!zt.test(n)&&(i=l.left,o=e.runtimeStyle,a=o&&o.left,a&&(o.left=e.currentStyle.left),l.left="fontSize"===n?"1em":u,u=l.pixelLeft+"px",l.left=i,a&&(o.left=a)),""===u?"auto":u});function on(e,t,n){var r=Vt.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function an(e,t,n,r,i){var o=n===(r?"border":"content")?4:"width"===t?1:0,a=0;for(;4>o;o+=2)"margin"===n&&(a+=b.css(e,n+Zt[o],!0,i)),r?("content"===n&&(a-=b.css(e,"padding"+Zt[o],!0,i)),"margin"!==n&&(a-=b.css(e,"border"+Zt[o]+"Width",!0,i))):(a+=b.css(e,"padding"+Zt[o],!0,i),"padding"!==n&&(a+=b.css(e,"border"+Zt[o]+"Width",!0,i)));return a}function sn(e,t,n){var r=!0,i="width"===t?e.offsetWidth:e.offsetHeight,o=Rt(e),a=b.support.boxSizing&&"border-box"===b.css(e,"boxSizing",!1,o);if(0>=i||null==i){if(i=Wt(e,t,o),(0>i||null==i)&&(i=e.style[t]),Yt.test(i))return i;r=a&&(b.support.boxSizingReliable||i===e.style[t]),i=parseFloat(i)||0}return i+an(e,t,n||(a?"border":"content"),r,o)+"px"}function un(e){var t=o,n=Gt[e];return n||(n=ln(e,t),"none"!==n&&n||(Pt=(Pt||b("<iframe frameborder='0' width='0' height='0'/>").css("cssText","display:block !important")).appendTo(t.documentElement),t=(Pt[0].contentWindow||Pt[0].contentDocument).document,t.write("<!doctype html><html><body>"),t.close(),n=ln(e,t),Pt.detach()),Gt[e]=n),n}function ln(e,t){var n=b(t.createElement(e)).appendTo(t.body),r=b.css(n[0],"display");return n.remove(),r}b.each(["height","width"],function(e,n){b.cssHooks[n]={get:function(e,r,i){return r?0===e.offsetWidth&&Xt.test(b.css(e,"display"))?b.swap(e,Qt,function(){return sn(e,n,i)}):sn(e,n,i):t},set:function(e,t,r){var i=r&&Rt(e);return on(e,t,r?an(e,n,r,b.support.boxSizing&&"border-box"===b.css(e,"boxSizing",!1,i),i):0)}}}),b.support.opacity||(b.cssHooks.opacity={get:function(e,t){return It.test((t&&e.currentStyle?e.currentStyle.filter:e.style.filter)||"")?.01*parseFloat(RegExp.$1)+"":t?"1":""},set:function(e,t){var n=e.style,r=e.currentStyle,i=b.isNumeric(t)?"alpha(opacity="+100*t+")":"",o=r&&r.filter||n.filter||"";n.zoom=1,(t>=1||""===t)&&""===b.trim(o.replace($t,""))&&n.removeAttribute&&(n.removeAttribute("filter"),""===t||r&&!r.filter)||(n.filter=$t.test(o)?o.replace($t,i):o+" "+i)}}),b(function(){b.support.reliableMarginRight||(b.cssHooks.marginRight={get:function(e,n){return n?b.swap(e,{display:"inline-block"},Wt,[e,"marginRight"]):t}}),!b.support.pixelPosition&&b.fn.position&&b.each(["top","left"],function(e,n){b.cssHooks[n]={get:function(e,r){return r?(r=Wt(e,n),Yt.test(r)?b(e).position()[n]+"px":r):t}}})}),b.expr&&b.expr.filters&&(b.expr.filters.hidden=function(e){return 0>=e.offsetWidth&&0>=e.offsetHeight||!b.support.reliableHiddenOffsets&&"none"===(e.style&&e.style.display||b.css(e,"display"))},b.expr.filters.visible=function(e){return!b.expr.filters.hidden(e)}),b.each({margin:"",padding:"",border:"Width"},function(e,t){b.cssHooks[e+t]={expand:function(n){var r=0,i={},o="string"==typeof n?n.split(" "):[n];for(;4>r;r++)i[e+Zt[r]+t]=o[r]||o[r-2]||o[0];return i}},Ut.test(e)||(b.cssHooks[e+t].set=on)});var cn=/%20/g,pn=/\[\]$/,fn=/\r?\n/g,dn=/^(?:submit|button|image|reset|file)$/i,hn=/^(?:input|select|textarea|keygen)/i;b.fn.extend({serialize:function(){return b.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var e=b.prop(this,"elements");return e?b.makeArray(e):this}).filter(function(){var e=this.type;return this.name&&!b(this).is(":disabled")&&hn.test(this.nodeName)&&!dn.test(e)&&(this.checked||!Nt.test(e))}).map(function(e,t){var n=b(this).val();return null==n?null:b.isArray(n)?b.map(n,function(e){return{name:t.name,value:e.replace(fn,"\r\n")}}):{name:t.name,value:n.replace(fn,"\r\n")}}).get()}}),b.param=function(e,n){var r,i=[],o=function(e,t){t=b.isFunction(t)?t():null==t?"":t,i[i.length]=encodeURIComponent(e)+"="+encodeURIComponent(t)};if(n===t&&(n=b.ajaxSettings&&b.ajaxSettings.traditional),b.isArray(e)||e.jquery&&!b.isPlainObject(e))b.each(e,function(){o(this.name,this.value)});else for(r in e)gn(r,e[r],n,o);return i.join("&").replace(cn,"+")};function gn(e,t,n,r){var i;if(b.isArray(t))b.each(t,function(t,i){n||pn.test(e)?r(e,i):gn(e+"["+("object"==typeof i?t:"")+"]",i,n,r)});else if(n||"object"!==b.type(t))r(e,t);else for(i in t)gn(e+"["+i+"]",t[i],n,r)}b.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(e,t){b.fn[t]=function(e,n){return arguments.length>0?this.on(t,null,e,n):this.trigger(t)}}),b.fn.hover=function(e,t){return this.mouseenter(e).mouseleave(t||e)};var mn,yn,vn=b.now(),bn=/\?/,xn=/#.*$/,wn=/([?&])_=[^&]*/,Tn=/^(.*?):[ \t]*([^\r\n]*)\r?$/gm,Nn=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,Cn=/^(?:GET|HEAD)$/,kn=/^\/\//,En=/^([\w.+-]+:)(?:\/\/([^\/?#:]*)(?::(\d+)|)|)/,Sn=b.fn.load,An={},jn={},Dn="*/".concat("*");try{yn=a.href}catch(Ln){yn=o.createElement("a"),yn.href="",yn=yn.href}mn=En.exec(yn.toLowerCase())||[];function Hn(e){return function(t,n){"string"!=typeof t&&(n=t,t="*");var r,i=0,o=t.toLowerCase().match(w)||[];if(b.isFunction(n))while(r=o[i++])"+"===r[0]?(r=r.slice(1)||"*",(e[r]=e[r]||[]).unshift(n)):(e[r]=e[r]||[]).push(n)}}function qn(e,n,r,i){var o={},a=e===jn;function s(u){var l;return o[u]=!0,b.each(e[u]||[],function(e,u){var c=u(n,r,i);return"string"!=typeof c||a||o[c]?a?!(l=c):t:(n.dataTypes.unshift(c),s(c),!1)}),l}return s(n.dataTypes[0])||!o["*"]&&s("*")}function Mn(e,n){var r,i,o=b.ajaxSettings.flatOptions||{};for(i in n)n[i]!==t&&((o[i]?e:r||(r={}))[i]=n[i]);return r&&b.extend(!0,e,r),e}b.fn.load=function(e,n,r){if("string"!=typeof e&&Sn)return Sn.apply(this,arguments);var i,o,a,s=this,u=e.indexOf(" ");return u>=0&&(i=e.slice(u,e.length),e=e.slice(0,u)),b.isFunction(n)?(r=n,n=t):n&&"object"==typeof n&&(a="POST"),s.length>0&&b.ajax({url:e,type:a,dataType:"html",data:n}).done(function(e){o=arguments,s.html(i?b("<div>").append(b.parseHTML(e)).find(i):e)}).complete(r&&function(e,t){s.each(r,o||[e.responseText,t,e])}),this},b.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){b.fn[t]=function(e){return this.on(t,e)}}),b.each(["get","post"],function(e,n){b[n]=function(e,r,i,o){return b.isFunction(r)&&(o=o||i,i=r,r=t),b.ajax({url:e,type:n,dataType:o,data:r,success:i})}}),b.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:yn,type:"GET",isLocal:Nn.test(mn[1]),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Dn,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":e.String,"text html":!0,"text json":b.parseJSON,"text xml":b.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?Mn(Mn(e,b.ajaxSettings),t):Mn(b.ajaxSettings,e)},ajaxPrefilter:Hn(An),ajaxTransport:Hn(jn),ajax:function(e,n){"object"==typeof e&&(n=e,e=t),n=n||{};var r,i,o,a,s,u,l,c,p=b.ajaxSetup({},n),f=p.context||p,d=p.context&&(f.nodeType||f.jquery)?b(f):b.event,h=b.Deferred(),g=b.Callbacks("once memory"),m=p.statusCode||{},y={},v={},x=0,T="canceled",N={readyState:0,getResponseHeader:function(e){var t;if(2===x){if(!c){c={};while(t=Tn.exec(a))c[t[1].toLowerCase()]=t[2]}t=c[e.toLowerCase()]}return null==t?null:t},getAllResponseHeaders:function(){return 2===x?a:null},setRequestHeader:function(e,t){var n=e.toLowerCase();return x||(e=v[n]=v[n]||e,y[e]=t),this},overrideMimeType:function(e){return x||(p.mimeType=e),this},statusCode:function(e){var t;if(e)if(2>x)for(t in e)m[t]=[m[t],e[t]];else N.always(e[N.status]);return this},abort:function(e){var t=e||T;return l&&l.abort(t),k(0,t),this}};if(h.promise(N).complete=g.add,N.success=N.done,N.error=N.fail,p.url=((e||p.url||yn)+"").replace(xn,"").replace(kn,mn[1]+"//"),p.type=n.method||n.type||p.method||p.type,p.dataTypes=b.trim(p.dataType||"*").toLowerCase().match(w)||[""],null==p.crossDomain&&(r=En.exec(p.url.toLowerCase()),p.crossDomain=!(!r||r[1]===mn[1]&&r[2]===mn[2]&&(r[3]||("http:"===r[1]?80:443))==(mn[3]||("http:"===mn[1]?80:443)))),p.data&&p.processData&&"string"!=typeof p.data&&(p.data=b.param(p.data,p.traditional)),qn(An,p,n,N),2===x)return N;u=p.global,u&&0===b.active++&&b.event.trigger("ajaxStart"),p.type=p.type.toUpperCase(),p.hasContent=!Cn.test(p.type),o=p.url,p.hasContent||(p.data&&(o=p.url+=(bn.test(o)?"&":"?")+p.data,delete p.data),p.cache===!1&&(p.url=wn.test(o)?o.replace(wn,"$1_="+vn++):o+(bn.test(o)?"&":"?")+"_="+vn++)),p.ifModified&&(b.lastModified[o]&&N.setRequestHeader("If-Modified-Since",b.lastModified[o]),b.etag[o]&&N.setRequestHeader("If-None-Match",b.etag[o])),(p.data&&p.hasContent&&p.contentType!==!1||n.contentType)&&N.setRequestHeader("Content-Type",p.contentType),N.setRequestHeader("Accept",p.dataTypes[0]&&p.accepts[p.dataTypes[0]]?p.accepts[p.dataTypes[0]]+("*"!==p.dataTypes[0]?", "+Dn+"; q=0.01":""):p.accepts["*"]);for(i in p.headers)N.setRequestHeader(i,p.headers[i]);if(p.beforeSend&&(p.beforeSend.call(f,N,p)===!1||2===x))return N.abort();T="abort";for(i in{success:1,error:1,complete:1})N[i](p[i]);if(l=qn(jn,p,n,N)){N.readyState=1,u&&d.trigger("ajaxSend",[N,p]),p.async&&p.timeout>0&&(s=setTimeout(function(){N.abort("timeout")},p.timeout));try{x=1,l.send(y,k)}catch(C){if(!(2>x))throw C;k(-1,C)}}else k(-1,"No Transport");function k(e,n,r,i){var c,y,v,w,T,C=n;2!==x&&(x=2,s&&clearTimeout(s),l=t,a=i||"",N.readyState=e>0?4:0,r&&(w=_n(p,N,r)),e>=200&&300>e||304===e?(p.ifModified&&(T=N.getResponseHeader("Last-Modified"),T&&(b.lastModified[o]=T),T=N.getResponseHeader("etag"),T&&(b.etag[o]=T)),204===e?(c=!0,C="nocontent"):304===e?(c=!0,C="notmodified"):(c=Fn(p,w),C=c.state,y=c.data,v=c.error,c=!v)):(v=C,(e||!C)&&(C="error",0>e&&(e=0))),N.status=e,N.statusText=(n||C)+"",c?h.resolveWith(f,[y,C,N]):h.rejectWith(f,[N,C,v]),N.statusCode(m),m=t,u&&d.trigger(c?"ajaxSuccess":"ajaxError",[N,p,c?y:v]),g.fireWith(f,[N,C]),u&&(d.trigger("ajaxComplete",[N,p]),--b.active||b.event.trigger("ajaxStop")))}return N},getScript:function(e,n){return b.get(e,t,n,"script")},getJSON:function(e,t,n){return b.get(e,t,n,"json")}});function _n(e,n,r){var i,o,a,s,u=e.contents,l=e.dataTypes,c=e.responseFields;for(s in c)s in r&&(n[c[s]]=r[s]);while("*"===l[0])l.shift(),o===t&&(o=e.mimeType||n.getResponseHeader("Content-Type"));if(o)for(s in u)if(u[s]&&u[s].test(o)){l.unshift(s);break}if(l[0]in r)a=l[0];else{for(s in r){if(!l[0]||e.converters[s+" "+l[0]]){a=s;break}i||(i=s)}a=a||i}return a?(a!==l[0]&&l.unshift(a),r[a]):t}function Fn(e,t){var n,r,i,o,a={},s=0,u=e.dataTypes.slice(),l=u[0];if(e.dataFilter&&(t=e.dataFilter(t,e.dataType)),u[1])for(i in e.converters)a[i.toLowerCase()]=e.converters[i];for(;r=u[++s];)if("*"!==r){if("*"!==l&&l!==r){if(i=a[l+" "+r]||a["* "+r],!i)for(n in a)if(o=n.split(" "),o[1]===r&&(i=a[l+" "+o[0]]||a["* "+o[0]])){i===!0?i=a[n]:a[n]!==!0&&(r=o[0],u.splice(s--,0,r));break}if(i!==!0)if(i&&e["throws"])t=i(t);else try{t=i(t)}catch(c){return{state:"parsererror",error:i?c:"No conversion from "+l+" to "+r}}}l=r}return{state:"success",data:t}}b.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/(?:java|ecma)script/},converters:{"text script":function(e){return b.globalEval(e),e}}}),b.ajaxPrefilter("script",function(e){e.cache===t&&(e.cache=!1),e.crossDomain&&(e.type="GET",e.global=!1)}),b.ajaxTransport("script",function(e){if(e.crossDomain){var n,r=o.head||b("head")[0]||o.documentElement;return{send:function(t,i){n=o.createElement("script"),n.async=!0,e.scriptCharset&&(n.charset=e.scriptCharset),n.src=e.url,n.onload=n.onreadystatechange=function(e,t){(t||!n.readyState||/loaded|complete/.test(n.readyState))&&(n.onload=n.onreadystatechange=null,n.parentNode&&n.parentNode.removeChild(n),n=null,t||i(200,"success"))},r.insertBefore(n,r.firstChild)},abort:function(){n&&n.onload(t,!0)}}}});var On=[],Bn=/(=)\?(?=&|$)|\?\?/;b.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=On.pop()||b.expando+"_"+vn++;return this[e]=!0,e}}),b.ajaxPrefilter("json jsonp",function(n,r,i){var o,a,s,u=n.jsonp!==!1&&(Bn.test(n.url)?"url":"string"==typeof n.data&&!(n.contentType||"").indexOf("application/x-www-form-urlencoded")&&Bn.test(n.data)&&"data");return u||"jsonp"===n.dataTypes[0]?(o=n.jsonpCallback=b.isFunction(n.jsonpCallback)?n.jsonpCallback():n.jsonpCallback,u?n[u]=n[u].replace(Bn,"$1"+o):n.jsonp!==!1&&(n.url+=(bn.test(n.url)?"&":"?")+n.jsonp+"="+o),n.converters["script json"]=function(){return s||b.error(o+" was not called"),s[0]},n.dataTypes[0]="json",a=e[o],e[o]=function(){s=arguments},i.always(function(){e[o]=a,n[o]&&(n.jsonpCallback=r.jsonpCallback,On.push(o)),s&&b.isFunction(a)&&a(s[0]),s=a=t}),"script"):t});var Pn,Rn,Wn=0,$n=e.ActiveXObject&&function(){var e;for(e in Pn)Pn[e](t,!0)};function In(){try{return new e.XMLHttpRequest}catch(t){}}function zn(){try{return new e.ActiveXObject("Microsoft.XMLHTTP")}catch(t){}}b.ajaxSettings.xhr=e.ActiveXObject?function(){return!this.isLocal&&In()||zn()}:In,Rn=b.ajaxSettings.xhr(),b.support.cors=!!Rn&&"withCredentials"in Rn,Rn=b.support.ajax=!!Rn,Rn&&b.ajaxTransport(function(n){if(!n.crossDomain||b.support.cors){var r;return{send:function(i,o){var a,s,u=n.xhr();if(n.username?u.open(n.type,n.url,n.async,n.username,n.password):u.open(n.type,n.url,n.async),n.xhrFields)for(s in n.xhrFields)u[s]=n.xhrFields[s];n.mimeType&&u.overrideMimeType&&u.overrideMimeType(n.mimeType),n.crossDomain||i["X-Requested-With"]||(i["X-Requested-With"]="XMLHttpRequest");try{for(s in i)u.setRequestHeader(s,i[s])}catch(l){}u.send(n.hasContent&&n.data||null),r=function(e,i){var s,l,c,p;try{if(r&&(i||4===u.readyState))if(r=t,a&&(u.onreadystatechange=b.noop,$n&&delete Pn[a]),i)4!==u.readyState&&u.abort();else{p={},s=u.status,l=u.getAllResponseHeaders(),"string"==typeof u.responseText&&(p.text=u.responseText);try{c=u.statusText}catch(f){c=""}s||!n.isLocal||n.crossDomain?1223===s&&(s=204):s=p.text?200:404}}catch(d){i||o(-1,d)}p&&o(s,c,p,l)},n.async?4===u.readyState?setTimeout(r):(a=++Wn,$n&&(Pn||(Pn={},b(e).unload($n)),Pn[a]=r),u.onreadystatechange=r):r()},abort:function(){r&&r(t,!0)}}}});var Xn,Un,Vn=/^(?:toggle|show|hide)$/,Yn=RegExp("^(?:([+-])=|)("+x+")([a-z%]*)$","i"),Jn=/queueHooks$/,Gn=[nr],Qn={"*":[function(e,t){var n,r,i=this.createTween(e,t),o=Yn.exec(t),a=i.cur(),s=+a||0,u=1,l=20;if(o){if(n=+o[2],r=o[3]||(b.cssNumber[e]?"":"px"),"px"!==r&&s){s=b.css(i.elem,e,!0)||n||1;do u=u||".5",s/=u,b.style(i.elem,e,s+r);while(u!==(u=i.cur()/a)&&1!==u&&--l)}i.unit=r,i.start=s,i.end=o[1]?s+(o[1]+1)*n:n}return i}]};function Kn(){return setTimeout(function(){Xn=t}),Xn=b.now()}function Zn(e,t){b.each(t,function(t,n){var r=(Qn[t]||[]).concat(Qn["*"]),i=0,o=r.length;for(;o>i;i++)if(r[i].call(e,t,n))return})}function er(e,t,n){var r,i,o=0,a=Gn.length,s=b.Deferred().always(function(){delete u.elem}),u=function(){if(i)return!1;var t=Xn||Kn(),n=Math.max(0,l.startTime+l.duration-t),r=n/l.duration||0,o=1-r,a=0,u=l.tweens.length;for(;u>a;a++)l.tweens[a].run(o);return s.notifyWith(e,[l,o,n]),1>o&&u?n:(s.resolveWith(e,[l]),!1)},l=s.promise({elem:e,props:b.extend({},t),opts:b.extend(!0,{specialEasing:{}},n),originalProperties:t,originalOptions:n,startTime:Xn||Kn(),duration:n.duration,tweens:[],createTween:function(t,n){var r=b.Tween(e,l.opts,t,n,l.opts.specialEasing[t]||l.opts.easing);return l.tweens.push(r),r},stop:function(t){var n=0,r=t?l.tweens.length:0;if(i)return this;for(i=!0;r>n;n++)l.tweens[n].run(1);return t?s.resolveWith(e,[l,t]):s.rejectWith(e,[l,t]),this}}),c=l.props;for(tr(c,l.opts.specialEasing);a>o;o++)if(r=Gn[o].call(l,e,c,l.opts))return r;return Zn(l,c),b.isFunction(l.opts.start)&&l.opts.start.call(e,l),b.fx.timer(b.extend(u,{elem:e,anim:l,queue:l.opts.queue})),l.progress(l.opts.progress).done(l.opts.done,l.opts.complete).fail(l.opts.fail).always(l.opts.always)}function tr(e,t){var n,r,i,o,a;for(i in e)if(r=b.camelCase(i),o=t[r],n=e[i],b.isArray(n)&&(o=n[1],n=e[i]=n[0]),i!==r&&(e[r]=n,delete e[i]),a=b.cssHooks[r],a&&"expand"in a){n=a.expand(n),delete e[r];for(i in n)i in e||(e[i]=n[i],t[i]=o)}else t[r]=o}b.Animation=b.extend(er,{tweener:function(e,t){b.isFunction(e)?(t=e,e=["*"]):e=e.split(" ");var n,r=0,i=e.length;for(;i>r;r++)n=e[r],Qn[n]=Qn[n]||[],Qn[n].unshift(t)},prefilter:function(e,t){t?Gn.unshift(e):Gn.push(e)}});function nr(e,t,n){var r,i,o,a,s,u,l,c,p,f=this,d=e.style,h={},g=[],m=e.nodeType&&nn(e);n.queue||(c=b._queueHooks(e,"fx"),null==c.unqueued&&(c.unqueued=0,p=c.empty.fire,c.empty.fire=function(){c.unqueued||p()}),c.unqueued++,f.always(function(){f.always(function(){c.unqueued--,b.queue(e,"fx").length||c.empty.fire()})})),1===e.nodeType&&("height"in t||"width"in t)&&(n.overflow=[d.overflow,d.overflowX,d.overflowY],"inline"===b.css(e,"display")&&"none"===b.css(e,"float")&&(b.support.inlineBlockNeedsLayout&&"inline"!==un(e.nodeName)?d.zoom=1:d.display="inline-block")),n.overflow&&(d.overflow="hidden",b.support.shrinkWrapBlocks||f.always(function(){d.overflow=n.overflow[0],d.overflowX=n.overflow[1],d.overflowY=n.overflow[2]}));for(i in t)if(a=t[i],Vn.exec(a)){if(delete t[i],u=u||"toggle"===a,a===(m?"hide":"show"))continue;g.push(i)}if(o=g.length){s=b._data(e,"fxshow")||b._data(e,"fxshow",{}),"hidden"in s&&(m=s.hidden),u&&(s.hidden=!m),m?b(e).show():f.done(function(){b(e).hide()}),f.done(function(){var t;b._removeData(e,"fxshow");for(t in h)b.style(e,t,h[t])});for(i=0;o>i;i++)r=g[i],l=f.createTween(r,m?s[r]:0),h[r]=s[r]||b.style(e,r),r in s||(s[r]=l.start,m&&(l.end=l.start,l.start="width"===r||"height"===r?1:0))}}function rr(e,t,n,r,i){return new rr.prototype.init(e,t,n,r,i)}b.Tween=rr,rr.prototype={constructor:rr,init:function(e,t,n,r,i,o){this.elem=e,this.prop=n,this.easing=i||"swing",this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=o||(b.cssNumber[n]?"":"px")},cur:function(){var e=rr.propHooks[this.prop];return e&&e.get?e.get(this):rr.propHooks._default.get(this)},run:function(e){var t,n=rr.propHooks[this.prop];return this.pos=t=this.options.duration?b.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):rr.propHooks._default.set(this),this}},rr.prototype.init.prototype=rr.prototype,rr.propHooks={_default:{get:function(e){var t;return null==e.elem[e.prop]||e.elem.style&&null!=e.elem.style[e.prop]?(t=b.css(e.elem,e.prop,""),t&&"auto"!==t?t:0):e.elem[e.prop]},set:function(e){b.fx.step[e.prop]?b.fx.step[e.prop](e):e.elem.style&&(null!=e.elem.style[b.cssProps[e.prop]]||b.cssHooks[e.prop])?b.style(e.elem,e.prop,e.now+e.unit):e.elem[e.prop]=e.now}}},rr.propHooks.scrollTop=rr.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},b.each(["toggle","show","hide"],function(e,t){var n=b.fn[t];b.fn[t]=function(e,r,i){return null==e||"boolean"==typeof e?n.apply(this,arguments):this.animate(ir(t,!0),e,r,i)}}),b.fn.extend({fadeTo:function(e,t,n,r){return this.filter(nn).css("opacity",0).show().end().animate({opacity:t},e,n,r)},animate:function(e,t,n,r){var i=b.isEmptyObject(e),o=b.speed(t,n,r),a=function(){var t=er(this,b.extend({},e),o);a.finish=function(){t.stop(!0)},(i||b._data(this,"finish"))&&t.stop(!0)};return a.finish=a,i||o.queue===!1?this.each(a):this.queue(o.queue,a)},stop:function(e,n,r){var i=function(e){var t=e.stop;delete e.stop,t(r)};return"string"!=typeof e&&(r=n,n=e,e=t),n&&e!==!1&&this.queue(e||"fx",[]),this.each(function(){var t=!0,n=null!=e&&e+"queueHooks",o=b.timers,a=b._data(this);if(n)a[n]&&a[n].stop&&i(a[n]);else for(n in a)a[n]&&a[n].stop&&Jn.test(n)&&i(a[n]);for(n=o.length;n--;)o[n].elem!==this||null!=e&&o[n].queue!==e||(o[n].anim.stop(r),t=!1,o.splice(n,1));(t||!r)&&b.dequeue(this,e)})},finish:function(e){return e!==!1&&(e=e||"fx"),this.each(function(){var t,n=b._data(this),r=n[e+"queue"],i=n[e+"queueHooks"],o=b.timers,a=r?r.length:0;for(n.finish=!0,b.queue(this,e,[]),i&&i.cur&&i.cur.finish&&i.cur.finish.call(this),t=o.length;t--;)o[t].elem===this&&o[t].queue===e&&(o[t].anim.stop(!0),o.splice(t,1));for(t=0;a>t;t++)r[t]&&r[t].finish&&r[t].finish.call(this);delete n.finish})}});function ir(e,t){var n,r={height:e},i=0;for(t=t?1:0;4>i;i+=2-t)n=Zt[i],r["margin"+n]=r["padding"+n]=e;return t&&(r.opacity=r.width=e),r}b.each({slideDown:ir("show"),slideUp:ir("hide"),slideToggle:ir("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(e,t){b.fn[e]=function(e,n,r){return this.animate(t,e,n,r)}}),b.speed=function(e,t,n){var r=e&&"object"==typeof e?b.extend({},e):{complete:n||!n&&t||b.isFunction(e)&&e,duration:e,easing:n&&t||t&&!b.isFunction(t)&&t};return r.duration=b.fx.off?0:"number"==typeof r.duration?r.duration:r.duration in b.fx.speeds?b.fx.speeds[r.duration]:b.fx.speeds._default,(null==r.queue||r.queue===!0)&&(r.queue="fx"),r.old=r.complete,r.complete=function(){b.isFunction(r.old)&&r.old.call(this),r.queue&&b.dequeue(this,r.queue)},r},b.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2}},b.timers=[],b.fx=rr.prototype.init,b.fx.tick=function(){var e,n=b.timers,r=0;for(Xn=b.now();n.length>r;r++)e=n[r],e()||n[r]!==e||n.splice(r--,1);n.length||b.fx.stop(),Xn=t},b.fx.timer=function(e){e()&&b.timers.push(e)&&b.fx.start()},b.fx.interval=13,b.fx.start=function(){Un||(Un=setInterval(b.fx.tick,b.fx.interval))},b.fx.stop=function(){clearInterval(Un),Un=null},b.fx.speeds={slow:600,fast:200,_default:400},b.fx.step={},b.expr&&b.expr.filters&&(b.expr.filters.animated=function(e){return b.grep(b.timers,function(t){return e===t.elem}).length}),b.fn.offset=function(e){if(arguments.length)return e===t?this:this.each(function(t){b.offset.setOffset(this,e,t)});var n,r,o={top:0,left:0},a=this[0],s=a&&a.ownerDocument;if(s)return n=s.documentElement,b.contains(n,a)?(typeof a.getBoundingClientRect!==i&&(o=a.getBoundingClientRect()),r=or(s),{top:o.top+(r.pageYOffset||n.scrollTop)-(n.clientTop||0),left:o.left+(r.pageXOffset||n.scrollLeft)-(n.clientLeft||0)}):o},b.offset={setOffset:function(e,t,n){var r=b.css(e,"position");"static"===r&&(e.style.position="relative");var i=b(e),o=i.offset(),a=b.css(e,"top"),s=b.css(e,"left"),u=("absolute"===r||"fixed"===r)&&b.inArray("auto",[a,s])>-1,l={},c={},p,f;u?(c=i.position(),p=c.top,f=c.left):(p=parseFloat(a)||0,f=parseFloat(s)||0),b.isFunction(t)&&(t=t.call(e,n,o)),null!=t.top&&(l.top=t.top-o.top+p),null!=t.left&&(l.left=t.left-o.left+f),"using"in t?t.using.call(e,l):i.css(l)}},b.fn.extend({position:function(){if(this[0]){var e,t,n={top:0,left:0},r=this[0];return"fixed"===b.css(r,"position")?t=r.getBoundingClientRect():(e=this.offsetParent(),t=this.offset(),b.nodeName(e[0],"html")||(n=e.offset()),n.top+=b.css(e[0],"borderTopWidth",!0),n.left+=b.css(e[0],"borderLeftWidth",!0)),{top:t.top-n.top-b.css(r,"marginTop",!0),left:t.left-n.left-b.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent||o.documentElement;while(e&&!b.nodeName(e,"html")&&"static"===b.css(e,"position"))e=e.offsetParent;return e||o.documentElement})}}),b.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(e,n){var r=/Y/.test(n);b.fn[e]=function(i){return b.access(this,function(e,i,o){var a=or(e);return o===t?a?n in a?a[n]:a.document.documentElement[i]:e[i]:(a?a.scrollTo(r?b(a).scrollLeft():o,r?o:b(a).scrollTop()):e[i]=o,t)},e,i,arguments.length,null)}});function or(e){return b.isWindow(e)?e:9===e.nodeType?e.defaultView||e.parentWindow:!1}b.each({Height:"height",Width:"width"},function(e,n){b.each({padding:"inner"+e,content:n,"":"outer"+e},function(r,i){b.fn[i]=function(i,o){var a=arguments.length&&(r||"boolean"!=typeof i),s=r||(i===!0||o===!0?"margin":"border");return b.access(this,function(n,r,i){var o;return b.isWindow(n)?n.document.documentElement["client"+e]:9===n.nodeType?(o=n.documentElement,Math.max(n.body["scroll"+e],o["scroll"+e],n.body["offset"+e],o["offset"+e],o["client"+e])):i===t?b.css(n,r,s):b.style(n,r,i,s)},n,a?i:t,a,null)}})}),e.jQuery=e.$=b,"function"==typeof define&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return b})})(window);
\ No newline at end of file
diff --git a/Source/WebInspectorUI/UserInterface/ActivateButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/ActivateButtonNavigationItem.js
new file mode 100644
index 000000000..1583d9655
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ActivateButtonNavigationItem.js
@@ -0,0 +1,98 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ActivateButtonNavigationItem = function(identifier, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss)
+{
+    WebInspector.ButtonNavigationItem.call(this, identifier, defaultToolTip, image, imageWidth, imageHeight, suppressEmboss);
+
+    this._defaultToolTip = defaultToolTip;
+    this._activatedToolTip = activatedToolTip || defaultToolTip;
+};
+
+WebInspector.ActivateButtonNavigationItem.StyleClassName = "activate";
+WebInspector.ActivateButtonNavigationItem.ActivatedStyleClassName = "activated";
+
+WebInspector.ActivateButtonNavigationItem.prototype = {
+    constructor: WebInspector.ActivateButtonNavigationItem,
+
+    // Public
+
+    get defaultToolTip()
+    {
+        return this._defaultToolTip;
+    },
+
+    get activatedToolTip()
+    {
+        return this._activatedToolTip;
+    },
+
+    get activated()
+    {
+        return this.element.classList.contains(WebInspector.ActivateButtonNavigationItem.ActivatedStyleClassName);
+    },
+
+    set activated(flag)
+    {
+        if (flag) {
+            this.toolTip = this._activatedToolTip;
+            this.element.classList.add(WebInspector.ActivateButtonNavigationItem.ActivatedStyleClassName);
+        } else {
+            this.toolTip = this._defaultToolTip;
+            this.element.classList.remove(WebInspector.ActivateButtonNavigationItem.ActivatedStyleClassName);
+        }
+    },
+
+    generateStyleText: function(parentSelector)
+    {
+        var classNames = this._classNames.join(".");
+
+        if (this._suppressEmboss)
+            var styleText = parentSelector + " ." + classNames + " > .glyph { background-size: " +  this._imageWidth + "px " + this._imageHeight + "px; }\n";
+        else {
+            var activatedClassName = "." + WebInspector.ActivateButtonNavigationItem.ActivatedStyleClassName;
+
+            // Default state.
+            var styleText = parentSelector + " ." + classNames + " > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Normal) + "); background-size: " +  this._imageWidth + "px " + this._imageHeight + "px; }\n";
+
+            // Pressed state.
+            styleText += parentSelector + " ." + classNames + ":not(.disabled):active > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Active) + "); }\n";
+
+            // Activated state.
+            styleText += parentSelector + " ." + classNames + activatedClassName + ":not(.disabled) > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Focus) + "); }\n";
+
+            // Activated and pressed state.
+            styleText += parentSelector + " ." + classNames + activatedClassName + ":not(.disabled):active > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.ActiveFocus) + "); }\n";
+        }
+
+        return styleText;
+    },
+
+    // Private
+
+    _additionalClassNames: [WebInspector.ActivateButtonNavigationItem.StyleClassName, WebInspector.ButtonNavigationItem.StyleClassName]
+};
+
+WebInspector.ActivateButtonNavigationItem.prototype.__proto__ = WebInspector.ButtonNavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ActivateButtonToolbarItem.js b/Source/WebInspectorUI/UserInterface/ActivateButtonToolbarItem.js
new file mode 100644
index 000000000..af4d6614a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ActivateButtonToolbarItem.js
@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ActivateButtonToolbarItem = function(identifier, defaultToolTip, activatedToolTip, label, image, suppressEmboss)
+{
+    WebInspector.ActivateButtonNavigationItem.call(this, identifier, defaultToolTip, activatedToolTip, image, 32, 32, suppressEmboss);
+
+    console.assert(label);
+
+    this._labelElement = document.createElement("div");
+    this._labelElement.className = WebInspector.ButtonToolbarItem.LabelStyleClassName;
+    this._element.appendChild(this._labelElement);
+
+    this.label = label;
+};
+
+WebInspector.ActivateButtonToolbarItem.prototype = {
+    constructor: WebInspector.ActivateButtonToolbarItem,
+
+    // Public
+
+    get label()
+    {
+        return this._labelElement.textContent;
+    },
+
+    set label(newLabel)
+    {
+        console.assert(newLabel);
+        if (!newLabel)
+            return;
+
+        this._labelElement.textContent = newLabel;
+    }
+};
+
+WebInspector.ActivateButtonToolbarItem.prototype.__proto__ = WebInspector.ActivateButtonNavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/ApplicationCacheDetailsSidebarPanel.js
new file mode 100644
index 000000000..2703d708e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ApplicationCacheDetailsSidebarPanel.js
@@ -0,0 +1,152 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ApplicationCacheDetailsSidebarPanel = function() {
+    WebInspector.DetailsSidebarPanel.call(this, "application-cache-details", WebInspector.UIString("Storage"), WebInspector.UIString("Storage"), "Images/NavigationItemStorage.pdf");
+
+    this.element.classList.add(WebInspector.ApplicationCacheDetailsSidebarPanel.StyleClassName);
+
+    this._applicationCacheFrame = null;
+
+    this._locationManifestURLRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Manifest URL"));
+    this._locationFrameURLRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Frame URL"));
+
+    this._locationGroup = new WebInspector.DetailsSectionGroup([this._locationManifestURLRow, this._locationFrameURLRow]);
+
+    this._locationSection = new WebInspector.DetailsSection("application-cache-location", WebInspector.UIString("Location"), [this._locationGroup]);
+
+    this._onlineRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Online"));
+    this._statusRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Status"));
+
+    this._statusGroup = new WebInspector.DetailsSectionGroup([this._onlineRow, this._statusRow]);
+
+    this._statusSection = new WebInspector.DetailsSection("application-cache-status", WebInspector.UIString("Status"), [this._statusGroup]);
+
+    this.element.appendChild(this._locationSection.element);
+    this.element.appendChild(this._statusSection.element);
+
+    WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.NetworkStateUpdated, this._networkStateUpdated, this);
+    WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestStatusChanged, this._frameManifestStatusChanged, this);
+};
+
+WebInspector.ApplicationCacheDetailsSidebarPanel.StyleClassName = "application-cache";
+
+// This needs to be kept in sync with ApplicationCacheManager.js.
+WebInspector.ApplicationCacheDetailsSidebarPanel.Status = {
+    0: "Uncached",
+    1: "Idle",
+    2: "Checking",
+    3: "Downloading",
+    4: "UpdateReady",
+    5: "Obsolete"
+};
+
+WebInspector.ApplicationCacheDetailsSidebarPanel.prototype = {
+    constructor: WebInspector.ApplicationCacheDetailsSidebarPanel,
+
+    // Public
+
+    inspect: function(objects)
+    {
+        // Convert to a single item array if needed.
+        if (!(objects instanceof Array))
+            objects = [objects];
+
+        var applicationCacheFrameToInspect = null;
+
+        // Iterate over the objects to find a WebInspector.ApplicationCacheFrame to inspect.
+        for (var i = 0; i < objects.length; ++i) {
+            if (objects[i] instanceof WebInspector.ApplicationCacheFrame) {
+                applicationCacheFrameToInspect = objects[i];
+                break;
+            }
+        }
+
+        this.applicationCacheFrame = applicationCacheFrameToInspect;
+
+        return !!this.applicationCacheFrame;
+    },
+    
+    get applicationCacheFrame()
+    {
+        return this._applicationCacheFrame;
+    },
+    
+    set applicationCacheFrame(applicationCacheFrame)
+    {
+        if (this._applicationCacheFrame === applicationCacheFrame)
+            return;
+        
+        this._applicationCacheFrame = applicationCacheFrame;
+
+        this.needsRefresh();
+    },
+
+    refresh: function()
+    {
+        if (!this.applicationCacheFrame)
+            return;
+
+        this._locationFrameURLRow.value = this.applicationCacheFrame.frame.url;
+        this._locationManifestURLRow.value = this.applicationCacheFrame.manifest.manifestURL;
+        
+        this._refreshOnlineRow();
+        this._refreshStatusRow();
+    },
+    
+    // Private
+    
+    _networkStateUpdated: function(event)
+    {
+        if (!this.applicationCacheFrame)
+            return;
+        
+        this._refreshOnlineRow();
+    },
+    
+    _frameManifestStatusChanged: function(event)
+    {
+        if (!this.applicationCacheFrame)
+            return;
+
+        console.assert(event.data.frameManifest instanceof WebInspector.ApplicationCacheFrame);
+        if (event.data.frameManifest !== this.applicationCacheFrame)
+            return;
+
+        this._refreshStatusRow();
+    },
+    
+    _refreshOnlineRow: function()
+    {
+        this._onlineRow.value = WebInspector.applicationCacheManager.online ? WebInspector.UIString("Yes") : WebInspector.UIString("No");
+    },
+    
+    _refreshStatusRow: function()
+    {
+        this._statusRow.value = WebInspector.ApplicationCacheDetailsSidebarPanel.Status[this.applicationCacheFrame.status];
+    }
+};
+
+WebInspector.ApplicationCacheDetailsSidebarPanel.prototype.__proto__ = WebInspector.DetailsSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheFrame.js b/Source/WebInspectorUI/UserInterface/ApplicationCacheFrame.js
new file mode 100644
index 000000000..84f506ac3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ApplicationCacheFrame.js
@@ -0,0 +1,62 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ApplicationCacheFrame = function(frame, manifest, status)
+{
+    console.assert(frame instanceof WebInspector.Frame);
+    console.assert(manifest instanceof WebInspector.ApplicationCacheManifest);
+
+    WebInspector.Object.call(this);
+    
+    this._frame = frame;
+    this._manifest = manifest;
+    this._status = status;
+};
+
+WebInspector.ApplicationCacheFrame.prototype = {
+    constructor: WebInspector.ApplicationCacheFrame,
+    
+    get frame()
+    {
+        return this._frame;
+    },
+
+    get manifest()
+    {
+        return this._manifest;
+    },
+
+    get status()
+    {
+        return this._status;
+    },
+    
+    set status(status)
+    {
+        this._status = status;
+    }
+};
+
+WebInspector.ApplicationCacheFrame.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameContentView.css b/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameContentView.css
new file mode 100644
index 000000000..e10b20b0b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameContentView.css
@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.application-cache-frame > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameContentView.js b/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameContentView.js
new file mode 100644
index 000000000..f14f0ed21
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameContentView.js
@@ -0,0 +1,243 @@
+/*
+ * Copyright (C) 2010, 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ * @extends {WebInspector.View}
+ */
+WebInspector.ApplicationCacheFrameContentView = function(representedObject)
+{
+    console.assert(representedObject instanceof WebInspector.ApplicationCacheFrame);
+
+    WebInspector.ContentView.call(this, representedObject);
+
+    this.element.classList.add(WebInspector.ApplicationCacheFrameContentView.StyleClassName);
+
+    this.element.classList.add("storage-view");
+    this.element.classList.add("table");
+
+    this._frame = representedObject.frame;
+
+    this._emptyView = WebInspector.createMessageTextView(WebInspector.UIString("No Application Cache information available"), false);
+    this._emptyView.classList.add("hidden");
+    this.element.appendChild(this._emptyView);
+
+    this._markDirty();
+    
+    var status = representedObject.status;
+    this.updateStatus(status);
+
+    WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestStatusChanged, this._updateStatus, this);
+}
+
+WebInspector.ApplicationCacheFrameContentView.StyleClassName = "application-cache-frame";
+
+WebInspector.ApplicationCacheFrameContentView.prototype = {
+    constructor: WebInspector.ApplicationCacheFrameContentView,
+
+    shown: function()
+    {
+        this._maybeUpdate();
+    },
+
+    closed: function()
+    {
+        WebInspector.applicationCacheManager.removeEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestStatusChanged, this._updateStatus, this);
+    },
+
+    updateLayout: function()
+    {
+        if (this.dataGrid)
+            this.dataGrid.updateLayout();
+    },
+
+    get scrollableElements()
+    {
+        if (!this._dataGrid)
+            return [];
+        return [this._dataGrid.scrollContainer];
+    },
+
+    _maybeUpdate: function()
+    {
+        if (!this.visible || !this._viewDirty)
+            return;
+        
+        this._update();
+        this._viewDirty = false;
+    },
+
+    _markDirty: function()
+    {
+        this._viewDirty = true;
+    },
+
+    _updateStatus: function(event)
+    {
+        var frameManifest = event.data.frameManifest;
+        if (frameManifest !== this.representedObject)
+            return;
+        
+        console.assert(frameManifest instanceof WebInspector.ApplicationCacheFrame);
+        
+        this.updateStatus(frameManifest.status);
+    },
+
+    /**
+     * @param {number} status
+     */
+    updateStatus: function(status)
+    {
+        var oldStatus = this._status;
+        this._status = status;
+        
+        if (this.visible && this._status === WebInspector.ApplicationCacheManager.Status.Idle && (oldStatus === WebInspector.ApplicationCacheManager.Status.UpdateReady || !this._resources))
+            this._markDirty();
+
+        this._maybeUpdate();
+    },
+
+    _update: function()
+    {
+        WebInspector.applicationCacheManager.requestApplicationCache(this._frame, this._updateCallback.bind(this));
+    },
+
+    /**
+     * @param {Object} applicationCache
+     */
+    _updateCallback: function(applicationCache)
+    {
+        if (!applicationCache || !applicationCache.manifestURL) {
+            delete this._manifest;
+            delete this._creationTime;
+            delete this._updateTime;
+            delete this._size;
+            delete this._resources;
+            
+            this._emptyView.classList.remove("hidden");
+            
+            if (this._dataGrid)
+                this._dataGrid.element.classList.add("hidden");
+            return;
+        }
+
+        // FIXME: are these variables needed anywhere else?
+        this._manifest = applicationCache.manifestURL;
+        this._creationTime = applicationCache.creationTime;
+        this._updateTime = applicationCache.updateTime;
+        this._size = applicationCache.size;
+        this._resources = applicationCache.resources;
+
+        if (!this._dataGrid)
+            this._createDataGrid();
+
+        this._populateDataGrid();
+        this._dataGrid.autoSizeColumns(20, 80);
+        this._dataGrid.element.classList.remove("hidden");
+        
+        this._emptyView.classList.add("hidden");
+    },
+
+    _createDataGrid: function()
+    {
+        var columns = { 0: {}, 1: {}, 2: {} };
+        columns[0].title = WebInspector.UIString("Resource");
+        columns[0].sort = "ascending";
+        columns[0].sortable = true;
+        columns[1].title = WebInspector.UIString("Type");
+        columns[1].sortable = true;
+        columns[2].title = WebInspector.UIString("Size");
+        columns[2].aligned = "right";
+        columns[2].sortable = true;
+        this._dataGrid = new WebInspector.DataGrid(columns);
+        this.element.appendChild(this._dataGrid.element);
+        this._dataGrid.updateLayout();
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._populateDataGrid, this);
+    },
+
+    _populateDataGrid: function()
+    {
+        var selectedResource = this._dataGrid.selectedNode ? this._dataGrid.selectedNode.resource : null;
+        var sortDirection = this._dataGrid.sortOrder === "ascending" ? 1 : -1;
+
+        function numberCompare(field, resource1, resource2)
+        {
+            return sortDirection * (resource1[field] - resource2[field]);
+        }
+        function localeCompare(field, resource1, resource2)
+        {
+             return sortDirection * (resource1[field] + "").localeCompare(resource2[field] + "")
+        }
+
+        var comparator;
+        switch (parseInt(this._dataGrid.sortColumnIdentifier, 10)) {
+            case 0: comparator = localeCompare.bind(this, "url"); break;
+            case 1: comparator = localeCompare.bind(this, "type"); break;
+            case 2: comparator = numberCompare.bind(this, "size"); break;
+            default: localeCompare.bind(this, "resource"); // FIXME: comparator = ?
+        }
+
+        this._resources.sort(comparator);
+        this._dataGrid.removeChildren();
+
+        var nodeToSelect;
+        for (var i = 0; i < this._resources.length; ++i) {
+            var data = {};
+            var resource = this._resources[i];
+            data[0] = resource.url;
+            data[1] = resource.type;
+            data[2] = Number.bytesToString(resource.size);
+            var node = new WebInspector.DataGridNode(data);
+            node.resource = resource;
+            node.selectable = true;
+            this._dataGrid.appendChild(node);
+            if (resource === selectedResource) {
+                nodeToSelect = node;
+                nodeToSelect.selected = true;
+            }
+        }
+
+        if (!nodeToSelect && this._dataGrid.children.length)
+            this._dataGrid.children[0].selected = true;
+    },
+
+    _deleteButtonClicked: function(event)
+    {
+        if (!this._dataGrid || !this._dataGrid.selectedNode)
+            return;
+
+        // FIXME: Delete Button semantics are not yet defined. (Delete a single, or all?)
+        this._deleteCallback(this._dataGrid.selectedNode);
+    },
+
+    _deleteCallback: function(node)
+    {
+        // FIXME: Should we delete a single (selected) resource or all resources?
+        // InspectorBackend.deleteCachedResource(...)
+        // this._update();
+    }
+}
+
+WebInspector.ApplicationCacheFrameContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameTreeElement.js b/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameTreeElement.js
new file mode 100644
index 000000000..5907508a7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameTreeElement.js
@@ -0,0 +1,61 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ApplicationCacheFrameTreeElement = function(representedObject)
+{
+    console.assert(representedObject instanceof WebInspector.ApplicationCacheFrame);
+
+    WebInspector.GeneralTreeElement.call(this, WebInspector.ApplicationCacheFrameTreeElement.StyleClassName, "", "", representedObject, false);
+
+    this.small = true;
+    
+    this.updateTitles();
+};
+
+WebInspector.ApplicationCacheFrameTreeElement.StyleClassName = "application-cache-frame";
+
+WebInspector.ApplicationCacheFrameTreeElement.prototype = {
+    constructor: WebInspector.ApplicationCacheFrameTreeElement,
+
+    updateTitles: function()
+    {
+        var url = this.representedObject.frame.url;
+        var parsedURL = parseURL(url);
+
+        this.mainTitle = WebInspector.displayNameForURL(url, parsedURL);
+
+        // Show the host as the subtitle only if it doesn't match the subtitle of the manifest tree element,
+        // and it doesn't match the mainTitle.
+        var subtitle = WebInspector.displayNameForHost(parsedURL.host);
+
+        // FIXME: This is bad layering. We should not be calling a global object to get this.
+        var manifestTreeElement = WebInspector.resourceSidebarPanel.treeElementForRepresentedObject(this.representedObject.manifest);
+
+        var subtitleIsDuplicate = subtitle === this._mainTitle || subtitle === manifestTreeElement.subtitle;
+        this.subtitle = subtitleIsDuplicate ? null : subtitle;
+    }
+};
+
+WebInspector.ApplicationCacheFrameTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheIcons.css b/Source/WebInspectorUI/UserInterface/ApplicationCacheIcons.css
new file mode 100644
index 000000000..a54973c89
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ApplicationCacheIcons.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.application-cache-manifest .icon {
+    content: -webkit-image-set(url(Images/ApplicationCacheManifest.png) 1x, url(Images/ApplicationCacheManifest@2x.png) 2x);
+}
+
+.application-cache-frame .icon {
+    content: -webkit-image-set(url(Images/ApplicationCache.png) 1x, url(Images/ApplicationCache@2x.png) 2x);
+}
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheManager.js b/Source/WebInspectorUI/UserInterface/ApplicationCacheManager.js
new file mode 100644
index 000000000..854100606
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ApplicationCacheManager.js
@@ -0,0 +1,196 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ApplicationCacheManager = function()
+{
+    WebInspector.Object.call(this);
+
+    ApplicationCacheAgent.enable();
+
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasRemoved, this._childFrameWasRemoved, this);
+
+    this._online = true;
+
+    this.initialize();
+};
+
+WebInspector.ApplicationCacheManager.Event = {
+    Cleared: "application-cache-manager-cleared",
+    FrameManifestAdded: "application-cache-manager-frame-manifest-added",
+    FrameManifestRemoved: "application-cache-manager-frame-manifest-removed",
+    FrameManifestStatusChanged: "application-cache-manager-frame-manifest-status-changed",
+    NetworkStateUpdated: "application-cache-manager-network-state-updated"
+};
+
+WebInspector.ApplicationCacheManager.Status = {
+    Uncached: 0,
+    Idle: 1,
+    Checking: 2,
+    Downloading: 3,
+    UpdateReady: 4,
+    Obsolete: 5
+};
+
+WebInspector.ApplicationCacheManager.prototype = {
+    constructor: WebInspector.ApplicationCacheManager,
+
+    // Public
+
+    initialize: function()
+    {
+        this._applicationCacheObjects = [];
+
+        ApplicationCacheAgent.getFramesWithManifests(this._framesWithManifestsLoaded.bind(this));
+    },
+
+    networkStateUpdated: function(isNowOnline)
+    {
+        this._online = isNowOnline;
+        
+        this.dispatchEventToListeners(WebInspector.ApplicationCacheManager.Event.NetworkStateUpdated, {online: this._online});
+    },
+
+    get online()
+    {
+        return this._online;
+    },
+
+    applicationCacheStatusUpdated: function(frameId, manifestURL, status)
+    {
+        var frame = WebInspector.frameResourceManager.frameForIdentifier(frameId);
+        if (!frame)
+            return;
+        
+        this._frameManifestUpdated(frame, manifestURL, status);
+    },
+
+    requestApplicationCache: function(frame, callback)
+    {
+        function callbackWrapper(error, applicationCache)
+        {
+            if (error) {
+                callback(null);
+                return;
+            }
+            
+            callback(applicationCache);
+        }
+        
+        ApplicationCacheAgent.getApplicationCacheForFrame(frame.id, callbackWrapper);
+    },
+
+    // Private
+
+    _mainResourceDidChange: function(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        if (event.target.isMainFrame()) {
+            // If we are dealing with the main frame, we want to clear our list of objects, because we are navigating to a new page.
+            this.initialize();
+
+            this.dispatchEventToListeners(WebInspector.ApplicationCacheManager.Event.Cleared);
+
+            return;
+        }
+
+        ApplicationCacheAgent.getManifestForFrame(event.target.id, this._manifestForFrameLoaded.bind(this, event.target.id));
+    },
+
+    _childFrameWasRemoved: function(event)
+    {
+        this._frameManifestRemoved(event.data.childFrame);
+    },
+
+    _manifestForFrameLoaded: function(frameId, error, manifestURL)
+    {
+        if (error)
+            return;
+
+        var frame = WebInspector.frameResourceManager.frameForIdentifier(frameId);
+        if (!frame)
+            return;
+        
+        if (!manifestURL)
+            this._frameManifestRemoved(frame);
+    },
+    
+    _framesWithManifestsLoaded: function(error, framesWithManifests)
+    {
+        if (error)
+            return;
+        
+        for (var i = 0; i < framesWithManifests.length; ++i) {
+            var frame = WebInspector.frameResourceManager.frameForIdentifier(framesWithManifests[i].frameId);
+            if (!frame)
+                continue;
+
+            this._frameManifestUpdated(frame, framesWithManifests[i].manifestURL, framesWithManifests[i].status);
+        }
+    },
+    
+    _frameManifestUpdated: function(frame, manifestURL, status)
+    {
+        if (status === WebInspector.ApplicationCacheManager.Status.Uncached) {
+            this._frameManifestRemoved(frame);
+            return;
+        }
+
+        if (!manifestURL)
+            return;
+
+        var manifestFrame = this._applicationCacheObjects[frame.id];
+        if (manifestFrame && manifestURL !== manifestFrame.manifest.manifestURL)
+            this._frameManifestRemoved(frame);
+
+        var oldStatus = manifestFrame ? manifestFrame.status : -1;
+        var statusChanged = manifestFrame && status !== oldStatus;
+        if (manifestFrame)
+            manifestFrame.status = status;
+        
+        if (!this._applicationCacheObjects[frame.id]) {
+            var cacheManifest = new WebInspector.ApplicationCacheManifest(manifestURL);
+            this._applicationCacheObjects[frame.id] = new WebInspector.ApplicationCacheFrame(frame, cacheManifest, status);
+
+            this.dispatchEventToListeners(WebInspector.ApplicationCacheManager.Event.FrameManifestAdded, {frameManifest: this._applicationCacheObjects[frame.id]});
+        }
+        
+        if (statusChanged)
+            this.dispatchEventToListeners(WebInspector.ApplicationCacheManager.Event.FrameManifestStatusChanged, {frameManifest: this._applicationCacheObjects[frame.id]});
+    },
+    
+    _frameManifestRemoved: function(frame)
+    {
+        if (!this._applicationCacheObjects[frame.id])
+            return;
+
+        delete this._applicationCacheObjects[frame.id];
+
+        this.dispatchEventToListeners(WebInspector.ApplicationCacheManager.Event.FrameManifestRemoved, {frame: frame});
+    }
+};
+
+WebInspector.ApplicationCacheManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheManifest.js b/Source/WebInspectorUI/UserInterface/ApplicationCacheManifest.js
new file mode 100644
index 000000000..9145899f4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ApplicationCacheManifest.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ApplicationCacheManifest = function(manifestURL)
+{
+    WebInspector.Object.call(this);
+    
+    this._manifestURL = manifestURL;
+};
+
+WebInspector.ApplicationCacheManifest.prototype = {
+    constructor: WebInspector.ApplicationCacheManifest,
+    
+    get manifestURL()
+    {
+        return this._manifestURL;
+    }    
+};
+
+WebInspector.ApplicationCacheManifest.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheManifestTreeElement.js b/Source/WebInspectorUI/UserInterface/ApplicationCacheManifestTreeElement.js
new file mode 100644
index 000000000..2d64b6dbe
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ApplicationCacheManifestTreeElement.js
@@ -0,0 +1,74 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ApplicationCacheManifestTreeElement = function(representedObject)
+{
+    console.assert(representedObject instanceof WebInspector.ApplicationCacheManifest);
+
+    WebInspector.StorageTreeElement.call(this, WebInspector.ApplicationCacheManifestTreeElement.StyleClassName, "", representedObject);
+};
+
+WebInspector.ApplicationCacheManifestTreeElement.StyleClassName = "application-cache-manifest";
+
+WebInspector.ApplicationCacheManifestTreeElement.prototype = {
+    constructor: WebInspector.ApplicationCacheManifestTreeElement,
+
+    // Public
+
+    get name()
+    {
+        if (!this._name)
+            this._generateTitles();
+    
+        return this._name;
+    },
+
+    get secondaryName()
+    {
+        if (!this._secondaryName)
+            this._generateTitles();
+        
+        return this._secondaryName;
+    },
+
+    get categoryName()
+    {
+        return WebInspector.UIString("Application Cache");
+    },
+    
+    _generateTitles: function()
+    {
+        var parsedURL = parseURL(this.representedObject.manifestURL);
+
+        // Prefer the last path component, with a fallback for the host as the main title.
+        this._name = WebInspector.displayNameForURL(this.representedObject.manifestURL, parsedURL);
+
+        // Show the host as the subtitle.
+        var secondaryName = WebInspector.displayNameForHost(parsedURL.host);
+        this._secondaryName = this._name !== secondaryName ? secondaryName : null;
+    }
+};
+
+WebInspector.ApplicationCacheManifestTreeElement.prototype.__proto__ = WebInspector.StorageTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheObserver.js b/Source/WebInspectorUI/UserInterface/ApplicationCacheObserver.js
new file mode 100644
index 000000000..7b50a38c5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ApplicationCacheObserver.js
@@ -0,0 +1,47 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ApplicationCacheObserver = function()
+{
+    WebInspector.Object.call(this);
+};
+
+WebInspector.ApplicationCacheObserver.prototype = {
+    constructor: WebInspector.ApplicationCacheObserver,
+
+    // Events defined by the "ApplicationCache" domain (see WebCore/inspector/Inspector.json).
+
+    applicationCacheStatusUpdated: function(frameId, manifestURL, status)
+    {
+        WebInspector.applicationCacheManager.applicationCacheStatusUpdated(frameId, manifestURL, status);
+    },
+
+    networkStateUpdated: function(isNowOnline)
+    {
+        WebInspector.applicationCacheManager.networkStateUpdated(isNowOnline);
+    }
+};
+
+WebInspector.ApplicationCacheObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/BinarySearch.js b/Source/WebInspectorUI/UserInterface/BinarySearch.js
new file mode 100644
index 000000000..50467b74c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/BinarySearch.js
@@ -0,0 +1,80 @@
+/*
+ * Copyright (C) 2011 Google Inc. All rights reserved.
+ * Copyright (C) 2007, 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @param {*} object
+ * @param {Array.<*>} array
+ * @param {function(*, *)} comparator
+ */
+function binarySearch(object, array, comparator)
+{
+    var first = 0;
+    var last = array.length - 1;
+
+    while (first <= last) {
+        var mid = (first + last) >> 1;
+        var c = comparator(object, array[mid]);
+        if (c > 0)
+            first = mid + 1;
+        else if (c < 0)
+            last = mid - 1;
+        else
+            return mid;
+    }
+
+    // Return the nearest lesser index, "-1" means "0, "-2" means "1", etc.
+    return -(first + 1);
+}
+
+Object.defineProperty(Array.prototype, "binaryIndexOf", { value: function(value, comparator)
+{
+    var result = binarySearch(value, this, comparator);
+    return result >= 0 ? result : -1;
+}});
+
+/**
+ * @param {*} anObject
+ * @param {Array.<*>} aList
+ * @param {function(*, *)} aFunction
+ */
+function insertionIndexForObjectInListSortedByFunction(anObject, aList, aFunction)
+{
+    var index = binarySearch(anObject, aList, aFunction);
+    if (index < 0)
+        // See binarySearch implementation.
+        return -index - 1;
+    else {
+        // Return the first occurance of an item in the list.
+        while (index > 0 && aFunction(anObject, aList[index - 1]) === 0)
+            index--;
+        return index;
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/BlankStylePropertiesSection.js b/Source/WebInspectorUI/UserInterface/BlankStylePropertiesSection.js
new file mode 100644
index 000000000..0ed2a7244
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/BlankStylePropertiesSection.js
@@ -0,0 +1,99 @@
+/*
+ * Copyright (C) 2007, 2013 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ * @extends {WebInspector.StylePropertiesSection}
+ */
+WebInspector.BlankStylePropertiesSection = function(parentPane, defaultSelectorText)
+{
+    WebInspector.StylePropertiesSection.call(this, parentPane, {selectorText: defaultSelectorText, rule: {isViaInspector: true}}, true, false, false);
+    this.element.classList.add("blank-section");
+}
+
+WebInspector.BlankStylePropertiesSection.prototype = {
+    get isBlank()
+    {
+        return !this._normal;
+    },
+
+    expand: function()
+    {
+        if (!this.isBlank)
+            WebInspector.StylePropertiesSection.prototype.expand.call(this);
+    },
+
+    editingSelectorCommitted: function(element, newContent, oldContent, context, moveDirection)
+    {
+        if (!this.isBlank) {
+            WebInspector.StylePropertiesSection.prototype.editingSelectorCommitted.call(this, element, newContent, oldContent, context, moveDirection);
+            return;
+        }
+
+        function successCallback(newRule, doesSelectorAffectSelectedNode)
+        {
+            var styleRule = { section: this, style: newRule.style, selectorText: newRule.selectorText, sourceURL: newRule.sourceURL, rule: newRule };
+            this.makeNormal(styleRule);
+
+            if (!doesSelectorAffectSelectedNode) {
+                this.noAffect = true;
+                this.element.classList.add("no-affect");
+            }
+
+            this._selectorRefElement.textContent = WebInspector.UIString("via inspector");
+            this.expand();
+            if (this.element.parentElement) // Might have been detached already.
+                this._moveEditorFromSelector(moveDirection);
+        }
+
+        WebInspector.cssModel.addRule(this.pane.node.id, newContent, successCallback.bind(this), this.editingSelectorCancelled.bind(this));
+    },
+
+    editingSelectorCancelled: function()
+    {
+        if (!this.isBlank) {
+            WebInspector.StylePropertiesSection.prototype.editingSelectorCancelled.call(this);
+            return;
+        }
+
+        this.pane.removeSection(this);
+    },
+
+    makeNormal: function(styleRule)
+    {
+        this.element.classList.remove("blank-section");
+        this.styleRule = styleRule;
+        this.rule = styleRule.rule;
+
+        // FIXME: replace this instance by a normal WebInspector.StylePropertiesSection.
+        this._normal = true;
+    }
+}
+
+WebInspector.BlankStylePropertiesSection.prototype.__proto__ = WebInspector.StylePropertiesSection.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/BottomUpProfileDataGridTree.js b/Source/WebInspectorUI/UserInterface/BottomUpProfileDataGridTree.js
new file mode 100644
index 000000000..a83345e14
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/BottomUpProfileDataGridTree.js
@@ -0,0 +1,265 @@
+/*
+ * Copyright (C) 2009 280 North Inc. All Rights Reserved.
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// Bottom Up Profiling shows the entire callstack backwards:
+// The root node is a representation of each individual function called, and each child of that node represents
+// a reverse-callstack showing how many of those calls came from it. So, unlike top-down, the statistics in
+// each child still represent the root node. We have to be particularly careful of recursion with this mode
+// because a root node can represent itself AND an ancestor.
+
+WebInspector.BottomUpProfileDataGridNode = function(/*ProfileView*/ profileView, /*ProfileNode*/ profileNode, /*BottomUpProfileDataGridTree*/ owningTree)
+{
+    WebInspector.ProfileDataGridNode.call(this, profileView, profileNode, owningTree, this._willHaveChildren(profileNode));
+
+    this._remainingNodeInfos = [];
+}
+
+WebInspector.BottomUpProfileDataGridNode.prototype = {
+    _takePropertiesFromProfileDataGridNode: function(/*ProfileDataGridNode*/ profileDataGridNode)
+    {
+        this._save();
+
+        this.selfTime = profileDataGridNode.selfTime;
+        this.totalTime = profileDataGridNode.totalTime;
+        this.numberOfCalls = profileDataGridNode.numberOfCalls;
+    },
+
+    // When focusing, we keep just the members of the callstack.
+    _keepOnlyChild: function(/*ProfileDataGridNode*/ child)
+    {
+        this._save();
+
+        this.removeChildren();
+        this.appendChild(child);
+    },
+
+    _exclude: function(aCallUID)
+    {
+        if (this._remainingNodeInfos)
+            this._populate();
+
+        this._save();
+
+        var children = this.children;
+        var index = this.children.length;
+
+        while (index--)
+            children[index]._exclude(aCallUID);
+
+        var child = this.childrenByCallUID[aCallUID];
+
+        if (child)
+            this._merge(child, true);
+    },
+
+    _restore: function()
+    {
+        WebInspector.ProfileDataGridNode.prototype._restore();
+
+        if (!this.children.length)
+            this.hasChildren = this._willHaveChildren();
+    },
+
+    _merge: function(/*ProfileDataGridNode*/ child, /*Boolean*/ shouldAbsorb)
+    {
+        this.selfTime -= child.selfTime;
+
+        WebInspector.ProfileDataGridNode.prototype._merge.call(this, child, shouldAbsorb);
+    },
+
+    _sharedPopulate: function()
+    {
+        var remainingNodeInfos = this._remainingNodeInfos;
+        var count = remainingNodeInfos.length;
+
+        for (var index = 0; index < count; ++index) {
+            var nodeInfo = remainingNodeInfos[index];
+            var ancestor = nodeInfo.ancestor;
+            var focusNode = nodeInfo.focusNode;
+            var child = this.findChild(ancestor);
+
+            // If we already have this child, then merge the data together.
+            if (child) {
+                var totalTimeAccountedFor = nodeInfo.totalTimeAccountedFor;
+
+                child.selfTime += focusNode.selfTime;
+                child.numberOfCalls += focusNode.numberOfCalls;
+
+                if (!totalTimeAccountedFor)
+                    child.totalTime += focusNode.totalTime;
+            } else {
+                // If not, add it as a true ancestor.
+                // In heavy mode, we take our visual identity from ancestor node...
+                var child = new WebInspector.BottomUpProfileDataGridNode(this.profileView, ancestor, this.tree);
+
+                if (ancestor !== focusNode) {
+                    // but the actual statistics from the "root" node (bottom of the callstack).
+                    child.selfTime = focusNode.selfTime;
+                    child.totalTime = focusNode.totalTime;
+                    child.numberOfCalls = focusNode.numberOfCalls;
+                }
+
+                this.appendChild(child);
+            }
+
+            var parent = ancestor.parent;
+            if (parent && parent.parent) {
+                nodeInfo.ancestor = parent;
+                child._remainingNodeInfos.push(nodeInfo);
+            }
+        }
+
+        delete this._remainingNodeInfos;
+    },
+
+    _willHaveChildren: function(profileNode)
+    {
+        profileNode = profileNode || this.profileNode;
+        // In bottom up mode, our parents are our children since we display an inverted tree.
+        // However, we don't want to show the very top parent since it is redundant.
+        return !!(profileNode.parent && profileNode.parent.parent);
+    }
+}
+
+WebInspector.BottomUpProfileDataGridNode.prototype.__proto__ = WebInspector.ProfileDataGridNode.prototype;
+
+WebInspector.BottomUpProfileDataGridTree = function(/*ProfileView*/ aProfileView, /*ProfileNode*/ aProfileNode)
+{
+    WebInspector.ProfileDataGridTree.call(this, aProfileView, aProfileNode);
+
+    // Iterate each node in pre-order.
+    var profileNodeUIDs = 0;
+    var profileNodeGroups = [[], [aProfileNode]];
+    var visitedProfileNodesForCallUID = {};
+
+    this._remainingNodeInfos = [];
+
+    for (var profileNodeGroupIndex = 0; profileNodeGroupIndex < profileNodeGroups.length; ++profileNodeGroupIndex) {
+        var parentProfileNodes = profileNodeGroups[profileNodeGroupIndex];
+        var profileNodes = profileNodeGroups[++profileNodeGroupIndex];
+        var count = profileNodes.length;
+
+        for (var index = 0; index < count; ++index) {
+            var profileNode = profileNodes[index];
+
+            if (!profileNode.UID)
+                profileNode.UID = ++profileNodeUIDs;
+
+            if (profileNode.head && profileNode !== profileNode.head) {
+                // The total time of this ancestor is accounted for if we're in any form of recursive cycle.
+                var visitedNodes = visitedProfileNodesForCallUID[profileNode.callUID];
+                var totalTimeAccountedFor = false;
+
+                if (!visitedNodes) {
+                    visitedNodes = {}
+                    visitedProfileNodesForCallUID[profileNode.callUID] = visitedNodes;
+                } else {
+                    // The total time for this node has already been accounted for iff one of it's parents has already been visited.
+                    // We can do this check in this style because we are traversing the tree in pre-order.
+                    var parentCount = parentProfileNodes.length;
+                    for (var parentIndex = 0; parentIndex < parentCount; ++parentIndex) {
+                        if (visitedNodes[parentProfileNodes[parentIndex].UID]) {
+                            totalTimeAccountedFor = true;
+                            break;
+                        }
+                    }
+                }
+
+                visitedNodes[profileNode.UID] = true;
+
+                this._remainingNodeInfos.push({ ancestor:profileNode, focusNode:profileNode, totalTimeAccountedFor:totalTimeAccountedFor });
+            }
+
+            var children = profileNode.children;
+            if (children.length) {
+                profileNodeGroups.push(parentProfileNodes.concat([profileNode]))
+                profileNodeGroups.push(children);
+            }
+        }
+    }
+
+    // Populate the top level nodes.
+    WebInspector.BottomUpProfileDataGridNode.prototype._populate.call(this);
+
+    return this;
+}
+
+WebInspector.BottomUpProfileDataGridTree.prototype = {
+    // When focusing, we keep the entire callstack up to this ancestor.
+    focus: function(/*ProfileDataGridNode*/ profileDataGridNode)
+    {
+        if (!profileDataGridNode)
+            return;
+
+        this._save();
+
+        var currentNode = profileDataGridNode;
+        var focusNode = profileDataGridNode;
+
+        while (currentNode.parent && (currentNode instanceof WebInspector.ProfileDataGridNode)) {
+            currentNode._takePropertiesFromProfileDataGridNode(profileDataGridNode);
+
+            focusNode = currentNode;
+            currentNode = currentNode.parent;
+
+            if (currentNode instanceof WebInspector.ProfileDataGridNode)
+                currentNode._keepOnlyChild(focusNode);
+        }
+
+        this.children = [focusNode];
+        this.totalTime = profileDataGridNode.totalTime;
+    },
+
+    exclude: function(/*ProfileDataGridNode*/ profileDataGridNode)
+    {
+        if (!profileDataGridNode)
+            return;
+
+        this._save();
+
+        var excludedCallUID = profileDataGridNode.callUID;
+        var excludedTopLevelChild = this.childrenByCallUID[excludedCallUID];
+
+        // If we have a top level node that is excluded, get rid of it completely (not keeping children),
+        // since bottom up data relies entirely on the root node.
+        if (excludedTopLevelChild)
+            this.children.remove(excludedTopLevelChild);
+
+        var children = this.children;
+        var count = children.length;
+
+        for (var index = 0; index < count; ++index)
+            children[index]._exclude(excludedCallUID);
+
+        if (this.lastComparator)
+            this.sort(this.lastComparator, true);
+    },
+
+    _sharedPopulate: WebInspector.BottomUpProfileDataGridNode.prototype._sharedPopulate
+}
+
+WebInspector.BottomUpProfileDataGridTree.prototype.__proto__ = WebInspector.ProfileDataGridTree.prototype;
+
diff --git a/Source/WebInspectorUI/UserInterface/BoxModelDetailsSectionRow.css b/Source/WebInspectorUI/UserInterface/BoxModelDetailsSectionRow.css
new file mode 100644
index 000000000..7a88588c9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/BoxModelDetailsSectionRow.css
@@ -0,0 +1,134 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.details-section .row.box-model {
+    padding: 6px;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.details-section .row.box-model .label {
+    position: absolute;
+    color: black;
+    margin-left: 3px;
+    padding-left: 2px;
+    padding-right: 2px;
+}
+
+.details-section .row.box-model .position {
+    border: 1px rgb(66%, 66%, 66%) dotted;
+    background-color: rgb(231, 231, 231);
+    display: inline-block;
+    text-align: center;
+    padding: 3px;
+    margin: 3px;
+}
+
+.details-section .row.box-model .margin {
+    border: 1px dashed;
+    background-color: rgb(231, 231, 231);
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    padding: 3px;
+    margin: 3px;
+}
+
+.details-section .row.box-model .margin.active {
+    background-color: rgba(246, 178, 107, .66);
+}
+
+.details-section .row.box-model .border {
+    border: 1px black solid;
+    background-color: rgb(231, 231, 231);
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    padding: 3px;
+    margin: 3px;
+}
+
+.details-section .row.box-model .border.active {
+    background-color: rgba(255, 229, 153, .66);
+}
+
+.details-section .row.box-model .padding {
+    border: 1px grey dashed;
+    background-color: rgb(231, 231, 231);
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    padding: 3px;
+    margin: 3px;
+}
+
+.details-section .row.box-model .padding.active {
+    background-color: rgba(147, 196, 125, .55);
+}
+
+.details-section .row.box-model .content {
+    position: static;
+    border: 1px gray solid;
+    background-color: rgb(231, 231, 231);
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    padding: 3px;
+    margin: 3px;
+    min-width: 80px;
+    text-align: center;
+    overflow: visible;
+}
+
+.details-section .row.box-model .content.active {
+    background-color: rgba(111, 168, 220, .66);
+}
+
+.details-section .row.box-model .content span {
+    display: inline-block;
+}
+
+.details-section .row.box-model .editing {
+    position: relative;
+    z-index: 100;
+}
+
+.details-section .row.box-model .left {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.details-section .row.box-model .right {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.details-section .row.box-model .top {
+    display: inline-block;
+}
+
+.details-section .row.box-model .bottom {
+    display: inline-block;
+}
diff --git a/Source/WebInspectorUI/UserInterface/BoxModelDetailsSectionRow.js b/Source/WebInspectorUI/UserInterface/BoxModelDetailsSectionRow.js
new file mode 100644
index 000000000..d607cce87
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/BoxModelDetailsSectionRow.js
@@ -0,0 +1,428 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.BoxModelDetailsSectionRow = function() {
+    WebInspector.DetailsSectionRow.call(this, WebInspector.UIString("No Box Model Information"));
+
+    this.element.classList.add(WebInspector.BoxModelDetailsSectionRow.StyleClassName);
+
+    this._nodeStyles = null;
+};
+
+WebInspector.BoxModelDetailsSectionRow.StyleClassName = "box-model";
+WebInspector.BoxModelDetailsSectionRow.StyleValueDelimiters = " \xA0\t\n\"':;,/()";
+WebInspector.BoxModelDetailsSectionRow.CSSNumberRegex = /^(-?(?:\d+(?:\.\d+)?|\.\d+))$/;
+
+WebInspector.BoxModelDetailsSectionRow.prototype = {
+    constructor: WebInspector.BoxModelDetailsSectionRow,
+
+    // Public
+
+    get nodeStyles()
+    {
+        return this._nodeStyles;
+    },
+
+    set nodeStyles(nodeStyles)
+    {
+        this._nodeStyles = nodeStyles;
+
+        this._refresh();
+    },
+
+    // Private
+
+    _refresh: function()
+    {
+        if (this._ignoreNextRefresh) {
+            delete this._ignoreNextRefresh;
+            return;
+        }
+
+        this._updateMetrics();
+    },
+
+    _getPropertyValueAsPx: function(style, propertyName)
+    {
+        return Number(style.propertyForName(propertyName).value.replace(/px$/, "") || 0);
+    },
+
+    _getBox: function(computedStyle, componentName)
+    {
+        var suffix = componentName === "border" ? "-width" : "";
+        var left = this._getPropertyValueAsPx(computedStyle, componentName + "-left" + suffix);
+        var top = this._getPropertyValueAsPx(computedStyle, componentName + "-top" + suffix);
+        var right = this._getPropertyValueAsPx(computedStyle, componentName + "-right" + suffix);
+        var bottom = this._getPropertyValueAsPx(computedStyle, componentName + "-bottom" + suffix);
+        return { left: left, top: top, right: right, bottom: bottom };
+    },
+
+    _highlightDOMNode: function(showHighlight, mode, event)
+    {
+        event.stopPropagation();
+
+        var nodeId = showHighlight ? this.nodeStyles.node.id : 0;
+        if (nodeId) {
+            if (this._highlightMode === mode)
+                return;
+            this._highlightMode = mode;
+            WebInspector.domTreeManager.highlightDOMNode(nodeId, mode);
+        } else {
+            delete this._highlightMode;
+            WebInspector.domTreeManager.hideDOMNodeHighlight();
+        }
+
+        for (var i = 0; this._boxElements && i < this._boxElements.length; ++i) {
+            var element = this._boxElements[i];
+            if (nodeId && (mode === "all" || element._name === mode))
+                element.classList.add("active");
+            else
+                element.classList.remove("active");
+        }
+    },
+
+    _updateMetrics: function()
+    {
+        // Updating with computed style.
+        var metricsElement = document.createElement("div");
+
+        var self = this;
+        var style = this._nodeStyles.computedStyle;
+
+        function createElement(type, value, name, propertyName, style)
+        {
+            // Check if the value is a float and whether it should be rounded.
+            var floatValue = parseFloat(value);
+            var shouldRoundValue = (!isNaN(floatValue) && floatValue % 1 !== 0);
+
+            var element = document.createElement(type);
+            element.textContent = shouldRoundValue ? ("~" + Math.round(floatValue * 100) / 100) : value;
+            if (shouldRoundValue)
+                element.title = value;
+            element.addEventListener("dblclick", this._startEditing.bind(this, element, name, propertyName, style), false);
+            return element;
+        }
+
+        function createBoxPartElement(style, name, side, suffix)
+        {
+            var propertyName = (name !== "position" ? name + "-" : "") + side + suffix;
+            var value = style.propertyForName(propertyName).value;
+            if (value === "" || (name !== "position" && value === "0px"))
+                value = "\u2012";
+            else if (name === "position" && value === "auto")
+                value = "\u2012";
+            value = value.replace(/px$/, "");
+
+            var element = createElement.call(this, "div", value, name, propertyName, style);
+            element.className = side;
+            return element;
+        }
+
+        function createContentAreaWidthElement(style)
+        {
+            var width = style.propertyForName("width").value.replace(/px$/, "");
+            if (style.propertyForName("box-sizing").value === "border-box") {
+                var borderBox = self._getBox(style, "border");
+                var paddingBox = self._getBox(style, "padding");
+
+                width = width - borderBox.left - borderBox.right - paddingBox.left - paddingBox.right;
+            }
+
+            return createElement.call(this, "span", width, "width", "width", style);
+        }
+
+        function createContentAreaHeightElement(style)
+        {
+            var height = style.propertyForName("height").value.replace(/px$/, "");
+            if (style.propertyForName("box-sizing").value === "border-box") {
+                var borderBox = self._getBox(style, "border");
+                var paddingBox = self._getBox(style, "padding");
+
+                height = height - borderBox.top - borderBox.bottom - paddingBox.top - paddingBox.bottom;
+            }
+
+            return createElement.call(this, "span", height, "height", "height", style);
+        }
+
+        // Display types for which margin is ignored.
+        var noMarginDisplayType = {
+            "table-cell": true,
+            "table-column": true,
+            "table-column-group": true,
+            "table-footer-group": true,
+            "table-header-group": true,
+            "table-row": true,
+            "table-row-group": true
+        };
+
+        // Display types for which padding is ignored.
+        var noPaddingDisplayType = {
+            "table-column": true,
+            "table-column-group": true,
+            "table-footer-group": true,
+            "table-header-group": true,
+            "table-row": true,
+            "table-row-group": true
+        };
+
+        // Position types for which top, left, bottom and right are ignored.
+        var noPositionType = {
+            "static": true
+        };
+
+        this._boxElements = [];
+        var boxes = ["content", "padding", "border", "margin", "position"];
+
+        if (!style.properties.length) {
+            this.showEmptyMessage();
+            return;
+        }
+
+        var previousBox = null;
+        for (var i = 0; i < boxes.length; ++i) {
+            var name = boxes[i];
+
+            if (name === "margin" && noMarginDisplayType[style.propertyForName("display").value])
+                continue;
+            if (name === "padding" && noPaddingDisplayType[style.propertyForName("display").value])
+                continue;
+            if (name === "position" && noPositionType[style.propertyForName("position").value])
+                continue;
+
+            var boxElement = document.createElement("div");
+            boxElement.className = name;
+            boxElement._name = name;
+            boxElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, true, name === "position" ? "all" : name), false);
+            this._boxElements.push(boxElement);
+
+            if (name === "content") {
+                var widthElement = createContentAreaWidthElement.call(this, style);
+                var heightElement = createContentAreaHeightElement.call(this, style);
+
+                boxElement.appendChild(widthElement);
+                boxElement.appendChild(document.createTextNode(" \u00D7 "));
+                boxElement.appendChild(heightElement);
+            } else {
+                var suffix = (name === "border" ? "-width" : "");
+
+                var labelElement = document.createElement("div");
+                labelElement.className = "label";
+                labelElement.textContent = boxes[i];
+                boxElement.appendChild(labelElement);
+
+                boxElement.appendChild(createBoxPartElement.call(this, style, name, "top", suffix));
+                boxElement.appendChild(document.createElement("br"));
+                boxElement.appendChild(createBoxPartElement.call(this, style, name, "left", suffix));
+
+                if (previousBox)
+                    boxElement.appendChild(previousBox);
+
+                boxElement.appendChild(createBoxPartElement.call(this, style, name, "right", suffix));
+                boxElement.appendChild(document.createElement("br"));
+                boxElement.appendChild(createBoxPartElement.call(this, style, name, "bottom", suffix));
+            }
+
+            previousBox = boxElement;
+        }
+
+        metricsElement.appendChild(previousBox);
+        metricsElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, false, ""), false);
+
+        this.hideEmptyMessage();
+        this.element.appendChild(metricsElement);
+    },
+
+    _startEditing: function(targetElement, box, styleProperty, computedStyle)
+    {
+        if (WebInspector.isBeingEdited(targetElement))
+            return;
+
+        // If the target element has a title use it as the editing value
+        // since the current text is likely truncated/rounded.
+        if (targetElement.title)
+            targetElement.textContent = targetElement.title;
+
+        var context = {box: box, styleProperty: styleProperty};
+        var boundKeyDown = this._handleKeyDown.bind(this, context, styleProperty);
+        context.keyDownHandler = boundKeyDown;
+        targetElement.addEventListener("keydown", boundKeyDown, false);
+
+        this._isEditingMetrics = true;
+
+        var config = new WebInspector.EditingConfig(this._editingCommitted.bind(this), this._editingCancelled.bind(this), context);
+        WebInspector.startEditing(targetElement, config);
+
+        window.getSelection().setBaseAndExtent(targetElement, 0, targetElement, 1);
+    },
+
+    _alteredFloatNumber: function(number, event)
+    {
+        var arrowKeyPressed = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down");
+
+        // Jump by 10 when shift is down or jump by 0.1 when Alt/Option is down.
+        // Also jump by 10 for page up and down, or by 100 if shift is held with a page key.
+        var changeAmount = 1;
+        if (event.shiftKey && !arrowKeyPressed)
+            changeAmount = 100;
+        else if (event.shiftKey || !arrowKeyPressed)
+            changeAmount = 10;
+        else if (event.altKey)
+            changeAmount = 0.1;
+
+        if (event.keyIdentifier === "Down" || event.keyIdentifier === "PageDown")
+            changeAmount *= -1;
+
+        // Make the new number and constrain it to a precision of 6, this matches numbers the engine returns.
+        // Use the Number constructor to forget the fixed precision, so 1.100000 will print as 1.1.
+        var result = Number((number + changeAmount).toFixed(6));
+        if (!String(result).match(WebInspector.BoxModelDetailsSectionRow.CSSNumberRegex))
+            return null;
+
+        return result;
+    },
+
+    _handleKeyDown: function(context, styleProperty, event)
+    {
+        if (!/^(?:Page)?(?:Up|Down)$/.test(event.keyIdentifier))
+            return;
+
+        var element = event.currentTarget;
+
+        var selection = window.getSelection();
+        if (!selection.rangeCount)
+            return;
+
+        var selectionRange = selection.getRangeAt(0);
+        if (!selectionRange.commonAncestorContainer.isSelfOrDescendant(element))
+            return;
+
+        var originalValue = element.textContent;
+        var wordRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, WebInspector.BoxModelDetailsSectionRow.StyleValueDelimiters, element);
+        var wordString = wordRange.toString();
+
+        var matches = /(.*?)(-?(?:\d+(?:\.\d+)?|\.\d+))(.*)/.exec(wordString);
+        var replacementString;
+        if (matches && matches.length) {
+            var prefix = matches[1];
+            var suffix = matches[3];
+            var number = this._alteredFloatNumber(parseFloat(matches[2]), event);
+            if (number === null) {
+                // Need to check for null explicitly.
+                return;
+            }
+
+            if (styleProperty !== "margin" && number < 0)
+                number = 0;
+
+            replacementString = prefix + number + suffix;
+        }
+
+        if (!replacementString)
+            return;
+
+        var replacementTextNode = document.createTextNode(replacementString);
+
+        wordRange.deleteContents();
+        wordRange.insertNode(replacementTextNode);
+
+        var finalSelectionRange = document.createRange();
+        finalSelectionRange.setStart(replacementTextNode, 0);
+        finalSelectionRange.setEnd(replacementTextNode, replacementString.length);
+
+        selection.removeAllRanges();
+        selection.addRange(finalSelectionRange);
+
+        event.handled = true;
+        event.preventDefault();
+
+        this._ignoreNextRefresh = true;
+
+        this._applyUserInput(element, replacementString, originalValue, context, false);
+    },
+
+    _editingEnded: function(element, context)
+    {
+        delete this.originalPropertyData;
+        delete this.previousPropertyDataCandidate;
+        element.removeEventListener("keydown", context.keyDownHandler, false);
+        delete this._isEditingMetrics;
+    },
+
+    _editingCancelled: function(element, context)
+    {
+        this._editingEnded(element, context);
+        this._refresh();
+    },
+
+    _applyUserInput: function(element, userInput, previousContent, context, commitEditor)
+    {
+        if (commitEditor && userInput === previousContent)
+            return this._editingCancelled(element, context); // nothing changed, so cancel
+
+        if (context.box !== "position" && (!userInput || userInput === "\u2012"))
+            userInput = "0px";
+        else if (context.box === "position" && (!userInput || userInput === "\u2012"))
+            userInput = "auto";
+
+        userInput = userInput.toLowerCase();
+        // Append a "px" unit if the user input was just a number.
+        if (/^-?(?:\d+(?:\.\d+)?|\.\d+)$/.test(userInput))
+            userInput += "px";
+
+        var styleProperty = context.styleProperty;
+        var computedStyle = this._nodeStyles.computedStyle;
+
+        if (computedStyle.propertyForName("box-sizing").value === "border-box" && (styleProperty === "width" || styleProperty === "height")) {
+            if (!userInput.match(/px$/)) {
+                console.error("For elements with box-sizing: border-box, only absolute content area dimensions can be applied");
+                return;
+            }
+
+            var borderBox = this._getBox(computedStyle, "border");
+            var paddingBox = this._getBox(computedStyle, "padding");
+            var userValuePx = Number(userInput.replace(/px$/, ""));
+            if (isNaN(userValuePx))
+                return;
+            if (styleProperty === "width")
+                userValuePx += borderBox.left + borderBox.right + paddingBox.left + paddingBox.right;
+            else
+                userValuePx += borderBox.top + borderBox.bottom + paddingBox.top + paddingBox.bottom;
+
+            userInput = userValuePx + "px";
+        }
+
+        var property = this._nodeStyles.inlineStyle.propertyForName(context.styleProperty);
+        property.value = userInput;
+        property.add();
+    },
+
+    _editingCommitted: function(element, userInput, previousContent, context)
+    {
+        this._editingEnded(element, context);
+        this._applyUserInput(element, userInput, previousContent, context, true);
+    }
+};
+
+WebInspector.BoxModelDetailsSectionRow.prototype.__proto__ = WebInspector.DetailsSectionRow.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Branch.js b/Source/WebInspectorUI/UserInterface/Branch.js
new file mode 100644
index 000000000..87e97c079
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Branch.js
@@ -0,0 +1,149 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Branch = function(displayName, revisions, locked)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(displayName);
+
+    this._displayName = displayName;
+    this._revisions = revisions instanceof Array ? revisions.slice() : [];
+    this._locked = locked || false;
+};
+
+WebInspector.Branch.prototype = {
+    constructor: WebInspector.Branch,
+
+    // Public
+
+    get displayName()
+    {
+        return this._displayName;
+    },
+
+    set displayName(displayName)
+    {
+        console.assert(displayName);
+        if (!displayName)
+            return;
+
+        this._displayName = displayName;
+    },
+
+    get revisions()
+    {
+        return this._revisions;
+    },
+
+    get locked()
+    {
+        return this._locked;
+    },
+
+    revisionForRepresentedObject: function(representedObject, doNotCreateIfNeeded)
+    {
+        for (var i = 0; i < this._revisions.length; ++i) {
+            var revision = this._revisions[i];
+            if (revision instanceof WebInspector.SourceCodeRevision && revision.sourceCode === representedObject)
+                return revision;
+        }
+
+        if (doNotCreateIfNeeded)
+            return null;
+
+        if (representedObject instanceof WebInspector.SourceCode) {
+            var revision = representedObject.originalRevision.copy();
+            representedObject.currentRevision = revision;
+            this.addRevision(revision);
+            return revision;
+        }
+
+        return null;
+    },
+
+    addRevision: function(revision)
+    {
+        console.assert(revision instanceof WebInspector.Revision);
+
+        if (this._locked)
+            return;
+
+        if (this._revisions.contains(revision))
+            return;
+
+        this._revisions.push(revision);
+    },
+
+    removeRevision: function(revision)
+    {
+        console.assert(revision instanceof WebInspector.Revision);
+
+        if (this._locked)
+            return;
+
+        this._revisions.remove(revision);
+    },
+
+    reset: function()
+    {
+        if (this._locked)
+            return;
+
+        this._revisions = [];
+    },
+
+    fork: function(displayName)
+    {
+        var copiedRevisions = this._revisions.map(function(revision) { return revision.copy(); });
+        return new WebInspector.Branch(displayName, copiedRevisions);
+    },
+
+    apply: function()
+    {
+        for (var i = 0; i < this._revisions.length; ++i)
+            this._revisions[i].apply();
+    },
+
+    revert: function()
+    {
+        for (var i = this._revisions.length - 1; i >= 0; --i)
+            this._revisions[i].revert();
+    },
+
+    lock: function()
+    {
+        console.assert(!this._locked);
+        this._locked = true;
+    },
+
+    unlock: function()
+    {
+        console.assert(this._locked);
+        this._locked = false;
+    }
+};
+
+WebInspector.Branch.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/BranchManager.js b/Source/WebInspectorUI/UserInterface/BranchManager.js
new file mode 100644
index 000000000..39004c6bb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/BranchManager.js
@@ -0,0 +1,113 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.BranchManager = function()
+{
+    WebInspector.Object.call(this);
+
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+
+    this.initialize();
+}
+
+WebInspector.BranchManager.prototype = {
+    constructor: WebInspector.BranchManager,
+
+    // Public
+
+    initialize: function()
+    {
+        this._originalBranch = new WebInspector.Branch(WebInspector.UIString("Original"), null, true);
+        this._currentBranch = this._originalBranch.fork(WebInspector.UIString("Working Copy"));
+        this._branches = [this._originalBranch, this._currentBranch];
+    },
+
+    get branches()
+    {
+        return this._branches;
+    },
+
+    get currentBranch()
+    {
+        return this._currentBranch;
+    },
+
+    set currentBranch(branch)
+    {
+        console.assert(branch instanceof WebInspector.Branch);
+        if (!(branch instanceof WebInspector.Branch))
+            return;
+
+        this._currentBranch.revert();
+
+        this._currentBranch = branch;
+
+        this._currentBranch.apply();
+    },
+
+    createBranch: function(displayName, fromBranch)
+    {
+        if (!fromBranch)
+            fromBranch = this._originalBranch;
+
+        console.assert(fromBranch instanceof WebInspector.Branch);
+        if (!(fromBranch instanceof WebInspector.Branch))
+            return;
+
+        var newBranch = fromBranch.fork(displayName);
+        this._branches.push(newBranch);
+        return newBranch;
+    },
+
+    deleteBranch: function(branch)
+    {
+        console.assert(branch instanceof WebInspector.Branch);
+        if (!(branch instanceof WebInspector.Branch))
+            return;
+
+        console.assert(branch !== this._originalBranch);
+        if (branch === this._originalBranch)
+            return;
+
+        this._branches.remove(branch);
+
+        if (branch === this._currentBranch)
+            this._currentBranch = this._originalBranch;
+    },
+
+    // Private
+
+    _mainResourceDidChange: function(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        if (!event.target.isMainFrame())
+            return;
+
+        this.initialize();
+    }
+};
+
+WebInspector.BranchManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Breakpoint.css b/Source/WebInspectorUI/UserInterface/Breakpoint.css
new file mode 100644
index 000000000..d122df155
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Breakpoint.css
@@ -0,0 +1,58 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.popover .edit-breakpoint-popover-content {
+    width: 420px;
+    padding: 5px 15px;
+    
+    font-family: "Lucida Grande", Helvetica, sans-serif;
+    font-size: 11px;
+}
+
+.popover .edit-breakpoint-popover-content > label.toggle {
+    color: black;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.popover .edit-breakpoint-popover-content > table {
+    width: 100%;
+}
+
+.popover .edit-breakpoint-popover-content > table > tr > th {
+    color: rgb(89, 89, 89);
+    font-weight: bold;
+    text-align: right;
+    width: 1px; /* Shrink to fit. */
+}
+
+.popover .edit-breakpoint-popover-content > table > tr > td {
+    padding-left: 5px;
+}
+
+#edit-breakpoint-popover-condition {
+    width: 100%;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Breakpoint.js b/Source/WebInspectorUI/UserInterface/Breakpoint.js
new file mode 100644
index 000000000..fa13a8217
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Breakpoint.js
@@ -0,0 +1,289 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Breakpoint = function(sourceCodeLocationOrInfo, disabled, condition)
+{
+    WebInspector.Object.call(this);
+
+    if (sourceCodeLocationOrInfo instanceof WebInspector.SourceCodeLocation) {
+        var sourceCode = sourceCodeLocationOrInfo.sourceCode;
+        var url = sourceCode ? sourceCode.url : null;
+        var scriptIdentifier = sourceCode instanceof WebInspector.Script ? sourceCode.id : null;
+        var location = sourceCodeLocationOrInfo;
+    } else if (sourceCodeLocationOrInfo && typeof sourceCodeLocationOrInfo === "object") {
+        var url = sourceCodeLocationOrInfo.url;
+        var lineNumber = sourceCodeLocationOrInfo.lineNumber || 0;
+        var columnNumber = sourceCodeLocationOrInfo.columnNumber || 0;
+        var location = new WebInspector.SourceCodeLocation(null, lineNumber, columnNumber);
+        disabled = sourceCodeLocationOrInfo.disabled;
+        condition = sourceCodeLocationOrInfo.condition;
+    } else
+        console.error("Unexpected type passed to WebInspector.Breakpoint", sourceCodeLocationOrInfo);
+
+    this._id = null;
+    this._url = url || null;
+    this._scriptIdentifier = scriptIdentifier || null;
+    this._disabled = disabled || false;
+    this._condition = condition || "";
+    this._resolved = false;
+
+    this._sourceCodeLocation = location;
+    this._sourceCodeLocation.addEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._sourceCodeLocationLocationChanged, this);
+    this._sourceCodeLocation.addEventListener(WebInspector.SourceCodeLocation.Event.DisplayLocationChanged, this._sourceCodeLocationDisplayLocationChanged, this);
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.Breakpoint);
+
+WebInspector.Breakpoint.PopoverClassName = "edit-breakpoint-popover-content";
+WebInspector.Breakpoint.PopoverConditionInputId = "edit-breakpoint-popover-condition";
+
+WebInspector.Breakpoint.Event = {
+    DisabledStateDidChange: "breakpoint-disabled-state-did-change",
+    ResolvedStateDidChange: "breakpoint-resolved-state-did-change",
+    ConditionDidChange: "breakpoint-condition-did-change",
+    LocationDidChange: "breakpoint-location-did-change",
+    DisplayLocationDidChange: "breakpoint-display-location-did-change",
+};
+
+WebInspector.Breakpoint.prototype = {
+    constructor: WebInspector.Breakpoint,
+
+    // Public
+
+    get id()
+    {
+        return this._id;
+    },
+
+    set id(id)
+    {
+        this._id = id || null;
+    },
+
+    get url()
+    {
+        return this._url;
+    },
+
+    get scriptIdentifier()
+    {
+        return this._scriptIdentifier;
+    },
+
+    get sourceCodeLocation()
+    {
+        return this._sourceCodeLocation;
+    },
+
+    get resolved()
+    {
+        return this._resolved && WebInspector.debuggerManager.breakpointsEnabled;
+    },
+
+    set resolved(resolved)
+    {
+        if (this._resolved === resolved)
+            return;
+
+        this._resolved = resolved || false;
+
+        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.ResolvedStateDidChange);
+    },
+
+    get disabled()
+    {
+        return this._disabled;
+    },
+
+    set disabled(disabled)
+    {
+        if (this._disabled === disabled)
+            return;
+
+        this._disabled = disabled || false;
+
+        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.DisabledStateDidChange);
+    },
+
+    get condition()
+    {
+        return this._condition;
+    },
+
+    set condition(condition)
+    {
+        if (this._condition === condition)
+            return;
+
+        this._condition = condition;
+
+        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.ConditionDidChange);
+    },
+
+    get info()
+    {
+        // The id, scriptIdentifier and resolved state are tied to the current session, so don't include them for serialization.
+        return {
+            url: this._url,
+            lineNumber: this._sourceCodeLocation.lineNumber,
+            columnNumber: this._sourceCodeLocation.columnNumber,
+            disabled: this._disabled,
+            condition: this._condition
+        };
+    },
+
+    appendContextMenuItems: function(contextMenu, breakpointDisplayElement)
+    {
+        function editBreakpoint()
+        {
+            this._showEditBreakpointPopover(breakpointDisplayElement);
+        }
+
+        function removeBreakpoint()
+        {
+            WebInspector.debuggerManager.removeBreakpoint(this);
+        }
+
+        function toggleBreakpoint()
+        {
+            this.disabled = !this.disabled;
+        }
+
+        function revealOriginalSourceCodeLocation()
+        {
+            WebInspector.resourceSidebarPanel.showOriginalOrFormattedSourceCodeLocation(this._sourceCodeLocation);
+        }
+
+        if (WebInspector.debuggerManager.isBreakpointEditable(this))
+            contextMenu.appendItem(WebInspector.UIString("Edit Breakpoint…"), editBreakpoint.bind(this));
+
+        if (this._disabled)
+            contextMenu.appendItem(WebInspector.UIString("Enable Breakpoint"), toggleBreakpoint.bind(this));
+        else
+            contextMenu.appendItem(WebInspector.UIString("Disable Breakpoint"), toggleBreakpoint.bind(this));
+
+        if (WebInspector.debuggerManager.isBreakpointRemovable(this)) {
+            contextMenu.appendSeparator();
+            contextMenu.appendItem(WebInspector.UIString("Delete Breakpoint"), removeBreakpoint.bind(this));
+        }
+
+        if (this._sourceCodeLocation.hasMappedLocation()) {
+            contextMenu.appendSeparator();
+            contextMenu.appendItem(WebInspector.UIString("Reveal in Original Resource"), revealOriginalSourceCodeLocation.bind(this));
+        }
+    },
+
+    // Private
+
+    _popoverToggleCheckboxChanged: function(event)
+    {
+        this.disabled = !event.target.checked;
+    },
+
+    _popoverConditionInputChanged: function(event)
+    {
+        this.condition = event.target.value;
+    },
+
+    _popoverConditionInputKeyDown: function(event)
+    {
+        if (this._keyboardShortcutEsc.matchesEvent(event) || this._keyboardShortcutEnter.matchesEvent(event)) {
+            this._popover.dismiss();
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    },
+
+    _editBreakpointPopoverContentElement: function()
+    {
+        var content = document.createElement("div");
+        content.className = WebInspector.Breakpoint.PopoverClassName;
+
+        var checkboxElement = document.createElement("input");
+        checkboxElement.type = "checkbox";
+        checkboxElement.checked = !this._disabled;
+        checkboxElement.addEventListener("change", this._popoverToggleCheckboxChanged.bind(this));
+
+        var checkboxLabel = document.createElement("label");
+        checkboxLabel.className = "toggle";
+        checkboxLabel.appendChild(checkboxElement);
+        checkboxLabel.appendChild(document.createTextNode(this._sourceCodeLocation.displayLocationString()));
+
+        var table = document.createElement("table");
+
+        var conditionRow = table.appendChild(document.createElement("tr"));
+        var conditionHeader = conditionRow.appendChild(document.createElement("th"));
+        var conditionData = conditionRow.appendChild(document.createElement("td"));
+        var conditionLabel = conditionHeader.appendChild(document.createElement("label"));
+        var conditionInput = conditionData.appendChild(document.createElement("input"));
+        conditionInput.id = WebInspector.Breakpoint.PopoverConditionInputId;
+        conditionInput.value = this._condition || "";
+        conditionInput.spellcheck = false;
+        conditionInput.addEventListener("change", this._popoverConditionInputChanged.bind(this));
+        conditionInput.addEventListener("keydown", this._popoverConditionInputKeyDown.bind(this));
+        conditionInput.placeholder = WebInspector.UIString("Conditional expression");
+        conditionLabel.setAttribute("for", conditionInput.id);
+        conditionLabel.textContent = WebInspector.UIString("Condition");
+
+        content.appendChild(checkboxLabel);
+        content.appendChild(table);
+
+        return content;
+    },
+
+    _showEditBreakpointPopover: function(element)
+    {
+        const padding = 2;
+        var bounds = WebInspector.Rect.rectFromClientRect(element.getBoundingClientRect());
+        bounds.origin.x -= 1; // Move the anchor left one pixel so it looks more centered.
+        bounds.origin.x -= padding;
+        bounds.origin.y -= padding;
+        bounds.size.width += padding * 2; 
+        bounds.size.height += padding * 2; 
+
+        this._popover = this._popover || new WebInspector.Popover(this);
+        this._popover.content = this._editBreakpointPopoverContentElement();
+        this._popover.present(bounds, [WebInspector.RectEdge.MAX_Y]);
+
+        if (!this._keyboardShortcutEsc) {
+            this._keyboardShortcutEsc = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape);
+            this._keyboardShortcutEnter = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Enter);
+        }
+
+        document.getElementById(WebInspector.Breakpoint.PopoverConditionInputId).select();
+    },
+
+    _sourceCodeLocationLocationChanged: function(event)
+    {
+        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.LocationDidChange, event.data);
+    },
+
+    _sourceCodeLocationDisplayLocationChanged: function(event)
+    {
+        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.DisplayLocationDidChange, event.data);
+    }
+};
+
+WebInspector.Breakpoint.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/BreakpointIcons.css b/Source/WebInspectorUI/UserInterface/BreakpointIcons.css
new file mode 100644
index 000000000..6ba2a5b66
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/BreakpointIcons.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.breakpoint-generic-line-icon .icon {
+    content: url(Images/ResultLine.pdf);
+}
+
+.breakpoint-exception-icon .icon {
+    content: url(Images/Exception.pdf);
+}
diff --git a/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.css b/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.css
new file mode 100644
index 000000000..9932b5de3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.css
@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.item.breakpoint .status > .status-image {
+    width: 21px;
+    height: 12px;
+    content: url(Images/BreakpointInactiveButton.pdf);
+    margin-top: 3px;
+}
+
+.item.breakpoint .status > .status-image.resolved {
+    content: url(Images/BreakpointButton.pdf);
+}
+
+.item.breakpoint .status > .status-image.disabled {
+    opacity: 0.45;
+}
+
+.item.breakpoint .subtitle.formatted-location {
+    font-style: italic;
+}
diff --git a/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.js b/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.js
new file mode 100644
index 000000000..adedcad32
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.js
@@ -0,0 +1,165 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.BreakpointTreeElement = function(breakpoint, className, title)
+{
+    console.assert(breakpoint instanceof WebInspector.Breakpoint);
+
+    if (!className)
+        className = WebInspector.BreakpointTreeElement.GenericLineIconStyleClassName;
+
+    WebInspector.GeneralTreeElement.call(this, [WebInspector.BreakpointTreeElement.StyleClassName, className], title, null, breakpoint, false);
+
+    this._breakpoint = breakpoint;
+
+    if (!title)
+        this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._breakpointLocationDidChange, this);
+    this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateStatus, this);
+    this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateStatus, this);
+
+    this._statusImageElement = document.createElement("img");
+    this._statusImageElement.className = WebInspector.BreakpointTreeElement.StatusImageElementStyleClassName;
+    this._statusImageElement.addEventListener("mousedown", this._statusImageElementMouseDown.bind(this));
+    this._statusImageElement.addEventListener("click", this._statusImageElementClicked.bind(this));
+
+    if (!title)
+        this._updateTitles();
+    this._updateStatus();
+
+    this.status = this._statusImageElement;
+    this.small = true;
+};
+
+WebInspector.BreakpointTreeElement.GenericLineIconStyleClassName = "breakpoint-generic-line-icon";
+WebInspector.BreakpointTreeElement.StyleClassName = "breakpoint";
+WebInspector.BreakpointTreeElement.StatusImageElementStyleClassName = "status-image";
+WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName = "resolved";
+WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName = "disabled";
+WebInspector.BreakpointTreeElement.FormattedLocationStyleClassName = "formatted-location";
+
+WebInspector.BreakpointTreeElement.prototype = {
+    constructor: WebInspector.BreakpointTreeElement,
+
+    // Public
+
+    get breakpoint()
+    {
+        return this._breakpoint;
+    },
+
+    ondelete: function()
+    {
+        if (!WebInspector.debuggerManager.isBreakpointRemovable(this._breakpoint))
+            return false;
+
+        WebInspector.debuggerManager.removeBreakpoint(this._breakpoint);
+        return true;
+    },
+
+    onenter: function()
+    {
+        this._breakpoint.disabled = !this._breakpoint.disabled;
+        return true;
+    },
+
+    onspace: function()
+    {
+        this._breakpoint.disabled = !this._breakpoint.disabled;
+        return true;
+    },
+
+    oncontextmenu: function(event)
+    {
+        var contextMenu = new WebInspector.ContextMenu(event);
+        this._breakpoint.appendContextMenuItems(contextMenu, this._statusImageElement);
+        contextMenu.show();
+    },
+
+    // Private
+
+    _updateTitles: function()
+    {
+        var sourceCodeLocation = this._breakpoint.sourceCodeLocation;
+
+        var displayLineNumber = sourceCodeLocation.displayLineNumber;
+        var displayColumnNumber = sourceCodeLocation.displayColumnNumber;
+        if (displayColumnNumber > 0)
+            this.mainTitle = WebInspector.UIString("Line %d:%d").format(displayLineNumber + 1, displayColumnNumber + 1); // The user visible line and column numbers are 1-based.
+        else
+            this.mainTitle = WebInspector.UIString("Line %d").format(displayLineNumber + 1); // The user visible line number is 1-based.
+
+        if (sourceCodeLocation.hasMappedLocation()) {
+            this.subtitle = sourceCodeLocation.formattedLocationString();
+
+            if (sourceCodeLocation.hasFormattedLocation())
+                this.subtitleElement.classList.add(WebInspector.BreakpointTreeElement.FormattedLocationStyleClassName);
+            else
+                this.subtitleElement.classList.remove(WebInspector.BreakpointTreeElement.FormattedLocationStyleClassName);
+
+            this.tooltip = this.mainTitle + " \u2014 " + WebInspector.UIString("originally %s").format(sourceCodeLocation.originalLocationString());
+        }
+    },
+
+    _updateStatus: function()
+    {
+        if (this._breakpoint.disabled)
+            this._statusImageElement.classList.add(WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName);
+        else
+            this._statusImageElement.classList.remove(WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName);
+
+        if (this._breakpoint.resolved)
+            this._statusImageElement.classList.add(WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName);
+        else
+            this._statusImageElement.classList.remove(WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName);
+    },
+
+    _breakpointLocationDidChange: function(event)
+    {
+        console.assert(event.target === this._breakpoint);
+
+        // The Breakpoint has a new display SourceCode. The sidebar will remove us. Stop listening to the breakpoint.
+        if (event.data.oldDisplaySourceCode === this._breakpoint.displaySourceCode) {
+            this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._breakpointLocationDidChange, this);
+            this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateStatus, this);
+            this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateStatus, this);
+            return;
+        }
+
+        this._updateTitles();
+    },
+
+    _statusImageElementMouseDown: function(event)
+    {
+        // To prevent the tree element from selecting.
+        event.stopPropagation();
+    },
+
+    _statusImageElementClicked: function(event)
+    {
+        this._breakpoint.disabled = !this._breakpoint.disabled;
+    }
+};
+
+WebInspector.BreakpointTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.css b/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.css
new file mode 100644
index 000000000..c7d40a1d2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.css
@@ -0,0 +1,72 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.navigation-bar .item.button {
+    width: 26px;
+}
+
+.navigation-bar .item.button.text-only {
+    width: auto;
+    padding: 0 10px;
+
+    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+    font-family: "Lucida Grande", sans-serif;
+    font-size: 11px;
+    line-height: 20px;
+
+    -webkit-justify-content: center;
+}
+
+.navigation-bar .item.button > .glyph {
+    width: 100%;
+    height: 100%;
+
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+body.window-inactive .navigation-bar .item.button:not(.suppress-emboss) > .glyph {
+    opacity: 0.65;
+}
+
+.navigation-bar .item.button.disabled > .glyph {
+    opacity: 0.55 !important;
+}
+
+body.window-inactive .navigation-bar .item.button.disabled:not(.suppress-emboss) > .glyph {
+    opacity: 0.35 !important;
+}
+
+.navigation-bar .item.button.suppress-emboss > .glyph {
+    opacity: 0.7;
+}
+
+.navigation-bar .item.button.suppress-emboss:active > .glyph {
+    opacity: 1;
+}
+
+.navigation-bar .item.button.suppress-emboss.disabled > .glyph {
+    opacity: 0.3 !important;
+}
diff --git a/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.js
new file mode 100644
index 000000000..35ad4ce0f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.js
@@ -0,0 +1,208 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ButtonNavigationItem = function(identifier, toolTipOrLabel, image, imageWidth, imageHeight, suppressEmboss, role, label) {
+    WebInspector.NavigationItem.call(this, identifier);
+
+    console.assert(identifier);
+    console.assert(toolTipOrLabel);
+
+    this.toolTip = toolTipOrLabel;
+
+    this._element.addEventListener("click", this._mouseClicked.bind(this));
+    
+    this._element.setAttribute("role", role || "button");
+    
+    if (label) 
+        this._element.setAttribute("aria-label", label);
+
+    this._imageWidth = imageWidth || 16;
+    this._imageHeight = imageHeight || 16;
+    this._suppressEmboss = suppressEmboss || false;
+
+    if (suppressEmboss)
+        this._element.classList.add(WebInspector.ButtonNavigationItem.SuppressEmbossStyleClassName);
+
+    if (image)
+        this.image = image;
+    else
+        this.label = toolTipOrLabel;
+};
+
+WebInspector.ButtonNavigationItem.StyleClassName = "button";
+WebInspector.ButtonNavigationItem.DisabledStyleClassName = "disabled";
+WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName = "suppress-bezel";
+WebInspector.ButtonNavigationItem.SuppressEmbossStyleClassName = "suppress-emboss";
+WebInspector.ButtonNavigationItem.TextOnlyClassName = "text-only";
+
+WebInspector.ButtonNavigationItem.States = {};
+WebInspector.ButtonNavigationItem.States.Normal = "normal";
+WebInspector.ButtonNavigationItem.States.Active = "active";
+WebInspector.ButtonNavigationItem.States.Focus = "focus";
+WebInspector.ButtonNavigationItem.States.ActiveFocus = "active-focus";
+
+WebInspector.ButtonNavigationItem.Event = {
+    Clicked: "button-navigation-item-clicked"
+};
+
+WebInspector.ButtonNavigationItem.prototype = {
+    constructor: WebInspector.ButtonNavigationItem,
+
+    // Public
+
+    get toolTip()
+    {
+        return this._element.title;
+    },
+
+    set toolTip(newToolTip)
+    {
+        console.assert(newToolTip);
+        if (!newToolTip)
+            return;
+
+        this._element.title = newToolTip;
+    },
+
+    get label()
+    {
+        return this._element.textContent;
+    },
+
+    set label(newLabel)
+    {
+        this._element.classList.add(WebInspector.ButtonNavigationItem.TextOnlyClassName);
+        this._element.textContent = newLabel || "";
+        if (this.parentNavigationBar)
+            this.parentNavigationBar.updateLayout();
+    },
+
+    get image()
+    {
+        return this._image;
+    },
+
+    set image(newImage)
+    {
+        if (!newImage) {
+            this._element.removeChildren();
+            return;
+        }
+
+        this._element.removeChildren();
+        this._element.classList.remove(WebInspector.ButtonNavigationItem.TextOnlyClassName);
+
+        this._image = newImage;
+
+        this._glyphElement = document.createElement("div");
+        this._glyphElement.className = "glyph";
+        this._element.appendChild(this._glyphElement);
+
+        this._updateImage();
+    },
+
+    get enabled()
+    {
+        return !this._element.classList.contains(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
+    },
+
+    set enabled(flag)
+    {
+        if (flag)
+            this._element.classList.remove(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
+        else
+            this._element.classList.add(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
+    },
+
+    get suppressBezel()
+    {
+        return this._element.classList.contains(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
+    },
+
+    set suppressBezel(flag)
+    {
+        if (flag)
+            this._element.classList.add(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
+        else
+            this._element.classList.remove(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
+    },
+
+    generateStyleText: function(parentSelector)
+    {
+        var classNames = this._classNames.join(".");
+
+        if (this._suppressEmboss)
+            var styleText = parentSelector + " ." + classNames + " > .glyph { background-size: " +  this._imageWidth + "px " + this._imageHeight + "px; }\n";
+        else {
+            // Default state.
+            var styleText = parentSelector + " ." + classNames + " > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier() + "); background-size: " +  this._imageWidth + "px " + this._imageHeight + "px; }\n";
+
+            // Pressed state.
+            styleText += parentSelector + " ." + classNames + ":not(.disabled):active > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Active) + "); }\n";
+
+            // Focused state.
+            styleText += parentSelector + " ." + classNames + ":not(.disabled):focus > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Focus) + "); }\n";
+        }
+
+        return styleText;
+    },
+
+    // Private
+
+    _additionalClassNames: [WebInspector.ButtonNavigationItem.StyleClassName],
+    _embossedImageStates: WebInspector.ButtonNavigationItem.States,
+    _imageCacheable: true,
+
+    _mouseClicked: function(event)
+    {
+        if (!this.enabled)
+            return;
+        this.dispatchEventToListeners(WebInspector.ButtonNavigationItem.Event.Clicked);
+    },
+
+    _canvasIdentifier: function(state)
+    {
+        console.assert(!this._suppressEmboss);
+        return "navigation-item-" + this._identifier + "-" + (state || WebInspector.ButtonNavigationItem.States.Normal);
+    },
+
+    _updateImage: function()
+    {
+        if (this._suppressEmboss)
+            this._glyphElement.style.backgroundImage = "url(" + this._image + ")";
+        else
+            this._generateImages();
+    },
+
+    _generateImages: function()
+    {
+        console.assert(!this._suppressEmboss);
+        if (this._suppressEmboss)
+            return;
+        generateEmbossedImages(this.image, this._imageWidth, this._imageHeight, this._embossedImageStates, this._canvasIdentifier.bind(this), !this._imageCacheable);
+    }
+};
+
+WebInspector.ButtonNavigationItem.prototype.__proto__ = WebInspector.NavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ButtonToolbarItem.css b/Source/WebInspectorUI/UserInterface/ButtonToolbarItem.css
new file mode 100644
index 000000000..0e7a8f9d1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ButtonToolbarItem.css
@@ -0,0 +1,90 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.toolbar .item.button {
+    -webkit-align-items: center;
+    -webkit-justify-content: center;
+
+    padding: 0 6px;
+}
+
+.toolbar.icon-and-label-vertical .item.button {
+    -webkit-flex-direction: column;
+}
+
+.toolbar.icon-and-label-horizontal .item.button {
+    -webkit-flex-direction: row;
+}
+
+.toolbar .item.button > .glyph {
+    width: 32px;
+    height: 32px;
+
+    background-size: 100% 100% !important;
+
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.toolbar.small-size .item.button > .glyph {
+    width: 24px;
+    height: 24px;
+}
+
+.toolbar.label-only .item.button > .glyph {
+    display: none;
+}
+
+.toolbar .item.button > .label {
+    font-size: 11px;
+    font-family: Lucida Grande, sans-serif;
+    text-align: center;
+    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+    color: rgb(60, 60, 60);
+}
+
+.toolbar.label-only .item.activate.button.activated > .label {
+    color: rgb(35, 125, 195);
+}
+
+.toolbar.icon-and-label-horizontal .item.button > .label {
+    margin-left: 4px;
+}
+
+.toolbar.icon-only .item.button > .label {
+    display: none;
+}
+
+body.window-inactive .toolbar .item.button {
+    opacity: 0.65;
+}
+
+.toolbar .item.button.disabled {
+    opacity: 0.55 !important;
+}
+
+body.window-inactive .toolbar .item.button.disabled {
+    opacity: 0.35 !important;
+}
diff --git a/Source/WebInspectorUI/UserInterface/ButtonToolbarItem.js b/Source/WebInspectorUI/UserInterface/ButtonToolbarItem.js
new file mode 100644
index 000000000..ee2442e2f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ButtonToolbarItem.js
@@ -0,0 +1,61 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ButtonToolbarItem = function(identifier, toolTip, label, image, suppressEmboss)
+{
+    WebInspector.ButtonNavigationItem.call(this, identifier, toolTip, image, 32, 32, suppressEmboss);
+
+    console.assert(label);
+
+    this._labelElement = document.createElement("div");
+    this._labelElement.className = WebInspector.ButtonToolbarItem.LabelStyleClassName;
+    this._element.appendChild(this._labelElement);
+
+    this.label = label;
+};
+
+WebInspector.ButtonToolbarItem.LabelStyleClassName = "label";
+
+WebInspector.ButtonToolbarItem.prototype = {
+    constructor: WebInspector.ButtonToolbarItem,
+
+    // Public
+
+    get label()
+    {
+        return this._labelElement.textContent;
+    },
+
+    set label(newLabel)
+    {
+        console.assert(newLabel);
+        if (!newLabel)
+            return;
+
+        this._labelElement.textContent = newLabel;
+    }
+};
+
+WebInspector.ButtonToolbarItem.prototype.__proto__ = WebInspector.ButtonNavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSColorPicker.css b/Source/WebInspectorUI/UserInterface/CSSColorPicker.css
new file mode 100644
index 000000000..1496ad192
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSColorPicker.css
@@ -0,0 +1,157 @@
+/*
+ * Copyright (C) 2011 Brian Grinstead All rights reserved.
+ * Copyright (C) 2013 Matt Holden <jftholden@yahoo.com>
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.colorpicker-container {
+    top: 0;
+    left: 0;
+    padding: 5px;
+    width: 212px;
+    z-index: 10;
+}
+
+.colorpicker-fill-parent {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.colorpicker-top {
+    position: relative;
+    width: 100%;
+    display: inline-block;
+}
+
+.colorpicker-color {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 160px;
+    border: 1px solid #D0D0D0;
+}
+
+.colorpicker-bottom span {
+    display: inline-block;
+}
+
+.colorpicker-text {
+    font-family: monospace;
+    font-size: 11px !important;
+}
+
+.colorpicker-color-text-value {
+    -webkit-user-select: text;
+    position: relative;
+    left: 3px;
+    top: -6px;
+    white-space: pre-wrap;
+}
+
+.colorpicker-hue {
+    position: absolute;
+    top: 0;
+    width: 30px;
+    right: 0;
+    bottom: 0;
+    -webkit-box-reflect: right -28px;
+}
+
+.colorpicker-fill {
+    /* Same as colorpicker-color width to force aspect ratio. */
+    margin-top: 160px;
+}
+
+.colorpicker-range-container {
+    position: relative;
+    padding-bottom: 5px;
+}
+
+.colorpicker-range-container * {
+    font-size: 11px;
+    vertical-align: middle;
+}
+
+.colorpicker-range-container label {
+    display: inline-block;
+    padding-right: 4px;
+}
+
+.colorpicker-range-container input {
+    margin: 3px 0 0 3px;
+    width: 137px;
+}
+
+.colorpicker-saturation {
+    background-image: -webkit-linear-gradient(left, white, rgba(204, 154, 129, 0));
+}
+
+.colorpicker-value {
+    background-image: -webkit-linear-gradient(bottom, black, rgba(204, 154, 129, 0));
+}
+
+.colorpicker-hue {
+    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+}
+
+.colorpicker-dragger {
+    border-radius: 5px;
+    height: 5px;
+    width: 5px;
+    border: 1px solid white;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: black;
+}
+
+.colorpicker-slider {
+    position: absolute;
+    top: 0;
+    cursor: pointer;
+    border: 1px solid black;
+    height: 4px;
+    left: -1px;
+    right: -1px;
+}
+
+.colorpicker-container .swatch {
+    width: 20px;
+    height:20px;
+    margin: 0;
+}
+
+.colorpicker-container .swatch-inner {
+    height: 100%;
+    width:  100%;
+    display: inline-block;
+    border: 1px solid rgba(128, 128, 128, 0.6); 
+}
diff --git a/Source/WebInspectorUI/UserInterface/CSSColorPicker.js b/Source/WebInspectorUI/UserInterface/CSSColorPicker.js
new file mode 100644
index 000000000..565595b76
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSColorPicker.js
@@ -0,0 +1,406 @@
+/*
+ * Copyright (C) 2011 Brian Grinstead All rights reserved.
+ * Copyright (C) 2013 Matt Holden <jftholden@yahoo.com>
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+
+WebInspector.CSSColorPicker = function()
+{
+    WebInspector.Object.call(this);
+
+    this._element = document.createElement("div");
+    this._element.className = "colorpicker-container";
+
+    var topElement = this._element.createChild("div", "colorpicker-top");
+    topElement.createChild("div", "colorpicker-fill");
+
+    var topInnerElement = topElement.createChild("div", "colorpicker-top-inner colorpicker-fill-parent");
+    this._draggerElement = topInnerElement.createChild("div", "colorpicker-color");
+    this._dragHelperElement = this._draggerElement
+        .createChild("div", "colorpicker-saturation colorpicker-fill-parent")
+        .createChild("div", "colorpicker-value colorpicker-fill-parent")
+        .createChild("div", "colorpicker-dragger");
+
+    this._sliderElement = topInnerElement.createChild("div", "colorpicker-hue");
+    this._slideHelper = this._sliderElement.createChild("div", "colorpicker-slider");
+
+    var rangeContainer = this._element.createChild("div", "colorpicker-range-container");
+    var alphaLabel = rangeContainer.createChild("label", "colorpicker-text");
+    alphaLabel.textContent = WebInspector.UIString("Opacity:");
+
+    this._alphaElement = rangeContainer.createChild("input", "colorpicker-range");
+    this._alphaElement.setAttribute("type", "range");
+    this._alphaElement.setAttribute("min", "0");
+    this._alphaElement.setAttribute("max", "100");
+    this._alphaElement.addEventListener("change", alphaDrag.bind(this), false);
+
+    var displayContainer = this._element.createChild("div", "colorpicker-bottom");
+
+    var swatchElement = displayContainer.createChild("span", "swatch");
+    this._swatchInnerElement = swatchElement.createChild("span", "swatch-inner");
+    
+    swatchElement.addEventListener("click", colorSwatchClicked.bind(this), false);
+
+    this._displayElement = displayContainer.createChild("span", "colorpicker-text colorpicker-color-text-value");
+
+    makeDraggable(this._sliderElement, hueDrag.bind(this));
+    makeDraggable(this._draggerElement, colorDrag.bind(this), colorDragStart.bind(this));
+
+    function makeDraggable(element, onmove, onstart, onstop)
+    {
+        var doc = document;
+        var dragging;
+        var offset;
+        var scrollOffset;
+        var maxHeight;
+        var maxWidth;
+
+        function consume(e)
+        {
+            event.preventDefault();
+        }
+
+        function move(e)
+        {
+            if (!dragging || !onmove)
+                return;
+
+            var dragX = Math.max(0, Math.min(e.pageX - offset.left + scrollOffset.left, maxWidth));
+            var dragY = Math.max(0, Math.min(e.pageY - offset.top + scrollOffset.top, maxHeight));
+
+            onmove(element, dragX, dragY, e);
+        }
+
+        function start(e)
+        {
+            if (e.button !== 0 || e.ctrlKey)
+                return;
+
+            if (dragging)
+                return;
+
+            if (onstart)
+                onstart(element, e)
+
+            dragging = true;
+            maxHeight = element.clientHeight;
+            maxWidth = element.clientWidth;
+
+            scrollOffset = {left: 0, top: 0};
+            var boundingRect = element.getBoundingClientRect();
+            offset = {left: boundingRect.left, top: boundingRect.top};
+
+            doc.addEventListener("selectstart", consume, false);
+            doc.addEventListener("dragstart", consume, false);
+            doc.addEventListener("mousemove", move, false);
+            doc.addEventListener("mouseup", stop, false);
+
+            move(e);
+            consume(e);
+        }
+
+        function stop(e)
+        {
+            if (!dragging)
+                return;
+
+            doc.removeEventListener("selectstart", consume, false);
+            doc.removeEventListener("dragstart", consume, false);
+            doc.removeEventListener("mousemove", move, false);
+            doc.removeEventListener("mouseup", stop, false);
+
+            if (onstop)
+                onstop(element, e);
+
+            dragging = false;
+        }
+
+        element.addEventListener("mousedown", start, false);
+    }
+
+    function hueDrag(element, dragX, dragY)
+    {
+        this.hsv[0] = dragY / this.slideHeight;
+
+        this._updateDisplay(true);
+    }
+
+    var initialHelperOffset;
+
+    function colorDragStart(element, dragX, dragY)
+    {
+        initialHelperOffset = {x: this._dragHelperElement.offsetLeft, y: this._dragHelperElement.offsetTop};
+    }
+
+    function colorDrag(element, dragX, dragY, event)
+    {
+        if (event.shiftKey) {
+            if (Math.abs(dragX - initialHelperOffset.x) >= Math.abs(dragY - initialHelperOffset.y))
+                dragY = initialHelperOffset.y;
+            else
+                dragX = initialHelperOffset.x;
+        }
+
+        this.hsv[1] = dragX / this.dragWidth;
+        this.hsv[2] = (this.dragHeight - dragY) / this.dragHeight;
+
+        this._updateDisplay(true);
+    }
+
+    function alphaDrag()
+    {
+        this.hsv[3] = this._alphaElement.value / 100;
+
+        this._updateDisplay(true);
+    }
+
+    function colorSwatchClicked()
+    {
+        // By changing this value, the new color format
+        // will be propagated down to any listeners after the UI is updated.
+        this._originalFormat = this.color.nextFormat();
+        this._updateDisplay(true);
+    }
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.CSSColorPicker);
+
+WebInspector.CSSColorPicker.Event = {
+    ColorChanged: "css-color-picker-color-changed"
+};
+
+WebInspector.CSSColorPicker.prototype = {
+    contructor: WebInspector.CSSColorPicker,
+
+    get element()
+    {
+        return this._element;
+    },
+
+    set color(color)
+    {
+        if (!this._originalFormat) {
+            this._originalFormat = color.format;
+            if (color.format === WebInspector.Color.Format.ShortHEX)
+                this._originalFormat = WebInspector.Color.Format.HEX;
+        }
+
+        var rgba = (color.rgba || color.rgb).slice(0);
+
+        if (rgba.length === 3)
+            rgba[3] = 1;
+
+        this.hsv = WebInspector.CSSColorPicker.rgbaToHSVA(rgba[0], rgba[1], rgba[2], rgba[3]);
+    },
+
+    get color()
+   {
+       var rgba = WebInspector.CSSColorPicker.hsvaToRGBA(this.hsv[0], this.hsv[1], this.hsv[2], this.hsv[3]);
+       var color;
+       if (rgba[3] === 1)
+           color = WebInspector.Color.fromRGB(rgba[0], rgba[1], rgba[2]);
+       else
+           color = WebInspector.Color.fromRGBA(rgba[0], rgba[1], rgba[2], rgba[3]);
+       var colorValue = color.toString(this.outputColorFormat);
+       if (!colorValue)
+           colorValue = color.toString(); // this.outputColorFormat can be invalid for current color (e.g. "nickname").
+       return new WebInspector.Color(colorValue);
+    },
+
+    get outputColorFormat()
+    {
+        var format = this._originalFormat;
+
+        if (this.hsv[3] === 1) {
+            // Simplify transparent formats, and don't allow ShortHex.
+            if (format === WebInspector.Color.Format.RGBA)
+                format = WebInspector.Color.Format.RGB;
+            else if (format === WebInspector.Color.Format.HSLA)
+                format = WebInspector.Color.Format.HSL;
+            else if (format === WebInspector.Color.Format.ShortHEX)
+                format = WebInspector.Color.Format.HEX;
+        } else {
+            // Everything except HSL(A) should be returned as RGBA if transparency is involved.
+            var printableTransparentFormats = [
+                WebInspector.Color.Format.HSLA,
+                WebInspector.Color.Format.RGBA
+            ];
+
+            if (printableTransparentFormats.indexOf(format) === -1)
+                format = WebInspector.Color.Format.RGBA;
+        }
+
+        return format;
+    },
+
+    get colorHueOnly()
+    {
+        var rgba = WebInspector.CSSColorPicker.hsvaToRGBA(this.hsv[0], 1, 1, 1);
+        return WebInspector.Color.fromRGBA(rgba[0], rgba[1], rgba[2], rgba[3]);
+    },
+
+    set displayText(text)
+    {
+        this._displayElement.textContent = text;
+    },
+
+    shown: function()
+    {
+        this.slideHeight = this._sliderElement.offsetHeight;
+        this.dragWidth = this._draggerElement.offsetWidth;
+        this.dragHeight = this._draggerElement.offsetHeight;
+        this._dragHelperElementHeight = this._dragHelperElement.offsetHeight / 2;
+        this.slideHelperHeight = this._slideHelper.offsetHeight / 2;
+        this._updateDisplay();
+    },
+
+    // Private
+
+    _updateHelperLocations: function()
+    {
+        var h = this.hsv[0];
+        var s = this.hsv[1];
+        var v = this.hsv[2];
+
+        // Where to show the little circle that displays your current selected color.
+        var dragX = s * this.dragWidth;
+        var dragY = this.dragHeight - (v * this.dragHeight);
+
+        dragX = Math.max(-this._dragHelperElementHeight,
+            Math.min(this.dragWidth - this._dragHelperElementHeight, dragX - this._dragHelperElementHeight));
+        dragY = Math.max(-this._dragHelperElementHeight,
+            Math.min(this.dragHeight - this._dragHelperElementHeight, dragY - this._dragHelperElementHeight));
+
+        this._dragHelperElement.positionAt(dragX, dragY);
+
+        // Where to show the bar that displays your current selected hue.
+        var slideY = (h * this.slideHeight) - this.slideHelperHeight;
+        this._slideHelper.style.top = slideY + "px";
+
+        this._alphaElement.value = this.hsv[3] * 100;
+    },
+
+    _updateDisplay: function(colorWasChanged)
+    {
+        this._updateHelperLocations();
+
+        var rgb = (this.color.rgba || this.color.rgb).slice(0);
+
+        if (rgb.length === 3)
+            rgb[3] = 1;
+
+        var rgbHueOnly = this.colorHueOnly.rgb;
+
+        var flatColor = "rgb(" + rgbHueOnly[0] + ", " + rgbHueOnly[1] + ", " + rgbHueOnly[2] + ")";
+        var fullColor = "rgba(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ", " + rgb[3] + ")";
+
+        this._draggerElement.style.backgroundColor = flatColor;
+        this._swatchInnerElement.style.backgroundColor = fullColor;
+
+        this._alphaElement.value = this.hsv[3] * 100;
+
+        var colorValue = this.color.toString(this.outputColorFormat);
+        if (!colorValue)
+            colorValue = this.color.toString(); // this.outputColorFormat can be invalid for current color (e.g. "nickname").
+
+        this.displayText = colorValue;
+
+        if (colorWasChanged)
+            this.dispatchEventToListeners(WebInspector.CSSColorPicker.Event.ColorChanged, {color: this.color});
+    }
+};
+
+WebInspector.CSSColorPicker.hsvaToRGBA = function(h, s, v, a)
+{
+    var r, g, b;
+
+    var i = Math.floor(h * 6);
+    var f = h * 6 - i;
+    var p = v * (1 - s);
+    var q = v * (1 - f * s);
+    var t = v * (1 - (1 - f) * s);
+
+    switch(i % 6) {
+    case 0:
+        r = v, g = t, b = p;
+        break;
+    case 1:
+        r = q, g = v, b = p;
+        break;
+    case 2:
+        r = p, g = v, b = t;
+        break;
+    case 3:
+        r = p, g = q, b = v;
+        break;
+    case 4:
+        r = t, g = p, b = v;
+        break;
+    case 5:
+        r = v, g = p, b = q;
+        break;
+    }
+
+    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), a];
+};
+
+WebInspector.CSSColorPicker.rgbaToHSVA = function(r, g, b, a)
+{
+    r = r / 255;
+    g = g / 255;
+    b = b / 255;
+
+    var max = Math.max(r, g, b);
+    var min = Math.min(r, g, b);
+    var h;
+    var s;
+    var v = max;
+
+    var d = max - min;
+    s = max ? d / max : 0;
+
+    if(max === min) {
+        // Achromatic.
+        h = 0;
+    } else {
+        switch(max) {
+        case r:
+            h = (g - b) / d + (g < b ? 6 : 0);
+            break;
+        case g:
+            h = (b - r) / d + 2;
+            break;
+        case b:
+            h = (r - g) / d + 4;
+            break;
+        }
+        h /= 6;
+    }
+    return [h, s, v, a];
+};
+
+WebInspector.CSSColorPicker.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSCompletions.js b/Source/WebInspectorUI/UserInterface/CSSCompletions.js
new file mode 100644
index 000000000..b2277669f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSCompletions.js
@@ -0,0 +1,271 @@
+/*
+ * Copyright (C) 2010 Nikita Vasilyev. All rights reserved.
+ * Copyright (C) 2010 Joseph Pecoraro. All rights reserved.
+ * Copyright (C) 2010 Google Inc. All rights reserved.
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ */
+WebInspector.CSSCompletions = function(properties, acceptEmptyPrefix)
+{
+    this._values = [];
+    this._longhands = {};
+    this._shorthands = {};
+
+    for (var i = 0; i < properties.length; ++i) {
+        // COMPATIBILITY (iOS 6): This used to be an array of strings,
+        // now it contains objects with a 'name' property. Support both here.
+        var property = properties[i];
+        if (typeof property === "string") {
+            this._values.push(property);
+            continue;
+        }
+
+        var propertyName = property.name;
+        this._values.push(propertyName);
+
+        var longhands = property.longhands;
+        if (longhands) {
+            this._longhands[propertyName] = longhands;
+
+            for (var j = 0; j < longhands.length; ++j) {
+                var longhandName = longhands[j];
+
+                var shorthands = this._shorthands[longhandName];
+                if (!shorthands) {
+                    shorthands = [];
+                    this._shorthands[longhandName] = shorthands;
+                }
+
+                shorthands.push(propertyName);
+            }
+        }
+    }
+
+    this._values.sort();
+
+    this._acceptEmptyPrefix = acceptEmptyPrefix;
+}
+
+
+/**
+ * @type {WebInspector.CSSCompletions}
+ */
+WebInspector.CSSCompletions.cssNameCompletions = null;
+
+WebInspector.CSSCompletions.requestCSSNameCompletions = function()
+{
+    function propertyNamesCallback(error, names)
+    {
+        if (error)
+            return;
+
+        WebInspector.CSSCompletions.cssNameCompletions = new WebInspector.CSSCompletions(names, false);
+
+        var propertyNamesForCodeMirror = {};
+        var valueKeywordsForCodeMirror = {"inherit": true, "initial": true};
+        var colorKeywordsForCodeMirror = {};
+
+        function nameForCodeMirror(name)
+        {
+            // CodeMirror parses the vendor prefix separate from the property or keyword name,
+            // so we need to strip vendor prefixes from our names. Also strip function parenthesis.
+            return name.replace(/^-[^-]+-/, "").replace(/\(\)$/, "");
+        }
+
+        function collectPropertyNameForCodeMirror(propertyName)
+        {
+            // Properties can also be value keywords, like when used in a -webkit-transition.
+            // So we add them to both lists.
+            var codeMirrorPropertyName = nameForCodeMirror(propertyName);
+            propertyNamesForCodeMirror[codeMirrorPropertyName] = true;
+            valueKeywordsForCodeMirror[codeMirrorPropertyName] = true;
+        }
+
+        for (var i = 0; i < names.length; ++i) {
+            // COMPATIBILITY (iOS 6): This used to be an array of strings,
+            // now it contains objects with a 'name' property. Support both here.
+            var property = names[i];
+            if (typeof property === "string")
+                collectPropertyNameForCodeMirror(property);
+            else
+                collectPropertyNameForCodeMirror(property.name);
+        }
+
+        for (var propertyName in WebInspector.CSSKeywordCompletions._propertyKeywordMap) {
+            var keywords = WebInspector.CSSKeywordCompletions._propertyKeywordMap[propertyName];
+            for (var i = 0; i < keywords.length; ++i) {
+                // Skip numbers, like the ones defined for font-weight.
+                if (!isNaN(Number(keywords[i])))
+                    continue;
+                valueKeywordsForCodeMirror[nameForCodeMirror(keywords[i])] = true;
+            }
+        }
+
+        WebInspector.CSSKeywordCompletions._colors.forEach(function(colorName) {
+            colorKeywordsForCodeMirror[nameForCodeMirror(colorName)] = true;
+        });
+
+        function updateCodeMirrorCSSMode(mimeType)
+        {
+            var modeSpec = CodeMirror.resolveMode(mimeType);
+
+            console.assert(modeSpec.propertyKeywords);
+            console.assert(modeSpec.valueKeywords);
+            console.assert(modeSpec.colorKeywords);
+
+            modeSpec.propertyKeywords = propertyNamesForCodeMirror;
+            modeSpec.valueKeywords = valueKeywordsForCodeMirror;
+            modeSpec.colorKeywords = colorKeywordsForCodeMirror;
+
+            CodeMirror.defineMIME(mimeType, modeSpec);
+        }
+
+        updateCodeMirrorCSSMode("text/css");
+        updateCodeMirrorCSSMode("text/x-scss");
+    }
+
+    CSSAgent.getSupportedCSSProperties(propertyNamesCallback);
+}
+
+WebInspector.CSSCompletions.prototype = {
+    get values()
+    {
+        return this._values;
+    },
+
+    startsWith: function(prefix)
+    {
+        var firstIndex = this._firstIndexOfPrefix(prefix);
+        if (firstIndex === -1)
+            return [];
+
+        var results = [];
+        while (firstIndex < this._values.length && this._values[firstIndex].startsWith(prefix))
+            results.push(this._values[firstIndex++]);
+        return results;
+    },
+
+    firstStartsWith: function(prefix)
+    {
+        var foundIndex = this._firstIndexOfPrefix(prefix);
+        return (foundIndex === -1 ? "" : this._values[foundIndex]);
+    },
+
+    _firstIndexOfPrefix: function(prefix)
+    {
+        if (!this._values.length)
+            return -1;
+        if (!prefix)
+            return this._acceptEmptyPrefix ? 0 : -1;
+
+        var maxIndex = this._values.length - 1;
+        var minIndex = 0;
+        var foundIndex;
+
+        do {
+            var middleIndex = (maxIndex + minIndex) >> 1;
+            if (this._values[middleIndex].startsWith(prefix)) {
+                foundIndex = middleIndex;
+                break;
+            }
+            if (this._values[middleIndex] < prefix)
+                minIndex = middleIndex + 1;
+            else
+                maxIndex = middleIndex - 1;
+        } while (minIndex <= maxIndex);
+
+        if (foundIndex === undefined)
+            return -1;
+
+        while (foundIndex && this._values[foundIndex - 1].startsWith(prefix))
+            foundIndex--;
+
+        return foundIndex;
+    },
+
+    keySet: function()
+    {
+        if (!this._keySet)
+            this._keySet = this._values.keySet();
+        return this._keySet;
+    },
+
+    next: function(str, prefix)
+    {
+        return this._closest(str, prefix, 1);
+    },
+
+    previous: function(str, prefix)
+    {
+        return this._closest(str, prefix, -1);
+    },
+
+    _closest: function(str, prefix, shift)
+    {
+        if (!str)
+            return "";
+
+        var index = this._values.indexOf(str);
+        if (index === -1)
+            return "";
+
+        if (!prefix) {
+            index = (index + this._values.length + shift) % this._values.length;
+            return this._values[index];
+        }
+
+        var propertiesWithPrefix = this.startsWith(prefix);
+        var j = propertiesWithPrefix.indexOf(str);
+        j = (j + propertiesWithPrefix.length + shift) % propertiesWithPrefix.length;
+        return propertiesWithPrefix[j];
+    },
+
+    isShorthandPropertyName: function(shorthand)
+    {
+        return shorthand in this._longhands;
+    },
+
+    isLonghandPropertyName: function(longhand)
+    {
+        return longhand in this._shorthands;
+    },
+
+    longhandsForShorthand: function(shorthand)
+    {
+        return this._longhands[shorthand] || [];
+    },
+
+    shorthandsForLonghand: function(longhand)
+    {
+        return this._shorthands[longhand] || [];
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/CSSKeywordCompletions.js b/Source/WebInspectorUI/UserInterface/CSSKeywordCompletions.js
new file mode 100644
index 000000000..5b705821a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSKeywordCompletions.js
@@ -0,0 +1,908 @@
+/*
+ * Copyright (C) 2011 Google Inc. All rights reserved.
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSKeywordCompletions = {}
+
+WebInspector.CSSKeywordCompletions.forProperty = function(propertyName)
+{
+    var acceptedKeywords = ["initial"];
+    var isNotPrefixed = propertyName.charAt(0) !== "-";
+
+    if (propertyName in WebInspector.CSSKeywordCompletions._propertyKeywordMap)
+        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSKeywordCompletions._propertyKeywordMap[propertyName]);
+    else if (isNotPrefixed && ("-webkit-" + propertyName) in WebInspector.CSSKeywordCompletions._propertyKeywordMap)
+        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSKeywordCompletions._propertyKeywordMap["-webkit-" + propertyName]);
+
+    if (propertyName in WebInspector.CSSKeywordCompletions._colorAwareProperties)
+        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSKeywordCompletions._colors);
+    else if (isNotPrefixed && ("-webkit-" + propertyName) in WebInspector.CSSKeywordCompletions._colorAwareProperties)
+        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSKeywordCompletions._colors);
+
+    // FIXME: This doesn't necessarily make sense. Some non-inheritable properties allow "inherit".
+    if (propertyName in WebInspector.CSSKeywordCompletions.InheritedProperties)
+        acceptedKeywords.push("inherit");
+    else if (isNotPrefixed && ("-webkit-" + propertyName) in WebInspector.CSSKeywordCompletions.InheritedProperties)
+        acceptedKeywords.push("inherit");
+
+    if (acceptedKeywords.contains(WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder)) {
+        acceptedKeywords.remove(WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder);
+        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSCompletions.cssNameCompletions.values);
+    }
+
+    return new WebInspector.CSSCompletions(acceptedKeywords, true);
+}
+
+WebInspector.CSSKeywordCompletions.isColorAwareProperty = function(propertyName)
+{
+    return WebInspector.CSSKeywordCompletions._colorAwareProperties[propertyName] === true;
+}
+
+WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder = "__all-properties__";
+
+WebInspector.CSSKeywordCompletions.InheritedProperties = [
+    "azimuth", "border-collapse", "border-spacing", "caption-side", "clip-rule", "color", "color-interpolation",
+    "color-interpolation-filters", "color-rendering", "cursor", "direction", "elevation", "empty-cells", "fill",
+    "fill-opacity", "fill-rule", "font", "font-family", "font-size", "font-style", "font-variant", "font-weight",
+    "glyph-orientation-horizontal", "glyph-orientation-vertical", "image-rendering", "kerning", "letter-spacing",
+    "line-height", "list-style", "list-style-image", "list-style-position", "list-style-type", "marker", "marker-end",
+    "marker-mid", "marker-start", "orphans", "pitch", "pitch-range", "pointer-events", "quotes", "resize", "richness",
+    "shape-rendering", "speak", "speak-header", "speak-numeral", "speak-punctuation", "speech-rate", "stress", "stroke",
+    "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity",
+    "stroke-width", "tab-size", "text-align", "text-anchor", "text-decoration", "text-indent", "text-rendering",
+    "text-shadow", "text-transform", "visibility", "voice-family", "volume", "white-space", "widows", "word-break",
+    "word-spacing", "word-wrap", "writing-mode", "-webkit-aspect-ratio", "-webkit-border-horizontal-spacing",
+    "-webkit-border-vertical-spacing", "-webkit-box-direction", "-webkit-color-correction", "-webkit-font-feature-settings",
+    "-webkit-font-kerning", "-webkit-font-smoothing", "-webkit-font-variant-ligatures", "-webkit-highlight",
+    "-webkit-hyphenate-character", "-webkit-hyphenate-limit-after", "-webkit-hyphenate-limit-before",
+    "-webkit-hyphenate-limit-lines", "-webkit-hyphens", "-webkit-line-align", "-webkit-line-box-contain",
+    "-webkit-line-break", "-webkit-line-grid", "-webkit-line-snap", "-webkit-locale", "-webkit-nbsp-mode",
+    "-webkit-print-color-adjust", "-webkit-rtl-ordering", "-webkit-text-combine", "-webkit-text-decorations-in-effect",
+    "-webkit-text-emphasis", "-webkit-text-emphasis-color", "-webkit-text-emphasis-position", "-webkit-text-emphasis-style",
+    "-webkit-text-fill-color", "-webkit-text-orientation", "-webkit-text-security", "-webkit-text-size-adjust",
+    "-webkit-text-stroke", "-webkit-text-stroke-color", "-webkit-text-stroke-width", "-webkit-user-modify",
+    "-webkit-user-select", "-webkit-writing-mode", "-webkit-cursor-visibility", "image-orientation", "image-resolution",
+    "overflow-wrap", "-webkit-text-align-last", "-webkit-text-justify", "-webkit-ruby-position", "-webkit-text-decoration-line",
+
+    // iOS Properties
+    "-webkit-overflow-scrolling", "-webkit-touch-callout", "-webkit-tap-highlight-color"
+].keySet();
+
+WebInspector.CSSKeywordCompletions._colors = [
+    "aqua", "black", "blue", "fuchsia", "gray", "green", "lime", "maroon", "navy", "olive", "orange", "purple", "red",
+    "silver", "teal", "white", "yellow", "transparent", "currentcolor", "grey", "aliceblue", "antiquewhite",
+    "aquamarine", "azure", "beige", "bisque", "blanchedalmond", "blueviolet", "brown", "burlywood", "cadetblue",
+    "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan",
+    "darkgoldenrod", "darkgray", "darkgreen", "darkgrey", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange",
+    "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkslategrey",
+    "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "firebrick",
+    "floralwhite", "forestgreen", "gainsboro", "ghostwhite", "gold", "goldenrod", "greenyellow", "honeydew", "hotpink",
+    "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue",
+    "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey", "lightpink",
+    "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue", "lightyellow",
+    "limegreen", "linen", "magenta", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen",
+    "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream",
+    "mistyrose", "moccasin", "navajowhite", "oldlace", "olivedrab", "orangered", "orchid", "palegoldenrod", "palegreen",
+    "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "rosybrown",
+    "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "skyblue", "slateblue",
+    "slategray", "slategrey", "snow", "springgreen", "steelblue", "tan", "thistle", "tomato", "turquoise", "violet",
+    "wheat", "whitesmoke", "yellowgreen", "rgb()", "rgba()", "hsl()", "hsla()"
+];
+
+WebInspector.CSSKeywordCompletions._colorAwareProperties = [
+    "background", "background-color", "background-image", "border", "border-color", "border-top", "border-right", "border-bottom",
+    "border-left", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color", "box-shadow", "color",
+    "fill", "outline", "outline-color", "stroke", "text-line-through", "text-line-through-color", "text-overline", "text-overline-color",
+    "text-shadow", "text-underline", "text-underline-color", "-webkit-box-shadow", "-webkit-column-rule", "-webkit-column-rule-color",
+    "-webkit-text-emphasis", "-webkit-text-emphasis-color", "-webkit-text-fill-color", "-webkit-text-stroke", "-webkit-text-stroke-color",
+    "-webkit-text-decoration-color",
+
+    // iOS Properties
+    "-webkit-tap-highlight-color"
+].keySet();
+
+WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
+    "table-layout": [
+        "auto", "fixed"
+    ],
+    "visibility": [
+        "hidden", "visible", "collapse"
+    ],
+    "background-repeat": [
+        "repeat", "repeat-x", "repeat-y", "no-repeat", "space", "round"
+    ],
+    "text-underline": [
+        "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave"
+    ],
+    "content": [
+        "list-item", "close-quote", "no-close-quote", "no-open-quote", "open-quote", "attr()", "counter()", "counters()", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
+    ],
+    "list-style-image": [
+        "none", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
+    ],
+    "clear": [
+        "none", "left", "right", "both"
+    ],
+    "stroke-linejoin": [
+        "round", "miter", "bevel"
+    ],
+    "baseline-shift": [
+        "baseline", "sub", "super"
+    ],
+    "border-bottom-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "margin-top-collapse": [
+        "collapse", "separate", "discard"
+    ],
+    "max-height": [
+        "none"
+    ],
+    "-webkit-box-orient": [
+        "horizontal", "vertical", "inline-axis", "block-axis"
+    ],
+    "font-stretch": [
+        "normal", "wider", "narrower", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed",
+        "semi-expanded", "expanded", "extra-expanded", "ultra-expanded"
+    ],
+    "-webkit-color-correction": [
+        "default", "srgb"
+    ],
+    "border-left-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "-webkit-writing-mode": [
+        "lr", "rl", "tb", "lr-tb", "rl-tb", "tb-rl", "horizontal-tb", "vertical-rl", "vertical-lr", "horizontal-bt"
+    ],
+    "text-line-through-mode": [
+        "continuous", "skip-white-space"
+    ],
+    "text-overline-mode": [
+        "continuous", "skip-white-space"
+    ],
+    "text-underline-mode": [
+        "continuous", "skip-white-space"
+    ],
+    "text-line-through-style": [
+        "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave"
+    ],
+    "text-overline-style": [
+        "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave"
+    ],
+    "text-underline-style": [
+        "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave"
+    ],
+    "border-collapse": [
+        "collapse", "separate"
+    ],
+    "border-top-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "outline-color": [
+        "invert", "-webkit-focus-ring-color"
+    ],
+    "outline-style": [
+        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double", "auto"
+    ],
+    "cursor": [
+        "none", "copy", "auto", "crosshair", "default", "pointer", "move", "vertical-text", "cell", "context-menu",
+        "alias", "progress", "no-drop", "not-allowed", "-webkit-zoom-in", "-webkit-zoom-out", "e-resize", "ne-resize",
+        "nw-resize", "n-resize", "se-resize", "sw-resize", "s-resize", "w-resize", "ew-resize", "ns-resize",
+        "nesw-resize", "nwse-resize", "col-resize", "row-resize", "text", "wait", "help", "all-scroll", "-webkit-grab",
+        "-webkit-grabbing", "url()", "-webkit-image-set()"
+    ],
+    "border-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "size": [
+        "a3", "a4", "a5", "b4", "b5", "landscape", "ledger", "legal", "letter", "portrait"
+    ],
+    "background-image": [
+        "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
+    ],
+    "background-size": [
+        "contain", "cover"
+    ],
+    "direction": [
+        "ltr", "rtl"
+    ],
+    "enable-background": [
+        "accumulate", "new"
+    ],
+    "float": [
+        "none", "left", "right"
+    ],
+    "overflow-x": [
+        "hidden", "auto", "visible", "overlay", "scroll", "marquee"
+    ],
+    "overflow-y": [
+        "hidden", "auto", "visible", "overlay", "scroll", "marquee", "-webkit-paged-x", "-webkit-paged-y"
+    ],
+    "overflow": [
+        "hidden", "auto", "visible", "overlay", "scroll", "marquee", "-webkit-paged-x", "-webkit-paged-y"
+    ],
+    "margin-bottom-collapse": [
+        "collapse",  "separate", "discard"
+    ],
+    "-webkit-box-reflect": [
+        "none", "left", "right", "above", "below"
+    ],
+    "text-rendering": [
+        "auto", "optimizeSpeed", "optimizeLegibility", "geometricPrecision"
+    ],
+    "text-align": [
+        "-webkit-auto", "left", "right", "center", "justify", "-webkit-left", "-webkit-right", "-webkit-center", "-webkit-match-parent", "start", "end"
+    ],
+    "list-style-position": [
+        "outside", "inside"
+    ],
+    "margin-bottom": [
+        "auto"
+    ],
+    "color-interpolation": [
+        "linearrgb"
+    ],
+    "background-origin": [
+        "border-box", "content-box", "padding-box"
+    ],
+    "word-wrap": [
+        "normal", "break-word"
+    ],
+    "font-weight": [
+        "normal", "bold", "bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900"
+    ],
+    "margin-before-collapse": [
+        "collapse", "separate", "discard"
+    ],
+    "text-overline-width": [
+        "normal", "medium", "auto", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "text-transform": [
+        "none", "capitalize", "uppercase", "lowercase"
+    ],
+    "border-right-style": [
+        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
+    ],
+    "border-left-style": [
+        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
+    ],
+    "font-style": [
+        "italic", "oblique", "normal"
+    ],
+    "speak": [
+        "none", "normal", "spell-out", "digits", "literal-punctuation", "no-punctuation"
+    ],
+    "text-line-through": [
+        "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave", "continuous",
+        "skip-white-space"
+    ],
+    "color-rendering": [
+        "auto", "optimizeSpeed", "optimizeQuality"
+    ],
+    "list-style-type": [
+        "none", "disc", "circle", "square", "decimal", "decimal-leading-zero", "arabic-indic", "binary", "bengali",
+        "cambodian", "khmer", "devanagari", "gujarati", "gurmukhi", "kannada", "lower-hexadecimal", "lao", "malayalam",
+        "mongolian", "myanmar", "octal", "oriya", "persian", "urdu", "telugu", "tibetan", "thai", "upper-hexadecimal",
+        "lower-roman", "upper-roman", "lower-greek", "lower-alpha", "lower-latin", "upper-alpha", "upper-latin", "afar",
+        "ethiopic-halehame-aa-et", "ethiopic-halehame-aa-er", "amharic", "ethiopic-halehame-am-et", "amharic-abegede",
+        "ethiopic-abegede-am-et", "cjk-earthly-branch", "cjk-heavenly-stem", "ethiopic", "ethiopic-halehame-gez",
+        "ethiopic-abegede", "ethiopic-abegede-gez", "hangul-consonant", "hangul", "lower-norwegian", "oromo",
+        "ethiopic-halehame-om-et", "sidama", "ethiopic-halehame-sid-et", "somali", "ethiopic-halehame-so-et", "tigre",
+        "ethiopic-halehame-tig", "tigrinya-er", "ethiopic-halehame-ti-er", "tigrinya-er-abegede",
+        "ethiopic-abegede-ti-er", "tigrinya-et", "ethiopic-halehame-ti-et", "tigrinya-et-abegede",
+        "ethiopic-abegede-ti-et", "upper-greek", "upper-norwegian", "asterisks", "footnotes", "hebrew", "armenian",
+        "lower-armenian", "upper-armenian", "georgian", "cjk-ideographic", "hiragana", "katakana", "hiragana-iroha",
+        "katakana-iroha"
+    ],
+    "-webkit-text-combine": [
+        "none", "horizontal"
+    ],
+    "outline": [
+        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
+    ],
+    "font": [
+        "caption", "icon", "menu", "message-box", "small-caption", "-webkit-mini-control", "-webkit-small-control",
+        "-webkit-control", "status-bar", "italic", "oblique", "small-caps", "normal", "bold", "bolder", "lighter",
+        "100", "200", "300", "400", "500", "600", "700", "800", "900", "xx-small", "x-small", "small", "medium",
+        "large", "x-large", "xx-large", "-webkit-xxx-large", "smaller", "larger", "serif", "sans-serif", "cursive",
+        "fantasy", "monospace", "-webkit-body", "-webkit-pictograph", "-webkit-system-font", "-apple-system-headline",
+        "-apple-system-body", "-apple-system-subheadline", "-apple-system-footnote", "-apple-system-caption1",
+        "-apple-system-caption2", "-apple-system-short-headline", "-apple-system-short-body",
+        "-apple-system-short-subheadline", "-apple-system-short-footnote", "-apple-system-short-caption1",
+        "-apple-system-tall-body"
+    ],
+    "dominant-baseline": [
+        "middle", "auto", "central", "text-before-edge", "text-after-edge", "ideographic", "alphabetic", "hanging",
+        "mathematical", "use-script", "no-change", "reset-size"
+    ],
+    "display": [
+        "none", "inline", "block", "list-item", "run-in", "compact", "inline-block", "table", "inline-table",
+        "table-row-group", "table-header-group", "table-footer-group", "table-row", "table-column-group",
+        "table-column", "table-cell", "table-caption", "-webkit-box", "-webkit-inline-box", "-wap-marquee",
+        "-webkit-flex", "-webkit-inline-flex", "-webkit-grid", "-webkit-inline-grid"
+    ],
+    "image-rendering": [
+        "auto", "optimizeSpeed", "optimizeQuality", "-webkit-crisp-edges", "-webkit-optimize-contrast"
+    ],
+    "alignment-baseline": [
+        "baseline", "middle", "auto", "before-edge", "after-edge", "central", "text-before-edge", "text-after-edge",
+        "ideographic", "alphabetic", "hanging", "mathematical"
+    ],
+    "outline-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "text-line-through-width": [
+        "normal", "medium", "auto", "thick", "thin"
+    ],
+    "box-align": [
+        "baseline", "center", "stretch", "start", "end"
+    ],
+    "box-shadow": [
+        "none"
+    ],
+    "text-shadow": [
+        "none"
+    ],
+    "-webkit-box-shadow": [
+        "none"
+    ],
+    "border-right-width": [
+        "medium", "thick", "thin"
+    ],
+    "border-top-style": [
+        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
+    ],
+    "line-height": [
+        "normal"
+    ],
+    "counter-increment": [
+        "none"
+    ],
+    "counter-reset": [
+        "none"
+    ],
+    "text-overflow": [
+        "clip", "ellipsis"
+    ],
+    "-webkit-box-direction": [
+        "normal", "reverse"
+    ],
+    "margin-after-collapse": [
+        "collapse", "separate", "discard"
+    ],
+    "page-break-after": [
+        "left", "right", "auto", "always", "avoid"
+    ],
+    "page-break-before": [
+        "left", "right", "auto", "always", "avoid"
+    ],
+    "page-break-inside": [
+        "auto", "avoid"
+    ],
+    "-webkit-column-break-after": [
+        "left", "right", "auto", "always", "avoid"
+    ],
+    "-webkit-column-break-before": [
+        "left", "right", "auto", "always", "avoid"
+    ],
+    "-webkit-column-break-inside": [
+        "auto", "avoid"
+    ],
+    "-webkit-hyphens": [
+        "none", "auto", "manual"
+    ],
+    "border-image": [
+        "repeat", "stretch", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
+    ],
+    "border-image-repeat": [
+        "repeat", "stretch", "space", "round"
+    ],
+    "-webkit-mask-box-image-repeat": [
+        "repeat", "stretch", "space", "round"
+    ],
+    "position": [
+        "absolute", "fixed", "relative", "static", "-webkit-sticky"
+    ],
+    "font-family": [
+        "serif", "sans-serif", "cursive", "fantasy", "monospace", "-webkit-body", "-webkit-pictograph", "-webkit-system-font"
+    ],
+    "text-overflow-mode": [
+        "clip", "ellipsis"
+    ],
+    "border-bottom-style": [
+        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
+    ],
+    "unicode-bidi": [
+        "normal", "bidi-override", "embed", "-webkit-plaintext", "-webkit-isolate", "-webkit-isolate-override"
+    ],
+    "clip-rule": [
+        "nonzero", "evenodd"
+    ],
+    "margin-left": [
+        "auto"
+    ],
+    "margin-top": [
+        "auto"
+    ],
+    "zoom": [
+        "normal", "document", "reset"
+    ],
+    "z-index": [
+        "auto"
+    ],
+    "width": [
+        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "height": [
+        "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "max-width": [
+        "none", "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "min-width": [
+        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "max-height": [
+        "none", "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "min-height": [
+        "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "-webkit-logical-width": [
+        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "-webkit-logical-height": [
+        "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "-webkit-max-logical-width": [
+        "none", "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "-webkit-min-logical-width": [
+        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "-webkit-max-logical-height": [
+        "none", "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "-webkit-min-logical-height": [
+        "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "empty-cells": [
+        "hide", "show"
+    ],
+    "pointer-events": [
+        "none", "all", "auto", "visible", "visiblepainted", "visiblefill", "visiblestroke", "painted", "fill", "stroke"
+    ],
+    "letter-spacing": [
+        "normal", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "word-spacing": [
+        "normal", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "background-clip": [
+        "border-box", "content-box", "padding-box"
+    ],
+    "-webkit-font-kerning": [
+        "auto", "normal", "none"
+    ],
+    "-webkit-font-smoothing": [
+        "none", "auto", "antialiased", "subpixel-antialiased"
+    ],
+    "-webkit-hyphens": [
+        "none", "manual", "auto"
+    ],
+    "border": [
+        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
+    ],
+    "font-size": [
+        "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "-webkit-xxx-large", "smaller",
+        "larger"
+    ],
+    "font-variant": [
+        "small-caps", "normal"
+    ],
+    "vertical-align": [
+        "baseline", "middle", "sub", "super", "text-top", "text-bottom", "top", "bottom", "-webkit-baseline-middle"
+    ],
+    "white-space": [
+        "normal", "nowrap", "pre", "pre-line", "pre-wrap"
+    ],
+    "word-break": [
+        "normal", "break-all", "break-word"
+    ],
+    "text-underline-width": [
+        "normal", "medium", "auto", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "text-indent": [
+        "-webkit-each-line", "-webkit-hanging"
+    ],
+    "-webkit-box-lines": [
+        "single", "multiple"
+    ],
+    "clip": [
+        "auto", "rect()"
+    ],
+    "clip-path": [
+        "none", "url()", "rectangle()", "circle()", "ellipse()", "polygon()", "inset-rectangle()"
+    ],
+    "orphans": [
+        "auto"
+    ],
+    "widows": [
+        "auto"
+    ],
+    "margin": [
+        "auto"
+    ],
+    "page": [
+        "auto"
+    ],
+    "-webkit-marquee-increment": [
+        "small", "large", "medium"
+    ],
+    "-webkit-marquee-direction": [
+        "left", "right", "auto", "reverse", "forwards", "backwards", "ahead", "up", "down"
+    ],
+    "-webkit-marquee-style": [
+        "none", "scroll", "slide", "alternate"
+    ],
+    "-webkit-marquee-repetition": [
+        "infinite"
+    ],
+    "-webkit-marquee-speed": [
+        "normal", "slow", "fast"
+    ],
+    "margin-right": [
+        "auto"
+    ],
+    "marquee-speed": [
+        "normal", "slow", "fast"
+    ],
+    "-webkit-text-emphasis": [
+        "circle", "filled", "open", "dot", "double-circle", "triangle", "sesame"
+    ],
+    "-webkit-text-emphasis-style": [
+        "circle", "filled", "open", "dot", "double-circle", "triangle", "sesame"
+    ],
+    "-webkit-text-emphasis-position": [
+        "over", "under"
+    ],
+    "-webkit-transform": [
+        "none",
+        "scale()", "scaleX()", "scaleY()", "scale3d()", "rotate()", "rotateX()", "rotateY()", "rotateZ()", "rotate3d()", "skew()", "skewX()", "skewY()",
+        "translate()", "translateX()", "translateY()", "translateZ()", "translate3d()", "matrix()", "matrix3d()", "perspective()"
+    ],
+    "-webkit-cursor-visibility": [
+        "auto", "auto-hide"
+    ],
+    "text-decoration": [
+        "none", "underline", "overline", "line-through", "blink"
+    ],
+    "-webkit-text-decorations-in-effect": [
+        "none", "underline", "overline", "line-through", "blink",
+    ],
+    "-webkit-text-decoration-line": [
+        "none", "underline", "overline", "line-through", "blink",
+    ],
+    "-webkit-text-decoration-style": [
+        "solid", "double", "dotted", "dashed", "wavy"
+    ],
+    "-webkit-text-underline-position": [
+        "auto", "alphabetic", "under"
+    ],
+    "image-resolution": [
+        "from-image", "snap"
+    ],
+    "-webkit-blend-mode": [
+        "normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity",
+    ],
+    "-webkit-background-blend-mode": [
+        "normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity",
+    ],
+    "mix": [
+        "auto",
+        "normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity",
+        "clear", "copy", "destination", "source-over", "destination-over", "source-in", "destination-in", "source-out", "destination-out", "source-atop", "destination-atop", "xor"
+    ],
+    "geometry": [
+        "detached", "attached", "grid()"
+    ],
+    "overflow-wrap": [
+        "normal", "break-word"
+    ],
+    "transition": [
+        "none", "ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps()", "cubic-bezier()", "all", WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder
+    ],
+    "transition-timing-function": [
+        "ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps()", "cubic-bezier()"
+    ],
+    "transition-property": [
+        "all", "none", WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder
+    ],
+    "-webkit-column-progression": [
+        "normal", "reverse"
+    ],
+    "-webkit-box-decoration-break": [
+        "slice", "clone"
+    ],
+    "-webkit-align-content": [
+        "flex-start", "flex-end", "center", "space-between", "space-around", "stretch"
+    ],
+    "-webkit-align-items": [
+        "flex-start", "flex-end", "center", "baseline", "stretch"
+    ],
+    "-webkit-align-self": [
+        "auto", "flex-start", "flex-end", "center", "baseline", "stretch"
+    ],
+    "-webkit-justify-content": [
+        "flex-start", "flex-end", "center", "space-between", "space-around"
+    ],
+    "-webkit-flex-direction": [
+        "row", "row-reverse", "column", "column-reverse"
+    ],
+    "-webkit-flex-wrap": [
+        "nowrap", "wrap", "wrap-reverse"
+    ],
+    "-webkit-flex-flow": [
+        "row", "row-reverse", "column", "column-reverse",
+        "nowrap", "wrap", "wrap-reverse"
+    ],
+    "-webkit-flex": [
+        "none"
+    ],
+    "-webkit-flex-basis": [
+        "auto"
+    ],
+    "-webkit-grid-after": [
+        "auto"
+    ],
+    "-webkit-grid-before": [
+        "auto"
+    ],
+    "-webkit-grid-end": [
+        "auto"
+    ],
+    "-webkit-grid-start": [
+        "auto"
+    ],
+    "-webkit-grid-auto-flow": [
+        "none", "rows", "columns"
+    ],
+    "-webkit-grid-column": [
+        "auto"
+    ],
+    "-webkit-grid-row": [
+        "auto"
+    ],
+    "-webkit-grid-columns": [
+        "auto", "-webkit-max-content", "-webkit-min-content"
+    ],
+    "-webkit-grid-rows": [
+        "auto", "-webkit-max-content", "-webkit-min-content"
+    ],
+    "-webkit-ruby-position": [
+        "after", "before"
+    ],
+    "-webkit-text-align-last": [
+        "auto", "start", "end", "left", "right", "center", "justify"
+    ],
+    "-webkit-text-justify": [
+        "auto", "none", "inter-word", "inter-ideograph", "inter-cluster", "distribute", "kashida"
+    ],
+    "max-zoom": [
+        "auto"
+    ],
+    "min-zoom": [
+        "auto"
+    ],
+    "orientation": [
+        "auto", "portait", "landscape"
+    ],
+    "user-zoom": [
+        "zoom", "fixed"
+    ],
+    "-webkit-app-region": [
+        "drag", "no-drag"
+    ],
+    "-webkit-line-break": [
+        "auto", "loose", "normal", "strict", "after-white-space"
+    ],
+    "-webkit-background-composite": [
+        "clear", "copy", "source-over", "source-in", "source-out", "source-atop", "destination-over", "destination-in", "destination-out", "destination-atop", "xor", "plus-darker", "plus-lighter"
+    ],
+    "-webkit-mask-composite": [
+        "clear", "copy", "source-over", "source-in", "source-out", "source-atop", "destination-over", "destination-in", "destination-out", "destination-atop", "xor", "plus-darker", "plus-lighter"
+    ],
+    "-webkit-animation-direction": [
+        "normal", "alternate", "reverse", "alternate-reverse"
+    ],
+    "-webkit-animation-fill-mode": [
+        "none", "forwards", "backwards", "both"
+    ],
+    "-webkit-animation-iteration-count": [
+        "infinite"
+    ],
+    "-webkit-animation-play-state": [
+        "paused", "running"
+    ],
+    "-webkit-animation-timing-function": [
+        "ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps()", "cubic-bezier()"
+    ],
+    "-webkit-column-span": [
+        "all", "none", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "-webkit-region-break-after": [
+        "auto", "always", "avoid", "left", "right"
+    ],
+    "-webkit-region-break-before": [
+        "auto", "always", "avoid", "left", "right"
+    ],
+    "-webkit-region-break-inside": [
+        "auto", "avoid"
+    ],
+    "-webkit-region-overflow": [
+        "auto", "break"
+    ],
+    "-webkit-wrap-flow": [
+        "auto", "both", "start", "end", "maximum", "clear"
+    ],
+    "-webkit-wrap-through": [
+        "wrap", "none"
+    ],
+    "-webkit-backface-visibility": [
+        "visible", "hidden"
+    ],
+    "resize": [
+        "none", "both", "horizontal", "vertical", "auto"
+    ],
+    "caption-side": [
+        "top", "bottom", "left", "right"
+    ],
+    "box-sizing": [
+        "border-box", "content-box"
+    ],
+    "-webkit-border-fit": [
+        "border", "lines"
+    ],
+    "-webkit-line-align": [
+        "none", "edges"
+    ],
+    "-webkit-line-snap": [
+        "none", "baseline", "contain"
+    ],
+    "-webkit-nbsp-mode": [
+        "normal", "space"
+    ],
+    "-webkit-print-color-adjust": [
+        "exact", "economy"
+    ],
+    "-webkit-rtl-ordering": [
+        "logical", "visual"
+    ],
+    "-webkit-text-security": [
+        "disc", "circle", "square", "none"
+    ],
+    "-webkit-transform-style": [
+        "flat", "preserve-3d"
+    ],
+    "-webkit-user-drag": [
+        "auto", "none", "element"
+    ],
+    "-webkit-user-modify": [
+        "read-only", "read-write", "read-write-plaintext-only"
+    ],
+    "-webkit-text-stroke-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "-webkit-border-start-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "-webkit-border-end-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "-webkit-border-before-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "-webkit-border-after-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "-webkit-column-rule-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "-webkit-aspect-ratio": [
+        "none"
+    ],
+    "-webkit-filter": [
+        "none", "grayscale()", "sepia()", "saturate()", "hue-rotate()", "invert()", "opacity()", "brightness()", "contrast()", "blur()", "drop-shadow()", "custom()"
+    ],
+    "-webkit-perspective": [
+        "none"
+    ],
+    "-webkit-column-count": [
+        "auto", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "-webkit-column-gap": [
+        "normal", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "-webkit-column-axis": [
+        "horizontal", "vertical", "auto"
+    ],
+    "-webkit-column-width": [
+        "auto", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
+    ],
+    "-webkit-highlight": [
+        "none"
+    ],
+    "-webkit-hyphenate-character": [
+        "none"
+    ],
+    "-webkit-hyphenate-limit-after": [
+        "auto"
+    ],
+    "-webkit-hyphenate-limit-before": [
+        "auto"
+    ],
+    "-webkit-hyphenate-limit-lines": [
+        "no-limit"
+    ],
+    "-webkit-line-grid": [
+        "none"
+    ],
+    "-webkit-locale": [
+        "auto"
+    ],
+    "-webkit-text-orientation": [
+        "sideways", "sideways-right", "vertical-right", "upright"
+    ],
+    "-webkit-line-box-contain": [
+        "block", "inline", "font", "glyphs", "replaced", "inline-box", "none", "initial"
+    ],
+    "-webkit-font-feature-settings": [
+        "normal"
+    ],
+    "-webkit-font-variant-ligatures": [
+        "normal", "common-ligatures", "no-common-ligatures", "discretionary-ligatures", "no-discretionary-ligatures", "historical-ligatures", "no-historical-ligatures"
+    ],
+    /*
+    "-webkit-appearance": [
+        "none", "checkbox", "radio", "push-button", "square-button", "button", "button-bevel", "default-button", "inner-spin-button", "-webkit-input-speech-button", "listbox", "listitem", "media-enter-fullscreen-button", "media-exit-fullscreen-button", "media-fullscreen-volume-slider", "media-fullscreen-volume-slider-thumb", "media-mute-button", "media-play-button", "media-overlay-play-button", "media-seek-back-button", "media-seek-forward-button", "media-rewind-button", "media-return-to-realtime-button", "media-toggle-closed-captions-button", "media-slider", "media-sliderthumb", "media-volume-slider-container", "media-volume-slider", "media-volume-sliderthumb", "media-volume-slider-mute-button", "media-controls-background", "media-controls-fullscreen-background", "media-current-time-display", "media-time-remaining-display", "menulist", "menulist-button", "menulist-text", "menulist-textfield", "meter", "progress-bar", "progress-bar-value", "slider-horizontal", "slider-vertical", "sliderthumb-horizontal", "sliderthumb-vertical", "caret", "searchfield", "searchfield-decoration", "searchfield-results-decoration", "searchfield-results-button", "searchfield-cancel-button", "snapshotted-plugin-overlay", "textfield", "relevancy-level-indicator", "continuous-capacity-level-indicator", "discrete-capacity-level-indicator", "rating-level-indicator", "textarea"
+    ],
+    */
+
+    // iOS Properties
+    "-webkit-text-size-adjust": [
+        "none", "auto"
+    ],
+    "-webkit-touch-callout": [
+        "default", "none"
+    ],
+    "-webkit-overflow-scrolling": [
+        "auto", "touch"
+    ]
+}
diff --git a/Source/WebInspectorUI/UserInterface/CSSMedia.js b/Source/WebInspectorUI/UserInterface/CSSMedia.js
new file mode 100644
index 000000000..6e4a4eb89
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSMedia.js
@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSMedia = function(type, text, sourceCodeLocation)
+{
+    WebInspector.Object.call(this);
+
+    this._type = type || null;
+    this._text = text || "";
+    this._sourceCodeLocation = sourceCodeLocation || null;
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.CSSMedia);
+
+WebInspector.CSSMedia.Type = {
+    MediaRule: "css-media-type-media-rule",
+    ImportRule: "css-media-type-import-rule",
+    LinkedStyleSheet: "css-media-type-linked-stylesheet",
+    InlineStyleSheet: "css-media-type-inline-stylesheet"
+};
+
+WebInspector.CSSMedia.prototype = {
+    constructor: WebInspector.CSSMedia,
+
+    // Public
+
+    get type()
+    {
+        return this._type;
+    },
+
+    get text()
+    {
+        return this._text;
+    },
+
+    get sourceCodeLocation()
+    {
+        return this._sourceCodeLocation;
+    }
+};
+
+WebInspector.CSSMedia.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSObserver.js b/Source/WebInspectorUI/UserInterface/CSSObserver.js
new file mode 100644
index 000000000..cd066d113
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSObserver.js
@@ -0,0 +1,72 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSObserver = function()
+{
+    WebInspector.Object.call(this);
+};
+
+WebInspector.CSSObserver.prototype = {
+    constructor: WebInspector.CSSObserver,
+
+    // Events defined by the "CSS" domain (see WebCore/inspector/Inspector.json).
+
+    mediaQueryResultChanged: function()
+    {
+        WebInspector.cssStyleManager.mediaQueryResultChanged();
+    },
+
+    styleSheetChanged: function(styleSheetId)
+    {
+        WebInspector.cssStyleManager.styleSheetChanged(styleSheetId);
+    },
+
+    styleSheetAdded: function(header)
+    {
+        // FIXME: Not implemented. <rdar://problem/13213680>
+    },
+
+    styleSheetRemoved: function(header)
+    {
+        // FIXME: Not implemented. <rdar://problem/13213680>
+    },
+
+    namedFlowCreated: function(namedFlow)
+    {
+        // FIXME: Not implemented.
+    },
+
+    namedFlowRemoved: function(documentNodeId, flowName)
+    {
+        // FIXME: Not implemented.
+    },
+
+    regionLayoutUpdated: function(namedFlow)
+    {
+        // FIXME: Not implemented.
+    }
+};
+
+WebInspector.CSSObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSProperty.js b/Source/WebInspectorUI/UserInterface/CSSProperty.js
new file mode 100644
index 000000000..fefb4ee8f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSProperty.js
@@ -0,0 +1,454 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSProperty = function(index, text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange, styleDeclarationTextRange)
+{
+    WebInspector.Object.call(this);
+
+    this._ownerStyle = null;
+    this._index = index;
+
+    this.update(text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange, styleDeclarationTextRange, true);
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.CSSProperty);
+
+WebInspector.CSSProperty.Event = {
+    Changed: "css-property-changed",
+    OverriddenStatusChanged: "css-property-overridden-status-changed"
+};
+
+WebInspector.CSSProperty.prototype = {
+    constructor: WebInspector.CSSProperty,
+
+    // Public
+
+    get ownerStyle()
+    {
+        return this._ownerStyle;
+    },
+
+    set ownerStyle(ownerStyle)
+    {
+        this._ownerStyle = ownerStyle || null;
+    },
+
+    get index()
+    {
+        return this._index;
+    },
+
+    set index(index)
+    {
+        this._index = index;
+    },
+
+    update: function(text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange, styleDeclarationTextRange, dontFireEvents)
+    {
+        text = text || "";
+        name = name || "";
+        value = value || "";
+        priority = priority || "";
+        enabled = enabled || false;
+        overridden = overridden || false;
+        implicit = implicit || false;
+        anonymous = anonymous || false;
+        valid = valid || false;
+
+        var changed = false;
+
+        if (!dontFireEvents) {
+            changed = this._name !== name || this._value !== value || this._priority !== priority ||
+                this._enabled !== enabled || this._implicit !== implicit || this._anonymous !== anonymous || this._valid !== valid;
+        }
+
+        // Use the setter for overridden if we want to fire events since the
+        // OverriddenStatusChanged event coalesces changes before it fires.
+        if (!dontFireEvents)
+            this.overridden = overridden;
+        else
+            this._overridden = overridden;
+
+        this._text = text;
+        this._name = name;
+        this._value = value;
+        this._priority = priority;
+        this._enabled = enabled;
+        this._implicit = implicit;
+        this._anonymous = anonymous;
+        this._inherited = name in WebInspector.CSSKeywordCompletions.InheritedProperties;
+        this._valid = valid;
+        this._styleSheetTextRange = styleSheetTextRange || null;
+
+        if (styleDeclarationTextRange)
+            this._styleDeclarationTextRange = styleDeclarationTextRange;
+        else
+            delete this._styleDeclarationTextRange;
+
+        this._relatedShorthandProperty = null;
+        this._relatedLonghandProperties = [];
+
+        delete this._canonicalName;
+        delete this._hasOtherVendorNameOrKeyword;
+
+        if (!this._updatePropertySoonTimeout) {
+            delete this._pendingName;
+            delete this._pendingValue;
+            delete this._pendingPriority;
+        }
+
+        if (changed)
+            this.dispatchEventToListeners(WebInspector.CSSProperty.Event.Changed);
+    },
+
+    get synthesizedText()
+    {
+        var name = this.name;
+        if (!name)
+            return "";
+
+        var priority = this.priority;
+        return name + ": " + this.value.trim() + (priority ? " !" + priority : "") + ";";
+    },
+
+    get text()
+    {
+        return this._text || this.synthesizedText;
+    },
+
+    set text(text)
+    {
+        if (!this._ownerStyle || !this._ownerStyle.editable)
+            return;
+
+        if (this._text === text)
+            return;
+
+        if (isNaN(this._index)) {
+            this._text = text || "";
+
+            // Clear the name, value and priority since they might not match the text now.
+            this._name = "";
+            this._value = "";
+            this._priority = "";
+
+            // Ditto for the canonical and pending properties.
+            delete this._canonicalName;
+            delete this._pendingName;
+            delete this._pendingValue;
+            delete this._pendingPriority;
+
+            return;
+        }
+
+        this._cancelPendingUpdate();
+        this._ownerStyle.nodeStyles.changePropertyText(this, text);
+    },
+
+    get name()
+    {
+        if (isNaN(this._index))
+            return this._pendingName || this._name;
+        return this._name;
+    },
+
+    set name(name)
+    {
+        if (!this._ownerStyle || !this._ownerStyle.editable)
+            return;
+
+        if (this._name === name)
+            return;
+
+        if (isNaN(this._index)) {
+            this._name = name;
+            this._text = "";
+
+            delete this._canonicalName;
+        } else {
+            this._pendingName = name;
+            this._updatePropertySoon();
+        }
+    },
+
+    get canonicalName()
+    {
+        if (this._canonicalName)
+            return this._canonicalName;
+
+        this._canonicalName = WebInspector.cssStyleManager.canonicalNameForPropertyName(this.name);
+
+        return this._canonicalName;
+    },
+
+    get value()
+    {
+        if (isNaN(this._index))
+            return this._pendingValue || this._value;
+        return this._value;
+    },
+
+    set value(value)
+    {
+        if (!this._ownerStyle || !this._ownerStyle.editable)
+            return;
+
+        if (this._value === value)
+            return;
+
+        if (isNaN(this._index)) {
+            this._value = value;
+            this._text = "";
+        } else {
+            this._pendingValue = value;
+            this._updatePropertySoon();
+        }
+    },
+
+    get important()
+    {
+        return this.priority === "important";
+    },
+
+    set important(important)
+    {
+        this.priority = important ? "important" : "";
+    },
+
+    get priority()
+    {
+        if (isNaN(this._index))
+            return this._pendingPriority || this._priority;
+        return this._priority;
+    },
+
+    set priority(priority)
+    {
+        if (!this._ownerStyle || !this._ownerStyle.editable)
+            return;
+
+        if (this._priority === priority)
+            return;
+
+        if (isNaN(this._index)) {
+            this._priority = priority;
+            this._text = "";
+        } else {
+            this._pendingPriority = priority;
+            this._updatePropertySoon();
+        }
+    },
+
+    get enabled()
+    {
+        return this._enabled && this._ownerStyle && (!isNaN(this._index) || this._ownerStyle.type === WebInspector.CSSStyleDeclaration.Type.Computed);
+    },
+
+    set enabled(enabled)
+    {
+        if (!this._ownerStyle || !this._ownerStyle.editable)
+            return;
+
+        this._ownerStyle.nodeStyles.changePropertyEnabledState(this, enabled);
+    },
+
+    get overridden()
+    {
+        return this._overridden;
+    },
+
+    set overridden(overridden)
+    {
+        overridden = overridden || false;
+
+        if (this._overridden === overridden)
+            return;
+
+        var previousOverridden = this._overridden;
+
+        this._overridden = overridden;
+
+        if (this._overriddenStatusChangedTimeout)
+            return;
+
+        function delayed()
+        {
+            delete this._overriddenStatusChangedTimeout;
+
+            if (this._overridden === previousOverridden)
+                return;
+
+            this.dispatchEventToListeners(WebInspector.CSSProperty.Event.OverriddenStatusChanged);
+        }
+
+        this._overriddenStatusChangedTimeout = setTimeout(delayed.bind(this), 0);
+    },
+
+    get implicit()
+    {
+        return this._implicit;
+    },
+
+    get anonymous()
+    {
+        return this._anonymous;
+    },
+
+    get inherited()
+    {
+        return this._inherited;
+    },
+
+    get valid()
+    {
+        return this._valid;
+    },
+
+    get styleSheetTextRange()
+    {
+        return this._styleSheetTextRange;
+    },
+
+    get styleDeclarationTextRange()
+    {
+        if ("_styleDeclarationTextRange" in this)
+            return this._styleDeclarationTextRange;
+
+        if (!this._ownerStyle || !this._styleSheetTextRange)
+            return null;
+
+        var styleTextRange = this._ownerStyle.styleSheetTextRange;
+        if (!styleTextRange)
+            return null;
+
+        var startLine = this._styleSheetTextRange.startLine - styleTextRange.startLine;
+        var endLine = this._styleSheetTextRange.endLine - styleTextRange.startLine;
+
+        var startColumn = this._styleSheetTextRange.startColumn;
+        if (!startLine)
+            startColumn -= styleTextRange.startColumn;
+
+        var endColumn = this._styleSheetTextRange.endColumn;
+        if (!endLine)
+            endColumn -= styleTextRange.startColumn;
+
+        this._styleDeclarationTextRange = new WebInspector.TextRange(startLine, startColumn, endLine, endColumn);
+
+        return this._styleDeclarationTextRange;
+    },
+
+    get relatedShorthandProperty()
+    {
+        return this._relatedShorthandProperty;
+    },
+
+    set relatedShorthandProperty(property)
+    {
+        this._relatedShorthandProperty = property || null;
+    },
+
+    get relatedLonghandProperties()
+    {
+        return this._relatedLonghandProperties;
+    },
+
+    addRelatedLonghandProperty: function(property)
+    {
+        this._relatedLonghandProperties.push(property);
+    },
+
+    clearRelatedLonghandProperties: function(property)
+    {
+        this._relatedLonghandProperties = [];
+    },
+
+    hasOtherVendorNameOrKeyword: function()
+    {
+        if ("_hasOtherVendorNameOrKeyword" in this)
+            return this._hasOtherVendorNameOrKeyword;
+
+        this._hasOtherVendorNameOrKeyword = WebInspector.cssStyleManager.propertyNameHasOtherVendorPrefix(this.name) || WebInspector.cssStyleManager.propertyValueHasOtherVendorKeyword(this.value);
+
+        return this._hasOtherVendorNameOrKeyword;
+    },
+
+    add: function()
+    {
+        // We can only add if the index is NaN. Return early otherwise.
+        if (!this._ownerStyle || !this._ownerStyle.editable || !isNaN(this._index))
+            return;
+
+        this._cancelPendingUpdate();
+        this._ownerStyle.addProperty(this);
+    },
+
+    remove: function()
+    {
+        // We can only remove if the index is not NaN. Return early otherwise.
+        if (!this._ownerStyle || !this._ownerStyle.editable || isNaN(this._index))
+            return;
+
+        this._cancelPendingUpdate();
+        this._ownerStyle.removeProperty(this);
+    },
+
+    // Private
+
+    _updatePropertySoon: function()
+    {
+        if (!this._ownerStyle || isNaN(this._index) || this._updatePropertySoonTimeout)
+            return;
+
+        function performUpdate()
+        {
+            delete this._updatePropertySoonTimeout;
+
+            if (!this._ownerStyle || isNaN(this._index))
+                return;
+
+            var name = "_pendingName" in this ? this._pendingName : this._name;
+            var value = "_pendingValue" in this ? this._pendingValue : this._value;
+            var priority = "_pendingPriority" in this ? this._pendingPriority : this._priority;
+
+            delete this._pendingName;
+            delete this._pendingValue;
+            delete this._pendingPriority;
+
+            this._ownerStyle.nodeStyles.changeProperty(this, name, value, priority);
+        }
+
+        this._updatePropertySoonTimeout = setTimeout(performUpdate.bind(this), 0);
+    },
+
+    _cancelPendingUpdate: function()
+    {
+        if (!this._updatePropertySoonTimeout)
+            return;
+        clearTimeout(this._updatePropertySoonTimeout);
+        delete this._updatePropertySoonTimeout;
+    }
+};
+
+WebInspector.CSSProperty.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSRule.js b/Source/WebInspectorUI/UserInterface/CSSRule.js
new file mode 100644
index 000000000..8866cb012
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSRule.js
@@ -0,0 +1,204 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSRule = function(nodeStyles, ownerStyleSheet, id, type, sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(nodeStyles);
+    this._nodeStyles = nodeStyles;
+
+    this._ownerStyleSheet = ownerStyleSheet || null;
+    this._id = id || null;
+    this._type = type || null;
+
+    this.update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList, true);
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.CSSRule);
+
+WebInspector.CSSRule.Event = {
+    Changed: "css-rule-changed"
+};
+
+WebInspector.CSSRule.Type = {
+    Author: "css-rule-type-author",
+    User: "css-rule-type-user",
+    UserAgent: "css-rule-type-user-agent",
+    Inspector: "css-rule-type-inspector"
+};
+
+WebInspector.CSSRule.prototype = {
+    constructor: WebInspector.CSSRule,
+
+    // Public
+
+    get id()
+    {
+        return this._id;
+    },
+
+    get ownerStyleSheet()
+    {
+        return this._ownerStyleSheet;
+    },
+
+    get editable()
+    {
+        return !!this._id && (this._type === WebInspector.CSSRule.Type.Author || this._type === WebInspector.CSSRule.Type.Inspector);
+    },
+
+    update: function(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList, dontFireEvents)
+    {
+        sourceCodeLocation = sourceCodeLocation || null;
+        selectorText = selectorText || "";
+        selectors = selectors || [];
+        matchedSelectorIndices = matchedSelectorIndices || [];
+        style = style || null;
+        mediaList = mediaList || [];
+
+        var changed = false;
+        if (!dontFireEvents) {
+            changed = this._selectorText !== selectorText || !Object.shallowEqual(this._selectors, selectors) ||
+                !Object.shallowEqual(this._matchedSelectorIndices, matchedSelectorIndices) || this._style !== style ||
+                !!this._sourceCodeLocation !== !!sourceCodeLocation || this._mediaList.length !== mediaList.length;
+            // FIXME: Look for differences in the media list arrays.
+        }
+
+        if (this._style)
+            this._style.ownerRule = null;
+
+        this._sourceCodeLocation = sourceCodeLocation;
+        this._selectorText = selectorText;
+        this._selectors = selectors;
+        this._matchedSelectorIndices = matchedSelectorIndices;
+        this._style = style;
+        this._mediaList = mediaList;
+
+        delete this._matchedSelectors;
+        delete this._matchedSelectorText;
+
+        if (this._style)
+            this._style.ownerRule = this;
+
+        if (changed)
+            this.dispatchEventToListeners(WebInspector.CSSRule.Event.Changed);
+    },
+
+    get type()
+    {
+        return this._type;
+    },
+
+    get sourceCodeLocation()
+    {
+        return this._sourceCodeLocation;
+    },
+
+    get selectorText()
+    {
+        return this._selectorText;
+    },
+
+    set selectorText(selectorText)
+    {
+        console.assert(this.editable);
+        if (!this.editable)
+            return;
+
+        if (this._selectorText === selectorText)
+            return;
+
+        this._nodeStyles.changeRuleSelector(this, selectorText);
+    },
+
+    get selectors()
+    {
+        return this._selectors;
+    },
+
+    set selectors(selectors)
+    {
+        this.selectorText = (selectors || []).join(", ");
+    },
+
+    get matchedSelectorIndices()
+    {
+        return this._matchedSelectorIndices;
+    },
+
+    get matchedSelectors()
+    {
+        // COMPATIBILITY (iOS 6): The selectors array is always empty, so just return an empty array.
+        if (!this._selectors.length) {
+            console.assert(!this._matchedSelectorIndices.length);
+            return [];
+        }
+
+        if (this._matchedSelectors)
+            return this._matchedSelectors;
+
+        this._matchedSelectors = this._selectors.filter(function(element, index) {
+            return this._matchedSelectorIndices.contains(index);
+        }, this);
+
+        return this._matchedSelectors;
+    },
+
+    get matchedSelectorText()
+    {
+        // COMPATIBILITY (iOS 6): The selectors array is always empty, so just return the whole selector.
+        if (!this._selectors.length) {
+            console.assert(!this._matchedSelectorIndices.length);
+            return this._selectorText;
+        }
+
+        if ("_matchedSelectorText" in this)
+            return this._matchedSelectorText;
+
+        this._matchedSelectorText = this.matchedSelectors.join(", ");
+
+        return this._matchedSelectorText;
+    },
+
+    get style()
+    {
+        return this._style;
+    },
+
+    get mediaList()
+    {
+        return this._mediaList;
+    },
+
+    // Protected
+
+    get nodeStyles()
+    {
+        return this._nodeStyles;
+    }
+};
+
+WebInspector.CSSRule.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSSelectorProfileObject.js b/Source/WebInspectorUI/UserInterface/CSSSelectorProfileObject.js
new file mode 100644
index 000000000..6f087d017
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSSelectorProfileObject.js
@@ -0,0 +1,58 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSSelectorProfileObject = function(title, id, recording, data, totalTime)
+{
+    WebInspector.ProfileObject.call(this, WebInspector.CSSSelectorProfileType.TypeId, title, id, recording);
+
+    this._data = data || [];
+    this._totalTime = totalTime || 0;
+};
+
+WebInspector.CSSSelectorProfileObject.prototype = {
+    constructor: WebInspector.CSSSelectorProfileObject,
+    
+    get data()
+    {
+        return this._data;
+    },
+
+    set data(data)
+    {
+        this._data = data;
+    },
+
+    get totalTime()
+    {
+        return this._totalTime;
+    },
+
+    set totalTime(totalTime)
+    {
+        this._totalTime = totalTime;
+    }
+};
+
+WebInspector.CSSSelectorProfileObject.prototype.__proto__ = WebInspector.ProfileObject.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSSelectorProfileType.js b/Source/WebInspectorUI/UserInterface/CSSSelectorProfileType.js
new file mode 100644
index 000000000..85039b5df
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSSelectorProfileType.js
@@ -0,0 +1,107 @@
+/*
+ * Copyright (C) 2011 Google Inc. All Rights Reserved.
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ */
+WebInspector.CSSSelectorProfileType = function()
+{
+    WebInspector.ProfileType.call(this, WebInspector.CSSSelectorProfileType.TypeId, WebInspector.UIString("Collect CSS Selector Profile"));
+    this._recording = false;
+    this._profileUid = 1;
+    WebInspector.CSSSelectorProfileType.instance = this;
+}
+
+WebInspector.CSSSelectorProfileType.TypeId = "SELECTOR";
+
+WebInspector.CSSSelectorProfileType.prototype = {
+    get buttonTooltip()
+    {
+        return this._recording ? WebInspector.UIString("Stop CSS selector profiling.") : WebInspector.UIString("Start CSS selector profiling.");
+    },
+
+    buttonClicked: function()
+    {
+        if (this._recording)
+            this.stopRecordingProfile();
+        else
+            this.startRecordingProfile();
+    },
+
+    get treeItemTitle()
+    {
+        return WebInspector.UIString("CSS SELECTOR PROFILES");
+    },
+
+    get description()
+    {
+        return WebInspector.UIString("CSS selector profiles show how long the selector matching has taken in total and how many times a certain selector has matched DOM elements (the results are approximate due to matching algorithm optimizations.)");
+    },
+
+    reset: function()
+    {
+        this._profileUid = 1;
+    },
+
+    nextProfileId: function()
+    {
+        return this._profileUid++;
+    },
+
+    isRecordingProfile: function()
+    {
+        return this._recording;
+    },
+
+    setRecordingProfile: function(isProfiling)
+    {
+        this._recording = isProfiling;
+    },
+
+    startRecordingProfile: function()
+    {
+        this._recording = true;
+        CSSAgent.startSelectorProfiler();
+    },
+
+    stopRecordingProfile: function(callback)
+    {
+        this._recording = false;
+        CSSAgent.stopSelectorProfiler(callback);
+    },
+
+    createSidebarTreeElementForProfile: function(profile)
+    {
+        return new WebInspector.ProfileSidebarTreeElement(profile, profile.title, "profile-sidebar-tree-item");
+    },
+
+    createView: function(profile)
+    {
+        return new WebInspector.CSSSelectorProfileView(profile);
+    }
+}
+
+WebInspector.CSSSelectorProfileType.prototype.__proto__ = WebInspector.ProfileType.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSSelectorProfileView.js b/Source/WebInspectorUI/UserInterface/CSSSelectorProfileView.js
new file mode 100644
index 000000000..fb16770ca
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSSelectorProfileView.js
@@ -0,0 +1,230 @@
+/*
+ * Copyright (C) 2011 Google Inc. All Rights Reserved.
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ * @extends WebInspector.DataGridNode
+ * @param {WebInspector.CSSSelectorProfileView} profileView
+ */
+WebInspector.CSSSelectorDataGridNode = function(profileView, data)
+{
+    WebInspector.DataGridNode.call(this, data, false);
+    this._profileView = profileView;
+}
+
+WebInspector.CSSSelectorDataGridNode.prototype = {
+    get data()
+    {
+        var data = {};
+        data.selector = this._data.selector;
+        data.matches = this._data.matchCount;
+
+        if (this._profileView.showTimeAsPercent.value)
+            data.time = Number(this._data.timePercent).toFixed(1) + "%";
+        else
+            data.time = Number.secondsToString(this._data.time / 1000, true);
+
+        return data;
+    },
+
+    get rawData()
+    {
+        return this._data;
+    },
+
+    createCell: function(columnIdentifier)
+    {
+        var cell = WebInspector.DataGridNode.prototype.createCell.call(this, columnIdentifier);
+        if (columnIdentifier === "selector" && cell.firstChild) {
+            cell.firstChild.title = this.rawData.selector;
+            return cell;
+        }
+
+        if (columnIdentifier !== "source")
+            return cell;
+
+        cell.removeChildren();
+
+        if (this.rawData.url) {
+            var wrapperDiv = cell.createChild("div");
+            wrapperDiv.appendChild(this._linkifyLocation(this.rawData.url, this.rawData.lineNumber));
+        }
+
+        return cell;
+    },
+
+    _linkifyLocation: function(url, lineNumber)
+    {
+        // FIXME: SelectorProfileEntry need columnNumbers.
+        return WebInspector.linkifyLocation(url, lineNumber, 0);
+    }
+}
+
+WebInspector.CSSSelectorDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
+
+/**
+ * @constructor
+ * @extends WebInspector.View
+ * @param {CSSAgent.SelectorProfile} profile
+ */
+WebInspector.CSSSelectorProfileView = function(profile)
+{
+    console.assert(profile instanceof WebInspector.CSSSelectorProfileObject);
+
+    WebInspector.ProfileView.call(this, profile, "css-selector-profiler-show-time-as-percent");
+}
+
+WebInspector.CSSSelectorProfileView.prototype = {
+    constructor: WebInspector.CSSSelectorProfileView,
+
+    updateLayout: function()
+    {
+        if (this.dataGrid)
+            this.dataGrid.updateLayout();
+    },
+
+    get recordingTitle()
+    {
+        return WebInspector.UIString("Recording CSS Selector Profile\u2026");
+    },
+
+    displayProfile: function()
+    {
+        var columns = { "selector": { title: WebInspector.UIString("Selector"), width: "550px", sortable: true },
+                        "source": { title: WebInspector.UIString("Source"), width: "100px", sortable: true },
+                        "time": { title: WebInspector.UIString("Total"), width: "72px", sort: "descending", sortable: true },
+                        "matches": { title: WebInspector.UIString("Matches"), width: "72px", sortable: true } };
+
+        this.dataGrid = new WebInspector.DataGrid(columns);
+        this.dataGrid.element.classList.add("selector-profile-view");
+        this.dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortProfile, this);
+
+        this.element.appendChild(this.dataGrid.element);
+        this.dataGrid.updateLayout();
+
+        this._createProfileNodes();
+        this._sortProfile();
+    },
+
+    _createProfileNodes: function()
+    {
+        var data = this.profile.data;
+        if (!data) {
+            // The profiler may have been terminated with the "Clear all profiles." button.
+            return;
+        }
+
+        this.profile.children = [];
+        for (var i = 0; i < data.length; ++i) {
+            data[i].timePercent = data[i].time * 100 / this.profile.totalTime;
+            var node = new WebInspector.CSSSelectorDataGridNode(this, data[i]);
+            this.profile.children.push(node);
+        }
+    },
+
+    rebuildGridItems: function()
+    {
+        this.dataGrid.removeChildren();
+
+        var children = this.profile.children;
+        var count = children.length;
+
+        for (var index = 0; index < count; ++index)
+            this.dataGrid.appendChild(children[index]);
+    },
+
+    refreshData: function()
+    {
+        var child = this.dataGrid.children[0];
+        while (child) {
+            child.refresh();
+            child = child.traverseNextNode(false, null, true);
+        }
+    },
+
+    toggleTimeDisplay: function(event)
+    {
+        WebInspector.ProfileView.prototype.toggleTimeDisplay.call(this, event);
+        this.showTimeAsPercent.value = !this.showTimeAsPercent.value;
+        this.refreshData();
+    },
+
+    _sortProfile: function()
+    {
+        var sortAscending = this.dataGrid.sortOrder === "ascending";
+        var sortColumnIdentifier = this.dataGrid.sortColumnIdentifier;
+
+        function selectorComparator(a, b)
+        {
+            var result = b.rawData.selector.localeCompare(a.rawData.selector);
+            return sortAscending ? -result : result;
+        }
+
+        function sourceComparator(a, b)
+        {
+            var aRawData = a.rawData;
+            var bRawData = b.rawData;
+            var result = bRawData.url.localeCompare(aRawData.url);
+            if (!result)
+                result = bRawData.lineNumber - aRawData.lineNumber;
+            return sortAscending ? -result : result;
+        }
+
+        function timeComparator(a, b)
+        {
+            const result = b.rawData.time - a.rawData.time;
+            return sortAscending ? -result : result;
+        }
+
+        function matchesComparator(a, b)
+        {
+            const result = b.rawData.matchCount - a.rawData.matchCount;
+            return sortAscending ? -result : result;
+        }
+
+        var comparator;
+        switch (sortColumnIdentifier) {
+        case "time":
+            comparator = timeComparator;
+            break;
+        case "matches":
+            comparator = matchesComparator;
+            break;
+        case "selector":
+            comparator = selectorComparator;
+            break;
+        case "source":
+            comparator = sourceComparator;
+            break;
+        }
+
+        this.profile.children.sort(comparator);
+
+        this.rebuildGridItems();
+    }
+}
+
+WebInspector.CSSSelectorProfileView.prototype.__proto__ = WebInspector.ProfileView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleDeclaration.js b/Source/WebInspectorUI/UserInterface/CSSStyleDeclaration.js
new file mode 100644
index 000000000..eaab18787
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSStyleDeclaration.js
@@ -0,0 +1,310 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSStyleDeclaration = function(nodeStyles, ownerStyleSheet, id, type, node, inherited, text, properties, styleSheetTextRange)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(nodeStyles);
+    this._nodeStyles = nodeStyles;
+
+    this._ownerRule = null;
+
+    this._ownerStyleSheet = ownerStyleSheet || null;
+    this._id = id || null;
+    this._type = type || null;
+    this._node = node || null;
+    this._inherited = inherited || false;
+
+    this._pendingProperties = [];
+    this._propertyNameMap = {};
+
+    this.update(text, properties, styleSheetTextRange, true);
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.CSSStyleDeclaration);
+
+WebInspector.CSSStyleDeclaration.Event = {
+    PropertiesChanged: "css-style-declaration-properties-changed"
+};
+
+WebInspector.CSSStyleDeclaration.Type = {
+    Rule: "css-style-declaration-type-rule",
+    Inline: "css-style-declaration-type-inline",
+    Attribute: "css-style-declaration-type-attribute",
+    Computed: "css-style-declaration-type-computed"
+};
+
+WebInspector.CSSStyleDeclaration.prototype = {
+    constructor: WebInspector.CSSStyleDeclaration,
+
+    // Public
+
+    get id()
+    {
+        return this._id;
+    },
+
+    get ownerStyleSheet()
+    {
+        return this._ownerStyleSheet;
+    },
+
+    get type()
+    {
+        return this._type;
+    },
+
+    get inherited()
+    {
+        return this._inherited;
+    },
+
+    get node()
+    {
+        return this._node;
+    },
+
+    get editable()
+    {
+        return !!this._id && ((this._type === WebInspector.CSSStyleDeclaration.Type.Rule && this._ownerRule && this._ownerRule.editable) || this._type === WebInspector.CSSStyleDeclaration.Type.Inline);
+    },
+
+    update: function(text, properties, styleSheetTextRange, dontFireEvents)
+    {
+        text = text || "";
+        properties = properties || [];
+
+        var oldProperties = this._properties || [];
+        var oldText = this._text;
+
+        this._text = text;
+        this._properties = properties;
+        this._styleSheetTextRange = styleSheetTextRange;
+        this._propertyNameMap = {};
+
+        delete this._visibleProperties;
+
+        var editable = this.editable;
+
+        for (var i = 0; i < this._properties.length; ++i) {
+            var property = this._properties[i];
+            property.ownerStyle = this;
+
+            // Store the property in a map if we arn't editable. This
+            // allows for quick lookup for computed style. Editable
+            // styles don't use the map since they need to account for
+            // overridden properties.
+            if (!editable)
+                this._propertyNameMap[property.name] = property;
+            else {
+                // Remove from pendingProperties (if it was pending).
+                this._pendingProperties.remove(property);
+            }
+        }
+
+        var removedProperties = [];
+        for (var i = 0; i < oldProperties.length; ++i) {
+            var oldProperty = oldProperties[i];
+
+            if (!this._properties.contains(oldProperty)) {
+                // Clear the index, since it is no longer valid.
+                oldProperty.index = NaN;
+
+                removedProperties.push(oldProperty);
+
+                // Keep around old properties in pending in case they
+                // are needed again during editing.
+                if (editable)
+                    this._pendingProperties.push(oldProperty);
+            }
+        }
+
+        if (dontFireEvents)
+            return;
+
+        var addedProperties = [];
+        for (var i = 0; i < this._properties.length; ++i) {
+            if (!oldProperties.contains(this._properties[i]))
+                addedProperties.push(this._properties[i]);
+        }
+
+        // Don't fire the event if there is text and it hasn't changed.
+        if (oldText && this._text && oldText === this._text) {
+            // We shouldn't have any added or removed properties in this case.
+            console.assert(!addedProperties.length && !removedProperties.length);
+            if (!addedProperties.length && !removedProperties.length)
+                return;
+        }
+
+        function delayed()
+        {
+            this.dispatchEventToListeners(WebInspector.CSSStyleDeclaration.Event.PropertiesChanged, {addedProperties: addedProperties, removedProperties: removedProperties});
+        }
+
+        // Delay firing the PropertiesChanged event so DOMNodeStyles has a chance to mark overridden and associated properties.
+        setTimeout(delayed.bind(this), 0);
+    },
+
+    get ownerRule()
+    {
+        return this._ownerRule;
+    },
+
+    set ownerRule(rule)
+    {
+        this._ownerRule = rule || null;
+    },
+
+    get text()
+    {
+        return this._text;
+    },
+
+    set text(text)
+    {
+        if (this._text === text)
+            return;
+
+        this._nodeStyles.changeStyleText(this, text);
+    },
+
+    get properties()
+    {
+        return this._properties;
+    },
+
+    get visibleProperties()
+    {
+        if (this._visibleProperties)
+            return this._visibleProperties;
+
+        this._visibleProperties = this._properties.filter(function(property) {
+            return !!property.styleDeclarationTextRange;
+        });
+
+        return this._visibleProperties;
+    },
+
+    get pendingProperties()
+    {
+        return this._pendingProperties;
+    },
+
+    get styleSheetTextRange()
+    {
+        return this._styleSheetTextRange;
+    },
+
+    propertyForName: function(name, dontCreateIfMissing)
+    {
+        console.assert(name);
+        if (!name)
+            return null;
+
+        if (!this.editable)
+            return this._propertyNameMap[name] || null;
+
+        // Editable styles don't use the map since they need to
+        // account for overridden properties.
+
+        function findMatch(properties)
+        {
+            for (var i = 0; i < properties.length; ++i) {
+                var property = properties[i];
+                if (property.canonicalName !== name && property.name !== name)
+                    continue;
+                if (bestMatchProperty && !bestMatchProperty.overridden && property.overridden)
+                    continue;
+                bestMatchProperty = property;
+            }
+        }
+
+        var bestMatchProperty = null;
+
+        findMatch(this._properties);
+
+        if (bestMatchProperty)
+            return bestMatchProperty;
+
+        if (dontCreateIfMissing || !this.editable)
+            return null;
+
+        findMatch(this._pendingProperties, true);
+
+        if (bestMatchProperty)
+            return bestMatchProperty;
+
+        var newProperty = new WebInspector.CSSProperty(NaN, null, name);
+        newProperty.ownerStyle = this;
+
+        this._pendingProperties.push(newProperty);
+
+        return newProperty;
+    },
+
+    addProperty: function(property)
+    {
+        console.assert(property);
+        if (!property)
+            return;
+
+        console.assert(property.ownerStyle === this);
+        if (property.ownerStyle !== this)
+            return;
+
+        console.assert(this.editable);
+        if (!this.editable)
+            return;
+
+        this._nodeStyles.addProperty(property);
+    },
+
+    removeProperty: function(property)
+    {
+        console.assert(property);
+        if (!property)
+            return;
+
+        console.assert(property.ownerStyle === this);
+        if (property.ownerStyle !== this)
+            return;
+
+        console.assert(this.editable);
+        if (!this.editable)
+            return;
+
+        this._nodeStyles.removeProperty(property);
+    },
+
+    // Protected
+
+    get nodeStyles()
+    {
+        return this._nodeStyles;
+    }
+};
+
+WebInspector.CSSStyleDeclaration.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationSection.css b/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationSection.css
new file mode 100644
index 000000000..434b1c2a7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationSection.css
@@ -0,0 +1,153 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.style-declaration-section {
+    display: -webkit-flex;
+    -webkit-flex-direction: column;
+
+    padding: 5px;
+
+    background-color: white;
+}
+
+.style-declaration-section + .style-declaration-section {
+    border-top: 1px solid rgb(210, 210, 210);
+}
+
+.style-declaration-section.last-in-group {
+    margin-bottom: 15px;
+
+    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 2px 0;
+}
+
+.style-declaration-section.last-in-group + .style-declaration-section {
+    margin-top: 15px;
+
+    border-top: none;
+
+    box-shadow: rgba(0, 0, 0, 0.3) 0 0 2px 0;
+}
+
+.style-declaration-section:first-child,
+div:not(.style-declaration-section) + .style-declaration-section,
+.style-declaration-section.last-in-group + .style-declaration-section.last-in-group,
+.style-declaration-section.last-in-group + .style-declaration-section:last-child {
+    box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px 1px;
+}
+
+.style-declaration-section:last-child {
+    margin-bottom: 0 !important;
+}
+
+.style-declaration-section > .header {
+    position: relative;
+
+    padding: 4px 5px 3px 25px;
+
+    font-size: 11px;
+    line-height: 12px;
+}
+
+.style-declaration-section > .header > .icon {
+    position: absolute;
+
+    top: 2px;
+    left: 4px;
+
+    width: 16px;
+    height: 16px;
+}
+
+.style-declaration-section > .header > .selector {
+    font-family: Menlo, monospace;
+    color: rgb(128, 128, 128);
+
+    outline: none;
+
+    cursor: text;
+
+    word-wrap: break-word;
+
+    -webkit-user-select: text;
+    -webkit-user-modify: read-write-plaintext-only;
+}
+
+.style-declaration-section > .header > .selector:empty {
+    /* This prevents the cursor from disappearing when empty. */
+    display: inline-block;
+    min-width: 1px;
+}
+
+.style-declaration-section > .header > .selector:empty::before {
+    /* This prevents the cursor from positioning badly when empty. */
+    content: "";
+}
+
+.style-declaration-section > .header > .selector:focus {
+    color: black;
+}
+
+.style-declaration-section.locked > .header > .selector,
+.style-declaration-section.selector-locked > .header > .selector {
+    -webkit-user-modify: read-only;
+}
+
+.style-declaration-section.locked > .header::before {
+    float: right;
+
+    content: "";
+
+    width: 8px;
+    height: 10px;
+
+    background-image: -webkit-canvas(style-lock-normal);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 8px 10px;
+
+    margin-left: 5px;
+}
+
+.style-declaration-section > .header > .selector > .matched {
+    color: black;
+}
+
+.style-declaration-section > .header > .origin {
+    line-height: 10px;
+    font-family: "Lucida Grande", sans-serif;
+
+    color: rgb(128, 128, 128);
+    
+    word-wrap: break-word;
+    white-space: nowrap;
+}
+
+.style-declaration-section > .header > .origin a {
+    white-space: normal;
+}
+
+.style-declaration-section > .header > .origin > .go-to-link {
+    color: inherit !important;
+}
diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationSection.js b/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationSection.js
new file mode 100644
index 000000000..52569255a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationSection.js
@@ -0,0 +1,261 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSStyleDeclarationSection = function(style)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(style);
+    this._style = style || null;
+
+    this._element = document.createElement("div");
+    this._element.className = WebInspector.CSSStyleDeclarationSection.StyleClassName;
+
+    this._headerElement = document.createElement("div");
+    this._headerElement.className = WebInspector.CSSStyleDeclarationSection.HeaderElementStyleClassName;
+
+    this._iconElement = document.createElement("img");
+    this._iconElement.className = WebInspector.CSSStyleDeclarationSection.IconElementStyleClassName;
+    this._headerElement.appendChild(this._iconElement);
+
+    this._selectorElement = document.createElement("span");
+    this._selectorElement.className = WebInspector.CSSStyleDeclarationSection.SelectorElementStyleClassName;
+    this._selectorElement.setAttribute("spellcheck", "false");
+    this._headerElement.appendChild(this._selectorElement);
+
+    this._originElement = document.createElement("span");
+    this._originElement.className = WebInspector.CSSStyleDeclarationSection.OriginElementStyleClassName;
+    this._headerElement.appendChild(this._originElement);
+
+    this._propertiesElement = document.createElement("div");
+    this._propertiesElement.className = WebInspector.CSSStyleDeclarationSection.PropertiesElementStyleClassName;
+
+    this._propertiesTextEditor = new WebInspector.CSSStyleDeclarationTextEditor(this, style);
+    this._propertiesElement.appendChild(this._propertiesTextEditor.element);
+
+    this._element.appendChild(this._headerElement);
+    this._element.appendChild(this._propertiesElement);
+
+    var iconClassName;
+    switch (style.type) {
+    case WebInspector.CSSStyleDeclaration.Type.Rule:
+        console.assert(style.ownerRule);
+
+        if (style.inherited)
+            iconClassName = WebInspector.CSSStyleDeclarationSection.InheritedStyleRuleIconStyleClassName;
+        else if (style.ownerRule.type === WebInspector.CSSRule.Type.Author)
+            iconClassName = WebInspector.CSSStyleDeclarationSection.AuthorStyleRuleIconStyleClassName;
+        else if (style.ownerRule.type === WebInspector.CSSRule.Type.User)
+            iconClassName = WebInspector.CSSStyleDeclarationSection.UserStyleRuleIconStyleClassName;
+        else if (style.ownerRule.type === WebInspector.CSSRule.Type.UserAgent)
+            iconClassName = WebInspector.CSSStyleDeclarationSection.UserAgentStyleRuleIconStyleClassName;
+        else if (style.ownerRule.type === WebInspector.CSSRule.Type.Inspector)
+            iconClassName = WebInspector.CSSStyleDeclarationSection.InspectorStyleRuleIconStyleClassName;
+        break;
+
+    case WebInspector.CSSStyleDeclaration.Type.Inline:
+    case WebInspector.CSSStyleDeclaration.Type.Attribute:
+        if (style.inherited)
+            iconClassName = WebInspector.CSSStyleDeclarationSection.InheritedElementStyleRuleIconStyleClassName;
+        else
+            iconClassName = WebInspector.DOMTreeElementPathComponent.DOMElementIconStyleClassName;
+        break;
+    }
+
+    console.assert(iconClassName);
+    this._element.classList.add(iconClassName);
+
+    if (!style.editable)
+        this._element.classList.add(WebInspector.CSSStyleDeclarationSection.LockedStyleClassName);
+    else if (style.ownerRule) {
+        this._commitSelectorKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Enter, this._commitSelector.bind(this), this._selectorElement);
+        this._selectorElement.addEventListener("blur", this._commitSelector.bind(this));
+    } else
+        this._element.classList.add(WebInspector.CSSStyleDeclarationSection.SelectorLockedStyleClassName);
+
+    if (!WebInspector.CSSStyleDeclarationSection._generatedLockImages) {
+        WebInspector.CSSStyleDeclarationSection._generatedLockImages = true;
+
+        var specifications = {"style-lock-normal": {fillColor: [0, 0, 0, 0.5]}};
+        generateColoredImagesForCSS("Images/Locked.pdf", specifications, 8, 10);
+    }
+
+    this.refresh();
+};
+
+WebInspector.CSSStyleDeclarationSection.StyleClassName = "style-declaration-section";
+WebInspector.CSSStyleDeclarationSection.LockedStyleClassName = "locked";
+WebInspector.CSSStyleDeclarationSection.SelectorLockedStyleClassName = "selector-locked";
+WebInspector.CSSStyleDeclarationSection.LastInGroupStyleClassName = "last-in-group";
+WebInspector.CSSStyleDeclarationSection.HeaderElementStyleClassName = "header";
+WebInspector.CSSStyleDeclarationSection.IconElementStyleClassName = "icon";
+WebInspector.CSSStyleDeclarationSection.SelectorElementStyleClassName = "selector";
+WebInspector.CSSStyleDeclarationSection.OriginElementStyleClassName = "origin";
+WebInspector.CSSStyleDeclarationSection.PropertiesElementStyleClassName = "properties";
+WebInspector.CSSStyleDeclarationSection.MatchedSelectorElementStyleClassName = "matched";
+
+WebInspector.CSSStyleDeclarationSection.AuthorStyleRuleIconStyleClassName = "author-style-rule-icon";
+WebInspector.CSSStyleDeclarationSection.UserStyleRuleIconStyleClassName = "user-style-rule-icon";
+WebInspector.CSSStyleDeclarationSection.UserAgentStyleRuleIconStyleClassName = "user-agent-style-rule-icon";
+WebInspector.CSSStyleDeclarationSection.InspectorStyleRuleIconStyleClassName = "inspector-style-rule-icon";
+WebInspector.CSSStyleDeclarationSection.InheritedStyleRuleIconStyleClassName = "inherited-style-rule-icon";
+WebInspector.CSSStyleDeclarationSection.InheritedElementStyleRuleIconStyleClassName = "inherited-element-style-rule-icon";
+
+WebInspector.CSSStyleDeclarationSection.prototype = {
+    constructor: WebInspector.CSSStyleDeclarationSection,
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get style()
+    {
+        return this._style;
+    },
+
+    get lastInGroup()
+    {
+        return this._element.classList.contains(WebInspector.CSSStyleDeclarationSection.LastInGroupStyleClassName);
+    },
+
+    set lastInGroup(last)
+    {
+        if (last)
+            this._element.classList.add(WebInspector.CSSStyleDeclarationSection.LastInGroupStyleClassName);
+        else
+            this._element.classList.remove(WebInspector.CSSStyleDeclarationSection.LastInGroupStyleClassName);
+    },
+
+    get focused()
+    {
+        return this._propertiesTextEditor.focused;
+    },
+
+    focus: function()
+    {
+        this._propertiesTextEditor.focus();
+    },
+
+    refresh: function()
+    {
+        this._selectorElement.removeChildren();
+        this._originElement.removeChildren();
+
+        this._originElement.appendChild(document.createTextNode(" \u2014 "));
+
+        function appendSelector(selectorText, matched)
+        {
+            var selectorElement = document.createElement("span");
+            if (matched)
+                selectorElement.className = WebInspector.CSSStyleDeclarationSection.MatchedSelectorElementStyleClassName;
+            selectorElement.textContent = selectorText;
+            this._selectorElement.appendChild(selectorElement);
+        }
+
+        switch (this._style.type) {
+        case WebInspector.CSSStyleDeclaration.Type.Rule:
+            console.assert(this._style.ownerRule);
+
+            var selectors = this._style.ownerRule.selectors;
+            var matchedSelectorIndices = this._style.ownerRule.matchedSelectorIndices;
+            if (selectors.length && matchedSelectorIndices.length) {
+                for (var i = 0; i < selectors.length; ++i) {
+                    appendSelector.call(this, selectors[i], matchedSelectorIndices.contains(i));
+                    if (i < selectors.length - 1)
+                        this._selectorElement.appendChild(document.createTextNode(", "));
+                }
+            } else
+                appendSelector.call(this, this._style.ownerRule.selectorText, true);
+
+            if (this._style.ownerRule.sourceCodeLocation) {
+                var sourceCodeLink = WebInspector.createSourceCodeLocationLink(this._style.ownerRule.sourceCodeLocation, true);
+                this._originElement.appendChild(sourceCodeLink);
+            } else {
+                var originString;
+                switch (this._style.ownerRule.type) {
+                case WebInspector.CSSRule.Type.Author:
+                    originString = WebInspector.UIString("Author Stylesheet");
+                    break;
+
+                case WebInspector.CSSRule.Type.User:
+                    originString = WebInspector.UIString("User Stylesheet");
+                    break;
+
+                case WebInspector.CSSRule.Type.UserAgent:
+                    originString = WebInspector.UIString("User Agent Stylesheet");
+                    break;
+
+                case WebInspector.CSSRule.Type.Inspector:
+                    originString = WebInspector.UIString("Web Inspector");
+                    break;
+                }
+
+                console.assert(originString);
+                if (originString)
+                    this._originElement.appendChild(document.createTextNode(originString));
+            }
+
+            break;
+
+        case WebInspector.CSSStyleDeclaration.Type.Inline:
+            appendSelector.call(this, WebInspector.displayNameForNode(this._style.node), true);
+            this._originElement.appendChild(document.createTextNode(WebInspector.UIString("Style Attribute")));
+            break;
+
+        case WebInspector.CSSStyleDeclaration.Type.Attribute:
+            appendSelector.call(this, WebInspector.displayNameForNode(this._style.node), true);
+            this._originElement.appendChild(document.createTextNode(WebInspector.UIString("HTML Attributes")));
+            break;
+        }
+    },
+
+    updateLayout: function()
+    {
+        this._propertiesTextEditor.updateLayout();
+    },
+
+    // Private
+
+    _commitSelector: function(mutations)
+    {
+        console.assert(this._style.ownerRule);
+        if (!this._style.ownerRule)
+            return;
+
+        var newSelectorText = this._selectorElement.textContent.trim();
+        if (!newSelectorText) {
+            // Revert to the current selector (by doing a refresh) since the new selector is empty.
+            this.refresh();
+            return;
+        }
+
+        this._style.ownerRule.selectorText = newSelectorText;
+    }
+};
+
+WebInspector.CSSStyleDeclarationSection.prototype.__proto__ = WebInspector.StyleDetailsPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.css b/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.css
new file mode 100644
index 000000000..f001641ff
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.css
@@ -0,0 +1,161 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.css-style-text-editor {
+    background-color: white;
+    padding: 2px 0;
+}
+
+.css-style-text-editor > .CodeMirror {
+    height: auto;
+}
+
+.css-style-text-editor > .CodeMirror-scroll {
+    overflow: hidden;
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-placeholder {
+    font-family: "Lucida Grande", sans-serif;
+    color: rgb(128, 128, 128);
+    padding: 0 5px 0 39px;
+    text-indent: -14px;
+}
+
+.css-style-text-editor > .CodeMirror pre {
+    padding: 1px 5px 1px 39px;
+    text-indent: -35px;
+}
+
+.css-style-text-editor > .CodeMirror pre * {
+    text-indent: 0;
+}
+
+.css-style-text-editor.read-only > .CodeMirror pre {
+    /* Compensate for the missing checkboxes so properties line up with editable styles that have checkboxes. */
+    text-indent: -14px;
+}
+
+.css-style-text-editor.read-only > .CodeMirror .CodeMirror-cursor {
+    display: none;
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines pre span:not(.css-style-declaration-property):not(.CodeMirror-widget):not(.cm-comment):not(.cm-tab),
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.disabled,
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.invalid,
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.other-vendor,
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.not-inherited,
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.overridden {
+    text-decoration: line-through;
+    -webkit-text-stroke-width: 0.000000000000001px; /* A hack to get a different line-through color. */
+    -webkit-text-stroke-color: rgba(0, 0, 0, 0.6);
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines pre span:not(.css-style-declaration-property):not(.CodeMirror-widget):not(.cm-comment):not(.cm-tab),
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.invalid {
+    -webkit-text-stroke-color: rgba(255, 0, 0, 0.6);
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.implicit,
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.not-inherited {
+    opacity: 0.5;
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line .css-style-declaration-property.disabled,
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line .css-style-declaration-property.other-vendor,
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line .css-style-declaration-property.not-inherited,
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line .css-style-declaration-property.overridden {
+    -webkit-text-stroke-color: rgba(0, 0, 0, 0.3);
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line span:not(.css-style-declaration-property):not(.CodeMirror-widget):not(.cm-comment):not(.cm-tab),
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line .css-style-declaration-property.invalid {
+    text-decoration: none;
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines input[type=checkbox] {
+    width: 10px;
+    height: 10px;
+    vertical-align: middle;
+    margin: 0 8px 0 3px;
+    visibility: hidden;
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .checkbox-placeholder {
+    display: inline-block;
+    width: 21px;
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines input[type=checkbox]:not(:checked),
+.css-style-text-editor > .CodeMirror.CodeMirror-focused .CodeMirror-lines input[type=checkbox],
+.css-style-text-editor:hover > .CodeMirror .CodeMirror-lines input[type=checkbox] {
+    visibility: visible;
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch {
+    display: inline-block;
+
+    margin-right: 3px;
+    vertical-align: -2px;
+
+    width: 1em;
+    height: 1em;
+
+    position: relative;
+
+    /* Make a checkered background for transparent colors to show against. */
+    background-image: -webkit-linear-gradient(top, rgb(204, 204, 204), rgb(204, 204, 204)),
+        -webkit-linear-gradient(top, rgb(204, 204, 204), rgb(204, 204, 204));
+    background-color: white;
+    background-size: calc(50% + 1px);
+    background-position: top left, bottom right;
+    background-repeat: no-repeat;
+
+    cursor: default;
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch > span {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    border: 1px solid rgba(64, 64, 64, 0.4);
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch:hover > span {
+    border: 1px solid rgba(64, 64, 64, 0.8);
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch:active > span {
+    border: 1px solid rgba(64, 64, 64, 1);
+}
+
+.css-style-text-editor > .CodeMirror .cm-link {
+    /* Style url(...) links as if they are strings. */
+    color: rgb(196, 26, 22);
+    text-decoration: inherit;
+    cursor: inherit;
+}
diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js b/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js
new file mode 100644
index 000000000..357403a1e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js
@@ -0,0 +1,1052 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSStyleDeclarationTextEditor = function(delegate, style, element)
+{
+    WebInspector.Object.call(this);
+
+    this._element = element || document.createElement("div");
+    this._element.classList.add(WebInspector.CSSStyleDeclarationTextEditor.StyleClassName);
+    this._element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
+
+    this._showsImplicitProperties = true;
+    this._alwaysShowPropertyNames = {};
+    this._sortProperties = false;
+
+    this._prefixWhitespace = "";
+    this._suffixWhitespace = "";
+    this._linePrefixWhitespace = "";
+
+    this._delegate = delegate || null;
+
+    this._codeMirror = CodeMirror(this.element, {
+        readOnly: true,
+        lineWrapping: true,
+        mode: "css-rule",
+        electricChars: false,
+        indentWithTabs: true,
+        indentUnit: 4,
+        smartIndent: false,
+        matchBrackets: true,
+        autoCloseBrackets: true
+    });
+
+    this._codeMirror.on("change", this._contentChanged.bind(this));
+    this._codeMirror.on("blur", this._editorBlured.bind(this));
+
+    this._completionController = new WebInspector.CodeMirrorCompletionController(this._codeMirror, this);
+    this._tokenTrackingController = new WebInspector.CodeMirrorTokenTrackingController(this._codeMirror, this);
+
+    this._jumpToSymbolTrackingModeEnabled = false;
+    this._tokenTrackingController.classNameForHighlightedRange = WebInspector.CodeMirrorTokenTrackingController.JumpToSymbolHighlightStyleClassName;
+    this._tokenTrackingController.mouseOverDelayDuration = 0;
+    this._tokenTrackingController.mouseOutReleaseDelayDuration = 0;
+    this._tokenTrackingController.mode = WebInspector.CodeMirrorTokenTrackingController.Mode.NonSymbolTokens;
+
+    this.style = style;
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.CSSStyleDeclarationTextEditor);
+
+WebInspector.CSSStyleDeclarationTextEditor.StyleClassName = "css-style-text-editor";
+WebInspector.CSSStyleDeclarationTextEditor.ReadOnlyStyleClassName = "read-only";
+WebInspector.CSSStyleDeclarationTextEditor.ColorSwatchElementStyleClassName = "color-swatch";
+WebInspector.CSSStyleDeclarationTextEditor.CheckboxPlaceholderElementStyleClassName = "checkbox-placeholder";
+WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName = "editing-line";
+WebInspector.CSSStyleDeclarationTextEditor.CommitCoalesceDelay = 250;
+WebInspector.CSSStyleDeclarationTextEditor.RemoveEditingLineClassesDelay = 2000;
+
+WebInspector.CSSStyleDeclarationTextEditor.prototype = {
+    constructor: WebInspector.CSSStyleDeclarationTextEditor,
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get delegate()
+    {
+        return this._delegate;
+    },
+
+    set delegate(delegate)
+    {
+        this._delegate = delegate || null;
+    },
+
+    get style()
+    {
+        return this._style;
+    },
+
+    set style(style)
+    {
+        if (this._style === style)
+            return;
+
+        if (this._style) {
+            this._style.removeEventListener(WebInspector.CSSStyleDeclaration.Event.PropertiesChanged, this._propertiesChanged, this);
+            if (this._style.ownerRule && this._style.ownerRule.sourceCodeLocation)
+                WebInspector.notifications.removeEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._updateJumpToSymbolTrackingMode, this);
+        }
+
+        this._style = style || null;
+
+        if (this._style) {
+            this._style.addEventListener(WebInspector.CSSStyleDeclaration.Event.PropertiesChanged, this._propertiesChanged, this);
+            if (this._style.ownerRule && this._style.ownerRule.sourceCodeLocation)
+                WebInspector.notifications.addEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._updateJumpToSymbolTrackingMode, this);
+        }
+
+        this._updateJumpToSymbolTrackingMode();
+
+        this._resetContent();
+    },
+
+    get focused()
+    {
+        return this._codeMirror.getWrapperElement().classList.contains("CodeMirror-focused");
+    },
+
+    get alwaysShowPropertyNames()
+    {
+        return Object.keys(this._alwaysShowPropertyNames);
+    },
+
+    set alwaysShowPropertyNames(alwaysShowPropertyNames)
+    {
+        this._alwaysShowPropertyNames = (alwaysShowPropertyNames || []).keySet();
+
+        this._resetContent();
+    },
+
+    get showsImplicitProperties()
+    {
+        return this._showsImplicitProperties;
+    },
+
+    set showsImplicitProperties(showsImplicitProperties)
+    {
+        if (this._showsImplicitProperties === showsImplicitProperties)
+            return;
+
+        this._showsImplicitProperties = showsImplicitProperties;
+
+        this._resetContent();
+    },
+
+    get sortProperties()
+    {
+        return this._sortProperties;
+    },
+
+    set sortProperties(sortProperties)
+    {
+        if (this._sortProperties === sortProperties)
+            return;
+
+        this._sortProperties = sortProperties;
+
+        this._resetContent();
+    },
+
+    focus: function()
+    {
+        this._codeMirror.focus();
+    },
+
+    refresh: function()
+    {
+        this._resetContent();
+    },
+
+    updateLayout: function(force)
+    {
+        this._codeMirror.refresh();
+    },
+
+    // Protected
+
+    didDismissPopover: function(popover) 
+    {
+        if (popover === this._colorPickerPopover)
+            delete this._colorPickerPopover;
+    },
+
+    completionControllerCompletionsHidden: function(completionController)
+    {
+        var styleText = this._style.text;
+        var currentText = this._formattedContent();
+
+        // If the style text and the current editor text differ then we need to commit.
+        // Otherwise we can just update the properties that got skipped because a completion
+        // was pending the last time _propertiesChanged was called.
+        if (styleText !== currentText)
+            this._commitChanges();
+        else
+            this._propertiesChanged();
+    },
+
+    // Private
+
+    _clearRemoveEditingLineClassesTimeout: function()
+    {
+        if (!this._removeEditingLineClassesTimeout)
+            return;
+
+        clearTimeout(this._removeEditingLineClassesTimeout);
+        delete this._removeEditingLineClassesTimeout;
+    },
+
+    _removeEditingLineClasses: function()
+    {
+        this._clearRemoveEditingLineClassesTimeout();
+
+        function removeEditingLineClasses()
+        {
+            var lineCount = this._codeMirror.lineCount();
+            for (var i = 0; i < lineCount; ++i)
+                this._codeMirror.removeLineClass(i, "wrap", WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName);
+        }
+
+        this._codeMirror.operation(removeEditingLineClasses.bind(this));
+    },
+
+    _removeEditingLineClassesSoon: function()
+    {
+        if (this._removeEditingLineClassesTimeout)
+            return;
+        this._removeEditingLineClassesTimeout = setTimeout(this._removeEditingLineClasses.bind(this), WebInspector.CSSStyleDeclarationTextEditor.RemoveEditingLineClassesDelay);
+    },
+
+    _formattedContent: function()
+    {
+        // Start with the prefix whitespace we stripped.
+        var content = this._prefixWhitespace;
+
+        // Get each line and add the line prefix whitespace and newlines.
+        var lineCount = this._codeMirror.lineCount();
+        for (var i = 0; i < lineCount; ++i) {
+            var lineContent = this._codeMirror.getLine(i);
+            content += this._linePrefixWhitespace + lineContent;
+            if (i !== lineCount - 1)
+                content += "\n";
+        }
+
+        // Add the suffix whitespace we stripped.
+        content += this._suffixWhitespace;
+
+        return content;
+    },
+
+    _commitChanges: function()
+    {
+        if (this._commitChangesTimeout) {
+            clearTimeout(this._commitChangesTimeout);
+            delete this._commitChangesTimeout;
+        }
+
+        this._style.text = this._formattedContent();
+    },
+
+    _editorBlured: function(codeMirror)
+    {
+        // Clicking a suggestion causes the editor to blur. We don't want to reset content in this case.
+        if (this._completionController.isHandlingClickEvent())
+            return;
+
+        // Reset the content on blur since we stop accepting external changes while the the editor is focused.
+        // This causes us to pick up any change that was suppressed while the editor was focused.
+        this._resetContent();
+    },
+
+    _contentChanged: function(codeMirror, change)
+    {
+        // Return early if the style isn't editable. This still can be called when readOnly is set because
+        // clicking on a color swatch modifies the text.
+        if (!this._style || !this._style.editable || this._ignoreCodeMirrorContentDidChangeEvent)
+            return;
+
+        this._markLinesWithCheckboxPlaceholder();
+
+        this._clearRemoveEditingLineClassesTimeout();
+        this._codeMirror.addLineClass(change.from.line, "wrap", WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName);
+
+        // When the change is a completion change, create color swatches now since the changes
+        // will not go through _propertiesChanged until completionControllerCompletionsHidden happens.
+        // This way any auto completed colors get swatches right away.
+        if (this._completionController.isCompletionChange(change))
+            this._createColorSwatches(false, change.from.line);
+
+        // Use a short delay for user input to coalesce more changes before committing. Other actions like
+        // undo, redo and paste are atomic and work better with a zero delay. CodeMirror identifies changes that
+        // get coalesced in the undo stack with a "+" prefix on the origin. Use that to set the delay for our coalescing.
+        const delay = change.origin && change.origin.charAt(0) === "+" ? WebInspector.CSSStyleDeclarationTextEditor.CommitCoalesceDelay : 0;
+
+        // Reset the timeout so rapid changes coalesce after a short delay.
+        if (this._commitChangesTimeout)
+            clearTimeout(this._commitChangesTimeout);
+        this._commitChangesTimeout = setTimeout(this._commitChanges.bind(this), delay);
+    },
+
+    _updateTextMarkers: function(nonatomic)
+    {
+        function update()
+        {
+            this._clearTextMarkers(true);
+
+            var styleText = this._style.text;
+
+            this._iterateOverProperties(true, function(property) {
+                var styleTextRange = property.styleDeclarationTextRange;
+                console.assert(styleTextRange);
+                if (!styleTextRange)
+                    return;
+
+                var from = {line: styleTextRange.startLine, ch: styleTextRange.startColumn};
+                var to = {line: styleTextRange.endLine, ch: styleTextRange.endColumn};
+
+                // Adjust the line position for the missing prefix line.
+                if (this._prefixWhitespace) {
+                    --from.line;
+                    --to.line;
+                }
+
+                // Adjust the column for the stripped line prefix whitespace.
+                from.ch -= this._linePrefixWhitespace.length;
+                to.ch -= this._linePrefixWhitespace.length;
+
+                this._createTextMarkerForPropertyIfNeeded(from, to, property);
+            });
+
+            if (!this._codeMirror.getOption("readOnly")) {
+                // Matches a comment like: /* -webkit-foo: bar; */
+                const commentedPropertyRegex = /\/\*\s*[-\w]+\s*:\s*[^;]+;?\s*\*\//g;
+
+                // Look for comments that look like properties and add checkboxes in front of them.
+                var lineCount = this._codeMirror.lineCount();
+                for (var i = 0; i < lineCount; ++i) {
+                    var lineContent = this._codeMirror.getLine(i);
+
+                    var match = commentedPropertyRegex.exec(lineContent);
+                    while (match) {
+                        var checkboxElement = document.createElement("input");
+                        checkboxElement.type = "checkbox";
+                        checkboxElement.checked = false;
+                        checkboxElement.addEventListener("change", this._propertyCommentCheckboxChanged.bind(this));
+
+                        var from = {line: i, ch: match.index};
+                        var to = {line: i, ch: match.index + match[0].length};
+
+                        var checkboxMarker = this._codeMirror.setBookmark(from, checkboxElement);
+                        checkboxMarker.__propertyCheckbox = true;
+
+                        var commentTextMarker = this._codeMirror.markText(from, to);
+
+                        checkboxElement.__commentTextMarker = commentTextMarker;
+
+                        match = commentedPropertyRegex.exec(lineContent);
+                    }
+                }
+            }
+
+            // Look for colors and make swatches.
+            this._createColorSwatches(true);
+
+            this._markLinesWithCheckboxPlaceholder();
+        }
+
+        if (nonatomic)
+            update.call(this);
+        else
+            this._codeMirror.operation(update.bind(this));
+    },
+
+    _createColorSwatches: function(nonatomic, lineNumber)
+    {
+        function update()
+        {
+            // Matches rgba(0, 0, 0, 0.5), rgb(0, 0, 0), hsl(), hsla(), #fff, #ffffff, white
+            const colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}|\b\w+\b(?![-.]))/g;
+
+            var start = typeof lineNumber === "number" ? lineNumber : 0;
+            var end = typeof lineNumber === "number" ? lineNumber + 1 : this._codeMirror.lineCount();
+
+            // Look for color strings and add swatches in front of them.
+            for (var i = start; i < end; ++i) {
+                var lineContent = this._codeMirror.getLine(i);
+
+                var match = colorRegex.exec(lineContent);
+                while (match) {
+
+                    // Act as a negative look-behind and disallow the color from being prefixing with certain characters.
+                    if (match.index > 0 && /[-.]/.test(lineContent[match.index - 1])) {
+                        match = colorRegex.exec(lineContent);
+                        continue;
+                    }
+
+                    var from = {line: i, ch: match.index};
+                    var to = {line: i, ch: match.index + match[0].length};
+
+                    var foundColorMarker = false;
+                    var marks = this._codeMirror.findMarksAt(to);
+                    for (var j = 0; j < marks.length; ++j) {
+                        if (!marks[j].__markedColor)
+                            continue;
+                        foundColorMarker = true;
+                        break;
+                    }
+
+                    if (foundColorMarker) {
+                        match = colorRegex.exec(lineContent);
+                        continue;
+                    }
+
+                    try {
+                        var color = new WebInspector.Color(match[0]);
+                    } catch (e) {
+                        match = colorRegex.exec(lineContent);
+                        continue;
+                    }
+
+                    var swatchElement = document.createElement("span");
+                    swatchElement.title = WebInspector.UIString("Click to open a colorpicker. Shift-click to change color format.");
+                    swatchElement.className = WebInspector.CSSStyleDeclarationTextEditor.ColorSwatchElementStyleClassName;
+                    swatchElement.addEventListener("click", this._colorSwatchClicked.bind(this));
+
+                    var swatchInnerElement = document.createElement("span");
+                    swatchInnerElement.style.setProperty("background-color", match[0]);
+                    swatchElement.appendChild(swatchInnerElement);
+
+                    var swatchMarker = this._codeMirror.setBookmark(from, swatchElement);
+
+                    var colorTextMarker = this._codeMirror.markText(from, to);
+                    colorTextMarker.__markedColor = true;
+
+                    swatchInnerElement.__colorTextMarker = colorTextMarker;
+                    swatchInnerElement.__color = color;
+
+                    match = colorRegex.exec(lineContent);
+                }
+            }
+        }
+
+        if (nonatomic)
+            update.call(this);
+        else
+            this._codeMirror.operation(update.bind(this));
+    },
+
+    _updateTextMarkerForPropertyIfNeeded: function(property)
+    {
+        var textMarker = property.__propertyTextMarker;
+        console.assert(textMarker);
+        if (!textMarker)
+            return;
+
+        var range = textMarker.find();
+        console.assert(range);
+        if (!range)
+            return;
+
+        this._createTextMarkerForPropertyIfNeeded(range.from, range.to, property);
+    },
+
+    _createTextMarkerForPropertyIfNeeded: function(from, to, property)
+    {
+        if (!this._codeMirror.getOption("readOnly")) {
+            // Create a new checkbox element and marker.
+
+            console.assert(property.enabled);
+
+            var checkboxElement = document.createElement("input");
+            checkboxElement.type = "checkbox";
+            checkboxElement.checked = true;
+            checkboxElement.addEventListener("change", this._propertyCheckboxChanged.bind(this));
+            checkboxElement.__cssProperty = property;
+
+            var checkboxMarker = this._codeMirror.setBookmark(from, checkboxElement);
+            checkboxMarker.__propertyCheckbox = true;
+        }
+
+        var classNames = ["css-style-declaration-property"];
+
+        if (property.overridden)
+            classNames.push("overridden");
+
+        if (property.implicit)
+            classNames.push("implicit");
+
+        if (this._style.inherited && !property.inherited)
+            classNames.push("not-inherited");
+
+        if (!property.valid && property.hasOtherVendorNameOrKeyword())
+            classNames.push("other-vendor");
+        else if (!property.valid)
+            classNames.push("invalid");
+
+        if (!property.enabled)
+            classNames.push("disabled");
+
+        var classNamesString = classNames.join(" ");
+
+        // If there is already a text marker and it's in the same document, then try to avoid recreating it.
+        // FIXME: If there are multiple CSSStyleDeclarationTextEditors for the same style then this will cause
+        // both editors to fight and always recreate their text markers. This isn't really common.
+        if (property.__propertyTextMarker && property.__propertyTextMarker.doc.cm === this._codeMirror && property.__propertyTextMarker.find()) {
+            // If the class name is the same then we don't need to make a new marker.
+            if (property.__propertyTextMarker.className === classNamesString)
+                return;
+
+            property.__propertyTextMarker.clear();
+        }
+
+        var propertyTextMarker = this._codeMirror.markText(from, to, {className: classNamesString});
+
+        propertyTextMarker.__cssProperty = property;
+        property.__propertyTextMarker = propertyTextMarker;
+
+        property.addEventListener(WebInspector.CSSProperty.Event.OverriddenStatusChanged, this._propertyOverriddenStatusChanged, this);
+
+        this._removeCheckboxPlaceholder(from.line);
+    },
+
+    _clearTextMarkers: function(nonatomic, all)
+    {
+        function clear()
+        {
+            var markers = this._codeMirror.getAllMarks();
+            for (var i = 0; i < markers.length; ++i) {
+                var textMarker = markers[i];
+
+                if (!all && textMarker.__checkboxPlaceholder) {
+                    var position = textMarker.find();
+
+                    // Only keep checkbox placeholders if they are in the first column.
+                    if (position && !position.ch)
+                        continue;
+                }
+
+                if (textMarker.__cssProperty) {
+                    textMarker.__cssProperty.removeEventListener(null, null, this);
+
+                    delete textMarker.__cssProperty.__propertyTextMarker;
+                    delete textMarker.__cssProperty;
+                }
+
+                textMarker.clear();
+            }
+        }
+
+        if (nonatomic)
+            clear.call(this);
+        else
+            this._codeMirror.operation(clear.bind(this));
+    },
+
+    _iterateOverProperties: function(onlyVisibleProperties, callback)
+    {
+        var properties = onlyVisibleProperties ? this._style.visibleProperties : this._style.properties;
+
+        if (!onlyVisibleProperties) {
+            // Filter based on options only when all properties are used.
+            properties = properties.filter((function(property) {
+                return !property.implicit || this._showsImplicitProperties || property.canonicalName in this._alwaysShowPropertyNames;
+            }).bind(this));
+
+            if (this._sortProperties)
+                properties.sort(function(a, b) { return a.name.localeCompare(b.name) });
+        }
+
+        for (var i = 0; i < properties.length; ++i) {
+            if (callback.call(this, properties[i], i === properties.length - 1))
+                break;
+        }
+    },
+
+    _propertyCheckboxChanged: function(event)
+    {
+        var property = event.target.__cssProperty;
+        console.assert(property);
+        if (!property)
+            return;
+
+        var textMarker = property.__propertyTextMarker;
+        console.assert(textMarker);
+        if (!textMarker)
+            return;
+
+        // Check if the property has been removed already, like from double-clicking
+        // the checkbox and calling this event listener multiple times.
+        var range = textMarker.find();
+        if (!range)
+            return;
+
+        var text = this._codeMirror.getRange(range.from, range.to);
+
+        function update()
+        {
+            // Replace the text with a commented version.
+            this._codeMirror.replaceRange("/* " + text + " */", range.from, range.to);
+
+            // Update the line for any color swatches that got removed.
+            this._createColorSwatches(true, range.from.line);
+        }
+
+        this._codeMirror.operation(update.bind(this));
+    },
+
+    _propertyCommentCheckboxChanged: function(event)
+    {
+        var commentTextMarker = event.target.__commentTextMarker;
+        console.assert(commentTextMarker);
+        if (!commentTextMarker)
+            return;
+
+        // Check if the comment has been removed already, like from double-clicking
+        // the checkbox and calling event listener multiple times.
+        var range = commentTextMarker.find();
+        if (!range)
+            return;
+
+        var text = this._codeMirror.getRange(range.from, range.to);
+
+        // Remove the comment prefix and suffix.
+        text = text.replace(/^\/\*\s*/, "").replace(/\s*\*\/$/, "");
+
+        // Add a semicolon if there isn't one already.
+        if (text.length && text.charAt(text.length - 1) !== ";")
+            text += ";";
+
+        function update()
+        {
+            this._codeMirror.addLineClass(range.from.line, "wrap", WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName);
+            this._codeMirror.replaceRange(text, range.from, range.to);
+
+            // Update the line for any color swatches that got removed.
+            this._createColorSwatches(true, range.from.line);
+        }
+
+        this._codeMirror.operation(update.bind(this));
+    },
+
+    _colorSwatchClicked: function(event)
+    {
+        if (this._colorPickerPopover)
+            return;
+
+        var swatch = event.target;
+
+        var color = swatch.__color;
+        console.assert(color);
+        if (!color)
+            return;
+
+        var colorTextMarker = swatch.__colorTextMarker;
+        console.assert(colorTextMarker);
+        if (!colorTextMarker)
+            return;
+
+        var range = colorTextMarker.find();
+        console.assert(range);
+        if (!range)
+            return;
+
+        function updateCodeMirror(newColorText)
+        {
+            function update()
+            {
+                // The original text marker might have been cleared by a style update,
+                // in this case we need to find the new color text marker so we know
+                // the right range for the new style color text.
+                if (!colorTextMarker || !colorTextMarker.find()) {
+                    colorTextMarker = null;
+
+                    var marks = this._codeMirror.findMarksAt(range.from);
+                    if (!marks.length)
+                        return;
+
+                    for (var i = 0; i < marks.length; ++i) {
+                        var mark = marks[i];
+                        if (!mark.__markedColor)
+                            continue;
+                        colorTextMarker = mark;
+                        break;
+                    }
+                }
+
+                if (!colorTextMarker)
+                    return;
+
+                // Sometimes we still might find a stale text marker with findMarksAt.
+                var newRange = colorTextMarker.find();
+                if (!newRange)
+                    return;
+
+                range = newRange;
+
+                colorTextMarker.clear();
+
+                this._codeMirror.replaceRange(newColorText, range.from, range.to);
+
+                // The color's text format could have changed, so we need to update the "range" 
+                // variable to anticipate a different "range.to" property.
+                range.to.ch = range.from.ch + newColorText.length;
+
+                colorTextMarker = this._codeMirror.markText(range.from, range.to);
+                colorTextMarker.__markedColor = true;
+
+                swatch.__colorTextMarker = colorTextMarker;
+            }
+
+            this._codeMirror.operation(update.bind(this));
+        }
+
+        if (event.shiftKey) {
+            var nextFormat = color.nextFormat();
+            console.assert(nextFormat);
+            if (!nextFormat)
+                return;
+            color.format = nextFormat;
+
+            var newColorText = color.toString();
+
+            // Ignore the change so we don't commit the format change. However, any future user
+            // edits will commit the color format.
+            this._ignoreCodeMirrorContentDidChangeEvent = true;
+            updateCodeMirror.call(this, newColorText);
+            delete this._ignoreCodeMirrorContentDidChangeEvent;
+        } else {
+            this._colorPickerPopover = new WebInspector.Popover(this);
+
+            var colorPicker = new WebInspector.CSSColorPicker;
+            colorPicker.color = color;
+
+            colorPicker.addEventListener(WebInspector.CSSColorPicker.Event.ColorChanged, function(event) {
+                updateCodeMirror.call(this, event.data.color.toString());
+            }.bind(this));
+
+            var bounds = WebInspector.Rect.rectFromClientRect(swatch.getBoundingClientRect());
+            
+            this._colorPickerPopover.content = colorPicker.element;
+            this._colorPickerPopover.present(bounds, [WebInspector.RectEdge.MIN_X]);
+
+            colorPicker.shown();
+        }
+    },
+
+    _propertyOverriddenStatusChanged: function(event)
+    {
+        this._updateTextMarkerForPropertyIfNeeded(event.target);
+    },
+
+    _propertiesChanged: function(event)
+    {
+        // Don't try to update the document while completions are showing. Doing so will clear
+        // the completion hint and prevent further interaction with the completion.
+        if (this._completionController.isShowingCompletions())
+            return;
+
+        // Reset the content if the text is different and we are not focused.
+        if (!this.focused && this._style.text !== this._formattedContent()) {
+            this._resetContent();
+            return;
+        }
+
+        this._removeEditingLineClassesSoon();
+
+        this._updateTextMarkers();
+    },
+
+    _markLinesWithCheckboxPlaceholder: function()
+    {
+        if (this._codeMirror.getOption("readOnly"))
+            return;
+
+        var linesWithPropertyCheckboxes = {};
+        var linesWithCheckboxPlaceholders = {};
+
+        var markers = this._codeMirror.getAllMarks();
+        for (var i = 0; i < markers.length; ++i) {
+            var textMarker = markers[i];
+            if (textMarker.__propertyCheckbox) {
+                var position = textMarker.find();
+                if (position)
+                    linesWithPropertyCheckboxes[position.line] = true;
+            } else if (textMarker.__checkboxPlaceholder) {
+                var position = textMarker.find();
+                if (position)
+                    linesWithCheckboxPlaceholders[position.line] = true;
+            }
+        }
+
+        var lineCount = this._codeMirror.lineCount();
+
+        for (var i = 0; i < lineCount; ++i) {
+            if (i in linesWithPropertyCheckboxes || i in linesWithCheckboxPlaceholders)
+                continue;
+
+            var position = {line: i, ch: 0};
+
+            var placeholderElement = document.createElement("div");
+            placeholderElement.className = WebInspector.CSSStyleDeclarationTextEditor.CheckboxPlaceholderElementStyleClassName;
+
+            var placeholderMark = this._codeMirror.setBookmark(position, placeholderElement);
+            placeholderMark.__checkboxPlaceholder = true;
+        }
+    },
+
+    _removeCheckboxPlaceholder: function(lineNumber)
+    {
+        var marks = this._codeMirror.findMarksAt({line: lineNumber, ch: 0});
+        for (var i = 0; i < marks.length; ++i) {
+            var mark = marks[i];
+            if (!mark.__checkboxPlaceholder)
+                continue;
+
+            mark.clear();
+            return;
+        }
+    },
+
+    _resetContent: function()
+    {
+        if (this._commitChangesTimeout) {
+            clearTimeout(this._commitChangesTimeout);
+            delete this._commitChangesTimeout;
+        }
+
+        this._removeEditingLineClasses();
+
+        // Only allow editing if we have a style, it is editable and we have text range in the stylesheet.
+        var readOnly = !this._style || !this._style.editable || !this._style.styleSheetTextRange;
+        this._codeMirror.setOption("readOnly", readOnly);
+
+        if (readOnly) {
+            this.element.classList.add(WebInspector.CSSStyleDeclarationTextEditor.ReadOnlyStyleClassName);
+            this._codeMirror.setOption("placeholder", WebInspector.UIString("No Properties"));
+        } else {
+            this.element.classList.remove(WebInspector.CSSStyleDeclarationTextEditor.ReadOnlyStyleClassName);
+            this._codeMirror.setOption("placeholder", WebInspector.UIString("No Properties \u2014 Click to Edit"));
+        }
+
+        if (!this._style) {
+            this._ignoreCodeMirrorContentDidChangeEvent = true;
+
+            this._clearTextMarkers(false, true);
+
+            this._codeMirror.setValue("");
+            this._codeMirror.clearHistory();
+            this._codeMirror.markClean();
+
+            delete this._ignoreCodeMirrorContentDidChangeEvent;
+
+            return;
+        }
+
+        function update()
+        {
+            // Remember the cursor position/selection.
+            var selectionAnchor = this._codeMirror.getCursor("anchor");
+            var selectionHead = this._codeMirror.getCursor("head");
+
+            function countNewLineCharacters(text)
+            {
+                var matches = text.match(/\n/g);
+                return matches ? matches.length : 0;
+            }
+
+            var styleText = this._style.text;
+
+            // Pretty print the content if there are more properties than there are lines.
+            // This could be an option exposed to the user; however, it is almost always
+            // desired in this case.
+
+            if (styleText && this._style.visibleProperties.length <= countNewLineCharacters(styleText.trim()) + 1) {
+                // This style has formatted text content, so use it for a high-fidelity experience.
+
+                var prefixWhitespaceMatch = styleText.match(/^[ \t]*\n/);
+                this._prefixWhitespace = prefixWhitespaceMatch ? prefixWhitespaceMatch[0] : "";
+
+                var suffixWhitespaceMatch = styleText.match(/\n[ \t]*$/);
+                this._suffixWhitespace = suffixWhitespaceMatch ? suffixWhitespaceMatch[0] : "";
+
+                this._codeMirror.setValue(styleText);
+
+                if (this._prefixWhitespace)
+                    this._codeMirror.removeLine(0);
+
+                if (this._suffixWhitespace) {
+                    var lineCount = this._codeMirror.lineCount();
+                    this._codeMirror.replaceRange("", {line: lineCount - 2}, {line: lineCount - 1});
+                }
+
+                this._linePrefixWhitespace = "";
+
+                var linesToStrip = [];
+
+                // Remember the whitespace so it can be restored on commit.
+                var lineCount = this._codeMirror.lineCount();
+                for (var i = 0; i < lineCount; ++i) {
+                    var lineContent = this._codeMirror.getLine(i);
+
+                    var prefixWhitespaceMatch = lineContent.match(/^\s+/);
+                    if (!prefixWhitespaceMatch)
+                        continue;
+
+                    linesToStrip.push(i);
+
+                    // Only remember the shortest whitespace so we don't loose any of the
+                    // original author's whitespace if their indentation lengths differed.
+                    // Using the shortest also makes the adjustment work in _updateTextMarkers.
+
+                    // FIXME: This messes up if there is a mix of spaces and tabs. One tab
+                    // will be shorter than 4 or 8 spaces, but will look the same visually.
+                    if (!this._linePrefixWhitespace || prefixWhitespaceMatch[0].length < this._linePrefixWhitespace.length)
+                        this._linePrefixWhitespace = prefixWhitespaceMatch[0];
+                }
+
+                // Strip the whitespace from the beginning of each line.
+                for (var i = 0; i < linesToStrip.length; ++i) {
+                    var lineNumber = linesToStrip[i];
+                    var from = {line: lineNumber, ch: 0};
+                    var to = {line: lineNumber, ch: this._linePrefixWhitespace.length};
+                    this._codeMirror.replaceRange("", from, to);
+                }
+
+                // Update all the text markers.
+                this._updateTextMarkers(true);
+            } else {
+                // This style does not have text content or it is minified, so we want to synthesize the text content.
+
+                this._prefixWhitespace = "";
+                this._suffixWhitespace = "";
+                this._linePrefixWhitespace = "";
+
+                this._codeMirror.setValue("");
+
+                var lineNumber = 0;
+
+                // Iterate only visible properties if we have original style text. That way we known we only syntesize
+                // what was originaly in the style text.
+                this._iterateOverProperties(styleText ? true : false, function(property) {
+                    // Some property text can have line breaks, so consider that in the ranges below.
+                    var propertyText = property.synthesizedText;
+                    var propertyLineCount = countNewLineCharacters(propertyText);
+
+                    var from = {line: lineNumber, ch: 0};
+                    var to = {line: lineNumber + propertyLineCount};
+
+                    this._codeMirror.replaceRange((lineNumber ? "\n" : "") + propertyText, from);
+                    this._createTextMarkerForPropertyIfNeeded(from, to, property);
+
+                    lineNumber += propertyLineCount + 1;
+                });
+
+                // Look for colors and make swatches.
+                this._createColorSwatches(true);
+            }
+
+            this._markLinesWithCheckboxPlaceholder();
+
+            // Restore the cursor position/selection.
+            this._codeMirror.setSelection(selectionAnchor, selectionHead);
+
+            // Reset undo history since undo past the reset is wrong when the content was empty before
+            // or the content was representing a previous style object.
+            this._codeMirror.clearHistory();
+
+            // Mark the editor as clean (unedited state).
+            this._codeMirror.markClean();
+        }
+
+        // This needs to be done first and as a separate operation to avoid an exception in CodeMirror.
+        this._clearTextMarkers(false, true);
+
+        this._ignoreCodeMirrorContentDidChangeEvent = true;
+        this._codeMirror.operation(update.bind(this));
+        delete this._ignoreCodeMirrorContentDidChangeEvent;
+    },
+
+    _updateJumpToSymbolTrackingMode: function()
+    {
+        var oldJumpToSymbolTrackingModeEnabled = this._jumpToSymbolTrackingModeEnabled;
+
+        if (!this._style || !this._style.ownerRule || !this._style.ownerRule.sourceCodeLocation)
+            this._jumpToSymbolTrackingModeEnabled = false;
+        else
+            this._jumpToSymbolTrackingModeEnabled = WebInspector.modifierKeys.metaKey && !WebInspector.modifierKeys.altKey && !WebInspector.modifierKeys.shiftKey;
+
+        if (oldJumpToSymbolTrackingModeEnabled !== this._jumpToSymbolTrackingModeEnabled) {
+            if (this._jumpToSymbolTrackingModeEnabled)
+                this._tokenTrackingController.startTracking();
+            else {
+                this._tokenTrackingController.stopTracking();
+                this._tokenTrackingController.removeHighlightedRange();
+            }
+        }
+    },
+
+    tokenTrackingControllerHighlightedRangeWasClicked: function(tokenTrackingController)
+    {
+        console.assert(this._style.ownerRule.sourceCodeLocation);
+        if (!this._style.ownerRule.sourceCodeLocation)
+            return;
+
+        // Special case command clicking url(...) links.
+        var token = this._tokenTrackingController.candidate.hoveredToken;
+        if (/\blink\b/.test(token.type)) {
+            var url = token.string;
+            var baseURL = this._style.ownerRule.sourceCodeLocation.sourceCode.url;
+            WebInspector.openURL(absoluteURL(url, baseURL));
+            return;
+        }
+
+        // Jump to the rule if we can't find a property.
+        // Find a better source code location from the property that was clicked.
+        var sourceCodeLocation = this._style.ownerRule.sourceCodeLocation;
+        var marks = this._codeMirror.findMarksAt(this._tokenTrackingController.candidate.hoveredTokenRange.start);
+        for (var i = 0; i < marks.length; ++i) {
+            var mark = marks[i];
+            var property = mark.__cssProperty;
+            if (property) {
+                var sourceCode = sourceCodeLocation.sourceCode;
+                var styleSheetTextRange = property.styleSheetTextRange;
+                sourceCodeLocation = sourceCode.createSourceCodeLocation(styleSheetTextRange.startLine, styleSheetTextRange.startColumn);
+            }
+        }
+
+        WebInspector.resourceSidebarPanel.showSourceCodeLocation(sourceCodeLocation);
+    },
+
+    tokenTrackingControllerNewHighlightCandidate: function(tokenTrackingController, candidate)
+    {
+        this._tokenTrackingController.highlightRange(candidate.hoveredTokenRange);
+    }
+};
+
+WebInspector.CSSStyleDeclarationTextEditor.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.css
new file mode 100644
index 000000000..1e8a061f2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.css
@@ -0,0 +1,75 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.details.css-style {
+    overflow: none;
+}
+
+.sidebar > .panel.details.css-style > .navigation-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.sidebar > .panel.details.css-style > .content {
+    position: absolute;
+    top: 22px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.sidebar > .panel.details.css-style > .content > .pseudo-classes {
+    font-size: 11px;
+    font-family: "Lucida Grande", sans-serif;
+
+    padding: 10px;
+
+    display: -webkit-flex;
+    -webkit-flex-flow: row wrap;
+    -webkit-justify-content: space-around;
+}
+
+.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group {
+    display: -webkit-inline-flex;
+    -webkit-flex-flow: row wrap;
+    -webkit-justify-content: space-around;
+    -webkit-flex: 1;
+}
+
+.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label {
+    color: rgb(96, 96, 96);
+    text-shadow: white 0 1px 0;
+
+    margin: 0 5px;
+    min-width: 55px;
+
+    display: inline-block;
+    white-space: nowrap;
+}
diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.js
new file mode 100644
index 000000000..35fb7ca5f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.js
@@ -0,0 +1,240 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSStyleDetailsSidebarPanel = function()
+{
+    WebInspector.DOMDetailsSidebarPanel.call(this, "css-style", WebInspector.UIString("Styles"), WebInspector.UIString("Style"), "Images/NavigationItemBrushAndRuler.pdf", "4");
+
+    this._selectedPanel = null;
+
+    this._navigationBar = new WebInspector.NavigationBar(null, null, "tablist");
+    this._navigationBar.addEventListener(WebInspector.NavigationBar.Event.NavigationItemSelected, this._navigationItemSelected, this);
+    this.element.appendChild(this._navigationBar.element);
+
+    this._contentElement = document.createElement("div");
+    this._contentElement.className = WebInspector.CSSStyleDetailsSidebarPanel.ContentStyleClassName;
+
+    this._forcedPseudoClassCheckboxes = {};
+
+    if (WebInspector.cssStyleManager.canForcePseudoClasses()) {
+        this._forcedPseudoClassContainer = document.createElement("div");
+        this._forcedPseudoClassContainer.className = WebInspector.CSSStyleDetailsSidebarPanel.PseudoClassesElementStyleClassName;
+
+        var groupElement = null;
+
+        WebInspector.CSSStyleManager.ForceablePseudoClasses.forEach(function(pseudoClass) {
+            // We don't localize the label since it is a CSS pseudo-class from the CSS standard.
+            var label = pseudoClass.capitalize();
+
+            var labelElement = document.createElement("label");
+
+            var checkboxElement = document.createElement("input");
+            checkboxElement.addEventListener("change", this._forcedPseudoClassCheckboxChanged.bind(this, pseudoClass));
+            checkboxElement.type = "checkbox";
+
+            this._forcedPseudoClassCheckboxes[pseudoClass] = checkboxElement;
+
+            labelElement.appendChild(checkboxElement);
+            labelElement.appendChild(document.createTextNode(label));
+
+            if (!groupElement || groupElement.children.length === 2) {
+                groupElement = document.createElement("div");
+                groupElement.className = WebInspector.CSSStyleDetailsSidebarPanel.PseudoClassesGroupElementStyleClassName;
+                this._forcedPseudoClassContainer.appendChild(groupElement);
+            }
+
+            groupElement.appendChild(labelElement);
+        }.bind(this));
+
+        this._contentElement.appendChild(this._forcedPseudoClassContainer);
+    }
+
+    this.element.appendChild(this._contentElement);
+
+    this._computedStyleDetailsPanel = new WebInspector.ComputedStyleDetailsPanel;
+    this._rulesStyleDetailsPanel = new WebInspector.RulesStyleDetailsPanel;
+    this._metricsStyleDetailsPanel = new WebInspector.MetricsStyleDetailsPanel;
+
+    this._panels = [this._computedStyleDetailsPanel, this._rulesStyleDetailsPanel, this._metricsStyleDetailsPanel];
+
+    this._navigationBar.addNavigationItem(this._computedStyleDetailsPanel.navigationItem);
+    this._navigationBar.addNavigationItem(this._rulesStyleDetailsPanel.navigationItem);
+    this._navigationBar.addNavigationItem(this._metricsStyleDetailsPanel.navigationItem);
+
+    this._lastSelectedSectionSetting = new WebInspector.Setting("last-selected-style-details-panel", this._rulesStyleDetailsPanel.navigationItem.identifier);
+
+    // This will cause the selected panel to be set in _navigationItemSelected.
+    this._navigationBar.selectedNavigationItem = this._lastSelectedSectionSetting.value;
+};
+
+WebInspector.CSSStyleDetailsSidebarPanel.ContentStyleClassName = "content";
+WebInspector.CSSStyleDetailsSidebarPanel.PseudoClassesElementStyleClassName = "pseudo-classes";
+WebInspector.CSSStyleDetailsSidebarPanel.PseudoClassesGroupElementStyleClassName = "group";
+WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = 38; // Default height of the forced pseudo classes container. Updated in widthDidChange.
+
+WebInspector.CSSStyleDetailsSidebarPanel.prototype = {
+    constructor: WebInspector.CSSStyleDetailsSidebarPanel,
+
+    // Public
+
+    supportsDOMNode: function(nodeToInspect)
+    {
+        return nodeToInspect.nodeType() === Node.ELEMENT_NODE;
+    },
+
+    refresh: function()
+    {
+        var domNode = this.domNode;
+        if (!domNode)
+            return;
+
+        this._contentElement.scrollTop = this._initialScrollOffset;
+
+        for (var i = 0; i < this._panels.length; ++i) {
+            delete this._panels[i].element._savedScrollTop;
+            this._panels[i].markAsNeedsRefresh(domNode);
+        }
+
+        this._updatePseudoClassCheckboxes();
+    },
+
+    visibilityDidChange: function()
+    {
+        WebInspector.SidebarPanel.prototype.visibilityDidChange.call(this);
+
+        if (!this._selectedPanel)
+            return;
+
+        if (!this.visible) {
+            this._selectedPanel.hidden();
+            return;
+        }
+
+        this._navigationBar.updateLayout();
+
+        this._updateNoForcedPseudoClassesScrollOffset();
+
+        this._selectedPanel.shown();
+        this._selectedPanel.markAsNeedsRefresh(this.domNode);
+    },
+
+    widthDidChange: function()
+    {
+        this._updateNoForcedPseudoClassesScrollOffset();
+
+        if (this._selectedPanel)
+            this._selectedPanel.widthDidChange();
+    },
+
+    // Protected
+
+    addEventListeners: function()
+    {
+        this.domNode.addEventListener(WebInspector.DOMNode.Event.EnabledPseudoClassesChanged, this._updatePseudoClassCheckboxes, this);
+    },
+
+    removeEventListeners: function()
+    {
+        this.domNode.removeEventListener(null, null, this);
+    },
+
+    // Private
+
+    get _initialScrollOffset()
+    {
+        if (!WebInspector.cssStyleManager.canForcePseudoClasses())
+            return 0;
+        return this.domNode && this.domNode.enabledPseudoClasses.length ? 0 : WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset;
+    },
+
+    _updateNoForcedPseudoClassesScrollOffset: function()
+    {
+        if (this._forcedPseudoClassContainer)
+            WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = this._forcedPseudoClassContainer.offsetHeight;
+    },
+
+    _navigationItemSelected: function(event)
+    {
+        console.assert(event.target.selectedNavigationItem);
+        if (!event.target.selectedNavigationItem)
+            return;
+
+        var selectedNavigationItem = event.target.selectedNavigationItem;
+
+        var selectedPanel = null;
+        for (var i = 0; i < this._panels.length; ++i) {
+            if (this._panels[i].navigationItem !== selectedNavigationItem)
+                continue;
+            selectedPanel = this._panels[i];
+            break;
+        }
+
+        console.assert(selectedPanel);
+
+        if (this._selectedPanel) {
+            this._selectedPanel.hidden();
+            this._selectedPanel.element._savedScrollTop = this._contentElement.scrollTop;
+            this._selectedPanel.element.remove();
+        }
+
+        this._selectedPanel = selectedPanel;
+
+        if (this._selectedPanel) {
+            this._contentElement.appendChild(this._selectedPanel.element);
+
+            if (typeof this._selectedPanel.element._savedScrollTop === "number")
+                this._contentElement.scrollTop = this._selectedPanel.element._savedScrollTop;
+            else
+                this._contentElement.scrollTop = this._initialScrollOffset;
+
+            this._selectedPanel.shown();
+        }
+
+        this._lastSelectedSectionSetting.value = selectedNavigationItem.identifier;
+    },
+
+    _forcedPseudoClassCheckboxChanged: function(pseudoClass, event)
+    {
+        if (!this.domNode)
+            return;
+
+        this.domNode.setPseudoClassEnabled(pseudoClass, event.target.checked);
+    },
+
+    _updatePseudoClassCheckboxes: function()
+    {
+        if (!this.domNode)
+            return;
+
+        var enabledPseudoClasses = this.domNode.enabledPseudoClasses;
+
+        for (var pseudoClass in this._forcedPseudoClassCheckboxes) {
+            var checkboxElement = this._forcedPseudoClassCheckboxes[pseudoClass];
+            checkboxElement.checked = enabledPseudoClasses.contains(pseudoClass);
+        }
+    }
+};
+
+WebInspector.CSSStyleDetailsSidebarPanel.prototype.__proto__ = WebInspector.DOMDetailsSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleManager.js b/Source/WebInspectorUI/UserInterface/CSSStyleManager.js
new file mode 100644
index 000000000..ea625081a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSStyleManager.js
@@ -0,0 +1,366 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSStyleManager = function()
+{
+    WebInspector.Object.call(this);
+
+    CSSAgent.enable();
+
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceAdded, this);
+    WebInspector.Resource.addEventListener(WebInspector.SourceCode.Event.ContentDidChange, this._resourceContentDidChange, this);
+    WebInspector.Resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._resourceTypeDidChange, this);
+
+    WebInspector.DOMNode.addEventListener(WebInspector.DOMNode.Event.AttributeModified, this._nodeAttributesDidChange, this);
+    WebInspector.DOMNode.addEventListener(WebInspector.DOMNode.Event.AttributeRemoved, this._nodeAttributesDidChange, this);
+    WebInspector.DOMNode.addEventListener(WebInspector.DOMNode.Event.EnabledPseudoClassesChanged, this._nodePseudoClassesDidChange, this);
+
+    this._colorFormatSetting = new WebInspector.Setting("default-color-format", WebInspector.Color.Format.Original);
+
+    this._styleSheetIdentifierMap = {};
+    this._styleSheetFrameURLMap = {};
+    this._nodeStylesMap = {};
+}
+
+WebInspector.CSSStyleManager.ForceablePseudoClasses = ["active", "focus", "hover", "visited"];
+
+WebInspector.CSSStyleManager.prototype = {
+    constructor: WebInspector.CSSStyleManager,
+
+    // Public
+
+    get preferredColorFormat()
+    {
+        return this._colorFormatSetting.value;
+    },
+
+    canForcePseudoClasses: function()
+    {
+        return !!CSSAgent.forcePseudoState;
+    },
+
+    propertyNameHasOtherVendorPrefix: function(name)
+    {
+        if (!name || name.length < 4 || name.charAt(0) !== "-")
+            return false;
+
+        var match = name.match(/^(?:-moz-|-ms-|-o-|-epub-)/);
+        if (!match)
+            return false;
+
+        return true;
+    },
+
+    propertyValueHasOtherVendorKeyword: function(value)
+    {
+        var match = value.match(/(?:-moz-|-ms-|-o-|-epub-)[-\w]+/);
+        if (!match)
+            return false;
+
+        return true;
+    },
+
+    canonicalNameForPropertyName: function(name)
+    {
+        if (!name || name.length < 8 || name.charAt(0) !== "-")
+            return name;
+
+        var match = name.match(/^(?:-webkit-|-khtml-|-apple-)(.+)/);
+        if (!match)
+            return name;
+
+        return match[1];
+    },
+
+    styleSheetForIdentifier: function(id)
+    {
+        if (id in this._styleSheetIdentifierMap)
+            return this._styleSheetIdentifierMap[id];
+
+        var styleSheet = new WebInspector.CSSStyleSheet(id);
+        this._styleSheetIdentifierMap[id] = styleSheet;
+        return styleSheet;
+    },
+
+    stylesForNode: function(node)
+    {
+        if (node.id in this._nodeStylesMap)
+            return this._nodeStylesMap[node.id];
+
+        var styles = new WebInspector.DOMNodeStyles(node);
+        this._nodeStylesMap[node.id] = styles;
+        return styles;
+    },
+
+    // Protected
+
+    mediaQueryResultChanged: function()
+    {
+        // Called from WebInspector.CSSObserver.
+
+        for (var key in this._nodeStylesMap)
+            this._nodeStylesMap[key].mediaQueryResultDidChange();
+    },
+
+    styleSheetChanged: function(styleSheetIdentifier)
+    {
+        // Called from WebInspector.CSSObserver.
+
+        var styleSheet = this.styleSheetForIdentifier(styleSheetIdentifier);
+        console.assert(styleSheet);
+
+        styleSheet.noteContentDidChange();
+
+        this._updateResourceContent(styleSheet);
+    },
+
+    // Private
+
+    _nodePseudoClassesDidChange: function(event)
+    {
+        var node = event.target;
+
+        for (var key in this._nodeStylesMap) {
+            var nodeStyles = this._nodeStylesMap[key];
+            if (nodeStyles.node !== node && !nodeStyles.node.isDescendant(node))
+                continue;
+            nodeStyles.pseudoClassesDidChange(node);
+        }
+    },
+
+    _nodeAttributesDidChange: function(event)
+    {
+        var node = event.target;
+
+        for (var key in this._nodeStylesMap) {
+            var nodeStyles = this._nodeStylesMap[key];
+            if (nodeStyles.node !== node && !nodeStyles.node.isDescendant(node))
+                continue;
+            nodeStyles.attributeDidChange(node, event.data.name);
+        }
+    },
+
+    _mainResourceDidChange: function(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        if (!event.target.isMainFrame())
+            return;
+
+        // Clear our maps when the main frame navigates.
+
+        this._styleSheetIdentifierMap = {};
+        this._styleSheetFrameURLMap = {};
+        this._nodeStylesMap = {};
+    },
+
+    _resourceAdded: function(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        var resource = event.data.resource;
+        console.assert(resource);
+
+        if (resource.type !== WebInspector.Resource.Type.Stylesheet)
+            return;
+
+        this._clearStyleSheetsForResource(resource);
+    },
+
+    _resourceTypeDidChange: function(event)
+    {
+        console.assert(event.target instanceof WebInspector.Resource);
+
+        var resource = event.target;
+        if (resource.type !== WebInspector.Resource.Type.Stylesheet)
+            return;
+
+        this._clearStyleSheetsForResource(resource);
+    },
+
+    _clearStyleSheetsForResource: function(resource)
+    {
+        // Clear known stylesheets for this URL and frame. This will cause the stylesheets to
+        // be updated next time _fetchInfoForAllStyleSheets is called.
+        // COMPATIBILITY (iOS 6): The frame's id was not available for the key, so delete just the url too.
+        delete this._styleSheetFrameURLMap[this._frameURLMapKey(resource.parentFrame, resource.url)];
+        delete this._styleSheetFrameURLMap[resource.url];
+    },
+
+    _frameURLMapKey: function(frame, url)
+    {
+        return (frame ? frame.id + ":" : "") + url;
+    },
+
+    _lookupStyleSheetForResource: function(resource, callback)
+    {
+        this._lookupStyleSheet(resource.parentFrame, resource.url, callback);
+    },
+
+    _lookupStyleSheet: function(frame, url, callback)
+    {
+        console.assert(frame instanceof WebInspector.Frame);
+
+        function syleSheetsFetched()
+        {
+            callback(this._styleSheetFrameURLMap[key] || this._styleSheetFrameURLMap[url] || null);
+        }
+
+        var key = this._frameURLMapKey(frame, url);
+
+        // COMPATIBILITY (iOS 6): The frame's id was not available for the key, so check for just the url too.
+        if (key in this._styleSheetFrameURLMap || url in this._styleSheetFrameURLMap)
+            callback(this._styleSheetFrameURLMap[key] || this._styleSheetFrameURLMap[url] || null);
+        else
+            this._fetchInfoForAllStyleSheets(syleSheetsFetched.bind(this));
+    },
+
+    _fetchInfoForAllStyleSheets: function(callback)
+    {
+        console.assert(typeof callback === "function");
+
+        function processStyleSheets(error, styleSheets)
+        {
+            this._styleSheetFrameURLMap = {};
+
+            if (error) {
+                callback();
+                return;
+            }
+
+            for (var i = 0; i < styleSheets.length; ++i) {
+                var styleSheetInfo = styleSheets[i];
+
+                // COMPATIBILITY (iOS 6): The info did not have 'frameId', so make parentFrame null in that case.
+                var parentFrame = "frameId" in styleSheetInfo ? WebInspector.frameResourceManager.frameForIdentifier(styleSheetInfo.frameId) : null;
+
+                var styleSheet = this.styleSheetForIdentifier(styleSheetInfo.styleSheetId);
+                styleSheet.updateInfo(styleSheetInfo.sourceURL, parentFrame);
+
+                var key = this._frameURLMapKey(parentFrame, styleSheetInfo.sourceURL);
+                this._styleSheetFrameURLMap[key] = styleSheet;
+            }
+
+            callback();
+        }
+
+        CSSAgent.getAllStyleSheets(processStyleSheets.bind(this));
+    },
+
+    _resourceContentDidChange: function(event)
+    {
+        var resource = event.target;
+        if (resource === this._ignoreResourceContentDidChangeEventForResource)
+            return;
+
+        // Ignore if it isn't a CSS stylesheet.
+        if (resource.type !== WebInspector.Resource.Type.Stylesheet || resource.syntheticMIMEType !== "text/css")
+            return;
+
+        function applyStyleSheetChanges()
+        {
+            function styleSheetFound(styleSheet)
+            {
+                delete resource.__pendingChangeTimeout;
+
+                console.assert(styleSheet);
+                if (!styleSheet)
+                    return;
+
+                // To prevent updating a TextEditor's content while the user is typing in it we want to
+                // ignore the next _updateResourceContent call.
+                resource.__ignoreNextUpdateResourceContent = true;
+
+                WebInspector.branchManager.currentBranch.revisionForRepresentedObject(styleSheet).content = resource.content;
+            }
+
+            this._lookupStyleSheetForResource(resource, styleSheetFound.bind(this));
+        }
+
+        if (resource.__pendingChangeTimeout)
+            clearTimeout(resource.__pendingChangeTimeout);
+        resource.__pendingChangeTimeout = setTimeout(applyStyleSheetChanges.bind(this), 500);
+    },
+
+    _updateResourceContent: function(styleSheet)
+    {
+        console.assert(styleSheet);
+
+        function fetchedStyleSheetContent(styleSheet, content)
+        {
+            delete styleSheet.__pendingChangeTimeout;
+
+            console.assert(styleSheet.url);
+            if (!styleSheet.url)
+                return;
+
+            var resource = null;
+
+            // COMPATIBILITY (iOS 6): The stylesheet did not always have a frame, so fallback to looking
+            // for the resource in all frames.
+            if (styleSheet.parentFrame)
+                resource = styleSheet.parentFrame.resourceForURL(styleSheet.url);
+            else
+                resource = WebInspector.frameResourceManager.resourceForURL(styleSheet.url);
+
+            if (!resource)
+                return;
+
+            // Only try to update stylesheet resources. Other resources, like documents, can contain
+            // multiple stylesheets and we don't have the source ranges to update those.
+            if (resource.type !== WebInspector.Resource.Type.Stylesheet)
+                return;
+
+            if (resource.__ignoreNextUpdateResourceContent) {
+                delete resource.__ignoreNextUpdateResourceContent;
+                return;
+            }
+
+            this._ignoreResourceContentDidChangeEventForResource = resource;
+            WebInspector.branchManager.currentBranch.revisionForRepresentedObject(resource).content = content;
+            delete this._ignoreResourceContentDidChangeEventForResource;
+        }
+
+        function styleSheetReady()
+        {
+            styleSheet.requestContent(fetchedStyleSheetContent.bind(this));
+        }
+
+        function applyStyleSheetChanges()
+        {
+            if (styleSheet.url)
+                styleSheetReady.call(this);
+            else
+                this._fetchInfoForAllStyleSheets(styleSheetReady.bind(this));
+        }
+
+        if (styleSheet.__pendingChangeTimeout)
+            clearTimeout(styleSheet.__pendingChangeTimeout);
+        styleSheet.__pendingChangeTimeout = setTimeout(applyStyleSheetChanges.bind(this), 500);
+    }
+}
+
+WebInspector.CSSStyleManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleSheet.js b/Source/WebInspectorUI/UserInterface/CSSStyleSheet.js
new file mode 100644
index 000000000..ef26aeb1a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CSSStyleSheet.js
@@ -0,0 +1,155 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSStyleSheet = function(id, url, parentFrame)
+{
+    WebInspector.SourceCode.call(this);
+
+    console.assert(id);
+
+    this._id = id || null;
+
+    this.updateInfo(url, parentFrame);
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.CSSStyleSheet);
+
+WebInspector.CSSStyleSheet.resetUniqueDisplayNameNumbers = function()
+{
+    WebInspector.CSSStyleSheet._nextUniqueDisplayNameNumber = 1;
+}
+
+WebInspector.CSSStyleSheet._nextUniqueDisplayNameNumber = 1;
+
+WebInspector.CSSStyleSheet.Event = {
+    ContentDidChange: "stylesheet-content-did-change"
+};
+
+WebInspector.CSSStyleSheet.prototype = {
+    constructor: WebInspector.CSSStyleSheet,
+
+    // Public
+
+    get id()
+    {
+        return this._id;
+    },
+
+    get parentFrame()
+    {
+        return this._parentFrame;
+    },
+
+    get url()
+    {
+        return this._url;
+    },
+
+    get urlComponents()
+    {
+        if (!this._urlComponents)
+            this._urlComponents = parseURL(this._url);
+        return this._urlComponents;
+    },
+
+    get displayName()
+    {
+        if (this._url)
+            return WebInspector.displayNameForURL(this._url, this.urlComponents);
+
+        // Assign a unique number to the StyleSheet object so it will stay the same.
+        if (!this._uniqueDisplayNameNumber)
+            this._uniqueDisplayNameNumber = this.constructor._nextUniqueDisplayNameNumber++;
+
+        return WebInspector.UIString("Anonymous StyleSheet %d").format(this._uniqueDisplayNameNumber);
+    },
+
+    // Protected
+
+    updateInfo: function(url, parentFrame)
+    {
+        this._url = url || null;
+        delete this._urlComponents;
+
+        this._parentFrame = parentFrame || null;
+    },
+
+    get revisionForRequestedContent()
+    {
+        return this.currentRevision;
+    },
+
+    handleCurrentRevisionContentChange: function()
+    {
+        if (!this._id)
+            return;
+
+        function contentDidChange(error)
+        {
+            if (error)
+                return;
+
+            DOMAgent.markUndoableState();
+
+            this.dispatchEventToListeners(WebInspector.CSSStyleSheet.Event.ContentDidChange);
+        }
+
+        this._ignoreNextContentDidChangeNotification = true;
+
+        CSSAgent.setStyleSheetText(this._id, this.currentRevision.content, contentDidChange.bind(this));
+    },
+
+    canRequestContentFromBackend: function()
+    {
+        // We can request content if we have an id.
+        return !!this._id;
+    },
+
+    requestContentFromBackend: function(callback)
+    {
+        if (!this._id) {
+            // There is no identifier to request content with. Return false to cause the
+            // pending callbacks to get null content.
+            return false;
+        }
+
+        CSSAgent.getStyleSheetText(this._id, callback);
+        return true;
+    },
+
+    noteContentDidChange: function()
+    {
+        if (this._ignoreNextContentDidChangeNotification) {
+            delete this._ignoreNextContentDidChangeNotification;
+            return false;
+        }
+
+        this.markContentAsStale();
+        this.dispatchEventToListeners(WebInspector.CSSStyleSheet.Event.ContentDidChange);
+        return true;
+    }
+};
+
+WebInspector.CSSStyleSheet.prototype.__proto__ = WebInspector.SourceCode.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CallFrame.js b/Source/WebInspectorUI/UserInterface/CallFrame.js
new file mode 100644
index 000000000..ffe602b0a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CallFrame.js
@@ -0,0 +1,99 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CallFrame = function(id, sourceCodeLocation, functionName, thisObject, scopeChain, nativeCode)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(!sourceCodeLocation || sourceCodeLocation instanceof WebInspector.SourceCodeLocation);
+    console.assert(!thisObject || thisObject instanceof WebInspector.RemoteObject);
+    console.assert(!scopeChain || scopeChain instanceof Array);
+
+    this._id = id || null;
+    this._sourceCodeLocation = sourceCodeLocation || null;
+    this._functionName = functionName || null;
+    this._thisObject = thisObject || null;
+    this._scopeChain = scopeChain || [];
+    this._nativeCode = nativeCode || false;
+};
+
+WebInspector.CallFrame.prototype = {
+    constructor: WebInspector.CallFrame,
+
+    // Public
+
+    get id()
+    {
+        return this._id;
+    },
+
+    get sourceCodeLocation()
+    {
+        return this._sourceCodeLocation;
+    },
+
+    get functionName()
+    {
+        return this._functionName;
+    },
+
+    get nativeCode()
+    {
+        return this._nativeCode;
+    },
+
+    get thisObject()
+    {
+        return this._thisObject;
+    },
+
+    get scopeChain()
+    {
+        return this._scopeChain;
+    },
+
+    collectScopeChainVariableNames: function(callback)
+    {
+        var result = {this: true};
+
+        var pendingRequests = this._scopeChain.length;
+
+        function propertiesCollected(properties)
+        {
+            for (var i = 0; properties && i < properties.length; ++i)
+                result[properties[i].name] = true;
+
+            if (--pendingRequests)
+                return;
+
+            callback(result);
+        }
+
+        for (var i = 0; i < this._scopeChain.length; ++i)
+            this._scopeChain[i].object.getAllProperties(propertiesCollected);
+    }
+};
+
+WebInspector.CallFrame.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CallFrameIcons.css b/Source/WebInspectorUI/UserInterface/CallFrameIcons.css
new file mode 100644
index 000000000..66e8d3ca9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CallFrameIcons.css
@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.function-icon .icon {
+    content: url(Images/Function.pdf);
+}
+
+.event-listener-icon .icon {
+    content: url(Images/EventListener.pdf);
+}
+
+.native-icon .icon {
+    content: url(Images/Native.pdf);
+}
diff --git a/Source/WebInspectorUI/UserInterface/CallFrameTreeElement.js b/Source/WebInspectorUI/UserInterface/CallFrameTreeElement.js
new file mode 100644
index 000000000..1fb0329c9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CallFrameTreeElement.js
@@ -0,0 +1,87 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CallFrameTreeElement = function(callFrame)
+{
+    console.assert(callFrame instanceof WebInspector.CallFrame);
+
+    var className = WebInspector.CallFrameTreeElement.FunctionIconStyleClassName;
+    if (callFrame.nativeCode)
+        className = WebInspector.CallFrameTreeElement.NativeIconStyleClassName;
+
+    // This is more than likely an event listener function with an "on" prefix and it is
+    // as long or longer than the shortest event listener name -- "oncut".
+    if (callFrame.functionName && callFrame.functionName.startsWith("on") && callFrame.functionName.length >= 5)
+        className = WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName;
+
+    var title = callFrame.functionName || WebInspector.UIString("(anonymous function)");
+
+    WebInspector.GeneralTreeElement.call(this, className, title, null, callFrame, false);
+
+    if (!callFrame.nativeCode && callFrame.sourceCodeLocation) {
+        var displayScriptURL = callFrame.sourceCodeLocation.displaySourceCode.url;
+        if (displayScriptURL) {
+            this.subtitle = document.createElement("span");
+            callFrame.sourceCodeLocation.populateLiveDisplayLocationString(this.subtitle, "textContent");
+            // Set the tooltip on the entire tree element in onattach, once the element is created.
+            this.tooltipHandledSeparately = true;
+        }
+    }
+
+    this._callFrame = callFrame;
+
+    this.small = true;
+};
+
+WebInspector.CallFrameTreeElement.FunctionIconStyleClassName = "function-icon";
+WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName = "event-listener-icon";
+WebInspector.CallFrameTreeElement.NativeIconStyleClassName = "native-icon";
+
+WebInspector.CallFrameTreeElement.prototype = {
+    constructor: WebInspector.CallFrameTreeElement,
+
+    // Public
+
+    get callFrame()
+    {
+        return this._callFrame;
+    },
+
+    // Protected
+
+    onattach: function()
+    {
+        WebInspector.GeneralTreeElement.prototype.onattach.call(this);
+
+        console.assert(this.element);
+
+        if (this.tooltipHandledSeparately) {
+            var tooltipPrefix = this.mainTitle + "\n";
+            this._callFrame.sourceCodeLocation.populateLiveDisplayLocationTooltip(this.element, tooltipPrefix);
+        }
+    }
+};
+
+WebInspector.CallFrameTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ClusterContentView.css b/Source/WebInspectorUI/UserInterface/ClusterContentView.css
new file mode 100644
index 000000000..f0df69078
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ClusterContentView.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.cluster > .content-view-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/ClusterContentView.js b/Source/WebInspectorUI/UserInterface/ClusterContentView.js
new file mode 100644
index 000000000..4631a0104
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ClusterContentView.js
@@ -0,0 +1,257 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ClusterContentView = function(representedObject)
+{
+    WebInspector.ContentView.call(this, representedObject);
+
+    this.element.classList.add(WebInspector.ClusterContentView.StyleClassName);
+
+    this._contentViewContainer = new WebInspector.ContentViewContainer();
+    this._contentViewContainer.addEventListener(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
+    this.element.appendChild(this._contentViewContainer.element);
+
+    WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.SelectionPathComponentsDidChange, this._contentViewSelectionPathComponentDidChange, this);
+    WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange, this._contentViewSupplementalRepresentedObjectsDidChange, this);
+    WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange, this._contentViewNumberOfSearchResultsDidChange, this);
+};
+
+WebInspector.ClusterContentView.StyleClassName = "cluster";
+
+WebInspector.ClusterContentView.prototype = {
+    constructor: WebInspector.ClusterContentView,
+
+    // Public
+
+    get navigationItems()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        return currentContentView ? currentContentView.navigationItems : [];
+    },
+
+    get contentViewContainer()
+    {
+        return this._contentViewContainer;
+    },
+
+    get supportsSplitContentBrowser()
+    {
+        if (this._contentViewContainer.currentContentView)
+            return this._contentViewContainer.currentContentView.supportsSplitContentBrowser;
+        return true;
+    },
+
+    updateLayout: function()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (currentContentView)
+            currentContentView.updateLayout();
+    },
+
+    shown: function()
+    {
+        this._contentViewContainer.shown();
+    },
+
+    hidden: function()
+    {
+        this._contentViewContainer.hidden();
+    },
+
+    closed: function()
+    {
+        this._contentViewContainer.closeAllContentViews();
+
+        WebInspector.ContentView.removeEventListener(WebInspector.ContentView.Event.SelectionPathComponentsDidChange, this._contentViewSelectionPathComponentDidChange, this);
+        WebInspector.ContentView.removeEventListener(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange, this._contentViewSupplementalRepresentedObjectsDidChange, this);
+        WebInspector.ContentView.removeEventListener(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange, this._contentViewNumberOfSearchResultsDidChange, this);
+    },
+
+    canGoBack: function()
+    {
+        return this._contentViewContainer.canGoBack();
+    },
+
+    canGoForward: function()
+    {
+        return this._contentViewContainer.canGoForward();
+    },
+
+    goBack: function()
+    {
+        this._contentViewContainer.goBack()
+    },
+
+    goForward: function()
+    {
+        this._contentViewContainer.goForward()
+    },
+
+    get selectionPathComponents()
+    {
+        if (!this._contentViewContainer.currentContentView)
+            return [];
+        return this._contentViewContainer.currentContentView.selectionPathComponents;
+    },
+
+    get supplementalRepresentedObjects()
+    {
+        if (!this._contentViewContainer.currentContentView)
+            return [];
+        return this._contentViewContainer.currentContentView.supplementalRepresentedObjects;
+    },
+
+    get handleCopyEvent()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        return currentContentView && typeof currentContentView.handleCopyEvent === "function" ? currentContentView.handleCopyEvent.bind(currentContentView) : null;
+    },
+
+    get supportsSave()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        return currentContentView && currentContentView.supportsSave;
+    },
+
+    get saveData()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        return currentContentView && currentContentView.saveData || null;
+    },
+
+    get supportsSearch()
+    {
+        // Always return true so we can intercept the search query to resend it when switching content views.
+        return true;
+    },
+
+    get numberOfSearchResults()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return null;
+        return currentContentView.numberOfSearchResults;
+    },
+
+    get hasPerformedSearch()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return false;
+        return currentContentView.hasPerformedSearch;
+    },
+
+    set automaticallyRevealFirstSearchResult(reveal)
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+        currentContentView.automaticallyRevealFirstSearchResult = reveal;
+    },
+
+    performSearch: function(query)
+    {
+        this._searchQuery = query;
+
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+        currentContentView.performSearch(query);
+    },
+
+    searchCleared: function()
+    {
+        this._searchQuery = null;
+
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+        currentContentView.searchCleared();
+    },
+
+    searchQueryWithSelection: function()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return null;
+        return currentContentView.searchQueryWithSelection();
+    },
+
+    revealPreviousSearchResult: function(changeFocus)
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+        currentContentView.revealPreviousSearchResult(changeFocus);
+    },
+
+    revealNextSearchResult: function(changeFocus)
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+        currentContentView.revealNextSearchResult(changeFocus);
+    },
+
+    // Private
+
+    _currentContentViewDidChange: function(event)
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (currentContentView && currentContentView.supportsSearch) {
+            if (this._searchQuery)
+                currentContentView.performSearch(this._searchQuery);
+            else
+                currentContentView.searchCleared();
+        }
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NavigationItemsDidChange);
+    },
+
+    _contentViewSelectionPathComponentDidChange: function(event)
+    {
+        if (event.target !== this._contentViewContainer.currentContentView)
+            return;
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    },
+
+    _contentViewSupplementalRepresentedObjectsDidChange: function(event)
+    {
+        if (event.target !== this._contentViewContainer.currentContentView)
+            return;
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange);
+    },
+
+    _contentViewNumberOfSearchResultsDidChange: function(event)
+    {
+        if (event.target !== this._contentViewContainer.currentContentView)
+            return;
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
+    }
+};
+
+WebInspector.ClusterContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CodeMirrorAdditions.js b/Source/WebInspectorUI/UserInterface/CodeMirrorAdditions.js
new file mode 100644
index 000000000..db9508c99
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CodeMirrorAdditions.js
@@ -0,0 +1,435 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+(function () {
+    // By default CodeMirror defines syntax highlighting styles based on token
+    // only and shared styles between modes. This limiting and does not match
+    // what we have done in the Web Inspector. So this modifies the XML, CSS
+    // and JavaScript modes to supply two styles for each token. One for the
+    // token and one with the mode name.
+
+    function tokenizeLinkString(stream, state)
+    {
+        console.assert(state._linkQuoteCharacter !== undefined);
+
+        // Eat the string until the same quote is found that started the string.
+        // If this is unquoted, then eat until whitespace or common parse errors.
+        if (state._linkQuoteCharacter)
+            stream.eatWhile(new RegExp("[^" + state._linkQuoteCharacter + "]"));
+        else
+            stream.eatWhile(/[^\s\u00a0=<>\"\']/);
+
+        // If the stream isn't at the end of line then we found the end quote.
+        // In the case, change _linkTokenize to parse the end of the link next.
+        // Otherwise _linkTokenize will stay as-is to parse more of the link.
+        if (!stream.eol())
+            state._linkTokenize = tokenizeEndOfLinkString;
+
+        return "link";
+    }
+
+    function tokenizeEndOfLinkString(stream, state)
+    {
+        console.assert(state._linkQuoteCharacter !== undefined);
+        console.assert(state._linkBaseStyle);
+
+        // Eat the quote character to style it with the base style.
+        if (state._linkQuoteCharacter)
+            stream.eat(state._linkQuoteCharacter);
+
+        var style = state._linkBaseStyle;
+
+        // Clean up the state.
+        delete state._linkTokenize;
+        delete state._linkQuoteCharacter;
+        delete state._linkBaseStyle;
+
+        return style;
+    }
+
+    function extendedXMLToken(stream, state)
+    {
+        if (state._linkTokenize) {
+            // Call the link tokenizer instead.
+            var style = state._linkTokenize(stream, state);
+            return style && (style + " m-" + this.name);
+        }
+
+        // Remember the start position so we can rewind if needed.
+        var startPosition = stream.pos;
+        var style = this._token(stream, state);
+
+        if (style === "attribute") {
+            // Look for "href" or "src" attributes. If found then we should
+            // expect a string later that should get the "link" style instead.
+            var text = stream.current().toLowerCase();
+            if (text === "href" || text === "src")
+                state._expectLink = true;
+            else
+                delete state._expectLink;
+        } else if (state._expectLink && style === "string") {
+            delete state._expectLink;
+
+            // This is a link, so setup the state to process it next.
+            state._linkTokenize = tokenizeLinkString;
+            state._linkBaseStyle = style;
+
+            // The attribute may or may not be quoted.
+            var quote = stream.current()[0];
+            state._linkQuoteCharacter = quote === "'" || quote === "\"" ? quote : null;
+
+            // Rewind the steam to the start of this token.
+            stream.pos = startPosition;
+
+            // Eat the open quote of the string so the string style
+            // will be used for the quote character.
+            if (state._linkQuoteCharacter)
+                stream.eat(state._linkQuoteCharacter);
+        } else if (style) {
+            // We don't expect other tokens between attribute and string since
+            // spaces and the equal character are not tokenized. So if we get
+            // another token before a string then we stop expecting a link.
+            delete state._expectLink;
+        }
+
+        return style && (style + " m-" + this.name);
+    }
+
+    function tokenizeCSSURLString(stream, state)
+    {
+        console.assert(state._urlQuoteCharacter);
+
+        // If we are an unquoted url string, return whitespace blocks as a whitespace token (null).
+        if (state._unquotedURLString && stream.eatSpace())
+            return null;
+
+        var ch = null;
+        var escaped = false;
+        var reachedEndOfURL = false;
+        var lastNonWhitespace = stream.pos;
+        var quote = state._urlQuoteCharacter;
+
+        // Parse characters until the end of the stream/line or a proper end quote character.
+        while ((ch = stream.next()) != null) {
+            if (ch == quote && !escaped) {
+                reachedEndOfURL = true;
+                break;
+            }
+            escaped = !escaped && ch === "\\";
+            if (!/[\s\u00a0]/.test(ch))
+                lastNonWhitespace = stream.pos;
+        }
+
+        // If we are an unquoted url string, do not include trailing whitespace, rewind to the last real character.
+        if (state._unquotedURLString)
+            stream.pos = lastNonWhitespace;
+
+        // If we have reached the proper the end of the url string, switch to the end tokenizer to reset the state.
+        if (reachedEndOfURL) {
+            if (!state._unquotedURLString)
+                stream.backUp(1);
+            this._urlTokenize = tokenizeEndOfCSSURLString;
+        }
+
+        return "link";
+    }
+
+    function tokenizeEndOfCSSURLString(stream, state)
+    {
+        console.assert(state._urlQuoteCharacter);
+        console.assert(state._urlBaseStyle);
+
+        // Eat the quote character to style it with the base style.
+        if (!state._unquotedURLString)
+            stream.eat(state._urlQuoteCharacter);
+
+        var style = state._urlBaseStyle;
+
+        delete state._urlTokenize;
+        delete state._urlQuoteCharacter;
+        delete state._urlBaseStyle;
+
+        return style;
+    }
+
+    function extendedCSSToken(stream, state)
+    {
+        if (state._urlTokenize) {
+            // Call the link tokenizer instead.
+            var style = state._urlTokenize(stream, state);
+            return style && (style + " m-" + (this.alternateName || this.name));
+        }
+
+        // Remember the start position so we can rewind if needed.
+        var startPosition = stream.pos;
+        var style = this._token(stream, state);
+
+        if (style) {
+            if (style === "variable-2" && stream.current() === "url") {
+                // If the current text is "url" then we should expect the next string token to be a link.
+                state._expectLink = true;
+            } else if (state._expectLink && style === "string") {
+                // We expected a string and got it. This is a link. Parse it the way we want it.
+                delete state._expectLink;
+
+                // This is a link, so setup the state to process it next.
+                state._urlTokenize = tokenizeCSSURLString;
+                state._urlBaseStyle = style;
+
+                // The url may or may not be quoted.
+                var quote = stream.current()[0];
+                state._urlQuoteCharacter = quote === "'" || quote === "\"" ? quote : ")";
+                state._unquotedURLString = state._urlQuoteCharacter === ")";
+
+                // Rewind the steam to the start of this token.
+                stream.pos = startPosition;
+
+                // Eat the open quote of the string so the string style
+                // will be used for the quote character.
+                if (!state._unquotedURLString)
+                    stream.eat(state._urlQuoteCharacter);
+            } else if (state._expectLink) {
+                // We expected a string and didn't get one. Cleanup.
+                delete state._expectLink;
+            }
+        }
+
+        return style && (style + " m-" + (this.alternateName || this.name));
+    }
+
+    function extendedToken(stream, state)
+    {
+        // CodeMirror moves the original token function to _token when we extended it.
+        // So call it to get the style that we will add an additional class name to.
+        var style = this._token(stream, state);
+        return style && (style + " m-" + (this.alternateName || this.name));
+    }
+
+    function extendedCSSRuleStartState(base)
+    {
+        // CodeMirror moves the original token function to _startState when we extended it.
+        // So call it to get the original start state that we will modify.
+        var state = this._startState(base);
+
+        // Start the stack off like it has already parsed a rule. This causes everything
+        // after to be parsed as properties in a rule.
+        state.stack = ["rule"];
+
+        return state;
+    }
+
+    CodeMirror.extendMode("css-base", {token: extendedCSSToken, alternateName: "css"});
+    CodeMirror.extendMode("xml", {token: extendedXMLToken});
+    CodeMirror.extendMode("javascript", {token: extendedToken});
+
+    CodeMirror.defineMode("css-rule", CodeMirror.modes.css);
+    CodeMirror.extendMode("css-rule", {startState: extendedCSSRuleStartState});
+
+    CodeMirror.defineExtension("hasLineClass", function(line, where, className) {
+        // This matches the arguments to addLineClass and removeLineClass.
+        var classProperty = (where === "text" ? "textClass" : (where == "background" ? "bgClass" : "wrapClass"));
+        var lineInfo = this.lineInfo(line);
+        if (!lineInfo)
+            return false;
+
+        if (!lineInfo[classProperty])
+            return false;
+
+        // Test for the simple case.
+        if (lineInfo[classProperty] === className)
+            return true;
+
+        // Do a quick check for the substring. This is faster than a regex, which requires escaping the input first.
+        var index = lineInfo[classProperty].indexOf(className);
+        if (index === -1)
+            return false;
+
+        // Check that it is surrounded by spaces. Add padding spaces first to work with beginning and end of string cases.
+        var paddedClass = " " + lineInfo[classProperty] + " ";
+        return paddedClass.indexOf(" " + className + " ", index) !== -1;
+    });
+
+    CodeMirror.defineExtension("toggleLineClass", function(line, where, className) {
+        if (this.hasLineClass(line, where, className)) {
+            this.removeLineClass(line, where, className);
+            return false;
+        }
+
+        this.addLineClass(line, where, className);
+        return true;
+    });
+
+    CodeMirror.defineExtension("alterNumberInRange", function(amount, startPosition, endPosition, affectsSelection) {
+        // We don't try if the range is multiline, pass to another key handler.
+        if (startPosition.line !== endPosition.line)
+            return false;
+
+        var line = this.getLine(startPosition.line);
+
+        var foundPeriod = false;
+
+        var start = NaN;
+        var end = NaN;
+
+        for (var i = startPosition.ch; i >= 0; --i) {
+            var character = line.charAt(i);
+
+            if (character === ".") {
+                if (foundPeriod)
+                    break;
+                foundPeriod = true;
+            } else if (character !== "-" && character !== "+" && isNaN(parseInt(character))) {
+                // Found the end already, just scan backwards.
+                if (i === startPosition.ch) {
+                    end = i;
+                    continue;
+                }
+
+                break;
+            }
+
+            start = i;
+        }
+
+        if (isNaN(end)) {
+            for (var i = startPosition.ch + 1; i < line.length; ++i) {
+                var character = line.charAt(i);
+
+                if (character === ".") {
+                    if (foundPeriod) {
+                        end = i;
+                        break;
+                    }
+
+                    foundPeriod = true;
+                } else if (isNaN(parseInt(character))) {
+                    end = i;
+                    break;
+                }
+
+                end = i + 1;
+            }
+        }
+
+        // No number range found, pass to another key handler.
+        if (isNaN(start) || isNaN(end))
+            return false;
+
+        var number = parseFloat(line.substring(start, end));
+        if (number < 1 && number >= -1 && amount === 1)
+            amount = 0.1;
+        else if (number <= 1 && number > -1 && amount === -1)
+            amount = -0.1;
+
+        // Make the new number and constrain it to a precision of 6, this matches numbers the engine returns.
+        // Use the Number constructor to forget the fixed precision, so 1.100000 will print as 1.1.
+        var alteredNumber = Number((number + amount).toFixed(6));
+        var alteredNumberString = alteredNumber.toString();
+
+        var from = {line: startPosition.line, ch: start};
+        var to = {line: startPosition.line, ch: end};
+
+        this.replaceRange(alteredNumberString, from, to);
+
+        if (affectsSelection) {
+            var newTo = {line: startPosition.line, ch: from.ch + alteredNumberString.length};
+
+            // Fix up the selection so it follows the increase or decrease in the replacement length.
+            if (endPosition.ch >= to.ch)
+                endPosition = newTo;
+
+            if (startPosition.ch >= to.ch)
+                startPosition = newTo;
+
+            this.setSelection(startPosition, endPosition);
+        }
+
+        return true;
+    });
+
+    function alterNumber(amount, codeMirror)
+    {
+        var startPosition = codeMirror.getCursor("anchor");
+        var endPosition = codeMirror.getCursor("head");
+
+        var foundNumber = codeMirror.alterNumberInRange(amount, startPosition, endPosition, true);
+        if (!foundNumber)
+            return CodeMirror.Pass;
+    }
+
+    function ignoreKey(codeMirror)
+    {
+        // Do nothing to ignore the key.
+    }
+
+    CodeMirror.keyMap["default"] = {
+        "Alt-Up": alterNumber.bind(null, 1),
+        "Shift-Alt-Up": alterNumber.bind(null, 10),
+        "Alt-PageUp": alterNumber.bind(null, 10),
+        "Shift-Alt-PageUp": alterNumber.bind(null, 100),
+        "Alt-Down": alterNumber.bind(null, -1),
+        "Shift-Alt-Down": alterNumber.bind(null, -10),
+        "Alt-PageDown": alterNumber.bind(null, -10),
+        "Shift-Alt-PageDown": alterNumber.bind(null, -100),
+        "Cmd-/": "toggleComment",
+        "Shift-Tab": ignoreKey,
+        fallthrough: "macDefault"
+    };
+
+    // Register some extra MIME-types for CodeMirror. These are in addition to the
+    // ones CodeMirror already registers, like text/html, text/javascript, etc.
+    const extraXMLTypes = ["text/xml", "text/xsl"];
+    extraXMLTypes.forEach(function(type) {
+        CodeMirror.defineMIME(type, "xml");
+    });
+
+    const extraHTMLTypes = ["application/xhtml+xml", "image/svg+xml"];
+    extraHTMLTypes.forEach(function(type) {
+        CodeMirror.defineMIME(type, "htmlmixed");
+    });
+
+    const extraJavaScriptTypes = ["text/ecmascript", "application/javascript", "application/ecmascript", "application/x-javascript",
+        "text/x-javascript", "text/javascript1.1", "text/javascript1.2", "text/javascript1.3", "text/jscript", "text/livescript"];
+    extraJavaScriptTypes.forEach(function(type) {
+        CodeMirror.defineMIME(type, "javascript");
+    });
+
+    const extraJSONTypes = ["application/x-json", "text/x-json"];
+    extraJSONTypes.forEach(function(type) {
+        CodeMirror.defineMIME(type, {name: "javascript", json: true});
+    });
+
+})();
+
+WebInspector.compareCodeMirrorPositions = function(a, b)
+{
+    var lineCompare = a.line - b.line;
+    if (lineCompare !== 0)
+        return lineCompare;
+
+    var aColumn = "ch" in a ? a.ch : Number.MAX_VALUE;
+    var bColumn = "ch" in b ? b.ch : Number.MAX_VALUE;
+    return aColumn - bColumn;
+};
diff --git a/Source/WebInspectorUI/UserInterface/CodeMirrorCompletionController.css b/Source/WebInspectorUI/UserInterface/CodeMirrorCompletionController.css
new file mode 100644
index 000000000..2f27d1c6e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CodeMirrorCompletionController.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.CodeMirror .CodeMirror-lines .completion-hint {
+    opacity: 0.4;
+}
diff --git a/Source/WebInspectorUI/UserInterface/CodeMirrorCompletionController.js b/Source/WebInspectorUI/UserInterface/CodeMirrorCompletionController.js
new file mode 100644
index 000000000..16922eb80
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CodeMirrorCompletionController.js
@@ -0,0 +1,812 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CodeMirrorCompletionController = function(codeMirror, delegate, stopCharactersRegex)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(codeMirror);
+
+    this._codeMirror = codeMirror;
+    this._stopCharactersRegex = stopCharactersRegex || null;
+    this._delegate = delegate || null;
+
+    this._startOffset = NaN;
+    this._endOffset = NaN;
+    this._lineNumber = NaN;
+    this._prefix = "";
+    this._completions = [];
+
+    this._suggestionsView = new WebInspector.CompletionSuggestionsView(this);
+
+    this._keyMap = {
+        "Up": this._handleUpKey.bind(this),
+        "Down": this._handleDownKey.bind(this),
+        "Right": this._handleRightOrEnterKey.bind(this),
+        "Esc": this._handleEscapeKey.bind(this),
+        "Enter": this._handleRightOrEnterKey.bind(this),
+        "Tab": this._handleTabKey.bind(this),
+        "Cmd-A": this._handleHideKey.bind(this),
+        "Cmd-Z": this._handleHideKey.bind(this),
+        "Shift-Cmd-Z": this._handleHideKey.bind(this),
+        "Cmd-Y": this._handleHideKey.bind(this)
+    };
+
+    this._handleChangeListener = this._handleChange.bind(this);
+    this._handleCursorActivityListener = this._handleCursorActivity.bind(this);
+    this._handleHideActionListener = this._handleHideAction.bind(this);
+
+    this._codeMirror.addKeyMap(this._keyMap);
+
+    this._codeMirror.on("change", this._handleChangeListener);
+    this._codeMirror.on("cursorActivity", this._handleCursorActivityListener);
+    this._codeMirror.on("blur", this._handleHideActionListener);
+    this._codeMirror.on("scroll", this._handleHideActionListener);
+};
+
+WebInspector.CodeMirrorCompletionController.GenericStopCharactersRegex = /[\s=:;,]/;
+WebInspector.CodeMirrorCompletionController.DefaultStopCharactersRegexModeMap = {"css": /[\s:;,{}()]/, "javascript": /[\s=:;,!+\-*/%&|^~?<>.{}()[\]]/};
+WebInspector.CodeMirrorCompletionController.BaseExpressionStopCharactersRegexModeMap = {"javascript": /[\s=:;,!+\-*/%&|^~?<>]/};
+WebInspector.CodeMirrorCompletionController.OpenBracketCharactersRegex = /[({[]/;
+WebInspector.CodeMirrorCompletionController.CloseBracketCharactersRegex = /[)}\]]/;
+WebInspector.CodeMirrorCompletionController.MatchingBrackets = {"{": "}", "(": ")", "[": "]", "}": "{", ")": "(", "]": "["};
+WebInspector.CodeMirrorCompletionController.CompletionHintStyleClassName = "completion-hint";
+WebInspector.CodeMirrorCompletionController.CompletionsHiddenDelay = 250;
+WebInspector.CodeMirrorCompletionController.CompletionTypingDelay = 250;
+WebInspector.CodeMirrorCompletionController.CompletionOrigin = "+completion";
+WebInspector.CodeMirrorCompletionController.DeleteCompletionOrigin = "+delete-completion";
+
+WebInspector.CodeMirrorCompletionController.prototype = {
+    constructor: WebInspector.CodeMirrorCompletionController,
+
+    // Public
+
+    get delegate()
+    {
+        return this._delegate;
+    },
+
+    updateCompletions: function(completions, implicitSuffix)
+    {
+        if (isNaN(this._startOffset) || isNaN(this._endOffset) || isNaN(this._lineNumber))
+            return;
+
+        if (!completions || !completions.length) {
+            this.hideCompletions();
+            return;
+        }
+
+        this._completions = completions;
+
+        if (typeof implicitSuffix === "string")
+            this._implicitSuffix = implicitSuffix;
+
+        var from = {line: this._lineNumber, ch: this._startOffset};
+        var to = {line: this._lineNumber, ch: this._endOffset};
+
+        var firstCharCoords = this._codeMirror.cursorCoords(from);
+        var lastCharCoords = this._codeMirror.cursorCoords(to);
+        var bounds = new WebInspector.Rect(firstCharCoords.left, firstCharCoords.top, lastCharCoords.right - firstCharCoords.left, firstCharCoords.bottom - firstCharCoords.top);
+
+        // Try to restore the previous selected index, otherwise just select the first.
+        var index = this._currentCompletion ? completions.indexOf(this._currentCompletion) : 0;
+        if (index === -1)
+            index = 0;
+
+        if (this._forced || completions.length > 1 || completions[index] !== this._prefix) {
+            // Update and show the suggestion list.
+            this._suggestionsView.update(completions, index);
+            this._suggestionsView.show(bounds);
+        } else if (this._implicitSuffix) {
+            // The prefix and the completion exactly match, but there is an implicit suffix.
+            // Just hide the suggestion list and keep the completion hint for the implicit suffix.
+            this._suggestionsView.hide();
+        } else {
+            // The prefix and the completion exactly match, hide the completions. Return early so
+            // the completion hint isn't updated.
+            this.hideCompletions();
+            return;
+        }
+
+        this._applyCompletionHint(completions[index]);
+    },
+
+    isCompletionChange: function(change)
+    {
+        return this._ignoreChange || change.origin === WebInspector.CodeMirrorCompletionController.CompletionOrigin || change.origin === WebInspector.CodeMirrorCompletionController.DeleteCompletionOrigin;
+    },
+
+    isShowingCompletions: function()
+    {
+        return this._suggestionsView.visible || (this._completionHintMarker && this._completionHintMarker.find());
+    },
+
+    isHandlingClickEvent: function()
+    {
+        return this._suggestionsView.isHandlingClickEvent();
+    },
+
+    hideCompletions: function()
+    {
+        this._suggestionsView.hide();
+
+        this._removeCompletionHint();
+
+        this._startOffset = NaN;
+        this._endOffset = NaN;
+        this._lineNumber = NaN;
+        this._prefix = "";
+        this._completions = [];
+        this._implicitSuffix = "";
+        this._forced = false;
+
+        if (this._completionDelayTimeout) {
+            clearTimeout(this._completionDelayTimeout)
+            delete this._completionDelayTimeout;
+        }
+
+        delete this._currentCompletion;
+        delete this._ignoreNextCursorActivity;
+    },
+
+    close: function()
+    {
+        this._codeMirror.removeKeyMap(this._keyMap);
+
+        this._codeMirror.off("change", this._handleChangeListener);
+        this._codeMirror.off("cursorActivity", this._handleCursorActivityListener);
+        this._codeMirror.off("blur", this._handleHideActionListener);
+        this._codeMirror.off("scroll", this._handleHideActionListener);
+    },
+
+    // Protected
+
+    completionSuggestionsSelectedCompletion: function(suggestionsView, completionText)
+    {
+        this._applyCompletionHint(completionText);
+    },
+
+    completionSuggestionsClickedCompletion: function(suggestionsView, completionText)
+    {
+        // The clicked suggestion causes the editor to loose focus. Restore it so the user can keep typing.
+        this._codeMirror.focus();
+
+        this._applyCompletionHint(completionText);
+        this._commitCompletionHint();
+    },
+
+    // Private
+
+    get _currentReplacementText()
+    {
+        return this._currentCompletion + this._implicitSuffix;
+    },
+
+    _hasPendingCompletion: function()
+    {
+        return !isNaN(this._startOffset) && !isNaN(this._endOffset) && !isNaN(this._lineNumber);
+    },
+
+    _notifyCompletionsHiddenSoon: function()
+    {
+        function notify()
+        {
+            if (this._completionHintMarker)
+                return;
+
+            if (this._delegate && typeof this._delegate.completionControllerCompletionsHidden === "function")
+                this._delegate.completionControllerCompletionsHidden(this);
+        }
+
+        if (this._notifyCompletionsHiddenIfNeededTimeout)
+            clearTimeout(this._notifyCompletionsHiddenIfNeededTimeout);
+        this._notifyCompletionsHiddenIfNeededTimeout = setTimeout(notify.bind(this), WebInspector.CodeMirrorCompletionController.CompletionsHiddenDelay);
+    },
+
+    _applyCompletionHint: function(completionText)
+    {
+        console.assert(completionText);
+        if (!completionText)
+            return;
+
+        function update()
+        {
+            this._currentCompletion = completionText;
+
+            this._removeCompletionHint(true, true);
+
+            var replacementText = this._currentReplacementText;
+
+            var from = {line: this._lineNumber, ch: this._startOffset};
+            var cursor = {line: this._lineNumber, ch: this._endOffset};
+            var to = {line: this._lineNumber, ch: this._startOffset + replacementText.length};
+
+            this._codeMirror.replaceRange(replacementText, from, cursor, WebInspector.CodeMirrorCompletionController.CompletionOrigin);
+            this._removeLastChangeFromHistory();
+
+            this._codeMirror.setCursor(cursor);
+
+            if (cursor.ch !== to.ch)
+                this._completionHintMarker = this._codeMirror.markText(cursor, to, {className: WebInspector.CodeMirrorCompletionController.CompletionHintStyleClassName});
+        }
+
+        this._ignoreChange = true;
+        this._ignoreNextCursorActivity = true;
+
+        this._codeMirror.operation(update.bind(this));
+
+        delete this._ignoreChange;
+    },
+
+    _commitCompletionHint: function()
+    {
+        function update()
+        {
+            this._removeCompletionHint(true, true);
+
+            var replacementText = this._currentReplacementText;
+
+            var from = {line: this._lineNumber, ch: this._startOffset};
+            var cursor = {line: this._lineNumber, ch: this._endOffset};
+            var to = {line: this._lineNumber, ch: this._startOffset + replacementText.length};
+
+            var lastChar = this._currentCompletion.charAt(this._currentCompletion.length - 1);
+            var isClosing = ")]}".indexOf(lastChar);
+            if (isClosing !== -1)
+                to.ch -= 1 + this._implicitSuffix.length;
+
+            this._codeMirror.replaceRange(replacementText, from, cursor, WebInspector.CodeMirrorCompletionController.CompletionOrigin);
+
+            // Don't call _removeLastChangeFromHistory here to allow the committed completion to be undone.
+
+            this._codeMirror.setCursor(to);
+
+            this.hideCompletions();
+        }
+
+        this._ignoreChange = true;
+        this._ignoreNextCursorActivity = true;
+
+        this._codeMirror.operation(update.bind(this));
+
+        delete this._ignoreChange;
+    },
+
+    _removeLastChangeFromHistory: function()
+    {
+        var history = this._codeMirror.getHistory();
+
+        // We don't expect a undone history. But if there is one clear it. If could lead to undefined behavior.
+        console.assert(!history.undone.length);
+        history.undone = [];
+
+        // Pop the last item from the done history.
+        console.assert(history.done.length);
+        history.done.pop();
+
+        this._codeMirror.setHistory(history);
+    },
+
+    _removeCompletionHint: function(nonatomic, dontRestorePrefix)
+    {
+        if (!this._completionHintMarker)
+            return;
+
+        this._notifyCompletionsHiddenSoon();
+
+        function update()
+        {
+            var range = this._completionHintMarker.find();
+            if (range) {
+                this._completionHintMarker.clear();
+
+                this._codeMirror.replaceRange("", range.from, range.to, WebInspector.CodeMirrorCompletionController.DeleteCompletionOrigin);
+                this._removeLastChangeFromHistory();
+            }
+
+            this._completionHintMarker = null;
+
+            if (dontRestorePrefix)
+                return;
+
+            console.assert(!isNaN(this._startOffset));
+            console.assert(!isNaN(this._endOffset));
+            console.assert(!isNaN(this._lineNumber));
+
+            var from = {line: this._lineNumber, ch: this._startOffset};
+            var to = {line: this._lineNumber, ch: this._endOffset};
+
+            this._codeMirror.replaceRange(this._prefix, from, to, WebInspector.CodeMirrorCompletionController.DeleteCompletionOrigin);
+            this._removeLastChangeFromHistory();
+        }
+
+        if (nonatomic) {
+            update.call(this);
+            return;
+        }
+
+        this._ignoreChange = true;
+
+        this._codeMirror.operation(update.bind(this));
+
+        delete this._ignoreChange;
+    },
+
+    _scanStringForExpression: function(modeName, string, startOffset, direction, allowMiddleAndEmpty, includeStopCharacter, ignoreInitialUnmatchedOpenBracket, stopCharactersRegex)
+    {
+        console.assert(direction === -1 || direction === 1);
+
+        var stopCharactersRegex = stopCharactersRegex || this._stopCharactersRegex || WebInspector.CodeMirrorCompletionController.DefaultStopCharactersRegexModeMap[modeName] || WebInspector.CodeMirrorCompletionController.GenericStopCharactersRegex;
+
+        function isStopCharacter(character)
+        {
+            return stopCharactersRegex.test(character);
+        }
+
+        function isOpenBracketCharacter(character)
+        {
+            return WebInspector.CodeMirrorCompletionController.OpenBracketCharactersRegex.test(character);
+        }
+
+        function isCloseBracketCharacter(character)
+        {
+            return WebInspector.CodeMirrorCompletionController.CloseBracketCharactersRegex.test(character);
+        }
+
+        function matchingBracketCharacter(character)
+        {
+            return WebInspector.CodeMirrorCompletionController.MatchingBrackets[character];
+        }
+
+        var endOffset = Math.min(startOffset, string.length);
+
+        var endOfLineOrWord = endOffset === string.length || isStopCharacter(string.charAt(endOffset));
+
+        if (!endOfLineOrWord && !allowMiddleAndEmpty)
+            return null;
+
+        var bracketStack = [];
+        var bracketOffsetStack = [];
+        var lastCloseBracketOffset = NaN;
+
+        var startOffset = endOffset;
+        var firstOffset = endOffset + direction;
+        for (var i = firstOffset; direction > 0 ? i < string.length : i >= 0; i += direction) {
+            var character = string.charAt(i);
+
+            // Ignore stop characters when we are inside brackets.
+            if (isStopCharacter(character) && !bracketStack.length)
+                break;
+
+            if (isCloseBracketCharacter(character)) {
+                bracketStack.push(character);
+                bracketOffsetStack.push(i);
+            } else if (isOpenBracketCharacter(character)) {
+                if ((!ignoreInitialUnmatchedOpenBracket || i !== firstOffset) && (!bracketStack.length || matchingBracketCharacter(character) !== bracketStack.lastValue))
+                    break;
+
+                bracketOffsetStack.pop();
+                bracketStack.pop();
+            }
+
+            startOffset = i + (direction > 0 ? 1 : 0);
+        }
+
+        if (bracketOffsetStack.length)
+            startOffset = bracketOffsetStack.pop() + 1;
+
+        if (includeStopCharacter && startOffset > 0 && startOffset < string.length)
+            startOffset += direction;
+
+        if (direction > 0) {
+            var tempEndOffset = endOffset;
+            endOffset = startOffset;
+            startOffset = tempEndOffset;
+        }
+
+        return {string: string.substring(startOffset, endOffset), startOffset: startOffset, endOffset: endOffset};
+    },
+
+    _completeAtCurrentPosition: function(force)
+    {
+        if (this._codeMirror.somethingSelected()) {
+            this.hideCompletions();
+            return;
+        }
+
+        if (this._completionDelayTimeout) {
+            clearTimeout(this._completionDelayTimeout);
+            delete this._completionDelayTimeout;
+        }
+
+        this._removeCompletionHint(true, true);
+
+        var cursor = this._codeMirror.getCursor();
+        var token = this._codeMirror.getTokenAt(cursor);
+
+        // Don't try to complete inside comments.
+        if (token.type && /\bcomment\b/.test(token.type)) {
+            this.hideCompletions();
+            return;
+        }
+
+        var mode = this._codeMirror.getMode();
+        var innerMode = CodeMirror.innerMode(mode, token.state).mode;
+        var modeName = innerMode.alternateName || innerMode.name;
+
+        var lineNumber = cursor.line;
+        var lineString = this._codeMirror.getLine(lineNumber);
+
+        var backwardScanResult = this._scanStringForExpression(modeName, lineString, cursor.ch, -1, force);
+        if (!backwardScanResult) {
+            this.hideCompletions();
+            return;
+        }
+
+        var forwardScanResult = this._scanStringForExpression(modeName, lineString, cursor.ch, 1, true, true);
+        var suffix = forwardScanResult.string;
+
+        this._ignoreNextCursorActivity = true;
+
+        this._startOffset = backwardScanResult.startOffset;
+        this._endOffset = backwardScanResult.endOffset;
+        this._lineNumber = lineNumber;
+        this._prefix = backwardScanResult.string;
+        this._completions = [];
+        this._implicitSuffix = "";
+        this._forced = force;
+
+        var baseExpressionStopCharactersRegex = WebInspector.CodeMirrorCompletionController.BaseExpressionStopCharactersRegexModeMap[modeName];
+        if (baseExpressionStopCharactersRegex)
+            var baseScanResult = this._scanStringForExpression(modeName, lineString, this._startOffset, -1, true, false, true, baseExpressionStopCharactersRegex);
+
+        if (!force && !backwardScanResult.string && (!baseScanResult || !baseScanResult.string)) {
+            this.hideCompletions();
+            return;
+        }
+
+        var defaultCompletions = [];
+
+        switch (modeName) {
+        case "css":
+            defaultCompletions = this._generateCSSCompletions(token, baseScanResult ? baseScanResult.string : null, suffix);
+            break;
+        case "javascript":
+            defaultCompletions = this._generateJavaScriptCompletions(token, baseScanResult ? baseScanResult.string : null, suffix);
+            break;
+        }
+
+        if (this._delegate && typeof this._delegate.completionControllerCompletionsNeeded === "function")
+            this._delegate.completionControllerCompletionsNeeded(this, this._prefix, defaultCompletions, baseScanResult ? baseScanResult.string : null, suffix, force);
+        else
+            this.updateCompletions(defaultCompletions);
+    },
+
+    _generateCSSCompletions: function(mainToken, base, suffix)
+    {
+        // We only support completion inside CSS rules.
+        if (!mainToken.state || !mainToken.state.stack || !mainToken.state.stack.contains("rule"))
+            return [];
+
+        var token = mainToken;
+        var lineNumber = this._lineNumber;
+
+        // Scan backwards looking for the current property.
+        while (token.state.stack.lastValue === "propertyValue") {
+            // Found the beginning of the line. Go to the previous line.
+            if (!token.start) {
+                --lineNumber;
+
+                // No more lines, stop.
+                if (lineNumber < 0)
+                    break;
+            }
+
+            // Get the previous token.
+            token = this._codeMirror.getTokenAt({line: lineNumber, ch: token.start ? token.start : Number.MAX_VALUE});
+        }
+
+        // If we have a property token and it's not the main token, then we are working on
+        // the value for that property and should complete allowed values.
+        if (mainToken !== token && token.type && /\bproperty\b/.test(token.type)) {
+            var propertyName = token.string;
+
+            // If there is a suffix and it isn't a semicolon, then we should use a space since
+            // the user is editing in the middle.
+            this._implicitSuffix = suffix && suffix !== ";" ? " " : ";";
+
+            // Don't use an implicit suffix if it would be the same as the existing suffix.
+            if (this._implicitSuffix === suffix)
+                this._implicitSuffix = "";
+
+            return WebInspector.CSSKeywordCompletions.forProperty(propertyName).startsWith(this._prefix);
+        }
+
+        this._implicitSuffix = suffix !== ":" ? ": " : "";
+
+        // Complete property names.
+        return WebInspector.CSSCompletions.cssNameCompletions.startsWith(this._prefix);
+    },
+
+    _generateJavaScriptCompletions: function(mainToken, base, suffix)
+    {
+        // If there is a base expression then we should not attempt to match any keywords or variables.
+        // Allow only open bracket characters at the end of the base, otherwise leave completions with
+        // a base up to the delegate to figure out.
+        if (base && !/[({[]$/.test(base))
+            return [];
+
+        var matchingWords = [];
+
+        const prefix = this._prefix;
+
+        const declaringVariable = mainToken.state.lexical.type === "vardef";
+        const insideSwitch = mainToken.state.lexical.prev ? mainToken.state.lexical.prev.info === "switch" : false;
+        const insideBlock = mainToken.state.lexical.prev ? mainToken.state.lexical.prev.type === "}" : false;
+        const insideParenthesis = mainToken.state.lexical.type === ")";
+        const insideBrackets = mainToken.state.lexical.type === "]";
+
+        const allKeywords = ["break", "case", "catch", "const", "continue", "debugger", "default", "delete", "do", "else", "false", "finally", "for", "function", "if", "in",
+            "Infinity", "instanceof", "NaN", "new", "null", "return", "switch", "this", "throw", "true", "try", "typeof", "undefined", "var", "void", "while", "with"];
+        const valueKeywords = ["false", "Infinity", "NaN", "null", "this", "true", "undefined"];
+
+        const allowedKeywordsInsideBlocks = allKeywords.keySet();
+        const allowedKeywordsWhenDeclaringVariable = valueKeywords.keySet();
+        const allowedKeywordsInsideParenthesis = valueKeywords.concat(["function"]).keySet();
+        const allowedKeywordsInsideBrackets = allowedKeywordsInsideParenthesis;
+        const allowedKeywordsOnlyInsideSwitch = ["case", "default"].keySet();
+
+        function matchKeywords(keywords)
+        {
+            matchingWords = matchingWords.concat(keywords.filter(function(word) {
+                if (!insideSwitch && word in allowedKeywordsOnlyInsideSwitch)
+                    return false;
+                if (insideBlock && !(word in allowedKeywordsInsideBlocks))
+                    return false;
+                if (insideBrackets && !(word in allowedKeywordsInsideBrackets))
+                    return false;
+                if (insideParenthesis && !(word in allowedKeywordsInsideParenthesis))
+                    return false;
+                if (declaringVariable && !(word in allowedKeywordsWhenDeclaringVariable))
+                    return false;
+                return word.startsWith(prefix);
+            }));
+        }
+
+        function matchVariables()
+        {
+            function filterVariables(variables)
+            {
+                for (var variable = variables; variable; variable = variable.next) {
+                    // Don't match the variable if this token is in a variable declaration.
+                    // Otherwise the currently typed text will always match and that isn't useful.
+                    if (declaringVariable && variable.name === prefix)
+                        continue;
+
+                    if (variable.name.startsWith(prefix) && !matchingWords.contains(variable.name))
+                        matchingWords.push(variable.name);
+                }
+            }
+
+            var context = mainToken.state.context;
+            while (context) {
+                filterVariables(context.vars);
+                context = context.prev;
+            }
+
+            filterVariables(mainToken.state.globalVars);
+        }
+
+        switch (suffix.substring(0, 1)) {
+        case "":
+        case " ":
+            matchVariables();
+            matchKeywords(allKeywords);
+            break;
+
+        case ".":
+        case "[":
+            matchVariables();
+            matchKeywords(["false", "Infinity", "NaN", "this", "true"]);
+            break;
+
+        case "(":
+            matchVariables();
+            matchKeywords(["catch", "else", "for", "function", "if", "return", "switch", "throw", "while", "with"]);
+            break;
+
+        case "{":
+            matchKeywords(["do", "else", "finally", "return", "try"]);
+            break;
+
+        case ":":
+            if (insideSwitch)
+                matchKeywords(["case", "default"]);
+            break;
+
+        case ";":
+            matchVariables();
+            matchKeywords(valueKeywords);
+            matchKeywords(["break", "continue", "debugger", "return", "void"]);
+            break;
+        }
+
+        return matchingWords;
+    },
+
+    _handleUpKey: function(codeMirror)
+    {
+        if (!this._hasPendingCompletion())
+            return CodeMirror.Pass;
+
+        if (!this.isShowingCompletions())
+            return;
+
+        this._suggestionsView.selectPrevious();
+    },
+
+    _handleDownKey: function(codeMirror)
+    {
+        if (!this._hasPendingCompletion())
+            return CodeMirror.Pass;
+
+        if (!this.isShowingCompletions())
+            return;
+
+        this._suggestionsView.selectNext();
+    },
+
+    _handleRightOrEnterKey: function(codeMirror)
+    {
+        if (!this._hasPendingCompletion())
+            return CodeMirror.Pass;
+
+        if (!this.isShowingCompletions())
+            return;
+
+        this._commitCompletionHint();
+    },
+
+    _handleEscapeKey: function(codeMirror)
+    {
+        var delegateImplementsShouldAllowEscapeCompletion = this._delegate && typeof this._delegate.completionControllerShouldAllowEscapeCompletion === "function";
+        if (this._hasPendingCompletion())
+            this.hideCompletions();
+        else if (this._codeMirror.getOption("readOnly"))
+            return CodeMirror.Pass;
+        else if (!delegateImplementsShouldAllowEscapeCompletion || this._delegate.completionControllerShouldAllowEscapeCompletion(this))
+            this._completeAtCurrentPosition(true);
+        else
+            return CodeMirror.Pass;
+    },
+
+    _handleTabKey: function(codeMirror)
+    {
+        if (!this._hasPendingCompletion())
+            return CodeMirror.Pass;
+
+        if (!this.isShowingCompletions())
+            return;
+
+        console.assert(this._completions.length);
+        if (!this._completions.length)
+            return;
+
+        console.assert(this._currentCompletion);
+        if (!this._currentCompletion)
+            return;
+
+        // Commit the current completion if there is only one suggestion.
+        if (this._completions.length === 1) {
+            this._commitCompletionHint();
+            return;
+        }
+
+        var prefixLength = this._prefix.length;
+
+        var commonPrefix = this._completions[0];
+        for (var i = 1; i < this._completions.length; ++i) {
+            var completion = this._completions[i];
+            var lastIndex = Math.min(commonPrefix.length, completion.length);
+            for (var j = prefixLength; j < lastIndex; ++j) {
+                if (commonPrefix[j] !== completion[j]) {
+                    commonPrefix = commonPrefix.substr(0, j);
+                    break;
+                }
+            }
+        }
+
+        // Commit the current completion if there is no common prefix that is longer.
+        if (commonPrefix === this._prefix) {
+            this._commitCompletionHint();
+            return;
+        }
+
+        // Set the prefix to the common prefix so _applyCompletionHint will insert the
+        // common prefix as commited text. Adjust _endOffset to match the new prefix.
+        this._prefix = commonPrefix;
+        this._endOffset = this._startOffset + commonPrefix.length;
+
+        this._applyCompletionHint(this._currentCompletion);
+    },
+
+    _handleChange: function(codeMirror, change)
+    {
+        if (this.isCompletionChange(change))
+            return;
+
+        this._ignoreNextCursorActivity = true;
+
+        if (!change.origin || change.origin.charAt(0) !== "+") {
+            this.hideCompletions();
+            return;
+        }
+
+        // Only complete on delete if we are showing completions already.
+        if (change.origin === "+delete" && !this._hasPendingCompletion())
+            return;
+
+        if (this._completionDelayTimeout) {
+            clearTimeout(this._completionDelayTimeout);
+            delete this._completionDelayTimeout;
+        }
+
+        if (this._hasPendingCompletion())
+            this._completeAtCurrentPosition(false);
+        else
+            this._completionDelayTimeout = setTimeout(this._completeAtCurrentPosition.bind(this, false), WebInspector.CodeMirrorCompletionController.CompletionTypingDelay);
+    },
+
+    _handleCursorActivity: function(codeMirror)
+    {
+        if (this._ignoreChange)
+            return;
+
+        if (this._ignoreNextCursorActivity) {
+            delete this._ignoreNextCursorActivity;
+            return;
+        }
+
+        this.hideCompletions();
+    },
+
+    _handleHideKey: function(codeMirror)
+    {
+        this.hideCompletions();
+
+        return CodeMirror.Pass;
+    },
+
+    _handleHideAction: function(codeMirror)
+    {
+        // Clicking a suggestion causes the editor to blur. We don't want to hide completions in this case.
+        if (this.isHandlingClickEvent())
+            return;
+
+        this.hideCompletions();
+    }
+};
+
+WebInspector.CodeMirrorCompletionController.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.css b/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.css
new file mode 100644
index 000000000..d67d6b361
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.CodeMirror.drag-to-adjust .CodeMirror-lines {
+    cursor: col-resize;
+}
diff --git a/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.js b/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.js
new file mode 100644
index 000000000..52a0095fa
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.js
@@ -0,0 +1,234 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CodeMirrorDragToAlterNumberController = function(codeMirror)
+{
+    this._codeMirror = codeMirror;
+    this._active = false;
+    this._dragging = false;
+    this._enabled = false;
+    this._tracksMouseClickAndDrag = false;
+};
+
+WebInspector.CodeMirrorDragToAlterNumberController.StyleClassName = "drag-to-adjust";
+
+WebInspector.CodeMirrorDragToAlterNumberController.prototype = {
+    constructor: WebInspector.CodeMirrorDragToAlterNumberController,
+
+    // Public
+
+    set enabled(enabled)
+    {
+        if (this._enabled === enabled)
+            return;
+
+        this._element = this._codeMirror.getWrapperElement();
+
+        if (enabled) {
+            this._element.addEventListener("mouseenter", this);
+            this._element.addEventListener("mouseleave", this);
+        } else {
+            this._element.removeEventListener("mouseenter", this);
+            this._element.removeEventListener("mouseleave", this);
+        }
+    },
+
+    // Protected
+
+    handleEvent: function(event)
+    {
+        switch(event.type) {
+        case "mouseenter":
+            if (!this._dragging)
+                this._setActive(true);
+            break;
+        case "mouseleave":
+            if (!this._dragging)
+                this._setActive(false);
+            break;
+        case "mousemove":
+            if (this._dragging)
+                this._mouseWasDragged(event);
+            else
+                this._mouseMoved(event);
+            break;
+        case "mousedown":
+            this._mouseWasPressed(event);
+            break;
+        case "mouseup":
+            this._mouseWasReleased(event);
+            break;
+        case "contextmenu":
+            event.preventDefault();
+            break;
+        }
+    },
+
+    // Private
+
+    _setActive: function(active)
+    {
+        if (this._active === active || this._codeMirror.getOption("readOnly"))
+            return;
+
+        if (active) {
+            WebInspector.notifications.addEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._modifiersDidChange, this);
+            this._element.addEventListener("mousemove", this);
+        } else {
+            WebInspector.notifications.removeEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._modifiersDidChange, this);
+            this._element.removeEventListener("mousemove", this);
+            this._hoveredTokenInfo = null;
+            this._setTracksMouseClickAndDrag(false);
+        }
+
+        this._active = active;
+    },
+
+    _setDragging: function(dragging)
+    {
+        if (this._dragging === dragging)
+            return;
+        
+        console.assert(window.event);
+        if (dragging)
+            WebInspector.elementDragStart(this._element, this, this, window.event, "col-resize", window);
+        else
+            WebInspector.elementDragEnd(window.event);
+
+        this._dragging = dragging;
+    },
+
+    _setTracksMouseClickAndDrag: function(tracksMouseClickAndDrag)
+    {
+        if (this._tracksMouseClickAndDrag === tracksMouseClickAndDrag)
+            return;
+        
+        if (tracksMouseClickAndDrag) {
+            this._element.classList.add(WebInspector.CodeMirrorDragToAlterNumberController.StyleClassName);
+            window.addEventListener("mousedown", this, true);
+            window.addEventListener("contextmenu", this, true);
+        } else {
+            this._element.classList.remove(WebInspector.CodeMirrorDragToAlterNumberController.StyleClassName);
+            window.removeEventListener("mousedown", this, true);
+            window.removeEventListener("contextmenu", this, true);
+            this._setDragging(false);
+        }
+        
+        this._tracksMouseClickAndDrag = tracksMouseClickAndDrag;
+    },
+
+    _modifiersDidChange: function(event)
+    {
+        this._setTracksMouseClickAndDrag(this._hoveredTokenInfo && this._hoveredTokenInfo.containsNumber && WebInspector.modifierKeys.altKey);
+    },
+    
+    _mouseMoved: function(event)
+    {
+        var position = this._codeMirror.coordsChar({left: event.pageX, top: event.pageY});
+        var token = this._codeMirror.getTokenAt(position);
+
+        if (!token || !token.type || !token.string) {
+            if (this._hoveredTokenInfo)
+                this._reset();
+            return;
+        }
+
+        // Stop right here if we're hovering the same token as we were last time.
+        if (this._hoveredTokenInfo && this._hoveredTokenInfo.line === position.line &&
+            this._hoveredTokenInfo.token.start === token.start && this._hoveredTokenInfo.token.end === token.end)
+            return;
+
+        var containsNumber = token.type.indexOf("number") !== -1;
+        this._hoveredTokenInfo = {
+            token: token,
+            line: position.line,
+            containsNumber: containsNumber,
+            startPosition: {
+                ch: token.start,
+                line: position.line
+            },
+            endPosition: {
+                ch: token.end,
+                line: position.line
+            }
+        };
+
+        this._setTracksMouseClickAndDrag(containsNumber && event.altKey);
+    },
+    
+    _mouseWasPressed: function(event)
+    {
+        this._lastX = event.screenX;
+
+        this._setDragging(true);
+
+        event.preventDefault();
+        event.stopPropagation();
+    },
+
+    _mouseWasDragged: function(event)
+    {
+        var x = event.screenX;
+        var amount = x - this._lastX;
+
+        if (Math.abs(amount) < 1)
+            return;
+
+        this._lastX = x;
+
+        if (event.ctrlKey)
+            amount /= 10;
+        else if (event.shiftKey)
+            amount *= 10;
+
+        this._codeMirror.alterNumberInRange(amount, this._hoveredTokenInfo.startPosition, this._hoveredTokenInfo.endPosition, false);
+
+        event.preventDefault();
+        event.stopPropagation();
+    },
+
+    _mouseWasReleased: function(event)
+    {
+        this._setDragging(false);
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        this._reset();
+    },
+    
+    _reset: function()
+    {
+        this._hoveredTokenInfo = null;
+        this._setTracksMouseClickAndDrag(false);
+        this._element.classList.remove(WebInspector.CodeMirrorDragToAlterNumberController.StyleClassName);
+    }
+};
+
+CodeMirror.defineOption("dragToAdjustNumbers", true, function(codeMirror, value, oldValue) {
+    if (!codeMirror.dragToAlterNumberController)
+        codeMirror.dragToAlterNumberController = new WebInspector.CodeMirrorDragToAlterNumberController(codeMirror);
+    codeMirror.dragToAlterNumberController.enabled = value;
+});
diff --git a/Source/WebInspectorUI/UserInterface/CodeMirrorFormatters.js b/Source/WebInspectorUI/UserInterface/CodeMirrorFormatters.js
new file mode 100644
index 000000000..81c8155e7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CodeMirrorFormatters.js
@@ -0,0 +1,403 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// In the inspector token types have been modified to include extra mode information
+// after the actual token type. So we can't do token === "foo". So instead we do
+// /\bfoo\b/.test(token).
+
+CodeMirror.extendMode("javascript", {
+    shouldHaveSpaceBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!token) {
+            if (content === "(") // Most keywords like "if (" but not "function(" or "typeof(".
+                return lastToken && /\bkeyword\b/.test(lastToken) && (lastContent !== "function" && lastContent !== "typeof" && lastContent !== "instanceof");
+            if (content === ":") // Ternary.
+                return (state.lexical.type === "stat" || state.lexical.type === ")");
+            if (content === "!") // Unary ! should not be confused with "!=".
+                return false;
+            return "+-/*&&||!===+=-=>=<=?".indexOf(content) >= 0; // Operators.
+        }
+
+        if (isComment)
+            return true;
+
+        if (/\bkeyword\b/.test(token)) { // Most keywords require spaces before them, unless a '}' can come before it.
+            if (content === "else" || content === "catch" || content === "finally")
+                return lastContent === "}";
+            return false;
+        }
+
+        return false;
+    },
+
+    shouldHaveSpaceAfterLastToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (lastToken && /\bkeyword\b/.test(lastToken)) {  // Most keywords require spaces after them, unless a '{' or ';' can come after it.
+            if (lastContent === "else")
+                return true;
+            if (lastContent === "catch")
+                return true;
+            if (lastContent === "return")
+                return content !== ";";
+            if (lastContent === "throw")
+                return true;
+            if (lastContent === "try")
+                return true;
+            if (lastContent === "finally")
+                return true;
+            if (lastContent === "do")
+                return true;
+            return false;
+        }
+
+        if (lastToken && /\bcomment\b/.test(lastToken)) // Embedded /* comment */.
+            return true;
+        if (lastContent === ")") // "){".
+            return content === "{";
+        if (lastContent === ";") // In for loop.
+            return state.lexical.type === ")";
+        if (lastContent === "!") // Unary ! should not be confused with "!=".
+            return false;
+
+        return ",+-/*&&||:!===+=-=>=<=?".indexOf(lastContent) >= 0; // Operators.
+    },
+
+    newlinesAfterToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!token) {
+            if (content === ",") // In object literals, like in {a:1,b:2}, but not in param lists or vardef lists.
+                return state.lexical.type === "}" ? 1 : 0;
+            if (content === ";") // Everywhere except in for loop conditions.
+                return state.lexical.type !== ")" ? 1 : 0;
+            if (content === ":" && state.lexical.type === "}" && state.lexical.prev && state.lexical.prev.type === "form") // Switch case/default.
+                return 1;
+            return content.length === 1 && "{}".indexOf(content) >= 0 ? 1 : 0; // After braces.
+        }
+
+        if (isComment)
+            return 1;
+
+        return 0;
+    },
+
+    removeLastNewline: function(lastToken, lastContent, token, state, content, isComment, firstTokenOnLine)
+    {
+        if (!token) {
+            if (content === "}") // "{}".
+                return lastContent === "{";
+            if (content === ";") // "x = {};" or ";;".
+                return "};".indexOf(lastContent) >= 0;
+            if (content === ":") // Ternary.
+                return lastContent === "}" && (state.lexical.type === "stat" || state.lexical.type === ")");
+            if (",().".indexOf(content) >= 0) // "})", "}.bind", "function() { ... }()", or "}, false)".
+                return lastContent === "}";
+            return false;
+        }
+
+        if (isComment) { // Comment after semicolon.
+            if (!firstTokenOnLine && lastContent === ";")
+                return true;
+            return false;
+        }
+
+        if (/\bkeyword\b/.test(token)) {
+            if (content === "else" || content === "catch" || content === "finally") // "} else", "} catch", "} finally"
+                return lastContent === "}";
+            return false;
+        }
+
+        return false;
+    },
+
+    indentAfterToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return content === "{" || content === "case" || content === "default";
+    },
+
+    newlineBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (state._jsPrettyPrint.shouldIndent)
+            return true;
+
+        return content === "}" && lastContent !== "{"; // "{}"
+    },
+
+    indentBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (state._jsPrettyPrint.shouldIndent)
+            return true;
+
+        return false;
+    },
+
+    dedentsBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        var dedent = 0;
+
+        if (state._jsPrettyPrint.shouldDedent)
+            dedent += state._jsPrettyPrint.dedentSize;
+
+        if (!token && content === "}")
+            dedent += 1;
+        else if (token && /\bkeyword\b/.test(token) && (content === "case" || content === "default"))
+            dedent += 1;
+
+        return dedent;
+    },
+
+    modifyStateForTokenPre: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!state._jsPrettyPrint) {
+            state._jsPrettyPrint = {
+                indentCount: 0,       // How far have we indented because of single statement blocks.
+                shouldIndent: false,  // Signal we should indent on entering a single statement block.
+                shouldDedent: false,  // Signal we should dedent on leaving a single statement block.
+                dedentSize: 0,        // How far we should dedent when leaving a single statement block.
+                lastIfIndentCount: 0, // Keep track of the indent the last time we saw an if without braces.
+                openBraceStartMarkers: [],  // Keep track of non-single statement blocks.
+                openBraceTrackingCount: -1, // Keep track of "{" and "}" in non-single statement blocks.
+            };
+        }
+
+        // - Entering:
+        //   - Preconditions:
+        //     - last lexical was a "form" we haven't encountered before
+        //     - last content was ")", "else", or "do"
+        //     - current lexical is not ")" (in an expression or condition)
+        //   - Cases:
+        //     1. "{"
+        //       - indent +0
+        //       - save this indent size so when we encounter the "}" we know how far to dedent
+        //     2. "else if"
+        //       - indent +0 and do not signal to add a newline and indent
+        //       - mark the last if location so when we encounter an "else" we know how far to dedent
+        //       - mark the lexical state so we know we are inside a single statement block
+        //     3. Token without brace.
+        //       - indent +1 and signal to add a newline and indent
+        //       - mark the last if location so when we encounter an "else" we know how far to dedent
+        //       - mark the lexical state so we know we are inside a single statement block
+        if (!isComment && state.lexical.prev && state.lexical.prev.type === "form" && !state.lexical.prev._jsPrettyPrintMarker && (lastContent === ")" || lastContent === "else" || lastContent === "do") && (state.lexical.type !== ")")) {
+            if (content === "{") {
+                // Save the state at the opening brace so we can return to it when we see "}".
+                var savedState = {indentCount:state._jsPrettyPrint.indentCount, openBraceTrackingCount:state._jsPrettyPrint.openBraceTrackingCount};
+                state._jsPrettyPrint.openBraceStartMarkers.push(savedState);
+                state._jsPrettyPrint.openBraceTrackingCount = 1;
+            } else if (state.lexical.type !== "}") {
+                // Increase the indent count. Signal for a newline and indent if needed.
+                if (!(lastContent === "else" && content === "if")) {
+                    state._jsPrettyPrint.indentCount++;
+                    state._jsPrettyPrint.shouldIndent = true;
+                }
+                state.lexical.prev._jsPrettyPrintMarker = true;
+                if (state._jsPrettyPrint.enteringIf)
+                    state._jsPrettyPrint.lastIfIndentCount = state._jsPrettyPrint.indentCount - 1;
+            }
+        }
+
+        // - Leaving:
+        //   - Preconditions:
+        //     - we must be indented
+        //     - ignore ";", wait for the next token instead.
+        //   - Cases:
+        //     1. "else"
+        //       - dedent to the last "if"
+        //     2. "}" and all braces we saw are balanced
+        //       - dedent to the last "{"
+        //     3. Token without a marker on the stack
+        //       - dedent all the way
+        else if (state._jsPrettyPrint.indentCount) {
+            console.assert(!state._jsPrettyPrint.shouldDedent);
+            console.assert(!state._jsPrettyPrint.dedentSize);
+
+            // Track "{" and "}" to know when the "}" is really closing a block.
+            if (!isComment) {
+                if (content === "{")
+                    state._jsPrettyPrint.openBraceTrackingCount++;
+                else if (content === "}")
+                    state._jsPrettyPrint.openBraceTrackingCount--;
+            }
+
+            if (content === ";") {
+                // Ignore.
+            } else if (content === "else") {
+                // Dedent to the last "if".
+                if (lastContent !== "}") {
+                    state._jsPrettyPrint.shouldDedent = true;
+                    state._jsPrettyPrint.dedentSize = state._jsPrettyPrint.indentCount - state._jsPrettyPrint.lastIfIndentCount;
+                    state._jsPrettyPrint.lastIfIndentCount = 0;
+                }
+            } else if (content === "}" && !state._jsPrettyPrint.openBraceTrackingCount && state._jsPrettyPrint.openBraceStartMarkers.length) {
+                // Dedent to the last "{".
+                var savedState = state._jsPrettyPrint.openBraceStartMarkers.pop();
+                state._jsPrettyPrint.shouldDedent = true;
+                state._jsPrettyPrint.dedentSize = state._jsPrettyPrint.indentCount - savedState.indentCount;
+                state._jsPrettyPrint.openBraceTrackingCount = savedState.openBraceTrackingCount;
+            } else {
+                // Dedent all the way.
+                var shouldDedent = true;
+                var lexical = state.lexical.prev;
+                while (lexical) {
+                    if (lexical._jsPrettyPrintMarker) {
+                        shouldDedent = false;
+                        break;
+                    }
+                    lexical = lexical.prev;
+                }
+                if (shouldDedent) {
+                    state._jsPrettyPrint.shouldDedent = true;
+                    state._jsPrettyPrint.dedentSize = state._jsPrettyPrint.indentCount;
+                }
+            }
+        }
+
+        // Signal for when we will be entering an if.
+        if (token && state.lexical.type === "form" && state.lexical.prev && state.lexical.prev !== "form" && /\bkeyword\b/.test(token))
+            state._jsPrettyPrint.enteringIf = (content === "if");
+    },
+
+    modifyStateForTokenPost: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (state._jsPrettyPrint.shouldIndent)
+            state._jsPrettyPrint.shouldIndent = false;
+
+        if (state._jsPrettyPrint.shouldDedent) {
+            state._jsPrettyPrint.indentCount -= state._jsPrettyPrint.dedentSize;
+            state._jsPrettyPrint.dedentSize = 0;
+            state._jsPrettyPrint.shouldDedent = false;
+        }
+    }
+});
+
+CodeMirror.extendMode("css-base", {
+    shouldHaveSpaceBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!token) {
+            if (content === "{")
+                return true;
+            return false;
+        }
+
+        if (isComment)
+            return true;
+
+        if (/\bkeyword\b/.test(token)) {
+            if (content.charAt(0) === "!") // "!important".
+                return true;
+            return false;
+        }
+
+        return false;
+    },
+
+    shouldHaveSpaceAfterLastToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!lastToken) {
+            if (lastContent === ",")
+                return true;
+            return false;
+        }
+
+        if (/\boperator\b/.test(lastToken)) {
+            if (lastContent === ":") // Space in "prop: value" but not in a selectors "a:link" or "div::after" or media queries "(max-device-width:480px)".
+                return state.stack.lastValue === "propertyValue";
+            return false;
+        }
+
+        if (/\bcomment\b/.test(lastToken))
+            return true;
+
+        return false;
+    },
+
+    newlinesAfterToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!token) {
+            if (content === ";")
+                return 1;
+            if (content === ",") { // "a,b,c,...,z{}" rule list at top level or in @media top level and only if the line length will be large.
+                if ((!state.stack.length || state.stack.lastValue === "@media{") && state._cssPrettyPrint.lineLength > 60) {
+                    state._cssPrettyPrint.lineLength = 0;
+                    return 1;
+                }
+                return 0;
+            }
+            if (content === "{")
+                return 1;
+            if (content === "}") // 2 newlines between rule declarations.
+                return 2;
+            return 0;
+        }
+
+        if (isComment)
+            return 1;
+
+        return 0;
+    },
+
+    removeLastNewline: function(lastToken, lastContent, token, state, content, isComment, firstTokenOnLine)
+    {
+        if (isComment) { // Comment after semicolon.
+            if (!firstTokenOnLine && lastContent === ";")
+                return true;
+            return false;
+        }
+
+        return content === "}" && (lastContent === "{" || lastContent === "}"); // "{}" and "}\n}" when closing @media.
+    },
+
+    indentAfterToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return content === "{";
+    },
+
+    newlineBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return content === "}" && (lastContent !== "{" && lastContent !== "}"); // "{}" and "}\n}" when closing @media.
+    },
+
+    indentBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return false;
+    },
+
+    dedentsBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return content === "}" ? 1 : 0;
+    },
+
+    modifyStateForTokenPost: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!state._cssPrettyPrint)
+            state._cssPrettyPrint = {lineLength: 0};
+
+        // In order insert newlines in selector lists we need keep track of the length of the current line.
+        // This isn't exact line length, only the builder knows that, but it is good enough to get an idea.
+        // If we are at a top level, keep track of the current line length, otherwise we reset to 0.
+        if (!state.stack.length || state.stack.lastValue === "@media{")
+            state._cssPrettyPrint.lineLength += content.length;
+        else
+            state._cssPrettyPrint.lineLength = 0;
+    }
+});
diff --git a/Source/WebInspectorUI/UserInterface/CodeMirrorOverrides.css b/Source/WebInspectorUI/UserInterface/CodeMirrorOverrides.css
new file mode 100644
index 000000000..d77dc9a0e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CodeMirrorOverrides.css
@@ -0,0 +1,83 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.CodeMirror {
+    z-index: 0;
+}
+
+.CodeMirror,
+.CodeMirror * {
+    box-sizing: content-box;
+}
+
+.CodeMirror .CodeMirror-lines {
+ /* One pixel bottom padding needed to show the bottom border for matching brackets and search matches. */
+    padding: 0 0 1px 0;
+}
+
+.CodeMirror pre {
+    padding: 1px 3px 1px 7px;
+}
+
+.CodeMirror .CodeMirror-selected {
+    background-color: rgb(212, 212, 212);
+}
+
+.CodeMirror.CodeMirror-focused .CodeMirror-selected {
+    background-color: highlight;
+}
+
+.CodeMirror .CodeMirror-cursor {
+    pointer-events: none;
+}
+
+.CodeMirror .CodeMirror-lines .CodeMirror-matchingbracket {
+    color: inherit;
+    background-color: rgba(100, 130, 235, 0.2);
+    border-bottom: 1px dotted rgb(20, 20, 235);
+}
+
+.CodeMirror .CodeMirror-lines .CodeMirror-nonmatchingbracket {
+    color: inherit;
+    background-color: rgba(235, 30, 20, 0.2);
+    border-bottom: 1px dotted rgb(235, 30, 20);
+}
+
+.CodeMirror .CodeMirror-gutters {
+    background-color: rgb(247, 247, 247);
+    border-right: 1px solid rgb(231, 231, 231);
+}
+
+.CodeMirror .CodeMirror-linenumber {
+    padding: 0 2px;
+    min-width: 21px;
+
+    color: rgb(146, 146, 146);
+
+    font-size: 9px;
+    line-height: 13px;
+    font-family: "Lucida Grande", sans-serif;
+    text-align: right;
+}
diff --git a/Source/WebInspectorUI/UserInterface/CodeMirrorTokenTrackingController.css b/Source/WebInspectorUI/UserInterface/CodeMirrorTokenTrackingController.css
new file mode 100644
index 000000000..516755d1c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CodeMirrorTokenTrackingController.css
@@ -0,0 +1,31 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.CodeMirror .jump-to-symbol-highlight {
+    color: blue !important;
+    text-decoration: underline !important;
+    cursor: pointer !important;
+    -webkit-text-stroke-width: 0 !important;
+}
diff --git a/Source/WebInspectorUI/UserInterface/CodeMirrorTokenTrackingController.js b/Source/WebInspectorUI/UserInterface/CodeMirrorTokenTrackingController.js
new file mode 100644
index 000000000..2a93cf79e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CodeMirrorTokenTrackingController.js
@@ -0,0 +1,404 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CodeMirrorTokenTrackingController = function(codeMirror, delegate)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(codeMirror);
+
+    this._codeMirror = codeMirror;
+    this._delegate = delegate || null;
+    this._mode = WebInspector.CodeMirrorTokenTrackingController.Mode.NonSymbolTokens;
+
+    this._mouseOverDelayDuration = 0;
+    this._mouseOutReleaseDelayDuration = 0;
+    this._classNameForHighlightedRange = null;
+
+    this._tracking = false;
+    this._hoveredTokenInfo = null;
+};
+
+WebInspector.CodeMirrorTokenTrackingController.JumpToSymbolHighlightStyleClassName = "jump-to-symbol-highlight";
+
+WebInspector.CodeMirrorTokenTrackingController.Mode = {
+    NonSymbolTokens: "non-symbol-tokens",
+    JavaScriptExpression: "javascript-expression",
+}
+
+WebInspector.CodeMirrorTokenTrackingController.prototype = {
+    constructor: WebInspector.CodeMirrorTokenTrackingController,
+
+    // Public
+
+    get delegate()
+    {
+        return this._delegate;
+    },
+
+    set delegate(x)
+    {
+        this._delegate = x;
+    },
+
+    get mode()
+    {
+        return this._mode;
+    },
+
+    set mode(x)
+    {
+        var oldMode = this._mode;
+
+        this._mode = x || WebInspector.CodeMirrorTokenTrackingController.Mode.NonSymbolTokens;
+
+        if (oldMode !== this._mode && this._tracking && this._hoveredTokenInfo)
+            this._processNewHoveredToken();
+    },
+
+    get mouseOverDelayDuration()
+    {
+        return this._mouseOverDelayDuration;
+    },
+
+    set mouseOverDelayDuration(x)
+    {
+        console.assert(x >= 0);
+        this._mouseOverDelayDuration = Math.max(x, 0);
+    },
+
+    get mouseOutReleaseDelayDuration()
+    {
+        return this._mouseOutReleaseDelayDuration;
+    },
+
+    set mouseOutReleaseDelayDuration(x)
+    {
+        console.assert(x >= 0);
+        this._mouseOutReleaseDelayDuration = Math.max(x, 0);
+    },
+
+    get classNameForHighlightedRange()
+    {
+        return this._classNameForHighlightedRange;
+    },
+
+    set classNameForHighlightedRange(x)
+    {
+        this._classNameForHighlightedRange = x || null;
+    },
+
+    get tracking()
+    {
+        return this._tracking;
+    },
+
+    get candidate()
+    {
+        return this._candidate;
+    },
+
+    startTracking: function()
+    {
+        console.assert(!this._tracking);
+        if (this._tracking)
+            return;
+
+        this._tracking = true;
+
+        var wrapper = this._codeMirror.getWrapperElement();
+        wrapper.addEventListener("mousemove", this, true);
+        wrapper.addEventListener("mouseout", this, false);
+        wrapper.addEventListener("mousedown", this, false);
+        wrapper.addEventListener("mouseup", this, false);
+        window.addEventListener("blur", this, true);
+    },
+
+    stopTracking: function()
+    {
+        console.assert(this._tracking);
+        if (!this._tracking)
+            return;
+
+        this._tracking = false;
+
+        var wrapper = this._codeMirror.getWrapperElement();
+        wrapper.removeEventListener("mousemove", this, true);
+        wrapper.removeEventListener("mouseout", this, false);
+        wrapper.removeEventListener("mousedown", this, false);
+        wrapper.removeEventListener("mouseup", this, false);
+        window.removeEventListener("blur", this, true);
+        window.removeEventListener("mousemove", this, true);
+
+        clearTimeout(this._tokenHoverTimer);
+        delete this._selectionMayBeInProgress;
+        delete this._hoveredTokenInfo;
+    },
+
+    highlightRange: function(range)
+    {
+        this.removeHighlightedRange();
+
+        var className = this._classNameForHighlightedRange || "";
+        this._codeMirrorMarkedText = this._codeMirror.markText(range.start, range.end, {className: className});
+
+        window.addEventListener("mousemove", this, true);
+    },
+
+    removeHighlightedRange: function()
+    {
+        if (!this._codeMirrorMarkedText)
+            return;
+
+        this._codeMirrorMarkedText.clear();
+        delete this._codeMirrorMarkedText;
+
+        window.removeEventListener("mousemove", this, true);
+    },
+
+    boundsForRange: function(range)
+    {
+        var firstCharCoords = this._codeMirror.cursorCoords(range.start);
+        var lastCharCoords = this._codeMirror.cursorCoords(range.end);
+        return new WebInspector.Rect(firstCharCoords.left, firstCharCoords.top, lastCharCoords.right - firstCharCoords.left, firstCharCoords.bottom - firstCharCoords.top);
+    },
+
+    // Private
+
+    handleEvent: function(event)
+    {
+        switch (event.type) {
+        case "mousemove":
+            if (event.currentTarget === window)
+                this._mouseMovedWithMarkedText(event);
+            else
+                this._mouseMovedOverEditor(event);
+            break;
+        case "mouseout":
+            // Only deal with a mouseout event that has the editor wrapper as the target.
+            if (!event.currentTarget.contains(event.relatedTarget))
+                this._mouseMovedOutOfEditor(event);
+            break;
+        case "mousedown":
+            this._mouseButtonWasPressedOverEditor(event);
+            break;
+        case "mouseup":
+            this._mouseButtonWasReleasedOverEditor(event);
+            break;
+        case "blur":
+            this._windowLostFocus(event);
+            break;
+        }
+    },
+
+    _mouseMovedWithMarkedText: function(event)
+    {
+        var shouldRelease = !event.target.classList.contains(this._classNameForHighlightedRange);
+        if (shouldRelease && this._delegate && typeof this._delegate.tokenTrackingControllerCanReleaseHighlightedRange === "function")
+            shouldRelease = this._delegate.tokenTrackingControllerCanReleaseHighlightedRange(this, event.target);
+
+        if (shouldRelease) {
+            if (!this._markedTextMouseoutTimer)
+                this._markedTextMouseoutTimer = setTimeout(this._markedTextIsNoLongerHovered.bind(this), this._mouseOutReleaseDelayDuration);
+            return;
+        }
+
+        clearTimeout(this._markedTextMouseoutTimer);
+        delete this._markedTextMouseoutTimer;
+    },
+
+    _markedTextIsNoLongerHovered: function()
+    {
+        if (this._delegate && typeof this._delegate.tokenTrackingControllerHighlightedRangeReleased === "function")
+            this._delegate.tokenTrackingControllerHighlightedRangeReleased(this);
+        delete this._markedTextMouseoutTimer;
+    },
+
+    _mouseMovedOverEditor: function(event)
+    {
+        // Get the position in the text and the token at that position.
+        var position = this._codeMirror.coordsChar({left: event.pageX, top: event.pageY});
+        var token = this._codeMirror.getTokenAt(position);
+
+        if (!token || !token.type || !token.string) {
+            clearTimeout(this._tokenHoverTimer);
+            delete this._hoveredTokenInfo;
+            return;
+        }
+
+        // Stop right here if we're hovering the same token as we were last time.
+        if (this._hoveredTokenInfo &&
+            this._hoveredTokenInfo.position.line === position.line &&
+            this._hoveredTokenInfo.token.start === token.start &&
+            this._hoveredTokenInfo.token.end === token.end)
+            return;
+
+        // We have a new hovered token.
+        var innerMode = CodeMirror.innerMode(this._codeMirror.getMode(), token.state);
+        var codeMirrorModeName = innerMode.mode.alternateName || innerMode.mode.name;
+        this._hoveredTokenInfo = {
+            token: token,
+            position: position,
+            innerMode: innerMode,
+            modeName: codeMirrorModeName
+        };
+
+        clearTimeout(this._tokenHoverTimer);
+
+        if (this._codeMirrorMarkedText || !this._mouseOverDelayDuration)
+            this._processNewHoveredToken();
+        else
+            this._tokenHoverTimer = setTimeout(this._processNewHoveredToken.bind(this), this._mouseOverDelayDuration);
+    },
+
+    _mouseMovedOutOfEditor: function(event)
+    {
+        clearTimeout(this._tokenHoverTimer);
+        delete this._hoveredTokenInfo;
+        delete this._selectionMayBeInProgress;
+    },
+
+    _mouseButtonWasPressedOverEditor: function(event)
+    {
+        this._selectionMayBeInProgress = true;
+    },
+
+    _mouseButtonWasReleasedOverEditor: function(event)
+    {
+        delete this._selectionMayBeInProgress;
+        this._mouseMovedOverEditor(event);
+
+        if (this._codeMirrorMarkedText && this._hoveredTokenInfo) {
+            var position = this._codeMirror.coordsChar({left: event.pageX, top: event.pageY});
+            var marks = this._codeMirror.findMarksAt(position);
+            for (var i = 0; i < marks.length; ++i) {
+                if (marks[i] === this._codeMirrorMarkedText) {
+                    if (this._delegate && typeof this._delegate.tokenTrackingControllerHighlightedRangeWasClicked === "function") {
+                        // Trigger the clicked delegate asynchronously, letting the editor complete handling of the click.
+                        setTimeout(function() { this._delegate.tokenTrackingControllerHighlightedRangeWasClicked(this); }.bind(this), 0);
+                    }
+                    break;
+                }
+            }
+        }
+    },
+
+    _windowLostFocus: function(event)
+    {
+        delete this._selectionMayBeInProgress;
+    },
+
+    _processNewHoveredToken: function()
+    {
+        console.assert(this._hoveredTokenInfo);
+
+        if (this._selectionMayBeInProgress)
+            return;
+
+        this._candidate = null;
+
+        switch (this._mode) {
+        case WebInspector.CodeMirrorTokenTrackingController.Mode.NonSymbolTokens:
+            this._candidate = this._processNonSymbolToken();
+            break;
+        case WebInspector.CodeMirrorTokenTrackingController.Mode.JavaScriptExpression:
+            this._candidate = this._processJavaScriptExpression();
+            break;
+        }
+
+        if (!this._candidate)
+            return;
+
+        clearTimeout(this._markedTextMouseoutTimer);
+        delete this._markedTextMouseoutTimer;
+
+        if (this._delegate && typeof this._delegate.tokenTrackingControllerNewHighlightCandidate === "function")
+            this._delegate.tokenTrackingControllerNewHighlightCandidate(this, this._candidate);
+    },
+
+    _processNonSymbolToken: function()
+    {
+        // Ignore any symbol tokens.
+        var type = this._hoveredTokenInfo.token.type;
+        if (!type)
+            return null;
+
+        var startPosition = {line: this._hoveredTokenInfo.position.line, ch: this._hoveredTokenInfo.token.start};
+        var endPosition = {line: this._hoveredTokenInfo.position.line, ch: this._hoveredTokenInfo.token.end};
+
+        return {
+            hoveredToken: this._hoveredTokenInfo.token,
+            hoveredTokenRange: {start: startPosition, end: endPosition},
+        };
+    },
+
+    _processJavaScriptExpression: function()
+    {
+        // Only valid within JavaScript.
+        if (this._hoveredTokenInfo.modeName !== "javascript")
+            return null;
+
+        // We only handle vars, definitions, properties, and the keyword 'this'.
+        var type = this._hoveredTokenInfo.token.type;
+        var isProperty = type.indexOf("property") !== -1;
+        var isKeyword = type.indexOf("keyword") !== -1;
+        if (!isProperty && !isKeyword && type.indexOf("variable") === -1 && type.indexOf("def") === -1)
+            return null;
+
+        // Not object literal properties.
+        var state = this._hoveredTokenInfo.innerMode.state;
+        if (isProperty && state.lexical && state.lexical.type === "}")
+            return null;
+
+        // Only the "this" keyword.
+        if (isKeyword && this._hoveredTokenInfo.token.string !== "this")
+            return null;
+
+        // Work out the full hovered expression.
+        var expression = this._hoveredTokenInfo.token.string;
+        var expressionStartPosition = {line: this._hoveredTokenInfo.position.line, ch: this._hoveredTokenInfo.token.start};
+        var startPosition = {line: this._hoveredTokenInfo.position.line, ch: this._hoveredTokenInfo.token.start};
+        var endPosition = {line: this._hoveredTokenInfo.position.line, ch: this._hoveredTokenInfo.token.end};
+        while (true) {
+            var token = this._codeMirror.getTokenAt(expressionStartPosition);
+            var isDot = token && !token.type && token.string === ".";
+            var isExpression = token && token.type && token.type.indexOf("m-javascript") !== -1;
+            if (!isDot && !isExpression)
+                break;
+            expression = token.string + expression;
+            expressionStartPosition.ch = token.start;
+        }
+
+        // Return the candidate for this token and expression.
+        return {
+            hoveredToken: this._hoveredTokenInfo.token,
+            hoveredTokenRange: {start: startPosition, end: endPosition},
+            expression: expression,
+            expressionRange: {start: expressionStartPosition, end: endPosition},
+        };
+    }
+};
+
+WebInspector.CodeMirrorCompletionController.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Color.js b/Source/WebInspectorUI/UserInterface/Color.js
new file mode 100644
index 000000000..086dc1ba0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Color.js
@@ -0,0 +1,851 @@
+/*
+ * Copyright (C) 2009, 2013 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ */
+WebInspector.Color = function(str)
+{
+    this.value = str;
+    this._parse();
+}
+
+WebInspector.Color.Format = {
+    Original: "color-format-original",
+    Nickname: "color-format-nickname",
+    HEX: "color-format-hex",
+    ShortHEX: "color-format-short-hex",
+    RGB: "color-format-rgb",
+    RGBA: "color-format-rgba",
+    HSL: "color-format-hsl",
+    HSLA: "color-format-hsla"
+};
+
+/**
+ * @param {number=} a
+ */
+WebInspector.Color.fromRGBA = function(r, g, b, a)
+{
+    return new WebInspector.Color("rgba(" + r + "," + g + "," + b + "," + (typeof a === "undefined" ? 1 : a) + ")");
+}
+
+WebInspector.Color.fromRGB = function(r, g, b)
+{
+    return new WebInspector.Color("rgb(" + r + "," + g + "," + b + ")");
+}
+
+WebInspector.Color.prototype = {
+    nextFormat: function(format)
+    {
+        format = format || this.format;
+
+        switch (format) {
+        case WebInspector.Color.Format.Original:
+            return this.simple ? WebInspector.Color.Format.RGB : WebInspector.Color.Format.RGBA;
+
+        case WebInspector.Color.Format.RGB:
+        case WebInspector.Color.Format.RGBA:
+            return this.simple ? WebInspector.Color.Format.HSL : WebInspector.Color.Format.HSLA;
+
+        case WebInspector.Color.Format.HSL:
+        case WebInspector.Color.Format.HSLA:
+            if (this.nickname)
+                return WebInspector.Color.Format.Nickname;
+            if (this.simple)
+                return this.hasShortHex() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
+            else
+                return WebInspector.Color.Format.Original;
+
+        case WebInspector.Color.Format.ShortHEX:
+            return WebInspector.Color.Format.HEX;
+
+        case WebInspector.Color.Format.HEX:
+            return WebInspector.Color.Format.Original;
+
+        case WebInspector.Color.Format.Nickname:
+            if (this.simple)
+                return this.hasShortHex() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
+            else
+                return WebInspector.Color.Format.Original;
+
+        default:
+            console.error("Unknown color format.");
+            return null;
+        }
+    },
+
+    /**
+     * @return {string}
+     */
+    get shorthex()
+    {
+        if ("_short" in this)
+            return this._short;
+
+        if (!this.simple)
+            return "";
+
+        var hex = this.hex;
+        if (hex.charAt(0) === hex.charAt(1) && hex.charAt(2) === hex.charAt(3) && hex.charAt(4) === hex.charAt(5))
+            this._short = hex.charAt(0) + hex.charAt(2) + hex.charAt(4);
+        else
+            this._short = hex;
+
+        return this._short;
+    },
+
+    /**
+     * @return {string}
+     */
+    get hex()
+    {
+        if (!this.simple)
+            return "";
+
+        return this._hex;
+    },
+
+    set hex(x)
+    {
+        this._hex = x;
+    },
+
+    /**
+     * @return {Array.<number>}
+     */
+    get rgb()
+    {
+        if (this._rgb)
+            return this._rgb;
+
+        if (this.simple)
+            this._rgb = this._hexToRGB(this.hex);
+        else {
+            var rgba = this.rgba;
+            this._rgb = [rgba[0], rgba[1], rgba[2]];
+        }
+
+        return this._rgb;
+    },
+
+    set rgb(x)
+    {
+        this._rgb = x;
+    },
+
+    /**
+     * @return {Array.<number>}
+     */
+    get hsl()
+    {
+        if (this._hsl)
+            return this._hsl;
+
+        this._hsl = this._rgbToHSL(this.rgb);
+        return this._hsl;
+    },
+
+    set hsl(x)
+    {
+        this._hsl = x;
+    },
+
+    /**
+     * @return {string}
+     */
+    get nickname()
+    {
+        if (typeof this._nickname !== "undefined") // would be set on parse if there was a nickname
+            return this._nickname;
+        else
+            return "";
+    },
+
+    set nickname(x)
+    {
+        this._nickname = x;
+    },
+
+    /**
+     * @return {Array.<number>}
+     */
+    get rgba()
+    {
+        return this._rgba;
+    },
+
+    set rgba(x)
+    {
+        this._rgba = x;
+    },
+
+    /**
+     * @return {Array.<number>}
+     */
+    get hsla()
+    {
+        return this._hsla;
+    },
+
+    set hsla(x)
+    {
+        this._hsla = x;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    hasShortHex: function()
+    {
+        var shorthex = this.shorthex;
+        return (!!shorthex && shorthex.length === 3);
+    },
+
+    /**
+     * @return {string}
+     */
+    toString: function(format)
+    {
+        if (!format)
+            format = this.format;
+
+        switch (format) {
+            case WebInspector.Color.Format.Original:
+                return this.value;
+            case WebInspector.Color.Format.RGB:
+                return "rgb(" + this.rgb.join(", ") + ")";
+            case WebInspector.Color.Format.RGBA:
+                return "rgba(" + this.rgba.join(", ") + ")";
+            case WebInspector.Color.Format.HSL:
+                var hsl = this.hsl;
+                return "hsl(" + hsl[0] + ", " + hsl[1] + "%, " + hsl[2] + "%)";
+            case WebInspector.Color.Format.HSLA:
+                var hsla = this.hsla;
+                return "hsla(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%, " + hsla[3] + ")";
+            case WebInspector.Color.Format.HEX:
+                return "#" + this.hex;
+            case WebInspector.Color.Format.ShortHEX:
+                return "#" + this.shorthex;
+            case WebInspector.Color.Format.Nickname:
+                return this.nickname;
+        }
+
+        throw "invalid color format";
+    },
+
+    /**
+     * @return {Object}
+     */
+    toProtocolRGBA: function()
+    {
+        if (this._protocolRGBA)
+            return this._protocolRGBA;
+
+        var components = this.rgba;
+        if (components)
+            this._protocolRGBA = { r: Number(components[0]), g: Number(components[1]), b: Number(components[2]), a: Number(components[3]) };
+        else {
+            components = this.rgb;
+            this._protocolRGBA = { r: Number(components[0]), g: Number(components[1]), b: Number(components[2]) };
+        }
+        return this._protocolRGBA;
+    },
+
+    /**
+     * @param {number} value
+     * @param {number} min
+     * @param {number} max
+     * @return {number}
+     */
+    _clamp: function(value, min, max)
+    {
+        if (value < min)
+            return min;
+        if (value > max)
+            return max;
+        return value;
+    },
+
+    /**
+     * @param {number|string} rgbValue
+     * @return {number}
+     */
+    _individualRGBValueToFloatValue: function(rgbValue)
+    {
+        if (typeof rgbValue === "number")
+            return this._clamp(rgbValue, 0, 255);
+
+        if (rgbValue.indexOf("%") === -1) {
+            var intValue = parseInt(rgbValue, 10);
+            return this._clamp(intValue, 0, 255);
+        }
+
+        var percentValue = parseFloat(rgbValue);
+        return this._clamp(percentValue, 0, 100) * 2.55;
+    },
+
+    /**
+     * @param {number|string} rgbValue
+     * @return {string}
+     */
+    _individualRGBValueToHexValue: function(rgbValue)
+    {
+        var floatValue = this._individualRGBValueToFloatValue(rgbValue);
+        var hex = Math.round(floatValue).toString(16);
+        if (hex.length === 1)
+            hex = "0" + hex;
+        return hex;
+    },
+
+    /**
+     * @param {Array.<string>} rgb
+     * @return {string}
+     */
+    _rgbStringsToHex: function(rgb)
+    {
+        var r = this._individualRGBValueToHexValue(rgb[0]);
+        var g = this._individualRGBValueToHexValue(rgb[1]);
+        var b = this._individualRGBValueToHexValue(rgb[2]);
+        return (r + g + b).toUpperCase();
+    },
+
+    /**
+     * @param {Array.<number>} rgb
+     * @return {string}
+     */
+    _rgbToHex: function(rgb)
+    {
+        var r = this._individualRGBValueToHexValue(rgb[0]);
+        var g = this._individualRGBValueToHexValue(rgb[1]);
+        var b = this._individualRGBValueToHexValue(rgb[2]);
+        return (r + g + b).toUpperCase();
+    },
+
+    /**
+     * @param {string} hex
+     * @return {Array.<number>}
+     */
+    _hexToRGB: function(hex)
+    {
+        var r = parseInt(hex.substring(0,2), 16);
+        var g = parseInt(hex.substring(2,4), 16);
+        var b = parseInt(hex.substring(4,6), 16);
+
+        return [r, g, b];
+    },
+
+    /**
+     * @param {Array.<string|number>} rgb
+     * @return {Array.<number>}
+     */
+    _rgbToHSL: function(rgb)
+    {
+        var r = this._individualRGBValueToFloatValue(rgb[0]) / 255;
+        var g = this._individualRGBValueToFloatValue(rgb[1]) / 255;
+        var b = this._individualRGBValueToFloatValue(rgb[2]) / 255;
+        var max = Math.max(r, g, b);
+        var min = Math.min(r, g, b);
+        var diff = max - min;
+        var add = max + min;
+
+        if (min === max)
+            var h = 0;
+        else if (r === max)
+            var h = ((60 * (g - b) / diff) + 360) % 360;
+        else if (g === max)
+            var h = (60 * (b - r) / diff) + 120;
+        else
+            var h = (60 * (r - g) / diff) + 240;
+
+        var l = 0.5 * add;
+
+        if (l === 0)
+            var s = 0;
+        else if (l === 1)
+            var s = 1;
+        else if (l <= 0.5)
+            var s = diff / add;
+        else
+            var s = diff / (2 - add);
+
+        h = Math.round(h);
+        s = Math.round(s*100);
+        l = Math.round(l*100);
+
+        return [h, s, l];
+    },
+
+    /**
+     * @param {Array.<number>} hsl
+     * @return {Array.<number>}
+     */
+    _hslToRGB: function(hsl)
+    {
+        var h = parseFloat(hsl[0]) / 360;
+        var s = parseFloat(hsl[1]) / 100;
+        var l = parseFloat(hsl[2]) / 100;
+
+        if (s < 0)
+            s = 0;
+
+        if (l <= 0.5)
+            var q = l * (1 + s);
+        else
+            var q = l + s - (l * s);
+
+        var p = 2 * l - q;
+
+        var tr = h + (1 / 3);
+        var tg = h;
+        var tb = h - (1 / 3);
+
+        var r = Math.round(hueToRGB(p, q, tr) * 255);
+        var g = Math.round(hueToRGB(p, q, tg) * 255);
+        var b = Math.round(hueToRGB(p, q, tb) * 255);
+        return [r, g, b];
+
+        function hueToRGB(p, q, h) {
+            if (h < 0)
+                h += 1;
+            else if (h > 1)
+                h -= 1;
+
+            if ((h * 6) < 1)
+                return p + (q - p) * h * 6;
+            else if ((h * 2) < 1)
+                return q;
+            else if ((h * 3) < 2)
+                return p + (q - p) * ((2 / 3) - h) * 6;
+            else
+                return p;
+        }
+    },
+
+    /**
+     * @param {Array.<number>} rgba
+     * @return {Array.<number>}
+     */
+    _rgbaToHSLA: function(rgba, alpha)
+    {
+        var hsl = this._rgbToHSL(rgba)
+        hsl.push(alpha);
+        return hsl;
+    },
+
+    /**
+     * @param {Array.<number>} hsla
+     * @param {number} alpha
+     * @return {Array.<number>}
+     */
+    _hslaToRGBA: function(hsla, alpha)
+    {
+        var rgb = this._hslToRGB(hsla);
+        rgb.push(alpha);
+        return rgb;
+    },
+
+    _parse: function()
+    {
+        // Special Values - Advanced but Must Be Parsed First - transparent
+        var value = this.value.toLowerCase().replace(/%|\s+/g, "");
+        if (value in WebInspector.Color.AdvancedNickNames) {
+            this.format = WebInspector.Color.Format.Nickname;
+            var set = WebInspector.Color.AdvancedNickNames[value];
+            this.simple = false;
+            this.rgba = set[0];
+            this.hsla = set[1];
+            this.nickname = set[2];
+            this.alpha = set[0][3];
+            return;
+        }
+
+        // Simple - #hex, rgb(), nickname, hsl()
+        var simple = /^(?:#([0-9a-f]{3,6})|rgb\(([^)]+)\)|(\w+)|hsl\(([^)]+)\))$/i;
+        var match = this.value.match(simple);
+        if (match) {
+            this.simple = true;
+
+            if (match[1]) { // hex
+                var hex = match[1].toUpperCase();
+                if (hex.length === 3) {
+                    this.format = WebInspector.Color.Format.ShortHEX;
+                    this.hex = hex.charAt(0) + hex.charAt(0) + hex.charAt(1) + hex.charAt(1) + hex.charAt(2) + hex.charAt(2);
+                } else {
+                    this.format = WebInspector.Color.Format.HEX;
+                    this.hex = hex;
+                }
+            } else if (match[2]) { // rgb
+                this.format = WebInspector.Color.Format.RGB;
+                var rgb = match[2].split(/\s*,\s*/);
+                this.rgb = rgb;
+                this.hex = this._rgbStringsToHex(rgb);
+            } else if (match[3]) { // nickname
+                var nickname = match[3].toLowerCase();
+                if (nickname in WebInspector.Color.Nicknames) {
+                    this.format = WebInspector.Color.Format.Nickname;
+                    this.hex = WebInspector.Color.Nicknames[nickname];
+                } else // unknown name
+                    throw "unknown color name";
+            } else if (match[4]) { // hsl
+                this.format = WebInspector.Color.Format.HSL;
+                var hsl = match[4].replace(/%/g, "").split(/\s*,\s*/);
+                this.hsl = hsl;
+                this.rgb = this._hslToRGB(hsl);
+                this.hex = this._rgbToHex(this.rgb);
+            }
+
+            // Fill in the values if this is a known hex color
+            var hex = this.hex;
+            if (hex && hex in WebInspector.Color.HexTable) {
+                var set = WebInspector.Color.HexTable[hex];
+                this.rgb = set[0];
+                this.hsl = set[1];
+                this.nickname = set[2];
+            }
+
+            return;
+        }
+
+        // Advanced - rgba(), hsla()
+        var advanced = /^(?:rgba\(([^)]+)\)|hsla\(([^)]+)\))$/;
+        match = this.value.match(advanced);
+        if (match) {
+            this.simple = false;
+            if (match[1]) { // rgba
+                this.format = WebInspector.Color.Format.RGBA;
+                this.rgba = match[1].split(/\s*,\s*/);
+                this.rgba[3] = this.alpha = this._clamp(this.rgba[3], 0, 1);
+                this.hsla = this._rgbaToHSLA(this.rgba, this.alpha);
+            } else if (match[2]) { // hsla
+                this.format = WebInspector.Color.Format.HSLA;
+                this.hsla = match[2].replace(/%/g, "").split(/\s*,\s*/);
+                this.hsla[3] = this.alpha = this._clamp(this.hsla[3], 0, 1);
+                this.rgba = this._hslaToRGBA(this.hsla, this.alpha);
+            }
+
+            return;
+        }
+
+        // Could not parse as a valid color
+        throw "could not parse color";
+    }
+}
+
+// Simple Values: [rgb, hsl, nickname]
+WebInspector.Color.HexTable = {
+    "000000": [[0, 0, 0], [0, 0, 0], "black"],
+    "000080": [[0, 0, 128], [240, 100, 25], "navy"],
+    "00008B": [[0, 0, 139], [240, 100, 27], "darkBlue"],
+    "0000CD": [[0, 0, 205], [240, 100, 40], "mediumBlue"],
+    "0000FF": [[0, 0, 255], [240, 100, 50], "blue"],
+    "006400": [[0, 100, 0], [120, 100, 20], "darkGreen"],
+    "008000": [[0, 128, 0], [120, 100, 25], "green"],
+    "008080": [[0, 128, 128], [180, 100, 25], "teal"],
+    "008B8B": [[0, 139, 139], [180, 100, 27], "darkCyan"],
+    "00BFFF": [[0, 191, 255], [195, 100, 50], "deepSkyBlue"],
+    "00CED1": [[0, 206, 209], [181, 100, 41], "darkTurquoise"],
+    "00FA9A": [[0, 250, 154], [157, 100, 49], "mediumSpringGreen"],
+    "00FF00": [[0, 255, 0], [120, 100, 50], "lime"],
+    "00FF7F": [[0, 255, 127], [150, 100, 50], "springGreen"],
+    "00FFFF": [[0, 255, 255], [180, 100, 50], "cyan"],
+    "191970": [[25, 25, 112], [240, 64, 27], "midnightBlue"],
+    "1E90FF": [[30, 144, 255], [210, 100, 56], "dodgerBlue"],
+    "20B2AA": [[32, 178, 170], [177, 70, 41], "lightSeaGreen"],
+    "228B22": [[34, 139, 34], [120, 61, 34], "forestGreen"],
+    "2E8B57": [[46, 139, 87], [146, 50, 36], "seaGreen"],
+    "2F4F4F": [[47, 79, 79], [180, 25, 25], "darkSlateGray"],
+    "32CD32": [[50, 205, 50], [120, 61, 50], "limeGreen"],
+    "3CB371": [[60, 179, 113], [147, 50, 47], "mediumSeaGreen"],
+    "40E0D0": [[64, 224, 208], [174, 72, 56], "turquoise"],
+    "4169E1": [[65, 105, 225], [225, 73, 57], "royalBlue"],
+    "4682B4": [[70, 130, 180], [207, 44, 49], "steelBlue"],
+    "483D8B": [[72, 61, 139], [248, 39, 39], "darkSlateBlue"],
+    "48D1CC": [[72, 209, 204], [178, 60, 55], "mediumTurquoise"],
+    "4B0082": [[75, 0, 130], [275, 100, 25], "indigo"],
+    "556B2F": [[85, 107, 47], [82, 39, 30], "darkOliveGreen"],
+    "5F9EA0": [[95, 158, 160], [182, 25, 50], "cadetBlue"],
+    "6495ED": [[100, 149, 237], [219, 79, 66], "cornflowerBlue"],
+    "66CDAA": [[102, 205, 170], [160, 51, 60], "mediumAquaMarine"],
+    "696969": [[105, 105, 105], [0, 0, 41], "dimGray"],
+    "6A5ACD": [[106, 90, 205], [248, 53, 58], "slateBlue"],
+    "6B8E23": [[107, 142, 35], [80, 60, 35], "oliveDrab"],
+    "708090": [[112, 128, 144], [210, 13, 50], "slateGray"],
+    "778899": [[119, 136, 153], [210, 14, 53], "lightSlateGray"],
+    "7B68EE": [[123, 104, 238], [249, 80, 67], "mediumSlateBlue"],
+    "7CFC00": [[124, 252, 0], [90, 100, 49], "lawnGreen"],
+    "7FFF00": [[127, 255, 0], [90, 100, 50], "chartreuse"],
+    "7FFFD4": [[127, 255, 212], [160, 100, 75], "aquamarine"],
+    "800000": [[128, 0, 0], [0, 100, 25], "maroon"],
+    "800080": [[128, 0, 128], [300, 100, 25], "purple"],
+    "808000": [[128, 128, 0], [60, 100, 25], "olive"],
+    "808080": [[128, 128, 128], [0, 0, 50], "gray"],
+    "87CEEB": [[135, 206, 235], [197, 71, 73], "skyBlue"],
+    "87CEFA": [[135, 206, 250], [203, 92, 75], "lightSkyBlue"],
+    "8A2BE2": [[138, 43, 226], [271, 76, 53], "blueViolet"],
+    "8B0000": [[139, 0, 0], [0, 100, 27], "darkRed"],
+    "8B008B": [[139, 0, 139], [300, 100, 27], "darkMagenta"],
+    "8B4513": [[139, 69, 19], [25, 76, 31], "saddleBrown"],
+    "8FBC8F": [[143, 188, 143], [120, 25, 65], "darkSeaGreen"],
+    "90EE90": [[144, 238, 144], [120, 73, 75], "lightGreen"],
+    "9370D8": [[147, 112, 219], [260, 60, 65], "mediumPurple"],
+    "9400D3": [[148, 0, 211], [282, 100, 41], "darkViolet"],
+    "98FB98": [[152, 251, 152], [120, 93, 79], "paleGreen"],
+    "9932CC": [[153, 50, 204], [280, 61, 50], "darkOrchid"],
+    "9ACD32": [[154, 205, 50], [80, 61, 50], "yellowGreen"],
+    "A0522D": [[160, 82, 45], [19, 56, 40], "sienna"],
+    "A52A2A": [[165, 42, 42], [0, 59, 41], "brown"],
+    "A9A9A9": [[169, 169, 169], [0, 0, 66], "darkGray"],
+    "ADD8E6": [[173, 216, 230], [195, 53, 79], "lightBlue"],
+    "ADFF2F": [[173, 255, 47], [84, 100, 59], "greenYellow"],
+    "AFEEEE": [[175, 238, 238], [180, 65, 81], "paleTurquoise"],
+    "B0C4DE": [[176, 196, 222], [214, 41, 78], "lightSteelBlue"],
+    "B0E0E6": [[176, 224, 230], [187, 52, 80], "powderBlue"],
+    "B22222": [[178, 34, 34], [0, 68, 42], "fireBrick"],
+    "B8860B": [[184, 134, 11], [43, 89, 38], "darkGoldenrod"],
+    "BA55D3": [[186, 85, 211], [288, 59, 58], "mediumOrchid"],
+    "BC8F8F": [[188, 143, 143], [0, 25, 65], "rosyBrown"],
+    "BDB76B": [[189, 183, 107], [56, 38, 58], "darkKhaki"],
+    "C0C0C0": [[192, 192, 192], [0, 0, 75], "silver"],
+    "C71585": [[199, 21, 133], [322, 81, 43], "mediumVioletRed"],
+    "CD5C5C": [[205, 92, 92], [0, 53, 58], "indianRed"],
+    "CD853F": [[205, 133, 63], [30, 59, 53], "peru"],
+    "D2691E": [[210, 105, 30], [25, 75, 47], "chocolate"],
+    "D2B48C": [[210, 180, 140], [34, 44, 69], "tan"],
+    "D3D3D3": [[211, 211, 211], [0, 0, 83], "lightGrey"],
+    "D87093": [[219, 112, 147], [340, 60, 65], "paleVioletRed"],
+    "D8BFD8": [[216, 191, 216], [300, 24, 80], "thistle"],
+    "DA70D6": [[218, 112, 214], [302, 59, 65], "orchid"],
+    "DAA520": [[218, 165, 32], [43, 74, 49], "goldenrod"],
+    "DC143C": [[237, 164, 61], [35, 83, 58], "crimson"],
+    "DCDCDC": [[220, 220, 220], [0, 0, 86], "gainsboro"],
+    "DDA0DD": [[221, 160, 221], [300, 47, 75], "plum"],
+    "DEB887": [[222, 184, 135], [34, 57, 70], "burlyWood"],
+    "E0FFFF": [[224, 255, 255], [180, 100, 94], "lightCyan"],
+    "E6E6FA": [[230, 230, 250], [240, 67, 94], "lavender"],
+    "E9967A": [[233, 150, 122], [15, 72, 70], "darkSalmon"],
+    "EE82EE": [[238, 130, 238], [300, 76, 72], "violet"],
+    "EEE8AA": [[238, 232, 170], [55, 67, 80], "paleGoldenrod"],
+    "F08080": [[240, 128, 128], [0, 79, 72], "lightCoral"],
+    "F0E68C": [[240, 230, 140], [54, 77, 75], "khaki"],
+    "F0F8FF": [[240, 248, 255], [208, 100, 97], "aliceBlue"],
+    "F0FFF0": [[240, 255, 240], [120, 100, 97], "honeyDew"],
+    "F0FFFF": [[240, 255, 255], [180, 100, 97], "azure"],
+    "F4A460": [[244, 164, 96], [28, 87, 67], "sandyBrown"],
+    "F5DEB3": [[245, 222, 179], [39, 77, 83], "wheat"],
+    "F5F5DC": [[245, 245, 220], [60, 56, 91], "beige"],
+    "F5F5F5": [[245, 245, 245], [0, 0, 96], "whiteSmoke"],
+    "F5FFFA": [[245, 255, 250], [150, 100, 98], "mintCream"],
+    "F8F8FF": [[248, 248, 255], [240, 100, 99], "ghostWhite"],
+    "FA8072": [[250, 128, 114], [6, 93, 71], "salmon"],
+    "FAEBD7": [[250, 235, 215], [34, 78, 91], "antiqueWhite"],
+    "FAF0E6": [[250, 240, 230], [30, 67, 94], "linen"],
+    "FAFAD2": [[250, 250, 210], [60, 80, 90], "lightGoldenrodYellow"],
+    "FDF5E6": [[253, 245, 230], [39, 85, 95], "oldLace"],
+    "FF0000": [[255, 0, 0], [0, 100, 50], "red"],
+    "FF00FF": [[255, 0, 255], [300, 100, 50], "magenta"],
+    "FF1493": [[255, 20, 147], [328, 100, 54], "deepPink"],
+    "FF4500": [[255, 69, 0], [16, 100, 50], "orangeRed"],
+    "FF6347": [[255, 99, 71], [9, 100, 64], "tomato"],
+    "FF69B4": [[255, 105, 180], [330, 100, 71], "hotPink"],
+    "FF7F50": [[255, 127, 80], [16, 100, 66], "coral"],
+    "FF8C00": [[255, 140, 0], [33, 100, 50], "darkOrange"],
+    "FFA07A": [[255, 160, 122], [17, 100, 74], "lightSalmon"],
+    "FFA500": [[255, 165, 0], [39, 100, 50], "orange"],
+    "FFB6C1": [[255, 182, 193], [351, 100, 86], "lightPink"],
+    "FFC0CB": [[255, 192, 203], [350, 100, 88], "pink"],
+    "FFD700": [[255, 215, 0], [51, 100, 50], "gold"],
+    "FFDAB9": [[255, 218, 185], [28, 100, 86], "peachPuff"],
+    "FFDEAD": [[255, 222, 173], [36, 100, 84], "navajoWhite"],
+    "FFE4B5": [[255, 228, 181], [38, 100, 85], "moccasin"],
+    "FFE4C4": [[255, 228, 196], [33, 100, 88], "bisque"],
+    "FFE4E1": [[255, 228, 225], [6, 100, 94], "mistyRose"],
+    "FFEBCD": [[255, 235, 205], [36, 100, 90], "blanchedAlmond"],
+    "FFEFD5": [[255, 239, 213], [37, 100, 92], "papayaWhip"],
+    "FFF0F5": [[255, 240, 245], [340, 100, 97], "lavenderBlush"],
+    "FFF5EE": [[255, 245, 238], [25, 100, 97], "seaShell"],
+    "FFF8DC": [[255, 248, 220], [48, 100, 93], "cornsilk"],
+    "FFFACD": [[255, 250, 205], [54, 100, 90], "lemonChiffon"],
+    "FFFAF0": [[255, 250, 240], [40, 100, 97], "floralWhite"],
+    "FFFAFA": [[255, 250, 250], [0, 100, 99], "snow"],
+    "FFFF00": [[255, 255, 0], [60, 100, 50], "yellow"],
+    "FFFFE0": [[255, 255, 224], [60, 100, 94], "lightYellow"],
+    "FFFFF0": [[255, 255, 240], [60, 100, 97], "ivory"],
+    "FFFFFF": [[255, 255, 255], [0, 100, 100], "white"]
+};
+
+// Simple Values
+WebInspector.Color.Nicknames = {
+    "aliceblue": "F0F8FF",
+    "antiquewhite": "FAEBD7",
+    "aqua": "00FFFF",
+    "aquamarine": "7FFFD4",
+    "azure": "F0FFFF",
+    "beige": "F5F5DC",
+    "bisque": "FFE4C4",
+    "black": "000000",
+    "blanchedalmond": "FFEBCD",
+    "blue": "0000FF",
+    "blueviolet": "8A2BE2",
+    "brown": "A52A2A",
+    "burlywood": "DEB887",
+    "cadetblue": "5F9EA0",
+    "chartreuse": "7FFF00",
+    "chocolate": "D2691E",
+    "coral": "FF7F50",
+    "cornflowerblue": "6495ED",
+    "cornsilk": "FFF8DC",
+    "crimson": "DC143C",
+    "cyan": "00FFFF",
+    "darkblue": "00008B",
+    "darkcyan": "008B8B",
+    "darkgoldenrod": "B8860B",
+    "darkgray": "A9A9A9",
+    "darkgreen": "006400",
+    "darkkhaki": "BDB76B",
+    "darkmagenta": "8B008B",
+    "darkolivegreen": "556B2F",
+    "darkorange": "FF8C00",
+    "darkorchid": "9932CC",
+    "darkred": "8B0000",
+    "darksalmon": "E9967A",
+    "darkseagreen": "8FBC8F",
+    "darkslateblue": "483D8B",
+    "darkslategray": "2F4F4F",
+    "darkturquoise": "00CED1",
+    "darkviolet": "9400D3",
+    "deeppink": "FF1493",
+    "deepskyblue": "00BFFF",
+    "dimgray": "696969",
+    "dodgerblue": "1E90FF",
+    "firebrick": "B22222",
+    "floralwhite": "FFFAF0",
+    "forestgreen": "228B22",
+    "fuchsia": "FF00FF",
+    "gainsboro": "DCDCDC",
+    "ghostwhite": "F8F8FF",
+    "gold": "FFD700",
+    "goldenrod": "DAA520",
+    "gray": "808080",
+    "green": "008000",
+    "greenyellow": "ADFF2F",
+    "honeydew": "F0FFF0",
+    "hotpink": "FF69B4",
+    "indianred": "CD5C5C",
+    "indigo": "4B0082",
+    "ivory": "FFFFF0",
+    "khaki": "F0E68C",
+    "lavender": "E6E6FA",
+    "lavenderblush": "FFF0F5",
+    "lawngreen": "7CFC00",
+    "lemonchiffon": "FFFACD",
+    "lightblue": "ADD8E6",
+    "lightcoral": "F08080",
+    "lightcyan": "E0FFFF",
+    "lightgoldenrodyellow": "FAFAD2",
+    "lightgreen": "90EE90",
+    "lightgrey": "D3D3D3",
+    "lightpink": "FFB6C1",
+    "lightsalmon": "FFA07A",
+    "lightseagreen": "20B2AA",
+    "lightskyblue": "87CEFA",
+    "lightslategray": "778899",
+    "lightsteelblue": "B0C4DE",
+    "lightyellow": "FFFFE0",
+    "lime": "00FF00",
+    "limegreen": "32CD32",
+    "linen": "FAF0E6",
+    "magenta": "FF00FF",
+    "maroon": "800000",
+    "mediumaquamarine": "66CDAA",
+    "mediumblue": "0000CD",
+    "mediumorchid": "BA55D3",
+    "mediumpurple": "9370DB",
+    "mediumseagreen": "3CB371",
+    "mediumslateblue": "7B68EE",
+    "mediumspringgreen": "00FA9A",
+    "mediumturquoise": "48D1CC",
+    "mediumvioletred": "C71585",
+    "midnightblue": "191970",
+    "mintcream": "F5FFFA",
+    "mistyrose": "FFE4E1",
+    "moccasin": "FFE4B5",
+    "navajowhite": "FFDEAD",
+    "navy": "000080",
+    "oldlace": "FDF5E6",
+    "olive": "808000",
+    "olivedrab": "6B8E23",
+    "orange": "FFA500",
+    "orangered": "FF4500",
+    "orchid": "DA70D6",
+    "palegoldenrod": "EEE8AA",
+    "palegreen": "98FB98",
+    "paleturquoise": "AFEEEE",
+    "palevioletred": "DB7093",
+    "papayawhip": "FFEFD5",
+    "peachpuff": "FFDAB9",
+    "peru": "CD853F",
+    "pink": "FFC0CB",
+    "plum": "DDA0DD",
+    "powderblue": "B0E0E6",
+    "purple": "800080",
+    "red": "FF0000",
+    "rosybrown": "BC8F8F",
+    "royalblue": "4169E1",
+    "saddlebrown": "8B4513",
+    "salmon": "FA8072",
+    "sandybrown": "F4A460",
+    "seagreen": "2E8B57",
+    "seashell": "FFF5EE",
+    "sienna": "A0522D",
+    "silver": "C0C0C0",
+    "skyblue": "87CEEB",
+    "slateblue": "6A5ACD",
+    "slategray": "708090",
+    "snow": "FFFAFA",
+    "springgreen": "00FF7F",
+    "steelblue": "4682B4",
+    "tan": "D2B48C",
+    "teal": "008080",
+    "thistle": "D8BFD8",
+    "tomato": "FF6347",
+    "turquoise": "40E0D0",
+    "violet": "EE82EE",
+    "wheat": "F5DEB3",
+    "white": "FFFFFF",
+    "whitesmoke": "F5F5F5",
+    "yellow": "FFFF00",
+    "yellowgreen": "9ACD32"
+};
+
+// Advanced Values [rgba, hsla, nickname]
+WebInspector.Color.AdvancedNickNames = {
+    "transparent": [[0, 0, 0, 0], [0, 0, 0, 0], "transparent"],
+    "rgba(0,0,0,0)": [[0, 0, 0, 0], [0, 0, 0, 0], "transparent"],
+    "hsla(0,0,0,0)": [[0, 0, 0, 0], [0, 0, 0, 0], "transparent"],
+};
diff --git a/Source/WebInspectorUI/UserInterface/CompletionSuggestionsView.css b/Source/WebInspectorUI/UserInterface/CompletionSuggestionsView.css
new file mode 100644
index 000000000..bdbd313b4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CompletionSuggestionsView.css
@@ -0,0 +1,78 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.completion-suggestions {
+    position: absolute;
+    display: block;
+
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: 5px;
+
+    z-index: 100;
+
+    margin-top: -1px;
+    margin-left: -10px;
+
+    box-shadow: rgba(0, 0, 0, 0.25) 0 5px 10px, rgba(0, 0, 0, 0.15) 0 0 0 1px;
+}
+
+.completion-suggestions > .completion-suggestions-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    border-radius: 5px;
+}
+
+.completion-suggestions-container > .item {
+    padding: 1px 10px;
+    margin: 0;
+
+    font-size: 11px;
+    font-family: Menlo, monospace;
+
+    line-height: 16px;
+    height: 16px;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    color: black;
+}
+
+.completion-suggestions-container:not(:active) > .item.selected,
+.completion-suggestions-container > .item:active {
+    box-shadow: inset rgb(87, 152, 206) 0 1px 0;
+    background: -webkit-linear-gradient(top, rgb(110, 167, 216), rgb(36, 114, 181));
+
+    color: white;
+    text-shadow: rgb(51, 88, 123) 0 1px 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/CompletionSuggestionsView.js b/Source/WebInspectorUI/UserInterface/CompletionSuggestionsView.js
new file mode 100644
index 000000000..a09041ce6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CompletionSuggestionsView.js
@@ -0,0 +1,229 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CompletionSuggestionsView = function(delegate)
+{
+    WebInspector.Object.call(this);
+
+    this._delegate = delegate || null;
+
+    this._selectedIndex = NaN;
+
+    this._element = document.createElement("div");
+    this._element.className = WebInspector.CompletionSuggestionsView.StyleClassName;
+
+    this._containerElement = document.createElement("div");
+    this._containerElement.className = WebInspector.CompletionSuggestionsView.ContainerElementStyleClassName;
+    this._containerElement.addEventListener("mousedown", this._mouseDown.bind(this));
+    this._containerElement.addEventListener("mouseup", this._mouseUp.bind(this));
+    this._containerElement.addEventListener("click", this._itemClicked.bind(this));
+    this._element.appendChild(this._containerElement);
+};
+
+WebInspector.CompletionSuggestionsView.StyleClassName = "completion-suggestions";
+WebInspector.CompletionSuggestionsView.ContainerElementStyleClassName = "completion-suggestions-container";
+WebInspector.CompletionSuggestionsView.ItemElementStyleClassName = "item";
+WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName = "selected";
+
+WebInspector.CompletionSuggestionsView.prototype = {
+    constructor: WebInspector.CompletionSuggestionsView,
+
+    // Public
+
+    get delegate()
+    {
+        return this._delegate;
+    },
+
+    get visible()
+    {
+        return !!this._element.parentNode;
+    },
+
+    get selectedIndex()
+    {
+        return this._selectedIndex;
+    },
+
+    set selectedIndex(index)
+    {
+        var selectedItemElement = this._selectedItemElement;
+        if (selectedItemElement)
+            selectedItemElement.classList.remove(WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName);
+
+        this._selectedIndex = index;
+
+        selectedItemElement = this._selectedItemElement;
+        if (!selectedItemElement)
+            return;
+
+        selectedItemElement.classList.add(WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName);
+        selectedItemElement.scrollIntoViewIfNeeded(false);
+    },
+
+    selectNext: function()
+    {
+        var count = this._containerElement.children.length;
+
+        if (isNaN(this._selectedIndex) || this._selectedIndex === count - 1)
+            this.selectedIndex = 0;
+        else
+            ++this.selectedIndex;
+
+        var selectedItemElement = this._selectedItemElement;
+        if (selectedItemElement && this._delegate && typeof this._delegate.completionSuggestionsSelectedCompletion === "function")
+            this._delegate.completionSuggestionsSelectedCompletion(this, selectedItemElement.textContent);
+    },
+
+    selectPrevious: function()
+    {
+        if (isNaN(this._selectedIndex) || this._selectedIndex === 0)
+            this.selectedIndex = this._containerElement.children.length - 1;
+        else
+            --this.selectedIndex;
+
+        var selectedItemElement = this._selectedItemElement;
+        if (selectedItemElement && this._delegate && typeof this._delegate.completionSuggestionsSelectedCompletion === "function")
+            this._delegate.completionSuggestionsSelectedCompletion(this, selectedItemElement.textContent);
+    },
+
+    isHandlingClickEvent: function()
+    {
+        return this._mouseIsDown;
+    },
+
+    show: function(anchorBounds)
+    {
+        // Measure the container so we can know the intrinsic size of the items.
+        this._containerElement.style.position = "absolute";
+        document.body.appendChild(this._containerElement);
+
+        var containerWidth = this._containerElement.offsetWidth;
+        var containerHeight = this._containerElement.offsetHeight;
+
+        this._containerElement.removeAttribute("style");
+        this._element.appendChild(this._containerElement);
+
+        // Lay out the suggest-box relative to the anchorBounds.
+        const margin = 10;
+        const horizontalPadding = 22;
+        const absoluteMaximumHeight = 160;
+
+        var x = anchorBounds.origin.x;
+        var y = anchorBounds.origin.y + anchorBounds.size.height;
+
+        var maximumWidth = window.innerWidth - anchorBounds.origin.x - margin;
+        var width = Math.min(containerWidth, maximumWidth - horizontalPadding) + horizontalPadding;
+        var paddedWidth = containerWidth + horizontalPadding;
+
+        if (width < paddedWidth) {
+            // Shift the suggest box to the left to accommodate the content without trimming to the BODY edge.
+            maximumWidth = window.innerWidth - margin;
+            width = Math.min(containerWidth, maximumWidth - horizontalPadding) + horizontalPadding;
+            x = document.body.offsetWidth - width;
+        }
+
+        var aboveHeight = anchorBounds.origin.y;
+        var underHeight = window.innerHeight - anchorBounds.origin.y - anchorBounds.size.height;
+        var maximumHeight = Math.min(absoluteMaximumHeight, Math.max(underHeight, aboveHeight) - margin);
+        var height = Math.min(containerHeight, maximumHeight);
+
+        // Position the sugesstions above the anchor if there is more room.
+        // FIXME: This should always prefer positioning below until there is absolutely no room.
+        if (aboveHeight > underHeight)
+            y = anchorBounds.origin.y - height;
+
+        this._element.style.left = x + "px";
+        this._element.style.top = y + "px";
+        this._element.style.width = width + "px";
+        this._element.style.height = height + "px";
+
+        document.body.appendChild(this._element);
+    },
+
+    hide: function()
+    {
+        this._element.remove();
+    },
+
+    update: function(completions, selectedIndex)
+    {
+        this._containerElement.removeChildren();
+
+        if (typeof selectedIndex === "number")
+            this._selectedIndex = selectedIndex;
+
+        for (var i = 0; i < completions.length; ++i) {
+            var itemElement = document.createElement("div");
+            itemElement.className = WebInspector.CompletionSuggestionsView.ItemElementStyleClassName;
+            itemElement.textContent = completions[i];
+            if (i === this._selectedIndex)
+                itemElement.classList.add(WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName);
+            this._containerElement.appendChild(itemElement);
+        }
+    },
+
+    // Private
+
+    get _selectedItemElement()
+    {
+        if (isNaN(this._selectedIndex))
+            return null;
+
+        var element = this._containerElement.children[this._selectedIndex] || null;
+        console.assert(element);
+        return element;
+    },
+
+    _mouseDown: function(event)
+    {
+        if (event.button !== 0)
+            return;
+        this._mouseIsDown = true;
+    },
+
+    _mouseUp: function(event)
+    {
+        if (event.button !== 0)
+            return;
+        this._mouseIsDown = false;
+    },
+
+    _itemClicked: function(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        var itemElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.CompletionSuggestionsView.ItemElementStyleClassName);
+        console.assert(itemElement);
+        if (!itemElement)
+            return;
+
+        if (this._delegate && typeof this._delegate.completionSuggestionsClickedCompletion === "function")
+            this._delegate.completionSuggestionsClickedCompletion(this, itemElement.textContent);
+    }
+};
+
+WebInspector.CompletionSuggestionsView.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ComputedStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/ComputedStyleDetailsPanel.js
new file mode 100644
index 000000000..0329b9e56
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ComputedStyleDetailsPanel.js
@@ -0,0 +1,91 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ComputedStyleDetailsPanel = function()
+{
+    WebInspector.StyleDetailsPanel.call(this, WebInspector.ComputedStyleDetailsPanel.StyleClassName, "computed", WebInspector.UIString("Computed"));
+
+    this._computedStyleShowAllSetting = new WebInspector.Setting("computed-style-show-all", false);
+
+    var computedStyleShowAllLabel = document.createElement("label");
+    computedStyleShowAllLabel.textContent = WebInspector.UIString("Show All");
+
+    this._computedStyleShowAllCheckbox = document.createElement("input");
+    this._computedStyleShowAllCheckbox.type = "checkbox";
+    this._computedStyleShowAllCheckbox.checked = this._computedStyleShowAllSetting.value;
+    this._computedStyleShowAllCheckbox.addEventListener("change", this._computedStyleShowAllCheckboxValueChanged.bind(this));
+    computedStyleShowAllLabel.appendChild(this._computedStyleShowAllCheckbox);
+
+    this._propertiesTextEditor = new WebInspector.CSSStyleDeclarationTextEditor(this);
+    this._propertiesTextEditor.showsImplicitProperties = this._computedStyleShowAllSetting.value;
+    this._propertiesTextEditor.alwaysShowPropertyNames = ["display", "width", "height"];
+    this._propertiesTextEditor.sortProperties = true;
+
+    var propertiesRow = new WebInspector.DetailsSectionRow;
+    var propertiesGroup = new WebInspector.DetailsSectionGroup([propertiesRow]);
+    var propertiesSection = new WebInspector.DetailsSection("computed-style-properties", WebInspector.UIString("Properties"), [propertiesGroup], computedStyleShowAllLabel);
+
+    propertiesRow.element.appendChild(this._propertiesTextEditor.element);
+
+    this.element.appendChild(propertiesSection.element);
+};
+
+WebInspector.ComputedStyleDetailsPanel.StyleClassName = "computed";
+
+WebInspector.ComputedStyleDetailsPanel.prototype = {
+    constructor: WebInspector.ComputedStyleDetailsPanel,
+
+    // Public
+
+    refresh: function()
+    {
+        this._propertiesTextEditor.style = this.nodeStyles.computedStyle;
+    },
+
+    // Protected
+
+    shown: function()
+    {
+        WebInspector.StyleDetailsPanel.prototype.shown.call(this);
+
+        this._propertiesTextEditor.updateLayout();
+    },
+
+    widthDidChange: function()
+    {
+        this._propertiesTextEditor.updateLayout();
+    },
+
+    // Private
+
+    _computedStyleShowAllCheckboxValueChanged: function(event)
+    {
+        var checked = this._computedStyleShowAllCheckbox.checked;
+        this._computedStyleShowAllSetting.value = checked;
+        this._propertiesTextEditor.showsImplicitProperties = checked;
+    }
+};
+
+WebInspector.ComputedStyleDetailsPanel.prototype.__proto__ = WebInspector.StyleDetailsPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ConsoleCommand.js b/Source/WebInspectorUI/UserInterface/ConsoleCommand.js
new file mode 100644
index 000000000..95b24c28e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ConsoleCommand.js
@@ -0,0 +1,99 @@
+/*
+ * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ConsoleCommand = function(command)
+{
+    WebInspector.Object.call(this);
+
+    this.command = command;
+};
+
+WebInspector.ConsoleCommand.prototype = {
+    constructor: WebInspector.ConsoleCommand,
+
+    // Public
+
+    clearHighlight: function()
+    {
+        var highlightedMessage = this._formattedCommand;
+        delete this._formattedCommand;
+        this._formatCommand();
+        this._element.replaceChild(this._formattedCommand, highlightedMessage);
+    },
+
+    highlightSearchResults: function(regexObject)
+    {
+        regexObject.lastIndex = 0;
+        var text = this.command;
+        var match = regexObject.exec(text);
+        var offset = 0;
+        var matchRanges = [];
+        while (match) {
+            matchRanges.push({ offset: match.index, length: match[0].length });
+            match = regexObject.exec(text);
+        }
+        highlightSearchResults(this._formattedCommand, matchRanges);
+        this._element.scrollIntoViewIfNeeded();
+    },
+
+    matchesRegex: function(regexObject)
+    {
+        return regexObject.test(this.command);
+    },
+
+    toMessageElement: function()
+    {
+        if (!this._element) {
+            this._element = document.createElement("div");
+            this._element.command = this;
+            this._element.className = "console-user-command";
+            this._element.setAttribute("data-labelprefix", WebInspector.UIString("Input: "));
+
+            this._formatCommand();
+            this._element.appendChild(this._formattedCommand);
+        }
+        return this._element;
+    },
+
+    // Private
+
+    _formatCommand: function()
+    {
+        this._formattedCommand = document.createElement("span");
+        this._formattedCommand.className = "console-message-text source-code";
+        this._formattedCommand.textContent = this.command;
+    },
+    
+    toClipboardString: function(isPrefixOptional)
+    {
+        return (isPrefixOptional ? "" : "> ") + this.command;
+    }
+};
+
+WebInspector.ConsoleCommand.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ConsoleCommandResult.js b/Source/WebInspectorUI/UserInterface/ConsoleCommandResult.js
new file mode 100644
index 000000000..4f08a563c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ConsoleCommandResult.js
@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ConsoleCommandResult = function(result, wasThrown, originatingCommand)
+{
+    var level = (wasThrown ? WebInspector.ConsoleMessage.MessageLevel.Error : WebInspector.ConsoleMessage.MessageLevel.Log);
+    this.originatingCommand = originatingCommand;
+
+    WebInspector.ConsoleMessageImpl.call(this, WebInspector.ConsoleMessage.MessageSource.JS, level, "", null, WebInspector.ConsoleMessage.MessageType.Result, undefined, undefined, undefined, undefined, [result]);
+};
+
+WebInspector.ConsoleCommandResult.prototype = {
+    constructor: WebInspector.ConsoleCommandResult,
+
+    // Public
+
+    enforcesClipboardPrefixString: false,
+
+    toMessageElement: function()
+    {
+        var element = WebInspector.ConsoleMessageImpl.prototype.toMessageElement.call(this);
+        element.classList.add("console-user-command-result");
+        element.setAttribute("data-labelprefix", WebInspector.UIString("Output: "));
+        return element;
+    },
+
+    get clipboarPrefixString ()
+    {
+        return "< ";
+    }
+};
+
+WebInspector.ConsoleCommandResult.prototype.__proto__ = WebInspector.ConsoleMessageImpl.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ConsoleGroup.js b/Source/WebInspectorUI/UserInterface/ConsoleGroup.js
new file mode 100644
index 000000000..901e1b193
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ConsoleGroup.js
@@ -0,0 +1,101 @@
+/*
+ * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ConsoleGroup = function(parentGroup, isNewSession)
+{
+    WebInspector.Object.call(this);
+
+    this.parentGroup = parentGroup;
+
+    var element = document.createElement("div");
+    element.className = "console-group";
+    element.group = this;
+    this.element = element;
+
+    if (isNewSession)
+        element.classList.add("new-session");
+
+    var messagesElement = document.createElement("div");
+    messagesElement.className = "console-group-messages";
+    element.appendChild(messagesElement);
+    this.messagesElement = messagesElement;
+};
+
+WebInspector.ConsoleGroup.prototype = {
+    constructor: WebInspector.ConsoleGroup,
+
+    // Public
+
+    addMessage: function(msg)
+    {
+        var element = msg.toMessageElement();
+
+        var wrapper = document.createElement("div");
+        wrapper.className = WebInspector.LogContentView.ItemWrapperStyleClassName;
+        wrapper.messageElement = wrapper.appendChild(element);
+
+        if (msg.type === WebInspector.ConsoleMessage.MessageType.StartGroup || msg.type === WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed) {
+            this.messagesElement.parentNode.insertBefore(wrapper, this.messagesElement);
+            element.addEventListener("click", this._titleClicked.bind(this));
+            element.addEventListener("mousedown", this._titleMouseDown.bind(this));
+            var groupElement = element.enclosingNodeOrSelfWithClass("console-group");
+            if (groupElement && msg.type === WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed)
+                groupElement.classList.add("collapsed");
+        } else
+            this.messagesElement.appendChild(wrapper);
+    },
+
+    hasMessages: function()
+    {
+        return !!this.messagesElement.childNodes.length;
+    },
+
+    // Private
+
+    _titleMouseDown: function(event)
+    {
+        event.preventDefault();
+    },
+
+    _titleClicked: function(event)
+    {
+        var groupTitleElement = event.target.enclosingNodeOrSelfWithClass("console-group-title");
+        if (groupTitleElement) {
+            var groupElement = groupTitleElement.enclosingNodeOrSelfWithClass("console-group");
+            if (groupElement)
+                if (groupElement.classList.contains("collapsed"))
+                    groupElement.classList.remove("collapsed");
+                else
+                    groupElement.classList.add("collapsed");
+            groupTitleElement.scrollIntoViewIfNeeded(true);
+        }
+    }
+};
+
+WebInspector.ConsoleGroup.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ConsoleMessage.js b/Source/WebInspectorUI/UserInterface/ConsoleMessage.js
new file mode 100644
index 000000000..40786336d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ConsoleMessage.js
@@ -0,0 +1,115 @@
+/*
+ * Copyright (C) 2011 Google Inc.  All rights reserved.
+ * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ConsoleMessage = function(source, level, url, line, column, repeatCount)
+{
+    this.source = source;
+    this.level = level;
+    this.url = url || null;
+    this.line = line || 0;
+    this.column = column || 0;
+
+    repeatCount = repeatCount || 1;
+    this.repeatCount = repeatCount;
+    this.repeatDelta = repeatCount;
+    this.totalRepeatCount = repeatCount;
+}
+
+WebInspector.ConsoleMessage.prototype = {
+    /**
+     * @return {boolean}
+     */
+    isErrorOrWarning: function()
+    {
+        return (this.level === WebInspector.ConsoleMessage.MessageLevel.Warning || this.level === WebInspector.ConsoleMessage.MessageLevel.Error);
+    },
+
+    updateRepeatCount: function()
+    {
+        // Implemented by concrete instances
+    },
+
+    /**
+     * @return {WebInspector.ConsoleMessage}
+     */
+    clone: function()
+    {
+        // Implemented by concrete instances
+    }
+}
+
+/**
+ * @param {string} source
+ * @param {string} level
+ * @param {string} message
+ * @param {string=} type
+ * @param {string=} url
+ * @param {number=} line
+ * @param {number=} repeatCount
+ * @param {Array.<RuntimeAgent.RemoteObject>=} parameters
+ * @param {ConsoleAgent.StackTrace=} stackTrace
+ * @param {WebInspector.Resource=} request
+ *
+ * @return {WebInspector.ConsoleMessage}
+ */
+WebInspector.ConsoleMessage.create = function(source, level, message, type, url, line, column, repeatCount, parameters, stackTrace, request)
+{
+    return new WebInspector.ConsoleMessageImpl(source, level, message, null, type, url, line, column, repeatCount, parameters, stackTrace, request);
+}
+
+// Note: Keep these constants in sync with the ones in Console.h
+WebInspector.ConsoleMessage.MessageSource = {
+    HTML: "html",
+    XML: "xml",
+    JS: "javascript",
+    Network: "network",
+    ConsoleAPI: "console-api",
+    Other: "other"
+}
+
+WebInspector.ConsoleMessage.MessageType = {
+    Log: "log",
+    Dir: "dir",
+    DirXML: "dirxml",
+    Trace: "trace",
+    StartGroup: "startGroup",
+    StartGroupCollapsed: "startGroupCollapsed",
+    EndGroup: "endGroup",
+    Assert: "assert",
+    Result: "result"
+}
+
+WebInspector.ConsoleMessage.MessageLevel = {
+    Tip: "tip",
+    Log: "log",
+    Warning: "warning",
+    Error: "error",
+    Debug: "debug"
+}
diff --git a/Source/WebInspectorUI/UserInterface/ConsoleMessageImpl.js b/Source/WebInspectorUI/UserInterface/ConsoleMessageImpl.js
new file mode 100644
index 000000000..609d9115e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ConsoleMessageImpl.js
@@ -0,0 +1,711 @@
+/*
+ * Copyright (C) 2011 Google Inc.  All rights reserved.
+ * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ConsoleMessageImpl = function(source, level, message, linkifier, type, url, line, column, repeatCount, parameters, stackTrace, request)
+{
+    WebInspector.ConsoleMessage.call(this, source, level, url, line, column, repeatCount);
+
+    this._linkifier = linkifier;
+    this.type = type || WebInspector.ConsoleMessage.MessageType.Log;
+    this._messageText = message;
+    this._parameters = parameters;
+    this._stackTrace = stackTrace;
+    this._request = request;
+
+    this._customFormatters = {
+        "object": this._formatParameterAsObject,
+        "array":  this._formatParameterAsArray,
+        "node":   this._formatParameterAsNode,
+        "string": this._formatParameterAsString
+    };
+}
+
+WebInspector.ConsoleMessageImpl.prototype = {
+
+    enforcesClipboardPrefixString: true,
+
+    _formatMessage: function()
+    {
+        this._formattedMessage = document.createElement("span");
+        this._formattedMessage.className = "console-message-text source-code";
+
+        var messageText;
+        if (this.source === WebInspector.ConsoleMessage.MessageSource.ConsoleAPI) {
+            switch (this.type) {
+                case WebInspector.ConsoleMessage.MessageType.Trace:
+                    messageText = document.createTextNode("console.trace()");
+                    break;
+                case WebInspector.ConsoleMessage.MessageType.Assert:
+                    var args = [WebInspector.UIString("Assertion failed:")];
+                    if (this._parameters)
+                        args = args.concat(this._parameters);
+                    messageText = this._format(args);
+                    break;
+                case WebInspector.ConsoleMessage.MessageType.Dir:
+                    var obj = this._parameters ? this._parameters[0] : undefined;
+                    var args = ["%O", obj];
+                    messageText = this._format(args);
+                    break;
+                default:
+                    var args = this._parameters || [this._messageText];
+                    messageText = this._format(args);
+            }
+        } else if (this.source === WebInspector.ConsoleMessage.MessageSource.Network) {
+            if (this._request) {
+                this._stackTrace = this._request.stackTrace;
+                if (this._request.initiator && this._request.initiator.url) {
+                    this.url = this._request.initiator.url;
+                    this.line = this._request.initiator.lineNumber;
+                }
+                messageText = document.createElement("span");
+                if (this.level === WebInspector.ConsoleMessage.MessageLevel.Error) {
+                    messageText.appendChild(document.createTextNode(this._request.requestMethod + " "));
+                    messageText.appendChild(WebInspector.linkifyRequestAsNode(this._request));
+                    if (this._request.failed)
+                        messageText.appendChild(document.createTextNode(" " + this._request.localizedFailDescription));
+                    else
+                        messageText.appendChild(document.createTextNode(" " + this._request.statusCode + " (" + this._request.statusText + ")"));
+                } else {
+                    var fragment = WebInspector.linkifyStringAsFragmentWithCustomLinkifier(this._messageText, WebInspector.linkifyRequestAsNode.bind(null, this._request, ""));
+                    messageText.appendChild(fragment);
+                }
+            } else {
+                if (this.url) {
+                    var anchor = WebInspector.linkifyURLAsNode(this.url, this.url, "console-message-url");
+                    this._formattedMessage.appendChild(anchor);
+                }
+                messageText = this._format([this._messageText]);
+            }
+        } else {
+            var args = this._parameters || [this._messageText];
+            messageText = this._format(args);
+        }
+
+        if (this.source !== WebInspector.ConsoleMessage.MessageSource.Network || this._request) {
+            if (this._stackTrace && this._stackTrace.length && this._stackTrace[0].url) {
+                var urlElement = this._linkifyCallFrame(this._stackTrace[0]);
+                this._formattedMessage.appendChild(urlElement);
+            } else if (this.url && this.url !== "undefined") {
+                var urlElement = this._linkifyLocation(this.url, this.line, this.column);
+                this._formattedMessage.appendChild(urlElement);
+            }
+        }
+
+        this._formattedMessage.appendChild(messageText);
+
+        if (this._shouldDumpStackTrace()) {
+            var ol = document.createElement("ol");
+            ol.className = "outline-disclosure";
+            var treeOutline = new TreeOutline(ol);
+
+            var content = this._formattedMessage;
+            var root = new TreeElement(content, null, true);
+            content.treeElementForTest = root;
+            treeOutline.appendChild(root);
+            if (this.type === WebInspector.ConsoleMessage.MessageType.Trace)
+                root.expand();
+
+            this._populateStackTraceTreeElement(root);
+            this._formattedMessage = ol;
+        }
+
+        // This is used for inline message bubbles in SourceFrames, or other plain-text representations.
+        this._message = messageText.textContent;
+    },
+
+    _shouldDumpStackTrace: function()
+    {
+        return !!this._stackTrace && this._stackTrace.length && (this.source === WebInspector.ConsoleMessage.MessageSource.Network || this.level === WebInspector.ConsoleMessage.MessageLevel.Error || this.type === WebInspector.ConsoleMessage.MessageType.Trace);
+    },
+
+    get message()
+    {
+        // force message formatting
+        var formattedMessage = this.formattedMessage;
+        return this._message;
+    },
+
+    get formattedMessage()
+    {
+        if (!this._formattedMessage)
+            this._formatMessage();
+        return this._formattedMessage;
+    },
+
+    _linkifyLocation: function(url, lineNumber, columnNumber)
+    {
+        // ConsoleMessage stack trace line numbers are one-based.
+        lineNumber = lineNumber ? lineNumber - 1 : 0;
+
+        return WebInspector.linkifyLocation(url, lineNumber, columnNumber, "console-message-url");
+    },
+
+    _linkifyCallFrame: function(callFrame)
+    {
+        return this._linkifyLocation(callFrame.url, callFrame.lineNumber, callFrame.columnNumber);
+    },
+
+    isErrorOrWarning: function()
+    {
+        return (this.level === WebInspector.ConsoleMessage.MessageLevel.Warning || this.level === WebInspector.ConsoleMessage.MessageLevel.Error);
+    },
+
+    _format: function(parameters)
+    {
+        // This node is used like a Builder. Values are continually appended onto it.
+        var formattedResult = document.createElement("span");
+        if (!parameters.length)
+            return formattedResult;
+
+        // Formatting code below assumes that parameters are all wrappers whereas frontend console
+        // API allows passing arbitrary values as messages (strings, numbers, etc.). Wrap them here.
+        for (var i = 0; i < parameters.length; ++i) {
+            // FIXME: Only pass runtime wrappers here.
+            if (parameters[i] instanceof WebInspector.RemoteObject)
+                continue;
+
+            if (typeof parameters[i] === "object")
+                parameters[i] = WebInspector.RemoteObject.fromPayload(parameters[i]);
+            else
+                parameters[i] = WebInspector.RemoteObject.fromPrimitiveValue(parameters[i]);
+        }
+
+        // There can be string log and string eval result. We distinguish between them based on message type.
+        var shouldFormatMessage = WebInspector.RemoteObject.type(parameters[0]) === "string" && this.type !== WebInspector.ConsoleMessage.MessageType.Result;
+
+        // Multiple parameters with the first being a format string. Save unused substitutions.
+        if (shouldFormatMessage) {
+            // Multiple parameters with the first being a format string. Save unused substitutions.
+            var result = this._formatWithSubstitutionString(parameters, formattedResult);
+            parameters = result.unusedSubstitutions;
+            if (parameters.length)
+                formattedResult.appendChild(document.createTextNode(" "));
+        }
+
+        // Single parameter, or unused substitutions from above.
+        for (var i = 0; i < parameters.length; ++i) {
+            // Inline strings when formatting.
+            if (shouldFormatMessage && parameters[i].type === "string")
+                formattedResult.appendChild(document.createTextNode(parameters[i].description));
+            else
+                formattedResult.appendChild(this._formatParameter(parameters[i]));
+            if (i < parameters.length - 1)
+                formattedResult.appendChild(document.createTextNode(" "));
+        }
+        return formattedResult;
+    },
+
+    /**
+     * @param {boolean=} forceObjectFormat
+     */
+    _formatParameter: function(output, forceObjectFormat)
+    {
+        var type;
+        if (forceObjectFormat)
+            type = "object";
+        else if (output instanceof WebInspector.RemoteObject)
+            type = output.subtype || output.type;
+        else
+            type = typeof output;
+
+        var formatter = this._customFormatters[type];
+        if (!formatter) {
+            formatter = this._formatParameterAsValue;
+            output = output.description;
+        }
+
+        var span = document.createElement("span");
+        span.className = "console-formatted-" + type + " source-code";
+        formatter.call(this, output, span);
+        return span;
+    },
+
+    _formatParameterAsValue: function(val, elem)
+    {
+        elem.appendChild(document.createTextNode(val));
+    },
+
+    _formatParameterAsObject: function(obj, elem)
+    {
+        elem.appendChild(new WebInspector.ObjectPropertiesSection(obj, obj.description).element);
+    },
+
+    _formatParameterAsNode: function(object, elem)
+    {
+        function printNode(nodeId)
+        {
+            if (!nodeId) {
+                // Sometimes DOM is loaded after the sync message is being formatted, so we get no
+                // nodeId here. So we fall back to object formatting here.
+                this._formatParameterAsObject(object, elem);
+                return;
+            }
+            var treeOutline = new WebInspector.DOMTreeOutline(false, false, true);
+            treeOutline.setVisible(true);
+            treeOutline.rootDOMNode = WebInspector.domTreeManager.nodeForId(nodeId);
+            treeOutline.element.classList.add("outline-disclosure");
+            if (!treeOutline.children[0].hasChildren)
+                treeOutline.element.classList.add("single-node");
+            elem.appendChild(treeOutline.element);
+        }
+        object.pushNodeToFrontend(printNode.bind(this));
+    },
+
+    _formatParameterAsArray: function(arr, elem)
+    {
+        arr.getOwnProperties(this._printArray.bind(this, arr, elem));
+    },
+
+    _formatParameterAsString: function(output, elem)
+    {
+        var span = document.createElement("span");
+        span.className = "console-formatted-string source-code";
+        span.appendChild(WebInspector.linkifyStringAsFragment(output.description));
+
+        // Make black quotes.
+        elem.classList.remove("console-formatted-string");
+        elem.appendChild(document.createTextNode("\""));
+        elem.appendChild(span);
+        elem.appendChild(document.createTextNode("\""));
+    },
+
+    _printArray: function(array, elem, properties)
+    {
+        if (!properties)
+            return;
+
+        var elements = [];
+        for (var i = 0; i < properties.length; ++i) {
+            var property = properties[i];
+            var name = property.name;
+            if (!isNaN(name))
+                elements[name] = this._formatAsArrayEntry(property.value);
+        }
+
+        elem.appendChild(document.createTextNode("["));
+        var lastNonEmptyIndex = -1;
+
+        function appendUndefined(elem, index)
+        {
+            if (index - lastNonEmptyIndex <= 1)
+                return;
+            var span = elem.createChild("span", "console-formatted-undefined");
+            span.textContent = WebInspector.UIString("undefined × %d").format(index - lastNonEmptyIndex - 1);
+        }
+
+        var length = array.arrayLength();
+        for (var i = 0; i < length; ++i) {
+            var element = elements[i];
+            if (!element)
+                continue;
+
+            if (i - lastNonEmptyIndex > 1) {
+                appendUndefined(elem, i);
+                elem.appendChild(document.createTextNode(", "));
+            }
+
+            elem.appendChild(element);
+            lastNonEmptyIndex = i;
+            if (i < length - 1)
+                elem.appendChild(document.createTextNode(", "));
+        }
+        appendUndefined(elem, length);
+
+        elem.appendChild(document.createTextNode("]"));
+    },
+
+    _formatAsArrayEntry: function(output)
+    {
+        // Prevent infinite expansion of cross-referencing arrays.
+        return this._formatParameter(output, output.subtype && output.subtype === "array");
+    },
+
+    _formatWithSubstitutionString: function(parameters, formattedResult)
+    {
+        var formatters = {}
+
+        function parameterFormatter(force, obj)
+        {
+            return this._formatParameter(obj, force);
+        }
+
+        function stringFormatter(obj)
+        {
+            return obj.description;
+        }
+
+        function floatFormatter(obj)
+        {
+            if (typeof obj.value !== "number")
+                return parseFloat(obj.description);
+            return obj.value;
+        }
+
+        function integerFormatter(obj)
+        {
+            if (typeof obj.value !== "number")
+                return parseInt(obj.description);
+            return Math.floor(obj.value);
+        }
+
+        var currentStyle = null;
+        function styleFormatter(obj)
+        {
+            currentStyle = {};
+            var buffer = document.createElement("span");
+            buffer.setAttribute("style", obj.description);
+            for (var i = 0; i < buffer.style.length; i++) {
+                var property = buffer.style[i];
+                if (isWhitelistedProperty(property))
+                    currentStyle[property] = buffer.style[property];
+            }
+        }
+
+        function isWhitelistedProperty(property)
+        {
+            var prefixes = ["background", "border", "color", "font", "line", "margin", "padding", "text", "-webkit-background", "-webkit-border", "-webkit-font", "-webkit-margin", "-webkit-padding", "-webkit-text"];
+            for (var i = 0; i < prefixes.length; i++) {
+                if (property.startsWith(prefixes[i]))
+                    return true;
+            }
+            return false;
+        }
+
+        // Firebug uses %o for formatting objects.
+        formatters.o = parameterFormatter.bind(this, false);
+        formatters.s = stringFormatter;
+        formatters.f = floatFormatter;
+
+        // Firebug allows both %i and %d for formatting integers.
+        formatters.i = integerFormatter;
+        formatters.d = integerFormatter;
+
+        // Firebug uses %c for styling the message.
+        formatters.c = styleFormatter;
+
+        // Support %O to force object formatting, instead of the type-based %o formatting.
+        formatters.O = parameterFormatter.bind(this, true);
+
+        function append(a, b)
+        {
+            if (b instanceof Node)
+                a.appendChild(b);
+            else if (b) {
+                var toAppend = WebInspector.linkifyStringAsFragment(b.toString());
+                if (currentStyle) {
+                    var wrapper = document.createElement("span");
+                    for (var key in currentStyle)
+                        wrapper.style[key] = currentStyle[key];
+                    wrapper.appendChild(toAppend);
+                    toAppend = wrapper;
+                }
+                a.appendChild(toAppend);
+            }
+            return a;
+        }
+
+        // String.format does treat formattedResult like a Builder, result is an object.
+        return String.format(parameters[0].description, parameters.slice(1), formatters, formattedResult, append);
+    },
+
+    clearHighlight: function()
+    {
+        if (!this._formattedMessage)
+            return;
+
+        var highlightedMessage = this._formattedMessage;
+        delete this._formattedMessage;
+        this._formatMessage();
+        this._element.replaceChild(this._formattedMessage, highlightedMessage);
+    },
+
+    highlightSearchResults: function(regexObject)
+    {
+        if (!this._formattedMessage)
+            return;
+
+        regexObject.lastIndex = 0;
+        var text = this.message;
+        var match = regexObject.exec(text);
+        var offset = 0;
+        var matchRanges = [];
+        while (match) {
+            matchRanges.push({ offset: match.index, length: match[0].length });
+            match = regexObject.exec(text);
+        }
+        highlightSearchResults(this._formattedMessage, matchRanges);
+        this._element.scrollIntoViewIfNeeded();
+    },
+
+    matchesRegex: function(regexObject)
+    {
+        return regexObject.test(this.message);
+    },
+
+    toMessageElement: function()
+    {
+        if (this._element)
+            return this._element;
+
+        var element = document.createElement("div");
+        element.message = this;
+        element.className = "console-message";
+
+        this._element = element;
+
+        switch (this.level) {
+            case WebInspector.ConsoleMessage.MessageLevel.Tip:
+                element.classList.add("console-tip-level");
+                break;
+            case WebInspector.ConsoleMessage.MessageLevel.Log:
+                element.classList.add("console-log-level");
+                break;
+            case WebInspector.ConsoleMessage.MessageLevel.Debug:
+                element.classList.add("console-debug-level");
+                break;
+            case WebInspector.ConsoleMessage.MessageLevel.Warning:
+                element.classList.add("console-warning-level");
+                break;
+            case WebInspector.ConsoleMessage.MessageLevel.Error:
+                element.classList.add("console-error-level");
+                break;
+        }
+
+        if (this.type === WebInspector.ConsoleMessage.MessageType.StartGroup || this.type === WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed)
+            element.classList.add("console-group-title");
+
+        element.appendChild(this.formattedMessage);
+
+        if (this.repeatCount > 1)
+            this.updateRepeatCount();
+
+        return element;
+    },
+
+    _populateStackTraceTreeElement: function(parentTreeElement)
+    {
+        for (var i = 0; i < this._stackTrace.length; i++) {
+            var frame = this._stackTrace[i];
+
+            var content = document.createElement("div");
+            var messageTextElement = document.createElement("span");
+            messageTextElement.className = "console-message-text source-code";
+            var functionName = frame.functionName || WebInspector.UIString("(anonymous function)");
+            messageTextElement.appendChild(document.createTextNode(functionName));
+            content.appendChild(messageTextElement);
+
+            if (frame.url) {
+                var urlElement = this._linkifyCallFrame(frame);
+                content.appendChild(urlElement);
+            }
+
+            var treeElement = new TreeElement(content);
+            parentTreeElement.appendChild(treeElement);
+        }
+    },
+
+    updateRepeatCount: function() {
+        if (!this.repeatCountElement) {
+            this.repeatCountElement = document.createElement("span");
+            this.repeatCountElement.className = "bubble";
+
+            this._element.insertBefore(this.repeatCountElement, this._element.firstChild);
+        }
+        this.repeatCountElement.textContent = this.repeatCount;
+    },
+
+    toString: function()
+    {
+        var sourceString;
+        switch (this.source) {
+            case WebInspector.ConsoleMessage.MessageSource.HTML:
+                sourceString = "HTML";
+                break;
+            case WebInspector.ConsoleMessage.MessageSource.XML:
+                sourceString = "XML";
+                break;
+            case WebInspector.ConsoleMessage.MessageSource.JS:
+                sourceString = "JS";
+                break;
+            case WebInspector.ConsoleMessage.MessageSource.Network:
+                sourceString = "Network";
+                break;
+            case WebInspector.ConsoleMessage.MessageSource.ConsoleAPI:
+                sourceString = "ConsoleAPI";
+                break;
+            case WebInspector.ConsoleMessage.MessageSource.Other:
+                sourceString = "Other";
+                break;
+        }
+
+        var typeString;
+        switch (this.type) {
+            case WebInspector.ConsoleMessage.MessageType.Log:
+                typeString = "Log";
+                break;
+            case WebInspector.ConsoleMessage.MessageType.Dir:
+                typeString = "Dir";
+                break;
+            case WebInspector.ConsoleMessage.MessageType.DirXML:
+                typeString = "Dir XML";
+                break;
+            case WebInspector.ConsoleMessage.MessageType.Trace:
+                typeString = "Trace";
+                break;
+            case WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed:
+            case WebInspector.ConsoleMessage.MessageType.StartGroup:
+                typeString = "Start Group";
+                break;
+            case WebInspector.ConsoleMessage.MessageType.EndGroup:
+                typeString = "End Group";
+                break;
+            case WebInspector.ConsoleMessage.MessageType.Assert:
+                typeString = "Assert";
+                break;
+            case WebInspector.ConsoleMessage.MessageType.Result:
+                typeString = "Result";
+                break;
+        }
+
+        return sourceString + " " + typeString + " " + this.levelString + ": " + this.formattedMessage.textContent + "\n" + this.url + " line " + this.line;
+    },
+
+    get text()
+    {
+        return this._messageText;
+    },
+
+    isEqual: function(msg)
+    {
+        if (!msg)
+            return false;
+
+        if (this._stackTrace) {
+            if (!msg._stackTrace)
+                return false;
+            var l = this._stackTrace;
+            var r = msg._stackTrace;
+            for (var i = 0; i < l.length; i++) {
+                if (l[i].url !== r[i].url ||
+                    l[i].functionName !== r[i].functionName ||
+                    l[i].lineNumber !== r[i].lineNumber ||
+                    l[i].columnNumber !== r[i].columnNumber)
+                    return false;
+            }
+        }
+
+        return (this.source === msg.source)
+            && (this.type === msg.type)
+            && (this.level === msg.level)
+            && (this.line === msg.line)
+            && (this.url === msg.url)
+            && (this.message === msg.message)
+            && (this._request === msg._request);
+    },
+
+    get stackTrace()
+    {
+        return this._stackTrace;
+    },
+
+    /**
+     * @return {WebInspector.ConsoleMessage}
+     */
+    clone: function()
+    {
+        return WebInspector.ConsoleMessage.create(this.source, this.level, this._messageText, this.type, this.url, this.line, this.column, this.repeatCount, this._parameters, this._stackTrace, this._request);
+    },
+
+    get levelString()
+    {
+        switch (this.level) {
+            case WebInspector.ConsoleMessage.MessageLevel.Tip:
+                return "Tip";
+            case WebInspector.ConsoleMessage.MessageLevel.Log:
+                return "Log";
+            case WebInspector.ConsoleMessage.MessageLevel.Warning:
+                return "Warning";
+            case WebInspector.ConsoleMessage.MessageLevel.Debug:
+                return "Debug";
+            case WebInspector.ConsoleMessage.MessageLevel.Error:
+                return "Error";
+        }
+    },
+
+    get clipboarPrefixString ()
+    {
+        return "[" + this.levelString + "] ";
+    },
+
+    toClipboardString: function(isPrefixOptional)
+    {
+        var isTrace = this._shouldDumpStackTrace();
+        
+        var clipboardString = "";
+        if (this._formattedMessage && !isTrace)
+            clipboardString = this._formattedMessage.querySelector("span").innerText;
+        else
+            clipboardString = this.type === WebInspector.ConsoleMessage.MessageType.Trace ? "console.trace()" : this._message || this._messageText;
+
+        if (!isPrefixOptional || this.enforcesClipboardPrefixString)
+            clipboardString = this.clipboarPrefixString + clipboardString;
+
+        if (isTrace) {
+            this._stackTrace.forEach(function(frame) {
+                clipboardString += "\n\t" + (frame.functionName || WebInspector.UIString("(anonymous function)"));
+                if (frame.url)
+                    clipboardString += " (" + WebInspector.displayNameForURL(frame.url) + ", line " + frame.lineNumber + ")";
+            });
+        }
+        else {
+            var repeatString = this.repeatCount > 1 ? "x" + this.repeatCount : "";
+
+            var urlLine = "";
+            if (this.url) {
+                var components = [WebInspector.displayNameForURL(this.url), "line " + this.line];
+                if (repeatString)
+                    components.push(repeatString);
+                urlLine = " (" + components.join(", ") + ")";
+            } else if (repeatString)
+                urlLine = " (" + repeatString + ")";
+        
+            if (urlLine) {
+                var lines = clipboardString.split("\n");
+                lines[0] += urlLine;
+                clipboardString = lines.join("\n");
+            }
+        }
+
+        return clipboardString;
+    }
+
+}
+
+WebInspector.ConsoleMessageImpl.prototype.__proto__ = WebInspector.ConsoleMessage.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ConsoleObserver.js b/Source/WebInspectorUI/UserInterface/ConsoleObserver.js
new file mode 100644
index 000000000..fe18bc6c3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ConsoleObserver.js
@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ConsoleObserver = function()
+{
+    WebInspector.Object.call(this);
+};
+
+WebInspector.ConsoleObserver.prototype = {
+    constructor: WebInspector.ConsoleObserver,
+
+    // Events defined by the "Console" domain (see WebCore/inspector/Inspector.json).
+
+    messageAdded: function(message)
+    {
+        if (message.level === "warning" || message.level === "error")
+            WebInspector.issueManager.issueWasAdded(message.source, message.level, message.text, message.url, message.line, message.column || 0, message.parameters);
+
+        if (message.url === "[native code]") {
+            if (message.type === "profile")
+                WebInspector.profileManager.profileWasStartedFromConsole(message.text);
+            else if (message.type === "profileEnd")
+                WebInspector.profileManager.profileWasEndedFromConsole();
+        }
+
+        if (message.source === "console-api" && message.type === "clear")
+            return;
+
+        WebInspector.logManager.messageWasAdded(message.source, message.level, message.text, message.type, message.url, message.line, message.column || 0, message.repeatCount, message.parameters, message.stackTrace, message.networkRequestId);
+    },
+
+    messageRepeatCountUpdated: function(count)
+    {
+        WebInspector.logManager.messageRepeatCountUpdated(count);
+    },
+
+    messagesCleared: function()
+    {
+        WebInspector.logManager.messagesCleared();
+    }
+};
+
+WebInspector.ConsoleObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ConsolePrompt.css b/Source/WebInspectorUI/UserInterface/ConsolePrompt.css
new file mode 100644
index 000000000..7466d0a34
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ConsolePrompt.css
@@ -0,0 +1,37 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.console-prompt {
+    background-color: white;
+}
+
+.console-prompt > .CodeMirror {
+    width: 100%;
+    height: auto;
+}
+
+.console-prompt > .CodeMirror-scroll {
+    overflow: hidden;
+}
diff --git a/Source/WebInspectorUI/UserInterface/ConsolePrompt.js b/Source/WebInspectorUI/UserInterface/ConsolePrompt.js
new file mode 100644
index 000000000..5b62b8a1f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ConsolePrompt.js
@@ -0,0 +1,291 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ConsolePrompt = function(delegate, mimeType, element)
+{
+    WebInspector.Object.call(this);
+
+    this._element = element || document.createElement("div");
+    this._element.classList.add(WebInspector.ConsolePrompt.StyleClassName);
+    this._element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
+
+    this._delegate = delegate || null;
+
+    this._codeMirror = CodeMirror(this.element, {
+        lineWrapping: true,
+        mode: mimeType,
+        indentWithTabs: true,
+        indentUnit: 4,
+        matchBrackets: true
+    });
+
+    var keyMap = {
+        "Up": this._handlePreviousKey.bind(this),
+        "Down": this._handleNextKey.bind(this),
+        "Ctrl-P": this._handlePreviousKey.bind(this),
+        "Ctrl-N": this._handleNextKey.bind(this),
+        "Enter": this._handleEnterKey.bind(this),
+        "Cmd-Enter": this._handleCommandEnterKey.bind(this)
+    };
+
+    this._codeMirror.addKeyMap(keyMap);
+
+    this._completionController = new WebInspector.CodeMirrorCompletionController(this._codeMirror, this);
+
+    this._history = [{}];
+    this._historyIndex = 0;
+};
+
+WebInspector.ConsolePrompt.StyleClassName = "console-prompt";
+WebInspector.ConsolePrompt.MaximumHistorySize = 30;
+
+WebInspector.ConsolePrompt.prototype = {
+    constructor: WebInspector.ConsolePrompt,
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get delegate()
+    {
+        return this._delegate;
+    },
+
+    set delegate(delegate)
+    {
+        this._delegate = delegate || null;
+    },
+
+    get text()
+    {
+        return this._codeMirror.getValue();
+    },
+
+    set text(text)
+    {
+        this._codeMirror.setValue(text || "");
+        this._codeMirror.clearHistory();
+        this._codeMirror.markClean();
+    },
+
+    get history()
+    {
+        this._history[this._historyIndex] = this._historyEntryForCurrentText();
+        return this._history;
+    },
+
+    set history(history)
+    {
+        this._history = history instanceof Array ? history.slice(0, WebInspector.ConsolePrompt.MaximumHistorySize) : [{}];
+        this._historyIndex = 0;
+        this._restoreHistoryEntry(0);
+    },
+
+    get focused()
+    {
+        return this._codeMirror.getWrapperElement().classList.contains("CodeMirror-focused");
+    },
+
+    focus: function()
+    {
+        this._codeMirror.focus();
+    },
+
+    shown: function()
+    {
+        this._codeMirror.refresh();
+    },
+
+    updateLayout: function()
+    {
+        this._codeMirror.refresh();
+    },
+
+    updateCompletions: function(completions, implicitSuffix)
+    {
+        this._completionController.updateCompletions(completions, implicitSuffix);
+    },
+
+    // Protected
+
+    completionControllerCompletionsNeeded: function(completionController, prefix, defaultCompletions, base, suffix, forced)
+    {
+        if (this.delegate && typeof this.delegate.consolePromptCompletionsNeeded === "function")
+            this.delegate.consolePromptCompletionsNeeded(this, defaultCompletions, base, prefix, suffix, forced);
+        else
+            this._completionController.updateCompletions(defaultCompletions);
+    },
+
+    completionControllerShouldAllowEscapeCompletion: function(completionController)
+    {
+        // Only allow escape to complete if there is text in the prompt. Otherwise allow it to pass through
+        // so escape to toggle the quick console still works.
+        return !!this.text;
+    },
+
+    // Private
+
+    _handlePreviousKey: function(codeMirror)
+    {
+        if (this._codeMirror.somethingSelected())
+            return CodeMirror.Pass;
+
+        // Pass unless we are on the first line.
+        if (this._codeMirror.getCursor().line)
+            return CodeMirror.Pass;
+
+        var historyEntry = this._history[this._historyIndex + 1];
+        if (!historyEntry)
+            return CodeMirror.Pass;
+
+        this._rememberCurrentTextInHistory();
+
+        ++this._historyIndex;
+
+        this._restoreHistoryEntry(this._historyIndex);
+    },
+
+    _handleNextKey: function(codeMirror)
+    {
+        if (this._codeMirror.somethingSelected())
+            return CodeMirror.Pass;
+
+        // Pass unless we are on the last line.
+        if (this._codeMirror.getCursor().line !== this._codeMirror.lastLine())
+            return CodeMirror.Pass;
+
+        var historyEntry = this._history[this._historyIndex - 1];
+        if (!historyEntry)
+            return CodeMirror.Pass;
+
+        this._rememberCurrentTextInHistory();
+
+        --this._historyIndex;
+
+        this._restoreHistoryEntry(this._historyIndex);
+    },
+
+    _handleEnterKey: function(codeMirror, forceCommit)
+    {
+        var currentText = this.text;
+
+        // Always do nothing when there is just whitespace.
+        if (!currentText.trim())
+            return;
+
+        var cursor = this._codeMirror.getCursor();
+        var lastLine = this._codeMirror.lastLine();
+        var lastLineLength = this._codeMirror.getLine(lastLine).length;
+        var cursorIsAtLastPosition = positionsEqual(cursor, {line: lastLine, ch: lastLineLength});
+
+        function positionsEqual(a, b)
+        {
+            console.assert(a);
+            console.assert(b);
+            return a.line === b.line && a.ch === b.ch;
+        }
+
+        function commitTextOrInsertNewLine(commit)
+        {
+            if (!commit) {
+                // Only insert a new line if the previous cursor and the current cursor are in the same position.
+                if (positionsEqual(cursor, this._codeMirror.getCursor()))
+                    CodeMirror.commands.newlineAndIndent(this._codeMirror);
+                return;
+            }
+
+            var historyEntry = this._historyEntryForCurrentText();
+
+            // Replace the previous entry if it does not have text or if the text is the same.
+            if (this._history[1] && (!this._history[1].text || this._history[1].text === historyEntry.text)) {
+                this._history[1] = historyEntry;
+                this._history[0] = {};
+            } else {
+                // Replace the first history entry and push a new empty one.
+                this._history[0] = historyEntry;
+                this._history.unshift({});
+
+                // Trim the history length if needed.
+                if (this._history.length > WebInspector.ConsolePrompt.MaximumHistorySize)
+                    this._history = this._history.slice(0, WebInspector.ConsolePrompt.MaximumHistorySize);
+            }
+
+            this._historyIndex = 0;
+
+            this._codeMirror.setValue("");
+            this._codeMirror.clearHistory();
+
+            if (this.delegate && typeof this.delegate.consolePromptHistoryDidChange === "function")
+                this.delegate.consolePromptHistoryDidChange(this);
+
+            if (this.delegate && typeof this.delegate.consolePromptTextCommitted === "function")
+                this.delegate.consolePromptTextCommitted(this, currentText);
+        }
+
+        if (!forceCommit && this.delegate && typeof this.delegate.consolePromptShouldCommitText === "function") {
+            this.delegate.consolePromptShouldCommitText(this, currentText, cursorIsAtLastPosition, commitTextOrInsertNewLine.bind(this));
+            return;
+        }
+
+        commitTextOrInsertNewLine.call(this, true);
+    },
+
+    _handleCommandEnterKey: function(codeMirror)
+    {
+        this._handleEnterKey(codeMirror, true);
+    },
+
+    _restoreHistoryEntry: function(index)
+    {
+        var historyEntry = this._history[index];
+
+        this._codeMirror.setValue(historyEntry.text || "");
+
+        if (historyEntry.undoHistory)
+            this._codeMirror.setHistory(historyEntry.undoHistory);
+        else
+            this._codeMirror.clearHistory();
+
+        this._codeMirror.setCursor(historyEntry.cursor || {line: 0});
+    },
+
+    _historyEntryForCurrentText: function()
+    {
+        return {text: this.text, undoHistory: this._codeMirror.getHistory(), cursor: this._codeMirror.getCursor()};
+    },
+
+    _rememberCurrentTextInHistory: function()
+    {
+        this._history[this._historyIndex] = this._historyEntryForCurrentText();
+
+        if (this.delegate && typeof this.delegate.consolePromptHistoryDidChange === "function")
+            this.delegate.consolePromptHistoryDidChange(this);
+    }
+};
+
+WebInspector.ConsolePrompt.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ContentBrowser.css b/Source/WebInspectorUI/UserInterface/ContentBrowser.css
new file mode 100644
index 000000000..bd691d0a2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ContentBrowser.css
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-browser {
+    display: -webkit-flex;
+    -webkit-flex-direction: column;
+}
+
+.content-browser > .content-view-container {
+    display: -webkit-flex;
+    -webkit-flex: 1;
+}
diff --git a/Source/WebInspectorUI/UserInterface/ContentBrowser.js b/Source/WebInspectorUI/UserInterface/ContentBrowser.js
new file mode 100644
index 000000000..9193c52a7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ContentBrowser.js
@@ -0,0 +1,526 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ContentBrowser = function(element, delegate, disableBackForward)
+{
+    WebInspector.Object.call(this);
+
+    this._element = element || document.createElement("div");
+    this._element.classList.add(WebInspector.ContentBrowser.StyleClassName);
+
+    this._navigationBar = new WebInspector.NavigationBar;
+    this._element.appendChild(this._navigationBar.element);
+
+    this._contentViewContainer = new WebInspector.ContentViewContainer;
+    this._contentViewContainer.addEventListener(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
+    this._element.appendChild(this._contentViewContainer.element);
+
+    this._findBanner = new WebInspector.FindBanner(this);
+    this._findKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "F", this._showFindBanner.bind(this));
+    this._findBanner.addEventListener(WebInspector.FindBanner.Event.DidShow, this._findBannerDidShow, this);
+    this._findBanner.addEventListener(WebInspector.FindBanner.Event.DidHide, this._findBannerDidHide, this);
+
+    this._saveKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "S", this._save.bind(this));
+    this._saveAsKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.Command, "S", this._saveAs.bind(this));
+
+    if (!disableBackForward) {
+        this._backKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command | WebInspector.KeyboardShortcut.Modifier.Control, WebInspector.KeyboardShortcut.Key.Left, this._backButtonClicked.bind(this));
+        this._forwardKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command | WebInspector.KeyboardShortcut.Modifier.Control, WebInspector.KeyboardShortcut.Key.Right, this._forwardButtonClicked.bind(this));
+
+        this._backButtonNavigationItem = new WebInspector.ButtonNavigationItem("back", WebInspector.UIString("Back (%s)").format(this._backKeyboardShortcut.displayName), "Images/BackArrow.pdf", 9, 9);
+        this._backButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._backButtonClicked, this);
+        this._backButtonNavigationItem.enabled = false;
+        this._navigationBar.addNavigationItem(this._backButtonNavigationItem);
+
+        this._forwardButtonNavigationItem = new WebInspector.ButtonNavigationItem("forward", WebInspector.UIString("Forward (%s)").format(this._forwardKeyboardShortcut.displayName), "Images/ForwardArrow.pdf", 9, 9);
+        this._forwardButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._forwardButtonClicked, this);
+        this._forwardButtonNavigationItem.enabled = false;
+        this._navigationBar.addNavigationItem(this._forwardButtonNavigationItem);
+
+        this._navigationBar.addNavigationItem(new WebInspector.DividerNavigationItem);
+    }
+
+    this._hierarchicalPathNavigationItem = new WebInspector.HierarchicalPathNavigationItem;
+    this._hierarchicalPathNavigationItem.addEventListener(WebInspector.HierarchicalPathNavigationItem.Event.PathComponentWasSelected, this._hierarchicalPathComponentWasSelected, this);
+    this._navigationBar.addNavigationItem(this._hierarchicalPathNavigationItem);
+
+    this._contentViewSelectionPathNavigationItem = new WebInspector.HierarchicalPathNavigationItem;
+
+    this._navigationBar.addNavigationItem(new WebInspector.FlexibleSpaceNavigationItem);
+
+    WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.SelectionPathComponentsDidChange, this._contentViewSelectionPathComponentDidChange, this);
+    WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange, this._contentViewSupplementalRepresentedObjectsDidChange, this);
+    WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange, this._contentViewNumberOfSearchResultsDidChange, this);
+    WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.NavigationItemsDidChange, this._contentViewNavigationItemsDidChange, this);
+
+    this._delegate = delegate || null;
+
+    this._currentContentViewNavigationItems = [];
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.ContentBrowser);
+
+WebInspector.ContentBrowser.StyleClassName = "content-browser";
+
+WebInspector.ContentBrowser.Event = {
+    CurrentRepresentedObjectsDidChange: "content-browser-current-represented-objects-did-change",
+    CurrentContentViewDidChange: "content-browser-current-content-view-did-change"
+};
+
+WebInspector.ContentBrowser.prototype = {
+    constructor: WebInspector.ContentBrowser,
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get navigationBar()
+    {
+        return this._navigationBar;
+    },
+
+    get contentViewContainer()
+    {
+        return this._contentViewContainer;
+    },
+
+    get delegate()
+    {
+        return this._delegate;
+    },
+
+    set delegate(newDelegate)
+    {
+        this._delegate = newDelegate || null;
+    },
+
+    get currentContentView()
+    {
+        return this._contentViewContainer.currentContentView;
+    },
+
+    get currentRepresentedObjects()
+    {
+        var representedObjects = [];
+
+        var lastComponent = this._hierarchicalPathNavigationItem.lastComponent;
+        if (lastComponent && lastComponent.representedObject)
+            representedObjects.push(lastComponent.representedObject);
+
+        lastComponent = this._contentViewSelectionPathNavigationItem.lastComponent;
+        if (lastComponent && lastComponent.representedObject)
+            representedObjects.push(lastComponent.representedObject);
+
+        var currentContentView = this.currentContentView;
+        if (currentContentView) {
+            var supplementalRepresentedObjects = currentContentView.supplementalRepresentedObjects;
+            if (supplementalRepresentedObjects && supplementalRepresentedObjects.length)
+                representedObjects = representedObjects.concat(supplementalRepresentedObjects);
+        }
+
+        return representedObjects;
+    },
+
+    updateLayout: function()
+    {
+        this._navigationBar.updateLayout();
+        this._contentViewContainer.updateLayout();
+    },
+
+    showContentViewForRepresentedObject: function(representedObject)
+    {
+        return this._contentViewContainer.showContentViewForRepresentedObject(representedObject);
+    },
+
+    showContentView: function(contentView)
+    {
+        return this._contentViewContainer.showContentView(contentView);
+    },
+
+    contentViewForRepresentedObject: function(representedObject, onlyExisting)
+    {
+        return this._contentViewContainer.contentViewForRepresentedObject(representedObject, onlyExisting);
+    },
+
+    canGoBack: function()
+    {
+        var currentContentView = this.currentContentView;
+        if (currentContentView && currentContentView.canGoBack())
+            return true;
+        return this._contentViewContainer.canGoBack();
+    },
+
+    canGoForward: function()
+    {
+        var currentContentView = this.currentContentView;
+        if (currentContentView && currentContentView.canGoForward())
+            return true;
+        return this._contentViewContainer.canGoForward();
+    },
+
+    goBack: function()
+    {
+        var currentContentView = this.currentContentView;
+        if (currentContentView && currentContentView.canGoBack()) {
+            currentContentView.goBack();
+            this._updateBackForwardButtons();
+            return;
+        }
+
+        this._contentViewContainer.goBack();
+
+        // The _updateBackForwardButtons function is called by _currentContentViewDidChange,
+        // so it does not need to be called here.
+    },
+
+    goForward: function()
+    {
+        var currentContentView = this.currentContentView;
+        if (currentContentView && currentContentView.canGoForward()) {
+            currentContentView.goForward();
+            this._updateBackForwardButtons();
+            return;
+        }
+
+        this._contentViewContainer.goForward();
+
+        // The _updateBackForwardButtons function is called by _currentContentViewDidChange,
+        // so it does not need to be called here.
+    },
+
+    findBannerPerformSearch: function(findBanner, query)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+
+        currentContentView.performSearch(query);
+    },
+
+    findBannerSearchCleared: function(findBanner)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+
+        currentContentView.searchCleared();
+    },
+
+    findBannerSearchQueryForSelection: function(findBanner)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return null;
+
+        return currentContentView.searchQueryWithSelection();
+    },
+
+    findBannerRevealPreviousResult: function(findBanner)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+
+        currentContentView.revealPreviousSearchResult(!findBanner.showing);
+    },
+
+    findBannerRevealNextResult: function(findBanner)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+
+        currentContentView.revealNextSearchResult(!findBanner.showing);
+    },
+
+    // Private
+
+    _backButtonClicked: function(event)
+    {
+        this.goBack();
+    },
+
+    _forwardButtonClicked: function(event)
+    {
+        this.goForward();
+    },
+
+    _saveDataToFile: function(saveData, forceSaveAs)
+    {
+        console.assert(saveData);
+        if (!saveData)
+            return;
+
+        console.assert(saveData.url);
+        console.assert(typeof saveData.content === "string");
+        if (!saveData.url || typeof saveData.content !== "string")
+            return;
+
+        InspectorFrontendHost.save(saveData.url, saveData.content, forceSaveAs || saveData.forceSaveAs);
+    },
+
+    _save: function(event)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSave)
+            return;
+
+        this._saveDataToFile(currentContentView.saveData);
+    },
+
+    _saveAs: function(event)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSave)
+            return;
+
+        this._saveDataToFile(currentContentView.saveData, true);
+    },
+
+    _showFindBanner: function(event)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+
+        this._findBanner.show();
+    },
+
+    _findBannerDidShow: function(event)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+
+        currentContentView.automaticallyRevealFirstSearchResult = true;
+    },
+
+    _findBannerDidHide: function(event)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+
+        currentContentView.automaticallyRevealFirstSearchResult = false;
+    },
+
+    _contentViewNumberOfSearchResultsDidChange: function(event)
+    {
+        if (event.target !== this.currentContentView)
+            return;
+
+        this._findBanner.numberOfResults = this.currentContentView.numberOfSearchResults;
+    },
+
+    _updateHierarchicalPathNavigationItem: function(representedObject)
+    {
+        if (!this.delegate || typeof this.delegate.contentBrowserTreeElementForRepresentedObject !== "function")
+            return;
+
+        var treeElement = representedObject ? this.delegate.contentBrowserTreeElementForRepresentedObject(this, representedObject) : null;
+        var pathComponents = [];
+
+        while (treeElement && !treeElement.root) {
+            var pathComponent = new WebInspector.GeneralTreeElementPathComponent(treeElement);
+            pathComponents.unshift(pathComponent);
+            treeElement = treeElement.parent;
+        }
+
+        this._hierarchicalPathNavigationItem.components = pathComponents;
+    },
+
+    _updateContentViewSelectionPathNavigationItem: function(contentView)
+    {
+        var selectionPathComponents = contentView ? contentView.selectionPathComponents || [] : [];
+        this._contentViewSelectionPathNavigationItem.components = selectionPathComponents;
+
+        if (!selectionPathComponents.length) {
+            this._hierarchicalPathNavigationItem.alwaysShowLastPathComponentSeparator = false;
+            this._navigationBar.removeNavigationItem(this._contentViewSelectionPathNavigationItem);
+            return;
+        }
+
+        // Insert the _contentViewSelectionPathNavigationItem after the _hierarchicalPathNavigationItem, if needed.
+        if (!this._navigationBar.navigationItems.contains(this._contentViewSelectionPathNavigationItem)) {
+            var hierarchicalPathItemIndex = this._navigationBar.navigationItems.indexOf(this._hierarchicalPathNavigationItem);
+            console.assert(hierarchicalPathItemIndex !== -1);
+            this._navigationBar.insertNavigationItem(this._contentViewSelectionPathNavigationItem, hierarchicalPathItemIndex + 1);
+            this._hierarchicalPathNavigationItem.alwaysShowLastPathComponentSeparator = true;
+        }
+    },
+
+    _updateBackForwardButtons: function()
+    {
+        if (!this._backButtonNavigationItem || !this._forwardButtonNavigationItem)
+            return;
+
+        this._backButtonNavigationItem.enabled = this.canGoBack();
+        this._forwardButtonNavigationItem.enabled = this.canGoForward();
+    },
+
+    _updateContentViewNavigationItems: function()
+    {
+        var navigationBar = this.navigationBar;
+
+        // First, we remove the navigation items added by the previous content view.
+        this._currentContentViewNavigationItems.forEach(function(navigationItem) {
+            navigationBar.removeNavigationItem(navigationItem);
+        });
+
+        var currentContentView = this.currentContentView;
+        if (!currentContentView) {
+            this._currentContentViewNavigationItems = [];
+            return;
+        }
+
+        var insertionIndex = navigationBar.navigationItems.length;
+        console.assert(insertionIndex >= 0);
+
+        // Keep track of items we'll be adding to the navigation bar.
+        var newNavigationItems = [];
+
+        // Go through each of the items of the new content view and add a divider before them.
+        currentContentView.navigationItems.forEach(function(navigationItem, index) {
+            // Add dividers before items unless it's the first item and not a button. 
+            if (index !== 0 || navigationItem instanceof WebInspector.ButtonNavigationItem) {
+                var divider = new WebInspector.DividerNavigationItem;
+                navigationBar.insertNavigationItem(divider, insertionIndex++);
+                newNavigationItems.push(divider);
+            }
+            navigationBar.insertNavigationItem(navigationItem, insertionIndex++);
+            newNavigationItems.push(navigationItem);
+        });
+
+        // Remember the navigation items we inserted so we can remove them
+        // for the next content view.
+        this._currentContentViewNavigationItems = newNavigationItems;
+    },
+
+    _updateFindBanner: function(currentContentView)
+    {
+        if (!currentContentView) {
+            this._findBanner.targetElement = null;
+            this._findBanner.numberOfResults = null;
+            return;
+        }
+        
+        this._findBanner.targetElement = currentContentView.element;
+        this._findBanner.numberOfResults = currentContentView.hasPerformedSearch ? currentContentView.numberOfSearchResults : null;
+
+        if (currentContentView.supportsSearch && this._findBanner.searchQuery) {
+            currentContentView.automaticallyRevealFirstSearchResult = this._findBanner.showing;
+            currentContentView.performSearch(this._findBanner.searchQuery);
+        }
+    },
+
+    _dispatchCurrentRepresentedObjectsDidChangeEventSoon: function()
+    {
+        if (this._currentRepresentedObjectsDidChangeTimeout)
+            return;
+        this._currentRepresentedObjectsDidChangeTimeout = setTimeout(this._dispatchCurrentRepresentedObjectsDidChangeEvent.bind(this), 0);
+    },
+
+    _dispatchCurrentRepresentedObjectsDidChangeEvent: function()
+    {
+        if (this._currentRepresentedObjectsDidChangeTimeout) {
+            clearTimeout(this._currentRepresentedObjectsDidChangeTimeout);
+            delete this._currentRepresentedObjectsDidChangeTimeout;
+        }
+
+        this.dispatchEventToListeners(WebInspector.ContentBrowser.Event.CurrentRepresentedObjectsDidChange);
+    },
+
+    _contentViewSelectionPathComponentDidChange: function(event)
+    {
+        if (event.target !== this.currentContentView)
+            return;
+
+        this._updateContentViewSelectionPathNavigationItem(event.target);
+        this._updateBackForwardButtons();
+
+        this._updateContentViewNavigationItems();
+
+        this._navigationBar.updateLayout();
+
+        this._dispatchCurrentRepresentedObjectsDidChangeEventSoon();
+    },
+
+    _contentViewSupplementalRepresentedObjectsDidChange: function(event)
+    {
+        if (event.target !== this.currentContentView)
+            return;
+
+        this._dispatchCurrentRepresentedObjectsDidChangeEventSoon();
+    },
+
+    _currentContentViewDidChange: function(event)
+    {
+        var currentContentView = this.currentContentView;
+
+        this._updateHierarchicalPathNavigationItem(currentContentView ? currentContentView.representedObject : null);
+        this._updateContentViewSelectionPathNavigationItem(currentContentView);
+        this._updateBackForwardButtons();
+
+        this._updateContentViewNavigationItems();
+        this._updateFindBanner(currentContentView);
+
+        this._navigationBar.updateLayout();
+
+        this.dispatchEventToListeners(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange);
+
+        this._dispatchCurrentRepresentedObjectsDidChangeEvent();
+    },
+
+    _contentViewNavigationItemsDidChange: function(event)
+    {
+        if (event.target !== this.currentContentView)
+            return;
+
+        this._updateContentViewNavigationItems();
+        this._navigationBar.updateLayout();
+    },
+
+    _hierarchicalPathComponentWasSelected: function(event)
+    {
+        console.assert(event.data.pathComponent instanceof WebInspector.GeneralTreeElementPathComponent);
+
+        var treeElement = event.data.pathComponent.generalTreeElement;
+        var originalTreeElement = treeElement;
+
+        // Some tree elements (like folders) are not viewable. Find the first descendant that is viewable.
+        while (treeElement && !WebInspector.ContentView.isViewable(treeElement.representedObject))
+            treeElement = treeElement.traverseNextTreeElement(false, originalTreeElement, false);
+
+        if (!treeElement)
+            return;
+
+        this.showContentViewForRepresentedObject(treeElement.representedObject);
+    }
+};
+
+WebInspector.ContentBrowser.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ContentView.css b/Source/WebInspectorUI/UserInterface/ContentView.css
new file mode 100644
index 000000000..aafa2adbe
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ContentView.css
@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view > .indeterminate-progress-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+
+    width: 32px;
+    height: 32px;
+
+    margin-left: -16px;
+    margin-right: -16px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/ContentView.js b/Source/WebInspectorUI/UserInterface/ContentView.js
new file mode 100644
index 000000000..c3584f601
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ContentView.js
@@ -0,0 +1,303 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ContentView = function(representedObject)
+{
+    if (this.constructor === WebInspector.ContentView) {
+        // When instantiated directly return an instance of a type-based concrete subclass.
+
+        console.assert(representedObject);
+
+        if (representedObject instanceof WebInspector.Frame)
+            return new WebInspector.FrameContentView(representedObject);
+
+        if (representedObject instanceof WebInspector.Resource)
+            return new WebInspector.ResourceClusterContentView(representedObject);
+
+        if (representedObject instanceof WebInspector.Script)
+            return new WebInspector.ScriptContentView(representedObject);
+
+        if (representedObject instanceof WebInspector.DOMStorageObject)
+            return new WebInspector.DOMStorageContentView(representedObject);
+
+        if (representedObject instanceof WebInspector.CookieStorageObject)
+            return new WebInspector.CookieStorageContentView(representedObject);
+
+        if (representedObject instanceof WebInspector.DatabaseTableObject)
+            return new WebInspector.DatabaseTableContentView(representedObject);
+
+        if (representedObject instanceof WebInspector.DatabaseObject)
+            return new WebInspector.DatabaseContentView(representedObject);
+
+        if (representedObject instanceof WebInspector.ApplicationCacheFrame)
+            return new WebInspector.ApplicationCacheFrameContentView(representedObject);
+
+        if (representedObject instanceof WebInspector.DOMTree)
+            return new WebInspector.DOMTreeContentView(representedObject);
+
+        if (representedObject instanceof WebInspector.LogObject)
+            return new WebInspector.LogContentView(representedObject);
+
+        if (representedObject instanceof WebInspector.TimelinesObject)
+            return new WebInspector.TimelinesContentView(representedObject);
+
+        if (representedObject instanceof WebInspector.JavaScriptProfileObject)
+            return new WebInspector.JavaScriptProfileView(representedObject);
+        
+        if (representedObject instanceof WebInspector.CSSSelectorProfileObject)
+            return new WebInspector.CSSSelectorProfileView(representedObject);
+
+        if (typeof representedObject === "string" || representedObject instanceof String)
+            return new WebInspector.TextContentView(representedObject);
+
+        console.assert(!WebInspector.ContentView.isViewable(representedObject));
+
+        throw "Can't make a ContentView for an unknown representedObject.";
+    }
+
+    // Concrete object instantiation.
+    console.assert(this.constructor !== WebInspector.ContentView && this instanceof WebInspector.ContentView);
+    console.assert(WebInspector.ContentView.isViewable(representedObject));
+
+    WebInspector.Object.call(this);
+
+    this._representedObject = representedObject;
+
+    this._element = document.createElement("div");
+    this._element.classList.add(WebInspector.ContentView.StyleClassName);
+
+    this._parentContainer = null;
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.ContentView);
+
+WebInspector.ContentView.isViewable = function(representedObject)
+{
+    if (representedObject instanceof WebInspector.Frame)
+        return true;
+    if (representedObject instanceof WebInspector.Resource)
+        return true;
+    if (representedObject instanceof WebInspector.Script)
+        return true;
+    if (representedObject instanceof WebInspector.DOMStorageObject)
+        return true;
+    if (representedObject instanceof WebInspector.CookieStorageObject)
+        return true;
+    if (representedObject instanceof WebInspector.DatabaseTableObject)
+        return true;
+    if (representedObject instanceof WebInspector.DatabaseObject)
+        return true;
+    if (representedObject instanceof WebInspector.ApplicationCacheFrame)
+        return true;
+    if (representedObject instanceof WebInspector.DOMTree)
+        return true;
+    if (representedObject instanceof WebInspector.LogObject)
+        return true;
+    if (representedObject instanceof WebInspector.TimelinesObject)
+        return true;
+    if (representedObject instanceof WebInspector.JavaScriptProfileObject)
+        return true;
+    if (representedObject instanceof WebInspector.CSSSelectorProfileObject)
+        return true;
+    if (typeof representedObject === "string" || representedObject instanceof String)
+        return true;
+    return false;
+};
+
+WebInspector.ContentView.StyleClassName = "content-view";
+
+WebInspector.ContentView.Event = {
+    SelectionPathComponentsDidChange: "content-view-selection-path-components-did-change",
+    SupplementalRepresentedObjectsDidChange: "content-view-supplemental-represented-objects-did-change",
+    NumberOfSearchResultsDidChange: "content-view-number-of-search-results-did-change",
+    NavigationItemsDidChange: "content-view-navigation-items-did-change"
+};
+
+WebInspector.ContentView.prototype = {
+    constructor: WebInspector.ContentView,
+
+    // Public
+
+    get representedObject()
+    {
+        return this._representedObject;
+    },
+
+    get navigationItems()
+    {
+        // Navigation items that will be displayed by the ContentBrowser instance,
+        // meant to be subclassed. Implemented by subclasses.
+        return [];
+    },
+
+    get allowedNavigationSidebarPanels()
+    {
+        // Allow any navigation sidebar panel.
+        return [];
+    },
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get parentContainer()
+    {
+        return this._parentContainer;
+    },
+
+    get visible()
+    {
+        return this._visible;
+    },
+
+    set visible(flag)
+    {
+        this._visible = flag;
+    },
+
+    get scrollableElements()
+    {
+        // Implemented by subclasses.
+        return [];
+    },
+
+    get shouldKeepElementsScrolledToBottom()
+    {
+        // Implemented by subclasses.
+        return false;
+    },
+
+    get selectionPathComponents()
+    {
+        // Implemented by subclasses.
+        return [];
+    },
+
+    get supplementalRepresentedObjects()
+    {
+        // Implemented by subclasses.
+        return [];
+    },
+
+    get supportsSplitContentBrowser()
+    {
+        // Implemented by subclasses.
+        return true;
+    },
+
+    updateLayout: function()
+    {
+        // Implemented by subclasses.
+    },
+
+    shown: function()
+    {
+        // Implemented by subclasses.
+    },
+
+    hidden: function()
+    {
+        // Implemented by subclasses.
+    },
+
+    closed: function()
+    {
+        // Implemented by subclasses.
+    },
+
+    canGoBack: function()
+    {
+        // Implemented by subclasses.
+        return false;
+    },
+
+    canGoForward: function()
+    {
+        // Implemented by subclasses.
+        return false;
+    },
+
+    goBack: function()
+    {
+        // Implemented by subclasses.
+    },
+
+    goForward: function()
+    {
+        // Implemented by subclasses.
+    },
+
+    get supportsSearch()
+    {
+        // Implemented by subclasses.
+        return false;
+    },
+
+    get numberOfSearchResults()
+    {
+        // Implemented by subclasses.
+        return null;
+    },
+
+    get hasPerformedSearch()
+    {
+        // Implemented by subclasses.
+        return false;
+    },
+
+    set automaticallyRevealFirstSearchResult(reveal)
+    {
+        // Implemented by subclasses.
+    },
+
+    performSearch: function(query)
+    {
+        // Implemented by subclasses.
+    },
+
+    searchCleared: function()
+    {
+        // Implemented by subclasses.
+    },
+
+    searchQueryWithSelection: function()
+    {
+        // Implemented by subclasses.
+        return null;
+    },
+
+    revealPreviousSearchResult: function(changeFocus)
+    {
+        // Implemented by subclasses.
+    },
+
+    revealNextSearchResult: function(changeFocus)
+    {
+        // Implemented by subclasses.
+    }
+};
+
+WebInspector.ContentView.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ContentViewContainer.css b/Source/WebInspectorUI/UserInterface/ContentViewContainer.css
new file mode 100644
index 000000000..3beab1a8c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ContentViewContainer.css
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view-container {
+    position: relative;
+    overflow: hidden;
+}
+
+.content-view-container > .content-view {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    overflow: hidden;
+}
diff --git a/Source/WebInspectorUI/UserInterface/ContentViewContainer.js b/Source/WebInspectorUI/UserInterface/ContentViewContainer.js
new file mode 100644
index 000000000..375a6287b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ContentViewContainer.js
@@ -0,0 +1,451 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ContentViewContainer = function(element)
+{
+    WebInspector.Object.call(this);
+
+    this._element = element || document.createElement("div");
+    this._element.classList.add(WebInspector.ContentViewContainer.StyleClassName);
+
+    this._backForwardList = [];
+    this._currentIndex = -1;
+};
+
+WebInspector.ContentViewContainer.StyleClassName = "content-view-container";
+
+WebInspector.ContentViewContainer.Event = {
+    CurrentContentViewDidChange: "content-view-container-current-content-view-did-change"
+};
+
+WebInspector.ContentViewContainer.prototype = {
+    constructor: WebInspector.ContentViewContainer,
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get currentIndex()
+    {
+        return this._currentIndex;
+    },
+
+    get backForwardList()
+    {
+        return this._backForwardList;
+    },
+
+    get currentContentView()
+    {
+        if (this._currentIndex < 0 || this._currentIndex > this._backForwardList.length - 1)
+            return null;
+        return this._backForwardList[this._currentIndex];
+    },
+
+    updateLayout: function()
+    {
+        var currentContentView = this.currentContentView;
+        if (currentContentView)
+            currentContentView.updateLayout();
+    },
+
+    contentViewForRepresentedObject: function(representedObject, onlyExisting)
+    {
+        console.assert(representedObject);
+        if (!representedObject)
+            return null;
+
+        // Iterate over all the known content views for the representedObject (if any) and find one that doesn't
+        // have a parent container or has this container as its parent.
+        var contentView = null;
+        for (var i = 0; representedObject.__contentViews && i < representedObject.__contentViews.length; ++i) {
+            var currentContentView = representedObject.__contentViews[i];
+            if (!currentContentView._parentContainer || currentContentView._parentContainer === this) {
+                contentView = currentContentView;
+                break;
+            }
+        }
+
+        console.assert(!contentView || contentView instanceof WebInspector.ContentView);
+        if (contentView instanceof WebInspector.ContentView)
+            return contentView;
+
+        // Return early to avoid creating a new content view when onlyExisting is true.
+        if (onlyExisting)
+            return null;
+
+        try {
+            // No existing content view found, make a new one.
+            contentView = new WebInspector.ContentView(representedObject);
+        } catch (e) {
+            console.error(e);
+            return null;
+        }
+
+        // Remember this content view for future calls.
+        if (!representedObject.__contentViews)
+            representedObject.__contentViews = [];
+        representedObject.__contentViews.push(contentView);
+
+        return contentView;
+    },
+
+    showContentViewForRepresentedObject: function(representedObject)
+    {
+        var contentView = this.contentViewForRepresentedObject(representedObject);
+        if (!contentView)
+            return null;
+
+        this.showContentView(contentView);
+
+        return contentView;
+    },
+
+    showContentView: function(contentView)
+    {
+        console.assert(contentView instanceof WebInspector.ContentView);
+        if (!(contentView instanceof WebInspector.ContentView))
+            return null;
+
+        // Don't allow showing a content view that is already associated with another container.
+        // Showing a content view that is already associated with this container is allowed.
+        console.assert(!contentView.parentContainer || contentView.parentContainer === this);
+        if (contentView.parentContainer && contentView.parentContainer !== this)
+            return null;
+
+        // Don't do anything if the content view is already the current content view.
+        var currentContentView = this.currentContentView;
+        if (currentContentView === contentView)
+            return contentView;
+
+        // Showing a content view will truncate the back/forward list after the current index and insert the content view
+        // at the end of the list. Finally, the current index will be updated to point to the end of the back/forward list.
+
+        // Increment the current index to where we will insert the content view.
+        var newIndex = this._currentIndex + 1;
+
+        // Insert the content view at the new index. This will remove any content views greater than or equal to the index.
+        var removedItems = this._backForwardList.splice(newIndex, this._backForwardList.length - newIndex, contentView);
+
+        console.assert(newIndex === this._backForwardList.length - 1);
+        console.assert(this._backForwardList[newIndex] === contentView);
+
+        // Disassociate with the removed content views.
+        for (var i = 0; i < removedItems.length; ++i) {
+            // Skip disassociation if this content view is still in the back/forward list.
+            if (this._backForwardList.contains(contentView))
+                continue;
+
+            this._disassociateFromContentView(removedItems[i]);
+        }
+
+        // Associate with the new content view.
+        contentView._parentContainer = this;
+
+        this.showBackForwardEntry(newIndex);
+
+        return contentView;
+    },
+
+    showBackForwardEntry: function(index)
+    {
+        console.assert(index >= 0 && index <= this._backForwardList.length - 1);
+        if (index < 0 || index > this._backForwardList.length - 1)
+            return;
+
+        if (this._currentIndex === index)
+            return;
+
+        // Hide the currently visible content view.
+        var currentContentView = this.currentContentView;
+        if (currentContentView)
+            this._hideContentView(currentContentView);
+
+        this._currentIndex = index;
+
+        this._showContentView(this.currentContentView);
+
+        this.dispatchEventToListeners(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange);
+    },
+
+    replaceContentView: function(oldContentView, newContentView)
+    {
+        console.assert(oldContentView instanceof WebInspector.ContentView);
+        if (!(oldContentView instanceof WebInspector.ContentView))
+            return;
+
+        console.assert(newContentView instanceof WebInspector.ContentView);
+        if (!(newContentView instanceof WebInspector.ContentView))
+            return;
+
+        console.assert(oldContentView.parentContainer === this);
+        if (oldContentView.parentContainer !== this)
+            return;
+
+        console.assert(!newContentView.parentContainer || newContentView.parentContainer === this);
+        if (newContentView.parentContainer && newContentView.parentContainer !== this)
+            return;
+
+        var currentlyShowing = (this.currentContentView === oldContentView);
+        if (currentlyShowing)
+            this._hideContentView(oldContentView);
+
+        // Disassociate with the old content view.
+        this._disassociateFromContentView(oldContentView);
+
+        // Associate with the new content view.
+        newContentView._parentContainer = this;
+
+        // Replace all occurrences of oldContentView with newContentView in the back/forward list.
+        for (var i = 0; i < this._backForwardList.length; ++i) {
+            if (this._backForwardList[i] === oldContentView)
+                this._backForwardList[i] = newContentView;
+        }
+
+        if (currentlyShowing) {
+            this._showContentView(newContentView);
+            this.dispatchEventToListeners(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange);
+        }
+    },
+
+    closeAllContentViewsOfPrototype: function(constructor)
+    {
+        if (!this._backForwardList.length) {
+            console.assert(this._currentIndex === -1);
+            return;
+        }
+
+        // Do a check to see if all the content views are instances of this prototype.
+        // If they all are we can use the quicker closeAllContentViews method.
+        var allSamePrototype = true;
+        for (var i = this._backForwardList.length - 1; i >= 0; --i) {
+            if (!(this._backForwardList[i] instanceof constructor)) {
+                allSamePrototype = false;
+                break;
+            }
+        }
+
+        if (allSamePrototype) {
+            this.closeAllContentViews();
+            return;
+        }
+
+        var oldCurrentContentView = this.currentContentView;
+
+        // Hide and disassociate with all the content views that are instances of the constructor.
+        for (var i = this._backForwardList.length - 1; i >= 0; --i) {
+            var contentView = this._backForwardList[i];
+            if (!(contentView instanceof constructor))
+                continue;
+
+            if (contentView === oldCurrentContentView)
+                this._hideContentView(contentView);
+
+            if (this._currentIndex >= i) {
+                // Decrement the currentIndex since we will remove an item in the back/forward array
+                // that it the current index or comes before it.
+                --this._currentIndex;
+            }
+
+            this._disassociateFromContentView(contentView);
+
+            // Remove the item from the back/forward list.
+            this._backForwardList.splice(i, 1);
+        }
+
+        var currentContentView = this.currentContentView;
+        console.assert(currentContentView || (!currentContentView && this._currentIndex === -1));
+
+        if (currentContentView && currentContentView !== oldCurrentContentView) {
+            this._showContentView(currentContentView);
+            this.dispatchEventToListeners(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange);
+        }
+    },
+
+    closeAllContentViews: function()
+    {
+        if (!this._backForwardList.length) {
+            console.assert(this._currentIndex === -1);
+            return;
+        }
+
+        // Hide and disassociate with all the content views.
+        for (var i = 0; i < this._backForwardList.length; ++i) {
+            var contentView = this._backForwardList[i];
+            if (i === this._currentIndex)
+                this._hideContentView(contentView);
+            this._disassociateFromContentView(contentView);
+        }
+
+        this._backForwardList = [];
+        this._currentIndex = -1;
+
+        this.dispatchEventToListeners(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange);
+    },
+
+    canGoBack: function()
+    {
+        return this._currentIndex > 0;
+    },
+
+    canGoForward: function()
+    {
+        return this._currentIndex < this._backForwardList.length - 1;
+    },
+
+    goBack: function()
+    {
+        if (!this.canGoBack())
+            return;
+        this.showBackForwardEntry(this._currentIndex - 1);
+    },
+
+    goForward: function()
+    {
+        if (!this.canGoForward())
+            return;
+        this.showBackForwardEntry(this._currentIndex + 1);
+    },
+
+    shown: function()
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView)
+            return;
+
+        this._showContentView(currentContentView);
+    },
+
+    hidden: function()
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView)
+            return;
+
+        this._hideContentView(currentContentView);
+    },
+
+    // Private
+
+    _addContentViewElement: function(contentView)
+    {
+        if (contentView.element.parentNode !== this._element)
+            this._element.appendChild(contentView.element);
+    },
+
+    _removeContentViewElement: function(contentView)
+    {
+        if (contentView.element.parentNode)
+            contentView.element.parentNode.removeChild(contentView.element);
+    },
+
+    _disassociateFromContentView: function(contentView)
+    {
+        console.assert(!contentView.visible);
+
+        contentView._parentContainer = null;
+
+        var representedObject = contentView.representedObject;
+        if (!representedObject || !representedObject.__contentViews)
+            return;
+
+        representedObject.__contentViews.remove(contentView);
+
+        contentView.closed();
+    },
+
+    _saveScrollPositionsForContentView: function(contentView)
+    {
+        var scrollableElements = contentView.scrollableElements || [];
+        for (var i = 0; i < scrollableElements.length; ++i) {
+            var element = scrollableElements[i];
+            if (!element)
+                continue;
+            if (contentView.shouldKeepElementsScrolledToBottom)
+                element._savedIsScrolledToBottom = element.isScrolledToBottom();
+            element._savedScrollTop = element.scrollTop;
+            element._savedScrollLeft = element.scrollLeft;
+        }
+    },
+
+    _restoreScrollPositionsForContentView: function(contentView)
+    {
+        var scrollableElements = contentView.scrollableElements || [];
+        for (var i = 0; i < scrollableElements.length; ++i) {
+            var element = scrollableElements[i];
+            if (!element)
+                continue;
+
+            // Restore the top scroll position by either scrolling to the bottom or to the saved position.
+            element.scrollTop = element._savedIsScrolledToBottom ? element.scrollHeight : element._savedScrollTop;
+
+            // Don't restore the left scroll position when scrolled to the bottom. This way the when content changes
+            // the user won't be left in a weird horizontal position.
+            element.scrollLeft = element._savedIsScrolledToBottom ? 0 : element._savedScrollLeft;
+        }
+    },
+
+    _showContentView: function(contentView)
+    {
+        if (contentView.visible)
+            return;
+
+        this._addContentViewElement(contentView);
+
+        this._prepareContentViewToShow(contentView);
+    },
+
+    _prepareContentViewToShow: function(contentView)
+    {
+        this._restoreScrollPositionsForContentView(contentView);
+
+        contentView.visible = true;
+        contentView.shown();
+        contentView.updateLayout();
+    },
+
+    _hideContentView: function(contentView)
+    {
+        if (!contentView.visible)
+            return;
+
+        this._prepareContentViewToHide(contentView);
+
+        this._removeContentViewElement(contentView);
+    },
+
+    _prepareContentViewToHide: function(contentView)
+    {
+        contentView.visible = false;
+        contentView.hidden();
+
+        this._saveScrollPositionsForContentView(contentView);
+    }
+};
+
+WebInspector.ContentViewContainer.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ContextMenu.js b/Source/WebInspectorUI/UserInterface/ContextMenu.js
new file mode 100644
index 000000000..26eacc996
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ContextMenu.js
@@ -0,0 +1,275 @@
+/*
+ * Copyright (C) 2009 Google Inc. All rights reserved.
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ * @param {WebInspector.ContextSubMenuItem} topLevelMenu
+ * @param {string} type
+ * @param {string=} label
+ * @param {boolean=} disabled
+ * @param {boolean=} checked
+ */
+WebInspector.ContextMenuItem = function(topLevelMenu, type, label, disabled, checked)
+{
+    this._type = type;
+    this._label = label;
+    this._disabled = disabled;
+    this._checked = checked;
+    this._contextMenu = topLevelMenu;
+    if (type === "item" || type === "checkbox")
+        this._id = topLevelMenu.nextId();
+}
+
+WebInspector.ContextMenuItem.prototype = {
+    id: function()
+    {
+        return this._id;
+    },
+
+    type: function()
+    {
+        return this._type;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    isEnabled: function()
+    {
+        return !this._disabled;
+    },
+
+    /**
+     * @param {boolean} enabled
+     */
+    setEnabled: function(enabled)
+    {
+        this._disabled = !enabled;
+    },
+
+    _buildDescriptor: function()
+    {
+        switch (this._type) {
+        case "item":
+            return { type: "item", id: this._id, label: this._label, enabled: !this._disabled };
+        case "separator":
+            return { type: "separator" };
+        case "checkbox":
+            return { type: "checkbox", id: this._id, label: this._label, checked: !!this._checked, enabled: !this._disabled };
+        }
+    }
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.ContextMenuItem}
+ * @param topLevelMenu
+ * @param {string=} label
+ * @param {boolean=} disabled
+ */
+WebInspector.ContextSubMenuItem = function(topLevelMenu, label, disabled)
+{
+    WebInspector.ContextMenuItem.call(this, topLevelMenu, "subMenu", label, disabled);
+    this._items = [];
+}
+
+WebInspector.ContextSubMenuItem.prototype = {
+    /**
+     * @param {string} label
+     * @param {function} handler
+     * @param {boolean=} disabled
+     * @return {WebInspector.ContextMenuItem}
+     */
+    appendItem: function(label, handler, disabled)
+    {
+        var item = new WebInspector.ContextMenuItem(this._contextMenu, "item", label, disabled);
+        this._pushItem(item);
+        this._contextMenu._setHandler(item.id(), handler);
+        return item;
+    },
+
+    /**
+     * @param {string} label
+     * @param {boolean=} disabled
+     * @return {WebInspector.ContextMenuItem}
+     */
+    appendSubMenuItem: function(label, disabled)
+    {
+        var item = new WebInspector.ContextSubMenuItem(this._contextMenu, label, disabled);
+        this._pushItem(item);
+        return item;
+    },
+
+    /**
+     * @param {boolean=} disabled
+     */
+    appendCheckboxItem: function(label, handler, checked, disabled)
+    {
+        var item = new WebInspector.ContextMenuItem(this._contextMenu, "checkbox", label, disabled, checked);
+        this._pushItem(item);
+        this._contextMenu._setHandler(item.id(), handler);
+        return item;
+    },
+
+    appendSeparator: function()
+    {
+        if (this._items.length)
+            this._pendingSeparator = true;
+    },
+
+    _pushItem: function(item)
+    {
+        if (this._pendingSeparator) {
+            this._items.push(new WebInspector.ContextMenuItem(this._contextMenu, "separator"));
+            delete this._pendingSeparator;
+        }
+        this._items.push(item);
+    },
+
+    /**
+     * @return {boolean}
+     */
+    isEmpty: function()
+    {
+        return !this._items.length;
+    },
+
+    _buildDescriptor: function()
+    {
+        var result = { type: "subMenu", label: this._label, enabled: !this._disabled, subItems: [] };
+        for (var i = 0; i < this._items.length; ++i)
+            result.subItems.push(this._items[i]._buildDescriptor());
+        return result;
+    },
+
+    __proto__: WebInspector.ContextMenuItem.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.ContextSubMenuItem}
+ */
+WebInspector.ContextMenu = function(event) {
+    WebInspector.ContextSubMenuItem.call(this, this, "");
+    this._event = event;
+    this._handlers = {};
+    this._id = 0;
+}
+
+WebInspector.ContextMenu.prototype = {
+    nextId: function()
+    {
+        return this._id++;
+    },
+
+    show: function()
+    {
+        var menuObject = this._buildDescriptor();
+
+        if (menuObject.length) {
+            WebInspector._contextMenu = this;
+            InspectorFrontendHost.showContextMenu(this._event, menuObject);
+        }
+        if (this._event)
+            this._event.stopImmediatePropagation();
+    },
+
+    _setHandler: function(id, handler)
+    {
+        if (handler)
+            this._handlers[id] = handler;
+    },
+
+    _buildDescriptor: function()
+    {
+        var result = [];
+        for (var i = 0; i < this._items.length; ++i)
+            result.push(this._items[i]._buildDescriptor());
+        return result;
+    },
+
+    _itemSelected: function(id)
+    {
+        if (this._handlers[id])
+            this._handlers[id].call(this);
+    },
+
+    /**
+     * @param {Object} target
+     */
+    appendApplicableItems: function(target)
+    {
+        for (var i = 0; i < WebInspector.ContextMenu._providers.length; ++i) {
+            var provider = WebInspector.ContextMenu._providers[i];
+            this.appendSeparator();
+            provider.appendApplicableItems(this._event, this, target);
+            this.appendSeparator();
+        }
+    },
+
+    __proto__: WebInspector.ContextSubMenuItem.prototype
+}
+
+/**
+ * @interface
+ */
+WebInspector.ContextMenu.Provider = function() { 
+}
+
+WebInspector.ContextMenu.Provider.prototype = {
+    /** 
+     * @param {WebInspector.ContextMenu} contextMenu
+     * @param {Object} target
+     */
+    appendApplicableItems: function(event, contextMenu, target) { }
+}
+
+/**
+ * @param {WebInspector.ContextMenu.Provider} provider
+ */
+WebInspector.ContextMenu.registerProvider = function(provider)
+{
+    WebInspector.ContextMenu._providers.push(provider);
+}
+
+WebInspector.ContextMenu._providers = [];
+
+WebInspector.contextMenuItemSelected = function(id)
+{
+    if (WebInspector._contextMenu)
+        WebInspector._contextMenu._itemSelected(id);
+}
+
+WebInspector.contextMenuCleared = function()
+{
+    // FIXME: Unfortunately, contextMenuCleared is invoked between show and item selected
+    // so we can't delete last menu object from WebInspector. Fix the contract.
+}
diff --git a/Source/WebInspectorUI/UserInterface/ControlToolbarItem.css b/Source/WebInspectorUI/UserInterface/ControlToolbarItem.css
new file mode 100644
index 000000000..20fa427c0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ControlToolbarItem.css
@@ -0,0 +1,70 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.toolbar .item.control {
+    -webkit-align-items: center;
+    -webkit-justify-content: center;
+
+    padding: 3px 2px;
+
+    opacity: 0.5;
+}
+
+.toolbar.small-size .item.control {
+    padding: 2px;
+}
+
+.toolbar.icon-and-label-horizontal .item.control,
+.toolbar.icon-only .item.control {
+    padding: 0 2px;
+}
+
+.toolbar .item.control:hover {
+    opacity: 0.8;
+}
+
+.toolbar .item.control:active {
+    opacity: 1;
+}
+
+.toolbar .item.control > .glyph {
+    width: 16px;
+    height: 16px;
+
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+body.window-inactive .toolbar .item.control {
+    opacity: 0.35;
+}
+
+.toolbar .item.control.disabled {
+    opacity: 0.35 !important;
+}
+
+body.window-inactive .toolbar .item.control.disabled {
+    opacity: 0.2 !important;
+}
diff --git a/Source/WebInspectorUI/UserInterface/ControlToolbarItem.js b/Source/WebInspectorUI/UserInterface/ControlToolbarItem.js
new file mode 100644
index 000000000..1497c2bdc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ControlToolbarItem.js
@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ControlToolbarItem = function(identifier, toolTip, image, imageWidth, imageHeight)
+{
+    WebInspector.ButtonNavigationItem.call(this, identifier, toolTip, image, imageWidth, imageHeight, false);
+};
+
+WebInspector.ControlToolbarItem.StyleClassName = "control";
+
+WebInspector.ControlToolbarItem.prototype = {
+    constructor: WebInspector.ControlToolbarItem,
+
+    // Private
+
+    _additionalClassNames: [WebInspector.ControlToolbarItem.StyleClassName],
+};
+
+WebInspector.ControlToolbarItem.prototype.__proto__ = WebInspector.ButtonNavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CookieIcon.css b/Source/WebInspectorUI/UserInterface/CookieIcon.css
new file mode 100644
index 000000000..95f3e6365
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CookieIcon.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.cookie-icon .icon {
+    content: -webkit-image-set(url(Images/Cookie.png) 1x, url(Images/Cookie@2x.png) 2x);
+}
diff --git a/Source/WebInspectorUI/UserInterface/CookieStorageContentView.css b/Source/WebInspectorUI/UserInterface/CookieStorageContentView.css
new file mode 100644
index 000000000..8eb7df1c9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CookieStorageContentView.css
@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.cookie-storage > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/CookieStorageContentView.js b/Source/WebInspectorUI/UserInterface/CookieStorageContentView.js
new file mode 100644
index 000000000..87bee9f1f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CookieStorageContentView.js
@@ -0,0 +1,256 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CookieStorageContentView = function(representedObject)
+{
+    WebInspector.ContentView.call(this, representedObject);
+
+    this.element.classList.add(WebInspector.CookieStorageContentView.StyleClassName);
+
+    this.update();
+};
+
+WebInspector.CookieStorageContentView.StyleClassName = "cookie-storage";
+
+WebInspector.CookieStorageContentView.prototype = {
+    constructor: WebInspector.CookieStorageContentView,
+
+    // Public
+
+    update: function()
+    {
+        function callback(error, cookies, cookiesString)
+        {
+            if (error)
+                return;
+
+            this._cookies = this._filterCookies(cookies);
+            this._rebuildTable();
+        }
+    
+        PageAgent.getCookies(callback.bind(this));
+    },
+
+    updateLayout: function()
+    {
+        if (this._dataGrid)
+            this._dataGrid.updateLayout();
+    },
+
+    get scrollableElements()
+    {
+        if (!this._dataGrid)
+            return [];
+        return [this._dataGrid.scrollContainer];
+    },
+
+    // Private
+
+    _rebuildTable: function()
+    {
+        // FIXME: If there are no cookies, do we want to show an empty datagrid, or do something like the old
+        // inspector and show some text saying there are no cookies?
+        if (!this._dataGrid) {
+            var columns = { 0: {}, 1: {}, 2: {}, 3: {}, 4: {}, 5: {}, 6: {}, 7: {} };
+            columns[0].title = WebInspector.UIString("Name");
+            columns[0].sortable = true;
+            columns[0].width = "24%";
+            columns[1].title = WebInspector.UIString("Value");
+            columns[1].sortable = true;
+            columns[1].width = "34%";
+            columns[2].title = WebInspector.UIString("Domain");
+            columns[2].sortable = true;
+            columns[2].width = "7%";
+            columns[3].title = WebInspector.UIString("Path");
+            columns[3].sortable = true;
+            columns[3].width = "7%";
+            columns[4].title = WebInspector.UIString("Expires");
+            columns[4].sortable = true;
+            columns[4].width = "7%";
+            columns[5].title = WebInspector.UIString("Size");
+            columns[5].aligned = "right";
+            columns[5].sortable = true;
+            columns[5].width = "7%";
+            columns[6].title = WebInspector.UIString("HTTP");
+            columns[6].aligned = "centered";
+            columns[6].sortable = true;
+            columns[6].width = "7%";
+            columns[7].title = WebInspector.UIString("Secure");
+            columns[7].aligned = "centered";
+            columns[7].sortable = true;
+            columns[7].width = "7%";
+
+            this._dataGrid = new WebInspector.DataGrid(columns, null, this._deleteCallback.bind(this));
+            this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._rebuildTable, this);
+
+            this.element.appendChild(this._dataGrid.element);
+            this._dataGrid.updateLayout();
+        }
+        
+        console.assert(this._dataGrid);
+        this._dataGrid.removeChildren();
+
+        this._sortCookies(this._cookies);
+
+        for (var i = 0; i < this._cookies.length; ++i) {
+            const cookie = this._cookies[i];
+
+            var data = {};
+            data[0] = cookie.name;
+            data[1] = cookie.value;
+            data[2] = cookie.domain || "";
+            data[3] = cookie.path || "";
+
+            if (cookie.type === WebInspector.CookieType.Request)
+                data[4] = "";
+            else
+                data[4] = cookie.session ? WebInspector.UIString("Session") : new Date(cookie.expires).toLocaleString();
+
+            data[5] = Number.bytesToString(cookie.size);
+            const checkmark = "\u2713";
+            data[6] = cookie.httpOnly ? checkmark : "";
+            data[7] = cookie.secure ? checkmark : "";
+
+            var node = new WebInspector.DataGridNode(data);
+            node.cookie = cookie;
+            node.selectable = true;
+            
+            this._dataGrid.appendChild(node);
+        }
+    },
+
+    _filterCookies: function(cookies)
+    {
+        var filteredCookies = [];
+        var resourcesForDomain = [];
+
+        var frames = WebInspector.frameResourceManager.frames;
+        for (var i = 0; i < frames.length; ++i) {
+            var resources = frames[i].resources;
+            for (var j = 0; j < resources.length; ++j) {
+                var urlComponents = resources[j].urlComponents;
+                if (urlComponents && urlComponents.host && urlComponents.host === this.representedObject.host)
+                    resourcesForDomain.push(resources[j].url);
+            }
+
+            // The main resource isn't always in the list of resources, make sure to add it to the list of resources
+            // we get the URLs from.
+            var mainResourceURLComponents = frames[i].mainResource.urlComponents;
+            if (mainResourceURLComponents && mainResourceURLComponents.host && mainResourceURLComponents.host == this.representedObject.host)
+                resourcesForDomain.push(frames[i].mainResource.url);
+        }
+
+        for (var i = 0; i < cookies.length; ++i) {
+            for (var j = 0; j < resourcesForDomain.length; ++j) {
+                if (WebInspector.cookieMatchesResourceURL(cookies[i], resourcesForDomain[j])) {
+                    filteredCookies.push(cookies[i]);
+                    break;
+                }
+            }
+        }
+        
+        return filteredCookies;
+    },
+    
+    _sortCookies: function(cookies)
+    {
+        var sortDirection = this._dataGrid.sortOrder === "ascending" ? 1 : -1;
+
+        function localeCompare(field, cookie1, cookie2)
+        {
+            return sortDirection * (cookie1[field] + "").localeCompare(cookie2[field] + "")
+        }
+
+        function numberCompare(field, cookie1, cookie2)
+        {
+            return sortDirection * (cookie1[field] - cookie2[field]);
+        }
+
+        function expiresCompare(cookie1, cookie2)
+        {
+            if (cookie1.session !== cookie2.session)
+                return sortDirection * (cookie1.session ? 1 : -1);
+
+            if (cookie1.session)
+                return 0;
+
+            return sortDirection * (cookie1.expires - cookie2.expires);
+        }
+
+        var comparator;
+        switch (parseInt(this._dataGrid.sortColumnIdentifier, 10)) {
+            case 0: comparator = localeCompare.bind(this, "name"); break;
+            case 1: comparator = localeCompare.bind(this, "value"); break;
+            case 2: comparator = localeCompare.bind(this, "domain"); break;
+            case 3: comparator = localeCompare.bind(this, "path"); break;
+            case 4: comparator = expiresCompare; break;
+            case 5: comparator = numberCompare.bind(this, "size"); break;
+            case 6: comparator = localeCompare.bind(this, "httpOnly"); break;
+            case 7: comparator = localeCompare.bind(this, "secure"); break;
+            default: localeCompare.bind(this, "name");
+        }
+
+        cookies.sort(comparator);
+    },
+
+    _deleteCallback: function(node)
+    {
+        if (!node || !node.cookie)
+            return;
+
+        var cookie = node.cookie;
+        var cookieURL = (cookie.secure ? "https://" : "http://") + cookie.domain + cookie.path;
+
+        // COMPATIBILITY (iOS 6): PageAgent.deleteCookie used to take 'domain', now takes 'url'. Send both.
+        PageAgent.deleteCookie.invoke({cookieName: cookie.name, domain: cookie.domain, url: cookieURL});
+
+        this.update();
+    }
+};
+
+WebInspector.CookieStorageContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
+
+WebInspector.cookieMatchesResourceURL = function(cookie, resourceURL)
+{
+    var parsedURL = parseURL(resourceURL);
+    if (!parsedURL || !WebInspector.cookieDomainMatchesResourceDomain(cookie.domain, parsedURL.host))
+        return false;
+
+    return (parsedURL.path.startsWith(cookie.path)
+        && (!cookie.port || parsedURL.port == cookie.port)
+        && (!cookie.secure || parsedURL.scheme === "https"));
+}
+
+WebInspector.cookieDomainMatchesResourceDomain = function(cookieDomain, resourceDomain)
+{
+    if (cookieDomain.charAt(0) !== '.')
+        return resourceDomain === cookieDomain;
+    return !!resourceDomain.match(new RegExp("^([^\\.]+\\.)?" + cookieDomain.substring(1).escapeForRegExp() + "$"), "i");
+}
+
+WebInspector.CookieType = {
+    Request: 0,
+    Response: 1
+};
diff --git a/Source/WebInspectorUI/UserInterface/CookieStorageObject.js b/Source/WebInspectorUI/UserInterface/CookieStorageObject.js
new file mode 100644
index 000000000..11a3a3c12
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CookieStorageObject.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CookieStorageObject = function(host)
+{
+    this._host = host;
+};
+
+WebInspector.CookieStorageObject.prototype = {
+    constructor: WebInspector.CookieStorageObject,
+
+    get host()
+    {
+        return this._host;
+    },
+    
+    // FIXME: This class will need to look up cookies that are set for this host.
+};
diff --git a/Source/WebInspectorUI/UserInterface/CookieStorageTreeElement.js b/Source/WebInspectorUI/UserInterface/CookieStorageTreeElement.js
new file mode 100644
index 000000000..15c9937b8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/CookieStorageTreeElement.js
@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CookieStorageTreeElement = function(representedObject)
+{
+    console.assert(representedObject instanceof WebInspector.CookieStorageObject);
+    
+    WebInspector.StorageTreeElement.call(this, WebInspector.CookieStorageTreeElement.CookieIconStyleClassName, WebInspector.displayNameForHost(representedObject.host), representedObject);
+};
+
+WebInspector.CookieStorageTreeElement.CookieIconStyleClassName = "cookie-icon";
+
+WebInspector.CookieStorageTreeElement.prototype = {
+    constructor: WebInspector.CookieStorageTreeElement,
+    
+    // Public
+    
+    get name()
+    {
+        return this.representedObject.host;
+    },
+    
+    get categoryName()
+    {
+        return WebInspector.UIString("Cookies");
+    }
+};
+
+WebInspector.CookieStorageTreeElement.prototype.__proto__ = WebInspector.StorageTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/DOMDetailsSidebarPanel.js
new file mode 100644
index 000000000..66d1d4110
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMDetailsSidebarPanel.js
@@ -0,0 +1,114 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMDetailsSidebarPanel = function(identifier, displayName, singularDisplayName, image, keyboardShortcutKey, element) {
+    WebInspector.DetailsSidebarPanel.call(this, identifier, displayName, singularDisplayName, image, keyboardShortcutKey, element);
+
+    this.element.addEventListener("click", this._mouseWasClicked.bind(this), true);
+
+    this._domNode = null;
+};
+
+WebInspector.DOMDetailsSidebarPanel.prototype = {
+    constructor: WebInspector.DOMDetailsSidebarPanel,
+
+    // Public
+
+    inspect: function(objects)
+    {
+        // Convert to a single item array if needed.
+        if (!(objects instanceof Array))
+            objects = [objects];
+
+        var nodeToInspect = null;
+
+        // Iterate over the objects to find a WebInspector.DOMNode to inspect.
+        for (var i = 0; i < objects.length; ++i) {
+            if (objects[i] instanceof WebInspector.DOMNode) {
+                nodeToInspect = objects[i];
+                break;
+            }
+        }
+
+        if (nodeToInspect && !this.supportsDOMNode(nodeToInspect))
+            nodeToInspect = null;
+
+        this.domNode = nodeToInspect;
+
+        return !!this._domNode;
+    },
+
+    get domNode()
+    {
+        return this._domNode;
+    },
+
+    set domNode(domNode)
+    {
+        if (domNode === this._domNode)
+            return;
+
+        if (this._domNode)
+            this.removeEventListeners();
+
+        this._domNode = domNode;
+
+        if (this._domNode)
+            this.addEventListeners();
+
+        this.needsRefresh();
+    },
+
+    supportsDOMNode: function(nodeToInspect)
+    {
+        // Implemented by subclasses.
+        return true;
+    },
+
+    addEventListeners: function()
+    {
+        // Implemented by subclasses.
+    },
+
+    removeEventListeners: function()
+    {
+        // Implemented by subclasses.
+    },
+
+    // Private
+
+    _mouseWasClicked: function(event)
+    {
+        if (this._domNode && this._domNode.ownerDocument) {
+            var mainResource = WebInspector.frameResourceManager.resourceForURL(this._domNode.ownerDocument.documentURL);
+            if (mainResource)
+                var parentFrame = mainResource.parentFrame;
+        }
+
+        WebInspector.handlePossibleLinkClick(event, parentFrame);
+    }
+};
+
+WebInspector.DOMDetailsSidebarPanel.prototype.__proto__ = WebInspector.DetailsSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMNode.js b/Source/WebInspectorUI/UserInterface/DOMNode.js
new file mode 100644
index 000000000..ee002783c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMNode.js
@@ -0,0 +1,690 @@
+/*
+ * Copyright (C) 2009, 2010 Google Inc. All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ * @param {WebInspector.DOMAgent} domAgent
+ * @param {?WebInspector.DOMNode} doc
+ * @param {boolean} isInShadowTree
+ * @param {DOMAgent.Node} payload
+ */
+WebInspector.DOMNode = function(domAgent, doc, isInShadowTree, payload) {
+    WebInspector.Object.call(this);
+
+    this._domAgent = domAgent;
+    this._isInShadowTree = isInShadowTree;
+
+    this.id = payload.nodeId;
+    domAgent._idToDOMNode[this.id] = this;
+
+    this._nodeType = payload.nodeType;
+    this._nodeName = payload.nodeName;
+    this._localName = payload.localName;
+    this._nodeValue = payload.nodeValue;
+
+    if (this._nodeType === Node.DOCUMENT_NODE)
+        this.ownerDocument = this;
+    else
+        this.ownerDocument = doc;
+
+    this._attributes = [];
+    this._attributesMap = {};
+    if (payload.attributes)
+        this._setAttributesPayload(payload.attributes);
+
+    this._childNodeCount = payload.childNodeCount;
+    this._children = null;
+    this._filteredChildren = null;
+    this._filteredChildrenNeedsUpdating = true;
+
+    this._nextSibling = null;
+    this._previousSibling = null;
+    this.parentNode = null;
+
+    this._enabledPseudoClasses = [];
+
+    this._shadowRoots = [];
+    if (payload.shadowRoots) {
+        for (var i = 0; i < payload.shadowRoots.length; ++i) {
+            var root = payload.shadowRoots[i];
+            var node = new WebInspector.DOMNode(this._domAgent, this.ownerDocument, true, root);
+            this._shadowRoots.push(node);
+        }
+    }
+
+    if (payload.children)
+        this._setChildrenPayload(payload.children);
+
+    if (payload.contentDocument) {
+        this._contentDocument = new WebInspector.DOMNode(domAgent, null, false, payload.contentDocument);
+        this._children = [this._contentDocument];
+        this._renumber();
+    }
+
+    if (this._nodeType === Node.ELEMENT_NODE) {
+        // HTML and BODY from internal iframes should not overwrite top-level ones.
+        if (this.ownerDocument && !this.ownerDocument.documentElement && this._nodeName === "HTML")
+            this.ownerDocument.documentElement = this;
+        if (this.ownerDocument && !this.ownerDocument.body && this._nodeName === "BODY")
+            this.ownerDocument.body = this;
+        if (payload.documentURL)
+            this.documentURL = payload.documentURL;
+    } else if (this._nodeType === Node.DOCUMENT_TYPE_NODE) {
+        this.publicId = payload.publicId;
+        this.systemId = payload.systemId;
+        this.internalSubset = payload.internalSubset;
+    } else if (this._nodeType === Node.DOCUMENT_NODE) {
+        this.documentURL = payload.documentURL;
+        this.xmlVersion = payload.xmlVersion;
+    } else if (this._nodeType === Node.ATTRIBUTE_NODE) {
+        this.name = payload.name;
+        this.value = payload.value;
+    }
+}
+
+WebInspector.Object.addConstructorFunctions(WebInspector.DOMNode);
+
+WebInspector.DOMNode.Event = {
+    EnabledPseudoClassesChanged: "dom-node-enabled-pseudo-classes-did-change",
+    AttributeModified: "dom-node-attribute-modified",
+    AttributeRemoved: "dom-node-attribute-removed"
+};
+
+WebInspector.DOMNode.prototype = {
+    constructor: WebInspector.DOMNode,
+
+    get children()
+    {
+        if (!this._children)
+            return null;
+
+        if (WebInspector.showShadowDOMSetting.value)
+            return this._children;
+
+        if (this._filteredChildrenNeedsUpdating) {
+            this._filteredChildrenNeedsUpdating = false;
+            this._filteredChildren = this._children.filter(function(node) {
+                return !node._isInShadowTree;
+            });
+        }
+
+        return this._filteredChildren;
+    },
+
+    get firstChild()
+    {
+        var children = this.children;
+
+        if (children && children.length > 0)
+            return children[0];
+
+        return null;
+    },
+
+    get lastChild()
+    {
+        var children = this.children;
+
+        if (children && children.length > 0)
+            return children.lastValue;
+
+        return null;
+    },
+
+    get nextSibling()
+    {
+        if (WebInspector.showShadowDOMSetting.value)
+            return this._nextSibling;
+
+        var node = this._nextSibling;
+        while (node) {
+            if (!node._isInShadowTree)
+                return node;
+            node = node._nextSibling;
+        }
+        return null;
+    },
+
+    get previousSibling()
+    {
+        if (WebInspector.showShadowDOMSetting.value)
+            return this._previousSibling;
+
+        var node = this._previousSibling;
+        while (node) {
+            if (!node._isInShadowTree)
+                return node;
+            node = node._previousSibling;
+        }
+        return null;
+    },
+
+    get childNodeCount()
+    {
+        var children = this.children;
+        if (children)
+            return children.length;
+
+        if (WebInspector.showShadowDOMSetting.value)
+            return this._childNodeCount + this._shadowRoots.length;
+
+        return this._childNodeCount;
+    },
+
+    set childNodeCount(count)
+    {
+        this._childNodeCount = count;
+    },
+    
+    /**
+     * @return {boolean}
+     */
+    hasAttributes: function()
+    {
+        return this._attributes.length > 0;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    hasChildNodes: function()
+    {
+        return this.childNodeCount > 0;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    hasShadowRoots: function()
+    {
+        return !!this._shadowRoots.length;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    isInShadowTree: function()
+    {
+        return this._isInShadowTree;
+    },
+
+    /**
+     * @return {number}
+     */
+    nodeType: function()
+    {
+        return this._nodeType;
+    },
+
+    /**
+     * @return {string}
+     */
+    nodeName: function()
+    {
+        return this._nodeName;
+    },
+
+    /**
+     * @return {string}
+     */
+    nodeNameInCorrectCase: function()
+    {
+        return this.isXMLNode() ? this.nodeName() : this.nodeName().toLowerCase();
+    },
+
+    /**
+     * @param {string} name
+     * @param {function()=} callback
+     */
+    setNodeName: function(name, callback)
+    {
+        DOMAgent.setNodeName(this.id, name, this._makeUndoableCallback(callback));
+    },
+
+    /**
+     * @return {string}
+     */
+    localName: function()
+    {
+        return this._localName;
+    },
+
+    /**
+     * @return {string}
+     */
+    nodeValue: function()
+    {
+        return this._nodeValue;
+    },
+
+    /**
+     * @param {string} value
+     * @param {function(?Protocol.Error)=} callback
+     */
+    setNodeValue: function(value, callback)
+    {
+        DOMAgent.setNodeValue(this.id, value, this._makeUndoableCallback(callback));
+    },
+
+    /**
+     * @param {string} name
+     * @return {string}
+     */
+    getAttribute: function(name)
+    {
+        var attr = this._attributesMap[name];
+        return attr ? attr.value : undefined;
+    },
+
+    /**
+     * @param {string} name
+     * @param {string} text
+     * @param {function()=} callback
+     */
+    setAttribute: function(name, text, callback)
+    {
+        DOMAgent.setAttributesAsText(this.id, text, name, this._makeUndoableCallback(callback));
+    },
+
+    /**
+     * @param {string} name
+     * @param {string} value
+     * @param {function()=} callback
+     */
+    setAttributeValue: function(name, value, callback)
+    {
+        DOMAgent.setAttributeValue(this.id, name, value, this._makeUndoableCallback(callback));
+    },
+
+    /**
+     * @return {Object}
+     */
+    attributes: function()
+    {
+        return this._attributes;
+    },
+
+    /**
+     * @param {string} name
+     * @param {function()=} callback
+     */
+    removeAttribute: function(name, callback)
+    {
+        function mycallback(error, success)
+        {
+            if (!error) {
+                delete this._attributesMap[name];
+                for (var i = 0;  i < this._attributes.length; ++i) {
+                    if (this._attributes[i].name === name) {
+                        this._attributes.splice(i, 1);
+                        break;
+                    }
+                }
+            }
+
+            this._makeUndoableCallback(callback)(error);
+        }
+        DOMAgent.removeAttribute(this.id, name, mycallback.bind(this));
+    },
+
+    /**
+     * @param {function(Array.<WebInspector.DOMNode>)=} callback
+     */
+    getChildNodes: function(callback)
+    {
+        if (this.children) {
+            if (callback)
+                callback(this.children);
+            return;
+        }
+
+        /**
+         * @this {WebInspector.DOMNode}
+         * @param {?Protocol.Error} error
+         */
+        function mycallback(error) {
+            if (!error && callback)
+                callback(this.children);
+        }
+
+        DOMAgent.requestChildNodes(this.id, mycallback.bind(this));
+    },
+
+     /**
+      * @param {number} depth
+      * @param {function(Array.<WebInspector.DOMNode>)=} callback
+      */
+    getSubtree: function(depth, callback)
+    {
+        /**
+         * @this {WebInspector.DOMNode}
+         * @param {?Protocol.Error} error
+         */
+        function mycallback(error)
+        {
+            if (callback)
+                callback(error ? null : this.children);                
+        }
+
+        DOMAgent.requestChildNodes(this.id, depth, mycallback.bind(this));
+    },
+
+    /**
+     * @param {function(?Protocol.Error)=} callback
+     */
+    getOuterHTML: function(callback)
+    {
+        DOMAgent.getOuterHTML(this.id, callback);
+    },
+
+    /**
+     * @param {string} html
+     * @param {function(?Protocol.Error)=} callback
+     */
+    setOuterHTML: function(html, callback)
+    {
+        DOMAgent.setOuterHTML(this.id, html, this._makeUndoableCallback(callback));
+    },
+
+    /**
+     * @param {function(?Protocol.Error)=} callback
+     */
+    removeNode: function(callback)
+    {
+        DOMAgent.removeNode(this.id, this._makeUndoableCallback(callback));
+    },
+
+    copyNode: function()
+    {
+        function copy(error, text)
+        {
+            if (!error)
+                InspectorFrontendHost.copyText(text);
+        }
+        DOMAgent.getOuterHTML(this.id, copy);
+    },
+
+    /**
+     * @param {function(?Protocol.Error)=} callback
+     */
+    eventListeners: function(callback)
+    {
+        DOMAgent.getEventListenersForNode(this.id, callback);
+    },
+
+    /**
+     * @return {string}
+     */
+    path: function()
+    {
+        var path = [];
+        var node = this;
+        while (node && "index" in node && node._nodeName.length) {
+            path.push([node.index, node._nodeName]);
+            node = node.parentNode;
+        }
+        path.reverse();
+        return path.join(",");
+    },
+
+    /**
+     * @param {boolean} justSelector
+     * @return {string}
+     */
+    appropriateSelectorFor: function(justSelector)
+    {
+        var lowerCaseName = this.localName() || this.nodeName().toLowerCase();
+
+        var id = this.getAttribute("id");
+        if (id) {
+            if (/[\s'"]/.test(id)) {
+                id = id.replace(/\\/g, "\\\\").replace(/\"/g, "\\\"");
+                selector = lowerCaseName + "[id=\"" + id + "\"]";
+            } else
+                selector = "#" + id;
+            return (justSelector ? selector : lowerCaseName + selector);
+        }
+
+        var className = this.getAttribute("class");
+        if (className) {
+            var selector = "." + className.trim().replace(/\s+/, ".");
+            return (justSelector ? selector : lowerCaseName + selector);
+        }
+
+        if (lowerCaseName === "input" && this.getAttribute("type"))
+            return lowerCaseName + "[type=\"" + this.getAttribute("type") + "\"]";
+
+        return lowerCaseName;
+    },
+
+    /**
+     * @param {WebInspector.DOMNode} node
+     * @return {boolean}
+     */
+    isAncestor: function(node)
+    {
+        if (!node)
+            return false;
+
+        var currentNode = node.parentNode;
+        while (currentNode) {
+            if (this === currentNode)
+                return true;
+            currentNode = currentNode.parentNode;
+        }
+        return false;
+    },
+
+    /**
+     * @param {WebInspector.DOMNode} descendant
+     * @return {boolean}
+     */
+    isDescendant: function(descendant)
+    {
+        return descendant !== null && descendant.isAncestor(this);
+    },
+
+    /**
+     * @param {Array.<string>} attrs
+     */
+    _setAttributesPayload: function(attrs)
+    {
+        this._attributes = [];
+        this._attributesMap = {};
+        for (var i = 0; i < attrs.length; i += 2)
+            this._addAttribute(attrs[i], attrs[i + 1]);
+    },
+
+    /**
+     * @param {WebInspector.DOMNode} prev
+     * @param {DOMAgent.Node} payload
+     * @return {WebInspector.DOMNode}
+     */
+    _insertChild: function(prev, payload)
+    {
+        var node = new WebInspector.DOMNode(this._domAgent, this.ownerDocument, this._isInShadowTree, payload);
+        if (!prev) {
+            if (!this._children) {
+                // First node
+                this._children = this._shadowRoots.concat([node]);
+            } else
+                this._children.unshift(node);
+        } else
+            this._children.splice(this._children.indexOf(prev) + 1, 0, node);
+        this._renumber();
+        return node;
+    },
+
+    /**
+     * @param {WebInspector.DOMNode} node
+     */
+    _removeChild: function(node)
+    {
+        this._children.splice(this._children.indexOf(node), 1);
+        node.parentNode = null;
+        this._renumber();
+    },
+
+    /**
+     * @param {Array.<DOMAgent.Node>} payloads
+     */
+    _setChildrenPayload: function(payloads)
+    {
+        // We set children in the constructor.
+        if (this._contentDocument)
+            return;
+
+        this._children = this._shadowRoots.slice();
+        for (var i = 0; i < payloads.length; ++i) {
+            var payload = payloads[i];
+            var node = new WebInspector.DOMNode(this._domAgent, this.ownerDocument, this._isInShadowTree, payload);
+            this._children.push(node);
+        }
+        this._renumber();
+    },
+
+    _renumber: function()
+    {
+        this._filteredChildrenNeedsUpdating = true;
+
+        var childNodeCount = this._children.length;
+        if (childNodeCount === 0)
+            return;
+
+        for (var i = 0; i < childNodeCount; ++i) {
+            var child = this._children[i];
+            child.index = i;
+            child._nextSibling = i + 1 < childNodeCount ? this._children[i + 1] : null;
+            child._previousSibling = i - 1 >= 0 ? this._children[i - 1] : null;
+            child.parentNode = this;
+        }
+    },
+
+    /**
+     * @param {string} name
+     * @param {string} value
+     */
+    _addAttribute: function(name, value)
+    {
+        var attr = {
+            name: name,
+            value: value,
+            _node: this
+        };
+        this._attributesMap[name] = attr;
+        this._attributes.push(attr);
+    },
+
+    /**
+     * @param {string} name
+     * @param {string} value
+     */
+    _setAttribute: function(name, value)
+    {
+        var attr = this._attributesMap[name];
+        if (attr)
+            attr.value = value;
+        else
+            this._addAttribute(name, value);
+    },
+
+    /**
+     * @param {string} name
+     */
+    _removeAttribute: function(name)
+    {
+        var attr = this._attributesMap[name];
+        if (attr) {
+            this._attributes.remove(attr);
+            delete this._attributesMap[name];
+        }
+    },
+
+    /**
+     * @param {WebInspector.DOMNode} targetNode
+     * @param {?WebInspector.DOMNode} anchorNode
+     * @param {function(?Protocol.Error)=} callback
+     */
+    moveTo: function(targetNode, anchorNode, callback)
+    {
+        DOMAgent.moveTo(this.id, targetNode.id, anchorNode ? anchorNode.id : undefined, this._makeUndoableCallback(callback));
+    },
+
+    /**
+     * @return {boolean}
+     */
+    isXMLNode: function()
+    {
+        return !!this.ownerDocument && !!this.ownerDocument.xmlVersion;
+    },
+
+    get enabledPseudoClasses()
+    {
+        return this._enabledPseudoClasses;
+    },
+    
+    setPseudoClassEnabled: function(pseudoClass, enabled)
+    {
+        var pseudoClasses = this._enabledPseudoClasses;
+        if (enabled) {
+            if (pseudoClasses.contains(pseudoClass))
+                return;
+            pseudoClasses.push(pseudoClass);
+        } else {
+            if (!pseudoClasses.contains(pseudoClass))
+                return;
+            pseudoClasses.remove(pseudoClass);
+        }
+
+        function changed(error)
+        {
+            if (!error)
+                this.dispatchEventToListeners(WebInspector.DOMNode.Event.EnabledPseudoClassesChanged);
+        }
+
+        CSSAgent.forcePseudoState(this.id, pseudoClasses, changed.bind(this));
+    },
+
+    _makeUndoableCallback: function(callback)
+    {
+        return function(error)
+        {
+            if (!error)
+                DOMAgent.markUndoableState();
+
+            if (callback)
+                callback.apply(null, arguments);
+        };
+    }
+}
+
+WebInspector.DOMNode.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMNodeDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/DOMNodeDetailsSidebarPanel.js
new file mode 100644
index 000000000..b7a8a970d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMNodeDetailsSidebarPanel.js
@@ -0,0 +1,281 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMNodeDetailsSidebarPanel = function() {
+    WebInspector.DOMDetailsSidebarPanel.call(this, "dom-node-details", WebInspector.UIString("Node"), WebInspector.UIString("Node"), "Images/NavigationItemAngleBrackets.pdf", "2");
+
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeModified, this._attributesChanged, this);
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeRemoved, this._attributesChanged, this);
+
+    this.element.classList.add(WebInspector.DOMNodeDetailsSidebarPanel.StyleClassName);
+
+    this._identityNodeTypeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Type"));
+    this._identityNodeNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Name"));
+    this._identityNodeValueRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Value"));
+
+    var identityGroup = new WebInspector.DetailsSectionGroup([this._identityNodeTypeRow, this._identityNodeNameRow, this._identityNodeValueRow]);
+    var identitySection = new WebInspector.DetailsSection("dom-node-identity", WebInspector.UIString("Identity"), [identityGroup]);
+
+    this._attributesDataGridRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Attributes"));
+
+    var attributesGroup = new WebInspector.DetailsSectionGroup([this._attributesDataGridRow]);
+    var attributesSection = new WebInspector.DetailsSection("dom-node-attributes", WebInspector.UIString("Attributes"), [attributesGroup]);
+
+    this._propertiesRow = new WebInspector.DetailsSectionRow;
+
+    var propertiesGroup = new WebInspector.DetailsSectionGroup([this._propertiesRow]);
+    var propertiesSection = new WebInspector.DetailsSection("dom-node-properties", WebInspector.UIString("Properties"), [propertiesGroup]);
+
+    this._eventListenersSectionGroup = new WebInspector.DetailsSectionGroup;
+    var eventListenersSection = new WebInspector.DetailsSection("dom-node-event-listeners", WebInspector.UIString("Event Listeners"), [this._eventListenersSectionGroup]);    
+
+    this.element.appendChild(identitySection.element);
+    this.element.appendChild(attributesSection.element);
+    this.element.appendChild(propertiesSection.element);
+    this.element.appendChild(eventListenersSection.element);
+};
+
+WebInspector.DOMNodeDetailsSidebarPanel.StyleClassName = "dom-node";
+WebInspector.DOMNodeDetailsSidebarPanel.PropertiesObjectGroupName = "dom-node-details-sidebar-properties-object-group";
+
+WebInspector.DOMNodeDetailsSidebarPanel.prototype = {
+    constructor: WebInspector.DOMNodeDetailsSidebarPanel,
+
+    // Public
+
+    refresh: function()
+    {
+        var domNode = this.domNode;
+        if (!domNode)
+            return;
+
+        this._identityNodeTypeRow.value = this._nodeTypeDisplayName();
+        this._identityNodeNameRow.value = domNode.nodeNameInCorrectCase();
+        this._identityNodeValueRow.value = domNode.nodeValue();
+
+        this._refreshAttributes();
+        this._refreshProperties();
+        this._refreshEventListeners();
+    },
+
+    // Private
+
+    _refreshAttributes: function()
+    {
+        this._attributesDataGridRow.dataGrid = this._createAttributesDataGrid();
+    },
+
+    _refreshProperties: function()
+    {
+        var domNode = this.domNode;
+        if (!domNode)
+            return;
+
+        RuntimeAgent.releaseObjectGroup(WebInspector.DOMNodeDetailsSidebarPanel.PropertiesObjectGroupName);
+        WebInspector.RemoteObject.resolveNode(domNode, WebInspector.DOMNodeDetailsSidebarPanel.PropertiesObjectGroupName, nodeResolved.bind(this));
+
+        function nodeResolved(object)
+        {
+            if (!object)
+                return;
+
+            // Bail if the DOM node changed while we were waiting for the async response.
+            if (this.domNode !== domNode)
+                return;
+
+            function collectPrototypes()
+            {
+                // This builds an object with numeric properties. This is easier than dealing with arrays
+                // with the way RemoteObject works. Start at 1 since we use parseInt later and parseInt
+                // returns 0 for non-numeric strings make it ambiguous.
+                var prototype = this;
+                var result = [];
+                var counter = 1;
+
+                while (prototype) {
+                    result[counter++] = prototype;
+                    prototype = prototype.__proto__;
+                }
+
+                return result;
+            }
+
+            object.callFunction(collectPrototypes, undefined, nodePrototypesReady.bind(this));
+            object.release();
+        }
+
+        function nodePrototypesReady(object)
+        {
+            if (!object)
+                return;
+
+            // Bail if the DOM node changed while we were waiting for the async response.
+            if (this.domNode !== domNode)
+                return;
+
+            object.getOwnProperties(fillSection.bind(this));
+        }
+
+        function fillSection(prototypes)
+        {
+            if (!prototypes)
+                return;
+
+            // Bail if the DOM node changed while we were waiting for the async response.
+            if (this.domNode !== domNode)
+                return;
+
+            var element = this._propertiesRow.element;
+            element.removeChildren();
+
+            // Get array of prototype user-friendly names.
+            for (var i = 0; i < prototypes.length; ++i) {
+                // The only values we care about are numeric, as assigned in collectPrototypes.
+                if (!parseInt(prototypes[i].name, 10))
+                    continue;
+
+                var prototype = prototypes[i].value;
+                var title = prototype.description;
+                if (title.match(/Prototype$/))
+                    title = title.replace(/Prototype$/, WebInspector.UIString(" (Prototype)"));
+                else if (title === "Object")
+                    title = title + WebInspector.UIString(" (Prototype)");
+
+                var propertiesSection = new WebInspector.ObjectPropertiesSection(prototype);
+
+                var detailsSection = new WebInspector.DetailsSection(prototype.description.hash + "-prototype-properties", title, null, null, true);
+                detailsSection.groups[0].rows = [new WebInspector.DetailsSectionPropertiesRow(propertiesSection)];
+
+                element.appendChild(detailsSection.element);
+            }
+        }
+    },
+
+    _refreshEventListeners: function()
+    {
+        var domNode = this.domNode;
+        if (!domNode)
+            return;
+
+        domNode.eventListeners(eventListenersCallback.bind(this));
+
+        function eventListenersCallback(error, eventListeners)
+        {
+            if (error)
+                return;
+
+            // Bail if the DOM node changed while we were waiting for the async response.
+            if (this.domNode !== domNode)
+                return;
+
+            var eventListenerTypes = [];
+            var eventListenerSections = {};
+            for (var i = 0; i < eventListeners.length; ++i) {
+                var eventListener = eventListeners[i];
+                eventListener.node = WebInspector.domTreeManager.nodeForId(eventListener.nodeId);
+
+                var type = eventListener.type;
+                var section = eventListenerSections[type];
+                if (!section) {
+                    section = new WebInspector.EventListenerSection(type, domNode.id);
+                    eventListenerSections[type] = section;
+                    eventListenerTypes.push(type);
+                }
+
+                section.addListener(eventListener);
+            }
+
+            if (!eventListenerTypes.length) {
+                var emptyRow = new WebInspector.DetailsSectionRow(WebInspector.UIString("No Event Listeners"));
+                emptyRow.showEmptyMessage();
+                this._eventListenersSectionGroup.rows = [emptyRow];
+                return;
+            }
+
+            eventListenerTypes.sort();
+
+            var rows = [];
+            for (var i = 0; i < eventListenerTypes.length; ++i)
+                rows.push(eventListenerSections[eventListenerTypes[i]]);
+            this._eventListenersSectionGroup.rows = rows;
+        }
+    },
+
+    _attributesChanged: function(event)
+    {
+        if (event.data.node !== this.domNode)
+            return;
+        this._refreshAttributes();
+    },
+
+    _nodeTypeDisplayName: function()
+    {
+        switch (this.domNode.nodeType()) {
+        case Node.ELEMENT_NODE:
+            return WebInspector.UIString("Element");
+        case Node.TEXT_NODE:
+            return WebInspector.UIString("Text Node");
+        case Node.COMMENT_NODE:
+            return WebInspector.UIString("Comment");
+        case Node.DOCUMENT_NODE:
+            return WebInspector.UIString("Document");
+        case Node.DOCUMENT_TYPE_NODE:
+            return WebInspector.UIString("Document Type");
+        case Node.DOCUMENT_FRAGMENT_NODE:
+            return WebInspector.UIString("Document Fragment");
+        case Node.CDATA_SECTION_NODE:
+            return WebInspector.UIString("Character Data");
+        case Node.PROCESSING_INSTRUCTION_NODE:
+            return WebInspector.UIString("Processing Instruction");
+        default:
+            console.error("Unknown DOM node type: ", this.domNode.nodeType());
+            return this.domNode.nodeType();
+        }
+    },
+
+    _createAttributesDataGrid: function()
+    {
+        var domNode = this.domNode;
+        if (!domNode || !domNode.hasAttributes())
+            return null;
+
+        var columns = {name: {title: WebInspector.UIString("Name"), width: "30%"}, value: {title: WebInspector.UIString("Value")}};
+        var dataGrid = new WebInspector.DataGrid(columns);
+
+        var attributes = domNode.attributes();
+        for (var i = 0; i < attributes.length; ++i) {
+            var attribute = attributes[i];
+
+            var node = new WebInspector.DataGridNode({name: attribute.name, value: attribute.value || ""}, false);
+            node.selectable = true;
+
+            dataGrid.appendChild(node);
+        }
+
+        return dataGrid;
+    }
+};
+
+WebInspector.DOMNodeDetailsSidebarPanel.prototype.__proto__ = WebInspector.DOMDetailsSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMNodeStyles.js b/Source/WebInspectorUI/UserInterface/DOMNodeStyles.js
new file mode 100644
index 000000000..ea0490253
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMNodeStyles.js
@@ -0,0 +1,1050 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMNodeStyles = function(node)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(node);
+    this._node = node || null;
+
+    this._rulesMap = {};
+    this._styleDeclarationsMap = {};
+
+    this._matchedRules = [];
+    this._inheritedRules = [];
+    this._pseudoElements = {};
+    this._inlineStyle = null;
+    this._attributesStyle = null;
+    this._computedStyle = null;
+    this._orderedStyles = [];
+    this._stylesNeedingTextCommited = [];
+
+    this._propertyNameToEffectivePropertyMap = {};
+
+    this.refresh();
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.DOMNodeStyles);
+
+WebInspector.DOMNodeStyles.Event = {
+    NeedsRefresh: "dom-node-styles-needs-refresh",
+    Refreshed: "dom-node-styles-refreshed"
+};
+
+WebInspector.DOMNodeStyles.prototype = {
+    constructor: WebInspector.DOMNodeStyles,
+
+    // Public
+
+    get node()
+    {
+        return this._node;
+    },
+
+    get needsRefresh()
+    {
+        return this._refreshPending || this._needsRefresh;
+    },
+
+    refreshIfNeeded: function()
+    {
+        if (!this._needsRefresh)
+            return;
+        this.refresh();
+    },
+
+    refresh: function()
+    {
+        if (this._refreshPending)
+            return;
+
+        this._needsRefresh = false;
+        this._refreshPending = true;
+
+        function parseRuleMatchArrayPayload(matchArray, node, inherited)
+        {
+            var result = [];
+
+            var ruleOccurrences = {};
+
+            // Iterate in reverse order to match the cascade order.
+            for (var i = matchArray.length - 1; i >= 0; --i) {
+                // COMPATIBILITY (iOS 6): This was just an array of rules, now it is an array of matches that have
+                // a 'rule' property. Support both here. And 'matchingSelectors' does not exist on iOS 6.
+                var matchedSelectorIndices = matchArray[i].matchingSelectors || [];
+                var rule = this._parseRulePayload(matchArray[i].rule || matchArray[i], matchedSelectorIndices, node, inherited, ruleOccurrences);
+                if (!rule)
+                    continue;
+                result.push(rule);
+            }
+
+            return result;
+        }
+
+        function fetchedMatchedStyles(error, matchedRulesPayload, pseudoElementRulesPayload, inheritedRulesPayload)
+        {
+            matchedRulesPayload = matchedRulesPayload || [];
+            pseudoElementRulesPayload = pseudoElementRulesPayload || [];
+            inheritedRulesPayload = inheritedRulesPayload || [];
+
+            // Move the current maps to previous.
+            this._previousRulesMap = this._rulesMap;
+            this._previousStyleDeclarationsMap = this._styleDeclarationsMap;
+
+            // Clear the current maps.
+            this._rulesMap = {};
+            this._styleDeclarationsMap = {};
+
+            this._matchedRules = parseRuleMatchArrayPayload.call(this, matchedRulesPayload, this._node);
+
+            this._pseudoElements = {};
+            for (var i = 0; i < pseudoElementRulesPayload.length; ++i) {
+                var pseudoElementRulePayload = pseudoElementRulesPayload[i];
+
+                // COMPATIBILITY (iOS 6): The entry payload had a 'rules' property, now it has a 'matches' property. Support both here.
+                var pseudoElementRules = parseRuleMatchArrayPayload.call(this, pseudoElementRulePayload.matches || pseudoElementRulePayload.rules, this._node);
+                this._pseudoElements[pseudoElementRulePayload.pseudoId] = {matchedRules: pseudoElementRules};
+            }
+
+            this._inheritedRules = [];
+
+            var i = 0;
+            var currentNode = this._node.parentNode;
+            while (currentNode && i < inheritedRulesPayload.length) {
+                var inheritedRulePayload = inheritedRulesPayload[i];
+
+                var inheritedRuleInfo = {node: currentNode};
+                inheritedRuleInfo.inlineStyle = inheritedRulePayload.inlineStyle ? this._parseStyleDeclarationPayload(inheritedRulePayload.inlineStyle, currentNode, true, WebInspector.CSSStyleDeclaration.Type.Inline) : null;
+                inheritedRuleInfo.matchedRules = inheritedRulePayload.matchedCSSRules ? parseRuleMatchArrayPayload.call(this, inheritedRulePayload.matchedCSSRules, currentNode, true) : [];
+
+                if (inheritedRuleInfo.inlineStyle || inheritedRuleInfo.matchedRules.length)
+                    this._inheritedRules.push(inheritedRuleInfo);
+
+                currentNode = currentNode.parentNode
+                ++i;
+            }
+        }
+
+        function fetchedInlineStyles(error, inlineStylePayload, attributesStylePayload)
+        {
+            this._inlineStyle = inlineStylePayload ? this._parseStyleDeclarationPayload(inlineStylePayload, this._node, false, WebInspector.CSSStyleDeclaration.Type.Inline) : null;
+            this._attributesStyle = attributesStylePayload ? this._parseStyleDeclarationPayload(attributesStylePayload, this._node, false, WebInspector.CSSStyleDeclaration.Type.Attribute) : null;
+
+            this._updateStyleCascade();
+        }
+
+        function fetchedComputedStyle(error, computedPropertiesPayload)
+        {
+            var properties = [];
+            for (var i = 0; computedPropertiesPayload && i < computedPropertiesPayload.length; ++i) {
+                var propertyPayload = computedPropertiesPayload[i];
+
+                var canonicalName = WebInspector.cssStyleManager.canonicalNameForPropertyName(propertyPayload.name);
+                propertyPayload.implicit = !this._propertyNameToEffectivePropertyMap[canonicalName];
+
+                var property = this._parseStylePropertyPayload(propertyPayload, NaN, this._computedStyle);
+                properties.push(property);
+            }
+
+            if (this._computedStyle)
+                this._computedStyle.update(null, properties);
+            else
+                this._computedStyle = new WebInspector.CSSStyleDeclaration(this, null, null, WebInspector.CSSStyleDeclaration.Type.Computed, this._node, false, null, properties);
+
+            this._refreshPending = false;
+
+            var significantChange = this._previousSignificantChange || false;
+            if (!significantChange) {
+                for (var key in this._styleDeclarationsMap) {
+                    // Check if the same key exists in the previous map and has the same style objects.
+                    if (key in this._previousStyleDeclarationsMap && Object.shallowEqual(this._styleDeclarationsMap[key], this._previousStyleDeclarationsMap[key]))
+                        continue;
+
+                    if (!this._includeUserAgentRulesOnNextRefresh) {
+                        // We can assume all the styles with the same key are from the same stylesheet and rule, so we only check the first.
+                        var firstStyle = this._styleDeclarationsMap[key][0];
+                        if (firstStyle && firstStyle.ownerRule && firstStyle.ownerRule.type === WebInspector.CSSRule.Type.UserAgent) {
+                            // User Agent styles get different identifiers after some edits. This would cause us to fire a significant refreshed
+                            // event more than it is helpful. And since the user agent stylesheet is static it shouldn't match differently
+                            // between refreshes for the same node. This issue is tracked by: https://webkit.org/b/110055
+                            continue;
+                        }
+                    }
+
+                    // This key is new or has different style objects than before. This is a significant change.
+                    significantChange = true;
+                    break;
+                }
+            }
+
+            if (!significantChange) {
+                for (var key in this._previousStyleDeclarationsMap) {
+                    // Check if the same key exists in current map. If it does exist it was already checked for equality above.
+                    if (key in this._styleDeclarationsMap)
+                        continue;
+
+                    if (!this._includeUserAgentRulesOnNextRefresh) {
+                        // See above for why we skip user agent style rules.
+                        var firstStyle = this._previousStyleDeclarationsMap[key][0];
+                        if (firstStyle && firstStyle.ownerRule && firstStyle.ownerRule.type === WebInspector.CSSRule.Type.UserAgent)
+                            continue;
+                    }
+
+                    // This key no longer exists. This is a significant change.
+                    significantChange = true;
+                    break;
+                }
+            }
+
+            delete this._includeUserAgentRulesOnNextRefresh;
+
+            // Delete the previous maps now that any reused rules and style have been moved over.
+            delete this._previousRulesMap;
+            delete this._previousStyleDeclarationsMap;
+
+            var styleToCommit = this._stylesNeedingTextCommited.shift();
+            if (styleToCommit) {
+                // Remember the significant change flag so we can pass it along when the pending style
+                // changes trigger a refresh. If we wait to scan later we might not find a significant change
+                // and fail to tell listeners about it.
+                this._previousSignificantChange = significantChange;
+
+                this.changeStyleText(styleToCommit, styleToCommit.__pendingText);
+
+                return;
+            }
+
+            // Delete the previous saved significant change flag so we rescan for a significant change next time.
+            delete this._previousSignificantChange;
+
+            this.dispatchEventToListeners(WebInspector.DOMNodeStyles.Event.Refreshed, {significantChange: significantChange});
+        }
+
+        CSSAgent.getMatchedStylesForNode.invoke({nodeId: this._node.id, includePseudo: true, includeInherited: true}, fetchedMatchedStyles.bind(this));
+        CSSAgent.getInlineStylesForNode.invoke({nodeId: this._node.id}, fetchedInlineStyles.bind(this));
+        CSSAgent.getComputedStyleForNode.invoke({nodeId: this._node.id}, fetchedComputedStyle.bind(this));
+    },
+
+    addRule: function(selector)
+    {
+        function addedRule(error, rulePayload)
+        {
+            if (error)
+                return;
+
+            DOMAgent.markUndoableState();
+
+            this.refresh();
+        }
+
+        selector = selector || this._node.appropriateSelectorFor(true);
+
+        CSSAgent.addRule.invoke({contextNodeId: this._node.id, selector: selector}, addedRule.bind(this));
+    },
+
+    get matchedRules()
+    {
+        return this._matchedRules;
+    },
+
+    get inheritedRules()
+    {
+        return this._inheritedRules;
+    },
+
+    get inlineStyle()
+    {
+        return this._inlineStyle;
+    },
+
+    get attributesStyle()
+    {
+        return this._attributesStyle;
+    },
+
+    get pseudoElements()
+    {
+        return this._pseudoElements;
+    },
+
+    get computedStyle()
+    {
+        return this._computedStyle;
+    },
+
+    get orderedStyles()
+    {
+        return this._orderedStyles;
+    },
+
+    effectivePropertyForName: function(name)
+    {
+        var canonicalName = WebInspector.cssStyleManager.canonicalNameForPropertyName(name);
+        return this._propertyNameToEffectivePropertyMap[canonicalName] || null;
+    },
+
+    // Protected
+
+    mediaQueryResultDidChange: function()
+    {
+        this._markAsNeedsRefresh();
+    },
+
+    pseudoClassesDidChange: function(node)
+    {
+        this._includeUserAgentRulesOnNextRefresh = true;
+        this._markAsNeedsRefresh();
+    },
+
+    attributeDidChange: function(node, attributeName)
+    {
+        // Ignore the attribute we know we just changed and handled above.
+        if (this._ignoreNextStyleAttributeDidChangeEvent && node === this._node && attributeName === "style") {
+            delete this._ignoreNextStyleAttributeDidChangeEvent;
+            return;
+        }
+
+        this._markAsNeedsRefresh();
+    },
+
+    changeRuleSelector: function(rule, selector)
+    {
+        selector = selector || "";
+
+        function ruleSelectorChanged(error, rulePayload)
+        {
+            DOMAgent.markUndoableState();
+
+            // Do a full refresh incase the rule no longer matches the node or the
+            // matched selector indices changed.
+            this.refresh();
+        }
+
+        this._needsRefresh = true;
+        this._ignoreNextContentDidChangeForStyleSheet = rule.ownerStyleSheet;
+
+        CSSAgent.setRuleSelector(rule.id, selector, ruleSelectorChanged.bind(this));
+    },
+
+    changeStyleText: function(style, text)
+    {
+        if (!style.ownerStyleSheet || !style.styleSheetTextRange)
+            return;
+
+        text = text || "";
+
+        if (CSSAgent.setStyleText) {
+            function styleChanged(error, stylePayload)
+            {
+                if (error)
+                    return;
+                this.refresh();
+            }
+
+            CSSAgent.setStyleText(style.id, text, styleChanged.bind(this));
+            return;
+        }
+
+        // COMPATIBILITY (iOS 6): CSSAgent.setStyleText was not available in iOS 6.
+
+        // Setting the text on CSSStyleSheet for inline styles causes a crash. https://webkit.org/b/110359
+        // So we just set the style attribute to get the same affect. This also avoids SourceCodeRevisions.
+        if (style.type === WebInspector.CSSStyleDeclaration.Type.Inline) {
+            text = text.trim();
+
+            function attributeChanged(error)
+            {
+                if (error)
+                    return;
+                this.refresh();
+            }
+
+            this._ignoreNextStyleAttributeDidChangeEvent = true;
+
+            if (text)
+                style.node.setAttributeValue("style", text, attributeChanged.bind(this));
+            else
+                style.node.removeAttribute("style", attributeChanged.bind(this));
+
+            return;
+        }
+
+        if (this._needsRefresh || this._refreshPending) {
+            // If we need refreshed then it is not safe to use the styleSheetTextRange since the range likely has
+            // changed and we need updated ranges. Store the text and remember the style so we can commit it after
+            // the next refresh.
+
+            style.__pendingText = text;
+
+            if (!this._stylesNeedingTextCommited.contains(style))
+                this._stylesNeedingTextCommited.push(style);
+
+            return;
+        }
+
+        function fetchedStyleSheetContent(styleSheet, content)
+        {
+            console.assert(style.styleSheetTextRange);
+            if (!style.styleSheetTextRange)
+                return;
+
+            var startOffset = style.styleSheetTextRange.startOffset;
+            var endOffset = style.styleSheetTextRange.endOffset;
+
+            if (isNaN(startOffset) || isNaN(endOffset)) {
+                style.styleSheetTextRange.resolveOffsets(content);
+
+                startOffset = style.styleSheetTextRange.startOffset;
+                endOffset = style.styleSheetTextRange.endOffset;
+            }
+
+            console.assert(!isNaN(startOffset));
+            console.assert(!isNaN(endOffset));
+            if (isNaN(startOffset) || isNaN(endOffset))
+                return;
+
+            function contentDidChange()
+            {
+                style.ownerStyleSheet.removeEventListener(WebInspector.CSSStyleSheet.Event.ContentDidChange, contentDidChange, this);
+
+                this.refresh();
+            }
+
+            style.ownerStyleSheet.addEventListener(WebInspector.CSSStyleSheet.Event.ContentDidChange, contentDidChange, this);
+
+            var newContent = content.substring(0, startOffset) + text + content.substring(endOffset);
+
+            WebInspector.branchManager.currentBranch.revisionForRepresentedObject(style.ownerStyleSheet).content = newContent;
+        }
+
+        this._stylesNeedingTextCommited.remove(style);
+        delete style.__pendingText;
+
+        this._needsRefresh = true;
+        this._ignoreNextContentDidChangeForStyleSheet = style.ownerStyleSheet;
+
+        style.ownerStyleSheet.requestContent(fetchedStyleSheetContent.bind(this));
+    },
+
+    changeProperty: function(property, name, value, priority)
+    {
+        var text = name ? name + ": " + value + (priority ? " !" + priority : "") + ";" : "";
+        this.changePropertyText(property, text);
+    },
+
+    changePropertyText: function(property, text)
+    {
+        text = text || "";
+
+        var index = property.index;
+        var newProperty = isNaN(index);
+        var overwrite = true;
+
+        // If this is a new property, then give it an index at the end of the current properties.
+        // Also don't overwrite, which will cause the property to be added at that index.
+        if (newProperty) {
+            index = property.ownerStyle.properties.length;
+            overwrite = false;
+        }
+
+        if (text && text.charAt(text.length - 1) !== ";")
+            text += ";";
+
+        this._needsRefresh = true;
+        this._ignoreNextContentDidChangeForStyleSheet = property.ownerStyle.ownerStyleSheet;
+
+        CSSAgent.setPropertyText(property.ownerStyle.id, index, text, overwrite, this._handlePropertyChange.bind(this, property));
+    },
+
+    changePropertyEnabledState: function(property, enabled)
+    {
+        enabled = !!enabled;
+
+        // Can't change a pending property with a NaN index.
+        if (isNaN(property.index))
+            return;
+
+        this._ignoreNextContentDidChangeForStyleSheet = property.ownerStyle.ownerStyleSheet;
+
+        CSSAgent.toggleProperty(property.ownerStyle.id, property.index, !enabled, this._handlePropertyChange.bind(this, property));
+    },
+
+    addProperty: function(property)
+    {
+        // Can't add a property unless it has a NaN index.
+        if (!isNaN(property.index))
+            return;
+
+        // Adding is done by setting the text.
+        this.changePropertyText(property, property.text);
+    },
+
+    removeProperty: function(property)
+    {
+        // Can't remove a pending property with a NaN index.
+        if (isNaN(property.index))
+            return;
+
+        // Removing is done by setting text to an empty string.
+        this.changePropertyText(property, "");
+    },
+
+    // Private
+
+    _handlePropertyChange: function(property, error, stylePayload)
+    {
+        if (error)
+            return;
+
+        DOMAgent.markUndoableState();
+
+        // Do a refresh instead of handling stylePayload so computed style is updated and we get valid
+        // styleSheetTextRange values for all the rules after this change.
+        this.refresh();
+    },
+
+    _createSourceCodeLocation: function(sourceURL, sourceLine, sourceColumn)
+    {
+        if (!sourceURL)
+            return null;
+
+        var sourceCode;
+
+        // Try to use the node to find the frame which has the correct resource first.
+        if (this._node.ownerDocument) {
+            var mainResource = WebInspector.frameResourceManager.resourceForURL(this._node.ownerDocument.documentURL);
+            if (mainResource) {
+                var parentFrame = mainResource.parentFrame;
+                sourceCode = parentFrame.resourceForURL(sourceURL);
+            }
+        }
+
+        // If that didn't find the resource, then search all frames.
+        if (!sourceCode)
+            sourceCode = WebInspector.frameResourceManager.resourceForURL(sourceURL);
+
+        if (!sourceCode)
+            return null;
+
+        return sourceCode.createSourceCodeLocation(sourceLine || 0, sourceColumn || 0);
+    },
+
+    _parseSourceRangePayload: function(payload, text)
+    {
+        if (!payload)
+            return null;
+
+        // COMPATIBILITY (iOS 6): The range use to only contain start and end offsets. Now it
+        // has line and column for the start and end position. Support both here.
+        if ("start" in payload && "end" in payload) {
+            var textRange = new WebInspector.TextRange(payload.start, payload.end);
+            if (typeof text === "string")
+                textRange.resolveLinesAndColumns(text);
+            return textRange;
+        }
+
+        return new WebInspector.TextRange(payload.startLine, payload.startColumn, payload.endLine, payload.endColumn);
+    },
+
+    _parseStylePropertyPayload: function(payload, index, styleDeclaration, styleText)
+    {
+        var text = payload.text || "";
+        var name = payload.name;
+        var value = (payload.value || "").replace(/\s*!important\s*$/, "");
+        var priority = payload.priority || "";
+
+        var enabled = true;
+        var overridden = false;
+        var implicit = payload.implicit || false;
+        var anonymous = false;
+        var valid = "parsedOk" in payload ? payload.parsedOk : true;
+
+        switch (payload.status || "style") {
+        case "active":
+            enabled = true;
+            break;
+        case "inactive":
+            overridden = true;
+            enabled = true;
+            break;
+        case "disabled":
+            enabled = false;
+            break;
+        case "style":
+            anonymous = true;
+            break;
+        }
+
+        var styleSheetTextRange = null;
+        var styleDeclarationTextRange = null;
+
+        // COMPATIBILITY (iOS 6): The range is in the style text, not the whole stylesheet.
+        // Later the range was changed to be in the whole stylesheet.
+        if (payload.range && "start" in payload.range && "end" in payload.range)
+            styleDeclarationTextRange = this._parseSourceRangePayload(payload.range, styleText);
+        else
+            styleSheetTextRange = this._parseSourceRangePayload(payload.range);
+
+        if (styleDeclaration) {
+            // Use propertyForName when the index is NaN since propertyForName is fast in that case.
+            var property = isNaN(index) ? styleDeclaration.propertyForName(name, true) : styleDeclaration.properties[index];
+
+            // Reuse a property if the index and name matches. Otherwise it is a different property
+            // and should be created from scratch. This works in the simple cases where only existing
+            // properties change in place and no properties are inserted or deleted at the beginning.
+            // FIXME: This could be smarter by ignoring index and just go by name. However, that gets
+            // tricky for rules that have more than one property with the same name.
+            if (property && property.name === name && (property.index === index || (isNaN(property.index) && isNaN(index)))) {
+                property.update(text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange, styleDeclarationTextRange);
+                return property;
+            }
+
+            // Reuse a pending property with the same name. These properties are pending being committed,
+            // so if we find a match that likely means it got committed and we should use it.
+            var pendingProperties = styleDeclaration.pendingProperties;
+            for (var i = 0; i < pendingProperties.length; ++i) {
+                var pendingProperty = pendingProperties[i];
+                if (pendingProperty.name === name && isNaN(pendingProperty.index)) {
+                    pendingProperty.index = index;
+                    pendingProperty.update(text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange, styleDeclarationTextRange);
+                    return pendingProperty;
+                }
+            }
+        }
+
+        return new WebInspector.CSSProperty(index, text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange, styleDeclarationTextRange);
+    },
+
+    _parseStyleDeclarationPayload: function(payload, node, inherited, type, rule, updateAllStyles)
+    {
+        if (!payload)
+            return null;
+
+        rule = rule || null;
+        inherited = inherited || false;
+
+        var id = payload.styleId;
+        var mapKey = id ? id.styleSheetId + ":" + id.ordinal : null;
+
+        var styleDeclaration = rule ? rule.style : null;
+        var styleDeclarations = [];
+
+        // Look for existing styles in the previous map if there is one, otherwise use the current map.
+        var previousStyleDeclarationsMap = this._previousStyleDeclarationsMap || this._styleDeclarationsMap;
+        if (mapKey && mapKey in previousStyleDeclarationsMap) {
+            styleDeclarations = previousStyleDeclarationsMap[mapKey];
+
+            // If we need to update all styles, then stop here and call _parseStyleDeclarationPayload for each style.
+            // We need to parse multiple times so we reuse the right properties from each style.
+            if (updateAllStyles && styleDeclarations.length) {
+                for (var i = 0; i < styleDeclarations.length; ++i) {
+                    var styleDeclaration = styleDeclarations[i];
+                    this._parseStyleDeclarationPayload(payload, styleDeclaration.node, styleDeclaration.inherited, styleDeclaration.type, styleDeclaration.ownerRule);
+                }
+
+                return;
+            }
+
+            if (!styleDeclaration) {
+                var filteredStyleDeclarations = styleDeclarations.filter(function(styleDeclaration) {
+                    // This case only applies for styles that are not part of a rule.
+                    if (styleDeclaration.ownerRule) {
+                        console.assert(!rule);
+                        return false;
+                    }
+
+                    if (styleDeclaration.node !== node)
+                        return false;
+
+                    if (styleDeclaration.inherited !== inherited)
+                        return false;
+
+                    return true;
+                });
+
+                console.assert(filteredStyleDeclarations.length <= 1);
+                styleDeclaration = filteredStyleDeclarations[0] || null;
+            }
+        }
+
+        if (previousStyleDeclarationsMap !== this._styleDeclarationsMap) {
+            // If the previous and current maps differ then make sure the found styleDeclaration is added to the current map.
+            styleDeclarations = mapKey && mapKey in this._styleDeclarationsMap ? this._styleDeclarationsMap[mapKey] : [] ;
+
+            if (styleDeclaration && !styleDeclarations.contains(styleDeclaration)) {
+                styleDeclarations.push(styleDeclaration);
+                this._styleDeclarationsMap[mapKey] = styleDeclarations;
+            }
+        }
+
+        var shorthands = {};
+        for (var i = 0; payload.shorthandEntries && i < payload.shorthandEntries.length; ++i) {
+            var shorthand = payload.shorthandEntries[i];
+            shorthands[shorthand.name] = shorthand.value;
+        }
+
+        var text = payload.cssText;
+
+        var inheritedPropertyCount = 0;
+
+        var properties = [];
+        for (var i = 0; payload.cssProperties && i < payload.cssProperties.length; ++i) {
+            var propertyPayload = payload.cssProperties[i];
+
+            if (inherited && propertyPayload.name in WebInspector.CSSKeywordCompletions.InheritedProperties)
+                ++inheritedPropertyCount;
+
+            var property = this._parseStylePropertyPayload(propertyPayload, i, styleDeclaration, text);
+            properties.push(property);
+        }
+
+        if (inherited && !inheritedPropertyCount)
+            return null;
+
+        var styleSheetTextRange = this._parseSourceRangePayload(payload.range);
+
+        if (styleDeclaration) {
+            styleDeclaration.update(text, properties, styleSheetTextRange);
+            return styleDeclaration;
+        }
+
+        var styleSheet = id ? WebInspector.cssStyleManager.styleSheetForIdentifier(id.styleSheetId) : null;
+        if (styleSheet)
+            styleSheet.addEventListener(WebInspector.CSSStyleSheet.Event.ContentDidChange, this._styleSheetContentDidChange, this);
+
+        styleDeclaration = new WebInspector.CSSStyleDeclaration(this, styleSheet, id, type, node, inherited, text, properties, styleSheetTextRange);
+
+        if (mapKey) {
+            styleDeclarations.push(styleDeclaration);
+            this._styleDeclarationsMap[mapKey] = styleDeclarations;
+        }
+
+        return styleDeclaration;
+    },
+
+    _parseRulePayload: function(payload, matchedSelectorIndices, node, inherited, ruleOccurrences)
+    {
+        if (!payload)
+            return null;
+
+        // User and User Agent rules don't have 'ruleId' in the payload. However, their style's have 'styleId' and
+        // 'styleId' is the same identifier the backend uses for Author rule identifiers, so do the same here.
+        // They are excluded by the backend because they are not editable, however our front-end does not determine
+        // editability solely based on the existence of the id like the open source front-end does.
+        var id = payload.ruleId || payload.style.styleId;
+
+        var mapKey = id ? id.styleSheetId + ":" + id.ordinal + ":" + (inherited ? "I" : "N") + ":" + node.id : null;
+
+        // Rules can match multiple times if they have multiple selectors or because of inheritance. We keep a count
+        // of occurrences so we have unique rules per occurrence, that way properties will be correctly marked as overridden.
+        var occurrence = 0;
+        if (mapKey) {
+            if (mapKey in ruleOccurrences)
+                occurrence = ++ruleOccurrences[mapKey];
+            else
+                ruleOccurrences[mapKey] = occurrence;
+        }
+
+        // Append the occurrence number to the map key for lookup in the rules map.
+        mapKey += ":" + occurrence;
+
+        var rule = null;
+
+        // Look for existing rules in the previous map if there is one, otherwise use the current map.
+        var previousRulesMap = this._previousRulesMap || this._rulesMap;
+        if (mapKey && mapKey in previousRulesMap) {
+            rule = previousRulesMap[mapKey];
+
+            if (previousRulesMap !== this._rulesMap) {
+                // If the previous and current maps differ then make sure the found rule is added to the current map.
+                this._rulesMap[mapKey] = rule;
+            }
+        }
+
+        var style = this._parseStyleDeclarationPayload(payload.style, node, inherited, WebInspector.CSSStyleDeclaration.Type.Rule, rule);
+        if (!style)
+            return null;
+
+        // COMPATIBILITY (iOS 6): The payload had 'selectorText' as a property,
+        // now it has 'selectorList' with a 'text' property. Support both here.
+        var selectorText = payload.selectorList ? payload.selectorList.text : payload.selectorText;
+        var selectors = payload.selectorList ? payload.selectorList.selectors : [];
+
+        // COMPATIBILITY (iOS 6): The payload did not have 'selectorList'.
+        // Fallback to using 'sourceLine' without column information.
+        if (payload.selectorList && payload.selectorList.range) {
+            var sourceRange = payload.selectorList.range;
+            var sourceCodeLocation = this._createSourceCodeLocation(payload.sourceURL, sourceRange.startLine, sourceRange.startColumn);
+        } else
+            var sourceCodeLocation = this._createSourceCodeLocation(payload.sourceURL, payload.sourceLine);
+
+        var type;
+        switch (payload.origin) {
+        case "regular":
+            type = WebInspector.CSSRule.Type.Author;
+            break;
+        case "user":
+            type = WebInspector.CSSRule.Type.User;
+            break;
+        case "user-agent":
+            type = WebInspector.CSSRule.Type.UserAgent;
+            break;
+        case "inspector":
+            type = WebInspector.CSSRule.Type.Inspector;
+            break;
+        }
+
+        var mediaList = [];
+        for (var i = 0; payload.media && i < payload.media.length; ++i) {
+            var mediaItem = payload.media[i];
+
+            var mediaType;
+            switch (mediaItem.source) {
+            case "mediaRule":
+                mediaType = WebInspector.CSSMedia.Type.MediaRule;
+                break;
+            case "importRule":
+                mediaType = WebInspector.CSSMedia.Type.ImportRule;
+                break;
+            case "linkedSheet":
+                mediaType = WebInspector.CSSMedia.Type.LinkedStyleSheet;
+                break;
+            case "inlineSheet":
+                mediaType = WebInspector.CSSMedia.Type.InlineStyleSheet;
+                break;
+            }
+
+            var mediaText = mediaItem.text;
+            var mediaSourceCodeLocation = this._createSourceCodeLocation(mediaItem.sourceURL, mediaItem.sourceLine);
+
+            mediaList.push(new WebInspector.CSSMedia(mediaType, mediaText, mediaSourceCodeLocation));
+        }
+
+        if (rule) {
+            rule.update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList);
+            return rule;
+        }
+
+        var styleSheet = id ? WebInspector.cssStyleManager.styleSheetForIdentifier(id.styleSheetId) : null;
+        if (styleSheet)
+            styleSheet.addEventListener(WebInspector.CSSStyleSheet.Event.ContentDidChange, this._styleSheetContentDidChange, this);
+
+        rule = new WebInspector.CSSRule(this, styleSheet, id, type, sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList);
+
+        if (mapKey)
+            this._rulesMap[mapKey] = rule;
+
+        return rule;
+    },
+
+    _markAsNeedsRefresh: function()
+    {
+        this._needsRefresh = true;
+        this.dispatchEventToListeners(WebInspector.DOMNodeStyles.Event.NeedsRefresh);
+    },
+
+    _styleSheetContentDidChange: function(event)
+    {
+        var styleSheet = event.target;
+        console.assert(styleSheet);
+        if (!styleSheet)
+            return;
+
+        // Ignore the stylesheet we know we just changed and handled above.
+        if (styleSheet === this._ignoreNextContentDidChangeForStyleSheet) {
+            delete this._ignoreNextContentDidChangeForStyleSheet;
+            return;
+        }
+
+        this._markAsNeedsRefresh();
+    },
+
+    _updateStyleCascade: function()
+    {
+        var cascadeOrderedStyleDeclarations = this._collectStylesInCascadeOrder(this._matchedRules, this._inlineStyle, this._attributesStyle);
+
+        for (var i = 0; i < this._inheritedRules.length; ++i) {
+            var inheritedStyleInfo = this._inheritedRules[i];
+            var inheritedCascadeOrder = this._collectStylesInCascadeOrder(inheritedStyleInfo.matchedRules, inheritedStyleInfo.inlineStyle, null);
+            cascadeOrderedStyleDeclarations = cascadeOrderedStyleDeclarations.concat(inheritedCascadeOrder);
+        }
+
+        this._orderedStyles = cascadeOrderedStyleDeclarations;
+
+        this._propertyNameToEffectivePropertyMap = {};
+
+        this._markOverriddenProperties(cascadeOrderedStyleDeclarations, this._propertyNameToEffectivePropertyMap);
+        this._associateRelatedProperties(cascadeOrderedStyleDeclarations, this._propertyNameToEffectivePropertyMap);
+
+        for (var pseudoIdentifier in this._pseudoElements) {
+            var pseudoElementInfo = this._pseudoElements[pseudoIdentifier];
+            pseudoElementInfo.orderedStyles = this._collectStylesInCascadeOrder(pseudoElementInfo.matchedRules, null, null);
+            this._markOverriddenProperties(pseudoElementInfo.orderedStyles);
+            this._associateRelatedProperties(pseudoElementInfo.orderedStyles);
+        }
+    },
+
+    _collectStylesInCascadeOrder: function(matchedRules, inlineStyle, attributesStyle)
+    {
+        var result = [];
+
+        // Inline style has the greatest specificity. So it goes first in the cascade order.
+        if (inlineStyle)
+            result.push(inlineStyle);
+
+        var userAndUserAgentStyles = [];
+
+        for (var i = 0; i < matchedRules.length; ++i) {
+            var rule = matchedRules[i];
+
+            // Only append to the result array here for author and inspector rules since attribute
+            // styles come between author rules and user/user agent rules.
+            switch (rule.type) {
+            case WebInspector.CSSRule.Type.Inspector:
+            case WebInspector.CSSRule.Type.Author:
+                result.push(rule.style);
+                break;
+
+            case WebInspector.CSSRule.Type.User:
+            case WebInspector.CSSRule.Type.UserAgent:
+                userAndUserAgentStyles.push(rule.style);
+                break;
+            }
+        }
+
+        // Style properties from HTML attributes are next.
+        if (attributesStyle)
+            result.push(attributesStyle);
+
+        // Finally add the user and user stylesheet's matched style rules we collected earlier.
+        result = result.concat(userAndUserAgentStyles);
+
+        return result;
+    },
+
+    _markOverriddenProperties: function(styles, propertyNameToEffectiveProperty)
+    {
+        propertyNameToEffectiveProperty = propertyNameToEffectiveProperty || {};
+
+        for (var i = 0; i < styles.length; ++i) {
+            var style = styles[i];
+            var properties = style.properties;
+
+            for (var j = 0; j < properties.length; ++j) {
+                var property = properties[j];
+                if (!property.enabled || property.anonymous || !property.valid) {
+                    property.overridden = false;
+                    continue;
+                }
+
+                if (style.inherited && !property.inherited) {
+                    property.overridden = false;
+                    continue;
+                }
+
+                var canonicalName = property.canonicalName;
+                if (canonicalName in propertyNameToEffectiveProperty) {
+                    var effectiveProperty = propertyNameToEffectiveProperty[canonicalName];
+
+                    if (effectiveProperty.ownerStyle === property.ownerStyle) {
+                        if (effectiveProperty.important && !property.important) {
+                            property.overridden = true;
+                            continue;
+                        }
+                    } else if (effectiveProperty.important || !property.important || effectiveProperty.ownerStyle.node !== property.ownerStyle.node) {
+                        property.overridden = true;
+                        continue;
+                    }
+
+                    effectiveProperty.overridden = true;
+                }
+
+                property.overridden = false;
+
+                propertyNameToEffectiveProperty[canonicalName] = property;
+            }
+        }
+    },
+
+    _associateRelatedProperties: function(styles, propertyNameToEffectiveProperty)
+    {
+        for (var i = 0; i < styles.length; ++i) {
+            var properties = styles[i].properties;
+
+            var knownShorthands = {};
+
+            for (var j = 0; j < properties.length; ++j) {
+                var property = properties[j];
+
+                if (!property.valid)
+                    continue;
+
+                if (!WebInspector.CSSCompletions.cssNameCompletions.isShorthandPropertyName(property.name))
+                    continue;
+
+                if (knownShorthands[property.canonicalName] && !knownShorthands[property.canonicalName].overridden) {
+                    console.assert(property.overridden);
+                    continue;
+                }
+
+                knownShorthands[property.canonicalName] = property;
+            }
+
+            for (var j = 0; j < properties.length; ++j) {
+                var property = properties[j];
+
+                if (!property.valid)
+                    continue;
+
+                var shorthandProperty = null;
+
+                if (!isEmptyObject(knownShorthands)) {
+                    var possibleShorthands = WebInspector.CSSCompletions.cssNameCompletions.shorthandsForLonghand(property.canonicalName);
+                    for (var k = 0; k < possibleShorthands.length; ++k) {
+                        if (possibleShorthands[k] in knownShorthands) {
+                            shorthandProperty = knownShorthands[possibleShorthands[k]];
+                            break;
+                        }
+                    }
+                }
+
+                if (!shorthandProperty || shorthandProperty.overridden !== property.overridden) {
+                    property.relatedShorthandProperty = null;
+                    property.clearRelatedLonghandProperties();
+                    continue;
+                }
+
+                shorthandProperty.addRelatedLonghandProperty(property);
+                property.relatedShorthandProperty = shorthandProperty;
+
+                if (propertyNameToEffectiveProperty && propertyNameToEffectiveProperty[shorthandProperty.canonicalName] === shorthandProperty)
+                    propertyNameToEffectiveProperty[property.canonicalName] = property;
+            }
+        }
+    }
+};
+
+WebInspector.DOMNodeStyles.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMObserver.js b/Source/WebInspectorUI/UserInterface/DOMObserver.js
new file mode 100644
index 000000000..be7742ec3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMObserver.js
@@ -0,0 +1,92 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMObserver = function()
+{
+    WebInspector.Object.call(this);
+};
+
+WebInspector.DOMObserver.prototype = {
+    constructor: WebInspector.DOMObserver,
+
+    // Events defined by the "DOM" domain (see WebCore/inspector/Inspector.json).
+
+    documentUpdated: function()
+    {
+        WebInspector.domTreeManager._documentUpdated();
+    },
+
+    setChildNodes: function(parentId, payloads)
+    {
+        WebInspector.domTreeManager._setChildNodes(parentId, payloads);
+    },
+
+    attributeModified: function(nodeId, name, value)
+    {
+        WebInspector.domTreeManager._attributeModified(nodeId, name, value);
+    },
+
+    attributeRemoved: function(nodeId, name)
+    {
+        WebInspector.domTreeManager._attributeRemoved(nodeId, name);
+    },
+
+    inlineStyleInvalidated: function(nodeIds)
+    {
+        WebInspector.domTreeManager._inlineStyleInvalidated(nodeIds);
+    },
+
+    characterDataModified: function(nodeId, characterData)
+    {
+        WebInspector.domTreeManager._characterDataModified(nodeId, characterData);
+    },
+
+    childNodeCountUpdated: function(nodeId, childNodeCount)
+    {
+        WebInspector.domTreeManager._childNodeCountUpdated(nodeId, childNodeCount);
+    },
+
+    childNodeInserted: function(parentNodeId, previousNodeId, payload)
+    {
+        WebInspector.domTreeManager._childNodeInserted(parentNodeId, previousNodeId, payload);
+    },
+
+    childNodeRemoved: function(parentNodeId, nodeId)
+    {
+        WebInspector.domTreeManager._childNodeRemoved(parentNodeId, nodeId);
+    },
+
+    shadowRootPushed: function(parentNodeId, nodeId)
+    {
+        WebInspector.domTreeManager._childNodeInserted(parentNodeId, 0, nodeId);
+    },
+
+    shadowRootPopped: function(parentNodeId, nodeId)
+    {
+        WebInspector.domTreeManager._childNodeRemoved(parentNodeId, nodeId);
+    }
+};
+
+WebInspector.DOMObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMSearchMatchObject.js b/Source/WebInspectorUI/UserInterface/DOMSearchMatchObject.js
new file mode 100644
index 000000000..6ba045727
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMSearchMatchObject.js
@@ -0,0 +1,150 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMSearchMatchObject = function(resource, domNode, title, searchTerm, textRange)
+{
+    console.assert(resource instanceof WebInspector.Resource);
+    console.assert(domNode instanceof WebInspector.DOMNode);
+
+    WebInspector.Object.call(this);
+
+    this._resource = resource;
+    this._domNode = domNode;
+    this._title = title;
+    this._searchTerm = searchTerm;
+    this._sourceCodeTextRange = resource.createSourceCodeTextRange(textRange);
+};
+
+WebInspector.DOMSearchMatchObject.DOMMatchElementIconStyleClassName = "dom-match-element-icon";
+WebInspector.DOMSearchMatchObject.DOMMatchTextNodeIconStyleClassName = "dom-match-text-node-icon";
+WebInspector.DOMSearchMatchObject.DOMMatchCommentIconStyleClassName = "dom-match-comment-icon";
+WebInspector.DOMSearchMatchObject.DOMMatchDocumentTypeIconStyleClassName = "dom-match-document-type-icon";
+WebInspector.DOMSearchMatchObject.DOMMatchCharacterDataIconStyleClassName = "dom-match-character-data-icon";
+WebInspector.DOMSearchMatchObject.DOMMatchNodeIconStyleClassName = "dom-match-node-icon";
+
+WebInspector.DOMSearchMatchObject.prototype = {
+    constructor: WebInspector.DOMSearchMatchObject,
+
+    // Public
+
+    get domNode()
+    {
+        return this._domNode;
+    },
+
+    get title()
+    {
+        return this._title;     
+    },
+
+    get className()
+    {
+        if (!this._className)
+            this._className = this._generateClassName();
+
+        return this._className;
+    },
+
+    get searchTerm()
+    {
+        return this._searchTerm;
+    },
+
+    get sourceCodeTextRange()
+    {
+        return this._sourceCodeTextRange;
+    },
+
+    // Private
+    
+    _generateClassName: function()
+    {
+        switch (this._domNode.nodeType()) {
+        case Node.ELEMENT_NODE:
+            return WebInspector.DOMSearchMatchObject.DOMMatchElementIconStyleClassName;
+
+        case Node.TEXT_NODE:
+            return WebInspector.DOMSearchMatchObject.DOMMatchTextNodeIconStyleClassName;
+
+        case Node.COMMENT_NODE:
+            return WebInspector.DOMSearchMatchObject.DOMMatchCommentIconStyleClassName;
+
+        case Node.DOCUMENT_TYPE_NODE:
+            return WebInspector.DOMSearchMatchObject.DOMMatchDocumentTypeIconStyleClassName;
+
+        case Node.CDATA_SECTION_NODE:
+            return WebInspector.DOMSearchMatchObject.DOMMatchCharacterDataIconStyleClassName;
+
+        default:
+            console.error("Unknown DOM node type: ", node.nodeType());
+            return WebInspector.DOMSearchMatchObject.DOMMatchNodeIconStyleClassName;
+        }
+    }
+};
+
+WebInspector.DOMSearchMatchObject.titleForDOMNode = function(domNode)
+{
+    switch (domNode.nodeType()) {
+    case Node.ELEMENT_NODE:
+        var title = "<" + domNode.nodeNameInCorrectCase();
+        
+        for (var i = 0; i < domNode.attributes().length; ++i) {
+            title += " " + domNode.attributes()[i].name;
+            if (domNode.attributes()[i].value.length)
+                title += "=\"" + domNode.attributes()[i].value + "\"";
+        }
+
+        return title + ">";
+
+    case Node.TEXT_NODE:
+        return "\"" + domNode.nodeValue() + "\"";
+
+    case Node.COMMENT_NODE:
+        return "<!--" + domNode.nodeValue() + "-->";
+
+    case Node.DOCUMENT_TYPE_NODE:
+        var title = "<!DOCTYPE " + domNode.nodeName();
+        if (domNode.publicId) {
+            title += " PUBLIC \"" + domNode.publicId + "\"";
+            if (node.systemId)
+                title += " \"" + domNode.systemId + "\"";
+        } else if (domNode.systemId)
+            title += " SYSTEM \"" + domNode.systemId + "\"";
+
+        if (domNode.internalSubset)
+            title += " [" + domNode.internalSubset + "]";
+
+        return title + ">";
+
+    case Node.CDATA_SECTION_NODE:
+        return "<![CDATA[" + domNode + "]]>";
+
+    default:
+        console.error("Unknown DOM node type: ", domNode.nodeType());
+        return domNode.nodeNameInCorrectCase();
+    }
+}
+
+WebInspector.DOMSearchMatchObject.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMStorageContentView.css b/Source/WebInspectorUI/UserInterface/DOMStorageContentView.css
new file mode 100644
index 000000000..234dec65d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMStorageContentView.css
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.dom-storage > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    outline: none;
+    border: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/DOMStorageContentView.js b/Source/WebInspectorUI/UserInterface/DOMStorageContentView.js
new file mode 100644
index 000000000..0f4e67166
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMStorageContentView.js
@@ -0,0 +1,169 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMStorageContentView = function(representedObject)
+{
+    WebInspector.ContentView.call(this, representedObject);
+    
+    this.element.classList.add(WebInspector.DOMStorageContentView.StyleClassName);
+
+    this.update();
+};
+
+WebInspector.DOMStorageContentView.StyleClassName = "dom-storage";
+
+WebInspector.DOMStorageContentView.prototype = {
+    constructor: WebInspector.DOMStorageContentView,
+    
+    // Public
+    
+    update: function()
+    {
+        this.representedObject.getEntries(this._showDOMStorageEntries.bind(this));
+    },
+
+    updateLayout: function()
+    {
+        if (this._dataGrid)
+            this._dataGrid.updateLayout();
+    },
+
+    get scrollableElements()
+    {
+        if (!this._dataGrid)
+            return [];
+        return [this._dataGrid.scrollContainer];
+    },
+
+    // Private
+
+    _showDOMStorageEntries: function(error, entries)
+    {
+        if (error)
+            return;
+
+        this._updateDataGridForDOMStorageEntries(entries);
+        
+        this._dataGrid.updateLayout();
+    },
+
+    _updateDataGridForDOMStorageEntries: function(entries)
+    {
+        if (!this._dataGrid) {
+            var columns = {};
+            columns[0] = {title: WebInspector.UIString("Key"), sortable: true};
+            columns[1] = {title: WebInspector.UIString("Value"), sortable: true};            
+
+            this._dataGrid = new WebInspector.DataGrid(columns, this._editingCallback.bind(this), this._deleteCallback.bind(this));
+            this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortDataGrid, this);
+
+            this.element.appendChild(this._dataGrid.element);
+        }
+
+        console.assert(this._dataGrid);
+
+        var nodes = [];
+        for (var i = 0; i < entries.length; ++i) {
+            var data = {};
+
+            var key = entries[i][0];
+            var value = entries[i][1];
+
+            data[0] = key;
+            data[1] = value;
+
+            var node = new WebInspector.DataGridNode(data, false);
+            node.selectable = true;
+
+            nodes.push(node);
+        }
+
+        if (this._dataGrid.creationNode)
+            this._dataGrid.removeChild(this._dataGrid.creationNode);
+
+        this._insertNodesIntoDataGridWithSort(nodes);
+
+        if (nodes.length > 0)
+            nodes[0].selected = true;
+    },
+
+    _sortDataGrid: function()
+    {
+        if (this._dataGrid.creationNode)
+            this._dataGrid.removeChild(this._dataGrid.creationNode);
+
+        var nodes = this._dataGrid.children.slice();
+        this._insertNodesIntoDataGridWithSort(nodes);
+    },
+
+    _insertNodesIntoDataGridWithSort: function(nodes)
+    {
+        console.assert(!this._dataGrid.creationNode);
+
+        var sortColumnIdentifier = this._dataGrid.sortColumnIdentifier;
+        var sortAscending = this._dataGrid.sortOrder === "ascending";
+
+        function comparator(a, b)
+        {
+            var result = b.data[sortColumnIdentifier].localeCompare(a.data[sortColumnIdentifier]);
+            return sortAscending ? -result : result;
+        }
+
+        if (sortColumnIdentifier)
+            nodes.sort(comparator);
+
+        this._dataGrid.removeChildren();
+        for (var i = 0; i < nodes.length; i++)
+            this._dataGrid.appendChild(nodes[i]);
+        this._dataGrid.addCreationNode(false);
+    },
+
+    _deleteCallback: function(node)
+    {
+        if (!node || node.isCreationNode)
+            return;
+
+        if (this.representedObject)
+            this.representedObject.removeItem(node.data[0]);
+
+        this.update();
+    },
+
+    _editingCallback: function(editingNode, columnIdentifier, oldText, newText)
+    {
+        var domStorage = this.representedObject;
+        if (columnIdentifier === 0) {
+            if (oldText)
+                domStorage.removeItem(oldText);
+
+            domStorage.setItem(newText, editingNode.data[1]);
+        } else
+            domStorage.setItem(editingNode.data[0], newText);
+
+        this.update();
+    }
+};
+
+WebInspector.DOMStorageContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMStorageIcons.css b/Source/WebInspectorUI/UserInterface/DOMStorageIcons.css
new file mode 100644
index 000000000..08d16070c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMStorageIcons.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.local-storage-icon .icon {
+    content: -webkit-image-set(url(Images/LocalStorage.png) 1x, url(Images/LocalStorage@2x.png) 2x);
+}
+
+.session-storage-icon .icon {
+    content: -webkit-image-set(url(Images/SessionStorage.png) 1x, url(Images/SessionStorage@2x.png) 2x);
+}
diff --git a/Source/WebInspectorUI/UserInterface/DOMStorageObject.js b/Source/WebInspectorUI/UserInterface/DOMStorageObject.js
new file mode 100644
index 000000000..1c3720f89
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMStorageObject.js
@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMStorageObject = function(id, host, isLocalStorage)
+{
+    this._id = id;
+    this._host = host;
+    this._isLocalStorage = isLocalStorage;
+};
+
+WebInspector.DOMStorageObject.prototype = {
+    constructor: WebInspector.DOMStorageObject,
+    
+    get id()
+    {
+        return this._id;
+    },
+
+    get host()
+    {
+        return this._host;
+    },
+
+    isLocalStorage: function()
+    {
+        return this._isLocalStorage;
+    },
+
+    getEntries: function(callback)
+    {
+        // COMPATIBILITY (iOS 6): The getDOMStorageItems function was later renamed to getDOMStorageItems.
+        if (DOMStorageAgent.getDOMStorageEntries)
+            DOMStorageAgent.getDOMStorageEntries(this._id, callback);
+        else
+            DOMStorageAgent.getDOMStorageItems(this._id, callback);
+    },
+
+    removeItem: function(key, callback)
+    {
+        DOMStorageAgent.removeDOMStorageItem(this._id, key, callback);
+    },
+
+    setItem: function(key, value, callback)
+    {
+        DOMStorageAgent.setDOMStorageItem(this._id, key, value, callback);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/DOMStorageObserver.js b/Source/WebInspectorUI/UserInterface/DOMStorageObserver.js
new file mode 100644
index 000000000..787137a10
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMStorageObserver.js
@@ -0,0 +1,73 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMStorageObserver = function()
+{
+    WebInspector.Object.call(this);
+};
+
+WebInspector.DOMStorageObserver.prototype = {
+    constructor: WebInspector.DOMStorageObserver,
+
+    // Events defined by the "DOMStorage" domain (see WebCore/inspector/Inspector.json).
+
+    // COMPATIBILITY (iOS 6): This event no longer exists. It is still needed and called on iOS 6.
+    addDOMStorage: function(storage)
+    {
+        WebInspector.storageManager.domStorageWasAdded(storage.id, storage.host, storage.isLocalStorage);
+    },
+
+    // COMPATIBILITY (iOS 6): This event was split into the granular events below.
+    updateDOMStorage: function(storageId)
+    {
+        WebInspector.storageManager.domStorageWasUpdated(storageId);
+    },
+
+    domStorageItemsCleared: function(storageId)
+    {
+        // FIXME: Handle this granular event better by only updating what changed. <rdar://problem/13223981>
+        this.updateDOMStorage(storageId);
+    },
+
+    domStorageItemRemoved: function(storageId, key)
+    {
+        // FIXME: Handle this granular event better by only updating what changed. <rdar://problem/13223981>
+        this.updateDOMStorage(storageId);
+    },
+
+    domStorageItemAdded: function(storageId, key, newValue)
+    {
+        // FIXME: Handle this granular event better by only updating what changed. <rdar://problem/13223981>
+        this.updateDOMStorage(storageId);
+    },
+
+    domStorageItemUpdated: function(storageId, key, oldValue, newValue)
+    {
+        // FIXME: Handle this granular event better by only updating what changed. <rdar://problem/13223981>
+        this.updateDOMStorage(storageId);
+    }
+};
+
+WebInspector.DOMStorageObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMStorageTreeElement.js b/Source/WebInspectorUI/UserInterface/DOMStorageTreeElement.js
new file mode 100644
index 000000000..3b3e60c79
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMStorageTreeElement.js
@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMStorageTreeElement = function(representedObject)
+{
+    console.assert(representedObject instanceof WebInspector.DOMStorageObject);
+
+    if (representedObject.isLocalStorage())
+        var className = WebInspector.DOMStorageTreeElement.LocalStorageIconStyleClassName;
+    else
+        var className = WebInspector.DOMStorageTreeElement.SessionStorageIconStyleClassName;
+
+    WebInspector.StorageTreeElement.call(this, className, WebInspector.displayNameForHost(representedObject.host), representedObject);
+};
+
+WebInspector.DOMStorageTreeElement.LocalStorageIconStyleClassName = "local-storage-icon";
+WebInspector.DOMStorageTreeElement.SessionStorageIconStyleClassName = "session-storage-icon";
+
+WebInspector.DOMStorageTreeElement.prototype = {
+    constructor: WebInspector.DOMStorageTreeElement,
+
+    // Public
+
+    get name()
+    {
+        return WebInspector.displayNameForHost(this.representedObject.host);
+    },
+
+    get categoryName()
+    {
+        if (this.representedObject.isLocalStorage())
+            return WebInspector.UIString("Local Storage");
+        return WebInspector.UIString("Session Storage");
+    }
+};
+
+WebInspector.DOMStorageTreeElement.prototype.__proto__ = WebInspector.StorageTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMTree.js b/Source/WebInspectorUI/UserInterface/DOMTree.js
new file mode 100644
index 000000000..783e97d4d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMTree.js
@@ -0,0 +1,236 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMTree = function(frame)
+{
+    WebInspector.Object.call(this);
+
+    this._frame = frame;
+
+    this._rootDOMNode = null;
+    this._requestIdentifier = 0;
+
+    this._frame.addEventListener(WebInspector.Frame.Event.PageExecutionContextChanged, this._framePageExecutionContextChanged, this);
+
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.DocumentUpdated, this._documentUpdated, this);
+
+    // Only add extra event listeners when not the main frame. Since DocumentUpdated is enough for the main frame.
+    if (!this._frame.isMainFrame()) {
+        WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.NodeRemoved, this._nodeRemoved, this);
+        this._frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._frameMainResourceDidChange, this);
+    }
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.DOMTree);
+
+WebInspector.DOMTree.Event = {
+    RootDOMNodeInvalidated: "dom-tree-root-dom-node-invalidated"
+};
+
+WebInspector.DOMTree.prototype = {
+    constructor: WebInspector.DOMTree,
+
+    // Public
+
+    get frame()
+    {
+        return this._frame;
+    },
+
+    invalidate: function()
+    {
+        // Set to null so it is fetched again next time requestRootDOMNode is called.
+        this._rootDOMNode = null;
+
+        // Clear the pending callbacks. It is the responsibility of the client to listen for
+        // the RootDOMNodeInvalidated event and request the root DOM node again.
+        delete this._pendingRootDOMNodeRequests;
+
+        if (this._invalidateTimeoutIdentifier)
+            return;
+
+        function performInvalidate()
+        {
+            delete this._invalidateTimeoutIdentifier;
+
+            this.dispatchEventToListeners(WebInspector.DOMTree.Event.RootDOMNodeInvalidated);
+        }
+
+        // Delay the invalidation on a timeout to coalesce multiple calls to invalidate.
+        this._invalidateTimeoutIdentifier = setTimeout(performInvalidate.bind(this), 0);
+    },
+
+    requestRootDOMNode: function(callback)
+    {
+        console.assert(typeof callback === "function");
+        if (typeof callback !== "function")
+            return;
+
+        if (this._rootDOMNode) {
+            callback(this._rootDOMNode);
+            return;
+        }
+
+        if (!this._frame.isMainFrame() && WebInspector.ExecutionContext.supported() && !this._frame.pageExecutionContext) {
+            this._rootDOMNodeRequestWaitingForExecutionContext = true;
+            if (!this._pendingRootDOMNodeRequests)
+                this._pendingRootDOMNodeRequests = [];
+            this._pendingRootDOMNodeRequests.push(callback);
+            return;
+        }
+
+        if (this._pendingRootDOMNodeRequests) {
+            this._pendingRootDOMNodeRequests.push(callback);
+            return;
+        }
+
+        this._pendingRootDOMNodeRequests = [callback];
+        this._requestRootDOMNode();
+    },
+
+    // Private
+
+    _requestRootDOMNode: function()
+    {
+        console.assert(this._frame.isMainFrame() || !WebInspector.ExecutionContext.supported() || this._frame.pageExecutionContext);
+        console.assert(this._pendingRootDOMNodeRequests.length);
+
+        // Bump the request identifier. This prevents pending callbacks for previous requests from completing.
+        var requestIdentifier = ++this._requestIdentifier;
+
+        function rootObjectAvailable(error, result)
+        {
+            // Check to see if we have been invalidated (if the callbacks were cleared).
+            if (!this._pendingRootDOMNodeRequests || requestIdentifier != this._requestIdentifier)
+                return;
+
+            if (error) {
+                console.error(JSON.stringify(error));
+
+                this._rootDOMNode = null;
+                dispatchCallbacks.call(this);
+                return;
+            }
+
+            // Convert the RemoteObject to a DOMNode by asking the backend to push it to us.
+            var remoteObject = WebInspector.RemoteObject.fromPayload(result);
+            remoteObject.pushNodeToFrontend(rootDOMNodeAvailable.bind(this, remoteObject));
+        }
+
+        function rootDOMNodeAvailable(remoteObject, nodeId)
+        {
+            remoteObject.release();
+
+            // Check to see if we have been invalidated (if the callbacks were cleared).
+            if (!this._pendingRootDOMNodeRequests || requestIdentifier != this._requestIdentifier)
+                return;
+
+            if (!nodeId) {
+                this._rootDOMNode = null;
+                dispatchCallbacks.call(this);
+                return;
+            }
+
+            this._rootDOMNode = WebInspector.domTreeManager.nodeForId(nodeId);
+
+            console.assert(this._rootDOMNode);
+            if (!this._rootDOMNode) {
+                dispatchCallbacks.call(this);
+                return;
+            }
+
+            // Request the child nodes since the root node is often not shown in the UI,
+            // and the child nodes will be needed immediately.
+            this._rootDOMNode.getChildNodes(dispatchCallbacks.bind(this));
+        }
+
+        function mainDocumentAvailable(document)
+        {
+            this._rootDOMNode = document;
+
+            dispatchCallbacks.call(this);
+        }
+
+        function dispatchCallbacks()
+        {
+            // Check to see if we have been invalidated (if the callbacks were cleared).
+            if (!this._pendingRootDOMNodeRequests || requestIdentifier != this._requestIdentifier)
+                return;
+
+            for (var i = 0; i < this._pendingRootDOMNodeRequests.length; ++i)
+                this._pendingRootDOMNodeRequests[i](this._rootDOMNode);
+            delete this._pendingRootDOMNodeRequests;
+        }
+
+        // For the main frame we can use the more straight forward requestDocument function. For
+        // child frames we need to do a more roundabout approach since the protocol does not include
+        // a specific way to request a document given a frame identifier. The child frame approach
+        // involves evaluating the JavaScript "document" and resolving that into a DOMNode.
+        if (this._frame.isMainFrame())
+            WebInspector.domTreeManager.requestDocument(mainDocumentAvailable.bind(this));
+        else {
+            // COMPATIBILITY (iOS 6): Execution context identifiers (contextId) did not exist
+            // in iOS 6. Fallback to including the frame identifier (frameId).
+            var contextId = this._frame.pageExecutionContext ? this._frame.pageExecutionContext.id : undefined;
+            RuntimeAgent.evaluate.invoke({expression: "document", objectGroup: "", includeCommandLineAPI: false, doNotPauseOnExceptionsAndMuteConsole: true, contextId: contextId, frameId: this._frame.id, returnByValue: false, generatePreview: false}, rootObjectAvailable.bind(this));
+        }
+    },
+
+    _nodeRemoved: function(event)
+    {
+        console.assert(!this._frame.isMainFrame());
+
+        if (event.data.node !== this._rootDOMNode)
+            return;
+
+        this.invalidate();
+    },
+
+    _documentUpdated: function(event)
+    {
+        this.invalidate();
+    },
+
+    _frameMainResourceDidChange: function(event)
+    {
+        console.assert(!this._frame.isMainFrame());
+
+        this.invalidate();
+    },
+
+    _framePageExecutionContextChanged: function(event)
+    {
+        if (this._rootDOMNodeRequestWaitingForExecutionContext) {
+            console.assert(this._frame.pageExecutionContext);
+            console.assert(this._pendingRootDOMNodeRequests && this._pendingRootDOMNodeRequests.length);
+
+            delete this._rootDOMNodeRequestWaitingForExecutionContext;
+
+            this._requestRootDOMNode();
+        }
+    }
+};
+
+WebInspector.DOMTree.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeContentView.css b/Source/WebInspectorUI/UserInterface/DOMTreeContentView.css
new file mode 100644
index 000000000..b00e8b196
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMTreeContentView.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.dom-tree {
+    overflow: auto;
+}
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeContentView.js b/Source/WebInspectorUI/UserInterface/DOMTreeContentView.js
new file mode 100644
index 000000000..57f911169
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMTreeContentView.js
@@ -0,0 +1,429 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMTreeContentView = function(domTree)
+{
+    console.assert(domTree);
+
+    WebInspector.ContentView.call(this, domTree);
+
+    // The navigation item for the compositing borders button.
+    this._compositingBordersButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("layer-borders", WebInspector.UIString("Show compositing borders"), WebInspector.UIString("Hide compositing borders"), "Images/LayerBorders.pdf", 16, 16);
+    this._compositingBordersButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleCompositingBorders, this);
+    this._compositingBordersButtonNavigationItem.enabled = !!PageAgent.getCompositingBordersVisible;
+
+    // The navigation item for the shadow tree toggle button.
+    WebInspector.showShadowDOMSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
+    this._showsShadowDOMButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("shows-shadow-DOM", WebInspector.UIString("Show shadow DOM nodes"), WebInspector.UIString("Hide shadow DOM nodes"), "Images/ShadowDOM.pdf", 16, 16);
+    this._showsShadowDOMButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleShowsShadowDOMSetting, this);
+    this._showShadowDOMSettingChanged();
+
+    this.element.classList.add(WebInspector.DOMTreeContentView.StyleClassName);
+    this.element.addEventListener("click", this._mouseWasClicked.bind(this), false);
+
+    this._domTree = domTree;
+    this._domTree.addEventListener(WebInspector.DOMTree.Event.RootDOMNodeInvalidated, this._rootDOMNodeInvalidated, this);
+
+    this._domTreeOutline = new WebInspector.DOMTreeOutline(true, true, false);
+    this._domTreeOutline.addEventListener(WebInspector.DOMTreeOutline.Event.SelectedNodeChanged, this._selectedNodeDidChange, this);
+    this._domTreeOutline.wireToDomAgent();
+    this.element.appendChild(this._domTreeOutline.element);
+
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeModified, this._domNodeChanged, this);
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeRemoved, this._domNodeChanged, this);
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.CharacterDataModified, this._domNodeChanged, this);
+
+    this._lastSelectedNodePathSetting = new WebInspector.Setting("last-selected-node-path", null);
+
+    this._numberOfSearchResults = null;
+
+    this._requestRootDOMNode();
+};
+
+WebInspector.DOMTreeContentView.StyleClassName = "dom-tree";
+
+WebInspector.DOMTreeContentView.prototype = {
+    constructor: WebInspector.DOMTreeContentView,
+
+    // Public
+
+    get navigationItems()
+    {
+        return [this._showsShadowDOMButtonNavigationItem, this._compositingBordersButtonNavigationItem];
+    },
+
+    get domTree()
+    {
+        return this._domTree;
+    },
+
+    get scrollableElements()
+    {
+        return [this.element];
+    },
+
+    updateLayout: function()
+    {
+        this._domTreeOutline.updateSelection();
+    },
+
+    shown: function()
+    {
+        this._domTreeOutline.setVisible(true, WebInspector.isConsoleFocused());
+        this._updateCompositingBordersButtonToMatchPageSettings();
+    },
+
+    hidden: function()
+    {
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+        this._domTreeOutline.setVisible(false);
+    },
+
+    closed: function()
+    {
+        this._domTree.removeEventListener(null, null, this);
+        WebInspector.domTreeManager.removeEventListener(null, null, this);
+
+        this._domTreeOutline.close();
+    },
+
+    get selectionPathComponents()
+    {
+        var treeElement = this._domTreeOutline.selectedTreeElement;
+        var pathComponents = [];
+
+        while (treeElement && !treeElement.root) {
+            // The close tag is contained within the element it closes. So skip it since we don't want to
+            // show the same node twice in the hierarchy.
+            if (treeElement.isCloseTag()) {
+                treeElement = treeElement.parent;
+                continue;
+            }
+
+            var pathComponent = new WebInspector.DOMTreeElementPathComponent(treeElement, treeElement.representedObject);
+            pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
+            pathComponents.unshift(pathComponent);
+            treeElement = treeElement.parent;
+        }
+
+        return pathComponents;
+    },
+
+    selectAndRevealDOMNode: function(domNode, preventFocusChange)
+    {
+        this._domTreeOutline.selectDOMNode(domNode, !preventFocusChange);
+    },
+
+    handleCopyEvent: function(event)
+    {
+        var selectedDOMNode = this._domTreeOutline.selectedDOMNode();
+        if (!selectedDOMNode)
+            return;
+
+        event.clipboardData.clearData();
+        event.preventDefault();
+
+        selectedDOMNode.copyNode();
+    },
+
+    get supportsSearch()
+    {
+        return true;
+    },
+
+    get numberOfSearchResults()
+    {
+        return this._numberOfSearchResults;
+    },
+
+    get hasPerformedSearch()
+    {
+        return this._numberOfSearchResults !== null;
+    },
+
+    set automaticallyRevealFirstSearchResult(reveal)
+    {
+        this._automaticallyRevealFirstSearchResult = reveal;
+
+        // If we haven't shown a search result yet, reveal one now.
+        if (this._automaticallyRevealFirstSearchResult && this._numberOfSearchResults > 0) {
+            if (this._currentSearchResultIndex === -1)
+                this.revealNextSearchResult();
+        }
+    },
+
+    performSearch: function(query)
+    {
+        if (this._searchQuery === query)
+            return;
+
+        if (this._searchIdentifier)
+            DOMAgent.discardSearchResults(this._searchIdentifier);
+
+        this._searchQuery = query;
+        this._searchIdentifier = null;
+        this._numberOfSearchResults = null;
+        this._currentSearchResultIndex = -1;
+
+        function searchResultsReady(error, searchIdentifier, resultsCount)
+        {
+            if (error)
+                return;
+
+            this._searchIdentifier = searchIdentifier;
+            this._numberOfSearchResults = resultsCount;
+
+            this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
+
+            if (this._automaticallyRevealFirstSearchResult)
+                this.revealNextSearchResult();
+        }
+
+        DOMAgent.performSearch(query, searchResultsReady.bind(this));
+    },
+
+    searchCleared: function()
+    {
+        if (this._searchIdentifier)
+            DOMAgent.discardSearchResults(this._searchIdentifier);
+
+        this._searchQuery = null;
+        this._searchIdentifier = null;
+        this._numberOfSearchResults = null;
+        this._currentSearchResultIndex = -1;
+    },
+
+    revealPreviousSearchResult: function(changeFocus)
+    {
+        if (!this._numberOfSearchResults)
+            return;
+
+        if (this._currentSearchResultIndex > 0)
+            --this._currentSearchResultIndex;
+        else
+            this._currentSearchResultIndex = this._numberOfSearchResults - 1;
+
+        this._revealSearchResult(this._currentSearchResultIndex, changeFocus);
+    },
+
+    revealNextSearchResult: function(changeFocus)
+    {
+        if (!this._numberOfSearchResults)
+            return;
+
+        if (this._currentSearchResultIndex + 1 < this._numberOfSearchResults)
+            ++this._currentSearchResultIndex;
+        else
+            this._currentSearchResultIndex = 0;
+
+        this._revealSearchResult(this._currentSearchResultIndex, changeFocus);
+    },
+
+    // Private
+
+    _revealSearchResult: function(index, changeFocus)
+    {
+        console.assert(this._searchIdentifier);
+
+        var searchIdentifier = this._searchIdentifier;
+
+        function revealResult(error, nodeIdentifiers)
+        {
+            if (error)
+                return;
+
+            // Bail if the searchIdentifier changed since we started.
+            if (this._searchIdentifier !== searchIdentifier)
+                return;
+
+            console.assert(nodeIdentifiers.length === 1);
+
+            var domNode = WebInspector.domTreeManager.nodeForId(nodeIdentifiers[0]);
+            console.assert(domNode);
+            if (!domNode)
+                return;
+
+            this._domTreeOutline.selectDOMNode(domNode, changeFocus);
+        }
+
+        DOMAgent.getSearchResults(this._searchIdentifier, index, index + 1, revealResult.bind(this));
+    },
+
+    _rootDOMNodeAvailable: function(rootDOMNode)
+    {
+        this._domTreeOutline.rootDOMNode = rootDOMNode;
+
+        if (!rootDOMNode) {
+            this._domTreeOutline.selectDOMNode(null, false);
+            return;
+        }
+
+        function selectNode(lastSelectedNode)
+        {
+            // A selection was made while waiting for the async reply. Just bail now.
+            if (this._domTreeOutline.selectedTreeElement)
+                return;
+
+            var nodeToFocus = lastSelectedNode;
+            if (!nodeToFocus)
+                nodeToFocus = rootDOMNode.body || rootDOMNode.documentElement;
+
+            if (!nodeToFocus)
+                return;
+
+            this._dontSetLastSelectedNodePath = true;
+            this.selectAndRevealDOMNode(nodeToFocus, WebInspector.isConsoleFocused());
+            this._dontSetLastSelectedNodePath = false;
+
+            // If this wasn't the last selected node, then expand it.
+            if (!lastSelectedNode && this._domTreeOutline.selectedTreeElement)
+                this._domTreeOutline.selectedTreeElement.expand();
+        }
+
+        function selectLastSelectedNode(nodeId)
+        {
+            selectNode.call(this, WebInspector.domTreeManager.nodeForId(nodeId));
+        }
+
+        if (this._lastSelectedNodePathSetting.value && this._lastSelectedNodePathSetting.value.path && this._lastSelectedNodePathSetting.value.url === this._domTree.frame.url.hash)
+            WebInspector.domTreeManager.pushNodeByPathToFrontend(this._lastSelectedNodePathSetting.value.path, selectLastSelectedNode.bind(this));
+        else
+            selectNode.call(this);
+    },
+
+    _rootDOMNodeInvalidated: function(event)
+    {
+        this._requestRootDOMNode();
+    },
+
+    _requestRootDOMNode: function()
+    {
+        this._domTree.requestRootDOMNode(this._rootDOMNodeAvailable.bind(this));
+    },
+
+    _selectedNodeDidChange: function(event)
+    {
+        var selectedDOMNode = this._domTreeOutline.selectedDOMNode();
+        if (selectedDOMNode && !this._dontSetLastSelectedNodePath)
+            this._lastSelectedNodePathSetting.value = {url: this._domTree.frame.url.hash, path: selectedDOMNode.path()};
+
+        if (selectedDOMNode)
+            ConsoleAgent.addInspectedNode(selectedDOMNode.id);
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    },
+
+    _pathComponentSelected: function(event)
+    {
+        console.assert(event.data.pathComponent instanceof WebInspector.DOMTreeElementPathComponent);
+        console.assert(event.data.pathComponent.domTreeElement instanceof WebInspector.DOMTreeElement);
+
+        this._domTreeOutline.selectDOMNode(event.data.pathComponent.domTreeElement.representedObject, true);
+    },
+
+    _domNodeChanged: function(event)
+    {
+        var selectedDOMNode = this._domTreeOutline.selectedDOMNode();
+        if (selectedDOMNode !== event.data.node)
+            return;
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    },
+
+    _mouseWasClicked: function(event)
+    {
+        var anchorElement = event.target.enclosingNodeOrSelfWithNodeName("a");
+        if (!anchorElement || !anchorElement.href)
+            return;
+
+        // Prevent the link from navigating, since we don't do any navigation by following links normally.
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (WebInspector.isBeingEdited(anchorElement)) {
+            // Don't follow the link when it is being edited.
+            return;
+        }
+
+        // Cancel any pending link navigation.
+        if (this._followLinkTimeoutIdentifier) {
+            clearTimeout(this._followLinkTimeoutIdentifier);
+            delete this._followLinkTimeoutIdentifier;
+        }
+
+        // If this is a double-click (or multiple-click), return early.
+        if (event.detail > 1)
+            return;
+
+        function followLink()
+        {
+            // Since followLink is delayed, the call to WebInspector.openURL can't look at window.event
+            // to see if the command key is down like it normally would. So we need to do that check
+            // before calling WebInspector.openURL.
+            var alwaysOpenExternally = event ? event.metaKey : false;
+            WebInspector.openURL(anchorElement.href, this._frame, alwaysOpenExternally, anchorElement.lineNumber);
+        }
+
+        // Start a timeout since this is a single click, if the timeout is canceled before it fires,
+        // then a double-click happened or another link was clicked.
+        // FIXME: The duration might be longer or shorter than the user's configured double click speed.
+        this._followLinkTimeoutIdentifier = setTimeout(followLink.bind(this), 333);
+    },
+
+    _toggleCompositingBorders: function(event)
+    {
+        console.assert(PageAgent.setCompositingBordersVisible);
+
+        var activated = !this._compositingBordersButtonNavigationItem.activated;
+        this._compositingBordersButtonNavigationItem.activated = activated;
+        PageAgent.setCompositingBordersVisible(activated);
+    },
+    
+    _updateCompositingBordersButtonToMatchPageSettings: function()
+    {
+        if (!PageAgent.getCompositingBordersVisible)
+            return;
+
+        var button = this._compositingBordersButtonNavigationItem;
+
+        // We need to sync with the page settings since these can be controlled
+        // in a different way than just using the navigation bar button.
+        PageAgent.getCompositingBordersVisible(function(error, compositingBordersVisible) {
+            button.activated = error ? false : compositingBordersVisible;
+        });
+    },
+
+    _showShadowDOMSettingChanged: function(event)
+    {
+        this._showsShadowDOMButtonNavigationItem.activated = WebInspector.showShadowDOMSetting.value;
+    },
+
+    _toggleShowsShadowDOMSetting: function(event)
+    {
+        WebInspector.showShadowDOMSetting.value = !WebInspector.showShadowDOMSetting.value;
+    }
+};
+
+WebInspector.DOMTreeContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeElement.js b/Source/WebInspectorUI/UserInterface/DOMTreeElement.js
new file mode 100644
index 000000000..d1af2ae68
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMTreeElement.js
@@ -0,0 +1,1307 @@
+/*
+ * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
+ * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ * @extends {TreeElement}
+ * @param {boolean=} elementCloseTag
+ */
+WebInspector.DOMTreeElement = function(node, elementCloseTag)
+{
+    this._elementCloseTag = elementCloseTag;
+    var hasChildrenOverride = !elementCloseTag && node.hasChildNodes() && !this._showInlineText(node);
+
+    // The title will be updated in onattach.
+    TreeElement.call(this, "", node, hasChildrenOverride);
+
+    if (this.representedObject.nodeType() == Node.ELEMENT_NODE && !elementCloseTag)
+        this._canAddAttributes = true;
+    this._searchQuery = null;
+    this._expandedChildrenLimit = WebInspector.DOMTreeElement.InitialChildrenLimit;
+}
+
+WebInspector.DOMTreeElement.InitialChildrenLimit = 500;
+WebInspector.DOMTreeElement.MaximumInlineTextChildLength = 80;
+
+// A union of HTML4 and HTML5-Draft elements that explicitly
+// or implicitly (for HTML5) forbid the closing tag.
+// FIXME: Revise once HTML5 Final is published.
+WebInspector.DOMTreeElement.ForbiddenClosingTagElements = [
+    "area", "base", "basefont", "br", "canvas", "col", "command", "embed", "frame",
+    "hr", "img", "input", "isindex", "keygen", "link", "meta", "param", "source"
+].keySet();
+
+// These tags we do not allow editing their tag name.
+WebInspector.DOMTreeElement.EditTagBlacklist = [
+    "html", "head", "body"
+].keySet();
+
+WebInspector.DOMTreeElement.prototype = {
+    isCloseTag: function()
+    {
+        return this._elementCloseTag;
+    },
+
+    highlightSearchResults: function(searchQuery)
+    {
+        if (this._searchQuery !== searchQuery) {
+            this._updateSearchHighlight(false);
+            delete this._highlightResult; // A new search query.
+        }
+
+        this._searchQuery = searchQuery;
+        this._searchHighlightsVisible = true;
+        this.updateTitle(true);
+    },
+
+    hideSearchHighlights: function()
+    {
+        delete this._searchHighlightsVisible;
+        this._updateSearchHighlight(false);
+    },
+
+    _updateSearchHighlight: function(show)
+    {
+        if (!this._highlightResult)
+            return;
+
+        function updateEntryShow(entry)
+        {
+            switch (entry.type) {
+                case "added":
+                    entry.parent.insertBefore(entry.node, entry.nextSibling);
+                    break;
+                case "changed":
+                    entry.node.textContent = entry.newText;
+                    break;
+            }
+        }
+
+        function updateEntryHide(entry)
+        {
+            switch (entry.type) {
+                case "added":
+                    if (entry.node.parentElement)
+                        entry.node.parentElement.removeChild(entry.node);
+                    break;
+                case "changed":
+                    entry.node.textContent = entry.oldText;
+                    break;
+            }
+        }
+
+        var updater = show ? updateEntryShow : updateEntryHide;
+
+        for (var i = 0, size = this._highlightResult.length; i < size; ++i)
+            updater(this._highlightResult[i]);
+    },
+
+    get hovered()
+    {
+        return this._hovered;
+    },
+
+    set hovered(x)
+    {
+        if (this._hovered === x)
+            return;
+
+        this._hovered = x;
+
+        if (this.listItemElement) {
+            if (x) {
+                this.updateSelection();
+                this.listItemElement.classList.add("hovered");
+            } else {
+                this.listItemElement.classList.remove("hovered");
+            }
+        }
+    },
+
+    get expandedChildrenLimit()
+    {
+        return this._expandedChildrenLimit;
+    },
+
+    set expandedChildrenLimit(x)
+    {
+        if (this._expandedChildrenLimit === x)
+            return;
+
+        this._expandedChildrenLimit = x;
+        if (this.treeOutline && !this._updateChildrenInProgress)
+            this._updateChildren(true);
+    },
+
+    get expandedChildCount()
+    {
+        var count = this.children.length;
+        if (count && this.children[count - 1]._elementCloseTag)
+            count--;
+        if (count && this.children[count - 1].expandAllButton)
+            count--;
+        return count;
+    },
+
+    showChild: function(index)
+    {
+        if (this._elementCloseTag)
+            return;
+
+        if (index >= this.expandedChildrenLimit) {
+            this._expandedChildrenLimit = index + 1;
+            this._updateChildren(true);
+        }
+
+        // Whether index-th child is visible in the children tree
+        return this.expandedChildCount > index;
+    },
+
+    _createTooltipForNode: function()
+    {
+        var node = /** @type {WebInspector.DOMNode} */ this.representedObject;
+        if (!node.nodeName() || node.nodeName().toLowerCase() !== "img")
+            return;
+
+        function setTooltip(result)
+        {
+            if (!result || result.type !== "string")
+                return;
+
+            try {
+                var properties = JSON.parse(result.description);
+                var offsetWidth = properties[0];
+                var offsetHeight = properties[1];
+                var naturalWidth = properties[2];
+                var naturalHeight = properties[3];
+                if (offsetHeight === naturalHeight && offsetWidth === naturalWidth)
+                    this.tooltip = WebInspector.UIString("%d \xd7 %d pixels").format(offsetWidth, offsetHeight);
+                else
+                    this.tooltip = WebInspector.UIString("%d \xd7 %d pixels (Natural: %d \xd7 %d pixels)").format(offsetWidth, offsetHeight, naturalWidth, naturalHeight);
+            } catch (e) {
+                console.error(e);
+            }
+        }
+
+        function resolvedNode(object)
+        {
+            if (!object)
+                return;
+
+            function dimensions()
+            {
+                return "[" + this.offsetWidth + "," + this.offsetHeight + "," + this.naturalWidth + "," + this.naturalHeight + "]";
+            }
+
+            object.callFunction(dimensions, undefined, setTooltip.bind(this));
+            object.release();
+        }
+        WebInspector.RemoteObject.resolveNode(node, "", resolvedNode.bind(this));
+    },
+
+    updateSelection: function()
+    {
+        var listItemElement = this.listItemElement;
+        if (!listItemElement)
+            return;
+
+        if (document.body.offsetWidth <= 0) {
+            // The stylesheet hasn't loaded yet or the window is closed,
+            // so we can't calculate what is need. Return early.
+            return;
+        }
+
+        if (!this.selectionElement) {
+            this.selectionElement = document.createElement("div");
+            this.selectionElement.className = "selection selected";
+            listItemElement.insertBefore(this.selectionElement, listItemElement.firstChild);
+        }
+
+        this.selectionElement.style.height = listItemElement.offsetHeight + "px";
+    },
+
+    onattach: function()
+    {
+        if (this._hovered) {
+            this.updateSelection();
+            this.listItemElement.classList.add("hovered");
+        }
+
+        this.updateTitle();
+        this.listItemElement.draggable = true;
+    },
+
+    onpopulate: function()
+    {
+        if (this.children.length || this._showInlineText(this.representedObject) || this._elementCloseTag)
+            return;
+
+        this.updateChildren();
+    },
+
+    expandRecursively: function()
+    {
+        function callback()
+        {
+            TreeElement.prototype.expandRecursively.call(this, Number.MAX_VALUE);
+        }
+
+        this.representedObject.getSubtree(-1, callback.bind(this));
+    },
+
+    /**
+     * @param {boolean=} fullRefresh
+     */
+    updateChildren: function(fullRefresh)
+    {
+        if (this._elementCloseTag)
+            return;
+        this.representedObject.getChildNodes(this._updateChildren.bind(this, fullRefresh));
+    },
+
+    /**
+     * @param {boolean=} closingTag
+     */
+    insertChildElement: function(child, index, closingTag)
+    {
+        var newElement = new WebInspector.DOMTreeElement(child, closingTag);
+        newElement.selectable = this.treeOutline._selectEnabled;
+        this.insertChild(newElement, index);
+        return newElement;
+    },
+
+    moveChild: function(child, targetIndex)
+    {
+        var wasSelected = child.selected;
+        this.removeChild(child);
+        this.insertChild(child, targetIndex);
+        if (wasSelected)
+            child.select();
+    },
+
+    /**
+     * @param {boolean=} fullRefresh
+     */
+    _updateChildren: function(fullRefresh)
+    {
+        if (this._updateChildrenInProgress || !this.treeOutline._visible)
+            return;
+
+        this._updateChildrenInProgress = true;
+        var selectedNode = this.treeOutline.selectedDOMNode();
+        var originalScrollTop = 0;
+        if (fullRefresh) {
+            var treeOutlineContainerElement = this.treeOutline.element.parentNode;
+            originalScrollTop = treeOutlineContainerElement.scrollTop;
+            var selectedTreeElement = this.treeOutline.selectedTreeElement;
+            if (selectedTreeElement && selectedTreeElement.hasAncestor(this))
+                this.select();
+            this.removeChildren();
+        }
+
+        var treeElement = this;
+        var treeChildIndex = 0;
+        var elementToSelect;
+
+        function updateChildrenOfNode(node)
+        {
+            var treeOutline = treeElement.treeOutline;
+            var child = node.firstChild;
+            while (child) {
+                var currentTreeElement = treeElement.children[treeChildIndex];
+                if (!currentTreeElement || currentTreeElement.representedObject !== child) {
+                    // Find any existing element that is later in the children list.
+                    var existingTreeElement = null;
+                    for (var i = (treeChildIndex + 1), size = treeElement.expandedChildCount; i < size; ++i) {
+                        if (treeElement.children[i].representedObject === child) {
+                            existingTreeElement = treeElement.children[i];
+                            break;
+                        }
+                    }
+
+                    if (existingTreeElement && existingTreeElement.parent === treeElement) {
+                        // If an existing element was found and it has the same parent, just move it.
+                        treeElement.moveChild(existingTreeElement, treeChildIndex);
+                    } else {
+                        // No existing element found, insert a new element.
+                        if (treeChildIndex < treeElement.expandedChildrenLimit) {
+                            var newElement = treeElement.insertChildElement(child, treeChildIndex);
+                            if (child === selectedNode)
+                                elementToSelect = newElement;
+                            if (treeElement.expandedChildCount > treeElement.expandedChildrenLimit)
+                                treeElement.expandedChildrenLimit++;
+                        }
+                    }
+                }
+
+                child = child.nextSibling;
+                ++treeChildIndex;
+            }
+        }
+
+        // Remove any tree elements that no longer have this node (or this node's contentDocument) as their parent.
+        for (var i = (this.children.length - 1); i >= 0; --i) {
+            var currentChild = this.children[i];
+            var currentNode = currentChild.representedObject;
+            var currentParentNode = currentNode.parentNode;
+
+            if (currentParentNode === this.representedObject)
+                continue;
+
+            var selectedTreeElement = this.treeOutline.selectedTreeElement;
+            if (selectedTreeElement && (selectedTreeElement === currentChild || selectedTreeElement.hasAncestor(currentChild)))
+                this.select();
+
+            this.removeChildAtIndex(i);
+        }
+
+        updateChildrenOfNode(this.representedObject);
+        this.adjustCollapsedRange();
+
+        var lastChild = this.children.lastValue;
+        if (this.representedObject.nodeType() == Node.ELEMENT_NODE && (!lastChild || !lastChild._elementCloseTag))
+            this.insertChildElement(this.representedObject, this.children.length, true);
+
+        // We want to restore the original selection and tree scroll position after a full refresh, if possible.
+        if (fullRefresh && elementToSelect) {
+            elementToSelect.select();
+            if (treeOutlineContainerElement && originalScrollTop <= treeOutlineContainerElement.scrollHeight)
+                treeOutlineContainerElement.scrollTop = originalScrollTop;
+        }
+
+        delete this._updateChildrenInProgress;
+    },
+
+    adjustCollapsedRange: function()
+    {
+        // Ensure precondition: only the tree elements for node children are found in the tree
+        // (not the Expand All button or the closing tag).
+        if (this.expandAllButtonElement && this.expandAllButtonElement.__treeElement.parent)
+            this.removeChild(this.expandAllButtonElement.__treeElement);
+
+        const node = this.representedObject;
+        if (!node.children)
+            return;
+        const childNodeCount = node.children.length;
+
+        // In case some nodes from the expanded range were removed, pull some nodes from the collapsed range into the expanded range at the bottom.
+        for (var i = this.expandedChildCount, limit = Math.min(this.expandedChildrenLimit, childNodeCount); i < limit; ++i)
+            this.insertChildElement(node.children[i], i);
+
+        const expandedChildCount = this.expandedChildCount;
+        if (childNodeCount > this.expandedChildCount) {
+            var targetButtonIndex = expandedChildCount;
+            if (!this.expandAllButtonElement) {
+                var button = document.createElement("button");
+                button.className = "show-all-nodes";
+                button.value = "";
+                var item = new TreeElement(button, null, false);
+                item.selectable = false;
+                item.expandAllButton = true;
+                this.insertChild(item, targetButtonIndex);
+                this.expandAllButtonElement = item.listItemElement.firstChild;
+                this.expandAllButtonElement.__treeElement = item;
+                this.expandAllButtonElement.addEventListener("click", this.handleLoadAllChildren.bind(this), false);
+            } else if (!this.expandAllButtonElement.__treeElement.parent)
+                this.insertChild(this.expandAllButtonElement.__treeElement, targetButtonIndex);
+            this.expandAllButtonElement.textContent = WebInspector.UIString("Show All Nodes (%d More)").format(childNodeCount - expandedChildCount);
+        } else if (this.expandAllButtonElement)
+            delete this.expandAllButtonElement;
+    },
+
+    handleLoadAllChildren: function()
+    {
+        this.expandedChildrenLimit = Math.max(this.representedObject.childNodeCount, this.expandedChildrenLimit + WebInspector.DOMTreeElement.InitialChildrenLimit);
+    },
+
+    onexpand: function()
+    {
+        if (this._elementCloseTag)
+            return;
+
+        this.updateTitle();
+        this.treeOutline.updateSelection();
+    },
+
+    oncollapse: function()
+    {
+        if (this._elementCloseTag)
+            return;
+
+        this.updateTitle();
+        this.treeOutline.updateSelection();
+    },
+
+    onreveal: function()
+    {
+        if (this.listItemElement) {
+            var tagSpans = this.listItemElement.getElementsByClassName("html-tag-name");
+            if (tagSpans.length)
+                tagSpans[0].scrollIntoViewIfNeeded(false);
+            else
+                this.listItemElement.scrollIntoViewIfNeeded(false);
+        }
+    },
+
+    onselect: function(treeElement, selectedByUser)
+    {
+        this.treeOutline.suppressRevealAndSelect = true;
+        this.treeOutline.selectDOMNode(this.representedObject, selectedByUser);
+        if (selectedByUser)
+            WebInspector.domTreeManager.highlightDOMNode(this.representedObject.id);
+        this.updateSelection();
+        this.treeOutline.suppressRevealAndSelect = false;
+    },
+
+    ondelete: function()
+    {
+        var startTagTreeElement = this.treeOutline.findTreeElement(this.representedObject);
+        startTagTreeElement ? startTagTreeElement.remove() : this.remove();
+        return true;
+    },
+
+    onenter: function()
+    {
+        // On Enter or Return start editing the first attribute
+        // or create a new attribute on the selected element.
+        if (this.treeOutline.editing)
+            return false;
+
+        this._startEditing();
+
+        // prevent a newline from being immediately inserted
+        return true;
+    },
+
+    selectOnMouseDown: function(event)
+    {
+        TreeElement.prototype.selectOnMouseDown.call(this, event);
+
+        if (this._editing)
+            return;
+
+        // Prevent selecting the nearest word on double click.
+        if (event.detail >= 2)
+            event.preventDefault();
+    },
+
+    ondblclick: function(event)
+    {
+        if (this._editing || this._elementCloseTag)
+            return;
+
+        if (this._startEditingTarget(event.target))
+            return;
+
+        if (this.hasChildren && !this.expanded)
+            this.expand();
+    },
+
+    _insertInLastAttributePosition: function(tag, node)
+    {
+        if (tag.getElementsByClassName("html-attribute").length > 0)
+            tag.insertBefore(node, tag.lastChild);
+        else {
+            var nodeName = tag.textContent.match(/^<(.*?)>$/)[1];
+            tag.textContent = '';
+            tag.appendChild(document.createTextNode('<'+nodeName));
+            tag.appendChild(node);
+            tag.appendChild(document.createTextNode('>'));
+        }
+
+        this.updateSelection();
+    },
+
+    _startEditingTarget: function(eventTarget)
+    {
+        if (this.treeOutline.selectedDOMNode() != this.representedObject)
+            return;
+
+        if (this.representedObject.nodeType() != Node.ELEMENT_NODE && this.representedObject.nodeType() != Node.TEXT_NODE)
+            return false;
+
+        var textNode = eventTarget.enclosingNodeOrSelfWithClass("html-text-node");
+        if (textNode)
+            return this._startEditingTextNode(textNode);
+
+        var attribute = eventTarget.enclosingNodeOrSelfWithClass("html-attribute");
+        if (attribute)
+            return this._startEditingAttribute(attribute, eventTarget);
+
+        var tagName = eventTarget.enclosingNodeOrSelfWithClass("html-tag-name");
+        if (tagName)
+            return this._startEditingTagName(tagName);
+
+        var newAttribute = eventTarget.enclosingNodeOrSelfWithClass("add-attribute");
+        if (newAttribute)
+            return this._addNewAttribute();
+
+        return false;
+    },
+
+    _populateTagContextMenu: function(contextMenu, event)
+    {
+        var attribute = event.target.enclosingNodeOrSelfWithClass("html-attribute");
+        var newAttribute = event.target.enclosingNodeOrSelfWithClass("add-attribute");
+
+        // Add attribute-related actions.
+        contextMenu.appendItem(WebInspector.UIString("Add Attribute"), this._addNewAttribute.bind(this));
+        if (attribute && !newAttribute)
+            contextMenu.appendItem(WebInspector.UIString("Edit Attribute"), this._startEditingAttribute.bind(this, attribute, event.target));
+        contextMenu.appendSeparator();
+
+        if (WebInspector.cssStyleManager.canForcePseudoClasses()) {
+            var pseudoSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIString("Forced Pseudo-Classes"));
+            this._populateForcedPseudoStateItems(pseudoSubMenu);
+            contextMenu.appendSeparator();
+        }
+
+        this._populateNodeContextMenu(contextMenu);
+        this.treeOutline._populateContextMenu(contextMenu, this.representedObject);
+    },
+
+    _populateForcedPseudoStateItems: function(subMenu)
+    {
+        var node = this.representedObject;
+        var enabledPseudoClasses = node.enabledPseudoClasses;
+        // These strings don't need to be localized as they are CSS pseudo-classes.
+        WebInspector.CSSStyleManager.ForceablePseudoClasses.forEach(function(pseudoClass) {
+            var label = pseudoClass.capitalize();
+            var enabled = enabledPseudoClasses.contains(pseudoClass);
+            subMenu.appendCheckboxItem(label, function() {
+                node.setPseudoClassEnabled(pseudoClass, !enabled);
+            }, enabled, false);
+        });
+    },
+
+    _populateTextContextMenu: function(contextMenu, textNode)
+    {
+        contextMenu.appendItem(WebInspector.UIString("Edit Text"), this._startEditingTextNode.bind(this, textNode));
+        this._populateNodeContextMenu(contextMenu);
+    },
+
+    _populateNodeContextMenu: function(contextMenu)
+    {
+        // Add free-form node-related actions.
+        contextMenu.appendItem(WebInspector.UIString("Edit as HTML"), this._editAsHTML.bind(this));
+        contextMenu.appendItem(WebInspector.UIString("Copy as HTML"), this._copyHTML.bind(this));
+        contextMenu.appendItem(WebInspector.UIString("Delete Node"), this.remove.bind(this));
+    },
+
+    _startEditing: function()
+    {
+        if (this.treeOutline.selectedDOMNode() !== this.representedObject)
+            return;
+
+        var listItem = this._listItemNode;
+
+        if (this._canAddAttributes) {
+            var attribute = listItem.getElementsByClassName("html-attribute")[0];
+            if (attribute)
+                return this._startEditingAttribute(attribute, attribute.getElementsByClassName("html-attribute-value")[0]);
+
+            return this._addNewAttribute();
+        }
+
+        if (this.representedObject.nodeType() === Node.TEXT_NODE) {
+            var textNode = listItem.getElementsByClassName("html-text-node")[0];
+            if (textNode)
+                return this._startEditingTextNode(textNode);
+            return;
+        }
+    },
+
+    _addNewAttribute: function()
+    {
+        // Cannot just convert the textual html into an element without
+        // a parent node. Use a temporary span container for the HTML.
+        var container = document.createElement("span");
+        this._buildAttributeDOM(container, " ", "");
+        var attr = container.firstChild;
+        attr.style.marginLeft = "2px"; // overrides the .editing margin rule
+        attr.style.marginRight = "2px"; // overrides the .editing margin rule
+
+        var tag = this.listItemElement.getElementsByClassName("html-tag")[0];
+        this._insertInLastAttributePosition(tag, attr);
+        return this._startEditingAttribute(attr, attr);
+    },
+
+    _triggerEditAttribute: function(attributeName)
+    {
+        var attributeElements = this.listItemElement.getElementsByClassName("html-attribute-name");
+        for (var i = 0, len = attributeElements.length; i < len; ++i) {
+            if (attributeElements[i].textContent === attributeName) {
+                for (var elem = attributeElements[i].nextSibling; elem; elem = elem.nextSibling) {
+                    if (elem.nodeType !== Node.ELEMENT_NODE)
+                        continue;
+
+                    if (elem.classList.contains("html-attribute-value"))
+                        return this._startEditingAttribute(elem.parentNode, elem);
+                }
+            }
+        }
+    },
+
+    _startEditingAttribute: function(attribute, elementForSelection)
+    {
+        if (WebInspector.isBeingEdited(attribute))
+            return true;
+
+        var attributeNameElement = attribute.getElementsByClassName("html-attribute-name")[0];
+        if (!attributeNameElement)
+            return false;
+
+        var attributeName = attributeNameElement.textContent;
+
+        function removeZeroWidthSpaceRecursive(node)
+        {
+            if (node.nodeType === Node.TEXT_NODE) {
+                node.nodeValue = node.nodeValue.replace(/\u200B/g, "");
+                return;
+            }
+
+            if (node.nodeType !== Node.ELEMENT_NODE)
+                return;
+
+            for (var child = node.firstChild; child; child = child.nextSibling)
+                removeZeroWidthSpaceRecursive(child);
+        }
+
+        // Remove zero-width spaces that were added by nodeTitleInfo.
+        removeZeroWidthSpaceRecursive(attribute);
+
+        var config = new WebInspector.EditingConfig(this._attributeEditingCommitted.bind(this), this._editingCancelled.bind(this), attributeName);
+        this._editing = WebInspector.startEditing(attribute, config);
+
+        window.getSelection().setBaseAndExtent(elementForSelection, 0, elementForSelection, 1);
+
+        return true;
+    },
+
+    _startEditingTextNode: function(textNode)
+    {
+        if (WebInspector.isBeingEdited(textNode))
+            return true;
+
+        var config = new WebInspector.EditingConfig(this._textNodeEditingCommitted.bind(this), this._editingCancelled.bind(this));
+        config.spellcheck = true;
+        this._editing = WebInspector.startEditing(textNode, config);
+        window.getSelection().setBaseAndExtent(textNode, 0, textNode, 1);
+
+        return true;
+    },
+
+    _startEditingTagName: function(tagNameElement)
+    {
+        if (!tagNameElement) {
+            tagNameElement = this.listItemElement.getElementsByClassName("html-tag-name")[0];
+            if (!tagNameElement)
+                return false;
+        }
+
+        var tagName = tagNameElement.textContent;
+        if (WebInspector.DOMTreeElement.EditTagBlacklist[tagName.toLowerCase()])
+            return false;
+
+        if (WebInspector.isBeingEdited(tagNameElement))
+            return true;
+
+        var closingTagElement = this._distinctClosingTagElement();
+
+        function keyupListener(event)
+        {
+            if (closingTagElement)
+                closingTagElement.textContent = "</" + tagNameElement.textContent + ">";
+        }
+
+        function editingComitted(element, newTagName)
+        {
+            tagNameElement.removeEventListener('keyup', keyupListener, false);
+            this._tagNameEditingCommitted.apply(this, arguments);
+        }
+
+        function editingCancelled()
+        {
+            tagNameElement.removeEventListener('keyup', keyupListener, false);
+            this._editingCancelled.apply(this, arguments);
+        }
+
+        tagNameElement.addEventListener('keyup', keyupListener, false);
+
+        var config = new WebInspector.EditingConfig(editingComitted.bind(this), editingCancelled.bind(this), tagName);
+        this._editing = WebInspector.startEditing(tagNameElement, config);
+        window.getSelection().setBaseAndExtent(tagNameElement, 0, tagNameElement, 1);
+        return true;
+    },
+
+    _startEditingAsHTML: function(commitCallback, error, initialValue)
+    {
+        if (error)
+            return;
+        if (this._htmlEditElement && WebInspector.isBeingEdited(this._htmlEditElement))
+            return;
+
+        this._htmlEditElement = document.createElement("div");
+        this._htmlEditElement.className = "source-code elements-tree-editor";
+        this._htmlEditElement.textContent = initialValue;
+
+        // Hide header items.
+        var child = this.listItemElement.firstChild;
+        while (child) {
+            child.style.display = "none";
+            child = child.nextSibling;
+        }
+        // Hide children item.
+        if (this._childrenListNode)
+            this._childrenListNode.style.display = "none";
+        // Append editor.
+        this.listItemElement.appendChild(this._htmlEditElement);
+
+        this.updateSelection();
+
+        function commit()
+        {
+            commitCallback(this._htmlEditElement.textContent);
+            dispose.call(this);
+        }
+
+        function dispose()
+        {
+            this._editing = false;
+
+            // Remove editor.
+            this.listItemElement.removeChild(this._htmlEditElement);
+            delete this._htmlEditElement;
+            // Unhide children item.
+            if (this._childrenListNode)
+                this._childrenListNode.style.removeProperty("display");
+            // Unhide header items.
+            var child = this.listItemElement.firstChild;
+            while (child) {
+                child.style.removeProperty("display");
+                child = child.nextSibling;
+            }
+
+            this.updateSelection();
+        }
+
+        var config = new WebInspector.EditingConfig(commit.bind(this), dispose.bind(this));
+        config.setMultiline(true);
+        this._editing = WebInspector.startEditing(this._htmlEditElement, config);
+    },
+
+    _attributeEditingCommitted: function(element, newText, oldText, attributeName, moveDirection)
+    {
+        this._editing = false;
+
+        var treeOutline = this.treeOutline;
+        function moveToNextAttributeIfNeeded(error)
+        {
+            if (error)
+                this._editingCancelled(element, attributeName);
+
+            if (!moveDirection)
+                return;
+
+            treeOutline._updateModifiedNodes();
+
+            // Search for the attribute's position, and then decide where to move to.
+            var attributes = this.representedObject.attributes();
+            for (var i = 0; i < attributes.length; ++i) {
+                if (attributes[i].name !== attributeName)
+                    continue;
+
+                if (moveDirection === "backward") {
+                    if (i === 0)
+                        this._startEditingTagName();
+                    else
+                        this._triggerEditAttribute(attributes[i - 1].name);
+                } else {
+                    if (i === attributes.length - 1)
+                        this._addNewAttribute();
+                    else
+                        this._triggerEditAttribute(attributes[i + 1].name);
+                }
+                return;
+            }
+
+            // Moving From the "New Attribute" position.
+            if (moveDirection === "backward") {
+                if (newText === " ") {
+                    // Moving from "New Attribute" that was not edited
+                    if (attributes.length)
+                        this._triggerEditAttribute(attributes.lastValue.name);
+                } else {
+                    // Moving from "New Attribute" that holds new value
+                    if (attributes.length > 1)
+                        this._triggerEditAttribute(attributes[attributes.length - 2].name);
+                }
+            } else if (moveDirection === "forward") {
+                if (!/^\s*$/.test(newText))
+                    this._addNewAttribute();
+                else
+                    this._startEditingTagName();
+            }
+        }
+
+        this.representedObject.setAttribute(attributeName, newText, moveToNextAttributeIfNeeded.bind(this));
+    },
+
+    _tagNameEditingCommitted: function(element, newText, oldText, tagName, moveDirection)
+    {
+        this._editing = false;
+        var self = this;
+
+        function cancel()
+        {
+            var closingTagElement = self._distinctClosingTagElement();
+            if (closingTagElement)
+                closingTagElement.textContent = "</" + tagName + ">";
+
+            self._editingCancelled(element, tagName);
+            moveToNextAttributeIfNeeded.call(self);
+        }
+
+        function moveToNextAttributeIfNeeded()
+        {
+            if (moveDirection !== "forward") {
+                this._addNewAttribute();
+                return;
+            }
+
+            var attributes = this.representedObject.attributes();
+            if (attributes.length > 0)
+                this._triggerEditAttribute(attributes[0].name);
+            else
+                this._addNewAttribute();
+        }
+
+        newText = newText.trim();
+        if (newText === oldText) {
+            cancel();
+            return;
+        }
+
+        var treeOutline = this.treeOutline;
+        var wasExpanded = this.expanded;
+
+        function changeTagNameCallback(error, nodeId)
+        {
+            if (error || !nodeId) {
+                cancel();
+                return;
+            }
+
+            var node = WebInspector.domTreeManager.nodeForId(nodeId);
+
+            // Select it and expand if necessary. We force tree update so that it processes dom events and is up to date.
+            treeOutline._updateModifiedNodes();
+            treeOutline.selectDOMNode(node, true);
+
+            var newTreeItem = treeOutline.findTreeElement(node);
+            if (wasExpanded)
+                newTreeItem.expand();
+
+            moveToNextAttributeIfNeeded.call(newTreeItem);
+        }
+
+        this.representedObject.setNodeName(newText, changeTagNameCallback);
+    },
+
+    _textNodeEditingCommitted: function(element, newText)
+    {
+        this._editing = false;
+
+        var textNode;
+        if (this.representedObject.nodeType() === Node.ELEMENT_NODE) {
+            // We only show text nodes inline in elements if the element only
+            // has a single child, and that child is a text node.
+            textNode = this.representedObject.firstChild;
+        } else if (this.representedObject.nodeType() == Node.TEXT_NODE)
+            textNode = this.representedObject;
+
+        textNode.setNodeValue(newText, this.updateTitle.bind(this));
+    },
+
+    _editingCancelled: function(element, context)
+    {
+        this._editing = false;
+
+        // Need to restore attributes structure.
+        this.updateTitle();
+    },
+
+    _distinctClosingTagElement: function()
+    {
+        // FIXME: Improve the Tree Element / Outline Abstraction to prevent crawling the DOM
+
+        // For an expanded element, it will be the last element with class "close"
+        // in the child element list.
+        if (this.expanded) {
+            var closers = this._childrenListNode.querySelectorAll(".close");
+            return closers[closers.length-1];
+        }
+
+        // Remaining cases are single line non-expanded elements with a closing
+        // tag, or HTML elements without a closing tag (such as <br>). Return
+        // null in the case where there isn't a closing tag.
+        var tags = this.listItemElement.getElementsByClassName("html-tag");
+        return (tags.length === 1 ? null : tags[tags.length-1]);
+    },
+
+    /**
+     * @param {boolean=} onlySearchQueryChanged
+     */
+    updateTitle: function(onlySearchQueryChanged)
+    {
+        // If we are editing, return early to prevent canceling the edit.
+        // After editing is committed updateTitle will be called.
+        if (this._editing)
+            return;
+
+        if (onlySearchQueryChanged) {
+            if (this._highlightResult)
+                this._updateSearchHighlight(false);
+        } else {
+            var highlightElement = document.createElement("span");
+            highlightElement.className = "highlight";
+            highlightElement.appendChild(this._nodeTitleInfo().titleDOM);
+            this.title = highlightElement;
+            delete this._highlightResult;
+        }
+
+        delete this.selectionElement;
+        this.updateSelection();
+        this._highlightSearchResults();
+    },
+
+    /**
+     * @param {WebInspector.DOMNode=} node
+     */
+    _buildAttributeDOM: function(parentElement, name, value, node)
+    {
+        var hasText = (value.length > 0);
+        var attrSpanElement = parentElement.createChild("span", "html-attribute");
+        var attrNameElement = attrSpanElement.createChild("span", "html-attribute-name");
+        attrNameElement.textContent = name;
+
+        if (hasText)
+            attrSpanElement.appendChild(document.createTextNode("=\u200B\""));
+
+        if (name === "src" || name === "href") {
+            var baseURL = node.ownerDocument ? node.ownerDocument.documentURL : null;
+            var rewrittenURL = absoluteURL(value, baseURL);
+
+            value = value.insertWordBreakCharacters();
+
+            if (!rewrittenURL) {
+                var attrValueElement = attrSpanElement.createChild("span", "html-attribute-value");
+                attrValueElement.textContent = value;
+            } else {
+                if (value.startsWith("data:"))
+                    value = value.trimMiddle(60);
+
+                var linkElement = document.createElement("a");
+                linkElement.href = rewrittenURL;
+                linkElement.textContent = value;
+
+                attrSpanElement.appendChild(linkElement);
+            }
+        } else {
+            value = value.insertWordBreakCharacters();
+            var attrValueElement = attrSpanElement.createChild("span", "html-attribute-value");
+            attrValueElement.textContent = value;
+        }
+
+        if (hasText)
+            attrSpanElement.appendChild(document.createTextNode("\""));
+    },
+
+    _buildTagDOM: function(parentElement, tagName, isClosingTag, isDistinctTreeElement)
+    {
+        var node = /** @type WebInspector.DOMNode */ this.representedObject;
+        var classes = [ "html-tag" ];
+        if (isClosingTag && isDistinctTreeElement)
+            classes.push("close");
+        if (node.isInShadowTree())
+            classes.push("shadow");
+        var tagElement = parentElement.createChild("span", classes.join(" "));
+        tagElement.appendChild(document.createTextNode("<"));
+        var tagNameElement = tagElement.createChild("span", isClosingTag ? "" : "html-tag-name");
+        tagNameElement.textContent = (isClosingTag ? "/" : "") + tagName;
+        if (!isClosingTag && node.hasAttributes()) {
+            var attributes = node.attributes();
+            for (var i = 0; i < attributes.length; ++i) {
+                var attr = attributes[i];
+                tagElement.appendChild(document.createTextNode(" "));
+                this._buildAttributeDOM(tagElement, attr.name, attr.value, node);
+            }
+        }
+        tagElement.appendChild(document.createTextNode(">"));
+        parentElement.appendChild(document.createTextNode("\u200B"));
+    },
+
+    _nodeTitleInfo: function()
+    {
+        var node = this.representedObject;
+        var info = {titleDOM: document.createDocumentFragment(), hasChildren: this.hasChildren};
+
+        switch (node.nodeType()) {
+            case Node.DOCUMENT_FRAGMENT_NODE:
+                var fragmentElement = info.titleDOM.createChild("span", "webkit-html-fragment");
+                if (node.isInShadowTree()) {
+                    fragmentElement.textContent = WebInspector.UIString("Shadow Content");
+                    fragmentElement.classList.add("shadow");
+                } else
+                    fragmentElement.textContent = WebInspector.UIString("Document Fragment");
+                break;
+
+            case Node.ATTRIBUTE_NODE:
+                var value = node.value || "\u200B"; // Zero width space to force showing an empty value.
+                this._buildAttributeDOM(info.titleDOM, node.name, value);
+                break;
+
+            case Node.ELEMENT_NODE:
+                var tagName = node.nodeNameInCorrectCase();
+                if (this._elementCloseTag) {
+                    this._buildTagDOM(info.titleDOM, tagName, true, true);
+                    info.hasChildren = false;
+                    break;
+                }
+
+                this._buildTagDOM(info.titleDOM, tagName, false, false);
+
+                var textChild = this._singleTextChild(node);
+                var showInlineText = textChild && textChild.nodeValue().length < WebInspector.DOMTreeElement.MaximumInlineTextChildLength;
+
+                if (!this.expanded && (!showInlineText && (this.treeOutline.isXMLMimeType || !WebInspector.DOMTreeElement.ForbiddenClosingTagElements[tagName]))) {
+                    if (this.hasChildren) {
+                        var textNodeElement = info.titleDOM.createChild("span", "html-text-node");
+                        textNodeElement.textContent = "\u2026";
+                        info.titleDOM.appendChild(document.createTextNode("\u200B"));
+                    }
+                    this._buildTagDOM(info.titleDOM, tagName, true, false);
+                }
+
+                // If this element only has a single child that is a text node,
+                // just show that text and the closing tag inline rather than
+                // create a subtree for them
+                if (showInlineText) {
+                    var textNodeElement = info.titleDOM.createChild("span", "html-text-node");
+                    var nodeNameLowerCase = node.nodeName().toLowerCase();
+
+                    if (nodeNameLowerCase === "script")
+                        textNodeElement.appendChild(WebInspector.syntaxHighlightStringAsDocumentFragment(textChild.nodeValue().trim(), "text/javascript"));
+                    else if (nodeNameLowerCase === "style")
+                        textNodeElement.appendChild(WebInspector.syntaxHighlightStringAsDocumentFragment(textChild.nodeValue().trim(), "text/css"));
+                    else
+                        textNodeElement.textContent = textChild.nodeValue();
+
+                    info.titleDOM.appendChild(document.createTextNode("\u200B"));
+
+                    this._buildTagDOM(info.titleDOM, tagName, true, false);
+                    info.hasChildren = false;
+                }
+                break;
+
+            case Node.TEXT_NODE:
+                function trimedNodeValue()
+                {
+                    // Trim empty lines from the beginning and extra space at the end since most style and script tags begin with a newline
+                    // and end with a newline and indentation for the end tag.
+                    return node.nodeValue().replace(/^[\n\r]*/, "").replace(/\s*$/, "");
+                }
+
+                if (node.parentNode && node.parentNode.nodeName().toLowerCase() === "script") {
+                    var newNode = info.titleDOM.createChild("span", "html-text-node large");
+                    newNode.appendChild(WebInspector.syntaxHighlightStringAsDocumentFragment(trimedNodeValue(), "text/javascript"));
+                } else if (node.parentNode && node.parentNode.nodeName().toLowerCase() === "style") {
+                    var newNode = info.titleDOM.createChild("span", "html-text-node large");
+                    newNode.appendChild(WebInspector.syntaxHighlightStringAsDocumentFragment(trimedNodeValue(), "text/css"));
+                } else {
+                    info.titleDOM.appendChild(document.createTextNode("\""));
+                    var textNodeElement = info.titleDOM.createChild("span", "html-text-node");
+                    textNodeElement.textContent = node.nodeValue();
+                    info.titleDOM.appendChild(document.createTextNode("\""));
+                }
+                break;
+
+            case Node.COMMENT_NODE:
+                var commentElement = info.titleDOM.createChild("span", "html-comment");
+                commentElement.appendChild(document.createTextNode("<!--" + node.nodeValue() + "-->"));
+                break;
+
+            case Node.DOCUMENT_TYPE_NODE:
+                var docTypeElement = info.titleDOM.createChild("span", "html-doctype");
+                docTypeElement.appendChild(document.createTextNode("<!DOCTYPE " + node.nodeName()));
+                if (node.publicId) {
+                    docTypeElement.appendChild(document.createTextNode(" PUBLIC \"" + node.publicId + "\""));
+                    if (node.systemId)
+                        docTypeElement.appendChild(document.createTextNode(" \"" + node.systemId + "\""));
+                } else if (node.systemId)
+                    docTypeElement.appendChild(document.createTextNode(" SYSTEM \"" + node.systemId + "\""));
+
+                if (node.internalSubset)
+                    docTypeElement.appendChild(document.createTextNode(" [" + node.internalSubset + "]"));
+
+                docTypeElement.appendChild(document.createTextNode(">"));
+                break;
+
+            case Node.CDATA_SECTION_NODE:
+                var cdataElement = info.titleDOM.createChild("span", "html-text-node");
+                cdataElement.appendChild(document.createTextNode("<![CDATA[" + node.nodeValue() + "]]>"));
+                break;
+            default:
+                var defaultElement = info.titleDOM.appendChild(document.createTextNode(node.nodeNameInCorrectCase().collapseWhitespace()));
+        }
+
+        return info;
+    },
+
+    _singleTextChild: function(node)
+    {
+        if (!node)
+            return null;
+
+        var firstChild = node.firstChild;
+        if (!firstChild || firstChild.nodeType() !== Node.TEXT_NODE)
+            return null;
+
+        if (node.hasShadowRoots())
+            return null;
+
+        var sibling = firstChild.nextSibling;
+        return sibling ? null : firstChild;
+    },
+
+    _showInlineText: function(node)
+    {
+        if (node.nodeType() === Node.ELEMENT_NODE) {
+            var textChild = this._singleTextChild(node);
+            if (textChild && textChild.nodeValue().length < WebInspector.DOMTreeElement.MaximumInlineTextChildLength)
+                return true;
+        }
+        return false;
+    },
+
+    remove: function()
+    {
+        var parentElement = this.parent;
+        if (!parentElement)
+            return;
+
+        var self = this;
+        function removeNodeCallback(error, removedNodeId)
+        {
+            if (error)
+                return;
+
+            if (!self.parent)
+                return;
+
+            parentElement.removeChild(self);
+            parentElement.adjustCollapsedRange();
+        }
+
+        this.representedObject.removeNode(removeNodeCallback);
+    },
+
+    _editAsHTML: function()
+    {
+        var treeOutline = this.treeOutline;
+        var node = this.representedObject;
+        var parentNode = node.parentNode;
+        var index = node.index;
+        var wasExpanded = this.expanded;
+
+        function selectNode(error, nodeId)
+        {
+            if (error)
+                return;
+
+            // Select it and expand if necessary. We force tree update so that it processes dom events and is up to date.
+            treeOutline._updateModifiedNodes();
+
+            var newNode = parentNode ? parentNode.children[index] || parentNode : null;
+            if (!newNode)
+                return;
+
+            treeOutline.selectDOMNode(newNode, true);
+
+            if (wasExpanded) {
+                var newTreeItem = treeOutline.findTreeElement(newNode);
+                if (newTreeItem)
+                    newTreeItem.expand();
+            }
+        }
+
+        function commitChange(value)
+        {
+            node.setOuterHTML(value, selectNode);
+        }
+
+        node.getOuterHTML(this._startEditingAsHTML.bind(this, commitChange));
+    },
+
+    _copyHTML: function()
+    {
+        this.representedObject.copyNode();
+    },
+
+    _highlightSearchResults: function()
+    {
+        if (!this._searchQuery || !this._searchHighlightsVisible)
+            return;
+        if (this._highlightResult) {
+            this._updateSearchHighlight(true);
+            return;
+        }
+
+        var text = this.listItemElement.textContent;
+        var regexObject = createPlainTextSearchRegex(this._searchQuery, "gi");
+
+        var offset = 0;
+        var match = regexObject.exec(text);
+        var matchRanges = [];
+        while (match) {
+            matchRanges.push({ offset: match.index, length: match[0].length });
+            match = regexObject.exec(text);
+        }
+
+        // Fall back for XPath, etc. matches.
+        if (!matchRanges.length)
+            matchRanges.push({ offset: 0, length: text.length });
+
+        this._highlightResult = [];
+        highlightSearchResults(this.listItemElement, matchRanges, this._highlightResult);
+    }
+}
+
+WebInspector.DOMTreeElement.prototype.__proto__ = TreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeElementPathComponent.js b/Source/WebInspectorUI/UserInterface/DOMTreeElementPathComponent.js
new file mode 100644
index 000000000..830af9cd6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMTreeElementPathComponent.js
@@ -0,0 +1,132 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMTreeElementPathComponent = function(domTreeElement, representedObject) {
+    var node = domTreeElement.representedObject;
+
+    var title = null;
+    var className = null;
+
+    switch (node.nodeType()) {
+    case Node.ELEMENT_NODE:
+        className = WebInspector.DOMTreeElementPathComponent.DOMElementIconStyleClassName;
+        title = WebInspector.displayNameForNode(node);
+        break;
+
+    case Node.TEXT_NODE:
+        className = WebInspector.DOMTreeElementPathComponent.DOMTextNodeIconStyleClassName;
+        title = "\"" + node.nodeValue().trimEnd(32) + "\"";
+        break
+
+    case Node.COMMENT_NODE:
+        className = WebInspector.DOMTreeElementPathComponent.DOMCommentIconStyleClassName;
+        title = "<!--" + node.nodeValue().trimEnd(32) + "-->";
+        break;
+
+    case Node.DOCUMENT_TYPE_NODE:
+        className = WebInspector.DOMTreeElementPathComponent.DOMDocumentTypeIconStyleClassName;
+        title = "<!DOCTYPE>";
+        break;
+
+    case Node.DOCUMENT_NODE:
+        className = WebInspector.DOMTreeElementPathComponent.DOMDocumentIconStyleClassName;
+        title = node.nodeNameInCorrectCase();
+        break;
+
+    case Node.CDATA_SECTION_NODE:
+        className = WebInspector.DOMTreeElementPathComponent.DOMCharacterDataIconStyleClassName;
+        title = "<![CDATA[" + node.trimEnd(32) + "]]>";
+        break;
+
+    case Node.DOCUMENT_FRAGMENT_NODE:
+        // FIXME: At some point we might want a different icon for this.
+        // <rdar://problem/12800950> Need icon for DOCUMENT_FRAGMENT_NODE
+        className = WebInspector.DOMTreeElementPathComponent.DOMDocumentTypeIconStyleClassName;
+        if (node.isInShadowTree())
+            title = WebInspector.UIString("Shadow Content");
+        else
+            title = WebInspector.displayNameForNode(node);
+        break;
+
+    default:
+        console.error("Unknown DOM node type: ", node.nodeType());
+        className = WebInspector.DOMTreeElementPathComponent.DOMNodeIconStyleClassName;
+        title = node.nodeNameInCorrectCase();
+    }
+
+    WebInspector.HierarchicalPathComponent.call(this, title, className, representedObject || domTreeElement.representedObject);
+
+    this._domTreeElement = domTreeElement;
+};
+
+WebInspector.DOMTreeElementPathComponent.DOMElementIconStyleClassName = "dom-element-icon";
+WebInspector.DOMTreeElementPathComponent.DOMTextNodeIconStyleClassName = "dom-text-node-icon";
+WebInspector.DOMTreeElementPathComponent.DOMCommentIconStyleClassName = "dom-comment-icon";
+WebInspector.DOMTreeElementPathComponent.DOMDocumentTypeIconStyleClassName = "dom-document-type-icon";
+WebInspector.DOMTreeElementPathComponent.DOMDocumentIconStyleClassName = "dom-document-icon";
+WebInspector.DOMTreeElementPathComponent.DOMCharacterDataIconStyleClassName = "dom-character-data-icon";
+WebInspector.DOMTreeElementPathComponent.DOMNodeIconStyleClassName = "dom-node-icon";
+
+WebInspector.DOMTreeElementPathComponent.prototype = {
+    constructor: WebInspector.DOMTreeElementPathComponent,
+
+    // Public
+
+    get domTreeElement()
+    {
+        return this._domTreeElement;
+    },
+
+    get previousSibling()
+    {
+        if (!this._domTreeElement.previousSibling)
+            return null;
+        return new WebInspector.DOMTreeElementPathComponent(this._domTreeElement.previousSibling);
+    },
+
+    get nextSibling()
+    {
+        if (!this._domTreeElement.nextSibling)
+            return null;
+        if (this._domTreeElement.nextSibling.isCloseTag())
+            return null;
+        return new WebInspector.DOMTreeElementPathComponent(this._domTreeElement.nextSibling);
+    },
+
+    // Protected
+
+    mouseOver: function()
+    {
+        var nodeId = this._domTreeElement.representedObject.id;
+        WebInspector.domTreeManager.highlightDOMNode(nodeId);
+    },
+
+    mouseOut: function()
+    {
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+    }
+};
+
+WebInspector.DOMTreeElementPathComponent.prototype.__proto__ = WebInspector.HierarchicalPathComponent.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeManager.js b/Source/WebInspectorUI/UserInterface/DOMTreeManager.js
new file mode 100644
index 000000000..7544820a2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMTreeManager.js
@@ -0,0 +1,526 @@
+/*
+ * Copyright (C) 2009, 2010 Google Inc. All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @extends {WebInspector.Object}
+ * @constructor
+ */
+WebInspector.DOMTreeManager = function() {
+    /** @type {Object|undefined} */
+    this._idToDOMNode = {};
+    this._document = null;
+    this._attributeLoadNodeIds = {};
+}
+
+WebInspector.Object.addConstructorFunctions(WebInspector.DOMTreeManager);
+
+WebInspector.DOMTreeManager.Event = {
+    AttributeModified: "dom-tree-manager-attribute-modified",
+    AttributeRemoved: "dom-tree-manager-attribute-removed",
+    CharacterDataModified: "dom-tree-manager-character-data-modified",
+    NodeInserted: "dom-tree-manager-node-inserted",
+    NodeRemoved: "dom-tree-manager-node-removed",
+    DocumentUpdated: "dom-tree-manager-document-updated",
+    ChildNodeCountUpdated: "dom-tree-manager-child-node-count-updated",
+    DOMNodeWasInspected: "dom-tree-manager-dom-node-was-inspected",
+    InspectModeStateChanged: "dom-tree-manager-inspect-mode-state-changed"
+}
+
+WebInspector.DOMTreeManager.prototype = {
+    /**
+     * @param {function(WebInspector.DOMDocument)=} callback
+     */
+    requestDocument: function(callback)
+    {
+        if (this._document) {
+            if (callback)
+                callback(this._document);
+            return;
+        }
+
+        if (this._pendingDocumentRequestCallbacks) {
+            this._pendingDocumentRequestCallbacks.push(callback);
+            return;
+        }
+
+        this._pendingDocumentRequestCallbacks = [callback];
+
+        /**
+         * @this {WebInspector.DOMTreeManager}
+         * @param {?Protocol.Error} error
+         * @param {DOMAgent.Node} root
+         */
+        function onDocumentAvailable(error, root)
+        {
+            if (!error)
+                this._setDocument(root);
+
+            for (var i = 0; i < this._pendingDocumentRequestCallbacks.length; ++i) {
+                var callback = this._pendingDocumentRequestCallbacks[i];
+                if (callback)
+                    callback(this._document);
+            }
+            delete this._pendingDocumentRequestCallbacks;
+        }
+
+        DOMAgent.getDocument(onDocumentAvailable.bind(this));
+    },
+
+    /**
+     * @param {RuntimeAgent.RemoteObjectId} objectId
+     * @param {function()=} callback
+     */
+    pushNodeToFrontend: function(objectId, callback)
+    {
+        this._dispatchWhenDocumentAvailable(DOMAgent.requestNode.bind(DOMAgent, objectId), callback);
+    },
+
+    /**
+     * @param {string} path
+     * @param {function(?WebInspector.DOMNode)=} callback
+     */
+    pushNodeByPathToFrontend: function(path, callback)
+    {
+        var callbackCast = /** @type {function(*)} */ callback;
+        this._dispatchWhenDocumentAvailable(DOMAgent.pushNodeByPathToFrontend.bind(DOMAgent, path), callbackCast);
+    },
+
+    /**
+     * @param {function(*)=} callback
+     * @return {function(?Protocol.Error,*=)|undefined}
+     */
+    _wrapClientCallback: function(callback)
+    {
+        if (!callback)
+            return;
+        return function(error, result)
+        {
+            if (error)
+                console.error("Error during DOMAgent operation: " + error);
+            callback(error ? null : result);
+        }
+    },
+
+    /**
+     * @param {function(function()=)} func
+     * @param {function(*)=} callback
+     */
+    _dispatchWhenDocumentAvailable: function(func, callback)
+    {
+        var callbackWrapper = /** @type {function(?Protocol.Error, *=)} */ this._wrapClientCallback(callback);
+
+        function onDocumentAvailable()
+        {
+            if (this._document)
+                func(callbackWrapper);
+            else {
+                if (callbackWrapper)
+                    callbackWrapper("No document");
+            }
+        }
+        this.requestDocument(onDocumentAvailable.bind(this));
+    },
+
+    /**
+     * @param {DOMAgent.NodeId} nodeId
+     * @param {string} name
+     * @param {string} value
+     */
+    _attributeModified: function(nodeId, name, value)
+    {
+        var node = this._idToDOMNode[nodeId];
+        if (!node)
+            return;
+        node._setAttribute(name, value);
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.AttributeModified, { node: node, name: name });
+        node.dispatchEventToListeners(WebInspector.DOMNode.Event.AttributeModified, {name: name});
+    },
+
+    /**
+     * @param {DOMAgent.NodeId} nodeId
+     * @param {string} name
+     */
+    _attributeRemoved: function(nodeId, name)
+    {
+        var node = this._idToDOMNode[nodeId];
+        if (!node)
+            return;
+        node._removeAttribute(name);
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.AttributeRemoved, { node: node, name: name });
+        node.dispatchEventToListeners(WebInspector.DOMNode.Event.AttributeRemoved, {name: name});
+    },
+
+    /**
+     * @param {Array.<DOMAgent.NodeId>} nodeIds
+     */
+    _inlineStyleInvalidated: function(nodeIds)
+    {
+        for (var i = 0; i < nodeIds.length; ++i)
+            this._attributeLoadNodeIds[nodeIds[i]] = true;
+        if ("_loadNodeAttributesTimeout" in this)
+            return;
+        this._loadNodeAttributesTimeout = setTimeout(this._loadNodeAttributes.bind(this), 0);
+    },
+
+    _loadNodeAttributes: function()
+    {
+        /**
+         * @this {WebInspector.DOMTreeManager}
+         * @param {DOMAgent.NodeId} nodeId
+         * @param {?Protocol.Error} error
+         * @param {Array.<string>} attributes
+         */
+        function callback(nodeId, error, attributes)
+        {
+            if (error) {
+                console.error("Error during DOMAgent operation: " + error);
+                return;
+            }
+            var node = this._idToDOMNode[nodeId];
+            if (node) {
+                node._setAttributesPayload(attributes);
+                this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.AttributeModified, { node: node, name: "style" });
+                node.dispatchEventToListeners(WebInspector.DOMNode.Event.AttributeModified, {name: "style"});
+            }
+        }
+
+        delete this._loadNodeAttributesTimeout;
+
+        for (var nodeId in this._attributeLoadNodeIds) {
+            var nodeIdAsNumber = parseInt(nodeId, 10);
+            DOMAgent.getAttributes(nodeIdAsNumber, callback.bind(this, nodeIdAsNumber));
+        }
+        this._attributeLoadNodeIds = {};
+    },
+
+    /**
+     * @param {DOMAgent.NodeId} nodeId
+     * @param {string} newValue
+     */
+    _characterDataModified: function(nodeId, newValue)
+    {
+        var node = this._idToDOMNode[nodeId];
+        node._nodeValue = newValue;
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.CharacterDataModified, {node: node});
+    },
+
+    /**
+     * @param {DOMAgent.NodeId} nodeId
+     * @return {WebInspector.DOMNode|undefined}
+     */
+    nodeForId: function(nodeId)
+    {
+        return this._idToDOMNode[nodeId];
+    },
+
+    _documentUpdated: function()
+    {
+        this._setDocument(null);
+    },
+
+    /**
+     * @param {DOMAgent.Node} payload
+     */
+    _setDocument: function(payload)
+    {
+        this._idToDOMNode = {};
+        if (payload && "nodeId" in payload)
+            this._document = new WebInspector.DOMNode(this, null, false, payload);
+        else
+            this._document = null;
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.DocumentUpdated, this._document);
+    },
+
+    /**
+     * @param {DOMAgent.Node} payload
+     */
+    _setDetachedRoot: function(payload)
+    {
+        new WebInspector.DOMNode(this, null, false, payload);
+    },
+
+    /**
+     * @param {DOMAgent.NodeId} parentId
+     * @param {Array.<DOMAgent.Node>} payloads
+     */
+    _setChildNodes: function(parentId, payloads)
+    {
+        if (!parentId && payloads.length) {
+            this._setDetachedRoot(payloads[0]);
+            return;
+        }
+
+        var parent = this._idToDOMNode[parentId];
+        parent._setChildrenPayload(payloads);
+    },
+
+    /**
+     * @param {DOMAgent.NodeId} nodeId
+     * @param {number} newValue
+     */
+    _childNodeCountUpdated: function(nodeId, newValue)
+    {
+        var node = this._idToDOMNode[nodeId];
+        node.childNodeCount = newValue;
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.ChildNodeCountUpdated, node);
+    },
+
+    /**
+     * @param {DOMAgent.NodeId} parentId
+     * @param {DOMAgent.NodeId} prevId
+     * @param {DOMAgent.Node} payload
+     */
+    _childNodeInserted: function(parentId, prevId, payload)
+    {
+        var parent = this._idToDOMNode[parentId];
+        var prev = this._idToDOMNode[prevId];
+        var node = parent._insertChild(prev, payload);
+        this._idToDOMNode[node.id] = node;
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.NodeInserted, {node: node, parent: parent});
+    },
+
+    /**
+     * @param {DOMAgent.NodeId} parentId
+     * @param {DOMAgent.NodeId} nodeId
+     */
+    _childNodeRemoved: function(parentId, nodeId)
+    {
+        var parent = this._idToDOMNode[parentId];
+        var node = this._idToDOMNode[nodeId];
+        parent._removeChild(node);
+        this._unbind(node);
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.NodeRemoved, {node:node, parent: parent});
+    },
+
+    /**
+     * @param {DOMAgent.Node} node
+     */
+    _unbind: function(node)
+    {
+        delete this._idToDOMNode[node.id];
+        for (var i = 0; node.children && i < node.children.length; ++i)
+            this._unbind(node.children[i]);
+    },
+
+    /**
+     * @param {number} nodeId
+     */
+    inspectElement: function(nodeId)
+    {
+        var node = this._idToDOMNode[nodeId];
+        if (node)
+            this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.DOMNodeWasInspected, {node: node});
+
+        this._inspectModeEnabled = false;
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.InspectModeStateChanged);
+    },
+
+    inspectNodeObject: function(remoteObject)
+    {
+        function nodeAvailable(nodeId)
+        {
+            remoteObject.release();
+
+            console.assert(nodeId);
+            if (!nodeId)
+                return;
+
+            this.inspectElement(nodeId);
+        }
+
+        remoteObject.pushNodeToFrontend(nodeAvailable.bind(this));
+    },
+
+    /**
+     * @param {string} query
+     * @param {function(number)} searchCallback
+     */
+    performSearch: function(query, searchCallback)
+    {
+        this.cancelSearch();
+
+        /**
+         * @param {?Protocol.Error} error
+         * @param {string} searchId
+         * @param {number} resultsCount
+         */
+        function callback(error, searchId, resultsCount)
+        {
+            this._searchId = searchId;
+            searchCallback(resultsCount);
+        }
+        DOMAgent.performSearch(query, callback.bind(this));
+    },
+
+    /**
+     * @param {number} index
+     * @param {?function(DOMAgent.Node)} callback
+     */
+    searchResult: function(index, callback)
+    {
+        if (this._searchId) {
+            /**
+             * @param {?Protocol.Error} error
+             * @param {Array.<number>} nodeIds
+             */
+            function mycallback(error, nodeIds)
+            {
+                if (error) {
+                    console.error(error);
+                    callback(null);
+                    return;
+                }
+                if (nodeIds.length != 1)
+                    return;
+
+                callback(this._idToDOMNode[nodeIds[0]]);
+            }
+            DOMAgent.getSearchResults(this._searchId, index, index + 1, mycallback.bind(this));
+        } else
+            callback(null);
+    },
+
+    cancelSearch: function()
+    {
+        if (this._searchId) {
+            DOMAgent.discardSearchResults(this._searchId);
+            delete this._searchId;
+        }
+    },
+
+    /**
+     * @param {DOMAgent.NodeId} nodeId
+     * @param {string} selectors
+     * @param {function(?DOMAgent.NodeId)=} callback
+     */
+    querySelector: function(nodeId, selectors, callback)
+    {
+        var callbackCast = /** @type {function(*)|undefined} */callback;
+        DOMAgent.querySelector(nodeId, selectors, this._wrapClientCallback(callbackCast));
+    },
+
+    /**
+     * @param {DOMAgent.NodeId} nodeId
+     * @param {string} selectors
+     * @param {function(?Array.<DOMAgent.NodeId>)=} callback
+     */
+    querySelectorAll: function(nodeId, selectors, callback)
+    {
+        var callbackCast = /** @type {function(*)|undefined} */callback;
+        DOMAgent.querySelectorAll(nodeId, selectors, this._wrapClientCallback(callbackCast));
+    },
+
+    /**
+     * @param {?number} nodeId
+     * @param {string=} mode
+     */
+    highlightDOMNode: function(nodeId, mode)
+    {
+        if (this._hideDOMNodeHighlightTimeout) {
+            clearTimeout(this._hideDOMNodeHighlightTimeout);
+            delete this._hideDOMNodeHighlightTimeout;
+        }
+
+        this._highlightedDOMNodeId = nodeId;
+        if (nodeId)
+            DOMAgent.highlightNode.invoke({nodeId: nodeId, highlightConfig: this._buildHighlightConfig(mode)});
+        else
+            DOMAgent.hideHighlight();
+    },
+
+    highlightRect: function(rect, usePageCoordinates)
+    {
+        DOMAgent.highlightRect.invoke({
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height,
+            color: {r: 111, g: 168, b: 220, a: 0.66},
+            outlineColor: {r: 255, g: 229, b: 153, a: 0.66},
+            usePageCoordinates: usePageCoordinates
+        });
+    },
+
+    hideDOMNodeHighlight: function()
+    {
+        this.highlightDOMNode(0);
+    },
+
+    /**
+     * @param {?DOMAgent.NodeId} nodeId
+     */
+    highlightDOMNodeForTwoSeconds: function(nodeId)
+    {
+        this.highlightDOMNode(nodeId);
+        this._hideDOMNodeHighlightTimeout = setTimeout(this.hideDOMNodeHighlight.bind(this), 2000);
+    },
+
+    get inspectModeEnabled()
+    {
+        return this._inspectModeEnabled;
+    },
+
+    set inspectModeEnabled(enabled)
+    {
+        function callback(error)
+        {
+            this._inspectModeEnabled = error ? false : enabled;
+            this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.InspectModeStateChanged);
+        }
+
+        DOMAgent.setInspectModeEnabled(enabled, this._buildHighlightConfig(), callback.bind(this));
+    },
+
+    /**
+     * @param {string=} mode
+     */
+    _buildHighlightConfig: function(mode)
+    {
+        mode = mode || "all";
+        var highlightConfig = { showInfo: mode === "all" };
+        if (mode === "all" || mode === "content")
+            highlightConfig.contentColor = {r: 111, g: 168, b: 220, a: 0.66};
+
+        if (mode === "all" || mode === "padding")
+            highlightConfig.paddingColor = {r: 147, g: 196, b: 125, a: 0.66};
+
+        if (mode === "all" || mode === "border")
+            highlightConfig.borderColor = {r: 255, g: 229, b: 153, a: 0.66};
+
+        if (mode === "all" || mode === "margin")
+            highlightConfig.marginColor = {r: 246, g: 178, b: 107, a: 0.66};
+
+        return highlightConfig;
+    }
+}
+
+WebInspector.DOMTreeManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeOutline.css b/Source/WebInspectorUI/UserInterface/DOMTreeOutline.css
new file mode 100644
index 000000000..3194b59dc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMTreeOutline.css
@@ -0,0 +1,148 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.dom-tree-outline {
+    position: relative;
+
+    padding: 0 6px;
+    margin: 0;
+    min-width: 100%;
+
+    outline: none;
+
+    list-style-type: none;
+
+ /* Needed to make the negative z-index on .selection works. Otherwise the background-color from .syntax-highlighted hides the selection. */
+    background-color: transparent !important;
+    color: black;
+}
+
+.dom-tree-outline li.hovered:not(.selected) .selection {
+    display: block;
+    left: 3px;
+    right: 3px;
+
+    background-color: rgba(56, 121, 217, 0.1);
+    border-radius: 5px;
+}
+
+.dom-tree-outline li .selection {
+    display: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 15px;
+    z-index: -1;
+}
+
+.dom-tree-outline li.selected .selection {
+    display: block;
+    background-color: rgb(212, 212, 212);
+}
+
+.dom-tree-outline li.elements-drag-over .selection {
+    display: block;
+    margin-top: -2px;
+    border-top: 2px solid rgb(56, 121, 217);
+}
+
+.dom-tree-outline:focus li.selected .selection {
+    background-color: rgb(56, 121, 217);
+}
+
+.dom-tree-outline ol {
+    list-style-type: none;
+    padding-left: 14px;
+    margin: 0;
+}
+
+.dom-tree-outline ol.children {
+    display: none;
+}
+
+.dom-tree-outline ol.children.expanded {
+    display: block;
+}
+
+.dom-tree-outline li {
+    padding: 0 0 0 12px;
+    word-wrap: break-word;
+}
+
+.dom-tree-outline:focus li.selected {
+    color: white;
+}
+
+.dom-tree-outline:focus li.selected * {
+    color: inherit;
+}
+
+.dom-tree-outline li.parent {
+    margin-left: -10px;
+}
+
+.dom-tree-outline li .html-tag.close {
+    margin-left: -14px;
+}
+
+.dom-tree-outline li.parent::before {
+    float: left;
+
+    content: "";
+
+    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal);
+    background-size: 8px 8px;
+    background-repeat: no-repeat;
+
+    width: 8px;
+    height: 8px;
+
+    margin-top: 2px;
+    padding-right: 2px;
+}
+
+.dom-tree-outline:focus li.parent.selected::before {
+    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-selected);
+}
+
+.dom-tree-outline li.parent.expanded::before {
+    background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
+}
+
+.dom-tree-outline:focus li.parent.expanded.selected::before {
+    background-image: -webkit-canvas(disclosure-triangle-tiny-open-selected);
+}
+
+.dom-tree-outline .add-attribute {
+    margin-left: 1px;
+    margin-right: 1px;
+    white-space: nowrap;
+}
+
+.dom-tree-outline .html-text-node.large {
+    display: inline-block;
+    min-width: 100%;
+    white-space: pre-wrap;
+}
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeOutline.js b/Source/WebInspectorUI/UserInterface/DOMTreeOutline.js
new file mode 100644
index 000000000..8ceb23d0b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMTreeOutline.js
@@ -0,0 +1,585 @@
+/*
+ * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
+ * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ * @extends {TreeOutline}
+ * @param {boolean=} omitRootDOMNode
+ * @param {boolean=} selectEnabled
+ */
+WebInspector.DOMTreeOutline = function(omitRootDOMNode, selectEnabled, showInElementsPanelEnabled)
+{
+    this.element = document.createElement("ol");
+    this.element.addEventListener("mousedown", this._onmousedown.bind(this), false);
+    this.element.addEventListener("mousemove", this._onmousemove.bind(this), false);
+    this.element.addEventListener("mouseout", this._onmouseout.bind(this), false);
+    this.element.addEventListener("dragstart", this._ondragstart.bind(this), false);
+    this.element.addEventListener("dragover", this._ondragover.bind(this), false);
+    this.element.addEventListener("dragleave", this._ondragleave.bind(this), false);
+    this.element.addEventListener("drop", this._ondrop.bind(this), false);
+    this.element.addEventListener("dragend", this._ondragend.bind(this), false);
+
+    this.element.classList.add("dom-tree-outline");
+    this.element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
+
+    TreeOutline.call(this, this.element);
+
+    this._includeRootDOMNode = !omitRootDOMNode;
+    this._selectEnabled = selectEnabled;
+    this._showInElementsPanelEnabled = showInElementsPanelEnabled;
+    this._rootDOMNode = null;
+    this._selectedDOMNode = null;
+    this._eventSupport = new WebInspector.Object();
+    this._editing = false;
+
+    this._visible = false;
+
+    this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
+
+    this._hideElementKeyboardShortcut = new WebInspector.KeyboardShortcut(null, "H", this._hideElement.bind(this), this.element);
+    this._hideElementKeyboardShortcut.implicitlyPreventsDefault = false;
+
+    WebInspector.showShadowDOMSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
+}
+
+WebInspector.Object.addConstructorFunctions(WebInspector.DOMTreeOutline);
+
+WebInspector.DOMTreeOutline.Event = {
+    SelectedNodeChanged: "dom-tree-outline-selected-node-changed"
+}
+
+WebInspector.DOMTreeOutline.prototype = {
+    constructor: WebInspector.DOMTreeOutline,
+
+    wireToDomAgent: function()
+    {
+        this._elementsTreeUpdater = new WebInspector.DOMTreeUpdater(this);
+    },
+
+    close: function()
+    {
+        if (this._elementsTreeUpdater) {
+            this._elementsTreeUpdater.close();
+            this._elementsTreeUpdater = null;
+        }
+    },
+
+    setVisible: function(visible, omitFocus)
+    {
+        this._visible = visible;
+        if (!this._visible)
+            return;
+
+        this._updateModifiedNodes();
+        if (this._selectedDOMNode)
+            this._revealAndSelectNode(this._selectedDOMNode, omitFocus);
+    },
+
+    addEventListener: function(eventType, listener, thisObject)
+    {
+        this._eventSupport.addEventListener(eventType, listener, thisObject);
+    },
+
+    removeEventListener: function(eventType, listener, thisObject)
+    {
+        this._eventSupport.removeEventListener(eventType, listener, thisObject);
+    },
+
+    get rootDOMNode()
+    {
+        return this._rootDOMNode;
+    },
+
+    set rootDOMNode(x)
+    {
+        if (this._rootDOMNode === x)
+            return;
+
+        this._rootDOMNode = x;
+
+        this._isXMLMimeType = x && x.isXMLNode();
+
+        this.update();
+    },
+
+    get isXMLMimeType()
+    {
+        return this._isXMLMimeType;
+    },
+
+    selectedDOMNode: function()
+    {
+        return this._selectedDOMNode;
+    },
+
+    selectDOMNode: function(node, focus)
+    {
+        if (this._selectedDOMNode === node) {
+            this._revealAndSelectNode(node, !focus);
+            return;
+        }
+
+        this._selectedDOMNode = node;
+        this._revealAndSelectNode(node, !focus);
+
+        // The _revealAndSelectNode() method might find a different element if there is inlined text,
+        // and the select() call would change the selectedDOMNode and reenter this setter. So to
+        // avoid calling _selectedNodeChanged() twice, first check if _selectedDOMNode is the same
+        // node as the one passed in.
+        if (this._selectedDOMNode === node)
+            this._selectedNodeChanged();
+    },
+
+    get editing()
+    {
+        return this._editing;
+    },
+
+    update: function()
+    {
+        var selectedNode = this.selectedTreeElement ? this.selectedTreeElement.representedObject : null;
+
+        this.removeChildren();
+
+        if (!this.rootDOMNode)
+            return;
+
+        var treeElement;
+        if (this._includeRootDOMNode) {
+            treeElement = new WebInspector.DOMTreeElement(this.rootDOMNode);
+            treeElement.selectable = this._selectEnabled;
+            this.appendChild(treeElement);
+        } else {
+            // FIXME: this could use findTreeElement to reuse a tree element if it already exists
+            var node = this.rootDOMNode.firstChild;
+            while (node) {
+                treeElement = new WebInspector.DOMTreeElement(node);
+                treeElement.selectable = this._selectEnabled;
+                this.appendChild(treeElement);
+                node = node.nextSibling;
+            }
+        }
+
+        if (selectedNode)
+            this._revealAndSelectNode(selectedNode, true);
+    },
+
+    updateSelection: function()
+    {
+        if (!this.selectedTreeElement)
+            return;
+        var element = this.treeOutline.selectedTreeElement;
+        element.updateSelection();
+    },
+
+    _selectedNodeChanged: function()
+    {
+        this._eventSupport.dispatchEventToListeners(WebInspector.DOMTreeOutline.Event.SelectedNodeChanged);
+    },
+
+    findTreeElement: function(node)
+    {
+        function isAncestorNode(ancestor, node)
+        {
+            return ancestor.isAncestor(node);
+        }
+
+        function parentNode(node)
+        {
+            return node.parentNode;
+        }
+
+        var treeElement = TreeOutline.prototype.findTreeElement.call(this, node, isAncestorNode, parentNode);
+        if (!treeElement && node.nodeType() === Node.TEXT_NODE) {
+            // The text node might have been inlined if it was short, so try to find the parent element.
+            treeElement = TreeOutline.prototype.findTreeElement.call(this, node.parentNode, isAncestorNode, parentNode);
+        }
+
+        return treeElement;
+    },
+
+    createTreeElementFor: function(node)
+    {
+        var treeElement = this.findTreeElement(node);
+        if (treeElement)
+            return treeElement;
+        if (!node.parentNode)
+            return null;
+
+        treeElement = this.createTreeElementFor(node.parentNode);
+        if (treeElement && treeElement.showChild(node.index))
+            return treeElement.children[node.index];
+
+        return null;
+    },
+
+    set suppressRevealAndSelect(x)
+    {
+        if (this._suppressRevealAndSelect === x)
+            return;
+        this._suppressRevealAndSelect = x;
+    },
+
+    _revealAndSelectNode: function(node, omitFocus)
+    {
+        if (!node || this._suppressRevealAndSelect)
+            return;
+
+        var treeElement = this.createTreeElementFor(node);
+        if (!treeElement)
+            return;
+
+        treeElement.revealAndSelect(omitFocus);
+    },
+
+    _treeElementFromEvent: function(event)
+    {
+        var scrollContainer = this.element.parentElement;
+
+        // We choose this X coordinate based on the knowledge that our list
+        // items extend at least to the right edge of the outer <ol> container.
+        // In the no-word-wrap mode the outer <ol> may be wider than the tree container
+        // (and partially hidden), in which case we are left to use only its right boundary.
+        var x = scrollContainer.totalOffsetLeft + scrollContainer.offsetWidth - 36;
+
+        var y = event.pageY;
+
+        // Our list items have 1-pixel cracks between them vertically. We avoid
+        // the cracks by checking slightly above and slightly below the mouse
+        // and seeing if we hit the same element each time.
+        var elementUnderMouse = this.treeElementFromPoint(x, y);
+        var elementAboveMouse = this.treeElementFromPoint(x, y - 2);
+        var element;
+        if (elementUnderMouse === elementAboveMouse)
+            element = elementUnderMouse;
+        else
+            element = this.treeElementFromPoint(x, y + 2);
+
+        return element;
+    },
+
+    _onmousedown: function(event)
+    {
+        var element = this._treeElementFromEvent(event);
+        if (!element || element.isEventWithinDisclosureTriangle(event)) {
+            event.preventDefault();
+            return;
+        }
+
+        element.select();
+    },
+
+    _onmousemove: function(event)
+    {
+        var element = this._treeElementFromEvent(event);
+        if (element && this._previousHoveredElement === element)
+            return;
+
+        if (this._previousHoveredElement) {
+            this._previousHoveredElement.hovered = false;
+            delete this._previousHoveredElement;
+        }
+
+        if (element) {
+            element.hovered = true;
+            this._previousHoveredElement = element;
+
+            // Lazily compute tag-specific tooltips.
+            if (element.representedObject && !element.tooltip)
+                element._createTooltipForNode();
+        }
+
+        WebInspector.domTreeManager.highlightDOMNode(element ? element.representedObject.id : 0);
+    },
+
+    _onmouseout: function(event)
+    {
+        var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
+        if (nodeUnderMouse && nodeUnderMouse.isDescendant(this.element))
+            return;
+
+        if (this._previousHoveredElement) {
+            this._previousHoveredElement.hovered = false;
+            delete this._previousHoveredElement;
+        }
+
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+    },
+
+    _ondragstart: function(event)
+    {
+        var treeElement = this._treeElementFromEvent(event);
+        if (!treeElement)
+            return false;
+
+        if (!this._isValidDragSourceOrTarget(treeElement))
+            return false;
+
+        if (treeElement.representedObject.nodeName() === "BODY" || treeElement.representedObject.nodeName() === "HEAD")
+            return false;
+
+        event.dataTransfer.setData("text/plain", treeElement.listItemElement.textContent);
+        event.dataTransfer.effectAllowed = "copyMove";
+        this._nodeBeingDragged = treeElement.representedObject;
+
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+
+        return true;
+    },
+
+    _ondragover: function(event)
+    {
+        if (!this._nodeBeingDragged)
+            return false;
+
+        var treeElement = this._treeElementFromEvent(event);
+        if (!this._isValidDragSourceOrTarget(treeElement))
+            return false;
+
+        var node = treeElement.representedObject;
+        while (node) {
+            if (node === this._nodeBeingDragged)
+                return false;
+            node = node.parentNode;
+        }
+
+        treeElement.updateSelection();
+        treeElement.listItemElement.classList.add("elements-drag-over");
+        this._dragOverTreeElement = treeElement;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'move';
+        return false;
+    },
+
+    _ondragleave: function(event)
+    {
+        this._clearDragOverTreeElementMarker();
+        event.preventDefault();
+        return false;
+    },
+
+    _isValidDragSourceOrTarget: function(treeElement)
+    {
+        if (!treeElement)
+            return false;
+
+        var node = treeElement.representedObject;
+        if (!(node instanceof WebInspector.DOMNode))
+            return false;
+
+        if (!node.parentNode || node.parentNode.nodeType() !== Node.ELEMENT_NODE)
+            return false;
+
+        return true;
+    },
+
+    _ondrop: function(event)
+    {
+        event.preventDefault();
+        var treeElement = this._treeElementFromEvent(event);
+        if (this._nodeBeingDragged && treeElement) {
+            var parentNode;
+            var anchorNode;
+
+            if (treeElement._elementCloseTag) {
+                // Drop onto closing tag -> insert as last child.
+                parentNode = treeElement.representedObject;
+            } else {
+                var dragTargetNode = treeElement.representedObject;
+                parentNode = dragTargetNode.parentNode;
+                anchorNode = dragTargetNode;
+            }
+
+            function callback(error, newNodeId)
+            {
+                if (error)
+                    return;
+
+                this._updateModifiedNodes();
+                var newNode = WebInspector.domTreeManager.nodeForId(newNodeId);
+                if (newNode)
+                    this.selectDOMNode(newNode, true);
+            }
+            this._nodeBeingDragged.moveTo(parentNode, anchorNode, callback.bind(this));
+        }
+
+        delete this._nodeBeingDragged;
+    },
+
+    _ondragend: function(event)
+    {
+        event.preventDefault();
+        this._clearDragOverTreeElementMarker();
+        delete this._nodeBeingDragged;
+    },
+
+    _clearDragOverTreeElementMarker: function()
+    {
+        if (this._dragOverTreeElement) {
+            this._dragOverTreeElement.updateSelection();
+            this._dragOverTreeElement.listItemElement.classList.remove("elements-drag-over");
+            delete this._dragOverTreeElement;
+        }
+    },
+
+    _contextMenuEventFired: function(event)
+    {
+        var treeElement = this._treeElementFromEvent(event);
+        if (!treeElement)
+            return;
+
+        var contextMenu = new WebInspector.ContextMenu(event);
+        this.populateContextMenu(contextMenu, event);
+        contextMenu.show();
+    },
+
+    populateContextMenu: function(contextMenu, event)
+    {
+        var treeElement = this._treeElementFromEvent(event);
+        if (!treeElement)
+            return false;
+
+        var tag = event.target.enclosingNodeOrSelfWithClass("html-tag");
+        var textNode = event.target.enclosingNodeOrSelfWithClass("html-text-node");
+        var commentNode = event.target.enclosingNodeOrSelfWithClass("html-comment");
+        var populated = false;
+        if (tag && treeElement._populateTagContextMenu) {
+            if (populated)
+                contextMenu.appendSeparator();
+            treeElement._populateTagContextMenu(contextMenu, event);
+            populated = true;
+        } else if (textNode && treeElement._populateTextContextMenu) {
+            if (populated)
+                contextMenu.appendSeparator();
+            treeElement._populateTextContextMenu(contextMenu, textNode);
+            populated = true;
+        } else if (commentNode && treeElement._populateNodeContextMenu) {
+            if (populated)
+                contextMenu.appendSeparator();
+            treeElement._populateNodeContextMenu(contextMenu, textNode);
+            populated = true;
+        }
+
+        return populated;
+    },
+
+    adjustCollapsedRange: function()
+    {
+    },
+
+    _updateModifiedNodes: function()
+    {
+        if (this._elementsTreeUpdater)
+            this._elementsTreeUpdater._updateModifiedNodes();
+    },
+
+    _populateContextMenu: function(contextMenu, domNode)
+    {
+        if (!this._showInElementsPanelEnabled)
+            return;
+
+        function revealElement()
+        {
+            WebInspector.domTreeManager.inspectElement(domNode.id);
+        }
+
+        contextMenu.appendSeparator();
+        contextMenu.appendItem(WebInspector.UIString("Reveal in DOM Tree"), revealElement);
+    },
+
+    _showShadowDOMSettingChanged: function(event)
+    {
+        var nodeToSelect = this.selectedTreeElement ? this.selectedTreeElement.representedObject : null;
+        while (nodeToSelect) {
+            if (!nodeToSelect.isInShadowTree())
+                break;
+            nodeToSelect = nodeToSelect.parentNode;
+        }
+
+        this.children.forEach(function(child) {
+            child.updateChildren(true);
+        });
+
+        if (nodeToSelect)
+            this.selectDOMNode(nodeToSelect);
+    },
+
+    _hideElement: function(event, keyboardShortcut)
+    {
+        if (!this.selectedTreeElement || WebInspector.isEditingAnyField())
+            return;
+
+        event.preventDefault();
+
+        var selectedNode = this.selectedTreeElement.representedObject;
+        console.assert(selectedNode);
+        if (!selectedNode)
+            return;
+
+        if (selectedNode.nodeType() !== Node.ELEMENT_NODE)
+            return;
+
+        if (this._togglePending)
+            return;
+        this._togglePending = true;
+
+        function toggleProperties()
+        {
+            nodeStyles.removeEventListener(WebInspector.DOMNodeStyles.Event.Refreshed, toggleProperties, this);
+
+            var opacityProperty = nodeStyles.inlineStyle.propertyForName("opacity");
+            opacityProperty.value = "0";
+            opacityProperty.important = true;
+
+            var pointerEventsProperty = nodeStyles.inlineStyle.propertyForName("pointer-events");
+            pointerEventsProperty.value = "none";
+            pointerEventsProperty.important = true;
+
+            if (opacityProperty.enabled && pointerEventsProperty.enabled) {
+                opacityProperty.remove();
+                pointerEventsProperty.remove();
+            } else {
+                opacityProperty.add();
+                pointerEventsProperty.add();
+            }
+
+            delete this._togglePending;
+        }
+
+        var nodeStyles = WebInspector.cssStyleManager.stylesForNode(selectedNode);
+        if (nodeStyles.needsRefresh) {
+            nodeStyles.addEventListener(WebInspector.DOMNodeStyles.Event.Refreshed, toggleProperties, this);
+            nodeStyles.refresh();
+        } else
+            toggleProperties.call(this);
+    }
+}
+
+WebInspector.DOMTreeOutline.prototype.__proto__ = TreeOutline.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeUpdater.js b/Source/WebInspectorUI/UserInterface/DOMTreeUpdater.js
new file mode 100644
index 000000000..094e530fe
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMTreeUpdater.js
@@ -0,0 +1,143 @@
+/*
+ * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
+ * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ */
+WebInspector.DOMTreeUpdater = function(treeOutline)
+{
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.NodeInserted, this._nodeInserted, this);
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.NodeRemoved, this._nodeRemoved, this);
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeModified, this._attributesUpdated, this);
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeRemoved, this._attributesUpdated, this);
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.CharacterDataModified, this._characterDataModified, this);
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.DocumentUpdated, this._documentUpdated, this);
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.ChildNodeCountUpdated, this._childNodeCountUpdated, this);
+
+    this._treeOutline = treeOutline;
+    this._recentlyModifiedNodes = [];
+}
+
+WebInspector.DOMTreeUpdater.prototype = {
+    close: function()
+    {
+        WebInspector.domTreeManager.removeEventListener(null, null, this);
+    },
+
+    _documentUpdated: function(event)
+    {
+        this._reset();
+    },
+
+    _attributesUpdated: function(event)
+    {
+        this._recentlyModifiedNodes.push({node: event.data.node, updated: true});
+        if (this._treeOutline._visible)
+            this._updateModifiedNodesSoon();
+    },
+
+    _characterDataModified: function(event)
+    {
+        this._recentlyModifiedNodes.push({node: event.data.node, updated: true});
+        if (this._treeOutline._visible)
+            this._updateModifiedNodesSoon();
+    },
+
+    _nodeInserted: function(event)
+    {
+        this._recentlyModifiedNodes.push({node: event.data.node, parent: event.data.parent, inserted: true});
+        if (this._treeOutline._visible)
+            this._updateModifiedNodesSoon();
+    },
+
+    _nodeRemoved: function(event)
+    {
+        this._recentlyModifiedNodes.push({node: event.data.node, parent: event.data.parent, removed: true});
+        if (this._treeOutline._visible)
+            this._updateModifiedNodesSoon();
+    },
+
+    _childNodeCountUpdated: function(event)
+    {
+        var treeElement = this._treeOutline.findTreeElement(event.data);
+        if (treeElement)
+            treeElement.hasChildren = event.data.hasChildNodes();
+    },
+
+    _updateModifiedNodesSoon: function()
+    {
+        if (this._updateModifiedNodesTimeout)
+            return;
+        this._updateModifiedNodesTimeout = setTimeout(this._updateModifiedNodes.bind(this), 0);
+    },
+
+    _updateModifiedNodes: function()
+    {
+        if (this._updateModifiedNodesTimeout) {
+            clearTimeout(this._updateModifiedNodesTimeout);
+            delete this._updateModifiedNodesTimeout;
+        }
+
+        var updatedParentTreeElements = [];
+
+        for (var i = 0; i < this._recentlyModifiedNodes.length; ++i) {
+            var parent = this._recentlyModifiedNodes[i].parent;
+            var node = this._recentlyModifiedNodes[i].node;
+
+            if (this._recentlyModifiedNodes[i].updated) {
+                var nodeItem = this._treeOutline.findTreeElement(node);
+                if (nodeItem)
+                    nodeItem.updateTitle();
+                continue;
+            }
+
+            if (!parent)
+                continue;
+
+            var parentNodeItem = this._treeOutline.findTreeElement(parent);
+            if (parentNodeItem && !parentNodeItem.alreadyUpdatedChildren) {
+                parentNodeItem.updateChildren();
+                parentNodeItem.alreadyUpdatedChildren = true;
+                updatedParentTreeElements.push(parentNodeItem);
+            }
+        }
+
+        for (var i = 0; i < updatedParentTreeElements.length; ++i)
+            delete updatedParentTreeElements[i].alreadyUpdatedChildren;
+
+        this._recentlyModifiedNodes = [];
+    },
+
+    _reset: function()
+    {
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+        this._recentlyModifiedNodes = [];
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/DOMUtilities.js b/Source/WebInspectorUI/UserInterface/DOMUtilities.js
new file mode 100644
index 000000000..971e900e6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DOMUtilities.js
@@ -0,0 +1,76 @@
+/*
+ * Copyright (C) 2011 Google Inc.  All rights reserved.
+ * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
+ * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.displayNameForNode = function(node)
+{
+    var title = node.nodeNameInCorrectCase();
+
+    var idAttribute = node.getAttribute("id");
+    if (idAttribute) {
+        if (/[\s'"]/.test(idAttribute)) {
+            idAttribute = idAttribute.replace(/\\/g, "\\\\").replace(/\"/g, "\\\"");
+            title += "[id=\"" + idAttribute + "\"]";
+        } else
+            title += "#" + idAttribute;
+    }
+
+    var classAttribute = node.getAttribute("class");
+    if (classAttribute) {
+        var classes = classAttribute.trim().split(/\s+/);
+        var foundClasses = {};
+
+        for (var i = 0; i < classes.length; ++i) {
+            var className = classes[i];
+            if (className && !(className in foundClasses)) {
+                title += "." + className;
+                foundClasses[className] = true;
+            }
+        }
+    }
+
+    return title;
+}
+
+WebInspector.linkifyNodeReference = function(node)
+{
+    var displayName = WebInspector.displayNameForNode(node);
+
+    var link = document.createElement("span");
+    link.appendChild(document.createTextNode(displayName));
+    link.className = "node-link";
+    link.title = displayName;
+
+    link.addEventListener("click", WebInspector.domTreeManager.inspectElement.bind(WebInspector.domTreeManager, node.id));
+    link.addEventListener("mouseover", WebInspector.domTreeManager.highlightDOMNode.bind(WebInspector.domTreeManager, node.id, ""));
+    link.addEventListener("mouseout", WebInspector.domTreeManager.hideDOMNodeHighlight.bind(WebInspector.domTreeManager));
+
+    return link;
+}
diff --git a/Source/WebInspectorUI/UserInterface/DashboardManager.js b/Source/WebInspectorUI/UserInterface/DashboardManager.js
new file mode 100644
index 000000000..0917defa1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DashboardManager.js
@@ -0,0 +1,191 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DashboardManager = function() {
+    WebInspector.Object.call(this);
+
+    this.toolbarItem = new WebInspector.NavigationItem("dashboard", "group", WebInspector.UIString("Activity Viewer"));
+    this._view = new WebInspector.DashboardView(this.toolbarItem.element);
+
+    this._waitingForFirstMainResourceToStartTrackingSize = true;
+
+    // Necessary event required to track page load time and resource sizes.
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingStopped, this._recordingStopped, this);
+
+    // Necessary events required to track load of resources.
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.AllResourcesRemoved, this._resourcesWereCleared, this);
+    WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasAdded, this._frameWasAdded, this);
+
+    // Necessary events required to track console messages.
+    var logManager = WebInspector.logManager;
+    logManager.addEventListener(WebInspector.LogManager.Event.Cleared, this._consoleWasCleared, this);
+    logManager.addEventListener(WebInspector.LogManager.Event.ActiveLogCleared, this._consoleWasCleared, this);
+    logManager.addEventListener(WebInspector.LogManager.Event.MessageAdded, this._consoleMessageAdded, this);
+    logManager.addEventListener(WebInspector.LogManager.Event.PreviousMessageRepeatCountUpdated, this._consoleMessageWasRepeated, this);
+};
+
+WebInspector.DashboardManager.prototype = {
+    constructor: WebInspector.DashboardManager,
+
+    _mainResourceDidChange: function(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        if (!event.target.isMainFrame())
+            return;
+
+        // Only update the time if we are recording the timeline.
+        if (!WebInspector.timelineManager.recording) {
+            this._view.time = 0;
+            return;
+        }
+
+        // We should only track resource sizes on fresh loads.
+        if (this._waitingForFirstMainResourceToStartTrackingSize) {
+            delete this._waitingForFirstMainResourceToStartTrackingSize;
+            WebInspector.Resource.addEventListener(WebInspector.Resource.Event.SizeDidChange, this._resourceSizeDidChange, this);
+        }
+
+        this._startUpdatingTime();
+    },
+
+    _recordingStopped: function(event)
+    {
+        // If recording stops, we should stop the timer if it hasn't stopped already.
+        this._stopUpdatingTime();
+    },
+
+    _resourceWasAdded: function(event)
+    {
+        ++this._view.resourcesCount;
+    },
+
+    _resourcesWereCleared: function(event)
+    {
+        this._view.resourcesCount = 1;
+        this._view.resourcesSize = WebInspector.frameResourceManager.mainFrame.mainResource.size || 0;
+    },
+
+    _frameWasAdded: function(event)
+    {
+        ++this._view.resourcesCount;
+    },
+
+    _resourceSizeDidChange: function(event)
+    {
+        this._view.resourcesSize += event.target.size - event.data.previousSize;
+    },
+
+    _startUpdatingTime: function()
+    {
+        this._stopUpdatingTime();
+
+        this._view.time = 0;
+
+        this._timelineBaseTime = Date.now();
+        this._timeIntervalDelay = 50;
+        this._timeIntervalIdentifier = setInterval(this._updateTime.bind(this), this._timeIntervalDelay);
+    },
+
+    _stopUpdatingTime: function()
+    {
+        if (!this._timeIntervalIdentifier)
+            return;
+
+        clearInterval(this._timeIntervalIdentifier);
+        delete this._timeIntervalIdentifier;
+    },
+
+    _updateTime: function()
+    {
+        var duration = Date.now() - this._timelineBaseTime;
+
+        var timeIntervalDelay = this._timeIntervalDelay;
+        if (duration >= 1000) // 1 second
+            timeIntervalDelay = 100;
+        else if (duration >= 60000) // 60 seconds
+            timeIntervalDelay = 1000;
+        else if (duration >= 3600000) // 1 minute
+            timeIntervalDelay = 10000;
+
+        if (timeIntervalDelay !== this._timeIntervalDelay) {
+            this._timeIntervalDelay = timeIntervalDelay;
+
+            clearInterval(this._timeIntervalIdentifier);
+            this._timeIntervalIdentifier = setInterval(this._updateTime.bind(this), this._timeIntervalDelay);
+        }
+
+        var timelineManager = WebInspector.timelineManager;
+        var mainFrameLoadEventTime = timelineManager.mainFrameLoadEventTime;
+
+        if (isNaN(mainFrameLoadEventTime)) {
+            this._view.time = (Date.now() - this._timelineBaseTime) / 1000;
+            return;
+        }
+
+        var networkRecords = timelineManager.recordsWithType(WebInspector.TimelineRecord.Type.Network);
+        this._view.time = mainFrameLoadEventTime - networkRecords[0].startTime;
+
+        this._stopUpdatingTime();
+    },
+
+    _consoleMessageAdded: function(event)
+    {
+        var message = event.data.message;
+        this._lastConsoleMessageType = message.level;
+        this._incrementConsoleMessageType(message.level, message.totalRepeatCount);
+    },
+
+    _consoleMessageWasRepeated: function(event)
+    {
+        this._incrementConsoleMessageType(this._lastConsoleMessageType, 1);
+    },
+
+    _incrementConsoleMessageType: function(type, increment)
+    {
+        switch (type) {
+        case "log":
+            this._view.logs += increment;
+            break;
+        case "warning":
+            this._view.issues += increment;
+            break;
+        case "error":
+            this._view.errors += increment;
+            break;
+        }
+    },
+
+    _consoleWasCleared: function(event)
+    {
+        this._view.logs = 0;
+        this._view.issues = 0;
+        this._view.errors = 0;
+    }
+};
+
+WebInspector.DashboardManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DashboardView.css b/Source/WebInspectorUI/UserInterface/DashboardView.css
new file mode 100644
index 000000000..48d0c608f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DashboardView.css
@@ -0,0 +1,225 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.toolbar .dashboard {
+    display: -webkit-flex;
+    -webkit-flex-flow: row nowrap;
+
+    -webkit-justify-content: space-between;
+
+    margin: 4px 10px;
+    padding: 0 5px;
+
+    width: 375px;
+
+    background-image: -webkit-linear-gradient(bottom, rgba(0, 128, 255, 0.075), rgba(0, 128, 255, 0)),
+        -webkit-linear-gradient(left, rgba(0, 0, 0, 0.09), transparent, rgba(0, 0, 0, 0.09)),
+        -webkit-linear-gradient(top, rgb(240, 244, 251), rgb(250, 253, 255));
+    background-size: 100% 6px, auto, auto;
+    background-position: bottom, center, center;
+    background-repeat: no-repeat;
+
+    border: 1px solid rgb(163, 163, 163);
+    border-radius: 4px;
+
+    box-shadow: rgba(255, 255, 255, 0.45) 0 1px 0;
+}
+
+body.window-inactive .toolbar .dashboard {
+    border-color: rgb(196, 196, 196);
+    background-image: none;
+    background-color: rgb(239, 239, 239);
+}
+
+.toolbar.collapsed .dashboard {
+    width: 175px;
+}
+
+.toolbar.collapsed .dashboard > .time,
+.toolbar.collapsed .dashboard > .resourcesSize,
+.toolbar.collapsed .dashboard > .logs {
+    display: none;
+}
+
+.toolbar .dashboard > .item {
+    font-family: Helvetica, sans-serif;
+    font-weight: bold;
+    font-size: 11px;
+    line-height: 12px;
+
+    padding: 0 5px;
+
+    display: -webkit-flex;
+
+    min-width: 45px;
+
+    -webkit-justify-content: center;
+    -webkit-align-items: center;
+
+    border-radius: 4px;
+    border: 1px solid transparent;
+}
+
+.toolbar .dashboard > .time,
+.toolbar .dashboard > .resourcesSize {
+    min-width: 70px;
+}
+
+.toolbar .dashboard > .item.enabled:hover {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.toolbar .dashboard > .item.enabled:active {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.toolbar .dashboard > .item > * {
+    display: -webkit-flex;
+    -webkit-align-items: center;
+}
+
+.toolbar .dashboard > .item > img {
+    opacity: 0.2;
+    width: 16px;
+    height: 16px;
+    pointer-events: none;
+}
+
+.toolbar .dashboard > .item.enabled > img {
+    opacity: 0.5;
+}
+
+.toolbar .dashboard > .item.enabled:hover > img {
+    opacity: 0.65;
+}
+
+.toolbar .dashboard > .item > div {
+    display: -webkit-flex;
+    -webkit-flex: 1;
+
+    color: rgba(0, 0, 0, 0.2);
+    padding-left: 2px;
+}
+
+.toolbar .dashboard > .item.enabled > div {
+    color: rgba(0, 0, 0, 0.7);
+}
+
+.toolbar .dashboard > .item.enabled:hover > div {
+    color: rgba(0, 0, 0, 0.85);
+}
+
+.toolbar .dashboard > .resourcesCount > img {
+    content: url(Images/Resources.svg);
+}
+
+.toolbar .dashboard > .time > img {
+    content: url(Images/Time.svg);
+}
+
+.toolbar .dashboard > .logs > img {
+    content: url(Images/Logs.svg);
+}
+
+.toolbar .dashboard > .resourcesSize > img {
+    content: url(Images/Weight.svg);
+}
+
+.toolbar .dashboard > .errors > img {
+    content: url(Images/Errors.svg);
+}
+
+.toolbar .dashboard > .errors.enabled > img {
+    content: url(Images/ErrorsEnabled.svg);
+    opacity: 0.9;
+}
+
+.toolbar .dashboard > .errors.enabled:hover > img {
+    opacity: 1;
+}
+
+.toolbar .dashboard > .errors.enabled > div {
+    color: rgba(201, 55, 57, 0.9);
+}
+
+.toolbar .dashboard > .errors.enabled:hover > div {
+    color: rgb(201, 55, 57);
+}
+
+.toolbar .dashboard > .issues > img {
+    content: url(Images/Issues.svg);
+}
+
+.toolbar .dashboard > .issues.enabled > img {
+    content: url(Images/IssuesEnabled.svg);
+    opacity: 0.9;
+}
+
+.toolbar .dashboard > .issues.enabled:hover > img {
+    opacity: 1;
+}
+
+.toolbar .dashboard > .issues.enabled > div {
+    color: rgba(224, 164, 4, 0.9);
+}
+
+.toolbar .dashboard > .issues.enabled:hover > div {
+    color: rgb(224, 164, 4);
+}
+
+.toolbar.small-size.icon-and-label-vertical .dashboard,
+.toolbar.normal-size.icon-and-label-vertical .dashboard {
+    margin-top: 6px;
+}
+
+/* Styles for the extra short style, one row with quite a small y-margin */
+
+.toolbar.label-only .dashboard,
+.toolbar.small-size.icon-only .dashboard,
+.toolbar.small-size.icon-and-label-vertical .dashboard,
+.toolbar.small-size.icon-and-label-horizontal .dashboard {
+    height: 22px;
+}
+
+.toolbar.label-only .dashboard > .item,
+.toolbar.small-size.icon-only .dashboard > .item,
+.toolbar.small-size.icon-and-label-vertical .dashboard > .item,
+.toolbar.small-size.icon-and-label-horizontal .dashboard > .item {
+    margin: 1px 0;
+}
+
+/* Styles for the fairly short style, one row with quite a bit of y-margin */
+
+.toolbar.normal-size.icon-only .dashboard,
+.toolbar.normal-size.icon-and-label-vertical .dashboard,
+.toolbar.normal-size.icon-and-label-horizontal .dashboard {
+    height: 30px;
+}
+
+.toolbar.normal-size.icon-only .dashboard > .item,
+.toolbar.normal-size.icon-and-label-vertical .dashboard > .item,
+.toolbar.normal-size.icon-and-label-horizontal .dashboard > .item {
+    margin: 4px 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/DashboardView.js b/Source/WebInspectorUI/UserInterface/DashboardView.js
new file mode 100644
index 000000000..070251755
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DashboardView.js
@@ -0,0 +1,224 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DashboardView = function(element)
+{
+    WebInspector.Object.call(this);
+
+    this._element = element;
+
+    this._items = {
+        resourcesCount: {
+            tooltip: WebInspector.UIString("Total number of resources, click to show the Resources navigation sidebar"),
+            handler: this._resourcesWasClicked
+        },
+        resourcesSize: {
+            tooltip: WebInspector.UIString("Total size of all resources, click to show the Network Requests timeline"),
+            handler: this._networkItemWasClicked
+        },
+        time: {
+            tooltip: WebInspector.UIString("Time until the load event fired, click to show the Network Requests timeline"),
+            handler: this._networkItemWasClicked
+        },
+        logs: {
+            tooltip: WebInspector.UIString("Console logs, click to show the Console"),
+            handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Logs)
+        },
+        errors: {
+            tooltip: WebInspector.UIString("Console errors, click to show the Console"),
+            handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Errors)
+        },
+        issues: {
+            tooltip: WebInspector.UIString("Console warnings, click to show the Console"),
+            handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Warnings)
+        }
+    };
+
+    for (var name in this._items)
+        this._appendElementForNamedItem(name);
+
+    this.resourcesCount = 0;
+    this.resourcesSize = 0;
+    this.time = 0;
+    this.logs = 0;
+    this.errors = 0;
+    this.issues = 0;
+};
+
+WebInspector.DashboardView.EnabledStyleClassName = "enabled";
+
+WebInspector.DashboardView.prototype = {
+    constructor: WebInspector.DashboardView,
+
+    // Public
+
+    get logs()
+    {
+        return this._logs;
+    },
+
+    set logs(logs)
+    {
+        this._logs = logs;
+        
+        var item = this._items.logs;
+        item.text = this._formatPossibleLargeNumber(logs);
+        this._setItemEnabled(item, logs > 0);
+    },
+
+    get issues()
+    {
+        return this._issues;
+    },
+
+    set issues(issues)
+    {
+        this._issues = issues;
+
+        var item = this._items.issues;
+        item.text = this._formatPossibleLargeNumber(issues);
+        this._setItemEnabled(item, issues > 0);
+    },
+
+    get errors()
+    {
+        return this._errors;
+    },
+
+    set errors(errors)
+    {
+        this._errors = errors;
+
+        var item = this._items.errors;
+        item.text = this._formatPossibleLargeNumber(errors);
+        this._setItemEnabled(item, errors > 0);
+    },
+
+    set time(time)
+    {
+        var item = this._items.time;
+        item.text = time ? Number.secondsToString(time) : "\u2014";
+        this._setItemEnabled(item, time > 0);
+    },
+
+    get resourcesCount()
+    {
+        return this._resourcesCount;
+    },
+
+    set resourcesCount(resourcesCount)
+    {
+        this._resourcesCount = resourcesCount;
+
+        var item = this._items.resourcesCount;
+        item.text = this._formatPossibleLargeNumber(resourcesCount);
+        this._setItemEnabled(item, resourcesCount > 0);
+    },
+
+    get resourcesSize()
+    {
+        return this._resourcesSize;
+    },
+
+    set resourcesSize(resourcesSize)
+    {
+        this._resourcesSize = resourcesSize;
+
+        var item = this._items.resourcesSize;
+        item.text = resourcesSize ? Number.bytesToString(resourcesSize, false) : "\u2014";
+        this._setItemEnabled(item, resourcesSize > 0);
+    },
+
+    // Private
+
+    _formatPossibleLargeNumber: function(number)
+    {
+        return number > 999 ? WebInspector.UIString("999+") : number;
+    },
+
+    _appendElementForNamedItem: function(name)
+    {
+        var item = this._items[name];
+
+        item.container = this._element.appendChild(document.createElement("div"));
+        item.container.className = "item " + name;
+        item.container.title = item.tooltip;
+
+        item.container.appendChild(document.createElement("img"));
+
+        item.outlet = item.container.appendChild(document.createElement("div"));
+
+        Object.defineProperty(item, "text",
+        {
+            set: function(newText)
+            {
+                if (newText === item.outlet.textContent)
+                    return;
+                item.outlet.textContent = newText;
+            }
+        });
+
+        item.container.addEventListener("click", function(event) {
+            this._itemWasClicked(name);
+        }.bind(this));
+    },
+
+    _itemWasClicked: function(name)
+    {
+        var item = this._items[name];
+        if (!item.container.classList.contains(WebInspector.DashboardView.EnabledStyleClassName))
+            return;
+
+        if (item.handler)
+            item.handler.call(this);
+    },
+
+    _resourcesWasClicked: function()
+    {
+        WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.resourceSidebarPanel;
+        WebInspector.navigationSidebar.collapsed = false;
+    },
+
+    _networkItemWasClicked: function()
+    {
+        WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.instrumentSidebarPanel;
+        WebInspector.instrumentSidebarPanel.showTimelineForRecordType(WebInspector.TimelineRecord.Type.Network);
+    },
+
+    _consoleItemWasClicked: function(scope)
+    {
+        WebInspector.showConsoleView(scope);
+    },
+
+    _setItemEnabled: function(item, enabled)
+    {
+        if (enabled)
+            item.container.classList.add(WebInspector.DashboardView.EnabledStyleClassName);
+        else
+            item.container.classList.remove(WebInspector.DashboardView.EnabledStyleClassName);
+    }
+};
+
+WebInspector.DashboardView.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DataGrid.css b/Source/WebInspectorUI/UserInterface/DataGrid.css
new file mode 100644
index 000000000..f2de5a15d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DataGrid.css
@@ -0,0 +1,329 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.data-grid {
+    position: relative;
+    border: 1px solid #aaa;
+    outline: none;
+}
+
+.data-grid .highlight {
+    background-color: rgb(255, 230, 179);
+}
+
+.data-grid tr.selected .highlight {
+    background-color: transparent;
+}
+
+.data-grid table {
+    table-layout: fixed;
+    border-spacing: 0;
+    border-collapse: collapse;
+    width: 100%;
+    font-size: 10px;
+    font-family: Lucida Grande, sans-serif;
+}
+
+.data-grid .data-container {
+    position: absolute;
+    top: 16px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow-x: hidden;
+    overflow-y: overlay;
+}
+
+.data-grid.inline .data-container {
+    position: static;
+}
+
+.data-grid.inline {
+    border: 1px solid rgb(181, 181, 181);
+}
+
+.data-grid th {
+    text-align: left;
+    vertical-align: middle;
+
+    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(top, transparent, transparent),
+        -webkit-linear-gradient(top, white, white 25%, rgb(244, 244, 244) 50%, rgb(236, 236, 236) 50%, rgb(237, 237, 237));
+    background-size: 1px 11px, 0px 0px, 100% 100%;
+    background-position: left 2px, right 2px, center;
+    background-repeat: no-repeat;
+
+    box-shadow: inset rgba(255, 255, 255, 0.3) 0 -1px 0;
+    border-bottom: 1px solid rgb(182, 182, 182);
+
+    height: 15px;
+    font-weight: normal;
+    padding: 0 4px;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.data-grid th:first-child {
+    background-position: -1px 2px, right 2px, center;
+}
+
+.data-grid th:active:first-child {
+    background-position: -1px 2px, right top, center;
+}
+
+.data-grid th:last-child {
+    background-position: left 2px, -1px 2px, center;
+}
+
+.data-grid th:active:last-child {
+    background-position: left top, -1px top, center;
+}
+
+.data-grid tr.filler {
+    display: table-row !important;
+    height: auto !important;
+}
+
+.data-grid tr.filler td {
+    height: auto !important;
+    padding: 0 !important;
+}
+
+.data-grid table.data {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    height: 100%;
+    border-top: 0 none transparent;
+    background-image: -webkit-linear-gradient(top, white, white 50%, rgb(243, 246, 250) 50%, rgb(243, 246, 250));
+    background-size: 100% 32px;
+    table-layout: fixed;
+}
+
+.data-grid.inline table.data {
+    position: static;
+}
+
+.data-grid table.data tr {
+    display: none;
+}
+
+.data-grid table.data tr.revealed {
+    display: table-row;
+}
+
+.data-grid td {
+    vertical-align: top;
+    height: 12px;
+    line-height: 12px;
+    padding: 2px 4px;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.data-grid td:last-child {
+    padding-right: 16px;
+}
+
+.data-grid td > div, .data-grid th > div {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.data-grid .centered div {
+    text-align: center;
+}
+
+.data-grid .right div {
+    text-align: right;
+}
+
+.data-grid th.sortable div {
+    position: relative;
+}
+
+.data-grid th.sortable:not(.mouse-over-collapser):active {
+    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
+        -webkit-linear-gradient(top, rgb(224, 224, 224), rgb(224, 224, 224) 25%, rgb(214, 214, 214) 50%, rgb(207, 207, 207) 50%, rgb(208, 208, 208));
+    background-size: 1px 15px, 1px 15px, 100% 100%;
+    background-position: left top, right top, center;
+
+    box-shadow: inset rgba(255, 255, 255, 0.1) 0 -1px 0;
+    border-bottom: 1px solid rgb(160, 160, 160);
+}
+
+.data-grid th.sort-ascending, .data-grid th.sort-descending {
+    background-image: -webkit-linear-gradient(top, rgba(0, 0, 120, 0.2), rgba(0, 0, 120, 0.2)), -webkit-linear-gradient(top, rgba(0, 0, 120, 0.2), rgba(0, 0, 120, 0.2)),
+        -webkit-linear-gradient(top, rgb(199, 226, 246), rgb(169, 209, 239) 25%, rgb(158, 204, 239) 50%, rgb(142, 196, 237) 50%, rgb(187, 230, 245));
+    background-size: 1px 15px, 1px 15px, 100% 100%;
+    background-position: left top, right top, center;
+
+    box-shadow: inset rgba(255, 255, 255, 0.1) 0 -1px 0;
+    border-bottom: 1px solid rgb(130, 179, 210);
+}
+
+.data-grid th.sortable.sort-ascending:not(.mouse-over-collapser):active, .data-grid th.sortable.sort-descending:not(.mouse-over-collapser):active {
+    background-image: -webkit-linear-gradient(top, rgba(0, 0, 120, 0.2), rgba(0, 0, 120, 0.2)), -webkit-linear-gradient(top, rgba(0, 0, 120, 0.2), rgba(0, 0, 120, 0.2)),
+        -webkit-linear-gradient(top, rgb(144, 180, 227), rgb(109, 160, 220) 25%, rgb(96, 155, 221) 50%, rgb(77, 146, 219) 50%, rgb(130, 186, 227));
+    background-size: 1px 15px, 1px 15px, 100% 100%;
+    background-position: left top, right top, center;
+
+    border-bottom: 1px solid rgb(63, 125, 192);
+}
+
+.data-grid th:active + th,
+.data-grid th.sort-ascending + th,
+.data-grid th.sort-descending + th {
+    background-position: -1px 2px, -1px 2px, center;
+}
+
+.data-grid th:active + th.sort-ascending,
+.data-grid th:active + th.sort-descending,
+.data-grid th.sort-ascending + th:active,
+.data-grid th.sort-descending + th:active {
+    background-position: -1px top, right top, center;
+}
+
+.data-grid th:first-child:active,
+.data-grid th.sort-ascending:first-child,
+.data-grid th.sort-descending:first-child {
+    background-position: -1px top, right top, center !important;
+}
+
+.data-grid th:last-child:active,
+.data-grid th.sort-ascending:last-child,
+.data-grid th.sort-descending:last-child {
+    background-position: left top, -1px top, center !important;
+}
+
+.data-grid th.sort-ascending > div:first-child,
+.data-grid th.sort-descending > div:first-child {
+    padding-right: 10px;
+}
+
+.data-grid th.sort-ascending > div:first-child::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+
+    margin-bottom: auto;
+    margin-top: auto;
+
+    width: 9px;
+    height: 8px;
+
+    content: "";
+
+    background-image: -webkit-canvas(data-grid-sort-indicator-up-arrow);
+    background-size: 9px 8px;
+    background-repeat: no-repeat;
+}
+
+.data-grid th.sort-descending > div:first-child::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+
+    margin-bottom: auto;
+    margin-top: auto;
+
+    width: 9px;
+    height: 8px;
+
+    content: "";
+
+    background-image: -webkit-canvas(data-grid-sort-indicator-down-arrow);
+    background-size: 9px 8px;
+    background-repeat: no-repeat;
+}
+
+.data-grid button {
+    line-height: 19px;
+}
+
+body.window-inactive .data-grid th.sort-ascending,
+body.window-inactive .data-grid th.sort-descending {
+    background-image: -webkit-linear-gradient(top, white, white 25%, rgb(244, 244, 244) 50%, rgb(236, 236, 236) 50%, rgb(237, 237, 237)),
+        -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
+    background-size: 100% 100%, 1px 11px;
+    background-position: center, right center;
+    background-repeat: no-repeat;
+    border-bottom: 1px solid rgb(182, 182, 182);
+}
+
+.data-grid tr.parent td.disclosure::before {
+    float: left;
+
+    content: "";
+
+    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal);
+    background-size: 8px 8px;
+    background-repeat: no-repeat;
+
+    width: 8px;
+    height: 8px;
+
+    margin-top: 2px;
+    margin-right: 2px;
+}
+
+.data-grid tr.parent.expanded td.disclosure::before {
+    background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
+}
+
+.data-grid:focus tr.parent.selected td.disclosure::before {
+    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-selected);
+}
+
+.data-grid:focus tr.parent.expanded.selected td.disclosure::before {
+    background-image: -webkit-canvas(disclosure-triangle-tiny-open-selected);
+}
+
+.data-grid tr.selected {
+    background-color: rgb(212, 212, 212) !important;
+    color: inherit !important;
+}
+
+.data-grid:focus tr.selected {
+    background-color: rgb(56, 121, 217) !important;
+    color: white !important;
+}
+
+.data-grid tr:not(.parent) td.disclosure {
+    text-indent: 10px;
+}
+
+.data-grid-resizer {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 5px;
+    z-index: 500;
+    cursor: col-resize;
+}
diff --git a/Source/WebInspectorUI/UserInterface/DataGrid.js b/Source/WebInspectorUI/UserInterface/DataGrid.js
new file mode 100644
index 000000000..7b87eee89
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DataGrid.js
@@ -0,0 +1,1846 @@
+/*
+ * Copyright (C) 2008, 2013 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *        notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *        notice, this list of conditions and the following disclaimer in the
+ *        documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.         IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ * @extends {WebInspector.Object}
+ * @param {function(WebInspector.DataGridNode, number, string, string)=} editCallback
+ * @param {function(WebInspector.DataGridNode)=} deleteCallback
+ */
+WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
+{
+    this.element = document.createElement("div");
+    this.element.className = "data-grid";
+    this.element.tabIndex = 0;
+    this.element.addEventListener("keydown", this._keyDown.bind(this), false);
+    this.element.copyHandler = this;
+
+    this._headerTable = document.createElement("table");
+    this._headerTable.className = "header";
+    this._headerTableHeaders = {};
+
+    this._dataTable = document.createElement("table");
+    this._dataTable.className = "data";
+
+    this._dataTable.addEventListener("mousedown", this._mouseDownInDataTable.bind(this));
+    this._dataTable.addEventListener("click", this._clickInDataTable.bind(this));
+
+    this._dataTable.addEventListener("contextmenu", this._contextMenuInDataTable.bind(this), true);
+
+    // FIXME: Add a createCallback which is different from editCallback and has different
+    // behavior when creating a new node.
+    if (editCallback) {
+        this._dataTable.addEventListener("dblclick", this._ondblclick.bind(this), false);
+        this._editCallback = editCallback;
+    }
+    if (deleteCallback)
+        this._deleteCallback = deleteCallback;
+
+    this.aligned = {};
+    this.groups = {};
+    this._hiddenColumns = {};
+
+    this._scrollContainer = document.createElement("div");
+    this._scrollContainer.className = "data-container";
+    this._scrollContainer.appendChild(this._dataTable);
+
+    this.element.appendChild(this._headerTable);
+    this.element.appendChild(this._scrollContainer);
+
+    var headerRow = document.createElement("tr");
+    var columnGroup = document.createElement("colgroup");
+    this._columnCount = 0;
+
+    for (var columnIdentifier in columns) {
+        var column = columns[columnIdentifier];
+        if (column.disclosure)
+            this.disclosureColumnIdentifier = columnIdentifier;
+
+        var col = document.createElement("col");
+        if (column.width)
+            col.style.width = column.width;
+        column.element = col;
+        columnGroup.appendChild(col);
+
+        var cell = document.createElement("th");
+        cell.className = columnIdentifier + "-column";
+        cell.columnIdentifier = columnIdentifier;
+        this._headerTableHeaders[columnIdentifier] = cell;
+
+        var div = document.createElement("div");
+        if (column.titleDOMFragment)
+            div.appendChild(column.titleDOMFragment);
+        else
+            div.textContent = column.title;
+        cell.appendChild(div);
+
+        if (column.sort) {
+            cell.classList.add("sort-" + column.sort);
+            this._sortColumnCell = cell;
+        }
+
+        if (column.sortable) {
+            cell.addEventListener("click", this._clickInHeaderCell.bind(this), false);
+            cell.classList.add("sortable");
+        }
+
+        if (column.aligned)
+            this.aligned[columnIdentifier] = column.aligned;
+
+        if (column.group) {
+            this.groups[columnIdentifier] = column.group;
+            cell.classList.add("column-group-" + column.group);
+        }
+
+        if (column.collapsesGroup) {
+            console.assert(column.group !== column.collapsesGroup);
+
+            var divider = document.createElement("div");
+            divider.className = "divider";
+            cell.appendChild(divider);
+
+            var collapseDiv = document.createElement("div");
+            collapseDiv.className = "collapser-button";
+            collapseDiv.title = this._collapserButtonCollapseColumnsToolTip();
+            collapseDiv.addEventListener("mouseover", this._mouseoverColumnCollapser.bind(this));
+            collapseDiv.addEventListener("mouseout", this._mouseoutColumnCollapser.bind(this));
+            collapseDiv.addEventListener("click", this._clickInColumnCollapser.bind(this));
+            cell.appendChild(collapseDiv);
+
+            cell.collapsesGroup = column.collapsesGroup;
+            cell.classList.add("collapser");
+        }
+
+        headerRow.appendChild(cell);
+
+        ++this._columnCount;
+    }
+
+    columnGroup.span = this._columnCount;
+
+    this._headerTableColumnGroup = columnGroup;
+    this._headerTable.appendChild(this._headerTableColumnGroup);
+    this.headerTableBody.appendChild(headerRow);
+
+    var fillerRow = document.createElement("tr");
+    fillerRow.className = "filler";
+
+    for (var columnIdentifier in columns) {
+        var column = columns[columnIdentifier];
+        var td = document.createElement("td");
+        td.className = columnIdentifier + "-column";
+        var group = this.groups[columnIdentifier];
+        if (group)
+            td.classList.add("column-group-" + group);
+        fillerRow.appendChild(td);
+    }
+
+    this._dataTableColumnGroup = columnGroup.cloneNode(true);
+    this._dataTable.appendChild(this._dataTableColumnGroup);
+    this.dataTableBody.appendChild(fillerRow);
+
+    this.columns = columns || {};
+    this._columnsArray = [];
+    for (var columnIdentifier in columns) {
+        columns[columnIdentifier].ordinal = this._columnsArray.length;
+        columns[columnIdentifier].identifier = columnIdentifier;
+        this._columnsArray.push(columns[columnIdentifier]);
+    }
+
+    for (var i = 0; i < this._columnsArray.length; ++i)
+        this._columnsArray[i].bodyElement = this._dataTableColumnGroup.children[i];
+
+    this.children = [];
+    this.selectedNode = null;
+    this.expandNodesWhenArrowing = false;
+    this.root = true;
+    this.hasChildren = false;
+    this.expanded = true;
+    this.revealed = true;
+    this.selected = false;
+    this.dataGrid = this;
+    this.indentWidth = 15;
+    this.resizers = [];
+    this._columnWidthsInitialized = false;
+
+    this._generateSortIndicatorImagesIfNeeded();
+}
+
+WebInspector.DataGrid.Event = {
+    DidLayout: "datagrid-did-layout",
+    SortChanged: "datagrid-sort-changed",
+    SelectedNodeChanged: "datagrid-selected-node-changed"
+}
+
+/**
+ * @param {Array.<string>} columnNames
+ * @param {Array.<string>} values
+ */
+WebInspector.DataGrid.createSortableDataGrid = function(columnNames, values)
+{
+    var numColumns = columnNames.length;
+    if (!numColumns)
+        return null;
+
+    var columns = {};
+
+    for (var i = 0; i < columnNames.length; ++i) {
+        var column = {};
+        column.width = columnNames[i].length;
+        column.title = columnNames[i];
+        column.sortable = true;
+
+        columns[columnNames[i]] = column;
+    }
+
+    var nodes = [];
+    for (var i = 0; i < values.length / numColumns; ++i) {
+        var data = {};
+        for (var j = 0; j < columnNames.length; ++j)
+            data[columnNames[j]] = values[numColumns * i + j];
+
+        var node = new WebInspector.DataGridNode(data, false);
+        node.selectable = false;
+        nodes.push(node);
+    }
+
+    var dataGrid = new WebInspector.DataGrid(columns);
+    var length = nodes.length;
+    for (var i = 0; i < length; ++i)
+        dataGrid.appendChild(nodes[i]);
+
+    dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, sortDataGrid, this);
+
+    function sortDataGrid()
+    {
+        var nodes = dataGrid.children.slice();
+        var sortColumnIdentifier = dataGrid.sortColumnIdentifier;
+        var sortDirection = dataGrid.sortOrder === "ascending" ? 1 : -1;
+        var columnIsNumeric = true;
+
+        for (var i = 0; i < nodes.length; i++) {
+            if (isNaN(Number(nodes[i].data[sortColumnIdentifier])))
+                columnIsNumeric = false;
+        }
+
+        function comparator(dataGridNode1, dataGridNode2)
+        {
+            var item1 = dataGridNode1.data[sortColumnIdentifier];
+            var item2 = dataGridNode2.data[sortColumnIdentifier];
+
+            var comparison;
+            if (columnIsNumeric) {
+                // Sort numbers based on comparing their values rather than a lexicographical comparison.
+                var number1 = parseFloat(item1);
+                var number2 = parseFloat(item2);
+                comparison = number1 < number2 ? -1 : (number1 > number2 ? 1 : 0);
+            } else
+                comparison = item1 < item2 ? -1 : (item1 > item2 ? 1 : 0);
+
+            return sortDirection * comparison;
+        }
+
+        nodes.sort(comparator);
+        dataGrid.removeChildren();
+        for (var i = 0; i < nodes.length; i++)
+            dataGrid.appendChild(nodes[i]);
+    }
+    return dataGrid;
+}
+
+WebInspector.DataGrid.prototype = {
+    get refreshCallback()
+    {
+        return this._refreshCallback;
+    },
+
+    set refreshCallback(refreshCallback)
+    {
+        this._refreshCallback = refreshCallback;
+    },
+
+    _ondblclick: function(event)
+    {
+        if (this._editing || this._editingNode)
+            return;
+
+        this._startEditing(event.target);
+    },
+
+    _startEditingColumnOfDataGridNode: function(node, column)
+    {
+        this._editing = true;
+        this._editingNode = node;
+        this._editingNode.select();
+
+        var element = this._editingNode._element.children[column];
+        WebInspector.startEditing(element, this._startEditingConfig(element));
+        window.getSelection().setBaseAndExtent(element, 0, element, 1);
+    },
+
+    _startEditing: function(target)
+    {
+        var element = target.enclosingNodeOrSelfWithNodeName("td");
+        if (!element)
+            return;
+
+        this._editingNode = this.dataGridNodeFromNode(target);
+        if (!this._editingNode) {
+            if (!this.creationNode)
+                return;
+            this._editingNode = this.creationNode;
+        }
+
+        // Force editing the 1st column when editing the creation node
+        if (this._editingNode.isCreationNode)
+            return this._startEditingColumnOfDataGridNode(this._editingNode, 0);
+
+        this._editing = true;
+        WebInspector.startEditing(element, this._startEditingConfig(element));
+
+        window.getSelection().setBaseAndExtent(element, 0, element, 1);
+    },
+
+    _startEditingConfig: function(element)
+    {
+        return new WebInspector.EditingConfig(this._editingCommitted.bind(this), this._editingCancelled.bind(this), element.textContent);
+    },
+
+    _editingCommitted: function(element, newText, oldText, context, moveDirection)
+    {
+        // FIXME: We need more column identifiers here throughout this function.
+        // Not needed yet since only editable DataGrid is DOM Storage, which is Key - Value.
+
+        // FIXME: Better way to do this than regular expressions?
+        var columnIdentifier = parseInt(element.className.match(/\b(\d+)-column\b/)[1], 10);
+
+        var textBeforeEditing = this._editingNode.data[columnIdentifier];
+        var currentEditingNode = this._editingNode;
+
+        function moveToNextIfNeeded(wasChange) {
+            if (!moveDirection)
+                return;
+
+            if (moveDirection === "forward") {
+                if (currentEditingNode.isCreationNode && columnIdentifier === 0 && !wasChange)
+                    return;
+
+                if (columnIdentifier === 0)
+                    return this._startEditingColumnOfDataGridNode(currentEditingNode, 1);
+
+                var nextDataGridNode = currentEditingNode.traverseNextNode(true, null, true);
+                if (nextDataGridNode)
+                    return this._startEditingColumnOfDataGridNode(nextDataGridNode, 0);
+                if (currentEditingNode.isCreationNode && wasChange) {
+                    this.addCreationNode(false);
+                    return this._startEditingColumnOfDataGridNode(this.creationNode, 0);
+                }
+                return;
+            }
+
+            if (moveDirection === "backward") {
+                if (columnIdentifier === 1)
+                    return this._startEditingColumnOfDataGridNode(currentEditingNode, 0);
+                    var nextDataGridNode = currentEditingNode.traversePreviousNode(true, null, true);
+
+                if (nextDataGridNode)
+                    return this._startEditingColumnOfDataGridNode(nextDataGridNode, 1);
+                return;
+            }
+        }
+
+        if (textBeforeEditing == newText) {
+            this._editingCancelled(element);
+            moveToNextIfNeeded.call(this, false);
+            return;
+        }
+
+        // Update the text in the datagrid that we typed
+        this._editingNode.data[columnIdentifier] = newText;
+
+        // Make the callback - expects an editing node (table row), the column number that is being edited,
+        // the text that used to be there, and the new text.
+        this._editCallback(this._editingNode, columnIdentifier, textBeforeEditing, newText);
+
+        if (this._editingNode.isCreationNode)
+            this.addCreationNode(false);
+
+        this._editingCancelled(element);
+        moveToNextIfNeeded.call(this, true);
+    },
+
+    _editingCancelled: function(element)
+    {
+        delete this._editing;
+        this._editingNode = null;
+    },
+
+    get sortColumnIdentifier()
+    {
+        if (!this._sortColumnCell)
+            return null;
+        return this._sortColumnCell.columnIdentifier;
+    },
+
+    get sortOrder()
+    {
+        if (!this._sortColumnCell || this._sortColumnCell.classList.contains("sort-ascending"))
+            return "ascending";
+        if (this._sortColumnCell.classList.contains("sort-descending"))
+            return "descending";
+        return null;
+    },
+
+    get headerTableBody()
+    {
+        if ("_headerTableBody" in this)
+            return this._headerTableBody;
+
+        this._headerTableBody = this._headerTable.getElementsByTagName("tbody")[0];
+        if (!this._headerTableBody) {
+            this._headerTableBody = this.element.ownerDocument.createElement("tbody");
+            this._headerTable.insertBefore(this._headerTableBody, this._headerTable.tFoot);
+        }
+
+        return this._headerTableBody;
+    },
+
+    get dataTableBody()
+    {
+        if ("_dataTableBody" in this)
+            return this._dataTableBody;
+
+        this._dataTableBody = this._dataTable.getElementsByTagName("tbody")[0];
+        if (!this._dataTableBody) {
+            this._dataTableBody = this.element.ownerDocument.createElement("tbody");
+            this._dataTable.insertBefore(this._dataTableBody, this._dataTable.tFoot);
+        }
+
+        return this._dataTableBody;
+    },
+
+    /**
+     * @param {number=} maxDescentLevel
+     */
+    autoSizeColumns: function(minPercent, maxPercent, maxDescentLevel)
+    {
+        if (minPercent)
+            minPercent = Math.min(minPercent, Math.floor(100 / this._columnCount));
+        var widths = {};
+        var columns = this.columns;
+        for (var columnIdentifier in columns)
+            widths[columnIdentifier] = (columns[columnIdentifier].title || "").length;
+
+        var children = maxDescentLevel ? this._enumerateChildren(this, [], maxDescentLevel + 1) : this.children;
+        for (var i = 0; i < children.length; ++i) {
+            var node = children[i];
+            for (var columnIdentifier in columns) {
+                var text = node.data[columnIdentifier] || "";
+                if (text.length > widths[columnIdentifier])
+                    widths[columnIdentifier] = text.length;
+            }
+        }
+
+        var totalColumnWidths = 0;
+        for (var columnIdentifier in columns)
+            totalColumnWidths += widths[columnIdentifier];
+
+        var recoupPercent = 0;
+        for (var columnIdentifier in columns) {
+            var width = Math.round(100 * widths[columnIdentifier] / totalColumnWidths);
+            if (minPercent && width < minPercent) {
+                recoupPercent += (minPercent - width);
+                width = minPercent;
+            } else if (maxPercent && width > maxPercent) {
+                recoupPercent -= (width - maxPercent);
+                width = maxPercent;
+            }
+            widths[columnIdentifier] = width;
+        }
+
+        while (minPercent && recoupPercent > 0) {
+            for (var columnIdentifier in columns) {
+                if (widths[columnIdentifier] > minPercent) {
+                    --widths[columnIdentifier];
+                    --recoupPercent;
+                    if (!recoupPercent)
+                        break;
+                }
+            }
+        }
+
+        while (maxPercent && recoupPercent < 0) {
+            for (var columnIdentifier in columns) {
+                if (widths[columnIdentifier] < maxPercent) {
+                    ++widths[columnIdentifier];
+                    ++recoupPercent;
+                    if (!recoupPercent)
+                        break;
+                }
+            }
+        }
+
+        for (var columnIdentifier in columns)
+            columns[columnIdentifier].element.style.width = widths[columnIdentifier] + "%";
+        this._columnWidthsInitialized = false;
+        this.updateLayout();
+    },
+
+    _enumerateChildren: function(rootNode, result, maxLevel)
+    {
+        if (!rootNode.root)
+            result.push(rootNode);
+        if (!maxLevel)
+            return;
+        for (var i = 0; i < rootNode.children.length; ++i)
+            this._enumerateChildren(rootNode.children[i], result, maxLevel - 1);
+        return result;
+    },
+
+    // Updates the widths of the table, including the positions of the column
+    // resizers.
+    //
+    // IMPORTANT: This function MUST be called once after the element of the
+    // DataGrid is attached to its parent element and every subsequent time the
+    // width of the parent element is changed in order to make it possible to
+    // resize the columns.
+    //
+    // If this function is not called after the DataGrid is attached to its
+    // parent element, then the DataGrid's columns will not be resizable.
+    updateLayout: function()
+    {
+        // Do not attempt to use offsetes if we're not attached to the document tree yet.
+        if (!this._columnWidthsInitialized && this.element.offsetWidth) {
+            // Give all the columns initial widths now so that during a resize,
+            // when the two columns that get resized get a percent value for
+            // their widths, all the other columns already have percent values
+            // for their widths.
+            var headerTableColumns = this._headerTableColumnGroup.children;
+            var tableWidth = this._dataTable.offsetWidth;
+            var numColumns = headerTableColumns.length;
+            for (var i = 0; i < numColumns; i++) {
+                var columnWidth = this.headerTableBody.rows[0].cells[i].offsetWidth;
+                var percentWidth = ((columnWidth / tableWidth) * 100) + "%";
+                this._headerTableColumnGroup.children[i].style.width = percentWidth;
+                this._dataTableColumnGroup.children[i].style.width = percentWidth;
+            }
+            this._columnWidthsInitialized = true;
+        }
+        this._positionResizers();
+        this.dispatchEventToListeners(WebInspector.DataGrid.Event.DidLayout);
+    },
+
+    columnWidthsMap: function()
+    {
+        var result = {};
+        for (var columnIdentifier in this.columns) {
+            var column = this.columns[columnIdentifier];
+            var width = this._headerTableColumnGroup.children[column.ordinal].style.width;
+            result[columnIdentifier] = parseFloat(width);
+        }
+        return result;
+    },
+
+    applyColumnWidthsMap: function(columnWidthsMap)
+    {
+        for (var columnIdentifier in this.columns) {
+            var column = this.columns[columnIdentifier];
+            var width = (columnWidthsMap[columnIdentifier] || 0) + "%";
+            this._headerTableColumnGroup.children[column.ordinal].style.width = width;
+            this._dataTableColumnGroup.children[column.ordinal].style.width = width;
+        }
+
+        this.updateLayout();
+    },
+
+    _isColumnVisible: function(columnIdentifier)
+    {
+        return !(columnIdentifier in this._hiddenColumns);
+    },
+
+    _showColumn: function(columnIdentifier)
+    {
+        delete this._hiddenColumns[columnIdentifier];
+    },
+
+    _hideColumn: function(columnIdentifier)
+    {
+        this._hiddenColumns[columnIdentifier] = true;
+
+        var column = this.columns[columnIdentifier];
+        var columnElement = column.element;
+        columnElement.style.width = 0;
+
+        var columnBodyElement = column.bodyElement;
+        columnBodyElement.style.width = 0;
+
+        this._columnWidthsInitialized = false;
+    },
+
+    get scrollContainer()
+    {
+        return this._scrollContainer;
+    },
+
+    isScrolledToLastRow: function()
+    {
+        return this._scrollContainer.isScrolledToBottom();
+    },
+
+    scrollToLastRow: function()
+    {
+        this._scrollContainer.scrollTop = this._scrollContainer.scrollHeight - this._scrollContainer.offsetHeight;
+    },
+
+    _positionResizers: function()
+    {
+        var headerTableColumns = this._headerTableColumnGroup.children;
+        var numColumns = headerTableColumns.length;
+        var left = 0;
+        var previousResizer = null;
+
+        // Make n - 1 resizers for n columns.
+        for (var i = 0; i < numColumns - 1; i++) {
+            var resizer = this.resizers[i];
+
+            if (!resizer) {
+                // This is the first call to updateWidth, so the resizers need
+                // to be created.
+                resizer = document.createElement("div");
+                resizer.classList.add("data-grid-resizer");
+                // This resizer is associated with the column to its right.
+                resizer.addEventListener("mousedown", this._startResizerDragging.bind(this), false);
+                this.element.appendChild(resizer);
+                this.resizers[i] = resizer;
+            }
+
+            // Get the width of the cell in the first (and only) row of the
+            // header table in order to determine the width of the column, since
+            // it is not possible to query a column for its width.
+            left += this.headerTableBody.rows[0].cells[i].offsetWidth;
+
+            var columnIsVisible = this._isColumnVisible(this._columnsArray[i].identifier);
+            if (columnIsVisible) {
+                resizer.style.removeProperty("display");
+                resizer.style.left = left + "px";
+                resizer.leftNeighboringColumnID = i;
+                if (previousResizer)
+                    previousResizer.rightNeighboringColumnID = i;
+                previousResizer = resizer;
+            } else {
+                resizer.style.setProperty("display", "none");
+                resizer.leftNeighboringColumnID = 0;
+                resizer.rightNeighboringColumnID = 0;
+            }
+        }
+        if (previousResizer)
+            previousResizer.rightNeighboringColumnID = numColumns - 1;
+    },
+
+    addCreationNode: function(hasChildren)
+    {
+        if (this.creationNode)
+            this.creationNode.makeNormal();
+
+        var emptyData = {};
+        for (var column in this.columns)
+            emptyData[column] = '';
+        this.creationNode = new WebInspector.CreationDataGridNode(emptyData, hasChildren);
+        this.appendChild(this.creationNode);
+    },
+
+    appendChild: function(child)
+    {
+        this.insertChild(child, this.children.length);
+    },
+
+    insertChild: function(child, index)
+    {
+        if (!child)
+            throw("insertChild: Node can't be undefined or null.");
+        if (child.parent === this)
+            throw("insertChild: Node is already a child of this node.");
+
+        if (child.parent)
+            child.parent.removeChild(child);
+
+        this.children.splice(index, 0, child);
+        this.hasChildren = true;
+
+        child.parent = this;
+        child.dataGrid = this.dataGrid;
+        child._recalculateSiblings(index);
+
+        delete child._depth;
+        delete child._revealed;
+        delete child._attached;
+        child._shouldRefreshChildren = true;
+
+        var current = child.children[0];
+        while (current) {
+            current.dataGrid = this.dataGrid;
+            delete current._depth;
+            delete current._revealed;
+            delete current._attached;
+            current._shouldRefreshChildren = true;
+            current = current.traverseNextNode(false, child, true);
+        }
+
+        if (this.expanded)
+            child._attach();
+    },
+
+    removeChild: function(child)
+    {
+        if (!child)
+            throw("removeChild: Node can't be undefined or null.");
+        if (child.parent !== this)
+            throw("removeChild: Node is not a child of this node.");
+
+        child.deselect();
+        child._detach();
+
+        this.children.remove(child, true);
+
+        if (child.previousSibling)
+            child.previousSibling.nextSibling = child.nextSibling;
+        if (child.nextSibling)
+            child.nextSibling.previousSibling = child.previousSibling;
+
+        child.dataGrid = null;
+        child.parent = null;
+        child.nextSibling = null;
+        child.previousSibling = null;
+
+        if (this.children.length <= 0)
+            this.hasChildren = false;
+
+        if (this.creationNode === child)
+            delete this.creationNode;
+    },
+
+    removeChildren: function()
+    {
+        for (var i = 0; i < this.children.length; ++i) {
+            var child = this.children[i];
+            child.deselect();
+            child._detach();
+
+            child.dataGrid = null;
+            child.parent = null;
+            child.nextSibling = null;
+            child.previousSibling = null;
+        }
+
+        this.children = [];
+        this.hasChildren = false;
+    },
+
+    removeChildrenRecursive: function()
+    {
+        var childrenToRemove = this.children;
+
+        var child = this.children[0];
+        while (child) {
+            if (child.children.length)
+                childrenToRemove = childrenToRemove.concat(child.children);
+            child = child.traverseNextNode(false, this, true);
+        }
+
+        for (var i = 0; i < childrenToRemove.length; ++i) {
+            child = childrenToRemove[i];
+            child.deselect();
+            child._detach();
+
+            child.children = [];
+            child.dataGrid = null;
+            child.parent = null;
+            child.nextSibling = null;
+            child.previousSibling = null;
+        }
+
+        this.children = [];
+    },
+
+    sortNodes: function(comparator, reverseMode)
+    {
+        function comparatorWrapper(a, b)
+        {
+            if (a._dataGridNode._data.summaryRow)
+                return 1;
+            if (b._dataGridNode._data.summaryRow)
+                return -1;
+
+            var aDataGirdNode = a._dataGridNode;
+            var bDataGirdNode = b._dataGridNode;
+            return reverseMode ? comparator(bDataGirdNode, aDataGirdNode) : comparator(aDataGirdNode, bDataGirdNode);
+        }
+
+        var tbody = this.dataTableBody;
+        var tbodyParent = tbody.parentElement;
+        tbodyParent.removeChild(tbody);
+
+        var childNodes = tbody.childNodes;
+        var fillerRow = childNodes.lastValue;
+
+        var sortedRows = Array.prototype.slice.call(childNodes, 0, childNodes.length - 1);
+        sortedRows.sort(comparatorWrapper);
+        var sortedRowsLength = sortedRows.length;
+
+        tbody.removeChildren();
+        var previousSiblingNode = null;
+        for (var i = 0; i < sortedRowsLength; ++i) {
+            var row = sortedRows[i];
+            var node = row._dataGridNode;
+            node.previousSibling = previousSiblingNode;
+            if (previousSiblingNode)
+                previousSiblingNode.nextSibling = node;
+            tbody.appendChild(row);
+            previousSiblingNode = node;
+        }
+        if (previousSiblingNode)
+            previousSiblingNode.nextSibling = null;
+
+        tbody.appendChild(fillerRow);
+        tbodyParent.appendChild(tbody);
+    },
+
+    _keyDown: function(event)
+    {
+        if (!this.selectedNode || event.shiftKey || event.metaKey || event.ctrlKey || this._editing)
+            return;
+
+        var handled = false;
+        var nextSelectedNode;
+        if (event.keyIdentifier === "Up" && !event.altKey) {
+            nextSelectedNode = this.selectedNode.traversePreviousNode(true);
+            while (nextSelectedNode && !nextSelectedNode.selectable)
+                nextSelectedNode = nextSelectedNode.traversePreviousNode(true);
+            handled = nextSelectedNode ? true : false;
+        } else if (event.keyIdentifier === "Down" && !event.altKey) {
+            nextSelectedNode = this.selectedNode.traverseNextNode(true);
+            while (nextSelectedNode && !nextSelectedNode.selectable)
+                nextSelectedNode = nextSelectedNode.traverseNextNode(true);
+            handled = nextSelectedNode ? true : false;
+        } else if (event.keyIdentifier === "Left") {
+            if (this.selectedNode.expanded) {
+                if (event.altKey)
+                    this.selectedNode.collapseRecursively();
+                else
+                    this.selectedNode.collapse();
+                handled = true;
+            } else if (this.selectedNode.parent && !this.selectedNode.parent.root) {
+                handled = true;
+                if (this.selectedNode.parent.selectable) {
+                    nextSelectedNode = this.selectedNode.parent;
+                    handled = nextSelectedNode ? true : false;
+                } else if (this.selectedNode.parent)
+                    this.selectedNode.parent.collapse();
+            }
+        } else if (event.keyIdentifier === "Right") {
+            if (!this.selectedNode.revealed) {
+                this.selectedNode.reveal();
+                handled = true;
+            } else if (this.selectedNode.hasChildren) {
+                handled = true;
+                if (this.selectedNode.expanded) {
+                    nextSelectedNode = this.selectedNode.children[0];
+                    handled = nextSelectedNode ? true : false;
+                } else {
+                    if (event.altKey)
+                        this.selectedNode.expandRecursively();
+                    else
+                        this.selectedNode.expand();
+                }
+            }
+        } else if (event.keyCode === 8 || event.keyCode === 46) {
+            if (this._deleteCallback) {
+                handled = true;
+                this._deleteCallback(this.selectedNode);
+            }
+        } else if (isEnterKey(event)) {
+            if (this._editCallback) {
+                handled = true;
+                // The first child of the selected element is the <td class="0-column">,
+                // and that's what we want to edit.
+                this._startEditing(this.selectedNode._element.children[0]);
+            }
+        }
+
+        if (nextSelectedNode) {
+            nextSelectedNode.reveal();
+            nextSelectedNode.select();
+        }
+
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    },
+
+    expand: function()
+    {
+        // This is the root, do nothing.
+    },
+
+    collapse: function()
+    {
+        // This is the root, do nothing.
+    },
+
+    reveal: function()
+    {
+        // This is the root, do nothing.
+    },
+
+    revealAndSelect: function()
+    {
+        // This is the root, do nothing.
+    },
+
+    dataGridNodeFromNode: function(target)
+    {
+        var rowElement = target.enclosingNodeOrSelfWithNodeName("tr");
+        return rowElement && rowElement._dataGridNode;
+    },
+
+    dataGridNodeFromPoint: function(x, y)
+    {
+        var node = this._dataTable.ownerDocument.elementFromPoint(x, y);
+        var rowElement = node.enclosingNodeOrSelfWithNodeName("tr");
+        return rowElement && rowElement._dataGridNode;
+    },
+
+    _clickInHeaderCell: function(event)
+    {
+        var cell = event.target.enclosingNodeOrSelfWithNodeName("th");
+        if (!cell || !cell.columnIdentifier || !cell.classList.contains("sortable"))
+            return;
+
+        var sortOrder = this.sortOrder;
+
+        if (this._sortColumnCell)
+            this._sortColumnCell.removeMatchingStyleClasses("sort-\\w+");
+
+        if (cell == this._sortColumnCell) {
+            if (sortOrder === "ascending")
+                sortOrder = "descending";
+            else
+                sortOrder = "ascending";
+        }
+
+        this._sortColumnCell = cell;
+
+        cell.classList.add("sort-" + sortOrder);
+    
+        this.dispatchEventToListeners(WebInspector.DataGrid.Event.SortChanged);
+    },
+
+    _mouseoverColumnCollapser: function(event)
+    {
+        var cell = event.target.enclosingNodeOrSelfWithNodeName("th");
+        if (!cell || !cell.collapsesGroup)
+            return;
+
+        cell.classList.add("mouse-over-collapser");
+    },
+
+    _mouseoutColumnCollapser: function(event)
+    {
+        var cell = event.target.enclosingNodeOrSelfWithNodeName("th");
+        if (!cell || !cell.collapsesGroup)
+            return;
+
+        cell.classList.remove("mouse-over-collapser");
+    },
+
+    _clickInColumnCollapser: function(event)
+    {
+        var cell = event.target.enclosingNodeOrSelfWithNodeName("th");
+        if (!cell || !cell.collapsesGroup)
+            return;
+
+        this._collapseColumnGroupWithCell(cell);
+
+        event.stopPropagation();
+        event.preventDefault();
+    },
+
+    collapseColumnGroup: function(columnGroup)
+    {
+        var collapserColumn = null;
+        for (var columnIdentifier in this.columns) {
+            var column = this.columns[columnIdentifier];
+            if (column.collapsesGroup == columnGroup) {
+                collapserColumn = column;
+                break;
+            }
+        }
+
+        console.assert(collapserColumn);
+        if (!collapserColumn)
+            return;
+
+        var cell = this._headerTableHeaders[collapserColumn.identifier];
+        this._collapseColumnGroupWithCell(cell);
+    },
+
+    _collapseColumnGroupWithCell: function(cell)
+    {
+        var columnsWillCollapse = cell.classList.toggle("collapsed");
+
+        this.willToggleColumnGroup(cell.collapsesGroup, columnsWillCollapse);
+
+        var showOrHide = columnsWillCollapse ? this._hideColumn : this._showColumn;
+        for (var columnIdentifier in this.columns) {
+            var column = this.columns[columnIdentifier];
+            if (column.group === cell.collapsesGroup)
+                showOrHide.call(this, columnIdentifier);
+        }
+
+        var collapserButton = cell.querySelector(".collapser-button");
+        if (collapserButton)
+            collapserButton.title = columnsWillCollapse ? this._collapserButtonExpandColumnsToolTip() : this._collapserButtonCollapseColumnsToolTip();
+
+        this.didToggleColumnGroup(cell.collapsesGroup, columnsWillCollapse);
+    },
+
+    _collapserButtonCollapseColumnsToolTip: function()
+    {
+        return WebInspector.UIString("Collapse columns");
+    },
+
+    _collapserButtonExpandColumnsToolTip: function()
+    {
+        return WebInspector.UIString("Expand columns");
+    },
+
+    willToggleColumnGroup: function(columnGroup, willCollapse)
+    {
+        // Implemented by subclasses if needed.
+    },
+
+    didToggleColumnGroup: function(columnGroup, didCollapse)
+    {
+        // Implemented by subclasses if needed.
+    },
+
+    isColumnSortColumn: function(columnIdentifier)
+    {
+        return this._sortColumnCell === this._headerTableHeaders[columnIdentifier];
+    },
+
+    markColumnAsSortedBy: function(columnIdentifier, sortOrder)
+    {
+        if (this._sortColumnCell)
+            this._sortColumnCell.removeMatchingStyleClasses("sort-\\w+");
+        this._sortColumnCell = this._headerTableHeaders[columnIdentifier];
+        this._sortColumnCell.classList.add("sort-" + sortOrder);
+    },
+
+    headerTableHeader: function(columnIdentifier)
+    {
+        return this._headerTableHeaders[columnIdentifier];
+    },
+
+    _generateSortIndicatorImagesIfNeeded: function()
+    {
+        if (WebInspector.DataGrid._generatedSortIndicatorImages)
+            return;
+
+        WebInspector.DataGrid._generatedSortIndicatorImages = true;
+
+        var specifications = {};
+        specifications["arrow"] = {
+            fillColor: [81, 81, 81],
+            shadowColor: [255, 255, 255, 0.5],
+            shadowOffsetX: 0,
+            shadowOffsetY: 1,
+            shadowBlur: 0
+        };
+
+        generateColoredImagesForCSS("Images/SortIndicatorDownArrow.pdf", specifications, 9, 8, "data-grid-sort-indicator-down-");
+        generateColoredImagesForCSS("Images/SortIndicatorUpArrow.pdf", specifications, 9, 8, "data-grid-sort-indicator-up-");
+    },
+
+    _mouseDownInDataTable: function(event)
+    {
+        var gridNode = this.dataGridNodeFromNode(event.target);
+        if (!gridNode || !gridNode.selectable)
+            return;
+
+        if (gridNode.isEventWithinDisclosureTriangle(event))
+            return;
+
+        if (event.metaKey) {
+            if (gridNode.selected)
+                gridNode.deselect();
+            else
+                gridNode.select();
+        } else
+            gridNode.select();
+    },
+
+    _contextMenuInDataTable: function(event)
+    {
+        var contextMenu = new WebInspector.ContextMenu(event);
+
+        var gridNode = this.dataGridNodeFromNode(event.target);
+        if (this.dataGrid._refreshCallback && (!gridNode || gridNode !== this.creationNode))
+            contextMenu.appendItem(WebInspector.UIString("Refresh"), this._refreshCallback.bind(this));
+
+        if (gridNode && gridNode.selectable && !gridNode.isEventWithinDisclosureTriangle(event)) {
+            contextMenu.appendItem(WebInspector.UIString("Copy Row"), this._copyRow.bind(this, event.target));
+
+            if (this.dataGrid._editCallback) {
+                if (gridNode === this.creationNode)
+                    contextMenu.appendItem(WebInspector.UIString("Add New"), this._startEditing.bind(this, event.target));
+                else {
+                    var element = event.target.enclosingNodeOrSelfWithNodeName("td");
+                    var columnIdentifier = parseInt(element.className.match(/\b(\d+)-column\b/)[1], 10);
+                    var columnTitle = this.dataGrid.columns[columnIdentifier].title;
+                    contextMenu.appendItem(WebInspector.UIString("Edit “%s�").format(columnTitle), this._startEditing.bind(this, event.target));
+                }
+            }
+            if (this.dataGrid._deleteCallback && gridNode !== this.creationNode)
+                contextMenu.appendItem(WebInspector.UIString("Delete"), this._deleteCallback.bind(this, gridNode));
+        }
+
+        contextMenu.show();
+    },
+
+    _clickInDataTable: function(event)
+    {
+        var gridNode = this.dataGridNodeFromNode(event.target);
+        if (!gridNode || !gridNode.hasChildren)
+            return;
+
+        if (!gridNode.isEventWithinDisclosureTriangle(event))
+            return;
+
+        if (gridNode.expanded) {
+            if (event.altKey)
+                gridNode.collapseRecursively();
+            else
+                gridNode.collapse();
+        } else {
+            if (event.altKey)
+                gridNode.expandRecursively();
+            else
+                gridNode.expand();
+        }
+    },
+
+    _copyTextForDataGridNode: function(node)
+    {
+        var fields = [];
+        for (var columnIdentifier in node.dataGrid.columns)
+            fields.push(node.data[columnIdentifier]);
+
+        var tabSeparatedValues = fields.join("\t");
+        return tabSeparatedValues;
+    },
+
+    handleBeforeCopyEvent: function(event)
+    {
+        if (this.selectedNode && window.getSelection().isCollapsed)
+            event.preventDefault();
+    },
+
+    handleCopyEvent: function(event)
+    {
+        if (!this.selectedNode || !window.getSelection().isCollapsed)
+            return;
+
+        var copyText = this._copyTextForDataGridNode(this.selectedNode);
+        event.clipboardData.setData("text/plain", copyText);
+        event.stopPropagation();
+        event.preventDefault();
+    },
+
+    _copyRow: function(target)
+    {
+        var gridNode = this.dataGridNodeFromNode(target);
+        if (!gridNode)
+            return;
+
+        var copyText = this._copyTextForDataGridNode(gridNode);
+        InspectorFrontendHost.copyText(copyText);
+    },
+
+    get resizeMethod()
+    {
+        if (typeof this._resizeMethod === "undefined")
+            return WebInspector.DataGrid.ResizeMethod.Nearest;
+        return this._resizeMethod;
+    },
+
+    set resizeMethod(method)
+    {
+        this._resizeMethod = method;
+    },
+
+    _startResizerDragging: function(event)
+    {
+        if (event.button !== 0 || event.ctrlKey)
+            return;
+
+        this._currentResizer = event.target;
+        if (!this._currentResizer.rightNeighboringColumnID)
+            return;
+
+        WebInspector.elementDragStart(this._currentResizer, this._resizerDragging.bind(this),
+            this._endResizerDragging.bind(this), event, "col-resize");
+    },
+
+    _resizerDragging: function(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        var resizer = this._currentResizer;
+        if (!resizer)
+            return;
+
+        // Constrain the dragpoint to be within the containing div of the
+        // datagrid.
+        var dragPoint = event.clientX - this.element.totalOffsetLeft;
+        // Constrain the dragpoint to be within the space made up by the
+        // column directly to the left and the column directly to the right.
+        var leftCellIndex = resizer.leftNeighboringColumnID;
+        var rightCellIndex = resizer.rightNeighboringColumnID;
+        var firstRowCells = this.headerTableBody.rows[0].cells;
+        var leftEdgeOfPreviousColumn = 0;
+        for (var i = 0; i < leftCellIndex; i++)
+            leftEdgeOfPreviousColumn += firstRowCells[i].offsetWidth;
+
+        // Differences for other resize methods
+        if (this.resizeMethod == WebInspector.DataGrid.ResizeMethod.Last) {
+            rightCellIndex = this.resizers.length;
+        } else if (this.resizeMethod == WebInspector.DataGrid.ResizeMethod.First) {
+            leftEdgeOfPreviousColumn += firstRowCells[leftCellIndex].offsetWidth - firstRowCells[0].offsetWidth;
+            leftCellIndex = 0;
+        }
+
+        var rightEdgeOfNextColumn = leftEdgeOfPreviousColumn + firstRowCells[leftCellIndex].offsetWidth + firstRowCells[rightCellIndex].offsetWidth;
+
+        // Give each column some padding so that they don't disappear.
+        var leftMinimum = leftEdgeOfPreviousColumn + this.ColumnResizePadding;
+        var rightMaximum = rightEdgeOfNextColumn - this.ColumnResizePadding;
+
+        dragPoint = Number.constrain(dragPoint, leftMinimum, rightMaximum);
+
+        resizer.style.left = (dragPoint - this.CenterResizerOverBorderAdjustment) + "px";
+
+        var percentLeftColumn = (((dragPoint - leftEdgeOfPreviousColumn) / this._dataTable.offsetWidth) * 100) + "%";
+        this._headerTableColumnGroup.children[leftCellIndex].style.width = percentLeftColumn;
+        this._dataTableColumnGroup.children[leftCellIndex].style.width = percentLeftColumn;
+
+        var percentRightColumn = (((rightEdgeOfNextColumn - dragPoint) / this._dataTable.offsetWidth) * 100) + "%";
+        this._headerTableColumnGroup.children[rightCellIndex].style.width =  percentRightColumn;
+        this._dataTableColumnGroup.children[rightCellIndex].style.width = percentRightColumn;
+
+        this._positionResizers();
+        event.preventDefault();
+        this.dispatchEventToListeners(WebInspector.DataGrid.Event.DidLayout);
+    },
+
+    _endResizerDragging: function(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        WebInspector.elementDragEnd(event);
+        this._currentResizer = null;
+        this.dispatchEventToListeners(WebInspector.DataGrid.Event.DidLayout);
+    },
+
+    ColumnResizePadding: 10,
+
+    CenterResizerOverBorderAdjustment: 3,
+}
+
+WebInspector.DataGrid.ResizeMethod = {
+    Nearest: "nearest",
+    First: "first",
+    Last: "last"
+}
+
+WebInspector.DataGrid.prototype.__proto__ = WebInspector.Object.prototype;
+
+/**
+ * @constructor
+ * @extends {WebInspector.Object}
+ * @param {boolean=} hasChildren
+ */
+WebInspector.DataGridNode = function(data, hasChildren)
+{
+    this._expanded = false;
+    this._selected = false;
+    this._shouldRefreshChildren = true;
+    this._data = data || {};
+    this.hasChildren = hasChildren || false;
+    this.children = [];
+    this.dataGrid = null;
+    this.parent = null;
+    this.previousSibling = null;
+    this.nextSibling = null;
+    this.disclosureToggleWidth = 10;
+}
+
+WebInspector.DataGridNode.prototype = {
+    selectable: true,
+
+    get element()
+    {
+        if (this._element)
+            return this._element;
+
+        if (!this.dataGrid)
+            return null;
+
+        this._element = document.createElement("tr");
+        this._element._dataGridNode = this;
+
+        if (this.hasChildren)
+            this._element.classList.add("parent");
+        if (this.expanded)
+            this._element.classList.add("expanded");
+        if (this.selected)
+            this._element.classList.add("selected");
+        if (this.revealed)
+            this._element.classList.add("revealed");
+
+        this.createCells();
+        return this._element;
+    },
+
+    createCells: function()
+    {
+        for (var columnIdentifier in this.dataGrid.columns) {
+            var cell = this.createCell(columnIdentifier);
+            this._element.appendChild(cell);
+        }
+    },
+
+    get data()
+    {
+        return this._data;
+    },
+
+    set data(x)
+    {
+        this._data = x || {};
+        this.refresh();
+    },
+
+    get revealed()
+    {
+        if ("_revealed" in this)
+            return this._revealed;
+
+        var currentAncestor = this.parent;
+        while (currentAncestor && !currentAncestor.root) {
+            if (!currentAncestor.expanded) {
+                this._revealed = false;
+                return false;
+            }
+
+            currentAncestor = currentAncestor.parent;
+        }
+
+        this._revealed = true;
+        return true;
+    },
+
+    set hasChildren(x)
+    {
+        if (this._hasChildren === x)
+            return;
+
+        this._hasChildren = x;
+
+        if (!this._element)
+            return;
+
+        if (this._hasChildren)
+        {
+            this._element.classList.add("parent");
+            if (this.expanded)
+                this._element.classList.add("expanded");
+        }
+        else
+        {
+            this._element.classList.remove("parent");
+            this._element.classList.remove("expanded");
+        }
+    },
+
+    get hasChildren()
+    {
+        return this._hasChildren;
+    },
+
+    set revealed(x)
+    {
+        if (this._revealed === x)
+            return;
+
+        this._revealed = x;
+
+        if (this._element) {
+            if (this._revealed)
+                this._element.classList.add("revealed");
+            else
+                this._element.classList.remove("revealed");
+        }
+
+        for (var i = 0; i < this.children.length; ++i)
+            this.children[i].revealed = x && this.expanded;
+    },
+
+    get depth()
+    {
+        if ("_depth" in this)
+            return this._depth;
+        if (this.parent && !this.parent.root)
+            this._depth = this.parent.depth + 1;
+        else
+            this._depth = 0;
+        return this._depth;
+    },
+
+    get leftPadding()
+    {
+        if (typeof(this._leftPadding) === "number")
+            return this._leftPadding;
+        
+        this._leftPadding = this.depth * this.dataGrid.indentWidth;
+        return this._leftPadding;
+    },
+
+    get shouldRefreshChildren()
+    {
+        return this._shouldRefreshChildren;
+    },
+
+    set shouldRefreshChildren(x)
+    {
+        this._shouldRefreshChildren = x;
+        if (x && this.expanded)
+            this.expand();
+    },
+
+    get selected()
+    {
+        return this._selected;
+    },
+
+    set selected(x)
+    {
+        if (x)
+            this.select();
+        else
+            this.deselect();
+    },
+
+    get expanded()
+    {
+        return this._expanded;
+    },
+
+    set expanded(x)
+    {
+        if (x)
+            this.expand();
+        else
+            this.collapse();
+    },
+
+    refresh: function()
+    {
+        if (!this._element || !this.dataGrid)
+            return;
+
+        this._element.removeChildren();
+        this.createCells();
+    },
+
+    updateLayout: function()
+    {
+        // Implemented by subclasses if needed.
+    },
+
+    createCell: function(columnIdentifier)
+    {
+        var cell = document.createElement("td");
+        cell.className = columnIdentifier + "-column";
+
+        var alignment = this.dataGrid.aligned[columnIdentifier];
+        if (alignment)
+            cell.classList.add(alignment);
+
+        var group = this.dataGrid.groups[columnIdentifier];
+        if (group)
+            cell.classList.add("column-group-" + group);
+
+        var div = document.createElement("div");
+        var content = this.createCellContent(columnIdentifier, cell);
+        div.appendChild(content instanceof Node ? content : document.createTextNode(content));
+        cell.appendChild(div);
+
+        if (columnIdentifier === this.dataGrid.disclosureColumnIdentifier) {
+            cell.classList.add("disclosure");
+            if (this.leftPadding)
+                cell.style.setProperty("padding-left", this.leftPadding + "px");
+        }
+
+        return cell;
+    },
+
+    createCellContent: function(columnIdentifier)
+    {
+        return this.data[columnIdentifier];
+    },
+
+    elementWithColumnIdentifier: function(columnIdentifier)
+    {
+        var index = Object.keys(this.dataGrid.columns).indexOf(columnIdentifier);
+        if (index === -1)
+            return null;
+
+        return this._element.children[index];
+    },
+
+    // Share these functions with DataGrid. They are written to work with a DataGridNode this object.
+    appendChild: WebInspector.DataGrid.prototype.appendChild,
+    insertChild: WebInspector.DataGrid.prototype.insertChild,
+    removeChild: WebInspector.DataGrid.prototype.removeChild,
+    removeChildren: WebInspector.DataGrid.prototype.removeChildren,
+    removeChildrenRecursive: WebInspector.DataGrid.prototype.removeChildrenRecursive,
+
+    _recalculateSiblings: function(myIndex)
+    {
+        if (!this.parent)
+            return;
+
+        var previousChild = (myIndex > 0 ? this.parent.children[myIndex - 1] : null);
+
+        if (previousChild) {
+            previousChild.nextSibling = this;
+            this.previousSibling = previousChild;
+        } else
+            this.previousSibling = null;
+
+        var nextChild = this.parent.children[myIndex + 1];
+
+        if (nextChild) {
+            nextChild.previousSibling = this;
+            this.nextSibling = nextChild;
+        } else
+            this.nextSibling = null;
+    },
+
+    collapse: function()
+    {
+        if (this._element)
+            this._element.classList.remove("expanded");
+
+        this._expanded = false;
+
+        for (var i = 0; i < this.children.length; ++i)
+            this.children[i].revealed = false;
+
+        this.dispatchEventToListeners("collapsed");
+    },
+
+    collapseRecursively: function()
+    {
+        var item = this;
+        while (item) {
+            if (item.expanded)
+                item.collapse();
+            item = item.traverseNextNode(false, this, true);
+        }
+    },
+
+    expand: function()
+    {
+        if (!this.hasChildren || this.expanded)
+            return;
+
+        if (this.revealed && !this._shouldRefreshChildren)
+            for (var i = 0; i < this.children.length; ++i)
+                this.children[i].revealed = true;
+
+        if (this._shouldRefreshChildren) {
+            for (var i = 0; i < this.children.length; ++i)
+                this.children[i]._detach();
+
+            this.dispatchEventToListeners("populate");
+
+            if (this._attached) {
+                for (var i = 0; i < this.children.length; ++i) {
+                    var child = this.children[i];
+                    if (this.revealed)
+                        child.revealed = true;
+                    child._attach();
+                }
+            }
+
+            delete this._shouldRefreshChildren;
+        }
+
+        if (this._element)
+            this._element.classList.add("expanded");
+
+        this._expanded = true;
+
+        this.dispatchEventToListeners("expanded");
+    },
+
+    expandRecursively: function()
+    {
+        var item = this;
+        while (item) {
+            item.expand();
+            item = item.traverseNextNode(false, this);
+        }
+    },
+
+    reveal: function()
+    {
+        var currentAncestor = this.parent;
+        while (currentAncestor && !currentAncestor.root) {
+            if (!currentAncestor.expanded)
+                currentAncestor.expand();
+            currentAncestor = currentAncestor.parent;
+        }
+
+        this.element.scrollIntoViewIfNeeded(false);
+
+        this.dispatchEventToListeners("revealed");
+    },
+
+    /**
+     * @param {boolean=} supressSelectedEvent
+     */
+    select: function(supressSelectedEvent)
+    {
+        if (!this.dataGrid || !this.selectable || this.selected)
+            return;
+
+        if (this.dataGrid.selectedNode)
+            this.dataGrid.selectedNode.deselect();
+
+        this._selected = true;
+        this.dataGrid.selectedNode = this;
+
+        if (this._element)
+            this._element.classList.add("selected");
+
+        if (!supressSelectedEvent)
+            this.dataGrid.dispatchEventToListeners(WebInspector.DataGrid.Event.SelectedNodeChanged);
+    },
+
+    revealAndSelect: function()
+    {
+        this.reveal();
+        this.select();
+    },
+
+    /**
+     * @param {boolean=} supressDeselectedEvent
+     */
+    deselect: function(supressDeselectedEvent)
+    {
+        if (!this.dataGrid || this.dataGrid.selectedNode !== this || !this.selected)
+            return;
+
+        this._selected = false;
+        this.dataGrid.selectedNode = null;
+
+        if (this._element)
+            this._element.classList.remove("selected");
+
+        if (!supressDeselectedEvent)
+            this.dataGrid.dispatchEventToListeners(WebInspector.DataGrid.Event.SelectedNodeChanged);
+    },
+
+    traverseNextNode: function(skipHidden, stayWithin, dontPopulate, info)
+    {
+        if (!dontPopulate && this.hasChildren)
+            this.dispatchEventToListeners("populate");
+
+        if (info)
+            info.depthChange = 0;
+
+        var node = (!skipHidden || this.revealed) ? this.children[0] : null;
+        if (node && (!skipHidden || this.expanded)) {
+            if (info)
+                info.depthChange = 1;
+            return node;
+        }
+
+        if (this === stayWithin)
+            return null;
+
+        node = (!skipHidden || this.revealed) ? this.nextSibling : null;
+        if (node)
+            return node;
+
+        node = this;
+        while (node && !node.root && !((!skipHidden || node.revealed) ? node.nextSibling : null) && node.parent !== stayWithin) {
+            if (info)
+                info.depthChange -= 1;
+            node = node.parent;
+        }
+
+        if (!node)
+            return null;
+
+        return (!skipHidden || node.revealed) ? node.nextSibling : null;
+    },
+
+    traversePreviousNode: function(skipHidden, dontPopulate)
+    {
+        var node = (!skipHidden || this.revealed) ? this.previousSibling : null;
+        if (!dontPopulate && node && node.hasChildren)
+            node.dispatchEventToListeners("populate");
+
+        while (node && ((!skipHidden || (node.revealed && node.expanded)) ? node.children.lastValue : null)) {
+            if (!dontPopulate && node.hasChildren)
+                node.dispatchEventToListeners("populate");
+            node = ((!skipHidden || (node.revealed && node.expanded)) ? node.children.lastValue : null);
+        }
+
+        if (node)
+            return node;
+
+        if (!this.parent || this.parent.root)
+            return null;
+
+        return this.parent;
+    },
+
+    isEventWithinDisclosureTriangle: function(event)
+    {
+        if (!this.hasChildren)
+            return false;
+        var cell = event.target.enclosingNodeOrSelfWithNodeName("td");
+        if (!cell.classList.contains("disclosure"))
+            return false;
+        
+        var left = cell.totalOffsetLeft + this.leftPadding;
+        return event.pageX >= left && event.pageX <= left + this.disclosureToggleWidth;
+    },
+
+    _attach: function()
+    {
+        if (!this.dataGrid || this._attached)
+            return;
+
+        this._attached = true;
+
+        var nextElement = null;
+
+        var previousGridNode = this.traversePreviousNode(true, true);
+        if (previousGridNode && previousGridNode.element.parentNode)
+            nextElement = previousGridNode.element.nextSibling;
+        else if (!previousGridNode)
+            nextElement = this.dataGrid.dataTableBody.firstChild;
+
+        // If there is no next grid node, then append before the last child since the last child is the filler row.
+        console.assert(this.dataGrid.dataTableBody.lastChild.classList.contains("filler"));
+        if (!nextElement)
+            nextElement = this.dataGrid.dataTableBody.lastChild;
+
+        this.dataGrid.dataTableBody.insertBefore(this.element, nextElement);
+
+        if (this.expanded)
+            for (var i = 0; i < this.children.length; ++i)
+                this.children[i]._attach();
+    },
+
+    _detach: function()
+    {
+        if (!this._attached)
+            return;
+
+        this._attached = false;
+
+        if (this._element && this._element.parentNode)
+            this._element.parentNode.removeChild(this._element);
+
+        for (var i = 0; i < this.children.length; ++i)
+            this.children[i]._detach();
+    },
+
+    savePosition: function()
+    {
+        if (this._savedPosition)
+            return;
+
+        if (!this.parent)
+            throw("savePosition: Node must have a parent.");
+        this._savedPosition = {
+            parent: this.parent,
+            index: this.parent.children.indexOf(this)
+        };
+    },
+
+    restorePosition: function()
+    {
+        if (!this._savedPosition)
+            return;
+
+        if (this.parent !== this._savedPosition.parent)
+            this._savedPosition.parent.insertChild(this, this._savedPosition.index);
+
+        delete this._savedPosition;
+    }
+}
+
+WebInspector.DataGridNode.prototype.__proto__ = WebInspector.Object.prototype;
+
+/**
+ * @constructor
+ * @extends {WebInspector.DataGridNode}
+ */
+WebInspector.CreationDataGridNode = function(data, hasChildren)
+{
+    WebInspector.DataGridNode.call(this, data, hasChildren);
+    this.isCreationNode = true;
+}
+
+WebInspector.CreationDataGridNode.prototype = {
+    makeNormal: function()
+    {
+        delete this.isCreationNode;
+        delete this.makeNormal;
+    }
+}
+
+WebInspector.CreationDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseContentView.css b/Source/WebInspectorUI/UserInterface/DatabaseContentView.css
new file mode 100644
index 000000000..d2de0f614
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DatabaseContentView.css
@@ -0,0 +1,108 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.storage-view {    
+    /* Added so fonts look good */
+    font-family: Menlo, monospace;
+    font-size: 11px;
+}
+
+.storage-view .data-grid {
+    border: none;
+    height: 100%;
+}
+
+.storage-view .storage-table-error {
+    color: rgb(66%, 33%, 33%);
+}
+
+.storage-view.query {
+    padding: 2px 0;
+    overflow-y: overlay;
+    overflow-x: hidden;
+    -webkit-text-size-adjust: auto;
+}
+
+.database-query-prompt {
+    position: relative;
+    padding: 4px 22px 4px 11px;
+    min-height: 16px;
+    white-space: pre-wrap;
+    -webkit-user-modify: read-write-plaintext-only;
+    -webkit-user-select: text;
+    
+    /* Added to remove outline */
+    outline: none;
+}
+
+.database-user-query::before, .database-query-prompt::before, .database-query-result::before {
+    position: absolute;
+    display: block;
+    z-index: 1;
+    content: "";
+    left: 4px;
+    top: 10px;
+    width: 10px;
+    height: 10px;
+    margin-top: -5px;
+    -webkit-user-select: none;
+}
+
+.database-query-prompt::before {
+    background-image: url(Images/UserInputPrompt.pdf);
+}
+
+.database-user-query {
+    position: relative;
+    border-bottom: 1px solid rgb(245, 245, 245);
+    padding: 4px 22px 4px 18px;
+    min-height: 16px;
+}
+
+.database-user-query::before {
+    background-image: url(Images/UserInputPromptPrevious.pdf);
+}
+
+.database-query-text {
+    color: rgb(0, 128, 255);
+    -webkit-user-select: text;
+}
+
+.database-query-result {
+    position: relative;
+    padding: 4px 0 1px 18px;
+    min-height: 16px;
+    margin-left: -18px;
+}
+
+.database-query-result.error {
+    color: red;
+    -webkit-user-select: text;
+}
+
+.database-query-result.error::before {
+    background-image: url(Images/ErrorSmall.pdf);
+    background-size: 10px 10px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseContentView.js b/Source/WebInspectorUI/UserInterface/DatabaseContentView.js
new file mode 100644
index 000000000..3be676d67
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DatabaseContentView.js
@@ -0,0 +1,179 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseContentView = function(representedObject)
+{
+    WebInspector.ContentView.call(this, representedObject);
+
+    this.database = representedObject;
+
+    this.element.classList.add("storage-view");
+    this.element.classList.add("query");
+    this.element.classList.add("monospace");
+
+    this._promptElement = document.createElement("div");
+    this._promptElement.className = "database-query-prompt";
+    this.element.appendChild(this._promptElement);
+
+    this.prompt = new WebInspector.ConsolePrompt(this, "text/x-sql");
+    this._promptElement.appendChild(this.prompt.element);
+
+    this.element.addEventListener("click", this._messagesClicked.bind(this), true);
+}
+
+WebInspector.DatabaseContentView.Event = {
+    SchemaUpdated: "SchemaUpdated"
+}
+
+WebInspector.DatabaseContentView.prototype = {
+    constructor: WebInspector.DatabaseContentView,
+
+    shown: function()
+    {
+        this.prompt.shown();
+    },
+
+    updateLayout: function()
+    {
+        this.prompt.updateLayout();
+
+        var results = this.element.querySelectorAll(".database-query-result");
+        for (var i = 0; i < results.length; ++i) {
+            var resultElement = results[i];
+            if (resultElement.dataGrid)
+                resultElement.dataGrid.updateLayout();
+        }
+    },
+
+    _messagesClicked: function()
+    {
+        this.prompt.focus();
+    },
+    
+    consolePromptCompletionsNeeded: function(prompt, defaultCompletions, base, prefix, suffix)
+    {
+        var results = [];
+
+        prefix = prefix.toLowerCase();
+
+        function accumulateMatches(textArray)
+        {
+            for (var i = 0; i < textArray.length; ++i) {
+                var lowerCaseText = textArray[i].toLowerCase();
+                if (lowerCaseText.startsWith(prefix))
+                    results.push(textArray[i]);
+            }
+        }
+
+        function tableNamesCallback(tableNames)
+        {
+            accumulateMatches(tableNames);
+            accumulateMatches(["SELECT", "FROM", "WHERE", "LIMIT", "DELETE FROM", "CREATE", "DROP", "TABLE", "INDEX", "UPDATE", "INSERT INTO", "VALUES"]);
+
+            this.prompt.updateCompletions(results, " ");
+        }
+
+        this.database.getTableNames(tableNamesCallback.bind(this));
+    },
+
+    consolePromptTextCommitted: function(prompt, query)
+    {
+        this.database.executeSQL(query, this._queryFinished.bind(this, query), this._queryError.bind(this, query));
+    },
+
+    _queryFinished: function(query, columnNames, values)
+    {
+        var dataGrid = WebInspector.DataGrid.createSortableDataGrid(columnNames, values);
+        var trimmedQuery = query.trim();
+
+        if (dataGrid) {
+            dataGrid.element.classList.add("inline");
+            this._appendViewQueryResult(trimmedQuery, dataGrid);
+            dataGrid.autoSizeColumns(5);
+        }
+
+        if (trimmedQuery.match(/^create /i) || trimmedQuery.match(/^drop table /i))
+            this.dispatchEventToListeners(WebInspector.DatabaseContentView.Event.SchemaUpdated, this.database);
+    },
+
+    _queryError: function(query, error)
+    {
+        if (error.message)
+            var message = error.message;
+        else if (error.code == 2)
+            var message = WebInspector.UIString("Database no longer has expected version.");
+        else
+            var message = WebInspector.UIString("An unexpected error %s occurred.").format(error.code);
+
+        this._appendErrorQueryResult(query, message);
+    },
+
+    /**
+     * @param {string} query
+     * @param {WebInspector.View} view
+     */
+    _appendViewQueryResult: function(query, view)
+    {
+        var resultElement = this._appendQueryResult(query);
+
+        // Add our DataGrid with the results to the database query result div.
+        resultElement.dataGrid = view;
+        resultElement.appendChild(view.element);
+
+        this._promptElement.scrollIntoView(false);
+    },
+
+    /**
+     * @param {string} query
+     * @param {string} errorText
+     */
+    _appendErrorQueryResult: function(query, errorText)
+    {
+        var resultElement = this._appendQueryResult(query);
+        resultElement.classList.add("error")
+        resultElement.textContent = errorText;
+
+        this._promptElement.scrollIntoView(false);
+    },
+
+    _appendQueryResult: function(query)
+    {
+        var element = document.createElement("div");
+        element.className = "database-user-query";
+        this.element.insertBefore(element, this._promptElement);
+
+        var commandTextElement = document.createElement("span");
+        commandTextElement.className = "database-query-text";
+        commandTextElement.textContent = query;
+        element.appendChild(commandTextElement);
+
+        var resultElement = document.createElement("div");
+        resultElement.className = "database-query-result";
+        element.appendChild(resultElement);
+        return resultElement;
+    }
+}
+
+WebInspector.DatabaseContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseHostTreeElement.js b/Source/WebInspectorUI/UserInterface/DatabaseHostTreeElement.js
new file mode 100644
index 000000000..5a52d2013
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DatabaseHostTreeElement.js
@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseHostTreeElement = function(host)
+{
+    WebInspector.StorageTreeElement.call(this, WebInspector.FolderTreeElement.FolderIconStyleClassName, WebInspector.displayNameForHost(host), null);
+
+    this._host = host;
+
+    this.hasChildren = true;
+};
+
+WebInspector.DatabaseHostTreeElement.prototype = {
+    constructor: WebInspector.DatabaseHostTreeElement,
+
+    // Public
+
+    get name()
+    {
+        return WebInspector.displayNameForHost(this._host);
+    },
+
+    get categoryName()
+    {
+        return WebInspector.UIString("Databases");
+    }
+};
+
+WebInspector.DatabaseHostTreeElement.prototype.__proto__ = WebInspector.StorageTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseIcon.css b/Source/WebInspectorUI/UserInterface/DatabaseIcon.css
new file mode 100644
index 000000000..d0dcdbc42
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DatabaseIcon.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.database-icon .icon {
+    content: -webkit-image-set(url(Images/Database.png) 1x, url(Images/Database@2x.png) 2x);
+}
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseObject.js b/Source/WebInspectorUI/UserInterface/DatabaseObject.js
new file mode 100644
index 000000000..c3693e3a5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DatabaseObject.js
@@ -0,0 +1,123 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseObject = function(id, host, name, version)
+{
+    this._id = id;
+    this._host = host ? host : WebInspector.UIString("Local File");
+    this._name = name;
+    this._version = version;
+};
+
+WebInspector.DatabaseObject.prototype = {
+    constructor: WebInspector.DatabaseObject,
+    
+    get id()
+    {
+        return this._id;
+    },
+
+    get host()
+    {
+        return this._host;
+    },
+
+    get name()
+    {
+        return this._name;
+    },
+    
+    get version()
+    {
+        return this._version;
+    },
+    
+    getTableNames: function(callback)
+    {
+        function sortingCallback(error, names)
+        {
+            if (!error)
+                callback(names.sort());
+        }
+        
+        DatabaseAgent.getDatabaseTableNames(this._id, sortingCallback);
+    },
+
+    executeSQL: function(query, successCallback, errorCallback)
+    {
+        function queryCallback(columnNames, values, sqlError)
+        {
+            if (sqlError) {
+                var message;
+
+                switch (sqlError.code) {
+                case SQLException.VERSION_ERR:
+                    message = WebInspector.UIString("Database no longer has expected version.");
+                    break;
+                case SQLException.TOO_LARGE_ERR:
+                    message = WebInspector.UIString("Data returned from the database is too large.");
+                    break;
+                default:
+                    message = WebInspector.UIString("An unexpected error occurred.");
+                    break;
+                }
+
+                errorCallback(message);
+                return;
+            }
+
+            successCallback(columnNames, values);
+        }
+
+        function callback(error, result)
+        {
+            if (error) {
+                errorCallback(WebInspector.UIString("An unexpected error occurred."));
+                return;
+            }
+
+            // COMPATIBILITY (iOS 6): Newer versions of DatabaseAgent.executeSQL can delay before
+            // sending the results. The version on iOS 6 instead returned a transactionId that
+            // would be used later in the sqlTransactionSucceeded or sqlTransactionFailed events.
+            if ("transactionId" in result) {
+                if (!result.success) {
+                    errorCallback(WebInspector.UIString("An unexpected error occurred."));
+                    return;
+                }
+
+                WebInspector.DatabaseObserver._callbacks[result.transactionId] = queryCallback;
+                return;
+            }
+
+            queryCallback(result.columnNames, result.values, result.sqlError);
+        }
+
+        // COMPATIBILITY (iOS 6): Since the parameters of the DatabaseAgent.executeSQL callback differ
+        // we need the result object to lookup parameters by name.
+        callback.expectsResultObject = true;
+
+        DatabaseAgent.executeSQL(this._id, query, callback);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseObserver.js b/Source/WebInspectorUI/UserInterface/DatabaseObserver.js
new file mode 100644
index 000000000..d389b6a6f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DatabaseObserver.js
@@ -0,0 +1,70 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseObserver = function()
+{
+    WebInspector.Object.call(this);
+};
+
+WebInspector.DatabaseObserver._callbacks = {};
+
+WebInspector.DatabaseObserver.prototype = {
+    constructor: WebInspector.DatabaseObserver,
+
+    // Events defined by the "Database" domain (see WebCore/inspector/Inspector.json).
+
+    addDatabase: function(database)
+    {
+        WebInspector.storageManager.databaseWasAdded(database.id, database.domain, database.name, database.version);
+    },
+
+    // COMPATIBILITY (iOS 6): This event was removed in favor of a more async DatabaseAgent.executeSQL.
+    sqlTransactionSucceeded: function(transactionId, columnNames, values)
+    {
+        if (!WebInspector.DatabaseObserver._callbacks[transactionId])
+            return;
+
+        var callback = WebInspector.DatabaseObserver._callbacks[transactionId];
+        delete WebInspector.DatabaseObserver._callbacks[transactionId];
+
+        if (callback)
+            callback(columnNames, values, null);
+    },
+
+    // COMPATIBILITY (iOS 6): This event was removed in favor of a more async DatabaseAgent.executeSQL.
+    sqlTransactionFailed: function(transactionId, sqlError)
+    {
+        if (!WebInspector.DatabaseObserver._callbacks[transactionId])
+            return;
+
+        var callback = WebInspector.DatabaseObserver._callbacks[transactionId];
+        delete WebInspector.DatabaseObserver._callbacks[transactionId];
+
+        if (callback)
+            callback(null, null, sqlError);
+    }
+};
+
+WebInspector.DatabaseObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseTableContentView.css b/Source/WebInspectorUI/UserInterface/DatabaseTableContentView.css
new file mode 100644
index 000000000..b25a67390
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DatabaseTableContentView.css
@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.database-table > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseTableContentView.js b/Source/WebInspectorUI/UserInterface/DatabaseTableContentView.js
new file mode 100644
index 000000000..4eab7127d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DatabaseTableContentView.js
@@ -0,0 +1,94 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseTableContentView = function(representedObject)
+{
+    WebInspector.ContentView.call(this, representedObject);
+    
+    this.element.classList.add(WebInspector.DatabaseTableContentView.StyleClassName);
+    
+    this.update();
+};
+
+WebInspector.DatabaseTableContentView.StyleClassName = "database-table";
+
+WebInspector.DatabaseTableContentView.prototype = {
+    constructor: WebInspector.DatabaseTableContentView,
+
+    // Public
+
+    update: function()
+    {
+        this.representedObject.database.executeSQL("SELECT * FROM \"" + this._escapeTableName(this.representedObject.name) + "\"", this._queryFinished.bind(this), this._queryError.bind(this));
+    },
+
+    updateLayout: function()
+    {
+        if (this._dataGrid)
+            this._dataGrid.updateLayout();
+    },
+
+    get scrollableElements()
+    {
+        if (!this._dataGrid)
+            return [];
+        return [this._dataGrid.scrollContainer];
+    },
+
+    // Private
+
+    _escapeTableName: function(name)
+    {
+        return name.replace(/\"/g, "\"\"");
+    },
+
+    _queryFinished: function(columnNames, values)
+    {
+        // It would be nice to do better than creating a new data grid each time the table is updated, but the table updating
+        // doesn't happen very frequently. Additionally, using DataGrid's createSortableDataGrid makes our code much cleaner and it knows
+        // how to sort arbitrary columns.
+        this.element.removeChildren();
+
+        this._dataGrid = new WebInspector.DataGrid.createSortableDataGrid(columnNames, values);
+        if (!this._dataGrid || !this._dataGrid.element) {
+            // If the DataGrid is empty, then we were returned a table with no columns. This can happen when a table has
+            // no data, the SELECT query only returns column names when there is data.
+            this.element.removeChildren();
+            this.element.appendChild(WebInspector.createMessageTextView(WebInspector.UIString("The “%s�\ntable is empty.").format(this.representedObject.name), false));
+            return;
+        }
+
+        this.element.appendChild(this._dataGrid.element);
+        this._dataGrid.updateLayout();
+    },
+
+    _queryError: function(error)
+    {
+        this.element.removeChildren();
+        this.element.appendChild(WebInspector.createMessageTextView(WebInspector.UIString("An error occured trying to\nread the “%s� table.").format(this.representedObject.name), true));
+    }
+};
+
+WebInspector.DatabaseTableContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseTableIcon.css b/Source/WebInspectorUI/UserInterface/DatabaseTableIcon.css
new file mode 100644
index 000000000..15408948e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DatabaseTableIcon.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.database-table-icon .icon {
+    content: -webkit-image-set(url(Images/DatabaseTable.png) 1x, url(Images/DatabaseTable@2x.png) 2x);
+}
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseTableObject.js b/Source/WebInspectorUI/UserInterface/DatabaseTableObject.js
new file mode 100644
index 000000000..273683981
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DatabaseTableObject.js
@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseTableObject = function(name, database)
+{
+    console.assert(database instanceof WebInspector.DatabaseObject);
+    
+    this._name = name;
+    this._database = database;
+};
+
+WebInspector.DatabaseTableObject.prototype = {
+    constructor: WebInspector.DatabaseTableObject,
+    
+    get name()
+    {
+        return this._name;
+    },
+    
+    get database()
+    {
+        return this._database;
+    }
+};
+
+WebInspector.DatabaseTableObject.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseTableTreeElement.js b/Source/WebInspectorUI/UserInterface/DatabaseTableTreeElement.js
new file mode 100644
index 000000000..b4a5d4696
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DatabaseTableTreeElement.js
@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseTableTreeElement = function(representedObject)
+{
+    console.assert(representedObject instanceof WebInspector.DatabaseTableObject);
+
+    WebInspector.GeneralTreeElement.call(this, WebInspector.DatabaseTableTreeElement.DatabaseTableIconStyleClassName, representedObject.name, null, representedObject, false);
+
+    this.small = true;
+};
+
+WebInspector.DatabaseTableTreeElement.DatabaseTableIconStyleClassName = "database-table-icon";
+
+WebInspector.DatabaseTableTreeElement.prototype = {
+    constructor: WebInspector.DatabaseTableTreeElement
+};
+
+WebInspector.DatabaseTableTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseTreeElement.js b/Source/WebInspectorUI/UserInterface/DatabaseTreeElement.js
new file mode 100644
index 000000000..cb4799e9e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DatabaseTreeElement.js
@@ -0,0 +1,75 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseTreeElement = function(representedObject)
+{
+    console.assert(representedObject instanceof WebInspector.DatabaseObject);
+
+    WebInspector.GeneralTreeElement.call(this, WebInspector.DatabaseTreeElement.DatabaseIconStyleClassName, representedObject.name, null, representedObject, true);
+
+    this.small = true;
+    this.hasChildren = false;
+
+    // Since we are initially telling the tree element we don't have any children, make sure that we try to populate
+    // the tree element (which will get a list of tables) when the element is created.
+    this.onpopulate();
+};
+
+WebInspector.DatabaseTreeElement.DatabaseIconStyleClassName = "database-icon";
+
+WebInspector.DatabaseTreeElement.prototype = {
+    constructor: WebInspector.DatabaseTreeElement,
+
+    // Overrides from TreeElement (Private)
+
+    oncollapse: function()
+    {
+        this.shouldRefreshChildren = true;
+    },
+
+    onpopulate: function()
+    {
+        if (this.children.length && !this.shouldRefreshChildren)
+            return;
+
+        this.shouldRefreshChildren = false;
+
+        this.removeChildren();
+
+        function tableNamesCallback(tableNames)
+        {
+            for (var i = 0; i < tableNames.length; ++i) {
+                var databaseTable = new WebInspector.DatabaseTableObject(tableNames[i], this.representedObject);
+                this.appendChild(new WebInspector.DatabaseTableTreeElement(databaseTable));
+            }
+
+            this.hasChildren = tableNames.length;
+        }
+
+        this.representedObject.getTableNames(tableNamesCallback.bind(this));
+    }
+};
+
+WebInspector.DatabaseTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DebuggerManager.js b/Source/WebInspectorUI/UserInterface/DebuggerManager.js
new file mode 100644
index 000000000..dafb8eaed
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DebuggerManager.js
@@ -0,0 +1,644 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DebuggerManager = function()
+{
+    WebInspector.Object.call(this);
+
+    DebuggerAgent.enable();
+
+    WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisplayLocationDidChange, this._breakpointDisplayLocationDidChange, this);
+    WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._breakpointDisabledStateDidChange, this);
+    WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.ConditionDidChange, this._breakpointConditionDidChange, this);
+
+    window.addEventListener("pagehide", this._inspectorClosing.bind(this));
+
+    this._allExceptionsBreakpointEnabledSetting = new WebInspector.Setting("break-on-all-exceptions", false);
+    this._allUncaughtExceptionsBreakpointEnabledSetting = new WebInspector.Setting("break-on-all-uncaught-exceptions", false);
+
+    var specialBreakpointLocation = new WebInspector.SourceCodeLocation(null, Infinity, Infinity);
+
+    this._allExceptionsBreakpoint = new WebInspector.Breakpoint(specialBreakpointLocation, !this._allExceptionsBreakpointEnabledSetting.value);
+    this._allExceptionsBreakpoint.resolved = true;
+
+    this._allUncaughtExceptionsBreakpoint = new WebInspector.Breakpoint(specialBreakpointLocation, !this._allUncaughtExceptionsBreakpointEnabledSetting.value);
+
+    this._breakpoints = [];
+    this._breakpointURLMap = {};
+    this._breakpointScriptIdentifierMap = {};
+    this._breakpointIdMap = {};
+
+    this._scriptIdMap = {};
+    this._scriptURLMap = {};
+
+    this._breakpointsSetting = new WebInspector.Setting("breakpoints", []);
+    this._breakpointsEnabledSetting = new WebInspector.Setting("breakpoints-enabled", true);
+
+    DebuggerAgent.setBreakpointsActive(this._breakpointsEnabledSetting.value);
+
+    this._updateBreakOnExceptionsState();
+
+    var savedBreakpoints = this._breakpointsSetting.value;
+    for (var i = 0; i < savedBreakpoints.length; ++i) {
+        var breakpoint = new WebInspector.Breakpoint(savedBreakpoints[i]);
+        this.addBreakpoint(breakpoint, true);
+    }
+};
+
+WebInspector.DebuggerManager.Event = {
+    BreakpointAdded: "debugger-manager-breakpoint-added",
+    BreakpointRemoved: "debugger-manager-breakpoint-removed",
+    BreakpointMoved: "debugger-manager-breakpoint-moved",
+    Paused: "debugger-manager-paused",
+    Resumed: "debugger-manager-resumed",
+    CallFramesDidChange: "debugger-manager-call-frames-did-change",
+    ActiveCallFrameDidChange: "debugger-manager-active-call-frame-did-change",
+    ScriptAdded: "debugger-manager-script-added",
+    ScriptsCleared: "debugger-manager-scripts-cleared"
+};
+
+WebInspector.DebuggerManager.prototype = {
+    constructor: WebInspector.DebuggerManager,
+
+    // Public
+
+    get breakpointsEnabled()
+    {
+        return this._breakpointsEnabledSetting.value;
+    },
+
+    set breakpointsEnabled(enabled)
+    {
+        if (this._breakpointsEnabled === enabled)
+            return;
+
+        this._breakpointsEnabledSetting.value = enabled;
+
+        this._allExceptionsBreakpoint.dispatchEventToListeners(WebInspector.Breakpoint.Event.ResolvedStateDidChange);
+        this._allUncaughtExceptionsBreakpoint.dispatchEventToListeners(WebInspector.Breakpoint.Event.ResolvedStateDidChange);
+
+        for (var i = 0; i < this._breakpoints.length; ++i)
+            this._breakpoints[i].dispatchEventToListeners(WebInspector.Breakpoint.Event.ResolvedStateDidChange);
+
+        DebuggerAgent.setBreakpointsActive(enabled);
+
+        this._updateBreakOnExceptionsState();
+    },
+
+    get paused()
+    {
+        return this._paused;
+    },
+
+    get callFrames()
+    {
+        return this._callFrames;
+    },
+
+    get activeCallFrame()
+    {
+        return this._activeCallFrame;
+    },
+
+    set activeCallFrame(callFrame)
+    {
+        if (callFrame === this._activeCallFrame)
+            return;
+
+        this._activeCallFrame = callFrame || null;
+
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange);
+    },
+
+    pause: function()
+    {
+        DebuggerAgent.pause();
+    },
+
+    resume: function()
+    {
+        DebuggerAgent.resume();
+    },
+
+    stepOver: function()
+    {
+        DebuggerAgent.stepOver();
+    },
+
+    stepInto: function()
+    {
+        DebuggerAgent.stepInto();
+    },
+
+    stepOut: function()
+    {
+        DebuggerAgent.stepOut();
+    },
+
+    get allExceptionsBreakpoint()
+    {
+        return this._allExceptionsBreakpoint;
+    },
+
+    get allUncaughtExceptionsBreakpoint()
+    {
+        return this._allUncaughtExceptionsBreakpoint;
+    },
+
+    get breakpoints()
+    {
+        return this._breakpoints;
+    },
+
+    breakpointsForSourceCode: function(sourceCode)
+    {
+        console.assert(sourceCode instanceof WebInspector.Resource || sourceCode instanceof WebInspector.Script);
+
+        if (sourceCode instanceof WebInspector.SourceMapResource) {
+            var mappedResourceBreakpoints = [];
+            var originalSourceCodeBreakpoints = this.breakpointsForSourceCode(sourceCode.sourceMap.originalSourceCode);
+            return originalSourceCodeBreakpoints.filter(function(breakpoint) {
+                return breakpoint.sourceCodeLocation.displaySourceCode === sourceCode;
+            });
+        }
+
+        if (sourceCode.url in this._breakpointURLMap) {
+            var urlBreakpoint = this._breakpointURLMap[sourceCode.url] || [];
+            this._associateBreakpointsWithSourceCode(urlBreakpoint, sourceCode);
+            return urlBreakpoint;
+        }
+
+        if (sourceCode instanceof WebInspector.Script && sourceCode.id in this._breakpointScriptIdentifierMap) {
+            var scriptIdentifierBreakpoints = this._breakpointScriptIdentifierMap[sourceCode.id] || [];
+            this._associateBreakpointsWithSourceCode(scriptIdentifierBreakpoints, sourceCode);
+            return scriptIdentifierBreakpoints;
+        }
+
+        return [];
+    },
+
+    scriptForIdentifier: function(id)
+    {
+        return this._scriptIdMap[id] || null;
+    },
+
+    scriptsForURL: function(url)
+    {
+        // FIXME: This may not be safe. A Resource's URL may differ from a Script's URL.
+        return this._scriptURLMap[url] || [];
+    },
+
+    addBreakpoint: function(breakpoint, skipEventDispatch)
+    {
+        console.assert(breakpoint);
+        if (!breakpoint)
+            return;
+
+        if (breakpoint.url) {
+            var urlBreakpoints = this._breakpointURLMap[breakpoint.url];
+            if (!urlBreakpoints)
+                urlBreakpoints = this._breakpointURLMap[breakpoint.url] = [];
+            urlBreakpoints.push(breakpoint);
+        }
+
+        if (breakpoint.scriptIdentifier) {
+            var scriptIdentifierBreakpoints = this._breakpointScriptIdentifierMap[breakpoint.scriptIdentifier];
+            if (!scriptIdentifierBreakpoints)
+                scriptIdentifierBreakpoints = this._breakpointScriptIdentifierMap[breakpoint.scriptIdentifier] = [];
+            scriptIdentifierBreakpoints.push(breakpoint);
+        }
+
+        this._breakpoints.push(breakpoint);
+
+        if (!breakpoint.disabled)
+            this._setBreakpoint(breakpoint);
+
+        if (!skipEventDispatch)
+            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.BreakpointAdded, {breakpoint: breakpoint});
+    },
+
+    removeBreakpoint: function(breakpoint)
+    {
+        console.assert(breakpoint);
+        if (!breakpoint)
+            return;
+
+        console.assert(this.isBreakpointRemovable(breakpoint));
+        if (!this.isBreakpointRemovable(breakpoint))
+            return;
+
+        this._breakpoints.remove(breakpoint);
+
+        if (breakpoint.id)
+            this._removeBreakpoint(breakpoint);
+
+        if (breakpoint.url) {
+            var urlBreakpoints = this._breakpointURLMap[breakpoint.url];
+            if (urlBreakpoints) {
+                urlBreakpoints.remove(breakpoint);
+                if (!urlBreakpoints.length)
+                    delete this._breakpointURLMap[breakpoint.url];
+            }
+        }
+
+        if (breakpoint.scriptIdentifier) {
+            var scriptIdentifierBreakpoints = this._breakpointScriptIdentifierMap[breakpoint.scriptIdentifier];
+            if (scriptIdentifierBreakpoints) {
+                scriptIdentifierBreakpoints.remove(breakpoint);
+                if (!scriptIdentifierBreakpoints.length)
+                    delete this._breakpointScriptIdentifierMap[breakpoint.scriptIdentifier];
+            }
+        }
+
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.BreakpointRemoved, {breakpoint: breakpoint});
+    },
+
+    breakpointResolved: function(breakpointIdentifier, location)
+    {
+        // Called from WebInspector.DebuggerObserver.
+
+        var breakpoint = this._breakpointIdMap[breakpointIdentifier];
+        console.assert(breakpoint);
+        if (!breakpoint)
+            return;
+
+        console.assert(breakpoint.id === breakpointIdentifier);
+
+        breakpoint.resolved = true;
+    },
+
+    reset: function()
+    {
+        // Called from WebInspector.DebuggerObserver.
+
+        var wasPaused = this._paused;
+
+        WebInspector.Script.resetUniqueDisplayNameNumbers();
+
+        this._paused = false;
+        this._scriptIdMap = {};
+        this._scriptURLMap = {};
+
+        this._ignoreBreakpointDisplayLocationDidChangeEvent = true;
+
+        // Mark all the breakpoints as unresolved. They will be reported as resolved when
+        // breakpointResolved is called as the page loads.
+        for (var i = 0; i < this._breakpoints.length; ++i) {
+            var breakpoint = this._breakpoints[i];
+            breakpoint.resolved = false;
+            if (breakpoint.sourceCodeLocation.sourceCode)
+                breakpoint.sourceCodeLocation.sourceCode = null;
+        }
+
+        delete this._ignoreBreakpointDisplayLocationDidChangeEvent;
+
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ScriptsCleared);
+
+        if (wasPaused)
+            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.Resumed);
+    },
+
+    debuggerDidPause: function(callFramesPayload)
+    {
+        // Called from WebInspector.DebuggerObserver.
+
+        if (this._delayedResumeTimeout) {
+            clearTimeout(this._delayedResumeTimeout);
+            delete this._delayedResumeTimeout;
+        }
+
+        var wasStillPaused = this._paused;
+
+        this._paused = true;
+        this._callFrames = [];
+
+        for (var i = 0; i < callFramesPayload.length; ++i) {
+            var callFramePayload = callFramesPayload[i];
+            var sourceCodeLocation = this._sourceCodeLocationFromPayload(callFramePayload.location);
+            if (!sourceCodeLocation)
+                continue;
+            var thisObject = WebInspector.RemoteObject.fromPayload(callFramePayload.this);
+            var scopeChain = this._scopeChainFromPayload(callFramePayload.scopeChain);
+            var callFrame = new WebInspector.CallFrame(callFramePayload.callFrameId, sourceCodeLocation, callFramePayload.functionName, thisObject, scopeChain);
+            this._callFrames.push(callFrame);
+        }
+
+        this._activeCallFrame = this._callFrames[0];
+
+        if (!wasStillPaused)
+            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.Paused);
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.CallFramesDidChange);
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange);
+    },
+
+    debuggerDidResume: function()
+    {
+        // Called from WebInspector.DebuggerObserver.
+
+        function delayedWork()
+        {
+            delete this._delayedResumeTimeout;
+
+            this._paused = false;
+            this._callFrames = null;
+            this._activeCallFrame = null;
+
+            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.Resumed);
+            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.CallFramesDidChange);
+            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange);
+        }
+
+        // We delay clearing the state and firing events so the user interface does not flash
+        // between brief steps or successive breakpoints.
+        this._delayedResumeTimeout = setTimeout(delayedWork.bind(this), 50);
+    },
+
+    scriptDidParse: function(scriptIdentifier, url, isContentScript, startLine, startColumn, endLine, endColumn, sourceMapURL)
+    {
+        // Don't add the script again if it is already known.
+        if (this._scriptIdMap[scriptIdentifier]) {
+            console.assert(this._scriptIdMap[scriptIdentifier].url === url);
+            console.assert(this._scriptIdMap[scriptIdentifier].range.startLine === startLine);
+            console.assert(this._scriptIdMap[scriptIdentifier].range.startColumn === startColumn);
+            console.assert(this._scriptIdMap[scriptIdentifier].range.endLine === endLine);
+            console.assert(this._scriptIdMap[scriptIdentifier].range.endColumn === endColumn);
+            return;
+        }
+
+        var script = new WebInspector.Script(scriptIdentifier, new WebInspector.TextRange(startLine, startColumn, endLine, endColumn), url, isContentScript, sourceMapURL);
+
+        this._scriptIdMap[scriptIdentifier] = script;
+
+        if (script.url) {
+            var scripts = this._scriptURLMap[script.url];
+            if (!scripts)
+                scripts = this._scriptURLMap[script.url] = [];
+            scripts.push(script);
+        }
+
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ScriptAdded, {script: script});
+    },
+
+    isBreakpointRemovable: function(breakpoint)
+    {
+        return breakpoint !== this._allExceptionsBreakpoint && breakpoint !== this._allUncaughtExceptionsBreakpoint;
+    },
+
+    isBreakpointEditable: function(breakpoint)
+    {
+        return this.isBreakpointRemovable(breakpoint);
+    },
+
+    // Private
+
+    _sourceCodeLocationFromPayload: function(payload)
+    {
+        var script = this._scriptIdMap[payload.scriptId];
+        console.assert(script);
+        if (!script)
+            return null;
+
+        return script.createSourceCodeLocation(payload.lineNumber, payload.columnNumber);
+    },
+
+    _scopeChainFromPayload: function(payload)
+    {
+        var scopeChain = [];
+        for (var i = 0; i < payload.length; ++i)
+            scopeChain.push(this._scopeChainNodeFromPayload(payload[i]));
+        return scopeChain;
+    },
+
+    _scopeChainNodeFromPayload: function(payload)
+    {
+        var type = null;
+        switch (payload.type) {
+        case "local":
+            type = WebInspector.ScopeChainNode.Type.Local;
+            break;
+        case "global":
+            type = WebInspector.ScopeChainNode.Type.Global;
+            break;
+        case "with":
+            type = WebInspector.ScopeChainNode.Type.With;
+            break;
+        case "closure":
+            type = WebInspector.ScopeChainNode.Type.Closure;
+            break;
+        case "catch":
+            type = WebInspector.ScopeChainNode.Type.Catch;
+            break;
+        default:
+            console.error("Unknown type: " + payload.type);
+        }
+
+        var object = WebInspector.RemoteObject.fromPayload(payload.object);
+        return new WebInspector.ScopeChainNode(type, object);
+    },
+
+    _setBreakpoint: function(breakpoint, callback)
+    {
+        console.assert(!breakpoint.id);
+        console.assert(!breakpoint.disabled);
+
+        if (breakpoint.id || breakpoint.disabled)
+            return;
+
+        function didSetBreakpoint(error, breakpointIdentifier)
+        {
+            if (error)
+                return;
+
+            this._breakpointIdMap[breakpointIdentifier] = breakpoint;
+
+            breakpoint.id = breakpointIdentifier;
+            breakpoint.resolved = true;
+
+            if (typeof callback === "function")
+                callback();
+        }
+
+        // The breakpoint will be resolved again by calling DebuggerAgent, so mark it as unresolved.
+        // If something goes wrong it will stay unresolved and show up as such in the user interface.
+        breakpoint.resolved = false;
+
+        if (breakpoint.url)
+            DebuggerAgent.setBreakpointByUrl(breakpoint.sourceCodeLocation.lineNumber, breakpoint.url, undefined, breakpoint.sourceCodeLocation.columnNumber, breakpoint.condition, didSetBreakpoint.bind(this));
+        else if (breakpoint.scriptIdentifier)
+            DebuggerAgent.setBreakpoint({scriptId: breakpoint.scriptIdentifier, lineNumber: breakpoint.sourceCodeLocation.lineNumber, columnNumber: breakpoint.sourceCodeLocation.columnNumber}, breakpoint.condition, didSetBreakpoint.bind(this));
+    },
+
+    _removeBreakpoint: function(breakpoint, callback)
+    {
+        console.assert(breakpoint.id);
+
+        if (!breakpoint.id)
+            return;
+
+        function didRemoveBreakpoint(error)
+        {
+            delete this._breakpointIdMap[breakpoint.id];
+
+            breakpoint.id = null;
+
+            // Don't reset resolved here since we want to keep disabled breakpoints looking like they
+            // are resolved in the user interface. They will get marked as unresolved in reset.
+
+            if (typeof callback === "function")
+                callback();
+        }
+
+        DebuggerAgent.removeBreakpoint(breakpoint.id, didRemoveBreakpoint.bind(this));
+    },
+
+    _breakpointDisplayLocationDidChange: function(event)
+    {
+        if (this._ignoreBreakpointDisplayLocationDidChangeEvent)
+            return;
+
+        var breakpoint = event.target;
+        if (!breakpoint.id || breakpoint.disabled)
+            return;
+
+        // Remove the breakpoint with its old id.
+        this._removeBreakpoint(breakpoint, breakpointRemoved.bind(this));
+
+        function breakpointRemoved()
+        {
+            // Add the breakpoint at its new lineNumber and get a new id.
+            this._setBreakpoint(breakpoint);
+
+            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.BreakpointMoved, {breakpoint: breakpoint});
+        }
+    },
+
+    _breakpointDisabledStateDidChange: function(event)
+    {
+        var breakpoint = event.target;
+
+        if (breakpoint === this._allExceptionsBreakpoint) {
+            this._allExceptionsBreakpointEnabledSetting.value = !breakpoint.disabled;
+            this._updateBreakOnExceptionsState();
+            return;
+        }
+
+        if (breakpoint === this._allUncaughtExceptionsBreakpoint) {
+            this._allUncaughtExceptionsBreakpointEnabledSetting.value = !breakpoint.disabled;
+            this._updateBreakOnExceptionsState();
+            return;
+        }
+
+        if (breakpoint.disabled)
+            this._removeBreakpoint(breakpoint);
+        else
+            this._setBreakpoint(breakpoint);
+    },
+
+    _breakpointConditionDidChange: function(event)
+    {
+        var breakpoint = event.target;
+        if (breakpoint.disabled)
+            return;
+
+        console.assert(this.isBreakpointEditable(breakpoint));
+        if (!this.isBreakpointEditable(breakpoint))
+            return;
+
+        // Remove the breakpoint with its old id.
+        this._removeBreakpoint(breakpoint, breakpointRemoved.bind(this));
+
+        function breakpointRemoved()
+        {
+            // Add the breakpoint with its new condition and get a new id.
+            this._setBreakpoint(breakpoint);
+        }
+    },
+
+    _updateBreakOnExceptionsState: function()
+    {
+        var state = "none";
+
+        if (this._breakpointsEnabledSetting.value) {
+            if (!this._allExceptionsBreakpoint.disabled)
+                state = "all";
+            else if (!this._allUncaughtExceptionsBreakpoint.disabled)
+                state = "uncaught";
+        }
+
+        switch (state) {
+        case "all":
+            // Mark the uncaught breakpoint as unresolved since "all" includes "uncaught".
+            // That way it is clear in the user interface that the breakpoint is ignored.
+            this._allUncaughtExceptionsBreakpoint.resolved = false;
+            break;
+        case "uncaught":
+        case "none":
+            // Mark the uncaught breakpoint as resolved again.
+            this._allUncaughtExceptionsBreakpoint.resolved = true;
+            break;
+        }
+
+        DebuggerAgent.setPauseOnExceptions(state);
+    },
+
+    _inspectorClosing: function(event)
+    {
+        this._saveBreakpoints();
+    },
+
+    _saveBreakpoints: function()
+    {
+        var savedBreakpoints = [];
+
+        for (var i = 0; i < this._breakpoints.length; ++i) {
+            var breakpoint = this._breakpoints[i];
+
+            // Only breakpoints with URLs can be saved. Breakpoints for transient scripts can't.
+            if (!breakpoint.url)
+                continue;
+
+            savedBreakpoints.push(breakpoint.info);
+        }
+
+        this._breakpointsSetting.value = savedBreakpoints;
+    },
+
+    _associateBreakpointsWithSourceCode: function(breakpoints, sourceCode)
+    {
+        this._ignoreBreakpointDisplayLocationDidChangeEvent = true;
+
+        for (var i = 0; i < breakpoints.length; ++i) {
+            var breakpoint = breakpoints[i];
+            if (breakpoint.sourceCodeLocation.sourceCode === null)
+                breakpoint.sourceCodeLocation.sourceCode = sourceCode;
+            // SourceCodes can be unequal if the SourceCodeLocation is associated with a Script and we are looking at the Resource.
+            console.assert(breakpoint.sourceCodeLocation.sourceCode === sourceCode || breakpoint.sourceCodeLocation.sourceCode.url === sourceCode.url);
+        }
+
+        delete this._ignoreBreakpointDisplayLocationDidChangeEvent;
+    }
+};
+
+WebInspector.DebuggerManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DebuggerObserver.js b/Source/WebInspectorUI/UserInterface/DebuggerObserver.js
new file mode 100644
index 000000000..dff661ed2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DebuggerObserver.js
@@ -0,0 +1,67 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DebuggerObserver = function()
+{
+    WebInspector.Object.call(this);
+};
+
+WebInspector.DebuggerObserver.prototype = {
+    constructor: WebInspector.DebuggerObserver,
+
+    // Events defined by the "Debugger" domain (see WebCore/inspector/Inspector.json).
+
+    globalObjectCleared: function()
+    {
+        WebInspector.debuggerManager.reset();
+    },
+
+    scriptParsed: function(scriptId, url, startLine, startColumn, endLine, endColumn, isContentScript, sourceMapURL, hasSourceURL)
+    {
+        WebInspector.debuggerManager.scriptDidParse(scriptId, url, isContentScript, startLine, startColumn, endLine, endColumn, sourceMapURL);
+    },
+
+    scriptFailedToParse: function(url, scriptSource, startLine, errorLine, errorMessage)
+    {
+        // FIXME: Not implemented.
+    },
+
+    breakpointResolved: function(breakpointId, location)
+    {
+        WebInspector.debuggerManager.breakpointResolved(breakpointId, location);
+    },
+
+    paused: function(callFrames, reason, data)
+    {
+        WebInspector.debuggerManager.debuggerDidPause(callFrames);
+    },
+
+    resumed: function()
+    {
+        WebInspector.debuggerManager.debuggerDidResume();
+    }
+};
+
+WebInspector.DebuggerObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DebuggerSidebarPanel.css b/Source/WebInspectorUI/UserInterface/DebuggerSidebarPanel.css
new file mode 100644
index 000000000..54d283e72
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DebuggerSidebarPanel.css
@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.debugger > .content {
+    top: 22px;
+}
+
+.sidebar > .panel.debugger > .navigation-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/DebuggerSidebarPanel.js b/Source/WebInspectorUI/UserInterface/DebuggerSidebarPanel.js
new file mode 100644
index 000000000..1d92251a8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DebuggerSidebarPanel.js
@@ -0,0 +1,497 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DebuggerSidebarPanel = function()
+{
+    WebInspector.NavigationSidebarPanel.call(this, "debugger", WebInspector.UIString("Debugger"), "Images/NavigationItemBug.pdf", "3", true);
+
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceChanged, this);
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceAdded, this);
+
+    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.CallFramesDidChange, this._debuggerCallFramesDidChange, this);
+    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.BreakpointAdded, this._breakpointAdded, this);
+    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.BreakpointRemoved, this._breakpointRemoved, this);
+    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ScriptAdded, this._scriptAdded, this);
+    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ScriptsCleared, this._scriptsCleared, this);
+    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Paused, this._debuggerDidPause, this);
+    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Resumed, this._debuggerDidResume, this);
+
+    this._pauseOrResumeKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control | WebInspector.KeyboardShortcut.Modifier.Command, "Y", this._debuggerPauseResumeButtonClicked.bind(this));
+    this._stepOverKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.F6, this._debuggerStepOverButtonClicked.bind(this));
+    this._stepIntoKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.F7, this._debuggerStepIntoButtonClicked.bind(this));
+    this._stepOutKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.F8, this._debuggerStepOutButtonClicked.bind(this));
+
+    this._pauseOrResumeAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, WebInspector.KeyboardShortcut.Key.Slash, this._debuggerPauseResumeButtonClicked.bind(this));
+    this._stepOverAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, WebInspector.KeyboardShortcut.Key.SingleQuote, this._debuggerStepOverButtonClicked.bind(this));
+    this._stepIntoAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, WebInspector.KeyboardShortcut.Key.Semicolon, this._debuggerStepIntoButtonClicked.bind(this));
+    this._stepOutAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.Command, WebInspector.KeyboardShortcut.Key.Semicolon, this._debuggerStepOutButtonClicked.bind(this));
+
+    this._navigationBar = new WebInspector.NavigationBar;
+    this.element.appendChild(this._navigationBar.element);
+
+    var toolTip = WebInspector.UIString("Enable all breakpoints");
+    var altToolTip = WebInspector.UIString("Disable all breakpoints");
+
+    this._debuggerBreakpointsButtonItem = new WebInspector.ActivateButtonNavigationItem("debugger-breakpoints", toolTip, altToolTip, "Images/Breakpoints.pdf", 16, 16);
+    this._debuggerBreakpointsButtonItem.activated = WebInspector.debuggerManager.breakpointsEnabled;
+    this._debuggerBreakpointsButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._breakpointsToggleButtonClicked, this);
+    this._navigationBar.addNavigationItem(this._debuggerBreakpointsButtonItem);
+
+    toolTip = WebInspector.UIString("Pause script execution (%s or %s)").format(this._pauseOrResumeKeyboardShortcut.displayName, this._pauseOrResumeAlternateKeyboardShortcut.displayName);
+    altToolTip = WebInspector.UIString("Continue script execution (%s or %s)").format(this._pauseOrResumeKeyboardShortcut.displayName, this._pauseOrResumeAlternateKeyboardShortcut.displayName);
+
+    this._debuggerPauseResumeButtonItem = new WebInspector.ToggleButtonNavigationItem("debugger-pause-resume", toolTip, altToolTip, "Images/Pause.pdf", "Images/Resume.pdf", 16, 16);
+    this._debuggerPauseResumeButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._debuggerPauseResumeButtonClicked, this);
+    this._navigationBar.addNavigationItem(this._debuggerPauseResumeButtonItem);
+
+    this._debuggerStepOverButtonItem = new WebInspector.ButtonNavigationItem("debugger-step-over", WebInspector.UIString("Step over (%s or %s)").format(this._stepOverKeyboardShortcut.displayName, this._stepOverAlternateKeyboardShortcut.displayName), "Images/StepOver.pdf", 16, 16);
+    this._debuggerStepOverButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._debuggerStepOverButtonClicked, this);
+    this._debuggerStepOverButtonItem.enabled = false;
+    this._navigationBar.addNavigationItem(this._debuggerStepOverButtonItem);
+
+    this._debuggerStepIntoButtonItem = new WebInspector.ButtonNavigationItem("debugger-step-into", WebInspector.UIString("Step into (%s or %s)").format(this._stepIntoKeyboardShortcut.displayName, this._stepIntoAlternateKeyboardShortcut.displayName), "Images/StepInto.pdf", 16, 16);
+    this._debuggerStepIntoButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._debuggerStepIntoButtonClicked, this);
+    this._debuggerStepIntoButtonItem.enabled = false;
+    this._navigationBar.addNavigationItem(this._debuggerStepIntoButtonItem);
+
+    this._debuggerStepOutButtonItem = new WebInspector.ButtonNavigationItem("debugger-step-out", WebInspector.UIString("Step out (%s or %s)").format(this._stepOutKeyboardShortcut.displayName, this._stepOutAlternateKeyboardShortcut.displayName), "Images/StepOut.pdf", 16, 16);
+    this._debuggerStepOutButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._debuggerStepOutButtonClicked, this);
+    this._debuggerStepOutButtonItem.enabled = false;
+    this._navigationBar.addNavigationItem(this._debuggerStepOutButtonItem);
+
+    // Add this offset-sections class name so the sticky headers don't overlap the navigation bar.
+    this.element.classList.add(WebInspector.DebuggerSidebarPanel.OffsetSectionsStyleClassName);
+
+    this._allExceptionsBreakpointTreeElement = new WebInspector.BreakpointTreeElement(WebInspector.debuggerManager.allExceptionsBreakpoint, WebInspector.DebuggerSidebarPanel.ExceptionIconStyleClassName, WebInspector.UIString("All Exceptions"));
+    this._allUncaughtExceptionsBreakpointTreeElement = new WebInspector.BreakpointTreeElement(WebInspector.debuggerManager.allUncaughtExceptionsBreakpoint, WebInspector.DebuggerSidebarPanel.ExceptionIconStyleClassName, WebInspector.UIString("All Uncaught Exceptions"));
+
+    this.filterBar.placeholder = WebInspector.UIString("Filter Breakpoint List");
+
+    this._breakpointsContentTreeOutline = this.contentTreeOutline;
+    this._breakpointsContentTreeOutline.onselect = this._treeElementSelected.bind(this);
+    this._breakpointsContentTreeOutline.ondelete = this._breakpointTreeOutlineDeleteTreeElement.bind(this);
+    this._breakpointsContentTreeOutline.oncontextmenu = this._breakpointTreeOutlineContextMenuTreeElement.bind(this);
+
+    this._breakpointsContentTreeOutline.appendChild(this._allExceptionsBreakpointTreeElement);
+    this._breakpointsContentTreeOutline.appendChild(this._allUncaughtExceptionsBreakpointTreeElement);
+
+    var breakpointsRow = new WebInspector.DetailsSectionRow;
+    breakpointsRow.element.appendChild(this._breakpointsContentTreeOutline.element);
+
+    var breakpointsGroup = new WebInspector.DetailsSectionGroup([breakpointsRow]);
+    var breakpointsSection = new WebInspector.DetailsSection("breakpoints", WebInspector.UIString("Breakpoints"), [breakpointsGroup]);
+    this.contentElement.appendChild(breakpointsSection.element);
+
+    this._callStackContentTreeOutline = this.createContentTreeOutline(true);
+    this._callStackContentTreeOutline.onselect = this._treeElementSelected.bind(this);
+
+    this._callStackRow = new WebInspector.DetailsSectionRow(WebInspector.UIString("No Call Frames"));
+    this._callStackRow.showEmptyMessage();
+
+    var callStackGroup = new WebInspector.DetailsSectionGroup([this._callStackRow]);
+    this._callStackSection = new WebInspector.DetailsSection("call-stack", WebInspector.UIString("Call Stack"), [callStackGroup]);
+
+    WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisplayLocationDidChange, this._breakpointDisplayLocationDidChange, this);
+};
+
+WebInspector.DebuggerSidebarPanel.OffsetSectionsStyleClassName = "offset-sections";
+WebInspector.DebuggerSidebarPanel.ExceptionIconStyleClassName = "breakpoint-exception-icon";
+
+WebInspector.DebuggerSidebarPanel.prototype = {
+    constructor: WebInspector.DebuggerSidebarPanel,
+
+    // Private
+
+    _debuggerPauseResumeButtonClicked: function(event)
+    {
+        if (WebInspector.debuggerManager.paused)
+            WebInspector.debuggerManager.resume();
+        else {
+            this._debuggerPauseResumeButtonItem.enabled = false;
+            WebInspector.debuggerManager.pause();
+        }
+    },
+
+    _debuggerStepOverButtonClicked: function(event)
+    {
+        WebInspector.debuggerManager.stepOver();
+    },
+
+    _debuggerStepIntoButtonClicked: function(event)
+    {
+        WebInspector.debuggerManager.stepInto();
+    },
+
+    _debuggerStepOutButtonClicked: function(event)
+    {
+        WebInspector.debuggerManager.stepOut();
+    },
+
+    _debuggerDidPause: function(event)
+    {
+        this.contentElement.insertBefore(this._callStackSection.element, this.contentElement.firstChild);
+
+        this._debuggerPauseResumeButtonItem.enabled = true;
+        this._debuggerPauseResumeButtonItem.toggled = true;
+        this._debuggerStepOverButtonItem.enabled = true;
+        this._debuggerStepIntoButtonItem.enabled = true;
+        this._debuggerStepOutButtonItem.enabled = true;
+    },
+
+    _debuggerDidResume: function(event)
+    {
+        this._callStackSection.element.remove();
+
+        this._debuggerPauseResumeButtonItem.enabled = true;
+        this._debuggerPauseResumeButtonItem.toggled = false;
+        this._debuggerStepOverButtonItem.enabled = false;
+        this._debuggerStepIntoButtonItem.enabled = false;
+        this._debuggerStepOutButtonItem.enabled = false;
+    },
+
+    _breakpointsToggleButtonClicked: function(event)
+    {
+        this._debuggerBreakpointsButtonItem.activated = !this._debuggerBreakpointsButtonItem.activated;
+        WebInspector.debuggerManager.breakpointsEnabled = this._debuggerBreakpointsButtonItem.activated;
+    },
+
+    _addBreakpoint: function(breakpoint, sourceCode)
+    {
+        var sourceCode = breakpoint.sourceCodeLocation.displaySourceCode;
+        if (!sourceCode)
+            return null;
+
+        var parentTreeElement = this._breakpointsContentTreeOutline.getCachedTreeElement(sourceCode);
+        if (!parentTreeElement) {
+            if (sourceCode instanceof WebInspector.SourceMapResource)
+                parentTreeElement = new WebInspector.SourceMapResourceTreeElement(sourceCode);
+            else if (sourceCode instanceof WebInspector.Resource)
+                parentTreeElement = new WebInspector.ResourceTreeElement(sourceCode);
+            else if (sourceCode instanceof WebInspector.Script)
+                parentTreeElement = new WebInspector.ScriptTreeElement(sourceCode);
+        }
+
+        if (!parentTreeElement.parent) {
+            parentTreeElement.hasChildren = true;
+            parentTreeElement.expand();
+
+            this._breakpointsContentTreeOutline.insertChild(parentTreeElement, insertionIndexForObjectInListSortedByFunction(parentTreeElement, this._breakpointsContentTreeOutline.children, this._compareTopLevelTreeElements.bind(this)));
+        }
+
+        // Mark disabled breakpoints as resolved if there is source code loaded with that URL.
+        // This gives the illusion the breakpoint was resolved, but since we don't send disabled
+        // breakpoints to the backend we don't know for sure. If the user enables the breakpoint
+        // it will be resolved properly.
+        if (breakpoint.disabled)
+            breakpoint.resolved = true;
+
+        var breakpointTreeElement = new WebInspector.BreakpointTreeElement(breakpoint);
+        parentTreeElement.insertChild(breakpointTreeElement, insertionIndexForObjectInListSortedByFunction(breakpointTreeElement, parentTreeElement.children, this._compareBreakpointTreeElements));
+        return breakpointTreeElement;
+    },
+
+    _addBreakpointsForSourceCode: function(sourceCode)
+    {
+        var breakpoints = WebInspector.debuggerManager.breakpointsForSourceCode(sourceCode);
+        for (var i = 0; i < breakpoints.length; ++i)
+            this._addBreakpoint(breakpoints[i], sourceCode);
+    },
+
+    _resourceAdded: function(event)
+    {
+        var resource = event.data.resource;
+        this._addBreakpointsForSourceCode(resource);
+    },
+
+    _mainResourceChanged: function(event)
+    {
+        var resource = event.target.mainResource;
+        this._addBreakpointsForSourceCode(resource);
+    },
+
+    _scriptAdded: function(event)
+    {
+        var script = event.data.script;
+
+        // Don't add breakpoints if the script is represented by a Resource. They were
+        // already added by _resourceAdded.
+        if (script.resource)
+            return;
+
+        this._addBreakpointsForSourceCode(script);
+    },
+
+    _scriptsCleared: function(event)
+    {
+        for (var i = this._breakpointsContentTreeOutline.children.length - 1; i >= 0; --i) {
+            var treeElement = this._breakpointsContentTreeOutline.children[i];
+            if (!(treeElement instanceof WebInspector.ScriptTreeElement))
+                continue;
+
+            this._breakpointsContentTreeOutline.removeChildAtIndex(i, true, true);
+        }
+    },
+
+    _breakpointAdded: function(event)
+    {
+        var breakpoint = event.data.breakpoint;
+        this._addBreakpoint(breakpoint);
+    },
+
+    _breakpointRemoved: function(event)
+    {
+        var breakpoint = event.data.breakpoint;
+
+        var breakpointTreeElement = this._breakpointsContentTreeOutline.getCachedTreeElement(breakpoint);
+        console.assert(breakpointTreeElement);
+        if (!breakpointTreeElement)
+            return;
+
+        this._removeBreakpointTreeElement(breakpointTreeElement);
+    },
+
+    _breakpointDisplayLocationDidChange: function(event)
+    {
+        var breakpoint = event.target;
+        if (event.data.oldDisplaySourceCode === breakpoint.displaySourceCode)
+            return;
+
+        var breakpointTreeElement = this._breakpointsContentTreeOutline.getCachedTreeElement(breakpoint);
+        if (!breakpointTreeElement)
+            return;
+
+        // A known breakpoint moved between resources, remove the old tree element
+        // and create a new tree element with the updated file.
+
+        var wasSelected = breakpointTreeElement.selected;
+
+        this._removeBreakpointTreeElement(breakpointTreeElement);
+        var newBreakpointTreeElement = this._addBreakpoint(breakpoint);
+
+        if (newBreakpointTreeElement && wasSelected)
+            newBreakpointTreeElement.revealAndSelect(true, false, true, true);
+    },
+
+    _removeBreakpointTreeElement: function(breakpointTreeElement)
+    {
+        var parentTreeElement = breakpointTreeElement.parent;
+        parentTreeElement.removeChild(breakpointTreeElement);
+
+        console.assert(parentTreeElement.parent === this._breakpointsContentTreeOutline);
+
+        if (!parentTreeElement.children.length)
+            this._breakpointsContentTreeOutline.removeChild(parentTreeElement);
+    },
+
+    _debuggerCallFramesDidChange: function()
+    {
+        this._callStackContentTreeOutline.removeChildren();
+
+        var callFrames = WebInspector.debuggerManager.callFrames;
+        if (!callFrames || !callFrames.length) {
+            this._callStackRow.showEmptyMessage();
+            return;
+        }
+
+        this._callStackRow.hideEmptyMessage();
+        this._callStackRow.element.appendChild(this._callStackContentTreeOutline.element);
+
+        var treeElementToSelect = null;
+
+        var activeCallFrame = WebInspector.debuggerManager.activeCallFrame;
+        for (var i = 0; i < callFrames.length; ++i) {
+            var callFrameTreeElement = new WebInspector.CallFrameTreeElement(callFrames[i]);
+            if (callFrames[i] === activeCallFrame)
+                treeElementToSelect = callFrameTreeElement;
+            this._callStackContentTreeOutline.appendChild(callFrameTreeElement);
+        }
+
+        if (treeElementToSelect)
+            treeElementToSelect.select(true, true);
+    },
+
+    _breakpointsBeneathTreeElement: function(treeElement)
+    {
+        console.assert(treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement);
+        if (!(treeElement instanceof WebInspector.ResourceTreeElement) && !(treeElement instanceof WebInspector.ScriptTreeElement))
+            return [];
+
+        var breakpoints = [];
+        var breakpointTreeElements = treeElement.children;
+        for (var i = 0; i < breakpointTreeElements.length; ++i) {
+            console.assert(breakpointTreeElements[i] instanceof WebInspector.BreakpointTreeElement);
+            console.assert(breakpointTreeElements[i].breakpoint);
+            var breakpoint = breakpointTreeElements[i].breakpoint;
+            if (breakpoint)
+                breakpoints.push(breakpoint);
+        }
+
+        return breakpoints;
+    },
+
+    _removeAllBreakpoints: function(breakpoints)
+    {
+        for (var i = 0; i < breakpoints.length; ++i) {
+            var breakpoint = breakpoints[i];
+            if (WebInspector.debuggerManager.isBreakpointRemovable(breakpoint))
+                WebInspector.debuggerManager.removeBreakpoint(breakpoint);
+        }
+    },
+
+    _toggleAllBreakpoints: function(breakpoints, disabled)
+    {
+        for (var i = 0; i < breakpoints.length; ++i)
+            breakpoints[i].disabled = disabled;
+    },
+
+    _breakpointTreeOutlineDeleteTreeElement: function(treeElement)
+    {
+        console.assert(treeElement.selected);
+        console.assert(treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement);
+        if (!(treeElement instanceof WebInspector.ResourceTreeElement) && !(treeElement instanceof WebInspector.ScriptTreeElement))
+            return false;
+
+        var wasTopResourceTreeElement = treeElement.previousSibling === this._allUncaughtExceptionsBreakpointTreeElement;
+        var nextSibling = treeElement.nextSibling;
+
+        var breakpoints = this._breakpointsBeneathTreeElement(treeElement);
+        this._removeAllBreakpoints(breakpoints);
+
+        if (wasTopResourceTreeElement && nextSibling)
+            nextSibling.select(true, true);
+
+        return true;
+    },
+
+    _breakpointTreeOutlineContextMenuTreeElement: function(event, treeElement)
+    {
+        console.assert(treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement);
+        if (!(treeElement instanceof WebInspector.ResourceTreeElement) && !(treeElement instanceof WebInspector.ScriptTreeElement))
+            return;
+
+        var breakpoints = this._breakpointsBeneathTreeElement(treeElement);
+        var shouldDisable = false;
+        for (var i = 0; i < breakpoints.length; ++i) {
+            if (!breakpoints[i].disabled) {
+                shouldDisable = true;
+                break;
+            }
+        }
+
+        function removeAllResourceBreakpoints()
+        {
+            this._removeAllBreakpoints(breakpoints);
+        }
+
+        function toggleAllResourceBreakpoints()
+        {
+            this._toggleAllBreakpoints(breakpoints, shouldDisable);
+        }
+
+        var contextMenu = new WebInspector.ContextMenu(event);
+        if (shouldDisable)
+            contextMenu.appendItem(WebInspector.UIString("Disable Breakpoints"), toggleAllResourceBreakpoints.bind(this));
+        else
+            contextMenu.appendItem(WebInspector.UIString("Enable Breakpoints"), toggleAllResourceBreakpoints.bind(this));
+        contextMenu.appendItem(WebInspector.UIString("Delete Breakpoints"), removeAllResourceBreakpoints.bind(this));
+        contextMenu.show();
+    },
+
+    _treeElementSelected: function(treeElement, selectedByUser)
+    {
+        function deselectCallStackContentTreeElements()
+        {
+            // Deselect any tree element in the call stack content tree outline to prevent two selections in the sidebar.
+            var selectedTreeElement = this._callStackContentTreeOutline.selectedTreeElement;
+            if (selectedTreeElement)
+                selectedTreeElement.deselect();
+        }
+
+        if (treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement) {
+            // If the resource is being selected when it has no children it is in the process of being deleted, don't do anything.
+            if (!treeElement.children.length)
+                return;
+            deselectCallStackContentTreeElements.call(this);
+            WebInspector.resourceSidebarPanel.showSourceCode(treeElement.representedObject);
+            return;
+        }
+
+        if (treeElement instanceof WebInspector.CallFrameTreeElement) {
+            // Deselect any tree element in the breakpoints content tree outline to prevent two selections in the sidebar.
+            var selectedTreeElement = this._breakpointsContentTreeOutline.selectedTreeElement;
+            if (selectedTreeElement)
+                selectedTreeElement.deselect();
+
+            var callFrame = treeElement.callFrame;
+            WebInspector.debuggerManager.activeCallFrame = callFrame;
+            WebInspector.resourceSidebarPanel.showSourceCodeLocation(callFrame.sourceCodeLocation);
+            return;
+        }
+
+        if (!(treeElement instanceof WebInspector.BreakpointTreeElement))
+            return;
+
+        deselectCallStackContentTreeElements.call(this);
+
+        if (!treeElement.parent.representedObject)
+            return;
+
+        console.assert(treeElement.parent.representedObject instanceof WebInspector.SourceCode);
+        if (!(treeElement.parent.representedObject instanceof WebInspector.SourceCode))
+            return;
+
+        var breakpoint = treeElement.breakpoint;
+        WebInspector.resourceSidebarPanel.showSourceCodeLocation(breakpoint.sourceCodeLocation);
+    },
+
+    _compareTopLevelTreeElements: function(a, b)
+    {
+        if (a === this._allExceptionsBreakpointTreeElement)
+            return -1;
+        if (b === this._allExceptionsBreakpointTreeElement)
+            return 1;
+
+        if (a === this._allUncaughtExceptionsBreakpointTreeElement)
+            return -1;
+        if (b === this._allUncaughtExceptionsBreakpointTreeElement)
+            return 1;
+
+        return a.mainTitle.localeCompare(b.mainTitle);
+    },
+
+    _compareBreakpointTreeElements: function(a, b)
+    {
+        var aLocation = a.breakpoint.sourceCodeLocation;
+        var bLocation = b.breakpoint.sourceCodeLocation;
+
+        var comparisonResult = aLocation.displayLineNumber - bLocation.displayLineNumber
+        if (comparisonResult !== 0)
+            return comparisonResult;
+
+        return aLocation.displayColumnNumber - bLocation.displayColumnNumber;
+    }
+};
+
+WebInspector.DebuggerSidebarPanel.prototype.__proto__ = WebInspector.NavigationSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DetailsSection.css b/Source/WebInspectorUI/UserInterface/DetailsSection.css
new file mode 100644
index 000000000..88e0ee048
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DetailsSection.css
@@ -0,0 +1,259 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.details-section {
+    margin-top: -1px;
+    margin-bottom: -1px;
+
+    font-family: "Lucida Grande", sans-serif;
+    font-size: 10px;
+}
+
+.details-section > .header {
+    position: -webkit-sticky;
+    top: -1px;
+    height: 23px;
+
+    border-top: 1px solid rgb(153, 153, 153);
+    border-bottom: 1px solid rgb(153, 153, 153);
+    box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0;
+    background-image: -webkit-linear-gradient(top, rgb(238, 240, 244), rgb(224, 226, 230));
+
+    color: rgb(57, 57, 57);
+    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    font-weight: bold;
+
+    padding: 4px 5px 4px 0;
+
+    /* Ensure the headers are displayed above scrollbars. */
+    z-index: 200;
+}
+
+.details-section .details-section > .header {
+    background-image: -webkit-linear-gradient(top, rgb(250, 250, 250), rgb(240, 240, 240));
+
+    top: 21px;
+
+    /* Ensure these headers are displayed below the parent header but above scrollbars. */
+    z-index: 100;
+}
+
+.details-section > .header::before {
+    display: block;
+    float: left;
+
+    width: 21px;
+    height: 100%;
+
+    background-image: -webkit-canvas(details-section-disclosure-triangle-open-normal);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 13px 13px;
+
+    content: "";
+}
+
+.details-section > .header:not(.mouse-over-options-element):active::before {
+    background-image: -webkit-canvas(details-section-disclosure-triangle-open-active);
+}
+
+.details-section.collapsed > .header::before {
+    background-image: -webkit-canvas(details-section-disclosure-triangle-closed-normal);
+}
+
+.details-section.collapsed > .header:not(.mouse-over-options-element):active::before {
+    background-image: -webkit-canvas(details-section-disclosure-triangle-closed-active);
+}
+
+.details-section > .header > label {
+    float: right;
+    font-size: 10px;
+    color: rgba(0, 0, 0, 0.6);
+    text-align: right;
+}
+
+.details-section.collapsed  > .header > label {
+    display: none;
+}
+
+.details-section > .header > label > input[type="checkbox"] {
+    margin: 0 0 0 5px;
+    vertical-align: 1px;
+    font-size: 10px;
+}
+
+.details-section > .header > .node-link,
+.details-section > .header > .go-to-arrow {
+    float: right;
+}
+
+.details-section > .header .go-to-arrow {
+    width: 10px;
+    height: 12px;
+    margin-left: 3px;
+}
+
+.details-section > .content {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+.details-section.collapsed > .content {
+    display: none;
+}
+
+.details-section > .content > .group {
+    display: table-row-group;
+}
+
+.details-section > .content > .group:nth-child(even) {
+    background-color: rgb(222, 222, 222);
+}
+
+.details-section > .content > .group:nth-child(even) > .row:not(.simple):first-child,
+.details-section > .content > .group:nth-child(even) > .row.simple:first-child > * {
+    border-top: 1px solid rgb(153, 153, 153);
+}
+
+.details-section > .content > .group:nth-child(even) > .row:not(.simple):last-child,
+.details-section > .content > .group:last-child > .row:not(.simple):last-child,
+.details-section > .content > .group:nth-child(even) > .row.simple:last-child > *,
+.details-section > .content > .group:last-child > .row.simple:last-child > * {
+    border-bottom: 1px solid rgb(153, 153, 153);
+}
+
+.details-section > .content > .group > .row.simple {
+    display: table-row;
+}
+
+.details-section > .content > .group > .row.simple:last-child > * {
+    padding-bottom: 5px !important;
+}
+
+.details-section > .content > .group > .row.simple.empty {
+    display: none;
+}
+
+.details-section > .content > .group > .row.empty.syntax-highlighted {
+    font-family: "Lucida Grande", sans-serif;
+    font-size: 10px;
+}
+
+.details-section > .content > .group > .row.simple.empty:last-child {
+    display: table-row;
+}
+
+.details-section > .content > .group > .row.simple.empty:last-child > * {
+    display: table-cell;
+    height: 1px;
+    font-size: 0;
+    color: transparent;
+    padding-top: 0;
+    padding-bottom: 3px !important;
+}
+
+.details-section > .content > .group > .row.simple.empty:last-child > * > * {
+    display: none;
+}
+
+.details-section > .content > .group > .row.simple > * {
+    display: table-cell;
+    vertical-align: top;
+    padding: 5px 4px 2px;
+}
+
+.details-section > .content > .group > .row.simple > .label {
+    color: rgb(51, 51, 51);
+
+    text-align: right;
+
+    padding-left: 6px;
+
+    width: 85px;
+}
+
+.details-section > .content > .group > .row.simple > .value {
+    word-wrap: break-word;
+
+    padding-right: 6px;
+
+    -webkit-user-select: text;
+    cursor: text;
+}
+
+.details-section > .content > .group > .row.simple > .value .go-to-arrow {
+    width: 10px;
+    height: 12px;
+    margin-left: 5px;
+}
+
+.details-section > .content > .group > .row.simple.data > .value {
+    word-break: break-all;
+}
+
+.details-section > .content > .group > .row.empty {
+    padding: 6px;
+    text-align: center;
+    color: gray;
+}
+
+.details-section > .content > .group > .row.properties:not(.empty) {
+    padding: 4px 6px;
+}
+
+.details-section > .content .data-grid {
+    border: none;
+}
+
+.details-section > .content .data-grid table.data {
+    background-image: none;
+}
+
+.details-section > .content .data-grid tr:nth-child(even) {
+    background-color: white;
+}
+
+.details-section > .content .data-grid tr:nth-child(odd) {
+    background-color: rgb(243, 246, 250);
+}
+
+.details-section > .content .data-grid td.value-column {
+    height: auto;
+    line-height: initial;
+    white-space: normal;
+}
+
+.details-section > .content .data-grid td.value-column > div {
+    white-space: normal;
+    word-break: break-all;
+}
diff --git a/Source/WebInspectorUI/UserInterface/DetailsSection.js b/Source/WebInspectorUI/UserInterface/DetailsSection.js
new file mode 100644
index 000000000..257b00ec1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DetailsSection.js
@@ -0,0 +1,174 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DetailsSection = function(identifier, title, groups, optionsElement, defaultCollapsedSettingValue) {
+    WebInspector.Object.call(this);
+
+    console.assert(identifier);
+
+    this._element = document.createElement("div");
+    this._element.className = WebInspector.DetailsSection.StyleClassName;
+
+    this._headerElement = document.createElement("div");
+    this._headerElement.addEventListener("click", this._headerElementClicked.bind(this));
+    this._headerElement.className = WebInspector.DetailsSection.HeaderElementStyleClassName;
+    this._element.appendChild(this._headerElement);
+
+    if (optionsElement instanceof HTMLElement) {
+        this._optionsElement = optionsElement;
+        this._optionsElement.addEventListener("mousedown", this._optionsElementMouseDown.bind(this));
+        this._optionsElement.addEventListener("mouseup", this._optionsElementMouseUp.bind(this));
+        this._headerElement.appendChild(this._optionsElement);
+    }
+
+    this._titleElement = document.createElement("span");
+    this._headerElement.appendChild(this._titleElement);
+
+    this._contentElement = document.createElement("div");
+    this._contentElement.className = WebInspector.DetailsSection.ContentElementStyleClassName;
+    this._element.appendChild(this._contentElement);
+
+    this._generateDisclosureTrianglesIfNeeded();
+
+    this._identifier = identifier;
+    this.title = title;
+    this.groups = groups || [new WebInspector.DetailsSectionGroup];
+
+    this._collapsedSetting = new WebInspector.Setting(identifier + "-details-section-collapsed", !!defaultCollapsedSettingValue);
+    this.collapsed = this._collapsedSetting.value;
+};
+
+WebInspector.DetailsSection.StyleClassName = "details-section";
+WebInspector.DetailsSection.HeaderElementStyleClassName = "header";
+WebInspector.DetailsSection.TitleElementStyleClassName = "title";
+WebInspector.DetailsSection.ContentElementStyleClassName = "content";
+WebInspector.DetailsSection.CollapsedStyleClassName = "collapsed";
+WebInspector.DetailsSection.MouseOverOptionsElementStyleClassName = "mouse-over-options-element";
+WebInspector.DetailsSection.DisclosureTriangleOpenCanvasIdentifier = "details-section-disclosure-triangle-open";
+WebInspector.DetailsSection.DisclosureTriangleClosedCanvasIdentifier = "details-section-disclosure-triangle-closed";
+WebInspector.DetailsSection.DisclosureTriangleNormalCanvasIdentifierSuffix = "-normal";
+WebInspector.DetailsSection.DisclosureTriangleActiveCanvasIdentifierSuffix = "-active";
+
+WebInspector.DetailsSection.prototype = {
+    constructor: WebInspector.DetailsSection,
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get identifier()
+    {
+        return this._identifier;
+    },
+
+    get title()
+    {
+        return this._titleElement.textContent;
+    },
+
+    set title(title)
+    {
+        this._titleElement.textContent = title;
+    },
+
+    get collapsed()
+    {
+        return this._element.classList.contains(WebInspector.DetailsSection.CollapsedStyleClassName);
+    },
+
+    set collapsed(flag)
+    {
+        if (flag)
+            this._element.classList.add(WebInspector.DetailsSection.CollapsedStyleClassName);
+        else
+            this._element.classList.remove(WebInspector.DetailsSection.CollapsedStyleClassName);
+
+        this._collapsedSetting.value = flag || false;
+    },
+
+    get groups()
+    {
+        return this._groups;
+    },
+
+    set groups(groups)
+    {
+        this._contentElement.removeChildren();
+
+        this._groups = groups || [];
+
+        for (var i = 0; i < this._groups.length; ++i)
+            this._contentElement.appendChild(this._groups[i].element);
+    },
+
+    // Private
+
+    _headerElementClicked: function(event)
+    {
+        if (event.target.isSelfOrDescendant(this._optionsElement))
+            return;
+
+        this.collapsed = !this.collapsed;
+
+        this._element.scrollIntoViewIfNeeded(false);
+    },
+
+    _optionsElementMouseDown: function(event)
+    {
+        this._headerElement.classList.add(WebInspector.DetailsSection.MouseOverOptionsElementStyleClassName);
+    },
+
+    _optionsElementMouseUp: function(event)
+    {
+        this._headerElement.classList.remove(WebInspector.DetailsSection.MouseOverOptionsElementStyleClassName);
+    },
+
+    _generateDisclosureTrianglesIfNeeded: function()
+    {
+        if (WebInspector.DetailsSection._generatedDisclosureTriangles)
+            return;
+
+        // Set this early instead of in _generateDisclosureTriangle because we don't want multiple sections that are
+        // created at the same time to duplicate the work (even though it would be harmless.)
+        WebInspector.DetailsSection._generatedDisclosureTriangles = true;
+
+        var specifications = {};
+        specifications[WebInspector.DetailsSection.DisclosureTriangleNormalCanvasIdentifierSuffix] = {
+            fillColor: [134, 134, 134]
+        };
+
+        specifications[WebInspector.DetailsSection.DisclosureTriangleActiveCanvasIdentifierSuffix] = {
+            fillColor: [57, 57, 57]
+        };
+
+        generateColoredImagesForCSS("Images/DisclosureTriangleSmallOpen.pdf", specifications, 13, 13, WebInspector.DetailsSection.DisclosureTriangleOpenCanvasIdentifier);
+        generateColoredImagesForCSS("Images/DisclosureTriangleSmallClosed.pdf", specifications, 13, 13, WebInspector.DetailsSection.DisclosureTriangleClosedCanvasIdentifier);
+    }
+};
+
+WebInspector.DetailsSection.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DetailsSectionDataGridRow.js b/Source/WebInspectorUI/UserInterface/DetailsSectionDataGridRow.js
new file mode 100644
index 000000000..95b7bd431
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DetailsSectionDataGridRow.js
@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DetailsSectionDataGridRow = function(dataGrid, emptyMessage) {
+    WebInspector.DetailsSectionRow.call(this, emptyMessage);
+
+    this.element.classList.add(WebInspector.DetailsSectionDataGridRow.StyleClassName);
+
+    this.dataGrid = dataGrid;
+};
+
+WebInspector.DetailsSectionDataGridRow.StyleClassName = "data-grid";
+
+WebInspector.DetailsSectionDataGridRow.prototype = {
+    constructor: WebInspector.DetailsSectionDataGridRow,
+
+    // Public
+
+    get dataGrid()
+    {
+        return this._dataGrid;
+    },
+
+    set dataGrid(dataGrid)
+    {
+        if (this._dataGrid === dataGrid)
+            return;
+
+        this._dataGrid = dataGrid || null;
+
+        if (dataGrid) {
+            dataGrid.element.classList.add("inline");
+
+            this.hideEmptyMessage();
+            this.element.appendChild(dataGrid.element);
+        } else
+            this.showEmptyMessage();
+    }
+};
+
+WebInspector.DetailsSectionDataGridRow.prototype.__proto__ = WebInspector.DetailsSectionRow.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DetailsSectionGroup.js b/Source/WebInspectorUI/UserInterface/DetailsSectionGroup.js
new file mode 100644
index 000000000..91d4e7b23
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DetailsSectionGroup.js
@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DetailsSectionGroup = function(rows) {
+    WebInspector.Object.call(this);
+
+    this._element = document.createElement("div");
+    this._element.className = WebInspector.DetailsSectionGroup.StyleClassName;
+
+    this.rows = rows;
+};
+
+WebInspector.DetailsSectionGroup.StyleClassName = "group";
+
+WebInspector.DetailsSectionGroup.prototype = {
+    constructor: WebInspector.DetailsSectionGroup,
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get rows()
+    {
+        return this._rows;
+    },
+
+    set rows(rows)
+    {
+        this._element.removeChildren();
+
+        this._rows = rows || [];
+
+        for (var i = 0; i < this._rows.length; ++i)
+            this._element.appendChild(this._rows[i].element);
+    }
+};
+
+WebInspector.DetailsSectionGroup.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DetailsSectionPropertiesRow.js b/Source/WebInspectorUI/UserInterface/DetailsSectionPropertiesRow.js
new file mode 100644
index 000000000..a98615277
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DetailsSectionPropertiesRow.js
@@ -0,0 +1,62 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DetailsSectionPropertiesRow = function(propertiesSection, emptyMessage) {
+    WebInspector.DetailsSectionRow.call(this, emptyMessage);
+
+    this.element.classList.add(WebInspector.DetailsSectionPropertiesRow.StyleClassName);
+    this.element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
+
+    this.propertiesSection = propertiesSection;
+};
+
+WebInspector.DetailsSectionPropertiesRow.StyleClassName = "properties";
+
+WebInspector.DetailsSectionPropertiesRow.prototype = {
+    constructor: WebInspector.DetailsSectionPropertiesRow,
+
+    // Public
+
+    get propertiesSection()
+    {
+        return this._propertiesSection;
+    },
+
+    set propertiesSection(propertiesSection)
+    {
+        this._propertiesSection = propertiesSection || null;
+
+        if (propertiesSection) {
+            // Call expand to cause the section to populate.
+            propertiesSection.expand();
+
+            this.hideEmptyMessage();
+            this.element.appendChild(propertiesSection.element);
+        } else
+            this.showEmptyMessage();
+    }
+};
+
+WebInspector.DetailsSectionPropertiesRow.prototype.__proto__ = WebInspector.DetailsSectionRow.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DetailsSectionRow.js b/Source/WebInspectorUI/UserInterface/DetailsSectionRow.js
new file mode 100644
index 000000000..f19584792
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DetailsSectionRow.js
@@ -0,0 +1,79 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DetailsSectionRow = function(emptyMessage) {
+    WebInspector.Object.call(this);
+
+    this._element = document.createElement("div");
+    this._element.className = WebInspector.DetailsSectionRow.StyleClassName;
+
+    this._emptyMessage = emptyMessage || "";
+};
+
+WebInspector.DetailsSectionRow.StyleClassName = "row";
+WebInspector.DetailsSectionRow.EmptyStyleClassName = "empty";
+
+WebInspector.DetailsSectionRow.prototype = {
+    constructor: WebInspector.DetailsSectionRow,
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get emptyMessage()
+    {
+        return this._emptyMessage;
+    },
+
+    set emptyMessage(emptyMessage)
+    {
+        this._emptyMessage = emptyMessage || "";
+
+        if (!this.childNodes.length)
+            this.showEmptyMessage();
+    },
+
+    showEmptyMessage: function()
+    {
+        this.element.classList.add(WebInspector.DetailsSectionRow.EmptyStyleClassName);
+
+        if (this._emptyMessage instanceof Node) {
+            this.element.removeChildren();
+            this.element.appendChild(this._emptyMessage);
+        } else
+            this.element.textContent = this._emptyMessage;
+    },
+
+    hideEmptyMessage: function()
+    {
+        this.element.classList.remove(WebInspector.DetailsSectionRow.EmptyStyleClassName);
+        this.element.removeChildren();
+    }
+};
+
+WebInspector.DetailsSectionRow.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DetailsSectionSimpleRow.js b/Source/WebInspectorUI/UserInterface/DetailsSectionSimpleRow.js
new file mode 100644
index 000000000..d6c7e0e87
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DetailsSectionSimpleRow.js
@@ -0,0 +1,120 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DetailsSectionSimpleRow = function(label, value) {
+    WebInspector.DetailsSectionRow.call(this);
+
+    this.element.classList.add(WebInspector.DetailsSectionSimpleRow.StyleClassName);
+
+    this._labelElement = document.createElement("div");
+    this._labelElement.className = WebInspector.DetailsSectionSimpleRow.LabelElementStyleClassName;
+    this.element.appendChild(this._labelElement);
+
+    this._valueElement = document.createElement("div");
+    this._valueElement.className = WebInspector.DetailsSectionSimpleRow.ValueElementStyleClassName;
+    this.element.appendChild(this._valueElement);
+
+    // Workaround for <rdar://problem/12668870> Triple-clicking text within a
+    // <div> set to "display: table-cell" selects text outside the cell.
+    //
+    // On triple-click, adjust the selection range to include only the value
+    // element if the selection extends beyond it.
+    var valueElementClicked = function(event) {
+        event.stopPropagation();
+
+        if (event.detail < 3)
+            return;
+
+        var currentSelection = window.getSelection();
+        if (!currentSelection)
+            return;
+
+        var currentRange = currentSelection.getRangeAt(0);
+        if (!currentRange || currentRange.startContainer == currentRange.endContainer)
+            return;
+
+        var correctedRange = document.createRange();
+        correctedRange.selectNodeContents(event.currentTarget);
+        currentSelection.removeAllRanges();
+        currentSelection.addRange(correctedRange);
+    };
+    this._valueElement.addEventListener("click", valueElementClicked);
+
+    this.label = label;
+    this.value = value;
+};
+
+WebInspector.DetailsSectionSimpleRow.StyleClassName = "simple";
+WebInspector.DetailsSectionSimpleRow.DataStyleClassName = "data";
+WebInspector.DetailsSectionSimpleRow.EmptyStyleClassName = "empty";
+WebInspector.DetailsSectionSimpleRow.LabelElementStyleClassName = "label";
+WebInspector.DetailsSectionSimpleRow.ValueElementStyleClassName = "value";
+
+WebInspector.DetailsSectionSimpleRow.prototype = {
+    constructor: WebInspector.DetailsSectionSimpleRow,
+
+    // Public
+
+    get label()
+    {
+        return this._labelElement.textContent;
+    },
+
+    set label(label)
+    {
+        this._labelElement.textContent = label;
+    },
+
+    get value()
+    {
+        return this._value;
+    },
+
+    set value(value)
+    {
+        this._value = value || "";
+
+        if (this._value) {
+            this.element.classList.remove(WebInspector.DetailsSectionSimpleRow.EmptyStyleClassName);
+
+            // If the value has space characters that cause word wrapping then we don't need the data class.
+            if (/[\s\u200b]/.test(this._value))
+                this.element.classList.remove(WebInspector.DetailsSectionSimpleRow.DataStyleClassName);
+            else
+                this.element.classList.add(WebInspector.DetailsSectionSimpleRow.DataStyleClassName);
+        } else {
+            this.element.classList.add(WebInspector.DetailsSectionSimpleRow.EmptyStyleClassName);
+            this.element.classList.remove(WebInspector.DetailsSectionSimpleRow.DataStyleClassName);
+        }
+
+        if (value instanceof Node) {
+            this._valueElement.removeChildren();
+            this._valueElement.appendChild(this._value);
+        } else
+            this._valueElement.textContent = this._value;
+    }
+};
+
+WebInspector.DetailsSectionSimpleRow.prototype.__proto__ = WebInspector.DetailsSectionRow.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/DetailsSidebarPanel.css
new file mode 100644
index 000000000..5bb2e6e83
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DetailsSidebarPanel.css
@@ -0,0 +1,29 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.details {
+    overflow-x: hidden;
+    overflow-y: auto;
+}
diff --git a/Source/WebInspectorUI/UserInterface/DetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/DetailsSidebarPanel.js
new file mode 100644
index 000000000..70317e651
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DetailsSidebarPanel.js
@@ -0,0 +1,80 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DetailsSidebarPanel = function(identifier, displayName, singularDisplayName, image, keyboardShortcutKey, element) {
+    if (keyboardShortcutKey)
+        this._keyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control | WebInspector.KeyboardShortcut.Modifier.Shift, keyboardShortcutKey, this.toggle.bind(this));
+
+    if (this._keyboardShortcut) {
+        var showToolTip = WebInspector.UIString("Show the %s details sidebar (%s)").format(singularDisplayName, this._keyboardShortcut.displayName);
+        var hideToolTip = WebInspector.UIString("Hide the %s details sidebar (%s)").format(singularDisplayName, this._keyboardShortcut.displayName);
+    } else {
+        var showToolTip = WebInspector.UIString("Show the %s details sidebar").format(singularDisplayName);
+        var hideToolTip = WebInspector.UIString("Hide the %s details sidebar").format(singularDisplayName);
+    }
+
+    WebInspector.SidebarPanel.call(this, identifier, displayName, showToolTip, hideToolTip, image, element);
+
+    this.element.classList.add(WebInspector.DetailsSidebarPanel.StyleClassName);
+};
+
+WebInspector.DetailsSidebarPanel.StyleClassName = "details";
+
+WebInspector.DetailsSidebarPanel.prototype = {
+    constructor: WebInspector.DetailsSidebarPanel,
+
+    // Public
+
+    inspect: function(objects)
+    {
+        // Implemented by subclasses.
+        return false;
+    },
+
+    shown: function()
+    {
+        if (this._needsRefresh) {
+            delete this._needsRefresh;
+            this.refresh();
+        }
+    },
+
+    needsRefresh: function()
+    {
+        if (!this.selected) {
+            this._needsRefresh = true;
+            return;
+        }
+
+        this.refresh();
+    },
+
+    refresh: function()
+    {
+        // Implemented by subclasses.
+    }
+};
+
+WebInspector.DetailsSidebarPanel.prototype.__proto__ = WebInspector.SidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DividerNavigationItem.css b/Source/WebInspectorUI/UserInterface/DividerNavigationItem.css
new file mode 100644
index 000000000..cbadc5b6e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DividerNavigationItem.css
@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.navigation-bar .item.divider {
+    width: 1px;
+
+    background-image: -webkit-linear-gradient(rgb(190, 190, 190), rgb(190, 190, 190));
+    background-size: 100% 13px;
+    background-repeat: no-repeat;
+    background-position: center;
+}
diff --git a/Source/WebInspectorUI/UserInterface/DividerNavigationItem.js b/Source/WebInspectorUI/UserInterface/DividerNavigationItem.js
new file mode 100644
index 000000000..5e9767a02
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/DividerNavigationItem.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DividerNavigationItem = function(identifier) {
+    WebInspector.NavigationItem.call(this, identifier);
+};
+
+WebInspector.DividerNavigationItem.StyleClassName = "divider";
+
+WebInspector.DividerNavigationItem.prototype = {
+    constructor: WebInspector.DividerNavigationItem,
+
+    // Private
+
+    _additionalClassNames: [WebInspector.DividerNavigationItem.StyleClassName],
+};
+
+WebInspector.DividerNavigationItem.prototype.__proto__ = WebInspector.NavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Editing.css b/Source/WebInspectorUI/UserInterface/Editing.css
new file mode 100644
index 000000000..f68c02170
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Editing.css
@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.editing {
+    -webkit-user-select: text;
+    box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
+    outline: 1px solid rgb(66%, 66%, 66%) !important;
+    background-color: white;
+    -webkit-user-modify: read-write-plaintext-only;
+    text-overflow: clip !important;
+    padding-left: 2px;
+    margin-left: -2px;
+    padding-right: 2px;
+    margin-right: -2px;
+    margin-bottom: -1px;
+    padding-bottom: 1px;
+    opacity: 1.0 !important;
+}
+
+.editing.multiline {
+    white-space: pre-wrap;
+}
+
+.editing, .editing * {
+    color: black !important;
+    text-decoration: none !important;
+}
+
+.editing br {
+    display: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/EditingSupport.js b/Source/WebInspectorUI/UserInterface/EditingSupport.js
new file mode 100644
index 000000000..c2fe47107
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/EditingSupport.js
@@ -0,0 +1,271 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.isBeingEdited = function(element)
+{
+    while (element) {
+        if (element.__editing)
+            return true;
+        element = element.parentNode;
+    }
+
+    return false;
+}
+
+WebInspector.markBeingEdited = function(element, value)
+{
+    if (value) {
+        if (element.__editing)
+            return false;
+        element.__editing = true;
+        WebInspector.__editingCount = (WebInspector.__editingCount || 0) + 1;
+    } else {
+        if (!element.__editing)
+            return false;
+        delete element.__editing;
+        --WebInspector.__editingCount;
+    }
+    return true;
+}
+
+WebInspector.isEditingAnyField = function()
+{
+    return !!WebInspector.__editingCount;
+}
+
+WebInspector.isEventTargetAnEditableField = function(event)
+{
+    const textInputTypes = {"text": true, "search": true, "tel": true, "url": true, "email": true, "password": true};
+    if (event.target instanceof HTMLInputElement)
+        return event.target.type in textInputTypes;
+
+    var codeMirrorEditorElement = event.target.enclosingNodeOrSelfWithClass("CodeMirror");
+    if (codeMirrorEditorElement && codeMirrorEditorElement.CodeMirror)
+        return !codeMirrorEditorElement.CodeMirror.getOption("readOnly");
+
+    if (event.target instanceof HTMLTextAreaElement)
+        return true;
+
+    if (event.target.enclosingNodeOrSelfWithClass("text-prompt"))
+        return true;
+
+    return false;
+}
+
+/**
+ * @constructor
+ * @param {function(Element,string,string,*,string)} commitHandler
+ * @param {function(Element,*)} cancelHandler
+ * @param {*=} context
+ */
+WebInspector.EditingConfig = function(commitHandler, cancelHandler, context)
+{
+    this.commitHandler = commitHandler;
+    this.cancelHandler = cancelHandler
+    this.context = context;
+
+    /**
+     * Handles the "paste" event, return values are the same as those for customFinishHandler
+     * @type {function(Element)|undefined}
+     */
+    this.pasteHandler;
+
+    /** 
+     * Whether the edited element is multiline
+     * @type {boolean|undefined}
+     */
+    this.multiline;
+
+    /**
+     * Custom finish handler for the editing session (invoked on keydown)
+     * @type {function(Element,*)|undefined}
+     */
+    this.customFinishHandler;
+
+    /**
+     * Whether or not spellcheck is enabled.
+     * @type {boolean}
+     */
+    this.spellcheck = false;
+}
+
+WebInspector.EditingConfig.prototype = {
+    setPasteHandler: function(pasteHandler)
+    {
+        this.pasteHandler = pasteHandler;
+    },
+
+    setMultiline: function(multiline)
+    {
+        this.multiline = multiline;
+    },
+
+    setCustomFinishHandler: function(customFinishHandler)
+    {
+        this.customFinishHandler = customFinishHandler;
+    }
+}
+
+/** 
+ * @param {Element} element
+ * @param {WebInspector.EditingConfig=} config
+ */
+WebInspector.startEditing = function(element, config)
+{
+    if (!WebInspector.markBeingEdited(element, true))
+        return;
+
+    config = config || new WebInspector.EditingConfig(function() {}, function() {});
+    var committedCallback = config.commitHandler;
+    var cancelledCallback = config.cancelHandler;
+    var pasteCallback = config.pasteHandler;
+    var context = config.context;
+    var oldText = getContent(element);
+    var moveDirection = "";
+
+    element.classList.add("editing");
+
+    var oldSpellCheck = element.hasAttribute("spellcheck") ? element.spellcheck : undefined;
+    element.spellcheck = config.spellcheck;
+
+    if (config.multiline)
+        element.classList.add("multiline");
+
+    var oldTabIndex = element.tabIndex;
+    if (element.tabIndex < 0)
+        element.tabIndex = 0;
+
+    function blurEventListener() {
+        editingCommitted.call(element);
+    }
+
+    function getContent(element) {
+        if (element.tagName === "INPUT" && element.type === "text")
+            return element.value;
+        else
+            return element.textContent;
+    }
+
+    /** @this {Element} */
+    function cleanUpAfterEditing()
+    {
+        WebInspector.markBeingEdited(element, false);
+
+        this.classList.remove("editing");
+        this.scrollTop = 0;
+        this.scrollLeft = 0;
+
+        if (oldSpellCheck === undefined)
+            element.removeAttribute("spellcheck");
+        else
+            element.spellcheck = oldSpellCheck;
+
+        if (oldTabIndex === -1)
+            this.removeAttribute("tabindex");
+        else
+            this.tabIndex = oldTabIndex;
+
+        element.removeEventListener("blur", blurEventListener, false);
+        element.removeEventListener("keydown", keyDownEventListener, true);
+        if (pasteCallback)
+            element.removeEventListener("paste", pasteEventListener, true);
+
+        WebInspector.restoreFocusFromElement(element);
+    }
+
+    /** @this {Element} */
+    function editingCancelled()
+    {
+        if (this.tagName === "INPUT" && this.type === "text")
+            this.value = oldText;
+        else
+            this.textContent = oldText;
+
+        cleanUpAfterEditing.call(this);
+
+        cancelledCallback(this, context);
+    }
+
+    /** @this {Element} */
+    function editingCommitted()
+    {
+        cleanUpAfterEditing.call(this);
+
+        committedCallback(this, getContent(this), oldText, context, moveDirection);
+    }
+
+    function defaultFinishHandler(event)
+    {
+        var hasOnlyMetaModifierKey = event.metaKey && !event.shiftKey && !event.ctrlKey && !event.altKey;
+        if (isEnterKey(event) && (!config.multiline || hasOnlyMetaModifierKey))
+            return "commit";
+        else if (event.keyCode === WebInspector.KeyboardShortcut.Key.Escape.keyCode || event.keyIdentifier === "U+001B")
+            return "cancel";
+        else if (event.keyIdentifier === "U+0009") // Tab key
+            return "move-" + (event.shiftKey ? "backward" : "forward");
+    }
+
+    function handleEditingResult(result, event)
+    {
+        if (result === "commit") {
+            editingCommitted.call(element);
+            event.preventDefault();
+            event.stopPropagation();
+        } else if (result === "cancel") {
+            editingCancelled.call(element);
+            event.preventDefault();
+            event.stopPropagation();
+        } else if (result && result.startsWith("move-")) {
+            moveDirection = result.substring(5);
+            if (event.keyIdentifier !== "U+0009")
+                blurEventListener();
+        }
+    }
+
+    function pasteEventListener(event)
+    {
+        var result = pasteCallback(event);
+        handleEditingResult(result, event);
+    }
+
+    function keyDownEventListener(event)
+    {
+        var handler = config.customFinishHandler || defaultFinishHandler;
+        var result = handler(event);
+        handleEditingResult(result, event);
+    }
+
+    element.addEventListener("blur", blurEventListener, false);
+    element.addEventListener("keydown", keyDownEventListener, true);
+    if (pasteCallback)
+        element.addEventListener("paste", pasteEventListener, true);
+
+    element.focus();
+
+    return {
+        cancel: editingCancelled.bind(element),
+        commit: editingCommitted.bind(element)
+    };
+}
diff --git a/Source/WebInspectorUI/UserInterface/EventHandler.js b/Source/WebInspectorUI/UserInterface/EventHandler.js
new file mode 100644
index 000000000..ff9d3720e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/EventHandler.js
@@ -0,0 +1,79 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.EventHandler = function(delegate, eventHandlers)
+{
+    this._delegate = delegate;
+    this._eventHandlers = eventHandlers;
+
+    this._tracking = false;
+    this._target = null;
+};
+
+WebInspector.EventHandler.prototype = {
+    constructor: WebInspector.EventHandler,
+
+    // Public
+
+    trackEvents: function(target)
+    {
+        if (this._tracking && target === this._target)
+            return;
+
+        if (this._tracking && this._target)
+            this.stopTrackingEvents();
+
+        Object.getOwnPropertyNames(this._eventHandlers).forEach(function(eventName) {
+            target.addEventListener(eventName, this);
+        }, this);
+
+        this._target = target;
+        this._tracking = true;
+    },
+    
+    stopTrackingEvents: function()
+    {
+        if (!this._tracking)
+            return;
+
+        Object.getOwnPropertyNames(this._eventHandlers).forEach(function(eventType) {
+            this._target.removeEventListener(eventType, this);
+        }, this);
+
+        this._tracking = false;
+    },
+
+    handleEvent: function(event)
+    {
+        if (event.currentTarget !== this._target)
+            return;
+
+        var handler = this._eventHandlers[event.type];
+        if (handler)
+            handler.call(this._delegate, event);
+    }
+}
+
+WebInspector.EventHandler.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/EventListenerSection.js b/Source/WebInspectorUI/UserInterface/EventListenerSection.js
new file mode 100644
index 000000000..e74b4546e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/EventListenerSection.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.EventListenerSection = function(type, nodeId)
+{
+    WebInspector.DetailsSection.call(this, type + "-event-listener-section", type, [], null, true);
+
+    this.element.classList.add("event-listener-section");
+
+    this._nodeId = nodeId;
+}
+
+WebInspector.EventListenerSection.prototype = {
+    constructor: WebInspector.EventListenerSection,
+
+    addListener: function(eventListener)
+    {
+        var groups = this.groups;
+        groups.push(new WebInspector.EventListenerSectionGroup(eventListener, this._nodeId));
+        this.groups = groups;
+    }
+}
+
+WebInspector.EventListenerSection.prototype.__proto__ = WebInspector.DetailsSection.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/EventListenerSectionGroup.css b/Source/WebInspectorUI/UserInterface/EventListenerSectionGroup.css
new file mode 100644
index 000000000..00b18892e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/EventListenerSectionGroup.css
@@ -0,0 +1,30 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.event-listener-section > .content > .group > .row.simple > .value {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
diff --git a/Source/WebInspectorUI/UserInterface/EventListenerSectionGroup.js b/Source/WebInspectorUI/UserInterface/EventListenerSectionGroup.js
new file mode 100644
index 000000000..2d8ec9022
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/EventListenerSectionGroup.js
@@ -0,0 +1,101 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.EventListenerSectionGroup = function(eventListener, nodeId)
+{
+    this._eventListener = eventListener;
+    this._nodeId = nodeId;
+
+    var rows = [];
+    rows.push(new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Node"), this._nodeTextOrLink()));
+    rows.push(new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Function"), this._functionTextOrLink()));
+    rows.push(new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Type"), this._type()));
+
+    WebInspector.DetailsSectionGroup.call(this, rows);
+}
+
+WebInspector.EventListenerSectionGroup.prototype = {
+    constructor: WebInspector.EventListenerSectionGroup,
+
+    _nodeTextOrLink: function()
+    {
+        var node = this._eventListener.node;
+        if (!node)
+            return;
+
+        if (node.nodeType() === Node.DOCUMENT_NODE)
+            return "document";
+
+        return WebInspector.linkifyNodeReference(node);
+    },
+
+    _type: function()
+    {
+        if (this._eventListener.useCapture)
+            return WebInspector.UIString("Capturing");
+
+        if (this._eventListener.isAttribute)
+            return WebInspector.UIString("Attribute");
+
+        return WebInspector.UIString("Bubbling");
+    },
+
+    _functionTextOrLink: function()
+    {
+        var match = this._eventListener.handlerBody.match(/function ([^\(]+?)\(/);
+        if (match) {
+            var anonymous = false;
+            var functionName = match[1];
+        } else {
+            var anonymous = true;
+            var functionName = WebInspector.UIString("(anonymous function)");        
+        }
+
+        if (!this._eventListener.location)
+            return functionName;
+
+        // COMPATIBILITY (iOS 6): In the past scriptId could be a URL. Now it is always a script identifier.
+        // So try looking up the resource by URL if a script can't be found directly.
+        var scriptIdentifierOrURL = this._eventListener.location.scriptId;
+        var sourceCode = WebInspector.debuggerManager.scriptForIdentifier(scriptIdentifierOrURL);
+        if (!sourceCode)
+            sourceCode = WebInspector.frameResourceManager.resourceForURL(scriptIdentifierOrURL);
+
+        if (!sourceCode)
+            return functionName;
+
+        var sourceCodeLocation = sourceCode.createSourceCodeLocation(this._eventListener.location.lineNumber, this._eventListener.location.columnNumber || 0);
+        var linkElement = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, anonymous);
+        if (anonymous)
+            return linkElement;
+
+        var fragment = document.createDocumentFragment();
+        fragment.appendChild(linkElement);
+        fragment.appendChild(document.createTextNode(functionName));
+        return fragment;
+    }
+}
+
+WebInspector.EventListenerSectionGroup.prototype.__proto__ = WebInspector.DetailsSectionGroup.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ExecutionContext.js b/Source/WebInspectorUI/UserInterface/ExecutionContext.js
new file mode 100644
index 000000000..0b8b81d40
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ExecutionContext.js
@@ -0,0 +1,73 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ExecutionContext = function(id, name, isPageContext, frame)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(typeof id === "number" || id === WebInspector.QuickConsole.MainFrameContextExecutionIdentifier);
+    console.assert(typeof name === "string");
+
+    this._id = id;
+    this._name = name;
+    this._isPageContext = isPageContext || false;
+    this._frame = frame || null;
+};
+
+WebInspector.ExecutionContext.supported = function()
+{
+    // Execution contexts were added to the Inspector protocol alongside RuntimeAgent.enable and
+    // disable methods, which turn on and off sending Runtime agent execution context created events.
+    // So we can feature detect support for execution contexts with these RuntimeAgent functions.
+    return typeof RuntimeAgent.enable === "function";
+}
+
+WebInspector.ExecutionContext.prototype = {
+    constructor: WebInspector.ExecutionContext,
+
+    // Public
+
+    get id()
+    {
+        return this._id;
+    },
+
+    get name()
+    {
+        return this._name;
+    },
+
+    get isPageContext()
+    {
+        return this._isPageContext;
+    },
+
+    get frame()
+    {
+        return this._frame;
+    }
+};
+
+WebInspector.ExecutionContext.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ExecutionContextList.js b/Source/WebInspectorUI/UserInterface/ExecutionContextList.js
new file mode 100644
index 000000000..c806c270f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ExecutionContextList.js
@@ -0,0 +1,75 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ExecutionContextList = function()
+{
+    WebInspector.Object.call(this);
+
+    this._contexts = [];
+    this._pageExecutionContext = null;
+};
+
+WebInspector.ExecutionContextList.prototype = {
+    constructor: WebInspector.ExecutionContextList,
+
+    // Public
+
+    get pageExecutionContext()
+    {
+        return this._pageExecutionContext;
+    },
+
+    get contexts()
+    {
+        return this._contexts;
+    },
+
+    add: function(context)
+    {
+        // FIXME: The backend sends duplicate page context execution contexts with the same id. Why?
+        if (context.isPageContext && this._pageExecutionContext) {
+            console.assert(context.id === this._pageExecutionContext.id);
+            return false;
+        }
+
+        this._contexts.push(context);
+
+        if (context.isPageContext) {
+            console.assert(!this._pageExecutionContext);
+            this._pageExecutionContext = context;
+            return true;
+        }
+
+        return false;
+    },
+
+    clear: function()
+    {
+        this._contexts = [];
+        this._pageExecutionContext = null;
+    }
+};
+
+WebInspector.ExecutionContextList.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/LICENSE b/Source/WebInspectorUI/UserInterface/External/CodeMirror/LICENSE
new file mode 100644
index 000000000..482d55eb7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/LICENSE
@@ -0,0 +1,23 @@
+Copyright (C) 2013 by Marijn Haverbeke <marijnh@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+Please note that some subdirectories of the CodeMirror distribution
+include their own LICENSE files, and are released under different
+licences.
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/clojure.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/clojure.js
new file mode 100644
index 000000000..ee22a12fe
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/clojure.js
@@ -0,0 +1,224 @@
+/**
+ * Author: Hans Engel
+ * Branched from CodeMirror's Scheme mode (by Koh Zi Han, based on implementation by Koh Zi Chun)
+ */
+CodeMirror.defineMode("clojure", function () {
+    var BUILTIN = "builtin", COMMENT = "comment", STRING = "string", CHARACTER = "string-2",
+        ATOM = "atom", NUMBER = "number", BRACKET = "bracket", KEYWORD = "keyword";
+    var INDENT_WORD_SKIP = 2;
+
+    function makeKeywords(str) {
+        var obj = {}, words = str.split(" ");
+        for (var i = 0; i < words.length; ++i) obj[words[i]] = true;
+        return obj;
+    }
+
+    var atoms = makeKeywords("true false nil");
+
+    var keywords = makeKeywords(
+      "defn defn- def def- defonce defmulti defmethod defmacro defstruct deftype defprotocol defrecord defproject deftest slice defalias defhinted defmacro- defn-memo defnk defnk defonce- defunbound defunbound- defvar defvar- let letfn do case cond condp for loop recur when when-not when-let when-first if if-let if-not . .. -> ->> doto and or dosync doseq dotimes dorun doall load import unimport ns in-ns refer try catch finally throw with-open with-local-vars binding gen-class gen-and-load-class gen-and-save-class handler-case handle");
+
+    var builtins = makeKeywords(
+        "* *' *1 *2 *3 *agent* *allow-unresolved-vars* *assert* *clojure-version* *command-line-args* *compile-files* *compile-path* *compiler-options* *data-readers* *e *err* *file* *flush-on-newline* *fn-loader* *in* *math-context* *ns* *out* *print-dup* *print-length* *print-level* *print-meta* *print-readably* *read-eval* *source-path* *unchecked-math* *use-context-classloader* *verbose-defrecords* *warn-on-reflection* + +' - -' -> ->> ->ArrayChunk ->Vec ->VecNode ->VecSeq -cache-protocol-fn -reset-methods .. / < <= = == > >= EMPTY-NODE accessor aclone add-classpath add-watch agent agent-error agent-errors aget alength alias all-ns alter alter-meta! alter-var-root amap ancestors and apply areduce array-map aset aset-boolean aset-byte aset-char aset-double aset-float aset-int aset-long aset-short assert assoc assoc! assoc-in associative? atom await await-for await1 bases bean bigdec bigint biginteger binding bit-and bit-and-not bit-clear bit-flip bit-not bit-or bit-set bit-shift-left bit-shift-right bit-test bit-xor boolean boolean-array booleans bound-fn bound-fn* bound? butlast byte byte-array bytes case cast char char-array char-escape-string char-name-string char? chars chunk chunk-append chunk-buffer chunk-cons chunk-first chunk-next chunk-rest chunked-seq? class class? clear-agent-errors clojure-version coll? comment commute comp comparator compare compare-and-set! compile complement concat cond condp conj conj! cons constantly construct-proxy contains? count counted? create-ns create-struct cycle dec dec' decimal? declare default-data-readers definline definterface defmacro defmethod defmulti defn defn- defonce defprotocol defrecord defstruct deftype delay delay? deliver denominator deref derive descendants destructure disj disj! dissoc dissoc! distinct distinct? doall dorun doseq dosync dotimes doto double double-array doubles drop drop-last drop-while empty empty? ensure enumeration-seq error-handler error-mode eval even? every-pred every? ex-data ex-info extend extend-protocol extend-type extenders extends? false? ffirst file-seq filter filterv find find-keyword find-ns find-protocol-impl find-protocol-method find-var first flatten float float-array float? floats flush fn fn? fnext fnil for force format frequencies future future-call future-cancel future-cancelled? future-done? future? gen-class gen-interface gensym get get-in get-method get-proxy-class get-thread-bindings get-validator group-by hash hash-combine hash-map hash-set identical? identity if-let if-not ifn? import in-ns inc inc' init-proxy instance? int int-array integer? interleave intern interpose into into-array ints io! isa? iterate iterator-seq juxt keep keep-indexed key keys keyword keyword? last lazy-cat lazy-seq let letfn line-seq list list* list? load load-file load-reader load-string loaded-libs locking long long-array longs loop macroexpand macroexpand-1 make-array make-hierarchy map map-indexed map? mapcat mapv max max-key memfn memoize merge merge-with meta method-sig methods min min-key mod munge name namespace namespace-munge neg? newline next nfirst nil? nnext not not-any? not-empty not-every? not= ns ns-aliases ns-imports ns-interns ns-map ns-name ns-publics ns-refers ns-resolve ns-unalias ns-unmap nth nthnext nthrest num number? numerator object-array odd? or parents partial partition partition-all partition-by pcalls peek persistent! pmap pop pop! pop-thread-bindings pos? pr pr-str prefer-method prefers primitives-classnames print print-ctor print-dup print-method print-simple print-str printf println println-str prn prn-str promise proxy proxy-call-with-super proxy-mappings proxy-name proxy-super push-thread-bindings pvalues quot rand rand-int rand-nth range ratio? rational? rationalize re-find re-groups re-matcher re-matches re-pattern re-seq read read-line read-string realized? reduce reduce-kv reductions ref ref-history-count ref-max-history ref-min-history ref-set refer refer-clojure reify release-pending-sends rem remove remove-all-methods remove-method remove-ns remove-watch repeat repeatedly replace replicate require reset! reset-meta! resolve rest restart-agent resultset-seq reverse reversible? rseq rsubseq satisfies? second select-keys send send-off seq seq? seque sequence sequential? set set-error-handler! set-error-mode! set-validator! set? short short-array shorts shuffle shutdown-agents slurp some some-fn sort sort-by sorted-map sorted-map-by sorted-set sorted-set-by sorted? special-symbol? spit split-at split-with str string? struct struct-map subs subseq subvec supers swap! symbol symbol? sync take take-last take-nth take-while test the-ns thread-bound? time to-array to-array-2d trampoline transient tree-seq true? type unchecked-add unchecked-add-int unchecked-byte unchecked-char unchecked-dec unchecked-dec-int unchecked-divide-int unchecked-double unchecked-float unchecked-inc unchecked-inc-int unchecked-int unchecked-long unchecked-multiply unchecked-multiply-int unchecked-negate unchecked-negate-int unchecked-remainder-int unchecked-short unchecked-subtract unchecked-subtract-int underive unquote unquote-splicing update-in update-proxy use val vals var-get var-set var? vary-meta vec vector vector-of vector? when when-first when-let when-not while with-bindings with-bindings* with-in-str with-loading-context with-local-vars with-meta with-open with-out-str with-precision with-redefs with-redefs-fn xml-seq zero? zipmap *default-data-reader-fn* as-> cond-> cond->> reduced reduced? send-via set-agent-send-executor! set-agent-send-off-executor! some-> some->>");
+
+    var indentKeys = makeKeywords(
+        // Built-ins
+        "ns fn def defn defmethod bound-fn if if-not case condp when while when-not when-first do future comment doto locking proxy with-open with-precision reify deftype defrecord defprotocol extend extend-protocol extend-type try catch " +
+
+        // Binding forms
+        "let letfn binding loop for doseq dotimes when-let if-let " +
+
+        // Data structures
+        "defstruct struct-map assoc " +
+
+        // clojure.test
+        "testing deftest " +
+
+        // contrib
+        "handler-case handle dotrace deftrace");
+
+    var tests = {
+        digit: /\d/,
+        digit_or_colon: /[\d:]/,
+        hex: /[0-9a-f]/i,
+        sign: /[+-]/,
+        exponent: /e/i,
+        keyword_char: /[^\s\(\[\;\)\]]/,
+        symbol: /[\w*+!\-\._?:\/]/
+    };
+
+    function stateStack(indent, type, prev) { // represents a state stack object
+        this.indent = indent;
+        this.type = type;
+        this.prev = prev;
+    }
+
+    function pushStack(state, indent, type) {
+        state.indentStack = new stateStack(indent, type, state.indentStack);
+    }
+
+    function popStack(state) {
+        state.indentStack = state.indentStack.prev;
+    }
+
+    function isNumber(ch, stream){
+        // hex
+        if ( ch === '0' && stream.eat(/x/i) ) {
+            stream.eatWhile(tests.hex);
+            return true;
+        }
+
+        // leading sign
+        if ( ( ch == '+' || ch == '-' ) && ( tests.digit.test(stream.peek()) ) ) {
+          stream.eat(tests.sign);
+          ch = stream.next();
+        }
+
+        if ( tests.digit.test(ch) ) {
+            stream.eat(ch);
+            stream.eatWhile(tests.digit);
+
+            if ( '.' == stream.peek() ) {
+                stream.eat('.');
+                stream.eatWhile(tests.digit);
+            }
+
+            if ( stream.eat(tests.exponent) ) {
+                stream.eat(tests.sign);
+                stream.eatWhile(tests.digit);
+            }
+
+            return true;
+        }
+
+        return false;
+    }
+
+    // Eat character that starts after backslash \
+    function eatCharacter(stream) {
+        var first = stream.next();
+        // Read special literals: backspace, newline, space, return.
+        // Just read all lowercase letters.
+        if (first.match(/[a-z]/) && stream.match(/[a-z]+/, true)) {
+            return;
+        }
+        // Read unicode character: \u1000 \uA0a1
+        if (first === "u") {
+            stream.match(/[0-9a-z]{4}/i, true);
+        }
+    }
+
+    return {
+        startState: function () {
+            return {
+                indentStack: null,
+                indentation: 0,
+                mode: false
+            };
+        },
+
+        token: function (stream, state) {
+            if (state.indentStack == null && stream.sol()) {
+                // update indentation, but only if indentStack is empty
+                state.indentation = stream.indentation();
+            }
+
+            // skip spaces
+            if (stream.eatSpace()) {
+                return null;
+            }
+            var returnType = null;
+
+            switch(state.mode){
+                case "string": // multi-line string parsing mode
+                    var next, escaped = false;
+                    while ((next = stream.next()) != null) {
+                        if (next == "\"" && !escaped) {
+
+                            state.mode = false;
+                            break;
+                        }
+                        escaped = !escaped && next == "\\";
+                    }
+                    returnType = STRING; // continue on in string mode
+                    break;
+                default: // default parsing mode
+                    var ch = stream.next();
+
+                    if (ch == "\"") {
+                        state.mode = "string";
+                        returnType = STRING;
+                    } else if (ch == "\\") {
+                        eatCharacter(stream);
+                        returnType = CHARACTER;
+                    } else if (ch == "'" && !( tests.digit_or_colon.test(stream.peek()) )) {
+                        returnType = ATOM;
+                    } else if (ch == ";") { // comment
+                        stream.skipToEnd(); // rest of the line is a comment
+                        returnType = COMMENT;
+                    } else if (isNumber(ch,stream)){
+                        returnType = NUMBER;
+                    } else if (ch == "(" || ch == "[" || ch == "{" ) {
+                        var keyWord = '', indentTemp = stream.column(), letter;
+                        /**
+                        Either
+                        (indent-word ..
+                        (non-indent-word ..
+                        (;something else, bracket, etc.
+                        */
+
+                        if (ch == "(") while ((letter = stream.eat(tests.keyword_char)) != null) {
+                            keyWord += letter;
+                        }
+
+                        if (keyWord.length > 0 && (indentKeys.propertyIsEnumerable(keyWord) ||
+                                                   /^(?:def|with)/.test(keyWord))) { // indent-word
+                            pushStack(state, indentTemp + INDENT_WORD_SKIP, ch);
+                        } else { // non-indent word
+                            // we continue eating the spaces
+                            stream.eatSpace();
+                            if (stream.eol() || stream.peek() == ";") {
+                                // nothing significant after
+                                // we restart indentation 1 space after
+                                pushStack(state, indentTemp + 1, ch);
+                            } else {
+                                pushStack(state, indentTemp + stream.current().length, ch); // else we match
+                            }
+                        }
+                        stream.backUp(stream.current().length - 1); // undo all the eating
+
+                        returnType = BRACKET;
+                    } else if (ch == ")" || ch == "]" || ch == "}") {
+                        returnType = BRACKET;
+                        if (state.indentStack != null && state.indentStack.type == (ch == ")" ? "(" : (ch == "]" ? "[" :"{"))) {
+                            popStack(state);
+                        }
+                    } else if ( ch == ":" ) {
+                        stream.eatWhile(tests.symbol);
+                        return ATOM;
+                    } else {
+                        stream.eatWhile(tests.symbol);
+
+                        if (keywords && keywords.propertyIsEnumerable(stream.current())) {
+                            returnType = KEYWORD;
+                        } else if (builtins && builtins.propertyIsEnumerable(stream.current())) {
+                            returnType = BUILTIN;
+                        } else if (atoms && atoms.propertyIsEnumerable(stream.current())) {
+                            returnType = ATOM;
+                        } else returnType = null;
+                    }
+            }
+
+            return returnType;
+        },
+
+        indent: function (state) {
+            if (state.indentStack == null) return state.indentation;
+            return state.indentStack.indent;
+        },
+
+        lineComment: ";;"
+    };
+});
+
+CodeMirror.defineMIME("text/x-clojure", "clojure");
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/closebrackets.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/closebrackets.js
new file mode 100644
index 000000000..88718b772
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/closebrackets.js
@@ -0,0 +1,82 @@
+(function() {
+  var DEFAULT_BRACKETS = "()[]{}''\"\"";
+  var DEFAULT_EXPLODE_ON_ENTER = "[]{}";
+  var SPACE_CHAR_REGEX = /\s/;
+
+  CodeMirror.defineOption("autoCloseBrackets", false, function(cm, val, old) {
+    if (old != CodeMirror.Init && old)
+      cm.removeKeyMap("autoCloseBrackets");
+    if (!val) return;
+    var pairs = DEFAULT_BRACKETS, explode = DEFAULT_EXPLODE_ON_ENTER;
+    if (typeof val == "string") pairs = val;
+    else if (typeof val == "object") {
+      if (val.pairs != null) pairs = val.pairs;
+      if (val.explode != null) explode = val.explode;
+    }
+    var map = buildKeymap(pairs);
+    if (explode) map.Enter = buildExplodeHandler(explode);
+    cm.addKeyMap(map);
+  });
+
+  function charsAround(cm, pos) {
+    var str = cm.getRange(CodeMirror.Pos(pos.line, pos.ch - 1),
+                          CodeMirror.Pos(pos.line, pos.ch + 1));
+    return str.length == 2 ? str : null;
+  }
+
+  function buildKeymap(pairs) {
+    var map = {
+      name : "autoCloseBrackets",
+      Backspace: function(cm) {
+        if (cm.somethingSelected()) return CodeMirror.Pass;
+        var cur = cm.getCursor(), around = charsAround(cm, cur);
+        if (around && pairs.indexOf(around) % 2 == 0)
+          cm.replaceRange("", CodeMirror.Pos(cur.line, cur.ch - 1), CodeMirror.Pos(cur.line, cur.ch + 1));
+        else
+          return CodeMirror.Pass;
+      }
+    };
+    var closingBrackets = "";
+    for (var i = 0; i < pairs.length; i += 2) (function(left, right) {
+      if (left != right) closingBrackets += right;
+      function surround(cm) {
+        var selection = cm.getSelection();
+        cm.replaceSelection(left + selection + right);
+      }
+      function maybeOverwrite(cm) {
+        var cur = cm.getCursor(), ahead = cm.getRange(cur, CodeMirror.Pos(cur.line, cur.ch + 1));
+        if (ahead != right || cm.somethingSelected()) return CodeMirror.Pass;
+        else cm.execCommand("goCharRight");
+      }
+      map["'" + left + "'"] = function(cm) {
+        if (left == "'" && cm.getTokenAt(cm.getCursor()).type == "comment")
+          return CodeMirror.Pass;
+        if (cm.somethingSelected()) return surround(cm);
+        if (left == right && maybeOverwrite(cm) != CodeMirror.Pass) return;
+        var cur = cm.getCursor(), ahead = CodeMirror.Pos(cur.line, cur.ch + 1);
+        var line = cm.getLine(cur.line), nextChar = line.charAt(cur.ch), curChar = cur.ch > 0 ? line.charAt(cur.ch - 1) : "";
+        if (left == right && CodeMirror.isWordChar(curChar))
+          return CodeMirror.Pass;
+        if (line.length == cur.ch || closingBrackets.indexOf(nextChar) >= 0 || SPACE_CHAR_REGEX.test(nextChar))
+          cm.replaceSelection(left + right, {head: ahead, anchor: ahead});
+        else
+          return CodeMirror.Pass;
+      };
+      if (left != right) map["'" + right + "'"] = maybeOverwrite;
+    })(pairs.charAt(i), pairs.charAt(i + 1));
+    return map;
+  }
+
+  function buildExplodeHandler(pairs) {
+    return function(cm) {
+      var cur = cm.getCursor(), around = charsAround(cm, cur);
+      if (!around || pairs.indexOf(around) % 2 != 0) return CodeMirror.Pass;
+      cm.operation(function() {
+        var newPos = CodeMirror.Pos(cur.line + 1, 0);
+        cm.replaceSelection("\n\n", {anchor: newPos, head: newPos}, "+input");
+        cm.indentLine(cur.line + 1, null, true);
+        cm.indentLine(cur.line + 2, null, true);
+      });
+    };
+  }
+})();
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.css b/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.css
new file mode 100644
index 000000000..52881f7df
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.css
@@ -0,0 +1,248 @@
+/* BASICS */
+
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 300px;
+}
+.CodeMirror-scroll {
+  /* Set scrolling behaviour here */
+  overflow: auto;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre {
+  padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+}
+
+/* CURSOR */
+
+.CodeMirror div.CodeMirror-cursor {
+  border-left: 1px solid black;
+  z-index: 3;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
+  width: auto;
+  border: 0;
+  background: #7e7;
+  z-index: 1;
+}
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite {}
+
+.cm-tab { display: inline-block; }
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable {color: black;}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3 {color: #085;}
+.cm-s-default .cm-property {color: black;}
+.cm-s-default .cm-operator {color: black;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-error {color: #f00;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+
+.cm-invalidchar {color: #f00;}
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  line-height: 1;
+  position: relative;
+  overflow: hidden;
+  background: white;
+  color: black;
+}
+
+.CodeMirror-scroll {
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -30px; margin-right: -30px;
+  padding-bottom: 30px; padding-right: 30px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+}
+.CodeMirror-sizer {
+  position: relative;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actuall scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0; top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0; left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute; left: 0; top: 0;
+  padding-bottom: 30px;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  padding-bottom: 30px;
+  margin-bottom: -32px;
+  display: inline-block;
+  /* Hack to make IE7 behave */
+  *zoom:1;
+  *display:inline;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+
+.CodeMirror-lines {
+  cursor: text;
+}
+.CodeMirror pre {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+}
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  overflow: auto;
+}
+
+.CodeMirror-widget {
+}
+
+.CodeMirror-wrap .CodeMirror-scroll {
+  overflow-x: hidden;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%; height: 0px;
+  overflow: hidden;
+  visibility: hidden;
+}
+.CodeMirror-measure pre { position: static; }
+
+.CodeMirror div.CodeMirror-cursor {
+  position: absolute;
+  visibility: hidden;
+  border-right: none;
+  width: 0;
+}
+.CodeMirror-focused div.CodeMirror-cursor {
+  visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+
+.cm-searching {
+  background: #ffa;
+  background: rgba(255, 255, 0, .4);
+}
+
+/* IE7 hack to prevent it from returning funny offsetTops on the spans */
+.CodeMirror span { *vertical-align: text-bottom; }
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursor {
+    visibility: hidden;
+  }
+}
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.js
new file mode 100644
index 000000000..fff4344ae
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.js
@@ -0,0 +1,5780 @@
+// CodeMirror is the only global var we claim
+window.CodeMirror = (function() {
+  "use strict";
+
+  // BROWSER SNIFFING
+
+  // Crude, but necessary to handle a number of hard-to-feature-detect
+  // bugs and behavior differences.
+  var gecko = /gecko\/\d/i.test(navigator.userAgent);
+  var ie = /MSIE \d/.test(navigator.userAgent);
+  var ie_lt8 = ie && (document.documentMode == null || document.documentMode < 8);
+  var ie_lt9 = ie && (document.documentMode == null || document.documentMode < 9);
+  var webkit = /WebKit\//.test(navigator.userAgent);
+  var qtwebkit = webkit && /Qt\/\d+\.\d+/.test(navigator.userAgent);
+  var chrome = /Chrome\//.test(navigator.userAgent);
+  var opera = /Opera\//.test(navigator.userAgent);
+  var safari = /Apple Computer/.test(navigator.vendor);
+  var khtml = /KHTML\//.test(navigator.userAgent);
+  var mac_geLion = /Mac OS X 1\d\D([7-9]|\d\d)\D/.test(navigator.userAgent);
+  var mac_geMountainLion = /Mac OS X 1\d\D([8-9]|\d\d)\D/.test(navigator.userAgent);
+  var phantom = /PhantomJS/.test(navigator.userAgent);
+
+  var ios = /AppleWebKit/.test(navigator.userAgent) && /Mobile\/\w+/.test(navigator.userAgent);
+  // This is woefully incomplete. Suggestions for alternative methods welcome.
+  var mobile = ios || /Android|webOS|BlackBerry|Opera Mini|Opera Mobi|IEMobile/i.test(navigator.userAgent);
+  var mac = ios || /Mac/.test(navigator.platform);
+  var windows = /windows/i.test(navigator.platform);
+
+  var opera_version = opera && navigator.userAgent.match(/Version\/(\d*\.\d*)/);
+  if (opera_version) opera_version = Number(opera_version[1]);
+  // Some browsers use the wrong event properties to signal cmd/ctrl on OS X
+  var flipCtrlCmd = mac && (qtwebkit || opera && (opera_version == null || opera_version < 12.11));
+  var captureMiddleClick = gecko || (ie && !ie_lt9);
+
+  // Optimize some code when these features are not used
+  var sawReadOnlySpans = false, sawCollapsedSpans = false;
+
+  // CONSTRUCTOR
+
+  function CodeMirror(place, options) {
+    if (!(this instanceof CodeMirror)) return new CodeMirror(place, options);
+
+    this.options = options = options || {};
+    // Determine effective options based on given values and defaults.
+    for (var opt in defaults) if (!options.hasOwnProperty(opt) && defaults.hasOwnProperty(opt))
+      options[opt] = defaults[opt];
+    setGuttersForLineNumbers(options);
+
+    var docStart = typeof options.value == "string" ? 0 : options.value.first;
+    var display = this.display = makeDisplay(place, docStart);
+    display.wrapper.CodeMirror = this;
+    updateGutters(this);
+    if (options.autofocus && !mobile) focusInput(this);
+
+    this.state = {keyMaps: [],
+                  overlays: [],
+                  modeGen: 0,
+                  overwrite: false, focused: false,
+                  suppressEdits: false, pasteIncoming: false,
+                  draggingText: false,
+                  highlight: new Delayed()};
+
+    themeChanged(this);
+    if (options.lineWrapping)
+      this.display.wrapper.className += " CodeMirror-wrap";
+
+    var doc = options.value;
+    if (typeof doc == "string") doc = new Doc(options.value, options.mode);
+    operation(this, attachDoc)(this, doc);
+
+    // Override magic textarea content restore that IE sometimes does
+    // on our hidden textarea on reload
+    if (ie) setTimeout(bind(resetInput, this, true), 20);
+
+    registerEventHandlers(this);
+    // IE throws unspecified error in certain cases, when
+    // trying to access activeElement before onload
+    var hasFocus; try { hasFocus = (document.activeElement == display.input); } catch(e) { }
+    if (hasFocus || (options.autofocus && !mobile)) setTimeout(bind(onFocus, this), 20);
+    else onBlur(this);
+
+    operation(this, function() {
+      for (var opt in optionHandlers)
+        if (optionHandlers.propertyIsEnumerable(opt))
+          optionHandlers[opt](this, options[opt], Init);
+      for (var i = 0; i < initHooks.length; ++i) initHooks[i](this);
+    })();
+  }
+
+  // DISPLAY CONSTRUCTOR
+
+  function makeDisplay(place, docStart) {
+    var d = {};
+
+    var input = d.input = elt("textarea", null, null, "position: absolute; padding: 0; width: 1px; height: 1em; outline: none; font-size: 4px;");
+    if (webkit) input.style.width = "1000px";
+    else input.setAttribute("wrap", "off");
+    // if border: 0; -- iOS fails to open keyboard (issue #1287)
+    if (ios) input.style.border = "1px solid black";
+    input.setAttribute("autocorrect", "off"); input.setAttribute("autocapitalize", "off"); input.setAttribute("spellcheck", "false");
+
+    // Wraps and hides input textarea
+    d.inputDiv = elt("div", [input], null, "overflow: hidden; position: relative; width: 3px; height: 0px;");
+    // The actual fake scrollbars.
+    d.scrollbarH = elt("div", [elt("div", null, null, "height: 1px")], "CodeMirror-hscrollbar");
+    d.scrollbarV = elt("div", [elt("div", null, null, "width: 1px")], "CodeMirror-vscrollbar");
+    d.scrollbarFiller = elt("div", null, "CodeMirror-scrollbar-filler");
+    d.gutterFiller = elt("div", null, "CodeMirror-gutter-filler");
+    // DIVs containing the selection and the actual code
+    d.lineDiv = elt("div", null, "CodeMirror-code");
+    d.selectionDiv = elt("div", null, null, "position: relative; z-index: 1");
+    // Blinky cursor, and element used to ensure cursor fits at the end of a line
+    d.cursor = elt("div", "\u00a0", "CodeMirror-cursor");
+    // Secondary cursor, shown when on a 'jump' in bi-directional text
+    d.otherCursor = elt("div", "\u00a0", "CodeMirror-cursor CodeMirror-secondarycursor");
+    // Used to measure text size
+    d.measure = elt("div", null, "CodeMirror-measure");
+    // Wraps everything that needs to exist inside the vertically-padded coordinate system
+    d.lineSpace = elt("div", [d.measure, d.selectionDiv, d.lineDiv, d.cursor, d.otherCursor],
+                         null, "position: relative; outline: none");
+    // Moved around its parent to cover visible view
+    d.mover = elt("div", [elt("div", [d.lineSpace], "CodeMirror-lines")], null, "position: relative");
+    // Set to the height of the text, causes scrolling
+    d.sizer = elt("div", [d.mover], "CodeMirror-sizer");
+    // D is needed because behavior of elts with overflow: auto and padding is inconsistent across browsers
+    d.heightForcer = elt("div", null, null, "position: absolute; height: " + scrollerCutOff + "px; width: 1px;");
+    // Will contain the gutters, if any
+    d.gutters = elt("div", null, "CodeMirror-gutters");
+    d.lineGutter = null;
+    // Provides scrolling
+    d.scroller = elt("div", [d.sizer, d.heightForcer, d.gutters], "CodeMirror-scroll");
+    d.scroller.setAttribute("tabIndex", "-1");
+    // The element in which the editor lives.
+    d.wrapper = elt("div", [d.inputDiv, d.scrollbarH, d.scrollbarV,
+                            d.scrollbarFiller, d.gutterFiller, d.scroller], "CodeMirror");
+    // Work around IE7 z-index bug
+    if (ie_lt8) { d.gutters.style.zIndex = -1; d.scroller.style.paddingRight = 0; }
+    if (place.appendChild) place.appendChild(d.wrapper); else place(d.wrapper);
+
+    // Needed to hide big blue blinking cursor on Mobile Safari
+    if (ios) input.style.width = "0px";
+    if (!webkit) d.scroller.draggable = true;
+    // Needed to handle Tab key in KHTML
+    if (khtml) { d.inputDiv.style.height = "1px"; d.inputDiv.style.position = "absolute"; }
+    // Need to set a minimum width to see the scrollbar on IE7 (but must not set it on IE8).
+    else if (ie_lt8) d.scrollbarH.style.minWidth = d.scrollbarV.style.minWidth = "18px";
+
+    // Current visible range (may be bigger than the view window).
+    d.viewOffset = d.lastSizeC = 0;
+    d.showingFrom = d.showingTo = docStart;
+
+    // Used to only resize the line number gutter when necessary (when
+    // the amount of lines crosses a boundary that makes its width change)
+    d.lineNumWidth = d.lineNumInnerWidth = d.lineNumChars = null;
+    // See readInput and resetInput
+    d.prevInput = "";
+    // Set to true when a non-horizontal-scrolling widget is added. As
+    // an optimization, widget aligning is skipped when d is false.
+    d.alignWidgets = false;
+    // Flag that indicates whether we currently expect input to appear
+    // (after some event like 'keypress' or 'input') and are polling
+    // intensively.
+    d.pollingFast = false;
+    // Self-resetting timeout for the poller
+    d.poll = new Delayed();
+
+    d.cachedCharWidth = d.cachedTextHeight = null;
+    d.measureLineCache = [];
+    d.measureLineCachePos = 0;
+
+    // Tracks when resetInput has punted to just putting a short
+    // string instead of the (large) selection.
+    d.inaccurateSelection = false;
+
+    // Tracks the maximum line length so that the horizontal scrollbar
+    // can be kept static when scrolling.
+    d.maxLine = null;
+    d.maxLineLength = 0;
+    d.maxLineChanged = false;
+
+    // Used for measuring wheel scrolling granularity
+    d.wheelDX = d.wheelDY = d.wheelStartX = d.wheelStartY = null;
+
+    return d;
+  }
+
+  // STATE UPDATES
+
+  // Used to get the editor into a consistent state again when options change.
+
+  function loadMode(cm) {
+    cm.doc.mode = CodeMirror.getMode(cm.options, cm.doc.modeOption);
+    cm.doc.iter(function(line) {
+      if (line.stateAfter) line.stateAfter = null;
+      if (line.styles) line.styles = null;
+    });
+    cm.doc.frontier = cm.doc.first;
+    startWorker(cm, 100);
+    cm.state.modeGen++;
+    if (cm.curOp) regChange(cm);
+  }
+
+  function wrappingChanged(cm) {
+    if (cm.options.lineWrapping) {
+      cm.display.wrapper.className += " CodeMirror-wrap";
+      cm.display.sizer.style.minWidth = "";
+    } else {
+      cm.display.wrapper.className = cm.display.wrapper.className.replace(" CodeMirror-wrap", "");
+      computeMaxLength(cm);
+    }
+    estimateLineHeights(cm);
+    regChange(cm);
+    clearCaches(cm);
+    setTimeout(function(){updateScrollbars(cm);}, 100);
+  }
+
+  function estimateHeight(cm) {
+    var th = textHeight(cm.display), wrapping = cm.options.lineWrapping;
+    var perLine = wrapping && Math.max(5, cm.display.scroller.clientWidth / charWidth(cm.display) - 3);
+    return function(line) {
+      if (lineIsHidden(cm.doc, line))
+        return 0;
+      else if (wrapping)
+        return (Math.ceil(line.text.length / perLine) || 1) * th;
+      else
+        return th;
+    };
+  }
+
+  function estimateLineHeights(cm) {
+    var doc = cm.doc, est = estimateHeight(cm);
+    doc.iter(function(line) {
+      var estHeight = est(line);
+      if (estHeight != line.height) updateLineHeight(line, estHeight);
+    });
+  }
+
+  function keyMapChanged(cm) {
+    var map = keyMap[cm.options.keyMap], style = map.style;
+    cm.display.wrapper.className = cm.display.wrapper.className.replace(/\s*cm-keymap-\S+/g, "") +
+      (style ? " cm-keymap-" + style : "");
+    cm.state.disableInput = map.disableInput;
+  }
+
+  function themeChanged(cm) {
+    cm.display.wrapper.className = cm.display.wrapper.className.replace(/\s*cm-s-\S+/g, "") +
+      cm.options.theme.replace(/(^|\s)\s*/g, " cm-s-");
+    clearCaches(cm);
+  }
+
+  function guttersChanged(cm) {
+    updateGutters(cm);
+    regChange(cm);
+    setTimeout(function(){alignHorizontally(cm);}, 20);
+  }
+
+  function updateGutters(cm) {
+    var gutters = cm.display.gutters, specs = cm.options.gutters;
+    removeChildren(gutters);
+    for (var i = 0; i < specs.length; ++i) {
+      var gutterClass = specs[i];
+      var gElt = gutters.appendChild(elt("div", null, "CodeMirror-gutter " + gutterClass));
+      if (gutterClass == "CodeMirror-linenumbers") {
+        cm.display.lineGutter = gElt;
+        gElt.style.width = (cm.display.lineNumWidth || 1) + "px";
+      }
+    }
+    gutters.style.display = i ? "" : "none";
+  }
+
+  function lineLength(doc, line) {
+    if (line.height == 0) return 0;
+    var len = line.text.length, merged, cur = line;
+    while (merged = collapsedSpanAtStart(cur)) {
+      var found = merged.find();
+      cur = getLine(doc, found.from.line);
+      len += found.from.ch - found.to.ch;
+    }
+    cur = line;
+    while (merged = collapsedSpanAtEnd(cur)) {
+      var found = merged.find();
+      len -= cur.text.length - found.from.ch;
+      cur = getLine(doc, found.to.line);
+      len += cur.text.length - found.to.ch;
+    }
+    return len;
+  }
+
+  function computeMaxLength(cm) {
+    var d = cm.display, doc = cm.doc;
+    d.maxLine = getLine(doc, doc.first);
+    d.maxLineLength = lineLength(doc, d.maxLine);
+    d.maxLineChanged = true;
+    doc.iter(function(line) {
+      var len = lineLength(doc, line);
+      if (len > d.maxLineLength) {
+        d.maxLineLength = len;
+        d.maxLine = line;
+      }
+    });
+  }
+
+  // Make sure the gutters options contains the element
+  // "CodeMirror-linenumbers" when the lineNumbers option is true.
+  function setGuttersForLineNumbers(options) {
+    var found = false;
+    for (var i = 0; i < options.gutters.length; ++i) {
+      if (options.gutters[i] == "CodeMirror-linenumbers") {
+        if (options.lineNumbers) found = true;
+        else options.gutters.splice(i--, 1);
+      }
+    }
+    if (!found && options.lineNumbers)
+      options.gutters.push("CodeMirror-linenumbers");
+  }
+
+  // SCROLLBARS
+
+  // Re-synchronize the fake scrollbars with the actual size of the
+  // content. Optionally force a scrollTop.
+  function updateScrollbars(cm) {
+    var d = cm.display, docHeight = cm.doc.height;
+    var totalHeight = docHeight + paddingVert(d);
+    d.sizer.style.minHeight = d.heightForcer.style.top = totalHeight + "px";
+    d.gutters.style.height = Math.max(totalHeight, d.scroller.clientHeight - scrollerCutOff) + "px";
+    var scrollHeight = Math.max(totalHeight, d.scroller.scrollHeight);
+    var needsH = d.scroller.scrollWidth > (d.scroller.clientWidth + 1);
+    var needsV = scrollHeight > (d.scroller.clientHeight + 1);
+    if (needsV) {
+      d.scrollbarV.style.display = "block";
+      d.scrollbarV.style.bottom = needsH ? scrollbarWidth(d.measure) + "px" : "0";
+      d.scrollbarV.firstChild.style.height =
+        (scrollHeight - d.scroller.clientHeight + d.scrollbarV.clientHeight) + "px";
+    } else d.scrollbarV.style.display = "";
+    if (needsH) {
+      d.scrollbarH.style.display = "block";
+      d.scrollbarH.style.right = needsV ? scrollbarWidth(d.measure) + "px" : "0";
+      d.scrollbarH.firstChild.style.width =
+        (d.scroller.scrollWidth - d.scroller.clientWidth + d.scrollbarH.clientWidth) + "px";
+    } else d.scrollbarH.style.display = "";
+    if (needsH && needsV) {
+      d.scrollbarFiller.style.display = "block";
+      d.scrollbarFiller.style.height = d.scrollbarFiller.style.width = scrollbarWidth(d.measure) + "px";
+    } else d.scrollbarFiller.style.display = "";
+    if (needsH && cm.options.coverGutterNextToScrollbar && cm.options.fixedGutter) {
+      d.gutterFiller.style.display = "block";
+      d.gutterFiller.style.height = scrollbarWidth(d.measure) + "px";
+      d.gutterFiller.style.width = d.gutters.offsetWidth + "px";
+    } else d.gutterFiller.style.display = "";
+
+    if (mac_geLion && scrollbarWidth(d.measure) === 0)
+      d.scrollbarV.style.minWidth = d.scrollbarH.style.minHeight = mac_geMountainLion ? "18px" : "12px";
+  }
+
+  function visibleLines(display, doc, viewPort) {
+    var top = display.scroller.scrollTop, height = display.wrapper.clientHeight;
+    if (typeof viewPort == "number") top = viewPort;
+    else if (viewPort) {top = viewPort.top; height = viewPort.bottom - viewPort.top;}
+    top = Math.floor(top - paddingTop(display));
+    var bottom = Math.ceil(top + height);
+    return {from: lineAtHeight(doc, top), to: lineAtHeight(doc, bottom)};
+  }
+
+  // LINE NUMBERS
+
+  function alignHorizontally(cm) {
+    var display = cm.display;
+    if (!display.alignWidgets && (!display.gutters.firstChild || !cm.options.fixedGutter)) return;
+    var comp = compensateForHScroll(display) - display.scroller.scrollLeft + cm.doc.scrollLeft;
+    var gutterW = display.gutters.offsetWidth, l = comp + "px";
+    for (var n = display.lineDiv.firstChild; n; n = n.nextSibling) if (n.alignable) {
+      for (var i = 0, a = n.alignable; i < a.length; ++i) a[i].style.left = l;
+    }
+    if (cm.options.fixedGutter)
+      display.gutters.style.left = (comp + gutterW) + "px";
+  }
+
+  function maybeUpdateLineNumberWidth(cm) {
+    if (!cm.options.lineNumbers) return false;
+    var doc = cm.doc, last = lineNumberFor(cm.options, doc.first + doc.size - 1), display = cm.display;
+    if (last.length != display.lineNumChars) {
+      var test = display.measure.appendChild(elt("div", [elt("div", last)],
+                                                 "CodeMirror-linenumber CodeMirror-gutter-elt"));
+      var innerW = test.firstChild.offsetWidth, padding = test.offsetWidth - innerW;
+      display.lineGutter.style.width = "";
+      display.lineNumInnerWidth = Math.max(innerW, display.lineGutter.offsetWidth - padding);
+      display.lineNumWidth = display.lineNumInnerWidth + padding;
+      display.lineNumChars = display.lineNumInnerWidth ? last.length : -1;
+      display.lineGutter.style.width = display.lineNumWidth + "px";
+      return true;
+    }
+    return false;
+  }
+
+  function lineNumberFor(options, i) {
+    return String(options.lineNumberFormatter(i + options.firstLineNumber));
+  }
+  function compensateForHScroll(display) {
+    return getRect(display.scroller).left - getRect(display.sizer).left;
+  }
+
+  // DISPLAY DRAWING
+
+  function updateDisplay(cm, changes, viewPort) {
+    var oldFrom = cm.display.showingFrom, oldTo = cm.display.showingTo, updated;
+    var visible = visibleLines(cm.display, cm.doc, viewPort);
+    for (;;) {
+      if (!updateDisplayInner(cm, changes, visible)) break;
+      updated = true;
+      updateSelection(cm);
+      updateScrollbars(cm);
+
+      // Clip forced viewport to actual scrollable area
+      if (viewPort)
+        viewPort = Math.min(cm.display.scroller.scrollHeight - cm.display.scroller.clientHeight,
+                            typeof viewPort == "number" ? viewPort : viewPort.top);
+      visible = visibleLines(cm.display, cm.doc, viewPort);
+      if (visible.from >= cm.display.showingFrom && visible.to <= cm.display.showingTo)
+        break;
+      changes = [];
+    }
+
+    if (updated) {
+      signalLater(cm, "update", cm);
+      if (cm.display.showingFrom != oldFrom || cm.display.showingTo != oldTo)
+        signalLater(cm, "viewportChange", cm, cm.display.showingFrom, cm.display.showingTo);
+    }
+    return updated;
+  }
+
+  // Uses a set of changes plus the current scroll position to
+  // determine which DOM updates have to be made, and makes the
+  // updates.
+  function updateDisplayInner(cm, changes, visible) {
+    var display = cm.display, doc = cm.doc;
+    if (!display.wrapper.clientWidth) {
+      display.showingFrom = display.showingTo = doc.first;
+      display.viewOffset = 0;
+      return;
+    }
+
+    // Bail out if the visible area is already rendered and nothing changed.
+    if (changes.length == 0 &&
+        visible.from > display.showingFrom && visible.to < display.showingTo)
+      return;
+
+    if (maybeUpdateLineNumberWidth(cm))
+      changes = [{from: doc.first, to: doc.first + doc.size}];
+    var gutterW = display.sizer.style.marginLeft = display.gutters.offsetWidth + "px";
+    display.scrollbarH.style.left = cm.options.fixedGutter ? gutterW : "0";
+
+    // Used to determine which lines need their line numbers updated
+    var positionsChangedFrom = Infinity;
+    if (cm.options.lineNumbers)
+      for (var i = 0; i < changes.length; ++i)
+        if (changes[i].diff) { positionsChangedFrom = changes[i].from; break; }
+
+    var end = doc.first + doc.size;
+    var from = Math.max(visible.from - cm.options.viewportMargin, doc.first);
+    var to = Math.min(end, visible.to + cm.options.viewportMargin);
+    if (display.showingFrom < from && from - display.showingFrom < 20) from = Math.max(doc.first, display.showingFrom);
+    if (display.showingTo > to && display.showingTo - to < 20) to = Math.min(end, display.showingTo);
+    if (sawCollapsedSpans) {
+      from = lineNo(visualLine(doc, getLine(doc, from)));
+      while (to < end && lineIsHidden(doc, getLine(doc, to))) ++to;
+    }
+
+    // Create a range of theoretically intact lines, and punch holes
+    // in that using the change info.
+    var intact = [{from: Math.max(display.showingFrom, doc.first),
+                   to: Math.min(display.showingTo, end)}];
+    if (intact[0].from >= intact[0].to) intact = [];
+    else intact = computeIntact(intact, changes);
+    // When merged lines are present, we might have to reduce the
+    // intact ranges because changes in continued fragments of the
+    // intact lines do require the lines to be redrawn.
+    if (sawCollapsedSpans)
+      for (var i = 0; i < intact.length; ++i) {
+        var range = intact[i], merged;
+        while (merged = collapsedSpanAtEnd(getLine(doc, range.to - 1))) {
+          var newTo = merged.find().from.line;
+          if (newTo > range.from) range.to = newTo;
+          else { intact.splice(i--, 1); break; }
+        }
+      }
+
+    // Clip off the parts that won't be visible
+    var intactLines = 0;
+    for (var i = 0; i < intact.length; ++i) {
+      var range = intact[i];
+      if (range.from < from) range.from = from;
+      if (range.to > to) range.to = to;
+      if (range.from >= range.to) intact.splice(i--, 1);
+      else intactLines += range.to - range.from;
+    }
+    if (intactLines == to - from && from == display.showingFrom && to == display.showingTo) {
+      updateViewOffset(cm);
+      return;
+    }
+    intact.sort(function(a, b) {return a.from - b.from;});
+
+    // Avoid crashing on IE's "unspecified error" when in iframes
+    try {
+      var focused = document.activeElement;
+    } catch(e) {}
+    if (intactLines < (to - from) * .7) display.lineDiv.style.display = "none";
+    patchDisplay(cm, from, to, intact, positionsChangedFrom);
+    display.lineDiv.style.display = "";
+    if (focused && document.activeElement != focused && focused.offsetHeight) focused.focus();
+
+    var different = from != display.showingFrom || to != display.showingTo ||
+      display.lastSizeC != display.wrapper.clientHeight;
+    // This is just a bogus formula that detects when the editor is
+    // resized or the font size changes.
+    if (different) {
+      display.lastSizeC = display.wrapper.clientHeight;
+      startWorker(cm, 400);
+    }
+    display.showingFrom = from; display.showingTo = to;
+
+    var prevBottom = display.lineDiv.offsetTop;
+    for (var node = display.lineDiv.firstChild, height; node; node = node.nextSibling) if (node.lineObj) {
+      if (ie_lt8) {
+        var bot = node.offsetTop + node.offsetHeight;
+        height = bot - prevBottom;
+        prevBottom = bot;
+      } else {
+        var box = getRect(node);
+        height = box.bottom - box.top;
+      }
+      var diff = node.lineObj.height - height;
+      if (height < 2) height = textHeight(display);
+      if (diff > .001 || diff < -.001) {
+        updateLineHeight(node.lineObj, height);
+        var widgets = node.lineObj.widgets;
+        if (widgets) for (var i = 0; i < widgets.length; ++i)
+          widgets[i].height = widgets[i].node.offsetHeight;
+      }
+    }
+    updateViewOffset(cm);
+
+    return true;
+  }
+
+  function updateViewOffset(cm) {
+    var off = cm.display.viewOffset = heightAtLine(cm, getLine(cm.doc, cm.display.showingFrom));
+    // Position the mover div to align with the current virtual scroll position
+    cm.display.mover.style.top = off + "px";
+  }
+
+  function computeIntact(intact, changes) {
+    for (var i = 0, l = changes.length || 0; i < l; ++i) {
+      var change = changes[i], intact2 = [], diff = change.diff || 0;
+      for (var j = 0, l2 = intact.length; j < l2; ++j) {
+        var range = intact[j];
+        if (change.to <= range.from && change.diff) {
+          intact2.push({from: range.from + diff, to: range.to + diff});
+        } else if (change.to <= range.from || change.from >= range.to) {
+          intact2.push(range);
+        } else {
+          if (change.from > range.from)
+            intact2.push({from: range.from, to: change.from});
+          if (change.to < range.to)
+            intact2.push({from: change.to + diff, to: range.to + diff});
+        }
+      }
+      intact = intact2;
+    }
+    return intact;
+  }
+
+  function getDimensions(cm) {
+    var d = cm.display, left = {}, width = {};
+    for (var n = d.gutters.firstChild, i = 0; n; n = n.nextSibling, ++i) {
+      left[cm.options.gutters[i]] = n.offsetLeft;
+      width[cm.options.gutters[i]] = n.offsetWidth;
+    }
+    return {fixedPos: compensateForHScroll(d),
+            gutterTotalWidth: d.gutters.offsetWidth,
+            gutterLeft: left,
+            gutterWidth: width,
+            wrapperWidth: d.wrapper.clientWidth};
+  }
+
+  function patchDisplay(cm, from, to, intact, updateNumbersFrom) {
+    var dims = getDimensions(cm);
+    var display = cm.display, lineNumbers = cm.options.lineNumbers;
+    if (!intact.length && (!webkit || !cm.display.currentWheelTarget))
+      removeChildren(display.lineDiv);
+    var container = display.lineDiv, cur = container.firstChild;
+
+    function rm(node) {
+      var next = node.nextSibling;
+      if (webkit && mac && cm.display.currentWheelTarget == node) {
+        node.style.display = "none";
+        node.lineObj = null;
+      } else {
+        node.parentNode.removeChild(node);
+      }
+      return next;
+    }
+
+    var nextIntact = intact.shift(), lineN = from;
+    cm.doc.iter(from, to, function(line) {
+      if (nextIntact && nextIntact.to == lineN) nextIntact = intact.shift();
+      if (lineIsHidden(cm.doc, line)) {
+        if (line.height != 0) updateLineHeight(line, 0);
+        if (line.widgets && cur.previousSibling) for (var i = 0; i < line.widgets.length; ++i) {
+          var w = line.widgets[i];
+          if (w.showIfHidden) {
+            var prev = cur.previousSibling;
+            if (/pre/i.test(prev.nodeName)) {
+              var wrap = elt("div", null, null, "position: relative");
+              prev.parentNode.replaceChild(wrap, prev);
+              wrap.appendChild(prev);
+              prev = wrap;
+            }
+            var wnode = prev.appendChild(elt("div", [w.node], "CodeMirror-linewidget"));
+            if (!w.handleMouseEvents) wnode.ignoreEvents = true;
+            positionLineWidget(w, wnode, prev, dims);
+          }
+        }
+      } else if (nextIntact && nextIntact.from <= lineN && nextIntact.to > lineN) {
+        // This line is intact. Skip to the actual node. Update its
+        // line number if needed.
+        while (cur.lineObj != line) cur = rm(cur);
+        if (lineNumbers && updateNumbersFrom <= lineN && cur.lineNumber)
+          setTextContent(cur.lineNumber, lineNumberFor(cm.options, lineN));
+        cur = cur.nextSibling;
+      } else {
+        // For lines with widgets, make an attempt to find and reuse
+        // the existing element, so that widgets aren't needlessly
+        // removed and re-inserted into the dom
+        if (line.widgets) for (var j = 0, search = cur, reuse; search && j < 20; ++j, search = search.nextSibling)
+          if (search.lineObj == line && /div/i.test(search.nodeName)) { reuse = search; break; }
+        // This line needs to be generated.
+        var lineNode = buildLineElement(cm, line, lineN, dims, reuse);
+        if (lineNode != reuse) {
+          container.insertBefore(lineNode, cur);
+        } else {
+          while (cur != reuse) cur = rm(cur);
+          cur = cur.nextSibling;
+        }
+
+        lineNode.lineObj = line;
+      }
+      ++lineN;
+    });
+    while (cur) cur = rm(cur);
+  }
+
+  function buildLineElement(cm, line, lineNo, dims, reuse) {
+    var lineElement = lineContent(cm, line);
+    var markers = line.gutterMarkers, display = cm.display, wrap;
+
+    if (!cm.options.lineNumbers && !markers && !line.bgClass && !line.wrapClass && !line.widgets)
+      return lineElement;
+
+    // Lines with gutter elements, widgets or a background class need
+    // to be wrapped again, and have the extra elements added to the
+    // wrapper div
+
+    if (reuse) {
+      reuse.alignable = null;
+      var isOk = true, widgetsSeen = 0, insertBefore = null;
+      for (var n = reuse.firstChild, next; n; n = next) {
+        next = n.nextSibling;
+        if (!/\bCodeMirror-linewidget\b/.test(n.className)) {
+          reuse.removeChild(n);
+        } else {
+          for (var i = 0; i < line.widgets.length; ++i) {
+            var widget = line.widgets[i];
+            if (widget.node == n.firstChild) {
+              if (!widget.above && !insertBefore) insertBefore = n;
+              positionLineWidget(widget, n, reuse, dims);
+              ++widgetsSeen;
+              break;
+            }
+          }
+          if (i == line.widgets.length) { isOk = false; break; }
+        }
+      }
+      reuse.insertBefore(lineElement, insertBefore);
+      if (isOk && widgetsSeen == line.widgets.length) {
+        wrap = reuse;
+        reuse.className = line.wrapClass || "";
+      }
+    }
+    if (!wrap) {
+      wrap = elt("div", null, line.wrapClass, "position: relative");
+      wrap.appendChild(lineElement);
+    }
+    // Kludge to make sure the styled element lies behind the selection (by z-index)
+    if (line.bgClass)
+      wrap.insertBefore(elt("div", null, line.bgClass + " CodeMirror-linebackground"), wrap.firstChild);
+    if (cm.options.lineNumbers || markers) {
+      var gutterWrap = wrap.insertBefore(elt("div", null, null, "position: absolute; left: " +
+                                             (cm.options.fixedGutter ? dims.fixedPos : -dims.gutterTotalWidth) + "px"),
+                                         wrap.firstChild);
+      if (cm.options.fixedGutter) (wrap.alignable || (wrap.alignable = [])).push(gutterWrap);
+      if (cm.options.lineNumbers && (!markers || !markers["CodeMirror-linenumbers"]))
+        wrap.lineNumber = gutterWrap.appendChild(
+          elt("div", lineNumberFor(cm.options, lineNo),
+              "CodeMirror-linenumber CodeMirror-gutter-elt",
+              "left: " + dims.gutterLeft["CodeMirror-linenumbers"] + "px; width: "
+              + display.lineNumInnerWidth + "px"));
+      if (markers)
+        for (var k = 0; k < cm.options.gutters.length; ++k) {
+          var id = cm.options.gutters[k], found = markers.hasOwnProperty(id) && markers[id];
+          if (found)
+            gutterWrap.appendChild(elt("div", [found], "CodeMirror-gutter-elt", "left: " +
+                                       dims.gutterLeft[id] + "px; width: " + dims.gutterWidth[id] + "px"));
+        }
+    }
+    if (ie_lt8) wrap.style.zIndex = 2;
+    if (line.widgets && wrap != reuse) for (var i = 0, ws = line.widgets; i < ws.length; ++i) {
+      var widget = ws[i], node = elt("div", [widget.node], "CodeMirror-linewidget");
+      if (!widget.handleMouseEvents) node.ignoreEvents = true;
+      positionLineWidget(widget, node, wrap, dims);
+      if (widget.above)
+        wrap.insertBefore(node, cm.options.lineNumbers && line.height != 0 ? gutterWrap : lineElement);
+      else
+        wrap.appendChild(node);
+      signalLater(widget, "redraw");
+    }
+    return wrap;
+  }
+
+  function positionLineWidget(widget, node, wrap, dims) {
+    if (widget.noHScroll) {
+      (wrap.alignable || (wrap.alignable = [])).push(node);
+      var width = dims.wrapperWidth;
+      node.style.left = dims.fixedPos + "px";
+      if (!widget.coverGutter) {
+        width -= dims.gutterTotalWidth;
+        node.style.paddingLeft = dims.gutterTotalWidth + "px";
+      }
+      node.style.width = width + "px";
+    }
+    if (widget.coverGutter) {
+      node.style.zIndex = 5;
+      node.style.position = "relative";
+      if (!widget.noHScroll) node.style.marginLeft = -dims.gutterTotalWidth + "px";
+    }
+  }
+
+  // SELECTION / CURSOR
+
+  function updateSelection(cm) {
+    var display = cm.display;
+    var collapsed = posEq(cm.doc.sel.from, cm.doc.sel.to);
+    if (collapsed || cm.options.showCursorWhenSelecting)
+      updateSelectionCursor(cm);
+    else
+      display.cursor.style.display = display.otherCursor.style.display = "none";
+    if (!collapsed)
+      updateSelectionRange(cm);
+    else
+      display.selectionDiv.style.display = "none";
+
+    // Move the hidden textarea near the cursor to prevent scrolling artifacts
+    if (cm.options.moveInputWithCursor) {
+      var headPos = cursorCoords(cm, cm.doc.sel.head, "div");
+      var wrapOff = getRect(display.wrapper), lineOff = getRect(display.lineDiv);
+      display.inputDiv.style.top = Math.max(0, Math.min(display.wrapper.clientHeight - 10,
+                                                        headPos.top + lineOff.top - wrapOff.top)) + "px";
+      display.inputDiv.style.left = Math.max(0, Math.min(display.wrapper.clientWidth - 10,
+                                                         headPos.left + lineOff.left - wrapOff.left)) + "px";
+    }
+  }
+
+  // No selection, plain cursor
+  function updateSelectionCursor(cm) {
+    var display = cm.display, pos = cursorCoords(cm, cm.doc.sel.head, "div");
+    display.cursor.style.left = pos.left + "px";
+    display.cursor.style.top = pos.top + "px";
+    display.cursor.style.height = Math.max(0, pos.bottom - pos.top) * cm.options.cursorHeight + "px";
+    display.cursor.style.display = "";
+
+    if (pos.other) {
+      display.otherCursor.style.display = "";
+      display.otherCursor.style.left = pos.other.left + "px";
+      display.otherCursor.style.top = pos.other.top + "px";
+      display.otherCursor.style.height = (pos.other.bottom - pos.other.top) * .85 + "px";
+    } else { display.otherCursor.style.display = "none"; }
+  }
+
+  // Highlight selection
+  function updateSelectionRange(cm) {
+    var display = cm.display, doc = cm.doc, sel = cm.doc.sel;
+    var fragment = document.createDocumentFragment();
+    var clientWidth = display.lineSpace.offsetWidth, pl = paddingLeft(cm.display);
+
+    function add(left, top, width, bottom) {
+      if (top < 0) top = 0;
+      fragment.appendChild(elt("div", null, "CodeMirror-selected", "position: absolute; left: " + left +
+                               "px; top: " + top + "px; width: " + (width == null ? clientWidth - left : width) +
+                               "px; height: " + (bottom - top) + "px"));
+    }
+
+    function drawForLine(line, fromArg, toArg) {
+      var lineObj = getLine(doc, line);
+      var lineLen = lineObj.text.length;
+      var start, end;
+      function coords(ch, bias) {
+        return charCoords(cm, Pos(line, ch), "div", lineObj, bias);
+      }
+
+      iterateBidiSections(getOrder(lineObj), fromArg || 0, toArg == null ? lineLen : toArg, function(from, to, dir) {
+        var leftPos = coords(from, "left"), rightPos, left, right;
+        if (from == to) {
+          rightPos = leftPos;
+          left = right = leftPos.left;
+        } else {
+          rightPos = coords(to - 1, "right");
+          if (dir == "rtl") { var tmp = leftPos; leftPos = rightPos; rightPos = tmp; }
+          left = leftPos.left;
+          right = rightPos.right;
+        }
+        if (fromArg == null && from == 0) left = pl;
+        if (rightPos.top - leftPos.top > 3) { // Different lines, draw top part
+          add(left, leftPos.top, null, leftPos.bottom);
+          left = pl;
+          if (leftPos.bottom < rightPos.top) add(left, leftPos.bottom, null, rightPos.top);
+        }
+        if (toArg == null && to == lineLen) right = clientWidth;
+        if (!start || leftPos.top < start.top || leftPos.top == start.top && leftPos.left < start.left)
+          start = leftPos;
+        if (!end || rightPos.bottom > end.bottom || rightPos.bottom == end.bottom && rightPos.right > end.right)
+          end = rightPos;
+        if (left < pl + 1) left = pl;
+        add(left, rightPos.top, right - left, rightPos.bottom);
+      });
+      return {start: start, end: end};
+    }
+
+    if (sel.from.line == sel.to.line) {
+      drawForLine(sel.from.line, sel.from.ch, sel.to.ch);
+    } else {
+      var fromLine = getLine(doc, sel.from.line), toLine = getLine(doc, sel.to.line);
+      var singleVLine = visualLine(doc, fromLine) == visualLine(doc, toLine);
+      var leftEnd = drawForLine(sel.from.line, sel.from.ch, singleVLine ? fromLine.text.length : null).end;
+      var rightStart = drawForLine(sel.to.line, singleVLine ? 0 : null, sel.to.ch).start;
+      if (singleVLine) {
+        if (leftEnd.top < rightStart.top - 2) {
+          add(leftEnd.right, leftEnd.top, null, leftEnd.bottom);
+          add(pl, rightStart.top, rightStart.left, rightStart.bottom);
+        } else {
+          add(leftEnd.right, leftEnd.top, rightStart.left - leftEnd.right, leftEnd.bottom);
+        }
+      }
+      if (leftEnd.bottom < rightStart.top)
+        add(pl, leftEnd.bottom, null, rightStart.top);
+    }
+
+    removeChildrenAndAdd(display.selectionDiv, fragment);
+    display.selectionDiv.style.display = "";
+  }
+
+  // Cursor-blinking
+  function restartBlink(cm) {
+    if (!cm.state.focused) return;
+    var display = cm.display;
+    clearInterval(display.blinker);
+    var on = true;
+    display.cursor.style.visibility = display.otherCursor.style.visibility = "";
+    display.blinker = setInterval(function() {
+      display.cursor.style.visibility = display.otherCursor.style.visibility = (on = !on) ? "" : "hidden";
+    }, cm.options.cursorBlinkRate);
+  }
+
+  // HIGHLIGHT WORKER
+
+  function startWorker(cm, time) {
+    if (cm.doc.mode.startState && cm.doc.frontier < cm.display.showingTo)
+      cm.state.highlight.set(time, bind(highlightWorker, cm));
+  }
+
+  function highlightWorker(cm) {
+    var doc = cm.doc;
+    if (doc.frontier < doc.first) doc.frontier = doc.first;
+    if (doc.frontier >= cm.display.showingTo) return;
+    var end = +new Date + cm.options.workTime;
+    var state = copyState(doc.mode, getStateBefore(cm, doc.frontier));
+    var changed = [], prevChange;
+    doc.iter(doc.frontier, Math.min(doc.first + doc.size, cm.display.showingTo + 500), function(line) {
+      if (doc.frontier >= cm.display.showingFrom) { // Visible
+        var oldStyles = line.styles;
+        line.styles = highlightLine(cm, line, state);
+        var ischange = !oldStyles || oldStyles.length != line.styles.length;
+        for (var i = 0; !ischange && i < oldStyles.length; ++i) ischange = oldStyles[i] != line.styles[i];
+        if (ischange) {
+          if (prevChange && prevChange.end == doc.frontier) prevChange.end++;
+          else changed.push(prevChange = {start: doc.frontier, end: doc.frontier + 1});
+        }
+        line.stateAfter = copyState(doc.mode, state);
+      } else {
+        processLine(cm, line, state);
+        line.stateAfter = doc.frontier % 5 == 0 ? copyState(doc.mode, state) : null;
+      }
+      ++doc.frontier;
+      if (+new Date > end) {
+        startWorker(cm, cm.options.workDelay);
+        return true;
+      }
+    });
+    if (changed.length)
+      operation(cm, function() {
+        for (var i = 0; i < changed.length; ++i)
+          regChange(this, changed[i].start, changed[i].end);
+      })();
+  }
+
+  // Finds the line to start with when starting a parse. Tries to
+  // find a line with a stateAfter, so that it can start with a
+  // valid state. If that fails, it returns the line with the
+  // smallest indentation, which tends to need the least context to
+  // parse correctly.
+  function findStartLine(cm, n, precise) {
+    var minindent, minline, doc = cm.doc;
+    for (var search = n, lim = n - 100; search > lim; --search) {
+      if (search <= doc.first) return doc.first;
+      var line = getLine(doc, search - 1);
+      if (line.stateAfter && (!precise || search <= doc.frontier)) return search;
+      var indented = countColumn(line.text, null, cm.options.tabSize);
+      if (minline == null || minindent > indented) {
+        minline = search - 1;
+        minindent = indented;
+      }
+    }
+    return minline;
+  }
+
+  function getStateBefore(cm, n, precise) {
+    var doc = cm.doc, display = cm.display;
+      if (!doc.mode.startState) return true;
+    var pos = findStartLine(cm, n, precise), state = pos > doc.first && getLine(doc, pos-1).stateAfter;
+    if (!state) state = startState(doc.mode);
+    else state = copyState(doc.mode, state);
+    doc.iter(pos, n, function(line) {
+      processLine(cm, line, state);
+      var save = pos == n - 1 || pos % 5 == 0 || pos >= display.showingFrom && pos < display.showingTo;
+      line.stateAfter = save ? copyState(doc.mode, state) : null;
+      ++pos;
+    });
+    return state;
+  }
+
+  // POSITION MEASUREMENT
+
+  function paddingTop(display) {return display.lineSpace.offsetTop;}
+  function paddingVert(display) {return display.mover.offsetHeight - display.lineSpace.offsetHeight;}
+  function paddingLeft(display) {
+    var e = removeChildrenAndAdd(display.measure, elt("pre", null, null, "text-align: left")).appendChild(elt("span", "x"));
+    return e.offsetLeft;
+  }
+
+  function measureChar(cm, line, ch, data, bias) {
+    var dir = -1;
+    data = data || measureLine(cm, line);
+
+    for (var pos = ch;; pos += dir) {
+      var r = data[pos];
+      if (r) break;
+      if (dir < 0 && pos == 0) dir = 1;
+    }
+    bias = pos > ch ? "left" : pos < ch ? "right" : bias;
+    if (bias == "left" && r.leftSide) r = r.leftSide;
+    else if (bias == "right" && r.rightSide) r = r.rightSide;
+    return {left: pos < ch ? r.right : r.left,
+            right: pos > ch ? r.left : r.right,
+            top: r.top,
+            bottom: r.bottom};
+  }
+
+  function findCachedMeasurement(cm, line) {
+    var cache = cm.display.measureLineCache;
+    for (var i = 0; i < cache.length; ++i) {
+      var memo = cache[i];
+      if (memo.text == line.text && memo.markedSpans == line.markedSpans &&
+          cm.display.scroller.clientWidth == memo.width &&
+          memo.classes == line.textClass + "|" + line.bgClass + "|" + line.wrapClass)
+        return memo;
+    }
+  }
+
+  function clearCachedMeasurement(cm, line) {
+    var exists = findCachedMeasurement(cm, line);
+    if (exists) exists.text = exists.measure = exists.markedSpans = null;
+  }
+
+  function measureLine(cm, line) {
+    // First look in the cache
+    var cached = findCachedMeasurement(cm, line);
+    if (cached) return cached.measure;
+
+    // Failing that, recompute and store result in cache
+    var measure = measureLineInner(cm, line);
+    var cache = cm.display.measureLineCache;
+    var memo = {text: line.text, width: cm.display.scroller.clientWidth,
+                markedSpans: line.markedSpans, measure: measure,
+                classes: line.textClass + "|" + line.bgClass + "|" + line.wrapClass};
+    if (cache.length == 16) cache[++cm.display.measureLineCachePos % 16] = memo;
+    else cache.push(memo);
+    return measure;
+  }
+
+  function measureLineInner(cm, line) {
+    var display = cm.display, measure = emptyArray(line.text.length);
+    var pre = lineContent(cm, line, measure);
+
+    // IE does not cache element positions of inline elements between
+    // calls to getBoundingClientRect. This makes the loop below,
+    // which gathers the positions of all the characters on the line,
+    // do an amount of layout work quadratic to the number of
+    // characters. When line wrapping is off, we try to improve things
+    // by first subdividing the line into a bunch of inline blocks, so
+    // that IE can reuse most of the layout information from caches
+    // for those blocks. This does interfere with line wrapping, so it
+    // doesn't work when wrapping is on, but in that case the
+    // situation is slightly better, since IE does cache line-wrapping
+    // information and only recomputes per-line.
+    if (ie && !ie_lt8 && !cm.options.lineWrapping && pre.childNodes.length > 100) {
+      var fragment = document.createDocumentFragment();
+      var chunk = 10, n = pre.childNodes.length;
+      for (var i = 0, chunks = Math.ceil(n / chunk); i < chunks; ++i) {
+        var wrap = elt("div", null, null, "display: inline-block");
+        for (var j = 0; j < chunk && n; ++j) {
+          wrap.appendChild(pre.firstChild);
+          --n;
+        }
+        fragment.appendChild(wrap);
+      }
+      pre.appendChild(fragment);
+    }
+
+    removeChildrenAndAdd(display.measure, pre);
+
+    var outer = getRect(display.lineDiv);
+    var vranges = [], data = emptyArray(line.text.length), maxBot = pre.offsetHeight;
+    // Work around an IE7/8 bug where it will sometimes have randomly
+    // replaced our pre with a clone at this point.
+    if (ie_lt9 && display.measure.first != pre)
+      removeChildrenAndAdd(display.measure, pre);
+
+    function measureRect(rect) {
+      var top = rect.top - outer.top, bot = rect.bottom - outer.top;
+      if (bot > maxBot) bot = maxBot;
+      if (top < 0) top = 0;
+      for (var i = vranges.length - 2; i >= 0; i -= 2) {
+        var rtop = vranges[i], rbot = vranges[i+1];
+        if (rtop > bot || rbot < top) continue;
+        if (rtop <= top && rbot >= bot ||
+            top <= rtop && bot >= rbot ||
+            Math.min(bot, rbot) - Math.max(top, rtop) >= (bot - top) >> 1) {
+          vranges[i] = Math.min(top, rtop);
+          vranges[i+1] = Math.max(bot, rbot);
+          break;
+        }
+      }
+      if (i < 0) { i = vranges.length; vranges.push(top, bot); }
+      return {left: rect.left - outer.left,
+              right: rect.right - outer.left,
+              top: i, bottom: null};
+    }
+    function finishRect(rect) {
+      rect.bottom = vranges[rect.top+1];
+      rect.top = vranges[rect.top];
+    }
+
+    for (var i = 0, cur; i < measure.length; ++i) if (cur = measure[i]) {
+      var node = cur, rect = null;
+      // A widget might wrap, needs special care
+      if (/\bCodeMirror-widget\b/.test(cur.className) && cur.getClientRects) {
+        if (cur.firstChild.nodeType == 1) node = cur.firstChild;
+        var rects = node.getClientRects();
+        if (rects.length > 1) {
+          rect = data[i] = measureRect(rects[0]);
+          rect.rightSide = measureRect(rects[rects.length - 1]);
+        }
+      }
+      if (!rect) rect = data[i] = measureRect(getRect(node));
+      if (cur.measureRight) rect.right = getRect(cur.measureRight).left;
+      if (cur.leftSide) rect.leftSide = measureRect(getRect(cur.leftSide));
+    }
+    for (var i = 0, cur; i < data.length; ++i) if (cur = data[i]) {
+      finishRect(cur);
+      if (cur.leftSide) finishRect(cur.leftSide);
+      if (cur.rightSide) finishRect(cur.rightSide);
+    }
+    return data;
+  }
+
+  function measureLineWidth(cm, line) {
+    var hasBadSpan = false;
+    if (line.markedSpans) for (var i = 0; i < line.markedSpans; ++i) {
+      var sp = line.markedSpans[i];
+      if (sp.collapsed && (sp.to == null || sp.to == line.text.length)) hasBadSpan = true;
+    }
+    var cached = !hasBadSpan && findCachedMeasurement(cm, line);
+    if (cached) return measureChar(cm, line, line.text.length, cached.measure, "right").right;
+
+    var pre = lineContent(cm, line);
+    var end = pre.appendChild(zeroWidthElement(cm.display.measure));
+    removeChildrenAndAdd(cm.display.measure, pre);
+    return getRect(end).right - getRect(cm.display.lineDiv).left;
+  }
+
+  function clearCaches(cm) {
+    cm.display.measureLineCache.length = cm.display.measureLineCachePos = 0;
+    cm.display.cachedCharWidth = cm.display.cachedTextHeight = null;
+    if (!cm.options.lineWrapping) cm.display.maxLineChanged = true;
+    cm.display.lineNumChars = null;
+  }
+
+  function pageScrollX() { return window.pageXOffset || (document.documentElement || document.body).scrollLeft; }
+  function pageScrollY() { return window.pageYOffset || (document.documentElement || document.body).scrollTop; }
+
+  // Context is one of "line", "div" (display.lineDiv), "local"/null (editor), or "page"
+  function intoCoordSystem(cm, lineObj, rect, context) {
+    if (lineObj.widgets) for (var i = 0; i < lineObj.widgets.length; ++i) if (lineObj.widgets[i].above) {
+      var size = widgetHeight(lineObj.widgets[i]);
+      rect.top += size; rect.bottom += size;
+    }
+    if (context == "line") return rect;
+    if (!context) context = "local";
+    var yOff = heightAtLine(cm, lineObj);
+    if (context == "local") yOff += paddingTop(cm.display);
+    else yOff -= cm.display.viewOffset;
+    if (context == "page" || context == "window") {
+      var lOff = getRect(cm.display.lineSpace);
+      yOff += lOff.top + (context == "window" ? 0 : pageScrollY());
+      var xOff = lOff.left + (context == "window" ? 0 : pageScrollX());
+      rect.left += xOff; rect.right += xOff;
+    }
+    rect.top += yOff; rect.bottom += yOff;
+    return rect;
+  }
+
+  // Context may be "window", "page", "div", or "local"/null
+  // Result is in "div" coords
+  function fromCoordSystem(cm, coords, context) {
+    if (context == "div") return coords;
+    var left = coords.left, top = coords.top;
+    // First move into "page" coordinate system
+    if (context == "page") {
+      left -= pageScrollX();
+      top -= pageScrollY();
+    } else if (context == "local" || !context) {
+      var localBox = getRect(cm.display.sizer);
+      left += localBox.left;
+      top += localBox.top;
+    }
+
+    var lineSpaceBox = getRect(cm.display.lineSpace);
+    return {left: left - lineSpaceBox.left, top: top - lineSpaceBox.top};
+  }
+
+  function charCoords(cm, pos, context, lineObj, bias) {
+    if (!lineObj) lineObj = getLine(cm.doc, pos.line);
+    return intoCoordSystem(cm, lineObj, measureChar(cm, lineObj, pos.ch, null, bias), context);
+  }
+
+  function cursorCoords(cm, pos, context, lineObj, measurement) {
+    lineObj = lineObj || getLine(cm.doc, pos.line);
+    if (!measurement) measurement = measureLine(cm, lineObj);
+    function get(ch, right) {
+      var m = measureChar(cm, lineObj, ch, measurement, right ? "right" : "left");
+      if (right) m.left = m.right; else m.right = m.left;
+      return intoCoordSystem(cm, lineObj, m, context);
+    }
+    function getBidi(ch, partPos) {
+      var part = order[partPos], right = part.level % 2;
+      if (ch == bidiLeft(part) && partPos && part.level < order[partPos - 1].level) {
+        part = order[--partPos];
+        ch = bidiRight(part) - (part.level % 2 ? 0 : 1);
+        right = true;
+      } else if (ch == bidiRight(part) && partPos < order.length - 1 && part.level < order[partPos + 1].level) {
+        part = order[++partPos];
+        ch = bidiLeft(part) - part.level % 2;
+        right = false;
+      }
+      if (right && ch == part.to && ch > part.from) return get(ch - 1);
+      return get(ch, right);
+    }
+    var order = getOrder(lineObj), ch = pos.ch;
+    if (!order) return get(ch);
+    var partPos = getBidiPartAt(order, ch);
+    var val = getBidi(ch, partPos);
+    if (bidiOther != null) val.other = getBidi(ch, bidiOther);
+    return val;
+  }
+
+  function PosWithInfo(line, ch, outside, xRel) {
+    var pos = new Pos(line, ch);
+    pos.xRel = xRel;
+    if (outside) pos.outside = true;
+    return pos;
+  }
+
+  // Coords must be lineSpace-local
+  function coordsChar(cm, x, y) {
+    var doc = cm.doc;
+    y += cm.display.viewOffset;
+    if (y < 0) return PosWithInfo(doc.first, 0, true, -1);
+    var lineNo = lineAtHeight(doc, y), last = doc.first + doc.size - 1;
+    if (lineNo > last)
+      return PosWithInfo(doc.first + doc.size - 1, getLine(doc, last).text.length, true, 1);
+    if (x < 0) x = 0;
+
+    for (;;) {
+      var lineObj = getLine(doc, lineNo);
+      var found = coordsCharInner(cm, lineObj, lineNo, x, y);
+      var merged = collapsedSpanAtEnd(lineObj);
+      var mergedPos = merged && merged.find();
+      if (merged && (found.ch > mergedPos.from.ch || found.ch == mergedPos.from.ch && found.xRel > 0))
+        lineNo = mergedPos.to.line;
+      else
+        return found;
+    }
+  }
+
+  function coordsCharInner(cm, lineObj, lineNo, x, y) {
+    var innerOff = y - heightAtLine(cm, lineObj);
+    var wrongLine = false, adjust = 2 * cm.display.wrapper.clientWidth;
+    var measurement = measureLine(cm, lineObj);
+
+    function getX(ch) {
+      var sp = cursorCoords(cm, Pos(lineNo, ch), "line",
+                            lineObj, measurement);
+      wrongLine = true;
+      if (innerOff > sp.bottom) return sp.left - adjust;
+      else if (innerOff < sp.top) return sp.left + adjust;
+      else wrongLine = false;
+      return sp.left;
+    }
+
+    var bidi = getOrder(lineObj), dist = lineObj.text.length;
+    var from = lineLeft(lineObj), to = lineRight(lineObj);
+    var fromX = getX(from), fromOutside = wrongLine, toX = getX(to), toOutside = wrongLine;
+
+    if (x > toX) return PosWithInfo(lineNo, to, toOutside, 1);
+    // Do a binary search between these bounds.
+    for (;;) {
+      if (bidi ? to == from || to == moveVisually(lineObj, from, 1) : to - from <= 1) {
+        var ch = x < fromX || x - fromX <= toX - x ? from : to;
+        var xDiff = x - (ch == from ? fromX : toX);
+        while (isExtendingChar.test(lineObj.text.charAt(ch))) ++ch;
+        var pos = PosWithInfo(lineNo, ch, ch == from ? fromOutside : toOutside,
+                              xDiff < 0 ? -1 : xDiff ? 1 : 0);
+        return pos;
+      }
+      var step = Math.ceil(dist / 2), middle = from + step;
+      if (bidi) {
+        middle = from;
+        for (var i = 0; i < step; ++i) middle = moveVisually(lineObj, middle, 1);
+      }
+      var middleX = getX(middle);
+      if (middleX > x) {to = middle; toX = middleX; if (toOutside = wrongLine) toX += 1000; dist = step;}
+      else {from = middle; fromX = middleX; fromOutside = wrongLine; dist -= step;}
+    }
+  }
+
+  var measureText;
+  function textHeight(display) {
+    if (display.cachedTextHeight != null) return display.cachedTextHeight;
+    if (measureText == null) {
+      measureText = elt("pre");
+      // Measure a bunch of lines, for browsers that compute
+      // fractional heights.
+      for (var i = 0; i < 49; ++i) {
+        measureText.appendChild(document.createTextNode("x"));
+        measureText.appendChild(elt("br"));
+      }
+      measureText.appendChild(document.createTextNode("x"));
+    }
+    removeChildrenAndAdd(display.measure, measureText);
+    var height = measureText.offsetHeight / 50;
+    if (height > 3) display.cachedTextHeight = height;
+    removeChildren(display.measure);
+    return height || 1;
+  }
+
+  function charWidth(display) {
+    if (display.cachedCharWidth != null) return display.cachedCharWidth;
+    var anchor = elt("span", "x");
+    var pre = elt("pre", [anchor]);
+    removeChildrenAndAdd(display.measure, pre);
+    var width = anchor.offsetWidth;
+    if (width > 2) display.cachedCharWidth = width;
+    return width || 10;
+  }
+
+  // OPERATIONS
+
+  // Operations are used to wrap changes in such a way that each
+  // change won't have to update the cursor and display (which would
+  // be awkward, slow, and error-prone), but instead updates are
+  // batched and then all combined and executed at once.
+
+  var nextOpId = 0;
+  function startOperation(cm) {
+    cm.curOp = {
+      // An array of ranges of lines that have to be updated. See
+      // updateDisplay.
+      changes: [],
+      updateInput: null,
+      userSelChange: null,
+      textChanged: null,
+      selectionChanged: false,
+      cursorActivity: false,
+      updateMaxLine: false,
+      updateScrollPos: false,
+      id: ++nextOpId
+    };
+    if (!delayedCallbackDepth++) delayedCallbacks = [];
+  }
+
+  function endOperation(cm) {
+    var op = cm.curOp, doc = cm.doc, display = cm.display;
+    cm.curOp = null;
+
+    if (op.updateMaxLine) computeMaxLength(cm);
+    if (display.maxLineChanged && !cm.options.lineWrapping && display.maxLine) {
+      var width = measureLineWidth(cm, display.maxLine);
+      display.sizer.style.minWidth = Math.max(0, width + 3 + scrollerCutOff) + "px";
+      display.maxLineChanged = false;
+      var maxScrollLeft = Math.max(0, display.sizer.offsetLeft + display.sizer.offsetWidth - display.scroller.clientWidth);
+      if (maxScrollLeft < doc.scrollLeft && !op.updateScrollPos)
+        setScrollLeft(cm, Math.min(display.scroller.scrollLeft, maxScrollLeft), true);
+    }
+    var newScrollPos, updated;
+    if (op.updateScrollPos) {
+      newScrollPos = op.updateScrollPos;
+    } else if (op.selectionChanged && display.scroller.clientHeight) { // don't rescroll if not visible
+      var coords = cursorCoords(cm, doc.sel.head);
+      newScrollPos = calculateScrollPos(cm, coords.left, coords.top, coords.left, coords.bottom);
+    }
+    if (op.changes.length || newScrollPos && newScrollPos.scrollTop != null) {
+      updated = updateDisplay(cm, op.changes, newScrollPos && newScrollPos.scrollTop);
+      if (cm.display.scroller.offsetHeight) cm.doc.scrollTop = cm.display.scroller.scrollTop;
+    }
+    if (!updated && op.selectionChanged) updateSelection(cm);
+    if (op.updateScrollPos) {
+      display.scroller.scrollTop = display.scrollbarV.scrollTop = doc.scrollTop = newScrollPos.scrollTop;
+      display.scroller.scrollLeft = display.scrollbarH.scrollLeft = doc.scrollLeft = newScrollPos.scrollLeft;
+      alignHorizontally(cm);
+      if (op.scrollToPos)
+        scrollPosIntoView(cm, clipPos(cm.doc, op.scrollToPos), op.scrollToPosMargin);
+    } else if (newScrollPos) {
+      scrollCursorIntoView(cm);
+    }
+    if (op.selectionChanged) restartBlink(cm);
+
+    if (cm.state.focused && op.updateInput)
+      resetInput(cm, op.userSelChange);
+
+    var hidden = op.maybeHiddenMarkers, unhidden = op.maybeUnhiddenMarkers;
+    if (hidden) for (var i = 0; i < hidden.length; ++i)
+      if (!hidden[i].lines.length) signal(hidden[i], "hide");
+    if (unhidden) for (var i = 0; i < unhidden.length; ++i)
+      if (unhidden[i].lines.length) signal(unhidden[i], "unhide");
+
+    var delayed;
+    if (!--delayedCallbackDepth) {
+      delayed = delayedCallbacks;
+      delayedCallbacks = null;
+    }
+    if (op.textChanged)
+      signal(cm, "change", cm, op.textChanged);
+    if (op.cursorActivity) signal(cm, "cursorActivity", cm);
+    if (delayed) for (var i = 0; i < delayed.length; ++i) delayed[i]();
+  }
+
+  // Wraps a function in an operation. Returns the wrapped function.
+  function operation(cm1, f) {
+    return function() {
+      var cm = cm1 || this, withOp = !cm.curOp;
+      if (withOp) startOperation(cm);
+      try { var result = f.apply(cm, arguments); }
+      finally { if (withOp) endOperation(cm); }
+      return result;
+    };
+  }
+  function docOperation(f) {
+    return function() {
+      var withOp = this.cm && !this.cm.curOp, result;
+      if (withOp) startOperation(this.cm);
+      try { result = f.apply(this, arguments); }
+      finally { if (withOp) endOperation(this.cm); }
+      return result;
+    };
+  }
+  function runInOp(cm, f) {
+    var withOp = !cm.curOp, result;
+    if (withOp) startOperation(cm);
+    try { result = f(); }
+    finally { if (withOp) endOperation(cm); }
+    return result;
+  }
+
+  function regChange(cm, from, to, lendiff) {
+    if (from == null) from = cm.doc.first;
+    if (to == null) to = cm.doc.first + cm.doc.size;
+    cm.curOp.changes.push({from: from, to: to, diff: lendiff});
+  }
+
+  // INPUT HANDLING
+
+  function slowPoll(cm) {
+    if (cm.display.pollingFast) return;
+    cm.display.poll.set(cm.options.pollInterval, function() {
+      readInput(cm);
+      if (cm.state.focused) slowPoll(cm);
+    });
+  }
+
+  function fastPoll(cm) {
+    var missed = false;
+    cm.display.pollingFast = true;
+    function p() {
+      var changed = readInput(cm);
+      if (!changed && !missed) {missed = true; cm.display.poll.set(60, p);}
+      else {cm.display.pollingFast = false; slowPoll(cm);}
+    }
+    cm.display.poll.set(20, p);
+  }
+
+  // prevInput is a hack to work with IME. If we reset the textarea
+  // on every change, that breaks IME. So we look for changes
+  // compared to the previous content instead. (Modern browsers have
+  // events that indicate IME taking place, but these are not widely
+  // supported or compatible enough yet to rely on.)
+  function readInput(cm) {
+    var input = cm.display.input, prevInput = cm.display.prevInput, doc = cm.doc, sel = doc.sel;
+    if (!cm.state.focused || hasSelection(input) || isReadOnly(cm) || cm.state.disableInput) return false;
+    var text = input.value;
+    if (text == prevInput && posEq(sel.from, sel.to)) return false;
+    if (ie && !ie_lt9 && cm.display.inputHasSelection === text) {
+      resetInput(cm, true);
+      return false;
+    }
+
+    var withOp = !cm.curOp;
+    if (withOp) startOperation(cm);
+    sel.shift = false;
+    var same = 0, l = Math.min(prevInput.length, text.length);
+    while (same < l && prevInput.charCodeAt(same) == text.charCodeAt(same)) ++same;
+    var from = sel.from, to = sel.to;
+    if (same < prevInput.length)
+      from = Pos(from.line, from.ch - (prevInput.length - same));
+    else if (cm.state.overwrite && posEq(from, to) && !cm.state.pasteIncoming)
+      to = Pos(to.line, Math.min(getLine(doc, to.line).text.length, to.ch + (text.length - same)));
+
+    var updateInput = cm.curOp.updateInput;
+    var changeEvent = {from: from, to: to, text: splitLines(text.slice(same)),
+                       origin: cm.state.pasteIncoming ? "paste" : "+input"};
+    makeChange(cm.doc, changeEvent, "end");
+    cm.curOp.updateInput = updateInput;
+    signalLater(cm, "inputRead", cm, changeEvent);
+
+    if (text.length > 1000 || text.indexOf("\n") > -1) input.value = cm.display.prevInput = "";
+    else cm.display.prevInput = text;
+    if (withOp) endOperation(cm);
+    cm.state.pasteIncoming = false;
+    return true;
+  }
+
+  function resetInput(cm, user) {
+    var minimal, selected, doc = cm.doc;
+    if (!posEq(doc.sel.from, doc.sel.to)) {
+      cm.display.prevInput = "";
+      minimal = hasCopyEvent &&
+        (doc.sel.to.line - doc.sel.from.line > 100 || (selected = cm.getSelection()).length > 1000);
+      var content = minimal ? "-" : selected || cm.getSelection();
+      cm.display.input.value = content;
+      if (cm.state.focused) selectInput(cm.display.input);
+      if (ie && !ie_lt9) cm.display.inputHasSelection = content;
+    } else if (user) {
+      cm.display.prevInput = cm.display.input.value = "";
+      if (ie && !ie_lt9) cm.display.inputHasSelection = null;
+    }
+    cm.display.inaccurateSelection = minimal;
+  }
+
+  function focusInput(cm) {
+    if (cm.options.readOnly != "nocursor" && (!mobile || document.activeElement != cm.display.input))
+      cm.display.input.focus();
+  }
+
+  function isReadOnly(cm) {
+    return cm.options.readOnly || cm.doc.cantEdit;
+  }
+
+  // EVENT HANDLERS
+
+  function registerEventHandlers(cm) {
+    var d = cm.display;
+    on(d.scroller, "mousedown", operation(cm, onMouseDown));
+    if (ie)
+      on(d.scroller, "dblclick", operation(cm, function(e) {
+        if (signalDOMEvent(cm, e)) return;
+        var pos = posFromMouse(cm, e);
+        if (!pos || clickInGutter(cm, e) || eventInWidget(cm.display, e)) return;
+        e_preventDefault(e);
+        var word = findWordAt(getLine(cm.doc, pos.line).text, pos);
+        extendSelection(cm.doc, word.from, word.to);
+      }));
+    else
+      on(d.scroller, "dblclick", function(e) { signalDOMEvent(cm, e) || e_preventDefault(e); });
+    on(d.lineSpace, "selectstart", function(e) {
+      if (!eventInWidget(d, e)) e_preventDefault(e);
+    });
+    // Gecko browsers fire contextmenu *after* opening the menu, at
+    // which point we can't mess with it anymore. Context menu is
+    // handled in onMouseDown for Gecko.
+    if (!captureMiddleClick) on(d.scroller, "contextmenu", function(e) {onContextMenu(cm, e);});
+
+    on(d.scroller, "scroll", function() {
+      if (d.scroller.clientHeight) {
+        setScrollTop(cm, d.scroller.scrollTop);
+        setScrollLeft(cm, d.scroller.scrollLeft, true);
+        signal(cm, "scroll", cm);
+      }
+    });
+    on(d.scrollbarV, "scroll", function() {
+      if (d.scroller.clientHeight) setScrollTop(cm, d.scrollbarV.scrollTop);
+    });
+    on(d.scrollbarH, "scroll", function() {
+      if (d.scroller.clientHeight) setScrollLeft(cm, d.scrollbarH.scrollLeft);
+    });
+
+    on(d.scroller, "mousewheel", function(e){onScrollWheel(cm, e);});
+    on(d.scroller, "DOMMouseScroll", function(e){onScrollWheel(cm, e);});
+
+    function reFocus() { if (cm.state.focused) setTimeout(bind(focusInput, cm), 0); }
+    on(d.scrollbarH, "mousedown", reFocus);
+    on(d.scrollbarV, "mousedown", reFocus);
+    // Prevent wrapper from ever scrolling
+    on(d.wrapper, "scroll", function() { d.wrapper.scrollTop = d.wrapper.scrollLeft = 0; });
+
+    var resizeTimer;
+    function onResize() {
+      if (resizeTimer == null) resizeTimer = setTimeout(function() {
+        resizeTimer = null;
+        // Might be a text scaling operation, clear size caches.
+        d.cachedCharWidth = d.cachedTextHeight = knownScrollbarWidth = null;
+        clearCaches(cm);
+        runInOp(cm, bind(regChange, cm));
+      }, 100);
+    }
+    on(window, "resize", onResize);
+    // Above handler holds on to the editor and its data structures.
+    // Here we poll to unregister it when the editor is no longer in
+    // the document, so that it can be garbage-collected.
+    function unregister() {
+      for (var p = d.wrapper.parentNode; p && p != document.body; p = p.parentNode) {}
+      if (p) setTimeout(unregister, 5000);
+      else off(window, "resize", onResize);
+    }
+    setTimeout(unregister, 5000);
+
+    on(d.input, "keyup", operation(cm, function(e) {
+      if (signalDOMEvent(cm, e) || cm.options.onKeyEvent && cm.options.onKeyEvent(cm, addStop(e))) return;
+      if (e.keyCode == 16) cm.doc.sel.shift = false;
+    }));
+    on(d.input, "input", bind(fastPoll, cm));
+    on(d.input, "keydown", operation(cm, onKeyDown));
+    on(d.input, "keypress", operation(cm, onKeyPress));
+    on(d.input, "focus", bind(onFocus, cm));
+    on(d.input, "blur", bind(onBlur, cm));
+
+    function drag_(e) {
+      if (signalDOMEvent(cm, e) || cm.options.onDragEvent && cm.options.onDragEvent(cm, addStop(e))) return;
+      e_stop(e);
+    }
+    if (cm.options.dragDrop) {
+      on(d.scroller, "dragstart", function(e){onDragStart(cm, e);});
+      on(d.scroller, "dragenter", drag_);
+      on(d.scroller, "dragover", drag_);
+      on(d.scroller, "drop", operation(cm, onDrop));
+    }
+    on(d.scroller, "paste", function(e){
+      if (eventInWidget(d, e)) return;
+      focusInput(cm);
+      fastPoll(cm);
+    });
+    on(d.input, "paste", function() {
+      cm.state.pasteIncoming = true;
+      fastPoll(cm);
+    });
+
+    function prepareCopy() {
+      if (d.inaccurateSelection) {
+        d.prevInput = "";
+        d.inaccurateSelection = false;
+        d.input.value = cm.getSelection();
+        selectInput(d.input);
+      }
+    }
+    on(d.input, "cut", prepareCopy);
+    on(d.input, "copy", prepareCopy);
+
+    // Needed to handle Tab key in KHTML
+    if (khtml) on(d.sizer, "mouseup", function() {
+        if (document.activeElement == d.input) d.input.blur();
+        focusInput(cm);
+    });
+  }
+
+  function eventInWidget(display, e) {
+    for (var n = e_target(e); n != display.wrapper; n = n.parentNode) {
+      if (!n || n.ignoreEvents || n.parentNode == display.sizer && n != display.mover) return true;
+    }
+  }
+
+  function posFromMouse(cm, e, liberal) {
+    var display = cm.display;
+    if (!liberal) {
+      var target = e_target(e);
+      if (target == display.scrollbarH || target == display.scrollbarH.firstChild ||
+          target == display.scrollbarV || target == display.scrollbarV.firstChild ||
+          target == display.scrollbarFiller || target == display.gutterFiller) return null;
+    }
+    var x, y, space = getRect(display.lineSpace);
+    // Fails unpredictably on IE[67] when mouse is dragged around quickly.
+    try { x = e.clientX; y = e.clientY; } catch (e) { return null; }
+    return coordsChar(cm, x - space.left, y - space.top);
+  }
+
+  var lastClick, lastDoubleClick;
+  function onMouseDown(e) {
+    if (signalDOMEvent(this, e)) return;
+    var cm = this, display = cm.display, doc = cm.doc, sel = doc.sel;
+    sel.shift = e.shiftKey;
+
+    if (eventInWidget(display, e)) {
+      if (!webkit) {
+        display.scroller.draggable = false;
+        setTimeout(function(){display.scroller.draggable = true;}, 100);
+      }
+      return;
+    }
+    if (clickInGutter(cm, e)) return;
+    var start = posFromMouse(cm, e);
+
+    switch (e_button(e)) {
+    case 3:
+      if (captureMiddleClick) onContextMenu.call(cm, cm, e);
+      return;
+    case 2:
+      if (start) extendSelection(cm.doc, start);
+      setTimeout(bind(focusInput, cm), 20);
+      e_preventDefault(e);
+      return;
+    }
+    // For button 1, if it was clicked inside the editor
+    // (posFromMouse returning non-null), we have to adjust the
+    // selection.
+    if (!start) {if (e_target(e) == display.scroller) e_preventDefault(e); return;}
+
+    if (!cm.state.focused) onFocus(cm);
+
+    var now = +new Date, type = "single";
+    if (lastDoubleClick && lastDoubleClick.time > now - 400 && posEq(lastDoubleClick.pos, start)) {
+      type = "triple";
+      e_preventDefault(e);
+      setTimeout(bind(focusInput, cm), 20);
+      selectLine(cm, start.line);
+    } else if (lastClick && lastClick.time > now - 400 && posEq(lastClick.pos, start)) {
+      type = "double";
+      lastDoubleClick = {time: now, pos: start};
+      e_preventDefault(e);
+      var word = findWordAt(getLine(doc, start.line).text, start);
+      extendSelection(cm.doc, word.from, word.to);
+    } else { lastClick = {time: now, pos: start}; }
+
+    var last = start;
+    if (cm.options.dragDrop && dragAndDrop && !isReadOnly(cm) && !posEq(sel.from, sel.to) &&
+        !posLess(start, sel.from) && !posLess(sel.to, start) && type == "single") {
+      var dragEnd = operation(cm, function(e2) {
+        if (webkit) display.scroller.draggable = false;
+        cm.state.draggingText = false;
+        off(document, "mouseup", dragEnd);
+        off(display.scroller, "drop", dragEnd);
+        if (Math.abs(e.clientX - e2.clientX) + Math.abs(e.clientY - e2.clientY) < 10) {
+          e_preventDefault(e2);
+          extendSelection(cm.doc, start);
+          focusInput(cm);
+        }
+      });
+      // Let the drag handler handle this.
+      if (webkit) display.scroller.draggable = true;
+      cm.state.draggingText = dragEnd;
+      // IE's approach to draggable
+      if (display.scroller.dragDrop) display.scroller.dragDrop();
+      on(document, "mouseup", dragEnd);
+      on(display.scroller, "drop", dragEnd);
+      return;
+    }
+    e_preventDefault(e);
+    if (type == "single") extendSelection(cm.doc, clipPos(doc, start));
+
+    var startstart = sel.from, startend = sel.to, lastPos = start;
+
+    function doSelect(cur) {
+      if (posEq(lastPos, cur)) return;
+      lastPos = cur;
+
+      if (type == "single") {
+        extendSelection(cm.doc, clipPos(doc, start), cur);
+        return;
+      }
+
+      startstart = clipPos(doc, startstart);
+      startend = clipPos(doc, startend);
+      if (type == "double") {
+        var word = findWordAt(getLine(doc, cur.line).text, cur);
+        if (posLess(cur, startstart)) extendSelection(cm.doc, word.from, startend);
+        else extendSelection(cm.doc, startstart, word.to);
+      } else if (type == "triple") {
+        if (posLess(cur, startstart)) extendSelection(cm.doc, startend, clipPos(doc, Pos(cur.line, 0)));
+        else extendSelection(cm.doc, startstart, clipPos(doc, Pos(cur.line + 1, 0)));
+      }
+    }
+
+    var editorSize = getRect(display.wrapper);
+    // Used to ensure timeout re-tries don't fire when another extend
+    // happened in the meantime (clearTimeout isn't reliable -- at
+    // least on Chrome, the timeouts still happen even when cleared,
+    // if the clear happens after their scheduled firing time).
+    var counter = 0;
+
+    function extend(e) {
+      var curCount = ++counter;
+      var cur = posFromMouse(cm, e, true);
+      if (!cur) return;
+      if (!posEq(cur, last)) {
+        if (!cm.state.focused) onFocus(cm);
+        last = cur;
+        doSelect(cur);
+        var visible = visibleLines(display, doc);
+        if (cur.line >= visible.to || cur.line < visible.from)
+          setTimeout(operation(cm, function(){if (counter == curCount) extend(e);}), 150);
+      } else {
+        var outside = e.clientY < editorSize.top ? -20 : e.clientY > editorSize.bottom ? 20 : 0;
+        if (outside) setTimeout(operation(cm, function() {
+          if (counter != curCount) return;
+          display.scroller.scrollTop += outside;
+          extend(e);
+        }), 50);
+      }
+    }
+
+    function done(e) {
+      counter = Infinity;
+      e_preventDefault(e);
+      focusInput(cm);
+      off(document, "mousemove", move);
+      off(document, "mouseup", up);
+    }
+
+    var move = operation(cm, function(e) {
+      if (!ie && !e_button(e)) done(e);
+      else extend(e);
+    });
+    var up = operation(cm, done);
+    on(document, "mousemove", move);
+    on(document, "mouseup", up);
+  }
+
+  function clickInGutter(cm, e) {
+    var display = cm.display;
+    try { var mX = e.clientX, mY = e.clientY; }
+    catch(e) { return false; }
+
+    if (mX >= Math.floor(getRect(display.gutters).right)) return false;
+    e_preventDefault(e);
+    if (!hasHandler(cm, "gutterClick")) return true;
+
+    var lineBox = getRect(display.lineDiv);
+    if (mY > lineBox.bottom) return true;
+    mY -= lineBox.top - display.viewOffset;
+
+    for (var i = 0; i < cm.options.gutters.length; ++i) {
+      var g = display.gutters.childNodes[i];
+      if (g && getRect(g).right >= mX) {
+        var line = lineAtHeight(cm.doc, mY);
+        var gutter = cm.options.gutters[i];
+        signalLater(cm, "gutterClick", cm, line, gutter, e);
+        break;
+      }
+    }
+    return true;
+  }
+
+  // Kludge to work around strange IE behavior where it'll sometimes
+  // re-fire a series of drag-related events right after the drop (#1551)
+  var lastDrop = 0;
+
+  function onDrop(e) {
+    var cm = this;
+    if (signalDOMEvent(cm, e) || eventInWidget(cm.display, e) || (cm.options.onDragEvent && cm.options.onDragEvent(cm, addStop(e))))
+      return;
+    e_preventDefault(e);
+    if (ie) lastDrop = +new Date;
+    var pos = posFromMouse(cm, e, true), files = e.dataTransfer.files;
+    if (!pos || isReadOnly(cm)) return;
+    if (files && files.length && window.FileReader && window.File) {
+      var n = files.length, text = Array(n), read = 0;
+      var loadFile = function(file, i) {
+        var reader = new FileReader;
+        reader.onload = function() {
+          text[i] = reader.result;
+          if (++read == n) {
+            pos = clipPos(cm.doc, pos);
+            makeChange(cm.doc, {from: pos, to: pos, text: splitLines(text.join("\n")), origin: "paste"}, "around");
+          }
+        };
+        reader.readAsText(file);
+      };
+      for (var i = 0; i < n; ++i) loadFile(files[i], i);
+    } else {
+      // Don't do a replace if the drop happened inside of the selected text.
+      if (cm.state.draggingText && !(posLess(pos, cm.doc.sel.from) || posLess(cm.doc.sel.to, pos))) {
+        cm.state.draggingText(e);
+        // Ensure the editor is re-focused
+        setTimeout(bind(focusInput, cm), 20);
+        return;
+      }
+      try {
+        var text = e.dataTransfer.getData("Text");
+        if (text) {
+          var curFrom = cm.doc.sel.from, curTo = cm.doc.sel.to;
+          setSelection(cm.doc, pos, pos);
+          if (cm.state.draggingText) replaceRange(cm.doc, "", curFrom, curTo, "paste");
+          cm.replaceSelection(text, null, "paste");
+          focusInput(cm);
+          onFocus(cm);
+        }
+      }
+      catch(e){}
+    }
+  }
+
+  function onDragStart(cm, e) {
+    if (ie && (!cm.state.draggingText || +new Date - lastDrop < 100)) { e_stop(e); return; }
+    if (signalDOMEvent(cm, e) || eventInWidget(cm.display, e)) return;
+
+    var txt = cm.getSelection();
+    e.dataTransfer.setData("Text", txt);
+
+    // Use dummy image instead of default browsers image.
+    // Recent Safari (~6.0.2) have a tendency to segfault when this happens, so we don't do it there.
+    if (e.dataTransfer.setDragImage && !safari) {
+      var img = elt("img", null, null, "position: fixed; left: 0; top: 0;");
+      if (opera) {
+        img.width = img.height = 1;
+        cm.display.wrapper.appendChild(img);
+        // Force a relayout, or Opera won't use our image for some obscure reason
+        img._top = img.offsetTop;
+      }
+      e.dataTransfer.setDragImage(img, 0, 0);
+      if (opera) img.parentNode.removeChild(img);
+    }
+  }
+
+  function setScrollTop(cm, val) {
+    if (Math.abs(cm.doc.scrollTop - val) < 2) return;
+    cm.doc.scrollTop = val;
+    if (!gecko) updateDisplay(cm, [], val);
+    if (cm.display.scroller.scrollTop != val) cm.display.scroller.scrollTop = val;
+    if (cm.display.scrollbarV.scrollTop != val) cm.display.scrollbarV.scrollTop = val;
+    if (gecko) updateDisplay(cm, []);
+    startWorker(cm, 100);
+  }
+  function setScrollLeft(cm, val, isScroller) {
+    if (isScroller ? val == cm.doc.scrollLeft : Math.abs(cm.doc.scrollLeft - val) < 2) return;
+    val = Math.min(val, cm.display.scroller.scrollWidth - cm.display.scroller.clientWidth);
+    cm.doc.scrollLeft = val;
+    alignHorizontally(cm);
+    if (cm.display.scroller.scrollLeft != val) cm.display.scroller.scrollLeft = val;
+    if (cm.display.scrollbarH.scrollLeft != val) cm.display.scrollbarH.scrollLeft = val;
+  }
+
+  // Since the delta values reported on mouse wheel events are
+  // unstandardized between browsers and even browser versions, and
+  // generally horribly unpredictable, this code starts by measuring
+  // the scroll effect that the first few mouse wheel events have,
+  // and, from that, detects the way it can convert deltas to pixel
+  // offsets afterwards.
+  //
+  // The reason we want to know the amount a wheel event will scroll
+  // is that it gives us a chance to update the display before the
+  // actual scrolling happens, reducing flickering.
+
+  var wheelSamples = 0, wheelPixelsPerUnit = null;
+  // Fill in a browser-detected starting value on browsers where we
+  // know one. These don't have to be accurate -- the result of them
+  // being wrong would just be a slight flicker on the first wheel
+  // scroll (if it is large enough).
+  if (ie) wheelPixelsPerUnit = -.53;
+  else if (gecko) wheelPixelsPerUnit = 15;
+  else if (chrome) wheelPixelsPerUnit = -.7;
+  else if (safari) wheelPixelsPerUnit = -1/3;
+
+  function onScrollWheel(cm, e) {
+    var dx = e.wheelDeltaX, dy = e.wheelDeltaY;
+    if (dx == null && e.detail && e.axis == e.HORIZONTAL_AXIS) dx = e.detail;
+    if (dy == null && e.detail && e.axis == e.VERTICAL_AXIS) dy = e.detail;
+    else if (dy == null) dy = e.wheelDelta;
+
+    var display = cm.display, scroll = display.scroller;
+    // Quit if there's nothing to scroll here
+    if (!(dx && scroll.scrollWidth > scroll.clientWidth ||
+          dy && scroll.scrollHeight > scroll.clientHeight)) return;
+
+    // Webkit browsers on OS X abort momentum scrolls when the target
+    // of the scroll event is removed from the scrollable element.
+    // This hack (see related code in patchDisplay) makes sure the
+    // element is kept around.
+    if (dy && mac && webkit) {
+      for (var cur = e.target; cur != scroll; cur = cur.parentNode) {
+        if (cur.lineObj) {
+          cm.display.currentWheelTarget = cur;
+          break;
+        }
+      }
+    }
+
+    // On some browsers, horizontal scrolling will cause redraws to
+    // happen before the gutter has been realigned, causing it to
+    // wriggle around in a most unseemly way. When we have an
+    // estimated pixels/delta value, we just handle horizontal
+    // scrolling entirely here. It'll be slightly off from native, but
+    // better than glitching out.
+    if (dx && !gecko && !opera && wheelPixelsPerUnit != null) {
+      if (dy)
+        setScrollTop(cm, Math.max(0, Math.min(scroll.scrollTop + dy * wheelPixelsPerUnit, scroll.scrollHeight - scroll.clientHeight)));
+      setScrollLeft(cm, Math.max(0, Math.min(scroll.scrollLeft + dx * wheelPixelsPerUnit, scroll.scrollWidth - scroll.clientWidth)));
+      e_preventDefault(e);
+      display.wheelStartX = null; // Abort measurement, if in progress
+      return;
+    }
+
+    if (dy && wheelPixelsPerUnit != null) {
+      var pixels = dy * wheelPixelsPerUnit;
+      var top = cm.doc.scrollTop, bot = top + display.wrapper.clientHeight;
+      if (pixels < 0) top = Math.max(0, top + pixels - 50);
+      else bot = Math.min(cm.doc.height, bot + pixels + 50);
+      updateDisplay(cm, [], {top: top, bottom: bot});
+    }
+
+    if (wheelSamples < 20) {
+      if (display.wheelStartX == null) {
+        display.wheelStartX = scroll.scrollLeft; display.wheelStartY = scroll.scrollTop;
+        display.wheelDX = dx; display.wheelDY = dy;
+        setTimeout(function() {
+          if (display.wheelStartX == null) return;
+          var movedX = scroll.scrollLeft - display.wheelStartX;
+          var movedY = scroll.scrollTop - display.wheelStartY;
+          var sample = (movedY && display.wheelDY && movedY / display.wheelDY) ||
+            (movedX && display.wheelDX && movedX / display.wheelDX);
+          display.wheelStartX = display.wheelStartY = null;
+          if (!sample) return;
+          wheelPixelsPerUnit = (wheelPixelsPerUnit * wheelSamples + sample) / (wheelSamples + 1);
+          ++wheelSamples;
+        }, 200);
+      } else {
+        display.wheelDX += dx; display.wheelDY += dy;
+      }
+    }
+  }
+
+  function doHandleBinding(cm, bound, dropShift) {
+    if (typeof bound == "string") {
+      bound = commands[bound];
+      if (!bound) return false;
+    }
+    // Ensure previous input has been read, so that the handler sees a
+    // consistent view of the document
+    if (cm.display.pollingFast && readInput(cm)) cm.display.pollingFast = false;
+    var doc = cm.doc, prevShift = doc.sel.shift, done = false;
+    try {
+      if (isReadOnly(cm)) cm.state.suppressEdits = true;
+      if (dropShift) doc.sel.shift = false;
+      done = bound(cm) != Pass;
+    } finally {
+      doc.sel.shift = prevShift;
+      cm.state.suppressEdits = false;
+    }
+    return done;
+  }
+
+  function allKeyMaps(cm) {
+    var maps = cm.state.keyMaps.slice(0);
+    if (cm.options.extraKeys) maps.push(cm.options.extraKeys);
+    maps.push(cm.options.keyMap);
+    return maps;
+  }
+
+  var maybeTransition;
+  function handleKeyBinding(cm, e) {
+    // Handle auto keymap transitions
+    var startMap = getKeyMap(cm.options.keyMap), next = startMap.auto;
+    clearTimeout(maybeTransition);
+    if (next && !isModifierKey(e)) maybeTransition = setTimeout(function() {
+      if (getKeyMap(cm.options.keyMap) == startMap) {
+        cm.options.keyMap = (next.call ? next.call(null, cm) : next);
+        keyMapChanged(cm);
+      }
+    }, 50);
+
+    var name = keyName(e, true), handled = false;
+    if (!name) return false;
+    var keymaps = allKeyMaps(cm);
+
+    if (e.shiftKey) {
+      // First try to resolve full name (including 'Shift-'). Failing
+      // that, see if there is a cursor-motion command (starting with
+      // 'go') bound to the keyname without 'Shift-'.
+      handled = lookupKey("Shift-" + name, keymaps, function(b) {return doHandleBinding(cm, b, true);})
+             || lookupKey(name, keymaps, function(b) {
+                  if (typeof b == "string" ? /^go[A-Z]/.test(b) : b.motion)
+                    return doHandleBinding(cm, b);
+                });
+    } else {
+      handled = lookupKey(name, keymaps, function(b) { return doHandleBinding(cm, b); });
+    }
+
+    if (handled) {
+      e_preventDefault(e);
+      restartBlink(cm);
+      if (ie_lt9) { e.oldKeyCode = e.keyCode; e.keyCode = 0; }
+      signalLater(cm, "keyHandled", cm, name, e);
+    }
+    return handled;
+  }
+
+  function handleCharBinding(cm, e, ch) {
+    var handled = lookupKey("'" + ch + "'", allKeyMaps(cm),
+                            function(b) { return doHandleBinding(cm, b, true); });
+    if (handled) {
+      e_preventDefault(e);
+      restartBlink(cm);
+      signalLater(cm, "keyHandled", cm, "'" + ch + "'", e);
+    }
+    return handled;
+  }
+
+  var lastStoppedKey = null;
+  function onKeyDown(e) {
+    var cm = this;
+    if (!cm.state.focused) onFocus(cm);
+    if (ie && e.keyCode == 27) { e.returnValue = false; }
+    if (signalDOMEvent(cm, e) || cm.options.onKeyEvent && cm.options.onKeyEvent(cm, addStop(e))) return;
+    var code = e.keyCode;
+    // IE does strange things with escape.
+    cm.doc.sel.shift = code == 16 || e.shiftKey;
+    // First give onKeyEvent option a chance to handle this.
+    var handled = handleKeyBinding(cm, e);
+    if (opera) {
+      lastStoppedKey = handled ? code : null;
+      // Opera has no cut event... we try to at least catch the key combo
+      if (!handled && code == 88 && !hasCopyEvent && (mac ? e.metaKey : e.ctrlKey))
+        cm.replaceSelection("");
+    }
+  }
+
+  function onKeyPress(e) {
+    var cm = this;
+    if (signalDOMEvent(cm, e) || cm.options.onKeyEvent && cm.options.onKeyEvent(cm, addStop(e))) return;
+    var keyCode = e.keyCode, charCode = e.charCode;
+    if (opera && keyCode == lastStoppedKey) {lastStoppedKey = null; e_preventDefault(e); return;}
+    if (((opera && (!e.which || e.which < 10)) || khtml) && handleKeyBinding(cm, e)) return;
+    var ch = String.fromCharCode(charCode == null ? keyCode : charCode);
+    if (this.options.electricChars && this.doc.mode.electricChars &&
+        this.options.smartIndent && !isReadOnly(this) &&
+        this.doc.mode.electricChars.indexOf(ch) > -1)
+      setTimeout(operation(cm, function() {indentLine(cm, cm.doc.sel.to.line, "smart");}), 75);
+    if (handleCharBinding(cm, e, ch)) return;
+    if (ie && !ie_lt9) cm.display.inputHasSelection = null;
+    fastPoll(cm);
+  }
+
+  function onFocus(cm) {
+    if (cm.options.readOnly == "nocursor") return;
+    if (!cm.state.focused) {
+      signal(cm, "focus", cm);
+      cm.state.focused = true;
+      if (cm.display.wrapper.className.search(/\bCodeMirror-focused\b/) == -1)
+        cm.display.wrapper.className += " CodeMirror-focused";
+      resetInput(cm, true);
+    }
+    slowPoll(cm);
+    restartBlink(cm);
+  }
+  function onBlur(cm) {
+    if (cm.state.focused) {
+      signal(cm, "blur", cm);
+      cm.state.focused = false;
+      cm.display.wrapper.className = cm.display.wrapper.className.replace(" CodeMirror-focused", "");
+    }
+    clearInterval(cm.display.blinker);
+    setTimeout(function() {if (!cm.state.focused) cm.doc.sel.shift = false;}, 150);
+  }
+
+  var detectingSelectAll;
+  function onContextMenu(cm, e) {
+    if (signalDOMEvent(cm, e, "contextmenu")) return;
+    var display = cm.display, sel = cm.doc.sel;
+    if (eventInWidget(display, e)) return;
+
+    var pos = posFromMouse(cm, e), scrollPos = display.scroller.scrollTop;
+    if (!pos || opera) return; // Opera is difficult.
+    if (posEq(sel.from, sel.to) || posLess(pos, sel.from) || !posLess(pos, sel.to))
+      operation(cm, setSelection)(cm.doc, pos, pos);
+
+    var oldCSS = display.input.style.cssText;
+    display.inputDiv.style.position = "absolute";
+    display.input.style.cssText = "position: fixed; width: 30px; height: 30px; top: " + (e.clientY - 5) +
+      "px; left: " + (e.clientX - 5) + "px; z-index: 1000; background: white; outline: none;" +
+      "border-width: 0; outline: none; overflow: hidden; opacity: .05; -ms-opacity: .05; filter: alpha(opacity=5);";
+    focusInput(cm);
+    resetInput(cm, true);
+    // Adds "Select all" to context menu in FF
+    if (posEq(sel.from, sel.to)) display.input.value = display.prevInput = " ";
+
+    function prepareSelectAllHack() {
+      if (display.input.selectionStart != null) {
+        var extval = display.input.value = " " + (posEq(sel.from, sel.to) ? "" : display.input.value);
+        display.prevInput = " ";
+        display.input.selectionStart = 1; display.input.selectionEnd = extval.length;
+      }
+    }
+    function rehide() {
+      display.inputDiv.style.position = "relative";
+      display.input.style.cssText = oldCSS;
+      if (ie_lt9) display.scrollbarV.scrollTop = display.scroller.scrollTop = scrollPos;
+      slowPoll(cm);
+
+      // Try to detect the user choosing select-all
+      if (display.input.selectionStart != null) {
+        if (!ie || ie_lt9) prepareSelectAllHack();
+        clearTimeout(detectingSelectAll);
+        var i = 0, poll = function(){
+          if (display.prevInput == " " && display.input.selectionStart == 0)
+            operation(cm, commands.selectAll)(cm);
+          else if (i++ < 10) detectingSelectAll = setTimeout(poll, 500);
+          else resetInput(cm);
+        };
+        detectingSelectAll = setTimeout(poll, 200);
+      }
+    }
+
+    if (ie && !ie_lt9) prepareSelectAllHack();
+    if (captureMiddleClick) {
+      e_stop(e);
+      var mouseup = function() {
+        off(window, "mouseup", mouseup);
+        setTimeout(rehide, 20);
+      };
+      on(window, "mouseup", mouseup);
+    } else {
+      setTimeout(rehide, 50);
+    }
+  }
+
+  // UPDATING
+
+  var changeEnd = CodeMirror.changeEnd = function(change) {
+    if (!change.text) return change.to;
+    return Pos(change.from.line + change.text.length - 1,
+               lst(change.text).length + (change.text.length == 1 ? change.from.ch : 0));
+  };
+
+  // Make sure a position will be valid after the given change.
+  function clipPostChange(doc, change, pos) {
+    if (!posLess(change.from, pos)) return clipPos(doc, pos);
+    var diff = (change.text.length - 1) - (change.to.line - change.from.line);
+    if (pos.line > change.to.line + diff) {
+      var preLine = pos.line - diff, lastLine = doc.first + doc.size - 1;
+      if (preLine > lastLine) return Pos(lastLine, getLine(doc, lastLine).text.length);
+      return clipToLen(pos, getLine(doc, preLine).text.length);
+    }
+    if (pos.line == change.to.line + diff)
+      return clipToLen(pos, lst(change.text).length + (change.text.length == 1 ? change.from.ch : 0) +
+                       getLine(doc, change.to.line).text.length - change.to.ch);
+    var inside = pos.line - change.from.line;
+    return clipToLen(pos, change.text[inside].length + (inside ? 0 : change.from.ch));
+  }
+
+  // Hint can be null|"end"|"start"|"around"|{anchor,head}
+  function computeSelAfterChange(doc, change, hint) {
+    if (hint && typeof hint == "object") // Assumed to be {anchor, head} object
+      return {anchor: clipPostChange(doc, change, hint.anchor),
+              head: clipPostChange(doc, change, hint.head)};
+
+    if (hint == "start") return {anchor: change.from, head: change.from};
+
+    var end = changeEnd(change);
+    if (hint == "around") return {anchor: change.from, head: end};
+    if (hint == "end") return {anchor: end, head: end};
+
+    // hint is null, leave the selection alone as much as possible
+    var adjustPos = function(pos) {
+      if (posLess(pos, change.from)) return pos;
+      if (!posLess(change.to, pos)) return end;
+
+      var line = pos.line + change.text.length - (change.to.line - change.from.line) - 1, ch = pos.ch;
+      if (pos.line == change.to.line) ch += end.ch - change.to.ch;
+      return Pos(line, ch);
+    };
+    return {anchor: adjustPos(doc.sel.anchor), head: adjustPos(doc.sel.head)};
+  }
+
+  function filterChange(doc, change, update) {
+    var obj = {
+      canceled: false,
+      from: change.from,
+      to: change.to,
+      text: change.text,
+      origin: change.origin,
+      cancel: function() { this.canceled = true; }
+    };
+    if (update) obj.update = function(from, to, text, origin) {
+      if (from) this.from = clipPos(doc, from);
+      if (to) this.to = clipPos(doc, to);
+      if (text) this.text = text;
+      if (origin !== undefined) this.origin = origin;
+    };
+    signal(doc, "beforeChange", doc, obj);
+    if (doc.cm) signal(doc.cm, "beforeChange", doc.cm, obj);
+
+    if (obj.canceled) return null;
+    return {from: obj.from, to: obj.to, text: obj.text, origin: obj.origin};
+  }
+
+  // Replace the range from from to to by the strings in replacement.
+  // change is a {from, to, text [, origin]} object
+  function makeChange(doc, change, selUpdate, ignoreReadOnly) {
+    if (doc.cm) {
+      if (!doc.cm.curOp) return operation(doc.cm, makeChange)(doc, change, selUpdate, ignoreReadOnly);
+      if (doc.cm.state.suppressEdits) return;
+    }
+
+    if (hasHandler(doc, "beforeChange") || doc.cm && hasHandler(doc.cm, "beforeChange")) {
+      change = filterChange(doc, change, true);
+      if (!change) return;
+    }
+
+    // Possibly split or suppress the update based on the presence
+    // of read-only spans in its range.
+    var split = sawReadOnlySpans && !ignoreReadOnly && removeReadOnlyRanges(doc, change.from, change.to);
+    if (split) {
+      for (var i = split.length - 1; i >= 1; --i)
+        makeChangeNoReadonly(doc, {from: split[i].from, to: split[i].to, text: [""]});
+      if (split.length)
+        makeChangeNoReadonly(doc, {from: split[0].from, to: split[0].to, text: change.text}, selUpdate);
+    } else {
+      makeChangeNoReadonly(doc, change, selUpdate);
+    }
+  }
+
+  function makeChangeNoReadonly(doc, change, selUpdate) {
+    var selAfter = computeSelAfterChange(doc, change, selUpdate);
+    addToHistory(doc, change, selAfter, doc.cm ? doc.cm.curOp.id : NaN);
+
+    makeChangeSingleDoc(doc, change, selAfter, stretchSpansOverChange(doc, change));
+    var rebased = [];
+
+    linkedDocs(doc, function(doc, sharedHist) {
+      if (!sharedHist && indexOf(rebased, doc.history) == -1) {
+        rebaseHist(doc.history, change);
+        rebased.push(doc.history);
+      }
+      makeChangeSingleDoc(doc, change, null, stretchSpansOverChange(doc, change));
+    });
+  }
+
+  function makeChangeFromHistory(doc, type) {
+    if (doc.cm && doc.cm.state.suppressEdits) return;
+
+    var hist = doc.history;
+    var event = (type == "undo" ? hist.done : hist.undone).pop();
+    if (!event) return;
+
+    var anti = {changes: [], anchorBefore: event.anchorAfter, headBefore: event.headAfter,
+                anchorAfter: event.anchorBefore, headAfter: event.headBefore,
+                generation: hist.generation};
+    (type == "undo" ? hist.undone : hist.done).push(anti);
+    hist.generation = event.generation || ++hist.maxGeneration;
+
+    var filter = hasHandler(doc, "beforeChange") || doc.cm && hasHandler(doc.cm, "beforeChange");
+
+    for (var i = event.changes.length - 1; i >= 0; --i) {
+      var change = event.changes[i];
+      change.origin = type;
+      if (filter && !filterChange(doc, change, false)) {
+        (type == "undo" ? hist.done : hist.undone).length = 0;
+        return;
+      }
+
+      anti.changes.push(historyChangeFromChange(doc, change));
+
+      var after = i ? computeSelAfterChange(doc, change, null)
+                    : {anchor: event.anchorBefore, head: event.headBefore};
+      makeChangeSingleDoc(doc, change, after, mergeOldSpans(doc, change));
+      var rebased = [];
+
+      linkedDocs(doc, function(doc, sharedHist) {
+        if (!sharedHist && indexOf(rebased, doc.history) == -1) {
+          rebaseHist(doc.history, change);
+          rebased.push(doc.history);
+        }
+        makeChangeSingleDoc(doc, change, null, mergeOldSpans(doc, change));
+      });
+    }
+  }
+
+  function shiftDoc(doc, distance) {
+    function shiftPos(pos) {return Pos(pos.line + distance, pos.ch);}
+    doc.first += distance;
+    if (doc.cm) regChange(doc.cm, doc.first, doc.first, distance);
+    doc.sel.head = shiftPos(doc.sel.head); doc.sel.anchor = shiftPos(doc.sel.anchor);
+    doc.sel.from = shiftPos(doc.sel.from); doc.sel.to = shiftPos(doc.sel.to);
+  }
+
+  function makeChangeSingleDoc(doc, change, selAfter, spans) {
+    if (doc.cm && !doc.cm.curOp)
+      return operation(doc.cm, makeChangeSingleDoc)(doc, change, selAfter, spans);
+
+    if (change.to.line < doc.first) {
+      shiftDoc(doc, change.text.length - 1 - (change.to.line - change.from.line));
+      return;
+    }
+    if (change.from.line > doc.lastLine()) return;
+
+    // Clip the change to the size of this doc
+    if (change.from.line < doc.first) {
+      var shift = change.text.length - 1 - (doc.first - change.from.line);
+      shiftDoc(doc, shift);
+      change = {from: Pos(doc.first, 0), to: Pos(change.to.line + shift, change.to.ch),
+                text: [lst(change.text)], origin: change.origin};
+    }
+    var last = doc.lastLine();
+    if (change.to.line > last) {
+      change = {from: change.from, to: Pos(last, getLine(doc, last).text.length),
+                text: [change.text[0]], origin: change.origin};
+    }
+
+    change.removed = getBetween(doc, change.from, change.to);
+
+    if (!selAfter) selAfter = computeSelAfterChange(doc, change, null);
+    if (doc.cm) makeChangeSingleDocInEditor(doc.cm, change, spans, selAfter);
+    else updateDoc(doc, change, spans, selAfter);
+  }
+
+  function makeChangeSingleDocInEditor(cm, change, spans, selAfter) {
+    var doc = cm.doc, display = cm.display, from = change.from, to = change.to;
+
+    var recomputeMaxLength = false, checkWidthStart = from.line;
+    if (!cm.options.lineWrapping) {
+      checkWidthStart = lineNo(visualLine(doc, getLine(doc, from.line)));
+      doc.iter(checkWidthStart, to.line + 1, function(line) {
+        if (line == display.maxLine) {
+          recomputeMaxLength = true;
+          return true;
+        }
+      });
+    }
+
+    if (!posLess(doc.sel.head, change.from) && !posLess(change.to, doc.sel.head))
+      cm.curOp.cursorActivity = true;
+
+    updateDoc(doc, change, spans, selAfter, estimateHeight(cm));
+
+    if (!cm.options.lineWrapping) {
+      doc.iter(checkWidthStart, from.line + change.text.length, function(line) {
+        var len = lineLength(doc, line);
+        if (len > display.maxLineLength) {
+          display.maxLine = line;
+          display.maxLineLength = len;
+          display.maxLineChanged = true;
+          recomputeMaxLength = false;
+        }
+      });
+      if (recomputeMaxLength) cm.curOp.updateMaxLine = true;
+    }
+
+    // Adjust frontier, schedule worker
+    doc.frontier = Math.min(doc.frontier, from.line);
+    startWorker(cm, 400);
+
+    var lendiff = change.text.length - (to.line - from.line) - 1;
+    // Remember that these lines changed, for updating the display
+    regChange(cm, from.line, to.line + 1, lendiff);
+
+    if (hasHandler(cm, "change")) {
+      var changeObj = {from: from, to: to,
+                       text: change.text,
+                       removed: change.removed,
+                       origin: change.origin};
+      if (cm.curOp.textChanged) {
+        for (var cur = cm.curOp.textChanged; cur.next; cur = cur.next) {}
+        cur.next = changeObj;
+      } else cm.curOp.textChanged = changeObj;
+    }
+  }
+
+  function replaceRange(doc, code, from, to, origin) {
+    if (!to) to = from;
+    if (posLess(to, from)) { var tmp = to; to = from; from = tmp; }
+    if (typeof code == "string") code = splitLines(code);
+    makeChange(doc, {from: from, to: to, text: code, origin: origin}, null);
+  }
+
+  // POSITION OBJECT
+
+  function Pos(line, ch) {
+    if (!(this instanceof Pos)) return new Pos(line, ch);
+    this.line = line; this.ch = ch;
+  }
+  CodeMirror.Pos = Pos;
+
+  function posEq(a, b) {return a.line == b.line && a.ch == b.ch;}
+  function posLess(a, b) {return a.line < b.line || (a.line == b.line && a.ch < b.ch);}
+  function copyPos(x) {return Pos(x.line, x.ch);}
+
+  // SELECTION
+
+  function clipLine(doc, n) {return Math.max(doc.first, Math.min(n, doc.first + doc.size - 1));}
+  function clipPos(doc, pos) {
+    if (pos.line < doc.first) return Pos(doc.first, 0);
+    var last = doc.first + doc.size - 1;
+    if (pos.line > last) return Pos(last, getLine(doc, last).text.length);
+    return clipToLen(pos, getLine(doc, pos.line).text.length);
+  }
+  function clipToLen(pos, linelen) {
+    var ch = pos.ch;
+    if (ch == null || ch > linelen) return Pos(pos.line, linelen);
+    else if (ch < 0) return Pos(pos.line, 0);
+    else return pos;
+  }
+  function isLine(doc, l) {return l >= doc.first && l < doc.first + doc.size;}
+
+  // If shift is held, this will move the selection anchor. Otherwise,
+  // it'll set the whole selection.
+  function extendSelection(doc, pos, other, bias) {
+    if (doc.sel.shift || doc.sel.extend) {
+      var anchor = doc.sel.anchor;
+      if (other) {
+        var posBefore = posLess(pos, anchor);
+        if (posBefore != posLess(other, anchor)) {
+          anchor = pos;
+          pos = other;
+        } else if (posBefore != posLess(pos, other)) {
+          pos = other;
+        }
+      }
+      setSelection(doc, anchor, pos, bias);
+    } else {
+      setSelection(doc, pos, other || pos, bias);
+    }
+    if (doc.cm) doc.cm.curOp.userSelChange = true;
+  }
+
+  function filterSelectionChange(doc, anchor, head) {
+    var obj = {anchor: anchor, head: head};
+    signal(doc, "beforeSelectionChange", doc, obj);
+    if (doc.cm) signal(doc.cm, "beforeSelectionChange", doc.cm, obj);
+    obj.anchor = clipPos(doc, obj.anchor); obj.head = clipPos(doc, obj.head);
+    return obj;
+  }
+
+  // Update the selection. Last two args are only used by
+  // updateDoc, since they have to be expressed in the line
+  // numbers before the update.
+  function setSelection(doc, anchor, head, bias, checkAtomic) {
+    if (!checkAtomic && hasHandler(doc, "beforeSelectionChange") || doc.cm && hasHandler(doc.cm, "beforeSelectionChange")) {
+      var filtered = filterSelectionChange(doc, anchor, head);
+      head = filtered.head;
+      anchor = filtered.anchor;
+    }
+
+    var sel = doc.sel;
+    sel.goalColumn = null;
+    // Skip over atomic spans.
+    if (checkAtomic || !posEq(anchor, sel.anchor))
+      anchor = skipAtomic(doc, anchor, bias, checkAtomic != "push");
+    if (checkAtomic || !posEq(head, sel.head))
+      head = skipAtomic(doc, head, bias, checkAtomic != "push");
+
+    if (posEq(sel.anchor, anchor) && posEq(sel.head, head)) return;
+
+    sel.anchor = anchor; sel.head = head;
+    var inv = posLess(head, anchor);
+    sel.from = inv ? head : anchor;
+    sel.to = inv ? anchor : head;
+
+    if (doc.cm)
+      doc.cm.curOp.updateInput = doc.cm.curOp.selectionChanged =
+        doc.cm.curOp.cursorActivity = true;
+
+    signalLater(doc, "cursorActivity", doc);
+  }
+
+  function reCheckSelection(cm) {
+    setSelection(cm.doc, cm.doc.sel.from, cm.doc.sel.to, null, "push");
+  }
+
+  function skipAtomic(doc, pos, bias, mayClear) {
+    var flipped = false, curPos = pos;
+    var dir = bias || 1;
+    doc.cantEdit = false;
+    search: for (;;) {
+      var line = getLine(doc, curPos.line);
+      if (line.markedSpans) {
+        for (var i = 0; i < line.markedSpans.length; ++i) {
+          var sp = line.markedSpans[i], m = sp.marker;
+          if ((sp.from == null || (m.inclusiveLeft ? sp.from <= curPos.ch : sp.from < curPos.ch)) &&
+              (sp.to == null || (m.inclusiveRight ? sp.to >= curPos.ch : sp.to > curPos.ch))) {
+            if (mayClear) {
+              signal(m, "beforeCursorEnter");
+              if (m.explicitlyCleared) {
+                if (!line.markedSpans) break;
+                else {--i; continue;}
+              }
+            }
+            if (!m.atomic) continue;
+            var newPos = m.find()[dir < 0 ? "from" : "to"];
+            if (posEq(newPos, curPos)) {
+              newPos.ch += dir;
+              if (newPos.ch < 0) {
+                if (newPos.line > doc.first) newPos = clipPos(doc, Pos(newPos.line - 1));
+                else newPos = null;
+              } else if (newPos.ch > line.text.length) {
+                if (newPos.line < doc.first + doc.size - 1) newPos = Pos(newPos.line + 1, 0);
+                else newPos = null;
+              }
+              if (!newPos) {
+                if (flipped) {
+                  // Driven in a corner -- no valid cursor position found at all
+                  // -- try again *with* clearing, if we didn't already
+                  if (!mayClear) return skipAtomic(doc, pos, bias, true);
+                  // Otherwise, turn off editing until further notice, and return the start of the doc
+                  doc.cantEdit = true;
+                  return Pos(doc.first, 0);
+                }
+                flipped = true; newPos = pos; dir = -dir;
+              }
+            }
+            curPos = newPos;
+            continue search;
+          }
+        }
+      }
+      return curPos;
+    }
+  }
+
+  // SCROLLING
+
+  function scrollCursorIntoView(cm) {
+    var coords = scrollPosIntoView(cm, cm.doc.sel.head, cm.options.cursorScrollMargin);
+    if (!cm.state.focused) return;
+    var display = cm.display, box = getRect(display.sizer), doScroll = null;
+    if (coords.top + box.top < 0) doScroll = true;
+    else if (coords.bottom + box.top > (window.innerHeight || document.documentElement.clientHeight)) doScroll = false;
+    if (doScroll != null && !phantom) {
+      var hidden = display.cursor.style.display == "none";
+      if (hidden) {
+        display.cursor.style.display = "";
+        display.cursor.style.left = coords.left + "px";
+        display.cursor.style.top = (coords.top - display.viewOffset) + "px";
+      }
+      display.cursor.scrollIntoView(doScroll);
+      if (hidden) display.cursor.style.display = "none";
+    }
+  }
+
+  function scrollPosIntoView(cm, pos, margin) {
+    if (margin == null) margin = 0;
+    for (;;) {
+      var changed = false, coords = cursorCoords(cm, pos);
+      var scrollPos = calculateScrollPos(cm, coords.left, coords.top - margin, coords.left, coords.bottom + margin);
+      var startTop = cm.doc.scrollTop, startLeft = cm.doc.scrollLeft;
+      if (scrollPos.scrollTop != null) {
+        setScrollTop(cm, scrollPos.scrollTop);
+        if (Math.abs(cm.doc.scrollTop - startTop) > 1) changed = true;
+      }
+      if (scrollPos.scrollLeft != null) {
+        setScrollLeft(cm, scrollPos.scrollLeft);
+        if (Math.abs(cm.doc.scrollLeft - startLeft) > 1) changed = true;
+      }
+      if (!changed) return coords;
+    }
+  }
+
+  function scrollIntoView(cm, x1, y1, x2, y2) {
+    var scrollPos = calculateScrollPos(cm, x1, y1, x2, y2);
+    if (scrollPos.scrollTop != null) setScrollTop(cm, scrollPos.scrollTop);
+    if (scrollPos.scrollLeft != null) setScrollLeft(cm, scrollPos.scrollLeft);
+  }
+
+  function calculateScrollPos(cm, x1, y1, x2, y2) {
+    var display = cm.display, snapMargin = textHeight(cm.display);
+    if (y1 < 0) y1 = 0;
+    var screen = display.scroller.clientHeight - scrollerCutOff, screentop = display.scroller.scrollTop, result = {};
+    var docBottom = cm.doc.height + paddingVert(display);
+    var atTop = y1 < snapMargin, atBottom = y2 > docBottom - snapMargin;
+    if (y1 < screentop) {
+      result.scrollTop = atTop ? 0 : y1;
+    } else if (y2 > screentop + screen) {
+      var newTop = Math.min(y1, (atBottom ? docBottom : y2) - screen);
+      if (newTop != screentop) result.scrollTop = newTop;
+    }
+
+    var screenw = display.scroller.clientWidth - scrollerCutOff, screenleft = display.scroller.scrollLeft;
+    x1 += display.gutters.offsetWidth; x2 += display.gutters.offsetWidth;
+    var gutterw = display.gutters.offsetWidth;
+    var atLeft = x1 < gutterw + 10;
+    if (x1 < screenleft + gutterw || atLeft) {
+      if (atLeft) x1 = 0;
+      result.scrollLeft = Math.max(0, x1 - 10 - gutterw);
+    } else if (x2 > screenw + screenleft - 3) {
+      result.scrollLeft = x2 + 10 - screenw;
+    }
+    return result;
+  }
+
+  function updateScrollPos(cm, left, top) {
+    cm.curOp.updateScrollPos = {scrollLeft: left == null ? cm.doc.scrollLeft : left,
+                                scrollTop: top == null ? cm.doc.scrollTop : top};
+  }
+
+  function addToScrollPos(cm, left, top) {
+    var pos = cm.curOp.updateScrollPos || (cm.curOp.updateScrollPos = {scrollLeft: cm.doc.scrollLeft, scrollTop: cm.doc.scrollTop});
+    var scroll = cm.display.scroller;
+    pos.scrollTop = Math.max(0, Math.min(scroll.scrollHeight - scroll.clientHeight, pos.scrollTop + top));
+    pos.scrollLeft = Math.max(0, Math.min(scroll.scrollWidth - scroll.clientWidth, pos.scrollLeft + left));
+  }
+
+  // API UTILITIES
+
+  function indentLine(cm, n, how, aggressive) {
+    var doc = cm.doc;
+    if (how == null) how = "add";
+    if (how == "smart") {
+      if (!cm.doc.mode.indent) how = "prev";
+      else var state = getStateBefore(cm, n);
+    }
+
+    var tabSize = cm.options.tabSize;
+    var line = getLine(doc, n), curSpace = countColumn(line.text, null, tabSize);
+    var curSpaceString = line.text.match(/^\s*/)[0], indentation;
+    if (how == "smart") {
+      indentation = cm.doc.mode.indent(state, line.text.slice(curSpaceString.length), line.text);
+      if (indentation == Pass) {
+        if (!aggressive) return;
+        how = "prev";
+      }
+    }
+    if (how == "prev") {
+      if (n > doc.first) indentation = countColumn(getLine(doc, n-1).text, null, tabSize);
+      else indentation = 0;
+    } else if (how == "add") {
+      indentation = curSpace + cm.options.indentUnit;
+    } else if (how == "subtract") {
+      indentation = curSpace - cm.options.indentUnit;
+    } else if (typeof how == "number") {
+      indentation = curSpace + how;
+    }
+    indentation = Math.max(0, indentation);
+
+    var indentString = "", pos = 0;
+    if (cm.options.indentWithTabs)
+      for (var i = Math.floor(indentation / tabSize); i; --i) {pos += tabSize; indentString += "\t";}
+    if (pos < indentation) indentString += spaceStr(indentation - pos);
+
+    if (indentString != curSpaceString)
+      replaceRange(cm.doc, indentString, Pos(n, 0), Pos(n, curSpaceString.length), "+input");
+    line.stateAfter = null;
+  }
+
+  function changeLine(cm, handle, op) {
+    var no = handle, line = handle, doc = cm.doc;
+    if (typeof handle == "number") line = getLine(doc, clipLine(doc, handle));
+    else no = lineNo(handle);
+    if (no == null) return null;
+    if (op(line, no)) regChange(cm, no, no + 1);
+    else return null;
+    return line;
+  }
+
+  function findPosH(doc, pos, dir, unit, visually) {
+    var line = pos.line, ch = pos.ch, origDir = dir;
+    var lineObj = getLine(doc, line);
+    var possible = true;
+    function findNextLine() {
+      var l = line + dir;
+      if (l < doc.first || l >= doc.first + doc.size) return (possible = false);
+      line = l;
+      return lineObj = getLine(doc, l);
+    }
+    function moveOnce(boundToLine) {
+      var next = (visually ? moveVisually : moveLogically)(lineObj, ch, dir, true);
+      if (next == null) {
+        if (!boundToLine && findNextLine()) {
+          if (visually) ch = (dir < 0 ? lineRight : lineLeft)(lineObj);
+          else ch = dir < 0 ? lineObj.text.length : 0;
+        } else return (possible = false);
+      } else ch = next;
+      return true;
+    }
+
+    if (unit == "char") moveOnce();
+    else if (unit == "column") moveOnce(true);
+    else if (unit == "word" || unit == "group") {
+      var sawType = null, group = unit == "group";
+      for (var first = true;; first = false) {
+        if (dir < 0 && !moveOnce(!first)) break;
+        var cur = lineObj.text.charAt(ch) || "\n";
+        var type = isWordChar(cur) ? "w"
+          : !group ? null
+          : /\s/.test(cur) ? null
+          : "p";
+        if (sawType && sawType != type) {
+          if (dir < 0) {dir = 1; moveOnce();}
+          break;
+        }
+        if (type) sawType = type;
+        if (dir > 0 && !moveOnce(!first)) break;
+      }
+    }
+    var result = skipAtomic(doc, Pos(line, ch), origDir, true);
+    if (!possible) result.hitSide = true;
+    return result;
+  }
+
+  function findPosV(cm, pos, dir, unit) {
+    var doc = cm.doc, x = pos.left, y;
+    if (unit == "page") {
+      var pageSize = Math.min(cm.display.wrapper.clientHeight, window.innerHeight || document.documentElement.clientHeight);
+      y = pos.top + dir * (pageSize - (dir < 0 ? 1.5 : .5) * textHeight(cm.display));
+    } else if (unit == "line") {
+      y = dir > 0 ? pos.bottom + 3 : pos.top - 3;
+    }
+    for (;;) {
+      var target = coordsChar(cm, x, y);
+      if (!target.outside) break;
+      if (dir < 0 ? y <= 0 : y >= doc.height) { target.hitSide = true; break; }
+      y += dir * 5;
+    }
+    return target;
+  }
+
+  function findWordAt(line, pos) {
+    var start = pos.ch, end = pos.ch;
+    if (line) {
+      if ((pos.xRel < 0 || end == line.length) && start) --start; else ++end;
+      var startChar = line.charAt(start);
+      var check = isWordChar(startChar) ? isWordChar
+        : /\s/.test(startChar) ? function(ch) {return /\s/.test(ch);}
+        : function(ch) {return !/\s/.test(ch) && !isWordChar(ch);};
+      while (start > 0 && check(line.charAt(start - 1))) --start;
+      while (end < line.length && check(line.charAt(end))) ++end;
+    }
+    return {from: Pos(pos.line, start), to: Pos(pos.line, end)};
+  }
+
+  function selectLine(cm, line) {
+    extendSelection(cm.doc, Pos(line, 0), clipPos(cm.doc, Pos(line + 1, 0)));
+  }
+
+  // PROTOTYPE
+
+  // The publicly visible API. Note that operation(null, f) means
+  // 'wrap f in an operation, performed on its `this` parameter'
+
+  CodeMirror.prototype = {
+    constructor: CodeMirror,
+    focus: function(){window.focus(); focusInput(this); onFocus(this); fastPoll(this);},
+
+    setOption: function(option, value) {
+      var options = this.options, old = options[option];
+      if (options[option] == value && option != "mode") return;
+      options[option] = value;
+      if (optionHandlers.hasOwnProperty(option))
+        operation(this, optionHandlers[option])(this, value, old);
+    },
+
+    getOption: function(option) {return this.options[option];},
+    getDoc: function() {return this.doc;},
+
+    addKeyMap: function(map, bottom) {
+      this.state.keyMaps[bottom ? "push" : "unshift"](map);
+    },
+    removeKeyMap: function(map) {
+      var maps = this.state.keyMaps;
+      for (var i = 0; i < maps.length; ++i)
+        if (maps[i] == map || (typeof maps[i] != "string" && maps[i].name == map)) {
+          maps.splice(i, 1);
+          return true;
+        }
+    },
+
+    addOverlay: operation(null, function(spec, options) {
+      var mode = spec.token ? spec : CodeMirror.getMode(this.options, spec);
+      if (mode.startState) throw new Error("Overlays may not be stateful.");
+      this.state.overlays.push({mode: mode, modeSpec: spec, opaque: options && options.opaque});
+      this.state.modeGen++;
+      regChange(this);
+    }),
+    removeOverlay: operation(null, function(spec) {
+      var overlays = this.state.overlays;
+      for (var i = 0; i < overlays.length; ++i) {
+        var cur = overlays[i].modeSpec;
+        if (cur == spec || typeof spec == "string" && cur.name == spec) {
+          overlays.splice(i, 1);
+          this.state.modeGen++;
+          regChange(this);
+          return;
+        }
+      }
+    }),
+
+    indentLine: operation(null, function(n, dir, aggressive) {
+      if (typeof dir != "string" && typeof dir != "number") {
+        if (dir == null) dir = this.options.smartIndent ? "smart" : "prev";
+        else dir = dir ? "add" : "subtract";
+      }
+      if (isLine(this.doc, n)) indentLine(this, n, dir, aggressive);
+    }),
+    indentSelection: operation(null, function(how) {
+      var sel = this.doc.sel;
+      if (posEq(sel.from, sel.to)) return indentLine(this, sel.from.line, how);
+      var e = sel.to.line - (sel.to.ch ? 0 : 1);
+      for (var i = sel.from.line; i <= e; ++i) indentLine(this, i, how);
+    }),
+
+    // Fetch the parser token for a given character. Useful for hacks
+    // that want to inspect the mode state (say, for completion).
+    getTokenAt: function(pos, precise) {
+      var doc = this.doc;
+      pos = clipPos(doc, pos);
+      var state = getStateBefore(this, pos.line, precise), mode = this.doc.mode;
+      var line = getLine(doc, pos.line);
+      var stream = new StringStream(line.text, this.options.tabSize);
+      while (stream.pos < pos.ch && !stream.eol()) {
+        stream.start = stream.pos;
+        var style = mode.token(stream, state);
+      }
+      return {start: stream.start,
+              end: stream.pos,
+              string: stream.current(),
+              className: style || null, // Deprecated, use 'type' instead
+              type: style || null,
+              state: state};
+    },
+
+    getTokenTypeAt: function(pos) {
+      pos = clipPos(this.doc, pos);
+      var styles = getLineStyles(this, getLine(this.doc, pos.line));
+      var before = 0, after = (styles.length - 1) / 2, ch = pos.ch;
+      if (ch == 0) return styles[2];
+      for (;;) {
+        var mid = (before + after) >> 1;
+        if ((mid ? styles[mid * 2 - 1] : 0) >= ch) after = mid;
+        else if (styles[mid * 2 + 1] < ch) before = mid + 1;
+        else return styles[mid * 2 + 2];
+      }
+    },
+
+    getModeAt: function(pos) {
+      var mode = this.doc.mode;
+      if (!mode.innerMode) return mode;
+      return CodeMirror.innerMode(mode, this.getTokenAt(pos).state).mode;
+    },
+
+    getHelper: function(pos, type) {
+      if (!helpers.hasOwnProperty(type)) return;
+      var help = helpers[type], mode = this.getModeAt(pos);
+      return mode[type] && help[mode[type]] ||
+        mode.helperType && help[mode.helperType] ||
+        help[mode.name];
+    },
+
+    getStateAfter: function(line, precise) {
+      var doc = this.doc;
+      line = clipLine(doc, line == null ? doc.first + doc.size - 1: line);
+      return getStateBefore(this, line + 1, precise);
+    },
+
+    cursorCoords: function(start, mode) {
+      var pos, sel = this.doc.sel;
+      if (start == null) pos = sel.head;
+      else if (typeof start == "object") pos = clipPos(this.doc, start);
+      else pos = start ? sel.from : sel.to;
+      return cursorCoords(this, pos, mode || "page");
+    },
+
+    charCoords: function(pos, mode) {
+      return charCoords(this, clipPos(this.doc, pos), mode || "page");
+    },
+
+    coordsChar: function(coords, mode) {
+      coords = fromCoordSystem(this, coords, mode || "page");
+      return coordsChar(this, coords.left, coords.top);
+    },
+
+    lineAtHeight: function(height, mode) {
+      height = fromCoordSystem(this, {top: height, left: 0}, mode || "page").top;
+      return lineAtHeight(this.doc, height + this.display.viewOffset);
+    },
+    heightAtLine: function(line, mode) {
+      var end = false, last = this.doc.first + this.doc.size - 1;
+      if (line < this.doc.first) line = this.doc.first;
+      else if (line > last) { line = last; end = true; }
+      var lineObj = getLine(this.doc, line);
+      return intoCoordSystem(this, getLine(this.doc, line), {top: 0, left: 0}, mode || "page").top +
+        (end ? lineObj.height : 0);
+    },
+
+    defaultTextHeight: function() { return textHeight(this.display); },
+    defaultCharWidth: function() { return charWidth(this.display); },
+
+    setGutterMarker: operation(null, function(line, gutterID, value) {
+      return changeLine(this, line, function(line) {
+        var markers = line.gutterMarkers || (line.gutterMarkers = {});
+        markers[gutterID] = value;
+        if (!value && isEmpty(markers)) line.gutterMarkers = null;
+        return true;
+      });
+    }),
+
+    clearGutter: operation(null, function(gutterID) {
+      var cm = this, doc = cm.doc, i = doc.first;
+      doc.iter(function(line) {
+        if (line.gutterMarkers && line.gutterMarkers[gutterID]) {
+          line.gutterMarkers[gutterID] = null;
+          regChange(cm, i, i + 1);
+          if (isEmpty(line.gutterMarkers)) line.gutterMarkers = null;
+        }
+        ++i;
+      });
+    }),
+
+    addLineClass: operation(null, function(handle, where, cls) {
+      return changeLine(this, handle, function(line) {
+        var prop = where == "text" ? "textClass" : where == "background" ? "bgClass" : "wrapClass";
+        if (!line[prop]) line[prop] = cls;
+        else if (new RegExp("(?:^|\\s)" + cls + "(?:$|\\s)").test(line[prop])) return false;
+        else line[prop] += " " + cls;
+        return true;
+      });
+    }),
+
+    removeLineClass: operation(null, function(handle, where, cls) {
+      return changeLine(this, handle, function(line) {
+        var prop = where == "text" ? "textClass" : where == "background" ? "bgClass" : "wrapClass";
+        var cur = line[prop];
+        if (!cur) return false;
+        else if (cls == null) line[prop] = null;
+        else {
+          var found = cur.match(new RegExp("(?:^|\\s+)" + cls + "(?:$|\\s+)"));
+          if (!found) return false;
+          var end = found.index + found[0].length;
+          line[prop] = cur.slice(0, found.index) + (!found.index || end == cur.length ? "" : " ") + cur.slice(end) || null;
+        }
+        return true;
+      });
+    }),
+
+    addLineWidget: operation(null, function(handle, node, options) {
+      return addLineWidget(this, handle, node, options);
+    }),
+
+    removeLineWidget: function(widget) { widget.clear(); },
+
+    lineInfo: function(line) {
+      if (typeof line == "number") {
+        if (!isLine(this.doc, line)) return null;
+        var n = line;
+        line = getLine(this.doc, line);
+        if (!line) return null;
+      } else {
+        var n = lineNo(line);
+        if (n == null) return null;
+      }
+      return {line: n, handle: line, text: line.text, gutterMarkers: line.gutterMarkers,
+              textClass: line.textClass, bgClass: line.bgClass, wrapClass: line.wrapClass,
+              widgets: line.widgets};
+    },
+
+    getViewport: function() { return {from: this.display.showingFrom, to: this.display.showingTo};},
+
+    addWidget: function(pos, node, scroll, vert, horiz) {
+      var display = this.display;
+      pos = cursorCoords(this, clipPos(this.doc, pos));
+      var top = pos.bottom, left = pos.left;
+      node.style.position = "absolute";
+      display.sizer.appendChild(node);
+      if (vert == "over") {
+        top = pos.top;
+      } else if (vert == "above" || vert == "near") {
+        var vspace = Math.max(display.wrapper.clientHeight, this.doc.height),
+        hspace = Math.max(display.sizer.clientWidth, display.lineSpace.clientWidth);
+        // Default to positioning above (if specified and possible); otherwise default to positioning below
+        if ((vert == 'above' || pos.bottom + node.offsetHeight > vspace) && pos.top > node.offsetHeight)
+          top = pos.top - node.offsetHeight;
+        else if (pos.bottom + node.offsetHeight <= vspace)
+          top = pos.bottom;
+        if (left + node.offsetWidth > hspace)
+          left = hspace - node.offsetWidth;
+      }
+      node.style.top = top + "px";
+      node.style.left = node.style.right = "";
+      if (horiz == "right") {
+        left = display.sizer.clientWidth - node.offsetWidth;
+        node.style.right = "0px";
+      } else {
+        if (horiz == "left") left = 0;
+        else if (horiz == "middle") left = (display.sizer.clientWidth - node.offsetWidth) / 2;
+        node.style.left = left + "px";
+      }
+      if (scroll)
+        scrollIntoView(this, left, top, left + node.offsetWidth, top + node.offsetHeight);
+    },
+
+    triggerOnKeyDown: operation(null, onKeyDown),
+
+    execCommand: function(cmd) {return commands[cmd](this);},
+
+    findPosH: function(from, amount, unit, visually) {
+      var dir = 1;
+      if (amount < 0) { dir = -1; amount = -amount; }
+      for (var i = 0, cur = clipPos(this.doc, from); i < amount; ++i) {
+        cur = findPosH(this.doc, cur, dir, unit, visually);
+        if (cur.hitSide) break;
+      }
+      return cur;
+    },
+
+    moveH: operation(null, function(dir, unit) {
+      var sel = this.doc.sel, pos;
+      if (sel.shift || sel.extend || posEq(sel.from, sel.to))
+        pos = findPosH(this.doc, sel.head, dir, unit, this.options.rtlMoveVisually);
+      else
+        pos = dir < 0 ? sel.from : sel.to;
+      extendSelection(this.doc, pos, pos, dir);
+    }),
+
+    deleteH: operation(null, function(dir, unit) {
+      var sel = this.doc.sel;
+      if (!posEq(sel.from, sel.to)) replaceRange(this.doc, "", sel.from, sel.to, "+delete");
+      else replaceRange(this.doc, "", sel.from, findPosH(this.doc, sel.head, dir, unit, false), "+delete");
+      this.curOp.userSelChange = true;
+    }),
+
+    findPosV: function(from, amount, unit, goalColumn) {
+      var dir = 1, x = goalColumn;
+      if (amount < 0) { dir = -1; amount = -amount; }
+      for (var i = 0, cur = clipPos(this.doc, from); i < amount; ++i) {
+        var coords = cursorCoords(this, cur, "div");
+        if (x == null) x = coords.left;
+        else coords.left = x;
+        cur = findPosV(this, coords, dir, unit);
+        if (cur.hitSide) break;
+      }
+      return cur;
+    },
+
+    moveV: operation(null, function(dir, unit) {
+      var sel = this.doc.sel;
+      var pos = cursorCoords(this, sel.head, "div");
+      if (sel.goalColumn != null) pos.left = sel.goalColumn;
+      var target = findPosV(this, pos, dir, unit);
+
+      if (unit == "page") addToScrollPos(this, 0, charCoords(this, target, "div").top - pos.top);
+      extendSelection(this.doc, target, target, dir);
+      sel.goalColumn = pos.left;
+    }),
+
+    toggleOverwrite: function(value) {
+      if (value != null && value == this.state.overwrite) return;
+      if (this.state.overwrite = !this.state.overwrite)
+        this.display.cursor.className += " CodeMirror-overwrite";
+      else
+        this.display.cursor.className = this.display.cursor.className.replace(" CodeMirror-overwrite", "");
+    },
+    hasFocus: function() { return this.state.focused; },
+
+    scrollTo: operation(null, function(x, y) {
+      updateScrollPos(this, x, y);
+    }),
+    getScrollInfo: function() {
+      var scroller = this.display.scroller, co = scrollerCutOff;
+      return {left: scroller.scrollLeft, top: scroller.scrollTop,
+              height: scroller.scrollHeight - co, width: scroller.scrollWidth - co,
+              clientHeight: scroller.clientHeight - co, clientWidth: scroller.clientWidth - co};
+    },
+
+    scrollIntoView: operation(null, function(pos, margin) {
+      if (typeof pos == "number") pos = Pos(pos, 0);
+      if (!margin) margin = 0;
+      var coords = pos;
+
+      if (!pos || pos.line != null) {
+        this.curOp.scrollToPos = pos ? clipPos(this.doc, pos) : this.doc.sel.head;
+        this.curOp.scrollToPosMargin = margin;
+        coords = cursorCoords(this, this.curOp.scrollToPos);
+      }
+      var sPos = calculateScrollPos(this, coords.left, coords.top - margin, coords.right, coords.bottom + margin);
+      updateScrollPos(this, sPos.scrollLeft, sPos.scrollTop);
+    }),
+
+    setSize: function(width, height) {
+      function interpret(val) {
+        return typeof val == "number" || /^\d+$/.test(String(val)) ? val + "px" : val;
+      }
+      if (width != null) this.display.wrapper.style.width = interpret(width);
+      if (height != null) this.display.wrapper.style.height = interpret(height);
+      this.refresh();
+    },
+
+    operation: function(f){return runInOp(this, f);},
+
+    refresh: operation(null, function() {
+      clearCaches(this);
+      updateScrollPos(this, this.doc.scrollLeft, this.doc.scrollTop);
+      regChange(this);
+    }),
+
+    swapDoc: operation(null, function(doc) {
+      var old = this.doc;
+      old.cm = null;
+      attachDoc(this, doc);
+      clearCaches(this);
+      resetInput(this, true);
+      updateScrollPos(this, doc.scrollLeft, doc.scrollTop);
+      return old;
+    }),
+
+    getInputField: function(){return this.display.input;},
+    getWrapperElement: function(){return this.display.wrapper;},
+    getScrollerElement: function(){return this.display.scroller;},
+    getGutterElement: function(){return this.display.gutters;}
+  };
+  eventMixin(CodeMirror);
+
+  // OPTION DEFAULTS
+
+  var optionHandlers = CodeMirror.optionHandlers = {};
+
+  // The default configuration options.
+  var defaults = CodeMirror.defaults = {};
+
+  function option(name, deflt, handle, notOnInit) {
+    CodeMirror.defaults[name] = deflt;
+    if (handle) optionHandlers[name] =
+      notOnInit ? function(cm, val, old) {if (old != Init) handle(cm, val, old);} : handle;
+  }
+
+  var Init = CodeMirror.Init = {toString: function(){return "CodeMirror.Init";}};
+
+  // These two are, on init, called from the constructor because they
+  // have to be initialized before the editor can start at all.
+  option("value", "", function(cm, val) {
+    cm.setValue(val);
+  }, true);
+  option("mode", null, function(cm, val) {
+    cm.doc.modeOption = val;
+    loadMode(cm);
+  }, true);
+
+  option("indentUnit", 2, loadMode, true);
+  option("indentWithTabs", false);
+  option("smartIndent", true);
+  option("tabSize", 4, function(cm) {
+    loadMode(cm);
+    clearCaches(cm);
+    regChange(cm);
+  }, true);
+  option("electricChars", true);
+  option("rtlMoveVisually", !windows);
+
+  option("theme", "default", function(cm) {
+    themeChanged(cm);
+    guttersChanged(cm);
+  }, true);
+  option("keyMap", "default", keyMapChanged);
+  option("extraKeys", null);
+
+  option("onKeyEvent", null);
+  option("onDragEvent", null);
+
+  option("lineWrapping", false, wrappingChanged, true);
+  option("gutters", [], function(cm) {
+    setGuttersForLineNumbers(cm.options);
+    guttersChanged(cm);
+  }, true);
+  option("fixedGutter", true, function(cm, val) {
+    cm.display.gutters.style.left = val ? compensateForHScroll(cm.display) + "px" : "0";
+    cm.refresh();
+  }, true);
+  option("coverGutterNextToScrollbar", false, updateScrollbars, true);
+  option("lineNumbers", false, function(cm) {
+    setGuttersForLineNumbers(cm.options);
+    guttersChanged(cm);
+  }, true);
+  option("firstLineNumber", 1, guttersChanged, true);
+  option("lineNumberFormatter", function(integer) {return integer;}, guttersChanged, true);
+  option("showCursorWhenSelecting", false, updateSelection, true);
+
+  option("readOnly", false, function(cm, val) {
+    if (val == "nocursor") {onBlur(cm); cm.display.input.blur();}
+    else if (!val) resetInput(cm, true);
+  });
+  option("dragDrop", true);
+
+  option("cursorBlinkRate", 530);
+  option("cursorScrollMargin", 0);
+  option("cursorHeight", 1);
+  option("workTime", 100);
+  option("workDelay", 100);
+  option("flattenSpans", true);
+  option("pollInterval", 100);
+  option("undoDepth", 40, function(cm, val){cm.doc.history.undoDepth = val;});
+  option("historyEventDelay", 500);
+  option("viewportMargin", 10, function(cm){cm.refresh();}, true);
+  option("maxHighlightLength", 10000, function(cm){loadMode(cm); cm.refresh();}, true);
+  option("moveInputWithCursor", true, function(cm, val) {
+    if (!val) cm.display.inputDiv.style.top = cm.display.inputDiv.style.left = 0;
+  });
+
+  option("tabindex", null, function(cm, val) {
+    cm.display.input.tabIndex = val || "";
+  });
+  option("autofocus", null);
+
+  // MODE DEFINITION AND QUERYING
+
+  // Known modes, by name and by MIME
+  var modes = CodeMirror.modes = {}, mimeModes = CodeMirror.mimeModes = {};
+
+  CodeMirror.defineMode = function(name, mode) {
+    if (!CodeMirror.defaults.mode && name != "null") CodeMirror.defaults.mode = name;
+    if (arguments.length > 2) {
+      mode.dependencies = [];
+      for (var i = 2; i < arguments.length; ++i) mode.dependencies.push(arguments[i]);
+    }
+    modes[name] = mode;
+  };
+
+  CodeMirror.defineMIME = function(mime, spec) {
+    mimeModes[mime] = spec;
+  };
+
+  CodeMirror.resolveMode = function(spec) {
+    if (typeof spec == "string" && mimeModes.hasOwnProperty(spec)) {
+      spec = mimeModes[spec];
+    } else if (spec && typeof spec.name == "string" && mimeModes.hasOwnProperty(spec.name)) {
+      var found = mimeModes[spec.name];
+      spec = createObj(found, spec);
+      spec.name = found.name;
+    } else if (typeof spec == "string" && /^[\w\-]+\/[\w\-]+\+xml$/.test(spec)) {
+      return CodeMirror.resolveMode("application/xml");
+    }
+    if (typeof spec == "string") return {name: spec};
+    else return spec || {name: "null"};
+  };
+
+  CodeMirror.getMode = function(options, spec) {
+    var spec = CodeMirror.resolveMode(spec);
+    var mfactory = modes[spec.name];
+    if (!mfactory) return CodeMirror.getMode(options, "text/plain");
+    var modeObj = mfactory(options, spec);
+    if (modeExtensions.hasOwnProperty(spec.name)) {
+      var exts = modeExtensions[spec.name];
+      for (var prop in exts) {
+        if (!exts.hasOwnProperty(prop)) continue;
+        if (modeObj.hasOwnProperty(prop)) modeObj["_" + prop] = modeObj[prop];
+        modeObj[prop] = exts[prop];
+      }
+    }
+    modeObj.name = spec.name;
+
+    return modeObj;
+  };
+
+  CodeMirror.defineMode("null", function() {
+    return {token: function(stream) {stream.skipToEnd();}};
+  });
+  CodeMirror.defineMIME("text/plain", "null");
+
+  var modeExtensions = CodeMirror.modeExtensions = {};
+  CodeMirror.extendMode = function(mode, properties) {
+    var exts = modeExtensions.hasOwnProperty(mode) ? modeExtensions[mode] : (modeExtensions[mode] = {});
+    copyObj(properties, exts);
+  };
+
+  // EXTENSIONS
+
+  CodeMirror.defineExtension = function(name, func) {
+    CodeMirror.prototype[name] = func;
+  };
+  CodeMirror.defineDocExtension = function(name, func) {
+    Doc.prototype[name] = func;
+  };
+  CodeMirror.defineOption = option;
+
+  var initHooks = [];
+  CodeMirror.defineInitHook = function(f) {initHooks.push(f);};
+
+  var helpers = CodeMirror.helpers = {};
+  CodeMirror.registerHelper = function(type, name, value) {
+    if (!helpers.hasOwnProperty(type)) helpers[type] = CodeMirror[type] = {};
+    helpers[type][name] = value;
+  };
+
+  // UTILITIES
+
+  CodeMirror.isWordChar = isWordChar;
+
+  // MODE STATE HANDLING
+
+  // Utility functions for working with state. Exported because modes
+  // sometimes need to do this.
+  function copyState(mode, state) {
+    if (state === true) return state;
+    if (mode.copyState) return mode.copyState(state);
+    var nstate = {};
+    for (var n in state) {
+      var val = state[n];
+      if (val instanceof Array) val = val.concat([]);
+      nstate[n] = val;
+    }
+    return nstate;
+  }
+  CodeMirror.copyState = copyState;
+
+  function startState(mode, a1, a2) {
+    return mode.startState ? mode.startState(a1, a2) : true;
+  }
+  CodeMirror.startState = startState;
+
+  CodeMirror.innerMode = function(mode, state) {
+    while (mode.innerMode) {
+      var info = mode.innerMode(state);
+      state = info.state;
+      mode = info.mode;
+    }
+    return info || {mode: mode, state: state};
+  };
+
+  // STANDARD COMMANDS
+
+  var commands = CodeMirror.commands = {
+    selectAll: function(cm) {cm.setSelection(Pos(cm.firstLine(), 0), Pos(cm.lastLine()));},
+    killLine: function(cm) {
+      var from = cm.getCursor(true), to = cm.getCursor(false), sel = !posEq(from, to);
+      if (!sel && cm.getLine(from.line).length == from.ch)
+        cm.replaceRange("", from, Pos(from.line + 1, 0), "+delete");
+      else cm.replaceRange("", from, sel ? to : Pos(from.line), "+delete");
+    },
+    deleteLine: function(cm) {
+      var l = cm.getCursor().line;
+      cm.replaceRange("", Pos(l, 0), Pos(l), "+delete");
+    },
+    delLineLeft: function(cm) {
+      var cur = cm.getCursor();
+      cm.replaceRange("", Pos(cur.line, 0), cur, "+delete");
+    },
+    undo: function(cm) {cm.undo();},
+    redo: function(cm) {cm.redo();},
+    goDocStart: function(cm) {cm.extendSelection(Pos(cm.firstLine(), 0));},
+    goDocEnd: function(cm) {cm.extendSelection(Pos(cm.lastLine()));},
+    goLineStart: function(cm) {
+      cm.extendSelection(lineStart(cm, cm.getCursor().line));
+    },
+    goLineStartSmart: function(cm) {
+      var cur = cm.getCursor(), start = lineStart(cm, cur.line);
+      var line = cm.getLineHandle(start.line);
+      var order = getOrder(line);
+      if (!order || order[0].level == 0) {
+        var firstNonWS = Math.max(0, line.text.search(/\S/));
+        var inWS = cur.line == start.line && cur.ch <= firstNonWS && cur.ch;
+        cm.extendSelection(Pos(start.line, inWS ? 0 : firstNonWS));
+      } else cm.extendSelection(start);
+    },
+    goLineEnd: function(cm) {
+      cm.extendSelection(lineEnd(cm, cm.getCursor().line));
+    },
+    goLineRight: function(cm) {
+      var top = cm.charCoords(cm.getCursor(), "div").top + 5;
+      cm.extendSelection(cm.coordsChar({left: cm.display.lineDiv.offsetWidth + 100, top: top}, "div"));
+    },
+    goLineLeft: function(cm) {
+      var top = cm.charCoords(cm.getCursor(), "div").top + 5;
+      cm.extendSelection(cm.coordsChar({left: 0, top: top}, "div"));
+    },
+    goLineUp: function(cm) {cm.moveV(-1, "line");},
+    goLineDown: function(cm) {cm.moveV(1, "line");},
+    goPageUp: function(cm) {cm.moveV(-1, "page");},
+    goPageDown: function(cm) {cm.moveV(1, "page");},
+    goCharLeft: function(cm) {cm.moveH(-1, "char");},
+    goCharRight: function(cm) {cm.moveH(1, "char");},
+    goColumnLeft: function(cm) {cm.moveH(-1, "column");},
+    goColumnRight: function(cm) {cm.moveH(1, "column");},
+    goWordLeft: function(cm) {cm.moveH(-1, "word");},
+    goGroupRight: function(cm) {cm.moveH(1, "group");},
+    goGroupLeft: function(cm) {cm.moveH(-1, "group");},
+    goWordRight: function(cm) {cm.moveH(1, "word");},
+    delCharBefore: function(cm) {cm.deleteH(-1, "char");},
+    delCharAfter: function(cm) {cm.deleteH(1, "char");},
+    delWordBefore: function(cm) {cm.deleteH(-1, "word");},
+    delWordAfter: function(cm) {cm.deleteH(1, "word");},
+    delGroupBefore: function(cm) {cm.deleteH(-1, "group");},
+    delGroupAfter: function(cm) {cm.deleteH(1, "group");},
+    indentAuto: function(cm) {cm.indentSelection("smart");},
+    indentMore: function(cm) {cm.indentSelection("add");},
+    indentLess: function(cm) {cm.indentSelection("subtract");},
+    insertTab: function(cm) {cm.replaceSelection("\t", "end", "+input");},
+    defaultTab: function(cm) {
+      if (cm.somethingSelected()) cm.indentSelection("add");
+      else cm.replaceSelection("\t", "end", "+input");
+    },
+    transposeChars: function(cm) {
+      var cur = cm.getCursor(), line = cm.getLine(cur.line);
+      if (cur.ch > 0 && cur.ch < line.length - 1)
+        cm.replaceRange(line.charAt(cur.ch) + line.charAt(cur.ch - 1),
+                        Pos(cur.line, cur.ch - 1), Pos(cur.line, cur.ch + 1));
+    },
+    newlineAndIndent: function(cm) {
+      operation(cm, function() {
+        cm.replaceSelection("\n", "end", "+input");
+        cm.indentLine(cm.getCursor().line, null, true);
+      })();
+    },
+    toggleOverwrite: function(cm) {cm.toggleOverwrite();}
+  };
+
+  // STANDARD KEYMAPS
+
+  var keyMap = CodeMirror.keyMap = {};
+  keyMap.basic = {
+    "Left": "goCharLeft", "Right": "goCharRight", "Up": "goLineUp", "Down": "goLineDown",
+    "End": "goLineEnd", "Home": "goLineStartSmart", "PageUp": "goPageUp", "PageDown": "goPageDown",
+    "Delete": "delCharAfter", "Backspace": "delCharBefore", "Tab": "defaultTab", "Shift-Tab": "indentAuto",
+    "Enter": "newlineAndIndent", "Insert": "toggleOverwrite"
+  };
+  // Note that the save and find-related commands aren't defined by
+  // default. Unknown commands are simply ignored.
+  keyMap.pcDefault = {
+    "Ctrl-A": "selectAll", "Ctrl-D": "deleteLine", "Ctrl-Z": "undo", "Shift-Ctrl-Z": "redo", "Ctrl-Y": "redo",
+    "Ctrl-Home": "goDocStart", "Alt-Up": "goDocStart", "Ctrl-End": "goDocEnd", "Ctrl-Down": "goDocEnd",
+    "Ctrl-Left": "goGroupLeft", "Ctrl-Right": "goGroupRight", "Alt-Left": "goLineStart", "Alt-Right": "goLineEnd",
+    "Ctrl-Backspace": "delGroupBefore", "Ctrl-Delete": "delGroupAfter", "Ctrl-S": "save", "Ctrl-F": "find",
+    "Ctrl-G": "findNext", "Shift-Ctrl-G": "findPrev", "Shift-Ctrl-F": "replace", "Shift-Ctrl-R": "replaceAll",
+    "Ctrl-[": "indentLess", "Ctrl-]": "indentMore",
+    fallthrough: "basic"
+  };
+  keyMap.macDefault = {
+    "Cmd-A": "selectAll", "Cmd-D": "deleteLine", "Cmd-Z": "undo", "Shift-Cmd-Z": "redo", "Cmd-Y": "redo",
+    "Cmd-Up": "goDocStart", "Cmd-End": "goDocEnd", "Cmd-Down": "goDocEnd", "Alt-Left": "goGroupLeft",
+    "Alt-Right": "goGroupRight", "Cmd-Left": "goLineStart", "Cmd-Right": "goLineEnd", "Alt-Backspace": "delGroupBefore",
+    "Ctrl-Alt-Backspace": "delGroupAfter", "Alt-Delete": "delGroupAfter", "Cmd-S": "save", "Cmd-F": "find",
+    "Cmd-G": "findNext", "Shift-Cmd-G": "findPrev", "Cmd-Alt-F": "replace", "Shift-Cmd-Alt-F": "replaceAll",
+    "Cmd-[": "indentLess", "Cmd-]": "indentMore", "Cmd-Backspace": "delLineLeft",
+    fallthrough: ["basic", "emacsy"]
+  };
+  keyMap["default"] = mac ? keyMap.macDefault : keyMap.pcDefault;
+  keyMap.emacsy = {
+    "Ctrl-F": "goCharRight", "Ctrl-B": "goCharLeft", "Ctrl-P": "goLineUp", "Ctrl-N": "goLineDown",
+    "Alt-F": "goWordRight", "Alt-B": "goWordLeft", "Ctrl-A": "goLineStart", "Ctrl-E": "goLineEnd",
+    "Ctrl-V": "goPageDown", "Shift-Ctrl-V": "goPageUp", "Ctrl-D": "delCharAfter", "Ctrl-H": "delCharBefore",
+    "Alt-D": "delWordAfter", "Alt-Backspace": "delWordBefore", "Ctrl-K": "killLine", "Ctrl-T": "transposeChars"
+  };
+
+  // KEYMAP DISPATCH
+
+  function getKeyMap(val) {
+    if (typeof val == "string") return keyMap[val];
+    else return val;
+  }
+
+  function lookupKey(name, maps, handle) {
+    function lookup(map) {
+      map = getKeyMap(map);
+      var found = map[name];
+      if (found === false) return "stop";
+      if (found != null && handle(found)) return true;
+      if (map.nofallthrough) return "stop";
+
+      var fallthrough = map.fallthrough;
+      if (fallthrough == null) return false;
+      if (Object.prototype.toString.call(fallthrough) != "[object Array]")
+        return lookup(fallthrough);
+      for (var i = 0, e = fallthrough.length; i < e; ++i) {
+        var done = lookup(fallthrough[i]);
+        if (done) return done;
+      }
+      return false;
+    }
+
+    for (var i = 0; i < maps.length; ++i) {
+      var done = lookup(maps[i]);
+      if (done) return done != "stop";
+    }
+  }
+  function isModifierKey(event) {
+    var name = keyNames[event.keyCode];
+    return name == "Ctrl" || name == "Alt" || name == "Shift" || name == "Mod";
+  }
+  function keyName(event, noShift) {
+    if (opera && event.keyCode == 34 && event["char"]) return false;
+    var name = keyNames[event.keyCode];
+    if (name == null || event.altGraphKey) return false;
+    if (event.altKey) name = "Alt-" + name;
+    if (flipCtrlCmd ? event.metaKey : event.ctrlKey) name = "Ctrl-" + name;
+    if (flipCtrlCmd ? event.ctrlKey : event.metaKey) name = "Cmd-" + name;
+    if (!noShift && event.shiftKey) name = "Shift-" + name;
+    return name;
+  }
+  CodeMirror.lookupKey = lookupKey;
+  CodeMirror.isModifierKey = isModifierKey;
+  CodeMirror.keyName = keyName;
+
+  // FROMTEXTAREA
+
+  CodeMirror.fromTextArea = function(textarea, options) {
+    if (!options) options = {};
+    options.value = textarea.value;
+    if (!options.tabindex && textarea.tabindex)
+      options.tabindex = textarea.tabindex;
+    if (!options.placeholder && textarea.placeholder)
+      options.placeholder = textarea.placeholder;
+    // Set autofocus to true if this textarea is focused, or if it has
+    // autofocus and no other element is focused.
+    if (options.autofocus == null) {
+      var hasFocus = document.body;
+      // doc.activeElement occasionally throws on IE
+      try { hasFocus = document.activeElement; } catch(e) {}
+      options.autofocus = hasFocus == textarea ||
+        textarea.getAttribute("autofocus") != null && hasFocus == document.body;
+    }
+
+    function save() {textarea.value = cm.getValue();}
+    if (textarea.form) {
+      on(textarea.form, "submit", save);
+      // Deplorable hack to make the submit method do the right thing.
+      if (!options.leaveSubmitMethodAlone) {
+        var form = textarea.form, realSubmit = form.submit;
+        try {
+          var wrappedSubmit = form.submit = function() {
+            save();
+            form.submit = realSubmit;
+            form.submit();
+            form.submit = wrappedSubmit;
+          };
+        } catch(e) {}
+      }
+    }
+
+    textarea.style.display = "none";
+    var cm = CodeMirror(function(node) {
+      textarea.parentNode.insertBefore(node, textarea.nextSibling);
+    }, options);
+    cm.save = save;
+    cm.getTextArea = function() { return textarea; };
+    cm.toTextArea = function() {
+      save();
+      textarea.parentNode.removeChild(cm.getWrapperElement());
+      textarea.style.display = "";
+      if (textarea.form) {
+        off(textarea.form, "submit", save);
+        if (typeof textarea.form.submit == "function")
+          textarea.form.submit = realSubmit;
+      }
+    };
+    return cm;
+  };
+
+  // STRING STREAM
+
+  // Fed to the mode parsers, provides helper functions to make
+  // parsers more succinct.
+
+  // The character stream used by a mode's parser.
+  function StringStream(string, tabSize) {
+    this.pos = this.start = 0;
+    this.string = string;
+    this.tabSize = tabSize || 8;
+    this.lastColumnPos = this.lastColumnValue = 0;
+  }
+
+  StringStream.prototype = {
+    eol: function() {return this.pos >= this.string.length;},
+    sol: function() {return this.pos == 0;},
+    peek: function() {return this.string.charAt(this.pos) || undefined;},
+    next: function() {
+      if (this.pos < this.string.length)
+        return this.string.charAt(this.pos++);
+    },
+    eat: function(match) {
+      var ch = this.string.charAt(this.pos);
+      if (typeof match == "string") var ok = ch == match;
+      else var ok = ch && (match.test ? match.test(ch) : match(ch));
+      if (ok) {++this.pos; return ch;}
+    },
+    eatWhile: function(match) {
+      var start = this.pos;
+      while (this.eat(match)){}
+      return this.pos > start;
+    },
+    eatSpace: function() {
+      var start = this.pos;
+      while (/[\s\u00a0]/.test(this.string.charAt(this.pos))) ++this.pos;
+      return this.pos > start;
+    },
+    skipToEnd: function() {this.pos = this.string.length;},
+    skipTo: function(ch) {
+      var found = this.string.indexOf(ch, this.pos);
+      if (found > -1) {this.pos = found; return true;}
+    },
+    backUp: function(n) {this.pos -= n;},
+    column: function() {
+      if (this.lastColumnPos < this.start) {
+        this.lastColumnValue = countColumn(this.string, this.start, this.tabSize, this.lastColumnPos, this.lastColumnValue);
+        this.lastColumnPos = this.start;
+      }
+      return this.lastColumnValue;
+    },
+    indentation: function() {return countColumn(this.string, null, this.tabSize);},
+    match: function(pattern, consume, caseInsensitive) {
+      if (typeof pattern == "string") {
+        var cased = function(str) {return caseInsensitive ? str.toLowerCase() : str;};
+        var substr = this.string.substr(this.pos, pattern.length);
+        if (cased(substr) == cased(pattern)) {
+          if (consume !== false) this.pos += pattern.length;
+          return true;
+        }
+      } else {
+        var match = this.string.slice(this.pos).match(pattern);
+        if (match && match.index > 0) return null;
+        if (match && consume !== false) this.pos += match[0].length;
+        return match;
+      }
+    },
+    current: function(){return this.string.slice(this.start, this.pos);}
+  };
+  CodeMirror.StringStream = StringStream;
+
+  // TEXTMARKERS
+
+  function TextMarker(doc, type) {
+    this.lines = [];
+    this.type = type;
+    this.doc = doc;
+  }
+  CodeMirror.TextMarker = TextMarker;
+  eventMixin(TextMarker);
+
+  TextMarker.prototype.clear = function() {
+    if (this.explicitlyCleared) return;
+    var cm = this.doc.cm, withOp = cm && !cm.curOp;
+    if (withOp) startOperation(cm);
+    var min = null, max = null;
+    for (var i = 0; i < this.lines.length; ++i) {
+      var line = this.lines[i];
+      var span = getMarkedSpanFor(line.markedSpans, this);
+      if (span.to != null) max = lineNo(line);
+      line.markedSpans = removeMarkedSpan(line.markedSpans, span);
+      if (span.from != null)
+        min = lineNo(line);
+      else if (this.collapsed && !lineIsHidden(this.doc, line) && cm)
+        updateLineHeight(line, textHeight(cm.display));
+    }
+    if (cm && this.collapsed && !cm.options.lineWrapping) for (var i = 0; i < this.lines.length; ++i) {
+      var visual = visualLine(cm.doc, this.lines[i]), len = lineLength(cm.doc, visual);
+      if (len > cm.display.maxLineLength) {
+        cm.display.maxLine = visual;
+        cm.display.maxLineLength = len;
+        cm.display.maxLineChanged = true;
+      }
+    }
+
+    if (min != null && cm) regChange(cm, min, max + 1);
+    this.lines.length = 0;
+    this.explicitlyCleared = true;
+    if (this.atomic && this.doc.cantEdit) {
+      this.doc.cantEdit = false;
+      if (cm) reCheckSelection(cm);
+    }
+    if (withOp) endOperation(cm);
+    signalLater(this, "clear");
+  };
+
+  TextMarker.prototype.find = function() {
+    var from, to;
+    for (var i = 0; i < this.lines.length; ++i) {
+      var line = this.lines[i];
+      var span = getMarkedSpanFor(line.markedSpans, this);
+      if (span.from != null || span.to != null) {
+        var found = lineNo(line);
+        if (span.from != null) from = Pos(found, span.from);
+        if (span.to != null) to = Pos(found, span.to);
+      }
+    }
+    if (this.type == "bookmark") return from;
+    return from && {from: from, to: to};
+  };
+
+  TextMarker.prototype.changed = function() {
+    var pos = this.find(), cm = this.doc.cm;
+    if (!pos || !cm) return;
+    var line = getLine(this.doc, pos.from.line);
+    clearCachedMeasurement(cm, line);
+    if (pos.from.line >= cm.display.showingFrom && pos.from.line < cm.display.showingTo) {
+      for (var node = cm.display.lineDiv.firstChild; node; node = node.nextSibling) if (node.lineObj == line) {
+        if (node.offsetHeight != line.height) updateLineHeight(line, node.offsetHeight);
+        break;
+      }
+      runInOp(cm, function() { cm.curOp.selectionChanged = true; });
+    }
+  };
+
+  TextMarker.prototype.attachLine = function(line) {
+    if (!this.lines.length && this.doc.cm) {
+      var op = this.doc.cm.curOp;
+      if (!op.maybeHiddenMarkers || indexOf(op.maybeHiddenMarkers, this) == -1)
+        (op.maybeUnhiddenMarkers || (op.maybeUnhiddenMarkers = [])).push(this);
+    }
+    this.lines.push(line);
+  };
+  TextMarker.prototype.detachLine = function(line) {
+    this.lines.splice(indexOf(this.lines, line), 1);
+    if (!this.lines.length && this.doc.cm) {
+      var op = this.doc.cm.curOp;
+      (op.maybeHiddenMarkers || (op.maybeHiddenMarkers = [])).push(this);
+    }
+  };
+
+  function markText(doc, from, to, options, type) {
+    if (options && options.shared) return markTextShared(doc, from, to, options, type);
+    if (doc.cm && !doc.cm.curOp) return operation(doc.cm, markText)(doc, from, to, options, type);
+
+    var marker = new TextMarker(doc, type);
+    if (type == "range" && !posLess(from, to)) return marker;
+    if (options) copyObj(options, marker);
+    if (marker.replacedWith) {
+      marker.collapsed = true;
+      marker.replacedWith = elt("span", [marker.replacedWith], "CodeMirror-widget");
+      if (!options.handleMouseEvents) marker.replacedWith.ignoreEvents = true;
+    }
+    if (marker.collapsed) sawCollapsedSpans = true;
+
+    if (marker.addToHistory)
+      addToHistory(doc, {from: from, to: to, origin: "markText"},
+                   {head: doc.sel.head, anchor: doc.sel.anchor}, NaN);
+
+    var curLine = from.line, size = 0, collapsedAtStart, collapsedAtEnd, cm = doc.cm, updateMaxLine;
+    doc.iter(curLine, to.line + 1, function(line) {
+      if (cm && marker.collapsed && !cm.options.lineWrapping && visualLine(doc, line) == cm.display.maxLine)
+        updateMaxLine = true;
+      var span = {from: null, to: null, marker: marker};
+      size += line.text.length;
+      if (curLine == from.line) {span.from = from.ch; size -= from.ch;}
+      if (curLine == to.line) {span.to = to.ch; size -= line.text.length - to.ch;}
+      if (marker.collapsed) {
+        if (curLine == to.line) collapsedAtEnd = collapsedSpanAt(line, to.ch);
+        if (curLine == from.line) collapsedAtStart = collapsedSpanAt(line, from.ch);
+        else updateLineHeight(line, 0);
+      }
+      addMarkedSpan(line, span);
+      ++curLine;
+    });
+    if (marker.collapsed) doc.iter(from.line, to.line + 1, function(line) {
+      if (lineIsHidden(doc, line)) updateLineHeight(line, 0);
+    });
+
+    if (marker.clearOnEnter) on(marker, "beforeCursorEnter", function() { marker.clear(); });
+
+    if (marker.readOnly) {
+      sawReadOnlySpans = true;
+      if (doc.history.done.length || doc.history.undone.length)
+        doc.clearHistory();
+    }
+    if (marker.collapsed) {
+      if (collapsedAtStart != collapsedAtEnd)
+        throw new Error("Inserting collapsed marker overlapping an existing one");
+      marker.size = size;
+      marker.atomic = true;
+    }
+    if (cm) {
+      if (updateMaxLine) cm.curOp.updateMaxLine = true;
+      if (marker.className || marker.title || marker.startStyle || marker.endStyle || marker.collapsed)
+        regChange(cm, from.line, to.line + 1);
+      if (marker.atomic) reCheckSelection(cm);
+    }
+    return marker;
+  }
+
+  // SHARED TEXTMARKERS
+
+  function SharedTextMarker(markers, primary) {
+    this.markers = markers;
+    this.primary = primary;
+    for (var i = 0, me = this; i < markers.length; ++i) {
+      markers[i].parent = this;
+      on(markers[i], "clear", function(){me.clear();});
+    }
+  }
+  CodeMirror.SharedTextMarker = SharedTextMarker;
+  eventMixin(SharedTextMarker);
+
+  SharedTextMarker.prototype.clear = function() {
+    if (this.explicitlyCleared) return;
+    this.explicitlyCleared = true;
+    for (var i = 0; i < this.markers.length; ++i)
+      this.markers[i].clear();
+    signalLater(this, "clear");
+  };
+  SharedTextMarker.prototype.find = function() {
+    return this.primary.find();
+  };
+
+  function markTextShared(doc, from, to, options, type) {
+    options = copyObj(options);
+    options.shared = false;
+    var markers = [markText(doc, from, to, options, type)], primary = markers[0];
+    var widget = options.replacedWith;
+    linkedDocs(doc, function(doc) {
+      if (widget) options.replacedWith = widget.cloneNode(true);
+      markers.push(markText(doc, clipPos(doc, from), clipPos(doc, to), options, type));
+      for (var i = 0; i < doc.linked.length; ++i)
+        if (doc.linked[i].isParent) return;
+      primary = lst(markers);
+    });
+    return new SharedTextMarker(markers, primary);
+  }
+
+  // TEXTMARKER SPANS
+
+  function getMarkedSpanFor(spans, marker) {
+    if (spans) for (var i = 0; i < spans.length; ++i) {
+      var span = spans[i];
+      if (span.marker == marker) return span;
+    }
+  }
+  function removeMarkedSpan(spans, span) {
+    for (var r, i = 0; i < spans.length; ++i)
+      if (spans[i] != span) (r || (r = [])).push(spans[i]);
+    return r;
+  }
+  function addMarkedSpan(line, span) {
+    line.markedSpans = line.markedSpans ? line.markedSpans.concat([span]) : [span];
+    span.marker.attachLine(line);
+  }
+
+  function markedSpansBefore(old, startCh, isInsert) {
+    if (old) for (var i = 0, nw; i < old.length; ++i) {
+      var span = old[i], marker = span.marker;
+      var startsBefore = span.from == null || (marker.inclusiveLeft ? span.from <= startCh : span.from < startCh);
+      if (startsBefore || marker.type == "bookmark" && span.from == startCh && (!isInsert || !span.marker.insertLeft)) {
+        var endsAfter = span.to == null || (marker.inclusiveRight ? span.to >= startCh : span.to > startCh);
+        (nw || (nw = [])).push({from: span.from,
+                                to: endsAfter ? null : span.to,
+                                marker: marker});
+      }
+    }
+    return nw;
+  }
+
+  function markedSpansAfter(old, endCh, isInsert) {
+    if (old) for (var i = 0, nw; i < old.length; ++i) {
+      var span = old[i], marker = span.marker;
+      var endsAfter = span.to == null || (marker.inclusiveRight ? span.to >= endCh : span.to > endCh);
+      if (endsAfter || marker.type == "bookmark" && span.from == endCh && (!isInsert || span.marker.insertLeft)) {
+        var startsBefore = span.from == null || (marker.inclusiveLeft ? span.from <= endCh : span.from < endCh);
+        (nw || (nw = [])).push({from: startsBefore ? null : span.from - endCh,
+                                to: span.to == null ? null : span.to - endCh,
+                                marker: marker});
+      }
+    }
+    return nw;
+  }
+
+  function stretchSpansOverChange(doc, change) {
+    var oldFirst = isLine(doc, change.from.line) && getLine(doc, change.from.line).markedSpans;
+    var oldLast = isLine(doc, change.to.line) && getLine(doc, change.to.line).markedSpans;
+    if (!oldFirst && !oldLast) return null;
+
+    var startCh = change.from.ch, endCh = change.to.ch, isInsert = posEq(change.from, change.to);
+    // Get the spans that 'stick out' on both sides
+    var first = markedSpansBefore(oldFirst, startCh, isInsert);
+    var last = markedSpansAfter(oldLast, endCh, isInsert);
+
+    // Next, merge those two ends
+    var sameLine = change.text.length == 1, offset = lst(change.text).length + (sameLine ? startCh : 0);
+    if (first) {
+      // Fix up .to properties of first
+      for (var i = 0; i < first.length; ++i) {
+        var span = first[i];
+        if (span.to == null) {
+          var found = getMarkedSpanFor(last, span.marker);
+          if (!found) span.to = startCh;
+          else if (sameLine) span.to = found.to == null ? null : found.to + offset;
+        }
+      }
+    }
+    if (last) {
+      // Fix up .from in last (or move them into first in case of sameLine)
+      for (var i = 0; i < last.length; ++i) {
+        var span = last[i];
+        if (span.to != null) span.to += offset;
+        if (span.from == null) {
+          var found = getMarkedSpanFor(first, span.marker);
+          if (!found) {
+            span.from = offset;
+            if (sameLine) (first || (first = [])).push(span);
+          }
+        } else {
+          span.from += offset;
+          if (sameLine) (first || (first = [])).push(span);
+        }
+      }
+    }
+    if (sameLine && first) {
+      // Make sure we didn't create any zero-length spans
+      for (var i = 0; i < first.length; ++i)
+        if (first[i].from != null && first[i].from == first[i].to && first[i].marker.type != "bookmark")
+          first.splice(i--, 1);
+      if (!first.length) first = null;
+    }
+
+    var newMarkers = [first];
+    if (!sameLine) {
+      // Fill gap with whole-line-spans
+      var gap = change.text.length - 2, gapMarkers;
+      if (gap > 0 && first)
+        for (var i = 0; i < first.length; ++i)
+          if (first[i].to == null)
+            (gapMarkers || (gapMarkers = [])).push({from: null, to: null, marker: first[i].marker});
+      for (var i = 0; i < gap; ++i)
+        newMarkers.push(gapMarkers);
+      newMarkers.push(last);
+    }
+    return newMarkers;
+  }
+
+  function mergeOldSpans(doc, change) {
+    var old = getOldSpans(doc, change);
+    var stretched = stretchSpansOverChange(doc, change);
+    if (!old) return stretched;
+    if (!stretched) return old;
+
+    for (var i = 0; i < old.length; ++i) {
+      var oldCur = old[i], stretchCur = stretched[i];
+      if (oldCur && stretchCur) {
+        spans: for (var j = 0; j < stretchCur.length; ++j) {
+          var span = stretchCur[j];
+          for (var k = 0; k < oldCur.length; ++k)
+            if (oldCur[k].marker == span.marker) continue spans;
+          oldCur.push(span);
+        }
+      } else if (stretchCur) {
+        old[i] = stretchCur;
+      }
+    }
+    return old;
+  }
+
+  function removeReadOnlyRanges(doc, from, to) {
+    var markers = null;
+    doc.iter(from.line, to.line + 1, function(line) {
+      if (line.markedSpans) for (var i = 0; i < line.markedSpans.length; ++i) {
+        var mark = line.markedSpans[i].marker;
+        if (mark.readOnly && (!markers || indexOf(markers, mark) == -1))
+          (markers || (markers = [])).push(mark);
+      }
+    });
+    if (!markers) return null;
+    var parts = [{from: from, to: to}];
+    for (var i = 0; i < markers.length; ++i) {
+      var mk = markers[i], m = mk.find();
+      for (var j = 0; j < parts.length; ++j) {
+        var p = parts[j];
+        if (posLess(p.to, m.from) || posLess(m.to, p.from)) continue;
+        var newParts = [j, 1];
+        if (posLess(p.from, m.from) || !mk.inclusiveLeft && posEq(p.from, m.from))
+          newParts.push({from: p.from, to: m.from});
+        if (posLess(m.to, p.to) || !mk.inclusiveRight && posEq(p.to, m.to))
+          newParts.push({from: m.to, to: p.to});
+        parts.splice.apply(parts, newParts);
+        j += newParts.length - 1;
+      }
+    }
+    return parts;
+  }
+
+  function collapsedSpanAt(line, ch) {
+    var sps = sawCollapsedSpans && line.markedSpans, found;
+    if (sps) for (var sp, i = 0; i < sps.length; ++i) {
+      sp = sps[i];
+      if (!sp.marker.collapsed) continue;
+      if ((sp.from == null || sp.from < ch) &&
+          (sp.to == null || sp.to > ch) &&
+          (!found || found.width < sp.marker.width))
+        found = sp.marker;
+    }
+    return found;
+  }
+  function collapsedSpanAtStart(line) { return collapsedSpanAt(line, -1); }
+  function collapsedSpanAtEnd(line) { return collapsedSpanAt(line, line.text.length + 1); }
+
+  function visualLine(doc, line) {
+    var merged;
+    while (merged = collapsedSpanAtStart(line))
+      line = getLine(doc, merged.find().from.line);
+    return line;
+  }
+
+  function lineIsHidden(doc, line) {
+    var sps = sawCollapsedSpans && line.markedSpans;
+    if (sps) for (var sp, i = 0; i < sps.length; ++i) {
+      sp = sps[i];
+      if (!sp.marker.collapsed) continue;
+      if (sp.from == null) return true;
+      if (sp.marker.replacedWith) continue;
+      if (sp.from == 0 && sp.marker.inclusiveLeft && lineIsHiddenInner(doc, line, sp))
+        return true;
+    }
+  }
+  function lineIsHiddenInner(doc, line, span) {
+    if (span.to == null) {
+      var end = span.marker.find().to, endLine = getLine(doc, end.line);
+      return lineIsHiddenInner(doc, endLine, getMarkedSpanFor(endLine.markedSpans, span.marker));
+    }
+    if (span.marker.inclusiveRight && span.to == line.text.length)
+      return true;
+    for (var sp, i = 0; i < line.markedSpans.length; ++i) {
+      sp = line.markedSpans[i];
+      if (sp.marker.collapsed && !sp.marker.replacedWith && sp.from == span.to &&
+          (sp.marker.inclusiveLeft || span.marker.inclusiveRight) &&
+          lineIsHiddenInner(doc, line, sp)) return true;
+    }
+  }
+
+  function detachMarkedSpans(line) {
+    var spans = line.markedSpans;
+    if (!spans) return;
+    for (var i = 0; i < spans.length; ++i)
+      spans[i].marker.detachLine(line);
+    line.markedSpans = null;
+  }
+
+  function attachMarkedSpans(line, spans) {
+    if (!spans) return;
+    for (var i = 0; i < spans.length; ++i)
+      spans[i].marker.attachLine(line);
+    line.markedSpans = spans;
+  }
+
+  // LINE WIDGETS
+
+  var LineWidget = CodeMirror.LineWidget = function(cm, node, options) {
+    if (options) for (var opt in options) if (options.hasOwnProperty(opt))
+      this[opt] = options[opt];
+    this.cm = cm;
+    this.node = node;
+  };
+  eventMixin(LineWidget);
+  function widgetOperation(f) {
+    return function() {
+      var withOp = !this.cm.curOp;
+      if (withOp) startOperation(this.cm);
+      try {var result = f.apply(this, arguments);}
+      finally {if (withOp) endOperation(this.cm);}
+      return result;
+    };
+  }
+  LineWidget.prototype.clear = widgetOperation(function() {
+    var ws = this.line.widgets, no = lineNo(this.line);
+    if (no == null || !ws) return;
+    for (var i = 0; i < ws.length; ++i) if (ws[i] == this) ws.splice(i--, 1);
+    if (!ws.length) this.line.widgets = null;
+    var aboveVisible = heightAtLine(this.cm, this.line) < this.cm.doc.scrollTop;
+    updateLineHeight(this.line, Math.max(0, this.line.height - widgetHeight(this)));
+    if (aboveVisible) addToScrollPos(this.cm, 0, -this.height);
+    regChange(this.cm, no, no + 1);
+  });
+  LineWidget.prototype.changed = widgetOperation(function() {
+    var oldH = this.height;
+    this.height = null;
+    var diff = widgetHeight(this) - oldH;
+    if (!diff) return;
+    updateLineHeight(this.line, this.line.height + diff);
+    var no = lineNo(this.line);
+    regChange(this.cm, no, no + 1);
+  });
+
+  function widgetHeight(widget) {
+    if (widget.height != null) return widget.height;
+    if (!widget.node.parentNode || widget.node.parentNode.nodeType != 1)
+      removeChildrenAndAdd(widget.cm.display.measure, elt("div", [widget.node], null, "position: relative"));
+    return widget.height = widget.node.offsetHeight;
+  }
+
+  function addLineWidget(cm, handle, node, options) {
+    var widget = new LineWidget(cm, node, options);
+    if (widget.noHScroll) cm.display.alignWidgets = true;
+    changeLine(cm, handle, function(line) {
+      var widgets = line.widgets || (line.widgets = []);
+      if (widget.insertAt == null) widgets.push(widget);
+      else widgets.splice(Math.min(widgets.length - 1, Math.max(0, widget.insertAt)), 0, widget);
+      widget.line = line;
+      if (!lineIsHidden(cm.doc, line) || widget.showIfHidden) {
+        var aboveVisible = heightAtLine(cm, line) < cm.doc.scrollTop;
+        updateLineHeight(line, line.height + widgetHeight(widget));
+        if (aboveVisible) addToScrollPos(cm, 0, widget.height);
+      }
+      return true;
+    });
+    return widget;
+  }
+
+  // LINE DATA STRUCTURE
+
+  // Line objects. These hold state related to a line, including
+  // highlighting info (the styles array).
+  var Line = CodeMirror.Line = function(text, markedSpans, estimateHeight) {
+    this.text = text;
+    attachMarkedSpans(this, markedSpans);
+    this.height = estimateHeight ? estimateHeight(this) : 1;
+  };
+  eventMixin(Line);
+
+  function updateLine(line, text, markedSpans, estimateHeight) {
+    line.text = text;
+    if (line.stateAfter) line.stateAfter = null;
+    if (line.styles) line.styles = null;
+    if (line.order != null) line.order = null;
+    detachMarkedSpans(line);
+    attachMarkedSpans(line, markedSpans);
+    var estHeight = estimateHeight ? estimateHeight(line) : 1;
+    if (estHeight != line.height) updateLineHeight(line, estHeight);
+  }
+
+  function cleanUpLine(line) {
+    line.parent = null;
+    detachMarkedSpans(line);
+  }
+
+  // Run the given mode's parser over a line, update the styles
+  // array, which contains alternating fragments of text and CSS
+  // classes.
+  function runMode(cm, text, mode, state, f) {
+    var flattenSpans = mode.flattenSpans;
+    if (flattenSpans == null) flattenSpans = cm.options.flattenSpans;
+    var curStart = 0, curStyle = null;
+    var stream = new StringStream(text, cm.options.tabSize), style;
+    if (text == "" && mode.blankLine) mode.blankLine(state);
+    while (!stream.eol()) {
+      if (stream.pos > cm.options.maxHighlightLength) {
+        flattenSpans = false;
+        // Webkit seems to refuse to render text nodes longer than 57444 characters
+        stream.pos = Math.min(text.length, stream.start + 50000);
+        style = null;
+      } else {
+        style = mode.token(stream, state);
+      }
+      if (!flattenSpans || curStyle != style) {
+        if (curStart < stream.start) f(stream.start, curStyle);
+        curStart = stream.start; curStyle = style;
+      }
+      stream.start = stream.pos;
+    }
+    if (curStart < stream.pos) f(stream.pos, curStyle);
+  }
+
+  function highlightLine(cm, line, state) {
+    // A styles array always starts with a number identifying the
+    // mode/overlays that it is based on (for easy invalidation).
+    var st = [cm.state.modeGen];
+    // Compute the base array of styles
+    runMode(cm, line.text, cm.doc.mode, state, function(end, style) {st.push(end, style);});
+
+    // Run overlays, adjust style array.
+    for (var o = 0; o < cm.state.overlays.length; ++o) {
+      var overlay = cm.state.overlays[o], i = 1, at = 0;
+      runMode(cm, line.text, overlay.mode, true, function(end, style) {
+        var start = i;
+        // Ensure there's a token end at the current position, and that i points at it
+        while (at < end) {
+          var i_end = st[i];
+          if (i_end > end)
+            st.splice(i, 1, end, st[i+1], i_end);
+          i += 2;
+          at = Math.min(end, i_end);
+        }
+        if (!style) return;
+        if (overlay.opaque) {
+          st.splice(start, i - start, end, style);
+          i = start + 2;
+        } else {
+          for (; start < i; start += 2) {
+            var cur = st[start+1];
+            st[start+1] = cur ? cur + " " + style : style;
+          }
+        }
+      });
+    }
+
+    return st;
+  }
+
+  function getLineStyles(cm, line) {
+    if (!line.styles || line.styles[0] != cm.state.modeGen)
+      line.styles = highlightLine(cm, line, line.stateAfter = getStateBefore(cm, lineNo(line)));
+    return line.styles;
+  }
+
+  // Lightweight form of highlight -- proceed over this line and
+  // update state, but don't save a style array.
+  function processLine(cm, line, state) {
+    var mode = cm.doc.mode;
+    var stream = new StringStream(line.text, cm.options.tabSize);
+    if (line.text == "" && mode.blankLine) mode.blankLine(state);
+    while (!stream.eol() && stream.pos <= cm.options.maxHighlightLength) {
+      mode.token(stream, state);
+      stream.start = stream.pos;
+    }
+  }
+
+  var styleToClassCache = {};
+  function styleToClass(style) {
+    if (!style) return null;
+    return styleToClassCache[style] ||
+      (styleToClassCache[style] = "cm-" + style.replace(/ +/g, " cm-"));
+  }
+
+  function lineContent(cm, realLine, measure) {
+    var merged, line = realLine, empty = true;
+    while (merged = collapsedSpanAtStart(line))
+      line = getLine(cm.doc, merged.find().from.line);
+
+    var builder = {pre: elt("pre"), col: 0, pos: 0, display: !measure,
+                   measure: null, measuredSomething: false, cm: cm};
+    if (line.textClass) builder.pre.className = line.textClass;
+
+    do {
+      if (line.text) empty = false;
+      builder.measure = line == realLine && measure;
+      builder.pos = 0;
+      builder.addToken = builder.measure ? buildTokenMeasure : buildToken;
+      if ((ie || webkit) && cm.getOption("lineWrapping"))
+        builder.addToken = buildTokenSplitSpaces(builder.addToken);
+      var next = insertLineContent(line, builder, getLineStyles(cm, line));
+      if (measure && line == realLine && !builder.measuredSomething) {
+        measure[0] = builder.pre.appendChild(zeroWidthElement(cm.display.measure));
+        builder.measuredSomething = true;
+      }
+      if (next) line = getLine(cm.doc, next.to.line);
+    } while (next);
+
+    if (measure && !builder.measuredSomething && !measure[0])
+      measure[0] = builder.pre.appendChild(empty ? elt("span", "\u00a0") : zeroWidthElement(cm.display.measure));
+    if (!builder.pre.firstChild && !lineIsHidden(cm.doc, realLine))
+      builder.pre.appendChild(document.createTextNode("\u00a0"));
+
+    var order;
+    // Work around problem with the reported dimensions of single-char
+    // direction spans on IE (issue #1129). See also the comment in
+    // cursorCoords.
+    if (measure && ie && (order = getOrder(line))) {
+      var l = order.length - 1;
+      if (order[l].from == order[l].to) --l;
+      var last = order[l], prev = order[l - 1];
+      if (last.from + 1 == last.to && prev && last.level < prev.level) {
+        var span = measure[builder.pos - 1];
+        if (span) span.parentNode.insertBefore(span.measureRight = zeroWidthElement(cm.display.measure),
+                                               span.nextSibling);
+      }
+    }
+
+    signal(cm, "renderLine", cm, realLine, builder.pre);
+    return builder.pre;
+  }
+
+  var tokenSpecialChars = /[\t\u0000-\u0019\u00ad\u200b\u2028\u2029\uFEFF]/g;
+  function buildToken(builder, text, style, startStyle, endStyle, title) {
+    if (!text) return;
+    if (!tokenSpecialChars.test(text)) {
+      builder.col += text.length;
+      var content = document.createTextNode(text);
+    } else {
+      var content = document.createDocumentFragment(), pos = 0;
+      while (true) {
+        tokenSpecialChars.lastIndex = pos;
+        var m = tokenSpecialChars.exec(text);
+        var skipped = m ? m.index - pos : text.length - pos;
+        if (skipped) {
+          content.appendChild(document.createTextNode(text.slice(pos, pos + skipped)));
+          builder.col += skipped;
+        }
+        if (!m) break;
+        pos += skipped + 1;
+        if (m[0] == "\t") {
+          var tabSize = builder.cm.options.tabSize, tabWidth = tabSize - builder.col % tabSize;
+          content.appendChild(elt("span", spaceStr(tabWidth), "cm-tab"));
+          builder.col += tabWidth;
+        } else {
+          var token = elt("span", "\u2022", "cm-invalidchar");
+          token.title = "\\u" + m[0].charCodeAt(0).toString(16);
+          content.appendChild(token);
+          builder.col += 1;
+        }
+      }
+    }
+    if (style || startStyle || endStyle || builder.measure) {
+      var fullStyle = style || "";
+      if (startStyle) fullStyle += startStyle;
+      if (endStyle) fullStyle += endStyle;
+      var token = elt("span", [content], fullStyle);
+      if (title) token.title = title;
+      return builder.pre.appendChild(token);
+    }
+    builder.pre.appendChild(content);
+  }
+
+  function buildTokenMeasure(builder, text, style, startStyle, endStyle) {
+    var wrapping = builder.cm.options.lineWrapping;
+    for (var i = 0; i < text.length; ++i) {
+      var ch = text.charAt(i), start = i == 0;
+      if (ch >= "\ud800" && ch < "\udbff" && i < text.length - 1) {
+        ch = text.slice(i, i + 2);
+        ++i;
+      } else if (i && wrapping && spanAffectsWrapping(text, i)) {
+        builder.pre.appendChild(elt("wbr"));
+      }
+      var old = builder.measure[builder.pos];
+      var span = builder.measure[builder.pos] =
+        buildToken(builder, ch, style,
+                   start && startStyle, i == text.length - 1 && endStyle);
+      if (old) span.leftSide = old.leftSide || old;
+      // In IE single-space nodes wrap differently than spaces
+      // embedded in larger text nodes, except when set to
+      // white-space: normal (issue #1268).
+      if (ie && wrapping && ch == " " && i && !/\s/.test(text.charAt(i - 1)) &&
+          i < text.length - 1 && !/\s/.test(text.charAt(i + 1)))
+        span.style.whiteSpace = "normal";
+      builder.pos += ch.length;
+    }
+    if (text.length) builder.measuredSomething = true;
+  }
+
+  function buildTokenSplitSpaces(inner) {
+    function split(old) {
+      var out = " ";
+      for (var i = 0; i < old.length - 2; ++i) out += i % 2 ? " " : "\u00a0";
+      out += " ";
+      return out;
+    }
+    return function(builder, text, style, startStyle, endStyle, title) {
+      return inner(builder, text.replace(/ {3,}/, split), style, startStyle, endStyle, title);
+    };
+  }
+
+  function buildCollapsedSpan(builder, size, marker, ignoreWidget) {
+    var widget = !ignoreWidget && marker.replacedWith;
+    if (widget) {
+      if (!builder.display) widget = widget.cloneNode(true);
+      builder.pre.appendChild(widget);
+      if (builder.measure) {
+        if (size) {
+          builder.measure[builder.pos] = widget;
+        } else {
+          var elt = builder.measure[builder.pos] = zeroWidthElement(builder.cm.display.measure);
+          if (marker.type != "bookmark" || marker.insertLeft)
+            builder.pre.insertBefore(elt, widget);
+          else
+            builder.pre.appendChild(elt);
+        }
+        builder.measuredSomething = true;
+      }
+    }
+    builder.pos += size;
+  }
+
+  // Outputs a number of spans to make up a line, taking highlighting
+  // and marked text into account.
+  function insertLineContent(line, builder, styles) {
+    var spans = line.markedSpans, allText = line.text, at = 0;
+    if (!spans) {
+      for (var i = 1; i < styles.length; i+=2)
+        builder.addToken(builder, allText.slice(at, at = styles[i]), styleToClass(styles[i+1]));
+      return;
+    }
+
+    var len = allText.length, pos = 0, i = 1, text = "", style;
+    var nextChange = 0, spanStyle, spanEndStyle, spanStartStyle, title, collapsed;
+    for (;;) {
+      if (nextChange == pos) { // Update current marker set
+        spanStyle = spanEndStyle = spanStartStyle = title = "";
+        collapsed = null; nextChange = Infinity;
+        var foundBookmark = null;
+        for (var j = 0; j < spans.length; ++j) {
+          var sp = spans[j], m = sp.marker;
+          if (sp.from <= pos && (sp.to == null || sp.to > pos)) {
+            if (sp.to != null && nextChange > sp.to) { nextChange = sp.to; spanEndStyle = ""; }
+            if (m.className) spanStyle += " " + m.className;
+            if (m.startStyle && sp.from == pos) spanStartStyle += " " + m.startStyle;
+            if (m.endStyle && sp.to == nextChange) spanEndStyle += " " + m.endStyle;
+            if (m.title && !title) title = m.title;
+            if (m.collapsed && (!collapsed || collapsed.marker.size < m.size))
+              collapsed = sp;
+          } else if (sp.from > pos && nextChange > sp.from) {
+            nextChange = sp.from;
+          }
+          if (m.type == "bookmark" && sp.from == pos && m.replacedWith) foundBookmark = m;
+        }
+        if (collapsed && (collapsed.from || 0) == pos) {
+          buildCollapsedSpan(builder, (collapsed.to == null ? len : collapsed.to) - pos,
+                             collapsed.marker, collapsed.from == null);
+          if (collapsed.to == null) return collapsed.marker.find();
+        }
+        if (foundBookmark && !collapsed) buildCollapsedSpan(builder, 0, foundBookmark);
+      }
+      if (pos >= len) break;
+
+      var upto = Math.min(len, nextChange);
+      while (true) {
+        if (text) {
+          var end = pos + text.length;
+          if (!collapsed) {
+            var tokenText = end > upto ? text.slice(0, upto - pos) : text;
+            builder.addToken(builder, tokenText, style ? style + spanStyle : spanStyle,
+                             spanStartStyle, pos + tokenText.length == nextChange ? spanEndStyle : "", title);
+          }
+          if (end >= upto) {text = text.slice(upto - pos); pos = upto; break;}
+          pos = end;
+          spanStartStyle = "";
+        }
+        text = allText.slice(at, at = styles[i++]);
+        style = styleToClass(styles[i++]);
+      }
+    }
+  }
+
+  // DOCUMENT DATA STRUCTURE
+
+  function updateDoc(doc, change, markedSpans, selAfter, estimateHeight) {
+    function spansFor(n) {return markedSpans ? markedSpans[n] : null;}
+    function update(line, text, spans) {
+      updateLine(line, text, spans, estimateHeight);
+      signalLater(line, "change", line, change);
+    }
+
+    var from = change.from, to = change.to, text = change.text;
+    var firstLine = getLine(doc, from.line), lastLine = getLine(doc, to.line);
+    var lastText = lst(text), lastSpans = spansFor(text.length - 1), nlines = to.line - from.line;
+
+    // First adjust the line structure
+    if (from.ch == 0 && to.ch == 0 && lastText == "") {
+      // This is a whole-line replace. Treated specially to make
+      // sure line objects move the way they are supposed to.
+      for (var i = 0, e = text.length - 1, added = []; i < e; ++i)
+        added.push(new Line(text[i], spansFor(i), estimateHeight));
+      update(lastLine, lastLine.text, lastSpans);
+      if (nlines) doc.remove(from.line, nlines);
+      if (added.length) doc.insert(from.line, added);
+    } else if (firstLine == lastLine) {
+      if (text.length == 1) {
+        update(firstLine, firstLine.text.slice(0, from.ch) + lastText + firstLine.text.slice(to.ch), lastSpans);
+      } else {
+        for (var added = [], i = 1, e = text.length - 1; i < e; ++i)
+          added.push(new Line(text[i], spansFor(i), estimateHeight));
+        added.push(new Line(lastText + firstLine.text.slice(to.ch), lastSpans, estimateHeight));
+        update(firstLine, firstLine.text.slice(0, from.ch) + text[0], spansFor(0));
+        doc.insert(from.line + 1, added);
+      }
+    } else if (text.length == 1) {
+      update(firstLine, firstLine.text.slice(0, from.ch) + text[0] + lastLine.text.slice(to.ch), spansFor(0));
+      doc.remove(from.line + 1, nlines);
+    } else {
+      update(firstLine, firstLine.text.slice(0, from.ch) + text[0], spansFor(0));
+      update(lastLine, lastText + lastLine.text.slice(to.ch), lastSpans);
+      for (var i = 1, e = text.length - 1, added = []; i < e; ++i)
+        added.push(new Line(text[i], spansFor(i), estimateHeight));
+      if (nlines > 1) doc.remove(from.line + 1, nlines - 1);
+      doc.insert(from.line + 1, added);
+    }
+
+    signalLater(doc, "change", doc, change);
+    setSelection(doc, selAfter.anchor, selAfter.head, null, true);
+  }
+
+  function LeafChunk(lines) {
+    this.lines = lines;
+    this.parent = null;
+    for (var i = 0, e = lines.length, height = 0; i < e; ++i) {
+      lines[i].parent = this;
+      height += lines[i].height;
+    }
+    this.height = height;
+  }
+
+  LeafChunk.prototype = {
+    chunkSize: function() { return this.lines.length; },
+    removeInner: function(at, n) {
+      for (var i = at, e = at + n; i < e; ++i) {
+        var line = this.lines[i];
+        this.height -= line.height;
+        cleanUpLine(line);
+        signalLater(line, "delete");
+      }
+      this.lines.splice(at, n);
+    },
+    collapse: function(lines) {
+      lines.splice.apply(lines, [lines.length, 0].concat(this.lines));
+    },
+    insertInner: function(at, lines, height) {
+      this.height += height;
+      this.lines = this.lines.slice(0, at).concat(lines).concat(this.lines.slice(at));
+      for (var i = 0, e = lines.length; i < e; ++i) lines[i].parent = this;
+    },
+    iterN: function(at, n, op) {
+      for (var e = at + n; at < e; ++at)
+        if (op(this.lines[at])) return true;
+    }
+  };
+
+  function BranchChunk(children) {
+    this.children = children;
+    var size = 0, height = 0;
+    for (var i = 0, e = children.length; i < e; ++i) {
+      var ch = children[i];
+      size += ch.chunkSize(); height += ch.height;
+      ch.parent = this;
+    }
+    this.size = size;
+    this.height = height;
+    this.parent = null;
+  }
+
+  BranchChunk.prototype = {
+    chunkSize: function() { return this.size; },
+    removeInner: function(at, n) {
+      this.size -= n;
+      for (var i = 0; i < this.children.length; ++i) {
+        var child = this.children[i], sz = child.chunkSize();
+        if (at < sz) {
+          var rm = Math.min(n, sz - at), oldHeight = child.height;
+          child.removeInner(at, rm);
+          this.height -= oldHeight - child.height;
+          if (sz == rm) { this.children.splice(i--, 1); child.parent = null; }
+          if ((n -= rm) == 0) break;
+          at = 0;
+        } else at -= sz;
+      }
+      if (this.size - n < 25) {
+        var lines = [];
+        this.collapse(lines);
+        this.children = [new LeafChunk(lines)];
+        this.children[0].parent = this;
+      }
+    },
+    collapse: function(lines) {
+      for (var i = 0, e = this.children.length; i < e; ++i) this.children[i].collapse(lines);
+    },
+    insertInner: function(at, lines, height) {
+      this.size += lines.length;
+      this.height += height;
+      for (var i = 0, e = this.children.length; i < e; ++i) {
+        var child = this.children[i], sz = child.chunkSize();
+        if (at <= sz) {
+          child.insertInner(at, lines, height);
+          if (child.lines && child.lines.length > 50) {
+            while (child.lines.length > 50) {
+              var spilled = child.lines.splice(child.lines.length - 25, 25);
+              var newleaf = new LeafChunk(spilled);
+              child.height -= newleaf.height;
+              this.children.splice(i + 1, 0, newleaf);
+              newleaf.parent = this;
+            }
+            this.maybeSpill();
+          }
+          break;
+        }
+        at -= sz;
+      }
+    },
+    maybeSpill: function() {
+      if (this.children.length <= 10) return;
+      var me = this;
+      do {
+        var spilled = me.children.splice(me.children.length - 5, 5);
+        var sibling = new BranchChunk(spilled);
+        if (!me.parent) { // Become the parent node
+          var copy = new BranchChunk(me.children);
+          copy.parent = me;
+          me.children = [copy, sibling];
+          me = copy;
+        } else {
+          me.size -= sibling.size;
+          me.height -= sibling.height;
+          var myIndex = indexOf(me.parent.children, me);
+          me.parent.children.splice(myIndex + 1, 0, sibling);
+        }
+        sibling.parent = me.parent;
+      } while (me.children.length > 10);
+      me.parent.maybeSpill();
+    },
+    iterN: function(at, n, op) {
+      for (var i = 0, e = this.children.length; i < e; ++i) {
+        var child = this.children[i], sz = child.chunkSize();
+        if (at < sz) {
+          var used = Math.min(n, sz - at);
+          if (child.iterN(at, used, op)) return true;
+          if ((n -= used) == 0) break;
+          at = 0;
+        } else at -= sz;
+      }
+    }
+  };
+
+  var nextDocId = 0;
+  var Doc = CodeMirror.Doc = function(text, mode, firstLine) {
+    if (!(this instanceof Doc)) return new Doc(text, mode, firstLine);
+    if (firstLine == null) firstLine = 0;
+
+    BranchChunk.call(this, [new LeafChunk([new Line("", null)])]);
+    this.first = firstLine;
+    this.scrollTop = this.scrollLeft = 0;
+    this.cantEdit = false;
+    this.history = makeHistory();
+    this.cleanGeneration = 1;
+    this.frontier = firstLine;
+    var start = Pos(firstLine, 0);
+    this.sel = {from: start, to: start, head: start, anchor: start, shift: false, extend: false, goalColumn: null};
+    this.id = ++nextDocId;
+    this.modeOption = mode;
+
+    if (typeof text == "string") text = splitLines(text);
+    updateDoc(this, {from: start, to: start, text: text}, null, {head: start, anchor: start});
+  };
+
+  Doc.prototype = createObj(BranchChunk.prototype, {
+    constructor: Doc,
+    iter: function(from, to, op) {
+      if (op) this.iterN(from - this.first, to - from, op);
+      else this.iterN(this.first, this.first + this.size, from);
+    },
+
+    insert: function(at, lines) {
+      var height = 0;
+      for (var i = 0, e = lines.length; i < e; ++i) height += lines[i].height;
+      this.insertInner(at - this.first, lines, height);
+    },
+    remove: function(at, n) { this.removeInner(at - this.first, n); },
+
+    getValue: function(lineSep) {
+      var lines = getLines(this, this.first, this.first + this.size);
+      if (lineSep === false) return lines;
+      return lines.join(lineSep || "\n");
+    },
+    setValue: function(code) {
+      var top = Pos(this.first, 0), last = this.first + this.size - 1;
+      makeChange(this, {from: top, to: Pos(last, getLine(this, last).text.length),
+                        text: splitLines(code), origin: "setValue"},
+                 {head: top, anchor: top}, true);
+    },
+    replaceRange: function(code, from, to, origin) {
+      from = clipPos(this, from);
+      to = to ? clipPos(this, to) : from;
+      replaceRange(this, code, from, to, origin);
+    },
+    getRange: function(from, to, lineSep) {
+      var lines = getBetween(this, clipPos(this, from), clipPos(this, to));
+      if (lineSep === false) return lines;
+      return lines.join(lineSep || "\n");
+    },
+
+    getLine: function(line) {var l = this.getLineHandle(line); return l && l.text;},
+    setLine: function(line, text) {
+      if (isLine(this, line))
+        replaceRange(this, text, Pos(line, 0), clipPos(this, Pos(line)));
+    },
+    removeLine: function(line) {
+      if (line) replaceRange(this, "", clipPos(this, Pos(line - 1)), clipPos(this, Pos(line)));
+      else replaceRange(this, "", Pos(0, 0), clipPos(this, Pos(1, 0)));
+    },
+
+    getLineHandle: function(line) {if (isLine(this, line)) return getLine(this, line);},
+    getLineNumber: function(line) {return lineNo(line);},
+
+    getLineHandleVisualStart: function(line) {
+      if (typeof line == "number") line = getLine(this, line);
+      return visualLine(this, line);
+    },
+
+    lineCount: function() {return this.size;},
+    firstLine: function() {return this.first;},
+    lastLine: function() {return this.first + this.size - 1;},
+
+    clipPos: function(pos) {return clipPos(this, pos);},
+
+    getCursor: function(start) {
+      var sel = this.sel, pos;
+      if (start == null || start == "head") pos = sel.head;
+      else if (start == "anchor") pos = sel.anchor;
+      else if (start == "end" || start === false) pos = sel.to;
+      else pos = sel.from;
+      return copyPos(pos);
+    },
+    somethingSelected: function() {return !posEq(this.sel.head, this.sel.anchor);},
+
+    setCursor: docOperation(function(line, ch, extend) {
+      var pos = clipPos(this, typeof line == "number" ? Pos(line, ch || 0) : line);
+      if (extend) extendSelection(this, pos);
+      else setSelection(this, pos, pos);
+    }),
+    setSelection: docOperation(function(anchor, head) {
+      setSelection(this, clipPos(this, anchor), clipPos(this, head || anchor));
+    }),
+    extendSelection: docOperation(function(from, to) {
+      extendSelection(this, clipPos(this, from), to && clipPos(this, to));
+    }),
+
+    getSelection: function(lineSep) {return this.getRange(this.sel.from, this.sel.to, lineSep);},
+    replaceSelection: function(code, collapse, origin) {
+      makeChange(this, {from: this.sel.from, to: this.sel.to, text: splitLines(code), origin: origin}, collapse || "around");
+    },
+    undo: docOperation(function() {makeChangeFromHistory(this, "undo");}),
+    redo: docOperation(function() {makeChangeFromHistory(this, "redo");}),
+
+    setExtending: function(val) {this.sel.extend = val;},
+
+    historySize: function() {
+      var hist = this.history;
+      return {undo: hist.done.length, redo: hist.undone.length};
+    },
+    clearHistory: function() {this.history = makeHistory(this.history.maxGeneration);},
+
+    markClean: function() {
+      this.cleanGeneration = this.changeGeneration();
+    },
+    changeGeneration: function() {
+      this.history.lastOp = this.history.lastOrigin = null;
+      return this.history.generation;
+    },
+    isClean: function (gen) {
+      return this.history.generation == (gen || this.cleanGeneration);
+    },
+
+    getHistory: function() {
+      return {done: copyHistoryArray(this.history.done),
+              undone: copyHistoryArray(this.history.undone)};
+    },
+    setHistory: function(histData) {
+      var hist = this.history = makeHistory(this.history.maxGeneration);
+      hist.done = histData.done.slice(0);
+      hist.undone = histData.undone.slice(0);
+    },
+
+    markText: function(from, to, options) {
+      return markText(this, clipPos(this, from), clipPos(this, to), options, "range");
+    },
+    setBookmark: function(pos, options) {
+      var realOpts = {replacedWith: options && (options.nodeType == null ? options.widget : options),
+                      insertLeft: options && options.insertLeft};
+      pos = clipPos(this, pos);
+      return markText(this, pos, pos, realOpts, "bookmark");
+    },
+    findMarksAt: function(pos) {
+      pos = clipPos(this, pos);
+      var markers = [], spans = getLine(this, pos.line).markedSpans;
+      if (spans) for (var i = 0; i < spans.length; ++i) {
+        var span = spans[i];
+        if ((span.from == null || span.from <= pos.ch) &&
+            (span.to == null || span.to >= pos.ch))
+          markers.push(span.marker.parent || span.marker);
+      }
+      return markers;
+    },
+    getAllMarks: function() {
+      var markers = [];
+      this.iter(function(line) {
+        var sps = line.markedSpans;
+        if (sps) for (var i = 0; i < sps.length; ++i)
+          if (sps[i].from != null) markers.push(sps[i].marker);
+      });
+      return markers;
+    },
+
+    posFromIndex: function(off) {
+      var ch, lineNo = this.first;
+      this.iter(function(line) {
+        var sz = line.text.length + 1;
+        if (sz > off) { ch = off; return true; }
+        off -= sz;
+        ++lineNo;
+      });
+      return clipPos(this, Pos(lineNo, ch));
+    },
+    indexFromPos: function (coords) {
+      coords = clipPos(this, coords);
+      var index = coords.ch;
+      if (coords.line < this.first || coords.ch < 0) return 0;
+      this.iter(this.first, coords.line, function (line) {
+        index += line.text.length + 1;
+      });
+      return index;
+    },
+
+    copy: function(copyHistory) {
+      var doc = new Doc(getLines(this, this.first, this.first + this.size), this.modeOption, this.first);
+      doc.scrollTop = this.scrollTop; doc.scrollLeft = this.scrollLeft;
+      doc.sel = {from: this.sel.from, to: this.sel.to, head: this.sel.head, anchor: this.sel.anchor,
+                 shift: this.sel.shift, extend: false, goalColumn: this.sel.goalColumn};
+      if (copyHistory) {
+        doc.history.undoDepth = this.history.undoDepth;
+        doc.setHistory(this.getHistory());
+      }
+      return doc;
+    },
+
+    linkedDoc: function(options) {
+      if (!options) options = {};
+      var from = this.first, to = this.first + this.size;
+      if (options.from != null && options.from > from) from = options.from;
+      if (options.to != null && options.to < to) to = options.to;
+      var copy = new Doc(getLines(this, from, to), options.mode || this.modeOption, from);
+      if (options.sharedHist) copy.history = this.history;
+      (this.linked || (this.linked = [])).push({doc: copy, sharedHist: options.sharedHist});
+      copy.linked = [{doc: this, isParent: true, sharedHist: options.sharedHist}];
+      return copy;
+    },
+    unlinkDoc: function(other) {
+      if (other instanceof CodeMirror) other = other.doc;
+      if (this.linked) for (var i = 0; i < this.linked.length; ++i) {
+        var link = this.linked[i];
+        if (link.doc != other) continue;
+        this.linked.splice(i, 1);
+        other.unlinkDoc(this);
+        break;
+      }
+      // If the histories were shared, split them again
+      if (other.history == this.history) {
+        var splitIds = [other.id];
+        linkedDocs(other, function(doc) {splitIds.push(doc.id);}, true);
+        other.history = makeHistory();
+        other.history.done = copyHistoryArray(this.history.done, splitIds);
+        other.history.undone = copyHistoryArray(this.history.undone, splitIds);
+      }
+    },
+    iterLinkedDocs: function(f) {linkedDocs(this, f);},
+
+    getMode: function() {return this.mode;},
+    getEditor: function() {return this.cm;}
+  });
+
+  Doc.prototype.eachLine = Doc.prototype.iter;
+
+  // The Doc methods that should be available on CodeMirror instances
+  var dontDelegate = "iter insert remove copy getEditor".split(" ");
+  for (var prop in Doc.prototype) if (Doc.prototype.hasOwnProperty(prop) && indexOf(dontDelegate, prop) < 0)
+    CodeMirror.prototype[prop] = (function(method) {
+      return function() {return method.apply(this.doc, arguments);};
+    })(Doc.prototype[prop]);
+
+  eventMixin(Doc);
+
+  function linkedDocs(doc, f, sharedHistOnly) {
+    function propagate(doc, skip, sharedHist) {
+      if (doc.linked) for (var i = 0; i < doc.linked.length; ++i) {
+        var rel = doc.linked[i];
+        if (rel.doc == skip) continue;
+        var shared = sharedHist && rel.sharedHist;
+        if (sharedHistOnly && !shared) continue;
+        f(rel.doc, shared);
+        propagate(rel.doc, doc, shared);
+      }
+    }
+    propagate(doc, null, true);
+  }
+
+  function attachDoc(cm, doc) {
+    if (doc.cm) throw new Error("This document is already in use.");
+    cm.doc = doc;
+    doc.cm = cm;
+    estimateLineHeights(cm);
+    loadMode(cm);
+    if (!cm.options.lineWrapping) computeMaxLength(cm);
+    cm.options.mode = doc.modeOption;
+    regChange(cm);
+  }
+
+  // LINE UTILITIES
+
+  function getLine(chunk, n) {
+    n -= chunk.first;
+    while (!chunk.lines) {
+      for (var i = 0;; ++i) {
+        var child = chunk.children[i], sz = child.chunkSize();
+        if (n < sz) { chunk = child; break; }
+        n -= sz;
+      }
+    }
+    return chunk.lines[n];
+  }
+
+  function getBetween(doc, start, end) {
+    var out = [], n = start.line;
+    doc.iter(start.line, end.line + 1, function(line) {
+      var text = line.text;
+      if (n == end.line) text = text.slice(0, end.ch);
+      if (n == start.line) text = text.slice(start.ch);
+      out.push(text);
+      ++n;
+    });
+    return out;
+  }
+  function getLines(doc, from, to) {
+    var out = [];
+    doc.iter(from, to, function(line) { out.push(line.text); });
+    return out;
+  }
+
+  function updateLineHeight(line, height) {
+    var diff = height - line.height;
+    for (var n = line; n; n = n.parent) n.height += diff;
+  }
+
+  function lineNo(line) {
+    if (line.parent == null) return null;
+    var cur = line.parent, no = indexOf(cur.lines, line);
+    for (var chunk = cur.parent; chunk; cur = chunk, chunk = chunk.parent) {
+      for (var i = 0;; ++i) {
+        if (chunk.children[i] == cur) break;
+        no += chunk.children[i].chunkSize();
+      }
+    }
+    return no + cur.first;
+  }
+
+  function lineAtHeight(chunk, h) {
+    var n = chunk.first;
+    outer: do {
+      for (var i = 0, e = chunk.children.length; i < e; ++i) {
+        var child = chunk.children[i], ch = child.height;
+        if (h < ch) { chunk = child; continue outer; }
+        h -= ch;
+        n += child.chunkSize();
+      }
+      return n;
+    } while (!chunk.lines);
+    for (var i = 0, e = chunk.lines.length; i < e; ++i) {
+      var line = chunk.lines[i], lh = line.height;
+      if (h < lh) break;
+      h -= lh;
+    }
+    return n + i;
+  }
+
+  function heightAtLine(cm, lineObj) {
+    lineObj = visualLine(cm.doc, lineObj);
+
+    var h = 0, chunk = lineObj.parent;
+    for (var i = 0; i < chunk.lines.length; ++i) {
+      var line = chunk.lines[i];
+      if (line == lineObj) break;
+      else h += line.height;
+    }
+    for (var p = chunk.parent; p; chunk = p, p = chunk.parent) {
+      for (var i = 0; i < p.children.length; ++i) {
+        var cur = p.children[i];
+        if (cur == chunk) break;
+        else h += cur.height;
+      }
+    }
+    return h;
+  }
+
+  function getOrder(line) {
+    var order = line.order;
+    if (order == null) order = line.order = bidiOrdering(line.text);
+    return order;
+  }
+
+  // HISTORY
+
+  function makeHistory(startGen) {
+    return {
+      // Arrays of history events. Doing something adds an event to
+      // done and clears undo. Undoing moves events from done to
+      // undone, redoing moves them in the other direction.
+      done: [], undone: [], undoDepth: Infinity,
+      // Used to track when changes can be merged into a single undo
+      // event
+      lastTime: 0, lastOp: null, lastOrigin: null,
+      // Used by the isClean() method
+      generation: startGen || 1, maxGeneration: startGen || 1
+    };
+  }
+
+  function attachLocalSpans(doc, change, from, to) {
+    var existing = change["spans_" + doc.id], n = 0;
+    doc.iter(Math.max(doc.first, from), Math.min(doc.first + doc.size, to), function(line) {
+      if (line.markedSpans)
+        (existing || (existing = change["spans_" + doc.id] = {}))[n] = line.markedSpans;
+      ++n;
+    });
+  }
+
+  function historyChangeFromChange(doc, change) {
+    var from = { line: change.from.line, ch: change.from.ch };
+    var histChange = {from: from, to: changeEnd(change), text: getBetween(doc, change.from, change.to)};
+    attachLocalSpans(doc, histChange, change.from.line, change.to.line + 1);
+    linkedDocs(doc, function(doc) {attachLocalSpans(doc, histChange, change.from.line, change.to.line + 1);}, true);
+    return histChange;
+  }
+
+  function addToHistory(doc, change, selAfter, opId) {
+    var hist = doc.history;
+    hist.undone.length = 0;
+    var time = +new Date, cur = lst(hist.done);
+
+    if (cur &&
+        (hist.lastOp == opId ||
+         hist.lastOrigin == change.origin && change.origin &&
+         ((change.origin.charAt(0) == "+" && doc.cm && hist.lastTime > time - doc.cm.options.historyEventDelay) ||
+          change.origin.charAt(0) == "*"))) {
+      // Merge this change into the last event
+      var last = lst(cur.changes);
+      if (posEq(change.from, change.to) && posEq(change.from, last.to)) {
+        // Optimized case for simple insertion -- don't want to add
+        // new changesets for every character typed
+        last.to = changeEnd(change);
+      } else {
+        // Add new sub-event
+        cur.changes.push(historyChangeFromChange(doc, change));
+      }
+      cur.anchorAfter = selAfter.anchor; cur.headAfter = selAfter.head;
+    } else {
+      // Can not be merged, start a new event.
+      cur = {changes: [historyChangeFromChange(doc, change)],
+             generation: hist.generation,
+             anchorBefore: doc.sel.anchor, headBefore: doc.sel.head,
+             anchorAfter: selAfter.anchor, headAfter: selAfter.head};
+      hist.done.push(cur);
+      hist.generation = ++hist.maxGeneration;
+      while (hist.done.length > hist.undoDepth)
+        hist.done.shift();
+    }
+    hist.lastTime = time;
+    hist.lastOp = opId;
+    hist.lastOrigin = change.origin;
+  }
+
+  function removeClearedSpans(spans) {
+    if (!spans) return null;
+    for (var i = 0, out; i < spans.length; ++i) {
+      if (spans[i].marker.explicitlyCleared) { if (!out) out = spans.slice(0, i); }
+      else if (out) out.push(spans[i]);
+    }
+    return !out ? spans : out.length ? out : null;
+  }
+
+  function getOldSpans(doc, change) {
+    var found = change["spans_" + doc.id];
+    if (!found) return null;
+    for (var i = 0, nw = []; i < change.text.length; ++i)
+      nw.push(removeClearedSpans(found[i]));
+    return nw;
+  }
+
+  // Used both to provide a JSON-safe object in .getHistory, and, when
+  // detaching a document, to split the history in two
+  function copyHistoryArray(events, newGroup) {
+    for (var i = 0, copy = []; i < events.length; ++i) {
+      var event = events[i], changes = event.changes, newChanges = [];
+      copy.push({changes: newChanges, anchorBefore: event.anchorBefore, headBefore: event.headBefore,
+                 anchorAfter: event.anchorAfter, headAfter: event.headAfter});
+      for (var j = 0; j < changes.length; ++j) {
+        var change = changes[j], m;
+        newChanges.push({from: change.from, to: change.to, text: change.text});
+        if (newGroup) for (var prop in change) if (m = prop.match(/^spans_(\d+)$/)) {
+          if (indexOf(newGroup, Number(m[1])) > -1) {
+            lst(newChanges)[prop] = change[prop];
+            delete change[prop];
+          }
+        }
+      }
+    }
+    return copy;
+  }
+
+  // Rebasing/resetting history to deal with externally-sourced changes
+
+  function rebaseHistSel(pos, from, to, diff) {
+    if (to < pos.line) {
+      pos.line += diff;
+    } else if (from < pos.line) {
+      pos.line = from;
+      pos.ch = 0;
+    }
+  }
+
+  // Tries to rebase an array of history events given a change in the
+  // document. If the change touches the same lines as the event, the
+  // event, and everything 'behind' it, is discarded. If the change is
+  // before the event, the event's positions are updated. Uses a
+  // copy-on-write scheme for the positions, to avoid having to
+  // reallocate them all on every rebase, but also avoid problems with
+  // shared position objects being unsafely updated.
+  function rebaseHistArray(array, from, to, diff) {
+    for (var i = 0; i < array.length; ++i) {
+      var sub = array[i], ok = true;
+      for (var j = 0; j < sub.changes.length; ++j) {
+        var cur = sub.changes[j];
+        if (!sub.copied) { cur.from = copyPos(cur.from); cur.to = copyPos(cur.to); }
+        if (to < cur.from.line) {
+          cur.from.line += diff;
+          cur.to.line += diff;
+        } else if (from <= cur.to.line) {
+          ok = false;
+          break;
+        }
+      }
+      if (!sub.copied) {
+        sub.anchorBefore = copyPos(sub.anchorBefore); sub.headBefore = copyPos(sub.headBefore);
+        sub.anchorAfter = copyPos(sub.anchorAfter); sub.readAfter = copyPos(sub.headAfter);
+        sub.copied = true;
+      }
+      if (!ok) {
+        array.splice(0, i + 1);
+        i = 0;
+      } else {
+        rebaseHistSel(sub.anchorBefore); rebaseHistSel(sub.headBefore);
+        rebaseHistSel(sub.anchorAfter); rebaseHistSel(sub.headAfter);
+      }
+    }
+  }
+
+  function rebaseHist(hist, change) {
+    var from = change.from.line, to = change.to.line, diff = change.text.length - (to - from) - 1;
+    rebaseHistArray(hist.done, from, to, diff);
+    rebaseHistArray(hist.undone, from, to, diff);
+  }
+
+  // EVENT OPERATORS
+
+  function stopMethod() {e_stop(this);}
+  // Ensure an event has a stop method.
+  function addStop(event) {
+    if (!event.stop) event.stop = stopMethod;
+    return event;
+  }
+
+  function e_preventDefault(e) {
+    if (e.preventDefault) e.preventDefault();
+    else e.returnValue = false;
+  }
+  function e_stopPropagation(e) {
+    if (e.stopPropagation) e.stopPropagation();
+    else e.cancelBubble = true;
+  }
+  function e_defaultPrevented(e) {
+    return e.defaultPrevented != null ? e.defaultPrevented : e.returnValue == false;
+  }
+  function e_stop(e) {e_preventDefault(e); e_stopPropagation(e);}
+  CodeMirror.e_stop = e_stop;
+  CodeMirror.e_preventDefault = e_preventDefault;
+  CodeMirror.e_stopPropagation = e_stopPropagation;
+
+  function e_target(e) {return e.target || e.srcElement;}
+  function e_button(e) {
+    var b = e.which;
+    if (b == null) {
+      if (e.button & 1) b = 1;
+      else if (e.button & 2) b = 3;
+      else if (e.button & 4) b = 2;
+    }
+    if (mac && e.ctrlKey && b == 1) b = 3;
+    return b;
+  }
+
+  // EVENT HANDLING
+
+  function on(emitter, type, f) {
+    if (emitter.addEventListener)
+      emitter.addEventListener(type, f, false);
+    else if (emitter.attachEvent)
+      emitter.attachEvent("on" + type, f);
+    else {
+      var map = emitter._handlers || (emitter._handlers = {});
+      var arr = map[type] || (map[type] = []);
+      arr.push(f);
+    }
+  }
+
+  function off(emitter, type, f) {
+    if (emitter.removeEventListener)
+      emitter.removeEventListener(type, f, false);
+    else if (emitter.detachEvent)
+      emitter.detachEvent("on" + type, f);
+    else {
+      var arr = emitter._handlers && emitter._handlers[type];
+      if (!arr) return;
+      for (var i = 0; i < arr.length; ++i)
+        if (arr[i] == f) { arr.splice(i, 1); break; }
+    }
+  }
+
+  function signal(emitter, type /*, values...*/) {
+    var arr = emitter._handlers && emitter._handlers[type];
+    if (!arr) return;
+    var args = Array.prototype.slice.call(arguments, 2);
+    for (var i = 0; i < arr.length; ++i) arr[i].apply(null, args);
+  }
+
+  var delayedCallbacks, delayedCallbackDepth = 0;
+  function signalLater(emitter, type /*, values...*/) {
+    var arr = emitter._handlers && emitter._handlers[type];
+    if (!arr) return;
+    var args = Array.prototype.slice.call(arguments, 2);
+    if (!delayedCallbacks) {
+      ++delayedCallbackDepth;
+      delayedCallbacks = [];
+      setTimeout(fireDelayed, 0);
+    }
+    function bnd(f) {return function(){f.apply(null, args);};};
+    for (var i = 0; i < arr.length; ++i)
+      delayedCallbacks.push(bnd(arr[i]));
+  }
+
+  function signalDOMEvent(cm, e, override) {
+    signal(cm, override || e.type, cm, e);
+    return e_defaultPrevented(e);
+  }
+
+  function fireDelayed() {
+    --delayedCallbackDepth;
+    var delayed = delayedCallbacks;
+    delayedCallbacks = null;
+    for (var i = 0; i < delayed.length; ++i) delayed[i]();
+  }
+
+  function hasHandler(emitter, type) {
+    var arr = emitter._handlers && emitter._handlers[type];
+    return arr && arr.length > 0;
+  }
+
+  CodeMirror.on = on; CodeMirror.off = off; CodeMirror.signal = signal;
+
+  function eventMixin(ctor) {
+    ctor.prototype.on = function(type, f) {on(this, type, f);};
+    ctor.prototype.off = function(type, f) {off(this, type, f);};
+  }
+
+  // MISC UTILITIES
+
+  // Number of pixels added to scroller and sizer to hide scrollbar
+  var scrollerCutOff = 30;
+
+  // Returned or thrown by various protocols to signal 'I'm not
+  // handling this'.
+  var Pass = CodeMirror.Pass = {toString: function(){return "CodeMirror.Pass";}};
+
+  function Delayed() {this.id = null;}
+  Delayed.prototype = {set: function(ms, f) {clearTimeout(this.id); this.id = setTimeout(f, ms);}};
+
+  // Counts the column offset in a string, taking tabs into account.
+  // Used mostly to find indentation.
+  function countColumn(string, end, tabSize, startIndex, startValue) {
+    if (end == null) {
+      end = string.search(/[^\s\u00a0]/);
+      if (end == -1) end = string.length;
+    }
+    for (var i = startIndex || 0, n = startValue || 0; i < end; ++i) {
+      if (string.charAt(i) == "\t") n += tabSize - (n % tabSize);
+      else ++n;
+    }
+    return n;
+  }
+  CodeMirror.countColumn = countColumn;
+
+  var spaceStrs = [""];
+  function spaceStr(n) {
+    while (spaceStrs.length <= n)
+      spaceStrs.push(lst(spaceStrs) + " ");
+    return spaceStrs[n];
+  }
+
+  function lst(arr) { return arr[arr.length-1]; }
+
+  function selectInput(node) {
+    if (ios) { // Mobile Safari apparently has a bug where select() is broken.
+      node.selectionStart = 0;
+      node.selectionEnd = node.value.length;
+    } else {
+      // Suppress mysterious IE10 errors
+      try { node.select(); }
+      catch(_e) {}
+    }
+  }
+
+  function indexOf(collection, elt) {
+    if (collection.indexOf) return collection.indexOf(elt);
+    for (var i = 0, e = collection.length; i < e; ++i)
+      if (collection[i] == elt) return i;
+    return -1;
+  }
+
+  function createObj(base, props) {
+    function Obj() {}
+    Obj.prototype = base;
+    var inst = new Obj();
+    if (props) copyObj(props, inst);
+    return inst;
+  }
+
+  function copyObj(obj, target) {
+    if (!target) target = {};
+    for (var prop in obj) if (obj.hasOwnProperty(prop)) target[prop] = obj[prop];
+    return target;
+  }
+
+  function emptyArray(size) {
+    for (var a = [], i = 0; i < size; ++i) a.push(undefined);
+    return a;
+  }
+
+  function bind(f) {
+    var args = Array.prototype.slice.call(arguments, 1);
+    return function(){return f.apply(null, args);};
+  }
+
+  var nonASCIISingleCaseWordChar = /[\u3040-\u309f\u30a0-\u30ff\u3400-\u4db5\u4e00-\u9fcc\uac00-\ud7af]/;
+  function isWordChar(ch) {
+    return /\w/.test(ch) || ch > "\x80" &&
+      (ch.toUpperCase() != ch.toLowerCase() || nonASCIISingleCaseWordChar.test(ch));
+  }
+
+  function isEmpty(obj) {
+    for (var n in obj) if (obj.hasOwnProperty(n) && obj[n]) return false;
+    return true;
+  }
+
+  var isExtendingChar = /[\u0300-\u036F\u0483-\u0487\u0488-\u0489\u0591-\u05BD\u05BF\u05C1-\u05C2\u05C4-\u05C5\u05C7\u0610-\u061A\u064B-\u065F\u0670\u06D6-\u06DC\u06DF-\u06E4\u06E7-\u06E8\u06EA-\u06ED\uA66F\uA670-\uA672\uA674-\uA67D\uA69F\udc00-\udfff]/;
+
+  // DOM UTILITIES
+
+  function elt(tag, content, className, style) {
+    var e = document.createElement(tag);
+    if (className) e.className = className;
+    if (style) e.style.cssText = style;
+    if (typeof content == "string") setTextContent(e, content);
+    else if (content) for (var i = 0; i < content.length; ++i) e.appendChild(content[i]);
+    return e;
+  }
+
+  function removeChildren(e) {
+    for (var count = e.childNodes.length; count > 0; --count)
+      e.removeChild(e.firstChild);
+    return e;
+  }
+
+  function removeChildrenAndAdd(parent, e) {
+    return removeChildren(parent).appendChild(e);
+  }
+
+  function setTextContent(e, str) {
+    if (ie_lt9) {
+      e.innerHTML = "";
+      e.appendChild(document.createTextNode(str));
+    } else e.textContent = str;
+  }
+
+  function getRect(node) {
+    return node.getBoundingClientRect();
+  }
+  CodeMirror.replaceGetRect = function(f) { getRect = f; };
+
+  // FEATURE DETECTION
+
+  // Detect drag-and-drop
+  var dragAndDrop = function() {
+    // There is *some* kind of drag-and-drop support in IE6-8, but I
+    // couldn't get it to work yet.
+    if (ie_lt9) return false;
+    var div = elt('div');
+    return "draggable" in div || "dragDrop" in div;
+  }();
+
+  // For a reason I have yet to figure out, some browsers disallow
+  // word wrapping between certain characters *only* if a new inline
+  // element is started between them. This makes it hard to reliably
+  // measure the position of things, since that requires inserting an
+  // extra span. This terribly fragile set of tests matches the
+  // character combinations that suffer from this phenomenon on the
+  // various browsers.
+  function spanAffectsWrapping() { return false; }
+  if (gecko) // Only for "$'"
+    spanAffectsWrapping = function(str, i) {
+      return str.charCodeAt(i - 1) == 36 && str.charCodeAt(i) == 39;
+    };
+  else if (safari && !/Version\/([6-9]|\d\d)\b/.test(navigator.userAgent))
+    spanAffectsWrapping = function(str, i) {
+      return (/\-[^ \-?]|\?[^ !\'\"\),.\-\/:;\?\]\}]/).test(str.slice(i - 1, i + 1));
+    };
+  else if (webkit && !/Chrome\/(?:29|[3-9]\d|\d\d\d)\./.test(navigator.userAgent))
+    spanAffectsWrapping = function(str, i) {
+      if (i > 1 && str.charCodeAt(i - 1) == 45) {
+        if (/\w/.test(str.charAt(i - 2)) && /[^\-?\.]/.test(str.charAt(i))) return true;
+        if (i > 2 && /[\d\.,]/.test(str.charAt(i - 2)) && /[\d\.,]/.test(str.charAt(i))) return false;
+      }
+      return (/[~!#%&*)=+}\]|\"\.>,:;][({[<]|-[^\-?\.\u2010-\u201f\u2026]|\?[\w~`@#$%\^&*(_=+{[|><]|…[\w~`@#$%\^&*(_=+{[><]/).test(str.slice(i - 1, i + 1));
+    };
+
+  var knownScrollbarWidth;
+  function scrollbarWidth(measure) {
+    if (knownScrollbarWidth != null) return knownScrollbarWidth;
+    var test = elt("div", null, null, "width: 50px; height: 50px; overflow-x: scroll");
+    removeChildrenAndAdd(measure, test);
+    if (test.offsetWidth)
+      knownScrollbarWidth = test.offsetHeight - test.clientHeight;
+    return knownScrollbarWidth || 0;
+  }
+
+  var zwspSupported;
+  function zeroWidthElement(measure) {
+    if (zwspSupported == null) {
+      var test = elt("span", "\u200b");
+      removeChildrenAndAdd(measure, elt("span", [test, document.createTextNode("x")]));
+      if (measure.firstChild.offsetHeight != 0)
+        zwspSupported = test.offsetWidth <= 1 && test.offsetHeight > 2 && !ie_lt8;
+    }
+    if (zwspSupported) return elt("span", "\u200b");
+    else return elt("span", "\u00a0", null, "display: inline-block; width: 1px; margin-right: -1px");
+  }
+
+  // See if "".split is the broken IE version, if so, provide an
+  // alternative way to split lines.
+  var splitLines = "\n\nb".split(/\n/).length != 3 ? function(string) {
+    var pos = 0, result = [], l = string.length;
+    while (pos <= l) {
+      var nl = string.indexOf("\n", pos);
+      if (nl == -1) nl = string.length;
+      var line = string.slice(pos, string.charAt(nl - 1) == "\r" ? nl - 1 : nl);
+      var rt = line.indexOf("\r");
+      if (rt != -1) {
+        result.push(line.slice(0, rt));
+        pos += rt + 1;
+      } else {
+        result.push(line);
+        pos = nl + 1;
+      }
+    }
+    return result;
+  } : function(string){return string.split(/\r\n?|\n/);};
+  CodeMirror.splitLines = splitLines;
+
+  var hasSelection = window.getSelection ? function(te) {
+    try { return te.selectionStart != te.selectionEnd; }
+    catch(e) { return false; }
+  } : function(te) {
+    try {var range = te.ownerDocument.selection.createRange();}
+    catch(e) {}
+    if (!range || range.parentElement() != te) return false;
+    return range.compareEndPoints("StartToEnd", range) != 0;
+  };
+
+  var hasCopyEvent = (function() {
+    var e = elt("div");
+    if ("oncopy" in e) return true;
+    e.setAttribute("oncopy", "return;");
+    return typeof e.oncopy == 'function';
+  })();
+
+  // KEY NAMING
+
+  var keyNames = {3: "Enter", 8: "Backspace", 9: "Tab", 13: "Enter", 16: "Shift", 17: "Ctrl", 18: "Alt",
+                  19: "Pause", 20: "CapsLock", 27: "Esc", 32: "Space", 33: "PageUp", 34: "PageDown", 35: "End",
+                  36: "Home", 37: "Left", 38: "Up", 39: "Right", 40: "Down", 44: "PrintScrn", 45: "Insert",
+                  46: "Delete", 59: ";", 91: "Mod", 92: "Mod", 93: "Mod", 109: "-", 107: "=", 127: "Delete",
+                  186: ";", 187: "=", 188: ",", 189: "-", 190: ".", 191: "/", 192: "`", 219: "[", 220: "\\",
+                  221: "]", 222: "'", 63276: "PageUp", 63277: "PageDown", 63275: "End", 63273: "Home",
+                  63234: "Left", 63232: "Up", 63235: "Right", 63233: "Down", 63302: "Insert", 63272: "Delete"};
+  CodeMirror.keyNames = keyNames;
+  (function() {
+    // Number keys
+    for (var i = 0; i < 10; i++) keyNames[i + 48] = String(i);
+    // Alphabetic keys
+    for (var i = 65; i <= 90; i++) keyNames[i] = String.fromCharCode(i);
+    // Function keys
+    for (var i = 1; i <= 12; i++) keyNames[i + 111] = keyNames[i + 63235] = "F" + i;
+  })();
+
+  // BIDI HELPERS
+
+  function iterateBidiSections(order, from, to, f) {
+    if (!order) return f(from, to, "ltr");
+    var found = false;
+    for (var i = 0; i < order.length; ++i) {
+      var part = order[i];
+      if (part.from < to && part.to > from || from == to && part.to == from) {
+        f(Math.max(part.from, from), Math.min(part.to, to), part.level == 1 ? "rtl" : "ltr");
+        found = true;
+      }
+    }
+    if (!found) f(from, to, "ltr");
+  }
+
+  function bidiLeft(part) { return part.level % 2 ? part.to : part.from; }
+  function bidiRight(part) { return part.level % 2 ? part.from : part.to; }
+
+  function lineLeft(line) { var order = getOrder(line); return order ? bidiLeft(order[0]) : 0; }
+  function lineRight(line) {
+    var order = getOrder(line);
+    if (!order) return line.text.length;
+    return bidiRight(lst(order));
+  }
+
+  function lineStart(cm, lineN) {
+    var line = getLine(cm.doc, lineN);
+    var visual = visualLine(cm.doc, line);
+    if (visual != line) lineN = lineNo(visual);
+    var order = getOrder(visual);
+    var ch = !order ? 0 : order[0].level % 2 ? lineRight(visual) : lineLeft(visual);
+    return Pos(lineN, ch);
+  }
+  function lineEnd(cm, lineN) {
+    var merged, line;
+    while (merged = collapsedSpanAtEnd(line = getLine(cm.doc, lineN)))
+      lineN = merged.find().to.line;
+    var order = getOrder(line);
+    var ch = !order ? line.text.length : order[0].level % 2 ? lineLeft(line) : lineRight(line);
+    return Pos(lineN, ch);
+  }
+
+  function compareBidiLevel(order, a, b) {
+    var linedir = order[0].level;
+    if (a == linedir) return true;
+    if (b == linedir) return false;
+    return a < b;
+  }
+  var bidiOther;
+  function getBidiPartAt(order, pos) {
+    for (var i = 0, found; i < order.length; ++i) {
+      var cur = order[i];
+      if (cur.from < pos && cur.to > pos) { bidiOther = null; return i; }
+      if (cur.from == pos || cur.to == pos) {
+        if (found == null) {
+          found = i;
+        } else if (compareBidiLevel(order, cur.level, order[found].level)) {
+          bidiOther = found;
+          return i;
+        } else {
+          bidiOther = i;
+          return found;
+        }
+      }
+    }
+    bidiOther = null;
+    return found;
+  }
+
+  function moveInLine(line, pos, dir, byUnit) {
+    if (!byUnit) return pos + dir;
+    do pos += dir;
+    while (pos > 0 && isExtendingChar.test(line.text.charAt(pos)));
+    return pos;
+  }
+
+  // This is somewhat involved. It is needed in order to move
+  // 'visually' through bi-directional text -- i.e., pressing left
+  // should make the cursor go left, even when in RTL text. The
+  // tricky part is the 'jumps', where RTL and LTR text touch each
+  // other. This often requires the cursor offset to move more than
+  // one unit, in order to visually move one unit.
+  function moveVisually(line, start, dir, byUnit) {
+    var bidi = getOrder(line);
+    if (!bidi) return moveLogically(line, start, dir, byUnit);
+    var pos = getBidiPartAt(bidi, start), part = bidi[pos];
+    var target = moveInLine(line, start, part.level % 2 ? -dir : dir, byUnit);
+
+    for (;;) {
+      if (target > part.from && target < part.to) return target;
+      if (target == part.from || target == part.to) {
+        if (getBidiPartAt(bidi, target) == pos) return target;
+        part = bidi[pos += dir];
+        return (dir > 0) == part.level % 2 ? part.to : part.from;
+      } else {
+        part = bidi[pos += dir];
+        if (!part) return null;
+        if ((dir > 0) == part.level % 2)
+          target = moveInLine(line, part.to, -1, byUnit);
+        else
+          target = moveInLine(line, part.from, 1, byUnit);
+      }
+    }
+  }
+
+  function moveLogically(line, start, dir, byUnit) {
+    var target = start + dir;
+    if (byUnit) while (target > 0 && isExtendingChar.test(line.text.charAt(target))) target += dir;
+    return target < 0 || target > line.text.length ? null : target;
+  }
+
+  // Bidirectional ordering algorithm
+  // See http://unicode.org/reports/tr9/tr9-13.html for the algorithm
+  // that this (partially) implements.
+
+  // One-char codes used for character types:
+  // L (L):   Left-to-Right
+  // R (R):   Right-to-Left
+  // r (AL):  Right-to-Left Arabic
+  // 1 (EN):  European Number
+  // + (ES):  European Number Separator
+  // % (ET):  European Number Terminator
+  // n (AN):  Arabic Number
+  // , (CS):  Common Number Separator
+  // m (NSM): Non-Spacing Mark
+  // b (BN):  Boundary Neutral
+  // s (B):   Paragraph Separator
+  // t (S):   Segment Separator
+  // w (WS):  Whitespace
+  // N (ON):  Other Neutrals
+
+  // Returns null if characters are ordered as they appear
+  // (left-to-right), or an array of sections ({from, to, level}
+  // objects) in the order in which they occur visually.
+  var bidiOrdering = (function() {
+    // Character types for codepoints 0 to 0xff
+    var lowTypes = "bbbbbbbbbtstwsbbbbbbbbbbbbbbssstwNN%%%NNNNNN,N,N1111111111NNNNNNNLLLLLLLLLLLLLLLLLLLLLLLLLLNNNNNNLLLLLLLLLLLLLLLLLLLLLLLLLLNNNNbbbbbbsbbbbbbbbbbbbbbbbbbbbbbbbbb,N%%%%NNNNLNNNNN%%11NLNNN1LNNNNNLLLLLLLLLLLLLLLLLLLLLLLNLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLNLLLLLLLL";
+    // Character types for codepoints 0x600 to 0x6ff
+    var arabicTypes = "rrrrrrrrrrrr,rNNmmmmmmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmrrrrrrrnnnnnnnnnn%nnrrrmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmmmmmmNmmmmrrrrrrrrrrrrrrrrrr";
+    function charType(code) {
+      if (code <= 0xff) return lowTypes.charAt(code);
+      else if (0x590 <= code && code <= 0x5f4) return "R";
+      else if (0x600 <= code && code <= 0x6ff) return arabicTypes.charAt(code - 0x600);
+      else if (0x700 <= code && code <= 0x8ac) return "r";
+      else return "L";
+    }
+
+    var bidiRE = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
+    var isNeutral = /[stwN]/, isStrong = /[LRr]/, countsAsLeft = /[Lb1n]/, countsAsNum = /[1n]/;
+    // Browsers seem to always treat the boundaries of block elements as being L.
+    var outerType = "L";
+
+    return function(str) {
+      if (!bidiRE.test(str)) return false;
+      var len = str.length, types = [];
+      for (var i = 0, type; i < len; ++i)
+        types.push(type = charType(str.charCodeAt(i)));
+
+      // W1. Examine each non-spacing mark (NSM) in the level run, and
+      // change the type of the NSM to the type of the previous
+      // character. If the NSM is at the start of the level run, it will
+      // get the type of sor.
+      for (var i = 0, prev = outerType; i < len; ++i) {
+        var type = types[i];
+        if (type == "m") types[i] = prev;
+        else prev = type;
+      }
+
+      // W2. Search backwards from each instance of a European number
+      // until the first strong type (R, L, AL, or sor) is found. If an
+      // AL is found, change the type of the European number to Arabic
+      // number.
+      // W3. Change all ALs to R.
+      for (var i = 0, cur = outerType; i < len; ++i) {
+        var type = types[i];
+        if (type == "1" && cur == "r") types[i] = "n";
+        else if (isStrong.test(type)) { cur = type; if (type == "r") types[i] = "R"; }
+      }
+
+      // W4. A single European separator between two European numbers
+      // changes to a European number. A single common separator between
+      // two numbers of the same type changes to that type.
+      for (var i = 1, prev = types[0]; i < len - 1; ++i) {
+        var type = types[i];
+        if (type == "+" && prev == "1" && types[i+1] == "1") types[i] = "1";
+        else if (type == "," && prev == types[i+1] &&
+                 (prev == "1" || prev == "n")) types[i] = prev;
+        prev = type;
+      }
+
+      // W5. A sequence of European terminators adjacent to European
+      // numbers changes to all European numbers.
+      // W6. Otherwise, separators and terminators change to Other
+      // Neutral.
+      for (var i = 0; i < len; ++i) {
+        var type = types[i];
+        if (type == ",") types[i] = "N";
+        else if (type == "%") {
+          for (var end = i + 1; end < len && types[end] == "%"; ++end) {}
+          var replace = (i && types[i-1] == "!") || (end < len - 1 && types[end] == "1") ? "1" : "N";
+          for (var j = i; j < end; ++j) types[j] = replace;
+          i = end - 1;
+        }
+      }
+
+      // W7. Search backwards from each instance of a European number
+      // until the first strong type (R, L, or sor) is found. If an L is
+      // found, then change the type of the European number to L.
+      for (var i = 0, cur = outerType; i < len; ++i) {
+        var type = types[i];
+        if (cur == "L" && type == "1") types[i] = "L";
+        else if (isStrong.test(type)) cur = type;
+      }
+
+      // N1. A sequence of neutrals takes the direction of the
+      // surrounding strong text if the text on both sides has the same
+      // direction. European and Arabic numbers act as if they were R in
+      // terms of their influence on neutrals. Start-of-level-run (sor)
+      // and end-of-level-run (eor) are used at level run boundaries.
+      // N2. Any remaining neutrals take the embedding direction.
+      for (var i = 0; i < len; ++i) {
+        if (isNeutral.test(types[i])) {
+          for (var end = i + 1; end < len && isNeutral.test(types[end]); ++end) {}
+          var before = (i ? types[i-1] : outerType) == "L";
+          var after = (end < len - 1 ? types[end] : outerType) == "L";
+          var replace = before || after ? "L" : "R";
+          for (var j = i; j < end; ++j) types[j] = replace;
+          i = end - 1;
+        }
+      }
+
+      // Here we depart from the documented algorithm, in order to avoid
+      // building up an actual levels array. Since there are only three
+      // levels (0, 1, 2) in an implementation that doesn't take
+      // explicit embedding into account, we can build up the order on
+      // the fly, without following the level-based algorithm.
+      var order = [], m;
+      for (var i = 0; i < len;) {
+        if (countsAsLeft.test(types[i])) {
+          var start = i;
+          for (++i; i < len && countsAsLeft.test(types[i]); ++i) {}
+          order.push({from: start, to: i, level: 0});
+        } else {
+          var pos = i, at = order.length;
+          for (++i; i < len && types[i] != "L"; ++i) {}
+          for (var j = pos; j < i;) {
+            if (countsAsNum.test(types[j])) {
+              if (pos < j) order.splice(at, 0, {from: pos, to: j, level: 1});
+              var nstart = j;
+              for (++j; j < i && countsAsNum.test(types[j]); ++j) {}
+              order.splice(at, 0, {from: nstart, to: j, level: 2});
+              pos = j;
+            } else ++j;
+          }
+          if (pos < i) order.splice(at, 0, {from: pos, to: i, level: 1});
+        }
+      }
+      if (order[0].level == 1 && (m = str.match(/^\s+/))) {
+        order[0].from = m[0].length;
+        order.unshift({from: 0, to: m[0].length, level: 0});
+      }
+      if (lst(order).level == 1 && (m = str.match(/\s+$/))) {
+        lst(order).to -= m[0].length;
+        order.push({from: len - m[0].length, to: len, level: 0});
+      }
+      if (order[0].level != lst(order).level)
+        order.push({from: len, to: len, level: order[0].level});
+
+      return order;
+    };
+  })();
+
+  // THE END
+
+  CodeMirror.version = "3.14.1";
+
+  return CodeMirror;
+})();
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/coffeescript.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/coffeescript.js
new file mode 100644
index 000000000..4f54b0c69
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/coffeescript.js
@@ -0,0 +1,348 @@
+/**
+ * Link to the project's GitHub page:
+ * https://github.com/pickhardt/coffeescript-codemirror-mode
+ */
+CodeMirror.defineMode('coffeescript', function(conf) {
+    var ERRORCLASS = 'error';
+
+    function wordRegexp(words) {
+        return new RegExp("^((" + words.join(")|(") + "))\\b");
+    }
+
+    var singleOperators = new RegExp("^[\\+\\-\\*/%&|\\^~<>!\?]");
+    var singleDelimiters = new RegExp('^[\\(\\)\\[\\]\\{\\},:`=;\\.]');
+    var doubleOperators = new RegExp("^((\->)|(\=>)|(\\+\\+)|(\\+\\=)|(\\-\\-)|(\\-\\=)|(\\*\\*)|(\\*\\=)|(\\/\\/)|(\\/\\=)|(==)|(!=)|(<=)|(>=)|(<>)|(<<)|(>>)|(//))");
+    var doubleDelimiters = new RegExp("^((\\.\\.)|(\\+=)|(\\-=)|(\\*=)|(%=)|(/=)|(&=)|(\\|=)|(\\^=))");
+    var tripleDelimiters = new RegExp("^((\\.\\.\\.)|(//=)|(>>=)|(<<=)|(\\*\\*=))");
+    var identifiers = new RegExp("^[_A-Za-z$][_A-Za-z$0-9]*");
+    var properties = new RegExp("^(@|this\.)[_A-Za-z$][_A-Za-z$0-9]*");
+
+    var wordOperators = wordRegexp(['and', 'or', 'not',
+                                    'is', 'isnt', 'in',
+                                    'instanceof', 'typeof']);
+    var indentKeywords = ['for', 'while', 'loop', 'if', 'unless', 'else',
+                          'switch', 'try', 'catch', 'finally', 'class'];
+    var commonKeywords = ['break', 'by', 'continue', 'debugger', 'delete',
+                          'do', 'in', 'of', 'new', 'return', 'then',
+                          'this', 'throw', 'when', 'until'];
+
+    var keywords = wordRegexp(indentKeywords.concat(commonKeywords));
+
+    indentKeywords = wordRegexp(indentKeywords);
+
+
+    var stringPrefixes = new RegExp("^('{3}|\"{3}|['\"])");
+    var regexPrefixes = new RegExp("^(/{3}|/)");
+    var commonConstants = ['Infinity', 'NaN', 'undefined', 'null', 'true', 'false', 'on', 'off', 'yes', 'no'];
+    var constants = wordRegexp(commonConstants);
+
+    // Tokenizers
+    function tokenBase(stream, state) {
+        // Handle scope changes
+        if (stream.sol()) {
+            var scopeOffset = state.scopes[0].offset;
+            if (stream.eatSpace()) {
+                var lineOffset = stream.indentation();
+                if (lineOffset > scopeOffset) {
+                    return 'indent';
+                } else if (lineOffset < scopeOffset) {
+                    return 'dedent';
+                }
+                return null;
+            } else {
+                if (scopeOffset > 0) {
+                    dedent(stream, state);
+                }
+            }
+        }
+        if (stream.eatSpace()) {
+            return null;
+        }
+
+        var ch = stream.peek();
+
+        // Handle docco title comment (single line)
+        if (stream.match("####")) {
+            stream.skipToEnd();
+            return 'comment';
+        }
+
+        // Handle multi line comments
+        if (stream.match("###")) {
+            state.tokenize = longComment;
+            return state.tokenize(stream, state);
+        }
+
+        // Single line comment
+        if (ch === '#') {
+            stream.skipToEnd();
+            return 'comment';
+        }
+
+        // Handle number literals
+        if (stream.match(/^-?[0-9\.]/, false)) {
+            var floatLiteral = false;
+            // Floats
+            if (stream.match(/^-?\d*\.\d+(e[\+\-]?\d+)?/i)) {
+              floatLiteral = true;
+            }
+            if (stream.match(/^-?\d+\.\d*/)) {
+              floatLiteral = true;
+            }
+            if (stream.match(/^-?\.\d+/)) {
+              floatLiteral = true;
+            }
+
+            if (floatLiteral) {
+                // prevent from getting extra . on 1..
+                if (stream.peek() == "."){
+                    stream.backUp(1);
+                }
+                return 'number';
+            }
+            // Integers
+            var intLiteral = false;
+            // Hex
+            if (stream.match(/^-?0x[0-9a-f]+/i)) {
+              intLiteral = true;
+            }
+            // Decimal
+            if (stream.match(/^-?[1-9]\d*(e[\+\-]?\d+)?/)) {
+                intLiteral = true;
+            }
+            // Zero by itself with no other piece of number.
+            if (stream.match(/^-?0(?![\dx])/i)) {
+              intLiteral = true;
+            }
+            if (intLiteral) {
+                return 'number';
+            }
+        }
+
+        // Handle strings
+        if (stream.match(stringPrefixes)) {
+            state.tokenize = tokenFactory(stream.current(), 'string');
+            return state.tokenize(stream, state);
+        }
+        // Handle regex literals
+        if (stream.match(regexPrefixes)) {
+            if (stream.current() != '/' || stream.match(/^.*\//, false)) { // prevent highlight of division
+                state.tokenize = tokenFactory(stream.current(), 'string-2');
+                return state.tokenize(stream, state);
+            } else {
+                stream.backUp(1);
+            }
+        }
+
+        // Handle operators and delimiters
+        if (stream.match(tripleDelimiters) || stream.match(doubleDelimiters)) {
+            return 'punctuation';
+        }
+        if (stream.match(doubleOperators)
+            || stream.match(singleOperators)
+            || stream.match(wordOperators)) {
+            return 'operator';
+        }
+        if (stream.match(singleDelimiters)) {
+            return 'punctuation';
+        }
+
+        if (stream.match(constants)) {
+            return 'atom';
+        }
+
+        if (stream.match(keywords)) {
+            return 'keyword';
+        }
+
+        if (stream.match(identifiers)) {
+            return 'variable';
+        }
+
+        if (stream.match(properties)) {
+            return 'property';
+        }
+
+        // Handle non-detected items
+        stream.next();
+        return ERRORCLASS;
+    }
+
+    function tokenFactory(delimiter, outclass) {
+        var singleline = delimiter.length == 1;
+        return function(stream, state) {
+            while (!stream.eol()) {
+                stream.eatWhile(/[^'"\/\\]/);
+                if (stream.eat('\\')) {
+                    stream.next();
+                    if (singleline && stream.eol()) {
+                        return outclass;
+                    }
+                } else if (stream.match(delimiter)) {
+                    state.tokenize = tokenBase;
+                    return outclass;
+                } else {
+                    stream.eat(/['"\/]/);
+                }
+            }
+            if (singleline) {
+                if (conf.mode.singleLineStringErrors) {
+                    outclass = ERRORCLASS;
+                } else {
+                    state.tokenize = tokenBase;
+                }
+            }
+            return outclass;
+        };
+    }
+
+    function longComment(stream, state) {
+        while (!stream.eol()) {
+            stream.eatWhile(/[^#]/);
+            if (stream.match("###")) {
+                state.tokenize = tokenBase;
+                break;
+            }
+            stream.eatWhile("#");
+        }
+        return "comment";
+    }
+
+    function indent(stream, state, type) {
+        type = type || 'coffee';
+        var indentUnit = 0;
+        if (type === 'coffee') {
+            for (var i = 0; i < state.scopes.length; i++) {
+                if (state.scopes[i].type === 'coffee') {
+                    indentUnit = state.scopes[i].offset + conf.indentUnit;
+                    break;
+                }
+            }
+        } else {
+            indentUnit = stream.column() + stream.current().length;
+        }
+        state.scopes.unshift({
+            offset: indentUnit,
+            type: type
+        });
+    }
+
+    function dedent(stream, state) {
+        if (state.scopes.length == 1) return;
+        if (state.scopes[0].type === 'coffee') {
+            var _indent = stream.indentation();
+            var _indent_index = -1;
+            for (var i = 0; i < state.scopes.length; ++i) {
+                if (_indent === state.scopes[i].offset) {
+                    _indent_index = i;
+                    break;
+                }
+            }
+            if (_indent_index === -1) {
+                return true;
+            }
+            while (state.scopes[0].offset !== _indent) {
+                state.scopes.shift();
+            }
+            return false;
+        } else {
+            state.scopes.shift();
+            return false;
+        }
+    }
+
+    function tokenLexer(stream, state) {
+        var style = state.tokenize(stream, state);
+        var current = stream.current();
+
+        // Handle '.' connected identifiers
+        if (current === '.') {
+            style = state.tokenize(stream, state);
+            current = stream.current();
+            if (style === 'variable') {
+                return 'variable';
+            } else {
+                return ERRORCLASS;
+            }
+        }
+
+        // Handle scope changes.
+        if (current === 'return') {
+            state.dedent += 1;
+        }
+        if (((current === '->' || current === '=>') &&
+                  !state.lambda &&
+                  state.scopes[0].type == 'coffee' &&
+                  stream.peek() === '')
+               || style === 'indent') {
+            indent(stream, state);
+        }
+        var delimiter_index = '[({'.indexOf(current);
+        if (delimiter_index !== -1) {
+            indent(stream, state, '])}'.slice(delimiter_index, delimiter_index+1));
+        }
+        if (indentKeywords.exec(current)){
+            indent(stream, state);
+        }
+        if (current == 'then'){
+            dedent(stream, state);
+        }
+
+
+        if (style === 'dedent') {
+            if (dedent(stream, state)) {
+                return ERRORCLASS;
+            }
+        }
+        delimiter_index = '])}'.indexOf(current);
+        if (delimiter_index !== -1) {
+            if (dedent(stream, state)) {
+                return ERRORCLASS;
+            }
+        }
+        if (state.dedent > 0 && stream.eol() && state.scopes[0].type == 'coffee') {
+            if (state.scopes.length > 1) state.scopes.shift();
+            state.dedent -= 1;
+        }
+
+        return style;
+    }
+
+    var external = {
+        startState: function(basecolumn) {
+            return {
+              tokenize: tokenBase,
+              scopes: [{offset:basecolumn || 0, type:'coffee'}],
+              lastToken: null,
+              lambda: false,
+              dedent: 0
+          };
+        },
+
+        token: function(stream, state) {
+            var style = tokenLexer(stream, state);
+
+            state.lastToken = {style:style, content: stream.current()};
+
+            if (stream.eol() && stream.lambda) {
+                state.lambda = false;
+            }
+
+            return style;
+        },
+
+        indent: function(state) {
+            if (state.tokenize != tokenBase) {
+                return 0;
+            }
+
+            return state.scopes[0].offset;
+        },
+
+        lineComment: "#",
+        fold: "indent"
+    };
+    return external;
+});
+
+CodeMirror.defineMIME('text/x-coffeescript', 'coffeescript');
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/comment.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/comment.js
new file mode 100644
index 000000000..cd2123e17
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/comment.js
@@ -0,0 +1,145 @@
+(function() {
+  "use strict";
+
+  var noOptions = {};
+  var nonWS = /[^\s\u00a0]/;
+  var Pos = CodeMirror.Pos;
+
+  function firstNonWS(str) {
+    var found = str.search(nonWS);
+    return found == -1 ? 0 : found;
+  }
+
+  CodeMirror.commands.toggleComment = function(cm) {
+    var from = cm.getCursor("start"), to = cm.getCursor("end");
+    cm.uncomment(from, to) || cm.lineComment(from, to);
+  };
+
+  CodeMirror.defineExtension("lineComment", function(from, to, options) {
+    if (!options) options = noOptions;
+    var self = this, mode = self.getModeAt(from);
+    var commentString = options.lineComment || mode.lineComment;
+    if (!commentString) {
+      if (options.blockCommentStart || mode.blockCommentStart) {
+        options.fullLines = true;
+        self.blockComment(from, to, options);
+      }
+      return;
+    }
+    var firstLine = self.getLine(from.line);
+    if (firstLine == null) return;
+    var end = Math.min(to.ch != 0 || to.line == from.line ? to.line + 1 : to.line, self.lastLine() + 1);
+    var pad = options.padding == null ? " " : options.padding;
+    var blankLines = options.commentBlankLines || from.line == to.line;
+
+    self.operation(function() {
+      if (options.indent) {
+        var baseString = firstLine.slice(0, firstNonWS(firstLine));
+        for (var i = from.line; i < end; ++i) {
+          var line = self.getLine(i), cut = baseString.length;
+          if (!blankLines && !nonWS.test(line)) continue;
+          if (line.slice(0, cut) != baseString) cut = firstNonWS(line);
+          self.replaceRange(baseString + commentString + pad, Pos(i, 0), Pos(i, cut));
+        }
+      } else {
+        for (var i = from.line; i < end; ++i) {
+          if (blankLines || nonWS.test(self.getLine(i)))
+            self.replaceRange(commentString + pad, Pos(i, 0));
+        }
+      }
+    });
+  });
+
+  CodeMirror.defineExtension("blockComment", function(from, to, options) {
+    if (!options) options = noOptions;
+    var self = this, mode = self.getModeAt(from);
+    var startString = options.blockCommentStart || mode.blockCommentStart;
+    var endString = options.blockCommentEnd || mode.blockCommentEnd;
+    if (!startString || !endString) {
+      if ((options.lineComment || mode.lineComment) && options.fullLines != false)
+        self.lineComment(from, to, options);
+      return;
+    }
+
+    var end = Math.min(to.line, self.lastLine());
+    if (end != from.line && to.ch == 0 && nonWS.test(self.getLine(end))) --end;
+
+    var pad = options.padding == null ? " " : options.padding;
+    if (from.line > end) return;
+
+    self.operation(function() {
+      if (options.fullLines != false) {
+        var lastLineHasText = nonWS.test(self.getLine(end));
+        self.replaceRange(pad + endString, Pos(end));
+        self.replaceRange(startString + pad, Pos(from.line, 0));
+        var lead = options.blockCommentLead || mode.blockCommentLead;
+        if (lead != null) for (var i = from.line + 1; i <= end; ++i)
+          if (i != end || lastLineHasText)
+            self.replaceRange(lead + pad, Pos(i, 0));
+      } else {
+        self.replaceRange(endString, to);
+        self.replaceRange(startString, from);
+      }
+    });
+  });
+
+  CodeMirror.defineExtension("uncomment", function(from, to, options) {
+    if (!options) options = noOptions;
+    var self = this, mode = self.getModeAt(from);
+    var end = Math.min(to.line, self.lastLine()), start = Math.min(from.line, end);
+
+    // Try finding line comments
+    var lineString = options.lineComment || mode.lineComment, lines = [];
+    var pad = options.padding == null ? " " : options.padding, didSomething;
+    lineComment: {
+      if (!lineString) break lineComment;
+      for (var i = start; i <= end; ++i) {
+        var line = self.getLine(i);
+        var found = line.indexOf(lineString);
+        if (found == -1 && (i != end || i == start) && nonWS.test(line)) break lineComment;
+        if (i != start && found > -1 && nonWS.test(line.slice(0, found))) break lineComment;
+        lines.push(line);
+      }
+      self.operation(function() {
+        for (var i = start; i <= end; ++i) {
+          var line = lines[i - start];
+          var pos = line.indexOf(lineString), endPos = pos + lineString.length;
+          if (pos < 0) continue;
+          if (line.slice(endPos, endPos + pad.length) == pad) endPos += pad.length;
+          didSomething = true;
+          self.replaceRange("", Pos(i, pos), Pos(i, endPos));
+        }
+      });
+      if (didSomething) return true;
+    }
+
+    // Try block comments
+    var startString = options.blockCommentStart || mode.blockCommentStart;
+    var endString = options.blockCommentEnd || mode.blockCommentEnd;
+    if (!startString || !endString) return false;
+    var lead = options.blockCommentLead || mode.blockCommentLead;
+    var startLine = self.getLine(start), endLine = end == start ? startLine : self.getLine(end);
+    var open = startLine.indexOf(startString), close = endLine.lastIndexOf(endString);
+    if (close == -1 && start != end) {
+      endLine = self.getLine(--end);
+      close = endLine.lastIndexOf(endString);
+    }
+    if (open == -1 || close == -1) return false;
+
+    self.operation(function() {
+      self.replaceRange("", Pos(end, close - (pad && endLine.slice(close - pad.length, close) == pad ? pad.length : 0)),
+                        Pos(end, close + endString.length));
+      var openEnd = open + startString.length;
+      if (pad && startLine.slice(openEnd, openEnd + pad.length) == pad) openEnd += pad.length;
+      self.replaceRange("", Pos(start, open), Pos(start, openEnd));
+      if (lead) for (var i = start + 1; i <= end; ++i) {
+        var line = self.getLine(i), found = line.indexOf(lead);
+        if (found == -1 || nonWS.test(line.slice(0, found))) continue;
+        var foundEnd = found + lead.length;
+        if (pad && line.slice(foundEnd, foundEnd + pad.length) == pad) foundEnd += pad.length;
+        self.replaceRange("", Pos(i, found), Pos(i, foundEnd));
+      }
+    });
+    return true;
+  });
+})();
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/css.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/css.js
new file mode 100644
index 000000000..b52e787a7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/css.js
@@ -0,0 +1,608 @@
+CodeMirror.defineMode("css", function(config) {
+  return CodeMirror.getMode(config, "text/css");
+});
+
+CodeMirror.defineMode("css-base", function(config, parserConfig) {
+  "use strict";
+
+  var indentUnit = config.indentUnit,
+      hooks = parserConfig.hooks || {},
+      atMediaTypes = parserConfig.atMediaTypes || {},
+      atMediaFeatures = parserConfig.atMediaFeatures || {},
+      propertyKeywords = parserConfig.propertyKeywords || {},
+      colorKeywords = parserConfig.colorKeywords || {},
+      valueKeywords = parserConfig.valueKeywords || {},
+      allowNested = !!parserConfig.allowNested,
+      type = null;
+
+  function ret(style, tp) { type = tp; return style; }
+
+  function tokenBase(stream, state) {
+    var ch = stream.next();
+    if (hooks[ch]) {
+      // result[0] is style and result[1] is type
+      var result = hooks[ch](stream, state);
+      if (result !== false) return result;
+    }
+    if (ch == "@") {stream.eatWhile(/[\w\\\-]/); return ret("def", stream.current());}
+    else if (ch == "=") ret(null, "compare");
+    else if ((ch == "~" || ch == "|") && stream.eat("=")) return ret(null, "compare");
+    else if (ch == "\"" || ch == "'") {
+      state.tokenize = tokenString(ch);
+      return state.tokenize(stream, state);
+    }
+    else if (ch == "#") {
+      stream.eatWhile(/[\w\\\-]/);
+      return ret("atom", "hash");
+    }
+    else if (ch == "!") {
+      stream.match(/^\s*\w*/);
+      return ret("keyword", "important");
+    }
+    else if (/\d/.test(ch)) {
+      stream.eatWhile(/[\w.%]/);
+      return ret("number", "unit");
+    }
+    else if (ch === "-") {
+      if (/\d/.test(stream.peek())) {
+        stream.eatWhile(/[\w.%]/);
+        return ret("number", "unit");
+      } else if (stream.match(/^[^-]+-/)) {
+        return ret("meta", "meta");
+      }
+    }
+    else if (/[,+>*\/]/.test(ch)) {
+      return ret(null, "select-op");
+    }
+    else if (ch == "." && stream.match(/^-?[_a-z][_a-z0-9-]*/i)) {
+      return ret("qualifier", "qualifier");
+    }
+    else if (ch == ":") {
+      return ret("operator", ch);
+    }
+    else if (/[;{}\[\]\(\)]/.test(ch)) {
+      return ret(null, ch);
+    }
+    else if (ch == "u" && stream.match("rl(")) {
+      stream.backUp(1);
+      state.tokenize = tokenParenthesized;
+      return ret("property", "variable");
+    }
+    else {
+      stream.eatWhile(/[\w\\\-]/);
+      return ret("property", "variable");
+    }
+  }
+
+  function tokenString(quote, nonInclusive) {
+    return function(stream, state) {
+      var escaped = false, ch;
+      while ((ch = stream.next()) != null) {
+        if (ch == quote && !escaped)
+          break;
+        escaped = !escaped && ch == "\\";
+      }
+      if (!escaped) {
+        if (nonInclusive) stream.backUp(1);
+        state.tokenize = tokenBase;
+      }
+      return ret("string", "string");
+    };
+  }
+
+  function tokenParenthesized(stream, state) {
+    stream.next(); // Must be '('
+    if (!stream.match(/\s*[\"\']/, false))
+      state.tokenize = tokenString(")", true);
+    else
+      state.tokenize = tokenBase;
+    return ret(null, "(");
+  }
+
+  return {
+    startState: function(base) {
+      return {tokenize: tokenBase,
+              baseIndent: base || 0,
+              stack: [],
+              lastToken: null};
+    },
+
+    token: function(stream, state) {
+
+      // Use these terms when applicable (see http://www.xanthir.com/blog/b4E50)
+      //
+      // rule** or **ruleset:
+      // A selector + braces combo, or an at-rule.
+      //
+      // declaration block:
+      // A sequence of declarations.
+      //
+      // declaration:
+      // A property + colon + value combo.
+      //
+      // property value:
+      // The entire value of a property.
+      //
+      // component value:
+      // A single piece of a property value. Like the 5px in
+      // text-shadow: 0 0 5px blue;. Can also refer to things that are
+      // multiple terms, like the 1-4 terms that make up the background-size
+      // portion of the background shorthand.
+      //
+      // term:
+      // The basic unit of author-facing CSS, like a single number (5),
+      // dimension (5px), string ("foo"), or function. Officially defined
+      //  by the CSS 2.1 grammar (look for the 'term' production)
+      //
+      //
+      // simple selector:
+      // A single atomic selector, like a type selector, an attr selector, a
+      // class selector, etc.
+      //
+      // compound selector:
+      // One or more simple selectors without a combinator. div.example is
+      // compound, div > .example is not.
+      //
+      // complex selector:
+      // One or more compound selectors chained with combinators.
+      //
+      // combinator:
+      // The parts of selectors that express relationships. There are four
+      // currently - the space (descendant combinator), the greater-than
+      // bracket (child combinator), the plus sign (next sibling combinator),
+      // and the tilda (following sibling combinator).
+      //
+      // sequence of selectors:
+      // One or more of the named type of selector chained with commas.
+
+      state.tokenize = state.tokenize || tokenBase;
+      if (state.tokenize == tokenBase && stream.eatSpace()) return null;
+      var style = state.tokenize(stream, state);
+      if (style && typeof style != "string") style = ret(style[0], style[1]);
+
+      // Changing style returned based on context
+      var context = state.stack[state.stack.length-1];
+      if (style == "variable") {
+        if (type == "variable-definition") state.stack.push("propertyValue");
+        return state.lastToken = "variable-2";
+      } else if (style == "property") {
+        var word = stream.current().toLowerCase();
+        if (context == "propertyValue") {
+          if (valueKeywords.hasOwnProperty(word)) {
+            style = "string-2";
+          } else if (colorKeywords.hasOwnProperty(word)) {
+            style = "keyword";
+          } else {
+            style = "variable-2";
+          }
+        } else if (context == "rule") {
+          if (!propertyKeywords.hasOwnProperty(word)) {
+            style += " error";
+          }
+        } else if (context == "block") {
+          // if a value is present in both property, value, or color, the order
+          // of preference is property -> color -> value
+          if (propertyKeywords.hasOwnProperty(word)) {
+            style = "property";
+          } else if (colorKeywords.hasOwnProperty(word)) {
+            style = "keyword";
+          } else if (valueKeywords.hasOwnProperty(word)) {
+            style = "string-2";
+          } else {
+            style = "tag";
+          }
+        } else if (!context || context == "@media{") {
+          style = "tag";
+        } else if (context == "@media") {
+          if (atMediaTypes[stream.current()]) {
+            style = "attribute"; // Known attribute
+          } else if (/^(only|not)$/.test(word)) {
+            style = "keyword";
+          } else if (word == "and") {
+            style = "error"; // "and" is only allowed in @mediaType
+          } else if (atMediaFeatures.hasOwnProperty(word)) {
+            style = "error"; // Known property, should be in @mediaType(
+          } else {
+            // Unknown, expecting keyword or attribute, assuming attribute
+            style = "attribute error";
+          }
+        } else if (context == "@mediaType") {
+          if (atMediaTypes.hasOwnProperty(word)) {
+            style = "attribute";
+          } else if (word == "and") {
+            style = "operator";
+          } else if (/^(only|not)$/.test(word)) {
+            style = "error"; // Only allowed in @media
+          } else {
+            // Unknown attribute or property, but expecting property (preceded
+            // by "and"). Should be in parentheses
+            style = "error";
+          }
+        } else if (context == "@mediaType(") {
+          if (propertyKeywords.hasOwnProperty(word)) {
+            // do nothing, remains "property"
+          } else if (atMediaTypes.hasOwnProperty(word)) {
+            style = "error"; // Known property, should be in parentheses
+          } else if (word == "and") {
+            style = "operator";
+          } else if (/^(only|not)$/.test(word)) {
+            style = "error"; // Only allowed in @media
+          } else {
+            style += " error";
+          }
+        } else if (context == "@import") {
+          style = "tag";
+        } else {
+          style = "error";
+        }
+      } else if (style == "atom") {
+        if(!context || context == "@media{" || context == "block") {
+          style = "builtin";
+        } else if (context == "propertyValue") {
+          if (!/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(stream.current())) {
+            style += " error";
+          }
+        } else {
+          style = "error";
+        }
+      } else if (context == "@media" && type == "{") {
+        style = "error";
+      }
+
+      // Push/pop context stack
+      if (type == "{") {
+        if (context == "@media" || context == "@mediaType") {
+          state.stack.pop();
+          state.stack[state.stack.length-1] = "@media{";
+        }
+        else {
+          var newContext = allowNested ? "block" : "rule";
+          state.stack.push(newContext);
+        }
+      }
+      else if (type == "}") {
+        var lastState = state.stack[state.stack.length - 1];
+        if (lastState == "interpolation") style = "operator";
+        state.stack.pop();
+        if (context == "propertyValue") state.stack.pop();
+      }
+      else if (type == "interpolation") state.stack.push("interpolation");
+      else if (type == "@media") state.stack.push("@media");
+      else if (type == "@import") state.stack.push("@import");
+      else if (context == "@media" && /\b(keyword|attribute)\b/.test(style))
+        state.stack.push("@mediaType");
+      else if (context == "@mediaType" && stream.current() == ",") state.stack.pop();
+      else if (context == "@mediaType" && type == "(") state.stack.push("@mediaType(");
+      else if (context == "@mediaType(" && type == ")") state.stack.pop();
+      else if (type == ":" && state.lastToken == "property") state.stack.push("propertyValue");
+      else if (context == "propertyValue" && type == ";") state.stack.pop();
+      else if (context == "@import" && type == ";") state.stack.pop();
+      return state.lastToken = style;
+    },
+
+    indent: function(state, textAfter) {
+      var n = state.stack.length;
+      if (/^\}/.test(textAfter))
+        n -= state.stack[state.stack.length-1] == "propertyValue" ? 2 : 1;
+      return state.baseIndent + n * indentUnit;
+    },
+
+    electricChars: "}",
+    blockCommentStart: "/*",
+    blockCommentEnd: "*/",
+    fold: "brace"
+  };
+});
+
+(function() {
+  function keySet(array) {
+    var keys = {};
+    for (var i = 0; i < array.length; ++i) {
+      keys[array[i]] = true;
+    }
+    return keys;
+  }
+
+  var atMediaTypes = keySet([
+    "all", "aural", "braille", "handheld", "print", "projection", "screen",
+    "tty", "tv", "embossed"
+  ]);
+
+  var atMediaFeatures = keySet([
+    "width", "min-width", "max-width", "height", "min-height", "max-height",
+    "device-width", "min-device-width", "max-device-width", "device-height",
+    "min-device-height", "max-device-height", "aspect-ratio",
+    "min-aspect-ratio", "max-aspect-ratio", "device-aspect-ratio",
+    "min-device-aspect-ratio", "max-device-aspect-ratio", "color", "min-color",
+    "max-color", "color-index", "min-color-index", "max-color-index",
+    "monochrome", "min-monochrome", "max-monochrome", "resolution",
+    "min-resolution", "max-resolution", "scan", "grid"
+  ]);
+
+  var propertyKeywords = keySet([
+    "align-content", "align-items", "align-self", "alignment-adjust",
+    "alignment-baseline", "anchor-point", "animation", "animation-delay",
+    "animation-direction", "animation-duration", "animation-iteration-count",
+    "animation-name", "animation-play-state", "animation-timing-function",
+    "appearance", "azimuth", "backface-visibility", "background",
+    "background-attachment", "background-clip", "background-color",
+    "background-image", "background-origin", "background-position",
+    "background-repeat", "background-size", "baseline-shift", "binding",
+    "bleed", "bookmark-label", "bookmark-level", "bookmark-state",
+    "bookmark-target", "border", "border-bottom", "border-bottom-color",
+    "border-bottom-left-radius", "border-bottom-right-radius",
+    "border-bottom-style", "border-bottom-width", "border-collapse",
+    "border-color", "border-image", "border-image-outset",
+    "border-image-repeat", "border-image-slice", "border-image-source",
+    "border-image-width", "border-left", "border-left-color",
+    "border-left-style", "border-left-width", "border-radius", "border-right",
+    "border-right-color", "border-right-style", "border-right-width",
+    "border-spacing", "border-style", "border-top", "border-top-color",
+    "border-top-left-radius", "border-top-right-radius", "border-top-style",
+    "border-top-width", "border-width", "bottom", "box-decoration-break",
+    "box-shadow", "box-sizing", "break-after", "break-before", "break-inside",
+    "caption-side", "clear", "clip", "color", "color-profile", "column-count",
+    "column-fill", "column-gap", "column-rule", "column-rule-color",
+    "column-rule-style", "column-rule-width", "column-span", "column-width",
+    "columns", "content", "counter-increment", "counter-reset", "crop", "cue",
+    "cue-after", "cue-before", "cursor", "direction", "display",
+    "dominant-baseline", "drop-initial-after-adjust",
+    "drop-initial-after-align", "drop-initial-before-adjust",
+    "drop-initial-before-align", "drop-initial-size", "drop-initial-value",
+    "elevation", "empty-cells", "fit", "fit-position", "flex", "flex-basis",
+    "flex-direction", "flex-flow", "flex-grow", "flex-shrink", "flex-wrap",
+    "float", "float-offset", "font", "font-feature-settings", "font-family",
+    "font-kerning", "font-language-override", "font-size", "font-size-adjust",
+    "font-stretch", "font-style", "font-synthesis", "font-variant",
+    "font-variant-alternates", "font-variant-caps", "font-variant-east-asian",
+    "font-variant-ligatures", "font-variant-numeric", "font-variant-position",
+    "font-weight", "grid-cell", "grid-column", "grid-column-align",
+    "grid-column-sizing", "grid-column-span", "grid-columns", "grid-flow",
+    "grid-row", "grid-row-align", "grid-row-sizing", "grid-row-span",
+    "grid-rows", "grid-template", "hanging-punctuation", "height", "hyphens",
+    "icon", "image-orientation", "image-rendering", "image-resolution",
+    "inline-box-align", "justify-content", "left", "letter-spacing",
+    "line-break", "line-height", "line-stacking", "line-stacking-ruby",
+    "line-stacking-shift", "line-stacking-strategy", "list-style",
+    "list-style-image", "list-style-position", "list-style-type", "margin",
+    "margin-bottom", "margin-left", "margin-right", "margin-top",
+    "marker-offset", "marks", "marquee-direction", "marquee-loop",
+    "marquee-play-count", "marquee-speed", "marquee-style", "max-height",
+    "max-width", "min-height", "min-width", "move-to", "nav-down", "nav-index",
+    "nav-left", "nav-right", "nav-up", "opacity", "order", "orphans", "outline",
+    "outline-color", "outline-offset", "outline-style", "outline-width",
+    "overflow", "overflow-style", "overflow-wrap", "overflow-x", "overflow-y",
+    "padding", "padding-bottom", "padding-left", "padding-right", "padding-top",
+    "page", "page-break-after", "page-break-before", "page-break-inside",
+    "page-policy", "pause", "pause-after", "pause-before", "perspective",
+    "perspective-origin", "pitch", "pitch-range", "play-during", "position",
+    "presentation-level", "punctuation-trim", "quotes", "rendering-intent",
+    "resize", "rest", "rest-after", "rest-before", "richness", "right",
+    "rotation", "rotation-point", "ruby-align", "ruby-overhang",
+    "ruby-position", "ruby-span", "size", "speak", "speak-as", "speak-header",
+    "speak-numeral", "speak-punctuation", "speech-rate", "stress", "string-set",
+    "tab-size", "table-layout", "target", "target-name", "target-new",
+    "target-position", "text-align", "text-align-last", "text-decoration",
+    "text-decoration-color", "text-decoration-line", "text-decoration-skip",
+    "text-decoration-style", "text-emphasis", "text-emphasis-color",
+    "text-emphasis-position", "text-emphasis-style", "text-height",
+    "text-indent", "text-justify", "text-outline", "text-shadow",
+    "text-space-collapse", "text-transform", "text-underline-position",
+    "text-wrap", "top", "transform", "transform-origin", "transform-style",
+    "transition", "transition-delay", "transition-duration",
+    "transition-property", "transition-timing-function", "unicode-bidi",
+    "vertical-align", "visibility", "voice-balance", "voice-duration",
+    "voice-family", "voice-pitch", "voice-range", "voice-rate", "voice-stress",
+    "voice-volume", "volume", "white-space", "widows", "width", "word-break",
+    "word-spacing", "word-wrap", "z-index",
+    // SVG-specific
+    "clip-path", "clip-rule", "mask", "enable-background", "filter", "flood-color",
+    "flood-opacity", "lighting-color", "stop-color", "stop-opacity", "pointer-events",
+    "color-interpolation", "color-interpolation-filters", "color-profile",
+    "color-rendering", "fill", "fill-opacity", "fill-rule", "image-rendering",
+    "marker", "marker-end", "marker-mid", "marker-start", "shape-rendering", "stroke",
+    "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin",
+    "stroke-miterlimit", "stroke-opacity", "stroke-width", "text-rendering",
+    "baseline-shift", "dominant-baseline", "glyph-orientation-horizontal",
+    "glyph-orientation-vertical", "kerning", "text-anchor", "writing-mode"
+  ]);
+
+  var colorKeywords = keySet([
+    "aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige",
+    "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown",
+    "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue",
+    "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod",
+    "darkgray", "darkgreen", "darkkhaki", "darkmagenta", "darkolivegreen",
+    "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen",
+    "darkslateblue", "darkslategray", "darkturquoise", "darkviolet",
+    "deeppink", "deepskyblue", "dimgray", "dodgerblue", "firebrick",
+    "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite",
+    "gold", "goldenrod", "gray", "green", "greenyellow", "honeydew",
+    "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender",
+    "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral",
+    "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightpink",
+    "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray",
+    "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta",
+    "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple",
+    "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise",
+    "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin",
+    "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered",
+    "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred",
+    "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue",
+    "purple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon",
+    "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue",
+    "slateblue", "slategray", "snow", "springgreen", "steelblue", "tan",
+    "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white",
+    "whitesmoke", "yellow", "yellowgreen"
+  ]);
+
+  var valueKeywords = keySet([
+    "above", "absolute", "activeborder", "activecaption", "afar",
+    "after-white-space", "ahead", "alias", "all", "all-scroll", "alternate",
+    "always", "amharic", "amharic-abegede", "antialiased", "appworkspace",
+    "arabic-indic", "armenian", "asterisks", "auto", "avoid", "background",
+    "backwards", "baseline", "below", "bidi-override", "binary", "bengali",
+    "blink", "block", "block-axis", "bold", "bolder", "border", "border-box",
+    "both", "bottom", "break-all", "break-word", "button", "button-bevel",
+    "buttonface", "buttonhighlight", "buttonshadow", "buttontext", "cambodian",
+    "capitalize", "caps-lock-indicator", "caption", "captiontext", "caret",
+    "cell", "center", "checkbox", "circle", "cjk-earthly-branch",
+    "cjk-heavenly-stem", "cjk-ideographic", "clear", "clip", "close-quote",
+    "col-resize", "collapse", "compact", "condensed", "contain", "content",
+    "content-box", "context-menu", "continuous", "copy", "cover", "crop",
+    "cross", "crosshair", "currentcolor", "cursive", "dashed", "decimal",
+    "decimal-leading-zero", "default", "default-button", "destination-atop",
+    "destination-in", "destination-out", "destination-over", "devanagari",
+    "disc", "discard", "document", "dot-dash", "dot-dot-dash", "dotted",
+    "double", "down", "e-resize", "ease", "ease-in", "ease-in-out", "ease-out",
+    "element", "ellipsis", "embed", "end", "ethiopic", "ethiopic-abegede",
+    "ethiopic-abegede-am-et", "ethiopic-abegede-gez", "ethiopic-abegede-ti-er",
+    "ethiopic-abegede-ti-et", "ethiopic-halehame-aa-er",
+    "ethiopic-halehame-aa-et", "ethiopic-halehame-am-et",
+    "ethiopic-halehame-gez", "ethiopic-halehame-om-et",
+    "ethiopic-halehame-sid-et", "ethiopic-halehame-so-et",
+    "ethiopic-halehame-ti-er", "ethiopic-halehame-ti-et",
+    "ethiopic-halehame-tig", "ew-resize", "expanded", "extra-condensed",
+    "extra-expanded", "fantasy", "fast", "fill", "fixed", "flat", "footnotes",
+    "forwards", "from", "geometricPrecision", "georgian", "graytext", "groove",
+    "gujarati", "gurmukhi", "hand", "hangul", "hangul-consonant", "hebrew",
+    "help", "hidden", "hide", "higher", "highlight", "highlighttext",
+    "hiragana", "hiragana-iroha", "horizontal", "hsl", "hsla", "icon", "ignore",
+    "inactiveborder", "inactivecaption", "inactivecaptiontext", "infinite",
+    "infobackground", "infotext", "inherit", "initial", "inline", "inline-axis",
+    "inline-block", "inline-table", "inset", "inside", "intrinsic", "invert",
+    "italic", "justify", "kannada", "katakana", "katakana-iroha", "khmer",
+    "landscape", "lao", "large", "larger", "left", "level", "lighter",
+    "line-through", "linear", "lines", "list-item", "listbox", "listitem",
+    "local", "logical", "loud", "lower", "lower-alpha", "lower-armenian",
+    "lower-greek", "lower-hexadecimal", "lower-latin", "lower-norwegian",
+    "lower-roman", "lowercase", "ltr", "malayalam", "match",
+    "media-controls-background", "media-current-time-display",
+    "media-fullscreen-button", "media-mute-button", "media-play-button",
+    "media-return-to-realtime-button", "media-rewind-button",
+    "media-seek-back-button", "media-seek-forward-button", "media-slider",
+    "media-sliderthumb", "media-time-remaining-display", "media-volume-slider",
+    "media-volume-slider-container", "media-volume-sliderthumb", "medium",
+    "menu", "menulist", "menulist-button", "menulist-text",
+    "menulist-textfield", "menutext", "message-box", "middle", "min-intrinsic",
+    "mix", "mongolian", "monospace", "move", "multiple", "myanmar", "n-resize",
+    "narrower", "ne-resize", "nesw-resize", "no-close-quote", "no-drop",
+    "no-open-quote", "no-repeat", "none", "normal", "not-allowed", "nowrap",
+    "ns-resize", "nw-resize", "nwse-resize", "oblique", "octal", "open-quote",
+    "optimizeLegibility", "optimizeSpeed", "oriya", "oromo", "outset",
+    "outside", "overlay", "overline", "padding", "padding-box", "painted",
+    "paused", "persian", "plus-darker", "plus-lighter", "pointer", "portrait",
+    "pre", "pre-line", "pre-wrap", "preserve-3d", "progress", "push-button",
+    "radio", "read-only", "read-write", "read-write-plaintext-only", "relative",
+    "repeat", "repeat-x", "repeat-y", "reset", "reverse", "rgb", "rgba",
+    "ridge", "right", "round", "row-resize", "rtl", "run-in", "running",
+    "s-resize", "sans-serif", "scroll", "scrollbar", "se-resize", "searchfield",
+    "searchfield-cancel-button", "searchfield-decoration",
+    "searchfield-results-button", "searchfield-results-decoration",
+    "semi-condensed", "semi-expanded", "separate", "serif", "show", "sidama",
+    "single", "skip-white-space", "slide", "slider-horizontal",
+    "slider-vertical", "sliderthumb-horizontal", "sliderthumb-vertical", "slow",
+    "small", "small-caps", "small-caption", "smaller", "solid", "somali",
+    "source-atop", "source-in", "source-out", "source-over", "space", "square",
+    "square-button", "start", "static", "status-bar", "stretch", "stroke",
+    "sub", "subpixel-antialiased", "super", "sw-resize", "table",
+    "table-caption", "table-cell", "table-column", "table-column-group",
+    "table-footer-group", "table-header-group", "table-row", "table-row-group",
+    "telugu", "text", "text-bottom", "text-top", "textarea", "textfield", "thai",
+    "thick", "thin", "threeddarkshadow", "threedface", "threedhighlight",
+    "threedlightshadow", "threedshadow", "tibetan", "tigre", "tigrinya-er",
+    "tigrinya-er-abegede", "tigrinya-et", "tigrinya-et-abegede", "to", "top",
+    "transparent", "ultra-condensed", "ultra-expanded", "underline", "up",
+    "upper-alpha", "upper-armenian", "upper-greek", "upper-hexadecimal",
+    "upper-latin", "upper-norwegian", "upper-roman", "uppercase", "urdu", "url",
+    "vertical", "vertical-text", "visible", "visibleFill", "visiblePainted",
+    "visibleStroke", "visual", "w-resize", "wait", "wave", "wider",
+    "window", "windowframe", "windowtext", "x-large", "x-small", "xor",
+    "xx-large", "xx-small"
+  ]);
+
+  function tokenCComment(stream, state) {
+    var maybeEnd = false, ch;
+    while ((ch = stream.next()) != null) {
+      if (maybeEnd && ch == "/") {
+        state.tokenize = null;
+        break;
+      }
+      maybeEnd = (ch == "*");
+    }
+    return ["comment", "comment"];
+  }
+
+  CodeMirror.defineMIME("text/css", {
+    atMediaTypes: atMediaTypes,
+    atMediaFeatures: atMediaFeatures,
+    propertyKeywords: propertyKeywords,
+    colorKeywords: colorKeywords,
+    valueKeywords: valueKeywords,
+    hooks: {
+      "<": function(stream, state) {
+        function tokenSGMLComment(stream, state) {
+          var dashes = 0, ch;
+          while ((ch = stream.next()) != null) {
+            if (dashes >= 2 && ch == ">") {
+              state.tokenize = null;
+              break;
+            }
+            dashes = (ch == "-") ? dashes + 1 : 0;
+          }
+          return ["comment", "comment"];
+        }
+        if (stream.eat("!")) {
+          state.tokenize = tokenSGMLComment;
+          return tokenSGMLComment(stream, state);
+        }
+      },
+      "/": function(stream, state) {
+        if (stream.eat("*")) {
+          state.tokenize = tokenCComment;
+          return tokenCComment(stream, state);
+        }
+        return false;
+      }
+    },
+    name: "css-base"
+  });
+
+  CodeMirror.defineMIME("text/x-scss", {
+    atMediaTypes: atMediaTypes,
+    atMediaFeatures: atMediaFeatures,
+    propertyKeywords: propertyKeywords,
+    colorKeywords: colorKeywords,
+    valueKeywords: valueKeywords,
+    allowNested: true,
+    hooks: {
+      "$": function(stream) {
+        stream.match(/^[\w-]+/);
+        if (stream.peek() == ":") {
+          return ["variable", "variable-definition"];
+        }
+        return ["variable", "variable"];
+      },
+      "/": function(stream, state) {
+        if (stream.eat("/")) {
+          stream.skipToEnd();
+          return ["comment", "comment"];
+        } else if (stream.eat("*")) {
+          state.tokenize = tokenCComment;
+          return tokenCComment(stream, state);
+        } else {
+          return ["operator", "operator"];
+        }
+      },
+      "#": function(stream) {
+        if (stream.eat("{")) {
+          return ["operator", "interpolation"];
+        } else {
+          stream.eatWhile(/[\w\\\-]/);
+          return ["atom", "hash"];
+        }
+      }
+    },
+    name: "css-base"
+  });
+})();
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/htmlmixed.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/htmlmixed.js
new file mode 100644
index 000000000..ec0c21d24
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/htmlmixed.js
@@ -0,0 +1,104 @@
+CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
+  var htmlMode = CodeMirror.getMode(config, {name: "xml", htmlMode: true});
+  var cssMode = CodeMirror.getMode(config, "css");
+
+  var scriptTypes = [], scriptTypesConf = parserConfig && parserConfig.scriptTypes;
+  scriptTypes.push({matches: /^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^$/i,
+                    mode: CodeMirror.getMode(config, "javascript")});
+  if (scriptTypesConf) for (var i = 0; i < scriptTypesConf.length; ++i) {
+    var conf = scriptTypesConf[i];
+    scriptTypes.push({matches: conf.matches, mode: conf.mode && CodeMirror.getMode(config, conf.mode)});
+  }
+  scriptTypes.push({matches: /./,
+                    mode: CodeMirror.getMode(config, "text/plain")});
+
+  function html(stream, state) {
+    var tagName = state.htmlState.tagName;
+    var style = htmlMode.token(stream, state.htmlState);
+    if (tagName == "script" && /\btag\b/.test(style) && stream.current() == ">") {
+      // Script block: mode to change to depends on type attribute
+      var scriptType = stream.string.slice(Math.max(0, stream.pos - 100), stream.pos).match(/\btype\s*=\s*("[^"]+"|'[^']+'|\S+)[^<]*$/i);
+      scriptType = scriptType ? scriptType[1] : "";
+      if (scriptType && /[\"\']/.test(scriptType.charAt(0))) scriptType = scriptType.slice(1, scriptType.length - 1);
+      for (var i = 0; i < scriptTypes.length; ++i) {
+        var tp = scriptTypes[i];
+        if (typeof tp.matches == "string" ? scriptType == tp.matches : tp.matches.test(scriptType)) {
+          if (tp.mode) {
+            state.token = script;
+            state.localMode = tp.mode;
+            state.localState = tp.mode.startState && tp.mode.startState(htmlMode.indent(state.htmlState, ""));
+          }
+          break;
+        }
+      }
+    } else if (tagName == "style" && /\btag\b/.test(style) && stream.current() == ">") {
+      state.token = css;
+      state.localMode = cssMode;
+      state.localState = cssMode.startState(htmlMode.indent(state.htmlState, ""));
+    }
+    return style;
+  }
+  function maybeBackup(stream, pat, style) {
+    var cur = stream.current();
+    var close = cur.search(pat), m;
+    if (close > -1) stream.backUp(cur.length - close);
+    else if (m = cur.match(/<\/?$/)) {
+      stream.backUp(cur.length);
+      if (!stream.match(pat, false)) stream.match(cur[0]);
+    }
+    return style;
+  }
+  function script(stream, state) {
+    if (stream.match(/^<\/\s*script\s*>/i, false)) {
+      state.token = html;
+      state.localState = state.localMode = null;
+      return html(stream, state);
+    }
+    return maybeBackup(stream, /<\/\s*script\s*>/,
+                       state.localMode.token(stream, state.localState));
+  }
+  function css(stream, state) {
+    if (stream.match(/^<\/\s*style\s*>/i, false)) {
+      state.token = html;
+      state.localState = state.localMode = null;
+      return html(stream, state);
+    }
+    return maybeBackup(stream, /<\/\s*style\s*>/,
+                       cssMode.token(stream, state.localState));
+  }
+
+  return {
+    startState: function() {
+      var state = htmlMode.startState();
+      return {token: html, localMode: null, localState: null, htmlState: state};
+    },
+
+    copyState: function(state) {
+      if (state.localState)
+        var local = CodeMirror.copyState(state.localMode, state.localState);
+      return {token: state.token, localMode: state.localMode, localState: local,
+              htmlState: CodeMirror.copyState(htmlMode, state.htmlState)};
+    },
+
+    token: function(stream, state) {
+      return state.token(stream, state);
+    },
+
+    indent: function(state, textAfter) {
+      if (!state.localMode || /^\s*<\//.test(textAfter))
+        return htmlMode.indent(state.htmlState, textAfter);
+      else if (state.localMode.indent)
+        return state.localMode.indent(state.localState, textAfter);
+      else
+        return CodeMirror.Pass;
+    },
+
+    electricChars: "/{}:",
+
+    innerMode: function(state) {
+      return {state: state.localState || state.htmlState, mode: state.localMode || htmlMode};
+    }
+  };
+}, "xml", "javascript", "css");
+
+CodeMirror.defineMIME("text/html", "htmlmixed");
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/javascript.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/javascript.js
new file mode 100644
index 000000000..3d04603c2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/javascript.js
@@ -0,0 +1,478 @@
+// TODO actually recognize syntax of TypeScript constructs
+
+CodeMirror.defineMode("javascript", function(config, parserConfig) {
+  var indentUnit = config.indentUnit;
+  var statementIndent = parserConfig.statementIndent;
+  var jsonMode = parserConfig.json;
+  var isTS = parserConfig.typescript;
+
+  // Tokenizer
+
+  var keywords = function(){
+    function kw(type) {return {type: type, style: "keyword"};}
+    var A = kw("keyword a"), B = kw("keyword b"), C = kw("keyword c");
+    var operator = kw("operator"), atom = {type: "atom", style: "atom"};
+
+    var jsKeywords = {
+      "if": kw("if"), "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B,
+      "return": C, "break": C, "continue": C, "new": C, "delete": C, "throw": C,
+      "var": kw("var"), "const": kw("var"), "let": kw("var"),
+      "function": kw("function"), "catch": kw("catch"),
+      "for": kw("for"), "switch": kw("switch"), "case": kw("case"), "default": kw("default"),
+      "in": operator, "typeof": operator, "instanceof": operator,
+      "true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Infinity": atom,
+      "this": kw("this")
+    };
+
+    // Extend the 'normal' keywords with the TypeScript language extensions
+    if (isTS) {
+      var type = {type: "variable", style: "variable-3"};
+      var tsKeywords = {
+        // object-like things
+        "interface": kw("interface"),
+        "class": kw("class"),
+        "extends": kw("extends"),
+        "constructor": kw("constructor"),
+
+        // scope modifiers
+        "public": kw("public"),
+        "private": kw("private"),
+        "protected": kw("protected"),
+        "static": kw("static"),
+
+        "super": kw("super"),
+
+        // types
+        "string": type, "number": type, "bool": type, "any": type
+      };
+
+      for (var attr in tsKeywords) {
+        jsKeywords[attr] = tsKeywords[attr];
+      }
+    }
+
+    return jsKeywords;
+  }();
+
+  var isOperatorChar = /[+\-*&%=<>!?|~^]/;
+
+  function chain(stream, state, f) {
+    state.tokenize = f;
+    return f(stream, state);
+  }
+
+  function nextUntilUnescaped(stream, end) {
+    var escaped = false, next;
+    while ((next = stream.next()) != null) {
+      if (next == end && !escaped)
+        return false;
+      escaped = !escaped && next == "\\";
+    }
+    return escaped;
+  }
+
+  // Used as scratch variables to communicate multiple values without
+  // consing up tons of objects.
+  var type, content;
+  function ret(tp, style, cont) {
+    type = tp; content = cont;
+    return style;
+  }
+
+  function jsTokenBase(stream, state) {
+    var ch = stream.next();
+    if (ch == '"' || ch == "'")
+      return chain(stream, state, jsTokenString(ch));
+    else if (/[\[\]{}\(\),;\:\.]/.test(ch))
+      return ret(ch);
+    else if (ch == "0" && stream.eat(/x/i)) {
+      stream.eatWhile(/[\da-f]/i);
+      return ret("number", "number");
+    }
+    else if (/\d/.test(ch) || ch == "-" && stream.eat(/\d/)) {
+      stream.match(/^\d*(?:\.\d*)?(?:[eE][+\-]?\d+)?/);
+      return ret("number", "number");
+    }
+    else if (ch == "/") {
+      if (stream.eat("*")) {
+        return chain(stream, state, jsTokenComment);
+      }
+      else if (stream.eat("/")) {
+        stream.skipToEnd();
+        return ret("comment", "comment");
+      }
+      else if (state.lastType == "operator" || state.lastType == "keyword c" ||
+               /^[\[{}\(,;:]$/.test(state.lastType)) {
+        nextUntilUnescaped(stream, "/");
+        stream.eatWhile(/[gimy]/); // 'y' is "sticky" option in Mozilla
+        return ret("regexp", "string-2");
+      }
+      else {
+        stream.eatWhile(isOperatorChar);
+        return ret("operator", null, stream.current());
+      }
+    }
+    else if (ch == "#") {
+      stream.skipToEnd();
+      return ret("error", "error");
+    }
+    else if (isOperatorChar.test(ch)) {
+      stream.eatWhile(isOperatorChar);
+      return ret("operator", null, stream.current());
+    }
+    else {
+      stream.eatWhile(/[\w\$_]/);
+      var word = stream.current(), known = keywords.propertyIsEnumerable(word) && keywords[word];
+      return (known && state.lastType != ".") ? ret(known.type, known.style, word) :
+                     ret("variable", "variable", word);
+    }
+  }
+
+  function jsTokenString(quote) {
+    return function(stream, state) {
+      if (!nextUntilUnescaped(stream, quote))
+        state.tokenize = jsTokenBase;
+      return ret("string", "string");
+    };
+  }
+
+  function jsTokenComment(stream, state) {
+    var maybeEnd = false, ch;
+    while (ch = stream.next()) {
+      if (ch == "/" && maybeEnd) {
+        state.tokenize = jsTokenBase;
+        break;
+      }
+      maybeEnd = (ch == "*");
+    }
+    return ret("comment", "comment");
+  }
+
+  // Parser
+
+  var atomicTypes = {"atom": true, "number": true, "variable": true, "string": true, "regexp": true, "this": true};
+
+  function JSLexical(indented, column, type, align, prev, info) {
+    this.indented = indented;
+    this.column = column;
+    this.type = type;
+    this.prev = prev;
+    this.info = info;
+    if (align != null) this.align = align;
+  }
+
+  function inScope(state, varname) {
+    for (var v = state.localVars; v; v = v.next)
+      if (v.name == varname) return true;
+  }
+
+  function parseJS(state, style, type, content, stream) {
+    var cc = state.cc;
+    // Communicate our context to the combinators.
+    // (Less wasteful than consing up a hundred closures on every call.)
+    cx.state = state; cx.stream = stream; cx.marked = null, cx.cc = cc;
+
+    if (!state.lexical.hasOwnProperty("align"))
+      state.lexical.align = true;
+
+    while(true) {
+      var combinator = cc.length ? cc.pop() : jsonMode ? expression : statement;
+      if (combinator(type, content)) {
+        while(cc.length && cc[cc.length - 1].lex)
+          cc.pop()();
+        if (cx.marked) return cx.marked;
+        if (type == "variable" && inScope(state, content)) return "variable-2";
+        return style;
+      }
+    }
+  }
+
+  // Combinator utils
+
+  var cx = {state: null, column: null, marked: null, cc: null};
+  function pass() {
+    for (var i = arguments.length - 1; i >= 0; i--) cx.cc.push(arguments[i]);
+  }
+  function cont() {
+    pass.apply(null, arguments);
+    return true;
+  }
+  function register(varname) {
+    function inList(list) {
+      for (var v = list; v; v = v.next)
+        if (v.name == varname) return true;
+      return false;
+    }
+    var state = cx.state;
+    if (state.context) {
+      cx.marked = "def";
+      if (inList(state.localVars)) return;
+      state.localVars = {name: varname, next: state.localVars};
+    } else {
+      if (inList(state.globalVars)) return;
+      state.globalVars = {name: varname, next: state.globalVars};
+    }
+  }
+
+  // Combinators
+
+  var defaultVars = {name: "this", next: {name: "arguments"}};
+  function pushcontext() {
+    cx.state.context = {prev: cx.state.context, vars: cx.state.localVars};
+    cx.state.localVars = defaultVars;
+  }
+  function popcontext() {
+    cx.state.localVars = cx.state.context.vars;
+    cx.state.context = cx.state.context.prev;
+  }
+  function pushlex(type, info) {
+    var result = function() {
+      var state = cx.state, indent = state.indented;
+      if (state.lexical.type == "stat") indent = state.lexical.indented;
+      state.lexical = new JSLexical(indent, cx.stream.column(), type, null, state.lexical, info);
+    };
+    result.lex = true;
+    return result;
+  }
+  function poplex() {
+    var state = cx.state;
+    if (state.lexical.prev) {
+      if (state.lexical.type == ")")
+        state.indented = state.lexical.indented;
+      state.lexical = state.lexical.prev;
+    }
+  }
+  poplex.lex = true;
+
+  function expect(wanted) {
+    return function(type) {
+      if (type == wanted) return cont();
+      else if (wanted == ";") return pass();
+      else return cont(arguments.callee);
+    };
+  }
+
+  function statement(type) {
+    if (type == "var") return cont(pushlex("vardef"), vardef1, expect(";"), poplex);
+    if (type == "keyword a") return cont(pushlex("form"), expression, statement, poplex);
+    if (type == "keyword b") return cont(pushlex("form"), statement, poplex);
+    if (type == "{") return cont(pushlex("}"), block, poplex);
+    if (type == ";") return cont();
+    if (type == "if") return cont(pushlex("form"), expression, statement, poplex, maybeelse);
+    if (type == "function") return cont(functiondef);
+    if (type == "for") return cont(pushlex("form"), expect("("), pushlex(")"), forspec1, expect(")"),
+                                   poplex, statement, poplex);
+    if (type == "variable") return cont(pushlex("stat"), maybelabel);
+    if (type == "switch") return cont(pushlex("form"), expression, pushlex("}", "switch"), expect("{"),
+                                      block, poplex, poplex);
+    if (type == "case") return cont(expression, expect(":"));
+    if (type == "default") return cont(expect(":"));
+    if (type == "catch") return cont(pushlex("form"), pushcontext, expect("("), funarg, expect(")"),
+                                     statement, poplex, popcontext);
+    return pass(pushlex("stat"), expression, expect(";"), poplex);
+  }
+  function expression(type) {
+    return expressionInner(type, false);
+  }
+  function expressionNoComma(type) {
+    return expressionInner(type, true);
+  }
+  function expressionInner(type, noComma) {
+    var maybeop = noComma ? maybeoperatorNoComma : maybeoperatorComma;
+    if (atomicTypes.hasOwnProperty(type)) return cont(maybeop);
+    if (type == "function") return cont(functiondef);
+    if (type == "keyword c") return cont(noComma ? maybeexpressionNoComma : maybeexpression);
+    if (type == "(") return cont(pushlex(")"), maybeexpression, expect(")"), poplex, maybeop);
+    if (type == "operator") return cont(noComma ? expressionNoComma : expression);
+    if (type == "[") return cont(pushlex("]"), commasep(expressionNoComma, "]"), poplex, maybeop);
+    if (type == "{") return cont(pushlex("}"), commasep(objprop, "}"), poplex, maybeop);
+    return cont();
+  }
+  function maybeexpression(type) {
+    if (type.match(/[;\}\)\],]/)) return pass();
+    return pass(expression);
+  }
+  function maybeexpressionNoComma(type) {
+    if (type.match(/[;\}\)\],]/)) return pass();
+    return pass(expressionNoComma);
+  }
+
+  function maybeoperatorComma(type, value) {
+    if (type == ",") return cont(expression);
+    return maybeoperatorNoComma(type, value, maybeoperatorComma);
+  }
+  function maybeoperatorNoComma(type, value, me) {
+    if (!me) me = maybeoperatorNoComma;
+    if (type == "operator") {
+      if (/\+\+|--/.test(value)) return cont(me);
+      if (value == "?") return cont(expression, expect(":"), expression);
+      return cont(expression);
+    }
+    if (type == ";") return;
+    if (type == "(") return cont(pushlex(")", "call"), commasep(expressionNoComma, ")"), poplex, me);
+    if (type == ".") return cont(property, me);
+    if (type == "[") return cont(pushlex("]"), maybeexpression, expect("]"), poplex, me);
+  }
+  function maybelabel(type) {
+    if (type == ":") return cont(poplex, statement);
+    return pass(maybeoperatorComma, expect(";"), poplex);
+  }
+  function property(type) {
+    if (type == "variable") {cx.marked = "property"; return cont();}
+  }
+  function objprop(type, value) {
+    if (type == "variable") {
+      cx.marked = "property";
+      if (value == "get" || value == "set") return cont(getterSetter);
+    } else if (type == "number" || type == "string") {
+      cx.marked = type + " property";
+    }
+    if (atomicTypes.hasOwnProperty(type)) return cont(expect(":"), expressionNoComma);
+  }
+  function getterSetter(type) {
+    if (type == ":") return cont(expression);
+    if (type != "variable") return cont(expect(":"), expression);
+    cx.marked = "property";
+    return cont(functiondef);
+  }
+  function commasep(what, end) {
+    function proceed(type) {
+      if (type == ",") {
+        var lex = cx.state.lexical;
+        if (lex.info == "call") lex.pos = (lex.pos || 0) + 1;
+        return cont(what, proceed);
+      }
+      if (type == end) return cont();
+      return cont(expect(end));
+    }
+    return function(type) {
+      if (type == end) return cont();
+      else return pass(what, proceed);
+    };
+  }
+  function block(type) {
+    if (type == "}") return cont();
+    return pass(statement, block);
+  }
+  function maybetype(type) {
+    if (type == ":") return cont(typedef);
+    return pass();
+  }
+  function typedef(type) {
+    if (type == "variable"){cx.marked = "variable-3"; return cont();}
+    return pass();
+  }
+  function vardef1(type, value) {
+    if (type == "variable") {
+      register(value);
+      return isTS ? cont(maybetype, vardef2) : cont(vardef2);
+    }
+    return pass();
+  }
+  function vardef2(type, value) {
+    if (value == "=") return cont(expressionNoComma, vardef2);
+    if (type == ",") return cont(vardef1);
+  }
+  function maybeelse(type, value) {
+    if (type == "keyword b" && value == "else") return cont(pushlex("form"), statement, poplex);
+  }
+  function forspec1(type) {
+    if (type == "var") return cont(vardef1, expect(";"), forspec2);
+    if (type == ";") return cont(forspec2);
+    if (type == "variable") return cont(formaybein);
+    return pass(expression, expect(";"), forspec2);
+  }
+  function formaybein(_type, value) {
+    if (value == "in") return cont(expression);
+    return cont(maybeoperatorComma, forspec2);
+  }
+  function forspec2(type, value) {
+    if (type == ";") return cont(forspec3);
+    if (value == "in") return cont(expression);
+    return pass(expression, expect(";"), forspec3);
+  }
+  function forspec3(type) {
+    if (type != ")") cont(expression);
+  }
+  function functiondef(type, value) {
+    if (type == "variable") {register(value); return cont(functiondef);}
+    if (type == "(") return cont(pushlex(")"), pushcontext, commasep(funarg, ")"), poplex, statement, popcontext);
+  }
+  function funarg(type, value) {
+    if (type == "variable") {register(value); return isTS ? cont(maybetype) : cont();}
+  }
+
+  // Interface
+
+  return {
+    startState: function(basecolumn) {
+      return {
+        tokenize: jsTokenBase,
+        lastType: null,
+        cc: [],
+        lexical: new JSLexical((basecolumn || 0) - indentUnit, 0, "block", false),
+        localVars: parserConfig.localVars,
+        globalVars: parserConfig.globalVars,
+        context: parserConfig.localVars && {vars: parserConfig.localVars},
+        indented: 0
+      };
+    },
+
+    token: function(stream, state) {
+      if (stream.sol()) {
+        if (!state.lexical.hasOwnProperty("align"))
+          state.lexical.align = false;
+        state.indented = stream.indentation();
+      }
+      if (state.tokenize != jsTokenComment && stream.eatSpace()) return null;
+      var style = state.tokenize(stream, state);
+      if (type == "comment") return style;
+      state.lastType = type == "operator" && (content == "++" || content == "--") ? "incdec" : type;
+      return parseJS(state, style, type, content, stream);
+    },
+
+    indent: function(state, textAfter) {
+      if (state.tokenize == jsTokenComment) return CodeMirror.Pass;
+      if (state.tokenize != jsTokenBase) return 0;
+      var firstChar = textAfter && textAfter.charAt(0), lexical = state.lexical;
+      // Kludge to prevent 'maybelse' from blocking lexical scope pops
+      for (var i = state.cc.length - 1; i >= 0; --i) {
+        var c = state.cc[i];
+        if (c == poplex) lexical = lexical.prev;
+        else if (c != maybeelse || /^else\b/.test(textAfter)) break;
+      }
+      if (lexical.type == "stat" && firstChar == "}") lexical = lexical.prev;
+      if (statementIndent && lexical.type == ")" && lexical.prev.type == "stat")
+        lexical = lexical.prev;
+      var type = lexical.type, closing = firstChar == type;
+
+      if (type == "vardef") return lexical.indented + (state.lastType == "operator" || state.lastType == "," ? 4 : 0);
+      else if (type == "form" && firstChar == "{") return lexical.indented;
+      else if (type == "form") return lexical.indented + indentUnit;
+      else if (type == "stat")
+        return lexical.indented + (state.lastType == "operator" || state.lastType == "," ? statementIndent || indentUnit : 0);
+      else if (lexical.info == "switch" && !closing && parserConfig.doubleIndentSwitch != false)
+        return lexical.indented + (/^(?:case|default)\b/.test(textAfter) ? indentUnit : 2 * indentUnit);
+      else if (lexical.align) return lexical.column + (closing ? 0 : 1);
+      else return lexical.indented + (closing ? 0 : indentUnit);
+    },
+
+    electricChars: ":{}",
+    blockCommentStart: jsonMode ? null : "/*",
+    blockCommentEnd: jsonMode ? null : "*/",
+    lineComment: jsonMode ? null : "//",
+    fold: "brace",
+
+    helperType: jsonMode ? "json" : "javascript",
+    jsonMode: jsonMode
+  };
+});
+
+CodeMirror.defineMIME("text/javascript", "javascript");
+CodeMirror.defineMIME("text/ecmascript", "javascript");
+CodeMirror.defineMIME("application/javascript", "javascript");
+CodeMirror.defineMIME("application/ecmascript", "javascript");
+CodeMirror.defineMIME("application/json", {name: "javascript", json: true});
+CodeMirror.defineMIME("application/x-json", {name: "javascript", json: true});
+CodeMirror.defineMIME("text/typescript", { name: "javascript", typescript: true });
+CodeMirror.defineMIME("application/typescript", { name: "javascript", typescript: true });
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/less.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/less.js
new file mode 100644
index 000000000..09f510e03
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/less.js
@@ -0,0 +1,258 @@
+/*
+  LESS mode - http://www.lesscss.org/
+  Ported to CodeMirror by Peter Kroon <plakroon@gmail.com>
+  Report bugs/issues here: https://github.com/marijnh/CodeMirror/issues  GitHub: @peterkroon
+*/
+
+CodeMirror.defineMode("less", function(config) {
+  var indentUnit = config.indentUnit, type;
+  function ret(style, tp) {type = tp; return style;}
+
+  var selectors = /(^\:root$|^\:nth\-child$|^\:nth\-last\-child$|^\:nth\-of\-type$|^\:nth\-last\-of\-type$|^\:first\-child$|^\:last\-child$|^\:first\-of\-type$|^\:last\-of\-type$|^\:only\-child$|^\:only\-of\-type$|^\:empty$|^\:link|^\:visited$|^\:active$|^\:hover$|^\:focus$|^\:target$|^\:lang$|^\:enabled^\:disabled$|^\:checked$|^\:first\-line$|^\:first\-letter$|^\:before$|^\:after$|^\:not$|^\:required$|^\:invalid$)/;
+
+  function tokenBase(stream, state) {
+    var ch = stream.next();
+
+    if (ch == "@") {stream.eatWhile(/[\w\-]/); return ret("meta", stream.current());}
+    else if (ch == "/" && stream.eat("*")) {
+      state.tokenize = tokenCComment;
+      return tokenCComment(stream, state);
+    }
+    else if (ch == "<" && stream.eat("!")) {
+      state.tokenize = tokenSGMLComment;
+      return tokenSGMLComment(stream, state);
+    }
+    else if (ch == "=") ret(null, "compare");
+    else if (ch == "|" && stream.eat("=")) return ret(null, "compare");
+    else if (ch == "\"" || ch == "'") {
+      state.tokenize = tokenString(ch);
+      return state.tokenize(stream, state);
+    }
+    else if (ch == "/") { // e.g.: .png will not be parsed as a class
+      if(stream.eat("/")){
+        state.tokenize = tokenSComment;
+        return tokenSComment(stream, state);
+      }else{
+        if(type == "string" || type == "(")return ret("string", "string");
+        if(state.stack[state.stack.length-1] != undefined)return ret(null, ch);
+        stream.eatWhile(/[\a-zA-Z0-9\-_.\s]/);
+        if( /\/|\)|#/.test(stream.peek() || (stream.eatSpace() && stream.peek() == ")"))  || stream.eol() )return ret("string", "string"); // let url(/images/logo.png) without quotes return as string
+      }
+    }
+    else if (ch == "!") {
+      stream.match(/^\s*\w*/);
+      return ret("keyword", "important");
+    }
+    else if (/\d/.test(ch)) {
+      stream.eatWhile(/[\w.%]/);
+      return ret("number", "unit");
+    }
+    else if (/[,+<>*\/]/.test(ch)) {
+      if(stream.peek() == "=" || type == "a")return ret("string", "string");
+      return ret(null, "select-op");
+    }
+    else if (/[;{}:\[\]()~\|]/.test(ch)) {
+      if(ch == ":"){
+        stream.eatWhile(/[a-z\\\-]/);
+        if( selectors.test(stream.current()) ){
+          return ret("tag", "tag");
+        }else if(stream.peek() == ":"){//::-webkit-search-decoration
+          stream.next();
+          stream.eatWhile(/[a-z\\\-]/);
+          if(stream.current().match(/\:\:\-(o|ms|moz|webkit)\-/))return ret("string", "string");
+          if( selectors.test(stream.current().substring(1)) )return ret("tag", "tag");
+          return ret(null, ch);
+        }else{
+          return ret(null, ch);
+        }
+      }else if(ch == "~"){
+        if(type == "r")return ret("string", "string");
+      }else{
+        return ret(null, ch);
+      }
+    }
+    else if (ch == ".") {
+      if(type == "(" || type == "string")return ret("string", "string"); // allow url(../image.png)
+      stream.eatWhile(/[\a-zA-Z0-9\-_]/);
+      if(stream.peek() == " ")stream.eatSpace();
+      if(stream.peek() == ")")return ret("number", "unit");//rgba(0,0,0,.25);
+      return ret("tag", "tag");
+    }
+    else if (ch == "#") {
+      //we don't eat white-space, we want the hex color and or id only
+      stream.eatWhile(/[A-Za-z0-9]/);
+      //check if there is a proper hex color length e.g. #eee || #eeeEEE
+      if(stream.current().length == 4 || stream.current().length == 7){
+        if(stream.current().match(/[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}/,false) != null){//is there a valid hex color value present in the current stream
+          //when not a valid hex value, parse as id
+          if(stream.current().substring(1) != stream.current().match(/[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}/,false))return ret("atom", "tag");
+          //eat white-space
+          stream.eatSpace();
+          //when hex value declaration doesn't end with [;,] but is does with a slash/cc comment treat it as an id, just like the other hex values that don't end with[;,]
+          if( /[\/<>.(){!$%^&*_\-\\?=+\|#'~`]/.test(stream.peek()) )return ret("atom", "tag");
+          //#time { color: #aaa }
+          else if(stream.peek() == "}" )return ret("number", "unit");
+          //we have a valid hex color value, parse as id whenever an element/class is defined after the hex(id) value e.g. #eee aaa || #eee .aaa
+          else if( /[a-zA-Z\\]/.test(stream.peek()) )return ret("atom", "tag");
+          //when a hex value is on the end of a line, parse as id
+          else if(stream.eol())return ret("atom", "tag");
+          //default
+          else return ret("number", "unit");
+        }else{//when not a valid hexvalue in the current stream e.g. #footer
+          stream.eatWhile(/[\w\\\-]/);
+          return ret("atom", "tag");
+        }
+      }else{//when not a valid hexvalue length
+        stream.eatWhile(/[\w\\\-]/);
+        return ret("atom", "tag");
+      }
+    }
+    else if (ch == "&") {
+      stream.eatWhile(/[\w\-]/);
+      return ret(null, ch);
+    }
+    else {
+      stream.eatWhile(/[\w\\\-_%.{]/);
+      if(type == "string"){
+        return ret("string", "string");
+      }else if(stream.current().match(/(^http$|^https$)/) != null){
+        stream.eatWhile(/[\w\\\-_%.{:\/]/);
+        return ret("string", "string");
+      }else if(stream.peek() == "<" || stream.peek() == ">"){
+        return ret("tag", "tag");
+      }else if( /\(/.test(stream.peek()) ){
+        return ret(null, ch);
+      }else if (stream.peek() == "/" && state.stack[state.stack.length-1] != undefined){ // url(dir/center/image.png)
+        return ret("string", "string");
+      }else if( stream.current().match(/\-\d|\-.\d/) ){ // match e.g.: -5px -0.4 etc... only colorize the minus sign
+        //commment out these 2 comment if you want the minus sign to be parsed as null -500px
+        //stream.backUp(stream.current().length-1);
+        //return ret(null, ch); //console.log( stream.current() );
+        return ret("number", "unit");
+      }else if( /\/|[\s\)]/.test(stream.peek() || stream.eol() || (stream.eatSpace() && stream.peek() == "/")) && stream.current().indexOf(".") !== -1){
+        if(stream.current().substring(stream.current().length-1,stream.current().length) == "{"){
+          stream.backUp(1);
+          return ret("tag", "tag");
+        }//end if
+        stream.eatSpace();
+        if( /[{<>.a-zA-Z\/]/.test(stream.peek())  || stream.eol() )return ret("tag", "tag"); // e.g. button.icon-plus
+        return ret("string", "string"); // let url(/images/logo.png) without quotes return as string
+      }else if( stream.eol() || stream.peek() == "[" || stream.peek() == "#" || type == "tag" ){
+        if(stream.current().substring(stream.current().length-1,stream.current().length) == "{")stream.backUp(1);
+        return ret("tag", "tag");
+      }else if(type == "compare" || type == "a" || type == "("){
+        return ret("string", "string");
+      }else if(type == "|" || stream.current() == "-" || type == "["){
+        return ret(null, ch);
+      }else if(stream.peek() == ":") {
+        stream.next();
+        var t_v = stream.peek() == ":" ? true : false;
+        if(!t_v){
+          var old_pos = stream.pos;
+          var sc = stream.current().length;
+          stream.eatWhile(/[a-z\\\-]/);
+          var new_pos = stream.pos;
+          if(stream.current().substring(sc-1).match(selectors) != null){
+            stream.backUp(new_pos-(old_pos-1));
+            return ret("tag", "tag");
+          } else stream.backUp(new_pos-(old_pos-1));
+        }else{
+          stream.backUp(1);
+        }
+        if(t_v)return ret("tag", "tag"); else return ret("variable", "variable");
+      }else{
+        return ret("variable", "variable");
+      }
+    }
+  }
+
+  function tokenSComment(stream, state) { // SComment = Slash comment
+    stream.skipToEnd();
+    state.tokenize = tokenBase;
+    return ret("comment", "comment");
+  }
+
+  function tokenCComment(stream, state) {
+    var maybeEnd = false, ch;
+    while ((ch = stream.next()) != null) {
+      if (maybeEnd && ch == "/") {
+        state.tokenize = tokenBase;
+        break;
+      }
+      maybeEnd = (ch == "*");
+    }
+    return ret("comment", "comment");
+  }
+
+  function tokenSGMLComment(stream, state) {
+    var dashes = 0, ch;
+    while ((ch = stream.next()) != null) {
+      if (dashes >= 2 && ch == ">") {
+        state.tokenize = tokenBase;
+        break;
+      }
+      dashes = (ch == "-") ? dashes + 1 : 0;
+    }
+    return ret("comment", "comment");
+  }
+
+  function tokenString(quote) {
+    return function(stream, state) {
+      var escaped = false, ch;
+      while ((ch = stream.next()) != null) {
+        if (ch == quote && !escaped)
+          break;
+        escaped = !escaped && ch == "\\";
+      }
+      if (!escaped) state.tokenize = tokenBase;
+      return ret("string", "string");
+    };
+  }
+
+  return {
+    startState: function(base) {
+      return {tokenize: tokenBase,
+              baseIndent: base || 0,
+              stack: []};
+    },
+
+    token: function(stream, state) {
+      if (stream.eatSpace()) return null;
+      var style = state.tokenize(stream, state);
+
+      var context = state.stack[state.stack.length-1];
+      if (type == "hash" && context == "rule") style = "atom";
+      else if (style == "variable") {
+        if (context == "rule") style = null; //"tag"
+        else if (!context || context == "@media{") {
+          style = stream.current() == "when"  ? "variable" :
+          /[\s,|\s\)|\s]/.test(stream.peek()) ? "tag"      : type;
+        }
+      }
+
+      if (context == "rule" && /^[\{\};]$/.test(type))
+        state.stack.pop();
+      if (type == "{") {
+        if (context == "@media") state.stack[state.stack.length-1] = "@media{";
+        else state.stack.push("{");
+      }
+      else if (type == "}") state.stack.pop();
+      else if (type == "@media") state.stack.push("@media");
+      else if (context == "{" && type != "comment") state.stack.push("rule");
+      return style;
+    },
+
+    indent: function(state, textAfter) {
+      var n = state.stack.length;
+      if (/^\}/.test(textAfter))
+        n -= state.stack[state.stack.length-1] == "rule" ? 2 : 1;
+      return state.baseIndent + n * indentUnit;
+    },
+
+    electricChars: "}"
+  };
+});
+
+CodeMirror.defineMIME("text/x-less", "less");
+if (!CodeMirror.mimeModes.hasOwnProperty("text/css"))
+  CodeMirror.defineMIME("text/css", "less");
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/livescript.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/livescript.js
new file mode 100644
index 000000000..c000324b8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/livescript.js
@@ -0,0 +1,267 @@
+/**
+ * Link to the project's GitHub page:
+ * https://github.com/duralog/CodeMirror
+ */
+(function() {
+  CodeMirror.defineMode('livescript', function(){
+    var tokenBase, external;
+    tokenBase = function(stream, state){
+      var next_rule, nr, i$, len$, r, m;
+      if (next_rule = state.next || 'start') {
+        state.next = state.next;
+        if (Array.isArray(nr = Rules[next_rule])) {
+          for (i$ = 0, len$ = nr.length; i$ < len$; ++i$) {
+            r = nr[i$];
+            if (r.regex && (m = stream.match(r.regex))) {
+              state.next = r.next;
+              return r.token;
+            }
+          }
+          stream.next();
+          return 'error';
+        }
+        if (stream.match(r = Rules[next_rule])) {
+          if (r.regex && stream.match(r.regex)) {
+            state.next = r.next;
+            return r.token;
+          } else {
+            stream.next();
+            return 'error';
+          }
+        }
+      }
+      stream.next();
+      return 'error';
+    };
+    external = {
+      startState: function(){
+        return {
+          next: 'start',
+          lastToken: null
+        };
+      },
+      token: function(stream, state){
+        var style;
+        style = tokenBase(stream, state);
+        state.lastToken = {
+          style: style,
+          indent: stream.indentation(),
+          content: stream.current()
+        };
+        return style.replace(/\./g, ' ');
+      },
+      indent: function(state){
+        var indentation;
+        indentation = state.lastToken.indent;
+        if (state.lastToken.content.match(indenter)) {
+          indentation += 2;
+        }
+        return indentation;
+      }
+    };
+    return external;
+  });
+
+  var identifier = '(?![\\d\\s])[$\\w\\xAA-\\uFFDC](?:(?!\\s)[$\\w\\xAA-\\uFFDC]|-[A-Za-z])*';
+  var indenter = RegExp('(?:[({[=:]|[-~]>|\\b(?:e(?:lse|xport)|d(?:o|efault)|t(?:ry|hen)|finally|import(?:\\s*all)?|const|var|let|new|catch(?:\\s*' + identifier + ')?))\\s*$');
+  var keywordend = '(?![$\\w]|-[A-Za-z]|\\s*:(?![:=]))';
+  var stringfill = {
+    token: 'string',
+    regex: '.+'
+  };
+  var Rules = {
+    start: [
+      {
+        token: 'comment.doc',
+        regex: '/\\*',
+        next: 'comment'
+      }, {
+        token: 'comment',
+        regex: '#.*'
+      }, {
+        token: 'keyword',
+        regex: '(?:t(?:h(?:is|row|en)|ry|ypeof!?)|c(?:on(?:tinue|st)|a(?:se|tch)|lass)|i(?:n(?:stanceof)?|mp(?:ort(?:\\s+all)?|lements)|[fs])|d(?:e(?:fault|lete|bugger)|o)|f(?:or(?:\\s+own)?|inally|unction)|s(?:uper|witch)|e(?:lse|x(?:tends|port)|val)|a(?:nd|rguments)|n(?:ew|ot)|un(?:less|til)|w(?:hile|ith)|o[fr]|return|break|let|var|loop)' + keywordend
+      }, {
+        token: 'constant.language',
+        regex: '(?:true|false|yes|no|on|off|null|void|undefined)' + keywordend
+      }, {
+        token: 'invalid.illegal',
+        regex: '(?:p(?:ackage|r(?:ivate|otected)|ublic)|i(?:mplements|nterface)|enum|static|yield)' + keywordend
+      }, {
+        token: 'language.support.class',
+        regex: '(?:R(?:e(?:gExp|ferenceError)|angeError)|S(?:tring|yntaxError)|E(?:rror|valError)|Array|Boolean|Date|Function|Number|Object|TypeError|URIError)' + keywordend
+      }, {
+        token: 'language.support.function',
+        regex: '(?:is(?:NaN|Finite)|parse(?:Int|Float)|Math|JSON|(?:en|de)codeURI(?:Component)?)' + keywordend
+      }, {
+        token: 'variable.language',
+        regex: '(?:t(?:hat|il|o)|f(?:rom|allthrough)|it|by|e)' + keywordend
+      }, {
+        token: 'identifier',
+        regex: identifier + '\\s*:(?![:=])'
+      }, {
+        token: 'variable',
+        regex: identifier
+      }, {
+        token: 'keyword.operator',
+        regex: '(?:\\.{3}|\\s+\\?)'
+      }, {
+        token: 'keyword.variable',
+        regex: '(?:@+|::|\\.\\.)',
+        next: 'key'
+      }, {
+        token: 'keyword.operator',
+        regex: '\\.\\s*',
+        next: 'key'
+      }, {
+        token: 'string',
+        regex: '\\\\\\S[^\\s,;)}\\]]*'
+      }, {
+        token: 'string.doc',
+        regex: '\'\'\'',
+        next: 'qdoc'
+      }, {
+        token: 'string.doc',
+        regex: '"""',
+        next: 'qqdoc'
+      }, {
+        token: 'string',
+        regex: '\'',
+        next: 'qstring'
+      }, {
+        token: 'string',
+        regex: '"',
+        next: 'qqstring'
+      }, {
+        token: 'string',
+        regex: '`',
+        next: 'js'
+      }, {
+        token: 'string',
+        regex: '<\\[',
+        next: 'words'
+      }, {
+        token: 'string.regex',
+        regex: '//',
+        next: 'heregex'
+      }, {
+        token: 'string.regex',
+        regex: '\\/(?:[^[\\/\\n\\\\]*(?:(?:\\\\.|\\[[^\\]\\n\\\\]*(?:\\\\.[^\\]\\n\\\\]*)*\\])[^[\\/\\n\\\\]*)*)\\/[gimy$]{0,4}',
+        next: 'key'
+      }, {
+        token: 'constant.numeric',
+        regex: '(?:0x[\\da-fA-F][\\da-fA-F_]*|(?:[2-9]|[12]\\d|3[0-6])r[\\da-zA-Z][\\da-zA-Z_]*|(?:\\d[\\d_]*(?:\\.\\d[\\d_]*)?|\\.\\d[\\d_]*)(?:e[+-]?\\d[\\d_]*)?[\\w$]*)'
+      }, {
+        token: 'lparen',
+        regex: '[({[]'
+      }, {
+        token: 'rparen',
+        regex: '[)}\\]]',
+        next: 'key'
+      }, {
+        token: 'keyword.operator',
+        regex: '\\S+'
+      }, {
+        token: 'text',
+        regex: '\\s+'
+      }
+    ],
+    heregex: [
+      {
+        token: 'string.regex',
+        regex: '.*?//[gimy$?]{0,4}',
+        next: 'start'
+      }, {
+        token: 'string.regex',
+        regex: '\\s*#{'
+      }, {
+        token: 'comment.regex',
+        regex: '\\s+(?:#.*)?'
+      }, {
+        token: 'string.regex',
+        regex: '\\S+'
+      }
+    ],
+    key: [
+      {
+        token: 'keyword.operator',
+        regex: '[.?@!]+'
+      }, {
+        token: 'identifier',
+        regex: identifier,
+        next: 'start'
+      }, {
+        token: 'text',
+        regex: '.',
+        next: 'start'
+      }
+    ],
+    comment: [
+      {
+        token: 'comment.doc',
+        regex: '.*?\\*/',
+        next: 'start'
+      }, {
+        token: 'comment.doc',
+        regex: '.+'
+      }
+    ],
+    qdoc: [
+      {
+        token: 'string',
+        regex: ".*?'''",
+        next: 'key'
+      }, stringfill
+    ],
+    qqdoc: [
+      {
+        token: 'string',
+        regex: '.*?"""',
+        next: 'key'
+      }, stringfill
+    ],
+    qstring: [
+      {
+        token: 'string',
+        regex: '[^\\\\\']*(?:\\\\.[^\\\\\']*)*\'',
+        next: 'key'
+      }, stringfill
+    ],
+    qqstring: [
+      {
+        token: 'string',
+        regex: '[^\\\\"]*(?:\\\\.[^\\\\"]*)*"',
+        next: 'key'
+      }, stringfill
+    ],
+    js: [
+      {
+        token: 'string',
+        regex: '[^\\\\`]*(?:\\\\.[^\\\\`]*)*`',
+        next: 'key'
+      }, stringfill
+    ],
+    words: [
+      {
+        token: 'string',
+        regex: '.*?\\]>',
+        next: 'key'
+      }, stringfill
+    ]
+  };
+  for (var idx in Rules) {
+    var r = Rules[idx];
+    if (Array.isArray(r)) {
+      for (var i = 0, len = r.length; i < len; ++i) {
+        var rr = r[i];
+        if (rr.regex) {
+          Rules[idx][i].regex = new RegExp('^' + rr.regex);
+        }
+      }
+    } else if (r.regex) {
+      Rules[idx].regex = new RegExp('^' + r.regex);
+    }
+  }
+})();
+
+CodeMirror.defineMIME('text/x-livescript', 'livescript');
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/matchbrackets.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/matchbrackets.js
new file mode 100644
index 000000000..131fe831f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/matchbrackets.js
@@ -0,0 +1,86 @@
+(function() {
+  var ie_lt8 = /MSIE \d/.test(navigator.userAgent) &&
+    (document.documentMode == null || document.documentMode < 8);
+
+  var Pos = CodeMirror.Pos;
+
+  var matching = {"(": ")>", ")": "(<", "[": "]>", "]": "[<", "{": "}>", "}": "{<"};
+  function findMatchingBracket(cm, where, strict) {
+    var state = cm.state.matchBrackets;
+    var maxScanLen = (state && state.maxScanLineLength) || 10000;
+
+    var cur = where || cm.getCursor(), line = cm.getLineHandle(cur.line), pos = cur.ch - 1;
+    var match = (pos >= 0 && matching[line.text.charAt(pos)]) || matching[line.text.charAt(++pos)];
+    if (!match) return null;
+    var forward = match.charAt(1) == ">", d = forward ? 1 : -1;
+    if (strict && forward != (pos == cur.ch)) return null;
+    var style = cm.getTokenTypeAt(Pos(cur.line, pos + 1));
+
+    var stack = [line.text.charAt(pos)], re = /[(){}[\]]/;
+    function scan(line, lineNo, start) {
+      if (!line.text) return;
+      var pos = forward ? 0 : line.text.length - 1, end = forward ? line.text.length : -1;
+      if (line.text.length > maxScanLen) return null;
+      if (start != null) pos = start + d;
+      for (; pos != end; pos += d) {
+        var ch = line.text.charAt(pos);
+        if (re.test(ch) && cm.getTokenTypeAt(Pos(lineNo, pos + 1)) == style) {
+          var match = matching[ch];
+          if (match.charAt(1) == ">" == forward) stack.push(ch);
+          else if (stack.pop() != match.charAt(0)) return {pos: pos, match: false};
+          else if (!stack.length) return {pos: pos, match: true};
+        }
+      }
+    }
+    for (var i = cur.line, found, e = forward ? Math.min(i + 100, cm.lineCount()) : Math.max(-1, i - 100); i != e; i+=d) {
+      if (i == cur.line) found = scan(line, i, pos);
+      else found = scan(cm.getLineHandle(i), i);
+      if (found) break;
+    }
+    return {from: Pos(cur.line, pos), to: found && Pos(i, found.pos),
+            match: found && found.match, forward: forward};
+  }
+
+  function matchBrackets(cm, autoclear) {
+    // Disable brace matching in long lines, since it'll cause hugely slow updates
+    var maxHighlightLen = cm.state.matchBrackets.maxHighlightLineLength || 1000;
+    var found = findMatchingBracket(cm);
+    if (!found || cm.getLine(found.from.line).length > maxHighlightLen ||
+       found.to && cm.getLine(found.to.line).length > maxHighlightLen)
+      return;
+
+    var style = found.match ? "CodeMirror-matchingbracket" : "CodeMirror-nonmatchingbracket";
+    var one = cm.markText(found.from, Pos(found.from.line, found.from.ch + 1), {className: style});
+    var two = found.to && cm.markText(found.to, Pos(found.to.line, found.to.ch + 1), {className: style});
+    // Kludge to work around the IE bug from issue #1193, where text
+    // input stops going to the textare whever this fires.
+    if (ie_lt8 && cm.state.focused) cm.display.input.focus();
+    var clear = function() {
+      cm.operation(function() { one.clear(); two && two.clear(); });
+    };
+    if (autoclear) setTimeout(clear, 800);
+    else return clear;
+  }
+
+  var currentlyHighlighted = null;
+  function doMatchBrackets(cm) {
+    cm.operation(function() {
+      if (currentlyHighlighted) {currentlyHighlighted(); currentlyHighlighted = null;}
+      if (!cm.somethingSelected()) currentlyHighlighted = matchBrackets(cm, false);
+    });
+  }
+
+  CodeMirror.defineOption("matchBrackets", false, function(cm, val, old) {
+    if (old && old != CodeMirror.Init)
+      cm.off("cursorActivity", doMatchBrackets);
+    if (val) {
+      cm.state.matchBrackets = typeof val == "object" ? val : {};
+      cm.on("cursorActivity", doMatchBrackets);
+    }
+  });
+
+  CodeMirror.defineExtension("matchBrackets", function() {matchBrackets(this, true);});
+  CodeMirror.defineExtension("findMatchingBracket", function(pos, strict){
+    return findMatchingBracket(this, pos, strict);
+  });
+})();
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/overlay.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/overlay.js
new file mode 100644
index 000000000..b7928a7bb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/overlay.js
@@ -0,0 +1,59 @@
+// Utility function that allows modes to be combined. The mode given
+// as the base argument takes care of most of the normal mode
+// functionality, but a second (typically simple) mode is used, which
+// can override the style of text. Both modes get to parse all of the
+// text, but when both assign a non-null style to a piece of code, the
+// overlay wins, unless the combine argument was true, in which case
+// the styles are combined.
+
+// overlayParser is the old, deprecated name
+CodeMirror.overlayMode = CodeMirror.overlayParser = function(base, overlay, combine) {
+  return {
+    startState: function() {
+      return {
+        base: CodeMirror.startState(base),
+        overlay: CodeMirror.startState(overlay),
+        basePos: 0, baseCur: null,
+        overlayPos: 0, overlayCur: null
+      };
+    },
+    copyState: function(state) {
+      return {
+        base: CodeMirror.copyState(base, state.base),
+        overlay: CodeMirror.copyState(overlay, state.overlay),
+        basePos: state.basePos, baseCur: null,
+        overlayPos: state.overlayPos, overlayCur: null
+      };
+    },
+
+    token: function(stream, state) {
+      if (stream.start == state.basePos) {
+        state.baseCur = base.token(stream, state.base);
+        state.basePos = stream.pos;
+      }
+      if (stream.start == state.overlayPos) {
+        stream.pos = stream.start;
+        state.overlayCur = overlay.token(stream, state.overlay);
+        state.overlayPos = stream.pos;
+      }
+      stream.pos = Math.min(state.basePos, state.overlayPos);
+      if (stream.eol()) state.basePos = state.overlayPos = 0;
+
+      if (state.overlayCur == null) return state.baseCur;
+      if (state.baseCur != null && combine) return state.baseCur + " " + state.overlayCur;
+      else return state.overlayCur;
+    },
+
+    indent: base.indent && function(state, textAfter) {
+      return base.indent(state.base, textAfter);
+    },
+    electricChars: base.electricChars,
+
+    innerMode: function(state) { return {state: state.base, mode: base}; },
+
+    blankLine: function(state) {
+      if (base.blankLine) base.blankLine(state.base);
+      if (overlay.blankLine) overlay.blankLine(state.overlay);
+    }
+  };
+};
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/placeholder.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/placeholder.js
new file mode 100644
index 000000000..18f9dff3a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/placeholder.js
@@ -0,0 +1,54 @@
+(function() {
+  CodeMirror.defineOption("placeholder", "", function(cm, val, old) {
+    var prev = old && old != CodeMirror.Init;
+    if (val && !prev) {
+      cm.on("focus", onFocus);
+      cm.on("blur", onBlur);
+      cm.on("change", onChange);
+      onChange(cm);
+    } else if (!val && prev) {
+      cm.off("focus", onFocus);
+      cm.off("blur", onBlur);
+      cm.off("change", onChange);
+      clearPlaceholder(cm);
+      var wrapper = cm.getWrapperElement();
+      wrapper.className = wrapper.className.replace(" CodeMirror-empty", "");
+    }
+
+    if (val && !cm.hasFocus()) onBlur(cm);
+  });
+
+  function clearPlaceholder(cm) {
+    if (cm.state.placeholder) {
+      cm.state.placeholder.parentNode.removeChild(cm.state.placeholder);
+      cm.state.placeholder = null;
+    }
+  }
+  function setPlaceholder(cm) {
+    clearPlaceholder(cm);
+    var elt = cm.state.placeholder = document.createElement("pre");
+    elt.style.cssText = "height: 0; overflow: visible";
+    elt.className = "CodeMirror-placeholder";
+    elt.appendChild(document.createTextNode(cm.getOption("placeholder")));
+    cm.display.lineSpace.insertBefore(elt, cm.display.lineSpace.firstChild);
+  }
+
+  function onFocus(cm) {
+    clearPlaceholder(cm);
+  }
+  function onBlur(cm) {
+    if (isEmpty(cm)) setPlaceholder(cm);
+  }
+  function onChange(cm) {
+    var wrapper = cm.getWrapperElement(), empty = isEmpty(cm);
+    wrapper.className = wrapper.className.replace(" CodeMirror-empty", "") + (empty ? " CodeMirror-empty" : "");
+
+    if (cm.hasFocus()) return;
+    if (empty) setPlaceholder(cm);
+    else clearPlaceholder(cm);
+  }
+
+  function isEmpty(cm) {
+    return (cm.lineCount() === 1) && (cm.getLine(0) === "");
+  }
+})();
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/runmode.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/runmode.js
new file mode 100644
index 000000000..a7da6d718
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/runmode.js
@@ -0,0 +1,56 @@
+CodeMirror.runMode = function(string, modespec, callback, options) {
+  var mode = CodeMirror.getMode(CodeMirror.defaults, modespec);
+  var ie = /MSIE \d/.test(navigator.userAgent);
+  var ie_lt9 = ie && (document.documentMode == null || document.documentMode < 9);
+
+  if (callback.nodeType == 1) {
+    var tabSize = (options && options.tabSize) || CodeMirror.defaults.tabSize;
+    var node = callback, col = 0;
+    node.innerHTML = "";
+    callback = function(text, style) {
+      if (text == "\n") {
+        // Emitting LF or CRLF on IE8 or earlier results in an incorrect display.
+        // Emitting a carriage return makes everything ok.
+        node.appendChild(document.createTextNode(ie_lt9 ? '\r' : text));
+        col = 0;
+        return;
+      }
+      var content = "";
+      // replace tabs
+      for (var pos = 0;;) {
+        var idx = text.indexOf("\t", pos);
+        if (idx == -1) {
+          content += text.slice(pos);
+          col += text.length - pos;
+          break;
+        } else {
+          col += idx - pos;
+          content += text.slice(pos, idx);
+          var size = tabSize - col % tabSize;
+          col += size;
+          for (var i = 0; i < size; ++i) content += " ";
+          pos = idx + 1;
+        }
+      }
+
+      if (style) {
+        var sp = node.appendChild(document.createElement("span"));
+        sp.className = "cm-" + style.replace(/ +/g, " cm-");
+        sp.appendChild(document.createTextNode(content));
+      } else {
+        node.appendChild(document.createTextNode(content));
+      }
+    };
+  }
+
+  var lines = CodeMirror.splitLines(string), state = CodeMirror.startState(mode);
+  for (var i = 0, e = lines.length; i < e; ++i) {
+    if (i) callback("\n");
+    var stream = new CodeMirror.StringStream(lines[i]);
+    while (!stream.eol()) {
+      var style = mode.token(stream, state);
+      callback(stream.current(), style, i, stream.start);
+      stream.start = stream.pos;
+    }
+  }
+};
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/sass.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/sass.js
new file mode 100644
index 000000000..9c9a0dae0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/sass.js
@@ -0,0 +1,330 @@
+CodeMirror.defineMode("sass", function(config) {
+  var tokenRegexp = function(words){
+    return new RegExp("^" + words.join("|"));
+  };
+
+  var keywords = ["true", "false", "null", "auto"];
+  var keywordsRegexp = new RegExp("^" + keywords.join("|"));
+
+  var operators = ["\\(", "\\)", "=", ">", "<", "==", ">=", "<=", "\\+", "-", "\\!=", "/", "\\*", "%", "and", "or", "not"];
+  var opRegexp = tokenRegexp(operators);
+
+  var pseudoElementsRegexp = /^::?[\w\-]+/;
+
+  var urlTokens = function(stream, state){
+    var ch = stream.peek();
+
+    if (ch === ")"){
+      stream.next();
+      state.tokenizer = tokenBase;
+      return "operator";
+    }else if (ch === "("){
+      stream.next();
+      stream.eatSpace();
+
+      return "operator";
+    }else if (ch === "'" || ch === '"'){
+      state.tokenizer = buildStringTokenizer(stream.next());
+      return "string";
+    }else{
+      state.tokenizer = buildStringTokenizer(")", false);
+      return "string";
+    }
+  };
+  var multilineComment = function(stream, state) {
+    if (stream.skipTo("*/")){
+      stream.next();
+      stream.next();
+      state.tokenizer = tokenBase;
+    }else {
+      stream.next();
+    }
+
+    return "comment";
+  };
+
+  var buildStringTokenizer = function(quote, greedy){
+    if(greedy == null){ greedy = true; }
+
+    function stringTokenizer(stream, state){
+      var nextChar = stream.next();
+      var peekChar = stream.peek();
+      var previousChar = stream.string.charAt(stream.pos-2);
+
+      var endingString = ((nextChar !== "\\" && peekChar === quote) || (nextChar === quote && previousChar !== "\\"));
+
+      /*
+      console.log("previousChar: " + previousChar);
+      console.log("nextChar: " + nextChar);
+      console.log("peekChar: " + peekChar);
+      console.log("ending: " + endingString);
+      */
+
+      if (endingString){
+        if (nextChar !== quote && greedy) { stream.next(); }
+        state.tokenizer = tokenBase;
+        return "string";
+      }else if (nextChar === "#" && peekChar === "{"){
+        state.tokenizer = buildInterpolationTokenizer(stringTokenizer);
+        stream.next();
+        return "operator";
+      }else {
+        return "string";
+      }
+    }
+
+    return stringTokenizer;
+  };
+
+  var buildInterpolationTokenizer = function(currentTokenizer){
+    return function(stream, state){
+      if (stream.peek() === "}"){
+        stream.next();
+        state.tokenizer = currentTokenizer;
+        return "operator";
+      }else{
+        return tokenBase(stream, state);
+      }
+    };
+  };
+
+  var indent = function(state){
+    if (state.indentCount == 0){
+      state.indentCount++;
+      var lastScopeOffset = state.scopes[0].offset;
+      var currentOffset = lastScopeOffset + config.indentUnit;
+      state.scopes.unshift({ offset:currentOffset });
+    }
+  };
+
+  var dedent = function(state){
+    if (state.scopes.length == 1) { return; }
+
+    state.scopes.shift();
+  };
+
+  var tokenBase = function(stream, state) {
+    var ch = stream.peek();
+
+    // Single line Comment
+    if (stream.match('//')) {
+      stream.skipToEnd();
+      return "comment";
+    }
+
+    // Multiline Comment
+    if (stream.match('/*')){
+      state.tokenizer = multilineComment;
+      return state.tokenizer(stream, state);
+    }
+
+    // Interpolation
+    if (stream.match('#{')){
+    state.tokenizer = buildInterpolationTokenizer(tokenBase);
+      return "operator";
+    }
+
+    if (ch === "."){
+      stream.next();
+
+      // Match class selectors
+      if (stream.match(/^[\w-]+/)){
+        indent(state);
+        return "atom";
+      }else if (stream.peek() === "#"){
+        indent(state);
+        return "atom";
+      }else{
+        return "operator";
+      }
+    }
+
+    if (ch === "#"){
+      stream.next();
+
+      // Hex numbers
+      if (stream.match(/[0-9a-fA-F]{6}|[0-9a-fA-F]{3}/)){
+        return "number";
+      }
+
+      // ID selectors
+      if (stream.match(/^[\w-]+/)){
+        indent(state);
+        return "atom";
+      }
+
+      if (stream.peek() === "#"){
+        indent(state);
+        return "atom";
+      }
+    }
+
+    // Numbers
+    if (stream.match(/^-?[0-9\.]+/)){
+      return "number";
+    }
+
+    // Units
+    if (stream.match(/^(px|em|in)\b/)){
+      return "unit";
+    }
+
+    if (stream.match(keywordsRegexp)){
+      return "keyword";
+    }
+
+    if (stream.match(/^url/) && stream.peek() === "("){
+      state.tokenizer = urlTokens;
+      return "atom";
+    }
+
+    // Variables
+    if (ch === "$"){
+      stream.next();
+      stream.eatWhile(/[\w-]/);
+
+      if (stream.peek() === ":"){
+        stream.next();
+        return "variable-2";
+      }else{
+        return "variable-3";
+      }
+    }
+
+    if (ch === "!"){
+      stream.next();
+
+      if (stream.match(/^[\w]+/)){
+        return "keyword";
+      }
+
+      return "operator";
+    }
+
+    if (ch === "="){
+      stream.next();
+
+      // Match shortcut mixin definition
+      if (stream.match(/^[\w-]+/)){
+        indent(state);
+        return "meta";
+      }else {
+        return "operator";
+      }
+    }
+
+    if (ch === "+"){
+      stream.next();
+
+      // Match shortcut mixin definition
+      if (stream.match(/^[\w-]+/)){
+        return "variable-3";
+      }else {
+        return "operator";
+      }
+    }
+
+    // Indent Directives
+    if (stream.match(/^@(else if|if|media|else|for|each|while|mixin|function)/)){
+      indent(state);
+      return "meta";
+    }
+
+    // Other Directives
+    if (ch === "@"){
+      stream.next();
+      stream.eatWhile(/[\w-]/);
+      return "meta";
+    }
+
+    // Strings
+    if (ch === '"' || ch === "'"){
+      stream.next();
+      state.tokenizer = buildStringTokenizer(ch);
+      return "string";
+    }
+
+    // Pseudo element selectors
+    if (ch == ':' && stream.match(pseudoElementsRegexp)){
+      return "keyword";
+    }
+
+    // atoms
+    if (stream.eatWhile(/[\w-&]/)){
+      // matches a property definition
+      if (stream.peek() === ":" && !stream.match(pseudoElementsRegexp, false))
+        return "property";
+      else
+        return "atom";
+    }
+
+    if (stream.match(opRegexp)){
+      return "operator";
+    }
+
+    // If we haven't returned by now, we move 1 character
+    // and return an error
+    stream.next();
+    return null;
+  };
+
+  var tokenLexer = function(stream, state) {
+    if (stream.sol()){
+      state.indentCount = 0;
+    }
+    var style = state.tokenizer(stream, state);
+    var current = stream.current();
+
+    if (current === "@return"){
+      dedent(state);
+    }
+
+    if (style === "atom"){
+      indent(state);
+    }
+
+    if (style !== null){
+      var startOfToken = stream.pos - current.length;
+      var withCurrentIndent = startOfToken + (config.indentUnit * state.indentCount);
+
+      var newScopes = [];
+
+      for (var i = 0; i < state.scopes.length; i++){
+        var scope = state.scopes[i];
+
+        if (scope.offset <= withCurrentIndent){
+          newScopes.push(scope);
+        }
+      }
+
+      state.scopes = newScopes;
+    }
+
+
+    return style;
+  };
+
+  return {
+    startState: function() {
+      return {
+        tokenizer: tokenBase,
+        scopes: [{offset: 0, type: 'sass'}],
+        definedVars: [],
+        definedMixins: []
+      };
+    },
+    token: function(stream, state) {
+      var style = tokenLexer(stream, state);
+
+      state.lastToken = { style: style, content: stream.current() };
+
+      return style;
+    },
+
+    indent: function(state) {
+      return state.scopes[0].offset;
+    }
+  };
+});
+
+CodeMirror.defineMIME("text/x-sass", "sass");
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/searchcursor.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/searchcursor.js
new file mode 100644
index 000000000..3da3f04e8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/searchcursor.js
@@ -0,0 +1,143 @@
+(function(){
+  var Pos = CodeMirror.Pos;
+
+  function SearchCursor(doc, query, pos, caseFold) {
+    this.atOccurrence = false; this.doc = doc;
+    if (caseFold == null && typeof query == "string") caseFold = false;
+
+    pos = pos ? doc.clipPos(pos) : Pos(0, 0);
+    this.pos = {from: pos, to: pos};
+
+    // The matches method is filled in based on the type of query.
+    // It takes a position and a direction, and returns an object
+    // describing the next occurrence of the query, or null if no
+    // more matches were found.
+    if (typeof query != "string") { // Regexp match
+      if (!query.global) query = new RegExp(query.source, query.ignoreCase ? "ig" : "g");
+      this.matches = function(reverse, pos) {
+        if (reverse) {
+          query.lastIndex = 0;
+          var line = doc.getLine(pos.line).slice(0, pos.ch), cutOff = 0, match, start;
+          for (;;) {
+            query.lastIndex = cutOff;
+            var newMatch = query.exec(line);
+            if (!newMatch) break;
+            match = newMatch;
+            start = match.index;
+            cutOff = match.index + (match[0].length || 1);
+            if (cutOff == line.length) break;
+          }
+          var matchLen = (match && match[0].length) || 0;
+          if (!matchLen) {
+            if (start == 0 && line.length == 0) {match = undefined;}
+            else if (start != doc.getLine(pos.line).length) {
+              matchLen++;
+            }
+          }
+        } else {
+          query.lastIndex = pos.ch;
+          var line = doc.getLine(pos.line), match = query.exec(line);
+          var matchLen = (match && match[0].length) || 0;
+          var start = match && match.index;
+          if (start + matchLen != line.length && !matchLen) matchLen = 1;
+        }
+        if (match && matchLen)
+          return {from: Pos(pos.line, start),
+                  to: Pos(pos.line, start + matchLen),
+                  match: match};
+      };
+    } else { // String query
+      if (caseFold) query = query.toLowerCase();
+      var fold = caseFold ? function(str){return str.toLowerCase();} : function(str){return str;};
+      var target = query.split("\n");
+      // Different methods for single-line and multi-line queries
+      if (target.length == 1) {
+        if (!query.length) {
+          // Empty string would match anything and never progress, so
+          // we define it to match nothing instead.
+          this.matches = function() {};
+        } else {
+          this.matches = function(reverse, pos) {
+            var line = fold(doc.getLine(pos.line)), len = query.length, match;
+            if (reverse ? (pos.ch >= len && (match = line.lastIndexOf(query, pos.ch - len)) != -1)
+                        : (match = line.indexOf(query, pos.ch)) != -1)
+              return {from: Pos(pos.line, match),
+                      to: Pos(pos.line, match + len)};
+          };
+        }
+      } else {
+        this.matches = function(reverse, pos) {
+          var ln = pos.line, idx = (reverse ? target.length - 1 : 0), match = target[idx], line = fold(doc.getLine(ln));
+          var offsetA = (reverse ? line.indexOf(match) + match.length : line.lastIndexOf(match));
+          if (reverse ? offsetA >= pos.ch || offsetA != match.length
+              : offsetA <= pos.ch || offsetA != line.length - match.length)
+            return;
+          for (;;) {
+            if (reverse ? !ln : ln == doc.lineCount() - 1) return;
+            line = fold(doc.getLine(ln += reverse ? -1 : 1));
+            match = target[reverse ? --idx : ++idx];
+            if (idx > 0 && idx < target.length - 1) {
+              if (line != match) return;
+              else continue;
+            }
+            var offsetB = (reverse ? line.lastIndexOf(match) : line.indexOf(match) + match.length);
+            if (reverse ? offsetB != line.length - match.length : offsetB != match.length)
+              return;
+            var start = Pos(pos.line, offsetA), end = Pos(ln, offsetB);
+            return {from: reverse ? end : start, to: reverse ? start : end};
+          }
+        };
+      }
+    }
+  }
+
+  SearchCursor.prototype = {
+    findNext: function() {return this.find(false);},
+    findPrevious: function() {return this.find(true);},
+
+    find: function(reverse) {
+      var self = this, pos = this.doc.clipPos(reverse ? this.pos.from : this.pos.to);
+      function savePosAndFail(line) {
+        var pos = Pos(line, 0);
+        self.pos = {from: pos, to: pos};
+        self.atOccurrence = false;
+        return false;
+      }
+
+      for (;;) {
+        if (this.pos = this.matches(reverse, pos)) {
+          if (!this.pos.from || !this.pos.to) { console.log(this.matches, this.pos); }
+          this.atOccurrence = true;
+          return this.pos.match || true;
+        }
+        if (reverse) {
+          if (!pos.line) return savePosAndFail(0);
+          pos = Pos(pos.line-1, this.doc.getLine(pos.line-1).length);
+        }
+        else {
+          var maxLine = this.doc.lineCount();
+          if (pos.line == maxLine - 1) return savePosAndFail(maxLine);
+          pos = Pos(pos.line + 1, 0);
+        }
+      }
+    },
+
+    from: function() {if (this.atOccurrence) return this.pos.from;},
+    to: function() {if (this.atOccurrence) return this.pos.to;},
+
+    replace: function(newText) {
+      if (!this.atOccurrence) return;
+      var lines = CodeMirror.splitLines(newText);
+      this.doc.replaceRange(lines, this.pos.from, this.pos.to);
+      this.pos.to = Pos(this.pos.from.line + lines.length - 1,
+                        lines[lines.length - 1].length + (lines.length == 1 ? this.pos.from.ch : 0));
+    }
+  };
+
+  CodeMirror.defineExtension("getSearchCursor", function(query, pos, caseFold) {
+    return new SearchCursor(this.doc, query, pos, caseFold);
+  });
+  CodeMirror.defineDocExtension("getSearchCursor", function(query, pos, caseFold) {
+    return new SearchCursor(this, query, pos, caseFold);
+  });
+})();
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/sql.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/sql.js
new file mode 100644
index 000000000..9016cc7aa
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/sql.js
@@ -0,0 +1,349 @@
+CodeMirror.defineMode("sql", function(config, parserConfig) {
+  "use strict";
+
+  var client         = parserConfig.client || {},
+      atoms          = parserConfig.atoms || {"false": true, "true": true, "null": true},
+      builtin        = parserConfig.builtin || {},
+      keywords       = parserConfig.keywords || {},
+      operatorChars  = parserConfig.operatorChars || /^[*+\-%<>!=&|~^]/,
+      support        = parserConfig.support || {},
+      hooks          = parserConfig.hooks || {},
+      dateSQL        = parserConfig.dateSQL || {"date" : true, "time" : true, "timestamp" : true};
+
+  function tokenBase(stream, state) {
+    var ch = stream.next();
+
+    // call hooks from the mime type
+    if (hooks[ch]) {
+      var result = hooks[ch](stream, state);
+      if (result !== false) return result;
+    }
+
+    if (support.hexNumber == true &&
+      ((ch == "0" && stream.match(/^[xX][0-9a-fA-F]+/))
+      || (ch == "x" || ch == "X") && stream.match(/^'[0-9a-fA-F]+'/))) {
+      // hex
+      // ref: http://dev.mysql.com/doc/refman/5.5/en/hexadecimal-literals.html
+      return "number";
+    } else if (support.binaryNumber == true &&
+      (((ch == "b" || ch == "B") && stream.match(/^'[01]+'/))
+      || (ch == "0" && stream.match(/^b[01]+/)))) {
+      // bitstring
+      // ref: http://dev.mysql.com/doc/refman/5.5/en/bit-field-literals.html
+      return "number";
+    } else if (ch.charCodeAt(0) > 47 && ch.charCodeAt(0) < 58) {
+      // numbers
+      // ref: http://dev.mysql.com/doc/refman/5.5/en/number-literals.html
+          stream.match(/^[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?/);
+      support.decimallessFloat == true && stream.eat('.');
+      return "number";
+    } else if (ch == "?" && (stream.eatSpace() || stream.eol() || stream.eat(";"))) {
+      // placeholders
+      return "variable-3";
+    } else if (ch == "'" || (ch == '"' && support.doubleQuote)) {
+      // strings
+      // ref: http://dev.mysql.com/doc/refman/5.5/en/string-literals.html
+      state.tokenize = tokenLiteral(ch);
+      return state.tokenize(stream, state);
+    } else if ((((support.nCharCast == true && (ch == "n" || ch == "N"))
+        || (support.charsetCast == true && ch == "_" && stream.match(/[a-z][a-z0-9]*/i)))
+        && (stream.peek() == "'" || stream.peek() == '"'))) {
+      // charset casting: _utf8'str', N'str', n'str'
+      // ref: http://dev.mysql.com/doc/refman/5.5/en/string-literals.html
+      return "keyword";
+    } else if (/^[\(\),\;\[\]]/.test(ch)) {
+      // no highlightning
+      return null;
+    } else if (support.commentSlashSlash && ch == "/" && stream.eat("/")) {
+      // 1-line comment
+      stream.skipToEnd();
+      return "comment";
+    } else if ((support.commentHash && ch == "#")
+        || (ch == "-" && stream.eat("-") && (!support.commentSpaceRequired || stream.eat(" ")))) {
+      // 1-line comments
+      // ref: https://kb.askmonty.org/en/comment-syntax/
+      stream.skipToEnd();
+      return "comment";
+    } else if (ch == "/" && stream.eat("*")) {
+      // multi-line comments
+      // ref: https://kb.askmonty.org/en/comment-syntax/
+      state.tokenize = tokenComment;
+      return state.tokenize(stream, state);
+    } else if (ch == ".") {
+      // .1 for 0.1
+      if (support.zerolessFloat == true && stream.match(/^(?:\d+(?:e[+-]?\d+)?)/i)) {
+        return "number";
+      }
+      // .table_name (ODBC)
+      // // ref: http://dev.mysql.com/doc/refman/5.6/en/identifier-qualifiers.html
+      if (support.ODBCdotTable == true && stream.match(/^[a-zA-Z_]+/)) {
+        return "variable-2";
+      }
+    } else if (operatorChars.test(ch)) {
+      // operators
+      stream.eatWhile(operatorChars);
+      return null;
+    } else if (ch == '{' &&
+        (stream.match(/^( )*(d|D|t|T|ts|TS)( )*'[^']*'( )*}/) || stream.match(/^( )*(d|D|t|T|ts|TS)( )*"[^"]*"( )*}/))) {
+      // dates (weird ODBC syntax)
+      // ref: http://dev.mysql.com/doc/refman/5.5/en/date-and-time-literals.html
+      return "number";
+    } else {
+      stream.eatWhile(/^[_\w\d]/);
+      var word = stream.current().toLowerCase();
+      // dates (standard SQL syntax)
+      // ref: http://dev.mysql.com/doc/refman/5.5/en/date-and-time-literals.html
+      if (dateSQL.hasOwnProperty(word) && (stream.match(/^( )+'[^']*'/) || stream.match(/^( )+"[^"]*"/)))
+        return "number";
+      if (atoms.hasOwnProperty(word)) return "atom";
+      if (builtin.hasOwnProperty(word)) return "builtin";
+      if (keywords.hasOwnProperty(word)) return "keyword";
+      if (client.hasOwnProperty(word)) return "string-2";
+      return null;
+    }
+  }
+
+  // 'string', with char specified in quote escaped by '\'
+  function tokenLiteral(quote) {
+    return function(stream, state) {
+      var escaped = false, ch;
+      while ((ch = stream.next()) != null) {
+        if (ch == quote && !escaped) {
+          state.tokenize = tokenBase;
+          break;
+        }
+        escaped = !escaped && ch == "\\";
+      }
+      return "string";
+    };
+  }
+  function tokenComment(stream, state) {
+    while (true) {
+      if (stream.skipTo("*")) {
+        stream.next();
+        if (stream.eat("/")) {
+          state.tokenize = tokenBase;
+          break;
+        }
+      } else {
+        stream.skipToEnd();
+        break;
+      }
+    }
+    return "comment";
+  }
+
+  function pushContext(stream, state, type) {
+    state.context = {
+      prev: state.context,
+      indent: stream.indentation(),
+      col: stream.column(),
+      type: type
+    };
+  }
+
+  function popContext(state) {
+    state.indent = state.context.indent;
+    state.context = state.context.prev;
+  }
+
+  return {
+    startState: function() {
+      return {tokenize: tokenBase, context: null};
+    },
+
+    token: function(stream, state) {
+      if (stream.sol()) {
+        if (state.context && state.context.align == null)
+          state.context.align = false;
+      }
+      if (stream.eatSpace()) return null;
+
+      var style = state.tokenize(stream, state);
+      if (style == "comment") return style;
+
+      if (state.context && state.context.align == null)
+        state.context.align = true;
+
+      var tok = stream.current();
+      if (tok == "(")
+        pushContext(stream, state, ")");
+      else if (tok == "[")
+        pushContext(stream, state, "]");
+      else if (state.context && state.context.type == tok)
+        popContext(state);
+      return style;
+    },
+
+    indent: function(state, textAfter) {
+      var cx = state.context;
+      if (!cx) return CodeMirror.Pass;
+      if (cx.align) return cx.col + (textAfter.charAt(0) == cx.type ? 0 : 1);
+      else return cx.indent + config.indentUnit;
+    }
+  };
+});
+
+(function() {
+  "use strict";
+
+  // `identifier`
+  function hookIdentifier(stream) {
+    // MySQL/MariaDB identifiers
+    // ref: http://dev.mysql.com/doc/refman/5.6/en/identifier-qualifiers.html
+    var ch;
+    while ((ch = stream.next()) != null) {
+      if (ch == "`" && !stream.eat("`")) return "variable-2";
+    }
+    return null;
+  }
+
+  // variable token
+  function hookVar(stream) {
+    // variables
+    // @@prefix.varName @varName
+    // varName can be quoted with ` or ' or "
+    // ref: http://dev.mysql.com/doc/refman/5.5/en/user-variables.html
+    if (stream.eat("@")) {
+      stream.match(/^session\./);
+      stream.match(/^local\./);
+      stream.match(/^global\./);
+    }
+
+    if (stream.eat("'")) {
+      stream.match(/^.*'/);
+      return "variable-2";
+    } else if (stream.eat('"')) {
+      stream.match(/^.*"/);
+      return "variable-2";
+    } else if (stream.eat("`")) {
+      stream.match(/^.*`/);
+      return "variable-2";
+    } else if (stream.match(/^[0-9a-zA-Z$\.\_]+/)) {
+      return "variable-2";
+    }
+    return null;
+  };
+
+  // short client keyword token
+  function hookClient(stream) {
+    // \N means NULL
+    // ref: http://dev.mysql.com/doc/refman/5.5/en/null-values.html
+    if (stream.eat("N")) {
+        return "atom";
+    }
+    // \g, etc
+    // ref: http://dev.mysql.com/doc/refman/5.5/en/mysql-commands.html
+    return stream.match(/^[a-zA-Z.#!?]/) ? "variable-2" : null;
+  }
+
+  // these keywords are used by all SQL dialects (however, a mode can still overwrite it)
+  var sqlKeywords = "alter and as asc between by count create delete desc distinct drop from having in insert into is join like not on or order select set table union update values where ";
+
+  // turn a space-separated list into an array
+  function set(str) {
+    var obj = {}, words = str.split(" ");
+    for (var i = 0; i < words.length; ++i) obj[words[i]] = true;
+    return obj;
+  }
+
+  // A generic SQL Mode. It's not a standard, it just try to support what is generally supported
+  CodeMirror.defineMIME("text/x-sql", {
+    name: "sql",
+    keywords: set(sqlKeywords + "begin"),
+    builtin: set("bool boolean bit blob enum long longblob longtext medium mediumblob mediumint mediumtext time timestamp tinyblob tinyint tinytext text bigint int int1 int2 int3 int4 int8 integer float float4 float8 double char varbinary varchar varcharacter precision real date datetime year unsigned signed decimal numeric"),
+    atoms: set("false true null unknown"),
+    operatorChars: /^[*+\-%<>!=]/,
+    dateSQL: set("date time timestamp"),
+    support: set("ODBCdotTable doubleQuote binaryNumber hexNumber")
+  });
+
+  CodeMirror.defineMIME("text/x-mysql", {
+    name: "sql",
+    client: set("charset clear connect edit ego exit go help nopager notee nowarning pager print prompt quit rehash source status system tee"),
+    keywords: set(sqlKeywords + "accessible action add after algorithm all analyze asensitive at authors auto_increment autocommit avg avg_row_length before binary binlog both btree cache call cascade cascaded case catalog_name chain change changed character check checkpoint checksum class_origin client_statistics close coalesce code collate collation collations column columns comment commit committed completion concurrent condition connection consistent constraint contains continue contributors convert cross current_date current_time current_timestamp current_user cursor data database databases day_hour day_microsecond day_minute day_second deallocate dec declare default delay_key_write delayed delimiter des_key_file describe deterministic dev_pop dev_samp deviance directory disable discard distinctrow div dual dumpfile each elseif enable enclosed end ends engine engines enum errors escape escaped even event events every execute exists exit explain extended fast fetch field fields first flush for force foreign found_rows full fulltext function general global grant grants group groupby_concat handler hash help high_priority hosts hour_microsecond hour_minute hour_second if ignore ignore_server_ids import index index_statistics infile inner innodb inout insensitive insert_method install interval invoker isolation iterate key keys kill language last leading leave left level limit linear lines list load local localtime localtimestamp lock logs low_priority master master_heartbeat_period master_ssl_verify_server_cert masters match max max_rows maxvalue message_text middleint migrate min min_rows minute_microsecond minute_second mod mode modifies modify mutex mysql_errno natural next no no_write_to_binlog offline offset one online open optimize option optionally out outer outfile pack_keys parser partition partitions password phase plugin plugins prepare preserve prev primary privileges procedure processlist profile profiles purge query quick range read read_write reads real rebuild recover references regexp relaylog release remove rename reorganize repair repeatable replace require resignal restrict resume return returns revoke right rlike rollback rollup row row_format rtree savepoint schedule schema schema_name schemas second_microsecond security sensitive separator serializable server session share show signal slave slow smallint snapshot soname spatial specific sql sql_big_result sql_buffer_result sql_cache sql_calc_found_rows sql_no_cache sql_small_result sqlexception sqlstate sqlwarning ssl start starting starts status std stddev stddev_pop stddev_samp storage straight_join subclass_origin sum suspend table_name table_statistics tables tablespace temporary terminated to trailing transaction trigger triggers truncate uncommitted undo uninstall unique unlock upgrade usage use use_frm user user_resources user_statistics using utc_date utc_time utc_timestamp value variables varying view views warnings when while with work write xa xor year_month zerofill begin do then else loop repeat"),
+    builtin: set("bool boolean bit blob decimal double enum float long longblob longtext medium mediumblob mediumint mediumtext time timestamp tinyblob tinyint tinytext text bigint int int1 int2 int3 int4 int8 integer float float4 float8 double char varbinary varchar varcharacter precision date datetime year unsigned signed numeric"),
+    atoms: set("false true null unknown"),
+    operatorChars: /^[*+\-%<>!=&|^]/,
+    dateSQL: set("date time timestamp"),
+    support: set("ODBCdotTable decimallessFloat zerolessFloat binaryNumber hexNumber doubleQuote nCharCast charsetCast commentHash commentSpaceRequired"),
+    hooks: {
+      "@":   hookVar,
+      "`":   hookIdentifier,
+      "\\":  hookClient
+    }
+  });
+
+  CodeMirror.defineMIME("text/x-mariadb", {
+    name: "sql",
+    client: set("charset clear connect edit ego exit go help nopager notee nowarning pager print prompt quit rehash source status system tee"),
+    keywords: set(sqlKeywords + "accessible action add after algorithm all always analyze asensitive at authors auto_increment autocommit avg avg_row_length before binary binlog both btree cache call cascade cascaded case catalog_name chain change changed character check checkpoint checksum class_origin client_statistics close coalesce code collate collation collations column columns comment commit committed completion concurrent condition connection consistent constraint contains continue contributors convert cross current_date current_time current_timestamp current_user cursor data database databases day_hour day_microsecond day_minute day_second deallocate dec declare default delay_key_write delayed delimiter des_key_file describe deterministic dev_pop dev_samp deviance directory disable discard distinctrow div dual dumpfile each elseif enable enclosed end ends engine engines enum errors escape escaped even event events every execute exists exit explain extended fast fetch field fields first flush for force foreign found_rows full fulltext function general generated global grant grants group groupby_concat handler hard hash help high_priority hosts hour_microsecond hour_minute hour_second if ignore ignore_server_ids import index index_statistics infile inner innodb inout insensitive insert_method install interval invoker isolation iterate key keys kill language last leading leave left level limit linear lines list load local localtime localtimestamp lock logs low_priority master master_heartbeat_period master_ssl_verify_server_cert masters match max max_rows maxvalue message_text middleint migrate min min_rows minute_microsecond minute_second mod mode modifies modify mutex mysql_errno natural next no no_write_to_binlog offline offset one online open optimize option optionally out outer outfile pack_keys parser partition partitions password persistent phase plugin plugins prepare preserve prev primary privileges procedure processlist profile profiles purge query quick range read read_write reads real rebuild recover references regexp relaylog release remove rename reorganize repair repeatable replace require resignal restrict resume return returns revoke right rlike rollback rollup row row_format rtree savepoint schedule schema schema_name schemas second_microsecond security sensitive separator serializable server session share show signal slave slow smallint snapshot soft soname spatial specific sql sql_big_result sql_buffer_result sql_cache sql_calc_found_rows sql_no_cache sql_small_result sqlexception sqlstate sqlwarning ssl start starting starts status std stddev stddev_pop stddev_samp storage straight_join subclass_origin sum suspend table_name table_statistics tables tablespace temporary terminated to trailing transaction trigger triggers truncate uncommitted undo uninstall unique unlock upgrade usage use use_frm user user_resources user_statistics using utc_date utc_time utc_timestamp value variables varying view views virtual warnings when while with work write xa xor year_month zerofill begin do then else loop repeat"),
+    builtin: set("bool boolean bit blob decimal double enum float long longblob longtext medium mediumblob mediumint mediumtext time timestamp tinyblob tinyint tinytext text bigint int int1 int2 int3 int4 int8 integer float float4 float8 double char varbinary varchar varcharacter precision date datetime year unsigned signed numeric"),
+    atoms: set("false true null unknown"),
+    operatorChars: /^[*+\-%<>!=&|^]/,
+    dateSQL: set("date time timestamp"),
+    support: set("ODBCdotTable decimallessFloat zerolessFloat binaryNumber hexNumber doubleQuote nCharCast charsetCast commentHash commentSpaceRequired"),
+    hooks: {
+      "@":   hookVar,
+      "`":   hookIdentifier,
+      "\\":  hookClient
+    }
+  });
+
+  // the query language used by Apache Cassandra is called CQL, but this mime type
+  // is called Cassandra to avoid confusion with Contextual Query Language
+  CodeMirror.defineMIME("text/x-cassandra", {
+    name: "sql",
+    client: { },
+    keywords: set("use select from using consistency where limit first reversed first and in insert into values using consistency ttl update set delete truncate begin batch apply create keyspace with columnfamily primary key index on drop alter type add any one quorum all local_quorum each_quorum"),
+    builtin: set("ascii bigint blob boolean counter decimal double float int text timestamp uuid varchar varint"),
+    atoms: set("false true"),
+    operatorChars: /^[<>=]/,
+    dateSQL: { },
+    support: set("commentSlashSlash decimallessFloat"),
+    hooks: { }
+  });
+
+  // this is based on Peter Raganitsch's 'plsql' mode
+  CodeMirror.defineMIME("text/x-plsql", {
+    name:       "sql",
+    client:     set("appinfo arraysize autocommit autoprint autorecovery autotrace blockterminator break btitle cmdsep colsep compatibility compute concat copycommit copytypecheck define describe echo editfile embedded escape exec execute feedback flagger flush heading headsep instance linesize lno loboffset logsource long longchunksize markup native newpage numformat numwidth pagesize pause pno recsep recsepchar release repfooter repheader serveroutput shiftinout show showmode size spool sqlblanklines sqlcase sqlcode sqlcontinue sqlnumber sqlpluscompatibility sqlprefix sqlprompt sqlterminator suffix tab term termout time timing trimout trimspool ttitle underline verify version wrap"),
+    keywords:   set("abort accept access add all alter and any array arraylen as asc assert assign at attributes audit authorization avg base_table begin between binary_integer body boolean by case cast char char_base check close cluster clusters colauth column comment commit compress connect connected constant constraint crash create current currval cursor data_base database date dba deallocate debugoff debugon decimal declare default definition delay delete desc digits dispose distinct do drop else elsif enable end entry escape exception exception_init exchange exclusive exists exit external fast fetch file for force form from function generic goto grant group having identified if immediate in increment index indexes indicator initial initrans insert interface intersect into is key level library like limited local lock log logging long loop master maxextents maxtrans member minextents minus mislabel mode modify multiset new next no noaudit nocompress nologging noparallel not nowait number_base object of off offline on online only open option or order out package parallel partition pctfree pctincrease pctused pls_integer positive positiven pragma primary prior private privileges procedure public raise range raw read rebuild record ref references refresh release rename replace resource restrict return returning reverse revoke rollback row rowid rowlabel rownum rows run savepoint schema segment select separate session set share snapshot some space split sql start statement storage subtype successful synonym tabauth table tables tablespace task terminate then to trigger truncate type union unique unlimited unrecoverable unusable update use using validate value values variable view views when whenever where while with work"),
+    functions:  set("abs acos add_months ascii asin atan atan2 average bfilename ceil chartorowid chr concat convert cos cosh count decode deref dual dump dup_val_on_index empty error exp false floor found glb greatest hextoraw initcap instr instrb isopen last_day least lenght lenghtb ln lower lpad ltrim lub make_ref max min mod months_between new_time next_day nextval nls_charset_decl_len nls_charset_id nls_charset_name nls_initcap nls_lower nls_sort nls_upper nlssort no_data_found notfound null nvl others power rawtohex reftohex round rowcount rowidtochar rpad rtrim sign sin sinh soundex sqlcode sqlerrm sqrt stddev substr substrb sum sysdate tan tanh to_char to_date to_label to_multi_byte to_number to_single_byte translate true trunc uid upper user userenv variance vsize"),
+    builtin:    set("bfile blob character clob dec float int integer mlslabel natural naturaln nchar nclob number numeric nvarchar2 real rowtype signtype smallint string varchar varchar2"),
+    operatorChars: /^[*+\-%<>!=~]/,
+    dateSQL:    set("date time timestamp"),
+    support:    set("doubleQuote nCharCast zerolessFloat binaryNumber hexNumber")
+  });
+}());
+
+/*
+  How Properties of Mime Types are used by SQL Mode
+  =================================================
+
+  keywords:
+    A list of keywords you want to be highlighted.
+  functions:
+    A list of function names you want to be highlighted.
+  builtin:
+    A list of builtin types you want to be highlighted (if you want types to be of class "builtin" instead of "keyword").
+  operatorChars:
+    All characters that must be handled as operators.
+  client:
+    Commands parsed and executed by the client (not the server).
+  support:
+    A list of supported syntaxes which are not common, but are supported by more than 1 DBMS.
+    * ODBCdotTable: .tableName
+    * zerolessFloat: .1
+    * doubleQuote
+    * nCharCast: N'string'
+    * charsetCast: _utf8'string'
+    * commentHash: use # char for comments
+    * commentSlashSlash: use // for comments
+    * commentSpaceRequired: require a space after -- for comments
+  atoms:
+    Keywords that must be highlighted as atoms,. Some DBMS's support more atoms than others:
+    UNKNOWN, INFINITY, UNDERFLOW, NaN...
+  dateSQL:
+    Used for date/time SQL standard syntax, because not all DBMS's support same temporal types.
+*/
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/xml.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/xml.js
new file mode 100644
index 000000000..07db29903
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/xml.js
@@ -0,0 +1,327 @@
+CodeMirror.defineMode("xml", function(config, parserConfig) {
+  var indentUnit = config.indentUnit;
+  var multilineTagIndentFactor = parserConfig.multilineTagIndentFactor || 1;
+
+  var Kludges = parserConfig.htmlMode ? {
+    autoSelfClosers: {'area': true, 'base': true, 'br': true, 'col': true, 'command': true,
+                      'embed': true, 'frame': true, 'hr': true, 'img': true, 'input': true,
+                      'keygen': true, 'link': true, 'meta': true, 'param': true, 'source': true,
+                      'track': true, 'wbr': true},
+    implicitlyClosed: {'dd': true, 'li': true, 'optgroup': true, 'option': true, 'p': true,
+                       'rp': true, 'rt': true, 'tbody': true, 'td': true, 'tfoot': true,
+                       'th': true, 'tr': true},
+    contextGrabbers: {
+      'dd': {'dd': true, 'dt': true},
+      'dt': {'dd': true, 'dt': true},
+      'li': {'li': true},
+      'option': {'option': true, 'optgroup': true},
+      'optgroup': {'optgroup': true},
+      'p': {'address': true, 'article': true, 'aside': true, 'blockquote': true, 'dir': true,
+            'div': true, 'dl': true, 'fieldset': true, 'footer': true, 'form': true,
+            'h1': true, 'h2': true, 'h3': true, 'h4': true, 'h5': true, 'h6': true,
+            'header': true, 'hgroup': true, 'hr': true, 'menu': true, 'nav': true, 'ol': true,
+            'p': true, 'pre': true, 'section': true, 'table': true, 'ul': true},
+      'rp': {'rp': true, 'rt': true},
+      'rt': {'rp': true, 'rt': true},
+      'tbody': {'tbody': true, 'tfoot': true},
+      'td': {'td': true, 'th': true},
+      'tfoot': {'tbody': true},
+      'th': {'td': true, 'th': true},
+      'thead': {'tbody': true, 'tfoot': true},
+      'tr': {'tr': true}
+    },
+    doNotIndent: {"pre": true},
+    allowUnquoted: true,
+    allowMissing: true
+  } : {
+    autoSelfClosers: {},
+    implicitlyClosed: {},
+    contextGrabbers: {},
+    doNotIndent: {},
+    allowUnquoted: false,
+    allowMissing: false
+  };
+  var alignCDATA = parserConfig.alignCDATA;
+
+  // Return variables for tokenizers
+  var tagName, type;
+
+  function inText(stream, state) {
+    function chain(parser) {
+      state.tokenize = parser;
+      return parser(stream, state);
+    }
+
+    var ch = stream.next();
+    if (ch == "<") {
+      if (stream.eat("!")) {
+        if (stream.eat("[")) {
+          if (stream.match("CDATA[")) return chain(inBlock("atom", "]]>"));
+          else return null;
+        } else if (stream.match("--")) {
+          return chain(inBlock("comment", "-->"));
+        } else if (stream.match("DOCTYPE", true, true)) {
+          stream.eatWhile(/[\w\._\-]/);
+          return chain(doctype(1));
+        } else {
+          return null;
+        }
+      } else if (stream.eat("?")) {
+        stream.eatWhile(/[\w\._\-]/);
+        state.tokenize = inBlock("meta", "?>");
+        return "meta";
+      } else {
+        var isClose = stream.eat("/");
+        tagName = "";
+        var c;
+        while ((c = stream.eat(/[^\s\u00a0=<>\"\'\/?]/))) tagName += c;
+        if (!tagName) return "error";
+        type = isClose ? "closeTag" : "openTag";
+        state.tokenize = inTag;
+        return "tag";
+      }
+    } else if (ch == "&") {
+      var ok;
+      if (stream.eat("#")) {
+        if (stream.eat("x")) {
+          ok = stream.eatWhile(/[a-fA-F\d]/) && stream.eat(";");
+        } else {
+          ok = stream.eatWhile(/[\d]/) && stream.eat(";");
+        }
+      } else {
+        ok = stream.eatWhile(/[\w\.\-:]/) && stream.eat(";");
+      }
+      return ok ? "atom" : "error";
+    } else {
+      stream.eatWhile(/[^&<]/);
+      return null;
+    }
+  }
+
+  function inTag(stream, state) {
+    var ch = stream.next();
+    if (ch == ">" || (ch == "/" && stream.eat(">"))) {
+      state.tokenize = inText;
+      type = ch == ">" ? "endTag" : "selfcloseTag";
+      return "tag";
+    } else if (ch == "=") {
+      type = "equals";
+      return null;
+    } else if (ch == "<") {
+      return "error";
+    } else if (/[\'\"]/.test(ch)) {
+      state.tokenize = inAttribute(ch);
+      return state.tokenize(stream, state);
+    } else {
+      stream.eatWhile(/[^\s\u00a0=<>\"\']/);
+      return "word";
+    }
+  }
+
+  function inAttribute(quote) {
+    return function(stream, state) {
+      while (!stream.eol()) {
+        if (stream.next() == quote) {
+          state.tokenize = inTag;
+          break;
+        }
+      }
+      return "string";
+    };
+  }
+
+  function inBlock(style, terminator) {
+    return function(stream, state) {
+      while (!stream.eol()) {
+        if (stream.match(terminator)) {
+          state.tokenize = inText;
+          break;
+        }
+        stream.next();
+      }
+      return style;
+    };
+  }
+  function doctype(depth) {
+    return function(stream, state) {
+      var ch;
+      while ((ch = stream.next()) != null) {
+        if (ch == "<") {
+          state.tokenize = doctype(depth + 1);
+          return state.tokenize(stream, state);
+        } else if (ch == ">") {
+          if (depth == 1) {
+            state.tokenize = inText;
+            break;
+          } else {
+            state.tokenize = doctype(depth - 1);
+            return state.tokenize(stream, state);
+          }
+        }
+      }
+      return "meta";
+    };
+  }
+
+  var curState, curStream, setStyle;
+  function pass() {
+    for (var i = arguments.length - 1; i >= 0; i--) curState.cc.push(arguments[i]);
+  }
+  function cont() {
+    pass.apply(null, arguments);
+    return true;
+  }
+
+  function pushContext(tagName, startOfLine) {
+    var noIndent = Kludges.doNotIndent.hasOwnProperty(tagName) || (curState.context && curState.context.noIndent);
+    curState.context = {
+      prev: curState.context,
+      tagName: tagName,
+      indent: curState.indented,
+      startOfLine: startOfLine,
+      noIndent: noIndent
+    };
+  }
+  function popContext() {
+    if (curState.context) curState.context = curState.context.prev;
+  }
+
+  function element(type) {
+    if (type == "openTag") {
+      curState.tagName = tagName;
+      curState.tagStart = curStream.column();
+      return cont(attributes, endtag(curState.startOfLine));
+    } else if (type == "closeTag") {
+      var err = false;
+      if (curState.context) {
+        if (curState.context.tagName != tagName) {
+          if (Kludges.implicitlyClosed.hasOwnProperty(curState.context.tagName.toLowerCase())) {
+            popContext();
+          }
+          err = !curState.context || curState.context.tagName != tagName;
+        }
+      } else {
+        err = true;
+      }
+      if (err) setStyle = "error";
+      return cont(endclosetag(err));
+    }
+    return cont();
+  }
+  function endtag(startOfLine) {
+    return function(type) {
+      var tagName = curState.tagName;
+      curState.tagName = curState.tagStart = null;
+      if (type == "selfcloseTag" ||
+          (type == "endTag" && Kludges.autoSelfClosers.hasOwnProperty(tagName.toLowerCase()))) {
+        maybePopContext(tagName.toLowerCase());
+        return cont();
+      }
+      if (type == "endTag") {
+        maybePopContext(tagName.toLowerCase());
+        pushContext(tagName, startOfLine);
+        return cont();
+      }
+      return cont();
+    };
+  }
+  function endclosetag(err) {
+    return function(type) {
+      if (err) setStyle = "error";
+      if (type == "endTag") { popContext(); return cont(); }
+      setStyle = "error";
+      return cont(arguments.callee);
+    };
+  }
+  function maybePopContext(nextTagName) {
+    var parentTagName;
+    while (true) {
+      if (!curState.context) {
+        return;
+      }
+      parentTagName = curState.context.tagName.toLowerCase();
+      if (!Kludges.contextGrabbers.hasOwnProperty(parentTagName) ||
+          !Kludges.contextGrabbers[parentTagName].hasOwnProperty(nextTagName)) {
+        return;
+      }
+      popContext();
+    }
+  }
+
+  function attributes(type) {
+    if (type == "word") {setStyle = "attribute"; return cont(attribute, attributes);}
+    if (type == "endTag" || type == "selfcloseTag") return pass();
+    setStyle = "error";
+    return cont(attributes);
+  }
+  function attribute(type) {
+    if (type == "equals") return cont(attvalue, attributes);
+    if (!Kludges.allowMissing) setStyle = "error";
+    else if (type == "word") setStyle = "attribute";
+    return (type == "endTag" || type == "selfcloseTag") ? pass() : cont();
+  }
+  function attvalue(type) {
+    if (type == "string") return cont(attvaluemaybe);
+    if (type == "word" && Kludges.allowUnquoted) {setStyle = "string"; return cont();}
+    setStyle = "error";
+    return (type == "endTag" || type == "selfCloseTag") ? pass() : cont();
+  }
+  function attvaluemaybe(type) {
+    if (type == "string") return cont(attvaluemaybe);
+    else return pass();
+  }
+
+  return {
+    startState: function() {
+      return {tokenize: inText, cc: [], indented: 0, startOfLine: true, tagName: null, tagStart: null, context: null};
+    },
+
+    token: function(stream, state) {
+      if (!state.tagName && stream.sol()) {
+        state.startOfLine = true;
+        state.indented = stream.indentation();
+      }
+      if (stream.eatSpace()) return null;
+
+      setStyle = type = tagName = null;
+      var style = state.tokenize(stream, state);
+      state.type = type;
+      if ((style || type) && style != "comment") {
+        curState = state; curStream = stream;
+        while (true) {
+          var comb = state.cc.pop() || element;
+          if (comb(type || style)) break;
+        }
+      }
+      state.startOfLine = false;
+      return setStyle || style;
+    },
+
+    indent: function(state, textAfter, fullLine) {
+      var context = state.context;
+      if ((state.tokenize != inTag && state.tokenize != inText) ||
+          context && context.noIndent)
+        return fullLine ? fullLine.match(/^(\s*)/)[0].length : 0;
+      if (state.tagName) return state.tagStart + indentUnit * multilineTagIndentFactor;
+      if (alignCDATA && /<!\[CDATA\[/.test(textAfter)) return 0;
+      if (context && /^<\//.test(textAfter))
+        context = context.prev;
+      while (context && !context.startOfLine)
+        context = context.prev;
+      if (context) return context.indent + indentUnit;
+      else return 0;
+    },
+
+    electricChars: "/",
+    blockCommentStart: "<!--",
+    blockCommentEnd: "-->",
+
+    configuration: parserConfig.htmlMode ? "html" : "xml",
+    helperType: parserConfig.htmlMode ? "html" : "xml"
+  };
+});
+
+CodeMirror.defineMIME("text/xml", "xml");
+CodeMirror.defineMIME("application/xml", "xml");
+if (!CodeMirror.mimeModes.hasOwnProperty("text/html"))
+  CodeMirror.defineMIME("text/html", {name: "xml", htmlMode: true});
diff --git a/Source/WebInspectorUI/UserInterface/FilterBar.css b/Source/WebInspectorUI/UserInterface/FilterBar.css
new file mode 100644
index 000000000..1f6d6d774
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/FilterBar.css
@@ -0,0 +1,75 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.filter-bar {
+    display: -webkit-flex;
+
+    height: 21px;
+
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.filter-bar > input[type="search"] {
+    display: -webkit-flex;
+    -webkit-flex: 1;
+
+    margin: 1px 6px;
+
+    outline: none;
+
+    -webkit-appearance: none;
+
+    border: 1px solid rgba(0, 0, 0, 0.35);
+    border-radius: 10px;
+    background-color: rgba(255, 255, 255, 0.2);
+    box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0;
+    background-clip: padding-box;
+
+    height: 19px;
+
+    transition: background-color 200ms ease-in-out;
+}
+
+.filter-bar > input[type="search"]::-webkit-input-placeholder {
+    color: rgba(0, 0, 0, 0.35);
+}
+
+.filter-bar > input[type="search"]:focus { background-color: white; }
+.filter-bar > input[type="search"]:not(:placeholder-shown) { background-color: white; } /* Needs to be a separate rule. See http://webkit.org/b/118162 */
+
+.filter-bar > input[type="search"]::-webkit-search-decoration {
+    width: 13px;
+    height: 13px;
+
+    margin-left: 1px;
+    margin-right: 3px;
+
+    vertical-align: bottom;
+
+    background-image: url(Images/FilterFieldGlyph.pdf);
+
+    -webkit-appearance: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/FilterBar.js b/Source/WebInspectorUI/UserInterface/FilterBar.js
new file mode 100644
index 000000000..e254b70ef
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/FilterBar.js
@@ -0,0 +1,103 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FilterBar = function(element) {
+    WebInspector.Object.call(this);
+
+    this._element = element || document.createElement("div");
+    this._element.classList.add(WebInspector.FilterBar.StyleClassName);
+
+    this._inputField = document.createElement("input");
+    this._inputField.type = "search";
+    this._inputField.spellcheck = false;
+    this._inputField.incremental = true;
+    this._inputField.addEventListener("search", this._inputFieldChanged.bind(this), false);
+    this._element.appendChild(this._inputField);
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.FilterBar);
+
+WebInspector.FilterBar.StyleClassName = "filter-bar";
+
+WebInspector.FilterBar.Event = {
+    TextFilterDidChange: "filter-bar-text-filter-did-change"
+};
+
+WebInspector.FilterBar.prototype = {
+    constructor: WebInspector.FilterBar,
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get placeholder()
+    {
+        return this._inputField.getAttribute("placeholder");
+    },
+
+    set placeholder(text)
+    {
+        this._inputField.setAttribute("placeholder", text);
+    },
+
+    get inputField()
+    {
+        return this._inputField;
+    },
+
+    get filters()
+    {
+        return {text: this._inputField.value};
+    },
+
+    set filters(filters)
+    {
+        filters = filters || {};
+
+        var oldTextValue = this._inputField.value;
+        this._inputField.value = filters.text || "";
+        if (oldTextValue !== this._inputField.value)
+            this._inputFieldChanged();
+    },
+
+    hasActiveFilters: function()
+    {
+        if (this._inputField.value)
+            return true;
+        return false;
+    },
+
+    // Private
+
+    _inputFieldChanged: function(event)
+    {
+        this.dispatchEventToListeners(WebInspector.FilterBar.Event.TextFilterDidChange);
+    }
+};
+
+WebInspector.FilterBar.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/FindBanner.css b/Source/WebInspectorUI/UserInterface/FindBanner.css
new file mode 100644
index 000000000..ab495d6b7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/FindBanner.css
@@ -0,0 +1,196 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.find-banner {
+    border-bottom: 1px solid rgb(153, 153, 153);
+
+    font-family: "Lucida Grande", sans-serif;
+    font-size: 11px;
+
+    position: absolute;
+    top: -22px;
+    left: 0;
+    right: 0;
+    height: 22px;
+
+    text-align: right;
+
+    white-space: nowrap;
+    overflow: hidden;
+
+    -webkit-transition-property: top;
+    -webkit-transition-duration: 200ms;
+    -webkit-transition-timing-function: ease-in;
+
+    z-index: 500;
+}
+
+.find-banner.showing {
+    top: 0;
+    -webkit-transition-timing-function: ease-out;
+}
+
+.find-banner.no-find-banner-transition,
+.supports-find-banner.no-find-banner-transition {
+    -webkit-transition-duration: 0 !important;
+}
+
+.supports-find-banner {
+    -webkit-transition-property: top;
+    -webkit-transition-duration: 200ms;
+    -webkit-transition-timing-function: ease-in;
+}
+
+.supports-find-banner.showing-find-banner {
+    top: 22px !important;
+    -webkit-transition-timing-function: ease-out;
+}
+
+.find-banner > :first-child {
+    margin-left: 8px !important;
+}
+
+.find-banner > :last-child {
+    margin-right: 8px !important;
+}
+
+.find-banner > input[type="search"] {
+    margin: 1px 4px;
+
+    width: 143px;
+    height: 19px;
+
+    vertical-align: top;
+
+    -webkit-appearance: none;
+
+    outline: none;
+
+    border: 1px solid rgb(146, 146, 146);
+    border-radius: 4px;
+    background-color: white;
+    box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0;
+}
+
+.find-banner > button {
+    margin: 1px 4px;
+
+    padding-left: 6px;
+    padding-right: 6px;
+
+    -webkit-appearance: none;
+
+    border-radius: 4px;
+    border: 1px solid rgb(146, 146, 146);
+
+    background-color: white;
+    background-image: none;
+    box-shadow: none;
+
+    line-height: 11px;
+
+    height: 19px;
+
+    text-align: center;
+    vertical-align: top;
+
+    outline-offset: -2px;
+}
+
+.find-banner > button > .glyph {
+    display: inline-block;
+
+    width: 7px;
+    height: 7px;
+}
+
+.find-banner > button:disabled > .glyph {
+    opacity: 0.65;
+}
+
+.find-banner > button:active:not(:disabled) {
+    border: 1px solid rgb(141, 141, 141);
+    background-image: -webkit-linear-gradient(top, rgb(200, 200, 200), rgb(218, 218, 218));
+    box-shadow: rgba(255, 255, 255, 0.33) 0 1px 0, inset rgb(165, 165, 165) 0 1px 1px;
+}
+
+.find-banner > button:disabled {
+    border: 1px solid rgb(195, 195, 195);
+    background-image: none;
+}
+
+.find-banner > button.segmented.left {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    margin-right: 0;
+
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
+.find-banner > button.segmented.left > .glyph {
+    background-image: -webkit-canvas(find-banner-previous-arrow-normal);
+    background-size: 7px 7px;
+    background-repeat: no-repeat;
+}
+
+.find-banner > button.segmented.left:active:not(:disabled) > .glyph {
+    background-image: -webkit-canvas(find-banner-previous-arrow-normal-active);
+}
+
+.find-banner > button.segmented.right {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+
+    margin-left: -1px;
+
+    padding-left: 5px;
+    padding-right: 7px;
+}
+
+.find-banner > button.segmented.right > .glyph {
+    background-image: -webkit-canvas(find-banner-next-arrow-normal);
+    background-size: 7px 7px;
+    background-repeat: no-repeat;
+}
+
+.find-banner > button.segmented.right:active:not(:disabled) > .glyph {
+    background-image: -webkit-canvas(find-banner-next-arrow-normal-active);
+}
+
+.find-banner > button.segmented {
+    min-width: 22px;
+}
+
+.find-banner > button.segmented:active {
+    z-index: 100;
+    position: relative;
+}
+
+.find-banner > label {
+    margin: 0 6px;
+    line-height: 21px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/FindBanner.js b/Source/WebInspectorUI/UserInterface/FindBanner.js
new file mode 100644
index 000000000..8d1249fc3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/FindBanner.js
@@ -0,0 +1,334 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FindBanner = function(delegate, element) {
+    WebInspector.Object.call(this);
+
+    this._delegate = delegate || null;
+
+    this._element = element || document.createElement("div");
+    this._element.classList.add(WebInspector.FindBanner.StyleClassName);
+
+    this._resultCountLabel = document.createElement("label");
+    this._element.appendChild(this._resultCountLabel);
+
+    this._previousResultButton = document.createElement("button");
+    this._previousResultButton.classList.add(WebInspector.FindBanner.SegmentedButtonStyleClassName);
+    this._previousResultButton.classList.add(WebInspector.FindBanner.LeftSegmentButtonStyleClassName);
+    this._previousResultButton.disabled = true;
+    this._previousResultButton.addEventListener("click", this._previousResultButtonClicked.bind(this));
+    this._element.appendChild(this._previousResultButton);
+
+    var previousResultButtonGlyphElement = document.createElement("div");
+    previousResultButtonGlyphElement.classList.add(WebInspector.FindBanner.SegmentGlyphStyleClassName);
+    this._previousResultButton.appendChild(previousResultButtonGlyphElement);
+
+    this._nextResultButton = document.createElement("button");
+    this._nextResultButton.classList.add(WebInspector.FindBanner.SegmentedButtonStyleClassName);
+    this._nextResultButton.classList.add(WebInspector.FindBanner.RightSegmentButtonStyleClassName);
+    this._nextResultButton.disabled = true;
+    this._nextResultButton.addEventListener("click", this._nextResultButtonClicked.bind(this));
+    this._element.appendChild(this._nextResultButton);
+
+    var nextResultButtonGlyphElement = document.createElement("div");
+    nextResultButtonGlyphElement.classList.add(WebInspector.FindBanner.SegmentGlyphStyleClassName);
+    this._nextResultButton.appendChild(nextResultButtonGlyphElement);
+
+    this._inputField = document.createElement("input");
+    this._inputField.type = "search";
+    this._inputField.spellcheck = false;
+    this._inputField.incremental = true;
+    this._inputField.setAttribute("results", 5);
+    this._inputField.setAttribute("autosave", "inspector-search");
+    this._inputField.addEventListener("keydown", this._inputFieldKeyDown.bind(this), false);
+    this._inputField.addEventListener("keyup", this._inputFieldKeyUp.bind(this), false);
+    this._inputField.addEventListener("search", this._inputFieldSearch.bind(this), false);
+    this._element.appendChild(this._inputField);
+
+    this._doneButton = document.createElement("button");
+    this._doneButton.textContent = WebInspector.UIString("Done");
+    this._doneButton.addEventListener("click", this._doneButtonClicked.bind(this));
+    this._element.appendChild(this._doneButton);
+
+    this._numberOfResults = null;
+    this._searchBackwards = false;
+    this._searchKeyPressed = false;
+    this._previousSearchValue = "";
+
+    this._hideKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape, this.hide.bind(this), this._element);
+    this._populateFindKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "E", this._populateSearchQueryFromSelection.bind(this));
+    this._populateFindKeyboardShortcut.implicitlyPreventsDefault = false;
+    this._findNextKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "G", this._nextResultButtonClicked.bind(this));
+    this._findPreviousKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.Command, "G", this._previousResultButtonClicked.bind(this));
+
+    this._generateButtonsGlyphsIfNeeded();
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.FindBanner);
+
+WebInspector.FindBanner.StyleClassName = "find-banner";
+WebInspector.FindBanner.SupportsFindBannerStyleClassName = "supports-find-banner";
+WebInspector.FindBanner.ShowingFindBannerStyleClassName = "showing-find-banner";
+WebInspector.FindBanner.NoTransitionStyleClassName = "no-find-banner-transition";
+WebInspector.FindBanner.ShowingStyleClassName = "showing";
+WebInspector.FindBanner.SegmentedButtonStyleClassName = "segmented";
+WebInspector.FindBanner.LeftSegmentButtonStyleClassName = "left";
+WebInspector.FindBanner.RightSegmentButtonStyleClassName = "right";
+WebInspector.FindBanner.SegmentGlyphStyleClassName = "glyph";
+
+WebInspector.FindBanner.Event = {
+    DidShow: "find-banner-did-show",
+    DidHide: "find-banner-did-hide"
+}
+
+WebInspector.FindBanner.prototype = {
+    constructor: WebInspector.FindBanner,
+
+    // Public
+
+    get delegate()
+    {
+        return this._delegate;
+    },
+
+    set delegate(newDelegate)
+    {
+        this._delegate = newDelegate || null;
+    },
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get inputField()
+    {
+        return this._inputField;
+    },
+
+    get searchQuery()
+    {
+        return this._inputField.value || "";
+    },
+
+    set searchQuery(query)
+    {
+        this._inputField.value = query || "";
+    },
+
+    get numberOfResults()
+    {
+        return this._numberOfResults;
+    },
+
+    set numberOfResults(numberOfResults)
+    {
+        if (numberOfResults === undefined || isNaN(numberOfResults))
+            numberOfResults = null;
+
+        this._numberOfResults = numberOfResults;
+
+        this._previousResultButton.disabled = this._nextResultButton.disabled = (numberOfResults <= 0);
+
+        if (numberOfResults === null)
+            this._resultCountLabel.textContent = "";
+        else if (numberOfResults <= 0)
+            this._resultCountLabel.textContent = WebInspector.UIString("Not found");
+        else if (numberOfResults === 1)
+            this._resultCountLabel.textContent = WebInspector.UIString("1 match");
+        else if (numberOfResults > 1)
+            this._resultCountLabel.textContent = WebInspector.UIString("%d matches").format(numberOfResults);
+    },
+
+    get targetElement()
+    {
+        return this._targetElement;
+    },
+
+    set targetElement(element)
+    {
+        if (this._targetElement) {
+            var oldTargetElement = this._targetElement;
+
+            this._targetElement.classList.add(WebInspector.FindBanner.NoTransitionStyleClassName);
+            this._targetElement.classList.remove(WebInspector.FindBanner.SupportsFindBannerStyleClassName);
+            this._targetElement.classList.remove(WebInspector.FindBanner.ShowingFindBannerStyleClassName);
+
+            this._element.classList.add(WebInspector.FindBanner.NoTransitionStyleClassName);
+            this._element.classList.remove(WebInspector.FindBanner.ShowingStyleClassName);
+
+            function delayedWork()
+            {
+                oldTargetElement.classList.remove(WebInspector.FindBanner.NoTransitionStyleClassName);
+                this._element.classList.remove(WebInspector.FindBanner.NoTransitionStyleClassName);
+            }
+
+            // Delay so we can remove the no transition style class after the other style changes are committed.
+            setTimeout(delayedWork.bind(this), 0);
+        }
+
+        this._targetElement = element || null;
+
+        if (this._targetElement)
+            this._targetElement.classList.add(WebInspector.FindBanner.SupportsFindBannerStyleClassName);
+    },
+
+    get showing()
+    {
+        return this._element.classList.contains(WebInspector.FindBanner.ShowingStyleClassName);
+    },
+
+    show: function()
+    {
+        console.assert(this._targetElement);
+        if (!this._targetElement)
+            return;
+
+        console.assert(this._targetElement.parentNode);
+        if (!this._targetElement.parentNode)
+            return;
+
+        if (this._element.parentNode !== this._targetElement.parentNode)
+            this._targetElement.parentNode.insertBefore(this._element, this._targetElement);
+
+        function delayedWork()
+        {
+            this._targetElement.classList.add(WebInspector.FindBanner.ShowingFindBannerStyleClassName);
+            this._element.classList.add(WebInspector.FindBanner.ShowingStyleClassName);
+
+            this._inputField.select();
+        }
+
+        // Delay adding the classes in case the target element and/or the find banner were just added to
+        // the document. Adding the class right away will prevent the animation from working the firs time.
+        setTimeout(delayedWork.bind(this), 0);
+
+        this.dispatchEventToListeners(WebInspector.FindBanner.Event.DidShow);
+    },
+
+    hide: function()
+    {
+        console.assert(this._targetElement);
+        if (!this._targetElement)
+            return;
+
+        this._inputField.blur();
+
+        this._targetElement.classList.remove(WebInspector.FindBanner.ShowingFindBannerStyleClassName);
+        this._element.classList.remove(WebInspector.FindBanner.ShowingStyleClassName);
+
+        this.dispatchEventToListeners(WebInspector.FindBanner.Event.DidHide);
+    },
+
+    // Private
+
+    _inputFieldKeyDown: function(event)
+    {
+        if (event.keyIdentifier === "Shift")
+            this._searchBackwards = true;
+        else if (event.keyIdentifier === "Enter")
+            this._searchKeyPressed = true;
+    },
+
+    _inputFieldKeyUp: function(event)
+    {
+        if (event.keyIdentifier === "Shift")
+            this._searchBackwards = false;
+        else if (event.keyIdentifier === "Enter")
+            this._searchKeyPressed = false;
+    },
+
+    _inputFieldSearch: function(event)
+    {
+        if (this._inputField.value) {
+            if (this._previousSearchValue !== this.searchQuery) {
+                if (this._delegate && typeof this._delegate.findBannerPerformSearch === "function")
+                    this._delegate.findBannerPerformSearch(this, this.searchQuery);
+            } else if (this._searchKeyPressed && this._numberOfResults > 0) {
+                if (this._searchBackwards) {
+                    if (this._delegate && typeof this._delegate.findBannerRevealPreviousResult === "function")
+                        this._delegate.findBannerRevealPreviousResult(this);
+                } else {
+                    if (this._delegate && typeof this._delegate.findBannerRevealNextResult === "function")
+                        this._delegate.findBannerRevealNextResult(this);
+                }
+            }
+        } else {
+            this.numberOfResults = null;
+
+            if (this._delegate && typeof this._delegate.findBannerSearchCleared === "function")
+                this._delegate.findBannerSearchCleared(this);
+        }
+
+        this._previousSearchValue = this.searchQuery;
+    },
+
+    _populateSearchQueryFromSelection: function(event)
+    {
+        if (this._delegate && typeof this._delegate.findBannerSearchQueryForSelection === "function") {
+            var query = this._delegate.findBannerSearchQueryForSelection(this);
+            if (query) {
+                this.searchQuery = query;
+
+                if (this._delegate && typeof this._delegate.findBannerPerformSearch === "function")
+                    this._delegate.findBannerPerformSearch(this, this.searchQuery);
+            }
+        }
+    },
+
+    _previousResultButtonClicked: function(event)
+    {
+        if (this._delegate && typeof this._delegate.findBannerRevealPreviousResult === "function")
+            this._delegate.findBannerRevealPreviousResult(this);
+    },
+
+    _nextResultButtonClicked: function(event)
+    {
+        if (this._delegate && typeof this._delegate.findBannerRevealNextResult === "function")
+            this._delegate.findBannerRevealNextResult(this);
+    },
+
+    _doneButtonClicked: function(event)
+    {
+        this.hide();
+    },
+
+    _generateButtonsGlyphsIfNeeded: function()
+    {
+        if (WebInspector.FindBanner._generatedButtonsGlyphs)
+            return;
+
+        WebInspector.FindBanner._generatedButtonsGlyphs = true;
+
+        var specifications = {};
+        specifications["normal"] = {fillColor: [81, 81, 81]};
+        specifications["normal-active"] = {fillColor: [37, 37, 37]};
+
+        generateColoredImagesForCSS("Images/BackArrow.pdf", specifications, 7, 7, "find-banner-previous-arrow-");
+        generateColoredImagesForCSS("Images/ForwardArrow.pdf", specifications, 7, 7, "find-banner-next-arrow-");
+    }
+};
+
+WebInspector.FindBanner.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/FlexibleSpaceNavigationItem.css b/Source/WebInspectorUI/UserInterface/FlexibleSpaceNavigationItem.css
new file mode 100644
index 000000000..8613b6aea
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/FlexibleSpaceNavigationItem.css
@@ -0,0 +1,29 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.navigation-bar .item.flexible-space,
+.toolbar .item.flexible-space {
+    -webkit-flex: 1;
+}
diff --git a/Source/WebInspectorUI/UserInterface/FlexibleSpaceNavigationItem.js b/Source/WebInspectorUI/UserInterface/FlexibleSpaceNavigationItem.js
new file mode 100644
index 000000000..ae576ff6c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/FlexibleSpaceNavigationItem.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FlexibleSpaceNavigationItem = function(identifier) {
+    WebInspector.NavigationItem.call(this, identifier);
+};
+
+WebInspector.FlexibleSpaceNavigationItem.StyleClassName = "flexible-space";
+
+WebInspector.FlexibleSpaceNavigationItem.prototype = {
+    constructor: WebInspector.FlexibleSpaceNavigationItem,
+
+    // Private
+
+    _additionalClassNames: [WebInspector.FlexibleSpaceNavigationItem.StyleClassName],
+};
+
+WebInspector.FlexibleSpaceNavigationItem.prototype.__proto__ = WebInspector.NavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/FolderIcon.css b/Source/WebInspectorUI/UserInterface/FolderIcon.css
new file mode 100644
index 000000000..0c6a061c2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/FolderIcon.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.folder-icon .icon {
+    content: -webkit-image-set(url(Images/FolderGeneric.png) 1x, url(Images/FolderGeneric@2x.png) 2x);
+}
diff --git a/Source/WebInspectorUI/UserInterface/FolderTreeElement.js b/Source/WebInspectorUI/UserInterface/FolderTreeElement.js
new file mode 100644
index 000000000..3d460a1a1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/FolderTreeElement.js
@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FolderTreeElement = function(title, subtitle, representedObject)
+{
+    WebInspector.GeneralTreeElement.call(this, WebInspector.FolderTreeElement.FolderIconStyleClassName, title, subtitle, representedObject, true);
+
+    this.small = true;
+};
+
+WebInspector.FolderTreeElement.FolderIconStyleClassName = "folder-icon";
+
+WebInspector.FolderTreeElement.prototype = {
+    constructor: WebInspector.FolderTreeElement,
+
+    // No Methods or Properties
+};
+
+WebInspector.FolderTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/FontResourceContentView.css b/Source/WebInspectorUI/UserInterface/FontResourceContentView.css
new file mode 100644
index 000000000..d14382db0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/FontResourceContentView.css
@@ -0,0 +1,104 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.resource.font {
+    display: -webkit-flex;
+
+    -webkit-justify-content: center;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    display: -webkit-flex;
+
+    -webkit-justify-content: center;
+}
+
+.content-view.resource.font .preview {
+    font-size: 72px;
+    font-family: serif;
+
+    white-space: nowrap;
+
+ /* A border is used instead of padding or margin so when there is scrolling
+    overflow there will be space on all sides. It also avoids having to account
+    for the padding/margin in FontResourceContentView.siteToFit. */
+    border: 15px solid transparent;
+
+    margin: auto 0;
+}
+
+.content-view.resource.font .preview > .line {
+    border-left: 1px solid lightgrey;
+    border-right: 1px solid lightgrey;
+
+    margin-top: -1px; /* Causes adjacent .line elements to share one border instead of doubling up. */
+}
+
+.content-view.resource.font .preview > .line > .content {
+    display: inline-block;
+
+    width: 100%;
+
+    text-align: center;
+    text-rendering: optimizeLegibility;
+
+    -webkit-user-select: text;
+    cursor: text;
+}
+
+.content-view.resource.font .preview > .line > .metric {
+    display: inline-block;
+
+    width: 100%;
+    height: 1px;
+
+    margin-right: -100%; /* Causes this element to be zero width and draw behind the text. */
+}
+
+.content-view.resource.font .metric.top {
+    vertical-align: top;
+    background-color: lightgrey;
+}
+
+.content-view.resource.font .metric.baseline {
+    vertical-align: baseline;
+    background-color: lightblue;
+}
+
+.content-view.resource.font .metric.middle {
+    vertical-align: middle;
+    background-color: lightgreen;
+}
+
+.content-view.resource.font .metric.xheight {
+    vertical-align: 1ex;
+    background-color: pink;
+}
+
+.content-view.resource.font .metric.bottom {
+    vertical-align: bottom;
+    background-color: lightgrey;
+}
diff --git a/Source/WebInspectorUI/UserInterface/FontResourceContentView.js b/Source/WebInspectorUI/UserInterface/FontResourceContentView.js
new file mode 100644
index 000000000..d415ac350
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/FontResourceContentView.js
@@ -0,0 +1,151 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FontResourceContentView = function(resource)
+{
+    WebInspector.ResourceContentView.call(this, resource, WebInspector.FontResourceContentView.StyleClassName);
+
+    this._styleElement = null;
+    this._previewElement = null;
+};
+
+WebInspector.FontResourceContentView._uniqueFontIdentifier = 0;
+
+WebInspector.FontResourceContentView.StyleClassName = "font";
+WebInspector.FontResourceContentView.PreviewElementStyleClassName = "preview";
+WebInspector.FontResourceContentView.LineElementStyleClassName = "line";
+WebInspector.FontResourceContentView.ContentElementStyleClassName = "content";
+WebInspector.FontResourceContentView.MetricElementStyleClassName = "metric";
+WebInspector.FontResourceContentView.TopMetricElementStyleClassName = "top";
+WebInspector.FontResourceContentView.XHeightMetricElementStyleClassName = "xheight";
+WebInspector.FontResourceContentView.MiddleMetricElementStyleClassName = "middle";
+WebInspector.FontResourceContentView.BaselineMetricElementStyleClassName = "baseline";
+WebInspector.FontResourceContentView.BottomMetricElementStyleClassName = "bottom";
+WebInspector.FontResourceContentView.PreviewLines = ["ABCDEFGHIJKLM", "NOPQRSTUVWXYZ", "abcdefghijklm", "nopqrstuvwxyz", "1234567890"];
+
+WebInspector.FontResourceContentView.MaximumFontSize = 72;
+WebInspector.FontResourceContentView.MinimumFontSize = 12;
+
+WebInspector.FontResourceContentView.prototype = {
+    constructor: WebInspector.FontResourceContentView,
+
+    // Public
+
+    get previewElement()
+    {
+        return this._previewElement;
+    },
+
+    sizeToFit: function()
+    {
+        if (!this._previewElement)
+            return;
+
+        // Start at the maximum size and try progressively smaller font sizes until minimum is reached or the preview element is not as wide as the main element.
+        for (var fontSize = WebInspector.FontResourceContentView.MaximumFontSize; fontSize >= WebInspector.FontResourceContentView.MinimumFontSize; fontSize -= 5) {
+            this._previewElement.style.fontSize = fontSize + "px";
+            if (this._previewElement.offsetWidth <= this.element.offsetWidth)
+                break;
+        }
+    },
+
+    contentAvailable: function(content, base64Encoded)
+    {
+        this.element.removeChildren();
+
+        const uniqueFontName = "WebInspectorFontPreview" + (++WebInspector.FontResourceContentView._uniqueFontIdentifier);
+
+        var format = "";
+
+        // We need to specify a format when loading SVG fonts to make them work.
+        if (this.resource.mimeType === "image/svg+xml")
+            format = " format(\"svg\")";
+
+        if (this._styleElement && this._styleElement.parentNode)
+            this._styleElement.parentNode.removeChild(this._styleElement);
+
+        this._styleElement = document.createElement("style");
+        this._styleElement.textContent = "@font-face { font-family: \"" + uniqueFontName + "\"; src: url(" + this.resource.contentURL + ")" + format + "; }";
+
+        // The style element will be added when shown later if we are not visible now.
+        if (this.visible)
+            document.head.appendChild(this._styleElement);
+
+        this._previewElement = document.createElement("div");
+        this._previewElement.className = WebInspector.FontResourceContentView.PreviewElementStyleClassName;
+        this._previewElement.style.fontFamily = uniqueFontName;
+
+        function createMetricElement(className)
+        {
+            var metricElement = document.createElement("div");
+            metricElement.className = WebInspector.FontResourceContentView.MetricElementStyleClassName + " " + className;
+            return metricElement;
+        }
+
+        var lines = WebInspector.FontResourceContentView.PreviewLines;
+        for (var i = 0; i < lines.length; ++i) {
+            var lineElement = document.createElement("div");
+            lineElement.className = WebInspector.FontResourceContentView.LineElementStyleClassName;
+
+            lineElement.appendChild(createMetricElement(WebInspector.FontResourceContentView.TopMetricElementStyleClassName));
+            lineElement.appendChild(createMetricElement(WebInspector.FontResourceContentView.XHeightMetricElementStyleClassName));
+            lineElement.appendChild(createMetricElement(WebInspector.FontResourceContentView.MiddleMetricElementStyleClassName));
+            lineElement.appendChild(createMetricElement(WebInspector.FontResourceContentView.BaselineMetricElementStyleClassName));
+            lineElement.appendChild(createMetricElement(WebInspector.FontResourceContentView.BottomMetricElementStyleClassName));
+
+            var contentElement = document.createElement("div");
+            contentElement.className = WebInspector.FontResourceContentView.ContentElementStyleClassName;
+            contentElement.textContent = lines[i];
+            lineElement.appendChild(contentElement);
+
+            this._previewElement.appendChild(lineElement);
+        }
+
+        this.element.appendChild(this._previewElement);
+
+        this.sizeToFit();
+    },
+
+    updateLayout: function()
+    {
+        this.sizeToFit();
+    },
+
+    shown: function()
+    {
+        // Add the style element since it is removed when hidden.
+        if (this._styleElement)
+            document.head.appendChild(this._styleElement);
+    },
+
+    hidden: function()
+    {
+        // Remove the style element so it will not stick around when this content view is destroyed.
+        if (this._styleElement && this._styleElement.parentNode)
+            this._styleElement.parentNode.removeChild(this._styleElement);
+    }
+};
+
+WebInspector.FontResourceContentView.prototype.__proto__ = WebInspector.ResourceContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Formatter.js b/Source/WebInspectorUI/UserInterface/Formatter.js
new file mode 100644
index 000000000..524e50d5a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Formatter.js
@@ -0,0 +1,164 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+function Formatter(codeMirror, builder)
+{
+    console.assert(codeMirror);
+    console.assert(builder);
+
+    this._codeMirror = codeMirror;
+    this._builder = builder;
+
+    this._lastToken = null;
+    this._lastContent = "";
+};
+
+Formatter.prototype = {
+    constructor: Formatter,
+
+    // Public
+
+    format: function(from, to)
+    {
+        console.assert(this._builder.originalContent === null);
+        if (this._builder.originalContent !== null)
+            return;
+
+        var outerMode = this._codeMirror.getMode();
+        var content = this._codeMirror.getRange(from, to);
+        var state = CodeMirror.copyState(outerMode, this._codeMirror.getTokenAt(from).state);
+        this._builder.setOriginalContent(content);
+
+        var lineOffset = 0;
+        var lines = content.split("\n");
+        for (var i = 0; i < lines.length; ++i) {
+            var line = lines[i];
+            var startOfNewLine = true;
+            var firstTokenOnLine = true;
+            var stream = new CodeMirror.StringStream(line);
+            while (!stream.eol()) {
+                var innerMode = CodeMirror.innerMode(outerMode, state);
+                var token = outerMode.token(stream, state);
+                var isWhiteSpace = token === null && /^\s*$/.test(stream.current());
+                this._handleToken(innerMode.mode, token, state, stream, lineOffset + stream.start, isWhiteSpace, startOfNewLine, firstTokenOnLine);
+                stream.start = stream.pos;
+                startOfNewLine = false;
+                if (firstTokenOnLine && !isWhiteSpace)
+                    firstTokenOnLine = false;
+            }
+
+            if (firstTokenOnLine)
+                this._handleEmptyLine();
+
+            lineOffset += line.length + 1; // +1 for the "\n" removed in split.
+            this._handleLineEnding(lineOffset - 1); // -1 for the index of the "\n".
+        }
+
+        this._builder.finish();
+    },
+
+    // Private
+
+    _handleToken: function(mode, token, state, stream, originalPosition, isWhiteSpace, startOfNewLine, firstTokenOnLine)
+    {
+        // String content of the token.
+        var content = stream.current();
+
+        // Start of a new line. Insert a newline to be safe if code was not-ASI safe. These are collapsed.
+        if (startOfNewLine)
+            this._builder.appendNewline();
+
+        // Whitespace. Collapse to a single space.
+        if (isWhiteSpace) {
+            this._builder.appendSpace();
+            return;
+        }
+
+        // Avoid some hooks for content in comments.
+        var isComment = token && /\bcomment\b/.test(token);
+
+        if (mode.modifyStateForTokenPre)
+            mode.modifyStateForTokenPre(this._lastToken, this._lastContent, token, state, content, isComment);
+
+        // Should we remove the last newline?
+        if (this._builder.lastTokenWasNewline && mode.removeLastNewline(this._lastToken, this._lastContent, token, state, content, isComment, firstTokenOnLine))
+            this._builder.removeLastNewline();
+
+        // Add whitespace after the last token?
+        if (!this._builder.lastTokenWasWhitespace && mode.shouldHaveSpaceAfterLastToken(this._lastToken, this._lastContent, token, state, content, isComment))
+            this._builder.appendSpace();
+
+        // Add whitespace before this token?
+        if (!this._builder.lastTokenWasWhitespace && mode.shouldHaveSpaceBeforeToken(this._lastToken, this._lastContent, token, state, content, isComment))
+            this._builder.appendSpace();
+
+        // Should we dedent before this token?
+        var dedents = mode.dedentsBeforeToken(this._lastToken, this._lastContent, token, state, content, isComment);
+        while (dedents-- > 0)
+            this._builder.dedent();
+
+        // Should we add a newline before this token?
+        if (mode.newlineBeforeToken(this._lastToken, this._lastContent, token, state, content, isComment))
+            this._builder.appendNewline();
+
+        // Should we indent before this token?
+        if (mode.indentBeforeToken(this._lastToken, this._lastContent, token, state, content, isComment))
+            this._builder.indent();
+
+        // Append token.
+        this._builder.appendToken(content, originalPosition);
+
+        // Let the pretty printer update any state it keeps track of.
+        if (mode.modifyStateForTokenPost)
+            mode.modifyStateForTokenPost(this._lastToken, this._lastContent, token, state, content, isComment);
+
+        // Should we indent or dedent after this token?
+        if (!isComment && mode.indentAfterToken(this._lastToken, this._lastContent, token, state, content, isComment))
+            this._builder.indent();
+
+        // Should we add newlines after this token?
+        var newlines = mode.newlinesAfterToken(this._lastToken, this._lastContent, token, state, content, isComment);
+        if (newlines)
+            this._builder.appendMultipleNewlines(newlines);
+
+        // Record this token as the last token.
+        this._lastToken = token;
+        this._lastContent = content;
+    },
+
+    _handleEmptyLine: function()
+    {
+        // Preserve original whitespace only lines by adding a newline.
+        // However, don't do this if the builder just added multiple newlines.
+        if (!(this._builder.lastTokenWasNewline && this._builder.lastNewlineAppendWasMultiple))
+            this._builder.appendNewline(true);
+    },
+
+    _handleLineEnding: function(originalNewLinePosition)
+    {
+        // Record the original line ending.
+        this._builder.addOriginalLineEnding(originalNewLinePosition);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/FormatterContentBuilder.js b/Source/WebInspectorUI/UserInterface/FormatterContentBuilder.js
new file mode 100644
index 000000000..4596880cb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/FormatterContentBuilder.js
@@ -0,0 +1,229 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+function FormatterContentBuilder(mapping, originalLineEndings, formattedLineEndings, originalOffset, formattedOffset, indentString)
+{
+    this._originalContent = null;
+    this._formattedContent = [];
+    this._formattedContentLength = 0;
+
+    this._startOfLine = true;
+    this.lastTokenWasNewline = false;
+    this.lastTokenWasWhitespace = false;
+    this.lastNewlineAppendWasMultiple = false;
+
+    this._indent = 0;
+    this._indentString = indentString;
+    this._indentCache = ["", this._indentString];
+
+    this._mapping = mapping;
+    this._originalLineEndings = originalLineEndings || [];
+    this._formattedLineEndings = formattedLineEndings || [];
+    this._originalOffset = originalOffset || 0;
+    this._formattedOffset = formattedOffset || 0;
+
+    this._lastOriginalPosition = 0;
+    this._lastFormattedPosition = 0;
+}
+
+FormatterContentBuilder.prototype = {
+    constructor: FormatterContentBuilder,
+
+    // Public
+
+    get originalContent()
+    {
+        return this._originalContent;
+    },
+
+    get formattedContent()
+    {
+        var formatted = this._formattedContent.join("");
+        console.assert(formatted.length === this._formattedContentLength);
+        return formatted;
+    },
+
+    get mapping()
+    {
+        return this._mapping;
+    },
+
+    get originalLineEndings()
+    {
+        return this._originalLineEndings;
+    },
+
+    get formattedLineEndings()
+    {
+        return this._formattedLineEndings;
+    },
+
+    setOriginalContent: function(originalContent)
+    {
+        console.assert(!this._originalContent);
+        this._originalContent = originalContent;
+    },
+
+    appendToken: function(string, originalPosition)
+    {
+        if (this._startOfLine)
+            this._appendIndent();
+
+        this._addMappingIfNeeded(originalPosition);
+
+        this._append(string);
+        this._startOfLine = false;
+        this.lastTokenWasNewline = false;
+        this.lastTokenWasWhitespace = false;
+    },
+
+    appendSpace: function()
+    {
+        if (!this._startOfLine) {
+            this._append(" ");
+            this.lastTokenWasNewline = false;
+            this.lastTokenWasWhitespace = true;
+        }
+    },
+
+    appendNewline: function(force)
+    {
+        if ((!this.lastTokenWasNewline && !this._startOfLine) || force) {
+            this._append("\n");
+            this._addFormattedLineEnding();
+            this._startOfLine = true;
+            this.lastTokenWasNewline = true;
+            this.lastTokenWasWhitespace = false;
+            this.lastNewlineAppendWasMultiple = false;
+        }
+    },
+
+    appendMultipleNewlines: function(newlines)
+    {
+        console.assert(newlines > 0);
+
+        var wasMultiple = newlines > 1;
+
+        while (newlines-- > 0)
+            this.appendNewline(true);
+
+        if (wasMultiple)
+            this.lastNewlineAppendWasMultiple = true;
+    },
+
+    removeLastNewline: function()
+    {
+        console.assert(this.lastTokenWasNewline);
+        console.assert(this._formattedContent.lastValue === "\n");
+        if (this.lastTokenWasNewline) {
+            this._popNewLine();
+            this._startOfLine = false;
+            this.lastTokenWasNewline = false;
+            this.lastTokenWasWhitespace = false;
+        }
+    },
+
+    indent: function()
+    {
+        ++this._indent;
+    },
+
+    dedent: function()
+    {
+        --this._indent;
+
+        console.assert(this._indent >= 0);
+        if (this._indent < 0)
+            this._indent = 0;
+    },
+
+    addOriginalLineEnding: function(originalPosition)
+    {
+        this._originalLineEndings.push(originalPosition);
+    },
+
+    finish: function()
+    {
+        this.appendNewline();
+    },
+
+    // Private
+
+    _popNewLine: function()
+    {
+        var removed = this._formattedContent.pop();
+        this._formattedContentLength -= removed.length;
+        this._formattedLineEndings.pop();
+    },
+
+    _append: function(str)
+    {
+        this._formattedContent.push(str);
+        this._formattedContentLength += str.length;
+    },
+
+    _appendIndent: function()
+    {
+        // Indent is already in the cache.
+        if (this._indent < this._indentCache.length) {
+            this._append(this._indentCache[this._indent]);
+            return;
+        }
+
+        // Indent was not in the cache, fill up the cache up with what was needed.
+        const maxCacheIndent = 20;
+        var max = Math.min(this._indent, maxCacheIndent);
+        for (var i = this._indentCache.length; i <= max; ++i)
+            this._indentCache[i] = this._indentCache[i-1] + this._indentString;
+
+        // Append indents as needed.
+        var indent = this._indent;
+        do {
+            if (indent >= maxCacheIndent)
+                this._append(this._indentCache[maxCacheIndent])
+            else
+                this._append(this._indentCache[indent]);
+            indent -= maxCacheIndent;
+        } while (indent > 0);
+    },
+
+    _addMappingIfNeeded: function(originalPosition)
+    {
+        if (originalPosition - this._lastOriginalPosition === this._formattedContentLength - this._lastFormattedPosition)
+            return;
+
+        this._mapping.original.push(this._originalOffset + originalPosition);
+        this._mapping.formatted.push(this._formattedOffset + this._formattedContentLength);
+
+        this._lastOriginalPosition = originalPosition;
+        this._lastFormattedPosition = this._formattedContentLength;
+    },
+
+    _addFormattedLineEnding: function()
+    {
+        console.assert(this._formattedContent.lastValue === "\n");
+        this._formattedLineEndings.push(this._formattedContentLength - 1);
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/FormatterSourceMap.js b/Source/WebInspectorUI/UserInterface/FormatterSourceMap.js
new file mode 100644
index 000000000..b58d22a4d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/FormatterSourceMap.js
@@ -0,0 +1,87 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FormatterSourceMap = function(originalLineEndings, formattedLineEndings, mapping)
+{
+    WebInspector.Object.call(this);
+
+    this._originalLineEndings = originalLineEndings;
+    this._formattedLineEndings = formattedLineEndings;
+    this._mapping = mapping;
+};
+
+WebInspector.FormatterSourceMap.fromBuilder = function(builder)
+{
+    return new WebInspector.FormatterSourceMap(builder.originalLineEndings, builder.formattedLineEndings, builder.mapping);
+}
+
+WebInspector.FormatterSourceMap.prototype = {
+    constructor: WebInspector.FormatterSourceMap,
+
+    // Public
+
+    originalToFormatted: function(lineNumber, columnNumber)
+    {
+        var originalPosition = this._locationToPosition(this._originalLineEndings, lineNumber || 0, columnNumber || 0);
+        var formattedPosition = this._convertPosition(this._mapping.original, this._mapping.formatted, originalPosition);
+        return this._positionToLocation(this._formattedLineEndings, formattedPosition);
+    },
+
+    formattedToOriginal: function(lineNumber, columnNumber)
+    {
+        var formattedPosition = this._locationToPosition(this._formattedLineEndings, lineNumber || 0, columnNumber || 0);
+        var originalPosition = this._convertPosition(this._mapping.formatted, this._mapping.original, formattedPosition);
+        return this._positionToLocation(this._originalLineEndings, originalPosition);
+    },
+
+    // Private
+
+    _locationToPosition: function(lineEndings, lineNumber, columnNumber)
+    {
+        var lineOffset = lineNumber ? lineEndings[lineNumber - 1] + 1 : 0;
+        return lineOffset + columnNumber;
+    },
+
+    _positionToLocation: function(lineEndings, position)
+    {
+        var lineNumber = lineEndings.upperBound(position - 1);
+        if (!lineNumber)
+            var columnNumber = position;
+        else
+            var columnNumber = position - lineEndings[lineNumber - 1] - 1;
+        return {lineNumber:lineNumber, columnNumber:columnNumber};
+    },
+
+    _convertPosition: function(positions1, positions2, positionInPosition1)
+    {
+        var index = positions1.upperBound(positionInPosition1) - 1;
+        var convertedPosition = positions2[index] + positionInPosition1 - positions1[index];
+        if (index < positions2.length - 1 && convertedPosition > positions2[index + 1])
+            convertedPosition = positions2[index + 1];
+        return convertedPosition;
+    }
+};
+
+WebInspector.FormatterSourceMap.__proto__ = WebInspector.Object;
diff --git a/Source/WebInspectorUI/UserInterface/Frame.js b/Source/WebInspectorUI/UserInterface/Frame.js
new file mode 100644
index 000000000..598ffe108
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Frame.js
@@ -0,0 +1,466 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Frame = function(id, name, securityOrigin, loaderIdentifier, mainResource)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(id);
+
+    this._id = id;
+
+    this._name = null;
+    this._securityOrigin = null;
+
+    this._resourceCollection = new WebInspector.ResourceCollection;
+    this._provisionalResourceCollection = new WebInspector.ResourceCollection;
+
+    this._childFrames = [];
+    this._childFrameIdentifierMap = {};
+
+    this._parentFrame = null;
+    this._isMainFrame = false;
+
+    this._executionContextList = new WebInspector.ExecutionContextList;
+
+    this.initialize(name, securityOrigin, loaderIdentifier, mainResource);
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.Frame);
+
+WebInspector.Frame.Event = {
+    NameDidChange: "frame-name-did-change",
+    SecurityOriginDidChange: "frame-security-origin-did-change",
+    MainResourceDidChange: "frame-main-resource-did-change",
+    ProvisionalLoadStarted: "frame-provisional-load-started",
+    ProvisionalLoadCommitted: "frame-provisional-load-committed",
+    ProvisionalLoadCleared: "frame-provisional-load-cleared",
+    ResourceWasAdded: "frame-resource-was-added",
+    ResourceWasRemoved: "frame-resource-was-removed",
+    AllResourcesRemoved: "frame-all-resources-removed",
+    ChildFrameWasAdded: "frame-child-frame-was-added",
+    ChildFrameWasRemoved: "frame-child-frame-was-removed",
+    AllChildFramesRemoved: "frame-all-child-frames-removed",
+    PageExecutionContextChanged: "frame-page-execution-context-changed",
+    ExecutionContextsCleared: "frame-execution-contexts-cleared"
+};
+
+WebInspector.Frame.prototype = {
+    constructor: WebInspector.Frame,
+
+    // Public
+
+    initialize: function(name, securityOrigin, loaderIdentifier, mainResource)
+    {
+        console.assert(loaderIdentifier);
+        console.assert(mainResource);
+
+        var oldName = this._name;
+        var oldSecurityOrigin = this._securityOrigin;
+        var oldMainResource = this._mainResource;
+
+        this._name = name || null;
+        this._securityOrigin = securityOrigin || null;
+        this._loaderIdentifier = loaderIdentifier || null;
+
+        this._mainResource = mainResource;
+        this._mainResource._parentFrame = this;
+
+        if (oldMainResource && this._mainResource !== oldMainResource)
+            this._disassociateWithResource(oldMainResource);
+
+        this.removeAllResources();
+        this.removeAllChildFrames();
+        this.clearExecutionContexts();
+        this.clearProvisionalLoad();
+
+        if (this._mainResource !== oldMainResource)
+            this._dispatchMainResourceDidChangeEvent(oldMainResource);
+
+        if (this._securityOrigin !== oldSecurityOrigin)
+            this.dispatchEventToListeners(WebInspector.Frame.Event.SecurityOriginDidChange, {oldSecurityOrigin: oldSecurityOrigin});
+
+        if (this._name !== oldName)
+            this.dispatchEventToListeners(WebInspector.Frame.Event.NameDidChange, {oldName: oldName});
+    },
+
+    startProvisionalLoad: function(provisionalMainResource)
+    {
+        console.assert(provisionalMainResource);
+
+        this._provisionalMainResource = provisionalMainResource;
+        this._provisionalMainResource._parentFrame = this;
+
+        this._provisionalLoaderIdentifier = provisionalMainResource.loaderIdentifier;
+
+        this._provisionalResourceCollection.removeAllResources();
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.ProvisionalLoadStarted);
+    },
+
+    commitProvisionalLoad: function(securityOrigin)
+    {
+        console.assert(this._provisionalMainResource);
+        console.assert(this._provisionalLoaderIdentifier);
+        if (!this._provisionalLoaderIdentifier)
+            return;
+
+        var oldSecurityOrigin = this._securityOrigin;
+        var oldMainResource = this._mainResource;
+
+        this._securityOrigin = securityOrigin || null;
+        this._loaderIdentifier = this._provisionalLoaderIdentifier;
+        this._mainResource = this._provisionalMainResource;
+
+        if (oldMainResource && this._mainResource !== oldMainResource)
+            this._disassociateWithResource(oldMainResource);
+
+        this.removeAllResources();
+
+        this._resourceCollection = this._provisionalResourceCollection;
+        this._provisionalResourceCollection = new WebInspector.ResourceCollection;
+
+        this.clearExecutionContexts(true);
+        this.clearProvisionalLoad(true);
+        this.removeAllChildFrames();
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.ProvisionalLoadCommitted);
+
+        if (this._mainResource !== oldMainResource)
+            this._dispatchMainResourceDidChangeEvent(oldMainResource);
+
+        if (this._securityOrigin !== oldSecurityOrigin)
+            this.dispatchEventToListeners(WebInspector.Frame.Event.SecurityOriginDidChange, {oldSecurityOrigin: oldSecurityOrigin});
+    },
+
+    clearProvisionalLoad: function(skipProvisionalLoadClearedEvent)
+    {
+        if (!this._provisionalLoaderIdentifier)
+            return;
+
+        this._provisionalLoaderIdentifier = null;
+        this._provisionalMainResource = null;
+        this._provisionalResourceCollection.removeAllResources();
+
+        if (!skipProvisionalLoadClearedEvent)
+            this.dispatchEventToListeners(WebInspector.Frame.Event.ProvisionalLoadCleared);
+    },
+
+    get id()
+    {
+        return this._id;
+    },
+
+    get loaderIdentifier()
+    {
+        return this._loaderIdentifier;
+    },
+
+    get provisionalLoaderIdentifier()
+    {
+        return this._provisionalLoaderIdentifier;
+    },
+
+    get name()
+    {
+        return this._name;
+    },
+
+    get securityOrigin()
+    {
+        return this._securityOrigin;
+    },
+
+    get url()
+    {
+        return this._mainResource._url;
+    },
+
+    get domTree()
+    {
+        if (!this._domTree)
+            this._domTree = new WebInspector.DOMTree(this);
+        return this._domTree;
+    },
+
+    get pageExecutionContext()
+    {
+        return this._executionContextList.pageExecutionContext;
+    },
+
+    get executionContextList()
+    {
+        return this._executionContextList;
+    },
+
+    clearExecutionContexts: function(committingProvisionalLoad)
+    {
+        if (this._executionContextList.contexts.length) {
+            this._executionContextList.clear();
+            this.dispatchEventToListeners(WebInspector.Frame.Event.ExecutionContextsCleared, {committingProvisionalLoad:!!committingProvisionalLoad});
+        }
+    },
+
+    addExecutionContext: function(context)
+    {
+        var changedPageContext = this._executionContextList.add(context);
+
+        if (changedPageContext)
+            this.dispatchEventToListeners(WebInspector.Frame.Event.PageExecutionContextChanged);
+    },
+
+    get mainResource()
+    {
+        return this._mainResource;
+    },
+
+    get provisionalMainResource()
+    {
+        return this._provisionalMainResource;
+    },
+
+    get parentFrame()
+    {
+        return this._parentFrame;
+    },
+
+    get childFrames()
+    {
+        return this._childFrames;
+    },
+
+    isMainFrame: function()
+    {
+        return this._isMainFrame;
+    },
+
+    markAsMainFrame: function()
+    {
+        this._isMainFrame = true;
+    },
+
+    unmarkAsMainFrame: function()
+    {
+        this._isMainFrame = false;
+    },
+
+    isDetached: function()
+    {
+        var frame = this;
+        while (frame) {
+            if (frame.isMainFrame())
+                return false;
+            frame = frame.parentFrame;
+        }
+
+        return true;
+    },
+
+    childFrameForIdentifier: function(frameId)
+    {
+        return this._childFrameIdentifierMap[frameId] || null;
+    },
+
+    addChildFrame: function(frame)
+    {
+        console.assert(frame instanceof WebInspector.Frame);
+        if (!(frame instanceof WebInspector.Frame))
+            return;
+
+        if (frame._parentFrame === this)
+            return;
+
+        if (frame._parentFrame)
+            frame._parentFrame.removeChildFrame(frame);
+
+        this._childFrames.push(frame);
+        this._childFrameIdentifierMap[frame._id] = frame;
+
+        frame._parentFrame = this;
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.ChildFrameWasAdded, {childFrame: frame});
+    },
+
+    removeChildFrame: function(frameOrFrameId)
+    {
+        console.assert(frameOrFrameId);
+
+        if (frameOrFrameId instanceof WebInspector.Frame)
+            var childFrameId = frameOrFrameId._id;
+        else
+            var childFrameId = frameOrFrameId;
+
+        // Fetch the frame by id even if we were passed a WebInspector.Frame.
+        // We do this incase the WebInspector.Frame is a new object that isn't in _childFrames,
+        // but the id is a valid child frame.
+        var childFrame = this.childFrameForIdentifier(childFrameId);
+        console.assert(childFrame instanceof WebInspector.Frame);
+        if (!(childFrame instanceof WebInspector.Frame))
+            return;
+
+        console.assert(childFrame.parentFrame === this);
+
+        this._childFrames.remove(childFrame);
+        delete this._childFrameIdentifierMap[childFrame._id];
+
+        childFrame._parentFrame = null;
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.ChildFrameWasRemoved, {childFrame: childFrame});
+    },
+
+    removeAllChildFrames: function()
+    {
+        if (!this._childFrames.length)
+            return;
+
+        for (var i = 0; i < this._childFrames.length; ++i)
+            this._childFrames[i]._parentFrame = null;
+
+        this._childFrames = [];
+        this._childFrameIdentifierMap = {};
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.AllChildFramesRemoved);
+    },
+
+    get resources()
+    {
+        return this._resourceCollection.resources;
+    },
+
+    resourceForURL: function(url, recursivelySearchChildFrames)
+    {
+        var resource = this._resourceCollection.resourceForURL(url);
+        if (resource)
+            return resource;
+
+        // Check the main resources of the child frames for the requested URL.
+        for (var i = 0; i < this._childFrames.length; ++i) {
+            resource = this._childFrames[i].mainResource;
+            if (resource.url === url)
+                return resource;
+        }
+
+        if (!recursivelySearchChildFrames)
+            return null;
+
+        // Recursively search resources of child frames.
+        for (var i = 0; i < this._childFrames.length; ++i) {
+            resource = this._childFrames[i].resourceForURL(url, true);
+            if (resource)
+                return resource;
+        }
+
+        return null;
+    },
+
+    resourcesWithType: function(type)
+    {
+        return this._resourceCollection.resourcesWithType(type);
+    },
+
+    addResource: function(resource)
+    {
+        console.assert(resource instanceof WebInspector.Resource);
+        if (!(resource instanceof WebInspector.Resource))
+            return;
+
+        if (resource.parentFrame === this)
+            return;
+
+        if (resource.parentFrame)
+            resource.parentFrame.removeResource(resource);
+
+        this._associateWithResource(resource);
+
+        if (this._isProvisionalResource(resource)) {
+            this._provisionalResourceCollection.addResource(resource);
+            // Provisional resources don't fire the ResourceWasAdded event.
+        } else {
+            this._resourceCollection.addResource(resource);
+            this.dispatchEventToListeners(WebInspector.Frame.Event.ResourceWasAdded, {resource: resource});
+        }
+    },
+
+    removeResource: function(resourceOrURL)
+    {
+        // This does not remove provisional resources.
+
+        var resource = this._resourceCollection.removeResource(resourceOrURL);
+        if (!resource)
+            return;
+
+        this._disassociateWithResource(resource);
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.ResourceWasRemoved, {resource: resource});
+    },
+
+    removeAllResources: function()
+    {
+        // This does not remove provisional resources, use clearProvisionalLoad for that.
+
+        var resources = this.resources;
+        if (!resources.length)
+            return;
+
+        for (var i = 0; i < resources.length; ++i)
+            this._disassociateWithResource(resources[i]);
+
+        this._resourceCollection.removeAllResources();
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.AllResourcesRemoved);
+    },
+
+    // Private
+
+    _isProvisionalResource: function(resource)
+    {
+        return (resource.loaderIdentifier && this._provisionalLoaderIdentifier && resource.loaderIdentifier === this._provisionalLoaderIdentifier);
+    },
+
+    _associateWithResource: function(resource)
+    {
+        console.assert(!resource._parentFrame);
+        if (resource._parentFrame)
+            return;
+
+        resource._parentFrame = this;
+    },
+
+    _disassociateWithResource: function(resource)
+    {
+        console.assert(resource.parentFrame === this);
+        if (resource.parentFrame !== this)
+            return;
+
+        resource._parentFrame = null;
+    },
+
+    _dispatchMainResourceDidChangeEvent: function(oldMainResource)
+    {
+        this.dispatchEventToListeners(WebInspector.Frame.Event.MainResourceDidChange, {oldMainResource: oldMainResource});
+    }
+};
+
+WebInspector.Frame.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/FrameContentView.js b/Source/WebInspectorUI/UserInterface/FrameContentView.js
new file mode 100644
index 000000000..d0bc286c4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/FrameContentView.js
@@ -0,0 +1,189 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FrameContentView = function(frame)
+{
+    WebInspector.ClusterContentView.call(this, frame);
+
+    this._frame = frame;
+
+    function createPathComponent(displayName, className, identifier)
+    {
+        var pathComponent = new WebInspector.HierarchicalPathComponent(displayName, className, identifier, false, true);
+        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
+        return pathComponent;
+    }
+
+    this._sourceCodePathComponent = createPathComponent.call(this, WebInspector.UIString("Source Code"), WebInspector.FrameContentView.SourceCodeIconStyleClassName, WebInspector.FrameContentView.SourceCodeIdentifier);
+    this._domTreePathComponent = createPathComponent.call(this, WebInspector.UIString("DOM Tree"), WebInspector.FrameContentView.DOMTreeIconStyleClassName, WebInspector.FrameContentView.DOMTreeIdentifier);
+
+    this._sourceCodePathComponent.nextSibling = this._domTreePathComponent;
+    this._domTreePathComponent.previousSibling = this._sourceCodePathComponent;
+
+    this.element.classList.add(WebInspector.FrameContentView.StyleClassName);
+
+    this._currentContentViewSetting = new WebInspector.Setting("frame-current-view-" + this._frame.url.hash, WebInspector.FrameContentView.DOMTreeIdentifier);
+};
+
+WebInspector.FrameContentView.StyleClassName = "frame";
+WebInspector.FrameContentView.SourceCodeIconStyleClassName = "source-code-icon";
+WebInspector.FrameContentView.SourceCodeIdentifier = "source-code";
+WebInspector.FrameContentView.DOMTreeIconStyleClassName = "dom-tree-icon";
+WebInspector.FrameContentView.DOMTreeIdentifier = "dom-tree";
+
+WebInspector.FrameContentView.prototype = {
+    constructor: WebInspector.FrameContentView,
+
+    // Public
+
+    get frame()
+    {
+        return this._frame;
+    },
+
+    get allowedNavigationSidebarPanels()
+    {
+        return ["resource", "debugger"];
+    },
+
+    get selectionPathComponents()
+    {
+        if (!this._contentViewContainer.currentContentView)
+            return [];
+
+        // Append the current view's path components to the path component representing the current view.
+        var components = [this._pathComponentForContentView(this._contentViewContainer.currentContentView)];
+        return components.concat(this._contentViewContainer.currentContentView.selectionPathComponents);
+    },
+
+    shown: function()
+    {
+        WebInspector.ClusterContentView.prototype.shown.call(this);
+
+        if (this._shownInitialContent)
+            return;
+
+        this._showContentViewForIdentifier(this._currentContentViewSetting.value);
+    },
+
+    closed: function()
+    {
+        WebInspector.ClusterContentView.prototype.closed.call(this);
+
+        this._shownInitialContent = false;
+    },
+
+    showResource: function()
+    {
+        this._shownInitialContent = true;
+
+        return this._showContentViewForIdentifier(WebInspector.FrameContentView.SourceCodeIdentifier);
+    },
+
+    showSourceCode: function(positionToReveal, textRangeToSelect, forceUnformatted)
+    {
+        var resourceContentView = this.showResource();
+        console.assert(resourceContentView instanceof WebInspector.ResourceClusterContentView);
+        if (!resourceContentView)
+            return null;
+
+        var responseContentView = resourceContentView.showResponse();
+        if (typeof responseContentView.revealPosition === "function")
+            responseContentView.revealPosition(positionToReveal, textRangeToSelect, forceUnformatted);
+
+        return resourceContentView;
+    },
+
+    showDOMTree: function(domNodeToSelect, preventFocusChange)
+    {
+        this._shownInitialContent = true;
+
+        var domTreeContentView = this._showContentViewForIdentifier(WebInspector.FrameContentView.DOMTreeIdentifier);
+        console.assert(domTreeContentView);
+        if (!domTreeContentView || !domNodeToSelect)
+            return null;
+
+        domTreeContentView.selectAndRevealDOMNode(domNodeToSelect, preventFocusChange);
+
+        return domTreeContentView;
+    },
+
+    // Private
+
+    _pathComponentForContentView: function(contentView)
+    {
+        console.assert(contentView);
+        if (!contentView)
+            return null;
+        if (contentView.representedObject instanceof WebInspector.Resource)
+            return this._sourceCodePathComponent;
+        if (contentView.representedObject instanceof WebInspector.DOMTree)
+            return this._domTreePathComponent;
+        console.error("Unknown contentView.");
+        return null;
+    },
+
+    _identifierForContentView: function(contentView)
+    {
+        console.assert(contentView);
+        if (!contentView)
+            return null;
+        if (contentView.representedObject instanceof WebInspector.Resource)
+            return WebInspector.FrameContentView.SourceCodeIdentifier;
+        if (contentView.representedObject instanceof WebInspector.DOMTree)
+            return WebInspector.FrameContentView.DOMTreeIdentifier;
+        console.error("Unknown contentView.");
+        return null;
+    },
+
+    _showContentViewForIdentifier: function(identifier)
+    {
+        var representedObjectToShow = null;
+
+        switch (identifier) {
+        case WebInspector.FrameContentView.SourceCodeIdentifier:
+            representedObjectToShow = this._frame.mainResource;
+            break;
+        case WebInspector.FrameContentView.DOMTreeIdentifier:
+            representedObjectToShow = this._frame.domTree;
+            break;
+        }
+
+        console.assert(representedObjectToShow);
+        if (!representedObjectToShow)
+            return;
+
+        this._currentContentViewSetting.value = identifier;
+
+        return this.contentViewContainer.showContentViewForRepresentedObject(representedObjectToShow);
+    },
+
+    _pathComponentSelected: function(event)
+    {
+        this._showContentViewForIdentifier(event.data.pathComponent.representedObject);
+    }
+};
+
+WebInspector.FrameContentView.prototype.__proto__ = WebInspector.ClusterContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/FrameResourceManager.js b/Source/WebInspectorUI/UserInterface/FrameResourceManager.js
new file mode 100644
index 000000000..5434610f5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/FrameResourceManager.js
@@ -0,0 +1,534 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FrameResourceManager = function()
+{
+    WebInspector.Object.call(this);
+
+    PageAgent.enable();
+    NetworkAgent.enable();
+
+    this.initialize();
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.FrameResourceManager);
+
+WebInspector.FrameResourceManager.Event = {
+    FrameWasAdded: "frame-resource-manager-frame-was-added",
+    FrameWasRemoved: "frame-resource-manager-frame-was-removed",
+    MainFrameDidChange: "frame-resource-manager-main-frame-did-change"
+};
+
+WebInspector.FrameResourceManager.prototype = {
+    constructor: WebInspector.FrameResourceManager,
+
+    // Public
+
+    initialize: function()
+    {
+        var oldMainFrame = this._mainFrame;
+
+        this._frameIdentifierMap = {};
+        this._mainFrame = null;
+        this._resourceRequestIdentifierMap = {};
+
+        if (this._mainFrame !== oldMainFrame)
+            this._mainFrameDidChange(oldMainFrame);
+
+        this._waitingForMainFrameResourceTreePayload = true;
+        PageAgent.getResourceTree(this._processMainFrameResourceTreePayload.bind(this));
+    },
+
+    get mainFrame()
+    {
+        return this._mainFrame;
+    },
+
+    get frames()
+    {
+        var frames = [];
+        for (var key in this._frameIdentifierMap)
+            frames.push(this._frameIdentifierMap[key]);
+
+        return frames;
+    },
+
+    frameForIdentifier: function(frameId)
+    {
+        return this._frameIdentifierMap[frameId] || null;
+    },
+
+    frameDidNavigate: function(framePayload)
+    {
+        // Called from WebInspector.PageObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        var frameWasLoadedInstantly = false;
+
+        var frame = this.frameForIdentifier(framePayload.id);
+        if (!frame) {
+            // If the frame wasn't known before now, then the main resource was loaded instantly (about:blank, etc.)
+            // Make a new resource (which will make the frame). Mark will mark it as loaded at the end too since we
+            // don't expect any more events about the load finishing for these frames.
+            var frameResource = this._addNewResourceToFrame(null, framePayload.id, framePayload.loaderId, framePayload.url, null, null, null, null, null, framePayload.name, framePayload.securityOrigin);
+            var frame = frameResource.parentFrame;
+            frameWasLoadedInstantly = true;
+
+            console.assert(frame);
+            if (!frame)
+                return;
+        }
+
+        if (framePayload.loaderId === frame.provisionalLoaderIdentifier) {
+            // There was a provisional load in progress, commit it.
+            frame.commitProvisionalLoad(framePayload.securityOrigin);
+        } else {
+            if (frame.mainResource.url !== framePayload.url || frame.loaderIdentifier !== framePayload.loaderId) {
+                // Navigations like back/forward do not have provisional loads, so create a new main resource here.
+                var mainResource = new WebInspector.Resource(framePayload.url, framePayload.mimeType, null, framePayload.loaderId);
+            } else {
+                // The main resource is already correct, so reuse it.
+                var mainResource = frame.mainResource;
+            }
+
+            frame.initialize(framePayload.name, framePayload.securityOrigin, framePayload.loaderId, mainResource);
+        }
+
+        var oldMainFrame = this._mainFrame;
+
+        if (framePayload.parentId) {
+            var parentFrame = this.frameForIdentifier(framePayload.parentId);
+            console.assert(parentFrame);
+
+            if (frame === this._mainFrame)
+                this._mainFrame = null
+
+            if (frame.parentFrame !== parentFrame)
+                parentFrame.addChildFrame(frame);
+        } else {
+            if (frame.parentFrame)
+                frame.parentFrame.removeChildFrame(frame);
+            this._mainFrame = frame;
+        }
+
+        if (this._mainFrame !== oldMainFrame)
+            this._mainFrameDidChange(oldMainFrame);
+
+        if (frameWasLoadedInstantly)
+            frame.mainResource.markAsFinished();
+    },
+
+    frameDidDetach: function(frameId)
+    {
+        // Called from WebInspector.PageObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        var frame = this.frameForIdentifier(frameId);
+        if (!frame)
+            return;
+
+        if (frame.parentFrame)
+            frame.parentFrame.removeChildFrame(frame);
+
+        delete this._frameIdentifierMap[frame.id];
+
+        var oldMainFrame = this._mainFrame;
+
+        if (frame === this._mainFrame)
+            this._mainFrame = null;
+
+        frame.clearExecutionContexts();
+
+        this.dispatchEventToListeners(WebInspector.FrameResourceManager.Event.FrameWasRemoved, {frame: frame});
+
+        if (this._mainFrame !== oldMainFrame)
+            this._mainFrameDidChange(oldMainFrame);
+    },
+
+    resourceRequestWillBeSent: function(requestIdentifier, frameIdentifier, loaderIdentifier, request, type, redirectResponse, timestamp)
+    {
+        // Called from WebInspector.NetworkObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        var resource = this._resourceRequestIdentifierMap[requestIdentifier];
+        if (resource) {
+            // This is an existing request which is being redirected, update the resource.
+            console.assert(redirectResponse);
+            resource.updateForRedirectResponse(request.url, request.headers, timestamp);
+            return;
+        }
+
+        // This is a new request, make a new resource and add it to the right frame.
+        resource = this._addNewResourceToFrame(requestIdentifier, frameIdentifier, loaderIdentifier, request.url, type, request.method, request.headers, request.postData, timestamp, null, null);
+
+        // Associate the resource with the requestIdentifier so it can be found in future loading events.
+        this._resourceRequestIdentifierMap[requestIdentifier] = resource;
+    },
+
+    markResourceRequestAsServedFromMemoryCache: function(requestIdentifier)
+    {
+        // Called from WebInspector.NetworkObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        var resource = this._resourceRequestIdentifierMap[requestIdentifier];
+
+        // We might not have a resource if the inspector was opened during the page load (after resourceRequestWillBeSent is called).
+        // We don't want to assert in this case since we do likely have the resource, via PageAgent.getResourceTree. The Resource
+        // just doesn't have a requestIdentifier for us to look it up.
+        if (!resource)
+            return;
+
+        resource.markAsCached();
+    },
+
+    resourceRequestWasServedFromMemoryCache: function(requestIdentifier, frameIdentifier, loaderIdentifier, cachedResourcePayload, timestamp)
+    {
+        // Called from WebInspector.NetworkObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        console.assert(!(requestIdentifier in this._resourceRequestIdentifierMap));
+
+        var response = cachedResourcePayload.response;
+        var resource = this._addNewResourceToFrame(requestIdentifier, frameIdentifier, loaderIdentifier, cachedResourcePayload.url, cachedResourcePayload.type, null, null, timestamp, null, null);
+        resource.markAsCached();
+        resource.updateForResponse(cachedResourcePayload.url, response.mimeType, cachedResourcePayload.type, response.headers, response.status, response.statusText, timestamp);
+        resource.markAsFinished(timestamp);
+
+        if (cachedResourcePayload.sourceMapURL)
+            WebInspector.sourceMapManager.downloadSourceMap(cachedResourcePayload.sourceMapURL, resource.url, resource);
+
+        // No need to associate the resource with the requestIdentifier, since this is the only event
+        // sent for memory cache resource loads.
+    },
+
+    resourceRequestDidReceiveResponse: function(requestIdentifier, frameIdentifier, loaderIdentifier, type, response, timestamp)
+    {
+        // Called from WebInspector.NetworkObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        var resource = this._resourceRequestIdentifierMap[requestIdentifier];
+
+        // We might not have a resource if the inspector was opened during the page load (after resourceRequestWillBeSent is called).
+        // We don't want to assert in this case since we do likely have the resource, via PageAgent.getResourceTree. The Resource
+        // just doesn't have a requestIdentifier for us to look it up, but we can try to look it up by its URL.
+        if (!resource) {
+            var frame = this.frameForIdentifier(frameIdentifier);
+            if (frame)
+                resource = frame.resourceForURL(response.url);
+
+            // If we find the resource this way we had marked it earlier as finished via PageAgent.getResourceTree.
+            // Associate the resource with the requestIdentifier so it can be found in future loading events.
+            // and roll it back to an unfinished state, we know now it is still loading.
+            if (resource) {
+                this._resourceRequestIdentifierMap[requestIdentifier] = resource;
+                resource.revertMarkAsFinished();
+            }
+        }
+
+        // If we haven't found an existing Resource by now, then it is a resource that was loading when the inspector
+        // opened and we just missed the resourceRequestWillBeSent for it. So make a new resource and add it.
+        if (!resource) {
+            resource = this._addNewResourceToFrame(requestIdentifier, frameIdentifier, loaderIdentifier, response.url, type, null, response.requestHeaders, timestamp, null, null);
+
+            // Associate the resource with the requestIdentifier so it can be found in future loading events.
+            this._resourceRequestIdentifierMap[requestIdentifier] = resource;
+        }
+
+        if (response.fromDiskCache)
+            resource.markAsCached();
+
+        resource.updateForResponse(response.url, response.mimeType, type, response.headers, response.status, response.statusText, timestamp);
+    },
+
+    resourceRequestDidReceiveData: function(requestIdentifier, dataLength, encodedDataLength, timestamp)
+    {
+        // Called from WebInspector.NetworkObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        var resource = this._resourceRequestIdentifierMap[requestIdentifier];
+
+        // We might not have a resource if the inspector was opened during the page load (after resourceRequestWillBeSent is called).
+        // We don't want to assert in this case since we do likely have the resource, via PageAgent.getResourceTree. The Resource
+        // just doesn't have a requestIdentifier for us to look it up.
+        if (!resource)
+            return;
+
+        resource.increaseSize(dataLength, timestamp);
+
+        if (encodedDataLength !== -1)
+            resource.increaseTransferSize(encodedDataLength);
+    },
+
+    resourceRequestDidFinishLoading: function(requestIdentifier, timestamp, sourceMapURL)
+    {
+        // Called from WebInspector.NetworkObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        // By now we should always have the Resource. Either it was fetched when the inspector first opened with
+        // PageAgent.getResourceTree, or it was a currently loading resource that we learned about in resourceRequestDidReceiveResponse.
+        var resource = this._resourceRequestIdentifierMap[requestIdentifier];
+        console.assert(resource);
+        if (!resource)
+            return;
+
+        resource.markAsFinished(timestamp);
+
+        if (sourceMapURL)
+            WebInspector.sourceMapManager.downloadSourceMap(sourceMapURL, resource.url, resource);
+
+        delete this._resourceRequestIdentifierMap[requestIdentifier];
+    },
+
+    resourceRequestDidFailLoading: function(requestIdentifier, canceled, timestamp)
+    {
+        // Called from WebInspector.NetworkObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        // By now we should always have the Resource. Either it was fetched when the inspector first opened with
+        // PageAgent.getResourceTree, or it was a currently loading resource that we learned about in resourceRequestDidReceiveResponse.
+        var resource = this._resourceRequestIdentifierMap[requestIdentifier];
+        console.assert(resource);
+        if (!resource)
+            return;
+
+        resource.markAsFailed(canceled, timestamp);
+
+        if (resource === resource.parentFrame.provisionalMainResource)
+            resource.parentFrame.clearProvisionalLoad();
+
+        delete this._resourceRequestIdentifierMap[requestIdentifier];
+    },
+
+    executionContextCreated: function(contextPayload)
+    {
+        // Called from WebInspector.RuntimeObserver.
+
+        var frame = this.frameForIdentifier(contextPayload.frameId);
+        console.assert(frame);
+        if (!frame)
+            return;
+
+        var displayName = contextPayload.name || frame.mainResource.displayName;
+        var executionContext = new WebInspector.ExecutionContext(contextPayload.id, displayName, contextPayload.isPageContext, frame);
+        frame.addExecutionContext(executionContext);
+    },
+
+    resourceForURL: function(url)
+    {
+        if (!this._mainFrame)
+            return null;
+
+        if (this._mainFrame.mainResource.url === url)
+            return this._mainFrame.mainResource;
+
+        return this._mainFrame.resourceForURL(url, true);
+    },
+
+    // Private
+
+    _addNewResourceToFrame: function(requestIdentifier, frameIdentifier, loaderIdentifier, url, type, requestMethod, requestHeaders, requestData, timestamp, frameName, frameSecurityOrigin)
+    {
+        console.assert(!this._waitingForMainFrameResourceTreePayload);
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        var resource = null;
+
+        var frame = this.frameForIdentifier(frameIdentifier);
+        if (frame) {
+            // This is a new request for an existing frame, which might be the main resource or a new resource.
+            if (frame.mainResource.url === url && frame.loaderIdentifier === loaderIdentifier)
+                resource = frame.mainResource;
+            else if (frame.provisionalMainResource && frame.provisionalMainResource.url === url && frame.provisionalLoaderIdentifier === loaderIdentifier)
+                resource = frame.provisionalMainResource;
+            else {
+                resource = new WebInspector.Resource(url, null, type, loaderIdentifier, requestIdentifier, requestMethod, requestHeaders, requestData, timestamp);
+                this._addResourceToFrame(frame, resource);
+            }
+        } else {
+            // This is a new request for a new frame, which is always the main resource.
+            resource = new WebInspector.Resource(url, null, type, loaderIdentifier, requestIdentifier, requestMethod, requestHeaders, requestData, timestamp);
+            frame = new WebInspector.Frame(frameIdentifier, frameName, frameSecurityOrigin, loaderIdentifier, resource);
+            this._frameIdentifierMap[frame.id] = frame;
+
+            // If we don't have a main frame, assume this is it. This can change later in
+            // frameDidNavigate when the parent frame is known.
+            if (!this._mainFrame) {
+                this._mainFrame = frame;
+                this._mainFrameDidChange(null);
+            }
+
+            this._dispatchFrameWasAddedEvent(frame);
+        }
+
+        console.assert(resource);
+
+        return resource;
+    },
+
+    _addResourceToFrame: function(frame, resource)
+    {
+        console.assert(!this._waitingForMainFrameResourceTreePayload);
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        console.assert(frame);
+        console.assert(resource);
+
+        if (resource.loaderIdentifier !== frame.loaderIdentifier && !frame.provisionalLoaderIdentifier) {
+            // This is the start of a provisional load which happens before frameDidNavigate is called.
+            // This resource will be the new mainResource if frameDidNavigate is called.
+            frame.startProvisionalLoad(resource);
+            return;
+        }
+
+        // This is just another resource, either for the main loader or the provisional loader.
+        console.assert(resource.loaderIdentifier === frame.loaderIdentifier || resource.loaderIdentifier === frame.provisionalLoaderIdentifier);
+        frame.addResource(resource);
+    },
+
+    _processMainFrameResourceTreePayload: function(error, mainFramePayload)
+    {
+        console.assert(this._waitingForMainFrameResourceTreePayload);
+        delete this._waitingForMainFrameResourceTreePayload;
+
+        if (error) {
+            console.error(JSON.stringify(error));
+            return;
+        }
+
+        console.assert(mainFramePayload);
+        console.assert(mainFramePayload.frame);
+
+        this._resourceRequestIdentifierMap = {};
+        this._frameIdentifierMap = {};
+
+        var oldMainFrame = this._mainFrame;
+
+        this._mainFrame = this._addFrameTreeFromFrameResourceTreePayload(mainFramePayload, true);
+
+        if (this._mainFrame !== oldMainFrame)
+            this._mainFrameDidChange(oldMainFrame);
+    },
+
+    _createFrame: function(payload)
+    {
+        // If payload.url is missing or empty then this page is likely the special empty page. In that case
+        // we will just say it is "about:blank" so we have a URL, which is required for resources.
+        var mainResource = new WebInspector.Resource(payload.url || "about:blank", payload.mimeType, null, payload.loaderId);
+        var frame = new WebInspector.Frame(payload.id, payload.name, payload.securityOrigin, payload.loaderId, mainResource);
+
+        this._frameIdentifierMap[frame.id] = frame;
+
+        mainResource.markAsFinished();
+
+        return frame;
+    },
+
+    _createResource: function(payload, framePayload)
+    {
+        var resource = new WebInspector.Resource(payload.url, payload.mimeType, payload.type, framePayload.loaderId);
+
+        if (payload.sourceMapURL)
+            WebInspector.sourceMapManager.downloadSourceMap(payload.sourceMapURL, resource.url, resource);
+
+        return resource;
+    },
+
+    _addFrameTreeFromFrameResourceTreePayload: function(payload, isMainFrame)
+    {
+        var frame = this._createFrame(payload.frame);
+        if (isMainFrame)
+            frame.markAsMainFrame();
+
+        for (var i = 0; payload.childFrames && i < payload.childFrames.length; ++i)
+            frame.addChildFrame(this._addFrameTreeFromFrameResourceTreePayload(payload.childFrames[i], false));
+
+        for (var i = 0; payload.resources && i < payload.resources.length; ++i) {
+            var resourcePayload = payload.resources[i];
+
+            // The main resource is included as a resource. We can skip it since we already created
+            // a main resource when we created the Frame. The resource payload does not include anything
+            // didn't already get from the frame payload.
+            if (resourcePayload.type === "Document" && resourcePayload.url === payload.frame.url)
+                continue;
+
+            var resource = this._createResource(resourcePayload, payload);
+            frame.addResource(resource);
+
+            if (resourcePayload.failed || resourcePayload.canceled)
+                resource.markAsFailed(resourcePayload.canceled);
+            else
+                resource.markAsFinished();
+        }
+
+        this._dispatchFrameWasAddedEvent(frame);
+
+        return frame;
+    },
+
+    _dispatchFrameWasAddedEvent: function(frame)
+    {
+        this.dispatchEventToListeners(WebInspector.FrameResourceManager.Event.FrameWasAdded, {frame: frame});
+    },
+
+    _mainFrameDidChange: function(oldMainFrame)
+    {
+        if (oldMainFrame)
+            oldMainFrame.unmarkAsMainFrame();
+        if (this._mainFrame)
+            this._mainFrame.markAsMainFrame();
+        this.dispatchEventToListeners(WebInspector.FrameResourceManager.Event.MainFrameDidChange, {oldMainFrame: oldMainFrame});
+    }
+};
+
+WebInspector.FrameResourceManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/FrameTreeElement.js b/Source/WebInspectorUI/UserInterface/FrameTreeElement.js
new file mode 100644
index 000000000..4e1998229
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/FrameTreeElement.js
@@ -0,0 +1,492 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FrameTreeElement = function(frame, representedObject)
+{
+    console.assert(frame instanceof WebInspector.Frame);
+
+    WebInspector.ResourceTreeElement.call(this, frame.mainResource, representedObject || frame);
+
+    this._frame = frame;
+    this._newChildQueue = [];
+
+    this._updateExpandedSetting();
+
+    frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+    frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
+    frame.addEventListener(WebInspector.Frame.Event.ResourceWasRemoved, this._resourceWasRemoved, this);
+    frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasAdded, this._childFrameWasAdded, this);
+    frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasRemoved, this._childFrameWasRemoved, this);
+
+    this._updateParentStatus();
+    this.shouldRefreshChildren = true;
+};
+
+WebInspector.FrameTreeElement.MediumChildCountThreshold = 5;
+WebInspector.FrameTreeElement.LargeChildCountThreshold = 15;
+WebInspector.FrameTreeElement.NumberOfMediumCategoriesThreshold = 2;
+WebInspector.FrameTreeElement.NewChildQueueUpdateInterval = 500;
+
+WebInspector.FrameTreeElement.prototype = {
+    constructor: WebInspector.FrameTreeElement,
+
+    // Public
+
+    get frame()
+    {
+        return this._frame;
+    },
+
+    descendantResourceTreeElementTypeDidChange: function(resourceTreeElement, oldType)
+    {
+        // Called by descendant ResourceTreeElements.
+
+        // Add the tree element again, which will move it to the new location
+        // based on sorting and possible folder changes.
+        this._addTreeElement(resourceTreeElement);
+    },
+
+    descendantResourceTreeElementMainTitleDidChange: function(resourceTreeElement, oldMainTitle)
+    {
+        // Called by descendant ResourceTreeElements.
+
+        // Add the tree element again, which will move it to the new location
+        // based on sorting and possible folder changes.
+        this._addTreeElement(resourceTreeElement);
+    },
+
+    // Overrides from SourceCodeTreeElement.
+
+    updateSourceMapResources: function()
+    {
+        // Frames handle their own SourceMapResources.
+
+        if (!this.treeOutline || !this.treeOutline.includeSourceMapResourceChildren)
+            return;
+
+        if (!this._frame)
+            return;
+
+        this._updateParentStatus();
+
+        if (this.resource && this.resource.sourceMaps.length)
+            this.shouldRefreshChildren = true;
+    },
+
+    onattach: function()
+    {
+        // Frames handle their own SourceMapResources.
+
+        WebInspector.GeneralTreeElement.prototype.onattach.call(this);
+    },
+
+    // Overrides from TreeElement (Private).
+
+    onpopulate: function()
+    {
+        if (this.children.length && !this.shouldRefreshChildren)
+            return;
+
+        this.shouldRefreshChildren = false;
+
+        this.removeChildren();
+        this._clearNewChildQueue();
+
+        if (this._shouldGroupIntoFolders() && !this._groupedIntoFolders)
+            this._groupedIntoFolders = true;
+
+        for (var i = 0; i < this._frame.childFrames.length; ++i)
+            this._addTreeElementForRepresentedObject(this._frame.childFrames[i]);
+
+        for (var i = 0; i < this._frame.resources.length; ++i)
+            this._addTreeElementForRepresentedObject(this._frame.resources[i]);
+
+        var sourceMaps = this.resource && this.resource.sourceMaps;
+        for (var i = 0; i < sourceMaps.length; ++i) {
+            var sourceMap = sourceMaps[i];
+            for (var j = 0; j < sourceMap.resources.length; ++j)
+            this._addTreeElementForRepresentedObject(sourceMap.resources[j]);
+        }
+    },
+
+    onexpand: function()
+    {
+        this._expandedSetting.value = true;
+    },
+
+    oncollapse: function()
+    {
+        // Only store the setting if we have children, since setting hasChildren to false will cause a collapse,
+        // and we only care about user triggered collapses.
+        if (this.hasChildren)
+            this._expandedSetting.value = false;
+    },
+
+    removeChildren: function()
+    {
+        TreeElement.prototype.removeChildren.call(this);
+
+        if (this._framesFolderTreeElement)
+            this._framesFolderTreeElement.removeChildren();
+
+        for (var type in this._resourceFoldersTypeMap)
+            this._resourceFoldersTypeMap[type].removeChildren();
+
+        delete this._resourceFoldersTypeMap;
+        delete this._framesFolderTreeElement;
+    },
+
+    // Private
+
+    _updateExpandedSetting: function()
+    {
+        this._expandedSetting = new WebInspector.Setting("frame-expanded-" + this._frame.url.hash, this._frame.isMainFrame() ? true : false);
+        if (this._expandedSetting.value)
+            this.expand();
+        else
+            this.collapse();
+    },
+
+    _updateParentStatus: function()
+    {
+        this.hasChildren = (this._frame.resources.length || this._frame.childFrames.length || (this.resource && this.resource.sourceMaps.length));
+        if (!this.hasChildren)
+            this.removeChildren();
+    },
+
+    _mainResourceDidChange: function(event)
+    {
+        this._updateResource(this._frame.mainResource);
+        this._updateParentStatus();
+
+        this._groupedIntoFolders = false;
+
+        this._clearNewChildQueue();
+
+        this.removeChildren();
+
+        // Change the expanded setting since the frame URL has changed. Do this before setting shouldRefreshChildren, since
+        // shouldRefreshChildren will call onpopulate if expanded is true.
+        this._updateExpandedSetting();
+
+        this.shouldRefreshChildren = true;
+    },
+
+    _resourceWasAdded: function(event)
+    {
+        this._addRepresentedObjectToNewChildQueue(event.data.resource);
+    },
+
+    _resourceWasRemoved: function(event)
+    {
+        this._removeChildForRepresentedObject(event.data.resource);
+    },
+
+    _childFrameWasAdded: function(event)
+    {
+        this._addRepresentedObjectToNewChildQueue(event.data.childFrame);
+    },
+
+    _childFrameWasRemoved: function(event)
+    {
+        this._removeChildForRepresentedObject(event.data.childFrame);
+    },
+
+    _addRepresentedObjectToNewChildQueue: function(representedObject)
+    {
+        // This queue reduces flashing as resources load and change folders when their type becomes known.
+
+        this._newChildQueue.push(representedObject);
+        if (!this._newChildQueueTimeoutIdentifier)
+            this._newChildQueueTimeoutIdentifier = setTimeout(this._populateFromNewChildQueue.bind(this), WebInspector.FrameTreeElement.NewChildQueueUpdateInterval);
+    },
+
+    _removeRepresentedObjectFromNewChildQueue: function(representedObject)
+    {
+        this._newChildQueue.remove(representedObject);
+    },
+
+    _populateFromNewChildQueue: function()
+    {
+        for (var i = 0; i < this._newChildQueue.length; ++i)
+            this._addChildForRepresentedObject(this._newChildQueue[i]);
+
+        this._newChildQueue = [];
+        this._newChildQueueTimeoutIdentifier = null;
+    },
+
+    _clearNewChildQueue: function()
+    {
+        this._newChildQueue = [];
+        if (this._newChildQueueTimeoutIdentifier) {
+            clearTimeout(this._newChildQueueTimeoutIdentifier);
+            this._newChildQueueTimeoutIdentifier = null;
+        }
+    },
+
+    _addChildForRepresentedObject: function(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame);
+        if (!(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame))
+            return;
+
+        this._updateParentStatus();
+
+        if (!this.treeOutline) {
+            // Just mark as needing to update to avoid doing work that might not be needed.
+            this.shouldRefreshChildren = true;
+            return;
+        }
+
+        if (this._shouldGroupIntoFolders() && !this._groupedIntoFolders) {
+            // Mark as needing a refresh to rebuild the tree into folders.
+            this._groupedIntoFolders = true;
+            this.shouldRefreshChildren = true;
+            return;
+        }
+
+        this._addTreeElementForRepresentedObject(representedObject);
+    },
+
+    _removeChildForRepresentedObject: function(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame);
+        if (!(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame))
+            return;
+
+        this._removeRepresentedObjectFromNewChildQueue(representedObject);
+
+        this._updateParentStatus();
+
+        if (!this.treeOutline) {
+            // Just mark as needing to update to avoid doing work that might not be needed.
+            this.shouldRefreshChildren = true;
+            return;
+        }
+
+        // Find the tree element for the frame by using getCachedTreeElement
+        // to only get the item if it has been created already.
+        var childTreeElement = this.treeOutline.getCachedTreeElement(representedObject);
+        if (!childTreeElement || !childTreeElement.parent)
+            return;
+
+        this._removeTreeElement(childTreeElement);
+    },
+
+    _addTreeElementForRepresentedObject: function(representedObject)
+    {
+        var childTreeElement = this.treeOutline.getCachedTreeElement(representedObject);
+        if (!childTreeElement) {
+            if (representedObject instanceof WebInspector.SourceMapResource)
+                childTreeElement = new WebInspector.SourceMapResourceTreeElement(representedObject);
+            else if (representedObject instanceof WebInspector.Resource)
+                childTreeElement = new WebInspector.ResourceTreeElement(representedObject);
+            else if (representedObject instanceof WebInspector.Frame)
+                childTreeElement = new WebInspector.FrameTreeElement(representedObject);
+        }
+
+        this._addTreeElement(childTreeElement);
+    },
+
+    _addTreeElement: function(childTreeElement)
+    {
+        console.assert(childTreeElement);
+        if (!childTreeElement)
+            return;
+
+        var wasSelected = childTreeElement.selected;
+
+        this._removeTreeElement(childTreeElement, true, true);
+
+        var parentTreeElement = this._parentTreeElementForRepresentedObject(childTreeElement.representedObject);
+        if (parentTreeElement !== this && !parentTreeElement.parent)
+            this._insertFolderTreeElement(parentTreeElement);
+
+        this._insertResourceTreeElement(parentTreeElement, childTreeElement);
+
+        if (wasSelected)
+            childTreeElement.revealAndSelect(true, false, true, true);
+    },
+
+    _compareTreeElementsByMainTitle: function(a, b)
+    {
+        return a.mainTitle.localeCompare(b.mainTitle);
+    },
+
+    _insertFolderTreeElement: function(folderTreeElement)
+    {
+        console.assert(this._groupedIntoFolders);
+        console.assert(!folderTreeElement.parent);
+        this.insertChild(folderTreeElement, insertionIndexForObjectInListSortedByFunction(folderTreeElement, this.children, this._compareTreeElementsByMainTitle));
+    },
+
+    _insertResourceTreeElement: function(parentTreeElement, childTreeElement)
+    {
+        console.assert(!childTreeElement.parent);
+        parentTreeElement.insertChild(childTreeElement, insertionIndexForObjectInListSortedByFunction(childTreeElement, parentTreeElement.children, WebInspector.ResourceTreeElement.compareResourceTreeElements));
+    },
+
+    _removeTreeElement: function(childTreeElement, suppressOnDeselect, suppressSelectSibling)
+    {
+        var oldParent = childTreeElement.parent;
+        if (!oldParent)
+            return;
+
+        oldParent.removeChild(childTreeElement, suppressOnDeselect, suppressSelectSibling);
+
+        if (oldParent === this)
+            return;
+
+        console.assert(oldParent instanceof WebInspector.FolderTreeElement);
+        if (!(oldParent instanceof WebInspector.FolderTreeElement))
+            return;
+
+        // Remove the old parent folder if it is now empty.
+        if (!oldParent.children.length)
+            oldParent.parent.removeChild(oldParent);
+    },
+
+    _folderNameForResourceType: function(type)
+    {
+        return WebInspector.Resource.Type.displayName(type, true);
+    },
+
+    _parentTreeElementForRepresentedObject: function(representedObject)
+    {
+        if (!this._groupedIntoFolders)
+            return this;
+
+        function createFolderTreeElement(type, displayName)
+        {
+            var folderTreeElement = new WebInspector.FolderTreeElement(displayName);
+            folderTreeElement._expandedSetting = new WebInspector.Setting(type + "-folder-expanded-" + this._frame.url.hash, false);
+            if (folderTreeElement._expandedSetting.value)
+                folderTreeElement.expand();
+            folderTreeElement.onexpand = this._folderTreeElementExpandedStateChange.bind(this);
+            folderTreeElement.oncollapse = this._folderTreeElementExpandedStateChange.bind(this);
+            return folderTreeElement;
+        }
+
+        if (representedObject instanceof WebInspector.Frame) {
+            if (!this._framesFolderTreeElement)
+                this._framesFolderTreeElement = createFolderTreeElement.call(this, "frames", WebInspector.UIString("Frames"));
+            return this._framesFolderTreeElement;
+        }
+
+        if (representedObject instanceof WebInspector.Resource) {
+            var folderName = this._folderNameForResourceType(representedObject.type);
+            if (!folderName)
+                return this;
+
+            if (!this._resourceFoldersTypeMap)
+                this._resourceFoldersTypeMap = {};
+            if (!this._resourceFoldersTypeMap[representedObject.type])
+                this._resourceFoldersTypeMap[representedObject.type] = createFolderTreeElement.call(this, representedObject.type, folderName);
+            return this._resourceFoldersTypeMap[representedObject.type];
+        }
+
+        console.error("Unknown representedObject: ", representedObject);
+        return this;
+    },
+
+    _folderTreeElementExpandedStateChange: function(folderTreeElement)
+    {
+        console.assert(folderTreeElement._expandedSetting);
+        folderTreeElement._expandedSetting.value = folderTreeElement.expanded;
+    },
+
+    _shouldGroupIntoFolders: function()
+    {
+        // Already grouped into folders, keep it that way.
+        if (this._groupedIntoFolders)
+            return true;
+
+        // Resources and Frames are grouped into folders if one of two thresholds are met:
+        // 1) Once the number of medium categories passes NumberOfMediumCategoriesThreshold.
+        // 2) When there is a category that passes LargeChildCountThreshold and there are
+        //    any resources in another category.
+
+        // Folders are avoided when there is only one category or most categories are small.
+
+        var numberOfSmallCategories = 0;
+        var numberOfMediumCategories = 0;
+        var foundLargeCategory = false;
+
+        if (this._frame.childFrames.length >= WebInspector.FrameTreeElement.LargeChildCountThreshold)
+            foundLargeCategory = true;
+        else if (this._frame.childFrames.length >= WebInspector.FrameTreeElement.MediumChildCountThreshold)
+            ++numberOfMediumCategories;
+        else if (this._frame.childFrames.length)
+            ++numberOfSmallCategories;
+
+        // Iterate over all the available resource types. There are some other properties on
+        // WebInspector.Resource.Type that we need to skip, like private data and functions.
+        for (var type in WebInspector.Resource.Type) {
+            // Skip private data.
+            if (type.charAt(0) === "_")
+                continue;
+
+            // Only care about the values that are strings, not functions, etc.
+            var typeValue = WebInspector.Resource.Type[type];
+            if (typeof typeValue !== "string")
+                continue;
+
+            var resourceCount = this._frame.resourcesWithType(typeValue).length;
+            if (!resourceCount)
+                continue;
+
+            // If this type has any resources and there is a known large category, make folders.
+            if (resourceCount && foundLargeCategory)
+                return true;
+
+            // If there are lots of this resource type, then count it as a large category.
+            if (resourceCount >= WebInspector.FrameTreeElement.LargeChildCountThreshold) {
+                // If we already have other resources in other small or medium categories, make folders.
+                if (numberOfSmallCategories || numberOfMediumCategories)
+                    return true;
+
+                foundLargeCategory = true;
+                continue;
+            }
+
+            // Check if this is a medium category.
+            if (resourceCount >= WebInspector.FrameTreeElement.MediumChildCountThreshold) {
+                ++numberOfMediumCategories;
+
+                // If this is the medium category that puts us over the maximum allowed, make folders.
+                if (numberOfMediumCategories >= WebInspector.FrameTreeElement.NumberOfMediumCategoriesThreshold)
+                    return true;
+                continue;
+            }
+
+            // This is a small category.
+            ++numberOfSmallCategories;
+        }
+
+        return false;
+    }
+};
+
+WebInspector.FrameTreeElement.prototype.__proto__ = WebInspector.ResourceTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/GeneralTreeElement.js b/Source/WebInspectorUI/UserInterface/GeneralTreeElement.js
new file mode 100644
index 000000000..371891fd1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/GeneralTreeElement.js
@@ -0,0 +1,395 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.GeneralTreeElement = function(classNames, title, subtitle, representedObject, hasChildren)
+{
+    TreeElement.call(this, "", representedObject, hasChildren);
+
+    this.classNames = classNames;
+
+    this._tooltipHandledSeparately = false;
+    this._mainTitle = title || "";
+    this._subtitle = subtitle || "";
+    this._status = "";
+}
+
+WebInspector.GeneralTreeElement.StyleClassName = "item";
+WebInspector.GeneralTreeElement.DisclosureButtonStyleClassName = "disclosure-button";
+WebInspector.GeneralTreeElement.IconElementStyleClassName = "icon";
+WebInspector.GeneralTreeElement.StatusElementStyleClassName = "status";
+WebInspector.GeneralTreeElement.TitlesElementStyleClassName = "titles";
+WebInspector.GeneralTreeElement.MainTitleElementStyleClassName = "title";
+WebInspector.GeneralTreeElement.SubtitleElementStyleClassName = "subtitle";
+WebInspector.GeneralTreeElement.NoSubtitleStyleClassName = "no-subtitle";
+WebInspector.GeneralTreeElement.SmallStyleClassName = "small";
+WebInspector.GeneralTreeElement.TwoLineStyleClassName = "two-line";
+
+WebInspector.GeneralTreeElement.Event = {
+    MainTitleDidChange: "general-tree-element-main-title-did-change"
+};
+
+WebInspector.GeneralTreeElement.prototype = {
+    constructor: WebInspector.GeneralTreeElement,
+
+    // Public
+
+    get element()
+    {
+        return this._listItemNode;
+    },
+
+    get disclosureButton()
+    {
+        this._createElementsIfNeeded();
+        return this._disclosureButton;
+    },
+
+    get iconElement()
+    {
+        this._createElementsIfNeeded();
+        return this._iconElement;
+    },
+
+    get titlesElement()
+    {
+        this._createElementsIfNeeded();
+        return this._titlesElement;
+    },
+
+    get mainTitleElement()
+    {
+        this._createElementsIfNeeded();
+        return this._mainTitleElement;
+    },
+
+    get subtitleElement()
+    {
+        this._createElementsIfNeeded();
+        this._createSubtitleElementIfNeeded();
+        return this._subtitleElement;
+    },
+
+    get classNames()
+    {
+        return this._classNames;
+    },
+
+    set classNames(x)
+    {
+        if (this._listItemNode && this._classNames) {
+            for (var i = 0; i < this._classNames.length; ++i)
+                this._listItemNode.classList.remove(this._classNames[i]);
+        }
+
+        if (typeof x === "string")
+            x = [x];
+
+        this._classNames = x || [];
+
+        if (this._listItemNode) {
+            for (var i = 0; i < this._classNames.length; ++i)
+                this._listItemNode.classList.add(this._classNames[i]);
+        }
+    },
+
+    addClassName: function(className)
+    {
+        if (this._classNames.contains(className))
+            return;
+
+        this._classNames.push(className);
+
+        if (this._listItemNode)
+            this._listItemNode.classList.add(className);
+    },
+
+    removeClassName: function(className)
+    {
+        if (!this._classNames.contains(className))
+            return;
+
+        this._classNames.remove(className);
+
+        if (this._listItemNode)
+            this._listItemNode.classList.remove(className);
+    },
+
+    get small()
+    {
+        return this._small;
+    },
+
+    set small(x)
+    {
+        this._small = x;
+
+        if (this._listItemNode) {
+            if (this._small)
+                this._listItemNode.classList.add(WebInspector.GeneralTreeElement.SmallStyleClassName);
+            else
+                this._listItemNode.classList.remove(WebInspector.GeneralTreeElement.SmallStyleClassName);
+        }
+    },
+
+    get twoLine()
+    {
+        return this._twoLine;
+    },
+
+    set twoLine(x)
+    {
+        this._twoLine = x;
+
+        if (this._listItemNode) {
+            if (this._twoLine)
+                this._listItemNode.classList.add(WebInspector.GeneralTreeElement.TwoLineStyleClassName);
+            else
+                this._listItemNode.classList.remove(WebInspector.GeneralTreeElement.TwoLineStyleClassName);
+        }
+    },
+
+    get mainTitle()
+    {
+        return this._mainTitle;
+    },
+
+    set mainTitle(x)
+    {
+        this._mainTitle = x || "";
+        this._updateTitleElements();
+        this.didChange();
+        this.dispatchEventToListeners(WebInspector.GeneralTreeElement.Event.MainTitleDidChange);
+    },
+
+    get subtitle()
+    {
+        return this._subtitle;
+    },
+
+    set subtitle(x)
+    {
+        this._subtitle = x || "";
+        this._updateTitleElements();
+        this.didChange();
+    },
+
+    get status()
+    {
+        return this._status;
+    },
+
+    set status(x)
+    {
+        this._status = x || "";
+        this._updateStatusElement();
+    },
+
+    get filterableData()
+    {
+        return {text: [this.mainTitle, this.subtitle]};
+    },
+
+    get tooltipHandledSeparately()
+    {
+        return this._tooltipHandledSeparately;
+    },
+
+    set tooltipHandledSeparately(x)
+    {
+        this._tooltipHandledSeparately = x || false;
+    },
+
+    // Overrides from TreeElement (Private)
+
+    isEventWithinDisclosureTriangle: function(event)
+    {
+        return event.target === this._disclosureButton;
+    },
+
+    onattach: function()
+    {
+        this._createElementsIfNeeded();
+        this._updateTitleElements();
+        this._updateStatusElement();
+
+        this._listItemNode.classList.add(WebInspector.GeneralTreeElement.StyleClassName);
+
+        if (this._classNames) {
+            for (var i = 0; i < this._classNames.length; ++i)
+                this._listItemNode.classList.add(this._classNames[i]);
+        }
+
+        if (this._small)
+            this._listItemNode.classList.add(WebInspector.GeneralTreeElement.SmallStyleClassName);
+
+        if (this._twoLine)
+            this._listItemNode.classList.add(WebInspector.GeneralTreeElement.TwoLineStyleClassName);
+
+        this._listItemNode.appendChild(this._disclosureButton);
+        this._listItemNode.appendChild(this._iconElement);
+        this._listItemNode.appendChild(this._statusElement);
+        this._listItemNode.appendChild(this._titlesElement);
+
+        if (this.oncontextmenu && typeof this.oncontextmenu === "function") {
+            this._boundContextMenuEventHandler = this.oncontextmenu.bind(this);
+            this._listItemNode.addEventListener("contextmenu", this._boundContextMenuEventHandler, true);
+        }
+
+        if (!this._boundContextMenuEventHandler && this.treeOutline.oncontextmenu && typeof this.treeOutline.oncontextmenu === "function") {
+            this._boundContextMenuEventHandler = function(event) { this.treeOutline.oncontextmenu(event, this); }.bind(this);
+            this._listItemNode.addEventListener("contextmenu", this._boundContextMenuEventHandler, true);
+        }
+    },
+
+    ondetach: function()
+    {
+        if (this._boundContextMenuEventHandler) {
+            this._listItemNode.removeEventListener("contextmenu", this._boundContextMenuEventHandler, true);
+            delete this._boundContextMenuEventHandler;
+        }
+    },
+
+    onreveal: function()
+    {
+        if (this._listItemNode)
+            this._listItemNode.scrollIntoViewIfNeeded(false);
+    },
+
+    // Protected
+
+    callFirstAncestorFunction: function(functionName, arguments)
+    {
+        // Call the first ancestor that implements a function named functionName (if any).
+        var currentNode = this.parent;
+        while (currentNode) {
+            if (typeof currentNode[functionName] === "function") {
+                currentNode[functionName].apply(currentNode, arguments);
+                break;
+            }
+
+            currentNode = currentNode.parent;
+        }
+    },
+
+    // Private
+
+    _createElementsIfNeeded: function()
+    {
+        if (this._createdElements)
+            return;
+
+        this._disclosureButton = document.createElement("button");
+        this._disclosureButton.className = WebInspector.GeneralTreeElement.DisclosureButtonStyleClassName;
+
+        // Don't allow the disclosure button to be keyboard focusable. The TreeOutline is focusable and has
+        // its own keybindings for toggling expand and collapse.
+        this._disclosureButton.tabIndex = -1;
+
+        this._iconElement = document.createElement("img");
+        this._iconElement.className = WebInspector.GeneralTreeElement.IconElementStyleClassName;
+
+        this._statusElement = document.createElement("div");
+        this._statusElement.className = WebInspector.GeneralTreeElement.StatusElementStyleClassName;
+
+        this._titlesElement = document.createElement("div");
+        this._titlesElement.className = WebInspector.GeneralTreeElement.TitlesElementStyleClassName;
+
+        this._mainTitleElement = document.createElement("span");
+        this._mainTitleElement.className = WebInspector.GeneralTreeElement.MainTitleElementStyleClassName;
+        this._titlesElement.appendChild(this._mainTitleElement);
+
+        this._createdElements = true;
+    },
+
+    _createSubtitleElementIfNeeded: function()
+    {
+        if (this._subtitleElement)
+            return;
+
+        this._subtitleElement = document.createElement("span");
+        this._subtitleElement.className = WebInspector.GeneralTreeElement.SubtitleElementStyleClassName;
+        this._titlesElement.appendChild(this._subtitleElement);
+    },
+
+    _updateTitleElements: function()
+    {
+        if (!this._createdElements)
+            return;
+
+        if (typeof this._mainTitle === "string") {
+            if (this._mainTitleElement.textContent !== this._mainTitle)
+                this._mainTitleElement.textContent = this._mainTitle;
+        } else if (this._mainTitle instanceof Node) {
+            this._mainTitleElement.removeChildren();
+            this._mainTitleElement.appendChild(this._mainTitle);
+        }
+
+        if (typeof this._subtitle === "string" && this._subtitle) {
+            this._createSubtitleElementIfNeeded();
+            if (this._subtitleElement.textContent !== this._subtitle)
+                this._subtitleElement.textContent = this._subtitle;
+            this._titlesElement.classList.remove(WebInspector.GeneralTreeElement.NoSubtitleStyleClassName);
+        } else if (this._subtitle instanceof Node) {
+            this._createSubtitleElementIfNeeded();
+            this._subtitleElement.removeChildren();
+            this._subtitleElement.appendChild(this._subtitle);
+        } else {
+            if (this._subtitleElement)
+                this._subtitleElement.textContent = "";
+            this._titlesElement.classList.add(WebInspector.GeneralTreeElement.NoSubtitleStyleClassName);
+        }
+
+        // Set a default tooltip if there isn't a custom one already assigned.
+        if (!this.tooltip && !this._tooltipHandledSeparately) {
+            console.assert(this._listItemNode);
+
+            // Get the textContent for the elements since they can contain other nodes,
+            // and the tool tip only cares about the text.
+            var mainTitleText = this._mainTitleElement.textContent;
+            var subtitleText = this._subtitleElement ? this._subtitleElement.textContent : "";
+
+            if (mainTitleText && subtitleText)
+                this._listItemNode.title = mainTitleText + (this._small && !this._twoLine ? " \u2014 " : "\n") + subtitleText;
+            else if (mainTitleText)
+                this._listItemNode.title = mainTitleText;
+            else
+                this._listItemNode.title = subtitleText;
+        }
+    },
+
+    _updateStatusElement: function()
+    {
+        if (!this._createdElements)
+            return;
+
+        if (this._status instanceof Node) {
+            this._statusElement.removeChildren();
+            this._statusElement.appendChild(this._status);
+        } else
+            this._statusElement.textContent = this._status;
+    }
+}
+
+WebInspector.GeneralTreeElement.prototype.__proto__ = TreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/GeneralTreeElementPathComponent.js b/Source/WebInspectorUI/UserInterface/GeneralTreeElementPathComponent.js
new file mode 100644
index 000000000..0293492f6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/GeneralTreeElementPathComponent.js
@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.GeneralTreeElementPathComponent = function(generalTreeElement, representedObject) {
+    WebInspector.HierarchicalPathComponent.call(this, generalTreeElement.mainTitle, generalTreeElement.classNames, representedObject || generalTreeElement.representedObject);
+
+    this._generalTreeElement = generalTreeElement;
+    generalTreeElement.addEventListener(WebInspector.GeneralTreeElement.Event.MainTitleDidChange, this._mainTitleDidChange, this);
+};
+
+WebInspector.GeneralTreeElementPathComponent.prototype = {
+    constructor: WebInspector.GeneralTreeElementPathComponent,
+
+    // Public
+
+    get generalTreeElement()
+    {
+        return this._generalTreeElement;
+    },
+
+    get previousSibling()
+    {
+        if (!this._generalTreeElement.previousSibling)
+            return null;
+        return new WebInspector.GeneralTreeElementPathComponent(this._generalTreeElement.previousSibling);
+    },
+
+    get nextSibling()
+    {
+        if (!this._generalTreeElement.nextSibling)
+            return null;
+        return new WebInspector.GeneralTreeElementPathComponent(this._generalTreeElement.nextSibling);
+    },
+    
+    // Private
+    
+    _mainTitleDidChange: function(event)
+    {
+        this.displayName = this._generalTreeElement.mainTitle;
+    }
+};
+
+WebInspector.GeneralTreeElementPathComponent.prototype.__proto__ = WebInspector.HierarchicalPathComponent.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/GenericResourceContentView.js b/Source/WebInspectorUI/UserInterface/GenericResourceContentView.js
new file mode 100644
index 000000000..2ea873867
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/GenericResourceContentView.js
@@ -0,0 +1,37 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.GenericResourceContentView = function(resource)
+{
+    WebInspector.ResourceContentView.call(this, resource, WebInspector.GenericResourceContentView.StyleClassName);
+};
+
+WebInspector.GenericResourceContentView.StyleClassName = "generic";
+
+WebInspector.GenericResourceContentView.prototype = {
+    constructor: WebInspector.GenericResourceContentView
+};
+
+WebInspector.GenericResourceContentView.prototype.__proto__ = WebInspector.ResourceContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Geometry.js b/Source/WebInspectorUI/UserInterface/Geometry.js
new file mode 100644
index 000000000..ababb2870
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Geometry.js
@@ -0,0 +1,245 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Point = function(x, y)
+{
+    this.x = x || 0;
+    this.y = y || 0;
+};
+
+WebInspector.Point.fromEvent = function(event)
+{
+    return new WebInspector.Point(event.pageX, event.pageY);
+};
+
+WebInspector.Point.fromEventInElement = function(event, element)
+{
+    var wkPoint = window.webkitConvertPointFromPageToNode(element, new WebKitPoint(event.pageX, event.pageY));
+    return new WebInspector.Point(wkPoint.x, wkPoint.y);
+};
+
+WebInspector.Point.prototype = {
+    constructor: WebInspector.Point,
+
+    toString : function()
+    {
+        return "WebInspector.Point[" + this.x + "," + this.y + "]";
+    },
+
+    copy: function()
+    {
+        return new WebInspector.Point(this.x, this.y);
+    },
+
+    equals: function(anotherPoint)
+    {
+        return (this.x === anotherPoint.x && this.y === anotherPoint.y);
+    }
+};
+
+WebInspector.Size = function(width, height)
+{
+    this.width = width || 0;
+    this.height = height || 0;
+};
+
+WebInspector.Size.prototype = {
+    constructor: WebInspector.Size,
+
+    toString: function()
+    {
+        return "WebInspector.Size[" + this.width + "," + this.height + "]";
+    },
+
+    copy: function()
+    {
+        return new WebInspector.Size(this.width, this.height);
+    },
+
+    equals: function(anotherSize)
+    {
+        return (this.width === anotherSize.width && this.height === anotherSize.height);
+    }
+};
+
+WebInspector.Size.ZERO_SIZE = new WebInspector.Size(0, 0);
+
+
+WebInspector.Rect = function(x, y, width, height)
+{
+    this.origin = new WebInspector.Point(x || 0, y || 0);
+    this.size = new WebInspector.Size(width || 0, height || 0);
+};
+
+WebInspector.Rect.rectFromClientRect = function(clientRect)
+{
+    return new WebInspector.Rect(clientRect.left, clientRect.top, clientRect.width, clientRect.height);
+};
+
+WebInspector.Rect.prototype = {
+    constructor: WebInspector.Rect,
+
+    toString: function()
+    {
+        return "WebInspector.Rect[" + [this.origin.x, this.origin.y, this.size.width, this.size.height].join(", ") + "]";
+    },
+
+    copy: function()
+    {
+        return new WebInspector.Rect(this.origin.x, this.origin.y, this.size.width, this.size.height);
+    },
+
+    equals: function(anotherRect)
+    {
+        return (this.origin.equals(anotherRect.origin) && this.size.equals(anotherRect.size));
+    },
+
+    inset: function(insets)
+    {
+        return new WebInspector.Rect(
+            this.origin.x + insets.left,
+            this.origin.y + insets.top,
+            this.size.width - insets.left - insets.right,
+            this.size.height - insets.top - insets.bottom
+        );
+    },
+
+    minX: function()
+    {
+        return this.origin.x;
+    },
+
+    minY: function()
+    {
+        return this.origin.y;
+    },
+
+    midX: function()
+    {
+        return this.origin.x + (this.size.width / 2);
+    },
+
+    midY: function()
+    {
+        return this.origin.y + (this.size.height / 2);
+    },
+
+    maxX: function()
+    {
+        return this.origin.x + this.size.width;
+    },
+
+    maxY: function()
+    {
+        return this.origin.y + this.size.height;
+    },
+
+    intersectionWithRect: function(rect)
+    {
+        var x1 = Math.max(this.minX(), rect.minX());
+        var x2 = Math.min(this.maxX(), rect.maxX());
+        if (x1 > x2)
+            return WebInspector.Rect.ZERO_RECT;
+        var intersection = new WebInspector.Rect;
+        intersection.origin.x = x1;
+        intersection.size.width = x2 - x1;
+        var y1 = Math.max(this.minY(), rect.minY());
+        var y2 = Math.min(this.maxY(), rect.maxY());
+        if (y1 > y2)
+            return WebInspector.Rect.ZERO_RECT;
+        intersection.origin.y = y1;
+        intersection.size.height = y2 - y1;
+        return intersection;
+    }
+};
+
+WebInspector.Rect.ZERO_RECT = new WebInspector.Rect(0, 0, 0, 0);
+
+
+WebInspector.EdgeInsets = function(top, right, bottom, left)
+{
+    console.assert(arguments.length === 1 || arguments.length === 4);
+
+    if (arguments.length === 1) {
+        this.top = top;
+        this.right = top;
+        this.bottom = top;
+        this.left = top;
+    } else if (arguments.length === 4) {
+        this.top = top;
+        this.right = right;
+        this.bottom = bottom;
+        this.left = left;
+    }
+};
+
+WebInspector.EdgeInsets.prototype = {
+    constructor: WebInspector.EdgeInsets,
+
+    equals: function(anotherInset)
+    {
+        return (this.top === anotherInset.top && this.right === anotherInset.right &&
+                this.bottom === anotherInset.bottom && this.left === anotherInset.left);
+    },
+
+    copy: function()
+    {
+        return new WebInspector.EdgeInsets(this.top, this.right, this.bottom, this.left);
+    }
+};
+
+WebInspector.RectEdge = {
+    MIN_X : 0,
+    MIN_Y : 1,
+    MAX_X : 2,
+    MAX_Y : 3
+};
+
+WebInspector.Quad = function(quad)
+{
+    this.points = [
+        new WebInspector.Point(quad[0], quad[1]), // top left
+        new WebInspector.Point(quad[2], quad[3]), // top right
+        new WebInspector.Point(quad[4], quad[5]), // bottom right
+        new WebInspector.Point(quad[6], quad[7])  // bottom left
+    ];
+
+    this.width = Math.round(Math.sqrt(Math.pow(quad[0] - quad[2], 2) + Math.pow(quad[1] - quad[3], 2)));
+    this.height = Math.round(Math.sqrt(Math.pow(quad[0] - quad[6], 2) + Math.pow(quad[1] - quad[7], 2)));
+};
+
+WebInspector.Quad.prototype = {
+    constructor: WebInspector.Quad,
+
+    toProtocol: function()
+    {
+        return [
+            this.points[0].x, this.points[0].y,
+            this.points[1].x, this.points[1].y,
+            this.points[2].x, this.points[2].y,
+            this.points[3].x, this.points[3].y
+        ];
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.css b/Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.css
new file mode 100644
index 000000000..9f6439a1e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.css
@@ -0,0 +1,132 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.hierarchical-path-component {
+    display: -webkit-flex;
+    position: relative;
+    height: 20px;
+    min-width: 32px;
+}
+
+.hierarchical-path-component.show-selector-arrows {
+    min-width: 44px;
+}
+
+.hierarchical-path-component.collapsed {
+    min-width: 24px;
+}
+
+.hierarchical-path-component.collapsed > .icon {
+    display: none;
+}
+
+.hierarchical-path-component.collapsed > .title {
+    margin-left: 3px;
+}
+
+.hierarchical-path-component.collapsed > select {
+    display: none;
+}
+
+.hierarchical-path-component > .icon {
+    vertical-align: top;
+    margin: 2px 3px 2px 4px;
+    width: 16px;
+    height: 16px;
+}
+
+.hierarchical-path-component > .selector-arrows {
+    vertical-align: top;
+    margin: 2px 3px 2px 4px;
+    width: 5px;
+    height: 16px;
+    opacity: 0.6;
+    content: url(Images/UpDownArrows.svg);
+}
+
+.hierarchical-path-component > .title {
+    display: -webkit-flex;
+    -webkit-flex: 1;
+
+    vertical-align: top;
+
+    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+    font-family: "Lucida Grande", sans-serif;
+    font-size: 11px;
+    line-height: 20px;
+    height: 20px;
+
+    min-width: 0;
+    max-width: 400px;
+}
+
+.hierarchical-path-component > .title > .content {
+    min-width: 0;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.hierarchical-path-component > select {
+    opacity: 0;
+
+ /* Positioned so the text in the menu aligns with the text in .title. */
+    position: absolute;
+    top: -1px;
+    left: 10px;
+    right: 0;
+    bottom: 0;
+}
+
+.hierarchical-path:not(.always-show-last-path-component-separator) > .hierarchical-path-component:last-child > .separator {
+    visibility: hidden;
+}
+
+.hierarchical-path-component > .separator {
+    display: inline-block;
+    vertical-align: top;
+
+    background-image: url(Images/HierarchicalNavigationItemChevron.pdf);
+    background-repeat: no-repeat;
+    background-position-y: center;
+
+    opacity: 0.75;
+
+    width: 7px;
+    height: 20px;
+
+    margin-left: 2px;
+}
+
+.hierarchical-path-component.text-only {
+    padding-left: 5px;
+    padding-right: 1px;
+}
+
+.hierarchical-path-component.text-only > select {
+ /* Positions so the text in the menu aligns with the text in .title for text only path components. */
+    left: -8px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.js b/Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.js
new file mode 100644
index 000000000..33286840a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.js
@@ -0,0 +1,339 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.HierarchicalPathComponent = function(displayName, styleClassNames, representedObject, textOnly, showSelectorArrows)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(displayName);
+    console.assert(styleClassNames);
+
+    this._representedObject = representedObject || null;
+
+    this._element = document.createElement("div");
+    this._element.className = WebInspector.HierarchicalPathComponent.StyleClassName;
+
+    if (!(styleClassNames instanceof Array))
+        styleClassNames = [styleClassNames];
+
+    for (var i = 0; i < styleClassNames.length; ++i) {
+        if (!styleClassNames[i])
+            continue;
+        this._element.classList.add(styleClassNames[i]);
+    }
+
+    if (!textOnly) {
+        this._iconElement = document.createElement("img");
+        this._iconElement.className = WebInspector.HierarchicalPathComponent.IconElementStyleClassName;
+        this._element.appendChild(this._iconElement);
+    } else
+        this._element.classList.add(WebInspector.HierarchicalPathComponent.TextOnlyStyleClassName);
+
+    this._titleElement = document.createElement("div");
+    this._titleElement.className = WebInspector.HierarchicalPathComponent.TitleElementStyleClassName;
+    this._element.appendChild(this._titleElement);
+
+    this._titleContentElement = document.createElement("div");
+    this._titleContentElement.className = WebInspector.HierarchicalPathComponent.TitleContentElementStyleClassName;
+    this._titleElement.appendChild(this._titleContentElement);
+
+    this._separatorElement = document.createElement("div");
+    this._separatorElement.className = WebInspector.HierarchicalPathComponent.SeparatorElementStyleClassName;
+    this._element.appendChild(this._separatorElement);
+
+    this._selectElement = document.createElement("select");
+    this._selectElement.addEventListener("mouseover", this._selectElementMouseOver.bind(this));
+    this._selectElement.addEventListener("mouseout", this._selectElementMouseOut.bind(this));
+    this._selectElement.addEventListener("mousedown", this._selectElementMouseDown.bind(this));
+    this._selectElement.addEventListener("mouseup", this._selectElementMouseUp.bind(this));
+    this._selectElement.addEventListener("change", this._selectElementSelectionChanged.bind(this));
+    this._element.appendChild(this._selectElement);
+
+    this._previousSibling = null;
+    this._nextSibling = null;
+
+    this._truncatedDisplayNameLength = 0;
+
+    this.selectorArrows = showSelectorArrows;
+    this.displayName = displayName;
+};
+
+WebInspector.HierarchicalPathComponent.StyleClassName = "hierarchical-path-component";
+WebInspector.HierarchicalPathComponent.HiddenStyleClassName = "hidden";
+WebInspector.HierarchicalPathComponent.CollapsedStyleClassName = "collapsed";
+WebInspector.HierarchicalPathComponent.IconElementStyleClassName = "icon";
+WebInspector.HierarchicalPathComponent.TextOnlyStyleClassName = "text-only";
+WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName = "show-selector-arrows";
+WebInspector.HierarchicalPathComponent.TitleElementStyleClassName = "title";
+WebInspector.HierarchicalPathComponent.TitleContentElementStyleClassName = "content";
+WebInspector.HierarchicalPathComponent.SelectorArrowsElementStyleClassName = "selector-arrows";
+WebInspector.HierarchicalPathComponent.SeparatorElementStyleClassName = "separator";
+
+WebInspector.HierarchicalPathComponent.MinimumWidth = 32;
+WebInspector.HierarchicalPathComponent.MinimumWidthCollapsed = 24;
+WebInspector.HierarchicalPathComponent.MinimumWidthForOneCharacterTruncatedTitle = 54;
+WebInspector.HierarchicalPathComponent.SelectorArrowsWidth = 12;
+
+WebInspector.HierarchicalPathComponent.Event = {
+    SiblingWasSelected: "hierarchical-path-component-sibling-was-selected",
+    Clicked: "hierarchical-path-component-clicked"
+};
+
+WebInspector.HierarchicalPathComponent.prototype = {
+    constructor: WebInspector.HierarchicalPathComponent,
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get representedObject()
+    {
+        return this._representedObject;
+    },
+
+    get displayName()
+    {
+        return this._displayName;
+    },
+
+    set displayName(newDisplayName)
+    {
+        console.assert(newDisplayName);
+        if (newDisplayName === this._displayName)
+            return;
+
+        this._displayName = newDisplayName;
+
+        this._updateElementTitleAndText();
+    },
+
+    get truncatedDisplayNameLength()
+    {
+        return this._truncatedDisplayNameLength;
+    },
+
+    set truncatedDisplayNameLength(truncatedDisplayNameLength)
+    {
+        truncatedDisplayNameLength = truncatedDisplayNameLength || 0;
+
+        if (truncatedDisplayNameLength === this._truncatedDisplayNameLength)
+            return;
+
+        this._truncatedDisplayNameLength = truncatedDisplayNameLength;
+
+        this._updateElementTitleAndText();
+    },
+
+    get minimumWidth()
+    {
+        if (this.collapsed)
+            return WebInspector.HierarchicalPathComponent.MinimumWidthCollapsed;
+        if (this.selectorArrows)
+            return WebInspector.HierarchicalPathComponent.MinimumWidth + WebInspector.HierarchicalPathComponent.SelectorArrowsWidth;
+        return WebInspector.HierarchicalPathComponent.MinimumWidth;
+    },
+
+    get forcedWidth()
+    {
+        var maxWidth = this._element.style.getProperty("width");
+        if (typeof maxWidth === "string")
+            return parseInt(maxWidth);
+        return null;
+    },
+
+    set forcedWidth(width)
+    {
+        if (typeof width === "number") {
+            var minimumWidthForOneCharacterTruncatedTitle = WebInspector.HierarchicalPathComponent.MinimumWidthForOneCharacterTruncatedTitle;
+            if (this.selectorArrows)
+                minimumWidthForOneCharacterTruncatedTitle += WebInspector.HierarchicalPathComponent.SelectorArrowsWidth;
+
+            // If the width is less than the minimum width required to show a single character and ellipsis, then
+            // just collapse down to the bare minimum to show only the icon.
+            if (width < minimumWidthForOneCharacterTruncatedTitle)
+                width = 0;
+
+            // Ensure the width does not go less than 1px. If the width is 0 the layout gets funky. There is a min-width
+            // in the CSS too, so as long the width is less than min-width we get the desired effect of only showing the icon.
+            this._element.style.setProperty("width", Math.max(1, width) + "px");
+        } else
+            this._element.style.removeProperty("width");
+    },
+
+    get hidden()
+    {
+        return this._element.classList.contains(WebInspector.HierarchicalPathComponent.HiddenStyleClassName);
+    },
+
+    set hidden(flag)
+    {
+        if (flag)
+            this._element.classList.add(WebInspector.HierarchicalPathComponent.HiddenStyleClassName);
+        else
+            this._element.classList.remove(WebInspector.HierarchicalPathComponent.HiddenStyleClassName);
+    },
+
+    get collapsed()
+    {
+        return this._element.classList.contains(WebInspector.HierarchicalPathComponent.CollapsedStyleClassName);
+    },
+
+    set collapsed(flag)
+    {
+        if (flag)
+            this._element.classList.add(WebInspector.HierarchicalPathComponent.CollapsedStyleClassName);
+        else
+            this._element.classList.remove(WebInspector.HierarchicalPathComponent.CollapsedStyleClassName);
+    },
+
+    get selectorArrows()
+    {
+        return this._element.classList.contains(WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName);
+    },
+
+    set selectorArrows(flag)
+    {
+        if (flag) {
+            this._selectorArrowsElement = document.createElement("img");
+            this._selectorArrowsElement.className = WebInspector.HierarchicalPathComponent.SelectorArrowsElementStyleClassName;
+            this._element.insertBefore(this._selectorArrowsElement, this._separatorElement);
+
+            this._element.classList.add(WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName);
+        } else {
+            if (this._selectorArrowsElement) {
+                this._selectorArrowsElement.remove();
+                delete this._selectorArrowsElement;
+            }
+
+            this._element.classList.remove(WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName);
+        }
+    },
+
+    get previousSibling()
+    {
+        return this._previousSibling;
+    },
+
+    set previousSibling(newSlibling)
+    {
+        this._previousSibling = newSlibling || null;
+    },
+
+    get nextSibling()
+    {
+        return this._nextSibling;
+    },
+
+    set nextSibling(newSlibling)
+    {
+        this._nextSibling = newSlibling || null;
+    },
+
+    // Private
+
+    _updateElementTitleAndText: function()
+    {
+        var truncatedDisplayName = this._displayName;
+        if (this._truncatedDisplayNameLength && truncatedDisplayName.length > this._truncatedDisplayNameLength)
+            truncatedDisplayName = truncatedDisplayName.substring(0, this._truncatedDisplayNameLength) + "\u2026";
+
+        this._element.title = this._displayName;
+        this._titleContentElement.textContent = truncatedDisplayName;
+    },
+
+    _updateSelectElement: function()
+    {
+        this._selectElement.removeChildren();
+
+        function createOption(component)
+        {
+            var optionElement = document.createElement("option");
+            const maxPopupMenuLength = 130; // <rdar://problem/13445374> <select> with very long option has clipped text and popup menu is still very wide
+            optionElement.textContent = component.displayName.length <= maxPopupMenuLength ? component.displayName : component.displayName.substring(0, maxPopupMenuLength) + "\u2026";
+            optionElement._pathComponent = component;
+            return optionElement;
+        }
+
+        var previousSiblingCount = 0;
+        var sibling = this.previousSibling;
+        while (sibling) {
+            this._selectElement.insertBefore(createOption(sibling), this._selectElement.firstChild);
+            sibling = sibling.previousSibling;
+            ++previousSiblingCount;
+        }
+
+        this._selectElement.appendChild(createOption(this));
+
+        sibling = this.nextSibling;
+        while (sibling) {
+            this._selectElement.appendChild(createOption(sibling));
+            sibling = sibling.nextSibling;
+        }
+
+        // Since the change event only fires when the selection actually changes we are
+        // stuck with either not showing the current selection in the menu or accepting that
+        // the user can't select what is already selected again. Selecting the same item
+        // again can be desired (for selecting the main resource while looking at an image).
+        // So if there is only one option, don't make it be selected by default. This lets
+        // you select the top level item which usually has no siblings to go back.
+        // FIXME: Make this work when there are multiple options with a selectedIndex.
+        if (this._selectElement.options.length === 1)
+            this._selectElement.selectedIndex = -1;
+        else
+            this._selectElement.selectedIndex = previousSiblingCount;
+    },
+
+    _selectElementMouseOver: function(event)
+    {
+        if (typeof this.mouseOver === "function")
+            this.mouseOver();
+    },
+
+    _selectElementMouseOut: function(event)
+    {
+        if (typeof this.mouseOut === "function")
+            this.mouseOut();
+    },
+
+    _selectElementMouseDown: function(event)
+    {
+        this._updateSelectElement();
+    },
+
+    _selectElementMouseUp: function(event)
+    {
+        this.dispatchEventToListeners(WebInspector.HierarchicalPathComponent.Event.Clicked);
+    },
+
+    _selectElementSelectionChanged: function(event)
+    {
+        this.dispatchEventToListeners(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, {pathComponent: this._selectElement[this._selectElement.selectedIndex]._pathComponent});
+    }
+};
+
+WebInspector.HierarchicalPathComponent.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/HierarchicalPathNavigationItem.js b/Source/WebInspectorUI/UserInterface/HierarchicalPathNavigationItem.js
new file mode 100644
index 000000000..defac59b2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/HierarchicalPathNavigationItem.js
@@ -0,0 +1,237 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.HierarchicalPathNavigationItem = function(identifier, components) {
+    WebInspector.NavigationItem.call(this, identifier);
+
+    this.components = components;
+};
+
+WebInspector.HierarchicalPathNavigationItem.StyleClassName = "hierarchical-path";
+WebInspector.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName = "always-show-last-path-component-separator";
+
+WebInspector.HierarchicalPathNavigationItem.Event = {
+    PathComponentWasSelected: "hierarchical-path-navigation-item-path-component-was-selected"
+};
+
+WebInspector.HierarchicalPathNavigationItem.prototype = {
+    constructor: WebInspector.HierarchicalPathNavigationItem,
+
+    // Public
+
+    get components()
+    {
+        return this._components;
+    },
+
+    set components(newComponents)
+    {
+        if (!newComponents)
+            newComponents = [];
+
+        for (var i = 0; this._components && i < this._components.length; ++i)
+            this._components[i].removeEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._siblingPathComponentWasSelected, this);
+
+        // Make a shallow copy of the newComponents array using slice.
+        this._components = newComponents.slice(0);
+
+        for (var i = 0; i < this._components.length; ++i)
+            this._components[i].addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._siblingPathComponentWasSelected, this);
+
+        this.element.removeChildren();
+        delete this._collapsedComponent;
+
+        for (var i = 0; i < newComponents.length; ++i)
+            this.element.appendChild(newComponents[i].element);
+
+        // Update layout for the so other items can adjust to the extra space (or lack thereof) too.
+        if (this.parentNavigationBar)
+            this.parentNavigationBar.updateLayoutSoon();
+    },
+
+    get lastComponent()
+    {
+        return this._components.lastValue || null;
+    },
+
+    get alwaysShowLastPathComponentSeparator()
+    {
+        return this.element.classList.contains(WebInspector.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName);
+    },
+
+    set alwaysShowLastPathComponentSeparator(flag)
+    {
+        if (flag)
+            this.element.classList.add(WebInspector.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName);
+        else
+            this.element.classList.remove(WebInspector.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName);
+    },
+
+    updateLayout: function(expandOnly)
+    {
+        var navigationBar = this.parentNavigationBar;
+        if (!navigationBar)
+            return;
+
+        if (this._collapsedComponent) {
+            this.element.removeChild(this._collapsedComponent.element);
+            delete this._collapsedComponent;
+        }
+
+        // Expand our components to full width to test if the items can fit at full width.
+        for (var i = 0; i < this._components.length; ++i) {
+            this._components[i].hidden = false;
+            this._components[i].forcedWidth = null;
+        }
+
+        if (expandOnly)
+            return;
+
+        if (navigationBar.sizesToFit)
+            return;
+
+        // Iterate over all the other navigation items in the bar and calculate their width.
+        var totalOtherItemsWidth = 0;
+        for (var i = 0; i < navigationBar.navigationItems.length; ++i) {
+            // Skip ourself.
+            if (navigationBar.navigationItems[i] === this)
+                continue;
+
+            // Skip flexible space items since they can take up no space at the minimum width.
+            if (navigationBar.navigationItems[i] instanceof WebInspector.FlexibleSpaceNavigationItem)
+                continue;
+
+            totalOtherItemsWidth += navigationBar.navigationItems[i].element.offsetWidth;
+        }
+
+        // Calculate the width for all the components.
+        var thisItemWidth = 0;
+        var componentWidths = [];
+        for (var i = 0; i < this._components.length; ++i) {
+            var componentWidth = this._components[i].element.offsetWidth;
+            componentWidths.push(componentWidth);
+            thisItemWidth += componentWidth;
+        }
+
+        // If all our components fit with the other navigation items in the width of the bar,
+        // then we don't need to collapse any components.
+        var barWidth = navigationBar.element.offsetWidth;
+        if (totalOtherItemsWidth + thisItemWidth <= barWidth)
+            return;
+
+        // Calculate the width we need to remove from our components, then iterate over them
+        // and force their width to be smaller.
+        var widthToRemove = totalOtherItemsWidth + thisItemWidth - barWidth;
+        for (var i = 0; i < this._components.length; ++i) {
+            var componentWidth = componentWidths[i];
+
+            // Try to take the whole width we need to remove from each component.
+            var forcedWidth = componentWidth - widthToRemove;
+            this._components[i].forcedWidth = forcedWidth;
+
+            // Since components have a minimum width, we need to see how much was actually
+            // removed and subtract that from what remans to be removed.
+            componentWidths[i] = Math.max(this._components[i].minimumWidth, forcedWidth);
+            widthToRemove -= (componentWidth - componentWidths[i]);
+
+            // If there is nothing else to remove, then we can stop.
+            if (widthToRemove <= 0)
+                break;
+        }
+
+        // If there is nothing else to remove, then we can stop.
+        if (widthToRemove <= 0)
+            return;
+
+        // If there are 3 or fewer components, then we can stop. Collapsing the middle of 3 components
+        // does not save more than a few pixels over just the icon, so it isn't worth it unless there
+        // are 4 or more components.
+        if (this._components.length <= 3)
+            return;
+
+        // We want to collapse the middle components, so find the nearest middle index.
+        var middle = this._components.length >> 1;
+        var distance = -1;
+        var i = middle;
+
+        // Create a component that will represent the hidden components with a ellipse as the display name.
+        this._collapsedComponent = new WebInspector.HierarchicalPathComponent("\u2026", []);
+        this._collapsedComponent.collapsed = true;
+
+        // Insert it in the middle, it doesn't matter exactly where since the elements around it will be hidden soon.
+        this.element.insertBefore(this._collapsedComponent.element, this._components[middle].element);
+
+        // Add the width of the collapsed component to the width we need to remove.
+        widthToRemove += this._collapsedComponent.minimumWidth;
+
+        var hiddenDisplayNames = [];
+
+        // Loop through the components starting at the middle and fanning out in each direction.
+        while (i >= 0 && i <= this._components.length - 1) {
+            // Only hide components in the middle and never the ends.
+            if (i > 0 && i < this._components.length - 1) {
+                var component = this._components[i];
+                component.hidden = true;
+
+                // Remember the displayName so it can be put in the tool tip of the collapsed component.
+                if (distance > 0)
+                    hiddenDisplayNames.unshift(component.displayName);
+                else
+                    hiddenDisplayNames.push(component.displayName);
+
+                // Fully subtract the hidden component's width.
+                widthToRemove -= componentWidths[i];
+
+                // If there is nothing else to remove, then we can stop.
+                if (widthToRemove <= 0)
+                    break;
+            }
+
+            // Calculate the next index.
+            i = middle + distance;
+
+            // Increment the distance when it is in the positive direction.
+            if (distance > 0)
+                ++distance;
+
+            // Flip the direction of the distance.
+            distance *= -1;
+        }
+
+        // Set the tool tip of the collapsed component.
+        this._collapsedComponent.element.title = hiddenDisplayNames.join("\n");
+    },
+
+    // Private
+
+    _additionalClassNames: [WebInspector.HierarchicalPathNavigationItem.StyleClassName],
+
+    _siblingPathComponentWasSelected: function(event)
+    {
+        this.dispatchEventToListeners(WebInspector.HierarchicalPathNavigationItem.Event.PathComponentWasSelected, event.data);
+    }
+};
+
+WebInspector.HierarchicalPathNavigationItem.prototype.__proto__ = WebInspector.NavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ImageResourceContentView.css b/Source/WebInspectorUI/UserInterface/ImageResourceContentView.css
new file mode 100644
index 000000000..27e535dac
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ImageResourceContentView.css
@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.resource.image {
+    background-color: rgb(231, 231, 231);
+
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    display: -webkit-flex;
+
+    -webkit-justify-content: center;
+}
+
+.content-view.resource.image img {
+    min-width: 0;
+    max-width: 100%;
+
+    -webkit-user-select: text;
+    -webkit-user-drag: auto;
+
+ /* A border is used instead of padding or margin so when there is overflow
+    there will be space on all sides. */
+    border: 15px solid transparent;
+
+    margin: auto 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/ImageResourceContentView.js b/Source/WebInspectorUI/UserInterface/ImageResourceContentView.js
new file mode 100644
index 000000000..442aff32c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ImageResourceContentView.js
@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ImageResourceContentView = function(resource)
+{
+    WebInspector.ResourceContentView.call(this, resource, WebInspector.ImageResourceContentView.StyleClassName);
+
+    this._imageElement = null;
+};
+
+WebInspector.ImageResourceContentView.StyleClassName = "image";
+
+WebInspector.ImageResourceContentView.prototype = {
+    constructor: WebInspector.ImageResourceContentView,
+
+    // Public
+
+    get imageElement()
+    {
+        return this._imageElement;
+    },
+
+    contentAvailable: function(content, base64Encoded)
+    {
+        this.element.removeChildren();
+
+        this._imageElement = document.createElement("img");
+        this._imageElement.src = this.resource.contentURL;
+
+        this.element.appendChild(this._imageElement);
+    }
+};
+
+WebInspector.ImageResourceContentView.prototype.__proto__ = WebInspector.ResourceContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ImageUtilities.js b/Source/WebInspectorUI/UserInterface/ImageUtilities.js
new file mode 100644
index 000000000..c85fe32f6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ImageUtilities.js
@@ -0,0 +1,671 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// Bump this version when making changes that affect the storage format.
+const _imageStorageFormatVersion = 1;
+
+try {
+    var _generatedImageCacheDatabase = openDatabase("com.apple.WebInspector", 1, "Web Inspector Storage Database", 5 * 1024 * 1024);
+} catch (e) {
+    // If we can't open the database it isn't the end of the world, we just will always generate
+    // the images and not cache them for better load times.
+    console.warn("Can't open database due to: " + e + ". Images will be generated instead of loaded from cache.");
+}
+
+var _initialPrefetchComplete = false;
+var _fetchedCachedImages = {};
+
+var _generatedImageUpdateFunctions = [];
+
+_prefetchCachedImagesAndUpdate();
+
+// Updates each image when the device pixel ratio changes to redraw at the new resolution.
+window.matchMedia("(-webkit-device-pixel-ratio: 1)").addListener(_devicePixelRatioChanged);
+
+// Delete old cached images from localStorage to free up space.
+// FIXME: Remove this once it has been in the builds for a while.
+try {
+    const processedFlagKey = "com.apple.WebInspector.deleted-generated-images";
+
+    if (!window.localStorage[processedFlagKey]) {
+        for (var key in window.localStorage) {
+            if (/^com\.apple\.WebInspector\.generated-(?:colored|embossed)-image-/.test(key))
+                delete window.localStorage[key];
+        }
+
+        window.localStorage[processedFlagKey] = true;
+    }
+} catch (e) {
+    // Ignore.
+}
+
+function _devicePixelRatioChanged()
+{
+    _prefetchCachedImagesAndUpdate();
+}
+
+function _registerGeneratedImageUpdateFunction(update)
+{
+    console.assert(typeof update === "function");
+
+    _generatedImageUpdateFunctions.push(update);
+
+    if (_initialPrefetchComplete)
+        update();
+}
+
+function _logSQLError(tx, error)
+{
+    console.error(error.code, error.message);
+}
+
+function _logSQLTransactionError(error)
+{
+    console.error(error.code, error.message);
+}
+
+function _prefetchCachedImagesAndUpdate()
+{
+    _fetchedCachedImages = {};
+
+    function complete()
+    {
+        _initialPrefetchComplete = true;
+
+        for (var i = 0; i < _generatedImageUpdateFunctions.length; ++i)
+            _generatedImageUpdateFunctions[i]();
+    }
+
+    if (!_generatedImageCacheDatabase) {
+        complete();
+        return;
+    }
+
+    _generatedImageCacheDatabase.transaction(function(tx) {
+        tx.executeSql("SELECT key, imageVersion, data FROM CachedImages WHERE pixelRatio = ? AND formatVersion = ?", [window.devicePixelRatio, _imageStorageFormatVersion], function(tx, result) {
+            for (var i = 0; i < result.rows.length; ++i) {
+                var row = result.rows.item(i);
+                _fetchedCachedImages[row.key] = {data: row.data, imageVersion: row.imageVersion};
+            }
+
+            complete();
+        }, function(tx, error) {
+            // The select failed. That could be because the schema changed or this is the first time.
+            // Drop the table and recreate it fresh.
+
+            tx.executeSql("DROP TABLE IF EXISTS CachedImages");
+            tx.executeSql("CREATE TABLE CachedImages (key TEXT, pixelRatio INTEGER, formatVersion NUMERIC, imageVersion NUMERIC, data BLOB, UNIQUE(key, pixelRatio))", [], null, _logSQLError);
+
+            complete();
+        });
+    }, _logSQLTransactionError);
+}
+
+function saveImageToStorage(storageKey, context, width, height, imageVersion)
+{
+    console.assert(storageKey);
+    console.assert(context);
+    console.assert(typeof width === "number");
+    console.assert(typeof height === "number");
+    console.assert(typeof imageVersion === "number");
+
+    if (!_generatedImageCacheDatabase)
+        return;
+
+    var imageData = context.getImageData(0, 0, width, height);
+    var imageDataPixels = new Uint32Array(imageData.data.buffer);
+
+    var imageDataString = "";
+    for (var i = 0; i < imageDataPixels.length; ++i)
+        imageDataString += (i ? ":" : "") + (imageDataPixels[i] ? imageDataPixels[i].toString(36) : "");
+
+    _generatedImageCacheDatabase.transaction(function(tx) {
+        tx.executeSql("INSERT OR REPLACE INTO CachedImages (key, pixelRatio, imageVersion, formatVersion, data) VALUES (?, ?, ?, ?, ?)", [storageKey, window.devicePixelRatio, imageVersion, _imageStorageFormatVersion, imageDataString], null, _logSQLError);
+    }, _logSQLTransactionError);
+}
+
+function restoreImageFromStorage(storageKey, context, width, height, imageVersion, generateCallback)
+{
+    console.assert(storageKey);
+    console.assert(context);
+    console.assert(typeof width === "number");
+    console.assert(typeof height === "number");
+    console.assert(typeof imageVersion === "number");
+    console.assert(typeof generateCallback === "function");
+
+    if (!_generatedImageCacheDatabase) {
+        generateCallback();
+        return;
+    }
+
+    var imageInfo = _fetchedCachedImages[storageKey];
+
+    if (imageInfo) {
+        // We only want to keep the data around for the first use. These images
+        // are typically only used in one place. This keeps performance good
+        // during page load and frees memory that typically won't be reused.
+        delete _fetchedCachedImages[storageKey];
+    }
+
+    if (imageInfo && (!imageInfo.data || imageInfo.imageVersion !== imageVersion)) {
+        generateCallback();
+        return;
+    }
+
+    if (imageInfo) {
+        // Restore the image from the memory cache.
+        restoreImageData(imageInfo.data);
+    } else {
+        // Try fetching the image data from the database.
+        _generatedImageCacheDatabase.readTransaction(function(tx) {
+            tx.executeSql("SELECT data FROM CachedImages WHERE key = ? AND pixelRatio = ? AND imageVersion = ? AND formatVersion = ?", [storageKey, window.devicePixelRatio, imageVersion, _imageStorageFormatVersion], function(tx, result) {
+                if (!result.rows.length) {
+                    generateCallback();
+                    return;
+                }
+
+                console.assert(result.rows.length === 1);
+
+                restoreImageData(result.rows.item(0).data);
+            }, function(tx, error) {
+                _logSQLError(tx, error);
+
+                generateCallback();
+            });
+        }, _logSQLTransactionError);
+    }
+
+    function restoreImageData(imageDataString)
+    {
+        var imageData = context.createImageData(width, height);
+        var imageDataPixels = new Uint32Array(imageData.data.buffer);
+
+        var imageDataArray = imageDataString.split(":");
+        if (imageDataArray.length !== imageDataPixels.length) {
+            generateCallback();
+            return;
+        }
+
+        for (var i = 0; i < imageDataArray.length; ++i) {
+            var pixelString = imageDataArray[i];
+            imageDataPixels[i] = pixelString ? parseInt(pixelString, 36) : 0;
+        }
+
+        context.putImageData(imageData, 0, 0);
+    }
+}
+
+function generateColoredImage(inputImage, red, green, blue, alpha, width, height)
+{
+    console.assert(inputImage);
+
+    if (alpha === undefined)
+        alpha = 1;
+
+    if (width === undefined)
+        width = inputImage.width;
+
+    if (height === undefined)
+        height = inputImage.height;
+
+    if (inputImage instanceof HTMLCanvasElement) {
+        // The input is already a canvas, so we can use its context directly.
+        var inputContext = inputImage.getContext("2d");
+    } else {
+        console.assert(inputImage instanceof HTMLImageElement || inputImage instanceof HTMLVideoElement);
+
+        // The input is an image/video element, so we need to draw it into
+        // a canvas to get the pixel data.
+        var inputCanvas = document.createElement("canvas");
+        inputCanvas.width = width;
+        inputCanvas.height = height;
+
+        var inputContext = inputCanvas.getContext("2d");
+        inputContext.drawImage(inputImage, 0, 0, width, height);
+    }
+
+    var imageData = inputContext.getImageData(0, 0, width, height);
+    var imageDataPixels = new Uint32Array(imageData.data.buffer);
+
+    var isLittleEndian = Uint32Array.isLittleEndian();
+
+    // Loop over the image data and set the color channels while preserving the alpha.
+    for (var i = 0; i < imageDataPixels.length; ++i) {
+        if (isLittleEndian) {
+            var existingAlpha = 0xff & (imageDataPixels[i] >> 24);
+            imageDataPixels[i] = red | green << 8 | blue << 16 | (existingAlpha * alpha) << 24;
+        } else {
+            var existingAlpha = 0xff & imageDataPixels[i];
+            imageDataPixels[i] = red << 24 | green << 16 | blue << 8 | existingAlpha * alpha;
+        }
+    }
+
+    // Make a canvas that will be returned as the result.
+    var resultCanvas = document.createElement("canvas");
+    resultCanvas.width = width;
+    resultCanvas.height = height;
+
+    var resultContext = resultCanvas.getContext("2d");
+
+    resultContext.putImageData(imageData, 0, 0);
+
+    return resultCanvas;
+}
+
+function generateColoredImagesForCSS(imagePath, specifications, width, height, canvasIdentifierPrefix)
+{
+    console.assert(imagePath);
+    console.assert(specifications);
+    console.assert(typeof width === "number");
+    console.assert(typeof height === "number");
+
+    var scaleFactor = window.devicePixelRatio;
+    var scaledWidth = width * scaleFactor;
+    var scaledHeight = height * scaleFactor;
+
+    canvasIdentifierPrefix = canvasIdentifierPrefix || "";
+
+    const storageKeyPrefix = "generated-colored-image-";
+
+    var imageElement = null;
+    var pendingImageLoadCallbacks = [];
+
+    _registerGeneratedImageUpdateFunction(update);
+
+    function imageLoaded()
+    {
+        console.assert(imageElement);
+        console.assert(imageElement.complete);
+        for (var i = 0; i < pendingImageLoadCallbacks.length; ++i)
+            pendingImageLoadCallbacks[i]();
+        pendingImageLoadCallbacks = null;
+    }
+
+    function ensureImageIsLoaded(callback)
+    {
+        if (imageElement && imageElement.complete) {
+            callback();
+            return;
+        }
+
+        console.assert(pendingImageLoadCallbacks);
+        pendingImageLoadCallbacks.push(callback);
+
+        if (imageElement)
+            return;
+
+        imageElement = document.createElement("img");
+        imageElement.addEventListener("load", imageLoaded);
+        imageElement.width = width;
+        imageElement.height = height;
+        imageElement.src = imagePath;
+    }
+
+    function restoreImages()
+    {
+        for (var canvasIdentifier in specifications) {
+            // Don't restore active images yet.
+            if (canvasIdentifier.indexOf("active") !== -1)
+                continue;
+
+            var specification = specifications[canvasIdentifier];
+            restoreImage(canvasIdentifier, specification);
+        }
+
+        function restoreActiveImages()
+        {
+            for (var canvasIdentifier in specifications) {
+                // Only restore active images here.
+                if (canvasIdentifier.indexOf("active") === -1)
+                    continue;
+
+                var specification = specifications[canvasIdentifier];
+                restoreImage(canvasIdentifier, specification);
+            }
+        }
+
+        // Delay restoring the active states until later to improve the initial page load time.
+        setTimeout(restoreActiveImages, 500);
+    }
+
+    function restoreImage(canvasIdentifier, specification)
+    {
+        const storageKey = storageKeyPrefix + canvasIdentifierPrefix + canvasIdentifier;
+        const context = document.getCSSCanvasContext("2d", canvasIdentifierPrefix + canvasIdentifier, scaledWidth, scaledHeight);
+        restoreImageFromStorage(storageKey, context, scaledWidth, scaledHeight, specification.imageVersion || 0, function() {
+            ensureImageIsLoaded(generateImage.bind(null, canvasIdentifier, specification));
+        });
+    }
+
+    function update()
+    {
+        restoreImages();
+    }
+
+    function generateImage(canvasIdentifier, specification)
+    {
+        console.assert(specification.fillColor instanceof Array);
+        console.assert(specification.fillColor.length === 3 || specification.fillColor.length === 4);
+
+        const context = document.getCSSCanvasContext("2d", canvasIdentifierPrefix + canvasIdentifier, scaledWidth, scaledHeight);
+        context.save();
+        context.scale(scaleFactor, scaleFactor);
+
+        if (specification.shadowColor) {
+            context.shadowOffsetX = specification.shadowOffsetX || 0;
+            context.shadowOffsetY = specification.shadowOffsetY || 0;
+            context.shadowBlur = specification.shadowBlur || 0;
+
+            if (specification.shadowColor instanceof Array) {
+                if (specification.shadowColor.length === 3)
+                    context.shadowColor = "rgb(" + specification.shadowColor.join(", ") + ")";
+                else if (specification.shadowColor.length === 4)
+                    context.shadowColor = "rgba(" + specification.shadowColor.join(", ") + ")";
+            } else
+                context.shadowColor = specification.shadowColor;
+        }
+
+        var coloredImage = generateColoredImage(imageElement, specification.fillColor[0], specification.fillColor[1], specification.fillColor[2], specification.fillColor[3], scaledWidth, scaledHeight);
+        context.drawImage(coloredImage, 0, 0, width, height);
+
+        const storageKey = storageKeyPrefix + canvasIdentifierPrefix + canvasIdentifier;
+        saveImageToStorage(storageKey, context, scaledWidth, scaledHeight, specification.imageVersion || 0);
+        context.restore();
+    }
+}
+
+function generateEmbossedImages(src, width, height, states, canvasIdentifierCallback, ignoreCache)
+{
+    console.assert(src);
+    console.assert(typeof width === "number");
+    console.assert(typeof height === "number");
+    console.assert(states);
+    console.assert(states.Normal);
+    console.assert(states.Active);
+    console.assert(typeof canvasIdentifierCallback === "function");
+
+    var scaleFactor = window.devicePixelRatio;
+    var scaledWidth = width * scaleFactor;
+    var scaledHeight = height * scaleFactor;
+
+    // Bump this version when making changes that affect the result image.
+    const imageVersion = 2;
+
+    const storageKeyPrefix = "generated-embossed-image-";
+
+    var image = null;
+    var pendingImageLoadCallbacks = [];
+
+    _registerGeneratedImageUpdateFunction(update);
+
+    function imageLoaded()
+    {
+        console.assert(image);
+        console.assert(image.complete);
+        for (var i = 0; i < pendingImageLoadCallbacks.length; ++i)
+            pendingImageLoadCallbacks[i]();
+        pendingImageLoadCallbacks = null;
+    }
+
+    function ensureImageIsLoaded(callback)
+    {
+        if (image && image.complete) {
+            callback();
+            return;
+        }
+
+        console.assert(pendingImageLoadCallbacks);
+        pendingImageLoadCallbacks.push(callback);
+
+        if (image)
+            return;
+
+        image = document.createElement("img");
+        image.addEventListener("load", imageLoaded);
+        image.width = width;
+        image.height = height;
+        image.src = src;
+    }
+
+    function restoreImages()
+    {
+        restoreImage(states.Normal);
+        if (states.Focus)
+            restoreImage(states.Focus);
+
+        function restoreActiveImages()
+        {
+            restoreImage(states.Active);
+            if (states.ActiveFocus)
+                restoreImage(states.ActiveFocus);
+        }
+
+        // Delay restoring the active states until later to improve the initial page load time.
+        setTimeout(restoreActiveImages, 500);
+    }
+
+    function restoreImage(state)
+    {
+        const storageKey = storageKeyPrefix + canvasIdentifierCallback(state);
+        const context = document.getCSSCanvasContext("2d", canvasIdentifierCallback(state), scaledWidth, scaledHeight);
+        restoreImageFromStorage(storageKey, context, scaledWidth, scaledHeight, imageVersion, function() {
+            ensureImageIsLoaded(generateImage.bind(null, state));
+        });
+    }
+
+    function update()
+    {
+        if (ignoreCache)
+            generateImages();
+        else
+            restoreImages();
+    }
+
+    function generateImages()
+    {
+        ensureImageIsLoaded(generateImage.bind(null, states.Normal));
+
+        if (states.Focus)
+            ensureImageIsLoaded(generateImage.bind(null, states.Focus));
+
+        function generateActiveImages()
+        {
+            ensureImageIsLoaded(generateImage.bind(null, states.Active));
+
+            if (states.ActiveFocus)
+                ensureImageIsLoaded(generateImage.bind(null, states.ActiveFocus));
+        }
+
+        // Delay generating the active states until later to improve the initial page load time.
+        setTimeout(generateActiveImages, 500);
+    }
+
+    function generateImage(state)
+    {
+        const depth = 1 * scaleFactor;
+        const shadowDepth = depth;
+        const shadowBlur = depth - 1;
+        const glowBlur = 2;
+
+        const context = document.getCSSCanvasContext("2d", canvasIdentifierCallback(state), scaledWidth, scaledHeight);
+        context.save();
+        context.scale(scaleFactor, scaleFactor);
+
+        context.clearRect(0, 0, width, height);
+
+        if (depth > 0) {
+            // Use scratch canvas so we can apply the draw the white drop shadow
+            // to the whole glyph at the end.
+
+            var scratchCanvas = document.createElement("canvas");
+            scratchCanvas.width = scaledWidth;
+            scratchCanvas.height = scaledHeight;
+
+            var scratchContext = scratchCanvas.getContext("2d");
+            scratchContext.scale(scaleFactor, scaleFactor);
+        } else
+            var scratchContext = context;
+
+        var gradient = scratchContext.createLinearGradient(0, 0, 0, height);
+        if (state === states.Active) {
+            gradient.addColorStop(0, "rgb(60, 60, 60)");
+            gradient.addColorStop(1, "rgb(100, 100, 100)");
+        } else if (state === states.Focus) {
+            gradient.addColorStop(0, "rgb(50, 135, 200)");
+            gradient.addColorStop(1, "rgb(60, 155, 225)");
+        } else if (state === states.ActiveFocus) {
+            gradient.addColorStop(0, "rgb(30, 115, 185)");
+            gradient.addColorStop(1, "rgb(40, 135, 200)");
+        } else {
+            gradient.addColorStop(0, "rgb(90, 90, 90)");
+            gradient.addColorStop(1, "rgb(145, 145, 145)");
+        }
+
+        scratchContext.fillStyle = gradient;
+        scratchContext.fillRect(0, 0, width, height);
+
+        if (depth > 0) {
+            // Invert the image to use as a reverse image mask for the inner shadows.
+            // Pass in the color to use for the opaque areas to prevent "black halos"
+            // later when applying the final image mask.
+
+            if (state === states.Active)
+                var invertedImage = _invertMaskImage(image, 60, 60, 60);
+            else if (state === states.Focus)
+                var invertedImage = _invertMaskImage(image, 45, 145, 210);
+            else if (state === states.ActiveFocus)
+                var invertedImage = _invertMaskImage(image, 35, 125, 195);
+            else
+                var invertedImage = _invertMaskImage(image, 90, 90, 90);
+
+            if (state === states.Focus) {
+                // Double draw the blurry inner shadow to get the right effect.
+                _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgb(10, 95, 150)", invertedImage);
+                _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgb(10, 95, 150)", invertedImage);
+
+                // Draw the inner shadow.
+                _drawImageShadow(scratchContext, 0, shadowDepth, shadowBlur, "rgb(0, 80, 170)", invertedImage);
+            } else if (state === states.ActiveFocus) {
+                // Double draw the blurry inner shadow to get the right effect.
+                _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgb(0, 80, 100)", invertedImage);
+                _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgb(0, 80, 100)", invertedImage);
+
+                // Draw the inner shadow.
+                _drawImageShadow(scratchContext, 0, shadowDepth, shadowBlur, "rgb(0, 65, 150)", invertedImage);
+            } else {
+                // Double draw the blurry inner shadow to get the right effect.
+                _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgba(0, 0, 0, 1)", invertedImage);
+                _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgba(0, 0, 0, 1)", invertedImage);
+
+                // Draw the inner shadow.
+                _drawImageShadow(scratchContext, 0, shadowDepth, shadowBlur, "rgba(0, 0, 0, 0.6)", invertedImage);
+            }
+        }
+
+        // Apply the mask to keep just the inner shape of the glyph.
+        _applyImageMask(scratchContext, image);
+
+        // Draw the white drop shadow.
+        if (depth > 0)
+            _drawImageShadow(context, 0, shadowDepth, shadowBlur, "rgba(255, 255, 255, 0.6)", scratchCanvas);
+
+        // Draw a subtle glow for the focus states.
+        if (state === states.Focus || state === states.ActiveFocus)
+            _drawImageShadow(context, 0, 0, glowBlur, "rgba(20, 100, 220, 0.4)", scratchCanvas);
+
+        if (!ignoreCache) {
+            const storageKey = storageKeyPrefix + canvasIdentifierCallback(state);
+            saveImageToStorage(storageKey, context, scaledWidth, scaledHeight, imageVersion);
+        }
+
+        context.restore();
+    }
+
+    function _drawImageShadow(context, xOffset, yOffset, blur, color, image) {
+        context.save();
+
+        context.shadowOffsetX = xOffset || 0;
+        context.shadowOffsetY = yOffset || 0;
+        context.shadowBlur = blur || 0;
+        context.shadowColor = color || "black";
+
+        context.drawImage(image, 0, 0, width, height);
+
+        context.restore();
+    }
+
+    function _invertMaskImage(image, red, green, blue) {
+        var bufferCanvas = document.createElement("canvas");
+        bufferCanvas.width = scaledWidth;
+        bufferCanvas.height = scaledHeight;
+
+        var buffer = bufferCanvas.getContext("2d");
+        buffer.scale(scaleFactor, scaleFactor);
+        buffer.drawImage(image, 0, 0, width, height);
+
+        var imageData = buffer.getImageData(0, 0, scaledWidth, scaledHeight);
+        var imageDataPixels = new Uint32Array(imageData.data.buffer);
+
+        red = red || 0;
+        green = green || 0;
+        blue = blue || 0;
+
+        var isLittleEndian = Uint32Array.isLittleEndian();
+
+        for (var i = 0; i < imageDataPixels.length; ++i) {
+            if (isLittleEndian) {
+                var existingAlpha = 0xff & (imageDataPixels[i] >> 24);
+                imageDataPixels[i] = red | green << 8 | blue << 16 | (255 - existingAlpha) << 24;
+            } else {
+                var existingAlpha = 0xff & imageDataPixels[i];
+                imageDataPixels[i] = red << 24 | green << 16 | blue << 8 | 255 - existingAlpha;
+            }
+        }
+
+        buffer.putImageData(imageData, 0, 0);
+
+        return bufferCanvas;
+    }
+
+    function _applyImageMask(context, image) {
+        var maskCanvas = document.createElement("canvas");
+        maskCanvas.width = scaledWidth;
+        maskCanvas.height = scaledHeight;
+
+        var mask = maskCanvas.getContext("2d");
+        mask.scale(scaleFactor, scaleFactor);
+        mask.drawImage(image, 0, 0, width, height);
+
+        var imageData = context.getImageData(0, 0, scaledWidth, scaledHeight);
+        var imageDataPixels = imageData.data;
+
+        var maskImageDataPixels = mask.getImageData(0, 0, scaledWidth, scaledHeight).data;
+
+        for (var i = 3; i < imageDataPixels.length; i += 4)
+            imageDataPixels[i] = maskImageDataPixels[i] * (imageDataPixels[i] / 255);
+
+        context.putImageData(imageData, 0, 0);
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Images/ApplicationCache.png b/Source/WebInspectorUI/UserInterface/Images/ApplicationCache.png
new file mode 100644
index 000000000..439bdbc92
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/ApplicationCache.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/ApplicationCache@2x.png b/Source/WebInspectorUI/UserInterface/Images/ApplicationCache@2x.png
new file mode 100644
index 000000000..f1e2f9f2a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/ApplicationCache@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/ApplicationCacheManifest.png b/Source/WebInspectorUI/UserInterface/Images/ApplicationCacheManifest.png
new file mode 100644
index 000000000..38e431931
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/ApplicationCacheManifest.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/ApplicationCacheManifest@2x.png b/Source/WebInspectorUI/UserInterface/Images/ApplicationCacheManifest@2x.png
new file mode 100644
index 000000000..b152015bf
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/ApplicationCacheManifest@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/BackArrow.pdf b/Source/WebInspectorUI/UserInterface/Images/BackArrow.pdf
new file mode 100644
index 000000000..e1315f1ee
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/BackArrow.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/BottomUpTree.pdf b/Source/WebInspectorUI/UserInterface/Images/BottomUpTree.pdf
new file mode 100644
index 000000000..ad9d71722
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/BottomUpTree.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Breakpoint.png b/Source/WebInspectorUI/UserInterface/Images/Breakpoint.png
new file mode 100644
index 000000000..df12dc2f7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Breakpoint.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Breakpoint@2x.png b/Source/WebInspectorUI/UserInterface/Images/Breakpoint@2x.png
new file mode 100644
index 000000000..7391a2aa8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Breakpoint@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/BreakpointButton.pdf b/Source/WebInspectorUI/UserInterface/Images/BreakpointButton.pdf
new file mode 100644
index 000000000..416cf727d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/BreakpointButton.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive.png b/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive.png
new file mode 100644
index 000000000..7d45dd4cf
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive@2x.png b/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive@2x.png
new file mode 100644
index 000000000..d0839c491
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/BreakpointInactiveButton.pdf b/Source/WebInspectorUI/UserInterface/Images/BreakpointInactiveButton.pdf
new file mode 100644
index 000000000..bcd1caafb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/BreakpointInactiveButton.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Breakpoints.pdf b/Source/WebInspectorUI/UserInterface/Images/Breakpoints.pdf
new file mode 100644
index 000000000..4e1cb9ba7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Breakpoints.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/ClippingCSS.png b/Source/WebInspectorUI/UserInterface/Images/ClippingCSS.png
new file mode 100644
index 000000000..c418cfcee
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/ClippingCSS.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/ClippingCSS@2x.png b/Source/WebInspectorUI/UserInterface/Images/ClippingCSS@2x.png
new file mode 100644
index 000000000..a65cdaeab
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/ClippingCSS@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/ClippingGeneric.png b/Source/WebInspectorUI/UserInterface/Images/ClippingGeneric.png
new file mode 100644
index 000000000..1ad860179
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/ClippingGeneric.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/ClippingGeneric@2x.png b/Source/WebInspectorUI/UserInterface/Images/ClippingGeneric@2x.png
new file mode 100644
index 000000000..1a77d725e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/ClippingGeneric@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/ClippingJS.png b/Source/WebInspectorUI/UserInterface/Images/ClippingJS.png
new file mode 100644
index 000000000..0a2b260e5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/ClippingJS.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/ClippingJS@2x.png b/Source/WebInspectorUI/UserInterface/Images/ClippingJS@2x.png
new file mode 100644
index 000000000..0ef3e08a7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/ClippingJS@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Close.pdf b/Source/WebInspectorUI/UserInterface/Images/Close.pdf
new file mode 100644
index 000000000..a54f3838d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Close.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Colors.png b/Source/WebInspectorUI/UserInterface/Images/Colors.png
new file mode 100644
index 000000000..2fc3736da
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Colors.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Colors@2x.png b/Source/WebInspectorUI/UserInterface/Images/Colors@2x.png
new file mode 100644
index 000000000..7b33f43b1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Colors@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Cookie.png b/Source/WebInspectorUI/UserInterface/Images/Cookie.png
new file mode 100644
index 000000000..20cd0d244
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Cookie.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Cookie@2x.png b/Source/WebInspectorUI/UserInterface/Images/Cookie@2x.png
new file mode 100644
index 000000000..cc4255f45
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Cookie@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Crosshair.pdf b/Source/WebInspectorUI/UserInterface/Images/Crosshair.pdf
new file mode 100644
index 000000000..34b6e2007
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Crosshair.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMCharacterData.pdf b/Source/WebInspectorUI/UserInterface/Images/DOMCharacterData.pdf
new file mode 100644
index 000000000..1e6749239
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DOMCharacterData.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMComment.pdf b/Source/WebInspectorUI/UserInterface/Images/DOMComment.pdf
new file mode 100644
index 000000000..169d009c4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DOMComment.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMDocument.pdf b/Source/WebInspectorUI/UserInterface/Images/DOMDocument.pdf
new file mode 100644
index 000000000..ceb0acbcb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DOMDocument.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMDocumentType.pdf b/Source/WebInspectorUI/UserInterface/Images/DOMDocumentType.pdf
new file mode 100644
index 000000000..bd914a3f7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DOMDocumentType.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMElement.pdf b/Source/WebInspectorUI/UserInterface/Images/DOMElement.pdf
new file mode 100644
index 000000000..ff9a0a423
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DOMElement.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMNode.pdf b/Source/WebInspectorUI/UserInterface/Images/DOMNode.pdf
new file mode 100644
index 000000000..9390a4f64
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DOMNode.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMTextNode.pdf b/Source/WebInspectorUI/UserInterface/Images/DOMTextNode.pdf
new file mode 100644
index 000000000..16619d2af
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DOMTextNode.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMTree.pdf b/Source/WebInspectorUI/UserInterface/Images/DOMTree.pdf
new file mode 100644
index 000000000..e435dcf5e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DOMTree.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Database.png b/Source/WebInspectorUI/UserInterface/Images/Database.png
new file mode 100644
index 000000000..1d58e3ca9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Database.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Database@2x.png b/Source/WebInspectorUI/UserInterface/Images/Database@2x.png
new file mode 100644
index 000000000..3f86cf38e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Database@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/DatabaseTable.png b/Source/WebInspectorUI/UserInterface/Images/DatabaseTable.png
new file mode 100644
index 000000000..4a5a60863
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DatabaseTable.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/DatabaseTable@2x.png b/Source/WebInspectorUI/UserInterface/Images/DatabaseTable@2x.png
new file mode 100644
index 000000000..df39b6814
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DatabaseTable@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleSmallClosed.pdf b/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleSmallClosed.pdf
new file mode 100644
index 000000000..6439a1ff5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleSmallClosed.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleSmallOpen.pdf b/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleSmallOpen.pdf
new file mode 100644
index 000000000..781220d48
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleSmallOpen.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleTinyClosed.pdf b/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleTinyClosed.pdf
new file mode 100644
index 000000000..d3c4f9909
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleTinyClosed.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleTinyOpen.pdf b/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleTinyOpen.pdf
new file mode 100644
index 000000000..2d4332a0b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleTinyOpen.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/DockBottom.pdf b/Source/WebInspectorUI/UserInterface/Images/DockBottom.pdf
new file mode 100644
index 000000000..753c23a5b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DockBottom.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/DockRight.pdf b/Source/WebInspectorUI/UserInterface/Images/DockRight.pdf
new file mode 100644
index 000000000..e72a3fffb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DockRight.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentCSS.png b/Source/WebInspectorUI/UserInterface/Images/DocumentCSS.png
new file mode 100644
index 000000000..cfe06bd79
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DocumentCSS.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentCSS@2x.png b/Source/WebInspectorUI/UserInterface/Images/DocumentCSS@2x.png
new file mode 100644
index 000000000..70e176f31
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DocumentCSS@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentFont.png b/Source/WebInspectorUI/UserInterface/Images/DocumentFont.png
new file mode 100644
index 000000000..086d86eb0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DocumentFont.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentFont@2x.png b/Source/WebInspectorUI/UserInterface/Images/DocumentFont@2x.png
new file mode 100644
index 000000000..781d9afa5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DocumentFont@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentGeneric.png b/Source/WebInspectorUI/UserInterface/Images/DocumentGeneric.png
new file mode 100644
index 000000000..6170c57b1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DocumentGeneric.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentGeneric@2x.png b/Source/WebInspectorUI/UserInterface/Images/DocumentGeneric@2x.png
new file mode 100644
index 000000000..82d4754ab
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DocumentGeneric@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentImage.png b/Source/WebInspectorUI/UserInterface/Images/DocumentImage.png
new file mode 100644
index 000000000..a6808d602
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DocumentImage.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentImage@2x.png b/Source/WebInspectorUI/UserInterface/Images/DocumentImage@2x.png
new file mode 100644
index 000000000..01817e6db
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DocumentImage@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentJS.png b/Source/WebInspectorUI/UserInterface/Images/DocumentJS.png
new file mode 100644
index 000000000..d1d2e1033
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DocumentJS.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentJS@2x.png b/Source/WebInspectorUI/UserInterface/Images/DocumentJS@2x.png
new file mode 100644
index 000000000..903ca9214
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DocumentJS@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentMarkup.png b/Source/WebInspectorUI/UserInterface/Images/DocumentMarkup.png
new file mode 100644
index 000000000..b4ad0b687
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DocumentMarkup.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentMarkup@2x.png b/Source/WebInspectorUI/UserInterface/Images/DocumentMarkup@2x.png
new file mode 100644
index 000000000..570ffd13d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/DocumentMarkup@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Error.pdf b/Source/WebInspectorUI/UserInterface/Images/Error.pdf
new file mode 100644
index 000000000..5fed0efee
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Error.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/ErrorSmall.pdf b/Source/WebInspectorUI/UserInterface/Images/ErrorSmall.pdf
new file mode 100644
index 000000000..8bf6444bf
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/ErrorSmall.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Errors.svg b/Source/WebInspectorUI/UserInterface/Images/Errors.svg
new file mode 100644
index 000000000..4d3b7f875
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Errors.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path d="M8,9.848c-0.666,0-1.206,0.54-1.206,1.205c0,0.666,0.54,1.205,1.206,1.205s1.204-0.539,1.204-1.205
+    C9.204,10.388,8.666,9.848,8,9.848z M8.875,4.489c0-0.483-0.392-0.875-0.875-0.875S7.125,4.005,7.125,4.489v3.5
+    c0,0.483,0.392,0.875,0.875,0.875s0.875-0.392,0.875-0.875V4.489z M13.984,10.516l-3.516,3.499l-4.962-0.012l-3.5-3.517L2.02,5.524
+    l3.517-3.5l4.962,0.012l3.499,3.517L13.984,10.516z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/ErrorsEnabled.svg b/Source/WebInspectorUI/UserInterface/Images/ErrorsEnabled.svg
new file mode 100644
index 000000000..02400e5ad
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/ErrorsEnabled.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path d="M8,9.848c-0.666,0-1.206,0.54-1.206,1.205c0,0.666,0.54,1.205,1.206,1.205s1.204-0.539,1.204-1.205
+    C9.204,10.388,8.666,9.848,8,9.848z M8.875,4.489c0-0.483-0.392-0.875-0.875-0.875S7.125,4.005,7.125,4.489v3.5
+    c0,0.483,0.392,0.875,0.875,0.875s0.875-0.392,0.875-0.875V4.489z M13.984,10.516l-3.516,3.499l-4.962-0.012l-3.5-3.517L2.02,5.524
+    l3.517-3.5l4.962,0.012l3.499,3.517L13.984,10.516z" fill="#c93739"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/EventListener.pdf b/Source/WebInspectorUI/UserInterface/Images/EventListener.pdf
new file mode 100644
index 000000000..994a93741
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/EventListener.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Exception.pdf b/Source/WebInspectorUI/UserInterface/Images/Exception.pdf
new file mode 100644
index 000000000..c49c18b0c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Exception.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/FilterFieldGlyph.pdf b/Source/WebInspectorUI/UserInterface/Images/FilterFieldGlyph.pdf
new file mode 100644
index 000000000..e2c3638c4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/FilterFieldGlyph.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/FolderGeneric.png b/Source/WebInspectorUI/UserInterface/Images/FolderGeneric.png
new file mode 100644
index 000000000..80d51b3ea
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/FolderGeneric.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/FolderGeneric@2x.png b/Source/WebInspectorUI/UserInterface/Images/FolderGeneric@2x.png
new file mode 100644
index 000000000..0d91e206a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/FolderGeneric@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/ForwardArrow.pdf b/Source/WebInspectorUI/UserInterface/Images/ForwardArrow.pdf
new file mode 100644
index 000000000..dd81bd237
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/ForwardArrow.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Function.pdf b/Source/WebInspectorUI/UserInterface/Images/Function.pdf
new file mode 100644
index 000000000..0ccff4dd4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Function.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/GoToArrow.pdf b/Source/WebInspectorUI/UserInterface/Images/GoToArrow.pdf
new file mode 100644
index 000000000..0e83bacec
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/GoToArrow.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/HierarchicalNavigationItemChevron.pdf b/Source/WebInspectorUI/UserInterface/Images/HierarchicalNavigationItemChevron.pdf
new file mode 100644
index 000000000..39c4a09f0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/HierarchicalNavigationItemChevron.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner1.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner1.pdf
new file mode 100644
index 000000000..2435b1ed3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner1.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner10.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner10.pdf
new file mode 100644
index 000000000..22d530ff9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner10.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner11.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner11.pdf
new file mode 100644
index 000000000..d0e719059
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner11.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner12.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner12.pdf
new file mode 100644
index 000000000..caba7ae0c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner12.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner2.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner2.pdf
new file mode 100644
index 000000000..0dedb98fa
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner2.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner3.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner3.pdf
new file mode 100644
index 000000000..621d2c74f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner3.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner4.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner4.pdf
new file mode 100644
index 000000000..dedd6b2ca
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner4.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner5.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner5.pdf
new file mode 100644
index 000000000..616a79c8b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner5.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner6.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner6.pdf
new file mode 100644
index 000000000..038941f61
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner6.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner7.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner7.pdf
new file mode 100644
index 000000000..546a69244
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner7.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner8.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner8.pdf
new file mode 100644
index 000000000..9bae00117
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner8.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner9.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner9.pdf
new file mode 100644
index 000000000..489dba09f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner9.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/InstructionPointer.png b/Source/WebInspectorUI/UserInterface/Images/InstructionPointer.png
new file mode 100644
index 000000000..2c9e448f9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/InstructionPointer.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/InstructionPointer@2x.png b/Source/WebInspectorUI/UserInterface/Images/InstructionPointer@2x.png
new file mode 100644
index 000000000..bedc35a87
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/InstructionPointer@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Issues.svg b/Source/WebInspectorUI/UserInterface/Images/Issues.svg
new file mode 100644
index 000000000..c1b399e30
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Issues.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path d="M8,10.335c-0.703,0-1.272,0.57-1.272,1.274c0,0.702,0.57,1.271,1.272,1.271c0.702,0,1.272-0.569,1.272-1.271
+    C9.272,10.905,8.702,10.335,8,10.335z M8.909,4.708C8.909,4.206,8.501,3.8,8,3.8S7.091,4.206,7.091,4.708v3.633
+    c0,0.501,0.408,0.909,0.909,0.909s0.909-0.408,0.909-0.909V4.708z M14.142,13.278c-0.349,0.507-1.068,0.68-1.541,0.68
+    c-0.298,0-8.912,0-9.201,0c-0.474,0-1.193-0.173-1.541-0.68c-0.329-0.477-0.148-1.309,0.105-1.76
+    c1.416-2.53,2.793-5.417,4.797-9.186C7.411,1.112,8.686,1.201,9.27,2.315c1.398,2.674,3.351,6.673,4.767,9.203
+    C14.289,11.97,14.47,12.802,14.142,13.278z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/IssuesEnabled.svg b/Source/WebInspectorUI/UserInterface/Images/IssuesEnabled.svg
new file mode 100644
index 000000000..e7d5589ad
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/IssuesEnabled.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path d="M8,10.335c-0.703,0-1.272,0.57-1.272,1.274c0,0.702,0.57,1.271,1.272,1.271c0.702,0,1.272-0.569,1.272-1.271
+    C9.272,10.905,8.702,10.335,8,10.335z M8.909,4.708C8.909,4.206,8.501,3.8,8,3.8S7.091,4.206,7.091,4.708v3.633
+    c0,0.501,0.408,0.909,0.909,0.909s0.909-0.408,0.909-0.909V4.708z M14.142,13.278c-0.349,0.507-1.068,0.68-1.541,0.68
+    c-0.298,0-8.912,0-9.201,0c-0.474,0-1.193-0.173-1.541-0.68c-0.329-0.477-0.148-1.309,0.105-1.76
+    c1.416-2.53,2.793-5.417,4.797-9.186C7.411,1.112,8.686,1.201,9.27,2.315c1.398,2.674,3.351,6.673,4.767,9.203
+    C14.289,11.97,14.47,12.802,14.142,13.278z" fill="#e0a404"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/LayerBorders.pdf b/Source/WebInspectorUI/UserInterface/Images/LayerBorders.pdf
new file mode 100644
index 000000000..395adc429
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/LayerBorders.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/LessColumns.pdf b/Source/WebInspectorUI/UserInterface/Images/LessColumns.pdf
new file mode 100644
index 000000000..895f4f242
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/LessColumns.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/LocalStorage.png b/Source/WebInspectorUI/UserInterface/Images/LocalStorage.png
new file mode 100644
index 000000000..99ea01f4f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/LocalStorage.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/LocalStorage@2x.png b/Source/WebInspectorUI/UserInterface/Images/LocalStorage@2x.png
new file mode 100644
index 000000000..e688a13cd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/LocalStorage@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Locked.pdf b/Source/WebInspectorUI/UserInterface/Images/Locked.pdf
new file mode 100644
index 000000000..15c19572c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Locked.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Log.png b/Source/WebInspectorUI/UserInterface/Images/Log.png
new file mode 100644
index 000000000..646851e4b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Log.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Log@2x.png b/Source/WebInspectorUI/UserInterface/Images/Log@2x.png
new file mode 100644
index 000000000..dcc96f506
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Log@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Logs.svg b/Source/WebInspectorUI/UserInterface/Images/Logs.svg
new file mode 100644
index 000000000..355c82a21
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Logs.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path d="M10.999,2h-6c-1.649,0-3,1.35-3,3v5c0,1.65,1.351,3,3,3v3l3-3h3c1.649,0,3-1.35,3-3V5C13.999,3.35,12.648,2,10.999,2
+     M10.999,10h-6V9h6V10z M10.999,8h-6V7h6V8z M10.999,6h-6V5h6V6z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/Memory.svg b/Source/WebInspectorUI/UserInterface/Images/Memory.svg
new file mode 100644
index 000000000..12eccbaac
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Memory.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path d="M10,4H8.854C8.739,4.355,8.416,4.616,8.022,4.616C7.627,4.616,7.305,4.355,7.189,4H6v8H7.2
+    c0.129-0.33,0.446-0.565,0.823-0.565c0.375,0,0.692,0.235,0.822,0.565H10V4z M13.499,10.991v1.5H12V14H8.845
+    c-0.13-0.33-0.447-0.566-0.822-0.566C7.646,13.434,7.329,13.67,7.2,14H4v-1.509H2.502v-1.5H4v-1H2.502v-1.5H4v-1H2.502v-1.5H4v-1
+    H2.502v-1.5H4V2h3.189c0.116,0.356,0.438,0.617,0.833,0.617c0.394,0,0.717-0.261,0.832-0.617H12v1.491h1.499v1.5H12v1h1.499v1.5H12
+    v1h1.499v1.5H12v1H13.499z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/MoreColumns.pdf b/Source/WebInspectorUI/UserInterface/Images/MoreColumns.pdf
new file mode 100644
index 000000000..6a548a819
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/MoreColumns.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Native.pdf b/Source/WebInspectorUI/UserInterface/Images/Native.pdf
new file mode 100644
index 000000000..9390a4f64
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Native.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemAngleBrackets.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemAngleBrackets.pdf
new file mode 100644
index 000000000..ddea9c845
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NavigationItemAngleBrackets.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemBrushAndRuler.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemBrushAndRuler.pdf
new file mode 100644
index 000000000..1b083c794
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NavigationItemBrushAndRuler.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemBug.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemBug.pdf
new file mode 100644
index 000000000..77af260e9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NavigationItemBug.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemCurleyBraces.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemCurleyBraces.pdf
new file mode 100644
index 000000000..c6f1d66e7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NavigationItemCurleyBraces.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemFile.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemFile.pdf
new file mode 100644
index 000000000..3daad0007
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NavigationItemFile.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemLayers.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemLayers.pdf
new file mode 100644
index 000000000..c5009e61f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NavigationItemLayers.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemLog.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemLog.pdf
new file mode 100644
index 000000000..68f70fa72
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NavigationItemLog.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemMagnifyingGlass.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemMagnifyingGlass.pdf
new file mode 100644
index 000000000..ce2509373
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NavigationItemMagnifyingGlass.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemStopwatch.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemStopwatch.pdf
new file mode 100644
index 000000000..de32738c1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NavigationItemStopwatch.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemStorage.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemStorage.pdf
new file mode 100644
index 000000000..f8a910e33
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NavigationItemStorage.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemTrash.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemTrash.pdf
new file mode 100644
index 000000000..ec7547f66
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NavigationItemTrash.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemVariable.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemVariable.pdf
new file mode 100644
index 000000000..86ebf3f5c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NavigationItemVariable.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Network.png b/Source/WebInspectorUI/UserInterface/Images/Network.png
new file mode 100644
index 000000000..2e36c3d6e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Network.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Network@2x.png b/Source/WebInspectorUI/UserInterface/Images/Network@2x.png
new file mode 100644
index 000000000..3b143163e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Network@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarBlue.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarBlue.png
new file mode 100644
index 000000000..e22c773b8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarBlue.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarBlue@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarBlue@2x.png
new file mode 100644
index 000000000..69c143e72
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarBlue@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarGray.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarGray.png
new file mode 100644
index 000000000..2f4779b7b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarGray.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarGray@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarGray@2x.png
new file mode 100644
index 000000000..1a038e2fc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarGray@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarGreen.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarGreen.png
new file mode 100644
index 000000000..863555bcd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarGreen.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarGreen@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarGreen@2x.png
new file mode 100644
index 000000000..be3a81b3c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarGreen@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutLeft.pdf b/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutLeft.pdf
new file mode 100644
index 000000000..eaf303260
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutLeft.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutRight.pdf b/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutRight.pdf
new file mode 100644
index 000000000..e25ac3509
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutRight.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutWhiteLeft.pdf b/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutWhiteLeft.pdf
new file mode 100644
index 000000000..61fee0d7c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutWhiteLeft.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutWhiteRight.pdf b/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutWhiteRight.pdf
new file mode 100644
index 000000000..478d788fa
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutWhiteRight.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarOrange.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarOrange.png
new file mode 100644
index 000000000..78f1400c8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarOrange.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarOrange@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarOrange@2x.png
new file mode 100644
index 000000000..01da46c0f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarOrange@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarPurple.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarPurple.png
new file mode 100644
index 000000000..6c77277a7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarPurple.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarPurple@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarPurple@2x.png
new file mode 100644
index 000000000..ae193521e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarPurple@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarRed.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarRed.png
new file mode 100644
index 000000000..43869c6fa
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarRed.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarRed@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarRed@2x.png
new file mode 100644
index 000000000..6217a7d8a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarRed@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarWhiteFlat.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarWhiteFlat.png
new file mode 100644
index 000000000..bb5afb90b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarWhiteFlat.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarWhiteFlat@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarWhiteFlat@2x.png
new file mode 100644
index 000000000..e2d89c827
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarWhiteFlat@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarYellow.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarYellow.png
new file mode 100644
index 000000000..13dcd2c07
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarYellow.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarYellow@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarYellow@2x.png
new file mode 100644
index 000000000..2ebbff59a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkBarYellow@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarBlue.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarBlue.png
new file mode 100644
index 000000000..93365f8ed
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarBlue.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarBlue@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarBlue@2x.png
new file mode 100644
index 000000000..7d1335404
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarBlue@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGray.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGray.png
new file mode 100644
index 000000000..67196a60a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGray.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGray@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGray@2x.png
new file mode 100644
index 000000000..ee3119399
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGray@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGreen.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGreen.png
new file mode 100644
index 000000000..be1a09eeb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGreen.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGreen@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGreen@2x.png
new file mode 100644
index 000000000..7ec08fcb7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGreen@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarOrange.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarOrange.png
new file mode 100644
index 000000000..fe0340e52
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarOrange.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarOrange@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarOrange@2x.png
new file mode 100644
index 000000000..795042f8e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarOrange@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarPurple.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarPurple.png
new file mode 100644
index 000000000..cc05f4713
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarPurple.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarPurple@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarPurple@2x.png
new file mode 100644
index 000000000..3e8dbaac0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarPurple@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarRed.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarRed.png
new file mode 100644
index 000000000..e016e77ad
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarRed.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarRed@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarRed@2x.png
new file mode 100644
index 000000000..e1cce2f9a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarRed@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarYellow.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarYellow.png
new file mode 100644
index 000000000..0d214132f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarYellow.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarYellow@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarYellow@2x.png
new file mode 100644
index 000000000..fa683f995
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarYellow@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Pause.pdf b/Source/WebInspectorUI/UserInterface/Images/Pause.pdf
new file mode 100644
index 000000000..ae8c6769d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Pause.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Percent.pdf b/Source/WebInspectorUI/UserInterface/Images/Percent.pdf
new file mode 100644
index 000000000..b3a66bf31
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Percent.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Plus.pdf b/Source/WebInspectorUI/UserInterface/Images/Plus.pdf
new file mode 100644
index 000000000..1d82b14ed
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Plus.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Profile.png b/Source/WebInspectorUI/UserInterface/Images/Profile.png
new file mode 100644
index 000000000..e28b953db
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Profile.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Profile@2x.png b/Source/WebInspectorUI/UserInterface/Images/Profile@2x.png
new file mode 100644
index 000000000..ee5d2f46f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Profile@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/PseudoElement.pdf b/Source/WebInspectorUI/UserInterface/Images/PseudoElement.pdf
new file mode 100644
index 000000000..4604c26f2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/PseudoElement.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Recording.png b/Source/WebInspectorUI/UserInterface/Images/Recording.png
new file mode 100644
index 000000000..27974866c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Recording.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Recording@2x.png b/Source/WebInspectorUI/UserInterface/Images/Recording@2x.png
new file mode 100644
index 000000000..7b8177d51
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Recording@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/RecordingHovered.png b/Source/WebInspectorUI/UserInterface/Images/RecordingHovered.png
new file mode 100644
index 000000000..e20e0d8d6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/RecordingHovered.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/RecordingHovered@2x.png b/Source/WebInspectorUI/UserInterface/Images/RecordingHovered@2x.png
new file mode 100644
index 000000000..7602abb68
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/RecordingHovered@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/RecordingStopped.png b/Source/WebInspectorUI/UserInterface/Images/RecordingStopped.png
new file mode 100644
index 000000000..eb511164c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/RecordingStopped.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/RecordingStopped@2x.png b/Source/WebInspectorUI/UserInterface/Images/RecordingStopped@2x.png
new file mode 100644
index 000000000..6227c30fc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/RecordingStopped@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Reflection.pdf b/Source/WebInspectorUI/UserInterface/Images/Reflection.pdf
new file mode 100644
index 000000000..2078f41ef
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Reflection.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Reload.svg b/Source/WebInspectorUI/UserInterface/Images/Reload.svg
new file mode 100644
index 000000000..e8da11099
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Reload.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
+    <style>
+        * {
+            fill: rgb(112, 126, 139);
+        }
+    </style>
+    <g>
+        <defs>
+            <rect id="SVGID_1_" x="2.5" y="0.3" width="11" height="13.2"/>
+        </defs>
+        <clipPath id="SVGID_2_">
+            <use xlink:href="#SVGID_1_" overflow="visible"/>
+        </clipPath>
+        <path clip-path="url(#SVGID_2_)" d="M8,11.3c-1.823,0-3.3-1.478-3.3-3.3c0-1.822,1.477-3.3,3.3-3.3V2.5C4.962,2.5,2.5,4.962,2.5,8
+        s2.462,5.5,5.5,5.5s5.5-2.462,5.5-5.5h-2.2C11.3,9.822,9.822,11.3,8,11.3"/>
+    </g>
+    <g>
+        <defs>
+            <rect id="SVGID_3_" x="2.5" y="0.3" width="11" height="13.2"/>
+        </defs>
+        <clipPath id="SVGID_4_">
+            <use xlink:href="#SVGID_3_" overflow="visible"/>
+        </clipPath>
+        <polygon clip-path="url(#SVGID_4_)" points="13.5,3.6 8,6.9 8,0.3"/>
+    </g>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/ReloadSelected.svg b/Source/WebInspectorUI/UserInterface/Images/ReloadSelected.svg
new file mode 100644
index 000000000..6b4af3235
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/ReloadSelected.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
+    <style>
+        * {
+            fill: white;
+        }
+    </style>
+    <g>
+        <defs>
+            <rect id="SVGID_1_" x="2.5" y="0.3" width="11" height="13.2"/>
+        </defs>
+        <clipPath id="SVGID_2_">
+            <use xlink:href="#SVGID_1_" overflow="visible"/>
+        </clipPath>
+        <path clip-path="url(#SVGID_2_)" d="M8,11.3c-1.823,0-3.3-1.478-3.3-3.3c0-1.822,1.477-3.3,3.3-3.3V2.5C4.962,2.5,2.5,4.962,2.5,8
+        s2.462,5.5,5.5,5.5s5.5-2.462,5.5-5.5h-2.2C11.3,9.822,9.822,11.3,8,11.3"/>
+    </g>
+    <g>
+        <defs>
+            <rect id="SVGID_3_" x="2.5" y="0.3" width="11" height="13.2"/>
+        </defs>
+        <clipPath id="SVGID_4_">
+            <use xlink:href="#SVGID_3_" overflow="visible"/>
+        </clipPath>
+        <polygon clip-path="url(#SVGID_4_)" points="13.5,3.6 8,6.9 8,0.3"/>
+    </g>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/Request.pdf b/Source/WebInspectorUI/UserInterface/Images/Request.pdf
new file mode 100644
index 000000000..60a7050f7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Request.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Resources.svg b/Source/WebInspectorUI/UserInterface/Images/Resources.svg
new file mode 100644
index 000000000..74480c4b3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Resources.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path d="M9.518,2H3v12h10V5L9.518,2z M11.002,12H5V4h3.517l2.485,2.455V12z M8,7h2L8,5C8,5,7.999,7,8,7"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/Response.pdf b/Source/WebInspectorUI/UserInterface/Images/Response.pdf
new file mode 100644
index 000000000..268f67bfc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Response.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/ResultLine.pdf b/Source/WebInspectorUI/UserInterface/Images/ResultLine.pdf
new file mode 100644
index 000000000..918121474
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/ResultLine.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Resume.pdf b/Source/WebInspectorUI/UserInterface/Images/Resume.pdf
new file mode 100644
index 000000000..080a69574
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Resume.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Script.png b/Source/WebInspectorUI/UserInterface/Images/Script.png
new file mode 100644
index 000000000..f88e66707
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Script.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Script@2x.png b/Source/WebInspectorUI/UserInterface/Images/Script@2x.png
new file mode 100644
index 000000000..3a73ae53f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Script@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/SessionStorage.png b/Source/WebInspectorUI/UserInterface/Images/SessionStorage.png
new file mode 100644
index 000000000..eba13255a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/SessionStorage.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/SessionStorage@2x.png b/Source/WebInspectorUI/UserInterface/Images/SessionStorage@2x.png
new file mode 100644
index 000000000..f9d6b9537
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/SessionStorage@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/ShadowDOM.pdf b/Source/WebInspectorUI/UserInterface/Images/ShadowDOM.pdf
new file mode 100644
index 000000000..5a1ab64bc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/ShadowDOM.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/SortIndicatorDownArrow.pdf b/Source/WebInspectorUI/UserInterface/Images/SortIndicatorDownArrow.pdf
new file mode 100644
index 000000000..e44b34ed4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/SortIndicatorDownArrow.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/SortIndicatorUpArrow.pdf b/Source/WebInspectorUI/UserInterface/Images/SortIndicatorUpArrow.pdf
new file mode 100644
index 000000000..bc4f99976
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/SortIndicatorUpArrow.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/SourceCode.pdf b/Source/WebInspectorUI/UserInterface/Images/SourceCode.pdf
new file mode 100644
index 000000000..7ae7b4240
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/SourceCode.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/SplitToggleDown.pdf b/Source/WebInspectorUI/UserInterface/Images/SplitToggleDown.pdf
new file mode 100644
index 000000000..7eee1a757
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/SplitToggleDown.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/SplitToggleUp.pdf b/Source/WebInspectorUI/UserInterface/Images/SplitToggleUp.pdf
new file mode 100644
index 000000000..549c9677e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/SplitToggleUp.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/StepInto.pdf b/Source/WebInspectorUI/UserInterface/Images/StepInto.pdf
new file mode 100644
index 000000000..a1725418b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/StepInto.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/StepOut.pdf b/Source/WebInspectorUI/UserInterface/Images/StepOut.pdf
new file mode 100644
index 000000000..e09c766c3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/StepOut.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/StepOver.pdf b/Source/WebInspectorUI/UserInterface/Images/StepOver.pdf
new file mode 100644
index 000000000..cf84de581
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/StepOver.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Stopwatch.png b/Source/WebInspectorUI/UserInterface/Images/Stopwatch.png
new file mode 100644
index 000000000..79ee025f6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Stopwatch.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Stopwatch@2x.png b/Source/WebInspectorUI/UserInterface/Images/Stopwatch@2x.png
new file mode 100644
index 000000000..48b015d92
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Stopwatch@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/StyleRuleAuthor.pdf b/Source/WebInspectorUI/UserInterface/Images/StyleRuleAuthor.pdf
new file mode 100644
index 000000000..73ba1f130
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/StyleRuleAuthor.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/StyleRuleInherited.pdf b/Source/WebInspectorUI/UserInterface/Images/StyleRuleInherited.pdf
new file mode 100644
index 000000000..fae2a15e2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/StyleRuleInherited.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/StyleRuleInheritedElement.pdf b/Source/WebInspectorUI/UserInterface/Images/StyleRuleInheritedElement.pdf
new file mode 100644
index 000000000..244408d02
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/StyleRuleInheritedElement.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/StyleRuleInspector.pdf b/Source/WebInspectorUI/UserInterface/Images/StyleRuleInspector.pdf
new file mode 100644
index 000000000..a6f72b8e7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/StyleRuleInspector.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/StyleRuleUser.pdf b/Source/WebInspectorUI/UserInterface/Images/StyleRuleUser.pdf
new file mode 100644
index 000000000..a63702f4d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/StyleRuleUser.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/StyleRuleUserAgent.pdf b/Source/WebInspectorUI/UserInterface/Images/StyleRuleUserAgent.pdf
new file mode 100644
index 000000000..3c30224a0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/StyleRuleUserAgent.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Time.svg b/Source/WebInspectorUI/UserInterface/Images/Time.svg
new file mode 100644
index 000000000..8c7a552ce
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Time.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path d="M8,1.5C4.409,1.5,1.5,4.41,1.5,8s2.909,6.5,6.5,6.5c3.59,0,6.5-2.91,6.5-6.5S11.59,1.5,8,1.5 M8,12.5
+    c-2.486,0-4.5-2.015-4.5-4.5c0-2.485,2.014-4.5,4.5-4.5c2.485,0,4.5,2.015,4.5,4.5C12.499,10.485,10.484,12.5,8,12.5"/>
+    <polygon points="8.999,7.604 8.999,4 7,4 7,8.563 9.484,10.646 10.754,9.074 "/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/TimelineBarBlue.png b/Source/WebInspectorUI/UserInterface/Images/TimelineBarBlue.png
new file mode 100644
index 000000000..b18be8228
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/TimelineBarBlue.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/TimelineBarBlue@2x.png b/Source/WebInspectorUI/UserInterface/Images/TimelineBarBlue@2x.png
new file mode 100644
index 000000000..e7cc414cc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/TimelineBarBlue@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/TimelineBarOrange.png b/Source/WebInspectorUI/UserInterface/Images/TimelineBarOrange.png
new file mode 100644
index 000000000..2eb56884b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/TimelineBarOrange.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/TimelineBarOrange@2x.png b/Source/WebInspectorUI/UserInterface/Images/TimelineBarOrange@2x.png
new file mode 100644
index 000000000..e7ec8f538
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/TimelineBarOrange@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/TimelineBarPurple.png b/Source/WebInspectorUI/UserInterface/Images/TimelineBarPurple.png
new file mode 100644
index 000000000..d78e53b67
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/TimelineBarPurple.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/TimelineBarPurple@2x.png b/Source/WebInspectorUI/UserInterface/Images/TimelineBarPurple@2x.png
new file mode 100644
index 000000000..ffdf58933
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/TimelineBarPurple@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/Undock.pdf b/Source/WebInspectorUI/UserInterface/Images/Undock.pdf
new file mode 100644
index 000000000..67b7a1b75
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Undock.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/UpDownArrows.svg b/Source/WebInspectorUI/UserInterface/Images/UpDownArrows.svg
new file mode 100644
index 000000000..f70c9f6b5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/UpDownArrows.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
+<svg viewBox="0 0 5 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2.55,7.02976032 L4.03977126,9.61011984 L1.06022874,9.61011984 L2.55,7.02976032 Z M2.55,7.02976032" stroke="rgb(0,0,0)" transform="translate(2.55,8.75) rotate(-180) translate(-2.55,-8.75)"></path>
+    <path d="M2.55,1.5 L4.06554446,4.125 L1.03445554,4.125 L2.55,1.5 Z M2.55,1.5" stroke="rgb(0,0,0)"></path>
+</svg>
\ No newline at end of file
diff --git a/Source/WebInspectorUI/UserInterface/Images/UserInputPrompt.pdf b/Source/WebInspectorUI/UserInterface/Images/UserInputPrompt.pdf
new file mode 100644
index 000000000..1b12355a1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/UserInputPrompt.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/UserInputPromptPrevious.pdf b/Source/WebInspectorUI/UserInterface/Images/UserInputPromptPrevious.pdf
new file mode 100644
index 000000000..1e769cd6b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/UserInputPromptPrevious.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/UserInputPromptPreviousSelected.pdf b/Source/WebInspectorUI/UserInterface/Images/UserInputPromptPreviousSelected.pdf
new file mode 100644
index 000000000..370d6dab5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/UserInputPromptPreviousSelected.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/UserInputResult.pdf b/Source/WebInspectorUI/UserInterface/Images/UserInputResult.pdf
new file mode 100644
index 000000000..e31e3fd4d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/UserInputResult.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/UserInputResultSelected.pdf b/Source/WebInspectorUI/UserInterface/Images/UserInputResultSelected.pdf
new file mode 100644
index 000000000..a9ce5069a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/UserInputResultSelected.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Warning.pdf b/Source/WebInspectorUI/UserInterface/Images/Warning.pdf
new file mode 100644
index 000000000..17e370970
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Warning.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/WarningSmall.pdf b/Source/WebInspectorUI/UserInterface/Images/WarningSmall.pdf
new file mode 100644
index 000000000..2f649dc26
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/WarningSmall.pdf
diff --git a/Source/WebInspectorUI/UserInterface/Images/Weight.svg b/Source/WebInspectorUI/UserInterface/Images/Weight.svg
new file mode 100644
index 000000000..775115653
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/Weight.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path d="M14,14 L2,14 L4,5 L5.55000905,5 C5.51721456,4.83843954 5.5,4.67123011 5.5,4.5 C5.5,3.11928806 6.61928806,2 8,2 C9.38071194,2 10.5,3.11928806 10.5,4.5 C10.5,4.67123011 10.4827854,4.83843954 10.4499909,5 L12,5 Z M5.42102596,7.00000003 L4.50620499,12.0000001 L11.5142954,12.0000001 L10.6140088,7.00000003 Z M8,5.5 C8.55228478,5.5 9,5.05228478 9,4.5 C9,3.94771522 8.55228478,3.5 8,3.5 C7.44771522,3.5 7,3.94771522 7,4.5 C7,5.05228478 7.44771522,5.5 8,5.5 Z M8,5.5" fill="#000000"></path>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/IndeterminateProgressSpinner.css b/Source/WebInspectorUI/UserInterface/IndeterminateProgressSpinner.css
new file mode 100644
index 000000000..357f6d099
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/IndeterminateProgressSpinner.css
@@ -0,0 +1,93 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/* These keyframes try to reproduce the 12 discrete steps seen in a standard system progress indicator. */
+@-webkit-keyframes discrete-spinner {
+    0% {
+        background-image: url(Images/IndeterminateProgressSpinner1.pdf);
+    }
+
+    8.333% {
+        background-image: url(Images/IndeterminateProgressSpinner2.pdf);
+    }
+
+    16.666% {
+        background-image: url(Images/IndeterminateProgressSpinner3.pdf);
+    }
+
+    25.000% {
+        background-image: url(Images/IndeterminateProgressSpinner4.pdf);
+    }
+
+    33.333% {
+        background-image: url(Images/IndeterminateProgressSpinner5.pdf);
+    }
+
+    41.666% {
+        background-image: url(Images/IndeterminateProgressSpinner6.pdf);
+    }
+
+    50.000% {
+        background-image: url(Images/IndeterminateProgressSpinner7.pdf);
+    }
+
+    58.333% {
+        background-image: url(Images/IndeterminateProgressSpinner8.pdf);
+    }
+
+    66.666% {
+        background-image: url(Images/IndeterminateProgressSpinner9.pdf);
+    }
+
+    75.000% {
+        background-image: url(Images/IndeterminateProgressSpinner10.pdf);
+    }
+
+    83.333% {
+        background-image: url(Images/IndeterminateProgressSpinner11.pdf);
+    }
+
+    91.666% {
+        background-image: url(Images/IndeterminateProgressSpinner12.pdf);
+    }
+
+    100% {
+        background-image: url(Images/IndeterminateProgressSpinner1.pdf);
+    }
+}
+
+.indeterminate-progress-spinner {
+    background-image: url(Images/IndeterminateProgressSpinner1.pdf);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+
+    width: 16px;
+    height: 16px;
+
+    -webkit-animation-name: discrete-spinner;
+    -webkit-animation-duration: 1s;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-timing-function: step-start;
+}
diff --git a/Source/WebInspectorUI/UserInterface/IndeterminateProgressSpinner.js b/Source/WebInspectorUI/UserInterface/IndeterminateProgressSpinner.js
new file mode 100644
index 000000000..00bcaf887
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/IndeterminateProgressSpinner.js
@@ -0,0 +1,47 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.IndeterminateProgressSpinner = function()
+{
+    WebInspector.Object.call(this);
+
+    this._element = document.createElement("div");
+    this._element.className = WebInspector.IndeterminateProgressSpinner.StyleClassName;
+}
+
+WebInspector.IndeterminateProgressSpinner.StyleClassName = "indeterminate-progress-spinner";
+
+WebInspector.IndeterminateProgressSpinner.prototype = {
+    constructor: WebInspector.IndeterminateProgressSpinner,
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+}
+
+WebInspector.IndeterminateProgressSpinner.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/InspectorBackend.js b/Source/WebInspectorUI/UserInterface/InspectorBackend.js
new file mode 100644
index 000000000..4c0f89d5c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/InspectorBackend.js
@@ -0,0 +1,283 @@
+/*
+ * Copyright (C) 2011 Google Inc. All rights reserved.
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ */
+function InspectorBackendClass()
+{
+    this._lastCallbackId = 1;
+    this._pendingResponsesCount = 0;
+    this._callbacks = {};
+    this._domainDispatchers = {};
+    this._eventArgs = {};
+    this._replyArgs = {};
+
+    this.dumpInspectorTimeStats = false;
+    this.dumpInspectorProtocolMessages = false;
+    this._initialized = false;
+}
+
+InspectorBackendClass.prototype = {
+    _wrap: function(callback, method)
+    {
+        var callbackId = this._lastCallbackId++;
+        if (!callback)
+            callback = function() {};
+
+        this._callbacks[callbackId] = callback;
+        callback.methodName = method;
+        if (this.dumpInspectorTimeStats)
+            callback.sendRequestTime = Date.now();
+        
+        return callbackId;
+    },
+
+    _getAgent: function(domain)
+    {
+        var agentName = domain + "Agent";
+        if (!window[agentName])
+            window[agentName] = {};
+        return window[agentName];
+    },
+
+    registerCommand: function(method, signature, replyArgs)
+    {
+        var domainAndMethod = method.split(".");
+        var agent = this._getAgent(domainAndMethod[0]);
+
+        agent[domainAndMethod[1]] = this._sendMessageToBackend.bind(this, method, signature);
+        agent[domainAndMethod[1]]["invoke"] = this._invoke.bind(this, method, signature);
+        this._replyArgs[method] = replyArgs;
+
+        this._initialized = true;
+    },
+
+    registerEnum: function(type, values)
+    {
+        var domainAndMethod = type.split(".");
+        var agent = this._getAgent(domainAndMethod[0]);
+
+        agent[domainAndMethod[1]] = values;
+
+        this._initialized = true;
+    },
+
+    registerEvent: function(eventName, params)
+    {
+        this._eventArgs[eventName] = params;
+
+        this._initialized = true;
+    },
+
+    _invoke: function(method, signature, args, callback)
+    {
+        this._wrapCallbackAndSendMessageObject(method, args, callback);
+    },
+
+    _sendMessageToBackend: function(method, signature, vararg)
+    {
+        var args = Array.prototype.slice.call(arguments, 2);
+        var callback = typeof args.lastValue === "function" ? args.pop() : null;
+
+        var params = {};
+        var hasParams = false;
+        for (var i = 0; i < signature.length; ++i) {
+            var param = signature[i];
+            var paramName = param["name"];
+            var typeName = param["type"];
+            var optionalFlag = param["optional"];
+
+            if (!args.length && !optionalFlag) {
+                console.error("Protocol Error: Invalid number of arguments for method '" + method + "' call. It must have the following arguments '" + JSON.stringify(signature) + "'.");
+                return;
+            }
+
+            var value = args.shift();
+            if (optionalFlag && typeof value === "undefined") {
+                continue;
+            }
+
+            if (typeof value !== typeName) {
+                console.error("Protocol Error: Invalid type of argument '" + paramName + "' for method '" + method + "' call. It must be '" + typeName + "' but it is '" + typeof value + "'.");
+                return;
+            }
+
+            params[paramName] = value;
+            hasParams = true;
+        }
+
+        if (args.length === 1 && !callback) {
+            if (typeof args[0] !== "undefined") {
+                console.error("Protocol Error: Optional callback argument for method '" + method + "' call must be a function but its type is '" + typeof args[0] + "'.");
+                return;
+            }
+        }
+
+        this._wrapCallbackAndSendMessageObject(method, hasParams ? params : null, callback);
+    },
+
+    _wrapCallbackAndSendMessageObject: function(method, params, callback)
+    {
+        var messageObject = {};
+        messageObject.method = method;
+        if (params)
+            messageObject.params = params;
+        messageObject.id = this._wrap(callback, method);
+
+        if (this.dumpInspectorProtocolMessages)
+            console.log("frontend: " + JSON.stringify(messageObject));
+
+        ++this._pendingResponsesCount;
+        this.sendMessageObjectToBackend(messageObject);
+    },
+
+    sendMessageObjectToBackend: function(messageObject)
+    {
+        var message = JSON.stringify(messageObject);
+        InspectorFrontendHost.sendMessageToBackend(message);
+    },
+
+    registerDomainDispatcher: function(domain, dispatcher)
+    {
+        this._domainDispatchers[domain] = dispatcher;
+    },
+
+    dispatch: function(message)
+    {
+        if (this.dumpInspectorProtocolMessages)
+            console.log("backend: " + ((typeof message === "string") ? message : JSON.stringify(message)));
+
+        var messageObject = (typeof message === "string") ? JSON.parse(message) : message;
+
+        if ("id" in messageObject) { // just a response for some request
+            if (messageObject.error) {
+                if (messageObject.error.code !== -32000)
+                    this.reportProtocolError(messageObject);
+            }
+
+            var callback = this._callbacks[messageObject.id];
+            if (callback) {
+                var argumentsArray = [];
+                if (messageObject.result) {
+                    if (callback.expectsResultObject) {
+                        // The callback expects results as an object with properties, this is useful
+                        // for backwards compatibility with renamed or different parameters.
+                        argumentsArray.push(messageObject.result);
+                    } else {
+                        var paramNames = this._replyArgs[callback.methodName];
+                        if (paramNames) {
+                            for (var i = 0; i < paramNames.length; ++i)
+                                argumentsArray.push(messageObject.result[paramNames[i]]);
+                        }
+                    }
+                }
+
+                var processingStartTime;
+                if (this.dumpInspectorTimeStats && callback.methodName)
+                    processingStartTime = Date.now();
+
+                argumentsArray.unshift(messageObject.error ? messageObject.error.message : null);
+                callback.apply(null, argumentsArray);
+                --this._pendingResponsesCount;
+                delete this._callbacks[messageObject.id];
+
+                if (this.dumpInspectorTimeStats && callback.methodName)
+                    console.log("time-stats: " + callback.methodName + " = " + (processingStartTime - callback.sendRequestTime) + " + " + (Date.now() - processingStartTime));
+            }
+
+            if (this._scripts && !this._pendingResponsesCount)
+                this.runAfterPendingDispatches();
+
+            return;
+        } else {
+            var method = messageObject.method.split(".");
+            var domainName = method[0];
+            var functionName = method[1];
+            if (!(domainName in this._domainDispatchers)) {
+                console.error("Protocol Error: the message is for non-existing domain '" + domainName + "'");
+                return;
+            }
+            var dispatcher = this._domainDispatchers[domainName];
+            if (!(functionName in dispatcher)) {
+                console.error("Protocol Error: Attempted to dispatch an unimplemented method '" + messageObject.method + "'");
+                return;
+            }
+
+            if (!this._eventArgs[messageObject.method]) {
+                console.error("Protocol Error: Attempted to dispatch an unspecified method '" + messageObject.method + "'");
+                return;
+            }
+
+            var params = [];
+            if (messageObject.params) {
+                var paramNames = this._eventArgs[messageObject.method];
+                for (var i = 0; i < paramNames.length; ++i)
+                    params.push(messageObject.params[paramNames[i]]);
+            }
+
+            var processingStartTime;
+            if (this.dumpInspectorTimeStats)
+                processingStartTime = Date.now();
+
+            dispatcher[functionName].apply(dispatcher, params);
+
+            if (this.dumpInspectorTimeStats)
+                console.log("time-stats: " + messageObject.method + " = " + (Date.now() - processingStartTime));
+        }
+    },
+
+    reportProtocolError: function(messageObject)
+    {
+        console.error("Request with id = " + messageObject.id + " failed. " + JSON.stringify(messageObject.error));
+    },
+
+    /**
+     * @param {string=} script
+     */
+    runAfterPendingDispatches: function(script)
+    {
+        if (!this._scripts)
+            this._scripts = [];
+
+        if (script)
+            this._scripts.push(script);
+
+        if (!this._pendingResponsesCount) {
+            var scripts = this._scripts;
+            this._scripts = []
+            for (var id = 0; id < scripts.length; ++id)
+                 scripts[id].call(this);
+        }
+    }
+}
+
+InspectorBackend = new InspectorBackendClass();
diff --git a/Source/WebInspectorUI/UserInterface/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/InspectorBackendCommands.js
new file mode 100644
index 000000000..4625cc789
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/InspectorBackendCommands.js
@@ -0,0 +1,403 @@
+// File is generated by WebCore/WebCore/inspector/CodeGeneratorInspector.py
+
+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+
+// Inspector.
+InspectorBackend.registerInspectorDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Inspector");
+InspectorBackend.registerEvent("Inspector.evaluateForTestInFrontend", ["testCallId", "script"]);
+InspectorBackend.registerEvent("Inspector.inspect", ["object", "hints"]);
+InspectorBackend.registerEvent("Inspector.detached", ["reason"]);
+InspectorBackend.registerEvent("Inspector.targetCrashed", []);
+InspectorBackend.registerCommand("Inspector.enable", [], []);
+InspectorBackend.registerCommand("Inspector.disable", [], []);
+
+// Memory.
+InspectorBackend.registerMemoryDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Memory");
+InspectorBackend.registerEvent("Memory.addNativeSnapshotChunk", ["chunk"]);
+InspectorBackend.registerCommand("Memory.getDOMCounters", [], ["documents", "nodes", "jsEventListeners"]);
+
+// Page.
+InspectorBackend.registerPageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Page");
+InspectorBackend.registerEnum("Page.ResourceType", {Document: "Document", Stylesheet: "Stylesheet", Image: "Image", Font: "Font", Script: "Script", XHR: "XHR", WebSocket: "WebSocket", Other: "Other"});
+InspectorBackend.registerEvent("Page.domContentEventFired", ["timestamp"]);
+InspectorBackend.registerEvent("Page.loadEventFired", ["timestamp"]);
+InspectorBackend.registerEvent("Page.frameNavigated", ["frame"]);
+InspectorBackend.registerEvent("Page.frameDetached", ["frameId"]);
+InspectorBackend.registerEvent("Page.frameStartedLoading", ["frameId"]);
+InspectorBackend.registerEvent("Page.frameStoppedLoading", ["frameId"]);
+InspectorBackend.registerEvent("Page.frameScheduledNavigation", ["frameId", "delay"]);
+InspectorBackend.registerEvent("Page.frameClearedScheduledNavigation", ["frameId"]);
+InspectorBackend.registerEvent("Page.javascriptDialogOpening", ["message"]);
+InspectorBackend.registerEvent("Page.javascriptDialogClosed", []);
+InspectorBackend.registerEvent("Page.scriptsEnabled", ["isEnabled"]);
+InspectorBackend.registerCommand("Page.enable", [], []);
+InspectorBackend.registerCommand("Page.disable", [], []);
+InspectorBackend.registerCommand("Page.addScriptToEvaluateOnLoad", [{"name": "scriptSource", "type": "string", "optional": false}], ["identifier"]);
+InspectorBackend.registerCommand("Page.removeScriptToEvaluateOnLoad", [{"name": "identifier", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.reload", [{"name": "ignoreCache", "type": "boolean", "optional": true}, {"name": "scriptToEvaluateOnLoad", "type": "string", "optional": true}, {"name": "scriptPreprocessor", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("Page.navigate", [{"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getCookies", [], ["cookies", "cookiesString"]);
+InspectorBackend.registerCommand("Page.deleteCookie", [{"name": "cookieName", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getResourceTree", [], ["frameTree"]);
+InspectorBackend.registerCommand("Page.getResourceContent", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}], ["content", "base64Encoded"]);
+InspectorBackend.registerCommand("Page.searchInResource", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Page.searchInResources", [{"name": "text", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Page.setDocumentContent", [{"name": "frameId", "type": "string", "optional": false}, {"name": "html", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.canOverrideDeviceMetrics", [], ["result"]);
+InspectorBackend.registerCommand("Page.setDeviceMetricsOverride", [{"name": "width", "type": "number", "optional": false}, {"name": "height", "type": "number", "optional": false}, {"name": "fontScaleFactor", "type": "number", "optional": false}, {"name": "fitWindow", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.setShowPaintRects", [{"name": "result", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.canShowDebugBorders", [], ["show"]);
+InspectorBackend.registerCommand("Page.setShowDebugBorders", [{"name": "show", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.canShowFPSCounter", [], ["show"]);
+InspectorBackend.registerCommand("Page.setShowFPSCounter", [{"name": "show", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.canContinuouslyPaint", [], ["value"]);
+InspectorBackend.registerCommand("Page.setContinuousPaintingEnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getScriptExecutionStatus", [], ["result"]);
+InspectorBackend.registerCommand("Page.setScriptExecutionDisabled", [{"name": "value", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.setGeolocationOverride", [{"name": "latitude", "type": "number", "optional": true}, {"name": "longitude", "type": "number", "optional": true}, {"name": "accuracy", "type": "number", "optional": true}], []);
+InspectorBackend.registerCommand("Page.clearGeolocationOverride", [], []);
+InspectorBackend.registerCommand("Page.canOverrideGeolocation", [], ["result"]);
+InspectorBackend.registerCommand("Page.setDeviceOrientationOverride", [{"name": "alpha", "type": "number", "optional": false}, {"name": "beta", "type": "number", "optional": false}, {"name": "gamma", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("Page.clearDeviceOrientationOverride", [], []);
+InspectorBackend.registerCommand("Page.canOverrideDeviceOrientation", [], ["result"]);
+InspectorBackend.registerCommand("Page.setTouchEmulationEnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.setEmulatedMedia", [{"name": "media", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getCompositingBordersVisible", [], ["result"]);
+InspectorBackend.registerCommand("Page.setCompositingBordersVisible", [{"name": "visible", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.captureScreenshot", [], ["data"]);
+InspectorBackend.registerCommand("Page.handleJavaScriptDialog", [{"name": "accept", "type": "boolean", "optional": false}, {"name": "promptText", "type": "string", "optional": true}], []);
+
+// Runtime.
+InspectorBackend.registerRuntimeDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Runtime");
+InspectorBackend.registerEnum("Runtime.RemoteObjectType", {Object: "object", Function: "function", Undefined: "undefined", String: "string", Number: "number", Boolean: "boolean"});
+InspectorBackend.registerEnum("Runtime.RemoteObjectSubtype", {Array: "array", Null: "null", Node: "node", Regexp: "regexp", Date: "date"});
+InspectorBackend.registerEnum("Runtime.PropertyPreviewType", {Object: "object", Function: "function", Undefined: "undefined", String: "string", Number: "number", Boolean: "boolean"});
+InspectorBackend.registerEnum("Runtime.PropertyPreviewSubtype", {Array: "array", Null: "null", Node: "node", Regexp: "regexp", Date: "date"});
+InspectorBackend.registerEnum("Runtime.SyntaxErrorType", {None: "none", Irrecoverable: "irrecoverable", UnterminatedLiteral: "unterminated-literal", Recoverable: "recoverable"});
+InspectorBackend.registerEvent("Runtime.executionContextCreated", ["context"]);
+InspectorBackend.registerCommand("Runtime.parse", [{"name": "source", "type": "string", "optional": false}], ["result", "message", "range"]);
+InspectorBackend.registerCommand("Runtime.evaluate", [{"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "contextId", "type": "number", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
+InspectorBackend.registerCommand("Runtime.callFunctionOn", [{"name": "objectId", "type": "string", "optional": false}, {"name": "functionDeclaration", "type": "string", "optional": false}, {"name": "arguments", "type": "object", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
+InspectorBackend.registerCommand("Runtime.getProperties", [{"name": "objectId", "type": "string", "optional": false}, {"name": "ownProperties", "type": "boolean", "optional": true}], ["result", "internalProperties"]);
+InspectorBackend.registerCommand("Runtime.releaseObject", [{"name": "objectId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Runtime.releaseObjectGroup", [{"name": "objectGroup", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Runtime.run", [], []);
+InspectorBackend.registerCommand("Runtime.enable", [], []);
+InspectorBackend.registerCommand("Runtime.disable", [], []);
+
+// Console.
+InspectorBackend.registerConsoleDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Console");
+InspectorBackend.registerEnum("Console.ConsoleMessageSource", {XML: "xml", Javascript: "javascript", Network: "network", ConsoleAPI: "console-api", Storage: "storage", Appcache: "appcache", Rendering: "rendering", Css: "css", Security: "security", Other: "other"});
+InspectorBackend.registerEnum("Console.ConsoleMessageLevel", {Log: "log", Warning: "warning", Error: "error", Debug: "debug"});
+InspectorBackend.registerEnum("Console.ConsoleMessageType", {Log: "log", Dir: "dir", DirXML: "dirxml", Table: "table", Trace: "trace", Clear: "clear", StartGroup: "startGroup", StartGroupCollapsed: "startGroupCollapsed", EndGroup: "endGroup", Assert: "assert", Timing: "timing", Profile: "profile", ProfileEnd: "profileEnd"});
+InspectorBackend.registerEvent("Console.messageAdded", ["message"]);
+InspectorBackend.registerEvent("Console.messageRepeatCountUpdated", ["count"]);
+InspectorBackend.registerEvent("Console.messagesCleared", []);
+InspectorBackend.registerCommand("Console.enable", [], []);
+InspectorBackend.registerCommand("Console.disable", [], []);
+InspectorBackend.registerCommand("Console.clearMessages", [], []);
+InspectorBackend.registerCommand("Console.setMonitoringXHREnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Console.addInspectedNode", [{"name": "nodeId", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("Console.addInspectedHeapObject", [{"name": "heapObjectId", "type": "number", "optional": false}], []);
+
+// Network.
+InspectorBackend.registerNetworkDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Network");
+InspectorBackend.registerEnum("Network.InitiatorType", {Parser: "parser", Script: "script", Other: "other"});
+InspectorBackend.registerEvent("Network.requestWillBeSent", ["requestId", "frameId", "loaderId", "documentURL", "request", "timestamp", "initiator", "redirectResponse", "type"]);
+InspectorBackend.registerEvent("Network.requestServedFromCache", ["requestId"]);
+InspectorBackend.registerEvent("Network.responseReceived", ["requestId", "frameId", "loaderId", "timestamp", "type", "response"]);
+InspectorBackend.registerEvent("Network.dataReceived", ["requestId", "timestamp", "dataLength", "encodedDataLength"]);
+InspectorBackend.registerEvent("Network.loadingFinished", ["requestId", "timestamp", "sourceMapURL"]);
+InspectorBackend.registerEvent("Network.loadingFailed", ["requestId", "timestamp", "errorText", "canceled"]);
+InspectorBackend.registerEvent("Network.requestServedFromMemoryCache", ["requestId", "frameId", "loaderId", "documentURL", "timestamp", "initiator", "resource"]);
+InspectorBackend.registerEvent("Network.webSocketWillSendHandshakeRequest", ["requestId", "timestamp", "request"]);
+InspectorBackend.registerEvent("Network.webSocketHandshakeResponseReceived", ["requestId", "timestamp", "response"]);
+InspectorBackend.registerEvent("Network.webSocketCreated", ["requestId", "url"]);
+InspectorBackend.registerEvent("Network.webSocketClosed", ["requestId", "timestamp"]);
+InspectorBackend.registerEvent("Network.webSocketFrameReceived", ["requestId", "timestamp", "response"]);
+InspectorBackend.registerEvent("Network.webSocketFrameError", ["requestId", "timestamp", "errorMessage"]);
+InspectorBackend.registerEvent("Network.webSocketFrameSent", ["requestId", "timestamp", "response"]);
+InspectorBackend.registerCommand("Network.enable", [], []);
+InspectorBackend.registerCommand("Network.disable", [], []);
+InspectorBackend.registerCommand("Network.setUserAgentOverride", [{"name": "userAgent", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Network.setExtraHTTPHeaders", [{"name": "headers", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("Network.getResponseBody", [{"name": "requestId", "type": "string", "optional": false}], ["body", "base64Encoded"]);
+InspectorBackend.registerCommand("Network.replayXHR", [{"name": "requestId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Network.canClearBrowserCache", [], ["result"]);
+InspectorBackend.registerCommand("Network.clearBrowserCache", [], []);
+InspectorBackend.registerCommand("Network.canClearBrowserCookies", [], ["result"]);
+InspectorBackend.registerCommand("Network.clearBrowserCookies", [], []);
+InspectorBackend.registerCommand("Network.setCacheDisabled", [{"name": "cacheDisabled", "type": "boolean", "optional": false}], []);
+
+// Database.
+InspectorBackend.registerDatabaseDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Database");
+InspectorBackend.registerEvent("Database.addDatabase", ["database"]);
+InspectorBackend.registerCommand("Database.enable", [], []);
+InspectorBackend.registerCommand("Database.disable", [], []);
+InspectorBackend.registerCommand("Database.getDatabaseTableNames", [{"name": "databaseId", "type": "string", "optional": false}], ["tableNames"]);
+InspectorBackend.registerCommand("Database.executeSQL", [{"name": "databaseId", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}], ["columnNames", "values", "sqlError"]);
+
+// IndexedDB.
+InspectorBackend.registerIndexedDBDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "IndexedDB");
+InspectorBackend.registerEnum("IndexedDB.KeyType", {Number: "number", String: "string", Date: "date", Array: "array"});
+InspectorBackend.registerEnum("IndexedDB.KeyPathType", {Null: "null", String: "string", Array: "array"});
+InspectorBackend.registerCommand("IndexedDB.enable", [], []);
+InspectorBackend.registerCommand("IndexedDB.disable", [], []);
+InspectorBackend.registerCommand("IndexedDB.requestDatabaseNames", [{"name": "securityOrigin", "type": "string", "optional": false}], ["databaseNames"]);
+InspectorBackend.registerCommand("IndexedDB.requestDatabase", [{"name": "securityOrigin", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}], ["databaseWithObjectStores"]);
+InspectorBackend.registerCommand("IndexedDB.requestData", [{"name": "securityOrigin", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}, {"name": "objectStoreName", "type": "string", "optional": false}, {"name": "indexName", "type": "string", "optional": false}, {"name": "skipCount", "type": "number", "optional": false}, {"name": "pageSize", "type": "number", "optional": false}, {"name": "keyRange", "type": "object", "optional": true}], ["objectStoreDataEntries", "hasMore"]);
+InspectorBackend.registerCommand("IndexedDB.clearObjectStore", [{"name": "securityOrigin", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}, {"name": "objectStoreName", "type": "string", "optional": false}], []);
+
+// DOMStorage.
+InspectorBackend.registerDOMStorageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "DOMStorage");
+InspectorBackend.registerEvent("DOMStorage.domStorageItemsCleared", ["storageId"]);
+InspectorBackend.registerEvent("DOMStorage.domStorageItemRemoved", ["storageId", "key"]);
+InspectorBackend.registerEvent("DOMStorage.domStorageItemAdded", ["storageId", "key", "newValue"]);
+InspectorBackend.registerEvent("DOMStorage.domStorageItemUpdated", ["storageId", "key", "oldValue", "newValue"]);
+InspectorBackend.registerCommand("DOMStorage.enable", [], []);
+InspectorBackend.registerCommand("DOMStorage.disable", [], []);
+InspectorBackend.registerCommand("DOMStorage.getDOMStorageItems", [{"name": "storageId", "type": "object", "optional": false}], ["entries"]);
+InspectorBackend.registerCommand("DOMStorage.setDOMStorageItem", [{"name": "storageId", "type": "object", "optional": false}, {"name": "key", "type": "string", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMStorage.removeDOMStorageItem", [{"name": "storageId", "type": "object", "optional": false}, {"name": "key", "type": "string", "optional": false}], []);
+
+// ApplicationCache.
+InspectorBackend.registerApplicationCacheDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "ApplicationCache");
+InspectorBackend.registerEvent("ApplicationCache.applicationCacheStatusUpdated", ["frameId", "manifestURL", "status"]);
+InspectorBackend.registerEvent("ApplicationCache.networkStateUpdated", ["isNowOnline"]);
+InspectorBackend.registerCommand("ApplicationCache.getFramesWithManifests", [], ["frameIds"]);
+InspectorBackend.registerCommand("ApplicationCache.enable", [], []);
+InspectorBackend.registerCommand("ApplicationCache.getManifestForFrame", [{"name": "frameId", "type": "string", "optional": false}], ["manifestURL"]);
+InspectorBackend.registerCommand("ApplicationCache.getApplicationCacheForFrame", [{"name": "frameId", "type": "string", "optional": false}], ["applicationCache"]);
+
+// FileSystem.
+InspectorBackend.registerFileSystemDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "FileSystem");
+InspectorBackend.registerCommand("FileSystem.enable", [], []);
+InspectorBackend.registerCommand("FileSystem.disable", [], []);
+InspectorBackend.registerCommand("FileSystem.requestFileSystemRoot", [{"name": "origin", "type": "string", "optional": false}, {"name": "type", "type": "string", "optional": false}], ["errorCode", "root"]);
+InspectorBackend.registerCommand("FileSystem.requestDirectoryContent", [{"name": "url", "type": "string", "optional": false}], ["errorCode", "entries"]);
+InspectorBackend.registerCommand("FileSystem.requestMetadata", [{"name": "url", "type": "string", "optional": false}], ["errorCode", "metadata"]);
+InspectorBackend.registerCommand("FileSystem.requestFileContent", [{"name": "url", "type": "string", "optional": false}, {"name": "readAsText", "type": "boolean", "optional": false}, {"name": "start", "type": "number", "optional": true}, {"name": "end", "type": "number", "optional": true}, {"name": "charset", "type": "string", "optional": true}], ["errorCode", "content", "charset"]);
+InspectorBackend.registerCommand("FileSystem.deleteEntry", [{"name": "url", "type": "string", "optional": false}], ["errorCode"]);
+
+// DOM.
+InspectorBackend.registerDOMDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "DOM");
+InspectorBackend.registerEvent("DOM.documentUpdated", []);
+InspectorBackend.registerEvent("DOM.setChildNodes", ["parentId", "nodes"]);
+InspectorBackend.registerEvent("DOM.attributeModified", ["nodeId", "name", "value"]);
+InspectorBackend.registerEvent("DOM.attributeRemoved", ["nodeId", "name"]);
+InspectorBackend.registerEvent("DOM.inlineStyleInvalidated", ["nodeIds"]);
+InspectorBackend.registerEvent("DOM.characterDataModified", ["nodeId", "characterData"]);
+InspectorBackend.registerEvent("DOM.childNodeCountUpdated", ["nodeId", "childNodeCount"]);
+InspectorBackend.registerEvent("DOM.childNodeInserted", ["parentNodeId", "previousNodeId", "node"]);
+InspectorBackend.registerEvent("DOM.childNodeRemoved", ["parentNodeId", "nodeId"]);
+InspectorBackend.registerEvent("DOM.shadowRootPushed", ["hostId", "root"]);
+InspectorBackend.registerEvent("DOM.shadowRootPopped", ["hostId", "rootId"]);
+InspectorBackend.registerCommand("DOM.getDocument", [], ["root"]);
+InspectorBackend.registerCommand("DOM.requestChildNodes", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "depth", "type": "number", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.querySelector", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.querySelectorAll", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["nodeIds"]);
+InspectorBackend.registerCommand("DOM.setNodeName", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.setNodeValue", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.removeNode", [{"name": "nodeId", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.setAttributeValue", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.setAttributesAsText", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "text", "type": "string", "optional": false}, {"name": "name", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.removeAttribute", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.getEventListenersForNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["listeners"]);
+InspectorBackend.registerCommand("DOM.getOuterHTML", [{"name": "nodeId", "type": "number", "optional": false}], ["outerHTML"]);
+InspectorBackend.registerCommand("DOM.setOuterHTML", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "outerHTML", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.performSearch", [{"name": "query", "type": "string", "optional": false}], ["searchId", "resultCount"]);
+InspectorBackend.registerCommand("DOM.getSearchResults", [{"name": "searchId", "type": "string", "optional": false}, {"name": "fromIndex", "type": "number", "optional": false}, {"name": "toIndex", "type": "number", "optional": false}], ["nodeIds"]);
+InspectorBackend.registerCommand("DOM.discardSearchResults", [{"name": "searchId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.requestNode", [{"name": "objectId", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.setInspectModeEnabled", [{"name": "enabled", "type": "boolean", "optional": false}, {"name": "highlightConfig", "type": "object", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightRect", [{"name": "x", "type": "number", "optional": false}, {"name": "y", "type": "number", "optional": false}, {"name": "width", "type": "number", "optional": false}, {"name": "height", "type": "number", "optional": false}, {"name": "color", "type": "object", "optional": true}, {"name": "outlineColor", "type": "object", "optional": true}, {"name": "usePageCoordinates", "type": "boolean", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightQuad", [{"name": "quad", "type": "object", "optional": false}, {"name": "color", "type": "object", "optional": true}, {"name": "outlineColor", "type": "object", "optional": true}, {"name": "usePageCoordinates", "type": "boolean", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightNode", [{"name": "highlightConfig", "type": "object", "optional": false}, {"name": "nodeId", "type": "number", "optional": true}, {"name": "objectId", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.hideHighlight", [], []);
+InspectorBackend.registerCommand("DOM.highlightFrame", [{"name": "frameId", "type": "string", "optional": false}, {"name": "contentColor", "type": "object", "optional": true}, {"name": "contentOutlineColor", "type": "object", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.pushNodeByPathToFrontend", [{"name": "path", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.pushNodeByBackendIdToFrontend", [{"name": "backendNodeId", "type": "number", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.releaseBackendNodeIds", [{"name": "nodeGroup", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.resolveNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["object"]);
+InspectorBackend.registerCommand("DOM.getAttributes", [{"name": "nodeId", "type": "number", "optional": false}], ["attributes"]);
+InspectorBackend.registerCommand("DOM.moveTo", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "targetNodeId", "type": "number", "optional": false}, {"name": "insertBeforeNodeId", "type": "number", "optional": true}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.undo", [], []);
+InspectorBackend.registerCommand("DOM.redo", [], []);
+InspectorBackend.registerCommand("DOM.markUndoableState", [], []);
+InspectorBackend.registerCommand("DOM.focus", [{"name": "nodeId", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.setFileInputFiles", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "files", "type": "object", "optional": false}], []);
+
+// CSS.
+InspectorBackend.registerCSSDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "CSS");
+InspectorBackend.registerEnum("CSS.StyleSheetOrigin", {User: "user", UserAgent: "user-agent", Inspector: "inspector", Regular: "regular"});
+InspectorBackend.registerEnum("CSS.CSSPropertyStatus", {Active: "active", Inactive: "inactive", Disabled: "disabled", Style: "style"});
+InspectorBackend.registerEnum("CSS.CSSMediaSource", {MediaRule: "mediaRule", ImportRule: "importRule", LinkedSheet: "linkedSheet", InlineSheet: "inlineSheet"});
+InspectorBackend.registerEnum("CSS.RegionRegionOverset", {Overset: "overset", Fit: "fit", Empty: "empty"});
+InspectorBackend.registerEvent("CSS.mediaQueryResultChanged", []);
+InspectorBackend.registerEvent("CSS.styleSheetChanged", ["styleSheetId"]);
+InspectorBackend.registerEvent("CSS.namedFlowCreated", ["namedFlow"]);
+InspectorBackend.registerEvent("CSS.namedFlowRemoved", ["documentNodeId", "flowName"]);
+InspectorBackend.registerEvent("CSS.regionLayoutUpdated", ["namedFlow"]);
+InspectorBackend.registerCommand("CSS.enable", [], []);
+InspectorBackend.registerCommand("CSS.disable", [], []);
+InspectorBackend.registerCommand("CSS.getMatchedStylesForNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "includePseudo", "type": "boolean", "optional": true}, {"name": "includeInherited", "type": "boolean", "optional": true}], ["matchedCSSRules", "pseudoElements", "inherited"]);
+InspectorBackend.registerCommand("CSS.getInlineStylesForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["inlineStyle", "attributesStyle"]);
+InspectorBackend.registerCommand("CSS.getComputedStyleForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["computedStyle"]);
+InspectorBackend.registerCommand("CSS.getAllStyleSheets", [], ["headers"]);
+InspectorBackend.registerCommand("CSS.getStyleSheet", [{"name": "styleSheetId", "type": "string", "optional": false}], ["styleSheet"]);
+InspectorBackend.registerCommand("CSS.getStyleSheetText", [{"name": "styleSheetId", "type": "string", "optional": false}], ["text"]);
+InspectorBackend.registerCommand("CSS.setStyleSheetText", [{"name": "styleSheetId", "type": "string", "optional": false}, {"name": "text", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("CSS.setStyleText", [{"name": "styleId", "type": "object", "optional": false}, {"name": "text", "type": "string", "optional": false}], ["style"]);
+InspectorBackend.registerCommand("CSS.setPropertyText", [{"name": "styleId", "type": "object", "optional": false}, {"name": "propertyIndex", "type": "number", "optional": false}, {"name": "text", "type": "string", "optional": false}, {"name": "overwrite", "type": "boolean", "optional": false}], ["style"]);
+InspectorBackend.registerCommand("CSS.toggleProperty", [{"name": "styleId", "type": "object", "optional": false}, {"name": "propertyIndex", "type": "number", "optional": false}, {"name": "disable", "type": "boolean", "optional": false}], ["style"]);
+InspectorBackend.registerCommand("CSS.setRuleSelector", [{"name": "ruleId", "type": "object", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["rule"]);
+InspectorBackend.registerCommand("CSS.addRule", [{"name": "contextNodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["rule"]);
+InspectorBackend.registerCommand("CSS.getSupportedCSSProperties", [], ["cssProperties"]);
+InspectorBackend.registerCommand("CSS.forcePseudoState", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "forcedPseudoClasses", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("CSS.startSelectorProfiler", [], []);
+InspectorBackend.registerCommand("CSS.stopSelectorProfiler", [], ["profile"]);
+InspectorBackend.registerCommand("CSS.getNamedFlowCollection", [{"name": "documentNodeId", "type": "number", "optional": false}], ["namedFlows"]);
+
+// Timeline.
+InspectorBackend.registerTimelineDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Timeline");
+InspectorBackend.registerEvent("Timeline.eventRecorded", ["record"]);
+InspectorBackend.registerCommand("Timeline.start", [{"name": "maxCallStackDepth", "type": "number", "optional": true}, {"name": "includeDomCounters", "type": "boolean", "optional": true}, {"name": "includeNativeMemoryStatistics", "type": "boolean", "optional": true}], []);
+InspectorBackend.registerCommand("Timeline.stop", [], []);
+InspectorBackend.registerCommand("Timeline.supportsFrameInstrumentation", [], ["result"]);
+InspectorBackend.registerCommand("Timeline.canMonitorMainThread", [], ["result"]);
+
+// Debugger.
+InspectorBackend.registerDebuggerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Debugger");
+InspectorBackend.registerEnum("Debugger.ScopeType", {Global: "global", Local: "local", With: "with", Closure: "closure", Catch: "catch"});
+InspectorBackend.registerEvent("Debugger.globalObjectCleared", []);
+InspectorBackend.registerEvent("Debugger.scriptParsed", ["scriptId", "url", "startLine", "startColumn", "endLine", "endColumn", "isContentScript", "sourceMapURL", "hasSourceURL"]);
+InspectorBackend.registerEvent("Debugger.scriptFailedToParse", ["url", "scriptSource", "startLine", "errorLine", "errorMessage"]);
+InspectorBackend.registerEvent("Debugger.breakpointResolved", ["breakpointId", "location"]);
+InspectorBackend.registerEvent("Debugger.paused", ["callFrames", "reason", "data"]);
+InspectorBackend.registerEvent("Debugger.resumed", []);
+InspectorBackend.registerCommand("Debugger.causesRecompilation", [], ["result"]);
+InspectorBackend.registerCommand("Debugger.supportsSeparateScriptCompilationAndExecution", [], ["result"]);
+InspectorBackend.registerCommand("Debugger.enable", [], []);
+InspectorBackend.registerCommand("Debugger.disable", [], []);
+InspectorBackend.registerCommand("Debugger.setBreakpointsActive", [{"name": "active", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.setBreakpointByUrl", [{"name": "lineNumber", "type": "number", "optional": false}, {"name": "url", "type": "string", "optional": true}, {"name": "urlRegex", "type": "string", "optional": true}, {"name": "columnNumber", "type": "number", "optional": true}, {"name": "condition", "type": "string", "optional": true}], ["breakpointId", "locations"]);
+InspectorBackend.registerCommand("Debugger.setBreakpoint", [{"name": "location", "type": "object", "optional": false}, {"name": "condition", "type": "string", "optional": true}], ["breakpointId", "actualLocation"]);
+InspectorBackend.registerCommand("Debugger.removeBreakpoint", [{"name": "breakpointId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.continueToLocation", [{"name": "location", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.stepOver", [], []);
+InspectorBackend.registerCommand("Debugger.stepInto", [], []);
+InspectorBackend.registerCommand("Debugger.stepOut", [], []);
+InspectorBackend.registerCommand("Debugger.pause", [], []);
+InspectorBackend.registerCommand("Debugger.resume", [], []);
+InspectorBackend.registerCommand("Debugger.searchInContent", [{"name": "scriptId", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Debugger.canSetScriptSource", [], ["result"]);
+InspectorBackend.registerCommand("Debugger.setScriptSource", [{"name": "scriptId", "type": "string", "optional": false}, {"name": "scriptSource", "type": "string", "optional": false}, {"name": "preview", "type": "boolean", "optional": true}], ["callFrames", "result"]);
+InspectorBackend.registerCommand("Debugger.restartFrame", [{"name": "callFrameId", "type": "string", "optional": false}], ["callFrames", "result"]);
+InspectorBackend.registerCommand("Debugger.getScriptSource", [{"name": "scriptId", "type": "string", "optional": false}], ["scriptSource"]);
+InspectorBackend.registerCommand("Debugger.getFunctionDetails", [{"name": "functionId", "type": "string", "optional": false}], ["details"]);
+InspectorBackend.registerCommand("Debugger.setPauseOnExceptions", [{"name": "state", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.evaluateOnCallFrame", [{"name": "callFrameId", "type": "string", "optional": false}, {"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
+InspectorBackend.registerCommand("Debugger.compileScript", [{"name": "expression", "type": "string", "optional": false}, {"name": "sourceURL", "type": "string", "optional": false}], ["scriptId", "syntaxErrorMessage"]);
+InspectorBackend.registerCommand("Debugger.runScript", [{"name": "scriptId", "type": "string", "optional": false}, {"name": "contextId", "type": "number", "optional": true}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
+InspectorBackend.registerCommand("Debugger.setOverlayMessage", [{"name": "message", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("Debugger.setVariableValue", [{"name": "scopeNumber", "type": "number", "optional": false}, {"name": "variableName", "type": "string", "optional": false}, {"name": "newValue", "type": "object", "optional": false}, {"name": "callFrameId", "type": "string", "optional": true}, {"name": "functionObjectId", "type": "string", "optional": true}], []);
+
+// DOMDebugger.
+InspectorBackend.registerEnum("DOMDebugger.DOMBreakpointType", {SubtreeModified: "subtree-modified", AttributeModified: "attribute-modified", NodeRemoved: "node-removed"});
+InspectorBackend.registerCommand("DOMDebugger.setDOMBreakpoint", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "type", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeDOMBreakpoint", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "type", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.setEventListenerBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeEventListenerBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.setInstrumentationBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeInstrumentationBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.setXHRBreakpoint", [{"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeXHRBreakpoint", [{"name": "url", "type": "string", "optional": false}], []);
+
+// Profiler.
+InspectorBackend.registerProfilerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Profiler");
+InspectorBackend.registerEnum("Profiler.ProfileHeaderTypeId", {CPU: "CPU", CSS: "CSS", HEAP: "HEAP"});
+InspectorBackend.registerEvent("Profiler.addProfileHeader", ["header"]);
+InspectorBackend.registerEvent("Profiler.addHeapSnapshotChunk", ["uid", "chunk"]);
+InspectorBackend.registerEvent("Profiler.finishHeapSnapshot", ["uid"]);
+InspectorBackend.registerEvent("Profiler.setRecordingProfile", ["isProfiling"]);
+InspectorBackend.registerEvent("Profiler.resetProfiles", []);
+InspectorBackend.registerEvent("Profiler.reportHeapSnapshotProgress", ["done", "total"]);
+InspectorBackend.registerCommand("Profiler.causesRecompilation", [], ["result"]);
+InspectorBackend.registerCommand("Profiler.isSampling", [], ["result"]);
+InspectorBackend.registerCommand("Profiler.hasHeapProfiler", [], ["result"]);
+InspectorBackend.registerCommand("Profiler.enable", [], []);
+InspectorBackend.registerCommand("Profiler.disable", [], []);
+InspectorBackend.registerCommand("Profiler.start", [], []);
+InspectorBackend.registerCommand("Profiler.stop", [], []);
+InspectorBackend.registerCommand("Profiler.getProfileHeaders", [], ["headers"]);
+InspectorBackend.registerCommand("Profiler.getCPUProfile", [{"name": "uid", "type": "number", "optional": false}], ["profile"]);
+InspectorBackend.registerCommand("Profiler.getHeapSnapshot", [{"name": "uid", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("Profiler.removeProfile", [{"name": "type", "type": "string", "optional": false}, {"name": "uid", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("Profiler.clearProfiles", [], []);
+InspectorBackend.registerCommand("Profiler.takeHeapSnapshot", [{"name": "reportProgress", "type": "boolean", "optional": true}], []);
+InspectorBackend.registerCommand("Profiler.collectGarbage", [], []);
+InspectorBackend.registerCommand("Profiler.getObjectByHeapObjectId", [{"name": "objectId", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Profiler.getHeapObjectId", [{"name": "objectId", "type": "string", "optional": false}], ["heapSnapshotObjectId"]);
+
+// HeapProfiler.
+InspectorBackend.registerHeapProfilerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "HeapProfiler");
+InspectorBackend.registerEvent("HeapProfiler.addProfileHeader", ["header"]);
+InspectorBackend.registerEvent("HeapProfiler.addHeapSnapshotChunk", ["uid", "chunk"]);
+InspectorBackend.registerEvent("HeapProfiler.finishHeapSnapshot", ["uid"]);
+InspectorBackend.registerEvent("HeapProfiler.resetProfiles", []);
+InspectorBackend.registerEvent("HeapProfiler.reportHeapSnapshotProgress", ["done", "total"]);
+InspectorBackend.registerCommand("HeapProfiler.hasHeapProfiler", [], ["result"]);
+InspectorBackend.registerCommand("HeapProfiler.getProfileHeaders", [], ["headers"]);
+InspectorBackend.registerCommand("HeapProfiler.getHeapSnapshot", [{"name": "uid", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("HeapProfiler.removeProfile", [{"name": "uid", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("HeapProfiler.clearProfiles", [], []);
+InspectorBackend.registerCommand("HeapProfiler.takeHeapSnapshot", [{"name": "reportProgress", "type": "boolean", "optional": true}], []);
+InspectorBackend.registerCommand("HeapProfiler.collectGarbage", [], []);
+InspectorBackend.registerCommand("HeapProfiler.getObjectByHeapObjectId", [{"name": "objectId", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("HeapProfiler.getHeapObjectId", [{"name": "objectId", "type": "string", "optional": false}], ["heapSnapshotObjectId"]);
+
+// Worker.
+InspectorBackend.registerWorkerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Worker");
+InspectorBackend.registerEvent("Worker.workerCreated", ["workerId", "url", "inspectorConnected"]);
+InspectorBackend.registerEvent("Worker.workerTerminated", ["workerId"]);
+InspectorBackend.registerEvent("Worker.dispatchMessageFromWorker", ["workerId", "message"]);
+InspectorBackend.registerEvent("Worker.disconnectedFromWorker", []);
+InspectorBackend.registerCommand("Worker.enable", [], []);
+InspectorBackend.registerCommand("Worker.disable", [], []);
+InspectorBackend.registerCommand("Worker.sendMessageToWorker", [{"name": "workerId", "type": "number", "optional": false}, {"name": "message", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("Worker.canInspectWorkers", [], ["result"]);
+InspectorBackend.registerCommand("Worker.connectToWorker", [{"name": "workerId", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("Worker.disconnectFromWorker", [{"name": "workerId", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("Worker.setAutoconnectToWorkers", [{"name": "value", "type": "boolean", "optional": false}], []);
+
+// Canvas.
+InspectorBackend.registerCanvasDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Canvas");
+InspectorBackend.registerEvent("Canvas.contextCreated", ["frameId"]);
+InspectorBackend.registerEvent("Canvas.traceLogsRemoved", ["frameId", "traceLogId"]);
+InspectorBackend.registerCommand("Canvas.enable", [], []);
+InspectorBackend.registerCommand("Canvas.disable", [], []);
+InspectorBackend.registerCommand("Canvas.dropTraceLog", [{"name": "traceLogId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Canvas.hasUninstrumentedCanvases", [], ["result"]);
+InspectorBackend.registerCommand("Canvas.captureFrame", [{"name": "frameId", "type": "string", "optional": true}], ["traceLogId"]);
+InspectorBackend.registerCommand("Canvas.startCapturing", [{"name": "frameId", "type": "string", "optional": true}], ["traceLogId"]);
+InspectorBackend.registerCommand("Canvas.stopCapturing", [{"name": "traceLogId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Canvas.getTraceLog", [{"name": "traceLogId", "type": "string", "optional": false}, {"name": "startOffset", "type": "number", "optional": true}, {"name": "maxLength", "type": "number", "optional": true}], ["traceLog"]);
+InspectorBackend.registerCommand("Canvas.replayTraceLog", [{"name": "traceLogId", "type": "string", "optional": false}, {"name": "stepNo", "type": "number", "optional": false}], ["resourceState"]);
+InspectorBackend.registerCommand("Canvas.getResourceInfo", [{"name": "resourceId", "type": "string", "optional": false}], ["resourceInfo"]);
+InspectorBackend.registerCommand("Canvas.getResourceState", [{"name": "traceLogId", "type": "string", "optional": false}, {"name": "resourceId", "type": "string", "optional": false}], ["resourceState"]);
+
+// Input.
+InspectorBackend.registerInputDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Input");
+InspectorBackend.registerCommand("Input.dispatchKeyEvent", [{"name": "type", "type": "string", "optional": false}, {"name": "modifiers", "type": "number", "optional": true}, {"name": "timestamp", "type": "number", "optional": true}, {"name": "text", "type": "string", "optional": true}, {"name": "unmodifiedText", "type": "string", "optional": true}, {"name": "keyIdentifier", "type": "string", "optional": true}, {"name": "windowsVirtualKeyCode", "type": "number", "optional": true}, {"name": "nativeVirtualKeyCode", "type": "number", "optional": true}, {"name": "macCharCode", "type": "number", "optional": true}, {"name": "autoRepeat", "type": "boolean", "optional": true}, {"name": "isKeypad", "type": "boolean", "optional": true}, {"name": "isSystemKey", "type": "boolean", "optional": true}], []);
+InspectorBackend.registerCommand("Input.dispatchMouseEvent", [{"name": "type", "type": "string", "optional": false}, {"name": "x", "type": "number", "optional": false}, {"name": "y", "type": "number", "optional": false}, {"name": "modifiers", "type": "number", "optional": true}, {"name": "timestamp", "type": "number", "optional": true}, {"name": "button", "type": "string", "optional": true}, {"name": "clickCount", "type": "number", "optional": true}], []);
+
+// LayerTree.
+InspectorBackend.registerLayerTreeDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "LayerTree");
+InspectorBackend.registerEvent("LayerTree.layerTreeDidChange", []);
+InspectorBackend.registerCommand("LayerTree.enable", [], []);
+InspectorBackend.registerCommand("LayerTree.disable", [], []);
+InspectorBackend.registerCommand("LayerTree.layersForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["layers"]);
+InspectorBackend.registerCommand("LayerTree.reasonsForCompositingLayer", [{"name": "layerId", "type": "string", "optional": false}], ["compositingReasons"]);
diff --git a/Source/WebInspectorUI/UserInterface/InspectorFrontendAPI.js b/Source/WebInspectorUI/UserInterface/InspectorFrontendAPI.js
new file mode 100644
index 000000000..a540595d5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/InspectorFrontendAPI.js
@@ -0,0 +1,169 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+InspectorFrontendAPI = {
+    _loaded: false,
+
+    _pendingCommands: [],
+
+    savedURL: function(url)
+    {
+        // FIXME: Not implemented.
+    },
+
+    appendedToURL: function(url)
+    {
+        // FIXME: Not implemented.
+    },
+
+    isDebuggingEnabled: function()
+    {
+        // FIXME: Not implemented.
+        return false;
+    },
+
+    setDebuggingEnabled: function(enabled)
+    {
+        // FIXME: Not implemented.
+    },
+
+    isTimelineProfilingEnabled: function()
+    {
+        return WebInspector.timelineManager.recording;
+    },
+
+    setTimelineProfilingEnabled: function(enabled)
+    {
+        if (enabled) {
+            WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.instrumentSidebarPanel;
+            WebInspector.instrumentSidebarPanel.showTimeline();
+            WebInspector.timelineManager.startRecording();
+        } else {
+            WebInspector.timelineManager.stopRecording();
+        }
+    },
+
+    isProfilingJavaScript: function()
+    {
+        return WebInspector.profileManager.isProfilingJavaScript();
+    },
+
+    startProfilingJavaScript: function()
+    {
+        WebInspector.profileManager.startProfilingJavaScript();
+    },
+
+    stopProfilingJavaScript: function()
+    {
+        WebInspector.instrumentSidebarPanel.show();
+        WebInspector.profileManager.stopProfilingJavaScript();
+    },
+
+    setDockSide: function(side)
+    {
+        WebInspector.updateDockedState(side);
+    },
+
+    showConsole: function()
+    {
+        WebInspector.showConsoleView();
+
+        WebInspector.quickConsole.prompt.focus();
+
+        // If the page is still loading, focus the quick console again after tabindex autofocus.
+        if (document.readyState !== "complete")
+            document.addEventListener("readystatechange", this);
+    },
+
+    handleEvent: function(event)
+    {
+        console.assert(event.type === "readystatechange");
+
+        if (document.readyState === "complete") {
+            WebInspector.quickConsole.prompt.focus();
+            document.removeEventListener("readystatechange", this);
+        }
+    },
+
+    showResources: function()
+    {
+        WebInspector.ignoreLastContentCookie = true;
+        WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.resourceSidebarPanel;
+        WebInspector.navigationSidebar.collapsed = false;
+    },
+
+    showMainResourceForFrame: function(frameIdentifier)
+    {
+        WebInspector.ignoreLastContentCookie = true;
+        WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.resourceSidebarPanel;
+        WebInspector.resourceSidebarPanel.showSourceCodeForFrame(frameIdentifier, true);
+    },
+
+    setDockingUnavailable: function(unavailable)
+    {
+        // Not used.
+    },
+
+    contextMenuItemSelected: function(id)
+    {
+        WebInspector.contextMenuItemSelected(id);
+    },
+
+    contextMenuCleared: function()
+    {
+        WebInspector.contextMenuCleared();
+    },
+
+    dispatchMessageAsync: function(messageObject)
+    {
+        WebInspector.dispatchMessageFromBackend(messageObject);
+    },
+
+    dispatchMessage: function(messageObject)
+    {
+        InspectorBackend.dispatch(messageObject);
+    },
+
+    dispatch: function(signature)
+    {
+        if (!InspectorFrontendAPI._loaded) {
+            InspectorFrontendAPI._pendingCommands.push(signature);
+            return null;
+        }
+
+        var methodName = signature.shift();
+        return InspectorFrontendAPI[methodName].apply(InspectorFrontendAPI, signature);
+    },
+
+    loadCompleted: function()
+    {
+        InspectorFrontendAPI._loaded = true;
+
+        for (var i = 0; i < InspectorFrontendAPI._pendingCommands.length; ++i)
+            InspectorFrontendAPI.dispatch(InspectorFrontendAPI._pendingCommands[i]);
+
+        InspectorFrontendAPI._pendingCommands = [];
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/InspectorFrontendHostStub.js b/Source/WebInspectorUI/UserInterface/InspectorFrontendHostStub.js
new file mode 100644
index 000000000..19b3fa2bb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/InspectorFrontendHostStub.js
@@ -0,0 +1,122 @@
+/*
+ * Copyright (C) 2009 Google Inc. All rights reserved.
+ * Copyright (C) 2013 Seokju Kwon (seokju.kwon@gmail.com)
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+if (!window.InspectorFrontendHost) {
+
+    WebInspector.InspectorFrontendHostStub = function()
+    {
+        this._attachedWindowHeight = 0;
+    }
+
+    WebInspector.InspectorFrontendHostStub.prototype = {
+
+        bringToFront: function()
+        {
+            this._windowVisible = true;
+        },
+
+        closeWindow: function()
+        {
+            this._windowVisible = false;
+        },
+
+        requestSetDockSide: function(side)
+        {
+            InspectorFrontendAPI.setDockSide(side);
+        },
+
+        setAttachedWindowHeight: function(height)
+        {
+        },
+
+        setAttachedWindowWidth: function(width)
+        {
+        },
+
+        setToolbarHeight: function(width)
+        {
+        },
+
+        moveWindowBy: function(x, y)
+        {
+        },
+
+        loaded: function()
+        {
+        },
+
+        localizedStringsURL: function()
+        {
+            return undefined;
+        },
+
+        inspectedURLChanged: function(title)
+        {
+            document.title = title;
+        },
+
+        copyText: function(text)
+        {
+            this._textToCopy = text;
+            if (!document.execCommand("copy"))
+                console.error("Clipboard access is denied");
+        },
+
+        openInNewTab: function(url)
+        {
+            window.open(url, "_blank");
+        },
+
+        save: function(url, content, forceSaveAs)
+        {
+        },
+
+        sendMessageToBackend: function(message)
+        {
+            if (WebInspector.socket)
+                WebInspector.socket.send(message);
+        },
+
+        loadResourceSynchronously: function(url)
+        {
+            var xhr = new XMLHttpRequest();
+            xhr.open("GET", url, false);
+            xhr.send(null);
+
+            if (xhr.status === 200)
+                return xhr.responseText;
+            return null;
+        }
+    }
+
+    InspectorFrontendHost = new WebInspector.InspectorFrontendHostStub();
+}
+
diff --git a/Source/WebInspectorUI/UserInterface/InspectorObserver.js b/Source/WebInspectorUI/UserInterface/InspectorObserver.js
new file mode 100644
index 000000000..59a4115bd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/InspectorObserver.js
@@ -0,0 +1,66 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.InspectorObserver = function()
+{
+    WebInspector.Object.call(this);
+};
+
+WebInspector.InspectorObserver.prototype = {
+    constructor: WebInspector.InspectorObserver,
+
+    // Events defined by the "Inspector" domain (see WebCore/inspector/Inspector.json).
+
+    evaluateForTestInFrontend: function(testCallId, script)
+    {
+        // FIXME: Not implemented.
+    },
+
+    inspect: function(payload, hints)
+    {
+        var remoteObject = WebInspector.RemoteObject.fromPayload(payload);
+        if (remoteObject.subtype === "node") {
+            WebInspector.domTreeManager.inspectNodeObject(remoteObject);
+            WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.resourceSidebarPanel;
+            return;
+        }
+
+        if (hints.databaseId)
+            WebInspector.storageManager.inspectDatabase(hints.databaseId);
+        else if (hints.domStorageId)
+            WebInspector.storageManager.inspectDOMStorage(hints.domStorageId);
+
+        WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.resourceSidebarPanel;
+
+        remoteObject.release();
+    },
+
+    detached: function(reason)
+    {
+        // FIXME: Not implemented.
+    }
+};
+
+WebInspector.InspectorObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/InstrumentIcons.css b/Source/WebInspectorUI/UserInterface/InstrumentIcons.css
new file mode 100644
index 000000000..6ccde5b2c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/InstrumentIcons.css
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.network-icon .icon {
+    content: -webkit-image-set(url(Images/Network.png) 1x, url(Images/Network@2x.png) 2x);
+}
+
+.colors-icon .icon {
+    content: -webkit-image-set(url(Images/Colors.png) 1x, url(Images/Colors@2x.png) 2x);
+}
+
+.script-icon .icon {
+    content: -webkit-image-set(url(Images/Script.png) 1x, url(Images/Script@2x.png) 2x);
+}
+
+.stopwatch-icon .icon {
+    content: -webkit-image-set(url(Images/Stopwatch.png) 1x, url(Images/Stopwatch@2x.png) 2x);
+}
+
+.profile-icon .icon {
+    content: -webkit-image-set(url(Images/Profile.png) 1x, url(Images/Profile@2x.png) 2x);
+}
diff --git a/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.css b/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.css
new file mode 100644
index 000000000..a6b7b2373
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.css
@@ -0,0 +1,121 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.instrument > .title-bar {
+    position: absolute;
+    left: 0;
+    right: 0;
+
+    box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0;
+    border-bottom: 1px solid rgb(179, 179, 179);
+
+    height: 22px;
+    padding: 4px 6px;
+
+    font-size: 11px;
+    font-family: "Lucida Grande", sans-serif;
+
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.sidebar > .panel.instrument > .title-bar.timelines {
+    top: 0;
+}
+
+.sidebar > .panel.instrument > .title-bar > .record-glyph {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 21px;
+    height: 21px;
+    padding: 0;
+    border: none;
+    outline: none;
+    color: transparent;
+    overflow: hidden;
+    
+    -webkit-appearance: none;
+
+    background-color: transparent;
+    background-image: -webkit-image-set(url(Images/RecordingStopped.png) 1x, url(Images/RecordingStopped@2x.png) 2x);
+    background-repeat: no-repeat;
+    background-size: 21px 21px;
+}
+
+.sidebar > .panel.instrument > .title-bar > .record-glyph.recording {
+    background-image: -webkit-image-set(url(Images/Recording.png) 1x, url(Images/Recording@2x.png) 2x);
+}
+
+.sidebar > .panel.instrument > .title-bar > .record-glyph:hover {
+    background-image: -webkit-image-set(url(Images/RecordingHovered.png) 1x, url(Images/RecordingHovered@2x.png) 2x);
+}
+
+.sidebar > .panel.instrument > .title-bar > .record-glyph.recording:hover {
+    background-image: -webkit-image-set(url(Images/RecordingStopped.png) 1x, url(Images/RecordingStopped@2x.png) 2x);
+}
+
+.sidebar > .panel.instrument > .title-bar > .record-glyph.forced {
+    background-image: -webkit-image-set(url(Images/RecordingStopped.png) 1x, url(Images/RecordingStopped@2x.png) 2x) !important;
+}
+
+.sidebar > .panel.instrument > .title-bar > .record-glyph.recording.forced {
+    background-image: -webkit-image-set(url(Images/Recording.png) 1x, url(Images/Recording@2x.png) 2x) !important;
+}
+
+.sidebar > .panel.instrument > .title-bar > .record-status {
+    position: absolute;
+    top: 0;
+    right: 21px;
+    line-height: 20px;
+    color: rgb(76, 76, 76);
+}
+
+.sidebar > .panel.instrument > .navigation-sidebar-panel-content-tree-outline.timelines {
+    position: absolute;
+    top: 22px;
+    left: 0;
+    right: 0;
+    height: 78px;
+}
+
+.sidebar > .panel.instrument > .navigation-sidebar-panel-content-tree-outline.timelines .item:not(:first-child):not(.selected) {
+    border-top-color: rgba(0, 0, 0, 0.1);
+}
+
+.sidebar > .panel.instrument > .navigation-sidebar-panel-content-tree-outline.timelines .item.selected + .item {
+    border-top-color: rgba(0, 0, 0, 0.4);
+}
+
+.sidebar > .panel.instrument > .title-bar.profiles {
+    top: 100px;
+    border-top: 1px solid rgb(179, 179, 179);
+    height: 23px;
+}
+
+.sidebar > .panel.instrument > .content,
+.sidebar > .panel.instrument > .empty-content-placeholder {
+    top: 123px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.js b/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.js
new file mode 100644
index 000000000..641e8bb6c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.js
@@ -0,0 +1,500 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.InstrumentSidebarPanel = function()
+{
+    WebInspector.NavigationSidebarPanel.call(this, "instrument", WebInspector.UIString("Timelines"), "Images/NavigationItemStopwatch.pdf", "2");
+
+    this.filterBar.placeholder = WebInspector.UIString("Filter Profile List");
+
+    var timelinesTitleBarElement = document.createElement("div");
+    timelinesTitleBarElement.textContent = WebInspector.UIString("Timelines");
+    timelinesTitleBarElement.classList.add(WebInspector.InstrumentSidebarPanel.TitleBarStyleClass);
+    timelinesTitleBarElement.classList.add(WebInspector.InstrumentSidebarPanel.TimelinesTitleBarStyleClass);
+    this.element.appendChild(timelinesTitleBarElement);
+
+    this._recordGlyphElement = document.createElement("div");
+    this._recordGlyphElement.className = WebInspector.InstrumentSidebarPanel.RecordGlyphStyleClass;
+    this._recordGlyphElement.addEventListener("mouseover", this._recordGlyphMousedOver.bind(this));
+    this._recordGlyphElement.addEventListener("mouseout", this._recordGlyphMousedOut.bind(this));
+    this._recordGlyphElement.addEventListener("click", this._recordGlyphClicked.bind(this));
+    timelinesTitleBarElement.appendChild(this._recordGlyphElement);
+
+    this._recordStatusElement = document.createElement("div");
+    this._recordStatusElement.className = WebInspector.InstrumentSidebarPanel.RecordStatusStyleClass;
+    timelinesTitleBarElement.appendChild(this._recordStatusElement);
+
+    var timelinesTreeOutlineElement = document.createElement("ol");
+    timelinesTreeOutlineElement.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName);
+    timelinesTreeOutlineElement.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
+    timelinesTreeOutlineElement.classList.add(WebInspector.InstrumentSidebarPanel.TimelinesTreeOutlineStyleClass);
+    this.element.appendChild(timelinesTreeOutlineElement);
+
+    this._timelinesTreeOutline = new TreeOutline(timelinesTreeOutlineElement);
+    this._timelinesTreeOutline.allowsRepeatSelection = true;
+
+    this._timelinesObject = new WebInspector.TimelinesObject;
+
+    this._timelinesTreeElement = new WebInspector.GeneralTreeElement(WebInspector.InstrumentSidebarPanel.StopwatchIconStyleClass, WebInspector.UIString("Timelines"), null, this._timelinesObject);
+
+    var networkTimelineTreeElement = new WebInspector.GeneralTreeElement(WebInspector.InstrumentSidebarPanel.NetworkIconStyleClass, WebInspector.UIString("Network Requests"), null, WebInspector.TimelineRecord.Type.Network);
+    networkTimelineTreeElement.small = true;
+    networkTimelineTreeElement.twoLine = true;
+    this._timelinesTreeOutline.appendChild(networkTimelineTreeElement);
+
+    // Select by default, but don't allow focus or onselect to prevent showing the content view.
+    networkTimelineTreeElement.select(true, false, true);
+
+    var layoutTimelineTreeElement = new WebInspector.GeneralTreeElement(WebInspector.InstrumentSidebarPanel.ColorsIconStyleClass, WebInspector.UIString("Layout & Rendering"), null, WebInspector.TimelineRecord.Type.Layout);
+    layoutTimelineTreeElement.small = true;
+    layoutTimelineTreeElement.twoLine = true;
+    this._timelinesTreeOutline.appendChild(layoutTimelineTreeElement);
+
+    var scriptTimelineTreeElement = new WebInspector.GeneralTreeElement(WebInspector.InstrumentSidebarPanel.ScriptIconStyleClass, WebInspector.UIString("JavaScript & Events"), null, WebInspector.TimelineRecord.Type.Script);
+    scriptTimelineTreeElement.small = true;
+    scriptTimelineTreeElement.twoLine = true;
+    this._timelinesTreeOutline.appendChild(scriptTimelineTreeElement);
+
+    this._timelineTreeElementMap = {};
+    this._timelineTreeElementMap[WebInspector.TimelineRecord.Type.Network] = networkTimelineTreeElement;
+    this._timelineTreeElementMap[WebInspector.TimelineRecord.Type.Layout] = layoutTimelineTreeElement;
+    this._timelineTreeElementMap[WebInspector.TimelineRecord.Type.Script] = scriptTimelineTreeElement;
+
+    var profilesTitleBarElement = document.createElement("div");
+    profilesTitleBarElement.textContent = WebInspector.UIString("Profiles");
+    profilesTitleBarElement.classList.add(WebInspector.InstrumentSidebarPanel.TitleBarStyleClass);
+    profilesTitleBarElement.classList.add(WebInspector.InstrumentSidebarPanel.ProfilesTitleBarStyleClass);
+    this.element.appendChild(profilesTitleBarElement);
+    
+    this._recordProfileGlyphElement = document.createElement("select");
+    this._recordProfileGlyphElement.className = WebInspector.InstrumentSidebarPanel.RecordGlyphStyleClass;
+    this._recordProfileGlyphElement.addEventListener("mouseover", this._recordProfileGlyphMousedOver.bind(this));
+    this._recordProfileGlyphElement.addEventListener("mouseout", this._recordProfileGlyphMousedOut.bind(this));
+    this._recordProfileGlyphElement.addEventListener("mousedown", this._recordProfileGlyphMousedDown.bind(this));
+    this._recordProfileGlyphElement.addEventListener("click", this._recordProfileGlyphClicked.bind(this));
+    this._recordProfileGlyphElement.addEventListener("change", this._profileTypeWasSelected.bind(this));
+
+    var startJavaScriptProfileOption = document.createElement("option");
+    startJavaScriptProfileOption.textContent = WebInspector.UIString("Start JavaScript Profile");
+    startJavaScriptProfileOption.value = WebInspector.InstrumentSidebarPanel.StartJavaScriptProfileValue;
+    startJavaScriptProfileOption.selected = false;
+    
+    var startCSSSelectorProfileOption = document.createElement("option");
+    startCSSSelectorProfileOption.textContent = WebInspector.UIString("Start CSS Selector Profile");
+    startCSSSelectorProfileOption.value = WebInspector.InstrumentSidebarPanel.StartCSSSelectorProfileValue;
+    startCSSSelectorProfileOption.selected = false;
+    
+    this._recordProfileGlyphElement.add(startJavaScriptProfileOption);
+    this._recordProfileGlyphElement.add(startCSSSelectorProfileOption);
+
+    profilesTitleBarElement.appendChild(this._recordProfileGlyphElement);
+
+    this._recordProfileGlyphElement.selectedIndex = -1;
+    
+    this._recordProfileStatusElement = document.createElement("div");
+    this._recordProfileStatusElement.className = WebInspector.InstrumentSidebarPanel.RecordStatusStyleClass;
+    profilesTitleBarElement.appendChild(this._recordProfileStatusElement);
+
+    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingStarted, this._recordingStarted, this);
+    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingStopped, this._recordingStopped, this);
+
+    WebInspector.profileManager.addEventListener(WebInspector.ProfileManager.Event.ProfileWasAdded, this._profileWasAdded, this);
+    WebInspector.profileManager.addEventListener(WebInspector.ProfileManager.Event.ProfileWasUpdated, this._profileWasUpdated, this);
+    WebInspector.profileManager.addEventListener(WebInspector.ProfileManager.Event.Cleared, this._profilesCleared, this);
+    
+    WebInspector.profileManager.addEventListener(WebInspector.ProfileManager.Event.ProfilingStarted, this._profilingStarted, this);
+    WebInspector.profileManager.addEventListener(WebInspector.ProfileManager.Event.ProfilingEnded, this._profilingEnded, this);
+    WebInspector.profileManager.addEventListener(WebInspector.ProfileManager.Event.ProfilingInterrupted, this._profilingInterrupted, this);
+
+    this.updateEmptyContentPlaceholder(WebInspector.UIString("No Recorded Profiles"));
+    
+    // Maps from profile titles -> tree elements.
+    this._profileTreeElementMap = {};
+
+    this._timelinesTreeOutline.onselect = this._timelinesTreeElementSelected.bind(this);
+    this.contentTreeOutline.onselect = this._profileSelected.bind(this);
+};
+
+WebInspector.InstrumentSidebarPanel.TitleBarStyleClass = "title-bar";
+WebInspector.InstrumentSidebarPanel.TimelinesTitleBarStyleClass = "timelines";
+WebInspector.InstrumentSidebarPanel.TimelinesTreeOutlineStyleClass = "timelines";
+WebInspector.InstrumentSidebarPanel.RecordGlyphStyleClass = "record-glyph";
+WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingStyleClass = "recording";
+WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingForcedStyleClass = "forced";
+WebInspector.InstrumentSidebarPanel.RecordStatusStyleClass = "record-status";
+WebInspector.InstrumentSidebarPanel.ProfilesTitleBarStyleClass = "profiles";
+WebInspector.InstrumentSidebarPanel.StopwatchIconStyleClass = "stopwatch-icon";
+WebInspector.InstrumentSidebarPanel.NetworkIconStyleClass = "network-icon";
+WebInspector.InstrumentSidebarPanel.ColorsIconStyleClass = "colors-icon";
+WebInspector.InstrumentSidebarPanel.ScriptIconStyleClass = "script-icon";
+WebInspector.InstrumentSidebarPanel.ProfileIconStyleClass = "profile-icon";
+WebInspector.InstrumentSidebarPanel.StartJavaScriptProfileValue = "start-javascript-profile";
+WebInspector.InstrumentSidebarPanel.StartCSSSelectorProfileValue = "start-css-selector-profile";
+
+WebInspector.InstrumentSidebarPanel.prototype = {
+    constructor: WebInspector.InstrumentSidebarPanel,
+
+    // Public
+
+    treeElementForRepresentedObject: function(representedObject)
+    {
+        if (representedObject instanceof WebInspector.TimelinesObject)
+            return this._timelinesTreeElement;
+        return this.contentTreeOutline.getCachedTreeElement(representedObject);
+    },
+
+    showTimeline: function()
+    {
+        WebInspector.contentBrowser.showContentViewForRepresentedObject(this._timelinesObject);
+    },
+
+    showTimelineForRecordType: function(type)
+    {
+        var treeElementToSelect = this._timelineTreeElementMap[type];
+        if (!treeElementToSelect)
+            return;
+
+        treeElementToSelect.select(true, true);
+    },
+
+    cookieForContentView: function(contentView)
+    {
+        if (contentView instanceof WebInspector.TimelinesContentView)
+            return {timeline: true};
+        return null;
+    },
+
+    showContentViewForCookie: function(contentViewCookie)
+    {
+        if (!contentViewCookie)
+            return;
+
+        if (contentViewCookie.timeline)
+            this.showTimeline();
+    },
+
+    showProfile: function(type, title)
+    {
+        var profileTreeElements = this.contentTreeOutline.children;
+        for (var i = 0; i < profileTreeElements.length; ++i) {
+            var treeElement = profileTreeElements[i];
+            var profile = treeElement.representedObject;
+            if (profile.type === type && profile.title === title) {
+                treeElement.revealAndSelect();
+                return;
+            }
+        }
+    },
+
+    shown: function()
+    {
+        // Reselect the selected tree element to cause the content view to be shown as well. <rdar://problem/10854727>
+        var selectedTreeElement = this._timelinesTreeOutline.selectedTreeElement;
+        if (selectedTreeElement)
+            selectedTreeElement.select(true, true);
+
+        WebInspector.NavigationSidebarPanel.prototype.shown.call(this);
+    },
+
+    // Private
+
+    _timelinesTreeElementSelected: function(treeElement, selectedByUser)
+    {
+        if (this._timelineTreeElementMap[treeElement.representedObject] !== treeElement)
+            return;
+
+        // Deselect any tree element in the main content tree outline to prevent two selections in the sidebar.
+        var selectedTreeElement = this.contentTreeOutline.selectedTreeElement;
+        if (selectedTreeElement)
+            selectedTreeElement.deselect();
+
+        var contentView = WebInspector.contentBrowser.contentViewForRepresentedObject(this._timelinesObject);
+        contentView.showTimelineForRecordType(treeElement.representedObject);
+        WebInspector.contentBrowser.showContentView(contentView);
+    },
+
+    _profilingStarted: function(event)
+    {
+        this._recordProfileStatusElement.textContent = WebInspector.UIString("Profiling");
+        this._recordProfileGlyphElement.classList.add(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingStyleClass);
+    },
+
+    _profilingEnded: function(event)
+    {
+        // Immediately create a view for this profile so that it is archived across page loads.
+        if (event && event.data.profile) {
+            WebInspector.contentBrowser.contentViewForRepresentedObject(event.data.profile);
+            var treeElement = this.treeElementForRepresentedObject(event.data.profile);
+            if (treeElement) {
+                treeElement.status = null;
+                if (!event.data.fromConsole)
+                    treeElement.select();
+            }
+        }
+
+        this._recordProfileStatusElement.textContent = "";
+        this._recordProfileGlyphElement.classList.remove(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingStyleClass);
+    },
+
+    _profilingInterrupted: function(event)
+    {
+        this._profilingEnded();
+
+        var profile = event.data.profile;
+        console.assert(profile instanceof WebInspector.ProfileObject);
+
+        var treeElement = this.treeElementForRepresentedObject(profile);
+        console.assert(treeElement);
+        if (!treeElement)
+            return;
+
+        treeElement.treeOutline.removeChild(treeElement);
+    },
+
+    _recordProfileGlyphMousedOver: function(event)
+    {
+        this._recordProfileGlyphElement.classList.remove(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingForcedStyleClass);
+
+        if (WebInspector.profileManager.isProfilingJavaScript() || WebInspector.profileManager.isProfilingCSSSelectors())
+            this._recordProfileStatusElement.textContent = WebInspector.UIString("Stop Profiling");
+        else
+            this._recordProfileStatusElement.textContent = WebInspector.UIString("Start Profiling");
+    },
+
+    _recordProfileGlyphMousedOut: function(event)
+    {
+        this._recordProfileGlyphElement.classList.remove(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingForcedStyleClass);
+
+        if (WebInspector.profileManager.isProfilingJavaScript())
+            this._recordProfileStatusElement.textContent = WebInspector.UIString("Profiling");
+        else
+            this._recordProfileStatusElement.textContent = "";
+    },
+    
+    _recordProfileGlyphMousedDown: function(event)
+    {
+        // Don't show any option as selected in the profile selector.
+        this._recordProfileGlyphElement.selectedIndex = -1;
+        
+        // We don't want to show the select if the user is currently profiling. In that case,
+        // the user should just be able to click the record button to stop profiling.
+        if (WebInspector.profileManager.isProfilingJavaScript() || WebInspector.profileManager.isProfilingCSSSelectors())
+            event.preventDefault();
+        else {
+            // When a select is opened, a click event will be fired when the select is closed,
+            // whether or not anything was selected. We want to ignore that click, because it
+            // would instantly stop profiling.
+            this._shouldIgnoreRecordProfileGlyphClick = true;
+        }
+    },
+
+    _recordProfileGlyphClicked: function(event)
+    {
+        // Add forced class to prevent the glyph from showing a confusing status after click.
+        this._recordProfileGlyphElement.classList.add(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingForcedStyleClass);
+
+        if (this._shouldIgnoreRecordProfileGlyphClick) {
+            delete this._shouldIgnoreRecordProfileGlyphClick;
+            return;
+        }
+
+        if (WebInspector.profileManager.isProfilingJavaScript())
+            WebInspector.profileManager.stopProfilingJavaScript();
+        if (WebInspector.profileManager.isProfilingCSSSelectors())
+            WebInspector.profileManager.stopProfilingCSSSelectors();
+    },
+
+    _profileTypeWasSelected: function(event)
+    {
+        var selectedIndex = this._recordProfileGlyphElement.selectedIndex;
+        if (selectedIndex === -1)
+            return;
+        
+        var selectedValue = this._recordProfileGlyphElement.options[selectedIndex].value;
+        if (selectedValue === WebInspector.InstrumentSidebarPanel.StartJavaScriptProfileValue)
+            WebInspector.profileManager.startProfilingJavaScript();
+        else {
+            console.assert(selectedValue === WebInspector.InstrumentSidebarPanel.StartCSSSelectorProfileValue);
+            WebInspector.profileManager.startProfilingCSSSelectors();
+        }
+        
+    },
+
+    _recordingStarted: function(event)
+    {
+        this._recordStatusElement.textContent = WebInspector.UIString("Recording");
+        this._recordGlyphElement.classList.add(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingStyleClass);
+    },
+
+    _recordingStopped: function(event)
+    {
+        this._recordStatusElement.textContent = "";
+        this._recordGlyphElement.classList.remove(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingStyleClass);
+    },
+
+    _recordGlyphMousedOver: function(event)
+    {
+        this._recordGlyphElement.classList.remove(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingForcedStyleClass);
+
+        if (WebInspector.timelineManager.recording)
+            this._recordStatusElement.textContent = WebInspector.UIString("Stop Recording");
+        else
+            this._recordStatusElement.textContent = WebInspector.UIString("Start Recording");
+    },
+
+    _recordGlyphMousedOut: function(event)
+    {
+        this._recordGlyphElement.classList.remove(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingForcedStyleClass);
+
+        if (WebInspector.timelineManager.recording)
+            this._recordStatusElement.textContent = WebInspector.UIString("Recording");
+        else
+            this._recordStatusElement.textContent = "";
+    },
+
+    _recordGlyphClicked: function(event)
+    {
+        // Add forced class to prevent the glyph from showing a confusing status after click.
+        this._recordGlyphElement.classList.add(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingForcedStyleClass);
+
+        if (WebInspector.timelineManager.recording)
+            WebInspector.timelineManager.stopRecording();
+        else
+            WebInspector.timelineManager.startRecording();
+    },
+    
+    _titleForProfile: function(profile)
+    {
+        console.assert(profile instanceof WebInspector.ProfileObject);
+
+        var title = profile.title;
+        if (title.startsWith(WebInspector.ProfileManager.UserInitiatedProfileName)) {
+            var jsProfilesCount = 0;
+            var profiles = this.contentTreeOutline.children;
+            for (var i = 0; i < profiles.length; ++i) {
+                if (profiles[i].representedObject instanceof WebInspector.JavaScriptProfileObject)
+                    jsProfilesCount++;
+            }
+            if (profile.recording)
+                jsProfilesCount++;
+            title = WebInspector.UIString("JavaScript Profile %d").format(jsProfilesCount);
+        }
+        
+        return title;
+    },
+    
+    _profileWasAdded: function(event)
+    {
+        var profile = event.data.profile;
+        var title = profile.title;
+
+        console.assert(profile instanceof WebInspector.ProfileObject);
+
+        var profileTreeElement = new WebInspector.GeneralTreeElement(WebInspector.InstrumentSidebarPanel.ProfileIconStyleClass, this._titleForProfile(profile), null, profile, false);
+        profileTreeElement.small = true;
+        if (profile.recording)
+            profileTreeElement.status = new WebInspector.IndeterminateProgressSpinner().element;
+
+        if (!this._profileTreeElementMap[title]) {
+            // We don't want to track the placement of the "Recording..." title. All of the profiles collected from
+            // the Develop menu will be uniquely named, so we don't have to worry about creating folders for them.
+            if (!profile.recording)
+                this._profileTreeElementMap[title] = profileTreeElement;
+
+            this.contentTreeOutline.insertChild(profileTreeElement, 0);
+            return;
+        }
+        
+        if (this._profileTreeElementMap[title] instanceof WebInspector.FolderTreeElement) {
+            profileTreeElement.mainTitle = WebInspector.UIString("Run %d").format(this._profileTreeElementMap[title].children.length + 1);
+            this._profileTreeElementMap[title].appendChild(profileTreeElement);
+            return;
+        }
+
+        if (this._profileTreeElementMap[title] instanceof WebInspector.GeneralTreeElement) {
+            var profileFolderElement = new WebInspector.FolderTreeElement(title, null, null);
+            var oldProfileTreeElement = this._profileTreeElementMap[title];
+            
+            var profileIndex = this.contentTreeOutline.children.indexOf(oldProfileTreeElement);
+            this.contentTreeOutline.removeChild(oldProfileTreeElement);
+            
+            this.contentTreeOutline.insertChild(profileFolderElement, profileIndex);
+            
+            // Add the old tree element with the same title as the profile that was added, and the
+            // profile that was added to the folder we are creating to track all profiles with the
+            // given title. Add the old one as Run 1, and the new one as Run 2. Any additional profiles
+            // with the same title will be added as Run n.
+            oldProfileTreeElement.mainTitle = WebInspector.UIString("Run %d").format(1);
+            profileTreeElement.mainTitle = WebInspector.UIString("Run %d").format(2);
+            
+            profileFolderElement.appendChild(oldProfileTreeElement);
+            profileFolderElement.appendChild(profileTreeElement);
+
+            this._profileTreeElementMap[title] = profileFolderElement;
+            return;
+        }
+    },
+
+    _profileWasUpdated: function(event)
+    {
+        var profile = event.data.profile;
+        console.assert(profile instanceof WebInspector.ProfileObject);
+
+        var treeElement = this.treeElementForRepresentedObject(profile);
+        console.assert(treeElement);
+        if (!treeElement)
+            return;
+
+        // Update the title of the tree element.
+        treeElement.mainTitle = this._titleForProfile(profile);
+    },
+
+    _profilesCleared: function(event)
+    {
+        this.contentTreeOutline.removeChildren();
+        this._profileTreeElementMap = {};
+        
+        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.JavaScriptProfileView);
+        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.CSSSelectorProfileView);
+        
+        this.updateEmptyContentPlaceholder(WebInspector.UIString("No Recorded Profiles"));
+    },
+
+    _profileSelected: function(treeElement, selectedByUser)
+    {
+        console.assert(treeElement.representedObject instanceof WebInspector.ProfileObject);
+        if (!(treeElement.representedObject instanceof WebInspector.ProfileObject))
+            return;
+
+        // Deselect any tree element in the timelines tree outline to prevent two selections in the sidebar.
+        var selectedTreeElement = this._timelinesTreeOutline.selectedTreeElement;
+        if (selectedTreeElement)
+            selectedTreeElement.deselect();
+
+        WebInspector.contentBrowser.showContentViewForRepresentedObject(treeElement.representedObject);
+    }
+};
+
+WebInspector.InstrumentSidebarPanel.prototype.__proto__ = WebInspector.NavigationSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/IssueManager.js b/Source/WebInspectorUI/UserInterface/IssueManager.js
new file mode 100644
index 000000000..f70e5aceb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/IssueManager.js
@@ -0,0 +1,99 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.IssueManager = function()
+{
+    WebInspector.Object.call(this);
+
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+    WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.ActiveLogCleared, this._activeLogCleared, this);
+
+    this.initialize();
+}
+
+WebInspector.IssueManager.Event = {
+    IssueWasAdded: "issue-manager-issue-was-added",
+    Cleared: "issue-manager-cleared"
+};
+
+WebInspector.IssueManager.prototype = {
+    constructor: WebInspector.IssueManager,
+
+    // Public
+
+    initialize: function()
+    {
+        this._issues = [];
+
+        this.dispatchEventToListeners(WebInspector.IssueManager.Event.Cleared);
+    },
+
+    issueWasAdded: function(source, level, text, url, lineNumber, parameters)
+    {
+        var modifiedLineNumber;
+        if (lineNumber) {
+            console.assert(typeof lineNumber === "number");
+            modifiedLineNumber = lineNumber - 1;
+        }
+
+        var issue = new WebInspector.IssueMessage(source, level, text, url, modifiedLineNumber, parameters);
+        this._issues.push(issue);
+
+        this.dispatchEventToListeners(WebInspector.IssueManager.Event.IssueWasAdded, {issue: issue});
+    },
+
+    issuesForSourceCode: function(sourceCode)
+    {
+        var issues = [];
+
+        for (var i = 0; i < this._issues.length; ++i) {
+            // FIXME: Support issues based on Script identifiers too.
+            var issue = this._issues[i];
+            if (issue.url === sourceCode.url)
+                issues.push(issue);
+        }
+
+        return issues;
+    },
+
+    // Private
+
+    _activeLogCleared: function(event)
+    {
+        this.initialize();
+    },
+
+    _mainResourceDidChange: function(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        if (!event.target.isMainFrame())
+            return;
+
+        this.initialize();
+    }
+};
+
+WebInspector.IssueManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/IssueMessage.js b/Source/WebInspectorUI/UserInterface/IssueMessage.js
new file mode 100644
index 000000000..6894175f5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/IssueMessage.js
@@ -0,0 +1,242 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.IssueMessage = function(source, level, text, url, lineNumber, parameters)
+{
+    WebInspector.Object.call(this);
+
+    this._level = level;
+    this._text = text;
+
+    // FIXME <http://webkit.org/b/76404>: Remove the string equality checks for undefined
+    // once we don't get that value anymore from WebCore.
+
+    // FIXME: If the URL is undefined, get the URL from the stacktrace.
+    if (url && url !== "undefined")
+        this._url = url;
+
+    if (typeof lineNumber === "number" && lineNumber >= 0)
+        this._lineNumber = lineNumber;
+
+    if (parameters && parameters !== "undefined") {
+        this._parameters = [];
+        for (var i = 0; i < parameters.length; ++i) {
+            if (parameters[i] instanceof WebInspector.RemoteObject) {
+                this._parameters.push(parameters[i]);
+                continue;
+            }
+
+            if (typeof parameters[i] === "object")
+                this._parameters.push(WebInspector.RemoteObject.fromPayload(parameters[i]));
+            else
+                this._parameters.push(WebInspector.RemoteObject.fromPrimitiveValue(parameters[i]));
+        }
+    }
+
+    this._formatTextIfNecessary();
+
+    switch (source) {
+    case "javascript":
+        // FIXME: It would be nice if we had this information (the specific type of JavaScript error)
+        // as part of the data passed from WebCore, instead of having to determine it ourselves.
+        var prefixRegex = /^([^:]+): (?:DOM Exception \d+: )?/;
+        var match = prefixRegex.exec(this._text);
+        if (match && match[1] in WebInspector.IssueMessage.Type._prefixTypeMap) {
+            this._type = WebInspector.IssueMessage.Type._prefixTypeMap[match[1]];
+            this._text = this._text.substring(match[0].length);
+        } else
+            this._type = WebInspector.IssueMessage.Type.OtherIssue;
+        break;
+
+    case "html":
+    case "css":
+    case "wml":
+    case "xml":
+        this._type = WebInspector.IssueMessage.Type.PageIssue;
+        break;
+
+    case "network":
+        this._type = WebInspector.IssueMessage.Type.NetworkIssue;
+        break;
+
+    case "console-api":
+    case "other":
+        this._type = WebInspector.IssueMessage.Type.OtherIssue;
+        break;
+
+    default:
+        console.error("Unknown issue source:", source);
+        this._type = WebInspector.IssueMessage.Type.OtherIssue;
+    }
+}
+
+WebInspector.IssueMessage.Level = {
+    Error: "error",
+    Warning: "warning"
+};
+
+WebInspector.IssueMessage.Type = {
+    SemanticIssue: "issue-message-type-semantic-issue",
+    RangeIssue: "issue-message-type-range-issue",
+    ReferenceIssue: "issue-message-type-reference-issue",
+    TypeIssue: "issue-message-type-type-issue",
+    PageIssue: "issue-message-type-page-issue",
+    NetworkIssue: "issue-message-type-network-issue",
+    SecurityIssue: "issue-message-type-security-issue",
+    OtherIssue: "issue-message-type-other-issue"
+};
+
+WebInspector.IssueMessage.Type._prefixTypeMap = {
+    "SyntaxError": WebInspector.IssueMessage.Type.SemanticIssue,
+    "URIError": WebInspector.IssueMessage.Type.SemanticIssue,
+    "EvalError": WebInspector.IssueMessage.Type.SemanticIssue,
+    "INVALID_CHARACTER_ERR": WebInspector.IssueMessage.Type.SemanticIssue,
+    "SYNTAX_ERR": WebInspector.IssueMessage.Type.SemanticIssue,
+
+    "RangeError": WebInspector.IssueMessage.Type.RangeIssue,
+    "INDEX_SIZE_ERR": WebInspector.IssueMessage.Type.RangeIssue,
+    "DOMSTRING_SIZE_ERR": WebInspector.IssueMessage.Type.RangeIssue,
+
+    "ReferenceError": WebInspector.IssueMessage.Type.ReferenceIssue,
+    "HIERARCHY_REQUEST_ERR": WebInspector.IssueMessage.Type.ReferenceIssue,
+    "INVALID_STATE_ERR": WebInspector.IssueMessage.Type.ReferenceIssue,
+    "NOT_FOUND_ERR": WebInspector.IssueMessage.Type.ReferenceIssue,
+    "WRONG_DOCUMENT_ERR": WebInspector.IssueMessage.Type.ReferenceIssue,
+
+    "TypeError": WebInspector.IssueMessage.Type.TypeIssue,
+    "INVALID_NODE_TYPE_ERR": WebInspector.IssueMessage.Type.TypeIssue,
+    "TYPE_MISMATCH_ERR": WebInspector.IssueMessage.Type.TypeIssue,
+
+    "SECURITY_ERR": WebInspector.IssueMessage.Type.SecurityIssue,
+
+    "NETWORK_ERR": WebInspector.IssueMessage.Type.NetworkIssue,
+
+    "ABORT_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "DATA_CLONE_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "INUSE_ATTRIBUTE_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "INVALID_ACCESS_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "INVALID_MODIFICATION_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "NAMESPACE_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "NOT_SUPPORTED_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "NO_DATA_ALLOWED_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "NO_MODIFICATION_ALLOWED_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "QUOTA_EXCEEDED_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "TIMEOUT_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "URL_MISMATCH_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "VALIDATION_ERR": WebInspector.IssueMessage.Type.OtherIssue
+};
+
+WebInspector.IssueMessage.Type.displayName = function(type)
+{
+    switch(type) {
+    case WebInspector.IssueMessage.Type.SemanticIssue:
+        return WebInspector.UIString("Semantic Issue");
+    case WebInspector.IssueMessage.Type.RangeIssue:
+        return WebInspector.UIString("Range Issue");
+    case WebInspector.IssueMessage.Type.ReferenceIssue:
+        return WebInspector.UIString("Reference Issue");
+    case WebInspector.IssueMessage.Type.TypeIssue:
+        return WebInspector.UIString("Type Issue");
+    case WebInspector.IssueMessage.Type.PageIssue:
+        return WebInspector.UIString("Page Issue");
+    case WebInspector.IssueMessage.Type.NetworkIssue:
+        return WebInspector.UIString("Network Issue");
+    case WebInspector.IssueMessage.Type.SecurityIssue:
+        return WebInspector.UIString("Security Issue");
+    case WebInspector.IssueMessage.Type.OtherIssue:
+        return WebInspector.UIString("Other Issue");
+    default:
+        console.error("Unknown issue message type:", type);
+        return WebInspector.UIString("Other Issue");
+    }
+};
+
+WebInspector.IssueMessage.prototype = {
+    constructor: WebInspector.IssueMessage,
+
+    get type()
+    {
+        return this._type;
+    },
+
+    get level()
+    {
+        return this._level;
+    },
+
+    get text()
+    {
+        return this._text;
+    },
+
+    get url()
+    {
+        return this._url;
+    },
+
+    get lineNumber()
+    {
+        return this._lineNumber;
+    },
+
+    // Private
+
+    _formatTextIfNecessary: function()
+    {
+        if (!this._parameters)
+            return;
+        
+        if (WebInspector.RemoteObject.type(this._parameters[0]) !== "string")
+            return;
+
+        function valueFormatter(obj)
+        {
+            return obj.description;
+        }
+        
+        var formatters = {};
+        formatters.o = valueFormatter;
+        formatters.s = valueFormatter;
+        formatters.f = valueFormatter;
+        formatters.i = valueFormatter;
+        formatters.d = valueFormatter;
+        
+        function append(a, b)
+        {
+            a += b;
+            return a;
+        }
+
+        var result = String.format(this._parameters[0].description, this._parameters.slice(1), formatters, "", append);
+        var resultText = result.formattedResult;
+        
+        for (var i = 0; i < result.unusedSubstitutions.length; ++i)
+            resultText += " " + result.unusedSubstitutions[i].description;
+        
+        this._text = resultText;
+    }
+};
+
+WebInspector.IssueMessage.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/JavaScriptLogViewController.js b/Source/WebInspectorUI/UserInterface/JavaScriptLogViewController.js
new file mode 100644
index 000000000..edc4cf2dc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/JavaScriptLogViewController.js
@@ -0,0 +1,515 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.JavaScriptLogViewController = function(element, scrollElement, textPrompt, delegate, historySettingIdentifier)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(textPrompt instanceof WebInspector.ConsolePrompt);
+    console.assert(historySettingIdentifier);
+
+    this._element = element;
+    this._scrollElement = scrollElement;
+
+    this._promptHistorySetting = new WebInspector.Setting(historySettingIdentifier, null);
+
+    this._prompt = textPrompt;
+    this._prompt.delegate = this;
+    this._prompt.history = this._promptHistorySetting.value;
+
+    this.delegate = delegate;
+
+    this._cleared = true;
+    this._previousMessage = null;
+    this._repeatCountWasInterrupted = false;
+
+    this._topConsoleGroups = [];
+
+    this.messagesClearKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "K", this._handleClearShortcut.bind(this));
+    this.messagesAlternateClearKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, "L", this._handleClearShortcut.bind(this), this._element);
+
+    this._messagesFindKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "F", this._handleFindShortcut.bind(this), this._element);
+    this._messagesFindNextKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "G", this._handleFindNextShortcut.bind(this), this._element);
+    this._messagesFindPreviousKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command | WebInspector.KeyboardShortcut.Modifier.Shift, "G", this._handleFindPreviousShortcut.bind(this), this._element);
+
+    this._promptAlternateClearKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, "L", this._handleClearShortcut.bind(this), this._prompt.element);
+    this._promptFindKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "F", this._handleFindShortcut.bind(this), this._prompt.element);
+    this._promptFindNextKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "G", this._handleFindNextShortcut.bind(this), this._prompt.element);
+    this._promptFindPreviousKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command | WebInspector.KeyboardShortcut.Modifier.Shift, "G", this._handleFindPreviousShortcut.bind(this), this._prompt.element);
+
+    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._clearLastProperties, this);
+
+    this.startNewSession();
+};
+
+WebInspector.JavaScriptLogViewController.CachedPropertiesDuration = 30000;
+
+WebInspector.JavaScriptLogViewController.prototype = {
+    constructor: WebInspector.JavaScriptLogViewController,
+
+    // Public
+
+    get prompt()
+    {
+        return this._prompt;
+    },
+
+    get topConsoleGroup()
+    {
+        return this._topConsoleGroup;
+    },
+
+    get currentConsoleGroup()
+    {
+        return this._currentConsoleGroup;
+    },
+
+    clear: function()
+    {
+        this._cleared = true;
+
+        this.startNewSession(true);
+
+        this.prompt.focus();
+
+        if (this.delegate && typeof this.delegate.didClearMessages === "function")
+            this.delegate.didClearMessages();
+    },
+
+    startNewSession: function(clearPreviousSessions)
+    {
+        if (this._topConsoleGroups.length && clearPreviousSessions) {
+            for (var i = 0; i < this._topConsoleGroups.length; ++i)
+                this._element.removeChild(this._topConsoleGroups[i].element);
+
+            this._topConsoleGroups = [];
+            this._topConsoleGroup = null;
+            this._currentConsoleGroup = null;
+        }
+
+        // Reuse the top group if it has no messages.
+        if (this._topConsoleGroup && !this._topConsoleGroup.hasMessages()) {
+            // Make sure the session is visible.
+            this._topConsoleGroup.element.scrollIntoView();
+            return;
+        }
+
+        var hasPreviousSession = !!this._topConsoleGroup;
+        var consoleGroup = new WebInspector.ConsoleGroup(null, hasPreviousSession);
+
+        this._previousMessage = null;
+        this._repeatCountWasInterrupted = false;
+
+        this._topConsoleGroups.push(consoleGroup);
+        this._topConsoleGroup = consoleGroup;
+        this._currentConsoleGroup = consoleGroup;
+
+        this._element.appendChild(consoleGroup.element);
+
+        // Make sure the new session is visible.
+        consoleGroup.element.scrollIntoView();
+    },
+
+    appendConsoleMessage: function(consoleMessage)
+    {
+        // Clone the message since there might be multiple clients using the message,
+        // and since the message has a DOM element it can't be two places at once.
+        var messageClone = consoleMessage.clone();
+
+        this._appendConsoleMessage(messageClone);
+
+        return messageClone;
+    },
+
+    updatePreviousMessageRepeatCount: function(count)
+    {
+        console.assert(this._previousMessage);
+        if (!this._previousMessage)
+            return;
+
+        if (!this._repeatCountWasInterrupted) {
+            this._previousMessage.repeatCount = count - (this._previousMessage.ignoredCount || 0);
+            this._previousMessage.updateRepeatCount();
+        } else {
+            var newMessage = this._previousMessage.clone();
+
+            // If this message is repeated after being cloned, messageRepeatCountUpdated will be called with a
+            // count that includes the count of this message before cloning. We should ignore instances of this
+            // log that occurred before we cloned, so set a property on the message with the number of previous
+            // instances of this log that we should ignore.
+            newMessage.ignoredCount = newMessage.repeatCount + (this._previousMessage.ignoredCount || 0);
+            newMessage.repeatCount = 1;
+
+            this._appendConsoleMessage(newMessage);
+        }
+    },
+
+    isScrolledToBottom: function()
+    {
+        // Lie about being scrolled to the bottom if we have a pending request to scroll to the bottom soon.
+        return this._scrollToBottomTimeout || this._scrollElement.isScrolledToBottom();
+    },
+
+    scrollToBottom: function()
+    {
+        if (this._scrollToBottomTimeout)
+            return;
+
+        function delayedWork()
+        {
+            this._scrollToBottomTimeout = null;
+            this._scrollElement.scrollTop = this._scrollElement.scrollHeight;
+        }
+
+        // Don't scroll immediately so we are not causing excessive layouts when there
+        // are many messages being added at once.
+        this._scrollToBottomTimeout = setTimeout(delayedWork.bind(this), 0);
+    },
+
+    // Protected
+
+    consolePromptHistoryDidChange: function(prompt)
+    {
+        this._promptHistorySetting.value = this.prompt.history;
+    },
+
+    consolePromptShouldCommitText: function(prompt, text, cursorIsAtLastPosition, handler)
+    {
+        // Always commit the text if we are not at the last position.
+        if (!cursorIsAtLastPosition) {
+            handler(true);
+            return;
+        }
+
+        // COMPATIBILITY (iOS 6): RuntimeAgent.parse did not exist in iOS 6. Always commit.
+        if (!RuntimeAgent.parse) {
+            handler(true);
+            return;
+        }
+
+        function parseFinished(error, result, message, range)
+        {
+            handler(result !== RuntimeAgent.SyntaxErrorType.Recoverable);
+        }
+
+        RuntimeAgent.parse(text, parseFinished.bind(this));
+    },
+
+    consolePromptTextCommitted: function(prompt, text)
+    {
+        console.assert(text);
+
+        var commandMessage = new WebInspector.ConsoleCommand(text);
+        this._appendConsoleMessage(commandMessage, true);
+
+        function printResult(result, wasThrown)
+        {
+            if (!result || this._cleared)
+                return;
+
+            this._appendConsoleMessage(new WebInspector.ConsoleCommandResult(result, wasThrown, commandMessage), true);
+        }
+
+        this._evaluateInInspectedWindow(text, "console", true, true, false, printResult.bind(this));
+    },
+
+    consolePromptCompletionsNeeded: function(prompt, defaultCompletions, base, prefix, suffix, forced)
+    {
+        // Don't allow non-forced empty prefix completions unless the base is that start of property access.
+        if (!forced && !prefix && !/[.[]$/.test(base)) {
+            prompt.updateCompletions(null);
+            return;
+        }
+
+        // If the base ends with an open parentheses or open curly bracket then treat it like there is
+        // no base so we get global object completions.
+        if (/[({]$/.test(base))
+            base = "";
+
+        var lastBaseIndex = base.length - 1;
+        var dotNotation = base[lastBaseIndex] === ".";
+        var bracketNotation = base[lastBaseIndex] === "[";
+
+        if (dotNotation || bracketNotation) {
+            base = base.substring(0, lastBaseIndex);
+
+            // Don't suggest anything for an empty base that is using dot notation.
+            // Bracket notation with an empty base will be treated as an array.
+            if (!base && dotNotation) {
+                prompt.updateCompletions(defaultCompletions);
+                return;
+            }
+
+            // Don't allow non-forced empty prefix completions if the user is entering a number, since it might be a float.
+            // But allow number completions if the base already has a decimal, so "10.0." will suggest Number properties.
+            if (!forced && !prefix && dotNotation && base.indexOf(".") === -1 && parseInt(base, 10) == base) {
+                prompt.updateCompletions(null);
+                return;
+            }
+
+            // An empty base with bracket notation is not property access, it is an array.
+            // Clear the bracketNotation flag so completions are not quoted.
+            if (!base && bracketNotation)
+                bracketNotation = false;
+        }
+
+        // If the base is the same as the last time, we can reuse the property names we have already gathered.
+        // Doing this eliminates delay caused by the async nature of the code below and it only calls getters
+        // and functions once instead of repetitively. Sure, there can be difference each time the base is evaluated,
+        // but this optimization gives us more of a win. We clear the cache after 30 seconds or when stepping in the
+        // debugger to make sure we don't use stale properties in most cases.
+        if (this._lastBase === base && this._lastPropertyNames) {
+            receivedPropertyNames.call(this, this._lastPropertyNames);
+            return;
+        }
+
+        this._lastBase = base;
+        this._lastPropertyNames = null;
+
+        var activeCallFrame = WebInspector.debuggerManager.activeCallFrame;
+        if (!base && activeCallFrame)
+            activeCallFrame.collectScopeChainVariableNames(receivedPropertyNames.bind(this));
+        else
+            this._evaluateInInspectedWindow(base, "completion", true, true, false, evaluated.bind(this));
+
+        function updateLastPropertyNames(propertyNames)
+        {
+            if (this._clearLastPropertiesTimeout)
+                clearTimeout(this._clearLastPropertiesTimeout);
+            this._clearLastPropertiesTimeout = setTimeout(this._clearLastProperties.bind(this), WebInspector.JavaScriptLogViewController.CachedPropertiesDuration);
+
+            this._lastPropertyNames = propertyNames || {};
+        }
+
+        function evaluated(result, wasThrown)
+        {
+            if (wasThrown || !result || result.type === "undefined" || (result.type === "object" && result.subtype === "null")) {
+                RuntimeAgent.releaseObjectGroup("completion");
+
+                updateLastPropertyNames.call(this, {});
+                prompt.updateCompletions(defaultCompletions);
+
+                return;
+            }
+
+            function getCompletions(primitiveType)
+            {
+                var object;
+                if (primitiveType === "string")
+                    object = new String("");
+                else if (primitiveType === "number")
+                    object = new Number(0);
+                else if (primitiveType === "boolean")
+                    object = new Boolean(false);
+                else
+                    object = this;
+
+                var resultSet = {};
+                for (var o = object; o; o = o.__proto__) {
+                    try {
+                        var names = Object.getOwnPropertyNames(o);
+                        for (var i = 0; i < names.length; ++i)
+                            resultSet[names[i]] = true;
+                    } catch (e) {
+                        // Ignore
+                    }
+                }
+
+                return resultSet;
+            }
+
+            if (result.type === "object" || result.type === "function")
+                result.callFunctionJSON(getCompletions, undefined, receivedPropertyNames.bind(this));
+            else if (result.type === "string" || result.type === "number" || result.type === "boolean")
+                this._evaluateInInspectedWindow("(" + getCompletions + ")(\"" + result.type + "\")", "completion", false, true, true, receivedPropertyNamesFromEvaluate.bind(this));
+            else
+                console.error("Unknown result type: " + result.type);
+        }
+
+        function receivedPropertyNamesFromEvaluate(object, wasThrown, result)
+        {
+            receivedPropertyNames.call(this, result && !wasThrown ? result.value : null);
+        }
+
+        function receivedPropertyNames(propertyNames)
+        {
+            propertyNames = propertyNames || {};
+
+            updateLastPropertyNames.call(this, propertyNames);
+
+            RuntimeAgent.releaseObjectGroup("completion");
+
+            if (!base) {
+                const commandLineAPI = ["$", "$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "$0", "$1", "$2", "$3", "$4", "$_"];
+                for (var i = 0; i < commandLineAPI.length; ++i)
+                    propertyNames[commandLineAPI[i]] = true;
+            }
+
+            propertyNames = Object.keys(propertyNames);
+
+            var implicitSuffix = "";
+            if (bracketNotation) {
+                var quoteUsed = prefix[0] === "'" ? "'" : "\"";
+                if (suffix !== "]" && suffix !== quoteUsed)
+                    implicitSuffix = "]";
+            }
+
+            var completions = defaultCompletions;
+            var knownCompletions = completions.keySet();
+
+            for (var i = 0; i < propertyNames.length; ++i) {
+                var property = propertyNames[i];
+
+                if (dotNotation && !/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(property))
+                    continue;
+
+                if (bracketNotation) {
+                    if (parseInt(property) != property)
+                        property = quoteUsed + property.escapeCharacters(quoteUsed + "\\") + (suffix !== quoteUsed ? quoteUsed : "");
+                }
+
+                if (!property.startsWith(prefix) || property in knownCompletions)
+                    continue;
+
+                completions.push(property);
+                knownCompletions[property] = true;
+            }
+
+            function compare(a, b)
+            {
+                // Try to sort in numerical order first.
+                var numericCompareResult = a - b;
+                if (!isNaN(numericCompareResult))
+                    return numericCompareResult;
+
+                // Not numbers, sort as strings.
+                return a.localeCompare(b);
+            }
+
+            completions.sort(compare);
+
+            prompt.updateCompletions(completions, implicitSuffix);
+        }
+    },
+
+    // Private
+
+    _clearLastProperties: function()
+    {
+        if (this._clearLastPropertiesTimeout) {
+            clearTimeout(this._clearLastPropertiesTimeout);
+            delete this._clearLastPropertiesTimeout;
+        }
+
+        // Clear the cache of property names so any changes while stepping or sitting idle get picked up if the same
+        // expression is evaluated again.
+        this._lastPropertyNames = null;
+    },
+
+    _evaluateInInspectedWindow: function(expression, objectGroup, includeCommandLineAPI, doNotPauseOnExceptionsAndMuteConsole, returnByValue, callback)
+    {
+        if (!expression) {
+            // There is no expression, so the completion should happen against global properties.
+            expression = "this";
+        }
+
+        function evalCallback(error, result, wasThrown)
+        {
+            if (error) {
+                console.error(error);
+                callback(null, false);
+                return;
+            }
+
+            if (returnByValue)
+                callback(null, wasThrown, wasThrown ? null : result);
+            else
+                callback(WebInspector.RemoteObject.fromPayload(result), wasThrown);
+        }
+
+        if (WebInspector.debuggerManager.activeCallFrame) {
+            DebuggerAgent.evaluateOnCallFrame(WebInspector.debuggerManager.activeCallFrame.id, expression, objectGroup, includeCommandLineAPI, doNotPauseOnExceptionsAndMuteConsole, returnByValue, evalCallback);
+            return;
+        }
+
+        // COMPATIBILITY (iOS 6): Execution context identifiers (contextId) did not exist
+        // in iOS 6. Fallback to including the frame identifier (frameId).
+        var contextId = WebInspector.quickConsole.executionContextIdentifier;
+        RuntimeAgent.evaluate.invoke({expression: expression, objectGroup: objectGroup, includeCommandLineAPI: includeCommandLineAPI, doNotPauseOnExceptionsAndMuteConsole: doNotPauseOnExceptionsAndMuteConsole, contextId: contextId, frameId: contextId, returnByValue: returnByValue}, evalCallback);
+    },
+
+    _handleClearShortcut: function()
+    {
+        this.clear();
+    },
+
+    _handleFindShortcut: function()
+    {
+        this.delegate.focusSearchBar();
+    },
+
+    _handleFindNextShortcut: function()
+    {
+        this.delegate.highlightNextSearchMatch();
+    },
+
+    _handleFindPreviousShortcut: function()
+    {
+        this.delegate.highlightPreviousSearchMatch();
+    },
+
+    _appendConsoleMessage: function(msg, repeatCountWasInterrupted)
+    {
+        var wasScrolledToBottom = this.isScrolledToBottom();
+
+        this._cleared = false;
+        this._repeatCountWasInterrupted = repeatCountWasInterrupted || false;
+
+        if (!repeatCountWasInterrupted)
+            this._previousMessage = msg;
+
+        if (msg.type === WebInspector.ConsoleMessage.MessageType.EndGroup) {
+            var parentGroup = this._currentConsoleGroup.parentGroup;
+            if (parentGroup)
+                this._currentConsoleGroup = parentGroup;
+        } else {
+            if (msg.type === WebInspector.ConsoleMessage.MessageType.StartGroup || msg.type === WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed) {
+                var group = new WebInspector.ConsoleGroup(this._currentConsoleGroup);
+                this._currentConsoleGroup.messagesElement.appendChild(group.element);
+                this._currentConsoleGroup = group;
+            }
+
+            this._currentConsoleGroup.addMessage(msg);
+        }
+
+        if (msg.type === WebInspector.ConsoleMessage.MessageType.Result || wasScrolledToBottom)
+            this.scrollToBottom();
+
+        if (this.delegate && typeof this.delegate.didAppendConsoleMessage === "function")
+            this.delegate.didAppendConsoleMessage(msg);
+    }
+};
+
+WebInspector.JavaScriptLogViewController.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/JavaScriptProfileObject.js b/Source/WebInspectorUI/UserInterface/JavaScriptProfileObject.js
new file mode 100644
index 000000000..75755bc60
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/JavaScriptProfileObject.js
@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.JavaScriptProfileObject = function(title, id, recording)
+{
+    WebInspector.ProfileObject.call(this, WebInspector.JavaScriptProfileType.TypeId, title, id, recording);
+};
+
+WebInspector.JavaScriptProfileObject.prototype = {
+    constructor: WebInspector.JavaScriptProfileObject
+};
+
+WebInspector.JavaScriptProfileObject.prototype.__proto__ = WebInspector.ProfileObject.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/JavaScriptProfileType.js b/Source/WebInspectorUI/UserInterface/JavaScriptProfileType.js
new file mode 100644
index 000000000..13c68b61b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/JavaScriptProfileType.js
@@ -0,0 +1,95 @@
+/*
+ * Copyright (C) 2008, 2013 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.JavaScriptProfileType = function()
+{
+    WebInspector.ProfileType.call(this, WebInspector.JavaScriptProfileType.TypeId, WebInspector.UIString("Collect JavaScript Profile"));
+    this._recording = false;
+    WebInspector.JavaScriptProfileType.instance = this;
+}
+
+WebInspector.JavaScriptProfileType.TypeId = "CPU";
+
+WebInspector.JavaScriptProfileType.prototype = {
+    get buttonTooltip()
+    {
+        return this._recording ? WebInspector.UIString("Stop JavaScript profiling.") : WebInspector.UIString("Start JavaScript profiling.");
+    },
+
+    buttonClicked: function()
+    {
+        if (this._recording) {
+            this.stopRecordingProfile();
+            WebInspector.networkManager.enableResourceTracking();
+        } else {
+            WebInspector.networkManager.disableResourceTracking();
+            this.startRecordingProfile();
+        }
+    },
+
+    get treeItemTitle()
+    {
+        return WebInspector.UIString("JAVASCRIPT PROFILES");
+    },
+
+    get description()
+    {
+        return WebInspector.UIString("JavaScript profiles show where the execution time is spent in your page's JavaScript functions.");
+    },
+
+    isRecordingProfile: function()
+    {
+        return this._recording;
+    },
+
+    startRecordingProfile: function()
+    {
+        this._recording = true;
+        ProfilerAgent.start();
+    },
+
+    stopRecordingProfile: function()
+    {
+        this._recording = false;
+        ProfilerAgent.stop();
+    },
+
+    setRecordingProfile: function(isProfiling)
+    {
+        this._recording = isProfiling;
+    },
+
+    createSidebarTreeElementForProfile: function(profile)
+    {
+        return new WebInspector.ProfileSidebarTreeElement(profile, WebInspector.UIString("Profile %d"), "profile-sidebar-tree-item");
+    },
+
+    createView: function(profile)
+    {
+        return new WebInspector.JavaScriptProfileView(profile);
+    }
+}
+
+WebInspector.JavaScriptProfileType.prototype.__proto__ = WebInspector.ProfileType.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/JavaScriptProfileView.css b/Source/WebInspectorUI/UserInterface/JavaScriptProfileView.css
new file mode 100644
index 000000000..94889c556
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/JavaScriptProfileView.css
@@ -0,0 +1,76 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.profile-view > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    outline: none;
+    border: none;
+}
+
+.profile-view .data-grid th.average-column {
+    text-align: center;
+}
+
+.profile-view .data-grid td.average-column {
+    text-align: right;
+}
+
+.profile-view .data-grid th.self-column {
+    text-align: center;
+}
+
+.profile-view .data-grid td.self-column {
+    text-align: right;
+}
+
+.profile-view .data-grid th.total-column {
+    text-align: center;
+}
+
+.profile-view .data-grid td.total-column {
+    text-align: right;
+}
+
+.profile-view .data-grid .calls-column {
+    text-align: center;
+}
+
+.profile-node-file {
+    float: right;
+    color: gray;
+    margin-top: -1px;
+}
+
+.data-grid tr.selected .profile-node-file {
+    color: rgb(33%, 33%, 33%);
+}
+
+.data-grid:focus tr.selected .profile-node-file {
+    color: white;
+}
diff --git a/Source/WebInspectorUI/UserInterface/JavaScriptProfileView.js b/Source/WebInspectorUI/UserInterface/JavaScriptProfileView.js
new file mode 100644
index 000000000..de1860fd9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/JavaScriptProfileView.js
@@ -0,0 +1,468 @@
+/*
+ * Copyright (C) 2008, 2013 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.JavaScriptProfileView = function(profile)
+{
+    console.assert(profile instanceof WebInspector.JavaScriptProfileObject);
+
+    WebInspector.ProfileView.call(this, profile, "javascript-profiler-show-time-as-percent");
+
+    this._showTreeBottomUpSetting = new WebInspector.Setting("javascript-profiler-show-tree-bottom-up", true);
+
+    this._showTreeBottomUpNavigationItem = new WebInspector.ActivateButtonNavigationItem("show-tree-bottom-up-navigation-item", WebInspector.UIString("Invert call tree"), WebInspector.UIString("Normal call tree"), "Images/BottomUpTree.pdf", 16, 16);
+    this._showTreeBottomUpNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleBottomUpView, this);
+    this._showTreeBottomUpNavigationItem.activated = this._showTreeBottomUpSetting.value;
+
+    this._viewType = new WebInspector.Setting("javascript-profiler-view", WebInspector.JavaScriptProfileView._TypeHeavy);
+}
+
+WebInspector.JavaScriptProfileView._TypeTree = "Tree";
+WebInspector.JavaScriptProfileView._TypeHeavy = "Heavy";
+
+WebInspector.JavaScriptProfileView.prototype = {
+    constructor: WebInspector.JavaScriptProfileView,
+
+    updateLayout: function()
+    {
+        if (this.dataGrid)
+            this.dataGrid.updateLayout();
+    },
+
+    get recordingTitle()
+    {
+        return WebInspector.UIString("Recording JavaScript Profile\u2026");
+    },
+
+    displayProfile: function()
+    {
+        var columns = { "self": { title: WebInspector.UIString("Self"), width: "72px", sort: "descending", sortable: true },
+                        "total": { title: WebInspector.UIString("Total"), width: "72px", sortable: true },
+                        "average": { title: WebInspector.UIString("Average"), width: "72px", sortable: true },
+                        "calls": { title: WebInspector.UIString("Calls"), width: "54px", sortable: true },
+                        "function": { title: WebInspector.UIString("Function"), disclosure: true, sortable: true } };
+
+        this.dataGrid = new WebInspector.DataGrid(columns);
+        this.dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortData, this);
+
+        this.element.appendChild(this.dataGrid.element);
+        this.dataGrid.updateLayout();
+
+        function profileCallback(error, profile)
+        {
+            if (error)
+                return;
+
+            if (!profile.head) {
+                // Profiling was tentatively terminated with the "Clear all profiles." button.
+                return;
+            }
+            this.profile.head = profile.head;
+            this._assignParentsInProfile();
+            this._changeView();
+        }
+
+        // COMPATIBILITY (iOS 6): getCPUProfile use to be called getProfile.
+        if (ProfilerAgent.getProfile)
+            ProfilerAgent.getProfile(this.profile.type, this.profile.id, profileCallback.bind(this));
+        else
+            ProfilerAgent.getCPUProfile(this.profile.id, profileCallback.bind(this));
+    },
+
+    get navigationItems()
+    {
+        return [this._showTreeBottomUpNavigationItem, this.showTimeAsPercentNavigationItem];
+    },
+
+    get bottomUpProfileDataGridTree()
+    {
+        if (!this._bottomUpProfileDataGridTree)
+            this._bottomUpProfileDataGridTree = new WebInspector.BottomUpProfileDataGridTree(this, this.profile.head);
+        return this._bottomUpProfileDataGridTree;
+    },
+
+    get topDownProfileDataGridTree()
+    {
+        if (!this._topDownProfileDataGridTree)
+            this._topDownProfileDataGridTree = new WebInspector.TopDownProfileDataGridTree(this, this.profile.head);
+        return this._topDownProfileDataGridTree;
+    },
+
+    willHide: function()
+    {
+        this._currentSearchResultIndex = -1;
+    },
+
+    refresh: function()
+    {
+        var selectedProfileNode = this.dataGrid.selectedNode ? this.dataGrid.selectedNode.profileNode : null;
+
+        this.dataGrid.removeChildren();
+
+        var children = this.profileDataGridTree.children;
+        var count = children.length;
+
+        for (var index = 0; index < count; ++index)
+            this.dataGrid.appendChild(children[index]);
+
+        if (selectedProfileNode)
+            selectedProfileNode.selected = true;
+    },
+
+    refreshVisibleData: function()
+    {
+        var child = this.dataGrid.children[0];
+        while (child) {
+            child.refresh();
+            child = child.traverseNextNode(false, null, true);
+        }
+    },
+
+    searchCanceled: function()
+    {
+        if (this._searchResults) {
+            for (var i = 0; i < this._searchResults.length; ++i) {
+                var profileNode = this._searchResults[i].profileNode;
+
+                delete profileNode._searchMatchedSelfColumn;
+                delete profileNode._searchMatchedTotalColumn;
+                delete profileNode._searchMatchedCallsColumn;
+                delete profileNode._searchMatchedFunctionColumn;
+
+                profileNode.refresh();
+            }
+        }
+
+        delete this._searchFinishedCallback;
+        this._currentSearchResultIndex = -1;
+        this._searchResults = [];
+    },
+
+    performSearch: function(query, finishedCallback)
+    {
+        // Call searchCanceled since it will reset everything we need before doing a new search.
+        this.searchCanceled();
+
+        query = query.trim();
+
+        if (!query.length)
+            return;
+
+        this._searchFinishedCallback = finishedCallback;
+
+        var greaterThan = query.charAt(0) === ">";
+        var lessThan = query.charAt(0) === "<";
+        var equalTo = (query.charAt(0) === "=" || ((greaterThan || lessThan) && query.charAt(1) === "="));
+        var percentUnits = (query.lastIndexOf("%") === (query.length - 1));
+        var millisecondsUnits = (query.length > 2 && query.lastIndexOf("ms") === (query.length - 2));
+        var secondsUnits = (!millisecondsUnits && query.lastIndexOf("s") === (query.length - 1));
+
+        var queryNumber = parseFloat(query);
+        if (greaterThan || lessThan || equalTo) {
+            if (equalTo && (greaterThan || lessThan))
+                queryNumber = parseFloat(query.substring(2));
+            else
+                queryNumber = parseFloat(query.substring(1));
+        }
+
+        var queryNumberMilliseconds = (secondsUnits ? (queryNumber * 1000) : queryNumber);
+
+        // Make equalTo implicitly true if it wasn't specified there is no other operator.
+        if (!isNaN(queryNumber) && !(greaterThan || lessThan))
+            equalTo = true;
+
+        function matchesQuery(/*ProfileDataGridNode*/ profileDataGridNode)
+        {
+            delete profileDataGridNode._searchMatchedSelfColumn;
+            delete profileDataGridNode._searchMatchedTotalColumn;
+            delete profileDataGridNode._searchMatchedAverageColumn;
+            delete profileDataGridNode._searchMatchedCallsColumn;
+            delete profileDataGridNode._searchMatchedFunctionColumn;
+
+            if (percentUnits) {
+                if (lessThan) {
+                    if (profileDataGridNode.selfPercent < queryNumber)
+                        profileDataGridNode._searchMatchedSelfColumn = true;
+                    if (profileDataGridNode.totalPercent < queryNumber)
+                        profileDataGridNode._searchMatchedTotalColumn = true;
+                    if (profileDataGridNode.averagePercent < queryNumberMilliseconds)
+                        profileDataGridNode._searchMatchedAverageColumn = true;
+                } else if (greaterThan) {
+                    if (profileDataGridNode.selfPercent > queryNumber)
+                        profileDataGridNode._searchMatchedSelfColumn = true;
+                    if (profileDataGridNode.totalPercent > queryNumber)
+                        profileDataGridNode._searchMatchedTotalColumn = true;
+                    if (profileDataGridNode.averagePercent < queryNumberMilliseconds)
+                        profileDataGridNode._searchMatchedAverageColumn = true;
+                }
+
+                if (equalTo) {
+                    if (profileDataGridNode.selfPercent == queryNumber)
+                        profileDataGridNode._searchMatchedSelfColumn = true;
+                    if (profileDataGridNode.totalPercent == queryNumber)
+                        profileDataGridNode._searchMatchedTotalColumn = true;
+                    if (profileDataGridNode.averagePercent < queryNumberMilliseconds)
+                        profileDataGridNode._searchMatchedAverageColumn = true;
+                }
+            } else if (millisecondsUnits || secondsUnits) {
+                if (lessThan) {
+                    if (profileDataGridNode.selfTime < queryNumberMilliseconds)
+                        profileDataGridNode._searchMatchedSelfColumn = true;
+                    if (profileDataGridNode.totalTime < queryNumberMilliseconds)
+                        profileDataGridNode._searchMatchedTotalColumn = true;
+                    if (profileDataGridNode.averageTime < queryNumberMilliseconds)
+                        profileDataGridNode._searchMatchedAverageColumn = true;
+                } else if (greaterThan) {
+                    if (profileDataGridNode.selfTime > queryNumberMilliseconds)
+                        profileDataGridNode._searchMatchedSelfColumn = true;
+                    if (profileDataGridNode.totalTime > queryNumberMilliseconds)
+                        profileDataGridNode._searchMatchedTotalColumn = true;
+                    if (profileDataGridNode.averageTime > queryNumberMilliseconds)
+                        profileDataGridNode._searchMatchedAverageColumn = true;
+                }
+
+                if (equalTo) {
+                    if (profileDataGridNode.selfTime == queryNumberMilliseconds)
+                        profileDataGridNode._searchMatchedSelfColumn = true;
+                    if (profileDataGridNode.totalTime == queryNumberMilliseconds)
+                        profileDataGridNode._searchMatchedTotalColumn = true;
+                    if (profileDataGridNode.averageTime == queryNumberMilliseconds)
+                        profileDataGridNode._searchMatchedAverageColumn = true;
+                }
+            } else {
+                if (equalTo && profileDataGridNode.numberOfCalls == queryNumber)
+                    profileDataGridNode._searchMatchedCallsColumn = true;
+                if (greaterThan && profileDataGridNode.numberOfCalls > queryNumber)
+                    profileDataGridNode._searchMatchedCallsColumn = true;
+                if (lessThan && profileDataGridNode.numberOfCalls < queryNumber)
+                    profileDataGridNode._searchMatchedCallsColumn = true;
+            }
+
+            if (profileDataGridNode.functionName.hasSubstring(query, true) || profileDataGridNode.url.hasSubstring(query, true))
+                profileDataGridNode._searchMatchedFunctionColumn = true;
+
+            if (profileDataGridNode._searchMatchedSelfColumn ||
+                profileDataGridNode._searchMatchedTotalColumn ||
+                profileDataGridNode._searchMatchedAverageColumn ||
+                profileDataGridNode._searchMatchedCallsColumn ||
+                profileDataGridNode._searchMatchedFunctionColumn)
+            {
+                profileDataGridNode.refresh();
+                return true;
+            }
+
+            return false;
+        }
+
+        var current = this.profileDataGridTree.children[0];
+
+        while (current) {
+            if (matchesQuery(current)) {
+                this._searchResults.push({ profileNode: current });
+            }
+
+            current = current.traverseNextNode(false, null, false);
+        }
+
+        finishedCallback(this, this._searchResults.length);
+    },
+
+    jumpToFirstSearchResult: function()
+    {
+        if (!this._searchResults || !this._searchResults.length)
+            return;
+        this._currentSearchResultIndex = 0;
+        this._jumpToSearchResult(this._currentSearchResultIndex);
+    },
+
+    jumpToLastSearchResult: function()
+    {
+        if (!this._searchResults || !this._searchResults.length)
+            return;
+        this._currentSearchResultIndex = (this._searchResults.length - 1);
+        this._jumpToSearchResult(this._currentSearchResultIndex);
+    },
+
+    jumpToNextSearchResult: function()
+    {
+        if (!this._searchResults || !this._searchResults.length)
+            return;
+        if (++this._currentSearchResultIndex >= this._searchResults.length)
+            this._currentSearchResultIndex = 0;
+        this._jumpToSearchResult(this._currentSearchResultIndex);
+    },
+
+    jumpToPreviousSearchResult: function()
+    {
+        if (!this._searchResults || !this._searchResults.length)
+            return;
+        if (--this._currentSearchResultIndex < 0)
+            this._currentSearchResultIndex = (this._searchResults.length - 1);
+        this._jumpToSearchResult(this._currentSearchResultIndex);
+    },
+
+    showingFirstSearchResult: function()
+    {
+        return (this._currentSearchResultIndex === 0);
+    },
+
+    showingLastSearchResult: function()
+    {
+        return (this._searchResults && this._currentSearchResultIndex === (this._searchResults.length - 1));
+    },
+
+    _jumpToSearchResult: function(index)
+    {
+        var searchResult = this._searchResults[index];
+        if (!searchResult)
+            return;
+
+        var profileNode = searchResult.profileNode;
+        profileNode.revealAndSelect();
+    },
+
+    _toggleBottomUpView: function(event)
+    {
+        this._showTreeBottomUpSetting.value = !this._showTreeBottomUpSetting.value;
+        this._showTreeBottomUpNavigationItem.activated = this._showTreeBottomUpSetting.value;
+        this._changeView();
+    },
+
+    _changeView: function()
+    {
+        if (!this.profile)
+            return;
+    
+        if (!this._showTreeBottomUpSetting.value) {
+            this.profileDataGridTree = this.topDownProfileDataGridTree;
+            this._sortProfile();
+            this._viewType.value = WebInspector.JavaScriptProfileView._TypeTree;
+        } else {
+            this.profileDataGridTree = this.bottomUpProfileDataGridTree;
+            this._sortProfile();
+            this._viewType.value = WebInspector.JavaScriptProfileView._TypeHeavy;
+        }
+
+        if (!this.currentQuery || !this._searchFinishedCallback || !this._searchResults)
+            return;
+
+        // The current search needs to be performed again. First negate out previous match
+        // count by calling the search finished callback with a negative number of matches.
+        // Then perform the search again the with same query and callback.
+        this._searchFinishedCallback(this, -this._searchResults.length);
+        this.performSearch(this.currentQuery, this._searchFinishedCallback);
+    },
+
+    toggleTimeDisplay: function(event)
+    {
+        WebInspector.ProfileView.prototype.toggleTimeDisplay.call(this, event);
+        this.showTimeAsPercent.value = !this.showTimeAsPercent.value;
+        this.refreshVisibleData();
+    },
+
+    _focusClicked: function(event)
+    {
+        if (!this.dataGrid.selectedNode)
+            return;
+
+        this.profileDataGridTree.focus(this.dataGrid.selectedNode);
+        this.refresh();
+        this.refreshVisibleData();
+    },
+
+    _excludeClicked: function(event)
+    {
+        var selectedNode = this.dataGrid.selectedNode
+
+        if (!selectedNode)
+            return;
+
+        selectedNode.deselect();
+
+        this.profileDataGridTree.exclude(selectedNode);
+        this.refresh();
+        this.refreshVisibleData();
+    },
+
+    _resetClicked: function(event)
+    {
+        this.profileDataGridTree.restore();
+        this.refresh();
+        this.refreshVisibleData();
+    },
+
+    _dataGridNodeSelected: function(node)
+    {
+        // FIXME: Update UI we have to focus on a data grid node or exclude it from the profile.
+    },
+
+    _dataGridNodeDeselected: function(node)
+    {
+        // FIXME: Update UI we have to focus on a data grid node or exclude it from the profile.
+    },
+
+    _sortData: function(event)
+    {
+        this._sortProfile(this.profile);
+    },
+
+    _sortProfile: function()
+    {
+        var sortAscending = this.dataGrid.sortOrder === "ascending";
+        var sortColumnIdentifier = this.dataGrid.sortColumnIdentifier;
+        var sortProperty = {
+                "average": "averageTime",
+                "self": "selfTime",
+                "total": "totalTime",
+                "calls": "numberOfCalls",
+                "function": "functionName"
+            }[sortColumnIdentifier];
+
+        this.profileDataGridTree.sort(WebInspector.ProfileDataGridTree.propertyComparator(sortProperty, sortAscending));
+
+        this.refresh();
+    },
+
+    _assignParentsInProfile: function()
+    {
+        var head = this.profile.head;
+        head.parent = null;
+        head.head = null;
+        var nodesToTraverse = [ { parent: head, children: head.children } ];
+        while (nodesToTraverse.length > 0) {
+            var pair = nodesToTraverse.shift();
+            var parent = pair.parent;
+            var children = pair.children;
+            var length = children.length;
+            for (var i = 0; i < length; ++i) {
+                children[i].head = head;
+                children[i].parent = parent;
+                if (children[i].children.length > 0)
+                    nodesToTraverse.push({ parent: children[i], children: children[i].children });
+            }
+        }
+    }
+}
+
+WebInspector.JavaScriptProfileView.prototype.__proto__ = WebInspector.ProfileView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/KeyboardShortcut.js b/Source/WebInspectorUI/UserInterface/KeyboardShortcut.js
new file mode 100644
index 000000000..b82a14afc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/KeyboardShortcut.js
@@ -0,0 +1,249 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.KeyboardShortcut = function(modifiers, key, callback, targetElement)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(key);
+    console.assert(!callback || typeof callback === "function");
+    console.assert(!targetElement || targetElement instanceof Element);
+
+    if (typeof key === "string") {
+        key = key[0].toUpperCase();
+        key = new WebInspector.Key(key.charCodeAt(0), key);
+    }
+
+    if (callback && !targetElement)
+        targetElement = document;
+
+    this._modifiers = modifiers || WebInspector.KeyboardShortcut.Modifier.None;
+    this._key = key;
+    this._targetElement = targetElement;
+    this._callback = callback;
+    this._disabled = false;
+    this._implicitlyPreventsDefault = true;
+
+    if (targetElement) {
+        var targetKeyboardShortcuts = targetElement._keyboardShortcuts;
+        if (!targetKeyboardShortcuts)
+            targetKeyboardShortcuts = targetElement._keyboardShortcuts = [];
+
+        targetKeyboardShortcuts.push(this);
+
+        if (!WebInspector.KeyboardShortcut._registeredKeyDownListener) {
+            WebInspector.KeyboardShortcut._registeredKeyDownListener = true;
+            window.addEventListener("keydown", WebInspector.KeyboardShortcut._handleKeyDown);
+        }
+    }
+};
+
+WebInspector.KeyboardShortcut._handleKeyDown = function(event)
+{
+    if (event.defaultPrevented)
+        return;
+
+    for (var targetElement = event.target; targetElement; targetElement = targetElement.parentNode) {
+        if (!targetElement._keyboardShortcuts)
+            continue;
+
+        for (var i = 0; i < targetElement._keyboardShortcuts.length; ++i) {
+            var keyboardShortcut = targetElement._keyboardShortcuts[i];
+            if (!keyboardShortcut.matchesEvent(event))
+                continue;
+
+            keyboardShortcut.callback(event, keyboardShortcut);
+
+            if (keyboardShortcut.implicitlyPreventsDefault)
+                event.preventDefault();
+
+            return;
+        }
+    }
+};
+
+WebInspector.KeyboardShortcut.Modifier = {
+    None: 0,
+    Shift: 1,
+    Control: 2,
+    Option: 4,
+    Command: 8
+};
+
+WebInspector.Key = function(keyCode, displayName)
+{
+    this._keyCode = keyCode;
+    this._displayName = displayName;
+};
+
+WebInspector.Key.prototype = {
+    get keyCode()
+    {
+        return this._keyCode;
+    },
+
+    get displayName()
+    {
+        return this._displayName;
+    },
+
+    toString: function()
+    {
+        return this._displayName;
+    }
+};
+
+WebInspector.KeyboardShortcut.Key = {
+    Backspace: new WebInspector.Key(8, "\u232b"),
+    Tab: new WebInspector.Key(9, "\u21e5"),
+    Enter: new WebInspector.Key(13, "\u21a9"),
+    Escape: new WebInspector.Key(27, "\u238b"),
+    Space: new WebInspector.Key(32, "Space"),
+    PageUp: new WebInspector.Key(33, "\u21de"),
+    PageDown: new WebInspector.Key(34, "\u21df"),
+    End: new WebInspector.Key(35, "\u2198"),
+    Home: new WebInspector.Key(36, "\u2196"),
+    Left: new WebInspector.Key(37, "\u2190"),
+    Up: new WebInspector.Key(38, "\u2191"),
+    Right: new WebInspector.Key(39, "\u2192"),
+    Down: new WebInspector.Key(40, "\u2193"),
+    Delete: new WebInspector.Key(46, "\u2326"),
+    Zero: new WebInspector.Key(48, "0"),
+    F1: new WebInspector.Key(112, "F1"),
+    F2: new WebInspector.Key(113, "F2"),
+    F3: new WebInspector.Key(114, "F3"),
+    F4: new WebInspector.Key(115, "F4"),
+    F5: new WebInspector.Key(116, "F5"),
+    F6: new WebInspector.Key(117, "F6"),
+    F7: new WebInspector.Key(118, "F7"),
+    F8: new WebInspector.Key(119, "F8"),
+    F9: new WebInspector.Key(120, "F9"),
+    F10: new WebInspector.Key(121, "F10"),
+    F11: new WebInspector.Key(122, "F11"),
+    F12: new WebInspector.Key(123, "F12"),
+    Semicolon: new WebInspector.Key(186, ";"),
+    Plus: new WebInspector.Key(187, "+"),
+    Comma: new WebInspector.Key(188, ","),
+    Minus: new WebInspector.Key(189, "-"),
+    Period: new WebInspector.Key(190, "."),
+    Slash: new WebInspector.Key(191, "/"),
+    Apostrophe: new WebInspector.Key(192, "`"),
+    SingleQuote: new WebInspector.Key(222, "\'")
+};
+
+WebInspector.KeyboardShortcut.prototype = {
+    constructor: WebInspector.KeyboardShortcut,
+
+    // Public
+
+    get modifiers()
+    {
+        return this._modifiers;
+    },
+
+    get key()
+    {
+        return this._key;
+    },
+
+    get displayName()
+    {
+        var result = "";
+
+        if (this._modifiers & WebInspector.KeyboardShortcut.Modifier.Control)
+            result += "\u2303";
+        if (this._modifiers & WebInspector.KeyboardShortcut.Modifier.Option)
+            result += "\u2325";
+        if (this._modifiers & WebInspector.KeyboardShortcut.Modifier.Shift)
+            result += "\u21e7";
+        if (this._modifiers & WebInspector.KeyboardShortcut.Modifier.Command)
+            result += "\u2318";
+
+        result += this._key.toString();
+
+        return result;
+    },
+
+    get callback()
+    {
+        return this._callback;
+    },
+
+    get disabled()
+    {
+        return this._disabled;
+    },
+
+    set disabled(disabled)
+    {
+        this._disabled = disabled || false;
+    },
+
+    get implicitlyPreventsDefault()
+    {
+        return this._implicitlyPreventsDefault;
+    },
+
+    set implicitlyPreventsDefault(implicitly)
+    {
+        this._implicitlyPreventsDefault = implicitly;
+    },
+
+    unbind: function()
+    {
+        this._disabled = true;
+
+        if (!this._targetElement)
+            return;
+
+        var targetKeyboardShortcuts = this._targetElement._keyboardShortcuts;
+        if (!targetKeyboardShortcuts)
+            return;
+
+        targetKeyboardShortcuts.remove(this);
+    },
+
+    matchesEvent: function(event)
+    {
+        if (this._disabled)
+            return false;
+
+        if (this._key.keyCode !== event.keyCode)
+            return false;
+
+        var eventModifiers = WebInspector.KeyboardShortcut.Modifier.None;
+        if (event.shiftKey)
+            eventModifiers |= WebInspector.KeyboardShortcut.Modifier.Shift;
+        if (event.ctrlKey)
+            eventModifiers |= WebInspector.KeyboardShortcut.Modifier.Control;
+        if (event.altKey)
+            eventModifiers |= WebInspector.KeyboardShortcut.Modifier.Option;
+        if (event.metaKey)
+            eventModifiers |= WebInspector.KeyboardShortcut.Modifier.Command;
+        return this._modifiers === eventModifiers;
+    }
+};
+
+WebInspector.KeyboardShortcut.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LayerTreeDataGrid.js b/Source/WebInspectorUI/UserInterface/LayerTreeDataGrid.js
new file mode 100644
index 000000000..1b25f5ab5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/LayerTreeDataGrid.js
@@ -0,0 +1,107 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LayerTreeDataGrid = function() {
+    WebInspector.DataGrid.call(this, {
+        name: { title: WebInspector.UIString("Node"), sortable: false },
+        paintCount: { title: WebInspector.UIString("Paints"), sortable: true, aligned: "right", width: "50px" },
+        memory: { title: WebInspector.UIString("Memory"), sortable: true, sort: "descending", aligned: "right", width: "70px" }
+    });
+};
+
+WebInspector.LayerTreeDataGrid.prototype = {
+    constructor: WebInspector.LayerTreeDataGrid,
+    
+    insertChild: function(child)
+    {
+        WebInspector.DataGrid.prototype.insertChild.call(this, child);
+
+        this._updateChildren();
+    },
+    
+    removeChild: function(child)
+    {
+        WebInspector.DataGrid.prototype.removeChild.call(this, child);
+
+        this._updateChildren();
+    },
+    
+    setChildren: function(children)
+    {
+        this._suspendLayout = true;
+
+        var removedChildren = this.children.filter(function(child) {
+            return !children.contains(child);
+        });
+
+        while (removedChildren.length)
+            this.removeChild(removedChildren.pop());
+
+        children.forEach(function(child) {
+            if (child.parent !== this)
+                this.appendChild(child);
+        }.bind(this));
+
+        this._suspendLayout = false;
+        
+        this.children = children;
+        this._updateChildren();
+    },
+    
+    _updateChildren: function()
+    {
+        if (this._suspendLayout)
+            return;
+
+        // Iterate through nodes by DOM order first so we can establish
+        // the DOM index.
+        var elements = this.dataTableBody.rows;
+        for (var i = 0, count = elements.length - 1; i < count; ++i)
+            elements[i]._dataGridNode._domIndex = i;
+
+        // Now iterate through children to set up their sibling relationship
+        // and update the element style to offset the position of the node
+        // to match its position in the children list vs. DOM order.
+        var children = this.children;
+        for (var i = 0, count = children.length; i < count; ++i) {
+            var child = children[i];
+            child.previousSibling = i > 0 ? children[i - 1] : null;
+            child.nextSibling = i + 1 < count ? children[i + 1] : null;
+            
+            var ty = (i - child._domIndex) * 100;
+            child.element.style.webkitTransform = "translateY(" + ty + "%)";
+        }
+
+        this.hasChildren = this.children.length > 0;
+    },
+    
+    _recalculateSiblings: function(myIndex)
+    {
+        // Overriding default implementation to do nothing at all
+        // since we're setting sibling relationship in _updateChildren.
+    }
+};
+
+WebInspector.LayerTreeDataGrid.prototype.__proto__ = WebInspector.DataGrid.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LayerTreeDataGridNode.js b/Source/WebInspectorUI/UserInterface/LayerTreeDataGridNode.js
new file mode 100644
index 000000000..82538ecf7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/LayerTreeDataGridNode.js
@@ -0,0 +1,168 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LayerTreeDataGridNode = function(layer)
+{
+    WebInspector.DataGridNode.call(this);
+
+    this._outlets = {};
+
+    this.layer = layer;
+};
+
+WebInspector.LayerTreeDataGridNode.prototype = {
+    constructor: WebInspector.DataGridNode,
+
+    // DataGridNode Overrides.
+
+    createCells: function()
+    {
+        WebInspector.DataGridNode.prototype.createCells.call(this);
+
+        this._cellsWereCreated = true;
+    },
+
+    createCellContent: function(columnIdentifier, cell)
+    {
+        var cell = columnIdentifier === "name" ? this._makeNameCell() : this._makeOutlet(columnIdentifier, document.createTextNode());
+        this._updateCell(columnIdentifier);
+        return cell;
+    },
+
+    // Public
+
+    get layer()
+    {
+        return this._layer;
+    },
+
+    set layer(layer)
+    {
+        this._layer = layer;
+
+        var domNode = WebInspector.domTreeManager.nodeForId(layer.nodeId);
+
+        this.data = {
+            name: domNode ? WebInspector.displayNameForNode(domNode) : WebInspector.UIString("Unknown node"),
+            paintCount: layer.paintCount || "\u2014",
+            memory: Number.bytesToString(layer.memory || 0)
+        };
+    },
+
+    get data()
+    {
+        return this._data;
+    },
+
+    set data(data)
+    {
+        Object.keys(data).forEach(function(columnIdentifier) {
+            if (this._data[columnIdentifier] === data[columnIdentifier])
+                return;
+
+            this._data[columnIdentifier] = data[columnIdentifier];
+            if (this._cellsWereCreated)
+                this._updateCell(columnIdentifier);
+        }, this);
+    },
+
+    // Private
+
+    _makeOutlet: function(name, element)
+    {
+        return this._outlets[name] = element;
+    },
+
+    _makeNameCell: function()
+    {
+        var fragment = document.createDocumentFragment();
+
+        fragment.appendChild(document.createElement("img")).className = "icon";
+
+        var label = this._makeOutlet("label", fragment.appendChild(document.createElement("div")));
+        label.className = "label";
+    
+        var nameLabel = this._makeOutlet("nameLabel", label.appendChild(document.createElement("span")));
+        nameLabel.className = "name";
+
+        var pseudoLabel = this._makeOutlet("pseudoLabel", document.createElement("span"));
+        pseudoLabel.className = "pseudo-element";
+
+        var reflectionLabel = this._makeOutlet("reflectionLabel", document.createElement("span"));
+        reflectionLabel.className = "reflection";
+        reflectionLabel.textContent = " \u2014 " + WebInspector.UIString("Reflection");
+
+        var goToButton = this._makeOutlet("goToButton", fragment.appendChild(WebInspector.createGoToArrowButton()));
+        goToButton.addEventListener("click", this._goToArrowWasClicked.bind(this), false);
+        
+        return fragment;
+    },
+
+    _updateCell: function(columnIdentifier)
+    {
+        var data = this._data[columnIdentifier];
+        if (columnIdentifier === "name")
+            this._updateNameCellData(data);
+        else
+            this._outlets[columnIdentifier].textContent = data;
+    },
+
+    _updateNameCellData: function(data)
+    {
+        var layer = this._layer;
+        var label = this._outlets.label;
+
+        this._outlets.nameLabel.textContent = data;
+
+        if (layer.pseudoElement)
+            label.appendChild(this._outlets.pseudoLabel).textContent = "::" + layer.pseudoElement;
+        else if (this._outlets.pseudoLabel.parentNode)
+            label.removeChild(this._outlets.pseudoLabel);
+
+        if (layer.isReflection)
+            label.appendChild(this._outlets.reflectionLabel);
+        else if (this._outlets.reflectionLabel.parentNode)
+            label.removeChild(this._outlets.reflectionLabel);
+
+        if (WebInspector.domTreeManager.nodeForId(layer.nodeId))
+            label.parentNode.appendChild(this._outlets.goToButton);
+        else if (this._outlets.goToButton.parentNode)
+            label.parentNode.removeChild(this._outlets.goToButton);
+
+        var element = this.element;
+        if (layer.isReflection)
+            element.classList.add("reflection");
+        else if (layer.pseudoElement)
+            element.classList.add("pseudo-element");
+    },
+
+    _goToArrowWasClicked: function()
+    {
+        var domNode = WebInspector.domTreeManager.nodeForId(this._layer.nodeId);
+        WebInspector.resourceSidebarPanel.showMainFrameDOMTree(domNode, true);
+    }
+};
+
+WebInspector.LayerTreeDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LayerTreeManager.js b/Source/WebInspectorUI/UserInterface/LayerTreeManager.js
new file mode 100644
index 000000000..ac22f4e7f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/LayerTreeManager.js
@@ -0,0 +1,160 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LayerTreeManager = function() {
+    WebInspector.Object.call(this);
+
+    this._supported = !!window.LayerTreeAgent;
+
+    if (this._supported)
+        LayerTreeAgent.enable();
+};
+
+WebInspector.LayerTreeManager.Event = {
+    LayerTreeDidChange: "layer-tree-did-change"
+};
+
+WebInspector.LayerTreeManager.prototype = {
+    constructor: WebInspector.LayerTreeManager,
+
+    // Public
+
+    get supported()
+    {
+        return this._supported;
+    },
+
+    layerTreeMutations: function(previousLayers, newLayers)
+    {
+        console.assert(this.supported);
+
+        if (isEmptyObject(previousLayers)) {
+            return {
+                preserved: [],
+                additions: newLayers,
+                removals: []
+            };
+        }
+
+        function nodeIdForLayer(layer)
+        {
+            return layer.isGeneratedContent ? layer.pseudoElementId : layer.nodeId;
+        }
+
+        var layerIdsInPreviousLayers = [];
+        var nodeIdsInPreviousLayers = [];
+        var nodeIdsForReflectionsInPreviousLayers = [];
+
+        previousLayers.forEach(function(layer) {
+            layerIdsInPreviousLayers.push(layer.layerId);
+
+            var nodeId = nodeIdForLayer(layer);
+            if (!nodeId)
+                return;
+
+            if (layer.isReflection)
+                nodeIdsForReflectionsInPreviousLayers.push(nodeId);
+            else
+                nodeIdsInPreviousLayers.push(nodeId);
+        });
+
+        var preserved = [];
+        var additions = [];
+
+        var layerIdsInNewLayers = [];
+        var nodeIdsInNewLayers = [];
+        var nodeIdsForReflectionsInNewLayers = [];
+
+        newLayers.forEach(function(layer) {
+            layerIdsInNewLayers.push(layer.layerId);
+
+            var existed = layerIdsInPreviousLayers.contains(layer.layerId);
+
+            var nodeId = nodeIdForLayer(layer);
+            if (!nodeId)
+                return;
+
+            if (layer.isReflection) {
+                nodeIdsForReflectionsInNewLayers.push(nodeId);
+                existed = existed || nodeIdsForReflectionsInPreviousLayers.contains(nodeId);
+            } else {
+                nodeIdsInNewLayers.push(nodeId);
+                existed = existed || nodeIdsInPreviousLayers.contains(nodeId);
+            }
+
+            if (existed)
+                preserved.push(layer);
+            else
+                additions.push(layer);
+        });
+
+        var removals = previousLayers.filter(function(layer) {
+            var nodeId = nodeIdForLayer(layer);
+
+            if (layer.isReflection)
+                return !nodeIdsForReflectionsInNewLayers.contains(nodeId);
+            else
+                return !nodeIdsInNewLayers.contains(nodeId) && !layerIdsInNewLayers.contains(layer.layerId);
+        });
+
+        return {
+            preserved: preserved,
+            additions: additions,
+            removals: removals
+        };
+    },
+
+    layersForNode: function(node, callback)
+    {
+        console.assert(this.supported);
+
+        LayerTreeAgent.layersForNode(node.id, function(error, layers) {
+            if (error || isEmptyObject(layers)) {
+                callback(null, []);
+                return;
+            }
+
+            var firstLayer = layers[0];
+            var layerForNode = firstLayer.nodeId === node.id && !firstLayer.isGeneratedContent ? layers.shift() : null;
+            callback(layerForNode, layers);
+        }.bind(this));
+    },
+
+    reasonsForCompositingLayer: function(layer, callback)
+    {
+        console.assert(this.supported);
+
+        LayerTreeAgent.reasonsForCompositingLayer(layer.layerId, function(error, reasons) {
+            callback(error ? 0 : reasons);
+        });
+    },
+
+    layerTreeDidChange: function()
+    {
+        this.dispatchEventToListeners(WebInspector.LayerTreeManager.Event.LayerTreeDidChange);
+    }
+};
+
+WebInspector.LayerTreeManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LayerTreeObserver.js b/Source/WebInspectorUI/UserInterface/LayerTreeObserver.js
new file mode 100644
index 000000000..58fa4adc2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/LayerTreeObserver.js
@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LayerTreeObserver = function()
+{
+    WebInspector.Object.call(this);
+};
+
+WebInspector.LayerTreeObserver.prototype = {
+    constructor: WebInspector.LayerTreeObserver,
+
+    // Events defined by the "LayerTree" domain (see WebCore/inspector/Inspector.json).
+
+    layerTreeDidChange: function()
+    {
+        if (WebInspector.layerTreeManager.supported)
+            WebInspector.layerTreeManager.layerTreeDidChange();
+    }
+};
+
+WebInspector.LayerTreeObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.css b/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.css
new file mode 100644
index 000000000..ad8db32d8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.css
@@ -0,0 +1,222 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+
+/* We use an internal container to act as a vertical stack. */
+
+.layer-tree.panel .box-container {
+    height: 100%;
+    /* Let it stack its content as vertical boxes. */
+    display: -webkit-flex;
+    -webkit-flex-direction: column;
+}
+
+/* Hide the collapsed arrow from sections. */
+
+.layer-tree.panel .details-section > .header::before {
+    /* Don't show the collpased arrow. */
+    display: none;
+}
+
+.layer-tree.panel .details-section > .header {
+    /* Add a little padding since there's no arrow to show. */
+    padding-left: 4px;
+    /* Turn off mouse events so we can't click to toggle section. */
+    pointer-events: none;
+}
+
+.layer-tree.panel .details-section > .header > label {
+    /* Always show the options box. */
+    display: block !important;
+    /* Turn on events just for the <label> and <input>. */
+    pointer-events: all;
+}
+
+/* Customizing the DataGrid. */
+
+.layer-tree.panel .details-section.layer-children {
+    position: relative;
+    /* Use all available vertical space. */
+    -webkit-flex: 1;
+    /* Let children stack vertically. */
+    display: -webkit-flex;
+    -webkit-flex-direction: column;
+}
+
+.layer-tree.panel .details-section.layer-children > .content {
+    position: relative;
+    display: block;
+    /* Use all available vertical space. */
+    -webkit-flex: 1;
+}
+
+.layer-tree.panel .details-section.layer-children .group {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.layer-tree.panel .data-grid {
+    position: relative;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    /* Turn off the default borders, we want to snap to edges. */
+    border: none;
+}
+
+.layer-tree.panel .data-grid table.data {
+    background-size: 100% 44px;
+}
+
+.layer-tree.panel .data-container {
+    position: absolute;
+    /* Leave room for the data grid header. */
+    top: 16px;
+    /* Use all remaining vertical space in the container. */
+    bottom: 0;
+    /* Let the inline table content scroll, independently of the header. */
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.layer-tree.panel .data-container tr {
+    height: 22px;
+}
+
+.layer-tree.panel .data-container td > div {
+    display: -webkit-flex;
+    width: 100%;
+    height: 100%;
+    -webkit-align-items: center;
+    -webkit-justify-content: flex-end;
+}
+
+/* Customizing the DataGrid "node" cell. */
+
+.layer-tree.panel .data-container .name-column {
+    padding-right: 0;
+}
+
+.layer-tree.panel .data-container .name-column .icon {
+    vertical-align: top;
+    width: 16px;
+    height: 16px;
+    content: url(Images/DOMElement.pdf);
+}
+
+.layer-tree.panel .data-container tr.reflection .name-column .icon {
+    content: url(Images/Reflection.pdf);
+}
+
+.layer-tree.panel .data-container tr.pseudo-element .name-column .icon {
+    content: url(Images/PseudoElement.pdf);
+}
+
+.layer-tree.panel .data-container .name-column .label {
+    -webkit-flex: 1;
+    padding: 0 4px;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.layer-tree.panel .data-container tr:hover .name-column .label {
+    padding-right: 0;
+}
+
+.layer-tree.panel .data-container .name-column .pseudo-element,
+.layer-tree.panel .data-container .name-column .reflection {
+    color: rgb(128, 128, 128);
+}
+
+.layer-tree.panel .data-container tr.selected .name-column .pseudo-element,
+.layer-tree.panel .data-container tr.selected .name-column .reflection {
+    color: rgba(255, 255, 255, 0.75);
+}
+
+.layer-tree.panel .data-container .go-to-arrow {
+    display: none;
+}
+
+.layer-tree.panel .data-container tr:hover .go-to-arrow {
+    display: block;
+}
+
+/* Bottom bar */
+
+.layer-tree.panel .bottom-bar {
+    position: relative;
+    height: 22px;
+    /* Let it stack its content as horizontal boxes. */
+    display: -webkit-flex;
+}
+
+.layer-tree.panel .bottom-bar > div {
+    padding: 4px;
+    box-sizing: border-box;
+
+    font-family: 'Lucida Grande', sans-serif;
+    font-size: 11px;
+    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+
+    /* Ensure any overflowing text is trimmed. */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    /* Let all boxes have the same width. */
+    display: -webkit-flex;
+    -webkit-flex: 1;
+}
+
+.layer-tree.panel .layers-memory-label {
+    -webkit-justify-content: flex-end;
+}
+
+/* popover */
+
+.layer-tree-popover {
+    font-family: 'Lucida Grande', sans-serif;
+    font-size: 11px;
+    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+
+    padding: 5px;
+}
+
+.layer-tree-popover p {
+    margin: 0;
+}
+
+.layer-tree-popover ul {
+    list-style-type: none;
+    margin: 10px 0 0 0;
+    padding-left: 10px;
+}
+
+.layer-tree-popover li {
+    line-height: 1.3em;
+}
diff --git a/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.js b/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.js
new file mode 100644
index 000000000..2189d1acd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.js
@@ -0,0 +1,437 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LayerTreeSidebarPanel = function() {
+    WebInspector.DOMDetailsSidebarPanel.call(this, "layer-tree", WebInspector.UIString("Layers"), WebInspector.UIString("Layer"), "Images/NavigationItemLayers.pdf", "3");
+
+    this._dataGridNodesByLayerId = {};
+
+    this.element.classList.add(WebInspector.LayerTreeSidebarPanel.StyleClassName);
+
+    WebInspector.showShadowDOMSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
+
+    window.addEventListener("resize", this._windowResized.bind(this));
+
+    // Add a container that will host all sections as a vertical stack.
+    this._container = this.element.appendChild(document.createElement("div"));
+    this._container.className = "box-container";
+
+    this._buildLayerInfoSection();
+    this._buildDataGridSection();
+    this._buildBottomBar();
+};
+
+WebInspector.LayerTreeSidebarPanel.StyleClassName = "layer-tree";
+
+WebInspector.LayerTreeSidebarPanel.prototype = {
+    constructor: WebInspector.LayerTreeSidebarPanel,
+
+    // DetailsSidebarPanel Overrides.
+
+    shown: function()
+    {
+        WebInspector.layerTreeManager.addEventListener(WebInspector.LayerTreeManager.Event.LayerTreeDidChange, this._layerTreeDidChange, this);
+
+        console.assert(this.parentSidebar);
+
+        this.needsRefresh();
+
+        WebInspector.DOMDetailsSidebarPanel.prototype.shown.call(this);
+    },
+
+    hidden: function()
+    {
+        WebInspector.layerTreeManager.removeEventListener(WebInspector.LayerTreeManager.Event.LayerTreeDidChange, this._layerTreeDidChange, this);
+
+        WebInspector.DOMDetailsSidebarPanel.prototype.hidden.call(this);
+    },
+
+    refresh: function()
+    {
+        if (!this.domNode)
+            return;
+
+        WebInspector.layerTreeManager.layersForNode(this.domNode, function(layerForNode, childLayers) {
+            this._unfilteredChildLayers = childLayers;
+            this._updateDisplayWithLayers(layerForNode, childLayers);
+        }.bind(this));
+    },
+
+    // DOMDetailsSidebarPanel Overrides
+
+    supportsDOMNode: function(nodeToInspect)
+    {
+        return WebInspector.layerTreeManager.supported && nodeToInspect.nodeType() === Node.ELEMENT_NODE;
+    },
+
+    // Private
+
+    _layerTreeDidChange: function(event)
+    {
+        this.needsRefresh();
+    },
+
+    _showShadowDOMSettingChanged: function(event)
+    {
+        if (this.selected)
+            this._updateDisplayWithLayers(this._layerForNode, this._unfilteredChildLayers);
+    },
+
+    _windowResized: function(event)
+    {
+        if (this._popover && this._popover.visible)
+            this._updatePopoverForSelectedNode();
+    },
+
+    _buildLayerInfoSection: function()
+    {
+        var rows = this._layerInfoRows = {};
+        var rowsArray = [];
+
+        rowsArray.push(rows["Width"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Width")));
+        rowsArray.push(rows["Height"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Height")));
+        rowsArray.push(rows["Paints"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Paints")));
+        rowsArray.push(rows["Memory"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Memory")));
+
+        this._layerInfoGroup = new WebInspector.DetailsSectionGroup(rowsArray);
+
+        var emptyRow = new WebInspector.DetailsSectionRow(WebInspector.UIString("No Layer Available"));
+        emptyRow.showEmptyMessage();
+        this._noLayerInformationGroup = new WebInspector.DetailsSectionGroup([emptyRow]);
+
+        this._layerInfoSection = new WebInspector.DetailsSection("layer-info", WebInspector.UIString("Layer Info"), [this._noLayerInformationGroup]);
+
+        this._container.appendChild(this._layerInfoSection.element);
+    },
+
+    _buildDataGridSection: function()
+    {
+        this._dataGrid = new WebInspector.LayerTreeDataGrid;
+
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortDataGrid, this);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._selectedDataGridNodeChanged, this);
+
+        var element = this._dataGrid.element;
+        element.addEventListener("focus", this._dataGridGainedFocus.bind(this), false);
+        element.addEventListener("blur", this._dataGridLostFocus.bind(this), false);
+        element.addEventListener("click", this._dataGridWasClicked.bind(this), false);
+
+        this._childLayersRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Child Layers"));
+        var group = new WebInspector.DetailsSectionGroup([this._childLayersRow]);
+        var section = new WebInspector.DetailsSection("layer-children", WebInspector.UIString("Child Layers"), [group], null, true);
+
+        // Display it in the container with a class name so we can easily style it differently to other sections,
+        // this specific section is meant to scale to fill the space available vertically.
+        var element = this._container.appendChild(section.element);
+        element.classList.add(section.identifier);
+    },
+
+    _buildBottomBar: function()
+    {
+        var bottomBar = this._container.appendChild(document.createElement("div"));
+        bottomBar.className = "bottom-bar";
+
+        this._layersCountLabel = bottomBar.appendChild(document.createElement("div"));
+        this._layersCountLabel.className = "layers-count-label";
+
+        this._layersMemoryLabel = bottomBar.appendChild(document.createElement("div"));
+        this._layersMemoryLabel.className = "layers-memory-label";
+    },
+    
+    _sortDataGrid: function()
+    {
+        var dataGrid = this._dataGrid;
+
+        var nodes = dataGrid.children.slice();
+        var sortColumnIdentifier = dataGrid.sortColumnIdentifier;
+        var sortDirection = dataGrid.sortOrder === "ascending" ? 1 : -1;
+
+        function comparator(a, b)
+        {
+            var item1 = a.layer[sortColumnIdentifier] || 0;
+            var item2 = b.layer[sortColumnIdentifier] || 0;
+            return sortDirection * (item1 - item2);
+        };
+
+        nodes.sort(comparator);
+
+        dataGrid.setChildren(nodes);
+    },
+
+    _selectedDataGridNodeChanged: function()
+    {
+        if (this._dataGrid.selectedNode) {
+            this._highlightSelectedNode();
+            this._showPopoverForSelectedNode();
+        } else {
+            WebInspector.domTreeManager.hideDOMNodeHighlight();
+            this._hidePopover();
+        }
+    },
+
+    _dataGridGainedFocus: function(event)
+    {
+        this._highlightSelectedNode();
+        this._showPopoverForSelectedNode();
+    },
+
+    _dataGridLostFocus: function(event)
+    {
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+        this._hidePopover();
+    },
+
+    _dataGridWasClicked: function(event)
+    {
+        if (this._dataGrid.selectedNode && event.target.parentNode.classList.contains("filler"))
+            this._dataGrid.selectedNode.deselect();
+    },
+
+    _highlightSelectedNode: function()
+    {
+        var dataGridNode = this._dataGrid.selectedNode;
+        if (!dataGridNode)
+            return;
+
+        var layer = dataGridNode.layer;
+        if (layer.isGeneratedContent || layer.isReflection || layer.isAnonymous)
+            WebInspector.domTreeManager.highlightRect(layer.bounds, true);
+        else
+            WebInspector.domTreeManager.highlightDOMNode(layer.nodeId);
+    },
+
+    _updateDisplayWithLayers: function(layerForNode, childLayers)
+    {
+        if (!WebInspector.showShadowDOMSetting.value) {
+            childLayers = childLayers.filter(function(layer) {
+                return !layer.isInShadowTree;
+            });
+        }
+
+        this._updateLayerInfoSection(layerForNode);
+        this._updateDataGrid(layerForNode, childLayers);
+        this._updateMetrics(layerForNode, childLayers);
+
+        this._layerForNode = layerForNode;
+        this._childLayers = childLayers;
+    },
+
+    _updateLayerInfoSection: function(layer)
+    {
+        const emDash = "\u2014";
+
+        this._layerInfoSection.groups = layer ? [this._layerInfoGroup] : [this._noLayerInformationGroup];
+
+        if (!layer)
+            return;
+
+        this._layerInfoRows["Memory"].value = Number.bytesToString(layer.memory);
+        this._layerInfoRows["Width"].value = layer.compositedBounds.width + "px";
+        this._layerInfoRows["Height"].value = layer.compositedBounds.height + "px";
+        this._layerInfoRows["Paints"].value = layer.paintCount + "";
+    },
+
+    _updateDataGrid: function(layerForNode, childLayers)
+    {
+        var dataGrid = this._dataGrid;
+
+        var mutations = WebInspector.layerTreeManager.layerTreeMutations(this._childLayers, childLayers);
+
+        mutations.removals.forEach(function(layer) {
+            var node = this._dataGridNodesByLayerId[layer.layerId];
+            if (node) {
+                dataGrid.removeChild(node);
+                delete this._dataGridNodesByLayerId[layer.layerId];
+            }
+        }.bind(this));
+
+        mutations.additions.forEach(function(layer) {
+            var node = this._dataGridNodeForLayer(layer);
+            if (node)
+                dataGrid.appendChild(node);
+        }.bind(this));
+
+        mutations.preserved.forEach(function(layer) {
+            var node = this._dataGridNodesByLayerId[layer.layerId];
+            if (node)
+                node.layer = layer;
+        }.bind(this));
+
+        this._sortDataGrid();
+
+        this._childLayersRow.dataGrid = !isEmptyObject(childLayers) ? this._dataGrid : null;
+    },
+    
+    _dataGridNodeForLayer: function(layer)
+    {
+        var node = new WebInspector.LayerTreeDataGridNode(layer);
+
+        this._dataGridNodesByLayerId[layer.layerId] = node;
+
+        return node;
+    },
+    
+    _updateMetrics: function(layerForNode, childLayers)
+    {
+        var layerCount = 0;
+        var totalMemory = 0;
+
+        if (layerForNode) {
+            layerCount++;
+            totalMemory += layerForNode.memory || 0;
+        }
+
+        childLayers.forEach(function(layer) {
+            layerCount++;
+            totalMemory += layer.memory || 0;
+        });
+
+        this._layersCountLabel.textContent = WebInspector.UIString("Layer count: %d").format(layerCount);
+        this._layersMemoryLabel.textContent = WebInspector.UIString("Memory: %s").format(Number.bytesToString(totalMemory));
+    },
+
+    _showPopoverForSelectedNode: function()
+    {
+        var dataGridNode = this._dataGrid.selectedNode;
+        if (!dataGridNode)
+            return;
+
+        this._contentForPopover(dataGridNode.layer, function(content) {
+            if (dataGridNode === this._dataGrid.selectedNode)
+                this._updatePopoverForSelectedNode(content);
+        }.bind(this));
+    },
+
+    _updatePopoverForSelectedNode: function(content)
+    {
+        var dataGridNode = this._dataGrid.selectedNode;
+        if (!dataGridNode)
+            return;
+
+        var popover = this._popover;
+        if (!popover)
+            popover = this._popover = new WebInspector.Popover;
+
+        var targetFrame = WebInspector.Rect.rectFromClientRect(dataGridNode.element.getBoundingClientRect());
+        const padding = 2;
+        targetFrame.origin.x -= padding;
+        targetFrame.origin.y -= padding;
+        targetFrame.size.width += padding * 2;
+        targetFrame.size.height += padding * 2;
+
+        if (content)
+            popover.content = content;
+
+        popover.present(targetFrame, [WebInspector.RectEdge.MIN_X]);
+    },
+
+    _hidePopover: function()
+    {
+        if (this._popover)
+            this._popover.dismiss();
+    },
+
+    _contentForPopover: function(layer, callback)
+    {
+        var content = document.createElement("div");
+        content.className = "layer-tree-popover";
+        
+        content.appendChild(document.createElement("p")).textContent = WebInspector.UIString("Reasons for compositing:");
+
+        var list = content.appendChild(document.createElement("ul"));
+
+        WebInspector.layerTreeManager.reasonsForCompositingLayer(layer, function(compositingReasons) {
+            if (isEmptyObject(compositingReasons)) {
+                callback(content);
+                return;
+            }
+
+            this._populateListOfCompositingReasons(list, compositingReasons);
+
+            callback(content);
+        }.bind(this));
+
+        return content;
+    },
+
+    _populateListOfCompositingReasons: function(list, compositingReasons)
+    {
+        function addReason(reason)
+        {
+            list.appendChild(document.createElement("li")).textContent = reason;
+        }
+
+        if (compositingReasons.transform3D)
+            addReason(WebInspector.UIString("Element has a 3D transform"));
+        if (compositingReasons.video)
+            addReason(WebInspector.UIString("Element is <video>"));
+        if (compositingReasons.canvas)
+            addReason(WebInspector.UIString("Element is <canvas>"));
+        if (compositingReasons.plugin)
+            addReason(WebInspector.UIString("Element is a plug-in"));
+        if (compositingReasons.iFrame)
+            addReason(WebInspector.UIString("Element is <iframe>"));
+        if (compositingReasons.backfaceVisibilityHidden)
+            addReason(WebInspector.UIString("Element has “backface-visibility: hidden� style"));
+        if (compositingReasons.clipsCompositingDescendants)
+            addReason(WebInspector.UIString("Element clips compositing descendants"));
+        if (compositingReasons.animation)
+            addReason(WebInspector.UIString("Element is animated"));
+        if (compositingReasons.filters)
+            addReason(WebInspector.UIString("Element has CSS filters applied"));
+        if (compositingReasons.positionFixed)
+            addReason(WebInspector.UIString("Element has “position: fixed� style"));
+        if (compositingReasons.positionSticky)
+            addReason(WebInspector.UIString("Element has “position: sticky� style"));
+        if (compositingReasons.overflowScrollingTouch)
+            addReason(WebInspector.UIString("Element has “-webkit-overflow-scrolling: touch� style"));
+        if (compositingReasons.stacking)
+            addReason(WebInspector.UIString("Element establishes a stacking context"));
+        if (compositingReasons.overlap)
+            addReason(WebInspector.UIString("Element overlaps other compositing element"));
+        if (compositingReasons.negativeZIndexChildren)
+            addReason(WebInspector.UIString("Element has children with a negative z-index"));
+        if (compositingReasons.transformWithCompositedDescendants)
+            addReason(WebInspector.UIString("Element has a 2D transform and composited descendants"));
+        if (compositingReasons.opacityWithCompositedDescendants)
+            addReason(WebInspector.UIString("Element has opacity applied and composited descendants"));
+        if (compositingReasons.maskWithCompositedDescendants)
+            addReason(WebInspector.UIString("Element is masked and composited descendants"));
+        if (compositingReasons.reflectionWithCompositedDescendants)
+            addReason(WebInspector.UIString("Element has a reflection and composited descendants"));
+        if (compositingReasons.filterWithCompositedDescendants)
+            addReason(WebInspector.UIString("Element has CSS filters applied and composited descendants"));
+        if (compositingReasons.blendingWithCompositedDescendants)
+            addReason(WebInspector.UIString("Element has CSS blending applied and composited descendants"));
+        if (compositingReasons.perspective)
+            addReason(WebInspector.UIString("Element has perspective applied"));
+        if (compositingReasons.preserve3D)
+            addReason(WebInspector.UIString("Element has “transform-style: preserve-3d� style"));
+        if (compositingReasons.root)
+            addReason(WebInspector.UIString("Element is the root element"));
+    }
+};
+
+WebInspector.LayerTreeSidebarPanel.prototype.__proto__ = WebInspector.DOMDetailsSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGrid.js b/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGrid.js
new file mode 100644
index 000000000..f8343e7ff
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGrid.js
@@ -0,0 +1,97 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LayoutTimelineDataGrid = function(columns)
+{
+    WebInspector.TimelineDataGrid.call(this, columns);
+
+    this._showingHighlight = false;
+
+    this.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._layoutDataGridSelectedNodeChanged, this);
+}
+
+WebInspector.LayoutTimelineDataGrid.prototype = {
+    constructor: WebInspector.LayoutTimelineDataGrid,
+
+    // Protected
+
+    reset: function()
+    {
+        WebInspector.TimelineDataGrid.prototype.reset.call(this);
+
+        this._hideHighlightIfNeeded();
+    },
+
+    callFramePopoverAnchorElement: function()
+    {
+        return this.selectedNode.elementWithColumnIdentifier("initiatorCallFrame");
+    },
+
+    hidden: function()
+    {
+        WebInspector.TimelineDataGrid.prototype.hidden.call(this);
+
+        this._hideHighlightIfNeeded();
+    },
+
+    // Private
+
+    _layoutDataGridSelectedNodeChanged: function(event)
+    {
+        if (!this.selectedNode) {
+            this._hideHighlightIfNeeded();
+            return;
+        }
+
+        var record = this.selectedNode.record;
+        const contentColor = {r: 111, g: 168, b: 220, a: 0.66};
+        const outlineColor = {r: 255, g: 229, b: 153, a: 0.66};
+
+        var quad = record.quad;
+        if (quad && DOMAgent.highlightQuad) {
+            DOMAgent.highlightQuad(quad.toProtocol(), contentColor, outlineColor);
+            this._showingHighlight = true;
+            return;
+        }
+
+        // COMPATIBILITY (iOS 6): iOS 6 included Rect information instead of Quad information. Fallback to highlighting the rect.
+        var rect = record.rect;
+        if (rect) {
+            DOMAgent.highlightRect(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height, contentColor, outlineColor);
+            this._showingHighlight = true;
+            return;
+        }
+    },
+
+    _hideHighlightIfNeeded: function()
+    {
+        if (this._showingHighlight) {
+            DOMAgent.hideHighlight();
+            this._showingHighlight = false;
+        }
+    }
+}
+
+WebInspector.LayoutTimelineDataGrid.prototype.__proto__ = WebInspector.TimelineDataGrid.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGridNode.js
new file mode 100644
index 000000000..89f841aa2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGridNode.js
@@ -0,0 +1,152 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LayoutTimelineDataGridNode = function(layoutTimelineRecord, baseStartTime)
+{
+    WebInspector.DataGridNode.call(this, {});
+
+    this._record = layoutTimelineRecord;
+    this._baseStartTime = baseStartTime || 0;
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.LayoutTimelineDataGridNode);
+
+WebInspector.LayoutTimelineDataGridNode.IconStyleClassName = "icon";
+WebInspector.LayoutTimelineDataGridNode.SubtitleStyleClassName = "subtitle";
+
+WebInspector.LayoutTimelineDataGridNode.prototype = {
+    constructor: WebInspector.LayoutTimelineDataGridNode,
+
+    // Public
+
+    get record()
+    {
+        return this._record;
+    },
+
+    get data()
+    {
+        return this._record;
+    },
+
+    createCellContent: function(columnIdentifier, cell)
+    {
+        const emptyValuePlaceholderString = "\u2014";
+        var value = this.data[columnIdentifier];
+
+        switch (columnIdentifier) {
+        case "eventType":
+            return WebInspector.LayoutTimelineRecord.EventType.displayName(value);
+
+        case "initiatorCallFrame":
+            var callFrame = value;
+            if (!callFrame)
+                return emptyValuePlaceholderString;
+
+            var isAnonymousFunction = false;
+            var functionName = callFrame.functionName;
+            if (!functionName) {
+                functionName = WebInspector.UIString("(anonymous function)");
+                isAnonymousFunction = true;
+            }
+
+            cell.classList.add(WebInspector.CallFrameTreeElement.FunctionIconStyleClassName);
+
+            var fragment = document.createDocumentFragment();
+
+            if (callFrame.sourceCodeLocation && callFrame.sourceCodeLocation.sourceCode) {
+
+                // Give the whole cell a tooltip and keep it up to date.
+                callFrame.sourceCodeLocation.populateLiveDisplayLocationTooltip(cell);
+
+                var goToArrowButtonLink = WebInspector.createSourceCodeLocationLink(callFrame.sourceCodeLocation, false, true);
+                fragment.appendChild(goToArrowButtonLink);
+
+                var icon = document.createElement("div");
+                icon.className = WebInspector.LayoutTimelineDataGridNode.IconStyleClassName;
+                fragment.appendChild(icon);
+
+                if (isAnonymousFunction) {
+                    // For anonymous functions we show the resource or script icon and name.
+                    if (callFrame.sourceCodeLocation.sourceCode instanceof WebInspector.Resource) {
+                        cell.classList.add(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
+                        cell.classList.add(callFrame.sourceCodeLocation.sourceCode.type);
+                    } else if (callFrame.sourceCodeLocation.sourceCode instanceof WebInspector.Script) {
+                        if (callFrame.sourceCodeLocation.sourceCode.url) {
+                            cell.classList.add(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
+                            cell.classList.add(WebInspector.Resource.Type.Script);
+                        } else
+                            cell.classList.add(WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName);
+                    } else {
+                        console.error("Unknown SourceCode subclass.");
+                    }
+
+                    var titleElement = document.createElement("span");
+                    callFrame.sourceCodeLocation.populateLiveDisplayLocationString(titleElement, "textContent");
+
+                    fragment.appendChild(titleElement);
+                } else {
+                    // Show the function name and icon.
+                    cell.classList.add(WebInspector.CallFrameTreeElement.FunctionIconStyleClassName);
+
+                    fragment.appendChild(document.createTextNode(functionName));
+
+                    var subtitleElement = document.createElement("span");
+                    subtitleElement.className = WebInspector.LayoutTimelineDataGridNode.SubtitleStyleClassName;
+                    callFrame.sourceCodeLocation.populateLiveDisplayLocationString(subtitleElement, "textContent");
+
+                    fragment.appendChild(subtitleElement);
+                }
+
+                return fragment;
+            }
+
+            var icon = document.createElement("div");
+            icon.className = WebInspector.LayoutTimelineDataGridNode.IconStyleClassName;
+            fragment.appendChild(icon);
+
+            fragment.appendChild(document.createTextNode(functionName));
+
+            return fragment;
+
+        case "width":
+        case "height":
+            return isNaN(value) ? emptyValuePlaceholderString : WebInspector.UIString("%fpx").format(value);
+
+        case "area":
+            return isNaN(value) ? emptyValuePlaceholderString : WebInspector.UIString("%fpx²").format(value);
+
+        case "startTime":
+            return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value - this._baseStartTime);
+
+        case "duration":
+            return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value);
+        }
+
+        return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier);
+    }
+}
+
+WebInspector.LayoutTimelineDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LayoutTimelineRecord.js b/Source/WebInspectorUI/UserInterface/LayoutTimelineRecord.js
new file mode 100644
index 000000000..63bcf35b5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/LayoutTimelineRecord.js
@@ -0,0 +1,136 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LayoutTimelineRecord = function(eventType, startTime, endTime, callFrames, x, y, width, height, quad)
+{
+    WebInspector.TimelineRecord.call(this, WebInspector.TimelineRecord.Type.Layout, startTime, endTime);
+
+    console.assert(eventType);
+
+    if (eventType in WebInspector.LayoutTimelineRecord.EventType)
+        eventType = WebInspector.LayoutTimelineRecord.EventType[eventType];
+
+    this._eventType = eventType;
+    this._callFrames = callFrames || [];
+    this._x = typeof x === "number" ? x : NaN;
+    this._y = typeof y === "number" ? y : NaN;
+    this._width = typeof width === "number" ? width : NaN;
+    this._height = typeof height === "number" ? height : NaN;
+    this._quad = quad instanceof WebInspector.Quad ? quad : null;
+};
+
+WebInspector.LayoutTimelineRecord.EventType = {
+    InvalidateStyles: "layout-timeline-record-invalidate-styles",
+    RecalculateStyles: "layout-timeline-record-recalculate-styles",
+    InvalidateLayout: "layout-timeline-record-invalidate-layout",
+    Layout: "layout-timeline-record-layout",
+    Paint: "layout-timeline-record-paint"
+};
+
+WebInspector.LayoutTimelineRecord.EventType.displayName = function(eventType)
+{
+    switch(eventType) {
+    case WebInspector.LayoutTimelineRecord.EventType.InvalidateStyles:
+        return WebInspector.UIString("Invalidate Styles");
+    case WebInspector.LayoutTimelineRecord.EventType.RecalculateStyles:
+        return WebInspector.UIString("Recalculate Styles");
+    case WebInspector.LayoutTimelineRecord.EventType.InvalidateLayout:
+        return WebInspector.UIString("Invalidate Layout");
+    case WebInspector.LayoutTimelineRecord.EventType.Layout:
+        return WebInspector.UIString("Layout");
+    case WebInspector.LayoutTimelineRecord.EventType.Paint:
+        return WebInspector.UIString("Paint");
+    }
+};
+
+WebInspector.LayoutTimelineRecord.prototype = {
+    constructor: WebInspector.LayoutTimelineRecord,
+
+    // Public
+
+    get eventType()
+    {
+        return this._eventType;
+    },
+
+    get callFrames()
+    {
+        return this._callFrames;
+    },
+
+    get initiatorCallFrame()
+    {
+        if (!this._callFrames || !this._callFrames.length)
+            return null;
+
+        // Return the first non-native code call frame as the initiator.
+        for (var i = 0; i < this._callFrames.length; ++i) {
+            if (this._callFrames[i].nativeCode)
+                continue;
+            return this._callFrames[i];
+        }
+
+        return null;
+    },
+
+    get x()
+    {
+        return this._x;
+    },
+
+    get y()
+    {
+        return this._y;
+    },
+
+    get width()
+    {
+        return this._width;
+    },
+
+    get height()
+    {
+        return this._height;
+    },
+
+    get area()
+    {
+        return this._width * this._height;
+    },
+
+    get rect()
+    {
+        if (!isNaN(this._x) && !isNaN(this._y))
+            return new WebInspector.Rect(this._x, this._y, this._width, this._height);
+        return null;
+    },
+
+    get quad()
+    {
+        return this._quad;
+    }
+};
+
+WebInspector.LayoutTimelineRecord.prototype.__proto__ = WebInspector.TimelineRecord.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Legacy/6.0/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/Legacy/6.0/InspectorBackendCommands.js
new file mode 100644
index 000000000..ca5812b4c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Legacy/6.0/InspectorBackendCommands.js
@@ -0,0 +1,285 @@
+// File is generated by WebCore/WebCore/inspector/CodeGeneratorInspector.py
+
+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+
+// Inspector.
+InspectorBackend.registerInspectorDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Inspector");
+InspectorBackend.registerEvent("Inspector.evaluateForTestInFrontend", ["testCallId", "script"]);
+InspectorBackend.registerEvent("Inspector.inspect", ["object", "hints"]);
+InspectorBackend.registerEvent("Inspector.didCreateWorker", ["id", "url", "isShared"]);
+InspectorBackend.registerEvent("Inspector.didDestroyWorker", ["id"]);
+InspectorBackend.registerCommand("Inspector.enable", [], []);
+InspectorBackend.registerCommand("Inspector.disable", [], []);
+
+// Memory.
+InspectorBackend.registerMemoryDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Memory");
+InspectorBackend.registerCommand("Memory.getDOMNodeCount", [], ["domGroups", "strings"]);
+
+// Page.
+InspectorBackend.registerPageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Page");
+InspectorBackend.registerEvent("Page.domContentEventFired", ["timestamp"]);
+InspectorBackend.registerEvent("Page.loadEventFired", ["timestamp"]);
+InspectorBackend.registerEvent("Page.frameNavigated", ["frame"]);
+InspectorBackend.registerEvent("Page.frameDetached", ["frameId"]);
+InspectorBackend.registerCommand("Page.enable", [], []);
+InspectorBackend.registerCommand("Page.disable", [], []);
+InspectorBackend.registerCommand("Page.addScriptToEvaluateOnLoad", [{"name": "scriptSource", "type": "string", "optional": false}], ["identifier"]);
+InspectorBackend.registerCommand("Page.removeScriptToEvaluateOnLoad", [{"name": "identifier", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.reload", [{"name": "ignoreCache", "type": "boolean", "optional": true}, {"name": "scriptToEvaluateOnLoad", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("Page.navigate", [{"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getCookies", [], ["cookies", "cookiesString"]);
+InspectorBackend.registerCommand("Page.deleteCookie", [{"name": "cookieName", "type": "string", "optional": false}, {"name": "domain", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getResourceTree", [], ["frameTree"]);
+InspectorBackend.registerCommand("Page.getResourceContent", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}], ["content", "base64Encoded"]);
+InspectorBackend.registerCommand("Page.searchInResource", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Page.searchInResources", [{"name": "text", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Page.setDocumentContent", [{"name": "frameId", "type": "string", "optional": false}, {"name": "html", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.canOverrideDeviceMetrics", [], ["result"]);
+InspectorBackend.registerCommand("Page.setDeviceMetricsOverride", [{"name": "width", "type": "number", "optional": false}, {"name": "height", "type": "number", "optional": false}, {"name": "fontScaleFactor", "type": "number", "optional": false}, {"name": "fitWindow", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.setShowPaintRects", [{"name": "result", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getScriptExecutionStatus", [], ["result"]);
+InspectorBackend.registerCommand("Page.setScriptExecutionDisabled", [{"name": "value", "type": "boolean", "optional": false}], []);
+
+// Runtime.
+InspectorBackend.registerCommand("Runtime.evaluate", [{"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "frameId", "type": "string", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
+InspectorBackend.registerCommand("Runtime.callFunctionOn", [{"name": "objectId", "type": "string", "optional": false}, {"name": "functionDeclaration", "type": "string", "optional": false}, {"name": "arguments", "type": "object", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
+InspectorBackend.registerCommand("Runtime.getProperties", [{"name": "objectId", "type": "string", "optional": false}, {"name": "ownProperties", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Runtime.releaseObject", [{"name": "objectId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Runtime.releaseObjectGroup", [{"name": "objectGroup", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Runtime.run", [], []);
+
+// Console.
+InspectorBackend.registerConsoleDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Console");
+InspectorBackend.registerEvent("Console.messageAdded", ["message"]);
+InspectorBackend.registerEvent("Console.messageRepeatCountUpdated", ["count"]);
+InspectorBackend.registerEvent("Console.messagesCleared", []);
+InspectorBackend.registerCommand("Console.enable", [], []);
+InspectorBackend.registerCommand("Console.disable", [], []);
+InspectorBackend.registerCommand("Console.clearMessages", [], []);
+InspectorBackend.registerCommand("Console.setMonitoringXHREnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Console.addInspectedNode", [{"name": "nodeId", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("Console.addInspectedHeapObject", [{"name": "heapObjectId", "type": "number", "optional": false}], []);
+
+// Network.
+InspectorBackend.registerNetworkDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Network");
+InspectorBackend.registerEvent("Network.requestWillBeSent", ["requestId", "frameId", "loaderId", "documentURL", "request", "timestamp", "initiator", "redirectResponse"]);
+InspectorBackend.registerEvent("Network.requestServedFromCache", ["requestId"]);
+InspectorBackend.registerEvent("Network.responseReceived", ["requestId", "frameId", "loaderId", "timestamp", "type", "response"]);
+InspectorBackend.registerEvent("Network.dataReceived", ["requestId", "timestamp", "dataLength", "encodedDataLength"]);
+InspectorBackend.registerEvent("Network.loadingFinished", ["requestId", "timestamp"]);
+InspectorBackend.registerEvent("Network.loadingFailed", ["requestId", "timestamp", "errorText", "canceled"]);
+InspectorBackend.registerEvent("Network.requestServedFromMemoryCache", ["requestId", "frameId", "loaderId", "documentURL", "timestamp", "initiator", "resource"]);
+InspectorBackend.registerEvent("Network.webSocketWillSendHandshakeRequest", ["requestId", "timestamp", "request"]);
+InspectorBackend.registerEvent("Network.webSocketHandshakeResponseReceived", ["requestId", "timestamp", "response"]);
+InspectorBackend.registerEvent("Network.webSocketCreated", ["requestId", "url"]);
+InspectorBackend.registerEvent("Network.webSocketClosed", ["requestId", "timestamp"]);
+InspectorBackend.registerEvent("Network.webSocketFrameReceived", ["requestId", "timestamp", "response"]);
+InspectorBackend.registerEvent("Network.webSocketFrameError", ["requestId", "timestamp", "errorMessage"]);
+InspectorBackend.registerEvent("Network.webSocketFrameSent", ["requestId", "timestamp", "response"]);
+InspectorBackend.registerCommand("Network.enable", [], []);
+InspectorBackend.registerCommand("Network.disable", [], []);
+InspectorBackend.registerCommand("Network.setUserAgentOverride", [{"name": "userAgent", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Network.setExtraHTTPHeaders", [{"name": "headers", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("Network.getResponseBody", [{"name": "requestId", "type": "string", "optional": false}], ["body", "base64Encoded"]);
+InspectorBackend.registerCommand("Network.canClearBrowserCache", [], ["result"]);
+InspectorBackend.registerCommand("Network.clearBrowserCache", [], []);
+InspectorBackend.registerCommand("Network.canClearBrowserCookies", [], ["result"]);
+InspectorBackend.registerCommand("Network.clearBrowserCookies", [], []);
+InspectorBackend.registerCommand("Network.setCacheDisabled", [{"name": "cacheDisabled", "type": "boolean", "optional": false}], []);
+
+// Database.
+InspectorBackend.registerDatabaseDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Database");
+InspectorBackend.registerEvent("Database.addDatabase", ["database"]);
+InspectorBackend.registerEvent("Database.sqlTransactionSucceeded", ["transactionId", "columnNames", "values"]);
+InspectorBackend.registerEvent("Database.sqlTransactionFailed", ["transactionId", "sqlError"]);
+InspectorBackend.registerCommand("Database.enable", [], []);
+InspectorBackend.registerCommand("Database.disable", [], []);
+InspectorBackend.registerCommand("Database.getDatabaseTableNames", [{"name": "databaseId", "type": "string", "optional": false}], ["tableNames"]);
+InspectorBackend.registerCommand("Database.executeSQL", [{"name": "databaseId", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}], ["success", "transactionId"]);
+
+// IndexedDB.
+InspectorBackend.registerIndexedDBDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "IndexedDB");
+InspectorBackend.registerEvent("IndexedDB.databaseNamesLoaded", ["requestId", "securityOriginWithDatabaseNames"]);
+InspectorBackend.registerEvent("IndexedDB.databaseLoaded", ["requestId", "databaseWithObjectStores"]);
+InspectorBackend.registerEvent("IndexedDB.objectStoreDataLoaded", ["requestId", "objectStoreDataEntries", "hasMore"]);
+InspectorBackend.registerEvent("IndexedDB.indexDataLoaded", ["requestId", "indexDataEntries", "hasMore"]);
+InspectorBackend.registerCommand("IndexedDB.enable", [], []);
+InspectorBackend.registerCommand("IndexedDB.disable", [], []);
+InspectorBackend.registerCommand("IndexedDB.requestDatabaseNamesForFrame", [{"name": "requestId", "type": "number", "optional": false}, {"name": "frameId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("IndexedDB.requestDatabase", [{"name": "requestId", "type": "number", "optional": false}, {"name": "frameId", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("IndexedDB.requestData", [{"name": "requestId", "type": "number", "optional": false}, {"name": "frameId", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}, {"name": "objectStoreName", "type": "string", "optional": false}, {"name": "indexName", "type": "string", "optional": false}, {"name": "skipCount", "type": "number", "optional": false}, {"name": "pageSize", "type": "number", "optional": false}, {"name": "keyRange", "type": "object", "optional": true}], []);
+
+// DOMStorage.
+InspectorBackend.registerDOMStorageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "DOMStorage");
+InspectorBackend.registerEvent("DOMStorage.addDOMStorage", ["storage"]);
+InspectorBackend.registerEvent("DOMStorage.updateDOMStorage", ["storageId"]);
+InspectorBackend.registerCommand("DOMStorage.enable", [], []);
+InspectorBackend.registerCommand("DOMStorage.disable", [], []);
+InspectorBackend.registerCommand("DOMStorage.getDOMStorageEntries", [{"name": "storageId", "type": "string", "optional": false}], ["entries"]);
+InspectorBackend.registerCommand("DOMStorage.setDOMStorageItem", [{"name": "storageId", "type": "string", "optional": false}, {"name": "key", "type": "string", "optional": false}, {"name": "value", "type": "string", "optional": false}], ["success"]);
+InspectorBackend.registerCommand("DOMStorage.removeDOMStorageItem", [{"name": "storageId", "type": "string", "optional": false}, {"name": "key", "type": "string", "optional": false}], ["success"]);
+
+// ApplicationCache.
+InspectorBackend.registerApplicationCacheDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "ApplicationCache");
+InspectorBackend.registerEvent("ApplicationCache.applicationCacheStatusUpdated", ["frameId", "manifestURL", "status"]);
+InspectorBackend.registerEvent("ApplicationCache.networkStateUpdated", ["isNowOnline"]);
+InspectorBackend.registerCommand("ApplicationCache.getFramesWithManifests", [], ["frameIds"]);
+InspectorBackend.registerCommand("ApplicationCache.enable", [], []);
+InspectorBackend.registerCommand("ApplicationCache.getManifestForFrame", [{"name": "frameId", "type": "string", "optional": false}], ["manifestURL"]);
+InspectorBackend.registerCommand("ApplicationCache.getApplicationCacheForFrame", [{"name": "frameId", "type": "string", "optional": false}], ["applicationCache"]);
+
+// FileSystem.
+InspectorBackend.registerFileSystemDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "FileSystem");
+InspectorBackend.registerCommand("FileSystem.enable", [], []);
+InspectorBackend.registerCommand("FileSystem.disable", [], []);
+
+// DOM.
+InspectorBackend.registerDOMDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "DOM");
+InspectorBackend.registerEvent("DOM.documentUpdated", []);
+InspectorBackend.registerEvent("DOM.setChildNodes", ["parentId", "nodes"]);
+InspectorBackend.registerEvent("DOM.attributeModified", ["nodeId", "name", "value"]);
+InspectorBackend.registerEvent("DOM.attributeRemoved", ["nodeId", "name"]);
+InspectorBackend.registerEvent("DOM.inlineStyleInvalidated", ["nodeIds"]);
+InspectorBackend.registerEvent("DOM.characterDataModified", ["nodeId", "characterData"]);
+InspectorBackend.registerEvent("DOM.childNodeCountUpdated", ["nodeId", "childNodeCount"]);
+InspectorBackend.registerEvent("DOM.childNodeInserted", ["parentNodeId", "previousNodeId", "node"]);
+InspectorBackend.registerEvent("DOM.childNodeRemoved", ["parentNodeId", "nodeId"]);
+InspectorBackend.registerEvent("DOM.shadowRootPushed", ["hostId", "root"]);
+InspectorBackend.registerEvent("DOM.shadowRootPopped", ["hostId", "rootId"]);
+InspectorBackend.registerCommand("DOM.getDocument", [], ["root"]);
+InspectorBackend.registerCommand("DOM.requestChildNodes", [{"name": "nodeId", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.querySelector", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.querySelectorAll", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["nodeIds"]);
+InspectorBackend.registerCommand("DOM.setNodeName", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.setNodeValue", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.removeNode", [{"name": "nodeId", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.setAttributeValue", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.setAttributesAsText", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "text", "type": "string", "optional": false}, {"name": "name", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.removeAttribute", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.getEventListenersForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["listeners"]);
+InspectorBackend.registerCommand("DOM.getOuterHTML", [{"name": "nodeId", "type": "number", "optional": false}], ["outerHTML"]);
+InspectorBackend.registerCommand("DOM.setOuterHTML", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "outerHTML", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.performSearch", [{"name": "query", "type": "string", "optional": false}], ["searchId", "resultCount"]);
+InspectorBackend.registerCommand("DOM.getSearchResults", [{"name": "searchId", "type": "string", "optional": false}, {"name": "fromIndex", "type": "number", "optional": false}, {"name": "toIndex", "type": "number", "optional": false}], ["nodeIds"]);
+InspectorBackend.registerCommand("DOM.discardSearchResults", [{"name": "searchId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.requestNode", [{"name": "objectId", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.setInspectModeEnabled", [{"name": "enabled", "type": "boolean", "optional": false}, {"name": "highlightConfig", "type": "object", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightRect", [{"name": "x", "type": "number", "optional": false}, {"name": "y", "type": "number", "optional": false}, {"name": "width", "type": "number", "optional": false}, {"name": "height", "type": "number", "optional": false}, {"name": "color", "type": "object", "optional": true}, {"name": "outlineColor", "type": "object", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "highlightConfig", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.hideHighlight", [], []);
+InspectorBackend.registerCommand("DOM.highlightFrame", [{"name": "frameId", "type": "string", "optional": false}, {"name": "contentColor", "type": "object", "optional": true}, {"name": "contentOutlineColor", "type": "object", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.pushNodeByPathToFrontend", [{"name": "path", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.resolveNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["object"]);
+InspectorBackend.registerCommand("DOM.getAttributes", [{"name": "nodeId", "type": "number", "optional": false}], ["attributes"]);
+InspectorBackend.registerCommand("DOM.moveTo", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "targetNodeId", "type": "number", "optional": false}, {"name": "insertBeforeNodeId", "type": "number", "optional": true}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.setTouchEmulationEnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.undo", [], []);
+InspectorBackend.registerCommand("DOM.redo", [], []);
+InspectorBackend.registerCommand("DOM.markUndoableState", [], []);
+
+// CSS.
+InspectorBackend.registerCSSDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "CSS");
+InspectorBackend.registerEvent("CSS.mediaQueryResultChanged", []);
+InspectorBackend.registerEvent("CSS.styleSheetChanged", ["styleSheetId"]);
+InspectorBackend.registerCommand("CSS.enable", [], []);
+InspectorBackend.registerCommand("CSS.disable", [], []);
+InspectorBackend.registerCommand("CSS.getMatchedStylesForNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "forcedPseudoClasses", "type": "object", "optional": true}, {"name": "includePseudo", "type": "boolean", "optional": true}, {"name": "includeInherited", "type": "boolean", "optional": true}], ["matchedCSSRules", "pseudoElements", "inherited"]);
+InspectorBackend.registerCommand("CSS.getInlineStylesForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["inlineStyle", "attributesStyle"]);
+InspectorBackend.registerCommand("CSS.getComputedStyleForNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "forcedPseudoClasses", "type": "object", "optional": true}], ["computedStyle"]);
+InspectorBackend.registerCommand("CSS.getAllStyleSheets", [], ["headers"]);
+InspectorBackend.registerCommand("CSS.getStyleSheet", [{"name": "styleSheetId", "type": "string", "optional": false}], ["styleSheet"]);
+InspectorBackend.registerCommand("CSS.getStyleSheetText", [{"name": "styleSheetId", "type": "string", "optional": false}], ["text"]);
+InspectorBackend.registerCommand("CSS.setStyleSheetText", [{"name": "styleSheetId", "type": "string", "optional": false}, {"name": "text", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("CSS.setPropertyText", [{"name": "styleId", "type": "object", "optional": false}, {"name": "propertyIndex", "type": "number", "optional": false}, {"name": "text", "type": "string", "optional": false}, {"name": "overwrite", "type": "boolean", "optional": false}], ["style"]);
+InspectorBackend.registerCommand("CSS.toggleProperty", [{"name": "styleId", "type": "object", "optional": false}, {"name": "propertyIndex", "type": "number", "optional": false}, {"name": "disable", "type": "boolean", "optional": false}], ["style"]);
+InspectorBackend.registerCommand("CSS.setRuleSelector", [{"name": "ruleId", "type": "object", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["rule"]);
+InspectorBackend.registerCommand("CSS.addRule", [{"name": "contextNodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["rule"]);
+InspectorBackend.registerCommand("CSS.getSupportedCSSProperties", [], ["cssProperties"]);
+InspectorBackend.registerCommand("CSS.startSelectorProfiler", [], []);
+InspectorBackend.registerCommand("CSS.stopSelectorProfiler", [], ["profile"]);
+
+// Timeline.
+InspectorBackend.registerTimelineDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Timeline");
+InspectorBackend.registerEvent("Timeline.eventRecorded", ["record"]);
+InspectorBackend.registerCommand("Timeline.start", [{"name": "maxCallStackDepth", "type": "number", "optional": true}], []);
+InspectorBackend.registerCommand("Timeline.stop", [], []);
+InspectorBackend.registerCommand("Timeline.setIncludeMemoryDetails", [{"name": "enabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Timeline.supportsFrameInstrumentation", [], ["result"]);
+
+// Debugger.
+InspectorBackend.registerDebuggerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Debugger");
+InspectorBackend.registerEvent("Debugger.globalObjectCleared", []);
+InspectorBackend.registerEvent("Debugger.scriptParsed", ["scriptId", "url", "startLine", "startColumn", "endLine", "endColumn", "isContentScript", "sourceMapURL"]);
+InspectorBackend.registerEvent("Debugger.scriptFailedToParse", ["url", "scriptSource", "startLine", "errorLine", "errorMessage"]);
+InspectorBackend.registerEvent("Debugger.breakpointResolved", ["breakpointId", "location"]);
+InspectorBackend.registerEvent("Debugger.paused", ["callFrames", "reason", "data"]);
+InspectorBackend.registerEvent("Debugger.resumed", []);
+InspectorBackend.registerCommand("Debugger.causesRecompilation", [], ["result"]);
+InspectorBackend.registerCommand("Debugger.supportsNativeBreakpoints", [], ["result"]);
+InspectorBackend.registerCommand("Debugger.enable", [], []);
+InspectorBackend.registerCommand("Debugger.disable", [], []);
+InspectorBackend.registerCommand("Debugger.setBreakpointsActive", [{"name": "active", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.setBreakpointByUrl", [{"name": "lineNumber", "type": "number", "optional": false}, {"name": "url", "type": "string", "optional": true}, {"name": "urlRegex", "type": "string", "optional": true}, {"name": "columnNumber", "type": "number", "optional": true}, {"name": "condition", "type": "string", "optional": true}], ["breakpointId", "locations"]);
+InspectorBackend.registerCommand("Debugger.setBreakpoint", [{"name": "location", "type": "object", "optional": false}, {"name": "condition", "type": "string", "optional": true}], ["breakpointId", "actualLocation"]);
+InspectorBackend.registerCommand("Debugger.removeBreakpoint", [{"name": "breakpointId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.continueToLocation", [{"name": "location", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.stepOver", [], []);
+InspectorBackend.registerCommand("Debugger.stepInto", [], []);
+InspectorBackend.registerCommand("Debugger.stepOut", [], []);
+InspectorBackend.registerCommand("Debugger.pause", [], []);
+InspectorBackend.registerCommand("Debugger.resume", [], []);
+InspectorBackend.registerCommand("Debugger.searchInContent", [{"name": "scriptId", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Debugger.canSetScriptSource", [], ["result"]);
+InspectorBackend.registerCommand("Debugger.setScriptSource", [{"name": "scriptId", "type": "string", "optional": false}, {"name": "scriptSource", "type": "string", "optional": false}, {"name": "preview", "type": "boolean", "optional": true}], ["callFrames", "result"]);
+InspectorBackend.registerCommand("Debugger.getScriptSource", [{"name": "scriptId", "type": "string", "optional": false}], ["scriptSource"]);
+InspectorBackend.registerCommand("Debugger.getFunctionDetails", [{"name": "functionId", "type": "string", "optional": false}], ["details"]);
+InspectorBackend.registerCommand("Debugger.setPauseOnExceptions", [{"name": "state", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.evaluateOnCallFrame", [{"name": "callFrameId", "type": "string", "optional": false}, {"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
+
+// DOMDebugger.
+InspectorBackend.registerCommand("DOMDebugger.setDOMBreakpoint", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "type", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeDOMBreakpoint", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "type", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.setEventListenerBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeEventListenerBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.setInstrumentationBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeInstrumentationBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.setXHRBreakpoint", [{"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeXHRBreakpoint", [{"name": "url", "type": "string", "optional": false}], []);
+
+// Profiler.
+InspectorBackend.registerProfilerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Profiler");
+InspectorBackend.registerEvent("Profiler.addProfileHeader", ["header"]);
+InspectorBackend.registerEvent("Profiler.addHeapSnapshotChunk", ["uid", "chunk"]);
+InspectorBackend.registerEvent("Profiler.finishHeapSnapshot", ["uid"]);
+InspectorBackend.registerEvent("Profiler.setRecordingProfile", ["isProfiling"]);
+InspectorBackend.registerEvent("Profiler.resetProfiles", []);
+InspectorBackend.registerEvent("Profiler.reportHeapSnapshotProgress", ["done", "total"]);
+InspectorBackend.registerCommand("Profiler.causesRecompilation", [], ["result"]);
+InspectorBackend.registerCommand("Profiler.isSampling", [], ["result"]);
+InspectorBackend.registerCommand("Profiler.hasHeapProfiler", [], ["result"]);
+InspectorBackend.registerCommand("Profiler.enable", [], []);
+InspectorBackend.registerCommand("Profiler.disable", [], []);
+InspectorBackend.registerCommand("Profiler.start", [], []);
+InspectorBackend.registerCommand("Profiler.stop", [], []);
+InspectorBackend.registerCommand("Profiler.getProfileHeaders", [], ["headers"]);
+InspectorBackend.registerCommand("Profiler.getProfile", [{"name": "type", "type": "string", "optional": false}, {"name": "uid", "type": "number", "optional": false}], ["profile"]);
+InspectorBackend.registerCommand("Profiler.removeProfile", [{"name": "type", "type": "string", "optional": false}, {"name": "uid", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("Profiler.clearProfiles", [], []);
+InspectorBackend.registerCommand("Profiler.takeHeapSnapshot", [], []);
+InspectorBackend.registerCommand("Profiler.collectGarbage", [], []);
+InspectorBackend.registerCommand("Profiler.getObjectByHeapObjectId", [{"name": "objectId", "type": "number", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["result"]);
+
+// Worker.
+InspectorBackend.registerWorkerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Worker");
+InspectorBackend.registerEvent("Worker.workerCreated", ["workerId", "url", "inspectorConnected"]);
+InspectorBackend.registerEvent("Worker.workerTerminated", ["workerId"]);
+InspectorBackend.registerEvent("Worker.dispatchMessageFromWorker", ["workerId", "message"]);
+InspectorBackend.registerEvent("Worker.disconnectedFromWorker", []);
+InspectorBackend.registerCommand("Worker.setWorkerInspectionEnabled", [{"name": "value", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Worker.sendMessageToWorker", [{"name": "workerId", "type": "number", "optional": false}, {"name": "message", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("Worker.connectToWorker", [{"name": "workerId", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("Worker.disconnectFromWorker", [{"name": "workerId", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("Worker.setAutoconnectToWorkers", [{"name": "value", "type": "boolean", "optional": false}], []);
diff --git a/Source/WebInspectorUI/UserInterface/LoadInspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/LoadInspectorBackendCommands.js
new file mode 100644
index 000000000..501b39899
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/LoadInspectorBackendCommands.js
@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+(function() {
+    var backendCommandsURL = "InspectorBackendCommands.js";
+    if (InspectorFrontendHost.inspectorBackendCommandsURL) {
+        var suggestedBackendCommandsURL = InspectorFrontendHost.inspectorBackendCommandsURL();
+        if (suggestedBackendCommandsURL)
+            backendCommandsURL = suggestedBackendCommandsURL;
+    }
+
+    document.write("<script src=\"" + backendCommandsURL + "\"></script>");
+})();
diff --git a/Source/WebInspectorUI/UserInterface/LoadLocalizedStrings.js b/Source/WebInspectorUI/UserInterface/LoadLocalizedStrings.js
new file mode 100644
index 000000000..bfb47c4c4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/LoadLocalizedStrings.js
@@ -0,0 +1,31 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+(function() {
+    var localizedStringsURL = InspectorFrontendHost.localizedStringsURL();
+    console.assert(localizedStringsURL);
+    if (localizedStringsURL)
+        document.write("<script src=\"" + localizedStringsURL + "\"></script>");
+})();
diff --git a/Source/WebInspectorUI/UserInterface/LogContentView.css b/Source/WebInspectorUI/UserInterface/LogContentView.css
new file mode 100644
index 000000000..e3da4b78a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/LogContentView.css
@@ -0,0 +1,500 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.log {
+    overflow-y: overlay;
+    overflow-x: hidden;
+}
+
+.console-messages {
+    display: -webkit-flex;
+    -webkit-flex-direction: column;
+
+    word-wrap: break-word;
+
+    font-family: Menlo, monospace;
+    font-size: 11px;
+
+    min-height: 100%;
+}
+
+.console-messages > :first-child {
+    margin-top: auto;
+}
+
+.console-item {
+    border-top: 1px solid rgb(240, 240, 240);
+}
+
+.console-group.new-session .console-group-messages .console-item:first-child {
+    border-top: none;
+}
+
+.console-item.selected {
+    background-color: rgb(212, 212, 212);
+}
+
+.console-messages:focus .console-item.selected {
+    background-color: rgb(56, 121, 217);
+}
+
+.console-messages:focus .console-item.selected * {
+    color: white !important;
+}
+
+.console-user-command-result.console-log-level::before {
+    background-image: url(Images/UserInputResult.pdf);
+}
+
+.console-messages:focus .console-item.selected .console-user-command-result.console-log-level::before {
+    background-image: url(Images/UserInputResultSelected.pdf);
+}
+
+.console-message, .console-user-command {
+    position: relative;
+    padding: 2px 12px 2px 18px;
+    min-height: 16px;
+}
+
+.console-message::before, .console-user-command::before, .javascript-prompt::before, .console-group-title::before {
+    position: absolute;
+    display: block;
+    content: "";
+    left: 4px;
+    top: 8px;
+    width: 10px;
+    height: 10px;
+    margin-top: -5px;
+}
+
+.console-message .bubble {
+    display: inline-block;
+    height: 14px;
+    background-color: rgb(128, 151, 189);
+    vertical-align: middle;
+    white-space: nowrap;
+    padding: 1px 4px;
+    margin-top: -2px;
+    margin-right: 4px;
+    margin-left: -18px;
+    text-align: left;
+    font-size: 11px;
+    line-height: normal;
+    font-family: Helvetica, Arial, sans-serif;
+    font-weight: bold;
+    text-shadow: none;
+    color: white;
+    border-radius: 7px;
+
+    float: left;
+    margin-top: 0px;
+    margin-left: 2px;
+}
+
+.console-message-text {
+    white-space: pre-wrap;
+}
+
+.console-message-text > span {
+    -webkit-user-select: text;
+}
+
+.console-group-title {
+    font-weight: bold;
+}
+
+.console-group-title::before {
+    background-image: -webkit-canvas(disclosure-triangle-small-open-normal);
+    background-size: 13px 13px;
+    top: 6px;
+    width: 13px;
+    height: 13px;
+    left: 3px;
+}
+
+.console-messages:focus .console-item.selected .console-group-title::before {
+    background-image: -webkit-canvas(disclosure-triangle-small-open-selected);
+}
+
+.console-group.collapsed .console-group-title::before {
+    background-image: -webkit-canvas(disclosure-triangle-small-closed-normal);
+}
+
+.console-messages:focus .console-group.collapsed .console-item.selected .console-group-title::before {
+    background-image: -webkit-canvas(disclosure-triangle-small-closed-selected);
+}
+
+.console-group.collapsed > .console-group-messages {
+    display: none;
+}
+
+.console-group {
+    position: relative;
+}
+
+.console-group.new-session {
+    border-top: 3px dashed rgb(240, 240, 240);
+}
+
+.console-error-level .console-message-text, .console-error-level .section .header .title {
+    color: red !important;
+}
+
+.console-messages:focus .console-item.selected .console-message-text,
+.console-messages:focus .console-item.selected .section .header .title {
+    color: white !important;
+}
+
+.console-debug-level .console-message-text {
+    color: blue;
+}
+
+.console-debug-level::before {
+    background-color: blue;
+}
+
+.console-error-level::before {
+    background-image: url(Images/ErrorSmall.pdf);
+    background-size: 10px 10px;
+}
+
+.console-warning-level::before {
+    background-image: url(Images/WarningSmall.pdf);
+    background-size: 10px 10px;
+}
+
+.console-user-command .console-message {
+    margin-left: -24px;
+    padding-right: 0;
+}
+
+.console-user-command::before {
+    background-image: url(Images/UserInputPromptPrevious.pdf);
+}
+
+.console-messages:focus .console-item.selected .console-user-command::before {
+    background-image: url(Images/UserInputPromptPreviousSelected.pdf);
+}
+
+.console-user-command > .console-message-text {
+    color: rgb(0, 128, 255);
+}
+
+.console-messages a {
+    color: rgb(33%, 33%, 33%);
+    cursor: pointer;
+}
+
+.console-messages a:hover {
+    color: rgb(15%, 15%, 15%);
+}
+
+.console-message-url {
+    float: right;
+    margin-left: 4px;
+    font-weight: normal;
+}
+
+.console-group-messages .section {
+    margin: 0 0 0 12px !important;
+}
+
+.console-group-messages .section .header {
+    padding: 0 8px 0 0;
+    background-image: none;
+    border: none;
+    min-height: 0;
+}
+
+.console-group-messages .section .header::before {
+    top: 2px;
+    left: 1px;
+}
+
+.console-messages:focus .console-item.selected .section .header::before {
+    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-selected);
+}
+
+.console-messages:focus .console-item.selected .section.expanded .header::before {
+    background-image: -webkit-canvas(disclosure-triangle-tiny-open-selected);
+}
+
+.console-messages:focus .console-item.selected .properties-tree li.parent::before {
+    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-selected);
+}
+
+.console-messages:focus .console-item.selected .properties-tree li.parent.expanded::before {
+    background-image: -webkit-canvas(disclosure-triangle-tiny-open-selected);
+}
+
+.console-group-messages .section .header .title {
+    color: black;
+    font-weight: normal;
+    line-height: normal;
+}
+
+.console-group-messages .section .properties li .info {
+    padding-top: 0;
+    padding-bottom: 0;
+    color: rgb(60%, 60%, 60%);
+}
+
+.console-group-messages .outline-disclosure {
+    outline: none;
+    padding-left: 0;
+}
+
+.console-group-messages .outline-disclosure > ol {
+    padding: 0 0 0 12px !important;
+}
+
+.console-group-messages .outline-disclosure, .console-group-messages .outline-disclosure ol {
+    font-size: inherit;
+    line-height: 12px;
+}
+
+.console-group-messages .outline-disclosure.single-node li {
+    padding-left: 2px;
+}
+
+.console-group-messages .outline-disclosure li .selection {
+    margin-left: -6px;
+    margin-right: -6px;
+}
+
+.console-group-messages .add-attribute {
+    display: none;
+}
+
+.console-formatted-object, .console-formatted-node {
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    color: black;
+}
+
+.console-formatted-object .section, .console-formatted-node .section {
+    position: static;
+}
+
+.console-formatted-object .properties, .console-formatted-node .properties {
+    padding-left: 0 !important;
+}
+
+.console-formatted-number {
+    color: rgb(28, 0, 207);
+}
+
+.console-formatted-string, .console-formatted-regexp {
+    color: rgb(196, 26, 22);
+    white-space: pre;
+}
+
+.console-formatted-null, .console-formatted-undefined {
+    color: rgb(128, 128, 128);
+}
+
+.error-message {
+    color: red;
+}
+
+.auto-complete-text, .editing .auto-complete-text {
+    color: rgb(128, 128, 128) !important;
+    -webkit-user-modify: read-only;
+}
+
+.outline-disclosure li.hovered:not(.selected) .selection {
+    display: block;
+    left: 3px;
+    right: 3px;
+    background-color: rgba(56, 121, 217, 0.1);
+    border-radius: 5px;
+}
+
+.outline-disclosure li.highlighted .highlight {
+    background-color: rgb(255, 230, 179);
+    border-radius: 4px;
+    padding-bottom: 2px;
+    margin-bottom: -2px;
+}
+
+.outline-disclosure li.selected.highlighted .highlight {
+    background-color: transparent;
+    padding-bottom: 0;
+    margin-bottom: 0;
+}
+
+.outline-disclosure li .selection {
+    display: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 15px;
+    z-index: -1;
+}
+
+.outline-disclosure li.selected .selection {
+    display: block;
+    background-color: rgb(212, 212, 212);
+}
+
+.outline-disclosure li.elements-drag-over .selection {
+    display: block;
+    margin-top: -2px;
+    border-top: 2px solid rgb(56, 121, 217);
+}
+
+.outline-disclosure ol:focus li.selected .selection {
+    background-color: rgb(56, 121, 217);
+}
+
+.outline-disclosure ol.search-match-not-found li.selected .selection {
+    border: 1px solid rgb(56, 121, 217);
+    background-color: white;
+}
+
+.outline-disclosure {
+    font-size: 11px;
+}
+
+.outline-disclosure > ol {
+    position: relative;
+    padding: 2px 6px !important;
+    margin: 0;
+    color: black;
+    cursor: default;
+    min-width: 100%;
+}
+
+.outline-disclosure, .outline-disclosure ol {
+    list-style-type: none;
+    -webkit-padding-start: 12px;
+    margin: 0;
+}
+
+.outline-disclosure li {
+    padding: 0 0 0 14px;
+    margin-top: 1px;
+    margin-bottom: 1px;
+    margin-left: -2px;
+    word-wrap: break-word;
+}
+
+.outline-disclosure ol:focus li.selected {
+    color: white;
+}
+
+.outline-disclosure ol.search-match-found li.selected {
+    color: white;
+}
+
+.outline-disclosure ol:focus li.selected * {
+    color: inherit;
+}
+
+.outline-disclosure ol.search-match-found li.selected * {
+    color: inherit;
+}
+
+.outline-disclosure li.parent {
+    margin-left: -12px
+}
+
+.outline-disclosure li .webkit-html-tag.close {
+    margin-left: -12px;
+}
+
+.outline-disclosure li.parent::before {
+    float: left;
+
+    content: "";
+
+    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal);
+    background-size: 8px 8px;
+    background-repeat: no-repeat;
+
+    width: 8px;
+    height: 8px;
+
+    margin-top: 2px;
+    padding-right: 2px;
+}
+
+.console-messages:focus .console-item.selected .outline-disclosure li.parent::before {
+    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-selected);
+}
+
+.outline-disclosure li.parent.expanded::before {
+    background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
+}
+
+.console-messages:focus .console-item.selected .outline-disclosure li.parent.expanded::before {
+    background-image: -webkit-canvas(disclosure-triangle-tiny-open-selected);
+}
+
+.outline-disclosure ol.children {
+    display: none;
+}
+
+.outline-disclosure ol.children.expanded {
+    display: block;
+}
+
+.webkit-html-fragment.shadow {
+    opacity: 0.6;
+}
+
+.console-item.filtered-out {
+    display: none;
+}
+
+.log-search-bar > input {
+    width: 150px;
+}
+
+.search-in-progress .console-item.filtered-out-by-search {
+    display: none;
+}
+
+.search-in-progress .console-item:not(.filtered-out-by-search) .highlighted {
+    color: black;
+    background-color: rgba(235, 215, 38, 0.2);
+    border-bottom: 1px solid rgb(237, 202, 71);
+}
+
+.search-in-progress .console-item:not(.filtered-out-by-search) .highlighted.selected {
+    background-color: rgba(235, 215, 38, 0.75);
+}
+
+/* @media reader currently blocked by: http://webkit.org/b/118096 */
+@media reader {
+    .console-user-command::before, 
+    .console-messages:focus .console-item.selected .console-user-command::before,
+    .console-user-command-result.console-log-level::before,
+    .console-messages:focus .console-item.selected .console-user-command-result.console-log-level::before {
+        /* accessible label alternative for icon indicating console input/output/warning/error, etc. */
+        content: attr(data-labelprefix);
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/LogContentView.js b/Source/WebInspectorUI/UserInterface/LogContentView.js
new file mode 100644
index 000000000..d559446ef
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/LogContentView.js
@@ -0,0 +1,938 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LogContentView = function(representedObject)
+{
+    WebInspector.ContentView.call(this, representedObject);
+
+    this._nestingLevel = 0;
+    this._selectedMessages = [];
+
+    this.element.classList.add(WebInspector.LogContentView.StyleClassName);
+
+    this.messagesElement = document.createElement("div");
+    this.messagesElement.className = "console-messages";
+    this.messagesElement.tabIndex = 0;
+    this.messagesElement.setAttribute("role", "log");
+    this.messagesElement.addEventListener("mousedown", this._mousedown.bind(this));
+    this.messagesElement.addEventListener("focus", this._didFocus.bind(this));
+    this.messagesElement.addEventListener("blur", this._didBlur.bind(this));
+    this.messagesElement.addEventListener("keydown", this._keyDown.bind(this));
+    this.messagesElement.addEventListener("click", this._click.bind(this), true);
+    this.element.appendChild(this.messagesElement);
+
+    this.prompt = WebInspector.quickConsole.prompt;
+
+    this._keyboardShortcutCommandA = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "A");
+    this._keyboardShortcutEsc = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape);
+
+    this._logViewController = new WebInspector.JavaScriptLogViewController(this.messagesElement, this.element, this.prompt, this, "console-prompt-history");
+
+    this._searchBar = new WebInspector.SearchBar("log-search-bar", WebInspector.UIString("Filter Console Log"), this);
+    this._searchBar.addEventListener(WebInspector.SearchBar.Event.TextChanged, this._searchTextDidChange, this);
+
+    var scopeBarItems = [
+        new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.All, WebInspector.UIString("All"), true),
+        new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.Errors, WebInspector.UIString("Errors")),
+        new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.Warnings, WebInspector.UIString("Warnings")),
+        new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.Logs, WebInspector.UIString("Logs"))
+    ];
+
+    this._scopeBar = new WebInspector.ScopeBar("log-scope-bar", scopeBarItems, scopeBarItems[0]);
+    this._scopeBar.addEventListener(WebInspector.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionDidChange, this);
+
+    this._clearLogNavigationItem = new WebInspector.ButtonNavigationItem("clear-log", WebInspector.UIString("Clear log (%s or %s)").format(this._logViewController.messagesClearKeyboardShortcut.displayName, this._logViewController.messagesAlternateClearKeyboardShortcut.displayName), "Images/NavigationItemTrash.pdf", 16, 16);
+    this._clearLogNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearLog, this);
+
+    var toolTip = WebInspector.UIString("Show split console");
+    var altToolTip = WebInspector.UIString("Show full-height console");
+
+    this._toggleSplitNavigationItem = new WebInspector.ToggleButtonNavigationItem("split-toggle", toolTip, altToolTip, "Images/SplitToggleDown.pdf", "Images/SplitToggleUp.pdf", 16, 16);
+    this._toggleSplitNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleSplit, this);
+    this._toggleSplitNavigationItem.toggled = WebInspector.isShowingSplitConsole();
+
+    this.messagesElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), false);
+
+    WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.Cleared, this._sessionsCleared, this);
+    WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.SessionStarted, this._sessionStarted, this);
+    WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.MessageAdded, this._messageAdded, this);
+    WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.PreviousMessageRepeatCountUpdated, this._previousMessageRepeatCountUpdated, this);
+    WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.ActiveLogCleared, this._activeLogCleared, this);
+}
+
+WebInspector.LogContentView.Scopes = {
+    All: "log-all",
+    Errors: "log-errors",
+    Warnings: "log-warnings",
+    Logs: "log-logs"
+};
+
+WebInspector.LogContentView.StyleClassName = "log";
+WebInspector.LogContentView.ItemWrapperStyleClassName = "console-item";
+WebInspector.LogContentView.FilteredOutStyleClassName = "filtered-out";
+WebInspector.LogContentView.SelectedStyleClassName = "selected";
+WebInspector.LogContentView.SearchInProgressStyleClassName = "search-in-progress";
+WebInspector.LogContentView.FilteredOutBySearchStyleClassName = "filtered-out-by-search";
+WebInspector.LogContentView.HighlightedStyleClassName = "highlighted";
+
+WebInspector.LogContentView.prototype = {
+    constructor: WebInspector.LogContentView,
+
+    // Public
+
+    get navigationItems()
+    {
+        return [this._searchBar, this._scopeBar, this._clearLogNavigationItem, this._toggleSplitNavigationItem];
+    },
+
+    get scopeBar()
+    {
+        return this._scopeBar;
+    },
+
+    updateLayout: function()
+    {
+        WebInspector.ContentView.prototype.updateLayout.call(this);
+
+        this._scrollElementHeight = this.messagesElement.getBoundingClientRect().height;
+    },
+
+    shown: function()
+    {
+        this._toggleSplitNavigationItem.toggled = WebInspector.isShowingSplitConsole();
+
+        this.prompt.focus();
+    },
+
+    get scrollableElements()
+    {
+        return [this.element];
+    },
+
+    get shouldKeepElementsScrolledToBottom()
+    {
+        return true;
+    },
+
+    get searchInProgress()
+    {
+        return this.messagesElement.classList.contains(WebInspector.LogContentView.SearchInProgressStyleClassName);
+    },
+
+    didClearMessages: function()
+    {
+        if (this._ignoreDidClearMessages)
+            return;
+        WebInspector.logManager.requestClearMessages();
+    },
+
+    didAppendConsoleMessage: function(message)
+    {
+        WebInspector.quickConsole.updateLayout();
+
+        // Nest the message.
+        if (message.type !== WebInspector.ConsoleMessage.MessageType.EndGroup) {
+            var x = 16 * this._nestingLevel;
+            var messageElement = message.toMessageElement();
+            messageElement.style.left = x + "px";
+            messageElement.style.width = "calc(100% - " + x + "px)";
+        }
+
+        // Update the nesting level.
+        switch (message.type) {
+        case WebInspector.ConsoleMessage.MessageType.StartGroup:
+        case WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed:
+            ++this._nestingLevel;
+            break;
+        case WebInspector.ConsoleMessage.MessageType.EndGroup:
+            --this._nestingLevel;
+            break;
+        }
+
+        this._clearFocusableChildren();
+
+        // Some results don't populate until further backend dispatches occur (like the DOM tree).
+        // We want to remove focusable children after those pending dispatches too.
+        InspectorBackend.runAfterPendingDispatches(this._clearFocusableChildren.bind(this));
+
+        // We only auto show the console if the message is a result.
+        // This is when the user evaluated something directly in the prompt.
+        if (message.type !== WebInspector.ConsoleMessage.MessageType.Result)
+            return;
+
+        if (!WebInspector.isShowingConsoleView())
+            WebInspector.showSplitConsole();
+
+        this._logViewController.scrollToBottom();
+    },
+
+    promptDidChangeHeight: function()
+    {
+        WebInspector.quickConsole.updateLayout();
+    },
+
+    get supportsSave()
+    {
+        return true;
+    },
+
+    get saveData()
+    {
+        return {url: "web-inspector:///Console.txt", content: this._formatMessagesAsData(false), forceSaveAs: true};
+    },
+
+    handleCopyEvent: function(event)
+    {
+        if (!this._selectedMessages.length)
+            return;
+
+        event.clipboardData.setData("text/plain", this._formatMessagesAsData(true));
+        event.stopPropagation();
+        event.preventDefault();
+    },
+
+    focusSearchBar: function()
+    {
+        this._searchBar.focus();
+    },
+
+    highlightPreviousSearchMatch: function()
+    {
+        if (!this.searchInProgress || isEmptyObject(this._searchMatches))
+            return;
+
+        var index = this._selectedSearchMatch ? this._searchMatches.indexOf(this._selectedSearchMatch) : this._searchMatches.length;
+        this._highlightSearchMatchAtIndex(index - 1);
+    },
+    
+    highlightNextSearchMatch: function()
+    {
+        if (!this.searchInProgress || isEmptyObject(this._searchMatches))
+            return;
+
+        var index = this._selectedSearchMatch ? this._searchMatches.indexOf(this._selectedSearchMatch) + 1 : 0;
+        this._highlightSearchMatchAtIndex(index);
+    },
+
+    searchBarWantsToLoseFocus: function(searchBar)
+    {
+        if (this._selectedMessages.length)
+            this.messagesElement.focus();
+        else
+            this.prompt.focus();
+    },
+
+    searchBarDidActivate: function(searchBar)
+    {
+        if (!isEmptyObject(this._searchMatches))
+            this._highlightSearchMatchAtIndex(0);
+        this.prompt.focus();
+    },
+
+    // Private
+
+    _formatMessagesAsData: function(onlySelected)
+    {
+        var messages = this._allMessages();
+
+        if (onlySelected) {
+            messages = this._allMessages().filter(function(message) {
+                return message.parentNode.classList.contains(WebInspector.LogContentView.SelectedStyleClassName);
+            });
+        }
+
+        var data = "";
+
+        var isPrefixOptional = messages.length <= 1 && onlySelected;
+        messages.forEach(function (messageElement, index) {
+            var messageObject = messageElement.message;
+            if (!messageObject)
+                messageObject = messageElement.command;
+            if (!messageObject)
+                return;
+
+            if (index > 0)
+                data += "\n"
+            data += messageObject.toClipboardString(isPrefixOptional);
+        });
+
+        return data;
+    },
+
+    _sessionsCleared: function(event)
+    {
+        this._ignoreDidClearMessages = true;
+        this._logViewController.clear();
+        this._ignoreDidClearMessages = false;
+    },
+
+    _sessionStarted: function(event)
+    {
+        this._logViewController.startNewSession();
+    },
+
+    _messageAdded: function(event)
+    {
+        var message = this._logViewController.appendConsoleMessage(event.data.message);
+        if (message.type !== WebInspector.ConsoleMessage.MessageType.EndGroup)
+            this._filterMessages([message.toMessageElement()]);
+    },
+
+    _previousMessageRepeatCountUpdated: function(event)
+    {
+        this._logViewController.updatePreviousMessageRepeatCount(event.data.count);
+    },
+
+    _handleContextMenuEvent: function(event)
+    {
+        if (!window.getSelection().isCollapsed) {
+            // If there is a selection, we want to show our normal context menu
+            // (with Copy, etc.), and not Clear Log.
+            return;
+        }
+
+        // We don't want to show the custom menu for links in the console.
+        if (event.target.enclosingNodeOrSelfWithNodeName("a"))
+            return;
+
+        var contextMenu = new WebInspector.ContextMenu(event);
+        contextMenu.appendItem(WebInspector.UIString("Clear Log"), this._clearLog.bind(this));
+        contextMenu.show();
+    },
+
+    _mousedown: function(event)
+    {
+        if (event.button !== 0 || event.ctrlKey)
+            return;
+
+        if (event.defaultPrevented) {
+            // Default was prevented on the event, so this means something deeper (like a disclosure triangle)
+            // handled the mouse down. In this case we want to clear the selection and don't make a new selection.
+            this._clearMessagesSelection();
+            return;
+        }
+
+        if (!this._focused) {
+            this.messagesElement.focus();
+            if (this._selectedMessages.length)
+                return;
+        }
+
+        this._mouseDownWrapper = event.target.enclosingNodeOrSelfWithClass(WebInspector.LogContentView.ItemWrapperStyleClassName);
+        this._mouseDownShiftKey = event.shiftKey;
+        this._mouseDownCommandKey = event.metaKey;
+        this._mouseMoveIsRowSelection = false;
+
+        window.addEventListener("mousemove", this);
+        window.addEventListener("mouseup", this);
+    },
+
+    _targetInMessageCanBeSelected: function(target, message)
+    {
+        if (target.enclosingNodeOrSelfWithNodeName("a"))
+            return false;
+        return true;
+    },
+
+    _mousemove: function(event)
+    {
+        var selection = window.getSelection();
+        var wrapper = event.target.enclosingNodeOrSelfWithClass(WebInspector.LogContentView.ItemWrapperStyleClassName);
+
+        if (!wrapper) {
+            // No wrapper under the mouse, so look at the selection to try and find one.
+            if (!selection.isCollapsed) {
+                wrapper = selection.focusNode.parentNode.enclosingNodeOrSelfWithClass(WebInspector.LogContentView.ItemWrapperStyleClassName);
+                selection.removeAllRanges();
+            }
+
+            if (!wrapper)
+                return;
+        }
+
+        if (!selection.isCollapsed)
+            this._clearMessagesSelection();
+
+        if (wrapper === this._mouseDownWrapper && !this._mouseMoveIsRowSelection)
+            return;
+
+        selection.removeAllRanges();
+
+        if (!this._mouseMoveIsRowSelection)
+            this._updateMessagesSelection(this._mouseDownWrapper.messageElement, this._mouseDownCommandKey, this._mouseDownShiftKey);
+        this._updateMessagesSelection(wrapper.messageElement, false, true);
+
+        this._mouseMoveIsRowSelection = true;
+
+        event.preventDefault();
+        event.stopPropagation();
+    },
+
+    _mouseup: function(event)
+    {
+        window.removeEventListener("mousemove", this);
+        window.removeEventListener("mouseup", this);
+
+        var selection = window.getSelection();
+        var wrapper = event.target.enclosingNodeOrSelfWithClass(WebInspector.LogContentView.ItemWrapperStyleClassName);
+
+        if (wrapper && (selection.isCollapsed || event.shiftKey)) {
+            selection.removeAllRanges();
+
+            var message = wrapper.messageElement;
+            if (this._targetInMessageCanBeSelected(event.target, message)) {
+                var sameWrapper = wrapper === this._mouseDownWrapper;
+                this._mouseInteractionShouldPreventClickPropagation = !this._isMessageSelected(message);
+                this._updateMessagesSelection(message, sameWrapper ? this._mouseDownCommandKey : false, sameWrapper ? this._mouseDownShiftKey : true);
+            }
+        } else if (!selection.isCollapsed) {
+            // There is a text selection, clear the row selection.
+            this._clearMessagesSelection();
+        } else if (!this._mouseDownWrapper) {
+            // The mouse didn't hit a console item, so clear the row selection.
+            this._clearMessagesSelection();
+
+            // Focus the prompt. Focusing the prompt needs to happen after the click to work.
+            setTimeout(function () { this.prompt.focus() }.bind(this), 0);
+        }
+
+        delete this._mouseMoveIsRowSelection;
+        delete this._mouseDownWrapper;
+        delete this._mouseDownShiftKey;
+        delete this._mouseDownCommandKey;
+    },
+
+    _click: function(event)
+    {
+        if (!this._mouseInteractionShouldPreventClickPropagation)
+            return;
+
+        event.stopPropagation();
+        delete this._mouseInteractionShouldPreventClickPropagation;
+    },
+
+    handleEvent: function(event)
+    {
+        switch (event.type) {
+        case "mousemove":
+            this._mousemove(event);
+            break;
+        case "mouseup":
+            this._mouseup(event);
+            break;
+        }
+    },
+
+    _updateMessagesSelection: function(message, multipleSelection, rangeSelection)
+    {
+        var alreadySelectedMessage = this._selectedMessages.contains(message);
+        if (alreadySelectedMessage && this._selectedMessages.length && multipleSelection) {
+            message.parentNode.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
+            this._selectedMessages.remove(message);
+            return;
+        }
+
+        if (!multipleSelection && !rangeSelection)
+            this._clearMessagesSelection();
+
+        if (rangeSelection) {
+            var messages = this._visibleMessages();
+
+            var refIndex = this._referenceMessageForRangeSelection ? messages.indexOf(this._referenceMessageForRangeSelection) : 0;
+            var targetIndex = messages.indexOf(message);
+
+            var newRange = [Math.min(refIndex, targetIndex), Math.max(refIndex, targetIndex)];
+
+            if (this._selectionRange && this._selectionRange[0] === newRange[0] && this._selectionRange[1] === newRange[1])
+                return;
+
+            var startIndex = this._selectionRange ? Math.min(this._selectionRange[0], newRange[0]) : newRange[0];
+            var endIndex = this._selectionRange ? Math.max(this._selectionRange[1], newRange[1]) : newRange[1];
+
+            for (var i = startIndex; i <= endIndex; ++i) {
+                var messageInRange = messages[i];
+                if (i >= newRange[0] && i <= newRange[1] && !messageInRange.parentNode.classList.contains(WebInspector.LogContentView.SelectedStyleClassName)) {
+                    messageInRange.parentNode.classList.add(WebInspector.LogContentView.SelectedStyleClassName);
+                    this._selectedMessages.push(messageInRange);
+                } else if (i < newRange[0] || i > newRange[1] && messageInRange.parentNode.classList.contains(WebInspector.LogContentView.SelectedStyleClassName)) {
+                    messageInRange.parentNode.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
+                    this._selectedMessages.remove(messageInRange);
+                }
+            }
+
+            this._selectionRange = newRange;
+        } else {
+            message.parentNode.classList.add(WebInspector.LogContentView.SelectedStyleClassName);
+            this._selectedMessages.push(message);
+        }
+
+        if (!rangeSelection)
+            this._referenceMessageForRangeSelection = message;
+
+        if (!alreadySelectedMessage)
+            this._ensureMessageIsVisible(this._selectedMessages.lastValue);
+    },
+
+    _ensureMessageIsVisible: function(message)
+    {
+        if (!message)
+            return;
+
+        var y = this._positionForMessage(message).y;
+        if (y < 0) {
+            this.element.scrollTop += y;
+            return;
+        }
+
+        var nextMessage = this._nextMessage(message);
+        if (nextMessage) {
+            y = this._positionForMessage(nextMessage).y;
+            if (y > this._scrollElementHeight)
+                this.element.scrollTop += y - this._scrollElementHeight;
+        } else {
+            y += message.getBoundingClientRect().height;
+            if (y > this._scrollElementHeight)
+                this.element.scrollTop += y - this._scrollElementHeight;
+        }
+    },
+
+    _positionForMessage: function(message)
+    {
+        var pagePoint = window.webkitConvertPointFromNodeToPage(message, new WebKitPoint(0, 0));
+        return window.webkitConvertPointFromPageToNode(this.element, pagePoint);
+    },
+
+    _isMessageVisible: function(message)
+    {
+        var node = message.parentNode;
+
+        if (node.classList.contains(WebInspector.LogContentView.FilteredOutStyleClassName))
+            return false;
+
+        if (this.searchInProgress && node.classList.contains(WebInspector.LogContentView.FilteredOutBySearchStyleClassName))
+            return false;
+
+        if (message.classList.contains("console-group-title"))
+            node = node.parentNode.parentNode;
+
+        while (node && node !== this.messagesElement) {
+            if (node.classList.contains("collapsed"))
+                return false;
+            node = node.parentNode;
+        }
+
+        return true;
+    },
+
+    _isMessageSelected: function(message)
+    {
+        return message.parentNode.classList.contains(WebInspector.LogContentView.SelectedStyleClassName);
+    },
+
+    _clearMessagesSelection: function()
+    {
+        this._selectedMessages.forEach(function(message) {
+            message.parentNode.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
+        });
+        this._selectedMessages = [];
+        delete this._referenceMessageForRangeSelection;
+    },
+
+    _selectAllMessages: function()
+    {
+        this._clearMessagesSelection();
+
+        var messages = this._visibleMessages();
+        for (var i = 0; i < messages.length; ++i) {
+            var message = messages[i];
+            message.parentNode.classList.add(WebInspector.LogContentView.SelectedStyleClassName);
+            this._selectedMessages.push(message);
+        }
+    },
+
+    _allMessages: function()
+    {
+        return Array.prototype.slice.call(this.messagesElement.querySelectorAll(".console-message, .console-user-command"));
+    },
+
+    _unfilteredMessages: function()
+    {
+        return this._allMessages().filter(function(message) {
+            return !message.parentNode.classList.contains(WebInspector.LogContentView.FilteredOutStyleClassName);
+        });
+    },
+
+    _visibleMessages: function()
+    {
+        var unfilteredMessages = this._unfilteredMessages();
+
+        if (!this.searchInProgress)
+            return unfilteredMessages;
+
+        return unfilteredMessages.filter(function(message) {
+            return !message.parentNode.classList.contains(WebInspector.LogContentView.FilteredOutBySearchStyleClassName);
+        });
+    },
+
+    _activeLogCleared: function(event)
+    {
+        this._ignoreDidClearMessages = true;
+        this._logViewController.clear();
+        this._ignoreDidClearMessages = false;
+    },
+
+    _toggleSplit: function()
+    {
+        if (WebInspector.isShowingSplitConsole())
+            WebInspector.showFullHeightConsole();
+        else
+            WebInspector.showSplitConsole();
+    },
+
+    _clearLog: function()
+    {
+        this._logViewController.clear();
+    },
+
+    _scopeBarSelectionDidChange: function(event)
+    {
+        this._filterMessages(this._allMessages());
+    },
+
+    _filterMessages: function(messages)
+    {
+        var showsAll = this._scopeBar.item(WebInspector.LogContentView.Scopes.All).selected;
+        var showsErrors = this._scopeBar.item(WebInspector.LogContentView.Scopes.Errors).selected;
+        var showsWarnings = this._scopeBar.item(WebInspector.LogContentView.Scopes.Warnings).selected;
+        var showsLogs = this._scopeBar.item(WebInspector.LogContentView.Scopes.Logs).selected;
+
+        messages.forEach(function(message) {
+            var visible = showsAll || message.command instanceof WebInspector.ConsoleCommand || message.message instanceof WebInspector.ConsoleCommandResult;
+            if (!visible) {
+                switch(message.message.level) {
+                    case WebInspector.ConsoleMessage.MessageLevel.Warning:
+                        visible = showsWarnings;
+                        break;
+                    case WebInspector.ConsoleMessage.MessageLevel.Error:
+                        visible = showsErrors;
+                        break;
+                    case WebInspector.ConsoleMessage.MessageLevel.Log:
+                        visible = showsLogs;
+                        break;
+                }
+            }
+
+            var classList = message.parentNode.classList;
+            if (visible)
+                classList.remove(WebInspector.LogContentView.FilteredOutStyleClassName);
+            else {
+                this._selectedMessages.remove(message);
+                classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
+                classList.add(WebInspector.LogContentView.FilteredOutStyleClassName);
+            }
+        }.bind(this));
+
+        this._performSearch();
+    },
+
+    _didFocus: function(event)
+    {
+        this._focused = true;
+    },
+
+    _didBlur: function(event)
+    {
+        this._focused = false;
+    },
+
+    _keyDown: function(event)
+    {
+        if (this._keyboardShortcutCommandA.matchesEvent(event))
+            this._commandAWasPressed(event);
+        else if (this._keyboardShortcutEsc.matchesEvent(event))
+            this._escapeWasPressed(event);
+        else if (event.keyIdentifier === "Up")
+            this._upArrowWasPressed(event);
+        else if (event.keyIdentifier === "Down")
+            this._downArrowWasPressed(event);
+        else if (event.keyIdentifier === "Left")
+            this._leftArrowWasPressed(event);
+        else if (event.keyIdentifier === "Right")
+            this._rightArrowWasPressed(event);
+    },
+
+    _commandAWasPressed: function(event)
+    {
+        this._selectAllMessages();
+        event.preventDefault();
+    },
+
+    _escapeWasPressed: function(event)
+    {
+        if (this._selectedMessages.length)
+            this._clearMessagesSelection();
+        else
+            this.prompt.focus();
+
+        event.preventDefault();
+    },
+
+    _upArrowWasPressed: function(event)
+    {
+        var messages = this._visibleMessages();
+
+        if (!this._selectedMessages.length) {
+            if (messages.length)
+                this._updateMessagesSelection(messages.lastValue, false, false);
+            return;
+        }
+
+        var lastMessage = this._selectedMessages.lastValue;
+        var previousMessage = this._previousMessage(lastMessage);
+        if (previousMessage)
+            this._updateMessagesSelection(previousMessage, false, event.shiftKey);
+        else if (!event.shiftKey) {
+            this._clearMessagesSelection();
+            this._updateMessagesSelection(messages[0], false, false);
+        }
+
+        event.preventDefault();
+    },
+
+    _downArrowWasPressed: function(event)
+    {
+        var messages = this._visibleMessages();
+
+        if (!this._selectedMessages.length) {
+            if (messages.length)
+                this._updateMessagesSelection(messages[0], false, false);
+            return;
+        }
+
+        var lastMessage = this._selectedMessages.lastValue;
+        var nextMessage = this._nextMessage(lastMessage);
+        if (nextMessage)
+            this._updateMessagesSelection(nextMessage, false, event.shiftKey);
+        else if (!event.shiftKey) {
+            this._clearMessagesSelection();
+            this._updateMessagesSelection(messages.lastValue, false, false);
+        }
+
+        event.preventDefault();
+    },
+
+    _leftArrowWasPressed: function(event)
+    {
+        if (this._selectedMessages.length !== 1)
+            return;
+
+        var currentMessage = this._selectedMessages[0];
+        if (currentMessage.classList.contains("console-group-title"))
+            currentMessage.parentNode.parentNode.classList.add("collapsed");
+        else {
+            var outlineTitle = currentMessage.querySelector("ol.outline-disclosure > li.parent");
+            if (outlineTitle) {
+                if (event.altKey)
+                    outlineTitle.treeElement.collapseRecursively();
+                else
+                    outlineTitle.treeElement.collapse();
+            } else {
+                var outlineSection = currentMessage.querySelector(".console-formatted-object > .section");
+                if (outlineSection)
+                    outlineSection._section.collapse();
+            }
+        }
+    },
+
+    _rightArrowWasPressed: function(event)
+    {
+        if (this._selectedMessages.length !== 1)
+            return;
+
+        var currentMessage = this._selectedMessages[0];
+        if (currentMessage.classList.contains("console-group-title"))
+            currentMessage.parentNode.parentNode.classList.remove("collapsed");
+        else {
+            var outlineTitle = currentMessage.querySelector("ol.outline-disclosure > li.parent");
+            if (outlineTitle) {
+                outlineTitle.treeElement.onexpand = function() {
+                    setTimeout(function () {
+                        this._ensureMessageIsVisible(currentMessage);
+                        this._clearFocusableChildren();
+                        delete outlineTitle.treeElement.onexpand;
+                    }.bind(this));
+                }.bind(this);
+
+                if (event.altKey)
+                    outlineTitle.treeElement.expandRecursively();
+                else
+                    outlineTitle.treeElement.expand();
+            } else {
+                var outlineSection = currentMessage.querySelector(".console-formatted-object > .section");
+                if (outlineSection) {
+                    outlineSection._section.addEventListener(WebInspector.Section.Event.VisibleContentDidChange, this._propertiesSectionDidUpdateContent, this);
+                    outlineSection._section.expand();
+                }
+            }
+        }
+    },
+
+    _propertiesSectionDidUpdateContent: function(event)
+    {
+        var section = event.target;
+        section.removeEventListener(WebInspector.Section.Event.VisibleContentDidChange, this._propertiesSectionDidUpdateContent, this);
+
+        var message = section.element.enclosingNodeOrSelfWithClass(WebInspector.LogContentView.ItemWrapperStyleClassName).messageElement;
+        if (!this._isMessageSelected(message))
+            return;
+
+        setTimeout(function () {
+            this._ensureMessageIsVisible(message);
+            this._clearFocusableChildren();
+        }.bind(this));
+    },
+
+    _previousMessage: function(message)
+    {
+        var messages = this._visibleMessages();
+        for (var i = messages.indexOf(message) - 1; i >= 0; --i) {
+            if (this._isMessageVisible(messages[i]))
+                return messages[i];
+        }
+    },
+
+    _nextMessage: function(message)
+    {
+        var messages = this._visibleMessages();
+        for (var i = messages.indexOf(message) + 1; i < messages.length; ++i) {
+            if (this._isMessageVisible(messages[i]))
+                return messages[i];
+        }
+    },
+
+    _clearFocusableChildren: function()
+    {
+        var focusableElements = this.messagesElement.querySelectorAll("[tabindex]");
+        for (var i = 0, count = focusableElements.length; i < count; ++i)
+            focusableElements[i].removeAttribute("tabindex");
+    },
+
+    _searchTextDidChange: function(event)
+    {
+        this._performSearch();
+    },
+    
+    _performSearch: function()
+    {
+        if (!isEmptyObject(this._searchHighlightDOMChanges))
+            WebInspector.revertDomChanges(this._searchHighlightDOMChanges);
+
+        var searchTerms = this._searchBar.text;
+
+        if (searchTerms === "") {
+            delete this._selectedSearchMatch;
+            this._matchingSearchElements = [];
+            this.messagesElement.classList.remove(WebInspector.LogContentView.SearchInProgressStyleClassName);
+            return;
+        };
+
+        this.messagesElement.classList.add(WebInspector.LogContentView.SearchInProgressStyleClassName);
+
+        this._searchHighlightDOMChanges = [];
+        this._searchMatches = [];
+        this._selectedSearchMathIsValid = false;
+
+        var searchRegex = new RegExp(searchTerms.escapeForRegExp(), "gi");
+        this._unfilteredMessages().forEach(function(message) {
+            var matchRanges = [];
+            var text = message.textContent;
+            var match = searchRegex.exec(text);
+            while (match) {
+                matchRanges.push({ offset: match.index, length: match[0].length });
+                match = searchRegex.exec(text);
+            }
+
+            if (!isEmptyObject(matchRanges))
+                this._highlightRanges(message, matchRanges);
+
+            var classList = message.parentNode.classList;
+            if (!isEmptyObject(matchRanges) || message.command instanceof WebInspector.ConsoleCommand || message.message instanceof WebInspector.ConsoleCommandResult)
+                classList.remove(WebInspector.LogContentView.FilteredOutBySearchStyleClassName);
+            else
+                classList.add(WebInspector.LogContentView.FilteredOutBySearchStyleClassName);
+        }, this);
+
+        if (!this._selectedSearchMathIsValid && this._selectedSearchMatch) {
+            this._selectedSearchMatch.highlight.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
+            delete this._selectedSearchMatch;
+        }
+    },
+    
+    _highlightRanges: function(message, matchRanges)
+    {
+        var highlightedElements = WebInspector.highlightRangesWithStyleClass(message, matchRanges, WebInspector.LogContentView.HighlightedStyleClassName, this._searchHighlightDOMChanges);
+
+        console.assert(highlightedElements.length === matchRanges.length);
+        
+        matchRanges.forEach(function (range, index) {
+            this._searchMatches.push({
+                message: message,
+                range: range,
+                highlight: highlightedElements[index]
+            });
+
+            if (this._selectedSearchMatch && !this._selectedSearchMathIsValid && this._selectedSearchMatch.message === message) {
+                this._selectedSearchMathIsValid = this._rangesOverlap(this._selectedSearchMatch.range, range)
+                if (this._selectedSearchMathIsValid) {
+                    delete this._selectedSearchMatch;
+                    this._highlightSearchMatchAtIndex(this._searchMatches.length - 1);
+                }
+            }
+        }, this);
+    },
+    
+    _rangesOverlap: function(range1, range2)
+    {
+        return range1.offset <= range2.offset + range2.length && range2.offset <= range1.offset + range1.length;
+    },
+
+    _highlightSearchMatchAtIndex: function(index)
+    {
+        if (index >= this._searchMatches.length)
+            index = 0;
+        else if (index < 0)
+            index = this._searchMatches.length - 1;
+
+        if (this._selectedSearchMatch)
+            this._selectedSearchMatch.highlight.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
+
+        this._selectedSearchMatch = this._searchMatches[index];
+        this._selectedSearchMatch.highlight.classList.add(WebInspector.LogContentView.SelectedStyleClassName);
+
+        this._ensureMessageIsVisible(this._selectedSearchMatch.message);
+    }
+}
+
+WebInspector.LogContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LogIcon.css b/Source/WebInspectorUI/UserInterface/LogIcon.css
new file mode 100644
index 000000000..30658caf5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/LogIcon.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.log-icon .icon {
+    content: -webkit-image-set(url(Images/Log.png) 1x, url(Images/Log@2x.png) 2x);
+}
diff --git a/Source/WebInspectorUI/UserInterface/LogManager.js b/Source/WebInspectorUI/UserInterface/LogManager.js
new file mode 100644
index 000000000..f044339c7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/LogManager.js
@@ -0,0 +1,104 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LogManager = function()
+{
+    WebInspector.Object.call(this);
+
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+}
+
+WebInspector.LogManager.Event = {
+    SessionStarted: "log-manager-session-was-started",
+    Cleared: "log-manager-cleared",
+    MessageAdded: "log-manager-message-added",
+    ActiveLogCleared: "log-manager-current-log-cleared",
+    PreviousMessageRepeatCountUpdated: "log-manager-previous-message-repeat-count-updated"
+};
+
+WebInspector.LogManager.prototype = {
+    constructor: WebInspector.LogManager,
+
+    // Public
+
+    messageWasAdded: function(source, level, text, type, url, line, column, repeatCount, parameters, stackTrace, requestId)
+    {
+        // Called from WebInspector.ConsoleObserver.
+
+        // FIXME: Pass a request. We need a way to get it from the request ID.
+        var consoleMessage = WebInspector.ConsoleMessage.create(source, level, text, type, url, line, column, repeatCount, parameters, stackTrace, null);
+
+        this.dispatchEventToListeners(WebInspector.LogManager.Event.MessageAdded, {message: consoleMessage});
+
+        console.assert(!consoleMessage._element || !consoleMessage._element.parentNode, "This console message shouldn't be added to a view. To add it you need to use clone().");
+    },
+
+    messagesCleared: function()
+    {
+        // Called from WebInspector.ConsoleObserver.
+
+        // We don't want to clear messages on reloads. We can't determine that easily right now.
+        // FIXME: <rdar://problem/13767079> Console.messagesCleared should include a reason
+        this._shouldClearMessages = true;
+        setTimeout(function() {
+            if (this._shouldClearMessages)
+                this.dispatchEventToListeners(WebInspector.LogManager.Event.ActiveLogCleared);
+            delete this._shouldClearMessages;
+        }.bind(this), 0);
+    },
+
+    messageRepeatCountUpdated: function(count)
+    {
+        // Called from WebInspector.ConsoleObserver.
+
+        this.dispatchEventToListeners(WebInspector.LogManager.Event.PreviousMessageRepeatCountUpdated, {count: count});
+    },
+
+    requestClearMessages: function()
+    {
+        ConsoleAgent.clearMessages();
+    },
+
+    // Private
+
+    _mainResourceDidChange: function(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        if (!event.target.isMainFrame())
+            return;
+
+        var oldMainResource = event.data.oldMainResource;
+        var newMainResource = event.target.mainResource;
+        if (oldMainResource.url !== newMainResource.url)
+            this.dispatchEventToListeners(WebInspector.LogManager.Event.Cleared);
+        else
+            this.dispatchEventToListeners(WebInspector.LogManager.Event.SessionStarted);
+
+        delete this._shouldClearMessages;
+    }
+};
+
+WebInspector.LogManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LogObject.js b/Source/WebInspectorUI/UserInterface/LogObject.js
new file mode 100644
index 000000000..5d2da4dd8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/LogObject.js
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LogObject = function()
+{
+    WebInspector.Object.call(this);
+
+    this._startDate = new Date();
+};
+
+WebInspector.LogObject.prototype = {
+    constructor: WebInspector.LogObject,
+
+    // Public
+
+    get startDate()
+    {
+        return this._startDate;
+    }
+};
+
+WebInspector.LogManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LogTreeElement.js b/Source/WebInspectorUI/UserInterface/LogTreeElement.js
new file mode 100644
index 000000000..a73d0db8b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/LogTreeElement.js
@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LogTreeElement = function(representedObject)
+{
+    console.assert(representedObject instanceof WebInspector.LogObject);
+
+    WebInspector.GeneralTreeElement.call(this, WebInspector.LogTreeElement.StyleClassName, WebInspector.UIString("Console"), representedObject.startDate.toLocaleTimeString(), representedObject, false);
+
+    this._logObject = representedObject;
+
+    this.small = true;
+};
+
+WebInspector.LogTreeElement.StyleClassName = "log-icon";
+
+WebInspector.LogTreeElement.prototype = {
+    constructor: WebInspector.LogTreeElement,
+
+    // Public
+
+    get logObject()
+    {
+        return this._logObject;
+    }
+};
+
+WebInspector.LogTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/MIMETypeUtilities.js b/Source/WebInspectorUI/UserInterface/MIMETypeUtilities.js
new file mode 100644
index 000000000..67e8648a0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/MIMETypeUtilities.js
@@ -0,0 +1,80 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.fileExtensionForURL = function(url)
+{
+    var lastPathComponent = parseURL(url).lastPathComponent;
+    if (!lastPathComponent)
+        return "";
+
+    var index = lastPathComponent.indexOf(".");
+    if (index === -1)
+        return "";
+
+    return lastPathComponent.substr(index + 1);
+};
+
+WebInspector.mimeTypeForFileExtension = function(extension)
+{
+    const extensionToMIMEType = {
+        // Document types.
+        "html": "text/html",
+        "xhtml": "application/xhtml+xml",
+        "xml": "text/xml",
+
+        // Script types.
+        "js": "text/javascript",
+        "json": "application/json",
+        "clj": "text/x-clojure",
+        "coffee": "text/x-coffeescript",
+        "ls": "text/x-livescript",
+        "ts": "text/typescript",
+
+        // Stylesheet types.
+        "css": "text/css",
+        "less": "text/x-less",
+        "sass": "text/x-sass",
+        "scss": "text/x-scss",
+
+        // Image types.
+        "bmp": "image/bmp",
+        "gif": "image/gif",
+        "jpeg": "image/jpeg",
+        "jpg": "image/jpeg",
+        "pdf": "application/pdf",
+        "png": "image/png",
+        "tif": "image/tiff",
+        "tiff": "image/tiff",
+
+        // Font types and Media types are ignored for now.
+
+        // Miscellaneous types.
+        "svg": "image/svg+xml",
+        "txt": "text/plain",
+        "xsl": "text/xsl"
+    };
+
+    return extensionToMIMEType[extension] || null;
+};
diff --git a/Source/WebInspectorUI/UserInterface/Main.css b/Source/WebInspectorUI/UserInterface/Main.css
new file mode 100644
index 000000000..8c67baf40
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Main.css
@@ -0,0 +1,257 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    display: -webkit-flex;
+    -webkit-flex-direction: column;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    padding: 0;
+    margin: 0;
+
+    overflow: hidden;
+
+    -webkit-user-select: none;
+    -webkit-user-drag: none;
+
+    cursor: default;
+
+    -webkit-font-smoothing: subpixel-antialiased;
+
+    tab-size: 4; /* FIXME: This should be controlled by a setting. <rdar://problem/10593948> */
+}
+
+body.docked {
+    background-color: white;
+}
+
+body.docked.bottom {
+    border-top: 1px solid rgb(85, 85, 85);
+}
+
+body.docked.right {
+    border-left: 1px solid rgb(85, 85, 85);
+}
+
+#docked-resizer {
+    display: none;
+
+    z-index: 100;
+}
+
+body.docked #docked-resizer {
+    display: block;
+}
+
+body.docked.bottom #docked-resizer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+
+    cursor: row-resize;
+}
+
+body.docked.right #docked-resizer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 3px;
+
+    cursor: col-resize;
+}
+
+body.docked.bottom #toolbar {
+    cursor: row-resize;
+}
+
+body.docked.bottom #toolbar .item:not(.flexible-space) {
+    cursor: default;
+}
+
+#main {
+    display: -webkit-flex;
+    -webkit-flex: 1;
+
+    background-color: white;
+
+    /* The position and z-index are needed to make negative z-index work in the DOM tree. */
+    position: relative;
+    z-index: 0;
+}
+
+#navigation-sidebar {
+    width: 300px;
+}
+
+body.docked.right #navigation-sidebar.collapsed > .resizer {
+    pointer-events: none;
+}
+
+#content {
+    display: -webkit-flex;
+    -webkit-flex-direction: column;
+    -webkit-flex: 1;
+}
+
+#content-browser {
+    -webkit-flex: 1;
+}
+
+#split-content-browser {
+    border-top: 1px solid rgb(153, 153, 153);
+}
+
+#split-content-browser > .navigation-bar {
+    cursor: row-resize;
+
+    background-image: -webkit-linear-gradient(top, rgb(248, 248, 248), rgb(226, 226, 226));
+}
+
+#split-content-browser > .navigation-bar .item:not(.flexible-space) {
+    cursor: default;
+}
+
+#details-sidebar {
+    width: 300px;
+}
+
+.message-text-view {
+    display: -webkit-flex;
+    z-index: 1000;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    padding-left: 20%;
+    padding-right: 20%;
+
+    -webkit-justify-content: center;
+    -webkit-align-items: center;
+    
+    line-height: 20px;
+    white-space: pre-wrap;
+    text-align: center;
+
+    font-size: 18px;
+    font-weight: bold;
+    font-family: Lucida Grande, sans-serif;
+
+    color: rgb(75%, 75%, 75%);
+    background-color: white;
+}
+
+.message-text-view.error {
+    color: rgb(224, 16, 16);
+}
+
+.message-text-view.error::before {
+    display: inline-block;
+
+    width: 20px;
+    height: 20px;
+    margin-right: 4px;
+    vertical-align: bottom;
+
+    background-image: url(Images/Error.pdf);
+    background-size: 100% 100%;
+    content: "";
+}
+
+.go-to-link {
+    color: rgb(85, 85, 85) !important;
+    text-decoration: underline !important;
+    cursor: pointer;
+}
+
+.go-to-link:not(.dont-float) {
+    float: right;
+    margin-left: 5px;
+    max-width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.go-to-arrow {
+    -webkit-appearance: none;
+
+    padding: 0;
+    margin: 0;
+    border: none;
+
+    background-color: transparent;
+    background-image: -webkit-canvas(go-to-arrow-normal);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 10px 10px;
+
+    width: 16px;
+    height: 16px;
+
+ /* Workaround: for text boxes overlapping float:right. Give go-to arrows a z-index to ensure they are clickable.
+    <rdar://problem/11536832> Cannot access content view from Instruments navigator if name of file is truncated */
+    position: relative;
+    z-index: 1;
+}
+
+.go-to-arrow:active {
+    background-image: -webkit-canvas(go-to-arrow-normal-active);
+}
+
+:focus .selected .go-to-arrow {
+    background-image: -webkit-canvas(go-to-arrow-selected);
+}
+
+:focus .selected .go-to-arrow:active {
+    background-image: -webkit-canvas(go-to-arrow-selected-active);
+}
+
+.display-location {
+    font-style: italic !important;
+}
+
+.hidden {
+    display: none !important;
+}
+
+.node-link {
+    text-decoration: underline;
+    cursor: pointer;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Main.html b/Source/WebInspectorUI/UserInterface/Main.html
new file mode 100644
index 000000000..313deebd1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Main.html
@@ -0,0 +1,402 @@
+<!--
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *; connect-src *; media-src *; font-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'">
+
+    <link rel="stylesheet" href="External/CodeMirror/codemirror.css">
+
+    <link rel="stylesheet" href="Main.css">
+    <link rel="stylesheet" href="NavigationBar.css">
+    <link rel="stylesheet" href="FlexibleSpaceNavigationItem.css">
+    <link rel="stylesheet" href="DividerNavigationItem.css">
+    <link rel="stylesheet" href="ButtonNavigationItem.css">
+    <link rel="stylesheet" href="RadioButtonNavigationItem.css">
+    <link rel="stylesheet" href="HierarchicalPathComponent.css">
+    <link rel="stylesheet" href="FilterBar.css">
+    <link rel="stylesheet" href="ScopeBar.css">
+    <link rel="stylesheet" href="SearchBar.css">
+    <link rel="stylesheet" href="Sidebar.css">
+    <link rel="stylesheet" href="ContentBrowser.css">
+    <link rel="stylesheet" href="NavigationSidebarPanel.css">
+    <link rel="stylesheet" href="ResourceIcons.css">
+    <link rel="stylesheet" href="FolderIcon.css">
+    <link rel="stylesheet" href="ContentViewContainer.css">
+    <link rel="stylesheet" href="ClusterContentView.css">
+    <link rel="stylesheet" href="ContentView.css">
+    <link rel="stylesheet" href="ImageResourceContentView.css">
+    <link rel="stylesheet" href="FontResourceContentView.css">
+    <link rel="stylesheet" href="Popover.css">
+    <link rel="stylesheet" href="TextEditor.css">
+    <link rel="stylesheet" href="SyntaxHighlightingDefaultTheme.css">
+    <link rel="stylesheet" href="TextResourceContentView.css">
+    <link rel="stylesheet" href="DOMStorageContentView.css">
+    <link rel="stylesheet" href="CookieStorageContentView.css">
+    <link rel="stylesheet" href="DatabaseTableContentView.css">
+    <link rel="stylesheet" href="DatabaseContentView.css">
+    <link rel="stylesheet" href="TextContentView.css">
+    <link rel="stylesheet" href="CookieIcon.css">
+    <link rel="stylesheet" href="DatabaseIcon.css">
+    <link rel="stylesheet" href="DatabaseTableIcon.css">
+    <link rel="stylesheet" href="DOMStorageIcons.css">
+    <link rel="stylesheet" href="DOMTreeOutline.css">
+    <link rel="stylesheet" href="PathComponentIcons.css">
+    <link rel="stylesheet" href="DataGrid.css">
+    <link rel="stylesheet" href="Editing.css">
+    <link rel="stylesheet" href="DOMTreeContentView.css">
+    <link rel="stylesheet" href="SearchIcons.css">
+    <link rel="stylesheet" href="LogContentView.css">
+    <link rel="stylesheet" href="Section.css">
+    <link rel="stylesheet" href="DetailsSidebarPanel.css">
+    <link rel="stylesheet" href="DetailsSection.css">
+    <link rel="stylesheet" href="LogIcon.css">
+    <link rel="stylesheet" href="BoxModelDetailsSectionRow.css">
+    <link rel="stylesheet" href="IndeterminateProgressSpinner.css">
+    <link rel="stylesheet" href="ApplicationCacheFrameContentView.css">
+    <link rel="stylesheet" href="ApplicationCacheIcons.css">
+    <link rel="stylesheet" href="ResourceTreeElement.css">
+    <link rel="stylesheet" href="InstrumentSidebarPanel.css">
+    <link rel="stylesheet" href="InstrumentIcons.css">
+    <link rel="stylesheet" href="TimelinesContentView.css">
+    <link rel="stylesheet" href="TimelineDecorations.css">
+    <link rel="stylesheet" href="NetworkDataGrid.css">
+    <link rel="stylesheet" href="TimelineDataGrid.css">
+    <link rel="stylesheet" href="TimelineOverview.css">
+    <link rel="stylesheet" href="ProfileView.css">
+    <link rel="stylesheet" href="JavaScriptProfileView.css">
+    <link rel="stylesheet" href="NetworkTimeline.css">
+    <link rel="stylesheet" href="CSSStyleDetailsSidebarPanel.css">
+    <link rel="stylesheet" href="LayerTreeSidebarPanel.css">
+    <link rel="stylesheet" href="EventListenerSectionGroup.css">
+    <link rel="stylesheet" href="Breakpoint.css">
+    <link rel="stylesheet" href="BreakpointIcons.css">
+    <link rel="stylesheet" href="BreakpointTreeElement.css">
+    <link rel="stylesheet" href="QuickConsole.css">
+    <link rel="stylesheet" href="CallFrameIcons.css">
+    <link rel="stylesheet" href="SourceCodeTextEditor.css">
+    <link rel="stylesheet" href="ScriptContentView.css">
+    <link rel="stylesheet" href="FindBanner.css">
+    <link rel="stylesheet" href="Toolbar.css">
+    <link rel="stylesheet" href="ButtonToolbarItem.css">
+    <link rel="stylesheet" href="ControlToolbarItem.css">
+    <link rel="stylesheet" href="ResourceSidebarPanel.css">
+    <link rel="stylesheet" href="DebuggerSidebarPanel.css">
+    <link rel="stylesheet" href="DashboardView.css">
+    <link rel="stylesheet" href="CSSStyleDeclarationTextEditor.css">
+    <link rel="stylesheet" href="CSSStyleDeclarationSection.css">
+    <link rel="stylesheet" href="RulesStyleDetailsPanel.css">
+    <link rel="stylesheet" href="StyleRuleIcons.css">
+    <link rel="stylesheet" href="CodeMirrorCompletionController.css">
+    <link rel="stylesheet" href="CodeMirrorTokenTrackingController.css">
+    <link rel="stylesheet" href="CompletionSuggestionsView.css">
+    <link rel="stylesheet" href="CodeMirrorOverrides.css">
+    <link rel="stylesheet" href="ConsolePrompt.css">
+    <link rel="stylesheet" href="CSSColorPicker.css">
+    <link rel="stylesheet" href="CodeMirrorDragToAlterNumberController.css">
+
+    <script src="External/CodeMirror/codemirror.js"></script>
+    <script src="External/CodeMirror/comment.js"></script>
+    <script src="External/CodeMirror/matchbrackets.js"></script>
+    <script src="External/CodeMirror/closebrackets.js"></script>
+    <script src="External/CodeMirror/runmode.js"></script>
+    <script src="External/CodeMirror/searchcursor.js"></script>
+    <script src="External/CodeMirror/placeholder.js"></script>
+    <script src="External/CodeMirror/overlay.js"></script>
+    <script src="External/CodeMirror/xml.js"></script>
+    <script src="External/CodeMirror/htmlmixed.js"></script>
+    <script src="External/CodeMirror/css.js"></script>
+    <script src="External/CodeMirror/javascript.js"></script>
+    <script src="External/CodeMirror/clojure.js"></script>
+    <script src="External/CodeMirror/coffeescript.js"></script>
+    <script src="External/CodeMirror/livescript.js"></script>
+    <script src="External/CodeMirror/sass.js"></script>
+    <script src="External/CodeMirror/less.js"></script>
+    <script src="External/CodeMirror/sql.js"></script>
+
+    <script src="Utilities.js"></script>
+    <script src="WebInspector.js"></script>
+    <script src="Object.js"></script>
+    <script src="CodeMirrorDragToAlterNumberController.js"></script>
+    <script src="CodeMirrorAdditions.js"></script>
+    <script src="Setting.js"></script>
+    <script src="InspectorBackend.js"></script>
+    <script src="InspectorFrontendHostStub.js"></script>
+    <script src="LoadInspectorBackendCommands.js"></script>
+    <script src="InspectorFrontendAPI.js"></script>
+    <script src="ContextMenu.js"></script>
+    <script src="RemoteObject.js"></script>
+    <script src="InspectorObserver.js"></script>
+    <script src="PageObserver.js"></script>
+    <script src="ConsoleObserver.js"></script>
+    <script src="NetworkObserver.js"></script>
+    <script src="CSSObserver.js"></script>
+    <script src="DOMObserver.js"></script>
+    <script src="DebuggerObserver.js"></script>
+    <script src="DatabaseObserver.js"></script>
+    <script src="ProfilerObserver.js"></script>
+    <script src="LayerTreeObserver.js"></script>
+    <script src="RuntimeObserver.js"></script>
+    <script src="ImageUtilities.js"></script>
+    <script src="DataGrid.js"></script>
+    <script src="ProfileDataGridTree.js"></script>
+    <script src="BottomUpProfileDataGridTree.js"></script>
+    <script src="TopDownProfileDataGridTree.js"></script>
+    <script src="CookieStorageObject.js"></script>
+    <script src="DatabaseObject.js"></script>
+    <script src="DatabaseTableObject.js"></script>
+    <script src="DOMStorageObject.js"></script>
+    <script src="DOMStorageObserver.js"></script>
+    <script src="StorageManager.js"></script>
+    <script src="ApplicationCacheFrame.js"></script>
+    <script src="ApplicationCacheManifest.js"></script>
+    <script src="ApplicationCacheManager.js"></script>
+    <script src="ApplicationCacheObserver.js"></script>
+    <script src="TimelineObserver.js"></script>
+    <script src="TimelineManager.js"></script>
+    <script src="TimelineRecord.js"></script>
+    <script src="TimelineEventMarker.js"></script>
+    <script src="ResourceTimelineRecord.js"></script>
+    <script src="FrameResourceManager.js"></script>
+    <script src="IssueManager.js"></script>
+    <script src="Frame.js"></script>
+    <script src="SourceCode.js"></script>
+    <script src="Resource.js"></script>
+    <script src="ResourceCollection.js"></script>
+    <script src="BinarySearch.js"></script>
+    <script src="EditingSupport.js"></script>
+    <script src="KeyboardShortcut.js"></script>
+    <script src="NavigationBar.js"></script>
+    <script src="NavigationItem.js"></script>
+    <script src="FlexibleSpaceNavigationItem.js"></script>
+    <script src="DividerNavigationItem.js"></script>
+    <script src="ButtonNavigationItem.js"></script>
+    <script src="RadioButtonNavigationItem.js"></script>
+    <script src="ToggleButtonNavigationItem.js"></script>
+    <script src="ActivateButtonNavigationItem.js"></script>
+    <script src="HierarchicalPathNavigationItem.js"></script>
+    <script src="HierarchicalPathComponent.js"></script>
+    <script src="GeneralTreeElementPathComponent.js"></script>
+    <script src="ScopeBarItem.js"></script>
+    <script src="ScopeBar.js"></script>
+    <script src="SearchBar.js"></script>
+    <script src="FilterBar.js"></script>
+    <script src="Sidebar.js"></script>
+    <script src="SidebarPanel.js"></script>
+    <script src="TreeOutline.js"></script>
+    <script src="NavigationSidebarPanel.js"></script>
+    <script src="DetailsSidebarPanel.js"></script>
+    <script src="GeneralTreeElement.js"></script>
+    <script src="SourceCodeTreeElement.js"></script>
+    <script src="FolderTreeElement.js"></script>
+    <script src="ResourceSidebarPanel.js"></script>
+    <script src="ResourceDetailsSidebarPanel.js"></script>
+    <script src="ResourceTreeElement.js"></script>
+    <script src="SourceMapResourceTreeElement.js"></script>
+    <script src="StorageTreeElement.js"></script>
+    <script src="CookieStorageTreeElement.js"></script>
+    <script src="DatabaseHostTreeElement.js"></script>
+    <script src="DatabaseTreeElement.js"></script>
+    <script src="DatabaseTableTreeElement.js"></script>
+    <script src="DOMStorageTreeElement.js"></script>
+    <script src="ApplicationCacheFrameTreeElement.js"></script>
+    <script src="ApplicationCacheManifestTreeElement.js"></script>
+    <script src="IssueMessage.js"></script>
+    <script src="FrameTreeElement.js"></script>
+    <script src="CSSCompletions.js"></script>
+    <script src="CSSKeywordCompletions.js"></script>
+    <script src="SyntaxHighlightingSupport.js"></script>
+    <script src="Geometry.js"></script>
+    <script src="Popover.js"></script>
+    <script src="TextEditor.js"></script>
+    <script src="EventHandler.js"></script>
+    <script src="SourceCodeTextEditor.js"></script>
+    <script src="ContentViewContainer.js"></script>
+    <script src="ContentView.js"></script>
+    <script src="ClusterContentView.js"></script>
+    <script src="QuickConsoleNavigationBar.js"></script>
+    <script src="QuickConsole.js"></script>
+    <script src="ContentBrowser.js"></script>
+    <script src="FrameContentView.js"></script>
+    <script src="ResourceClusterContentView.js"></script>
+    <script src="ResourceContentView.js"></script>
+    <script src="GenericResourceContentView.js"></script>
+    <script src="TextResourceContentView.js"></script>
+    <script src="ImageResourceContentView.js"></script>
+    <script src="FontResourceContentView.js"></script>
+    <script src="DOMStorageContentView.js"></script>
+    <script src="CookieStorageContentView.js"></script>
+    <script src="DatabaseTableContentView.js"></script>
+    <script src="DatabaseContentView.js"></script>
+    <script src="ApplicationCacheFrameContentView.js"></script>
+    <script src="TextContentView.js"></script>
+    <script src="ApplicationCacheDetailsSidebarPanel.js"></script>
+    <script src="DOMTreeManager.js"></script>
+    <script src="DOMNode.js"></script>
+    <script src="DOMUtilities.js"></script>
+    <script src="DOMTree.js"></script>
+    <script src="DOMTreeOutline.js"></script>
+    <script src="DOMTreeUpdater.js"></script>
+    <script src="DOMTreeElement.js"></script>
+    <script src="DOMTreeElementPathComponent.js"></script>
+    <script src="DOMTreeContentView.js"></script>
+    <script src="LayerTreeManager.js"></script>
+    <script src="DOMSearchMatchObject.js"></script>
+    <script src="ResourceSearchMatchObject.js"></script>
+    <script src="SearchResultTreeElement.js"></script>
+    <script src="TextRange.js"></script>
+    <script src="ConsoleMessage.js"></script>
+    <script src="ConsoleMessageImpl.js"></script>
+    <script src="ConsoleGroup.js"></script>
+    <script src="ConsoleCommand.js"></script>
+    <script src="ConsoleCommandResult.js"></script>
+    <script src="JavaScriptLogViewController.js"></script>
+    <script src="LogContentView.js"></script>
+    <script src="Section.js"></script>
+    <script src="PropertiesSection.js"></script>
+    <script src="ObjectPropertiesSection.js"></script>
+    <script src="LogManager.js"></script>
+    <script src="LogObject.js"></script>
+    <script src="DetailsSection.js"></script>
+    <script src="DetailsSectionGroup.js"></script>
+    <script src="DetailsSectionRow.js"></script>
+    <script src="DetailsSectionSimpleRow.js"></script>
+    <script src="DetailsSectionDataGridRow.js"></script>
+    <script src="DetailsSectionPropertiesRow.js"></script>
+    <script src="DOMDetailsSidebarPanel.js"></script>
+    <script src="EventListenerSectionGroup.js"></script>
+    <script src="EventListenerSection.js"></script>
+    <script src="DOMNodeDetailsSidebarPanel.js"></script>
+    <script src="LayerTreeDataGridNode.js"></script>
+    <script src="LayerTreeDataGrid.js"></script>
+    <script src="LayerTreeSidebarPanel.js"></script>
+    <script src="LogTreeElement.js"></script>
+    <script src="CSSStyleManager.js"></script>
+    <script src="CSSStyleSheet.js"></script>
+    <script src="CSSMedia.js"></script>
+    <script src="CSSRule.js"></script>
+    <script src="CSSStyleDeclaration.js"></script>
+    <script src="CSSProperty.js"></script>
+    <script src="DOMNodeStyles.js"></script>
+    <script src="Color.js"></script>
+    <script src="CSSStyleDetailsSidebarPanel.js"></script>
+    <script src="BoxModelDetailsSectionRow.js"></script>
+    <script src="StyleDetailsPanel.js"></script>
+    <script src="ComputedStyleDetailsPanel.js"></script>
+    <script src="RulesStyleDetailsPanel.js"></script>
+    <script src="MetricsStyleDetailsPanel.js"></script>
+    <script src="CSSColorPicker.js"></script>
+    <script src="CSSStyleDeclarationTextEditor.js"></script>
+    <script src="CSSStyleDeclarationSection.js"></script>
+    <script src="IndeterminateProgressSpinner.js"></script>
+    <script src="InstrumentSidebarPanel.js"></script>
+    <script src="NetworkGraphCalculator.js"></script>
+    <script src="TimelineDecorations.js"></script>
+    <script src="TimelinesObject.js"></script>
+    <script src="TimelineDataGrid.js"></script>
+    <script src="NetworkDataGrid.js"></script>
+    <script src="LayoutTimelineDataGrid.js"></script>
+    <script src="ScriptTimelineDataGrid.js"></script>
+    <script src="TimelinesContentView.js"></script>
+    <script src="ResourceTimelineDataGridNode.js"></script>
+    <script src="ResourceTimelineDataGridNodePathComponent.js"></script>
+    <script src="LayoutTimelineRecord.js"></script>
+    <script src="LayoutTimelineDataGridNode.js"></script>
+    <script src="ScriptTimelineRecord.js"></script>
+    <script src="ScriptTimelineDataGridNode.js"></script>
+    <script src="TimelineOverview.js"></script>
+    <script src="ProfileManager.js"></script>
+    <script src="ProfileType.js"></script>
+    <script src="ProfileView.js"></script>
+    <script src="JavaScriptProfileType.js"></script>
+    <script src="JavaScriptProfileView.js"></script>
+    <script src="CSSSelectorProfileType.js"></script>
+    <script src="CSSSelectorProfileView.js"></script>
+    <script src="ProfileObject.js"></script>
+    <script src="JavaScriptProfileObject.js"></script>
+    <script src="CSSSelectorProfileObject.js"></script>
+    <script src="DebuggerSidebarPanel.js"></script>
+    <script src="BreakpointTreeElement.js"></script>
+    <script src="Breakpoint.js"></script>
+    <script src="DebuggerManager.js"></script>
+    <script src="SourceMapManager.js"></script>
+    <script src="Script.js"></script>
+    <script src="SourceMap.js"></script>
+    <script src="SourceMapResource.js"></script>
+    <script src="SourceCodePosition.js"></script>
+    <script src="SourceCodeLocation.js"></script>
+    <script src="SourceCodeTextRange.js"></script>
+    <script src="CallFrame.js"></script>
+    <script src="ScopeChainNode.js"></script>
+    <script src="CallFrameTreeElement.js"></script>
+    <script src="ScopeChainDetailsSidebarPanel.js"></script>
+    <script src="ScopeVariableTreeElement.js"></script>
+    <script src="ScriptContentView.js"></script>
+    <script src="ScriptTreeElement.js"></script>
+    <script src="FindBanner.js"></script>
+    <script src="Toolbar.js"></script>
+    <script src="ButtonToolbarItem.js"></script>
+    <script src="ActivateButtonToolbarItem.js"></script>
+    <script src="ControlToolbarItem.js"></script>
+    <script src="ToggleControlToolbarItem.js"></script>
+    <script src="Branch.js"></script>
+    <script src="Revision.js"></script>
+    <script src="SourceCodeRevision.js"></script>
+    <script src="BranchManager.js"></script>
+    <script src="DashboardView.js"></script>
+    <script src="DashboardManager.js"></script>
+    <script src="FormatterContentBuilder.js"></script>
+    <script src="CodeMirrorFormatters.js"></script>
+    <script src="Formatter.js"></script>
+    <script src="FormatterSourceMap.js"></script>
+    <script src="CodeMirrorCompletionController.js"></script>
+    <script src="CodeMirrorTokenTrackingController.js"></script>
+    <script src="CompletionSuggestionsView.js"></script>
+    <script src="ExecutionContext.js"></script>
+    <script src="ExecutionContextList.js"></script>
+    <script src="ConsolePrompt.js"></script>
+    <script src="MIMETypeUtilities.js"></script>
+    <script src="LoadLocalizedStrings.js"></script>
+    <script src="Main.js"></script>
+
+    <script>
+        WebInspector.loaded();
+    </script>
+</head>
+<body>
+<div id="docked-resizer"></div>
+<div id="toolbar"></div>
+<div id="main">
+    <div id="navigation-sidebar"></div>
+    <div id="content">
+        <div id="content-browser"></div>
+        <div id="split-content-browser" class="hidden"></div>
+        <div id="quick-console"></div>
+    </div>
+    <div id="details-sidebar"></div>
+</div>
+</body>
+</html>
diff --git a/Source/WebInspectorUI/UserInterface/Main.js b/Source/WebInspectorUI/UserInterface/Main.js
new file mode 100644
index 000000000..e43bc3864
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Main.js
@@ -0,0 +1,1712 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Notification = {
+    GlobalModifierKeysDidChange: "global-modifiers-did-change"
+};
+
+WebInspector.loaded = function()
+{
+    // Tell the InspectorFrontendHost we loaded first to establish communication with InspectorBackend.
+    InspectorFrontendHost.loaded();
+
+    // Initialize WebSocket to communication
+    this._initializeWebSocketIfNeeded();
+
+    // Register observers for events from the InspectorBackend.
+    InspectorBackend.registerInspectorDispatcher(new WebInspector.InspectorObserver);
+    InspectorBackend.registerPageDispatcher(new WebInspector.PageObserver);
+    InspectorBackend.registerConsoleDispatcher(new WebInspector.ConsoleObserver);
+    InspectorBackend.registerNetworkDispatcher(new WebInspector.NetworkObserver);
+    InspectorBackend.registerDOMDispatcher(new WebInspector.DOMObserver);
+    InspectorBackend.registerDebuggerDispatcher(new WebInspector.DebuggerObserver);
+    InspectorBackend.registerDatabaseDispatcher(new WebInspector.DatabaseObserver);
+    InspectorBackend.registerDOMStorageDispatcher(new WebInspector.DOMStorageObserver);
+    InspectorBackend.registerApplicationCacheDispatcher(new WebInspector.ApplicationCacheObserver);
+    InspectorBackend.registerTimelineDispatcher(new WebInspector.TimelineObserver);
+    InspectorBackend.registerProfilerDispatcher(new WebInspector.ProfilerObserver);
+    InspectorBackend.registerCSSDispatcher(new WebInspector.CSSObserver);
+    if (InspectorBackend.registerLayerTreeDispatcher)
+        InspectorBackend.registerLayerTreeDispatcher(new WebInspector.LayerTreeObserver);
+    if (InspectorBackend.registerRuntimeDispatcher)
+        InspectorBackend.registerRuntimeDispatcher(new WebInspector.RuntimeObserver);
+
+    // Enable agents.
+    InspectorAgent.enable();
+
+    // Perform one-time tasks.
+    WebInspector.CSSCompletions.requestCSSNameCompletions();
+    this._generateDisclosureTriangleImages();
+
+    // Create the singleton managers next, before the user interface elements, so the user interface can register
+    // as event listeners on these managers.
+    this.branchManager = new WebInspector.BranchManager;
+    this.frameResourceManager = new WebInspector.FrameResourceManager;
+    this.storageManager = new WebInspector.StorageManager;
+    this.domTreeManager = new WebInspector.DOMTreeManager;
+    this.cssStyleManager = new WebInspector.CSSStyleManager;
+    this.logManager = new WebInspector.LogManager;
+    this.issueManager = new WebInspector.IssueManager;
+    this.applicationCacheManager = new WebInspector.ApplicationCacheManager;
+    this.timelineManager = new WebInspector.TimelineManager;
+    this.profileManager = new WebInspector.ProfileManager;
+    this.debuggerManager = new WebInspector.DebuggerManager;
+    this.sourceMapManager = new WebInspector.SourceMapManager;
+    this.layerTreeManager = new WebInspector.LayerTreeManager;
+    this.dashboardManager = new WebInspector.DashboardManager;
+
+    // Enable the Console Agent after creating the singleton managers.
+    ConsoleAgent.enable();
+
+    // Enable the RuntimeAgent to receive notification of execution contexts.
+    if (RuntimeAgent.enable)
+        RuntimeAgent.enable();
+
+    // Register for events.
+    this.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Paused, this._debuggerDidPause, this);
+    this.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.InspectModeStateChanged, this._inspectModeStateChanged, this);
+    this.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.DOMNodeWasInspected, this._domNodeWasInspected, this);
+    this.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.MainFrameDidChange, this._mainFrameDidChange, this);
+
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+
+    document.addEventListener("DOMContentLoaded", this.contentLoaded.bind(this));
+
+    document.addEventListener("beforecopy", this._beforecopy.bind(this));
+    document.addEventListener("copy", this._copy.bind(this));
+
+    document.addEventListener("click", this._mouseWasClicked.bind(this));
+    document.addEventListener("dragover", this._dragOver.bind(this));
+    document.addEventListener("focus", WebInspector._focusChanged.bind(this), true);
+
+    window.addEventListener("focus", this._windowFocused.bind(this));
+    window.addEventListener("blur", this._windowBlurred.bind(this));
+    window.addEventListener("resize", this._windowResized.bind(this));
+    window.addEventListener("keydown", this._windowKeyDown.bind(this));
+    window.addEventListener("keyup", this._windowKeyUp.bind(this));
+
+    // Create settings.
+    this._lastSelectedNavigationSidebarPanelSetting = new WebInspector.Setting("last-selected-navigation-sidebar-panel", "resource");
+    this._navigationSidebarCollapsedSetting = new WebInspector.Setting("navigation-sidebar-collapsed", false);
+    this._navigationSidebarWidthSetting = new WebInspector.Setting("navigation-sidebar-width", null);
+
+    this._lastSelectedDetailsSidebarPanelSetting = new WebInspector.Setting("last-selected-details-sidebar-panel", null);
+    this._detailsSidebarCollapsedSetting = new WebInspector.Setting("details-sidebar-collapsed", true);
+    this._detailsSidebarWidthSetting = new WebInspector.Setting("details-sidebar-width", null);
+
+    this._lastContentViewResponsibleSidebarPanelSetting = new WebInspector.Setting("last-content-view-responsible-sidebar-panel", "resource");
+    this._lastContentCookieSetting = new WebInspector.Setting("last-content-view-cookie", {});
+
+    this._toolbarDockedRightDisplayModeSetting = new WebInspector.Setting("toolbar-docked-right-display-mode", WebInspector.Toolbar.DisplayMode.IconAndLabelVertical);
+    this._toolbarDockedRightSizeModeSetting = new WebInspector.Setting("toolbar-docked-right-size-mode",WebInspector.Toolbar.SizeMode.Normal);
+
+    this._toolbarDockedBottomDisplayModeSetting = new WebInspector.Setting("toolbar-docked-display-mode", WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
+    this._toolbarDockedBottomSizeModeSetting = new WebInspector.Setting("toolbar-docked-size-mode",WebInspector.Toolbar.SizeMode.Small);
+
+    this._toolbarUndockedDisplayModeSetting = new WebInspector.Setting("toolbar-undocked-display-mode", WebInspector.Toolbar.DisplayMode.IconAndLabelVertical);
+    this._toolbarUndockedSizeModeSetting = new WebInspector.Setting("toolbar-undocked-size-mode",WebInspector.Toolbar.SizeMode.Normal);
+
+    this._showingSplitConsoleSetting = new WebInspector.Setting("showing-split-console", false);
+    this._splitConsoleHeightSetting = new WebInspector.Setting("split-console-height", 150);
+
+    this._dockButtonToggledSetting = new WebInspector.Setting("dock-button-toggled", false);
+
+    this.showShadowDOMSetting = new WebInspector.Setting("show-shadow-dom", false);
+}
+
+WebInspector.contentLoaded = function()
+{
+    // Check for a nightly build by looking for a plus in the version number and a small number of stylesheets (indicating combined resources).
+    var versionMatch = / AppleWebKit\/([^ ]+)/.exec(navigator.userAgent);
+    if (versionMatch && versionMatch[1].indexOf("+") !== -1 && document.styleSheets.length < 10)
+        document.body.classList.add("nightly-build");
+
+    // Create the user interface elements.
+    this.toolbar = new WebInspector.Toolbar(document.getElementById("toolbar"));
+    this.toolbar.addEventListener(WebInspector.Toolbar.Event.DisplayModeDidChange, this._toolbarDisplayModeDidChange, this);
+    this.toolbar.addEventListener(WebInspector.Toolbar.Event.SizeModeDidChange, this._toolbarSizeModeDidChange, this);
+    
+    var contentElement = document.getElementById("content");
+    contentElement.setAttribute("role", "main");
+    contentElement.setAttribute("aria-label", WebInspector.UIString("Content"));
+
+    this.contentBrowser = new WebInspector.ContentBrowser(document.getElementById("content-browser"), this);
+    this.contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentRepresentedObjectsDidChange, this._contentBrowserRepresentedObjectsDidChange, this);
+    this.contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange, this._contentBrowserCurrentContentViewDidChange, this);
+
+    this.splitContentBrowser = new WebInspector.ContentBrowser(document.getElementById("split-content-browser"), this, true);
+    this.splitContentBrowser.navigationBar.element.addEventListener("mousedown", this._consoleResizerMouseDown.bind(this));
+
+    this.quickConsole = new WebInspector.QuickConsole(document.getElementById("quick-console"));
+    this.quickConsole.addEventListener(WebInspector.QuickConsole.Event.DidResize, this._quickConsoleDidResize, this);
+
+    this._consoleRepresentedObject = new WebInspector.LogObject;
+    this._consoleTreeElement = new WebInspector.LogTreeElement(this._consoleRepresentedObject);
+    this.consoleContentView = WebInspector.contentBrowser.contentViewForRepresentedObject(this._consoleRepresentedObject);
+
+    // FIXME: The sidebars should be flipped in RTL languages.
+    this.leftSidebar = this.navigationSidebar = new WebInspector.Sidebar(document.getElementById("navigation-sidebar"), WebInspector.Sidebar.Sides.Left);
+    this.navigationSidebar.addEventListener(WebInspector.Sidebar.Event.CollapsedStateDidChange, this._sidebarCollapsedStateDidChange, this);
+    this.navigationSidebar.addEventListener(WebInspector.Sidebar.Event.WidthDidChange, this._sidebarWidthDidChange, this);
+    this.navigationSidebar.addEventListener(WebInspector.Sidebar.Event.SidebarPanelSelected, this._navigationSidebarPanelSelected, this);
+
+    this.rightSidebar = this.detailsSidebar = new WebInspector.Sidebar(document.getElementById("details-sidebar"), WebInspector.Sidebar.Sides.Right, null, null, WebInspector.UIString("Details"));
+    this.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.CollapsedStateDidChange, this._sidebarCollapsedStateDidChange, this);
+    this.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.WidthDidChange, this._sidebarWidthDidChange, this);
+    this.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.SidebarPanelSelected, this._detailsSidebarPanelSelected, this);
+
+    this._reloadPageKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "R", this._reloadPage.bind(this));
+    this._reloadPageIgnoringCacheKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command | WebInspector.KeyboardShortcut.Modifier.Shift, "R", this._reloadPageIgnoringCache.bind(this));
+
+    this._inspectModeKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command | WebInspector.KeyboardShortcut.Modifier.Shift, "C", this._toggleInspectMode.bind(this));
+
+    this._undoKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "Z", this._undoKeyboardShortcut.bind(this));
+    this._redoKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command | WebInspector.KeyboardShortcut.Modifier.Shift, "Z", this._redoKeyboardShortcut.bind(this));
+    this._undoKeyboardShortcut.implicitlyPreventsDefault = this._redoKeyboardShortcut.implicitlyPreventsDefault = false;
+
+    this.undockButtonNavigationItem = new WebInspector.ToggleControlToolbarItem("undock", WebInspector.UIString("Detach into separate window"), "", "Images/Undock.pdf", "", 16, 14);
+    this.undockButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._undock, this);
+
+    this.closeButtonNavigationItem = new WebInspector.ControlToolbarItem("dock-close", WebInspector.UIString("Close"), "Images/Close.pdf", 16, 14);
+    this.closeButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this.close, this);
+
+    this.toolbar.addToolbarItem(this.closeButtonNavigationItem, WebInspector.Toolbar.Section.Control);
+    this.toolbar.addToolbarItem(this.undockButtonNavigationItem, WebInspector.Toolbar.Section.Control);
+
+    this.resourceSidebarPanel = new WebInspector.ResourceSidebarPanel;
+    this.instrumentSidebarPanel = new WebInspector.InstrumentSidebarPanel;
+    this.debuggerSidebarPanel = new WebInspector.DebuggerSidebarPanel;
+
+    this.navigationSidebar.addSidebarPanel(this.resourceSidebarPanel);
+    this.navigationSidebar.addSidebarPanel(this.instrumentSidebarPanel);
+    this.navigationSidebar.addSidebarPanel(this.debuggerSidebarPanel);
+
+    this.toolbar.addToolbarItem(this.resourceSidebarPanel.toolbarItem, WebInspector.Toolbar.Section.Left);
+    this.toolbar.addToolbarItem(this.instrumentSidebarPanel.toolbarItem, WebInspector.Toolbar.Section.Left);
+    this.toolbar.addToolbarItem(this.debuggerSidebarPanel.toolbarItem, WebInspector.Toolbar.Section.Left);
+
+    // The toolbar button for the console.
+    const consoleKeyboardShortcut = "\u2325\u2318C"; // Option-Command-C
+    var toolTip = WebInspector.UIString("Show console (%s)").format(consoleKeyboardShortcut);
+    var activatedToolTip = WebInspector.UIString("Hide console");
+    this._consoleToolbarButton = new WebInspector.ActivateButtonToolbarItem("console", toolTip, activatedToolTip, WebInspector.UIString("Console"), "Images/NavigationItemLog.pdf");
+    this._consoleToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this.toggleConsoleView, this);
+    this.toolbar.addToolbarItem(this._consoleToolbarButton, WebInspector.Toolbar.Section.Center);
+
+    this.toolbar.addToolbarItem(this.dashboardManager.toolbarItem, WebInspector.Toolbar.Section.Center);
+
+    // The toolbar button for node inspection.
+    var toolTip = WebInspector.UIString("Enable point to inspect mode (%s)").format(WebInspector._inspectModeKeyboardShortcut.displayName);
+    var activatedToolTip = WebInspector.UIString("Disable point to inspect mode (%s)").format(WebInspector._inspectModeKeyboardShortcut.displayName);
+    this._inspectModeToolbarButton = new WebInspector.ActivateButtonToolbarItem("inspect", toolTip, activatedToolTip, WebInspector.UIString("Inspect"), "Images/Crosshair.pdf");
+    this._inspectModeToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleInspectMode, this);
+    this.toolbar.addToolbarItem(this._inspectModeToolbarButton, WebInspector.Toolbar.Section.Center);
+
+    this.resourceDetailsSidebarPanel = new WebInspector.ResourceDetailsSidebarPanel;
+    this.domNodeDetailsSidebarPanel = new WebInspector.DOMNodeDetailsSidebarPanel;
+    this.cssStyleDetailsSidebarPanel = new WebInspector.CSSStyleDetailsSidebarPanel;
+    this.applicationCacheDetailsSidebarPanel = new WebInspector.ApplicationCacheDetailsSidebarPanel;
+    this.scopeChainDetailsSidebarPanel = new WebInspector.ScopeChainDetailsSidebarPanel;
+
+    this.detailsSidebarPanels = [this.resourceDetailsSidebarPanel, this.applicationCacheDetailsSidebarPanel, this.scopeChainDetailsSidebarPanel,
+        this.domNodeDetailsSidebarPanel, this.cssStyleDetailsSidebarPanel];
+
+    if (window.LayerTreeAgent) {
+        this.layerTreeSidebarPanel = new WebInspector.LayerTreeSidebarPanel;
+        this.detailsSidebarPanels.splice(this.detailsSidebarPanels.length - 1, 0, this.layerTreeSidebarPanel);
+    }
+
+    this.modifierKeys = {altKey: false, metaKey: false, shiftKey: false};
+
+    // Add the items in reverse order since the last items appear and disappear the least. So they
+    // will not cause the other buttons to visually shift around, keeping things more stable.
+    for (var i = this.detailsSidebarPanels.length - 1; i >= 0; --i) {
+        var toolbarItem = this.detailsSidebarPanels[i].toolbarItem;
+        toolbarItem.hidden = true;
+        this.toolbar.addToolbarItem(toolbarItem, WebInspector.Toolbar.Section.Right);
+    }
+
+    this.toolbar.element.addEventListener("mousedown", this._toolbarMouseDown.bind(this));
+    document.getElementById("docked-resizer").addEventListener("mousedown", this._dockedResizerMouseDown.bind(this));
+
+    this._updateToolbarHeight();
+
+    this.navigationSidebar.selectedSidebarPanel = this._lastSelectedNavigationSidebarPanelSetting.value;
+
+    if (this._navigationSidebarWidthSetting.value)
+        this.navigationSidebar.width = this._navigationSidebarWidthSetting.value;
+
+    if (this._detailsSidebarWidthSetting.value)
+        this.detailsSidebar.width = this._detailsSidebarWidthSetting.value;
+
+    // Update the docked state based on the query string passed when the Web Inspector was loaded.
+    this.updateDockedState(parseLocationQueryParameters().dockSide || "undocked");
+
+    // Tell the frontend API we are loaded so any pending frontend commands can be dispatched.
+    InspectorFrontendAPI.loadCompleted();
+
+    // Set collapsed after loading the pending frontend commands are dispatched so only the final
+    // selected sidebar panel gets shown and has a say in what content view gets shown.
+    this.navigationSidebar.collapsed = this._navigationSidebarCollapsedSetting.value;
+
+    // If InspectorFrontendAPI didn't show a content view, then try to show the last content view.
+    if (!this.contentBrowser.currentContentView && !this.ignoreLastContentCookie) {
+        if (this._lastContentCookieSetting.value === "console") {
+            // The console does not have a sidebar, so handle its special cookie here.
+            this.showFullHeightConsole();
+        } else {
+            var responsibleSidebarPanel = this.navigationSidebar.findSidebarPanel(this._lastContentViewResponsibleSidebarPanelSetting.value);
+            if (responsibleSidebarPanel)
+                responsibleSidebarPanel.showContentViewForCookie(this._lastContentCookieSetting.value);
+        }
+    }
+
+    this._updateSplitConsoleHeight(this._splitConsoleHeightSetting.value);
+
+    if (this._showingSplitConsoleSetting.value)
+        this.showSplitConsole();
+}
+
+WebInspector.messagesToDispatch = [];
+
+WebInspector.dispatchNextQueuedMessageFromBackend = function()
+{
+    for (var i = 0; i < this.messagesToDispatch.length; ++i)
+        InspectorBackend.dispatch(this.messagesToDispatch[i]);
+
+    this.messagesToDispatch = [];
+
+    this._dispatchTimeout = null;
+}
+
+WebInspector.dispatchMessageFromBackend = function(message)
+{
+    // Enforce asynchronous interaction between the backend and the frontend by queueing messages.
+    // The messages are dequeued on a zero delay timeout.
+
+    this.messagesToDispatch.push(message);
+
+    if (this._dispatchTimeout)
+        return;
+
+    this._dispatchTimeout = setTimeout(this.dispatchNextQueuedMessageFromBackend.bind(this), 0);
+}
+
+WebInspector.sidebarPanelForCurrentContentView = function()
+{
+    var currentContentView = this.contentBrowser.currentContentView;
+    if (!currentContentView)
+        return null;
+    return this.sidebarPanelForRepresentedObject(currentContentView.representedObject);
+}
+
+WebInspector.sidebarPanelForRepresentedObject = function(representedObject)
+{
+    if (representedObject instanceof WebInspector.Frame || representedObject instanceof WebInspector.Resource ||
+        representedObject instanceof WebInspector.Script)
+        return this.resourceSidebarPanel;
+
+    if (representedObject instanceof WebInspector.DOMStorageObject || representedObject instanceof WebInspector.CookieStorageObject ||
+        representedObject instanceof WebInspector.DatabaseTableObject || representedObject instanceof WebInspector.DatabaseObject ||
+        representedObject instanceof WebInspector.ApplicationCacheFrame)
+        return this.resourceSidebarPanel;
+
+    // The console does not have a sidebar.
+    if (representedObject instanceof WebInspector.LogObject)
+        return null;
+
+    if (representedObject instanceof WebInspector.TimelinesObject || representedObject instanceof WebInspector.ProfileObject)
+        return this.instrumentSidebarPanel;
+
+    console.error("Unknown representedObject: ", representedObject);
+    return null;
+}
+
+WebInspector.contentBrowserTreeElementForRepresentedObject = function(contentBrowser, representedObject)
+{
+    // The console does not have a sidebar, so return a tree element here so something is shown.
+    if (representedObject instanceof WebInspector.LogObject)
+        return this._consoleTreeElement;
+
+    var sidebarPanel = this.sidebarPanelForRepresentedObject(representedObject);
+    if (sidebarPanel)
+        return sidebarPanel.treeElementForRepresentedObject(representedObject);
+    return null;
+}
+
+WebInspector.displayNameForURL = function(url, urlComponents)
+{
+    if (!urlComponents)
+        urlComponents = parseURL(url);
+
+    var displayName;
+    try {
+        displayName = decodeURIComponent(urlComponents.lastPathComponent || "");
+    } catch (e) {
+        displayName = urlComponents.lastPathComponent;
+    }
+
+    return displayName || WebInspector.displayNameForHost(urlComponents.host) || url;
+}
+
+WebInspector.displayNameForHost = function(host)
+{
+    // FIXME <rdar://problem/11237413>: This should decode punycode hostnames.
+    return host;
+}
+
+WebInspector.updateWindowTitle = function()
+{
+    var mainFrame = this.frameResourceManager.mainFrame;
+    console.assert(mainFrame);
+
+    var urlComponents = mainFrame.mainResource.urlComponents;
+
+    var lastPathComponent;
+    try {
+        lastPathComponent = decodeURIComponent(urlComponents.lastPathComponent || "");
+    } catch (e) {
+        lastPathComponent = urlComponents.lastPathComponent;
+    }
+
+    // Build a title based on the URL components.
+    if (urlComponents.host && lastPathComponent)
+        var title = this.displayNameForHost(urlComponents.host) + " \u2014 " + lastPathComponent;
+    else if (urlComponents.host)
+        var title = this.displayNameForHost(urlComponents.host);
+    else if (lastPathComponent)
+        var title = lastPathComponent;
+    else
+        var title = mainFrame.url;
+
+    // The name "inspectedURLChanged" sounds like the whole URL is required, however this is only
+    // used for updating the window title and it can be any string.
+    InspectorFrontendHost.inspectedURLChanged(title);
+}
+
+WebInspector.updateDockedState = function(side)
+{
+    if (this._dockSide === side)
+        return;
+
+    this._dockSide = side;
+
+    this.docked = side !== "undocked";
+
+    this._ignoreToolbarModeDidChangeEvents = true;
+
+    if (side === "bottom") {
+        document.body.classList.add("docked");
+        document.body.classList.add("bottom");
+
+        document.body.classList.remove("window-inactive");
+        document.body.classList.remove("right");
+
+        this.toolbar.displayMode = this._toolbarDockedBottomDisplayModeSetting.value;
+        this.toolbar.sizeMode = this._toolbarDockedBottomSizeModeSetting.value;
+    } else if (side === "right") {
+        document.body.classList.add("docked");
+        document.body.classList.add("right");
+
+        document.body.classList.remove("window-inactive");
+        document.body.classList.remove("bottom");
+
+        this.toolbar.displayMode = this._toolbarDockedRightDisplayModeSetting.value;
+        this.toolbar.sizeMode = this._toolbarDockedRightSizeModeSetting.value;
+    } else {
+        document.body.classList.remove("docked");
+        document.body.classList.remove("right");
+        document.body.classList.remove("bottom");
+
+        this.toolbar.displayMode = this._toolbarUndockedDisplayModeSetting.value;
+        this.toolbar.sizeMode = this._toolbarUndockedSizeModeSetting.value;
+    }
+
+    this._ignoreToolbarModeDidChangeEvents = false;
+
+    this._updateDockNavigationItems();
+    this._updateToolbarHeight();
+}
+
+WebInspector.handlePossibleLinkClick = function(event, frame, alwaysOpenExternally)
+{
+    var anchorElement = event.target.enclosingNodeOrSelfWithNodeName("a");
+    if (!anchorElement || !anchorElement.href)
+        return false;
+
+    if (WebInspector.isBeingEdited(anchorElement)) {
+        // Don't follow the link when it is being edited.
+        return false;
+    }
+
+    // Prevent the link from navigating, since we don't do any navigation by following links normally.
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.openURL(anchorElement.href, frame, false, anchorElement.lineNumber);
+
+    return true;
+}
+
+WebInspector.openURL = function(url, frame, alwaysOpenExternally, lineNumber)
+{
+    console.assert(url);
+    if (!url)
+        return;
+
+    // If alwaysOpenExternally is not defined, base it off the command/meta key for the current event.
+    if (alwaysOpenExternally === undefined || alwaysOpenExternally === null)
+        alwaysOpenExternally = window.event ? window.event.metaKey : false;
+
+    if (alwaysOpenExternally) {
+        InspectorFrontendHost.openInNewTab(url);
+        return;
+    }
+    
+    var parsedURL = parseURL(url);
+    if (parsedURL.scheme === WebInspector.ProfileType.ProfileScheme) {
+        var profileType = parsedURL.host.toUpperCase();
+        var profileTitle = parsedURL.path;
+        
+        // The path of of the profile URL starts with a slash, remove it, so 
+        // we can get the actual title.
+        console.assert(profileTitle[0] === '/');
+        profileTitle = profileTitle.substring(1);
+
+        this.instrumentSidebarPanel.showProfile(profileType, profileTitle);
+        return;
+    }
+
+    var searchChildFrames = false;
+    if (!frame) {
+        frame = this.frameResourceManager.mainFrame;
+        searchChildFrames = true;
+    }
+
+    console.assert(frame);
+
+    // WebInspector.Frame.resourceForURL does not check the main resource, only sub-resources. So check both.
+    var resource = frame.url === url ? frame.mainResource : frame.resourceForURL(url, searchChildFrames);
+    if (resource) {
+        this.resourceSidebarPanel.showSourceCode(resource, lineNumber);
+        return;
+    }
+
+    InspectorFrontendHost.openInNewTab(url);
+}
+
+WebInspector.close = function()
+{
+    if (this._isClosing)
+        return;
+
+    this._isClosing = true;
+
+    InspectorFrontendHost.closeWindow();
+}
+
+WebInspector.isConsoleFocused = function()
+{
+    return this.quickConsole.prompt.focused;
+}
+
+WebInspector.isShowingSplitConsole = function()
+{
+    return !this.splitContentBrowser.element.classList.contains("hidden");
+}
+
+WebInspector.currentViewSupportsSplitContentBrowser = function()
+{
+    var currentContentView = this.contentBrowser.currentContentView;
+    return !currentContentView || currentContentView.supportsSplitContentBrowser;
+}
+
+WebInspector.toggleSplitConsole = function()
+{
+    if (!this.currentViewSupportsSplitContentBrowser()) {
+        this.toggleConsoleView();
+        return;
+    }
+
+    if (this.isShowingSplitConsole())
+        this.hideSplitConsole();
+    else
+        this.showSplitConsole();
+}
+
+WebInspector.showSplitConsole = function()
+{
+    if (!this.currentViewSupportsSplitContentBrowser()) {
+        this.showFullHeightConsole();
+        return;
+    }
+
+    this.splitContentBrowser.element.classList.remove("hidden");
+
+    this._showingSplitConsoleSetting.value = true;
+
+    if (this.splitContentBrowser.currentContentView !== this.consoleContentView) {
+        // Be sure to close any existing log view in the main content browser before showing it in the
+        // split content browser. We can only show a content view in one browser at a time.
+        this.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.LogContentView);
+        this.splitContentBrowser.showContentView(this.consoleContentView);
+    } else {
+        // This causes the view to know it was shown and focus the prompt.
+        this.splitContentBrowser.contentViewContainer.shown();
+    }
+
+    if (this._wasShowingNavigationSidebarBeforeFullHeightConsole)
+        this.navigationSidebar.collapsed = false;
+
+    this.quickConsole.consoleLogVisibilityChanged(true);
+}
+
+WebInspector.hideSplitConsole = function()
+{
+    this.splitContentBrowser.element.classList.add("hidden");
+
+    this._showingSplitConsoleSetting.value = false;
+
+    // This causes the view to know it was hidden.
+    this.splitContentBrowser.contentViewContainer.hidden();
+
+    this.quickConsole.consoleLogVisibilityChanged(false);
+}
+
+WebInspector.showFullHeightConsole = function(scope)
+{
+    this.splitContentBrowser.element.classList.add("hidden");
+
+    this._showingSplitConsoleSetting.value = false;
+
+    scope = scope || WebInspector.LogContentView.Scopes.All;
+
+    // If the requested scope is already selected and the console is showing, then switch back to All.
+    if (this.isShowingConsoleView() && this.consoleContentView.scopeBar.item(scope).selected)
+        scope = WebInspector.LogContentView.Scopes.All;
+
+    this.consoleContentView.scopeBar.item(scope).selected = true;
+
+    if (this.contentBrowser.currentContentView !== this.consoleContentView) {
+        this._wasShowingNavigationSidebarBeforeFullHeightConsole = !this.navigationSidebar.collapsed;
+
+        // Collapse the sidebar before showing the console view, so the check for the collapsed state in
+        // _revealAndSelectRepresentedObjectInNavigationSidebar returns early and does not deselect any
+        // tree elements in the current sidebar.
+        this.navigationSidebar.collapsed = true;
+
+        // Be sure to close any existing log view in the split content browser before showing it in the
+        // main content browser. We can only show a content view in one browser at a time.
+        this.splitContentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.LogContentView);
+        this.contentBrowser.showContentView(this.consoleContentView);
+    }
+
+    console.assert(this.isShowingConsoleView());
+    console.assert(this._consoleToolbarButton.activated);
+
+    this.quickConsole.consoleLogVisibilityChanged(true);
+}
+
+WebInspector.isShowingConsoleView = function()
+{
+    return this.contentBrowser.currentContentView instanceof WebInspector.LogContentView;
+}
+
+WebInspector.showConsoleView = function(scope)
+{
+    this.showFullHeightConsole(scope);
+}
+
+WebInspector.toggleConsoleView = function()
+{
+    if (this.isShowingConsoleView()) {
+        if (this.contentBrowser.canGoBack())
+            this.contentBrowser.goBack();
+        else
+            this.resourceSidebarPanel.showMainFrameSourceCode();
+
+        if (this._wasShowingNavigationSidebarBeforeFullHeightConsole)
+            this.navigationSidebar.collapsed = false;
+    } else
+        this.showFullHeightConsole();
+}
+
+WebInspector.UIString = function(string, vararg)
+{
+    if (window.localizedStrings && string in window.localizedStrings)
+        return window.localizedStrings[string];
+
+    if (!this._missingLocalizedStrings)
+        this._missingLocalizedStrings = {};
+
+    if (!(string in this._missingLocalizedStrings)) {
+        console.error("Localized string \"" + string + "\" was not found.");
+        this._missingLocalizedStrings[string] = true;
+    }
+
+    return "LOCALIZED STRING NOT FOUND";
+}
+
+WebInspector.restoreFocusFromElement = function(element)
+{
+    if (element && element.isSelfOrAncestor(this.currentFocusElement))
+        this.previousFocusElement.focus();
+}
+
+WebInspector._focusChanged = function(event)
+{
+    // Make a caret selection inside the focused element if there isn't a range selection and there isn't already
+    // a caret selection inside. This is needed (at least) to remove caret from console when focus is moved.
+    // The selection change should not apply to text fields and text areas either.
+
+    if (WebInspector.isEventTargetAnEditableField(event))
+        return;
+
+    var selection = window.getSelection();
+    if (!selection.isCollapsed)
+        return;
+
+    var element = event.target;
+
+    if (element !== this.currentFocusElement) {
+        this.previousFocusElement = this.currentFocusElement;
+        this.currentFocusElement = element;
+    }
+
+    if (element.isInsertionCaretInside())
+        return;
+
+    var selectionRange = element.ownerDocument.createRange();
+    selectionRange.setStart(element, 0);
+    selectionRange.setEnd(element, 0);
+
+    selection.removeAllRanges();
+    selection.addRange(selectionRange);
+}
+
+WebInspector._mouseWasClicked = function(event)
+{
+    this.handlePossibleLinkClick(event);
+}
+
+WebInspector._dragOver = function(event)
+{
+    // Do nothing if another event listener handled the event already.
+    if (event.defaultPrevented)
+        return;
+
+    // Allow dropping into editable areas.
+    if (WebInspector.isEventTargetAnEditableField(event))
+        return;
+
+    // Prevent the drop from being accepted.
+    event.dataTransfer.dropEffect = "none";
+    event.preventDefault();
+}
+
+WebInspector._debuggerDidPause = function(event)
+{
+    this.debuggerSidebarPanel.show();
+
+    // Since the Scope Chain details sidebar panel might not be in the sidebar yet,
+    // set a flag to select and show it when it does become available.
+    this._selectAndShowScopeChainDetailsSidebarPanelWhenAvailable = true;
+
+    InspectorFrontendHost.bringToFront();
+}
+
+WebInspector._mainFrameDidChange = function(event)
+{
+    this.updateWindowTitle();
+}
+
+WebInspector._mainResourceDidChange = function(event)
+{
+    if (!event.target.isMainFrame())
+        return;
+    this.updateWindowTitle();
+}
+
+WebInspector._windowFocused = function(event)
+{
+    if (event.target.document.nodeType !== Node.DOCUMENT_NODE || this.docked)
+        return;
+
+    // FIXME: We should use the :window-inactive pseudo class once https://webkit.org/b/38927 is fixed.
+    document.body.classList.remove("window-inactive");
+}
+
+WebInspector._windowBlurred = function(event)
+{
+    if (event.target.document.nodeType !== Node.DOCUMENT_NODE || this.docked)
+        return;
+
+    // FIXME: We should use the :window-inactive pseudo class once https://webkit.org/b/38927 is fixed.
+    document.body.classList.add("window-inactive");
+}
+
+WebInspector._windowResized = function(event)
+{
+    this.toolbar.updateLayout();
+
+    this._contentBrowserSizeDidChange(event);
+}
+
+WebInspector._updateModifierKeys = function(event)
+{
+    var didChange = this.modifierKeys.altKey !== event.altKey || this.modifierKeys.metaKey !== event.metaKey || this.modifierKeys.shiftKey !== event.shiftKey;
+
+    this.modifierKeys = {altKey: event.altKey, metaKey: event.metaKey, shiftKey: event.shiftKey};
+
+    if (didChange)
+        this.notifications.dispatchEventToListeners(WebInspector.Notification.GlobalModifierKeysDidChange, event);
+}
+
+WebInspector._windowKeyDown = function(event)
+{
+    this._updateModifierKeys(event);
+
+    var opposite = !this._dockButtonToggledSetting.value;
+    this.undockButtonNavigationItem.toggled = (event.altKey && !event.metaKey && !event.shiftKey) ? opposite : !opposite;
+}
+
+WebInspector._windowKeyUp = function(event)
+{
+    this._updateModifierKeys(event);
+
+    var opposite = !this._dockButtonToggledSetting.value;
+    this.undockButtonNavigationItem.toggled = (event.altKey && !event.metaKey && !event.shiftKey) ? opposite : !opposite;
+}
+
+WebInspector._undock = function(event)
+{
+    this._dockButtonToggledSetting.value = this.undockButtonNavigationItem.toggled;
+
+    if (this.undockButtonNavigationItem.toggled)
+        InspectorFrontendHost.requestSetDockSide(this._dockSide === "bottom" ? "right" : "bottom");
+    else
+        InspectorFrontendHost.requestSetDockSide("undocked");
+}
+
+WebInspector._updateDockNavigationItems = function()
+{
+    // The close and undock buttons are only available when docked.
+    var docked = this.docked;
+    this.closeButtonNavigationItem.hidden = !docked;
+    this.undockButtonNavigationItem.hidden = !docked;
+
+    if (docked) {
+        this.undockButtonNavigationItem.alternateImage = this._dockSide === "bottom" ? "Images/DockRight.pdf" : "Images/DockBottom.pdf";
+        this.undockButtonNavigationItem.alternateToolTip = this._dockSide === "bottom" ? WebInspector.UIString("Dock to right of window") : WebInspector.UIString("Dock to bottom of window");
+    }
+
+    this.undockButtonNavigationItem.toggled = this._dockButtonToggledSetting.value;
+}
+
+WebInspector._sidebarCollapsedStateDidChange = function(event)
+{
+    if (event.target === this.navigationSidebar) {
+        this._navigationSidebarCollapsedSetting.value = this.navigationSidebar.collapsed;
+        this._updateNavigationSidebarForCurrentContentView();
+    } else if (event.target === this.detailsSidebar) {
+        if (!this._ignoreDetailsSidebarPanelCollapsedEvent)
+            this._detailsSidebarCollapsedSetting.value = this.detailsSidebar.collapsed;
+    }
+}
+
+WebInspector._detailsSidebarPanelSelected = function(event)
+{
+    if (!this.detailsSidebar.selectedSidebarPanel || this._ignoreDetailsSidebarPanelSelectedEvent)
+        return;
+
+    this._lastSelectedDetailsSidebarPanelSetting.value = this.detailsSidebar.selectedSidebarPanel.identifier;
+}
+
+WebInspector._revealAndSelectRepresentedObjectInNavigationSidebar = function(representedObject)
+{
+    if (this.navigationSidebar.collapsed)
+        return;
+
+    var selectedSidebarPanel = this.navigationSidebar.selectedSidebarPanel;
+
+    // If the tree outline is processing a selection currently then we can assume the selection does not
+    // need to be changed. This is needed to allow breakpoints tree elements to be selected without jumping
+    // back to selecting the resource tree element.
+    if (selectedSidebarPanel.contentTreeOutline.processingSelectionChange)
+        return;
+
+    var treeElement = selectedSidebarPanel.treeElementForRepresentedObject(representedObject);
+    if (treeElement)
+        treeElement.revealAndSelect(true, false, true, true);
+    else if (selectedSidebarPanel.contentTreeOutline.selectedTreeElement)
+        selectedSidebarPanel.contentTreeOutline.selectedTreeElement.deselect(true);
+}
+
+WebInspector._updateNavigationSidebarForCurrentContentView = function()
+{
+    if (this.navigationSidebar.collapsed)
+        return;
+
+    var selectedSidebarPanel = this.navigationSidebar.selectedSidebarPanel;
+    if (!selectedSidebarPanel)
+        return;
+
+    var currentContentView = this.contentBrowser.currentContentView;
+    if (!currentContentView)
+        return;
+
+    // Ensure the navigation sidebar panel is allowed by the current content view, if not ask the sidebar panel
+    // to show the content view for the current selection.
+    var allowedNavigationSidebarPanels = currentContentView.allowedNavigationSidebarPanels;
+    if (!allowedNavigationSidebarPanels.contains(selectedSidebarPanel.identifier)) {
+        selectedSidebarPanel.showContentViewForCurrentSelection();
+
+        // Fetch the current content view again, since it likely changed.
+        currentContentView = this.contentBrowser.currentContentView;
+    }
+
+    if (!allowedNavigationSidebarPanels.length || allowedNavigationSidebarPanels.contains(selectedSidebarPanel.identifier))
+        currentContentView.__lastNavigationSidebarPanelIdentifer = selectedSidebarPanel.identifier;
+
+    this._revealAndSelectRepresentedObjectInNavigationSidebar(currentContentView.representedObject);
+}
+
+WebInspector._navigationSidebarPanelSelected = function(event)
+{
+    var selectedSidebarPanel = this.navigationSidebar.selectedSidebarPanel;
+    if (!selectedSidebarPanel)
+        return;
+
+    this._lastSelectedNavigationSidebarPanelSetting.value = selectedSidebarPanel.identifier;
+
+    this._updateNavigationSidebarForCurrentContentView();
+}
+
+WebInspector._domNodeWasInspected = function(event)
+{
+    WebInspector.domTreeManager.highlightDOMNodeForTwoSeconds(event.data.node.id);
+
+    // Select the Style details sidebar panel if one of the DOM details sidebar panels isn't already selected.
+    if (!(this.detailsSidebar.selectedSidebarPanel instanceof WebInspector.DOMDetailsSidebarPanel))
+        this.detailsSidebar.selectedSidebarPanel = this.cssStyleDetailsSidebarPanel;
+
+    InspectorFrontendHost.bringToFront();
+}
+
+WebInspector._contentBrowserSizeDidChange = function(event)
+{
+    this.contentBrowser.updateLayout();
+    this.splitContentBrowser.updateLayout();
+    this.quickConsole.updateLayout();
+}
+
+WebInspector._quickConsoleDidResize = function(event)
+{
+    this.contentBrowser.updateLayout();
+}
+
+WebInspector._sidebarWidthDidChange = function(event)
+{
+    if (!event.target.collapsed) {
+        if (event.target === this.navigationSidebar)
+            this._navigationSidebarWidthSetting.value = this.navigationSidebar.width;
+        else if (event.target === this.detailsSidebar)
+            this._detailsSidebarWidthSetting.value = this.detailsSidebar.width;
+    }
+
+    this._contentBrowserSizeDidChange(event);
+}
+
+WebInspector._updateToolbarHeight = function()
+{
+    InspectorFrontendHost.setToolbarHeight(this.toolbar.element.offsetHeight);
+}
+
+WebInspector._toolbarDisplayModeDidChange = function(event)
+{
+    if (this._ignoreToolbarModeDidChangeEvents)
+        return;
+
+    if (this._dockSide === "bottom")
+        this._toolbarDockedBottomDisplayModeSetting.value = this.toolbar.displayMode;
+    else if (this._dockSide === "right")
+        this._toolbarDockedRightDisplayModeSetting.value = this.toolbar.displayMode;
+    else
+        this._toolbarUndockedDisplayModeSetting.value = this.toolbar.displayMode;
+
+    this._updateToolbarHeight();
+}
+
+WebInspector._toolbarSizeModeDidChange = function(event)
+{
+    if (this._ignoreToolbarModeDidChangeEvents)
+        return;
+
+    if (this._dockSide === "bottom")
+        this._toolbarDockedBottomSizeModeSetting.value = this.toolbar.sizeMode;
+    else if (this._dockSide === "right")
+        this._toolbarDockedRightSizeModeSetting.value = this.toolbar.sizeMode;
+    else
+        this._toolbarUndockedSizeModeSetting.value = this.toolbar.sizeMode;
+
+    this._updateToolbarHeight();
+}
+
+WebInspector._updateCurrentContentViewCookie = function()
+{
+    var currentContentView = this.contentBrowser.currentContentView;
+    if (!currentContentView)
+        return;
+
+    // The console does not have a sidebar, so create a cookie here.
+    if (currentContentView.representedObject instanceof WebInspector.LogObject) {
+        this._lastContentViewResponsibleSidebarPanelSetting.value = null;
+        this._lastContentCookieSetting.value = "console";
+        return;
+    }
+
+    var responsibleSidebarPanel = this.sidebarPanelForRepresentedObject(currentContentView.representedObject);
+    if (!responsibleSidebarPanel)
+        return;
+
+    var cookie = responsibleSidebarPanel.cookieForContentView(currentContentView);
+
+    this._lastContentViewResponsibleSidebarPanelSetting.value = responsibleSidebarPanel.identifier;
+    this._lastContentCookieSetting.value = cookie;
+}
+
+WebInspector._contentBrowserCurrentContentViewDidChange = function(event)
+{
+    var consoleViewShowing = this.isShowingConsoleView();
+    this._consoleToolbarButton.activated = consoleViewShowing;
+
+    if (!this.isShowingSplitConsole())
+        this.quickConsole.consoleLogVisibilityChanged(consoleViewShowing);
+
+    if (!this.currentViewSupportsSplitContentBrowser())
+        this.hideSplitConsole();
+
+    var currentContentView = this.contentBrowser.currentContentView;
+    if (!currentContentView)
+        return;
+
+    // Ensure the navigation sidebar panel is allowed by the current content view, if not change the navigation sidebar panel
+    // to the last navigation sidebar panel used with the content view or the first one allowed.
+    var selectedSidebarPanelIdentifier = this.navigationSidebar.selectedSidebarPanel.identifier;
+
+    var allowedNavigationSidebarPanels = currentContentView.allowedNavigationSidebarPanels;
+    if (allowedNavigationSidebarPanels.length && !allowedNavigationSidebarPanels.contains(selectedSidebarPanelIdentifier)) {
+        console.assert(!currentContentView.__lastNavigationSidebarPanelIdentifer || allowedNavigationSidebarPanels.contains(currentContentView.__lastNavigationSidebarPanelIdentifer));
+        this.navigationSidebar.selectedSidebarPanel = currentContentView.__lastNavigationSidebarPanelIdentifer || allowedNavigationSidebarPanels[0];
+    }
+
+    if (!allowedNavigationSidebarPanels.length || allowedNavigationSidebarPanels.contains(selectedSidebarPanelIdentifier))
+        currentContentView.__lastNavigationSidebarPanelIdentifer = selectedSidebarPanelIdentifier;
+
+    this._revealAndSelectRepresentedObjectInNavigationSidebar(currentContentView.representedObject);
+}
+
+WebInspector._contentBrowserRepresentedObjectsDidChange = function(event)
+{
+    var currentRepresentedObjects = this.contentBrowser.currentRepresentedObjects;
+    var currentSidebarPanels = this.detailsSidebar.sidebarPanels;
+    var wasSidebarEmpty = !currentSidebarPanels.length;
+
+    // Ignore any changes to the selected sidebar panel during this function so only user initiated
+    // changes are recorded in _lastSelectedDetailsSidebarPanelSetting.
+    this._ignoreDetailsSidebarPanelSelectedEvent = true;
+
+    for (var i = 0; i < this.detailsSidebarPanels.length; ++i) {
+        var sidebarPanel = this.detailsSidebarPanels[i];
+        if (sidebarPanel.inspect(currentRepresentedObjects)) {
+            var currentSidebarPanelIndex = currentSidebarPanels.indexOf(sidebarPanel);
+            if (currentSidebarPanelIndex !== -1) {
+                // Already showing the panel.
+                continue;
+            }
+
+            // The sidebar panel was not previously showing, so add the panel and show the toolbar item.
+            this.detailsSidebar.addSidebarPanel(sidebarPanel);
+            sidebarPanel.toolbarItem.hidden = false;
+
+            if (this._selectAndShowScopeChainDetailsSidebarPanelWhenAvailable && sidebarPanel === this.scopeChainDetailsSidebarPanel) {
+                // Select the scope chain sidebar panel since it needs to be shown after pausing in the debugger.
+                delete this._selectAndShowScopeChainDetailsSidebarPanelWhenAvailable;
+                this.detailsSidebar.selectedSidebarPanel = this.scopeChainDetailsSidebarPanel;
+
+                this._ignoreDetailsSidebarPanelCollapsedEvent = true;
+                this.detailsSidebar.collapsed = false;
+                delete this._ignoreDetailsSidebarPanelCollapsedEvent;
+            } else if (this._lastSelectedDetailsSidebarPanelSetting.value === sidebarPanel.identifier) {
+                // Restore the sidebar panel selection if this sidebar panel was the last one selected by the user.
+                this.detailsSidebar.selectedSidebarPanel = sidebarPanel;
+            }
+        } else {
+            // The sidebar panel can't inspect the current represented objects, so remove the panel and hide the toolbar item.
+            this.detailsSidebar.removeSidebarPanel(sidebarPanel);
+            sidebarPanel.toolbarItem.hidden = true;
+        }
+    }
+
+    if (!this.detailsSidebar.selectedSidebarPanel && currentSidebarPanels.length)
+        this.detailsSidebar.selectedSidebarPanel = currentSidebarPanels[0];
+
+    this._ignoreDetailsSidebarPanelCollapsedEvent = true;
+
+    if (!this.detailsSidebar.sidebarPanels.length)
+        this.detailsSidebar.collapsed = true;
+    else if (wasSidebarEmpty)
+        this.detailsSidebar.collapsed = this._detailsSidebarCollapsedSetting.value;
+
+    delete this._ignoreDetailsSidebarPanelCollapsedEvent;
+
+    // Stop ignoring the sidebar panel selected event.
+    delete this._ignoreDetailsSidebarPanelSelectedEvent;
+
+    this._updateCurrentContentViewCookie(event);
+}
+
+WebInspector._initializeWebSocketIfNeeded = function()
+{
+    var ws;
+    var queryParams = parseLocationQueryParameters();
+
+    if ("ws" in queryParams)
+        ws = "ws://" + queryParams.ws;
+    else if ("page" in queryParams) {
+        var page = queryParams.page;
+        var host = "host" in queryParams ? queryParams.host : window.location.host;
+        ws = "ws://" + host + "/devtools/page/" + page;
+    }
+
+    if (!ws)
+        return;
+
+    var socket = new WebSocket(ws);
+    socket.addEventListener("open", createSocket);
+
+    function createSocket()
+    {
+        WebInspector.socket = socket;
+        WebInspector.socket.addEventListener("message", function(message) { InspectorBackend.dispatch(message.data); });
+        WebInspector.socket.addEventListener("error", function(error) { console.error(error); });
+    }
+}
+
+WebInspector._updateSplitConsoleHeight = function(height)
+{
+    const minimumHeight = 64;
+    const maximumHeight = window.innerHeight * 0.55;
+
+    height = Math.max(minimumHeight, Math.min(height, maximumHeight));
+
+    this.splitContentBrowser.element.style.height = height + "px";
+}
+
+WebInspector._consoleResizerMouseDown = function(event)
+{
+    if (event.button !== 0 || event.ctrlKey)
+        return;
+
+    // Only start dragging if the target is one of the elements that we expect.
+    if (!event.target.classList.contains("navigation-bar") && !event.target.classList.contains("flexible-space"))
+        return;
+
+    var resizerElement = event.target;
+    var mouseOffset = resizerElement.offsetHeight - (event.pageY - resizerElement.totalOffsetTop);
+
+    function dockedResizerDrag(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        var height = window.innerHeight - event.pageY - mouseOffset;
+
+        this._splitConsoleHeightSetting.value = height;
+
+        this._updateSplitConsoleHeight(height);
+    }
+
+    function dockedResizerDragEnd(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        this.elementDragEnd(event);
+    }
+
+    this.elementDragStart(resizerElement, dockedResizerDrag.bind(this), dockedResizerDragEnd.bind(this), event, "row-resize");
+}
+
+WebInspector._toolbarMouseDown = function(event)
+{
+    if (event.ctrlKey)
+        return;
+
+    if (this._dockSide === "right")
+        return;
+
+    if (this.docked)
+        this._dockedResizerMouseDown(event);
+    else
+        this._moveWindowMouseDown(event);
+}
+
+WebInspector._dockedResizerMouseDown = function(event)
+{
+    if (event.button !== 0 || event.ctrlKey)
+        return;
+
+    if (!this.docked)
+        return;
+
+    // Only start dragging if the target is one of the elements that we expect.
+    if (event.target.id !== "docked-resizer" && !event.target.classList.contains("toolbar") &&
+        !event.target.classList.contains("flexible-space") && !event.target.classList.contains("item-section"))
+        return;
+
+    var windowProperty = this._dockSide === "bottom" ? "innerHeight" : "innerWidth";
+    var eventProperty = this._dockSide === "bottom" ? "screenY" : "screenX";
+
+    var resizerElement = event.target;
+    var lastScreenPosition = event[eventProperty];
+
+    function dockedResizerDrag(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        var position = event[eventProperty];
+        var dimension = window[windowProperty] - (position - lastScreenPosition);
+
+        if (this._dockSide === "bottom")
+            InspectorFrontendHost.setAttachedWindowHeight(dimension);
+        else
+            InspectorFrontendHost.setAttachedWindowWidth(dimension);
+
+        lastScreenPosition = position;
+    }
+
+    function dockedResizerDragEnd(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        WebInspector.elementDragEnd(event);
+    }
+
+    WebInspector.elementDragStart(resizerElement, dockedResizerDrag.bind(this), dockedResizerDragEnd.bind(this), event, this._dockSide === "bottom" ? "row-resize" : "col-resize");
+}
+
+WebInspector._moveWindowMouseDown = function(event)
+{
+    console.assert(!this.docked);
+
+    if (event.button !== 0 || event.ctrlKey)
+        return;
+
+    // Only start dragging if the target is one of the elements that we expect.
+    if (!event.target.classList.contains("toolbar") && !event.target.classList.contains("flexible-space") &&
+        !event.target.classList.contains("item-section"))
+        return;
+
+    var lastScreenX = event.screenX;
+    var lastScreenY = event.screenY;
+
+    function toolbarDrag(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        var x = event.screenX - lastScreenX;
+        var y = event.screenY - lastScreenY;
+
+        InspectorFrontendHost.moveWindowBy(x, y);
+
+        lastScreenX = event.screenX;
+        lastScreenY = event.screenY;
+    }
+
+    function toolbarDragEnd(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        WebInspector.elementDragEnd(event);
+    }
+
+    WebInspector.elementDragStart(event.target, toolbarDrag, toolbarDragEnd, event, "default");
+}
+
+WebInspector._inspectModeStateChanged = function(event)
+{
+    this._inspectModeToolbarButton.activated = WebInspector.domTreeManager.inspectModeEnabled;
+}
+
+WebInspector._toggleInspectMode = function(event)
+{
+    WebInspector.domTreeManager.inspectModeEnabled = !WebInspector.domTreeManager.inspectModeEnabled;
+}
+
+WebInspector._reloadPage = function(event)
+{
+    PageAgent.reload();
+}
+
+WebInspector._reloadPageIgnoringCache = function(event)
+{
+    PageAgent.reload(true);
+}
+
+WebInspector._toggleInspectMode = function(event)
+{
+    this.domTreeManager.inspectModeEnabled = !this.domTreeManager.inspectModeEnabled;
+}
+
+WebInspector._focusedContentView = function()
+{
+    if (this.contentBrowser.element.isSelfOrAncestor(this.currentFocusElement))
+        return this.contentBrowser.currentContentView;
+    if (this.splitContentBrowser.element.isSelfOrAncestor(this.currentFocusElement))
+        return  this.splitContentBrowser.currentContentView;
+    return null;
+}
+
+WebInspector._beforecopy = function(event)
+{
+    var selection = window.getSelection();
+
+    // If there is no selection, see if the focused element or focused ContentView can handle the copy event.
+    if (selection.isCollapsed && !WebInspector.isEventTargetAnEditableField(event)) {
+        var focusedCopyHandler = this.currentFocusElement && this.currentFocusElement.copyHandler;
+        if (focusedCopyHandler && typeof focusedCopyHandler.handleBeforeCopyEvent === "function") {
+            focusedCopyHandler.handleBeforeCopyEvent(event);
+            if (event.defaultPrevented)
+                return;
+        }
+
+        var focusedContentView = this._focusedContentView();
+        if (focusedContentView && typeof focusedContentView.handleCopyEvent === "function") {
+            event.preventDefault();
+            return;
+        }
+
+        return;
+    }
+
+    if (selection.isCollapsed)
+        return;
+
+    // Say we can handle it (by preventing default) to remove word break characters.
+    event.preventDefault();
+}
+
+WebInspector._copy = function(event)
+{
+    var selection = window.getSelection();
+
+    // If there is no selection, pass the copy event on to the focused element or focused ContentView.
+    if (selection.isCollapsed && !WebInspector.isEventTargetAnEditableField(event)) {
+        var focusedCopyHandler = this.currentFocusElement && this.currentFocusElement.copyHandler;
+        if (focusedCopyHandler && typeof focusedCopyHandler.handleCopyEvent === "function") {
+            focusedCopyHandler.handleCopyEvent(event);
+            if (event.defaultPrevented)
+                return;
+        }
+
+        var focusedContentView = this._focusedContentView();
+        if (focusedContentView && typeof focusedContentView.handleCopyEvent === "function") {
+            focusedContentView.handleCopyEvent(event);
+            return;
+        }
+
+        return;
+    }
+
+    if (selection.isCollapsed)
+        return;
+
+    // Remove word break characters from the selection before putting it on the pasteboard.
+    var selectionString = selection.toString().removeWordBreakCharacters();
+    event.clipboardData.setData("text/plain", selectionString);
+    event.preventDefault();
+}
+
+WebInspector._generateDisclosureTriangleImages = function()
+{
+    var specifications = {};
+    specifications["normal"] = {fillColor: [0, 0, 0, 0.5]};
+    specifications["normal-active"] = {fillColor: [0, 0, 0, 0.7]};
+    specifications["selected"] = {fillColor: [255, 255, 255, 0.8]};
+    specifications["selected-active"] = {fillColor: [255, 255, 255, 1]};
+
+    generateColoredImagesForCSS("Images/DisclosureTriangleSmallOpen.pdf", specifications, 13, 13, "disclosure-triangle-small-open-");
+    generateColoredImagesForCSS("Images/DisclosureTriangleSmallClosed.pdf", specifications, 13, 13, "disclosure-triangle-small-closed-");
+
+    generateColoredImagesForCSS("Images/DisclosureTriangleTinyOpen.pdf", specifications, 8, 8, "disclosure-triangle-tiny-open-");
+    generateColoredImagesForCSS("Images/DisclosureTriangleTinyClosed.pdf", specifications, 8, 8, "disclosure-triangle-tiny-closed-");
+}
+
+WebInspector.elementDragStart = function(element, dividerDrag, elementDragEnd, event, cursor, eventTarget)
+{
+    if (WebInspector._elementDraggingEventListener || WebInspector._elementEndDraggingEventListener)
+        WebInspector.elementDragEnd(event);
+    
+    if (element) {
+        // Install glass pane
+        if (WebInspector._elementDraggingGlassPane)
+            WebInspector._elementDraggingGlassPane.parentElement.removeChild(WebInspector._elementDraggingGlassPane);
+        
+        var glassPane = document.createElement("div");
+        glassPane.style.cssText = "position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;z-index:1";
+        glassPane.id = "glass-pane-for-drag";
+        element.ownerDocument.body.appendChild(glassPane);
+        WebInspector._elementDraggingGlassPane = glassPane;
+    }
+    
+    WebInspector._elementDraggingEventListener = dividerDrag;
+    WebInspector._elementEndDraggingEventListener = elementDragEnd;
+    
+    var targetDocument = event.target.ownerDocument;
+
+    WebInspector._elementDraggingEventTarget = eventTarget || targetDocument;
+    WebInspector._elementDraggingEventTarget.addEventListener("mousemove", dividerDrag, true);
+    WebInspector._elementDraggingEventTarget.addEventListener("mouseup", elementDragEnd, true);
+    
+    targetDocument.body.style.cursor = cursor;
+    
+    event.preventDefault();
+}
+
+WebInspector.elementDragEnd = function(event)
+{
+    WebInspector._elementDraggingEventTarget.removeEventListener("mousemove", WebInspector._elementDraggingEventListener, true);
+    WebInspector._elementDraggingEventTarget.removeEventListener("mouseup", WebInspector._elementEndDraggingEventListener, true);
+    
+    event.target.ownerDocument.body.style.removeProperty("cursor");
+    
+    if (WebInspector._elementDraggingGlassPane)
+        WebInspector._elementDraggingGlassPane.parentElement.removeChild(WebInspector._elementDraggingGlassPane);
+    
+    delete WebInspector._elementDraggingGlassPane;
+    delete WebInspector._elementDraggingEventTarget;
+    delete WebInspector._elementDraggingEventListener;
+    delete WebInspector._elementEndDraggingEventListener;
+    
+    event.preventDefault();
+}
+
+WebInspector.createMessageTextView = function(message, isError)
+{
+    var messageElement = document.createElement("div");
+    messageElement.className = "message-text-view";
+    if (isError)
+        messageElement.classList.add("error");
+
+    messageElement.textContent = message;
+    
+    return messageElement;
+}
+
+WebInspector.createGoToArrowButton = function()
+{
+    if (!WebInspector._generatedGoToArrowButtonImages) {
+        WebInspector._generatedGoToArrowButtonImages = true;
+
+        var specifications = {};
+        specifications["go-to-arrow-normal"] = {fillColor: [0, 0, 0, 0.5]};
+        specifications["go-to-arrow-normal-active"] = {fillColor: [0, 0, 0, 0.7]};
+        specifications["go-to-arrow-selected"] = {fillColor: [255, 255, 255, 0.8]};
+        specifications["go-to-arrow-selected-active"] = {fillColor: [255, 255, 255, 1]};
+
+        generateColoredImagesForCSS("Images/GoToArrow.pdf", specifications, 10, 10);
+    }
+
+    function stopPropagation(event)
+    {
+        event.stopPropagation()
+    }
+
+    var button = document.createElement("button");
+    button.addEventListener("mousedown", stopPropagation, true);
+    button.className = "go-to-arrow";
+    button.tabIndex = -1;
+    return button;
+}
+
+WebInspector.createSourceCodeLocationLink = function(sourceCodeLocation, dontFloat, useGoToArrowButton)
+{
+    console.assert(sourceCodeLocation);
+    if (!sourceCodeLocation)
+        return null;
+
+    function showSourceCodeLocation(event)
+    {
+        event.stopPropagation();
+        event.preventDefault();
+
+        if (event.metaKey)
+            this.resourceSidebarPanel.showOriginalUnformattedSourceCodeLocation(sourceCodeLocation);
+        else
+            this.resourceSidebarPanel.showSourceCodeLocation(sourceCodeLocation);
+    }
+
+    var linkElement = document.createElement("a");
+    linkElement.className = "go-to-link";
+    linkElement.addEventListener("click", showSourceCodeLocation.bind(this));
+    sourceCodeLocation.populateLiveDisplayLocationTooltip(linkElement);
+
+    if (useGoToArrowButton)
+        linkElement.appendChild(WebInspector.createGoToArrowButton());
+    else
+        sourceCodeLocation.populateLiveDisplayLocationString(linkElement, "textContent");
+
+    if (dontFloat)
+        linkElement.classList.add("dont-float");
+
+    return linkElement;
+}
+
+WebInspector.linkifyLocation = function(url, lineNumber, columnNumber, className)
+{
+    var sourceCode = WebInspector.frameResourceManager.resourceForURL(url);
+    if (!sourceCode) {
+        sourceCode = WebInspector.debuggerManager.scriptsForURL(url)[0];
+        if (sourceCode)
+            sourceCode = sourceCode.resource || sourceCode;
+    }
+
+    if (!sourceCode) {
+        var anchor = document.createElement("a");
+        anchor.href  = url;
+        anchor.lineNumber = lineNumber;
+        if (className)
+            anchor.className = className;
+        anchor.appendChild(document.createTextNode(WebInspector.displayNameForURL(url) + ":" + lineNumber));
+        return anchor;
+    }
+
+    var sourceCodeLocation = sourceCode.createSourceCodeLocation(lineNumber, columnNumber);
+    var linkElement = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, true);
+    if (className)
+        linkElement.classList.add(className);
+    return linkElement;
+}
+
+WebInspector.linkifyURLAsNode = function(url, linkText, classes, tooltipText)
+{
+    if (!linkText)
+        linkText = url;
+
+    classes = (classes ? classes + " " : "");
+
+    var a = document.createElement("a");
+    a.href = url;
+    a.className = classes;
+
+    if (typeof tooltipText === "undefined")
+        a.title = url;
+    else if (typeof tooltipText !== "string" || tooltipText.length)
+        a.title = tooltipText;
+
+    a.textContent = linkText;
+    a.style.maxWidth = "100%";
+
+    return a;
+}
+
+WebInspector.linkifyStringAsFragmentWithCustomLinkifier = function(string, linkifier)
+{
+    var container = document.createDocumentFragment();
+    var linkStringRegEx = /(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\/\/|www\.)[\w$\-_+*'=\|\/\\(){}[\]%@&#~,:;.!?]{2,}[\w$\-_+*=\|\/\\({%@&#~]/;
+    var lineColumnRegEx = /:(\d+)(:(\d+))?$/;
+
+    while (string) {
+        var linkString = linkStringRegEx.exec(string);
+        if (!linkString)
+            break;
+
+        linkString = linkString[0];
+        var linkIndex = string.indexOf(linkString);
+        var nonLink = string.substring(0, linkIndex);
+        container.appendChild(document.createTextNode(nonLink));
+
+        var title = linkString;
+        var realURL = (linkString.startsWith("www.") ? "http://" + linkString : linkString);
+        var lineColumnMatch = lineColumnRegEx.exec(realURL);
+        if (lineColumnMatch)
+            realURL = realURL.substring(0, realURL.length - lineColumnMatch[0].length);
+
+        var linkNode = linkifier(title, realURL, lineColumnMatch ? lineColumnMatch[1] : undefined);
+        container.appendChild(linkNode);
+        string = string.substring(linkIndex + linkString.length, string.length);
+    }
+
+    if (string)
+        container.appendChild(document.createTextNode(string));
+
+    return container;
+}
+
+WebInspector.linkifyStringAsFragment = function(string)
+{
+    function linkifier(title, url, lineNumber)
+    {
+        var urlNode = WebInspector.linkifyURLAsNode(url, title, undefined);
+        if (typeof(lineNumber) !== "undefined")
+            urlNode.lineNumber = lineNumber;
+
+        return urlNode; 
+    }
+    
+    return WebInspector.linkifyStringAsFragmentWithCustomLinkifier(string, linkifier);
+}
+
+WebInspector._undoKeyboardShortcut = function(event)
+{
+    if (!this.isEditingAnyField() && !this.isEventTargetAnEditableField(event)) {
+        this.undo();
+        event.preventDefault();
+    }
+}
+
+WebInspector._redoKeyboardShortcut = function(event)
+{
+    if (!this.isEditingAnyField() && !this.isEventTargetAnEditableField(event)) {
+        this.redo();
+        event.preventDefault();
+    }
+}
+
+WebInspector.undo = function()
+{
+    DOMAgent.undo();
+}
+
+WebInspector.redo = function()
+{
+    DOMAgent.redo();
+}
+
+/**
+ * @param {Element} element
+ * @param {Array.<Object>} resultRanges
+ * @param {string} styleClass
+ * @param {Array.<Object>=} changes
+ */
+WebInspector.highlightRangesWithStyleClass = function(element, resultRanges, styleClass, changes)
+{
+    changes = changes || [];
+    var highlightNodes = [];
+    var lineText = element.textContent;
+    var ownerDocument = element.ownerDocument;
+    var textNodeSnapshot = ownerDocument.evaluate(".//text()", element, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+
+    var snapshotLength = textNodeSnapshot.snapshotLength;
+    if (snapshotLength === 0)
+        return highlightNodes;
+
+    var nodeRanges = [];
+    var rangeEndOffset = 0;
+    for (var i = 0; i < snapshotLength; ++i) {
+        var range = {};
+        range.offset = rangeEndOffset;
+        range.length = textNodeSnapshot.snapshotItem(i).textContent.length;
+        rangeEndOffset = range.offset + range.length;
+        nodeRanges.push(range);
+    }
+
+    var startIndex = 0;
+    for (var i = 0; i < resultRanges.length; ++i) {
+        var startOffset = resultRanges[i].offset;
+        var endOffset = startOffset + resultRanges[i].length;
+
+        while (startIndex < snapshotLength && nodeRanges[startIndex].offset + nodeRanges[startIndex].length <= startOffset)
+            startIndex++;
+        var endIndex = startIndex;
+        while (endIndex < snapshotLength && nodeRanges[endIndex].offset + nodeRanges[endIndex].length < endOffset)
+            endIndex++;
+        if (endIndex === snapshotLength)
+            break;
+
+        var highlightNode = ownerDocument.createElement("span");
+        highlightNode.className = styleClass;
+        highlightNode.textContent = lineText.substring(startOffset, endOffset);
+
+        var lastTextNode = textNodeSnapshot.snapshotItem(endIndex);
+        var lastText = lastTextNode.textContent;
+        lastTextNode.textContent = lastText.substring(endOffset - nodeRanges[endIndex].offset);
+        changes.push({ node: lastTextNode, type: "changed", oldText: lastText, newText: lastTextNode.textContent });
+
+        if (startIndex === endIndex) {
+            lastTextNode.parentElement.insertBefore(highlightNode, lastTextNode);
+            changes.push({ node: highlightNode, type: "added", nextSibling: lastTextNode, parent: lastTextNode.parentElement });
+            highlightNodes.push(highlightNode);
+
+            var prefixNode = ownerDocument.createTextNode(lastText.substring(0, startOffset - nodeRanges[startIndex].offset));
+            lastTextNode.parentElement.insertBefore(prefixNode, highlightNode);
+            changes.push({ node: prefixNode, type: "added", nextSibling: highlightNode, parent: lastTextNode.parentElement });
+        } else {
+            var firstTextNode = textNodeSnapshot.snapshotItem(startIndex);
+            var firstText = firstTextNode.textContent;
+            var anchorElement = firstTextNode.nextSibling;
+
+            firstTextNode.parentElement.insertBefore(highlightNode, anchorElement);
+            changes.push({ node: highlightNode, type: "added", nextSibling: anchorElement, parent: firstTextNode.parentElement });
+            highlightNodes.push(highlightNode);
+
+            firstTextNode.textContent = firstText.substring(0, startOffset - nodeRanges[startIndex].offset);
+            changes.push({ node: firstTextNode, type: "changed", oldText: firstText, newText: firstTextNode.textContent });
+
+            for (var j = startIndex + 1; j < endIndex; j++) {
+                var textNode = textNodeSnapshot.snapshotItem(j);
+                var text = textNode.textContent;
+                textNode.textContent = "";
+                changes.push({ node: textNode, type: "changed", oldText: text, newText: textNode.textContent });
+            }
+        }
+        startIndex = endIndex;
+        nodeRanges[startIndex].offset = endOffset;
+        nodeRanges[startIndex].length = lastTextNode.textContent.length;
+
+    }
+    return highlightNodes;
+}
+
+WebInspector.revertDomChanges = function(domChanges)
+{
+    for (var i = domChanges.length - 1; i >= 0; --i) {
+        var entry = domChanges[i];
+        switch (entry.type) {
+        case "added":
+            if (entry.node.parentElement)
+                entry.node.parentElement.removeChild(entry.node);
+            break;
+        case "changed":
+            entry.node.textContent = entry.oldText;
+            break;
+        }
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/MetricsStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/MetricsStyleDetailsPanel.js
new file mode 100644
index 000000000..d28a83219
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/MetricsStyleDetailsPanel.js
@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.MetricsStyleDetailsPanel = function()
+{
+    WebInspector.StyleDetailsPanel.call(this, WebInspector.MetricsStyleDetailsPanel.StyleClassName, "metrics", WebInspector.UIString("Metrics"));
+
+    this._boxModelDiagramRow = new WebInspector.BoxModelDetailsSectionRow;
+
+    var boxModelGroup = new WebInspector.DetailsSectionGroup([this._boxModelDiagramRow]);
+    var boxModelSection = new WebInspector.DetailsSection("style-box-model", WebInspector.UIString("Box Model"), [boxModelGroup]);
+
+    this.element.appendChild(boxModelSection.element);
+};
+
+WebInspector.MetricsStyleDetailsPanel.StyleClassName = "metrics";
+
+WebInspector.MetricsStyleDetailsPanel.prototype = {
+    constructor: WebInspector.MetricsStyleDetailsPanel,
+
+    // Public
+
+    refresh: function()
+    {
+        this._boxModelDiagramRow.nodeStyles = this.nodeStyles;
+    }
+};
+
+WebInspector.MetricsStyleDetailsPanel.prototype.__proto__ = WebInspector.StyleDetailsPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/NavigationBar.css b/Source/WebInspectorUI/UserInterface/NavigationBar.css
new file mode 100644
index 000000000..082de70a6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/NavigationBar.css
@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.navigation-bar {
+    display: -webkit-flex;
+    -webkit-justify-content: center;
+    -webkit-flex-wrap: wrap;
+
+    box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0;
+    border-bottom: 1px solid rgb(179, 179, 179);
+
+    height: 22px;
+
+    white-space: nowrap;
+    overflow: hidden;
+
+    outline: none;
+}
+
+.navigation-bar .item {
+    display: -webkit-flex;
+    -webkit-align-items: center;
+    -webkit-flex-wrap: wrap;
+
+    height: 21px;
+    outline: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/NavigationBar.js b/Source/WebInspectorUI/UserInterface/NavigationBar.js
new file mode 100644
index 000000000..c13c9a83d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/NavigationBar.js
@@ -0,0 +1,451 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NavigationBar = function(element, navigationItems, role, label) {
+    WebInspector.Object.call(this);
+
+    this._element = element || document.createElement("div");
+    this._element.classList.add(this.constructor.StyleClassName || WebInspector.NavigationBar.StyleClassName);
+    this._element.tabIndex = 0;
+    
+    if (role)
+        this._element.setAttribute("role", role);
+    if (label)
+        this._element.setAttribute("aria-label", label);
+
+    this._element.addEventListener("focus", this._focus.bind(this), false);
+    this._element.addEventListener("blur", this._blur.bind(this), false);
+    this._element.addEventListener("keydown", this._keyDown.bind(this), false);
+    this._element.addEventListener("mousedown", this._mouseDown.bind(this), false);
+
+    document.addEventListener("load", this.updateLayout.bind(this), false);
+
+    this._styleElement = document.createElement("style");
+
+    this._navigationItems = [];
+
+    if (navigationItems) {
+        for (var i = 0; i < navigationItems.length; ++i)
+            this.addNavigationItem(navigationItems[i]);
+    }
+
+    document.head.appendChild(this._styleElement);
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.NavigationBar);
+
+WebInspector.NavigationBar.StyleClassName = "navigation-bar";
+WebInspector.NavigationBar.CollapsedStyleClassName = "collapsed";
+
+WebInspector.NavigationBar.Event = {
+    NavigationItemSelected: "navigation-bar-navigation-item-selected"
+};
+
+WebInspector.NavigationBar.prototype = {
+    constructor: WebInspector.NavigationBar,
+
+    // Public
+
+    addNavigationItem: function(navigationItem, parentElement)
+    {
+        return this.insertNavigationItem(navigationItem, this._navigationItems.length, parentElement);
+    },
+
+    insertNavigationItem: function(navigationItem, index, parentElement)
+    {
+        console.assert(navigationItem instanceof WebInspector.NavigationItem);
+        if (!(navigationItem instanceof WebInspector.NavigationItem))
+            return;
+
+        if (navigationItem.parentNavigationBar)
+            navigationItem.parentNavigationBar.removeNavigationItem(navigationItem);
+
+        navigationItem._parentNavigationBar = this;
+
+        console.assert(index >= 0 && index <= this._navigationItems.length);
+        index = Math.max(0, Math.min(index, this._navigationItems.length));
+
+        this._navigationItems.splice(index, 0, navigationItem);
+
+        if (!parentElement)
+            parentElement = this._element;
+
+        var nextSibling = this._navigationItems[index + 1];
+        var nextSiblingElement = nextSibling ? nextSibling.element : null;
+        if (nextSiblingElement && nextSiblingElement.parentNode !== parentElement)
+            nextSiblingElement = null;
+
+        parentElement.insertBefore(navigationItem.element, nextSiblingElement);
+
+        this._minimumWidthNeedsRecalculation = true;
+        this._needsStyleUpdated = true;
+
+        this.updateLayoutSoon();
+
+        return navigationItem;
+    },
+
+    removeNavigationItem: function(navigationItemOrIdentifierOrIndex, index)
+    {
+        var navigationItem = this._findNavigationItem(navigationItemOrIdentifierOrIndex);
+        if (!navigationItem)
+            return;
+
+        navigationItem._parentNavigationBar = null;
+
+        if (this._selectedNavigationItem === navigationItem)
+            this.selectedNavigationItem = null;
+
+        this._navigationItems.remove(navigationItem);
+        navigationItem.element.remove();
+
+        this._minimumWidthNeedsRecalculation = true;
+        this._needsStyleUpdated = true;
+
+        this.updateLayoutSoon();
+
+        return navigationItem;
+    },
+
+    updateLayoutSoon: function()
+    {
+        if (this._updateLayoutTimeout)
+            return;
+
+        this._needsLayout = true;
+
+        function update()
+        {
+            delete this._updateLayoutTimeout;
+
+            if (this._needsLayout || this._needsStyleUpdated)
+                this.updateLayout();
+        }
+
+        this._updateLayoutTimeout = setTimeout(update.bind(this), 0);
+    },
+
+    updateLayout: function()
+    {
+        if (this._updateLayoutTimeout) {
+            clearTimeout(this._updateLayoutTimeout);
+            delete this._updateLayoutTimeout;
+        }
+
+        if (this._needsStyleUpdated)
+            this._updateStyle();
+
+        this._needsLayout = false;
+
+        if (typeof this.customUpdateLayout === "function") {
+            this.customUpdateLayout();
+            return;
+        }
+
+        // Remove the collapsed style class to test if the items can fit at full width.
+        this._element.classList.remove(WebInspector.NavigationBar.CollapsedStyleClassName);
+
+        // Tell each navigation item to update to full width if needed.
+        for (var i = 0; i < this._navigationItems.length; ++i)
+            this._navigationItems[i].updateLayout(true);
+
+        var totalItemWidth = 0;
+        for (var i = 0; i < this._navigationItems.length; ++i) {
+            // Skip flexible space items since they can take up no space at the minimum width.
+            if (this._navigationItems[i] instanceof WebInspector.FlexibleSpaceNavigationItem)
+                continue;
+
+            totalItemWidth += this._navigationItems[i].element.offsetWidth;
+        }
+
+        var barWidth = this._element.offsetWidth;
+
+        // Add the collapsed class back if the items are wider than the bar.
+        if (totalItemWidth > barWidth)
+            this._element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
+
+        // Give each navigation item the opportunity to collapse further.
+        for (var i = 0; i < this._navigationItems.length; ++i)
+            this._navigationItems[i].updateLayout();
+    },
+
+    get selectedNavigationItem()
+    {
+        return this._selectedNavigationItem || null;
+    },
+
+    set selectedNavigationItem(navigationItemOrIdentifierOrIndex)
+    {
+        var navigationItem = this._findNavigationItem(navigationItemOrIdentifierOrIndex);
+
+        // Only radio navigation items can be selected.
+        if (!(navigationItem instanceof WebInspector.RadioButtonNavigationItem))
+            navigationItem = null;
+
+        if (this._selectedNavigationItem === navigationItem)
+            return;
+
+        if (this._selectedNavigationItem)
+            this._selectedNavigationItem.selected = false;
+
+        this._selectedNavigationItem = navigationItem || null;
+
+        if (this._selectedNavigationItem)
+            this._selectedNavigationItem.selected = true;
+
+        // When the mouse is down don't dispatch the selected event, it will be dispatched on mouse up.
+        // This prevents sending the event while the user is scrubbing the bar.
+        if (!this._mouseIsDown)
+            this.dispatchEventToListeners(WebInspector.NavigationBar.Event.NavigationItemSelected);
+    },
+
+    get navigationItems()
+    {
+        return this._navigationItems;
+    },
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get minimumWidth()
+    {
+        if (typeof this._minimumWidth === "undefined" || this._minimumWidthNeedsRecalculation) {
+            this._minimumWidth = this._calculateMinimumWidth();
+            delete this._minimumWidthNeedsRecalculation;
+        }
+
+        return this._minimumWidth;
+    },
+
+    get sizesToFit()
+    {
+        // Can be overriden by subclasses.
+        return false;
+    },
+
+    // Private
+
+    _findNavigationItem: function(navigationItemOrIdentifierOrIndex)
+    {
+        var navigationItem = null;
+
+        if (navigationItemOrIdentifierOrIndex instanceof WebInspector.NavigationItem) {
+            if (this._navigationItems.contains(navigationItemOrIdentifierOrIndex))
+                navigationItem = navigationItemOrIdentifierOrIndex;
+        } else if (typeof navigationItemOrIdentifierOrIndex === "number") {
+            navigationItem = this._navigationItems[navigationItemOrIdentifierOrIndex];
+        } else if (typeof navigationItemOrIdentifierOrIndex === "string") {
+            for (var i = 0; i < this._navigationItems.length; ++i) {
+                if (this._navigationItems[i].identifier === navigationItemOrIdentifierOrIndex) {
+                    navigationItem = this._navigationItems[i];
+                    break;
+                }
+            }
+        }
+
+        return navigationItem;
+    },
+
+    _mouseDown: function(event)
+    {
+        // Only handle left mouse clicks.
+        if (event.button !== 0)
+            return;
+
+        // Remove the tabIndex so clicking the navigation bar does not give it focus.
+        // Only keep the tabIndex if already focused from keyboard navigation. This matches Xcode.
+        if (!this._focused)
+            this._element.removeAttribute("tabindex");
+
+        var itemElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.RadioButtonNavigationItem.StyleClassName);
+        if (!itemElement || !itemElement.navigationItem)
+            return;
+
+        this._previousSelectedNavigationItem = this.selectedNavigationItem;
+        this.selectedNavigationItem = itemElement.navigationItem;
+
+        this._mouseIsDown = true;
+
+        this._mouseMovedEventListener = this._mouseMoved.bind(this);
+        this._mouseUpEventListener = this._mouseUp.bind(this);
+
+        // Register these listeners on the document so we can track the mouse if it leaves the resizer.
+        document.addEventListener("mousemove", this._mouseMovedEventListener, false);
+        document.addEventListener("mouseup", this._mouseUpEventListener, false);
+
+        event.preventDefault();
+        event.stopPropagation();
+    },
+
+    _mouseMoved: function(event)
+    {
+        console.assert(event.button === 0);
+        console.assert(this._mouseIsDown);
+        if (!this._mouseIsDown)
+            return;
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        var itemElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.RadioButtonNavigationItem.StyleClassName);
+        if (!itemElement || !itemElement.navigationItem) {
+            // Find the element that is at the X position of the mouse, even when the mouse is no longer
+            // vertically in the navigation bar.
+            var element = document.elementFromPoint(event.pageX, this._element.totalOffsetTop);
+            if (!element)
+                return;
+
+            itemElement = element.enclosingNodeOrSelfWithClass(WebInspector.RadioButtonNavigationItem.StyleClassName);
+            if (!itemElement || !itemElement.navigationItem)
+                return;
+        }
+
+        if (this.selectedNavigationItem)
+            this.selectedNavigationItem.active = false;
+
+        this.selectedNavigationItem = itemElement.navigationItem;
+
+        this.selectedNavigationItem.active = true;
+    },
+
+    _mouseUp: function(event)
+    {
+        console.assert(event.button === 0);
+        console.assert(this._mouseIsDown);
+        if (!this._mouseIsDown)
+            return;
+
+        if (this.selectedNavigationItem)
+            this.selectedNavigationItem.active = false;
+
+        this._mouseIsDown = false;
+
+        document.removeEventListener("mousemove", this._mouseMovedEventListener, false);
+        document.removeEventListener("mouseup", this._mouseUpEventListener, false);
+
+        delete this._mouseMovedEventListener;
+        delete this._mouseUpEventListener;
+
+        // Restore the tabIndex so the navigation bar can be in the keyboard tab loop.
+        this._element.tabIndex = 0;
+
+        // Dispatch the selected event here since the selectedNavigationItem setter surpresses it
+        // while the mouse is down to prevent sending it while scrubbing the bar.
+        if (this._previousSelectedNavigationItem !== this.selectedNavigationItem)
+            this.dispatchEventToListeners(WebInspector.NavigationBar.Event.NavigationItemSelected);
+
+        delete this._previousSelectedNavigationItem;
+
+        event.preventDefault();
+        event.stopPropagation();
+    },
+
+    _keyDown: function(event)
+    {
+        if (!this._focused)
+            return;
+
+        if (event.keyIdentifier !== "Left" && event.keyIdentifier !== "Right")
+            return;
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        var selectedNavigationItemIndex = this._navigationItems.indexOf(this._selectedNavigationItem);
+
+        if (event.keyIdentifier === "Left") {
+            if (selectedNavigationItemIndex === -1)
+                selectedNavigationItemIndex = this._navigationItems.length;
+
+            do {
+                selectedNavigationItemIndex = Math.max(0, selectedNavigationItemIndex - 1);
+            } while (selectedNavigationItemIndex && !(this._navigationItems[selectedNavigationItemIndex] instanceof WebInspector.RadioButtonNavigationItem));
+        } else if (event.keyIdentifier === "Right") {
+            do {
+                selectedNavigationItemIndex = Math.min(selectedNavigationItemIndex + 1, this._navigationItems.length - 1);
+            } while (selectedNavigationItemIndex < this._navigationItems.length - 1 && !(this._navigationItems[selectedNavigationItemIndex] instanceof WebInspector.RadioButtonNavigationItem));
+        }
+
+        if (!(this._navigationItems[selectedNavigationItemIndex] instanceof WebInspector.RadioButtonNavigationItem))
+            return;
+
+        this.selectedNavigationItem = this._navigationItems[selectedNavigationItemIndex];
+    },
+
+    _focus: function(event)
+    {
+        this._focused = true;
+    },
+
+    _blur: function(event)
+    {
+        this._focused = false;
+    },
+
+    _updateStyle: function()
+    {
+        this._needsStyleUpdated = false;
+
+        var parentSelector = "." + (this.constructor.StyleClassName || WebInspector.NavigationBar.StyleClassName);
+
+        var styleText = "";
+        for (var i = 0; i < this._navigationItems.length; ++i) {
+            if (!this._navigationItems[i].generateStyleText)
+                continue;
+            if (styleText)
+                styleText += "\n";
+            styleText += this._navigationItems[i].generateStyleText(parentSelector);
+        }
+
+        this._styleElement.textContent = styleText;
+    },
+
+    _calculateMinimumWidth: function()
+    {
+        var wasCollapsed = this._element.classList.contains(WebInspector.NavigationBar.CollapsedStyleClassName)
+
+        // Add the collapsed style class to calculate the width of the items when they are collapsed.
+        if (!wasCollapsed)
+            this._element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
+
+        var totalItemWidth = 0;
+        for (var i = 0; i < this._navigationItems.length; ++i) {
+            // Skip flexible space items since they can take up no space at the minimum width.
+            if (this._navigationItems[i] instanceof WebInspector.FlexibleSpaceNavigationItem)
+                continue;
+            totalItemWidth += this._navigationItems[i].element.offsetWidth;
+        }
+
+        // Remove the collapsed style class if we were not collapsed before.
+        if (!wasCollapsed)
+            this._element.classList.remove(WebInspector.NavigationBar.CollapsedStyleClassName);
+
+        return totalItemWidth;
+    }
+};
+
+WebInspector.NavigationBar.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/NavigationItem.js b/Source/WebInspectorUI/UserInterface/NavigationItem.js
new file mode 100644
index 000000000..fef3e3a3f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/NavigationItem.js
@@ -0,0 +1,103 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NavigationItem = function(identifier, role, label) {
+    WebInspector.Object.call(this);
+
+    this._identifier = identifier || null;
+
+    this._element = document.createElement("div");
+    
+    if (role) 
+        this._element.setAttribute("role", role);
+    if (label)
+        this._element.setAttribute("aria-label", label);
+
+    var classNames = this._classNames;
+    for (var i = 0; i < classNames.length; ++i)
+        this._element.classList.add(classNames[i]);
+
+    this._element.navigationItem = this;
+};
+
+WebInspector.NavigationItem.StyleClassName = "item";
+WebInspector.NavigationItem.HiddenStyleClassName = "hidden";
+
+
+WebInspector.NavigationItem.prototype = {
+    constructor: WebInspector.NavigationItem,
+
+    // Public
+
+    get identifier()
+    {
+        return this._identifier;
+    },
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get parentNavigationBar()
+    {
+        return this._parentNavigationBar;
+    },
+
+    updateLayout: function(expandOnly)
+    {
+        // Implemented by subclasses.
+    },
+
+    get hidden()
+    {
+        return this._element.classList.contains(WebInspector.NavigationItem.HiddenStyleClassName);
+    },
+
+    set hidden(flag)
+    {
+        if (flag)
+            this._element.classList.add(WebInspector.NavigationItem.HiddenStyleClassName);
+        else
+            this._element.classList.remove(WebInspector.NavigationItem.HiddenStyleClassName);
+
+        if (this._parentNavigationBar)
+            this._parentNavigationBar.updateLayoutSoon();
+    },
+
+    // Private
+
+    get _classNames()
+    {
+        var classNames = [WebInspector.NavigationItem.StyleClassName];
+        if (this._identifier)
+            classNames.push(this._identifier);
+        if (this._additionalClassNames instanceof Array)
+            classNames = classNames.concat(this._additionalClassNames);
+        return classNames;
+    }
+}
+
+WebInspector.NavigationItem.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.css b/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.css
new file mode 100644
index 000000000..e4efbe9d5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.css
@@ -0,0 +1,352 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.navigation > .content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 21px;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.sidebar > .panel.navigation > .filter-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.sidebar > .panel.navigation > .overflow-shadow {
+    position: absolute;
+    bottom: 21px;
+    left: 0;
+    right: 0;
+    height: 5px;
+
+    pointer-events: none;
+
+    background-image: -webkit-radial-gradient(center, ellipse closest-side, rgba(0, 0, 0, 0.2) 25%, transparent),
+        -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0125), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.0125));
+    background-size: 125% 15px, 100% 1px;
+    background-position: top center, bottom center;
+    background-repeat: no-repeat;
+
+    opacity: 0;
+}
+
+.sidebar > .panel.navigation > .overflow-shadow.top {
+    top: 21px;
+    bottom: initial;
+    background-position: bottom center, top center;
+}
+
+.sidebar > .panel.navigation > .empty-content-placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 21px;
+
+    display: -webkit-flex;
+
+    -webkit-justify-content: center;
+    -webkit-align-items: center;
+}
+
+.sidebar > .panel.navigation > .empty-content-placeholder > .message {
+    display: inline-block;
+    white-space: nowrap;
+
+    font-family: "Lucida Grande", sans-serif;
+    font-size: 13px;
+
+    color: white;
+    background-color: rgba(0, 0, 0, 0.15);
+    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
+    box-shadow: inset rgba(0, 0, 0, 0.2) 0 1px 0, rgba(255, 255, 255, 0.4) 0 1px 0;
+
+    border-radius: 6px;
+    padding: 5px 15px 6px;
+}
+
+.navigation-sidebar-panel-content-tree-outline,
+.navigation-sidebar-panel-content-tree-outline .children {
+    position: relative;
+
+    padding: 0;
+    margin: 0;
+
+    outline: none;
+
+    list-style: none;
+
+    font-family: "Lucida Grande", "Helvetica", sans-serif;
+    font-size: 11px;
+}
+
+.navigation-sidebar-panel-content-tree-outline .children {
+    display: none;
+}
+
+.navigation-sidebar-panel-content-tree-outline .children.expanded {
+    display: block;
+}
+
+.navigation-sidebar-panel-content-tree-outline .item {
+    position: relative;
+
+    height: 36px;
+    line-height: 34px;
+
+ /* The item depth padding style rules are generated by NavigationSidebarPanel.js.
+    Any changes to this padding needs to be changed there too. */
+
+    padding: 0 5px;
+
+    border-top: 1px solid transparent;
+
+    white-space: nowrap;
+}
+
+.navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons > .children {
+    display: none;
+}
+
+.navigation-sidebar-panel-content-tree-outline > .children.hide-disclosure-buttons > .children {
+    display: none;
+}
+
+.navigation-sidebar-panel-content-tree-outline:not(.hide-disclosure-buttons) .item:not(.parent) .icon {
+    margin-left: 16px;
+}
+
+.navigation-sidebar-panel-content-tree-outline .item .disclosure-button {
+    display: none;
+
+    float: left;
+
+    width: 16px;
+    height: 100%;
+
+    border: 0;
+
+    background-color: transparent;
+    background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-closed-normal);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 13px 13px;
+
+    -webkit-appearance: none;
+}
+
+.navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons .item .disclosure-button {
+    display: none;
+}
+
+.navigation-sidebar-panel-content-tree-outline .item.parent .disclosure-button {
+    display: block;
+}
+
+.navigation-sidebar-panel-content-tree-outline .item.selected .disclosure-button {
+    background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-closed-selected) !important;
+}
+
+.navigation-sidebar-panel-content-tree-outline .item.expanded .disclosure-button {
+    background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-open-normal);
+}
+
+.navigation-sidebar-panel-content-tree-outline .item.selected.expanded .disclosure-button {
+    background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-open-selected) !important;
+}
+
+.navigation-sidebar-panel-content-tree-outline .item .icon {
+    float: left;
+
+    width: 32px;
+    height: 32px;
+
+    margin-top: 1px;
+    margin-right: 3px;
+}
+
+.navigation-sidebar-panel-content-tree-outline .item .status {
+    float: right;
+
+    height: 16px;
+
+    margin-top: 9px;
+    margin-left: 4px;
+
+    line-height: 1em;
+}
+
+.navigation-sidebar-panel-content-tree-outline .item .status:empty {
+    display: none;
+}
+
+.navigation-sidebar-panel-content-tree-outline .item.selected {
+    color: white;
+
+    border-top: 1px solid rgb(162, 177, 201);
+
+    background-image: -webkit-linear-gradient(top, rgb(175, 190, 213), rgb(130, 151, 182));
+    background-origin: padding;
+    background-clip: padding;
+}
+
+.navigation-sidebar-panel-content-tree-outline:focus .item.selected {
+    border-top: 1px solid rgb(148, 174, 193);
+    background-image: -webkit-linear-gradient(top, rgb(154, 180, 203), rgb(112, 139, 176));
+}
+
+body.window-inactive .navigation-sidebar-panel-content-tree-outline .item.selected {
+    border-top: 1px solid rgb(168, 168, 168);
+    background-image: -webkit-linear-gradient(top, rgb(194, 194, 194), rgb(158, 158, 158));
+}
+
+.navigation-sidebar-panel-content-tree-outline .item .titles {
+    position: relative;
+    top: 5px;
+
+    line-height: 11px;
+
+    padding-bottom: 1px;
+
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.navigation-sidebar-panel-content-tree-outline .item .highlighted {
+    background-color: rgba(235, 215, 38, 0.2);
+    border-bottom: 1px solid rgb(237, 202, 71);
+}
+
+.navigation-sidebar-panel-content-tree-outline .item .titles.no-subtitle {
+    top: 10px;
+}
+
+.navigation-sidebar-panel-content-tree-outline .item .title::after {
+    content: "\A"; /* Newline */
+    white-space: pre;
+}
+
+.navigation-sidebar-panel-content-tree-outline .item .subtitle {
+    font-size: 9px;
+    color: rgba(0, 0, 0, 0.7);
+}
+
+.navigation-sidebar-panel-content-tree-outline .item.selected .subtitle {
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.navigation-sidebar-panel-content-tree-outline .item .titles.no-subtitle .subtitle,
+.navigation-sidebar-panel-content-tree-outline .item .subtitle:empty {
+    display: none;
+}
+
+.navigation-sidebar-panel-content-tree-outline.small .item,
+.navigation-sidebar-panel-content-tree-outline .children.small .item,
+.navigation-sidebar-panel-content-tree-outline .item.small {
+    height: 20px;
+}
+
+.navigation-sidebar-panel-content-tree-outline.small.two-line .item,
+.navigation-sidebar-panel-content-tree-outline .children.small.two-line .item,
+.navigation-sidebar-panel-content-tree-outline .item.small.two-line {
+    height: 26px;
+}
+
+.navigation-sidebar-panel-content-tree-outline.small .item .icon,
+.navigation-sidebar-panel-content-tree-outline .children.small .item .icon,
+.navigation-sidebar-panel-content-tree-outline .item.small .icon {
+    width: 16px;
+    height: 16px;
+}
+
+.navigation-sidebar-panel-content-tree-outline.small .item .status,
+.navigation-sidebar-panel-content-tree-outline .children.small .item .status,
+.navigation-sidebar-panel-content-tree-outline .item.small .status {
+    margin-top: 1px;
+}
+
+.navigation-sidebar-panel-content-tree-outline.small .item .status .indeterminate-progress-spinner,
+.navigation-sidebar-panel-content-tree-outline .children.small .item .status .indeterminate-progress-spinner,
+.navigation-sidebar-panel-content-tree-outline .item.small .status .indeterminate-progress-spinner {
+    margin-top: 1px;
+    width: 14px;
+    height: 14px;
+}
+
+.navigation-sidebar-panel-content-tree-outline.small .item .titles,
+.navigation-sidebar-panel-content-tree-outline .children.small .item .titles,
+.navigation-sidebar-panel-content-tree-outline .item.small .titles {
+    top: 2px;
+    line-height: normal;
+}
+
+.navigation-sidebar-panel-content-tree-outline.small.two-line .item .status,
+.navigation-sidebar-panel-content-tree-outline .children.small.two-line .item .status,
+.navigation-sidebar-panel-content-tree-outline .item.small.two-line .status {
+    margin-top: 4px;
+}
+
+.navigation-sidebar-panel-content-tree-outline.small.two-line .item .titles,
+.navigation-sidebar-panel-content-tree-outline .children.small.two-line .item .titles,
+.navigation-sidebar-panel-content-tree-outline .item.small.two-line .titles {
+    top: 0;
+    line-height: 11px;
+}
+
+.navigation-sidebar-panel-content-tree-outline .item.small.two-line .titles.no-subtitle {
+    top: 6px;
+}
+
+.navigation-sidebar-panel-content-tree-outline.small .item .subtitle,
+.navigation-sidebar-panel-content-tree-outline .children.small .item .subtitle,
+.navigation-sidebar-panel-content-tree-outline .item.small .subtitle {
+    font-size: inherit;
+}
+
+.navigation-sidebar-panel-content-tree-outline.small.two-line .item .icon,
+.navigation-sidebar-panel-content-tree-outline .children.small.two-line .item .icon,
+.navigation-sidebar-panel-content-tree-outline .item.small.two-line .icon {
+    margin-top: 4px;
+}
+
+.navigation-sidebar-panel-content-tree-outline.small:not(.two-line) .item .title::after,
+.navigation-sidebar-panel-content-tree-outline .children.small:not(.two-line) .item .title::after,
+.navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .title::after {
+    content: "";
+}
+
+.navigation-sidebar-panel-content-tree-outline.small:not(.two-line) .item .subtitle::before,
+.navigation-sidebar-panel-content-tree-outline .children.small:not(.two-line) .item .subtitle::before,
+.navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .subtitle::before {
+    content: " — ";
+}
diff --git a/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js b/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js
new file mode 100644
index 000000000..498afc146
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js
@@ -0,0 +1,507 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NavigationSidebarPanel = function(identifier, displayName, image, keyboardShortcutKey, autoPruneOldTopLevelResourceTreeElements, autoHideToolbarItemWhenEmpty, wantsTopOverflowShadow, element, role, label) {
+    if (keyboardShortcutKey)
+        this._keyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, keyboardShortcutKey, this.toggle.bind(this));
+
+    if (this._keyboardShortcut) {
+        var showToolTip = WebInspector.UIString("Show the %s navigation sidebar (%s)").format(displayName, this._keyboardShortcut.displayName);
+        var hideToolTip = WebInspector.UIString("Hide the %s navigation sidebar (%s)").format(displayName, this._keyboardShortcut.displayName);
+    } else {
+        var showToolTip = WebInspector.UIString("Show the %s navigation sidebar").format(displayName);
+        var hideToolTip = WebInspector.UIString("Hide the %s navigation sidebar").format(displayName);
+    }
+
+    WebInspector.SidebarPanel.call(this, identifier, displayName, showToolTip, hideToolTip, image, element, role, label || displayName);
+
+    this.element.classList.add(WebInspector.NavigationSidebarPanel.StyleClassName);
+
+    this._autoHideToolbarItemWhenEmpty = autoHideToolbarItemWhenEmpty || false;
+
+    if (autoHideToolbarItemWhenEmpty)
+        this.toolbarItem.hidden = true;
+
+    this._contentElement = document.createElement("div");
+    this._contentElement.className = WebInspector.NavigationSidebarPanel.ContentElementStyleClassName;
+    this._contentElement.addEventListener("scroll", this._updateContentOverflowShadowVisibility.bind(this));
+    this.element.appendChild(this._contentElement);
+
+    this._contentTreeOutline = this.createContentTreeOutline(true);
+
+    this._filterBar = new WebInspector.FilterBar();
+    this._filterBar.addEventListener(WebInspector.FilterBar.Event.TextFilterDidChange, this._updateFilter, this);
+    this.element.appendChild(this._filterBar.element);
+
+    this._bottomOverflowShadowElement = document.createElement("div");
+    this._bottomOverflowShadowElement.className = WebInspector.NavigationSidebarPanel.OverflowShadowElementStyleClassName;
+    this.element.appendChild(this._bottomOverflowShadowElement);
+
+    if (wantsTopOverflowShadow) {
+        this._topOverflowShadowElement = document.createElement("div");
+        this._topOverflowShadowElement.classList.add(WebInspector.NavigationSidebarPanel.OverflowShadowElementStyleClassName);
+        this._topOverflowShadowElement.classList.add(WebInspector.NavigationSidebarPanel.TopOverflowShadowElementStyleClassName);
+        this.element.appendChild(this._topOverflowShadowElement);
+    }
+
+    window.addEventListener("resize", this._updateContentOverflowShadowVisibility.bind(this));
+
+    this._filtersSetting = new WebInspector.Setting(identifier + "-navigation-sidebar-filters", {});
+    this._filterBar.filters = this._filtersSetting.value;
+
+    this._emptyContentPlaceholderElement = document.createElement("div");
+    this._emptyContentPlaceholderElement.className = WebInspector.NavigationSidebarPanel.EmptyContentPlaceholderElementStyleClassName;
+
+    this._emptyContentPlaceholderMessageElement = document.createElement("div");
+    this._emptyContentPlaceholderMessageElement.className = WebInspector.NavigationSidebarPanel.EmptyContentPlaceholderMessageElementStyleClassName;
+    this._emptyContentPlaceholderElement.appendChild(this._emptyContentPlaceholderMessageElement);
+
+    this._generateStyleRulesIfNeeded();
+    this._generateDisclosureTrianglesIfNeeded();
+
+    if (autoPruneOldTopLevelResourceTreeElements) {
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._checkForOldResources, this);
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasRemoved, this._checkForOldResources, this);
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasRemoved, this._checkForOldResources, this);
+    }
+};
+
+WebInspector.NavigationSidebarPanel.StyleClassName = "navigation";
+WebInspector.NavigationSidebarPanel.OverflowShadowElementStyleClassName = "overflow-shadow";
+WebInspector.NavigationSidebarPanel.TopOverflowShadowElementStyleClassName = "top";
+WebInspector.NavigationSidebarPanel.ContentElementStyleClassName = "content";
+WebInspector.NavigationSidebarPanel.ContentElementHiddenStyleClassName = "hidden";
+WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName = "hidden";
+WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName = "navigation-sidebar-panel-content-tree-outline";
+WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName = "hide-disclosure-buttons";
+WebInspector.NavigationSidebarPanel.EmptyContentPlaceholderElementStyleClassName = "empty-content-placeholder";
+WebInspector.NavigationSidebarPanel.EmptyContentPlaceholderMessageElementStyleClassName = "message";
+WebInspector.NavigationSidebarPanel.DisclosureTriangleOpenCanvasIdentifier = "navigation-sidebar-panel-disclosure-triangle-open";
+WebInspector.NavigationSidebarPanel.DisclosureTriangleClosedCanvasIdentifier = "navigation-sidebar-panel-disclosure-triangle-closed";
+WebInspector.NavigationSidebarPanel.DisclosureTriangleNormalCanvasIdentifierSuffix = "-normal";
+WebInspector.NavigationSidebarPanel.DisclosureTriangleSelectedCanvasIdentifierSuffix = "-selected";
+
+WebInspector.NavigationSidebarPanel.prototype = {
+    constructor: WebInspector.NavigationSidebarPanel,
+
+    // Public
+
+    get contentElement()
+    {
+        return this._contentElement;
+    },
+
+    get contentTreeOutlineElement()
+    {
+        return this._contentTreeOutline.element;
+    },
+
+    get contentTreeOutline()
+    {
+        return this._contentTreeOutline;
+    },
+
+    set contentTreeOutline(newTreeOutline)
+    {
+        console.assert(newTreeOutline);
+        if (!newTreeOutline)
+            return;
+
+        if (this._contentTreeOutline)
+            this._contentTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName);
+
+        this._contentTreeOutline = newTreeOutline;
+        this._contentTreeOutline.element.classList.remove(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName);
+
+        this._updateFilter();
+    },
+
+    get contentTreeOutlineToAutoPrune()
+    {
+        return this._contentTreeOutline;
+    },
+
+    get filterBar()
+    {
+        return this._filterBar;
+    },
+
+    createContentTreeOutline: function(dontHideByDefault)
+    {
+        var contentTreeOutlineElement = document.createElement("ol");
+        contentTreeOutlineElement.className = WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName;
+        if (!dontHideByDefault)
+            contentTreeOutlineElement.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName);
+        this._contentElement.appendChild(contentTreeOutlineElement);
+
+        var contentTreeOutline = new TreeOutline(contentTreeOutlineElement);
+        contentTreeOutline.onadd = this._treeElementAddedOrChanged.bind(this);
+        contentTreeOutline.onchange = this._treeElementAddedOrChanged.bind(this);
+        contentTreeOutline.onexpand = this._treeElementExpandedOrCollapsed.bind(this);
+        contentTreeOutline.oncollapse = this._treeElementExpandedOrCollapsed.bind(this);
+        contentTreeOutline.allowsRepeatSelection = true;
+
+        return contentTreeOutline;
+    },
+
+    treeElementForRepresentedObject: function(representedObject)
+    {
+        return this._contentTreeOutline.getCachedTreeElement(representedObject);
+    },
+
+    cookieForContentView: function(contentView)
+    {
+        // Implemented by subclasses.
+        return null;
+    },
+
+    showContentViewForCookie: function(contentViewCookie)
+    {
+        // Implemented by subclasses.
+    },
+
+    showContentViewForCurrentSelection: function()
+    {
+        // Reselect the selected tree element to cause the content view to be shown as well. <rdar://problem/10854727>
+        var selectedTreeElement = this._contentTreeOutline.selectedTreeElement;
+        if (selectedTreeElement)
+            selectedTreeElement.select();
+    },
+
+    showEmptyContentPlaceholder: function(message, hideToolbarItem)
+    {
+        console.assert(message);
+
+        this._contentElement.classList.add(WebInspector.NavigationSidebarPanel.ContentElementHiddenStyleClassName);
+        this._emptyContentPlaceholderMessageElement.textContent = message;
+        this.element.appendChild(this._emptyContentPlaceholderElement);
+
+        this._hideToolbarItemWhenEmpty = hideToolbarItem || false;
+        this._updateToolbarItemVisibility();
+        this._updateContentOverflowShadowVisibility();
+    },
+
+    hideEmptyContentPlaceholder: function()
+    {
+        this._contentElement.classList.remove(WebInspector.NavigationSidebarPanel.ContentElementHiddenStyleClassName);
+        if (this._emptyContentPlaceholderElement.parentNode)
+            this._emptyContentPlaceholderElement.parentNode.removeChild(this._emptyContentPlaceholderElement);
+
+        this._hideToolbarItemWhenEmpty = false;
+        this._updateToolbarItemVisibility();
+        this._updateContentOverflowShadowVisibility();
+    },
+
+    updateEmptyContentPlaceholder: function(message)
+    {
+        this._updateToolbarItemVisibility();
+
+        if (!this._contentTreeOutline.children.length) {
+            // No tree elements, so no results.
+            this.showEmptyContentPlaceholder(message);
+        } else if (!this._emptyFilterResults) {
+            // There are tree elements, and not all of them are hidden by the filter.
+            this.hideEmptyContentPlaceholder();
+        }
+    },
+
+    applyFiltersToTreeElement: function(treeElement)
+    {
+        if (!this._filterBar.hasActiveFilters()) {
+            // No filters, so make everything visible.
+            treeElement.hidden = false;
+
+            // If this tree element was expanded during filtering, collapse it again.
+            if (treeElement.expanded && treeElement.__wasExpandedDuringFiltering) {
+                delete treeElement.__wasExpandedDuringFiltering;
+                treeElement.collapse();
+            }
+
+            return;
+        }
+
+        // Get the filterable data from the tree element.
+        var filterableData = treeElement.filterableData;
+        if (!filterableData)
+            return;
+
+        var self = this;
+        function matchTextFilter(input)
+        {
+            if (!self._textFilterRegex)
+                return true;
+
+            // Convert to a single item array if needed.
+            if (!(input instanceof Array))
+                input = [input];
+
+            // Loop over all the inputs and try to match them.
+            for (var i = 0; i < input.length; ++i) {
+                if (!input[i])
+                    continue;
+                if (self._textFilterRegex.test(input[i]))
+                    return true;
+            }
+
+            // No inputs matched.
+            return false;
+        }
+
+        function makeVisible()
+        {
+            // Make this element visible.
+            treeElement.hidden = false;
+
+            // Make the ancestors visible and expand them.
+            var currentAncestor = treeElement.parent;
+            while (currentAncestor && !currentAncestor.root) {
+                currentAncestor.hidden = false;
+
+                if (!currentAncestor.expanded) {
+                    currentAncestor.__wasExpandedDuringFiltering = true;
+                    currentAncestor.expand();
+                }
+
+                currentAncestor = currentAncestor.parent;
+            }
+        }
+
+        if (matchTextFilter(filterableData.text)) {
+            // Make this element visible since it matches.
+            makeVisible();
+            return;
+        }
+
+        // Make this element invisible since it does not match.
+        treeElement.hidden = true;
+    },
+
+    show: function()
+    {
+        if (!this.parentSidebar)
+            return;
+
+        WebInspector.SidebarPanel.prototype.show.call(this);
+
+        this.contentTreeOutlineElement.focus();
+    },
+
+    shown: function()
+    {
+        WebInspector.SidebarPanel.prototype.shown.call(this);
+
+        this._updateContentOverflowShadowVisibility();
+
+        // Force the navigation item to be visible. This makes sure it is
+        // always visible when the panel is shown.
+        this.toolbarItem.hidden = false;
+    },
+
+    hidden: function()
+    {
+        WebInspector.SidebarPanel.prototype.hidden.call(this);
+
+        this._updateToolbarItemVisibility();
+    },
+
+    // Private
+
+    _updateContentOverflowShadowVisibility: function()
+    {
+        var scrollHeight = this._contentElement.scrollHeight;
+        var offsetHeight = this._contentElement.offsetHeight;
+
+        if (scrollHeight < offsetHeight) {
+            if (this._topOverflowShadowElement)
+                this._topOverflowShadowElement.style.opacity = 0;
+            this._bottomOverflowShadowElement.style.opacity = 0;
+            return;
+        }
+
+        const edgeThreshold = 10;
+        var scrollTop = this._contentElement.scrollTop;
+
+        var topCoverage = Math.min(scrollTop, edgeThreshold);
+        var bottomCoverage = Math.max(0, (offsetHeight + scrollTop) - (scrollHeight - edgeThreshold))
+
+        if (this._topOverflowShadowElement)
+            this._topOverflowShadowElement.style.opacity = (topCoverage / edgeThreshold).toFixed(1);
+        this._bottomOverflowShadowElement.style.opacity = (1 - (bottomCoverage / edgeThreshold)).toFixed(1);
+    },
+
+    _updateToolbarItemVisibility: function()
+    {
+        // Hide the navigation item if requested or auto-hiding and we are not visible and we are empty.
+        var shouldHide = ((this._hideToolbarItemWhenEmpty || this._autoHideToolbarItemWhenEmpty) && !this.selected && !this._contentTreeOutline.children.length);
+        this.toolbarItem.hidden = shouldHide;
+    },
+
+    _checkForEmptyFilterResults: function()
+    {
+        // No tree elements, so don't touch the empty content placeholder.
+        if (!this._contentTreeOutline.children.length)
+            return;
+
+        // Iterate over all the top level tree elements. If any are visible, return early.
+        var currentTreeElement = this._contentTreeOutline.children[0];
+        while (currentTreeElement) {
+            if (!currentTreeElement.hidden) {
+                // Not hidden, so hide any empty content message.
+                this.hideEmptyContentPlaceholder();
+                this._emptyFilterResults = false;
+                return;
+            }
+
+            currentTreeElement = currentTreeElement.nextSibling;
+        }
+
+        // All top level tree elements are hidden, so filtering hid everything. Show a message.
+        this.showEmptyContentPlaceholder(WebInspector.UIString("No Filter Results"));
+        this._emptyFilterResults = true;
+    },
+
+    _updateFilter: function()
+    {
+        var filters = this._filterBar.filters;
+        this._textFilterRegex = simpleGlobStringToRegExp(filters.text, "i");
+        this._filtersSetting.value = filters;
+
+        // Update the whole tree.
+        var currentTreeElement = this._contentTreeOutline.children[0];
+        while (currentTreeElement && !currentTreeElement.root) {
+            this.applyFiltersToTreeElement(currentTreeElement);
+            currentTreeElement = currentTreeElement.traverseNextTreeElement(false, null, false);
+        }
+
+        this._checkForEmptyFilterResults();
+        this._updateContentOverflowShadowVisibility();
+    },
+
+    _treeElementAddedOrChanged: function(treeElement)
+    {
+        // Apply the filters to the tree element and its descendants.
+        var currentTreeElement = treeElement;
+        while (currentTreeElement && !currentTreeElement.root) {
+            this.applyFiltersToTreeElement(currentTreeElement);
+            currentTreeElement = currentTreeElement.traverseNextTreeElement(false, treeElement, false);
+        }
+
+        this._checkForEmptyFilterResults();
+        this._updateContentOverflowShadowVisibility();
+    },
+
+    _treeElementExpandedOrCollapsed: function(treeElement)
+    {
+        this._updateContentOverflowShadowVisibility();
+    },
+
+    _generateStyleRulesIfNeeded: function()
+    {
+        if (WebInspector.NavigationSidebarPanel._styleElement)
+            return;
+
+        WebInspector.NavigationSidebarPanel._styleElement = document.createElement("style");
+
+        const maximumSidebarTreeDepth = 15;
+        const baseLeftPadding = 5; // Matches the padding in NavigationSidebarPanel.css for the item class. Keep in sync.
+        const depthPadding = 16;
+
+        var styleText = "";
+        var childrenSubstring = " > ";
+        for (var i = 1; i <= maximumSidebarTreeDepth; ++i) {
+            childrenSubstring += ".children > ";
+            styleText += "." + WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName + childrenSubstring + ".item { ";
+            styleText += "padding-left: " + (baseLeftPadding + (depthPadding * i)) + "px; }\n";
+        }
+
+        WebInspector.NavigationSidebarPanel._styleElement.textContent = styleText;
+
+        document.head.appendChild(WebInspector.NavigationSidebarPanel._styleElement);
+    },
+
+    _generateDisclosureTrianglesIfNeeded: function()
+    {
+        if (WebInspector.NavigationSidebarPanel._generatedDisclosureTriangles)
+            return;
+
+        // Set this early instead of in _generateDisclosureTriangle because we don't want multiple panels that are
+        // created at the same time to duplicate the work (even though it would be harmless.)
+        WebInspector.NavigationSidebarPanel._generatedDisclosureTriangles = true;
+
+        var specifications = {};
+        specifications[WebInspector.NavigationSidebarPanel.DisclosureTriangleNormalCanvasIdentifierSuffix] = {
+            fillColor: [112, 126, 139],
+            shadowColor: [255, 255, 255, 0.8],
+            shadowOffsetX: 0,
+            shadowOffsetY: 1,
+            shadowBlur: 0
+        };
+
+        specifications[WebInspector.NavigationSidebarPanel.DisclosureTriangleSelectedCanvasIdentifierSuffix] = {
+            fillColor: [255, 255, 255],
+            shadowColor: [61, 91, 110, 0.8],
+            shadowOffsetX: 0,
+            shadowOffsetY: 1,
+            shadowBlur: 2
+        };
+
+        generateColoredImagesForCSS("Images/DisclosureTriangleSmallOpen.pdf", specifications, 13, 13, WebInspector.NavigationSidebarPanel.DisclosureTriangleOpenCanvasIdentifier);
+        generateColoredImagesForCSS("Images/DisclosureTriangleSmallClosed.pdf", specifications, 13, 13, WebInspector.NavigationSidebarPanel.DisclosureTriangleClosedCanvasIdentifier);
+    },
+
+    _checkForOldResources: function(event)
+    {
+        if (this._checkForOldResourcesTimeoutIdentifier)
+            return;
+
+        function delayedWork()
+        {
+            delete this._checkForOldResourcesTimeoutIdentifier;
+
+            var contentTreeOutline = this.contentTreeOutlineToAutoPrune;
+
+            // Check all the ResourceTreeElements at the top level to make sure their Resource still has a parentFrame in the frame hierarchy.
+            // If the parentFrame is no longer in the frame hierarchy we know it was removed due to a navigation or some other page change and
+            // we should remove the issues for that resource.
+            for (var i = contentTreeOutline.children.length - 1; i >= 0; --i) {
+                var treeElement = contentTreeOutline.children[i];
+                if (!(treeElement instanceof WebInspector.ResourceTreeElement))
+                    continue;
+
+                var resource = treeElement.resource;
+                if (!resource.parentFrame || resource.parentFrame.isDetached())
+                    contentTreeOutline.removeChildAtIndex(i, true, true);
+            }
+
+            if (typeof this._updateEmptyContentPlaceholder === "function")
+                this._updateEmptyContentPlaceholder();
+        }
+
+        // Check on a delay to coalesce multiple calls to _checkForOldResources.
+        this._checkForOldResourcesTimeoutIdentifier = setTimeout(delayedWork.bind(this), 0);
+    }
+};
+
+WebInspector.NavigationSidebarPanel.prototype.__proto__ = WebInspector.SidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/NetworkDataGrid.css b/Source/WebInspectorUI/UserInterface/NetworkDataGrid.css
new file mode 100644
index 000000000..8c62271eb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/NetworkDataGrid.css
@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.network-timeline-decorations {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0; /* Changed by JavaScript */
+    right: 0;
+}
+
+.network-timeline-decorations > .header {
+    border-top: 0;
+}
+
+.network-timeline-decorations > .header > .divider:first-child,
+.network-timeline-decorations > .header > .divider:last-child,
+.network-timeline-decorations > .header > .divider {
+    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.2), transparent 85%);
+}
+
+.network-timeline-decorations:not(.sort-active) > .header > .divider:last-child {
+    background-image: none;
+}
+
+.network-timeline-decorations > .header > .divider > .label {
+    top: 6px;
+}
+
+.network-timeline-decorations > .event-markers > .event-marker {
+    z-index: 100; /* Display under the timeline pills. */
+}
+
+.network-datagrid tr > td.timeline-column {
+    position: relative;
+    z-index: 200; /* Display timeline pills over event-markers. */
+}
+
+.network-timeline-decorations > .event-markers > .event-marker-tooltip {
+    z-index: 300; /* Display the tooltip div over everything so tooltips work. */
+}
diff --git a/Source/WebInspectorUI/UserInterface/NetworkDataGrid.js b/Source/WebInspectorUI/UserInterface/NetworkDataGrid.js
new file mode 100644
index 000000000..65e168dd5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/NetworkDataGrid.js
@@ -0,0 +1,217 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NetworkDataGrid = function(columns)
+{
+    WebInspector.TimelineDataGrid.call(this, columns);
+    this.element.classList.add(WebInspector.NetworkDataGrid.NetworkDataGridStyleClassName);
+
+    this.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._dataGridSortChanged, this);
+    this.addEventListener(WebInspector.DataGrid.Event.DidLayout, this._dataGridDidLayout, this);
+
+    this._timelineDecorations = new WebInspector.TimelineDecorations;
+    this._timelineDecorations.element.classList.add(WebInspector.NetworkDataGrid.NetworkTimelineDecorationsStyleClassName);
+    this._timelineDecorations.hideHeaderDividers();
+    this.element.appendChild(this._timelineDecorations.element);
+
+    // Network calculators all deal with WebInspector.Resources.
+    this._timeCalculator = new WebInspector.NetworkTransferTimeCalculator;
+
+    this._detailsColumnGroupCollapsedSetting = new WebInspector.Setting("network-data-grid-" + WebInspector.NetworkDataGrid.DetailsColumnGroup + "-collapsed", false);
+    if (this._detailsColumnGroupCollapsedSetting.value)
+        this.collapseColumnGroup(WebInspector.NetworkDataGrid.DetailsColumnGroup);
+}
+
+WebInspector.NetworkDataGrid.NetworkDataGridStyleClassName = "network-datagrid";
+WebInspector.NetworkDataGrid.NetworkTimelineDecorationsStyleClassName = "network-timeline-decorations";
+WebInspector.NetworkDataGrid.NetworkTimelineCollapsedColumnsStyleClassName = "collapsed-details";
+
+WebInspector.NetworkDataGrid.DetailsColumnGroup = "details";
+
+WebInspector.NetworkDataGrid.prototype = {
+    constructor: WebInspector.NetworkDataGrid,
+
+    // Public
+
+    get currentCalculator()
+    {
+        return this._timeCalculator;
+    },
+
+    updateCalculatorBoundariesWithRecord: function(record)
+    {
+        return this.currentCalculator.updateBoundaries(record.resource);
+    },
+
+    updateCalculatorBoundariesWithDataGridNode: function(node)
+    {
+        return this.currentCalculator.updateBoundaries(node.record.resource);
+    },
+
+    updateCalculatorBoundariesWithEventMarker: function(eventMarker)
+    {
+        return this.currentCalculator.updateBoundariesForEventMarker(eventMarker);
+    },
+
+    reset: function()
+    {
+        WebInspector.TimelineDataGrid.prototype.reset.call(this);
+
+        this.currentCalculator.reset();
+
+        this._timelineDecorations.clear();
+        this._updateDecorations();
+    },
+
+    update: function()
+    {
+        this._updateDecorations();
+    },
+
+    // Protected
+
+    willToggleColumnGroup: function(columnGroup, willCollapse)
+    {
+        console.assert(columnGroup === "details");
+
+        if (willCollapse) {
+            console.assert(!this._savedExpandedNetworkColumnWidths);
+            this._savedExpandedNetworkColumnWidths = this.columnWidthsMap();
+        }
+    },
+
+    didToggleColumnGroup: function(columnGroup, didCollapse)
+    {
+        console.assert(columnGroup === "details");
+        console.assert(this._savedExpandedNetworkColumnWidths);
+
+        if (didCollapse) {
+            var newWidths = {};
+            newWidths.name = this._savedExpandedNetworkColumnWidths.name;
+            newWidths.timeline = (100 - newWidths.name);
+
+            this.element.classList.add(WebInspector.NetworkDataGrid.NetworkTimelineCollapsedColumnsStyleClassName);
+            this._timelineDecorations.showHeaderDividers();
+        } else {
+            var newWidths = this._savedExpandedNetworkColumnWidths;
+            delete this._savedExpandedNetworkColumnWidths;
+
+            this.element.classList.remove(WebInspector.NetworkDataGrid.NetworkTimelineCollapsedColumnsStyleClassName);
+            this._timelineDecorations.hideHeaderDividers();
+        }
+
+        this.applyColumnWidthsMap(newWidths);
+
+        this._detailsColumnGroupCollapsedSetting.value = didCollapse;
+    },
+
+    addTimelineEventMarker: function(eventMarker)
+    {
+        this._timelineDecorations.addTimelineEventMarker(eventMarker);
+    },
+
+    // Private
+
+    _dataGridSortChanged: function()
+    {
+        this._updateDecorations(true);
+    },
+
+    _dataGridDidLayout: function()
+    {
+        if (this.selectedNode)
+            this.selectedNode.updateLayout();
+
+        this._updateDecorations();
+    },
+
+    _localizedTimelineHeaderWidth: function()
+    {
+        if (WebInspector.NetworkDataGrid._localizedTimelineWidth !== undefined)
+            return WebInspector.NetworkDataGrid._localizedTimelineWidth;
+
+        var div = document.createElement("div");
+        div.style.position = "absolute";
+        div.style.top = 0;
+        div.style.left = 0;
+        div.style.fontSize = "11px";
+        div.style.fontFamily = "\"Lucida Grande\", sans-serif";
+        div.style.visibility = "hidden";
+        div.textContent = WebInspector.UIString("Timeline");
+
+        document.body.appendChild(div);
+        WebInspector.NetworkDataGrid._localizedTimelineWidth = div.offsetWidth + 20 /* padding */;
+        document.body.removeChild(div);
+
+        return WebInspector.NetworkDataGrid._localizedTimelineWidth;
+    },
+
+    _updateDecorations: function(force)
+    {
+        this._updateDecorationsPosition();
+        this._updateHeaderTimes(force);
+        this._updateEventMarkers();
+    },
+
+    _updateDecorationsPosition: function()
+    {
+        var lastVisibleResizer = null;
+        for (var i = this.resizers.length - 1; i >= 0; --i) {
+            if (this.resizers[i].style.display !== "none") {
+                lastVisibleResizer = this.resizers[i];
+                break;
+            }
+        }
+
+        if (!lastVisibleResizer)
+            return;
+
+        this._timelineDecorations.element.style.left = lastVisibleResizer.style.left;
+    },
+
+    _updateHeaderTimes: function(force)
+    {
+        var calculator = this.currentCalculator;
+        var boundarySpan = calculator.boundarySpan;
+        var isTimelineColumnSorted = this.isColumnSortColumn("timeline");
+
+        if (isTimelineColumnSorted)
+            this._timelineDecorations.element.classList.add("sort-active");
+        else
+            this._timelineDecorations.element.classList.remove("sort-active");
+
+        var leftPadding = this._localizedTimelineHeaderWidth();
+        var rightPadding = isTimelineColumnSorted ? 50 /* Collapse Button and Sort Indicator */ : 27 /* Collapse Button */;
+        this._timelineDecorations.updateHeaderTimes(boundarySpan, leftPadding, rightPadding, force);
+    },
+
+    _updateEventMarkers: function()
+    {
+        var calculator = this.currentCalculator;
+        this._timelineDecorations.updateEventMarkers(calculator.minimumBoundary, calculator.maximumBoundary);
+    },
+}
+
+WebInspector.NetworkDataGrid.prototype.__proto__ = WebInspector.TimelineDataGrid.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/NetworkGraphCalculator.js b/Source/WebInspectorUI/UserInterface/NetworkGraphCalculator.js
new file mode 100644
index 000000000..f66bc37ef
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/NetworkGraphCalculator.js
@@ -0,0 +1,230 @@
+/*
+ * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
+ * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
+ * Copyright (C) 2011 Google Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NetworkTimeCalculator = function(startAtZero)
+{
+    this.startAtZero = startAtZero;
+    this.reset();
+}
+
+WebInspector.NetworkTimeCalculator.prototype = {
+    get boundarySpan()
+    {
+        return this.maximumBoundary - this.minimumBoundary;
+    },
+
+    reset: function()
+    {
+        this.minimumBoundary = NaN;
+        this.maximumBoundary = NaN;
+    },
+
+    computeBarGraphPercentages: function(resource)
+    {
+        if (!isNaN(resource.requestSentTimestamp))
+            var start = ((resource.requestSentTimestamp - this.minimumBoundary) / this.boundarySpan) * 100;
+        else
+            var start = 0;
+
+        if (!isNaN(resource.responseReceivedTimestamp))
+            var middle = ((resource.responseReceivedTimestamp - this.minimumBoundary) / this.boundarySpan) * 100;
+        else if (!isNaN(resource.lastTimestamp))
+            var middle = ((resource.lastTimestamp - this.minimumBoundary) / this.boundarySpan) * 100;
+        else
+            var middle = (this.startAtZero ? start : 100);
+
+        if (!isNaN(resource.lastTimestamp))
+            var end = ((resource.lastTimestamp - this.minimumBoundary) / this.boundarySpan) * 100;
+        else
+            var end = (this.startAtZero ? middle : 100);
+
+        if (this.startAtZero) {
+            end -= start;
+            middle -= start;
+            start = 0;
+        }
+
+        return {start: start, middle: middle, end: end};
+    },
+
+    computeBarGraphLabels: function(resource)
+    {
+        var rightLabel = "";
+        if (!isNaN(resource.responseReceivedTimestamp) && !isNaN(resource.lastTimestamp))
+            rightLabel = this.formatValue(resource.lastTimestamp - resource.responseReceivedTimestamp);
+
+        var hasLatency = resource.latency > 0;
+        if (hasLatency)
+            var leftLabel = this.formatValue(resource.latency);
+        else
+            var leftLabel = rightLabel;
+
+        if (hasLatency && rightLabel) {
+            var total = this.formatValue(resource.duration);
+            var tooltip = WebInspector.UIString("%s latency, %s download (%s total)").format(leftLabel, rightLabel, total);
+        } else if (hasLatency)
+            var tooltip = WebInspector.UIString("%s latency").format(leftLabel);
+        else if (rightLabel)
+            var tooltip = WebInspector.UIString("%s download").format(rightLabel);
+
+        if (resource.cached)
+            tooltip = WebInspector.UIString("%s (from cache)").format(tooltip);
+        return {left: leftLabel, right: rightLabel, tooltip: tooltip};
+    },
+
+    updateBoundaries: function(resource)
+    {
+        var didChange = false;
+
+        if (this.startAtZero)
+            var lowerBound = 0;
+        else
+            var lowerBound = this._lowerBound(resource);
+
+        if (!isNaN(lowerBound) && (isNaN(this.minimumBoundary) || lowerBound < this.minimumBoundary)) {
+            this.minimumBoundary = lowerBound;
+            didChange = true;
+        }
+
+        var upperBound = this._upperBound(resource);
+        if (!isNaN(upperBound) && (isNaN(this.maximumBoundary) || upperBound > this.maximumBoundary)) {
+            this.maximumBoundary = upperBound;
+            didChange = true;
+        }
+
+        return didChange;
+    },
+
+    updateBoundariesForEventMarker: function(eventMarker)
+    {
+        var didChange = false;
+        var timestamp = eventMarker.timestamp;
+
+        if (!this.startAtZero) {
+            if (isNaN(this.minimumBoundary) || timestamp < this.minimumBoundary) {
+                this.minimumBoundary = timestamp;
+                didChange = true;
+            }
+        }
+
+        // Don't extend the bounds if the timestamp is more than 10% past the current maximum boundary. This prevents dead space.
+        const allowedPercentPastEndForTimestamp = 0.10;
+        // If the timestamp is within 3% of the maximum boundary, extend the boundary anyways to give room for the marker.
+        const allowedPercentNearEndForTimestampToExtendEnd = 0.03;
+        // If the timestamp will cause a new maximum boundary, give 3% extra padding, to ensure we show the marker.
+        const extendPercentPastEnd = 0.03;
+
+        if (isNaN(this.maximumBoundary))
+            this.maximumBoundary = timestamp;
+        else {
+            var boundary = this.maximumBoundary - this.minimumBoundary;
+            console.assert(!isNaN(boundary));
+
+            if (timestamp > this.maximumBoundary) {
+                var percentPastEnd = (timestamp - this.maximumBoundary) / boundary;
+                if (!boundary || percentPastEnd < allowedPercentPastEndForTimestamp) {
+                    var newBoundary = timestamp - this.minimumBoundary;
+                    this.maximumBoundary = timestamp + (newBoundary * extendPercentPastEnd);
+                    didChange = true;
+                }
+            } else {
+                var percentNearEnd = (this.maximumBoundary - timestamp) / boundary;
+                if (percentNearEnd < allowedPercentNearEndForTimestampToExtendEnd) {
+                    this.maximumBoundary = this.maximumBoundary + (boundary * extendPercentPastEnd);
+                    didChange = true;
+                }
+            }
+        }
+
+        return didChange;
+    },
+
+    formatValue: function(value)
+    {
+        return Number.secondsToString(value);
+    },
+
+    _lowerBound: function(resource)
+    {
+        // Implemented by subclasses if not startAtZero.
+        return 0;
+    },
+
+    _upperBound: function(resource)
+    {
+        // Implemented by subclasses.
+        return 0;
+    }
+}
+
+WebInspector.NetworkTimeCalculator.prototype.__proto__ = WebInspector.Object.prototype;
+
+
+/**
+ * @constructor
+ * @extends {WebInspector.NetworkTimeCalculator}
+ */
+WebInspector.NetworkTransferTimeCalculator = function()
+{
+    WebInspector.NetworkTimeCalculator.call(this, false);
+}
+
+WebInspector.NetworkTransferTimeCalculator.prototype = {
+    _lowerBound: function(resource)
+    {
+        return resource.firstTimestamp || NaN;
+    },
+
+    _upperBound: function(resource)
+    {
+        return resource.lastTimestamp || NaN;
+    }
+}
+
+WebInspector.NetworkTransferTimeCalculator.prototype.__proto__ = WebInspector.NetworkTimeCalculator.prototype;
+
+
+/**
+ * @constructor
+ * @extends {WebInspector.NetworkTimeCalculator}
+ */
+WebInspector.NetworkTransferDurationCalculator = function()
+{
+    WebInspector.NetworkTimeCalculator.call(this, true);
+}
+
+WebInspector.NetworkTransferDurationCalculator.prototype = {
+    _upperBound: function(resource)
+    {
+        return resource.duration || 0;
+    }
+}
+
+WebInspector.NetworkTransferDurationCalculator.prototype.__proto__ = WebInspector.NetworkTimeCalculator.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/NetworkObserver.js b/Source/WebInspectorUI/UserInterface/NetworkObserver.js
new file mode 100644
index 000000000..7cc0e4e0e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/NetworkObserver.js
@@ -0,0 +1,92 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NetworkObserver = function()
+{
+    WebInspector.Object.call(this);
+};
+
+WebInspector.NetworkObserver.prototype = {
+    constructor: WebInspector.NetworkObserver,
+
+    // Events defined by the "Network" domain (see WebCore/inspector/Inspector.json).
+
+    requestWillBeSent: function(requestId, frameId, loaderId, documentURL, request, timestamp, initiator, redirectResponse, type)
+    {
+        WebInspector.frameResourceManager.resourceRequestWillBeSent(requestId, frameId, loaderId, request, type, redirectResponse, timestamp);
+    },
+
+    requestServedFromCache: function(requestId)
+    {
+        WebInspector.frameResourceManager.markResourceRequestAsServedFromMemoryCache(requestId);
+    },
+
+    responseReceived: function(requestId, frameId, loaderId, timestamp, type, response)
+    {
+        WebInspector.frameResourceManager.resourceRequestDidReceiveResponse(requestId, frameId, loaderId, type, response, timestamp);
+    },
+
+    dataReceived: function(requestId, timestamp, dataLength, encodedDataLength)
+    {
+        WebInspector.frameResourceManager.resourceRequestDidReceiveData(requestId, dataLength, encodedDataLength, timestamp);
+    },
+
+    loadingFinished: function(requestId, timestamp, sourceMapURL)
+    {
+        WebInspector.frameResourceManager.resourceRequestDidFinishLoading(requestId, timestamp, sourceMapURL);
+    },
+
+    loadingFailed: function(requestId, timestamp, errorText, canceled)
+    {
+        WebInspector.frameResourceManager.resourceRequestDidFailLoading(requestId, canceled, timestamp);
+    },
+
+    requestServedFromMemoryCache: function(requestId, frameId, loaderId, documentURL, timestamp, initiator, resource)
+    {
+        WebInspector.frameResourceManager.resourceRequestWasServedFromMemoryCache(requestId, frameId, loaderId, resource, timestamp);
+    },
+
+    webSocketWillSendHandshakeRequest: function(requestId, timestamp, request)
+    {
+        // FIXME: Not implemented.
+    },
+
+    webSocketHandshakeResponseReceived: function(requestId, timestamp, response)
+    {
+        // FIXME: Not implemented.
+    },
+
+    webSocketCreated: function(requestId, url)
+    {
+        // FIXME: Not implemented.
+    },
+
+    webSocketClosed: function(requestId, timestamp)
+    {
+        // FIXME: Not implemented.
+    }
+};
+
+WebInspector.NetworkObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/NetworkTimeline.css b/Source/WebInspectorUI/UserInterface/NetworkTimeline.css
new file mode 100644
index 000000000..5aaad1d66
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/NetworkTimeline.css
@@ -0,0 +1,225 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.network-graph-side {
+    position: relative;
+    height: 14px;
+    padding: 0 5px;
+    white-space: nowrap;
+    margin-top: 1px;
+    border-top: 1px solid transparent;
+    overflow: hidden;
+}
+
+.network-graph-bar-area {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 8px;
+    left: 9px;
+}
+
+.network-graph-label {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto -7px;
+    height: 13px;
+    line-height: 13px;
+    font-size: 9px;
+    color: rgba(0, 0, 0, 0.75);
+    text-shadow: rgba(255, 255, 255, 0.25) 1px 0 0, rgba(255, 255, 255, 0.25) -1px 0 0, rgba(255, 255, 255, 0.333) 0 1px 0, rgba(255, 255, 255, 0.25) 0 -1px 0;
+    z-index: 150;
+    overflow: hidden;
+    text-align: center;
+    font-weight: bold;
+    opacity: 0;
+}
+
+.network-graph-side:hover .network-graph-label {
+    -webkit-transition: opacity 250ms ease-in-out;
+    opacity: 1;
+}
+
+.network-graph-label:empty {
+    display: none;
+}
+
+.network-graph-label.waiting {
+    margin-right: 5px;
+}
+
+.network-graph-label.before {
+    color: rgba(0, 0, 0, 0.7);
+    text-shadow: none;
+    text-align: right;
+    margin-right: 0px;
+}
+
+.network-graph-label.before::after {
+    display: inline-block;
+    margin-top: -2px;
+    padding-left: 2px;
+    vertical-align: 6px;
+    height: 5px;
+    width: 13px;
+    content: url(Images/NetworkBarLabelCalloutLeft.pdf);
+}
+
+.network-graph-label.after {
+    color: rgba(0, 0, 0, 0.7);
+    text-shadow: none;
+    text-align: left;
+    margin-left: -2px;
+}
+
+.network-graph-label.after::before {
+    display: inline-block;
+    margin-top: -2px;
+    padding-left: 2px;
+    vertical-align: 6px;
+    padding-right: 2px;
+    height: 5px;
+    width: 13px;
+    content: url(Images/NetworkBarLabelCalloutRight.pdf);
+}
+
+.network-graph-bar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto -6px;
+    height: 0;
+    min-width: 13px;
+    opacity: 0.65;
+
+    border-image-source: -webkit-image-set(url(Images/NetworkBarGray.png) 1x, url(Images/NetworkBarGray@2x.png) 2x);
+    border-image-slice: 6 6 7 6 fill;
+    border-width: 6px 6px 7px 6px;
+}
+
+.network-graph-bar.waiting {
+    opacity: 0.35;
+}
+
+/* Resource categories */
+
+.resource-cached .network-graph-bar {
+    border-image-source: -webkit-image-set(url(Images/NetworkHollowBarGray.png) 1x, url(Images/NetworkHollowBarGray@2x.png) 2x);
+}
+
+.network-resource-type-document .network-graph-bar {
+    border-image-source: -webkit-image-set(url(Images/NetworkBarBlue.png) 1x, url(Images/NetworkBarBlue@2x.png) 2x);
+}
+
+.network-resource-type-document.resource-cached .network-graph-bar {
+    border-image-source: -webkit-image-set(url(Images/NetworkHollowBarBlue.png) 1x, url(Images/NetworkHollowBarBlue@2x.png) 2x);
+}
+
+.network-resource-type-stylesheet .network-graph-bar {
+    border-image-source: -webkit-image-set(url(Images/NetworkBarGreen.png) 1x, url(Images/NetworkBarGreen@2x.png) 2x);
+}
+
+.network-resource-type-stylesheet.resource-cached .network-graph-bar {
+    border-image-source: -webkit-image-set(url(Images/NetworkHollowBarGreen.png) 1x, url(Images/NetworkHollowBarGreen@2x.png) 2x);
+}
+
+.network-resource-type-image .network-graph-bar {
+    border-image-source: -webkit-image-set(url(Images/NetworkBarPurple.png) 1x, url(Images/NetworkBarPurple@2x.png) 2x);
+}
+
+.network-resource-type-image.resource-cached .network-graph-bar {
+    border-image-source: -webkit-image-set(url(Images/NetworkHollowBarPurple.png) 1x, url(Images/NetworkHollowBarPurple@2x.png) 2x);
+}
+
+.network-resource-type-font .network-graph-bar {
+    border-image-source: -webkit-image-set(url(Images/NetworkBarRed.png) 1x, url(Images/NetworkBarRed@2x.png) 2x);
+}
+
+.network-resource-type-font.resource-cached .network-graph-bar {
+    border-image-source: -webkit-image-set(url(Images/NetworkHollowBarRed.png) 1x, url(Images/NetworkHollowBarRed@2x.png) 2x);
+}
+
+.network-resource-type-script .network-graph-bar {
+    border-image-source: -webkit-image-set(url(Images/NetworkBarOrange.png) 1x, url(Images/NetworkBarOrange@2x.png) 2x);
+}
+
+.network-resource-type-script.resource-cached .network-graph-bar {
+    border-image-source: -webkit-image-set(url(Images/NetworkHollowBarOrange.png) 1x, url(Images/NetworkHollowBarOrange@2x.png) 2x);
+}
+
+.network-resource-type-xhr .network-graph-bar {
+    border-image-source: -webkit-image-set(url(Images/NetworkBarYellow.png) 1x, url(Images/NetworkBarYellow@2x.png) 2x);
+}
+
+.network-resource-type-xhr.resource-cached .network-graph-bar {
+    border-image-source: -webkit-image-set(url(Images/NetworkHollowBarYellow.png) 1x, url(Images/NetworkHollowBarYellow@2x.png) 2x);
+}
+
+.network-resource-type-other .network-graph-bar {
+    border-image-source: -webkit-image-set(url(Images/NetworkBarGray.png) 1x, url(Images/NetworkBarGray@2x.png) 2x);
+}
+
+.network-resource-type-other.resource-cached .network-graph-bar {
+    border-image-source: -webkit-image-set(url(Images/NetworkHollowBarGray.png) 1x, url(Images/NetworkHollowBarGray@2x.png) 2x);
+}
+
+/* Network graph style for a selected and focused data grid row */
+
+.data-grid:focus tr.selected .network-graph-bar {
+    opacity: 1;
+    margin: auto -7px;
+
+    border-image-slice: 6 7 7 7 fill;
+    border-width: 6px 7px 7px 7px;
+    border-image-source: -webkit-image-set(url(Images/NetworkBarWhiteFlat.png) 1x, url(Images/NetworkBarWhiteFlat@2x.png) 2x);
+}
+
+.data-grid:focus tr.selected .resource-cached .network-graph-bar {
+    border-image-source: -webkit-image-set(url(Images/NetworkBarWhiteFlat.png) 1x, url(Images/NetworkBarWhiteFlat@2x.png) 2x);
+}
+
+.data-grid:focus tr.selected .network-graph-bar.waiting {
+    opacity: 0.65;
+}
+
+.data-grid:focus tr.selected .network-graph-label {
+    color: rgb(56, 121, 217);
+    text-shadow: none;
+    opacity: 1;
+}
+
+.data-grid:focus tr.selected .network-graph-label.before,
+.data-grid:focus tr.selected .network-graph-label.after {
+    color: white;
+}
+
+.data-grid:focus tr.selected .network-graph-label.before::after {
+    content: url(Images/NetworkBarLabelCalloutWhiteLeft.pdf);
+}
+
+.data-grid:focus tr.selected .network-graph-label.after::before {
+    content: url(Images/NetworkBarLabelCalloutWhiteRight.pdf);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Object.js b/Source/WebInspectorUI/UserInterface/Object.js
new file mode 100644
index 000000000..a68da9663
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Object.js
@@ -0,0 +1,235 @@
+/*
+ * Copyright (C) 2008, 2013 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ */
+WebInspector.Object = function() {
+}
+
+/**
+ * @param {function} constructor
+ */
+WebInspector.Object.addConstructorFunctions = function(subclassConstructor)
+{
+    // Copies the relevant functions the subclass constructor.
+    for (var property in WebInspector.Object) {
+        var value = WebInspector.Object[property];
+        if (typeof value !== "function")
+            continue;
+        if (value === arguments.callee)
+            continue;
+        subclassConstructor[property] = value;
+    }
+}
+
+/**
+ * @param {string} eventType
+ * @param {function(WebInspector.Event)} listener
+ * @param {Object=} thisObject
+ */
+WebInspector.Object.addEventListener = function(eventType, listener, thisObject)
+{
+    thisObject = thisObject || null;
+
+    console.assert(eventType);
+    if (!eventType)
+        return;
+
+    console.assert(listener);
+    if (!listener)
+        return;
+
+    if (!this._listeners)
+        this._listeners = {};
+
+    var listeners = this._listeners[eventType];
+    if (!listeners)
+        listeners = this._listeners[eventType] = [];
+
+    // Prevent registering multiple times.
+    for (var i = 0; i < listeners.length; ++i) {
+        if (listeners[i].listener === listener && listeners[i].thisObject === thisObject)
+            return;
+    }
+
+    listeners.push({thisObject: thisObject, listener: listener});
+};
+
+/**
+ * @param {string} eventType
+ * @param {function(WebInspector.Event)} listener
+ * @param {Object=} thisObject
+ */
+WebInspector.Object.removeEventListener = function(eventType, listener, thisObject)
+{
+    eventType = eventType || null;
+    listener = listener || null;
+    thisObject = thisObject || null;
+
+    if (!this._listeners)
+        return;
+
+    if (!eventType) {
+        for (eventType in this._listeners)
+            this.removeEventListener(eventType, listener, thisObject);
+        return;
+    }
+
+    var listeners = this._listeners[eventType];
+    if (!listeners)
+        return;
+
+    for (var i = listeners.length - 1; i >= 0; --i) {
+        if (listener && listeners[i].listener === listener && listeners[i].thisObject === thisObject)
+            listeners.splice(i, 1);
+        else if (!listener && thisObject && listeners[i].thisObject === thisObject)
+            listeners.splice(i, 1);
+    }
+
+    if (!listeners.length)
+        delete this._listeners[eventType];
+
+    if (!Object.keys(this._listeners).length)
+        delete this._listeners;
+};
+
+WebInspector.Object.removeAllListeners = function()
+{
+    delete this._listeners;
+};
+
+/**
+ * @param {string} eventType
+ * @return {boolean}
+ */
+WebInspector.Object.hasEventListeners = function(eventType)
+{
+    if (!this._listeners || !this._listeners[eventType])
+        return false;
+    return true;
+};
+
+WebInspector.Object.prototype = {
+    constructor: WebInspector.Object,
+
+    /**
+     * @param {string} eventType
+     * @param {function(WebInspector.Event)} listener
+     * @param {Object=} thisObject
+     */
+    addEventListener: WebInspector.Object.addEventListener,
+
+    /**
+     * @param {string} eventType
+     * @param {function(WebInspector.Event)} listener
+     * @param {Object=} thisObject
+     */
+    removeEventListener: WebInspector.Object.removeEventListener,
+
+    removeAllListeners: WebInspector.Object.removeAllListeners,
+
+    /**
+     * @param {string} eventType
+     * @return {boolean}
+     */
+    hasEventListeners: WebInspector.Object.hasEventListeners,
+
+    /**
+     * @param {string} eventType
+     * @param {*=} eventData
+     * @return {boolean}
+     */
+    dispatchEventToListeners: function(eventType, eventData)
+    {
+        var event = new WebInspector.Event(this, eventType, eventData);
+
+        function dispatch(object)
+        {
+            if (!object || !object._listeners || !object._listeners[eventType] || event._stoppedPropagation)
+                return;
+
+            // Make a copy with slice so mutations during the loop doesn't affect us.
+            var listenersForThisEvent = object._listeners[eventType].slice(0);
+
+            // Iterate over the listeners and call them. Stop if stopPropagation is called.
+            for (var i = 0; i < listenersForThisEvent.length; ++i) {
+                listenersForThisEvent[i].listener.call(listenersForThisEvent[i].thisObject, event);
+                if (event._stoppedPropagation)
+                    break;
+            }
+        }
+
+        // Dispatch to listeners of this specific object.
+        dispatch(this);
+
+        // Allow propagation again so listeners on the constructor always have a crack at the event.
+        event._stoppedPropagation = false;
+
+        // Dispatch to listeners on all constructors up the prototype chain, including the immediate constructor.
+        var constructor = this.constructor;
+        while (constructor) {
+            dispatch(constructor);
+
+            if (!constructor.prototype.__proto__)
+                break;
+
+            constructor = constructor.prototype.__proto__.constructor;
+        }
+
+        return event.defaultPrevented;
+    }
+}
+
+/**
+ * @constructor
+ * @param {WebInspector.Object} target
+ * @param {string} type
+ * @param {*=} data
+ */
+WebInspector.Event = function(target, type, data)
+{
+    this.target = target;
+    this.type = type;
+    this.data = data;
+    this.defaultPrevented = false;
+    this._stoppedPropagation = false;
+}
+
+WebInspector.Event.prototype = {
+    constructor: WebInspector.Event,
+
+    stopPropagation: function()
+    {
+        this._stoppedPropagation = true;
+    },
+
+    preventDefault: function()
+    {
+        this.defaultPrevented = true;
+    }
+}
+
+WebInspector.notifications = new WebInspector.Object;
diff --git a/Source/WebInspectorUI/UserInterface/ObjectPropertiesSection.js b/Source/WebInspectorUI/UserInterface/ObjectPropertiesSection.js
new file mode 100644
index 000000000..323380182
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ObjectPropertiesSection.js
@@ -0,0 +1,347 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ObjectPropertiesSection = function(object, title, subtitle, emptyPlaceholder, ignoreHasOwnProperty, extraProperties, treeElementConstructor)
+{
+    this.emptyPlaceholder = (emptyPlaceholder || WebInspector.UIString("No Properties"));
+    this.object = object;
+    this.ignoreHasOwnProperty = ignoreHasOwnProperty;
+    this.extraProperties = extraProperties;
+    this.treeElementConstructor = treeElementConstructor || WebInspector.ObjectPropertyTreeElement;
+    this.editable = true;
+
+    WebInspector.PropertiesSection.call(this, title, subtitle);
+}
+
+WebInspector.ObjectPropertiesSection.prototype = {
+    onpopulate: function()
+    {
+        this.update();
+    },
+
+    update: function()
+    {
+        var self = this;
+        function callback(properties)
+        {
+            if (!properties)
+                return;
+            self.updateProperties(properties);
+        }
+        if (this.ignoreHasOwnProperty)
+            this.object.getAllProperties(callback);
+        else
+            this.object.getOwnProperties(callback);
+    },
+
+    updateProperties: function(properties, rootTreeElementConstructor, rootPropertyComparer)
+    {
+        if (!rootTreeElementConstructor)
+            rootTreeElementConstructor = this.treeElementConstructor;
+
+        if (!rootPropertyComparer)
+            rootPropertyComparer = WebInspector.ObjectPropertiesSection.CompareProperties;
+
+        if (this.extraProperties)
+            for (var i = 0; i < this.extraProperties.length; ++i)
+                properties.push(this.extraProperties[i]);
+
+        properties.sort(rootPropertyComparer);
+
+        this.propertiesTreeOutline.removeChildren();
+
+        for (var i = 0; i < properties.length; ++i) {
+            properties[i].parentObject = this.object;
+            this.propertiesTreeOutline.appendChild(new rootTreeElementConstructor(properties[i]));
+        }
+
+        if (!this.propertiesTreeOutline.children.length) {
+            var title = document.createElement("div");
+            title.className = "info";
+            title.textContent = this.emptyPlaceholder;
+            var infoElement = new TreeElement(title, null, false);
+            this.propertiesTreeOutline.appendChild(infoElement);
+        }
+        this.propertiesForTest = properties;
+        
+        this.dispatchEventToListeners(WebInspector.Section.Event.VisibleContentDidChange);
+    }
+}
+
+WebInspector.ObjectPropertiesSection.prototype.__proto__ = WebInspector.PropertiesSection.prototype;
+
+WebInspector.ObjectPropertiesSection.CompareProperties = function(propertyA, propertyB)
+{
+    var a = propertyA.name;
+    var b = propertyB.name;
+    if (a === "__proto__")
+        return 1;
+    if (b === "__proto__")
+        return -1;
+
+    // if used elsewhere make sure to
+    //  - convert a and b to strings (not needed here, properties are all strings)
+    //  - check if a == b (not needed here, no two properties can be the same)
+
+    var diff = 0;
+    var chunk = /^\d+|^\D+/;
+    var chunka, chunkb, anum, bnum;
+    while (diff === 0) {
+        if (!a && b)
+            return -1;
+        if (!b && a)
+            return 1;
+        chunka = a.match(chunk)[0];
+        chunkb = b.match(chunk)[0];
+        anum = !isNaN(chunka);
+        bnum = !isNaN(chunkb);
+        if (anum && !bnum)
+            return -1;
+        if (bnum && !anum)
+            return 1;
+        if (anum && bnum) {
+            diff = chunka - chunkb;
+            if (diff === 0 && chunka.length !== chunkb.length) {
+                if (!+chunka && !+chunkb) // chunks are strings of all 0s (special case)
+                    return chunka.length - chunkb.length;
+                else
+                    return chunkb.length - chunka.length;
+            }
+        } else if (chunka !== chunkb)
+            return (chunka < chunkb) ? -1 : 1;
+        a = a.substring(chunka.length);
+        b = b.substring(chunkb.length);
+    }
+    return diff;
+}
+
+/**
+ * @constructor
+ * @extends {TreeElement}
+ */
+WebInspector.ObjectPropertyTreeElement = function(property)
+{
+    this.property = property;
+
+    // Pass an empty title, the title gets made later in onattach.
+    TreeElement.call(this, "", null, false);
+    this.toggleOnClick = true;
+    this.selectable = false;
+}
+
+WebInspector.ObjectPropertyTreeElement.prototype = {
+    onpopulate: function()
+    {
+        if (this.children.length && !this.shouldRefreshChildren)
+            return;
+
+        var callback = function(properties) {
+            this.removeChildren();
+            if (!properties)
+                return;
+
+            properties.sort(WebInspector.ObjectPropertiesSection.CompareProperties);
+            for (var i = 0; i < properties.length; ++i) {
+                this.appendChild(new this.treeOutline.section.treeElementConstructor(properties[i]));
+            }
+        };
+        this.property.value.getOwnProperties(callback.bind(this));
+    },
+
+    ondblclick: function(event)
+    {
+        if (this.property.writable)
+            this.startEditing();
+    },
+
+    onattach: function()
+    {
+        this.update();
+    },
+
+    update: function()
+    {
+        this.nameElement = document.createElement("span");
+        this.nameElement.className = "name";
+        this.nameElement.textContent = this.property.name;
+        if (!this.property.enumerable && (!this.parent.root || !this.treeOutline.section.dontHighlightNonEnumerablePropertiesAtTopLevel))
+            this.nameElement.classList.add("dimmed");
+
+        var separatorElement = document.createElement("span");
+        separatorElement.className = "separator";
+        separatorElement.textContent = ": ";
+
+        this.valueElement = document.createElement("span");
+        this.valueElement.className = "value";
+
+        var description = this.property.value.description;
+        // Render \n as a nice unicode cr symbol.
+        if (this.property.wasThrown)
+            this.valueElement.textContent = "[Exception: " + description + "]";
+        else if (this.property.value.type === "string" && typeof description === "string") {
+            this.valueElement.textContent = "\"" + description.replace(/\n/g, "\u21B5") + "\"";
+            this.valueElement._originalTextContent = "\"" + description + "\"";
+        } else if (this.property.value.type === "function" && typeof description === "string") {
+            this.valueElement.textContent = /.*/.exec(description)[0].replace(/ +$/g, "");
+            this.valueElement._originalTextContent = description;
+        } else
+            this.valueElement.textContent = description;
+
+        if (this.property.value.type === "function")
+            this.valueElement.addEventListener("contextmenu", this._functionContextMenuEventFired.bind(this), false);
+
+        if (this.property.wasThrown)
+            this.valueElement.classList.add("error");
+        if (this.property.value.subtype)
+            this.valueElement.classList.add("console-formatted-" + this.property.value.subtype);
+        else if (this.property.value.type)
+            this.valueElement.classList.add("console-formatted-" + this.property.value.type);
+        if (this.property.value.subtype === "node")
+            this.valueElement.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), false);
+
+        this.listItemElement.removeChildren();
+
+        this.listItemElement.appendChild(this.nameElement);
+        this.listItemElement.appendChild(separatorElement);
+        this.listItemElement.appendChild(this.valueElement);
+        this.hasChildren = this.property.value.hasChildren && !this.property.wasThrown;
+    },
+
+    _contextMenuEventFired: function(event)
+    {
+        function selectNode(nodeId)
+        {
+            if (nodeId)
+                WebInspector.domTreeManager.inspectElement(nodeId);
+        }
+
+        function revealElement()
+        {
+            this.property.value.pushNodeToFrontend(selectNode);
+        }
+
+        var contextMenu = new WebInspector.ContextMenu(event);
+        contextMenu.appendItem(WebInspector.UIString("Reveal in DOM Tree"), revealElement.bind(this));
+        contextMenu.show();
+    },
+
+    _functionContextMenuEventFired: function(event)
+    {
+        function didGetLocation(error, response)
+        {
+            if (error) {
+                console.error(error);
+                return;
+            }
+            WebInspector.panels.scripts.showFunctionDefinition(response);
+        }
+
+        function revealFunction()
+        {
+            DebuggerAgent.getFunctionLocation(this.property.value.objectId, didGetLocation.bind(this));
+        }
+
+        var contextMenu = new WebInspector.ContextMenu(event);
+        contextMenu.appendItem(WebInspector.UIString("Show function definition"), revealFunction.bind(this));
+        contextMenu.show();
+    },
+
+    updateSiblings: function()
+    {
+        if (this.parent.root)
+            this.treeOutline.section.update();
+        else
+            this.parent.shouldRefreshChildren = true;
+    },
+
+    startEditing: function()
+    {
+        if (WebInspector.isBeingEdited(this.valueElement) || !this.treeOutline.section.editable)
+            return;
+
+        var context = { expanded: this.expanded };
+
+        // Lie about our children to prevent expanding on double click and to collapse subproperties.
+        this.hasChildren = false;
+
+        this.listItemElement.classList.add("editing-sub-part");
+
+        // Edit original source.
+        if (typeof this.valueElement._originalTextContent === "string")
+            this.valueElement.textContent = this.valueElement._originalTextContent;
+
+        var config = new WebInspector.EditingConfig(this.editingCommitted.bind(this), this.editingCancelled.bind(this), context);
+        WebInspector.startEditing(this.valueElement, config);
+    },
+
+    editingEnded: function(context)
+    {
+        this.listItemElement.scrollLeft = 0;
+        this.listItemElement.classList.remove("editing-sub-part");
+        if (context.expanded)
+            this.expand();
+    },
+
+    editingCancelled: function(element, context)
+    {
+        this.update();
+        this.editingEnded(context);
+    },
+
+    editingCommitted: function(element, userInput, previousContent, context)
+    {
+        if (userInput === previousContent)
+            return this.editingCancelled(element, context); // nothing changed, so cancel
+
+        this.applyExpression(userInput, true);
+
+        this.editingEnded(context);
+    },
+
+    applyExpression: function(expression, updateInterface)
+    {
+        expression = expression.trim();
+        var expressionLength = expression.length;
+        function callback(error)
+        {
+            if (!updateInterface)
+                return;
+
+            if (error)
+                this.update();
+
+            if (!expressionLength) {
+                // The property was deleted, so remove this tree element.
+                this.parent.removeChild(this);
+            } else {
+                // Call updateSiblings since their value might be based on the value that just changed.
+                this.updateSiblings();
+            }
+        };
+        this.property.parentObject.setPropertyValue(this.property.name, expression.trim(), callback.bind(this));
+    }
+}
+
+WebInspector.ObjectPropertyTreeElement.prototype.__proto__ = TreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/PageObserver.js b/Source/WebInspectorUI/UserInterface/PageObserver.js
new file mode 100644
index 000000000..95aa5e8dd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/PageObserver.js
@@ -0,0 +1,92 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.PageObserver = function()
+{
+    WebInspector.Object.call(this);
+};
+
+WebInspector.PageObserver.prototype = {
+    constructor: WebInspector.PageObserver,
+
+    // Events defined by the "Page" domain (see WebCore/inspector/Inspector.json).
+
+    domContentEventFired: function(timestamp)
+    {
+        // Covered by Timeline "MarkDOMContent" record.
+    },
+
+    loadEventFired: function(timestamp)
+    {
+        WebInspector.timelineManager.pageDidLoad(timestamp);
+    },
+
+    frameNavigated: function(frame, loaderId)
+    {
+        WebInspector.frameResourceManager.frameDidNavigate(frame, loaderId);
+    },
+
+    frameDetached: function(frameId)
+    {
+        WebInspector.frameResourceManager.frameDidDetach(frameId);
+    },
+    
+    frameStartedLoading: function(frameId)
+    {
+        // Not handled yet.
+    },
+
+    frameStoppedLoading: function(frameId)
+    {
+        // Not handled yet.
+    },
+
+    frameScheduledNavigation: function(frameId, delay)
+    {
+        // Not handled yet.
+    },
+
+    frameClearedScheduledNavigation: function(frameId)
+    {
+        // Not handled yet.
+    },
+
+    javascriptDialogOpening: function(message)
+    {
+        // Not handled yet.
+    },
+
+    javascriptDialogClosed: function()
+    {
+        // Not handled yet.
+    },
+
+    scriptsEnabled: function(enabled)
+    {
+        // Not handled yet.
+    }
+};
+
+WebInspector.PageObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/PathComponentIcons.css b/Source/WebInspectorUI/UserInterface/PathComponentIcons.css
new file mode 100644
index 000000000..b11a3da5b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/PathComponentIcons.css
@@ -0,0 +1,68 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.source-code-icon .icon {
+    content: url(Images/SourceCode.pdf);
+}
+
+.dom-tree-icon .icon {
+    content: url(Images/DOMTree.pdf);
+}
+
+.request-icon .icon {
+    content: url(Images/Request.pdf);
+}
+
+.response-icon .icon {
+    content: url(Images/Response.pdf);
+}
+
+.dom-element-icon .icon {
+    content: url(Images/DOMElement.pdf);
+}
+
+.dom-text-node-icon .icon {
+    content: url(Images/DOMTextNode.pdf);
+}
+
+.dom-comment-icon .icon {
+    content: url(Images/DOMComment.pdf);
+}
+
+.dom-document-type-icon .icon {
+    content: url(Images/DOMDocumentType.pdf);
+}
+
+.dom-document-icon .icon {
+    content: url(Images/DOMDocument.pdf);
+}
+
+.dom-character-data-icon .icon {
+    content: url(Images/DOMCharacterData.pdf);
+}
+
+.dom-node-icon .icon {
+    content: url(Images/DOMNode.pdf);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Popover.css b/Source/WebInspectorUI/UserInterface/Popover.css
new file mode 100644
index 000000000..c3483c14c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Popover.css
@@ -0,0 +1,91 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.popover {
+    position: absolute;
+    min-width: 20px;
+    min-height: 20px;
+    box-sizing: border-box;
+    pointer-events: none;
+}
+
+.popover.arrow-up {
+    padding: 16px 5px 5px 5px;
+}
+
+.popover.arrow-right {
+    padding: 5px 16px 5px 5px;
+}
+
+.popover.arrow-down {
+    padding: 5px 5px 16px 5px;
+}
+
+.popover.arrow-left {
+    padding: 5px 5px 5px 16px;
+}
+
+.popover.fade-out {
+    -webkit-transition: opacity 350ms;
+    pointer-events: none;
+    opacity: 0;
+}
+
+.popover > .container {
+    position: absolute;
+    left: 5px;
+    top: 5px;
+    right: 5px;
+    bottom: 5px;
+
+    padding: 5px;
+
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    pointer-events: auto;
+}
+
+.popover > .container.center {
+    display: -webkit-flex;
+    -webkit-justify-content: center;
+    -webkit-align-items: center;
+}
+
+.popover.arrow-up > .container {
+    top: 16px;
+}
+
+.popover.arrow-right > .container {
+    right: 16px;
+}
+
+.popover.arrow-down > .container {
+    bottom: 16px;
+}
+
+.popover.arrow-left > .container {
+    left: 16px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Popover.js b/Source/WebInspectorUI/UserInterface/Popover.js
new file mode 100644
index 000000000..cf435c258
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Popover.js
@@ -0,0 +1,459 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Popover = function(delegate) {
+    WebInspector.Object.call(this);
+
+    this.delegate = delegate;
+    this._edge = null;
+    this._frame = new WebInspector.Rect;
+    this._content = null;
+    this._targetFrame = new WebInspector.Rect;
+    this._preferredEdges = null;
+
+    this._contentNeedsUpdate = false;
+
+    this._element = document.createElement("div");
+    this._element.className = WebInspector.Popover.StyleClassName;
+    this._canvasId = "popover-" + (WebInspector.Popover.canvasId++);
+    this._element.style.backgroundImage = "-webkit-canvas(" + this._canvasId + ")";
+    this._element.addEventListener("webkitTransitionEnd", this, true);
+    
+    this._container = this._element.appendChild(document.createElement("div"));
+    this._container.className = "container";
+};
+
+WebInspector.Popover.StyleClassName = "popover";
+WebInspector.Popover.FadeOutClassName = "fade-out";
+WebInspector.Popover.canvasId = 0;
+WebInspector.Popover.CornerRadius = 5;
+WebInspector.Popover.MinWidth = 40;
+WebInspector.Popover.MinHeight = 40;
+WebInspector.Popover.ShadowPadding = 5;
+WebInspector.Popover.ContentPadding = 5;
+WebInspector.Popover.AnchorSize = new WebInspector.Size(22, 11);
+WebInspector.Popover.ShadowEdgeInsets = new WebInspector.EdgeInsets(WebInspector.Popover.ShadowPadding);
+
+WebInspector.Popover.prototype = {
+    constructor: WebInspector.Popover,
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get frame()
+    {
+        return this._frame;
+    },
+
+    get visible()
+    {
+        return this._element.parentNode === document.body && !this._element.classList.contains(WebInspector.Popover.FadeOutClassName);
+    },
+
+    set frame(frame)
+    {
+        this._element.style.left = frame.origin.x + "px";
+        this._element.style.top = frame.origin.y + "px";
+        this._element.style.width = frame.size.width + "px";
+        this._element.style.height = frame.size.height + "px";
+        this._element.style.backgroundSize = frame.size.width + "px " + frame.size.height + "px";
+        this._frame = frame;
+    },
+
+    set content(content)
+    {
+        if (content === this._content)
+            return;
+
+        this._content = content;
+
+        this._contentNeedsUpdate = true;
+
+        if (this.visible)
+            this._update();
+    },
+
+    /**
+     * @param {WebInspector.Rect} targetFrame
+     * @param {WebInspector.RectEdge}[] preferredEdges
+     */
+    present: function(targetFrame, preferredEdges)
+    {
+        this._targetFrame = targetFrame;
+        this._preferredEdges = preferredEdges;
+
+        if (!this._content)
+            return;
+
+        window.addEventListener("mousedown", this, true);
+        window.addEventListener("scroll", this, true);
+
+        this._update();
+    },
+    
+    dismiss: function()
+    {
+        if (this._element.parentNode !== document.body)
+            return;
+
+        window.removeEventListener("mousedown", this, true);
+        window.removeEventListener("scroll", this, true);
+
+        this._element.classList.add(WebInspector.Popover.FadeOutClassName);
+
+        if (this.delegate && typeof this.delegate.willDismissPopover === "function")
+            this.delegate.willDismissPopover(this);
+    },
+
+    handleEvent: function(event)
+    {
+        switch (event.type) {
+        case "mousedown":
+        case "scroll":
+            if (!this._element.contains(event.target))
+                this.dismiss();
+            break;
+        case "webkitTransitionEnd":
+            document.body.removeChild(this._element);
+            this._element.classList.remove(WebInspector.Popover.FadeOutClassName);
+            this._container.textContent = "";
+            if (this.delegate && typeof this.delegate.didDismissPopover === "function")
+                this.delegate.didDismissPopover(this);
+            break;
+        }
+    },
+
+    // Private
+
+    _update: function(replaceContent)
+    {
+        var targetFrame = this._targetFrame;
+        var preferredEdges = this._preferredEdges;
+
+        // Ensure our element is on display so that its metrics can be resolved
+        // or interrupt any pending transition to remove it from display.
+        if (this._element.parentNode !== document.body)
+            document.body.appendChild(this._element);
+        else
+            this._element.classList.remove(WebInspector.Popover.FadeOutClassName);
+
+        if (this._contentNeedsUpdate) {
+            // Reset CSS properties on element so that the element may be sized to fit its content.
+            this._element.style.removeProperty("left");
+            this._element.style.removeProperty("top");
+            this._element.style.removeProperty("width");
+            this._element.style.removeProperty("height");
+            if (this._edge !== null)
+                this._element.classList.remove(this._cssClassNameForEdge());
+
+            // Add the content in place of the wrapper to get the raw metrics.
+            this._element.replaceChild(this._content, this._container);
+
+            // Get the ideal size for the popover to fit its content.
+            var popoverBounds = this._element.getBoundingClientRect();
+            this._preferredSize = new WebInspector.Size(Math.ceil(popoverBounds.width), Math.ceil(popoverBounds.height));
+        }
+
+        // The frame of the window with a little inset to make sure we have room for shadows.
+        var containerFrame = new WebInspector.Rect(0, 0, window.innerWidth, window.innerHeight);
+        containerFrame = containerFrame.inset(WebInspector.Popover.ShadowEdgeInsets);
+
+        // Work out the metrics for all edges.
+        var metrics = new Array(preferredEdges.length);
+        for (var edgeName in WebInspector.RectEdge) {
+            var edge = WebInspector.RectEdge[edgeName];
+            var item = {
+                edge: edge,
+                metrics: this._bestMetricsForEdge(this._preferredSize, targetFrame, containerFrame, edge)
+            };
+            var preferredIndex = preferredEdges.indexOf(edge);
+            if (preferredIndex !== -1)
+                metrics[preferredIndex] = item;
+            else
+                metrics.push(item);
+        }
+
+        function area(size)
+        {
+            return size.width * size.height;
+        }
+
+        // Find if any of those fit better than the frame for the preferred edge.
+        var bestEdge = metrics[0].edge;
+        var bestMetrics = metrics[0].metrics;
+        for (var i = 1; i < metrics.length; i++) {
+            var itemMetrics = metrics[i].metrics;
+            if (area(itemMetrics.contentSize) > area(bestMetrics.contentSize)) {
+                bestEdge = metrics[i].edge;
+                bestMetrics = itemMetrics;
+            }
+        }
+
+        var anchorPoint;
+        var bestFrame = bestMetrics.frame;
+
+        var needsToDrawBackground = !this._frame.size.equals(bestFrame.size) || this._edge !== bestEdge;
+
+        this.frame = bestFrame;
+        this._edge = bestEdge;
+
+        if (this.frame === WebInspector.Rect.ZERO_RECT) {
+            // The target for the popover is offscreen.
+            this.dismiss();
+        } else {
+            switch (bestEdge) {
+            case WebInspector.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
+                anchorPoint = new WebInspector.Point(bestFrame.size.width - WebInspector.Popover.ShadowPadding, targetFrame.midY() - bestFrame.minY());
+                break;
+            case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
+                anchorPoint = new WebInspector.Point(WebInspector.Popover.ShadowPadding, targetFrame.midY() - bestFrame.minY());
+                break;
+            case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
+                anchorPoint = new WebInspector.Point(targetFrame.midX() - bestFrame.minX(), bestFrame.size.height - WebInspector.Popover.ShadowPadding);
+                break;
+            case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
+                anchorPoint = new WebInspector.Point(targetFrame.midX() - bestFrame.minX(), WebInspector.Popover.ShadowPadding);
+                break;
+            }
+
+            this._element.classList.add(this._cssClassNameForEdge());
+
+            if (needsToDrawBackground)
+                this._drawBackground(bestEdge, anchorPoint);
+
+            // Make sure content is centered in case either of the dimension is smaller than the minimal bounds.
+            if (this._preferredSize.width < WebInspector.Popover.MinWidth || this._preferredSize.height < WebInspector.Popover.MinHeight)
+                this._container.classList.add("center");
+            else
+                this._container.classList.remove("center");
+        }
+
+        // Wrap the content in the container so that it's located correctly.
+        if (this._contentNeedsUpdate) {
+            this._container.textContent = "";
+            this._element.replaceChild(this._container, this._content);
+            this._container.appendChild(this._content);
+        }
+
+        this._contentNeedsUpdate = false;
+    },
+
+    _cssClassNameForEdge: function()
+    {
+        switch (this._edge) {
+        case WebInspector.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
+            return "arrow-right";
+        case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
+            return "arrow-left";
+        case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
+            return "arrow-down";
+        case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
+            return "arrow-up";
+        }
+        console.error("Unknown edge.");
+        return "arrow-up";
+    },
+
+    _drawBackground: function(edge, anchorPoint)
+    {
+        var scaleFactor = window.devicePixelRatio;
+
+        var width = this._frame.size.width;
+        var height = this._frame.size.height;
+        var scaledWidth = width * scaleFactor;
+        var scaledHeight = height * scaleFactor;
+
+        // Create a scratch canvas so we can draw the popover that will later be drawn into
+        // the final context with a shadow.
+        var scratchCanvas = document.createElement("canvas");
+        scratchCanvas.width = scaledWidth;
+        scratchCanvas.height = scaledHeight;
+
+        var ctx = scratchCanvas.getContext("2d");
+        ctx.scale(scaleFactor, scaleFactor);
+
+        // Bounds of the path don't take into account the arrow, but really only the tight bounding box
+        // of the content contained within the frame.
+        var bounds;
+        var arrowHeight = WebInspector.Popover.AnchorSize.height;
+        switch (edge) {
+        case WebInspector.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
+            bounds = new WebInspector.Rect(0, 0, width - arrowHeight, height);
+            break;
+        case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
+            bounds = new WebInspector.Rect(arrowHeight, 0, width - arrowHeight, height);
+            break;
+        case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
+            bounds = new WebInspector.Rect(0, 0, width, height - arrowHeight);
+            break;
+        case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
+            bounds = new WebInspector.Rect(0, arrowHeight, width, height - arrowHeight);
+            break;
+        }
+
+        bounds = bounds.inset(WebInspector.Popover.ShadowEdgeInsets);
+
+        // Clip the frame.
+        ctx.fillStyle = "black";
+        this._drawFrame(ctx, bounds, edge, anchorPoint);
+        ctx.clip();
+
+        // Gradient fill, top-to-bottom.
+        var fillGradient = ctx.createLinearGradient(0, 0, 0, height);
+        fillGradient.addColorStop(0, "rgba(255, 255, 255, 0.95)");
+        fillGradient.addColorStop(1, "rgba(235, 235, 235, 0.95)");
+        ctx.fillStyle = fillGradient;
+        ctx.fillRect(0, 0, width, height);
+
+        // Stroke.
+        ctx.strokeStyle = "rgba(0, 0, 0, 0.25)";
+        ctx.lineWidth = 2;
+        this._drawFrame(ctx, bounds, edge, anchorPoint);
+        ctx.stroke();
+
+        // Draw the popover into the final context with a drop shadow.
+        var finalContext = document.getCSSCanvasContext("2d", this._canvasId, scaledWidth, scaledHeight);
+
+        finalContext.clearRect(0, 0, scaledWidth, scaledHeight);
+
+        finalContext.shadowOffsetX = 1;
+        finalContext.shadowOffsetY = 1;
+        finalContext.shadowBlur = 5;
+        finalContext.shadowColor = "rgba(0, 0, 0, 0.5)";
+
+        finalContext.drawImage(scratchCanvas, 0, 0, scaledWidth, scaledHeight);
+    },
+    
+    _bestMetricsForEdge: function(preferredSize, targetFrame, containerFrame, edge)
+    {
+        var x, y;
+        var width = preferredSize.width + (WebInspector.Popover.ShadowPadding * 2) + (WebInspector.Popover.ContentPadding * 2);
+        var height = preferredSize.height + (WebInspector.Popover.ShadowPadding * 2) + (WebInspector.Popover.ContentPadding * 2);
+        var arrowLength = WebInspector.Popover.AnchorSize.height;
+
+        switch (edge) {
+        case WebInspector.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
+            width += arrowLength;
+            x = targetFrame.origin.x - width + WebInspector.Popover.ShadowPadding;
+            y = targetFrame.origin.y - (height - targetFrame.size.height) / 2;
+            break;
+        case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
+            width += arrowLength;
+            x = targetFrame.origin.x + targetFrame.size.width - WebInspector.Popover.ShadowPadding;
+            y = targetFrame.origin.y - (height - targetFrame.size.height) / 2;
+            break;
+        case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
+            height += arrowLength;
+            x = targetFrame.origin.x - (width - targetFrame.size.width) / 2;
+            y = targetFrame.origin.y - height + WebInspector.Popover.ShadowPadding;
+            break;
+        case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
+            height += arrowLength;
+            x = targetFrame.origin.x - (width - targetFrame.size.width) / 2;
+            y = targetFrame.origin.y + targetFrame.size.height - WebInspector.Popover.ShadowPadding;
+            break;
+        }
+
+        var preferredFrame = new WebInspector.Rect(x, y, width, height);
+        var bestFrame = preferredFrame.intersectionWithRect(containerFrame);
+
+        width = bestFrame.size.width - (WebInspector.Popover.ShadowPadding * 2);
+        height = bestFrame.size.height - (WebInspector.Popover.ShadowPadding * 2);
+
+        switch (edge) {
+        case WebInspector.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
+        case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
+            width -= arrowLength;
+            break;
+        case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
+        case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
+            height -= arrowLength;
+            break;
+        }
+
+        return {
+            frame: bestFrame,
+            contentSize: new WebInspector.Size(width, height)
+        };
+    },
+
+    _drawFrame: function(ctx, bounds, anchorEdge, anchorPoint)
+    {
+        var r = WebInspector.Popover.CornerRadius;
+        var arrowHalfLength = WebInspector.Popover.AnchorSize.width / 2;
+
+        ctx.beginPath();
+        switch (anchorEdge) {
+        case WebInspector.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
+            ctx.moveTo(bounds.maxX(), bounds.minY() + r);
+            ctx.lineTo(bounds.maxX(), anchorPoint.y - arrowHalfLength);
+            ctx.lineTo(anchorPoint.x, anchorPoint.y);
+            ctx.lineTo(bounds.maxX(), anchorPoint.y + arrowHalfLength);
+            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), r);
+            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), r);
+            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), r);
+            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), r);
+            break;
+        case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
+            ctx.moveTo(bounds.minX(), bounds.maxY() - r);
+            ctx.lineTo(bounds.minX(), anchorPoint.y + arrowHalfLength);
+            ctx.lineTo(anchorPoint.x, anchorPoint.y);
+            ctx.lineTo(bounds.minX(), anchorPoint.y - arrowHalfLength);
+            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), r);
+            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), r);
+            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), r);
+            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), r);
+            break;
+        case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
+            ctx.moveTo(bounds.maxX() - r, bounds.maxY());
+            ctx.lineTo(anchorPoint.x + arrowHalfLength, bounds.maxY());
+            ctx.lineTo(anchorPoint.x, anchorPoint.y);
+            ctx.lineTo(anchorPoint.x - arrowHalfLength, bounds.maxY());
+            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), r);
+            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), r);
+            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), r);
+            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), r);
+            break;
+        case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
+            ctx.moveTo(bounds.minX() + r, bounds.minY());
+            ctx.lineTo(anchorPoint.x - arrowHalfLength, bounds.minY());
+            ctx.lineTo(anchorPoint.x, anchorPoint.y);
+            ctx.lineTo(anchorPoint.x + arrowHalfLength, bounds.minY());
+            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), r);
+            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), r);
+            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), r);
+            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), r);
+            break;
+        }
+        ctx.closePath();
+    }
+    
+};
+
+WebInspector.Popover.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ProfileDataGridTree.js b/Source/WebInspectorUI/UserInterface/ProfileDataGridTree.js
new file mode 100644
index 000000000..98f71c11f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ProfileDataGridTree.js
@@ -0,0 +1,400 @@
+/*
+ * Copyright (C) 2009 280 North Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProfileDataGridNode = function(profileView, profileNode, owningTree, hasChildren)
+{
+    this.profileView = profileView;
+    this.profileNode = profileNode;
+
+    WebInspector.DataGridNode.call(this, null, hasChildren);
+
+    this.addEventListener("populate", this._populate, this);
+
+    this.tree = owningTree;
+
+    this.childrenByCallUID = {};
+    this.lastComparator = null;
+
+    this.callUID = profileNode.callUID;
+    this.selfTime = profileNode.selfTime;
+    this.totalTime = profileNode.totalTime;
+    this.functionName = profileNode.functionName;
+    this.numberOfCalls = profileNode.numberOfCalls;
+    this.url = profileNode.url;
+}
+
+WebInspector.ProfileDataGridNode.prototype = {
+    get data()
+    {
+        function formatMilliseconds(time)
+        {
+            return Number.secondsToString(time / 1000, true);
+        }
+
+        var data = {};
+
+        data["function"] = this.functionName;
+        data["calls"] = this.numberOfCalls;
+
+        if (this.profileView.showTimeAsPercent.value) {
+            data["self"] = WebInspector.UIString("%.2f %%").format(this.selfPercent);
+            data["total"] = WebInspector.UIString("%.2f %%").format(this.totalPercent);
+            data["average"] = WebInspector.UIString("%.2f %%").format(this.averagePercent);
+        } else {
+            data["self"] = formatMilliseconds(this.selfTime);
+            data["total"] = formatMilliseconds(this.totalTime);
+            data["average"] = formatMilliseconds(this.averageTime);
+        }
+
+        return data;
+    },
+
+    createCell: function(columnIdentifier)
+    {
+        var cell = WebInspector.DataGridNode.prototype.createCell.call(this, columnIdentifier);
+
+        if (columnIdentifier === "self" && this._searchMatchedSelfColumn)
+            cell.classList.add("highlight");
+        else if (columnIdentifier === "total" && this._searchMatchedTotalColumn)
+            cell.classList.add("highlight");
+        else if (columnIdentifier === "average" && this._searchMatchedAverageColumn)
+            cell.classList.add("highlight");
+        else if (columnIdentifier === "calls" && this._searchMatchedCallsColumn)
+            cell.classList.add("highlight");
+
+        if (columnIdentifier !== "function")
+            return cell;
+
+        if (this.profileNode._searchMatchedFunctionColumn)
+            cell.classList.add("highlight");
+
+        if (this.profileNode.url) {
+            // FIXME(62725): profileNode should reference a debugger location.
+            var lineNumber = this.profileNode.lineNumber ? this.profileNode.lineNumber - 1 : 0;
+            var urlElement = this._linkifyLocation(this.profileNode.url, lineNumber, "profile-node-file");
+            urlElement.style.maxWidth = "75%";
+            cell.insertBefore(urlElement, cell.firstChild);
+        }
+
+        return cell;
+    },
+
+    select: function(supressSelectedEvent)
+    {
+        WebInspector.DataGridNode.prototype.select.call(this, supressSelectedEvent);
+        this.profileView._dataGridNodeSelected(this);
+    },
+
+    deselect: function(supressDeselectedEvent)
+    {
+        WebInspector.DataGridNode.prototype.deselect.call(this, supressDeselectedEvent);
+        this.profileView._dataGridNodeDeselected(this);
+    },
+
+    sort: function(/*Function*/ comparator, /*Boolean*/ force)
+    {
+        var gridNodeGroups = [[this]];
+
+        for (var gridNodeGroupIndex = 0; gridNodeGroupIndex < gridNodeGroups.length; ++gridNodeGroupIndex) {
+            var gridNodes = gridNodeGroups[gridNodeGroupIndex];
+            var count = gridNodes.length;
+
+            for (var index = 0; index < count; ++index) {
+                var gridNode = gridNodes[index];
+
+                // If the grid node is collapsed, then don't sort children (save operation for later).
+                // If the grid node has the same sorting as previously, then there is no point in sorting it again.
+                if (!force && (!gridNode.expanded || gridNode.lastComparator === comparator)) {
+                    if (gridNode.children.length)
+                        gridNode.shouldRefreshChildren = true;
+                    continue;
+                }
+
+                gridNode.lastComparator = comparator;
+
+                var children = gridNode.children;
+                var childCount = children.length;
+
+                if (childCount) {
+                    children.sort(comparator);
+
+                    for (var childIndex = 0; childIndex < childCount; ++childIndex)
+                        children[childIndex]._recalculateSiblings(childIndex);
+
+                    gridNodeGroups.push(children);
+                }
+            }
+        }
+    },
+
+    insertChild: function(/*ProfileDataGridNode*/ profileDataGridNode, index)
+    {
+        WebInspector.DataGridNode.prototype.insertChild.call(this, profileDataGridNode, index);
+
+        this.childrenByCallUID[profileDataGridNode.callUID] = profileDataGridNode;
+    },
+
+    removeChild: function(/*ProfileDataGridNode*/ profileDataGridNode)
+    {
+        WebInspector.DataGridNode.prototype.removeChild.call(this, profileDataGridNode);
+
+        delete this.childrenByCallUID[profileDataGridNode.callUID];
+    },
+
+    removeChildren: function(/*ProfileDataGridNode*/ profileDataGridNode)
+    {
+        WebInspector.DataGridNode.prototype.removeChildren.call(this);
+
+        this.childrenByCallUID = {};
+    },
+
+    findChild: function(/*Node*/ node)
+    {
+        if (!node)
+            return null;
+        return this.childrenByCallUID[node.callUID];
+    },
+
+    get averageTime()
+    {
+        return this.selfTime / Math.max(1, this.numberOfCalls);
+    },
+
+    get averagePercent()
+    {
+        return this.averageTime / this.tree.totalTime * 100.0;
+    },
+
+    get selfPercent()
+    {
+        return this.selfTime / this.tree.totalTime * 100.0;
+    },
+
+    get totalPercent()
+    {
+        return this.totalTime / this.tree.totalTime * 100.0;
+    },
+
+    get _parent()
+    {
+        return this.parent !== this.dataGrid ? this.parent : this.tree;
+    },
+
+    _populate: function(event)
+    {
+        this._sharedPopulate();
+
+        if (this._parent) {
+            var currentComparator = this._parent.lastComparator;
+
+            if (currentComparator)
+                this.sort(currentComparator, true);
+        }
+
+        if (this.removeEventListener)
+            this.removeEventListener("populate", this._populate, this);
+    },
+
+    // When focusing and collapsing we modify lots of nodes in the tree.
+    // This allows us to restore them all to their original state when we revert.
+    _save: function()
+    {
+        if (this._savedChildren)
+            return;
+
+        this._savedSelfTime = this.selfTime;
+        this._savedTotalTime = this.totalTime;
+        this._savedNumberOfCalls = this.numberOfCalls;
+
+        this._savedChildren = this.children.slice();
+    },
+
+    // When focusing and collapsing we modify lots of nodes in the tree.
+    // This allows us to restore them all to their original state when we revert.
+    _restore: function()
+    {
+        if (!this._savedChildren)
+            return;
+
+        this.selfTime = this._savedSelfTime;
+        this.totalTime = this._savedTotalTime;
+        this.numberOfCalls = this._savedNumberOfCalls;
+
+        this.removeChildren();
+
+        var children = this._savedChildren;
+        var count = children.length;
+
+        for (var index = 0; index < count; ++index) {
+            children[index]._restore();
+            this.appendChild(children[index]);
+        }
+    },
+
+    _merge: function(child, shouldAbsorb)
+    {
+        this.selfTime += child.selfTime;
+
+        if (!shouldAbsorb) {
+            this.totalTime += child.totalTime;
+            this.numberOfCalls += child.numberOfCalls;
+        }
+
+        var children = this.children.slice();
+
+        this.removeChildren();
+
+        var count = children.length;
+
+        for (var index = 0; index < count; ++index) {
+            if (!shouldAbsorb || children[index] !== child)
+                this.appendChild(children[index]);
+        }
+
+        children = child.children.slice();
+        count = children.length;
+
+        for (var index = 0; index < count; ++index) {
+            var orphanedChild = children[index],
+                existingChild = this.childrenByCallUID[orphanedChild.callUID];
+
+            if (existingChild)
+                existingChild._merge(orphanedChild, false);
+            else
+                this.appendChild(orphanedChild);
+        }
+    },
+    
+    _linkifyLocation: function(url, lineNumber, className)
+    {
+        // FIXME: CPUProfileNode's need columnNumbers.
+        return WebInspector.linkifyLocation(url, lineNumber, 0, className);
+    }
+}
+
+WebInspector.ProfileDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
+
+WebInspector.ProfileDataGridTree = function(profileView, profileNode)
+{
+    this.tree = this;
+    this.children = [];
+
+    this.profileView = profileView;
+
+    this.totalTime = profileNode.totalTime;
+    this.lastComparator = null;
+
+    this.childrenByCallUID = {};
+}
+
+WebInspector.ProfileDataGridTree.prototype = {
+    get expanded()
+    {
+        return true;
+    },
+
+    appendChild: function(child)
+    {
+        this.insertChild(child, this.children.length);
+    },
+
+    insertChild: function(child, index)
+    {
+        this.children.splice(index, 0, child);
+        this.childrenByCallUID[child.callUID] = child;
+    },
+
+    removeChildren: function()
+    {
+        this.children = [];
+        this.childrenByCallUID = {};
+    },
+
+    findChild: WebInspector.ProfileDataGridNode.prototype.findChild,
+    sort: WebInspector.ProfileDataGridNode.prototype.sort,
+
+    _save: function()
+    {
+        if (this._savedChildren)
+            return;
+
+        this._savedTotalTime = this.totalTime;
+        this._savedChildren = this.children.slice();
+    },
+
+    restore: function()
+    {
+        if (!this._savedChildren)
+            return;
+
+        this.children = this._savedChildren;
+        this.totalTime = this._savedTotalTime;
+
+        var children = this.children;
+        var count = children.length;
+
+        for (var index = 0; index < count; ++index)
+            children[index]._restore();
+
+        this._savedChildren = null;
+    }
+}
+
+WebInspector.ProfileDataGridTree.propertyComparators = [{}, {}];
+
+WebInspector.ProfileDataGridTree.propertyComparator = function(/*String*/ property, /*Boolean*/ isAscending)
+{
+    var comparator = this.propertyComparators[(isAscending ? 1 : 0)][property];
+
+    if (!comparator) {
+        if (isAscending) {
+            comparator = function(lhs, rhs)
+            {
+                if (lhs[property] < rhs[property])
+                    return -1;
+
+                if (lhs[property] > rhs[property])
+                    return 1;
+
+                return 0;
+            }
+        } else {
+            comparator = function(lhs, rhs)
+            {
+                if (lhs[property] > rhs[property])
+                    return -1;
+
+                if (lhs[property] < rhs[property])
+                    return 1;
+
+                return 0;
+            }
+        }
+
+        this.propertyComparators[(isAscending ? 1 : 0)][property] = comparator;
+    }
+
+    return comparator;
+}
diff --git a/Source/WebInspectorUI/UserInterface/ProfileManager.js b/Source/WebInspectorUI/UserInterface/ProfileManager.js
new file mode 100644
index 000000000..d5c52b15f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ProfileManager.js
@@ -0,0 +1,228 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProfileManager = function()
+{
+    WebInspector.Object.call(this);
+
+    this._javaScriptProfileType = new WebInspector.JavaScriptProfileType;
+    this._cssSelectorProfileType = new WebInspector.CSSSelectorProfileType;
+
+    ProfilerAgent.enable();
+    ProfilerAgent.getProfileHeaders();
+
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+
+    this.initialize();
+};
+
+WebInspector.ProfileManager.Event = {
+    ProfileWasAdded: "profile-manager-profile-was-added",
+    ProfileWasUpdated: "profile-manager-profile-was-updated",
+    ProfilingStarted: "profile-manager-profiling-started",
+    ProfilingEnded: "profile-manager-profiling-ended",
+    ProfilingInterrupted: "profile-manager-profiling-interrupted",
+    Cleared: "profile-manager-cleared"
+};
+
+WebInspector.ProfileManager.UserInitiatedProfileName = "org.webkit.profiles.user-initiated";
+
+WebInspector.ProfileManager.prototype = {
+    constructor: WebInspector.ProfileManager,
+
+    // Public
+
+    initialize: function()
+    {
+        this._checkForInterruptions();
+
+        this._recordingJavaScriptProfile = null;
+        this._recordingCSSSelectorProfile = null;
+
+        this._isProfiling = false;
+
+        this._cssSelectorProfileType.reset();
+
+        this.dispatchEventToListeners(WebInspector.ProfileManager.Event.Cleared);
+    },
+
+    isProfilingJavaScript: function()
+    {
+        return this._javaScriptProfileType.isRecordingProfile();
+    },
+
+    startProfilingJavaScript: function()
+    {
+        this._javaScriptProfileType.startRecordingProfile();
+    },
+
+    stopProfilingJavaScript: function()
+    {
+        this._javaScriptProfileType.stopRecordingProfile();
+    },
+
+    isProfilingCSSSelectors: function()
+    {
+        return this._cssSelectorProfileType.isRecordingProfile();
+    },
+
+    startProfilingCSSSelectors: function()
+    {
+        this._cssSelectorProfileType.startRecordingProfile();
+        
+        var id = this._cssSelectorProfileType.nextProfileId();
+        this._recordingCSSSelectorProfile = new WebInspector.CSSSelectorProfileObject(WebInspector.UIString("CSS Selector Profile %d").format(id), id, true);
+        this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfileWasAdded, {profile: this._recordingCSSSelectorProfile});
+        
+        this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfilingStarted);
+    },
+    
+    stopProfilingCSSSelectors: function()
+    {
+        function cssProfilingStopped(error, profile)
+        {
+            if (error)
+                return;
+
+            console.assert(this._recordingCSSSelectorProfile);
+
+            this._recordingCSSSelectorProfile.data = profile.data;
+            this._recordingCSSSelectorProfile.totalTime = profile.totalTime;
+            this._recordingCSSSelectorProfile.recording = false;
+            
+            this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfileWasUpdated, {profile: this._recordingCSSSelectorProfile});
+
+            this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfilingEnded, {profile: this._recordingCSSSelectorProfile});
+
+            this._recordingCSSSelectorProfile = null;
+        }
+
+        this._cssSelectorProfileType.stopRecordingProfile(cssProfilingStopped.bind(this));
+    },
+
+    profileWasStartedFromConsole: function(title)
+    {
+        this.setRecordingJavaScriptProfile(true, true);
+
+        if (title.indexOf(WebInspector.ProfileManager.UserInitiatedProfileName) === -1) {
+            this._recordingJavaScriptProfile.title = title;
+            this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfileWasUpdated, {profile: this._recordingJavaScriptProfile});
+        }
+    },
+
+    profileWasEndedFromConsole: function()
+    {
+        this.setRecordingJavaScriptProfile(false, true);
+    },
+
+    addJavaScriptProfile: function(profile)
+    {
+        console.assert(this._recordingJavaScriptProfile);
+        if (!this._recordingJavaScriptProfile)
+            return;
+
+        this._recordingJavaScriptProfile.type = profile.typeId;
+        this._recordingJavaScriptProfile.title = profile.title;
+        this._recordingJavaScriptProfile.id = profile.uid;
+        this._recordingJavaScriptProfile.recording = false;
+
+        this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfileWasUpdated, {profile: this._recordingJavaScriptProfile});
+
+        // We want to reset _recordingJavaScriptProfile so that we can identify
+        // interruptions, but we also want to keep track of the last profile
+        // we've recorded so that we can provide it as data to the ProfilingEnded event
+        // we'll dispatch in setRecordingJavaScriptProfile().
+        this._lastJavaScriptProfileAdded = this._recordingJavaScriptProfile;
+        this._recordingJavaScriptProfile = null;
+    },
+
+    setRecordingJavaScriptProfile: function(isProfiling, fromConsole)
+    {
+        if (this._isProfiling === isProfiling)
+            return;
+
+        this._isProfiling = isProfiling;
+
+        // We've interrupted the current JS profile due to a page reload. Return
+        // now and _attemptToResumeProfiling will pick things up after the reload.
+        if (!isProfiling && !!this._recordingJavaScriptProfile)
+            return;
+
+        if (isProfiling && !this._recordingJavaScriptProfile)
+            this._recordingJavaScriptProfile = new WebInspector.JavaScriptProfileObject(WebInspector.ProfileManager.UserInitiatedProfileName, -1, true);
+
+        if (isProfiling) {
+            this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfileWasAdded, {profile: this._recordingJavaScriptProfile});
+            if (!fromConsole)
+                this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfilingStarted);
+        } else {
+            this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfilingEnded, {
+                profile: this._lastJavaScriptProfileAdded,
+                fromConsole: fromConsole
+            });
+            this._lastJavaScriptProfileAdded = null;
+        }
+    },
+
+    // Private
+    
+    _mainResourceDidChange: function(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        if (!event.target.isMainFrame())
+            return;
+
+        var oldMainResource = event.data.oldMainResource;
+        var newMainResource = event.target.mainResource;
+        if (oldMainResource.url !== newMainResource.url)
+            this.initialize();
+        else
+            this._attemptToResumeProfiling();
+    },
+
+    _checkForInterruptions: function()
+    {
+        if (this._recordingJavaScriptProfile) {
+            this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfilingInterrupted, {profile: this._recordingJavaScriptProfile});
+            this._javaScriptProfileType.setRecordingProfile(false);
+        } else if (this._recordingCSSSelectorProfile) {
+            this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfilingInterrupted, {profile: this._recordingCSSSelectorProfile});
+            this._cssSelectorProfileType.setRecordingProfile(false);
+        }
+    },
+
+    _attemptToResumeProfiling: function()
+    {
+        this._checkForInterruptions();
+
+        if (this._recordingJavaScriptProfile)
+            this.startProfilingJavaScript();
+        else if (this._recordingCSSSelectorProfile)
+            this.startProfilingCSSSelectors();
+    }
+};
+
+WebInspector.ProfileManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ProfileObject.js b/Source/WebInspectorUI/UserInterface/ProfileObject.js
new file mode 100644
index 000000000..672d818a5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ProfileObject.js
@@ -0,0 +1,93 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProfileObject = function(type, title, id, isRecording)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(type);
+    console.assert(title);
+    console.assert(id);
+
+    this._type = type;
+    this._title = title;
+    this._id = id;
+    this._isRecording = isRecording || false;
+};
+
+WebInspector.ProfileObject.Event = {
+    FinshedRecording: "profile-object-finished-recording"
+};
+
+WebInspector.ProfileObject.prototype = {
+    constructor: WebInspector.ProfileObject,
+    
+    get type()
+    {
+        return this._type;
+    },
+
+    set type(type)
+    {
+        this._type = type;
+    },
+    
+    get title()
+    {
+        return this._title;
+    },
+
+    set title(title)
+    {
+        this._title = title;
+    },
+
+    get id()
+    {
+        return this._id;
+    },
+
+    set id(id)
+    {
+        this._id = id;
+    },
+
+    get recording()
+    {
+        return this._isRecording;
+    },
+
+    set recording(flag)
+    {
+        if (this._isRecording === flag)
+            return;
+
+        this._isRecording = flag;
+        if (!flag)
+            this.dispatchEventToListeners(WebInspector.ProfileObject.Event.FinshedRecording);
+    }
+};
+
+WebInspector.ProfileObject.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ProfileType.js b/Source/WebInspectorUI/UserInterface/ProfileType.js
new file mode 100644
index 000000000..ff2d6796a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ProfileType.js
@@ -0,0 +1,87 @@
+/*
+ * Copyright (C) 2008, 2013 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProfileType = function(id, name)
+{
+    this._id = id;
+    this._name = name;
+}
+
+WebInspector.ProfileType.URLRegExp = /webkit-profile:\/\/(.+)\/(.+)#([0-9]+)/;
+WebInspector.ProfileType.ProfileScheme = "webkit-profile";
+
+WebInspector.ProfileType.prototype = {
+    get buttonTooltip()
+    {
+        return "";
+    },
+
+    get id()
+    {
+        return this._id;
+    },
+
+    get treeItemTitle()
+    {
+        return this._name;
+    },
+
+    get name()
+    {
+        return this._name;
+    },
+
+    buttonClicked: function()
+    {
+    },
+
+    viewForProfile: function(profile)
+    {
+        if (!profile._profileView)
+            profile._profileView = this.createView(profile);
+        return profile._profileView;
+    },
+
+    reset: function()
+    {
+    },
+
+    get description()
+    {
+        return "";
+    },
+
+    // Must be implemented by subclasses.
+    createView: function(profile)
+    {
+        throw new Error("Needs implemented.");
+    },
+
+    // Must be implemented by subclasses.
+    createSidebarTreeElementForProfile: function(profile)
+    {
+        throw new Error("Needs implemented.");
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/ProfileView.css b/Source/WebInspectorUI/UserInterface/ProfileView.css
new file mode 100644
index 000000000..64d7ae5cb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ProfileView.css
@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.recording-profile-view {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    display: -webkit-flex;
+    -webkit-flex-flow: row nowrap;
+    -webkit-justify-content: center;
+    -webkit-align-content: center;
+    -webkit-align-items: center;
+    
+    background-color: rgb(232, 232, 232);
+}
+
+.recording-profile-view > .indeterminate-progress-spinner {
+    position: static;
+    margin: 0;
+}
+
+.recording-profile-view > span {
+    font-family: 'Lucida Grande', Helvetica, sans-serif;
+    font-size: 14px;
+
+    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+    color: rgb(60, 60, 60);
+
+    padding-left: 10px;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
diff --git a/Source/WebInspectorUI/UserInterface/ProfileView.js b/Source/WebInspectorUI/UserInterface/ProfileView.js
new file mode 100644
index 000000000..25e04e623
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ProfileView.js
@@ -0,0 +1,109 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProfileView = function(profile, settingId)
+{
+    WebInspector.ContentView.call(this, profile);
+
+    this._profile = profile;
+
+    this.element.classList.add("profile-view");
+
+    this.showTimeAsPercent = new WebInspector.Setting(settingId, true);
+    this.showTimeAsPercentNavigationItem = new WebInspector.ActivateButtonNavigationItem("selector-profiler-show-time-as-percent-navigation-item", WebInspector.UIString("Show times as percentages"), WebInspector.UIString("Show times as absolute times"), "Images/Percent.pdf", 16, 16);
+    this.showTimeAsPercentNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this.toggleTimeDisplay, this);
+    this.showTimeAsPercentNavigationItem.activated = this.showTimeAsPercent.value;
+
+    if (profile.recording) {
+        this._showRecordingMessage();
+        profile.addEventListener(WebInspector.ProfileObject.Event.FinshedRecording, this._profileFinishedRecording, this);
+    } else
+        this.displayProfile();
+};
+
+WebInspector.ProfileView.prototype = {
+    constructor: WebInspector.ProfileView,
+
+    // Public
+
+    get navigationItems()
+    {
+        return [this.showTimeAsPercentNavigationItem];
+    },
+
+    get allowedNavigationSidebarPanels()
+    {
+        return ["instrument"];
+    },
+
+    get profile()
+    {
+        return this._profile;
+    },
+
+    set profile(profile)
+    {
+        this._profile = profile;
+    },
+    
+    toggleTimeDisplay: function(event)
+    {
+        this.showTimeAsPercentNavigationItem.activated = !this.showTimeAsPercentNavigationItem.activated;
+    },
+
+    displayProfile: function()
+    {
+        // Implemented by subclasses.
+    },
+
+    get recordingTitle()
+    {
+        return WebInspector.UIString("Recording\u2026");
+    },
+    
+    // Private
+    
+    _profileFinishedRecording: function()
+    {
+        this._hideRecordingMessage();
+        this.displayProfile();
+    },
+    
+    _showRecordingMessage: function()
+    {
+        this._recordingMessageContainer = this.element.appendChild(document.createElement("div"));
+        this._recordingMessageContainer.className = "recording-profile-view";
+        this._recordingMessageContainer.appendChild(new WebInspector.IndeterminateProgressSpinner().element);
+        this._recordingMessageContainer.appendChild(document.createElement("span")).textContent = this.recordingTitle;
+    },
+    
+    _hideRecordingMessage: function()
+    {
+        if (this._recordingMessageContainer)
+            this._recordingMessageContainer.remove();
+    }
+};
+
+WebInspector.ProfileView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ProfilerObserver.js b/Source/WebInspectorUI/UserInterface/ProfilerObserver.js
new file mode 100644
index 000000000..0e0fea060
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ProfilerObserver.js
@@ -0,0 +1,68 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProfilerObserver = function()
+{
+    WebInspector.Object.call(this);
+};
+
+WebInspector.ProfilerObserver.prototype = {
+    constructor: WebInspector.ProfilerObserver,
+
+    // Events defined by the "Profiler" domain (see WebCore/inspector/Inspector.json).
+
+    resetProfiles: function()
+    {
+        // FIXME: Implement this.
+    },
+
+    addProfileHeader: function(profile)
+    {
+        WebInspector.profileManager.addJavaScriptProfile(profile);
+    },
+
+    addHeapSnapshotChunk: function(uid, chunk)
+    {
+        // FIXME: Implement this (we need heap snapshots).
+    },
+
+    finishHeapSnapshot: function(uid)
+    {
+        // FIXME: Implement this (we need heap snapshots).
+    },
+
+    setRecordingProfile: function(isProfiling)
+    {
+        WebInspector.profileManager.setRecordingJavaScriptProfile(isProfiling);
+    },
+
+    reportHeapSnapshotProgress: function(done, total)
+    {
+        // FIXME: Implement this (we need heap snapshots).
+    }
+
+};
+
+WebInspector.ProfilerObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/PropertiesSection.js b/Source/WebInspectorUI/UserInterface/PropertiesSection.js
new file mode 100644
index 000000000..c3e89f52b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/PropertiesSection.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.PropertiesSection = function(title, subtitle)
+{
+    this.propertiesElement = document.createElement("ol");
+    this.propertiesElement.className = "properties properties-tree";
+    this.propertiesElement.tabIndex = 0;
+    this.propertiesTreeOutline = new TreeOutline(this.propertiesElement);
+    this.propertiesTreeOutline.section = this;
+
+    WebInspector.Section.call(this, title, subtitle);
+
+    this.element.appendChild(this.propertiesElement);
+}
+
+WebInspector.PropertiesSection.prototype.__proto__ = WebInspector.Section.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/QuickConsole.css b/Source/WebInspectorUI/UserInterface/QuickConsole.css
new file mode 100644
index 000000000..77f1a51c2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/QuickConsole.css
@@ -0,0 +1,79 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.quick-console {
+    position: relative;
+
+    display: -webkit-flex;
+    -webkit-align-items: flex-end;
+
+    background-color: white;
+    border-top: 1px solid rgb(190, 190, 190);
+
+    outline: none;
+    overflow: hidden;
+
+    font-family: Menlo, monospace;
+    font-size: 11px;
+}
+
+.quick-console.showing-log {
+    border-top-color: rgb(240, 240, 240);
+}
+
+.quick-console > .console-prompt {
+    display: -webkit-flex;
+    -webkit-flex: 1;
+
+    -webkit-align-items: flex-start;
+
+    max-height: 150px;
+
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.quick-console > .console-prompt::before {
+    position: relative;
+    z-index: 1;
+
+    top: 5px;
+    left: 4px;
+
+    margin-right: 1px;
+
+    content: url(Images/UserInputPrompt.pdf);
+}
+
+.quick-console > .console-prompt > .CodeMirror {
+    margin: 4px 0 3px;
+}
+
+.quick-console > .navigation-bar {
+    background: transparent;
+    border: none;
+
+    height: 21px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/QuickConsole.js b/Source/WebInspectorUI/UserInterface/QuickConsole.js
new file mode 100644
index 000000000..aba23af74
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/QuickConsole.js
@@ -0,0 +1,352 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.QuickConsole = function(element)
+{
+    WebInspector.Object.call(this);
+
+    this._toggleOrFocusKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape, this._toggleOrFocus.bind(this));
+
+    var mainFrameExecutionContext = new WebInspector.ExecutionContext(WebInspector.QuickConsole.MainFrameContextExecutionIdentifier, WebInspector.UIString("Main Frame"), true, null);
+    this._mainFrameExecutionContextPathComponent = this._createExecutionContextPathComponent(mainFrameExecutionContext.name, mainFrameExecutionContext.identifier);
+    this._selectedExecutionContextPathComponent = this._mainFrameExecutionContextPathComponent;
+
+    this._otherExecutionContextPathComponents = [];
+    this._frameIdentifierToExecutionContextPathComponentMap = {};
+
+    this._element = element || document.createElement("div");
+    this._element.classList.add(WebInspector.QuickConsole.StyleClassName);
+
+    this.prompt = new WebInspector.ConsolePrompt(null, "text/javascript");
+    this.prompt.element.classList.add(WebInspector.QuickConsole.TextPromptStyleClassName);
+    this._element.appendChild(this.prompt.element);
+
+    this.prompt.shown();
+
+    this._navigationBar = new WebInspector.QuickConsoleNavigationBar;
+    this._element.appendChild(this._navigationBar.element);
+
+    this._executionContextSelectorItem = new WebInspector.HierarchicalPathNavigationItem;
+    this._executionContextSelectorItem.showSelectorArrows = true;
+    this._navigationBar.addNavigationItem(this._executionContextSelectorItem);
+
+    this._executionContextSelectorDivider = new WebInspector.DividerNavigationItem;
+    this._navigationBar.addNavigationItem(this._executionContextSelectorDivider);
+
+    this._rebuildExecutionContextPathComponents();
+
+    // COMPATIBILITY (iOS 6): Execution contexts did not exist, evaluation worked with frame ids.
+    if (WebInspector.ExecutionContext.supported()) {
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.PageExecutionContextChanged, this._framePageExecutionContextsChanged, this);
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ExecutionContextsCleared, this._frameExecutionContextsCleared, this);
+    } else {
+        WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasAdded, this._frameAdded, this);
+        WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasRemoved, this._frameRemoved, this);
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._frameMainResourceChanged, this);
+    }
+
+    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._debuggerActiveCallFrameDidChange, this);
+};
+
+WebInspector.QuickConsole.StyleClassName = "quick-console";
+WebInspector.QuickConsole.ShowingLogClassName = "showing-log";
+WebInspector.QuickConsole.NavigationBarContainerStyleClassName = "navigation-bar-container";
+WebInspector.QuickConsole.NavigationBarSpacerStyleClassName = "navigation-bar-spacer";
+WebInspector.QuickConsole.TextPromptStyleClassName = "text-prompt";
+
+WebInspector.QuickConsole.ToolbarSingleLineHeight = 21;
+WebInspector.QuickConsole.ToolbarPromptPadding = 4;
+WebInspector.QuickConsole.ToolbarTopBorder = 1;
+
+WebInspector.QuickConsole.MainFrameContextExecutionIdentifier = undefined;
+
+WebInspector.QuickConsole.Event = {
+    DidResize: "quick-console-did-resize"
+};
+
+WebInspector.QuickConsole.prototype = {
+    constructor: WebInspector.QuickConsole,
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get navigationBar()
+    {
+        return this._navigationBar;
+    },
+
+    get executionContextIdentifier()
+    {
+        return this._selectedExecutionContextPathComponent._executionContextIdentifier;
+    },
+
+    updateLayout: function()
+    {
+        // A hard maximum size of 33% of the window.
+        const maximumAllowedHeight = Math.round(window.innerHeight * 0.33);
+        this.prompt.element.style.maxHeight = maximumAllowedHeight + "px";
+    },
+
+    consoleLogVisibilityChanged: function(visible)
+    {
+        if (visible)
+            this.element.classList.add(WebInspector.QuickConsole.ShowingLogClassName);
+        else
+            this.element.classList.remove(WebInspector.QuickConsole.ShowingLogClassName);
+
+        this.dispatchEventToListeners(WebInspector.QuickConsole.Event.DidResize);
+    },
+
+    // Private
+
+    _executionContextPathComponentsToDisplay: function()
+    {
+        // If we are in the debugger the console will use the active call frame, don't show the selector.
+        if (WebInspector.debuggerManager.activeCallFrame)
+            return [];
+
+        // If there is only the Main Frame, don't show the selector.
+        if (!this._otherExecutionContextPathComponents.length)
+            return [];
+
+        return [this._selectedExecutionContextPathComponent];
+    },
+
+    _rebuildExecutionContextPathComponents: function()
+    {
+        var components = this._executionContextPathComponentsToDisplay();
+        var isEmpty = !components.length;
+
+        this._executionContextSelectorItem.components = components;
+
+        this._executionContextSelectorItem.hidden = isEmpty;
+        this._executionContextSelectorDivider.hidden = isEmpty;
+    },
+
+    _framePageExecutionContextsChanged: function(event)
+    {
+        var frame = event.target;
+
+        var shouldAutomaticallySelect = this._restoreSelectedExecutionContextForFrame === frame;
+
+        var newExecutionContextPathComponent = this._insertExecutionContextPathComponentForFrame(frame, shouldAutomaticallySelect);
+
+        if (shouldAutomaticallySelect) {
+            delete this._restoreSelectedExecutionContextForFrame;
+            this._selectedExecutionContextPathComponent = newExecutionContextPathComponent;
+            this._rebuildExecutionContextPathComponents();
+        }
+    },
+
+    _frameExecutionContextsCleared: function(event)
+    {
+        var frame = event.target;
+
+        // If this frame is navigating and it is selected in the UI we want to reselect its new item after navigation.
+        if (event.data.committingProvisionalLoad && !this._restoreSelectedExecutionContextForFrame) {
+            var executionContextPathComponent = this._frameIdentifierToExecutionContextPathComponentMap[frame.id];
+            if (this._selectedExecutionContextPathComponent === executionContextPathComponent) {
+                this._restoreSelectedExecutionContextForFrame = frame;
+                // As a fail safe, if the frame never gets an execution context, clear the restore value.
+                setTimeout(function() { delete this._restoreSelectedExecutionContextForFrame; }.bind(this), 10);
+            }
+        }
+
+        this._removeExecutionContextPathComponentForFrame(frame);
+    },
+
+    _frameAdded: function(event)
+    {
+        var frame = event.data.frame;
+        this._insertExecutionContextPathComponentForFrame(frame);
+    },
+
+    _frameRemoved: function(event)
+    {
+        var frame = event.data.frame;
+        this._removeExecutionContextPathComponentForFrame(frame);
+    },
+
+    _frameMainResourceChanged: function(event)
+    {
+        var frame = event.target;
+        this._updateExecutionContextPathComponentForFrame(frame);
+    },
+
+    _createExecutionContextPathComponent: function(name, identifier)
+    {
+        var pathComponent = new WebInspector.HierarchicalPathComponent(name, "execution-context", identifier, true, true);
+        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
+        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.Clicked, this._pathComponentClicked, this);
+        pathComponent.truncatedDisplayNameLength = 50;
+        pathComponent._executionContextIdentifier = identifier;
+        return pathComponent;
+    },
+
+    _createExecutionContextPathComponentFromFrame: function(frame)
+    {
+        var name = frame.name ? frame.name + " \u2014 " + frame.mainResource.displayName : frame.mainResource.displayName;
+        var identifier = WebInspector.ExecutionContext.supported() ? frame.pageExecutionContext.id : frame.id;
+
+        var pathComponent = this._createExecutionContextPathComponent(name, identifier);
+        pathComponent._frame = frame;
+
+        return pathComponent;
+    },
+
+    _compareExecutionContextPathComponents: function(a, b)
+    {
+        // "Main Frame" always on top.
+        if (!a._frame)
+            return -1;
+        if (!b._frame)
+            return 1;
+
+        // Frames with a name above frames without a name.
+        if (a._frame.name && !b._frame.name)
+            return -1;
+        if (!a._frame.name && b._frame.name)
+            return 1;
+
+        return a.displayName.localeCompare(b.displayName);
+    },
+
+    _insertExecutionContextPathComponentForFrame: function(frame, skipRebuild)
+    {
+        if (frame.isMainFrame())
+            return;
+
+        console.assert(!this._frameIdentifierToExecutionContextPathComponentMap[frame.id]);
+        if (this._frameIdentifierToExecutionContextPathComponentMap[frame.id])
+            return;
+
+        var executionContextPathComponent = this._createExecutionContextPathComponentFromFrame(frame);
+
+        var index = insertionIndexForObjectInListSortedByFunction(executionContextPathComponent, this._otherExecutionContextPathComponents, this._compareExecutionContextPathComponents);
+
+        var prev = index > 0 ? this._otherExecutionContextPathComponents[index - 1] : this._mainFrameExecutionContextPathComponent;
+        var next = this._otherExecutionContextPathComponents[index] || null;
+        if (prev) {
+            prev.nextSibling = executionContextPathComponent;
+            executionContextPathComponent.previousSibling = prev;
+        }
+        if (next) {
+            next.previousSibling = executionContextPathComponent;
+            executionContextPathComponent.nextSibling = next;
+        }
+
+        this._otherExecutionContextPathComponents.splice(index, 0, executionContextPathComponent);
+        this._frameIdentifierToExecutionContextPathComponentMap[frame.id] = executionContextPathComponent;
+
+        if (!skipRebuild)
+            this._rebuildExecutionContextPathComponents();
+
+        return executionContextPathComponent;
+    },
+
+    _removeExecutionContextPathComponentForFrame: function(frame, skipRebuild)
+    {
+        if (frame.isMainFrame())
+            return;
+
+        var executionContextPathComponent = this._frameIdentifierToExecutionContextPathComponentMap[frame.id];
+        console.assert(executionContextPathComponent);
+        if (!executionContextPathComponent)
+            return;
+
+        executionContextPathComponent.removeEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
+        executionContextPathComponent.removeEventListener(WebInspector.HierarchicalPathComponent.Event.Clicked, this._pathComponentClicked, this);
+
+        var prev = executionContextPathComponent.previousSibling;
+        var next = executionContextPathComponent.nextSibling;
+        if (prev)
+            prev.nextSibling = next;
+        if (next)
+            next.previousSibling = prev;
+
+        if (this._selectedExecutionContextPathComponent === executionContextPathComponent)
+            this._selectedExecutionContextPathComponent = this._mainFrameExecutionContextPathComponent;
+
+        this._otherExecutionContextPathComponents.remove(executionContextPathComponent, true);
+        delete this._frameIdentifierToExecutionContextPathComponentMap[frame.id];
+
+        if (!skipRebuild)
+            this._rebuildExecutionContextPathComponents();
+    },
+
+    _updateExecutionContextPathComponentForFrame: function(frame)
+    {
+        if (frame.isMainFrame())
+            return;
+
+        var executionContextPathComponent = this._frameIdentifierToExecutionContextPathComponentMap[frame.id];
+        if (!executionContextPathComponent)
+            return;
+
+        var wasSelected = this._selectedExecutionContextPathComponent === executionContextPathComponent;
+
+        this._removeExecutionContextPathComponentForFrame(frame, true);
+        var newExecutionContextPathComponent = this._insertExecutionContextPathComponentForFrame(frame, true);
+
+        if (wasSelected)
+            this._selectedExecutionContextPathComponent = newExecutionContextPathComponent;
+
+        this._rebuildExecutionContextPathComponents();
+    },
+
+    _pathComponentSelected: function(event)
+    {
+        if (event.data.pathComponent === this._selectedExecutionContextPathComponent)
+            return;
+
+        this._selectedExecutionContextPathComponent = event.data.pathComponent;
+
+        this._rebuildExecutionContextPathComponents();
+    },
+
+    _pathComponentClicked: function(event)
+    {
+        this.prompt.focus();
+    },
+
+    _debuggerActiveCallFrameDidChange: function(event)
+    {
+        this._rebuildExecutionContextPathComponents();
+    },
+
+    _toggleOrFocus: function(event)
+    {
+        if (this.prompt.focused)
+            WebInspector.toggleSplitConsole();
+        else if (!WebInspector.isEditingAnyField() && !WebInspector.isEventTargetAnEditableField(event))
+            this.prompt.focus();
+    }
+};
+
+WebInspector.QuickConsole.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/QuickConsoleNavigationBar.js b/Source/WebInspectorUI/UserInterface/QuickConsoleNavigationBar.js
new file mode 100644
index 000000000..29108e7a9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/QuickConsoleNavigationBar.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.QuickConsoleNavigationBar = function(element, navigationItems)
+{
+    WebInspector.NavigationBar.call(this, element, navigationItems);
+};
+
+WebInspector.QuickConsoleNavigationBar.prototype = {
+    constructor: WebInspector.QuickConsoleNavigationBar,
+
+    get sizesToFit()
+    {
+        return true;
+    },
+
+    addNavigationItem: function(navigationItem)
+    {
+        // Add new navigation items to the left.
+        return this.insertNavigationItem(navigationItem, 0);
+    }
+};
+
+WebInspector.QuickConsoleNavigationBar.prototype.__proto__ = WebInspector.NavigationBar.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.css b/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.css
new file mode 100644
index 000000000..6660361a5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.navigation-bar .item.radio.button:not(.text-only) {
+    width: 32px;
+}
+
+.navigation-bar.collapsed .item.radio.button:not(.text-only) {
+    width: 24px;
+}
+
+.navigation-bar .item.radio.button.text-only.selected {
+    background-repeat: no-repeat;
+    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.09) 12%, rgba(0, 0, 0, 0.06) 12%, transparent), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.45), transparent),
+        -webkit-linear-gradient(top, rgba(0, 0, 0, 0.45), transparent);
+    background-size: 100% 100%, 1px 100%, 1px 100%;
+    background-position: left top, left top, right top;
+
+    font-weight: bold;
+}
diff --git a/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.js
new file mode 100644
index 000000000..ac82d99e1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.js
@@ -0,0 +1,111 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.RadioButtonNavigationItem = function(identifier, toolTip, image, imageWidth, imageHeight) {
+    WebInspector.ButtonNavigationItem.call(this, identifier, toolTip, image, imageWidth, imageHeight, null, "tab");
+};
+
+WebInspector.RadioButtonNavigationItem.StyleClassName = "radio";
+WebInspector.RadioButtonNavigationItem.ActiveStyleClassName = "active";
+WebInspector.RadioButtonNavigationItem.SelectedStyleClassName = "selected";
+
+WebInspector.RadioButtonNavigationItem.prototype = {
+    constructor: WebInspector.RadioButtonNavigationItem,
+
+    // Public
+
+    get selected()
+    {
+        return this.element.classList.contains(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
+    },
+
+    set selected(flag)
+    {
+        if (flag) {
+            this.element.classList.add(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
+            this.element.setAttribute("aria-selected", "true");
+        } else {
+            this.element.classList.remove(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
+            this.element.setAttribute("aria-selected", "false");
+        }
+    },
+
+    get active()
+    {
+        return this.element.classList.contains(WebInspector.RadioButtonNavigationItem.ActiveStyleClassName);
+    },
+
+    set active(flag)
+    {
+        if (flag)
+            this.element.classList.add(WebInspector.RadioButtonNavigationItem.ActiveStyleClassName);
+        else
+            this.element.classList.remove(WebInspector.RadioButtonNavigationItem.ActiveStyleClassName);
+    },
+
+    generateStyleText: function(parentSelector)
+    {
+        var classNames = this._classNames.join(".");
+
+        // Default state.
+        var styleText = parentSelector + " ." + classNames + " > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier() + "); background-size: " +  this._imageWidth + "px " + this._imageHeight + "px; }\n";
+
+        // Selected state.
+        styleText += parentSelector + " ." + classNames + ".selected:not(.disabled) > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Focus) + "); }\n";
+
+        // Selected and pressed state.
+        styleText += parentSelector + " ." + classNames + ".selected:not(.disabled):active > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.ActiveFocus) + "); }\n";
+
+        return styleText;
+    },
+
+    updateLayout: function(expandOnly)
+    {
+        if (expandOnly)
+            return;
+
+        var isSelected = this.selected;
+
+        if (!isSelected) {
+            this.element.classList.add(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
+            this.element.setAttribute("aria-selected", "true");
+        }
+
+        var selectedWidth = this.element.offsetWidth;
+        if (selectedWidth)
+            this.element.style.minWidth = selectedWidth + "px";
+
+        if (!isSelected) {
+            this.element.classList.remove(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
+            this.element.setAttribute("aria-selected", "false");
+        }
+    },
+
+    // Private
+
+    _additionalClassNames: [WebInspector.RadioButtonNavigationItem.StyleClassName, WebInspector.ButtonNavigationItem.StyleClassName],
+};
+
+WebInspector.RadioButtonNavigationItem.prototype.__proto__ = WebInspector.ButtonNavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/RemoteObject.js b/Source/WebInspectorUI/UserInterface/RemoteObject.js
new file mode 100644
index 000000000..9a9a1d304
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/RemoteObject.js
@@ -0,0 +1,492 @@
+/*
+ * Copyright (C) 2009 Google Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ * @param {string|undefined} objectId
+ * @param {string} type
+ * @param {string|undefined} subtype
+ * @param {*} value
+ * @param {string=} description
+ */
+WebInspector.RemoteObject = function(objectId, type, subtype, value, description)
+{
+    this._type = type;
+    this._subtype = subtype;
+    if (objectId) {
+        // handle
+        this._objectId = objectId;
+        this._description = description;
+        this._hasChildren = true;
+    } else {
+        // Primitive or null object.
+        console.assert(type !== "object" || value === null);
+        this._description = description || (value + "");
+        this._hasChildren = false;
+        this.value = value;
+    }
+}
+
+/**
+ * @param {number|string|boolean} value
+ * @return {WebInspector.RemoteObject}
+ */
+WebInspector.RemoteObject.fromPrimitiveValue = function(value)
+{
+    return new WebInspector.RemoteObject(undefined, typeof value, undefined, value);
+}
+
+/**
+ * @param {Object} value
+ * @return {WebInspector.RemoteObject}
+ */
+WebInspector.RemoteObject.fromLocalObject = function(value)
+{
+    return new WebInspector.LocalJSONObject(value);
+}
+
+/**
+ * @param {WebInspector.DOMNode} node
+ * @param {string} objectGroup
+ * @param {function(?WebInspector.RemoteObject)} callback
+ */
+WebInspector.RemoteObject.resolveNode = function(node, objectGroup, callback)
+{
+    /**
+     * @param {?Protocol.Error} error
+     * @param {RuntimeAgent.RemoteObject} object
+     */
+    function mycallback(error, object)
+    {
+        if (!callback)
+            return;
+
+        if (error || !object)
+            callback(null);
+        else
+            callback(WebInspector.RemoteObject.fromPayload(object));
+    }
+    DOMAgent.resolveNode(node.id, objectGroup, mycallback);
+}
+
+/**
+ * @param {RuntimeAgent.RemoteObject} payload
+ * @return {WebInspector.RemoteObject}
+ */
+WebInspector.RemoteObject.fromPayload = function(payload)
+{
+    console.assert(typeof payload === "object", "Remote object payload should only be an object");
+
+    return new WebInspector.RemoteObject(payload.objectId, payload.type, payload.subtype, payload.value, payload.description);
+}
+
+/**
+ * @param {WebInspector.RemoteObject} remoteObject
+ * @return {string}
+ */
+WebInspector.RemoteObject.type = function(remoteObject)
+{
+    if (remoteObject === null)
+        return "null";
+
+    var type = typeof remoteObject;
+    if (type !== "object" && type !== "function")
+        return type;
+
+    return remoteObject.type;
+}
+
+WebInspector.RemoteObject.prototype = {
+    /** @return {RuntimeAgent.RemoteObjectId} */
+    get objectId()
+    {
+        return this._objectId;
+    },
+
+    /** @return {string} */
+    get type()
+    {
+        return this._type;
+    },
+
+    /** @return {string|undefined} */
+    get subtype()
+    {
+        return this._subtype;
+    },
+
+    /** @return {string|undefined} */
+    get description()
+    {
+        return this._description;
+    },
+
+    /** @return {boolean} */
+    get hasChildren()
+    {
+        return this._hasChildren;
+    },
+
+    /**
+     * @param {function(Array.<WebInspector.RemoteObjectProperty>)} callback
+     */
+    getOwnProperties: function(callback)
+    {
+        this._getProperties(true, callback);
+    },
+
+    /**
+     * @param {function(Array.<WebInspector.RemoteObjectProperty>)} callback
+     */
+    getAllProperties: function(callback)
+    {
+        this._getProperties(false, callback);
+    },
+
+    /**
+     * @param {boolean} ownProperties
+     * @param {function(Array.<RuntimeAgent.RemoteObject>)} callback
+     */
+    _getProperties: function(ownProperties, callback)
+    {
+        if (!this._objectId) {
+            callback([]);
+            return;
+        }
+
+        /**
+         * @param {?Protocol.Error} error
+         * @param {Array.<WebInspector.RemoteObjectProperty>} properties
+         */
+        function remoteObjectBinder(error, properties)
+        {
+            if (error) {
+                callback(null);
+                return;
+            }
+            var result = [];
+            for (var i = 0; properties && i < properties.length; ++i) {
+                var property = properties[i];
+                if (property.get || property.set) {
+                    if (property.get)
+                        result.push(new WebInspector.RemoteObjectProperty("get " + property.name, WebInspector.RemoteObject.fromPayload(property.get), property));
+                    if (property.set)
+                        result.push(new WebInspector.RemoteObjectProperty("set " + property.name, WebInspector.RemoteObject.fromPayload(property.set), property));
+                } else
+                    result.push(new WebInspector.RemoteObjectProperty(property.name, WebInspector.RemoteObject.fromPayload(property.value), property));
+            }
+            callback(result);
+        }
+        RuntimeAgent.getProperties(this._objectId, ownProperties, remoteObjectBinder);
+    },
+
+    /**
+     * @param {string} name
+     * @param {string} value
+     * @param {function(string=)} callback
+     */
+    setPropertyValue: function(name, value, callback)
+    {
+        if (!this._objectId) {
+            callback("Can't set a property of non-object.");
+            return;
+        }
+
+        RuntimeAgent.evaluate.invoke({expression:value, doNotPauseOnExceptionsAndMuteConsole:true}, evaluatedCallback.bind(this));
+
+        /**
+         * @param {?Protocol.Error} error
+         * @param {RuntimeAgent.RemoteObject} result
+         * @param {boolean=} wasThrown
+         */
+        function evaluatedCallback(error, result, wasThrown)
+        {
+            if (error || wasThrown) {
+                callback(error || result.description);
+                return;
+            }
+
+            function setPropertyValue(propertyName, propertyValue)
+            {
+                this[propertyName] = propertyValue;
+            }
+
+            delete result.description; // Optimize on traffic.
+            RuntimeAgent.callFunctionOn(this._objectId, setPropertyValue.toString(), [{ value:name }, result], true, undefined, propertySetCallback.bind(this));
+            if (result._objectId)
+                RuntimeAgent.releaseObject(result._objectId);
+        }
+
+        /**
+         * @param {?Protocol.Error} error
+         * @param {RuntimeAgent.RemoteObject} result
+         * @param {boolean=} wasThrown
+         */
+        function propertySetCallback(error, result, wasThrown)
+        {
+            if (error || wasThrown) {
+                callback(error || result.description);
+                return;
+            }
+            callback();
+        }
+    },
+
+    /**
+     * @param {function(DOMAgent.NodeId)} callback
+     */
+    pushNodeToFrontend: function(callback)
+    {
+        if (this._objectId)
+            WebInspector.domTreeManager.pushNodeToFrontend(this._objectId, callback);
+        else
+            callback(0);
+    },
+
+    /**
+     * @param {string} functionDeclaration
+     * @param {function(?WebInspector.RemoteObject)} callback
+     */
+    callFunction: function(functionDeclaration, args, callback)
+    {
+        function mycallback(error, result, wasThrown)
+        {
+            callback((error || wasThrown) ? null : WebInspector.RemoteObject.fromPayload(result));
+        }
+
+        RuntimeAgent.callFunctionOn(this._objectId, functionDeclaration.toString(), args, true, undefined, mycallback);
+    },
+
+    /**
+     * @param {string} functionDeclaration
+     * @param {function(*)} callback
+     */
+    callFunctionJSON: function(functionDeclaration, args, callback)
+    {
+        function mycallback(error, result, wasThrown)
+        {
+            callback((error || wasThrown) ? null : result.value);
+        }
+
+        RuntimeAgent.callFunctionOn(this._objectId, functionDeclaration.toString(), args, true, true, mycallback);
+    },
+
+    release: function()
+    {
+        RuntimeAgent.releaseObject(this._objectId);
+    },
+
+    /**
+     * @return {number}
+     */
+    arrayLength: function()
+    {
+        if (this.subtype !== "array")
+            return 0;
+
+        var matches = this._description.match(/\[([0-9]+)\]/);
+        if (!matches)
+            return 0;
+        return parseInt(matches[1], 10);
+    }
+}
+
+/**
+ * @constructor
+ * @param {string} name
+ * @param {WebInspector.RemoteObject} value 
+ * @param {Object=} descriptor
+ */
+WebInspector.RemoteObjectProperty = function(name, value, descriptor)
+{
+    this.name = name;
+    this.value = value;
+    this.enumerable = descriptor ? !!descriptor.enumerable : true;
+    this.writable = descriptor ? !!descriptor.writable : true;
+    if (descriptor && descriptor.wasThrown)
+        this.wasThrown = true;
+}
+
+/**
+ * @param {string} name
+ * @param {string} value
+ * @return {WebInspector.RemoteObjectProperty}
+ */
+WebInspector.RemoteObjectProperty.fromPrimitiveValue = function(name, value)
+{
+    return new WebInspector.RemoteObjectProperty(name, WebInspector.RemoteObject.fromPrimitiveValue(value));
+}
+
+// The below is a wrapper around a local object that provides an interface comaptible
+// with RemoteObject, to be used by the UI code (primarily ObjectPropertiesSection).
+// Note that only JSON-compliant objects are currently supported, as there's no provision
+// for traversing prototypes, extracting class names via constuctor, handling properties
+// or functions.
+
+/**
+ * @constructor
+ * @extends {WebInspector.RemoteObject}
+ * @param {Object} value
+ */
+WebInspector.LocalJSONObject = function(value)
+{
+    this._value = value;
+}
+
+WebInspector.LocalJSONObject.prototype = {
+    /**
+     * @return {string}
+     */
+    get description()
+    {
+        if (this._cachedDescription)
+            return this._cachedDescription;
+
+        if (this.type === "object") {
+            switch (this.subtype) {
+            case "array":
+                function formatArrayItem(property)
+                {
+                    return property.value.description;
+                }
+                this._cachedDescription = this._concatenate("[", "]", formatArrayItem);
+                break;
+            case "null":
+                this._cachedDescription = "null";
+                break;
+            default:
+                function formatObjectItem(property)
+                {
+                    return property.name + ":" + property.value.description;
+                }
+                this._cachedDescription = this._concatenate("{", "}", formatObjectItem);
+            }
+        } else
+            this._cachedDescription = String(this._value);
+
+        return this._cachedDescription;
+    },
+
+    /**
+     * @param {string} prefix
+     * @param {string} suffix
+     * @return {string}
+     */
+    _concatenate: function(prefix, suffix, formatProperty)
+    {
+        const previewChars = 100;
+
+        var buffer = prefix;
+        var children = this._children();
+        for (var i = 0; i < children.length; ++i) {
+            var itemDescription = formatProperty(children[i]);
+            if (buffer.length + itemDescription.length > previewChars) {
+                buffer += ",\u2026";
+                break;
+            }
+            if (i)
+                buffer += ", ";
+            buffer += itemDescription;
+        }
+        buffer += suffix;
+        return buffer;
+    },
+
+    /**
+     * @return {string}
+     */
+    get type()
+    {
+        return typeof this._value;
+    },
+
+    /**
+     * @return {string|undefined}
+     */
+    get subtype()
+    {
+        if (this._value === null)
+            return "null";
+
+        if (this._value instanceof Array)
+            return "array";
+
+        return undefined;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    get hasChildren()
+    {
+        return typeof this._value === "object" && this._value !== null && !isEmptyObject(this._value);
+    },
+
+    /**
+     * @param {function(Array.<WebInspector.RemoteObjectProperty>)} callback
+     */
+    getOwnProperties: function(callback)
+    {
+        callback(this._children());
+    },
+
+    /**
+     * @param {function(Array.<WebInspector.RemoteObjectProperty>)} callback
+     */
+    getAllProperties: function(callback)
+    {
+        callback(this._children());
+    },
+
+    /**
+     * @return {Array.<WebInspector.RemoteObjectProperty>}
+     */
+    _children: function()
+    {
+        if (!this.hasChildren)
+            return [];
+
+        function buildProperty(propName)
+        {
+            return new WebInspector.RemoteObjectProperty(propName, new WebInspector.LocalJSONObject(this._value[propName]));
+        }
+        if (!this._cachedChildren)
+            this._cachedChildren = Object.keys(this._value || {}).map(buildProperty.bind(this));
+        return this._cachedChildren;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    isError: function()
+    {
+        return false;
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Resource.js b/Source/WebInspectorUI/UserInterface/Resource.js
new file mode 100644
index 000000000..603e362ab
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Resource.js
@@ -0,0 +1,655 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Resource = function(url, mimeType, type, loaderIdentifier, requestIdentifier, requestMethod, requestHeaders, requestData, requestSentTimestamp)
+{
+    WebInspector.SourceCode.call(this);
+
+    console.assert(url);
+
+    if (type in WebInspector.Resource.Type)
+        type = WebInspector.Resource.Type[type];
+
+    this._url = url;
+    this._mimeType = mimeType;
+    this._type = type || WebInspector.Resource.Type.fromMIMEType(mimeType);
+    this._loaderIdentifier = loaderIdentifier || null;
+    this._requestIdentifier = requestIdentifier || null;
+    this._requestMethod = requestMethod || null;
+    this._requestData = requestData || null;
+    this._requestHeaders = requestHeaders || {};
+    this._responseHeaders = {};
+    this._parentFrame = null;
+    this._requestSentTimestamp = requestSentTimestamp || NaN;
+    this._responseReceivedTimestamp = NaN;
+    this._lastRedirectReceivedTimestamp = NaN;
+    this._lastDataReceivedTimestamp = NaN;
+    this._finishedOrFailedTimestamp = NaN;
+    this._size = NaN;
+    this._transferSize = NaN;
+    this._cached = false;
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.Resource);
+
+WebInspector.Resource.Event = {
+    URLDidChange: "resource-url-did-change",
+    MIMETypeDidChange: "resource-mime-type-did-change",
+    TypeDidChange: "resource-type-did-change",
+    RequestHeadersDidChange: "resource-request-headers-did-change",
+    ResponseReceived: "resource-response-received",
+    LoadingDidFinish: "resource-loading-did-finish",
+    LoadingDidFail: "resource-loading-did-fail",
+    TimestampsDidChange: "resource-timestamps-did-change",
+    SizeDidChange: "resource-size-did-change",
+    TransferSizeDidChange: "resource-transfer-size-did-change",
+    CacheStatusDidChange: "resource-cached-did-change"
+};
+
+// Keep these in sync with the "ResourceType" enum defined by the "Page" domain (see WebCore/inspector/Inspector.json).
+WebInspector.Resource.Type = {
+    Document: "resource-type-document",
+    Stylesheet: "resource-type-stylesheet",
+    Image: "resource-type-image",
+    Font: "resource-type-font",
+    Script: "resource-type-script",
+    XHR: "resource-type-xhr",
+    WebSocket: "resource-type-websocket",
+    Other: "resource-type-other"
+};
+
+// This MIME Type map is private, use WebInspector.Resource.Type.fromMIMEType().
+WebInspector.Resource.Type._mimeTypeMap = {
+    "text/html": WebInspector.Resource.Type.Document,
+    "text/xml": WebInspector.Resource.Type.Document,
+    "text/plain": WebInspector.Resource.Type.Document,
+    "application/xhtml+xml": WebInspector.Resource.Type.Document,
+    "image/svg+xml": WebInspector.Resource.Type.Document,
+
+    "text/css": WebInspector.Resource.Type.Stylesheet,
+    "text/xsl": WebInspector.Resource.Type.Stylesheet,
+    "text/x-less": WebInspector.Resource.Type.Stylesheet,
+    "text/x-sass": WebInspector.Resource.Type.Stylesheet,
+    "text/x-scss": WebInspector.Resource.Type.Stylesheet,
+
+    "application/pdf": WebInspector.Resource.Type.Image,
+
+    "application/x-font-type1": WebInspector.Resource.Type.Font,
+    "application/x-font-ttf": WebInspector.Resource.Type.Font,
+    "application/x-font-woff": WebInspector.Resource.Type.Font,
+    "application/x-truetype-font": WebInspector.Resource.Type.Font,
+
+    "text/javascript": WebInspector.Resource.Type.Script,
+    "text/ecmascript": WebInspector.Resource.Type.Script,
+    "application/javascript": WebInspector.Resource.Type.Script,
+    "application/ecmascript": WebInspector.Resource.Type.Script,
+    "application/x-javascript": WebInspector.Resource.Type.Script,
+    "application/json": WebInspector.Resource.Type.Script,
+    "application/x-json": WebInspector.Resource.Type.Script,
+    "text/x-javascript": WebInspector.Resource.Type.Script,
+    "text/x-json": WebInspector.Resource.Type.Script,
+    "text/javascript1.1": WebInspector.Resource.Type.Script,
+    "text/javascript1.2": WebInspector.Resource.Type.Script,
+    "text/javascript1.3": WebInspector.Resource.Type.Script,
+    "text/jscript": WebInspector.Resource.Type.Script,
+    "text/livescript": WebInspector.Resource.Type.Script,
+    "text/x-livescript": WebInspector.Resource.Type.Script,
+    "text/typescript": WebInspector.Resource.Type.Script,
+    "text/x-clojure": WebInspector.Resource.Type.Script,
+    "text/x-coffeescript": WebInspector.Resource.Type.Script
+};
+
+WebInspector.Resource.Type.fromMIMEType = function(mimeType)
+{
+    if (!mimeType)
+        return WebInspector.Resource.Type.Other;
+
+    if (mimeType in WebInspector.Resource.Type._mimeTypeMap)
+        return WebInspector.Resource.Type._mimeTypeMap[mimeType];
+
+    if (mimeType.startsWith("image/"))
+        return WebInspector.Resource.Type.Image;
+
+    if (mimeType.startsWith("font/"))
+        return WebInspector.Resource.Type.Font;
+
+    return WebInspector.Resource.Type.Other;
+};
+
+WebInspector.Resource.Type.displayName = function(type, plural)
+{
+    switch(type) {
+    case WebInspector.Resource.Type.Document:
+        if (plural)
+            return WebInspector.UIString("Documents");
+        return WebInspector.UIString("Document");
+    case WebInspector.Resource.Type.Stylesheet:
+        if (plural)
+            return WebInspector.UIString("Stylesheets");
+        return WebInspector.UIString("Stylesheet");
+    case WebInspector.Resource.Type.Image:
+        if (plural)
+            return WebInspector.UIString("Images");
+        return WebInspector.UIString("Image");
+    case WebInspector.Resource.Type.Font:
+        if (plural)
+            return WebInspector.UIString("Fonts");
+        return WebInspector.UIString("Font");
+    case WebInspector.Resource.Type.Script:
+        if (plural)
+            return WebInspector.UIString("Scripts");
+        return WebInspector.UIString("Script");
+    case WebInspector.Resource.Type.XHR:
+        if (plural)
+            return WebInspector.UIString("XHRs");
+        return WebInspector.UIString("XHR");
+    case WebInspector.Resource.Type.WebSocket:
+        if (plural)
+            return WebInspector.UIString("Sockets");
+        return WebInspector.UIString("Socket");
+    case WebInspector.Resource.Type.Other:
+        return WebInspector.UIString("Other");
+    default:
+        console.error("Unknown resource type: ", type);
+        return null;
+    }
+};
+
+WebInspector.Resource.prototype = {
+    constructor: WebInspector.Resource,
+
+    // Public
+
+    get url()
+    {
+        return this._url;
+    },
+
+    get urlComponents()
+    {
+        if (!this._urlComponents)
+            this._urlComponents = parseURL(this._url);
+        return this._urlComponents;
+    },
+
+    get displayName()
+    {
+        return WebInspector.displayNameForURL(this._url, this.urlComponents);
+    },
+
+    get type()
+    {
+        return this._type;
+    },
+
+    get mimeType()
+    {
+        return this._mimeType;
+    },
+
+    get syntheticMIMEType()
+    {
+        // Resources are often transferred with a MIME-type that doesn't match the purpose the
+        // resource was loaded for, which is what WebInspector.Resource.Type represents.
+        // This getter generates a MIME-type, if needed, that matches the resource type.
+
+        // If the type matches the Resource.Type of the MIME-type, then return the actual MIME-type.
+        if (this._type === WebInspector.Resource.Type.fromMIMEType(this._mimeType))
+            return this._mimeType;
+
+        // Return the default MIME-types for the Resource.Type, since the current MIME-type
+        // does not match what is expected for the Resource.Type.
+        switch (this._type) {
+        case WebInspector.Resource.Type.Document:
+            return "text/html";
+        case WebInspector.Resource.Type.Stylesheet:
+            return "text/css";
+        case WebInspector.Resource.Type.Script:
+            return "text/javascript";
+        }
+
+        // Return the actual MIME-type since we don't have a better synthesized one to return.
+        return this._mimeType;
+    },
+
+    get contentURL()
+    {
+        const maximumDataURLSize = 1024 * 1024; // 1 MiB
+
+        // If content is not available or won't fit a data URL, fallback to using original URL.
+        var content = this.content;
+        if (content === null || content.length > maximumDataURLSize)
+            return this._url;
+
+        return "data:" + this._mimeType + (this.contentIsBase64Encoded ? ";base64," + content : "," + encodeURIComponent(content));
+    },
+
+    isMainResource: function()
+    {
+        return this._parentFrame ? this._parentFrame.mainResource === this : false;
+    },
+
+    get parentFrame()
+    {
+        return this._parentFrame;
+    },
+
+    get loaderIdentifier()
+    {
+        return this._loaderIdentifier;
+    },
+
+    get requestIdentifier()
+    {
+        return this._requestIdentifier;
+    },
+
+    get finished()
+    {
+        return this._finished;
+    },
+
+    get failed()
+    {
+        return this._failed;
+    },
+
+    get canceled()
+    {
+        return this._canceled;
+    },
+
+    get requestMethod()
+    {
+        return this._requestMethod;
+    },
+
+    get requestData()
+    {
+        return this._requestData;
+    },
+
+    get requestDataContentType()
+    {
+        return this._requestHeaders.valueForCaseInsensitiveKey("Content-Type") || null;
+    },
+
+    get requestHeaders()
+    {
+        return this._requestHeaders;
+    },
+
+    get responseHeaders()
+    {
+        return this._responseHeaders;
+    },
+
+    get requestSentTimestamp()
+    {
+        return this._requestSentTimestamp;
+    },
+
+    get lastRedirectReceivedTimestamp()
+    {
+        return this._lastRedirectReceivedTimestamp;
+    },
+
+    get responseReceivedTimestamp()
+    {
+        return this._responseReceivedTimestamp;
+    },
+
+    get lastDataReceivedTimestamp()
+    {
+        return this._lastDataReceivedTimestamp;
+    },
+
+    get finishedOrFailedTimestamp()
+    {
+        return this._finishedOrFailedTimestamp;
+    },
+
+    get firstTimestamp()
+    {
+        return this.requestSentTimestamp || this.lastRedirectReceivedTimestamp || this.responseReceivedTimestamp || this.lastDataReceivedTimestamp || this.finishedOrFailedTimestamp;
+    },
+
+    get lastTimestamp()
+    {
+        return this.finishedOrFailedTimestamp || this.lastDataReceivedTimestamp || this.responseReceivedTimestamp || this.lastRedirectReceivedTimestamp || this.requestSentTimestamp;
+    },
+
+    get duration()
+    {
+        return this._finishedOrFailedTimestamp - this._requestSentTimestamp;
+    },
+
+    get latency()
+    {
+        return this._responseReceivedTimestamp - this._requestSentTimestamp;
+    },
+
+    get receiveDuration()
+    {
+        return this._finishedOrFailedTimestamp - this._responseReceivedTimestamp;
+    },
+
+    get cached()
+    {
+        return this._cached;
+    },
+
+    get statusCode()
+    {
+        return this._statusCode;
+    },
+
+    get statusText()
+    {
+        return this._statusText;
+    },
+
+    get size()
+    {
+        return this._size;
+    },
+
+    get encodedSize()
+    {
+        if (!isNaN(this._transferSize))
+            return this._transferSize;
+
+        // If we did not receive actual transfer size from network
+        // stack, we prefer using Content-Length over resourceSize as
+        // resourceSize may differ from actual transfer size if platform's
+        // network stack performed decoding (e.g. gzip decompression).
+        // The Content-Length, though, is expected to come from raw
+        // response headers and will reflect actual transfer length.
+        // This won't work for chunked content encoding, so fall back to
+        // resourceSize when we don't have Content-Length. This still won't
+        // work for chunks with non-trivial encodings. We need a way to
+        // get actual transfer size from the network stack.
+
+        return Number(this._responseHeaders.valueForCaseInsensitiveKey("Content-Length") || this._size);
+    },
+
+    get transferSize()
+    {
+        if (this.statusCode === 304) // Not modified
+            return this._responseHeadersSize;
+
+        if (this._cached)
+            return 0;
+
+        return this._responseHeadersSize + this.encodedSize;
+    },
+
+    get compressed()
+    {
+        var contentEncoding = this._responseHeaders.valueForCaseInsensitiveKey("Content-Encoding");
+        return contentEncoding && /\b(?:gzip|deflate)\b/.test(contentEncoding);
+    },
+
+    get scripts()
+    {
+        return this._scripts || [];
+    },
+
+    updateForRedirectResponse: function(url, requestHeaders, timestamp)
+    {
+        console.assert(!this._finished);
+        console.assert(!this._failed);
+        console.assert(!this._canceled);
+
+        var oldURL = this._url;
+
+        this._url = url;
+        this._requestHeaders = requestHeaders || {};
+        this._lastRedirectReceivedTimestamp = timestamp || NaN;
+
+        if (oldURL !== url) {
+            // Delete the URL components so the URL is re-parsed the next time it is requested.
+            delete this._urlComponents;
+
+            this.dispatchEventToListeners(WebInspector.Resource.Event.URLDidChange, {oldURL: oldURL});
+        }
+
+        this.dispatchEventToListeners(WebInspector.Resource.Event.RequestHeadersDidChange);
+        this.dispatchEventToListeners(WebInspector.Resource.Event.TimestampsDidChange);
+    },
+
+    updateForResponse: function(url, mimeType, type, responseHeaders, statusCode, statusText, timestamp)
+    {
+        console.assert(!this._finished);
+        console.assert(!this._failed);
+        console.assert(!this._canceled);
+
+        var oldURL = this._url;
+        var oldMIMEType = this._mimeType;
+        var oldType = this._type;
+
+        if (type in WebInspector.Resource.Type)
+            type = WebInspector.Resource.Type[type];
+
+        this._url = url;
+        this._mimeType = mimeType;
+        this._type = type || WebInspector.Resource.Type.fromMIMEType(mimeType);
+        this._statusCode = statusCode;
+        this._statusText = statusText;
+        this._responseHeaders = responseHeaders || {};
+        this._responseReceivedTimestamp = timestamp || NaN;
+
+        this._responseHeadersSize = String(this._statusCode).length + this._statusText.length + 12; // Extra length is for "HTTP/1.1 ", " ", and "\r\n".
+        for (var name in this._responseHeaders)
+            this._responseHeadersSize += name.length + this._responseHeaders[name].length + 4; // Extra length is for ": ", and "\r\n".
+
+        if (statusCode === 304 && !this._cached)
+            this.markAsCached();
+
+        if (oldURL !== url) {
+            // Delete the URL components so the URL is re-parsed the next time it is requested.
+            delete this._urlComponents;
+
+            this.dispatchEventToListeners(WebInspector.Resource.Event.URLDidChange, {oldURL: oldURL});
+        }
+
+        if (oldMIMEType !== mimeType)
+            this.dispatchEventToListeners(WebInspector.Resource.Event.MIMETypeDidChange, {oldMIMEType: oldMIMEType});
+
+        if (oldType !== type)
+            this.dispatchEventToListeners(WebInspector.Resource.Event.TypeDidChange, {oldType: oldType});
+
+        console.assert(isNaN(this._size));
+        console.assert(isNaN(this._transferSize));
+
+        // The transferSize becomes 0 when status is 304 or Content-Length is available, so
+        // notify listeners of that change.
+        if (statusCode === 304 || this._responseHeaders.valueForCaseInsensitiveKey("Content-Length"))
+            this.dispatchEventToListeners(WebInspector.Resource.Event.TransferSizeDidChange);
+
+        this.dispatchEventToListeners(WebInspector.Resource.Event.ResponseReceived);
+        this.dispatchEventToListeners(WebInspector.Resource.Event.TimestampsDidChange);
+    },
+
+    canRequestContentFromBackend: function()
+    {
+        return this._finished;
+    },
+
+    requestContentFromBackend: function(callback)
+    {
+        // If we have the requestIdentifier we can get the actual response for this specific resource.
+        // Otherwise the content will be cached resource data, which might not exist anymore.
+        if (this._requestIdentifier) {
+            NetworkAgent.getResponseBody(this._requestIdentifier, callback);
+            return true;
+        }
+
+        if (this._parentFrame) {
+            PageAgent.getResourceContent(this._parentFrame.id, this._url, callback);
+            return true;
+        }
+
+        // There is no request identifier or frame to request content from. Return false to cause the
+        // pending callbacks to get null content.
+        return false;
+    },
+
+    increaseSize: function(dataLength, timestamp)
+    {
+        console.assert(dataLength >= 0);
+
+        if (isNaN(this._size))
+            this._size = 0;
+
+        var previousSize = this._size;
+
+        this._size += dataLength;
+
+        this._lastDataReceivedTimestamp = timestamp || NaN;
+
+        this.dispatchEventToListeners(WebInspector.Resource.Event.SizeDidChange, {previousSize: previousSize});
+
+        // The transferSize is based off of size when status is not 304 or Content-Length is missing.
+        if (isNaN(this._transferSize) && this._statusCode !== 304 && !this._responseHeaders.valueForCaseInsensitiveKey("Content-Length"))
+            this.dispatchEventToListeners(WebInspector.Resource.Event.TransferSizeDidChange);
+    },
+
+    increaseTransferSize: function(encodedDataLength)
+    {
+        console.assert(encodedDataLength >= 0);
+
+        if (isNaN(this._transferSize))
+            this._transferSize = 0;
+        this._transferSize += encodedDataLength;
+
+        this.dispatchEventToListeners(WebInspector.Resource.Event.TransferSizeDidChange);
+    },
+
+    markAsCached: function()
+    {
+        this._cached = true;
+
+        this.dispatchEventToListeners(WebInspector.Resource.Event.CacheStatusDidChange);
+
+        // The transferSize is starts returning 0 when cached is true, unless status is 304.
+        if (this._statusCode !== 304)
+            this.dispatchEventToListeners(WebInspector.Resource.Event.TransferSizeDidChange);
+    },
+
+    markAsFinished: function(timestamp)
+    {
+        console.assert(!this._failed);
+        console.assert(!this._canceled);
+
+        this._finished = true;
+        this._finishedOrFailedTimestamp = timestamp || NaN;
+
+        this.dispatchEventToListeners(WebInspector.Resource.Event.LoadingDidFinish);
+        this.dispatchEventToListeners(WebInspector.Resource.Event.TimestampsDidChange);
+
+        if (this.canRequestContentFromBackend())
+            this.requestContentFromBackendIfNeeded();
+    },
+
+    markAsFailed: function(canceled, timestamp)
+    {
+        console.assert(!this._finished);
+
+        this._failed = true;
+        this._canceled = canceled;
+        this._finishedOrFailedTimestamp = timestamp || NaN;
+
+        this.dispatchEventToListeners(WebInspector.Resource.Event.LoadingDidFail);
+        this.dispatchEventToListeners(WebInspector.Resource.Event.TimestampsDidChange);
+
+        // Force the content requests to be serviced. They will get null as the content.
+        this.servicePendingContentRequests(true);
+    },
+
+    revertMarkAsFinished: function(timestamp)
+    {
+        console.assert(!this._failed);
+        console.assert(!this._canceled);
+        console.assert(this._finished);
+
+        this._finished = false;
+        this._finishedOrFailedTimestamp = NaN;
+    },
+
+    getImageSize: function(callback)
+    {
+        // Throw an error in the case this resource is not an image.
+        if (this.type !== WebInspector.Resource.Type.Image)
+            throw "Resource is not an image.";
+
+        // See if we've already computed and cached the image size,
+        // in which case we can provide them directly.
+        if (this._imageSize) {
+            callback(this._imageSize);
+            return;
+        }
+
+        // Event handler for the image "load" event.
+        function imageDidLoad()
+        {
+            // Cache the image metrics.
+            this._imageSize = {
+                width: image.width,
+                height: image.height
+            };
+            
+            callback(this._imageSize);
+        };
+
+        // Create an <img> element that we'll use to load the image resource
+        // so that we can query its intrinsic size.
+        var image = new Image;
+        image.addEventListener("load", imageDidLoad.bind(this), false);
+
+        // Set the image source once we've obtained the base64-encoded URL for it.
+        this.requestContent(function() {
+            image.src = this.contentURL;
+        }.bind(this));
+    },
+
+    associateWithScript: function(script)
+    {
+        if (!this._scripts)
+            this._scripts = []
+
+        this._scripts.push(script);
+
+        // COMPATIBILITY (iOS 6): Resources did not know their type until a response
+        // was received. We can set the Resource type to be Script here.
+        if (this._type === WebInspector.Resource.Type.Other) {
+            var oldType = this._type;
+            this._type = WebInspector.Resource.Type.Script;
+            this.dispatchEventToListeners(WebInspector.Resource.Event.TypeDidChange, {oldType: oldType});
+        }
+    }
+};
+
+WebInspector.Resource.prototype.__proto__ = WebInspector.SourceCode.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceClusterContentView.js b/Source/WebInspectorUI/UserInterface/ResourceClusterContentView.js
new file mode 100644
index 000000000..17e22f5a9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ResourceClusterContentView.js
@@ -0,0 +1,263 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceClusterContentView = function(resource)
+{
+    WebInspector.ClusterContentView.call(this, resource);
+
+    this._resource = resource;
+    this._resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._resourceTypeDidChange, this);
+    this._resource.addEventListener(WebInspector.Resource.Event.LoadingDidFinish, this._resourceLoadingDidFinish, this);
+
+    function createPathComponent(displayName, className, identifier)
+    {
+        var pathComponent = new WebInspector.HierarchicalPathComponent(displayName, className, identifier, false, true);
+        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
+        return pathComponent;
+    }
+
+    this._requestPathComponent = createPathComponent.call(this, WebInspector.UIString("Request"), WebInspector.ResourceClusterContentView.RequestIconStyleClassName, WebInspector.ResourceClusterContentView.RequestIdentifier);
+    this._responsePathComponent = createPathComponent.call(this, WebInspector.UIString("Response"), WebInspector.ResourceClusterContentView.ResponseIconStyleClassName, WebInspector.ResourceClusterContentView.ResponseIdentifier);
+
+    this._requestPathComponent.nextSibling = this._responsePathComponent;
+    this._responsePathComponent.previousSibling = this._requestPathComponent;
+
+    this._currentContentViewSetting = new WebInspector.Setting("resource-current-view-" + this._resource.url.hash, WebInspector.ResourceClusterContentView.ResponseIdentifier);
+};
+
+WebInspector.ResourceClusterContentView.RequestIconStyleClassName = "request-icon";
+WebInspector.ResourceClusterContentView.ResponseIconStyleClassName = "response-icon";
+WebInspector.ResourceClusterContentView.RequestIdentifier = "request";
+WebInspector.ResourceClusterContentView.ResponseIdentifier = "response";
+
+WebInspector.ResourceClusterContentView.prototype = {
+    constructor: WebInspector.ResourceClusterContentView,
+
+    // Public
+
+    get resource()
+    {
+        return this._resource;
+    },
+
+    get allowedNavigationSidebarPanels()
+    {
+        return ["resource", "debugger"];
+    },
+
+    get responseContentView()
+    {
+        if (this._responseContentView)
+            return this._responseContentView;
+
+        switch (this._resource.type) {
+        case WebInspector.Resource.Type.Document:
+        case WebInspector.Resource.Type.Script:
+        case WebInspector.Resource.Type.Stylesheet:
+        case WebInspector.Resource.Type.XHR:
+            this._responseContentView = new WebInspector.TextResourceContentView(this._resource);
+            break;
+
+        case WebInspector.Resource.Type.Image:
+            this._responseContentView = new WebInspector.ImageResourceContentView(this._resource);
+            break;
+
+        case WebInspector.Resource.Type.Font:
+            this._responseContentView = new WebInspector.FontResourceContentView(this._resource);
+            break;
+
+        default:
+            this._responseContentView = new WebInspector.GenericResourceContentView(this._resource);
+            break;
+        }
+
+        return this._responseContentView;
+    },
+
+    get requestContentView()
+    {
+        if (!this._canShowRequestContentView())
+            return null;
+
+        if (this._requestContentView)
+            return this._requestContentView;
+
+        this._requestContentView = new WebInspector.TextContentView(this._resource.requestData || "", this._resource.requestDataContentType);
+
+        return this._requestContentView;
+    },
+
+    get selectionPathComponents()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView)
+            return [];
+
+        if (!this._canShowRequestContentView())
+            return currentContentView.selectionPathComponents;
+
+        // Append the current view's path components to the path component representing the current view.
+        var components = [this._pathComponentForContentView(currentContentView)];
+        return components.concat(currentContentView.selectionPathComponents);
+    },
+
+    shown: function()
+    {
+        WebInspector.ClusterContentView.prototype.shown.call(this);
+
+        if (this._shownInitialContent)
+            return;
+
+        this._showContentViewForIdentifier(this._currentContentViewSetting.value);
+    },
+
+    closed: function()
+    {
+        WebInspector.ClusterContentView.prototype.closed.call(this);
+
+        this._shownInitialContent = false;
+    },
+
+    showRequest: function()
+    {
+        this._shownInitialContent = true;
+
+        return this._showContentViewForIdentifier(WebInspector.ResourceClusterContentView.RequestIdentifier);
+    },
+
+    showResponse: function(positionToReveal, textRangeToSelect, forceUnformatted)
+    {
+        this._shownInitialContent = true;
+
+        if (!this._resource.finished) {
+            this._positionToReveal = positionToReveal;
+            this._textRangeToSelect = textRangeToSelect;
+            this._forceUnformatted = forceUnformatted;
+        }
+
+        var responseContentView = this._showContentViewForIdentifier(WebInspector.ResourceClusterContentView.ResponseIdentifier);
+        if (typeof responseContentView.revealPosition === "function")
+            responseContentView.revealPosition(positionToReveal, textRangeToSelect, forceUnformatted);
+        return responseContentView;
+    },
+
+    // Private
+
+    _canShowRequestContentView: function()
+    {
+        var requestData = this._resource.requestData;
+        if (!requestData)
+            return false;
+
+        var requestDataContentType = this._resource.requestDataContentType;
+        if (requestDataContentType && requestDataContentType.match(/^application\/x-www-form-urlencoded\s*(;.*)?$/i))
+            return false;
+
+        return true;
+    },
+
+    _pathComponentForContentView: function(contentView)
+    {
+        console.assert(contentView);
+        if (!contentView)
+            return null;
+        if (contentView === this._requestContentView)
+            return this._requestPathComponent;
+        if (contentView === this._responseContentView)
+            return this._responsePathComponent;
+        console.error("Unknown contentView.");
+        return null;
+    },
+
+    _identifierForContentView: function(contentView)
+    {
+        console.assert(contentView);
+        if (!contentView)
+            return null;
+        if (contentView === this._requestContentView)
+            return WebInspector.ResourceClusterContentView.RequestIdentifier;
+        if (contentView === this._responseContentView)
+            return WebInspector.ResourceClusterContentView.ResponseIdentifier;
+        console.error("Unknown contentView.");
+        return null;
+    },
+
+    _showContentViewForIdentifier: function(identifier)
+    {
+        var contentViewToShow = null;
+
+        switch (identifier) {
+        case WebInspector.ResourceClusterContentView.RequestIdentifier:
+            contentViewToShow = this._canShowRequestContentView() ? this.requestContentView : null;
+            break;
+        case WebInspector.ResourceClusterContentView.ResponseIdentifier:
+            contentViewToShow = this.responseContentView;
+            break;
+        }
+
+        if (!contentViewToShow)
+            contentViewToShow = this.responseContentView;
+
+        console.assert(contentViewToShow);
+
+        this._currentContentViewSetting.value = this._identifierForContentView(contentViewToShow);
+
+        return this.contentViewContainer.showContentView(contentViewToShow);
+    },
+
+    _pathComponentSelected: function(event)
+    {
+        this._showContentViewForIdentifier(event.data.pathComponent.representedObject);
+    },
+
+    _resourceTypeDidChange: function(event)
+    {
+        // Since resource views are based on the type, we need to make a new content view and tell the container to replace this
+        // content view with the new one. Make a new ResourceContentView which will use the new resource type to make the correct
+        // concrete ResourceContentView subclass.
+
+        var currentResponseContentView = this._responseContentView;
+        if (!currentResponseContentView)
+            return;
+
+        delete this._responseContentView;
+
+        this.contentViewContainer.replaceContentView(currentResponseContentView, this.responseContentView);
+    },
+
+    _resourceLoadingDidFinish: function(event)
+    {
+        if ("_positionToReveal" in this) {
+            if (this._contentViewContainer.currentContentView === this._responseContentView)
+                this._responseContentView.revealPosition(this._positionToReveal, this._textRangeToSelect, this._forceUnformatted);
+
+            delete this._positionToReveal;
+            delete this._textRangeToSelect;
+            delete this._forceUnformatted;
+        }
+    }
+};
+
+WebInspector.ResourceClusterContentView.prototype.__proto__ = WebInspector.ClusterContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceCollection.js b/Source/WebInspectorUI/UserInterface/ResourceCollection.js
new file mode 100644
index 000000000..e68334a8e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ResourceCollection.js
@@ -0,0 +1,164 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceCollection = function()
+{
+    WebInspector.Object.call(this);
+
+    this._resources = [];
+    this._resourceURLMap = {};
+    this._resourcesTypeMap = {};
+};
+
+WebInspector.ResourceCollection.prototype = {
+    constructor: WebInspector.ResourceCollection,
+
+    // Public
+
+    get resources()
+    {
+        return this._resources;
+    },
+
+    resourceForURL: function(url)
+    {
+        return this._resourceURLMap[url] || null;
+    },
+
+    resourcesWithType: function(type)
+    {
+        return this._resourcesTypeMap[type] || [];
+    },
+
+    addResource: function(resource)
+    {
+        console.assert(resource instanceof WebInspector.Resource);
+        if (!(resource instanceof WebInspector.Resource))
+            return;
+
+        this._associateWithResource(resource);
+    },
+
+    removeResource: function(resourceOrURL)
+    {
+        console.assert(resourceOrURL);
+
+        if (resourceOrURL instanceof WebInspector.Resource)
+            var url = resourceOrURL.url;
+        else
+            var url = resourceOrURL;
+
+        // Fetch the resource by URL even if we were passed a WebInspector.Resource.
+        // We do this incase the WebInspector.Resource is a new object that isn't in _resources,
+        // but the URL is a valid resource.
+        var resource = this.resourceForURL(url);
+        console.assert(resource instanceof WebInspector.Resource);
+        if (!(resource instanceof WebInspector.Resource))
+            return null;
+
+        this._disassociateWithResource(resource);
+
+        return resource;
+    },
+
+    removeAllResources: function()
+    {
+        if (!this._resources.length)
+            return;
+
+        for (var i = 0; i < this._resources.length; ++i)
+            this._disassociateWithResource(this._resources[i], true);
+
+        this._resources = [];
+        this._resourceURLMap = {};
+        this._resourcesTypeMap = {};
+    },
+
+    // Private
+
+    _associateWithResource: function(resource)
+    {
+        this._resources.push(resource);
+        this._resourceURLMap[resource.url] = resource;
+
+        if (!this._resourcesTypeMap[resource.type])
+            this._resourcesTypeMap[resource.type] = [];
+        this._resourcesTypeMap[resource.type].push(resource);
+
+        resource.addEventListener(WebInspector.Resource.Event.URLDidChange, this._resourceURLDidChange, this);
+        resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._resourceTypeDidChange, this);
+    },
+
+    _disassociateWithResource: function(resource, skipRemoval)
+    {
+        if (skipRemoval) {
+            this._resources.remove(resource);
+            if (this._resourcesTypeMap[resource.type])
+                this._resourcesTypeMap[resource.type].remove(resource);
+            delete this._resourceURLMap[resource.url];
+        }
+
+        resource.removeEventListener(WebInspector.Resource.Event.URLDidChange, this._resourceURLDidChange, this);
+        resource.removeEventListener(WebInspector.Resource.Event.TypeDidChange, this._resourceTypeDidChange, this);
+    },
+
+    _resourceURLDidChange: function(event)
+    {
+        var resource = event.target;
+        console.assert(resource instanceof WebInspector.Resource);
+        if (!(resource instanceof WebInspector.Resource))
+            return;
+
+        var oldURL = event.data.oldURL;
+        console.assert(oldURL);
+        if (!oldURL)
+            return;
+
+        this._resourceURLMap[resource.url] = resource;
+        delete this._resourceURLMap[oldURL];
+    },
+
+    _resourceTypeDidChange: function(event)
+    {
+        var resource = event.target;
+        console.assert(resource instanceof WebInspector.Resource);
+        if (!(resource instanceof WebInspector.Resource))
+            return;
+
+        var oldType = event.data.oldType;
+        console.assert(oldType);
+        if (!oldType)
+            return;
+
+        if (!this._resourcesTypeMap[resource.type])
+            this._resourcesTypeMap[resource.type] = [];
+        this._resourcesTypeMap[resource.type].push(resource);
+
+        if (this._resourcesTypeMap[oldType])
+            this._resourcesTypeMap[oldType].remove(resource);
+    }
+};
+
+WebInspector.ResourceCollection.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceContentView.js b/Source/WebInspectorUI/UserInterface/ResourceContentView.js
new file mode 100644
index 000000000..d14405012
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ResourceContentView.js
@@ -0,0 +1,127 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceContentView = function(resource, styleClassName)
+{
+    console.assert(resource);
+    console.assert(styleClassName);
+
+    WebInspector.ContentView.call(this, resource);
+
+    this._resource = resource;
+
+    this.element.classList.add(WebInspector.ResourceContentView.StyleClassName);
+    this.element.classList.add(styleClassName);
+
+    // Append a spinner while waiting for contentAvailable. The subclasses are responsible for removing
+    // the spinner before showing the resource content.
+    var spinner = new WebInspector.IndeterminateProgressSpinner;
+    this.element.appendChild(spinner.element);
+
+    this.element.addEventListener("click", this._mouseWasClicked.bind(this), false);
+
+    // Request content last so the spinner will always be removed in case the content is immediately available.
+    resource.requestContent(this._contentAvailable.bind(this));
+
+    if (!this.managesOwnIssues) {
+        WebInspector.issueManager.addEventListener(WebInspector.IssueManager.Event.IssueWasAdded, this._issueWasAdded, this);
+
+        var issues = WebInspector.issueManager.issuesForSourceCode(resource);
+        for (var i = 0; i < issues.length; ++i)
+            this.addIssue(issues[i]);
+    }
+};
+
+WebInspector.ResourceContentView.StyleClassName = "resource";
+
+WebInspector.ResourceContentView.prototype = {
+    constructor: WebInspector.ResourceContentView,
+
+    // Public
+
+    get resource()
+    {
+        return this._resource;
+    },
+
+    contentAvailable: function(content, base64Encoded)
+    {
+        // Implemented by subclasses.
+    },
+
+    addIssue: function(issue)
+    {
+        // This generically shows only the last issue, subclasses can override for better handling.
+        this.element.removeChildren();
+        this.element.appendChild(WebInspector.createMessageTextView(issue.text, issue.level === WebInspector.IssueMessage.Level.Error));
+    },
+
+    closed: function()
+    {
+        this._resource.removeEventListener(WebInspector.Resource.Event.TypeDidChange, this._resourceTypeDidChange, this);
+
+        if (!this.managesOwnIssues)
+            WebInspector.issueManager.removeEventListener(WebInspector.IssueManager.Event.IssueWasAdded, this._issueWasAdded, this);
+    },
+
+    // Private
+
+    _contentAvailable: function(resource, content, base64Encoded)
+    {
+        // Check for failed loads.
+        if (this.resource.failed) {
+            // Don't show an error message if there is already an error message showing (like one added by addIssue.)
+            if (this.element.querySelector(".message-text-view.error"))
+                return;
+
+            this.element.removeChildren();
+            this.element.appendChild(WebInspector.createMessageTextView(WebInspector.UIString("An error occurred trying to load the resource."), true));
+            return;
+        }
+
+        // Content is ready to show, call the public method now.
+        this.contentAvailable(content, base64Encoded);
+    },
+
+    _issueWasAdded: function(event)
+    {
+        console.assert(!this.managesOwnIssues);
+
+        var issue = event.data.issue;
+
+        // FIXME: Check more than just the issue URL (the document could have multiple resources with the same URL).
+        if (issue.url !== this.resource.url)
+            return;
+
+        this.addIssue(issue);
+    },
+
+    _mouseWasClicked: function(event)
+    {
+        WebInspector.handlePossibleLinkClick(event, this.resource.parentFrame);
+    }
+};
+
+WebInspector.ResourceContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/ResourceDetailsSidebarPanel.js
new file mode 100644
index 000000000..f42c2665d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ResourceDetailsSidebarPanel.js
@@ -0,0 +1,483 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceDetailsSidebarPanel = function() {
+    WebInspector.DetailsSidebarPanel.call(this, "resource-details", WebInspector.UIString("Resource"), WebInspector.UIString("Resource"), "Images/NavigationItemFile.pdf", "1");
+
+    this.element.classList.add(WebInspector.ResourceDetailsSidebarPanel.StyleClassName);
+
+    this._resource = null;
+
+    this._typeMIMETypeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("MIME Type"));
+    this._typeResourceTypeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Resource Type"));
+
+    this._typeSection = new WebInspector.DetailsSection("resource-type", WebInspector.UIString("Type"));
+    this._typeSection.groups = [new WebInspector.DetailsSectionGroup([this._typeMIMETypeRow, this._typeResourceTypeRow])];
+
+    this._locationFullURLRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Full URL"));
+    this._locationSchemeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Scheme"));
+    this._locationHostRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Host"));
+    this._locationPortRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Port"));
+    this._locationPathRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Path"));
+    this._locationQueryStringRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Query String"));
+    this._locationFragmentRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Fragment"));
+    this._locationFilenameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Filename"));
+
+    var firstGroup = [this._locationFullURLRow];
+    var secondGroup = [this._locationSchemeRow, this._locationHostRow, this._locationPortRow, this._locationPathRow,
+        this._locationQueryStringRow, this._locationFragmentRow, this._locationFilenameRow];
+
+    this._fullURLGroup = new WebInspector.DetailsSectionGroup(firstGroup);
+    this._locationURLComponentsGroup = new WebInspector.DetailsSectionGroup(secondGroup);
+
+    this._locationSection = new WebInspector.DetailsSection("resource-location", WebInspector.UIString("Location"), [this._fullURLGroup, this._locationURLComponentsGroup]);
+
+    this._queryParametersRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Query Parameters"));
+    this._queryParametersSection = new WebInspector.DetailsSection("resource-query-parameters", WebInspector.UIString("Query Parameters"));
+    this._queryParametersSection.groups = [new WebInspector.DetailsSectionGroup([this._queryParametersRow])];
+
+    this._requestDataSection = new WebInspector.DetailsSection("resource-request-data", WebInspector.UIString("Request Data"));
+
+    this._requestMethodRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Method"));
+    this._cachedRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Cached"));
+
+    this._statusTextRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Status"));
+    this._statusCodeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Code"));
+
+    this._encodedSizeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Encoded"));
+    this._decodedSizeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Decoded"));
+    this._transferSizeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Transfered"));
+
+    this._compressedRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Compressed"));
+    this._compressionRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Compression"));
+
+    var requestGroup = new WebInspector.DetailsSectionGroup([this._requestMethodRow, this._cachedRow]);
+    var statusGroup = new WebInspector.DetailsSectionGroup([this._statusTextRow, this._statusCodeRow]);
+    var sizeGroup = new WebInspector.DetailsSectionGroup([this._encodedSizeRow, this._decodedSizeRow, this._transferSizeRow]);
+    var compressionGroup = new WebInspector.DetailsSectionGroup([this._compressedRow, this._compressionRow]);
+
+    this._requestAndResponseSection = new WebInspector.DetailsSection("resource-request-response", WebInspector.UIString("Request & Response"), [requestGroup, statusGroup, sizeGroup, compressionGroup]);
+
+    this._requestHeadersRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Request Headers"));
+    this._requestHeadersSection = new WebInspector.DetailsSection("resource-request-headers", WebInspector.UIString("Request Headers"));
+    this._requestHeadersSection.groups = [new WebInspector.DetailsSectionGroup([this._requestHeadersRow])];
+
+    this._responseHeadersRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Response Headers"));
+    this._responseHeadersSection = new WebInspector.DetailsSection("resource-response-headers", WebInspector.UIString("Response Headers"));
+    this._responseHeadersSection.groups = [new WebInspector.DetailsSectionGroup([this._responseHeadersRow])];
+
+    // Rows for the "Image Size" section.
+    this._imageWidthRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Width"));
+    this._imageHeightRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Height"));
+
+    // "Image Size" section where we display intrinsic metrics for image resources.
+    this._imageSizeSection = new WebInspector.DetailsSection("resource-type", WebInspector.UIString("Image Size"));
+    this._imageSizeSection.groups = [new WebInspector.DetailsSectionGroup([this._imageWidthRow, this._imageHeightRow])];
+
+    this.element.appendChild(this._typeSection.element);
+    this.element.appendChild(this._locationSection.element);
+    this.element.appendChild(this._requestAndResponseSection.element);
+    this.element.appendChild(this._requestHeadersSection.element);
+    this.element.appendChild(this._responseHeadersSection.element);
+};
+
+WebInspector.ResourceDetailsSidebarPanel.StyleClassName = "resource";
+
+WebInspector.ResourceDetailsSidebarPanel.prototype = {
+    constructor: WebInspector.ResourceDetailsSidebarPanel,
+
+    // Public
+
+    inspect: function(objects)
+    {
+        // Convert to a single item array if needed.
+        if (!(objects instanceof Array))
+            objects = [objects];
+
+        var resourceToInspect = null;
+
+        // Iterate over the objects to find a WebInspector.Resource to inspect.
+        for (var i = 0; i < objects.length; ++i) {
+            if (objects[i] instanceof WebInspector.Resource) {
+                resourceToInspect = objects[i];
+                break;
+            }
+
+            if (objects[i] instanceof WebInspector.Frame) {
+                resourceToInspect = objects[i].mainResource;
+                break;
+            }
+        }
+
+        this.resource = resourceToInspect;
+
+        return !!this._resource;
+    },
+
+    get resource()
+    {
+        return this._resource;
+    },
+
+    set resource(resource)
+    {
+        if (resource === this._resource)
+            return;
+
+        if (this._resource) {
+            this._resource.removeEventListener(WebInspector.Resource.Event.URLDidChange, this._refreshURL, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.MIMETypeDidChange, this._refreshMIMEType, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.TypeDidChange, this._refreshResourceType, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.RequestHeadersDidChange, this._refreshRequestHeaders, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.ResponseReceived, this._refreshRequestAndResponse, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.CacheStatusDidChange, this._refreshRequestAndResponse, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.SizeDidChange, this._refreshDecodedSize, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.TransferSizeDidChange, this._refreshTransferSize, this);
+        }
+
+        this._resource = resource;
+
+        if (this._resource) {
+            this._resource.addEventListener(WebInspector.Resource.Event.URLDidChange, this._refreshURL, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.MIMETypeDidChange, this._refreshMIMEType, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._refreshResourceType, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.RequestHeadersDidChange, this._refreshRequestHeaders, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.ResponseReceived, this._refreshRequestAndResponse, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.CacheStatusDidChange, this._refreshRequestAndResponse, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.SizeDidChange, this._refreshDecodedSize, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.TransferSizeDidChange, this._refreshTransferSize, this);
+        }
+
+        this.needsRefresh();
+    },
+
+    refresh: function()
+    {
+        if (!this._resource)
+            return;
+
+        this._refreshURL();
+        this._refreshMIMEType();
+        this._refreshResourceType();
+        this._refreshRequestAndResponse();
+        this._refreshDecodedSize();
+        this._refreshTransferSize();
+        this._refreshRequestHeaders();
+        this._refreshImageSizeSection();
+        this._refreshRequestDataSection();
+    },
+
+    // Private
+
+    _refreshURL: function()
+    {
+        if (!this._resource)
+            return;
+
+        this._locationFullURLRow.value = this._resource.url.insertWordBreakCharacters();
+
+        var urlComponents = this._resource.urlComponents;
+        if (urlComponents.scheme) {
+            this._locationSection.groups = [this._fullURLGroup, this._locationURLComponentsGroup];
+
+            this._locationSchemeRow.value = urlComponents.scheme ? urlComponents.scheme : null;
+            this._locationHostRow.value = urlComponents.host ? urlComponents.host : null;
+            this._locationPortRow.value = urlComponents.port ? urlComponents.port : null;
+            this._locationPathRow.value = urlComponents.path ? urlComponents.path.insertWordBreakCharacters() : null;
+            this._locationQueryStringRow.value = urlComponents.queryString ? urlComponents.queryString.insertWordBreakCharacters() : null;
+            this._locationFragmentRow.value = urlComponents.fragment ? urlComponents.fragment.insertWordBreakCharacters() : null;
+            this._locationFilenameRow.value = urlComponents.lastPathComponent ? urlComponents.lastPathComponent.insertWordBreakCharacters() : null;
+        } else
+            this._locationSection.groups = [this._fullURLGroup];
+
+        if (urlComponents.queryString) {
+            // Ensure the "Query Parameters" section is displayed, right after the "Request & Response" section.
+            this.element.insertBefore(this._queryParametersSection.element, this._requestAndResponseSection.element.nextSibling);
+
+            this._queryParametersRow.dataGrid = this._createNameValueDataGrid(parseQueryString(urlComponents.queryString, true));
+        } else {
+            // Hide the "Query Parameters" section if we don't have a query string.
+            var queryParametersSectionElement = this._queryParametersSection.element;
+            if (queryParametersSectionElement.parentNode)
+                queryParametersSectionElement.parentNode.removeChild(queryParametersSectionElement);
+        }
+    },
+
+    _refreshResourceType: function()
+    {
+        if (!this._resource)
+            return;
+
+        this._typeResourceTypeRow.value = WebInspector.Resource.Type.displayName(this._resource.type);
+    },
+
+    _refreshMIMEType: function()
+    {
+        if (!this._resource)
+            return;
+
+        this._typeMIMETypeRow.value = this._resource.mimeType;
+    },
+
+    _refreshRequestAndResponse: function()
+    {
+        var resource = this._resource;
+        if (!resource)
+            return;
+
+        // If we don't have a value, we set an em-dash to keep the row from hiding.
+        // This keeps the UI from shifting around as data comes in.
+        const emDash = "\u2014";
+
+        this._requestMethodRow.value = resource.requestMethod || emDash;
+
+        this._cachedRow.value = resource.cached ? WebInspector.UIString("Yes") : WebInspector.UIString("No");
+
+        this._statusCodeRow.value = resource.statusCode || emDash;
+        this._statusTextRow.value = resource.statusText || emDash;
+
+        this._refreshResponseHeaders();
+        this._refreshCompressed();
+    },
+
+    _valueForSize: function(size)
+    {
+        // If we don't have a value, we set an em-dash to keep the row from hiding.
+        // This keeps the UI from shifting around as data comes in.
+        const emDash = "\u2014";
+        return size > 0 ? Number.bytesToString(size) : emDash;
+    },
+
+    _refreshCompressed: function()
+    {
+        this._compressedRow.value = this._resource.compressed ? WebInspector.UIString("Yes") : WebInspector.UIString("No");
+        this._compressionRow.value = this._resource.compressed ? WebInspector.UIString("%.2f\u00d7").format(this._resource.size / this._resource.encodedSize) : null;
+    },
+
+    _refreshDecodedSize: function()
+    {
+        if (!this._resource)
+            return;
+
+        this._encodedSizeRow.value = this._valueForSize(this._resource.encodedSize);
+        this._decodedSizeRow.value = this._valueForSize(this._resource.size);
+
+        this._refreshCompressed();
+    },
+
+    _refreshTransferSize: function()
+    {
+        if (!this._resource)
+            return;
+
+        this._encodedSizeRow.value = this._valueForSize(this._resource.encodedSize);
+        this._transferSizeRow.value = this._valueForSize(this._resource.transferSize);
+
+        this._refreshCompressed();
+    },
+
+    _refreshRequestHeaders: function()
+    {
+        if (!this._resource)
+            return;
+
+        this._requestHeadersRow.dataGrid = this._createNameValueDataGrid(this._resource.requestHeaders);
+    },
+
+    _refreshResponseHeaders: function()
+    {
+        if (!this._resource)
+            return;
+
+        this._responseHeadersRow.dataGrid = this._createNameValueDataGrid(this._resource.responseHeaders);
+    },
+
+    _createNameValueDataGrid: function(data)
+    {
+        if (!data || data instanceof Array ? !data.length : isEmptyObject(data))
+            return null;
+
+        var dataGrid = new WebInspector.DataGrid({
+            name: {title: WebInspector.UIString("Name"), width: "30%", sortable: true},
+            value: {title: WebInspector.UIString("Value"), sortable: true}
+        });
+
+        function addDataGridNode(nodeValue)
+        {
+            console.assert(typeof nodeValue.name === "string");
+            console.assert(typeof nodeValue.value === "string");
+
+            var node = new WebInspector.DataGridNode({name: nodeValue.name, value: nodeValue.value}, false);
+            node.selectable = true;
+            dataGrid.appendChild(node);
+        }
+
+        if (data instanceof Array) {
+            for (var i = 0; i < data.length; ++i)
+                addDataGridNode(data[i]);
+        } else {
+            for (var name in data)
+                addDataGridNode({name: name, value: data[name] || ""});
+        }
+
+        dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, sortDataGrid, this);
+
+        function sortDataGrid()
+        {
+            var nodes = dataGrid.children.slice();
+            var sortColumnIdentifier = dataGrid.sortColumnIdentifier;
+            var sortDirection = dataGrid.sortOrder === "ascending" ? 1 : -1;
+
+            function comparator(a, b)
+            {
+                var item1 = a.data[sortColumnIdentifier];
+                var item2 = b.data[sortColumnIdentifier];
+                return sortDirection * item1.localeCompare(item2);
+            }
+
+            nodes.sort(comparator);
+
+            dataGrid.removeChildren();
+            for (var i = 0; i < nodes.length; i++)
+                dataGrid.appendChild(nodes[i]);
+        }
+
+        return dataGrid;
+    },
+
+    _refreshImageSizeSection: function()
+    {
+        var resource = this._resource;
+
+        if (!resource)
+            return;
+        
+        // Hide the section if we're not dealing with an image or if the load failed.
+        if (resource.type !== WebInspector.Resource.Type.Image || resource.failed) {
+            var imageSectionElement = this._imageSizeSection.element;
+            if (imageSectionElement.parentNode)
+                this.element.removeChild(imageSectionElement);
+            return;
+        }
+        
+        // Ensure the section is displayed, right before the "Location" section.
+        this.element.insertBefore(this._imageSizeSection.element, this._locationSection.element);
+        
+        // Get the metrics for this resource and fill in the metrics rows with that information.
+        resource.getImageSize(function(size) {
+            this._imageWidthRow.value = WebInspector.UIString("%fpx").format(size.width);
+            this._imageHeightRow.value = WebInspector.UIString("%fpx").format(size.height);
+        }.bind(this));
+    },
+
+    _goToRequestDataClicked: function()
+    {
+        WebInspector.resourceSidebarPanel.showResourceRequest(this._resource);
+    },
+
+    _refreshRequestDataSection: function()
+    {
+        var resource = this._resource;
+
+        if (!resource)
+            return;
+
+        // Hide the section if we're not dealing with a request with data.
+        var requestData = resource.requestData;
+        if (!requestData) {
+            this._requestDataSection.element.remove();
+            return;
+        }
+
+        // Ensure the section is displayed, right before the "Request Headers" section.
+        this.element.insertBefore(this._requestDataSection.element, this._requestHeadersSection.element);
+
+        var requestDataContentType = resource.requestDataContentType || "";
+        if (requestDataContentType && requestDataContentType.match(/^application\/x-www-form-urlencoded\s*(;.*)?$/i)) {
+            // Simple form data that should be parsable like a query string.
+            var parametersRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Parameters"));
+            parametersRow.dataGrid = this._createNameValueDataGrid(parseQueryString(requestData, true));
+
+            this._requestDataSection.groups = [new WebInspector.DetailsSectionGroup([parametersRow])];
+            return;
+        }
+
+        // Not simple form data, so we can really only show the size and type here.
+        // FIXME: Add a go-to arrow here to show the data in the content browser.
+
+        var typeParts = requestDataContentType.split(/\s*;\s*/);
+        console.assert(typeParts.length >= 1);
+
+        var mimeType = typeParts[0];
+        var boundary = null;
+        var encoding = null;
+
+        for (var i = 1; i < typeParts.length; ++i) {
+            var subparts = typeParts[i].split(/\s*=\s*/);
+            if (subparts.length !== 2)
+                continue;
+
+            if (subparts[0].toLowerCase() === "boundary")
+                boundary = subparts[1];
+            else if (subparts[0].toLowerCase() === "charset")
+                encoding = subparts[1].replace("^\"|\"$", ""); // Trim quotes.
+        }
+
+        var rows = [];
+
+        var mimeTypeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("MIME Type"));
+        mimeTypeRow.value = mimeType;
+        rows.push(mimeTypeRow);
+
+        if (boundary) {
+            var boundryRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Boundary"));
+            boundryRow.value = boundary;
+            rows.push(boundryRow);
+        }
+
+        if (encoding) {
+            var encodingRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Encoding"));
+            encodingRow.value = encoding;
+            rows.push(encodingRow);
+        }
+
+        var sizeValue = Number.bytesToString(requestData.length);
+
+        var dataValue = document.createDocumentFragment();
+
+        dataValue.appendChild(document.createTextNode(sizeValue));
+
+        var goToButton = dataValue.appendChild(WebInspector.createGoToArrowButton());
+        goToButton.addEventListener("click", this._goToRequestDataClicked.bind(this));
+
+        var dataRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Data"));
+        dataRow.value = dataValue;
+        rows.push(dataRow);
+
+        this._requestDataSection.groups = [new WebInspector.DetailsSectionGroup(rows)];
+    }
+};
+
+WebInspector.ResourceDetailsSidebarPanel.prototype.__proto__ = WebInspector.DetailsSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceIcons.css b/Source/WebInspectorUI/UserInterface/ResourceIcons.css
new file mode 100644
index 000000000..584dc6162
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ResourceIcons.css
@@ -0,0 +1,64 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.resource-icon .icon {
+    content: -webkit-image-set(url(Images/DocumentGeneric.png) 1x, url(Images/DocumentGeneric@2x.png) 2x);
+}
+
+.resource-icon.resource-type-document .icon {
+    content: -webkit-image-set(url(Images/DocumentMarkup.png) 1x, url(Images/DocumentMarkup@2x.png) 2x);
+}
+
+.resource-icon.resource-type-image .icon {
+    content: -webkit-image-set(url(Images/DocumentImage.png) 1x, url(Images/DocumentImage@2x.png) 2x);
+}
+
+.resource-icon.resource-type-font .icon {
+    content: -webkit-image-set(url(Images/DocumentFont.png) 1x, url(Images/DocumentFont@2x.png) 2x);
+}
+
+.resource-icon.resource-type-stylesheet .icon {
+    content: -webkit-image-set(url(Images/DocumentCSS.png) 1x, url(Images/DocumentCSS@2x.png) 2x);
+}
+
+.resource-icon.resource-type-script .icon {
+    content: -webkit-image-set(url(Images/DocumentJS.png) 1x, url(Images/DocumentJS@2x.png) 2x);
+}
+
+.anonymous-script-icon .icon {
+    content: -webkit-image-set(url(Images/ClippingJS.png) 1x, url(Images/ClippingJS@2x.png) 2x);
+}
+
+.source-map-resource.resource-icon .icon {
+    content: -webkit-image-set(url(Images/ClippingGeneric.png) 1x, url(Images/ClippingGeneric@2x.png) 2x);
+}
+
+.source-map-resource.resource-icon.resource-type-stylesheet .icon {
+    content: -webkit-image-set(url(Images/ClippingCSS.png) 1x, url(Images/ClippingCSS@2x.png) 2x);
+}
+
+.source-map-resource.resource-icon.resource-type-script .icon {
+    content: -webkit-image-set(url(Images/ClippingJS.png) 1x, url(Images/ClippingJS@2x.png) 2x);
+}
diff --git a/Source/WebInspectorUI/UserInterface/ResourceSearchMatchObject.js b/Source/WebInspectorUI/UserInterface/ResourceSearchMatchObject.js
new file mode 100644
index 000000000..e58dbd582
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ResourceSearchMatchObject.js
@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceSearchMatchObject = function(resource, lineText, searchTerm, textRange)
+{
+    console.assert(resource instanceof WebInspector.Resource);
+
+    WebInspector.Object.call(this);
+
+    this._resource = resource;
+    this._lineText = lineText;
+    this._searchTerm = searchTerm;
+    this._sourceCodeTextRange = resource.createSourceCodeTextRange(textRange);
+};
+
+WebInspector.ResourceSearchMatchObject.ResourceMatchIconStyleClassName = "resource-match-icon";
+
+WebInspector.ResourceSearchMatchObject.prototype = {
+    constructor: WebInspector.ResourceSearchMatchObject,
+
+    get resource()
+    {
+        return this._resource;
+    },
+
+    get title()
+    {
+        return this._lineText;
+    },
+
+    get className()
+    {
+        return WebInspector.ResourceSearchMatchObject.ResourceMatchIconStyleClassName;
+    },
+
+    get searchTerm()
+    {
+        return this._searchTerm;
+    },
+
+    get sourceCodeTextRange()
+    {
+        return this._sourceCodeTextRange;
+    }
+};
+
+WebInspector.ResourceSearchMatchObject.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.css b/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.css
new file mode 100644
index 000000000..948071dcd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.css
@@ -0,0 +1,52 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.resource > .content,
+.sidebar > .panel.resource > .empty-content-placeholder {
+    top: 21px;
+}
+
+.sidebar > .panel.resource > .search-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+
+    display: -webkit-flex;
+
+    box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0;
+
+    height: 21px;
+
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.sidebar > .panel.resource > .search-bar > input[type="search"] {
+    display: -webkit-flex;
+    -webkit-flex: 1;
+
+    margin: 1px 6px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.js b/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.js
new file mode 100644
index 000000000..b07e9d3be
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.js
@@ -0,0 +1,981 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceSidebarPanel = function() {
+    WebInspector.NavigationSidebarPanel.call(this, "resource", WebInspector.UIString("Resources"), "Images/NavigationItemStorage.pdf", "1", true, false, true);
+
+    var searchElement = document.createElement("div");
+    searchElement.classList.add("search-bar");
+    this.element.appendChild(searchElement);
+
+    this._inputElement = document.createElement("input");
+    this._inputElement.type = "search";
+    this._inputElement.spellcheck = false;
+    this._inputElement.addEventListener("search", this._searchFieldChanged.bind(this));
+    this._inputElement.addEventListener("input", this._searchFieldInput.bind(this));
+    this._inputElement.setAttribute("results", 5);
+    this._inputElement.setAttribute("autosave", "inspector-search");
+    this._inputElement.setAttribute("placeholder", WebInspector.UIString("Search Resource Content"));
+    searchElement.appendChild(this._inputElement);
+
+    this.filterBar.placeholder = WebInspector.UIString("Filter Resource List");
+
+    this._waitingForInitialMainFrame = true;
+    this._lastSearchedPageSetting = new WebInspector.Setting("last-searched-page", null);
+
+    this._searchQuerySetting = new WebInspector.Setting("search-sidebar-query", "");
+    this._inputElement.value = this._searchQuerySetting.value;
+
+    this._searchKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command | WebInspector.KeyboardShortcut.Modifier.Shift, "F", this._focusSearchField.bind(this));
+
+    this._localStorageRootTreeElement = null;
+    this._sessionStorageRootTreeElement = null;
+
+    this._databaseRootTreeElement = null;
+    this._databaseHostTreeElementMap = {};
+
+    this._cookieStorageRootTreeElement = null;
+
+    this._applicationCacheRootTreeElement = null;
+    this._applicationCacheURLTreeElementMap = {};
+
+    WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.CookieStorageObjectWasAdded, this._cookieStorageObjectWasAdded, this);
+    WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.DOMStorageObjectWasAdded, this._domStorageObjectWasAdded, this);
+    WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.DOMStorageObjectWasInspected, this._domStorageObjectWasInspected, this);
+    WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.DatabaseWasAdded, this._databaseWasAdded, this);
+    WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.DatabaseWasInspected, this._databaseWasInspected, this);
+    WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.Cleared, this._storageCleared, this);
+
+    WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestAdded, this._frameManifestAdded, this);
+    WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestRemoved, this._frameManifestRemoved, this);
+
+    WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.MainFrameDidChange, this._mainFrameDidChange, this);
+    WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasAdded, this._frameWasAdded, this);
+
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.DOMNodeWasInspected, this._domNodeWasInspected, this);
+
+    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ScriptAdded, this._scriptWasAdded, this);
+    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ScriptsCleared, this._scriptsCleared, this);
+
+    this._resourcesContentTreeOutline = this.contentTreeOutline;
+    this._searchContentTreeOutline = this.createContentTreeOutline();
+
+    this._resourcesContentTreeOutline.onselect = this._treeElementSelected.bind(this);
+    this._searchContentTreeOutline.onselect = this._treeElementSelected.bind(this);
+
+    this._resourcesContentTreeOutline.includeSourceMapResourceChildren = true;
+};
+
+WebInspector.ResourceSidebarPanel.ResourceContentViewCookieType = "resource";
+WebInspector.ResourceSidebarPanel.CookieStorageContentViewCookieType = "cookie-storage";
+WebInspector.ResourceSidebarPanel.DatabaseContentViewCookieType = "database";
+WebInspector.ResourceSidebarPanel.DatabaseTableContentViewCookieType = "database-table";
+WebInspector.ResourceSidebarPanel.DOMStorageContentViewCookieType = "dom-storage";
+WebInspector.ResourceSidebarPanel.ApplicationCacheContentViewCookieType = "application-cache";
+
+WebInspector.ResourceSidebarPanel.prototype = {
+    constructor: WebInspector.ResourceSidebarPanel,
+
+    // Public
+
+    get contentTreeOutlineToAutoPrune()
+    {
+        return this._searchContentTreeOutline;
+    },
+
+    cookieForContentView: function(contentView)
+    {
+        console.assert(contentView instanceof WebInspector.FrameContentView || contentView instanceof WebInspector.ResourceClusterContentView || contentView instanceof WebInspector.ScriptContentView || contentView instanceof WebInspector.CookieStorageContentView || contentView instanceof WebInspector.DOMStorageContentView || contentView instanceof WebInspector.DatabaseTableContentView || contentView instanceof WebInspector.DatabaseContentView || contentView instanceof WebInspector.ApplicationCacheFrameContentView);
+
+        var representedObject = contentView.representedObject;
+
+        // The main frame does not need a URL, an empty cookie is enough.
+        if (representedObject instanceof WebInspector.Frame && representedObject.isMainFrame())
+            return {type: WebInspector.ResourceSidebarPanel.ResourceContentViewCookieType};
+
+        // If it has a URL, return a cookie with the frame/resource/script URL represented by the content view.
+        if (representedObject.url) {
+            console.assert(representedObject instanceof WebInspector.Frame || representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Script);
+            return {type: WebInspector.ResourceSidebarPanel.ResourceContentViewCookieType, url: contentView.representedObject.url};
+        }
+
+        var cookie = {};
+
+        if (representedObject instanceof WebInspector.CookieStorageObject) {
+            cookie.type = WebInspector.ResourceSidebarPanel.CookieStorageContentViewCookieType;
+            cookie.host = representedObject.host;
+        } else if (representedObject instanceof WebInspector.DatabaseObject) {
+            cookie.type = WebInspector.ResourceSidebarPanel.DatabaseContentViewCookieType;
+            cookie.host = representedObject.host;
+            cookie.name = representedObject.name;
+        } else if (representedObject instanceof WebInspector.DatabaseTableObject) {
+            cookie.type = WebInspector.ResourceSidebarPanel.DatabaseTableContentViewCookieType;
+            cookie.host = representedObject.database.host;
+            cookie.database = representedObject.database.name;
+            cookie.name = representedObject.name;
+        } else if (representedObject instanceof WebInspector.DOMStorageObject) {
+            cookie.type = WebInspector.ResourceSidebarPanel.DOMStorageContentViewCookieType;
+            cookie.isLocalStorage = representedObject.isLocalStorage();
+            cookie.host = representedObject.host;
+        } else if (representedObject instanceof WebInspector.ApplicationCacheFrame) {
+            cookie.type = WebInspector.ResourceSidebarPanel.ApplicationCacheContentViewCookieType;
+            cookie.frame = representedObject.frame.url;
+            cookie.manifest = representedObject.manifest.manifestURL;
+        } else if (representedObject instanceof WebInspector.Script) {
+            // If the Script does not have a URL, then there is not much more we can do to make a cookie.
+            // The URL case is handled above, do nothing here to prevent triggering the "Unknown" error below.
+            console.assert(!representedObject.url);
+        } else {
+            console.error("Unknown represented object.");
+        }
+
+        return cookie;
+    },
+
+    showContentViewForCookie: function(contentViewCookie)
+    {
+        if (!contentViewCookie || !contentViewCookie.type)
+            return;
+
+        this._contentViewCookieToShowWhenAvailable = contentViewCookie;
+
+        if (contentViewCookie.type === WebInspector.ResourceSidebarPanel.ResourceContentViewCookieType) {
+            // We can't show anything until we have the main frame in the sidebar. Otherwise the path components in the navigation bar would be missing.
+            if (!this._mainFrameTreeElement) {
+                this._contentViewCookieToShowWhenAvailable = contentViewCookie;
+                return;
+            }
+
+            var representedObject = contentViewCookie.url ? WebInspector.frameResourceManager.resourceForURL(contentViewCookie.url) : WebInspector.frameResourceManager.mainFrame;
+            if (!representedObject)
+                representedObject = WebInspector.frameResourceManager.mainFrame;
+
+            if (!representedObject)
+                return;
+
+            if (representedObject instanceof WebInspector.Resource && representedObject.isMainResource())
+                representedObject = representedObject.parentFrame;
+
+            this.treeElementForRepresentedObject(representedObject).revealAndSelect(true, true);
+
+            return;
+        }
+
+        // It must be a storage cookie.
+
+        function finalizeCookieChecking()
+        {
+            // Walk all the tree elements and match them based on type alone. So if you were looking at cookies
+            // on one site, and later open the inspector on another site, the new site's cookies will show.
+            var currentTreeElement = this.contentTreeOutline.children[0];
+            while (currentTreeElement && !currentTreeElement.root) {
+                if (this._checkStorageTreeElementAgainstPendingContentViewCookie(currentTreeElement, true))
+                    break;
+                currentTreeElement = currentTreeElement.traverseNextTreeElement(false, null, false);
+            }
+
+            delete this._contentViewCookieToShowWhenAvailable;
+            delete this._finalizeCookieCheckingTimeout;
+        }
+
+        if (this._finalizeCookieCheckingTimeout)
+            clearTimeout(this._finalizeCookieCheckingTimeout);
+
+        // When the specific storage item wasn't found we want to relax the check to show the first item with the
+        // same type. There is no good time to naturally declare the cookie wasn't found, so we do that on a timeout.
+        this._finalizeCookieCheckingTimeout = setTimeout(finalizeCookieChecking.bind(this), 500);
+    },
+
+    showMainFrameDOMTree: function(nodeToSelect, preventFocusChange)
+    {
+        var contentView = WebInspector.contentBrowser.contentViewForRepresentedObject(WebInspector.frameResourceManager.mainFrame);
+        contentView.showDOMTree(nodeToSelect, preventFocusChange);
+        WebInspector.contentBrowser.showContentView(contentView);
+    },
+
+    showMainFrameSourceCode: function()
+    {
+        var contentView = WebInspector.contentBrowser.contentViewForRepresentedObject(WebInspector.frameResourceManager.mainFrame);
+        contentView.showSourceCode();
+        WebInspector.contentBrowser.showContentView(contentView);
+    },
+
+    showSourceCodeForFrame: function(frameIdentifier, revealAndSelectTreeElement)
+    {
+        delete this._frameIdentifierToShowSourceCodeWhenAvailable;
+
+        // We can't show anything until we have the main frame in the sidebar.
+        // Otherwise the path components in the navigation bar would be missing.
+        var frame = WebInspector.frameResourceManager.frameForIdentifier(frameIdentifier);
+        if (!frame || !this._mainFrameTreeElement) {
+            this._frameIdentifierToShowSourceCodeWhenAvailable = frameIdentifier;
+            return;
+        }
+
+        var contentView = WebInspector.contentBrowser.contentViewForRepresentedObject(frame);
+        console.assert(contentView);
+        if (!contentView)
+            return;
+
+        contentView.showSourceCode();
+        WebInspector.contentBrowser.showContentView(contentView);
+
+        if (revealAndSelectTreeElement)
+            this.treeElementForRepresentedObject(frame).revealAndSelect(true, true, true, true);
+    },
+
+    showSourceCode: function(sourceCode, positionToReveal, textRangeToSelect, forceUnformatted)
+    {
+        var representedObject = sourceCode;
+
+        if (representedObject instanceof WebInspector.Script) {
+            // A script represented by a resource should always show the resource.
+            representedObject = representedObject.resource || representedObject;
+        }
+
+        // A main resource is always represented by its parent frame.
+        if (representedObject instanceof WebInspector.Resource && representedObject.isMainResource())
+            representedObject = representedObject.parentFrame;
+
+        var contentView = WebInspector.contentBrowser.contentViewForRepresentedObject(representedObject);
+
+        if (contentView instanceof WebInspector.FrameContentView)
+            contentView.showSourceCode(positionToReveal, textRangeToSelect, forceUnformatted);
+        else if (contentView instanceof WebInspector.ResourceClusterContentView)
+            contentView.showResponse(positionToReveal, textRangeToSelect, forceUnformatted);
+        else if (contentView instanceof WebInspector.ScriptContentView)
+            contentView.revealPosition(positionToReveal, textRangeToSelect, forceUnformatted);
+
+        WebInspector.contentBrowser.showContentView(contentView);
+    },
+
+    showSourceCodeLocation: function(sourceCodeLocation)
+    {
+        this.showSourceCode(sourceCodeLocation.displaySourceCode, sourceCodeLocation.displayPosition());
+    },
+
+    showOriginalUnformattedSourceCodeLocation: function(sourceCodeLocation)
+    {
+        this.showSourceCode(sourceCodeLocation.sourceCode, sourceCodeLocation.position(), undefined, true);
+    },
+
+    showOriginalOrFormattedSourceCodeLocation: function(sourceCodeLocation)
+    {
+        this.showSourceCode(sourceCodeLocation.sourceCode, sourceCodeLocation.formattedPosition());
+    },
+
+    showSourceCodeTextRange: function(sourceCodeTextRange)
+    {
+        var textRangeToSelect = sourceCodeTextRange.displayTextRange;
+        this.showSourceCode(sourceCodeTextRange.displaySourceCode, textRangeToSelect.startPosition(), textRangeToSelect);
+    },
+
+    showOriginalOrFormattedSourceCodeTextRange: function(sourceCodeTextRange)
+    {
+        var textRangeToSelect = sourceCodeTextRange.formattedTextRange;
+        this.showSourceCode(sourceCodeTextRange.sourceCode, textRangeToSelect.startPosition(), textRangeToSelect);
+    },
+
+    showResource: function(resource)
+    {
+        WebInspector.contentBrowser.showContentViewForRepresentedObject(resource.isMainResource() ? resource.parentFrame : resource);
+    },
+
+    showResourceRequest: function(resource)
+    {
+        var contentView = WebInspector.contentBrowser.contentViewForRepresentedObject(resource.isMainResource() ? resource.parentFrame : resource);
+
+        if (contentView instanceof WebInspector.FrameContentView)
+            var resourceContentView = contentView.showResource();
+        else if (contentView instanceof WebInspector.ResourceClusterContentView)
+            var resourceContentView = contentView;
+
+        console.assert(resourceContentView instanceof WebInspector.ResourceClusterContentView);
+        if (!(resourceContentView instanceof WebInspector.ResourceClusterContentView))
+            return;
+
+        resourceContentView.showRequest();
+
+        WebInspector.contentBrowser.showContentView(contentView);
+    },
+
+    treeElementForRepresentedObject: function(representedObject)
+    {
+        // A custom implementation is needed for this since the frames are populated lazily.
+
+        function isAncestor(ancestor, resourceOrFrame)
+        {
+            // SourceMapResources are descendants of another SourceCode object.
+            if (resourceOrFrame instanceof WebInspector.SourceMapResource) {
+                if (resourceOrFrame.sourceMap.originalSourceCode === ancestor)
+                    return true;
+
+                // Not a direct ancestor, so check the ancestors of the parent SourceCode object.
+                resourceOrFrame = resourceOrFrame.sourceMap.originalSourceCode;
+            }
+
+            var currentFrame = resourceOrFrame.parentFrame;
+            while (currentFrame) {
+                if (currentFrame === ancestor)
+                    return true;
+                currentFrame = currentFrame.parentFrame;
+            }
+
+            return false;
+        }
+
+        function getParent(resourceOrFrame)
+        {
+            // SourceMapResources are descendants of another SourceCode object.
+            if (resourceOrFrame instanceof WebInspector.SourceMapResource)
+                return resourceOrFrame.sourceMap.originalSourceCode;
+            return resourceOrFrame.parentFrame;
+        }
+
+        var treeElement = this._resourcesContentTreeOutline.findTreeElement(representedObject, isAncestor, getParent);
+        if (treeElement)
+            return treeElement;
+
+        // Only special case Script objects.
+        if (!(representedObject instanceof WebInspector.Script)) {
+            console.error("Didn't find a TreeElement for a representedObject associated with the ResourceSidebarPanel.");
+            return null;
+        }
+
+        // If the Script has a URL we should have found it earlier.
+        if (representedObject.url) {
+            console.error("Didn't find a ScriptTreeElement for a Script with a URL.");
+            return null;
+        }
+
+        // Since the Script does not have a URL we consider it an 'anonymous' script. These scripts happen from calls to
+        // window.eval() or browser features like Auto Fill and Reader. They are not normally added to the sidebar, but since
+        // we have a ScriptContentView asking for the tree element we will make a ScriptTreeElement on demand and add it.
+
+        if (!this._anonymousScriptsFolderTreeElement)
+            this._anonymousScriptsFolderTreeElement = new WebInspector.FolderTreeElement(WebInspector.UIString("Anonymous Scripts"));
+
+        if (!this._anonymousScriptsFolderTreeElement.parent) {
+            var index = insertionIndexForObjectInListSortedByFunction(this._anonymousScriptsFolderTreeElement, this._resourcesContentTreeOutline.children, this._compareTreeElements);
+            this._resourcesContentTreeOutline.insertChild(this._anonymousScriptsFolderTreeElement, index);
+        }
+
+        var scriptTreeElement = new WebInspector.ScriptTreeElement(representedObject);
+        this._anonymousScriptsFolderTreeElement.appendChild(scriptTreeElement);
+
+        return scriptTreeElement;
+    },
+
+    performSearch: function(searchTerm)
+    {
+        // Before performing a new search, clear the old search.
+        this._searchContentTreeOutline.removeChildren();
+
+        this._inputElement.value = searchTerm;
+        this._searchQuerySetting.value = searchTerm;
+        this._lastSearchedPageSetting.value = searchTerm && WebInspector.frameResourceManager.mainFrame ? WebInspector.frameResourceManager.mainFrame.url.hash : null;
+
+        this.hideEmptyContentPlaceholder();
+
+        searchTerm = searchTerm.trim();
+        if (!searchTerm.length) {
+            this.filterBar.placeholder = WebInspector.UIString("Filter Resource List");
+            this.contentTreeOutline = this._resourcesContentTreeOutline;
+            return;
+        }
+
+        this.filterBar.placeholder = WebInspector.UIString("Filter Search Results");
+        this.contentTreeOutline = this._searchContentTreeOutline;
+
+        var updateEmptyContentPlaceholderTimeout = null;
+
+        function updateEmptyContentPlaceholderSoon()
+        {
+            if (updateEmptyContentPlaceholderTimeout)
+                return;
+            updateEmptyContentPlaceholderTimeout = setTimeout(updateEmptyContentPlaceholder.bind(this), 100);
+        }
+
+        function updateEmptyContentPlaceholder()
+        {
+            if (updateEmptyContentPlaceholderTimeout) {
+                clearTimeout(updateEmptyContentPlaceholderTimeout);
+                updateEmptyContentPlaceholderTimeout = null;
+            }
+
+            this.updateEmptyContentPlaceholder(WebInspector.UIString("No Search Results"));
+        }
+
+        function resourcesCallback(error, result)
+        {
+            updateEmptyContentPlaceholderSoon.call(this);
+
+            if (error)
+                return;
+
+            for (var i = 0; i < result.length; ++i) {
+                var searchResult = result[i];
+                if (!searchResult.url || !searchResult.frameId)
+                    continue;
+
+                function resourceCallback(url, error, resourceMatches)
+                {
+                    updateEmptyContentPlaceholderSoon.call(this);
+
+                    if (error || !resourceMatches || !resourceMatches.length)
+                        return;
+
+                    var frame = WebInspector.frameResourceManager.frameForIdentifier(searchResult.frameId);
+                    if (!frame)
+                        return;
+
+                    var resource = frame.url === url ? frame.mainResource : frame.resourceForURL(url);
+                    if (!resource)
+                        return;
+
+                    var resourceTreeElement = this._searchTreeElementForResource(resource);
+
+                    for (var i = 0; i < resourceMatches.length; ++i) {
+                        var match = resourceMatches[i];
+
+                        var lineMatch;
+                        var searchRegex = new RegExp(searchTerm.escapeForRegExp(), "gi");
+                        while ((searchRegex.lastIndex < match.lineContent.length) && (lineMatch = searchRegex.exec(match.lineContent))) {
+                            var matchObject = new WebInspector.ResourceSearchMatchObject(resource, match.lineContent, searchTerm, new WebInspector.TextRange(match.lineNumber, lineMatch.index, match.lineNumber, searchRegex.lastIndex));
+                            var matchTreeElement = new WebInspector.SearchResultTreeElement(matchObject);
+                            resourceTreeElement.appendChild(matchTreeElement);
+                        }
+                    }
+
+                    updateEmptyContentPlaceholder.call(this);
+                }
+
+                PageAgent.searchInResource(searchResult.frameId, searchResult.url, searchTerm, false, false, resourceCallback.bind(this, searchResult.url));
+            }
+        }
+
+        function domCallback(error, searchId, resultsCount)
+        {
+            updateEmptyContentPlaceholderSoon.call(this);
+
+            if (error || !resultsCount)
+                return;
+
+            this._domSearchIdentifier = searchId;
+
+            function domSearchResults(error, nodeIds)
+            {
+                updateEmptyContentPlaceholderSoon.call(this);
+
+                if (error)
+                    return;
+
+                for (var i = 0; i < nodeIds.length; ++i) {
+                    // If someone started a new search, then return early and stop showing seach results from the old query.
+                    if (this._domSearchIdentifier !== searchId)
+                        return;
+
+                    var domNode = WebInspector.domTreeManager.nodeForId(nodeIds[i]);
+                    if (!domNode || !domNode.ownerDocument)
+                        continue;
+
+                    // We do not display the document node when the search query is "/". We don't have anything to display in the content view for it.
+                    if (domNode.nodeType() === Node.DOCUMENT_NODE)
+                        continue;
+
+                    // FIXME: Use this should use a frame to do resourceForURL, but DOMAgent does not provide a frameId.
+                    var resource = WebInspector.frameResourceManager.resourceForURL(domNode.ownerDocument.documentURL);
+                    if (!resource)
+                        continue;
+
+                    var resourceTreeElement = this._searchTreeElementForResource(resource);
+
+                    var domNodeTitle = WebInspector.DOMSearchMatchObject.titleForDOMNode(domNode);
+                    var searchRegex = new RegExp(searchTerm.escapeForRegExp(), "gi");
+
+                    // Textual matches.
+                    var lineMatch;
+                    var didFindTextualMatch = false;
+                    while ((searchRegex.lastIndex < domNodeTitle.length) && (lineMatch = searchRegex.exec(domNodeTitle))) {
+                        var matchObject = new WebInspector.DOMSearchMatchObject(resource, domNode, domNodeTitle, searchTerm, new WebInspector.TextRange(0, lineMatch.index, 0, searchRegex.lastIndex));
+                        var matchTreeElement = new WebInspector.SearchResultTreeElement(matchObject);
+                        resourceTreeElement.appendChild(matchTreeElement);
+                        didFindTextualMatch = true;
+                    }
+
+                    // Non-textual matches are CSS Selector or XPath matches. In such cases, display the node entirely highlighted.
+                    if (!didFindTextualMatch) {
+                        var matchObject = new WebInspector.DOMSearchMatchObject(resource, domNode, domNodeTitle, domNodeTitle, new WebInspector.TextRange(0, 0, 0, domNodeTitle.length));
+                        var matchTreeElement = new WebInspector.SearchResultTreeElement(matchObject);
+                        resourceTreeElement.appendChild(matchTreeElement);
+                    }
+
+                    updateEmptyContentPlaceholder.call(this);
+                }
+            }
+
+            DOMAgent.getSearchResults(searchId, 0, resultsCount, domSearchResults.bind(this));
+        }
+
+        WebInspector.domTreeManager.requestDocument();
+
+        // FIXME: Should we be searching for regexes or just plain text?
+        PageAgent.searchInResources(searchTerm, false, false, resourcesCallback.bind(this));
+
+        if ("_domSearchIdentifier" in this) {
+            DOMAgent.discardSearchResults(this._domSearchIdentifier);
+            delete this._domSearchIdentifier;
+        }
+
+        DOMAgent.performSearch(searchTerm, domCallback.bind(this));
+    },
+
+    // Private
+
+    _searchFieldChanged: function(event)
+    {
+        this.performSearch(event.target.value);
+    },
+
+    _searchFieldInput: function(event)
+    {
+        // If the search field is cleared, immediately clear the search results tree outline.
+        if (!event.target.value.length && this.contentTreeOutline === this._searchContentTreeOutline)
+            this.performSearch("");
+    },
+
+    _searchTreeElementForResource: function(resource)
+    {
+        // FIXME: This should take a frame ID (if one is available) - so we can differentiate between multiple resources
+        // with the same URL.
+
+        var resourceTreeElement = this._searchContentTreeOutline.getCachedTreeElement(resource);
+        if (!resourceTreeElement) {
+            resourceTreeElement = new WebInspector.ResourceTreeElement(resource);
+            resourceTreeElement.hasChildren = true;
+            resourceTreeElement.expand();
+
+            this._searchContentTreeOutline.appendChild(resourceTreeElement);
+        }
+
+        return resourceTreeElement;
+    },
+
+    _focusSearchField: function(keyboardShortcut, event)
+    {
+        this.show();
+
+        this._inputElement.select();
+    },
+
+    _mainFrameDidChange: function(event)
+    {
+        if (this._mainFrameTreeElement) {
+            this._mainFrameTreeElement.frame.removeEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainFrameMainResourceDidChange, this);
+            this._resourcesContentTreeOutline.removeChild(this._mainFrameTreeElement);
+            this._mainFrameTreeElement = null;
+        }
+
+        var newFrame = WebInspector.frameResourceManager.mainFrame;
+        if (newFrame) {
+            newFrame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainFrameMainResourceDidChange, this);
+            this._mainFrameTreeElement = new WebInspector.FrameTreeElement(newFrame);
+            this._resourcesContentTreeOutline.insertChild(this._mainFrameTreeElement, 0);
+
+            // Select by default. Allow onselect if we aren't showing a content view.
+            if (!this._resourcesContentTreeOutline.selectedTreeElement)
+                this._mainFrameTreeElement.revealAndSelect(true, false, !!WebInspector.contentBrowser.currentContentView);
+
+            if (this._frameIdentifierToShowSourceCodeWhenAvailable)
+                this.showSourceCodeForFrame(this._frameIdentifierToShowSourceCodeWhenAvailable, true);
+            else if (this._contentViewCookieToShowWhenAvailable) {
+                this.showContentViewForCookie(this._contentViewCookieToShowWhenAvailable);
+
+                // The cookie is only useful until the main frame loads.
+                delete this._contentViewCookieToShowWhenAvailable;
+            }
+        }
+
+        // We only care about the first time the main frame changes.
+        if (!this._waitingForInitialMainFrame)
+            return;
+
+        // Only if there is a main frame.
+        if (!newFrame)
+            return;
+
+        delete this._waitingForInitialMainFrame;
+
+        // Only if the last page searched is the same as the current page.
+        if (this._lastSearchedPageSetting.value !== newFrame.url.hash)
+            return;
+
+        // Search for whatever is in the input field. This was populated with the last used search term.
+        this.performSearch(this._inputElement.value);
+    },
+
+    _mainFrameMainResourceDidChange: function(event)
+    {
+        var currentContentView = WebInspector.contentBrowser.currentContentView;
+        var wasShowingResourceContentView = currentContentView instanceof WebInspector.ResourceContentView
+            || currentContentView instanceof WebInspector.FrameContentView || currentContentView instanceof WebInspector.ScriptContentView;
+
+        // Close all resource and frame content views since the main frame has navigated and all resources are cleared.
+        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.ResourceClusterContentView);
+        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.FrameContentView);
+        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.ScriptContentView);
+
+        function delayedWork()
+        {
+            // Show the main frame since there is no content view showing or we were showing a resource before.
+            // FIXME: We could try to select the same resource that was selected before in the case of a reload.
+            if (!WebInspector.contentBrowser.currentContentView || wasShowingResourceContentView)
+                this._mainFrameTreeElement.revealAndSelect(true, false);
+        }
+
+        // Delay this work because other listeners of this event might not have fired yet. So selecting the main frame
+        // before those listeners do their work might cause the content of the old page to show instead of the new page.
+        setTimeout(delayedWork.bind(this), 0);
+    },
+
+    _frameWasAdded: function(event)
+    {
+        if (!this._frameIdentifierToShowSourceCodeWhenAvailable)
+            return;
+
+        var frame = event.data.frame;
+        if (frame.id !== this._frameIdentifierToShowSourceCodeWhenAvailable)
+            return;
+
+        this.showSourceCodeForFrame(frame.id, true);
+    },
+
+    _scriptWasAdded: function(event)
+    {
+        var script = event.data.script;
+
+        // We don't add scripts without URLs here. Those scripts can quickly clutter the interface and
+        // are usually more transient. They will get added if/when they need to be shown in a content view.
+        if (!script.url)
+            return;
+
+        // If the script URL matches a resource we can assume it is part of that resource and does not need added.
+        if (script.resource)
+            return;
+
+        if (script.injected) {
+            if (!this._extensionScriptsFolderTreeElement)
+                this._extensionScriptsFolderTreeElement = new WebInspector.FolderTreeElement(WebInspector.UIString("Extension Scripts"));
+            var parentFolderTreeElement = this._extensionScriptsFolderTreeElement;
+        } else {
+            if (!this._extraScriptsFolderTreeElement)
+                this._extraScriptsFolderTreeElement = new WebInspector.FolderTreeElement(WebInspector.UIString("Extra Scripts"));
+            var parentFolderTreeElement = this._extraScriptsFolderTreeElement;
+        }
+
+        if (!parentFolderTreeElement.parent) {
+            var index = insertionIndexForObjectInListSortedByFunction(parentFolderTreeElement, this._resourcesContentTreeOutline.children, this._compareTreeElements);
+            this._resourcesContentTreeOutline.insertChild(parentFolderTreeElement, index);
+        }
+
+        var scriptTreeElement = new WebInspector.ScriptTreeElement(script);
+        parentFolderTreeElement.appendChild(scriptTreeElement);
+    },
+
+    _scriptsCleared: function(event)
+    {
+        if (this._extensionScriptsFolderTreeElement) {
+            if (this._extensionScriptsFolderTreeElement.parent)
+                this._extensionScriptsFolderTreeElement.parent.removeChild(this._extensionScriptsFolderTreeElement);
+            this._extensionScriptsFolderTreeElement = null;
+        }
+
+        if (this._extraScriptsFolderTreeElement) {
+            if (this._extraScriptsFolderTreeElement.parent)
+                this._extraScriptsFolderTreeElement.parent.removeChild(this._extraScriptsFolderTreeElement);
+            this._extraScriptsFolderTreeElement = null;
+        }
+
+        if (this._anonymousScriptsFolderTreeElement) {
+            if (this._anonymousScriptsFolderTreeElement.parent)
+                this._anonymousScriptsFolderTreeElement.parent.removeChild(this._anonymousScriptsFolderTreeElement);
+            this._anonymousScriptsFolderTreeElement = null;
+        }
+    },
+
+    _treeElementSelected: function(treeElement, selectedByUser)
+    {
+        if (treeElement instanceof WebInspector.FolderTreeElement)
+            return;
+
+        if (treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement ||
+            treeElement instanceof WebInspector.StorageTreeElement || treeElement instanceof WebInspector.DatabaseTableTreeElement ||
+            treeElement instanceof WebInspector.DatabaseTreeElement || treeElement instanceof WebInspector.ApplicationCacheFrameTreeElement) {
+            WebInspector.contentBrowser.showContentViewForRepresentedObject(treeElement.representedObject);
+            return;
+        }
+
+        console.assert(treeElement instanceof WebInspector.SearchResultTreeElement);
+        if (!(treeElement instanceof WebInspector.SearchResultTreeElement))
+            return;
+
+        if (treeElement.representedObject instanceof WebInspector.DOMSearchMatchObject)
+            this.showMainFrameDOMTree(treeElement.representedObject.domNode, true);
+        else if (treeElement.representedObject instanceof WebInspector.ResourceSearchMatchObject)
+            this.showOriginalOrFormattedSourceCodeTextRange(treeElement.representedObject.sourceCodeTextRange);
+    },
+
+    _domNodeWasInspected: function(event)
+    {
+        this.showMainFrameDOMTree(event.data.node);
+    },
+
+    _checkStorageTreeElementAgainstPendingContentViewCookie: function(treeElement, matchOnTypeAlone)
+    {
+        var contentViewCookie = this._contentViewCookieToShowWhenAvailable;
+        if (!contentViewCookie || !contentViewCookie.type)
+            return false;
+
+        if (contentViewCookie.type === WebInspector.ResourceSidebarPanel.ResourceContentViewCookieType)
+            return;
+
+        var representedObject = treeElement.representedObject;
+
+        switch (contentViewCookie.type) {
+        case WebInspector.ResourceSidebarPanel.CookieStorageContentViewCookieType:
+            if (!(representedObject instanceof WebInspector.CookieStorageObject))
+                return;
+            if (!matchOnTypeAlone && representedObject.host !== contentViewCookie.host)
+                return false;
+            break;
+
+        case WebInspector.ResourceSidebarPanel.DatabaseContentViewCookieType:
+            if (!(representedObject instanceof WebInspector.DatabaseObject))
+                return false;
+            if (!matchOnTypeAlone && representedObject.host !== contentViewCookie.host)
+                return false;
+            if (!matchOnTypeAlone && representedObject.name !== contentViewCookie.name)
+                return false;
+            break;
+
+        case WebInspector.ResourceSidebarPanel.DatabaseTableContentViewCookieType:
+            // FIXME: This isn't easy to implement like the others since DatabaseTreeElement
+            // populates the tables instead of ResourceSidebarPanel. Just select the database.
+            if (!(representedObject instanceof WebInspector.DatabaseObject))
+                return false;
+            if (!matchOnTypeAlone && representedObject.host !== contentViewCookie.host)
+                return false;
+            if (!matchOnTypeAlone && representedObject.name !== contentViewCookie.database)
+                return false;
+            return;
+
+        case WebInspector.ResourceSidebarPanel.DOMStorageContentViewCookieType:
+            if (!(representedObject instanceof WebInspector.DOMStorageObject))
+                return false;
+            if (!matchOnTypeAlone && representedObject.host !== contentViewCookie.host)
+                return false;
+            if (!matchOnTypeAlone && representedObject.isLocalStorage() !== contentViewCookie.isLocalStorage)
+                return false;
+            break;
+
+        case WebInspector.ResourceSidebarPanel.ApplicationCacheContentViewCookieType:
+            if (!(representedObject instanceof WebInspector.ApplicationCacheFrame))
+                return;
+            if (!matchOnTypeAlone && representedObject.frame.url !== contentViewCookie.frame)
+                return;
+            if (!matchOnTypeAlone && representedObject.manifest.manifestURL !== contentViewCookie.manifest)
+                return false;
+            break;
+
+        default:
+            console.assert("Unknown content view cookie type.");
+            return false;
+        }
+
+        // If we got here, then the tree element was a match to the content view cookie.
+        // Selecting the tree element will cause the content view to show.
+        treeElement.revealAndSelect(true, true);
+
+        return true;
+    },
+
+    _domStorageObjectWasAdded: function(event)
+    {
+        var domStorage = event.data.domStorage;
+        var storageElement = new WebInspector.DOMStorageTreeElement(domStorage);
+
+        if (domStorage.isLocalStorage())
+            this._localStorageRootTreeElement = this._addStorageChild(storageElement, this._localStorageRootTreeElement, WebInspector.UIString("Local Storage"));
+        else
+            this._sessionStorageRootTreeElement = this._addStorageChild(storageElement, this._sessionStorageRootTreeElement, WebInspector.UIString("Session Storage"));
+
+        this._checkStorageTreeElementAgainstPendingContentViewCookie(storageElement);
+    },
+
+    _domStorageObjectWasInspected: function(event)
+    {
+        var domStorage = event.data.domStorage;
+        var treeElement = this.treeElementForRepresentedObject(domStorage);
+        treeElement.revealAndSelect(true);
+    },
+
+    _databaseWasAdded: function(event)
+    {
+        var database = event.data.database;
+
+        console.assert(database instanceof WebInspector.DatabaseObject);
+
+        if (!this._databaseHostTreeElementMap[database.host]) {
+            this._databaseHostTreeElementMap[database.host] = new WebInspector.DatabaseHostTreeElement(database.host);
+            this._databaseRootTreeElement = this._addStorageChild(this._databaseHostTreeElementMap[database.host], this._databaseRootTreeElement, WebInspector.UIString("Databases"));
+        }
+
+        var databaseElement = new WebInspector.DatabaseTreeElement(database);
+        this._databaseHostTreeElementMap[database.host].appendChild(databaseElement);
+
+        this._checkStorageTreeElementAgainstPendingContentViewCookie(databaseElement);
+    },
+
+    _databaseWasInspected: function(event)
+    {
+        var database = event.data.database;
+        var treeElement = this.treeElementForRepresentedObject(database);
+        treeElement.revealAndSelect(true);
+    },
+
+    _cookieStorageObjectWasAdded: function(event)
+    {
+        console.assert(event.data.cookieStorage instanceof WebInspector.CookieStorageObject);
+
+        var cookieElement = new WebInspector.CookieStorageTreeElement(event.data.cookieStorage);
+        this._cookieStorageRootTreeElement = this._addStorageChild(cookieElement, this._cookieStorageRootTreeElement, WebInspector.UIString("Cookies"));
+
+        this._checkStorageTreeElementAgainstPendingContentViewCookie(cookieElement);
+    },
+
+    _frameManifestAdded: function(event)
+    {
+        var frameManifest = event.data.frameManifest;
+        console.assert(frameManifest instanceof WebInspector.ApplicationCacheFrame);
+
+        var manifest = frameManifest.manifest;
+        var manifestURL = manifest.manifestURL;
+        if (!this._applicationCacheURLTreeElementMap[manifestURL]) {
+            this._applicationCacheURLTreeElementMap[manifestURL] = new WebInspector.ApplicationCacheManifestTreeElement(manifest);
+            this._applicationCacheRootTreeElement = this._addStorageChild(this._applicationCacheURLTreeElementMap[manifestURL], this._applicationCacheRootTreeElement, WebInspector.UIString("Application Cache"));
+        }
+
+        var frameCacheElement = new WebInspector.ApplicationCacheFrameTreeElement(frameManifest);
+        this._applicationCacheURLTreeElementMap[manifestURL].appendChild(frameCacheElement);
+
+        this._checkStorageTreeElementAgainstPendingContentViewCookie(frameCacheElement);
+    },
+
+    _frameManifestRemoved: function(event)
+    {
+         // FIXME: Implement this.
+    },
+
+    _compareTreeElements: function(a, b)
+    {
+        // Always sort the main frame element first.
+        if (a instanceof WebInspector.FrameTreeElement)
+            return -1;
+        if (b instanceof WebInspector.FrameTreeElement)
+            return 1;
+
+        console.assert(a.mainTitle);
+        console.assert(b.mainTitle);
+
+        return (a.mainTitle || "").localeCompare(b.mainTitle || "");
+    },
+
+    _addStorageChild: function(childElement, parentElement, folderName)
+    {
+        if (!parentElement) {
+            childElement.flattened = true;
+
+            this._resourcesContentTreeOutline.insertChild(childElement, insertionIndexForObjectInListSortedByFunction(childElement, this._resourcesContentTreeOutline.children, this._compareTreeElements));
+
+            return childElement;
+        }
+
+        if (parentElement instanceof WebInspector.StorageTreeElement) {
+            console.assert(parentElement.flattened);
+
+            var previousOnlyChild = parentElement;
+            previousOnlyChild.flattened = false;
+            this._resourcesContentTreeOutline.removeChild(previousOnlyChild);
+
+            var folderElement = new WebInspector.FolderTreeElement(folderName, null, null);
+            this._resourcesContentTreeOutline.insertChild(folderElement, insertionIndexForObjectInListSortedByFunction(folderElement, this._resourcesContentTreeOutline.children, this._compareTreeElements));
+
+            folderElement.appendChild(previousOnlyChild);
+            folderElement.insertChild(childElement, insertionIndexForObjectInListSortedByFunction(childElement, folderElement.children, this._compareTreeElements));
+
+            return folderElement;
+        }
+
+        console.assert(parentElement instanceof WebInspector.FolderTreeElement);
+        parentElement.insertChild(childElement, insertionIndexForObjectInListSortedByFunction(childElement, parentElement.children, this._compareTreeElements));
+
+        return parentElement;
+    },
+
+    _storageCleared: function(event)
+    {
+        // Close all DOM and cookie storage content views since the main frame has navigated and all storages are cleared.
+        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.CookieStorageContentView);
+        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.DOMStorageContentView);
+        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.DatabaseTableContentView);
+        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.DatabaseContentView);
+        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.ApplicationCacheFrameContentView);
+
+        if (this._localStorageRootTreeElement && this._localStorageRootTreeElement.parent)
+            this._localStorageRootTreeElement.parent.removeChild(this._localStorageRootTreeElement);
+
+        if (this._sessionStorageRootTreeElement && this._sessionStorageRootTreeElement.parent)
+            this._sessionStorageRootTreeElement.parent.removeChild(this._sessionStorageRootTreeElement);
+
+        if (this._databaseRootTreeElement && this._databaseRootTreeElement.parent)
+            this._databaseRootTreeElement.parent.removeChild(this._databaseRootTreeElement);
+
+        if (this._cookieStorageRootTreeElement && this._cookieStorageRootTreeElement.parent)
+            this._cookieStorageRootTreeElement.parent.removeChild(this._cookieStorageRootTreeElement);
+
+        if (this._applicationCacheRootTreeElement && this._applicationCacheRootTreeElement.parent)
+            this._applicationCacheRootTreeElement.parent.removeChild(this._applicationCacheRootTreeElement);
+
+        this._localStorageRootTreeElement = null;
+        this._sessionStorageRootTreeElement = null;
+        this._databaseRootTreeElement = null;
+        this._databaseHostTreeElementMap = {};
+        this._cookieStorageRootTreeElement = null;
+        this._applicationCacheRootTreeElement = null;
+        this._applicationCacheURLTreeElementMap = {};
+    }
+};
+
+WebInspector.ResourceSidebarPanel.prototype.__proto__ = WebInspector.NavigationSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNode.js
new file mode 100644
index 000000000..ad8d1b045
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNode.js
@@ -0,0 +1,309 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceTimelineDataGridNode = function(resourceTimelineRecord)
+{
+    WebInspector.DataGridNode.call(this, {});
+
+    this._record = resourceTimelineRecord;
+
+    this._record.addEventListener(WebInspector.TimelineRecord.Event.Updated, this._needsRefresh, this);
+    this._record.resource.addEventListener(WebInspector.Resource.Event.URLDidChange, this._needsRefresh, this);
+    this._record.resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._needsRefresh, this);
+    this._record.resource.addEventListener(WebInspector.Resource.Event.LoadingDidFinish, this._needsRefresh, this);
+    this._record.resource.addEventListener(WebInspector.Resource.Event.LoadingDidFail, this._needsRefresh, this);
+    this._record.resource.addEventListener(WebInspector.Resource.Event.SizeDidChange, this._needsRefresh, this);
+    this._record.resource.addEventListener(WebInspector.Resource.Event.TransferSizeDidChange, this._needsRefresh, this);
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.ResourceTimelineDataGridNode);
+
+WebInspector.ResourceTimelineDataGridNode.IconStyleClassName = "icon";
+WebInspector.ResourceTimelineDataGridNode.ErrorStyleClassName = "error";
+
+WebInspector.ResourceTimelineDataGridNode.Event = {
+    NeedsRefresh: "resource-timeline-data-grid-node-needs-refresh"
+};
+
+WebInspector.ResourceTimelineDataGridNode.prototype = {
+    constructor: WebInspector.ResourceTimelineDataGridNode,
+
+    // Public
+
+    get record()
+    {
+        return this._record;
+    },
+
+    get data()
+    {
+        if (this._cachedData)
+            return this._cachedData;
+
+        var resource = this._record.resource;
+
+        var data = {};
+        data.name = WebInspector.displayNameForURL(resource.url, resource.urlComponents);
+        data.domain = WebInspector.displayNameForHost(resource.urlComponents.host);
+        data.type = resource.type;
+        data.statusCode = resource.statusCode;
+        data.cached = resource.cached;
+        data.size = resource.size;
+        data.transferSize = resource.transferSize;
+        data.duration = resource.receiveDuration;
+        data.latency = resource.latency;
+        data.timeline = resource.responseReceivedTimestamp || resource.requestSentTimestamp;
+
+        this._cachedData = data;
+        return data;
+    },
+
+    createCellContent: function(columnIdentifier, cell)
+    {
+        var resource = this._record.resource;
+
+        if (resource.failed || resource.canceled || resource.statusCode >= 400)
+            cell.classList.add(WebInspector.ResourceTimelineDataGridNode.ErrorStyleClassName);
+
+        const emptyValuePlaceholderString = "\u2014";
+        var value = this.data[columnIdentifier];
+
+        switch (columnIdentifier) {
+        case "name":
+            cell.classList.add(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
+            cell.classList.add(resource.type);
+
+            var fragment = document.createDocumentFragment();
+
+            var gotToButton = WebInspector.createGoToArrowButton();
+            gotToButton.addEventListener("click", this._goToResource.bind(this));
+            fragment.appendChild(gotToButton);
+
+            var icon = document.createElement("div");
+            icon.className = WebInspector.ResourceTimelineDataGridNode.IconStyleClassName;
+            fragment.appendChild(icon);
+
+            var text = document.createTextNode(value);
+            fragment.appendChild(text);
+
+            cell.title = resource.url;
+
+            return fragment;
+
+        case "type":
+            return WebInspector.Resource.Type.displayName(value);
+
+        case "statusCode":
+            cell.title = resource.statusText || "";
+            return value || emptyValuePlaceholderString;
+
+        case "cached":
+            return value ? WebInspector.UIString("Yes") : WebInspector.UIString("No");
+
+        case "domain":
+            return value || emptyValuePlaceholderString;
+
+        case "size":
+        case "transferSize":
+            return isNaN(value) ? emptyValuePlaceholderString : Number.bytesToString(value);
+
+        case "latency":
+        case "duration":
+            return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value);
+
+        case "timeline":
+            return this._createGraphElement();
+        }
+
+        return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier);
+    },
+
+    refresh: function()
+    {
+        delete this._cachedData;
+
+        WebInspector.DataGridNode.prototype.refresh.call(this);
+    },
+
+    updateLayout: function()
+    {
+        this._refreshLabelPositions();
+    },
+
+    select: function(supressSelectedEvent)
+    {
+        if (this.element.classList.contains(WebInspector.TimelinesContentView.OffscreenDataGridRowStyleClassName))
+            this.element.classList.remove(WebInspector.TimelinesContentView.OffscreenDataGridRowStyleClassName);
+
+        WebInspector.DataGridNode.prototype.select.call(this, supressSelectedEvent);
+
+        this._refreshLabelPositions();
+    },
+
+    // Private
+
+    _needsRefresh: function()
+    {
+        this.dispatchEventToListeners(WebInspector.ResourceTimelineDataGridNode.Event.NeedsRefresh);
+    },
+
+    _goToResource: function(event)
+    {
+        WebInspector.resourceSidebarPanel.showSourceCode(this._record.resource);
+    },
+
+    _createGraphElement: function(cell)
+    {
+        if (!this._graphElement) {
+            this._graphElement = document.createElement("div");
+            this._graphElement.className = "network-graph-side";
+
+            this._barAreaElement = document.createElement("div");
+            this._barAreaElement.className = "network-graph-bar-area";
+            this._barAreaElement.resource = this._record.resource;
+            this._graphElement.appendChild(this._barAreaElement);
+
+            this._barLeftElement = document.createElement("div");
+            this._barLeftElement.className = "network-graph-bar waiting";
+            this._barAreaElement.appendChild(this._barLeftElement);
+
+            this._barRightElement = document.createElement("div");
+            this._barRightElement.className = "network-graph-bar";
+            this._barAreaElement.appendChild(this._barRightElement);
+
+            this._labelLeftElement = document.createElement("div");
+            this._labelLeftElement.className = "network-graph-label waiting";
+            this._barAreaElement.appendChild(this._labelLeftElement);
+
+            this._labelRightElement = document.createElement("div");
+            this._labelRightElement.className = "network-graph-label";
+            this._barAreaElement.appendChild(this._labelRightElement);
+
+            this._graphElement.addEventListener("mouseover", this._refreshLabelPositions.bind(this));
+        }
+
+        this._refreshGraph();
+
+        return this._graphElement;
+    },
+
+    _refreshGraph: function(c)
+    {
+        var resource = this._record.resource;
+        if (resource.cached)
+            this._graphElement.classList.add("resource-cached");
+
+        var calculator = this.dataGrid.currentCalculator;
+        var percentages = calculator.computeBarGraphPercentages(resource);
+        this._percentages = percentages;
+
+        if (!this._graphElement.classList.contains("network-" + resource.type)) {
+            this._graphElement.removeMatchingStyleClasses("network-resource-type-\\w+");
+            this._graphElement.classList.add("network-" + resource.type);
+        }
+
+        this._barLeftElement.style.setProperty("left", percentages.start + "%");
+        this._barRightElement.style.setProperty("right", (100 - percentages.end) + "%");
+
+        this._barLeftElement.style.setProperty("right", (100 - percentages.end) + "%");
+        this._barRightElement.style.setProperty("left", percentages.middle + "%");
+
+        var labels = calculator.computeBarGraphLabels(resource);
+        this._labelLeftElement.textContent = labels.left;
+        this._labelRightElement.textContent = labels.right;
+
+        var tooltip = (labels.tooltip || "");
+        this._barLeftElement.title = tooltip;
+        this._labelLeftElement.title = tooltip;
+        this._labelRightElement.title = tooltip;
+        this._barRightElement.title = tooltip;
+    },
+
+    _refreshLabelPositions: function()
+    {
+        if (!this._percentages)
+            return;
+
+        this._labelLeftElement.style.removeProperty("left");
+        this._labelLeftElement.style.removeProperty("right");
+        this._labelLeftElement.classList.remove("before");
+        this._labelLeftElement.classList.remove("hidden");
+
+        this._labelRightElement.style.removeProperty("left");
+        this._labelRightElement.style.removeProperty("right");
+        this._labelRightElement.classList.remove("after");
+        this._labelRightElement.classList.remove("hidden");
+
+        const labelPadding = 10;
+        const leftLabelWidth = this._labelLeftElement.offsetWidth + labelPadding;
+        const rightLabelWidth = this._labelRightElement.offsetWidth + labelPadding;
+
+        const barRightElementOffsetWidth = this._barRightElement.offsetWidth;
+        const barLeftElementOffsetWidth = this._barLeftElement.offsetWidth;
+
+        const leftBarWidth = barLeftElementOffsetWidth - barRightElementOffsetWidth;
+        const rightBarWidth = barRightElementOffsetWidth;
+
+        const leftCallout = (leftLabelWidth > leftBarWidth);
+        const rightCallout = (rightLabelWidth > rightBarWidth);
+
+        // Hide the left or right callout if there is not enough space.
+        const graphElementOffsetWidth = this._graphElement.offsetWidth;
+        if (leftCallout && (graphElementOffsetWidth * (this._percentages.start / 100)) < leftLabelWidth)
+            var leftHidden = true;
+        if (rightCallout && (graphElementOffsetWidth * ((100 - this._percentages.end) / 100)) < rightLabelWidth)
+            var rightHidden = true;
+
+        // The left/right label data are the same, so a before/after label can be replaced by a single on-bar label.
+        if (barLeftElementOffsetWidth == barRightElementOffsetWidth) {
+            if (leftCallout && !rightCallout)
+                leftHidden = true;
+            else if (rightCallout && !leftCallout)
+                rightHidden = true;
+        }
+
+        if (leftCallout) {
+            if (leftHidden)
+                this._labelLeftElement.classList.add("hidden");
+            this._labelLeftElement.style.setProperty("right", (100 - this._percentages.start) + "%");
+            this._labelLeftElement.classList.add("before");
+        } else {
+            this._labelLeftElement.style.setProperty("left", this._percentages.start + "%");
+            this._labelLeftElement.style.setProperty("right", (100 - this._percentages.middle) + "%");
+        }
+
+        if (rightCallout) {
+            if (rightHidden)
+                this._labelRightElement.classList.add("hidden");
+            this._labelRightElement.style.setProperty("left", this._percentages.end + "%");
+            this._labelRightElement.classList.add("after");
+        } else {
+            this._labelRightElement.style.setProperty("left", this._percentages.middle + "%");
+            this._labelRightElement.style.setProperty("right", (100 - this._percentages.end) + "%");
+        }
+    }
+}
+
+WebInspector.ResourceTimelineDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNodePathComponent.js b/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNodePathComponent.js
new file mode 100644
index 000000000..a4322b9a2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNodePathComponent.js
@@ -0,0 +1,60 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceTimelineDataGridNodePathComponent = function(resourceTimelineDataGridNode) {
+    var resource = resourceTimelineDataGridNode.record.resource;
+    var classNames = [WebInspector.ResourceTreeElement.ResourceIconStyleClassName, resource.type];
+
+    WebInspector.HierarchicalPathComponent.call(this, resourceTimelineDataGridNode.data.name, classNames, resource);
+
+    this._resourceTimelineDataGridNode = resourceTimelineDataGridNode;
+};
+
+WebInspector.ResourceTimelineDataGridNodePathComponent.prototype = {
+    constructor: WebInspector.ResourceTimelineDataGridNodePathComponent,
+
+    // Public
+
+    get resourceTimelineDataGridNode()
+    {
+        return this._resourceTimelineDataGridNode;
+    },
+
+    get previousSibling()
+    {
+        if (!this._resourceTimelineDataGridNode.previousSibling)
+            return null;
+        return new WebInspector.ResourceTimelineDataGridNodePathComponent(this._resourceTimelineDataGridNode.previousSibling);
+    },
+
+    get nextSibling()
+    {
+        if (!this._resourceTimelineDataGridNode.nextSibling)
+            return null;
+        return new WebInspector.ResourceTimelineDataGridNodePathComponent(this._resourceTimelineDataGridNode.nextSibling);
+    }
+};
+
+WebInspector.ResourceTimelineDataGridNodePathComponent.prototype.__proto__ = WebInspector.HierarchicalPathComponent.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceTimelineRecord.js b/Source/WebInspectorUI/UserInterface/ResourceTimelineRecord.js
new file mode 100644
index 000000000..35bfe59d2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ResourceTimelineRecord.js
@@ -0,0 +1,72 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceTimelineRecord = function(resource)
+{
+    WebInspector.TimelineRecord.call(this, WebInspector.TimelineRecord.Type.Network);
+
+    this._resource = resource;
+    this._resource.addEventListener(WebInspector.Resource.Event.TimestampsDidChange, this._dispatchUpdatedEvent, this);
+};
+
+WebInspector.ResourceTimelineRecord.prototype = {
+    constructor: WebInspector.ResourceTimelineRecord,
+
+    // Public
+
+    get resource()
+    {
+        return this._resource;
+    },
+
+    get startTime()
+    {
+        return this._resource.firstTimestamp;
+    },
+
+    get endTime()
+    {
+        return this._resource.lastTimestamp;
+    },
+
+    get waitingDuration()
+    {
+        return this._resource.latency;
+    },
+
+    get activeDuration()
+    {
+        return this._resource.receiveDuration;
+    },
+
+    // Private
+
+    _dispatchUpdatedEvent: function()
+    {
+        this.dispatchEventToListeners(WebInspector.TimelineRecord.Event.Updated);
+    }
+};
+
+WebInspector.ResourceTimelineRecord.prototype.__proto__ = WebInspector.TimelineRecord.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceTreeElement.css b/Source/WebInspectorUI/UserInterface/ResourceTreeElement.css
new file mode 100644
index 000000000..67e9eb876
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ResourceTreeElement.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.item.resource.failed {
+    color: rgb(224, 16, 16) !important;
+}
+
+.item.resource.failed .subtitle {
+    color: rgba(224, 16, 16, 0.7) !important;
+}
+
+.item.resource > .status > .reload-button {
+    width: 16px;
+    height: 16px;
+    content: url(Images/Reload.svg);
+}
+
+.item.resource.selected > .status > .reload-button {
+    content: url(Images/ReloadSelected.svg);
+}
diff --git a/Source/WebInspectorUI/UserInterface/ResourceTreeElement.js b/Source/WebInspectorUI/UserInterface/ResourceTreeElement.js
new file mode 100644
index 000000000..dcd5b0eb7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ResourceTreeElement.js
@@ -0,0 +1,214 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceTreeElement = function(resource, representedObject)
+{
+    console.assert(resource instanceof WebInspector.Resource);
+
+    WebInspector.SourceCodeTreeElement.call(this, resource, [WebInspector.ResourceTreeElement.StyleClassName, WebInspector.ResourceTreeElement.ResourceIconStyleClassName, resource.type], "", "", representedObject || resource, false);
+
+    this._updateResource(resource);
+};
+
+WebInspector.ResourceTreeElement.StyleClassName = "resource";
+WebInspector.ResourceTreeElement.ResourceIconStyleClassName = "resource-icon";
+WebInspector.ResourceTreeElement.FailedStyleClassName = "failed";
+
+WebInspector.ResourceTreeElement.compareResourceTreeElements = function(a, b)
+{
+    // Compare by type first to keep resources grouped by type when not sorted into folders.
+    var comparisonResult = a.resource.type.localeCompare(b.resource.type);
+    if (comparisonResult !== 0)
+        return comparisonResult;
+
+    // Compare async resource types by their first timestamp so they are in chronological order.
+    if (a.resource.type === WebInspector.Resource.Type.XHR || a.resource.type === WebInspector.Resource.Type.WebSocket)
+        return a.resource.firstTimestamp - b.resource.firstTimestamp || 0;
+
+    // Compare by subtitle when the types are the same. The subtitle is used to show the
+    // domain of the resource. This causes resources to group by domain. If the resource
+    // is on the same domain as the frame it will have an empty subtitle. This is good
+    // because empty string sorts first, so those will appear before external resources.
+    comparisonResult = a.subtitle.localeCompare(b.subtitle);
+    if (comparisonResult !== 0)
+        return comparisonResult;
+
+    // Compare by title when the subtitles are the same.
+    return a.mainTitle.localeCompare(b.mainTitle);
+}
+
+WebInspector.ResourceTreeElement.compareFolderAndResourceTreeElements = function(a, b)
+{
+    var aIsFolder = a instanceof WebInspector.FolderTreeElement;
+    var bIsFolder = b instanceof WebInspector.FolderTreeElement;
+
+    if (aIsFolder && !bIsFolder)
+        return -1;
+    if (!aIsFolder && bIsFolder)
+        return 1;
+    if (aIsFolder && bIsFolder)
+        return a.mainTitle.localeCompare(b.mainTitle);
+
+    return WebInspector.ResourceTreeElement.compareResourceTreeElements(a, b);
+}
+
+WebInspector.ResourceTreeElement.prototype = {
+    constructor: WebInspector.ResourceTreeElement,
+
+    // Public
+
+    get resource()
+    {
+        return this._resource;
+    },
+
+    get filterableData()
+    {
+        return {text: this._resource.url};
+    },
+
+    get reloadButton()
+    {
+        if (!this._reloadButton) {
+            this._reloadButton = document.createElement("img");
+            this._reloadButton.className = "reload-button";
+            this._reloadButton.title = WebInspector.UIString("Reload page (%s)\nReload ignoring cache (%s)").format(WebInspector._reloadPageKeyboardShortcut.displayName, WebInspector._reloadPageIgnoringCacheKeyboardShortcut.displayName);
+            this._reloadButton.addEventListener("click", this._reloadPageClicked.bind(this));
+        }
+        return this._reloadButton;
+    },
+
+    ondblclick: function()
+    {
+        InspectorFrontendHost.openInNewTab(this._resource.url);
+    },
+
+    // Protected (Used by FrameTreeElement)
+
+    _updateResource: function(resource)
+    {
+        console.assert(resource instanceof WebInspector.Resource);
+
+        // This method is for subclasses like FrameTreeElement who don't use a resource as the representedObject.
+        // This method should only be called once if the representedObject is a resource, since changing the resource
+        // without changing the representedObject is bad. If you need to change the resource, make a new ResourceTreeElement.
+        console.assert(!this._resource || !(this.representedObject instanceof WebInspector.Resource));
+
+        if (this._resource) {
+            this._resource.removeEventListener(WebInspector.Resource.Event.URLDidChange, this._urlDidChange, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.TypeDidChange, this._typeDidChange, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.LoadingDidFinish, this._updateStatus, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.LoadingDidFail, this._updateStatus, this);
+        }
+
+        this._updateSourceCode(resource);
+
+        this._resource = resource;
+
+        resource.addEventListener(WebInspector.Resource.Event.URLDidChange, this._urlDidChange, this);
+        resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._typeDidChange, this);
+        resource.addEventListener(WebInspector.Resource.Event.LoadingDidFinish, this._updateStatus, this);
+        resource.addEventListener(WebInspector.Resource.Event.LoadingDidFail, this._updateStatus, this);
+
+        this._updateTitles();
+        this._updateStatus();
+        this._updateToolTip();
+    },
+
+    // Protected
+
+    _updateTitles: function()
+    {
+        var frame = this._resource.parentFrame;
+        var isMainResource = this._resource.isMainResource();
+        if (isMainResource && frame) {
+            // When the resource is a main resource, get the host from the current frame's parent frame instead of the current frame.
+            var parentResourceHost = frame.parentFrame ? frame.parentFrame.mainResource.urlComponents.host : null;
+        } else if (frame) {
+            // When the resource is a normal sub-resource, get the host from the current frame's main resource.
+            var parentResourceHost = frame.mainResource.urlComponents.host;
+        }
+
+        var urlComponents = this._resource.urlComponents;
+
+        var oldMainTitle = this.mainTitle;
+        this.mainTitle = WebInspector.displayNameForURL(this._resource.url, urlComponents);
+
+        // Show the host as the subtitle if it is different from the main resource or if this is the main frame's main resource.
+        var subtitle = parentResourceHost !== urlComponents.host || frame.isMainFrame() && isMainResource ? WebInspector.displayNameForHost(urlComponents.host) : null;
+        this.subtitle = this.mainTitle !== subtitle ? subtitle : null;
+
+        if (oldMainTitle !== this.mainTitle)
+            this.callFirstAncestorFunction("descendantResourceTreeElementMainTitleDidChange", [this, oldMainTitle]);
+    },
+
+    // Private
+
+    _updateStatus: function()
+    {
+        if (this._resource.failed)
+            this.addClassName(WebInspector.ResourceTreeElement.FailedStyleClassName);
+        else
+            this.removeClassName(WebInspector.ResourceTreeElement.FailedStyleClassName);
+
+        if (this._resource.finished || this._resource.failed) {
+            // Remove the spinner and replace with a reload button in case it's the main frame's main resource.
+            var frame = this._resource.parentFrame;
+            this.status = this._resource.isMainResource() && frame && frame.isMainFrame() ? this.reloadButton : null;
+        } else {
+            var spinner = new WebInspector.IndeterminateProgressSpinner;
+            this.status = spinner.element;
+        }
+    },
+
+    _updateToolTip: function()
+    {
+        this.tooltip = this._resource.url;
+    },
+
+    _reloadPageClicked: function(event)
+    {
+        event.stopPropagation();
+
+        // Ignore cache when the shift key is pressed.
+        PageAgent.reload(event.shiftKey);
+    },
+
+    _urlDidChange: function(event)
+    {
+        this._updateTitles();
+        this._updateToolTip();
+    },
+
+    _typeDidChange: function(event)
+    {
+        this.removeClassName(event.data.oldType);
+        this.addClassName(this._resource.type);
+
+        this.callFirstAncestorFunction("descendantResourceTreeElementTypeDidChange", [this, event.data.oldType]);
+    }
+};
+
+WebInspector.ResourceTreeElement.prototype.__proto__ = WebInspector.SourceCodeTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Revision.js b/Source/WebInspectorUI/UserInterface/Revision.js
new file mode 100644
index 000000000..4cf2c4b46
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Revision.js
@@ -0,0 +1,55 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Revision = function()
+{
+    WebInspector.Object.call(this);
+};
+
+WebInspector.Revision.prototype = {
+    constructor: WebInspector.Revision,
+
+    // Public
+
+    apply: function()
+    {
+        // Implemented by subclasses.
+        console.error("Needs to be implemented by a subclass.");
+    },
+
+    revert: function()
+    {
+        // Implemented by subclasses.
+        console.error("Needs to be implemented by a subclass.");
+    },
+
+    copy: function()
+    {
+        // Override by subclasses.
+        return this;
+    }
+};
+
+WebInspector.Revision.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/RulesStyleDetailsPanel.css b/Source/WebInspectorUI/UserInterface/RulesStyleDetailsPanel.css
new file mode 100644
index 000000000..3d71afe6a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/RulesStyleDetailsPanel.css
@@ -0,0 +1,77 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.details.css-style .rules .label {
+    font-size: 11px;
+    font-family: "Lucida Grande", sans-serif;
+
+    color: rgb(60%, 60%, 60%);
+    text-shadow: white 0 1px 0;
+
+    padding: 0 10px;
+}
+
+.sidebar > .panel.details.css-style .rules .label .go-to-link {
+    color: inherit !important;
+}
+
+.sidebar > .panel.details.css-style .rules .label + .style-declaration-section {
+    margin-top: 5px;
+}
+
+.sidebar > .panel.details.css-style .rules .new-rule {
+    font-size: 12px;
+    font-family: "Lucida Grande", sans-serif;
+    font-weight: bold;
+
+    color: black;
+    text-shadow: white 0 1px 0;
+
+    padding: 5px 10px;
+
+    margin-bottom: 8px;
+    margin-top: -5px;
+
+    opacity: 0.5;
+}
+
+.sidebar > .panel.details.css-style .rules .new-rule img {
+    content: url(Images/Plus.pdf);
+
+    width: 13px;
+    height: 13px;
+
+    vertical-align: -2px;
+
+    margin-right: 6px;
+}
+
+.sidebar > .panel.details.css-style .rules .new-rule:hover {
+    opacity: 0.6;
+}
+
+.sidebar > .panel.details.css-style .rules .new-rule:active {
+    opacity: 0.7;
+}
diff --git a/Source/WebInspectorUI/UserInterface/RulesStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/RulesStyleDetailsPanel.js
new file mode 100644
index 000000000..0fd114e5a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/RulesStyleDetailsPanel.js
@@ -0,0 +1,273 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.RulesStyleDetailsPanel = function()
+{
+    WebInspector.StyleDetailsPanel.call(this, WebInspector.RulesStyleDetailsPanel.StyleClassName, "rules", WebInspector.UIString("Rules"));
+
+    this._sections = [];
+};
+
+WebInspector.RulesStyleDetailsPanel.StyleClassName = "rules";
+WebInspector.RulesStyleDetailsPanel.LabelElementStyleClassName = "label";
+WebInspector.RulesStyleDetailsPanel.NewRuleElementStyleClassName = "new-rule";
+
+WebInspector.RulesStyleDetailsPanel.prototype = {
+    constructor: WebInspector.RulesStyleDetailsPanel,
+
+    // Public
+
+    refresh: function(significantChange)
+    {
+        // We only need to do a rebuild on significant changes. Other changes are handled
+        // by the sections and text editors themselves.
+        if (!significantChange)
+            return;
+
+        var newSections = [];
+        var newDOMFragment = document.createDocumentFragment();
+
+        var previousMediaList = [];
+        var previousSection = null;
+        var previousFocusedSection = null;
+
+        function mediaListsEqual(a, b)
+        {
+            a = a || [];
+            b = b || [];
+
+            if (a.length !== b.length)
+                return false;
+
+            for (var i = 0; i < a.length; ++i) {
+                var aMedia = a[i];
+                var bMedia = b[i];
+
+                if (aMedia.type !== bMedia.type)
+                    return false;
+
+                if (aMedia.text !== bMedia.text)
+                    return false;
+
+                if (!aMedia.sourceCodeLocation && bMedia.sourceCodeLocation)
+                    return false;
+
+                if (aMedia.sourceCodeLocation && !aMedia.sourceCodeLocation.isEqual(bMedia.sourceCodeLocation))
+                    return false;
+            }
+
+            return true;
+        }
+
+        function filteredMediaList(mediaList)
+        {
+            if (!mediaList)
+                return [];
+
+            // Exclude the basic "screen" query since it's very common and just clutters things.
+            return mediaList.filter(function(media) {
+                return media.text !== "screen";
+            });
+        }
+
+        function appendStyleSection(style)
+        {
+            var section = style.__rulesSection;
+            if (section && section.focused && !previousFocusedSection)
+                previousFocusedSection = section;
+
+            if (!section) {
+                section = new WebInspector.CSSStyleDeclarationSection(style);
+                style.__rulesSection = section;
+            } else
+                section.refresh();
+
+            if (this._focusNextNewInspectorRule && style.ownerRule && style.ownerRule.type === WebInspector.CSSRule.Type.Inspector) {
+                previousFocusedSection = section;
+                delete this._focusNextNewInspectorRule;
+            }
+
+            // Reset lastInGroup in case the order/grouping changed.
+            section.lastInGroup = false;
+
+            newDOMFragment.appendChild(section.element);
+            newSections.push(section);
+
+            previousSection = section;
+        }
+
+        function addNewRuleButton()
+        {
+            if (previousSection)
+                previousSection.lastInGroup = true;
+
+            var newRuleButton = document.createElement("div");
+            newRuleButton.className = WebInspector.RulesStyleDetailsPanel.NewRuleElementStyleClassName;
+            newRuleButton.addEventListener("click", this._newRuleClicked.bind(this));
+
+            newRuleButton.appendChild(document.createElement("img"));
+            newRuleButton.appendChild(document.createTextNode(WebInspector.UIString("New Rule")));
+
+            newDOMFragment.appendChild(newRuleButton);
+
+            addedNewRuleButton = true;
+        }
+
+        var pseudoElements = this.nodeStyles.pseudoElements;
+        for (var pseudoIdentifier in pseudoElements) {
+            var pseudoElement = pseudoElements[pseudoIdentifier];
+            for (var i = 0; i < pseudoElement.orderedStyles.length; ++i) {
+                var style = pseudoElement.orderedStyles[i];
+                appendStyleSection.call(this, style);
+            }
+
+            if (previousSection)
+                previousSection.lastInGroup = true;
+        }
+
+        var addedNewRuleButton = false;
+
+        var orderedStyles = this.nodeStyles.orderedStyles;
+        for (var i = 0; i < orderedStyles.length; ++i) {
+            var style = orderedStyles[i];
+
+            if (style.type === WebInspector.CSSStyleDeclaration.Type.Rule && !addedNewRuleButton)
+                addNewRuleButton.call(this);
+
+            if (previousSection && previousSection.style.node !== style.node) {
+                previousSection.lastInGroup = true;
+
+                var prefixElement = document.createElement("strong");
+                prefixElement.textContent = WebInspector.UIString("Inherited From: ");
+
+                var inheritedLabel = document.createElement("div");
+                inheritedLabel.className = WebInspector.RulesStyleDetailsPanel.LabelElementStyleClassName;
+                inheritedLabel.appendChild(prefixElement);
+                inheritedLabel.appendChild(WebInspector.linkifyNodeReference(style.node));
+                newDOMFragment.appendChild(inheritedLabel);
+            }
+
+            // Only include the media list if it is different from the previous media list shown.
+            var currentMediaList = filteredMediaList(style.ownerRule && style.ownerRule.mediaList);
+            if (!mediaListsEqual(previousMediaList, currentMediaList)) {
+                previousMediaList = currentMediaList;
+
+                // Break the section group even if the media list is empty. That way the user knows
+                // the previous displayed media list does not apply to the next section.
+                if (previousSection)
+                    previousSection.lastInGroup = true;
+
+                for (var j = 0; j < currentMediaList.length; ++j) {
+                    var media = currentMediaList[j];
+
+                    var prefixElement = document.createElement("strong");
+                    prefixElement.textContent = WebInspector.UIString("Media: ");
+
+                    var mediaLabel = document.createElement("div");
+                    mediaLabel.className = WebInspector.RulesStyleDetailsPanel.LabelElementStyleClassName;
+                    mediaLabel.appendChild(prefixElement);
+                    mediaLabel.appendChild(document.createTextNode(media.text));
+
+                    if (media.sourceCodeLocation) {
+                        mediaLabel.appendChild(document.createTextNode(" \u2014 "));
+                        mediaLabel.appendChild(WebInspector.createSourceCodeLocationLink(media.sourceCodeLocation, true));
+                    }
+
+                    newDOMFragment.appendChild(mediaLabel);
+                }
+            }
+
+            appendStyleSection.call(this, style);
+        }
+
+        if (!addedNewRuleButton)
+            addNewRuleButton.call(this);
+
+        if (previousSection)
+            previousSection.lastInGroup = true;
+
+        this.element.removeChildren();
+        this.element.appendChild(newDOMFragment);
+
+        this._sections = newSections;
+
+        for (var i = 0; i < this._sections.length; ++i)
+            this._sections[i].updateLayout();
+
+        if (previousFocusedSection) {
+            previousFocusedSection.focus();
+
+            function scrollToFocusedSection()
+            {
+                previousFocusedSection.element.scrollIntoViewIfNeeded(true);
+            }
+
+            // Do the scroll on a timeout since StyleDetailsPanel restores scroll position
+            // after the refresh, and we might not need to scroll after the restore.
+            setTimeout(scrollToFocusedSection, 0);
+        }
+    },
+
+    // Protected
+
+    shown: function()
+    {
+        WebInspector.StyleDetailsPanel.prototype.shown.call(this);
+
+        // Associate the style and section objects so they can be reused.
+        // Also update the layout in case we changed widths while hidden.
+        for (var i = 0; i < this._sections.length; ++i) {
+            var section = this._sections[i];
+            section.style.__rulesSection = section;
+            section.updateLayout();
+        }
+    },
+
+    hidden: function()
+    {
+        WebInspector.StyleDetailsPanel.prototype.hidden.call(this);
+
+        // Disconnect the style and section objects so they have a chance
+        // to release their objects when this panel is not visible.
+        for (var i = 0; i < this._sections.length; ++i)
+            delete this._sections[i].style.__rulesSection;
+    },
+
+    widthDidChange: function()
+    {
+        for (var i = 0; i < this._sections.length; ++i)
+            this._sections[i].updateLayout();
+    },
+
+    // Private
+
+    _newRuleClicked: function(event)
+    {
+        this._focusNextNewInspectorRule = true;
+        this.nodeStyles.addRule();
+    }
+};
+
+WebInspector.RulesStyleDetailsPanel.prototype.__proto__ = WebInspector.StyleDetailsPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/RuntimeObserver.js b/Source/WebInspectorUI/UserInterface/RuntimeObserver.js
new file mode 100644
index 000000000..2bbc7acf0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/RuntimeObserver.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.RuntimeObserver = function()
+{
+    WebInspector.Object.call(this);
+};
+
+WebInspector.RuntimeObserver.prototype = {
+    constructor: WebInspector.RuntimeObserver,
+
+    // Events defined by the "Runtime" domain (see WebCore/inspector/Inspector.json).
+
+    executionContextCreated: function(contextPayload)
+    {
+        WebInspector.frameResourceManager.executionContextCreated(contextPayload);
+    }
+};
+
+WebInspector.RuntimeObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScopeBar.css b/Source/WebInspectorUI/UserInterface/ScopeBar.css
new file mode 100644
index 000000000..08ad58b84
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ScopeBar.css
@@ -0,0 +1,66 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.scope-bar {
+    font-family: Lucida Grande, sans-serif;
+    padding: 0 3px;
+    overflow: hidden;
+}
+
+.scope-bar > li {
+    display: inline-block;
+    margin: 0 2px;
+    padding: 0 8px 3px;
+    font-size: 11px;
+    font-weight: bold;
+    line-height: 12px;
+    color: rgb(46, 46, 46);
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: 9px;
+    text-align: center;
+
+    transition: 200ms ease-in-out;
+    transition-property: background-color, border-color;
+}
+
+.scope-bar > li.selected,
+.scope-bar > li:active {
+    transition-duration: 75ms;
+}
+
+.scope-bar > li:hover {
+    border-color: rgba(0, 0, 0, 0.15);
+}
+
+.scope-bar > li.selected {
+    background-color: rgba(0, 0, 0, 0.06);
+    border-color: rgba(0, 0, 0, 0.30);
+}
+
+.scope-bar > li:active {
+    background-color: rgba(0, 0, 0, 0.16);
+    border-color: rgba(0, 0, 0, 0.40);
+}
diff --git a/Source/WebInspectorUI/UserInterface/ScopeBar.js b/Source/WebInspectorUI/UserInterface/ScopeBar.js
new file mode 100644
index 000000000..c17355197
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ScopeBar.js
@@ -0,0 +1,134 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScopeBar = function(identifier, items, defaultItem) {
+    WebInspector.NavigationItem.call(this, identifier);
+
+    this._element.classList.add(WebInspector.ScopeBar.StyleClassName);
+
+    this._items = items;
+    this._defaultItem = defaultItem;
+
+    this._itemsById = [];
+    this._populate();
+};
+
+WebInspector.ScopeBar.StyleClassName = "scope-bar";
+WebInspector.ScopeBar.Event = {
+    SelectionChanged: "scopebar-selection-did-change"
+};
+
+WebInspector.ScopeBar.prototype = {
+    constructor: WebInspector.ScopeBar,
+
+    // Public
+
+    get defaultItem()
+    {
+        return this._defaultItem;
+    },
+
+    item: function(id)
+    {
+        return this._itemsById[id];
+    },
+
+    get selectedItems()
+    {
+        return this._items.filter(function(item) {
+            return item.selected;
+        });
+    },
+
+    updateLayout: function(expandOnly)
+    {
+        if (expandOnly)
+            return;
+
+        for (var i = 0; i < this._items.length; ++i) {
+            var item = this._items[i];
+            var isSelected = item.selected;
+
+            if (!isSelected)
+                item.element.classList.add(WebInspector.ScopeBarItem.SelectedStyleClassName);
+
+            var selectedWidth = item.element.offsetWidth;
+            if (selectedWidth)
+                item.element.style.minWidth = selectedWidth + "px";
+
+            if (!isSelected)
+                item.element.classList.remove(WebInspector.ScopeBarItem.SelectedStyleClassName);
+        }
+    },
+
+    // Private
+    
+    _populate: function()
+    {
+        var item;
+        for (var i = 0; i < this._items.length; ++i) {
+            item = this._items[i];
+            this._itemsById[item.id] = item;
+            this._element.appendChild(item.element);
+
+            item.addEventListener(WebInspector.ScopeBarItem.Event.SelectionChanged, this._itemSelectionDidChange, this);
+        }
+
+        if (!this.selectedItems.length && this._defaultItem)
+            this._defaultItem.selected = true;
+    },
+    
+    _itemSelectionDidChange: function(event)
+    {
+        var sender = event.target;
+        var item;
+
+        // An exclusive item was selected, unselect everything else.
+        if (sender.isExclusive && sender.selected) {
+            for (var i = 0; i < this._items.length; ++i) {
+                item = this._items[i];
+                if (item !== sender)
+                    item.selected = false;
+            }
+        } else {
+            var replacesCurrentSelection = !event.data.withModifier;
+            for (var i = 0; i < this._items.length; ++i) {
+                item = this._items[i];
+                if (item.isExclusive && item !== sender && sender.selected)
+                    item.selected = false;
+                else if (sender.selected && replacesCurrentSelection && sender !== item)
+                    item.selected = false;
+            }
+        }
+
+        // If nothing is selected anymore, select the default item.
+        if (!this.selectedItems.length && this._defaultItem)
+            this._defaultItem.selected = true;
+
+        this.dispatchEventToListeners(WebInspector.ScopeBar.Event.SelectionChanged);
+    }
+};
+
+WebInspector.ScopeBar.prototype.__proto__ = WebInspector.NavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScopeBarItem.js b/Source/WebInspectorUI/UserInterface/ScopeBarItem.js
new file mode 100644
index 000000000..6ad2863b0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ScopeBarItem.js
@@ -0,0 +1,97 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScopeBarItem = function(id, label, isExclusive) {
+    WebInspector.Object.call(this);
+
+    this.id = id;
+    this.label = label;
+    this.isExclusive = isExclusive;
+    
+    this._selectedSetting = new WebInspector.Setting("scopebaritem-" + id, false);
+
+    this._markElementSelected(this._selectedSetting.value);
+};
+
+WebInspector.ScopeBarItem.SelectedStyleClassName = "selected";
+WebInspector.ScopeBarItem.Event = {
+    SelectionChanged: "scope-bar-item-selection-did-change"
+};
+
+WebInspector.ScopeBarItem.prototype = {
+    constructor: WebInspector.ScopeBarItem,
+
+    // Public
+
+    get element()
+    {
+        if (!this._element) {
+            this._element = document.createElement("li");
+            this._element.textContent = this.label;
+            this._element.addEventListener("click", this._clicked.bind(this), false);
+        }
+        return this._element;
+    },
+    
+    get selected()
+    {
+        return this._selectedSetting.value;
+    },
+
+    set selected(selected)
+    {
+        this.setSelected(selected, false);
+    },
+    
+    setSelected: function(selected, withModifier)
+    {
+        if (this._selectedSetting.value === selected)
+            return;
+
+        this._markElementSelected(selected);
+
+        this._selectedSetting.value = selected;
+
+        this.dispatchEventToListeners(WebInspector.ScopeBarItem.Event.SelectionChanged, {withModifier: withModifier});
+    },
+
+    // Private
+
+    _markElementSelected: function(selected)
+    {
+        if (selected)
+            this.element.classList.add(WebInspector.ScopeBarItem.SelectedStyleClassName);
+        else
+            this.element.classList.remove(WebInspector.ScopeBarItem.SelectedStyleClassName);
+    },
+
+    _clicked: function(event)
+    {
+        var withModifier = (event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey);
+        this.setSelected(!this.selected, withModifier);
+    }
+};
+
+WebInspector.ScopeBarItem.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScopeChainDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/ScopeChainDetailsSidebarPanel.js
new file mode 100644
index 000000000..03fd9fa90
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ScopeChainDetailsSidebarPanel.js
@@ -0,0 +1,170 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScopeChainDetailsSidebarPanel = function() {
+    WebInspector.DetailsSidebarPanel.call(this, "scope-chain", WebInspector.UIString("Scope Chain"), WebInspector.UIString("Scope Chain"), "Images/NavigationItemVariable.pdf", "5");
+
+    this._callFrame = null;
+};
+
+WebInspector.ScopeChainDetailsSidebarPanel.prototype = {
+    constructor: WebInspector.ScopeChainDetailsSidebarPanel,
+
+    // Public
+
+    inspect: function(objects)
+    {
+        // Convert to a single item array if needed.
+        if (!(objects instanceof Array))
+            objects = [objects];
+
+        var callFrameToInspect = null;
+
+        // Iterate over the objects to find a WebInspector.CallFrame to inspect.
+        for (var i = 0; i < objects.length; ++i) {
+            if (!(objects[i] instanceof WebInspector.CallFrame))
+                continue;
+            callFrameToInspect = objects[i];
+            break;
+        }
+
+        this.callFrame = callFrameToInspect;
+
+        return !!this.callFrame;
+    },
+
+    get callFrame()
+    {
+        return this._callFrame;
+    },
+
+    set callFrame(callFrame)
+    {
+        if (callFrame === this._callFrame)
+            return;
+
+        this._callFrame = callFrame;
+
+        this.needsRefresh();
+    },
+
+    refresh: function()
+    {
+        var callFrame = this.callFrame;
+        if (!callFrame)
+            return;
+
+        var detailsSections = [];
+        var foundLocalScope = false;
+
+        var sectionCountByType = {};
+        for (var type in WebInspector.ScopeChainNode.Type)
+            sectionCountByType[WebInspector.ScopeChainNode.Type[type]] = 0;
+
+        var scopeChain = callFrame.scopeChain;
+        for (var i = 0; i < scopeChain.length; ++i) {
+            var scope = scopeChain[i];
+
+            var title = null;
+            var extraProperties = null;
+            var collapsedByDefault = false;
+            var dontHighlightNonEnumerableProperties = true;
+
+            ++sectionCountByType[scope.type];
+
+            switch (scope.type) {
+                case WebInspector.ScopeChainNode.Type.Local:
+                    foundLocalScope = true;
+                    collapsedByDefault = false;
+                    dontHighlightNonEnumerableProperties = true;
+
+                    title = WebInspector.UIString("Local Variables");
+
+                    if (callFrame.thisObject)
+                        extraProperties = [new WebInspector.RemoteObjectProperty("this", callFrame.thisObject)];
+                    break;
+
+                case WebInspector.ScopeChainNode.Type.Closure:
+                    title = WebInspector.UIString("Closure Variables");
+                    dontHighlightNonEnumerableProperties = true;
+                    collapsedByDefault = false;
+                    break;
+
+                case WebInspector.ScopeChainNode.Type.Catch:
+                    title = WebInspector.UIString("Catch Variables");
+                    dontHighlightNonEnumerableProperties = true;
+                    collapsedByDefault = false;
+                    break;
+
+                case WebInspector.ScopeChainNode.Type.With:
+                    title = WebInspector.UIString("With Object Properties");
+                    collapsedByDefault = foundLocalScope;
+                    dontHighlightNonEnumerableProperties = false;
+                    break;
+
+                case WebInspector.ScopeChainNode.Type.Global:
+                    title = WebInspector.UIString("Global Variables");
+                    dontHighlightNonEnumerableProperties = false;
+                    collapsedByDefault = true;
+                    break;
+            }
+
+            var detailsSectionIdentifier = scope.type + "-" + sectionCountByType[scope.type];
+
+            var section = new WebInspector.ObjectPropertiesSection(scope.object, null, null, null, true, extraProperties, WebInspector.ScopeVariableTreeElement);
+            section.dontHighlightNonEnumerablePropertiesAtTopLevel = dontHighlightNonEnumerableProperties;
+            section.__propertyIdentifierPrefix = detailsSectionIdentifier;
+
+            var detailsSection = new WebInspector.DetailsSection(detailsSectionIdentifier, title, null, null, collapsedByDefault);
+            detailsSection.groups[0].rows = [new WebInspector.DetailsSectionPropertiesRow(section)];
+            detailsSections.push(detailsSection);
+        }
+
+        function delayedWork()
+        {
+            // Clear the timeout so we don't update the interface twice.
+            clearTimeout(timeout);
+
+            // Bail if the call frame changed while we were waiting for the async response.
+            if (this.callFrame !== callFrame)
+                return;
+
+            this.element.removeChildren();
+            for (var i = 0; i < detailsSections.length; ++i)
+                this.element.appendChild(detailsSections[i].element);
+        }
+
+        // We need a timeout in place in case there are long running, pending backend dispatches. This can happen
+        // if the debugger is paused in code that was executed from the console. The console will be waiting for
+        // the result of the execution and without a timeout we would never update the scope variables.
+        var timeout = setTimeout(delayedWork.bind(this), 50);
+
+        // Since ObjectPropertiesSection populates asynchronously, we want to wait to replace the existing content
+        // until after all the pending asynchronous requests are completed. This prevents severe flashing while stepping.
+        InspectorBackend.runAfterPendingDispatches(delayedWork.bind(this));
+    }
+};
+
+WebInspector.ScopeChainDetailsSidebarPanel.prototype.__proto__ = WebInspector.DetailsSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScopeChainNode.js b/Source/WebInspectorUI/UserInterface/ScopeChainNode.js
new file mode 100644
index 000000000..0ba8bc753
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ScopeChainNode.js
@@ -0,0 +1,64 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScopeChainNode = function(type, object)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(typeof type === "string");
+    console.assert(object instanceof WebInspector.RemoteObject);
+
+    if (type in WebInspector.ScopeChainNode.Type)
+        type = WebInspector.ScopeChainNode.Type[type];
+
+    this._type = type || null;
+    this._object = object || null;
+};
+
+WebInspector.ScopeChainNode.Type = {
+    Local: "scope-chain-type-local",
+    Global: "scope-chain-type-global",
+    With: "scope-chain-type-with",
+    Closure: "scope-chain-type-closure",
+    Catch: "scope-chain-type-catch"
+};
+
+WebInspector.ScopeChainNode.prototype = {
+    constructor: WebInspector.ScopeChainNode,
+
+    // Public
+
+    get type()
+    {
+        return this._type;
+    },
+
+    get object()
+    {
+        return this._object;
+    }
+};
+
+WebInspector.ScopeChainNode.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScopeVariableTreeElement.js b/Source/WebInspectorUI/UserInterface/ScopeVariableTreeElement.js
new file mode 100644
index 000000000..0ee232099
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ScopeVariableTreeElement.js
@@ -0,0 +1,91 @@
+/*
+ * Copyright (C) 2008, 2013 Apple Inc. All Rights Reserved.
+ * Copyright (C) 2011 Google Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScopeVariableTreeElement = function(property)
+{
+    WebInspector.ObjectPropertyTreeElement.call(this, property);
+};
+
+WebInspector.ScopeVariableTreeElement._expandedProperties = {};
+
+WebInspector.ScopeVariableTreeElement.prototype = {
+    constructor: WebInspector.ScopeVariableTreeElement,
+
+    // Public
+
+    onattach: function()
+    {
+        WebInspector.ObjectPropertyTreeElement.prototype.onattach.call(this);
+
+        if (this.hasChildren && this.constructor._expandedProperties.hasOwnProperty(this.propertyIdentifier))
+            this.expand();
+    },
+
+    onexpand: function()
+    {
+        this.constructor._expandedProperties[this.propertyIdentifier] = true;
+    },
+
+    oncollapse: function()
+    {
+        delete this.constructor._expandedProperties[this.propertyIdentifier];
+    },
+
+    get propertyIdentifier()
+    {
+        if ("_propertyIdentifier" in this)
+            return this._propertyIdentifier;
+
+        var section = this.treeOutline.section;
+        this._propertyIdentifier = (section.__propertyIdentifierPrefix ? section.__propertyIdentifierPrefix + "-" : "") + this.propertyPath;
+        return this._propertyIdentifier;
+    },
+
+    get propertyPath()
+    {
+        if ("_propertyPath" in this)
+            return this._propertyPath;
+
+        var current = this;
+        var result;
+
+        do {
+            if (current.property) {
+                if (result)
+                    result = current.property.name + "." + result;
+                else
+                    result = current.property.name;
+            }
+
+            current = current.parent;
+        } while (current && !current.root);
+
+        this._propertyPath = result;
+        return result;
+    }
+};
+
+WebInspector.ScopeVariableTreeElement.prototype.__proto__ = WebInspector.ObjectPropertyTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Script.js b/Source/WebInspectorUI/UserInterface/Script.js
new file mode 100644
index 000000000..63f401d4c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Script.js
@@ -0,0 +1,170 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Script = function(id, range, url, injected, sourceMapURL)
+{
+    WebInspector.SourceCode.call(this);
+
+    console.assert(id);
+    console.assert(range instanceof WebInspector.TextRange);
+
+    this._id = id || null;
+    this._range = range || null;
+    this._url = url || null;
+    this._injected = injected || false;
+
+    this._resource = this._resolveResource();
+    if (this._resource)
+        this._resource.associateWithScript(this);
+
+    if (sourceMapURL)
+        WebInspector.sourceMapManager.downloadSourceMap(sourceMapURL, this._url, this);
+};
+
+WebInspector.Script.resetUniqueDisplayNameNumbers = function()
+{
+    WebInspector.Script._nextUniqueDisplayNameNumber = 1;
+}
+
+WebInspector.Script._nextUniqueDisplayNameNumber = 1;
+
+WebInspector.Script.prototype = {
+    constructor: WebInspector.Script,
+
+    // Public
+
+    get id()
+    {
+        return this._id;
+    },
+
+    get range()
+    {
+        return this._range;
+    },
+
+    get url()
+    {
+        return this._url;
+    },
+
+    get urlComponents()
+    {
+        if (!this._urlComponents)
+            this._urlComponents = parseURL(this._url);
+        return this._urlComponents;
+    },
+
+    get displayName()
+    {
+        if (this._url)
+            return WebInspector.displayNameForURL(this._url, this.urlComponents);
+
+        // Assign a unique number to the script object so it will stay the same.
+        if (!this._uniqueDisplayNameNumber)
+            this._uniqueDisplayNameNumber = this.constructor._nextUniqueDisplayNameNumber++;
+
+        return WebInspector.UIString("Anonymous Script %d").format(this._uniqueDisplayNameNumber);
+    },
+
+    get injected()
+    {
+        return this._injected;
+    },
+
+    get resource()
+    {
+        return this._resource;
+    },
+
+    canRequestContentFromBackend: function()
+    {
+        // We can request content if we have an id.
+        return !!this._id;
+    },
+
+    requestContentFromBackend: function(callback)
+    {
+        if (!this._id) {
+            // There is no identifier to request content with. Return false to cause the
+            // pending callbacks to get null content.
+            return false;
+        }
+
+        DebuggerAgent.getScriptSource(this._id, callback);
+        return true;
+    },
+
+    // Private
+
+    _resolveResource: function()
+    {
+        // FIXME: We should be able to associate a Script with a Resource through identifiers,
+        // we shouldn't need to lookup by URL, which is not safe with frames, where there might
+        // be multiple resources with the same URL.
+        // <rdar://problem/13373951> Scripts should be able to associate directly with a Resource
+
+        // No URL, no resource.
+        if (!this._url)
+            return null;
+
+        try {
+            // Try with the Script's full URL.
+            var resource = WebInspector.frameResourceManager.resourceForURL(this.url);
+            if (resource)
+                return resource;
+
+            // Try with the Script's full decoded URL.
+            var decodedURL = decodeURI(this._url);
+            if (decodedURL !== this._url) {
+                resource = WebInspector.frameResourceManager.resourceForURL(decodedURL);
+                if (resource)
+                    return resource;
+            }
+
+            // Next try removing any fragment in the original URL.
+            var urlWithoutFragment = removeURLFragment(this._url);
+            if (urlWithoutFragment !== this._url) {
+                resource = WebInspector.frameResourceManager.resourceForURL(urlWithoutFragment);
+                if (resource)
+                    return resource;
+            }
+
+            // Finally try removing any fragment in the decoded URL.
+            var decodedURLWithoutFragment = removeURLFragment(decodedURL);
+            if (decodedURLWithoutFragment !== decodedURL) {
+                resource = WebInspector.frameResourceManager.resourceForURL(decodedURLWithoutFragment);
+                if (resource)
+                    return resource;
+            }
+        } catch (e) {
+            // Ignore possible URIErrors.
+        }
+
+        return null;
+    }
+};
+
+WebInspector.Script.prototype.__proto__ = WebInspector.SourceCode.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScriptContentView.css b/Source/WebInspectorUI/UserInterface/ScriptContentView.css
new file mode 100644
index 000000000..349510882
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ScriptContentView.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.script > .text-editor {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/ScriptContentView.js b/Source/WebInspectorUI/UserInterface/ScriptContentView.js
new file mode 100644
index 000000000..bddc61181
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ScriptContentView.js
@@ -0,0 +1,213 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScriptContentView = function(script)
+{
+    WebInspector.ContentView.call(this, script);
+
+    this.element.classList.add(WebInspector.ScriptContentView.StyleClassName);
+
+    // Append a spinner while waiting for _contentWillPopulate.
+    var spinner = new WebInspector.IndeterminateProgressSpinner;
+    this.element.appendChild(spinner.element);
+
+    this._script = script;
+
+    // This view is only for standalone Scripts with no corresponding Resource. All other Scripts
+    // should be handled by TextResourceContentView via the Resource.
+    console.assert(!script.resource);
+    console.assert(script.range.startLine === 0);
+    console.assert(script.range.startColumn === 0);
+
+    this._textEditor = new WebInspector.SourceCodeTextEditor(script);
+    this._textEditor.addEventListener(WebInspector.TextEditor.Event.ExecutionLineNumberDidChange, this._executionLineNumberDidChange, this);
+    this._textEditor.addEventListener(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange, this._numberOfSearchResultsDidChange, this);
+    this._textEditor.addEventListener(WebInspector.TextEditor.Event.FormattingDidChange, this._textEditorFormattingDidChange, this);
+    this._textEditor.addEventListener(WebInspector.SourceCodeTextEditor.Event.ContentWillPopulate, this._contentWillPopulate, this);
+    this._textEditor.addEventListener(WebInspector.SourceCodeTextEditor.Event.ContentDidPopulate, this._contentDidPopulate, this);
+
+    var toolTip = WebInspector.UIString("Pretty print");
+    var activatedToolTip = WebInspector.UIString("Original formatting");
+    this._prettyPrintButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("pretty-print", toolTip, activatedToolTip, "Images/NavigationItemCurleyBraces.pdf", 16, 16);
+    this._prettyPrintButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._togglePrettyPrint, this);
+    this._prettyPrintButtonNavigationItem.enabled = false; // Enabled when the text editor is populated with content.
+};
+
+WebInspector.ScriptContentView.StyleClassName = "script";
+
+WebInspector.ScriptContentView.prototype = {
+    constructor: WebInspector.ScriptContentView,
+
+    // Public
+
+    get navigationItems()
+    {
+        return [this._prettyPrintButtonNavigationItem];
+    },
+
+    get script()
+    {
+        return this._script;
+    },
+
+    get textEditor()
+    {
+        return this._textEditor;
+    },
+
+    get supplementalRepresentedObjects()
+    {
+        if (isNaN(this._textEditor.executionLineNumber))
+            return [];
+
+        // If the SourceCodeTextEditor has an executionLineNumber, we can assume
+        // it is always the active call frame.
+        return [WebInspector.debuggerManager.activeCallFrame];
+    },
+
+    revealPosition: function(position, textRangeToSelect, forceUnformatted)
+    {
+        this._textEditor.revealPosition(position, textRangeToSelect, forceUnformatted);
+    },
+
+    shown: function()
+    {
+        this._textEditor.shown();
+    },
+
+    hidden: function()
+    {
+        this._textEditor.hidden();
+    },
+
+    closed: function()
+    {
+        this._textEditor.close();
+    },
+
+    get supportsSave()
+    {
+        return true;
+    },
+
+    get saveData()
+    {
+        var url = this._script.url || "web-inspector:///" + encodeURI(this._script.displayName) + ".js";
+        return {url: url, content: this._textEditor.string};
+    },
+
+    get supportsSearch()
+    {
+        return true;
+    },
+
+    get numberOfSearchResults()
+    {
+        return this._textEditor.numberOfSearchResults;
+    },
+
+    get hasPerformedSearch()
+    {
+        return this._textEditor.currentSearchQuery !== null;
+    },
+
+    set automaticallyRevealFirstSearchResult(reveal)
+    {
+        this._textEditor.automaticallyRevealFirstSearchResult = reveal;
+    },
+
+    performSearch: function(query)
+    {
+        this._textEditor.performSearch(query);
+    },
+
+    searchCleared: function()
+    {
+        this._textEditor.searchCleared();
+    },
+
+    searchQueryWithSelection: function()
+    {
+        return this._textEditor.searchQueryWithSelection();
+    },
+
+    revealPreviousSearchResult: function(changeFocus)
+    {
+        this._textEditor.revealPreviousSearchResult(changeFocus);
+    },
+
+    revealNextSearchResult: function(changeFocus)
+    {
+        this._textEditor.revealNextSearchResult(changeFocus);
+    },
+
+    updateLayout: function()
+    {
+        this._textEditor.updateLayout();
+    },
+
+    // Private
+
+    _contentWillPopulate: function(event)
+    {
+        if (this._textEditor.element.parentNode === this.element)
+            return;
+
+        // Allow editing any local file since edits can be saved and reloaded right from the Inspector.
+        if (this._script.urlComponents.scheme === "file")
+            this._textEditor.readOnly = false;
+
+        this.element.removeChildren();
+        this.element.appendChild(this._textEditor.element);
+    },
+
+    _contentDidPopulate: function(event)
+    {
+        this._prettyPrintButtonNavigationItem.enabled = this._textEditor.canBeFormatted();
+    },
+
+    _togglePrettyPrint: function(event)
+    {
+        var activated = !this._prettyPrintButtonNavigationItem.activated;
+        this._textEditor.formatted = activated;
+    },
+
+    _textEditorFormattingDidChange: function(event)
+    {
+        this._prettyPrintButtonNavigationItem.activated = this._textEditor.formatted;
+    },
+
+    _executionLineNumberDidChange: function(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange);
+    },
+
+    _numberOfSearchResultsDidChange: function(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
+    }
+};
+
+WebInspector.ScriptContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGrid.js b/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGrid.js
new file mode 100644
index 000000000..cb3c6ac2e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGrid.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScriptTimelineDataGrid = function(columns)
+{
+    WebInspector.TimelineDataGrid.call(this, columns);
+}
+
+WebInspector.ScriptTimelineDataGrid.prototype = {
+    constructor: WebInspector.ScriptTimelineDataGrid,
+
+    // Protected
+
+    callFramePopoverAnchorElement: function()
+    {
+        return this.selectedNode.elementWithColumnIdentifier("resource");
+    }
+}
+
+WebInspector.ScriptTimelineDataGrid.prototype.__proto__ = WebInspector.TimelineDataGrid.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGridNode.js
new file mode 100644
index 000000000..55948ff7b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGridNode.js
@@ -0,0 +1,104 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScriptTimelineDataGridNode = function(scriptTimelineRecord, baseStartTime)
+{
+    WebInspector.DataGridNode.call(this, {});
+
+    this._record = scriptTimelineRecord;
+    this._baseStartTime = baseStartTime || 0;
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.ScriptTimelineDataGridNode);
+
+WebInspector.ScriptTimelineDataGridNode.IconStyleClassName = "icon";
+
+WebInspector.ScriptTimelineDataGridNode.prototype = {
+    constructor: WebInspector.ScriptTimelineDataGridNode,
+
+    // Public
+
+    get record()
+    {
+        return this._record;
+    },
+
+    get data()
+    {
+        return this._record;
+    },
+
+    createCellContent: function(columnIdentifier, cell)
+    {
+        const emptyValuePlaceholderString = "\u2014";
+        var value = this.data[columnIdentifier];
+
+        switch (columnIdentifier) {
+        case "eventType":
+            return WebInspector.ScriptTimelineRecord.EventType.displayName(value);
+
+        case "details":
+            return value ? value : emptyValuePlaceholderString;
+
+        case "resource":
+            if (!value)
+                return emptyValuePlaceholderString;
+
+            console.assert(this.data.sourceCodeLocation);
+
+            cell.classList.add(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
+            cell.classList.add(value.type);
+
+            // Give the whole cell a tooltip and keep it up to date.
+            var sourceCodeLocation = this.data.sourceCodeLocation;
+            sourceCodeLocation.populateLiveDisplayLocationTooltip(cell);
+
+            var fragment = document.createDocumentFragment();
+
+            var goToArrowButtonLink = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, false, true);
+            fragment.appendChild(goToArrowButtonLink);
+
+            var icon = document.createElement("div");
+            icon.className = WebInspector.ScriptTimelineDataGridNode.IconStyleClassName;
+            fragment.appendChild(icon);
+
+            var titleElement = document.createElement("span");
+            sourceCodeLocation.populateLiveDisplayLocationString(titleElement, "textContent");
+            fragment.appendChild(titleElement);
+
+            return fragment;
+
+        case "startTime":
+            return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value - this._baseStartTime);
+
+        case "duration":
+            return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value);
+        }
+
+        return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier);
+    }
+}
+
+WebInspector.ScriptTimelineDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScriptTimelineRecord.js b/Source/WebInspectorUI/UserInterface/ScriptTimelineRecord.js
new file mode 100644
index 000000000..fedee4379
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ScriptTimelineRecord.js
@@ -0,0 +1,132 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScriptTimelineRecord = function(eventType, startTime, endTime, details, resource, lineNumber, callFrames)
+{
+    WebInspector.TimelineRecord.call(this, WebInspector.TimelineRecord.Type.Script, startTime, endTime);
+
+    console.assert(eventType);
+
+    if (eventType in WebInspector.ScriptTimelineRecord.EventType)
+        eventType = WebInspector.ScriptTimelineRecord.EventType[eventType];
+
+    this._eventType = eventType;
+    this._details = details || "";
+    this._resource = resource || null;
+    this._lineNumber = lineNumber || NaN;
+    this._callFrames = callFrames || null;
+};
+
+WebInspector.ScriptTimelineRecord.EventType = {
+    ScriptEvaluated: "script-timeline-record-script-evaluated",
+    EventDispatched: "script-timeline-record-event-dispatch",
+    TimerFired: "script-timeline-record-timer-fired",
+    TimerInstalled: "script-timeline-record-timer-installed",
+    TimerRemoved: "script-timeline-record-timer-removed",
+    AnimationFrameFired: "script-timeline-record-animation-frame-fired"
+};
+
+WebInspector.ScriptTimelineRecord.EventType.displayName = function(eventType)
+{
+    switch(eventType) {
+    case WebInspector.ScriptTimelineRecord.EventType.ScriptEvaluated:
+        return WebInspector.UIString("Script Evaluated");
+    case WebInspector.ScriptTimelineRecord.EventType.EventDispatched:
+        return WebInspector.UIString("Event Dispatched");
+    case WebInspector.ScriptTimelineRecord.EventType.TimerFired:
+        return WebInspector.UIString("Timer Fired");
+    case WebInspector.ScriptTimelineRecord.EventType.TimerInstalled:
+        return WebInspector.UIString("Timer Installed");
+    case WebInspector.ScriptTimelineRecord.EventType.TimerRemoved:
+        return WebInspector.UIString("Timer Removed");
+    case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameFired:
+        return WebInspector.UIString("Animation Frame Fired");
+    }
+};
+
+WebInspector.ScriptTimelineRecord.prototype = {
+    constructor: WebInspector.ScriptTimelineRecord,
+
+    // Public
+
+    get eventType()
+    {
+        return this._eventType;
+    },
+
+    get details()
+    {
+        return this._details;
+    },
+
+    get resource()
+    {
+        return this._resource;
+    },
+
+    get lineNumber()
+    {
+        return this._lineNumber;
+    },
+
+    get callFrames()
+    {
+        return this._callFrames;
+    },
+
+    get sourceCodeLocation()
+    {
+        if ("_sourceCodeLocation" in this)
+            return this._sourceCodeLocation;
+
+        if (!this._resource) {
+            this._sourceCodeLocation = null;
+            return this._sourceCodeLocation;
+        }
+
+        // FIXME: Script Timeline Events with a location should always contain a call stack
+        // or a complete (url:line:column) triplet.
+
+        if (this._callFrames) {
+            for (var i = 0; i < this._callFrames.length; ++i) {
+                var callFrame = this._callFrames[i];
+                if (callFrame.nativeCode)
+                    continue;
+
+                if (!callFrame.sourceCodeLocation)
+                    break;
+
+                this._sourceCodeLocation = callFrame.sourceCodeLocation;
+                return this._sourceCodeLocation;
+            }
+        }
+
+        var lineNumber = isNaN(this._lineNumber) ? 0 : this._lineNumber;
+        this._sourceCodeLocation = this._resource.createSourceCodeLocation(lineNumber, 0);
+        return this._sourceCodeLocation;
+    }
+};
+
+WebInspector.ScriptTimelineRecord.prototype.__proto__ = WebInspector.TimelineRecord.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScriptTreeElement.js b/Source/WebInspectorUI/UserInterface/ScriptTreeElement.js
new file mode 100644
index 000000000..7023bb188
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ScriptTreeElement.js
@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScriptTreeElement = function(script)
+{
+    console.assert(script instanceof WebInspector.Script);
+    
+    WebInspector.SourceCodeTreeElement.call(this, script, WebInspector.ScriptTreeElement.StyleClassName, null, null, script, false);
+
+    this.mainTitle = script.displayName;
+
+    if (script.url) {
+        // Show the host as the subtitle if it is different from the main title.
+        var subtitle = WebInspector.displayNameForHost(script.urlComponents.host);
+        this.subtitle = this.mainTitle !== subtitle ? subtitle : null;
+
+        this.tooltip = script.url;
+
+        this.addClassName(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
+        this.addClassName(WebInspector.Resource.Type.Script);
+    } else
+        this.addClassName(WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName);
+
+    this._script = script;
+};
+
+WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName = "anonymous-script-icon";
+WebInspector.ScriptTreeElement.StyleClassName = "script";
+
+WebInspector.ScriptTreeElement.prototype = {
+    constructor: WebInspector.ScriptTreeElement,
+
+    // Public
+
+    get script()
+    {
+        return this._script;
+    }
+};
+
+WebInspector.ScriptTreeElement.prototype.__proto__ = WebInspector.SourceCodeTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SearchBar.css b/Source/WebInspectorUI/UserInterface/SearchBar.css
new file mode 100644
index 000000000..7275e4c55
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SearchBar.css
@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.search-bar > input[type="search"] {
+    margin: 1px 6px;
+
+    outline: none;
+
+    -webkit-appearance: none;
+
+    border: 1px solid rgba(0, 0, 0, 0.35);
+    border-radius: 10px;
+    background-color: rgba(255, 255, 255, 0.2);
+    box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0;
+    background-clip: padding-box;
+
+    height: 19px;
+
+    transition: background-color 200ms ease-in-out;
+}
+
+.search-bar > input[type="search"]::-webkit-input-placeholder {
+    color: rgba(0, 0, 0, 0.35);
+}
+
+.search-bar > input[type="search"]:focus { background-color: white; }
+.search-bar > input[type="search"]:not(:placeholder-shown) { background-color: white; } /* Needs to be a separate rule. See http://webkit.org/b/118162 */
diff --git a/Source/WebInspectorUI/UserInterface/SearchBar.js b/Source/WebInspectorUI/UserInterface/SearchBar.js
new file mode 100644
index 000000000..0f91f4283
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SearchBar.js
@@ -0,0 +1,98 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SearchBar = function(identifier, placeholder, delegate) {
+    WebInspector.NavigationItem.call(this, identifier);
+
+    this.delegate = delegate;
+
+    this._element.classList.add(WebInspector.SearchBar.StyleClassName);
+
+    this._keyboardShortcutEsc = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape);
+    this._keyboardShortcutEnter = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Enter);
+
+    this._searchInput = this._element.appendChild(document.createElement("input"));
+    this._searchInput.type = "search";
+    this._searchInput.spellcheck = false;
+    this._searchInput.incremental = true;
+    this._searchInput.setAttribute("results", 5);
+    this._searchInput.setAttribute("autosave", identifier + "-autosave");
+    this._searchInput.setAttribute("placeholder", placeholder);
+    this._searchInput.addEventListener("search", this._handleSearchEvent.bind(this), false);
+    this._searchInput.addEventListener("keydown", this._handleKeydownEvent.bind(this), false);
+};
+
+WebInspector.SearchBar.StyleClassName = "search-bar";
+WebInspector.SearchBar.Event = {
+    TextChanged: "searchbar-text-did-change"
+};
+
+WebInspector.SearchBar.prototype = {
+    constructor: WebInspector.SearchBar,
+
+    // Public
+
+    get text()
+    {
+        return this._searchInput.value;
+    },
+
+    set text(newText)
+    {
+        this._searchInput.value = newText;
+    },
+
+    focus: function()
+    {
+        this._searchInput.focus();
+        this._searchInput.select();
+    },
+
+    // Private
+
+    _handleSearchEvent: function(event)
+    {
+        this.dispatchEventToListeners(WebInspector.SearchBar.Event.TextChanged);
+    },
+    
+    _handleKeydownEvent: function(event)
+    {
+        if (this._keyboardShortcutEsc.matchesEvent(event)) {
+            if (this.delegate && typeof this.delegate.searchBarWantsToLoseFocus === "function") {
+                this.delegate.searchBarWantsToLoseFocus(this);
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        } else if (this._keyboardShortcutEnter.matchesEvent(event)) {
+            if (this.delegate && typeof this.delegate.searchBarDidActivate === "function") {
+                this.delegate.searchBarDidActivate(this);
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        }
+    }
+};
+
+WebInspector.SearchBar.prototype.__proto__ = WebInspector.NavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SearchIcons.css b/Source/WebInspectorUI/UserInterface/SearchIcons.css
new file mode 100644
index 000000000..c362c6d12
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SearchIcons.css
@@ -0,0 +1,52 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.dom-match-element-icon .icon {
+    content: url(Images/DOMElement.pdf);
+}
+
+.dom-match-text-node-icon .icon {
+    content: url(Images/DOMTextNode.pdf);
+}
+
+.dom-match-comment-icon .icon {
+    content: url(Images/DOMComment.pdf);
+}
+
+.dom-match-document-type-icon .icon {
+    content: url(Images/DOMDocumentType.pdf);
+}
+
+.dom-match-character-data-icon .icon {
+    content: url(Images/DOMCharacterData.pdf);
+}
+
+.dom-match-node-icon .icon {
+    content: url(Images/DOMNode.pdf);
+}
+
+.resource-match-icon .icon {
+    content: url(Images/ResultLine.pdf);
+}
diff --git a/Source/WebInspectorUI/UserInterface/SearchResultTreeElement.js b/Source/WebInspectorUI/UserInterface/SearchResultTreeElement.js
new file mode 100644
index 000000000..ec245d502
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SearchResultTreeElement.js
@@ -0,0 +1,89 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SearchResultTreeElement = function(representedObject)
+{
+    console.assert(representedObject instanceof WebInspector.DOMSearchMatchObject || representedObject instanceof WebInspector.ResourceSearchMatchObject);
+
+    var title = WebInspector.SearchResultTreeElement.truncateAndHighlightTitle(representedObject.title, representedObject.searchTerm, representedObject.sourceCodeTextRange);
+
+    WebInspector.GeneralTreeElement.call(this, representedObject.className, title, null, representedObject, false);
+    this.small = true;
+};
+
+WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch = 15;
+WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch = 50;
+WebInspector.SearchResultTreeElement.HighlightedStyleClassName = "highlighted";
+
+WebInspector.SearchResultTreeElement.prototype = {
+    constructor: WebInspector.SearchResultTreeElement,
+
+    // Public
+
+    get filterableData()
+    {
+        return {text: this.representedObject.title};
+    }
+};
+
+WebInspector.SearchResultTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
+
+WebInspector.SearchResultTreeElement.truncateAndHighlightTitle = function(title, searchTerm, sourceCodeTextRange)
+{
+    // Use the original location, since those line/column offsets match the line text in title.
+    var textRange = sourceCodeTextRange.textRange;
+    
+    var searchTermIndex = textRange.startColumn;
+
+    // We should only have one line text ranges, so make sure that is the case.
+    console.assert(textRange.startLine === textRange.endLine);
+
+    // Show some characters before the matching text (if there are enough) for context. TreeOutline takes care of the truncating
+    // at the end of the string.
+    var modifiedTitle = null;
+    if (searchTermIndex > WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch) {
+        modifiedTitle = "\u2026" + title.substring(searchTermIndex - WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch);
+        searchTermIndex = WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch + 1;
+    } else
+        modifiedTitle = title;
+
+    // Truncate the tail of the title so the tooltip isn't so large.
+    modifiedTitle = modifiedTitle.trimEnd(searchTermIndex + searchTerm.length + WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch);
+
+    console.assert(modifiedTitle.substring(searchTermIndex, searchTermIndex + searchTerm.length).toLowerCase() === searchTerm.toLowerCase());
+
+    var highlightedTitle = document.createDocumentFragment();
+
+    highlightedTitle.appendChild(document.createTextNode(modifiedTitle.substring(0, searchTermIndex)));
+
+    var highlightSpan = document.createElement("span");
+    highlightSpan.className = WebInspector.SearchResultTreeElement.HighlightedStyleClassName
+    highlightSpan.appendChild(document.createTextNode(modifiedTitle.substring(searchTermIndex, searchTermIndex + searchTerm.length)));
+    highlightedTitle.appendChild(highlightSpan);
+
+    highlightedTitle.appendChild(document.createTextNode(modifiedTitle.substring(searchTermIndex + searchTerm.length)));
+
+    return highlightedTitle;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Section.css b/Source/WebInspectorUI/UserInterface/Section.css
new file mode 100644
index 000000000..299fc0550
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Section.css
@@ -0,0 +1,195 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.section {
+    position: relative;
+}
+
+.section .header {
+    color: black;
+    padding: 0 8px 0 18px;
+    min-height: 18px;
+    white-space: nowrap;
+    background-origin: padding;
+    background-clip: padding;
+}
+
+.section .header::before {
+    position: absolute;
+    top: 5px;
+    left: 7px;
+
+    width: 8px;
+    height: 8px;
+
+    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal);
+    background-size: 8px 8px;
+    background-repeat: no-repeat;
+
+    content: "";
+}
+
+.section.expanded .header::before {
+    background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
+}
+
+.section .header .title, .event-bar .header .title {
+    font-weight: normal;
+    word-wrap: break-word;
+    white-space: normal;
+    line-height: 18px;
+}
+
+.section .header .title.blank-title {
+    font-style: italic;
+}
+
+.section .header label, .event-bar .header label {
+    display: none;
+}
+
+.section.expanded .header label, .event-bar.expanded .header label {
+    display: inline;
+}
+
+.section .header .subtitle, .event-bar .header .subtitle {
+    float: right;
+    margin-left: 5px;
+    max-width: 55%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.section .header .subtitle a {
+    color: inherit;
+}
+
+.section .properties, .event-bar .event-properties {
+    display: none;
+}
+
+.section.expanded .properties, .event-bar.expanded .event-properties {
+    display: block;
+    padding-left: 16px;
+}
+
+.section.expanded.no-header .properties {
+    padding-left: 0;
+}
+
+.section.no-affect .properties li {
+    opacity: 0.5;
+}
+
+.section.no-affect .properties li.editing {
+    opacity: 1.0;
+}
+
+.properties-tree {
+    margin: 0;
+    padding: 0 6px 2px;
+    list-style: none;
+    min-height: 18px;
+    outline: none;
+}
+
+.properties-tree li {
+    margin-left: 12px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    -webkit-user-select: text;
+    cursor: default;
+}
+
+.properties-tree li.parent {
+    margin-left: 1px;
+}
+
+.properties-tree li.parent::before {
+    float: left;
+
+    content: "";
+
+    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal);
+    background-size: 8px 8px;
+    background-repeat: no-repeat;
+
+    width: 8px;
+    height: 8px;
+
+    margin-top: 3px;
+    padding-right: 2px;
+}
+
+.properties-tree li.parent.expanded::before {
+    background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
+}
+
+.properties-tree li .info {
+    padding-top: 4px;
+    padding-bottom: 3px;
+}
+
+.properties-tree ol {
+    display: none;
+    margin: 0;
+    -webkit-padding-start: 12px;
+    list-style: none;
+}
+
+.properties-tree ol.expanded {
+    display: block;
+}
+
+.section .properties li.editing-sub-part {
+    padding: 3px 6px 8px 18px;
+    margin: -3px -6px -8px -6px;
+    text-overflow: clip;
+}
+
+.section .properties .name, .event-properties .name {
+    color: rgb(136, 19, 145);
+}
+
+.section .properties .dimmed {
+    opacity: 0.6;
+}
+
+.section .properties .value.error {
+    color: red;
+}
+
+.section .properties .number, .event-properties .number {
+    color: blue;
+}
+
+.section .properties .keyword, .event-properties .keyword {
+    color: rgb(136, 19, 79);
+}
+
+.section .properties .color, .event-properties .color {
+    color: rgb(118, 15, 21);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Section.js b/Source/WebInspectorUI/UserInterface/Section.js
new file mode 100644
index 000000000..5305b0b06
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Section.js
@@ -0,0 +1,227 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Section = function(title, subtitle)
+{
+    WebInspector.Object.call(this);
+
+    this.element = document.createElement("div");
+    this.element.className = "section";
+    this.element._section = this;
+
+    if (typeof title === "string" || title instanceof Node || typeof subtitle === "string") {
+        this.headerElement = document.createElement("div");
+        this.headerElement.className = "header";
+
+        this.titleElement = document.createElement("div");
+        this.titleElement.className = "title";
+
+        this.subtitleElement = document.createElement("div");
+        this.subtitleElement.className = "subtitle";
+
+        this.headerElement.appendChild(this.subtitleElement);
+        this.headerElement.appendChild(this.titleElement);
+
+        this.headerElement.addEventListener("click", this.handleClick.bind(this), false);
+        this.element.appendChild(this.headerElement);
+
+        this.title = title;
+        this.subtitle = subtitle;
+    } else
+        this.element.classList.add("no-header");
+
+    this._expanded = false;
+
+    if (!this.headerElement)
+        this.expand();
+};
+
+WebInspector.Section.Event = {
+    VisibleContentDidChange: "section-visible-content-did-change"
+};
+
+WebInspector.Section.prototype = {
+    get title()
+    {
+        return this._title;
+    },
+
+    set title(x)
+    {
+        if (this._title === x)
+            return;
+        this._title = x;
+
+        if (x instanceof Node) {
+            this.titleElement.removeChildren();
+            this.titleElement.appendChild(x);
+        } else
+          this.titleElement.textContent = x;
+    },
+
+    get subtitle()
+    {
+        return this._subtitle;
+    },
+
+    set subtitle(x)
+    {
+        if (this._subtitle === x)
+            return;
+        this._subtitle = x;
+        this.subtitleElement.textContent = x;
+    },
+
+    get subtitleAsTextForTest()
+    {
+        var result = this.subtitleElement.textContent;
+        var child = this.subtitleElement.querySelector("[data-uncopyable]");
+        if (child) {
+            var linkData = child.getAttribute("data-uncopyable");
+            if (linkData)
+                result += linkData;
+        }
+        return result;
+    },
+
+    get expanded()
+    {
+        return this._expanded;
+    },
+
+    set expanded(x)
+    {
+        if (x)
+            this.expand();
+        else
+            this.collapse();
+    },
+
+    get populated()
+    {
+        return this._populated;
+    },
+
+    set populated(x)
+    {
+        this._populated = x;
+        if (!x && this._expanded) {
+            this.onpopulate();
+            this._populated = true;
+        }
+    },
+
+    onpopulate: function()
+    {
+        // Overriden by subclasses.
+    },
+
+    get firstSibling()
+    {
+        var parent = this.element.parentElement;
+        if (!parent)
+            return null;
+
+        var childElement = parent.firstChild;
+        while (childElement) {
+            if (childElement._section)
+                return childElement._section;
+            childElement = childElement.nextSibling;
+        }
+
+        return null;
+    },
+
+    get lastSibling()
+    {
+        var parent = this.element.parentElement;
+        if (!parent)
+            return null;
+
+        var childElement = parent.lastChild;
+        while (childElement) {
+            if (childElement._section)
+                return childElement._section;
+            childElement = childElement.previousSibling;
+        }
+
+        return null;
+    },
+
+    get nextSibling()
+    {
+        var curElement = this.element;
+        do {
+            curElement = curElement.nextSibling;
+        } while (curElement && !curElement._section);
+
+        return curElement ? curElement._section : null;
+    },
+
+    get previousSibling()
+    {
+        var curElement = this.element;
+        do {
+            curElement = curElement.previousSibling;
+        } while (curElement && !curElement._section);
+
+        return curElement ? curElement._section : null;
+    },
+
+    expand: function()
+    {
+        if (this._expanded)
+            return;
+        this._expanded = true;
+        this.element.classList.add("expanded");
+
+        if (!this._populated) {
+            this.onpopulate();
+            this._populated = true;
+        } else
+            this.dispatchEventToListeners(WebInspector.Section.Event.VisibleContentDidChange);
+    },
+
+    collapse: function()
+    {
+        if (!this._expanded)
+            return;
+        this._expanded = false;
+        this.element.classList.remove("expanded");
+    },
+
+    toggleExpanded: function()
+    {
+        this.expanded = !this.expanded;
+    },
+
+    handleClick: function(e)
+    {
+        this.toggleExpanded();
+        e.stopPropagation();
+    }
+};
+
+WebInspector.Section.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Setting.js b/Source/WebInspectorUI/UserInterface/Setting.js
new file mode 100644
index 000000000..79a80116b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Setting.js
@@ -0,0 +1,96 @@
+/*
+ * Copyright (C) 2009 Google Inc. All rights reserved.
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Setting = function(name, defaultValue)
+{
+    this._name = name;
+    this._localStorageKey = WebInspector.Setting.LocalStorageKeyPrefix + name;
+    this._defaultValue = defaultValue;
+}
+
+WebInspector.Object.addConstructorFunctions(WebInspector.Setting);
+
+WebInspector.Setting.Event = {
+    Changed: "setting-changed"
+};
+
+WebInspector.Setting.LocalStorageKeyPrefix = "com.apple.WebInspector.";
+
+WebInspector.Setting.prototype = {
+    constructor: WebInspector.Setting,
+
+    // Public
+
+    get name()
+    {
+        return this._name;
+    },
+
+    get value()
+    {
+        if ("_value" in this)
+            return this._value;
+
+        // Make a copy of the default value so changes to object values don't modify the default value.
+        this._value = JSON.parse(JSON.stringify(this._defaultValue));
+
+        if (window.localStorage && this._localStorageKey in window.localStorage) {
+            try {
+                this._value = JSON.parse(window.localStorage[this._localStorageKey]);
+            } catch(e) {
+                delete window.localStorage[this._localStorageKey];
+            }
+        }
+
+        return this._value;
+    },
+
+    set value(value)
+    {
+        this._value = value;
+
+        if (window.localStorage) {
+            try {
+                // Use Object.shallowEqual to properly compare objects.
+                if (Object.shallowEqual(this._value, this._defaultValue))
+                    delete window.localStorage[this._localStorageKey];
+                else
+                    window.localStorage[this._localStorageKey] = JSON.stringify(this._value);
+            } catch(e) {
+                console.error("Error saving setting with name: " + this._name);
+            }
+        }
+
+        this.dispatchEventToListeners(WebInspector.Setting.Event.Changed, this._value, {name: this._name});
+    }
+}
+
+WebInspector.Setting.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Sidebar.css b/Source/WebInspectorUI/UserInterface/Sidebar.css
new file mode 100644
index 000000000..3a1f7526a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Sidebar.css
@@ -0,0 +1,93 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar {
+    position: relative;
+
+    background-color: rgb(227, 231, 235);
+}
+
+.sidebar.collapsed {
+    width: 0 !important;
+    border: none !important;
+}
+
+body.window-inactive .sidebar {
+    background-color: rgb(231, 231, 231);
+}
+
+.sidebar > .panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    display: none;
+
+    overflow: hidden;
+
+    z-index: 0; /* Workaround so that scroll bars appear above position:sticky section headers. */
+}
+
+.sidebar > .panel.selected {
+    display: block;
+}
+
+.sidebar > .resizer {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 5px;
+
+    z-index: 100;
+
+    cursor: col-resize;
+}
+
+.sidebar.right > .resizer {
+    left: -3px;
+}
+
+.sidebar.left > .resizer {
+    right: -3px;
+}
+
+.sidebar.collapsed.right > .resizer {
+    left: -5px;
+}
+
+.sidebar.collapsed.left > .resizer {
+    right: -5px;
+}
+
+.sidebar.left {
+    border-right: 1px solid rgb(153, 153, 153);
+}
+
+.sidebar.right {
+    background-color: rgb(231, 231, 231);
+    border-left: 1px solid rgb(153, 153, 153);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Sidebar.js b/Source/WebInspectorUI/UserInterface/Sidebar.js
new file mode 100644
index 000000000..9b0872c2f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Sidebar.js
@@ -0,0 +1,319 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Sidebar = function(element, side, sidebarPanels, role, label) {
+    WebInspector.Object.call(this);
+
+    console.assert(!side || side === WebInspector.Sidebar.Sides.Left || side === WebInspector.Sidebar.Sides.Right);
+    this._side = side || WebInspector.Sidebar.Sides.Left;
+
+    this._element = element || document.createElement("div");
+    this._element.classList.add(WebInspector.Sidebar.StyleClassName);
+    this._element.classList.add(WebInspector.Sidebar.CollapsedStyleClassName);
+    this._element.classList.add(this._side);
+
+    this._element.setAttribute("role", role || "group");
+    if (label)
+        this._element.setAttribute("aria-label", label);
+
+    this._resizeElement = document.createElement("div");
+    this._resizeElement.classList.add(WebInspector.Sidebar.ResizeElementStyleClassName);
+    this._resizeElement.addEventListener("mousedown", this._resizerMouseDown.bind(this), false);
+    this._resizeElement.addEventListener("dblclick", this._resizerDoubleClicked.bind(this), false);
+    this._element.insertBefore(this._resizeElement, this._element.firstChild);
+
+    this._sidebarPanels = [];
+
+    if (sidebarPanels) {
+        for (var i = 0; i < sidebarPanels.length; ++i)
+            this.addSidebarPanel(sidebarPanels[i]);
+    }
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.Sidebar);
+
+WebInspector.Sidebar.StyleClassName = "sidebar";
+WebInspector.Sidebar.CollapsedStyleClassName = "collapsed";
+WebInspector.Sidebar.ResizeElementStyleClassName = "resizer";
+WebInspector.Sidebar.AbsoluteMinimumWidth = 200;
+
+WebInspector.Sidebar.Sides = {};
+WebInspector.Sidebar.Sides.Right = "right";
+WebInspector.Sidebar.Sides.Left = "left";
+
+WebInspector.Sidebar.Event = {
+    SidebarPanelSelected: "sidebar-sidebar-panel-selected",
+    CollapsedStateDidChange: "sidebar-sidebar-collapsed-state-did-change",
+    WidthDidChange: "sidebar-width-did-change",
+};
+
+WebInspector.Sidebar.prototype = {
+    constructor: WebInspector.Sidebar,
+
+    // Public
+
+    addSidebarPanel: function(sidebarPanel)
+    {
+        console.assert(sidebarPanel instanceof WebInspector.SidebarPanel);
+        if (!(sidebarPanel instanceof WebInspector.SidebarPanel))
+            return;
+
+        console.assert(!sidebarPanel.parentSidebar);
+        if (sidebarPanel.parentSidebar)
+            return;
+
+        sidebarPanel._parentSidebar = this;
+
+        this._sidebarPanels.push(sidebarPanel);
+        this._element.appendChild(sidebarPanel.element);
+
+        sidebarPanel.added();
+
+        return sidebarPanel;
+    },
+
+    removeSidebarPanel: function(sidebarPanelOrIdentifierOrIndex, index)
+    {
+        var sidebarPanel = this.findSidebarPanel(sidebarPanelOrIdentifierOrIndex);
+        if (!sidebarPanel)
+            return;
+
+        sidebarPanel.willRemove();
+
+        sidebarPanel._parentSidebar = null;
+
+        if (this._selectedSidebarPanel === sidebarPanel) {
+            var index = this._sidebarPanels.indexOf(sidebarPanel);
+            this.selectedSidebarPanel = this._sidebarPanels[index - 1] || this._sidebarPanels[index + 1];
+        }
+
+        this._sidebarPanels.remove(sidebarPanel);
+        this._element.removeChild(sidebarPanel.element);
+
+        sidebarPanel.removed();
+
+        return sidebarPanel;
+    },
+
+    get selectedSidebarPanel()
+    {
+        return this._selectedSidebarPanel || null;
+    },
+
+    set selectedSidebarPanel(sidebarPanelOrIdentifierOrIndex)
+    {
+        var sidebarPanel = this.findSidebarPanel(sidebarPanelOrIdentifierOrIndex);
+        if (this._selectedSidebarPanel === sidebarPanel)
+            return;
+
+        if (this._selectedSidebarPanel) {
+            var wasVisible = this._selectedSidebarPanel.visible;
+
+            this._selectedSidebarPanel.selected = false;
+
+            if (wasVisible) {
+                this._selectedSidebarPanel.hidden();
+                this._selectedSidebarPanel.visibilityDidChange();
+            }
+        }
+
+        this._selectedSidebarPanel = sidebarPanel || null;
+
+        if (this._selectedSidebarPanel) {
+            this._selectedSidebarPanel.selected = true;
+
+            if (this._selectedSidebarPanel.visible) {
+                this._selectedSidebarPanel.shown();
+                this._selectedSidebarPanel.visibilityDidChange();
+            }
+        }
+
+        this.dispatchEventToListeners(WebInspector.Sidebar.Event.SidebarPanelSelected);
+    },
+
+    get minimumWidth()
+    {
+        return WebInspector.Sidebar.AbsoluteMinimumWidth;
+    },
+
+    get maximumWidth()
+    {
+        // FIXME: This is kind of arbitrary and ideally would be a more complex calculation based on the
+        // available space for the sibling elements.
+        return Math.round(window.innerWidth / 3);
+    },
+
+    get width()
+    {
+        return this._element.offsetWidth;
+    },
+
+    set width(newWidth)
+    {
+        if (newWidth === this.width)
+            return;
+
+        newWidth = Math.max(this.minimumWidth, Math.min(newWidth, this.maximumWidth));
+
+        this._element.style.width = newWidth + "px";
+
+        if (!this.collapsed && this._selectedSidebarPanel)
+            this._selectedSidebarPanel.widthDidChange();
+
+        this.dispatchEventToListeners(WebInspector.Sidebar.Event.WidthDidChange);
+    },
+
+    get collapsed()
+    {
+        return this._element.classList.contains(WebInspector.Sidebar.CollapsedStyleClassName);
+    },
+
+    set collapsed(flag)
+    {
+        if (flag === this.collapsed)
+            return;
+
+        if (flag)
+            this._element.classList.add(WebInspector.Sidebar.CollapsedStyleClassName);
+        else
+            this._element.classList.remove(WebInspector.Sidebar.CollapsedStyleClassName);
+
+        if (this._selectedSidebarPanel) {
+            if (this._selectedSidebarPanel.visible)
+                this._selectedSidebarPanel.shown();
+            else
+                this._selectedSidebarPanel.hidden();
+
+            this._selectedSidebarPanel.visibilityDidChange();
+
+            this._selectedSidebarPanel.widthDidChange();
+        }
+
+        this.dispatchEventToListeners(WebInspector.Sidebar.Event.CollapsedStateDidChange);
+        this.dispatchEventToListeners(WebInspector.Sidebar.Event.WidthDidChange);
+    },
+
+    get sidebarPanels()
+    {
+        return this._sidebarPanels;
+    },
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get side()
+    {
+        return this._side;
+    },
+
+    findSidebarPanel: function(sidebarPanelOrIdentifierOrIndex)
+    {
+        var sidebarPanel = null;
+
+        if (sidebarPanelOrIdentifierOrIndex instanceof WebInspector.SidebarPanel) {
+            if (this._sidebarPanels.contains(sidebarPanelOrIdentifierOrIndex))
+                sidebarPanel = sidebarPanelOrIdentifierOrIndex;
+        } else if (typeof sidebarPanelOrIdentifierOrIndex === "number") {
+            sidebarPanel = this._sidebarPanels[sidebarPanelOrIdentifierOrIndex];
+        } else if (typeof sidebarPanelOrIdentifierOrIndex === "string") {
+            for (var i = 0; i < this._sidebarPanels.length; ++i) {
+                if (this._sidebarPanels[i].identifier === sidebarPanelOrIdentifierOrIndex) {
+                    sidebarPanel = this._sidebarPanels[i];
+                    break;
+                }
+            }
+        }
+
+        return sidebarPanel;
+    },
+
+    // Private
+
+    _navigationItemSelected: function(event)
+    {
+        this.selectedSidebarPanel = event.target.selectedNavigationItem ? event.target.selectedNavigationItem.identifier : null;
+    },
+
+    _resizerDoubleClicked: function(event)
+    {
+        this.collapsed = !this.collapsed;
+
+        event.preventDefault();
+        event.stopPropagation();
+    },
+
+    _resizerMouseDown: function(event)
+    {
+        if (event.button !== 0 || event.ctrlKey)
+            return;
+
+        document.body.style.cursor = "col-resize";
+
+        this._resizerMouseMovedEventListener = this._resizerMouseMoved.bind(this);
+        this._resizerMouseUpEventListener = this._resizerMouseUp.bind(this);
+
+        // Register these listeners on the document so we can track the mouse if it leaves the resizer.
+        document.addEventListener("mousemove", this._resizerMouseMovedEventListener, false);
+        document.addEventListener("mouseup", this._resizerMouseUpEventListener, false);
+
+        event.preventDefault();
+        event.stopPropagation();
+    },
+
+    _resizerMouseMoved: function(event)
+    {
+        if (this._side === WebInspector.Sidebar.Sides.Left)
+            var newWidth = event.pageX - this._element.totalOffsetLeft;
+        else
+            var newWidth = this._element.totalOffsetLeft + this._element.offsetWidth - event.pageX;
+
+        this.width = newWidth;
+        this.collapsed = (newWidth < (this.minimumWidth / 2));
+
+        event.preventDefault();
+        event.stopPropagation();
+    },
+
+    _resizerMouseUp: function(event)
+    {
+        if (event.button !== 0 || event.ctrlKey)
+            return;
+
+        document.body.style.removeProperty("cursor");
+
+        document.removeEventListener("mousemove", this._resizerMouseMovedEventListener, false);
+        document.removeEventListener("mouseup", this._resizerMouseUpEventListener, false);
+
+        delete this._resizerMouseMovedEventListener;
+        delete this._resizerMouseUpEventListener;
+
+        event.preventDefault();
+        event.stopPropagation();
+    }
+};
+
+WebInspector.Sidebar.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SidebarPanel.js b/Source/WebInspectorUI/UserInterface/SidebarPanel.js
new file mode 100644
index 000000000..e6da757a2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SidebarPanel.js
@@ -0,0 +1,156 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SidebarPanel = function(identifier, displayName, showToolTip, hideToolTip, image, element, role, label) {
+    WebInspector.Object.call(this);
+
+    this._identifier = identifier;
+
+    this._toolbarItem = new WebInspector.ActivateButtonToolbarItem(identifier, showToolTip, hideToolTip, displayName, image);
+    this._toolbarItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this.toggle, this);
+    this._toolbarItem.enabled = false;
+
+    this._element = element || document.createElement("div");
+    this._element.classList.add(WebInspector.SidebarPanel.StyleClassName);
+    this._element.classList.add(identifier);
+
+    this._element.setAttribute("role", role || "group");
+    this._element.setAttribute("aria-label", label || displayName);
+
+};
+
+WebInspector.SidebarPanel.StyleClassName = "panel";
+WebInspector.SidebarPanel.SelectedStyleClassName = "selected";
+
+WebInspector.SidebarPanel.prototype = {
+    constructor: WebInspector.SidebarPanel,
+
+    // Public
+
+    get identifier()
+    {
+        return this._identifier;
+    },
+
+    get toolbarItem()
+    {
+        return this._toolbarItem;
+    },
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get visible()
+    {
+        return this.selected && this._parentSidebar && !this._parentSidebar.collapsed;
+    },
+
+    get selected()
+    {
+        return this._element.classList.contains(WebInspector.SidebarPanel.SelectedStyleClassName);
+    },
+
+    set selected(flag)
+    {
+        if (flag)
+            this._element.classList.add(WebInspector.SidebarPanel.SelectedStyleClassName);
+        else
+            this._element.classList.remove(WebInspector.SidebarPanel.SelectedStyleClassName);
+    },
+
+    get parentSidebar()
+    {
+        return this._parentSidebar;
+    },
+
+    show: function()
+    {
+        if (!this._parentSidebar)
+            return;
+
+        this._parentSidebar.collapsed = false;
+        this._parentSidebar.selectedSidebarPanel = this;
+    },
+
+    hide: function()
+    {
+        if (!this._parentSidebar)
+            return;
+
+        this._parentSidebar.collapsed = true;
+        this._parentSidebar.selectedSidebarPanel = null;
+    },
+
+    toggle: function()
+    {
+        if (this.visible)
+            this.hide();
+        else
+            this.show();
+    },
+
+    added: function()
+    {
+        console.assert(this._parentSidebar);
+        this._toolbarItem.enabled = true;
+        this._toolbarItem.activated = this.visible;
+    },
+
+    removed: function()
+    {
+        console.assert(!this._parentSidebar);
+        this._toolbarItem.enabled = false;
+        this._toolbarItem.activated = false;
+    },
+
+    willRemove: function()
+    {
+        // Implemented by subclasses.
+    },
+
+    shown: function()
+    {
+        // Implemented by subclasses.
+    },
+
+    hidden: function()
+    {
+        // Implemented by subclasses.
+    },
+
+    widthDidChange: function()
+    {
+        // Implemented by subclasses.
+    },
+
+    visibilityDidChange: function()
+    {
+        this._toolbarItem.activated = this.visible;
+    }
+};
+
+WebInspector.SidebarPanel.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceCode.js b/Source/WebInspectorUI/UserInterface/SourceCode.js
new file mode 100644
index 000000000..fe267d29a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SourceCode.js
@@ -0,0 +1,262 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceCode = function()
+{
+    WebInspector.Object.call(this);
+
+    this._pendingContentRequestCallbacks = [];
+
+    this._originalRevision = new WebInspector.SourceCodeRevision(this, null, false);
+    this._currentRevision = this._originalRevision;
+
+    this._sourceMaps = null;
+    this._formatterSourceMap = null;
+};
+
+WebInspector.SourceCode.Event = {
+    ContentDidChange: "source-code-content-did-change",
+    SourceMapAdded: "source-code-source-map-added",
+    FormatterDidChange: "source-code-formatter-did-change"
+};
+
+WebInspector.SourceCode.prototype = {
+    constructor: WebInspector.SourceCode,
+
+    // Public
+
+    get displayName()
+    {
+        // Implemented by subclasses.
+        console.error("Needs to be implemented by a subclass.");
+        return "";
+    },
+
+    get originalRevision()
+    {
+        return this._originalRevision;
+    },
+
+    get currentRevision()
+    {
+        return this._currentRevision;
+    },
+
+    set currentRevision(revision)
+    {
+        console.assert(revision instanceof WebInspector.SourceCodeRevision);
+        if (!(revision instanceof WebInspector.SourceCodeRevision))
+            return;
+
+        console.assert(revision.sourceCode === this);
+        if (revision.sourceCode !== this)
+            return;
+
+        this._currentRevision = revision;
+
+        this.dispatchEventToListeners(WebInspector.SourceCode.Event.ContentDidChange);
+    },
+
+    get content()
+    {
+        return this._currentRevision.content;
+    },
+
+    get contentIsBase64Encoded()
+    {
+        return this._currentRevision.contentIsBase64Encoded;
+    },
+
+    get sourceMaps()
+    {
+        return this._sourceMaps || [];
+    },
+
+    addSourceMap: function(sourceMap)
+    {
+        console.assert(sourceMap instanceof WebInspector.SourceMap);
+
+        if (!this._sourceMaps)
+            this._sourceMaps = [];
+
+        this._sourceMaps.push(sourceMap);
+
+        this.dispatchEventToListeners(WebInspector.SourceCode.Event.SourceMapAdded);
+    },
+
+    get formatterSourceMap()
+    {
+        return this._formatterSourceMap;
+    },
+
+    set formatterSourceMap(formatterSourceMap)
+    {
+        console.assert(this._formatterSourceMap === null || formatterSourceMap === null);
+        console.assert(formatterSourceMap === null || formatterSourceMap instanceof WebInspector.FormatterSourceMap);
+
+        this._formatterSourceMap = formatterSourceMap;
+
+        this.dispatchEventToListeners(WebInspector.SourceCode.Event.FormatterDidChange);
+    },
+
+    requestContent: function(callback)
+    {
+        console.assert(typeof callback === "function");
+        if (typeof callback !== "function")
+            return;
+
+        this._pendingContentRequestCallbacks.push(callback);
+
+        if (this._contentReceived) {
+            // Call _servicePendingContentRequests on a timeout to force callbacks to be asynchronous.
+            if (!this._servicePendingContentRequestsTimeoutIdentifier)
+                this._servicePendingContentRequestsTimeoutIdentifier = setTimeout(this.servicePendingContentRequests.bind(this), 0);
+        } else if (this.canRequestContentFromBackend())
+            this.requestContentFromBackendIfNeeded();
+    },
+
+    createSourceCodeLocation: function(lineNumber, columnNumber)
+    {
+        return new WebInspector.SourceCodeLocation(this, lineNumber, columnNumber);
+    },
+
+    createSourceCodeTextRange: function(textRange)
+    {
+        return new WebInspector.SourceCodeTextRange(this, textRange);
+    },
+
+    // Protected
+
+    revisionContentDidChange: function(revision)
+    {
+        if (this._ignoreRevisionContentDidChangeEvent)
+            return;
+
+        if (revision !== this._currentRevision)
+            return;
+
+        this.handleCurrentRevisionContentChange();
+
+        this.dispatchEventToListeners(WebInspector.SourceCode.Event.ContentDidChange);
+    },
+
+    handleCurrentRevisionContentChange: function()
+    {
+        // Implemented by subclasses if needed.
+    },
+
+    get revisionForRequestedContent()
+    {
+        // Implemented by subclasses if needed.
+        return this._originalRevision;
+    },
+
+    markContentAsStale: function()
+    {
+        this._contentReceived = false;
+    },
+
+    canRequestContentFromBackend: function()
+    {
+        // Implemented by subclasses.
+        console.error("Needs to be implemented by a subclass.");
+        return false;
+    },
+
+    requestContentFromBackend: function(callback)
+    {
+        // Implemented by subclasses.
+        console.error("Needs to be implemented by a subclass.");
+    },
+
+    requestContentFromBackendIfNeeded: function()
+    {
+        console.assert(this.canRequestContentFromBackend());
+        if (!this.canRequestContentFromBackend())
+            return;
+
+        if (!this._pendingContentRequestCallbacks.length)
+            return;
+
+        if (this._contentRequestResponsePending)
+            return;
+
+        this._contentRequestResponsePending = true;
+
+        if (this.requestContentFromBackend(this._processContent.bind(this)))
+            return;
+
+        // Since requestContentFromBackend returned false, just call _processContent,
+        // which will cause the pending callbacks to get null content.
+        this._processContent();
+    },
+
+    servicePendingContentRequests: function(force)
+    {
+        if (this._servicePendingContentRequestsTimeoutIdentifier) {
+            clearTimeout(this._servicePendingContentRequestsTimeoutIdentifier);
+            delete this._servicePendingContentRequestsTimeoutIdentifier;
+        }
+
+        // Force the content requests to be sent. To do this correctly we also force
+        // _contentReceived to be true so future calls to requestContent go through.
+        if (force)
+            this._contentReceived = true;
+
+        console.assert(this._contentReceived);
+        if (!this._contentReceived)
+            return;
+
+        // Move the callbacks into a local and clear _pendingContentRequestCallbacks so
+        // callbacks that might call requestContent again will not modify the array.
+        var callbacks = this._pendingContentRequestCallbacks;
+        this._pendingContentRequestCallbacks = [];
+
+        for (var i = 0; i < callbacks.length; ++i)
+            callbacks[i](this, this.content, this.contentIsBase64Encoded);
+    },
+
+    // Private
+
+    _processContent: function(error, content, base64Encoded)
+    {
+        if (error)
+            console.error(error);
+
+        this._contentRequestResponsePending = false;
+        this._contentReceived = true;
+
+        var revision = this.revisionForRequestedContent;
+
+        this._ignoreRevisionContentDidChangeEvent = true;
+        revision.content = content || null;
+        revision.contentIsBase64Encoded = base64Encoded || false;
+        delete this._ignoreRevisionContentDidChangeEvent;
+
+        this.servicePendingContentRequests();
+    }
+};
+
+WebInspector.SourceCode.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceCodeLocation.js b/Source/WebInspectorUI/UserInterface/SourceCodeLocation.js
new file mode 100644
index 000000000..35042b95e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SourceCodeLocation.js
@@ -0,0 +1,444 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceCodeLocation = function(sourceCode, lineNumber, columnNumber)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(sourceCode === null || sourceCode instanceof WebInspector.SourceCode);
+    console.assert(!(sourceCode instanceof WebInspector.SourceMapResource));
+    console.assert(typeof lineNumber === "number" && !isNaN(lineNumber) && lineNumber >= 0);
+    console.assert(typeof columnNumber === "number" && !isNaN(columnNumber) && columnNumber >= 0);
+
+    this._sourceCode = sourceCode || null;
+    this._lineNumber = lineNumber;
+    this._columnNumber = columnNumber;
+    this._resolveFormattedLocation();
+
+    if (this._sourceCode) {
+        this._sourceCode.addEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
+        this._sourceCode.addEventListener(WebInspector.SourceCode.Event.FormatterDidChange, this._sourceCodeFormatterDidChange, this);
+    }
+
+    this._resetMappedLocation();
+};
+
+WebInspector.SourceCodeLocation.DisplayLocationClassName = "display-location";
+
+WebInspector.SourceCodeLocation.LargeColumnNumber = 80;
+WebInspector.SourceCodeLocation.ColumnStyle = {
+    Hidden: "hidden",             // column numbers are not included.
+    OnlyIfLarge: "only-if-large", // column numbers greater than 80 are shown.
+    Shown: "shown"                // non-zero column numbers are shown.
+}
+
+WebInspector.SourceCodeLocation.Event = {
+    LocationChanged: "source-code-location-location-changed",
+    DisplayLocationChanged: "source-code-location-display-location-changed"
+};
+
+WebInspector.SourceCodeLocation.prototype = {
+    constructor: WebInspector.SourceCodeLocation,
+
+    // Public
+
+    isEqual: function(other)
+    {
+        if (!other)
+            return false;
+        return this._sourceCode === other._sourceCode && this._lineNumber === other._lineNumber && this._columnNumber === other._columnNumber;
+    },
+
+    get sourceCode()
+    {
+        return this._sourceCode;
+    },
+
+    set sourceCode(sourceCode)
+    {
+        console.assert((this._sourceCode === null && sourceCode instanceof WebInspector.SourceCode) || (this._sourceCode instanceof WebInspector.SourceCode && sourceCode === null));
+
+        if (sourceCode === this._sourceCode)
+            return;
+
+        this._makeChangeAndDispatchChangeEventIfNeeded(function() {
+            if (this._sourceCode) {
+                this._sourceCode.removeEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
+                this._sourceCode.removeEventListener(WebInspector.SourceCode.Event.FormatterDidChange, this._sourceCodeFormatterDidChange, this);
+            }
+
+            this._sourceCode = sourceCode;
+
+            if (this._sourceCode) {
+                this._sourceCode.addEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
+                this._sourceCode.addEventListener(WebInspector.SourceCode.Event.FormatterDidChange, this._sourceCodeFormatterDidChange, this);
+            }
+        });
+    },
+
+    // Raw line and column in the original source code.
+
+    get lineNumber()
+    {
+        return this._lineNumber;
+    },
+
+    get columnNumber()
+    {
+        return this._columnNumber;
+    },
+
+    position: function()
+    {
+        return new WebInspector.SourceCodePosition(this.lineNumber, this.columnNumber);
+    },
+
+    // Formatted line and column if the original source code is pretty printed.
+    // This is the same as the raw location if there is no formatter.
+
+    get formattedLineNumber()
+    {
+        return this._formattedLineNumber;
+    },
+
+    get formattedColumnNumber()
+    {
+        return this._formattedColumnNumber;
+    },
+
+    formattedPosition: function()
+    {
+        return new WebInspector.SourceCodePosition(this.formattedLineNumber, this.formattedColumnNumber);
+    },
+
+    // Display line and column:
+    //   - Mapped line and column if the original source code has a source map.
+    //   - Otherwise this is the formatted / raw line and column.
+
+    get displaySourceCode()
+    {
+        this._resolveMappedLocation();
+        return this._mappedResource || this._sourceCode;
+    },
+
+    get displayLineNumber()
+    {
+        this._resolveMappedLocation();
+        return isNaN(this._mappedLineNumber) ? this._formattedLineNumber : this._mappedLineNumber;
+    },
+
+    get displayColumnNumber()
+    {
+        this._resolveMappedLocation();
+        return isNaN(this._mappedColumnNumber) ? this._formattedColumnNumber : this._mappedColumnNumber;
+    },
+
+    displayPosition: function()
+    {
+        return new WebInspector.SourceCodePosition(this.displayLineNumber, this.displayColumnNumber);
+    },
+
+    // User presentable location strings: "file:lineNumber:columnNumber".
+
+    originalLocationString: function(columnStyle, fullURL)
+    {
+        return this._locationString(this.sourceCode, this.lineNumber, this.columnNumber, columnStyle, fullURL);
+    },
+
+    formattedLocationString: function(columnStyle, fullURL)
+    {
+        return this._locationString(this.sourceCode, this.formattedLineNumber, this.formattedColumn, columnStyle, fullURL);
+    },
+
+    displayLocationString: function(columnStyle, fullURL)
+    {
+        return this._locationString(this.displaySourceCode, this.displayLineNumber, this.displayColumnNumber, columnStyle, fullURL);
+    },
+
+    tooltipString: function()
+    {
+        if (!this.hasDifferentDisplayLocation())
+            return this.originalLocationString(WebInspector.SourceCodeLocation.ColumnStyle.Shown, true);
+
+        var tooltip = WebInspector.UIString("Located at %s").format(this.displayLocationString(WebInspector.SourceCodeLocation.ColumnStyle.Shown, true));
+        tooltip += "\n" + WebInspector.UIString("Originally %s").format(this.originalLocationString(WebInspector.SourceCodeLocation.ColumnStyle.Shown, true));
+        return tooltip;
+    },
+
+    hasMappedLocation: function()
+    {
+        this._resolveMappedLocation();
+        return this._mappedResource !== null;
+    },
+
+    hasFormattedLocation: function()
+    {
+        return this._formattedLineNumber !== this._lineNumber || this._formattedColumnNumber !== this._columnNumber;
+    },
+
+    hasDifferentDisplayLocation: function()
+    {
+       return this.hasMappedLocation() || this.hasFormattedLocation(); 
+    },
+
+    update: function(sourceCode, lineNumber, columnNumber)
+    {
+        console.assert(sourceCode === this._sourceCode || (this._mappedResource && sourceCode === this._mappedResource));
+        console.assert(typeof lineNumber === "number" && !isNaN(lineNumber) && lineNumber >= 0);
+        console.assert(typeof columnNumber === "number" && !isNaN(columnNumber) && columnNumber >= 0);
+
+        if (sourceCode === this._sourceCode && lineNumber === this._lineNumber && columnNumber === this._columnNumber)
+            return;
+        else if (this._mappedResource && sourceCode === this._mappedResource && lineNumber === this._mappedLineNumber && columnNumber === this._mappedColumnNumber)
+            return;
+
+        var newSourceCodeLocation = sourceCode.createSourceCodeLocation(lineNumber, columnNumber);
+        console.assert(newSourceCodeLocation.sourceCode === this._sourceCode);
+
+        this._makeChangeAndDispatchChangeEventIfNeeded(function() {
+            this._lineNumber = newSourceCodeLocation._lineNumber;
+            this._columnNumber = newSourceCodeLocation._columnNumber;
+            if (newSourceCodeLocation._mappedLocationIsResolved) {
+                this._mappedLocationIsResolved = true;
+                this._mappedResource = newSourceCodeLocation._mappedResource;
+                this._mappedLineNumber = newSourceCodeLocation._mappedLineNumber;
+                this._mappedColumnNumber = newSourceCodeLocation._mappedColumnNumber;
+            }
+        });
+    },
+
+    populateLiveDisplayLocationTooltip: function(element, prefix)
+    {
+        prefix = prefix || "";
+
+        element.title = prefix + this.tooltipString();
+
+        this.addEventListener(WebInspector.SourceCodeLocation.Event.DisplayLocationChanged, function(event) {
+            element.title = prefix + this.tooltipString();
+        }, this);
+    },
+
+    populateLiveDisplayLocationString: function(element, propertyName)
+    {
+        var currentDisplay = undefined;
+
+        function updateDisplayString(showAlternativeLocation, forceUpdate)
+        {
+            if (!forceUpdate && currentDisplay === showAlternativeLocation)
+                return;
+
+            currentDisplay = showAlternativeLocation;
+
+            if (!showAlternativeLocation) {
+                element[propertyName] = this.displayLocationString();
+
+                if (this.hasDifferentDisplayLocation())
+                    element.classList.add(WebInspector.SourceCodeLocation.DisplayLocationClassName);
+                else
+                    element.classList.remove(WebInspector.SourceCodeLocation.DisplayLocationClassName);
+            } else {
+                if (this.hasDifferentDisplayLocation()) {
+                    element[propertyName] = this.originalLocationString();
+                    element.classList.remove(WebInspector.SourceCodeLocation.DisplayLocationClassName);
+                }
+            }
+        }
+
+        function mouseOverOrMove(event)
+        {
+            updateDisplayString.call(this, event.metaKey && !event.altKey && !event.shiftKey);
+        }
+
+        updateDisplayString.call(this, false);
+
+        this.addEventListener(WebInspector.SourceCodeLocation.Event.DisplayLocationChanged, function(event) {
+            updateDisplayString.call(this, currentDisplay, true);
+        }, this);
+
+        var boundMouseOverOrMove = mouseOverOrMove.bind(this);
+        element.addEventListener("mouseover", boundMouseOverOrMove);
+        element.addEventListener("mousemove", boundMouseOverOrMove);
+
+        element.addEventListener("mouseout", function(event) {
+            updateDisplayString.call(this, false);
+        }.bind(this));
+    },
+
+    // Private
+
+    _locationString: function(sourceCode, lineNumber, columnNumber, columnStyle, fullURL)
+    {
+        console.assert(sourceCode);
+        if (!sourceCode)
+            return "";
+
+        columnStyle = columnStyle || WebInspector.SourceCodeLocation.ColumnStyle.OnlyIfLarge;
+
+        var string = fullURL && sourceCode.url ? sourceCode.url : sourceCode.displayName;
+        if (sourceCode.url) {
+            string += ":" + (lineNumber + 1); // The user visible line number is 1-based.
+            if (columnStyle === WebInspector.SourceCodeLocation.ColumnStyle.Shown && columnNumber > 0)
+                string += ":" + (columnNumber + 1); // The user visible column number is 1-based.
+            else if (columnStyle === WebInspector.SourceCodeLocation.ColumnStyle.OnlyIfLarge && columnNumber > WebInspector.SourceCodeLocation.LargeColumnNumber)
+                string += ":" + (columnNumber + 1); // The user visible column number is 1-based.
+        } else
+            string += WebInspector.UIString(" (line %d)").format(lineNumber + 1); // The user visible line number is 1-based.
+
+        return string;
+    },
+
+    _resetMappedLocation: function()
+    {
+        this._mappedLocationIsResolved = false;
+        this._mappedResource = null;
+        this._mappedLineNumber = NaN;
+        this._mappedColumnNumber = NaN;
+    },
+
+    _setMappedLocation: function(mappedResource, mappedLineNumber, mappedColumnNumber)
+    {
+        // Called by SourceMapResource when it creates a SourceCodeLocation and already knows the resolved location.
+        this._mappedLocationIsResolved = true;
+        this._mappedResource = mappedResource;
+        this._mappedLineNumber = mappedLineNumber;
+        this._mappedColumnNumber = mappedColumnNumber;
+    },
+
+    _resolveMappedLocation: function()
+    {
+        if (this._mappedLocationIsResolved)
+            return;
+
+        console.assert(this._mappedResource === null);
+        console.assert(isNaN(this._mappedLineNumber));
+        console.assert(isNaN(this._mappedColumnNumber));
+
+        this._mappedLocationIsResolved = true;
+
+        if (!this._sourceCode)
+            return;
+
+        var sourceMaps = this._sourceCode.sourceMaps;
+        if (!sourceMaps.length)
+            return;
+
+        for (var i = 0; i < sourceMaps.length; ++i) {
+            var sourceMap = sourceMaps[i];
+            var entry = sourceMap.findEntry(this._lineNumber, this._columnNumber);
+            if (!entry || entry.length === 2)
+                continue;
+            console.assert(entry.length === 5);
+            var url = entry[2];
+            var sourceMapResource = sourceMap.resourceForURL(url);
+            if (!sourceMapResource)
+                return;
+            this._mappedResource = sourceMapResource;
+            this._mappedLineNumber = entry[3];
+            this._mappedColumnNumber = entry[4];
+            return;
+        }
+    },
+
+    _resolveFormattedLocation: function()
+    {
+        if (this._sourceCode && this._sourceCode.formatterSourceMap) {
+            var formattedLocation = this._sourceCode.formatterSourceMap.originalToFormatted(this._lineNumber, this._columnNumber);
+            this._formattedLineNumber = formattedLocation.lineNumber;
+            this._formattedColumnNumber = formattedLocation.columnNumber;
+        } else {
+            this._formattedLineNumber = this._lineNumber;
+            this._formattedColumnNumber = this._columnNumber;
+        }
+    },
+
+    _makeChangeAndDispatchChangeEventIfNeeded: function(changeFunction)
+    {
+        var oldSourceCode = this._sourceCode;
+        var oldLineNumber = this._lineNumber;
+        var oldColumnNumber = this._columnNumber;
+
+        var oldFormattedLineNumber = this._formattedLineNumber;
+        var oldFormattedColumnNumber = this._formattedColumnNumber;
+
+        var oldDisplaySourceCode = this.displaySourceCode;
+        var oldDisplayLineNumber = this.displayLineNumber;
+        var oldDisplayColumnNumber = this.displayColumnNumber;
+
+        this._resetMappedLocation();
+
+        if (changeFunction)
+            changeFunction.call(this);
+
+        this._resolveMappedLocation();
+        this._resolveFormattedLocation();
+
+        // If the display source code is non-null then the addresses are not NaN and can be compared.
+        var displayLocationChanged = false;
+        var newDisplaySourceCode = this.displaySourceCode;
+        if (oldDisplaySourceCode !== newDisplaySourceCode)
+            displayLocationChanged = true;
+        else if (newDisplaySourceCode && (oldDisplayLineNumber !== this.displayLineNumber || oldDisplayColumnNumber !== this.displayColumnNumber))
+            displayLocationChanged = true;
+
+        var anyLocationChanged = false;
+        if (displayLocationChanged)
+            anyLocationChanged = true;
+        else if (oldSourceCode !== this._sourceCode)
+            anyLocationChanged = true;
+        else if (this._sourceCode && (oldLineNumber !== this._lineNumber || oldColumnNumber !== this._columnNumber))
+            anyLocationChanged = true;
+        else if (this._sourceCode && (oldFormattedLineNumber !== this._formattedLineNumber || oldFormattedColumnNumber !== this._formattedColumnNumber))
+            anyLocationChanged = true;
+
+        if (displayLocationChanged || anyLocationChanged) {
+            var oldData = {
+                oldSourceCode: oldSourceCode,
+                oldLineNumber: oldLineNumber,
+                oldColumnNumber: oldColumnNumber,
+                oldFormattedLineNumber: oldFormattedLineNumber,
+                oldFormattedColumnNumber: oldFormattedColumnNumber,
+                oldDisplaySourceCode: oldDisplaySourceCode,
+                oldDisplayLineNumber: oldDisplayLineNumber,
+                oldDisplayColumnNumber: oldDisplayColumnNumber
+            };
+            if (displayLocationChanged)
+                this.dispatchEventToListeners(WebInspector.SourceCodeLocation.Event.DisplayLocationChanged, oldData);
+            if (anyLocationChanged)
+                this.dispatchEventToListeners(WebInspector.SourceCodeLocation.Event.LocationChanged, oldData);
+        }
+    },
+
+    _sourceCodeSourceMapAdded: function()
+    {
+        this._makeChangeAndDispatchChangeEventIfNeeded(null);
+    },
+
+    _sourceCodeFormatterDidChange: function()
+    {
+        this._makeChangeAndDispatchChangeEventIfNeeded(null);
+    }
+};
+
+WebInspector.SourceCodeLocation.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceCodePosition.js b/Source/WebInspectorUI/UserInterface/SourceCodePosition.js
new file mode 100644
index 000000000..ac673775c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SourceCodePosition.js
@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceCodePosition = function(lineNumber, columNumber)
+{
+    WebInspector.Object.call(this);
+
+    this._lineNumber = lineNumber || 0;
+    this._columnNumber = columNumber || 0;
+}
+
+WebInspector.SourceCodePosition.prototype = {
+    constructor: WebInspector.SourceCodePosition,
+
+    // Public
+
+    get lineNumber()
+    {
+        return this._lineNumber;
+    },
+
+    get columnNumber()
+    {
+        return this._columnNumber;
+    }
+};
+
+WebInspector.SourceCodePosition.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceCodeRevision.js b/Source/WebInspectorUI/UserInterface/SourceCodeRevision.js
new file mode 100644
index 000000000..ceb7a3b97
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SourceCodeRevision.js
@@ -0,0 +1,90 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceCodeRevision = function(sourceCode, content, contentIsBase64Encoded)
+{
+    WebInspector.Revision.call(this);
+
+    console.assert(sourceCode instanceof WebInspector.SourceCode);
+
+    this._sourceCode = sourceCode;
+    this._content = content || "";
+    this._contentIsBase64Encoded = contentIsBase64Encoded || false;
+};
+
+WebInspector.SourceCodeRevision.prototype = {
+    constructor: WebInspector.SourceCodeRevision,
+
+    // Public
+
+    get sourceCode()
+    {
+        return this._sourceCode;
+    },
+
+    get content()
+    {
+        return this._content;
+    },
+
+    set content(content)
+    {
+        content = content || "";
+
+        if (this._content === content)
+            return;
+
+        this._content = content;
+
+        this._sourceCode.revisionContentDidChange(this);
+    },
+
+    get contentIsBase64Encoded()
+    {
+        return this._contentIsBase64Encoded;
+    },
+
+    set contentIsBase64Encoded(encoded)
+    {
+        this._contentIsBase64Encoded = encoded || false;
+    },
+
+    apply: function()
+    {
+        this._sourceCode.currentRevision = this;
+    },
+
+    revert: function()
+    {
+        this._sourceCode.currentRevision = this._sourceCode.originalRevision;
+    },
+
+    copy: function()
+    {
+        return new WebInspector.SourceCodeRevision(this._sourceCode, this._content, this._contentIsBase64Encoded);
+    }
+};
+
+WebInspector.SourceCodeRevision.prototype.__proto__ = WebInspector.Revision.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceCodeTextEditor.css b/Source/WebInspectorUI/UserInterface/SourceCodeTextEditor.css
new file mode 100644
index 000000000..c08d26cba
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SourceCodeTextEditor.css
@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.source-code.text-editor > .CodeMirror .error {
+    background-color: rgb(255, 220, 208);
+}
+
+.source-code.text-editor > .CodeMirror .warning {
+    background-color: rgb(253, 249, 226);
+}
+
+.popover .debugger-popover-content {
+    font-family: monospace;
+    white-space: pre;
+}
+
+.popover .expandable {
+    min-width: 300px;
+    min-height: 250px;
+}
+
+.popover .debugger-popover-content .title {
+    font-weight: bold;
+    padding-left: 10px;
+
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.popover .debugger-popover-content .body {
+    border-top: 1px solid rgb(194, 194, 147);
+    overflow: auto;
+    margin-top: 5px;
+    padding-top: 5px;
+}
+
+.popover .debugger-popover-content.function .body {
+    padding-left: 10px;
+    padding-right: 10px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/SourceCodeTextEditor.js b/Source/WebInspectorUI/UserInterface/SourceCodeTextEditor.js
new file mode 100644
index 000000000..d3bd9e189
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SourceCodeTextEditor.js
@@ -0,0 +1,1130 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceCodeTextEditor = function(sourceCode)
+{
+    console.assert(sourceCode instanceof WebInspector.SourceCode);
+
+    this._sourceCode = sourceCode;
+    this._breakpointMap = {};
+    this._issuesLineNumberMap = {};
+    this._contentPopulated = false;
+    this._invalidLineNumbers = {0: true};
+
+    WebInspector.TextEditor.call(this, null, null, this);
+
+    // FIXME: Currently this just jumps between resources and related source map resources. It doesn't "jump to symbol" yet.
+    this._jumpToSymbolTrackingModeEnabled = false;
+    this._disableJumpToSymbolTrackingModeSettings();
+
+    this.element.classList.add(WebInspector.SourceCodeTextEditor.StyleClassName);
+
+    if (this._supportsDebugging) {
+        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateBreakpointStatus, this);
+        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateBreakpointStatus, this);
+        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._updateBreakpointLocation, this);
+
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.BreakpointAdded, this._breakpointAdded, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.BreakpointRemoved, this._breakpointRemoved, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._activeCallFrameDidChange, this);
+
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Paused, this._debuggerDidPause, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Resumed, this._debuggerDidResume, this);
+        if (WebInspector.debuggerManager.activeCallFrame)
+            this._debuggerDidPause();
+
+        this._activeCallFrameDidChange();
+    }
+
+    WebInspector.issueManager.addEventListener(WebInspector.IssueManager.Event.IssueWasAdded, this._issueWasAdded, this);
+
+    if (this._sourceCode instanceof WebInspector.SourceMapResource || this._sourceCode.sourceMaps.length > 0)
+        WebInspector.notifications.addEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._updateJumpToSymbolTrackingMode, this);
+    else
+        this._sourceCode.addEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
+
+    sourceCode.requestContent(this._contentAvailable.bind(this));
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.SourceCodeTextEditor);
+
+WebInspector.SourceCodeTextEditor.StyleClassName = "source-code";
+WebInspector.SourceCodeTextEditor.LineErrorStyleClassName = "error";
+WebInspector.SourceCodeTextEditor.LineWarningStyleClassName = "warning";
+WebInspector.SourceCodeTextEditor.PopoverDebuggerContentStyleClassName = "debugger-popover-content";
+WebInspector.SourceCodeTextEditor.HoveredExpressionHighlightStyleClassName = "hovered-expression-highlight";
+WebInspector.SourceCodeTextEditor.DurationToMouseOverTokenToMakeHoveredToken = 500;
+WebInspector.SourceCodeTextEditor.DurationToMouseOutOfHoveredTokenToRelease = 1000;
+
+WebInspector.SourceCodeTextEditor.AutoFormatMinimumLineLength = 500;
+
+WebInspector.SourceCodeTextEditor.Event = {
+    ContentWillPopulate: "source-code-text-editor-content-will-populate",
+    ContentDidPopulate: "source-code-text-editor-content-did-populate"
+};
+
+WebInspector.SourceCodeTextEditor.prototype = {
+    constructor: WebInspector.SourceCodeTextEditor,
+
+    // Public
+
+    get sourceCode()
+    {
+        return this._sourceCode;
+    },
+
+    hidden: function()
+    {
+        WebInspector.TextEditor.prototype.hidden.call(this);
+
+        this.tokenTrackingController.removeHighlightedRange();
+
+        this._dismissPopover();
+    },
+
+    close: function()
+    {
+        if (this._supportsDebugging) {
+            WebInspector.Breakpoint.removeEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateBreakpointStatus, this);
+            WebInspector.Breakpoint.removeEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateBreakpointStatus, this);
+            WebInspector.Breakpoint.removeEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._updateBreakpointLocation, this);
+
+            WebInspector.debuggerManager.removeEventListener(WebInspector.DebuggerManager.Event.BreakpointAdded, this._breakpointAdded, this);
+            WebInspector.debuggerManager.removeEventListener(WebInspector.DebuggerManager.Event.BreakpointRemoved, this._breakpointRemoved, this);
+            WebInspector.debuggerManager.removeEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._activeCallFrameDidChange, this);
+
+            if (this._activeCallFrameSourceCodeLocation) {
+                this._activeCallFrameSourceCodeLocation.removeEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._activeCallFrameSourceCodeLocationChanged, this);
+                delete this._activeCallFrameSourceCodeLocation;
+            }
+        }
+
+        WebInspector.issueManager.removeEventListener(WebInspector.IssueManager.Event.IssueWasAdded, this._issueWasAdded, this);
+
+        WebInspector.notifications.removeEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._updateJumpToSymbolTrackingMode, this);
+        this._sourceCode.removeEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
+    },
+
+    canBeFormatted: function()
+    {
+        // Currently we assume that source map resources are formatted how the author wants it.
+        // We could allow source map resources to be formatted, we would then need to make
+        // SourceCodeLocation watch listen for mappedResource's formatting changes, and keep
+        // a formatted location alongside the regular mapped location.
+        if (this._sourceCode instanceof WebInspector.SourceMapResource)
+            return false;
+
+        return WebInspector.TextEditor.prototype.canBeFormatted.call(this);
+    },
+
+    customPerformSearch: function(query)
+    {
+        function searchResultCallback(error, matches)
+        {
+            // Bail if the query changed since we started.
+            if (this.currentSearchQuery !== query)
+                return;
+
+            if (error || !matches || !matches.length) {
+                // Report zero matches.
+                this.dispatchEventToListeners(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange);
+                return;
+            }
+
+            var queryRegex = new RegExp(query.escapeForRegExp(), "gi");
+            var searchResults = [];
+
+            for (var i = 0; i < matches.length; ++i) {
+                var matchLineNumber = matches[i].lineNumber;
+                var line = this.line(matchLineNumber);
+
+                // Reset the last index to reuse the regex on a new line.
+                queryRegex.lastIndex = 0;
+
+                // Search the line and mark the ranges.
+                var lineMatch = null;
+                while (queryRegex.lastIndex + query.length <= line.length && (lineMatch = queryRegex.exec(line))) {
+                    var resultTextRange = new WebInspector.TextRange(matchLineNumber, lineMatch.index, matchLineNumber, queryRegex.lastIndex);
+                    searchResults.push(resultTextRange);
+                }
+            }
+
+            this.addSearchResults(searchResults);
+
+            this.dispatchEventToListeners(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange);
+        }
+
+        if (this._sourceCode instanceof WebInspector.SourceMapResource)
+            return false;
+
+        if (this._sourceCode instanceof WebInspector.Resource)
+            PageAgent.searchInResource(this._sourceCode.parentFrame.id, this._sourceCode.url, query, false, false, searchResultCallback.bind(this));
+        else if (this._sourceCode instanceof WebInspector.Script)
+            DebuggerAgent.searchInContent(this._sourceCode.id, query, false, false, searchResultCallback.bind(this));
+        return true;
+    },
+
+    // Private
+
+    _unformattedLineInfoForEditorLineInfo: function(lineInfo)
+    {
+        if (this.formatterSourceMap)
+            return this.formatterSourceMap.formattedToOriginal(lineInfo.lineNumber, lineInfo.columnNumber);
+        return lineInfo;
+    },
+
+    _sourceCodeLocationForEditorPosition: function(position)
+    {
+        var lineInfo = {lineNumber: position.line, columnNumber: position.ch};
+        var unformattedLineInfo = this._unformattedLineInfoForEditorLineInfo(lineInfo);
+        return this.sourceCode.createSourceCodeLocation(unformattedLineInfo.lineNumber, unformattedLineInfo.columnNumber);
+    },
+
+    _editorLineInfoForSourceCodeLocation: function(sourceCodeLocation)
+    {
+        if (this._sourceCode instanceof WebInspector.SourceMapResource)
+            return {lineNumber: sourceCodeLocation.displayLineNumber, columnNumber: sourceCodeLocation.displayColumnNumber};
+        return {lineNumber: sourceCodeLocation.formattedLineNumber, columnNumber: sourceCodeLocation.formattedColumnNumber};
+    },
+
+    _breakpointForEditorLineInfo: function(lineInfo)
+    {
+        if (!this._breakpointMap[lineInfo.lineNumber])
+            return null;
+        return this._breakpointMap[lineInfo.lineNumber][lineInfo.columnNumber];
+    },
+
+    _addBreakpointWithEditorLineInfo: function(breakpoint, lineInfo)
+    {
+        if (!this._breakpointMap[lineInfo.lineNumber])
+            this._breakpointMap[lineInfo.lineNumber] = {}
+
+        this._breakpointMap[lineInfo.lineNumber][lineInfo.columnNumber] = breakpoint;
+    },
+
+    _removeBreakpointWithEditorLineInfo: function(breakpoint, lineInfo)
+    {
+        console.assert(breakpoint === this._breakpointMap[lineInfo.lineNumber][lineInfo.columnNumber]);
+
+        delete this._breakpointMap[lineInfo.lineNumber][lineInfo.columnNumber];
+
+        if (isEmptyObject(this._breakpointMap[lineInfo.lineNumber]))
+            delete this._breakpointMap[lineInfo.lineNumber];
+    },
+
+    _contentWillPopulate: function(content)
+    {
+        this.dispatchEventToListeners(WebInspector.SourceCodeTextEditor.Event.ContentWillPopulate);
+
+        // We only do the rest of this work before the first populate.
+        if (this._contentPopulated)
+            return;
+
+        if (this._supportsDebugging) {
+            this._breakpointMap = {};
+
+            var breakpoints = WebInspector.debuggerManager.breakpointsForSourceCode(this._sourceCode);
+            for (var i = 0; i < breakpoints.length; ++i) {
+                var breakpoint = breakpoints[i];
+                console.assert(this._matchesBreakpoint(breakpoint));
+                var lineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
+                this._addBreakpointWithEditorLineInfo(breakpoint, lineInfo);
+                this.setBreakpointInfoForLineAndColumn(lineInfo.lineNumber, lineInfo.columnNumber, this._breakpointInfoForBreakpoint(breakpoint));
+            }
+        }
+
+        if (this._sourceCode instanceof WebInspector.Resource)
+            this.mimeType = this._sourceCode.syntheticMIMEType;
+        else if (this._sourceCode instanceof WebInspector.Script)
+            this.mimeType = "text/javascript";
+
+        // Automatically format the content if it looks minified and it can be formatted.
+        console.assert(!this.formatted);
+        if (this.canBeFormatted()) {
+            var lastNewlineIndex = 0;
+            while (true) {
+                var nextNewlineIndex = content.indexOf("\n", lastNewlineIndex);
+                if (nextNewlineIndex === -1) {
+                    if (content.length - lastNewlineIndex > WebInspector.SourceCodeTextEditor.AutoFormatMinimumLineLength)
+                        this.autoFormat = true;
+                    break;
+                }
+
+                if (nextNewlineIndex - lastNewlineIndex > WebInspector.SourceCodeTextEditor.AutoFormatMinimumLineLength) {
+                    this.autoFormat = true;
+                    break;
+                }
+
+                lastNewlineIndex = nextNewlineIndex + 1;
+            }
+        }
+    },
+
+    _contentDidPopulate: function()
+    {
+        this._contentPopulated = true;
+
+        this.dispatchEventToListeners(WebInspector.SourceCodeTextEditor.Event.ContentDidPopulate);
+
+        // We add the issues each time content is populated. This is needed because lines might not exist
+        // if we tried added them before when the full content wasn't avaiable. (When populating with
+        // partial script content this can be called multiple times.)
+
+        this._issuesLineNumberMap = {};
+
+        var issues = WebInspector.issueManager.issuesForSourceCode(this._sourceCode);
+        for (var i = 0; i < issues.length; ++i) {
+            var issue = issues[i];
+            console.assert(this._matchesIssue(issue));
+            this._addIssue(issue);
+        }
+
+        this._updateJumpToSymbolTrackingMode();
+    },
+
+    _populateWithContent: function(content)
+    {
+        content = content || "";
+
+        this._contentWillPopulate(content);
+        this.string = content;
+        this._contentDidPopulate();
+    },
+
+    _contentAvailable: function(sourceCode, content, base64Encoded)
+    {
+        console.assert(sourceCode === this._sourceCode);
+        console.assert(!base64Encoded);
+
+        // Abort if the full content populated while waiting for this async callback.
+        if (this._fullContentPopulated)
+            return;
+
+        this._fullContentPopulated = true;
+        this._invalidLineNumbers = {};
+
+        this._populateWithContent(content);
+    },
+
+    _updateBreakpointStatus: function(event)
+    {
+        console.assert(this._supportsDebugging);
+
+        if (!this._contentPopulated)
+            return;
+
+        var breakpoint = event.target;
+        if (!this._matchesBreakpoint(breakpoint))
+            return;
+
+        var lineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
+        this.setBreakpointInfoForLineAndColumn(lineInfo.lineNumber, lineInfo.columnNumber, this._breakpointInfoForBreakpoint(breakpoint));
+    },
+
+    _updateBreakpointLocation: function(event)
+    {
+        console.assert(this._supportsDebugging);
+
+        if (!this._contentPopulated)
+            return;
+
+        var breakpoint = event.target;
+        if (!this._matchesBreakpoint(breakpoint))
+            return;
+
+        if (this._ignoreAllBreakpointLocationUpdates)
+            return;
+
+        if (breakpoint === this._ignoreLocationUpdateBreakpoint)
+            return;
+
+        var sourceCodeLocation = breakpoint.sourceCodeLocation;
+
+        if (this._sourceCode instanceof WebInspector.SourceMapResource) {
+            // Update our breakpoint location if the display location changed.
+            if (sourceCodeLocation.displaySourceCode !== this._sourceCode)
+                return;
+            var oldLineInfo = {lineNumber: event.data.oldDisplayLineNumber, columnNumber: event.data.oldDisplayColumnNumber};
+            var newLineInfo = {lineNumber: sourceCodeLocation.displayLineNumber, columnNumber: sourceCodeLocation.displayColumnNumber};
+        } else {
+            // Update our breakpoint location if the original location changed.
+            if (sourceCodeLocation.sourceCode !== this._sourceCode)
+                return;
+            var oldLineInfo = {lineNumber: event.data.oldFormattedLineNumber, columnNumber: event.data.oldFormattedColumnNumber};
+            var newLineInfo = {lineNumber: sourceCodeLocation.formattedLineNumber, columnNumber: sourceCodeLocation.formattedColumnNumber};
+        }
+
+        var existingBreakpoint = this._breakpointForEditorLineInfo(oldLineInfo);
+        if (!existingBreakpoint)
+            return;
+
+        console.assert(breakpoint === existingBreakpoint);
+
+        this.setBreakpointInfoForLineAndColumn(oldLineInfo.lineNumber, oldLineInfo.columnNumber, null);
+        this.setBreakpointInfoForLineAndColumn(newLineInfo.lineNumber, newLineInfo.columnNumber, this._breakpointInfoForBreakpoint(breakpoint));
+
+        this._removeBreakpointWithEditorLineInfo(breakpoint, oldLineInfo);
+        this._addBreakpointWithEditorLineInfo(breakpoint, newLineInfo);
+    },
+
+    _breakpointAdded: function(event)
+    {
+        console.assert(this._supportsDebugging);
+
+        if (!this._contentPopulated)
+            return;
+
+        var breakpoint = event.data.breakpoint;
+        if (!this._matchesBreakpoint(breakpoint))
+            return;
+
+        if (breakpoint === this._ignoreBreakpointAddedBreakpoint)
+            return;
+
+        var lineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
+        this._addBreakpointWithEditorLineInfo(breakpoint, lineInfo);
+        this.setBreakpointInfoForLineAndColumn(lineInfo.lineNumber, lineInfo.columnNumber, this._breakpointInfoForBreakpoint(breakpoint));
+    },
+
+    _breakpointRemoved: function(event)
+    {
+        console.assert(this._supportsDebugging);
+
+        if (!this._contentPopulated)
+            return;
+
+        var breakpoint = event.data.breakpoint;
+        if (!this._matchesBreakpoint(breakpoint))
+            return;
+
+        if (breakpoint === this._ignoreBreakpointRemovedBreakpoint)
+            return;
+
+        var lineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
+        this._removeBreakpointWithEditorLineInfo(breakpoint, lineInfo);
+        this.setBreakpointInfoForLineAndColumn(lineInfo.lineNumber, lineInfo.columnNumber, null);
+    },
+
+    _activeCallFrameDidChange: function()
+    {
+        console.assert(this._supportsDebugging);
+
+        if (this._activeCallFrameSourceCodeLocation) {
+            this._activeCallFrameSourceCodeLocation.removeEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._activeCallFrameSourceCodeLocationChanged, this);
+            delete this._activeCallFrameSourceCodeLocation;
+        }
+
+        var activeCallFrame = WebInspector.debuggerManager.activeCallFrame;
+        if (!activeCallFrame || !this._matchesSourceCodeLocation(activeCallFrame.sourceCodeLocation)) {
+            this.executionLineNumber = NaN;
+            this.executionColumnNumber = NaN;
+            return;
+        }
+
+        this._dismissPopover();
+
+        this._activeCallFrameSourceCodeLocation = activeCallFrame.sourceCodeLocation;
+        this._activeCallFrameSourceCodeLocation.addEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._activeCallFrameSourceCodeLocationChanged, this);
+
+        // Don't return early if the line number didn't change. The execution state still
+        // could have changed (e.g. continuing in a loop with a breakpoint inside).
+
+        var lineInfo = this._editorLineInfoForSourceCodeLocation(activeCallFrame.sourceCodeLocation);
+        this.executionLineNumber = lineInfo.lineNumber;
+        this.executionColumnNumber = lineInfo.columnNumber;
+
+        // If we have full content or this source code isn't a Resource we can return early.
+        // Script source code populates from the request started in the constructor.
+        if (this._fullContentPopulated || !(this._sourceCode instanceof WebInspector.Resource) || this._requestingScriptContent)
+            return;
+
+        // Since we are paused in the debugger we need to show some content, and since the Resource
+        // content hasn't populated yet we need to populate with content from the Scripts by URL.
+        // Document resources will attempt to populate the scripts as inline (in <script> tags.)
+        // Other resources are assumed to be full scripts (JavaScript resources).
+        if (this._sourceCode.type === WebInspector.Resource.Type.Document)
+            this._populateWithInlineScriptContent();
+        else
+            this._populateWithScriptContent();
+    },
+
+    _activeCallFrameSourceCodeLocationChanged: function(event)
+    {
+        console.assert(!isNaN(this.executionLineNumber));
+        if (isNaN(this.executionLineNumber))
+            return;
+
+        console.assert(WebInspector.debuggerManager.activeCallFrame);
+        console.assert(this._activeCallFrameSourceCodeLocation === WebInspector.debuggerManager.activeCallFrame.sourceCodeLocation);
+
+        var lineInfo = this._editorLineInfoForSourceCodeLocation(this._activeCallFrameSourceCodeLocation);
+        this.executionLineNumber = lineInfo.lineNumber;
+        this.executionColumnNumber = lineInfo.columnNumber;
+    },
+
+    _populateWithInlineScriptContent: function()
+    {
+        console.assert(this._sourceCode instanceof WebInspector.Resource);
+        console.assert(!this._fullContentPopulated);
+        console.assert(!this._requestingScriptContent);
+
+        var scripts = this._sourceCode.scripts;
+        console.assert(scripts.length);
+        if (!scripts.length)
+            return;
+
+        var pendingRequestCount = scripts.length;
+
+        // If the number of scripts hasn't change since the last populate, then there is nothing to do.
+        if (this._inlineScriptContentPopulated === pendingRequestCount)
+            return;
+
+        this._inlineScriptContentPopulated = pendingRequestCount;
+
+        function scriptContentAvailable(error, content)
+        {
+            // Return early if we are still waiting for content from other scripts.
+            if (--pendingRequestCount)
+                return;
+
+            delete this._requestingScriptContent;
+
+            // Abort if the full content populated while waiting for these async callbacks.
+            if (this._fullContentPopulated)
+                return;
+
+            const scriptOpenTag = "<script>";
+            const scriptCloseTag = "</script>";
+
+            var content = "";
+            var lineNumber = 0;
+            var columnNumber = 0;
+
+            this._invalidLineNumbers = {};
+
+            for (var i = 0; i < scripts.length; ++i) {
+                // Fill the line gap with newline characters.
+                for (var newLinesCount = scripts[i].range.startLine - lineNumber; newLinesCount > 0; --newLinesCount) {
+                    if (!columnNumber)
+                        this._invalidLineNumbers[scripts[i].range.startLine - newLinesCount] = true;
+                    columnNumber = 0;
+                    content += "\n";
+                }
+
+                // Fill the column gap with space characters.
+                for (var spacesCount = scripts[i].range.startColumn - columnNumber - scriptOpenTag.length; spacesCount > 0; --spacesCount)
+                    content += " ";
+
+                // Add script tags and content.
+                content += scriptOpenTag;
+                content += scripts[i].content;
+                content += scriptCloseTag;
+
+                lineNumber = scripts[i].range.endLine;
+                columnNumber = scripts[i].range.endColumn + scriptCloseTag.length;
+            }
+
+            this._populateWithContent(content);
+        }
+
+        this._requestingScriptContent = true;
+
+        var boundScriptContentAvailable = scriptContentAvailable.bind(this);
+        for (var i = 0; i < scripts.length; ++i)
+            scripts[i].requestContent(boundScriptContentAvailable);
+    },
+
+    _populateWithScriptContent: function()
+    {
+        console.assert(this._sourceCode instanceof WebInspector.Resource);
+        console.assert(!this._fullContentPopulated);
+        console.assert(!this._requestingScriptContent);
+
+        // We can assume this resource only has one script that starts at line/column 0.
+        var scripts = this._sourceCode.scripts;
+        console.assert(scripts.length === 1);
+        if (!scripts.length)
+            return;
+
+        console.assert(scripts[0].range.startLine === 0);
+        console.assert(scripts[0].range.startColumn === 0);
+
+        function scriptContentAvailable(error, content)
+        {
+            delete this._requestingScriptContent;
+
+            // Abort if the full content populated while waiting for this async callback.
+            if (this._fullContentPopulated)
+                return;
+
+            // This is the full content.
+            this._fullContentPopulated = true;
+
+            this._populateWithContent(content);
+        }
+
+        this._requestingScriptContent = true;
+
+        scripts[0].requestContent(scriptContentAvailable.bind(this));
+    },
+
+    _matchesSourceCodeLocation: function(sourceCodeLocation)
+    {
+        if (this._sourceCode instanceof WebInspector.SourceMapResource)
+            return sourceCodeLocation.displaySourceCode === this._sourceCode;
+        if (this._sourceCode instanceof WebInspector.Resource)
+            return sourceCodeLocation.sourceCode.url === this._sourceCode.url;
+        if (this._sourceCode instanceof WebInspector.Script)
+            return sourceCodeLocation.sourceCode === this._sourceCode;
+        return false;
+    },
+
+    _matchesBreakpoint: function(breakpoint)
+    {
+        console.assert(this._supportsDebugging);
+        if (this._sourceCode instanceof WebInspector.SourceMapResource)
+            return breakpoint.sourceCodeLocation.displaySourceCode === this._sourceCode;
+        if (this._sourceCode instanceof WebInspector.Resource)
+            return breakpoint.url === this._sourceCode.url;
+        if (this._sourceCode instanceof WebInspector.Script)
+            return breakpoint.url === this._sourceCode.url || breakpoint.scriptIdentifier === this._sourceCode.id;
+        return false;
+    },
+
+    _matchesIssue: function(issue)
+    {
+        if (this._sourceCode instanceof WebInspector.Resource)
+            return issue.url === this._sourceCode.url;
+        // FIXME: Support issues for Scripts based on id, not only by URL.
+        if (this._sourceCode instanceof WebInspector.Script)
+            return issue.url === this._sourceCode.url;
+        return false;
+    },
+
+    _issueWasAdded: function(event)
+    {
+        var issue = event.data.issue;
+        if (!this._matchesIssue(issue))
+            return;
+
+        this._addIssue(issue);
+    },
+
+    _addIssue: function(issue)
+    {
+        var lineNumberIssues = this._issuesLineNumberMap[issue.lineNumber];
+        if (!lineNumberIssues)
+            lineNumberIssues = this._issuesLineNumberMap[issue.lineNumber] = [];
+
+        lineNumberIssues.push(issue);
+
+        if (issue.level === WebInspector.IssueMessage.Level.Error)
+            this.addStyleClassToLine(issue.lineNumber, WebInspector.SourceCodeTextEditor.LineErrorStyleClassName);
+        else if (issue.level === WebInspector.IssueMessage.Level.Warning)
+            this.addStyleClassToLine(issue.lineNumber, WebInspector.SourceCodeTextEditor.LineWarningStyleClassName);
+        else
+            console.error("Unknown issue level");
+
+        // FIXME <rdar://problem/10854857>: Show the issue message on the line as a bubble.
+    },
+
+    _breakpointInfoForBreakpoint: function(breakpoint)
+    {
+        return {resolved: breakpoint.resolved, disabled: breakpoint.disabled};
+    },
+
+    get _supportsDebugging()
+    {
+        if (this._sourceCode instanceof WebInspector.Resource)
+            return this._sourceCode.type === WebInspector.Resource.Type.Document || this._sourceCode.type === WebInspector.Resource.Type.Script;
+        if (this._sourceCode instanceof WebInspector.Script)
+            return true;
+        return false;
+    },
+
+    // TextEditor Delegate
+
+    textEditorBaseURL: function(textEditor)
+    {
+        return this._sourceCode.url;
+    },
+
+    textEditorShouldHideLineNumber: function(textEditor, lineNumber)
+    {
+        return lineNumber in this._invalidLineNumbers;
+    },
+
+    textEditorBreakpointAdded: function(textEditor, lineNumber, columnNumber)
+    {
+        if (!this._supportsDebugging)
+            return null;
+
+        var editorLineInfo = {lineNumber:lineNumber, columnNumber:columnNumber};
+        var unformattedLineInfo = this._unformattedLineInfoForEditorLineInfo(editorLineInfo);
+        var sourceCodeLocation = this._sourceCode.createSourceCodeLocation(unformattedLineInfo.lineNumber, unformattedLineInfo.columnNumber);
+        var breakpoint = new WebInspector.Breakpoint(sourceCodeLocation);
+
+        var lineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
+        this._addBreakpointWithEditorLineInfo(breakpoint, lineInfo);
+
+        this._ignoreBreakpointAddedBreakpoint = breakpoint;
+        WebInspector.debuggerManager.addBreakpoint(breakpoint);
+        delete this._ignoreBreakpointAddedBreakpoint;
+
+        // Return the more accurate location and breakpoint info.
+        return {
+            breakpointInfo: this._breakpointInfoForBreakpoint(breakpoint),
+            lineNumber: lineInfo.lineNumber,
+            columnNumber: lineInfo.columnNumber
+        };
+    },
+
+    textEditorBreakpointRemoved: function(textEditor, lineNumber, columnNumber)
+    {
+        console.assert(this._supportsDebugging);
+        if (!this._supportsDebugging)
+            return;
+
+        var lineInfo = {lineNumber: lineNumber, columnNumber: columnNumber};
+        var breakpoint = this._breakpointForEditorLineInfo(lineInfo);
+        console.assert(breakpoint);
+        if (!breakpoint)
+            return;
+
+        this._removeBreakpointWithEditorLineInfo(breakpoint, lineInfo);
+
+        this._ignoreBreakpointRemovedBreakpoint = breakpoint;
+        WebInspector.debuggerManager.removeBreakpoint(breakpoint);
+        delete this._ignoreBreakpointAddedBreakpoint;
+    },
+
+    textEditorBreakpointMoved: function(textEditor, oldLineNumber, oldColumnNumber, newLineNumber, newColumnNumber)
+    {
+        console.assert(this._supportsDebugging);
+        if (!this._supportsDebugging)
+            return;
+
+        var oldLineInfo = {lineNumber: oldLineNumber, columnNumber: oldColumnNumber};
+        var breakpoint = this._breakpointForEditorLineInfo(oldLineInfo);
+        console.assert(breakpoint);
+        if (!breakpoint)
+            return;
+
+        this._removeBreakpointWithEditorLineInfo(breakpoint, oldLineInfo);
+
+        var newLineInfo = {lineNumber: newLineNumber, columnNumber: newColumnNumber};
+        var unformattedNewLineInfo = this._unformattedLineInfoForEditorLineInfo(newLineInfo);
+        this._ignoreLocationUpdateBreakpoint = breakpoint;
+        breakpoint.sourceCodeLocation.update(this._sourceCode, unformattedNewLineInfo.lineNumber, unformattedNewLineInfo.columnNumber);
+        delete this._ignoreLocationUpdateBreakpoint;
+
+        var accurateNewLineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
+        this._addBreakpointWithEditorLineInfo(breakpoint, accurateNewLineInfo);
+
+        if (accurateNewLineInfo.lineNumber !== newLineInfo.lineNumber || accurateNewLineInfo.columnNumber !== newLineInfo.columnNumber)
+            this.updateBreakpointLineAndColumn(newLineInfo.lineNumber, newLineInfo.columnNumber, accurateNewLineInfo.lineNumber, accurateNewLineInfo.columnNumber);
+    },
+
+    textEditorBreakpointToggled: function(textEditor, lineNumber, columnNumber, disabled)
+    {
+        console.assert(this._supportsDebugging);
+        if (!this._supportsDebugging)
+            return;
+
+        var breakpoint = this._breakpointForEditorLineInfo({lineNumber: lineNumber, columnNumber: columnNumber});
+        console.assert(breakpoint);
+        if (!breakpoint)
+            return;
+
+        breakpoint.disabled = disabled;
+    },
+
+    textEditorUpdatedFormatting: function(textEditor)
+    {
+        this._ignoreAllBreakpointLocationUpdates = true;
+        this._sourceCode.formatterSourceMap = this.formatterSourceMap;
+        delete this._ignoreAllBreakpointLocationUpdates;
+
+        // Always put the source map on both the Script and Resource if both exist. For example,
+        // if this SourceCode is a Resource, then there might also be a Script. In the debugger,
+        // the backend identifies call frames with Script line and column information, and the
+        // Script needs the formatter source map to produce the proper display line and column.
+        if (this._sourceCode instanceof WebInspector.Resource && !(this._sourceCode instanceof WebInspector.SourceMapResource)) {
+            var scripts = this._sourceCode.scripts;
+            for (var i = 0; i < scripts.length; ++i)
+                scripts[i].formatterSourceMap = this.formatterSourceMap;
+        } else if (this._sourceCode instanceof WebInspector.Script) {
+            if (this._sourceCode.resource)
+                this._sourceCode.resource.formatterSourceMap = this.formatterSourceMap;
+        }
+
+        // Some breakpoints may have moved, some might not have. Just go through
+        // and remove and reinsert all the breakpoints.
+
+        var oldBreakpointMap = this._breakpointMap;
+        this._breakpointMap = {};
+
+        for (var lineNumber in oldBreakpointMap) {
+            for (var columnNumber in oldBreakpointMap[lineNumber]) {
+                var breakpoint = oldBreakpointMap[lineNumber][columnNumber];
+                var newLineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
+                this._addBreakpointWithEditorLineInfo(breakpoint, newLineInfo);
+                this.setBreakpointInfoForLineAndColumn(lineNumber, columnNumber, null);
+                this.setBreakpointInfoForLineAndColumn(newLineInfo.lineNumber, newLineInfo.columnNumber, this._breakpointInfoForBreakpoint(breakpoint));
+            }
+        }
+    },
+
+    _shouldTrackTokenHovering: function()
+    {
+        return this._jumpToSymbolTrackingModeEnabled || WebInspector.debuggerManager.activeCallFrame;
+    },
+
+    _startTrackingTokenHoveringIfNeeded: function()
+    {
+        if (this._shouldTrackTokenHovering() && !this.tokenTrackingController.tracking)
+            this.tokenTrackingController.startTracking();
+    },
+
+    _stopTrackingTokenHoveringIfNeeded: function()
+    {
+        if (!this._shouldTrackTokenHovering() && this.tokenTrackingController.tracking)
+            this.tokenTrackingController.stopTracking();
+    },
+
+    _debuggerDidPause: function(event)
+    {
+        this._startTrackingTokenHoveringIfNeeded();
+    },
+
+    _debuggerDidResume: function(event)
+    {
+        this._stopTrackingTokenHoveringIfNeeded();
+
+        this._dismissPopover();
+    },
+
+    _sourceCodeSourceMapAdded: function(event)
+    {
+        WebInspector.notifications.addEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._updateJumpToSymbolTrackingMode, this);
+        this._sourceCode.removeEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
+
+        this._updateJumpToSymbolTrackingMode();
+    },
+
+    _updateJumpToSymbolTrackingMode: function()
+    {
+        var oldJumpToSymbolTrackingModeEnabled = this._jumpToSymbolTrackingModeEnabled;
+
+        if (!(this._sourceCode instanceof WebInspector.SourceMapResource) && this._sourceCode.sourceMaps.length === 0)
+            this._jumpToSymbolTrackingModeEnabled = false;
+        else
+            this._jumpToSymbolTrackingModeEnabled = WebInspector.modifierKeys.metaKey && !WebInspector.modifierKeys.altKey && !WebInspector.modifierKeys.shiftKey;
+
+        if (oldJumpToSymbolTrackingModeEnabled !== this._jumpToSymbolTrackingModeEnabled) {
+            if (this._jumpToSymbolTrackingModeEnabled) {
+                this._enableJumpToSymbolTrackingModeSettings();
+                this._startTrackingTokenHoveringIfNeeded();
+            } else {
+                this._stopTrackingTokenHoveringIfNeeded();
+                this._disableJumpToSymbolTrackingModeSettings();
+                if (!this.tokenTrackingController.tracking)
+                    this.tokenTrackingController.removeHighlightedRange();
+            }
+        }
+    },
+
+    _enableJumpToSymbolTrackingModeSettings: function()
+    {
+        this.tokenTrackingController.classNameForHighlightedRange = WebInspector.CodeMirrorTokenTrackingController.JumpToSymbolHighlightStyleClassName;
+        this.tokenTrackingController.mouseOverDelayDuration = 0;
+        this.tokenTrackingController.mouseOutReleaseDelayDuration = 0;
+
+        this.tokenTrackingController.mode = WebInspector.CodeMirrorTokenTrackingController.Mode.NonSymbolTokens;
+    },
+
+    _disableJumpToSymbolTrackingModeSettings: function()
+    {
+        this.tokenTrackingController.classNameForHighlightedRange = WebInspector.SourceCodeTextEditor.HoveredExpressionHighlightStyleClassName;
+        this.tokenTrackingController.mouseOverDelayDuration = WebInspector.SourceCodeTextEditor.DurationToMouseOverTokenToMakeHoveredToken;
+        this.tokenTrackingController.mouseOutReleaseDelayDuration = WebInspector.SourceCodeTextEditor.DurationToMouseOutOfHoveredTokenToRelease;
+
+        this.tokenTrackingController.mode = WebInspector.CodeMirrorTokenTrackingController.Mode.JavaScriptExpression;
+    },
+
+    // CodeMirrorTokenTrackingController Delegate
+
+    tokenTrackingControllerCanReleaseHighlightedRange: function(tokenTrackingController, element)
+    {
+        if (!this._popover)
+            return true;
+
+        if (!window.getSelection().isCollapsed && this._popover.element.contains(window.getSelection().anchorNode))
+            return false;
+
+        return true;
+    },
+
+    tokenTrackingControllerHighlightedRangeReleased: function(tokenTrackingController)
+    {
+        if (!this._mouseIsOverPopover)
+            this._dismissPopover();
+    },
+
+    tokenTrackingControllerHighlightedRangeWasClicked: function(tokenTrackingController)
+    {
+        if (this._jumpToSymbolTrackingModeEnabled) {
+            // Links are handled by TextEditor.
+            if (/\blink\b/.test(this.tokenTrackingController.candidate.hoveredToken.type))
+                return;
+
+            var sourceCodeLocation = this._sourceCodeLocationForEditorPosition(this.tokenTrackingController.candidate.hoveredTokenRange.start);
+            if (this.sourceCode instanceof WebInspector.SourceMapResource)
+                WebInspector.resourceSidebarPanel.showOriginalOrFormattedSourceCodeLocation(sourceCodeLocation);
+            else
+                WebInspector.resourceSidebarPanel.showSourceCodeLocation(sourceCodeLocation);
+        }
+    },
+
+    tokenTrackingControllerNewHighlightCandidate: function(tokenTrackingController, candidate)
+    {
+        if (this._jumpToSymbolTrackingModeEnabled) {
+            this.tokenTrackingController.highlightRange(candidate.hoveredTokenRange);
+            return;
+        }
+
+        if (!WebInspector.debuggerManager.activeCallFrame)
+            return;
+
+        console.assert(candidate.expression);
+
+        function populate(error, result, wasThrown)
+        {
+            if (error || wasThrown)
+                return;
+
+            if (candidate !== this.tokenTrackingController.candidate)
+                return;
+
+            var data = WebInspector.RemoteObject.fromPayload(result);
+            switch (data.type) {
+            case "function":
+                this._showPopoverForFunction(data);
+                break;
+            case "object":
+                this._showPopoverForObject(data);
+                break;
+            case "string":
+                this._showPopoverForString(data);
+                break;
+            case "number":
+                this._showPopoverForNumber(data);
+                break;
+            case "boolean":
+                this._showPopoverForBoolean(data);
+                break;
+            case "undefined":
+                this._showPopoverForUndefined(data);
+                break;
+            }
+        }
+
+        DebuggerAgent.evaluateOnCallFrame.invoke({callFrameId: WebInspector.debuggerManager.activeCallFrame.id, expression: candidate.expression, objectGroup: "popover", doNotPauseOnExceptionsAndMuteConsole: true}, populate.bind(this));
+    },
+
+    _showPopover: function(content)
+    {
+        console.assert(this.tokenTrackingController.candidate);
+
+        var candidate = this.tokenTrackingController.candidate;
+        if (!candidate)
+            return;
+
+        var bounds = this.tokenTrackingController.boundsForRange(candidate.hoveredTokenRange);
+        if (!bounds)
+            return;
+
+        content.classList.add(WebInspector.SourceCodeTextEditor.PopoverDebuggerContentStyleClassName);
+
+        const padding = 5;
+        bounds.origin.x -= padding;
+        bounds.origin.y -= padding;
+        bounds.size.width += padding * 2;
+        bounds.size.height += padding * 2;
+
+        this._popover = this._popover || new WebInspector.Popover(this);
+        this._popover.content = content;
+        this._popover.present(bounds, [WebInspector.RectEdge.MIN_Y, WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MAX_X]);
+
+        this._trackPopoverEvents();
+
+        this.tokenTrackingController.highlightRange(candidate.expressionRange);
+    },
+
+    _showPopoverForFunction: function(data)
+    {
+        var candidate = this.tokenTrackingController.candidate;
+
+        function didGetDetails(error, response)
+        {
+            if (error) {
+                console.error(error);
+                this._dismissPopover();
+                return;
+            }
+
+            // Nothing to do if the token has changed since the time we
+            // asked for the function details from the backend.
+            if (candidate !== this.tokenTrackingController.candidate)
+                return;
+
+            var wrapper = document.createElement("div");
+            wrapper.className = "body console-formatted-function";
+            wrapper.textContent = data.description;
+
+            var content = document.createElement("div");
+            content.className = "function";
+
+            var title = content.appendChild(document.createElement("div"));
+            title.className = "title";
+            title.textContent = response.name || response.inferredName || response.displayName || WebInspector.UIString("(anonymous function)");
+
+            content.appendChild(wrapper);
+
+            this._showPopover(content);
+        }
+        DebuggerAgent.getFunctionDetails(data.objectId, didGetDetails.bind(this));
+    },
+
+    _showPopoverForObject: function(data)
+    {
+        if (data.subtype === "null") {
+            this._showPopoverForNull(data);
+            return;
+        }
+
+        var content = document.createElement("div");
+        content.className = "object expandable";
+
+        var titleElement = document.createElement("div");
+        titleElement.className = "title";
+        titleElement.textContent = data.description;
+        content.appendChild(titleElement);
+
+        var section = new WebInspector.ObjectPropertiesSection(data);
+        section.expanded = true;
+        section.element.classList.add("body");
+        content.appendChild(section.element);
+
+        this._showPopover(content);
+    },
+
+    _showPopoverForString: function(data)
+    {
+        var content = document.createElement("div");
+        content.className = "string console-formatted-string";
+        content.textContent = "\"" + data.description + "\"";
+
+        this._showPopover(content);
+    },
+
+    _showPopoverForNumber: function(data)
+    {
+        var content = document.createElement("span");
+        content.className = "number console-formatted-number";
+        content.textContent = data.description;
+
+        this._showPopover(content);
+    },
+
+    _showPopoverForBoolean: function(data)
+    {
+        var content = document.createElement("span");
+        content.className = "boolean console-formatted-boolean";
+        content.textContent = data.description;
+
+        this._showPopover(content);
+    },
+
+    _showPopoverForNull: function(data)
+    {
+        var content = document.createElement("span");
+        content.className = "boolean console-formatted-null";
+        content.textContent = data.description;
+
+        this._showPopover(content);
+    },
+
+    _showPopoverForUndefined: function(data)
+    {
+        var content = document.createElement("span");
+        content.className = "boolean console-formatted-undefined";
+        content.textContent = data.description;
+
+        this._showPopover(content);
+    },
+
+    willDismissPopover: function(popover)
+    {
+        this.tokenTrackingController.removeHighlightedRange();
+
+        RuntimeAgent.releaseObjectGroup("popover");
+    },
+
+    _dismissPopover: function()
+    {
+        if (!this._popover)
+            return;
+
+        this._popover.dismiss();
+
+        if (this._popoverEventHandler)
+            this._popoverEventHandler.stopTrackingEvents();
+    },
+
+    _trackPopoverEvents: function()
+    {
+        if (!this._popoverEventHandler) {
+            this._popoverEventHandler = new WebInspector.EventHandler(this, {
+                "mouseover": this._popoverMouseover,
+                "mouseout": this._popoverMouseout,
+            });
+        }
+
+        this._popoverEventHandler.trackEvents(this._popover.element);
+    },
+
+    _popoverMouseover: function(event)
+    {
+        this._mouseIsOverPopover = true;
+    },
+
+    _popoverMouseout: function(event)
+    {
+        this._mouseIsOverPopover = this._popover.element.contains(event.relatedTarget);
+    }
+};
+
+WebInspector.SourceCodeTextEditor.prototype.__proto__ = WebInspector.TextEditor.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceCodeTextRange.js b/Source/WebInspectorUI/UserInterface/SourceCodeTextRange.js
new file mode 100644
index 000000000..59bb5030d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SourceCodeTextRange.js
@@ -0,0 +1,126 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceCodeTextRange = function(sourceCode) /* textRange || startLocation, endLocation */
+{
+    WebInspector.Object.call(this);
+
+    console.assert(sourceCode instanceof WebInspector.SourceCode);
+    console.assert(arguments.length === 2 || arguments.length === 3);
+
+    this._sourceCode = sourceCode;
+
+    if (arguments.length === 2) {
+        var textRange = arguments[1];
+        console.assert(textRange instanceof WebInspector.TextRange);
+        this._startLocation = sourceCode.createSourceCodeLocation(textRange.startLine, textRange.startColumn);
+        this._endLocation = sourceCode.createSourceCodeLocation(textRange.endLine, textRange.endColumn);
+    } else {
+        console.assert(arguments[1] instanceof WebInspector.SourceCodeLocation);
+        console.assert(arguments[2] instanceof WebInspector.SourceCodeLocation);
+        this._startLocation = arguments[1];
+        this._endLocation = arguments[2];
+    }
+
+    this._startLocation.addEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._sourceCodeLocationChanged, this);
+    this._endLocation.addEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._sourceCodeLocationChanged, this);
+};
+
+WebInspector.SourceCodeTextRange.Event = {
+    RangeChanged: "source-code-text-range-range-changed"
+};
+
+WebInspector.SourceCodeTextRange.prototype = {
+    constructor: WebInspector.SourceCodeTextRange,
+
+    // Public
+
+    get sourceCode()
+    {
+        return this._sourceCode;
+    },
+
+    // Raw text range in the original source code.
+
+    get textRange()
+    {
+        var startLine = this._startLocation.lineNumber;
+        var startColumn = this._startLocation.columnNumber;
+        var endLine = this._endLocation.lineNumber;
+        var endColumn = this._endLocation.columnNumber;
+        return new WebInspector.TextRange(startLine, startColumn, endLine, endColumn);
+    },
+
+    // Formatted text range in the original source code if it is pretty printed.
+    // This is the same as the raw text range if the source code has no formatter.
+
+    get formattedTextRange()
+    {
+        var startLine = this._startLocation.formattedLineNumber;
+        var startColumn = this._startLocation.formattedColumnNumber;
+        var endLine = this._endLocation.formattedLineNumber;
+        var endColumn = this._endLocation.formattedColumnNumber;
+        return new WebInspector.TextRange(startLine, startColumn, endLine, endColumn);
+    },
+
+    // Display values:
+    //   - Mapped resource and text range locations if the original source code has a
+    //     source map and both start and end locations are in the same mapped resource.
+    //   - Otherwise this is the formatted / raw text range.
+
+    get displaySourceCode()
+    {
+        if (!this._startAndEndLocationsInSameMappedResource())
+            return this._sourceCode;
+
+        return this._startLocation.displaySourceCode;
+    },
+
+    get displayTextRange()
+    {
+        if (!this._startAndEndLocationsInSameMappedResource())
+            return this.formattedTextRange;
+
+        var startLine = this._startLocation.displayLineNumber;
+        var startColumn = this._startLocation.displayColumnNumber;
+        var endLine = this._endLocation.displayLineNumber;
+        var endColumn = this._endLocation.displayColumnNumber;
+        return new WebInspector.TextRange(startLine, startColumn, endLine, endColumn);
+    },
+
+    // Private
+
+    _startAndEndLocationsInSameMappedResource: function()
+    {
+        return this._startLocation.hasMappedLocation() && this._endLocation.hasMappedLocation() && this._startLocation.displaySourceCode === this._endLocation.displaySourceCode;
+    },
+
+    _sourceCodeLocationChanged: function(event)
+    {
+        this.dispatchEventToListeners(WebInspector.SourceCodeLocation.Event.RangeChanged);
+    }
+};
+
+WebInspector.SourceCodeTextRange.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceCodeTreeElement.js b/Source/WebInspectorUI/UserInterface/SourceCodeTreeElement.js
new file mode 100644
index 000000000..d885eb28d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SourceCodeTreeElement.js
@@ -0,0 +1,208 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceCodeTreeElement = function(sourceCode, classNames, title, subtitle, representedObject, hasChildren)
+{
+    console.assert(sourceCode instanceof WebInspector.SourceCode);
+
+    WebInspector.GeneralTreeElement.call(this, classNames, title, subtitle, representedObject || sourceCode, hasChildren);
+
+    this.small = true;
+
+    this._updateSourceCode(sourceCode);
+};
+
+WebInspector.SourceCodeTreeElement.prototype = {
+    constructor: WebInspector.SourceCodeTreeElement,
+
+    // Public
+
+    updateSourceMapResources: function()
+    {
+        if (!this.treeOutline || !this.treeOutline.includeSourceMapResourceChildren)
+            return;
+
+        this.hasChildren = !!this._sourceCode.sourceMaps.length;
+        this.shouldRefreshChildren = this.hasChildren;
+
+        if (!this.hasChildren)
+            this.removeChildren();
+    },
+
+    // Overrides from TreeElement
+
+    onattach: function()
+    {
+        WebInspector.GeneralTreeElement.prototype.onattach.call(this);
+
+        this.updateSourceMapResources();
+    },
+
+    onpopulate: function()
+    {
+        if (!this.treeOutline || !this.treeOutline.includeSourceMapResourceChildren)
+            return;
+
+        if (!this.hasChildren || !this.shouldRefreshChildren)
+            return;
+
+        this.shouldRefreshChildren = false;
+
+        this.removeChildren();
+
+        function combineFolderChain(topFolder, bottomFolder)
+        {
+            console.assert(topFolder.children.length === 1);
+
+            var components = [];
+
+            for (var currentFolder = bottomFolder; currentFolder !== topFolder; currentFolder = currentFolder.parent)
+                components.push(currentFolder.mainTitle);
+            components.push(topFolder.mainTitle);
+
+            var folderName = components.reverse().join("/");
+            var newFolder = new WebInspector.FolderTreeElement(folderName);
+
+            var folderIndex = topFolder.parent.children.indexOf(topFolder);
+            topFolder.parent.insertChild(newFolder, folderIndex);
+            topFolder.parent.removeChild(topFolder);
+
+            var children = bottomFolder.children;
+            bottomFolder.removeChildren();
+            for (var i = 0; i < children.length; ++i)
+                newFolder.appendChild(children[i]);
+        }
+
+        function findAndCombineFolderChains(treeElement, previousSingleTreeElement)
+        {
+            if (!(treeElement instanceof WebInspector.FolderTreeElement)) {
+                if (previousSingleTreeElement && previousSingleTreeElement !== treeElement.parent)
+                    combineFolderChain(previousSingleTreeElement, treeElement.parent);
+                return;
+            }
+
+            if (previousSingleTreeElement && treeElement.children.length !== 1) {
+                combineFolderChain(previousSingleTreeElement, treeElement);
+                previousSingleTreeElement = null;
+            }
+
+            if (!previousSingleTreeElement && treeElement.children.length === 1)
+                previousSingleTreeElement = treeElement;
+
+            for (var i = 0; i < treeElement.children.length; ++i)
+                findAndCombineFolderChains(treeElement.children[i], previousSingleTreeElement);
+        }
+
+        var sourceMaps = this._sourceCode.sourceMaps;
+        for (var i = 0; i < sourceMaps.length; ++i) {
+            var sourceMap = sourceMaps[i];
+            for (var j = 0; j < sourceMap.resources.length; ++j) {
+                var sourceMapResource = sourceMap.resources[j];
+                var relativeSubpath = sourceMapResource.sourceMapDisplaySubpath;
+                var folderTreeElement = this.createFoldersAsNeededForSubpath(relativeSubpath);
+                var sourceMapTreeElement = new WebInspector.SourceMapResourceTreeElement(sourceMapResource);
+                folderTreeElement.insertChild(sourceMapTreeElement, insertionIndexForObjectInListSortedByFunction(sourceMapTreeElement, folderTreeElement.children, WebInspector.ResourceTreeElement.compareFolderAndResourceTreeElements));
+            }
+        }
+
+        for (var i = 0; i < this.children.length; ++i)
+            findAndCombineFolderChains(this.children[i], null);
+    },
+
+    // Protected
+
+    createFoldersAsNeededForSubpath: function(subpath)
+    {
+        if (!subpath)
+            return this;
+
+        var components = subpath.split("/");
+        if (components.length === 1)
+            return this;
+
+        if (!this._subpathFolderTreeElementMap)
+            this._subpathFolderTreeElementMap = {};
+
+        var currentPath = "";
+        var currentFolderTreeElement = this;
+
+        for (var i = 0 ; i < components.length - 1; ++i) {
+            var componentName = components[i];
+            currentPath += (i ? "/" : "") + componentName;
+
+            var cachedFolder = this._subpathFolderTreeElementMap[currentPath];
+            if (cachedFolder) {
+                currentFolderTreeElement = cachedFolder;
+                continue;
+            }
+
+            var newFolder = new WebInspector.FolderTreeElement(componentName);
+            newFolder.__path = currentPath;
+            this._subpathFolderTreeElementMap[currentPath] = newFolder;
+
+            var index = insertionIndexForObjectInListSortedByFunction(newFolder, currentFolderTreeElement.children, WebInspector.ResourceTreeElement.compareFolderAndResourceTreeElements);
+            currentFolderTreeElement.insertChild(newFolder, index);
+            currentFolderTreeElement = newFolder;
+        }
+
+        return currentFolderTreeElement;
+    },
+
+    descendantResourceTreeElementTypeDidChange: function(childTreeElement, oldType)
+    {
+        // Called by descendant SourceMapResourceTreeElements.
+
+        console.assert(this.hasChildren);
+
+        var wasSelected = childTreeElement.selected;
+
+        var parentTreeElement = childTreeElement.parent;
+        parentTreeElement.removeChild(childTreeElement, true, true);
+        parentTreeElement.insertChild(childTreeElement, insertionIndexForObjectInListSortedByFunction(childTreeElement, parentTreeElement.children, WebInspector.ResourceTreeElement.compareFolderAndResourceTreeElements));
+
+        if (wasSelected)
+            childTreeElement.revealAndSelect(true, false, true, true);
+    },
+
+    // Protected (ResourceTreeElement calls this when its Resource changes dynamically for Frames)
+
+    _updateSourceCode: function(sourceCode)
+    {
+        console.assert(sourceCode instanceof WebInspector.SourceCode);
+
+        if (this._sourceCode === sourceCode)
+            return;
+
+        if (this._sourceCode)
+            this._sourceCode.removeEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this.updateSourceMapResources, this);
+
+        this._sourceCode = sourceCode;
+        this._sourceCode.addEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this.updateSourceMapResources, this);
+
+        this.updateSourceMapResources();
+    }
+};
+
+WebInspector.SourceCodeTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceMap.js b/Source/WebInspectorUI/UserInterface/SourceMap.js
new file mode 100644
index 000000000..b910baadd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SourceMap.js
@@ -0,0 +1,333 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * Implements Source Map V3 model. See http://code.google.com/p/closure-compiler/wiki/SourceMaps
+ * for format description.
+ * @constructor
+ * @param {string} sourceMappingURL
+ * @param {SourceMapV3} payload
+ * @param {WebInspector.Resource|WebInspector.Script} originalSourceCode
+ */
+WebInspector.SourceMap = function(sourceMappingURL, payload, originalSourceCode)
+{
+    if (!WebInspector.SourceMap.prototype._base64Map) {
+        const base64Digits = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+        WebInspector.SourceMap.prototype._base64Map = {};
+        for (var i = 0; i < base64Digits.length; ++i)
+            WebInspector.SourceMap.prototype._base64Map[base64Digits.charAt(i)] = i;
+    }
+
+    this._originalSourceCode = originalSourceCode || null;
+    this._sourceMapResources = {};
+    this._sourceMapResourcesList = [];
+
+    this._sourceMappingURL = sourceMappingURL;
+    this._reverseMappingsBySourceURL = {};
+    this._mappings = [];
+    this._sources = {};
+    this._sourceRoot = null;
+    this._sourceContentByURL = {};
+    this._parseMappingPayload(payload);
+}
+
+WebInspector.SourceMap.prototype = {
+
+    get originalSourceCode()
+    {
+        return this._originalSourceCode;
+    },
+
+    get sourceMappingBasePathURLComponents()
+    {
+        if (this._sourceMappingURLBasePathComponents)
+            return this._sourceMappingURLBasePathComponents;
+
+        if (this._sourceRoot) {
+            var baseURLPath = absoluteURL(this._sourceRoot, this._sourceMappingURL);
+            console.assert(baseURLPath);
+            if (baseURLPath) {
+                var urlComponents = parseURL(baseURLPath);
+                if (!/\/$/.test(urlComponents.path))
+                    urlComponents.path += "/";
+                this._sourceMappingURLBasePathComponents = urlComponents;
+                return this._sourceMappingURLBasePathComponents;
+            }
+        }
+
+        var urlComponents = parseURL(this._sourceMappingURL);
+        urlComponents.path = urlComponents.path.substr(0, urlComponents.path.lastIndexOf(urlComponents.lastPathComponent));
+        urlComponents.lastPathComponent = null;
+        this._sourceMappingURLBasePathComponents = urlComponents;
+        return this._sourceMappingURLBasePathComponents;
+    },
+
+    get resources()
+    {
+        return this._sourceMapResourcesList;
+    },
+
+    addResource: function(resource)
+    {
+        console.assert(!(resource.url in this._sourceMapResources));
+        this._sourceMapResources[resource.url] = resource;
+        this._sourceMapResourcesList.push(resource);
+    },
+
+    resourceForURL: function(url)
+    {
+        return this._sourceMapResources[url];
+    },
+
+    /**
+     * @return {Array.<string>}
+     */
+    sources: function()
+    {
+        return Object.keys(this._sources);
+    },
+
+    /**
+     * @param {string} sourceURL
+     * @return {string|undefined}
+     */
+    sourceContent: function(sourceURL)
+    {
+        return this._sourceContentByURL[sourceURL];
+    },
+
+    /**
+     * @param {SourceMapV3} mappingPayload
+     */
+    _parseMappingPayload: function(mappingPayload)
+    {
+        if (mappingPayload.sections)
+            this._parseSections(mappingPayload.sections);
+        else
+            this._parseMap(mappingPayload, 0, 0);
+    },
+
+    /**
+     * @param {Array.<SourceMapV3.Section>} sections
+     */
+    _parseSections: function(sections)
+    {
+        for (var i = 0; i < sections.length; ++i) {
+            var section = sections[i];
+            this._parseMap(section.map, section.offset.line, section.offset.column);
+        }
+    },
+
+    /**
+     * @param {number} lineNumber in compiled resource
+     * @param {number} columnNumber in compiled resource
+     * @return {?Array}
+     */
+    findEntry: function(lineNumber, columnNumber)
+    {
+        var first = 0;
+        var count = this._mappings.length;
+        while (count > 1) {
+            var step = count >> 1;
+            var middle = first + step;
+            var mapping = this._mappings[middle];
+            if (lineNumber < mapping[0] || (lineNumber === mapping[0] && columnNumber < mapping[1]))
+                count = step;
+            else {
+                first = middle;
+                count -= step;
+            }
+        }
+        var entry = this._mappings[first];
+        if (!first && entry && (lineNumber < entry[0] || (lineNumber === entry[0] && columnNumber < entry[1])))
+            return null;
+        return entry;
+    },
+
+    /**
+     * @param {string} sourceURL of the originating resource
+     * @param {number} lineNumber in the originating resource
+     * @return {Array}
+     */
+    findEntryReversed: function(sourceURL, lineNumber)
+    {
+        var mappings = this._reverseMappingsBySourceURL[sourceURL];
+        for ( ; lineNumber < mappings.length; ++lineNumber) {
+            var mapping = mappings[lineNumber];
+            if (mapping)
+                return mapping;
+        }
+        return this._mappings[0];
+    },
+
+    /**
+     * @param {SourceMapV3} map
+     * @param {number} lineNumber
+     * @param {number} columnNumber
+     */
+    _parseMap: function(map, lineNumber, columnNumber)
+    {
+        var sourceIndex = 0;
+        var sourceLineNumber = 0;
+        var sourceColumnNumber = 0;
+        var nameIndex = 0;
+
+        var sources = [];
+        var originalToCanonicalURLMap = {};
+        for (var i = 0; i < map.sources.length; ++i) {
+            var originalSourceURL = map.sources[i];
+            var href = originalSourceURL;
+            if (map.sourceRoot && href.charAt(0) !== "/")
+                href = map.sourceRoot.replace(/\/+$/, "") + "/" + href;
+            var url = absoluteURL(href, this._sourceMappingURL) || href;
+            originalToCanonicalURLMap[originalSourceURL] = url;
+            sources.push(url);
+            this._sources[url] = true;
+
+            if (map.sourcesContent && map.sourcesContent[i])
+                this._sourceContentByURL[url] = map.sourcesContent[i];
+        }
+
+        this._sourceRoot = map.sourceRoot || null;
+
+        var stringCharIterator = new WebInspector.SourceMap.StringCharIterator(map.mappings);
+        var sourceURL = sources[sourceIndex];
+
+        while (true) {
+            if (stringCharIterator.peek() === ",")
+                stringCharIterator.next();
+            else {
+                while (stringCharIterator.peek() === ";") {
+                    lineNumber += 1;
+                    columnNumber = 0;
+                    stringCharIterator.next();
+                }
+                if (!stringCharIterator.hasNext())
+                    break;
+            }
+
+            columnNumber += this._decodeVLQ(stringCharIterator);
+            if (this._isSeparator(stringCharIterator.peek())) {
+                this._mappings.push([lineNumber, columnNumber]);
+                continue;
+            }
+
+            var sourceIndexDelta = this._decodeVLQ(stringCharIterator);
+            if (sourceIndexDelta) {
+                sourceIndex += sourceIndexDelta;
+                sourceURL = sources[sourceIndex];
+            }
+            sourceLineNumber += this._decodeVLQ(stringCharIterator);
+            sourceColumnNumber += this._decodeVLQ(stringCharIterator);
+            if (!this._isSeparator(stringCharIterator.peek()))
+                nameIndex += this._decodeVLQ(stringCharIterator);
+
+            this._mappings.push([lineNumber, columnNumber, sourceURL, sourceLineNumber, sourceColumnNumber]);
+        }
+
+        for (var i = 0; i < this._mappings.length; ++i) {
+            var mapping = this._mappings[i];
+            var url = mapping[2];
+            if (!url)
+                continue;
+            if (!this._reverseMappingsBySourceURL[url])
+                this._reverseMappingsBySourceURL[url] = [];
+            var reverseMappings = this._reverseMappingsBySourceURL[url];
+            var sourceLine = mapping[3];
+            if (!reverseMappings[sourceLine])
+                reverseMappings[sourceLine] = [mapping[0], mapping[1]];
+        }
+    },
+
+    /**
+     * @param {string} char
+     * @return {boolean}
+     */
+    _isSeparator: function(char)
+    {
+        return char === "," || char === ";";
+    },
+
+    /**
+     * @param {WebInspector.SourceMap.StringCharIterator} stringCharIterator
+     * @return {number}
+     */
+    _decodeVLQ: function(stringCharIterator)
+    {
+        // Read unsigned value.
+        var result = 0;
+        var shift = 0;
+        do {
+            var digit = this._base64Map[stringCharIterator.next()];
+            result += (digit & this._VLQ_BASE_MASK) << shift;
+            shift += this._VLQ_BASE_SHIFT;
+        } while (digit & this._VLQ_CONTINUATION_MASK);
+
+        // Fix the sign.
+        var negative = result & 1;
+        result >>= 1;
+        return negative ? -result : result;
+    },
+
+    _VLQ_BASE_SHIFT: 5,
+    _VLQ_BASE_MASK: (1 << 5) - 1,
+    _VLQ_CONTINUATION_MASK: 1 << 5
+}
+
+/**
+ * @constructor
+ * @param {string} string
+ */
+WebInspector.SourceMap.StringCharIterator = function(string)
+{
+    this._string = string;
+    this._position = 0;
+}
+
+WebInspector.SourceMap.StringCharIterator.prototype = {
+    /**
+     * @return {string}
+     */
+    next: function()
+    {
+        return this._string.charAt(this._position++);
+    },
+
+    /**
+     * @return {string}
+     */
+    peek: function()
+    {
+        return this._string.charAt(this._position);
+    },
+
+    /**
+     * @return {boolean}
+     */
+    hasNext: function()
+    {
+        return this._position < this._string.length;
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/SourceMapManager.js b/Source/WebInspectorUI/UserInterface/SourceMapManager.js
new file mode 100644
index 000000000..ba36c040a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SourceMapManager.js
@@ -0,0 +1,143 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceMapManager = function()
+{
+    WebInspector.Object.call(this);
+
+    this._sourceMapURLMap = {};
+    this._downloadingSourceMaps = {};
+
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+};
+
+WebInspector.SourceMapManager.prototype = {
+    constructor: WebInspector.SourceMapManager,
+
+    // Public
+
+    sourceMapForURL: function(sourceMapURL)
+    {
+        return this._sourceMapURLMap[sourceMapURL];
+    },
+
+    downloadSourceMap: function(sourceMapURL, baseURL, originalSourceCode)
+    {
+        sourceMapURL = absoluteURL(sourceMapURL, baseURL);
+        if (!sourceMapURL)
+            return;
+
+        console.assert(originalSourceCode.url);
+        if (!originalSourceCode.url)
+            return;
+
+        // FIXME: <rdar://problem/13265694> Source Maps: Better handle when multiple resources reference the same SourceMap
+
+        if (sourceMapURL in this._sourceMapURLMap)
+            return;
+
+        if (sourceMapURL in this._downloadingSourceMaps)
+            return;
+
+        this._loadAndParseSourceMap(sourceMapURL, baseURL, originalSourceCode);
+    },
+
+    // Private
+
+    _loadAndParseSourceMap: function(sourceMapURL, baseURL, originalSourceCode)
+    {
+        this._downloadingSourceMaps[sourceMapURL] = true;
+
+        // FIXME: <rdar://problem/13238886> Source Maps: Frontend needs asynchronous resource loading of content + mime type
+        var response = InspectorFrontendHost.loadResourceSynchronously(sourceMapURL);
+        if (response === undefined) {
+            this._loadAndParseFailed(sourceMapURL);
+            return;
+        }
+
+        if (response.slice(0, 3) === ")]}") {
+            var firstNewlineIndex = response.indexOf("\n");
+            if (firstNewlineIndex === -1) {
+                this._loadAndParseFailed(sourceMapURL);
+                return;
+            }
+            response = response.substring(firstNewlineIndex);
+        }
+
+        try {
+            var payload = JSON.parse(response);
+            var baseURL = sourceMapURL.startsWith("data:") ? originalSourceCode.url : sourceMapURL;
+            var sourceMap = new WebInspector.SourceMap(baseURL, payload, originalSourceCode);
+            this._loadAndParseSucceeded(sourceMapURL, sourceMap);
+        } catch(e) {
+            console.error(e.message);
+            this._loadAndParseFailed(sourceMapURL);
+        }
+    },
+
+    _loadAndParseFailed: function(sourceMapURL)
+    {
+        delete this._downloadingSourceMaps[sourceMapURL];
+    },
+
+    _loadAndParseSucceeded: function(sourceMapURL, sourceMap)
+    {
+        if (!(sourceMapURL in this._downloadingSourceMaps))
+            return;
+
+        delete this._downloadingSourceMaps[sourceMapURL];
+
+        this._sourceMapURLMap[sourceMapURL] = sourceMap;
+
+        var sources = sourceMap.sources();
+        for (var i = 0; i < sources.length; ++i) {
+            var sourceMapResource = new WebInspector.SourceMapResource(sources[i], sourceMap);
+            sourceMap.addResource(sourceMapResource);
+        }
+
+        // Associate the SourceMap with the originalSourceCode.
+        sourceMap.originalSourceCode.addSourceMap(sourceMap);
+
+        // If the originalSourceCode was not a Resource, be sure to also associate with the Resource if one exists.
+        // FIXME: We should try to use the right frame instead of a global lookup by URL.
+        if (!(sourceMap.originalSourceCode instanceof WebInspector.Resource)) {
+            console.assert(sourceMap.originalSourceCode instanceof WebInspector.Script);
+            var resource = sourceMap.originalSourceCode.resource;
+            if (resource)
+                resource.addSourceMap(sourceMap);
+        }
+    },
+
+    _mainResourceDidChange: function(event)
+    {
+        if (!event.target.isMainFrame())
+            return;
+
+        this._sourceMapURLMap = {};
+        this._downloadingSourceMaps = {};
+    }
+};
+
+WebInspector.SourceMapManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceMapResource.js b/Source/WebInspectorUI/UserInterface/SourceMapResource.js
new file mode 100644
index 000000000..aa7ddcb3d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SourceMapResource.js
@@ -0,0 +1,149 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceMapResource = function(url, sourceMap)
+{
+    WebInspector.Resource.call(this, url, null);
+
+    console.assert(url);
+    console.assert(sourceMap);
+
+    this._sourceMap = sourceMap;
+};
+
+WebInspector.SourceMapResource.prototype = {
+    constructor: WebInspector.SourceMapResource,
+
+    // Public
+
+    get sourceMap()
+    {
+        return this._sourceMap;
+    },
+
+    get sourceMapDisplaySubpath()
+    {
+        var sourceMappingBasePathURLComponents = this._sourceMap.sourceMappingBasePathURLComponents;
+        var resourceURLComponents = this.urlComponents;
+
+        // Different schemes / hosts. Return the host + path of this resource.
+        if (resourceURLComponents.scheme !== sourceMappingBasePathURLComponents.scheme || resourceURLComponents.host !== sourceMappingBasePathURLComponents.host)
+            return resourceURLComponents.host + (resourceURLComponents.port ? (":" + resourceURLComponents.port) : "") + resourceURLComponents.path;
+
+        // Same host, but not a subpath of the base. This implies a ".." in the relative path.
+        if (!resourceURLComponents.path.startsWith(sourceMappingBasePathURLComponents.path))
+            return relativePath(resourceURLComponents.path, sourceMappingBasePathURLComponents.path);
+
+        // Same host. Just a subpath of the base.
+        return resourceURLComponents.path.substring(sourceMappingBasePathURLComponents.path.length, resourceURLComponents.length);
+    },
+
+    canRequestContentFromBackend: function()
+    {
+        return !this.finished;
+    },
+
+    requestContentFromBackend: function(callback)
+    {
+        function requestAsyncCallback(body, base64encoded, mimeType)
+        {
+            if (body === null) {
+                this.markAsFailed();
+                callback("Failed to load resource", body, base64encoded);
+                return;
+            }
+
+            var oldType = this._type;
+            var oldMIMEType = this._mimeType;
+
+            this._mimeType = mimeType;
+            this._type = WebInspector.Resource.Type.fromMIMEType(this._mimeType);
+
+            if (oldMIMEType !== mimeType)
+                this.dispatchEventToListeners(WebInspector.Resource.Event.MIMETypeDidChange, {oldMIMEType: oldMIMEType});
+
+            if (oldType !== this._type)
+                this.dispatchEventToListeners(WebInspector.Resource.Event.TypeDidChange, {oldType: oldType});
+
+            this.markAsFinished();
+
+            callback(null, body, base64encoded);
+        }
+
+        this._requestResourceAsynchronously(requestAsyncCallback.bind(this));
+        return true;
+    },
+
+    createSourceCodeLocation: function(lineNumber, columnNumber)
+    {
+        // SourceCodeLocations are always constructed with raw resources and raw locations. Lookup the raw location.
+        var entry = this._sourceMap.findEntryReversed(this.url, lineNumber);
+        var rawLineNumber = entry[0];
+        var rawColumnNumber = entry[1];
+
+        // If the raw location is an inline script we need to include that offset.
+        var originalSourceCode = this._sourceMap.originalSourceCode;
+        if (originalSourceCode instanceof WebInspector.Script) {
+            if (rawLineNumber === 0)
+                rawColumnNumber += originalSourceCode.range.startColumn;
+            rawLineNumber += originalSourceCode.range.startLine;
+        }
+
+        // Create the SourceCodeLocation and since we already know the the mapped location set it directly.
+        var location = originalSourceCode.createSourceCodeLocation(rawLineNumber, rawColumnNumber);
+        location._setMappedLocation(this, lineNumber, columnNumber);
+        return location;
+    },
+
+    createSourceCodeTextRange: function(textRange)
+    {
+        // SourceCodeTextRanges are always constructed with raw resources and raw locations.
+        // However, we can provide the most accurate mapped locations in construction.
+        var startSourceCodeLocation = this.createSourceCodeLocation(textRange.startLine, textRange.startColumn);
+        var endSourceCodeLocation = this.createSourceCodeLocation(textRange.endLine, textRange.endColumn);
+        return new WebInspector.SourceCodeTextRange(this._sourceMap.originalSourceCode, startSourceCodeLocation, endSourceCodeLocation);
+    },
+
+    // Private
+
+    _requestResourceAsynchronously: function(callback)
+    {
+        // FIXME: <rdar://problem/13238886> Source Maps: Frontend needs asynchronous resource loading of content + mime type
+
+        function async()
+        {
+            var body = this._sourceMap.sourceContent(this.url) || InspectorFrontendHost.loadResourceSynchronously(this.url);
+            if (body === undefined)
+                body = null;
+            var fileExtension = WebInspector.fileExtensionForURL(this.url);
+            var mimeType = WebInspector.mimeTypeForFileExtension(fileExtension, true) || "text/javascript";
+            callback(body, false, mimeType);
+        }
+
+        setTimeout(async.bind(this), 0);
+    }
+};
+
+WebInspector.SourceMapResource.prototype.__proto__ = WebInspector.Resource.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceMapResourceTreeElement.js b/Source/WebInspectorUI/UserInterface/SourceMapResourceTreeElement.js
new file mode 100644
index 000000000..9d9d90574
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SourceMapResourceTreeElement.js
@@ -0,0 +1,70 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceMapResourceTreeElement = function(sourceMapResource, representedObject)
+{
+    console.assert(sourceMapResource instanceof WebInspector.SourceMapResource);
+
+    WebInspector.ResourceTreeElement.call(this, sourceMapResource);
+
+    console.assert(this.resource === sourceMapResource);
+
+    this.addClassName(WebInspector.SourceMapResourceTreeElement.StyleClassName);
+};
+
+WebInspector.SourceMapResourceTreeElement.StyleClassName = "source-map-resource";
+
+WebInspector.SourceMapResourceTreeElement.prototype = {
+    constructor: WebInspector.SourceMapResourceTreeElement,
+
+    // Protected
+
+    onattach: function()
+    {
+        WebInspector.ResourceTreeElement.prototype.onattach.call(this);
+
+        // SourceMap resources must be loaded by the frontend, and only
+        // then do they get their type information. So force a load as
+        // soon as they are attached to the sidebar.
+        this.resource.requestContent(function() {});
+    },
+
+    _updateTitles: function()
+    {
+        var oldMainTitle = this.mainTitle;
+        this.mainTitle = this.resource.displayName;
+
+        // Show the host as the subtitle if it is different from the originalSourceCode's host.
+        var sourceMapHost = this.resource.urlComponents.host;
+        var originalHost = this.resource.sourceMap.originalSourceCode.urlComponents.host;
+        var subtitle = sourceMapHost !== originalHost ? WebInspector.displayNameForHost(sourceMapHost) : null;
+        this.subtitle = this.mainTitle !== subtitle ? subtitle : null;
+
+        if (oldMainTitle !== this.mainTitle)
+            this.callFirstAncestorFunction("descendantResourceTreeElementMainTitleDidChange", [this, oldMainTitle]);
+    }
+};
+
+WebInspector.SourceMapResourceTreeElement.prototype.__proto__ = WebInspector.ResourceTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/StorageManager.js b/Source/WebInspectorUI/UserInterface/StorageManager.js
new file mode 100644
index 000000000..737ff71b8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/StorageManager.js
@@ -0,0 +1,186 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.StorageManager = function()
+{
+    WebInspector.Object.call(this);
+
+    DOMStorageAgent.enable();
+    DatabaseAgent.enable();
+
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+
+    // COMPATIBILITY (iOS 6): DOMStorage was discovered via a DOMStorageObserver event. Now DOM Storage
+    // is added whenever a new securityOrigin is discovered. Check for DOMStorageAgent.getDOMStorageItems,
+    // which was renamed at the same time the change to start using securityOrigin was made.
+    if (DOMStorageAgent.getDOMStorageItems)
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.SecurityOriginDidChange, this._securityOriginDidChange, this);
+
+    this.initialize();
+};
+
+WebInspector.StorageManager.Event = {
+    CookieStorageObjectWasAdded: "storage-manager-cookie-storage-object-was-added",
+    DOMStorageObjectWasAdded: "storage-manager-dom-storage-object-was-added",
+    DOMStorageObjectWasInspected: "storage-dom-object-was-inspected",
+    DatabaseWasAdded: "storage-manager-database-was-added",
+    DatabaseWasInspected: "storage-object-was-inspected",
+    Cleared: "storage-manager-cleared"
+};
+
+WebInspector.StorageManager.prototype = {
+    constructor: WebInspector.StorageManager,
+
+    // Public
+
+    initialize: function()
+    {
+        this._domStorageObjects = [];
+        this._databaseObjects = [];
+        this._cookieStorageObjects = {};
+    },
+
+    domStorageWasAdded: function(id, host, isLocalStorage)
+    {
+        var domStorage = new WebInspector.DOMStorageObject(id, host, isLocalStorage);
+
+        this._domStorageObjects.push(domStorage);
+        this.dispatchEventToListeners(WebInspector.StorageManager.Event.DOMStorageObjectWasAdded, {domStorage: domStorage});
+    },
+    
+    databaseWasAdded: function(id, host, name, version)
+    {
+        var database = new WebInspector.DatabaseObject(id, host, name, version);
+        
+        this._databaseObjects.push(database);
+        this.dispatchEventToListeners(WebInspector.StorageManager.Event.DatabaseWasAdded, {database: database});
+    },
+
+    domStorageWasUpdated: function(id)
+    {
+        var domStorage = this._domStorageForId(id);
+        if (!domStorage)
+            return;
+
+        var domStorageView = WebInspector.contentBrowser.contentViewContainer.contentViewForRepresentedObject(domStorage, true);
+        if (!domStorageView)
+            return;
+
+        console.assert(domStorageView instanceof WebInspector.DOMStorageContentView);
+        domStorageView.update();
+    },
+
+    inspectDatabase: function(id)
+    {
+        var database = this._databaseForId(id);
+        console.assert(database);
+        if (!database)
+            return;
+        this.dispatchEventToListeners(WebInspector.StorageManager.Event.DatabaseWasInspected, {database: database});
+    },
+
+    inspectDOMStorage: function(id)
+    {
+        var domStorage = this._domStorageForId(id);
+        console.assert(domStorage);
+        if (!domStorage)
+            return;
+        this.dispatchEventToListeners(WebInspector.StorageManager.Event.DOMStorageObjectWasInspected, {domStorage: domStorage});
+    },
+
+    // Private
+
+    _mainResourceDidChange: function(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        if (event.target.isMainFrame()) {
+            // If we are dealing with the main frame, we want to clear our list of objects, because we are navigating to a new page.
+            this.initialize();
+            this.dispatchEventToListeners(WebInspector.StorageManager.Event.Cleared);
+
+            this._addDOMStorageIfNeeded(event.target);
+        }
+
+        // Add the host of the frame that changed the main resource to the list of hosts there could be cookies for.
+        var host = parseURL(event.target.url).host;
+        if (!host)
+            return;
+
+        if (this._cookieStorageObjects[host])
+            return;
+
+        this._cookieStorageObjects[host] = new WebInspector.CookieStorageObject(host);
+        this.dispatchEventToListeners(WebInspector.StorageManager.Event.CookieStorageObjectWasAdded, {cookieStorage: this._cookieStorageObjects[host]});
+    },
+
+    _addDOMStorageIfNeeded: function(frame)
+    {
+        // Don't show storage if we don't have a security origin (about:blank).
+        if (!frame.securityOrigin || frame.securityOrigin === "://")
+            return;
+
+        // FIXME: Consider passing the other parts of the origin along to domStorageWasAdded.
+
+        var localStorageIdentifier = {securityOrigin: frame.securityOrigin, isLocalStorage: true};
+        if (!this._domStorageForId(localStorageIdentifier))
+            this.domStorageWasAdded(localStorageIdentifier, frame.mainResource.urlComponents.host, true);
+
+        var sessionStorageIdentifier = {securityOrigin: frame.securityOrigin, isLocalStorage: false};
+        if (!this._domStorageForId(sessionStorageIdentifier))
+            this.domStorageWasAdded(sessionStorageIdentifier, frame.mainResource.urlComponents.host, false);
+    },
+
+    _securityOriginDidChange: function(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        this._addDOMStorageIfNeeded(event.target);
+    },
+
+    _databaseForId: function(id)
+    {
+        for (var i = 0; i < this._databaseObjects.length; ++i) {
+            if (this._databaseObjects[i].id === id)
+                return this._databaseObjects[i];
+        }
+
+        return null;
+    },
+
+    _domStorageForId: function(id)
+    {
+        for (var i = 0; i < this._domStorageObjects.length; ++i) {
+            // The id is an object, so we need to compare the properties using Object.shallowEqual.
+            // COMPATIBILITY (iOS 6): The id was a string. Object.shallowEqual works for both.
+            if (Object.shallowEqual(this._domStorageObjects[i].id, id))
+                return this._domStorageObjects[i];
+        }
+
+        return null;
+    }
+};
+
+WebInspector.StorageManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/StorageTreeElement.js b/Source/WebInspectorUI/UserInterface/StorageTreeElement.js
new file mode 100644
index 000000000..dc72e8b3f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/StorageTreeElement.js
@@ -0,0 +1,73 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.StorageTreeElement = function(classNames, title, representedObject)
+{
+    WebInspector.GeneralTreeElement.call(this, classNames, title, null, representedObject, false);
+
+    this.small = true;
+    this.flattened = false;
+};
+
+WebInspector.StorageTreeElement.prototype = {
+    constructor: WebInspector.StorageTreeElement,
+
+    // Public
+
+    get flattened()
+    {
+        return this._flattened;
+    },
+
+    set flattened(flattened)
+    {
+        if (this._flattened === flattened)
+            return;
+
+        this._flattened = flattened;
+        if (!this._flattened) {
+            this.mainTitle = this.name;
+            this.subtitle = this.secondaryName;
+            this._updateChildrenTitles();
+            return;
+        }
+
+        this.mainTitle = this.categoryName;
+        this.subtitle = this.name;
+        this._updateChildrenTitles();
+    },
+
+    // Private
+
+    _updateChildrenTitles: function()
+    {
+        for (var i = 0; i < this.children.length; ++i) {
+            if (typeof this.children[i].updateTitles === "function")
+                this.children[i].updateTitles();
+        }
+    }
+};
+
+WebInspector.StorageTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/StyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/StyleDetailsPanel.js
new file mode 100644
index 000000000..41f63570c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/StyleDetailsPanel.js
@@ -0,0 +1,163 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.StyleDetailsPanel = function(className, identifier, label)
+{
+    this._element = document.createElement("div");
+    this._element.className = className;
+
+    // Add this offset-sections class name so the sticky headers don't overlap the navigation bar.
+    this.element.classList.add(WebInspector.StyleDetailsPanel.OffsetSectionsStyleClassName);
+
+    this._navigationItem = new WebInspector.RadioButtonNavigationItem(identifier, label);
+
+    this._nodeStyles = null;
+    this._visible = false;
+};
+
+WebInspector.StyleDetailsPanel.OffsetSectionsStyleClassName = "offset-sections";
+
+WebInspector.StyleDetailsPanel.prototype = {
+    constructor: WebInspector.StyleDetailsPanel,
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get navigationItem()
+    {
+        return this._navigationItem;
+    },
+
+    get nodeStyles()
+    {
+        return this._nodeStyles;
+    },
+
+    shown: function()
+    {
+        if (this._visible)
+            return;
+
+        this._visible = true;
+
+        this._refreshNodeStyles();
+    },
+
+    hidden: function()
+    {
+        this._visible = false;
+    },
+
+    widthDidChange: function()
+    {
+        // Implemented by subclasses.
+    },
+
+    markAsNeedsRefresh: function(domNode)
+    {
+        console.assert(domNode);
+        if (!domNode)
+            return;
+
+        if (!this._nodeStyles || this._nodeStyles.node !== domNode) {
+            if (this._nodeStyles) {
+                this._nodeStyles.removeEventListener(WebInspector.DOMNodeStyles.Event.Refreshed, this._nodeStylesRefreshed, this);
+                this._nodeStyles.removeEventListener(WebInspector.DOMNodeStyles.Event.NeedsRefresh, this._nodeStylesNeedsRefreshed, this);
+            }
+
+            this._nodeStyles = WebInspector.cssStyleManager.stylesForNode(domNode);
+
+            console.assert(this._nodeStyles);
+            if (!this._nodeStyles)
+                return;
+
+            this._nodeStyles.addEventListener(WebInspector.DOMNodeStyles.Event.Refreshed, this._nodeStylesRefreshed, this);
+            this._nodeStyles.addEventListener(WebInspector.DOMNodeStyles.Event.NeedsRefresh, this._nodeStylesNeedsRefreshed, this);
+
+            this._forceSignificantChange = true;
+        }
+
+        if (this._visible)
+            this._refreshNodeStyles();
+    },
+
+    refresh: function(significantChange)
+    {
+        // Implemented by subclasses.
+    },
+
+    // Private
+
+    get _initialScrollOffset()
+    {
+        if (!WebInspector.cssStyleManager.canForcePseudoClasses())
+            return 0;
+        return this.nodeStyles.node.enabledPseudoClasses.length ? 0 : WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset;
+    },
+
+    _refreshNodeStyles: function()
+    {
+        if (!this._nodeStyles)
+            return;
+        this._nodeStyles.refresh();
+    },
+
+    _refreshPreservingScrollPosition: function(significantChange)
+    {
+        significantChange = this._forceSignificantChange || significantChange || false;
+        delete this._forceSignificantChange;
+
+        var previousScrollTop = this._initialScrollOffset;
+
+        // Only remember the scroll position if the previous node is the same as this one.
+        if (this.element.parentNode && this._previousRefreshNodeIdentifier === this._nodeStyles.node.id)
+            previousScrollTop = this.element.parentNode.scrollTop;
+
+        this.refresh(significantChange);
+
+        this._previousRefreshNodeIdentifier = this._nodeStyles.node.id;
+
+        if (this.element.parentNode)
+            this.element.parentNode.scrollTop = previousScrollTop;
+    },
+
+    _nodeStylesRefreshed: function(event)
+    {
+        if (this._visible)
+            this._refreshPreservingScrollPosition(event.data.significantChange);
+    },
+
+    _nodeStylesNeedsRefreshed: function(event)
+    {
+        if (this._visible)
+            this._refreshNodeStyles();
+    }
+};
+
+WebInspector.StyleDetailsPanel.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/StyleRuleIcons.css b/Source/WebInspectorUI/UserInterface/StyleRuleIcons.css
new file mode 100644
index 000000000..e75859066
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/StyleRuleIcons.css
@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.author-style-rule-icon .icon {
+    content: url(Images/StyleRuleAuthor.pdf);
+}
+
+.user-style-rule-icon .icon {
+    content: url(Images/StyleRuleUser.pdf);
+}
+
+.user-agent-style-rule-icon .icon {
+    content: url(Images/StyleRuleUserAgent.pdf);
+}
+
+.inspector-style-rule-icon .icon {
+    content: url(Images/StyleRuleInspector.pdf);
+}
+
+.inherited-style-rule-icon .icon {
+    content: url(Images/StyleRuleInherited.pdf);
+}
+
+.inherited-element-style-rule-icon .icon {
+    content: url(Images/StyleRuleInheritedElement.pdf);
+}
diff --git a/Source/WebInspectorUI/UserInterface/SyntaxHighlightingDefaultTheme.css b/Source/WebInspectorUI/UserInterface/SyntaxHighlightingDefaultTheme.css
new file mode 100644
index 000000000..a6ac8c06a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SyntaxHighlightingDefaultTheme.css
@@ -0,0 +1,117 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/* These styles match Xcode 4's Default theme. */
+
+.cm-s-default,
+.syntax-highlighted {
+    color: black;
+
+    font-family: Menlo, monospace;
+    font-size: 11px;
+}
+
+.cm-s-default .cm-comment,
+.syntax-highlighted .css-comment,
+.syntax-highlighted .javascript-comment,
+.syntax-highlighted .html-comment {
+    color: rgb(0, 116, 0);
+}
+
+.cm-s-default .cm-tag,
+.cm-s-default .cm-atom,
+.cm-s-default .cm-keyword,
+.cm-s-default .cm-m-css.cm-meta,
+.cm-s-default .cm-m-css.cm-property,
+.cm-s-default .cm-m-css.cm-string-2,
+.cm-s-default .cm-m-javascript.cm-builtin,
+.syntax-highlighted .css-keyword,
+.syntax-highlighted .css-property,
+.syntax-highlighted .css-at-rule,
+.syntax-highlighted .css-important,
+.syntax-highlighted .javascript-keyword,
+.syntax-highlighted .html-tag {
+    color: rgb(170, 13, 145);
+}
+
+.cm-s-default .cm-number,
+.cm-s-default .cm-m-css.cm-atom,
+.syntax-highlighted .css-number,
+.syntax-highlighted .javascript-number {
+    color: rgb(28, 0, 207);
+}
+
+.cm-s-default .cm-def,
+.cm-s-default .cm-bracket,
+.cm-s-default .cm-operator,
+.cm-s-default .cm-qualifier,
+.cm-s-default .cm-variable,
+.cm-s-default .cm-variable-2,
+.cm-s-default .cm-variable-3,
+.cm-s-default .cm-m-css.cm-tag,
+.cm-s-default .cm-m-css.cm-builtin,
+.syntax-highlighted .css-selector,
+.syntax-highlighted .javascript-ident {
+    color: inherit;
+}
+
+.cm-s-default .cm-string,
+.syntax-highlighted .css-string,
+.syntax-highlighted .javascript-string,
+.syntax-highlighted .javascript-regexp,
+.syntax-highlighted .html-attribute-value {
+    color: rgb(196, 26, 22);
+}
+
+.cm-s-default .cm-m-xml.cm-meta,
+.syntax-highlighted .html-doctype {
+    color: rgb(192, 192, 192);
+}
+
+.cm-s-default .cm-m-xml.cm-attribute,
+.syntax-highlighted .html-attribute-name {
+    color: rgb(131, 108, 40);
+}
+
+.syntax-highlighted a {
+    color: rgb(14, 14, 255);
+}
+
+.cm-s-default .cm-link,
+.syntax-highlighted a {
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.cm-s-default .cm-link:hover,
+.syntax-highlighted a:hover {
+    text-decoration: underline;
+}
+
+.supports-find-banner.showing-find-banner.syntax-highlighted .search-result,
+.supports-find-banner.showing-find-banner .syntax-highlighted .search-result {
+    background-color: rgba(235, 215, 38, 0.2);
+    border-bottom: 1px solid rgb(237, 202, 71);
+}
diff --git a/Source/WebInspectorUI/UserInterface/SyntaxHighlightingSupport.js b/Source/WebInspectorUI/UserInterface/SyntaxHighlightingSupport.js
new file mode 100644
index 000000000..b440d32fe
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/SyntaxHighlightingSupport.js
@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SyntaxHighlightedStyleClassName = "syntax-highlighted";
+
+WebInspector.syntaxHighlightStringAsDocumentFragment = function(string, mimeType, baseURL)
+{
+    var resultFragment = document.createDocumentFragment();
+
+    function appendText(text, style)
+    {
+        if (!style) {
+            resultFragment.appendChild(document.createTextNode(text));
+            return;
+        }
+
+        var span = document.createElement("span");
+        span.className = "cm-" + style;
+        span.textContent = text;
+
+        resultFragment.appendChild(span);
+    }
+
+    CodeMirror.runMode(string, mimeType, appendText);
+
+    return resultFragment;
+};
diff --git a/Source/WebInspectorUI/UserInterface/TextContentView.css b/Source/WebInspectorUI/UserInterface/TextContentView.css
new file mode 100644
index 000000000..e03aa2433
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TextContentView.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.text > .text-editor {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/TextContentView.js b/Source/WebInspectorUI/UserInterface/TextContentView.js
new file mode 100644
index 000000000..8ef6ef348
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TextContentView.js
@@ -0,0 +1,172 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TextContentView = function(string, mimeType)
+{
+    WebInspector.ContentView.call(this, string);
+
+    this.element.classList.add(WebInspector.TextContentView.StyleClassName);
+
+    this._textEditor = new WebInspector.TextEditor;
+    this._textEditor.addEventListener(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange, this._numberOfSearchResultsDidChange, this);
+    this._textEditor.addEventListener(WebInspector.TextEditor.Event.FormattingDidChange, this._textEditorFormattingDidChange, this);
+
+    this.element.appendChild(this._textEditor.element);
+
+    this._textEditor.readOnly = true;
+    this._textEditor.mimeType = mimeType;
+    this._textEditor.string = string;
+
+    var toolTip = WebInspector.UIString("Pretty print");
+    var activatedToolTip = WebInspector.UIString("Original formatting");
+    this._prettyPrintButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("pretty-print", toolTip, activatedToolTip, "Images/NavigationItemCurleyBraces.pdf", 16, 16);
+    this._prettyPrintButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._togglePrettyPrint, this);
+    this._prettyPrintButtonNavigationItem.enabled = this._textEditor.canBeFormatted();
+};
+
+WebInspector.TextContentView.StyleClassName = "text";
+
+WebInspector.TextContentView.prototype = {
+    constructor: WebInspector.TextContentView,
+
+    // Public
+
+    get textEditor()
+    {
+        return this._textEditor;
+    },
+
+    get navigationItems()
+    {
+        return [this._prettyPrintButtonNavigationItem];
+    },
+
+    revealPosition: function(position, textRangeToSelect, forceUnformatted)
+    {
+        this._textEditor.revealPosition(position, textRangeToSelect, forceUnformatted);
+    },
+
+    shown: function()
+    {
+        WebInspector.ResourceContentView.prototype.shown.call(this);
+
+        this._textEditor.shown();
+    },
+
+    hidden: function()
+    {
+        WebInspector.ResourceContentView.prototype.hidden.call(this);
+
+        this._textEditor.hidden();
+    },
+
+    closed: function()
+    {
+        WebInspector.ContentView.prototype.closed.call(this);
+
+        this._textEditor.close();
+    },
+
+    get supportsSave()
+    {
+        return true;
+    },
+
+    get saveData()
+    {
+        var url = "web-inspector:///" + encodeURI(WebInspector.UIString("Untitled")) + ".txt";
+        return {url: url, content: this._textEditor.string, forceSaveAs: true};
+    },
+
+    get supportsSearch()
+    {
+        return true;
+    },
+
+    get numberOfSearchResults()
+    {
+        return this._textEditor.numberOfSearchResults;
+    },
+
+    get hasPerformedSearch()
+    {
+        return this._textEditor.currentSearchQuery !== null;
+    },
+
+    set automaticallyRevealFirstSearchResult(reveal)
+    {
+        this._textEditor.automaticallyRevealFirstSearchResult = reveal;
+    },
+
+    performSearch: function(query)
+    {
+        this._textEditor.performSearch(query);
+    },
+
+    searchCleared: function()
+    {
+        this._textEditor.searchCleared();
+    },
+
+    searchQueryWithSelection: function()
+    {
+        return this._textEditor.searchQueryWithSelection();
+    },
+
+    revealPreviousSearchResult: function(changeFocus)
+    {
+        this._textEditor.revealPreviousSearchResult(changeFocus);
+    },
+
+    revealNextSearchResult: function(changeFocus)
+    {
+        this._textEditor.revealNextSearchResult(changeFocus);
+    },
+
+    updateLayout: function()
+    {
+        this._textEditor.updateLayout();
+    },
+
+    // Private
+
+    _togglePrettyPrint: function(event)
+    {
+        var activated = !this._prettyPrintButtonNavigationItem.activated;
+        this._textEditor.formatted = activated;
+    },
+
+    _textEditorFormattingDidChange: function(event)
+    {
+        this._prettyPrintButtonNavigationItem.activated = this._textEditor.formatted;
+    },
+
+    _numberOfSearchResultsDidChange: function(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
+    }
+};
+
+WebInspector.TextContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TextEditor.css b/Source/WebInspectorUI/UserInterface/TextEditor.css
new file mode 100644
index 000000000..c9dfbb439
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TextEditor.css
@@ -0,0 +1,164 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.text-editor {
+    position: relative;
+
+    overflow: hidden;
+}
+
+.text-editor > .CodeMirror {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: auto;
+}
+
+.text-editor > .CodeMirror .has-breakpoint:not(.breakpoint-disabled) .CodeMirror-linenumber {
+    color: white;
+}
+
+.text-editor > .CodeMirror .has-breakpoint.multiple-breakpoints .CodeMirror-linenumber {
+    color: transparent;
+}
+
+.text-editor > .CodeMirror .has-breakpoint .CodeMirror-linenumber::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: -7px;
+
+    content: "";
+
+    z-index: -2;
+
+    border-image-source: -webkit-image-set(url(Images/BreakpointInactive.png) 1x, url(Images/BreakpointInactive@2x.png) 2x);
+    border-image-slice: 3 7 3 3 fill;
+    border-width: 3px 7px 3px 3px;
+}
+
+.text-editor > .CodeMirror .breakpoint-resolved .CodeMirror-linenumber::before {
+    border-image-source: -webkit-image-set(url(Images/Breakpoint.png) 1x, url(Images/Breakpoint@2x.png) 2x);
+}
+
+.text-editor > .CodeMirror .breakpoint-disabled .CodeMirror-linenumber::before {
+    opacity: 0.35;
+}
+
+.text-editor > .CodeMirror .has-breakpoint.multiple-breakpoints .CodeMirror-linenumber::before {
+    content: "•••";
+    color: white;
+    line-height: 6px;
+    text-align: center;
+    text-indent: -1px;
+}
+
+.text-editor > .CodeMirror .execution-line .CodeMirror-linenumber::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: -9px;
+    width: 9px;
+
+    content: "";
+
+    z-index: -1;
+
+    background-image: -webkit-image-set(url(Images/InstructionPointer.png) 1x, url(Images/InstructionPointer@2x.png) 2x);
+    background-size: 9px 100%;
+    background-repeat: no-repeat;
+}
+
+.text-editor > .CodeMirror .execution-line {
+    background-color: rgb(217, 234, 208) !important;
+}
+
+.text-editor .bouncy-highlight {
+    position: absolute;
+    z-index: 100;
+
+    box-shadow: inset rgb(250, 232, 140) 0 -1px 0, rgba(211, 197, 96, 1) 0 1px 1px, rgba(0, 0, 0, 0.33) 0 1px 2px 1px;
+    text-shadow: white 0 0 2px;
+
+    background: -webkit-linear-gradient(top, rgb(250, 237, 108), rgb(242, 220, 100));
+    border-radius: 7px;
+
+    padding: 2px 4px;
+    margin-top: -2px;
+    margin-left: -4px;
+
+    -webkit-user-select: none;
+    pointer-events: none;
+
+    -webkit-animation-name: text-editor-bouncy;
+    -webkit-animation-duration: 750ms;
+    -webkit-animation-timing-function: ease-in-out;
+
+    opacity: 0;
+}
+
+@-webkit-keyframes text-editor-bouncy {
+    0% {
+        -webkit-transform: scale(1);
+        opacity: 1;
+    }
+
+    12.5% {
+        -webkit-transform: scale(1.25);
+    }
+
+    25% {
+        -webkit-transform: scale(1);
+    }
+
+    62.5% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+.text-editor > .CodeMirror .highlighted {
+    -webkit-animation: "text-editor-highlight-fadeout" 2s;
+}
+
+@-webkit-keyframes text-editor-highlight-fadeout {
+    from { background-color: highlight; }
+}
+
+.text-editor > .CodeMirror .hovered-expression-highlight {
+    -webkit-animation: "text-editor-hovered-expression-highlight-fadeout" 2s;
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+@-webkit-keyframes text-editor-hovered-expression-highlight-fadeout {
+    from { background-color: highlight; }
+    to { background-color: rgba(0, 0, 0, 0.1); }
+}
diff --git a/Source/WebInspectorUI/UserInterface/TextEditor.js b/Source/WebInspectorUI/UserInterface/TextEditor.js
new file mode 100644
index 000000000..c83a9a05d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TextEditor.js
@@ -0,0 +1,1236 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TextEditor = function(element, mimeType, delegate)
+{
+    WebInspector.Object.call(this);
+
+    var text = (element ? element.textContent : "");
+    this._element = element || document.createElement("div");
+    this._element.classList.add(WebInspector.TextEditor.StyleClassName);
+    this._element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
+
+    this._readOnly = true;
+
+    this._codeMirror = CodeMirror(this.element, {
+        readOnly: this._readOnly,
+        indentWithTabs: true,
+        indentUnit: 4,
+        lineNumbers: true,
+        lineWrapping: true,
+        matchBrackets: true,
+        autoCloseBrackets: true
+    });
+
+    this._codeMirror.on("change", this._contentChanged.bind(this));
+    this._codeMirror.on("gutterClick", this._gutterMouseDown.bind(this));
+    this._codeMirror.getScrollerElement().addEventListener("click", this._openClickedLinks.bind(this), true);
+
+    this._completionController = new WebInspector.CodeMirrorCompletionController(this._codeMirror, this);
+    this._tokenTrackingController = new WebInspector.CodeMirrorTokenTrackingController(this._codeMirror, this);
+
+    this._initialStringNotSet = true;
+
+    this.mimeType = mimeType;
+
+    this._breakpoints = {};
+    this._executionLineNumber = NaN;
+    this._executionColumnNumber = NaN;
+
+    this._searchQuery = null;
+    this._searchResults = [];
+    this._currentSearchResultIndex = -1;
+
+    this._formatted = false
+    this._formatterSourceMap = null;
+
+    this._delegate = delegate || null;
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.TextEditor);
+
+WebInspector.TextEditor.StyleClassName = "text-editor";
+WebInspector.TextEditor.HighlightedStyleClassName = "highlighted";
+WebInspector.TextEditor.SearchResultStyleClassName = "search-result";
+WebInspector.TextEditor.HasBreakpointStyleClassName = "has-breakpoint";
+WebInspector.TextEditor.BreakpointResolvedStyleClassName = "breakpoint-resolved";
+WebInspector.TextEditor.BreakpointDisabledStyleClassName = "breakpoint-disabled";
+WebInspector.TextEditor.MultipleBreakpointsStyleClassName = "multiple-breakpoints";
+WebInspector.TextEditor.ExecutionLineStyleClassName = "execution-line";
+WebInspector.TextEditor.BouncyHighlightStyleClassName = "bouncy-highlight";
+WebInspector.TextEditor.NumberOfFindsPerSearchBatch = 10;
+WebInspector.TextEditor.HighlightAnimationDuration = 2000;
+
+WebInspector.TextEditor.Event = {
+    ExecutionLineNumberDidChange: "text-editor-execution-line-number-did-change",
+    NumberOfSearchResultsDidChange: "text-editor-number-of-search-results-did-change",
+    ContentDidChange: "text-editor-content-did-change",
+    FormattingDidChange: "text-editor-formatting-did-change"
+};
+
+WebInspector.TextEditor.prototype = {
+    constructor: WebInspector.TextEditor,
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get string()
+    {
+        return this._codeMirror.getValue();
+    },
+
+    set string(newString)
+    {
+        function update()
+        {
+            this._codeMirror.setValue(newString);
+
+            if (this._initialStringNotSet) {
+                this._codeMirror.clearHistory();
+                this._codeMirror.markClean();
+                delete this._initialStringNotSet;
+            }
+
+            // Automatically format the content.
+            if (this._autoFormat) {
+                console.assert(!this.formatted);
+                this.formatted = true;
+                delete this._autoFormat;
+            }
+
+            // Update the execution line now that we might have content for that line.
+            this._updateExecutionLine();
+
+            // Set the breakpoint styles now that we might have content for those lines.
+            for (var lineNumber in this._breakpoints)
+                this._setBreakpointStylesOnLine(lineNumber);
+
+            // Try revealing the pending line now that we might have content with enough lines.
+            this._revealPendingPositionIfPossible();
+        }
+
+        this._ignoreCodeMirrorContentDidChangeEvent = true;
+        this._codeMirror.operation(update.bind(this));
+        delete this._ignoreCodeMirrorContentDidChangeEvent;
+    },
+
+    get readOnly()
+    {
+        return this._codeMirror.getOption("readOnly") || false;
+    },
+
+    set readOnly(readOnly)
+    {
+        this._readOnly = readOnly;
+        this._updateCodeMirrorReadOnly();
+    },
+
+    get formatted()
+    {
+        return this._formatted;
+    },
+
+    set formatted(formatted)
+    {
+        if (this._formatted === formatted)
+            return;
+
+        console.assert(!formatted || this.canBeFormatted());
+        if (formatted && !this.canBeFormatted())
+            return;
+
+        this._ignoreCodeMirrorContentDidChangeEvent = true;
+        this._prettyPrint(formatted);
+        delete this._ignoreCodeMirrorContentDidChangeEvent;
+
+        this._formatted = formatted;
+        this._updateCodeMirrorReadOnly();
+
+        this.dispatchEventToListeners(WebInspector.TextEditor.Event.FormattingDidChange);
+    },
+
+    set autoFormat(auto)
+    {
+        this._autoFormat = auto;
+    },
+
+    hasFormatter: function()
+    {
+        const supportedModes = {
+            "javascript": true,
+            "css-base": true,
+        };
+
+        var mode = this._codeMirror.getMode();
+        return mode.name in supportedModes;
+    },
+
+    canBeFormatted: function()
+    {
+        // Can be overriden by subclasses.
+        return this.hasFormatter();
+    },
+
+    get selectedTextRange()
+    {
+        var start = this._codeMirror.getCursor(true);
+        var end = this._codeMirror.getCursor(false);
+        return this._textRangeFromCodeMirrorPosition(start, end);
+    },
+
+    set selectedTextRange(textRange)
+    {
+        var position = this._codeMirrorPositionFromTextRange(textRange);
+        this._codeMirror.setSelection(position.start, position.end);
+    },
+
+    get mimeType()
+    {
+        return this._mimeType;
+    },
+
+    set mimeType(newMIMEType)
+    {
+        this._mimeType = newMIMEType;
+        this._codeMirror.setOption("mode", newMIMEType);
+    },
+
+    get executionLineNumber()
+    {
+        return this._executionLineNumber;
+    },
+
+    set executionLineNumber(lineNumber)
+    {
+        // Only return early if there isn't a line handle and that isn't changing.
+        if (!this._executionLineHandle && isNaN(lineNumber))
+            return;
+
+        this._executionLineNumber = lineNumber;
+        this._updateExecutionLine();
+
+        // Still dispatch the event even if the number didn't change. The execution state still
+        // could have changed (e.g. continuing in a loop with a breakpoint inside).
+        this.dispatchEventToListeners(WebInspector.TextEditor.Event.ExecutionLineNumberDidChange);
+    },
+
+    get executionColumnNumber()
+    {
+        return this._executionColumnNumber;
+    },
+
+    set executionColumnNumber(columnNumber)
+    {
+        this._executionColumnNumber = columnNumber;
+    },
+
+    get formatterSourceMap()
+    {
+        return this._formatterSourceMap;
+    },
+
+    get tokenTrackingController()
+    {
+        return this._tokenTrackingController;
+    },
+
+    get delegate()
+    {
+        return this._delegate;
+    },
+
+    set delegate(newDelegate)
+    {
+        this._delegate = newDelegate || null;
+    },
+
+    get numberOfSearchResults()
+    {
+        return this._searchResults.length;
+    },
+
+    get currentSearchQuery()
+    {
+        return this._searchQuery;
+    },
+
+    set automaticallyRevealFirstSearchResult(reveal)
+    {
+        this._automaticallyRevealFirstSearchResult = reveal;
+
+        // If we haven't shown a search result yet, reveal one now.
+        if (this._automaticallyRevealFirstSearchResult && this._searchResults.length > 0) {
+            if (this._currentSearchResultIndex === -1)
+                this._revealFirstSearchResultAfterCursor();
+        }
+    },
+
+    performSearch: function(query)
+    {
+        if (this._searchQuery === query)
+            return;
+
+        this.searchCleared();
+
+        this._searchQuery = query;
+
+        // Allow subclasses to handle the searching if they have a better way.
+        // If we are formatted, just use CodeMirror's search.
+        if (typeof this.customPerformSearch === "function" && !this.formatted) {
+            if (this.customPerformSearch(query))
+                return;
+        }
+
+        // Go down the slow patch for all other text content.
+        var searchCursor = this._codeMirror.getSearchCursor(query, {line: 0, ch: 0}, true);
+        var boundBatchSearch = batchSearch.bind(this);
+        var numberOfSearchResultsDidChangeTimeout = null;
+
+        function reportNumberOfSearchResultsDidChange()
+        {
+            if (numberOfSearchResultsDidChangeTimeout) {
+                clearTimeout(numberOfSearchResultsDidChangeTimeout);
+                numberOfSearchResultsDidChangeTimeout = null;
+            }
+
+            this.dispatchEventToListeners(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange);
+        }
+
+        function batchSearch()
+        {
+            // Bail if the query changed since we started.
+            if (this._searchQuery !== query)
+                return;
+
+            var newSearchResults = [];
+            var foundResult = false;
+            for (var i = 0; i < WebInspector.TextEditor.NumberOfFindsPerSearchBatch && (foundResult = searchCursor.findNext()); ++i) {
+                var textRange = this._textRangeFromCodeMirrorPosition(searchCursor.from(), searchCursor.to());
+                newSearchResults.push(textRange);
+            }
+
+            this.addSearchResults(newSearchResults);
+
+            // Don't report immediately, coalesce updates so they come in no faster than half a second.
+            if (!numberOfSearchResultsDidChangeTimeout)
+                numberOfSearchResultsDidChangeTimeout = setTimeout(reportNumberOfSearchResultsDidChange.bind(this), 500);
+
+            if (foundResult) {
+                // More lines to search, set a timeout so we don't block the UI long.
+                setTimeout(boundBatchSearch, 50);
+            } else {
+                // Report immediately now that we are finished, canceling any pending update.
+                reportNumberOfSearchResultsDidChange.call(this);
+            }
+        }
+
+        // Start the search.
+        boundBatchSearch();
+    },
+
+    addSearchResults: function(textRanges)
+    {
+        console.assert(textRanges);
+        if (!textRanges || !textRanges.length)
+            return;
+
+        function markRanges()
+        {
+            for (var i = 0; i < textRanges.length; ++i) {
+                var position = this._codeMirrorPositionFromTextRange(textRanges[i]);
+                var mark = this._codeMirror.markText(position.start, position.end, {className: WebInspector.TextEditor.SearchResultStyleClassName});
+                this._searchResults.push(mark);
+            }
+
+            // If we haven't shown a search result yet, reveal one now.
+            if (this._automaticallyRevealFirstSearchResult) {
+                if (this._currentSearchResultIndex === -1)
+                    this._revealFirstSearchResultAfterCursor();
+            }
+        }
+
+        this._codeMirror.operation(markRanges.bind(this));
+    },
+
+    searchCleared: function()
+    {
+        function clearResults() {
+            for (var i = 0; i < this._searchResults.length; ++i)
+                this._searchResults[i].clear();
+        }
+
+        this._codeMirror.operation(clearResults.bind(this));
+
+        this._searchQuery = null;
+        this._searchResults = [];
+        this._currentSearchResultIndex = -1;
+    },
+
+    searchQueryWithSelection: function()
+    {
+        if (!this._codeMirror.somethingSelected())
+            return null;
+
+        return this._codeMirror.getSelection();
+    },
+
+    revealPreviousSearchResult: function(changeFocus)
+    {
+        if (!this._searchResults.length)
+            return;
+
+        if (this._currentSearchResultIndex === -1 || this._cursorDoesNotMatchLastRevealedSearchResult()) {
+            this._revealFirstSearchResultBeforeCursor(changeFocus);
+            return;
+        }
+
+        if (this._currentSearchResultIndex > 0)
+            --this._currentSearchResultIndex;
+        else
+            this._currentSearchResultIndex = this._searchResults.length - 1;
+
+        this._revealSearchResult(this._searchResults[this._currentSearchResultIndex], changeFocus, -1);
+    },
+
+    revealNextSearchResult: function(changeFocus)
+    {
+        if (!this._searchResults.length)
+            return;
+
+        if (this._currentSearchResultIndex === -1 || this._cursorDoesNotMatchLastRevealedSearchResult()) {
+            this._revealFirstSearchResultAfterCursor(changeFocus);
+            return;
+        }
+
+        if (this._currentSearchResultIndex + 1 < this._searchResults.length)
+            ++this._currentSearchResultIndex;
+        else
+            this._currentSearchResultIndex = 0;
+
+        this._revealSearchResult(this._searchResults[this._currentSearchResultIndex], changeFocus, 1);
+    },
+
+    line: function(lineNumber)
+    {
+        return this._codeMirror.getLine(lineNumber);
+    },
+
+    revealPosition: function(position, textRangeToSelect, forceUnformatted)
+    {
+        console.assert(position === undefined || position instanceof WebInspector.SourceCodePosition, "revealPosition called without a SourceCodePosition");
+        if (!(position instanceof WebInspector.SourceCodePosition))
+            return;
+
+        var lineHandle = this._codeMirror.getLineHandle(position.lineNumber);
+        if (!lineHandle || !this._visible || this._initialStringNotSet) {
+            // If we can't get a line handle or are not visible then we wait to do the reveal.
+            this._positionToReveal = position;
+            this._textRangeToSelect = textRangeToSelect;
+            this._forceUnformatted = forceUnformatted;
+            return;
+        }
+
+        // Delete now that the reveal is happening.
+        delete this._positionToReveal;
+        delete this._textRangeToSelect;
+        delete this._forceUnformatted;
+
+        // If we need to unformat, reveal the line after a wait.
+        // Otherwise the line highlight doesn't work properly.
+        if (this._formatted && forceUnformatted) {
+            this.formatted = false;
+            setTimeout(this.revealPosition.bind(this), 0, position, textRangeToSelect);
+            return;
+        }
+
+        if (!textRangeToSelect)
+            textRangeToSelect = new WebInspector.TextRange(position.lineNumber, position.columnNumber, position.lineNumber, position.columnNumber);
+
+        function removeStyleClass()
+        {
+            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.HighlightedStyleClassName);
+        }
+
+        function revealAndHighlightLine()
+        {
+            // If the line is not visible, reveal it as the center line in the editor.
+            var position = this._codeMirrorPositionFromTextRange(textRangeToSelect);
+            if (!this._isPositionVisible(position.start))
+                this._scrollIntoViewCentered(position.start);
+
+            this.selectedTextRange = textRangeToSelect;
+
+            this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.HighlightedStyleClassName);
+
+            // Use a timeout instead of a webkitAnimationEnd event listener because the line element might
+            // be removed if the user scrolls during the animation. In that case webkitAnimationEnd isn't
+            // fired, and the line would highlight again the next time it scrolls into view.
+            setTimeout(removeStyleClass.bind(this), WebInspector.TextEditor.HighlightAnimationDuration);
+        }
+
+        this._codeMirror.operation(revealAndHighlightLine.bind(this));
+    },
+
+    updateLayout: function(force)
+    {
+        this._codeMirror.refresh();
+    },
+
+    shown: function()
+    {
+        this._visible = true;
+
+        // Refresh since our size might have changed.
+        this._codeMirror.refresh();
+
+        // Try revealing the pending line now that we are visible.
+        // This needs to be done as a separate operation from the refresh
+        // so that the scrollInfo coordinates are correct.
+        this._revealPendingPositionIfPossible();
+    },
+
+    hidden: function()
+    {
+        this._visible = false;
+    },
+
+    setBreakpointInfoForLineAndColumn: function(lineNumber, columnNumber, breakpointInfo)
+    {
+        if (this._ignoreSetBreakpointInfoCalls)
+            return;
+
+        if (breakpointInfo)
+            this._addBreakpointToLineAndColumnWithInfo(lineNumber, columnNumber, breakpointInfo);
+        else
+            this._removeBreakpointFromLineAndColumn(lineNumber, columnNumber);
+    },
+
+    updateBreakpointLineAndColumn: function(oldLineNumber, oldColumnNumber, newLineNumber, newColumnNumber)
+    {
+        console.assert(this._breakpoints[oldLineNumber]);
+        if (!this._breakpoints[oldLineNumber])
+            return;
+
+        console.assert(this._breakpoints[oldLineNumber][oldColumnNumber]);
+        if (!this._breakpoints[oldLineNumber][oldColumnNumber])
+            return;
+
+        var breakpointInfo = this._breakpoints[oldLineNumber][oldColumnNumber];
+        this._removeBreakpointFromLineAndColumn(oldLineNumber, oldColumnNumber);
+        this._addBreakpointToLineAndColumnWithInfo(newLineNumber, newColumnNumber, breakpointInfo);
+    },
+
+    addStyleClassToLine: function(lineNumber, styleClassName)
+    {
+        var lineHandle = this._codeMirror.getLineHandle(lineNumber);
+        console.assert(lineHandle);
+        if (!lineHandle)
+            return;
+
+        return this._codeMirror.addLineClass(lineHandle, "wrap", styleClassName);
+    },
+
+    removeStyleClassFromLine: function(lineNumber, styleClassName)
+    {
+        var lineHandle = this._codeMirror.getLineHandle(lineNumber);
+        console.assert(lineHandle);
+        if (!lineHandle)
+            return;
+
+        return this._codeMirror.removeLineClass(lineHandle, "wrap", styleClassName);
+    },
+
+    toggleStyleClassForLine: function(lineNumber, styleClassName)
+    {
+        var lineHandle = this._codeMirror.getLineHandle(lineNumber);
+        console.assert(lineHandle);
+        if (!lineHandle)
+            return;
+
+        return this._codeMirror.toggleLineClass(lineHandle, "wrap", styleClassName);
+    },
+
+    // Private
+
+    _updateCodeMirrorReadOnly: function()
+    {
+        this._codeMirror.setOption("readOnly", this._readOnly || this._formatted);
+    },
+
+    _contentChanged: function(codeMirror, change)
+    {
+        if (this._ignoreCodeMirrorContentDidChangeEvent)
+            return;
+        this.dispatchEventToListeners(WebInspector.TextEditor.Event.ContentDidChange);
+    },
+
+    _textRangeFromCodeMirrorPosition: function(start, end)
+    {
+        console.assert(start);
+        console.assert(end);
+
+        return new WebInspector.TextRange(start.line, start.ch, end.line, end.ch);
+    },
+
+    _codeMirrorPositionFromTextRange: function(textRange)
+    {
+        console.assert(textRange);
+
+        var start = {line: textRange.startLine, ch: textRange.startColumn};
+        var end = {line: textRange.endLine, ch: textRange.endColumn};
+        return {start: start, end: end};
+    },
+
+    _revealPendingPositionIfPossible: function()
+    {
+        // Nothing to do if we don't have a pending position.
+        if (!this._positionToReveal)
+            return;
+
+        // Don't try to reveal unless we are visible.
+        if (!this._visible)
+            return;
+
+        this.revealPosition(this._positionToReveal, this._textRangeToSelect, this._forceUnformatted);
+    },
+
+    _revealSearchResult: function(result, changeFocus, directionInCaseOfRevalidation)
+    {
+        var position = result.find();
+
+        // Check for a valid position, it might have been removed from editing by the user.
+        // If the position is invalide, revalidate all positions reveal as needed.
+        if (!position) {
+            this._revalidateSearchResults(directionInCaseOfRevalidation);
+            return;
+        }
+
+        // If the line is not visible, reveal it as the center line in the editor.
+        if (!this._isPositionVisible(position.from))
+            this._scrollIntoViewCentered(position.from);
+
+        // Update the text selection to select the search result.
+        this.selectedTextRange = this._textRangeFromCodeMirrorPosition(position.from, position.to);
+
+        // Remove the automatically reveal state now that we have revealed a search result.
+        this._automaticallyRevealFirstSearchResult = false;
+
+        // Focus the editor if requested.
+        if (changeFocus)
+            this._codeMirror.focus();
+
+        // Remove the bouncy highlight if it is still around. The animation will not
+        // start unless we remove it and add it back to the document.
+        if (this._bouncyHighlightElement)
+            this._bouncyHighlightElement.remove();
+
+        // Create the bouncy highlight.
+        this._bouncyHighlightElement = document.createElement("div");
+        this._bouncyHighlightElement.className = WebInspector.TextEditor.BouncyHighlightStyleClassName;
+
+        // Collect info for the bouncy highlight.
+        var textContent = this._codeMirror.getSelection();
+        var coordinates = this._codeMirror.cursorCoords(true, "page");
+
+        // Adjust the coordinates to be based in the text editor's space.
+        var textEditorRect = this._element.getBoundingClientRect();
+        coordinates.top -= textEditorRect.top;
+        coordinates.left -= textEditorRect.left;
+
+        // Position and show the bouncy highlight.
+        this._bouncyHighlightElement.textContent = textContent;
+        this._bouncyHighlightElement.style.top = coordinates.top + "px";
+        this._bouncyHighlightElement.style.left = coordinates.left + "px";
+        this._element.appendChild(this._bouncyHighlightElement);
+
+        function animationEnded()
+        {
+            if (!this._bouncyHighlightElement)
+                return;
+
+            this._bouncyHighlightElement.remove();
+            delete this._bouncyHighlightElement;
+        }
+
+        // Listen for the end of the animation so we can remove the element.
+        this._bouncyHighlightElement.addEventListener("webkitAnimationEnd", animationEnded.bind(this));
+    },
+
+    _binarySearchInsertionIndexInSearchResults: function(object, comparator)
+    {
+        // It is possible that markers in the search results array may have been deleted.
+        // In those cases the comparator will return "null" and we immediately stop
+        // the binary search and return null. The search results list needs to be updated.
+        var array = this._searchResults;
+
+        var first = 0;
+        var last = array.length - 1;
+
+        while (first <= last) {
+            var mid = (first + last) >> 1;
+            var c = comparator(object, array[mid]);
+            if (c === null)
+                return null;
+            if (c > 0)
+                first = mid + 1;
+            else if (c < 0)
+                last = mid - 1;
+            else
+                return mid;
+        }
+
+        return first - 1;
+    },
+
+    _revealFirstSearchResultBeforeCursor: function(changeFocus)
+    {
+        console.assert(this._searchResults.length);
+
+        var currentCursorPosition = this._codeMirror.getCursor("start");
+        if (currentCursorPosition.line === 0 && currentCursorPosition.ch === 0) {
+            this._currentSearchResultIndex = this._searchResults.length - 1;
+            this._revealSearchResult(this._searchResults[this._currentSearchResultIndex], changeFocus, -1);
+            return;
+        }
+
+        var index = this._binarySearchInsertionIndexInSearchResults(currentCursorPosition, function(current, searchResult) {
+            var searchResultMarker = searchResult.find();
+            if (!searchResultMarker)
+                return null;
+            return WebInspector.compareCodeMirrorPositions(current, searchResultMarker.from);
+        });
+
+        if (index === null) {
+            this._revalidateSearchResults(-1);
+            return;
+        }
+
+        this._currentSearchResultIndex = index;
+        this._revealSearchResult(this._searchResults[this._currentSearchResultIndex], changeFocus);
+    },
+
+    _revealFirstSearchResultAfterCursor: function(changeFocus)
+    {
+        console.assert(this._searchResults.length);
+
+        var currentCursorPosition = this._codeMirror.getCursor("start");
+        if (currentCursorPosition.line === 0 && currentCursorPosition.ch === 0) {
+            this._currentSearchResultIndex = 0;
+            this._revealSearchResult(this._searchResults[this._currentSearchResultIndex], changeFocus, 1);
+            return;
+        }
+
+        var index = this._binarySearchInsertionIndexInSearchResults(currentCursorPosition, function(current, searchResult) {
+            var searchResultMarker = searchResult.find();
+            if (!searchResultMarker)
+                return null;
+            return WebInspector.compareCodeMirrorPositions(current, searchResultMarker.from);
+        });
+
+        if (index === null) {
+            this._revalidateSearchResults(1);
+            return;
+        }
+
+        if (index + 1 < this._searchResults.length)
+            ++index;
+        else
+            index = 0;
+
+        this._currentSearchResultIndex = index;
+        this._revealSearchResult(this._searchResults[this._currentSearchResultIndex], changeFocus);
+    },
+
+    _cursorDoesNotMatchLastRevealedSearchResult: function()
+    {
+        console.assert(this._currentSearchResultIndex !== -1);
+        console.assert(this._searchResults.length);
+
+        var lastRevealedSearchResultMarker = this._searchResults[this._currentSearchResultIndex].find();
+        if (!lastRevealedSearchResultMarker)
+            return true;
+
+        var currentCursorPosition = this._codeMirror.getCursor("start");
+        var lastRevealedSearchResultPosition = lastRevealedSearchResultMarker.from;
+
+        return WebInspector.compareCodeMirrorPositions(currentCursorPosition, lastRevealedSearchResultPosition) !== 0;
+    },
+
+    _revalidateSearchResults: function(direction)
+    {
+        console.assert(direction !== undefined);
+
+        this._currentSearchResultIndex = -1;
+
+        var updatedSearchResults = [];
+        for (var i = 0; i < this._searchResults.length; ++i) {
+            if (this._searchResults[i].find())
+                updatedSearchResults.push(this._searchResults[i]);
+        }
+
+        console.assert(updatedSearchResults.length !== this._searchResults.length);
+
+        this._searchResults = updatedSearchResults;
+        this.dispatchEventToListeners(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange);
+
+        if (this._searchResults.length) {
+            if (direction > 0)
+                this._revealFirstSearchResultAfterCursor();
+            else
+                this._revealFirstSearchResultBeforeCursor();
+        }
+    },
+
+    _updateExecutionLine: function()
+    {
+        function update()
+        {
+            if (this._executionLineHandle)
+                this._codeMirror.removeLineClass(this._executionLineHandle, "wrap", WebInspector.TextEditor.ExecutionLineStyleClassName);
+
+            this._executionLineHandle = !isNaN(this._executionLineNumber) ? this._codeMirror.getLineHandle(this._executionLineNumber) : null;
+
+            if (this._executionLineHandle)
+                this._codeMirror.addLineClass(this._executionLineHandle, "wrap", WebInspector.TextEditor.ExecutionLineStyleClassName);
+        }
+
+        this._codeMirror.operation(update.bind(this));
+    },
+
+    _setBreakpointStylesOnLine: function(lineNumber)
+    {
+        var columnBreakpoints = this._breakpoints[lineNumber];
+        console.assert(columnBreakpoints);
+        if (!columnBreakpoints)
+            return;
+
+        var allDisabled = true;
+        var allResolved = true;
+        var multiple = Object.keys(columnBreakpoints).length > 1;
+        for (var columnNumber in columnBreakpoints) {
+            var breakpointInfo = columnBreakpoints[columnNumber];
+            if (!breakpointInfo.disabled)
+                allDisabled = false;
+            if (!breakpointInfo.resolved)
+                allResolved = false;
+        }
+
+        function updateStyles()
+        {
+            // We might not have a line if the content isn't fully populated yet.
+            // This will be called again when the content is available.
+            var lineHandle = this._codeMirror.getLineHandle(lineNumber);
+            if (!lineHandle)
+                return;
+
+            this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.HasBreakpointStyleClassName);
+
+            if (allResolved)
+                this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointResolvedStyleClassName);
+            else
+                this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointResolvedStyleClassName);
+
+            if (allDisabled)
+                this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointDisabledStyleClassName);
+            else
+                this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointDisabledStyleClassName);
+
+            if (multiple)
+                this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.MultipleBreakpointsStyleClassName);
+            else
+                this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.MultipleBreakpointsStyleClassName);
+        }
+
+        this._codeMirror.operation(updateStyles.bind(this));
+    },
+
+    _addBreakpointToLineAndColumnWithInfo: function(lineNumber, columnNumber, breakpointInfo)
+    {
+        if (!this._breakpoints[lineNumber])
+            this._breakpoints[lineNumber] = {};
+        this._breakpoints[lineNumber][columnNumber] = breakpointInfo;
+
+        this._setBreakpointStylesOnLine(lineNumber);
+    },
+
+    _removeBreakpointFromLineAndColumn: function(lineNumber, columnNumber)
+    {
+        console.assert(columnNumber in this._breakpoints[lineNumber]);
+        delete this._breakpoints[lineNumber][columnNumber];
+
+        // There are still breakpoints on the line. Update the breakpoint style.
+        if (!isEmptyObject(this._breakpoints[lineNumber])) {
+            this._setBreakpointStylesOnLine(lineNumber);
+            return;
+        }
+
+        delete this._breakpoints[lineNumber];
+
+        function updateStyles()
+        {
+            var lineHandle = this._codeMirror.getLineHandle(lineNumber);
+            if (!lineHandle)
+                return;
+
+            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.HasBreakpointStyleClassName);
+            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointResolvedStyleClassName);
+            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointDisabledStyleClassName);
+            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.MultipleBreakpointsStyleClassName);
+        }
+
+        this._codeMirror.operation(updateStyles.bind(this));
+    },
+
+    _allColumnBreakpointInfoForLine: function(lineNumber)
+    {
+        return this._breakpoints[lineNumber];
+    },
+
+    _setColumnBreakpointInfoForLine: function(lineNumber, columnBreakpointInfo)
+    {
+        console.assert(columnBreakpointInfo);
+        this._breakpoints[lineNumber] = columnBreakpointInfo;
+        this._setBreakpointStylesOnLine(lineNumber);
+    },
+
+    _gutterMouseDown: function(codeMirror, lineNumber, gutterElement, event)
+    {
+        if (event.button !== 0 || event.ctrlKey)
+            return;
+
+        if (!this._codeMirror.hasLineClass(lineNumber, "wrap", WebInspector.TextEditor.HasBreakpointStyleClassName)) {
+            console.assert(!(lineNumber in this._breakpoints));
+
+            // No breakpoint, add a new one.
+            if (this._delegate && typeof this._delegate.textEditorBreakpointAdded === "function") {
+                var data = this._delegate.textEditorBreakpointAdded(this, lineNumber, 0);
+                if (data) {
+                    var breakpointInfo = data.breakpointInfo;
+                    if (breakpointInfo)
+                        this._addBreakpointToLineAndColumnWithInfo(data.lineNumber, data.columnNumber, breakpointInfo);
+                }
+            }
+
+            return;
+        }
+
+        console.assert(lineNumber in this._breakpoints);
+
+        if (this._codeMirror.hasLineClass(lineNumber, "wrap", WebInspector.TextEditor.MultipleBreakpointsStyleClassName)) {
+            console.assert(!isEmptyObject(this._breakpoints[lineNumber]));
+            return;
+        }
+
+        // Single existing breakpoint, start tracking it for dragging.
+        console.assert(Object.keys(this._breakpoints[lineNumber]).length === 1);
+        var columnNumber = Object.keys(this._breakpoints[lineNumber])[0];
+        this._draggingBreakpointInfo = this._breakpoints[lineNumber][columnNumber];
+        this._lineNumberWithMousedDownBreakpoint = lineNumber;
+        this._lineNumberWithDraggedBreakpoint = lineNumber;
+        this._columnNumberWithMousedDownBreakpoint = columnNumber;
+        this._columnNumberWithDraggedBreakpoint = columnNumber;
+
+        this._documentMouseMovedEventListener = this._documentMouseMoved.bind(this);
+        this._documentMouseUpEventListener = this._documentMouseUp.bind(this);
+
+        // Register these listeners on the document so we can track the mouse if it leaves the gutter.
+        document.addEventListener("mousemove", this._documentMouseMovedEventListener, true);
+        document.addEventListener("mouseup", this._documentMouseUpEventListener, true);
+    },
+
+    _documentMouseMoved: function(event)
+    {
+        console.assert("_lineNumberWithMousedDownBreakpoint" in this);
+        if (!("_lineNumberWithMousedDownBreakpoint" in this))
+            return;
+
+        event.preventDefault();
+
+        var lineNumber;
+        var position = this._codeMirror.coordsChar({left: event.pageX, top: event.pageY});
+
+        // CodeMirror's coordsChar returns a position even if it is outside the bounds. Nullify the position
+        // if the event is outside the bounds of the gutter so we will remove the breakpoint.
+        var gutterBounds = this._codeMirror.getGutterElement().getBoundingClientRect();
+        if (event.pageX < gutterBounds.left || event.pageX > gutterBounds.right || event.pageY < gutterBounds.top || event.pageY > gutterBounds.bottom)
+            position = null;
+
+        // If we have a position and it has a line then use it.
+        if (position && "line" in position)
+            lineNumber = position.line;
+
+        // The _lineNumberWithDraggedBreakpoint property can be undefined if the user drags
+        // outside of the gutter. The lineNumber variable can be undefined for the same reason.
+
+        if (lineNumber === this._lineNumberWithDraggedBreakpoint)
+            return;
+
+        // Record that the mouse dragged some so when mouse up fires we know to do the
+        // work of removing and moving the breakpoint.
+        this._mouseDragged = true;
+
+        if ("_lineNumberWithDraggedBreakpoint" in this) {
+            // We have a line that is currently showing the dragged breakpoint. Remove that breakpoint
+            // and restore the previous one (if any.)
+            if (this._previousColumnBreakpointInfo)
+                this._setColumnBreakpointInfoForLine(this._lineNumberWithDraggedBreakpoint, this._previousColumnBreakpointInfo);
+            else
+                this._removeBreakpointFromLineAndColumn(this._lineNumberWithDraggedBreakpoint, this._columnNumberWithDraggedBreakpoint);
+
+            delete this._previousColumnBreakpointInfo;
+            delete this._lineNumberWithDraggedBreakpoint;
+            delete this._columnNumberWithDraggedBreakpoint;
+        }
+
+        if (lineNumber !== undefined) {
+            // We have a new line that will now show the dragged breakpoint.
+            var newColumnBreakpoints = {};
+            var columnNumber = (lineNumber === this._lineNumberWithMousedDownBreakpoint ? this._columnNumberWithDraggedBreakpoint : 0)
+            newColumnBreakpoints[columnNumber] = this._draggingBreakpointInfo;
+            this._previousColumnBreakpointInfo = this._allColumnBreakpointInfoForLine(lineNumber);
+            this._setColumnBreakpointInfoForLine(lineNumber, newColumnBreakpoints);
+            this._lineNumberWithDraggedBreakpoint = lineNumber;
+            this._columnNumberWithDraggedBreakpoint = columnNumber;
+        }
+    },
+
+    _documentMouseUp: function(event)
+    {
+        console.assert("_lineNumberWithMousedDownBreakpoint" in this);
+        if (!("_lineNumberWithMousedDownBreakpoint" in this))
+            return;
+
+        event.preventDefault();
+
+        document.removeEventListener("mousemove", this._documentMouseMovedEventListener, true);
+        document.removeEventListener("mouseup", this._documentMouseUpEventListener, true);
+
+        const delegateImplementsBreakpointToggled = this._delegate && typeof this._delegate.textEditorBreakpointToggled === "function";
+        const delegateImplementsBreakpointRemoved = this._delegate && typeof this._delegate.textEditorBreakpointRemoved === "function";
+        const delegateImplementsBreakpointMoved = this._delegate && typeof this._delegate.textEditorBreakpointMoved === "function";
+
+        if (this._mouseDragged) {
+            if (!("_lineNumberWithDraggedBreakpoint" in this)) {
+                // The breakpoint was dragged off the gutter, remove it.
+                if (delegateImplementsBreakpointRemoved) {
+                    this._ignoreSetBreakpointInfoCalls = true;
+                    this._delegate.textEditorBreakpointRemoved(this, this._lineNumberWithMousedDownBreakpoint, this._columnNumberWithMousedDownBreakpoint);
+                    delete this._ignoreSetBreakpointInfoCalls;
+                }
+            } else if (this._lineNumberWithMousedDownBreakpoint !== this._lineNumberWithDraggedBreakpoint) {
+                // The dragged breakpoint was moved to a new line.
+
+                // If there is are breakpoints already at the drop line, tell the delegate to remove them.
+                // We have already updated the breakpoint info internally, so when the delegate removes the breakpoints
+                // and tells us to clear the breakpoint info, we can ignore those calls.
+                if (this._previousColumnBreakpointInfo && delegateImplementsBreakpointRemoved) {
+                    this._ignoreSetBreakpointInfoCalls = true;
+                    for (var columnNumber in this._previousColumnBreakpointInfo)
+                        this._delegate.textEditorBreakpointRemoved(this, this._lineNumberWithDraggedBreakpoint, columnNumber);
+                    delete this._ignoreSetBreakpointInfoCalls;
+                }
+
+                // Tell the delegate to move the breakpoint from one line to another.
+                if (delegateImplementsBreakpointMoved) {
+                    this._ignoreSetBreakpointInfoCalls = true;
+                    this._delegate.textEditorBreakpointMoved(this, this._lineNumberWithMousedDownBreakpoint, this._columnNumberWithMousedDownBreakpoint, this._lineNumberWithDraggedBreakpoint, this._columnNumberWithDraggedBreakpoint);
+                    delete this._ignoreSetBreakpointInfoCalls;
+                }
+            }
+        } else {
+            // Toggle the disabled state of the breakpoint.
+            console.assert(this._lineNumberWithMousedDownBreakpoint in this._breakpoints);
+            console.assert(this._columnNumberWithMousedDownBreakpoint in this._breakpoints[this._lineNumberWithMousedDownBreakpoint]);
+            if (this._lineNumberWithMousedDownBreakpoint in this._breakpoints && this._columnNumberWithMousedDownBreakpoint in this._breakpoints[this._lineNumberWithMousedDownBreakpoint] && delegateImplementsBreakpointToggled) {
+                var disabled = this._codeMirror.toggleLineClass(this._lineNumberWithMousedDownBreakpoint, "wrap", WebInspector.TextEditor.BreakpointDisabledStyleClassName);
+                this._breakpoints[this._lineNumberWithMousedDownBreakpoint][this._columnNumberWithMousedDownBreakpoint].disabled = disabled;
+                this._delegate.textEditorBreakpointToggled(this, this._lineNumberWithMousedDownBreakpoint, this._columnNumberWithMousedDownBreakpoint, disabled);
+            }
+        }
+
+        delete this._documentMouseMovedEventListener;
+        delete this._documentMouseUpEventListener;
+        delete this._lineNumberWithMousedDownBreakpoint;
+        delete this._lineNumberWithDraggedBreakpoint;
+        delete this._columnNumberWithMousedDownBreakpoint;
+        delete this._columnNumberWithDraggedBreakpoint;
+        delete this._previousColumnBreakpointInfo;
+        delete this._mouseDragged;
+    },
+
+    _openClickedLinks: function(event)
+    {
+        // Get the position in the text and the token at that position.
+        var position = this._codeMirror.coordsChar({left: event.pageX, top: event.pageY});
+        var tokenInfo = this._codeMirror.getTokenAt(position);
+        if (!tokenInfo || !tokenInfo.type || !tokenInfo.string)
+            return;
+
+        // If the token is not a link, then ignore it.
+        if (!/\blink\b/.test(tokenInfo.type))
+            return;
+
+        // The token string is the URL we should open. It might be a relative URL.
+        var url = tokenInfo.string;
+
+        // Get the base URL.
+        var baseURL = "";
+        if (this._delegate && typeof this._delegate.textEditorBaseURL === "function")
+            baseURL = this._delegate.textEditorBaseURL(this);
+
+        // Open the link after resolving the absolute URL from the base URL.
+        WebInspector.openURL(absoluteURL(url, baseURL));
+
+        // Stop processing the event.
+        event.preventDefault();
+        event.stopPropagation();
+    },
+
+    _isPositionVisible: function(position)
+    {
+        var scrollInfo = this._codeMirror.getScrollInfo();
+        var visibleRangeStart = scrollInfo.top;
+        var visibleRangeEnd = visibleRangeStart + scrollInfo.clientHeight;
+        var coords = this._codeMirror.charCoords(position, "local");
+
+        return coords.top >= visibleRangeStart && coords.bottom <= visibleRangeEnd;
+    },
+
+    _scrollIntoViewCentered: function(position)
+    {
+        var scrollInfo = this._codeMirror.getScrollInfo();
+        var lineHeight = Math.ceil(this._codeMirror.defaultTextHeight());
+        var margin = Math.floor((scrollInfo.clientHeight - lineHeight) / 2);
+        this._codeMirror.scrollIntoView(position, margin);
+    },
+
+    _prettyPrint: function(pretty)
+    {
+        function prettyPrintAndUpdateEditor()
+        {
+            const start = {line: 0, ch: 0};
+            const end = {line: this._codeMirror.lineCount() - 1};
+
+            var oldSelectionAnchor = this._codeMirror.getCursor("anchor");
+            var oldSelectionHead = this._codeMirror.getCursor("head");
+            var newSelectionAnchor, newSelectionHead;
+            var newExecutionLocation = null;
+
+            if (pretty) {
+                // <rdar://problem/10593948> Provide a way to change the tab width in the Web Inspector
+                const indentString = "    ";
+                var originalLineEndings = [];
+                var formattedLineEndings = [];
+                var mapping = {original: [0], formatted: [0]};
+                var builder = new FormatterContentBuilder(mapping, originalLineEndings, formattedLineEndings, 0, 0, indentString);
+                var formatter = new Formatter(this._codeMirror, builder);
+                formatter.format(start, end);
+
+                this._formatterSourceMap = WebInspector.FormatterSourceMap.fromBuilder(builder);
+
+                this._codeMirror.setValue(builder.formattedContent);
+
+                if (this._positionToReveal) {
+                    var newRevealPosition = this._formatterSourceMap.originalToFormatted(this._positionToReveal.lineNumber, this._positionToReveal.columnNumber);
+                    this._positionToReveal = new WebInspector.SourceCodePosition(newRevealPosition.lineNumber, newRevealPosition.columnNumber);
+                }
+
+                if (this._textRangeToSelect) {
+                    var mappedRevealSelectionStart = this._formatterSourceMap.originalToFormatted(this._textRangeToSelect.startLine, this._textRangeToSelect.startColumn);
+                    var mappedRevealSelectionEnd = this._formatterSourceMap.originalToFormatted(this._textRangeToSelect.endLine, this._textRangeToSelect.endColumn);
+                    this._textRangeToSelect = new WebInspector.TextRange(mappedRevealSelectionStart.lineNumber, mappedRevealSelectionStart.columnNumber, mappedRevealSelectionEnd.lineNumber, mappedRevealSelectionEnd.columnNumber);
+                }
+
+                if (!isNaN(this._executionLineNumber)) {
+                    console.assert(this._executionLineHandle);
+                    console.assert(!isNaN(this._executionColumnNumber));
+                    newExecutionLocation = this._formatterSourceMap.originalToFormatted(this._executionLineNumber, this._executionColumnNumber);
+                }
+
+                var mappedAnchorLocation = this._formatterSourceMap.originalToFormatted(oldSelectionAnchor.line, oldSelectionAnchor.ch);
+                var mappedHeadLocation = this._formatterSourceMap.originalToFormatted(oldSelectionHead.line, oldSelectionHead.ch);
+                newSelectionAnchor = {line:mappedAnchorLocation.lineNumber, ch:mappedAnchorLocation.columnNumber};
+                newSelectionHead = {line:mappedHeadLocation.lineNumber, ch:mappedHeadLocation.columnNumber};
+            } else {
+                this._codeMirror.undo();
+
+                if (this._positionToReveal) {
+                    var newRevealPosition = this._formatterSourceMap.formattedToOriginal(this._positionToReveal.lineNumber, this._positionToReveal.columnNumber);
+                    this._positionToReveal = new WebInspector.SourceCodePosition(newRevealPosition.lineNumber, newRevealPosition.columnNumber);
+                }
+
+                if (this._textRangeToSelect) {
+                    var mappedRevealSelectionStart = this._formatterSourceMap.formattedToOriginal(this._textRangeToSelect.startLine, this._textRangeToSelect.startColumn);
+                    var mappedRevealSelectionEnd = this._formatterSourceMap.formattedToOriginal(this._textRangeToSelect.endLine, this._textRangeToSelect.endColumn);
+                    this._textRangeToSelect = new WebInspector.TextRange(mappedRevealSelectionStart.lineNumber, mappedRevealSelectionStart.columnNumber, mappedRevealSelectionEnd.lineNumber, mappedRevealSelectionEnd.columnNumber);
+                }
+
+                if (!isNaN(this._executionLineNumber)) {
+                    console.assert(this._executionLineHandle);
+                    console.assert(!isNaN(this._executionColumnNumber));
+                    newExecutionLocation = this._formatterSourceMap.formattedToOriginal(this._executionLineNumber, this._executionColumnNumber);
+                }
+
+                var mappedAnchorLocation = this._formatterSourceMap.formattedToOriginal(oldSelectionAnchor.line, oldSelectionAnchor.ch);
+                var mappedHeadLocation = this._formatterSourceMap.formattedToOriginal(oldSelectionHead.line, oldSelectionHead.ch);
+                newSelectionAnchor = {line:mappedAnchorLocation.lineNumber, ch:mappedAnchorLocation.columnNumber};
+                newSelectionHead = {line:mappedHeadLocation.lineNumber, ch:mappedHeadLocation.columnNumber};
+
+                this._formatterSourceMap = null;
+            }
+
+            this._scrollIntoViewCentered(newSelectionAnchor);
+            this._codeMirror.setSelection(newSelectionAnchor, newSelectionHead);
+
+            if (newExecutionLocation) {
+                delete this._executionLineHandle;
+                this.executionColumnNumber = newExecutionLocation.columnNumber;
+                this.executionLineNumber = newExecutionLocation.lineNumber;
+            }
+
+            // FIXME: <rdar://problem/13129955> FindBanner: New searches should not lose search position (start from current selection/caret)
+            if (this.currentSearchQuery) {
+                var searchQuery = this.currentSearchQuery;
+                this.searchCleared();
+                // Set timeout so that this happens after the current CodeMirror operation.
+                // The editor has to update for the value and selection changes.
+                setTimeout(function(query) {
+                    this.performSearch(searchQuery);
+                }.bind(this), 0);
+            }
+
+            if (this._delegate && typeof this._delegate.textEditorUpdatedFormatting === "function")
+                this._delegate.textEditorUpdatedFormatting(this);
+        }
+
+        this._codeMirror.operation(prettyPrintAndUpdateEditor.bind(this));
+    }
+};
+
+WebInspector.TextEditor.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TextRange.js b/Source/WebInspectorUI/UserInterface/TextRange.js
new file mode 100644
index 000000000..f01156943
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TextRange.js
@@ -0,0 +1,161 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TextRange = function(startLineOrStartOffset, startColumnOrEndOffset, endLine, endColumn)
+{
+    WebInspector.Object.call(this);
+
+    if (arguments.length === 4) {
+        console.assert(startLineOrStartOffset <= endLine);
+        console.assert(startLineOrStartOffset !== endLine || startColumnOrEndOffset <= endColumn);
+
+        this._startLine = typeof startLineOrStartOffset === "number" ? startLineOrStartOffset : NaN;
+        this._startColumn = typeof startColumnOrEndOffset === "number" ? startColumnOrEndOffset : NaN;
+        this._endLine = typeof endLine === "number" ? endLine : NaN;
+        this._endColumn = typeof endColumn === "number" ? endColumn : NaN;
+
+        this._startOffset = NaN;
+        this._endOffset = NaN;
+    } else if (arguments.length === 2) {
+        console.assert(startLineOrStartOffset <= startColumnOrEndOffset);
+
+        this._startOffset = typeof startLineOrStartOffset === "number" ? startLineOrStartOffset : NaN;
+        this._endOffset = typeof startColumnOrEndOffset === "number" ? startColumnOrEndOffset : NaN;
+
+        this._startLine = NaN;
+        this._startColumn = NaN;
+        this._endLine = NaN;
+        this._endColumn = NaN;
+    }
+}
+
+WebInspector.TextRange.prototype = {
+    constructor: WebInspector.TextRange,
+
+    // Public
+
+    get startLine()
+    {
+        return this._startLine;
+    },
+
+    get startColumn()
+    {
+        return this._startColumn;
+    },
+
+    get endLine()
+    {
+        return this._endLine;
+    },
+
+    get endColumn()
+    {
+        return this._endColumn;
+    },
+
+    get startOffset()
+    {
+        return this._startOffset;
+    },
+
+    get endOffset()
+    {
+        return this._endOffset;
+    },
+
+    startPosition: function()
+    {
+        return new WebInspector.SourceCodePosition(this._startLine, this._startColumn);
+    },
+
+    endPosition: function()
+    {
+        return new WebInspector.SourceCodePosition(this._endLine, this._endColumn);
+    },
+
+    resolveLinesAndColumns: function(text)
+    {
+        console.assert(typeof text === "string");
+        if (typeof text !== "string")
+            return;
+
+        console.assert(!isNaN(this._startOffset));
+        console.assert(!isNaN(this._endOffset));
+        if (isNaN(this._startOffset) || isNaN(this._endOffset))
+            return;
+
+        function countNewLineCharacters(text)
+        {
+            var matches = text.match(/\n/g);
+            return matches ? matches.length : 0;
+        }
+
+        var startSubstring = text.substring(0, this._startOffset);
+        var rangeSubstring = text.substring(this._startOffset, this._endOffset);
+
+        var startNewLineCount = countNewLineCharacters(startSubstring);
+        var rangeNewLineCount = countNewLineCharacters(rangeSubstring);
+
+        this._startLine = startNewLineCount;
+        this._endLine = startNewLineCount + rangeNewLineCount;
+
+        var lastNewLineOffset = startNewLineCount ? startSubstring.lastIndexOf("\n") + 1 : 0;
+        this._startColumn = startSubstring.length - lastNewLineOffset;
+
+        lastNewLineOffset = rangeNewLineCount ? rangeSubstring.lastIndexOf("\n") + 1 : 0;
+        this._endColumn = rangeSubstring.length - lastNewLineOffset;
+
+        if (this._startLine === this._endLine)
+            this._endColumn += this._startColumn;
+    },
+
+    resolveOffsets: function(text)
+    {
+        console.assert(typeof text === "string");
+        if (typeof text !== "string")
+            return;
+
+        console.assert(!isNaN(this._startLine));
+        console.assert(!isNaN(this._startColumn));
+        console.assert(!isNaN(this._endLine));
+        console.assert(!isNaN(this._endColumn));
+        if (isNaN(this._startLine) || isNaN(this._startColumn) || isNaN(this._endLine) || isNaN(this._endColumn))
+            return;
+
+        var lastNewLineOffset = 0;
+        for (var i = 0; i < this._startLine; ++i)
+            lastNewLineOffset = text.indexOf("\n", lastNewLineOffset) + 1;
+
+        this._startOffset = lastNewLineOffset + this._startColumn;
+
+        for (var i = this._startLine; i < this._endLine; ++i)
+            lastNewLineOffset = text.indexOf("\n", lastNewLineOffset) + 1;
+
+        this._endOffset = lastNewLineOffset + this._endColumn;
+    }
+};
+
+WebInspector.TextRange.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TextResourceContentView.css b/Source/WebInspectorUI/UserInterface/TextResourceContentView.css
new file mode 100644
index 000000000..9921f5332
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TextResourceContentView.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.resource.text > .text-editor {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/TextResourceContentView.js b/Source/WebInspectorUI/UserInterface/TextResourceContentView.js
new file mode 100644
index 000000000..e3a9f9f16
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TextResourceContentView.js
@@ -0,0 +1,229 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TextResourceContentView = function(resource)
+{
+    WebInspector.ResourceContentView.call(this, resource, WebInspector.TextResourceContentView.StyleClassName);
+
+    resource.addEventListener(WebInspector.SourceCode.Event.ContentDidChange, this._sourceCodeContentDidChange, this);
+
+    this._textEditor = new WebInspector.SourceCodeTextEditor(resource);
+    this._textEditor.addEventListener(WebInspector.TextEditor.Event.ExecutionLineNumberDidChange, this._executionLineNumberDidChange, this);
+    this._textEditor.addEventListener(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange, this._numberOfSearchResultsDidChange, this);
+    this._textEditor.addEventListener(WebInspector.TextEditor.Event.ContentDidChange, this._textEditorContentDidChange, this);
+    this._textEditor.addEventListener(WebInspector.TextEditor.Event.FormattingDidChange, this._textEditorFormattingDidChange, this);
+    this._textEditor.addEventListener(WebInspector.SourceCodeTextEditor.Event.ContentWillPopulate, this._contentWillPopulate, this);
+    this._textEditor.addEventListener(WebInspector.SourceCodeTextEditor.Event.ContentDidPopulate, this._contentDidPopulate, this);
+
+    var toolTip = WebInspector.UIString("Pretty print");
+    var activatedToolTip = WebInspector.UIString("Original formatting");
+    this._prettyPrintButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("pretty-print", toolTip, activatedToolTip, "Images/NavigationItemCurleyBraces.pdf", 16, 16);
+    this._prettyPrintButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._togglePrettyPrint, this);
+    this._prettyPrintButtonNavigationItem.enabled = false; // Enabled when the text editor is populated with content.
+};
+
+WebInspector.TextResourceContentView.StyleClassName = "text";
+
+WebInspector.TextResourceContentView.prototype = {
+    constructor: WebInspector.TextResourceContentView,
+
+    // Public
+
+    get navigationItems()
+    {
+        return [this._prettyPrintButtonNavigationItem];
+    },
+
+    get managesOwnIssues()
+    {
+        // SourceCodeTextEditor manages the issues, we don't need ResourceContentView doing it.
+        return true;
+    },
+
+    get textEditor()
+    {
+        return this._textEditor;
+    },
+
+    get supplementalRepresentedObjects()
+    {
+        if (isNaN(this._textEditor.executionLineNumber))
+            return [];
+
+        // If the SourceCodeTextEditor has an executionLineNumber, we can assume
+        // it is always the active call frame.
+        return [WebInspector.debuggerManager.activeCallFrame];
+    },
+
+    revealPosition: function(position, textRangeToSelect, forceUnformatted)
+    {
+        this._textEditor.revealPosition(position, textRangeToSelect, forceUnformatted);
+    },
+
+    shown: function()
+    {
+        WebInspector.ResourceContentView.prototype.shown.call(this);
+
+        this._textEditor.shown();
+    },
+
+    hidden: function()
+    {
+        WebInspector.ResourceContentView.prototype.hidden.call(this);
+
+        this._textEditor.hidden();
+    },
+
+    closed: function()
+    {
+        WebInspector.ResourceContentView.prototype.closed.call(this);
+
+        this.resource.removeEventListener(WebInspector.SourceCode.Event.ContentDidChange, this._sourceCodeContentDidChange, this);
+
+        this._textEditor.close();
+    },
+
+    get supportsSave()
+    {
+        return true;
+    },
+
+    get saveData()
+    {
+        return {url: this.resource.url, content: this._textEditor.string};
+    },
+
+    get supportsSearch()
+    {
+        return true;
+    },
+
+    get numberOfSearchResults()
+    {
+        return this._textEditor.numberOfSearchResults;
+    },
+
+    get hasPerformedSearch()
+    {
+        return this._textEditor.currentSearchQuery !== null;
+    },
+
+    set automaticallyRevealFirstSearchResult(reveal)
+    {
+        this._textEditor.automaticallyRevealFirstSearchResult = reveal;
+    },
+
+    performSearch: function(query)
+    {
+        this._textEditor.performSearch(query);
+    },
+
+    searchCleared: function()
+    {
+        this._textEditor.searchCleared();
+    },
+
+    searchQueryWithSelection: function()
+    {
+        return this._textEditor.searchQueryWithSelection();
+    },
+
+    revealPreviousSearchResult: function(changeFocus)
+    {
+        this._textEditor.revealPreviousSearchResult(changeFocus);
+    },
+
+    revealNextSearchResult: function(changeFocus)
+    {
+        this._textEditor.revealNextSearchResult(changeFocus);
+    },
+
+    updateLayout: function()
+    {
+        this._textEditor.updateLayout();
+    },
+
+    // Private
+
+    _contentWillPopulate: function(event)
+    {
+        if (this._textEditor.element.parentNode === this.element)
+            return;
+
+        // Check the MIME-type for CSS since Resource.Type.Stylesheet also includes XSL, which we can't edit yet.
+        if (this.resource.type === WebInspector.Resource.Type.Stylesheet && this.resource.syntheticMIMEType === "text/css")
+            this._textEditor.readOnly = false;
+
+        // Allow editing any local file since edits can be saved and reloaded right from the Inspector.
+        if (this.resource.urlComponents.scheme === "file")
+            this._textEditor.readOnly = false;
+
+        this.element.removeChildren();
+        this.element.appendChild(this._textEditor.element);
+    },
+
+    _contentDidPopulate: function(event)
+    {
+        this._prettyPrintButtonNavigationItem.enabled = this._textEditor.canBeFormatted();
+    },
+
+    _togglePrettyPrint: function(event)
+    {
+        var activated = !this._prettyPrintButtonNavigationItem.activated;
+        this._textEditor.formatted = activated;
+    },
+
+    _textEditorFormattingDidChange: function(event)
+    {
+        this._prettyPrintButtonNavigationItem.activated = this._textEditor.formatted;
+    },
+
+    _sourceCodeContentDidChange: function(event)
+    {
+        if (this._ignoreSourceCodeContentDidChangeEvent)
+            return;
+
+        this._textEditor.string = this.resource.currentRevision.content;
+    },
+
+    _textEditorContentDidChange: function(event)
+    {
+        this._ignoreSourceCodeContentDidChangeEvent = true;
+        WebInspector.branchManager.currentBranch.revisionForRepresentedObject(this.resource).content = this._textEditor.string;
+        delete this._ignoreSourceCodeContentDidChangeEvent;
+    },
+
+    _executionLineNumberDidChange: function(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange);
+    },
+
+    _numberOfSearchResultsDidChange: function(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
+    }
+};
+
+WebInspector.TextResourceContentView.prototype.__proto__ = WebInspector.ResourceContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelineDataGrid.css b/Source/WebInspectorUI/UserInterface/TimelineDataGrid.css
new file mode 100644
index 000000000..784719067
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TimelineDataGrid.css
@@ -0,0 +1,126 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-data-grid-tree-outline {
+    position: relative;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    list-style: none;
+    font-family: "Lucida Grande", "Helvetica", sans-serif;
+    font-size: 11px;
+}
+
+.timeline-data-grid-tree-outline .item {
+    position: relative;
+    height: 36px;
+    line-height: 34px;
+    padding: 0 5px;
+    border-top: 1px solid transparent;
+    white-space: nowrap;
+}
+
+.timeline-data-grid-tree-outline > .children,
+.timeline-data-grid-tree-outline .disclosure-button,
+.timeline-data-grid-tree-outline .item .status {
+    display: none;
+}
+
+.timeline-data-grid-tree-outline .item .icon {
+    float: left;
+    width: 32px;
+    height: 32px;
+    margin-top: 1px;
+    margin-right: 3px;
+}
+
+.timeline-data-grid-tree-outline .item:hover {
+    color: white;
+    border-radius: 4px;
+    box-shadow: inset rgb(87, 152, 206) 0 1px 0;
+    background: -webkit-linear-gradient(top, rgb(110, 167, 216), rgb(36, 114, 181));
+    background-origin: padding-box;
+    background-clip: padding-box;
+    text-shadow: rgb(51, 88, 123) 0 1px 0;
+    -webkit-text-stroke: 0.4px;
+}
+
+.timeline-data-grid-tree-outline .item .titles {
+    position: relative;
+    top: 5px;
+    line-height: 11px;
+    padding-bottom: 1px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.timeline-data-grid-tree-outline .item .title::after {
+    content: "\A"; /* Newline */
+    white-space: pre;
+}
+
+.timeline-data-grid-tree-outline .item .subtitle {
+    font-size: 9px;
+    color: rgba(0, 0, 0, 0.7);
+}
+
+.timeline-data-grid-tree-outline .item:hover .subtitle {
+    color: white;
+}
+
+.timeline-data-grid-tree-outline .item .subtitle:empty {
+    display: none;
+}
+
+.timeline-data-grid-tree-outline .item.small {
+    height: 20px;
+}
+
+.timeline-data-grid-tree-outline .item.small .icon {
+    width: 16px;
+    height: 16px;
+}
+
+.timeline-data-grid-tree-outline .item.small .status {
+    margin-top: 1px;
+}
+
+.timeline-data-grid-tree-outline .item.small .titles {
+    top: 2px;
+    line-height: normal;
+}
+
+.timeline-data-grid-tree-outline .item.small .subtitle {
+    font-size: inherit;
+}
+
+.timeline-data-grid-tree-outline .item.small:not(.two-line) .title::after {
+    content: "";
+}
+
+.timeline-data-grid-tree-outline .item.small:not(.two-line) .subtitle::before {
+    content: " — ";
+}
diff --git a/Source/WebInspectorUI/UserInterface/TimelineDataGrid.js b/Source/WebInspectorUI/UserInterface/TimelineDataGrid.js
new file mode 100644
index 000000000..16eee6cb7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TimelineDataGrid.js
@@ -0,0 +1,267 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineDataGrid = function(columns, editCallback, deleteCallback)
+{
+    WebInspector.DataGrid.call(this, columns, editCallback, deleteCallback);
+
+    this.filterableColumns = [];
+
+    // Check if any of the cells can be filtered.
+    for (var identifier in columns) {
+        var scopeBar = columns[identifier].scopeBar;
+        if (!scopeBar)
+            continue;
+        this.filterableColumns.push(identifier);
+        scopeBar.columnIdenfifier = identifier;
+        scopeBar.addEventListener(WebInspector.ScopeBar.Event.SelectionChanged, this._scopeBarSelectedItemsDidChange, this);
+    }
+
+    if (this.filterableColumns.length > 1) {
+        console.error("Creating a TimelineDataGrid with more than one filterable column is not yet supported.");
+        return;
+    }
+
+    var items = [new WebInspector.FlexibleSpaceNavigationItem, this.columns[this.filterableColumns[0]].scopeBar];
+    this._navigationBar = new WebInspector.NavigationBar(null, items);
+    var container = this.element.appendChild(document.createElement("div"));
+    container.className = "navigation-bar-container";
+    container.appendChild(this._navigationBar.element);
+
+    this.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridSelectedNodeChanged, this);
+    window.addEventListener("resize", this._windowResized.bind(this));
+}
+
+WebInspector.TimelineDataGrid.DelayedPopoverShowTimeout = 250;
+WebInspector.TimelineDataGrid.DelayedPopoverHideContentClearTimeout = 500;
+
+WebInspector.TimelineDataGrid.Event = {
+    FiltersDidChange: "timelinedatagrid-filters-did-change"
+};
+
+WebInspector.TimelineDataGrid.prototype = {
+    constructor: WebInspector.TimelineDataGrid,
+
+    // Public
+
+    get currentCalculator()
+    {
+        // Implemented by subclasses if they have a graph.
+        return null;
+    },
+
+    updateCalculatorBoundariesWithRecord: function(record)
+    {
+        // Implemented by subclasses if they have a graph.
+    },
+
+    updateCalculatorBoundariesWithDataGridNode: function(node)
+    {
+        // Implemented by subclasses if they have a graph.
+    },
+
+    updateCalculatorBoundariesWithEventMarker: function(eventMarker)
+    {
+        // Implemented by subclasses if they have a graph.
+    },
+
+    reset: function()
+    {
+        // May be overridden by subclasses. If so, they should call the superclass.
+
+        this._hidePopover();
+    },
+
+    shown: function()
+    {
+        // Implemented by subclasses.
+    },
+
+    hidden: function()
+    {
+        // May be overridden by subclasses. If so, they should call the superclass.
+
+        this._hidePopover();
+    },
+
+    update: function()
+    {
+        // Implemented by subclasses.
+    },
+
+    addTimelineEventMarker: function(eventMarker)
+    {
+        // Implemented by subclasses.
+    },
+
+    callFramePopoverAnchorElement: function()
+    {
+        // Implemented by subclasses.
+        return null;
+    },
+
+    updateLayout: function()
+    {
+        WebInspector.DataGrid.prototype.updateLayout.call(this);
+
+        this._navigationBar.updateLayout();
+    },
+
+    // Private
+
+    _scopeBarSelectedItemsDidChange: function(event)
+    {
+        var columnIdentifier = event.target.columnIdenfifier;
+        this.dispatchEventToListeners(WebInspector.TimelineDataGrid.Event.FiltersDidChange, {columnIdentifier: columnIdentifier});
+    },
+
+    _dataGridSelectedNodeChanged: function(event)
+    {
+        if (!this.selectedNode) {
+            this._hidePopover();
+            return;
+        }
+
+        var record = this.selectedNode.record;
+        if (!record || !record.callFrames || !record.callFrames.length) {
+            this._hidePopover();
+            return;
+        }
+
+        this._showPopoverForSelectedNodeSoon();
+    },
+
+    _windowResized: function(event)
+    {
+        if (this._popover && this._popover.visible)
+            this._updatePopoverForSelectedNode(false);
+    },
+
+    _showPopoverForSelectedNodeSoon: function()
+    {
+        if (this._showPopoverTimeout)
+            return;
+
+        function delayedWork()
+        {
+            if (!this._popover)
+                this._popover = new WebInspector.Popover;
+
+            this._updatePopoverForSelectedNode(true);
+        }
+
+        this._showPopoverTimeout = setTimeout(delayedWork.bind(this), WebInspector.TimelineDataGrid.DelayedPopoverShowTimeout);
+    },
+
+    _hidePopover: function()
+    {
+        if (this._showPopoverTimeout) {
+            clearTimeout(this._showPopoverTimeout);
+            delete this._showPopoverTimeout;
+        }
+
+        if (this._popover)
+            this._popover.dismiss();
+
+        function delayedWork()
+        {
+            if (this._popoverCallStackTreeOutline)
+                this._popoverCallStackTreeOutline.removeChildren();
+        }
+
+        if (this._hidePopoverContentClearTimeout)
+            clearTimeout(this._hidePopoverContentClearTimeout);
+        this._hidePopoverContentClearTimeout = setTimeout(delayedWork.bind(this), WebInspector.TimelineDataGrid.DelayedPopoverHideContentClearTimeout);
+    },
+
+    _updatePopoverForSelectedNode: function(updateContent)
+    {
+        if (!this._popover || !this.selectedNode)
+            return;
+
+        var targetPopoverElement = this.callFramePopoverAnchorElement();
+        console.assert(targetPopoverElement, "TimelineDataGrid subclass should always return a valid element from callFramePopoverAnchorElement.");
+        if (!targetPopoverElement)
+            return;
+
+        var targetFrame = WebInspector.Rect.rectFromClientRect(targetPopoverElement.getBoundingClientRect());
+
+        // The element might be hidden if it does not have a width and height.
+        if (!targetFrame.size.width && !targetFrame.size.height)
+            return;
+
+        if (this._hidePopoverContentClearTimeout) {
+            clearTimeout(this._hidePopoverContentClearTimeout);
+            delete this._hidePopoverContentClearTimeout;
+        }
+
+        const padding = 2;
+        targetFrame.origin.x -= padding;
+        targetFrame.origin.y -= padding;
+        targetFrame.size.width += padding * 2;
+        targetFrame.size.height += padding * 2;
+
+        if (updateContent)
+            this._popover.content = this._createPopoverContent();
+
+        this._popover.present(targetFrame, [WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MIN_Y, WebInspector.RectEdge.MAX_X]);
+    },
+
+    _createPopoverContent: function()
+    {
+        if (!this._popoverCallStackTreeOutline) {
+            var contentElement = document.createElement("ol");
+            contentElement.classList.add("timeline-data-grid-tree-outline");
+            this._popoverCallStackTreeOutline = new TreeOutline(contentElement);
+            this._popoverCallStackTreeOutline.onselect = this._popoverCallStackTreeElementSelected.bind(this);
+        } else
+            this._popoverCallStackTreeOutline.removeChildren();
+
+        var callFrames = this.selectedNode.record.callFrames;
+        for (var i = 0 ; i < callFrames.length; ++i) {
+            var callFrameTreeElement = new WebInspector.CallFrameTreeElement(callFrames[i]);
+            this._popoverCallStackTreeOutline.appendChild(callFrameTreeElement);
+        }
+
+        var content = document.createElement("div");
+        content.className = "timeline-data-grid-popover";
+        content.appendChild(this._popoverCallStackTreeOutline.element);
+        return content;
+    },
+
+    _popoverCallStackTreeElementSelected: function(treeElement, selectedByUser)
+    {
+        this._popover.dismiss();
+
+        console.assert(treeElement instanceof WebInspector.CallFrameTreeElement, "TreeElements in TimelineDataGrid popover should always be CallFrameTreeElements");
+        var callFrame = treeElement.callFrame;
+        if (!callFrame.sourceCodeLocation)
+            return;
+
+        WebInspector.resourceSidebarPanel.showSourceCodeLocation(callFrame.sourceCodeLocation);
+    }
+}
+
+WebInspector.TimelineDataGrid.prototype.__proto__ = WebInspector.DataGrid.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelineDecorations.css b/Source/WebInspectorUI/UserInterface/TimelineDecorations.css
new file mode 100644
index 000000000..01c465c05
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TimelineDecorations.css
@@ -0,0 +1,106 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-decorations {
+    position: relative;
+    pointer-events: none;
+}
+
+.timeline-decorations > .header {
+    border-top: 1px solid rgb(200, 200, 200);
+
+    height: 22px;
+
+    position: relative;
+}
+
+.timeline-decorations > .header > .divider {
+    position: absolute;
+    width: 1px;
+    top: 0;
+    bottom: 0;
+    background-image: -webkit-linear-gradient(top, rgba(200, 200, 200, 1), rgba(200, 200, 200, 0) 85%);
+}
+
+.timeline-decorations > .header > .divider:first-child,
+.timeline-decorations > .header > .divider:last-child {
+    background-image: none;
+}
+
+.timeline-decorations > .header > .divider > .label {
+    position: absolute;
+    top: 3px;
+    right: 4px;
+    font-size: 9px;
+    font-family: "Lucida Grande", sans-serif;
+    color: rgb(128, 128, 128);
+    white-space: nowrap;
+}
+
+.timeline-decorations > .header > .divider:first-child > .label {
+    display: none;
+}
+
+.timeline-decorations > .event-markers {
+    position: absolute;
+    top: 22px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.timeline-decorations > .event-markers > .event-marker-tooltip {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+
+    width: 9px;
+
+    pointer-events: auto;
+}
+
+.timeline-decorations > .event-markers > .event-marker {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+
+    margin-left: 4px;
+
+    border-left-width: 1px;
+    border-left-style: dashed;
+    border-left-color: rgba(128, 128, 128, 0.5);
+}
+
+.timeline-decorations > .event-markers > .event-marker.load-event {
+    border-left-color: rgba(255, 0, 0, 0.5);
+}
+
+.timeline-decorations > .event-markers > .event-marker.dom-content-event {
+    border-left-color: rgba(0, 0, 255, 0.5);
+}
+
+.timeline-decorations > .event-markers > .event-marker.timestamp {
+    border-left-color: rgba(0, 110, 0, 0.5);
+}
diff --git a/Source/WebInspectorUI/UserInterface/TimelineDecorations.js b/Source/WebInspectorUI/UserInterface/TimelineDecorations.js
new file mode 100644
index 000000000..3a0439e8f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TimelineDecorations.js
@@ -0,0 +1,204 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineDecorations = function()
+{
+    WebInspector.Object.call(this);
+
+    this._element = document.createElement("div");
+    this._element.className = WebInspector.TimelineDecorations.StyleClassName;
+
+    this._headerElement = document.createElement("div");
+    this._headerElement.className = WebInspector.TimelineDecorations.HeaderElementStyleClassName;
+    this._element.appendChild(this._headerElement);
+
+    this._markersElement = document.createElement("div");
+    this._markersElement.className = WebInspector.TimelineDecorations.EventMarkersElementStyleClassName
+    this._element.appendChild(this._markersElement);
+
+    this.clear();
+}
+
+WebInspector.TimelineDecorations.StyleClassName = "timeline-decorations";
+WebInspector.TimelineDecorations.HeaderElementStyleClassName = "header";
+WebInspector.TimelineDecorations.DividerElementStyleClassName = "divider";
+WebInspector.TimelineDecorations.DividerLabelElementStyleClassName = "label";
+
+WebInspector.TimelineDecorations.EventMarkersElementStyleClassName = "event-markers";
+WebInspector.TimelineDecorations.EventMarkerTooltipElementStyleClassName = "event-marker-tooltip";
+WebInspector.TimelineDecorations.BaseEventMarkerElementStyleClassName = "event-marker";
+
+WebInspector.TimelineDecorations.prototype = {
+    constructor: WebInspector.TimelineDecorations,
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get headerElement()
+    {
+        return this._headerElement
+    },
+
+    clear: function()
+    {
+        this._eventMarkers = [];
+        this._markersElement.removeChildren();
+    },
+
+    updateHeaderTimes: function(boundarySpan, leftPadding, rightPadding, force)
+    {
+        if (!this.isShowingHeaderDividers())
+            return;
+
+        if (isNaN(boundarySpan))
+            return;
+
+        leftPadding = leftPadding || 0;
+        rightPadding = rightPadding || 0;
+
+        var clientWidth = this._headerElement.clientWidth;
+        var leftVisibleEdge = leftPadding;
+        var rightVisibleEdge = clientWidth - rightPadding;
+        var visibleWidth = rightVisibleEdge - leftVisibleEdge;
+        if (visibleWidth <= 0)
+            return;
+
+        var dividerCount = Math.round(visibleWidth / 64);
+        var slice = boundarySpan / dividerCount;
+        if (!force && this._currentDividerSlice === slice)
+            return;
+
+        this._currentDividerSlice = slice;
+
+        var dividerElement = this._headerElement.firstChild;
+        for (var i = 0; i <= dividerCount; ++i) {
+            if (!dividerElement) {
+                dividerElement = document.createElement("div");
+                dividerElement.className = WebInspector.TimelineDecorations.DividerElementStyleClassName;
+                this._headerElement.appendChild(dividerElement);
+
+                var labelElement = document.createElement("div");
+                labelElement.className = WebInspector.TimelineDecorations.DividerLabelElementStyleClassName;
+                dividerElement._labelElement = labelElement;
+                dividerElement.appendChild(labelElement);
+            }
+
+            var left = visibleWidth * (i / dividerCount);
+            var totalLeft = left + leftVisibleEdge;
+            var fractionLeft = totalLeft / clientWidth;
+            var percentLeft = 100 * fractionLeft;
+            var time = fractionLeft * boundarySpan;
+
+            var currentPercentLeft = parseFloat(dividerElement.style.left);
+            if (isNaN(currentPercentLeft) || Math.abs(currentPercentLeft - percentLeft) >= 0.1)
+                dividerElement.style.left = percentLeft + "%";
+
+            dividerElement._labelElement.textContent = isNaN(slice) ? "" : Number.secondsToString(time);
+            dividerElement = dividerElement.nextSibling;
+        }
+
+        // Remove extra dividers.
+        while (dividerElement) {
+            var nextDividerElement = dividerElement.nextSibling;
+            this._headerElement.removeChild(dividerElement);
+            dividerElement = nextDividerElement;
+        }
+    },
+
+    updateEventMarkers: function(minimumBoundary, maximumBoundary)
+    {
+        this._markersElement.removeChildren();
+
+        if (!this._eventMarkers.length)
+            return;
+
+        var boundarySpan = maximumBoundary - minimumBoundary;
+        if (isNaN(boundarySpan))
+            return;
+
+        function toolTipForEventMarker(eventMarker, time)
+        {
+            switch (eventMarker.type) {
+            case WebInspector.TimelineEventMarker.Type.LoadEvent:
+                return WebInspector.UIString("Load event fired at %s").format(Number.secondsToString(time));
+            case WebInspector.TimelineEventMarker.Type.DOMContentEvent:
+                return WebInspector.UIString("DOMContent event fired at %s").format(Number.secondsToString(time));
+            case WebInspector.TimelineEventMarker.Type.TimeStamp:
+                return WebInspector.UIString("Timestamp marker at %s").format(Number.secondsToString(time));
+            default:
+                console.assert(false);
+                return "";
+            }
+        }
+
+        for (var i = 0; i < this._eventMarkers.length; ++i) {
+            var eventMarker = this._eventMarkers[i];
+            if (eventMarker.timestamp < minimumBoundary || eventMarker.timestamp > maximumBoundary)
+                continue;
+
+            var time = eventMarker.timestamp - minimumBoundary;
+            var percentLeft = (100 * time) / boundarySpan;
+
+            var tooltipElement = document.createElement("div");
+            tooltipElement.className = WebInspector.TimelineDecorations.EventMarkerTooltipElementStyleClassName;
+            tooltipElement.title = toolTipForEventMarker(eventMarker, time);
+            tooltipElement.style.left = percentLeft + "%";
+
+            var markerElement = document.createElement("div");
+            markerElement.className = WebInspector.TimelineDecorations.BaseEventMarkerElementStyleClassName;
+            markerElement.classList.add(eventMarker.type);
+            markerElement.style.left = percentLeft + "%";
+
+            this._markersElement.appendChild(markerElement);
+            this._markersElement.appendChild(tooltipElement);
+        }
+    },
+
+    isShowingHeaderDividers: function()
+    {
+        return !this._headerElement.classList.contains("hidden");
+    },
+
+    showHeaderDividers: function()
+    {
+        this._headerElement.classList.remove("hidden");
+    },
+
+    hideHeaderDividers: function()
+    {
+        this._headerElement.classList.add("hidden");
+    },
+
+    addTimelineEventMarker: function(eventMarker)
+    {
+        this._eventMarkers.push(eventMarker);
+    },
+}
+
+WebInspector.TimelineDecorations.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelineEventMarker.js b/Source/WebInspectorUI/UserInterface/TimelineEventMarker.js
new file mode 100644
index 000000000..16baaef6c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TimelineEventMarker.js
@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineEventMarker = function(timestamp, type)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(timestamp);
+    console.assert(type);
+
+    this._timestamp = timestamp;
+    this._type = type;
+};
+
+WebInspector.TimelineEventMarker.Type = {
+    LoadEvent: "load-event",
+    DOMContentEvent: "dom-content-event",
+    TimeStamp: "timestamp"
+}
+
+WebInspector.TimelineEventMarker.prototype = {
+    constructor: WebInspector.TimelineEventMarker,
+
+    // Public
+
+    get timestamp()
+    {
+        return this._timestamp;
+    },
+
+    get type()
+    {
+        return this._type;
+    }
+};
+
+WebInspector.TimelineEventMarker.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelineManager.js b/Source/WebInspectorUI/UserInterface/TimelineManager.js
new file mode 100644
index 000000000..21f1d3e1b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TimelineManager.js
@@ -0,0 +1,434 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineManager = function()
+{
+    WebInspector.Object.call(this);
+
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ProvisionalLoadStarted, this._startAutoRecording, this);
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
+
+    this._recording = false;
+    this._records = [];
+    this._typeRecords = {};
+    this._loadEventTime = NaN;
+    this._eventMarkers = [];
+};
+
+WebInspector.TimelineManager.Event = {
+    RecordsCleared: "timeline-manager-records-cleared",
+    RecordingStarted: "timeline-manager-recording-started",
+    RecordingStopped: "timeline-manager-recording-stopped",
+    RecordAdded: "timeline-manager-record-added",
+    RecordedEventMarker: "timeline-manager-recorded-event-marker",
+};
+
+WebInspector.TimelineManager.MaximumAutoRecordDuration = 90000; // 90 seconds
+WebInspector.TimelineManager.MaximumAutoRecordDurationAfterLoadEvent = 10000; // 10 seconds
+WebInspector.TimelineManager.DeadTimeRequiredToStopAutoRecordingEarly = 2000; // 2 seconds
+
+WebInspector.TimelineManager.prototype = {
+    constructor: WebInspector.TimelineManager,
+
+    // Public
+
+    get recording()
+    {
+        return this._recording;
+    },
+
+    get mainFrameLoadEventTime()
+    {
+        return this._loadEventTime;
+    },
+
+    get timelineEventMarkers()
+    {
+        return this._eventMarkers;
+    },
+
+    get records()
+    {
+        return this._records;
+    },
+
+    recordsWithType: function(type)
+    {
+        return this._typeRecords[type] || [];
+    },
+
+    startRecording: function()
+    {
+        if (this._recording)
+            return;
+
+        this._clear();
+
+        this._recording = true;
+
+        TimelineAgent.start();
+
+        this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordingStarted);
+    },
+
+    stopRecording: function()
+    {
+        if (!this._recording)
+            return;
+
+        if (this._stopRecordingTimeout) {
+            clearTimeout(this._stopRecordingTimeout);
+            delete this._stopRecordingTimeout;
+        }
+
+        if (this._deadTimeTimeout) {
+            clearTimeout(this._deadTimeTimeout);
+            delete this._deadTimeTimeout;
+        }
+
+        TimelineAgent.stop();
+
+        this._recording = false;
+        this._autoRecordingMainResource = null;
+
+        this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordingStopped);
+    },
+
+    eventRecorded: function(originalRecord)
+    {
+        // Called from WebInspector.TimelineObserver.
+
+        if (!this._recording)
+            return;
+
+        function processRecord(record, parentRecord)
+        {
+            // Convert the timestamps to seconds to match the resource timestamps.
+            var startTime = record.startTime / 1000;
+            var endTime = record.endTime / 1000;
+
+            var callFrames = this._callFramesFromPayload(record.stackTrace);
+
+            switch (record.type) {
+            case "MarkLoad":
+                var mainFrame = WebInspector.frameResourceManager.mainFrame;
+                console.assert(mainFrame);
+
+                if (!mainFrame || record.frameId !== mainFrame.id)
+                    break;
+
+                this._loadEventTime = startTime;
+
+                var eventMarker = new WebInspector.TimelineEventMarker(startTime, WebInspector.TimelineEventMarker.Type.LoadEvent);
+                this._eventMarkers.push(eventMarker);
+                this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordedEventMarker, {eventMarker: eventMarker});
+                this._stopAutoRecordingSoon();
+                break;
+            case "MarkDOMContent":
+                var mainFrame = WebInspector.frameResourceManager.mainFrame;
+                console.assert(mainFrame);
+
+                if (!mainFrame || record.frameId !== mainFrame.id)
+                    break;
+
+                var eventMarker = new WebInspector.TimelineEventMarker(startTime, WebInspector.TimelineEventMarker.Type.DOMContentEvent);
+                this._eventMarkers.push(eventMarker);
+                this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordedEventMarker, {eventMarker: eventMarker});
+                break;
+            case "ScheduleStyleRecalculation":
+                console.assert(isNaN(endTime));
+                // Pass the startTime as the endTime since this record type has no duration.
+                this._addRecord(new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.InvalidateStyles, startTime, startTime, callFrames));
+                break;
+            case "RecalculateStyles":
+                this._addRecord(new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.RecalculateStyles, startTime, endTime, callFrames));
+                break;
+            case "InvalidateLayout":
+                console.assert(isNaN(endTime));
+                // Pass the startTime as the endTime since this record type has no duration.
+                this._addRecord(new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.InvalidateLayout, startTime, startTime, callFrames));
+                break;
+            case "Layout":
+                // COMPATIBILITY (iOS 6): Layout records did not contain area properties. This is not exposed via a quad "root".
+                var quad = record.data.root ? new WebInspector.Quad(record.data.root) : null;
+                if (quad)
+                    this._addRecord(new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.Layout, startTime, endTime, callFrames, quad.points[0].x, quad.points[0].y, quad.width, quad.height, quad));
+                else
+                    this._addRecord(new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.Layout, startTime, endTime, callFrames));
+                break;
+            case "Paint":
+                // COMPATIBILITY (iOS 6): Paint records data contained x, y, width, height properties. This became a quad "clip".
+                var quad = record.data.clip ? new WebInspector.Quad(record.data.clip) : null;
+                if (quad)
+                    this._addRecord(new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.Paint, startTime, endTime, callFrames, null, null, quad.width, quad.height, quad));
+                else
+                    this._addRecord(new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.Paint, startTime, endTime, callFrames, record.data.x, record.data.y, record.data.width, record.data.height));
+                break;
+            case "EvaluateScript":
+                var resource = WebInspector.frameResourceManager.resourceForURL(record.data.url);
+
+                // The lineNumber is 1-based, but we expect 0-based.
+                var lineNumber = record.data.lineNumber - 1;
+
+                switch (parent ? parent.type : null) {
+                case "TimerFire":
+                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.TimerFired, startTime, endTime, parent.data.timerId, resource, lineNumber, callFrames));
+                    break;
+                default:
+                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.ScriptEvaluated, startTime, endTime, null, resource, lineNumber, callFrames));
+                    break;
+                }
+
+                break;
+            case "TimeStamp":
+                var eventMarker = new WebInspector.TimelineEventMarker(startTime, WebInspector.TimelineEventMarker.Type.TimeStamp);
+                this._eventMarkers.push(eventMarker);
+                this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordedEventMarker, {eventMarker: eventMarker});
+                break;
+            case "FunctionCall":
+                // FunctionCall always happens as a child of another record, and since the FunctionCall record
+                // has useful info we just make the timeline record here (combining the data from both records).
+                if (!parent)
+                    break;
+
+                var resource = WebInspector.frameResourceManager.resourceForURL(record.data.scriptName);
+
+                // The scriptLine is 1-based, but we expect 0-based.
+                var lineNumber = record.data.scriptLine - 1;
+
+                switch (parent.type) {
+                case "TimerFire":
+                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.TimerFired, startTime, endTime, parent.data.timerId, resource, lineNumber, callFrames));
+                    break;
+                case "EventDispatch":
+                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.EventDispatched, startTime, endTime, parent.data.type, resource, lineNumber, callFrames));
+                    break;
+                case "XHRLoad":
+                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.EventDispatched, startTime, endTime, "load", resource, lineNumber, callFrames));
+                    break;
+                case "XHRReadyStateChange":
+                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.EventDispatched, startTime, endTime, "readystatechange", resource, lineNumber, callFrames));
+                    break;
+                case "FireAnimationFrame":
+                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.AnimationFrameFired, startTime, endTime, parent.data.id, resource, lineNumber, callFrames));
+                    break;
+                }
+
+                break;
+            case "TimerInstall":
+            case "TimerRemove":
+                // COMPATIBILITY (iOS 6): TimerInstall and TimerRemove did not have a stack trace.
+                var callFrame = null;
+                if (callFrames) {
+                    for (var i = 0; i < callFrames.length; ++i) {
+                        if (callFrames[i].nativeCode)
+                            continue;
+                        callFrame = callFrames[i];
+                        break;
+                    }
+                }
+
+                var sourceCodeLocation = callFrame && callFrame.sourceCodeLocation;
+                var resource = sourceCodeLocation ? sourceCodeLocation.sourceCode : null;
+                var lineNumber = sourceCodeLocation ? sourceCodeLocation.lineNumber : null;
+
+                if (record.type === "TimerInstall")
+                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.TimerInstalled, startTime, endTime, record.data.timerId, resource, lineNumber, callFrames));
+                else
+                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.TimerRemoved, startTime, endTime, record.data.timerId, resource, lineNumber, callFrames));
+
+                break;
+            }
+
+            return null;
+        }
+
+        // Iterate over the records tree using a stack. Doing this recursively has
+        // been known to cause a call stack overflow. https://webkit.org/b/79106
+        var stack = [{array: [originalRecord], parent: null, index: 0}];
+        while (stack.length) {
+            var entry = stack.lastValue;
+            var records = entry.array;
+            var parent = entry.parent;
+
+            if (entry.index < records.length) {
+                var record = records[entry.index];
+
+                processRecord.call(this, record, parent);
+
+                if (record.children)
+                    stack.push({array: record.children, parent: record, index: 0});
+                ++entry.index;
+            } else
+                stack.pop();
+        }
+    },
+
+    pageDidLoad: function(timestamp)
+    {
+        if (isNaN(this._loadEventTime))
+            this._loadEventTime = timestamp;
+    },
+
+    // Private
+
+    _clear: function()
+    {
+        this._records = [];
+        this._typeRecords = {};
+        this._loadEventTime = NaN;
+        this._eventMarkers = [];
+
+        this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordsCleared);
+    },
+
+    _callFramesFromPayload: function(payload)
+    {
+        if (!payload)
+            return null;
+
+        function createCallFrame(payload)
+        {
+            var url = payload.url;
+            var nativeCode = false;
+
+            if (url === "[native code]") {
+                nativeCode = true;
+                url = null;
+            }
+
+            var sourceCode = WebInspector.frameResourceManager.resourceForURL(url);
+            if (!sourceCode)
+                sourceCode = WebInspector.debuggerManager.scriptsForURL(url)[0];
+
+            // The lineNumber is 1-based, but we expect 0-based.
+            var lineNumber = payload.lineNumber - 1;
+
+            var sourceCodeLocation = sourceCode ? sourceCode.createSourceCodeLocation(lineNumber, payload.columnNumber) : null;
+            var functionName = payload.functionName !== "global code" ? payload.functionName : null;
+
+            return new WebInspector.CallFrame(null, sourceCodeLocation, functionName, null, null, nativeCode);
+        }
+
+        return payload.map(createCallFrame);
+    },
+
+    _addRecord: function(record)
+    {
+        this._records.push(record);
+
+        if (!this._typeRecords[record.type])
+            this._typeRecords[record.type] = [];
+        this._typeRecords[record.type].push(record);
+
+        this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordAdded, {record: record});
+
+        // Only worry about dead time after the load event.
+        if (!isNaN(this._loadEventTime))
+            this._resetAutoRecordingDeadTimeTimeout();
+    },
+
+    _startAutoRecording: function(event)
+    {
+        if (!event.target.isMainFrame() || (this._recording && !this._autoRecordingMainResource))
+            return false;
+
+        var mainResource = event.target.provisionalMainResource || event.target.mainResource;
+        if (mainResource === this._autoRecordingMainResource)
+            return false;
+
+        this.stopRecording();
+
+        this._autoRecordingMainResource = mainResource;
+
+        this.startRecording();
+
+        this._addRecord(new WebInspector.ResourceTimelineRecord(mainResource));
+
+        if (this._stopRecordingTimeout)
+            clearTimeout(this._stopRecordingTimeout);
+        this._stopRecordingTimeout = setTimeout(this.stopRecording.bind(this), WebInspector.TimelineManager.MaximumAutoRecordDuration);
+
+        return true;
+    },
+
+    _stopAutoRecordingSoon: function()
+    {
+        // Only auto stop when auto recording.
+        if (!this._recording || !this._autoRecordingMainResource)
+            return;
+
+        if (this._stopRecordingTimeout)
+            clearTimeout(this._stopRecordingTimeout);
+        this._stopRecordingTimeout = setTimeout(this.stopRecording.bind(this), WebInspector.TimelineManager.MaximumAutoRecordDurationAfterLoadEvent);
+    },
+
+    _resetAutoRecordingDeadTimeTimeout: function()
+    {
+        // Only monitor dead time when auto recording.
+        if (!this._recording || !this._autoRecordingMainResource)
+            return;
+
+        if (this._deadTimeTimeout)
+            clearTimeout(this._deadTimeTimeout);
+        this._deadTimeTimeout = setTimeout(this.stopRecording.bind(this), WebInspector.TimelineManager.DeadTimeRequiredToStopAutoRecordingEarly);
+    },
+
+    _mainResourceDidChange: function(event)
+    {
+        // Ignore resource events when there isn't a main frame yet. Those events are triggered by
+        // loading the cached resources when the inspector opens, and they do not have timing information.
+        if (!WebInspector.frameResourceManager.mainFrame)
+            return;
+
+        if (this._startAutoRecording(event))
+            return;
+
+        if (!this._recording)
+            return;
+
+        var mainResource = event.target.mainResource;
+        if (mainResource === this._autoRecordingMainResource)
+            return;
+
+        this._addRecord(new WebInspector.ResourceTimelineRecord(mainResource));
+    },
+
+    _resourceWasAdded: function(event)
+    {
+        // Ignore resource events when there isn't a main frame yet. Those events are triggered by
+        // loading the cached resources when the inspector opens, and they do not have timing information.
+        if (!WebInspector.frameResourceManager.mainFrame)
+            return;
+
+        if (!this._recording)
+            return;
+
+        this._addRecord(new WebInspector.ResourceTimelineRecord(event.data.resource));
+    }
+};
+
+WebInspector.TimelineManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelineObserver.js b/Source/WebInspectorUI/UserInterface/TimelineObserver.js
new file mode 100644
index 000000000..e91e32375
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TimelineObserver.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineObserver = function()
+{
+    WebInspector.Object.call(this);
+};
+
+WebInspector.TimelineObserver.prototype = {
+    constructor: WebInspector.TimelineObserver,
+
+    // Events defined by the "Timeline" domain (see WebCore/inspector/Inspector.json).
+
+    eventRecorded: function(record)
+    {
+        WebInspector.timelineManager.eventRecorded(record);
+    }
+};
+
+WebInspector.TimelineObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelineOverview.css b/Source/WebInspectorUI/UserInterface/TimelineOverview.css
new file mode 100644
index 000000000..be237e3cd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TimelineOverview.css
@@ -0,0 +1,77 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-overview > .timeline {
+    height: 26px;
+}
+
+.timeline-overview > .timeline:not(:first-child) {
+    border-top: 1px solid rgb(235, 235, 235);
+}
+
+.timeline-overview > .timeline > .bar-container {
+    position: relative;
+    height: 100%;
+    margin-left: 3px;
+    margin-right: 3px;
+}
+
+.timeline-overview > .timeline .bar {
+    position: absolute;
+    top: 6px;
+    margin-left: -2px;
+    margin-right: -2px;
+    border-width: 4px 4px 5px;
+    border-image-slice: 4 4 5 4 fill;
+    height: 13px;
+    min-width: 5px;
+    opacity: 0.8;
+}
+
+.timeline-overview > .timeline .bar.waiting {
+    opacity: 0.4;
+}
+
+.timeline-overview > .timeline.timeline-record-type-network .bar {
+    border-image-source: -webkit-image-set(url(Images/TimelineBarBlue.png) 1x, url(Images/TimelineBarBlue@2x.png) 2x);
+}
+
+.timeline-overview > .timeline.timeline-record-type-layout .bar {
+    border-image-source: -webkit-image-set(url(Images/TimelineBarPurple.png) 1x, url(Images/TimelineBarPurple@2x.png) 2x);
+}
+
+.timeline-overview > .timeline.timeline-record-type-script .bar {
+    border-image-source: -webkit-image-set(url(Images/TimelineBarOrange.png) 1x, url(Images/TimelineBarOrange@2x.png) 2x);
+}
+
+.timeline-overview .timeline-decorations > .event-markers {
+    height: 78px;
+    bottom: 22px;
+    top: auto;
+}
+
+.timeline-overview .timeline-decorations > .event-markers > .event-marker-tooltip {
+    z-index: 300;
+}
diff --git a/Source/WebInspectorUI/UserInterface/TimelineOverview.js b/Source/WebInspectorUI/UserInterface/TimelineOverview.js
new file mode 100644
index 000000000..a17eb83e7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TimelineOverview.js
@@ -0,0 +1,251 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineOverview = function(dataSource, recordTypes)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(dataSource);
+    console.assert(recordTypes instanceof Array);
+
+    this._element = document.createElement("div");
+    this._element.className = WebInspector.TimelineOverview.StyleClassName;
+
+    this._recordTypes = recordTypes;
+
+    this._timelineDecorations = new WebInspector.TimelineDecorations;
+
+    this._timelineElements = [];
+    for (var i = 0; i < this._recordTypes.length; ++i) {
+        var timelineElement = document.createElement("div");
+        timelineElement.classList.add(WebInspector.TimelineOverview.TimelineElementStyleClassName);
+        timelineElement.classList.add(this._recordTypes[i]);
+        this._element.appendChild(timelineElement);
+
+        var barContainerElement = document.createElement("div");
+        barContainerElement.className = WebInspector.TimelineOverview.BarContainerElementStyleClassName;
+        timelineElement.appendChild(barContainerElement);
+        timelineElement._barContainerElement = barContainerElement;
+
+        this._timelineElements.push(timelineElement);
+    }
+
+    this._element.appendChild(this._timelineDecorations.element);
+
+    this._dataSource = dataSource;
+};
+
+WebInspector.TimelineOverview.StyleClassName = "timeline-overview";
+WebInspector.TimelineOverview.TimelineElementStyleClassName = "timeline";
+WebInspector.TimelineOverview.BarContainerElementStyleClassName = "bar-container";
+WebInspector.TimelineOverview.BarElementStyleClassName = "bar";
+WebInspector.TimelineOverview.WaitingBarElementStyleClassName = "waiting";
+
+WebInspector.TimelineOverview.prototype = {
+    constructor: WebInspector.TimelineOverview,
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    },
+
+    get recordTypes()
+    {
+        return this._recordTypes;
+    },
+
+    clear: function()
+    {
+        this._minimumBoundary = NaN;
+        this._maximumBoundary = NaN;
+        this._boundarySpan = NaN;
+
+        this._timelineDecorations.clear();
+        this._timelineDecorations.updateHeaderTimes(this._boundarySpan);
+
+        for (var i = 0; i < this._timelineElements.length; ++i)
+            this._timelineElements[i]._barContainerElement.removeChildren();
+    },
+
+    update: function()
+    {
+        var minimumBoundary = NaN;
+        var maximumBoundary = NaN;
+
+        var records = [];
+        for (var i = 0; i < this._recordTypes.length; ++i)
+            records.push(this._dataSource.timelineOverviewRecordsWithType(this._recordTypes[i]));
+
+        for (var i = 0; i < records.length; ++i) {
+            var currentRecords = records[i];
+            if (!currentRecords.length)
+                continue;
+
+            // The first record can be assumed to be the oldest start time.
+            var firstRecord = currentRecords[0];
+            if (isNaN(minimumBoundary) || firstRecord.startTime < minimumBoundary)
+                minimumBoundary = firstRecord.startTime;
+
+            if (this._recordTypes[i] === WebInspector.TimelineRecord.Type.Network) {
+                // For the Network timeline we need to look at all the records since
+                // long loading resources can be anywhere, not just at the end. The other
+                // timelines are static, so the last record is always the newest.
+                for (var j = currentRecords.length - 1; j >= 0; --j) {
+                    var record = currentRecords[j];
+                    if (isNaN(maximumBoundary) || record.endTime > maximumBoundary)
+                        maximumBoundary = record.endTime;
+                }
+            } else {
+                // The newest record will always be at the end.
+                var lastRecord = currentRecords.lastValue;
+                if (isNaN(maximumBoundary) || lastRecord.endTime > maximumBoundary)
+                    maximumBoundary = lastRecord.endTime;
+            }
+        }
+
+        this._minimumBoundary = minimumBoundary;
+        this._maximumBoundary = maximumBoundary;
+        this._boundarySpan = maximumBoundary - minimumBoundary;
+
+        this._timelineDecorations.updateHeaderTimes(this._boundarySpan);
+        this._timelineDecorations.updateEventMarkers(this._minimumBoundary, this._maximumBoundary);
+
+        for (var i = 0; i < records.length; ++i)
+            this._updateTimelineBars(this._timelineElements[i], this._recordTypes[i], records[i]);
+    },
+
+    updateLayout: function()
+    {
+        this._timelineDecorations.updateHeaderTimes(this._boundarySpan);
+    },
+
+    addTimelineEventMarker: function(eventMarker)
+    {
+        this._timelineDecorations.addTimelineEventMarker(eventMarker);
+    },
+
+    // Private
+
+    _updateTimelineBars: function(timelineElement, type, records)
+    {
+        function computeActivePercentages(record)
+        {
+            // Compute percentages for endTime and the start of activeDuration.
+
+            var activeStartTime = record.endTime - record.activeDuration;
+            if (isNaN(activeStartTime))
+                activeStartTime = record.endTime;
+
+            if (isNaN(activeStartTime))
+                var start = 0;
+            else
+                var start = ((activeStartTime - this._minimumBoundary) / this._boundarySpan) * 100;
+
+            if (isNaN(record.endTime))
+                var end = 100;
+            else
+                var end = ((record.endTime - this._minimumBoundary) / this._boundarySpan) * 100;
+
+            return {start: start, end: end};
+        }
+
+        function computePercentages(record)
+        {
+            // Compute percentages for startTime and endTime.
+
+            if (isNaN(record.startTime))
+                var start = 0;
+            else
+                var start = ((record.startTime - this._minimumBoundary) / this._boundarySpan) * 100;
+
+            if (isNaN(record.endTime))
+                var end = 100;
+            else
+                var end = ((record.endTime - this._minimumBoundary) / this._boundarySpan) * 100;
+
+            return {start: start, end: end};
+        }
+
+        function addBar(startPercentage, endPercentage, extraBarStyleClass)
+        {
+            var barElement = document.createElement("div");
+            barElement.className = WebInspector.TimelineOverview.BarElementStyleClassName;
+            if (extraBarStyleClass)
+                barElement.classList.add(extraBarStyleClass);
+
+            if (startPercentage === 0 || startPercentage !== endPercentage)
+                barElement.style.left = startPercentage + "%";
+            barElement.style.right = (100 - endPercentage) + "%";
+
+            timelineElement._barContainerElement.appendChild(barElement);
+        }
+
+        function createBars(percentageCalculator, extraBarStyleClass)
+        {
+            // Iterate over the records and find the percentage distribution on the graph.
+            // The percentages are recorded in a sparse array from 0-100.
+
+            var timelineSlots = new Array(101);
+            for (var i = 0; i < records.length; ++i) {
+                var percentages = percentageCalculator.call(this, records[i]);
+                var end = Math.round(percentages.end);
+                for (var j = Math.round(percentages.start); j <= end; ++j)
+                    timelineSlots[j] = true;
+            }
+
+            var barStart = NaN;
+            for (var i = 0; i < timelineSlots.length; ++i) {
+                if (timelineSlots[i]) {
+                    if (isNaN(barStart))
+                        barStart = i;
+                } else {
+                    if (!isNaN(barStart)) {
+                        addBar.call(this, barStart, i, extraBarStyleClass);
+                        barStart = NaN;
+                    }
+                }
+            }
+
+            if (!isNaN(barStart)) {
+                addBar.call(this, barStart, 100, extraBarStyleClass);
+                barStart = NaN;
+            }
+        }
+
+        timelineElement._barContainerElement.removeChildren();
+
+        // The Network timeline shows two bars. The first is the total time (waiting for the resource until it finishes).
+        // The second bar is the active download time (first first response to finish.)
+        if (type === WebInspector.TimelineRecord.Type.Network) {
+            createBars.call(this, computePercentages, WebInspector.TimelineOverview.WaitingBarElementStyleClassName);
+            createBars.call(this, computeActivePercentages);
+        } else
+            createBars.call(this, computePercentages);
+    }
+};
+
+WebInspector.TimelineOverview.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelineRecord.js b/Source/WebInspectorUI/UserInterface/TimelineRecord.js
new file mode 100644
index 000000000..06388eee4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TimelineRecord.js
@@ -0,0 +1,89 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineRecord = function(type, startTime, endTime)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(type);
+
+    if (type in WebInspector.TimelineRecord.Type)
+        type = WebInspector.TimelineRecord.Type[type];
+
+    this._type = type;
+    this._startTime = startTime || NaN;
+    this._endTime = endTime || NaN;
+};
+
+WebInspector.TimelineRecord.Event = {
+    Updated: "timeline-record-updated"
+};
+
+WebInspector.TimelineRecord.Type = {
+    Network: "timeline-record-type-network",
+    Layout: "timeline-record-type-layout",
+    Script: "timeline-record-type-script"
+};
+
+WebInspector.TimelineRecord.prototype = {
+    constructor: WebInspector.TimelineRecord,
+
+    // Public
+
+    get type()
+    {
+        return this._type;
+    },
+
+    get startTime()
+    {
+        return this._startTime;
+    },
+
+    get endTime()
+    {
+        return this._endTime;
+    },
+
+    get duration()
+    {
+        // Use the getters instead of the properties so this works for subclasses that override the getters.
+        return this.endTime - this.startTime;
+    },
+
+    get waitingDuration()
+    {
+        // Implemented by subclasses if needed.
+        return NaN;
+    },
+
+    get activeDuration()
+    {
+        // Implemented by subclasses if needed.
+        return this.duration;
+    }
+};
+
+WebInspector.TimelineRecord.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelinesContentView.css b/Source/WebInspectorUI/UserInterface/TimelinesContentView.css
new file mode 100644
index 000000000..93720719d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TimelinesContentView.css
@@ -0,0 +1,247 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.timelines > .timeline-overview {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100px;
+}
+
+.content-view.timelines > .data-grid {
+    position: absolute;
+    top: 100px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    outline: 0;
+    border: none;
+    border-top: 1px solid rgb(179, 179, 179);
+}
+
+.content-view.timelines > .data-grid th {
+    height: 21px;
+
+    font-size: 11px;
+    font-family: "Lucida Grande", sans-serif;
+
+    background-image: -webkit-linear-gradient(top, rgb(248, 248, 248), rgb(226, 226, 226));
+
+    background-size: 100% 100% !important;
+    background-position: center !important;
+    background-repeat: no-repeat !important;
+
+    box-shadow: inset rgba(255, 255, 255, 0.1) 0 1px 0;
+    border-bottom: 1px solid rgb(179, 179, 179) !important;
+}
+
+.content-view.timelines > .data-grid th:not(:last-child) {
+    border-right: 1px solid rgb(179, 179, 179);
+}
+
+.content-view.timelines > .data-grid th.sortable:not(.mouse-over-collapser):active {
+    background-image: -webkit-linear-gradient(top, rgb(219, 219, 219), rgb(188, 188, 188)) !important;
+}
+
+.content-view.timelines > .data-grid th.sort-ascending,
+.content-view.timelines > .data-grid th.sort-descending {
+    background-image: -webkit-linear-gradient(top, rgb(230, 230, 230), rgb(200, 200, 200)) !important;
+}
+
+.content-view.timelines > .data-grid .data-container {
+    top: 22px;
+}
+
+.content-view.timelines > .data-grid table.data {
+    background-size: auto 42px;
+    background-image: -webkit-linear-gradient(top, white, white 50%, rgb(95%, 95%, 95%) 50%, rgb(95%, 95%, 95%));
+    font-size: 11px;
+}
+
+.content-view.timelines > .data-grid th,
+.content-view.timelines > .data-grid td {
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
+.content-view.timelines > .data-grid td:last-child {
+    padding-right: 12px;
+}
+
+.content-view.timelines > .data-grid td {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    line-height: 17px;
+}
+
+.content-view.timelines > .data-grid td:not(:last-child) {
+    border-right: 1px solid rgb(179, 179, 179);
+}
+
+.content-view.timelines > .data-grid .column-group-details {
+    background-color: rgba(0, 0, 0, 0.07);
+}
+
+.content-view.timelines > .data-grid.collapsed-details td.column-group-details:not(:last-child) {
+    border-right: none; /* Prevent a sporadic double-thick border appearance in collapsed 0-width columns. */
+}
+
+.content-view.timelines > .data-grid td .subtitle {
+    color: rgba(0, 0, 0, 0.7);
+}
+
+.content-view.timelines > .data-grid td .subtitle::before {
+    content: " — ";
+}
+
+.content-view.timelines > .data-grid:focus tr.selected td .subtitle {
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.content-view.timelines > .data-grid td .icon {
+    display: inline-block;
+    vertical-align: top;
+
+    width: 16px;
+    height: 16px;
+
+    margin-right: 2px;
+}
+
+.content-view.timelines > .data-grid td.timeline-column {
+    padding-left: 1px;
+    padding-right: 1px;
+}
+
+.content-view.timelines > .data-grid td .go-to-arrow {
+    float: right;
+
+    visibility: hidden;
+
+    margin-left: 2px;
+}
+
+.content-view.timelines > .data-grid tr.selected .go-to-arrow,
+.content-view.timelines > .data-grid tr:hover .go-to-arrow {
+    visibility: visible;
+}
+
+.content-view.timelines > .data-grid td.error {
+    color: rgb(224, 16, 16);
+}
+
+.content-view.timelines > .data-grid tr.selected td.error {
+    color: inherit;
+}
+
+.content-view.timelines > .data-grid tr.offscreen {
+    height: 21px;
+}
+
+.content-view.timelines > .data-grid tr.offscreen td {
+    display: none;
+}
+
+/* Column collapser */
+
+.content-view.timelines > .data-grid th.collapser {
+    position: relative;
+}
+
+.content-view.timelines > .data-grid th.collapser > .divider {
+    position: absolute;
+    width: 2px;
+    top: 0;
+    right: 25px;
+    bottom: 0;
+
+    background-image: -webkit-linear-gradient(rgba(128, 128, 128, 0), rgb(128, 128, 128), rgba(128, 128, 128, 0)),
+        -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
+    background-size: 1px 17px, 1px 17px;
+    background-repeat: no-repeat;
+    background-position: 0 center, 1px center;
+}
+
+.content-view.timelines > .data-grid th.collapser > .collapser-button {
+    position: absolute;
+    top: 0;
+    right: 5px;
+    bottom: 0;
+    height: 15px;
+    width: 15px;
+    margin-bottom: auto;
+    margin-top: auto;
+
+    background-image: -webkit-canvas(timeline-datagrid-collapse-button-less-normal);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 15px 13px;
+}
+
+.content-view.timelines > .data-grid th.collapser > .collapser-button:active {
+    background-image: -webkit-canvas(timeline-datagrid-collapse-button-less-active);
+}
+
+.content-view.timelines > .data-grid th.collapser.collapsed > .collapser-button {
+    background-image: -webkit-canvas(timeline-datagrid-collapse-button-more-normal);
+}
+
+.content-view.timelines > .data-grid th.collapser.collapsed > .collapser-button:active {
+    background-image: -webkit-canvas(timeline-datagrid-collapse-button-more-active);
+}
+
+.content-view.timelines > .data-grid th.sort-ascending.collapser > div:first-child,
+.content-view.timelines > .data-grid th.sort-descending.collapser > div:first-child {
+    margin-right: 27px;
+}
+
+.content-view.timelines > .data-grid > .navigation-bar-container {
+    position: absolute;
+    top: -33px;
+    left: 0;
+    right: 0;
+    height: 33px;
+
+    pointer-events: none;
+    visibility: hidden;
+}
+
+.content-view.timelines > .data-grid:hover > .navigation-bar-container {
+    pointer-events: all;
+    visibility: visible;
+}
+
+.content-view.timelines > .data-grid > .navigation-bar-container > .navigation-bar {
+    position: absolute;
+    top: 10px;
+    left: 0;
+    right: 0;
+    height: 23px;
+    border: none;
+    border-top: 1px solid rgb(200, 200, 200);
+    border-bottom: 1px solid rgb(179, 179, 179);
+    background-color: white;
+}
diff --git a/Source/WebInspectorUI/UserInterface/TimelinesContentView.js b/Source/WebInspectorUI/UserInterface/TimelinesContentView.js
new file mode 100644
index 000000000..1c8c5d679
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TimelinesContentView.js
@@ -0,0 +1,756 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelinesContentView = function(representedObject)
+{
+    WebInspector.ContentView.call(this, representedObject);
+
+    this.element.classList.add(WebInspector.TimelinesContentView.StyleClassName);
+
+    this._timelineOverview = new WebInspector.TimelineOverview(this, [WebInspector.TimelineRecord.Type.Network, WebInspector.TimelineRecord.Type.Layout, WebInspector.TimelineRecord.Type.Script]);
+    this.element.appendChild(this._timelineOverview.element);
+
+    function createPathComponent(displayName, className, representedObject)
+    {
+        var pathComponent = new WebInspector.HierarchicalPathComponent(displayName, className, representedObject);
+        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
+        return pathComponent;
+    }
+
+    var networkPathComponent = createPathComponent.call(this, WebInspector.UIString("Network Requests"), WebInspector.InstrumentSidebarPanel.NetworkIconStyleClass, WebInspector.TimelineRecord.Type.Network);
+    var layoutPathComponent = createPathComponent.call(this, WebInspector.UIString("Layout & Rendering"), WebInspector.InstrumentSidebarPanel.ColorsIconStyleClass, WebInspector.TimelineRecord.Type.Layout);
+    var scriptPathComponent = createPathComponent.call(this, WebInspector.UIString("JavaScript & Events"), WebInspector.InstrumentSidebarPanel.ScriptIconStyleClass, WebInspector.TimelineRecord.Type.Script);
+
+    networkPathComponent.nextSibling = layoutPathComponent;
+    layoutPathComponent.previousSibling = networkPathComponent;
+    layoutPathComponent.nextSibling = scriptPathComponent;
+    scriptPathComponent.previousSibling = layoutPathComponent;
+
+    this._currentRecordType = null;
+    this._currentRecordTypeSetting = new WebInspector.Setting("timeline-view-current-record-type", WebInspector.TimelineRecord.Type.Network);
+    this._currentDataGrid = null;
+
+    var networkDataGridColumns = {name: {}, domain: {}, type: {}, statusCode: {}, cached: {}, size: {}, transferSize: {}, latency: {}, duration: {}, timeline: {}};
+
+    networkDataGridColumns.name.title = WebInspector.UIString("Name");
+    networkDataGridColumns.name.width = "15%";
+
+    networkDataGridColumns.domain.title = WebInspector.UIString("Domain");
+    networkDataGridColumns.domain.width = "10%";
+    networkDataGridColumns.domain.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;
+
+    networkDataGridColumns.type.title = WebInspector.UIString("Type");
+    networkDataGridColumns.type.width = "8%";
+    networkDataGridColumns.type.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;
+    networkDataGridColumns.type.scopeBar = this._makeColumnScopeBar("network", WebInspector.Resource.Type);
+
+    networkDataGridColumns.statusCode.title = WebInspector.UIString("Status");
+    networkDataGridColumns.statusCode.width = "6%";
+    networkDataGridColumns.statusCode.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;
+
+    networkDataGridColumns.cached.title = WebInspector.UIString("Cached");
+    networkDataGridColumns.cached.width = "7%";
+    networkDataGridColumns.cached.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;
+
+    networkDataGridColumns.size.title = WebInspector.UIString("Size");
+    networkDataGridColumns.size.width = "8%";
+    networkDataGridColumns.size.aligned = "right";
+    networkDataGridColumns.size.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;
+
+    networkDataGridColumns.transferSize.title = WebInspector.UIString("Transferred");
+    networkDataGridColumns.transferSize.width = "8%";
+    networkDataGridColumns.transferSize.aligned = "right";
+    networkDataGridColumns.transferSize.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;
+
+    networkDataGridColumns.latency.title = WebInspector.UIString("Latency");
+    networkDataGridColumns.latency.width = "9%";
+    networkDataGridColumns.latency.aligned = "right";
+    networkDataGridColumns.latency.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;
+
+    networkDataGridColumns.duration.title = WebInspector.UIString("Duration");
+    networkDataGridColumns.duration.width = "9%";
+    networkDataGridColumns.duration.aligned = "right";
+    networkDataGridColumns.duration.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;
+
+    networkDataGridColumns.timeline.title = WebInspector.UIString("Timeline");
+    networkDataGridColumns.timeline.width = "20%";
+    networkDataGridColumns.timeline.sort = "ascending";
+    networkDataGridColumns.timeline.collapsesGroup = WebInspector.NetworkDataGrid.DetailsColumnGroup;
+
+    var layoutDataGridColumns = {eventType: {}, initiatorCallFrame: {}, width: {}, height: {}, area: {}, startTime: {}, duration: {}};
+
+    layoutDataGridColumns.eventType.title = WebInspector.UIString("Type");
+    layoutDataGridColumns.eventType.width = "15%";
+    layoutDataGridColumns.eventType.scopeBar = this._makeColumnScopeBar("layout", WebInspector.LayoutTimelineRecord.EventType);
+
+    layoutDataGridColumns.initiatorCallFrame.title = WebInspector.UIString("Initiator");
+    layoutDataGridColumns.initiatorCallFrame.width = "25%";
+
+    layoutDataGridColumns.width.title = WebInspector.UIString("Width");
+    layoutDataGridColumns.width.width = "8%";
+
+    layoutDataGridColumns.height.title = WebInspector.UIString("Height");
+    layoutDataGridColumns.height.width = "8%";
+
+    layoutDataGridColumns.area.title = WebInspector.UIString("Area");
+    layoutDataGridColumns.area.width = "12%";
+
+    layoutDataGridColumns.startTime.title = WebInspector.UIString("Start Time");
+    layoutDataGridColumns.startTime.width = "8%";
+    layoutDataGridColumns.startTime.aligned = "right";
+    layoutDataGridColumns.startTime.sort = "ascending";
+
+    layoutDataGridColumns.duration.title = WebInspector.UIString("Duration");
+    layoutDataGridColumns.duration.width = "8%";
+    layoutDataGridColumns.duration.aligned = "right";
+
+    var scriptDataGridColumns = {eventType: {}, details: {}, resource: {}, startTime: {}, duration: {}};
+
+    scriptDataGridColumns.eventType.title = WebInspector.UIString("Type");
+    scriptDataGridColumns.eventType.width = "15%";
+    scriptDataGridColumns.eventType.scopeBar = this._makeColumnScopeBar("script", WebInspector.ScriptTimelineRecord.EventType);
+
+    scriptDataGridColumns.details.title = WebInspector.UIString("Details");
+    scriptDataGridColumns.details.width = "15%";
+
+    scriptDataGridColumns.resource.title = WebInspector.UIString("Location");
+    scriptDataGridColumns.resource.width = "15%";
+
+    scriptDataGridColumns.startTime.title = WebInspector.UIString("Start Time");
+    scriptDataGridColumns.startTime.width = "10%";
+    scriptDataGridColumns.startTime.aligned = "right";
+    scriptDataGridColumns.startTime.sort = "ascending";
+
+    scriptDataGridColumns.duration.title = WebInspector.UIString("Duration");
+    scriptDataGridColumns.duration.width = "10%";
+    scriptDataGridColumns.duration.aligned = "right";
+
+    for (var column in networkDataGridColumns)
+        networkDataGridColumns[column].sortable = true;
+
+    for (var column in layoutDataGridColumns)
+        layoutDataGridColumns[column].sortable = true;
+
+    for (var column in scriptDataGridColumns)
+        scriptDataGridColumns[column].sortable = true;
+
+    var networkDataGrid = new WebInspector.NetworkDataGrid(networkDataGridColumns);
+    var layoutDataGrid = new WebInspector.LayoutTimelineDataGrid(layoutDataGridColumns);
+    var scriptDataGrid = new WebInspector.ScriptTimelineDataGrid(scriptDataGridColumns);
+
+    networkDataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._selectedNodeChanged, this);
+
+    this._pathComponentMap = {};
+    this._pathComponentMap[WebInspector.TimelineRecord.Type.Network] = networkPathComponent;
+    this._pathComponentMap[WebInspector.TimelineRecord.Type.Layout] = layoutPathComponent;
+    this._pathComponentMap[WebInspector.TimelineRecord.Type.Script] = scriptPathComponent;
+
+    this._dataGridMap = {};
+    this._dataGridMap[WebInspector.TimelineRecord.Type.Network] = networkDataGrid;
+    this._dataGridMap[WebInspector.TimelineRecord.Type.Layout] = layoutDataGrid;
+    this._dataGridMap[WebInspector.TimelineRecord.Type.Script] = scriptDataGrid;
+
+    for (var type in this._dataGridMap) {
+        var dataGrid = this._dataGridMap[type];
+        dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortCurrentDataGrid, this);
+        dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this);
+        dataGrid.scrollContainer.addEventListener("scroll", this._updateOffscreenRows.bind(this));
+    }
+
+    this._pendingRecords = {};
+
+    for (var typeName in WebInspector.TimelineRecord.Type) {
+        var type = WebInspector.TimelineRecord.Type[typeName];
+        this._pendingRecords[type] = WebInspector.timelineManager.recordsWithType(type);
+    }
+
+    this._pendingRefreshGridNodes = {};
+    this._pendingEventMarkers = {};
+
+    WebInspector.ResourceTimelineDataGridNode.addEventListener(WebInspector.ResourceTimelineDataGridNode.Event.NeedsRefresh, this._scheduleGridNodeForRefresh, this);
+    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordsCleared, this._recordsCleared, this);
+    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordAdded, this._recordAdded, this);
+    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordedEventMarker, this._recordedEventMarker, this);
+
+    WebInspector.TimelinesContentView.generateEmbossedCollapseImages();
+};
+
+WebInspector.TimelinesContentView.StyleClassName = "timelines";
+WebInspector.TimelinesContentView.OffscreenDataGridRowStyleClassName = "offscreen";
+WebInspector.TimelinesContentView.UpdateInterval = 500; // 0.5 seconds
+
+WebInspector.TimelinesContentView.CollapseButton = {};
+WebInspector.TimelinesContentView.CollapseButton.More = "more";
+WebInspector.TimelinesContentView.CollapseButton.Less = "less";
+
+WebInspector.TimelinesContentView.CollapseButton.States = {};
+WebInspector.TimelinesContentView.CollapseButton.States.Normal = "normal";
+WebInspector.TimelinesContentView.CollapseButton.States.Active = "active";
+
+WebInspector.TimelinesContentView.generateEmbossedCollapseImages = function()
+{
+    if (WebInspector.TimelinesContentView._generatedImages)
+        return;
+    WebInspector.TimelinesContentView._generatedImages = true;
+
+    generateEmbossedImages("Images/MoreColumns.pdf", 15, 13, WebInspector.TimelinesContentView.CollapseButton.States, canvasIdentifier.bind(this, WebInspector.TimelinesContentView.CollapseButton.More));
+    generateEmbossedImages("Images/LessColumns.pdf", 15, 13, WebInspector.TimelinesContentView.CollapseButton.States, canvasIdentifier.bind(this, WebInspector.TimelinesContentView.CollapseButton.Less));
+
+    function canvasIdentifier(type, state) {
+        return "timeline-datagrid-collapse-button-" + type + "-" + state;
+    }
+}
+
+WebInspector.TimelinesContentView.prototype = {
+    constructor: WebInspector.TimelinesContentView,
+
+    // Public
+
+    get allowedNavigationSidebarPanels()
+    {
+        return ["instrument"];
+    },
+
+    showTimelineForRecordType: function(type)
+    {
+        if (this._currentRecordType === type)
+            return;
+
+        this._currentRecordType = type;
+        this._currentRecordTypeSetting.value = type;
+
+        if (this._currentDataGrid) {
+            // Save scroll positon before removing from the document.
+            if (this._currentDataGrid.isScrolledToLastRow()) {
+                this._currentDataGrid._savedIsScrolledToLastRow = true;
+                delete this._currentDataGrid._savedScrollTop;
+            } else {
+                this._currentDataGrid._savedScrollTop = this._currentDataGrid.scrollContainer.scrollTop;
+                delete this._currentDataGrid._savedIsScrolledToLastRow;
+            }
+
+            this.element.removeChild(this._currentDataGrid.element);
+            this._currentDataGrid.hidden();
+        }
+
+        this._currentDataGrid = this._dataGridMap[type];
+        console.assert(this._currentDataGrid);
+
+        this.element.appendChild(this._currentDataGrid.element);
+        this._currentDataGrid.updateLayout();
+        this._currentDataGrid.shown();
+
+        // Restore scroll positon now that we are back in the document.
+        if (this._currentDataGrid._savedIsScrolledToLastRow)
+            this._currentDataGrid.scrollToLastRow()
+        else if (this._currentDataGrid._savedScrollTop)
+            this._currentDataGrid.scrollContainer.scrollTop = this._currentDataGrid._savedScrollTop;
+
+        this._updatePendingRecords();
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+        WebInspector.instrumentSidebarPanel.showTimelineForRecordType(type);
+    },
+
+    get supportsSplitContentBrowser()
+    {
+        // The layout of the overview and split content browser don't work well.
+        return false;
+    },
+
+    get selectionPathComponents()
+    {
+        var pathComponents = [this._pathComponentMap[this._currentRecordType]] || [];
+
+        if (this._currentDataGrid) {
+            var selectedNode = this._currentDataGrid.selectedNode;
+            if (selectedNode instanceof WebInspector.ResourceTimelineDataGridNode) {
+                var pathComponent = new WebInspector.ResourceTimelineDataGridNodePathComponent(selectedNode);
+                pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._dataGridNodePathComponentSelected, this);
+                pathComponents.push(pathComponent);
+            }
+        }
+
+        return pathComponents;
+    },
+
+    updateLayout: function()
+    {
+        if (this._currentDataGrid)
+            this._currentDataGrid.updateLayout();
+        this._timelineOverview.updateLayout();
+        this._updateOffscreenRows();
+    },
+
+    get scrollableElements()
+    {
+        if (!this._currentDataGrid)
+            return null;
+        return [this._currentDataGrid.scrollContainer];
+    },
+
+    get shouldKeepElementsScrolledToBottom()
+    {
+        return true;
+    },
+
+    shown: function()
+    {
+        if (this._currentRecordType) {
+            this._updatePendingRecords();
+            return;
+        }
+
+        if (this._currentDataGrid)
+            this._currentDataGrid.shown();
+
+        this.showTimelineForRecordType(this._currentRecordTypeSetting.value);
+    },
+
+    hidden: function()
+    {
+        if (this._currentDataGrid)
+            this._currentDataGrid.hidden();
+    },
+
+    timelineOverviewRecordsWithType: function(type)
+    {
+        return this._filterRecordsWithType(WebInspector.timelineManager.recordsWithType(type), type);
+    },
+
+    // Private
+
+    _pathComponentSelected: function(event)
+    {
+        this.showTimelineForRecordType(event.data.pathComponent.representedObject);
+    },
+
+    _dataGridNodePathComponentSelected: function(event)
+    {
+        console.assert(event.data.pathComponent instanceof WebInspector.ResourceTimelineDataGridNodePathComponent);
+        if (!(event.data.pathComponent instanceof WebInspector.ResourceTimelineDataGridNodePathComponent))
+            return;
+
+        event.data.pathComponent.resourceTimelineDataGridNode.revealAndSelect();
+        event.data.pathComponent.resourceTimelineDataGridNode.dataGrid.element.focus();
+    },
+
+    _selectedNodeChanged: function(event)
+    {
+        if (this._ignoreSelectionEvent)
+            return;
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    },
+
+    _recordsCleared: function(event)
+    {
+        this._pendingRecords = {};
+        this._pendingRefreshGridNodes = {};
+        this._pendingEventMarkers = {};
+
+        for (var type in this._dataGridMap) {
+            var dataGrid = this._dataGridMap[type];
+            delete dataGrid._savedIsScrolledToLastRow;
+            delete dataGrid._savedScrollTop;
+            dataGrid.removeChildren();
+            dataGrid.reset();
+        }
+
+        this._timelineOverview.clear();
+    },
+
+    _recordAdded: function(event)
+    {
+        this._addRecordToDataGrid(event.data.record);
+    },
+
+    _recordedEventMarker: function(event)
+    {
+        var eventMarker = event.data.eventMarker;
+        this._timelineOverview.addTimelineEventMarker(eventMarker);
+
+        for (var type in this._dataGridMap) {
+            if (!this._pendingEventMarkers[type])
+                this._pendingEventMarkers[type] = [];
+            this._pendingEventMarkers[type].push(eventMarker);
+
+            this._dataGridMap[type].addTimelineEventMarker(eventMarker);
+        }
+
+        this._updatePendingRecordsSoon();
+    },
+
+    _addRecordToDataGrid: function(record)
+    {
+        if (!this._pendingRecords[record.type])
+            this._pendingRecords[record.type] = [];
+        this._pendingRecords[record.type].push(record);
+
+        this._updatePendingRecordsSoon();
+    },
+
+    _updatePendingRecordsSoon: function()
+    {
+        if (!this.visible || this._updatePendingRecordsTimeout)
+            return;
+
+        this._updatePendingRecordsTimeout = setTimeout(this._updatePendingRecords.bind(this), WebInspector.TimelinesContentView.UpdateInterval);
+    },
+
+    _updatePendingRecords: function()
+    {
+        if (this._updatePendingRecordsTimeout) {
+            clearTimeout(this._updatePendingRecordsTimeout);
+            delete this._updatePendingRecordsTimeout;
+        }
+
+        this._timelineOverview.update();
+
+        console.assert(this._dataGridMap[this._currentRecordType] === this._currentDataGrid);
+        if (this._dataGridMap[this._currentRecordType] !== this._currentDataGrid)
+            return;
+
+        var isScrolledToLastRow = this._currentDataGrid.isScrolledToLastRow();
+
+        // If the data grid has a timeline calculator, pass through all the pending records first
+        // to update the timeline bounds. If the bounds change we need to refresh all nodes
+        // in the data grid, otherwise we can just proceed and update the pending records.
+        var wasBoundsChange = this._updateCalculatorBoundsForPendingRecordsAndEventMarkers();
+        this._updatePendingRecordsWithNewBounds(wasBoundsChange);
+
+        this._updateOffscreenRows();
+
+        this._currentDataGrid.update();
+        if (isScrolledToLastRow)
+            this._currentDataGrid.scrollToLastRow();
+    },
+    
+    _updateCalculatorBoundsForPendingRecordsAndEventMarkers: function()
+    {
+        var currentDataGrid = this._currentDataGrid;
+        if (!currentDataGrid.currentCalculator)
+            return false;
+
+        var wasBoundsChange = false;
+
+        var pendingRecords = this._pendingRecords[this._currentRecordType];
+        if (pendingRecords) {
+            for (var i = 0; i < pendingRecords.length; ++i) {
+                if (currentDataGrid.updateCalculatorBoundariesWithRecord(pendingRecords[i]))
+                    wasBoundsChange = true;
+            }
+        }
+
+        var pendingRefreshGridNodes = this._pendingRefreshGridNodes[this._currentRecordType];
+        if (pendingRefreshGridNodes) {
+            for (var i = 0; i < pendingRefreshGridNodes.length; ++i) {
+                if (currentDataGrid.updateCalculatorBoundariesWithDataGridNode(pendingRefreshGridNodes[i]))
+                    wasBoundsChange = true;
+            }
+        }
+
+        var pendingEventMarkers = this._pendingEventMarkers[this._currentRecordType];
+        if (pendingEventMarkers) {
+            delete this._pendingEventMarkers[this._currentRecordType];
+
+            for (var i = 0; i < pendingEventMarkers.length; ++i) {
+                if (currentDataGrid.updateCalculatorBoundariesWithEventMarker(pendingEventMarkers[i]))
+                    wasBoundsChange = true;
+            }
+        }
+
+        return wasBoundsChange;
+    },
+
+    _updatePendingRecordsWithNewBounds: function(refreshAllNodes)
+    {
+        var sortComparator = this._sortComparator.bind(this);
+
+        var pendingRecords = this._pendingRecords[this._currentRecordType];
+        if (pendingRecords) {
+            delete this._pendingRecords[this._currentRecordType];
+            pendingRecords = this._filterRecordsWithType(pendingRecords, this._currentRecordType);
+
+            for (var i = 0; i < pendingRecords.length; ++i) {
+                var dataGridNode = this._createDataGridNodeForRecord(pendingRecords[i]);
+                if (this._currentDataGrid.sortColumnIdentifier) {
+                    var insertionIndex = insertionIndexForObjectInListSortedByFunction(dataGridNode, this._currentDataGrid.children, sortComparator);
+                    this._currentDataGrid.insertChild(dataGridNode, insertionIndex);
+                } else
+                    this._currentDataGrid.appendChild(dataGridNode);
+            }
+        }
+
+        var pendingRefreshGridNodes = refreshAllNodes ? this._currentDataGrid.children.slice() : this._pendingRefreshGridNodes[this._currentRecordType];
+        if (pendingRefreshGridNodes) {
+            delete this._pendingRefreshGridNodes[this._currentRecordType];
+
+            var selectedNode = this._currentDataGrid.selectedNode;
+
+            for (var i = 0; i < pendingRefreshGridNodes.length; ++i) {
+                var dataGridNode = pendingRefreshGridNodes[i];
+                delete dataGridNode._pendingRefresh;
+                dataGridNode.refresh();
+
+                if (!this._currentDataGrid.sortColumnIdentifier)
+                    continue;
+
+                if (dataGridNode === selectedNode)
+                    this._ignoreSelectionEvent = true;
+
+                // Remove the data grid node so we can find the right sorted location to reinsert it. We need to
+                // remove it first so insertionIndexForObjectInListSortedByFunction does not return the current index.
+                this._currentDataGrid.removeChild(dataGridNode);
+
+                var insertionIndex = insertionIndexForObjectInListSortedByFunction(dataGridNode, this._currentDataGrid.children, sortComparator);
+                this._currentDataGrid.insertChild(dataGridNode, insertionIndex);
+
+                if (dataGridNode === selectedNode) {
+                    selectedNode.revealAndSelect();
+                    delete this._ignoreSelectionEvent;
+                }
+            }
+        }
+    },
+
+    _updateOffscreenRows: function()
+    {
+        var dataTableBody = this._currentDataGrid.dataTableBody;
+        var rows = dataTableBody.children;
+        var recordsCount = rows.length;
+        if (recordsCount < 2)
+            return;  // Filler row only.
+
+        const overflowPadding = 100;
+        var visibleTop = this._currentDataGrid.scrollContainer.scrollTop - overflowPadding;
+        var visibleBottom = visibleTop + this._currentDataGrid.scrollContainer.offsetHeight + overflowPadding;
+
+        var rowHeight = 0;
+
+        // Filler is at recordsCount - 1.
+        for (var i = 0; i < recordsCount - 1; ++i) {
+            var row = rows[i];
+            if (!rowHeight)
+                rowHeight = row.offsetHeight;
+
+            var rowIsVisible = (i * rowHeight) < visibleBottom && ((i + 1) * rowHeight) > visibleTop;
+            if (rowIsVisible !== row.rowIsVisible) {
+                if (rowIsVisible)
+                    row.classList.remove(WebInspector.TimelinesContentView.OffscreenDataGridRowStyleClassName);
+                else
+                    row.classList.add(WebInspector.TimelinesContentView.OffscreenDataGridRowStyleClassName);
+                row.rowIsVisible = rowIsVisible;
+            }
+        }
+    },
+
+    _sortCurrentDataGrid: function()
+    {
+        console.assert(this._currentDataGrid);
+        if (!this._currentDataGrid)
+            return;
+
+        var sortColumnIdentifier = this._currentDataGrid.sortColumnIdentifier;
+        if (!sortColumnIdentifier)
+            return;
+
+        var selectedNode = this._currentDataGrid.selectedNode;
+        this._ignoreSelectionEvent = true;
+
+        var nodes = this._currentDataGrid.children.slice();
+        nodes.sort(this._sortComparator.bind(this));
+
+        this._currentDataGrid.removeChildren();
+        for (var i = 0; i < nodes.length; ++i)
+            this._currentDataGrid.appendChild(nodes[i]);
+
+        if (selectedNode)
+            selectedNode.revealAndSelect();
+
+        delete this._ignoreSelectionEvent;
+
+        this._updateOffscreenRows();
+    },
+
+    _sortComparator: function(node1, node2)
+    {
+        var sortColumnIdentifier = this._currentDataGrid.sortColumnIdentifier;
+        if (!sortColumnIdentifier)
+            return 0;
+
+        var sortDirection = this._currentDataGrid.sortOrder === "ascending" ? 1 : -1;
+
+        var value1 = node1.data[sortColumnIdentifier];
+        var value2 = node2.data[sortColumnIdentifier];
+
+        if (typeof value1 === "number" && typeof value2 === "number") {
+            if (isNaN(value1) && isNaN(value2))
+                return 0;
+            if (isNaN(value1))
+                return sortDirection * -1;
+            if (isNaN(value2))
+                return sortDirection * 1;
+            return (value1 - value2) * sortDirection;
+        }
+
+        if (typeof value1 === "string" && typeof value2 === "string")
+            return value1.localeCompare(value2) * sortDirection;
+
+        if (value1 instanceof WebInspector.CallFrame || value2 instanceof WebInspector.CallFrame) {
+            // Sort by function name if available, then fall back to the source code object.
+            value1 = value1 && value1.functionName ? value1.functionName : (value1 && value1.sourceCodeLocation ? value1.sourceCodeLocation.sourceCode : "");
+            value2 = value2 && value2.functionName ? value2.functionName : (value2 && value2.sourceCodeLocation ? value2.sourceCodeLocation.sourceCode : "");
+        }
+
+        if (value1 instanceof WebInspector.SourceCode || value2 instanceof WebInspector.SourceCode) {
+            value1 = value1 ? value1.displayName || "" : "";
+            value2 = value2 ? value2.displayName || "" : "";
+        }
+
+        // For everything else (mostly booleans).
+        return (value1 < value2 ? -1 : (value1 > value2 ? 1 : 0)) * sortDirection;
+    },
+
+    _createDataGridNodeForRecord: function(record)
+    {
+        var baseStartTime = WebInspector.timelineManager.records[0].startTime;
+
+        switch (record.type) {
+        case WebInspector.TimelineRecord.Type.Network:
+            return new WebInspector.ResourceTimelineDataGridNode(record);
+        case WebInspector.TimelineRecord.Type.Layout:
+            return new WebInspector.LayoutTimelineDataGridNode(record, baseStartTime);
+        case WebInspector.TimelineRecord.Type.Script:
+            return new WebInspector.ScriptTimelineDataGridNode(record, baseStartTime);
+        }
+
+        console.error("Unknown record type: " + record.type);
+        return null;
+    },
+
+    _scheduleGridNodeForRefresh: function(event)
+    {
+        var gridNode = event.target;
+        var record = gridNode.record;
+
+        if (gridNode._pendingRefresh)
+            return;
+        gridNode._pendingRefresh = true;
+
+        if (!this._pendingRefreshGridNodes[record.type])
+            this._pendingRefreshGridNodes[record.type] = [];
+        this._pendingRefreshGridNodes[record.type].push(gridNode);
+
+        this._updatePendingRecordsSoon();
+    },
+
+    _makeColumnScopeBar: function(prefix, dictionary)
+    {
+        prefix = "timeline-" + prefix + "-data-grid-";
+
+        var keys = Object.keys(dictionary).filter(function(key) {
+            return typeof dictionary[key] === "string" || dictionary[key] instanceof String;
+        });
+
+        var scopeBarItems = keys.map(function(key) {
+            var value = dictionary[key];
+            var id = prefix + value;
+            var label = dictionary.displayName(value, true);
+            var item = new WebInspector.ScopeBarItem(id, label);
+            item.value = value;
+            return item;
+        });
+
+        scopeBarItems.unshift(new WebInspector.ScopeBarItem(prefix + "type-all", WebInspector.UIString("All"), true));
+        
+        return new WebInspector.ScopeBar(prefix + "scope-bar", scopeBarItems, scopeBarItems[0]);
+    },
+
+    _dataGridFiltersDidChange: function(event)
+    {
+        var dataGrid = event.target;
+        if (this._currentDataGrid === dataGrid)
+            this._refreshAllRecordsForCurrentDataGrid();
+
+        this._timelineOverview.update();
+    },
+
+    _refreshAllRecordsForCurrentDataGrid: function()
+    {
+        var dataGrid = this._currentDataGrid;
+        var recordType = this._currentRecordType;
+        var records = this.timelineOverviewRecordsWithType(recordType);
+
+        var nodes = records.map(function(record) {
+            return this._createDataGridNodeForRecord(record);
+        }, this);
+        
+        dataGrid.removeChildren();
+        nodes.sort(this._sortComparator.bind(this)).forEach(function(node) {
+            dataGrid.appendChild(node);
+        });
+
+        delete this._pendingRefreshGridNodes[recordType];
+        
+        this._updateOffscreenRows();
+    },
+
+    _filterRecordsWithType: function(records, type)
+    {
+        var dataGrid = this._dataGridMap[type];
+        var identifiers = dataGrid.filterableColumns;
+
+        function filterableValueForRecordAndIdentifier(record, identifier)
+        {
+            switch (type) {
+            case WebInspector.TimelineRecord.Type.Network:
+                return record.resource[identifier];
+            case WebInspector.TimelineRecord.Type.Layout:
+                return record[identifier];
+            case WebInspector.TimelineRecord.Type.Script:
+                return record[identifier];
+            }
+        }
+
+        return records.filter(function(record) {
+            for (var i = 0; i < identifiers.length; i++) {
+                var identifier = identifiers[i];
+                var scopeBar = dataGrid.columns[identifier].scopeBar;
+                if (!scopeBar || scopeBar.defaultItem.selected)
+                    continue;
+                var value = filterableValueForRecordAndIdentifier(record, identifier);
+                var matchesFilter = scopeBar.selectedItems.some(function(scopeBarItem) {
+                    return (scopeBarItem.value === value);
+                });
+                if (!matchesFilter)
+                    return false;
+            }
+            return true;
+        });
+    }
+};
+
+WebInspector.TimelinesContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelinesObject.js b/Source/WebInspectorUI/UserInterface/TimelinesObject.js
new file mode 100644
index 000000000..1ea0931f3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TimelinesObject.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelinesObject = function()
+{
+};
+
+WebInspector.TimelinesObject.prototype = {
+    constructor: WebInspector.TimelinesObject
+};
+
+WebInspector.TimelinesObject.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ToggleButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/ToggleButtonNavigationItem.js
new file mode 100644
index 000000000..fd44a6e7a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ToggleButtonNavigationItem.js
@@ -0,0 +1,112 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ToggleButtonNavigationItem = function(identifier, defaultToolTip, alternateToolTip, defaultImage, alternateImage, imageWidth, imageHeight, suppressEmboss) {
+    WebInspector.ButtonNavigationItem.call(this, identifier, defaultToolTip, defaultImage, imageWidth, imageHeight, suppressEmboss);
+
+    this._toggled = false;
+    this._defaultImage = defaultImage;
+    this._alternateImage = alternateImage;
+    this._defaultToolTip = defaultToolTip;
+    this._alternateToolTip = alternateToolTip || defaultToolTip;
+};
+
+WebInspector.ToggleButtonNavigationItem.StyleClassName = "toggle";
+
+WebInspector.ToggleButtonNavigationItem.prototype = {
+    constructor: WebInspector.ToggleButtonNavigationItem,
+
+    // Public
+
+    get defaultToolTip()
+    {
+        return this._defaultToolTip;
+    },
+
+    get alternateToolTip()
+    {
+        return this._alternateToolTip;
+    },
+
+    set alternateToolTip(toolTip)
+    {
+        this._alternateToolTip = toolTip;
+
+        if (this._toggled)
+            this.toolTip = this._alternateToolTip;
+    },
+
+    get defaultImage()
+    {
+        return this._defaultImage;
+    },
+
+    get alternateImage()
+    {
+        return this._alternateImage;
+    },
+
+    set alternateImage(image)
+    {
+        this._alternateImage = image;
+
+        if (this._toggled)
+            this.image = this._alternateImage;
+    },
+
+    get toggled()
+    {
+        return this._toggled;
+    },
+
+    set toggled(flag)
+    {
+        flag = flag || false;
+
+        if (this._toggled === flag)
+            return;
+
+        this._toggled = flag;
+
+        if (this._toggled) {
+            this.toolTip = this._alternateToolTip;
+            this.image = this._alternateImage;
+        } else {
+            this.toolTip = this._defaultToolTip;
+            this.image = this._defaultImage;
+        }
+    },
+
+    // Private
+
+    _additionalClassNames: [WebInspector.ToggleButtonNavigationItem.StyleClassName, WebInspector.ButtonNavigationItem.StyleClassName],
+
+    // The image isn't cacheable because it dynamically changes and the same canvas identifier is reused.
+    // FIXME: We could try overriding _canvasIdentifier() to return different identifiers. If we did that
+    // we would also need to override generateStyleText() to use the different identifiers.
+    _imageCacheable: false
+};
+
+WebInspector.ToggleButtonNavigationItem.prototype.__proto__ = WebInspector.ButtonNavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ToggleControlToolbarItem.js b/Source/WebInspectorUI/UserInterface/ToggleControlToolbarItem.js
new file mode 100644
index 000000000..b9a3bdb8f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/ToggleControlToolbarItem.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ToggleControlToolbarItem = function(identifier, defaultToolTip, alternateToolTip, defaultImage, alternateImage, imageWidth, imageHeight) {
+    WebInspector.ToggleButtonNavigationItem.call(this, identifier, defaultToolTip, alternateToolTip, defaultImage, alternateImage, imageWidth, imageHeight, false);
+};
+
+WebInspector.ToggleControlToolbarItem.StyleClassName = "toggle";
+
+WebInspector.ToggleControlToolbarItem.prototype = {
+    constructor: WebInspector.ToggleControlToolbarItem,
+
+    // Private
+
+    _additionalClassNames: [WebInspector.ToggleControlToolbarItem.StyleClassName, WebInspector.ControlToolbarItem.StyleClassName]
+};
+
+WebInspector.ToggleControlToolbarItem.prototype.__proto__ = WebInspector.ToggleButtonNavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Toolbar.css b/Source/WebInspectorUI/UserInterface/Toolbar.css
new file mode 100644
index 000000000..f3f65674d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Toolbar.css
@@ -0,0 +1,121 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.toolbar {
+    display: -webkit-flex;
+
+    white-space: nowrap;
+    overflow: hidden;
+
+    border-bottom: 1px solid rgb(85, 85, 85);
+
+    outline: none;
+}
+
+.toolbar.icon-and-label-vertical {
+    height: 56px;
+}
+
+.toolbar.icon-and-label-vertical.small-size {
+    height: 48px;
+}
+
+.toolbar.icon-and-label-horizontal,
+.toolbar.icon-only {
+    height: 40px;
+}
+
+.toolbar.icon-and-label-horizontal.small-size,
+.toolbar.icon-only.small-size,
+.toolbar.label-only {
+    height: 32px;
+}
+
+body.docked .toolbar {
+    background-image: -webkit-linear-gradient(top, rgb(216, 216, 216), rgb(190, 190, 190));
+    box-shadow: inset rgba(255, 255, 255, 0.1) 0 1px 0, inset rgba(0, 0, 0, 0.02) 0 -1px 0;
+}
+
+body:not(.docked) .toolbar .item.button > .label {
+ /* We need to disable sub-pixel antialiasing in the toolbar when not docked because the
+    toolbar is transparent and so is the WebView. */
+    -webkit-font-smoothing: antialiased;
+
+ /* Compensate for the text not being sub-pixel antialiased by adding a small stroke. */
+    -webkit-text-stroke: 0.2px;
+}
+
+body.window-inactive .toolbar {
+    border-bottom: 1px solid rgb(128, 128, 128);
+}
+
+.toolbar .control-section {
+    display: -webkit-flex;
+
+    -webkit-flex-direction: column;
+    -webkit-align-items: center;
+    -webkit-justify-content: center;
+
+    padding-left: 6px;
+    padding-right: 6px;
+
+    min-width: -webkit-min-content;
+}
+
+.toolbar.icon-and-label-horizontal.small-size .control-section,
+.toolbar.icon-only.small-size .control-section,
+.toolbar.label-only .control-section {
+    -webkit-flex-direction: row;
+}
+
+.toolbar .item-section {
+    display: -webkit-flex;
+    min-width: -webkit-min-content;
+}
+
+.toolbar .item-section:not(.center) {
+    -webkit-flex: 1;
+}
+
+.toolbar .item-section.left {
+    -webkit-justify-content: flex-start;
+    margin-right: 12px;
+}
+
+.toolbar .item-section.center {
+    -webkit-flex: 2;
+    -webkit-justify-content: center;
+}
+
+.toolbar .item-section.right {
+    -webkit-justify-content: flex-end;
+    margin-left: 12px;
+    margin-right: 12px;
+}
+
+.toolbar .item {
+    display: -webkit-flex;
+    outline: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Toolbar.js b/Source/WebInspectorUI/UserInterface/Toolbar.js
new file mode 100644
index 000000000..963da3762
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Toolbar.js
@@ -0,0 +1,238 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Toolbar = function(element, navigationItems) {
+    WebInspector.NavigationBar.call(this, element, navigationItems, "toolbar");
+
+    this.displayMode = WebInspector.Toolbar.DisplayMode.IconAndLabelVertical;
+    this.sizeMode = WebInspector.Toolbar.SizeMode.Normal;
+
+    this._controlSectionElement = document.createElement("div");
+    this._controlSectionElement.className = WebInspector.Toolbar.ControlSectionStyleClassName;
+    this._element.appendChild(this._controlSectionElement);
+
+    this._leftSectionElement = document.createElement("div");
+    this._leftSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.LeftItemSectionStyleClassName;
+    this._element.appendChild(this._leftSectionElement);
+
+    this._centerSectionElement = document.createElement("div");
+    this._centerSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.CenterItemSectionStyleClassName;
+    this._element.appendChild(this._centerSectionElement);
+
+    this._rightSectionElement = document.createElement("div");
+    this._rightSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.RightItemSectionStyleClassName;
+    this._element.appendChild(this._rightSectionElement);
+
+    this._element.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), false);
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.Toolbar);
+
+WebInspector.Toolbar.StyleClassName = "toolbar";
+WebInspector.Toolbar.ControlSectionStyleClassName = "control-section";
+WebInspector.Toolbar.ItemSectionStyleClassName = "item-section";
+WebInspector.Toolbar.LeftItemSectionStyleClassName = "left";
+WebInspector.Toolbar.CenterItemSectionStyleClassName = "center";
+WebInspector.Toolbar.RightItemSectionStyleClassName = "right";
+WebInspector.Toolbar.TotalSectionMargins = 12 * 3;
+
+WebInspector.Toolbar.Event = {
+    DisplayModeDidChange: "toolbar-display-mode-did-change",
+    SizeModeDidChange: "toolbar-size-mode-did-change"
+};
+
+WebInspector.Toolbar.Section = {
+    Control: "control",
+    Left: "left",
+    Center: "center",
+    Right: "right"
+};
+
+WebInspector.Toolbar.DisplayMode = {
+    IconAndLabelVertical: "icon-and-label-vertical",
+    IconAndLabelHorizontal: "icon-and-label-horizontal",
+    IconOnly: "icon-only",
+    LabelOnly: "label-only"
+};
+
+WebInspector.Toolbar.SizeMode = {
+    Normal: "normal-size",
+    Small: "small-size"
+};
+
+WebInspector.Toolbar.prototype = {
+    constructor: WebInspector.Toolbar,
+
+    // Public
+
+    get displayMode()
+    {
+        return this._displayMode;
+    },
+
+    set displayMode(mode)
+    {
+        if (mode === this._displayMode)
+            return;
+
+        if (this._displayMode)
+            this._element.classList.remove(this._displayMode);
+
+        // Revert the forced icon-only mode if it was applied.
+        if (this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal)
+            this._element.classList.remove(WebInspector.Toolbar.DisplayMode.IconOnly);
+
+        this._displayMode = mode;
+
+        this._element.classList.add(mode);
+
+        this.updateLayout();
+
+        this.dispatchEventToListeners(WebInspector.Toolbar.Event.DisplayModeDidChange);
+    },
+
+    get sizeMode()
+    {
+        return this._sizeMode;
+    },
+
+    set sizeMode(mode)
+    {
+        if (mode === this._sizeMode)
+            return;
+
+        if (this._sizeMode)
+            this._element.classList.remove(this._sizeMode);
+
+        this._sizeMode = mode;
+
+        this._element.classList.add(mode);
+
+        this.updateLayout();
+
+        this.dispatchEventToListeners(WebInspector.Toolbar.Event.SizeModeDidChange);
+    },
+
+    customUpdateLayout: function()
+    {
+        // Bail early if our sections are not created yet. This means we are being called during construction.
+        if (!this._leftSectionElement || !this._centerSectionElement || !this._rightSectionElement)
+            return;
+
+        // Remove the collapsed style class to test if the items can fit at full width.
+        this._element.classList.remove(WebInspector.NavigationBar.CollapsedStyleClassName);
+
+        // Revert the forced icon-only mode if it was applied.
+        if (this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal) {
+            this._element.classList.remove(WebInspector.Toolbar.DisplayMode.IconOnly);
+            this._element.classList.add(WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
+        }
+
+        function isOverflowingToolbar()
+        {
+            var controlSectionWidth = this._controlSectionElement.offsetWidth;
+            var leftSectionWidth = this._leftSectionElement.offsetWidth;
+            var rightSectionWidth = this._rightSectionElement.offsetWidth;
+            var centerSectionWidth = this._centerSectionElement.offsetWidth;
+
+            // Add one to the actual toolbar width to allow some slop. This wasn't needed when sub-pixel layout was on,
+            // but that was disabled in: http://webkit.org/b/149209
+            var toolbarWidth = this.element.offsetWidth + 1;
+
+            return controlSectionWidth + leftSectionWidth + centerSectionWidth + rightSectionWidth + WebInspector.Toolbar.TotalSectionMargins > toolbarWidth;
+        }
+
+        // Only the horizontal display mode supports collapsing labels.
+        // If any sections are overflowing the toolbar then force the display mode to be icon only.
+        if (this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal && isOverflowingToolbar.call(this)) {
+            this._element.classList.remove(WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
+            this._element.classList.add(WebInspector.Toolbar.DisplayMode.IconOnly);
+        }
+
+        if (!isOverflowingToolbar.call(this))
+            return;
+
+        this._element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
+    },
+
+    addToolbarItem: function(toolbarItem, sectionIdentifier)
+    {
+        var sectionElement;
+
+        switch (sectionIdentifier) {
+        case WebInspector.Toolbar.Section.Control:
+            sectionElement = this._controlSectionElement;
+            break;
+
+        case WebInspector.Toolbar.Section.Left:
+            sectionElement = this._leftSectionElement;
+            break;
+
+        default:
+        case WebInspector.Toolbar.Section.Center:
+            sectionElement = this._centerSectionElement;
+            break;
+
+        case WebInspector.Toolbar.Section.Right:
+            sectionElement = this._rightSectionElement;
+            break;
+        }
+
+        console.assert(sectionElement);
+
+        this.addNavigationItem(toolbarItem, sectionElement);
+    },
+
+    // Private
+
+    _handleContextMenuEvent: function(event)
+    {
+        var contextMenu = new WebInspector.ContextMenu(event);
+
+        contextMenu.appendCheckboxItem(WebInspector.UIString("Icon and Text (Vertical)"), this._changeDisplayMode.bind(this, WebInspector.Toolbar.DisplayMode.IconAndLabelVertical), this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelVertical);
+        contextMenu.appendCheckboxItem(WebInspector.UIString("Icon and Text (Horizontal)"), this._changeDisplayMode.bind(this, WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal), this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
+        contextMenu.appendCheckboxItem(WebInspector.UIString("Icon Only"), this._changeDisplayMode.bind(this, WebInspector.Toolbar.DisplayMode.IconOnly), this._displayMode === WebInspector.Toolbar.DisplayMode.IconOnly);
+        contextMenu.appendCheckboxItem(WebInspector.UIString("Text Only"), this._changeDisplayMode.bind(this, WebInspector.Toolbar.DisplayMode.LabelOnly), this._displayMode === WebInspector.Toolbar.DisplayMode.LabelOnly);
+
+        if (this._displayMode !== WebInspector.Toolbar.DisplayMode.LabelOnly) {
+            contextMenu.appendSeparator();
+            contextMenu.appendCheckboxItem(WebInspector.UIString("Small Icons"), this._toggleSmallIcons.bind(this), this._sizeMode === WebInspector.Toolbar.SizeMode.Small);
+        }
+
+        contextMenu.show();
+    },
+
+    _changeDisplayMode: function(displayMode)
+    {
+        this.displayMode = displayMode;
+    },
+
+    _toggleSmallIcons: function()
+    {
+        this.sizeMode = this._sizeMode === WebInspector.Toolbar.SizeMode.Normal ? WebInspector.Toolbar.SizeMode.Small : WebInspector.Toolbar.SizeMode.Normal;
+    }
+};
+
+WebInspector.Toolbar.prototype.__proto__ = WebInspector.NavigationBar.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TopDownProfileDataGridTree.js b/Source/WebInspectorUI/UserInterface/TopDownProfileDataGridTree.js
new file mode 100644
index 000000000..bfcc25eee
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TopDownProfileDataGridTree.js
@@ -0,0 +1,121 @@
+/*
+ * Copyright (C) 2009 280 North Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TopDownProfileDataGridNode = function(/*ProfileView*/ profileView, /*ProfileNode*/ profileNode, /*TopDownProfileDataGridTree*/ owningTree)
+{
+    var hasChildren = (profileNode.children && profileNode.children.length);
+
+    WebInspector.ProfileDataGridNode.call(this, profileView, profileNode, owningTree, hasChildren);
+
+    this._remainingChildren = profileNode.children;
+}
+
+WebInspector.TopDownProfileDataGridNode.prototype = {
+    _sharedPopulate: function()
+    {
+        var children = this._remainingChildren;
+        var childrenLength = children.length;
+
+        for (var i = 0; i < childrenLength; ++i)
+            this.appendChild(new WebInspector.TopDownProfileDataGridNode(this.profileView, children[i], this.tree));
+
+        this._remainingChildren = null;
+    },
+
+    _exclude: function(aCallUID)
+    {
+        if (this._remainingChildren)
+            this._populate();
+
+        this._save();
+
+        var children = this.children;
+        var index = this.children.length;
+
+        while (index--)
+            children[index]._exclude(aCallUID);
+
+        var child = this.childrenByCallUID[aCallUID];
+
+        if (child)
+            this._merge(child, true);
+    }
+}
+
+WebInspector.TopDownProfileDataGridNode.prototype.__proto__ = WebInspector.ProfileDataGridNode.prototype;
+
+WebInspector.TopDownProfileDataGridTree = function(/*ProfileView*/ profileView, /*ProfileNode*/ profileNode)
+{
+    WebInspector.ProfileDataGridTree.call(this, profileView, profileNode);
+
+    this._remainingChildren = profileNode.children;
+
+    WebInspector.TopDownProfileDataGridNode.prototype._populate.call(this);
+}
+
+WebInspector.TopDownProfileDataGridTree.prototype = {
+    focus: function(/*ProfileDataGridNode*/ profileDataGrideNode)
+    {
+        if (!profileDataGrideNode)
+            return;
+
+        this._save();
+        profileDataGrideNode.savePosition();
+
+        this.children = [profileDataGrideNode];
+        this.totalTime = profileDataGrideNode.totalTime;
+    },
+
+    exclude: function(/*ProfileDataGridNode*/ profileDataGrideNode)
+    {
+        if (!profileDataGrideNode)
+            return;
+
+        this._save();
+
+        var excludedCallUID = profileDataGrideNode.callUID;
+
+        WebInspector.TopDownProfileDataGridNode.prototype._exclude.call(this, excludedCallUID);
+
+        if (this.lastComparator)
+            this.sort(this.lastComparator, true);
+    },
+
+    restore: function()
+    {
+        if (!this._savedChildren)
+            return;
+
+        this.children[0].restorePosition();
+
+        WebInspector.ProfileDataGridTree.prototype.restore.call(this);
+    },
+
+    _merge: WebInspector.TopDownProfileDataGridNode.prototype._merge,
+
+    _sharedPopulate: WebInspector.TopDownProfileDataGridNode.prototype._sharedPopulate
+}
+
+WebInspector.TopDownProfileDataGridTree.prototype.__proto__ = WebInspector.ProfileDataGridTree.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TreeOutline.js b/Source/WebInspectorUI/UserInterface/TreeOutline.js
new file mode 100644
index 000000000..048cd5b03
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TreeOutline.js
@@ -0,0 +1,1087 @@
+/*
+ * Copyright (C) 2007, 2013 Apple Inc.  All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/**
+ * @constructor
+ */
+function TreeOutline(listNode)
+{
+    WebInspector.Object.call(this);
+
+    this.element = listNode;
+
+    /**
+     * @type {Array.<TreeElement>}
+     */
+    this.children = [];
+    this.selectedTreeElement = null;
+    this._childrenListNode = listNode;
+    this._childrenListNode.removeChildren();
+    this._knownTreeElements = [];
+    this._treeElementsExpandedState = [];
+    this.expandTreeElementsWhenArrowing = false;
+    this.allowsRepeatSelection = false;
+    this.root = true;
+    this.hasChildren = false;
+    this.expanded = true;
+    this.selected = false;
+    this.treeOutline = this;
+
+    this._childrenListNode.tabIndex = 0;
+    this._childrenListNode.addEventListener("keydown", this._treeKeyDown.bind(this), true);
+}
+
+TreeOutline._knownTreeElementNextIdentifier = 1;
+
+TreeOutline.prototype.appendChild = function(child)
+{
+    if (!child)
+        throw("child can't be undefined or null");
+
+    var lastChild = this.children[this.children.length - 1];
+    if (lastChild) {
+        lastChild.nextSibling = child;
+        child.previousSibling = lastChild;
+    } else {
+        child.previousSibling = null;
+        child.nextSibling = null;
+    }
+
+    var isFirstChild = !this.children.length;
+
+    this.children.push(child);
+    this.hasChildren = true;
+    child.parent = this;
+    child.treeOutline = this.treeOutline;
+    child.treeOutline._rememberTreeElement(child);
+
+    var current = child.children[0];
+    while (current) {
+        current.treeOutline = this.treeOutline;
+        current.treeOutline._rememberTreeElement(current);
+        current = current.traverseNextTreeElement(false, child, true);
+    }
+
+    if (child.hasChildren && child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
+        child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];
+
+    if (!this._childrenListNode) {
+        this._childrenListNode = this.treeOutline._childrenListNode.ownerDocument.createElement("ol");
+        this._childrenListNode.parentTreeElement = this;
+        this._childrenListNode.classList.add("children");
+        if (this.hidden)
+            this._childrenListNode.classList.add("hidden");
+    }
+
+    child._attach();
+
+    if (this.treeOutline.onadd)
+        this.treeOutline.onadd(child);
+
+    if (isFirstChild && this.expanded)
+        this.expand();
+}
+
+TreeOutline.prototype.insertChild = function(child, index)
+{
+    if (!child)
+        throw("child can't be undefined or null");
+
+    var previousChild = (index > 0 ? this.children[index - 1] : null);
+    if (previousChild) {
+        previousChild.nextSibling = child;
+        child.previousSibling = previousChild;
+    } else {
+        child.previousSibling = null;
+    }
+
+    var nextChild = this.children[index];
+    if (nextChild) {
+        nextChild.previousSibling = child;
+        child.nextSibling = nextChild;
+    } else {
+        child.nextSibling = null;
+    }
+
+    var isFirstChild = !this.children.length;
+
+    this.children.splice(index, 0, child);
+    this.hasChildren = true;
+    child.parent = this;
+    child.treeOutline = this.treeOutline;
+    child.treeOutline._rememberTreeElement(child);
+
+    var current = child.children[0];
+    while (current) {
+        current.treeOutline = this.treeOutline;
+        current.treeOutline._rememberTreeElement(current);
+        current = current.traverseNextTreeElement(false, child, true);
+    }
+
+    if (child.hasChildren && child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
+        child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];
+
+    if (!this._childrenListNode) {
+        this._childrenListNode = this.treeOutline._childrenListNode.ownerDocument.createElement("ol");
+        this._childrenListNode.parentTreeElement = this;
+        this._childrenListNode.classList.add("children");
+        if (this.hidden)
+            this._childrenListNode.classList.add("hidden");
+    }
+
+    child._attach();
+
+    if (this.treeOutline.onadd)
+        this.treeOutline.onadd(child);
+
+    if (isFirstChild && this.expanded)
+        this.expand();
+}
+
+TreeOutline.prototype.removeChildAtIndex = function(childIndex, suppressOnDeselect, suppressSelectSibling)
+{
+    if (childIndex < 0 || childIndex >= this.children.length)
+        throw("childIndex out of range");
+
+    var child = this.children[childIndex];
+    this.children.splice(childIndex, 1);
+
+    var parent = child.parent;
+    if (child.deselect(suppressOnDeselect)) {
+        if (child.previousSibling && !suppressSelectSibling)
+            child.previousSibling.select(true, false);
+        else if (child.nextSibling && !suppressSelectSibling)
+            child.nextSibling.select(true, false);
+        else if (!suppressSelectSibling)
+            parent.select(true, false);
+    }
+
+    if (child.previousSibling)
+        child.previousSibling.nextSibling = child.nextSibling;
+    if (child.nextSibling)
+        child.nextSibling.previousSibling = child.previousSibling;
+
+    if (child.treeOutline) {
+        child.treeOutline._forgetTreeElement(child);
+        child.treeOutline._forgetChildrenRecursive(child);
+    }
+
+    child._detach();
+    child.treeOutline = null;
+    child.parent = null;
+    child.nextSibling = null;
+    child.previousSibling = null;
+}
+
+TreeOutline.prototype.removeChild = function(child, suppressOnDeselect, suppressSelectSibling)
+{
+    if (!child)
+        throw("child can't be undefined or null");
+
+    var childIndex = this.children.indexOf(child);
+    if (childIndex === -1)
+        throw("child not found in this node's children");
+
+    this.removeChildAtIndex(childIndex, suppressOnDeselect, suppressSelectSibling);
+}
+
+TreeOutline.prototype.removeChildren = function(suppressOnDeselect)
+{
+    for (var i = 0; i < this.children.length; ++i) {
+        var child = this.children[i];
+        child.deselect(suppressOnDeselect);
+
+        if (child.treeOutline) {
+            child.treeOutline._forgetTreeElement(child);
+            child.treeOutline._forgetChildrenRecursive(child);
+        }
+
+        child._detach();
+        child.treeOutline = null;
+        child.parent = null;
+        child.nextSibling = null;
+        child.previousSibling = null;
+    }
+
+    this.children = [];
+}
+
+TreeOutline.prototype.removeChildrenRecursive = function(suppressOnDeselect)
+{
+    var childrenToRemove = this.children;
+
+    var child = this.children[0];
+    while (child) {
+        if (child.children.length)
+            childrenToRemove = childrenToRemove.concat(child.children);
+        child = child.traverseNextTreeElement(false, this, true);
+    }
+
+    for (var i = 0; i < childrenToRemove.length; ++i) {
+        child = childrenToRemove[i];
+        child.deselect(suppressOnDeselect);
+        if (child.treeOutline)
+            child.treeOutline._forgetTreeElement(child);
+        child._detach();
+        child.children = [];
+        child.treeOutline = null;
+        child.parent = null;
+        child.nextSibling = null;
+        child.previousSibling = null;
+    }
+
+    this.children = [];
+}
+
+TreeOutline.prototype._rememberTreeElement = function(element)
+{
+    if (!this._knownTreeElements[element.identifier])
+        this._knownTreeElements[element.identifier] = [];
+
+    // check if the element is already known
+    var elements = this._knownTreeElements[element.identifier];
+    if (elements.indexOf(element) !== -1)
+        return;
+
+    // add the element
+    elements.push(element);
+}
+
+TreeOutline.prototype._forgetTreeElement = function(element)
+{
+    if (this._knownTreeElements[element.identifier])
+        this._knownTreeElements[element.identifier].remove(element, true);
+}
+
+TreeOutline.prototype._forgetChildrenRecursive = function(parentElement)
+{
+    var child = parentElement.children[0];
+    while (child) {
+        this._forgetTreeElement(child);
+        child = child.traverseNextTreeElement(false, parentElement, true);
+    }
+}
+
+TreeOutline.prototype.getCachedTreeElement = function(representedObject)
+{
+    if (!representedObject)
+        return null;
+
+    if ("__treeElementIdentifier" in representedObject) {
+        // If this representedObject has a tree element identifier, and it is a known TreeElement
+        // in our tree we can just return that tree element.
+        var elements = this._knownTreeElements[representedObject.__treeElementIdentifier];
+        if (elements) {
+            for (var i = 0; i < elements.length; ++i)
+                if (elements[i].representedObject === representedObject)
+                    return elements[i];
+        }
+    }
+    return null;
+}
+
+TreeOutline.prototype.findTreeElement = function(representedObject, isAncestor, getParent)
+{
+    if (!representedObject)
+        return null;
+
+    var cachedElement = this.getCachedTreeElement(representedObject);
+    if (cachedElement)
+        return cachedElement;
+
+    // The representedObject isn't known, so we start at the top of the tree and work down to find the first
+    // tree element that represents representedObject or one of its ancestors.
+    var item;
+    var found = false;
+    for (var i = 0; i < this.children.length; ++i) {
+        item = this.children[i];
+        if (item.representedObject === representedObject || isAncestor(item.representedObject, representedObject)) {
+            found = true;
+            break;
+        }
+    }
+
+    if (!found)
+        return null;
+
+    // Make sure the item that we found is connected to the root of the tree.
+    // Build up a list of representedObject's ancestors that aren't already in our tree.
+    var ancestors = [];
+    var currentObject = representedObject;
+    while (currentObject) {
+        ancestors.unshift(currentObject);
+        if (currentObject === item.representedObject)
+            break;
+        currentObject = getParent(currentObject);
+    }
+
+    // For each of those ancestors we populate them to fill in the tree.
+    for (var i = 0; i < ancestors.length; ++i) {
+        // Make sure we don't call findTreeElement with the same representedObject
+        // again, to prevent infinite recursion.
+        if (ancestors[i] === representedObject)
+            continue;
+        // FIXME: we could do something faster than findTreeElement since we will know the next
+        // ancestor exists in the tree.
+        item = this.findTreeElement(ancestors[i], isAncestor, getParent);
+        if (item)
+            item.onpopulate();
+    }
+
+    return this.getCachedTreeElement(representedObject);
+}
+
+TreeOutline.prototype._treeElementDidChange = function(treeElement)
+{
+    if (treeElement.treeOutline !== this)
+        return;
+
+    if (this.onchange)
+        this.onchange(treeElement);
+}
+
+TreeOutline.prototype.treeElementFromPoint = function(x, y)
+{
+    var node = this._childrenListNode.ownerDocument.elementFromPoint(x, y);
+    if (!node)
+        return null;
+
+    var listNode = node.enclosingNodeOrSelfWithNodeNameInArray(["ol", "li"]);
+    if (listNode)
+        return listNode.parentTreeElement || listNode.treeElement;
+    return null;
+}
+
+TreeOutline.prototype._treeKeyDown = function(event)
+{
+    if (event.target !== this._childrenListNode)
+        return;
+
+    if (!this.selectedTreeElement || event.shiftKey || event.metaKey || event.ctrlKey)
+        return;
+
+    var handled = false;
+    var nextSelectedElement;
+    if (event.keyIdentifier === "Up" && !event.altKey) {
+        nextSelectedElement = this.selectedTreeElement.traversePreviousTreeElement(true);
+        while (nextSelectedElement && !nextSelectedElement.selectable)
+            nextSelectedElement = nextSelectedElement.traversePreviousTreeElement(!this.expandTreeElementsWhenArrowing);
+        handled = nextSelectedElement ? true : false;
+    } else if (event.keyIdentifier === "Down" && !event.altKey) {
+        nextSelectedElement = this.selectedTreeElement.traverseNextTreeElement(true);
+        while (nextSelectedElement && !nextSelectedElement.selectable)
+            nextSelectedElement = nextSelectedElement.traverseNextTreeElement(!this.expandTreeElementsWhenArrowing);
+        handled = nextSelectedElement ? true : false;
+    } else if (event.keyIdentifier === "Left") {
+        if (this.selectedTreeElement.expanded) {
+            if (event.altKey)
+                this.selectedTreeElement.collapseRecursively();
+            else
+                this.selectedTreeElement.collapse();
+            handled = true;
+        } else if (this.selectedTreeElement.parent && !this.selectedTreeElement.parent.root) {
+            handled = true;
+            if (this.selectedTreeElement.parent.selectable) {
+                nextSelectedElement = this.selectedTreeElement.parent;
+                while (nextSelectedElement && !nextSelectedElement.selectable)
+                    nextSelectedElement = nextSelectedElement.parent;
+                handled = nextSelectedElement ? true : false;
+            } else if (this.selectedTreeElement.parent)
+                this.selectedTreeElement.parent.collapse();
+        }
+    } else if (event.keyIdentifier === "Right") {
+        if (!this.selectedTreeElement.revealed()) {
+            this.selectedTreeElement.reveal();
+            handled = true;
+        } else if (this.selectedTreeElement.hasChildren) {
+            handled = true;
+            if (this.selectedTreeElement.expanded) {
+                nextSelectedElement = this.selectedTreeElement.children[0];
+                while (nextSelectedElement && !nextSelectedElement.selectable)
+                    nextSelectedElement = nextSelectedElement.nextSibling;
+                handled = nextSelectedElement ? true : false;
+            } else {
+                if (event.altKey)
+                    this.selectedTreeElement.expandRecursively();
+                else
+                    this.selectedTreeElement.expand();
+            }
+        }
+    } else if (event.keyCode === 8 /* Backspace */ || event.keyCode === 46 /* Delete */) {
+        if (this.selectedTreeElement.ondelete)
+            handled = this.selectedTreeElement.ondelete();
+        if (!handled && this.treeOutline.ondelete)
+            handled = this.treeOutline.ondelete(this.selectedTreeElement);
+    } else if (isEnterKey(event)) {
+        if (this.selectedTreeElement.onenter)
+            handled = this.selectedTreeElement.onenter();
+        if (!handled && this.treeOutline.onenter)
+            handled = this.treeOutline.onenter(this.selectedTreeElement);
+    } else if (event.keyIdentifier === "U+0020" /* Space */) {
+        if (this.selectedTreeElement.onspace)
+            handled = this.selectedTreeElement.onspace();
+        if (!handled && this.treeOutline.onspace)
+            handled = this.treeOutline.onspace(this.selectedTreeElement);
+    }
+
+    if (nextSelectedElement) {
+        nextSelectedElement.reveal();
+        nextSelectedElement.select(false, true);
+    }
+
+    if (handled) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+}
+
+TreeOutline.prototype.expand = function()
+{
+    // this is the root, do nothing
+}
+
+TreeOutline.prototype.collapse = function()
+{
+    // this is the root, do nothing
+}
+
+TreeOutline.prototype.revealed = function()
+{
+    return true;
+}
+
+TreeOutline.prototype.reveal = function()
+{
+    // this is the root, do nothing
+}
+
+TreeOutline.prototype.select = function()
+{
+    // this is the root, do nothing
+}
+
+/**
+ * @param {boolean=} omitFocus
+ */
+TreeOutline.prototype.revealAndSelect = function(omitFocus)
+{
+    // this is the root, do nothing
+}
+
+TreeOutline.prototype.__proto__ = WebInspector.Object.prototype;
+
+/**
+ * @constructor
+ * @param {Object=} representedObject
+ * @param {boolean=} hasChildren
+ */
+function TreeElement(title, representedObject, hasChildren)
+{
+    WebInspector.Object.call(this);
+
+    this._title = title;
+    this.representedObject = (representedObject || {});
+
+    if (this.representedObject.__treeElementIdentifier)
+        this.identifier = this.representedObject.__treeElementIdentifier;
+    else {
+        this.identifier = TreeOutline._knownTreeElementNextIdentifier++;
+        this.representedObject.__treeElementIdentifier = this.identifier;
+    }
+
+    this._hidden = false;
+    this._selectable = true;
+    this.expanded = false;
+    this.selected = false;
+    this.hasChildren = hasChildren;
+    this.children = [];
+    this.treeOutline = null;
+    this.parent = null;
+    this.previousSibling = null;
+    this.nextSibling = null;
+    this._listItemNode = null;
+}
+
+TreeElement.prototype = {
+    constructor: TreeElement,
+
+    arrowToggleWidth: 10,
+
+    get selectable() {
+        if (this._hidden)
+            return false;
+        return this._selectable;
+    },
+
+    set selectable(x) {
+        this._selectable = x;
+    },
+
+    get listItemElement() {
+        return this._listItemNode;
+    },
+
+    get childrenListElement() {
+        return this._childrenListNode;
+    },
+
+    get title() {
+        return this._title;
+    },
+
+    set title(x) {
+        this._title = x;
+        this._setListItemNodeContent();
+        this.didChange();
+    },
+
+    get titleHTML() {
+        return this._titleHTML;
+    },
+
+    set titleHTML(x) {
+        this._titleHTML = x;
+        this._setListItemNodeContent();
+        this.didChange();
+    },
+
+    get tooltip() {
+        return this._tooltip;
+    },
+
+    set tooltip(x) {
+        this._tooltip = x;
+        if (this._listItemNode)
+            this._listItemNode.title = x ? x : "";
+        this.didChange();
+    },
+
+    get hasChildren() {
+        return this._hasChildren;
+    },
+
+    set hasChildren(x) {
+        if (this._hasChildren === x)
+            return;
+
+        this._hasChildren = x;
+
+        if (!this._listItemNode)
+            return;
+
+        if (x)
+            this._listItemNode.classList.add("parent");
+        else {
+            this._listItemNode.classList.remove("parent");
+            this.collapse();
+        }
+
+        this.didChange();
+    },
+
+    get hidden() {
+        return this._hidden;
+    },
+
+    set hidden(x) {
+        if (this._hidden === x)
+            return;
+
+        this._hidden = x;
+
+        if (x) {
+            if (this._listItemNode)
+                this._listItemNode.classList.add("hidden");
+            if (this._childrenListNode)
+                this._childrenListNode.classList.add("hidden");
+        } else {
+            if (this._listItemNode)
+                this._listItemNode.classList.remove("hidden");
+            if (this._childrenListNode)
+                this._childrenListNode.classList.remove("hidden");
+        }
+    },
+
+    get shouldRefreshChildren() {
+        return this._shouldRefreshChildren;
+    },
+
+    set shouldRefreshChildren(x) {
+        this._shouldRefreshChildren = x;
+        if (x && this.expanded)
+            this.expand();
+    },
+
+    _fireDidChange: function()
+    {
+        delete this._didChangeTimeoutIdentifier;
+
+        if (this.treeOutline)
+            this.treeOutline._treeElementDidChange(this);
+    },
+
+    didChange: function()
+    {
+        if (!this.treeOutline)
+            return;
+
+        // Prevent telling the TreeOutline multiple times in a row by delaying it with a timeout.
+        if (!this._didChangeTimeoutIdentifier)
+            this._didChangeTimeoutIdentifier = setTimeout(this._fireDidChange.bind(this), 0);
+    },
+
+    _setListItemNodeContent: function()
+    {
+        if (!this._listItemNode)
+            return;
+
+        if (!this._titleHTML && !this._title)
+            this._listItemNode.removeChildren();
+        else if (typeof this._titleHTML === "string")
+            this._listItemNode.innerHTML = this._titleHTML;
+        else if (typeof this._title === "string")
+            this._listItemNode.textContent = this._title;
+        else {
+            this._listItemNode.removeChildren();
+            if (this._title.parentNode)
+                this._title.parentNode.removeChild(this._title);
+            this._listItemNode.appendChild(this._title);
+        }
+    }
+}
+
+TreeElement.prototype.appendChild = TreeOutline.prototype.appendChild;
+TreeElement.prototype.insertChild = TreeOutline.prototype.insertChild;
+TreeElement.prototype.removeChild = TreeOutline.prototype.removeChild;
+TreeElement.prototype.removeChildAtIndex = TreeOutline.prototype.removeChildAtIndex;
+TreeElement.prototype.removeChildren = TreeOutline.prototype.removeChildren;
+TreeElement.prototype.removeChildrenRecursive = TreeOutline.prototype.removeChildrenRecursive;
+
+TreeElement.prototype._attach = function()
+{
+    if (!this._listItemNode || this.parent._shouldRefreshChildren) {
+        if (this._listItemNode && this._listItemNode.parentNode)
+            this._listItemNode.parentNode.removeChild(this._listItemNode);
+
+        this._listItemNode = this.treeOutline._childrenListNode.ownerDocument.createElement("li");
+        this._listItemNode.treeElement = this;
+        this._setListItemNodeContent();
+        this._listItemNode.title = this._tooltip ? this._tooltip : "";
+
+        if (this.hidden)
+            this._listItemNode.classList.add("hidden");
+        if (this.hasChildren)
+            this._listItemNode.classList.add("parent");
+        if (this.expanded)
+            this._listItemNode.classList.add("expanded");
+        if (this.selected)
+            this._listItemNode.classList.add("selected");
+
+        this._listItemNode.addEventListener("mousedown", TreeElement.treeElementMouseDown, false);
+        this._listItemNode.addEventListener("click", TreeElement.treeElementToggled, false);
+        this._listItemNode.addEventListener("dblclick", TreeElement.treeElementDoubleClicked, false);
+
+        if (this.onattach)
+            this.onattach(this);
+    }
+
+    var nextSibling = null;
+    if (this.nextSibling && this.nextSibling._listItemNode && this.nextSibling._listItemNode.parentNode === this.parent._childrenListNode)
+        nextSibling = this.nextSibling._listItemNode;
+    this.parent._childrenListNode.insertBefore(this._listItemNode, nextSibling);
+    if (this._childrenListNode)
+        this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
+    if (this.selected)
+        this.select();
+    if (this.expanded)
+        this.expand();
+}
+
+TreeElement.prototype._detach = function()
+{
+    if (this.ondetach)
+        this.ondetach(this);
+    if (this._listItemNode && this._listItemNode.parentNode)
+        this._listItemNode.parentNode.removeChild(this._listItemNode);
+    if (this._childrenListNode && this._childrenListNode.parentNode)
+        this._childrenListNode.parentNode.removeChild(this._childrenListNode);
+}
+
+TreeElement.treeElementMouseDown = function(event)
+{
+    var element = event.currentTarget;
+    if (!element || !element.treeElement || !element.treeElement.selectable)
+        return;
+
+    if (element.treeElement.isEventWithinDisclosureTriangle(event)) {
+        event.preventDefault();
+        return;
+    }
+
+    element.treeElement.selectOnMouseDown(event);
+}
+
+TreeElement.treeElementToggled = function(event)
+{
+    var element = event.currentTarget;
+    if (!element || !element.treeElement)
+        return;
+
+    var toggleOnClick = element.treeElement.toggleOnClick && !element.treeElement.selectable;
+    var isInTriangle = element.treeElement.isEventWithinDisclosureTriangle(event);
+    if (!toggleOnClick && !isInTriangle)
+        return;
+
+    if (element.treeElement.expanded) {
+        if (event.altKey)
+            element.treeElement.collapseRecursively();
+        else
+            element.treeElement.collapse();
+    } else {
+        if (event.altKey)
+            element.treeElement.expandRecursively();
+        else
+            element.treeElement.expand();
+    }
+    event.stopPropagation();
+}
+
+TreeElement.treeElementDoubleClicked = function(event)
+{
+    var element = event.currentTarget;
+    if (!element || !element.treeElement)
+        return;
+
+    if (element.treeElement.isEventWithinDisclosureTriangle(event))
+        return;
+
+    if (element.treeElement.ondblclick)
+        element.treeElement.ondblclick.call(element.treeElement, event);
+    else if (element.treeElement.hasChildren && !element.treeElement.expanded)
+        element.treeElement.expand();
+}
+
+TreeElement.prototype.collapse = function()
+{
+    if (this._listItemNode)
+        this._listItemNode.classList.remove("expanded");
+    if (this._childrenListNode)
+        this._childrenListNode.classList.remove("expanded");
+
+    this.expanded = false;
+    if (this.treeOutline)
+        this.treeOutline._treeElementsExpandedState[this.identifier] = false;
+
+    if (this.oncollapse)
+        this.oncollapse(this);
+
+    if (this.treeOutline && this.treeOutline.oncollapse)
+        this.treeOutline.oncollapse(this);
+}
+
+TreeElement.prototype.collapseRecursively = function()
+{
+    var item = this;
+    while (item) {
+        if (item.expanded)
+            item.collapse();
+        item = item.traverseNextTreeElement(false, this, true);
+    }
+}
+
+TreeElement.prototype.expand = function()
+{
+    if (this.expanded && !this._shouldRefreshChildren && this._childrenListNode)
+        return;
+
+    // Set this before onpopulate. Since onpopulate can add elements and call onadd, this makes
+    // sure the expanded flag is true before calling those functions. This prevents the possibility
+    // of an infinite loop if onpopulate or onadd were to call expand.
+
+    this.expanded = true;
+    if (this.treeOutline)
+        this.treeOutline._treeElementsExpandedState[this.identifier] = true;
+
+    // If there are no children, return. We will be expanded once we have children.
+    if (!this.hasChildren)
+        return;
+
+    if (this.treeOutline && (!this._childrenListNode || this._shouldRefreshChildren)) {
+        if (this._childrenListNode && this._childrenListNode.parentNode)
+            this._childrenListNode.parentNode.removeChild(this._childrenListNode);
+
+        this._childrenListNode = this.treeOutline._childrenListNode.ownerDocument.createElement("ol");
+        this._childrenListNode.parentTreeElement = this;
+        this._childrenListNode.classList.add("children");
+
+        if (this.hidden)
+            this._childrenListNode.classList.add("hidden");
+
+        this.onpopulate();
+
+        for (var i = 0; i < this.children.length; ++i)
+            this.children[i]._attach();
+
+        delete this._shouldRefreshChildren;
+    }
+
+    if (this._listItemNode) {
+        this._listItemNode.classList.add("expanded");
+        if (this._childrenListNode && this._childrenListNode.parentNode != this._listItemNode.parentNode)
+            this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
+    }
+
+    if (this._childrenListNode)
+        this._childrenListNode.classList.add("expanded");
+
+    if (this.onexpand)
+        this.onexpand(this);
+
+    if (this.treeOutline && this.treeOutline.onexpand)
+        this.treeOutline.onexpand(this);
+}
+
+TreeElement.prototype.expandRecursively = function(maxDepth)
+{
+    var item = this;
+    var info = {};
+    var depth = 0;
+
+    // The Inspector uses TreeOutlines to represents object properties, so recursive expansion
+    // in some case can be infinite, since JavaScript objects can hold circular references.
+    // So default to a recursion cap of 3 levels, since that gives fairly good results.
+    if (typeof maxDepth === "undefined" || typeof maxDepth === "null")
+        maxDepth = 3;
+
+    while (item) {
+        if (depth < maxDepth)
+            item.expand();
+        item = item.traverseNextTreeElement(false, this, (depth >= maxDepth), info);
+        depth += info.depthChange;
+    }
+}
+
+TreeElement.prototype.hasAncestor = function(ancestor) {
+    if (!ancestor)
+        return false;
+
+    var currentNode = this.parent;
+    while (currentNode) {
+        if (ancestor === currentNode)
+            return true;
+        currentNode = currentNode.parent;
+    }
+
+    return false;
+}
+
+TreeElement.prototype.reveal = function()
+{
+    var currentAncestor = this.parent;
+    while (currentAncestor && !currentAncestor.root) {
+        if (!currentAncestor.expanded)
+            currentAncestor.expand();
+        currentAncestor = currentAncestor.parent;
+    }
+
+    if (this.onreveal)
+        this.onreveal(this);
+}
+
+TreeElement.prototype.revealed = function()
+{
+    var currentAncestor = this.parent;
+    while (currentAncestor && !currentAncestor.root) {
+        if (!currentAncestor.expanded)
+            return false;
+        currentAncestor = currentAncestor.parent;
+    }
+
+    return true;
+}
+
+TreeElement.prototype.selectOnMouseDown = function(event)
+{
+    this.select(false, true);
+}
+
+/**
+ * @param {boolean=} omitFocus
+ * @param {boolean=} selectedByUser
+ */
+TreeElement.prototype.select = function(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect)
+{
+    if (!this.treeOutline || !this.selectable)
+        return;
+
+    if (this.selected && !this.treeOutline.allowsRepeatSelection)
+        return;
+
+    if (!omitFocus)
+        this.treeOutline._childrenListNode.focus();
+
+    // Focusing on another node may detach "this" from tree.
+    if (!this.treeOutline)
+        return;
+
+    this.treeOutline.processingSelectionChange = true;
+
+    if (!this.selected) {
+        if (this.treeOutline.selectedTreeElement)
+            this.treeOutline.selectedTreeElement.deselect(suppressOnDeselect);
+
+        this.selected = true;
+        this.treeOutline.selectedTreeElement = this;
+
+        if (this._listItemNode)
+            this._listItemNode.classList.add("selected");
+    }
+
+    if (this.onselect && !suppressOnSelect)
+        this.onselect(this, selectedByUser);
+
+    if (this.treeOutline.onselect && !suppressOnSelect)
+        this.treeOutline.onselect(this, selectedByUser);
+
+    delete this.treeOutline.processingSelectionChange;
+}
+
+/**
+ * @param {boolean=} omitFocus
+ */
+TreeElement.prototype.revealAndSelect = function(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect)
+{
+    this.reveal();
+    this.select(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect);
+}
+
+/**
+ * @param {boolean=} suppressOnDeselect
+ */
+TreeElement.prototype.deselect = function(suppressOnDeselect)
+{
+    if (!this.treeOutline || this.treeOutline.selectedTreeElement !== this || !this.selected)
+        return false;
+
+    this.selected = false;
+    this.treeOutline.selectedTreeElement = null;
+
+    if (this._listItemNode)
+        this._listItemNode.classList.remove("selected");
+
+    if (this.ondeselect && !suppressOnDeselect)
+        this.ondeselect(this);
+
+    if (this.treeOutline.ondeselect && !suppressOnDeselect)
+        this.treeOutline.ondeselect(this);
+
+    return true;
+}
+
+TreeElement.prototype.onpopulate = function()
+{
+    // Overriden by subclasses.
+}
+
+/**
+ * @param {boolean} skipUnrevealed
+ * @param {(TreeOutline|TreeElement)=} stayWithin
+ * @param {boolean=} dontPopulate
+ * @param {Object=} info
+ * @return {TreeElement}
+ */
+TreeElement.prototype.traverseNextTreeElement = function(skipUnrevealed, stayWithin, dontPopulate, info)
+{
+    if (!dontPopulate && this.hasChildren)
+        this.onpopulate.call(this); // FIXME: This shouldn't need to use call, but this is working around a JSC bug. https://webkit.org/b/74811
+
+    if (info)
+        info.depthChange = 0;
+
+    var element = skipUnrevealed ? (this.revealed() ? this.children[0] : null) : this.children[0];
+    if (element && (!skipUnrevealed || (skipUnrevealed && this.expanded))) {
+        if (info)
+            info.depthChange = 1;
+        return element;
+    }
+
+    if (this === stayWithin)
+        return null;
+
+    element = skipUnrevealed ? (this.revealed() ? this.nextSibling : null) : this.nextSibling;
+    if (element)
+        return element;
+
+    element = this;
+    while (element && !element.root && !(skipUnrevealed ? (element.revealed() ? element.nextSibling : null) : element.nextSibling) && element.parent !== stayWithin) {
+        if (info)
+            info.depthChange -= 1;
+        element = element.parent;
+    }
+
+    if (!element)
+        return null;
+
+    return (skipUnrevealed ? (element.revealed() ? element.nextSibling : null) : element.nextSibling);
+}
+
+/**
+ * @param {boolean} skipUnrevealed
+ * @param {boolean=} dontPopulate
+ * @return {TreeElement}
+ */
+TreeElement.prototype.traversePreviousTreeElement = function(skipUnrevealed, dontPopulate)
+{
+    var element = skipUnrevealed ? (this.revealed() ? this.previousSibling : null) : this.previousSibling;
+    if (!dontPopulate && element && element.hasChildren)
+        element.onpopulate();
+
+    while (element && (skipUnrevealed ? (element.revealed() && element.expanded ? element.children[element.children.length - 1] : null) : element.children[element.children.length - 1])) {
+        if (!dontPopulate && element.hasChildren)
+            element.onpopulate();
+        element = (skipUnrevealed ? (element.revealed() && element.expanded ? element.children[element.children.length - 1] : null) : element.children[element.children.length - 1]);
+    }
+
+    if (element)
+        return element;
+
+    if (!this.parent || this.parent.root)
+        return null;
+
+    return this.parent;
+}
+
+TreeElement.prototype.isEventWithinDisclosureTriangle = function(event)
+{
+    // FIXME: We should not use getComputedStyle(). For that we need to get rid of using ::before for disclosure triangle. (http://webk.it/74446) 
+    var computedLeftPadding = window.getComputedStyle(this._listItemNode).getPropertyCSSValue("padding-left").getFloatValue(CSSPrimitiveValue.CSS_PX);
+    var left = this._listItemNode.totalOffsetLeft + computedLeftPadding;
+    return event.pageX >= left && event.pageX <= left + this.arrowToggleWidth && this.hasChildren;
+}
+
+TreeElement.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Utilities.js b/Source/WebInspectorUI/UserInterface/Utilities.js
new file mode 100644
index 000000000..322e260f5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Utilities.js
@@ -0,0 +1,1192 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+if (!("bind" in Function.prototype)) {
+    Object.defineProperty(Function.prototype, "bind",
+    {
+        value: function(thisObject)
+        {
+            var func = this;
+            var args = Array.prototype.slice.call(arguments, 1);
+            return function bound()
+            {
+                return func.apply(thisObject, args.concat(Array.prototype.slice.call(arguments, 0)));
+            };
+        }
+    });
+}
+
+Object.defineProperty(Object, "shallowCopy",
+{
+    value: function(object)
+    {
+        // Make a new object and copy all the key/values. The values are not copied.
+        var copy = {};
+        var keys = Object.keys(object);
+        for (var i = 0; i < keys.length; ++i)
+            copy[keys[i]] = object[keys[i]];
+        return copy;
+    }
+});
+
+Object.defineProperty(Object, "shallowEqual",
+{
+    value: function(a, b)
+    {
+        // Checks if two objects have the same top-level properties.
+
+        // Check for strict equality in case they are the same object.
+        if (a === b)
+            return true;
+
+        // Only objects can proceed. null is an object, but Object.keys throws for null.
+        if (typeof a !== "object" || typeof b !== "object" || a === null || b === null)
+            return false;
+
+        var aKeys = Object.keys(a);
+        var bKeys = Object.keys(b);
+
+        // Check that each object has the same number of keys.
+        if (aKeys.length !== bKeys.length)
+            return false;
+
+        // Check if all the keys and their values are equal.
+        for (var i = 0; i < aKeys.length; ++i) {
+            // Check that b has the same key as a.
+            if (!(aKeys[i] in b))
+                return false;
+
+            // Check that the values are strict equal since this is only
+            // a shallow check, not a recursive one.
+            if (a[aKeys[i]] !== b[aKeys[i]])
+                return false;
+        }
+
+        return true;
+    }
+});
+
+Object.defineProperty(Object.prototype, "valueForCaseInsensitiveKey",
+{
+    value: function(key)
+    {
+        if (this.hasOwnProperty(key))
+            return this[key];
+
+        var lowerCaseKey = key.toLowerCase();
+        for (var currentKey in this) {
+            if (currentKey.toLowerCase() === lowerCaseKey)
+                return this[currentKey];
+        }
+
+        return undefined;
+    }
+});
+
+Object.defineProperty(Node.prototype, "enclosingNodeOrSelfWithClass",
+{
+    value: function(className)
+    {
+        for (var node = this; node && node !== this.ownerDocument; node = node.parentNode)
+            if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains(className))
+                return node;
+        return null;
+    }
+});
+
+Object.defineProperty(Node.prototype, "enclosingNodeWithClass",
+{
+    value: function(className)
+    {
+        if (!this.parentNode)
+            return null;
+        return this.parentNode.enclosingNodeOrSelfWithClass(className);
+    }
+});
+
+Object.defineProperty(Node.prototype, "enclosingNodeOrSelfWithNodeNameInArray",
+{
+    value: function(nameArray)
+    {
+        var lowerCaseNameArray = nameArray.map(function(name) { return name.toLowerCase() });
+        for (var node = this; node && node !== this.ownerDocument; node = node.parentNode) {
+            for (var i = 0; i < nameArray.length; ++i) {
+                if (node.nodeName.toLowerCase() === lowerCaseNameArray[i])
+                    return node;
+            }
+        }
+
+        return null;
+    }
+});
+
+Object.defineProperty(Node.prototype, "enclosingNodeOrSelfWithNodeName",
+{
+    value: function(nodeName)
+    {
+        return this.enclosingNodeOrSelfWithNodeNameInArray([nodeName]);
+    }
+});
+
+Object.defineProperty(Node.prototype, "isAncestor",
+{
+    value: function(node)
+    {
+        if (!node)
+            return false;
+
+        var currentNode = node.parentNode;
+        while (currentNode) {
+            if (this === currentNode)
+                return true;
+            currentNode = currentNode.parentNode;
+        }
+
+        return false;
+    }
+});
+
+Object.defineProperty(Node.prototype, "isDescendant",
+{
+    value: function(descendant)
+    {
+        return !!descendant && descendant.isAncestor(this);
+    }
+});
+
+
+Object.defineProperty(Node.prototype, "isSelfOrAncestor",
+{
+    value: function(node)
+    {
+        return !!node && (node === this || this.isAncestor(node));
+    }
+});
+
+
+Object.defineProperty(Node.prototype, "isSelfOrDescendant",
+{
+    value: function(node)
+    {
+        return !!node && (node === this || this.isDescendant(node));
+    }
+});
+
+Object.defineProperty(Node.prototype, "traverseNextNode",
+{
+    value: function(stayWithin)
+    {
+        var node = this.firstChild;
+        if (node)
+            return node;
+
+        if (stayWithin && this === stayWithin)
+            return null;
+
+        node = this.nextSibling;
+        if (node)
+            return node;
+
+        node = this;
+        while (node && !node.nextSibling && (!stayWithin || !node.parentNode || node.parentNode !== stayWithin))
+            node = node.parentNode;
+        if (!node)
+            return null;
+
+        return node.nextSibling;
+    }
+});
+
+Object.defineProperty(Node.prototype, "traversePreviousNode",
+{
+    value: function(stayWithin)
+    {
+       if (stayWithin && this === stayWithin)
+            return null;
+        var node = this.previousSibling;
+        while (node && node.lastChild)
+            node = node.lastChild;
+        if (node)
+            return node;
+        return this.parentNode;
+    }
+});
+
+
+Object.defineProperty(Node.prototype, "traverseNextTextNode",
+{
+    value: function(stayWithin)
+    {
+        var node = this.traverseNextNode(stayWithin);
+        if (!node)
+            return;
+
+        while (node && node.nodeType !== Node.TEXT_NODE)
+            node = node.traverseNextNode(stayWithin);
+
+        return node;
+    }
+});
+
+Object.defineProperty(Node.prototype, "rangeBoundaryForOffset",
+{
+    value: function(offset)
+    {
+        var textNode = this.traverseNextTextNode(this);
+        while (textNode && offset > textNode.data.length) {
+            offset -= textNode.data.length;
+            textNode = textNode.traverseNextTextNode(this);
+        }
+
+        if (!textNode)
+            return {container: this, offset: 0};
+        return {container: textNode, offset: offset};
+    }
+});
+
+Object.defineProperty(Node.prototype, "rangeOfWord",
+{
+    value: function(offset, stopCharacters, stayWithinNode, direction)
+    {
+        var startNode;
+        var startOffset = 0;
+        var endNode;
+        var endOffset = 0;
+
+        if (!stayWithinNode)
+            stayWithinNode = this;
+
+        if (!direction || direction === "backward" || direction === "both") {
+            var node = this;
+            while (node) {
+                if (node === stayWithinNode) {
+                    if (!startNode)
+                        startNode = stayWithinNode;
+                    break;
+                }
+
+                if (node.nodeType === Node.TEXT_NODE) {
+                    var start = (node === this ? (offset - 1) : (node.nodeValue.length - 1));
+                    for (var i = start; i >= 0; --i) {
+                        if (stopCharacters.indexOf(node.nodeValue[i]) !== -1) {
+                            startNode = node;
+                            startOffset = i + 1;
+                            break;
+                        }
+                    }
+                }
+
+                if (startNode)
+                    break;
+
+                node = node.traversePreviousNode(stayWithinNode);
+            }
+
+            if (!startNode) {
+                startNode = stayWithinNode;
+                startOffset = 0;
+            }
+        } else {
+            startNode = this;
+            startOffset = offset;
+        }
+
+        if (!direction || direction === "forward" || direction === "both") {
+            node = this;
+            while (node) {
+                if (node === stayWithinNode) {
+                    if (!endNode)
+                        endNode = stayWithinNode;
+                    break;
+                }
+
+                if (node.nodeType === Node.TEXT_NODE) {
+                    var start = (node === this ? offset : 0);
+                    for (var i = start; i < node.nodeValue.length; ++i) {
+                        if (stopCharacters.indexOf(node.nodeValue[i]) !== -1) {
+                            endNode = node;
+                            endOffset = i;
+                            break;
+                        }
+                    }
+                }
+
+                if (endNode)
+                    break;
+
+                node = node.traverseNextNode(stayWithinNode);
+            }
+
+            if (!endNode) {
+                endNode = stayWithinNode;
+                endOffset = stayWithinNode.nodeType === Node.TEXT_NODE ? stayWithinNode.nodeValue.length : stayWithinNode.childNodes.length;
+            }
+        } else {
+            endNode = this;
+            endOffset = offset;
+        }
+
+        var result = this.ownerDocument.createRange();
+        result.setStart(startNode, startOffset);
+        result.setEnd(endNode, endOffset);
+
+        return result;
+
+    }
+});
+
+if (!("remove" in Element.prototype)) {
+    Object.defineProperty(Element.prototype, "remove",
+    {
+        value: function()
+        {
+            if (this.parentNode)
+                this.parentNode.removeChild(this);
+        }
+    });
+}
+
+Object.defineProperty(Element.prototype, "totalOffsetLeft",
+{
+    get: function()
+    {
+        return this.getBoundingClientRect().left;
+    }
+});
+
+Object.defineProperty(Element.prototype, "totalOffsetTop",
+{
+    get: function()
+    {
+        return this.getBoundingClientRect().top;
+    }
+});
+
+Object.defineProperty(Element.prototype, "removeChildren",
+{
+    value: function()
+    {
+        // This has been tested to be the fastest removal method.
+        if (this.firstChild)
+            this.textContent = "";
+    }
+});
+
+Object.defineProperty(Element.prototype, "isInsertionCaretInside",
+{
+    value: function()
+    {
+        var selection = window.getSelection();
+        if (!selection.rangeCount || !selection.isCollapsed)
+            return false;
+        var selectionRange = selection.getRangeAt(0);
+        return selectionRange.startContainer === this || selectionRange.startContainer.isDescendant(this);
+    }
+});
+
+Object.defineProperty(Element.prototype, "removeMatchingStyleClasses",
+{
+    value: function(classNameRegex)
+    {
+        var regex = new RegExp("(^|\\s+)" + classNameRegex + "($|\\s+)");
+        if (regex.test(this.className))
+            this.className = this.className.replace(regex, " ");
+    }
+});
+
+Object.defineProperty(Element.prototype, "createChild",
+{
+    value: function(elementName, className)
+    {
+        var element = this.ownerDocument.createElement(elementName);
+        if (className)
+            element.className = className;
+        this.appendChild(element);
+        return element;
+    }
+});
+
+function AnchorBox(x, y, width, height)
+{
+    this.x = x || 0;
+    this.y = y || 0;
+    this.width = width || 0;
+    this.height = height || 0;
+}
+
+Object.defineProperty(Element.prototype, "boxInWindow",
+{
+    value: function()
+    {
+        var anchorBox = new AnchorBox;
+
+        var clientRect = this.getBoundingClientRect();
+        console.assert(clientRect);
+
+        anchorBox.x = clientRect.left;
+        anchorBox.y = clientRect.top;
+        anchorBox.width = clientRect.width;
+        anchorBox.height = clientRect.height;
+
+        return anchorBox;
+    }
+});
+
+Object.defineProperty(Element.prototype, "positionAt",
+{
+    value: function(x, y)
+    {
+        this.style.left = x + "px";
+        this.style.top = y + "px";
+    }
+});
+
+Object.defineProperty(Element.prototype, "pruneEmptyTextNodes",
+{
+    value: function()
+    {
+        var sibling = this.firstChild;
+        while (sibling) {
+            var nextSibling = sibling.nextSibling;
+            if (sibling.nodeType === this.TEXT_NODE && sibling.nodeValue === "")
+                this.removeChild(sibling);
+            sibling = nextSibling;
+        }
+    }
+});
+
+Object.defineProperty(Element.prototype, "isScrolledToBottom",
+{
+    value: function()
+    {
+        // This code works only for 0-width border
+        return this.scrollTop + this.clientHeight === this.scrollHeight;
+    }
+});
+
+Object.defineProperty(DocumentFragment.prototype, "createChild",
+{
+    value: Element.prototype.createChild
+});
+
+Object.defineProperty(Array.prototype, "contains",
+{
+    value: function(value)
+    {
+        return this.indexOf(value) !== -1;
+    }
+});
+
+Object.defineProperty(Array.prototype, "lastValue",
+{
+    get: function()
+    {
+        if (!this.length)
+            return undefined;
+        return this[this.length - 1];
+    }
+});
+
+Object.defineProperty(Array.prototype, "remove",
+{
+    value: function(value, onlyFirst)
+    {
+        for (var i = this.length - 1; i >= 0; --i) {
+            if (this[i] === value) {
+                this.splice(i, 1);
+                if (onlyFirst)
+                    return;
+            }
+        }
+    }
+});
+
+Object.defineProperty(Array.prototype, "keySet",
+{
+    value: function()
+    {
+        var keys = {};
+        for (var i = 0; i < this.length; ++i)
+            keys[this[i]] = true;
+        return keys;
+    }
+});
+
+Object.defineProperty(Array.prototype, "upperBound",
+{
+    value: function(value)
+    {
+        var first = 0;
+        var count = this.length;
+        while (count > 0) {
+          var step = count >> 1;
+          var middle = first + step;
+          if (value >= this[middle]) {
+              first = middle + 1;
+              count -= step + 1;
+          } else
+              count = step;
+        }
+        return first;
+    }
+});
+
+Object.defineProperty(Array, "convert",
+{
+    value: function(list, startIndex, endIndex)
+    {
+        return Array.prototype.slice.call(list, startIndex, endIndex);
+    }
+});
+
+Object.defineProperty(String.prototype, "trimMiddle",
+{
+    value: function(maxLength)
+    {
+        if (this.length <= maxLength)
+            return this;
+        var leftHalf = maxLength >> 1;
+        var rightHalf = maxLength - leftHalf - 1;
+        return this.substr(0, leftHalf) + "\u2026" + this.substr(this.length - rightHalf, rightHalf);
+    }
+});
+
+Object.defineProperty(String.prototype, "trimEnd",
+{
+    value: function(maxLength)
+    {
+        if (this.length <= maxLength)
+            return this;
+        return this.substr(0, maxLength - 1) + "\u2026";
+    }
+});
+
+Object.defineProperty(String.prototype, "collapseWhitespace",
+{
+    value: function()
+    {
+        return this.replace(/[\s\xA0]+/g, " ");
+    }
+});
+
+Object.defineProperty(String.prototype, "escapeCharacters",
+{
+    value: function(chars)
+    {
+        var foundChar = false;
+        for (var i = 0; i < chars.length; ++i) {
+            if (this.indexOf(chars.charAt(i)) !== -1) {
+                foundChar = true;
+                break;
+            }
+        }
+
+        if (!foundChar)
+            return this;
+
+        var result = "";
+        for (var i = 0; i < this.length; ++i) {
+            if (chars.indexOf(this.charAt(i)) !== -1)
+                result += "\\";
+            result += this.charAt(i);
+        }
+
+        return result;
+    }
+});
+
+Object.defineProperty(String.prototype, "escapeForRegExp",
+{
+    value: function()
+    {
+        return this.escapeCharacters("^[]{}()\\.$*+?|");
+    }
+});
+
+Object.defineProperty(String.prototype, "capitalize",
+{
+    value: function()
+    {
+        return this.charAt(0).toUpperCase() + this.slice(1);
+    }
+});
+
+Object.defineProperty(String, "tokenizeFormatString",
+{
+    value: function(format)
+    {
+        var tokens = [];
+        var substitutionIndex = 0;
+
+        function addStringToken(str)
+        {
+            tokens.push({ type: "string", value: str });
+        }
+
+        function addSpecifierToken(specifier, precision, substitutionIndex)
+        {
+            tokens.push({ type: "specifier", specifier: specifier, precision: precision, substitutionIndex: substitutionIndex });
+        }
+
+        var index = 0;
+        for (var precentIndex = format.indexOf("%", index); precentIndex !== -1; precentIndex = format.indexOf("%", index)) {
+            addStringToken(format.substring(index, precentIndex));
+            index = precentIndex + 1;
+
+            if (format[index] === "%") {
+                addStringToken("%");
+                ++index;
+                continue;
+            }
+
+            if (!isNaN(format[index])) {
+                // The first character is a number, it might be a substitution index.
+                var number = parseInt(format.substring(index), 10);
+                while (!isNaN(format[index]))
+                    ++index;
+
+                // If the number is greater than zero and ends with a "$",
+                // then this is a substitution index.
+                if (number > 0 && format[index] === "$") {
+                    substitutionIndex = (number - 1);
+                    ++index;
+                }
+            }
+
+            var precision = -1;
+            if (format[index] === ".") {
+                // This is a precision specifier. If no digit follows the ".",
+                // then the precision should be zero.
+                ++index;
+
+                precision = parseInt(format.substring(index), 10);
+                if (isNaN(precision))
+                    precision = 0;
+
+                while (!isNaN(format[index]))
+                    ++index;
+            }
+
+            addSpecifierToken(format[index], precision, substitutionIndex);
+
+            ++substitutionIndex;
+            ++index;
+        }
+
+        addStringToken(format.substring(index));
+
+        return tokens;
+    }
+});
+
+Object.defineProperty(String.prototype, "startsWith", 
+{
+    value: function(string)
+    {
+        return this.lastIndexOf(string, 0) === 0;
+    }
+});
+
+Object.defineProperty(String.prototype, "hash",
+{
+    get: function()
+    {
+        // Matches the wtf/StringHasher.h (SuperFastHash) algorithm.
+
+        // Arbitrary start value to avoid mapping all 0's to all 0's.
+        const stringHashingStartValue = 0x9e3779b9;
+
+        var result = stringHashingStartValue;
+        var pendingCharacter = null;
+        for (var i = 0; i < this.length; ++i) {
+            var currentCharacter = this[i].charCodeAt(0);
+            if (pendingCharacter === null) {
+                pendingCharacter = currentCharacter
+                continue;
+            }
+
+            result += pendingCharacter;
+            result = (result << 16) ^ ((currentCharacter << 11) ^ result);
+            result += result >> 11;
+
+            pendingCharacter = null;
+        }
+
+        // Handle the last character in odd length strings.
+        if (pendingCharacter !== null) {
+            result += pendingCharacter;
+            result ^= result << 11;
+            result += result >> 17;
+        }
+
+        // Force "avalanching" of final 31 bits.
+        result ^= result << 3;
+        result += result >> 5;
+        result ^= result << 2;
+        result += result >> 15;
+        result ^= result << 10;
+
+        // Prevent 0 and negative results.
+        return (0xffffffff + result + 1).toString(36);
+    }
+});
+
+Object.defineProperty(String, "standardFormatters",
+{
+    value: {
+        d: function(substitution)
+        {
+            return !isNaN(substitution) ? substitution : 0;
+        },
+
+        f: function(substitution, token)
+        {
+            if (substitution && token.precision > -1)
+                substitution = substitution.toFixed(token.precision);
+            return !isNaN(substitution) ? substitution : (token.precision > -1 ? Number(0).toFixed(token.precision) : 0);
+        },
+
+        s: function(substitution)
+        {
+            return substitution;
+        }
+    }
+});
+
+Object.defineProperty(String, "format",
+{
+    value: function(format, substitutions, formatters, initialValue, append)
+    {
+        if (!format || !substitutions || !substitutions.length)
+            return { formattedResult: append(initialValue, format), unusedSubstitutions: substitutions };
+
+        function prettyFunctionName()
+        {
+            return "String.format(\"" + format + "\", \"" + substitutions.join("\", \"") + "\")";
+        }
+
+        function warn(msg)
+        {
+            console.warn(prettyFunctionName() + ": " + msg);
+        }
+
+        function error(msg)
+        {
+            console.error(prettyFunctionName() + ": " + msg);
+        }
+
+        var result = initialValue;
+        var tokens = String.tokenizeFormatString(format);
+        var usedSubstitutionIndexes = {};
+
+        for (var i = 0; i < tokens.length; ++i) {
+            var token = tokens[i];
+
+            if (token.type === "string") {
+                result = append(result, token.value);
+                continue;
+            }
+
+            if (token.type !== "specifier") {
+                error("Unknown token type \"" + token.type + "\" found.");
+                continue;
+            }
+
+            if (token.substitutionIndex >= substitutions.length) {
+                // If there are not enough substitutions for the current substitutionIndex
+                // just output the format specifier literally and move on.
+                error("not enough substitution arguments. Had " + substitutions.length + " but needed " + (token.substitutionIndex + 1) + ", so substitution was skipped.");
+                result = append(result, "%" + (token.precision > -1 ? token.precision : "") + token.specifier);
+                continue;
+            }
+
+            usedSubstitutionIndexes[token.substitutionIndex] = true;
+
+            if (!(token.specifier in formatters)) {
+                // Encountered an unsupported format character, treat as a string.
+                warn("unsupported format character \u201C" + token.specifier + "\u201D. Treating as a string.");
+                result = append(result, substitutions[token.substitutionIndex]);
+                continue;
+            }
+
+            result = append(result, formatters[token.specifier](substitutions[token.substitutionIndex], token));
+        }
+
+        var unusedSubstitutions = [];
+        for (var i = 0; i < substitutions.length; ++i) {
+            if (i in usedSubstitutionIndexes)
+                continue;
+            unusedSubstitutions.push(substitutions[i]);
+        }
+
+        return {formattedResult: result, unusedSubstitutions: unusedSubstitutions};
+    }
+});
+
+Object.defineProperty(String.prototype, "format",
+{
+    value: function()
+    {
+        return String.format(this, arguments, String.standardFormatters, "", function(a, b) { return a + b; }).formattedResult;
+    }
+});
+
+Object.defineProperty(String.prototype, "insertWordBreakCharacters",
+{
+    value: function()
+    {
+        // Add zero width spaces after characters that are good to break after.
+        // Otherwise a string with no spaces will not break and overflow its container.
+        // This is mainly used on URL strings, so the characters are tailored for URLs.
+        return this.replace(/([\/;:\)\]\}&?])/g, "$1\u200b");
+    }
+});
+
+Object.defineProperty(String.prototype, "removeWordBreakCharacters",
+{
+    value: function()
+    {
+        // Undoes what insertWordBreakCharacters did.
+        return this.replace(/\u200b/g, "");
+    }
+});
+
+Object.defineProperty(Number, "constrain",
+{
+    value: function(num, min, max)
+    {
+        if (num < min)
+            num = min;
+        else if (num > max)
+            num = max;
+        return num;
+    }
+});
+
+Object.defineProperty(Number, "secondsToString",
+{
+    value: function(seconds, higherResolution)
+    {
+        var ms = seconds * 1000;
+
+        if (higherResolution && ms < 100)
+            return WebInspector.UIString("%.2fms").format(ms);
+        else if (ms < 100)
+            return WebInspector.UIString("%.1fms").format(ms);
+
+        if (higherResolution && ms < 1000)
+            return WebInspector.UIString("%.1fms").format(ms);
+        else if (ms < 1000)
+            return WebInspector.UIString("%.0fms").format(ms);
+
+        if (seconds < 60)
+            return WebInspector.UIString("%.2fs").format(seconds);
+
+        var minutes = seconds / 60;
+        if (minutes < 60)
+            return WebInspector.UIString("%.1fmin").format(minutes);
+
+        var hours = minutes / 60;
+        if (hours < 24)
+            return WebInspector.UIString("%.1fhrs").format(hours);
+
+        var days = hours / 24;
+        return WebInspector.UIString("%.1f days").format(days);
+    }
+});
+
+Object.defineProperty(Number, "bytesToString",
+{
+    value: function(bytes, higherResolution)
+    {
+        if (higherResolution === undefined)
+            higherResolution = true;
+
+        if (bytes < 1024)
+            return WebInspector.UIString("%.0f B").format(bytes);
+
+        var kilobytes = bytes / 1024;
+        if (higherResolution && kilobytes < 1024)
+            return WebInspector.UIString("%.2f KB").format(kilobytes);
+        else if (kilobytes < 1024)
+            return WebInspector.UIString("%.0f KB").format(kilobytes);
+
+        var megabytes = kilobytes / 1024;
+        if (higherResolution)
+            return WebInspector.UIString("%.2f MB").format(megabytes);
+        else
+            return WebInspector.UIString("%.0f MB").format(megabytes);
+    }
+});
+
+Object.defineProperty(Uint32Array, "isLittleEndian",
+{
+    value: function()
+    {
+        if ("_isLittleEndian" in this)
+            return this._isLittleEndian;
+
+        var buffer = new ArrayBuffer(4);
+        var longData = new Uint32Array(buffer);
+        var data = new Uint8Array(buffer);
+
+        longData[0] = 0x0a0b0c0d;
+
+        this._isLittleEndian = data[0] === 0x0d && data[1] === 0x0c && data[2] === 0x0b && data[3] === 0x0a;
+
+        return this._isLittleEndian;
+    }
+});
+
+function isEmptyObject(object)
+{
+    for (var property in object)
+        return false;
+    return true;
+}
+
+function isEnterKey(event)
+{
+    // Check if this is an IME event.
+    return event.keyCode !== 229 && event.keyIdentifier === "Enter";
+}
+
+function removeURLFragment(url)
+{
+    var hashIndex = url.indexOf("#");
+    if (hashIndex >= 0)
+        return url.substring(0, hashIndex);
+    return url;
+}
+
+function relativePath(path, basePath)
+{
+    console.assert(path.charAt(0) === "/");
+    console.assert(basePath.charAt(0) === "/");
+    
+    var pathComponents = path.split("/");
+    var baseComponents = basePath.replace(/\/$/, "").split("/");
+    var finalComponents = [];
+
+    var index = 1;
+    for (; index < pathComponents.length && index < baseComponents.length; ++index) {
+        if (pathComponents[index] !== baseComponents[index])
+            break;
+    }
+
+    for (var i = index; i < baseComponents.length; ++i)
+        finalComponents.push("..");
+
+    for (var i = index; i < pathComponents.length; ++i)
+        finalComponents.push(pathComponents[i]);
+
+    return finalComponents.join("/");
+}
+
+function resolveDotsInPath(path)
+{
+    if (!path)
+        return path;
+
+    if (path.indexOf("./") === -1)
+        return path;
+
+    console.assert(path.charAt(0) === "/");
+
+    var result = [];
+
+    var components = path.split("/");
+    for (var i = 0; i < components.length; ++i) {
+        var component = components[i];
+
+        // Skip over "./".
+        if (component === ".")
+            continue;
+
+        // Rewind one component for "../".
+        if (component === "..") {
+            if (result.length === 1)
+                continue;
+            result.pop();
+            continue;
+        }
+
+        result.push(component);
+    }
+
+    return result.join("/");
+}
+
+function parseURL(url)
+{
+    url = url ? url.trim() : "";
+
+    var match = url.match(/^([^:]+):\/\/([^\/:]*)(?::([\d]+))?(?:(\/[^#]*)(?:#(.*))?)?$/i);
+    if (!match)
+        return {scheme: null, host: null, port: null, path: null, queryString: null, fragment: null, lastPathComponent: null};
+
+    var scheme = match[1].toLowerCase();
+    var host = match[2].toLowerCase();
+    var port = Number(match[3]) || null;
+    var wholePath = match[4] || null;
+    var fragment = match[5] || null;
+    var path = wholePath;
+    var queryString = null;
+
+    // Split the path and the query string.
+    if (wholePath) {
+        var indexOfQuery = wholePath.indexOf("?");
+        if (indexOfQuery !== -1) {
+            path = wholePath.substring(0, indexOfQuery);
+            queryString = wholePath.substring(indexOfQuery + 1);
+        }
+        path = resolveDotsInPath(path);
+    }
+
+    // Find last path component.
+    var lastPathComponent = null;
+    if (path && path !== "/") {
+        // Skip the trailing slash if there is one.
+        var endOffset = path[path.length - 1] === "/" ? 1 : 0;
+        var lastSlashIndex = path.lastIndexOf("/", path.length - 1 - endOffset);
+        if (lastSlashIndex !== -1)
+            lastPathComponent = path.substring(lastSlashIndex + 1, path.length - endOffset);
+    }
+
+    return {scheme: scheme, host: host, port: port, path: path, queryString: queryString, fragment: fragment, lastPathComponent: lastPathComponent};
+}
+
+function absoluteURL(partialURL, baseURL)
+{
+    partialURL = partialURL ? partialURL.trim() : "";
+
+    // Return data and javascript URLs as-is.
+    if (partialURL.startsWith("data:") || partialURL.startsWith("javascript:") || partialURL.startsWith("mailto:"))
+        return partialURL;
+
+    // If the URL has a scheme it is already a full URL, so return it.
+    if (parseURL(partialURL).scheme)
+        return partialURL;
+
+    // If there is no partial URL, just return the base URL.
+    if (!partialURL)
+        return baseURL || null;
+
+    var baseURLComponents = parseURL(baseURL);
+
+    // The base URL needs to be an absolute URL. Return null if it isn't.
+    if (!baseURLComponents.scheme)
+        return null;
+
+    // A URL that starts with "//" is a full URL without the scheme. Use the base URL scheme.
+    if (partialURL[0] === "/" && partialURL[1] === "/")
+        return baseURLComponents.scheme + ":" + partialURL;
+
+    // The path can be null for URLs that have just a scheme and host (like "http://apple.com"). So make the path be "/".
+    if (!baseURLComponents.path)
+        baseURLComponents.path = "/";
+
+    // Generate the base URL prefix that is used in the rest of the cases.
+    var baseURLPrefix = baseURLComponents.scheme + "://" + baseURLComponents.host + (baseURLComponents.port ? (":" + baseURLComponents.port) : "");
+
+    // A URL that starts with "?" is just a query string that gets applied to the base URL (replacing the base URL query string and fragment).
+    if (partialURL[0] === "?")
+        return baseURLPrefix + baseURLComponents.path + partialURL;
+
+    // A URL that starts with "/" is an absolute path that gets applied to the base URL (replacing the base URL path, query string and fragment).
+    if (partialURL[0] === "/")
+        return baseURLPrefix + resolveDotsInPath(partialURL);
+
+    // Generate the base path that is used in the final case by removing everything after the last "/" from the base URL's path.
+    var basePath = baseURLComponents.path.substring(0, baseURLComponents.path.lastIndexOf("/")) + "/";
+    return baseURLPrefix + resolveDotsInPath(basePath + partialURL);
+}
+
+function simpleGlobStringToRegExp(globString, regExpFlags)
+{
+    // Only supports "*" globs.
+
+    if (!globString)
+        return null;
+
+    // Escape everything from String.prototype.escapeForRegExp except "*".
+    var regexString = globString.escapeCharacters("^[]{}()\\.$+?|");
+
+    // Unescape all doubly escaped backslashes in front of escaped asterisks.
+    // So "\\*" will become "\*" again, undoing escapeCharacters escaping of "\".
+    // This makes "\*" match a literal "*" instead of using the "*" for globbing.
+    regexString = regexString.replace(/\\\\\*/g, "\\*");
+
+    // The following regex doesn't match an asterisk that has a backslash in front.
+    // It also catches consecutive asterisks so they collapse down when replaced.
+    var unescapedAsteriskRegex = /(^|[^\\])\*+/g;
+    if (unescapedAsteriskRegex.test(globString)) {
+        // Replace all unescaped asterisks with ".*".
+        regexString = regexString.replace(unescapedAsteriskRegex, "$1.*");
+
+        // Match edge boundaries when there is an asterisk to better meet the expectations
+        // of the user. When someone types "*.js" they don't expect "foo.json" to match. They
+        // would only expect that if they type "*.js*". We use \b (instead of ^ and $) to allow
+        // matches inside paths or URLs, so "ba*.js" will match "foo/bar.js" but not "boo/bbar.js".
+        // When there isn't an asterisk the regexString is just a substring search.
+        regexString = "\\b" + regexString + "\\b";
+    }
+
+    return new RegExp(regexString, regExpFlags);
+}
+
+function parseLocationQueryParameters(arrayResult)
+{
+    // The first character is always the "?".
+    return parseQueryString(window.location.search.substring(1), arrayResult);
+}
+
+function parseQueryString(queryString, arrayResult)
+{
+    if (!queryString)
+        return arrayResult ? [] : {};
+
+    function decode(string)
+    {
+        try {
+            // Replace "+" with " " then decode precent encoded values.
+            return decodeURIComponent(string.replace(/\+/g, " "));
+        } catch (e) {
+            return string;
+        }
+    }
+
+    var parameters = arrayResult ? [] : {};
+    var parameterStrings = queryString.split("&");
+    for (var i = 0; i < parameterStrings.length; ++i) {
+        var pair = parameterStrings[i].split("=").map(decode);
+        if (arrayResult)
+            parameters.push({name: pair[0], value: pair[1]});
+        else
+            parameters[pair[0]] = pair[1];
+    }
+
+    return parameters;
+}
diff --git a/Source/WebInspectorUI/UserInterface/WebInspector.js b/Source/WebInspectorUI/UserInterface/WebInspector.js
new file mode 100644
index 000000000..5519e35a7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/WebInspector.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+const WebInspector = {}; // Namespace
diff --git a/Source/WebInspectorUI/WebInspectorUI.c b/Source/WebInspectorUI/WebInspectorUI.c
new file mode 100644
index 000000000..93728c704
--- /dev/null
+++ b/Source/WebInspectorUI/WebInspectorUI.c
@@ -0,0 +1,26 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// Intentionally empty. This file is needed to create a linkable framework binary.
diff --git a/Source/WebInspectorUI/WebInspectorUI.xcodeproj/project.pbxproj b/Source/WebInspectorUI/WebInspectorUI.xcodeproj/project.pbxproj
new file mode 100644
index 000000000..07ab44757
--- /dev/null
+++ b/Source/WebInspectorUI/WebInspectorUI.xcodeproj/project.pbxproj
@@ -0,0 +1,257 @@
+// !$*UTF8*$!
+{
+	archiveVersion = 1;
+	classes = {
+	};
+	objectVersion = 46;
+	objects = {
+
+/* Begin PBXBuildFile section */
+		1C60FF1614E6E3F7006CD77D /* localizedStrings.js in Resources */ = {isa = PBXBuildFile; fileRef = 1C60FF1314E6E35D006CD77D /* localizedStrings.js */; };
+		1C78EE1717611340002F6AA5 /* WebInspectorUI.c in Sources */ = {isa = PBXBuildFile; fileRef = 1C78EE1617611340002F6AA5 /* WebInspectorUI.c */; };
+/* End PBXBuildFile section */
+
+/* Begin PBXFileReference section */
+		1C435CAC14E7B287004E10EA /* cssmin.py */ = {isa = PBXFileReference; lastKnownFileType = text.script.python; path = cssmin.py; sourceTree = "<group>"; };
+		1C435CAD14E7B287004E10EA /* jsmin.py */ = {isa = PBXFileReference; lastKnownFileType = text.script.python; path = jsmin.py; sourceTree = "<group>"; };
+		1C60FE2F14E5F3CD006CD77D /* Base.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = Base.xcconfig; sourceTree = "<group>"; };
+		1C60FE3114E5F3CD006CD77D /* DebugRelease.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = DebugRelease.xcconfig; sourceTree = "<group>"; };
+		1C60FE3214E5F3CD006CD77D /* Version.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = Version.xcconfig; sourceTree = "<group>"; };
+		1C60FE3314E5F3CD006CD77D /* WebInspectorUIFramework.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = WebInspectorUIFramework.xcconfig; sourceTree = "<group>"; };
+		1C60FF1014E6D992006CD77D /* UserInterface */ = {isa = PBXFileReference; lastKnownFileType = folder; path = UserInterface; sourceTree = "<group>"; };
+		1C60FF1414E6E35D006CD77D /* en */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.javascript; name = en; path = Localizations/en.lproj/localizedStrings.js; sourceTree = "<group>"; };
+		1C60FF1914E73C64006CD77D /* combine-resources.pl */ = {isa = PBXFileReference; lastKnownFileType = text.script.perl; path = "combine-resources.pl"; sourceTree = "<group>"; };
+		1C60FF1A14E73DCA006CD77D /* remove-console-asserts.pl */ = {isa = PBXFileReference; lastKnownFileType = text.script.perl; path = "remove-console-asserts.pl"; sourceTree = "<group>"; };
+		1C60FFE114E79B0F006CD77D /* copy-user-interface-resources.sh */ = {isa = PBXFileReference; lastKnownFileType = text.script.sh; path = "copy-user-interface-resources.sh"; sourceTree = "<group>"; };
+		1C78EE131760E115002F6AA5 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		1C78EE1617611340002F6AA5 /* WebInspectorUI.c */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.c; path = WebInspectorUI.c; sourceTree = "<group>"; };
+		A54C2257148B23DF00373FA3 /* WebInspectorUI.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = WebInspectorUI.framework; sourceTree = BUILT_PRODUCTS_DIR; };
+/* End PBXFileReference section */
+
+/* Begin PBXGroup section */
+		1C60FE2E14E5F3CD006CD77D /* Configurations */ = {
+			isa = PBXGroup;
+			children = (
+				1C60FE2F14E5F3CD006CD77D /* Base.xcconfig */,
+				1C60FE3114E5F3CD006CD77D /* DebugRelease.xcconfig */,
+				1C60FE3214E5F3CD006CD77D /* Version.xcconfig */,
+				1C60FE3314E5F3CD006CD77D /* WebInspectorUIFramework.xcconfig */,
+			);
+			path = Configurations;
+			sourceTree = "<group>";
+		};
+		1C60FF1514E6E39B006CD77D /* Resources */ = {
+			isa = PBXGroup;
+			children = (
+				1C78EE131760E115002F6AA5 /* Info.plist */,
+				1C60FF1314E6E35D006CD77D /* localizedStrings.js */,
+			);
+			name = Resources;
+			sourceTree = "<group>";
+		};
+		1C60FFE014E79B0F006CD77D /* Scripts */ = {
+			isa = PBXGroup;
+			children = (
+				1C60FF1914E73C64006CD77D /* combine-resources.pl */,
+				1C60FFE114E79B0F006CD77D /* copy-user-interface-resources.sh */,
+				1C435CAC14E7B287004E10EA /* cssmin.py */,
+				1C435CAD14E7B287004E10EA /* jsmin.py */,
+				1C60FF1A14E73DCA006CD77D /* remove-console-asserts.pl */,
+			);
+			path = Scripts;
+			sourceTree = "<group>";
+		};
+		A54C224B148B23DE00373FA3 = {
+			isa = PBXGroup;
+			children = (
+				1C60FE2E14E5F3CD006CD77D /* Configurations */,
+				A54C2258148B23DF00373FA3 /* Products */,
+				1C60FF1514E6E39B006CD77D /* Resources */,
+				1C60FFE014E79B0F006CD77D /* Scripts */,
+				1C60FF1014E6D992006CD77D /* UserInterface */,
+				1C78EE1617611340002F6AA5 /* WebInspectorUI.c */,
+			);
+			sourceTree = "<group>";
+		};
+		A54C2258148B23DF00373FA3 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				A54C2257148B23DF00373FA3 /* WebInspectorUI.framework */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+/* End PBXGroup section */
+
+/* Begin PBXNativeTarget section */
+		A54C2256148B23DF00373FA3 /* WebInspectorUI */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = A54C226C148B23DF00373FA3 /* Build configuration list for PBXNativeTarget "WebInspectorUI" */;
+			buildPhases = (
+				A54C2255148B23DF00373FA3 /* Resources */,
+				1C60FF1214E6D9AF006CD77D /* Copy User Interface Resources */,
+				1C78EE1417611302002F6AA5 /* Sources */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+			);
+			name = WebInspectorUI;
+			productName = WebInspector;
+			productReference = A54C2257148B23DF00373FA3 /* WebInspectorUI.framework */;
+			productType = "com.apple.product-type.framework";
+		};
+/* End PBXNativeTarget section */
+
+/* Begin PBXProject section */
+		A54C224D148B23DE00373FA3 /* Project object */ = {
+			isa = PBXProject;
+			attributes = {
+				LastUpgradeCheck = 0450;
+				ORGANIZATIONNAME = Apple;
+			};
+			buildConfigurationList = A54C2250148B23DE00373FA3 /* Build configuration list for PBXProject "WebInspectorUI" */;
+			compatibilityVersion = "Xcode 3.2";
+			developmentRegion = English;
+			hasScannedForEncodings = 0;
+			knownRegions = (
+				en,
+			);
+			mainGroup = A54C224B148B23DE00373FA3;
+			productRefGroup = A54C2258148B23DF00373FA3 /* Products */;
+			projectDirPath = "";
+			projectRoot = "";
+			targets = (
+				A54C2256148B23DF00373FA3 /* WebInspectorUI */,
+			);
+		};
+/* End PBXProject section */
+
+/* Begin PBXResourcesBuildPhase section */
+		A54C2255148B23DF00373FA3 /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				1C60FF1614E6E3F7006CD77D /* localizedStrings.js in Resources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXResourcesBuildPhase section */
+
+/* Begin PBXShellScriptBuildPhase section */
+		1C60FF1214E6D9AF006CD77D /* Copy User Interface Resources */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${SRCROOT}/UserInterface",
+				"${SRCROOT}/Scripts/copy-user-interface-resources.sh",
+				"${DERIVED_SOURCES_DIR}/InspectorBackend.js",
+				"${DERIVED_SOURCES_DIR}/InspectorBackendCommands.js",
+			);
+			name = "Copy User Interface Resources";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "sh \"${SRCROOT}/Scripts/copy-user-interface-resources.sh\"";
+		};
+/* End PBXShellScriptBuildPhase section */
+
+/* Begin PBXSourcesBuildPhase section */
+		1C78EE1417611302002F6AA5 /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				1C78EE1717611340002F6AA5 /* WebInspectorUI.c in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXSourcesBuildPhase section */
+
+/* Begin PBXVariantGroup section */
+		1C60FF1314E6E35D006CD77D /* localizedStrings.js */ = {
+			isa = PBXVariantGroup;
+			children = (
+				1C60FF1414E6E35D006CD77D /* en */,
+			);
+			name = localizedStrings.js;
+			sourceTree = "<group>";
+		};
+/* End PBXVariantGroup section */
+
+/* Begin XCBuildConfiguration section */
+		1C60FE3514E5F47E006CD77D /* Production */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = 1C60FE2F14E5F3CD006CD77D /* Base.xcconfig */;
+			buildSettings = {
+				DEBUG_DEFINES = NDEBUG;
+			};
+			name = Production;
+		};
+		1C60FE3614E5F47E006CD77D /* Production */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = 1C60FE3314E5F3CD006CD77D /* WebInspectorUIFramework.xcconfig */;
+			buildSettings = {
+			};
+			name = Production;
+		};
+		A54C226A148B23DF00373FA3 /* Debug */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = 1C60FE3114E5F3CD006CD77D /* DebugRelease.xcconfig */;
+			buildSettings = {
+				DEBUG_DEFINES = "";
+			};
+			name = Debug;
+		};
+		A54C226B148B23DF00373FA3 /* Release */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = 1C60FE3114E5F3CD006CD77D /* DebugRelease.xcconfig */;
+			buildSettings = {
+				DEBUG_DEFINES = NDEBUG;
+			};
+			name = Release;
+		};
+		A54C226D148B23DF00373FA3 /* Debug */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = 1C60FE3314E5F3CD006CD77D /* WebInspectorUIFramework.xcconfig */;
+			buildSettings = {
+			};
+			name = Debug;
+		};
+		A54C226E148B23DF00373FA3 /* Release */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = 1C60FE3314E5F3CD006CD77D /* WebInspectorUIFramework.xcconfig */;
+			buildSettings = {
+			};
+			name = Release;
+		};
+/* End XCBuildConfiguration section */
+
+/* Begin XCConfigurationList section */
+		A54C2250148B23DE00373FA3 /* Build configuration list for PBXProject "WebInspectorUI" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				A54C226A148B23DF00373FA3 /* Debug */,
+				A54C226B148B23DF00373FA3 /* Release */,
+				1C60FE3514E5F47E006CD77D /* Production */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Production;
+		};
+		A54C226C148B23DF00373FA3 /* Build configuration list for PBXNativeTarget "WebInspectorUI" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				A54C226D148B23DF00373FA3 /* Debug */,
+				A54C226E148B23DF00373FA3 /* Release */,
+				1C60FE3614E5F47E006CD77D /* Production */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Production;
+		};
+/* End XCConfigurationList section */
+	};
+	rootObject = A54C224D148B23DE00373FA3 /* Project object */;
+}