Devtools UI: Show multiple shortcuts, show more shortcuts

Source/devtools/front_end/timeline/TimelinePanel.js

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel 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:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 136 matching lines @@
 
     wasShown: function()
     {
         if (!WebInspector.TimelinePanel._categoryStylesInitialized) {
             WebInspector.TimelinePanel._categoryStylesInitialized = true;
             var style = createElement("style");
             var categories = WebInspector.TimelineUIUtils.categories();
             style.textContent = Object.values(categories).map(WebInspector.TimelineUIUtils.createStyleRuleForCategory).join("\n");
             this.element.ownerDocument.head.appendChild(style);
         }
+        WebInspector.context.setFlavor(WebInspector.TimelinePanel, this);
+    },
+
+    willHide: function()
+    {
+        WebInspector.context.setFlavor(WebInspector.TimelinePanel, null);
     },
 
     /**
      * @return {number}
      */
     windowStartTime: function()
     {
         if (this._windowStartTime)
             return this._windowStartTime;
         return this._model.minimumRecordTime();
@@ skipping 129 matching lines @@
             this._recordingOptionUIControls = [];
         var checkboxItem = new WebInspector.ToolbarCheckbox(name, tooltip, setting);
         this._recordingOptionUIControls.push(checkboxItem);
         return checkboxItem;
     },
 
     _createToolbarItems: function()
     {
         this._panelToolbar = new WebInspector.Toolbar(this.element);
 
-        this.toggleTimelineButton = new WebInspector.ToolbarButton("Record timeline", "record-toolbar-item");
-        this.toggleTimelineButton.addEventListener("click", this._toggleTimelineButtonClicked, this);
+        this.toggleTimelineButton = WebInspector.ToolbarButton.createActionButton("timeline.toggle-recording");
         this._panelToolbar.appendToolbarItem(this.toggleTimelineButton);
         this._updateToggleTimelineButton(false);
 
         var clearButton = new WebInspector.ToolbarButton(WebInspector.UIString("Clear recording"), "clear-toolbar-item");
         clearButton.addEventListener("click", this._onClearButtonClick, this);
         this._panelToolbar.appendToolbarItem(clearButton);
         this._panelToolbar.appendSeparator();
 
         this._filterBar = this._createFilterBar();
         this._panelToolbar.appendToolbarItem(this._filterBar.filterButton());
@@ skipping 152 matching lines @@
         this._dropTarget.setEnabled(!this._operationInProgress);
 
         this._progressToolbarItem.setVisible(this._operationInProgress);
         this._progressToolbarItem.element.removeChildren();
         if (indicator)
             this._progressToolbarItem.element.appendChild(indicator.element);
     },
 
     _registerShortcuts: function()
     {
-        this.registerShortcuts(WebInspector.ShortcutsScreen.TimelinePanelShortcuts.StartStopRecording, this._toggleTimelineButtonClicked.bind(this));
         this.registerShortcuts(WebInspector.ShortcutsScreen.TimelinePanelShortcuts.SaveToFile, this._saveToFile.bind(this));
         this.registerShortcuts(WebInspector.ShortcutsScreen.TimelinePanelShortcuts.LoadFromFile, this._selectFileToLoad.bind(this));
         this.registerShortcuts(WebInspector.ShortcutsScreen.TimelinePanelShortcuts.JumpToPreviousFrame, this._jumpToFrame.bind(this, -1));
         this.registerShortcuts(WebInspector.ShortcutsScreen.TimelinePanelShortcuts.JumpToNextFrame, this._jumpToFrame.bind(this, 1));
     },
 
     _createFileSelector: function()
     {
         if (this._fileSelectorElement)
             this._fileSelectorElement.remove();
@@ skipping 1301 matching lines @@
     /**
      * @override
      * @param {string} value
      */
     handleQueryParam: function(value)
     {
         WebInspector.TimelinePanel.show();
         WebInspector.TimelinePanel.instance()._loadFromURL(value);
     }
 }
+
+/**
+ * @constructor
+ * @implements {WebInspector.ActionDelegate}
+ */
+WebInspector.TimelinePanel.RecordActionDelegate = function()
+{
+}
+
+WebInspector.TimelinePanel.RecordActionDelegate.prototype = {
+    /**
+     * @override
+     * @param {!WebInspector.Context} context
+     * @param {string} actionId
+     */
+    handleAction: function(context, actionId)
+    {
+        var panel = WebInspector.context.flavor(WebInspector.TimelinePanel);
+        console.assert(panel && panel instanceof WebInspector.TimelinePanel);
+        panel._toggleTimelineButtonClicked();
+    }
+}