Source/WebInspectorUI/ChangeLog

 12017-09-07 Matt Baker <mattbaker@apple.com>
 2
 3 Web Inspector: change style of RecordingNavigationSidebarPanel
 4 https://bugs.webkit.org/show_bug.cgi?id=175451
 5 <rdar://problem/34040769>
 6
 7 Reviewed by NOBODY (OOPS!).
 8
 9 THis patch adds UI polish to the Canvas recording navigation sidebar,
 10 including:
 11 - New icons for Canvas2D operations.
 12 - Removed extraneous colors: zebra striping, frame element background color.
 13 - Visual action color changed to match details sidebar "changed" color.
 14
 15 * UserInterface/Images/Clip.svg: Added.
 16 * UserInterface/Images/Composite.svg: Added.
 17 * UserInterface/Images/Fill.svg: Added.
 18 * UserInterface/Images/LineStyle.svg: Added.
 19 * UserInterface/Images/Palette.svg: Added.
 20 * UserInterface/Images/PathArc.svg: Added.
 21 * UserInterface/Images/PathCurve.svg: Added.
 22 * UserInterface/Images/PathEllipse.svg: Added.
 23 * UserInterface/Images/PathLineTo.svg: Added.
 24 * UserInterface/Images/PathMoveTo.svg: Added.
 25 * UserInterface/Images/PathRect.svg: Added.
 26 * UserInterface/Images/Pixels.svg: Added.
 27 * UserInterface/Images/PointInPath.svg: Added.
 28 * UserInterface/Images/Shadow.svg: Added.
 29 * UserInterface/Images/Stroke.svg: Added.
 30 * UserInterface/Images/Text.svg: Added.
 31 * UserInterface/Images/Transform.svg: Added.
 32 New icons for Canvas2D operations.
 33
 34 * UserInterface/Main.html:
 35 New file.
 36
 37 * UserInterface/Models/RecordingAction.js:
 38 (WI.RecordingAction.classNameForAction.classNameForActionName):
 39 (WI.RecordingAction.classNameForAction):
 40 Get an icon for the action "type". Actions are grouped by similar
 41 operations. For example, lineCap, lineDash, lineJoin, lineWidth, and
 42 miterLimit are assigned the icon LineStyle.svg.
 43
 44 * UserInterface/Views/GeneralTreeElement.js:
 45 (WI.GeneralTreeElement.prototype.customTitleTooltip):
 46 (WI.GeneralTreeElement.prototype._updateTitleTooltip):
 47 Allow derived classes to supply a custom tooltip, when
 48 simply getting the title element text is insufficient.
 49
 50 * UserInterface/Views/RecordingActionTreeElement.css: Added.
 51 Move RecordingActionTreeElement styles to a separate file.
 52 (.item.action.initial-state > .icon):
 53 (.item.action.invalid > .icon):
 54 (.item.action:not(.initial-state, .parent, .invalid) > .icon):
 55 (.item.action:not(.initial-state)::before):
 56 (body[dir=ltr] .item.action::before):
 57 (body[dir=rtl] .item.action::before):
 58 (:matches(:focus, .force-focus) .item.action.selected:not(.initial-state) > .icon):
 59 (body:not(.window-inactive, .window-docked-inactive) :matches(:focus, .force-focus) .item.action.selected > .titles .parameter.swizzled,):
 60 (.tree-outline[data-indent="1"] .item.action::before,):
 61 (.tree-outline[data-indent="3"] .item.action::before):
 62 (.tree-outline[data-indent="4"] .item.action::before):
 63 (.tree-outline[data-indent="5"] .item.action::before):
 64 (.tree-outline[data-indent="6"] .item.action::before):
 65 (.tree-outline[data-indent="7"] .item.action::before):
 66 Make indents a convenient multiple of the base indent.
 67 (body[dir=ltr] .tree-outline:not(.hide-disclosure-buttons) .item.action:not(.initial-state, .parent) > .icon):
 68 (body[dir=rtl] .tree-outline:not(.hide-disclosure-buttons) .item.action:not(.initial-state, .parent) > .icon):
 69 (.item.action.visual:not(.selected, .invalid)):
 70 (.item.action.attribute > .titles .parameters::before):
 71 (.item.action:not(.attribute) > .titles .parameters::before):
 72 (.item.action:not(.attribute) > .titles .parameters::after):
 73 (.item.action > .titles .parameter:not(:last-child)::after):
 74 (.item.action:not(.selected) > .titles .parameter .inline-swatch):
 75 (.item.action:not(.selected) > .titles .parameter.swizzled):
 76 (.item.action.invalid:not(.selected) > .titles :matches(.name, .parameter.invalid)):
 77 (.item.action.composite > .icon):
 78 (.item.action.fill > .icon):
 79 (.item.action.hit-region > .icon):
 80 (.item.action.image > .icon):
 81 (.item.action.line-style > .icon):
 82 (.item.action.shadow > .icon):
 83 (.item.action.stroke > .icon):
 84 (.item.action.style > .icon):
 85 (.item.action.text > .icon):
 86 (.item.action.transform > .icon):
 87 (.item.action.arc > .icon):
 88 (.item.action.curve > .icon):
 89 (.item.action.ellipse > .icon):
 90 (.item.action.line-to > .icon):
 91 (.item.action.move-to > .icon):
 92 (.item.action.point-in-path > .icon):
 93 (.item.action.rect > .icon):
 94 (.item.action.restore > .icon):
 95 (.item.action.save > .icon):
 96
 97 * UserInterface/Views/RecordingActionTreeElement.js:
 98 (WI.RecordingActionTreeElement):
 99 (WI.RecordingActionTreeElement._generateDOM.createParameterElement):
 100 (WI.RecordingActionTreeElement._generateDOM):
 101 (WI.RecordingActionTreeElement._getClassNames):
 102 Broke out into its own helper, to simplify _generateDOM which had
 103 too many responsibilities.
 104 (WI.RecordingActionTreeElement.prototype.customTitleTooltip):
 105
 106 * UserInterface/Views/RecordingNavigationSidebarPanel.css:
 107 (.sidebar > .panel.navigation.recording > .content > .tree-outline .item.folder-icon > .icon):
 108 (.sidebar > .panel.navigation.recording > .content > .tree-outline:not(:empty)): Deleted.
 109 (.sidebar > .panel.navigation.recording > .content > .tree-outline > .item.parent:not(.action, .selected).expanded): Deleted.
 110 (.sidebar > .panel.navigation.recording > .content > .tree-outline .item.action:not(.initial-state)::before): Deleted.
 111 (body[dir=ltr] .sidebar > .panel.navigation.recording > .content > .tree-outline .item.action:not(.initial-state)::before): Deleted.
 112 (body[dir=rtl] .sidebar > .panel.navigation.recording > .content > .tree-outline .item.action:not(.initial-state)::before): Deleted.
 113 (.sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="2"] .item.action:not(.initial-state)::before): Deleted.
 114 (.sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="3"] .item.action:not(.initial-state)::before): Deleted.
 115 (.sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="4"] .item.action:not(.initial-state)::before): Deleted.
 116 (.sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="5"] .item.action:not(.initial-state)::before): Deleted.
 117 (.sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="6"] .item.action:not(.initial-state)::before): Deleted.
 118 (.sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="7"] .item.action:not(.initial-state)::before): Deleted.
 119 (.sidebar > .panel.navigation.recording > .content .action > .icon): Deleted.
 120 (.sidebar > .panel.navigation.recording > .content .action.function > .icon): Deleted.
 121 (.sidebar > .panel.navigation.recording > .content .action.attribute.getter > .icon): Deleted.
 122 (.sidebar > .panel.navigation.recording > .content .tree-outline:matches(:focus, .force-focus) .action.attribute.getter.selected > .icon): Deleted.
 123 (.sidebar > .panel.navigation.recording > .content .action.attribute.boolean > .icon): Deleted.
 124 (.sidebar > .panel.navigation.recording > .content .action.attribute.number > .icon): Deleted.
 125 (.sidebar > .panel.navigation.recording > .content .action.attribute.object > .icon): Deleted.
 126 (.sidebar > .panel.navigation.recording > .content .action.attribute.string > .icon): Deleted.
 127 (.sidebar > .panel.navigation.recording > .content > .tree-outline > .item.parent:not(.action) > .icon): Deleted.
 128 (.sidebar > .panel.navigation.recording > .content .action:matches(.invalid, .missing) > .icon): Deleted.
 129 (body[dir=ltr] .sidebar > .panel.navigation.recording > .content .action:not(.initial-state) > .icon): Deleted.
 130 (body[dir=rtl] .sidebar > .panel.navigation.recording > .content .action:not(.initial-state) > .icon): Deleted.
 131 (.sidebar > .panel.navigation.recording > .content .action.visual:not(.selected, .invalid)): Deleted.
 132 (.sidebar > .panel.navigation.recording > .content .action:not(.selected, .initial-state) > .titles .parameter.swizzled): Deleted.
 133 (.sidebar > .panel.navigation.recording > .content .action.invalid:not(.selected, .initial-state) > .titles :matches(.name, .parameter.invalid)): Deleted.
 134 * UserInterface/Views/RecordingNavigationSidebarPanel.js:
 135
