DevTools: teach TabbedPane.setTabIcon to accept UI.Icon instances

This patch is a preparation for a "badged icons" instead of green
checkmarks in the "persistence2" experiment.

Currently, TabbedPane.setTabIcon method accepts icon type and icon
titles. This works fine, but we'd like to pass in a more complex
objects - badged icons.

For this to work, the TabbedPane.setTabIcon has to accept general
instances of UI.Icon class.

BUG=675856
R=dgozman

Review-Url: https://codereview.chromium.org/2587293002
Cr-Commit-Position: refs/heads/master@{#439828}

third_party/WebKit/Source/devtools/front_end/main/Main.js

@@ -768,12 +768,15 @@ Main.NetworkPanelIndicator = class {
     updateVisibility();
 
     function updateVisibility() {
-      if (manager.isThrottling())
-        UI.inspectorView.setPanelIcon('network', 'smallicon-warning', Common.UIString('Network throttling is enabled'));
-      else if (blockedURLsSetting.get().length)
-        UI.inspectorView.setPanelIcon('network', 'smallicon-warning', Common.UIString('Requests may be blocked'));
-      else
-        UI.inspectorView.setPanelIcon('network', '', '');
+      var icon = null;
+      if (manager.isThrottling()) {
+        icon = UI.Icon.create('smallicon-warning');
+        icon.title = Common.UIString('Network throttling is enabled');
+      } else if (blockedURLsSetting.get().length) {
+        icon = UI.Icon.create('smallicon-warning');
+        icon.title = Common.UIString('Requests may be blocked');
+      }
+      UI.inspectorView.setPanelIcon('network', icon);
     }
   }
 };
@@ -787,11 +790,13 @@ Main.SourcesPanelIndicator = class {
     javaScriptDisabledChanged();
 
     function javaScriptDisabledChanged() {
+      var icon = null;
       var javaScriptDisabled = Common.moduleSetting('javaScriptDisabled').get();
-      if (javaScriptDisabled)
-        UI.inspectorView.setPanelIcon('sources', 'smallicon-warning', Common.UIString('JavaScript is disabled'));
-      else
-        UI.inspectorView.setPanelIcon('sources', '', '');
+      if (javaScriptDisabled) {
+        icon = UI.Icon.create('smallicon-warning');
+        icon.title = Common.UIString('JavaScript is disabled');
+      }
+      UI.inspectorView.setPanelIcon('sources', icon);
     }
   }
 };

third_party/WebKit/Source/devtools/front_end/sources/TabbedEditorContainer.js

@@ -533,17 +533,16 @@ Sources.TabbedEditorContainer = class extends Common.Object {
     if (tabId) {
       var title = this._titleForFile(uiSourceCode);
       this._tabbedPane.changeTabTitle(tabId, title);
+      var icon = null;
       if (Persistence.persistence.hasUnsavedCommittedChanges(uiSourceCode)) {
-        this._tabbedPane.setTabIcon(
-            tabId, 'smallicon-warning', Common.UIString('Changes to this file were not saved to file system.'));
+        icon = UI.Icon.create('smallicon-warning');
+        icon.title = Common.UIString('Changes to this file were not saved to file system.');
       } else if (Runtime.experiments.isEnabled('persistence2') && Persistence.persistence.binding(uiSourceCode)) {
         var binding = Persistence.persistence.binding(uiSourceCode);
-        this._tabbedPane.setTabIcon(
-            tabId, 'smallicon-green-checkmark',
-            Persistence.PersistenceUtils.tooltipForUISourceCode(binding.fileSystem));
-      } else {
-        this._tabbedPane.setTabIcon(tabId, '');
+        icon = UI.Icon.create('smallicon-green-checkmark');
+        icon.title = Persistence.PersistenceUtils.tooltipForUISourceCode(binding.fileSystem);
       }
+      this._tabbedPane.setTabIcon(tabId, icon);
     }
   }
 

third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js

