Changeset 221844 in webkit


Ignore:
Timestamp:
Sep 10, 2017 9:49:29 PM (7 years ago)
Author:
Matt Baker
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:
Location:
trunk/Source/WebInspectorUI
Files:
19 added
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

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

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r221594 r221844  
    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">

  • trunk/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js

    r220119 r221844  
    238238    }
    239239
     240    customTitleTooltip()
     241    {
     242        // Implemented by subclasses.
     243    }
     244
    240245    // Private
    241246
    … …  
    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

  • trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js

    r221695 r221844  
    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;
    … …  
    4344    static _generateDOM(recordingAction, recordingType)
    4445    {
    45         let classNames = ["action"];
     46        function createParameterElement(parameter, swizzleType) {
     47            let parameterElement = document.createElement("span");
     48            parameterElement.classList.add("parameter");
     49
     50            switch (swizzleType) {
     51            case WI.Recording.Swizzle.Number:
     52                parameterElement.textContent = parameter.maxDecimals(2);
     53                break;
     54
     55            case WI.Recording.Swizzle.Boolean:
     56                parameterElement.textContent = parameter;
     57                break;
     58
     59            case WI.Recording.Swizzle.String:
     60                parameterElement.textContent = JSON.stringify(parameter);
     61                break;
     62
     63            case WI.Recording.Swizzle.Array:
     64                parameterElement.classList.add("swizzled");
     65                parameterElement.textContent = JSON.stringify(parameter);
     66                break;
     67
     68            case WI.Recording.Swizzle.TypedArray:
     69            case WI.Recording.Swizzle.Image:
     70            case WI.Recording.Swizzle.ImageData:
     71            case WI.Recording.Swizzle.DOMMatrix:
     72            case WI.Recording.Swizzle.Path2D:
     73            case WI.Recording.Swizzle.CanvasGradient:
     74            case WI.Recording.Swizzle.CanvasPattern:
     75            case WI.Recording.Swizzle.WebGLBuffer:
     76            case WI.Recording.Swizzle.WebGLFramebuffer:
     77            case WI.Recording.Swizzle.WebGLRenderbuffer:
     78            case WI.Recording.Swizzle.WebGLTexture:
     79            case WI.Recording.Swizzle.WebGLShader:
     80            case WI.Recording.Swizzle.WebGLProgram:
     81            case WI.Recording.Swizzle.WebGLUniformLocation:
     82                parameterElement.classList.add("swizzled");
     83                parameterElement.textContent = WI.Recording.displayNameForSwizzleType(swizzleType);
     84                break;
     85            }
     86
     87            if (!parameterElement.textContent) {
     88                parameterElement.classList.add("invalid");
     89                parameterElement.textContent = swizzleType === WI.Recording.Swizzle.None ? parameter : WI.Recording.displayNameForSwizzleType(swizzleType);
     90            }
     91
     92            return parameterElement;
     93        }
     94
     95        let titleFragment = document.createDocumentFragment();
    4696        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         }
    58 
    59         if (recordingAction.isVisual)
    60             classNames.push("visual");
    61 
    62         if (!recordingAction.valid)
    63             classNames.push("invalid");
    64 
    65         let titleFragment = document.createDocumentFragment();
    6697
    6798        let nameContainer = titleFragment.appendChild(document.createElement("span"));
    … …  
    69100        nameContainer.textContent = recordingAction.name;
    70101
    71         if (!recordingAction.isGetter && !isInitialState) {
    72             if (recordingAction.isFunction) {
    73                 titleFragment.append("(");
    74                 copyText += "(";
    75             } else {
    76                 titleFragment.append(" = ");
    77                 copyText = " = ";
     102        if (!recordingAction.parameters.length)
     103            return {titleFragment, copyText};
     104
     105        let parametersContainer = titleFragment.appendChild(document.createElement("span"));
     106        parametersContainer.classList.add("parameters");
     107
     108        if (recordingAction.isFunction)
     109            copyText += "(";
     110        else
     111            copyText += " = ";
     112
     113        for (let i = 0; i < recordingAction.parameters.length; ++i) {
     114            let parameter = recordingAction.parameters[i];
     115            let swizzleType = recordingAction.swizzleTypes[i];
     116            let parameterElement = createParameterElement(parameter, swizzleType);
     117            parametersContainer.appendChild(parameterElement);
     118
     119            if (i)
     120                copyText += ", ";
     121
     122            copyText += parameterElement.textContent;
     123        }
     124
     125        if (recordingAction.isFunction)
     126            copyText += ")";
     127
     128        return {titleFragment, copyText};
     129    }
     130
     131    static _getClassNames(recordingAction)
     132    {
     133        let classNames = ["action"];
     134
     135        if (recordingAction instanceof WI.RecordingInitialStateAction) {
     136            classNames.push("initial-state");
     137            return classNames;
     138        }
     139
     140        if (!recordingAction.isFunction)
     141            classNames.push("attribute");
     142
     143        let actionClassName = WI.RecordingActionTreeElement._classNameForAction(recordingAction);
     144        if (actionClassName.length)
     145            classNames.push(actionClassName);
     146
     147        if (recordingAction.isVisual)
     148            classNames.push("visual");
     149
     150        if (!recordingAction.valid)
     151            classNames.push("invalid");
     152
     153        return classNames;
     154    }
     155
     156    static _classNameForAction(recordingAction)
     157    {
     158        function classNameForActionName(name) {
     159            switch (name) {
     160            case "arc":
     161            case "arcTo":
     162                return "arc";
     163
     164            case "globalAlpha":
     165            case "globalCompositeOperation":
     166            case "setAlpha":
     167            case "setGlobalAlpha":
     168            case "setCompositeOperation":
     169            case "setGlobalCompositeOperation":
     170                return "composite";
     171
     172            case "bezierCurveTo":
     173            case "quadraticCurveTo":
     174                return "curve";
     175
     176            case "clearRect":
     177            case "fill":
     178            case "fillRect":
     179            case "fillText":
     180                return "fill";
     181
     182            case "createImageData":
     183            case "drawFocusIfNeeded":
     184            case "drawImage":
     185            case "drawImageFromRect":
     186            case "filter":
     187            case "getImageData":
     188            case "imageSmoothingEnabled":
     189            case "imageSmoothingQuality":
     190            case "putImageData":
     191            case "webkitGetImageDataHD":
     192            case "webkitPutImageDataHD":
     193            case "webkitImageSmoothingEnabled":
     194                return "image";
     195
     196            case "getLineDash":
     197            case "lineCap":
     198            case "lineDashOffset":
     199            case "lineJoin":
     200            case "lineWidth":
     201            case "miterLimit":
     202            case "setLineCap":
     203            case "setLineDash":
     204            case "setLineJoin":
     205            case "setLineWidth":
     206            case "setMiterLimit":
     207            case "webkitLineDash":
     208            case "webkitLineDashOffset":
     209                return "line-style";
     210
     211            case "closePath":
     212            case "lineTo":
     213                return "line-to";
     214
     215            case "beginPath":
     216            case "moveTo":
     217                return "move-to";
     218
     219            case "isPointInPath":
     220                return "point-in-path";
     221
     222            case "isPointInStroke":
     223                return "point-in-stroke";
     224
     225            case "clearShadow":
     226            case "setShadow":
     227            case "shadowBlur":
     228            case "shadowColor":
     229            case "shadowOffsetX":
     230            case "shadowOffsetY":
     231                return "shadow";
     232
     233            case "createLinearGradient":
     234            case "createPattern":
     235            case "createRadialGradient":
     236            case "fillStyle":
     237            case "setFillColor":
     238            case "setStrokeColor":
     239            case "strokeStyle":
     240                return "style";
     241
     242            case "stroke":
     243            case "strokeRect":
     244            case "strokeText":
     245                return "stroke";
     246
     247            case "direction":
     248            case "font":
     249            case "measureText":
     250            case "textAlign":
     251            case "textBaseline":
     252                return "text";
     253
     254            case "getTransform":
     255            case "resetTransform":
     256            case "rotate":
     257            case "scale":
     258            case "setTransform":
     259            case "transform":
     260            case "translate":
     261                return "transform";
     262
     263            case "clip":
     264            case "ellipse":
     265            case "rect":
     266            case "restore":
     267            case "save":
     268                return name;
    78269            }
    79270
    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             }
    139 
    140             if (recordingAction.isFunction) {
    141                 titleFragment.append(")");
    142                 copyText += ")";
    143             }
    144         } else if (isInitialState)
    145             classNames.push("initial-state");
    146 
    147         return {
    148             classNames,
    149             copyText,
    150             titleFragment,
    151         };
     271            console.warn("No class name for action " + name);
     272            return "";
     273        }
     274
     275        const name = recordingAction.name;
     276        let className = WI.RecordingActionTreeElement._memoizedActionClassNames.get(name);
     277        if (!className) {
     278            className = classNameForActionName(name);
     279            WI.RecordingActionTreeElement._memoizedActionClassNames.set(name, className);
     280        }
     281
     282        return className;
    152283    }
    153284
    … …  
    174305
    175306    // Protected
     307
     308    customTitleTooltip()
     309    {
     310        return this._copyText;
     311    }
    176312
    177313    onattach()
    … …  
    205341    }
    206342};
     343
     344WI.RecordingActionTreeElement._memoizedActionClassNames = new Map;

  • trunk/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.css

    r221695 r221844  
    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 }

  • trunk/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.js

    r221174 r221844  
    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
Note: See TracChangeset for help on using the changeset viewer.