11362017-09-06 Matt Baker <mattbaker@apple.com>
2137
3138 Web Inspector: Relax the maximum sidebar width

Source/WebInspectorUI/UserInterface/Images/Clip.svg

 1<?xml version="1.0" encoding="utf-8"?>
 2<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
 3<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
 4 <circle fill="none" stroke="currentColor" cx="3.61" cy="11.22" r="1.61"/>
 5 <path fill="currentColor" stroke="none" d="M 14 4.6 4.27 10.23 3.73 9.3 l 8.81 -5.08 A 1.07 1.07 0 0 1 14 4.6 Z"/>
 6 <circle fill="none" stroke="currentColor" cx="3.61" cy="4.61" r="1.61"/>
 7 <path fill="currentColor" stroke="none" d="M 14 11.23 4.27 5.6 l -0.54 0.93 8.81 5.08 A 1.07 1.07 0 0 0 14 11.23 Z"/>
 8</svg>

Source/WebInspectorUI/UserInterface/Images/Composite.svg

 1<?xml version="1.0" encoding="utf-8"?>
 2<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
 3<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
 4 <polygon points="8 12.33 3.25 9.17 2 10 8 14 14 10 12.75 9.17 8 12.33"/>
 5 <polygon points="8 3 2 7 8 11 14 7 8 3"/>
 6</svg>

Source/WebInspectorUI/UserInterface/Images/Fill.svg

 1<?xml version="1.0" encoding="utf-8"?>
 2<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
 3<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
 4 <path fill="currentColor" stroke="none" 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"/>
 5 <polygon fill="currentColor" stroke="none" points="7.23 2.8 7.23 4.21 11.54 8.52 10.43 8.79 6.17 13.05 2.28 9.16 4.73 6.71 4.73 5.29 0.86 9.16 6.17 14.46 10.93 9.7 13.52 9.09 7.23 2.8"/>
 6 <path fill="currentColor" stroke="none" d="M 6 7.46 a 0.5 0.5 0 0 1 -0.5 -0.5 V 2 a 0.5 0.5 0 0 1 1 0 V 7 A 0.5 0.5 0 0 1 6 7.46 Z"/>
 7</svg>

