Changeset 225587 in webkit


Ignore:
Timestamp:
Dec 6, 2017 12:28:26 PM (6 years ago)
Author:
Matt Baker
Message:

Web Inspector: Canvas Tab initial user experience is poor when no canvases exist
https://bugs.webkit.org/show_bug.cgi?id=179329
<rdar://problem/35842036>

Reviewed by Timothy Hatcher.

This patch adds a new method, WI.createNavigationItemHelp, for creating command
help to display in a message text view. The method accepts a format string and
NavigationItem, and returns a DOM element. For example,

WI.createNavigationItemHelp("Press %s to do X.", navigationItem)

returns:

<div class="navigation-item-help">

Press <div class="navigation-bar"><div class="item">...</div></div> to do X.

</div>

  • Localizations/en.lproj/localizedStrings.js:
  • UserInterface/Base/Main.js:
  • UserInterface/Controllers/CanvasManager.js:

(WI.CanvasManager.prototype.importRecording):
Importing a recording should be a manager command with a corresponding
event, so that it's decoupled from any specific location in the UI.

  • UserInterface/Views/CanvasOverviewContentView.js:

(WI.CanvasOverviewContentView):

  • UserInterface/Views/CanvasTabContentView.js:

(WI.CanvasTabContentView):
(WI.CanvasTabContentView.prototype.attached):
(WI.CanvasTabContentView.prototype._recordingImportedOrStopped):
(WI.CanvasTabContentView.prototype._recordingStopped): Deleted.
(WI.CanvasTabContentView.prototype._navigationSidebarImport): Deleted.

  • UserInterface/Views/Main.css:

(.message-text-view .navigation-item-help):
(.message-text-view .navigation-item-help .navigation-bar):
(.message-text-view .navigation-item-help .navigation-bar > .item):
New styles for a NavigationItem appearing inline as part of descriptive
text. Wrapped in a fake navigation bar so navigation item styles are picked up.

  • UserInterface/Views/RecordingNavigationSidebarPanel.js:

(WI.RecordingNavigationSidebarPanel.prototype.initialLayout):
(WI.RecordingNavigationSidebarPanel.prototype._importNavigationItemClicked): Deleted.
Moved import code to CanvasManager.

