Backed out changeset b5a1430d99b5 (bug 1403530)for failing clipboard …

…on devtools/client/netmonitor/src/har/test/browser_net_har_copy_all_as_har.js on a CLOSED TREE

devtools/client/jar.mn

@@ -300,7 +300,6 @@ devtools.jar:
     content/netmonitor/src/assets/styles/Toolbar.css (netmonitor/src/assets/styles/Toolbar.css)
     content/netmonitor/src/assets/styles/variables.css (netmonitor/src/assets/styles/variables.css)
     content/netmonitor/src/assets/icons/play.svg (netmonitor/src/assets/icons/play.svg)
-    content/netmonitor/src/assets/icons/drop-down.svg (netmonitor/src/assets/icons/drop-down.svg)
     content/netmonitor/index.html (netmonitor/index.html)
     content/netmonitor/initializer.js (netmonitor/initializer.js)
 

devtools/client/locales/en-US/netmonitor.properties

@@ -943,6 +943,7 @@ netmonitor.context.saveImageAs=Save Image As
 # for the Copy Image As Data URI menu item displayed in the context menu for a request
 netmonitor.context.saveImageAs.accesskey=V
 
+
 # LOCALIZATION NOTE (netmonitor.context.copyAllAsHar): This is the label displayed
 # on the context menu that copies all as HAR format
 netmonitor.context.copyAllAsHar=Copy All As HAR
@@ -1062,7 +1063,3 @@ netmonitor.status.tooltip.cachedworker = %1$S %2$S (cached, service worker)
 # rendered within the Network panel when *.har file(s) are dragged
 # over the content.
 netmonitor.label.dropHarFiles = Drop HAR files here
-
-# LOCALIZATION NOTE (netmonitor.label.har): This is a label used
-# as a tooltip for toolbar drop-down button with HAR actions
-netmonitor.label.har=HAR Export/Import

devtools/client/netmonitor/src/assets/styles/Toolbar.css

@@ -61,26 +61,6 @@
   background-image: var(--play-icon-url);
 }
 