Source/WebInspectorUI/UserInterface/Images/LineStyle.svg

 1<?xml version="1.0" encoding="utf-8"?>
 2<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
 3<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
 4 <rect x="2" y="10" width="12" height="3"/><rect x="2" y="6" width="12" height="2"/>
 5 <rect x="2" y="3" width="12" height="1"/>
 6</svg>

Source/WebInspectorUI/UserInterface/Images/Palette.svg

 1<?xml version="1.0" encoding="utf-8"?>
 2<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
 3<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
 4 <path d="M 8.8 2.06 A 6.15 6.15 0 0 0 2.07 7.12 a 6 6 0 0 0 3.26 6.3 c 1.19 0.62 4.48 1.27 3.39 -1 C 8 11 9.46 10.73 10.55 10.64 a 3.39 3.39 0 0 0 3.23 -2.13 C 14.9 5.32 11.61 2.5 8.8 2.06 Z M 4.29 8.17 A 1.08 1.08 0 1 1 5.38 7.09 1.08 1.08 0 0 1 4.29 8.17 Z M 6.37 5.44 A 1.08 1.08 0 1 1 7.45 4.36 1.08 1.08 0 0 1 6.37 5.44Z m 3.36 0 a 1.08 1.08 0 1 1 1.08 -1.08 A 1.08 1.08 0 0 1 9.73 5.44 Z m 2.08 2.73 a 1.08 1.08 0 1 1 1.08 -1.08 A 1.08 1.08 0 0 1 11.81 8.17 Z"/>
 5</svg>

Source/WebInspectorUI/UserInterface/Images/PathArc.svg

 1<?xml version="1.0" encoding="utf-8"?>
 2<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
 3<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
 4 <path fill="none" stroke="currentColor" d="M3 14 A 11 11 0 0 1 14 3"/>
 5</svg>

Source/WebInspectorUI/UserInterface/Images/PathCurve.svg

 1<?xml version="1.0" encoding="utf-8"?>
 2<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
 3<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
 4 <path fill="none" stroke="currentColor" d="M 2.5 14 s 0 -6 5.5 -6 5.5 -6 5.5 -6"/>
 5</svg>

Source/WebInspectorUI/UserInterface/Images/PathEllipse.svg

 1<?xml version="1.0" encoding="utf-8"?>
 2<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
 3<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
 4 <circle fill="none" stroke="currentColor" cx="8" cy="8" r="5.5"/>
 5</svg>

Source/WebInspectorUI/UserInterface/Images/PathLineTo.svg

 1<?xml version="1.0" encoding="utf-8"?>
 2<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
 3<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
 4 <line fill="none" stroke="currentColor" x1="2" y1="8" x2="13.5" y2="8"/>
 5</svg>

Source/WebInspectorUI/UserInterface/Images/PathMoveTo.svg

 1<?xml version="1.0" encoding="utf-8"?>
 2<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
 3<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
 4 <line fill="none" stroke="currentColor" x1="2" y1="8" x2="13.5" y2="8"/>
 5 <polyline fill="none" stroke="currentColor" points="10.44 4.97 13.5 8.03 10.5 11.03"/>
 6</svg>

Source/WebInspectorUI/UserInterface/Images/PathRect.svg

 1<?xml version="1.0" encoding="utf-8"?>
 2<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
 3<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
 4 <rect fill="none" stroke="currentColor" x="2.5" y="2.5" width="11" height="11"/>
 5</svg>

Source/WebInspectorUI/UserInterface/Images/Pixels.svg

 1<?xml version="1.0" encoding="utf-8"?>
 2<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
 3<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
 4 <rect fill="none" stroke="currentColor" x="2.5" y="2.5" width="11" height="11" rx="1" ry="1"/>
 5 <rect fill="currentColor" stroke="none" x="6" y="3" width="4" height="3"/>
 6 <rect fill="currentColor" stroke="none" x="6" y="10" width="4" height="3"/>
 7 <rect fill="currentColor" stroke="none" x="10" y="6" width="3" height="4"/>
 8 <rect fill="currentColor" stroke="none" x="3" y="6" width="3" height="4"/>
 9</svg>

Source/WebInspectorUI/UserInterface/Images/PointInPath.svg

 1<?xml version="1.0" encoding="utf-8"?>
 2<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
 3<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
 4 <rect fill="none" stroke="currentColor" x="2.5" y="2.5" width="11" height="11"/>
 5 <rect fill="currentColor" stroke="none" x="7" y="7" width="2" height="2"/>
 6</svg>

Source/WebInspectorUI/UserInterface/Images/Shadow.svg

 1<?xml version="1.0" encoding="utf-8"?>
 2<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
 3<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
 4 <path fill="currentColor" stroke="none" d="M 4 2 V 4 H 2 V 14 H 12 V 12 h 2 V 2 Z m 9 9 H 5 V 3 h 8 Z"/>
 5</svg>

Source/WebInspectorUI/UserInterface/Images/Stroke.svg

 1<?xml version="1.0" encoding="utf-8"?>
 2<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
 3<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
 4 <path fill="none" stroke="currentColor" d="M 9.5 3.5 l 3 3 -7 7 h -3 v -3 Z M 7.85 5.85 l 2.29 2.29"/>
 5 <polygon fill="currentColor" stroke="none" points="14 14 7 14 8 13 14 13 14 14"/>
 6</svg>

