Commit 911cf4b7 authored by lushnikov's avatar lushnikov Committed by Commit bot

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}
parent 3f6873e9
......@@ -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);
}
}
};
......
......@@ -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);
}
}
......
......@@ -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);
}
/**
......
......@@ -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);
}
/**
......
......@@ -349,13 +349,12 @@ 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))
this._updateTabElements();
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;
......
......@@ -73,7 +73,7 @@
}
.tabbed-pane-header-tab-icon {
margin-right: 2px;
margin-right: 6px;
}
.tabbed-pane-header-tab {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment