Devtools UI: Display hint when Network panel is empty

Source/devtools/front_end/network/NetworkLogView.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 166 matching lines @@
     "Vary": WebInspector.UIString("Vary")
 };
 
 WebInspector.NetworkLogView.prototype = {
     /**
      * @param {boolean} recording
      */
     setRecording: function(recording)
     {
         this._recording = recording;
+        this._updateSummaryBar();
     },
 
     /**
      * @param {boolean} preserveLog
      */
     setPreserveLog: function(preserveLog)
     {
         this._preserveLog = preserveLog;
     },
 
@@ skipping 87 matching lines @@
         this._createTable();
         this._createTimelineGrid();
         this._summaryBarElement = this.element.createChild("div", "network-summary-bar");
 
         this._updateRowsSize();
 
         this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._onHidePopover.bind(this));
         this.switchViewMode(true);
     },
 
+    _showRecordingHint: function()
+    {
+        this._hideRecordingHint();
+        this._recordingHint = this.element.createChild("div", "network-status-pane fill");
+        var hintText = this._recordingHint.createChild("div", "recording-hint");
+        var reloadShortcutNode = this._recordingHint.createChild("b");
+        reloadShortcutNode.textContent = WebInspector.ShortcutsScreen.TimelinePanelShortcuts.RecordPageReload[0].name;
+
+        if (this._recording) {
+            var recordingText = hintText.createChild("span");
+            recordingText.textContent = WebInspector.UIString("Recording network activity...");

[paulirish, 2015/09/01 17:01:34]

"Recording network activity\u2026"

+            hintText.createChild("br");
+            hintText.appendChild(WebInspector.formatLocalized(WebInspector.UIString("Perform a request or hit %s to record the reload."), [reloadShortcutNode], null));
+        } else {
+            var recordNode = hintText.createChild("b");
+            recordNode.textContent = WebInspector.shortcutRegistry.shortcutTitleForAction("network.toggle-recording");
+            hintText.appendChild(WebInspector.formatLocalized(WebInspector.UIString("Record (%s) or reload (%s) to display network activity."), [recordNode, reloadShortcutNode], null));
+        }
+    },
+
+    _hideRecordingHint: function()
+    {
+        if (this._recordingHint)
+            this._recordingHint.remove();
+        delete this._recordingHint;
+    },
+
     /**
      * @override
      * @return {!Array.<!Element>}
      */
     elementsToRestoreScrollPositionsFor: function()
     {
         if (!this._dataGrid) // Not initialized yet.
             return [];
         return [this._dataGrid.scrollContainer];
     },
@@ skipping 340 matching lines @@
         this._dataGrid.sortNodes(sortingFunction);
         this._highlightNthMatchedRequestForSearch(this._updateMatchCountAndFindMatchIndex(this._currentMatchedRequestNode), false);
         this._dataGrid.markColumnAsSortedBy("timeline", selectedOption.sortOrder);
     },
 
     _updateSummaryBar: function()
     {
         var requestsNumber = this._nodesByRequestId.size;
 
         if (!requestsNumber) {
+            this._showRecordingHint();
             if (this._summaryBarElement._isDisplayingWarning)
                 return;
             this._summaryBarElement._isDisplayingWarning = true;
             this._summaryBarElement.removeChildren();
             this._summaryBarElement.createChild("label", "", "dt-icon-label").type = "warning-icon";
             var text = WebInspector.UIString("No requests captured. Reload the page to see detailed information on the network activity.");
             this._summaryBarElement.createTextChild(text);
             this._summaryBarElement.title = text;
             return;
         }
+        this._hideRecordingHint();
         delete this._summaryBarElement._isDisplayingWarning;
 
         var transferSize = 0;
         var selectedRequestsNumber = 0;
         var selectedTransferSize = 0;
         var baseTime = -1;
         var maxTime = -1;
         var nodes = this._nodesByRequestId.valuesArray();
         for (var i = 0; i < nodes.length; ++i) {
             var request = nodes[i].request();
@@ skipping 1393 matching lines @@
         return false;
     return true;
 }
 
 WebInspector.NetworkLogView.EventTypes = {
     RequestSelected: "RequestSelected",
     SearchCountUpdated: "SearchCountUpdated",
     SearchIndexUpdated: "SearchIndexUpdated",
     UpdateRequest: "UpdateRequest"
 };