Attachment 320415 Details for Bug 175451 – Patch

[patch] Patch

bug-175451-20170910201616.patch (text/plain), 49.35 KB, created by Matt Baker on 2017-09-10 20:16:17 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Matt Baker

Created: 2017-09-10 20:16:17 PDT

Size: 49.35 KB

patch

obsolete

>Subversion Revision: 221842
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index eba7b8a219d55774d950d8a1830e6e274758a13d..fa3f4cbf4c10860895d39cde3bf203a061973ba9 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,137 @@
>+2017-09-10  Matt Baker  <mattbaker@apple.com>
>+
>+        Web Inspector: change style of RecordingNavigationSidebarPanel
>+        https://bugs.webkit.org/show_bug.cgi?id=175451
>+        <rdar://problem/34040769>
>+
>+        Reviewed by Devin Rousso.
>+
>+        This patch adds UI polish to the Canvas recording navigation sidebar:
>+         - New icons for Canvas2D operations
>+         - Removed extraneous colors: zebra striping, frame element background color
>+         - Visual action color changed to match details sidebar "changed" color
>+         - Make tree item indent a convenient multiple of the base indent
>+         - Move RecordingActionTreeElement styles to a separate file
>+
>+        * UserInterface/Images/Clip.svg: Added.
>+        * UserInterface/Images/Composite.svg: Added.
>+        * UserInterface/Images/Fill.svg: Added.
>+        * UserInterface/Images/LineStyle.svg: Added.
>+        * UserInterface/Images/Palette.svg: Added.
>+        * UserInterface/Images/PathArc.svg: Added.
>+        * UserInterface/Images/PathCurve.svg: Added.
>+        * UserInterface/Images/PathEllipse.svg: Added.
>+        * UserInterface/Images/PathLineTo.svg: Added.
>+        * UserInterface/Images/PathMoveTo.svg: Added.
>+        * UserInterface/Images/PathRect.svg: Added.
>+        * UserInterface/Images/Pixels.svg: Added.
>+        * UserInterface/Images/PointInPath.svg: Added.
>+        * UserInterface/Images/PointInStroke.svg: Added.
>+        * UserInterface/Images/Shadow.svg: Added.
>+        * UserInterface/Images/Stroke.svg: Added.
>+        * UserInterface/Images/Text.svg: Added.
>+        * UserInterface/Images/Transform.svg: Added.
>+        New icons for Canvas2D operations.
>+
>+        * UserInterface/Main.html:
>+        New file.
>+
>+        * UserInterface/Views/GeneralTreeElement.js:
>+        (WI.GeneralTreeElement.prototype.customTitleTooltip):
>+        (WI.GeneralTreeElement.prototype._updateTitleTooltip):
>+        Allow derived classes to supply a custom tooltip, when
>+        simply getting the title element text is insufficient.
>+
>+        * UserInterface/Views/RecordingActionTreeElement.css: Added.
>+        (.item.action.initial-state > .icon):
>+        (.tree-outline:not(:focus, .force-focus) .item.action:not(.initial-state, .parent, .invalid) > .icon):
>+        (.item.action:not(.initial-state)::before):
>+        (body[dir=ltr] .item.action::before):
>+        (body[dir=rtl] .item.action::before):
>+        (.tree-outline:matches(:focus, .force-focus) .item.action.selected:not(.initial-state, .invalid) > .icon):
>+        (body:not(.window-inactive, .window-docked-inactive) :matches(:focus, .force-focus) .item.action.selected > .titles .parameter.swizzled,):
>+        (.tree-outline[data-indent="1"] .item.action::before,):
>+        (.tree-outline[data-indent="3"] .item.action::before):
>+        (.tree-outline[data-indent="4"] .item.action::before):
>+        (.tree-outline[data-indent="5"] .item.action::before):
>+        (.tree-outline[data-indent="6"] .item.action::before):
>+        (.tree-outline[data-indent="7"] .item.action::before):
>+        (body[dir=ltr] .tree-outline:not(.hide-disclosure-buttons) .item.action:not(.initial-state, .parent) > .icon):
>+        (body[dir=rtl] .tree-outline:not(.hide-disclosure-buttons) .item.action:not(.initial-state, .parent) > .icon):
>+        (.item.action.visual:not(.selected, .invalid)):
>+        (.item.action.attribute > .titles .parameters::before):
>+        (.item.action:not(.attribute) > .titles .parameters::before):
>+        (.item.action:not(.attribute) > .titles .parameters::after):
>+        (.item.action > .titles .parameter:not(:last-child)::after):
>+        (.item.action:not(.selected) > .titles .parameter.swizzled):
>+        (.item.action.composite > .icon):
>+        (.item.action.fill > .icon):
>+        (.item.action.image > .icon):
>+        (.item.action.line-style > .icon):
>+        (.item.action.shadow > .icon):
>+        (.item.action.stroke > .icon):
>+        (.item.action.style > .icon):
>+        (.item.action.text > .icon):
>+        (.item.action.transform > .icon):
>+        (.item.action.arc > .icon):
>+        (.item.action.clip > .icon):
>+        (.item.action.curve > .icon):
>+        (.item.action.ellipse > .icon):
>+        (.item.action.line-to > .icon):
>+        (.item.action.move-to > .icon):
>+        (.item.action.point-in-path > .icon):
>+        (.item.action.point-in-stroke > .icon):
>+        (.item.action.rect > .icon):
>+        (.item.action.restore > .icon):
>+        (.item.action.save > .icon):
>+        (.item.action.invalid > .icon):
>+
>+        * UserInterface/Views/RecordingActionTreeElement.js:
>+        (WI.RecordingActionTreeElement):
>+        (WI.RecordingActionTreeElement._generateDOM.createParameterElement):
>+        (WI.RecordingActionTreeElement._generateDOM):
>+        (WI.RecordingActionTreeElement._getClassNames):
>+        Broke out into its own helper, to simplify _generateDOM which had
>+        too many responsibilities.
>+
>+        (WI.RecordingActionTreeElement._classNameForAction.classNameForActionName):
>+        (WI.RecordingActionTreeElement._classNameForAction):
>+        Get an icon for the action "type". Actions are grouped by similar
>+        operations. For example, lineCap, lineDash, lineJoin, lineWidth, and
>+        miterLimit are assigned the icon LineStyle.svg.
>+
>+        (WI.RecordingActionTreeElement.prototype.customTitleTooltip):
>+
>+        * UserInterface/Views/RecordingNavigationSidebarPanel.css:
>+        (.sidebar > .panel.navigation.recording > .content > .tree-outline .item.folder-icon > .icon):
>+        (.sidebar > .panel.navigation.recording > .content > .tree-outline:not(:empty)): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content > .tree-outline > .item.parent:not(.action, .selected).expanded): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content > .tree-outline .item.action:not(.initial-state)::before): Deleted.
>+        (body[dir=ltr] .sidebar > .panel.navigation.recording > .content > .tree-outline .item.action:not(.initial-state)::before): Deleted.
>+        (body[dir=rtl] .sidebar > .panel.navigation.recording > .content > .tree-outline .item.action:not(.initial-state)::before): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="2"] .item.action:not(.initial-state)::before): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="3"] .item.action:not(.initial-state)::before): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="4"] .item.action:not(.initial-state)::before): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="5"] .item.action:not(.initial-state)::before): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="6"] .item.action:not(.initial-state)::before): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="7"] .item.action:not(.initial-state)::before): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content .action > .icon): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content .action.function > .icon): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content .action.attribute.getter > .icon): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content .tree-outline:matches(:focus, .force-focus) .action.attribute.getter.selected > .icon): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content .action.attribute.boolean > .icon): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content .action.attribute.number > .icon): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content .action.attribute.object > .icon): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content .action.attribute.string > .icon): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content > .tree-outline > .item.parent:not(.action) > .icon): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content .action:matches(.invalid, .missing) > .icon): Deleted.
>+        (body[dir=ltr] .sidebar > .panel.navigation.recording > .content .action:not(.initial-state) > .icon): Deleted.
>+        (body[dir=rtl] .sidebar > .panel.navigation.recording > .content .action:not(.initial-state) > .icon): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content .action.visual:not(.selected, .invalid)): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content .action:not(.selected, .initial-state) > .titles .parameter.swizzled): Deleted.
>+        (.sidebar > .panel.navigation.recording > .content .action.invalid:not(.selected, .initial-state) > .titles :matches(.name, .parameter.invalid)): Deleted.
>+        * UserInterface/Views/RecordingNavigationSidebarPanel.js:
>+
> 2017-09-08  Joseph Pecoraro  <pecoraro@apple.com>
> 
>         Uncaught Exception: TypeError: this._heapSnapshot.addEventListener is not a function.
>diff --git a/Source/WebInspectorUI/UserInterface/Images/Clip.svg b/Source/WebInspectorUI/UserInterface/Images/Clip.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..f2a6b5310d7c418214787c4dc75c3a91f8020384
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/Clip.svg
>@@ -0,0 +1,8 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <circle cx="3.606" cy="11.224" r="1.606" fill="none" stroke="currentColor"/>
>+    <path d="M 14 4.6 l -9.734 5.62 L 3.73 9.3 l 8.807 -5.085 A 1.074 1.074 0 0 1 14 4.6 Z"/>
>+    <circle cx="3.606" cy="4.606" r="1.606" fill="none" stroke="currentColor"/>
>+    <path d="M 14 11.225 4.266 5.6 l -0.535 0.927 8.807 5.085 A 1.074 1.074 0 0 0 14 11.225 Z"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/Composite.svg b/Source/WebInspectorUI/UserInterface/Images/Composite.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..1dab31ce940053d0825b71eb748563928dde1164
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/Composite.svg
>@@ -0,0 +1,6 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <polygon points="8 11.333 3.25 8.167 2 9 8 13 14 9 12.75 8.167 8 11.333"/>
>+    <polygon points="8 2 2 6 8 10 14 6 8 2"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/Fill.svg b/Source/WebInspectorUI/UserInterface/Images/Fill.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..518494091848fdeca8e826cb9b0c8524912ab9d6
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/Fill.svg
>@@ -0,0 +1,7 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <path d="M 15 13.5 A 1.39 1.39 0 0 1 13.5 15 1.39 1.39 0 0 1 12 13.5 c 0 -1.12 1.5 -3.5 1.5 -3.5 S 15 12.38 15 13.5 Z"/>
>+    <polygon points="7.226 2.796 7.226 4.211 11.54 8.524 10.43 8.786 6.166 13.049 2.277 9.16 4.73 6.707 4.73 5.292 0.863 9.16 6.166 14.464 10.932 9.698 13.52 9.09 7.226 2.796"/>
>+    <path d="M 5.979 7.459 a.5.5 0 0 1 -0.5 -0.5 V 2.046 a 0.5 0.5 0 0 1 1 0 V 6.959 A 0.5 0.5 0 0 1 5.979 7.459 Z"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/LineStyle.svg b/Source/WebInspectorUI/UserInterface/Images/LineStyle.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..ef0adaaafeb8e580a9df920d4ebdecd4277dc3a9
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/LineStyle.svg
>@@ -0,0 +1,7 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <rect x="2" y="3" width="12" height="1"/>
>+    <rect x="2" y="6" width="12" height="2"/>
>+    <rect x="2" y="10" width="12" height="3"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/Palette.svg b/Source/WebInspectorUI/UserInterface/Images/Palette.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..923745fc02996313cd7dcbdf0ba1fd5622354c4c
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/Palette.svg
>@@ -0,0 +1,5 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <path d="M 8.8 2.062 A 6.152 6.152 0 0 0 2.07 7.117 a 5.961 5.961 0 0 0 3.261 6.3 c 1.194.619 4.476 1.266 3.386 -1.021 -0.688 -1.443 0.745 -1.661 1.829 -1.756 a 3.387 3.387 0 0 0 3.226 -2.128 C 14.9 5.318 11.605 2.5 8.8 2.062 Z m -4.5 6.106 A 1.083 1.083 0 1 1 5.375 7.085 1.083 1.083 0 0 1 4.292 8.168 Z m 2.076 -2.73 A 1.083 1.083 0 1 1 7.451 4.355 1.083 1.083 0 0 1 6.368 5.438 Z m 3.362 0 a 1.083 1.083 0 1 1 1.083 -1.083 A 1.083 1.083 0 0 1 9.73 5.438 Z m 2.076 2.73 a 1.083 1.083 0 1 1 1.083 -1.083 A 1.083 1.083 0 0 1 11.806 8.168 Z"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/PathArc.svg b/Source/WebInspectorUI/UserInterface/Images/PathArc.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..97230ec6655d6bed2b89edd3fe2008d10f91f0d3
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/PathArc.svg
>@@ -0,0 +1,5 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <path fill="none" stroke="currentColor" d="M3 14 A 11 11 0 0 1 14 3"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/PathCurve.svg b/Source/WebInspectorUI/UserInterface/Images/PathCurve.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..32db0ca52baa7b6dbc67348f8bf97b92336b2d5d
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/PathCurve.svg
>@@ -0,0 +1,5 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <path d="M 2.5 14 S 2.484 8 8 8 c 5.5 0 5.5 -6 5.5 -6" fill="none" stroke="currentColor"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/PathEllipse.svg b/Source/WebInspectorUI/UserInterface/Images/PathEllipse.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..f1284586ac92d58b8876fc0af02d043f121199ad
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/PathEllipse.svg
>@@ -0,0 +1,5 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <circle cx="8" cy="8" r="5.5" fill="none" stroke="currentColor"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/PathLineTo.svg b/Source/WebInspectorUI/UserInterface/Images/PathLineTo.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..e5c0852c1f907e0a2a256d90f41e46e723004f23
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/PathLineTo.svg
>@@ -0,0 +1,5 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <line x1="2" y1="8" x2="14" y2="8" fill="none" stroke="currentColor"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/PathMoveTo.svg b/Source/WebInspectorUI/UserInterface/Images/PathMoveTo.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..be22ddb4fc54f2521584102dcda8edf38877ea2b
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/PathMoveTo.svg
>@@ -0,0 +1,5 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <path d="M 2 8 H 13 m -2.5 3.031 3 -3 L 10.437 4.969" fill="none" stroke="currentColor"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/PathRect.svg b/Source/WebInspectorUI/UserInterface/Images/PathRect.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..ee7acfbec986be46e5153a2bfbad40beaa0fde1f
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/PathRect.svg
>@@ -0,0 +1,5 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <rect x="2.5" y="2.5" width="11" height="11" fill="none" stroke="currentColor"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/Pixels.svg b/Source/WebInspectorUI/UserInterface/Images/Pixels.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..429bb4def8e0d6ca821b95bbefe95ac80e2531d7
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/Pixels.svg
>@@ -0,0 +1,9 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <rect x="2.5" y="2.5" width="10" height="10" rx="1" ry="1" fill="none" stroke="currentColor"/>
>+    <rect x="6" y="3" width="3" height="3" opacity="0.5"/>
>+    <rect x="3" y="6" width="3" height="3" opacity="0.5"/>
>+    <rect x="6" y="9" width="3" height="3" opacity="0.5"/>
>+    <rect x="9" y="6" width="3" height="3" opacity="0.5"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/PointInPath.svg b/Source/WebInspectorUI/UserInterface/Images/PointInPath.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..ddf9d2b4dd4fd3ca051ead04d6615910123feeea
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/PointInPath.svg
>@@ -0,0 +1,6 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <rect x="2.5" y="2.5" width="10" height="10" fill="none" stroke="currentColor"/>
>+    <rect x="6" y="6" width="3" height="3"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/PointInStroke.svg b/Source/WebInspectorUI/UserInterface/Images/PointInStroke.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..fe67843093ab3e359e8fd16f4078f30cd2980ae4
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/PointInStroke.svg
>@@ -0,0 +1,6 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <rect x="2.5" y="2.5" width="10" height="10" fill="none" stroke="currentColor"/>
>+    <rect x="11" y="6" width="3" height="3"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/Shadow.svg b/Source/WebInspectorUI/UserInterface/Images/Shadow.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..4ab07c5514299ccce286f4bb9998222650f451fd
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/Shadow.svg
>@@ -0,0 +1,5 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <path d="M 5 3 V 5 H 3 v 8 h 8 V 11 h 2 V 3 Z m 7 7 H 6 V 4 h 6 Z"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/Stroke.svg b/Source/WebInspectorUI/UserInterface/Images/Stroke.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..947da9215f90af3f90a84c9583377ec42bfcb690
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/Stroke.svg
>@@ -0,0 +1,6 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <polygon points="14 14 7 14 8 13 14 13 14 14"/>
>+    <path d="M 10.5 2.5 l 3 3 -8 8 h -3 v -3 Z M 8.854 4.854 l 2.293 2.293" fill="none" stroke="currentColor"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/Text.svg b/Source/WebInspectorUI/UserInterface/Images/Text.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..da4a008c14a7023d4572efe9cf55d495429164b6
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/Text.svg
>@@ -0,0 +1,5 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <polygon points="2 2 14 2 14 5 12 5 12 4 9 4 9 12 11 12 11 14 5 14 5 12 7 12 7 4 4 4 4 5 2 5 2 2"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Images/Transform.svg b/Source/WebInspectorUI/UserInterface/Images/Transform.svg
>new file mode 100644
>index 0000000000000000000000000000000000000000..2732cb8b6724d3e5e0a312f3558852331b8bf7e9
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Images/Transform.svg
>@@ -0,0 +1,5 @@
>+<?xml version="1.0" encoding="utf-8"?>
>+
>+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
>+    <polygon points="14.062 12.5 13.08 10.201 12.705 10.85 8.75 8.567 8.75 4 9.5 4 8 2 6.5 4 7.25 4 7.25 8.567 3.295 10.85 2.92 10.201 1.938 12.5 4.42 12.799 4.045 12.149 8 9.866 11.955 12.149 11.58 12.799 14.062 12.5"/>
>+</svg>
>diff --git a/Source/WebInspectorUI/UserInterface/Main.html b/Source/WebInspectorUI/UserInterface/Main.html
>index 4d3f796d58cd3c93e4a8620339ec79c7e57e90c1..5c4871a9e7736abe1fca70111dbabbb73600d17d 100644
>--- a/Source/WebInspectorUI/UserInterface/Main.html
>+++ b/Source/WebInspectorUI/UserInterface/Main.html
>@@ -140,6 +140,7 @@
>     <link rel="stylesheet" href="Views/ProfileView.css">
>     <link rel="stylesheet" href="Views/QuickConsole.css">
>     <link rel="stylesheet" href="Views/RadioButtonNavigationItem.css">
>+    <link rel="stylesheet" href="Views/RecordingActionTreeElement.css">
>     <link rel="stylesheet" href="Views/RecordingContentView.css">
>     <link rel="stylesheet" href="Views/RecordingStateDetailsSidebarPanel.css">
>     <link rel="stylesheet" href="Views/RecordingTraceDetailsSidebarPanel.css">
>diff --git a/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js
>index d08e12556044e6e29b20f9f8b14607e6d552f0fc..06d3eeec0f93c7f74eefbc3fa843da80b6a37e7a 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js
>@@ -237,6 +237,11 @@ WI.GeneralTreeElement = class GeneralTreeElement extends WI.TreeElement
>         }
>     }
> 
>+    customTitleTooltip()
>+    {
>+        // Implemented by subclasses.
>+    }
>+
>     // Private
> 
>     _createElementsIfNeeded()
>@@ -313,17 +318,22 @@ WI.GeneralTreeElement = class GeneralTreeElement extends WI.TreeElement
>         if (!this._listItemNode)
>             return;
> 
>-        // Get the textContent for the elements since they can contain other nodes,
>-        // and the tool tip only cares about the text.
>-        let mainTitleText = this._mainTitleElement.textContent;
>-        let subtitleText = this._subtitleElement ? this._subtitleElement.textContent : "";
>-        let large = this.treeOutline && this.treeOutline.large;
>-        if (mainTitleText && subtitleText)
>-            this._listItemNode.title = mainTitleText + (large ? "\n" : " \u2014 ") + subtitleText;
>-        else if (mainTitleText)
>-            this._listItemNode.title = mainTitleText;
>-        else
>-            this._listItemNode.title = subtitleText;
>+        let tooltip = this.customTitleTooltip();
>+        if (!tooltip) {
>+            // Get the textContent for the elements since they can contain other nodes,
>+            // and the tool tip only cares about the text.
>+            let mainTitleText = this._mainTitleElement.textContent;
>+            let subtitleText = this._subtitleElement ? this._subtitleElement.textContent : "";
>+            let large = this.treeOutline && this.treeOutline.large;
>+            if (mainTitleText && subtitleText)
>+                tooltip = mainTitleText + (large ? "\n" : " \u2014 ") + subtitleText;
>+            else if (mainTitleText)
>+                tooltip = mainTitleText;
>+            else
>+                tooltip = subtitleText;
>+        }
>+
>+        this._listItemNode.title = tooltip;
>     }
> 
>     _updateStatusElement()
>diff --git a/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css
>new file mode 100644
>index 0000000000000000000000000000000000000000..91209d8197afeb051fd2211f0ee9c29b02f4d79c
>--- /dev/null
>+++ b/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css
>@@ -0,0 +1,211 @@
>+/*
>+ * Copyright (C) 2017 Apple Inc. All rights reserved.
>+ *
>+ * Redistribution and use in source and binary forms, with or without
>+ * modification, are permitted provided that the following conditions
>+ * are met:
>+ * 1. Redistributions of source code must retain the above copyright
>+ *    notice, this list of conditions and the following disclaimer.
>+ * 2. Redistributions in binary form must reproduce the above copyright
>+ *    notice, this list of conditions and the following disclaimer in the
>+ *    documentation and/or other materials provided with the distribution.
>+ *
>+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
>+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
>+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
>+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
>+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
>+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
>+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
>+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
>+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
>+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
>+ * THE POSSIBILITY OF SUCH DAMAGE.
>+ */
>+
>+.item.action.initial-state > .icon {
>+    content: url("../Images/Source.svg");
>+}
>+
>+.tree-outline:not(:focus, .force-focus) .item.action:not(.initial-state, .parent, .invalid) > .icon {
>+    opacity: 0.7;
>+}
>+
>+.item.action:not(.initial-state)::before {
>+    position: relative;
>+    top: 3px;
>+    content: attr(data-index);
>+    font-family: -apple-system, sans-serif;
>+    font-size: 9px;
>+    color: var(--text-color-gray-medium);
>+    font-variant-numeric: tabular-nums;
>+    text-align: end;
>+
>+    --data-indent: calc(var(--tree-outline-icon-margin-start) - var(--tree-outline-icon-margin-end));
>+}
>+
>+body[dir=ltr] .item.action::before {
>+    float: left;
>+    margin-right: var(--tree-outline-icon-margin-end);
>+    margin-left: 0;
>+}
>+
>+body[dir=rtl] .item.action::before {
>+    float: right;
>+    margin-right: 0;
>+    margin-left: var(--tree-outline-icon-margin-end);
>+}
>+
>+.tree-outline:matches(:focus, .force-focus) .item.action.selected:not(.initial-state, .invalid) > .icon {
>+    filter: invert();
>+    opacity: 1;
>+}
>+
>+body:not(.window-inactive, .window-docked-inactive) :matches(:focus, .force-focus) .item.action.selected > .titles .parameter.swizzled,
>+body:not(.window-inactive, .window-docked-inactive) :matches(:focus, .force-focus) .item.action.selected::before {
>+    color: var(--selected-secondary-text-color);
>+}
>+
>+.tree-outline[data-indent="1"] .item.action::before,
>+.tree-outline[data-indent="2"] .item.action::before {
>+    min-width: var(--data-indent);
>+}
>+
>+.tree-outline[data-indent="3"] .item.action::before {
>+    min-width: calc(var(--data-indent) * 1.5);
>+}
>+
>+.tree-outline[data-indent="4"] .item.action::before {
>+    min-width: calc(var(--data-indent) * 2);
>+}
>+
>+.tree-outline[data-indent="5"] .item.action::before {
>+    min-width: calc(var(--data-indent) * 2.5);
>+}
>+
>+.tree-outline[data-indent="6"] .item.action::before {
>+    min-width: calc(var(--data-indent) * 3);
>+}
>+
>+.tree-outline[data-indent="7"] .item.action::before {
>+    min-width: calc(var(--data-indent) * 3.5);
>+}
>+
>+body[dir=ltr] .tree-outline:not(.hide-disclosure-buttons) .item.action:not(.initial-state, .parent) > .icon {
>+    margin-left: 0;
>+}
>+
>+body[dir=rtl] .tree-outline:not(.hide-disclosure-buttons) .item.action:not(.initial-state, .parent) > .icon {
>+    margin-right: 0;
>+}
>+
>+.item.action.visual:not(.selected, .invalid) {
>+    background-color: var(--value-changed-highlight);
>+}
>+
>+.item.action.attribute > .titles .parameters::before {
>+    content: " = ";
>+}
>+
>+.item.action:not(.attribute) > .titles .parameters::before {
>+    content: "(";
>+}
>+
>+.item.action:not(.attribute) > .titles .parameters::after {
>+    content: ")";
>+}
>+
>+.item.action > .titles .parameter:not(:last-child)::after {
>+    content: ", ";
>+}
>+
>+.item.action:not(.selected) > .titles .parameter.swizzled {
>+    color: var(--text-color-gray-medium);
>+}
>+
>+.item.action.composite > .icon {
>+    content: url(../Images/Composite.svg);
>+}
>+
>+.item.action.fill > .icon {
>+    content: url(../Images/Fill.svg);
>+}
>+
>+.item.action.image > .icon {
>+    content: url(../Images/Pixels.svg);
>+}
>+
>+.item.action.line-style > .icon {
>+    content: url(../Images/LineStyle.svg);
>+}
>+
>+.item.action.shadow > .icon {
>+    content: url(../Images/Shadow.svg);
>+}
>+
>+.item.action.stroke > .icon {
>+    content: url(../Images/Stroke.svg);
>+}
>+
>+.item.action.style > .icon {
>+    content: url(../Images/Palette.svg);
>+}
>+
>+.item.action.text > .icon {
>+    content: url(../Images/Text.svg);
>+}
>+
>+.item.action.transform > .icon {
>+    content: url(../Images/Transform.svg);
>+}
>+
>+.item.action.arc > .icon {
>+    content: url(../Images/PathArc.svg);
>+}
>+
>+.item.action.clip > .icon {
>+    content: url(../Images/Clip.svg);
>+}
>+
>+.item.action.curve > .icon {
>+    content: url(../Images/PathCurve.svg);
>+}
>+
>+.item.action.ellipse > .icon {
>+    content: url(../Images/PathEllipse.svg);
>+}
>+
>+.item.action.line-to > .icon {
>+    content: url(../Images/PathLineTo.svg);
>+}
>+
>+.item.action.move-to > .icon {
>+    content: url(../Images/PathMoveTo.svg);
>+}
>+
>+.item.action.point-in-path > .icon {
>+    content: url(../Images/PointInPath.svg);
>+}
>+
>+.item.action.point-in-stroke > .icon {
>+    content: url(../Images/PointInStroke.svg);
>+}
>+
>+.item.action.rect > .icon {
>+    content: url(../Images/PathRect.svg);
>+}
>+
>+.item.action.restore > .icon {
>+    content: url(../Images/StepOut.svg);
>+}
>+
>+.item.action.save > .icon {
>+    content: url(../Images/StepInto.svg);
>+}
>+
>+.item.action.invalid > .icon {
>+    top: 2px;
>+    width: 16px;
>+    height: 12px;
>+    content: url(../Images/Error.svg);
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js
>index 5873818d225a886fb0d66e29bbdb8a8007ec058a..c72df153bbab4926c5be1d3927f42e40628e4d8b 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js
>@@ -29,7 +29,8 @@ WI.RecordingActionTreeElement = class RecordingActionTreeElement extends WI.Gene
>     {
>         console.assert(representedObject instanceof WI.RecordingAction);
> 
>-        let {classNames, copyText, titleFragment} = WI.RecordingActionTreeElement._generateDOM(representedObject, recordingType);
>+        let {titleFragment, copyText} = WI.RecordingActionTreeElement._generateDOM(representedObject, recordingType);
>+        let classNames = WI.RecordingActionTreeElement._getClassNames(representedObject);
> 
>         const subtitle = null;
>         super(classNames, titleFragment, subtitle, representedObject);
>@@ -42,113 +43,243 @@ WI.RecordingActionTreeElement = class RecordingActionTreeElement extends WI.Gene
> 
>     static _generateDOM(recordingAction, recordingType)
>     {
>-        let classNames = ["action"];
>+        function createParameterElement(parameter, swizzleType) {
>+            let parameterElement = document.createElement("span");
>+            parameterElement.classList.add("parameter");
>+
>+            switch (swizzleType) {
>+            case WI.Recording.Swizzle.Number:
>+                parameterElement.textContent = parameter.maxDecimals(2);
>+                break;
>+
>+            case WI.Recording.Swizzle.Boolean:
>+                parameterElement.textContent = parameter;
>+                break;
>+
>+            case WI.Recording.Swizzle.String:
>+                parameterElement.textContent = JSON.stringify(parameter);
>+                break;
>+
>+            case WI.Recording.Swizzle.Array:
>+                parameterElement.classList.add("swizzled");
>+                parameterElement.textContent = JSON.stringify(parameter);
>+                break;
>+
>+            case WI.Recording.Swizzle.TypedArray:
>+            case WI.Recording.Swizzle.Image:
>+            case WI.Recording.Swizzle.ImageData:
>+            case WI.Recording.Swizzle.DOMMatrix:
>+            case WI.Recording.Swizzle.Path2D:
>+            case WI.Recording.Swizzle.CanvasGradient:
>+            case WI.Recording.Swizzle.CanvasPattern:
>+            case WI.Recording.Swizzle.WebGLBuffer:
>+            case WI.Recording.Swizzle.WebGLFramebuffer:
>+            case WI.Recording.Swizzle.WebGLRenderbuffer:
>+            case WI.Recording.Swizzle.WebGLTexture:
>+            case WI.Recording.Swizzle.WebGLShader:
>+            case WI.Recording.Swizzle.WebGLProgram:
>+            case WI.Recording.Swizzle.WebGLUniformLocation:
>+                parameterElement.classList.add("swizzled");
>+                parameterElement.textContent = WI.Recording.displayNameForSwizzleType(swizzleType);
>+                break;
>+            }
>+
>+            if (!parameterElement.textContent) {
>+                parameterElement.classList.add("invalid");
>+                parameterElement.textContent = swizzleType === WI.Recording.Swizzle.None ? parameter : WI.Recording.displayNameForSwizzleType(swizzleType);
>+            }
>+
>+            return parameterElement;
>+        }
>+
>+        let titleFragment = document.createDocumentFragment();
>         let copyText = recordingAction.name;
> 
>-        let isInitialState = recordingAction instanceof WI.RecordingInitialStateAction;
>+        let nameContainer = titleFragment.appendChild(document.createElement("span"));
>+        nameContainer.classList.add("name");
>+        nameContainer.textContent = recordingAction.name;
>+
>+        if (!recordingAction.parameters.length)
>+            return {titleFragment, copyText};
>+
>+        let parametersContainer = titleFragment.appendChild(document.createElement("span"));
>+        parametersContainer.classList.add("parameters");
>+
>         if (recordingAction.isFunction)
>-            classNames.push("function");
>-        else if (!isInitialState) {
>-            classNames.push("attribute");
>-            if (recordingAction.isGetter)
>-                classNames.push("getter");
>-            else
>-                classNames.push(typeof recordingAction.parameters[0]);
>+            copyText += "(";
>+        else
>+            copyText += " = ";
>+
>+        for (let i = 0; i < recordingAction.parameters.length; ++i) {
>+            let parameter = recordingAction.parameters[i];
>+            let swizzleType = recordingAction.swizzleTypes[i];
>+            let parameterElement = createParameterElement(parameter, swizzleType);
>+            parametersContainer.appendChild(parameterElement);
>+
>+            if (i)
>+                copyText += ", ";
>+
>+            copyText += parameterElement.textContent;
>         }
> 
>+        if (recordingAction.isFunction)
>+            copyText += ")";
>+
>+        return {titleFragment, copyText};
>+    }
>+
>+    static _getClassNames(recordingAction)
>+    {
>+        let classNames = ["action"];
>+
>+        if (recordingAction instanceof WI.RecordingInitialStateAction) {
>+            classNames.push("initial-state");
>+            return classNames;
>+        }
>+
>+        if (!recordingAction.isFunction)
>+            classNames.push("attribute");
>+
>+        let actionClassName = WI.RecordingActionTreeElement._classNameForAction(recordingAction);
>+        if (actionClassName.length)
>+            classNames.push(actionClassName);
>+
>         if (recordingAction.isVisual)
>             classNames.push("visual");
> 
>         if (!recordingAction.valid)
>             classNames.push("invalid");
> 
>-        let titleFragment = document.createDocumentFragment();
>-
>-        let nameContainer = titleFragment.appendChild(document.createElement("span"));
>-        nameContainer.classList.add("name");
>-        nameContainer.textContent = recordingAction.name;
>+        return classNames;
>+    }
> 
>-        if (!recordingAction.isGetter && !isInitialState) {
>-            if (recordingAction.isFunction) {
>-                titleFragment.append("(");
>-                copyText += "(";
>-            } else {
>-                titleFragment.append(" = ");
>-                copyText = " = ";
>+    static _classNameForAction(recordingAction)
>+    {
>+        function classNameForActionName(name) {
>+            switch (name) {
>+            case "arc":
>+            case "arcTo":
>+                return "arc";
>+
>+            case "globalAlpha":
>+            case "globalCompositeOperation":
>+            case "setAlpha":
>+            case "setGlobalAlpha":
>+            case "setCompositeOperation":
>+            case "setGlobalCompositeOperation":
>+                return "composite";
>+
>+            case "bezierCurveTo":
>+            case "quadraticCurveTo":
>+                return "curve";
>+
>+            case "clearRect":
>+            case "fill":
>+            case "fillRect":
>+            case "fillText":
>+                return "fill";
>+
>+            case "createImageData":
>+            case "drawFocusIfNeeded":
>+            case "drawImage":
>+            case "drawImageFromRect":
>+            case "filter":
>+            case "getImageData":
>+            case "imageSmoothingEnabled":
>+            case "imageSmoothingQuality":
>+            case "putImageData":
>+            case "webkitGetImageDataHD":
>+            case "webkitPutImageDataHD":
>+            case "webkitImageSmoothingEnabled":
>+                return "image";
>+
>+            case "getLineDash":
>+            case "lineCap":
>+            case "lineDashOffset":
>+            case "lineJoin":
>+            case "lineWidth":
>+            case "miterLimit":
>+            case "setLineCap":
>+            case "setLineDash":
>+            case "setLineJoin":
>+            case "setLineWidth":
>+            case "setMiterLimit":
>+            case "webkitLineDash":
>+            case "webkitLineDashOffset":
>+                return "line-style";
>+
>+            case "closePath":
>+            case "lineTo":
>+                return "line-to";
>+
>+            case "beginPath":
>+            case "moveTo":
>+                return "move-to";
>+
>+            case "isPointInPath":
>+                return "point-in-path";
>+
>+            case "isPointInStroke":
>+                return "point-in-stroke";
>+
>+            case "clearShadow":
>+            case "setShadow":
>+            case "shadowBlur":
>+            case "shadowColor":
>+            case "shadowOffsetX":
>+            case "shadowOffsetY":
>+                return "shadow";
>+
>+            case "createLinearGradient":
>+            case "createPattern":
>+            case "createRadialGradient":
>+            case "fillStyle":
>+            case "setFillColor":
>+            case "setStrokeColor":
>+            case "strokeStyle":
>+                return "style";
>+
>+            case "stroke":
>+            case "strokeRect":
>+            case "strokeText":
>+                return "stroke";
>+
>+            case "direction":
>+            case "font":
>+            case "measureText":
>+            case "textAlign":
>+            case "textBaseline":
>+                return "text";
>+
>+            case "getTransform":
>+            case "resetTransform":
>+            case "rotate":
>+            case "scale":
>+            case "setTransform":
>+            case "transform":
>+            case "translate":
>+                return "transform";
>+
>+            case "clip":
>+            case "ellipse":
>+            case "rect":
>+            case "restore":
>+            case "save":
>+                return name;
>             }
> 
>-            for (let i = 0; i < recordingAction.parameters.length; ++i) {
>-                let parameter = recordingAction.parameters[i];
>-                let swizzleType = recordingAction.swizzleTypes[i];
>-
>-                if (i) {
>-                    titleFragment.append(", ");
>-                    copyText += ", ";
>-                }
>-
>-                let parameterElement = titleFragment.appendChild(document.createElement("span"));
>-                parameterElement.classList.add("parameter");
>-
>-                switch (swizzleType) {
>-                case WI.Recording.Swizzle.Number:
>-                    parameterElement.textContent = parameter.maxDecimals(2);
>-                    break;
>-
>-                case WI.Recording.Swizzle.Boolean:
>-                    parameterElement.textContent = parameter;
>-                    break;
>-
>-                case WI.Recording.Swizzle.String:
>-                    parameterElement.textContent = JSON.stringify(parameter);
>-                    break;
>-
>-                case WI.Recording.Swizzle.Array:
>-                    parameterElement.classList.add("swizzled");
>-                    parameterElement.textContent = JSON.stringify(parameter);
>-                    break;
>-
>-                case WI.Recording.Swizzle.TypedArray:
>-                case WI.Recording.Swizzle.Image:
>-                case WI.Recording.Swizzle.ImageData:
>-                case WI.Recording.Swizzle.DOMMatrix:
>-                case WI.Recording.Swizzle.Path2D:
>-                case WI.Recording.Swizzle.CanvasGradient:
>-                case WI.Recording.Swizzle.CanvasPattern:
>-                case WI.Recording.Swizzle.WebGLBuffer:
>-                case WI.Recording.Swizzle.WebGLFramebuffer:
>-                case WI.Recording.Swizzle.WebGLRenderbuffer:
>-                case WI.Recording.Swizzle.WebGLTexture:
>-                case WI.Recording.Swizzle.WebGLShader:
>-                case WI.Recording.Swizzle.WebGLProgram:
>-                case WI.Recording.Swizzle.WebGLUniformLocation:
>-                    parameterElement.classList.add("swizzled");
>-                    parameterElement.textContent = WI.Recording.displayNameForSwizzleType(swizzleType);
>-                    break;
>-                }
>-
>-                if (!parameterElement.textContent) {
>-                    parameterElement.classList.add("invalid");
>-                    parameterElement.textContent = swizzleType === WI.Recording.Swizzle.None ? parameter : WI.Recording.displayNameForSwizzleType(swizzleType);
>-                }
>-
>-                copyText += parameterElement.textContent;
>-
>-                if (!recordingAction.isFunction)
>-                    break;
>-            }
>+            console.warn("No class name for action " + name);
>+            return "";
>+        }
> 
>-            if (recordingAction.isFunction) {
>-                titleFragment.append(")");
>-                copyText += ")";
>-            }
>-        } else if (isInitialState)
>-            classNames.push("initial-state");
>+        const name = recordingAction.name;
>+        let className = WI.RecordingActionTreeElement._memoizedActionClassNames.get(name);
>+        if (!className) {
>+            className = classNameForActionName(name);
>+            WI.RecordingActionTreeElement._memoizedActionClassNames.set(name, className);
>+        }
> 
>-        return {
>-            classNames,
>-            copyText,
>-            titleFragment,
>-        };
>+        return className;
>     }
> 
>     // Public
>@@ -174,6 +305,11 @@ WI.RecordingActionTreeElement = class RecordingActionTreeElement extends WI.Gene
> 
>     // Protected
> 
>+    customTitleTooltip()
>+    {
>+        return this._copyText;
>+    }
>+
>     onattach()
>     {
>         super.onattach();
>@@ -204,3 +340,5 @@ WI.RecordingActionTreeElement = class RecordingActionTreeElement extends WI.Gene
>         super.populateContextMenu(contextMenu, event);
>     }
> };
>+
>+WI.RecordingActionTreeElement._memoizedActionClassNames = new Map;
>diff --git a/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.css
>index 7d2140d13ee8d7e12e8c94c2e08991e30ba96eb8..dfa7b8c6e2f75a37ea98b66a95ec91c0c252d2dd 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.css
>@@ -30,115 +30,6 @@
> .sidebar > .panel.navigation.recording > .content > .tree-outline {
>     min-height: 100%;
> }
>-
>-.sidebar > .panel.navigation.recording > .content > .tree-outline:not(:empty) {
>-    background: var(--transparent-stripe-background-gradient);
>-}
>-
>-.sidebar > .panel.navigation.recording > .content > .tree-outline > .item.parent:not(.action, .selected).expanded {
>-    background-color: white;
>-}
>-
>-.sidebar > .panel.navigation.recording > .content > .tree-outline .item.action:not(.initial-state)::before {
>-    position: relative;
>-    top: 3px;
>-    content: attr(data-index);
>-    font-family: Menlo, monospace;
>-    text-align: end;
>-}
>-
>-body[dir=ltr] .sidebar > .panel.navigation.recording > .content > .tree-outline .item.action:not(.initial-state)::before {
>-    float: left;
>-    margin-right: var(--tree-outline-icon-margin-end);
>-    margin-left: 0;
>-}
>-
>-body[dir=rtl] .sidebar > .panel.navigation.recording > .content > .tree-outline .item.action:not(.initial-state)::before {
>-    float: right;
>-    margin-right: 0;
>-    margin-left: var(--tree-outline-icon-margin-end);
>-}
>-
>-.sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="2"] .item.action:not(.initial-state)::before {
>-    min-width: 1.2em;
>-}
>-
>-.sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="3"] .item.action:not(.initial-state)::before {
>-    min-width: 1.9em;
>-}
>-
>-.sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="4"] .item.action:not(.initial-state)::before {
>-    min-width: 3.1em;
>-}
>-
>-.sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="5"] .item.action:not(.initial-state)::before {
>-    min-width: 3.7em;
>-}
>-
>-.sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="6"] .item.action:not(.initial-state)::before {
>-    min-width: 4.2em;
>-}
>-
>-.sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="7"] .item.action:not(.initial-state)::before {
>-    min-width: 5.4em;
>-}
>-
>-.sidebar > .panel.navigation.recording > .content .action > .icon {
>-    content: url("../Images/Source.svg");
>-}
>-
>-.sidebar > .panel.navigation.recording > .content .action.function > .icon {
>-    content: url(../Images/Function.svg);
>-}
>-
>-.sidebar > .panel.navigation.recording > .content .action.attribute.getter > .icon {
>-    content: url(../Images/Eye.svg);
>-}
>-
>-.sidebar > .panel.navigation.recording > .content .tree-outline:matches(:focus, .force-focus) .action.attribute.getter.selected > .icon {
>-    filter: invert();
>-}
>-
>-.sidebar > .panel.navigation.recording > .content .action.attribute.boolean > .icon {
>-    content: url(../Images/TypeBoolean.svg);
>-}
>-
>-.sidebar > .panel.navigation.recording > .content .action.attribute.number > .icon {
>-    content: url(../Images/TypeNumber.svg);
>-}
>-
>-.sidebar > .panel.navigation.recording > .content .action.attribute.object > .icon {
>-    content: url(../Images/TypeObject.svg);
>-}
>-
>-.sidebar > .panel.navigation.recording > .content .action.attribute.string > .icon {
>-    content: url(../Images/TypeString.svg);
>-}
>-
>-.sidebar > .panel.navigation.recording > .content > .tree-outline > .item.parent:not(.action) > .icon {
>+.sidebar > .panel.navigation.recording > .content > .tree-outline .item.folder-icon > .icon {
>     content: url(../Images/RenderingFrame.svg);
> }
>-
>-.sidebar > .panel.navigation.recording > .content .action:matches(.invalid, .missing) > .icon {
>-    filter: grayscale();
>-}
>-
>-body[dir=ltr] .sidebar > .panel.navigation.recording > .content .action:not(.initial-state) > .icon {
>-    margin-left: 0;
>-}
>-
>-body[dir=rtl] .sidebar > .panel.navigation.recording > .content .action:not(.initial-state) > .icon {
>-    margin-right: 0;
>-}
>-
>-.sidebar > .panel.navigation.recording > .content .action.visual:not(.selected, .invalid) {
>-    background-color: var(--value-visual-highlight);
>-}
>-
>-.sidebar > .panel.navigation.recording > .content .action:not(.selected, .initial-state) > .titles .parameter.swizzled {
>-    color: grey;
>-}
>-
>-.sidebar > .panel.navigation.recording > .content .action.invalid:not(.selected, .initial-state) > .titles :matches(.name, .parameter.invalid) {
>-    color: red;
>-}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.js
>index 5576f2f8838ab5f1f95ab2e0b7f913df039ddeef..1d43d351a3d3a5adb540c2bd223863d036996988 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.js
>@@ -1,5 +1,5 @@
> /*
>- * Copyright (C) 2015 Apple Inc. All rights reserved.
>+ * Copyright (C) 2017 Apple Inc. All rights reserved.
>  *
>  * Redistribution and use in source and binary forms, with or without
>  * modification, are permitted provided that the following conditions

Actions: View | Formatted Diff | Diff

Attachments on bug 175451: 319624 | 319633 | 320166 | 320167 | 320168 | 320172 | 320176 | 320213 | 320214 | 320216 | 320239 | 320240 | 320241 | 320243 | 320302 | 320304 | 320305 | 320320 | 320324 | 320415