Source/WebInspectorUI/UserInterface/Images/Text.svg

 1<?xml version="1.0" encoding="utf-8"?>
 2<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
 3<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
 4 <polygon fill="currentColor" stroke="none" 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"/>
 5</svg>

Source/WebInspectorUI/UserInterface/Images/Transform.svg

 1<?xml version="1.0" encoding="utf-8"?>
 2<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
 3<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
 4 <polygon points="14.63 14.24 13.26 10.9 12.56 11.94 8.75 9.37 8.75 4.76 10 4.76 8 1.76 6 4.76 7.25 4.76 7.25 9.37 3.44 11.94 2.74 10.9 1.37 14.24 4.97 14.22 4.27 13.18 8 10.67 11.73 13.18 11.03 14.22 14.63 14.24"/>
 5</svg>

Source/WebInspectorUI/UserInterface/Main.html

140140 <link rel="stylesheet" href="Views/ProfileView.css">
141141 <link rel="stylesheet" href="Views/QuickConsole.css">
142142 <link rel="stylesheet" href="Views/RadioButtonNavigationItem.css">
 143 <link rel="stylesheet" href="Views/RecordingActionTreeElement.css">
143144 <link rel="stylesheet" href="Views/RecordingContentView.css">
144145 <link rel="stylesheet" href="Views/RecordingStateDetailsSidebarPanel.css">
145146 <link rel="stylesheet" href="Views/RecordingTraceDetailsSidebarPanel.css">

Source/WebInspectorUI/UserInterface/Models/RecordingAction.js

@@WI.RecordingAction = class RecordingAction
8181 return functionNames.has(name);
8282 }
8383
 84 static classNameForAction(recordingAction)
 85 {
 86 function classNameForActionName(name) {
 87 if (WI.RecordingAction._lineStyleNames.includes(name))
 88 return "line-style";
 89 if (WI.RecordingAction._textStyleNames.includes(name))
 90 return "text";
 91 if (WI.RecordingAction._imageNames.includes(name))
 92 return "image";
 93 if (WI.RecordingAction._styleNames.includes(name))
 94 return "style";
 95 if (WI.RecordingAction._shadowNames.includes(name))
 96 return "shadow";
 97 if (WI.RecordingAction._transformNames.includes(name))
 98 return "transform";
 99
 100 switch (name) {
 101 case "arc":
 102 case "arcTo":
 103 return "arc";
 104 case "globalAlpha":
 105 case "globalCompositeOperation":
 106 return "composite";
 107 case "clearRect":
 108 case "fill":
 109 case "fillRect":
 110 return "fill";
 111 case "stroke":
 112 case "strokeRect":
 113 return "stroke";
 114 case "clip":
 115 case "ellipse":
 116 case "rect":
 117 case "save":
 118 case "restore":
 119 return name;
 120 case "closePath":
 121 case "lineTo":
 122 return "line-to";
 123 case "beginPath":
 124 case "moveTo":
 125 return "move-to";
 126 case "beginPath":
 127 return "begin-path";
 128 case "bezierCurveTo":
 129 case "quadraticCurveTo":
 130 return "curve";
 131 }
 132
 133 console.warn("No action for: " + name);
 134 return "";
 135 }
 136
 137 const name = recordingAction.name;
 138 let className = WI.RecordingAction._memoizedActionClassNames.get(name);
 139 if (!className) {
 140 className = classNameForActionName(name);
 141 WI.RecordingAction._memoizedActionClassNames.set(name, className);
 142 }
 143
 144 return className;
 145 }
 146
84147 // Public
85148
86149 get name() { return this._name; }

@@WI.RecordingAction._stateModifiers = {
393456 translate: ["transform"],
394457 },
395458};
 459
 460WI.RecordingAction._memoizedActionClassNames = new Map;
 461
 462// Image
 463WI.RecordingAction._imageNames = [
 464 "createImageData",
 465 "drawImage",
 466 "drawImageFromRect",
 467 "getImageData",
 468 "putImageData",
 469 "webkitGetImageDataHD",
 470 "webkitPutImageDataHD",
 471 "webkitImageSmoothingEnabled" // Deprecated
 472];
 473
 474WI.RecordingAction._lineStyleNames = [
 475 "lineCap",
 476 "lineDash",
 477 "lineJoin",
 478 "lineWidth",
 479 "miterLimit",
 480 "webkitLineDash", // Deprecated
 481 "webkitLineDashOffset" // Deprecated
 482];
 483
 484WI.RecordingAction._textStyleNames = [
 485 "font",
 486 "measureText",
 487 "textAlign",
 488 "textBaseline"
 489];
 490
 491// Stroke and fill styles
 492WI.RecordingAction._styleNames = [
 493 "createLinearGradient",
 494 "createPattern",
 495 "createRadialGradient",
 496 "fillStyle",
 497 "strokeStyle",
 498 "setFillColor", // Deprecated
 499 "setStrokeColor" // Deprecated
 500];
 501
 502// Shadow
 503WI.RecordingAction._shadowNames = [
 504 "shadowBlur",
 505 "shadowColor",
 506 "shadowOffsetX",
 507 "shadowOffsetY",
 508 "clearShadow", // Deprecated
 509 "setShadow" // Deprecated
 510];
 511
 512// Transform
 513WI.RecordingAction._transformNames = [
 514 "resetTransform",
 515 "rotate",
 516 "scale",
 517 "setTransform",
 518 "transform",
 519 "translate"
 520];

Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js

