Bug 984051 - Make reload action more prominent when first opening the network panel. r=vporof

browser/devtools/netmonitor/netmonitor-controller.js

@@ -93,7 +93,8 @@ const ACTIVITY_TYPE = {
   // Forcing the target to reload with cache enabled or disabled.
   RELOAD: {
     WITH_CACHE_ENABLED: 1,
-    WITH_CACHE_DISABLED: 2
+    WITH_CACHE_DISABLED: 2,
+    WITH_CACHE_DEFAULT: 3
   },
 
   // Enabling or disabling the cache without triggering a reload.
@@ -355,7 +356,9 @@ let NetMonitorController = {
       let navigationFinished = waitForNavigation();
       return reconfigureTab(aOptions).then(() => navigationFinished);
     }
-
+    if (aType == ACTIVITY_TYPE.RELOAD.WITH_CACHE_DEFAULT) {
+      return reconfigureTabAndWaitForNavigation({}).then(standBy);
+    }
     if (aType == ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED) {
       this._currentActivity = ACTIVITY_TYPE.ENABLE_CACHE;
       this._target.once("will-navigate", () => this._currentActivity = aType);

browser/devtools/netmonitor/netmonitor-view.js

@@ -229,6 +229,10 @@ let NetMonitorView = {
     });
   },
 
+  reloadPage: function() {
+    NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_DEFAULT);
+  },
+
   /**
    * Lazily initializes and returns a promise for a Editor instance.
    *
@@ -362,6 +366,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
     this._onContextCopyImageAsDataUriCommand = this.copyImageAsDataUri.bind(this);
     this._onContextResendCommand = this.cloneSelectedRequest.bind(this);
     this._onContextPerfCommand = () => NetMonitorView.toggleFrontendMode();
+    this._onReloadCommand = () => NetMonitorView.reloadPage();
 
     this.sendCustomRequestEvent = this.sendCustomRequest.bind(this);
     this.closeCustomRequestEvent = this.closeCustomRequest.bind(this);
@@ -379,6 +384,8 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
   },
 
   _onConnect: function() {
+    $("#requests-menu-reload-notice-button").addEventListener("command", this._onReloadCommand, false);
+
     if (NetMonitorController.supportsCustomRequest) {
       $("#request-menu-context-resend").addEventListener("command", this._onContextResendCommand, false);
       $("#custom-request-send-button").addEventListener("click", this.sendCustomRequestEvent, false);
@@ -426,6 +433,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
     $("#request-menu-context-resend").removeEventListener("command", this._onContextResendCommand, false);
     $("#request-menu-context-perf").removeEventListener("command", this._onContextPerfCommand, false);
 
+    $("#requests-menu-reload-notice-button").removeEventListener("command", this._onReloadCommand, false);
     $("#requests-menu-perf-notice-button").removeEventListener("command", this._onContextPerfCommand, false);
     $("#requests-menu-network-summary-button").removeEventListener("command", this._onContextPerfCommand, false);
     $("#requests-menu-network-summary-label").removeEventListener("click", this._onContextPerfCommand, false);

browser/devtools/netmonitor/netmonitor.xul

@@ -135,15 +135,19 @@
 
           <vbox id="requests-menu-empty-notice"
                 class="side-menu-widget-empty-text">
+            <hbox id="notice-reload-message" align="center">
+              <label value="&netmonitorUI.reloadNotice1;"/>
+              <button id="requests-menu-reload-notice-button"
+                      class="devtools-toolbarbutton"
+                      label="&netmonitorUI.reloadNotice2;"/>
+              <label value="&netmonitorUI.reloadNotice3;"/>
+            </hbox>
             <hbox id="notice-perf-message" align="center">
               <label value="&netmonitorUI.perfNotice1;"/>
               <button id="requests-menu-perf-notice-button"
                       class="devtools-toolbarbutton"/>
               <label value="&netmonitorUI.perfNotice2;"/>
             </hbox>
-            <hbox id="notice-reload-message" align="center">
-              <label value="&netmonitorUI.emptyNotice3;"/>
-            </hbox>
           </vbox>
 
           <vbox id="requests-menu-contents" flex="1" context="network-request-popup">

browser/devtools/netmonitor/test/browser.ini

@@ -75,6 +75,7 @@ support-files =
 [browser_net_post-data-03.js]
 [browser_net_prefs-and-l10n.js]
 [browser_net_prefs-reload.js]
+[browser_net_reload-button.js]
 [browser_net_req-resp-bodies.js]
 [browser_net_resend.js]
 [browser_net_simple-init.js]

browser/devtools/netmonitor/test/browser_net_reload-button.js

@@ -0,0 +1,34 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests if the empty-requests reload button works.
+ */
+
+function test() {
+  let monitor, reqMenu;
+  initNetMonitor(SINGLE_GET_URL).then(([aTab, aDebuggee, aMonitor]) => {
+    info("Starting test... ");
+
+    monitor = aMonitor;
+    let { document, NetMonitorView } = aMonitor.panelWin;
+    let { RequestsMenu } = NetMonitorView;
+    reqMenu = RequestsMenu;
+
+    is(reqMenu.itemCount, 0,
+      "The request menu should empty before reloading");
+
+    let button = document.querySelector("#requests-menu-reload-notice-button");
+    button.click();
+  })
+  .then(() => {
+    return waitForNetworkEvents(monitor, 2);
+  })
+  .then(() => {
+    is(reqMenu.itemCount, 2,
+      "The request menu should have two items after reloading");
+  })
+  .then(() => {
+    return teardown(monitor).then(finish);
+  });
+}

browser/locales/en-US/chrome/browser/devtools/netmonitor.dtd

@@ -16,9 +16,11 @@
 <!ENTITY netmonitorUI.perfNotice1         "• Click on the">
 <!ENTITY netmonitorUI.perfNotice2         "button to start performance analysis.">
 
-<!-- LOCALIZATION NOTE (netmonitorUI.emptyNotice3): This is the label displayed
-  -  in the network table when empty. -->
-<!ENTITY netmonitorUI.emptyNotice3        "• Perform a request or reload the page to see detailed information about network activity.">
+<!-- LOCALIZATION NOTE (netmonitorUI.reload1/2/3): These are the labels displayed
+  -  in the network table when empty to start logging network requests. -->
+<!ENTITY netmonitorUI.reloadNotice1       "• Perform a request or">
+<!ENTITY netmonitorUI.reloadNotice2       "Reload">
+<!ENTITY netmonitorUI.reloadNotice3       "the page to see detailed information about network activity.">
 
 <!-- LOCALIZATION NOTE (netmonitorUI.toolbar.status2): This is the label displayed
   -  in the network table toolbar, above the "status" column. -->

browser/themes/shared/devtools/netmonitor.inc.css

@@ -17,9 +17,13 @@
   color: #585959; /* Grey foreground text */
 }
 
+#notice-perf-message {
+  margin-top: 2px;
+}
+
 #requests-menu-perf-notice-button {
   min-width: 30px;
-  min-height: 28px;
+  min-height: 26px;
   margin: 0;
   list-style-image: url(profiler-stopwatch.svg);
 }
@@ -28,6 +32,11 @@
   display: none;
 }
 
+#requests-menu-reload-notice-button {
+  min-height: 26px;
+  margin: 0;
+}
+
 %filter substitution
 %define table_itemDarkStartBorder rgba(0,0,0,0.2)
 %define table_itemDarkEndBorder rgba(128,128,128,0.15)