diff --git a/BUILD.gn b/BUILD.gn
index 56925ef7ae..0e06d0fdc3 100644
--- a/BUILD.gn
+++ b/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",
diff --git a/front_end/Images/src/optimize_png.hashes b/front_end/Images/src/optimize_png.hashes
index 41371eb1c5..eace0d23da 100644
--- a/front_end/Images/src/optimize_png.hashes
+++ b/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"
-}
+}
\ No newline at end of file
diff --git a/front_end/Images/src/svg2png.hashes b/front_end/Images/src/svg2png.hashes
index b8023ab32f..62c727bbd0 100644
--- a/front_end/Images/src/svg2png.hashes
+++ b/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"
}
diff --git a/front_end/Images/src/toolbarButtonGlyphs.svg b/front_end/Images/src/toolbarButtonGlyphs.svg
index 3a4ac65338..6f2d7fb71d 100644
--- a/front_end/Images/src/toolbarButtonGlyphs.svg
+++ b/front_end/Images/src/toolbarButtonGlyphs.svg
@@ -22,12 +22,12 @@
showgrid="true"
id="namedview3397"
inkscape:zoom="2.8284271"
- inkscape:cx="247.50717"
- inkscape:cy="58.032242"
- inkscape:window-width="1435"
- inkscape:window-height="980"
- inkscape:window-x="253"
- inkscape:window-y="241"
+ inkscape:cx="174.64891"
+ inkscape:cy="78.178382"
+ inkscape:window-width="1573"
+ inkscape:window-height="1037"
+ inkscape:window-x="143"
+ inkscape:window-y="134"
inkscape:window-maximized="0"
inkscape:current-layer="svg3395"
inkscape:snap-global="true"
@@ -478,35 +478,7 @@
width="1"
x="204"
y="78"
- id="rect3639" />= 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');
}
}
diff --git a/front_end/audits/AuditResultView.js b/front_end/audits/AuditResultView.js
index 8ae0c63beb..1a72cc7587 100644
--- a/front_end/audits/AuditResultView.js
+++ b/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);
diff --git a/front_end/audits/auditResultTree.css b/front_end/audits/auditResultTree.css
index b4bc2a4e6a..e2a35901da 100644
--- a/front_end/audits/auditResultTree.css
+++ b/front_end/audits/auditResultTree.css
@@ -5,13 +5,6 @@
*/
.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;
}
@@ -19,23 +12,6 @@ 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;
}
diff --git a/front_end/bindings/BreakpointManager.js b/front_end/bindings/BreakpointManager.js
index 542d48a1f1..7545f99163 100644
--- a/front_end/bindings/BreakpointManager.js
+++ b/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);
}
/**
diff --git a/front_end/components/DOMBreakpointsSidebarPane.js b/front_end/components/DOMBreakpointsSidebarPane.js
index f1f0c66ba5..f5004d413d 100644
--- a/front_end/components/DOMBreakpointsSidebarPane.js
+++ b/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) {
diff --git a/front_end/components/DockController.js b/front_end/components/DockController.js
index 9fbf35f6ac..55a3303877 100644
--- a/front_end/components/DockController.js
+++ b/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) {
diff --git a/front_end/components/ObjectPopoverHelper.js b/front_end/components/ObjectPopoverHelper.js
index 67edc6f8c7..72c1fb868c 100644
--- a/front_end/components/ObjectPopoverHelper.js
+++ b/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);
}
diff --git a/front_end/components/Spectrum.js b/front_end/components/Spectrum.js
index c39d66bde0..e5c522163b 100644
--- a/front_end/components/Spectrum.js
+++ b/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())
diff --git a/front_end/console/ConsoleViewMessage.js b/front_end/console/ConsoleViewMessage.js
index dda60e39a0..8bd7d6152e 100644
--- a/front_end/console/ConsoleViewMessage.js
+++ b/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();
diff --git a/front_end/console/module.json b/front_end/console/module.json
index b3d74cc6f0..9584a90f69 100644
--- a/front_end/console/module.json
+++ b/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": [
{
diff --git a/front_end/elements/ElementStatePaneWidget.js b/front_end/elements/ElementStatePaneWidget.js
index 0e316000f1..8b3d3ee81f 100644
--- a/front_end/elements/ElementStatePaneWidget.js
+++ b/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();
diff --git a/front_end/elements/EventListenersWidget.js b/front_end/elements/EventListenersWidget.js
index e38074e4b4..397cd5b624 100644
--- a/front_end/elements/EventListenersWidget.js
+++ b/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(
diff --git a/front_end/elements/InspectElementModeController.js b/front_end/elements/InspectElementModeController.js
index 18ce449028..f9d3b2b86f 100644
--- a/front_end/elements/InspectElementModeController.js
+++ b/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);
}
diff --git a/front_end/elements/StylesSidebarPane.js b/front_end/elements/StylesSidebarPane.js
index 4f0782843a..6490ca1c38 100644
--- a/front_end/elements/StylesSidebarPane.js
+++ b/front_end/elements/StylesSidebarPane.js
@@ -61,7 +61,7 @@ WebInspector.StylesSidebarPane = class extends WebInspector.ElementsSidebarPane
var exclamationElement = createElement('label', 'dt-icon-label');
exclamationElement.className = 'exclamation-mark';
if (!WebInspector.StylesSidebarPane.ignoreErrorsForProperty(property))
- exclamationElement.type = 'warning-icon';
+ exclamationElement.type = 'smallicon-warning';
exclamationElement.title = WebInspector.cssMetadata().isCSSPropertyName(property.name) ?
WebInspector.UIString('Invalid property value') :
WebInspector.UIString('Unknown property name');
@@ -734,29 +734,29 @@ WebInspector.StylePropertiesSection = class {
var items = [];
var textShadowButton =
- new WebInspector.ToolbarButton(WebInspector.UIString('Add text-shadow'), 'text-shadow-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Add text-shadow'), 'largeicon-text-shadow');
textShadowButton.addEventListener('click', this._onInsertShadowPropertyClick.bind(this, 'text-shadow'));
items.push(textShadowButton);
var boxShadowButton =
- new WebInspector.ToolbarButton(WebInspector.UIString('Add box-shadow'), 'box-shadow-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Add box-shadow'), 'largeicon-box-shadow');
boxShadowButton.addEventListener('click', this._onInsertShadowPropertyClick.bind(this, 'box-shadow'));
items.push(boxShadowButton);
var colorButton =
- new WebInspector.ToolbarButton(WebInspector.UIString('Add color'), 'foreground-color-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Add color'), 'largeicon-foreground-color');
colorButton.addEventListener('click', this._onInsertColorPropertyClick.bind(this));
items.push(colorButton);
var backgroundButton =
- new WebInspector.ToolbarButton(WebInspector.UIString('Add background-color'), 'background-color-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Add background-color'), 'largeicon-background-color');
backgroundButton.addEventListener('click', this._onInsertBackgroundColorPropertyClick.bind(this));
items.push(backgroundButton);
var newRuleButton = null;
if (this._style.parentRule) {
newRuleButton =
- new WebInspector.ToolbarButton(WebInspector.UIString('Insert Style Rule Below'), 'add-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Insert Style Rule Below'), 'largeicon-add');
newRuleButton.addEventListener('click', this._onNewRuleClick.bind(this));
items.push(newRuleButton);
}
@@ -765,7 +765,7 @@ WebInspector.StylePropertiesSection = class {
for (var i = 0; i < items.length; ++i)
sectionToolbar.appendToolbarItem(items[i]);
- var menuButton = new WebInspector.ToolbarButton(WebInspector.UIString('More tools\u2026'), 'menu-toolbar-item');
+ var menuButton = new WebInspector.ToolbarButton(WebInspector.UIString('More tools\u2026'), 'largeicon-menu');
sectionToolbar.appendToolbarItem(menuButton);
setItemsVisibility.call(this, items, false);
sectionToolbar.element.addEventListener('mouseenter', setItemsVisibility.bind(this, items, true));
@@ -3040,9 +3040,11 @@ WebInspector.StylesSidebarPropertyRenderer = class {
*/
WebInspector.StylesSidebarPane.ButtonProvider = class {
constructor() {
- this._button = new WebInspector.ToolbarButton(WebInspector.UIString('New Style Rule'), 'add-toolbar-item');
+ this._button = new WebInspector.ToolbarButton(WebInspector.UIString('New Style Rule'), 'largeicon-add');
this._button.addEventListener('click', this._clicked, this);
- this._button.element.createChild('div', 'long-click-glyph toolbar-button-theme');
+ var longclickTriangle = WebInspector.Icon.create('largeicon-longclick-triangle', 'long-click-glyph');
+ this._button.element.appendChild(longclickTriangle);
+
new WebInspector.LongClickController(this._button.element, this._longClicked.bind(this));
WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, onNodeChanged.bind(this));
onNodeChanged.call(this);
diff --git a/front_end/elements/module.json b/front_end/elements/module.json
index d3956d23d9..79370c13e7 100644
--- a/front_end/elements/module.json
+++ b/front_end/elements/module.json
@@ -150,7 +150,7 @@
"actionId": "elements.toggle-element-search",
"className": "WebInspector.InspectElementModeController.ToggleSearchActionDelegate",
"title": "Select an element in the page to inspect it",
- "iconClass": "node-search-toolbar-item",
+ "iconClass": "largeicon-node-search",
"bindings": [
{
"platform": "windows,linux",
diff --git a/front_end/emulation/DeviceModeToolbar.js b/front_end/emulation/DeviceModeToolbar.js
index 9bc119f1e2..6a448b3b4e 100644
--- a/front_end/emulation/DeviceModeToolbar.js
+++ b/front_end/emulation/DeviceModeToolbar.js
@@ -169,7 +169,7 @@ WebInspector.DeviceModeToolbar = class {
_fillModeToolbar(toolbar) {
toolbar.appendToolbarItem(
this._wrapToolbarItem(createElementWithClass('div', 'device-mode-empty-toolbar-element')));
- this._modeButton = new WebInspector.ToolbarButton('', 'rotate-screen-toolbar-item');
+ this._modeButton = new WebInspector.ToolbarButton('', 'largeicon-rotate-screen');
this._modeButton.addEventListener('click', this._modeMenuClicked, this);
toolbar.appendToolbarItem(this._modeButton);
}
diff --git a/front_end/emulation/module.json b/front_end/emulation/module.json
index 0ba8c592e5..4cc10e5276 100644
--- a/front_end/emulation/module.json
+++ b/front_end/emulation/module.json
@@ -13,7 +13,7 @@
"className": "WebInspector.DeviceModeWrapper.ActionDelegate",
"condition": "can_dock",
"title": "Toggle device toolbar",
- "iconClass": "phone-toolbar-item",
+ "iconClass": "largeicon-phone",
"bindings": [
{
"platform": "windows,linux",
diff --git a/front_end/layer_viewer/TransformController.js b/front_end/layer_viewer/TransformController.js
index 4243f1c972..60434d68c6 100644
--- a/front_end/layer_viewer/TransformController.js
+++ b/front_end/layer_viewer/TransformController.js
@@ -32,12 +32,12 @@ WebInspector.TransformController = class extends WebInspector.Object {
/** @type {!Object} */
this._modeButtons = {};
if (!disableRotate) {
- var panModeButton = new WebInspector.ToolbarToggle(WebInspector.UIString('Pan mode (X)'), 'pan-toolbar-item');
+ var panModeButton = new WebInspector.ToolbarToggle(WebInspector.UIString('Pan mode (X)'), 'largeicon-pan');
panModeButton.addEventListener('click', this._setMode.bind(this, WebInspector.TransformController.Modes.Pan));
this._modeButtons[WebInspector.TransformController.Modes.Pan] = panModeButton;
this._controlPanelToolbar.appendToolbarItem(panModeButton);
var rotateModeButton =
- new WebInspector.ToolbarToggle(WebInspector.UIString('Rotate mode (V)'), 'rotate-toolbar-item');
+ new WebInspector.ToolbarToggle(WebInspector.UIString('Rotate mode (V)'), 'largeicon-rotate');
rotateModeButton.addEventListener(
'click', this._setMode.bind(this, WebInspector.TransformController.Modes.Rotate));
this._modeButtons[WebInspector.TransformController.Modes.Rotate] = rotateModeButton;
@@ -46,7 +46,7 @@ WebInspector.TransformController = class extends WebInspector.Object {
this._setMode(WebInspector.TransformController.Modes.Pan);
var resetButton =
- new WebInspector.ToolbarButton(WebInspector.UIString('Reset transform (0)'), 'center-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Reset transform (0)'), 'largeicon-center');
resetButton.addEventListener('click', this.resetAndNotify.bind(this, undefined));
this._controlPanelToolbar.appendToolbarItem(resetButton);
diff --git a/front_end/main/Main.js b/front_end/main/Main.js
index f0e01cc730..8d8eb897fb 100644
--- a/front_end/main/Main.js
+++ b/front_end/main/Main.js
@@ -55,18 +55,7 @@ WebInspector.Main = class {
if (InspectorFrontendHost.isUnderTest())
self.runtime.useTestBase();
Runtime.setPlatform(WebInspector.platform());
- this._preferencesProvider().getPreferences(this._gotPreferences.bind(this));
- }
-
- /**
- * @return {!InspectorFrontendHostAPI}
- */
- _preferencesProvider() {
- if (this._preferencesProviderInstance)
- return this._preferencesProviderInstance;
- var isCustomFrontend = window.location.toString().startsWith('chrome-devtools://devtools/custom/');
- this._preferencesProviderInstance = isCustomFrontend ? new WebInspector.InspectorFrontendHostStub() : InspectorFrontendHost;
- return this._preferencesProviderInstance;
+ InspectorFrontendHost.getPreferences(this._gotPreferences.bind(this));
}
/**
@@ -84,10 +73,9 @@ WebInspector.Main = class {
*/
_createSettings(prefs) {
this._initializeExperiments(prefs);
- var preferencesProvider = this._preferencesProvider();
WebInspector.settings = new WebInspector.Settings(new WebInspector.SettingsStorage(
- prefs, preferencesProvider.setPreference.bind(preferencesProvider), preferencesProvider.removePreference.bind(preferencesProvider),
- preferencesProvider.clearPreferences.bind(preferencesProvider)));
+ prefs, InspectorFrontendHost.setPreference, InspectorFrontendHost.removePreference,
+ InspectorFrontendHost.clearPreferences));
if (!InspectorFrontendHost.isUnderTest())
new WebInspector.VersionController().updateVersion();
@@ -661,9 +649,9 @@ WebInspector.Main.WarningErrorCounter = class {
this._toolbarItem = new WebInspector.ToolbarItem(this._counter);
var shadowRoot = WebInspector.createShadowRootWithCoreStyles(this._counter, 'main/errorWarningCounter.css');
- this._errors = this._createItem(shadowRoot, 'error-icon');
- this._revokedErrors = this._createItem(shadowRoot, 'revokedError-icon');
- this._warnings = this._createItem(shadowRoot, 'warning-icon');
+ this._errors = this._createItem(shadowRoot, 'smallicon-error');
+ this._revokedErrors = this._createItem(shadowRoot, 'smallicon-revoked-error');
+ this._warnings = this._createItem(shadowRoot, 'smallicon-warning');
this._titles = [];
WebInspector.multitargetConsoleModel.addEventListener(
@@ -745,7 +733,7 @@ WebInspector.Main.WarningErrorCounter = class {
WebInspector.Main.MainMenuItem = class {
constructor() {
this._item =
- new WebInspector.ToolbarButton(WebInspector.UIString('Customize and control DevTools'), 'menu-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Customize and control DevTools'), 'largeicon-menu');
this._item.addEventListener('mousedown', this._mouseDown, this);
}
@@ -776,9 +764,9 @@ WebInspector.Main.MainMenuItem = class {
var dockItemToolbar = new WebInspector.Toolbar('', dockItemElement);
dockItemToolbar.makeBlueOnHover();
var undock = new WebInspector.ToolbarToggle(
- WebInspector.UIString('Undock into separate window'), 'dock-toolbar-item-undock');
- var bottom = new WebInspector.ToolbarToggle(WebInspector.UIString('Dock to bottom'), 'dock-toolbar-item-bottom');
- var right = new WebInspector.ToolbarToggle(WebInspector.UIString('Dock to right'), 'dock-toolbar-item-right');
+ WebInspector.UIString('Undock into separate window'), 'largeicon-undock');
+ var bottom = new WebInspector.ToolbarToggle(WebInspector.UIString('Dock to bottom'), 'largeicon-dock-to-bottom');
+ var right = new WebInspector.ToolbarToggle(WebInspector.UIString('Dock to right'), 'largeicon-dock-to-right');
undock.addEventListener('mouseup', setDockSide.bind(null, WebInspector.DockController.State.Undocked));
bottom.addEventListener('mouseup', setDockSide.bind(null, WebInspector.DockController.State.DockedToBottom));
right.addEventListener('mouseup', setDockSide.bind(null, WebInspector.DockController.State.DockedToRight));
@@ -838,10 +826,10 @@ WebInspector.NetworkPanelIndicator = class {
function updateVisibility() {
if (manager.isThrottling()) {
WebInspector.inspectorView.setPanelIcon(
- 'network', 'warning-icon', WebInspector.UIString('Network throttling is enabled'));
+ 'network', 'smallicon-warning', WebInspector.UIString('Network throttling is enabled'));
} else if (blockedURLsSetting.get().length) {
WebInspector.inspectorView.setPanelIcon(
- 'network', 'warning-icon', WebInspector.UIString('Requests may be blocked'));
+ 'network', 'smallicon-warning', WebInspector.UIString('Requests may be blocked'));
} else {
WebInspector.inspectorView.setPanelIcon('network', '', '');
}
@@ -861,7 +849,7 @@ WebInspector.SourcesPanelIndicator = class {
var javaScriptDisabled = WebInspector.moduleSetting('javaScriptDisabled').get();
if (javaScriptDisabled) {
WebInspector.inspectorView.setPanelIcon(
- 'sources', 'warning-icon', WebInspector.UIString('JavaScript is disabled'));
+ 'sources', 'smallicon-warning', WebInspector.UIString('JavaScript is disabled'));
} else {
WebInspector.inspectorView.setPanelIcon('sources', '', '');
}
diff --git a/front_end/network/BlockedURLsPane.js b/front_end/network/BlockedURLsPane.js
index 3a7e950b87..690b95a645 100644
--- a/front_end/network/BlockedURLsPane.js
+++ b/front_end/network/BlockedURLsPane.js
@@ -17,10 +17,10 @@ WebInspector.BlockedURLsPane = class extends WebInspector.VBox {
this._toolbar = new WebInspector.Toolbar('', this.contentElement);
this._toolbar.element.addEventListener('click', (e) => e.consume());
- var addButton = new WebInspector.ToolbarButton(WebInspector.UIString('Add pattern'), 'add-toolbar-item');
+ var addButton = new WebInspector.ToolbarButton(WebInspector.UIString('Add pattern'), 'largeicon-add');
addButton.addEventListener('click', this._addButtonClicked.bind(this));
this._toolbar.appendToolbarItem(addButton);
- var clearButton = new WebInspector.ToolbarButton(WebInspector.UIString('Remove all'), 'clear-toolbar-item');
+ var clearButton = new WebInspector.ToolbarButton(WebInspector.UIString('Remove all'), 'largeicon-clear');
clearButton.addEventListener('click', this._removeAll.bind(this));
this._toolbar.appendToolbarItem(clearButton);
diff --git a/front_end/network/NetworkLogViewColumns.js b/front_end/network/NetworkLogViewColumns.js
index 6035d31a7e..07ae7c6e76 100644
--- a/front_end/network/NetworkLogViewColumns.js
+++ b/front_end/network/NetworkLogViewColumns.js
@@ -29,8 +29,8 @@ WebInspector.NetworkLogViewColumns = class {
/** @type {!Array.} */
this._columns = [];
- this._timelineRequestsAreStale = false;
- this._timelineScrollerWidthIsStale = true;
+ this._waterfallRequestsAreStale = false;
+ this._waterfallScrollerWidthIsStale = true;
/** @type {!WebInspector.Linkifier} */
this._popupLinkifier = new WebInspector.Linkifier();
@@ -41,7 +41,7 @@ WebInspector.NetworkLogViewColumns = class {
this._calculatorsMap.set(WebInspector.NetworkLogViewColumns._calculatorTypes.Duration, durationCalculator);
this._setupDataGrid();
- this._setupTimeline();
+ this._setupWaterfall();
}
/**
@@ -105,49 +105,49 @@ WebInspector.NetworkLogViewColumns = class {
this._dataGrid.addEventListener(WebInspector.DataGrid.Events.SortingChanged, this._sortHandler, this);
this._dataGrid.setHeaderContextMenuCallback(this._innerHeaderContextMenu.bind(this));
- this._activeTimelineSortId = WebInspector.NetworkLogViewColumns.TimelineSortIds.StartTime;
+ this._activeWaterfallSortId = WebInspector.NetworkLogViewColumns.WaterfallSortIds.StartTime;
this._dataGrid.markColumnAsSortedBy(
WebInspector.NetworkLogViewColumns._initialSortColumn, WebInspector.DataGrid.Order.Ascending);
- this._splitWidget = new WebInspector.SplitWidget(true, true, 'networkPanelSplitViewTimeline', 200);
+ this._splitWidget = new WebInspector.SplitWidget(true, true, 'networkPanelSplitViewWaterfall', 200);
var widget = this._dataGrid.asWidget();
widget.setMinimumSize(150, 0);
this._splitWidget.setMainWidget(widget);
}
- _setupTimeline() {
- this._timelineColumn =
- new WebInspector.NetworkTimelineColumn(this._networkLogView.rowHeight(), this._networkLogView.calculator());
+ _setupWaterfall() {
+ this._waterfallColumn =
+ new WebInspector.NetworkWaterfallColumn(this._networkLogView.rowHeight(), this._networkLogView.calculator());
- this._timelineColumn.element.addEventListener('contextmenu', handleContextMenu.bind(this));
- this._timelineColumn.element.addEventListener('mousewheel', this._onMouseWheel.bind(this, false), {passive: true});
+ this._waterfallColumn.element.addEventListener('contextmenu', handleContextMenu.bind(this));
+ this._waterfallColumn.element.addEventListener('mousewheel', this._onMouseWheel.bind(this, false), {passive: true});
this._dataGridScroller.addEventListener('mousewheel', this._onMouseWheel.bind(this, true), true);
- this._timelineColumn.element.addEventListener(
+ this._waterfallColumn.element.addEventListener(
'mousemove',
event => this._networkLogView.setHoveredRequest(
- this._timelineColumn.getRequestFromPoint(event.offsetX, event.offsetY + event.target.offsetTop),
+ this._waterfallColumn.getRequestFromPoint(event.offsetX, event.offsetY + event.target.offsetTop),
event.shiftKey),
true);
- this._timelineColumn.element.addEventListener(
+ this._waterfallColumn.element.addEventListener(
'mouseleave', this._networkLogView.setHoveredRequest.bind(this._networkLogView, null, false), true);
- this._timelineScroller = this._timelineColumn.contentElement.createChild('div', 'network-timeline-v-scroll');
- this._timelineScroller.addEventListener('scroll', this._syncScrollers.bind(this), {passive: true});
- this._timelineScrollerContent = this._timelineScroller.createChild('div', 'network-timeline-v-scroll-content');
+ this._waterfallScroller = this._waterfallColumn.contentElement.createChild('div', 'network-waterfall-v-scroll');
+ this._waterfallScroller.addEventListener('scroll', this._syncScrollers.bind(this), {passive: true});
+ this._waterfallScrollerContent = this._waterfallScroller.createChild('div', 'network-waterfall-v-scroll-content');
this._dataGrid.addEventListener(WebInspector.DataGrid.Events.PaddingChanged, () => {
- this._timelineScrollerWidthIsStale = true;
+ this._waterfallScrollerWidthIsStale = true;
this._syncScrollers();
});
this._dataGrid.addEventListener(
- WebInspector.ViewportDataGrid.Events.ViewportCalculated, this._redrawTimelineColumn.bind(this));
+ WebInspector.ViewportDataGrid.Events.ViewportCalculated, this._redrawWaterfallColumn.bind(this));
- this._createTimelineHeader();
- this._timelineColumn.contentElement.classList.add('network-timeline-view');
+ this._createWaterfallHeader();
+ this._waterfallColumn.contentElement.classList.add('network-waterfall-view');
- this._timelineColumn.setMinimumSize(100, 0);
- this._splitWidget.setSidebarWidget(this._timelineColumn);
+ this._waterfallColumn.setMinimumSize(100, 0);
+ this._splitWidget.setSidebarWidget(this._waterfallColumn);
this.switchViewMode(false);
@@ -156,7 +156,7 @@ WebInspector.NetworkLogViewColumns = class {
* @this {WebInspector.NetworkLogViewColumns}
*/
function handleContextMenu(event) {
- var request = this._timelineColumn.getRequestFromPoint(event.offsetX, event.offsetY);
+ var request = this._waterfallColumn.getRequestFromPoint(event.offsetX, event.offsetY);
if (!request)
return;
var contextMenu = new WebInspector.ContextMenu(event);
@@ -175,41 +175,41 @@ WebInspector.NetworkLogViewColumns = class {
this._activeScroller.scrollTop -= event.wheelDeltaY;
this._syncScrollers();
this._networkLogView.setHoveredRequest(
- this._timelineColumn.getRequestFromPoint(event.offsetX, event.offsetY), event.shiftKey);
+ this._waterfallColumn.getRequestFromPoint(event.offsetX, event.offsetY), event.shiftKey);
}
_syncScrollers() {
- if (!this._timelineColumn.isShowing())
+ if (!this._waterfallColumn.isShowing())
return;
- this._timelineScrollerContent.style.height = this._dataGridScroller.scrollHeight + 'px';
+ this._waterfallScrollerContent.style.height = this._dataGridScroller.scrollHeight + 'px';
this._updateScrollerWidthIfNeeded();
- this._dataGridScroller.scrollTop = this._timelineScroller.scrollTop;
+ this._dataGridScroller.scrollTop = this._waterfallScroller.scrollTop;
}
_updateScrollerWidthIfNeeded() {
- if (this._timelineScrollerWidthIsStale) {
- this._timelineScrollerWidthIsStale = false;
- this._timelineColumn.setRightPadding(
- this._timelineScroller.offsetWidth - this._timelineScrollerContent.offsetWidth);
+ if (this._waterfallScrollerWidthIsStale) {
+ this._waterfallScrollerWidthIsStale = false;
+ this._waterfallColumn.setRightPadding(
+ this._waterfallScroller.offsetWidth - this._waterfallScrollerContent.offsetWidth);
}
}
- _redrawTimelineColumn() {
- if (!this._timelineRequestsAreStale) {
+ _redrawWaterfallColumn() {
+ if (!this._waterfallRequestsAreStale) {
this._updateScrollerWidthIfNeeded();
- this._timelineColumn.update(
+ this._waterfallColumn.update(
this._activeScroller.scrollTop, this._eventDividersShown ? this._eventDividers : undefined);
return;
}
var currentNode = this._dataGrid.rootNode();
- /** @type {!WebInspector.NetworkTimelineColumn.RequestData} */
+ /** @type {!WebInspector.NetworkWaterfallColumn.RequestData} */
var requestData = {requests: [], navigationRequest: null};
while (currentNode = currentNode.traverseNextNode(true)) {
if (currentNode.isNavigationRequest())
requestData.navigationRequest = currentNode.request();
requestData.requests.push(currentNode.request());
}
- this._timelineColumn.update(this._activeScroller.scrollTop, this._eventDividers, requestData);
+ this._waterfallColumn.update(this._activeScroller.scrollTop, this._eventDividers, requestData);
}
/**
@@ -217,27 +217,27 @@ WebInspector.NetworkLogViewColumns = class {
* @param {boolean} highlightInitiatorChain
*/
setHoveredRequest(request, highlightInitiatorChain) {
- this._timelineColumn.setHoveredRequest(request, highlightInitiatorChain);
+ this._waterfallColumn.setHoveredRequest(request, highlightInitiatorChain);
}
- _createTimelineHeader() {
- this._timelineHeaderElement = this._timelineColumn.contentElement.createChild('div', 'network-timeline-header');
- this._timelineHeaderElement.addEventListener('click', timelineHeaderClicked.bind(this));
- this._timelineHeaderElement.addEventListener(
+ _createWaterfallHeader() {
+ this._waterfallHeaderElement = this._waterfallColumn.contentElement.createChild('div', 'network-waterfall-header');
+ this._waterfallHeaderElement.addEventListener('click', waterfallHeaderClicked.bind(this));
+ this._waterfallHeaderElement.addEventListener(
'contextmenu', event => this._innerHeaderContextMenu(new WebInspector.ContextMenu(event)));
- var innerElement = this._timelineHeaderElement.createChild('div');
+ var innerElement = this._waterfallHeaderElement.createChild('div');
innerElement.textContent = WebInspector.UIString('Waterfall');
- this._timelineColumnSortIcon = this._timelineHeaderElement.createChild('div', 'sort-order-icon-container')
+ this._waterfallColumnSortIcon = this._waterfallHeaderElement.createChild('div', 'sort-order-icon-container')
.createChild('div', 'sort-order-icon');
/**
* @this {WebInspector.NetworkLogViewColumns}
*/
- function timelineHeaderClicked() {
+ function waterfallHeaderClicked() {
var sortOrders = WebInspector.DataGrid.Order;
var sortOrder =
this._dataGrid.sortOrder() === sortOrders.Ascending ? sortOrders.Descending : sortOrders.Ascending;
- this._dataGrid.markColumnAsSortedBy('timeline', sortOrder);
+ this._dataGrid.markColumnAsSortedBy('waterfall', sortOrder);
this._sortHandler();
}
}
@@ -246,11 +246,11 @@ WebInspector.NetworkLogViewColumns = class {
* @param {!WebInspector.NetworkTimeCalculator} x
*/
setCalculator(x) {
- this._timelineColumn.setCalculator(x);
+ this._waterfallColumn.setCalculator(x);
}
dataChanged() {
- this._timelineRequestsAreStale = true;
+ this._waterfallRequestsAreStale = true;
}
_updateRowsSize() {
@@ -258,11 +258,11 @@ WebInspector.NetworkLogViewColumns = class {
this._dataGrid.element.classList.toggle('small', !largeRows);
this._dataGrid.scheduleUpdate();
- this._timelineScrollerWidthIsStale = true;
- this._timelineColumn.setRowHeight(this._networkLogView.rowHeight());
- this._timelineScroller.classList.toggle('small', !largeRows);
- this._timelineHeaderElement.classList.toggle('small', !largeRows);
- this._timelineColumn.setHeaderHeight(this._timelineScroller.offsetTop);
+ this._waterfallScrollerWidthIsStale = true;
+ this._waterfallColumn.setRowHeight(this._networkLogView.rowHeight());
+ this._waterfallScroller.classList.toggle('small', !largeRows);
+ this._waterfallHeaderElement.classList.toggle('small', !largeRows);
+ this._waterfallColumn.setHeaderHeight(this._waterfallScroller.offsetTop);
}
/**
@@ -286,17 +286,17 @@ WebInspector.NetworkLogViewColumns = class {
_sortHandler() {
var columnId = this._dataGrid.sortColumnId();
this._networkLogView.removeAllNodeHighlights();
- if (columnId === 'timeline') {
- this._timelineColumnSortIcon.classList.remove('sort-ascending', 'sort-descending');
+ if (columnId === 'waterfall') {
+ this._waterfallColumnSortIcon.classList.remove('sort-ascending', 'sort-descending');
if (this._dataGrid.sortOrder() === WebInspector.DataGrid.Order.Ascending)
- this._timelineColumnSortIcon.classList.add('sort-ascending');
+ this._waterfallColumnSortIcon.classList.add('sort-ascending');
else
- this._timelineColumnSortIcon.classList.add('sort-descending');
+ this._waterfallColumnSortIcon.classList.add('sort-descending');
- this._timelineRequestsAreStale = true;
+ this._waterfallRequestsAreStale = true;
var sortFunction =
- WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, this._activeTimelineSortId);
+ WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, this._activeWaterfallSortId);
this._dataGrid.sortNodes(sortFunction, !this._dataGrid.isSortOrderAscending());
return;
}
@@ -334,9 +334,9 @@ WebInspector.NetworkLogViewColumns = class {
if (this._dataGrid.selectedNode)
this._dataGrid.selectedNode.selected = false;
this._splitWidget.showBoth();
- this._activeScroller = this._timelineScroller;
- this._timelineScroller.scrollTop = this._dataGridScroller.scrollTop;
- this._dataGrid.setScrollContainer(this._timelineScroller);
+ this._activeScroller = this._waterfallScroller;
+ this._waterfallScroller.scrollTop = this._dataGridScroller.scrollTop;
+ this._dataGrid.setScrollContainer(this._waterfallScroller);
} else {
this._networkLogView.removeAllNodeHighlights();
this._splitWidget.hideSidebar();
@@ -419,39 +419,39 @@ WebInspector.NetworkLogViewColumns = class {
contextMenu.appendSeparator();
- var timelineSortIds = WebInspector.NetworkLogViewColumns.TimelineSortIds;
- var timelineSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIString('Waterfall'));
- timelineSubMenu.appendCheckboxItem(
- WebInspector.UIString('Start Time'), setTimelineMode.bind(this, timelineSortIds.StartTime),
- this._activeTimelineSortId === timelineSortIds.StartTime);
- timelineSubMenu.appendCheckboxItem(
- WebInspector.UIString('Response Time'), setTimelineMode.bind(this, timelineSortIds.ResponseTime),
- this._activeTimelineSortId === timelineSortIds.ResponseTime);
- timelineSubMenu.appendCheckboxItem(
- WebInspector.UIString('End Time'), setTimelineMode.bind(this, timelineSortIds.EndTime),
- this._activeTimelineSortId === timelineSortIds.EndTime);
- timelineSubMenu.appendCheckboxItem(
- WebInspector.UIString('Total Duration'), setTimelineMode.bind(this, timelineSortIds.Duration),
- this._activeTimelineSortId === timelineSortIds.Duration);
- timelineSubMenu.appendCheckboxItem(
- WebInspector.UIString('Latency'), setTimelineMode.bind(this, timelineSortIds.Latency),
- this._activeTimelineSortId === timelineSortIds.Latency);
+ var waterfallSortIds = WebInspector.NetworkLogViewColumns.WaterfallSortIds;
+ var waterfallSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIString('Waterfall'));
+ waterfallSubMenu.appendCheckboxItem(
+ WebInspector.UIString('Start Time'), setWaterfallMode.bind(this, waterfallSortIds.StartTime),
+ this._activeWaterfallSortId === waterfallSortIds.StartTime);
+ waterfallSubMenu.appendCheckboxItem(
+ WebInspector.UIString('Response Time'), setWaterfallMode.bind(this, waterfallSortIds.ResponseTime),
+ this._activeWaterfallSortId === waterfallSortIds.ResponseTime);
+ waterfallSubMenu.appendCheckboxItem(
+ WebInspector.UIString('End Time'), setWaterfallMode.bind(this, waterfallSortIds.EndTime),
+ this._activeWaterfallSortId === waterfallSortIds.EndTime);
+ waterfallSubMenu.appendCheckboxItem(
+ WebInspector.UIString('Total Duration'), setWaterfallMode.bind(this, waterfallSortIds.Duration),
+ this._activeWaterfallSortId === waterfallSortIds.Duration);
+ waterfallSubMenu.appendCheckboxItem(
+ WebInspector.UIString('Latency'), setWaterfallMode.bind(this, waterfallSortIds.Latency),
+ this._activeWaterfallSortId === waterfallSortIds.Latency);
contextMenu.show();
/**
- * @param {!WebInspector.NetworkLogViewColumns.TimelineSortIds} sortId
+ * @param {!WebInspector.NetworkLogViewColumns.WaterfallSortIds} sortId
* @this {WebInspector.NetworkLogViewColumns}
*/
- function setTimelineMode(sortId) {
+ function setWaterfallMode(sortId) {
var calculator = this._calculatorsMap.get(WebInspector.NetworkLogViewColumns._calculatorTypes.Time);
- var timelineSortIds = WebInspector.NetworkLogViewColumns.TimelineSortIds;
- if (sortId === timelineSortIds.Duration || sortId === timelineSortIds.Latency)
+ var waterfallSortIds = WebInspector.NetworkLogViewColumns.WaterfallSortIds;
+ if (sortId === waterfallSortIds.Duration || sortId === waterfallSortIds.Latency)
calculator = this._calculatorsMap.get(WebInspector.NetworkLogViewColumns._calculatorTypes.Duration);
this._networkLogView.setCalculator(calculator);
- this._activeTimelineSortId = sortId;
- this._dataGrid.markColumnAsSortedBy('timeline', WebInspector.DataGrid.Order.Ascending);
+ this._activeWaterfallSortId = sortId;
+ this._dataGrid.markColumnAsSortedBy('waterfall', WebInspector.DataGrid.Order.Ascending);
this._sortHandler();
}
}
@@ -599,12 +599,12 @@ WebInspector.NetworkLogViewColumns = class {
hideEventDividers() {
this._eventDividersShown = true;
- this._redrawTimelineColumn();
+ this._redrawWaterfallColumn();
}
showEventDividers() {
this._eventDividersShown = false;
- this._redrawTimelineColumn();
+ this._redrawWaterfallColumn();
}
/**
@@ -612,16 +612,16 @@ WebInspector.NetworkLogViewColumns = class {
*/
selectFilmStripFrame(time) {
this._eventDividers.set(WebInspector.NetworkLogViewColumns._filmStripDividerColor, [time]);
- this._redrawTimelineColumn();
+ this._redrawWaterfallColumn();
}
clearFilmStripFrame() {
this._eventDividers.delete(WebInspector.NetworkLogViewColumns._filmStripDividerColor);
- this._redrawTimelineColumn();
+ this._redrawWaterfallColumn();
}
};
-WebInspector.NetworkLogViewColumns._initialSortColumn = 'timeline';
+WebInspector.NetworkLogViewColumns._initialSortColumn = 'waterfall';
/**
* @typedef {{
@@ -819,7 +819,7 @@ WebInspector.NetworkLogViewColumns._defaultColumns = [
sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'vary')
},
// This header is a placeholder to let datagrid know that it can be sorted by this column, but never shown.
- {id: 'timeline', title: '', visible: false, hideable: false}
+ {id: 'waterfall', title: '', visible: false, hideable: false}
];
WebInspector.NetworkLogViewColumns._filmStripDividerColor = '#fccc49';
@@ -827,7 +827,7 @@ WebInspector.NetworkLogViewColumns._filmStripDividerColor = '#fccc49';
/**
* @enum {string}
*/
-WebInspector.NetworkLogViewColumns.TimelineSortIds = {
+WebInspector.NetworkLogViewColumns.WaterfallSortIds = {
StartTime: 'startTime',
ResponseTime: 'responseReceivedTime',
EndTime: 'endTime',
diff --git a/front_end/network/NetworkPanel.js b/front_end/network/NetworkPanel.js
index 49a77262b8..321ddd379a 100644
--- a/front_end/network/NetworkPanel.js
+++ b/front_end/network/NetworkPanel.js
@@ -144,12 +144,12 @@ WebInspector.NetworkPanel = class extends WebInspector.Panel {
_createToolbarButtons() {
this._panelToolbar.appendToolbarItem(WebInspector.Toolbar.createActionButton(this._toggleRecordAction));
- this._clearButton = new WebInspector.ToolbarButton(WebInspector.UIString('Clear'), 'clear-toolbar-item');
+ this._clearButton = new WebInspector.ToolbarButton(WebInspector.UIString('Clear'), 'largeicon-clear');
this._clearButton.addEventListener('click', this._onClearButtonClicked, this);
this._panelToolbar.appendToolbarItem(this._clearButton);
this._panelToolbar.appendSeparator();
var recordFilmStripButton = new WebInspector.ToolbarSettingToggle(
- this._networkRecordFilmStripSetting, 'camera-toolbar-item', WebInspector.UIString('Capture screenshots'));
+ this._networkRecordFilmStripSetting, 'largeicon-camera', WebInspector.UIString('Capture screenshots'));
this._panelToolbar.appendToolbarItem(recordFilmStripButton);
this._panelToolbar.appendToolbarItem(this._filterBar.filterButton());
@@ -158,12 +158,12 @@ WebInspector.NetworkPanel = class extends WebInspector.Panel {
this._panelToolbar.appendText(WebInspector.UIString('View:'));
var largerRequestsButton = new WebInspector.ToolbarSettingToggle(
- this._networkLogLargeRowsSetting, 'large-list-toolbar-item', WebInspector.UIString('Use large request rows'),
+ this._networkLogLargeRowsSetting, 'largeicon-large-list', WebInspector.UIString('Use large request rows'),
WebInspector.UIString('Use small request rows'));
this._panelToolbar.appendToolbarItem(largerRequestsButton);
var showOverviewButton = new WebInspector.ToolbarSettingToggle(
- this._networkLogShowOverviewSetting, 'waterfall-toolbar-item', WebInspector.UIString('Show overview'),
+ this._networkLogShowOverviewSetting, 'largeicon-waterfall', WebInspector.UIString('Show overview'),
WebInspector.UIString('Hide overview'));
this._panelToolbar.appendToolbarItem(showOverviewButton);
this._panelToolbar.appendSeparator();
diff --git a/front_end/network/NetworkTimelineColumn.js b/front_end/network/NetworkWaterfallColumn.js
similarity index 96%
rename from front_end/network/NetworkTimelineColumn.js
rename to front_end/network/NetworkWaterfallColumn.js
index a3b6a5921c..43c9529a2c 100644
--- a/front_end/network/NetworkTimelineColumn.js
+++ b/front_end/network/NetworkWaterfallColumn.js
@@ -4,15 +4,15 @@
/**
* @unrestricted
*/
-WebInspector.NetworkTimelineColumn = class extends WebInspector.VBox {
+WebInspector.NetworkWaterfallColumn = class extends WebInspector.VBox {
/**
* @param {number} rowHeight
* @param {!WebInspector.NetworkTimeCalculator} calculator
*/
constructor(rowHeight, calculator) {
- // TODO(allada) Make this a shadowDOM when the NetworkTimelineColumn gets moved into NetworkLogViewColumns.
+ // TODO(allada) Make this a shadowDOM when the NetworkWaterfallColumn gets moved into NetworkLogViewColumns.
super(false);
- this.registerRequiredCSS('network/networkTimelineColumn.css');
+ this.registerRequiredCSS('network/networkWaterfallColumn.css');
this._canvas = this.contentElement.createChild('canvas');
this._canvas.tabIndex = 1;
@@ -98,6 +98,12 @@ WebInspector.NetworkTimelineColumn = class extends WebInspector.VBox {
var end = range.end;
}
+ if (end - start < 50) {
+ var halfWidth = (end - start) / 2;
+ start = start + halfWidth - 25;
+ end = end - halfWidth + 25;
+ }
+
if (event.clientX < this._canvasPosition.left + start || event.clientX > this._canvasPosition.left + end)
return;
@@ -185,7 +191,7 @@ WebInspector.NetworkTimelineColumn = class extends WebInspector.VBox {
/**
* @param {number=} scrollTop
* @param {!Map>=} eventDividers
- * @param {!WebInspector.NetworkTimelineColumn.RequestData=} requestData
+ * @param {!WebInspector.NetworkWaterfallColumn.RequestData=} requestData
*/
update(scrollTop, eventDividers, requestData) {
if (scrollTop !== undefined)
@@ -324,7 +330,7 @@ WebInspector.NetworkTimelineColumn = class extends WebInspector.VBox {
/**
* @return {number}
*/
- _timelineDuration() {
+ _waterfallDuration() {
return this._calculator.maximumBoundary() - this._calculator.minimumBoundary();
}
@@ -356,7 +362,7 @@ WebInspector.NetworkTimelineColumn = class extends WebInspector.VBox {
var resourceType = request.resourceType();
if (this._borderColorsForResourceTypeCache.has(resourceType))
return this._borderColorsForResourceTypeCache.get(resourceType);
- var colorsForResourceType = WebInspector.NetworkTimelineColumn._colorsForResourceType;
+ var colorsForResourceType = WebInspector.NetworkWaterfallColumn._colorsForResourceType;
var color = colorsForResourceType[resourceType] || colorsForResourceType.Other;
var parsedColor = WebInspector.Color.parse(color);
var hsla = parsedColor.hsla();
@@ -373,7 +379,7 @@ WebInspector.NetworkTimelineColumn = class extends WebInspector.VBox {
* @return {string|!CanvasGradient}
*/
_colorForResourceType(context, request) {
- var colorsForResourceType = WebInspector.NetworkTimelineColumn._colorsForResourceType;
+ var colorsForResourceType = WebInspector.NetworkWaterfallColumn._colorsForResourceType;
var resourceType = request.resourceType();
var color = colorsForResourceType[resourceType] || colorsForResourceType.Other;
if (request.cached())
@@ -584,7 +590,7 @@ WebInspector.NetworkTimelineColumn = class extends WebInspector.VBox {
/**
* @return {string}
- * @this {WebInspector.NetworkTimelineColumn}
+ * @this {WebInspector.NetworkWaterfallColumn}
*/
function getRowColor() {
if (this._hoveredRequest === request)
@@ -607,9 +613,9 @@ WebInspector.NetworkTimelineColumn = class extends WebInspector.VBox {
/**
* @typedef {{requests: !Array, navigationRequest: ?WebInspector.NetworkRequest}}
*/
-WebInspector.NetworkTimelineColumn.RequestData;
+WebInspector.NetworkWaterfallColumn.RequestData;
-WebInspector.NetworkTimelineColumn._colorsForResourceType = {
+WebInspector.NetworkWaterfallColumn._colorsForResourceType = {
document: 'hsl(215, 100%, 80%)',
font: 'hsl(8, 100%, 80%)',
media: 'hsl(272, 64%, 80%)',
diff --git a/front_end/network/RequestHeadersView.js b/front_end/network/RequestHeadersView.js
index b449fe9498..c286a3fac7 100644
--- a/front_end/network/RequestHeadersView.js
+++ b/front_end/network/RequestHeadersView.js
@@ -365,11 +365,11 @@ WebInspector.RequestHeadersView = class extends WebInspector.VBox {
statusCodeImage.title = this._request.statusCode + ' ' + this._request.statusText;
if (this._request.statusCode < 300 || this._request.statusCode === 304)
- statusCodeImage.type = 'green-ball';
+ statusCodeImage.type = 'smallicon-green-ball';
else if (this._request.statusCode < 400)
- statusCodeImage.type = 'orange-ball';
+ statusCodeImage.type = 'smallicon-orange-ball';
else
- statusCodeImage.type = 'red-ball';
+ statusCodeImage.type = 'smallicon-red-ball';
requestMethodElement.title =
this._formatHeader(WebInspector.UIString('Request Method'), this._request.requestMethod);
@@ -420,7 +420,7 @@ WebInspector.RequestHeadersView = class extends WebInspector.VBox {
if (provisionalHeaders) {
var cautionText = WebInspector.UIString('Provisional headers are shown');
var cautionFragment = createDocumentFragment();
- cautionFragment.createChild('label', '', 'dt-icon-label').type = 'warning-icon';
+ cautionFragment.createChild('label', '', 'dt-icon-label').type = 'smallicon-warning';
cautionFragment.createChild('div', 'caution').textContent = cautionText;
var cautionTreeElement = new TreeElement(cautionFragment);
cautionTreeElement.selectable = false;
diff --git a/front_end/network/module.json b/front_end/network/module.json
index 781e057f86..eb51a0a5e5 100644
--- a/front_end/network/module.json
+++ b/front_end/network/module.json
@@ -35,13 +35,15 @@
"type": "@WebInspector.ActionDelegate",
"actionId": "network.blocked-urls.show",
"className": "WebInspector.BlockedURLsPane.ActionDelegate",
- "iconClass": "block-toolbar-item",
+ "iconClass": "largeicon-block",
"title": "Block network requests"
},
{
"type": "@WebInspector.ActionDelegate",
"actionId": "network.toggle-recording",
- "iconClass": "record-toolbar-item",
+ "iconClass": "largeicon-start-recording",
+ "toggledIconClass": "largeicon-stop-recording",
+ "toggleWithRedColor": true,
"contextTypes": ["WebInspector.NetworkPanel"],
"className": "WebInspector.NetworkPanel.RecordActionDelegate",
"options": [
@@ -101,7 +103,7 @@
"NetworkLogViewColumns.js",
"NetworkManageCustomHeadersView.js",
"NetworkOverview.js",
- "NetworkTimelineColumn.js",
+ "NetworkWaterfallColumn.js",
"RequestCookiesView.js",
"RequestHeadersView.js",
"RequestHTMLView.js",
@@ -119,7 +121,7 @@
"networkLogView.css",
"networkManageCustomHeadersView.css",
"networkPanel.css",
- "networkTimelineColumn.css",
+ "networkWaterfallColumn.css",
"requestCookiesView.css",
"requestHeadersTree.css",
"requestHeadersView.css",
diff --git a/front_end/network/networkLogView.css b/front_end/network/networkLogView.css
index 678eb7f3b5..ea2e0fd35e 100644
--- a/front_end/network/networkLogView.css
+++ b/front_end/network/networkLogView.css
@@ -76,13 +76,13 @@
height: 21px;
}
-.network-timeline-header, .network-log-grid.data-grid th {
+.network-waterfall-header, .network-log-grid.data-grid th {
border-bottom: 1px solid rgb(205, 205, 205);
border-left: 1px solid rgb(205, 205, 205);
background: white;
}
-.network-timeline-header, .network-log-grid.data-grid .header-container {
+.network-waterfall-header, .network-log-grid.data-grid .header-container {
height: 31px;
}
@@ -90,7 +90,7 @@
top: 31px;
}
-.network-timeline-header.small, .network-log-grid.data-grid.small .header-container {
+.network-waterfall-header.small, .network-log-grid.data-grid.small .header-container {
height: 27px;
}
@@ -110,11 +110,11 @@
cursor: pointer;
}
-.network-log-grid.data-grid .timeline-column {
+.network-log-grid.data-grid .waterfall-column {
padding: 1px 0;
}
-.network-log-grid.data-grid .timeline-column .sort-order-icon-container {
+.network-log-grid.data-grid .waterfall-column .sort-order-icon-container {
right: 15px;
pointer-events: none;
}
@@ -339,7 +339,7 @@
line-height: 28px;
}
-.network-timeline-header {
+.network-waterfall-header {
position: absolute;
border-left: 0px;
width: 100%;
@@ -348,11 +348,11 @@
background-color: transparent;
}
-.network-timeline-header:hover {
+.network-waterfall-header:hover {
background-color:hsla(0, 0%, 80%, .5);
}
-.network-timeline-header div {
+.network-waterfall-header div {
display: table-cell;
line-height: 14px;
margin: auto 0px;
@@ -363,7 +363,7 @@
font-size: 11px;
}
-.network-timeline-header .sort-order-icon-container {
+.network-waterfall-header .sort-order-icon-container {
position: absolute;
top: 1px;
right: 0;
@@ -372,7 +372,7 @@
align-items: center;
}
-.network-timeline-header .sort-order-icon {
+.network-waterfall-header .sort-order-icon {
margin-right: 4px;
background-image: url(Images/toolbarButtonGlyphs.png);
background-size: 352px 168px;
@@ -382,12 +382,12 @@
display: none;
}
-.network-timeline-header .sort-ascending.sort-order-icon {
+.network-waterfall-header .sort-ascending.sort-order-icon {
display: block;
background-position: -4px -111px;
}
-.network-timeline-header .sort-descending.sort-order-icon {
+.network-waterfall-header .sort-descending.sort-order-icon {
display: block;
background-position: -20px -99px;
}
diff --git a/front_end/network/networkTimelineColumn.css b/front_end/network/networkWaterfallColumn.css
similarity index 78%
rename from front_end/network/networkTimelineColumn.css
rename to front_end/network/networkWaterfallColumn.css
index cc91972136..dfa47d8967 100644
--- a/front_end/network/networkTimelineColumn.css
+++ b/front_end/network/networkWaterfallColumn.css
@@ -2,7 +2,7 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
*/
-.network-timeline-v-scroll {
+.network-waterfall-v-scroll {
position: absolute;
top: 0;
right: 0;
@@ -12,11 +12,11 @@
z-index: 200;
}
-.network-timeline-v-scroll.small {
+.network-waterfall-v-scroll.small {
margin-top: 27px;
}
-.network-timeline-v-scroll-content {
+.network-waterfall-v-scroll-content {
width: 15px;
pointer-events: none;
}
diff --git a/front_end/persistence/Automapping.js b/front_end/persistence/Automapping.js
index fb1afe9e43..e1df48b7ff 100644
--- a/front_end/persistence/Automapping.js
+++ b/front_end/persistence/Automapping.js
@@ -198,6 +198,12 @@ WebInspector.Automapping = class {
* @return {!Promise}
*/
_createBinding(networkSourceCode) {
+ if (networkSourceCode.url().startsWith('file://')) {
+ var fileSourceCode = this._fileSystemUISourceCodes.get(networkSourceCode.url());
+ var binding = fileSourceCode ? new WebInspector.PersistenceBinding(networkSourceCode, fileSourceCode, false) : null;
+ return Promise.resolve(binding);
+ }
+
var networkPath = WebInspector.ParsedURL.extractPath(networkSourceCode.url());
if (networkPath === null)
return Promise.resolve(/** @type {?WebInspector.PersistenceBinding} */ (null));
diff --git a/front_end/profiler/ProfileDataGrid.js b/front_end/profiler/ProfileDataGrid.js
index 46a63be34a..b6f1f917ea 100644
--- a/front_end/profiler/ProfileDataGrid.js
+++ b/front_end/profiler/ProfileDataGrid.js
@@ -163,8 +163,9 @@ WebInspector.ProfileDataGridNode = class extends WebInspector.DataGridNode {
cell.classList.toggle('highlight', this._searchMatchedFunctionColumn);
if (this._deoptReason) {
cell.classList.add('not-optimized');
- cell.createChild('span', 'profile-warn-marker').title =
- WebInspector.UIString('Not optimized: %s', this._deoptReason);
+ var warningIcon = WebInspector.Icon.create('smallicon-warning', 'profile-warn-marker');
+ warningIcon.title = WebInspector.UIString('Not optimized: %s', this._deoptReason);
+ cell.appendChild(warningIcon);
}
cell.createTextChild(this.functionName);
if (this.profileNode.scriptId === '0')
diff --git a/front_end/profiler/ProfileView.js b/front_end/profiler/ProfileView.js
index 77d6e7f0c9..aeba70ac8a 100644
--- a/front_end/profiler/ProfileView.js
+++ b/front_end/profiler/ProfileView.js
@@ -33,17 +33,17 @@ WebInspector.ProfileView = class extends WebInspector.SimpleView {
this.viewSelectComboBox = new WebInspector.ToolbarComboBox(this._changeView.bind(this));
this.focusButton =
- new WebInspector.ToolbarButton(WebInspector.UIString('Focus selected function'), 'visibility-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Focus selected function'), 'largeicon-visibility');
this.focusButton.setEnabled(false);
this.focusButton.addEventListener('click', this._focusClicked, this);
this.excludeButton =
- new WebInspector.ToolbarButton(WebInspector.UIString('Exclude selected function'), 'delete-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Exclude selected function'), 'largeicon-delete');
this.excludeButton.setEnabled(false);
this.excludeButton.addEventListener('click', this._excludeClicked, this);
this.resetButton =
- new WebInspector.ToolbarButton(WebInspector.UIString('Restore all functions'), 'refresh-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Restore all functions'), 'largeicon-refresh');
this.resetButton.setEnabled(false);
this.resetButton.addEventListener('click', this._resetClicked, this);
diff --git a/front_end/profiler/ProfilesPanel.js b/front_end/profiler/ProfilesPanel.js
index 2069d4f834..6706c2c014 100644
--- a/front_end/profiler/ProfilesPanel.js
+++ b/front_end/profiler/ProfilesPanel.js
@@ -429,7 +429,7 @@ WebInspector.ProfilesPanel = class extends WebInspector.PanelWithSidebar {
toolbar.appendToolbarItem(this._toggleRecordButton);
this.clearResultsButton =
- new WebInspector.ToolbarButton(WebInspector.UIString('Clear all profiles'), 'clear-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Clear all profiles'), 'largeicon-clear');
this.clearResultsButton.addEventListener('click', this._reset, this);
toolbar.appendToolbarItem(this.clearResultsButton);
diff --git a/front_end/profiler/module.json b/front_end/profiler/module.json
index 50d0f03bcc..3d4232f380 100644
--- a/front_end/profiler/module.json
+++ b/front_end/profiler/module.json
@@ -40,7 +40,9 @@
{
"type": "@WebInspector.ActionDelegate",
"actionId": "profiler.toggle-recording",
- "iconClass": "record-toolbar-item",
+ "iconClass": "largeicon-start-recording",
+ "toggledIconClass": "largeicon-stop-recording",
+ "toggleWithRedColor": true,
"contextTypes": ["WebInspector.ProfilesPanel"],
"className": "WebInspector.ProfilesPanel.RecordActionDelegate",
"bindings": [
diff --git a/front_end/profiler/profilesPanel.css b/front_end/profiler/profilesPanel.css
index 4a6e22d1a8..c272e92d64 100644
--- a/front_end/profiler/profilesPanel.css
+++ b/front_end/profiler/profilesPanel.css
@@ -97,14 +97,8 @@
}
.profile-warn-marker {
- background-image: url(Images/smallIcons.png);
- background-size: 190px 30px;
- background-position: -60px 0;
- width: 10px;
- height: 10px;
vertical-align: -1px;
margin-right: 2px;
- display: inline-block;
}
.data-grid tr.selected .profile-node-file {
diff --git a/front_end/resources/AppManifestView.js b/front_end/resources/AppManifestView.js
index 879570f511..55f38a9b37 100644
--- a/front_end/resources/AppManifestView.js
+++ b/front_end/resources/AppManifestView.js
@@ -88,7 +88,7 @@ WebInspector.AppManifestView = class extends WebInspector.VBox {
this._errorsSection.element.classList.toggle('hidden', !errors.length);
for (var error of errors)
this._errorsSection.appendRow().appendChild(
- createLabel(error.message, error.critical ? 'error-icon' : 'warning-icon'));
+ createLabel(error.message, error.critical ? 'smallicon-error' : 'smallicon-warning'));
if (!data)
data = '{}';
diff --git a/front_end/resources/ApplicationCacheItemsView.js b/front_end/resources/ApplicationCacheItemsView.js
index 5ae7631944..b71a3b4dd6 100644
--- a/front_end/resources/ApplicationCacheItemsView.js
+++ b/front_end/resources/ApplicationCacheItemsView.js
@@ -34,7 +34,7 @@ WebInspector.ApplicationCacheItemsView = class extends WebInspector.SimpleView {
this.element.classList.add('storage-view', 'table');
- this._deleteButton = new WebInspector.ToolbarButton(WebInspector.UIString('Delete'), 'delete-toolbar-item');
+ this._deleteButton = new WebInspector.ToolbarButton(WebInspector.UIString('Delete'), 'largeicon-delete');
this._deleteButton.setVisible(false);
this._deleteButton.addEventListener('click', this._deleteButtonClicked, this);
@@ -106,12 +106,12 @@ WebInspector.ApplicationCacheItemsView = class extends WebInspector.SimpleView {
var statusInformation = {};
// We should never have UNCACHED status, since we remove frames with UNCACHED application cache status from the tree.
- statusInformation[applicationCache.UNCACHED] = {type: 'red-ball', text: 'UNCACHED'};
- statusInformation[applicationCache.IDLE] = {type: 'green-ball', text: 'IDLE'};
- statusInformation[applicationCache.CHECKING] = {type: 'orange-ball', text: 'CHECKING'};
- statusInformation[applicationCache.DOWNLOADING] = {type: 'orange-ball', text: 'DOWNLOADING'};
- statusInformation[applicationCache.UPDATEREADY] = {type: 'green-ball', text: 'UPDATEREADY'};
- statusInformation[applicationCache.OBSOLETE] = {type: 'red-ball', text: 'OBSOLETE'};
+ statusInformation[applicationCache.UNCACHED] = {type: 'smallicon-red-ball', text: 'UNCACHED'};
+ statusInformation[applicationCache.IDLE] = {type: 'smallicon-green-ball', text: 'IDLE'};
+ statusInformation[applicationCache.CHECKING] = {type: 'smallicon-orange-ball', text: 'CHECKING'};
+ statusInformation[applicationCache.DOWNLOADING] = {type: 'smallicon-orange-ball', text: 'DOWNLOADING'};
+ statusInformation[applicationCache.UPDATEREADY] = {type: 'smallicon-green-ball', text: 'UPDATEREADY'};
+ statusInformation[applicationCache.OBSOLETE] = {type: 'smallicon-red-ball', text: 'OBSOLETE'};
var info = statusInformation[status] || statusInformation[applicationCache.UNCACHED];
@@ -129,10 +129,10 @@ WebInspector.ApplicationCacheItemsView = class extends WebInspector.SimpleView {
*/
updateNetworkState(isNowOnline) {
if (isNowOnline) {
- this._connectivityIcon.type = 'green-ball';
+ this._connectivityIcon.type = 'smallicon-green-ball';
this._connectivityIcon.textContent = WebInspector.UIString('Online');
} else {
- this._connectivityIcon.type = 'red-ball';
+ this._connectivityIcon.type = 'smallicon-red-ball';
this._connectivityIcon.textContent = WebInspector.UIString('Offline');
}
}
diff --git a/front_end/resources/CookieItemsView.js b/front_end/resources/CookieItemsView.js
index 5135d90dd0..5e2d29f467 100644
--- a/front_end/resources/CookieItemsView.js
+++ b/front_end/resources/CookieItemsView.js
@@ -36,15 +36,15 @@ WebInspector.CookieItemsView = class extends WebInspector.SimpleView {
this.element.classList.add('storage-view');
- this._deleteButton = new WebInspector.ToolbarButton(WebInspector.UIString('Delete'), 'delete-toolbar-item');
+ this._deleteButton = new WebInspector.ToolbarButton(WebInspector.UIString('Delete'), 'largeicon-delete');
this._deleteButton.setVisible(false);
this._deleteButton.addEventListener('click', this._deleteButtonClicked, this);
- this._clearButton = new WebInspector.ToolbarButton(WebInspector.UIString('Clear'), 'clear-toolbar-item');
+ this._clearButton = new WebInspector.ToolbarButton(WebInspector.UIString('Clear'), 'largeicon-clear');
this._clearButton.setVisible(false);
this._clearButton.addEventListener('click', this._clearButtonClicked, this);
- this._refreshButton = new WebInspector.ToolbarButton(WebInspector.UIString('Refresh'), 'refresh-toolbar-item');
+ this._refreshButton = new WebInspector.ToolbarButton(WebInspector.UIString('Refresh'), 'largeicon-refresh');
this._refreshButton.addEventListener('click', this._refreshButtonClicked, this);
this._treeElement = treeElement;
diff --git a/front_end/resources/DOMStorageItemsView.js b/front_end/resources/DOMStorageItemsView.js
index c7ac5669f3..f0e008dbc4 100644
--- a/front_end/resources/DOMStorageItemsView.js
+++ b/front_end/resources/DOMStorageItemsView.js
@@ -35,11 +35,11 @@ WebInspector.DOMStorageItemsView = class extends WebInspector.SimpleView {
this.element.classList.add('storage-view', 'table');
- this.deleteButton = new WebInspector.ToolbarButton(WebInspector.UIString('Delete'), 'delete-toolbar-item');
+ this.deleteButton = new WebInspector.ToolbarButton(WebInspector.UIString('Delete'), 'largeicon-delete');
this.deleteButton.setVisible(false);
this.deleteButton.addEventListener('click', this._deleteButtonClicked, this);
- this.refreshButton = new WebInspector.ToolbarButton(WebInspector.UIString('Refresh'), 'refresh-toolbar-item');
+ this.refreshButton = new WebInspector.ToolbarButton(WebInspector.UIString('Refresh'), 'largeicon-refresh');
this.refreshButton.addEventListener('click', this._refreshButtonClicked, this);
this.domStorage.addEventListener(
diff --git a/front_end/resources/DatabaseTableView.js b/front_end/resources/DatabaseTableView.js
index acad457f2a..40516b583c 100644
--- a/front_end/resources/DatabaseTableView.js
+++ b/front_end/resources/DatabaseTableView.js
@@ -37,7 +37,7 @@ WebInspector.DatabaseTableView = class extends WebInspector.SimpleView {
this._visibleColumnsSetting = WebInspector.settings.createSetting('databaseTableViewVisibleColumns', {});
- this.refreshButton = new WebInspector.ToolbarButton(WebInspector.UIString('Refresh'), 'refresh-toolbar-item');
+ this.refreshButton = new WebInspector.ToolbarButton(WebInspector.UIString('Refresh'), 'largeicon-refresh');
this.refreshButton.addEventListener('click', this._refreshButtonClicked, this);
this._visibleColumnsInput = new WebInspector.ToolbarInput(WebInspector.UIString('Visible columns'), 1);
this._visibleColumnsInput.addEventListener(
diff --git a/front_end/resources/IndexedDBViews.js b/front_end/resources/IndexedDBViews.js
index 171358d432..aa7eb1f76e 100644
--- a/front_end/resources/IndexedDBViews.js
+++ b/front_end/resources/IndexedDBViews.js
@@ -99,11 +99,11 @@ WebInspector.IDBDataView = class extends WebInspector.SimpleView {
this._createEditorToolbar();
- this._refreshButton = new WebInspector.ToolbarButton(WebInspector.UIString('Refresh'), 'refresh-toolbar-item');
+ this._refreshButton = new WebInspector.ToolbarButton(WebInspector.UIString('Refresh'), 'largeicon-refresh');
this._refreshButton.addEventListener('click', this._refreshButtonClicked, this);
this._clearButton =
- new WebInspector.ToolbarButton(WebInspector.UIString('Clear object store'), 'clear-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Clear object store'), 'largeicon-clear');
this._clearButton.addEventListener('click', this._clearButtonClicked, this);
this._pageSize = 50;
@@ -184,12 +184,12 @@ WebInspector.IDBDataView = class extends WebInspector.SimpleView {
var editorToolbar = new WebInspector.Toolbar('data-view-toolbar', this.element);
this._pageBackButton =
- new WebInspector.ToolbarButton(WebInspector.UIString('Show previous page'), 'play-backwards-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Show previous page'), 'largeicon-play-back');
this._pageBackButton.addEventListener('click', this._pageBackButtonClicked, this);
editorToolbar.appendToolbarItem(this._pageBackButton);
this._pageForwardButton =
- new WebInspector.ToolbarButton(WebInspector.UIString('Show next page'), 'play-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Show next page'), 'largeicon-play');
this._pageForwardButton.setEnabled(false);
this._pageForwardButton.addEventListener('click', this._pageForwardButtonClicked, this);
editorToolbar.appendToolbarItem(this._pageForwardButton);
diff --git a/front_end/resources/ServiceWorkerCacheViews.js b/front_end/resources/ServiceWorkerCacheViews.js
index 930ac31b8b..19524f1429 100644
--- a/front_end/resources/ServiceWorkerCacheViews.js
+++ b/front_end/resources/ServiceWorkerCacheViews.js
@@ -20,7 +20,7 @@ WebInspector.ServiceWorkerCacheView = class extends WebInspector.SimpleView {
this._createEditorToolbar();
- this._refreshButton = new WebInspector.ToolbarButton(WebInspector.UIString('Refresh'), 'refresh-toolbar-item');
+ this._refreshButton = new WebInspector.ToolbarButton(WebInspector.UIString('Refresh'), 'largeicon-refresh');
this._refreshButton.addEventListener('click', this._refreshButtonClicked, this);
this._pageSize = 50;
@@ -47,12 +47,12 @@ WebInspector.ServiceWorkerCacheView = class extends WebInspector.SimpleView {
var editorToolbar = new WebInspector.Toolbar('data-view-toolbar', this.element);
this._pageBackButton =
- new WebInspector.ToolbarButton(WebInspector.UIString('Show previous page'), 'play-backwards-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Show previous page'), 'largeicon-play-back');
this._pageBackButton.addEventListener('click', this._pageBackButtonClicked, this);
editorToolbar.appendToolbarItem(this._pageBackButton);
this._pageForwardButton =
- new WebInspector.ToolbarButton(WebInspector.UIString('Show next page'), 'play-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Show next page'), 'largeicon-play');
this._pageForwardButton.setEnabled(false);
this._pageForwardButton.addEventListener('click', this._pageForwardButtonClicked, this);
editorToolbar.appendToolbarItem(this._pageForwardButton);
diff --git a/front_end/resources/ServiceWorkersView.js b/front_end/resources/ServiceWorkersView.js
index bef09de546..8482db7ecf 100644
--- a/front_end/resources/ServiceWorkersView.js
+++ b/front_end/resources/ServiceWorkersView.js
@@ -286,7 +286,7 @@ WebInspector.ServiceWorkersView.Section = class {
this._section.setFieldVisible(WebInspector.UIString('Errors'), !!this._registration.errors.length);
var errorsValue = this._wrapWidget(this._section.appendField(WebInspector.UIString('Errors')));
- var errorsLabel = createLabel(String(this._registration.errors.length), 'error-icon');
+ var errorsLabel = createLabel(String(this._registration.errors.length), 'smallicon-error');
errorsLabel.classList.add('service-worker-errors-label');
errorsValue.appendChild(errorsLabel);
this._moreButton = createLink(
@@ -319,7 +319,7 @@ WebInspector.ServiceWorkersView.Section = class {
if (this._errorsList.childElementCount > 100)
this._errorsList.firstElementChild.remove();
message.appendChild(this._linkifier.linkifyScriptLocation(target, null, error.sourceURL, error.lineNumber));
- message.appendChild(createLabel('#' + error.versionId + ': ' + error.errorMessage, 'error-icon'));
+ message.appendChild(createLabel('#' + error.versionId + ': ' + error.errorMessage, 'smallicon-error'));
}
_unregisterButtonClicked() {
diff --git a/front_end/screencast/ScreencastApp.js b/front_end/screencast/ScreencastApp.js
index 7bce80e9f8..cd36101e86 100644
--- a/front_end/screencast/ScreencastApp.js
+++ b/front_end/screencast/ScreencastApp.js
@@ -10,7 +10,7 @@ WebInspector.ScreencastApp = class {
constructor() {
this._enabledSetting = WebInspector.settings.createSetting('screencastEnabled', true);
this._toggleButton =
- new WebInspector.ToolbarToggle(WebInspector.UIString('Toggle screencast'), 'phone-toolbar-item');
+ new WebInspector.ToolbarToggle(WebInspector.UIString('Toggle screencast'), 'largeicon-phone');
this._toggleButton.setToggled(this._enabledSetting.get());
this._toggleButton.addEventListener('click', this._toggleButtonClicked, this);
WebInspector.targetManager.observeTargets(this);
diff --git a/front_end/settings/SettingsScreen.js b/front_end/settings/SettingsScreen.js
index a422eaca15..424e320484 100644
--- a/front_end/settings/SettingsScreen.js
+++ b/front_end/settings/SettingsScreen.js
@@ -367,7 +367,7 @@ WebInspector.WorkspaceSettingsTab = class extends WebInspector.SettingsTab {
path.title = fileSystemPath;
var toolbar = new WebInspector.Toolbar('');
- var button = new WebInspector.ToolbarButton(WebInspector.UIString('Remove'), 'delete-toolbar-item');
+ var button = new WebInspector.ToolbarButton(WebInspector.UIString('Remove'), 'largeicon-delete');
button.addEventListener('click', this._removeFileSystemClicked.bind(this, fileSystem));
toolbar.appendToolbarItem(button);
header.appendChild(toolbar.element);
diff --git a/front_end/sources/DebuggerPausedMessage.js b/front_end/sources/DebuggerPausedMessage.js
index 5e25e7a093..cb18dbbd80 100644
--- a/front_end/sources/DebuggerPausedMessage.js
+++ b/front_end/sources/DebuggerPausedMessage.js
@@ -81,7 +81,8 @@ WebInspector.DebuggerPausedMessage = class {
function buildWrapper(mainText, subText, title) {
var messageWrapper = createElement('span');
var mainElement = messageWrapper.createChild('div', 'status-main');
- mainElement.textContent = mainText;
+ mainElement.appendChild(WebInspector.Icon.create('smallicon-info', 'status-icon'));
+ mainElement.appendChild(createTextNode(mainText));
if (subText) {
var subElement = messageWrapper.createChild('div', 'status-sub monospace');
subElement.textContent = subText;
diff --git a/front_end/sources/InplaceFormatterEditorAction.js b/front_end/sources/InplaceFormatterEditorAction.js
index b03a56382c..bb98b0119d 100644
--- a/front_end/sources/InplaceFormatterEditorAction.js
+++ b/front_end/sources/InplaceFormatterEditorAction.js
@@ -43,7 +43,7 @@ WebInspector.InplaceFormatterEditorAction = class {
this._sourcesView.addEventListener(WebInspector.SourcesView.Events.EditorSelected, this._editorSelected.bind(this));
this._sourcesView.addEventListener(WebInspector.SourcesView.Events.EditorClosed, this._editorClosed.bind(this));
- this._button = new WebInspector.ToolbarButton(WebInspector.UIString('Format'), 'format-toolbar-item');
+ this._button = new WebInspector.ToolbarButton(WebInspector.UIString('Format'), 'largeicon-pretty-print');
this._button.addEventListener('click', this._formatSourceInPlace, this);
this._updateButton(sourcesView.currentUISourceCode());
diff --git a/front_end/sources/JavaScriptSourceFrame.js b/front_end/sources/JavaScriptSourceFrame.js
index d5ebf0d801..5709cdb150 100644
--- a/front_end/sources/JavaScriptSourceFrame.js
+++ b/front_end/sources/JavaScriptSourceFrame.js
@@ -969,7 +969,7 @@ WebInspector.JavaScriptSourceFrame = class extends WebInspector.UISourceCodeFram
this._prettyPrintInfobar.setCloseCallback(() => delete this._prettyPrintInfobar);
var toolbar = new WebInspector.Toolbar('');
- var button = new WebInspector.ToolbarButton('', 'format-toolbar-item');
+ var button = new WebInspector.ToolbarButton('', 'largeicon-pretty-print');
toolbar.appendToolbarItem(button);
toolbar.element.style.display = 'inline-block';
toolbar.element.style.verticalAlign = 'middle';
diff --git a/front_end/sources/ObjectEventListenersSidebarPane.js b/front_end/sources/ObjectEventListenersSidebarPane.js
index 90e253c18b..b62cbe5fa2 100644
--- a/front_end/sources/ObjectEventListenersSidebarPane.js
+++ b/front_end/sources/ObjectEventListenersSidebarPane.js
@@ -10,7 +10,7 @@ WebInspector.ObjectEventListenersSidebarPane = class extends WebInspector.VBox {
super();
this.element.classList.add('event-listeners-sidebar-pane');
- this._refreshButton = new WebInspector.ToolbarButton(WebInspector.UIString('Refresh'), 'refresh-toolbar-item');
+ this._refreshButton = new WebInspector.ToolbarButton(WebInspector.UIString('Refresh'), 'largeicon-refresh');
this._refreshButton.addEventListener('click', this._refreshClick.bind(this));
this._refreshButton.setEnabled(false);
diff --git a/front_end/sources/ScriptFormatterEditorAction.js b/front_end/sources/ScriptFormatterEditorAction.js
index f2d1dfd81b..6640007d37 100644
--- a/front_end/sources/ScriptFormatterEditorAction.js
+++ b/front_end/sources/ScriptFormatterEditorAction.js
@@ -192,7 +192,7 @@ WebInspector.ScriptFormatterEditorAction = class {
this._sourcesView.addEventListener(WebInspector.SourcesView.Events.EditorSelected, this._editorSelected.bind(this));
this._sourcesView.addEventListener(WebInspector.SourcesView.Events.EditorClosed, this._editorClosed.bind(this));
- this._button = new WebInspector.ToolbarButton(WebInspector.UIString('Pretty print'), 'format-toolbar-item');
+ this._button = new WebInspector.ToolbarButton(WebInspector.UIString('Pretty print'), 'largeicon-pretty-print');
this._button.addEventListener('click', this._toggleFormatScriptSource, this);
this._updateButton(sourcesView.currentUISourceCode());
diff --git a/front_end/sources/SourcesNavigator.js b/front_end/sources/SourcesNavigator.js
index 63bcb8a0b6..1cb4d6e110 100644
--- a/front_end/sources/SourcesNavigator.js
+++ b/front_end/sources/SourcesNavigator.js
@@ -145,6 +145,13 @@ WebInspector.NetworkNavigatorView = class extends WebInspector.NavigatorView {
WebInspector.FilesNavigatorView = class extends WebInspector.NavigatorView {
constructor() {
super();
+ var toolbar = new WebInspector.Toolbar('navigator-toolbar');
+ var title = WebInspector.UIString('Add folder to workspace');
+ var addButton = new WebInspector.ToolbarButton(title, 'largeicon-add', title);
+ addButton.addEventListener('click', () =>
+ WebInspector.isolatedFileSystemManager.addFileSystem());
+ toolbar.appendToolbarItem(addButton);
+ this.element.insertBefore(toolbar.element, this.element.firstChild);
}
/**
@@ -191,8 +198,8 @@ WebInspector.ContentScriptsNavigatorView = class extends WebInspector.NavigatorV
WebInspector.SnippetsNavigatorView = class extends WebInspector.NavigatorView {
constructor() {
super();
- var toolbar = new WebInspector.Toolbar('snippets-navigator-toolbar');
- var newButton = new WebInspector.ToolbarButton(WebInspector.UIString('New'), 'add-toolbar-item');
+ var toolbar = new WebInspector.Toolbar('navigator-toolbar');
+ var newButton = new WebInspector.ToolbarButton('', 'largeicon-add', WebInspector.UIString('New Snippet'));
newButton.addEventListener('click', this._handleCreateSnippet.bind(this));
toolbar.appendToolbarItem(newButton);
this.element.insertBefore(toolbar.element, this.element.firstChild);
diff --git a/front_end/sources/SourcesPanel.js b/front_end/sources/SourcesPanel.js
index 8af370ce76..61e6cfb60e 100644
--- a/front_end/sources/SourcesPanel.js
+++ b/front_end/sources/SourcesPanel.js
@@ -712,7 +712,7 @@ WebInspector.SourcesPanel = class extends WebInspector.Panel {
this._runSnippetButton.setVisible(false);
var longResumeButton = new WebInspector.ToolbarButton(
- WebInspector.UIString('Resume with all pauses blocked for 500 ms'), 'play-toolbar-item');
+ WebInspector.UIString('Resume with all pauses blocked for 500 ms'), 'largeicon-play');
longResumeButton.addEventListener('click', this._longResume.bind(this), this);
debugToolbar.appendToolbarItem(
WebInspector.Toolbar.createActionButton(this._togglePauseAction, [longResumeButton], []));
@@ -723,7 +723,7 @@ WebInspector.SourcesPanel = class extends WebInspector.Panel {
debugToolbar.appendSeparator();
debugToolbar.appendToolbarItem(WebInspector.Toolbar.createActionButton(this._toggleBreakpointsActiveAction));
- this._pauseOnExceptionButton = new WebInspector.ToolbarToggle('', 'pause-on-exceptions-toolbar-item');
+ this._pauseOnExceptionButton = new WebInspector.ToolbarToggle('', 'largeicon-pause-on-exceptions');
this._pauseOnExceptionButton.addEventListener('click', this._togglePauseOnExceptions, this);
debugToolbar.appendToolbarItem(this._pauseOnExceptionButton);
diff --git a/front_end/sources/TabbedEditorContainer.js b/front_end/sources/TabbedEditorContainer.js
index 1f41d7c6d2..c133440af4 100644
--- a/front_end/sources/TabbedEditorContainer.js
+++ b/front_end/sources/TabbedEditorContainer.js
@@ -554,7 +554,7 @@ WebInspector.TabbedEditorContainer = class extends WebInspector.Object {
this._tabbedPane.changeTabTitle(tabId, title);
if (WebInspector.persistence.hasUnsavedCommittedChanges(uiSourceCode))
this._tabbedPane.setTabIcon(
- tabId, 'warning-icon', WebInspector.UIString('Changes to this file were not saved to file system.'));
+ tabId, 'smallicon-warning', WebInspector.UIString('Changes to this file were not saved to file system.'));
else
this._tabbedPane.setTabIcon(tabId, '');
}
diff --git a/front_end/sources/UIList.js b/front_end/sources/UIList.js
index a62787e9db..b5327fcc31 100644
--- a/front_end/sources/UIList.js
+++ b/front_end/sources/UIList.js
@@ -88,6 +88,8 @@ WebInspector.UIList.Item = class {
this._actionElement = null;
this._hidden = false;
this._isLabel = !!isLabel;
+ /** @type {?HTMLElement} */
+ this._icon = null;
this.setTitle(title);
this.setSubtitle(subtitle);
this.setSelected(false);
@@ -158,14 +160,16 @@ WebInspector.UIList.Item = class {
if (this._selected)
return;
this._selected = true;
- this.element.classList.add('selected');
+ this._icon = WebInspector.Icon.create('smallicon-thick-right-arrow', 'selected-icon');
+ this.element.appendChild(this._icon);
}
deselect() {
if (!this._selected)
return;
this._selected = false;
- this.element.classList.remove('selected');
+ this._icon.remove();
+ this._icon = null;
}
toggleSelected() {
diff --git a/front_end/sources/UISourceCodeFrame.js b/front_end/sources/UISourceCodeFrame.js
index 7f6420401d..c2026316aa 100644
--- a/front_end/sources/UISourceCodeFrame.js
+++ b/front_end/sources/UISourceCodeFrame.js
@@ -431,8 +431,8 @@ WebInspector.UISourceCodeFrame = class extends WebInspector.SourceFrame {
};
WebInspector.UISourceCodeFrame._iconClassPerLevel = {};
-WebInspector.UISourceCodeFrame._iconClassPerLevel[WebInspector.UISourceCode.Message.Level.Error] = 'error-icon';
-WebInspector.UISourceCodeFrame._iconClassPerLevel[WebInspector.UISourceCode.Message.Level.Warning] = 'warning-icon';
+WebInspector.UISourceCodeFrame._iconClassPerLevel[WebInspector.UISourceCode.Message.Level.Error] = 'smallicon-error';
+WebInspector.UISourceCodeFrame._iconClassPerLevel[WebInspector.UISourceCode.Message.Level.Warning] = 'smallicon-warning';
WebInspector.UISourceCodeFrame._bubbleTypePerLevel = {};
WebInspector.UISourceCodeFrame._bubbleTypePerLevel[WebInspector.UISourceCode.Message.Level.Error] = 'error';
diff --git a/front_end/sources/WatchExpressionsSidebarPane.js b/front_end/sources/WatchExpressionsSidebarPane.js
index 3d8e9fbc61..6bd6dcc264 100644
--- a/front_end/sources/WatchExpressionsSidebarPane.js
+++ b/front_end/sources/WatchExpressionsSidebarPane.js
@@ -42,9 +42,9 @@ WebInspector.WatchExpressionsSidebarPane = class extends WebInspector.ThrottledW
this._watchExpressions = [];
this._watchExpressionsSetting = WebInspector.settings.createLocalSetting('watchExpressions', []);
- this._addButton = new WebInspector.ToolbarButton(WebInspector.UIString('Add expression'), 'add-toolbar-item');
+ this._addButton = new WebInspector.ToolbarButton(WebInspector.UIString('Add expression'), 'largeicon-add');
this._addButton.addEventListener('click', this._addButtonClicked.bind(this));
- this._refreshButton = new WebInspector.ToolbarButton(WebInspector.UIString('Refresh'), 'refresh-toolbar-item');
+ this._refreshButton = new WebInspector.ToolbarButton(WebInspector.UIString('Refresh'), 'largeicon-refresh');
this._refreshButton.addEventListener('click', this._refreshButtonClicked.bind(this));
this._bodyElement = this.element.createChild('div', 'vbox watch-expressions');
diff --git a/front_end/sources/XHRBreakpointsSidebarPane.js b/front_end/sources/XHRBreakpointsSidebarPane.js
index 02138a8e48..0fb597c57b 100644
--- a/front_end/sources/XHRBreakpointsSidebarPane.js
+++ b/front_end/sources/XHRBreakpointsSidebarPane.js
@@ -15,7 +15,7 @@ WebInspector.XHRBreakpointsSidebarPane = class extends WebInspector.BreakpointsS
/** @type {!Map.} */
this._breakpointElements = new Map();
- this._addButton = new WebInspector.ToolbarButton(WebInspector.UIString('Add breakpoint'), 'add-toolbar-item');
+ this._addButton = new WebInspector.ToolbarButton(WebInspector.UIString('Add breakpoint'), 'largeicon-add');
this._addButton.addEventListener('click', this._addButtonClicked.bind(this));
this.emptyElement.addEventListener('contextmenu', this._emptyElementContextMenu.bind(this), true);
diff --git a/front_end/sources/debuggerPausedMessage.css b/front_end/sources/debuggerPausedMessage.css
index 32689c39c2..b7e8efc4dc 100644
--- a/front_end/sources/debuggerPausedMessage.css
+++ b/front_end/sources/debuggerPausedMessage.css
@@ -46,26 +46,13 @@
max-height: 27px;
}
-.status-main::before {
- background-position: -80px 0;
- background-image: url(Images/smallIcons.png);
- background-size: 190px 30px;
- width: 10px;
- height: 10px;
- content: "";
+.status-icon {
-webkit-filter: hue-rotate(190deg);
position: absolute;
left: 0;
top: calc(50% - 5px);
}
-.paused-status.error-reason .status-main::before {
- background-position: -20px 0;
+.paused-status.error-reason .status-icon {
-webkit-filter: none;
}
-
-@media (-webkit-min-device-pixel-ratio: 1.1) {
-.status-main::before {
- background-image: url(Images/smallIcons_2x.png);
-}
-} /* media */
diff --git a/front_end/sources/module.json b/front_end/sources/module.json
index ff1b7d3f89..cc05e3e10f 100644
--- a/front_end/sources/module.json
+++ b/front_end/sources/module.json
@@ -17,7 +17,8 @@
"type": "@WebInspector.ActionDelegate",
"category": "Debugger",
"actionId": "debugger.toggle-pause",
- "iconClass": "pause-toolbar-item",
+ "iconClass": "largeicon-pause",
+ "toggledIconClass": "largeicon-resume",
"className": "WebInspector.SourcesPanel.RevealingActionDelegate",
"contextTypes": ["WebInspector.SourcesPanel", "WebInspector.ShortcutRegistry.ForwardedShortcut"],
"options": [
@@ -40,7 +41,7 @@
"actionId": "debugger.step-over",
"className": "WebInspector.SourcesPanel.DebuggingActionDelegate",
"title": "Step over next function call",
- "iconClass": "step-over-toolbar-item",
+ "iconClass": "largeicon-step-over",
"contextTypes": ["WebInspector.SourcesPanel"],
"bindings": [
{
@@ -58,7 +59,7 @@
"actionId": "debugger.step-into",
"className": "WebInspector.SourcesPanel.DebuggingActionDelegate",
"title": "Step into next function call",
- "iconClass": "step-in-toolbar-item",
+ "iconClass": "largeicon-step-in",
"contextTypes": ["WebInspector.SourcesPanel"],
"bindings": [
{
@@ -76,7 +77,7 @@
"actionId": "debugger.step-out",
"className": "WebInspector.SourcesPanel.DebuggingActionDelegate",
"title": "Step out of current function",
- "iconClass": "step-out-toolbar-item",
+ "iconClass": "largeicon-step-out",
"contextTypes": ["WebInspector.SourcesPanel"],
"bindings": [
{
@@ -94,7 +95,7 @@
"actionId": "debugger.run-snippet",
"className": "WebInspector.SourcesPanel.DebuggingActionDelegate",
"title": "Run snippet",
- "iconClass": "play-toolbar-item",
+ "iconClass": "largeicon-play",
"contextTypes": ["WebInspector.SourcesPanel"],
"bindings": [
{
@@ -128,7 +129,8 @@
"type": "@WebInspector.ActionDelegate",
"category": "Debugger",
"actionId": "debugger.toggle-breakpoints-active",
- "iconClass": "breakpoint-toolbar-item",
+ "iconClass": "largeicon-deactivate-breakpoints",
+ "toggledIconClass": "largeicon-activate-breakpoints",
"className": "WebInspector.SourcesPanel.DebuggingActionDelegate",
"contextTypes": ["WebInspector.SourcesPanel"],
"options": [
diff --git a/front_end/sources/navigatorView.css b/front_end/sources/navigatorView.css
index 1a990bad64..2db86d1450 100644
--- a/front_end/sources/navigatorView.css
+++ b/front_end/sources/navigatorView.css
@@ -4,7 +4,7 @@
* found in the LICENSE file.
*/
-.snippets-navigator-toolbar {
+.navigator-toolbar {
border-bottom: 1px solid #ccc;
padding-left: 8px;
}
diff --git a/front_end/sources/uiList.css b/front_end/sources/uiList.css
index 62f52cf0bb..800768976a 100644
--- a/front_end/sources/uiList.css
+++ b/front_end/sources/uiList.css
@@ -65,16 +65,10 @@
font-style: italic;
}
-.list-item.selected::before {
- background-image: url(Images/smallIcons.png);
- background-size: 190px 30px;
- background-position: -180px 0;
- content: "";
+.list-item > .selected-icon {
position: absolute;
top: 5px;
left: 4px;
- width: 10px;
- height: 10px;
}
.list-item.dimmed-item .action {
@@ -92,8 +86,3 @@
color: rgb(17, 85, 204);
}
-@media (-webkit-min-device-pixel-ratio: 1.1) {
-.list-item.selected::before {
- background-image: url(Images/smallIcons_2x.png);
-}
-} /* media */
diff --git a/front_end/timeline/TimelinePanel.js b/front_end/timeline/TimelinePanel.js
index a0f40b06ee..26248f1f0f 100644
--- a/front_end/timeline/TimelinePanel.js
+++ b/front_end/timeline/TimelinePanel.js
@@ -324,7 +324,7 @@ WebInspector.TimelinePanel = class extends WebInspector.Panel {
if (Runtime.experiments.isEnabled('timelineRecordingPerspectives') &&
perspectiveSetting.get() === WebInspector.TimelinePanel.Perspectives.Load) {
this._reloadButton =
- new WebInspector.ToolbarButton(WebInspector.UIString('Record & Reload'), 'refresh-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Record & Reload'), 'largeicon-refresh');
this._reloadButton.addEventListener('click', () => WebInspector.targetManager.reloadPage());
this._panelToolbar.appendToolbarItem(this._reloadButton);
} else {
@@ -332,7 +332,7 @@ WebInspector.TimelinePanel = class extends WebInspector.Panel {
}
this._updateTimelineControls();
- var clearButton = new WebInspector.ToolbarButton(WebInspector.UIString('Clear recording'), 'clear-toolbar-item');
+ var clearButton = new WebInspector.ToolbarButton(WebInspector.UIString('Clear recording'), 'largeicon-clear');
clearButton.addEventListener('click', this._clear, this);
this._panelToolbar.appendToolbarItem(clearButton);
@@ -370,7 +370,7 @@ WebInspector.TimelinePanel = class extends WebInspector.Panel {
this._panelToolbar.appendSeparator();
var garbageCollectButton =
- new WebInspector.ToolbarButton(WebInspector.UIString('Collect garbage'), 'garbage-collect-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Collect garbage'), 'largeicon-trash-bin');
garbageCollectButton.addEventListener('click', this._garbageCollectButtonClicked, this);
this._panelToolbar.appendToolbarItem(garbageCollectButton);
@@ -1914,7 +1914,7 @@ WebInspector.CPUThrottlingManager = class extends WebInspector.Object {
this._targets.forEach(target => target.emulationAgent().setCPUThrottlingRate(value));
if (value !== 1)
WebInspector.inspectorView.setPanelIcon(
- 'timeline', 'warning-icon', WebInspector.UIString('CPU throttling is enabled'));
+ 'timeline', 'smallicon-warning', WebInspector.UIString('CPU throttling is enabled'));
else
WebInspector.inspectorView.setPanelIcon('timeline', '', '');
}
diff --git a/front_end/timeline/TimelineTreeView.js b/front_end/timeline/TimelineTreeView.js
index 55ade51510..193b3524a5 100644
--- a/front_end/timeline/TimelineTreeView.js
+++ b/front_end/timeline/TimelineTreeView.js
@@ -156,7 +156,7 @@ WebInspector.TimelineTreeView = class extends WebInspector.VBox {
}
/**
- * @param {function(!WebInspector.TracingModel.Event):(string|symbol)=} eventIdCallback
+ * @param {function(!WebInspector.TracingModel.Event, string):(string|symbol)=} eventIdCallback
* @return {!WebInspector.TimelineProfileTree.Node}
*/
_buildTopDownTree(eventIdCallback) {
@@ -441,7 +441,7 @@ WebInspector.AggregatedTimelineTreeView = class extends WebInspector.TimelineTre
constructor(model, filters) {
super();
this._groupBySetting =
- WebInspector.settings.createSetting('timelineTreeGroupBy', WebInspector.TimelineAggregator.GroupBy.Category);
+ WebInspector.settings.createSetting('timelineTreeGroupBy', WebInspector.AggregatedTimelineTreeView.GroupBy.Category);
this._init(model, filters);
var nonessentialEvents = [
WebInspector.TimelineModel.RecordType.EventDispatch, WebInspector.TimelineModel.RecordType.FunctionCall,
@@ -482,20 +482,20 @@ WebInspector.AggregatedTimelineTreeView = class extends WebInspector.TimelineTre
var color = node.id ? WebInspector.TimelineUIUtils.eventColor(node.event) : categories['other'].color;
switch (this._groupBySetting.get()) {
- case WebInspector.TimelineAggregator.GroupBy.Category:
+ case WebInspector.AggregatedTimelineTreeView.GroupBy.Category:
var category = categories[node.id] || categories['other'];
return {name: category.title, color: category.color};
- case WebInspector.TimelineAggregator.GroupBy.Domain:
- case WebInspector.TimelineAggregator.GroupBy.Subdomain:
+ case WebInspector.AggregatedTimelineTreeView.GroupBy.Domain:
+ case WebInspector.AggregatedTimelineTreeView.GroupBy.Subdomain:
var name = node.id;
- if (WebInspector.TimelineAggregator.isExtensionInternalURL(name))
+ if (WebInspector.AggregatedTimelineTreeView._isExtensionInternalURL(name))
name = WebInspector.UIString('[Chrome extensions overhead]');
else if (name.startsWith('chrome-extension'))
name = this._executionContextNamesByOrigin.get(name) || name;
return {name: name || WebInspector.UIString('unattributed'), color: color};
- case WebInspector.TimelineAggregator.GroupBy.EventName:
+ case WebInspector.AggregatedTimelineTreeView.GroupBy.EventName:
var name = node.event.name === WebInspector.TimelineModel.RecordType.JSFrame ?
WebInspector.UIString('JavaScript') :
WebInspector.TimelineUIUtils.eventTitle(node.event);
@@ -506,7 +506,19 @@ WebInspector.AggregatedTimelineTreeView = class extends WebInspector.TimelineTre
color
};
- case WebInspector.TimelineAggregator.GroupBy.URL:
+ case WebInspector.AggregatedTimelineTreeView.GroupBy.URL:
+ break;
+ case WebInspector.AggregatedTimelineTreeView.GroupBy.Frame:
+ var frame = this._model.pageFrameById(node.id);
+ var frameName;
+ if (frame && frame.url)
+ frameName = frame.url.startsWith('about:') && frame.name ? `"${frame.name}"` : frame.url;
+ else
+ frameName = WebInspector.UIString('Page');
+ return {
+ name: frameName,
+ color: color
+ };
break;
default:
@@ -533,16 +545,17 @@ WebInspector.AggregatedTimelineTreeView = class extends WebInspector.TimelineTre
if (id === this._groupBySetting.get())
this._groupByCombobox.select(option);
}
- addGroupingOption.call(this, WebInspector.UIString('No Grouping'), WebInspector.TimelineAggregator.GroupBy.None);
+ addGroupingOption.call(this, WebInspector.UIString('No Grouping'), WebInspector.AggregatedTimelineTreeView.GroupBy.None);
addGroupingOption.call(
- this, WebInspector.UIString('Group by Activity'), WebInspector.TimelineAggregator.GroupBy.EventName);
+ this, WebInspector.UIString('Group by Activity'), WebInspector.AggregatedTimelineTreeView.GroupBy.EventName);
addGroupingOption.call(
- this, WebInspector.UIString('Group by Category'), WebInspector.TimelineAggregator.GroupBy.Category);
+ this, WebInspector.UIString('Group by Category'), WebInspector.AggregatedTimelineTreeView.GroupBy.Category);
addGroupingOption.call(
- this, WebInspector.UIString('Group by Domain'), WebInspector.TimelineAggregator.GroupBy.Domain);
+ this, WebInspector.UIString('Group by Domain'), WebInspector.AggregatedTimelineTreeView.GroupBy.Domain);
addGroupingOption.call(
- this, WebInspector.UIString('Group by Subdomain'), WebInspector.TimelineAggregator.GroupBy.Subdomain);
- addGroupingOption.call(this, WebInspector.UIString('Group by URL'), WebInspector.TimelineAggregator.GroupBy.URL);
+ this, WebInspector.UIString('Group by Subdomain'), WebInspector.AggregatedTimelineTreeView.GroupBy.Subdomain);
+ addGroupingOption.call(this, WebInspector.UIString('Group by URL'), WebInspector.AggregatedTimelineTreeView.GroupBy.URL);
+ addGroupingOption.call(this, WebInspector.UIString('Group by Frame'), WebInspector.AggregatedTimelineTreeView.GroupBy.Frame);
panelToolbar.appendToolbarItem(this._groupByCombobox);
}
@@ -597,15 +610,85 @@ WebInspector.AggregatedTimelineTreeView = class extends WebInspector.TimelineTre
}
/**
- * @return {!WebInspector.TimelineAggregator}
+ * @param {!WebInspector.AggregatedTimelineTreeView.GroupBy} groupBy
+ * @return {function(!WebInspector.TracingModel.Event, string):string}
*/
- _createAggregator() {
- return new WebInspector.TimelineAggregator(
- event => WebInspector.TimelineUIUtils.eventStyle(event).title,
- event => WebInspector.TimelineUIUtils.eventStyle(event).category.name);
+ _groupingFunction(groupBy) {
+ /**
+ * @param {!WebInspector.TracingModel.Event} event
+ * @return {string}
+ */
+ function groupByURL(event) {
+ return WebInspector.TimelineProfileTree.eventURL(event) || '';
+ }
+
+ /**
+ * @param {boolean} groupSubdomains
+ * @param {!WebInspector.TracingModel.Event} event
+ * @return {string}
+ */
+ function groupByDomain(groupSubdomains, event) {
+ var url = WebInspector.TimelineProfileTree.eventURL(event) || '';
+ if (WebInspector.AggregatedTimelineTreeView._isExtensionInternalURL(url))
+ return WebInspector.AggregatedTimelineTreeView._extensionInternalPrefix;
+ var parsedURL = url.asParsedURL();
+ if (!parsedURL)
+ return '';
+ if (parsedURL.scheme === 'chrome-extension')
+ return parsedURL.scheme + '://' + parsedURL.host;
+ if (!groupSubdomains)
+ return parsedURL.host;
+ if (/^[.0-9]+$/.test(parsedURL.host))
+ return parsedURL.host;
+ var domainMatch = /([^.]*\.)?[^.]*$/.exec(parsedURL.host);
+ return domainMatch && domainMatch[0] || '';
+ }
+
+ switch (groupBy) {
+ case WebInspector.AggregatedTimelineTreeView.GroupBy.None:
+ return () => Symbol('uniqueGroupId');
+ case WebInspector.AggregatedTimelineTreeView.GroupBy.EventName:
+ return event => WebInspector.TimelineUIUtils.eventStyle(event).title;
+ case WebInspector.AggregatedTimelineTreeView.GroupBy.Category:
+ return event => WebInspector.TimelineUIUtils.eventStyle(event).category.name;
+ case WebInspector.AggregatedTimelineTreeView.GroupBy.Subdomain:
+ return groupByDomain.bind(null, false);
+ case WebInspector.AggregatedTimelineTreeView.GroupBy.Domain:
+ return groupByDomain.bind(null, true);
+ case WebInspector.AggregatedTimelineTreeView.GroupBy.URL:
+ return groupByURL;
+ case WebInspector.AggregatedTimelineTreeView.GroupBy.Frame:
+ return (event, pageFrameId) => pageFrameId;
+ default:
+ console.assert(false, `Unexpected aggregation setting: ${groupBy}`);
+ return () => Symbol('uniqueGroupId');
+ }
+ }
+
+ /**
+ * @param {string} url
+ * @return {boolean}
+ */
+ static _isExtensionInternalURL(url) {
+ return url.startsWith(WebInspector.AggregatedTimelineTreeView._extensionInternalPrefix);
}
};
+WebInspector.AggregatedTimelineTreeView._extensionInternalPrefix = 'extensions::';
+
+/**
+ * @enum {string}
+ */
+WebInspector.AggregatedTimelineTreeView.GroupBy = {
+ None: 'None',
+ EventName: 'EventName',
+ Category: 'Category',
+ Domain: 'Domain',
+ Subdomain: 'Subdomain',
+ URL: 'URL',
+ Frame: 'Frame'
+};
+
/**
* @unrestricted
*/
@@ -624,8 +707,11 @@ WebInspector.CallTreeTimelineTreeView = class extends WebInspector.AggregatedTim
* @return {!WebInspector.TimelineProfileTree.Node}
*/
_buildTree() {
- var topDown = this._buildTopDownTree(WebInspector.TimelineAggregator.eventId);
- return this._createAggregator().performGrouping(topDown, this._groupBySetting.get());
+ var grouping = this._groupBySetting.get();
+ var topDown = this._buildTopDownTree(this._groupingFunction(grouping));
+ if (grouping === WebInspector.AggregatedTimelineTreeView.GroupBy.None)
+ return topDown;
+ return new WebInspector.TimelineAggregator().performGrouping(topDown);
}
};
@@ -647,9 +733,8 @@ WebInspector.BottomUpTimelineTreeView = class extends WebInspector.AggregatedTim
* @return {!WebInspector.TimelineProfileTree.Node}
*/
_buildTree() {
- var topDown = this._buildTopDownTree(WebInspector.TimelineAggregator.eventId);
- return WebInspector.TimelineProfileTree.buildBottomUp(
- topDown, this._createAggregator().groupFunction(this._groupBySetting.get()));
+ var topDown = this._buildTopDownTree(this._groupingFunction(this._groupBySetting.get()));
+ return WebInspector.TimelineProfileTree.buildBottomUp(topDown);
}
};
diff --git a/front_end/timeline/module.json b/front_end/timeline/module.json
index a40810faa1..bd025437aa 100644
--- a/front_end/timeline/module.json
+++ b/front_end/timeline/module.json
@@ -34,7 +34,9 @@
{
"type": "@WebInspector.ActionDelegate",
"actionId": "timeline.toggle-recording",
- "iconClass": "record-toolbar-item",
+ "iconClass": "largeicon-start-recording",
+ "toggledIconClass": "largeicon-stop-recording",
+ "toggleWithRedColor": true,
"contextTypes": ["WebInspector.TimelinePanel"],
"className": "WebInspector.TimelinePanel.ActionDelegate",
"options": [
diff --git a/front_end/timeline_model/TimelineModel.js b/front_end/timeline_model/TimelineModel.js
index 3257281bba..987ae4ddad 100644
--- a/front_end/timeline_model/TimelineModel.js
+++ b/front_end/timeline_model/TimelineModel.js
@@ -117,6 +117,19 @@ WebInspector.TimelineModel = class {
}
}
+ /**
+ * @param {!WebInspector.TracingModel.Event} event
+ * @return {string}
+ */
+ static eventFrameId(event) {
+ var data = event.args['data'] || event.args['beginData'];
+ var frame = data && data['frame'];
+ if (!frame)
+ return '';
+ var processId = event.thread.process().id();
+ return `${processId}.${frame}`;
+ }
+
/**
* @deprecated Test use only!
* @param {?function(!WebInspector.TimelineModel.Record)|?function(!WebInspector.TimelineModel.Record,number)} preOrderCallback
@@ -264,6 +277,18 @@ WebInspector.TimelineModel = class {
for (var event of metadataEvents) {
if (event.name === WebInspector.TimelineModel.DevToolsMetadataEvent.TracingStartedInPage) {
pageDevToolsMetadataEvents.push(event);
+ var frames = (event.args['data'] && event.args['data']['frames']) || [];
+ for (var frame of frames) {
+ var processId = event.thread.process().id();
+ var frameId = `${processId}.${frame.frame}`;
+ var frameData = {
+ url: frame['url'] || '',
+ name: frame['name'] || '',
+ processId: processId,
+ frameId: frame['frame']
+ };
+ this._pageFrames.set(frameId, frameData);
+ }
} else if (event.name === WebInspector.TimelineModel.DevToolsMetadataEvent.TracingSessionIdForWorker) {
workersDevToolsMetadataEvents.push(event);
} else if (event.name === WebInspector.TimelineModel.DevToolsMetadataEvent.TracingStartedInBrowser) {
@@ -779,6 +804,15 @@ WebInspector.TimelineModel = class {
break;
case recordTypes.CommitLoad:
+ var frameId = WebInspector.TimelineModel.eventFrameId(event);
+ var pageFrame = this._pageFrames.get(frameId);
+ if (pageFrame) {
+ pageFrame.url = eventData.url || '';
+ pageFrame.name = eventData.name || '';
+ } else {
+ var processId = event.thread.process().id();
+ this._pageFrames.set(frameId, {url: eventData.url || '', processId: processId, frameId: eventData.frame, name: eventData.name || ''});
+ }
var page = eventData['page'];
if (page && page !== this._currentPage)
return false;
@@ -917,6 +951,9 @@ WebInspector.TimelineModel = class {
this._cpuProfiles = [];
/** @type {!WeakMap} */
this._workerIdByThread = new WeakMap();
+ /** @type {!Map} */
+ this._pageFrames = new Map();
+
this._minimumRecordTime = 0;
this._maximumRecordTime = 0;
}
@@ -998,6 +1035,14 @@ WebInspector.TimelineModel = class {
return this._eventDividerRecords;
}
+ /**
+ * @param {string} frameId
+ * @return {?WebInspector.TimelineModel.PageFrame}
+ */
+ pageFrameById(frameId) {
+ return frameId ? this._pageFrames.get(frameId) || null : null;
+ }
+
/**
* @return {!Array}
*/
@@ -1331,6 +1376,9 @@ WebInspector.TimelineModel.Record = class {
WebInspector.TimelineModel.MetadataEvents;
+/** @typedef {!{url: string, processId: number, frameId: string, name: string}} */
+WebInspector.TimelineModel.PageFrame;
+
/**
* @unrestricted
*/
diff --git a/front_end/timeline_model/TimelineProfileTree.js b/front_end/timeline_model/TimelineProfileTree.js
index 09c8076ef5..9e7879dbe4 100644
--- a/front_end/timeline_model/TimelineProfileTree.js
+++ b/front_end/timeline_model/TimelineProfileTree.js
@@ -20,6 +20,9 @@ WebInspector.TimelineProfileTree.Node = class {
this.children;
/** @type {?WebInspector.TimelineProfileTree.Node} */
this.parent;
+
+ /** @type {string} */
+ this._groupId = '';
this._isGroupNode = false;
}
@@ -36,26 +39,32 @@ WebInspector.TimelineProfileTree.Node = class {
* @param {!Array} filters
* @param {number} startTime
* @param {number} endTime
- * @param {function(!WebInspector.TracingModel.Event):(string|symbol)=} eventIdCallback
+ * @param {function(!WebInspector.TracingModel.Event, string):string=} eventGroupIdCallback
* @return {!WebInspector.TimelineProfileTree.Node}
*/
-WebInspector.TimelineProfileTree.buildTopDown = function(events, filters, startTime, endTime, eventIdCallback) {
+WebInspector.TimelineProfileTree.buildTopDown = function(events, filters, startTime, endTime, eventGroupIdCallback) {
// Temporarily deposit a big enough value that exceeds the max recording time.
var /** @const */ initialTime = 1e7;
var root = new WebInspector.TimelineProfileTree.Node();
root.totalTime = initialTime;
root.selfTime = initialTime;
root.children = /** @type {!Map} */ (new Map());
+ var pageFrameIdStack = [];
var parent = root;
/**
* @param {!WebInspector.TracingModel.Event} e
*/
function onStartEvent(e) {
+ var pageFrameId = WebInspector.TimelineModel.eventFrameId(e) || pageFrameIdStack.peekLast();
+ pageFrameIdStack.push(pageFrameId);
if (!WebInspector.TimelineModel.isVisible(filters, e))
return;
var time = e.endTime ? Math.min(endTime, e.endTime) - Math.max(startTime, e.startTime) : 0;
- var id = eventIdCallback ? eventIdCallback(e) : Symbol('uniqueEventId');
+ var groupId = eventGroupIdCallback ? eventGroupIdCallback(e, pageFrameId) : Symbol('uniqueGroupId');
+ var id = eventGroupIdCallback ? WebInspector.TimelineProfileTree._eventId(e) : Symbol('uniqueEventId');
+ if (typeof groupId === 'string' && typeof id === 'string')
+ id += '/' + groupId;
if (!parent.children)
parent.children = /** @type {!Map} */ (new Map());
var node = parent.children.get(id);
@@ -69,6 +78,7 @@ WebInspector.TimelineProfileTree.buildTopDown = function(events, filters, startT
node.parent = parent;
node.id = id;
node.event = e;
+ node._groupId = groupId;
parent.children.set(id, node);
}
parent.selfTime -= time;
@@ -84,12 +94,13 @@ WebInspector.TimelineProfileTree.buildTopDown = function(events, filters, startT
* @param {!WebInspector.TracingModel.Event} e
*/
function onEndEvent(e) {
+ pageFrameIdStack.pop();
if (!WebInspector.TimelineModel.isVisible(filters, e))
return;
parent = parent.parent;
}
- var instantEventCallback = eventIdCallback ? undefined : onStartEvent; // Ignore instant events when aggregating.
+ var instantEventCallback = eventGroupIdCallback ? undefined : onStartEvent; // Ignore instant events when aggregating.
WebInspector.TimelineModel.forEachEvent(events, onStartEvent, onEndEvent, instantEventCallback, startTime, endTime);
root.totalTime -= root.selfTime;
root.selfTime = 0;
@@ -98,11 +109,11 @@ WebInspector.TimelineProfileTree.buildTopDown = function(events, filters, startT
/**
* @param {!WebInspector.TimelineProfileTree.Node} topDownTree
- * @param {?function(!WebInspector.TimelineProfileTree.Node):!WebInspector.TimelineProfileTree.Node=} groupingCallback
* @return {!WebInspector.TimelineProfileTree.Node}
*/
-WebInspector.TimelineProfileTree.buildBottomUp = function(topDownTree, groupingCallback) {
+WebInspector.TimelineProfileTree.buildBottomUp = function(topDownTree) {
var buRoot = new WebInspector.TimelineProfileTree.Node();
+ var aggregator = new WebInspector.TimelineAggregator();
buRoot.selfTime = 0;
buRoot.totalTime = 0;
/** @type {!Map} */
@@ -116,8 +127,8 @@ WebInspector.TimelineProfileTree.buildBottomUp = function(topDownTree, groupingC
* @param {!WebInspector.TimelineProfileTree.Node} tdNode
*/
function processNode(tdNode) {
- var buParent = groupingCallback && groupingCallback(tdNode) || buRoot;
- if (buParent !== buRoot) {
+ var buParent = typeof tdNode._groupId === 'string' ? aggregator.groupNodeForId(tdNode._groupId, tdNode.event) : buRoot;
+ if (buParent !== buRoot && !buParent.parent) {
buRoot.children.set(buParent.id, buParent);
buParent.parent = buRoot;
}
@@ -205,61 +216,35 @@ WebInspector.TimelineProfileTree.eventStackFrame = function(event) {
return /** @type {?Protocol.Runtime.CallFrame} */ (initiator && initiator.stackTrace && initiator.stackTrace[0] || null);
};
+/**
+ * @param {!WebInspector.TracingModel.Event} event
+ * @return {string}
+ */
+WebInspector.TimelineProfileTree._eventId = function(event) {
+ if (event.name === WebInspector.TimelineModel.RecordType.JSFrame) {
+ var data = event.args['data'];
+ return 'f:' + data['functionName'] + '@' + (data['scriptId'] || data['url'] || '');
+ }
+ return event.name;
+};
+
+
/**
* @unrestricted
*/
WebInspector.TimelineAggregator = class {
- /**
- * @param {function(!WebInspector.TracingModel.Event):string} titleMapper
- * @param {function(!WebInspector.TracingModel.Event):string} categoryMapper
- */
- constructor(titleMapper, categoryMapper) {
- this._titleMapper = titleMapper;
- this._categoryMapper = categoryMapper;
+ constructor() {
/** @type {!Map} */
this._groupNodes = new Map();
}
- /**
- * @param {!WebInspector.TracingModel.Event} event
- * @return {string}
- */
- static eventId(event) {
- if (event.name === WebInspector.TimelineModel.RecordType.JSFrame) {
- var data = event.args['data'];
- return 'f:' + data['functionName'] + '@' + (data['scriptId'] || data['url'] || '');
- }
- return event.name + ':@' + WebInspector.TimelineProfileTree.eventURL(event);
- }
-
- /**
- * @param {string} url
- * @return {boolean}
- */
- static isExtensionInternalURL(url) {
- return url.startsWith(WebInspector.TimelineAggregator._extensionInternalPrefix);
- }
-
- /**
- * @param {!WebInspector.TimelineAggregator.GroupBy} groupBy
- * @return {?function(!WebInspector.TimelineProfileTree.Node):!WebInspector.TimelineProfileTree.Node}
- */
- groupFunction(groupBy) {
- var idMapper = this._nodeToGroupIdFunction(groupBy);
- return idMapper && this._nodeToGroupNode.bind(this, idMapper);
- }
-
/**
* @param {!WebInspector.TimelineProfileTree.Node} root
- * @param {!WebInspector.TimelineAggregator.GroupBy} groupBy
* @return {!WebInspector.TimelineProfileTree.Node}
*/
- performGrouping(root, groupBy) {
- var nodeMapper = this.groupFunction(groupBy);
- if (!nodeMapper)
- return root;
+ performGrouping(root) {
for (var node of root.children.values()) {
- var groupNode = nodeMapper(node);
+ var groupNode = this.groupNodeForId(node._groupId, node.event);
groupNode.parent = root;
groupNode.selfTime += node.selfTime;
groupNode.totalTime += node.totalTime;
@@ -271,56 +256,13 @@ WebInspector.TimelineAggregator = class {
}
/**
- * @param {!WebInspector.TimelineAggregator.GroupBy} groupBy
- * @return {?function(!WebInspector.TimelineProfileTree.Node):string}
+ * @param {string} groupId
+ * @param {!WebInspector.TracingModel.Event} event
+ * @return {!WebInspector.TimelineProfileTree.Node}
*/
- _nodeToGroupIdFunction(groupBy) {
- /**
- * @param {!WebInspector.TimelineProfileTree.Node} node
- * @return {string}
- */
- function groupByURL(node) {
- return WebInspector.TimelineProfileTree.eventURL(node.event) || '';
- }
-
- /**
- * @param {boolean} groupSubdomains
- * @param {!WebInspector.TimelineProfileTree.Node} node
- * @return {string}
- */
- function groupByDomain(groupSubdomains, node) {
- var url = WebInspector.TimelineProfileTree.eventURL(node.event) || '';
- if (WebInspector.TimelineAggregator.isExtensionInternalURL(url))
- return WebInspector.TimelineAggregator._extensionInternalPrefix;
- var parsedURL = url.asParsedURL();
- if (!parsedURL)
- return '';
- if (parsedURL.scheme === 'chrome-extension')
- return parsedURL.scheme + '://' + parsedURL.host;
- if (!groupSubdomains)
- return parsedURL.host;
- if (/^[.0-9]+$/.test(parsedURL.host))
- return parsedURL.host;
- var domainMatch = /([^.]*\.)?[^.]*$/.exec(parsedURL.host);
- return domainMatch && domainMatch[0] || '';
- }
-
- switch (groupBy) {
- case WebInspector.TimelineAggregator.GroupBy.None:
- return null;
- case WebInspector.TimelineAggregator.GroupBy.EventName:
- return node => node.event ? this._titleMapper(node.event) : '';
- case WebInspector.TimelineAggregator.GroupBy.Category:
- return node => node.event ? this._categoryMapper(node.event) : '';
- case WebInspector.TimelineAggregator.GroupBy.Subdomain:
- return groupByDomain.bind(null, false);
- case WebInspector.TimelineAggregator.GroupBy.Domain:
- return groupByDomain.bind(null, true);
- case WebInspector.TimelineAggregator.GroupBy.URL:
- return groupByURL;
- default:
- return null;
- }
+ groupNodeForId(groupId, event) {
+ var node = this._groupNodes.get(groupId);
+ return node || this._buildGroupNode(groupId, event);
}
/**
@@ -339,30 +281,6 @@ WebInspector.TimelineAggregator = class {
this._groupNodes.set(id, groupNode);
return groupNode;
}
-
- /**
- * @param {function(!WebInspector.TimelineProfileTree.Node):string} nodeToGroupId
- * @param {!WebInspector.TimelineProfileTree.Node} node
- * @return {!WebInspector.TimelineProfileTree.Node}
- */
- _nodeToGroupNode(nodeToGroupId, node) {
- var id = nodeToGroupId(node);
- return this._groupNodes.get(id) || this._buildGroupNode(id, node.event);
- }
};
-/**
- * @enum {string}
- */
-WebInspector.TimelineAggregator.GroupBy = {
- None: 'None',
- EventName: 'EventName',
- Category: 'Category',
- Domain: 'Domain',
- Subdomain: 'Subdomain',
- URL: 'URL'
-};
-
-
-WebInspector.TimelineAggregator._extensionInternalPrefix = 'extensions::';
WebInspector.TimelineAggregator._groupNodeFlag = Symbol('groupNode');
diff --git a/front_end/ui/ActionRegistry.js b/front_end/ui/ActionRegistry.js
index b37cff6e91..4e445c6ee2 100644
--- a/front_end/ui/ActionRegistry.js
+++ b/front_end/ui/ActionRegistry.js
@@ -112,6 +112,20 @@ WebInspector.Action = class extends WebInspector.Object {
return this._extension.descriptor()['iconClass'] || '';
}
+ /**
+ * @return {string}
+ */
+ toggledIcon() {
+ return this._extension.descriptor()['toggledIconClass'] || '';
+ }
+
+ /**
+ * @return {boolean}
+ */
+ toggleWithRedColor() {
+ return !!this._extension.descriptor()['toggleWithRedColor'];
+ }
+
/**
* @param {boolean} enabled
*/
diff --git a/front_end/ui/ColorSwatch.js b/front_end/ui/ColorSwatch.js
index aa3066bb20..97fbd9e898 100644
--- a/front_end/ui/ColorSwatch.js
+++ b/front_end/ui/ColorSwatch.js
@@ -204,7 +204,8 @@ WebInspector.BezierSwatch = class extends HTMLSpanElement {
*/
createdCallback() {
var root = WebInspector.createShadowRootWithCoreStyles(this, 'ui/bezierSwatch.css');
- this._iconElement = root.createChild('span', 'bezier-swatch-icon');
+ this._iconElement = WebInspector.Icon.create('smallicon-bezier', 'bezier-swatch-icon');
+ root.appendChild(this._iconElement);
this._textElement = this.createChild('span');
root.createChild('content');
}
@@ -283,7 +284,8 @@ WebInspector.CSSShadowSwatch = class extends HTMLSpanElement {
*/
createdCallback() {
var root = WebInspector.createShadowRootWithCoreStyles(this, 'ui/cssShadowSwatch.css');
- this._iconElement = root.createChild('span', 'shadow-swatch-icon');
+ this._iconElement = WebInspector.Icon.create('smallicon-shadow', 'shadow-swatch-icon');
+ root.appendChild(this._iconElement);
root.createChild('content');
this._contentElement = this.createChild('span');
}
diff --git a/front_end/ui/FilterBar.js b/front_end/ui/FilterBar.js
index 56531b870c..4fbec7ed66 100644
--- a/front_end/ui/FilterBar.js
+++ b/front_end/ui/FilterBar.js
@@ -43,7 +43,7 @@ WebInspector.FilterBar = class extends WebInspector.HBox {
this._enabled = true;
this.element.classList.add('filter-bar');
- this._filterButton = new WebInspector.ToolbarButton(WebInspector.UIString('Filter'), 'filter-toolbar-item');
+ this._filterButton = new WebInspector.ToolbarToggle(WebInspector.UIString('Filter'), 'largeicon-filter');
this._filterButton.addEventListener('click', this._handleFilterButtonClick, this);
this._filters = [];
@@ -94,20 +94,6 @@ WebInspector.FilterBar = class extends WebInspector.HBox {
this._updateFilterButton();
}
- /**
- * @return {string}
- */
- _filterBarState() {
- if (this._filtersShown)
- return WebInspector.FilterBar.FilterBarState.Shown;
- var isActive = false;
- for (var i = 0; i < this._filters.length; ++i) {
- if (this._filters[i].isActive())
- return WebInspector.FilterBar.FilterBarState.Active;
- }
- return WebInspector.FilterBar.FilterBarState.Inactive;
- }
-
_updateFilterBar() {
var visible = this._alwaysShowFilters || (this._filtersShown && this._enabled);
this.element.classList.toggle('hidden', !visible);
@@ -123,7 +109,16 @@ WebInspector.FilterBar = class extends WebInspector.HBox {
}
_updateFilterButton() {
- this._filterButton.setState(this._filterBarState());
+ if (this._filtersShown) {
+ this._filterButton.setToggled(true);
+ this._filterButton.setToggleWithRedColor(false);
+ return;
+ }
+ this._filterButton.setToggleWithRedColor(true);
+ var isActive = false;
+ for (var filter of this._filters)
+ isActive = isActive || filter.isActive();
+ this._filterButton.setToggled(isActive);
}
/**
diff --git a/front_end/ui/Icon.js b/front_end/ui/Icon.js
new file mode 100644
index 0000000000..6a6cdd9a7c
--- /dev/null
+++ b/front_end/ui/Icon.js
@@ -0,0 +1,168 @@
+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @constructor
+ * @extends {HTMLSpanElement}
+ */
+WebInspector.Icon = class extends HTMLSpanElement {
+ constructor() {
+ super();
+ throw new Error('icon must be created via factory method.');
+ }
+
+ /**
+ * @param {string=} iconType
+ * @param {string=} className
+ * @return {!WebInspector.Icon}
+ */
+ static create(iconType, className) {
+ if (!WebInspector.Icon._constructor)
+ WebInspector.Icon._constructor = registerCustomElement('span', 'ui-icon', WebInspector.Icon.prototype);
+
+ var icon = /** @type {!WebInspector.Icon} */ (new WebInspector.Icon._constructor());
+ if (className)
+ icon.className = className;
+ if (iconType)
+ icon.setIconType(iconType);
+ return icon;
+ }
+
+ /**
+ * @override
+ */
+ createdCallback() {
+ /** @type {?WebInspector.Icon.Descriptor} */
+ this._descriptor = null;
+ /** @type {string} */
+ this._iconType = '';
+ }
+
+ /**
+ * @param {string} iconType
+ */
+ setIconType(iconType) {
+ if (this._descriptor) {
+ this.style.removeProperty(this._propertyName());
+ this.style.removeProperty('width');
+ this.style.removeProperty('height');
+ this.style.removeProperty('transform');
+ this.classList.remove(this._spritesheetClass());
+ this.classList.remove(this._iconType);
+ this._iconType = '';
+ this._descriptor = null;
+ }
+ var descriptor = WebInspector.Icon.Descriptors[iconType] || null;
+ if (descriptor) {
+ this._iconType = iconType;
+ this._descriptor = descriptor;
+ this.style.setProperty(this._propertyName(), this._propertyValue());
+ this.style.setProperty('width', this._descriptor.width + 'px');
+ this.style.setProperty('height', this._descriptor.height + 'px');
+ if (this._descriptor.transform)
+ this.style.setProperty('transform', this._descriptor.transform);
+ this.classList.add(this._spritesheetClass());
+ this.classList.add(this._iconType);
+ } else if (iconType) {
+ throw new Error(`ERROR: failed to find icon descriptor for type: ${iconType}`);
+ }
+ }
+
+ /**
+ * @return {string}
+ */
+ _spritesheetClass() {
+ return 'spritesheet-' + this._descriptor.spritesheet + (this._descriptor.isMask ? '-mask' : '');
+ }
+
+ /**
+ * @return {string}
+ */
+ _propertyName() {
+ return this._descriptor.isMask ? '-webkit-mask-position' : 'background-position';
+ }
+
+ /**
+ * @return {string}
+ */
+ _propertyValue() {
+ return `${this._descriptor.x}px ${this._descriptor.y}px`;
+ }
+};
+
+/** @typedef {{x: number, y: number, width: number, height: number, spritesheet: string, isMask: (boolean|undefined)}} */
+WebInspector.Icon.Descriptor;
+
+/** @enum {!WebInspector.Icon.Descriptor} */
+WebInspector.Icon.Descriptors = {
+ 'smallicon-error': {x: -20, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
+ 'smallicon-revoked-error': {x: -40, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
+ 'smallicon-warning': {x: -60, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
+ 'smallicon-info': {x: -80, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
+ 'smallicon-device': {x: -100, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
+ 'smallicon-red-ball': {x: -120, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
+ 'smallicon-green-ball': {x: -140, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
+ 'smallicon-orange-ball': {x: -160, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
+ 'smallicon-thick-right-arrow': {x: -180, y: 0, width: 10, height: 10, spritesheet: 'smallicons'},
+ 'smallicon-user-command': {x: 0, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},
+ 'smallicon-text-prompt': {x: -20, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},
+ 'smallicon-command-result': {x: -40, y: -20, width: 10, height: 10, spritesheet: 'smallicons'},
+ 'smallicon-shadow': {x: -60, y: -20, width: 10, height: 10, spritesheet: 'smallicons', isMask: true},
+ 'smallicon-bezier': {x: -80, y: -20, width: 10, height: 10, spritesheet: 'smallicons', isMask: true},
+ 'smallicon-dropdown-arrow': {x: -18, y: -96, width: 12, height: 12, spritesheet: 'largeicons', isMask: true},
+
+ 'largeicon-longclick-triangle': {x: -290, y: -46, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-menu': {x: -192, y: -24, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-delete': {x: -128, y: -0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-node-search': {x: -320, y: -120, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-add': {x: -224, y: -120, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-clear': {x: -64, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-rotate-screen': {x: -192, y: -144, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-phone': {x: -320, y: -96, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-block': {x: -32, y: -144, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-layout-editor': {x: 0, y: -144, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-foreground-color': {x: -128, y: -144, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-background-color': {x: -96, y: -144, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-text-shadow': {x: -192, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-box-shadow': {x: -160, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-pause-animation': {x: -320, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-replay-animation': {x: -320, y: -24, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-play-animation': {x: -320, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-eyedropper': {x: -288, y: -120, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-rotate': {x: -160, y: -120, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-center': {x: -128, y: -120, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-pan': {x: -98, y: -120, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-waterfall': {x: -128, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-filter': {x: -32, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-trash-bin': {x: -128, y: -24, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-pretty-print': {x: -256, y: -24, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-deactivate-breakpoints': {x: 0, y: -24, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-activate-breakpoints': {x: -32, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-resume': {x: 0, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-pause': {x: -32, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-pause-on-exceptions': {x: -256, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-play-back': {x: -64, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true, transform: 'scaleX(-1)'},
+ 'largeicon-play': {x: -64, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-step-over': {x: -128, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-step-out': {x: -96, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-step-in': {x: -64, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-camera': {x: -96, y: -24, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-stop-recording': {x: -288, y: -24, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-start-recording': {x: -288, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-large-list': {x: -224, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-visibility': {x: -96, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-refresh': {x: 0, y: 0, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-dock-to-right': {x: -256, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-dock-to-bottom': {x: -32, y: -24, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-undock': {x: 0, y: -48, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+
+ 'largeicon-show-left-sidebar': {x: -160, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-hide-left-sidebar': {x: -192, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true},
+ 'largeicon-show-right-sidebar': {x: -160, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true, transform: 'rotate(180deg)'},
+ 'largeicon-hide-right-sidebar': {x: -192, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true, transform: 'rotate(180deg)'},
+ 'largeicon-show-top-sidebar': {x: -160, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true, transform: 'translate(4px, 0) rotate(90deg)'},
+ 'largeicon-hide-top-sidebar': {x: -192, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true, transform: 'translate(4px, 1px) rotate(90deg)'},
+ 'largeicon-show-bottom-sidebar': {x: -160, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true, transform: 'translate(4px, 0) rotate(-90deg)'},
+ 'largeicon-hide-bottom-sidebar': {x: -192, y: -72, width: 28, height: 24, spritesheet: 'largeicons', isMask: true, transform: 'translate(4px, 1px) rotate(-90deg)'},
+};
diff --git a/front_end/ui/InspectorView.js b/front_end/ui/InspectorView.js
index 9a89222a4c..f671fc3c73 100644
--- a/front_end/ui/InspectorView.js
+++ b/front_end/ui/InspectorView.js
@@ -51,7 +51,7 @@ WebInspector.InspectorView = class extends WebInspector.VBox {
this._drawerTabbedPane = this._drawerTabbedLocation.tabbedPane();
this._drawerTabbedPane.setMinimumSize(0, 27);
var closeDrawerButton =
- new WebInspector.ToolbarButton(WebInspector.UIString('Close drawer'), 'delete-toolbar-item');
+ new WebInspector.ToolbarButton(WebInspector.UIString('Close drawer'), 'largeicon-delete');
closeDrawerButton.addEventListener('click', this._closeDrawer.bind(this));
this._drawerTabbedPane.rightToolbar().appendToolbarItem(closeDrawerButton);
this._drawerSplitWidget.installResizer(this._drawerTabbedPane.headerElement());
diff --git a/front_end/ui/SplitWidget.js b/front_end/ui/SplitWidget.js
index 6761770924..879947c785 100644
--- a/front_end/ui/SplitWidget.js
+++ b/front_end/ui/SplitWidget.js
@@ -833,7 +833,7 @@ WebInspector.SplitWidget = class extends WebInspector.Widget {
*/
createShowHideSidebarButton(title) {
this._showHideSidebarButtonTitle = WebInspector.UIString(title);
- this._showHideSidebarButton = new WebInspector.ToolbarButton('', 'sidebar-toolbar-item');
+ this._showHideSidebarButton = new WebInspector.ToolbarButton('', '');
this._showHideSidebarButton.addEventListener('click', buttonClicked.bind(this));
this._updateShowHideSidebarButton();
@@ -855,9 +855,17 @@ WebInspector.SplitWidget = class extends WebInspector.Widget {
if (!this._showHideSidebarButton)
return;
var sidebarHidden = this._showMode === WebInspector.SplitWidget.ShowMode.OnlyMain;
- var side =
- this.isVertical() ? (this.isSidebarSecond() ? 'right' : 'left') : (this.isSidebarSecond() ? 'bottom' : 'top');
- this._showHideSidebarButton.setState(side + '-' + (sidebarHidden ? 'show' : 'hide'));
+ var glyph = '';
+ if (sidebarHidden) {
+ glyph = this.isVertical() ?
+ (this.isSidebarSecond() ? 'largeicon-show-right-sidebar' : 'largeicon-show-left-sidebar') :
+ (this.isSidebarSecond() ? 'largeicon-show-bottom-sidebar' : 'largeicon-show-top-sidebar');
+ } else {
+ glyph = this.isVertical() ?
+ (this.isSidebarSecond() ? 'largeicon-hide-right-sidebar' : 'largeicon-hide-left-sidebar') :
+ (this.isSidebarSecond() ? 'largeicon-hide-bottom-sidebar' : 'largeicon-hide-top-sidebar');
+ }
+ this._showHideSidebarButton.setGlyph(glyph);
this._showHideSidebarButton.setTitle(
sidebarHidden ? WebInspector.UIString('Show %s', this._showHideSidebarButtonTitle) :
WebInspector.UIString('Hide %s', this._showHideSidebarButtonTitle));
diff --git a/front_end/ui/Toolbar.js b/front_end/ui/Toolbar.js
index cc0645ffa7..4c9ea9623f 100644
--- a/front_end/ui/Toolbar.js
+++ b/front_end/ui/Toolbar.js
@@ -55,7 +55,8 @@ WebInspector.Toolbar = class {
* @return {!WebInspector.ToolbarItem}
*/
static createActionButton(action, toggledOptions, untoggledOptions) {
- var button = new WebInspector.ToolbarToggle(action.title(), action.icon());
+ var button = new WebInspector.ToolbarToggle(action.title(), action.icon(), action.toggledIcon());
+ button.setToggleWithRedColor(action.toggleWithRedColor());
button.addEventListener('click', action.execute, action);
action.addEventListener(WebInspector.Action.Events.Enabled, enabledChanged);
action.addEventListener(WebInspector.Action.Events.Toggled, toggled);
@@ -88,7 +89,8 @@ WebInspector.Toolbar = class {
if (buttons && buttons.length) {
if (!longClickController) {
longClickController = new WebInspector.LongClickController(button.element, showOptions);
- longClickGlyph = button.element.createChild('div', 'long-click-glyph toolbar-button-theme');
+ longClickGlyph = WebInspector.Icon.create('largeicon-longclick-triangle', 'long-click-glyph');
+ button.element.appendChild(longClickGlyph);
longClickButtons = buttons;
}
} else {
@@ -104,7 +106,7 @@ WebInspector.Toolbar = class {
function showOptions() {
var buttons = longClickButtons.slice();
- var mainButtonClone = new WebInspector.ToolbarToggle(action.title(), action.icon());
+ var mainButtonClone = new WebInspector.ToolbarToggle(action.title(), action.icon(), action.toggledIcon());
mainButtonClone.addEventListener('click', clicked);
/**
@@ -453,14 +455,14 @@ WebInspector.ToolbarButton = class extends WebInspector.ToolbarItem {
this.element.addEventListener('mousedown', this._mouseDown.bind(this), false);
this.element.addEventListener('mouseup', this._mouseUp.bind(this), false);
- this._glyphElement = this.element.createChild('div', 'toolbar-glyph hidden');
+ this._glyphElement = WebInspector.Icon.create('', 'toolbar-glyph hidden');
+ this.element.appendChild(this._glyphElement);
this._textElement = this.element.createChild('div', 'toolbar-text hidden');
this.setTitle(title);
if (glyph)
this.setGlyph(glyph);
this.setText(text || '');
- this._state = '';
this._title = '';
}
@@ -481,10 +483,7 @@ WebInspector.ToolbarButton = class extends WebInspector.ToolbarItem {
setGlyph(glyph) {
if (this._glyph === glyph)
return;
- if (this._glyph)
- this._glyphElement.classList.remove(this._glyph);
- if (glyph)
- this._glyphElement.classList.add(glyph);
+ this._glyphElement.setIconType(glyph);
this._glyphElement.classList.toggle('hidden', !glyph);
this.element.classList.toggle('toolbar-has-glyph', !!glyph);
this._glyph = glyph;
@@ -497,30 +496,13 @@ WebInspector.ToolbarButton = class extends WebInspector.ToolbarItem {
this.element.style.backgroundImage = 'url(' + iconURL + ')';
}
- /**
- * @return {string}
- */
- state() {
- return this._state;
- }
-
- /**
- * @param {string} state
- */
- setState(state) {
- if (this._state === state)
- return;
- this.element.classList.remove('toolbar-state-' + this._state);
- this.element.classList.add('toolbar-state-' + state);
- this._state = state;
- }
-
/**
* @param {number=} width
*/
turnIntoSelect(width) {
this.element.classList.add('toolbar-has-dropdown');
- this.element.createChild('div', 'toolbar-dropdown-arrow');
+ var dropdownArrowIcon = WebInspector.Icon.create('smallicon-dropdown-arrow', 'toolbar-dropdown-arrow');
+ this.element.appendChild(dropdownArrowIcon);
if (width)
this.element.style.width = width + 'px';
}
@@ -597,12 +579,14 @@ WebInspector.ToolbarToggle = class extends WebInspector.ToolbarButton {
/**
* @param {string} title
* @param {string=} glyph
- * @param {string=} text
+ * @param {string=} toggledGlyph
*/
- constructor(title, glyph, text) {
- super(title, glyph, text);
+ constructor(title, glyph, toggledGlyph) {
+ super(title, glyph, '');
this._toggled = false;
- this.setState('off');
+ this._untoggledGlyph = glyph;
+ this._toggledGlyph = toggledGlyph;
+ this.element.classList.add('toolbar-state-off');
}
/**
@@ -619,7 +603,17 @@ WebInspector.ToolbarToggle = class extends WebInspector.ToolbarButton {
if (this._toggled === toggled)
return;
this._toggled = toggled;
- this.setState(toggled ? 'on' : 'off');
+ this.element.classList.toggle('toolbar-state-on', toggled);
+ this.element.classList.toggle('toolbar-state-off', !toggled);
+ if (this._toggledGlyph && this._untoggledGlyph)
+ this.setGlyph(toggled ? this._toggledGlyph : this._untoggledGlyph);
+ }
+
+ /**
+ * @param {boolean} toggleWithRedColor
+ */
+ setToggleWithRedColor(toggleWithRedColor) {
+ this.element.classList.toggle('toolbar-toggle-with-red-color', toggleWithRedColor);
}
};
@@ -633,7 +627,7 @@ WebInspector.ToolbarMenuButton = class extends WebInspector.ToolbarButton {
* @param {boolean=} useSoftMenu
*/
constructor(contextMenuHandler, useSoftMenu) {
- super('', 'menu-toolbar-item');
+ super('', 'largeicon-menu');
this._contextMenuHandler = contextMenuHandler;
this._useSoftMenu = !!useSoftMenu;
}
@@ -765,7 +759,8 @@ WebInspector.ToolbarComboBox = class extends WebInspector.ToolbarItem {
super(createElementWithClass('span', 'toolbar-select-container'));
this._selectElement = this.element.createChild('select', 'toolbar-item');
- this.element.createChild('div', 'toolbar-dropdown-arrow');
+ var dropdownArrowIcon = WebInspector.Icon.create('smallicon-dropdown-arrow', 'toolbar-dropdown-arrow');
+ this.element.appendChild(dropdownArrowIcon);
if (changeHandler)
this._selectElement.addEventListener('change', changeHandler, false);
if (className)
diff --git a/front_end/ui/UIUtils.js b/front_end/ui/UIUtils.js
index 391a4d6702..4cc9916252 100644
--- a/front_end/ui/UIUtils.js
+++ b/front_end/ui/UIUtils.js
@@ -1454,8 +1454,10 @@ WebInspector.appendStyle =
* @this {Element}
*/
createdCallback: function() {
- var root = WebInspector.createShadowRootWithCoreStyles(this, 'ui/smallIcon.css');
- this._iconElement = root.createChild('div');
+ var root = WebInspector.createShadowRootWithCoreStyles(this);
+ this._iconElement = WebInspector.Icon.create();
+ this._iconElement.style.setProperty('margin-right', '4px');
+ root.appendChild(this._iconElement);
root.createChild('content');
},
@@ -1464,7 +1466,7 @@ WebInspector.appendStyle =
* @this {Element}
*/
set type(type) {
- this._iconElement.className = type;
+ this._iconElement.setIconType(type);
},
__proto__: HTMLLabelElement.prototype
diff --git a/front_end/ui/bezierSwatch.css b/front_end/ui/bezierSwatch.css
index e8cb16929f..dbe25d9fae 100644
--- a/front_end/ui/bezierSwatch.css
+++ b/front_end/ui/bezierSwatch.css
@@ -12,25 +12,13 @@
position: relative;
margin-left: 1px;
margin-right: 2px;
- width: 10px;
- height: 10px;
top: 1px;
- display: inline-block;
-webkit-user-select: none;
line-height: 10px;
- -webkit-mask-image: url(Images/smallIcons.png);
- -webkit-mask-size: 190px 30px;
- -webkit-mask-position: -80px -20px;
background-color: #9C27B0;
cursor: default;
}
-@media (-webkit-min-device-pixel-ratio: 1.1) {
-.bezier-swatch-icon {
- -webkit-mask-image: url(Images/smallIcons_2x.png);
-}
-} /* media */
-
.bezier-swatch-icon:hover {
background-color: #800080;
}
diff --git a/front_end/ui/cssShadowSwatch.css b/front_end/ui/cssShadowSwatch.css
index 3c050b44d2..4c68f60302 100644
--- a/front_end/ui/cssShadowSwatch.css
+++ b/front_end/ui/cssShadowSwatch.css
@@ -12,24 +12,12 @@
position: relative;
margin-left: 1px;
margin-right: 2px;
- width: 10px;
- height: 10px;
top: 1px;
- display: inline-block;
-webkit-user-select: none;
line-height: 10px;
- -webkit-mask-image: url(Images/smallIcons.png);
- -webkit-mask-size: 190px 30px;
- -webkit-mask-position: -60px -20px;
background-color: #9C27B0;
}
-@media (-webkit-min-device-pixel-ratio: 1.1) {
-.shadow-swatch-icon {
- -webkit-mask-image: url(Images/smallIcons_2x.png);
-}
-} /* media */
-
.shadow-swatch-icon:hover {
background-color: #800080;
}
diff --git a/front_end/ui/inspectorCommon.css b/front_end/ui/inspectorCommon.css
index f8834cf607..d3039f97ad 100644
--- a/front_end/ui/inspectorCommon.css
+++ b/front_end/ui/inspectorCommon.css
@@ -321,3 +321,23 @@ label[is=dt-icon-label] {
overflow: auto;
z-index: 500;
}
+
+span[is=ui-icon] {
+ display: inline-block;
+ flex-shrink: 0;
+}
+
+.spritesheet-smallicons {
+ background-image: -webkit-image-set(url(Images/smallIcons.png) 1x, url(Images/smallIcons_2x.png) 2x);
+ background-size: 190px 30px;
+}
+
+.spritesheet-smallicons-mask {
+ -webkit-mask-image: -webkit-image-set(url(Images/smallIcons.png) 1x, url(Images/smallIcons_2x.png) 2x);
+ -webkit-mask-size: 190px 30px;
+}
+
+.spritesheet-largeicons-mask {
+ -webkit-mask-image: -webkit-image-set(url(Images/toolbarButtonGlyphs.png) 1x, url(Images/toolbarButtonGlyphs_2x.png) 2x);
+ -webkit-mask-size: 352px 168px;
+}
\ No newline at end of file
diff --git a/front_end/ui/module.json b/front_end/ui/module.json
index 78a826a8c1..1f2f5415c9 100644
--- a/front_end/ui/module.json
+++ b/front_end/ui/module.json
@@ -25,6 +25,7 @@
"FilterBar.js",
"ForwardedInputEventHandler.js",
"HistoryInput.js",
+ "Icon.js",
"Infobar.js",
"InplaceEditor.js",
"TextEditor.js",
@@ -82,7 +83,6 @@
"viewContainers.css",
"slider.css",
"smallBubble.css",
- "smallIcon.css",
"softContextMenu.css",
"splitWidget.css",
"toolbar.css",
diff --git a/front_end/ui/smallIcon.css b/front_end/ui/smallIcon.css
deleted file mode 100644
index 6c5b79627c..0000000000
--- a/front_end/ui/smallIcon.css
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
- * Copyright (c) 2015 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-div {
- width: 10px;
- height: 10px;
- margin-right: 4px;
- display: inline-block;
- flex-shrink: 0;
-}
-
-div.error-icon,
-div.revokedError-icon,
-div.warning-icon,
-div.info-icon,
-div.device-icon,
-div.red-ball,
-div.green-ball,
-div.orange-ball {
- background-image: url(Images/smallIcons.png);
- background-size: 190px 30px;
-}
-
-@media (-webkit-min-device-pixel-ratio: 1.1) {
-div.error-icon,
-div.revokedError-icon,
-div.warning-icon,
-div.info-icon,
-div.device-icon,
-div.red-ball,
-div.green-ball,
-div.orange-ball {
- background-image: url(Images/smallIcons_2x.png);
-}
-} /* media */
-
-div.error-icon {
- background-position: -20px 0;
-}
-
-div.revokedError-icon {
- background-position: -40px 0;
-}
-
-div.warning-icon {
- background-position: -60px 0;
-}
-
-div.info-icon {
- background-position: -80px 0;
-}
-
-div.device-icon {
- background-position: -100px 0;
-}
-
-div.red-ball {
- background-position: -120px 0;
-}
-
-div.green-ball {
- background-position: -140px 0;
-}
-
-div.orange-ball {
- background-position: -160px 0;
-}
diff --git a/front_end/ui/toolbar.css b/front_end/ui/toolbar.css
index a0aa2efa78..2532ad8445 100644
--- a/front_end/ui/toolbar.css
+++ b/front_end/ui/toolbar.css
@@ -48,24 +48,12 @@
}
.toolbar-dropdown-arrow {
- -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
- -webkit-mask-size: 352px 168px;
- -webkit-mask-position: -18px -96px;
background-color: #6D6D6D;
- width: 12px;
- height: 12px;
- display: inline-block;
pointer-events: none;
margin: auto 0;
flex: none;
}
-@media (-webkit-min-device-pixel-ratio: 1.1) {
- .toolbar-dropdown-arrow {
- -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
- }
-} /* media */
-
/* Toolbar item */
.toolbar-button {
@@ -102,7 +90,7 @@
margin-left: 0;
}
-.toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.menu-toolbar-item) {
+.toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.largeicon-menu) {
font-weight: bold;
}
@@ -113,7 +101,7 @@
cursor: pointer;
}
-:not(.toolbar-render-as-links) .toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.menu-toolbar-item).hover {
+:not(.toolbar-render-as-links) .toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.largeicon-menu).hover {
background-color: #f3f3f3;
}
@@ -181,6 +169,15 @@
background-color: #f3f3f3 !important;
}
+.toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-glyph {
+ background-color: rgb(216, 0, 0) !important;
+}
+
+:host-context(.-theme-with-dark-background) .toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-glyph {
+ background-color: hsl(0, 100%, 65%) !important;
+}
+
+
/* Checkbox */
.toolbar-item.checkbox {
@@ -243,21 +240,10 @@ input.toolbar-item.hover {
.long-click-glyph {
position: absolute;
background-color: #5a5a5a;
- -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
- -webkit-mask-position: -290px -46px;
- -webkit-mask-size: 352px 168px;
- width: 28px;
- height: 24px;
top: 0;
left: 0;
}
-@media (-webkit-min-device-pixel-ratio: 1.1) {
-.long-click-glyph {
- -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
-}
-} /* media */
-
.toolbar-button.emulate-active {
background-color: rgb(163, 163, 163);
}
@@ -272,271 +258,6 @@ input.toolbar-item.hover {
left: -2px;
}
-/* Predefined items */
-
-.dock-toolbar-item-undock.toolbar-glyph {
- -webkit-mask-position: 0 -48px;
-}
-
-.dock-toolbar-item-bottom.toolbar-glyph {
- -webkit-mask-position: -32px -24px;
-}
-
-.dock-toolbar-item-right.toolbar-glyph {
- -webkit-mask-position: -256px -48px;
-}
-
-.menu-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -192px -24px;
-}
-
-.node-search-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -320px -120px;
-}
-
-.delete-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -128px 0;
-}
-
-.clear-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -64px 0;
-}
-
-.refresh-toolbar-item.toolbar-glyph {
- -webkit-mask-position: 0 0;
-}
-
-.visibility-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -96px 0;
-}
-
-.large-list-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -224px 0;
-}
-
-.record-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -288px 0;
-}
-
-.toolbar-state-on .record-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -288px -24px;
-}
-
-.camera-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -96px -24px;
-}
-
-.step-in-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -64px -72px;
-}
-
-.step-out-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -96px -72px;
-}
-
-.step-over-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -128px -72px;
-}
-
-.play-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -64px -48px;
-}
-
-.play-backwards-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -64px -48px;
- transform: scaleX(-1);
-}
-
-.stop-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -96px -48px;
-}
-
-.pause-on-exceptions-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -256px 0;
-}
-
-.pause-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -32px -72px;
-}
-
-.toolbar-state-on .pause-toolbar-item.toolbar-glyph {
- -webkit-mask-position: 0 -72px;
-}
-
-.toolbar-state-on .breakpoint-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -32px 0;
-}
-
-.breakpoint-toolbar-item.toolbar-glyph {
- -webkit-mask-position: 0 -24px;
-}
-
-.notification-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -32px -120px;
-}
-
-.format-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -256px -24px;
-}
-
-.garbage-collect-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -128px -24px;
-}
-
-.filter-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -32px -48px;
-}
-
-.waterfall-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -128px -48px;
-}
-
-.pan-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -98px -120px;
-}
-
-.center-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -128px -120px;
-}
-
-.rotate-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -160px -120px;
-}
-
-.pin-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -256px -120px;
-}
-
-.animation-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -192px -120px;
-}
-
-.eyedropper-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -288px -120px;
-}
-
-.add-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -224px -120px;
-}
-
-.toolbar-state-pause-outline .animation-control-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -320px 0px;
-}
-
-.toolbar-state-replay-outline .animation-control-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -320px -24px;
- background-color: rgb(66, 129, 235) !important;
-}
-
-.toolbar-state-play-outline .animation-control-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -320px -48px;
- background-color: rgb(66, 129, 235) !important;
-}
-
-.box-shadow-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -160px -48px;
-}
-
-.text-shadow-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -192px -48px;
-}
-
-.background-color-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -96px -144px;
-}
-
-.foreground-color-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -128px -144px;
-}
-
-.layout-editor-toolbar-item.toolbar-glyph {
- -webkit-mask-position: 0 -144px;
-}
-
-.block-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -32px -144px;
-}
-
-.phone-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -320px -96px;
-}
-
-.rotate-screen-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -192px -144px;
-}
-
-.enter-fullscreen-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -256px -96px;
-}
-
-.responsive-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -288px -96px;
-}
-
-.frame-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -256px -144px;
-}
-
-.domain-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -160px -144px;
-}
-
-.folder-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -224px -144px;
-}
-
-.goto-source-toolbar-item.toolbar-glyph {
- -webkit-mask-position: 0 -120px;
-}
-
-.toolbar-state-left-show .sidebar-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -160px -72px;
-}
-
-.toolbar-state-left-hide .sidebar-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -192px -72px;
-}
-
-.toolbar-state-right-show .sidebar-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -288px -72px;
-}
-
-.toolbar-state-right-hide .sidebar-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -256px -72px;
-}
-
-.toolbar-state-top-show .sidebar-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -160px -72px;
- transform: translate(4px, 0) rotate(90deg);
-}
-
-.toolbar-state-top-hide .sidebar-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -192px -72px;
- transform: translate(4px, -1px) rotate(90deg);
-}
-
-.toolbar-state-bottom-show .sidebar-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -288px -72px;
- transform: translate(4px, 0) rotate(90deg);
-}
-
-.toolbar-state-bottom-hide .sidebar-toolbar-item.toolbar-glyph {
- -webkit-mask-position: -256px -72px;
- transform: translate(4px, -1px) rotate(90deg);
-}
-
-.toolbar-state-on .record-toolbar-item.toolbar-glyph,
-.toolbar-state-active .filter-toolbar-item.toolbar-glyph,
-.toolbar-state-active .block-toolbar-item.toolbar-glyph {
- background-color: rgb(216, 0, 0) !important;
-}
-
-:host-context(.-theme-with-dark-background) .toolbar-state-active .filter-toolbar-item.toolbar-glyph,
-:host-context(.-theme-with-dark-background) .toolbar-state-active .block-toolbar-item.toolbar-glyph,
-:host-context(.-theme-with-dark-background) .toolbar-state-on .record-toolbar-item.toolbar-glyph {
- background-color: hsl(0, 100%, 65%) !important;
-}
-
span.toolbar-select-container.toolbar-item.warning {
background: #ffd7d7;
padding: 0 5px 0 0;