@@WI.GeneralTreeElement = class GeneralTreeElement extends WI.TreeElement
237237 }
238238 }
239239
 240 customTitleTooltip()
 241 {
 242 // Implemented by subclasses.
 243 }
 244
240245 // Private
241246
242247 _createElementsIfNeeded()

@@WI.GeneralTreeElement = class GeneralTreeElement extends WI.TreeElement
313318 if (!this._listItemNode)
314319 return;
315320
316  // Get the textContent for the elements since they can contain other nodes,
317  // and the tool tip only cares about the text.
318  let mainTitleText = this._mainTitleElement.textContent;
319  let subtitleText = this._subtitleElement ? this._subtitleElement.textContent : "";
320  let large = this.treeOutline && this.treeOutline.large;
321  if (mainTitleText && subtitleText)
322  this._listItemNode.title = mainTitleText + (large ? "\n" : " \u2014 ") + subtitleText;
323  else if (mainTitleText)
324  this._listItemNode.title = mainTitleText;
325  else
326  this._listItemNode.title = subtitleText;
 321 let tooltip = this.customTitleTooltip();
 322 if (!tooltip) {
 323 // Get the textContent for the elements since they can contain other nodes,
 324 // and the tool tip only cares about the text.
 325 let mainTitleText = this._mainTitleElement.textContent;
 326 let subtitleText = this._subtitleElement ? this._subtitleElement.textContent : "";
 327 let large = this.treeOutline && this.treeOutline.large;
 328 if (mainTitleText && subtitleText)
 329 tooltip = mainTitleText + (large ? "\n" : " \u2014 ") + subtitleText;
 330 else if (mainTitleText)
 331 tooltip = mainTitleText;
 332 else
 333 tooltip = subtitleText;
 334 }
 335
 336 this._listItemNode.title = tooltip;
327337 }
328338
329339 _updateStatusElement()

Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css

 1/*
 2 * Copyright (C) 2017 Apple Inc. All rights reserved.
 3 *
 4 * Redistribution and use in source and binary forms, with or without
 5 * modification, are permitted provided that the following conditions
 6 * are met:
 7 * 1. Redistributions of source code must retain the above copyright
 8 * notice, this list of conditions and the following disclaimer.
 9 * 2. Redistributions in binary form must reproduce the above copyright
 10 * notice, this list of conditions and the following disclaimer in the
 11 * documentation and/or other materials provided with the distribution.
 12 *
 13 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
 14 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
 15 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
 17 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 18 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 19 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 20 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 21 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 22 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
 23 * THE POSSIBILITY OF SUCH DAMAGE.
 24 */
 25
 26.item.action.initial-state > .icon {
 27 content: url("../Images/Source.svg");
 28}
 29
 30.item.action.invalid > .icon {
 31 content: url(../Images/Error.svg);
 32}
 33
 34.item.action:not(.initial-state, .parent, .invalid) > .icon {
 35 opacity: 0.7;
 36}
 37
 38.item.action:not(.initial-state)::before {
 39 position: relative;
 40 top: 3px;
 41 content: attr(data-index);
 42 font-family: -apple-system, sans-serif;
 43 font-size: 9px;
 44 color: var(--text-color-gray-medium);
 45 font-variant-numeric: tabular-nums;
 46 text-align: end;
 47
 48 --data-indent: calc(var(--tree-outline-icon-margin-start) - var(--tree-outline-icon-margin-end));
 49}
 50
 51body[dir=ltr] .item.action::before {
 52 float: left;
 53 margin-right: var(--tree-outline-icon-margin-end);
 54 margin-left: 0;
 55}
 56
 57body[dir=rtl] .item.action::before {
 58 float: right;
 59 margin-right: 0;
 60 margin-left: var(--tree-outline-icon-margin-end);
 61}
 62
 63:matches(:focus, .force-focus) .item.action.selected:not(.initial-state) > .icon {
 64 filter: invert();
 65}
 66
 67body:not(.window-inactive, .window-docked-inactive) :matches(:focus, .force-focus) .item.action.selected > .titles .parameter.swizzled,
 68body:not(.window-inactive, .window-docked-inactive) :matches(:focus, .force-focus) .item.action.selected::before {
 69 color: var(--selected-secondary-text-color);
 70}
 71
 72.tree-outline[data-indent="1"] .item.action::before,
 73.tree-outline[data-indent="2"] .item.action::before {
 74 min-width: var(--data-indent);
 75}
 76
 77.tree-outline[data-indent="3"] .item.action::before {
 78 min-width: calc(var(--data-indent) * 1.5);
 79}
 80
 81.tree-outline[data-indent="4"] .item.action::before {
 82 min-width: calc(var(--data-indent) * 2);
 83}
 84
 85.tree-outline[data-indent="5"] .item.action::before {
 86 min-width: calc(var(--data-indent) * 2.5);
 87}
 88
 89.tree-outline[data-indent="6"] .item.action::before {
 90 min-width: calc(var(--data-indent) * 3);
 91}
 92
 93.tree-outline[data-indent="7"] .item.action::before {
 94 min-width: calc(var(--data-indent) * 3.5);
 95}
 96
 97body[dir=ltr] .tree-outline:not(.hide-disclosure-buttons) .item.action:not(.initial-state, .parent) > .icon {
 98 margin-left: 0;
 99}
 100
 101body[dir=rtl] .tree-outline:not(.hide-disclosure-buttons) .item.action:not(.initial-state, .parent) > .icon {
 102 margin-right: 0;
 103}
 104
 105.item.action.visual:not(.selected, .invalid) {
 106 background-color: var(--value-changed-highlight);
 107}
 108
 109.item.action.attribute > .titles .parameters::before {
 110 content: " = ";
 111}
 112
 113.item.action:not(.attribute) > .titles .parameters::before {
 114 content: "(";
 115}
 116
 117.item.action:not(.attribute) > .titles .parameters::after {
 118 content: ")";
 119}
 120
 121.item.action > .titles .parameter:not(:last-child)::after {
 122 content: ", ";
 123}
 124
 125.item.action:not(.selected) > .titles .parameter .inline-swatch {
 126 vertical-align: -1px;
 127}
 128
 129.item.action:not(.selected) > .titles .parameter.swizzled {
 130 color: var(--text-color-gray-medium);
 131}
 132
 133.item.action.invalid:not(.selected) > .titles :matches(.name, .parameter.invalid) {
 134 color: red;
 135}
 136
 137/* Icon set A */
 138
 139.item.action.composite > .icon {
 140 content: url(../Images/Composite.svg);
 141}
 142
 143.item.action.fill > .icon {
 144 content: url(../Images/Fill.svg);
 145}
 146
 147.item.action.hit-region > .icon {
 148 content: url(../Images/HitRegion.svg);
 149}
 150
 151.item.action.image > .icon {
 152 content: url(../Images/Pixels.svg);
 153}
 154
 155.item.action.line-style > .icon {
 156 content: url(../Images/LineStyle.svg);
 157}
 158
 159.item.action.shadow > .icon {
 160 content: url(../Images/Shadow.svg);
 161}
 162
 163.item.action.stroke > .icon {
 164 content: url(../Images/Stroke.svg);
 165}
 166
 167.item.action.style > .icon {
 168 content: url(../Images/Palette.svg);
 169}
 170
 171.item.action.text > .icon {
 172 content: url(../Images/Text.svg);
 173}
 174
 175.item.action.transform > .icon {
 176 content: url(../Images/Transform.svg);
 177}
 178
 179.item.action.arc > .icon {
 180 content: url(../Images/PathArc.svg);
 181}
 182
 183.item.action.curve > .icon {
 184 content: url(../Images/PathCurve.svg);
 185}
 186
 187.item.action.ellipse > .icon {
 188 content: url(../Images/PathEllipse.svg);
 189}
 190
 191.item.action.line-to > .icon {
 192 content: url(../Images/PathLineTo.svg);
 193}
 194
 195.item.action.move-to > .icon {
 196 content: url(../Images/PathMoveTo.svg);
 197}
 198
 199.item.action.point-in-path > .icon {
 200 content: url(../Images/PointInPath.svg);
 201}
 202
 203.item.action.rect > .icon {
 204 content: url(../Images/PathRect.svg);
 205}
 206
 207.item.action.restore > .icon {
 208 content: url(../Images/StepOut.svg);
 209}
 210
 211.item.action.save > .icon {
 212 content: url(../Images/StepInto.svg);
 213}

Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js

