Devtools UI: Display hint when Network panel is empty

Source/devtools/front_end/network/NetworkLogView.js

Index: Source/devtools/front_end/network/NetworkLogView.js
diff --git a/Source/devtools/front_end/network/NetworkLogView.js b/Source/devtools/front_end/network/NetworkLogView.js
index dd941dc402f2ceb52e11db7ae6f45b6f6d9c9352..900b7c38be1a6cd126c3a2ba429d5011045c75b0 100644
--- a/Source/devtools/front_end/network/NetworkLogView.js
+++ b/Source/devtools/front_end/network/NetworkLogView.js
@@ -184,6 +184,7 @@ WebInspector.NetworkLogView.prototype = {
     setRecording: function(recording)
     {
         this._recording = recording;
+        this._updateSummaryBar();
     },
 
     /**
@@ -291,6 +292,33 @@ WebInspector.NetworkLogView.prototype = {
         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>}
@@ -651,6 +679,7 @@ WebInspector.NetworkLogView.prototype = {
         var requestsNumber = this._nodesByRequestId.size;
 
         if (!requestsNumber) {
+            this._showRecordingHint();
             if (this._summaryBarElement._isDisplayingWarning)
                 return;
             this._summaryBarElement._isDisplayingWarning = true;
@@ -661,6 +690,7 @@ WebInspector.NetworkLogView.prototype = {
             this._summaryBarElement.title = text;
             return;
         }
+        this._hideRecordingHint();
         delete this._summaryBarElement._isDisplayingWarning;
 
         var transferSize = 0;