Merge WebKit at r59636: Initial merge by git

Change-Id: I59b289c4e6b18425f06ce41cc9d34c522515de91

33 files changed, 1198 insertions, 341 deletions

diff --git a/WebCore/inspector/InspectorDOMAgent.cpp b/WebCore/inspector/InspectorDOMAgent.cpp
index d12a6d7..1164736 100644
--- a/WebCore/inspector/InspectorDOMAgent.cpp
+++ b/WebCore/inspector/InspectorDOMAgent.cpp
@@ -906,6 +906,11 @@ void InspectorDOMAgent::applyStyleText(long callId, long styleId, const String&
         return;
     }
 
+    // Remove disabled property entry for property with given name. 
+    IdToDisabledStyleMap::iterator disabledIt = cssStore()->idToDisabledStyle.find(styleId);
+    if (disabledIt != cssStore()->idToDisabledStyle.end())
+        disabledIt->second.remove(propertyName);
+
     CSSStyleDeclaration* style = it->second.get();
     int styleTextLength = styleText.length();
 
@@ -918,12 +923,15 @@ void InspectorDOMAgent::applyStyleText(long callId, long styleId, const String&
         // The input was parsable or the user deleted everything, so remove the
         // original property from the real style declaration. If this represents
         // a shorthand remove all the longhand properties.
-        if (!style->getPropertyShorthand(propertyName).isEmpty()) {
+        if (style->getPropertyShorthand(propertyName).isEmpty()) {
             Vector<String> longhandProps = longhandProperties(style, propertyName);
             for (unsigned i = 0; !ec && i < longhandProps.size(); ++i)
                 style->removeProperty(longhandProps[i], ec);
-        } else
+        }
+        // Explicitly delete properties with no shorthands as well as shorthands themselves.
+        if (!ec)
             style->removeProperty(propertyName, ec);
+
         if (ec) {
             m_frontend->didApplyStyleText(callId, false, ScriptValue::undefined(), m_frontend->newScriptArray());
             return;
@@ -970,6 +978,9 @@ void InspectorDOMAgent::applyStyleText(long callId, long styleId, const String&
         // Set the property on the real style declaration.
         ExceptionCode ec = 0;
         style->setProperty(name, value, priority, ec);
+        // Remove disabled property entry for property with this name. 
+        if (disabledIt != cssStore()->idToDisabledStyle.end())
+            disabledIt->second.remove(name);
         changedProperties.append(name);
     }
     m_frontend->didApplyStyleText(callId, true, buildObjectForStyle(style, true), toArray(changedProperties));
diff --git a/WebCore/inspector/InspectorTimelineAgent.cpp b/WebCore/inspector/InspectorTimelineAgent.cpp
index b8471a8..ab53319 100644
--- a/WebCore/inspector/InspectorTimelineAgent.cpp
+++ b/WebCore/inspector/InspectorTimelineAgent.cpp
@@ -202,6 +202,15 @@ void InspectorTimelineAgent::didEvaluateScript()
     didCompleteCurrentRecord(EvaluateScriptTimelineRecordType);
 }
 
+void InspectorTimelineAgent::didScheduleResourceRequest(const String& url)
+{
+    pushGCEventRecords();
+    ScriptObject record = TimelineRecordFactory::createGenericRecord(m_frontend, WTF::currentTimeMS());
+    record.set("data", TimelineRecordFactory::createScheduleResourceRequestData(m_frontend, url));
+    record.set("type", ScheduleResourceRequestTimelineRecordType);
+    addRecordToTimeline(record, ScheduleResourceRequestTimelineRecordType);
+}
+
 void InspectorTimelineAgent::willSendResourceRequest(unsigned long identifier, bool isMainResource,
     const ResourceRequest& request)
 {
diff --git a/WebCore/inspector/InspectorTimelineAgent.h b/WebCore/inspector/InspectorTimelineAgent.h
index 18ac737..4c5b939 100644
--- a/WebCore/inspector/InspectorTimelineAgent.h
+++ b/WebCore/inspector/InspectorTimelineAgent.h
@@ -69,7 +69,8 @@ enum TimelineRecordType {
     ReceiveResourceDataTimelineRecordType = 16,
     GCEventTimelineRecordType = 17,
     MarkDOMContentEventType = 18,
-    MarkLoadEventType = 19
+    MarkLoadEventType = 19,
+    ScheduleResourceRequestTimelineRecordType = 20
 };
 
 class InspectorTimelineAgent : ScriptGCEventListener, public Noncopyable {
@@ -116,6 +117,7 @@ public:
     void didMarkDOMContentEvent();
     void didMarkLoadEvent();
 
+    void didScheduleResourceRequest(const String& url);
     void willSendResourceRequest(unsigned long, bool isMainResource, const ResourceRequest&);
     void willReceiveResourceResponse(unsigned long, const ResourceResponse&);
     void didReceiveResourceResponse();
diff --git a/WebCore/inspector/TimelineRecordFactory.cpp b/WebCore/inspector/TimelineRecordFactory.cpp
index c08fc0f..0540dad 100644
--- a/WebCore/inspector/TimelineRecordFactory.cpp
+++ b/WebCore/inspector/TimelineRecordFactory.cpp
@@ -128,6 +128,12 @@ ScriptObject TimelineRecordFactory::createMarkTimelineData(InspectorFrontend* fr
     return data;
 }
 
+ScriptObject TimelineRecordFactory::createScheduleResourceRequestData(InspectorFrontend* frontend, const String& url)
+{
+    ScriptObject data = frontend->newScriptObject();
+    data.set("url", url);
+    return data;
+}
 
 ScriptObject TimelineRecordFactory::createResourceSendRequestData(InspectorFrontend* frontend, unsigned long identifier, bool isMainResource, const ResourceRequest& request)
 {
diff --git a/WebCore/inspector/TimelineRecordFactory.h b/WebCore/inspector/TimelineRecordFactory.h
index 2f485d3..f905ecc 100644
--- a/WebCore/inspector/TimelineRecordFactory.h
+++ b/WebCore/inspector/TimelineRecordFactory.h
@@ -59,18 +59,20 @@ namespace WebCore {
         static ScriptObject createXHRReadyStateChangeData(InspectorFrontend*, const String& url, int readyState);
 
         static ScriptObject createXHRLoadData(InspectorFrontend*, const String& url);
-        
+
         static ScriptObject createEvaluateScriptData(InspectorFrontend*, const String&, double lineNumber);
-        
+
         static ScriptObject createMarkTimelineData(InspectorFrontend*, const String&);
 
         static ScriptObject createResourceSendRequestData(InspectorFrontend*, unsigned long identifier,
             bool isMainResource, const ResourceRequest&);
 
+        static ScriptObject createScheduleResourceRequestData(InspectorFrontend*, const String&);
+
         static ScriptObject createResourceReceiveResponseData(InspectorFrontend*, unsigned long identifier, const ResourceResponse&);
 
         static ScriptObject createReceiveResourceData(InspectorFrontend*, unsigned long identifier);
-        
+
         static ScriptObject createResourceFinishData(InspectorFrontend*, unsigned long identifier, bool didFail);
 
         static ScriptObject createPaintData(InspectorFrontend*, const IntRect&);
diff --git a/WebCore/inspector/front-end/AbstractTimelinePanel.js b/WebCore/inspector/front-end/AbstractTimelinePanel.js
index cfec9da..eb9ea88 100644
--- a/WebCore/inspector/front-end/AbstractTimelinePanel.js
+++ b/WebCore/inspector/front-end/AbstractTimelinePanel.js
@@ -424,6 +424,16 @@ WebInspector.AbstractTimelinePanel.prototype = {
     addEventDivider: function(divider)
     {
         this._timelineGrid.addEventDivider(divider);
+    },
+
+    hideEventDividers: function()
+    {
+        this._timelineGrid.hideEventDividers();
+    },
+
+    showEventDividers: function()
+    {
+        this._timelineGrid.showEventDividers();
     }
 }
 
diff --git a/WebCore/inspector/front-end/CallStackSidebarPane.js b/WebCore/inspector/front-end/CallStackSidebarPane.js
index ddca80b..fc96d74 100644
--- a/WebCore/inspector/front-end/CallStackSidebarPane.js
+++ b/WebCore/inspector/front-end/CallStackSidebarPane.js
@@ -27,15 +27,6 @@ WebInspector.CallStackSidebarPane = function()
 {
     WebInspector.SidebarPane.call(this, WebInspector.UIString("Call Stack"));
     
-    this._shortcuts = {};
-
-    var shortcut = WebInspector.KeyboardShortcut.makeKey(WebInspector.KeyboardShortcut.KeyCodes.Period,
-                                                         WebInspector.KeyboardShortcut.Modifiers.Ctrl);
-    this._shortcuts[shortcut] = this._selectNextCallFrameOnStack.bind(this);
-
-    var shortcut = WebInspector.KeyboardShortcut.makeKey(WebInspector.KeyboardShortcut.KeyCodes.Comma,
-                                                         WebInspector.KeyboardShortcut.Modifiers.Ctrl);
-    this._shortcuts[shortcut] = this._selectPreviousCallFrameOnStack.bind(this);
 }
 
 WebInspector.CallStackSidebarPane.prototype = {
@@ -159,6 +150,21 @@ WebInspector.CallStackSidebarPane.prototype = {
     {
         var placardElement = event.target.enclosingNodeOrSelfWithClass("placard");
         this.selectedCallFrame = placardElement.placard.callFrame;
+    },
+
+    registerShortcuts: function(section)
+    {
+        this._shortcuts = {};
+
+        var nextCallFrame = WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.Period,
+            WebInspector.KeyboardShortcut.Modifiers.Ctrl);
+        this._shortcuts[nextCallFrame.key] = this._selectNextCallFrameOnStack.bind(this);
+
+        var prevCallFrame = WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.Comma,
+            WebInspector.KeyboardShortcut.Modifiers.Ctrl);
+        this._shortcuts[prevCallFrame.key] = this._selectPreviousCallFrameOnStack.bind(this);
+
+        section.addRelatedKeys([ nextCallFrame.name, prevCallFrame.name ], WebInspector.UIString("Next/previous call frame"));
     }
 }
 
diff --git a/WebCore/inspector/front-end/Checkbox.js b/WebCore/inspector/front-end/Checkbox.js
index b30da70..aed8534 100644
--- a/WebCore/inspector/front-end/Checkbox.js
+++ b/WebCore/inspector/front-end/Checkbox.js
@@ -23,34 +23,41 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.Checkbox = function(label, callback, checked, className, tooltip)
+WebInspector.Checkbox = function(label, className, tooltip)
 {
     this.element = document.createElement('label');
     this._inputElement = document.createElement('input');
-
-    function callbackWrapper(event)
-    {
-        if (callback)
-            callback(event);
-        event.stopPropagation();
-        return true;
-    }
     this._inputElement.type = "checkbox";
-    this._inputElement.checked = checked;
-    this._inputElement.addEventListener("click", callbackWrapper, false);
 
     this.element.className = className;
     this.element.appendChild(this._inputElement);
     this.element.appendChild(document.createTextNode(label));
     if (tooltip)
         this.element.title = tooltip;
-    this.element.addEventListener("click", callbackWrapper, false);
 }
 
 WebInspector.Checkbox.prototype = {
-    checked: function()
+    set checked(checked)
+    {
+        this._inputElement.checked = checked;
+    },
+
+    get checked()
     {
         return this._inputElement.checked;
+    },
+
+    addEventListener: function(listener)
+    {
+        function listenerWrapper(event)
+        {
+            if (listener)
+                listener(event);
+            event.stopPropagation();
+            return true;
+        }
+
+        this._inputElement.addEventListener("click", listenerWrapper, false);
+        this.element.addEventListener("click", listenerWrapper, false);
     }
 }
-
diff --git a/WebCore/inspector/front-end/ConsoleView.js b/WebCore/inspector/front-end/ConsoleView.js
index f840a81..9d5042e 100644
--- a/WebCore/inspector/front-end/ConsoleView.js
+++ b/WebCore/inspector/front-end/ConsoleView.js
@@ -89,24 +89,8 @@ WebInspector.ConsoleView = function(drawer)
     this.logElement = createFilterElement.call(this, "Logs");
 
     this.filter(this.allElement, false);
+    this._registerShortcuts();
 
-    this._shortcuts = {};
-
-    var shortcut;
-
-    shortcut = WebInspector.KeyboardShortcut.makeKey("k", WebInspector.KeyboardShortcut.Modifiers.Meta);
-    // This case requires a separate bound function as its isMacOnly property should not be shared among different shortcut handlers.
-    this._shortcuts[shortcut] = this.requestClearMessages.bind(this);
-    this._shortcuts[shortcut].isMacOnly = true;
-
-    var clearConsoleHandler = this.requestClearMessages.bind(this);
-    shortcut = WebInspector.KeyboardShortcut.makeKey("l", WebInspector.KeyboardShortcut.Modifiers.Ctrl);
-    this._shortcuts[shortcut] = clearConsoleHandler;
-
-    // Since the Context Menu for the Console View will always be the same, we can create it in
-    // the constructor.
-    this._contextMenu = new WebInspector.ContextMenu();
-    this._contextMenu.appendItem(WebInspector.UIString("Clear Console"), clearConsoleHandler);
     this.messagesElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), true);
     
     this._customFormatters = {
@@ -447,6 +431,46 @@ WebInspector.ConsoleView.prototype = {
         event.preventDefault();
     },
 
+    _registerShortcuts: function()
+    {
+        this._shortcuts = {};
+
+        var shortcut = WebInspector.KeyboardShortcut;
+        var shortcutK = shortcut.makeDescriptor("k", WebInspector.KeyboardShortcut.Modifiers.Meta);
+        // This case requires a separate bound function as its isMacOnly property should not be shared among different shortcut handlers.
+        this._shortcuts[shortcutK.key] = this.requestClearMessages.bind(this);
+        this._shortcuts[shortcutK.key].isMacOnly = true;
+
+        var clearConsoleHandler = this.requestClearMessages.bind(this);
+        var shortcutL = shortcut.makeDescriptor("l", WebInspector.KeyboardShortcut.Modifiers.Ctrl);
+        this._shortcuts[shortcutL.key] = clearConsoleHandler;
+        this._contextMenu = new WebInspector.ContextMenu();
+        this._contextMenu.appendItem(WebInspector.UIString("Clear Console"), clearConsoleHandler);
+
+        var section = WebInspector.shortcutsHelp.section(WebInspector.UIString("Console"));
+        var keys = WebInspector.isMac() ? [ shortcutK.name, shortcutL.name ] : [ shortcutL.name ];
+        section.addAlternateKeys(keys, WebInspector.UIString("Clear Console"));
+
+        keys = [
+            shortcut.shortcutToString(shortcut.Keys.Tab),
+            shortcut.shortcutToString(shortcut.Keys.Tab, shortcut.Modifiers.Shift)
+        ];
+        section.addRelatedKeys(keys, WebInspector.UIString("Next/previous suggestion"));
+        section.addKey(shortcut.shortcutToString(shortcut.Keys.Right), WebInspector.UIString("Accept suggestion"));
+        keys = [
+            shortcut.shortcutToString(shortcut.Keys.Down),
+            shortcut.shortcutToString(shortcut.Keys.Up)
+        ];
+        section.addRelatedKeys(keys, WebInspector.UIString("Next/previous line"));
+        keys = [
+            shortcut.shortcutToString("N", shortcut.Modifiers.Alt),
+            shortcut.shortcutToString("P", shortcut.Modifiers.Alt)
+        ];
+        if (WebInspector.isMac())
+            section.addRelatedKeys(keys, WebInspector.UIString("Next/previous command"));
+        section.addKey(shortcut.shortcutToString(shortcut.Keys.Enter), WebInspector.UIString("Execute command"));
+    },
+
     _promptKeyDown: function(event)
     {
         if (isEnterKey(event)) {
diff --git a/WebCore/inspector/front-end/DOMAgent.js b/WebCore/inspector/front-end/DOMAgent.js
index 46ff0bf..3373c04 100644
--- a/WebCore/inspector/front-end/DOMAgent.js
+++ b/WebCore/inspector/front-end/DOMAgent.js
@@ -586,7 +586,7 @@ WebInspector.CSSStyleDeclaration.prototype = {
                 continue;
 
             if (shorthandProperty) {
-                var value = this.getPropertyValue(shorthandProperty);
+                var value = this.getShorthandValue(shorthandProperty);
                 var priority = this.getShorthandPriority(shorthandProperty);
             } else {
                 var value = this.getPropertyValue(individualProperty);
diff --git a/WebCore/inspector/front-end/ElementsPanel.js b/WebCore/inspector/front-end/ElementsPanel.js
index d47a4cd..c853440 100644
--- a/WebCore/inspector/front-end/ElementsPanel.js
+++ b/WebCore/inspector/front-end/ElementsPanel.js
@@ -70,7 +70,8 @@ WebInspector.ElementsPanel = function()
     this.crumbsElement.addEventListener("mouseout", this._mouseMovedOutOfCrumbs.bind(this), false);
 
     this.sidebarPanes = {};
-    this.sidebarPanes.styles = new WebInspector.StylesSidebarPane();
+    this.sidebarPanes.computedStyle = new WebInspector.ComputedStyleSidebarPane();
+    this.sidebarPanes.styles = new WebInspector.StylesSidebarPane(this.sidebarPanes.computedStyle);
     this.sidebarPanes.metrics = new WebInspector.MetricsSidebarPane();
     this.sidebarPanes.properties = new WebInspector.PropertiesSidebarPane();
     this.sidebarPanes.eventListeners = new WebInspector.EventListenersSidebarPane();
@@ -89,6 +90,7 @@ WebInspector.ElementsPanel = function()
     this.sidebarElement = document.createElement("div");
     this.sidebarElement.id = "elements-sidebar";
 
+    this.sidebarElement.appendChild(this.sidebarPanes.computedStyle.element);
     this.sidebarElement.appendChild(this.sidebarPanes.styles.element);
     this.sidebarElement.appendChild(this.sidebarPanes.metrics.element);
     this.sidebarElement.appendChild(this.sidebarPanes.properties.element);
@@ -105,6 +107,7 @@ WebInspector.ElementsPanel = function()
     this.element.appendChild(this.sidebarElement);
     this.element.appendChild(this.sidebarResizeElement);
 
+    this._registerShortcuts();
     this._changedStyles = {};
 
     this.reset();
@@ -1062,6 +1065,25 @@ WebInspector.ElementsPanel.prototype = {
         eventListenersSidebarPane.needsUpdate = false;
     },
 
+    _registerShortcuts: function()
+    {
+        var shortcut = WebInspector.KeyboardShortcut;
+        var section = WebInspector.shortcutsHelp.section(WebInspector.UIString("Elements Panel"));
+        var keys = [
+            shortcut.shortcutToString(shortcut.Keys.Up),
+            shortcut.shortcutToString(shortcut.Keys.Down)
+        ];
+        section.addRelatedKeys(keys, WebInspector.UIString("Navigate elements"));
+        var keys = [
+            shortcut.shortcutToString(shortcut.Keys.Right),
+            shortcut.shortcutToString(shortcut.Keys.Left)
+        ];
+        section.addRelatedKeys(keys, WebInspector.UIString("Expand/collapse"));
+        section.addKey(shortcut.shortcutToString(shortcut.Keys.Enter), WebInspector.UIString("Edit attribute"));
+
+        this.sidebarPanes.styles.registerShortcuts();
+    },
+
     handleShortcut: function(event)
     {
         // Cmd/Control + Shift + C should be a shortcut to clicking the Node Search Button.
diff --git a/WebCore/inspector/front-end/ElementsTreeOutline.js b/WebCore/inspector/front-end/ElementsTreeOutline.js
index cd1bf23..0e943c0 100644
--- a/WebCore/inspector/front-end/ElementsTreeOutline.js
+++ b/WebCore/inspector/front-end/ElementsTreeOutline.js
@@ -235,8 +235,8 @@ WebInspector.ElementsTreeOutline.prototype = {
         if (!selectedElement)
             return;
 
-        if (event.keyCode === WebInspector.KeyboardShortcut.KeyCodes.Backspace ||
-                event.keyCode === WebInspector.KeyboardShortcut.KeyCodes.Delete) {
+        if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Backspace.code ||
+                event.keyCode === WebInspector.KeyboardShortcut.Keys.Delete.code) {
             var startTagTreeElement = this.findTreeElement(selectedElement.representedObject);
             if (selectedElement !== startTagTreeElement)
                 selectedElement = startTagTreeElement;
diff --git a/WebCore/inspector/front-end/HelpScreen.js b/WebCore/inspector/front-end/HelpScreen.js
new file mode 100644
index 0000000..0e394c5
--- /dev/null
+++ b/WebCore/inspector/front-end/HelpScreen.js
@@ -0,0 +1,89 @@
+/*
+ * Copyright (C) 2010 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.
+ */
+
+WebInspector.HelpScreen = function(title)
+{
+    this._addStyleSheetIfNeeded("helpScreen.css");
+
+    this._element = document.createElement("div");
+    this._element.className = "help-window-outer";
+    this._element.addEventListener("keydown", this._onKeyDown.bind(this), false);
+
+    var mainWindow = this._element.createChild("div", "help-window-main");
+    var captionWindow = mainWindow.createChild("div", "help-window-caption");
+    var closeButton = captionWindow.createChild("button", "help-close-button");
+    this.contentElement = mainWindow.createChild("div", "help-content");
+    this.contentElement.tabIndex = 0;
+    captionWindow.createChild("h1", "help-window-title").innerText = title;
+
+    closeButton.innerText = "\u2716"; // Code stands for HEAVY MULTIPLICATION X.
+    closeButton.addEventListener("click", this._hide.bind(this), false);
+    this._closeKeys = [
+        WebInspector.KeyboardShortcut.Keys.Enter.code,
+        WebInspector.KeyboardShortcut.Keys.Esc.code,
+        WebInspector.KeyboardShortcut.Keys.Space.code,
+    ];
+    document.body.appendChild(this._element);
+}
+
+WebInspector.HelpScreen.prototype = {
+    show: function()
+    {
+        this._element.style.visibility = "visible";
+        this._isShown = true;
+        this.contentElement.focus();
+    },
+
+    _hide: function()
+    {
+        this._isShown = false;
+        this._element.style.visibility = "hidden";
+    },
+
+    _onKeyDown: function(event)
+    {
+        if (this._isShown && this._closeKeys.indexOf(event.keyCode) >= 0) {
+            this._hide();
+            event.stopPropagation();
+        }
+    },
+
+    _addStyleSheetIfNeeded: function(href)
+    {
+        if (WebInspector.HelpScreen._styleSheetAdded)
+            return;
+       
+        WebInspector.HelpScreen._styleSheetAdded = true;
+        var link = document.head.createChild("link");
+        link.type = "text/css";
+        link.rel = "stylesheet";
+        link.href = href;
+    }
+};
diff --git a/WebCore/inspector/front-end/KeyboardShortcut.js b/WebCore/inspector/front-end/KeyboardShortcut.js
index b4dda8b..4e7c88a 100644
--- a/WebCore/inspector/front-end/KeyboardShortcut.js
+++ b/WebCore/inspector/front-end/KeyboardShortcut.js
@@ -7,13 +7,13 @@
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer. 
+ *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
  *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution. 
+ *     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. 
+ *     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
@@ -40,44 +40,50 @@ WebInspector.KeyboardShortcut.Modifiers = {
     Shift: 1,
     Ctrl: 2,
     Alt: 4,
-    Meta: 8    // Command key on Mac, Win key on other platforms.
+    Meta: 8,   // Command key on Mac, Win key on other platforms.
+    get CtrlOrMeta()
+    {
+        // "default" command/ctrl key for platform, Command on Mac, Ctrl on other platforms
+        return WebInspector.isMac() ? this.Meta : this.Ctrl;
+    }
 };
 
-WebInspector.KeyboardShortcut.KeyCodes = {
-    Backspace: 8,
-    Tab: 9,
-    Esc: 27,
-    Space: 32,
-    PageUp: 33,      // also NUM_NORTH_EAST
-    PageDown: 34,    // also NUM_SOUTH_EAST
-    End: 35,         // also NUM_SOUTH_WEST
-    Home: 36,        // also NUM_NORTH_WEST
-    Left: 37,        // also NUM_WEST
-    Up: 38,          // also NUM_NORTH
-    Right: 39,       // also NUM_EAST
-    Down: 40,        // also NUM_SOUTH
-    Delete: 46,
-    Zero: 48,
-    F1: 112,
-    F2: 113,
-    F3: 114,
-    F4: 115,
-    F5: 116,
-    F6: 117,
-    F7: 118,
-    F8: 119,
-    F9: 120,
-    F10: 121,
-    F11: 122,
-    F12: 123,
-    Semicolon: 186,    // ;
-    Plus: 187,         // +
-    Comma: 188,        // ,
-    Minus: 189,        // -
-    Period: 190,       // .
-    Slash: 191,        // /
-    Apostrophe: 192,   // `
-    SingleQuote: 222   // '
+WebInspector.KeyboardShortcut.Keys = {
+    Backspace: { code: 8, name: "\u21a4" },
+    Tab: { code: 9, name: "<Tab>" },
+    Enter: { code: 13, name: "<Enter>" },
+    Esc: { code: 27, name: "<Esc>" },
+    Space: { code: 32, name: "<Space>" },
+    PageUp: { code: 33,  name: "<PageUp>" },      // also NUM_NORTH_EAST
+    PageDown: { code: 34, name: "<PageDown>" },   // also NUM_SOUTH_EAST
+    End: { code: 35, name: "<End>" },             // also NUM_SOUTH_WEST
+    Home: { code: 36, name: "<Home>" },           // also NUM_NORTH_WEST
+    Left: { code: 37, name: "\u2190" },           // also NUM_WEST
+    Up: { code: 38, name: "\u2191" },             // also NUM_NORTH
+    Right: { code: 39, name: "\u2192" },          // also NUM_EAST
+    Down: { code: 40, name: "\u2193" },           // also NUM_SOUTH
+    Delete: { code: 46, name: "<Del>" },
+    Zero: { code: 48, name: "0" },
+    F1: { code: 112, name: "F1" },
+    F2: { code: 113, name: "F2" },
+    F3: { code: 114, name: "F3" },
+    F4: { code: 115, name: "F4" },
+    F5: { code: 116, name: "F5" },
+    F6: { code: 117, name: "F6" },
+    F7: { code: 118, name: "F7" },
+    F8: { code: 119, name: "F8" },
+    F9: { code: 120, name: "F9" },
+    F10: { code: 121, name: "F10" },
+    F11: { code: 122, name: "F11" },
+    F12: { code: 123, name: "F12" },
+    Semicolon: { code: 186, name: ";" },
+    Plus: { code: 187, name: "+" },
+    Comma: { code: 188, name: "," },
+    Minus: { code: 189, name: "-" },
+    Period: { code: 190, name: "." },
+    Slash: { code: 191, name: "/" },
+    Apostrophe: { code: 192, name: "`" },
+    SingleQuote: { code: 222, name: "\'" }
 };
 
 /**
@@ -110,7 +116,44 @@ WebInspector.KeyboardShortcut.makeKeyFromEvent = function(keyboardEvent)
     return WebInspector.KeyboardShortcut._makeKeyFromCodeAndModifiers(keyboardEvent.keyCode, modifiers);
 };
 
+WebInspector.KeyboardShortcut.makeDescriptor = function(key, optModifiers)
+{
+    var modifiers = 0;
+    for (var i = 1; i < arguments.length; i++)
+        modifiers |= arguments[i];
+
+    return {
+        key: WebInspector.KeyboardShortcut.makeKey(typeof key === "string" ? key : key.code, modifiers),
+        name: WebInspector.KeyboardShortcut.shortcutToString(key, modifiers)
+    };
+}
+
+WebInspector.KeyboardShortcut.shortcutToString = function(key, modifiers)
+{
+    return WebInspector.KeyboardShortcut._modifiersToString(modifiers) + (typeof key === "string" ? key.toUpperCase() : key.name);
+}
+
 WebInspector.KeyboardShortcut._makeKeyFromCodeAndModifiers = function(keyCode, modifiers)
 {
     return (keyCode & 255) | (modifiers << 8);
 };
+
+WebInspector.KeyboardShortcut._modifiersToString = function(modifiers)
+{
+    const cmdKey = "\u2318";
+    const optKey = "\u2325";
+    const shiftKey = "\u21e7";
+
+    var isMac = WebInspector.isMac();
+    var res = "";
+    if (modifiers & WebInspector.KeyboardShortcut.Modifiers.Ctrl)
+        res += "<Ctrl> + ";
+    if (modifiers & WebInspector.KeyboardShortcut.Modifiers.Alt)
+        res += isMac ? optKey : "<Alt> + ";
+    if (modifiers & WebInspector.KeyboardShortcut.Modifiers.Shift)
+        res += isMac ? shiftKey : "<Shift> + ";
+    if (modifiers & WebInspector.KeyboardShortcut.Modifiers.Meta)
+        res += isMac ? cmdKey : "<Win> + ";
+
+    return res;
+};
diff --git a/WebCore/inspector/front-end/ResourcesPanel.js b/WebCore/inspector/front-end/ResourcesPanel.js
index a62994e..7a15959 100644
--- a/WebCore/inspector/front-end/ResourcesPanel.js
+++ b/WebCore/inspector/front-end/ResourcesPanel.js
@@ -102,23 +102,23 @@ WebInspector.ResourcesPanel.prototype = {
         timeGraphItem.isBarOpaqueAtLeft = false;
         timeGraphItem.selectedSortingOptionIndex = 1;
 
-        var sizeGraphItem = new WebInspector.SidebarTreeElement("resources-size-graph-sidebar-item", WebInspector.UIString("Size"));
-        sizeGraphItem.onselect = this._graphSelected.bind(this);
+        this.sizeGraphItem = new WebInspector.SidebarTreeElement("resources-size-graph-sidebar-item", WebInspector.UIString("Size"));
+        this.sizeGraphItem.onselect = this._graphSelected.bind(this);
 
         var transferSizeCalculator = new WebInspector.ResourceTransferSizeCalculator();
-        sizeGraphItem.sortingOptions = [
+        this.sizeGraphItem.sortingOptions = [
             { name: WebInspector.UIString("Sort by Transfer Size"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByDescendingTransferSize, calculator: transferSizeCalculator },
             { name: WebInspector.UIString("Sort by Size"), sortingFunction: WebInspector.ResourceSidebarTreeElement.CompareByDescendingSize, calculator: transferSizeCalculator },
         ];
 
-        sizeGraphItem.isBarOpaqueAtLeft = true;
-        sizeGraphItem.selectedSortingOptionIndex = 0;
+        this.sizeGraphItem.isBarOpaqueAtLeft = true;
+        this.sizeGraphItem.selectedSortingOptionIndex = 0;
 
         this.graphsTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("GRAPHS"), {}, true);
         this.sidebarTree.appendChild(this.graphsTreeElement);
 
         this.graphsTreeElement.appendChild(timeGraphItem);
-        this.graphsTreeElement.appendChild(sizeGraphItem);
+        this.graphsTreeElement.appendChild(this.sizeGraphItem);
         this.graphsTreeElement.expand();
 
         this.itemsTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("RESOURCES"), {}, true);
@@ -625,6 +625,11 @@ WebInspector.ResourcesPanel.prototype = {
 
         this.closeVisibleResource();
         this.containerElement.scrollTop = 0;
+
+        if (treeElement === this.sizeGraphItem)
+            this.hideEventDividers();
+        else
+            this.showEventDividers();
     },
 
     _toggleLargerResources: function()
diff --git a/WebCore/inspector/front-end/ScriptsPanel.js b/WebCore/inspector/front-end/ScriptsPanel.js
index 6344554..31d37a1 100644
--- a/WebCore/inspector/front-end/ScriptsPanel.js
+++ b/WebCore/inspector/front-end/ScriptsPanel.js
@@ -165,37 +165,7 @@ WebInspector.ScriptsPanel = function()
     this._pauseOnExceptionButton.addEventListener("click", this._togglePauseOnExceptions.bind(this), false);
     this._pauseOnExceptionButton.state = WebInspector.ScriptsPanel.PauseOnExceptionsState.DontPauseOnExceptions;
 
-    this._shortcuts = {};
-    var handler, shortcut;
-    var platformSpecificModifier = WebInspector.isMac() ? WebInspector.KeyboardShortcut.Modifiers.Meta : WebInspector.KeyboardShortcut.Modifiers.Ctrl;
-
-    // Continue.
-    handler = this.pauseButton.click.bind(this.pauseButton);
-    shortcut = WebInspector.KeyboardShortcut.makeKey(WebInspector.KeyboardShortcut.KeyCodes.F8);
-    this._shortcuts[shortcut] = handler;
-    shortcut = WebInspector.KeyboardShortcut.makeKey(WebInspector.KeyboardShortcut.KeyCodes.Slash, platformSpecificModifier);
-    this._shortcuts[shortcut] = handler;
-
-    // Step over.
-    handler = this.stepOverButton.click.bind(this.stepOverButton);
-    shortcut = WebInspector.KeyboardShortcut.makeKey(WebInspector.KeyboardShortcut.KeyCodes.F10);
-    this._shortcuts[shortcut] = handler;
-    shortcut = WebInspector.KeyboardShortcut.makeKey(WebInspector.KeyboardShortcut.KeyCodes.SingleQuote, platformSpecificModifier);
-    this._shortcuts[shortcut] = handler;
-
-    // Step into.
-    handler = this.stepIntoButton.click.bind(this.stepIntoButton);
-    shortcut = WebInspector.KeyboardShortcut.makeKey(WebInspector.KeyboardShortcut.KeyCodes.F11);
-    this._shortcuts[shortcut] = handler;
-    shortcut = WebInspector.KeyboardShortcut.makeKey(WebInspector.KeyboardShortcut.KeyCodes.Semicolon, platformSpecificModifier);
-    this._shortcuts[shortcut] = handler;
-
-    // Step out.
-    handler = this.stepOutButton.click.bind(this.stepOutButton);
-    shortcut = WebInspector.KeyboardShortcut.makeKey(WebInspector.KeyboardShortcut.KeyCodes.F11, WebInspector.KeyboardShortcut.Modifiers.Shift);
-    this._shortcuts[shortcut] = handler;
-    shortcut = WebInspector.KeyboardShortcut.makeKey(WebInspector.KeyboardShortcut.KeyCodes.Semicolon, WebInspector.KeyboardShortcut.Modifiers.Shift, platformSpecificModifier);
-    this._shortcuts[shortcut] = handler;
+    this._registerShortcuts();
 
     this._debuggerEnabled = Preferences.debuggerAlwaysEnabled;
     if (Preferences.debuggerAlwaysEnabled)
@@ -478,7 +448,7 @@ WebInspector.ScriptsPanel.prototype = {
         this.reset(true);
     },
 
-    reset: function(preserveWorkers)
+    reset: function(preserveItems)
     {
         this.visibleView = null;
 
@@ -511,11 +481,12 @@ WebInspector.ScriptsPanel.prototype = {
         }
 
         this._sourceIDMap = {};
-        
+
         this.sidebarPanes.watchExpressions.refreshExpressions();
-        this.sidebarPanes.breakpoints.reset();
-        if (!preserveWorkers)
+        if (!preserveItems) {
+            this.sidebarPanes.breakpoints.reset();
             this.sidebarPanes.workers.reset();
+        }
     },
 
     get visibleView()
@@ -1003,6 +974,49 @@ WebInspector.ScriptsPanel.prototype = {
     elementsToRestoreScrollPositionsFor: function()
     {
         return [ this.sidebarElement ];
+    },
+
+    _registerShortcuts: function()
+    {
+        var section = WebInspector.shortcutsHelp.section("Scripts Panel");
+        var handler, shortcut1, shortcut2;
+        var platformSpecificModifier = WebInspector.KeyboardShortcut.Modifiers.CtrlOrMeta;
+
+        this._shortcuts = {};
+
+        // Continue.
+        handler = this.pauseButton.click.bind(this.pauseButton);
+        shortcut1 = WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.F8);
+        this._shortcuts[shortcut1.key] = handler;
+        shortcut2 = WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.Slash, platformSpecificModifier);
+        this._shortcuts[shortcut2.key] = handler;
+        section.addAlternateKeys([ shortcut1.name, shortcut2.name ], "Continue");
+
+        // Step over.
+        handler = this.stepOverButton.click.bind(this.stepOverButton);
+        shortcut1 = WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.F10);
+        this._shortcuts[shortcut1.key] = handler;
+        shortcut2 = WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.SingleQuote, platformSpecificModifier);
+        this._shortcuts[shortcut2.key] = handler;
+        section.addAlternateKeys([ shortcut1.name, shortcut2.name ], "Step over");
+
+        // Step into.
+        handler = this.stepIntoButton.click.bind(this.stepIntoButton);
+        shortcut1 = WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.F11);
+        this._shortcuts[shortcut1.key] = handler;
+        shortcut2 = WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.Semicolon, platformSpecificModifier);
+        this._shortcuts[shortcut2.key] = handler;
+        section.addAlternateKeys([ shortcut1.name, shortcut2.name ], "Step into");
+
+        // Step out.
+        handler = this.stepOutButton.click.bind(this.stepOutButton);
+        shortcut1 = WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.F11, WebInspector.KeyboardShortcut.Modifiers.Shift);
+        this._shortcuts[shortcut1.key] = handler;
+        shortcut2 = WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.Semicolon, WebInspector.KeyboardShortcut.Modifiers.Shift, platformSpecificModifier);
+        this._shortcuts[shortcut2.key] = handler;
+        section.addAlternateKeys([ shortcut1.name, shortcut2.name ], "Step out");
+
+        this.sidebarPanes.callstack.registerShortcuts(section);
     }
 }
 
diff --git a/WebCore/inspector/front-end/ShortcutsHelp.js b/WebCore/inspector/front-end/ShortcutsHelp.js
new file mode 100644
index 0000000..004ed48
--- /dev/null
+++ b/WebCore/inspector/front-end/ShortcutsHelp.js
@@ -0,0 +1,159 @@
+/*
+ * Copyright (C) 2010 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.
+ */
+
+WebInspector.ShortcutsHelp = function()
+{
+    this._sections = {};
+}
+
+WebInspector.ShortcutsHelp.prototype = {
+    section: function(name)
+    {
+        var section = this._sections[name];
+        if (!section)
+            this._sections[name] = section = new WebInspector.ShortcutsSection(name);
+        return section;
+    },
+
+    show: function()
+    {
+        if (!this._helpScreen) {
+            this._helpScreen = new WebInspector.HelpScreen(WebInspector.UIString("Keyboard Shortcuts"));
+            this._buildTable(this._helpScreen.contentElement, 2);
+        }
+        this._helpScreen.show();
+    },
+
+    _buildTable: function(parent, nColumns)
+    {
+        var height = 0;
+        var orderedSections = [];
+        for (var section in this._sections) {
+            height += this._sections[section]._height;
+            orderedSections.push(this._sections[section])
+        }
+        function compareSections(a, b)
+        {
+            return a.order - b.order;
+        }
+        orderedSections = orderedSections.sort(compareSections);
+
+        const wrapAfter = height / nColumns;
+        var table = document.createElement("table");
+        table.className = "help-table";
+        var row = table.createChild("tr");
+
+        // This manual layout ugliness should be gone once WebKit implements
+        // pagination hints for CSS columns (break-inside etc).
+        for (var section = 0; section < orderedSections.length;) {
+            var td = row.createChild("td");
+            td.style.width = (100 / nColumns) + "%";
+            var column = td.createChild("table");
+            for (var columnHeight = 0;
+                columnHeight < wrapAfter && section < orderedSections.length;
+                columnHeight += orderedSections[section]._height, section++) {
+                orderedSections[section].renderSection(column);
+            }
+        }
+        parent.appendChild(table);
+    }
+};
+
+WebInspector.shortcutsHelp = new WebInspector.ShortcutsHelp();
+
+WebInspector.ShortcutsSection = function(name)
+{
+    this.name = name;
+    this._lines = [];
+    this.order = ++WebInspector.ShortcutsSection._sequenceNumber;
+};
+
+WebInspector.ShortcutsSection._sequenceNumber = 0;
+
+WebInspector.ShortcutsSection.prototype = {
+    addKey: function(key, description)
+    {
+        this.addLine(this._renderKey(key), description);
+    },
+
+    addRelatedKeys: function(keys, description)
+    {
+        this.addLine(this._renderSequence(keys,"/"), description);
+    },
+
+    addAlternateKeys: function(keys, description)
+    {
+        this.addLine(this._renderSequence(keys,WebInspector.UIString("or")), description);
+    },
+
+    addLine: function(htmlKey, description)
+    {
+        this._lines.push({ key: htmlKey, text: description })
+    },
+
+    renderSection: function(parent)
+    {
+        this._renderHeader(parent);
+
+        for (var line = 0; line < this._lines.length; ++line) {
+            var tr = parent.createChild("tr");
+            tr.createChild("td", "help-key-cell").innerHTML = this._lines[line].key + " : ";
+            tr.createChild("td").innerText = this._lines[line].text;
+        }
+    },
+
+    _renderHeader: function(parent)
+    {
+        var trHead = parent.createChild("tr");
+ 
+        trHead.createChild("th");
+        trHead.createChild("th").innerText = this.name;
+    },
+
+    _renderSequence: function(sequence, delimiter)
+    {
+        var delimiterHtml = '<span class="help-key-delimiter">' + delimiter.escapeHTML() + '</span>'
+        return sequence.map(this._renderKey).join(delimiterHtml);
+    },
+
+    _renderKey: function(key)
+    {
+        function renderLabel(label)
+        {
+            return '<span class="help-key monospace">' + label.escapeHTML() + '</span>';
+        }
+        return key.split(" + ").map(renderLabel).join('<span class="help-combine-keys">+</span>');
+    },
+
+    get _height()
+    {
+        return this._lines.length + 2; // add some space for header
+    }
+};
diff --git a/WebCore/inspector/front-end/SidebarPane.js b/WebCore/inspector/front-end/SidebarPane.js
index 855894c..ebc62db 100644
--- a/WebCore/inspector/front-end/SidebarPane.js
+++ b/WebCore/inspector/front-end/SidebarPane.js
@@ -125,7 +125,7 @@ WebInspector.SidebarPane.prototype = {
 
     _onTitleKeyDown: function(event)
     {
-        if (isEnterKey(event) || event.keyCode === WebInspector.KeyboardShortcut.KeyCodes.Space)
+        if (isEnterKey(event) || event.keyCode === WebInspector.KeyboardShortcut.Keys.Space.code)
             this.toggleExpanded();
     }
 }
diff --git a/WebCore/inspector/front-end/StylesSidebarPane.js b/WebCore/inspector/front-end/StylesSidebarPane.js
index c280fbb..35d25d4 100644
--- a/WebCore/inspector/front-end/StylesSidebarPane.js
+++ b/WebCore/inspector/front-end/StylesSidebarPane.js
@@ -27,7 +27,7 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.StylesSidebarPane = function()
+WebInspector.StylesSidebarPane = function(computedStylePane)
 {
     WebInspector.SidebarPane.call(this, WebInspector.UIString("Styles"));
 
@@ -63,6 +63,7 @@ WebInspector.StylesSidebarPane = function()
     WebInspector.settings.addEventListener("loaded", this._settingsLoaded, this);
 
     this.titleElement.appendChild(this.settingsSelectElement);
+    this._computedStylePane = computedStylePane;
 }
 
 // Taken from http://www.w3.org/TR/CSS21/propidx.html.
@@ -71,7 +72,7 @@ WebInspector.StylesSidebarPane.InheritedProperties = [
     "empty-cells", "font-family", "font-size", "font-style", "font-variant", "font-weight", "font", "letter-spacing",
     "line-height", "list-style-image", "list-style-position", "list-style-type", "list-style", "orphans", "pitch-range",
     "pitch", "quotes", "richness", "speak-header", "speak-numeral", "speak-punctuation", "speak", "speech-rate", "stress",
-    "text-align", "text-indent", "text-transform", "visibility", "voice-family", "volume", "white-space", "widows", "word-spacing"
+    "text-align", "text-indent", "text-transform", "text-shadow", "visibility", "voice-family", "volume", "white-space", "widows", "word-spacing"
 ].keySet();
 
 // Keep in sync with RenderStyleConstants.h PseudoId enum. Array below contains pseudo id names for corresponding enum indexes.
@@ -125,10 +126,9 @@ WebInspector.StylesSidebarPane.prototype = {
         else
             node = this.node;
 
-        var body = this.bodyElement;
-
         if (!node) {
-            body.removeChildren();
+            this.bodyElement.removeChildren();
+            this._computedStylePane.bodyElement.removeChildren();
             this.sections = {};
             return;
         }
@@ -165,6 +165,7 @@ WebInspector.StylesSidebarPane.prototype = {
     _rebuildUpdate: function(node, styles)
     {
         this.bodyElement.removeChildren();
+        this._computedStylePane.bodyElement.removeChildren();
         var styleRules = this._rebuildStyleRules(node, styles);
         var usedProperties = {};
         var disabledComputedProperties = {};
@@ -215,7 +216,7 @@ WebInspector.StylesSidebarPane.prototype = {
 
         var styleRules = [];
 
-        styleRules.push({ computedStyle: true, selectorText: WebInspector.UIString("Computed Style"), style: nodeComputedStyle, editable: false });
+        styleRules.push({ computedStyle: true, selectorText: "", style: nodeComputedStyle, editable: false });
 
         var styleAttributes = {};
         for (var name in styles.styleAttributes) {
@@ -230,12 +231,14 @@ WebInspector.StylesSidebarPane.prototype = {
 
         // Show element's Style Attributes
         if (styles.inlineStyle && node.nodeType === Node.ELEMENT_NODE) {
-            var inlineStyle = { selectorText: WebInspector.UIString("Style Attribute"), style: new WebInspector.CSSStyleDeclaration(styles.inlineStyle), isAttribute: true };
+            var inlineStyle = { selectorText: "element.style", style: new WebInspector.CSSStyleDeclaration(styles.inlineStyle), isAttribute: true };
             inlineStyle.subtitle = WebInspector.UIString("element’s “%s” attribute", "style");
             styleRules.push(inlineStyle);
         }
 
         // Add rules in reverse order to match the cascade order.
+        if (styles.matchedCSSRules.length)
+            styleRules.push({ isStyleSeparator: true, text: WebInspector.UIString("Matched CSS Rules") });
         for (var i = styles.matchedCSSRules.length - 1; i >= 0; --i) {
             var rule = WebInspector.CSSStyleDeclaration.parseRule(styles.matchedCSSRules[i]);
             styleRules.push({ style: rule.style, selectorText: rule.selectorText, parentStyleSheet: rule.parentStyleSheet, rule: rule });
@@ -245,7 +248,7 @@ WebInspector.StylesSidebarPane.prototype = {
         var userPropertyNames = {};
         for (var i = 0; i < styleRules.length; ++i) {
             var styleRule = styleRules[i];
-            if (styleRule.computedStyle)
+            if (styleRule.computedStyle || styleRule.isStyleSeparator)
                 continue;
             var style = styleRule.style;
             for (var j = 0; j < style.length; ++j)
@@ -403,6 +406,7 @@ WebInspector.StylesSidebarPane.prototype = {
     {
         // Make a property section for each style rule.
         var sections = [];
+        var lastWasSeparator = true;
         for (var i = 0; i < styleRules.length; ++i) {
             var styleRule = styleRules[i];
             if (styleRule.isStyleSeparator) {
@@ -418,8 +422,10 @@ WebInspector.StylesSidebarPane.prototype = {
                         separatorElement.textContent = WebInspector.UIString("Pseudo ::%s element", pseudoName);
                     else
                         separatorElement.textContent = WebInspector.UIString("Pseudo element");
-                }
+                } else
+                    separatorElement.textContent = styleRule.text;
                 this.bodyElement.appendChild(separatorElement);
+                lastWasSeparator = true;
                 continue;
             }
             var computedStyle = styleRule.computedStyle;
@@ -429,23 +435,19 @@ WebInspector.StylesSidebarPane.prototype = {
             if (typeof editable === "undefined")
                 editable = true;
 
-            var section = new WebInspector.StylePropertiesSection(styleRule, styleRule.subtitle, styleRule.computedStyle, (styleRule.usedProperties || usedProperties), editable, styleRule.isInherited);
+            var section = new WebInspector.StylePropertiesSection(styleRule, styleRule.subtitle, styleRule.computedStyle, (styleRule.usedProperties || usedProperties), editable, styleRule.isInherited, lastWasSeparator);
             if (computedStyle)
                 section.disabledComputedProperties = disabledComputedProperties;
             section.pane = this;
+            section.expanded = true;
 
-            if (Preferences.styleRulesExpandedState && section.identifier in Preferences.styleRulesExpandedState)
-                section.expanded = Preferences.styleRulesExpandedState[section.identifier];
-            else if (computedStyle)
-                section.collapse(true);
-            else if (styleRule.isAttribute && styleRule.style.length === 0)
-                section.collapse(true);
-            else if (styleRule.isInherited)
-                section.collapse(true);
-            else
-                section.expand(true);
-
-            this.bodyElement.appendChild(section.element);
+            if (computedStyle) {
+                this._computedStylePane.bodyElement.appendChild(section.element);
+                lastWasSeparator = true;
+            } else {
+                this.bodyElement.appendChild(section.element);
+                lastWasSeparator = false;
+            }
             sections.push(section);
         }
         return sections;
@@ -453,15 +455,21 @@ WebInspector.StylesSidebarPane.prototype = {
 
     _containsInherited: function(payload)
     {
-        var properties = [];
-        for (var i = 0; i < payload.properties.length; ++i) {
-            var property = payload.properties[i];
+        if (this._arrayContainsInheritedProperty(payload.properties))
+            return true;
+        if (payload.disabled && this._arrayContainsInheritedProperty(payload.disabled))
+            return true;
+        return false;
+    },
+
+    _arrayContainsInheritedProperty: function(properties)
+    {
+        for (var i = 0; i < properties.length; ++i) {
+            var property = properties[i];
             // Does this style contain non-overriden inherited property?
             if (property.name in WebInspector.StylesSidebarPane.InheritedProperties)
                 return true;
         }
-        if (payload.disabled && this._containsInherited(payload.disabled))
-            return true;
         return false;
     },
 
@@ -524,17 +532,97 @@ WebInspector.StylesSidebarPane.prototype = {
             if (section.element.parentNode)
                 section.element.parentNode.removeChild(section.element);
         }
+    },
+
+    registerShortcuts: function()
+    {
+        var section = WebInspector.shortcutsHelp.section(WebInspector.UIString("Styles Pane"));
+        var shortcut = WebInspector.KeyboardShortcut;
+        var keys = [
+            shortcut.shortcutToString(shortcut.Keys.Tab),
+            shortcut.shortcutToString(shortcut.Keys.Tab, shortcut.Modifiers.Shift)
+        ];
+        section.addRelatedKeys(keys, WebInspector.UIString("Next/previous property"));
+        keys = [
+            shortcut.shortcutToString(shortcut.Keys.Up),
+            shortcut.shortcutToString(shortcut.Keys.Down)
+        ];
+        section.addRelatedKeys(keys, WebInspector.UIString("Increment/decrement value"));
+        keys = [
+            shortcut.shortcutToString(shortcut.Keys.Up, shortcut.Modifiers.Shift),
+            shortcut.shortcutToString(shortcut.Keys.Down, shortcut.Modifiers.Shift)
+        ];
+        section.addRelatedKeys(keys, WebInspector.UIString("Increment/decrement by %f", 10));
+        keys = [
+            shortcut.shortcutToString(shortcut.Keys.PageUp),
+            shortcut.shortcutToString(shortcut.Keys.PageDown)
+        ];
+        section.addRelatedKeys(keys, WebInspector.UIString("Increment/decrement by %f", 10));
+        keys = [
+            shortcut.shortcutToString(shortcut.Keys.PageUp, shortcut.Modifiers.Shift),
+            shortcut.shortcutToString(shortcut.Keys.PageDown, shortcut.Modifiers.Shift)
+        ];
+        section.addRelatedKeys(keys, WebInspector.UIString("Increment/decrement by %f", 100));
+        keys = [
+            shortcut.shortcutToString(shortcut.Keys.PageUp, shortcut.Modifiers.Alt),
+            shortcut.shortcutToString(shortcut.Keys.PageDown, shortcut.Modifiers.Alt)
+        ];
+        section.addRelatedKeys(keys, WebInspector.UIString("Increment/decrement by %f", 0.1));
     }
 }
 
 WebInspector.StylesSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype;
 
-WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyle, usedProperties, editable, isInherited)
+WebInspector.ComputedStyleSidebarPane = function()
 {
-    WebInspector.PropertiesSection.call(this, styleRule.selectorText);
+    WebInspector.SidebarPane.call(this, WebInspector.UIString("Computed Style"));
+    var showInheritedCheckbox = new WebInspector.Checkbox(WebInspector.UIString("Show inherited"), "sidebar-pane-subtitle");
+    this.titleElement.appendChild(showInheritedCheckbox.element);
 
-    this.titleElement.addEventListener("dblclick", this._handleSelectorDoubleClick.bind(this), false);
-    this.titleElement.addEventListener("click", this._handleSelectorClick.bind(this), false);
+    function settingsLoaded()
+    {
+        if (WebInspector.settings.showInheritedComputedStyleProperties) {
+            this.bodyElement.addStyleClass("show-inherited");
+            showInheritedCheckbox.checked = true;
+        }
+    }
+
+    WebInspector.settings.addEventListener("loaded", settingsLoaded.bind(this));
+
+    function showInheritedToggleFunction(event)
+    {
+        WebInspector.settings.showInheritedComputedStyleProperties = showInheritedCheckbox.checked;
+        if (WebInspector.settings.showInheritedComputedStyleProperties)
+            this.bodyElement.addStyleClass("show-inherited");
+        else
+            this.bodyElement.removeStyleClass("show-inherited");
+    }
+
+    showInheritedCheckbox.addEventListener(showInheritedToggleFunction.bind(this));
+}
+ 
+WebInspector.ComputedStyleSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype;
+
+WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyle, usedProperties, editable, isInherited, isFirstSection)
+{
+    WebInspector.PropertiesSection.call(this, "");
+    this.element.className = "styles-section monospace" + (isFirstSection ? " first-styles-section" : "");
+
+    this._selectorElement = document.createElement("span");
+    this._selectorElement.textContent = styleRule.selectorText;
+    this.titleElement.appendChild(this._selectorElement);
+
+    if (!computedStyle) {
+        var openBrace = document.createElement("span");
+        openBrace.textContent = " {";
+        this.titleElement.appendChild(openBrace);
+
+        var closeBrace = document.createElement("div");
+        closeBrace.textContent = "}";
+        this.element.appendChild(closeBrace);
+    }
+
+    this._selectorElement.addEventListener("dblclick", this._handleSelectorDoubleClick.bind(this), false);
     this.element.addEventListener("dblclick", this._handleEmptySpaceDoubleClick.bind(this), false);
 
     this.styleRule = styleRule;
@@ -558,24 +646,7 @@ WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyl
 
     if (computedStyle) {
         this.element.addStyleClass("computed-style");
-
-        if (WebInspector.settings.showInheritedComputedStyleProperties)
-            this.element.addStyleClass("show-inherited");
-
-        var computedStyleSection = this;
-        var showInheritedToggleFunction = function(event) {
-            WebInspector.settings.showInheritedComputedStyleProperties = computedStyleSection._showInheritedCheckbox.checked();
-            if (WebInspector.settings.showInheritedComputedStyleProperties)
-                computedStyleSection.element.addStyleClass("show-inherited");
-            else
-                computedStyleSection.element.removeStyleClass("show-inherited");
-        };
-
-        this._showInheritedCheckbox = new WebInspector.Checkbox(WebInspector.UIString("Show inherited"),
-                                                                showInheritedToggleFunction,
-                                                                WebInspector.settings.showInheritedComputedStyleProperties);
-
-        this.subtitleElement.appendChild(this._showInheritedCheckbox.element);
+        this.headerElement.addStyleClass("hidden");
     } else {
         if (!subtitle) {
             if (this.styleRule.parentStyleSheet && this.styleRule.parentStyleSheet.href) {
@@ -591,7 +662,7 @@ WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyl
                 subtitle = WebInspector.UIString("inline stylesheet");
         }
         if (isInherited)
-            this.element.addStyleClass("show-inherited");
+            this.element.addStyleClass("show-inherited"); // This one is related to inherited rules, not compted style.
         if (subtitle)
             this.subtitle = subtitle;
     }
@@ -613,26 +684,9 @@ WebInspector.StylePropertiesSection.prototype = {
         this.update();
     },
 
-    expand: function(dontRememberState)
-    {
-        WebInspector.PropertiesSection.prototype.expand.call(this);
-        if (dontRememberState)
-            return;
-
-        if (!Preferences.styleRulesExpandedState)
-            Preferences.styleRulesExpandedState = {};
-        Preferences.styleRulesExpandedState[this.identifier] = true;
-    },
-
     collapse: function(dontRememberState)
     {
-        WebInspector.PropertiesSection.prototype.collapse.call(this);
-        if (dontRememberState)
-            return;
-
-        if (!Preferences.styleRulesExpandedState)
-            Preferences.styleRulesExpandedState = {};
-        Preferences.styleRulesExpandedState[this.identifier] = false;
+        // Overriding with empty body.
     },
 
     isPropertyInherited: function(property)
@@ -801,11 +855,11 @@ WebInspector.StylePropertiesSection.prototype = {
 
     startEditingSelector: function()
     {
-        var element = this.titleElement;
+        var element = this._selectorElement;
         if (WebInspector.isBeingEdited(element))
             return;
 
-        WebInspector.startEditing(this.titleElement, this.editingSelectorCommitted.bind(this), this.editingSelectorCancelled.bind(this), null);
+        WebInspector.startEditing(this._selectorElement, this.editingSelectorCommitted.bind(this), this.editingSelectorCancelled.bind(this), null);
         window.getSelection().setBaseAndExtent(element, 0, element, 1);
     },
 
@@ -1025,7 +1079,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
         enabledCheckboxElement.addEventListener("change", this.toggleEnabled.bind(this), false);
 
         var nameElement = document.createElement("span");
-        nameElement.className = "name";
+        nameElement.className = "webkit-css-property";
         nameElement.textContent = this.name;
         this.nameElement = nameElement;
 
@@ -1185,6 +1239,8 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
     updateAll: function(updateAllRules)
     {
+        if (!this.treeOutline)
+            return;
         if (updateAllRules && this.treeOutline.section && this.treeOutline.section.pane)
             this.treeOutline.section.pane.update(null, this.treeOutline.section);
         else if (this.treeOutline.section)
diff --git a/WebCore/inspector/front-end/TestController.js b/WebCore/inspector/front-end/TestController.js
index b2630ae..3bfe28c 100644
--- a/WebCore/inspector/front-end/TestController.js
+++ b/WebCore/inspector/front-end/TestController.js
@@ -32,6 +32,7 @@ WebInspector.TestController = function(callId)
 {
     this._callId = callId;
     this._waitUntilDone = false;
+    this.results = [];
 }
 
 WebInspector.TestController.prototype = {
@@ -42,6 +43,8 @@ WebInspector.TestController.prototype = {
 
     notifyDone: function(result)
     {
+        if (typeof result === "undefined" && this.results.length)
+            result = this.results;
         var message = typeof result === "undefined" ? "\"<undefined>\"" : JSON.stringify(result);
         InspectorBackend.didEvaluateForTestInFrontend(this._callId, message);
     },
diff --git a/WebCore/inspector/front-end/TextPrompt.js b/WebCore/inspector/front-end/TextPrompt.js
index 7fcce8c..2bbe075 100644
--- a/WebCore/inspector/front-end/TextPrompt.js
+++ b/WebCore/inspector/front-end/TextPrompt.js
@@ -219,27 +219,50 @@ WebInspector.TextPrompt.prototype = {
         if (originalWordPrefixRange.toString() + selectionRange.toString() != fullWordRange.toString())
             return;
 
-        if (completions.length === 1 || selection.isCollapsed || auto) {
-            var completionText = completions[0];
-        } else {
-            var currentText = fullWordRange.toString();
-
-            var foundIndex = null;
-            for (var i = 0; i < completions.length; ++i)
-                if (completions[i] === currentText)
-                    foundIndex = i;
+        var wordPrefixLength = originalWordPrefixRange.toString().length;
 
-            var nextIndex = foundIndex + (reverse ? -1 : 1);
-            if (foundIndex === null || nextIndex >= completions.length)
+        if (auto)
+            var completionText = completions[0];
+        else {
+            if (completions.length === 1) {
                 var completionText = completions[0];
-            else if (nextIndex < 0)
-                var completionText = completions[completions.length - 1];
-            else
-                var completionText = completions[nextIndex];
+                wordPrefixLength = completionText.length;
+            } else {
+                var commonPrefix = completions[0];
+                for (var i = 0; i < completions.length; ++i) {
+                    var completion = completions[i];
+                    var lastIndex = Math.min(commonPrefix.length, completion.length);
+                    for (var j = wordPrefixLength; j < lastIndex; ++j) {
+                        if (commonPrefix[j] !== completion[j]) {
+                            commonPrefix = commonPrefix.substr(0, j);
+                            break;
+                        }
+                    }
+                }
+                wordPrefixLength = commonPrefix.length;
+
+                if (selection.isCollapsed)
+                    var completionText = completions[1];
+                else {
+                    var currentText = fullWordRange.toString();
+
+                    var foundIndex = null;
+                    for (var i = 0; i < completions.length; ++i) {
+                        if (completions[i] === currentText)
+                            foundIndex = i;
+                    }
+
+                    var nextIndex = foundIndex + (reverse ? -1 : 1);
+                    if (foundIndex === null || nextIndex >= completions.length)
+                        var completionText = completions[0];
+                    else if (nextIndex < 0)
+                        var completionText = completions[completions.length - 1];
+                    else
+                        var completionText = completions[nextIndex];
+                }
+            }
         }
 
-        var wordPrefixLength = originalWordPrefixRange.toString().length;
-
         this._userEnteredRange = fullWordRange;
         this._userEnteredText = fullWordRange.toString();
 
diff --git a/WebCore/inspector/front-end/TextViewer.js b/WebCore/inspector/front-end/TextViewer.js
index eae7394..1de1c12 100644
--- a/WebCore/inspector/front-end/TextViewer.js
+++ b/WebCore/inspector/front-end/TextViewer.js
@@ -221,9 +221,9 @@ WebInspector.TextViewer.prototype = {
             return;
 
         var scrollValue = 0;
-        if (event.keyCode === WebInspector.KeyboardShortcut.KeyCodes.Up)
+        if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Up.code)
             scrollValue = -1;
-        else if (event.keyCode == WebInspector.KeyboardShortcut.KeyCodes.Down)
+        else if (event.keyCode == WebInspector.KeyboardShortcut.Keys.Down.code)
             scrollValue = 1;
         
         if (scrollValue) {
@@ -234,9 +234,9 @@ WebInspector.TextViewer.prototype = {
         }
         
         scrollValue = 0;
-        if (event.keyCode === WebInspector.KeyboardShortcut.KeyCodes.Left)
+        if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Left.code)
             scrollValue = -40;
-        else if (event.keyCode == WebInspector.KeyboardShortcut.KeyCodes.Right)
+        else if (event.keyCode == WebInspector.KeyboardShortcut.Keys.Right.code)
             scrollValue = 40;
         
         if (scrollValue) {
diff --git a/WebCore/inspector/front-end/TimelineAgent.js b/WebCore/inspector/front-end/TimelineAgent.js
index 387d491..d44c2d0 100644
--- a/WebCore/inspector/front-end/TimelineAgent.js
+++ b/WebCore/inspector/front-end/TimelineAgent.js
@@ -53,7 +53,8 @@ WebInspector.TimelineAgent.RecordType = {
     ResourceReceiveData: 16,
     GCEvent : 17,
     MarkDOMContentEventType : 18,
-    MarkLoadEventType : 19
+    MarkLoadEventType : 19,
+    ScheduleResourceRequest : 20
 };
 
 WebInspector.addRecordToTimeline = function(record) {
diff --git a/WebCore/inspector/front-end/TimelineGrid.js b/WebCore/inspector/front-end/TimelineGrid.js
index 3286e65..ad7e769 100644
--- a/WebCore/inspector/front-end/TimelineGrid.js
+++ b/WebCore/inspector/front-end/TimelineGrid.js
@@ -148,6 +148,16 @@ WebInspector.TimelineGrid.prototype = {
         this._eventDividersElement.removeChildren();
     },
 
+    hideEventDividers: function()
+    {
+        this._eventDividersElement.addStyleClass("hidden");
+    },
+
+    showEventDividers: function()
+    {
+        this._eventDividersElement.removeStyleClass("hidden");
+    },
+
     setScrollAndDividerTop: function(scrollTop, dividersTop)
     {
         this._dividersElement.style.top = scrollTop + "px";
diff --git a/WebCore/inspector/front-end/TimelinePanel.js b/WebCore/inspector/front-end/TimelinePanel.js
index 4ff9d5a..733272d 100644
--- a/WebCore/inspector/front-end/TimelinePanel.js
+++ b/WebCore/inspector/front-end/TimelinePanel.js
@@ -76,8 +76,13 @@ WebInspector.TimelinePanel = function()
     this._bottomGapElement.className = "timeline-gap";
     this._itemsGraphsElement.appendChild(this._bottomGapElement);
 
+    this._expandElements = document.createElement("div");
+    this._expandElements.id = "orphan-expand-elements";
+    this._itemsGraphsElement.appendChild(this._expandElements);
+
     this._rootRecord = this._createRootRecord();
     this._sendRequestRecords = {};
+    this._scheduledResourceRequests = {};
     this._timerRecords = {};
 
     this._calculator = new WebInspector.TimelineCalculator();
@@ -99,6 +104,8 @@ WebInspector.TimelinePanel = function()
     this._expandOffset = 15;
 }
 
+// Define row height, should be in sync with styles for timeline graphs.
+WebInspector.TimelinePanel.rowHeight = 18;
 WebInspector.TimelinePanel.shortRecordThreshold = 0.015;
 
 WebInspector.TimelinePanel.prototype = {
@@ -156,6 +163,7 @@ WebInspector.TimelinePanel.prototype = {
             recordStyles[recordTypes.GCEvent] = { title: WebInspector.UIString("GC Event"), category: this.categories.scripting };
             recordStyles[recordTypes.MarkDOMContentEventType] = { title: WebInspector.UIString("DOMContent event"), category: this.categories.scripting };
             recordStyles[recordTypes.MarkLoadEventType] = { title: WebInspector.UIString("Load event"), category: this.categories.scripting };
+            recordStyles[recordTypes.ScheduleResourceRequest] = { title: WebInspector.UIString("Schedule Request"), category: this.categories.loading };
             this._recordStylesArray = recordStyles;
         }
         return this._recordStylesArray;
@@ -275,6 +283,8 @@ WebInspector.TimelinePanel.prototype = {
             parentRecord = this._sendRequestRecords[record.data.identifier];
         else if (record.type === recordTypes.TimerFire)
             parentRecord = this._timerRecords[record.data.timerId];
+        else if (record.type === recordTypes.ResourceSendRequest)
+            parentRecord = this._scheduledResourceRequests[record.data.url];
         return parentRecord;
     },
 
@@ -292,16 +302,17 @@ WebInspector.TimelinePanel.prototype = {
             }
         }
 
-        if (record.type == recordTypes.TimerFire && record.children && record.children.length === 1) {
+        if (record.type == recordTypes.TimerFire && record.children && record.children.length) {
             var childRecord = record.children[0];
-            if ( childRecord.type === recordTypes.FunctionCall) {
+            if (childRecord.type === recordTypes.FunctionCall) {
                 record.data.scriptName = childRecord.data.scriptName;
                 record.data.scriptLine = childRecord.data.scriptLine;
-                record.children = childRecord.children;
+                record.children.shift();
+                record.children = childRecord.children.concat(record.children);
             }
         }
 
-        var formattedRecord = new WebInspector.TimelinePanel.FormattedRecord(record, parentRecord, this._recordStyles, this._sendRequestRecords, this._timerRecords);
+        var formattedRecord = new WebInspector.TimelinePanel.FormattedRecord(record, parentRecord, this);
 
         if (record.type === recordTypes.MarkDOMContentEventType || record.type === recordTypes.MarkLoadEventType) {
             this._markTimelineRecords.push(formattedRecord);
@@ -371,6 +382,7 @@ WebInspector.TimelinePanel.prototype = {
     {
         this._markTimelineRecords = [];
         this._sendRequestRecords = {};
+        this._scheduledResourceRequests = {};
         this._timerRecords = {};
         this._rootRecord = this._createRootRecord();
         this._boundariesAreValid = false;
@@ -491,8 +503,7 @@ WebInspector.TimelinePanel.prototype = {
         var visibleTop = this._scrollTop;
         var visibleBottom = visibleTop + this._containerElement.clientHeight;
 
-        // Define row height, should be in sync with styles for timeline graphs.
-        const rowHeight = 18;
+        const rowHeight = WebInspector.TimelinePanel.rowHeight;
 
         // Convert visible area to visible indexes. Always include top-level record for a visible nested record.
         var startIndex = Math.max(0, Math.min(Math.floor(visibleTop / rowHeight) - 1, recordsInWindow.length - 1));
@@ -511,25 +522,35 @@ WebInspector.TimelinePanel.prototype = {
         this._itemsGraphsElement.removeChild(this._graphRowsElement);
         var graphRowElement = this._graphRowsElement.firstChild;
         var scheduleRefreshCallback = this._scheduleRefresh.bind(this, true);
+        this._itemsGraphsElement.removeChild(this._expandElements);
+        this._expandElements.removeChildren();
 
-        for (var i = startIndex; i < endIndex; ++i) {
+        for (var i = 0; i < endIndex; ++i) {
             var record = recordsInWindow[i];
             var isEven = !(i % 2);
 
-            if (!listRowElement) {
-                listRowElement = new WebInspector.TimelineRecordListRow().element;
-                this._sidebarListElement.appendChild(listRowElement);
-            }
-            if (!graphRowElement) {
-                graphRowElement = new WebInspector.TimelineRecordGraphRow(this._itemsGraphsElement, scheduleRefreshCallback, rowHeight).element;
-                this._graphRowsElement.appendChild(graphRowElement);
-            }
+            if (i < startIndex) {
+                var lastChildIndex = i + record._visibleChildrenCount;
+                if (lastChildIndex >= startIndex && lastChildIndex < endIndex) {
+                    var expandElement = new WebInspector.TimelineExpandableElement(this._expandElements);
+                    expandElement._update(record, i, this._calculator.computeBarGraphWindowPosition(record, width - this._expandOffset));
+                }
+            } else {
+                if (!listRowElement) {
+                    listRowElement = new WebInspector.TimelineRecordListRow().element;
+                    this._sidebarListElement.appendChild(listRowElement);
+                }
+                if (!graphRowElement) {
+                    graphRowElement = new WebInspector.TimelineRecordGraphRow(this._itemsGraphsElement, scheduleRefreshCallback, rowHeight).element;
+                    this._graphRowsElement.appendChild(graphRowElement);
+                }
 
-            listRowElement.row.update(record, isEven, this._calculator, visibleTop);
-            graphRowElement.row.update(record, isEven, this._calculator, width, this._expandOffset, i);
+                listRowElement.row.update(record, isEven, this._calculator, visibleTop);
+                graphRowElement.row.update(record, isEven, this._calculator, width, this._expandOffset, i);
 
-            listRowElement = listRowElement.nextSibling;
-            graphRowElement = graphRowElement.nextSibling;
+                listRowElement = listRowElement.nextSibling;
+                graphRowElement = graphRowElement.nextSibling;
+            }
         }
 
         // Remove extra rows.
@@ -545,6 +566,7 @@ WebInspector.TimelinePanel.prototype = {
         }
 
         this._itemsGraphsElement.insertBefore(this._graphRowsElement, this._bottomGapElement);
+        this._itemsGraphsElement.appendChild(this._expandElements);
         this.sidebarResizeElement.style.height = this.sidebarElement.clientHeight + "px";
         // Reserve some room for expand / collapse controls to the left for records that start at 0ms.
         var timelinePaddingLeft = this._calculator.windowLeft === 0 ? this._expandOffset : 0;
@@ -708,7 +730,7 @@ WebInspector.TimelineRecordListRow.prototype = {
     }
 }
 
-WebInspector.TimelineRecordGraphRow = function(graphContainer, scheduleRefresh, rowHeight)
+WebInspector.TimelineRecordGraphRow = function(graphContainer, scheduleRefresh)
 {
     this.element = document.createElement("div");
     this.element.row = this;
@@ -732,16 +754,8 @@ WebInspector.TimelineRecordGraphRow = function(graphContainer, scheduleRefresh,
     this._barElement.row = this;
     this._barAreaElement.appendChild(this._barElement);
 
-    this._expandElement = document.createElement("div");
-    this._expandElement.className = "timeline-expandable";
-    graphContainer.appendChild(this._expandElement);
-
-    var leftBorder = document.createElement("div");
-    leftBorder.className = "timeline-expandable-left";
-    this._expandElement.appendChild(leftBorder);
-
-    this._expandElement.addEventListener("click", this._onClick.bind(this));
-    this._rowHeight = rowHeight;
+    this._expandElement = new WebInspector.TimelineExpandableElement(graphContainer);
+    this._expandElement._element.addEventListener("click", this._onClick.bind(this));
 
     this._scheduleRefresh = scheduleRefresh;
 }
@@ -758,24 +772,7 @@ WebInspector.TimelineRecordGraphRow.prototype = {
         this._barElement.style.width =  barPosition.width + "px";
         this._barCpuElement.style.left = barPosition.left + expandOffset + "px";
         this._barCpuElement.style.width = barPosition.cpuWidth + "px";
-
-        if (record._visibleChildrenCount || record._invisibleChildrenCount) {
-            this._expandElement.style.top = index * this._rowHeight + "px";
-            this._expandElement.style.left = barPosition.left + "px";
-            this._expandElement.style.width = Math.max(12, barPosition.width + 25) + "px";
-            if (!record.collapsed) {
-                this._expandElement.style.height = (record._visibleChildrenCount + 1) * this._rowHeight + "px";
-                this._expandElement.addStyleClass("timeline-expandable-expanded");
-                this._expandElement.removeStyleClass("timeline-expandable-collapsed");
-            } else {
-                this._expandElement.style.height = this._rowHeight + "px";
-                this._expandElement.addStyleClass("timeline-expandable-collapsed");
-                this._expandElement.removeStyleClass("timeline-expandable-expanded");
-            }
-            this._expandElement.removeStyleClass("hidden");
-        } else {
-            this._expandElement.addStyleClass("hidden");
-        }
+        this._expandElement._update(record, index, barPosition);
     },
 
     _onClick: function(event)
@@ -787,14 +784,14 @@ WebInspector.TimelineRecordGraphRow.prototype = {
     dispose: function()
     {
         this.element.parentElement.removeChild(this.element);
-        this._expandElement.parentElement.removeChild(this._expandElement);
+        this._expandElement._dispose();
     }
 }
 
-WebInspector.TimelinePanel.FormattedRecord = function(record, parentRecord, recordStyles, sendRequestRecords, timerRecords)
+WebInspector.TimelinePanel.FormattedRecord = function(record, parentRecord, panel)
 {
     var recordTypes = WebInspector.TimelineAgent.RecordType;
-    var style = recordStyles[record.type];
+    var style = panel._recordStyles[record.type];
 
     this.parent = parentRecord;
     if (parentRecord)
@@ -815,28 +812,32 @@ WebInspector.TimelinePanel.FormattedRecord = function(record, parentRecord, reco
 
     // Make resource receive record last since request was sent; make finish record last since response received.
     if (record.type === recordTypes.ResourceSendRequest) {
-        sendRequestRecords[record.data.identifier] = this;
+        panel._sendRequestRecords[record.data.identifier] = this;
+    } else if (record.type === recordTypes.ScheduleResourceRequest) {
+        panel._scheduledResourceRequests[record.data.url] = this;
     } else if (record.type === recordTypes.ResourceReceiveResponse) {
-        var sendRequestRecord = sendRequestRecords[record.data.identifier];
+        var sendRequestRecord = panel._sendRequestRecords[record.data.identifier];
         if (sendRequestRecord) { // False if we started instrumentation in the middle of request.
             record.data.url = sendRequestRecord.data.url;
             // Now that we have resource in the collection, recalculate details in order to display short url.
-            sendRequestRecord.details = this._getRecordDetails(sendRequestRecord, sendRequestRecords);
+            sendRequestRecord.details = this._getRecordDetails(sendRequestRecord, panel._sendRequestRecords);
+            if (sendRequestRecord.parent !== panel._rootRecord && sendRequestRecord.parent.type === recordTypes.ScheduleResourceRequest)
+                sendRequestRecord.parent.details = this._getRecordDetails(sendRequestRecord, panel._sendRequestRecords);
         }
     } else if (record.type === recordTypes.ResourceReceiveData) {
-        var sendRequestRecord = sendRequestRecords[record.data.identifier];
+        var sendRequestRecord = panel._sendRequestRecords[record.data.identifier];
         if (sendRequestRecord) // False for main resource.
             record.data.url = sendRequestRecord.data.url;
     } else if (record.type === recordTypes.ResourceFinish) {
-        var sendRequestRecord = sendRequestRecords[record.data.identifier];
+        var sendRequestRecord = panel._sendRequestRecords[record.data.identifier];
         if (sendRequestRecord) // False for main resource.
             record.data.url = sendRequestRecord.data.url;
     } else if (record.type === recordTypes.TimerInstall) {
         this.timeout = record.data.timeout;
         this.singleShot = record.data.singleShot;
-        timerRecords[record.data.timerId] = this;
+        panel._timerRecords[record.data.timerId] = this;
     } else if (record.type === recordTypes.TimerFire) {
-        var timerInstalledRecord = timerRecords[record.data.timerId];
+        var timerInstalledRecord = panel._timerRecords[record.data.timerId];
         if (timerInstalledRecord) {
             this.callSiteScriptName = timerInstalledRecord.callerScriptName;
             this.callSiteScriptLine = timerInstalledRecord.callerScriptLine;
@@ -844,7 +845,7 @@ WebInspector.TimelinePanel.FormattedRecord = function(record, parentRecord, reco
             this.singleShot = timerInstalledRecord.singleShot;
         }
     }
-    this.details = this._getRecordDetails(record, sendRequestRecords);
+    this.details = this._getRecordDetails(record, panel._sendRequestRecords);
 }
 
 WebInspector.TimelinePanel.FormattedRecord.prototype = {
@@ -907,6 +908,7 @@ WebInspector.TimelinePanel.FormattedRecord.prototype = {
             case recordTypes.FunctionCall:
                 contentHelper._appendLinkRow("Location", this.data.scriptName, this.data.scriptLine);
                 break;
+            case recordTypes.ScheduleResourceRequest:
             case recordTypes.ResourceSendRequest:
             case recordTypes.ResourceReceiveResponse:
             case recordTypes.ResourceReceiveData:
@@ -928,6 +930,8 @@ WebInspector.TimelinePanel.FormattedRecord.prototype = {
             case recordTypes.Paint:
                 contentHelper._appendTextRow("Location", this.data.x + "\u2009\u00d7\u2009" + this.data.y);
                 contentHelper._appendTextRow("Dimensions", this.data.width + "\u2009\u00d7\u2009" + this.data.height);
+            case recordTypes.RecalculateStyles: // We don't want to see default details.
+                break;
             default:
                 if (this.details)
                     contentHelper._appendTextRow("Details", this.details);
@@ -952,23 +956,24 @@ WebInspector.TimelinePanel.FormattedRecord.prototype = {
             case WebInspector.TimelineAgent.RecordType.GCEvent:
                 return WebInspector.UIString("%s collected", Number.bytesToString(record.data.usedHeapSizeDelta));
             case WebInspector.TimelineAgent.RecordType.TimerFire:
-                return record.data.scriptName ? WebInspector.linkifyResourceAsNode(record.data.scriptName, "scripts", record.data.scriptLine) : record.data.timerId;
+                return record.data.scriptName ? WebInspector.linkifyResourceAsNode(record.data.scriptName, "scripts", record.data.scriptLine, "", "") : record.data.timerId;
             case WebInspector.TimelineAgent.RecordType.FunctionCall:
-                return record.data.scriptName ? WebInspector.linkifyResourceAsNode(record.data.scriptName, "scripts", record.data.scriptLine) : null;
+                return record.data.scriptName ? WebInspector.linkifyResourceAsNode(record.data.scriptName, "scripts", record.data.scriptLine, "", "") : null;
             case WebInspector.TimelineAgent.RecordType.EventDispatch:
                 return record.data ? record.data.type : null;
             case WebInspector.TimelineAgent.RecordType.Paint:
                 return record.data.width + "\u2009\u00d7\u2009" + record.data.height;
             case WebInspector.TimelineAgent.RecordType.TimerInstall:
             case WebInspector.TimelineAgent.RecordType.TimerRemove:
-                return this.callerScriptName ? WebInspector.linkifyResourceAsNode(this.callerScriptName, "scripts", this.callerScriptLine) : record.data.timerId;
+                return this.callerScriptName ? WebInspector.linkifyResourceAsNode(this.callerScriptName, "scripts", this.callerScriptLine, "", "") : record.data.timerId;
             case WebInspector.TimelineAgent.RecordType.ParseHTML:
             case WebInspector.TimelineAgent.RecordType.RecalculateStyles:
-                return this.callerScriptName ? WebInspector.linkifyResourceAsNode(this.callerScriptName, "scripts", this.callerScriptLine) : null;
+                return this.callerScriptName ? WebInspector.linkifyResourceAsNode(this.callerScriptName, "scripts", this.callerScriptLine, "", "") : null;
             case WebInspector.TimelineAgent.RecordType.EvaluateScript:
-                return record.data.url ? WebInspector.linkifyResourceAsNode(record.data.url, "scripts", record.data.lineNumber) : null;
+                return record.data.url ? WebInspector.linkifyResourceAsNode(record.data.url, "scripts", record.data.lineNumber, "", "") : null;
             case WebInspector.TimelineAgent.RecordType.XHRReadyStateChange:
             case WebInspector.TimelineAgent.RecordType.XHRLoad:
+            case WebInspector.TimelineAgent.RecordType.ScheduleResourceRequest:
             case WebInspector.TimelineAgent.RecordType.ResourceSendRequest:
             case WebInspector.TimelineAgent.RecordType.ResourceReceiveData:
             case WebInspector.TimelineAgent.RecordType.ResourceReceiveResponse:
@@ -1048,3 +1053,43 @@ WebInspector.TimelinePanel.PopupContentHelper.prototype = {
         this._appendElementRow(title, link);
     }
 }
+
+WebInspector.TimelineExpandableElement = function(container)
+{
+    this._element = document.createElement("div");
+    this._element.className = "timeline-expandable";
+
+    var leftBorder = document.createElement("div");
+    leftBorder.className = "timeline-expandable-left";
+    this._element.appendChild(leftBorder);
+
+    container.appendChild(this._element);
+}
+
+WebInspector.TimelineExpandableElement.prototype = {
+    _update: function(record, index, barPosition)
+    {
+        const rowHeight = WebInspector.TimelinePanel.rowHeight;
+        if (record._visibleChildrenCount || record._invisibleChildrenCount) {
+            this._element.style.top = index * rowHeight + "px";
+            this._element.style.left = barPosition.left + "px";
+            this._element.style.width = Math.max(12, barPosition.width + 25) + "px";
+            if (!record.collapsed) {
+                this._element.style.height = (record._visibleChildrenCount + 1) * rowHeight + "px";
+                this._element.addStyleClass("timeline-expandable-expanded");
+                this._element.removeStyleClass("timeline-expandable-collapsed");
+            } else {
+                this._element.style.height = rowHeight + "px";
+                this._element.addStyleClass("timeline-expandable-collapsed");
+                this._element.removeStyleClass("timeline-expandable-expanded");
+            }
+            this._element.removeStyleClass("hidden");
+        } else
+            this._element.addStyleClass("hidden");
+    },
+
+    _dispose: function()
+    {
+        this._element.parentElement.removeChild(this._element);
+    }
+}
diff --git a/WebCore/inspector/front-end/WebKit.qrc b/WebCore/inspector/front-end/WebKit.qrc
index 47a2e90..0f8d1ac 100644
--- a/WebCore/inspector/front-end/WebKit.qrc
+++ b/WebCore/inspector/front-end/WebKit.qrc
@@ -32,6 +32,7 @@
     <file>ElementsTreeOutline.js</file>
     <file>EventListenersSidebarPane.js</file>
     <file>FontView.js</file>
+    <file>HelpScreen.js</file>
     <file>ImageView.js</file>
     <file>InjectedFakeWorker.js</file>
     <file>InjectedScript.js</file>
@@ -63,6 +64,7 @@
     <file>ScriptView.js</file>
     <file>Section.js</file>
     <file>Settings.js</file>
+    <file>ShortcutsHelp.js</file>
     <file>SidebarPane.js</file>
     <file>SidebarTreeElement.js</file>
     <file>SourceCSSTokenizer.js</file>
@@ -92,6 +94,7 @@
     <file>WelcomeView.js</file>
     <file>WorkersSidebarPane.js</file>
     <file>audits.css</file>
+    <file>helpScreen.css</file>
     <file>inspector.css</file>
     <file>inspectorSyntaxHighlight.css</file>
     <file>popover.css</file>
diff --git a/WebCore/inspector/front-end/WorkersSidebarPane.js b/WebCore/inspector/front-end/WorkersSidebarPane.js
index ed2b1c4..7d6a00f 100644
--- a/WebCore/inspector/front-end/WorkersSidebarPane.js
+++ b/WebCore/inspector/front-end/WorkersSidebarPane.js
@@ -36,13 +36,13 @@ WebInspector.WorkersSidebarPane = function()
 
     this._enableWorkersCheckbox = new WebInspector.Checkbox(
         WebInspector.UIString("Debug"),
-        this._onTriggerInstrument.bind(this),
-        false,
         "sidebar-pane-subtitle",
         WebInspector.UIString("Allow debugging workers. Enabling this option will replace native workers with the iframe-based JavaScript implementation"));
-
     this.titleElement.insertBefore(this._enableWorkersCheckbox.element, this.titleElement.firstChild);
 
+    this._enableWorkersCheckbox.addEventListener(this._onTriggerInstrument.bind(this));
+    this._enableWorkersCheckbox.checked = false;
+
     this._listElement = document.createElement("ol");
     this._listElement.className = "workers-list";
 
@@ -81,14 +81,14 @@ WebInspector.WorkersSidebarPane.prototype = {
     reset: function()
     {
         InspectorBackend.removeAllScriptsToEvaluateOnLoad();
-        this.setInstrumentation(this._enableWorkersCheckbox.checked());
+        this.setInstrumentation(this._enableWorkersCheckbox.checked);
         this._treeOutline.removeChildren();
         this._workers = {};
     },
 
     _onTriggerInstrument: function(event)
     {
-        this.setInstrumentation(this._enableWorkersCheckbox.checked());
+        this.setInstrumentation(this._enableWorkersCheckbox.checked);
     }
 };
 
diff --git a/WebCore/inspector/front-end/helpScreen.css b/WebCore/inspector/front-end/helpScreen.css
new file mode 100644
index 0000000..80a64c6
--- /dev/null
+++ b/WebCore/inspector/front-end/helpScreen.css
@@ -0,0 +1,153 @@
+.help-window-outer {
+    position: absolute;
+    top: 60px;
+    left: 5%;
+    width: 90%;
+    bottom: 40px;
+    z-index: 2000;
+}
+
+body.attached .help-window-outer {
+    top: 32px;
+    left: 0;
+    width: 100%;
+    bottom: 24px;
+}
+
+.help-window-main {
+    max-height: 100%;
+    opacity: 0.85;
+    color: white;
+    background-color: black;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    border: 20px black solid;
+    border-top-width: 0;
+    border-radius: 8px;
+    -webkit-box-shadow: 10px 10px 8px rgba(40, 40, 40, 0.40);
+}
+
+body.attached .help-window-main {
+    border-width: 10px;
+    border-radius: 0;
+    -webkit-box-shadow: 0 0 0;
+}
+
+.help-window-caption {
+    margin: 8px;
+}
+
+body.attached .help-window-caption {
+    display: none;
+}
+
+.help-window-title {
+    border-bottom: solid 1px lightGrey;
+    font-size: 18px;
+    padding-bottom: 6px;
+}
+
+.help-content {
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: 11px;
+    -webkit-box-flex: 1;
+}
+
+.help-content::-webkit-scrollbar {
+    width: 11px;
+}
+
+.help-content::-webkit-scrollbar-corner,
+.help-content::-webkit-resizer {
+    display: none;
+}
+
+.help-content::-webkit-scrollbar-thumb:vertical {
+    background: -webkit-gradient(linear, left top, right top, from(rgb(128, 128, 128)), to(rgb(128, 128, 128)), color-stop(40%, rgb(96, 96, 96)));
+    border-radius: 5px;
+    min-height: 20px;
+}
+
+.help-content::-webkit-scrollbar-thumb:vertical:hover,
+.help-content::-webkit-scrollbar-thumb:vertical:active {
+    background: -webkit-gradient(linear, left top, right top, from(rgb(176, 176, 176)), to(rgb(176, 176, 176)), color-stop(40%, rgb(144, 144, 144)));
+}
+
+.help-content::-webkit-scrollbar-track:vertical {
+    background: -webkit-gradient(linear, left top, right top, from(rgb(10, 10, 10)), to(rgb(32, 32, 32)), color-stop(25%, rgb(32, 32, 32)));
+    border-radius: 5px;
+}
+
+.help-close-button {
+    border: 0;
+    padding: 0;
+    margin: 0px -20px 15px -20px;
+    font-size: 14px;
+    color: rgb(222, 222, 222);
+    background: -webkit-gradient(radial, 30% 30%, 1, 50% 50%, 8, from(rgb(128, 128, 128)), to(rgb(80, 80, 80)));
+    border-radius: 8px;
+    height: 16px;
+    width: 16px;
+}
+
+.help-close-button:hover {
+    color: white;
+}
+
+body.platform-mac .help-close-button {
+    float: left;
+    margin-right: 10px;
+    font-size: 12px;
+}
+
+body:not(.platform-mac) .help-close-button {
+    float: right;
+}
+
+.help-table {
+    width: 100%;
+    font-size: 13px;
+    -webkit-user-select: auto;
+}
+
+.help-table th {
+    padding-top: 6px;
+    text-align: left;
+    color: yellow;
+}
+
+.help-table td {
+    white-space: nowrap;
+    vertical-align: top;
+}
+
+.help-key-cell {
+    text-align: right;
+}
+
+.help-key {
+    color: yellow;
+}
+
+body:not(.platform-mac) .help-key {
+    font-weight: bold;
+    text-shadow: black 1px 1px 7px;
+}
+
+body.platform-mac .help-key {
+    font-family: Lucida Grande, sans-serif;
+    font-size: 13px;
+}
+
+.help-combine-keys {
+    color: white;
+    font-weight: bold;
+    margin: 0 0.3em;
+    font-size: 12px;
+}
+
+.help-key-delimiter {
+    color: white;
+    margin: 0 0.5em;
+}
diff --git a/WebCore/inspector/front-end/inspector.css b/WebCore/inspector/front-end/inspector.css
index 199a3f3..8a78247 100644
--- a/WebCore/inspector/front-end/inspector.css
+++ b/WebCore/inspector/front-end/inspector.css
@@ -979,7 +979,7 @@ body.platform-linux .monospace, body.platform-linux .source-code {
     position: absolute;
     top: 0;
     left: 0;
-    right: 300px;
+    right: 325px;
     bottom: 0;
 }
 
@@ -988,7 +988,7 @@ body.platform-linux .monospace, body.platform-linux .source-code {
     top: 0;
     right: 0;
     bottom: 0;
-    width: 300px;
+    width: 325px;
     background-color: rgb(245, 245, 245);
     border-left: 1px solid rgb(64%, 64%, 64%);
     cursor: default;
@@ -1293,10 +1293,6 @@ body.inactive .placard.selected {
     -webkit-background-clip: padding;
 }
 
-.section.no-affect .header {
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(167, 167, 167)), to(rgb(123, 123, 123)))
-}
-
 .section .header::before {
     position: absolute;
     top: 4px;
@@ -1306,10 +1302,6 @@ body.inactive .placard.selected {
     content: url(Images/treeRightTriangleWhite.png);
 }
 
-.section.blank-section .header::before {
-    display: none;
-}
-
 .section.expanded .header::before {
     content: url(Images/treeDownTriangleWhite.png);
 }
@@ -1534,33 +1526,6 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
     text-overflow: clip;
 }
 
-.section .properties .overloaded, .section .properties .disabled {
-    text-decoration: line-through;
-}
-
-.section.computed-style .properties .disabled {
-    text-decoration: none;
-    opacity: 0.5;
-}
-
-.section .properties .implicit, .section .properties .inherited {
-    opacity: 0.5;
-}
-
-.section:not(.show-inherited) .properties .inherited {
-    display: none;
-}
-
-.section .properties .enabled-button {
-    display: none;
-    float: right;
-    font-size: 10px;
-    margin: 0 0 0 4px;
-    vertical-align: top;
-    position: relative;
-    z-index: 1;
-}
-
 /* FIXME: need a better icon (comment in bug 27514) */
 .section .properties .delete-button {
     width: 10px;
@@ -1572,14 +1537,6 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
     border: 0 none transparent;
 }
 
-.section:hover .properties .enabled-button {
-    display: block;
-}
-
-.section .properties li.disabled .enabled-button {
-    display: block;
-}
-
 .section .properties .name, .event-properties .name {
     color: rgb(136, 19, 145);
 }
@@ -1722,9 +1679,14 @@ li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-but
 
 .sidebar-pane-subtitle {
     float: right;
+    font-weight: normal;
     overflow: hidden;
 }
 
+body.platform-windows .sidebar-pane-subtitle {
+    padding-top: 1px;
+}
+
 .sidebar-pane-subtitle input, .section .header input[type=checkbox] {
     font-size: inherit;
     hight: 1em;
@@ -3992,6 +3954,7 @@ ol.breakpoint-list {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    font-size: 11px;
 }
 
 .styles-selector {
@@ -4018,6 +3981,146 @@ a.worker-item {
     cursor: pointer;
     text-decoration: none;
 }
+.styles-section {
+    padding: 2px 2px 4px 4px;
+    min-height: 18px;
+    white-space: nowrap;
+    -webkit-background-origin: padding;
+    -webkit-background-clip: padding;
+}
+
+.styles-section:not(.first-styles-section) {
+    border-top: 1px solid rgb(191, 191, 191);
+}
+
+.styles-section .header {
+    white-space: nowrap;
+    -webkit-background-origin: padding;
+    -webkit-background-clip: padding;
+}
+
+.styles-section .header .title {
+    word-wrap: break-word;
+    white-space: normal;
+}
+
+.styles-section .header .subtitle {
+    color: rgb(85, 85, 85);
+    float: right;
+    margin-left: 5px;
+    max-width: 65%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.styles-section .header .subtitle a {
+    color: inherit;
+}
+
+.styles-section .properties {
+    display: none;
+    margin: 0;
+    padding: 2px 4px 0 8px;
+    list-style: none;
+}
+
+.styles-section.no-affect .properties li {
+    opacity: 0.5;
+}
+
+.styles-section.no-affect .properties li.editing {
+    opacity: 1.0;
+}
+
+.styles-section.expanded .properties {
+    display: block;
+}
+
+.styles-section .properties li {
+    margin-left: 12px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    -webkit-user-select: text;
+    cursor: auto;
+}
+
+.styles-section .properties li.parent {
+    margin-left: 1px;
+}
+
+.styles-section .properties ol {
+    display: none;
+    margin: 0;
+    -webkit-padding-start: 12px;
+    list-style: none;
+}
+
+.styles-section .properties ol.expanded {
+    display: block;
+}
+
+.styles-section .properties li.parent::before {
+    content: url(Images/treeRightTriangleBlack.png);
+    opacity: 0.75;
+    float: left;
+    width: 8px;
+    height: 8px;
+    margin-top: 0;
+    padding-right: 3px;
+    -webkit-user-select: none;
+    cursor: default;
+}
+
+.styles-section .properties li.parent.expanded::before {
+    content: url(Images/treeDownTriangleBlack.png);
+    margin-top: 1px;
+}
+
+.styles-section .properties li .info {
+    padding-top: 4px;
+    padding-bottom: 3px;
+}
+
+.styles-section:hover .properties .enabled-button {
+    display: block;
+}
+
+.styles-section .properties li.disabled .enabled-button {
+    display: block;
+}
+
+.styles-section .properties .enabled-button {
+    display: none;
+    float: right;
+    font-size: 10px;
+    margin: 0 0 0 4px;
+    vertical-align: top;
+    position: relative;
+    z-index: 1;
+}
+
+.styles-section .properties .overloaded, .styles-section .properties .disabled {
+    text-decoration: line-through;
+}
+
+.styles-section.computed-style .properties .disabled {
+    text-decoration: none;
+    opacity: 0.5;
+}
+
+.styles-section .properties .implicit, .styles-section .properties .inherited {
+    opacity: 0.5;
+}
+
+
+.body .styles-section .properties .inherited {
+    display: none;
+}
+
+.body.show-inherited .styles-section .properties .inherited {
+    display: block;
+}
 
 a.worker-item:hover {
     color: rgb(15%, 15%, 15%);
diff --git a/WebCore/inspector/front-end/inspector.html b/WebCore/inspector/front-end/inspector.html
index 4fa8ddc..74bddaf 100644
--- a/WebCore/inspector/front-end/inspector.html
+++ b/WebCore/inspector/front-end/inspector.html
@@ -124,6 +124,8 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     <script type="text/javascript" src="TimelinePanel.js"></script>
     <script type="text/javascript" src="TimelineOverviewPane.js"></script>
     <script type="text/javascript" src="TestController.js"></script>
+    <script type="text/javascript" src="HelpScreen.js"></script>
+    <script type="text/javascript" src="ShortcutsHelp.js"></script>
 </head>
 <body class="detached">
     <div id="toolbar">
diff --git a/WebCore/inspector/front-end/inspector.js b/WebCore/inspector/front-end/inspector.js
index edd54bd..f6ae79d 100644
--- a/WebCore/inspector/front-end/inspector.js
+++ b/WebCore/inspector/front-end/inspector.js
@@ -441,6 +441,11 @@ WebInspector.loaded = function()
     document.body.addStyleClass("port-" + port);
 
     this.settings = new WebInspector.Settings();
+    this._registerShortcuts();
+
+    // set order of some sections explicitly
+    WebInspector.shortcutsHelp.section("Console");
+    WebInspector.shortcutsHelp.section("Elements Panel");
 
     this.drawer = new WebInspector.Drawer();
     this.console = new WebInspector.ConsoleView(this.drawer);
@@ -680,8 +685,35 @@ WebInspector.documentClick = function(event)
     followLink();
 }
 
+WebInspector._registerShortcuts = function()
+{
+    var shortcut = WebInspector.KeyboardShortcut;
+    var section = WebInspector.shortcutsHelp.section(WebInspector.UIString("All Panels"));
+    var keys = [
+        shortcut.shortcutToString("]", shortcut.Modifiers.CtrlOrMeta),
+        shortcut.shortcutToString("[", shortcut.Modifiers.CtrlOrMeta)
+    ];
+    section.addRelatedKeys(keys, WebInspector.UIString("Next/previous panel"));
+    section.addKey(shortcut.Keys.Esc.name, WebInspector.UIString("Toggle console"));
+    section.addKey(shortcut.shortcutToString("f", shortcut.Modifiers.CtrlOrMeta), WebInspector.UIString("Search"));
+    keys = [
+        shortcut.shortcutToString("g", shortcut.Modifiers.CtrlOrMeta),
+        shortcut.shortcutToString("g", shortcut.Modifiers.CtrlOrMeta | shortcut.Modifiers.Shift)
+    ];
+    section.addRelatedKeys(keys, WebInspector.UIString("Find next/previous"));
+}
+
 WebInspector.documentKeyDown = function(event)
 {
+    const helpKey = WebInspector.isMac() ? "U+003F" : "U+00BF"; // "?" for both platforms
+
+    if (event.keyIdentifier === "F1" ||
+        (event.keyIdentifier === helpKey && (!WebInspector.isEditingAnyField() || event.metaKey))) {
+            WebInspector.shortcutsHelp.show();
+            event.stopPropagation();
+            event.preventDefault();
+    }
+
     if (WebInspector.isEditingAnyField())
         return;
 
@@ -1645,7 +1677,10 @@ WebInspector.linkifyURLAsNode = function(url, linkText, classes, isExternal, too
     var a = document.createElement("a");
     a.href = url;
     a.className = classes;
-    a.title = tooltipText || url;
+    if (typeof tooltipText === "undefined")
+        a.title = url;
+    else if (typeof tooltipText !== "string" || tooltipText.length)
+        a.title = tooltipText;
     a.target = "_blank";
     a.textContent = linkText;
 
@@ -1701,7 +1736,7 @@ WebInspector._searchFieldManualFocus = function(event)
 WebInspector._searchKeyDown = function(event)
 {
     // Escape Key will clear the field and clear the search results
-    if (event.keyCode === WebInspector.KeyboardShortcut.KeyCodes.Esc) {
+    if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code) {
         // If focus belongs here and text is empty - nothing to do, return unhandled.
         if (event.target.value === "" && this.currentFocusElement === this.previousFocusElement)
             return;
@@ -1927,7 +1962,7 @@ WebInspector.startEditing = function(element, committedCallback, cancelledCallba
             editingCommitted.call(element);
             event.preventDefault();
             event.stopPropagation();
-        } else if (event.keyCode === WebInspector.KeyboardShortcut.KeyCodes.Esc) {
+        } else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code) {
             editingCancelled.call(element);
             event.preventDefault();
             event.stopPropagation();
diff --git a/WebCore/inspector/front-end/treeoutline.js b/WebCore/inspector/front-end/treeoutline.js
index 799d8af..7d58954 100644
--- a/WebCore/inspector/front-end/treeoutline.js
+++ b/WebCore/inspector/front-end/treeoutline.js
@@ -422,6 +422,11 @@ TreeOutline.prototype.reveal = function()
     // this is the root, do nothing
 }
 
+TreeOutline.prototype.select = function()
+{
+    // this is the root, do nothing
+}
+
 TreeOutline.prototype.appendChild = TreeOutline._appendChild;
 TreeOutline.prototype.insertChild = TreeOutline._insertChild;
 TreeOutline.prototype.removeChild = TreeOutline._removeChild;
diff --git a/WebCore/inspector/front-end/utilities.js b/WebCore/inspector/front-end/utilities.js
index 98f34b9..f87b53d 100644
--- a/WebCore/inspector/front-end/utilities.js
+++ b/WebCore/inspector/front-end/utilities.js
@@ -278,6 +278,15 @@ Element.prototype.isInsertionCaretInside = function()
     return selectionRange.startContainer === this || selectionRange.startContainer.isDescendant(this);
 }
 
+Element.prototype.createChild = function(elementName, className)
+{
+    var element = document.createElement(elementName);
+    if (className)
+        element.className = className;
+    this.appendChild(element);
+    return element;
+}
+
 Element.prototype.__defineGetter__("totalOffsetLeft", function()
 {
     var total = 0;