@@ -291,13 +291,13 @@ Timeline.TimelinePanel = class extends UI.Panel {
 
     // Record
     if (Runtime.experiments.isEnabled('timelineLandingPage')) {
-      const newButton = new UI.ToolbarButton(
-          Common.UIString('New recording'), 'largeicon-add', Common.UIString('New'));
+      const newButton = new UI.ToolbarButton(Common.UIString('New recording'), 'largeicon-add', Common.UIString('New'));
       newButton.addEventListener(UI.ToolbarButton.Events.Click, this._clear, this);
       this._panelToolbar.appendToolbarItem(newButton);
       this._panelToolbar.appendToolbarItem(UI.Toolbar.createActionButtonForId('main.reload'));
       this._panelToolbar.appendToolbarItem(UI.Toolbar.createActionButton(this._toggleRecordAction));
-    } else if (Runtime.experiments.isEnabled('timelineRecordingPerspectives') &&
+    } else if (
+        Runtime.experiments.isEnabled('timelineRecordingPerspectives') &&
         perspectiveSetting.get() === Timeline.TimelinePanel.Perspectives.Load) {
       const reloadButton = new UI.ToolbarButton(Common.UIString('Record & Reload'), 'largeicon-refresh');
       reloadButton.addEventListener(UI.ToolbarButton.Events.Click, () => SDK.targetManager.reloadPage());
@@ -378,12 +378,13 @@ Timeline.TimelinePanel = class extends UI.Panel {
     // Checkboxes
     if (Runtime.experiments.isEnabled('timelineLandingPage')) {
       if (!this._model.isEmpty()) {
-        this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(Common.UIString('Memory'),
-            this._showMemorySetting, Common.UIString('Show memory timeline.')));
+        this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
+            Common.UIString('Memory'), this._showMemorySetting, Common.UIString('Show memory timeline.')));
         if (this._filmStripModel.frames().length) {
           this._showScreenshotsSetting.set(true);
-          this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(Common.UIString('Screenshots'),
-              this._showScreenshotsSetting, Common.UIString('Show captured screenshots.')));
+          this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
+              Common.UIString('Screenshots'), this._showScreenshotsSetting,
+              Common.UIString('Show captured screenshots.')));
         }
       }
     } else {
@@ -565,11 +566,11 @@ Timeline.TimelinePanel = class extends UI.Panel {
   _onModeChanged() {
     if (this._bulkUpdate)
       return;
-    const showMemory = Runtime.experiments.isEnabled('timelineLandingPage')
-        ? this._showMemorySetting.get() : this._captureMemorySetting.get();
-    const showScreenshots = Runtime.experiments.isEnabled('timelineLandingPage')
-        ? this._showScreenshotsSetting.get() && this._filmStripModel.frames().length
-        : this._captureFilmStripSetting.get();
+    const showMemory = Runtime.experiments.isEnabled('timelineLandingPage') ? this._showMemorySetting.get() :
+                                                                              this._captureMemorySetting.get();
+    const showScreenshots = Runtime.experiments.isEnabled('timelineLandingPage') ?
+        this._showScreenshotsSetting.get() && this._filmStripModel.frames().length :
+        this._captureFilmStripSetting.get();
     // Set up overview controls.
     this._overviewControls = [];
     this._overviewControls.push(new Timeline.TimelineEventOverviewResponsiveness(this._model, this._frameModel));
@@ -592,8 +593,8 @@ Timeline.TimelinePanel = class extends UI.Panel {
     this._addModeView(this._flameChart);
 
     if (showMemory) {
-      this._addModeView(new Timeline.MemoryCountersGraph(
-          this, this._model, [Timeline.TimelineUIUtils.visibleEventsFilter()]));
+      this._addModeView(
+          new Timeline.MemoryCountersGraph(this, this._model, [Timeline.TimelineUIUtils.visibleEventsFilter()]));
     }
     if (Runtime.experiments.isEnabled('timelineLandingPage'))
       this._flameChart.enableNetworkPane(true);
@@ -2059,10 +2060,12 @@ Timeline.CPUThrottlingManager = class extends Common.Object {
   setRate(value) {
     this._throttlingRate = value;
     this._targets.forEach(target => target.emulationAgent().setCPUThrottlingRate(value));
-    if (value !== 1)
-      UI.inspectorView.setPanelIcon('timeline', 'smallicon-warning', Common.UIString('CPU throttling is enabled'));
-    else
-      UI.inspectorView.setPanelIcon('timeline', '', '');
+    var icon = null;
+    if (value !== 1) {
+      icon = UI.Icon.create('smallicon-warning');
+      icon.title = Common.UIString('CPU throttling is enabled');
+    }
+    UI.inspectorView.setPanelIcon('timeline', icon);
   }
 
   /**

third_party/WebKit/Source/devtools/front_end/ui/InspectorView.js

@@ -169,11 +169,10 @@ UI.InspectorView = class extends UI.VBox {
 
   /**
    * @param {string} panelName
-   * @param {string} iconType
-   * @param {string=} iconTooltip
+   * @param {?UI.Icon} icon
    */
-  setPanelIcon(panelName, iconType, iconTooltip) {
-    this._tabbedPane.setTabIcon(panelName, iconType, iconTooltip);
+  setPanelIcon(panelName, icon) {
+    this._tabbedPane.setTabIcon(panelName, icon);
   }
 
   /**

third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js

@@ -349,12 +349,11 @@ UI.TabbedPane = class extends UI.VBox {
 
   /**
    * @param {string} id
-   * @param {string} iconType
-   * @param {string=} iconTooltip
+   * @param {?UI.Icon} icon
    */
-  setTabIcon(id, iconType, iconTooltip) {
+  setTabIcon(id, icon) {
     var tab = this._tabsById.get(id);
-    if (tab._setIconType(iconType, iconTooltip))
+    tab._setIcon(icon);
     this._updateTabElements();
   }
 
@@ -862,8 +861,12 @@ UI.TabbedPaneTab = class {
     this._tooltip = tooltip;
     this._view = view;
     this._shown = false;
-    /** @type {number} */ this._measuredWidth;
-    /** @type {!Element|undefined} */ this._tabElement;
+    /** @type {number} */
+    this._measuredWidth;
+    /** @type {!Element|undefined} */
+    this._tabElement;
+    /** @type {?Element} */
+    this._iconContainer = null;
   }
 
   /**
@@ -900,19 +903,13 @@ UI.TabbedPaneTab = class {
   }
 
   /**
-   * @param {string} iconType
-   * @param {string=} iconTooltip
-   * @return {boolean}
+   * @param {?UI.Icon} icon
    */
-  _setIconType(iconType, iconTooltip) {
-    if (iconType === this._iconType && iconTooltip === this._iconTooltip)
-      return false;
-    this._iconType = iconType;
-    this._iconTooltip = iconTooltip;
+  _setIcon(icon) {
+    this._icon = icon;
     if (this._tabElement)
-      this._createIconElement(this._tabElement, this._titleElement);
+      this._createIconElement(this._tabElement, this._titleElement, false);
     delete this._measuredWidth;
-    return true;
   }
 
   /**
@@ -995,19 +992,21 @@ UI.TabbedPaneTab = class {
   /**
    * @param {!Element} tabElement
    * @param {!Element} titleElement
+   * @param {boolean} measuring
    */
-  _createIconElement(tabElement, titleElement) {
-    if (tabElement.__iconElement)
+  _createIconElement(tabElement, titleElement, measuring) {
+    if (tabElement.__iconElement) {
       tabElement.__iconElement.remove();
-    if (!this._iconType)
+      tabElement.__iconElement = null;
+    }
+    if (!this._icon)
       return;
 
-    var iconElement = createElementWithClass('label', 'tabbed-pane-header-tab-icon', 'dt-icon-label');
-    iconElement.type = this._iconType;
-    if (this._iconTooltip)
-      iconElement.title = this._iconTooltip;
-    tabElement.insertBefore(iconElement, titleElement);
-    tabElement.__iconElement = iconElement;
+    var iconContainer = createElementWithClass('span', 'tabbed-pane-header-tab-icon');
+    var iconNode = measuring ? this._icon.cloneNode(true) : this._icon;
+    iconContainer.appendChild(iconNode);
+    tabElement.insertBefore(iconContainer, titleElement);
+    tabElement.__iconElement = iconContainer;
   }
 
   /**
@@ -1025,7 +1024,7 @@ UI.TabbedPaneTab = class {
     var titleElement = tabElement.createChild('span', 'tabbed-pane-header-tab-title');
     titleElement.textContent = this.title;
     titleElement.title = this.tooltip || '';
-    this._createIconElement(tabElement, titleElement);
+    this._createIconElement(tabElement, titleElement, measuring);
     if (!measuring)
       this._titleElement = titleElement;
 

third_party/WebKit/Source/devtools/front_end/ui/tabbedPane.css

@@ -73,7 +73,7 @@
 }
 
 .tabbed-pane-header-tab-icon {
-    margin-right: 2px;
+    margin-right: 6px;
 }
 
 .tabbed-pane-header-tab {