@@WI.RecordingActionTreeElement = class RecordingActionTreeElement extends WI.Gene
2929 {
3030 console.assert(representedObject instanceof WI.RecordingAction);
3131
32  let {classNames, copyText, titleFragment} = WI.RecordingActionTreeElement._generateDOM(representedObject, recordingType);
 32 let {titleFragment, copyText} = WI.RecordingActionTreeElement._generateDOM(representedObject, recordingType);
 33 let classNames = WI.RecordingActionTreeElement._getClassNames(representedObject);
3334
3435 const subtitle = null;
3536 super(classNames, titleFragment, subtitle, representedObject);

@@WI.RecordingActionTreeElement = class RecordingActionTreeElement extends WI.Gene
4243
4344 static _generateDOM(recordingAction, recordingType)
4445 {
45  let classNames = ["action"];
46  let copyText = recordingAction.name;
47 
48  let isInitialState = recordingAction instanceof WI.RecordingInitialStateAction;
49  if (recordingAction.isFunction)
50  classNames.push("function");
51  else if (!isInitialState) {
52  classNames.push("attribute");
53  if (recordingAction.isGetter)
54  classNames.push("getter");
55  else
56  classNames.push(typeof recordingAction.parameters[0]);
57  }
 46 function createParameterElement(parameter, swizzleType)
 47 {
 48 let parameterElement = titleFragment.appendChild(document.createElement("span"));
 49 parameterElement.classList.add("parameter");
 50
 51 switch (swizzleType) {
 52 case WI.Recording.Swizzle.Number:
 53 parameterElement.textContent = parameter.maxDecimals(2);
 54 break;
 55
 56 case WI.Recording.Swizzle.Boolean:
 57 parameterElement.textContent = parameter;
 58 break;
 59
 60 case WI.Recording.Swizzle.String:
 61 parameterElement.textContent = JSON.stringify(parameter);
 62 break;
 63
 64 case WI.Recording.Swizzle.Array:
 65 parameterElement.classList.add("swizzled");
 66 parameterElement.textContent = JSON.stringify(parameter);
 67 break;
 68
 69 case WI.Recording.Swizzle.TypedArray:
 70 case WI.Recording.Swizzle.Image:
 71 case WI.Recording.Swizzle.ImageData:
 72 case WI.Recording.Swizzle.DOMMatrix:
 73 case WI.Recording.Swizzle.Path2D:
 74 case WI.Recording.Swizzle.CanvasGradient:
 75 case WI.Recording.Swizzle.CanvasPattern:
 76 case WI.Recording.Swizzle.WebGLBuffer:
 77 case WI.Recording.Swizzle.WebGLFramebuffer:
 78 case WI.Recording.Swizzle.WebGLRenderbuffer:
 79 case WI.Recording.Swizzle.WebGLTexture:
 80 case WI.Recording.Swizzle.WebGLShader:
 81 case WI.Recording.Swizzle.WebGLProgram:
 82 case WI.Recording.Swizzle.WebGLUniformLocation:
 83 parameterElement.classList.add("swizzled");
 84 parameterElement.textContent = WI.Recording.displayNameForSwizzleType(swizzleType);
 85 break;
 86 }
5887
59  if (recordingAction.isVisual)
60  classNames.push("visual");
 88 if (!parameterElement.textContent) {
 89 parameterElement.classList.add("invalid");
 90 parameterElement.textContent = swizzleType === WI.Recording.Swizzle.None ? parameter : WI.Recording.displayNameForSwizzleType(swizzleType);
 91 }
6192
62  if (!recordingAction.valid)
63  classNames.push("invalid");
 93 return parameterElement;
 94 }
6495
6596 let titleFragment = document.createDocumentFragment();
 97 let copyText = recordingAction.name;
6698
6799 let nameContainer = titleFragment.appendChild(document.createElement("span"));
68100 nameContainer.classList.add("name");
69101 nameContainer.textContent = recordingAction.name;
70102
71  if (!recordingAction.isGetter && !isInitialState) {
72  if (recordingAction.isFunction) {
73  titleFragment.append("(");
74  copyText += "(";
75  } else {
76  titleFragment.append(" = ");
77  copyText = " = ";
78  }
 103 if (!recordingAction.parameters.length)
 104 return {titleFragment, copyText};
79105
80  for (let i = 0; i < recordingAction.parameters.length; ++i) {
81  let parameter = recordingAction.parameters[i];
82  let swizzleType = recordingAction.swizzleTypes[i];
83 
84  if (i) {
85  titleFragment.append(", ");
86  copyText += ", ";
87  }
88 
89  let parameterElement = titleFragment.appendChild(document.createElement("span"));
90  parameterElement.classList.add("parameter");
91 
92  switch (swizzleType) {
93  case WI.Recording.Swizzle.Number:
94  parameterElement.textContent = parameter.maxDecimals(2);
95  break;
96 
97  case WI.Recording.Swizzle.Boolean:
98  parameterElement.textContent = parameter;
99  break;
100 
101  case WI.Recording.Swizzle.String:
102  parameterElement.textContent = JSON.stringify(parameter);
103  break;
104 
105  case WI.Recording.Swizzle.Array:
106  parameterElement.classList.add("swizzled");
107  parameterElement.textContent = JSON.stringify(parameter);
108  break;
109 
110  case WI.Recording.Swizzle.TypedArray:
111  case WI.Recording.Swizzle.Image:
112  case WI.Recording.Swizzle.ImageData:
113  case WI.Recording.Swizzle.DOMMatrix:
114  case WI.Recording.Swizzle.Path2D:
115  case WI.Recording.Swizzle.CanvasGradient:
116  case WI.Recording.Swizzle.CanvasPattern:
117  case WI.Recording.Swizzle.WebGLBuffer:
118  case WI.Recording.Swizzle.WebGLFramebuffer:
119  case WI.Recording.Swizzle.WebGLRenderbuffer:
120  case WI.Recording.Swizzle.WebGLTexture:
121  case WI.Recording.Swizzle.WebGLShader:
122  case WI.Recording.Swizzle.WebGLProgram:
123  case WI.Recording.Swizzle.WebGLUniformLocation:
124  parameterElement.classList.add("swizzled");
125  parameterElement.textContent = WI.Recording.displayNameForSwizzleType(swizzleType);
126  break;
127  }
128 
129  if (!parameterElement.textContent) {
130  parameterElement.classList.add("invalid");
131  parameterElement.textContent = swizzleType === WI.Recording.Swizzle.None ? parameter : WI.Recording.displayNameForSwizzleType(swizzleType);
132  }
133 
134  copyText += parameterElement.textContent;
135 
136  if (!recordingAction.isFunction)
137  break;
138  }
 106 let parametersContainer = titleFragment.appendChild(document.createElement("span"));
 107 parametersContainer.classList.add("parameters");
139108
140  if (recordingAction.isFunction) {
141  titleFragment.append(")");
142  copyText += ")";
143  }
144  } else if (isInitialState)
 109 if (recordingAction.isFunction)
 110 copyText += "(";
 111 else
 112 copyText += " = ";
 113
 114 for (let i = 0; i < recordingAction.parameters.length; ++i) {
 115 let parameter = recordingAction.parameters[i];
 116 let swizzleType = recordingAction.swizzleTypes[i];
 117 let parameterElement = createParameterElement(parameter, swizzleType);
 118 parametersContainer.appendChild(parameterElement);
 119
 120 if (i)
 121 copyText += ", ";
 122
 123 copyText += parameterElement.textContent;
 124 }
 125
 126 if (recordingAction.isFunction)
 127 copyText += ")";
 128
 129 return {titleFragment, copyText};
 130 }
 131
 132 static _getClassNames(recordingAction)
 133 {
 134 let classNames = ["action"];
 135
 136 if (recordingAction instanceof WI.RecordingInitialStateAction) {
145137 classNames.push("initial-state");
 138 return classNames;
 139 }
 140
 141 if (!recordingAction.isFunction)
 142 classNames.push("attribute");
146143
147  return {
148  classNames,
149  copyText,
150  titleFragment,
151  };
 144 let actionClassName = WI.RecordingAction.classNameForAction(recordingAction);
 145 if (actionClassName !== "")
 146 classNames.push(actionClassName);
 147
 148 if (recordingAction.isVisual)
 149 classNames.push("visual");
 150
 151 if (!recordingAction.valid)
 152 classNames.push("invalid");
 153
 154 return classNames;
152155 }
153156
154157 // Public

@@WI.RecordingActionTreeElement = class RecordingActionTreeElement extends WI.Gene
174177
175178 // Protected
176179
 180 customTitleTooltip()
 181 {
 182 return this._copyText;
 183 }
 184
177185 onattach()
178186 {
179187 super.onattach();

Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.css

3030.sidebar > .panel.navigation.recording > .content > .tree-outline {
3131 min-height: 100%;
3232}
33 
34 .sidebar > .panel.navigation.recording > .content > .tree-outline:not(:empty) {
35  background: var(--transparent-stripe-background-gradient);
36 }
37 
38 .sidebar > .panel.navigation.recording > .content > .tree-outline > .item.parent:not(.action, .selected).expanded {
39  background-color: white;
40 }
41 
42 .sidebar > .panel.navigation.recording > .content > .tree-outline .item.action:not(.initial-state)::before {
43  position: relative;
44  top: 3px;
45  content: attr(data-index);
46  font-family: Menlo, monospace;
47  text-align: end;
48 }
49 
50 body[dir=ltr] .sidebar > .panel.navigation.recording > .content > .tree-outline .item.action:not(.initial-state)::before {
51  float: left;
52  margin-right: var(--tree-outline-icon-margin-end);
53  margin-left: 0;
54 }
55 
56 body[dir=rtl] .sidebar > .panel.navigation.recording > .content > .tree-outline .item.action:not(.initial-state)::before {
57  float: right;
58  margin-right: 0;
59  margin-left: var(--tree-outline-icon-margin-end);
60 }
61 
62 .sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="2"] .item.action:not(.initial-state)::before {
63  min-width: 1.2em;
64 }
65 
66 .sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="3"] .item.action:not(.initial-state)::before {
67  min-width: 1.9em;
68 }
69 
70 .sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="4"] .item.action:not(.initial-state)::before {
71  min-width: 3.1em;
72 }
73 
74 .sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="5"] .item.action:not(.initial-state)::before {
75  min-width: 3.7em;
76 }
77 
78 .sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="6"] .item.action:not(.initial-state)::before {
79  min-width: 4.2em;
80 }
81 
82 .sidebar > .panel.navigation.recording > .content > .tree-outline[data-indent="7"] .item.action:not(.initial-state)::before {
83  min-width: 5.4em;
84 }
85 
86 .sidebar > .panel.navigation.recording > .content .action > .icon {
87  content: url("../Images/Source.svg");
88 }
89 
90 .sidebar > .panel.navigation.recording > .content .action.function > .icon {
91  content: url(../Images/Function.svg);
92 }
93 
94 .sidebar > .panel.navigation.recording > .content .action.attribute.getter > .icon {
95  content: url(../Images/Eye.svg);
96 }
97 
98 .sidebar > .panel.navigation.recording > .content .tree-outline:matches(:focus, .force-focus) .action.attribute.getter.selected > .icon {
99  filter: invert();
100 }
101 
102 .sidebar > .panel.navigation.recording > .content .action.attribute.boolean > .icon {
103  content: url(../Images/TypeBoolean.svg);
104 }
105 
106 .sidebar > .panel.navigation.recording > .content .action.attribute.number > .icon {
107  content: url(../Images/TypeNumber.svg);
108 }
109 
110 .sidebar > .panel.navigation.recording > .content .action.attribute.object > .icon {
111  content: url(../Images/TypeObject.svg);
112 }
113 
114 .sidebar > .panel.navigation.recording > .content .action.attribute.string > .icon {
115  content: url(../Images/TypeString.svg);
116 }
117 
118 .sidebar > .panel.navigation.recording > .content > .tree-outline > .item.parent:not(.action) > .icon {
 33.sidebar > .panel.navigation.recording > .content > .tree-outline .item.folder-icon > .icon {
11934 content: url(../Images/RenderingFrame.svg);
12035}
121 
122 .sidebar > .panel.navigation.recording > .content .action:matches(.invalid, .missing) > .icon {
123  filter: grayscale();
124 }
125 
126 body[dir=ltr] .sidebar > .panel.navigation.recording > .content .action:not(.initial-state) > .icon {
127  margin-left: 0;
128 }
129 
130 body[dir=rtl] .sidebar > .panel.navigation.recording > .content .action:not(.initial-state) > .icon {
131  margin-right: 0;
132 }
133 
134 .sidebar > .panel.navigation.recording > .content .action.visual:not(.selected, .invalid) {
135  background-color: var(--value-visual-highlight);
136 }
137 
138 .sidebar > .panel.navigation.recording > .content .action:not(.selected, .initial-state) > .titles .parameter.swizzled {
139  color: grey;
140 }
141 
142 .sidebar > .panel.navigation.recording > .content .action.invalid:not(.selected, .initial-state) > .titles :matches(.name, .parameter.invalid) {
143  color: red;
144 }

Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.js

11/*
2  * Copyright (C) 2015 Apple Inc. All rights reserved.
 2 * Copyright (C) 2017 Apple Inc. All rights reserved.
33 *
44 * Redistribution and use in source and binary forms, with or without
55 * modification, are permitted provided that the following conditions