Location:
trunk/Source/WebInspectorUI
Files:
8 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebInspectorUI/ChangeLog

    r225580 r225587  
     12017-12-06  Matt Baker  <mattbaker@apple.com>
     2
     3        Web Inspector: Canvas Tab initial user experience is poor when no canvases exist
     4        https://bugs.webkit.org/show_bug.cgi?id=179329
     5        <rdar://problem/35842036>
     6
     7        Reviewed by Timothy Hatcher.
     8
     9        This patch adds a new method, WI.createNavigationItemHelp, for creating command
     10        help to display in a message text view. The method accepts a format string and
     11        NavigationItem, and returns a DOM element. For example,
     12
     13            WI.createNavigationItemHelp("Press %s to do X.", navigationItem)
     14
     15        returns:
     16
     17            <div class="navigation-item-help">
     18                Press <div class="navigation-bar"><div class="item">...</div></div> to do X.
     19            </div>
     20
     21        * Localizations/en.lproj/localizedStrings.js:
     22        * UserInterface/Base/Main.js:
     23
     24        * UserInterface/Controllers/CanvasManager.js:
     25        (WI.CanvasManager.prototype.importRecording):
     26        Importing a recording should be a manager command with a corresponding
     27        event, so that it's decoupled from any specific location in the UI.
     28
     29        * UserInterface/Views/CanvasOverviewContentView.js:
     30        (WI.CanvasOverviewContentView):
     31
     32        * UserInterface/Views/CanvasTabContentView.js:
     33        (WI.CanvasTabContentView):
     34        (WI.CanvasTabContentView.prototype.attached):
     35        (WI.CanvasTabContentView.prototype._recordingImportedOrStopped):
     36        (WI.CanvasTabContentView.prototype._recordingStopped): Deleted.
     37        (WI.CanvasTabContentView.prototype._navigationSidebarImport): Deleted.
     38
     39        * UserInterface/Views/Main.css:
     40        (.message-text-view .navigation-item-help):
     41        (.message-text-view .navigation-item-help .navigation-bar):
     42        (.message-text-view .navigation-item-help .navigation-bar > .item):
     43        New styles for a NavigationItem appearing inline as part of descriptive
     44        text. Wrapped in a fake navigation bar so navigation item styles are picked up.
     45
     46        * UserInterface/Views/RecordingNavigationSidebarPanel.js:
     47        (WI.RecordingNavigationSidebarPanel.prototype.initialLayout):
     48        (WI.RecordingNavigationSidebarPanel.prototype._importNavigationItemClicked): Deleted.
     49        Moved import code to CanvasManager.
     50
    1512017-12-06  Devin Rousso  <webkit@devinrousso.com>
    252
  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r225572 r225587  
    703703localizedStrings["Prefer indent using:"] = "Prefer indent using:";
    704704localizedStrings["Preserve Log"] = "Preserve Log";
     705localizedStrings["Press %s to load a recording from file."] = "Press %s to load a recording from file.";
    705706localizedStrings["Pressed"] = "Pressed";
    706707localizedStrings["Pretty print"] = "Pretty print";
  • trunk/Source/WebInspectorUI/UserInterface/Base/Main.js

    r225487 r225587  
    22512251};
    22522252
     2253WI.createNavigationItemHelp = function(formatString, navigationItem)
     2254{
     2255    console.assert(typeof formatString === "string");
     2256    console.assert(navigationItem instanceof WI.NavigationItem);
     2257
     2258    function append(a, b) {
     2259        a.append(b);
     2260        return a;
     2261    }
     2262
     2263    let containerElement = document.createElement("div");
     2264    containerElement.className = "navigation-item-help";
     2265    containerElement.__navigationItem = navigationItem;
     2266
     2267    let wrapperElement = document.createElement("div");
     2268    wrapperElement.className = "navigation-bar";
     2269    wrapperElement.appendChild(navigationItem.element);
     2270
     2271    String.format(formatString, [wrapperElement], String.standardFormatters, containerElement, append);
     2272    return containerElement;
     2273};
     2274
    22532275WI.createGoToArrowButton = function()
    22542276{
  • trunk/Source/WebInspectorUI/UserInterface/Controllers/CanvasManager.js

    r225488 r225587  
    5656    get recordingCanvas() { return this._recordingCanvas; }
    5757
     58    importRecording()
     59    {
     60        WI.loadDataFromFile((data, filename) => {
     61            if (!data)
     62                return;
     63
     64            let payload = null;
     65            try {
     66                payload = JSON.parse(data);
     67            } catch (e) {
     68                WI.Recording.synthesizeError(e);
     69                return;
     70            }
     71
     72            let recording = WI.Recording.fromPayload(payload);
     73            if (!recording) {
     74                WI.Recording.synthesizeError(WI.UIString("unsupported version."));
     75                return;
     76            }
     77
     78            let extensionStart = filename.lastIndexOf(".");
     79            if (extensionStart !== -1)
     80                filename = filename.substring(0, extensionStart);
     81            recording.createDisplayName(filename);
     82
     83            this.dispatchEventToListeners(WI.CanvasManager.Event.RecordingImported, {recording});
     84        });
     85    }
     86
    5887    startRecording(canvas, singleFrame)
    5988    {
     
    272301    CanvasAdded: "canvas-manager-canvas-was-added",
    273302    CanvasRemoved: "canvas-manager-canvas-was-removed",
     303    RecordingImported: "canvas-manager-recording-imported",
    274304    RecordingStarted: "canvas-manager-recording-started",
    275305    RecordingProgress: "canvas-manager-recording-progress",
  • trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js

    r225487 r225587  
    3535        descriptionElement.textContent = WI.UIString("Waiting for canvas contexts created by script or CSS.");
    3636
     37        let importNavigationItem = new WI.ButtonNavigationItem("import-recording", WI.UIString("Import"), "Images/Import.svg", 15, 15);
     38        importNavigationItem.buttonStyle = WI.ButtonNavigationItem.Style.ImageAndText;
     39        importNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, () => { WI.canvasManager.importRecording(); });
     40
     41        let importHelpElement = WI.createNavigationItemHelp(WI.UIString("Press %s to load a recording from file."), importNavigationItem);
     42        contentPlaceholder.appendChild(importHelpElement);
     43
    3744        super(representedObject, WI.CanvasContentView, contentPlaceholder);
    3845
  • trunk/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.js

    r225488 r225587  
    5555        this.contentBrowser.navigationBar.insertNavigationItem(new WI.DividerNavigationItem, 3);
    5656
    57         this.navigationSidebarPanel.addEventListener(WI.RecordingNavigationSidebarPanel.Event.Import, this._navigationSidebarImport, this);
    5857        this.navigationSidebarPanel.contentTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._navigationSidebarTreeOutlineSelectionChanged, this);
    5958    }
     
    142141        WI.canvasManager.addEventListener(WI.CanvasManager.Event.CanvasAdded, this._handleCanvasAdded, this);
    143142        WI.canvasManager.addEventListener(WI.CanvasManager.Event.CanvasRemoved, this._handleCanvasRemoved, this);
    144         WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingStopped, this._recordingStopped, this);
     143        WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingImported, this._recordingImportedOrStopped, this);
     144        WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingStopped, this._recordingImportedOrStopped, this);
    145145        WI.RecordingContentView.addEventListener(WI.RecordingContentView.Event.RecordingActionIndexChanged, this._recordingActionIndexChanged, this);
    146146
     
    234234    }
    235235
    236     _recordingStopped(event)
     236    _recordingImportedOrStopped(event)
    237237    {
    238238        let recording = event.data.recording;
    239         if (!recording) {
    240             // FIXME: <https://webkit.org/b/178185> Web Inspector: Canvas tab: show detailed status during canvas recording
    241             return;
    242         }
     239        if (!recording)
     240            return;
    243241
    244242        this._recordingAdded(recording, {
    245243            suppressShowRecording: event.data.fromConsole,
    246244        });
    247     }
    248 
    249     _navigationSidebarImport(event)
    250     {
    251         let {filename, payload} = event.data;
    252         let recording = WI.Recording.fromPayload(payload);
    253         if (!recording) {
    254             WI.Recording.synthesizeError(WI.UIString("unsupported version."));
    255             return;
    256         }
    257 
    258         let extensionStart = filename.lastIndexOf(".");
    259         if (extensionStart !== -1)
    260             filename = filename.substring(0, extensionStart);
    261 
    262         recording.createDisplayName(filename);
    263 
    264         this._recordingAdded(recording);
    265245    }
    266246
  • trunk/Source/WebInspectorUI/UserInterface/Views/Main.css

    r225487 r225587  
    190190}
    191191
     192.message-text-view .navigation-item-help {
     193    display: inline-flex;
     194    padding: 10px 0;
     195}
     196
     197.message-text-view .navigation-item-help .navigation-bar {
     198    height: auto;
     199    padding: 0 4px;
     200    border-bottom: none;
     201    overflow: visible;
     202}
     203
     204.message-text-view .navigation-item-help .navigation-bar > .item {
     205    /* Adjust button top by the border thickness, to keep button text on the baseline. */
     206    position: relative;
     207    top: -1px;
     208
     209    padding: 1px 4px;
     210    font-size: 11px;
     211    border-radius: 4px;
     212    border: solid 1px var(--border-color);
     213}
     214
    192215.message-text-view.error {
    193216    color: var(--error-text-color);
  • trunk/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.js

    r225488 r225587  
    135135        this._importButton = importNavigationItem.element.appendChild(document.createElement("button"));
    136136        this._importButton.textContent = importLabel;
    137         this._importButton.addEventListener("click", this._importNavigationItemClicked.bind(this));
     137        this._importButton.addEventListener("click", () => { WI.canvasManager.importRecording(); });
    138138
    139139        const exportLabel = WI.UIString("Export");
     
    172172    // Private
    173173
    174     _importNavigationItemClicked(event)
    175     {
    176         WI.loadDataFromFile((data, filename) => {
    177             if (!data)
    178                 return;
    179 
    180             let payload = null;
    181             try {
    182                 payload = JSON.parse(data);
    183             } catch (e) {
    184                 WI.Recording.synthesizeError(e);
    185                 return;
    186             }
    187 
    188             this.dispatchEventToListeners(WI.RecordingNavigationSidebarPanel.Event.Import, {payload, filename});
    189         });
    190     }
    191 
    192174    _exportNavigationItemClicked(event)
    193175    {
Note: See TracChangeset for help on using the changeset viewer.