- Revision
- 221844
- Author
- [email protected]
- Date
- 2017-09-10 21:49:29 -0700 (Sun, 10 Sep 2017)
Log Message
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:
Modified Paths
Added Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (221843 => 221844)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-09-11 04:18:06 UTC (rev 221843)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-09-11 04:49:29 UTC (rev 221844)
@@ -1,3 +1,137 @@
+2017-09-10 Matt Baker <[email protected]>
+
+ 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 <[email protected]>
Uncaught Exception: TypeError: this._heapSnapshot.addEventListener is not a function.
Added: trunk/Source/WebInspectorUI/UserInterface/Images/Clip.svg (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Images/Clip.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/Clip.svg 2017-09-11 04:49:29 UTC (rev 221844)
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/Composite.svg (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Images/Composite.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/Composite.svg 2017-09-11 04:49:29 UTC (rev 221844)
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/Fill.svg (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Images/Fill.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/Fill.svg 2017-09-11 04:49:29 UTC (rev 221844)
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/LineStyle.svg (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Images/LineStyle.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/LineStyle.svg 2017-09-11 04:49:29 UTC (rev 221844)
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/Palette.svg (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Images/Palette.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/Palette.svg 2017-09-11 04:49:29 UTC (rev 221844)
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/PathArc.svg (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Images/PathArc.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/PathArc.svg 2017-09-11 04:49:29 UTC (rev 221844)
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/PathCurve.svg (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Images/PathCurve.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/PathCurve.svg 2017-09-11 04:49:29 UTC (rev 221844)
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/PathEllipse.svg (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Images/PathEllipse.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/PathEllipse.svg 2017-09-11 04:49:29 UTC (rev 221844)
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/PathLineTo.svg (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Images/PathLineTo.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/PathLineTo.svg 2017-09-11 04:49:29 UTC (rev 221844)
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/PathMoveTo.svg (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Images/PathMoveTo.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/PathMoveTo.svg 2017-09-11 04:49:29 UTC (rev 221844)
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/PathRect.svg (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Images/PathRect.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/PathRect.svg 2017-09-11 04:49:29 UTC (rev 221844)
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/Pixels.svg (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Images/Pixels.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/Pixels.svg 2017-09-11 04:49:29 UTC (rev 221844)
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/PointInPath.svg (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Images/PointInPath.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/PointInPath.svg 2017-09-11 04:49:29 UTC (rev 221844)
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/PointInStroke.svg (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Images/PointInStroke.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/PointInStroke.svg 2017-09-11 04:49:29 UTC (rev 221844)
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/Shadow.svg (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Images/Shadow.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/Shadow.svg 2017-09-11 04:49:29 UTC (rev 221844)
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/Stroke.svg (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Images/Stroke.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/Stroke.svg 2017-09-11 04:49:29 UTC (rev 221844)
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/Text.svg (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Images/Text.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/Text.svg 2017-09-11 04:49:29 UTC (rev 221844)
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/Transform.svg (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Images/Transform.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/Transform.svg 2017-09-11 04:49:29 UTC (rev 221844)
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<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>
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (221843 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2017-09-11 04:18:06 UTC (rev 221843)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2017-09-11 04:49:29 UTC (rev 221844)
@@ -140,6 +140,7 @@
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js (221843 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js 2017-09-11 04:18:06 UTC (rev 221843)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js 2017-09-11 04:49:29 UTC (rev 221844)
@@ -237,6 +237,11 @@
}
}
+ customTitleTooltip()
+ {
+ // Implemented by subclasses.
+ }
+
// Private
_createElementsIfNeeded()
@@ -313,17 +318,22 @@
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()
Added: trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css (0 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css 2017-09-11 04:49:29 UTC (rev 221844)
@@ -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);
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js (221843 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js 2017-09-11 04:18:06 UTC (rev 221843)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js 2017-09-11 04:49:29 UTC (rev 221844)
@@ -29,7 +29,8 @@
{
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,20 +43,107 @@
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");
@@ -62,93 +150,136 @@
if (!recordingAction.valid)
classNames.push("invalid");
- let titleFragment = document.createDocumentFragment();
+ return classNames;
+ }
- let nameContainer = titleFragment.appendChild(document.createElement("span"));
- nameContainer.classList.add("name");
- nameContainer.textContent = recordingAction.name;
+ static _classNameForAction(recordingAction)
+ {
+ function classNameForActionName(name) {
+ switch (name) {
+ case "arc":
+ case "arcTo":
+ return "arc";
- if (!recordingAction.isGetter && !isInitialState) {
- if (recordingAction.isFunction) {
- titleFragment.append("(");
- copyText += "(";
- } else {
- titleFragment.append(" = ");
- copyText = " = ";
- }
+ case "globalAlpha":
+ case "globalCompositeOperation":
+ case "setAlpha":
+ case "setGlobalAlpha":
+ case "setCompositeOperation":
+ case "setGlobalCompositeOperation":
+ return "composite";
- for (let i = 0; i < recordingAction.parameters.length; ++i) {
- let parameter = recordingAction.parameters[i];
- let swizzleType = recordingAction.swizzleTypes[i];
+ case "bezierCurveTo":
+ case "quadraticCurveTo":
+ return "curve";
- if (i) {
- titleFragment.append(", ");
- copyText += ", ";
- }
+ case "clearRect":
+ case "fill":
+ case "fillRect":
+ case "fillText":
+ return "fill";
- let parameterElement = titleFragment.appendChild(document.createElement("span"));
- parameterElement.classList.add("parameter");
+ 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";
- switch (swizzleType) {
- case WI.Recording.Swizzle.Number:
- parameterElement.textContent = parameter.maxDecimals(2);
- break;
+ 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 WI.Recording.Swizzle.Boolean:
- parameterElement.textContent = parameter;
- break;
+ case "closePath":
+ case "lineTo":
+ return "line-to";
- case WI.Recording.Swizzle.String:
- parameterElement.textContent = JSON.stringify(parameter);
- break;
+ case "beginPath":
+ case "moveTo":
+ return "move-to";
- case WI.Recording.Swizzle.Array:
- parameterElement.classList.add("swizzled");
- parameterElement.textContent = JSON.stringify(parameter);
- break;
+ case "isPointInPath":
+ return "point-in-path";
- 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;
- }
+ case "isPointInStroke":
+ return "point-in-stroke";
- if (!parameterElement.textContent) {
- parameterElement.classList.add("invalid");
- parameterElement.textContent = swizzleType === WI.Recording.Swizzle.None ? parameter : WI.Recording.displayNameForSwizzleType(swizzleType);
- }
+ case "clearShadow":
+ case "setShadow":
+ case "shadowBlur":
+ case "shadowColor":
+ case "shadowOffsetX":
+ case "shadowOffsetY":
+ return "shadow";
- copyText += parameterElement.textContent;
+ case "createLinearGradient":
+ case "createPattern":
+ case "createRadialGradient":
+ case "fillStyle":
+ case "setFillColor":
+ case "setStrokeColor":
+ case "strokeStyle":
+ return "style";
- if (!recordingAction.isFunction)
- break;
- }
+ case "stroke":
+ case "strokeRect":
+ case "strokeText":
+ return "stroke";
- if (recordingAction.isFunction) {
- titleFragment.append(")");
- copyText += ")";
+ 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;
}
- } else if (isInitialState)
- classNames.push("initial-state");
- return {
- classNames,
- copyText,
- titleFragment,
- };
+ console.warn("No class name for action " + name);
+ return "";
+ }
+
+ const name = recordingAction.name;
+ let className = WI.RecordingActionTreeElement._memoizedActionClassNames.get(name);
+ if (!className) {
+ className = classNameForActionName(name);
+ WI.RecordingActionTreeElement._memoizedActionClassNames.set(name, className);
+ }
+
+ return className;
}
// Public
@@ -174,6 +305,11 @@
// Protected
+ customTitleTooltip()
+ {
+ return this._copyText;
+ }
+
onattach()
{
super.onattach();
@@ -204,3 +340,5 @@
super.populateContextMenu(contextMenu, event);
}
};
+
+WI.RecordingActionTreeElement._memoizedActionClassNames = new Map;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.css (221843 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.css 2017-09-11 04:18:06 UTC (rev 221843)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.css 2017-09-11 04:49:29 UTC (rev 221844)
@@ -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;
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.js (221843 => 221844)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.js 2017-09-11 04:18:06 UTC (rev 221843)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.js 2017-09-11 04:49:29 UTC (rev 221844)
@@ -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