-/* HAR button in the toolbar has a background only when hovered. */
-.devtools-button.devtools-har-button:not(:hover) {
-  background: transparent;
-}
-
-/* HAR button has label and icon, so make sure they don't overlap */
-.devtools-button.devtools-har-button::before {
-  content: "HAR";
-  width: 21px;
-  padding-right: 12px;
-  background-image: var(--drop-down-icon-url);
-  background-position: right center;
-  fill: var(--theme-toolbar-photon-icon-color);
-}
-
-/* Make sure the HAR button label is vertically centered on Mac */
-:root[platform="mac"] .devtools-button.devtools-har-button::before {
-  height: 14px;
-}
-
 .devtools-checkbox {
   position: relative;
   vertical-align: middle;

devtools/client/netmonitor/src/assets/styles/variables.css

@@ -40,7 +40,6 @@
   /* Icons */
   --play-icon-url: url("chrome://devtools/content/netmonitor/src/assets/icons/play.svg");
   --pause-icon-url: url("chrome://devtools/skin/images/pause.svg");
-  --drop-down-icon-url: url("chrome://devtools/content/netmonitor/src/assets/icons/drop-down.svg");
 
   /* HTTP status codes */
   --status-code-color-1xx: var(--theme-highlight-blue);

devtools/client/netmonitor/src/components/Toolbar.js

@@ -13,7 +13,6 @@ const { connect } = require("devtools/client/shared/redux/visibility-handler-con
 const Actions = require("../actions/index");
 const { FILTER_SEARCH_DELAY, FILTER_TAGS } = require("../constants");
 const {
-  getDisplayedRequests,
   getRecordingState,
   getTypeFilteredRequests,
 } = require("../selectors/index");
@@ -31,7 +30,6 @@ const SEARCH_KEY_SHORTCUT = L10N.getStr("netmonitor.toolbar.filterFreetext.key")
 const SEARCH_PLACE_HOLDER = L10N.getStr("netmonitor.toolbar.filterFreetext.label");
 const TOOLBAR_CLEAR = L10N.getStr("netmonitor.toolbar.clear");
 const TOOLBAR_TOGGLE_RECORDING = L10N.getStr("netmonitor.toolbar.toggleRecording");
-const TOOLBAR_HAR_BUTTON = L10N.getStr("netmonitor.label.har");
 
 // Preferences
 const DEVTOOLS_DISABLE_CACHE_PREF = "devtools.cache.disabled";
@@ -45,10 +43,6 @@ const ENABLE_PERSISTENT_LOGS_LABEL =
 const DISABLE_CACHE_TOOLTIP = L10N.getStr("netmonitor.toolbar.disableCache.tooltip");
 const DISABLE_CACHE_LABEL = L10N.getStr("netmonitor.toolbar.disableCache.label");
 
-// Menu
-loader.lazyRequireGetter(this, "showMenu", "devtools/client/netmonitor/src/utils/menu", true);
-loader.lazyRequireGetter(this, "HarMenuUtils", "devtools/client/netmonitor/src/har/har-menu-utils", true);
-
 /**
  * Network monitor toolbar component.
  *
@@ -62,8 +56,6 @@ class Toolbar extends Component {
       toggleRecording: PropTypes.func.isRequired,
       recording: PropTypes.bool.isRequired,
       clearRequests: PropTypes.func.isRequired,
-      // List of currently displayed requests (i.e. filtered & sorted).
-      displayedRequests: PropTypes.array.isRequired,
       requestFilterTypes: PropTypes.object.isRequired,
       setRequestFilterText: PropTypes.func.isRequired,
       enablePersistentLogs: PropTypes.func.isRequired,
@@ -258,47 +250,6 @@ class Toolbar extends Component {
     );
   }
 
-  /**
-   * Render drop down button with HAR related actions.
-   */
-  renderHarButton() {
-    return button({
-      id: "devtools-har-button",
-      title: TOOLBAR_HAR_BUTTON,
-      className: "devtools-button devtools-har-button",
-      onClick: evt => {
-        this.showHarMenu(evt.target);
-      },
-    });
-  }
-
-  showHarMenu(menuButton) {
-    const {
-      connector,
-      displayedRequests
-    } = this.props;
-
-    let menuItems = [];
-
-    menuItems.push({
-      id: "request-list-context-save-all-as-har",
-      label: L10N.getStr("netmonitor.context.saveAllAsHar"),
-      accesskey: L10N.getStr("netmonitor.context.saveAllAsHar.accesskey"),
-      disabled: !displayedRequests.length,
-      click: () => HarMenuUtils.saveAllAsHar(displayedRequests, connector),
-    });
-
-    menuItems.push({
-      id: "request-list-context-copy-all-as-har",
-      label: L10N.getStr("netmonitor.context.copyAllAsHar"),
-      accesskey: L10N.getStr("netmonitor.context.copyAllAsHar.accesskey"),
-      disabled: !displayedRequests.length,
-      click: () => HarMenuUtils.copyAllAsHar(displayedRequests, connector),
-    });
-
-    showMenu(menuItems, { button: menuButton });
-  }
-
   /**
    * Render filter Searchbox.
    */
@@ -347,8 +298,6 @@ class Toolbar extends Component {
           this.renderSeparator(),
           this.renderPersistlogCheckbox(persistentLogsEnabled, togglePersistentLogs),
           this.renderCacheCheckbox(browserCacheDisabled, toggleBrowserCache),
-          this.renderSeparator(),
-          this.renderHarButton(),
         )
       )
     ) : (
@@ -362,8 +311,6 @@ class Toolbar extends Component {
           this.renderSeparator(),
           this.renderPersistlogCheckbox(persistentLogsEnabled, togglePersistentLogs),
           this.renderCacheCheckbox(browserCacheDisabled, toggleBrowserCache),
-          this.renderSeparator(),
-          this.renderHarButton(),
         ),
         span({ className: "devtools-toolbar-group devtools-toolbar-two-rows-2" },
           this.renderFilterButtons(requestFilterTypes)
@@ -376,7 +323,6 @@ class Toolbar extends Component {
 module.exports = connect(
   (state) => ({
     browserCacheDisabled: state.ui.browserCacheDisabled,
-    displayedRequests: getDisplayedRequests(state),
     filteredRequests: getTypeFilteredRequests(state),
     persistentLogsEnabled: state.ui.persistentLogsEnabled,
     recording: getRecordingState(state),

devtools/client/netmonitor/src/har/moz.build

@@ -9,7 +9,6 @@ DevToolsModules(
     'har-collector.js',
     'har-exporter.js',
     'har-importer.js',
-    'har-menu-utils.js',
     'har-utils.js',
     'toolbox-overlay.js',
 )

devtools/client/netmonitor/src/utils/menu.js

@@ -7,21 +7,11 @@
 const Menu = require("devtools/client/framework/menu");
 const MenuItem = require("devtools/client/framework/menu-item");
 
-/**
- * Helper function for opening context menu.
- *
- * @param {Array} items List of menu items.
- * @param {Object} options:
- * @property {Number} screenX coordinate of the menu on the screen
- * @property {Number} screenY coordinate of the menu on the screen
- * @property {Object} button parent used to open the menu
- */
-function showMenu(items, options) {
+function showMenu(evt, items) {
   if (items.length === 0) {
     return;
   }
 
-  // Build the menu object from provided menu items.
   let menu = new Menu();
   items.forEach((item) => {
     let menuItem = new MenuItem(item);
@@ -38,20 +28,7 @@ function showMenu(items, options) {
     menu.append(menuItem);
   });
 
-  let screenX = options.screenX;
-  let screenY = options.screenY;
-
-  // Calculate position on the screen according to
-  // the parent button if available.
-  if (options.button) {
-    const button = options.button;
-    const rect = button.getBoundingClientRect();
-    const defaultView = button.ownerDocument.defaultView;
-    screenX = rect.left + defaultView.mozInnerScreenX;
-    screenY = rect.bottom + defaultView.mozInnerScreenY;
-  }
-
-  menu.popup(screenX, screenY, { doc: window.parent.document });
+  menu.popup(evt.screenX, evt.screenY, { doc: window.parent.document });
 }
 
 module.exports = {

devtools/client/netmonitor/src/widgets/RequestListContextMenu.js

@@ -19,7 +19,7 @@ loader.lazyRequireGetter(this, "saveAs", "devtools/client/shared/file-saver", tr
 loader.lazyRequireGetter(this, "copyString", "devtools/shared/platform/clipboard", true);
 loader.lazyRequireGetter(this, "showMenu", "devtools/client/netmonitor/src/utils/menu", true);
 loader.lazyRequireGetter(this, "openRequestInTab", "devtools/client/netmonitor/src/utils/firefox/open-request-in-tab", true);
-loader.lazyRequireGetter(this, "HarMenuUtils", "devtools/client/netmonitor/src/har/har-menu-utils", true);
+loader.lazyRequireGetter(this, "HarExporter", "devtools/client/netmonitor/src/har/har-exporter", true);
 
 class RequestListContextMenu {
   constructor(props) {
@@ -45,7 +45,6 @@ class RequestListContextMenu {
       url,
     } = selectedRequest;
     let {
-      connector,
       cloneSelectedRequest,
       openStatistics,
     } = this.props;
@@ -144,8 +143,8 @@ class RequestListContextMenu {
       id: "request-list-context-copy-all-as-har",
       label: L10N.getStr("netmonitor.context.copyAllAsHar"),
       accesskey: L10N.getStr("netmonitor.context.copyAllAsHar.accesskey"),
-      visible: requests.length > 0,
-      click: () => HarMenuUtils.copyAllAsHar(requests, connector),
+      visible: requests.size > 0,
+      click: () => this.copyAllAsHar(requests),
     });
 
     menu.push({
@@ -159,8 +158,8 @@ class RequestListContextMenu {
       id: "request-list-context-save-all-as-har",
       label: L10N.getStr("netmonitor.context.saveAllAsHar"),
       accesskey: L10N.getStr("netmonitor.context.saveAllAsHar.accesskey"),
-      visible: requests.length > 0,
-      click: () => HarMenuUtils.saveAllAsHar(requests, connector),
+      visible: requests.size > 0,
+      click: () => this.saveAllAsHar(requests),
     });
 
     menu.push({
@@ -224,10 +223,7 @@ class RequestListContextMenu {
       click: () => openStatistics(true),
     });
 
-    showMenu(menu, {
-      screenX: event.screenX,
-      screenY: event.screenY,
-    });
+    showMenu(event, menu);
   }
 
   /**
@@ -398,6 +394,31 @@ class RequestListContextMenu {
 
     copyString(responseContent.content.text);
   }
+
+  /**
+   * Copy HAR from the network panel content to the clipboard.
+   */
+  copyAllAsHar(requests) {
+    return HarExporter.copy(this.getDefaultHarOptions(requests));
+  }
+
+  /**
+   * Save HAR from the network panel content to a file.
+   */
+  saveAllAsHar(requests) {
+    // This will not work in launchpad
+    // document.execCommand(‘cut’/‘copy’) was denied because it was not called from
+    // inside a short running user-generated event handler.
+    // https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Interact_with_the_clipboard
+    return HarExporter.save(this.getDefaultHarOptions(requests));
+  }
+
+  getDefaultHarOptions(requests) {
+    return {
+      connector: this.props.connector,
+      items: requests,
+    };
+  }
 }
 
 module.exports = RequestListContextMenu;

devtools/client/netmonitor/src/widgets/RequestListHeaderContextMenu.js

@@ -70,10 +70,7 @@ class RequestListHeaderContextMenu {
       click: () => this.props.resetColumns(),
     });
 
-    showMenu(menu, {
-      screenX: event.screenX,
-      screenY: event.screenY,
-    });
+    return showMenu(event, menu);
   }
 }