Changeset 225587 in webkit
- Timestamp:
- Dec 6, 2017 12:28:26 PM (6 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 8 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r225580 r225587 1 2017-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 1 51 2017-12-06 Devin Rousso <webkit@devinrousso.com> 2 52 -
trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
r225572 r225587 703 703 localizedStrings["Prefer indent using:"] = "Prefer indent using:"; 704 704 localizedStrings["Preserve Log"] = "Preserve Log"; 705 localizedStrings["Press %s to load a recording from file."] = "Press %s to load a recording from file."; 705 706 localizedStrings["Pressed"] = "Pressed"; 706 707 localizedStrings["Pretty print"] = "Pretty print"; -
trunk/Source/WebInspectorUI/UserInterface/Base/Main.js
r225487 r225587 2251 2251 }; 2252 2252 2253 WI.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 2253 2275 WI.createGoToArrowButton = function() 2254 2276 { -
trunk/Source/WebInspectorUI/UserInterface/Controllers/CanvasManager.js
r225488 r225587 56 56 get recordingCanvas() { return this._recordingCanvas; } 57 57 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 58 87 startRecording(canvas, singleFrame) 59 88 { … … 272 301 CanvasAdded: "canvas-manager-canvas-was-added", 273 302 CanvasRemoved: "canvas-manager-canvas-was-removed", 303 RecordingImported: "canvas-manager-recording-imported", 274 304 RecordingStarted: "canvas-manager-recording-started", 275 305 RecordingProgress: "canvas-manager-recording-progress", -
trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js
r225487 r225587 35 35 descriptionElement.textContent = WI.UIString("Waiting for canvas contexts created by script or CSS."); 36 36 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 37 44 super(representedObject, WI.CanvasContentView, contentPlaceholder); 38 45 -
trunk/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.js
r225488 r225587 55 55 this.contentBrowser.navigationBar.insertNavigationItem(new WI.DividerNavigationItem, 3); 56 56 57 this.navigationSidebarPanel.addEventListener(WI.RecordingNavigationSidebarPanel.Event.Import, this._navigationSidebarImport, this);58 57 this.navigationSidebarPanel.contentTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._navigationSidebarTreeOutlineSelectionChanged, this); 59 58 } … … 142 141 WI.canvasManager.addEventListener(WI.CanvasManager.Event.CanvasAdded, this._handleCanvasAdded, this); 143 142 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); 145 145 WI.RecordingContentView.addEventListener(WI.RecordingContentView.Event.RecordingActionIndexChanged, this._recordingActionIndexChanged, this); 146 146 … … 234 234 } 235 235 236 _recording Stopped(event)236 _recordingImportedOrStopped(event) 237 237 { 238 238 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; 243 241 244 242 this._recordingAdded(recording, { 245 243 suppressShowRecording: event.data.fromConsole, 246 244 }); 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);265 245 } 266 246 -
trunk/Source/WebInspectorUI/UserInterface/Views/Main.css
r225487 r225587 190 190 } 191 191 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 192 215 .message-text-view.error { 193 216 color: var(--error-text-color); -
trunk/Source/WebInspectorUI/UserInterface/Views/RecordingNavigationSidebarPanel.js
r225488 r225587 135 135 this._importButton = importNavigationItem.element.appendChild(document.createElement("button")); 136 136 this._importButton.textContent = importLabel; 137 this._importButton.addEventListener("click", this._importNavigationItemClicked.bind(this));137 this._importButton.addEventListener("click", () => { WI.canvasManager.importRecording(); }); 138 138 139 139 const exportLabel = WI.UIString("Export"); … … 172 172 // Private 173 173 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 192 174 _exportNavigationItemClicked(event) 193 175 {
Note: See TracChangeset
for help on using the changeset viewer.