squash 'resources/unpacked/devtools' changes from 64149c4..dc60498

dc60498 [DevTools] Migrate toolbar to use WI.Icon.
cd02903 DevTools: introduce WI.Icon to handle icons with ease
ab7defa [DevTools] observe target in BreakpointManager
68ac4b2 Revert of DevTools: isolate settings of custom devtoools front-end. (patchset #3 id:40001 of https://codereview.chromium.org/2474563002/ )
c5e6d7e DevTools: clicking console messages with traces should check for links
8e97a26 [Devtools] Renamed Network's Timeline to Waterfall
a3a38a5 DevTools: Button for 'Add a folder to workspace'
13a9f03 DevTools: add per-frame grouping into aggregated timeline details
c33ab00 DevTools: teach automapping to deal with network resources with file:// urls
6bf561f DevTools: eliminate ToolbarButton.setState method; cleanup toolbar.css
336360e [Devtools] Added padding to hover area in network timeline

git-subtree-dir: resources/unpacked/devtools
git-subtree-split: dc60498

BUILD.gn

@@ -235,7 +235,6 @@ devtools_ui_js_files = [
   "front_end/ui/slider.css",
   "front_end/ui/softContextMenu.css",
   "front_end/ui/smallBubble.css",
-  "front_end/ui/smallIcon.css",
   "front_end/ui/splitWidget.css",
   "front_end/ui/toolbar.css",
   "front_end/ui/tooltip.css",
@@ -260,6 +259,7 @@ devtools_ui_js_files = [
   "front_end/ui/FilterBar.js",
   "front_end/ui/ForwardedInputEventHandler.js",
   "front_end/ui/HistoryInput.js",
+  "front_end/ui/Icon.js",
   "front_end/ui/Infobar.js",
   "front_end/ui/InplaceEditor.js",
   "front_end/ui/TextEditor.js",
@@ -546,7 +546,7 @@ devtools_network_js_files = [
   "front_end/network/NetworkOverview.js",
   "front_end/network/NetworkPanel.js",
   "front_end/network/NetworkTimeCalculator.js",
-  "front_end/network/NetworkTimelineColumn.js",
+  "front_end/network/NetworkWaterfallColumn.js",
   "front_end/network/RequestCookiesView.js",
   "front_end/network/RequestHeadersView.js",
   "front_end/network/RequestHTMLView.js",

front_end/Images/src/optimize_png.hashes

@@ -5,7 +5,7 @@
     "errorWave.svg": "e183fa242a22ed4784a92f6becbc2c45",
     "smallIcons.svg": "7a7dd9505c1a7bb1e133a26ca786af01",
     "settingsListRemove.svg": "ce9e7c5c5cdaef28e6ee51d9478d5485",
-    "toolbarButtonGlyphs.svg": "43320d6c741ec184091c08fe36c401e1",
+    "toolbarButtonGlyphs.svg": "4f6393dd90967d814a6eed60d51b3530",
     "breakpoint.svg": "69cd92d807259c022791112809b97799",
     "search.svg": "fc990dd3836aec510d7ca1f36c2a3142"
-}
+}

front_end/Images/src/svg2png.hashes

@@ -4,7 +4,7 @@
     "errorWave.svg": "e183fa242a22ed4784a92f6becbc2c45",
     "smallIcons.svg": "7a7dd9505c1a7bb1e133a26ca786af01",
     "settingsListRemove.svg": "ce9e7c5c5cdaef28e6ee51d9478d5485",
-    "toolbarButtonGlyphs.svg": "43320d6c741ec184091c08fe36c401e1",
+    "toolbarButtonGlyphs.svg": "4f6393dd90967d814a6eed60d51b3530",
     "breakpoint.svg": "69cd92d807259c022791112809b97799",
     "search.svg": "fc990dd3836aec510d7ca1f36c2a3142"
 }

front_end/accessibility/AccessibilityNodeView.js

@@ -164,7 +164,7 @@ WebInspector.AXNodePropertyTreeElement = class extends TreeElement {
    */
   static createExclamationMark(tooltip) {
     var exclamationElement = createElement('label', 'dt-icon-label');
-    exclamationElement.type = 'warning-icon';
+    exclamationElement.type = 'smallicon-warning';
     exclamationElement.title = tooltip;
     return exclamationElement;
   }

front_end/animation/AnimationTimeline.js

@@ -112,12 +112,12 @@ WebInspector.AnimationTimeline = class extends WebInspector.VBox {
   _createHeader() {
     var toolbarContainer = this.contentElement.createChild('div', 'animation-timeline-toolbar-container');
     var topToolbar = new WebInspector.Toolbar('animation-timeline-toolbar', toolbarContainer);
-    var clearButton = new WebInspector.ToolbarButton(WebInspector.UIString('Clear all'), 'clear-toolbar-item');
+    var clearButton = new WebInspector.ToolbarButton(WebInspector.UIString('Clear all'), 'largeicon-clear');
     clearButton.addEventListener('click', this._reset.bind(this));
     topToolbar.appendToolbarItem(clearButton);
     topToolbar.appendSeparator();
 
-    this._pauseButton = new WebInspector.ToolbarToggle(WebInspector.UIString('Pause all'), 'pause-toolbar-item');
+    this._pauseButton = new WebInspector.ToolbarToggle(WebInspector.UIString('Pause all'), 'largeicon-pause', 'largeicon-resume');
     this._pauseButton.addEventListener('click', this._togglePauseAll.bind(this));
     topToolbar.appendToolbarItem(this._pauseButton);
 
@@ -147,8 +147,9 @@ WebInspector.AnimationTimeline = class extends WebInspector.VBox {
 
     var toolbar = new WebInspector.Toolbar('animation-controls-toolbar', controls);
     this._controlButton =
-        new WebInspector.ToolbarButton(WebInspector.UIString('Replay timeline'), 'animation-control-toolbar-item');
-    this._controlButton.setState(WebInspector.AnimationTimeline._ControlState.Replay);
+        new WebInspector.ToolbarToggle(WebInspector.UIString('Replay timeline'), 'largeicon-replay-animation');
+    this._controlState = WebInspector.AnimationTimeline._ControlState.Replay;
+    this._controlButton.setToggled(true);
     this._controlButton.addEventListener('click', this._controlButtonToggle.bind(this));
     toolbar.appendToolbarItem(this._controlButton);
 
@@ -239,9 +240,9 @@ WebInspector.AnimationTimeline = class extends WebInspector.VBox {
   }
 
   _controlButtonToggle() {
-    if (this._controlButton.state() === WebInspector.AnimationTimeline._ControlState.Play)
+    if (this._controlState === WebInspector.AnimationTimeline._ControlState.Play)
       this._togglePause(false);
-    else if (this._controlButton.state() === WebInspector.AnimationTimeline._ControlState.Replay)
+    else if (this._controlState === WebInspector.AnimationTimeline._ControlState.Replay)
       this._replay();
     else
       this._togglePause(true);
@@ -250,14 +251,20 @@ WebInspector.AnimationTimeline = class extends WebInspector.VBox {
   _updateControlButton() {
     this._controlButton.setEnabled(!!this._selectedGroup);
     if (this._selectedGroup && this._selectedGroup.paused()) {
-      this._controlButton.setState(WebInspector.AnimationTimeline._ControlState.Play);
+      this._controlState = WebInspector.AnimationTimeline._ControlState.Play;
+      this._controlButton.setToggled(true);
       this._controlButton.setTitle(WebInspector.UIString('Play timeline'));
+      this._controlButton.setGlyph('largeicon-play-animation');
     } else if (!this._scrubberPlayer || this._scrubberPlayer.currentTime >= this.duration()) {
-      this._controlButton.setState(WebInspector.AnimationTimeline._ControlState.Replay);
+      this._controlState = WebInspector.AnimationTimeline._ControlState.Replay;
+      this._controlButton.setToggled(true);
       this._controlButton.setTitle(WebInspector.UIString('Replay timeline'));
+      this._controlButton.setGlyph('largeicon-replay-animation');
     } else {
-      this._controlButton.setState(WebInspector.AnimationTimeline._ControlState.Pause);
+      this._controlState = WebInspector.AnimationTimeline._ControlState.Pause;
+      this._controlButton.setToggled(false);
       this._controlButton.setTitle(WebInspector.UIString('Pause timeline'));
+      this._controlButton.setGlyph('largeicon-pause-animation');
     }
   }
 

front_end/audits/AuditResultView.js

@@ -77,8 +77,14 @@ WebInspector.AuditCategoryResultPane = class extends WebInspector.SimpleView {
 
     var titleFragment = createDocumentFragment();
     if (severity) {
-      var severityElement = createElement('div');
-      severityElement.classList.add('severity', severity);
+      var severityElement = WebInspector.Icon.create();
+      if (severity === WebInspector.AuditRule.Severity.Info)
+        severityElement.setIconType('smallicon-green-ball');
+      else if (severity === WebInspector.AuditRule.Severity.Warning)
+        severityElement.setIconType('smallicon-orange-ball');
+      else if (severity === WebInspector.AuditRule.Severity.Severe)
+        severityElement.setIconType('smallicon-red-ball');
+      severityElement.classList.add('severity');
       titleFragment.appendChild(severityElement);
     }
     titleFragment.createTextChild(title);

front_end/audits/auditResultTree.css

@@ -5,37 +5,13 @@
  */
 
 .severity {
-    background-image: url(Images/smallIcons.png);
-    background-size: 190px 30px;
-    display: inline-block;
-    width: 11px;
-    height: 11px;
-    position: relative;
-    top: 1px;
     margin-right: 4px;
 }
 
 li {
     -webkit-user-select: text;
 }
 
-@media (-webkit-min-device-pixel-ratio: 1.1) {
-.severity {
-    background-image: url(Images/smallIcons_2x.png);
-}
-} /* media */
-
-.severity.severe {
-    background-position: -120px 0;
-}
-
-.severity.warning {
-    background-position: -160px 0;
-}
-
-.severity.info {
-    background-position: -140px 0;
-}
 .audit-result {
     font-weight: bold;
 }

front_end/bindings/BreakpointManager.js

@@ -57,6 +57,8 @@ WebInspector.BreakpointManager = class extends WebInspector.Object {
     this._workspace.addEventListener(WebInspector.Workspace.Events.UISourceCodeAdded, this._uiSourceCodeAdded, this);
     this._workspace.addEventListener(
         WebInspector.Workspace.Events.UISourceCodeRemoved, this._uiSourceCodeRemoved, this);
+
+    targetManager.observeTargets(this, WebInspector.Target.Capability.JS);
   }
 
   /**

front_end/components/DOMBreakpointsSidebarPane.js

@@ -52,9 +52,10 @@ WebInspector.DOMBreakpointsSidebarPane = class extends WebInspector.BreakpointsS
   static createBreakpointHitMessage(details) {
     var messageWrapper = createElement('span');
     var mainElement = messageWrapper.createChild('div', 'status-main');
+    mainElement.appendChild(WebInspector.Icon.create('smallicon-info', 'status-icon'));
     var auxData = /** @type {!Object} */ (details.auxData);
-    mainElement.textContent =
-        String.sprintf('Paused on %s', WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeNouns[auxData['type']]);
+    mainElement.appendChild(createTextNode(
+        String.sprintf('Paused on %s', WebInspector.DOMBreakpointsSidebarPane.BreakpointTypeNouns[auxData['type']])));
 
     var domModel = WebInspector.DOMModel.fromTarget(details.target());
     if (domModel) {

front_end/components/DockController.js

@@ -39,7 +39,7 @@ WebInspector.DockController = class extends WebInspector.Object {
     super();
     this._canDock = canDock;
 
-    this._closeButton = new WebInspector.ToolbarButton(WebInspector.UIString('Close'), 'delete-toolbar-item');
+    this._closeButton = new WebInspector.ToolbarButton(WebInspector.UIString('Close'), 'largeicon-delete');
     this._closeButton.addEventListener('click', InspectorFrontendHost.closeWindow.bind(InspectorFrontendHost));
 
     if (!canDock) {

front_end/components/ObjectPopoverHelper.js

@@ -98,7 +98,7 @@ WebInspector.ObjectPopoverHelper = class extends WebInspector.PopoverHelper {
       if (rawLocation && Runtime.experiments.isEnabled('continueToFirstInvocation')) {
         var sectionToolbar = new WebInspector.Toolbar('function-location-step-into', linkContainer);
         var stepInto = new WebInspector.ToolbarButton(
-            WebInspector.UIString('Continue to first invocation'), 'step-in-toolbar-item');
+            WebInspector.UIString('Continue to first invocation'), 'largeicon-step-in');
         stepInto.addEventListener('click', () => rawLocation.continueToLocation());
         sectionToolbar.appendToolbarItem(stepInto);
       }

front_end/components/Spectrum.js

@@ -57,7 +57,7 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
 
     var toolbar = new WebInspector.Toolbar('spectrum-eye-dropper', this.contentElement);
     this._colorPickerButton =
-        new WebInspector.ToolbarToggle(WebInspector.UIString('Toggle color picker'), 'eyedropper-toolbar-item');
+        new WebInspector.ToolbarToggle(WebInspector.UIString('Toggle color picker'), 'largeicon-eyedropper');
     this._colorPickerButton.setToggled(true);
     this._colorPickerButton.addEventListener('click', this._toggleColorPicker.bind(this, undefined));
     toolbar.appendToolbarItem(this._colorPickerButton);
@@ -123,14 +123,14 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
     paletteSwitcher.addEventListener('click', this._togglePalettePanel.bind(this, true));
 
     this._deleteIconToolbar = new WebInspector.Toolbar('delete-color-toolbar');
-    this._deleteButton = new WebInspector.ToolbarButton('', 'garbage-collect-toolbar-item');
+    this._deleteButton = new WebInspector.ToolbarButton('', 'largeicon-trash-bin');
     this._deleteIconToolbar.appendToolbarItem(this._deleteButton);
 
     var overlay = this.contentElement.createChild('div', 'spectrum-overlay fill');
     overlay.addEventListener('click', this._togglePalettePanel.bind(this, false));
 
     this._addColorToolbar = new WebInspector.Toolbar('add-color-toolbar');
-    var addColorButton = new WebInspector.ToolbarButton(WebInspector.UIString('Add to palette'), 'add-toolbar-item');
+    var addColorButton = new WebInspector.ToolbarButton(WebInspector.UIString('Add to palette'), 'largeicon-add');
     addColorButton.addEventListener('click', this._addColorToCustomPalette.bind(this));
     this._addColorToolbar.appendToolbarItem(addColorButton);
 
@@ -193,7 +193,7 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
     var title = this._palettePanel.createChild('div', 'palette-title');
     title.textContent = WebInspector.UIString('Color Palettes');
     var toolbar = new WebInspector.Toolbar('', this._palettePanel);
-    var closeButton = new WebInspector.ToolbarButton('Return to color picker', 'delete-toolbar-item');
+    var closeButton = new WebInspector.ToolbarButton('Return to color picker', 'largeicon-delete');
     closeButton.addEventListener('click', this._togglePalettePanel.bind(this, false));
     toolbar.appendToolbarItem(closeButton);
     for (var palette of this._palettes.values())

front_end/console/ConsoleViewMessage.js

@@ -331,7 +331,8 @@ WebInspector.ConsoleViewMessage = class {
      * @param {?Event} event
      */
     function toggleStackTrace(event) {
-      if (event.target.hasSelection())
+      var linkClicked = event.target && event.target.enclosingNodeOrSelfWithNodeName('a');
+      if (event.target.hasSelection() || linkClicked)
         return;
       expandStackTrace(stackTraceElement.classList.contains('hidden'));
       event.consume();

front_end/console/module.json

@@ -37,7 +37,7 @@
             "category": "Console",
             "actionId": "console.clear",
             "title": "Clear console",
-            "iconClass": "clear-toolbar-item",
+            "iconClass": "largeicon-clear",
             "className": "WebInspector.ConsoleView.ActionDelegate",
             "bindings": [
                 {

front_end/elements/ElementStatePaneWidget.js

@@ -107,7 +107,8 @@ WebInspector.ElementStatePaneWidget = class extends WebInspector.Widget {
 WebInspector.ElementStatePaneWidget.ButtonProvider = class {
   constructor() {
     this._button = new WebInspector.ToolbarToggle(
-        WebInspector.UIString('Toggle Element State'), '', WebInspector.UIString(':hov'));
+        WebInspector.UIString('Toggle Element State'), '');
+    this._button.setText(WebInspector.UIString(':hov'));
     this._button.addEventListener('click', this._clicked, this);
     this._button.element.classList.add('monospace');
     this._view = new WebInspector.ElementStatePaneWidget();

front_end/elements/EventListenersWidget.js

@@ -47,7 +47,7 @@ WebInspector.EventListenersWidget = class extends WebInspector.ThrottledWidget {
     this._showFrameworkListenersSetting.addChangeListener(this._showFrameworkListenersChanged.bind(this));
     this._eventListenersView = new WebInspector.EventListenersView(this.element, this.update.bind(this));
 
-    var refreshButton = new WebInspector.ToolbarButton(WebInspector.UIString('Refresh'), 'refresh-toolbar-item');
+    var refreshButton = new WebInspector.ToolbarButton(WebInspector.UIString('Refresh'), 'largeicon-refresh');
     refreshButton.addEventListener('click', this.update.bind(this));
     this._toolbarItems.push(refreshButton);
     this._toolbarItems.push(new WebInspector.ToolbarCheckbox(

front_end/elements/InspectElementModeController.js

@@ -34,7 +34,7 @@ WebInspector.InspectElementModeController = class {
     this._toggleSearchAction = WebInspector.actionRegistry.action('elements.toggle-element-search');
     if (Runtime.experiments.isEnabled('layoutEditor')) {
       this._layoutEditorButton =
-          new WebInspector.ToolbarToggle(WebInspector.UIString('Toggle Layout Editor'), 'layout-editor-toolbar-item');
+          new WebInspector.ToolbarToggle(WebInspector.UIString('Toggle Layout Editor'), 'largeicon-layout-editor');
       this._layoutEditorButton.addEventListener('click', this._toggleLayoutEditor, this);
     }